/* sure-referans.css — /ui/sure/ altındaki statik süre referans sayfaları.
 *
 * ── NİÇİN AYRI VE KENDİ KENDİNE YETER ───────────────────────────────────────
 * base.css 24 KB ve değişkenlerinin bir bölümü tasarim.css'te tanımlı; yalnız
 * base.css yüklenirse renkler TANIMSIZ kalır. Bu sayfalar uygulama değil, arama
 * motorundan gelen ziyaretçinin gördüğü ilk ekran: hızlı açılmalı ve hiçbir
 * koşulda bozuk görünmemeli. Bu yüzden token'lar BURADA yeniden tanımlanıyor —
 * değerler tasarim.css'ten birebir alındı (ölçüldü, uydurulmadı).
 *
 * DEĞER KAYNAĞI (tasarim.css):
 *   açık:  --bg-surface #FFFFFF · --ds-border #E6E4DF · --ink-900 #17171A
 *   koyu:  --bg-app #1D1B19 · --bg-surface #262321 · --ds-border #3A3633
 *   aksan: #7FB0B8 (açık) · #9CC4CB (koyu)
 * tasarim.css'te bu değerler değişirse BURASI DA güncellenmeli; tek yol
 * olmadığı için ayrışma riski var, bilinçli kabul edildi.
 */

:root {
  --sr-bg:      #FAFAF8;   /* 胡粉 gofun */
  --sr-yuzey:   #FFFFFF;   /* 白   shiro */
  --sr-kenar:   #E6E4DF;   /* 瓶覗 kamenozoki */
  --sr-metin:   #27221F;   /* 墨   sumi      15.05:1 */
  --sr-soluk:   #6E5F57;   /* 素鼠 sunezumi   5.85:1 — eski #5F6368 SOĞUKTU */
  --sr-aksan:   #044F67;   /* 縹   hanada    9.05:1 beyazda (elle koyultma gerekmiyor) */
  --sr-on-aksan:#FFFFFF;   /* aksan ÜSTÜNDEKİ metin — sabit renk yerine token */
  --sr-uyari-bg:#F3E8D6;   /* 金茶 kincha-bg */
  --sr-uyari-kenar:#8A5A16;/* 金茶 kincha */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sr-bg:      #1D1B19;
    --sr-yuzey:   #262321;
    --sr-kenar:   #3A3633;
    --sr-metin:   #E9E3D7;   /* 生成 kinari */
    --sr-soluk:   #B0A498;   /* 薄墨 usuzumi */
    --sr-aksan:   #7FB0B8;   /* 浅葱 asagi */
    --sr-on-aksan:#0F2229;   /* 鉄御納戸 tetsuonando */
    --sr-uyari-bg:#33281A;   /* 金茶 kincha-dbg */
    --sr-uyari-kenar:#5C4626;/* 金茶 kincha-dbd */
  }
}
:root[data-theme="dark"] {
  --sr-bg:      #1D1B19;
  --sr-yuzey:   #262321;
  --sr-kenar:   #3A3633;
  --sr-metin:   #E9E3D7;   /* 生成 kinari */
  --sr-soluk:   #B0A498;   /* 薄墨 usuzumi */
  --sr-aksan:   #7FB0B8;   /* 浅葱 asagi */
  --sr-on-aksan:#0F2229;   /* 鉄御納戸 tetsuonando */
  --sr-uyari-bg:#33281A;   /* 金茶 kincha-dbg */
  --sr-uyari-kenar:#5C4626;/* 金茶 kincha-dbd */
}

* { box-sizing: border-box; }

.sr-body {
  margin: 0;
  background: var(--sr-bg);
  color: var(--sr-metin);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── Üst şerit ───────────────────────────────────────────────────────────── */
.sr-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sr-kenar);
  background: var(--sr-yuzey);
}
.sr-logo { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.sr-nav a { margin-left: 16px; font-size: 14px; color: var(--sr-soluk); }

a { color: var(--sr-aksan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Gövde ───────────────────────────────────────────────────────────────── */
.sr-ana {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 16px 56px;   /* 16px yan boşluk: telefonda yatay kaydırma olmasın */
}

.sr-iz { font-size: 13px; color: var(--sr-soluk); margin-bottom: 18px; }
.sr-iz a { color: var(--sr-soluk); }

h1 {
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
h2 {
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 30px 0 10px;
}

/* ── Künye kartı — sayfanın cevabı burada ────────────────────────────────── */
.sr-kart {
  background: var(--sr-yuzey);
  border: 1px solid var(--sr-kenar);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 20px;
}
.sr-kart dl { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; }
.sr-kart dt { color: var(--sr-soluk); font-size: 14px; }
.sr-kart dd { margin: 0; font-size: 15px; }
.sr-kart dd strong { font-size: 20px; }

/* ── 520 → 600: KANONİK SINIRA TAŞINDI ────────────────────────────────────
   Kanonik küme 600 / 900 / 1100 / 1400 (`scripts/test_kirilma_noktalari.js`)
   ve 520 onun dışındaydı — tek ihlal buydu.
   BEDELİ ÖLÇÜLDÜ, göz kararıyla taşınmadı (cmk-istinaf.html, gerçek Chrome):
       1100px  2 sütun · dd 480px · dt en çok 2 satır · taşma 0
        700px  2 sütun · dd 460px · dt 2 satır        · taşma 0
        600px  2 sütun · dd 360px · dt 2 satır        · taşma 0
        521px  2 sütun · dd 281px · dt 3 SATIR        · taşma 0
        520px  1 sütun · 446px                        · taşma 0
   Yani kayıp 521–600 bandındaki iki sütunlu düzen; hiçbir genişlikte taşma
   ya da kırpılma doğmuyor ve dt zaten 521'de 3 satıra çıkıp bozulmaya
   başlıyordu. 80px'lik bir bant için ikinci bir eşik kümesi taşımak,
   kanonik kümenin varlık sebebini bitirirdi. */
@media (max-width: 600px) {
  .sr-kart dl { grid-template-columns: 1fr; gap: 2px 0; }
  .sr-kart dd { margin-bottom: 10px; }
}

/* ── Uyarı (hak düşürücü vb.) ────────────────────────────────────────────── */
.sr-uyari {
  background: var(--sr-uyari-bg);
  border-left: 3px solid var(--sr-uyari-kenar);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 15px;
}

/* ── Eylem düğmesi ───────────────────────────────────────────────────────── */
.sr-dugme {
  display: inline-block;
  background: var(--sr-aksan);
  /* SABİT RENK KALDIRILDI: iki tema için iki ayrı kural (biri @media
     içinde) yazmak yerine tek token. Tasarım borcu kapısı bu iki satırı
     "yeni dosyada ihlal" diye yakaladı ve haklıydı. */
  color: var(--sr-on-aksan);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.sr-dugme:hover { text-decoration: none; opacity: .9; }
/* ── Alt gezinme ─────────────────────────────────────────────────────────── */
.sr-gezin {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin: 34px 0 0; padding-top: 16px;
  border-top: 1px solid var(--sr-kenar);
  font-size: 14px;
}

.sr-feragat {
  margin-top: 26px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sr-soluk);
}

/* ── Dizin sayfası ───────────────────────────────────────────────────────── */
.sr-giris { color: var(--sr-soluk); margin: 0 0 26px; }
.sr-liste { list-style: none; padding: 0; margin: 0 0 8px; }
.sr-liste li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sr-kenar);
}
.sr-sure { color: var(--sr-soluk); font-size: 14px; white-space: nowrap; }

/* ── Alt bilgi ───────────────────────────────────────────────────────────── */
.sr-alt {
  border-top: 1px solid var(--sr-kenar);
  background: var(--sr-yuzey);
  padding: 20px 16px;
  font-size: 13px;
  color: var(--sr-soluk);
  text-align: center;
}