/* ==========================================================================
   KeyDesignArt — Ürünlerimiz
   Çerçeveli kart: solda ürün görseli, sağda ad, anlatım ve eylemler. Görselin
   tamamı ürün sayfasına giden bir bağlantıdır; üzerine gelince sağ üstünde ok
   rozeti belirir. Kartın üst kenarındaki vurgu çubuğu sayfanın diğer
   kartlarıyla aynı jest. Arka planda bir köşeden hafif sarı huzme sızar.
   İkinci ürün kaydında görsel karşı tarafa geçer.
   ========================================================================== */

@layer sections {

    /* Başlık bloğu — yaklaşım, portföy ve referans bölümleriyle aynı ritim
       ---------------------------------------------------------------------- */
    .kda-product__head {
        display: grid;
        gap: var(--kda-space-4);
        margin-bottom: var(--kda-space-8);
    }

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

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

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

    /* Kart
       ---------------------------------------------------------------------- */
    .kda-product__card {
        --kda-product-beam-x: 100%;

        position: relative;
        isolation: isolate;
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        transition: border-color var(--kda-dur-base) var(--kda-ease);
    }

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

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

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

    /* Huzme — kartın bir köşesinden sızan sarı ışık
       ---------------------------------------------------------------------- */
    .kda-product__beam {
        position: absolute;
        z-index: 0;
        inset: 0;
        background: radial-gradient(58% 72% at var(--kda-product-beam-x) 0%,
            var(--kda-accent-ghost) 0%, transparent 62%);
        opacity: 0.85;
        pointer-events: none;
        transition: opacity var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-product__card:hover .kda-product__beam,
    .kda-product__card:has(a:focus-visible) .kda-product__beam {
        opacity: 1;
    }

    /* Görsel — tamamı ürün sayfasına giden bağlantı.
       Çerçevenin dört kenarındaki boşluk eşit; görselin oranı ne olursa olsun
       kırpılmadan, olduğu gibi gösterilir.
       ---------------------------------------------------------------------- */
    .kda-product__media {
        position: relative;
        z-index: 1;
        display: grid;
        align-content: center;
        padding: var(--kda-space-5);
    }

    .kda-product__frame {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface-2);
    }

    .kda-product__shot {
        display: block;
        width: 100%;
        height: auto;
        transform: scale(1.001);
        transition: transform var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-product__media:hover .kda-product__shot {
        transform: scale(1.05);
    }

    /* Ok rozeti — görselin sağ üstünde, üzerine gelince belirir
       ---------------------------------------------------------------------- */
    .kda-product__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-product__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-product__media:hover .kda-product__arrow,
    .kda-product__card:has(a:focus-visible) .kda-product__arrow {
        opacity: 1;
        transform: none;
    }

    /* Metin tarafı
       ---------------------------------------------------------------------- */
    .kda-product__body {
        position: relative;
        z-index: 1;
        display: grid;
        align-content: center;
        gap: var(--kda-space-4);
        padding: var(--kda-space-6);
    }

    /* "Yayında" rozeti + ürün türü. Rozetin kendisi ortak katmanda
       (`components.css` → `.kda-status`); tipografiyi sarmalayıcı taşır.
       ⚠️ `products.css`'teki `.kda-products__kind` ile AYNI kurallar — iki sayfada
       aynı blok basılıyor (kullanıcı isteği). Biri değişirse öteki de değişmeli.
       Sütun düzeni: rozet üstte, tür yazısı altında.
       ⚠️ `max-width: none` gerekli — `base.css` her `p`'ye okuma ölçüsü koyuyor. */
    .kda-product__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;
    }

    .kda-product__name {
        max-width: none;
        margin: 0;
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-2xl);
        font-weight: var(--kda-weight-bold);
        line-height: var(--kda-leading-snug);
        letter-spacing: var(--kda-tracking-display);
        text-transform: uppercase;
        overflow-wrap: break-word;
    }

    .kda-product__lead {
        max-width: var(--kda-measure);
        margin: 0;
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-light);
        line-height: var(--kda-leading-normal);
    }

    .kda-product__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--kda-space-3) var(--kda-space-6);
        margin-top: var(--kda-space-2);
    }

    .kda-product__actions .kda-arrow-link {
        min-height: var(--kda-space-7);
    }

    .kda-product__site {
        max-width: 100%;
        color: var(--kda-ink-muted);
        font-weight: var(--kda-weight-medium);
        letter-spacing: var(--kda-tracking-wide);
        overflow-wrap: anywhere;
    }

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

    /* Duyarlı yerleşim — geniş ekranda görsel solda, metin sağda
       ---------------------------------------------------------------------- */
    @media (min-width: 64rem) {
        .kda-product__list {
            gap: var(--kda-space-7);
        }

        .kda-product__card {
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
        }

        .kda-product__media {
            grid-column: 1;
            grid-row: 1;
            padding: var(--kda-space-6);
        }

        .kda-product__body {
            grid-column: 2;
            grid-row: 1;
            padding: var(--kda-space-7) var(--kda-space-8);
        }

        /* Görseli olmayan ürün — metin kartın tamamını kaplar
           ------------------------------------------------------------------ */
        .kda-product__body:only-child {
            grid-column: 1 / -1;
        }

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

        .kda-product__lead {
            font-size: var(--kda-text-base);
        }

        /* Çift sıradaki kayıtta görsel karşı tarafa geçer, huzme de onunla
           ------------------------------------------------------------------ */
        .kda-product__card:nth-child(even) {
            --kda-product-beam-x: 0%;
        }

        .kda-product__card:nth-child(even) .kda-product__media {
            grid-column: 2;
        }

        .kda-product__card:nth-child(even) .kda-product__body {
            grid-column: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .kda-product__beam,
        .kda-product__shot,
        .kda-product__arrow {
            transition: none;
        }

        .kda-product__media:hover .kda-product__shot {
            transform: none;
        }
    }

    @media (forced-colors: active) {
        .kda-product__beam {
            display: none;
        }

        .kda-product__arrow {
            background: Highlight;
        }
    }

}