/* ============================================================
   Gramer Atlası - base.css
   Retro-yeşil palet, tipografi, temel sıfırlama
   ============================================================ */

:root {
  /* --- Ana palet (retro yeşil) --- */
  --green-900: #0f2a1c;
  --green-800: #14361f;
  --green-700: #1f5137;
  --green-600: #2a6a46;
  --green-500: #36855a;
  --green-400: #5aa077;
  --green-300: #8ec2a0;
  --green-200: #c2dfcc;
  --green-100: #e2efe5;

  --cream:     #fbf6e9;
  --paper:     #f4ecd8;
  --paper-2:   #ece1c6;
  --sand:      #dfd0ae;

  --mustard:   #d9a03c;
  --mustard-d: #b8822a;
  --mustard-bg:#f6ead0;
  /* Vurgu renkleri yazı olarak kullanıldığında (sekme, üst başlık, rozet
     yazısı) açık zeminde 4.5:1 kontrastı geçen koyu eşleri. 0.9 UI/UX
     denetimi: --mustard-d (3.1:1) ve --terra (3.8:1) yazı için yetersizdi. */
  --mustard-ink:#835911;
  --terra-d:   #9d4525;
  --terra:     #b5542f;
  --terra-l:   #d8825c;
  --plum:      #6d4a7a;
  --sky:       #3f7f8c;

  /* --- Anlamsal --- */
  --bg:        var(--paper);
  --bg-grain:  rgba(31, 81, 55, .045);
  --surface:   var(--cream);
  --surface-2: #f7f0de;
  --ink:       #17271d;
  --ink-soft:  #47584c;
  --ink-mute:  #4f5f53;   /* 0.9: #5c6c60 kâğıt-2 zeminde 4.5:1'in altına düşüyordu */
  --line:      #cbbb9c;
  --line-2:    #bfae86;
  --accent:    var(--green-700);
  --accent-ink:var(--cream);
  --link:      var(--green-600);
  /* alıştırmada cevap durumu */
  --ok-bg:     #c2dfcc;
  --ok-edge:   #2a6a46;
  --ok-key:    var(--cream);
  --no-bg:     #efc9b6;
  --no-edge:   #9d4525;
  --no-key:    var(--cream);

  /* Zaman grupları */
  --past:      #9d4525;
  --past-bg:   #f6e2d8;
  --present:   #2a6a46;
  --present-bg:#dcecdf;
  /* --future eskiden #2d6774 idi: yeşile çok yakın bir tonda (189-191° hue)
     kaldığı için açık temada --present ile, özellikle soluk *-bg tonlarında,
     neredeyse aynı renk gibi görünüyordu. Daha belirgin bir maviye (~208°)
     kaydırıldı. */
  --future:    #225677;
  --future-bg: #dbe6f0;
  /* Mini zaman çizgisi şeridi: --past/--future ile --surface'in sabit karışımı.
     color-mix() yerine önceden hesaplanmış değer kullanılır ki eski Safari/iOS
     sürümlerinde de (color-mix desteklenmese bile) şerit görünür kalsın. */
  --tl-mini-past:   #cea18b;
  --tl-mini-future: #93a9b2;

  /* --- Ölçü --- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --shadow-color: var(--line-2);
  --shadow-hard: 3px 3px 0 var(--shadow-color);
  --shadow-soft: 0 6px 18px rgba(23, 39, 29, .10);
  --ring: 0 0 0 3px rgba(54, 133, 90, .35);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --maxw: 1080px;
  --tabbar-h: 62px;
}

html[data-theme="dark"] {
  --bg:        #0e1711;
  --bg-grain:  rgba(142, 194, 160, .05);
  --surface:   #1a2b20;
  --surface-2: #223626;
  --ink:       #ece4cf;
  --ink-soft:  #bdc9bd;
  --ink-mute:  #a0b1a3;   /* 0.9: koyu yüzey-2 üstünde 4.5:1 için açıldı */
  --line:      #334a3a;
  --line-2:    #46654f;
  --cream:     #ece4cf;
  --accent:    var(--green-400);
  --accent-ink:#0f2a1c;
  --link:      #9ccdae;
  /* Koyu temada genel arayüz zaten baştan aşağı yeşil (bkz. --bg, --surface,
     --accent) - eski --ok-bg (#26603f) bu yeşilin içinde neredeyse
     kayboluyordu ("doğru cevap" hissi vermiyordu). Daha canlı/doygun bir
     yeşile çekildi, ayrıca .opt.is-right'a eklenen sert (retro) gölge de
     bu tonu çevresinden daha net ayırıyor. */
  --ok-bg:     #1c8f57;
  --ok-edge:   #85e6ad;
  --ok-key:    #06170d;
  --no-bg:     #85462b;
  --no-edge:   #e5a284;
  --no-key:    #2b1408;

  --past:      #e08a63;
  --past-bg:   #33231c;
  --present:   #6fbb8d;
  --present-bg:#17301f;
  --future:    #74b6c4;
  --future-bg: #152b2f;
  --tl-mini-past:   #795940;
  --tl-mini-future: #456e6f;

  --mustard:   #e0b25c;
  --mustard-ink:#e0b25c;
  --mustard-bg:#3a2c10;
  --shadow-color: #0a1410;
  --shadow-hard: 3px 3px 0 var(--shadow-color);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: 16px; }
html[data-font="small"] { font-size: 14.5px; }
html[data-font="large"] { font-size: 18.5px; }
/* Küçük pencerelerden biri (.modal) açıkken arkadaki sayfa kaymasın diye
   (bkz. js/core/utils.js openModal/closeModal). body'yi position:fixed
   yapmak, iOS Safari'de salt overflow:hidden'ın engelleyemediği arka plan
   kaydırma/zıplama sorununu da önler; kapanınca kaldığı yere geri dönülür. */
html.modal-open { overflow: hidden; }
html.modal-open body { position: fixed; left: 0; right: 0; overflow: hidden; }
html[data-motion="less"] *,
html[data-motion="less"] *::before,
html[data-motion="less"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(0deg, var(--bg-grain) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, var(--bg-grain) 0 1px, transparent 1px 4px);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .4s ease;
}

/* Her sekme aynı koyulukta ama hafifçe farklı bir tonda: Harita
   nötr/varsayılan kalır, diğerleri zaten paletle var olan renklere
   çok düşük oranda karışır. Koyu temada daha da düşük oranda,
   o temaya özel tonlarla (kirlenmeyi önlemek için). */
html[data-section="temeller"] body { background-color: color-mix(in srgb, var(--bg) 92%, var(--terra) 8%); }
html[data-section="alistirma"] body { background-color: color-mix(in srgb, var(--bg) 92%, var(--mustard) 8%); }
html[data-section="sozluk"] body { background-color: color-mix(in srgb, var(--bg) 92%, var(--future) 8%); }
html[data-theme="dark"][data-section="temeller"] body { background-color: color-mix(in srgb, var(--bg) 96%, var(--past) 4%); }
html[data-theme="dark"][data-section="alistirma"] body { background-color: color-mix(in srgb, var(--bg) 96%, var(--mustard) 4%); }
html[data-theme="dark"][data-section="sozluk"] body { background-color: color-mix(in srgb, var(--bg) 96%, var(--future) 4%); }

/* Yukarıdaki gövde tonu tek başına neredeyse fark edilmiyordu; Sözlük ve
   Alıştırma'da aktif sekmeye, üstteki küçük başlık etiketine (eyebrow) ve
   kart/satır çerçevelerine de aynı vurgu rengi hafifçe sızıyor ki kullanıcı
   iki sekmenin de kendine özgü bir kimliği olduğunu net hissetsin - özellikle
   koyu temada her yerin aynı yeşil olması karışıklık yaratıyordu. */
html[data-section="sozluk"] .eyebrow { color: var(--future); }
html[data-section="sozluk"] .tab.is-active { color: var(--future); border-top-color: var(--future); background: var(--future-bg); }
/* layout.css'teki "html[data-theme=dark] .tab.is-active" kuralı bu
   dosyadan sonra yüklenir ve özgüllüğü eşittir; koyu temada o kazanmasın
   diye tema+bölüm birlikte hedeflenip özgüllük kasıtlı artırılıyor. */
html[data-theme="dark"][data-section="sozluk"] .tab.is-active { color: var(--future); background: var(--future-bg); }
html[data-section="sozluk"] .card:not(.minitest-card),
html[data-section="sozluk"] .wrow,
html[data-section="sozluk"] .input { border-color: color-mix(in srgb, var(--line) 55%, var(--future) 45%); }
html[data-section="sozluk"] .hub-card__ico { background: var(--future-bg); color: var(--future); border-color: color-mix(in srgb, var(--line-2) 45%, var(--future) 35%); }
/* components.css'teki genel "html[data-theme=dark] .hub-card__ico" kuralı
   bu dosyadan sonra yüklendiği ve aynı özgüllükte olduğu için, koyu temada
   kazanan o olurdu - burada tema+bölüm birlikte hedeflenerek özgüllük
   kasıtlı olarak artırılıyor ki koyu temada da mavi ikon rengi kazansın. */
html[data-theme="dark"][data-section="sozluk"] .hub-card__ico { background: var(--future-bg); color: var(--future); border-color: var(--line-2); }

html[data-section="alistirma"] .eyebrow { color: var(--mustard-ink); }
html[data-theme="dark"][data-section="alistirma"] .eyebrow { color: var(--mustard); }
html[data-section="alistirma"] .tab.is-active { color: var(--mustard-ink); border-top-color: var(--mustard); background: var(--mustard-bg); }
html[data-theme="dark"][data-section="alistirma"] .tab.is-active { color: var(--mustard); background: var(--mustard-bg); }
html[data-section="alistirma"] .card:not(.minitest-card),
html[data-section="alistirma"] .input { border-color: color-mix(in srgb, var(--line) 55%, var(--mustard) 45%); }

/* Temeller (kiremit/turuncu - zaten gövde tonunda --terra/--past kullanılıyordu,
   burada aynı renk aktif sekmeye, etikete ve kart çerçevelerine de taşınıyor)
   ve Harita (yeşil - uygulamanın zaten varsayılan/ana rengi, o yüzden aktif
   sekme burada değişmiyor, sadece etiket ve kart çerçevesine hafif bir yeşil
   ekleniyor ki o da diğer üçü gibi kendine ait bir iz taşısın). Harita'nın
   kendi geçmiş/şimdi/gelecek renkli zaman kartları (.tcard) ayrı bir sınıf
   kullandığı için burada .card kuralından etkilenmiyor. */
html[data-section="temeller"] .eyebrow { color: var(--terra-d); }
html[data-theme="dark"][data-section="temeller"] .eyebrow { color: var(--past); }
html[data-section="temeller"] .tab.is-active { color: var(--terra-d); border-top-color: var(--terra); background: var(--past-bg); }
html[data-theme="dark"][data-section="temeller"] .tab.is-active { color: var(--past); background: var(--past-bg); }
html[data-section="temeller"] .card:not(.minitest-card),
html[data-section="temeller"] .input { border-color: color-mix(in srgb, var(--line) 55%, var(--terra) 45%); }
/* Temeller'deki "ipucu" kutularının çoğu (Altın kural, Kolay yol vb.)
   .callout--tip sınıfını kullanıyor, ama o sınıf Alıştırma/Oyun Modu'nda
   "doğru cevap" bildirimi olarak da kullanıldığı için (bkz. quiz__fb)
   rengini oradan genel olarak değiştiremeyiz. Sadece Temeller'de, ve
   sadece burada, yeşil yerine zaten "Altın kural" adıyla da örtüşen
   hardal rengine çekiliyor - .callout'un zaten varsayılan (kindsiz)
   rengiyle aynı, yani burada gerçekte "özel" bir renk değil, sadece
   yeşil istisnası kaldırılıyor. */
html[data-section="temeller"] .callout--tip {
  border-left-color: var(--mustard);
  background: color-mix(in srgb, var(--mustard) 14%, var(--surface));
}

html[data-section="harita"] .eyebrow { color: var(--green-700); }
html[data-theme="dark"][data-section="harita"] .eyebrow { color: var(--green-300); }
html[data-section="harita"] .card:not(.minitest-card),
html[data-section="harita"] .input { border-color: color-mix(in srgb, var(--line) 60%, var(--green-600) 40%); }

/* Oyun Modu, Eğitim Modu'nun kağıt/defter kimliğinden tamamen ayrışan,
   açık/koyu tema tercihinden bağımsız (Giriş ekranı gibi) kendi koyu
   lacivert-mor "gece haritası" paletini kullanır: köşede yumuşak bir
   mor parıltı, lacivertten mora geçen bir geçiş ve üstünde yıldız gibi
   duran hafif bir nokta deseni. Bilerek yeşilden uzak duruyor ki Eğitim
   Modu'nun ana rengiyle karışmasın. */
html[data-section="oyun"] body {
  background-color: #14162b;
  background-image:
    radial-gradient(58% 46% at 84% 4%, rgba(106, 90, 212, .28) 0%, transparent 70%),
    linear-gradient(160deg, #14162b 0%, #1b1c3a 55%, #241f42 100%),
    radial-gradient(circle at center, rgba(255, 255, 255, .055) 0 2.1px, transparent 2.1px),
    radial-gradient(circle at center, rgba(255, 255, 255, .055) 0 2.1px, transparent 2.1px);
  background-size: auto, auto, 34px 34px, 34px 34px;
  background-position: 0 0, 0 0, 0 0, 17px 17px;
  background-attachment: fixed;
}

/* İstatistikler sayfası da (giriş ekranı ve Oyun Modu gibi) açık/koyu
   tema tercihinden bağımsız hep koyu: bu kez lacivert-mordan değil,
   lacivert-turkuaza doğru bir geçiş, köşelerde sıcak bir altın ve
   soğuk bir turkuaz parıltı ile - bir "kontrol paneli" hissi versin
   diye Oyun Modu'nun mor "gece haritası"ndan bilerek ayrışıyor. */
html[data-section="istatistikler"] body {
  background-color: #0a1420;
  background-image:
    radial-gradient(52% 42% at 6% -4%, rgba(232, 181, 89, .16) 0%, transparent 70%),
    radial-gradient(62% 52% at 102% 104%, rgba(111, 208, 217, .22) 0%, transparent 72%),
    linear-gradient(165deg, #0a1420 0%, #0f2233 55%, #12283a 100%),
    radial-gradient(circle at center, rgba(255, 255, 255, .05) 0 2.1px, transparent 2.1px),
    radial-gradient(circle at center, rgba(255, 255, 255, .05) 0 2.1px, transparent 2.1px);
  background-size: auto, auto, auto, 34px 34px, 34px 34px;
  background-position: 0 0, 0 0, 0 0, 0 0, 17px 17px;
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 .4em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.55rem, 4.6vw, 2.3rem); }
h2 { font-size: clamp(1.25rem, 3.6vw, 1.7rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 .9em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, svg { max-width: 100%; }
[hidden] { display: none !important; }

button { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--green-700); color: var(--cream);
  padding: 10px 16px; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

.muted { color: var(--ink-mute); }
.soft  { color: var(--ink-soft); }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 .35em;
}

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