/* ===========================================================================
   API BELGE PORTALI  —  /api/gelistirici/

   Emre: "burayı lidio'nunki gibi bir sayfa yapacaksın."

   O sayfaların hepsi aynı üç sütun: solda gezinme, ortada anlatı, sağda kod.
   Desenin işe yaramasının sebebi estetik değil: geliştirici belgeyi baştan
   sona okumaz, bir uca gider ve oradaki isteği kopyalar. Sol sütun "nerede
   olduğunu", sağ sütun "ne yazacağını" söyler; ortadaki de "neden" i.

   Sağ sütun koyu, çünkü kod koyu zeminde okunur ve göz iki sütunu ayırt
   edebilsin. Sol ve orta açık: belge metni saatlerce okunacak.

   Sitenin geri kalanı koyu erik; burası açık. Bilerek: bu bir tanıtım sayfası
   değil, bir çalışma aracı. Marka rengi düğmelerde ve vurgularda duruyor.
   =========================================================================== */

:root {
  --d-bg:        #ffffff;
  --d-bg-2:      #f7f7fa;
  --d-ink:       #1a1420;
  --d-ink-2:     #52495c;
  --d-ink-3:     #857d8e;
  --d-line:      #e6e4ec;
  --d-line-2:    #d8d5e0;
  --d-iris:      #6a3df0;
  --d-iris-soft: #f1ecff;

  /* Kod paneli — sitenin erik zemininden alındı ki iki sayfa arasında
     gidip gelen kişi başka bir ürüne geçmiş gibi hissetmesin. */
  --d-code:      #221331;
  --d-code-2:    #2c1a3d;
  --d-code-ink:  #ddd6e6;
  --d-code-dim:  #9a8fab;

  --d-get:    #15846e;
  --d-post:   #6a3df0;
  --d-warn:   #a8620a;
  --d-err:    #b4321c;

  --d-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --d-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --d-nav: 282px;
  --d-code-w: 460px;
}

/* Koyu tema: belgeyi gece okuyan da var. Kod paneli zaten koyu olduğu için
   burada değişen yalnız gövde; iki sütunu ayıran çizgi kalsın diye kod
   paneli bir tık daha koyu bırakılıyor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d-bg:        #17101f;
    --d-bg-2:      #1e1529;
    --d-ink:       #f3f0f7;
    --d-ink-2:     #c3bbcf;
    --d-ink-3:     #968ca4;
    --d-line:      #2e2340;
    --d-line-2:    #3a2c4f;
    --d-iris:      #a683ff;
    --d-iris-soft: rgba(166, 131, 255, .14);
    --d-code:      #120b1a;
    --d-code-2:    #1b1226;
    --d-warn:      #e0a458;
    --d-err:       #ff8a7a;
    --d-warn-bg:   rgba(224, 164, 88, .12);
    --d-stop-bg:   rgba(255, 138, 122, .12);
  }
}
:root[data-theme="dark"] {
  --d-bg:        #17101f;
  --d-bg-2:      #1e1529;
  --d-ink:       #f3f0f7;
  --d-ink-2:     #c3bbcf;
  --d-ink-3:     #968ca4;
  --d-line:      #2e2340;
  --d-line-2:    #3a2c4f;
  --d-iris:      #a683ff;
  --d-iris-soft: rgba(166, 131, 255, .14);
  --d-code:      #120b1a;
  --d-code-2:    #1b1226;
  --d-warn:      #e0a458;
  --d-err:       #ff8a7a;
  --d-warn-bg:   rgba(224, 164, 88, .12);
  --d-stop-bg:   rgba(255, 138, 122, .12);
}

* { box-sizing: border-box; }

/* Yumuşak kaydırma yok. Sayfa on yedi bin piksel; uzak bir bölüme tıklayınca
   saniyelerce süren bir animasyon "gitmedi" hissi veriyor. Belgede istenen
   şey yolculuk değil, varış. */
html { scroll-behavior: auto; }

body.docs {
  margin: 0;
  background: var(--d-bg);
  color: var(--d-ink);
  font-family: var(--d-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.docs a { color: var(--d-iris); text-decoration: none; }
body.docs a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ üst bar */
.d-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  height: 56px; padding: 0 20px;
  background: var(--d-bg);
  border-bottom: 1px solid var(--d-line);
}
.d-top .brand { display: flex; align-items: center; gap: 10px; }
.d-top .brand img { height: 22px; width: auto; display: block; }
/* Başlık hem h1 hem rozet. Sayfanın konusunu bir h1 taşımalı — arama
   motoru için de, ekran okuyucunun başlık hiyerarşisi için de — ama bu
   portalda görsel olarak bir rozetten fazlası olmamalı. */
.d-top .kind, .d-top h1.kind {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--d-ink-3); padding-top: 2px;
}
.d-top h1.kind span { font-weight: 400; opacity: .8; }
.d-top .sp { flex: 1; }
.d-top .lnk { font-size: 13.5px; color: var(--d-ink-2); }
.d-top .lnk:hover { color: var(--d-ink); text-decoration: none; }
/* Düğme rengi temaya bağlı değil: koyu temada --d-iris açık lavantaya
   dönüyor ve beyaz yazı okunmuyordu. Marka moru her iki zeminde de aynı. */
.d-btn {
  display: inline-block; padding: 7px 14px; border-radius: 8px;
  background: #6a3df0; color: #fff; font-size: 13.5px; font-weight: 600;
}
.d-btn:hover { text-decoration: none; opacity: .92; }

/* --------------------------------------------------------------- iskelet */
.d-wrap {
  display: grid;
  grid-template-columns: var(--d-nav) minmax(0, 1fr);
  align-items: start;
}

.d-nav {
  position: sticky; top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 20px 10px 60px 18px;
  border-right: 1px solid var(--d-line);
  background: var(--d-bg-2);
}
.d-nav h4 {
  margin: 20px 0 6px 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--d-ink-3);
}
.d-nav h4:first-child { margin-top: 0; }
.d-nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: 7px;
  color: var(--d-ink-2); font-size: 13.5px; line-height: 1.35;
}
.d-nav a:hover { background: rgba(106, 61, 240, .07); color: var(--d-ink); text-decoration: none; }
.d-nav a.on { background: var(--d-iris-soft); color: var(--d-iris); font-weight: 600; }

/* Yöntem rozeti: gezinmede ve başlıkta aynı. Renk anlam taşır, süs değil. */
.m {
  flex: none; min-width: 42px; text-align: center;
  font-family: var(--d-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; padding: 2px 5px; border-radius: 4px;
  color: #fff;
}
.m.get  { background: var(--d-get); }
.m.post { background: var(--d-post); }
.m.rep  { background: var(--d-line-2); color: var(--d-ink-2); }

/* Arama: sunucuya gitmez, listeyi süzer. Otuz maddelik bir gezinmede
   aradığını bulmanın en kısa yolu, ve çevrimdışı çalışır. */
.d-find {
  position: relative; margin: 0 8px 14px;
}
.d-find input {
  width: 100%; padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--d-line-2); background: var(--d-bg);
  color: var(--d-ink); font: inherit; font-size: 13.5px;
}
.d-find input:focus { outline: 2px solid var(--d-iris); outline-offset: -1px; }
.d-nav a[hidden], .d-nav h4[hidden] { display: none; }

/* -------------------------------------------------------------- içerik */
.d-body { min-width: 0; }

.d-sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--d-code-w);
  gap: 0;
  border-bottom: 1px solid var(--d-line);
}
.d-sec > .d-main { padding: 40px 44px 44px; min-width: 0; }
.d-sec > .d-side {
  position: sticky; top: 56px;
  align-self: start;
  padding: 28px 24px 32px;
  background: var(--d-code);
  border-left: 1px solid var(--d-line);
  min-height: 100%;
}
/* Kod sütunu olmayan bölümler tek sütun kaplar. */
.d-sec.solo { grid-template-columns: minmax(0, 1fr); }
.d-sec.solo > .d-main { max-width: 900px; }

.d-main h2 {
  margin: 0 0 6px; font-size: 27px; line-height: 1.2; letter-spacing: -.02em;
  scroll-margin-top: 70px;
}
.d-main h3 { margin: 30px 0 8px; font-size: 17px; letter-spacing: -.01em; }
.d-main p  { margin: 0 0 14px; color: var(--d-ink-2); max-width: 66ch; }
.d-main ul { margin: 0 0 14px; padding-left: 20px; color: var(--d-ink-2); max-width: 66ch; }
.d-main li { margin-bottom: 5px; }
.d-main strong, .d-main b { color: var(--d-ink); }

.d-path {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.d-path code {
  font-family: var(--d-mono); font-size: 15px; color: var(--d-ink);
  background: var(--d-bg-2); border: 1px solid var(--d-line);
  border-radius: 7px; padding: 4px 10px; word-break: break-all;
}

code, .d-main code {
  font-family: var(--d-mono); font-size: 13px;
  background: var(--d-bg-2); border-radius: 4px; padding: 1px 5px;
  color: var(--d-ink);
}

/* Not kutusu: uyarı ve tuzak. Ürünün en pahalı bilgisi bunlarda. */
.d-note {
  margin: 0 0 16px; padding: 12px 15px;
  border-left: 3px solid var(--d-iris);
  background: var(--d-iris-soft);
  border-radius: 0 8px 8px 0;
  font-size: 14px; color: var(--d-ink-2); max-width: 66ch;
}
.d-note.warn { border-left-color: var(--d-warn); background: var(--d-warn-bg, #fdf4e8); }
.d-note.stop { border-left-color: var(--d-err);  background: var(--d-stop-bg, #fdeeeb); }
.d-note b { color: var(--d-ink); }

/* Parametre tablosu */
.d-tbl { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14px; }
.d-tbl th {
  text-align: left; padding: 7px 10px 7px 0;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--d-ink-3); font-weight: 700;
  border-bottom: 1px solid var(--d-line);
}
.d-tbl td {
  padding: 10px 10px 10px 0; vertical-align: top;
  border-bottom: 1px solid var(--d-line); color: var(--d-ink-2);
}
.d-tbl td:first-child {
  font-family: var(--d-mono); font-size: 13px; color: var(--d-ink); white-space: nowrap;
}
.d-tbl .ty { font-family: var(--d-mono); font-size: 12px; color: var(--d-ink-3); white-space: nowrap; }
.d-req { color: var(--d-err); font-size: 11px; margin-left: 6px; }
.d-opt { color: var(--d-ink-3); font-size: 11px; margin-left: 6px; }

/* ------------------------------------------------------------ kod paneli */
.d-side h5 {
  margin: 0 0 9px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--d-code-dim); font-weight: 700;
}
.d-side h5 + .d-tabs { margin-top: -2px; }
.d-side .blk + h5 { margin-top: 24px; }

.d-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 8px; }
.d-tab {
  padding: 4px 9px; border-radius: 6px; border: 0; cursor: pointer;
  background: transparent; color: var(--d-code-dim);
  font-family: var(--d-mono); font-size: 11.5px;
}
.d-tab:hover { color: #fff; }
.d-tab.on { background: rgba(255, 255, 255, .10); color: #fff; }

.blk { position: relative; }
.blk pre {
  margin: 0; padding: 14px 15px;
  background: var(--d-code-2); border-radius: 9px;
  overflow-x: auto;
  font-family: var(--d-mono); font-size: 12.25px; line-height: 1.6;
  color: var(--d-code-ink);
  white-space: pre;
}
.blk pre[hidden] { display: none; }

.d-copy {
  position: absolute; top: 8px; right: 8px;
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .25); color: var(--d-code-dim);
  font-size: 11px; font-family: var(--d-sans);
  opacity: 0; transition: opacity .15s;
}
.blk:hover .d-copy, .d-copy:focus { opacity: 1; }
.d-copy:hover { color: #fff; }

/* Yanıt durum sekmeleri: 200 yeşil, 4xx turuncu, 5xx kırmızı. */
.d-tab.s2::before,
.d-tab.s4::before,
.d-tab.s5::before {
  content: '●'; margin-right: 5px; font-size: 9px; vertical-align: 1px;
}
.d-tab.s2::before { color: #52d19a; }
.d-tab.s4::before { color: #ffc35c; }
.d-tab.s5::before { color: #ff8a7a; }

/* ------------------------------------------------------------- duyarlı */
@media (max-width: 1240px) {
  .d-sec { grid-template-columns: minmax(0, 1fr); }
  .d-sec > .d-side {
    position: static; border-left: 0; border-top: 1px solid var(--d-line);
    min-height: 0;
  }
  .d-sec > .d-main { padding: 34px 32px 30px; }
}
@media (max-width: 900px) {
  .d-wrap { grid-template-columns: minmax(0, 1fr); }
  .d-nav {
    position: static; height: auto; max-height: 320px;
    border-right: 0; border-bottom: 1px solid var(--d-line);
  }
  .d-sec > .d-main { padding: 26px 18px 24px; }
  .d-sec > .d-side { padding: 20px 16px 24px; }
  .d-main h2 { font-size: 23px; }
}