/* ==========================================================================
   KeyDesignArt — Ürün detay sayfası
   İki sütun: solda kapak + vaat + panelden gelen gövde, sağda yapışkan kenar
   çubuğu (kimlik + künye, öne çıkanlar, sayfa dizini, teklif).
   ⚠️ Kurgu PROJE DETAYININ (case.css) aynısıdır — kullanıcı kararı: ürün
   sayfası da vaka dosyası gibi okunsun. Önce üstte tam genişlik bir "kimlik
   kilidi" bandı vardı (marka + vaat solda, ekran görüntüsü sağda); kullanıcı
   beğenmedi ve kaldırıldı, geri koyma.
   Ölçüler hizmet detayıyla birebir aynı; service.css'e bağlanmaz — bölüm CSS'i
   kuralı gereği değerler burada tekrar yazılır.
   ⚠️ Ekran görüntüsü KIRPILMAZ: oranın kendisi kompozisyonun parçası.
   ========================================================================== */

@layer sections {

    .kda-productpage {
        display: grid;
        gap: var(--kda-space-9);
    }

    /* Ana sütun — kapak, vaat, gövde
       ---------------------------------------------------------------------- */
    .kda-productpage__layout {
        display: grid;
        gap: var(--kda-space-7);
    }

    .kda-productpage__main {
        display: grid;
        align-content: start;
        gap: var(--kda-space-6);
        min-width: 0;
    }

    /* Sayfanın LCP'si. Kırpılmaz: ekran görüntüsünün kenarı kesilmesin. */
    .kda-productpage__cover {
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface-2);
    }

    .kda-productpage__cover img {
        display: block;
        width: 100%;
        height: auto;
    }

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

    /* Kimlik paneli — kenar çubuğunun ilk kutusu
       Marka işareti burada başlık yerine geçer; panelin ayrı bir metin başlığı
       yok, erişilebilir adı aria-label ile veriliyor.
       ---------------------------------------------------------------------- */
    .kda-productpage__panel--id {
        display: grid;
        justify-items: start;
        gap: var(--kda-space-4);
    }

    /* ⚠️ Marka işareti koyu dolgunun etrafındaki beyaz konturla okunuyor;
       2.75rem'in altına inince kontur incelip kayboluyor. Bu yüzden
       filter / opacity / invert / grayscale UYGULANMAZ.
       ---------------------------------------------------------------------- */
    .kda-productpage__logo {
        display: block;
        width: auto;
        height: clamp(2.75rem, 2.4rem + 0.9vw, 3.25rem);
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .kda-productpage__name {
        margin: 0;
        max-width: none;
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-xl);
        font-weight: var(--kda-weight-medium);
        text-transform: uppercase;
    }

    /* Künye ile araya çizgi girmesin: dl kendi ayırıcısını taşıyor. */
    .kda-productpage__panel--id .kda-productpage__facts {
        width: 100%;
        border-top: 1px solid var(--kda-line);
    }

    /* Kenar çubuğu ana sütunu zaten daraltıyor; ölçü sınırı üstüne bir de
       uygulanınca sağda ölü alan kalıyor. İki sınıflı seçici bilerek: prose.css
       ile aynı katmanda ve aynı özgüllükte olsaydı kazanan dosya sırası olurdu. */
    .kda-prose.kda-productpage__body {
        max-width: none;
        min-width: 0;
    }

    .kda-productpage__body h2 {
        scroll-margin-top: calc(var(--kda-header-height) + var(--kda-space-5));
    }

    .kda-productpage__aside {
        display: grid;
        align-content: start;
        gap: var(--kda-space-4);
        min-width: 0;
    }

    /* ⚠️ Dar ekranda KİMLİK PANELİ anlatının ÜSTÜNE çıkar. Sayfanın birincil
       eylemi ("Ürünü Deneyin") orada; kenar çubuğu olduğu gibi altta kalsaydı
       ~450 kelimelik gövdenin arkasına düşerdi. Proje detayında da aynı karar
       verilmişti (orada bütün kenar çubuğu `order: -1` alıyor).
       Burada tamamı değil YALNIZ kimlik paneli öne alınıyor: kenar çubuğunda
       dört panel var, hepsi birden öne çıkarsa içerik ekrandan düşüyor.
       `display: contents` panelleri düzenin kendi ızgara ögeleri yapar, böylece
       `order` çalışır. ⚠️ Bunun bedeli: `aside` dar ekranda erişilebilirlik
       ağacından düşer (yer işareti kaybolur), panellerin kendi başlıkları
       durduğu için gezinme bozulmuyor. */
    @media (max-width: 63.999rem) {
        .kda-productpage__aside {
            display: contents;
        }

        .kda-productpage__panel--id {
            order: -1;
        }
    }

    .kda-productpage__panel {
        position: relative;
        overflow: hidden;
        padding: var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    .kda-productpage__panel-title {
        margin: 0 0 var(--kda-space-4);
        padding-bottom: var(--kda-space-3);
        border-bottom: 1px solid var(--kda-line);
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-medium);
        letter-spacing: 0.012em;
        text-transform: uppercase;
    }

    /* Künye — etiket üstte küçük, değer altta okunur
       ---------------------------------------------------------------------- */
    .kda-productpage__facts {
        display: grid;
        gap: 0;
        margin: 0;
    }

    .kda-productpage__fact {
        padding-block: var(--kda-space-3);
    }

    .kda-productpage__fact + .kda-productpage__fact {
        border-top: 1px solid var(--kda-line);
    }

    .kda-productpage__fact 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-productpage__fact dd {
        margin: 0;
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-md);
        line-height: 1.5;
    }

    /* Öne çıkanlar — hizmet kartındaki kapsam listesiyle aynı jest
       ---------------------------------------------------------------------- */
    .kda-productpage__features {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-productpage__features li {
        display: flex;
        align-items: baseline;
        gap: var(--kda-space-3);
        max-width: none;
        padding-block: 0.42rem;
        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-productpage__features li + li {
        border-top: 1px solid var(--kda-line);
    }

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

    /* Bu sayfada — gövdenin h2'lerinden üretilen dizin
       ---------------------------------------------------------------------- */
    .kda-productpage__outline {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0;
        counter-reset: kda-outline;
        list-style: none;
    }

    .kda-productpage__outline li {
        max-width: none;
        counter-increment: kda-outline;
    }

    .kda-productpage__outline li + li {
        border-top: 1px solid var(--kda-line);
    }

    .kda-productpage__outline a {
        display: flex;
        align-items: baseline;
        gap: var(--kda-space-3);
        padding-block: var(--kda-space-3);
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
        text-decoration: none;
        transition: color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-productpage__outline a::before {
        content: counter(kda-outline, decimal-leading-zero);
        flex: 0 0 auto;
        color: var(--kda-ink-faint);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-xs);
        font-weight: var(--kda-weight-semibold);
        letter-spacing: var(--kda-tracking-wide);
        transition: color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-productpage__outline a:hover {
        color: var(--kda-ink);
    }

    .kda-productpage__outline a:hover::before {
        color: var(--kda-accent);
    }

    /* Ürünün kendi sitesi — hizmet detayındaki teklif paneliyle aynı jest
       ---------------------------------------------------------------------- */
    .kda-productpage__panel--offer {
        isolation: isolate;
        display: grid;
        justify-items: start;
        gap: var(--kda-space-3);
    }

    .kda-productpage__panel--offer::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 2px;
        background: var(--kda-accent);
        box-shadow: 0 0 18px var(--kda-accent-glow);
        pointer-events: none;
    }

    .kda-productpage__offer-beam {
        position: absolute;
        z-index: 0;
        inset: 0;
        background: radial-gradient(58% 72% at 100% 0%, var(--kda-accent-ghost) 0%, transparent 64%);
        pointer-events: none;
    }

    .kda-productpage__panel--offer .kda-productpage__panel-title {
        position: relative;
        z-index: 1;
        width: 100%;
    }

    .kda-productpage__offer-text {
        position: relative;
        z-index: 1;
        max-width: none;
        margin: 0;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
        line-height: 1.7;
    }

    .kda-productpage__panel--offer .kda-btn {
        position: relative;
        z-index: 1;
        margin-top: var(--kda-space-2);
    }

    /* Duyarlı yerleşim
       ---------------------------------------------------------------------- */
    @media (min-width: 64rem) {
        .kda-productpage__layout {
            grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
            gap: var(--kda-space-8);
            align-items: start;
        }

        .kda-productpage__aside {
            position: sticky;
            top: calc(var(--kda-header-height) + var(--kda-space-5));
        }
    }

}