/* ==========================================================================
   VİTRİN DOKÜMANTASYONU — /dokumantasyon
   ==========================================================================

   ÖLÇÜ FİŞİ. Bu dosya göz kararıyla değil ÖLÇÜLEREK yazıldı.
   Kaynak: docs.getunimart.com, 1440px görüntü alanı, Playwright ile
   getComputedStyle + getBoundingClientRect.
   Betikler: /root/screenshot-tool/docs-tam-olc.mjs, docs-parca.mjs, docs-kutu.mjs

     dış dolgu               0 30px  → kullanılabilir 1380px (1440 - 60)
     kolonlar                230 | 25 | 890 | 30 | 205 = 1380   (birebir)
     kolon başlangıçları     x=30 (kenar çubuğu) · x=285 (içerik) · x=1205 (raf)
     üst dolgu               50px
     gövde                   16px / 24px · 400 · rgb(107,112,127)
     h1                      40px / 48px · 500 · rgb(29,39,70) · alt kenar 8px
     h2                      30px / 36px · 500 · rgb(29,39,70) · alt kenar 12px
     h3                      20px / 26px · 500 · rgb(29,39,70) · alt kenar 12px
     p                       16px / 24px · alt kenar 16px
     gezinme başlığı         230 × 48 · dolgu 13px 20px · 16/22 · 500
                             beyaz üzeri rgb(29,39,70) · yarıçap 4px · BÜYÜK HARF
     gezinme bağlantısı      230 × 40 · dolgu 10px · 13/20 · 500 · rgb(29,39,70)
                             ardışık iki bağlantı arası 43px → 3px boşluk
     panel                   1px solid rgb(229,235,239) · yarıçap 2px
                             gölge rgba(4,73,89,.02) 0 3px 6px · kenar 10px 0 25px
     panel maddesi           satır 25px · kenar 16px 0 · sol dolgu 35px
                             (4 maddelik panel 190px: 5+16+25+16+25+16+25+16+25+16+5)
     yazı boyu düğmeleri     117 × 33,19 · 1px solid rgb(223,226,228) · yarıçap 4px
                             gölge rgba(3,13,37,.2) 0 1px 0, rgba(3,13,37,.1) 0 -8px 14px inset
     görünüm anahtarı        52 × 24 · yarıçap 25px

   REFERANSIN KODU, METNİ VE GÖRSELİ KOPYALANMADI. Ölçü kopyalanmaz, ölçülür.
   Sayfadaki her cümle bu deponun KENDİ sözleşmesini anlatıyor.

   BİLEREK AYRIŞTIĞIMIZ ÜÇ YER
   ---------------------------
   1) YAZI TİPİ. Referans Roboto çiziyor. Biz Cabin kullanıyoruz — kabuk
      (başlık/alt bilgi) zaten Cabin ile geliyor ve doküman o kabuğun ALTINDA
      duruyor. Yalnız gövde için ikinci bir aile indirseydik hem ~30 KB fazladan
      yük hem de başlıkla gövde arasında görünür bir yüz farkı olurdu.
      ÖLÇÜLER (boy, satır, ağırlık) referansla birebir aynı bırakıldı.

   2) VURGU RENGİ. Referansın camgöbeği #10b3d6 yerine kabuğun mavisi #215ada.
      İki sayfa aynı başlığı paylaşıyor; camgöbeği bir düğme, mavi bir başka
      düğme çizseydi sayfa iki ayrı siteden derlenmiş gibi görünürdü.

   3) YAZI BOYU VE GÖRÜNÜM ANAHTARLARI JAVASCRIPT'SİZ. Referans üçünü de
      betikle yapıyor. Bizde üçü de BAĞLANTI (?yazi= / ?gorunum=): seçim adres
      çubuğunda durur (paylaşılabilir), JavaScript kapalıyken de çalışır ve
      sayfanın "sıfır JavaScript" sözleşmesi bozulmaz.
      Bkz. App\Http\Controllers\Shop\DokumanController.

   ========================================================================== */

/* --------------------------------------------------------------------------
   PALET
   Değerler `.dk` yerine :root'ta çünkü koyu görünüm KABUĞU da (başlık, alt
   bilgi) boyuyor; sayfa içindeki bir sarmalayıcıya konsaydı koyu görünümde
   başlık beyaz kalırdı.
   -------------------------------------------------------------------------- */
:root {
    --dk-zemin: #ffffff;
    --dk-zemin2: #f8fafb;
    --dk-metin: rgb(107, 112, 127);
    /* Beyaz üzerinde 5,03:1. rgb(139,145,158) 3,16:1'de kalıyordu —
       WCAG 1.4.3'ün altında (ölçüldü). */
    --dk-metinYum: rgb(105, 111, 126);
    --dk-baslik: rgb(29, 39, 70);
    --dk-cizgi: rgb(229, 235, 239);
    --dk-cizgiKoyu: rgb(223, 226, 228);
    --dk-panel: #ffffff;
    --dk-vurgu: #215ada;
    --dk-vurguKoyu: #1a4aa8;
    --dk-vurguYum: #e8effc;
    --dk-kod: #f6f8fa;
    --dk-kodMetin: #1b2437;
    --dk-golge: rgba(4, 73, 89, .02) 0 3px 6px 0;
    /* Gezinme başlığı KENDİ jetonunu taşır. Önce --dk-baslik kullanılıyordu;
       koyu görünümde o jeton neredeyse beyaza dönüyor ve beyaz metin
       görünmez oluyordu (ölçüldü: 1,04:1). */
    --dk-yanZemin: rgb(29, 39, 70);
    --dk-yanMetin: #ffffff;

    /* Yazı boyu çarpanı — ?yazi= ile değişir. Varsayılan 1 = ölçülen boylar. */
    --dk-olcek: 1;
}

[data-yazi="kucuk"] { --dk-olcek: .9375; }   /* gövde 15px */
[data-yazi="orta"]  { --dk-olcek: 1; }       /* gövde 16px — ölçülen */
[data-yazi="buyuk"] { --dk-olcek: 1.125; }   /* gövde 18px */

[data-gorunum="koyu"] {
    --dk-zemin: #0f1523;
    --dk-zemin2: #151d2e;
    --dk-metin: #a8b0c2;
    --dk-metinYum: #8892a8;
    --dk-baslik: #eef2fa;
    --dk-cizgi: #253048;
    --dk-cizgiKoyu: #2e3a55;
    --dk-panel: #151d2e;
    /* #5b8cf0 koyu zeminde 5,9:1 verir; #215ada 2,6:1'de kalırdı (WCAG 1.4.3). */
    --dk-vurgu: #7ba4f5;
    --dk-vurguKoyu: #a3c0f9;
    --dk-vurguYum: #1c2740;
    --dk-kod: #111827;
    --dk-kodMetin: #dbe3f2;
    --dk-golge: rgba(0, 0, 0, .3) 0 3px 6px 0;
    /* #eef2fa üzeri #1c2436 = 13,9:1 (WCAG 1.4.3 fazlasıyla geçer). */
    --dk-yanZemin: #1c2436;
    --dk-yanMetin: #eef2fa;
}

/* --------------------------------------------------------------------------
   KOYU GÖRÜNÜMDE KABUK
   Başlık ve alt bilgi `shop-tema-demolari.css` içinde beyaz çiziliyor.
   Doküman koyuya geçtiğinde kabuk beyaz kalırsa sayfa ikiye bölünmüş görünür.
   -------------------------------------------------------------------------- */
[data-gorunum="koyu"] .td-govde { background: var(--dk-zemin); }
[data-gorunum="koyu"] .td-bar { background: #131a2b; box-shadow: rgba(0, 0, 0, .45) 0 4px 30px 6px; }
[data-gorunum="koyu"] .td-logo__ad,
[data-gorunum="koyu"] .td-menu a { color: #e6ebf5; }
[data-gorunum="koyu"] .td-menu a:hover { color: #fff; }
[data-gorunum="koyu"] .td-alt { background: #0c111d; }
[data-gorunum="koyu"] .td-alt__kart:not(.td-alt__kart--mavi) {
    background: #151d2e;
    border-color: #253048;
}
/* MAVİ KART HARİÇ. Kural önce bütün kartlara uygulanıyordu; mavi zeminli
   kartın paragrafı #a8b0c2'ye dönüp 2,73:1'e düşüyordu (ölçüldü). Mavi kart
   kendi rengini zaten taşıyor. */
[data-gorunum="koyu"] .td-alt__kart:not(.td-alt__kart--mavi) h2 { color: #eef2fa; }
[data-gorunum="koyu"] .td-alt__kart:not(.td-alt__kart--mavi) p { color: #a8b0c2; }
[data-gorunum="koyu"] .td-alt__dip { background: #0a0f19; }
[data-gorunum="koyu"] .td-alt__dip p { color: #9aa3b7; }
/* #0a0f19 üzerinde 11,4:1. Açık görünümdeki #222329 koyuda 1,4:1 olurdu. */
[data-gorunum="koyu"] .td-govde .td-alt__dip a { color: #dfe6f3; }

/* --------------------------------------------------------------------------
   İSKELET
   -------------------------------------------------------------------------- */
.dk {
    background: var(--dk-zemin);
    color: var(--dk-metin);
    font-size: calc(16px * var(--dk-olcek));
    line-height: calc(24px * var(--dk-olcek));
    font-weight: 400;
}

/* ÖLÇÜ: kapsayıcı dolgusu 0 30px; 1440'ta kullanılabilir genişlik 1380px. */
.dk-kap {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 30px;
}

/*
 * ÖLÇÜ: 230 | 25 | 890 | 30 | 205 = 1380.
 * Referansta bunlar Bootstrap kolonları; bizde ızgara. Sonuç aynı piksellere
 * oturuyor: kenar çubuğu x=30, içerik x=285, sağ raf x=1205.
 */
.dk-izgara {
    /*
     * BOŞLUKLAR AYRI İZ. İki ara farklı (25 ve 30) olduğu için tek bir
     * `column-gap` yetmiyor. Kenar/dolgu ile denemek iki kez yanlış ölçü
     * verdi: kenar sütunu içeriden yiyor (890 → 865), dolgu ise öğenin
     * kendisini büyütüyor (890 → 915). Boş iz her ikisinden de temiz —
     * öğe fişteki genişliğin TA KENDİSİ oluyor.
     *   230 + 25 + 890 + 30 + 205 = 1380  (1440 - 2×30 dış dolgu)
     */
    display: grid;
    grid-template-columns: 230px 25px 890px 30px 205px;
    padding-top: 50px;
    padding-bottom: 70px;
}

.dk-yan { grid-column: 1; }
.dk-icerik { grid-column: 3; }
.dk-raf { grid-column: 5; }

/* --------------------------------------------------------------------------
   KENAR ÇUBUĞU
   -------------------------------------------------------------------------- */
/* Yapışkan: uzun dokümanda gezinme ekrandan çıkarsa kullanıcı her sıçrayışta
   başa dönmek zorunda kalır. Üst boşluk 92px = yapışkan başlık (72) + 20. */
.dk-yan__yapisik {
    position: sticky;
    top: 92px;
}

.dk-yan__baslik {
    /* ÖLÇÜ: 230 × 48 · dolgu 13px 20px · 16/22 · 500 · yarıçap 4px */
    margin: 0;
    padding: 13px 20px;
    border-radius: 4px;
    background: var(--dk-yanZemin);
    color: var(--dk-yanMetin);
    font-family: inherit;
    font-size: calc(16px * var(--dk-olcek));
    line-height: calc(22px * var(--dk-olcek));
    font-weight: 500;
    letter-spacing: normal;
    /* Metin PHP'de büyütüldü (Metin::buyuk); CSS text-transform Türkçe "i"
       harfini yanlış çevirir. */
    text-transform: none;
}

.dk-yan__liste {
    display: flex;
    flex-direction: column;
    /* ÖLÇÜ: ardışık bağlantı üstleri 201 → 244 = 43px; bağlantı 40px → 3px. */
    gap: 3px;
    margin-top: 3px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
}

.dk-yan__bag {
    /* ÖLÇÜ: 230 × 40 · dolgu 10px · 13/20 · 500 */
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px;
    border-radius: 4px;
    /* ÖLÇÜ: liste öğesi zemini rgb(248,250,251); sütun sınırını kenarlık değil
       bu ince ton çiziyor (referansın kenar çubuğunda sağ kenarlık YOK). */
    background: var(--dk-zemin2);
    color: var(--dk-baslik);
    font-family: inherit;
    font-size: calc(13px * var(--dk-olcek));
    line-height: calc(20px * var(--dk-olcek));
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    transition: background .15s ease, color .15s ease;
}

.dk-yan__bag:hover,
.dk-yan__bag:focus-visible {
    background: var(--dk-vurguYum);
    color: var(--dk-vurgu);
}

.dk-yan__ikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--dk-vurguYum);
    color: var(--dk-vurgu);
    font-size: 11px;
    line-height: 1;
}

.dk-yan__ad {
    /* Uzun bölüm adı ikinci satıra taşarsa 40px yükseklik bozulur; kesilir. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   İÇERİK
   -------------------------------------------------------------------------- */
.dk-blok {
    /*
     * WCAG 2.4.11 (odak örtülmesin): çapaya sıçrandığında yapışkan başlık
     * (72px) bölüm başlığını örtmemeli. 96 = 72 + 24 nefes payı.
     */
    scroll-margin-top: 96px;
}

/*
 * BÖLÜM AYIRACI — ölçüldü.
 * Referansta her bölüm `border-top 1px` + `padding-top 60px` + önceki bölümün
 * `padding-bottom 35px` taşıyor. Son paragrafın kendi 16px alt kenarıyla
 * birlikte görsel boşluk dört geçişte de 112px çıkıyor: 16 + 35 + 1 + 60.
 * Düz bir `margin-top` ile çizgi hiç olmazdı ve bölümler birbirine akardı.
 */
.dk-blok + .dk-blok {
    margin-top: 35px;
    padding-top: 60px;
    border-top: 1px solid var(--dk-cizgi);
}

.dk-icerik h1,
.dk-icerik h2,
.dk-icerik h3 {
    color: var(--dk-baslik);
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* ÖLÇÜ: 40/48/500, alt kenar 8px */
.dk-icerik h1 {
    margin: 0 0 8px;
    font-size: calc(40px * var(--dk-olcek));
    line-height: calc(48px * var(--dk-olcek));
}

/* ÖLÇÜ: 30/36/500, alt kenar 12px */
.dk-icerik h2 {
    margin: 0 0 12px;
    font-size: calc(30px * var(--dk-olcek));
    line-height: calc(36px * var(--dk-olcek));
}

/* ÖLÇÜ: 20/26/500, alt kenar 12px */
.dk-icerik h3 {
    margin: 24px 0 12px;
    font-size: calc(20px * var(--dk-olcek));
    line-height: calc(26px * var(--dk-olcek));
}

/* ÖLÇÜ: 16/24, alt kenar 16px */
.dk-icerik p {
    margin: 0 0 16px;
    font-size: calc(16px * var(--dk-olcek));
    line-height: calc(24px * var(--dk-olcek));
    color: var(--dk-metin);
}

.dk-icerik b { color: var(--dk-baslik); font-weight: 600; }

.dk-icerik a {
    color: var(--dk-vurgu);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--dk-vurgu) 35%, transparent);
}

.dk-icerik a:hover,
.dk-icerik a:focus-visible {
    color: var(--dk-vurguKoyu);
    border-bottom-color: currentColor;
}

/* Satır içi kod: metni değil, ADI taşır — bu yüzden zeminli ve tek boşluklu. */
.dk-icerik code {
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--dk-kod);
    color: var(--dk-kodMetin);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: calc(14px * var(--dk-olcek));
    line-height: 1.4;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   PANEL — referansın `steps-panel` kutusu
   -------------------------------------------------------------------------- */
.dk-panel {
    /* ÖLÇÜ: 1px solid #e5ebef · yarıçap 2px · gölge rgba(4,73,89,.02) 0 3px 6px
       · kenar 10px 0 25px · dolgu 5px 20px (4 maddede 190px yüksekliği verir) */
    margin: 10px 0 25px;
    padding: 5px 20px;
    border: 1px solid var(--dk-cizgi);
    border-radius: 2px;
    background: var(--dk-panel);
    box-shadow: var(--dk-golge);
}

.dk-panel--uyari {
    border-left: 3px solid var(--dk-vurgu);
    background: var(--dk-vurguYum);
    box-shadow: none;
}

.dk-panel__basi {
    margin: 16px 0 !important;
}

.dk-madde {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dk-madde > li {
    /* ÖLÇÜ: satır 25px · kenar 16px 0 · sol dolgu 35px */
    position: relative;
    margin: 16px 0;
    padding-left: 35px;
    font-size: calc(16px * var(--dk-olcek));
    line-height: calc(25px * var(--dk-olcek));
    color: var(--dk-metin);
}

/* Madde imi: referansta yuvarlak ikon. Bizde ok işaretli daire — Font Awesome
   yüklenmesin diye saf CSS. */
.dk-madde > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc((25px * var(--dk-olcek) - 18px) / 2);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dk-vurguYum);
    box-shadow: inset 0 0 0 5px var(--dk-vurgu), inset 0 0 0 7px var(--dk-vurguYum);
}

/* --------------------------------------------------------------------------
   KOD BLOĞU
   -------------------------------------------------------------------------- */
.dk-kod {
    margin: 10px 0 25px;
    border: 1px solid var(--dk-cizgi);
    border-radius: 2px;
    background: var(--dk-kod);
    box-shadow: var(--dk-golge);
    /* Uzun komut satırı sayfayı yana kaydırmasın: kutunun İÇİNDE kayar.
       `position: relative` ŞART — yoksa mutlak konumlu torunlar (örn.
       .visually-hidden) kutu tarafından kırpılmaz ve belge genişler.
       Bu tuzak bu depoda bir kez ölçüldü. */
    position: relative;
    overflow-x: auto;
}

.dk-kod pre {
    margin: 0;
    padding: 16px 20px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: calc(14px * var(--dk-olcek));
    line-height: calc(22px * var(--dk-olcek));
    color: var(--dk-kodMetin);
    white-space: pre;
}

.dk-kod code {
    padding: 0;
    background: none;
    font-size: inherit;
    line-height: inherit;
}

/* --------------------------------------------------------------------------
   TABLO
   -------------------------------------------------------------------------- */
.dk-tabloKap {
    margin: 10px 0 25px;
    border: 1px solid var(--dk-cizgi);
    border-radius: 2px;
    background: var(--dk-panel);
    box-shadow: var(--dk-golge);
    position: relative;   /* aynı gerekçe: kırpma kutusu olsun */
    overflow-x: auto;
}

.dk-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(15px * var(--dk-olcek));
    line-height: calc(23px * var(--dk-olcek));
}

.dk-tablo th,
.dk-tablo td {
    padding: 12px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--dk-cizgi);
}

.dk-tablo th {
    color: var(--dk-baslik);
    font-weight: 600;
    white-space: nowrap;
    background: var(--dk-zemin2);
}

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

.dk-tablo td { color: var(--dk-metin); }
.dk-tablo td code { white-space: nowrap; }

/* --------------------------------------------------------------------------
   SAYI SATIRI (Başlarken)
   -------------------------------------------------------------------------- */
.dk-satir {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 10px 0 25px;
}

.dk-satir__oge {
    margin: 0 !important;
    padding: 16px 20px;
    border: 1px solid var(--dk-cizgi);
    border-radius: 2px;
    background: var(--dk-panel);
    box-shadow: var(--dk-golge);
}

.dk-satir__oge span {
    display: block;
    font-size: calc(13px * var(--dk-olcek));
    line-height: calc(18px * var(--dk-olcek));
    color: var(--dk-metinYum);
}

.dk-satir__oge b {
    display: block;
    margin-top: 4px;
    font-size: calc(24px * var(--dk-olcek));
    line-height: calc(30px * var(--dk-olcek));
    font-weight: 600;
    color: var(--dk-baslik);
}

/* --------------------------------------------------------------------------
   SAĞ RAF
   -------------------------------------------------------------------------- */
/* ÖLÇÜ: raf 205px (x=1205..1410), `border-left 1px solid rgb(232,236,238)`
   ve `padding: 0 0 0 25px`. Kenarlık tam 1205'te; kutu ölçüsü 205 kalıyor
   (box-sizing: border-box). */
.dk-raf {
    border-left: 1px solid var(--dk-cizgi);
    padding-left: 25px;
}

.dk-raf__yapisik {
    position: sticky;
    top: 92px;
}

.dk-araclar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ÖLÇÜ: 117 × 33,19 · 1px solid #dfe2e4 · yarıçap 4px
   gölge: rgba(3,13,37,.2) 0 1px 0, rgba(3,13,37,.1) 0 -8px 14px inset */
.dk-boy {
    display: inline-flex;
    /* ÖLÇÜ dış kenardır: 117 içeriden verilseydi 1px'lik iki kenarlık eklenip
       119 çıkardı (ölçüldü). box-sizing: border-box kabuktan geliyor. */
    width: 117px;
    height: 33px;
    border: 1px solid var(--dk-cizgiKoyu);
    border-radius: 4px;
    background: var(--dk-panel);
    box-shadow: rgba(3, 13, 37, .2) 0 1px 0 0, rgba(3, 13, 37, .1) 0 -8px 14px 0 inset;
    overflow: hidden;
}

.dk-boy__d {
    /* AKIŞ SÜTUN: `place-items` tek başına "A" ile "−"/"+" işaretini ALT ALTA
       diziyordu (ölçüldü, ekran görüntüsünde iki satır). İşaret harfin
       sağında ve yukarıda durmalı. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex: 1;   /* üçü kutuyu paylaşır; dış ölçü 117px'te sabit kalır */
    min-width: 0;
    color: var(--dk-baslik);
    font-family: inherit;
    /* Düğme yazısı ÖLÇEKTEN BAĞIMSIZ: kendisi ölçeği değiştiriyor, kendisi de
       ölçeklenseydi "A+" seçildiğinde düğme büyür ve kutu 117px'i aşardı. */
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

/* İşaret: harften küçük ve bir tık yukarıda — referanstaki gibi. */
.dk-boy__d > span[aria-hidden] {
    font-size: 10px;
    line-height: 1;
    align-self: flex-start;
    margin-top: 9px;
}

.dk-boy__d + .dk-boy__d { border-left: 1px solid var(--dk-cizgiKoyu); }
.dk-boy__d:hover { background: var(--dk-vurguYum); color: var(--dk-vurgu); }

.dk-boy__d--etkin {
    background: var(--dk-vurgu);
    color: #fff;
}

.dk-boy__d--etkin:hover { background: var(--dk-vurguKoyu); color: #fff; }

/* --- GÖRÜNÜM ANAHTARI --- */
.dk-anahtar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.dk-anahtar__ikon {
    font-size: 15px;
    line-height: 1;
    color: var(--dk-metinYum);
}

/* ÖLÇÜ: 52 × 24 · yarıçap 25px */
.dk-anahtar__ray {
    position: relative;
    display: block;
    width: 52px;
    height: 24px;
    border: 1px solid var(--dk-vurgu);
    border-radius: 25px;
    background: var(--dk-vurguYum);
    transition: background .2s ease;
}

.dk-anahtar__top {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dk-vurgu);
    transition: transform .2s ease;
}

[data-gorunum="koyu"] .dk-anahtar__top { transform: translateX(28px); }

/* --- "ÖZEL ÇALIŞMA" KUTUSU --- */
.dk-ozel {
    margin-top: 36px;
    border: 1px solid var(--dk-vurgu);
    border-radius: 4px;
    background: var(--dk-panel);
}

.dk-ozel__ust {
    margin: 0;
    padding: 9px 14px;
    border-bottom: 1px solid var(--dk-vurgu);
    background: var(--dk-vurguYum);
    color: var(--dk-vurgu);
    font-size: calc(11px * var(--dk-olcek));
    line-height: calc(16px * var(--dk-olcek));
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
}

.dk-ozel__govde {
    padding: 16px 14px;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--dk-vurgu) 12%, var(--dk-panel)) 0%,
        var(--dk-panel) 100%);
}

.dk-ozel__govde p {
    margin: 0;
    font-size: calc(14px * var(--dk-olcek));
    line-height: calc(22px * var(--dk-olcek));
    color: var(--dk-metin);
}

.dk-ozel__govde a {
    color: var(--dk-vurgu);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   ODAK — WCAG 2.4.7
   -------------------------------------------------------------------------- */
.dk a:focus-visible {
    outline: 2px solid var(--dk-vurgu);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   DUYARLILIK
   1200–1439 : içerik esner, kolon sayısı aynı
   992–1199  : sağ raf içeriğin ÜSTÜNE yatay şerit olur
   ≤991      : tek kolon; gezinme yatay kaydırılan hap sırası
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
    .dk-izgara { grid-template-columns: 230px 25px minmax(0, 1fr) 30px 205px; }
}

@media (max-width: 1199px) {
    .dk-izgara {
        grid-template-columns: 230px 25px minmax(0, 1fr);
        row-gap: 24px;
    }

    .dk-yan { grid-row: 2; grid-column: 1; }
    .dk-icerik { grid-row: 2; grid-column: 3; }

    /* Sağ raf araçları yukarı, tam genişlikte bir şeride. */
    .dk-raf {
        grid-row: 1;
        grid-column: 1 / -1;
        /* Yatay şeritte sol kenarlık anlamsız; ayrımı alt kenarlık yapıyor. */
        border-left: 0;
        padding-left: 0;
    }

    .dk-raf__yapisik {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--dk-cizgi);
    }

    .dk-anahtar { margin-top: 0; }

    .dk-ozel {
        flex: 1 1 320px;
        display: flex;
        align-items: center;
        margin-top: 0;
        margin-left: auto;
    }

    .dk-ozel__ust {
        border-bottom: 0;
        border-right: 1px solid var(--dk-vurgu);
        white-space: nowrap;
    }

    .dk-ozel__govde { flex: 1; }
}

@media (max-width: 991px) {
    .dk-kap { padding-inline: 20px; }

    .dk-izgara {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 30px;
    }

    .dk-yan { grid-row: 2; grid-column: 1; }
    .dk-icerik { grid-row: 3; grid-column: 1; }

    /* Yapışkanlık kalkar: tek kolonda gezinme içeriğin üstünde duruyor,
       yapışkan kalsaydı ekranın yarısını kaplardı. */
    .dk-yan__yapisik { position: static; }

    /*
     * Yatay hap sırası. `position: relative` ŞART: mutlak konumlu torunlar
     * (gizli metin) yalnızca kapsayan blok zincirindeki bir ata tarafından
     * kırpılır. Bu depoda tam bu eksiklik belgeyi 1440'tan 1776px'e taşırmıştı.
     */
    .dk-yan__liste {
        position: relative;
        flex-direction: row;
        gap: 8px;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
        margin-top: 10px;
        scrollbar-width: thin;
    }

    .dk-yan__bag {
        flex: none;
        border: 1px solid var(--dk-cizgi);
        border-radius: 60px;
        padding: 8px 14px 8px 10px;
        background: var(--dk-panel);
    }

    .dk-icerik h1 { font-size: calc(32px * var(--dk-olcek)); line-height: calc(40px * var(--dk-olcek)); }
    .dk-icerik h2 { font-size: calc(26px * var(--dk-olcek)); line-height: calc(32px * var(--dk-olcek)); }

    .dk-satir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .dk-kap { padding-inline: 15px; }
    .dk-izgara { padding-bottom: 48px; }

    .dk-icerik h1 { font-size: calc(28px * var(--dk-olcek)); line-height: calc(36px * var(--dk-olcek)); }
    .dk-icerik h2 { font-size: calc(22px * var(--dk-olcek)); line-height: calc(28px * var(--dk-olcek)); }
    .dk-icerik h3 { font-size: calc(18px * var(--dk-olcek)); line-height: calc(24px * var(--dk-olcek)); }

    .dk-satir { grid-template-columns: minmax(0, 1fr); }

    .dk-panel { padding: 5px 15px; }
    .dk-tablo th, .dk-tablo td { padding: 10px 14px; }

    /* Kutu 1199'da yatay şeride dönüşüyordu; dar ekranda başlık sütunu
       genişliğin yarısını yiyor (ölçüldü). Burada dikey düzene DÖNÜYOR. */
    .dk-ozel {
        display: block;
        margin-left: 0;
    }

    .dk-ozel__ust {
        border-right: 0;
        border-bottom: 1px solid var(--dk-vurgu);
        white-space: normal;
    }
}

/* Hareket azaltma tercihi — WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
    .dk-yan__bag,
    .dk-boy__d,
    .dk-anahtar__ray,
    .dk-anahtar__top { transition: none; }
}

/* Yazdırma: gezinme, araçlar ve kabuk kâğıda basılmaz. */
@media print {
    .dk-yan, .dk-raf, .td-bas, .td-alt, .td-kutu { display: none !important; }
    .dk-izgara { display: block; padding: 0; }
    .dk-kod, .dk-panel, .dk-tabloKap { box-shadow: none; }
}