/* =====================================================================
   TASARIM DILI 2 — yapi paketten, renk bizden (21 Eki 2026)
   Kaynak: docs/tasarim-paketi/ (TASARIM_DILI.md · kit/theme.css).
   Renk eslemesi kullanici onayli (scratchpad renk-esleme.html):
     zemin kum · panel kagit · ana eylem LACIVERT hap · bakir VURGU.
   Koyu temada ana eylem ACIK murekkep (lacivert zeminde lacivert dugme
   secilemez — paket kurali).

   Bu dosya UYGULAMA bicemlerinin EN SONUNDA yuklenir (tanitim/marka
   oncesi): token degerlerini ve paylasilan bilesenleri (kart, dugme,
   baslik) yeni dile cevirir. Ekrana ozel ince ayar ekranin kendi
   dosyasinda yapilir, buraya ekran kurali YAZILMAZ.
   ===================================================================== */

/* ---- YAZI: govde Inter, baslik Satoshi (yerel, CDN yok) ---- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900; font-style: normal; font-display: swap;
}

/* ---- OLCU: paketin degerleri (tema bagimsiz) ---- */
:root {
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-baslik: 'Satoshi', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-okuma: var(--font-ui);

  /* punto: govde 14,5 · kucuk dugme 13,5 · aciklama 13 · rozet 12 */
  --fs-sm: 13px;
  --fs-base: 14.5px;
  --fs-kontrol: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;      /* kart basligi */
  --fs-bolum: 19px;   /* bolum basligi */
  --fs-xl: 26px;
  --fs-2xl: 28px;     /* sayfa basligi */

  /* kose: panel 20 · ic yuzey 14 · girdi 12 · pencere 28 · dugme hap */
  --r-sm: 9px;  --r-md: 12px;  --r-ic: 14px;  --r-lg: 20px;  --r-xl: 28px;

  /* kontrol: kucuk 32 · orta 40 · buyuk 48 (masaustu) */
  --ctrl-h-sm: 32px;
  --ctrl-h: 40px;
  --ctrl-h-lg: 48px;

  /* iskelet */
  --sidebar-w: 248px;
  --rail-w: 72px;
  --icerik-w: 1240px;
  --card-pad: 18px;

  /* harf araligi: baslik sikisik, kas etiketi YOK */
  --ls-kas: 0;
  --ls-baslik: -.025em;
  --ls-h2: -.02em;
  --ls-govde: -.009em;

  /* hareket: yay (paket karari — hafif asan, esneyerek duran) */
  --yay: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
}

/* ---- RENK: acik ---- */
:root {
  --page:       #F3EEE6;
  --page-glass: rgba(243, 238, 230, 0.90);
  --card:       #FFFDF8;
  --card2:      #F0E9DE;   /* ic yuzey, cip, girdi */
  --card3:      #E6DDCF;   /* basili / iz */
  --line:       #E9E1D4;
  --line-zayif: #EFE8DC;
  --line-strong:#DCD2C2;
  --text:       #17222E;
  --text-2:     #2C3744;
  --muted:      #4E5560;
  --faint:      #5E6670;   /* metin olarak da kullaniliyor: kum 5,04 */

  /* okunus ic yuzeyde (#F0E9DE) 4,40 kaliyordu: bir ton koyu — 5,08 / basili 4,55 */
  --okunus:     #954F2A;
  --birincil:     #0F1C2B;  /* ana eylem dolgusu */
  --birincil-ust: #FFF7EF;  /* ustundeki yazi */
  --birincil-hover: #1B3048;

  --shadow-card: none;
  --shadow-1: none;
  --shadow-pop: 0 18px 48px -12px rgba(15, 28, 43, 0.20);
  --kenar-isik: none;
}

/* ---- RENK: koyu (iki kapi: acik secim + sistem) ---- */
:root[data-theme="dark"] {
  /* NEREDEYSE SIYAH (kullanici karari, 21 Eki 2026): lacivertin tonunu
     tasiyan, doygunlugu dusurulmus notr. Eskisi (#0B1622 / #16293C)
     ekrani maviye boyuyor, bakiri turuncuya cekiyor ve katmanlar
     birbirinden secilmiyordu. Lacivert artik zemin degil. */
  --page:       #0D1116;
  --page-glass: rgba(13, 17, 22, 0.88);
  --card:       #171C23;
  --card2:      #212832;
  --card3:      #2B333E;
  --line:       #252C36;
  --line-zayif: #1D232B;
  --line-strong:#3A4452;
  --line-kart:  #252C36;
  --text:       #ECEFF3;
  --text-2:     #D2D8DF;
  --muted:      #A3ACB7;   /* ic yuzeyde 6,7 */
  --faint:      #8F99A5;   /* ic yuzeyde 5,35 */
  --btn-line:   #5E6A79;
  --chip-line:  #5E6A79;
  --cip-yuzey:  #212832;
  --ink-ters:   #0D1116;
  --birincil:     #ECEFF3;
  --birincil-ust: #0D1116;
  --birincil-hover: #FFFFFF;
  /* eski lacivert vitrin tokenlari: kalan her kullanici yeni notre duser */
  --yan-bg: #0D1116; --yan-bg2: #171C23; --yan-aktif: #212832;
  --yan-metin: #ECEFF3; --yan-kanal: rgba(236, 239, 243, 0.12);
  /* kilitli rozet plakasi: lacivert degil, notr */
  --rz-kilit-bg: #151A21; --rz-kilit-line: #222933; --rz-kilit-ic-bg: #1E252E; --rz-kilit-ic-ink: #7D8794;
  --rz-kilit-ad: #A3ACB7; --rz-kilit-kademe: #8F99A5; --rz-kilit-not: #98A2AE; --rz-kilit-bar: #262E39;
  --shadow-pop: 0 18px 48px -12px rgba(0, 0, 0, 0.70);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    /* NEREDEYSE SIYAH (kullanici karari, 21 Eki 2026): lacivertin tonunu
       tasiyan, doygunlugu dusurulmus notr. Eskisi (#0B1622 / #16293C)
       ekrani maviye boyuyor, bakiri turuncuya cekiyor ve katmanlar
       birbirinden secilmiyordu. Lacivert artik zemin degil. */
    --page:       #0D1116;
    --page-glass: rgba(13, 17, 22, 0.88);
    --card:       #171C23;
    --card2:      #212832;
    --card3:      #2B333E;
    --line:       #252C36;
    --line-zayif: #1D232B;
    --line-strong:#3A4452;
    --line-kart:  #252C36;
    --text:       #ECEFF3;
    --text-2:     #D2D8DF;
    --muted:      #A3ACB7;   /* ic yuzeyde 6,7 */
    --faint:      #8F99A5;   /* ic yuzeyde 5,35 */
    --btn-line:   #5E6A79;
    --chip-line:  #5E6A79;
    --cip-yuzey:  #212832;
    --ink-ters:   #0D1116;
    --birincil:     #ECEFF3;
    --birincil-ust: #0D1116;
    --birincil-hover: #FFFFFF;
    /* eski lacivert vitrin tokenlari: kalan her kullanici yeni notre duser */
    --yan-bg: #0D1116; --yan-bg2: #171C23; --yan-aktif: #212832;
    --yan-metin: #ECEFF3; --yan-kanal: rgba(236, 239, 243, 0.12);
    /* kilitli rozet plakasi: lacivert degil, notr */
    --rz-kilit-bg: #151A21; --rz-kilit-line: #222933; --rz-kilit-ic-bg: #1E252E; --rz-kilit-ic-ink: #7D8794;
    --rz-kilit-ad: #A3ACB7; --rz-kilit-kademe: #8F99A5; --rz-kilit-not: #98A2AE; --rz-kilit-bar: #262E39;
    --shadow-pop: 0 18px 48px -12px rgba(0, 0, 0, 0.70);
  }
}

/* ---- TEMEL ---- */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: var(--ls-govde);
  font-feature-settings: 'calt', 'liga', 'cv11';
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--font-baslik); font-weight: 500; }
h1 { letter-spacing: var(--ls-baslik); }
h2, h3 { letter-spacing: var(--ls-h2); }
::selection { background: var(--accent-soft); color: var(--text); }

/* ---- PANEL: kenarsiz, golgesiz; ayrimi ton farki tasir ---- */
.card, .card.hero {
  border: 0;
  box-shadow: none;
  border-radius: var(--r-lg);
}
.card h2 {
  font-family: var(--font-baslik);
  font-size: var(--fs-lg); font-weight: 500;
  letter-spacing: var(--ls-h2);
}
.modal-card, .dd-panel { border: 0; box-shadow: var(--shadow-pop); }
.modal-card { border-radius: var(--r-xl); }

/* ---- DUGME: hap; ana eylem lacivert, ikincil ic yuzey dolgusu ---- */
.btn {
  border-radius: var(--r-full);
  border-color: transparent;
  background: var(--card2);
  color: var(--text);
  font-weight: 500;
  padding: 0 18px;
  transition: background var(--mo-hizli) var(--mo-cikis),
              color var(--mo-hizli) var(--mo-cikis),
              transform .25s var(--yay);
}
.btn:hover:not(:disabled) { border-color: transparent; background: var(--card3); color: var(--text); }
.btn:active:not(:disabled) { transform: scale(.97); background: var(--card3); }
.btn-sm { border-radius: var(--r-full); padding: 0 14px; font-size: 13.5px; }
.btn-primary, .btn-next {
  background: var(--birincil);
  border-color: var(--birincil);
  color: var(--birincil-ust);
  font-weight: 500;
}
.btn-primary:hover:not(:disabled), .btn-next:hover:not(:disabled) {
  background: var(--birincil-hover); border-color: var(--birincil-hover); color: var(--birincil-ust);
}
.btn-primary:active:not(:disabled), .btn-next:active:not(:disabled) {
  background: var(--birincil); border-color: var(--birincil);
}
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--card2); }
.btn-danger { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.btn-danger:hover:not(:disabled) { background: var(--bad-soft); border-color: transparent; color: var(--bad-strong); }

/* ---- GIRDI: ic yuzey dolgusu, kenarsiz, 12 kose ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled) { transform: none; }
}

/* =====================================================================
   KABUK — masaustu (>=941px). Paket §5: kenar menu SAYFA ZEMININDE
   (ayri renk, kenar cizgisi yok), secili sekme ana renk dolgulu hap,
   grup basligi sakin (buyuk harf yok). Iki temada ayni iskelet.
   `:root .layout > .sidebar` (0,3,0) kenar.css'in acik tema blogunu
   esit ozgullukte, sonra geldigi icin ezer.
   ===================================================================== */
@media (min-width: 941px) {
  :root .layout > .sidebar {
    --yan-bg: var(--page); --yan-bg2: var(--card2); --yan-aktif: var(--birincil);
    --yan-metin: var(--text); --yan-metin-orta: var(--text-2); --yan-metin-zayif: var(--muted);
    --yan-vurgu: var(--accent); --yan-vurgu-2: var(--accent); --yan-cizgi: var(--line);
    --yan-ayrac: transparent; --yan-kanal: var(--line);
    background: var(--page);
    border-right: 0;
    padding: 0 12px 12px;
  }
  :root .layout > .sidebar > .brand { border-bottom: 0; }
  :root .layout > .sidebar .brand-name { font-family: var(--font-baslik); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
  :root .layout > .sidebar .tab-grup {
    text-transform: none; letter-spacing: 0;
    font-size: 12.5px; font-weight: 600; color: var(--muted);
    margin: 14px 0 4px; padding: 0 10px;
  }
  :root .layout > .sidebar .tab {
    height: 34px; padding: 0 10px; border-radius: 10px;
    color: var(--text-2); font-weight: 500; font-size: 14px;
  }
  :root .layout > .sidebar .tab .ic { color: var(--faint); width: 18px; height: 18px; }
  :root .layout > .sidebar .tab:hover { background: var(--card); color: var(--text); }
  :root .layout > .sidebar .tab.active {
    background: var(--birincil); color: var(--birincil-ust);
    box-shadow: none; font-weight: 500;
  }
  :root .layout > .sidebar .tab.active .ic { color: var(--birincil-ust); }
  :root .layout > .sidebar .tab .badge {
    border-radius: var(--r-full); min-width: 20px; height: 20px; padding: 0 7px;
    background: var(--card2); color: var(--text); font-size: 11.5px;
  }
  :root .layout > .sidebar .tab.active .badge { background: rgba(255, 247, 239, 0.18); color: var(--birincil-ust); }
  :root .layout > .sidebar .tabs { gap: 2px; }
  :root .layout > .sidebar .sidebar-foot { border-top: 0; }
  :root .layout > .sidebar .who { background: transparent; border: 0; padding: 4px; }
  :root .layout > .sidebar .who-avatar { background: var(--birincil); color: var(--birincil-ust); width: 32px; height: 32px; font-size: 12.5px; }
  :root .layout > .sidebar .theme-btn { border: 0; background: var(--card2); color: var(--text-2); border-radius: var(--r-full); }
  :root .layout > .sidebar .theme-btn:hover { background: var(--card3); color: var(--text); }

  /* ray (daraltilmis, 72px): grup basligi ince ayrac, rozet kosede */
  :root .layout.rail > .sidebar { padding: 0 8px 12px; }
  :root .layout.rail > .sidebar .tab-grup { font-size: 0; height: 1px; margin: 10px 14px; padding: 0; background: var(--line); }
  :root .layout.rail > .sidebar .tab { width: 44px; height: 40px; padding: 0; margin: 0 auto; justify-content: center; }
  :root .layout.rail > .sidebar .tab .badge {
    position: absolute; top: 0; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 11px; background: var(--accent); color: var(--ink-ters);
  }

  /* ust serit: tek satir, cizgisiz, zemin rengi */
  :root .layout .topbar {
    border-bottom: 0;
    background: var(--page-glass);
  }
}

/* =====================================================================
   ORTAK KALIPLAR — her ekranin kendi adiyla yazdigi ayni bilesenler.
   Ekran dosyalari bunlari ayri siniflarla tanimliyor (tk-, mb-, st-,
   auth-); yeni dil tek yerden gelsin diye burada TOPLU cevrilir.
   ===================================================================== */

/* Birincil eylem: lacivert hap (koyu temada acik), golge/isilti YOK */
:root :is(.tk-birincil, .mb-birincil, .st-birincil, .auth-split .auth-submit) {
  background: var(--birincil); color: var(--birincil-ust);
  border: 0; border-radius: var(--r-full); box-shadow: none; font-weight: 500;
}
:root :is(.tk-birincil, .mb-birincil, .st-birincil, .auth-split .auth-submit):hover:not(:disabled) {
  background: var(--birincil-hover); color: var(--birincil-ust);
}
:root :is(.tk-birincil, .mb-birincil, .st-birincil) .tk-cip,
:root .tk-birincil .tk-cip { background: rgba(127, 127, 127, 0.22); color: inherit; }

/* Secili durum (sekme, cip, segment): ana renk dolgulu */
:root :is(.schip.active, .tc-et.active) { background: var(--birincil); color: var(--birincil-ust); border-color: var(--birincil); }

/* VITRINLER: lacivert yuzey -> duz panel, iki temada da (paket §6) */
:root :is(.hero, .tk-vitrin, .og-vitrin, .sn-lvl) {
  --yan-bg: var(--card); --yan-bg2: var(--card); --yan-aktif: var(--card2);
  --yan-metin: var(--text); --yan-metin-orta: var(--muted); --yan-metin-zayif: var(--muted);
  --yan-vurgu: var(--accent); --yan-vurgu-2: var(--accent); --yan-cizgi: var(--line);
  --yan-ayrac: var(--line); --yan-ok: var(--ok); --yan-kanal: var(--card2);
  --yan-ink-govde: var(--text-2); --yan-ink-uc: var(--muted); --yan-ink-kas: var(--muted); --yan-ink-silik: var(--muted);
  background: var(--card); color: var(--text); border: 0; box-shadow: none;
  border-radius: var(--r-lg);
}
:root .tk-vitrin::before { display: none; }
:root .tk-vitrin .tk-kas { color: var(--muted); font-size: 13px; font-weight: 500; }
:root .tk-sayi > b { font-family: var(--font-baslik); font-weight: 500; }
:root .tk-dilimler > i { height: 6px; border-radius: var(--r-full); }
/* vitrin ikincil dugmeleri: ic yuzey hap */
:root .tk-vitrin :is(.tk-ikincil, .tk-kutucuk, .tk-i) {
  background: var(--card2); border: 0; color: var(--text); border-radius: var(--r-full);
}
:root .tk-vitrin :is(.tk-ikincil, .tk-kutucuk, .tk-i):hover { background: var(--card3); border: 0; }
:root .tk-vitrin .tk-kc-tx b svg, :root .tk-vitrin .tk-ikincil svg { color: var(--accent); }
@media (min-width: 941px) {
  :root #view > .tk-vitrin > :is(.tk-birincil, .tk-ikincil),
  :root #view > .tk-vitrin .tk-kutucuk,
  :root #view > .tk-vitrin > .tk-i { border-radius: var(--r-full); border: 0; }
}
/* kenar.css acik tema: vitrine kenar + golge veriyordu */
:root[data-theme] :is(.hero, .tk-vitrin, .og-vitrin) { border: 0; box-shadow: none; }

/* KART BASLIGI IKONU: satir ici bakir ikon kalir, baslik Satoshi */
.card h2 > .ic { color: var(--accent); }
.card h2 .u-count { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }

/* KUCUK IKON CIPLERI: yuvarlak (paket: canli renk yalniz kucuk yuvarlak ikonda) */
:root :is(.bar-ic, .bant-ic) { border-radius: 50%; }

/* LEJANT: kenarsiz satir */
:root .legend { border: 0; }

/* =====================================================================
   GECICI DURUMLAR — sonradan beliren her sey ayni dilde (kullanici:
   "sonradan cikan cumlelere, uyari ekranlarina dikkat et", 21 Eki 2026).
   Sonuc bandi, uyari/bilgi kutusu, AI karari, toast, pencere, bos durum,
   durum hapi: KENARSIZ ic yuzey, 14 kose, sakin punto (500, kalin degil).
   Renk durumu anlatir; yuzey dili hep ayni.
   ===================================================================== */

/* Sonuc bandi (dogru / yanlis) — kare tam genislik bant DEGIL, yuvarlak serit */
:root .fb-line {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--r-ic);
  font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1.35;
}
:root .fb-line.fb-ok  { background: var(--ok-soft);  color: var(--ok-strong); }
:root .fb-line.fb-bad { background: var(--bad-soft); color: var(--bad); }
:root[data-theme="dark"] .fb-line.fb-ok { color: var(--ok); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .fb-line.fb-ok { color: var(--ok); } }
/* dolma hareketi kalir ama seridin koselerine uyar; zemin zaten yumusak oldugu icin seffaf katman */
:root .fb-ok::after { border-radius: inherit; background: var(--ok-soft); opacity: .6; }
:root .fb-line.fb-ok::after { opacity: 0; }

:root .fb-solution, :root .fb-duzeltildi, :root .fb-ai {
  border: 0; border-radius: var(--r-ic); padding: 12px 16px;
}
:root .fb-solution { background: var(--card2); font-size: 15px; }
:root .fb-label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
:root .fb-duzeltildi { background: var(--card2); font-size: 13.5px; }
:root .fb-ai { font-size: 14px; }
:root .fb-ai b { font-weight: 600; }

/* Uyari / tamam / bilgi kutusu */
:root .notice {
  border: 0; border-radius: var(--r-ic); padding: 14px 16px;
  font-size: 14px; line-height: 1.55; box-shadow: none;
}
:root .notice-info { background: var(--card2); color: var(--text-2); }
:root .notice-info > .ic { color: var(--accent); }
:root .notice-eylem .btn { border-radius: var(--r-full); }

/* Durum hapi (dugme yaninda duran bilgi) */
:root .durum-hap { border: 0; border-radius: var(--r-full); font-weight: 500; font-size: 13.5px; }

/* Toast: yuzen tek oge — golge burada serbest (paket: golge yalniz yuzende) */
:root .toast {
  background: var(--birincil); color: var(--birincil-ust);
  border: 0; border-radius: var(--r-ic); padding: 12px 18px;
  font-family: var(--font-ui); font-weight: 500; font-size: 14px;
  box-shadow: var(--shadow-pop);
}

/* Pencere: 28 kose, kenarsiz, baslik Satoshi; dugmeler hap */
:root .modal-card { border: 0; border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-pop); }
:root .modal-title { font-family: var(--font-baslik); font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
:root .modal-body { color: var(--text-2); font-size: 14.5px; }
:root .modal-quote { background: var(--card2); border-radius: var(--r-ic); padding: 12px 14px; font-size: 14px; }
:root .modal-actions .btn { border-radius: var(--r-full); }

/* Bos durum: yuvarlak ikon, Satoshi baslik */
:root .bos-durum .bd-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--card2); color: var(--accent); }
:root .bos-durum b { font-family: var(--font-baslik); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
:root .bos-durum span { font-size: 14px; }
:root .empty { font-size: 14px; color: var(--muted); }
/* uyari (amber) bilgi kutusundan ikonuyla ayrilir */
:root .notice:not(.notice-ok):not(.notice-info) > .ic { color: var(--warn); }
:root .notice:not(.notice-ok):not(.notice-info) { color: var(--warn-ink); }

/* =====================================================================
   HESAP KONTROLLERI — kenar menunun dibinde (TEK yer; kullanici: "iki
   yerde olmasin"). Avatar hesap menusunu acar (views.js hesapMenu).
   Telefonda kenar menu yok; orada ust cubuktaki avatar profil sayfasi.
   ===================================================================== */
@media (min-width: 941px) {
  :root .topbar .tb-durum { display: none; }
  :root .layout > .sidebar .who-avatar { cursor: pointer; transition: transform .25s var(--yay); }
  :root .layout > .sidebar .who-avatar:hover { box-shadow: 0 0 0 3px var(--accent-soft); }
  :root .layout > .sidebar .who-avatar:active { transform: scale(.94); }
  :root .layout > .sidebar .who-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

.hesap-menu {
  position: fixed; z-index: 80; width: 260px;
  padding: 6px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 2px;
  animation: hm-gel .32s var(--yay) both;
}
@keyframes hm-gel { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.hesap-menu .hm-kim { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.hesap-menu .hm-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--birincil); color: var(--birincil-ust); font-weight: 600; }
.hesap-menu .hm-ad { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hesap-menu .hm-ad b { font-weight: 600; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hesap-menu .hm-ad i { font-style: normal; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hesap-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); text-align: left;
  font: 500 14px/1 var(--font-ui); cursor: pointer;
}
.hesap-menu button:hover, .hesap-menu button:focus-visible { background: var(--card2); }
.hesap-menu button .ic { width: 17px; height: 17px; color: var(--faint); }
.hesap-menu button span { flex: 1; }
.hesap-menu button em { font-style: normal; font-size: 13px; color: var(--muted); }
.hesap-menu .hm-cikis { color: var(--bad); }
.hesap-menu .hm-cikis .ic { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .hesap-menu { animation: none; } }

/* KELIME KARTI — her ekranda ic yuzey (kenarsiz, 14 kose); sayfa zemininde
   duruyorsa (yuzeysiz kap) panel rengi. Ingilizce kelime Satoshi. */
:root .word-card { border: 0; border-radius: var(--r-ic); background: var(--card2); box-shadow: none; }
:root .word-card:hover { border: 0; background: var(--card3); }
:root .card.sessiz .word-card { background: var(--card); }
:root .card.sessiz .word-card:hover { background: var(--card2); }
:root .word-card .wc-en { font-family: var(--font-baslik); font-weight: 500; letter-spacing: -.01em; }

/* =====================================================================
   KONTROLLER — girdi, acilir liste, suzgec hapi, tablo (her ekranda ayni)
   Paket §7: girdi/secici IC YUZEY dolgulu, KENARSIZ, 12 kose; secili
   deger 500 (kalin degil); odakta bakir halka. Tablo basligi sakin
   (500, silik), satir ince cizgi.
   ===================================================================== */
:root :is(input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea):not(.yz-input) {
  background: var(--card2); border: 1px solid transparent; border-radius: var(--r-md);
}
:root :is(input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea):not(.yz-input):hover { border-color: transparent; background: var(--card3); }
:root :is(input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea):not(.yz-input):focus {
  background: var(--card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
:root input::placeholder, :root textarea::placeholder { color: var(--muted); }
:root .dd-btn {
  background: var(--card2); border: 1px solid transparent; border-radius: var(--r-md);
  box-shadow: none; font-weight: 500;
}
:root .dd-btn:hover { border-color: transparent; background: var(--card3); }
:root .dd-btn:focus-visible, :root .dd.open .dd-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card); }
:root .dd-panel { border-radius: var(--r-ic); padding: 6px; }

/* suzgec hapi (Kelimeler durum haplari ve benzerleri): dolgulu, secili = ana renk */
:root .kl-hap { border: 0; background: var(--card2); }
:root .kl-hap:hover { border: 0; background: var(--card3); }
:root .kl-hap.on { border: 0; box-shadow: none; background: var(--birincil); color: var(--birincil-ust); }
:root .kl-hap.on b { color: var(--birincil-ust); opacity: .8; }

/* tablo */
:root .tbl-wrap { border: 0; border-radius: var(--r-ic); }
:root table.words th {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
:root table.words td { border-bottom-color: var(--line); }
:root table.words td:first-child { font-weight: 500; }

/* ARAMA KUTUSU — ortak (Dilbilgisi, Defterim, listeler): simge icte,
   ic yuzey dolgulu, 44 yukseklik, tam genislik. */
.ara-kutu { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 0; }
.ara-kutu > .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
:root .ara-kutu > input { width: 100%; min-width: 0; height: 44px; padding-left: 42px; padding-right: 14px; font-size: 14.5px; }
.ara-kutu > input::-webkit-search-cancel-button { cursor: pointer; }

/* YAN LISTE (Dilbilgisi bolumleri, Ayarlar bolumleri, Yonetim sekmeleri):
   kenar menuyle ayni dil — secili oge ana renk dolgulu hap. */
:root .gr-nav { border: 0; box-shadow: none; padding: 8px; gap: 2px; background: var(--card); border-radius: var(--r-lg); }
:root .gr-nav-oge { min-height: 40px; border-radius: 12px; color: var(--text-2); font-weight: 500; font-size: 14px; }
:root .gr-nav-oge .ic { color: var(--faint); }
:root .gr-nav-oge:hover { background: var(--card2); color: var(--text); }
:root .gr-nav-oge.on { background: var(--birincil); color: var(--birincil-ust); box-shadow: none; }
:root .gr-nav-oge.on .ic, :root .gr-nav-oge.on b { color: var(--birincil-ust); }
:root .gr-nav-oge.on b { opacity: .75; }

/* SAYI KUTUSU (StatTile, paket §7) — her ekranda: notr panel, kenarsiz;
   kimlik rengi YALNIZ kucuk yuvarlak ikonda; sayi Satoshi 30. Kart
   icindeyse ic yuzey. */
:root .stat-box { background: var(--card); border: 0; border-radius: var(--r-lg); box-shadow: none; }
:root .stat-box:hover { border: 0; }
:root .card .stat-box { background: var(--card2); border-radius: var(--r-ic); }
:root .stat-box .si { border-radius: 50%; background: var(--tile-bg); color: var(--tile-ink); }
:root .stat-box .sv { font-family: var(--font-baslik); font-weight: 500; letter-spacing: -.025em; color: var(--text); font-variant-numeric: tabular-nums; }
:root .stat-box .sl { font-size: 13px; font-weight: 500; color: var(--muted); }

/* .btn OLMADAN .btn-sm tasiyan dugmeler (premium "Ucretsiz dene" vb.)
   tarayicinin outset kenariyla cikiyordu: kucuk hap dugme dili */
:root button.btn-sm:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-full);
  background: var(--card2); color: var(--text); font: 500 13.5px/1 var(--font-ui); cursor: pointer;
}
:root button.btn-sm:not(.btn):hover { background: var(--card3); }
/* secili sekmedeki Premium rozeti lacivert ustunde okunsun */
:root .layout > .sidebar .tab.active .tab-premium { background: rgba(255, 247, 239, 0.18); color: var(--birincil-ust); }
/* dugme etiketi <i> ile sarilan yerlerde (Temizle, Ipucu) egik yazi cikmasin */
:root .btn i, :root .btn-sm i { font-style: normal; }
/* GRUPLU FORM (telefon giris/kayit): satirdaki girdi grubun parcasi — kendi
   ic yuzeyi, kosesi ve odak halkasi YOK; grup kenarsiz ic yuzey */
@media (max-width: 940px) {
  :root .auth-split .auth-grup { border: 0; }
  :root .auth-split .auth-grup :is(input[type=text], input[type=email], input[type=password]),
  :root .auth-split .auth-grup :is(input[type=text], input[type=email], input[type=password]):hover,
  :root .auth-split .auth-grup :is(input[type=text], input[type=email], input[type=password]):focus {
    background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  }
  :root .auth-split .auth-grup:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
}

/* SONUC SATIRI ZEMINSIZ (kullanici karari, 21 Eki 2026): "background'a
   gerek yok, kendisini cok daha net gorecegiz". Dogru/yanlis/AI karari
   satirlari renkli zemin TASIMAZ; anlami yazinin rengi ve ✓/✗ isareti
   tasir. Dolma hareketi de bir zemindi — kalkti. */
:root .fb-line, :root .fb-line.fb-ok, :root .fb-line.fb-bad,
:root .ex-alt .fb-line, :root .ex-alt .fb-line.fb-ok, :root .ex-alt .fb-line.fb-bad {
  background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0;
  font-size: 16px; font-weight: 600;
}
:root .fb-line.fb-ok { color: var(--ok-strong); }
:root .fb-line.fb-bad { color: var(--bad); }
:root .fb-ok::after { display: none; }
:root .fb-ai, :root .fb-ai-ok, :root .fb-ai-bad { background: none; border: 0; padding-left: 0; padding-right: 0; }
:root .fb-ai-ok { color: var(--ok-strong); }
:root[data-theme="dark"] :is(.fb-line.fb-ok, .fb-ai-ok) { color: var(--ok); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.fb-line.fb-ok, .fb-ai-ok) { color: var(--ok); } }

/* KONTRAST (tasarim-tersine, 21 Eki 2026): bakir YAZI ic yuzey ya da bakir
   tint ustunde 4,5 altina dusuyordu — koyu bakir (--accent-strong 5,74). */
:root :is(.tab-premium, .sv-et, .rz-sira-et, .yst-kelime i) { color: var(--accent-strong); }
:root .yst-kelime b { color: #6E5130; }
:root[data-theme="dark"] :is(.tab-premium, .sv-et, .rz-sira-et, .yst-kelime i) { color: var(--accent); }
:root[data-theme="dark"] .yst-kelime b { color: color-mix(in srgb, var(--warn) 60%, var(--text)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.tab-premium, .sv-et, .rz-sira-et, .yst-kelime i) { color: var(--accent); }
  :root:not([data-theme="light"]) .yst-kelime b { color: color-mix(in srgb, var(--warn) 60%, var(--text)); }
}