/* ==========================================================================
   TEMEL — Renkler (koyu / açık tema), yazı tipleri, sıfırlama, arka plan
   --------------------------------------------------------------------------
   Tasarım: bulanık, yumuşak renkli bir zeminin üstünde buzlu cam paneller.
   Tema <html data-tema="koyu|acik"> ile seçilir (js/core/tema.js, js/ui/menu.js).
   Renkleri değiştirmek için yalnızca aşağıdaki iki tema bloğunu düzenle.
   ========================================================================== */
:root {
  /* yazı tipleri */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  /* cam bulanıklığı */
  --bulanik: blur(26px) saturate(150%);
}

/* ---- Koyu tema: yumuşak, mat orta-koyu gri zemin; çok hafif sıcak (vizon) ve soğuk (arduvaz) lekeler.
   Vurgu şampanya altını; açık temadaki bronzla aynı renk ailesi. Saf beyaz yerine kırık beyaz yazı (göz yormaz). ---- */
:root, :root[data-tema="koyu"] {
  color-scheme: dark;
  --zemin: #1e1f22;
  --leke-1: rgba(140, 126, 106, .12);
  --leke-2: rgba(112, 118, 130, .12);
  --leke-3: rgba(98, 104, 116, .14);
  --leke-4: rgba(128, 114, 96, .09);
  /* cam yüzeyler (yarı saydam, hafif lavanta) */
  --cam: rgba(255, 250, 242, .04);
  --cam-2: rgba(255, 250, 242, .066);
  --cam-3: rgba(255, 250, 242, .10);
  --cam-koyu: rgba(0, 0, 0, .20);
  /* öne çıkan kart (felsefe tanımı): zeminden bir kat açık, hafif lavanta parıltılı */
  --vitrin: linear-gradient(165deg, rgba(255, 248, 236, .075), rgba(255, 248, 236, .03) 62%);
  --cam-kenar: rgba(255, 248, 236, .10);
  --cam-kenar-2: rgba(255, 248, 236, .18);
  --cam-isik: rgba(255, 255, 255, .06);
  --golge: 0 22px 54px rgba(0, 0, 0, .36);
  /* yazı */
  --fg: #e9e5de;
  --fg-2: #ccc6bc;
  --muted: #aea89e;
  --faint: #938d84;
  /* tek vurgu rengi (ikonlar, seçili öğeler, hafif neon) */
  --ak: #cdb991;
  --ak-zit: #1f1d19;
  --neon: 0 0 8px rgba(205, 185, 145, .22), 0 0 16px rgba(205, 185, 145, .08);
  /* durum renkleri (yumuşak) */
  --uyari: #d8b46f;
  --hata: #d99b90;
  /* katı yüzey (açılır pencere) */
  --kati: #2a2b2f;
}

/* ---- Açık tema: mat taş ve kum tonları, düşük parlaklık; vurgu bronz (koyu temadaki şampanyanın koyusu) ---- */
:root[data-tema="acik"] {
  color-scheme: light;
  --zemin: #d8d1c6;
  --leke-1: rgba(232, 225, 214, .80);
  --leke-2: rgba(190, 172, 148, .42);
  --leke-3: rgba(164, 170, 162, .38);
  --leke-4: rgba(204, 188, 166, .48);
  --cam: rgba(248, 244, 237, .26);
  --cam-2: rgba(248, 244, 237, .38);
  --cam-3: rgba(248, 244, 237, .52);
  --cam-koyu: rgba(248, 244, 237, .32);
  --vitrin: rgba(248, 244, 237, .34);
  --cam-kenar: rgba(252, 249, 243, .46);
  --cam-kenar-2: rgba(104, 84, 60, .20);
  --cam-isik: rgba(255, 255, 255, .36);
  --golge: 0 22px 54px rgba(66, 52, 36, .13);
  --fg: #2a2520;
  --fg-2: #463e35;
  --muted: #655a50;
  --faint: #897e72;
  --ak: #74572f;
  --ak-zit: #faf7f1;
  --neon: 0 0 8px rgba(116, 87, 47, .18), 0 0 16px rgba(116, 87, 47, .07);
  --uyari: #94661b;
  --hata: #a3453c;
  --kati: #efeae2;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* Hiçbir sayfa bütün olarak kaymaz; yalnızca sayfaların içindeki kartlar kayar */
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--sans);
  background: var(--zemin);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s, color .4s;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
.ikon { display: block; flex-shrink: 0; }
::selection { background: color-mix(in srgb, var(--ak) 35%, transparent); }

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

/* ---- Arka plan: büyük, yumuşak renk lekeleri (bulanık oda havası) ---- */
.zemin {
  position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 46% at 14% 18%, var(--leke-1), transparent 70%),
    radial-gradient(38% 42% at 86% 14%, var(--leke-2), transparent 70%),
    radial-gradient(46% 50% at 80% 88%, var(--leke-3), transparent 72%),
    radial-gradient(40% 44% at 18% 90%, var(--leke-4), transparent 72%),
    var(--zemin);
  transition: background .4s;
}

/* ---- İnce kaydırma çubukları ---- */
* { scrollbar-width: thin; scrollbar-color: var(--cam-kenar-2) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- İki dilli yer tutma (AE.iki): görünen metin ile öbür dildeki metin üst üste;
   öbürü görünmez ama yer kaplar, böylece kutular TR ↔ EN geçişinde aynı boyda kalır. ---- */
.iki { display: inline-grid; max-width: 100%; }
div.iki { display: grid; }
.iki > * { grid-area: 1 / 1; min-width: 0; text-align: inherit; }
.iki-golge { visibility: hidden; pointer-events: none; user-select: none; }