/* ==========================================================================
   KeyDesignArt — Referanslar (logo duvarı)
   Tek parça kılcal ızgara: hücreler 1px boşlukla ayrılır, zemin çizgi rengidir.
   Logolar sönük durur, üzerine gelince renklenir ve üstte vurgu çubuğu büyür.
   ========================================================================== */

@layer sections {

    /* Başlık bloğu — yaklaşım ve seçili işler bölümleriyle aynı ritim
       ---------------------------------------------------------------------- */
    .kda-clients__head {
        display: grid;
        gap: var(--kda-space-4);
        margin-bottom: var(--kda-space-7);
    }

    .kda-clients__head h2 {
        max-width: none;
        margin: 0;
        text-wrap: pretty;
    }

    .kda-clients__intro {
        max-width: none;
        margin: 0;
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-light);
    }

    /* Kılcal ızgara
       Çizgiler boşluktan değil hücrenin sol/üst gölgesinden geliyor: kayıt
       sayısı sütun sayısına bölünmese de arta kalan alan çizgi rengiyle
       parlamıyor, sayfa zemininde kalıyor. Dıştaki gölgeler `overflow`
       tarafından kırpılıyor, kenarlıkla çakışmıyor.
       ---------------------------------------------------------------------- */
    .kda-clients__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        list-style: none;
    }

    /* Hücre
       ---------------------------------------------------------------------- */
    .kda-clients__item {
        position: relative;
        max-width: none;
        display: grid;
        place-items: center;
        min-height: clamp(6rem, 3.6rem + 7vw, 9.5rem);
        padding: var(--kda-space-5);
        background: var(--kda-bg);
        box-shadow: -1px 0 0 var(--kda-line), 0 -1px 0 var(--kda-line);
        transition: background-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-clients__item:hover {
        background: var(--kda-surface);
    }

    .kda-clients__item:has(a:focus-visible) {
        background: var(--kda-surface);
    }

    /* Vurgu çubuğu — yaklaşım ve portföy kartlarındaki jestin aynısı
       ---------------------------------------------------------------------- */
    .kda-clients__item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 0;
        height: 2px;
        background: var(--kda-accent);
        box-shadow: 0 0 14px var(--kda-accent-glow);
        pointer-events: none;
        transition: width var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-clients__item:hover::before,
    .kda-clients__item:has(a:focus-visible)::before {
        width: 100%;
    }

    /* Genişleyen bağlantı — hücrenin tamamı tıklanabilir, logo akışta kalır
       ---------------------------------------------------------------------- */
    .kda-clients__link {
        position: absolute;
        inset: 0;
        z-index: 2;
        text-decoration: none;
    }

    /* Logo — koyu zeminde sönük, üzerine gelince tam
       Bütün logolar aynı tuvalde (960×320, 3:1) hazırlanıyor ve her biri kendi
       optik dengesini o tuvalin içinde taşıyor. Bu yüzden kutu sabittir:
       eskiden `max-width` + `max-height` ikilisiyle her logonun kendi oranına
       göre kısıtlanıyordu ve çok yatık ya da kare bir logo diğerlerinin yanında
       küçük görünüyordu.
       ⚠️ `max-height` yalnızca güvenlik ağı: tuvale uymayan bir dosya girerse
       satırı şişirmesin. Yeni logo eklerken tuval oranını koru.
       ---------------------------------------------------------------------- */
    .kda-clients__logo {
        width: 100%;
        height: auto;
        max-width: 15rem;
        max-height: 5.5rem;
        object-fit: contain;
        filter: grayscale(1);
        opacity: 0.55;
        transition: opacity var(--kda-dur-base) var(--kda-ease),
                    filter var(--kda-dur-base) var(--kda-ease);
    }

    .kda-clients__item:hover .kda-clients__logo,
    .kda-clients__item:has(a:focus-visible) .kda-clients__logo {
        filter: none;
        opacity: 1;
    }

    /* Logosuz referans — yazı olarak
       ---------------------------------------------------------------------- */
    .kda-clients__name {
        color: var(--kda-ink-faint);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-medium);
        letter-spacing: var(--kda-tracking-wide);
        text-align: center;
        text-transform: uppercase;
        transition: color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-clients__item:hover .kda-clients__name,
    .kda-clients__item:has(a:focus-visible) .kda-clients__name {
        color: var(--kda-ink);
    }

    .kda-clients > .kda-arrow-link {
        margin-top: var(--kda-space-6);
    }

    /* Duyarlı yerleşim
       ---------------------------------------------------------------------- */
    @media (min-width: 48rem) {
        .kda-clients__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

}