/* ============================================================
   Geliştirici dokümanı — /gelistirici/api

   Yalnız bu sayfada yüklenir (View::pushStyle). Renk, boşluk, yarıçap ve
   yazı ölçüleri tokens.css dosyasından gelir; burada ham değer yalnızca
   KOD BLOKLARI için var: kod zemini sitenin açık temasında da koyu
   kalıyor, bu yüzden kendi küçük paletini taşıyor.

   Düzen (brief): masaüstünde üç kolon — solda sabit içindekiler, ortada
   metin, uç kartlarında sağda koyu kod rayı. Tablette iki, mobilde tek
   kolon. Mobilde yatay kaydırma YOK: yalnız tablolar ve kod blokları
   kendi içinde kayar.
   ============================================================ */

.dk {
    --dk-toc: 260px;          /* sol menü genişliği */
    --dk-ofset: 128px;        /* yapışkan şerit (44 marka + 72 menü) + nefes payı */
    --kod-bg: #0f172a;        /* ink-900 ile aynı; kod zemini sabit koyu */
    --kod-bg-ust: #1e293b;
    --kod-cizgi: #334155;
    --kod-metin: #e2e8f0;
    --kod-sol: #94a3b8;

    /* Doküman düzeni sitenin pazarlama sayfalarından geniş: solda menü,
       sağda kod rayı var. --container-wide (1280) üç kolonda metni 430 px'e
       düşürüyordu; 1400 px'te metin sütunu ~60 karakterde kalıyor. */
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: var(--sp-4);
    padding-block: var(--sp-8) var(--sp-20);
}

@media (min-width: 1100px) {
    .dk {
        display: grid;
        grid-template-columns: var(--dk-toc) minmax(0, 1fr);
        column-gap: var(--sp-10);
        align-items: start;
        padding-inline: var(--sp-6);
    }
}

/* ============================================================
   1. İçindekiler — mobil açılır menü
   ============================================================ */

.dk-mobil-toc {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
}

.dk-mobil-toc > summary {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-800);
    cursor: pointer;
    list-style: none;
}

.dk-mobil-toc > summary::-webkit-details-marker { display: none; }
.dk-mobil-toc > summary svg { transition: transform var(--dur) var(--ease); }
.dk-mobil-toc[open] > summary svg { transform: rotate(180deg); }

.dk-mobil-toc ol {
    max-height: 60vh;
    margin: 0;
    padding: 0 var(--sp-4) var(--sp-4);
    overflow-y: auto;
    list-style: none;
}

.dk-mobil-toc a {
    display: block;
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
    color: var(--ink-700);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-100);
}

@media (min-width: 1100px) {
    .dk-mobil-toc { display: none; }
}

/* ============================================================
   2. İçindekiler — masaüstü sabit kolon
   ============================================================ */

.dk-toc { display: none; }

@media (min-width: 1100px) {
    .dk-toc {
        display: block;
        position: sticky;
        top: var(--dk-ofset);
        max-height: calc(100vh - var(--dk-ofset) - var(--sp-6));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.dk-toc__kutu {
    padding-right: var(--sp-3);
    border-right: 1px solid var(--border);
}

.dk-toc__marka {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

.dk-toc__surum {
    margin: var(--sp-1) 0 var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--ink-500);
}

.dk-toc__ara input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--ink-800);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.dk-toc__ara input:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 1px;
}

.dk-toc__liste {
    margin: var(--sp-4) 0 0;
    padding: 0;
    list-style: none;
}

.dk-toc__liste li { margin: 0; }
.dk-toc__liste li[hidden] { display: none; }

.dk-toc__liste a {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    padding: 5px var(--sp-2);
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--ink-600);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.dk-toc__liste a:hover {
    color: var(--ink-900);
    background: var(--surface-soft);
}

.dk-toc__liste .dk-toc__alt a { padding-left: var(--sp-4); }

.dk-toc__liste a.is-current {
    font-weight: 600;
    color: var(--brand-700);
    background: var(--brand-50);
    border-left-color: var(--brand-600);
}

.dk-toc__bos {
    padding: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-500);
}

/* ============================================================
   3. Gövde
   ============================================================ */

.dk-govde { min-width: 0; }

/* Satır uzunluğu ~72 karakterle sınırlı; tablo ve kod bu sınıra girmez. */
.dk-govde :where(p, dd):not(.dk-hizli dd) { max-width: 72ch; }
.dk-govde .dk-adimlar,
.dk-govde .dk-liste { max-width: 72ch; }

/* ---------- Hero: kompakt ---------- */

.dk-hero {
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--border);
}

.dk-hero__rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.dk-rozet {
    padding: 4px var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-600);
    background: var(--surface-mute);
    border-radius: var(--r-full);
}

.dk-rozet--brand {
    font-family: var(--font-mono);
    color: #fff;
    background: var(--brand-700);
}

.dk-hero__baslik {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-h1);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.dk-hero__lede {
    margin: 0;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-600);
}

.dk-hizli {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: var(--sp-6) 0;
    padding: var(--sp-4);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.dk-hizli dt {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-500);
}

.dk-hizli dd {
    margin: 4px 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-800);
    overflow-wrap: anywhere;
}

.dk-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* ---------- Bölümler ---------- */

.dk-bolum {
    padding-top: var(--sp-12);
    scroll-margin-top: var(--dk-ofset);
}

.dk-bolum > h2 {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-h2);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink-900);
}

.dk-bolum h3 {
    margin: var(--sp-8) 0 var(--sp-3);
    font-size: var(--fs-h4);
    color: var(--ink-900);
    scroll-margin-top: var(--dk-ofset);
}

.dk-uc h3 { margin-top: var(--sp-5); }

.dk-bolum p {
    margin: 0 0 var(--sp-4);
    line-height: 1.7;
    color: var(--ink-700);
}

.dk-mute {
    font-size: var(--fs-sm);
    color: var(--ink-600);
}

/* Paragraf içindeki bağlantı yalnız renkle ayrılmıyor: marka rengiyle
   gövde metni arasındaki fark 3:1'in altında (WCAG 1.4.1). */
.dk-govde :where(p, li, dd, td) a {
    color: var(--brand-800);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dk-govde :where(p, li, dd, td) a:hover { color: var(--brand-700); }

.dk-govde :where(p, li, dd, td, th) code {
    padding: 2px 5px;
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--indigo-800);
    background: var(--indigo-50);
    border-radius: var(--r-xs);
    overflow-wrap: anywhere;
}

.dk-adimlar {
    /* base.css ol/ul işaretlerini kapatıyor; adımlar numaralı olmalı. */
    list-style: decimal;
    margin: 0 0 var(--sp-5);
    padding-left: var(--sp-6);
    color: var(--ink-700);
}

.dk-adimlar::marker,
.dk-adimlar li::marker {
    font-weight: 700;
    color: var(--brand-700);
}

.dk-adimlar li {
    margin-bottom: var(--sp-2);
    line-height: 1.7;
}

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

.dk-liste li {
    position: relative;
    padding-left: var(--sp-6);
    margin-bottom: var(--sp-3);
    line-height: 1.7;
    color: var(--ink-700);
}

.dk-liste li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: var(--sp-2);
    width: 6px;
    height: 6px;
    background: var(--brand-500);
    border-radius: 50%;
}

/* ---------- Başlık çapası (JS ekler) ---------- */

.dk-capa {
    margin-left: var(--sp-2);
    padding: 2px;
    color: var(--ink-400);
    vertical-align: middle;
    background: none;
    border: 0;
    border-radius: var(--r-xs);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease);
}

:where(h2, h3):hover .dk-capa,
.dk-capa:focus-visible { opacity: 1; }
.dk-capa:hover { color: var(--brand-700); }
.dk-capa.is-ok { color: var(--brand-700); opacity: 1; }

/* ============================================================
   4. Uç kartı
   ============================================================ */

.dk-uc {
    margin-bottom: var(--sp-8);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    scroll-margin-top: var(--dk-ofset);
}

.dk-uc__bas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    align-items: center;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--ink-100);
}

.dk-uc__yol {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-900);
    overflow-wrap: anywhere;
}

.dk-uc__kapsam {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--ink-500);
}

.dk-uc__kapsam code {
    font-family: var(--font-mono);
    color: var(--ink-700);
}

.dk-uc > :last-child { margin-bottom: 0; }

/* Yöntem rozetleri — renk tek başına anlam taşımaz, metin de yazılı. */

.dk-m {
    flex: none;
    padding: 3px var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #fff;
    border-radius: var(--r-xs);
}

.dk-m--get    { background: #15803d; }   /* yeşil   — okuma */
.dk-m--post   { background: #1d4ed8; }   /* mavi    — oluşturma */
.dk-m--put    { background: #b45309; }   /* turuncu — değiştirme */
.dk-m--patch  { background: #6d28d9; }   /* mor     — kısmi güncelleme */
.dk-m--delete { background: #b91c1c; }

.dk-m--mini { padding: 1px 4px; font-size: 10px; }

/* Alan rozetleri */

.dk-alanlar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    margin: 0 0 var(--sp-4);
}

.dk-alan {
    padding: 3px var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-700);
    background: var(--surface-mute);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
}

/* ============================================================
   5. Tablolar — mobilde yalnız tablo kayar
   ============================================================ */

.dk-tablo {
    margin: 0 0 var(--sp-5);
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    -webkit-overflow-scrolling: touch;
}

.dk-tablo table {
    width: 100%;
    min-width: 440px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.dk-tablo thead th {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-600);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
}

.dk-tablo tbody th,
.dk-tablo tbody td {
    padding: var(--sp-3) var(--sp-4);
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
    color: var(--ink-700);
    border-bottom: 1px solid var(--ink-100);
}

.dk-tablo tbody th {
    font-weight: 600;
    color: var(--ink-900);
}

/* Satır başlığındaki uç/olay adı ortadan bölünmesin: tablo zaten kendi
   içinde yatay kayıyor, kırmaya gerek yok (mobilde "order\A.crea\Ated"
   gibi okunmaz kırılmalar oluyordu). */
.dk-tablo tbody th code {
    white-space: nowrap;
    overflow-wrap: normal;
}

.dk-tablo tbody tr:last-child :where(th, td) { border-bottom: 0; }
.dk-tablo tbody tr:hover :where(th, td) { background: var(--surface-soft); }

/* ============================================================
   6. Not kutuları
   ============================================================ */

.dk-not {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.7;
    border-left: 3px solid;
    border-radius: var(--r-md);
}

.dk-not--info {
    color: var(--indigo-900);
    background: var(--indigo-50);
    border-left-color: var(--indigo-500);
}

.dk-not--warn {
    color: #7c2d12;
    background: #fff7ed;
    border-left-color: #ea580c;
}

.dk-not code { background: rgba(255, 255, 255, 0.65); }

/* ============================================================
   7. Kod blokları — her temada koyu
   ============================================================ */

.dk-kod {
    position: relative;
    margin: 0 0 var(--sp-5);
    overflow: hidden;
    background: var(--kod-bg);
    border: 1px solid var(--kod-cizgi);
    border-radius: var(--r-md);
}

.dk-kod__tabs {
    display: flex;
    gap: 2px;
    padding: var(--sp-2) 94px var(--sp-2) var(--sp-2);
    background: var(--kod-bg-ust);
    border-bottom: 1px solid var(--kod-cizgi);
}

.dk-kod__tab {
    padding: 4px var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--kod-sol);
    background: none;
    border: 0;
    border-radius: var(--r-xs);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.dk-kod__tab:hover { color: #fff; }

.dk-kod__tab.is-active {
    color: var(--ink-900);
    background: var(--brand-200);
}

.dk-kod__tab:focus-visible,
.dk-kod__kopyala:focus-visible {
    outline: 2px solid var(--brand-300);
    outline-offset: 1px;
}

.dk-kod__etiket {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--kod-sol);
}

.dk-kod__etiket ~ .dk-kod__pre { padding-top: var(--sp-10); }

.dk-kod__kopyala {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 2;
    padding: 4px var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    /* kod-sol (#94a3b8) bu zeminde 4.46:1 kalıyordu — küçük metin için AA
       4.5 ister; bir ton açıldı. */
    color: var(--ink-300);
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid var(--kod-cizgi);
    border-radius: var(--r-xs);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.dk-kod__kopyala:hover { color: #fff; background: rgba(148, 163, 184, 0.28); }

.dk-kod__kopyala.is-ok {
    color: #fff;
    background: var(--brand-700);
    border-color: var(--brand-600);
}

.dk-kod__pre:focus-visible {
    outline: 2px solid var(--brand-300);
    outline-offset: -2px;
}

.dk-kod__pre {
    margin: 0;
    padding: var(--sp-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dk-kod__pre code {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.65;
    color: var(--kod-metin);
    white-space: pre;
    tab-size: 4;
}

/* Elle yazılmış hafif renklendirici — kütüphane yok. */
.dk-kod .t-s   { color: #7ee3a8; }   /* dizge */
.dk-kod .t-key { color: #93c5fd; }   /* JSON anahtarı */
.dk-kod .t-n   { color: #fcd34d; }   /* sayı / sabit */
.dk-kod .t-k   { color: #c4b5fd; }   /* anahtar sözcük */
.dk-kod .t-v   { color: #67e8f9; }   /* değişken */
.dk-kod .t-c   { color: #94a3b8; font-style: italic; }

/* ============================================================
   8. Değişiklik günlüğü
   ============================================================ */

.dk-gunluk {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.dk-gunluk dt {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--brand-700);
}

.dk-gunluk dd {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-700);
}

/* ============================================================
   9. Masaüstü: uç kartlarında sağ kod rayı (Stripe düzeni)

   Yalnız kartın içinde tek kod bloğu olduğunda anlamlı. :has()
   desteklenmiyorsa ya da ekran daha küçükse kod metnin altında kalır —
   düzen bozulmaz, yalnız tek kolon olur.
   ============================================================ */

@media (min-width: 1200px) {
    .dk-uc:has(> .dk-kod) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        column-gap: var(--sp-6);
        align-items: start;
    }

    .dk-uc:has(> .dk-kod) > * {
        grid-column: 1;
        min-width: 0;
    }

    .dk-uc:has(> .dk-kod) > .dk-uc__bas { grid-column: 1 / -1; }

    /* Dar rayda satırlar sarılsın: yatay kaydırma çubuğu gözden kaçıyor,
       sarılan satır kopyalandığında da aynı metni veriyor. */
    .dk-uc:has(> .dk-kod) > .dk-kod .dk-kod__pre code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .dk-uc:has(> .dk-kod) > .dk-kod {
        grid-column: 2;
        /* span ile: satırlar örtük olduğu için "-1" açık ızgaranın sonuna
           bakar ve kod bloğu başlık satırının üstüne düşerdi. */
        grid-row: 2 / span 50;
        align-self: start;
        margin-bottom: 0;
    }
}

/* ============================================================
   10. Hareket azaltma
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .dk-mobil-toc > summary svg,
    .dk-toc__liste a,
    .dk-kod__tab,
    .dk-kod__kopyala,
    .dk-capa { transition: none; }
}