/* ==========================================================================
   KeyDesignArt — Seçili işler (portföy vitrini)
   Görsel öncelikli asimetrik ızgara; metin görselin üstünde perdeyle okunur.
   ========================================================================== */

@layer sections {

    .kda-work__head {
        display: grid;
        gap: var(--kda-space-4);
        margin-bottom: var(--kda-space-7);
    }

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

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

    /* Izgara
       ---------------------------------------------------------------------- */
    .kda-work__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kda-space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Kart
       ---------------------------------------------------------------------- */
    .kda-work__item {
        position: relative;
        max-width: none;
        display: grid;
        align-content: end;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        isolation: isolate;
        transition: border-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-work__item:hover {
        border-color: var(--kda-line-strong);
    }

    .kda-work__item:has(a:focus-visible) {
        border-color: var(--kda-accent);
    }

    /* Vurgu çubuğu — yaklaşım kartlarındaki jestin aynısı
       ---------------------------------------------------------------------- */
    .kda-work__item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 2.25rem;
        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-work__item:hover::before,
    .kda-work__item:has(a:focus-visible)::before {
        width: 100%;
    }

    /* Görsel — akış dışında ve içeriğin altında, böylece kartın tamamı
       başlıktaki bağlantının genişleyen tıklama alanına kalıyor.
       ---------------------------------------------------------------------- */
    .kda-work__image {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.001);
        transition: transform var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-work__item:hover .kda-work__image {
        transform: scale(1.05);
    }

    /* Perde ve metin
       ---------------------------------------------------------------------- */
    .kda-work__body {
        display: grid;
        gap: var(--kda-space-2);
        padding: var(--kda-space-8) var(--kda-space-5) var(--kda-space-5);
        background: linear-gradient(to top,
            rgba(5, 5, 6, 0.94) 0%,
            rgba(5, 5, 6, 0.78) 42%,
            rgba(5, 5, 6, 0) 100%);
    }

    .kda-work__meta {
        margin: 0;
        max-width: none;
        color: var(--kda-accent);
        font-family: var(--kda-font-mono);
        font-size: var(--kda-text-2xs);
        letter-spacing: var(--kda-tracking-wide);
    }

    .kda-work__title {
        margin: 0;
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-xl);
        font-weight: var(--kda-weight-medium);
        line-height: 1.15;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    .kda-work__title a {
        color: inherit;
        text-decoration: none;
    }

    .kda-work__title a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .kda-work__summary {
        margin: 0;
        max-width: 52ch;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
        line-height: 1.7;
    }

    /* Dar kartta özet iki satıra iner — portfolyo kartıyla AYNI kusur
       ⚠️ Gerekçenin tamamı `sections/portfolio.css` içindeki eş kuralda yazılı.
       Buradaki bantlar FARKLI, çünkü bu kartın ızgarası 48rem'de iki sütuna
       geçiyor (portfolyo 56rem'de) ve üst dolgusu 56px (`--kda-space-8`,
       portfolyoda 72px). Ölçüm ikisini ayrı ayrı yapıldı.
       Ölçüm — gerçek metin kaybı kırpmasız / `2` ile:
         320px 109 → 0  ·  360px 60 → 0  ·  375px 52 → 0  ·  390px 18 → 0
         430–640px zaten temiz  ·  768px 25 → 0  ·  896px ve üstü temiz
       ⚠️ Dar bandın eşiği portfolyoyla aynı tutuldu (35rem): bu kartta 430px'te
       kayıp zaten sıfır, orada kırpmak zararsız — iki bileşenin aynı eşiği
       taşıması ileride birini güncelleyip ötekini unutma riskini azaltıyor.
       ⚠️ İki sütun bandına `3` satır veriliyor, portfolyodaki gerekçeyle aynı:
       kart en kısa duruma ızgaranın yeni sütuna geçtiği anda düşüyor, oraya pay
       bırakmak gerekiyor. Bant 64rem'de bitiyor çünkü orada yerleşim
       asimetrikleşiyor ve kartlar zaten uzuyor (1024px'te taşma sıfır).
       ---------------------------------------------------------------------- */
    @media (max-width: 34.999rem) {
        .kda-work__summary {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }

    @media (min-width: 48rem) and (max-width: 63.999rem) {
        .kda-work__summary {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }

    /* Ok
       ---------------------------------------------------------------------- */
    .kda-work__arrow {
        position: absolute;
        top: var(--kda-space-4);
        right: var(--kda-space-4);
        z-index: 2;
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        pointer-events: none;
        border-radius: var(--kda-radius-button);
        background: var(--kda-accent);
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity var(--kda-dur-base) var(--kda-ease),
                    transform var(--kda-dur-base) var(--kda-ease);
    }

    .kda-work__arrow::after {
        content: "";
        width: 0.9rem;
        height: 0.9rem;
        background: var(--kda-on-accent);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .kda-work__item:hover .kda-work__arrow,
    .kda-work__item:has(a:focus-visible) .kda-work__arrow {
        opacity: 1;
        transform: none;
    }

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

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

        .kda-work__item {
            grid-column: span 3;
        }
    }

    /* Geniş ekranda satır yüksekliğini her satırın ilk kartı belirler,
       diğerleri esneyip ona uyar. Hepsine oran verilirse dar kart kısa kalıyor.
       ---------------------------------------------------------------------- */
    @media (min-width: 64rem) {
        .kda-work__item {
            aspect-ratio: auto;
        }

        .kda-work__item:nth-child(1) {
            grid-column: span 4;
            aspect-ratio: 16 / 10;
        }

        .kda-work__item:nth-child(2) {
            grid-column: span 2;
        }

        .kda-work__item:nth-child(3) {
            grid-column: span 3;
            aspect-ratio: 16 / 10;
        }

        .kda-work__item:nth-child(4) {
            grid-column: span 3;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .kda-work__item:hover .kda-work__image {
            transform: none;
        }
    }

}