/* ── Yazı tipleri: KENDİ SUNUCUMUZDAN ────────────────────────────────────────
   Önceden Google Fonts'tan yükleniyordu ve o istek ziyaretçinin IP adresini
   Google'a taşıyordu — sitedeki TEK üçüncü taraf akışı buydu (veri envanteri
   23 Ağustos 2026). Kendi kendine yeten bir kurulumu satan ürün için tutarsızdı,
   ve gizlilik metninin beyan etmesi gereken bir madde üretiyordu.

   Şimdi hiçbir üçüncü tarafa istek gitmiyor: analitik yok, izleyici yok, çerez yok.

   Dosyalar Google'ın servis ettiği alt kümelerin aynısı (latin + latin-ext) ve
   DEĞİŞKEN font — dört ağırlık için tek dosya. unicode-range değerleri Google'ın
   CSS'inden birebir alındı; uydurulmadı, çünkü yanlış aralık Türkçe karakterlerde
   sessizce yedek yazı tipine düşürür.

   Lisans: her ikisi de SIL Open Font License 1.1 — fonts/OFL-*.txt. OFL,
   fontla birlikte lisansın dağıtılmasını şart koşuyor.

   FONTLAR BURADA DA DURUYOR (site/docs/fonts/), kopya. Sebep: doküman sitesi
   docs.notusship.com olarak AYRI BİR KÖK altında yayınlanıyor ve "../fonts/" o
   kökün dışına çıkıyordu — fontlar sessizce 404 olur, sayfa sistem yazı tipine
   düşerdi. Kopya 192 KB; alternatifi doküman sitesini ana alan adının altına
   taşımaktı ve o, planlanan yapıyı değiştirirdi.
   ────────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  /* Değişken font: tek dosya 100-900 aralığını kapsıyor. Google'ın CSS'i ağırlık
     başına bir @font-face yazıyordu ama dördü de AYNI dosyayı gösteriyordu. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  /* Değişken font: tek dosya 100-900 aralığını kapsıyor. Google'ın CSS'i ağırlık
     başına bir @font-face yazıyordu ama dördü de AYNI dosyayı gösteriyordu. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  /* Değişken font: tek dosya 100-900 aralığını kapsıyor. Google'ın CSS'i ağırlık
     başına bir @font-face yazıyordu ama dördü de AYNI dosyayı gösteriyordu. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  /* Değişken font: tek dosya 100-900 aralığını kapsıyor. Google'ın CSS'i ağırlık
     başına bir @font-face yazıyordu ama dördü de AYNI dosyayı gösteriyordu. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─────────────────────────────────────────────────────────────────────────────
   docs.notusship.com

   Token'lar açılış sayfasının aynısı, o da ürünün tokens.css'inin aynısı. Doküman
   ürüne benzemek zorunda: kurulumu okurken ekranda gördüğü şeyle aynı dili konuşan
   bir sayfa, "doğru yerde miyim" sorusunu hiç doğurmuyor.

   FARK: gövde metni 13px DEĞİL, 15px. Ürün yoğun bir uygulama ve 13px orada doğru;
   doküman uzun uzun OKUNUYOR ve orada 13px yorucu. Ölçek aynı ailede, boyut işe
   göre.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --surface-0: #0A0A14;
  --surface-1: #111120;
  --surface-2: #17172A;
  --surface-inset: #08080F;

  --border-subtle:  #22223A;
  --border-default: #2C2C48;

  --text-primary:   #E8E8F0;
  --text-secondary: #A0A0B8;
  --text-tertiary:  #7E7E9C;

  --accent-400: #8B78FF;
  --accent-500: #6E56F8;
  --accent-subtle: rgba(110, 86, 248, 0.14);
  --accent-ring:   rgba(110, 86, 248, 0.45);

  --warning: #F5A524;
  --success: #34D399;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;  --sp-5: 12px; --sp-6: 16px;
  --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 40px; --sp-11: 48px;
  --sp-12: 64px;

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;

  --dur-fast: 100ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --surface-0: #FBFBFD;
    --surface-1: #FFFFFF;
    --surface-2: #F4F4F8;
    --surface-inset: #F0F0F5;

    --border-subtle:  #EDEDF2;
    --border-default: #E0E0E9;

    --text-primary:   #16162A;
    --text-secondary: #5A5A72;
    --text-tertiary:  #6B6B86;

    --accent-400: #5B44D9;
    --accent-subtle: rgba(110, 86, 248, 0.10);

    --warning: #B45309;
    --success: #047857;
  }
}

:root[data-theme="light"] {
  --surface-0: #FBFBFD;
  --surface-1: #FFFFFF;
  --surface-2: #F4F4F8;
  --surface-inset: #F0F0F5;

  --border-subtle:  #EDEDF2;
  --border-default: #E0E0E9;

  --text-primary:   #16162A;
  --text-secondary: #5A5A72;
  --text-tertiary:  #6B6B86;

  --accent-400: #5B44D9;
  --accent-subtle: rgba(110, 86, 248, 0.10);

  --warning: #B45309;
  --success: #047857;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-400); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Üst çubuk ── */

.ust {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-subtle);
}

.ust-ic {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 56px;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--sp-7);
}

.marka { display: flex; align-items: center; gap: var(--sp-5); color: inherit; }
.marka:hover { text-decoration: none; }

/* Marka işareti — currentColor, iki temada tek dosya. */
.marka-kare {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--accent-500);
}

.marka-ad {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
}

.marka-etiket {
  font-size: 12px;
  color: var(--text-tertiary);
  border-left: 1px solid var(--border-default);
  padding-left: var(--sp-5);
}

.bosluk { flex: 1; }
.geri { font-size: 13px; color: var(--text-secondary); }

/* ── Kabuk ── */

/* MOBİLDE minmax(0, 1fr) ZORUNLU.
   Izgara parçasının varsayılan alt sınırı "auto" — yani içeriğin max-content
   genişliği. Board maketi (üç kolon × 190px) ve terminal bloğu bu yüzden parçayı
   620px'e çıkarıp SAYFAYI yana kaydırıyordu; 360, 390 ve 430px'te ölçüldü.
   minmax(0, ...) alt sınırı sıfıra çekiyor ve iç kaydırma devreye giriyor. */
.kabuk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-9);
  max-width: 1180px;
  margin-inline: auto;
  padding: var(--sp-9) var(--sp-7) var(--sp-12);
}

@media (min-width: 900px) {
  .kabuk { grid-template-columns: 208px minmax(0, 1fr); gap: var(--sp-11); }
}

.yan { display: flex; flex-direction: column; gap: var(--sp-5); }

@media (min-width: 900px) {
  .yan { position: sticky; top: 88px; align-self: start; }
}

.yan-baslik {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.yan-menu { display: flex; flex-direction: column; gap: var(--sp-2); }

.yan-menu a {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 14px;
  transition: background var(--dur-fast) var(--ease-out);
}
.yan-menu a:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.yan-menu a.aktif { background: var(--accent-subtle); color: var(--accent-400); font-weight: 500; }

/* ── Dil değiştirme (NSHIP-96) ──
   Menünün PARÇASI DEĞİL, altında ayrı duruyor: doküman listesiyle aynı görünse
   okuyucu onu dördüncü bir sayfa sanır. Üstündeki ince çizgi ayrımı taşıyor.

   Genişliğe göre bir istisna YOK: .yan her ölçüde flex-direction:column, 900px
   altında yalnızca içeriğin üstüne geçiyor. Önce dar ekran için bir kural
   yazılmıştı, gerekçesi "menü yatay akıyor"du — ölçülünce akmadığı görüldü. */

.dil {
  align-self: start;
  margin-top: calc(var(--sp-2) * -1);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 13px;
}
.dil:hover { color: var(--text-primary); }

/* ── İçindekiler ── */

.icindekiler {
  margin-bottom: var(--sp-9);
  padding: var(--sp-6) var(--sp-7);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}

.ic-baslik {
  display: block;
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.icindekiler ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.icindekiler li.s3 { padding-left: var(--sp-7); }
.icindekiler li.s4 { padding-left: var(--sp-10); }
.icindekiler a { font-size: 14px; }

/* ── Yazı ── */

.yazi { max-width: 74ch; }

.yazi > * + * { margin-top: var(--sp-6); }

.yazi h1 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.yazi h2 {
  margin-top: var(--sp-11);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.yazi h3 {
  margin-top: var(--sp-9);
  font-size: 17px;
  font-weight: 600;
}

.yazi h4 {
  margin-top: var(--sp-8);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Başlık çengeli: yalnızca üstüne gelince. Her başlıkta duran bir # işareti,
   okumayı kesen bir gürültü. */
.cengel {
  float: left;
  margin-left: -1.1em;
  padding-right: 0.35em;
  color: var(--text-tertiary);
  opacity: 0;
  font-weight: 400;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.yazi h2:hover .cengel,
.yazi h3:hover .cengel,
.yazi h4:hover .cengel,
.cengel:focus-visible { opacity: 1; }

.yazi p { margin-block: 0; color: var(--text-secondary); }
.yazi strong { color: var(--text-primary); font-weight: 600; }

.yazi ul, .yazi ol {
  margin-block: 0;
  padding-left: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: var(--text-secondary);
}

.yazi li::marker { color: var(--text-tertiary); }

.yazi code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  color: var(--text-primary);
}

.yazi pre {
  margin-block: 0;
  padding: var(--sp-7);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  overflow-x: auto;
}

.yazi pre code {
  padding: 0;
  background: none;
  font-size: 13px;
  line-height: 21px;
  color: var(--text-secondary);
}

.yazi blockquote {
  margin: 0;
  padding: var(--sp-6) var(--sp-7);
  background: var(--accent-subtle);
  border-left: 2px solid var(--accent-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-secondary);
}

.yazi hr {
  margin-block: var(--sp-10);
  border: none;
  border-top: 1px solid var(--border-subtle);
}

/* Geniş tablolar KENDİ kabında kayıyor; sayfa gövdesi yana kaymıyor. */
.tablo-kabi { overflow-x: auto; }

.yazi table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 14px;
}

.yazi th {
  text-align: left;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.yazi td {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--text-secondary);
}

.yazi tbody tr:last-child td { border-bottom: none; }

/* Yayınlanmayan bir iç dokümana yapılan atıf: bağlantı DEĞİL, ama metin duruyor.
   Kırık bir bağlantı bırakmak 404 demekti; cümleyi silmek anlamı bozardı. */
.ic-referans {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--text-tertiary);
}

/* ── Alt bilgi ── */

.alt {
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--sp-9);
  font-size: 13px;
  color: var(--text-tertiary);
}

.alt-ic {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: center;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--sp-7);
}

/* DOKUNMA HEDEFİ: dar ekranda kontroller en az 44px (390px'te ölçüldü).
   Satır içi metin bağlantıları ve başlık çengeli hariç — ikisi de akış içinde
   ve birincil kontrol değil. */
@media (max-width: 899px) {
  .marka, .geri { min-height: 44px; display: inline-flex; align-items: center; }
  .yan-menu a { min-height: 44px; display: flex; align-items: center; }
  .alt-ic a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
  .cengel { opacity: 1; }
}