/* Ortak: koyu tema, header ortalama, renksiz emoji, profil/tema butonları.
   3 sayfa da bu dosyayı <link> ile kullanır. */

/* --- Koyu tema (body.dark) — açık tema değişkenlerini geçersiz kılar --- */
body.dark{
  --bg:#0f172a; --card:#1e293b; --card2:#243449; --accent:#f5b544;
  --de:#fbbf24; --tr:#94a3b8; --ok:#22c55e; --bad:#ef4444; --border:#334155; --text:#e2e8f0; --qtr:#7dd3fc;
}
body.dark header{ background:#0b1220 !important; }
/* koyu temada açık-zemin için seçilmiş pastel arka planları koyulaştır */
body.dark .opt.sel,body.dark .gcell.answered{ background:#0c4a6e !important; }
body.dark .opt.correct{ background:#064e3b !important; }
body.dark .opt.wrong{ background:#4c1d1d !important; }
body.dark .ncell.learned{ background:#064e3b !important; color:#d1fae5 !important; }

/* --- Header ortalama, kompakt üst boşluk --- */
header{ text-align:center; padding-top:12px !important; }
header h1{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:30px !important; }
header h1 .flag{ font-size:34px; filter:none; opacity:1; } /* Alman bayrağı: büyük ve renkli */
@media(max-width:600px){ header h1{ font-size:24px !important; } }

/* Tüm sayfalarda header içi satırlar ortalı (nav, seçiciler, kontroller) */
header .nav,header .selectors,header .controls{ justify-content:center; }
/* Ana sayfa: nav + Dil/Eyalet aynı satırda ortalı */
.topline{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 18px; margin-top:10px; }
.topline .nav,.topline .selectors{ margin-top:0; }

/* --- Nav logoları renksiz (gri tonlama) — bayrak hariç --- */
.deco-emoji{ filter:grayscale(1); opacity:.85; }

/* --- Arama kutusu: üst satırda seçicilerle aynı boy, kompakt --- */
#search{ flex:none !important; width:140px !important; min-width:0 !important; max-width:140px !important;
  font-size:13px !important; padding:6px 10px !important; height:34px !important; }
#search:focus{ width:190px !important; max-width:190px !important; }
#catFilter{ font-size:13px !important; padding:6px 8px !important; max-width:160px; height:34px; }

/* --- Sağ üst köşe: [tema][profil] üstte, [dil] altta --- */
#ebTopRight{
  position:absolute; top:14px; right:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; z-index:50;
}
#ebTopRight,#ebTopRight *{ pointer-events:auto; }
#ebProfileBtn{ position:relative; z-index:51; }
#ebTopRight .eb-tr-row{ display:flex; gap:8px; align-items:center; }
#ebTopRight .eb-tr-lang{ display:flex; justify-content:flex-end; }
#ebTopRight .eb-tr-lang label{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tr); }
.eb-menu .lbl{ display:block; font-size:12px; color:var(--tr); margin:6px 0 3px; }
#ebTopRight button,#ebTopRight a#ebHomeBtn{
  background:var(--card); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:7px 12px; font-size:14px; cursor:pointer; line-height:1; display:inline-block;
}
#ebTopRight button:hover,#ebTopRight a#ebHomeBtn:hover{ border-color:var(--accent); }
.eb-menu{
  position:fixed; top:60px; right:16px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px; min-width:230px; max-width:92vw; z-index:120; text-align:left;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.eb-menu .row{ font-size:13px; color:var(--tr); margin:0 0 10px; }
.eb-menu input{ width:100%; padding:9px; margin-bottom:8px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border); color:var(--text); font-size:14px; }
.eb-menu .mbtn{ width:100%; padding:9px; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.eb-menu .prim{ background:var(--accent); color:#03263a; }
.eb-menu .ghost{ background:var(--card2); color:var(--text); border:1px solid var(--border); font-weight:500; }
.eb-menu .msg{ font-size:12px; min-height:15px; margin:2px 0 8px; }
@media(max-width:600px){ #ebTopRight{ position:static; justify-content:center; margin-top:10px; } .eb-menu{ right:8px; left:8px; } }