/* ==========================================================================
   KeyDesignArt — /urunlerimiz
   Ana sayfadaki ürün kartının (sections/product.css) üstüne biner. Kart aynı
   bileşen olduğu için sıfırdan yazılmadı: iki kopya tutulsa ilk düzenlemede
   iki sayfa birbirinden kayardı. Buradaki dosya yalnızca liste sayfasının
   fazlalarını ekler: tür etiketi, durum nişanı, iki sütunlu özellik listesi ve
   kartın alt kenarındaki künye şeridi.
   ⚠️ Bu sayfa product.css ile BİRLİKTE yüklenir.
   ========================================================================== */

@layer sections {

    /* Ürün satırı — asimetrik bölünme
       ⚠️ 50/50'ye yakın bölünme ölçülen "ucuz görünüm" işaretlerinden biri;
       taranan hiçbir üst düzey ürün satırında yok. Görsel belirgin biçimde
       geniş, metin sütunu dar kalır.
       ---------------------------------------------------------------------- */
    @media (min-width: 64rem) {
        .kda-products .kda-product__card {
            grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        }

        .kda-products .kda-product__body {
            gap: var(--kda-space-3);
            padding: var(--kda-space-7);
        }
    }

    /* Ürün adı bir bağlantı. Alt çizgisi kaldırıldı (kullanıcı kararı): 3xl
       ölçüde `text-underline-offset: 0.22em` çizgiyi ızgara boşluğunun içine
       itiyor ve paragrafa yapıştırıyordu. Portföy kartı da aynı şeyi yapıyor
       (`work.css` `.kda-work__title a`). Bağlantı olduğu üzerine gelince
       renkten anlaşılır; odak halkası genel kuraldan geliyor. */
    .kda-products .kda-product__name {
        margin-bottom: var(--kda-space-1);
    }

    .kda-products .kda-product__name a {
        color: inherit;
        text-decoration: none;
        transition: color var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-products .kda-product__name a:hover,
    .kda-products .kda-product__name a:focus-visible {
        color: var(--kda-accent);
    }

    /* Tür etiketi ve durum nişanı — ürünün ne olduğunu adından önce söyler.
       Nişan tür etiketinin üstünde durur (kullanıcı kararı), yan yana değil.
       ---------------------------------------------------------------------- */
    .kda-products__kind {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kda-space-3);
        max-width: none;
        margin: 0;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-2xs);
        font-weight: var(--kda-weight-bold);
        letter-spacing: var(--kda-tracking-wider);
        text-transform: uppercase;
    }

    /* ⚠️ Rozetin kendisi `components.css` içindeki `.kda-status`'ta.
       Ana sayfa da kullandığı ve `products.css` yüklemediği için oraya taşındı. */

    /* Özellik listesi — hizmet kartındaki kapsam listesiyle aynı jest
       (kılcal çizgi + sarı tire + büyük harf), satır kart geniş olduğu için
       iki sütun. Kılcal çizgi hücrededir: tek sayıda madde kalırsa boşlukta
       parlak bir blok oluşmasın.
       ---------------------------------------------------------------------- */
    .kda-products__features {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0 var(--kda-space-6);
        max-width: none;
        margin: var(--kda-space-2) 0 0;
        padding: 0;
        list-style: none;
    }

    .kda-products__features li {
        display: flex;
        align-items: baseline;
        gap: var(--kda-space-3);
        max-width: none;
        padding-block: 0.42rem;
        box-shadow: 0 -1px 0 var(--kda-line);
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-2xs);
        font-weight: var(--kda-weight-semibold);
        letter-spacing: var(--kda-tracking-wide);
        text-transform: uppercase;
    }

    .kda-products__features li::before {
        content: "";
        flex: 0 0 auto;
        width: 0.5rem;
        height: 1px;
        background: var(--kda-accent);
    }

    @media (min-width: 48rem) {
        .kda-products__features {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Künye şeridi — kartın alt kenarında, iki sütunu birden kaplar.
       Sayfayı cümle uydurarak değil doğrulanabilir olguyla dolduruyor; aynı
       veri detay sayfasındaki künyeden ve şemadaki `offers` düğümünden geliyor.
       ⚠️ Hücre çizgisi `box-shadow: -1px 0 0` ile çiziliyor (`.kda-stats` ile
       aynı sebep): hücre sayısı sütuna bölünmezse artan alan çizgi rengiyle
       parlak bir blok olarak görünüyor.
       ---------------------------------------------------------------------- */
    .kda-products__spec {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
        gap: 0;
        margin: 0;
        overflow: hidden;
        border-top: 1px solid var(--kda-line);
    }

    .kda-products__spec-cell {
        padding: var(--kda-space-4) var(--kda-space-5);
        box-shadow: -1px 0 0 var(--kda-line);
    }

    .kda-products__spec dt {
        margin: 0 0 var(--kda-space-1);
        color: var(--kda-ink-faint);
        font-size: var(--kda-text-2xs);
        font-weight: var(--kda-weight-bold);
        letter-spacing: var(--kda-tracking-wider);
        text-transform: uppercase;
    }

    .kda-products__spec dd {
        margin: 0;
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-sm);
        font-weight: var(--kda-weight-medium);
        line-height: 1.45;
    }

    @media (min-width: 64rem) {
        .kda-products__spec {
            grid-column: 1 / -1;
            grid-row: 2;
        }

        .kda-products__spec-cell {
            padding: var(--kda-space-5) var(--kda-space-6);
        }
    }

}