/* ==========================================================================
   KeyDesignArt — Zengin metin (prose)
   Yönetim panelinden gelen HTML gövdelerin tipografisi: içerik sayfaları,
   sözleşmeler, blog yazıları. Gövde HTML'i sınıf taşımadığı için kurallar
   eleman seçicileriyle yazılır; kapsayıcı .kda-prose sınırı çizer.
   ========================================================================== */

@layer sections {

    /* ⚠️⚠️ OKUMA ÖLÇÜSÜ SINIRI YOK — kullanıcının kesin kuralı: "hep tam satır",
       sağda boşluk bırakılmıyor. Burası eskiden `70ch` idi ve gövdeler satırın
       ortasında bitiyordu; bölümler tek tek `max-width: none` ile bunu eziyordu,
       yani her yeni gövde sınıfı aynı hatayı yeniden doğuruyordu. Sınır artık
       KAYNAKTA yok. `ch` cinsinden bir sınırı buraya geri koyma. */
    .kda-prose {
        max-width: none;
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-base);
        line-height: 1.85;
    }

    /* Başlıklar — bölüm ayrımı sarıyla değil kılcal çizgiyle kuruluyor;
       uzun bir belgede her başlıkta vurgu rengi ağırlık yapıyor.
       ---------------------------------------------------------------------- */
    .kda-prose h2 {
        margin: var(--kda-space-7) 0 var(--kda-space-4);
        padding-top: var(--kda-space-4);
        border-top: 1px solid var(--kda-line);
        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;
        text-wrap: pretty;
    }

    .kda-prose > h2:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .kda-prose h3 {
        margin: var(--kda-space-6) 0 var(--kda-space-3);
        color: var(--kda-ink);
        font-family: var(--kda-font-sans);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-semibold);
        line-height: 1.4;
        letter-spacing: var(--kda-tracking-tight);
        text-transform: none;
    }

    /* Metin
       ---------------------------------------------------------------------- */
    .kda-prose p {
        max-width: none;
        margin: 0 0 var(--kda-space-4);
    }

    .kda-prose > :last-child {
        margin-bottom: 0;
    }

    .kda-prose strong {
        color: var(--kda-ink);
        font-weight: var(--kda-weight-semibold);
    }

    .kda-prose a {
        color: var(--kda-accent);
        text-decoration-color: color-mix(in srgb, var(--kda-accent) 45%, transparent);
    }

    .kda-prose a:hover {
        color: var(--kda-accent-bright);
    }

    /* Listeler
       ---------------------------------------------------------------------- */
    .kda-prose ul,
    .kda-prose ol {
        margin: 0 0 var(--kda-space-4);
        padding-left: var(--kda-space-5);
    }

    /* ⚠️ Zengin bloklar liste etiketiyle kuruluyor ve `.kda-prose ul` seçicisi
       (sınıf + etiket) `.kda-cards` gibi tek sınıflı seçicilerden daha güçlü;
       kendi `padding: 0` değerleri eziliyor ve bloklar başlıktan içeride
       başlıyordu. Sıfırlama burada, aynı güçte yazılıyor. */
    .kda-prose ul.kda-cards,
    .kda-prose ol.kda-steps,
    .kda-prose ul.kda-stats {
        padding-left: 0;
    }

    .kda-prose li {
        max-width: none;
        margin-bottom: var(--kda-space-2);
        padding-left: var(--kda-space-2);
    }

    .kda-prose li::marker {
        color: var(--kda-ink-faint);
    }

    .kda-prose ol > li::marker {
        font-family: var(--kda-font-mono);
        font-size: var(--kda-text-sm);
    }

    .kda-prose ul ul,
    .kda-prose ol ol,
    .kda-prose ul ol,
    .kda-prose ol ul {
        margin-top: var(--kda-space-2);
        margin-bottom: 0;
    }

    /* Tablo — dar ekranda kendi içinde kayar, sayfayı yana kaydırmaz
       ---------------------------------------------------------------------- */
    .kda-prose table {
        display: block;
        width: max-content;
        max-width: 100%;
        margin: 0 0 var(--kda-space-5);
        overflow-x: auto;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        font-size: var(--kda-text-md);
    }

    .kda-prose th,
    .kda-prose td {
        padding: var(--kda-space-3) var(--kda-space-4);
        border-bottom: 1px solid var(--kda-line);
        vertical-align: top;
    }

    .kda-prose thead th {
        color: var(--kda-ink);
        font-size: var(--kda-text-2xs);
        font-weight: var(--kda-weight-bold);
        letter-spacing: var(--kda-tracking-wide);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .kda-prose tbody tr:last-child th,
    .kda-prose tbody tr:last-child td {
        border-bottom: 0;
    }

    .kda-prose blockquote {
        margin: 0 0 var(--kda-space-4);
        color: var(--kda-ink);
    }

    /* Sözleşme sayfası — kart kart bölümler
       Gövdedeki her <h2> ayrı bir karta dönüşür (bölme işini görünüm yapar).
       Numaralandırma süsleme değil: hukuki metinlerde bölümlere numarayla atıf yapılır.
       ---------------------------------------------------------------------- */
    /* Sayfanın son bloğu: alt boşluğu kabuk zaten veriyor. Kapanış çağrısındaki
       kuralın aynısı — yoksa alt bilgiyle arada çift boşluk oluşuyor.
       ---------------------------------------------------------------------- */
    .kda-doc {
        padding-block-end: 0;
    }

    /* Giriş metni kartların dışında ve satırı tam kullanır
       ---------------------------------------------------------------------- */
    .kda-doc__intro {
        max-width: none;
        margin-bottom: var(--kda-space-7);
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-light);
        line-height: 1.7;
    }

    .kda-doc__list {
        display: grid;
        gap: var(--kda-space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-doc__item {
        position: relative;
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kda-space-4);
        margin: 0;
        overflow: hidden;
        padding: var(--kda-space-6) var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    /* Vurgu çubuğu — kapanış çağrısındaki gibi kartın tamamı boyunca ve hep açık.
       Kart tıklanabilir olmadığı için hover'da değişmiyor.
       ---------------------------------------------------------------------- */
    .kda-doc__item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        background: var(--kda-accent);
        box-shadow: 0 0 14px var(--kda-accent-glow);
        pointer-events: none;
    }

    /* Izgara öğesinin varsayılan `min-width: auto` değeri, geniş bir tablonun
       sütunu içeriğine göre büyütmesine izin veriyor; gövdedeki `overflow-x: hidden`
       de taşan kısmı kırpıyordu. Sıfırlanınca tablo kendi içinde kayıyor.
       ---------------------------------------------------------------------- */
    .kda-doc__head,
    .kda-doc__body {
        min-width: 0;
    }

    .kda-doc__head {
        display: grid;
        align-content: start;
        gap: var(--kda-space-3);
    }

    .kda-doc__num {
        color: transparent;
        font-family: var(--kda-font-display);
        font-size: 2.25rem;
        font-weight: var(--kda-weight-bold);
        line-height: 1;
        letter-spacing: -0.02em;
        -webkit-text-stroke: 1px var(--kda-line-strong);
    }

    .kda-doc__title {
        margin: 0;
        padding: 0;
        border: 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;
        text-wrap: pretty;
    }

    /* Okuma ölçüsünü sütunun kendisi veriyor; metne ayrıca sınır konmuyor.
       Sınır konunca sağda kartın yarısı kadar boşluk kalıyordu.
       ---------------------------------------------------------------------- */
    .kda-doc__body {
        max-width: none;
    }

    @media (min-width: 64rem) {
        .kda-doc__item {
            grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
            gap: var(--kda-space-7);
            padding: var(--kda-space-7) var(--kda-space-6);
        }

        .kda-doc__body > table {
            max-width: 100%;
        }
    }

    /* ======================================================================
       YAZI GÖVDESİNDE KULLANILABİLEN ZENGİN BLOKLAR
       Bunlar yönetim panelinden yazılan HTML'in sınıflarıyla çalışır.
       Sanitizer div/span/figure/img/class/id'ye izin veriyor, yeni etiket
       gerekmez. Kullanım örnekleri docs/TASARIM-SISTEMI.md içinde.
       ====================================================================== */

    /* Vurgu kutusu — <div class="kda-note kda-note--tip"><p>…</p></div>
       ---------------------------------------------------------------------- */
    .kda-note {
        position: relative;
        display: grid;
        gap: var(--kda-space-2);
        margin: 0 0 var(--kda-space-5);
        padding: var(--kda-space-5) var(--kda-space-5) var(--kda-space-5) var(--kda-space-8);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    .kda-note::before {
        content: "";
        position: absolute;
        left: var(--kda-space-4);
        top: var(--kda-space-5);
        width: 1.15rem;
        height: 1.15rem;
        background: var(--kda-accent);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .kda-note > :last-child {
        margin-bottom: 0;
    }

    .kda-note strong:first-child {
        color: var(--kda-ink);
    }

    .kda-note--warning::before {
        background: var(--kda-danger);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 21.4 20H2.6z'/%3E%3Cpath d='M12 9.5v4.2M12 17h.01'/%3E%3C/svg%3E");
    }

    .kda-note--tip::before {
        background: var(--kda-success);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 18h5.6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 1 3.6 10.8c-.5.4-.8 1-.8 1.6H9.2c0-.6-.3-1.2-.8-1.6A6 6 0 0 1 12 3Z'/%3E%3C/svg%3E");
    }

    /* Özellik kartları — <ul class="kda-cards"><li><strong>Başlık</strong><p>…</p></li></ul>
       ---------------------------------------------------------------------- */
    .kda-cards {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kda-space-3);
        margin: 0 0 var(--kda-space-5);
        padding: 0;
        list-style: none;
    }

    .kda-cards > li {
        position: relative;
        max-width: none;
        margin: 0;
        padding: var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
        line-height: 1.7;
        transition: border-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-cards > li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 2.25rem;
        height: 2px;
        background: var(--kda-accent);
        box-shadow: 0 0 14px var(--kda-accent-glow);
        transition: width var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-cards > li:hover::before {
        width: 100%;
    }

    .kda-cards > li > strong:first-child {
        display: block;
        margin-bottom: var(--kda-space-2);
        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;
    }

    .kda-cards > li > p {
        margin: 0;
        max-width: none;
    }

    /* Numaralı adımlar — <ol class="kda-steps"><li><strong>…</strong><p>…</p></li></ol>
       ---------------------------------------------------------------------- */
    .kda-steps {
        display: grid;
        gap: var(--kda-space-3);
        margin: 0 0 var(--kda-space-5);
        padding: 0;
        list-style: none;
        counter-reset: kda-step;
    }

    .kda-steps > li {
        position: relative;
        max-width: none;
        margin: 0;
        padding: var(--kda-space-5) var(--kda-space-5) var(--kda-space-5) var(--kda-space-9);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink-muted);
        counter-increment: kda-step;
    }

    .kda-steps > li::before {
        content: counter(kda-step, decimal-leading-zero);
        position: absolute;
        left: var(--kda-space-5);
        top: var(--kda-space-5);
        color: transparent;
        font-family: var(--kda-font-display);
        font-size: 1.5rem;
        font-weight: var(--kda-weight-bold);
        line-height: 1;
        -webkit-text-stroke: 1px var(--kda-accent);
    }

    /* Adım başlığı da soru gibi: metinden ağırlık ve renkle ayrılır, ölçüyle değil. */
    .kda-steps > li > strong:first-child {
        display: block;
        margin-bottom: var(--kda-space-2);
        color: var(--kda-ink);
        font-size: var(--kda-text-base);
        font-weight: var(--kda-weight-semibold);
    }

    .kda-steps > li > p {
        margin: 0;
        max-width: none;
    }

    /* Sık sorulanlar — <div class="kda-qa"><h3>Soru</h3><p>Cevap</p></div>
       ---------------------------------------------------------------------- */
    .kda-qa {
        position: relative;
        margin: 0 0 var(--kda-space-3);
        padding: var(--kda-space-5) var(--kda-space-5) var(--kda-space-5) var(--kda-space-9);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    .kda-qa::before {
        content: "?";
        position: absolute;
        left: var(--kda-space-5);
        top: var(--kda-space-5);
        display: grid;
        place-items: center;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: var(--kda-radius-button);
        background: var(--kda-accent);
        color: var(--kda-on-accent);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-bold);
    }

    /* Soru, cevaptan ağırlık ve renkle ayrılır; ölçüyle değil. Bir üst
       kademede (text-lg) blok içinde fazla iri duruyordu. */
    .kda-qa > h3 {
        margin: 0 0 var(--kda-space-2);
        font-size: var(--kda-text-base);
    }

    .kda-qa > :last-child {
        margin-bottom: 0;
    }

    /* Öne çıkan sayılar — <ul class="kda-stats"><li><strong>%40</strong><span>…</span></li></ul>
       ---------------------------------------------------------------------- */
    .kda-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
        gap: 0;
        margin: 0 0 var(--kda-space-5);
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        list-style: none;
    }

    .kda-stats > li {
        max-width: none;
        margin: 0;
        padding: var(--kda-space-5);
        background: var(--kda-surface);
        box-shadow: -1px 0 0 var(--kda-line);
    }

    .kda-stats > li > strong {
        display: block;
        color: var(--kda-accent);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-2xl);
        font-weight: var(--kda-weight-bold);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .kda-stats > li > span {
        display: block;
        margin-top: var(--kda-space-2);
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
    }

    /* Alıntı
       ---------------------------------------------------------------------- */
    .kda-prose blockquote {
        margin: 0 0 var(--kda-space-5);
        padding: var(--kda-space-4) 0 var(--kda-space-4) var(--kda-space-5);
        border-left: 2px solid var(--kda-accent);
        color: var(--kda-ink);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-light);
        line-height: 1.6;
    }

    .kda-prose figure {
        margin: 0 0 var(--kda-space-5);
    }

    .kda-prose figure img {
        width: 100%;
        border-radius: var(--kda-radius-button);
    }

    .kda-prose figcaption {
        margin-top: var(--kda-space-3);
        color: var(--kda-ink-faint);
        font-size: var(--kda-text-sm);
    }

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

    /* Boş gövde
       ---------------------------------------------------------------------- */
    .kda-page__empty {
        max-width: none;
        color: var(--kda-ink-muted);
    }

    /* Video bloğu — gövdeye `<div class="kda-video">` konur, içinde YouTube
       bağlantısı durur.
       ⚠️ Kanca SINIF, `data-*` DEĞİL: sanitizer data özniteliklerini düşürüyor.
       ⚠️ Çerçeve sunucuda basılmaz; ziyaretçi tıklayınca `js/video.js` ekler.
       Betik yoksa blok sıradan bir bağlantı olarak kalır ve YouTube'a gider.
       ---------------------------------------------------------------------- */
    .kda-video {
        margin: var(--kda-space-6) 0;
    }

    .kda-video a {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--kda-space-4);
        max-width: none;
        padding: var(--kda-space-4) var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-medium);
        text-decoration: none;
        transition: border-color var(--kda-dur-base) var(--kda-ease),
                    background-color var(--kda-dur-base) var(--kda-ease);
    }

    /* Sarı daire + üstüne binen oynat üçgeni; ayrı bir ikon dosyası
       açmaya değmiyor. Üçgen dairenin optik ortasına 2px kaydırılıyor. */
    .kda-video a::before {
        content: "";
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        background: var(--kda-accent);
        box-shadow: 0 0 24px var(--kda-accent-glow);
    }

    .kda-video a::after {
        content: "";
        position: absolute;
        left: calc(var(--kda-space-5) + 1.15rem);
        width: 0;
        height: 0;
        border-top: 0.45rem solid transparent;
        border-bottom: 0.45rem solid transparent;
        border-left: 0.72rem solid var(--kda-bg);
    }

    .kda-video a:hover {
        border-color: var(--kda-accent);
        background: var(--kda-accent-ghost);
    }

    .kda-video a:focus-visible {
        outline: 2px solid var(--kda-accent-bright);
        outline-offset: 3px;
    }

    .kda-video--ready a {
        cursor: pointer;
    }

    /* Video penceresi — native <dialog>, üst katmanda
       ---------------------------------------------------------------------- */
    .kda-videobox {
        max-width: 100vw;
        max-height: 100dvh;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--kda-ink);
        overflow: hidden;
    }

    .kda-videobox::backdrop {
        background: rgba(3, 3, 4, 0.92);
    }

    .kda-videobox__inner {
        display: grid;
        grid-template-rows: 1fr auto;
        gap: var(--kda-space-4);
        width: 100%;
        height: 100%;
        padding: var(--kda-space-6) var(--kda-gutter) var(--kda-space-5);
    }

    .kda-videobox__frame {
        display: grid;
        place-items: center;
        min-height: 0;
    }

    .kda-videobox__player {
        width: min(100%, 78rem);
        aspect-ratio: 16 / 9;
        max-height: calc(100dvh - 10rem);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: #000;
    }

    .kda-videobox__bar {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kda-videobox__out {
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-sm);
    }

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

    .kda-videobox__close {
        position: absolute;
        top: var(--kda-space-4);
        right: var(--kda-gutter);
        z-index: 2;
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        cursor: pointer;
        transition: border-color var(--kda-dur-base) var(--kda-ease),
                    background-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-videobox__close::before,
    .kda-videobox__close::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1px;
        background: var(--kda-ink);
    }

    .kda-videobox__close::before { transform: rotate(45deg); }
    .kda-videobox__close::after { transform: rotate(-45deg); }

    .kda-videobox__close:hover {
        border-color: var(--kda-accent);
        background: var(--kda-accent-ghost);
    }

    .kda-videobox__close:focus-visible {
        outline: 2px solid var(--kda-accent-bright);
        outline-offset: 3px;
    }

}