/* Forevermore sitesi: dış kaynak (yazı tipi, betik, analiz) yok; her şey bu klasörde.
   Jetonlar uygulamayla aynı (docs/TASARIM_ESASLARI.md). Cam/bulanıklık yok; katmanlı düz tonlar. */
:root {
  --bg: #0f1420;
  --surface: #171e2e;
  --surface-2: #1d2638;
  --edge: #35405a;
  --border: #263046;
  --text: #e9eef8;
  --muted: #9aa5bd;
  --green: #2fd3a1;
  --green-dark: #2fd3a1;
  --on-green: #06281e;
  --teal: #52e0b5;
  --accent: #8b7cff;
  --purple-wash: #211f45;
  --green-wash: #133a33;
  --bad: #f0605d;
  --warn: #f2b84b;
  /* kanıt durumu renkleri (uygulamadaki TONES ile aynı aile) */
  --v-gercek: #2fb26d;
  --v-kismen: #26a69a;
  --v-durumsal: #8b6cf0;
  --v-tartisma: #e09a2b;
  --v-placebo: #8d98b0;
  --v-zararli: #f0605d;
  /* bölüm renkleri: her bölümün kendi tonu var (docs/TASARIM_ESASLARI.md §11) */
  --sky: #4cc3ff;
  --amber: #f2b84b;
  --rose: #ff7a9c;
  --radius: 12px;
  --max: 1120px;
  --display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #f3f6fa;
    --edge: #ffffff;
    --border: #dde3ec;
    --text: #141a26;
    --muted: #566177;
    --green: #0b7a5a;
    --green-dark: #0b7a5a;
    --on-green: #ffffff;
    --teal: #0e8f6a;
    --accent: #6a5af0;
    --purple-wash: #e8e5fb;
    --green-wash: #dcf3ea;
    --bad: #c93c3a;
    --warn: #b7791f;
    --v-gercek: #1f8f55;
    --v-kismen: #14857b;
    --v-durumsal: #6a5af0;
    --v-tartisma: #b7791f;
    --v-placebo: #566177;
    --v-zararli: #c93c3a;
    --sky: #0a6aa5;
    --amber: #8a5a00;
    --rose: #b8224f;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--green); }
a:hover { color: var(--teal); }
code, .mono { font-family: var(--mono); font-size: .92em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ---------------------------------------------------------------- üst çubuk */
header.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
header.top .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--display); font-weight: 650; font-size: 19px; }
.brand img { height: 26px; width: auto; }
nav.links { margin-left: auto; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
nav.links a { color: var(--muted); text-decoration: none; font-size: 15px; }
nav.links a:hover { color: var(--text); }
nav.links a.lang { border: 1px solid var(--border); border-radius: 8px; padding: 2px 9px; }
.a11y { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 8px; padding: 2px 9px;
        font: inherit; font-size: 15px; cursor: pointer; min-height: 32px; }
.a11y[aria-pressed="true"] { background: var(--green-wash); color: var(--text); border-color: var(--green); }

/* ---------------------------------------------------------------- düğmeler */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 20px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  text-decoration: none; border: 1px solid var(--border); color: var(--text); background: var(--surface-2);
  transition: background-color .12s ease-out, border-color .12s ease-out, filter .12s ease-out;
}
.btn:hover { color: var(--text); border-color: var(--green); }
.btn.primary { background: var(--green-dark); border-color: transparent; color: var(--on-green); }
.btn.primary:hover { filter: brightness(1.08); color: var(--on-green); }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; pointer-events: none; }
.textlink { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; }
.textlink:hover { color: var(--text); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* ---------------------------------------------------------------- giriş */
.hero { padding: 64px 0 28px; }
.hero h1 { font-family: var(--display); font-weight: 650; font-size: clamp(2.3rem, 6vw, 4.3rem); line-height: 1.04;
           letter-spacing: -.035em; margin: 0 0 18px; max-width: 15ch; }
.hero .lead { color: var(--muted); font-size: 19px; max-width: 58ch; margin: 0 0 26px; }
.hero .lead b { color: var(--text); font-weight: 600; }
.hero .actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- demo penceresi */
.demo { padding: 8px 0 72px; }
.pencere { border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); overflow: hidden;
           box-shadow: 0 0 0 6px color-mix(in srgb, var(--purple-wash) 60%, transparent); }
.pencere-bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: var(--bg);
               border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.pencere-bar img { height: 16px; width: auto; }
.pencere-bar .ornek { margin-left: auto; font-size: 12.5px; }
.pencere-govde { display: grid; grid-template-columns: 200px 1fr; min-height: 468px; }
[role="tablist"] { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: var(--bg); border-right: 1px solid var(--border); }
[role="tab"] { text-align: left; background: transparent; border: 0; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
               padding: 10px 12px; border-radius: 8px; min-height: 44px; transition: background-color .12s ease-out; }
[role="tab"]:hover { background: var(--surface-2); color: var(--text); }
[role="tab"][aria-selected="true"] { background: var(--green-wash); color: var(--text); box-shadow: inset 3px 0 0 var(--green); }
.sahne { padding: 28px clamp(18px, 4vw, 40px); min-width: 0; }
.sahne[hidden] { display: none; }
.sahne h2 { font-family: var(--display); font-size: 22px; font-weight: 650; margin: 0 0 4px; letter-spacing: -.01em; }
.sahne .alt { color: var(--muted); margin: 0 0 20px; font-size: 15px; max-width: 62ch; }

/* kanıt rozetleri */
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
         background: color-mix(in srgb, var(--rc, var(--v-placebo)) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rc, var(--v-placebo)) 60%, transparent); color: var(--text); }
.rozet::before { content: var(--rg, "○"); color: var(--rc, var(--v-placebo)); font-weight: 700; }
.r-gercek { --rc: var(--v-gercek); --rg: "✓"; }
.r-kismen { --rc: var(--v-kismen); --rg: "◐"; }
.r-durumsal { --rc: var(--v-durumsal); --rg: "◇"; }
.r-tartisma { --rc: var(--v-tartisma); --rg: "?"; }
.r-placebo { --rc: var(--v-placebo); --rg: "○"; }
.r-zararli { --rc: var(--v-zararli); --rg: "✕"; }

/* tahmin oyunu */
.ilerleme { display: flex; gap: 5px; margin: 0 0 18px; }
.ilerleme i { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.ilerleme i.tamam { background: var(--green); }
.ilerleme i.yanlis { background: var(--warn); }
.iddia { font-family: var(--display); font-size: clamp(20px, 3vw, 26px); font-weight: 600; line-height: 1.25; margin: 0 0 20px; max-width: 30ch; letter-spacing: -.01em; }
.secenekler { display: flex; gap: 10px; flex-wrap: wrap; }
.secenekler .btn { min-width: 128px; }
.sonuc { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); max-width: 62ch; }
.sonuc p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.sonuc .dogru { color: var(--green); font-weight: 650; }
.sonuc .yanlis { color: var(--warn); font-weight: 650; }
.sonuc-eylem { margin-top: 14px; }
.skor { font-family: var(--display); font-size: 34px; font-weight: 650; margin: 0 0 6px; letter-spacing: -.02em; }
.giris { animation: gir .24s ease-out both; }
@keyframes gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* tarama */
.makine { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
          font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.makine b { color: var(--text); font-weight: 600; }
.cubuk { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin: 0 0 6px; }
.cubuk i { display: block; height: 100%; width: 0; background: var(--green); transition: width .35s ease-out; }
.durum-satir { font-size: 14px; color: var(--muted); min-height: 22px; margin: 0 0 14px; font-family: var(--mono); }
.bulgular { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bulgu { border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.bulgu h3 { margin: 0 0 3px; font-size: 16px; }
.bulgu p { margin: 0; color: var(--muted); font-size: 14.5px; }
.bulgu.cozuldu { border-left-color: var(--green); opacity: .8; }
.bulgu .btn { margin-top: 8px; }

/* geri alma */
.zincir { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; border: 1px solid var(--border); color: var(--muted); background: var(--bg); }
.chip.acik { color: var(--text); border-color: var(--green); background: var(--green-wash); }
.degisiklikler { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.degisiklikler li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.degisiklikler .ad { font-weight: 600; font-size: 15px; }
.degisiklikler .deger { font-family: var(--mono); font-size: 14px; color: var(--text); text-align: right; }
.degisiklikler .eski { color: var(--muted); text-decoration: line-through; margin-right: 8px; }
.degisiklikler li.geri .deger .yeni { color: var(--muted); }
.degisiklikler li.geri { border-style: dashed; }

/* ---------------------------------------------------------------- bölümler */
section { padding: 72px 0; }
section h2.baslik { font-family: var(--display); font-weight: 650; font-size: clamp(1.6rem, 3.2vw, 2.2rem); letter-spacing: -.025em; line-height: 1.15; margin: 0 0 10px; }
section p.sub { color: var(--muted); max-width: 64ch; margin: 0 0 28px; }
.belge { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; align-items: start; }
.icindekiler { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.icindekiler a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-left: 2px solid var(--border); }
.icindekiler a:hover { color: var(--text); border-left-color: var(--green); }
.belge-govde { min-width: 0; }
.belge-govde > section { padding: 0 0 56px; }
.belge-govde h3 { font-family: var(--display); font-size: 21px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 8px; }
.belge-govde p { max-width: 70ch; }

/* dağılım çubuğu */
.dagilim { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 18px 0 12px; gap: 2px; }
.dagilim i { display: block; background: var(--rc); }
.dagilim-liste { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0 0 8px; font-size: 14.5px; }
.dagilim-liste b { font-family: var(--mono); }

/* kanıt tablosu */
.arac { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.arac input[type="search"] { flex: 1 1 220px; min-height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0 12px; font: inherit; }
.filtre { cursor: pointer; font: inherit; }
.filtre[aria-pressed="true"] { border-color: var(--green); background: var(--green-wash); color: var(--text); }
.tablo-kap { border: 1px solid var(--border); border-radius: var(--radius); max-height: 560px; overflow: auto; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th { position: sticky; top: 0; background: var(--bg); text-align: left; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
td.ad { font-weight: 600; min-width: 220px; }
td.ad small { display: block; font-family: var(--mono); font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
td.neden { color: var(--muted); min-width: 280px; }
tr[hidden] { display: none; }
.tablo-not { color: var(--muted); font-size: 14px; margin: 10px 0 0; }

/* her değişiklikte olan sıra */
.sira { list-style: none; counter-reset: s; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; max-width: 70ch; }
.sira li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.sira li::before { content: counter(s); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--green); color: var(--green); font-family: var(--mono); font-size: 14px; }
.sira b { display: block; }
.sira span { color: var(--muted); font-size: 15px; }
.liste { padding-left: 20px; color: var(--muted); max-width: 70ch; }
.liste li { margin: 6px 0; }
.liste b { color: var(--text); font-weight: 600; }
.uyari { border-left: 3px solid var(--warn); background: var(--surface); padding: 10px 14px; border-radius: 6px; color: var(--muted); max-width: 70ch; }

/* ---------------------------------------------------------------- fiyat */
.sure { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 6px 0 4px; }
.sure button { background: var(--bg); color: var(--muted); border: 0; border-right: 1px solid var(--border); font: inherit; font-weight: 600; padding: 8px 16px; min-height: 40px; cursor: pointer; }
.sure button:last-child { border-right: 0; }
.sure button[aria-pressed="true"] { background: var(--green-wash); color: var(--text); box-shadow: inset 0 -3px 0 var(--green); }
.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 860px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; background: var(--purple-wash); color: var(--accent); margin-left: 6px; vertical-align: middle; }

/* ---------------------------------------------------------------- indirme, SSS */
.indir { display: grid; gap: 28px 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.kutu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.kutu h3 { margin: 0 0 8px; font-family: var(--display); font-size: 18px; }
.kutu p { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.kutu code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; word-break: break-all; color: var(--text); }
details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin: 10px 0; max-width: 820px; }
details summary { cursor: pointer; font-weight: 600; }
details p { color: var(--muted); margin: 10px 0 0; }

/* ---------------------------------------------------------------- yasal sayfalar */
.doc { max-width: 820px; margin: 0 auto; padding: 40px 20px 64px; }
.doc h1 { font-size: 30px; margin-bottom: 4px; }
.doc .updated { color: var(--muted); font-size: 14px; margin-top: 0; }
.doc h2 { font-size: 21px; margin-top: 34px; text-align: left; }
.doc p, .doc li { color: var(--text); }
.doc .lang-split { border-top: 1px solid var(--border); margin-top: 44px; padding-top: 10px; }
.doc pre { white-space: pre-wrap; font-family: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; font-size: 15px; }
.draft { border-left: 3px solid var(--warn); background: var(--surface-2); padding: 8px 12px; border-radius: 6px; color: var(--muted); }

/* ---------------------------------------------------------------- alt bilgi */
footer { border-top: 1px solid var(--border); padding: 28px 0; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer .wrap nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); }
footer .wrap > span { min-width: 0; overflow-wrap: anywhere; }   /* uzun e-posta dar ekranda taşmasın */

/* ---------------------------------------------------------------- dar ekran */
@media (max-width: 860px) {
  .pencere-govde { grid-template-columns: 1fr; }
  [role="tablist"] { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px; }
  [role="tab"] { white-space: nowrap; }
  [role="tab"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--green); }
  .belge { grid-template-columns: 1fr; gap: 20px; }
  .icindekiler { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .icindekiler a { border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
  .indir { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  header.top .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  nav.links { margin-left: 0; gap: 12px; }
  .hero { padding-top: 36px; }
  section { padding: 52px 0; }
  .secenekler .btn { flex: 1 1 100%; }
  .degisiklikler li { grid-template-columns: 1fr; }
  .degisiklikler .deger { text-align: left; }
}

/* Okuma modu (disleksi / DEHB). Ayarlar erisim.js'de: yazı tipi (Lexend varsayılan: tüm Türkçe harfler var; Atkinson Hyperlegible'da İ ve ₺ yok; OpenDyslexic),
   boyut, okuma çizgisi; tercih localStorage'da. Kurallar: tek okunaklı yazı tipi, büyük yazı, geniş harf/kelime/satır aralığı
   (WCAG 1.4.12), sola yaslı ve ≤ 65 karakterlik satırlar, italik ve tamamı büyük harf yok, kırık beyaz / yumuşak koyu tek zemin,
   hareket ve süs yok. Yazı tipleri fonts/ altında (SIL OFL 1.1); yalnızca okuma modunda indirilir. */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-400-normal.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: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-700-normal.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: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Lexend"; font-weight: 400; font-display: swap; src: url(fonts/lexend-latin-400-normal.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: "Lexend"; font-weight: 400; font-display: swap; src: url(fonts/lexend-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Lexend"; font-weight: 700; font-display: swap; src: url(fonts/lexend-latin-700-normal.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: "Lexend"; font-weight: 700; font-display: swap; src: url(fonts/lexend-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "OpenDyslexic"; font-weight: 400; font-display: swap; src: url(fonts/opendyslexic-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-weight: 700; font-display: swap; src: url(fonts/opendyslexic-latin-700-normal.woff2) format("woff2"); }

html[data-okunabilir] {
  --ok-font: "Lexend", Verdana, Tahoma, sans-serif; --ok-boyut: 20px;
  --bg: #f5f1e8; --surface: #fbf8f2; --surface-2: #efe9dd; --edge: #d8cfbd; --border: #d8cfbd;
  --text: #25272c; --muted: #474b54; --green: #0b6b50; --green-dark: #0b6b50; --on-green: #ffffff; --teal: #0b6b50;
  --accent: #4b3fb8; --amber: #7a5200; --on-amber: #ffffff; --stutter: #b3332a; --warn: #8a5a00; --bad: #b3332a;
  --display: var(--ok-font); --mono: var(--ok-font); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-okunabilir] { --bg: #1d2026; --surface: #252930; --surface-2: #2b3038; --edge: #3d434e; --border: #3d434e;
    --text: #e6e1d7; --muted: #c2bdb2; --green: #66d4b0; --green-dark: #66d4b0; --on-green: #10291f; --teal: #66d4b0;
    --accent: #b0a6ff; --amber: #e8bb66; --on-amber: #2a1d00; --stutter: #f08a80; --warn: #e8bb66; --bad: #f08a80; color-scheme: dark; }
}
html[data-okunabilir][data-ok-font="atkinson"] { --ok-font: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif; }
html[data-okunabilir][data-ok-font="opendyslexic"] { --ok-font: "OpenDyslexic", Verdana, Tahoma, sans-serif; }
html[data-okunabilir][data-ok-boyut="18"] { --ok-boyut: 18px; } html[data-okunabilir][data-ok-boyut="22"] { --ok-boyut: 22px; }
html[data-okunabilir][data-ok-boyut="24"] { --ok-boyut: 24px; } html[data-okunabilir][data-ok-boyut="26"] { --ok-boyut: 26px; }

/* tek yazı tipi, büyük yazı, geniş aralık, sola yaslı, italik / büyük harf yok */
html[data-okunabilir] body { background: var(--bg); color: var(--text); font-family: var(--ok-font); font-size: var(--ok-boyut);
  line-height: 1.8; letter-spacing: .035em; word-spacing: .14em; overflow-wrap: break-word; }
html[data-okunabilir] body * { font-family: var(--ok-font) !important; font-style: normal !important; text-transform: none !important;
  text-align: left; hyphens: none; }
html[data-okunabilir] body :is(p, li, a, button, summary, label, td, th, small, span, em, code, input, select, dt, dd, .rozet, .chip) { font-size: inherit !important; }
html[data-okunabilir] :is(h1, h2, h3) { line-height: 1.3 !important; letter-spacing: .01em !important; font-weight: 700 !important; text-wrap: pretty; margin-top: 0; }
html[data-okunabilir] h1 { font-size: 1.9em !important; max-width: 24ch !important; }
html[data-okunabilir] h2 { font-size: 1.5em !important; max-width: 30ch; }
html[data-okunabilir] h3 { font-size: 1.15em !important; }
html[data-okunabilir] :is(b, strong) { font-weight: 700; }
html[data-okunabilir] :is(p, li, dd, summary, details, .sub, .lead, .alt, .not) { max-width: 65ch !important; }
html[data-okunabilir] p { margin: 0 0 1.1em; }
html[data-okunabilir] .wrap { max-width: 980px; }
html[data-okunabilir] section, html[data-okunabilir] .hero2, html[data-okunabilir] .fark, html[data-okunabilir] .fiyat2, html[data-okunabilir] .son { padding-block: 56px; }
/* düz, tek sütun akış: göz bir şeyden ötekine atlamasın */
html[data-okunabilir] :is(.iki, .uclu, .indir, .plans2, .belge) { grid-template-columns: 1fr !important; }
html[data-okunabilir] .olculer { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); }
html[data-okunabilir] .sure { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5em), 1fr)); max-width: none; }
html[data-okunabilir] :is(.chip, .rozet, .serit li, nav.links a) { white-space: normal !important; }
html[data-okunabilir] :is(.kutu, .olcu, li, .kisaca, .oyun-kart) { min-width: 0; }
/* dar ekranda tek uzun kelime (ör. BATTLEGROUNDS) düğmeyi taşırmasın */
html[data-okunabilir] :is(.btn, .chip, button, .rozet) { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
html[data-okunabilir] .dagilim-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
html[data-okunabilir] .sira li > div { min-width: 0; overflow-wrap: anywhere; }
html[data-okunabilir] .oyun-kart > * { min-width: 0; overflow-wrap: anywhere; }
html[data-okunabilir] .pencere-govde { grid-template-columns: 1fr; }
html[data-okunabilir] [role="tablist"] { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
html[data-okunabilir] .icindekiler { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
html[data-okunabilir] .hero2 { min-height: 0; }
html[data-okunabilir] .hud { position: static; width: auto; max-width: 30em; margin-top: 24px; }
html[data-okunabilir] .son .actions, html[data-okunabilir] .son h2, html[data-okunabilir] .son p { justify-content: flex-start; margin-inline: 0; }
html[data-okunabilir] :is(.btn, [role="tab"], .a11y, .sure button, .ab button) { white-space: normal; height: auto; min-height: 48px; line-height: 1.35; }
html[data-okunabilir] .tanim li { grid-template-columns: 1fr auto; }
html[data-okunabilir] .tanim li > span:last-child { grid-column: 1 / -1; }
html[data-okunabilir] .kunye-satir { grid-template-columns: 1fr; }
html[data-okunabilir] td.ad, html[data-okunabilir] td.neden { min-width: 0; }
html[data-okunabilir] header.top { position: static; }
html[data-okunabilir] header.top .wrap { height: auto; padding-block: 10px; flex-wrap: wrap; }
html[data-okunabilir] nav.links { gap: 8px 18px; }
/* süs yok: zemin tek renk, kartlar yalnızca ince çerçeve; tuval, parlama, şerit hareketi kapalı */
html[data-okunabilir] :is(.kutu, .pencere, .olcu, .kontrol, details, .hud, .grafik, .sonuc, .bulgu, .kunye-kart) {
  background: var(--surface); box-shadow: none !important; }
html[data-okunabilir] :is(section, .hero2, .serit) { background: var(--bg); border-color: var(--border); }
html[data-okunabilir] :is(.kutu, .bulgu, .kunye-kart, details, .uyari, .oyun-sonuc) { border: 1px solid var(--border) !important; }
html[data-okunabilir] :is(.son canvas, .grafik) { display: none !important; }
/* sahte öğeler :is() içinde geçersiz sayılıp atlanıyordu: ayrı yazılır */
html[data-okunabilir] .hero2::before, html[data-okunabilir] .parla::after, html[data-okunabilir] .cizik::after { display: none !important; }
/* önce/sonra grafiği arka plan değil, metnin altında durağan bir blok; ayırıcı yine sürüklenir ve ok tuşlarıyla kayar */
html[data-okunabilir] .hero-iz { position: relative; z-index: 0; isolation: isolate; inset: auto; order: 2; height: 240px; margin: 8px clamp(16px, 4vw, 40px) 8px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); overflow: hidden; }
html[data-okunabilir] .ayirici { top: 50%; box-shadow: none; }
/* kenar süsleri kapanır; oyun kapakları gösterilmez (ve yüklenmez), oyunlar yalnızca adla */
html[data-okunabilir] body::before, html[data-okunabilir] body::after { display: none !important; }
html[data-okunabilir] :is(.noktalar, .kenar, .oyun-serit .kapak-yer) { display: none !important; }
html[data-okunabilir] .oyun-serit li { width: auto; min-height: 0; border-radius: 999px; }
html[data-okunabilir] .oyun-serit li .ad { padding: 4px 12px; font-size: inherit; font-weight: 400; min-height: 0; }
html[data-okunabilir] .cizik { text-decoration: line-through; text-decoration-thickness: .08em; color: inherit; }
html[data-okunabilir] :is(.btn) { box-shadow: none !important; }
html[data-okunabilir] .serit-iz { animation: none !important; transform: none !important; width: auto !important; display: block; }
html[data-okunabilir] .serit ul { flex-wrap: wrap; min-width: 0; row-gap: 10px; justify-content: flex-start; }
html[data-okunabilir] .oyun-serit { -webkit-mask: none; mask: none; }
html[data-okunabilir] .serit ul[aria-hidden] { display: none; }
html[data-okunabilir] .dagilim i { opacity: 1 !important; transform: none !important; }
html[data-okunabilir] *, html[data-okunabilir] *::before, html[data-okunabilir] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* belirgin odak */
html[data-okunabilir] :focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 3px; border-radius: 6px; }

/* DEHB yardımcıları: kısa özet, ilerleme çubuğu, okuma çizgisi (yalnızca okuma modunda görünür) */
.kisaca { display: none; }
html[data-okunabilir] .kisaca { display: block; max-width: 65ch; margin: 0 0 1.4em; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
html[data-okunabilir] .kisaca b { display: block; margin-bottom: 2px; }
.ok-ilerleme { display: none; }
html[data-okunabilir] .ok-ilerleme { display: block; position: fixed; inset: 0 0 auto 0; height: 6px; z-index: 60; background: var(--border); pointer-events: none; }
.ok-ilerleme i { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }
.ok-cizgi { display: none; }
html[data-okunabilir][data-ok-cizgi] .ok-cizgi { display: block; position: fixed; left: 0; right: 0; top: 0; height: calc(var(--ok-boyut) * 2.6); z-index: 55; pointer-events: none;
  border-block: 2px solid var(--accent); box-shadow: 0 0 0 100vmax rgb(20 22 28 / .32); }

/* başlıktaki okuma düğmeleri ve ayar paneli (her iki modda) */
.okuma { position: relative; display: inline-flex; gap: 6px; align-items: center; }
.a11y { display: inline-flex; align-items: center; gap: 7px; }
.a11y .ikon { width: 1.05em; height: 1.05em; }
.ok-ayar[hidden] { display: none; }
.ok-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: min(340px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--edge);
  border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 18px 50px -12px rgb(0 0 0 / .45); }
.ok-panel[hidden] { display: none; }
.ok-panel fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.ok-panel legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.ok-secenek { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.ok-not { color: var(--muted); font-size: .85em; line-height: 1.35; }
.ok-secenek:has(input:checked) { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.ok-secenek input { accent-color: var(--green); width: 18px; height: 18px; margin: 0; }
.ok-boyut { display: flex; align-items: center; gap: 10px; }
.ok-boyut button { min-width: 48px; min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.ok-boyut button:disabled { opacity: .45; cursor: default; }
.ok-boyut output { min-width: 4.5em; text-align: center; font-weight: 700; }
.ok-panel .ok-kapat { width: 100%; }
@media (max-width: 640px) { .ok-panel { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; } }

/* hareket ve karşıtlık tercihleri */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --border: #6b7a9c; --muted: #c8d0e2; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root { --border: #7a869c; --muted: #333d50; }   /* açık temada açık gri yazı beyaz zemine düşüyordu */
}
.kutu.tam { grid-column: 1 / -1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tanim { list-style: none; padding: 0; margin: 0; max-width: 70ch; }
.tanim li { display: grid; grid-template-columns: 210px 44px 1fr; gap: 4px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.tanim b { font-family: var(--mono); text-align: right; }
.tanim li > span:last-child { color: var(--muted); }
@media (max-width: 640px) { .tanim li { grid-template-columns: 1fr auto; } .tanim li > span:last-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- renkli bölümler */
section[data-tint] { --tint: var(--green); background: color-mix(in srgb, var(--tint) 6%, var(--bg));
                     border-top: 1px solid color-mix(in srgb, var(--tint) 32%, var(--border)); }
section[data-tint="sky"] { --tint: var(--sky); }
section[data-tint="amber"] { --tint: var(--amber); }
section[data-tint="rose"] { --tint: var(--rose); }
section[data-tint="violet"] { --tint: var(--accent); }
section[data-tint] h2.baslik { border-left: 5px solid var(--tint); padding-left: 14px; }
section[data-tint="violet"] details { border-left: 3px solid var(--tint); }
.iki, .uclu { display: grid; gap: 18px; margin: 0 0 24px; }
.iki { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.uclu { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kutu[class*="k-"] { border-top: 3px solid var(--t); background: color-mix(in srgb, var(--t) 9%, var(--surface)); }
.k-green { --t: var(--green); } .k-sky { --t: var(--sky); } .k-rose { --t: var(--rose); }
.k-amber { --t: var(--amber); } .k-violet { --t: var(--accent); }

/* giriş: etiket şeridi */
.hero-etiket { margin-top: 36px; max-width: 760px; }
.hero-etiket .dagilim { height: 18px; border-radius: 9px; margin: 0 0 12px; }
.hero-etiket .dagilim-liste { margin: 0; }

/* demo sekmelerinin renkleri */
#t-tara, #s-tara { --tint: var(--green); } #t-kunye, #s-kunye { --tint: var(--sky); }
#t-geri, #s-geri { --tint: var(--accent); } #t-tahmin, #s-tahmin { --tint: var(--amber); }
[role="tab"] { display: flex; align-items: center; gap: 10px; }
[role="tab"]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tint, var(--green)); flex: none; }
[role="tab"][aria-selected="true"] { background: color-mix(in srgb, var(--tint, var(--green)) 18%, var(--surface)); box-shadow: inset 3px 0 0 var(--tint, var(--green)); }
.sahne h2 { border-left: 4px solid var(--tint, var(--green)); padding-left: 12px; }
.sahne .btn.primary { background: var(--tint, var(--green-dark)); color: var(--on-green); }
.cubuk i { background: var(--tint, var(--green)); }
@media (max-width: 860px) { [role="tab"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--tint, var(--green)); } }

/* süzgeç düğmeleri (künye ve oyun listesi) */
.chip.filtre { min-height: 36px; padding: 4px 12px; border-color: color-mix(in srgb, var(--rc, var(--green)) 55%, var(--border)); }
.chip.filtre[aria-pressed="true"] { background: color-mix(in srgb, var(--rc, var(--green)) 20%, var(--surface)); border-color: var(--rc, var(--green)); color: var(--text); }

/* ayar künyesi */
.kunye-kart { border: 1px solid color-mix(in srgb, var(--rc) 50%, var(--border)); border-left: 5px solid var(--rc);
              background: color-mix(in srgb, var(--rc) 7%, var(--surface-2)); border-radius: 12px; padding: 18px 20px; max-width: 72ch; margin-top: 14px; }
.kunye-bas { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.kunye-bas h3 { margin: 0; font-size: 18px; }
.kunye-satir { display: grid; grid-template-columns: 150px 1fr; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 15px; }
.kunye-satir b { color: var(--muted); font-weight: 600; }
.kunye-not { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .kunye-satir { grid-template-columns: 1fr; } }

/* oyun denetimi */
.kontrol { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.kontrol label { display: block; font-weight: 600; margin-bottom: 6px; }
.kontrol input { width: 100%; max-width: 420px; min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 0 12px; font: inherit; }
.oyun-chipler { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.oyun-sonuc { margin: 0; padding: 12px 14px; border-radius: 10px; border-left: 4px solid var(--border); background: var(--surface-2); max-width: 70ch; }
.oyun-sonuc.var { border-left-color: var(--green); }
.oyun-sonuc.yok { border-left-color: var(--sky); }

.sure button[aria-pressed="true"] { background: color-mix(in srgb, var(--amber) 20%, var(--surface)); box-shadow: inset 0 -3px 0 var(--amber); }
html[data-okunabilir] .olcu b small { font-size: .5em !important; }