/* Bölüm: entegrasyon kataloğu. */

.ig-group + .ig-group { margin-top: var(--sp-10); }

.ig-group__title {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
}

/* --- ızgara --- */

.ig-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sp-4);
}

/* Telefonda 160px alt sınırı tek sütuna düşürüyordu; sekiz logo alt alta
   uzayıp gidiyordu. Kartın içeriği (logo + tek satır ad) 130px'e sığıyor. */
@media (max-width: 560px) {
    .ig-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: var(--sp-3);
    }
}

.ig-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-align: center;
    color: inherit;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

a.ig-card:hover {
    border-color: var(--brand-300);
    box-shadow: var(--sh-md);
    color: inherit;
}

.ig-card__logo {
    display: grid;
    place-items: center;
    width: 100%;
    height: 44px;
}

.ig-card__logo img {
    max-height: 44px;
    max-width: 120px;
    object-fit: contain;
}

.ig-card__initials {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
}

.ig-card__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.ig-card__note {
    font-size: 11px;
    color: var(--ink-600);
    line-height: 1.45;
}

/* --- liste --- */

.ig-list { display: grid; }

.ig-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
}

.ig-row__name {
    min-width: 180px;
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.ig-row__note {
    flex: 1 1 auto;
    color: var(--ink-600);
    font-size: var(--fs-sm);
}

.section--deep .ig-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

.section--deep .ig-card__name { color: #fff; }
.section--deep .ig-card__note { color: var(--ink-300); }

@media (max-width: 560px) {
    .ig-row { flex-direction: column; gap: var(--sp-1); }
    .ig-row__name { min-width: 0; }
}

/* Henüz yazılmamış entegrasyon.

   Grup başlığı ("Yakında") tek başına yetmiyor: logolara bakan biri başlığı
   atlayıp sekizini de çalışıyor sanabilir. Kart hem SOLUK durur hem üstünde
   rozet taşır — iki ayrı sinyal.

   Logo `filter: grayscale` ile griye çekilir; marka renginin canlı durması
   "bu hazır" izlenimi veriyordu. */
.ig-card--soon {
    position: relative;
    border-style: dashed;
    background: var(--surface-soft);
}

.ig-card--soon .ig-card__logo img {
    filter: grayscale(1);
    opacity: 0.55;
}

.ig-card--soon .ig-card__name {
    /* surface-soft üstünde ink-600 → 6,9:1 — soluk ama okunur kalır */
    color: var(--ink-600);
}

.ig-card__soon {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: var(--r-full);
    background: var(--warning-100, #fef3c7);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    /* warning-100 üstünde warning-800 → 6,4:1 */
    color: var(--warning-800, #92400e);
}

.section--deep .ig-card--soon { background: rgba(255, 255, 255, 0.04); }
.section--deep .ig-card--soon .ig-card__name { color: var(--ink-400); }