/* Tema: bütün tasarım jetonları ve bileşen sınıfları. Görsel kurallar: docs/tasarim/GORSEL_DIL.md
   Marka sürüm 2 (docs/tasarim/MARKA_2.md): beyaz üstüne siyah, kırmızı, sarı. Tek vurgu marka kırmızısı (#C8102E),
   sarı yalnız dolgu (üstünde siyah yazı), kahraman kart siyah zemin ve bayrak şeridi. Mavi yok.
   Artikel renkleri (der mavi, die kırmızı, das yeşil) öğretim rengidir, değişmez. Yanlış cevap (#B42318) marka
   kırmızısından ayrıdır ve her zaman ikon ve yazıyla gelir. Varsayılan açık; koyu yalnız kullanıcı seçerse. */

:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --zemin: #FFFFFF;
  --zemin-isik: linear-gradient(transparent, transparent);
  --yuzey: #FFFFFF;
  --yuzey2: #F6F5F2;
  --yuzey3: #ECEAE4;
  --cizgi: rgba(20, 20, 20, .09);
  --y1: #141414;
  --y2: #3F3F3F;
  --y3: #666666;

  /* Vurgu: marka kırmızısı. --vurgu yazı ve bağlantı; --vurgu-dolgu düğme ve dolgu zemini (üstünde beyaz) */
  --vurgu: #C8102E;
  --vurgu-koyu: #A30D26;
  --vurgu-acik: #E8475E;
  --vurgu-zemin: #FCE8EB;
  --vurgu-yazi: #FFFFFF;
  --vurgu-dolgu: #C8102E;
  --vurgu-dolgu-koyu: #A30D26;
  --vurgu-rozet: #A30D26; /* kırmızı zemin (--vurgu-zemin) üstündeki yazı */
  --secili-yuzey: #FFFFFF;
  /* Eski mavi geçişin yerine: siyah kahraman zemini; bayrak şeridi .kart.kahraman::before ile */
  --vurgu-gecis: linear-gradient(#141414, #141414);
  --kahraman-cizgi: inset 0 0 0 0 transparent;
  --bayrak: linear-gradient(90deg, #141414 0 33.34%, #C8102E 33.34% 66.67%, #FFCE00 66.67% 100%);

  /* Sarı: yalnız dolgu ve zemin; üstünde siyah yazı */
  --sari: #FFCE00;
  --sari-zemin: #FFF6CC;
  --sari-yazi: #141414;

  --amber: #7A5200;
  --amber-dolgu: #FFCE00;
  --amber-zemin: #FFF6CC;
  --yesil: #13733F; /* AA: kendi zemininde (#E3F6EC) 5,1:1 */
  --yesil-dolgu: #2EA567;
  --yesil-zemin: #E3F6EC;
  /* Yanlış cevap, gecikme, silme: marka kırmızısından ayrı (MARKA_2 "yanlış") */
  --kirmizi: #B42318;
  --kirmizi-dolgu: #D92D20;
  --kirmizi-zemin: #FDECEA;
  /* Eski mor vurgu yerine nötr siyah (marka: beyaz üstüne siyah, kırmızı, sarı) */
  --mor: #141414;
  --mor-zemin: #ECEAE4;

  /* Artikel yazıları kendi zemininde en az 4,5:1 (yayın öncesi kalite denetimi); değişmez */
  --der: #1F57D6;  --der-zemin: #E6EEFE;
  --die: #BF2A31;  --die-zemin: #FDE9EA;
  --das: #0E7741;  --das-zemin: #E2F5EA;

  --golge-1: 0 0 0 1px rgba(20, 20, 20, .07), 0 1px 2px rgba(20, 20, 20, .05);
  --golge-2: 0 0 0 1px rgba(20, 20, 20, .05), 0 6px 24px -8px rgba(20, 20, 20, .16), 0 2px 6px rgba(20, 20, 20, .04);
  --golge-3: 0 24px 60px -20px rgba(20, 20, 20, .30);
  --cam: rgba(255, 255, 255, .84);
  --menu-zemin: rgba(255, 255, 255, .92);
  --menu-zemin-tam: #FFFFFF;

  --r-k: 10px; --r: 16px; --r-b: 22px; --r-xb: 28px;
  --bosluk: 16px;
  --menu-h: 58px;
  color-scheme: light;
}

/* Koyu tema yalnız kullanıcı Profil'den "Koyu" ya da "Sistem" seçerse (varsayılan açık; index.html data-theme yazar) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #0E0E0E;
    --zemin-isik: linear-gradient(transparent, transparent);
    --yuzey: #1A1A1A; --yuzey2: #242424; --yuzey3: #303030;
    --cizgi: rgba(255,255,255,.08);
    --y1: #F5F5F5; --y2: #C9C9C9; --y3: #A0A0A0;
    --vurgu: #FF5A6E; --vurgu-koyu: #FF8A99; --vurgu-acik: #C8102E; --vurgu-zemin: rgba(255,90,110,.14); --vurgu-yazi: #FFFFFF; --secili-yuzey: #2A2A2A;
    --vurgu-dolgu: #C8102E; --vurgu-dolgu-koyu: #A30D26; --vurgu-rozet: #FF8A99;
    --vurgu-gecis: linear-gradient(#262626, #262626);
    --kahraman-cizgi: inset 0 0 0 1px rgba(255,255,255,.10);
    --sari: #FFD84D; --sari-zemin: rgba(255,216,77,.13); --sari-yazi: #141414;
    --amber: #FFD84D; --amber-dolgu: #FFD84D; --amber-zemin: rgba(255,216,77,.13);
    --yesil: #52C98E; --yesil-dolgu: #3DB57A; --yesil-zemin: rgba(82,201,142,.13);
    --kirmizi: #FF8F7A; --kirmizi-dolgu: #E5533F; --kirmizi-zemin: rgba(255,143,122,.13);
    --mor: #F5F5F5; --mor-zemin: rgba(255,255,255,.09);
    --der: #74A3FF; --der-zemin: rgba(116,163,255,.15);
    --die: #FF7E83; --die-zemin: rgba(255,126,131,.15);
    --das: #5AD394; --das-zemin: rgba(90,211,148,.15);
    --golge-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
    --golge-2: 0 10px 30px -10px rgba(0,0,0,.6);
    --golge-3: 0 30px 70px -20px rgba(0,0,0,.75);
    --cam: rgba(14, 14, 14, .80);
    --menu-zemin: rgba(18, 18, 18, .90);
    --menu-zemin-tam: #121212;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --zemin: #0E0E0E;
  --zemin-isik: linear-gradient(transparent, transparent);
  --yuzey: #1A1A1A; --yuzey2: #242424; --yuzey3: #303030;
  --cizgi: rgba(255,255,255,.08);
  --y1: #F5F5F5; --y2: #C9C9C9; --y3: #A0A0A0;
  --vurgu: #FF5A6E; --vurgu-koyu: #FF8A99; --vurgu-acik: #C8102E; --vurgu-zemin: rgba(255,90,110,.14); --vurgu-yazi: #FFFFFF; --secili-yuzey: #2A2A2A;
  --vurgu-dolgu: #C8102E; --vurgu-dolgu-koyu: #A30D26; --vurgu-rozet: #FF8A99;
  --vurgu-gecis: linear-gradient(#262626, #262626);
  --kahraman-cizgi: inset 0 0 0 1px rgba(255,255,255,.10);
  --sari: #FFD84D; --sari-zemin: rgba(255,216,77,.13); --sari-yazi: #141414;
  --amber: #FFD84D; --amber-dolgu: #FFD84D; --amber-zemin: rgba(255,216,77,.13);
  --yesil: #52C98E; --yesil-dolgu: #3DB57A; --yesil-zemin: rgba(82,201,142,.13);
  --kirmizi: #FF8F7A; --kirmizi-dolgu: #E5533F; --kirmizi-zemin: rgba(255,143,122,.13);
  --mor: #F5F5F5; --mor-zemin: rgba(255,255,255,.09);
  --der: #74A3FF; --der-zemin: rgba(116,163,255,.15);
  --die: #FF7E83; --die-zemin: rgba(255,126,131,.15);
  --das: #5AD394; --das-zemin: rgba(90,211,148,.15);
  --golge-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --golge-2: 0 10px 30px -10px rgba(0,0,0,.6);
  --golge-3: 0 30px 70px -20px rgba(0,0,0,.75);
  --cam: rgba(14, 14, 14, .80);
  --menu-zemin: rgba(18, 18, 18, .90);
  --menu-zemin-tam: #121212;
  color-scheme: dark;
}

/* ───────── Taban ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--y1);
  background: var(--zemin); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  font-feature-settings: 'ss01', 'cv11';
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--vurgu); text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2.5px solid var(--vurgu); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--vurgu-zemin); }

#kok {
  position: relative; height: 100%; max-width: 480px; margin: 0 auto; overflow: hidden;
  background: var(--zemin-isik), var(--zemin); isolation: isolate;
}
@media (min-width: 640px) and (max-width: 767px) {
  body { background: var(--yuzey2); display: grid; place-items: center; }
  #kok { height: min(900px, 96vh); width: 430px; border-radius: 36px; box-shadow: var(--golge-3); }
}

.sahne { position: absolute; inset: 0; }
.sayfa {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: calc(64px + env(safe-area-inset-top)) var(--bosluk) calc(var(--menu-h) + 24px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.sayfa::-webkit-scrollbar { display: none; }
.sayfa.menusuz { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.sayfa.ustsuz { padding-top: calc(24px + env(safe-area-inset-top)); }
.sayfa.altbar { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

/* ───────── Üst çubuk ───────── */
.ust {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 8px 0; display: flex; align-items: center; gap: 4px;
  transition: background .25s, box-shadow .25s;
}
.ust.cam { background: var(--cam); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 var(--cizgi); }
.ust .baslik { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; letter-spacing: -.01em; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust .baslik small { display: block; font-size: 12px; font-weight: 500; color: var(--y3); margin-top: -2px; }

/* ───────── Alt menü: hep yerinde, ince ve sade sekme çubuğu ─────────
   Sahip (2026-10-19): "alttaki panel kısmı sürekli ortada duruyor" → "yada sürekli kalsın ama daha zarif bir şey yap".
   Ekranın altına yapışık, kenardan kenara; telefonun alt güvenli alanını kendi zemini doldurur.
   Seçili sekme: vurgu rengi ve üst kenarda kayan kısa çizgi. Kutu, gölge ve kalın zemin yok. */
.menu {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0;
  height: calc(var(--menu-h) + env(safe-area-inset-bottom)); display: flex;
  padding: 0 max(6px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-right));
  background: var(--menu-zemin); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 -0.5px 0 var(--cizgi);
}
.menu button {
  position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--y3); transition: color .25s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu button .i { width: 22px; height: 22px; stroke-width: 1.7; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.menu button.aktif { color: var(--vurgu); }
.menu button.aktif .i { stroke-width: 2.1; transform: translateY(-1px); }
.menu button:active .i { transform: scale(.9); }
.menu .rozet-sayi { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; border-radius: 9px; font-size: 12px; box-shadow: 0 0 0 2px var(--menu-zemin-tam); }
.menu-hap {
  position: absolute; z-index: 0; top: 0; height: 2.5px; left: max(6px, env(safe-area-inset-left));
  width: calc((100% - max(6px, env(safe-area-inset-left)) - max(6px, env(safe-area-inset-right))) / var(--n, 4));
  background: none; transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.menu-hap::before { content: ''; position: absolute; top: 0; left: 50%; width: 22px; height: 2.5px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--vurgu); }
.menu-hap.yok { opacity: 0; }

/* ───────── İkon ───────── */
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.k { width: 18px; height: 18px; }
.i.kk { width: 14px; height: 14px; stroke-width: 2.2; }
.i.b { width: 28px; height: 28px; stroke-width: 1.6; }
.i.xb { width: 40px; height: 40px; stroke-width: 1.4; }

/* ───────── Tipografi ───────── */
.h-dev { font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.h1 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.h2 { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.h3 { font-size: 16px; line-height: 1.35; font-weight: 700; margin: 0; }
.metin { font-size: 16px; color: var(--y2); margin: 0; }
.kucuk { font-size: 13.5px; color: var(--y3); margin: 0; line-height: 1.45; }
.etiket-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--y3); }
.sayi-b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.sayi-o { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.vurgu-yazi { color: var(--vurgu); }
.yesil-yazi { color: var(--yesil); } .kirmizi-yazi { color: var(--kirmizi); } .amber-yazi { color: var(--amber); }
.de { font-feature-settings: normal; } /* Almanca metin */
.kalin { font-weight: 700; }

/* ───────── Yüzeyler ───────── */
.kart { background: var(--yuzey); border-radius: var(--r-b); padding: 18px; box-shadow: var(--golge-1); position: relative; }
.kart.ince { padding: 14px 16px; border-radius: var(--r); }
.kart.duz { box-shadow: none; background: var(--yuzey2); }
.kart.tik { cursor: pointer; transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s; }
.kart.tik:active { transform: scale(.985); }
.kart.vurgulu { box-shadow: var(--golge-2), inset 0 0 0 1.5px var(--vurgu); }
/* Kahraman kart (MARKA_2): siyah zemin (#141414), beyaz yazı, altta 6 px siyah, kırmızı, sarı bayrak şeridi.
   Şerit ::before ile çizilir; sayfa kuralları arka planı değiştirse de şerit kalır. Ekran başına en fazla bir tane. */
.kart.kahraman { background: var(--vurgu-gecis); color: #fff; box-shadow: var(--kahraman-cizgi), 0 18px 40px -18px rgba(20,20,20,.45); overflow: hidden; }
.kart.kahraman::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--bayrak); pointer-events: none; }
.kart.kahraman::after {
  content: ''; position: absolute; inset: -40% -20% auto auto; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,0) 65%); pointer-events: none;
}
.kart.kahraman .kucuk, .kart.kahraman .metin, .kart.kahraman .etiket-k { color: rgba(255,255,255,.88); }
.bolum { margin-top: 28px; }
.bolum:first-child { margin-top: 0; }
.bolum-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bolum-bas .h3, .bolum-bas .etiket-k { margin: 0; }
.yigin { display: flex; flex-direction: column; gap: 10px; }
.yigin.s { gap: 6px; } .yigin.g { gap: 16px; }
.satir { display: flex; align-items: center; gap: 10px; }
.satir.ara { justify-content: space-between; }
.satir.ust-hiza { align-items: flex-start; }
.esnek { flex: 1; min-width: 0; }
.izgara-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.izgara-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ayrac { height: 1px; background: var(--cizgi); margin: 14px 0; border: 0; }
.liste { background: var(--yuzey); border-radius: var(--r-b); box-shadow: var(--golge-1); overflow: hidden; }
.liste > * + * { box-shadow: inset 0 1px 0 var(--cizgi); }
.liste-satir { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 60px; width: 100%; text-align: left; }
.liste-satir.tik { cursor: pointer; transition: background .15s; }
.liste-satir.tik:active { background: var(--yuzey2); }
.liste-satir .ok { color: var(--y3); }

/* ───────── Düğmeler ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px;
  border-radius: 16px; font-weight: 700; font-size: 15.5px; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .15s cubic-bezier(.22,1,.36,1), background .2s, box-shadow .2s, opacity .2s; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.ana { background: var(--vurgu-dolgu); color: var(--vurgu-yazi); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--vurgu-dolgu) 75%, transparent); }
@media (hover: hover) { .btn.ana:hover { background: var(--vurgu-dolgu-koyu); } }
.btn.ana:active { background: var(--vurgu-dolgu-koyu); }
.btn.ikincil { background: var(--vurgu-zemin); color: var(--vurgu-rozet); }
/* İkincil ana düğme: siyah zemin, beyaz yazı (MARKA_2) */
.btn.siyah { background: var(--y1); color: var(--zemin); }
.btn.hayalet { background: var(--yuzey2); color: var(--y1); }
.btn.cizgili { background: transparent; box-shadow: inset 0 0 0 1.5px var(--yuzey3); color: var(--y1); }
.btn.yesil { background: var(--yesil-dolgu); color: #fff; }
.btn.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.btn.beyaz { background: #fff; color: #141414; }
.btn.tam { width: 100%; }
.btn.kucuk { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.ikon-btn {
  width: 44px; height: 44px; border-radius: 14px; display: inline-grid; place-items: center; color: var(--y1); flex: none;
  transition: background .15s, transform .15s;
}
.ikon-btn:active { transform: scale(.92); background: var(--yuzey2); }
.ikon-btn.dolu { background: var(--yuzey); box-shadow: var(--golge-1); }
.ikon-btn.vurgu { background: var(--vurgu-zemin); color: var(--vurgu-rozet); }
.baglanti { color: var(--vurgu); font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.alt-bar {
  position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; padding: 12px var(--bosluk) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--zemin) 65%, transparent); display: flex; gap: 10px;
}

/* ───────── Çip ve rozet ───────── */
.cipler { display: flex; gap: 8px; flex-wrap: wrap; }
.cipler.kaydir { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--bosluk)); padding: 2px var(--bosluk); scrollbar-width: none; }
.cipler.kaydir::-webkit-scrollbar { display: none; }
.cip {
  min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--yuzey); box-shadow: var(--golge-1), inset 0 0 0 1px var(--cizgi);
  font-size: 14px; font-weight: 600; color: var(--y2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; flex: none;
  transition: background .18s, color .18s;
}
.cip.secili { background: var(--y1); color: var(--zemin); box-shadow: none; }
.rozet { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--yuzey2); color: var(--y2); white-space: nowrap; }
.rozet.vurgu { background: var(--vurgu-zemin); color: var(--vurgu-rozet); }
.rozet.sari { background: var(--sari); color: var(--sari-yazi); }
.rozet.yesil { background: var(--yesil-zemin); color: var(--yesil); }
.rozet.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.rozet.amber { background: var(--amber-zemin); color: var(--amber); }
.rozet.mor { background: var(--mor-zemin); color: var(--mor); }
.rozet-sayi { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--vurgu-dolgu); color: #fff; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.seviye { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 7px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: .02em; background: var(--y1); color: var(--zemin); }

/* Artikel renkleri */
.art-der { color: var(--der); } .art-die { color: var(--die); } .art-das { color: var(--das); }
.art-zemin-der { background: var(--der-zemin); color: var(--der); }
.art-zemin-die { background: var(--die-zemin); color: var(--die); }
.art-zemin-das { background: var(--das-zemin); color: var(--das); }

/* ───────── Form ───────── */
.form { display: flex; flex-direction: column; gap: 16px; }
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan > label { font-size: 13.5px; font-weight: 700; color: var(--y2); }
.girdi {
  width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 14px; border: 0; background: var(--yuzey);
  box-shadow: inset 0 0 0 1.5px var(--yuzey3); font-size: 16px; color: var(--y1); transition: box-shadow .18s; outline: none;
}
.girdi:focus { box-shadow: inset 0 0 0 2px var(--vurgu); }
textarea.girdi { min-height: 110px; resize: vertical; line-height: 1.5; }
select.girdi { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--y3) 50%), linear-gradient(135deg, var(--y3) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.girdi::placeholder { color: var(--y3); }
.hata-yazi { color: var(--kirmizi); font-size: 13.5px; font-weight: 600; }
.anahtar { position: relative; width: 50px; height: 30px; border-radius: 15px; background: var(--yuzey3); transition: background .2s; flex: none; }
.anahtar::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.anahtar.acik { background: var(--vurgu-dolgu); }
/* Dokunma alanı 44 px (görünen anahtar 50x30) */
.anahtar::before { content: ""; position: absolute; left: -2px; right: -2px; top: -7px; bottom: -7px; }
.anahtar.acik::after { transform: translateX(20px); }

/* Seçim kartı (rol, soru türü) */
.secim {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: var(--r-b); background: var(--yuzey);
  box-shadow: var(--golge-1), inset 0 0 0 1.5px transparent; text-align: left; transition: box-shadow .2s, transform .15s;
}
.secim:active { transform: scale(.985); }
.secim.secili { box-shadow: var(--golge-2), inset 0 0 0 2px var(--vurgu); }
.secim .simge { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--vurgu-zemin); color: var(--vurgu-rozet); flex: none; }
.secim b { display: block; font-size: 16px; }
.secim span { display: block; font-size: 13.5px; color: var(--y3); }

/* ───────── Avatar, ilerleme ───────── */
.avatar { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; color: #fff; letter-spacing: -.02em; }
.avatar.k { width: 32px; height: 32px; border-radius: 11px; font-size: 12.5px; }
.avatar.b { width: 64px; height: 64px; border-radius: 22px; font-size: 22px; }
.cubuk { height: 8px; border-radius: 4px; background: var(--yuzey3); overflow: hidden; }
.cubuk > i { display: block; height: 100%; border-radius: 4px; background: var(--vurgu); transition: width .6s cubic-bezier(.22,1,.36,1); }
.cubuk.yesil > i { background: var(--yesil-dolgu); } .cubuk.amber > i { background: var(--amber-dolgu); }
.cubuk.ince { height: 5px; }
.halka { position: relative; display: inline-grid; place-items: center; flex: none; }
.halka svg { transform: rotate(-90deg); }
.halka .halka-yazi.uzun { font-size: 12px; }
.halka .halka-yazi { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ───────── Durumlar ───────── */
.bos { text-align: center; padding: 36px 20px; color: var(--y3); }
.bos .i { width: 44px; height: 44px; stroke-width: 1.3; color: var(--y3); margin: 0 auto 10px; }
.bos b { display: block; color: var(--y1); font-size: 16px; margin-bottom: 4px; }
.iskelet { display: flex; flex-direction: column; gap: 10px; }
.iskelet i { display: block; height: 64px; border-radius: var(--r); background: linear-gradient(90deg, var(--yuzey2), var(--yuzey3), var(--yuzey2)); background-size: 200% 100%; animation: parilti 1.4s infinite; }
@keyframes parilti { to { background-position: -200% 0; } }
.uyari-kutu { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--amber-zemin); color: var(--amber); font-size: 14px; font-weight: 600; }
.bilgi-kutu { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--sari-zemin); color: var(--y1); font-size: 14px; font-weight: 600; }
.dogru-kutu { background: var(--yesil-zemin); color: var(--yesil); }
.yanlis-kutu { background: var(--kirmizi-zemin); color: var(--kirmizi); }

/* ───────── Alt pencere, perde, bildirim ───────── */
.perde { position: absolute; inset: 0; z-index: 40; background: rgba(10, 10, 10, .42); opacity: 0; transition: opacity .3s; }
.perde.acik { opacity: 1; }
.sheet {
  position: absolute; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 92%; overflow-y: auto; scrollbar-width: none;
  background: var(--yuzey); border-radius: 28px 28px 0 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .38s cubic-bezier(.22,1,.36,1); box-shadow: var(--golge-3);
}
.sheet.acik { transform: none; }
.sheet.surukle { transition: none; }
.tutamac { width: 100%; height: 26px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.tutamac::before { content: ''; width: 40px; height: 5px; border-radius: 3px; background: var(--yuzey3); }
.toast {
  position: absolute; z-index: 60; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 16px; background: var(--y1); color: var(--zemin);
  font-size: 14.5px; font-weight: 600; box-shadow: var(--golge-3); text-align: center;
}

/* ───────── Ses oynatıcı ve kayıt ───────── */
.ses-oynat { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 16px; background: var(--yuzey2); min-width: 200px; }
.ses-oynat .ikon-btn { width: 44px; height: 44px; border-radius: 13px; background: var(--vurgu-dolgu); color: var(--vurgu-yazi); }
.ses-oynat .dalga { flex: 1; height: 26px; display: flex; align-items: center; gap: 2px; }
.ses-oynat .dalga i { flex: 1; border-radius: 2px; background: var(--y3); opacity: .45; }
.ses-oynat .dalga i.dolu { background: var(--vurgu); opacity: 1; }
.ses-oynat .sure { font-size: 12.5px; font-weight: 700; color: var(--y3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.kayit-btn { width: 72px; height: 72px; border-radius: 50%; background: var(--kirmizi-dolgu); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(217,45,32,.55); }
.kayit-btn.kayitta { animation: nabiz 1.4s infinite; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(217,45,32,.5); } 70% { box-shadow: 0 0 0 18px rgba(217,45,32,0); } 100% { box-shadow: 0 0 0 0 rgba(217,45,32,0); } }

/* ───────── Sohbet balonları ───────── */
.balonlar { display: flex; flex-direction: column; gap: 10px; }
.balon { max-width: 86%; padding: 11px 14px; border-radius: 20px; font-size: 15.5px; line-height: 1.45; background: var(--yuzey); box-shadow: var(--golge-1); align-self: flex-start; border-bottom-left-radius: 6px; white-space: pre-wrap; word-wrap: break-word; }
.balon.ben { align-self: flex-end; background: var(--vurgu-dolgu); color: var(--vurgu-yazi); border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; box-shadow: none; }
.balon .zaman { display: block; font-size: 12px; opacity: .65; margin-top: 4px; }
.balon img { border-radius: 12px; margin-top: 6px; max-height: 220px; object-fit: cover; }

/* ───────── Yardımcılar ───────── */
.gizli { display: none !important; }
.ortala { text-align: center; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.tek-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

[data-hareket="az"] *, [data-hareket="az"] *::before, [data-hareket="az"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0s !important; } }

/* ───────── Erişilebilirlik ve düzeltmeler (kalite denetimi 1) ───────── */
/* Kahraman karttaki beyaz düğme kendi rengini korur */
.kart.kahraman .btn.beyaz { color: #141414; }
/* Küçük görünen ama en az 44 px dokunma alanı olan öğeler */
.cip, .baglanti, .btn.kucuk, .ses-oynat .ikon-btn { position: relative; }
.cip::after, .baglanti::after, .btn.kucuk::after, .ses-oynat .ikon-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%); }
/* Dokunma hedefi en az 44 px (kalite denetimi, yayın öncesi ORTA-6) */
.cip { min-height: 44px; }
.btn.kucuk { min-height: 44px; }

/* ───────── Marka (docs/tasarim/MARKA_2.md) ───────── */
/* Amblem: sahibin logosu, şeffaf zemin (sahip: "arka planı kaldır beyaz olmasın her yerde"). Beyaz kutu ve karo yok.
   Açık temada siyah çizgili sürüm; koyu temada ve siyah kartta (.koyu-zemin, kahraman) çizgileri #F5F5F5 olan sürüm. */
.mk-amblem { display: grid; place-items: center; flex: none; line-height: 0; }
.mk-amblem img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.mk-amblem .mk-amblem-koyu { display: none; }
.mk-amblem.koyu-zemin .mk-amblem-acik, .kart.kahraman .mk-amblem .mk-amblem-acik { display: none; }
.mk-amblem.koyu-zemin .mk-amblem-koyu, .kart.kahraman .mk-amblem .mk-amblem-koyu { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-amblem .mk-amblem-acik { display: none; } :root:not([data-theme="light"]) .mk-amblem .mk-amblem-koyu { display: block; } }
:root[data-theme="dark"] .mk-amblem .mk-amblem-acik { display: none; }
:root[data-theme="dark"] .mk-amblem .mk-amblem-koyu { display: block; }
/* Yazı logosu: amblem + "Alman Haus" (800, -0,02 em) + "ALMANCA KURSU" (700, 0,16 em); amblem yüksekliği iki satırın toplamı */
.mk-kilit { display: flex; align-items: center; gap: var(--mk-bosluk, 10px); min-width: 0; }
.mk-kilit-yazi { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.mk-kilit.kisa .mk-kilit-yazi { justify-content: center; }
.mk-ad { display: block; font-weight: 800; letter-spacing: -.02em; color: var(--y1); white-space: nowrap; }
.mk-alt-ad { display: block; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6B6B6B; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-alt-ad { color: var(--y3); } }
:root[data-theme="dark"] .mk-alt-ad { color: var(--y3); }
.mk-alt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--y2); line-height: 1.2; white-space: nowrap; }
/* Almanya şeridi: üç eşit bant siyah, kırmızı, sarı (süs, bilgi taşımaz) */
.mk-serit { display: inline-block; flex: none; width: 22px; height: 6px; border-radius: 1.5px; background: linear-gradient(#141414 0 2px, #C8102E 2px 4px, #FFCE00 4px 6px); }
.kart.kahraman .mk-serit { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-serit { box-shadow: 0 0 0 1px rgba(255,255,255,.3); } }
:root[data-theme="dark"] .mk-serit { box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.mk-siteye { min-height: 44px; }
.mk-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 12px; }
.mk-ust-sag { display: flex; align-items: center; gap: 8px; flex: none; }
.mk-zil { position: relative; }
.mk-zil .rozet-sayi { position: absolute; top: 4px; right: 3px; box-shadow: 0 0 0 2px var(--zemin); }
.mk-avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.mk-avatar .avatar { width: 40px; height: 40px; border-radius: 13px; }
@media (display-mode: standalone) { .mk-siteye { display: none !important; } }
/* Üst çubuk: kök ekranlarda solda kısa yazı logosu (amblem 30 px + "Alman Haus"), ince çizgi, başlık;
   iç ekranlarda geri düğmesi, başlık ve sağ uçta amblem 22 px (yalnız ust-ek boşken). Kaydırınca altta 3 px bayrak şeridi. */
.ust-marka { display: flex; align-items: center; gap: 10px; margin-left: 8px; flex: none; }
.ust-marka::after { content: ''; width: 1px; height: 22px; background: var(--cizgi); margin-left: 2px; }
.ust-marka + .baslik { padding-left: 2px; }
.ust-isaret { display: grid; place-items: center; flex: none; margin: 0 10px 0 2px; }
#ust-ek:not(:empty) + .ust-isaret { display: none; }
.ust::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--bayrak); pointer-events: none; }

/* ───────── Görsel denetim 1 ───────── */
/* Koyu temada seçili çip beyaz parlamasın: vurgu tonunda zemin ve çerçeve */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cip.secili { background: rgba(255,90,110,.18); color: #FFE1E5; box-shadow: inset 0 0 0 1.5px #FF5A6E; }
}
:root[data-theme="dark"] .cip.secili { background: rgba(255,90,110,.18); color: #FFE1E5; box-shadow: inset 0 0 0 1.5px #FF5A6E; }
/* Koyu temada ikincil düğme yazısı zemininde 4,5:1 üstü */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.ikincil { color: var(--vurgu-koyu); } }
:root[data-theme="dark"] .btn.ikincil { color: var(--vurgu-koyu); }
/* Doğrulama (yayın): koyu temada vurgu rozeti AA (3,73 → üstü) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rozet.vurgu { color: var(--vurgu-koyu); } }
:root[data-theme="dark"] .rozet.vurgu { color: var(--vurgu-koyu); }
.cipler .cip { min-height: 44px; }
/* Vurgu rozeti yazısı: --vurgu-rozet jetonu (açıkta #A30D26, koyuda #FF8A99), dosyanın başında tanımlı */