/* ==========================================================================
   KeyDesignArt — Portföy listesi
   Kategori süzgeci (çip şeridi) + büyük görsel kartlar. Kart jesti ana
   sayfadaki vitrinle aynı dili konuşur; burada kartlar daha büyük, meta
   satırında yıl da var ve üstte süzgeç şeridi duruyor.
   Kapanış çağrısı ortak bölüm dosyasından gelir.
   ========================================================================== */

@layer sections {

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

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

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

    /* Süzgeç şeridi — çipler gerçek bağlantıdır, betik yoksa da çalışır
       ---------------------------------------------------------------------- */
    .kda-portfolio__filters ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kda-space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-portfolio__filters li {
        max-width: none;
    }

    /* Yarıçap sistemin 6px'i — bu çipler pill değil (bkz. TASARIM-SISTEMI §3). */
    .kda-portfolio__chip {
        padding: 0.45rem 0.9rem;
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-2xs);
        cursor: pointer;
        transition: border-color var(--kda-dur-base) var(--kda-ease),
                    background-color var(--kda-dur-base) var(--kda-ease),
                    color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-portfolio__chip:hover {
        border-color: color-mix(in srgb, var(--kda-accent) 55%, transparent);
        background: var(--kda-accent-ghost);
        color: var(--kda-ink);
    }

    .kda-portfolio__chip-count {
        color: var(--kda-ink-faint);
        font-family: var(--kda-font-mono);
        font-size: var(--kda-text-2xs);
        letter-spacing: 0;
        transition: color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-portfolio__chip:hover .kda-portfolio__chip-count {
        color: var(--kda-accent);
    }

    /* Seçili çip — sarı dolgu üstünde koyu metin (beyaz okunmuyor) */
    .kda-portfolio__chip[aria-current="page"] {
        border-color: var(--kda-accent);
        background: var(--kda-accent);
        color: var(--kda-on-accent);
        box-shadow: 0 0 18px var(--kda-accent-glow);
    }

    .kda-portfolio__chip[aria-current="page"] .kda-portfolio__chip-count,
    .kda-portfolio__chip[aria-current="page"]:hover .kda-portfolio__chip-count {
        color: color-mix(in srgb, var(--kda-on-accent) 65%, transparent);
    }

    .kda-portfolio__chip[aria-current="page"]:hover {
        border-color: var(--kda-accent-bright);
        background: var(--kda-accent-bright);
        color: var(--kda-on-accent);
    }

    .kda-portfolio__count {
        max-width: none;
        margin: var(--kda-space-5) 0 var(--kda-space-4);
        color: var(--kda-ink-faint);
        font-family: var(--kda-font-mono);
        font-size: var(--kda-text-2xs);
        letter-spacing: var(--kda-tracking-wide);
        text-transform: uppercase;
    }

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

    /* Kart — 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-portfolio__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);
    }

    /* ⚠️ Süzgeç kartları `hidden` özniteliğiyle gizler. Tarayıcının `[hidden]`
       kuralı UA kağıdındadır ve yazar seviyesindeki HER `display` bildirimi onu
       ezer — yukarıdaki `display: grid` yüzünden gizlenen kartlar ekranda
       duruyordu. Bu kural olmadan süzgeç sayıyı günceller ama hiçbir şeyi gizlemez. */
    .kda-portfolio__item[hidden] {
        display: none;
    }

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

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

    .kda-portfolio__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-portfolio__item:hover::before,
    .kda-portfolio__item:has(a:focus-visible)::before {
        width: 100%;
    }

    .kda-portfolio__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-portfolio__item:hover .kda-portfolio__image {
        transform: scale(1.05);
    }

    /* Perde ve metin
       ---------------------------------------------------------------------- */
    .kda-portfolio__body {
        display: grid;
        gap: var(--kda-space-2);
        padding: var(--kda-space-9) var(--kda-space-6) var(--kda-space-6);
        background: linear-gradient(to top,
            rgba(5, 5, 6, 0.95) 0%,
            rgba(5, 5, 6, 0.8) 46%,
            rgba(5, 5, 6, 0) 100%);
    }

    .kda-portfolio__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--kda-space-3);
        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-portfolio__meta-item + .kda-portfolio__meta-item {
        display: flex;
        align-items: center;
        gap: var(--kda-space-3);
        color: var(--kda-ink-muted);
    }

    .kda-portfolio__meta-item + .kda-portfolio__meta-item::before {
        content: "";
        width: 1px;
        height: 0.75rem;
        background: var(--kda-line-strong);
    }

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

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

    /* Kartın konumlandırılmış tek atası kartın kendisi; ok ve çubuk tıklama almaz. */
    .kda-portfolio__title a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .kda-portfolio__title a:focus-visible {
        outline: none;
    }

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

    /* Dar kartta özet iki satıra iner
       ⚠️ Kart `aspect-ratio` + `overflow: hidden` taşıdığı için YÜKSEKLİĞİ
       SABİTTİR ve içeriğe göre büyüyemez; `align-content: end` yüzünden sığmayan
       kısım YUKARI taşıp kırpılır. Kırpılan şey özet değil, önce göz üstü
       satırı sonra başlığın ilk satırıdır — telefonda başlıklar ortadan kesik
       görünüyordu. Kart yüksekliği bilinçli olarak sabit: proje görselleri bu
       orana göre hazırlandı, kart uzarsa `object-fit: cover` onları kırpar.
       ⚠️ Gövdenin üst dolgusu 72px (`--kda-space-9`); taşmanın ilk 72px'i yalnız
       o boşluğu yer, metne dokunmaz. Aşağıdaki bantlar ham taşmaya değil,
       ÖLÇÜLEN GERÇEK METİN KAYBINA göre seçildi.
       Ölçüm (gerçek yazı tipleri, canlı 7 kayıt) — kayıp kırpmasız / `2` ile:
         320px 154 → 0  ·  375px 72 → 0  ·  390px 63 → 0  ·  430px 42 → 0
         480px 0 ama payı yalnız 13px kalıyordu, o yüzden bant 35rem'e uzatıldı
         560–880px zaten temiz ve payı tam, oraya DOKUNULMUYOR
         896px 18 → 0  ·  960px ve üstü iki sütun kuralıyla kapanıyor
       ⚠️ Telefonda `3` satır 375px üstünde yeterli ama 320px'te 26px kaybediyor
       ve payı yok; ileride uzun başlıklı bir proje eklenince geri gelirdi.
       ⚠️ İKİ SÜTUN BANDI AYRI ELE ALINDI ve `3` satır verildi. Kartın en kısa
       olduğu yer her zaman ızgaranın YENİ SÜTUNA GEÇTİĞİ an; 960px'te kırpma
       olmadan taşma tam 72px, yani payı SIFIR. Ölçüm masaüstü tarayıcıda
       yapıldı, gerçek iOS'ta satır sarması bir satır oynayabilir — pay şart.
       `3` ile bandın tamamı: 896→39 · 960→21 · 1024→5 · 1100→0 (hepsi 72'nin
       altında, en dar noktada bile 33px pay). Geniş yerde daha çok metin kalır.
       ---------------------------------------------------------------------- */
    @media (max-width: 34.999rem) {
        .kda-portfolio__summary {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }

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

    /* Ok rozeti
       ---------------------------------------------------------------------- */
    .kda-portfolio__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-portfolio__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-portfolio__item:hover .kda-portfolio__arrow,
    .kda-portfolio__item:has(a:focus-visible) .kda-portfolio__arrow {
        opacity: 1;
        transform: none;
    }

    .kda-portfolio__none {
        margin-top: var(--kda-space-6);
    }

    /* Süzgeç değişince görünen kartlar kısa bir açılışla gelir.
       Betik ızgaraya .is-swapped ekler, animasyon bitince kaldırır.
       ---------------------------------------------------------------------- */
    .kda-portfolio__grid.is-swapped > .kda-portfolio__item:not([hidden]) {
        animation: kda-portfolio-in var(--kda-dur-base) var(--kda-ease) both;
    }

    @keyframes kda-portfolio-in {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: none; }
    }

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

    @media (min-width: 75rem) {
        .kda-portfolio__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .kda-portfolio__item {
            aspect-ratio: 4 / 3;
        }

        /* Üç sütunda kart daralıyor; perde ve başlık ona göre küçülür. */
        .kda-portfolio__body {
            padding: var(--kda-space-8) var(--kda-space-5) var(--kda-space-5);
        }

        .kda-portfolio__title {
            font-size: var(--kda-text-xl);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .kda-portfolio__image,
        .kda-portfolio__item:hover .kda-portfolio__image {
            transform: none;
            transition: none;
        }

        .kda-portfolio__grid.is-swapped > .kda-portfolio__item:not([hidden]) {
            animation: none;
        }
    }

}