/* p128 uygulandı: jetonla eşleşen sabit renkler var()'a çevrildi.
   ===== G1a: kanonik jeton bloğu =====================================
   Bütün tasarım jetonları burada. Önceden 24 ayrı blokta dağınıktı; hangi
   değerin kazandığını görmek için dosyayı baştan sona okumak gerekiyordu.
   Değerler "son tanım kazanır" kuralıyla toplandı, yani tarayıcı açısından
   davranış birebir aynı. Yeni jeton EKLENMEDİ, hiçbir değer DEĞİŞTİRİLMEDİ.
   Renk değiştirmek isteyen buraya bakar; başka yerde hex aramaz. */

/* Koyu tema — VARSAYILAN (2026-09-08 kurucu kararı: mor + koyu, Duolingo hissi).
   Kök blok koyudur; "acik" ve sistem-açık aynı rolleri açık jetonlarla karşılar.
   Kurucunun verdiği altı renk: zemin #0B0D17 · yüzey #141827 · mor #7C5CFF ·
   parlak mor #9B7BFF · metin #F5F7FB · sessiz #9AA3B2 · ikincil mavi #4F7CFF. */
:root {
  --uzeri: #fff;  /* renkli yüzey üzerindeki içerik; iki temada da aynı */
  --motion-alev: 1700ms;   /* io318: seri alevinin titreme döngüsü (Bugün); azaltılmış harekette durur */
  --shadow-basma: 0 1px 2px rgba(0,0,0,.35);
  --shadow-ickenar: inset 0 0 0 1px var(--line);
  --shadow-cerceve: inset 0 0 0 2px var(--line);
  --glow-focus: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
  --world: var(--accent);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;   /* düğme alt kenarı (Duolingo grameri): yüz basınca kenarın içine iner */
  --motion-nefes: 3400ms;  /* Neti ortam döngüleri: nefes, göz kırpma, anten — etkileşim ölçeğine tabi değil */
  --motion-kirp: 5200ms;
  --motion-anten: 2800ms;
  --mono: "JetBrains Mono", Consolas, monospace;
  --r-old: var(--r);
  --r-sm-old: var(--r-sm);
  --surface-1: var(--surface);
  --line-soft: color-mix(in srgb, var(--line) 55%, transparent);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 12px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent);
  --motion-instant: 90ms;
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --motion-structural: 360ms;
  --motion-reveal: 640ms;
  --motion-cinematic: 1100ms;
  --ease-snap: cubic-bezier(.2, 0, 0, 1);
  --ease-flow: cubic-bezier(.4, 0, .2, 1);
  --ease-enter: cubic-bezier(.2, .8, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: var(--motion-fast);
  --t: var(--motion-standard);
  --t-slow: var(--motion-structural);
  --m-micro: var(--motion-fast);
  --m-ui: var(--motion-standard);
  --m-hero: var(--motion-reveal);
  --ease: var(--ease-enter);
  --spring: var(--ease-spring);
  --ease-in: var(--ease-exit);  /* mor kahraman kartı üstündeki ikincil metin */
  --r-pano: 32px;
  --blue-ink: #FFFFFF;
  --tint: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --tint-blue: color-mix(in srgb, var(--blue) 18%, var(--surface));
  --tint-good: color-mix(in srgb, var(--good) 16%, var(--surface));
  --tint-violet: color-mix(in srgb, var(--accent-2) 18%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn) 16%, var(--surface));
  --tint-bad: color-mix(in srgb, var(--bad) 16%, var(--surface));
  --r-xs: 10px;
  --r-sm: 14px;
  --r: 18px;
  --r-lg: 24px;
  --edge: none;
  --c-turkce: #FF6B62;
  --c-mat: #6F93FF;
  --c-fizik: #9B7BFF;
  --c-kimya: #2FC4D8;
  --c-biyoloji: #4FD07C;
  --c-tarih: #E0B457;
  --c-cografya: #8FBF5E;
  --c-felsefe: #A79DD0;
  --c-din: #C4B08A;
  --c-edebiyat: #E0679C;
  --c-genel: #9AA3B2;
  --c-turkce-m: var(--c-turkce);
  --c-mat-m: var(--c-mat);
  --c-fizik-m: var(--c-fizik);
  --c-kimya-m: var(--c-kimya);
  --c-biyoloji-m: var(--c-biyoloji);
  --c-tarih-m: var(--c-tarih);
  --c-cografya-m: var(--c-cografya);
  --c-felsefe-m: var(--c-felsefe);
  --c-din-m: var(--c-din);
  --c-edebiyat-m: var(--c-edebiyat);
  --c-genel-m: var(--c-genel);
}

/* Açık tema — açıkça seçilmiş. Aynı mor marka, açık yüzeyler.
   Mor beyaz yazıyla 4.36:1 kalıyor; açık temada düğme dolgusu bir ton koyu (#6A4AF0 → 4.7:1). */
:root[data-tema="acik"] {
  --c-turkce: #E05A52;
  --c-mat: #3E6BF2;
  --c-fizik: #6A4AF0;
  --c-kimya: #10A5B4;
  --c-biyoloji: #16A34A;
  --c-tarih: #B8862B;
  --c-cografya: #5B9C3E;
  --c-felsefe: #7A6FA0;
  --c-din: #8A7A5A;
  --c-edebiyat: #C24B7E;
  --c-genel: #667085;
  --c-turkce-m: #D43026;
  --c-mat-m: #2E55CC;
  --c-fizik-m: #5535D6;
  --c-kimya-m: #0C7C88;
  --c-biyoloji-m: #11813B;
  --c-tarih-m: #916922;
  --c-cografya-m: #497D32;
  --c-felsefe-m: #74699C;
  --c-din-m: #7E6F52;
  --c-edebiyat-m: #BF4177;
  --c-genel-m: #667085;
}
/* io318 PAYLAŞILAN JETONLAR — seri alevi (--alev-*) ve Neti açılış kartının sahne karoları (--as-*). Açık ve koyu AYRI tasarlandı
   (ters çevrilmiş değil). Başka ekran da kullanabilir. */
:root[data-tema="acik"] {
  --alev-taban: #FF8A1F; --alev-golge: #EC5418; --alev-cekirdek: #FFD43B; --alev-sonuk: #CFCBDD; --alev-sonuk-golge: #B5B0C9;
  /* io318f/h: Neti açılış kartında resmin arkasındaki sahne karoları (duyguya göre; -a üst ışık, -b alt), temas gölgesi ve kartın perdesi */
  --as-sabah-a: #FFE9D6; --as-sabah-b: #FFC9A8; --as-gun-a: #EFE9FF; --as-gun-b: #CFC2FF; --as-aksam-a: #F6DDEE; --as-aksam-b: #C9B4F2;
  --as-gece-a: #3A2F8F; --as-gece-b: #1B1650; --as-kutlama-a: #FFF1C2; --as-kutlama-b: #FFD166; --as-endise-a: #E3F0FF; --as-endise-b: #B9D4FA;
  --as-sicak-a: #FFE3EE; --as-sicak-b: #FFB9D2; --as-yildiz: #FFE9A8; --as-zemin-golge: rgba(40, 24, 110, .22); --as-perde: rgba(23, 26, 46, .46);
}
:root[data-tema="koyu"] {
  --alev-taban: #FF9A2E; --alev-golge: #E85A1C; --alev-cekirdek: #FFDF6B; --alev-sonuk: #3A4163; --alev-sonuk-golge: #2B3150;
  --as-sabah-a: #6B4A52; --as-sabah-b: #3B2A44; --as-gun-a: #4A3F9E; --as-gun-b: #251E5E; --as-aksam-a: #5A3A6E; --as-aksam-b: #2A1D52;
  --as-gece-a: #2A2378; --as-gece-b: #100C36; --as-kutlama-a: #7A5A1E; --as-kutlama-b: #3D2C17; --as-endise-a: #2E4A7A; --as-endise-b: #172A4E;
  --as-sicak-a: #6E3458; --as-sicak-b: #3A1D3F; --as-yildiz: #FFE9A8; --as-zemin-golge: rgba(0, 0, 0, .45); --as-perde: rgba(0, 0, 0, .62);
}

/* Açık tema — sistem tercihi (cihaz açık moddaysa). Yukarıdaki blokla birebir. */
@media (prefers-color-scheme: light) {
  :root[data-tema="sistem"] {
    --shadow-basma: 0 1px 2px rgba(16,24,40,.06);
    --shadow-3: 0 24px 60px -28px rgba(16,24,40,.35);
    --gunes-k: #C99600;
    --mercan: #F0455A;
    --bg: #F4F3FB;
    --surface: #FFFFFF;
    --surface-2: #F8F7FD;
    --soft: #ECEAF7;
    --line: #E1DEF0;
    --ink: #171A2E;
    --hero-muted: #C4BFE6;
    --accent: #6A4AF0;
    --accent-k: #5535D6;
    --accent-2: #8B6CFF;
    --blue: #3E6BF2;
    --blue-k: #2E55CC;
    --good: #16A34A;
    --good-k: #12833C;
    --good-d: #0F7038;
    --bad: #E5484D;
    --bad-k: #C93A3F;
    --bad-d: #B3262B;
    --warn: #F59E0B;
    --alev: #F59E0B;
    --alev-k: #C77D06;
    --alev-d: #9A5A05;
    --violet: #6A4AF0;
    --violet-k: #5535D6;
    --gunes: #F59E0B;
    --nane: #16A34A;
    --info: #3E6BF2;
    --grad: linear-gradient(135deg, #6A4AF0 0%, #8B6CFF 100%);
    --hero: linear-gradient(150deg, #2A1F6E 0%, #34288A 55%, #3B2E9C 100%);
    --shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -14px rgba(16,24,40,.14);
    --shadow-2: 0 2px 4px rgba(16,24,40,.05), 0 16px 40px -18px rgba(16,24,40,.20);
    --c-turkce: #E05A52;
    --c-mat: #3E6BF2;
    --c-fizik: #6A4AF0;
    --c-kimya: #10A5B4;
    --c-biyoloji: #16A34A;
    --c-tarih: #B8862B;
    --c-cografya: #5B9C3E;
    --c-felsefe: #7A6FA0;
    --c-din: #8A7A5A;
    --c-edebiyat: #C24B7E;
    --c-genel: #667085;
    --nav-idle: #5F6578;
    --nav-active: #6A4AF0;
    --muted: #5F6578;
    --c-turkce-m: #D43026;
    --c-mat-m: #2E55CC;
    --c-fizik-m: #5535D6;
    --c-kimya-m: #0C7C88;
    --c-biyoloji-m: #11813B;
    --c-tarih-m: #916922;
    --c-cografya-m: #497D32;
    --c-felsefe-m: #74699C;
    --c-din-m: #7E6F52;
    --c-edebiyat-m: #BF4177;
    --c-genel-m: #667085;
  }
}

:root { /* renk */
        
            
      
  
  
  /* ders dünyaları */
            
  
  /* yükseklik */
  
  
  
  /* aralık ve köşe */
       
     
  /* hareket */
    
    
    
   
  color-scheme: dark; }@media (prefers-color-scheme: light) {:root[data-tema="sistem"] { color-scheme: light; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
body { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h2 { font-size: 21px; line-height: 1.15; }
h3 { font-size: 16.5px; }
p { margin: 0 0 12px; }
.ic { vertical-align: -4px; flex: none; }
 .small { font-size: 13px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .between { justify-content: space-between; } .nowrap { flex-wrap: nowrap; }
.big { font-family: var(--display); font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.free-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* ---------- iskelet ---------- */
#app { max-width: 720px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 6px; position: sticky; top: 0; z-index: 20; }   /* io81: yapışkan ünite kartı (10) üst çubuğu örtmesin */
.brand { display: flex; gap: 9px; font-family: var(--display); }
.logo { width: 30px; height: 30px; display: grid; place-items: center; } .logo svg { width: 30px; height: 30px; display: block; }
.top-right { display: flex; align-items: center; }
.pill { padding: 6px 10px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.avatar { border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 0; }
#kocBtn { color: var(--ink); }
.iconbtn { display: grid; place-items: center; transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease); }
.view { flex: 1; padding: 8px 18px 104px; }
.tabs { bottom: 0; left: 0; right: 0; max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); z-index: 20; }   /* io86: Arkadaşlar sekmesiyle altı sütun · io102: 5 → 20, yapışkan ünite kartı (10) sekmelerin üstüne binmesin */
.tabs a { display: flex; flex-direction: column; align-items: center; border-radius: var(--r-sm); }
.offline { position: fixed; top: 0; left: 0; right: 0; z-index: 30; font-size: 12px; text-align: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; }

/* ---------- sayfa geçişleri ---------- */
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view.enter { animation: fade var(--t) var(--ease); }
::view-transition-old(root) { animation: vt-out 140ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 200ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
.rise { animation: rise var(--t-slow) var(--ease) both; } .rise.d1 { animation-delay: 40ms; } .rise.d2 { animation-delay: 80ms; } .rise.d3 { animation-delay: 120ms; } .rise.d4 { animation-delay: 160ms; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- kartlar ---------- */
.card { padding: 16px 18px; margin: 12px 0; }
.card.hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
 .card.hero .ring-lbl { fill: var(--uzeri); } .card.tint { background: var(--tint); border-color: transparent; } .card.good { background: var(--tint-good); border-color: transparent; } .card.blue { background: var(--tint-blue); border-color: transparent; }
.card.world { border-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--world) 14%, var(--surface)) 0%, var(--surface) 70%); }
.card.tap { transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); }

@media (hover: hover) {  }
.hero-ok { position: absolute; right: 14px; bottom: 10px; width: 54px; z-index: 1; opacity: .95; }
.mascot { display: inline-block; line-height: 0; } .mascot svg { width: 100%; height: auto; display: block; }
.mascot.idle svg .eye { transform-origin: center; transform-box: fill-box; animation: blink 5.2s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
.mascot.idle svg { animation: breathe 4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.spot { place-items: center; }
.spot svg { width: 150px; height: auto; }

/* ---------- düğmeler, çipler ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; justify-content: center; will-change: transform; }

@media (hover: hover) {  }
.btn.ghost { background: var(--soft); color: var(--ink); box-shadow: none; }   .btn.good { background: var(--good); color: var(--good-uzeri); box-shadow: none; }
.btn.sm { font-size: 14px; border-radius: 10px; } .btn.xs { font-size: 12.5px; border-radius: 8px; } .btn.block { width: 100%; }
.btn:disabled { cursor: default; } .btn.busy { pointer-events: none; opacity: .85; } .btn.busy::before { content: ""; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-radius: 50%; animation: spin .8s linear infinite; }
input, select, textarea { width: 100%; font: inherit; padding: 11px 12px; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
input:focus, select:focus, textarea:focus { outline: none; }
label { display: block; font-size: 13.5px; margin: 12px 0 5px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 12px; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); }
  .chip.sm { padding: 5px 10px; font-size: 12.5px; }
.chips.multi .chip.on { color: var(--uzeri); }
.subtabs { display: flex; gap: 6px; padding: 2px 0 8px; margin: 6px 0 2px; }
.subtabs button { white-space: nowrap; padding: 8px 13px; font-size: 14px; scroll-snap-align: start; transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); }
 .seg { display: inline-flex; gap: 2px; } .seg button { border: 0; background: transparent; font-size: 13.5px; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
 .seg.wide { display: flex; } .seg.wide button { flex: 1; }
.tag { font-size: 10.5px; padding: 3px 7px; border-radius: 6px; background: var(--soft); color: var(--muted); white-space: nowrap; display: inline-block; }
.tag.konu { background: var(--tint-blue); color: var(--blue); } .tag.sinav { background: var(--tint-blue); color: var(--blue); } /* P0-2B: TEST görevi etiketi */ .tag.deneme, .tag.zayif { background: var(--tint); color: var(--accent); } .tag.hata, .tag.bitti { background: var(--tint-good); color: var(--good); } .tag.tekrar { background: var(--tint-warn); color: var(--warn); } .tag.soru { background: var(--tint-violet); color: var(--violet); }

/* ---------- bugün ---------- */
.now { padding: 20px 18px 16px; }
.now .lead { font-family: var(--display); font-weight: 780; font-size: 26px; line-height: 1.08; letter-spacing: -.02em; margin: 6px 0 4px; }
.now .why { color: #B6BAD9; font-size: 14px; }
.now .cta { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 0; }
.status div { border-radius: var(--r-sm); padding: 10px 8px; text-align: center; }
.status b { display: block; font-family: var(--display); font-weight: 780; font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.status span { color: var(--muted); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 6px 0 2px; }
.week div { text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.week i { display: block; height: 34px; border-radius: 8px; background: var(--soft); margin-bottom: 4px; position: relative; overflow: hidden; }
.week i b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--grad); border-radius: 8px; transform-origin: bottom; animation: growY var(--t-slow) var(--ease) both; }
.week div.today span { color: var(--accent); }
@keyframes growY { from { transform: scaleY(0); } }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 4px 0 2px; }
.days button { border: 0; background: transparent; padding: 6px 0 4px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); transition: background var(--t) var(--ease); }
.days button b { font-family: var(--display); font-size: 15px; color: var(--ink); } .days button i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.days button i.done { background: var(--good); } .days button i.part { background: var(--warn); } .days button.today { background: var(--soft); } .session { display: grid; align-items: center; border-top: 1px solid var(--line); }
.session:first-of-type { border-top: 0; }   .session .h { font-size: 13px; color: var(--muted); }
.session.done .k { text-decoration: line-through; color: var(--muted); } a.session { color: inherit; }
.mood { display: flex; gap: 6px; } .mood button { border: 0; background: rgba(255,255,255,.08); width: 40px; height: 40px; border-radius: 12px; transition: transform var(--t-fast) var(--spring), background var(--t) var(--ease); }
 .mood button.on { background: rgba(255,255,255,.22); outline: 2px solid rgba(255,255,255,.5); transform: scale(1.08); }
.gozlem .goz { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.gozlem .goz:first-of-type { border-top: 0; }
.goz-i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.goz.sure .goz-i, .goz.tuzak .goz-i { background: var(--tint); color: var(--accent); } .goz.saat .goz-i, .goz.trend .goz-i { background: var(--tint-blue); color: var(--blue); } .goz.unutma .goz-i { background: var(--tint-warn); color: var(--warn); } .goz.plan .goz-i, .goz.odak .goz-i { background: var(--tint-good); color: var(--good); }
.gmo-cta { display: block; color: var(--uzeri); background-size: 240px, auto; border: 0; }
 .gmo-cta.done { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .gmo-cta.done .eyebrow { color: var(--muted) !important; } .gmo-cta.done .muted { color: var(--muted); }
.friends { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; } .friends::-webkit-scrollbar { display: none; }
.friend { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); width: 64px; }
.friend b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 15px; } .friend.ahead b { background: var(--tint); color: var(--accent); } .friend.behind b { background: var(--tint-good); color: var(--good); }

/* ---------- konular ---------- */
.topic { display: grid; grid-template-columns: 26px 1fr 70px; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); } .topic:first-of-type { border-top: 0; }
.dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: transparent; display: grid; place-items: center; padding: 0; transition: transform var(--t-fast) var(--spring); } .dot:active { transform: scale(.85); }
.dot.basladim { border-color: var(--warn); background: var(--tint-warn); } .dot.bitti { border-color: var(--good); background: var(--good); color: var(--uzeri); } .dot.tekrar { border-color: var(--accent); background: var(--tint); }
.spark { display: inline-flex; gap: 2px; align-items: flex-end; height: 22px; width: 100%; } .spark i { flex: 1; background: var(--world, var(--blue)); border-radius: 2px 2px 0 0; opacity: .8; }
.topic .freq { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.subj-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.world-bg { position: absolute; inset: 0; opacity: .12; pointer-events: none; background-repeat: repeat; background-size: 160px; }
 .map .road { fill: none; stroke-linejoin: round; stroke-linecap: round; } .map .road2 { fill: none; stroke-linejoin: round; stroke-linecap: round; }
@keyframes draw { to { stroke-dashoffset: 0; } }
  .map .node circle { transition: r var(--t) var(--ease); } .map .node.pop { animation: pop var(--t-slow) var(--spring) both; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- özet ---------- */
.kalip { padding: 10px 12px; background: var(--surface-2); border-radius: 10px; margin: 8px 0; font-size: 14.5px; } .kalip b { display: block; } .kalip .tuzak { color: var(--accent); }
.card60 { background: var(--hero); color: var(--uzeri); border-radius: var(--r); padding: 16px 18px; font-family: var(--mono); font-size: 14px; line-height: 1.7; margin: 12px 0; }
.modes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 8px; } .modes::-webkit-scrollbar { display: none; }
.modes button { flex: none; border: 1px solid var(--line); background: var(--surface); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: transform var(--t-fast) var(--ease); } .modes button:active { transform: scale(.95); } .modes button.on { background: var(--world, var(--ink)); color: var(--uzeri); border-color: transparent; }
.stream { font-size: 15px; line-height: 1.6; white-space: pre-wrap; color: var(--muted); } .stream::after { content: "▍"; color: var(--accent); animation: caret 1s steps(2) infinite; } @keyframes caret { 50% { opacity: 0; } }
.chart { display: block; width: 100%; height: auto; } .chart .grid { stroke-width: 1; }  .chart .dl { font-family: var(--mono); font-size: 11px; fill: var(--ink); font-weight: 500; }
.chart polyline { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.2s var(--ease) forwards; } .chart circle { animation: pop var(--t-slow) var(--spring) both; transform-box: fill-box; transform-origin: center; }
.chart rect.bar { transform-origin: bottom; animation: growY var(--t-slow) var(--ease) both; transform-box: fill-box; }
.ring .ring-lbl { font-family: var(--display); font-weight: 750; font-size: 15px; fill: var(--ink); } .ring .ring-sub { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.ring-fg { transition: stroke-dashoffset .8s var(--ease); }
/* ---------- sorular ---------- */
.q { padding: 14px 0; border-top: 1px solid var(--line); } .q:first-of-type { border-top: 0; } .q .stem { font-weight: 500; margin-bottom: 10px; white-space: pre-wrap; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 6px 0; text-align: left; width: 100%; transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease); }
 .opt b { font-family: var(--mono); color: var(--muted); }
.opt.ok { animation: okpop var(--t-slow) var(--spring); } .opt.no { animation: shake .35s var(--ease); }
@keyframes okpop { 30% { transform: scale(1.02); } } @keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cozum { font-size: 14px; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-top: 8px; animation: fade var(--t) var(--ease); }
.neden { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .steps-list { padding-left: 20px; margin: 6px 0 10px; } .steps-list li { margin-bottom: 6px; }
.quiz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin: 12px 0; box-shadow: var(--shadow-1); animation: fade var(--t) var(--ease); }
.qbar { height: 6px; background: var(--soft); border-radius: 3px; margin-top: 10px; overflow: hidden; } .qbar i { display: block; height: 100%; background: var(--grad); transition: width 1s linear; }
.qstem { font-size: 17px; font-weight: 500; line-height: 1.45; margin: 10px 0 12px; white-space: pre-wrap; } .qopts .opt { padding: 12px 14px; font-size: 15.5px; } .qopts .opt:disabled { cursor: default; }
.tiles { display: flex; gap: 6px; } .tiles .tile, .tiles i { flex: 1; aspect-ratio: 1; border-radius: 8px; background: var(--soft); position: relative; overflow: hidden; display: block; }
.tiles.sm i { height: 10px; aspect-ratio: auto; border-radius: 3px; background: rgba(255,255,255,.18); } .gmo-cta.done .tiles.sm i { background: var(--line); }
.tiles .tile.ok, .tiles i.ok { background: var(--good); } .tiles .tile.no, .tiles i.no { background: var(--accent); }
.tiles .tile i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.85); border-radius: 2px; }
.tiles .tile { animation: pop var(--t-slow) var(--spring) both; } .tiles .tile:nth-child(2) { animation-delay: 50ms } .tiles .tile:nth-child(3) { animation-delay: 100ms } .tiles .tile:nth-child(4) { animation-delay: 150ms } .tiles .tile:nth-child(5) { animation-delay: 200ms } .tiles .tile:nth-child(6) { animation-delay: 250ms } .tiles .tile:nth-child(7) { animation-delay: 300ms } .tiles .tile:nth-child(8) { animation-delay: 350ms }
.tile.sm { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--soft); } .tile.sm.ok { background: var(--good); } .tile.sm.no { background: var(--accent); }
.dist { display: flex; gap: 6px; align-items: flex-end; height: 90px; margin: 12px 0 6px; } .dcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dcol i { display: block; width: 100%; background: var(--blue); border-radius: 4px 4px 0 0; opacity: .8; transform-origin: bottom; animation: growY var(--t-slow) var(--ease) both; } .dcol.me i { background: var(--accent); opacity: 1; } .dcol.me { color: var(--accent); font-weight: 600; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 8px; } .vs > div { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.07); text-align: center; } .vs .win { background: rgba(255,138,61,.18); outline: 2px solid rgba(255,138,61,.7); } .vs .vn { font-family: var(--display); font-weight: 700; font-size: 16px; } .vs .big { font-size: 40px; } .vsx { font-family: var(--display); font-weight: 800; color: #B6BAD9; }
.qq { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); } .qq:first-of-type { border-top: 0; }

/* ---------- aşamalar (yükleme adımları) — io337: kamera stilleri (drop, preview, scanbox, cropbox, adimlar) fotoğrafla çözümle birlikte kaldırıldı ---------- */
.stages { list-style: none; padding: 0; margin: 10px 0; } .stages li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; padding: 6px 0; font-size: 14.5px; color: var(--muted); transition: color var(--t) var(--ease); }
.stages li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; } .stages li.on { color: var(--ink); } .stages li.on i { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; } .stages li.done { color: var(--ink); } .stages li.done i { background: var(--good); border-color: var(--good); color: var(--uzeri); font-size: 11px; }
.err { border-radius: var(--r-sm); padding: 14px 16px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; } .err b { display: block; margin-bottom: 4px; }

/* ---------- flash, koç, zamanlayıcı ---------- */
.flash { perspective: 1000px; margin: 12px 0; } .flash .inner { position: relative; min-height: 220px; transition: transform .5s var(--ease); transform-style: preserve-3d; } .flash.flipped .inner { transform: rotateY(180deg); }
.flash .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-family: var(--display); font-weight: 650; font-size: 20px; line-height: 1.3; }
.flash .front { background: var(--hero); color: var(--uzeri); } .flash .back { background: var(--surface); border: 1px solid var(--line); transform: rotateY(180deg); font-family: var(--body); font-weight: 500; font-size: 17px; } .flash .face .eyebrow { margin-bottom: 10px; } .flash .front .eyebrow { color: #B6BAD9; }
.chat { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; white-space: pre-wrap; animation: fade var(--t) var(--ease); }
.msg.me { align-self: flex-end; border-bottom-right-radius: 4px; } .msg.ai { align-self: flex-start; border-bottom-left-radius: 4px; } .msg.ai .ava { width: 22px; display: inline-block; vertical-align: -6px; margin-right: 6px; }
.chatbar { position: fixed; bottom: 70px; left: 0; right: 0; max-width: 720px; margin: 0 auto; padding: 8px 18px; display: flex; gap: 8px; z-index: 4; } .quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.timer { text-align: center; padding: 16px 0 6px; } .timer .big { font-size: 58px; } .timer .ringbox { position: relative; width: 220px; height: 220px; margin: 6px auto 10px; } .timer .ringbox .ring { width: 220px; height: 220px; } .timer .ringbox .inside { position: absolute; inset: 0; display: grid; place-items: center; } .timer .ringbox .inside #ipucu { position: absolute; left: 0; right: 0; top: 67%; text-align: center; }
.timer canvas.atmo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.timer > * { position: relative; }
.bar { height: 8px; background: var(--soft); border-radius: 999px; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .5s var(--ease); }
.steps { display: flex; gap: 4px; margin-bottom: 14px; } .steps i { flex: 1; height: 4px; background: var(--line); border-radius: 2px; transition: background var(--t) var(--ease); } .steps i.on { background: var(--accent); }
.welcome { display: grid; align-items: center; }

/* ---------- ben ---------- */
.stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .stat div { background: var(--surface-2); border-radius: 12px; padding: 10px; text-align: center; } .stat b { display: block; font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; } .stat span { font-size: 12px; color: var(--muted); }
.ders-row { display: grid; grid-template-columns: 1fr 64px 64px 64px; gap: 6px; align-items: center; margin: 6px 0; font-size: 14px; } .ders-row input { padding: 8px; text-align: center; min-height: 44px; }   /* ab34: dokunma hedefi 39 px ölçüldü; WCAG 2.2 tabanı 44 */
/* ab34: 320 px'de üç 64 px sütun ders adına yer bırakmıyordu ("Türkç/e" diye
   kelime ortasından sarıyordu). Dar ekranda sütunlar daralır. */
@media (max-width: 360px) { .ders-row { grid-template-columns: 1fr 52px 52px 52px; gap: 4px; } .ders-row input { padding: 8px 4px; } }
.board { width: 100%; border-collapse: collapse; font-size: 14.5px; } .board td, .board th { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: left; } .board th { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; } .board td.num { font-family: var(--mono); text-align: right; } .board tr.me td { background: var(--tint-blue); } .rank { font-family: var(--display); font-weight: 800; font-size: 18px; width: 30px; }
.badges { display: grid; } .badge { text-align: center; font-size: 11px; color: var(--muted); }  .badge svg { display: block; margin: 0 auto 4px; } .badge:not(.on) svg { filter: grayscale(1); opacity: .35; }
.rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; font-size: 11px; color: var(--muted); }
.est { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -.02em; }
.hbar { display: grid; grid-template-columns: 82px 1fr 44px auto; gap: 8px; align-items: center; font-size: 13.5px; margin: 6px 0; } .hbar i { display: block; height: 8px; border-radius: 4px; background: var(--blue); min-width: 4px; transform-origin: left; animation: growX var(--t-slow) var(--ease) both; } .hbar i.acc { background: var(--accent); } .hbar i.good { background: var(--good); } .hbar b { font-family: var(--mono); font-weight: 500; text-align: right; }
@keyframes growX { from { transform: scaleX(0); } }
.kart-onizleme { width: 100%; max-width: 360px; border-radius: 14px; box-shadow: var(--shadow-2); }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .list-item:first-child { border-top: 0; }

/* ---------- alt sayfa, toast, konfeti ---------- */
.sheet-wrap { position: fixed; inset: 0; } .sheet-bg { position: absolute; inset: 0; background: rgba(10,12,30,.5); animation: fade var(--t) var(--ease); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 720px; margin: 0 auto; background: var(--bg); border-radius: 22px 22px 0 0; max-height: 88dvh; display: flex; flex-direction: column; animation: up var(--t-slow) var(--ease); will-change: transform; }
.sheet .grip { width: 40px; height: 4px; border-radius: 2px; margin: 10px auto 0; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 6px; } .sheet-body { overflow: auto; padding: 4px 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 30; max-width: 90vw; animation: up var(--t) var(--ease); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.sk { height: 14px; border-radius: 6px; margin: 10px 0; animation: sh 1.2s infinite; }
@keyframes sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.loading { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 420px) { .grid2, .grid3 { grid-template-columns: 1fr; } .big { font-size: 34px; } .badges, .rings { grid-template-columns: repeat(2, 1fr); } .vs .big { font-size: 32px; } .hbar { grid-template-columns: 70px 1fr 40px auto; } .status { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .view { padding-left: 24px; padding-right: 24px; } }
@media (prefers-reduced-motion: reduce) { *:not(.kt-fab-kart), *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .chart polyline { stroke-dasharray: none; } }

/* ---- v4 ek: zamanlayıcı dünyası, açık kartta ruh hali, oturum rengi, şema, formül, etiketler ---- */
.timer { position: relative; overflow: hidden; }
.timer .ringbox, .timer h2, .timer .eyebrow { position: relative; }
.card:not(.hero) .mood button { background: var(--soft); }
.card:not(.hero) .mood button.on { background: var(--tint); outline: 2px solid var(--accent); }
.status b span { font-family: var(--body); font-weight: 500; }
.friend.me b { background: var(--ink); color: var(--bg); }
.pill.warn { background: var(--tint); color: var(--accent-yazi); }
label.btn { cursor: pointer; }
.sema { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sema .kutu { border: 1.5px solid color-mix(in srgb, var(--world, var(--blue)) 55%, var(--line)); border-radius: var(--r-sm); padding: 10px 12px; background: color-mix(in srgb, var(--world, var(--blue)) 6%, var(--surface)); }
.sema .kutu b { display: block; font-family: var(--display); font-weight: 700; margin-bottom: 4px; }
.sema .kutu ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.sema .okk { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 14px; color: var(--muted); font-size: 13px; }
.sema .okk span { color: var(--world, var(--blue)); font-size: 18px; line-height: 1; }
.formul .f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.formul .f:first-child { border-top: 0; }
.formul code { font-family: var(--mono); font-size: 13.5px; background: var(--surface-2); padding: 6px 8px; border-radius: 8px; display: inline-block; word-break: break-word; }
.formul .f b { display: block; font-weight: 600; } .formul .tuzak { display: block; color: var(--accent); font-size: 13px; margin-top: 2px; }

/* ---- v5: deneme, X-Ray, tahmin, şık açıklamaları, DNA, +1 Net, Gelecek, Yolda, Survival, Wrapped ---- */
.secim { display: grid; gap: 8px; margin: 10px 0 12px; } .secim-k { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; text-align: left; margin: 0; padding: 14px 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.secim-k.on { border-color: var(--accent); background: var(--tint); } .secim-k .ik { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; color: var(--muted); } .secim-k.on .ik { background: var(--accent); color: var(--uzeri); }
.sinav-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; background: var(--bg); padding: 6px 0; z-index: 5; }
.sinav-alt { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; } .sinav-alt .btn { justify-content: center; } .sinav-alt .btn.on { background: var(--tint); color: var(--accent); }
.sq .opt.sel { border-color: var(--ink); background: var(--soft); } .sq .opt.sel b { background: var(--ink); color: var(--bg); }
.kagit { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 6px 0; } .kagit button { position: relative; aspect-ratio: 1; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.kagit button.dolu { background: var(--soft); color: var(--ink); border-color: transparent; } .kagit button.bayrak { border-color: var(--accent); } .kagit button i { position: absolute; right: 3px; bottom: 2px; font-size: 9px; font-style: normal; color: var(--accent); } .kagit button.ok { background: var(--tint-good, #16A36B22); color: var(--good); } .kagit button.no { background: var(--tint); color: var(--accent); }
.tahmin { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--tint-blue); color: var(--blue); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; margin: 6px 0; } .tahmin span { display: flex; gap: 6px; align-items: center; } .tahmin.hit { background: var(--tint); color: var(--accent); margin-bottom: 8px; } .tahmin.miss { background: var(--tint-good, #16A36B22); color: var(--good); margin-bottom: 8px; }
.sik-list { display: grid; gap: 6px; margin-top: 8px; } .sik { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; line-height: 1.45; } .sik b { width: 24px; height: 24px; border-radius: 7px; background: var(--soft); display: grid; place-items: center; font-size: 12px; } .sik.ok { background: var(--tint-good, #16A36B22); } .sik.ok b { background: var(--good); color: var(--uzeri); } .sik.no b { background: var(--accent); color: var(--uzeri); }
details.detay { margin-top: 6px; font-size: 14px; } details.detay summary { cursor: pointer; color: var(--blue); font-weight: 500; }
.combo { position: absolute; right: 12px; top: 12px; font-family: var(--display); font-weight: 800; color: var(--accent); animation: pop .5s var(--spring) both; } .quiz { position: relative; } @keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.kalip.roast { background: var(--hero); color: var(--uzeri); } .kalip.roast b { color: var(--gunes); }
/* X-Ray */
.xray { position: relative; overflow: hidden; } .xray .tarama { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); box-shadow: 0 0 16px var(--accent); animation: tarama 2.2s var(--ease) 1 both; pointer-events: none; opacity: 0; } @keyframes tarama { 0% { top: 0; opacity: 1; } 95% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.kat { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .kat:first-of-type { border-top: 0; } .kat .ki { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--uzeri); }
.kat .bar { height: 8px; border-radius: 4px; background: var(--soft); margin-top: 6px; overflow: hidden; } .kat .bar i { display: block; height: 100%; border-radius: 4px; transform-origin: left; animation: growX var(--t-slow) var(--ease) both; } @keyframes growX { from { transform: scaleX(0); } }
.kat .etki { font-family: var(--display); font-weight: 750; font-size: 18px; text-align: right; white-space: nowrap; } .kat .etki small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); font-weight: 400; }
.guven { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: var(--soft); color: var(--muted); } .guven.Yüksek { background: var(--tint-good, #16A36B22); color: var(--good); } .guven.Orta { background: var(--tint-blue); color: var(--blue); } .guven.Düşük { background: var(--tint-warn); color: var(--warn); }
.gizli { text-align: center; padding: 22px 16px; } .gizli .ort { filter: blur(6px); transition: filter .8s var(--ease); user-select: none; } .gizli.acik .ort { filter: none; } .gizli .asil { font-family: var(--display); font-weight: 800; font-size: 24px; margin: 6px 0; }
.killer { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .killer:first-of-type { border-top: 0; } .killer .no { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--accent); }
/* önce/sonra */
.onceSonra { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; } .onceSonra .v { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; } .onceSonra .ok-i { color: var(--muted); }
/* +1 Net */
.gunler { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0; } .gunler div { aspect-ratio: 1; border-radius: 12px; background: var(--soft); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--muted); position: relative; } .gunler div b { font-size: 16px; } .gunler div.tamam { background: var(--tint-good, #16A36B22); color: var(--good); } .gunler div.sira { background: var(--tint); color: var(--accent); outline: 2px solid var(--accent); } .gunler div.kilit { opacity: .55; }
.ilerleme { height: 12px; border-radius: 6px; background: var(--soft); overflow: hidden; } .ilerleme i { display: block; height: 100%; background: var(--grad); border-radius: 6px; transform-origin: left; animation: growX var(--t-slow) var(--ease) both; }
/* DNA */
.dna { text-align: center; } .dna .emoji { font-size: 64px; line-height: 1; margin: 6px 0; animation: pop .6s var(--spring) both; } .dna .ad { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; }
.dstat { display: grid; grid-template-columns: 90px 1fr 40px; gap: 10px; align-items: center; font-size: 13.5px; margin: 8px 0; } .dstat i { height: 10px; border-radius: 5px; background: var(--soft); overflow: hidden; display: block; } .dstat i b { display: block; height: 100%; background: var(--grad); transform-origin: left; animation: growX var(--t-slow) var(--ease) both; } .dstat span:last-child { font-family: var(--mono); text-align: right; }
/* gelecek */
.gelecek svg { width: 100%; height: auto; display: block; } .gelecek .A { fill: var(--muted); opacity: .18; } .gelecek .B { fill: var(--accent); opacity: .22; } .gelecek .lA { stroke: var(--muted); stroke-width: 2.4; fill: none; stroke-dasharray: 5 5; } .gelecek .lB { stroke: var(--accent); stroke-width: 2.8; fill: none; } .gelecek .lG { stroke: var(--ink); stroke-width: 2.4; fill: none; } .gelecek text { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
/* yolda */
.yolda-sure { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; } .yolda-sure button { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 14px 6px; font-family: var(--display); font-weight: 750; font-size: 18px; color: var(--ink); } .yolda-sure button small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10.5px; color: var(--muted); margin-top: 2px; } .yolda-sure button.on { border-color: var(--accent); background: var(--tint); }
.oyun-kart { min-height: 160px; display: grid; place-items: center; text-align: center; font-family: var(--display); font-weight: 700; font-size: 20px; padding: 18px; }
.oyun-sec { display: grid; gap: 8px; margin-top: 10px; } .oyun-sec button { text-align: left; padding: 12px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 15px; transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease); } .oyun-sec button:active { transform: scale(.97); } .oyun-sec button.ok { background: var(--tint-good, #16A36B22); border-color: var(--good); } .oyun-sec button.no { background: var(--tint); border-color: var(--accent); }
.bosluk { display: inline-block; min-width: 54px; border-bottom: 2px solid var(--accent); padding: 0 6px; color: var(--accent); }
.eslestir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .eslestir button { padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14px; min-height: 52px; } .eslestir button.sec { border-color: var(--blue); background: var(--tint-blue); } .eslestir button.bitti { opacity: .35; pointer-events: none; }
.yolda-oz { display: flex; gap: 8px; flex-wrap: wrap; } .yolda-oz .pill { background: var(--soft); }
/* survival */
.can { display: flex; gap: 4px; } .can i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); } .can i.yok { background: var(--line); }
.surv-skor { font-family: var(--display); font-weight: 800; font-size: 56px; letter-spacing: -.03em; line-height: 1; }
/* wrapped */
.wrap-sahne { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--hero); color: var(--uzeri); min-height: 420px; display: grid; place-items: center; text-align: center; padding: 28px 22px; box-shadow: var(--shadow-3); } .wrap-sahne .eyebrow { color: #B6BAD9; } .wrap-sahne .dev { font-family: var(--display); font-weight: 800; font-size: 54px; letter-spacing: -.03em; line-height: 1; margin: 8px 0; } .wrap-sahne .alt { color: #B6BAD9; max-width: 28ch; margin: 0 auto; }
.wrap-nokta { display: flex; gap: 4px; justify-content: center; margin: 10px 0; } .wrap-nokta i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); } .wrap-nokta i.on { background: var(--accent); }
.wrap-sahne.s1 { background: linear-gradient(160deg, #14162B, #2A1E4D); } .wrap-sahne.s2 { background: linear-gradient(160deg, #1B2A4A, #14162B); } .wrap-sahne.s3 { background: linear-gradient(160deg, #3A1B1F, #14162B); } .wrap-sahne.s4 { background: linear-gradient(160deg, #0F3B2E, #14162B); }
.duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 10px; } .duo .isim { font-family: var(--display); font-weight: 700; } .duo .alev { font-size: 34px; }
@media (max-width: 420px) { .kagit { grid-template-columns: repeat(6, 1fr); } .onceSonra .v { font-size: 24px; } .wrap-sahne .dev { font-size: 44px; } }

@keyframes floatUp { from { opacity: 0; transform: translateY(20px) scale(.8); } 20% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-50px); } }
/* zemin: düz beyaz değil; ışık ve çok düşük kontrastlı çengel dokusu, içerikle yarışmaz */
body { position: relative; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 520px at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), radial-gradient(700px 500px at -10% 30%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 60%), var(--bg); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("/pattern-dark.svg"); background-size: 260px; }
/* tipografi ölçeği */
.t-hero { font-family: var(--display); font-size: clamp(34px, 8vw, 44px); line-height: 1.02; letter-spacing: -.03em; }
.t-display { font-family: var(--display); font-size: 28px; line-height: 1.08; letter-spacing: -.02em; }
.t-stat { white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 9vw, 40px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.t-stat small { font-size: .5em; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.t-stat.up { color: var(--good); } .t-label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.t-cap { font-size: 12.5px; color: var(--muted); }
.t-body2 { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
/* yüzey sistemi: kenarlık yerine ton ve derinlik */
.card { border-color: var(--line-soft); }
.card.insight { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 62%); position: relative; overflow: hidden; }
.card.insight::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; }

.divider { height: 1px; background: var(--line-soft); margin: 18px 0; position: relative; }
.divider::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transform: translateX(-50%); }
/* düğme hiyerarşisi */
 .btn.secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 7; box-shadow: var(--shadow-3), var(--glow-accent); padding: 14px 22px; border-radius: 999px; }
/* gezinme: hareketli gösterge, ikon kalkışı */
.tabs { padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
.tabs a { position: relative; letter-spacing: .01em; transition: color var(--m-ui) var(--ease); background: transparent !important; }
.tabs a::before { content: ""; position: absolute; top: 2px; left: 50%; width: 22px; height: 3px; border-radius: 3px; background: var(--grad); transform: translateX(-50%) scaleX(0); transition: transform var(--m-ui) var(--spring); }
.tabs a.active::before { transform: translateX(-50%) scaleX(1); }
/* üst çubuk */
.top { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
/* grafikler: gradyanlı çizgi, vurgulu uç, kilometre taşı */
 .chart .uc { animation: nabiz 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes nabiz { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .35; } }
.chart .mil { fill: var(--surface); stroke: var(--good); stroke-width: 2.5; } .chart .mil-l { font-family: var(--mono); font-size: 10.5px; fill: var(--good); }
.chart .kirilma { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
/* radar (X-Ray, DNA) */
.radar { width: 100%; height: auto; display: block; } .radar .izgara { fill: none; stroke: var(--line); stroke-width: 1; } .radar .eksen { stroke: var(--line); stroke-width: 1; }
.radar .alan { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; transform-origin: center; transform-box: fill-box; animation: radarAc var(--m-hero) var(--spring) both; }
.radar .alan.mavi { fill: color-mix(in srgb, var(--blue) 22%, transparent); stroke: var(--blue); }
@keyframes radarAc { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.radar .dugum { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; } .radar .dugum.mavi { stroke: var(--blue); } .radar .dugum.zayif { stroke: var(--line); }
.radar .etiket { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); } .radar .deger { font-family: var(--display); font-weight: 700; font-size: 12px; fill: var(--ink); }
.radar .tarama { fill: url(#taramaG); transform-origin: center; transform-box: fill-box; animation: taramaDon 1.6s var(--ease) 1 both; opacity: 0; }
@keyframes taramaDon { 0% { transform: rotate(0deg); opacity: .9; } 90% { transform: rotate(360deg); opacity: .9; } 100% { transform: rotate(360deg); opacity: 0; } }
/* yay (arc) ilerleme */
.arc { display: inline-block; } .arc .iz { fill: none; stroke: var(--soft); stroke-width: 10; stroke-linecap: round; } .arc .dolu { fill: none; stroke: url(#arcG); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset var(--m-hero) var(--ease); }
.arc .arc-v { font-family: var(--display); font-weight: 800; font-size: 26px; fill: var(--ink); } .arc .arc-l { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
/* öngörü / anlatı kartı */
.anlati { display: grid; gap: 4px; } .anlati .baslik { font-family: var(--display); font-weight: 780; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; } .anlati .neden { color: var(--muted); font-size: 14.5px; }
.momentum { display: flex; align-items: end; gap: 3px; height: 26px; } .momentum i { flex: 1; border-radius: 3px 3px 1px 1px; background: rgba(255,255,255,.25); min-height: 3px; transform-origin: bottom; animation: growY var(--m-hero) var(--ease) both; } .momentum i.on { background: var(--uzeri); }
/* boş durum: tarama yer tutucu */
.bos-tarama { display: grid; place-items: center; gap: 12px; padding: 22px 16px; text-align: center; background: var(--surface-2); border-radius: var(--r); border: 1px dashed var(--line); }
.bos-tarama .halka { border-radius: 50%; position: relative; place-items: center; color: var(--muted); }
.bos-tarama .halka::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); animation: spin 2.4s linear infinite; opacity: .7; }
/* durum şeridi (dashboard) */
.status div { background: var(--surface-1); box-shadow: var(--shadow-1); border: 1px solid var(--line-soft); }
/* DNA arketip zemini */
.dna { position: relative; overflow: hidden; } .dna-bg { position: absolute; inset: 0; opacity: .14; pointer-events: none; background-repeat: repeat; background-size: 180px; }
.dna .rozet { width: 132px; height: 132px; border-radius: 50%; margin: 6px auto; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 30%, var(--surface)), var(--surface) 70%); box-shadow: var(--glow-accent), inset 0 0 0 6px var(--surface), inset 0 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent); font-size: 64px; line-height: 1; animation: pop var(--m-hero) var(--spring) both; position: relative; z-index: 1; }
/* wrapped: yay ve nokta dizisi */
.wrap-sahne .arc .iz { stroke: rgba(255,255,255,.14); } .wrap-sahne .arc .arc-v { fill: var(--uzeri); } .wrap-sahne .arc .arc-l { fill: #B6BAD9; }
.wrap-sahne::before { content: ""; position: absolute; inset: 0; background-image: url("/pattern-dark.svg"); background-size: 220px; opacity: .12; pointer-events: none; }
/* skeleton ışıltı */
.sk { position: relative; overflow: hidden; } .sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: parla 1.4s var(--ease) infinite; }
@keyframes parla { to { transform: translateX(100%); } }
:root[data-tema="koyu"] .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
@media (max-width: 380px) { .t-stat { font-size: 34px; } .anlati .baslik { font-size: 21px; } .tabs a { font-size: 10px; } }
@media (min-width: 900px) { .view { padding-left: 32px; padding-right: 32px; } #app { max-width: 780px; } .tabs { max-width: 780px; border-radius: 18px 18px 0 0; } }
@media (prefers-reduced-motion: reduce) { .radar .alan, .radar .tarama, .momentum i, .dna .rozet { animation: none !important; opacity: 1; transform: none; } .chart .uc { animation: none; } }

/* deneme bölüm ilerleme çubuğu */
.bolum-bar { display: flex; gap: 4px; margin: 2px 0 10px; } .bolum-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; display: block; } .bolum-bar i b { display: block; height: 100%; background: var(--grad); transition: width var(--m-ui) var(--ease); } .bolum-bar i.on { outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.card.hero .arc .iz { stroke: rgba(255,255,255,.14); } .card.hero .arc .arc-v { fill: var(--uzeri); } /* enerji modları */
:root[data-mod="focus"] body::after { opacity: 0; } :root[data-mod="focus"] body::before { background: var(--bg); } :root[data-mod="focus"] .world-bg { display: none; } :root[data-mod="focus"] .card.world { background: var(--surface); }
:root[data-mod="intel"] body::before { background: radial-gradient(900px 520px at 12% -10%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 60%), var(--bg); }
:root[data-mod="compete"] body::before { background: radial-gradient(900px 520px at 85% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--bg); }
:root[data-mod="celebrate"] body::before { background: radial-gradient(900px 600px at 50% -10%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 60%), var(--bg); }
/* moda göre rota geçişleri */
:root[data-mod="focus"]::view-transition-old(root) { animation: vt-out var(--motion-fast) var(--ease-exit) both; } :root[data-mod="focus"]::view-transition-new(root) { animation: vt-fade var(--motion-fast) var(--ease-enter) both; }
:root[data-mod="intel"]::view-transition-new(root) { animation: vt-scan var(--motion-structural) var(--ease-snap) both; }
:root[data-mod="compete"]::view-transition-new(root) { animation: vt-slide var(--motion-standard) var(--ease-enter) both; }
:root[data-mod="celebrate"]::view-transition-new(root) { animation: vt-cine var(--motion-reveal) var(--ease-enter) both; }
@keyframes vt-fade { from { opacity: 0; } } @keyframes vt-scan { from { clip-path: inset(0 0 100% 0); opacity: .6; } to { clip-path: inset(0); opacity: 1; } }
@keyframes vt-slide { from { opacity: 0; transform: translateX(18px); } } @keyframes vt-cine { from { opacity: 0; transform: scale(.965); } }
/* cihaz katmanı: azaltılmış */
:root[data-tier="reduced"] .top, :root[data-tier="reduced"] .tabs { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
:root[data-tier="reduced"] body::after, :root[data-tier="reduced"] .card.hero::after { display: none; }
/* performans sinyali */
.sinyal { display: block; width: 100%; height: auto; overflow: visible; } .sinyal .yol { fill: none; stroke: url(#sinyalG); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: sinyalCiz var(--motion-reveal) var(--ease-flow) both; }
.sinyal .yol.hizli { animation-duration: var(--motion-structural); } @keyframes sinyalCiz { to { stroke-dashoffset: 0; } }
.sinyal .dugum { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; opacity: 0; animation: dugumAc var(--motion-fast) var(--ease-snap) both; } .sinyal .dugum.zayif { stroke: var(--accent); fill: var(--accent); } .sinyal .dugum.iyi { stroke: var(--good); }
@keyframes dugumAc { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } .sinyal .dugum { transform-origin: center; transform-box: fill-box; }
.sinyal .uc { fill: var(--good); animation: nabiz 2.2s ease-in-out infinite; } .sinyal .etiket { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.hero .sinyal-arka { position: absolute; right: -8px; bottom: -6px; width: 62%; opacity: .55; pointer-events: none; z-index: 0; } .hero .sinyal-arka .yol { stroke: url(#sinyalG); } .hero .sinyal-arka .dugum { fill: #1A1E40; stroke: #FF8A3D; } .hero .sinyal-arka .uc { fill: var(--nane); }
.hero-sayi { font-family: var(--display); font-weight: 800; font-size: clamp(52px, 15vw, 72px); line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 6px 0 2px; color: var(--uzeri); } .hero-sayi small { font-size: .32em; font-weight: 600; color: #B6BAD9; letter-spacing: 0; margin-left: 6px; }
.hero-alt { color: #B6BAD9; font-size: 15px; } .cta .btn.buyuk { font-family: var(--display); font-weight: 800; padding: 14px 22px; }
/* X-Ray sahnesi: olaylar → örüntü → etiket */
.xray-sahne { position: relative; } .xray-sahne > svg { width: 100%; height: auto; display: block; }
.xray-sahne .olay { fill: var(--line); opacity: 0; animation: olayAc var(--motion-fast) var(--ease-snap) both; } .xray-sahne .olay.yanlis { fill: var(--accent); } .xray-sahne .olay.solgun { animation: olaySol var(--motion-standard) var(--ease-exit) both; }
@keyframes olayAc { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes olaySol { to { opacity: .18; } } .xray-sahne .olay { transform-origin: center; transform-box: fill-box; }
.xray-sahne .bag { stroke: var(--accent); opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; animation: bagCiz var(--motion-structural) var(--ease-flow) both; } @keyframes bagCiz { from { opacity: 0; stroke-dashoffset: 300; } 20% { opacity: .55; } to { opacity: .55; stroke-dashoffset: 0; } }
.xray-sahne .kat { opacity: 0; animation: olayAc var(--motion-standard) var(--ease-enter) both; } .xray-sahne .kat circle { stroke-width: 2; } .xray-sahne .kat.baskin circle { stroke-width: 3; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)); } .xray-sahne .kat text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); text-anchor: middle; } .xray-sahne .kat.baskin text { fill: var(--ink); font-weight: 600; }
.xray-etiket { text-align: center; margin: 4px 0 0; opacity: 0; animation: olayAc var(--motion-reveal) var(--ease-enter) both; } .xray-etiket .t-label { color: var(--accent-yazi); } .xray-etiket .ad { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 9vw, 40px); letter-spacing: -.03em; text-transform: uppercase; line-height: 1; }
.xray-kanit { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; } .xray-kanit .pill { background: var(--surface-2); }
/* onarım sinyali */
.onarim-sinyal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; } .onarim-sinyal .t-label { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .sinyal .yol, .sinyal .dugum, .xray-sahne .olay, .xray-sahne .bag, .xray-sahne .kat, .xray-etiket { animation: none !important; opacity: 1; stroke-dashoffset: 0; transform: none; } .xray-sahne .olay.solgun { opacity: .18; } }

/* X-Ray sahnesi: inceleme 1. tur */
.xray-sahne .yolcizgi { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 900; stroke-dashoffset: 900; animation: sinyalCiz var(--motion-reveal) var(--ease-flow) both; }
.xray-sahne .zaman { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); opacity: .7; }
.xray-sahne .bag { stroke-width: 1; } .xray-sahne .kat circle { fill: var(--soft); stroke: transparent; } .xray-sahne .kat.baskin circle { fill: var(--surface); stroke: var(--accent); }
.xray-etiket .kanit { font-size: 14.5px; color: var(--muted); margin-top: 6px; } .xray-etiket .etki { font-family: var(--display); font-weight: 700; font-size: 18px; margin-top: 2px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .xray-sahne .yolcizgi { animation: none; stroke-dashoffset: 0; } }

/* ===================== v8: Figma faz 1 bulguları ===================== */
.btn:active, .chip:active, .tab:active { transition-duration: var(--motion-instant); }
.xray .tarama { animation-duration: calc(var(--motion-cinematic) * 2); }
.radar .tarama { animation-duration: var(--motion-cinematic); }
@media (prefers-color-scheme: dark) {  }
/* tipografi: Outfit başlık, Manrope gövde; 780 gibi ara ağırlıklar 700/800'e yuvarlanır */
  /* zemin: tek sıcak ışık yerine iki soğuk ışık, doku daha düşük */
body::before { background: radial-gradient(900px 520px at 88% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), radial-gradient(700px 420px at -10% 10%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 60%), var(--bg); }
/* düğmeler: gradyan yerine düz renk + 3 px kenar; basınca çöker */
@media (hover: hover) {  }
   /* kartlar: ince kenar + 3 px alt kenar; gölge yok */
.card.insight { background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 9%, var(--surface)), var(--surface) 62%); }
.card.hero .muted { color: #A9B6C6; } .card.hero .ring-sub { fill: #A9B6C6; } @media (hover: hover) {  }
/* çipler, sekmeler, girişler */
.chip:active { box-shadow: none; }
.chips.multi .chip.on { box-shadow: 0 2px 0 var(--blue-k); }
  .pill { font-size: 12.5px; }  .iconbtn:active { box-shadow: none; }
/* alt gezinme: seçili sekme mavi, 2 px kenar */
 /* durum renkleri ve grafik vurguları yeni palete */
.t-stat.down { color: var(--bad); }
:root[data-mod="compete"] body::before { background: radial-gradient(900px 520px at 85% -10%, color-mix(in srgb, var(--alev) 16%, transparent), transparent 60%), var(--bg); }
:root[data-mod="celebrate"] body::before { background: radial-gradient(900px 600px at 50% -10%, color-mix(in srgb, var(--gunes) 18%, transparent), transparent 60%), var(--bg); }
@media (prefers-reduced-motion: reduce) { .btn, .card.tap, .chip, .iconbtn { transition: none; } }

/* v9 ek: büyük harf CTA yok, stat etiketleri gövde yazısıyla */
.stat span, .stat-lbl { font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none; }

.status span { font-family: var(--body); font-weight: 600; font-size: 11.5px; letter-spacing: 0; }
@media (prefers-color-scheme: dark) {  }
 .t-stat.down, .kalip .etki { color: var(--bad-d); }
.card.hero .muted, .hero-alt { color: #B4C0CE; }

/* uygulama hissi: seçilemez arayüz, iOS kaydırma, dokunma hedefleri */
.tabs, .top, .btn, .chip, .subtabs, .seg, .iconbtn, .pill, .stat, .status { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.view, .subtabs, .board-wrap { -webkit-overflow-scrolling: touch; }
.subtabs { overscroll-behavior-x: contain; }
.tabs a { justify-content: center; }
 .opt, .dot { min-height: 44px; }
/* başlık çubuğu: kaydırınca ayrılsın */
.top { border-bottom: 1px solid transparent; transition: border-color var(--m-ui) var(--ease); }
/* yatay mod ve büyük telefon: içerik dar kalsın, alt çubuk incelsin */
@media (orientation: landscape) and (max-height: 480px) {
  .tabs a { min-height: 44px; font-size: 10.5px; } .view { padding-bottom: 88px; }
}
@media (min-width: 768px) { .view { padding-left: 24px; padding-right: 24px; } }

/* ruh hali: çizgi yüz simgeleri (emoji değil) */
.mood button { display: grid; place-items: center; color: var(--muted); font-size: 0; }
.card:not(.hero) .mood button.on { color: var(--accent); }
.card.hero .mood button { color: #C3CDDA; } .card.hero .mood button.on { color: var(--uzeri); }
.gunler div b { display: inline-flex; align-items: center; justify-content: center; }
.gunler div.tamam b { color: var(--good); } .gunler div.sira b { color: var(--alev); }
.duo .alev { display: inline-flex; align-items: center; gap: 4px; }
@media (prefers-color-scheme: dark) {  }
/* zemin: sakin, tek yönlü ışık */
body::before { background: radial-gradient(900px 520px at 88% -12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%), var(--bg); }
/* tipografi */
  h3 { letter-spacing: -.01em; }
  .t-hero { font-weight: 800; } .t-display { font-weight: 700; } .t-stat, .big, .hero-sayi { font-weight: 800; letter-spacing: -.025em; }
/* düğmeler: dolu mavi, yumuşak gölge, 1 px iniş */
.btn { font-size: 15.5px; transform: none; }
  .btn.dark:active { box-shadow: 0 1px 2px rgba(16,24,40,.06); }
 .btn.success { background: var(--good); color: var(--uzeri); box-shadow: var(--shadow-1); }
/* kartlar: beyaz, 1 px kenar, yayılı gölge */
.card { background: var(--surface); }
.card.insight { border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 7%, var(--surface)), var(--surface) 60%); }
.card.hero {
  /* p129: hero tek kural — önce dört ayrı kural vardı ve background-size
     listesi katman sayısından kısa olduğu için lacivert degrade döşeniyordu
     (ölçülen: "240px auto, auto, 240px auto"). Artık her katmanın boyutu ve
     tekrarı açıkça yazılı; ek yeri yok. */
  position: relative; overflow: hidden; color: var(--uzeri);
  background: var(--hero);
  background-image:
    url("/pattern-dark.svg"),
    radial-gradient(560px 320px at 100% -8%, rgba(79,141,247,.30), transparent 72%),
    radial-gradient(420px 300px at -5% 108%, rgba(124,92,255,.15), transparent 72%),
    var(--hero);
  background-size: 240px 240px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 100% 0, 0 100%, 0 0;
}
.card.hero::after { background: radial-gradient(circle, rgba(79,141,247,.35), transparent 65%); }
.card.hero .muted, .card.hero .ring-sub, .hero-alt { color: #A8B4CC; } .card.hero .arc .arc-l { fill: #A8B4CC; }
@media (hover: hover) {  }
/* ikon karosu: referansın imzası */
.karo { width: 38px; height: 38px; display: grid; place-items: center; flex: none; background: var(--soft); color: var(--muted); }
  :root[data-tema="koyu"] .tile.yesil, :root[data-tema="koyu"] .tile.kirmizi, :root[data-tema="koyu"] .karo.amber { color: inherit; }
/* çipler, segment, girişler */
.chip { border-radius: 999px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--uzeri); box-shadow: none; }
.chips.multi .chip.on { background: var(--accent); border-color: var(--accent); }
.subtabs button { border-radius: 999px; }
.seg { border-radius: 999px; }
.seg button { border-radius: 999px; }
.pill { font-family: var(--body); border-radius: 999px; }
/* alt gezinme: arka plan yok, mavi aktif */
.tabs a.active { background: transparent; box-shadow: none; }
/* istatistik karoları ve ilerleme */
.stat div, .status div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: none; }
.stat b, .status b { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.stat span, .status span { font-family: var(--body); font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
progress, .bar, .prog { border-radius: 999px; }
/* segment/hap CTA'lar ve odak halkası */
.btn:focus-visible, .chip:focus-visible, .tabs a:focus-visible, .opt:focus-visible, .iconbtn:focus-visible, .dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* v11 ek: liste satırlarında ikon karosu ritmi (referansın imzası).
   Markup değişmeden: .session'ın sol sütunu tinted bir karoya dönüşür. */
.session { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 10px 0; border-top-color: var(--line); }
.session .min { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--world, var(--accent)) 12%, var(--surface));
  display: grid; place-items: center; text-align: center; font-family: var(--body); font-weight: 700; font-size: 11.5px; line-height: 1.1; letter-spacing: -.01em; }
.session .k { font-weight: 600; letter-spacing: -.01em; } .session .h { font-weight: 400; }
.session .tag { font-family: var(--body); font-weight: 600; font-size: 11.5px; border-radius: 999px; padding: 4px 10px; background: var(--soft); color: var(--muted); }
.session .tag.zayif { background: var(--tint-bad); color: var(--bad-d); }
.session.done .min { background: var(--tint-good); color: var(--good-d); }
/* boş durum kartları: referanstaki ferah his */
.spot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
/* v11 düzeltme 2: alt çubuk yarı saydamdı, etiket kontrastı zemine göre değişiyordu (4.2:1'e düşüyordu).
   Referanstaki gibi tam opak beyaz bar: kontrast artık ölçülebilir ve sabit (5.0:1 / 6.9:1). */
.tabs { backdrop-filter: none; -webkit-backdrop-filter: none; }
.top { backdrop-filter: none; -webkit-backdrop-filter: none; }
.tabs a { color: var(--nav-idle) !important; }
.tabs a.active { color: var(--nav-active) !important; }

/* ===================== v12: konu haritası bitmiş hâli =====================
   Etiketler iki satır, düğümler durum ikonlu, kat edilen yol renkli, giriş sırayla. */
.mapwrap { margin: 12px 0 0; overflow: visible; }
.map { width: 100%; height: auto; display: block; overflow: visible; }
.map .road { stroke: var(--soft); stroke-width: 20; }
.map .road2 { stroke: var(--surface); stroke-width: 3; stroke-dasharray: 8 10; }
.map .roadlit { stroke: var(--accent); stroke-width: 20; fill: none; stroke-linejoin: round; stroke-linecap: round; opacity: .18; animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.map .nl { font-family: var(--body); font-weight: 600; fill: var(--ink); letter-spacing: -.01em; }
.map .nv { font-family: var(--body); font-size: 11px; font-weight: 700; fill: var(--uzeri); }
.map .node .dot { fill: var(--surface); stroke: var(--line); stroke-width: 2.5; transition: transform var(--m-ui) var(--ease); }
.map .node.bos .dot { fill: var(--surface); stroke: var(--line); }
.map .node.basladim .dot { fill: var(--surface); stroke: var(--alev); stroke-width: 3; }
.map .node.zayif .dot { fill: var(--bad); stroke: var(--surface); stroke-width: 3; }
.map .node.orta .dot { fill: var(--accent-2); stroke: var(--surface); stroke-width: 3; }
.map .node.bitti .dot { fill: var(--good); stroke: var(--surface); stroke-width: 3; }
.map .node.gorev .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.map .node.gorev .nl { fill: var(--accent); font-weight: 700; }
.map .node .halo { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.map .node.gorev .halo { animation: pulse 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.map .node { cursor: pointer; opacity: 0; animation: nodeIn var(--motion-structural) var(--ease-enter) both; animation-delay: var(--d, 0ms); }
@keyframes nodeIn { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
.map .node { transform-origin: center; transform-box: fill-box; }
@media (hover: hover) { .map a:hover .dot { transform: scale(1.08); } }
.map a:focus-visible .dot { stroke: var(--accent); stroke-width: 4; }
.map .bayrak { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .map .node { animation: none; opacity: 1; } .map .node.gorev .halo { animation: none; } }                       /* koyu tint üstünde 5.59:1 */
@media (prefers-color-scheme: dark) {  }
/* hata kutusu artık maviye boyanıyordu (--tint mavi oldu); hata kırmızı tintte ve kırmızı ikonla okunur */
.err { background: var(--tint-bad); border: 1px solid color-mix(in srgb, var(--bad) 26%, transparent); }
.err > .ic, .err svg.ic { color: var(--bad-d); }
.err b { color: var(--ink); }
.t-cap, .small { font-size: 13px; }
.map .nl { font-size: 12px; }
.stat span, .status span { font-size: 12px; }
.week span, .hafta div, .board td, .board th { font-size: 12px; }
/* dokunma hedefleri */
.avatar { position: relative; }
.avatar::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.iconbtn { width: 44px; height: 44px; }
.brand { min-height: 44px; align-items: center; }
.seg button { min-height: 40px; padding: 0 14px; }
.subtabs button { min-height: 40px; }
.chip { min-height: 40px; } .chip.sm { min-height: 32px; }
a.tag, .tag { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; }
.session .tag { min-height: 28px; }
/* vurgu kartı üstündeki ikincil yazı: yeni lacivertle 6.7:1 */
.card.hero .muted, .card.hero .ring-sub, .hero-alt, .card.hero .t-cap, .card.hero .small { color: #A8B4CC; }
/* v13 ek: hap biçimli bağlantılar da dokunulabilir yükseklikte (32 px; WCAG 2.2 tabanı 24).
   Cümle içi metin bağlantıları kural dışıdır. */
a.pill, .pill { min-height: 32px; display: inline-flex; align-items: center; }

/* ===================== v14: ücretsiz cila — grafik, dolum, sıralı giriş, boş durum =====================*/
/* grafik: yumuşak eğri çizilir, alan sonra belirir, uçtaki rozet en son gelir */
.chart .cizgi { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 1.1s var(--ease-enter) forwards; }
.chart .area { opacity: 0; animation: fadeIn .6s var(--ease) .7s forwards; }
.chart .grid { stroke: var(--line); stroke-dasharray: 3 5; }
.chart .tick { font-family: var(--body); font-size: 11px; font-weight: 500; fill: var(--muted); }
.chart .rz { fill: var(--surface); stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 2px 6px rgba(16,24,40,.14)); }
.chart .rz-t { font-family: var(--display); font-weight: 700; font-size: 12px; fill: var(--ink); }
.chart .rz-d { font-family: var(--body); font-weight: 700; font-size: 11px; } .chart .rz-d.up { fill: var(--good-d); } .chart .rz-d.down { fill: var(--bad-d); }
.chart .rozet { opacity: 0; animation: pop var(--t-slow) var(--spring) 1s forwards; transform-box: fill-box; transform-origin: center; }
.chart circle { animation-delay: .8s; }
@keyframes fadeIn { to { opacity: 1; } }
/* halka: sıfırdan değere dolar */
.ring-fg { animation: ringFill .9s var(--ease-enter) both; }
@keyframes ringFill { from { stroke-dashoffset: var(--c, 1000); } }
/* sıralı giriş: her rota çiziminde üst düzey kartlar ve başlıklar 45 ms arayla yükselir */
.view > .card, .view > .grid2, .view > .grid3, .view > .status, .view > .stat, .view > h1, .view > .row, .view > .subtabs, .view > .tabs-sub, .view > .seg, .view > .mapwrap, .view > .spot, .view > .empty { animation: rise var(--motion-structural) var(--ease-enter) both; }
.view > *:nth-child(2) { animation-delay: 40ms; } .view > *:nth-child(3) { animation-delay: 80ms; } .view > *:nth-child(4) { animation-delay: 120ms; } .view > *:nth-child(5) { animation-delay: 160ms; }
.view > *:nth-child(6) { animation-delay: 200ms; } .view > *:nth-child(7) { animation-delay: 240ms; } .view > *:nth-child(8) { animation-delay: 280ms; } .view > *:nth-child(n+9) { animation-delay: 320ms; }
/* seri alevi nefes alır; düğme ikonu basınca hafif küçülür */
.ud-alev .ic { animation: alevYan var(--motion-nefes) ease-in-out infinite; transform-origin: 50% 90%; }   /* io78 → io93: kapsül alevi */
@keyframes alev { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) translateY(-.5px); } }
/* boş durum: çizim + metin + eylem */
.empty { display: grid; justify-items: center; gap: 8px; padding: 22px 16px 18px; text-align: center; color: var(--muted); font-size: 14px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r); }
.empty .ill { opacity: .95; } .empty .ill svg { width: 100%; height: auto; display: block; }
.empty .m { max-width: 30ch; line-height: 1.45; color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .chart .cizgi, .chart .area, .chart .rozet, .ring-fg, .view > *, .ud-alev .ic { animation: none !important; opacity: 1; stroke-dashoffset: 0; } }

/* ===================== v15: mini oyunlar — Yıldırım, Eşleştir, Doğru mu? ===================== */
.mg { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--hero); color: var(--uzeri); min-height: min(78vh, 720px); display: flex; flex-direction: column; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-2); }
.mg::before { content: ""; position: absolute; inset: 0; background-image: url("/pattern-dark.svg"); background-size: 240px; opacity: .12; pointer-events: none; }
.mg::after { content: ""; position: absolute; inset: -40%; background: radial-gradient(closest-side, rgba(79,141,247,.22), transparent 70%); animation: mgIsik 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes mgIsik { from { transform: translate(-12%, -8%) scale(1); } to { transform: translate(12%, 10%) scale(1.15); } }
.mg > * { position: relative; z-index: 1; }
.mg-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-ust .iconbtn { background: rgba(255,255,255,.12); border-color: transparent; color: var(--uzeri); }
.mg-orta { flex: 1; justify-content: center; } .mg-sag { display: flex; align-items: center; gap: 8px; }
.mg-sayac { font-family: var(--display); font-weight: 700; font-size: 15px; background: rgba(255,255,255,.12); padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.mg-puan { font-family: var(--display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.mg-govde { flex: 1; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 8px 4px; }
.mg-hud { place-items: center; }
.mg-say { font-weight: 800; }
.mg-yuz { position: absolute; font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--uzeri); text-shadow: 0 4px 16px rgba(0,0,0,.4); animation: floatUp .9s var(--ease) both; }
.mg-yuz.iyi { color: #7CE3A6; } .mg-yuz.kotu { color: #FFB4BA; } .mg-yuz.seri { color: #FFD166; font-size: 20px; margin-top: 44px; } .mg-yuz.uzun { font-size: 16px; max-width: 80%; text-align: center; }
.mg.sars { animation: sars .4s var(--ease); } @keyframes sars { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mg-sonuc { margin-top: 0; }
.mg-satir { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .mg-satir:first-of-type { border-top: 0; }
.mg-satir b { display: block; font-size: 14.5px; } .mg-p { font-family: var(--display); font-weight: 700; color: var(--good-d); }
/* Yıldırım */
.yl-halka { position: relative; width: 116px; height: 116px; } .yl-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.yl-halka .iz { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 9; } .yl-halka .dolu { fill: none; stroke: var(--accent-2); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .3s; } .yl-halka .dolu.az { stroke: #F5707A; }
.yl-sn { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 36px; font-variant-numeric: tabular-nums; }
.yl-seri { display: inline-flex; align-items: center; gap: 6px; background: rgba(247,163,37,.18); color: #FFD166; font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: 13px; animation: pop .3s var(--spring) both; }
.yl-soru { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 6vw, 30px); line-height: 1.15; max-width: 22ch; text-wrap: balance; } .yl-soru.pop { animation: pop .35s var(--spring) both; }
.yl-konu { color: #A8B4CC; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.yl-siklar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yl-sik { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 16px; color: var(--uzeri); font: 600 15px/1.25 var(--body); text-align: left; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.28); transition: transform 90ms var(--ease-snap), box-shadow 90ms, filter .2s, opacity .3s; animation: rise .4s var(--ease-enter) backwards; animation-delay: var(--d, 0ms); }
.yl-sik svg { width: 22px; height: 22px; flex: none; fill: rgba(255,255,255,.9); } .yl-sik span { flex: 1; }
.yl-sik.s0 { background: var(--mg-k0); } .yl-sik.s1 { background: var(--mg-k1); } .yl-sik.s2 { background: var(--mg-k2); } .yl-sik.s3 { background: var(--mg-k3); }   /* io326: sabit oyun paleti (tema renkleri koyu temada soluyordu) */
.yl-sik:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.28); }
.yl-sik.dogru { background: var(--mg-dogru) !important; box-shadow: 0 0 0 4px rgba(22,163,74,.35), 0 4px 0 rgba(0,0,0,.28); animation: pop .35s var(--spring); }
.yl-sik.yanlis { background: var(--mg-yanlis) !important; animation: sars .4s var(--ease); } .yl-sik.sonuk { opacity: .35; filter: saturate(.4); }
/* Eşleştir */
.es-bilgi { text-align: center; color: #A8B4CC; font-size: 14px; margin: 10px 0 6px; } .es-bilgi b { color: var(--uzeri); }
.es-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; align-content: center; perspective: 900px; }
/* io147: küçük iPhone (320×568, iPhone SE 1. nesil — iOS 15 hedefinde destekli) dördüncü kart sırası ekranın altında kalıyordu
   (oyunun ortasında kaydırmak gerekiyordu). Izgara genişliği ekran yüksekliğine göre sınırlanır: 4 sıra 3:4 kart + 3 boşluk her zaman sığar.
   genişlik = 0,5625 × (kullanılabilir yükseklik − 30) + 20; üst çubuk + bilgi satırı + dolgu ≈ 145 px, çentik/ev çubuğu ayrıca düşülür. */
.es-izgara { width: min(100%, calc((100dvh - 145px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 30px) * 0.5625 + 20px)); margin-inline: auto; }
.es-kart { aspect-ratio: 3 / 4; border: 0; background: transparent; padding: 0; cursor: pointer; animation: rise .4s var(--ease-enter) backwards; animation-delay: var(--d, 0ms); }
.es-ic { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s var(--ease-enter); }
.es-kart.acik .es-ic, .es-kart.eslesti .es-ic { transform: rotateY(180deg); }
.es-arka, .es-on { position: absolute; inset: 0; border-radius: 14px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.es-arka { background: linear-gradient(150deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 0 var(--accent-k); } .es-arka svg { width: 34px; height: 34px; opacity: .9; }
.es-on { background: var(--uzeri); color: var(--ink); transform: rotateY(180deg); font-family: var(--display); font-weight: 800; font-size: clamp(14px, 4.2vw, 18px); padding: 6px; text-align: center; line-height: 1.15; word-break: break-word; box-shadow: 0 4px 0 #D8DEE8; }
.es-kart.eslesti .es-on { background: var(--tint-good); color: var(--good-d); box-shadow: 0 0 0 3px rgba(22,163,74,.35); } .es-kart.eslesti { animation: pop .4s var(--spring); }
.es-kart.hata .es-on { background: var(--tint-bad); color: var(--bad-d); animation: sars .4s var(--ease); }
/* Doğru mu? */
.dm-cubuk { width: min(60vw, 240px); height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; } .dm-cubuk i { display: block; height: 100%; width: 100%; background: var(--accent-2); border-radius: 999px; transition: width .1s linear, background .3s; } .dm-cubuk i.az { background: #F5707A; }
.dm-sahne { position: relative; flex: 1; min-height: 260px; display: grid; place-items: center; touch-action: pan-y; }
.dm-kart { position: absolute; width: min(86%, 340px); aspect-ratio: 4 / 3; background: var(--uzeri); color: var(--ink); border-radius: 22px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 22px; text-align: center; box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); transform: translateY(calc(var(--z) * 10px)) scale(calc(1 - var(--z) * .05)); z-index: calc(10 - var(--z)); transition: transform .28s var(--ease-enter), opacity .28s; user-select: none; cursor: grab; }
.dm-kart.tut { transition: none; cursor: grabbing; } .dm-kart.git { opacity: 0; transition: transform .3s var(--ease-exit), opacity .3s; }
.dm-konu { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dm-metin { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 5.6vw, 28px); line-height: 1.15; }
.dm-etiket { position: absolute; top: 14px; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .06em; padding: 4px 10px; border: 3px solid; border-radius: 10px; opacity: 0; transform: rotate(-12deg); }
.dm-etiket.ok { left: 14px; color: var(--good); border-color: var(--good); } .dm-etiket.no { right: 14px; color: #C2323F; border-color: #C2323F; transform: rotate(12deg); }
.dm-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border: 0; border-radius: 16px; color: var(--uzeri); font: 700 16px var(--body); cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.28); transition: transform 90ms var(--ease-snap), box-shadow 90ms; }
.dm-btn:active { transform: translateY(4px); box-shadow: none; } .dm-btn.dogru { background: var(--mg-dogru); } .dm-btn.yanlis { background: var(--mg-yanlis); }
.dm-ipucu { text-align: center; color: #A8B4CC; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .mg::after, .mg-say, .mg-yuz, .yl-sik, .es-kart, .mg.sars { animation: none !important; opacity: 1; } .es-ic { transition: none; } }


/* ===================== v18: Profil ekranı — satır düzeni, kimlik kartı, rozet ızgarası ===================== */
.pf-kimlik { padding: 16px 18px; }
.pf-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--uzeri); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 22px; flex: none; }
.pf-satir { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.pf-satir:first-child { border-top: 0; padding-top: 2px; } .pf-satir:last-child { padding-bottom: 2px; }
.pf-satir b { display: block; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.pf-satir span:not(.karo) { display: block; font-size: 15px; color: var(--ink); line-height: 1.35; margin-top: 1px; overflow-wrap: anywhere; }
.card.ayar .row.between { gap: 14px; } .card.ayar .muted.small { max-width: 34ch; }
.badges { gap: 10px; }
.badge { padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); display: grid; justify-items: center; gap: 6px; line-height: 1.2; }
.badge svg { width: 30px; height: 30px; opacity: .35; filter: grayscale(1); transition: opacity var(--m-ui) var(--ease), filter var(--m-ui) var(--ease); }
.badge.on { border-color: transparent; background: var(--tint-warn); color: var(--alev-d); font-weight: 600; }
.badge.on svg { opacity: 1; filter: none; }
.danger-text { color: var(--bad-d); }
@media (max-width: 420px) { .badges { grid-template-columns: repeat(3, 1fr); } .card.ayar .row.between { flex-wrap: wrap; } }



/* ================= v20 · gerçek illüstrasyonlar, maskot yok =================
   Turuncu üçgen maskot kaldırıldı. Boş durumlarda ve karşılamada art/ altındaki
   WebP illüstrasyonlar var; hero kartlar kendi ışık motifiyle yetiniyor. */
.mascot, .hero-ok { display: none !important; }

.cizim { display: block; height: auto; max-width: 100%; }
.empty .ill .cizim { width: 100%; }
.spot { display: grid; justify-items: center; text-align: center; padding: 18px 16px 16px; color: var(--muted); font-size: 14px; }
.spot .cizim { width: 190px; max-width: 62%; }
.spot span { max-width: 34ch; line-height: 1.45; color: var(--ink); font-weight: 500; }

.welcome .welcome-ill { width: 96px; }
@media (max-width: 380px) { .welcome { grid-template-columns: 76px 1fr; } .welcome .welcome-ill { width: 76px; } }

/* X-Ray "veri yetersiz": halka yerine illüstrasyon, hizalama korunur */
.bos-tarama .halka { width: 120px; height: auto; background: none; border: 0; box-shadow: none; display: block; flex: none; }
.bos-tarama .halka .cizim { width: 100%; }

/* Koyu temada saydam illüstrasyonlar sıcak kâğıt tonunda: hafifçe yumuşat */
:root[data-tema="koyu"] .cizim { opacity: .92; filter: saturate(.94); }
@media (prefers-color-scheme: dark) { :root[data-tema="sistem"] .cizim { opacity: .92; filter: saturate(.94); } }

/* Hero kartın sağ altı artık boş: motifi biraz büyütüp dengeyi geri veriyoruz */
.card.hero::after { width: 300px; height: 300px; right: -90px; top: -110px; }

/* Lacivert hero üstünde ikon karosu: açık dolgu yerine saydam beyaz, beyaz ikon */
/* ================= v21 · tanıtım kapağı, koç avatarı ================= */
.ob-kapak { margin: -6px -18px 14px; border-radius: 0 0 var(--r) var(--r); overflow: hidden; line-height: 0; box-shadow: var(--shadow-1); }
.ob-kapak img { width: 100%; height: 150px; object-fit: cover; object-position: 68% 42%; display: block; }
@media (min-width: 560px) { .ob-kapak { margin: -6px 0 14px; border-radius: var(--r); } .ob-kapak img { height: 190px; } }

.msg .ava { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; margin-right: 8px; vertical-align: -4px; color: var(--accent); }
.msg .ava svg { width: 100%; height: 100%; display: block; }


/* v21b · karşılama: kapak varken başlık tek başına; koç sohbeti boşken çizim */
.welcome { grid-template-columns: 1fr; gap: 0; margin-bottom: 10px; }
.koc-karsilama { display: grid; justify-items: center; padding: 6px 0 2px; }
.koc-karsilama .cizim { width: 150px; max-width: 48%; }


/* v21c · hızlı yanıt çipleri: tek satır, yatayda kayar */
.quick { padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; }
.quick::-webkit-scrollbar { display: none; }
.quick .chip { white-space: nowrap; flex: none; }


/* 2) Üst bar taşması. Ölçüm: .top-right 265 px sabit, 360 px ekranda sağ kenarı
   374'e taşıyor ve sayfa yana kayıyordu (scrollWidth 376 > clientWidth 345).
   Esneme ve kırpma ile çözülüyor; avatar asla kesilmiyor. */
.top-right { min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
/* io93: kırpma yalnız kapsülün kendisinde; içindeki sayılar kırpılmaz (dar ekran kuralları kapsül bloğunda) */
.ust-durum { min-width: 0; overflow: hidden; white-space: nowrap; }
.top-right #avatar { flex: 0 0 auto; }

/* 3) Dokunma hedefleri. Ölçüm: a.small 16–20 px, a.pill 32 px yüksekliğinde.
   Görsel boyut korunuyor; dokunma alanı görünmez bir katmanla 44 px'e çıkıyor.
   Böylece tasarım aynı kalıyor ama parmakla isabet etmek kolaylaşıyor. */
a.small, .pill, .tag, .link-btn { position: relative; }
a.small::after, .pill::after, .link-btn::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 44px; min-height: 100%;
}
/* Kaydırma şeritlerindeki küçük ögelerde de aynı kural, ama şeridi bozmadan. */
.subtabs button, .chips .chip { min-height: 40px; }

/* 4) Odak görünürlüğü. Klavye ve anahtar erişimi için her zaman görünür bir
   halka; fare tıklamasında görünmüyor (:focus-visible). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent, var(--accent));
  outline-offset: 2px;
  border-radius: 6px;
}

/* 5) Azaltılmış hareket. Sistem ayarı açıksa geçişler ve animasyonlar durur;
   oyunun kendi azHareket bayrağı ayrıca çiziciyi sadeleştiriyor. */
@media (prefers-reduced-motion: reduce) {
  *:not(.kt-fab-kart), *::before, *::after {   /* io236: kartlar düğmesinin yelpazesi hariç (3735) */
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* 6) Güvenli alanlar (çentik ve alt çubuk). Capacitor ve PWA'da alt gezinme
   çubuğu iOS'ta ev göstergesinin altında kalıyordu. */
#tabs { padding-bottom: env(safe-area-inset-bottom, 0); }
.topbar, header { padding-top: env(safe-area-inset-top, 0); }

/* 7) Metin büyütme. Kullanıcı yazı tipini büyüttüğünde sabit yükseklikli
   kutular metni kesiyordu; taşma yerine büyümeye izin ver. */
.card, .session, .topic { min-height: 0; height: auto; }
@media (prefers-color-scheme: dark) {  }


/* ===== v12 — büyük yazı / yüksek yakınlaştırma dayanıklılığı =====
   Ölçüm (360 ve 390 px cihaz, %100/125/150/200 yakınlaştırma):
     %100 ve %125 temiz. %150'de yatay kaydırma başlıyor, %200'de 24-32 öge
     görünüm alanının dışına taşıyor. Tekrar eden suçlular: button.avatar,
     div.mood, div.seg — hiçbiri daralmıyor ya da satır atlamıyor.

   Düzen değişmiyor: yalnız dar alanda sarma ve daralma izni veriliyor. */

/* 1) Satır kutuları sarabilsin. Tek satırda kalmayı zorlamak, yazı büyüyünce
   kaçınılmaz olarak yatay kaydırma üretiyor. */
.mood, .seg, .chips, .row:not(.nowrap) { flex-wrap: wrap; min-width: 0; }
.seg > *, .mood > * { min-width: 0; }

/* 2) Esnek çocuklar taşmak yerine daralsın (flex öntanımlısı min-width:auto
   olduğu için içerik kutudan büyük olabiliyor). */
#view .row > *, header .row > * { min-width: 0; }

/* 3) Uzun kelimeler (konu adları, formüller) kutuyu genişletmesin. */
#view h1, #view h2, #view h3, #view p, #view .lead, .card { overflow-wrap: break-word; }   /* io166: 'anywhere' sıradan kelimeleri de bölüyordu */

/* 4) Çok dar düzen (≈ %150 üstü yakınlaştırma): üst bardaki ikincil bilgi
   gizlensin, avatar ve marka kalsın. Bilgi kaybı yok — aynı veri Ben
   sekmesinde zaten var. */
@media (max-width: 300px) {
  .ud-sayac, .top-right .eyebrow, .top-right .muted { display: none; }
  .brand span:not(.logo) { display: none; }          /* yalnız logo kalır */
  #tabs a { padding-left: 1px; padding-right: 1px; }   /* io86: altı sekme dar ekranda sığsın */
}

/* 5) Sekme çubuğu asla taşmasın. */
#tabs { display: flex; }
#tabs a { min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v12 ek — Ben sekmesi %150 üstü yakınlaştırmada taşıyordu.
   Ölçüm (165 px düzen): .subtabs düğmeleri (Deneme gir, Sıralama, Net Kartı,
   Profil) sağ kenarı 560 px'e taşıyordu — bu şerit kaydırılabilir değildi.
   .stat kutucukları da daralmıyordu. */
.subtabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.stat, .stats { min-width: 0; }
.stat > * { min-width: 0; overflow-wrap: anywhere; }

/* v12 ek 2 — rozet ızgarası %200 yakınlaştırmada taşıyordu.
   Ölçüm (165 px düzen): .badges "repeat(4, 1fr)" ile dört sütunu zorluyor;
   her rozet 44 px + 10 px boşluk = 188 px, görünüm alanından 23 px taşıyor.
   Sabit sütun sayısı yerine sığdığı kadar sütun: içerik dar ekranda satır atlar.
   Geniş ekranda görünüm aynı kalır (4 sütun 72 px'e rahat sığar). */
.badges { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
.badge { min-width: 0; }
.badge svg { max-width: 100%; }





/* ---------- v107: Çöz önerisi ve ciddi çalışma oturumu ----------
   Çöz'ün eski hâli dört açılır listeydi. Buradaki amaç sakin ve odaklı
   olmak: Oyun'dan daha az süs, Bugün'den daha az yoğunluk. */
.cz-oneri{
  background:var(--hero, #172448); color:var(--uzeri);
  border-radius:20px; padding:20px 18px 18px; margin-top:6px;
  position:relative; overflow:hidden;
}
.cz-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A8B4CC; font-weight:700; }
.cz-baslik{ margin:8px 0 2px; font-size:23px; line-height:1.22; color:var(--uzeri); letter-spacing:-.015em; }
.cz-konular{ margin:0 0 10px; font-size:15px; color:#D7DEEC; font-weight:600; }
.cz-olcu{ margin:0 0 10px; font-size:13px; color:#A8B4CC; }
.cz-gerekce{ margin:0 0 16px; font-size:14px; line-height:1.55; color:#C7D0E2; max-width:34em; }
/* DİKKAT: --hero bir GRADYAN belirtecidir, renk değil. color:var(--hero)
   yazmak bildirimi geçersiz kılıyor ve .btn'in beyazı kalıyordu; düğme
   beyaz üstüne beyaz, yani boş görünüyordu. Renk açıkça yazılıyor. */
.cz-basla{ width:100%; justify-content:center; background:var(--uzeri); color:var(--accent-k); font-size:16px; padding:14px; box-shadow:none; }
.cz-basla svg{ color:var(--accent-k); }
.cz-basla:hover{ background:var(--uzeri); }
.cz-basla:active{ background:var(--uzeri); }

.cz-tipler{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.cz-tip{
  display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left;
  background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0);
  border-radius:14px; padding:12px 13px; min-height:60px; cursor:pointer;
  font:inherit; color:var(--ink, var(--ink));
}
.cz-tip:active{ transform:translateY(1px); }
.cz-tip b{ font-size:14.5px; }
.cz-tip span{ font-size:12px; color:var(--muted, var(--muted)); }

.cz-elle{ margin-top:14px; }
.cz-elle > summary{
  cursor:pointer; list-style:none; padding:13px 14px; border-radius:12px;
  background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0);
  font-size:14.5px; color:var(--ink, var(--ink)); font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
/* Sönük bir kutu tıklanabilir görünmüyordu; ok işareti eklendi. */
.cz-elle > summary::after{
  content:""; width:8px; height:8px; flex:0 0 auto;
  border-right:2px solid var(--muted, var(--muted)); border-bottom:2px solid var(--muted, var(--muted));
  transform:rotate(45deg); transition:transform .2s ease; margin-right:3px;
}
.cz-elle[open] > summary::after{ transform:rotate(-135deg); }
.cz-elle > summary::-webkit-details-marker{ display:none; }
.cz-elle[open] > summary{ margin-bottom:8px; }

/* ---------- çalışma oturumu ---------- */
.cl-ust{ margin:2px 0 12px; }
.cl-ilerleme{ height:4px; border-radius:999px; background:var(--line, #E4E8F0); overflow:hidden; }
.cl-ilerleme i{ display:block; height:100%; background:var(--accent, var(--accent)); transition:width .35s ease; }
.cl-ustSatir{ margin-top:8px; }
.cl-sayac{ font-size:13px; font-weight:700; color:var(--ink, var(--ink)); font-variant-numeric:tabular-nums; }
.cl-konu{ font-size:12px; color:var(--muted, var(--muted)); text-align:right; }

.cl-kart{ background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0); border-radius:18px; padding:20px 18px; }
.cl-govde{ margin:0 0 18px; font-size:19px; line-height:1.5; font-weight:600; letter-spacing:-.01em; color:var(--ink, var(--ink)); }
.cl-siklar{ display:flex; flex-direction:column; gap:10px; }
.cl-sik{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0);
  border-radius:14px; padding:14px 14px; font:inherit; font-size:16px;
  color:var(--ink, var(--ink)); cursor:pointer; min-height:54px;
}
.cl-sik:active{ transform:translateY(1px); }
.cl-sik:disabled{ cursor:default; }
.cl-harf{
  flex:0 0 28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface-2, var(--bg)); font-size:13px; font-weight:800; color:var(--muted, var(--muted));
}
.cl-metin{ flex:1; line-height:1.4; }
.cl-sik.ok{ border-color:var(--good); background:#F0FDF4; }
.cl-sik.no{ border-color:#DC2626; background:#FEF2F2; }
.cl-geri{ margin-top:18px; }
.cl-sonuc{ display:flex; align-items:center; gap:8px; font-size:15px; margin-bottom:10px; }
.cl-nicin-yanlis{
  background:#FFF7ED; border-left:3px solid #D97706; border-radius:0 12px 12px 0;
  padding:12px 14px; font-size:14.5px; line-height:1.55; margin-bottom:8px; color:var(--ink, var(--ink));
}
.cl-nicin-yanlis b{ display:inline; }
.cl-derin{
  background:var(--surface-2, var(--bg)); border-left:3px solid var(--accent, var(--accent));
  border-radius:0 12px 12px 0; padding:12px 14px; font-size:14.5px; line-height:1.6;
  color:var(--ink, var(--ink));
}
.cl-ac{
  background:none; border:none; padding:0; margin:0 0 8px; font:inherit; font-size:14px;
  color:var(--accent, var(--accent)); font-weight:600; cursor:pointer; text-decoration:underline;
}
.cl-ileri{ width:100%; justify-content:center; margin-top:14px; padding:14px; font-size:16px; }

.cl-ozet{ background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0); border-radius:18px; padding:20px 18px; }
.cl-skor{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
.cl-skor b{ font-size:40px; line-height:1; letter-spacing:-.03em; color:var(--ink, var(--ink)); font-variant-numeric:tabular-nums; }
.cl-skor span{ font-size:15px; color:var(--muted, var(--muted)); }
.cl-ozetSatir{ display:flex; gap:9px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line, #E4E8F0); font-size:14.5px; line-height:1.5; }
.cl-ozetEylem{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.cl-birincil{ justify-content:center; padding:14px; font-size:16px; }
.cl-ozetEylem .ghost{ justify-content:center; }

.cl-liste{ margin-top:16px; }
.cl-liste h3{ font-size:14px; margin:0 0 8px; color:var(--muted, var(--muted)); }
.cl-satir{ display:flex; gap:10px; align-items:flex-start; padding:11px 12px; background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0); border-radius:12px; margin-bottom:7px; }
.cl-satir b{ display:block; font-size:14px; line-height:1.4; font-weight:600; }
.cl-alt{ font-size:12.5px; color:var(--muted, var(--muted)); margin-top:3px; }
.cl-rozet{ flex:0 0 22px; height:22px; border-radius:7px; display:grid; place-items:center; }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]) .cz-tip,
  :root:not([data-tema="acik"]) .cl-kart,
  :root:not([data-tema="acik"]) .cl-ozet,
  :root:not([data-tema="acik"]) .cl-satir,
  :root:not([data-tema="acik"]) .cl-sik{ background:rgba(255,255,255,.04); }
  :root:not([data-tema="acik"]) .cl-derin{ background:rgba(255,255,255,.05); }
  :root:not([data-tema="acik"]) .cl-nicin-yanlis{ background:rgba(217,119,6,.12); }
  :root:not([data-tema="acik"]) .cl-sik.ok{ background:rgba(22,163,74,.14); }
  :root:not([data-tema="acik"]) .cl-sik.no{ background:rgba(220,38,38,.14); }
}
:root[data-tema="koyu"] .cz-tip,
:root[data-tema="koyu"] .cl-kart,
:root[data-tema="koyu"] .cl-ozet,
:root[data-tema="koyu"] .cl-satir,
:root[data-tema="koyu"] .cl-sik{ background:rgba(255,255,255,.04); }
:root[data-tema="koyu"] .cl-derin{ background:rgba(255,255,255,.05); }
:root[data-tema="koyu"] .cl-nicin-yanlis{ background:rgba(217,119,6,.12); }
:root[data-tema="koyu"] .cl-sik.ok{ background:rgba(22,163,74,.14); }
:root[data-tema="koyu"] .cl-sik.no{ background:rgba(220,38,38,.14); }


/* ---------- v110: Bugün kahraman kartı ve dürüst boş gün ----------
   Kahraman artık uydurma bir net sayısı göstermiyor; ne yapılacağını
   söylüyor. Sıfır panosu yerine tek eylemli dürüst boş durum. */
.hero-ust{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#A8B4CC; font-weight:700; margin-top:10px; }
.hero-eylem{ font-size:26px; line-height:1.18; font-weight:800; letter-spacing:-.02em; color:var(--uzeri); margin:6px 0 4px; text-wrap:balance; }
.hero-sure{ font-size:13.5px; color:#C7D0E2; margin-bottom:8px; }

.bos-gun{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0);
  border-radius:16px; padding:14px 15px; margin-top:10px;
}
.bos-gun b{ display:block; font-size:15px; line-height:1.35; }
.bos-gun span{ display:block; font-size:13px; color:var(--muted, var(--muted)); margin-top:2px; }
.bos-gun .btn{ flex:0 0 auto; }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]) .bos-gun{ background:rgba(255,255,255,.04); }
}
:root[data-tema="koyu"] .bos-gun{ background:rgba(255,255,255,.04); }


/* ---------- v110b: dugme metni sarilmasin ----------
   Olculdu: dar bir esnek kapta ".btn sm" metni iki satira boluniyordu ve
   "Başla" ekranda "Başl / a" olarak goruluyordu (yukseklik 47px yerine 58px).
   Iki yer birden: Bugun'deki "Bugunun 8 sorusu" ve Gunluk Meydan Okuma karti.
   Dugme metni hicbir zaman bolunmemeli; kap daralirsa dugme kuculmemeli. */
.btn{ white-space:nowrap; flex:0 0 auto; }
.btn.block{ flex:1 1 auto; }


/* ---------- v112: X-Ray asgari güçlü sürüm + onarım ----------
   Önce 2.865 px analitik duvardı ve asıl bulgu beş kartın altındaydı.
   Şimdi ilk ekranda tek bulgu, tek eylem; gerisi katlanmış. */
.xr-ana{
  background:var(--hero, #172448); color:var(--uzeri); border-radius:20px;
  padding:20px 18px; margin-top:4px; position:relative; overflow:hidden;
}
.xr-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--hero-muted); font-weight:700; }
.xr-ad{ margin:10px 0 8px; font-size:29px; line-height:1.12; letter-spacing:-.025em; color:var(--uzeri); text-wrap:balance; }
.xr-guvenSatir{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.xr-guven{ font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; }
.xr-guven.guven-d{ background:rgba(255,255,255,.14); color:#D7DEEC; }
.xr-kanit{ font-size:12.5px; color:var(--hero-muted); }
.xr-neden{ margin:0 0 14px; font-size:15px; line-height:1.55; color:#D7DEEC; max-width:34em; }
.xr-onarimNot{ display:flex; gap:6px; align-items:center; margin:0 0 12px; font-size:13px; color:#9FE8B5; }
.xr-onar{ width:100%; justify-content:center; background:var(--uzeri); color:var(--accent-k); font-size:16px; padding:14px; box-shadow:none; }
.xr-onar svg{ color:var(--accent-k); }
.xr-onar:hover{ background:var(--uzeri); }
.xr-nicin{ margin-top:12px; }
.xr-nicin > summary{
  cursor:pointer; list-style:none; font-size:14px; color:#C7D0E2;
  text-decoration:underline; text-underline-offset:3px; padding:4px 0;
}
.xr-nicin > summary::-webkit-details-marker{ display:none; }
.xr-nicinGovde{ margin-top:10px; padding:12px 14px; background:rgba(255,255,255,.06); border-radius:12px; font-size:14px; line-height:1.55; color:#D7DEEC; }
.xr-nicinGovde p{ margin:0 0 8px; }
.xr-kanitListe{ display:flex; gap:16px; margin:10px 0; flex-wrap:wrap; }
.xr-kanitListe > div{ display:flex; flex-direction:column; }
.xr-kanitListe b{ font-size:20px; color:var(--uzeri); font-variant-numeric:tabular-nums; }
.xr-kanitListe span{ font-size:11.5px; color:var(--hero-muted); }
.xr-konular{ font-size:13px; color:var(--hero-muted); }
.xr-durust{ font-size:12.5px; color:var(--hero-muted); font-style:italic; margin:6px 0 0 !important; }

.xr-katman{ margin-top:12px; }
.xr-katman > summary{
  cursor:pointer; list-style:none; padding:14px 15px; border-radius:14px;
  background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0);
  font-size:15px; font-weight:600; color:var(--ink, var(--ink));
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.xr-katman > summary::-webkit-details-marker{ display:none; }
.xr-katman > summary > span{ font-size:12.5px; color:var(--muted, var(--muted)); font-weight:600; }
.xr-katman > summary::after{
  content:""; width:8px; height:8px; flex:0 0 auto; margin-left:2px;
  border-right:2px solid var(--muted, var(--muted)); border-bottom:2px solid var(--muted, var(--muted));
  transform:rotate(45deg); transition:transform .2s ease;
}
.xr-katman[open] > summary::after{ transform:rotate(-135deg); }
.xr-katmanGovde{ padding:12px 2px 0; }
.xr-diger{ display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0); border-radius:12px; margin-bottom:7px; }
.xr-diger > div{ flex:1; min-width:0; }
.xr-diger b{ font-size:14.5px; }
.xr-digerAlt{ font-size:12.5px; color:var(--muted, var(--muted)); margin-top:2px; }
.xr-nokta{ width:10px; height:10px; border-radius:999px; flex:0 0 auto; }
.xr-alan{ display:grid; place-items:center; margin:10px 0; }
.xr-acik h4, .xr-ek h4{ font-size:13px; margin:12px 0 6px; color:var(--muted, var(--muted)); }
.xr-acikSatir{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-top:1px solid var(--line, #E4E8F0); font-size:14px; }
.xr-ek p{ font-size:13.5px; line-height:1.5; margin:0 0 6px; color:var(--muted, var(--muted)); }

.xr-bos{ text-align:center; padding:30px 20px; background:var(--surface, var(--uzeri)); border:1px solid var(--line, #E4E8F0); border-radius:20px; margin-top:4px; }
.xr-bosIkon{ display:grid; place-items:center; margin-bottom:12px; opacity:.85; }
.xr-bos h2{ font-size:22px; margin:0 0 8px; letter-spacing:-.02em; }
.xr-bos p{ font-size:14.5px; line-height:1.55; color:var(--muted, var(--muted)); margin:0 0 8px; max-width:30em; margin-inline:auto; }
.xr-bos .xr-durust{ font-style:italic; }
.xr-basla{ margin-top:12px; justify-content:center; padding:13px 22px; font-size:15.5px; }

.on-ust{ background:var(--hero, #172448); color:var(--uzeri); border-radius:20px; padding:20px 18px; margin-top:6px; }
.on-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A8B4CC; font-weight:700; }
.on-ad{ margin:8px 0 2px; font-size:26px; line-height:1.16; color:var(--uzeri); letter-spacing:-.02em; }
.on-konu{ margin:0 0 8px; font-size:15px; color:#D7DEEC; font-weight:600; }
.on-olcu{ margin:0 0 12px; font-size:13px; color:#A8B4CC; }
.on-nicin > summary{ cursor:pointer; list-style:none; font-size:14px; color:#C7D0E2; text-decoration:underline; text-underline-offset:3px; padding:4px 0; }
.on-nicin > summary::-webkit-details-marker{ display:none; }
.on-nicin p{ margin:8px 0 0; font-size:14px; line-height:1.55; color:#D7DEEC; }
.on-basla{ width:100%; justify-content:center; background:var(--uzeri); color:var(--accent-k); font-size:16px; padding:14px; box-shadow:none; margin-top:14px; }
.on-basla svg{ color:var(--accent-k); }

@media (prefers-color-scheme: dark){
  :root:not([data-tema="acik"]) .xr-katman > summary,
  :root:not([data-tema="acik"]) .xr-diger,
  :root:not([data-tema="acik"]) .xr-bos{ background:rgba(255,255,255,.04); }
}
:root[data-tema="koyu"] .xr-katman > summary,
:root[data-tema="koyu"] .xr-diger,
:root[data-tema="koyu"] .xr-bos{ background:rgba(255,255,255,.04); }


/* ---------- v115: Konular — buradan başla + kasıtlı bilinmiyor ----------
   Harita tümüyle griydi ama alt başlık düz yazıyla renkleri tarif ediyordu.
   Artık gerçek bir gösterge var ve "bilinmiyor" tasarlanmış bir durum. */
.kn-basla{
  display:block; text-decoration:none; color:inherit;
  background:var(--hero, #172448); border-radius:18px; padding:16px 16px 14px; margin:10px 0 4px;
}
.kn-baslaEyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A8B4CC; font-weight:700; }
.kn-baslaAd{ font-size:21px; font-weight:800; color:var(--uzeri); letter-spacing:-.02em; margin:6px 0 4px; line-height:1.2; }
.kn-baslaNeden{ margin:0 0 12px; font-size:13.5px; line-height:1.5; color:#C7D0E2; }
.kn-baslaCta{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:14.5px; padding:9px 16px; border-radius:999px;
}
.kn-gosterge{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:8px; }
.kn-gosterge span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted, var(--muted)); }
.kn-n{ width:11px; height:11px; border-radius:999px; display:inline-block; flex:0 0 auto; }
.kn-n.bitti{ background:var(--good, var(--good)); }
.kn-n.calisiyor{ background:var(--blue, var(--accent)); }
.kn-n.zayif{ background:#F27B1C; }
/* Bilinmiyor: veri yok demek. Boş görünmesi kasıtlı — kesikli çerçeve bunu
   "eksik" değil "henüz ölçülmedi" olarak okutuyor. */
.kn-n.bilinmiyor{ background:transparent; border:2px dashed var(--line-2, #C3CBDA); }
.mapwrap .dot:not(.bitti):not(.calisiyor):not(.zayif){ border:2px dashed var(--line-2, #C3CBDA); background:transparent; }

/* ===== G2: basma grameri =============================================
   Tek kural: basılan her yüzey 1 px iner ve gölgesi küçülür, 90 ms'de.
   Ölçek (zıplama) ve 2-4 px sert düşüş kullanılmaz. Ölçen kapı:
   node scripts/dogrula-basma.js */

.btn, .chip, .card.tap, .opt, .iconbtn, .subtabs button, .mood button,
.tabs a, .cl-sik, .cz-tip, .yl-sik, .dm-btn {
  transition: transform var(--basma-sure, 90ms) var(--ease-snap),
              box-shadow 160ms var(--ease),
              background-color 160ms var(--ease),
              color 160ms var(--ease);
}

.btn:active, .chip:active, .opt:active, .iconbtn:active,
.subtabs button:active, .mood button:active,
.cl-sik:active, .cz-tip:active, .yl-sik:active, .dm-btn:active { transform: translateY(1px); }

/* Kart ve ana sekme kendi dönüşümlerini taşıyabildiği için ayrı yazılıyor. */
/* Ana sekmenin basma geri bildirimi YOKTU (transform: none ile kapatılmıştı).
   Uygulamanın en çok dokunulan yüzeyi; sessiz kalması yanlıştı. */
.tabs a:active { transform: translateY(1px); }

/* Yüzen düğme yatayda ortalanıyor; ortalamayı koruyarak iniyor. */
/* Düğme içindeki ikon ayrıca küçülmüyor — tek hareket yeter. */
.btn:active .ic { transform: none; }

/* Gölgesi olan yüzeylerde basınca gölge küçülür (yüzey aşağı iner izlenimi). */
.btn:active, .card.tap:active, .yl-sik:active, .dm-btn:active { box-shadow: var(--shadow-basma); }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .chip:active, .card.tap:active, .opt:active, .iconbtn:active,
  .subtabs button:active, .mood button:active, .tabs a:active,
  .cl-sik:active, .cz-tip:active, .yl-sik:active, .dm-btn:active,
  .btn.fab:active { transform: none; }
}

/* Çip iskeleti — kabuk boyanırken ders çiplerinin yerini tutar. */
.subtabs .sk-cip {
  height: 34px; border-radius: 999px; border: 0;
  pointer-events: none; margin: 0;
}
.subtabs .sk-cip:nth-child(1) { width: 70px; }
.subtabs .sk-cip:nth-child(2) { width: 96px; }
.subtabs .sk-cip:nth-child(3) { width: 82px; }

/* Nötr karo: ikincil satırlar için (Her gün, Sosyal) — renk taşımaz. */
.karo.gri { background: var(--soft); color: var(--muted); }

/* ===== G3: Oyun sekmesi düzeni ========================================
   Renk artık kartın tamamında değil, yalnız imza .karo ikon karosunda.
   Önce her oyun alakasız bir ders dünyasından pastel ton alıyordu. */

.oy-giris { margin: 2px 0 14px; }
.oy-baslik { margin: 20px 0 8px; }

/* Vurgu kartı üzerinde eyebrow --muted ile okunmuyordu (lacivert zemin). */
.card.hero .eyebrow { color: rgba(255,255,255,.70); }

/* Amiral gemisi: uygulamanın vurgu kartı dili, tam genişlik. */
.oy-amiral { display: block; text-decoration: none; }
.oy-amiral h2 { margin: 6px 0 4px; font-size: 20px; }
.oy-amiral p { margin: 0 0 14px; opacity: .82; font-size: 15px; }
.oy-amiral-alt { gap: 10px; align-items: center; }

/* Günlük Meydan Okuma: sekmenin tepesindeki günlük ritüel (p172). */
.oy-gunluk { display: block; color: inherit; text-decoration: none; }
.oy-gunluk h2 { margin: 4px 0 2px; font-size: 18px; }
.oy-gunluk p { margin: 0 0 12px; }
.oy-seri { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 13.5px; font-weight: 750;
  color: var(--alev-d); white-space: nowrap; }

/* Hızlı oyunlar: düz yüzey, karoda renk. */
.oy-izgara {
  /* Kendi ızgarası: .grid2 420 px altında tek sütuna düşüyor, ama bu
     küçük oyun karoları dar ekranda da iki sütun kalmalı. */
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.oy-hizli { display: grid; gap: 2px; margin: 0; text-decoration: none; align-content: start; }
.oy-hizli .karo { margin-bottom: 8px; }
.oy-ad { font-weight: 700; font-size: 15px; color: var(--ink); }
.oy-alt { font-size: 12px; color: var(--muted); }
.oy-durum {
  margin-top: 6px; justify-self: start;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--soft); border-radius: 999px; padding: 3px 9px;
}
.oy-durum.ters { background: rgba(255,255,255,.16); color: var(--uzeri); margin: 0; }

/* Sıra satırları ve sosyal: aynı iskelet, tek sütun / iki sütun. */
.oy-satir, .oy-sosyal {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 8px; text-decoration: none;
}
.oy-sosyal { margin: 0; }
.oy-satir .t-cap, .oy-sosyal .t-cap { display: block; color: var(--muted); }
.oy-satir .oy-durum { margin: 0 0 0 auto; }

/* ===== G3: yatay çip satırı — kaydırılabilirlik görünür olsun ==========
   Önce son çip düz kesiliyordu ("Gelecel", "Mini s..."). Artık sağ kenarda
   yumuşak bir sönüm var ve kaydırma çipin başına oturuyor. */
.subtabs {
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  padding-inline: 1px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.subtabs > * { scroll-snap-align: start; }
/* Son öğe tam görünürken maske gereksiz yere onu soldurmasın. */
.subtabs > *:last-child { scroll-snap-align: end; }

/* Ben > Konu ilerlemesi */
.ilerleme-bos { margin: 6px 0 12px; }
.ilerleme-ozet { margin: 6px 0 0; }
.ilerleme-halkalar { margin-top: 10px; }


/* Oyun kapakları: görsel kartın İÇİNİ doldurur, yazı perdenin üstünde durur (p170). */
.oy-kapak { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: 24px;
  background: var(--kapak-koyu); color: var(--uzeri); text-decoration: none;
  transition: transform 90ms var(--ease-snap); }
.oy-kapak:active { transform: translateY(1px); }
.oy-gorsel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.oy-kapak::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.oy-metin { position: relative; z-index: 10; padding: 16px; }

/* Büyük kart: perde soldan, yazı solda. */
.oy-one { min-height: 176px; }
.oy-one::after { background: linear-gradient(90deg,
  color-mix(in srgb, var(--kapak-koyu) 90%, transparent) 0%,
  color-mix(in srgb, var(--kapak-koyu) 74%, transparent) 34%,
  color-mix(in srgb, var(--kapak-koyu) 62%, transparent) 60%, transparent 82%); }
/* Yazı perdenin güçlü olduğu bölgede kalsın: parlak kapaklarda başlık aydınlık göğe taşıyordu. */
.oy-one .oy-metin { max-width: 62%; }
/* Gerçek oyun karelerinde sol kenar aydınlık pencereler olabiliyor: yazıya yumuşak gölge (p173). */
.oy-one .oy-metin { text-shadow: 0 1px 3px color-mix(in srgb, var(--kapak-koyu) 85%, transparent); }
.oy-one .eyebrow { color: color-mix(in srgb, var(--uzeri) 74%, transparent); }
.oy-one-ad { font-family: var(--display); font-weight: 800; font-size: 20px; margin: 6px 0 0; }
.oy-one-alt { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4;
  color: color-mix(in srgb, var(--uzeri) 80%, transparent); }
.oy-one-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 10px 16px;
  min-height: 44px; border-radius: 999px; font-size: 15px; font-weight: 700; }

/* Şerit kartları: perde alttan, yazı altta. */
.oy-serit { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 10px calc(var(--s4) * -1) 0; padding: 2px var(--s4) 6px; scrollbar-width: none; }
.oy-serit::-webkit-scrollbar { display: none; }
.oy-serit .oy-kapak { flex: 0 0 62%; scroll-snap-align: start; min-height: 126px; border-radius: 18px; }
.oy-serit .oy-kapak::after { background: linear-gradient(180deg, transparent 30%,
  color-mix(in srgb, var(--kapak-koyu) 92%, transparent) 82%); }
.oy-serit .oy-metin { position: absolute; inset: auto 0 0 0; padding: 12px; }
.oy-serit b { display: block; font-size: 15px; font-weight: 700; }
.oy-serit span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3;
  color: color-mix(in srgb, var(--uzeri) 78%, transparent); }
.oy-serit em { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; font-style: normal;
  color: color-mix(in srgb, var(--uzeri) 90%, transparent); }
/* Henüz yapılmamış oyun: tıklanmaz, rengi kısık, rozetli. */
.oy-kapak.yok { filter: saturate(.5); }
.oy-kapak .oy-yakinda { display: inline-block; width: fit-content; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--uzeri) 22%, transparent); }

/* ================= ANA SAYFA (p174): duvar kağıdı üstünde köşesiz pano + iki kapı =================
   Üst yarı: cam pano (kalan gün, plana devam, oyun oyna, tamamlanan dersler, zayıf noktalar).
   Alt yarı: Soru Bankası ve Geri Bildirim kapıları. Yalnız jeton; yarıçap var(--r-pano)/24/14/999. */
.ev-pano { position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-pano); background: color-mix(in srgb, var(--surface) 86%, transparent); }
.ev-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ev-sayi { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.ev-sayi b { font-family: var(--display); line-height: 1; font-variant-numeric: tabular-nums; }
.ev-sayi span { font-size: 15px; }
/* io118: iç boşluk ve kenarlık kaldırıldı — kapak görseli oyun kartını tam doldurur (koyu çerçeve yok) */
.ev-oyun { flex: 0 0 auto; align-items: center; gap: 6px; min-height: 44px; font-size: 13.5px;
  transition: transform 90ms var(--ease-snap); }
.ev-plan b { display: block; margin-top: 4px; }
.ev-plan > span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.ev-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 12px;
  border: 0; font: inherit; cursor: pointer; color: var(--uzeri); }
.ev-alt2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.ev-halka { display: flex; align-items: center; margin-top: 6px; }
.ev-halka b { display: block; font-family: var(--display); font-size: 20px; line-height: 1.1; }
.ev-halka b span { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.ev-halka > div > span { display: block; font-size: 12px; color: var(--muted); }
.ev-cubuklar { display: grid; gap: 5px; margin-top: 8px; }
.ev-cubuklar > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ev-cubuklar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-cubuklar i { display: block; height: 6px; border-radius: 999px; overflow: hidden; }
.ev-cubuklar b { display: block; width: 0; height: 100%; border-radius: 999px; transition: width 320ms var(--ease-flow); }
.ev-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev-cipler a { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 10px; border-radius: 999px; font-size: 12px; text-decoration: none; }
.ev-kapilar { display: grid; grid-template-columns: minmax(0, 1fr); }
.ev-kapi { min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px; border-radius: 24px; color: inherit; text-decoration: none; transition: transform 90ms var(--ease-snap), box-shadow 90ms var(--ease-snap); }
.ev-kapi > i { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; }
.ev-kapi > div { flex: 1 1 auto; min-width: 0; }
.ev-kapi b { display: block; font-size: 16px; }
.ev-kapi span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-kapi > .ic:last-child { flex: 0 0 auto; color: var(--muted); transform: rotate(180deg); }
:root[data-rota="bugun"] #countdown { display: none; } /* pano büyük sayıyı zaten gösteriyor; üst çubukta tekrar etmesin */
@media (max-width: 340px) { .ev-alt2 { grid-template-columns: 1fr; } }

/* Arkadaşlar sekmesi (p174) */
.ark-serit { margin-top: 8px; }
.ark-bos { margin: 8px 0 0; }
.ark-ekle { display: flex; gap: 8px; margin-top: 12px; }
.ark-kod { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.ark-kodum { margin: 10px 0 0; }

/* ===================== v24 · MOR TEMA — Duolingo hissi (2026-09-08) =====================
   Kurucu kararı: koyu zemin, mor birincil, Nunito, yüksek hareket, premium his. Jetonlar dosyanın
   başında (kök = koyu). Bu katman bileşen gramerini değiştirir:
     düğme  = yüz + 4 px alt kenar (border-bottom); basınca yüz kenarın içine iner, yükseklik değişmez
     kart   = 2 px çizgi, gölge yok (koyu zeminde gölge okunmaz), basınca 2 px iner
     sekme  = ikon karosu; seçili karo mor çerçeveli, tint zeminli
     maskot = Neti (maskot.js), nefes alır, göz kırpar, anteni sallanır
   Yalnız jeton: hex yok, yarıçap {12,14,18,24,999}, süre var(--motion-*), gölge var()/none.        */

/* ---- zemin: mor ışık lekesi, desen kısık; enerji modları da mor ---- */
body::before { background: radial-gradient(760px 480px at 82% -12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), radial-gradient(620px 420px at -10% 24%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 60%), var(--bg); }
body::after { opacity: .035; }
:root[data-mod="intel"] body::before { background: radial-gradient(760px 480px at 14% -12%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 62%), var(--bg); }
:root[data-mod="compete"] body::before { background: radial-gradient(760px 480px at 84% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%), var(--bg); }
:root[data-mod="celebrate"] body::before { background: radial-gradient(760px 560px at 50% -12%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 62%), var(--bg); }
:root[data-tema="acik"] body::after { background-image: url("/pattern-light.svg"); opacity: .05; }

/* ---- tipografi: tek aile, ağırlıkla hiyerarşi ---- */
body { font-weight: 500; }
  h3 { font-weight: 800; }
.big, .t-stat, .hero-sayi, .ev-sayi b, .est, .surv-skor, .mg-puan { font-weight: 900; }
label { font-weight: 700; }
.muted { font-weight: 500; }

/* ---- düğme: yüz + alt kenar ---- */
.btn { color: var(--accent-ink); border: 0; min-height: 48px; padding: 10px 18px;
  transition: transform var(--motion-instant) var(--ease-snap), border-color var(--motion-instant) var(--ease-snap), filter var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease); }
@media (hover: hover) { .btn:hover { filter: brightness(1.06); } }
.btn.sm { min-height: 40px; padding: 6px 12px; } .btn.xs { min-height: 32px; padding: 3px 9px; }
.btn.ghost:active, .btn.secondary:active { box-shadow: none; }
.btn.blue { background: var(--blue); border-bottom-color: var(--blue-k); color: var(--blue-ink); box-shadow: none; } .btn.blue:active { border-bottom-color: transparent; box-shadow: none; }
.btn.success, .btn.good { background: var(--good); border-bottom-color: var(--good-k); color: var(--good-uzeri); box-shadow: none; }
.btn.danger { background: var(--bad); border-bottom-color: var(--bad-k); color: var(--bad-uzeri); box-shadow: none; } .btn.danger:active { border-bottom-color: transparent; box-shadow: none; }
.btn.dark { background: var(--ink); color: var(--bg); border-bottom-color: color-mix(in srgb, var(--ink) 70%, var(--bg)); box-shadow: none; }
.btn.on { box-shadow: none; outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn:disabled { transform: none; border-bottom-color: transparent; opacity: .5; box-shadow: none; }
.btn.busy::before { border-color: rgba(255,255,255,.35); border-top-color: var(--accent-ink); }
.card.hero .btn { background: var(--uzeri); color: var(--accent-k); border-bottom-color: color-mix(in srgb, var(--uzeri) 68%, var(--kapak-koyu)); }
.cz-basla, .xr-onar, .on-basla { background: var(--uzeri); color: var(--accent-k); border-bottom: var(--kenar) solid color-mix(in srgb, var(--uzeri) 68%, var(--kapak-koyu)); }
.cz-basla:hover, .xr-onar:hover, .cz-basla:active { background: var(--uzeri); }
.cta .btn.buyuk { text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.ev-cta { border-bottom: var(--kenar) solid var(--accent-k); border-radius: var(--r-sm); font-weight: 800; box-shadow: none; text-transform: uppercase; letter-spacing: .04em; font-size: 15px;
  transition: transform var(--motion-instant) var(--ease-snap), border-color var(--motion-instant) var(--ease-snap); }
.ev-cta:active { transform: translateY(var(--kenar)); border-bottom-color: transparent; box-shadow: none; }
.oy-one-cta { background: var(--accent-yuzey); color: var(--uzeri); border-bottom: 3px solid var(--accent-k); }
.kn-baslaCta { background: var(--accent); color: var(--uzeri); border-bottom: 3px solid var(--accent-k); } .kn-baslaCta svg { color: var(--uzeri); }

/* ---- kart: 2 px çizgi, gölgesiz ---- */
.card.insight { border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: none; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 62%); }
.card.insight::before { background: var(--grad); }
.card.tint, .card.good, .card.blue, .card.world { border: 2px solid var(--line); box-shadow: none; }
@media (hover: hover) {  }
.card.hero { border: 0; box-shadow: none;
  background-image: url("/pattern-dark.svg"),
    radial-gradient(560px 320px at 100% -8%, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 72%),
    radial-gradient(420px 300px at -5% 108%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 72%),
    var(--hero); }
.card.hero::after { background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 45%, transparent), transparent 65%); }
.card.hero .muted, .card.hero .ring-sub, .hero-alt, .card.hero .t-cap, .card.hero .small, .card.hero .eyebrow { color: var(--hero-muted); }
.card.hero .karo { background: rgba(255,255,255,.14); color: var(--uzeri); }
.quiz, .cl-kart, .cl-ozet, .cz-tip, .cl-sik, .cl-satir, .xr-katman > summary, .xr-diger, .xr-bos, .bos-gun, .cz-elle > summary { border-width: 2px; box-shadow: none; }
.spot, .empty { border: 2px solid var(--line); }
.empty { border-style: solid; }

/* ---- çip, alt sekme, segment, giriş, hap ---- */
.chip { background: var(--surface); border: 2px solid var(--line); font-weight: 700; color: var(--ink); box-shadow: none; }
.chip:active { transform: translateY(2px); }
.chip.on, .chips.multi .chip.on { background: var(--tint); border-color: var(--accent); color: var(--accent-2); box-shadow: none; }
.neden .chip.on { background: var(--tint); border-color: var(--accent); color: var(--accent-2); }
.subtabs button { background: var(--surface); border: 2px solid var(--line); font-weight: 700; color: var(--ink); }
.subtabs button.on { background: var(--tint); border-color: var(--accent); color: var(--accent-2); }
.seg { background: var(--soft); padding: 4px; } .seg button { color: var(--muted); font-weight: 800; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-cerceve); }
input, select, textarea { background: var(--surface-2); border: 2px solid var(--line); color: var(--ink); font-weight: 600; border-radius: var(--r-sm); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--glow-focus); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); font-weight: 600; }
.pill { background: var(--soft); color: var(--ink); font-weight: 800; }
.ud-alev .ic { color: var(--alev-ates); filter: drop-shadow(0 0 4px var(--alev-parla)); }   /* io78 → io93 */
.tag { font-family: var(--body); font-weight: 800; }
.avatar { box-shadow: none; }
.iconbtn { background: var(--surface); border: 2px solid var(--line); color: var(--ink); border-radius: var(--r-sm); }
.iconbtn:active { transform: translateY(2px); }
.opt { border: 2px solid var(--line); background: var(--surface); border-radius: var(--r-sm); font-weight: 600; }
 .secim-k, .yolda-sure button, .oyun-sec button, .eslestir button, .kagit button { border-width: 2px; }
.karo { border-radius: 12px; }
.toast { background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: none; font-weight: 700; }
/* io146 tarama: küçük metin bağlantıları (sayfa başı geri bağlantısı, Hesap yasal bağlantıları, "güncellemeyi denetle", Arkadaşlar
   "Meydan okumaya gir") 18–20 px yüksekti; başparmakla ıskalanıyordu. Dolgu + eşit negatif pay: dokunma alanı 44 px, görünüm aynı. */
#view > a.muted.small:first-child, .pl > a.muted.small:first-child, .card .row > a.muted.small, .ark-kucuk-bag, .link-btn { padding-block: 12px; margin-block: -12px; }
#view > a.muted.small:first-child, .pl > a.muted.small:first-child { position: relative; z-index: 1; }   /* alttaki kart dolguyu örtmesin */
/* io147 yapay zekâ yanıtını bildir — küçük, göze batmayan; dokunma alanı 44 px (dolgu + negatif pay) */
.ai-bildir { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 -12px; padding: 12px 8px 12px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.msg.ai .ai-bildir { display: flex; }
.bildir-neden { display: grid; gap: 8px; margin: 8px 0 10px; }
/* io144 arkadaş daveti şeridi — canlı yarış / düello daveti; Kartlar yüzen düğmesinin (alttan 140 px) ve toast.un üstünde */
.davet-serit { position: fixed; left: 50%; bottom: calc(156px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; width: min(440px, calc(100vw - 24px)); padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); animation: up var(--t) var(--ease); }
.davet-serit .davet-ik { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--accent-yazi); flex: none; }
.davet-serit .davet-yazi { flex: 1; font-weight: 700; font-size: 14px; line-height: 1.3; }
.davet-serit .davet-kapat { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); border-radius: 12px; cursor: pointer; flex: none; }
@media (prefers-reduced-motion: reduce) { .davet-serit { animation: none; } }
.sheet { border: 2px solid var(--line); border-bottom: 0; box-shadow: none; }
.sheet .grip { background: var(--line); }
.sk { background: linear-gradient(90deg, var(--soft) 25%, var(--line) 50%, var(--soft) 75%); background-size: 200% 100%; }
.offline { background: var(--accent); color: var(--uzeri); font-family: var(--body); font-weight: 700; }
.msg.me { background: var(--accent); color: var(--uzeri); } .msg.ai { background: var(--surface); border: 2px solid var(--line); }
.chatbar { background: var(--bg); }
/* io147: iPhone/iPad klavyesi açıkken yazı kutusu klavyenin hemen üstünde, alt sekme çubuğu gizli (app.js visualViewport) */
:root.klavye-acik .chatbar { bottom: var(--klavye, 0px); }
:root.klavye-acik #tabs, :root.klavye-acik .kt-fab { display: none; }
:root.klavye-acik .sheet { bottom: var(--klavye, 0px); max-height: calc(100dvh - var(--klavye, 0px) - 16px); }   /* io238: alt sayfa (ör. Seçenekler › Konu ara) iPhone klavyesinin üstüne oturur */
.gmo-cta { background-image: url("/pattern-dark.svg"), var(--hero); } .gmo-cta .muted { color: var(--hero-muted); }
.card60, .flash .front, .kalip.roast, .wrap-sahne, .mg, .cz-oneri, .xr-ana, .on-ust, .kn-basla { background: var(--hero); }
.mg::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%); }

/* ---- üst çubuk ---- */
.top { background: var(--bg); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px; }
.brand { font-weight: 900; font-size: 20px; letter-spacing: -.02em; }
.brand .ci { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top-right { gap: 8px; }

/* ---- alt gezinme: ikon karosu ---- */
.tabs { background: var(--bg); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
.tabs a { font-weight: 800; font-size: 12px; min-height: 56px; }
.tabs a::before { display: none; }
.tabs a .ic { box-sizing: content-box; }
.tabs a:active .ic { transform: scale(.94); }

/* ---- Ana Sayfa panosu ---- */
.ev-pano { background: radial-gradient(420px 260px at 100% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ev-sayi b { font-weight: 900; } .ev-sayi span { color: var(--muted); font-weight: 700; }
.ev-oyun:active { transform: translateY(2px); }
.ev-plan b { font-weight: 800; }
.ev-halka b { font-weight: 900; }
.ev-cubuklar i { background: var(--soft); } .ev-cubuklar b { background: var(--grad); }
.ev-kapi { background: var(--surface); }
.ev-kapi > i { border-radius: 14px; }
.ev-kapi b { font-weight: 800; }
.ev-neti { margin: -2px 0 2px; }
.ev-neti .neti { width: 56px; }

/* ---- Neti: maskot ---- */
.neti { display: inline-block; line-height: 0; flex: none; }
.neti svg { display: block; width: 100%; height: auto; overflow: visible; }
.neti .govde { transform-origin: 50% 100%; }
.neti.canli .govde { animation: netiNefes var(--motion-nefes) ease-in-out infinite; }
.neti.canli .goz { transform-origin: center; transform-box: fill-box; animation: netiKirp var(--motion-kirp) infinite; }
.neti.canli .anten { transform-origin: 50% 100%; transform-box: fill-box; animation: netiAnten var(--motion-anten) ease-in-out infinite; }
.neti.kutlama .govde { animation: netiZipla var(--motion-reveal) var(--ease-spring) both, netiNefes var(--motion-nefes) ease-in-out var(--motion-reveal) infinite; }
@keyframes netiNefes { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes netiKirp { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes netiAnten { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes netiZipla { 0% { transform: translateY(0); } 40% { transform: translateY(-12px) scale(1.05); } 100% { transform: none; } }
.neti-satir { display: flex; align-items: center; gap: 12px; min-width: 0; }
.neti-balon { position: relative; flex: 1 1 auto; min-width: 0; background: var(--surface-2); border: 2px solid var(--line); border-radius: 18px; padding: 10px 14px;
  font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); animation: rise var(--motion-structural) var(--ease-enter) both; }
.neti-balon::before { content: ""; position: absolute; left: -8px; top: 50%; width: 12px; height: 12px; background: var(--surface-2);
  border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.neti-balon a { display: inline-block; margin-top: 4px; color: var(--accent-2); font-weight: 800; }
.neti-balon.yaziyor .yaz::after { content: "▍"; color: var(--accent-2); animation: caret var(--motion-cinematic) steps(2) infinite; }
.neti-balon h1 { font-size: 20px; line-height: 1.2; }
.karo.neti-karo { background: transparent; }

/* ---- Tanışma (ilk açılış): tek soru, büyük seçenekler, Neti sorar ---- */
.tn { display: flex; flex-direction: column; min-height: calc(100dvh - 140px); }
.tn-ust { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; }
.tn-geri { width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; border-radius: 12px; cursor: pointer; }
.tn-geri:active { transform: translateY(1px); background: var(--soft); }
.tn-bar { flex: 1; height: 14px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.tn-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad); position: relative; transition: width var(--motion-structural) var(--ease-flow); }
.tn-bar i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.32); }
.tn-soru { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.tn-soru .neti { width: 68px; margin-top: 2px; }
.tn-secenek { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tn-secenek.tek { grid-template-columns: 1fr; }
.tn-sec { display: grid; gap: 8px; justify-items: start; align-content: start; text-align: left; padding: 14px; min-height: 104px;
  background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 18px; color: var(--ink); font: inherit; cursor: pointer;
  transition: transform var(--motion-instant) var(--ease-snap), border-color var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease);
  animation: rise var(--motion-structural) var(--ease-enter) both; }
.tn-sec:nth-child(2) { animation-delay: 50ms; } .tn-sec:nth-child(3) { animation-delay: 100ms; } .tn-sec:nth-child(4) { animation-delay: 150ms; }
.tn-sec:active { transform: translateY(2px); }
.tn-sec.on { border-color: var(--accent); background: var(--tint); }
.tn-sec .karo { width: 40px; height: 40px; }
.tn-sec b { font-size: 16px; font-weight: 800; line-height: 1.2; } .tn-sec span { font-size: 13.5px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.tn-sec .oneri { font-size: 12px; font-weight: 800; font-style: normal; color: var(--accent-2); background: var(--tint); padding: 3px 9px; border-radius: 999px; }
.tn-secenek.tek .tn-sec { grid-template-columns: 40px 1fr; align-items: center; min-height: 76px; }
.tn-secenek.tek .tn-sec .karo { grid-row: 1 / span 2; }
.tn-secenek.tek .tn-sec .oneri { grid-column: 2; }
.tn-alt { margin-top: auto; padding-top: 18px; }
.tn-alt .btn { width: 100%; font-size: 16px; min-height: 52px; text-transform: uppercase; letter-spacing: .04em; }
.tn-hos { text-align: center; display: grid; justify-items: center; gap: 12px; padding: 20px 0 8px; }
.tn-hos .neti { width: 140px; }
.tn-hos h1 { font-size: 34px; line-height: 1.05; }
.tn-yasal { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; } .tn-yasal a { color: var(--accent-yazi); font-weight: 700; }   /* io147 */
.tn-hos p { color: var(--muted); font-size: 16px; max-width: 30ch; font-weight: 600; }
.tn-not { font-size: 13.5px; color: var(--muted); text-align: center; margin-top: 10px; }
.tn-ad input { font-size: 20px; font-weight: 800; text-align: center; padding: 16px; }
@media (max-width: 340px) { .tn-secenek { grid-template-columns: 1fr; } }

/* ---- oyun kapakları ---- */
.oy-kapak { border: 2px solid var(--line); }
.oy-gunluk h2 { font-weight: 800; }

/* ---- azaltılmış hareket ---- */
@media (prefers-reduced-motion: reduce) {
  .neti.canli .govde, .neti.canli .goz, .neti.canli .anten, .neti.kutlama .govde, .tn-sec, .neti-balon, .tabs a .ic { animation: none; transition: none; }
  .btn:active, .ev-cta:active, .tn-sec:active, .chip:active, .ev-kapi:active { transform: none; }
}

/* Tanışma sırasında üst çubukta seri ve avatar anlamsız (profil yok): gizle. */
:root[data-rota="onboarding"] .top-right { visibility: hidden; }

/* Boş durumlarda Neti: eski WebP çizimlerin yerini aldı; boyutlar aynı kaldı. */
.spot .neti, .empty .ill .neti, .bos-tarama .halka .neti { width: 120px; max-width: 48%; }
.empty .ill { width: auto; max-width: none; line-height: 0; }
.koc-karsilama .neti { width: 130px; }
.spot { gap: 12px; }

/* ===================== v25 · YÜZEY VE SESSİZLİK (2026-09-08) =====================
   v24 markayı getirdi ama her yüzeyi 2 px çizgiyle kutuladı ve moru sekiz ayrı yerde kullandı.
   Ölçülen sorun (Ana Sayfa, 390 px): görünür kutu kenarı 9, mor öge 8, büyük harf etiket 4.
   Koyu arayüzde ayrımı ÇİZGİ değil YÜKSEKLİK yapar: yüzey zeminden bir ton açık, üst kenarında
   1 px ışık, altında yayılı gölge. Kutu kenarı sadece bunu taklit eder ve ucuz görünür.

   Bu katman üç şey yapar:
     1) Kutu → katman: kart kenarı 1 px saydam, üst ışık + yayılı gölge tek jetonda.
     2) Vurgu diyeti: mor yalnız birincil eylem, etkin sekme ve ilerlemede. Gerisi nötr yüzey.
     3) Sessiz tipografi: büyük harf etiketler küçüldü, sayı büyüdü — ekranda tek bir yüksek ses.
   Jeton kuralı korunur: gölgeler TEK jetonda toplanır (stil kapısı box-shadow'da var() ister).  */

/* ---- yeni jetonlar: yükseklik ---- */
@media (prefers-color-scheme: light) {
  :root[data-tema="sistem"] {
    --yuzey-1: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,24,40,.05), 0 10px 28px -18px rgba(16,24,40,.28);
    --yuzey-2: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(16,24,40,.07), 0 22px 48px -24px rgba(16,24,40,.35);
    --hat: rgba(16,24,40,.08);
    --hat-guclu: rgba(16,24,40,.13);
  }
}

/* ---- 1) kutu → katman ---- */
.card.flat { background: var(--surface-2); border-color: var(--hat); box-shadow: var(--yuzey-yok); }
.card.elevated { box-shadow: var(--yuzey-2); border-color: var(--hat-guclu); }
.card.tap:active { transform: translateY(1px); box-shadow: var(--yuzey-1); }
@media (hover: hover) { .card.tap:hover { border-color: var(--hat-guclu); box-shadow: var(--yuzey-2); transform: none; } }
.quiz, .cl-kart, .cl-ozet, .cz-tip, .cl-sik, .cl-satir, .xr-katman > summary, .xr-diger, .xr-bos, .bos-gun,
.cz-elle > summary, .spot, .empty, .neti-balon, .msg.ai, .toast, .sheet { border-width: 1px; border-color: var(--hat); box-shadow: var(--yuzey-1); }
.spot, .empty { background: var(--surface-2); box-shadow: var(--yuzey-yok); }
.neti-balon::before { border-color: var(--hat); }
input, select, textarea { border-width: 1px; border-color: var(--hat-guclu); }
.chip, .subtabs button { border-width: 1px; border-color: var(--hat-guclu); box-shadow: var(--yuzey-yok); }
.iconbtn { border-width: 1px; border-color: var(--hat); box-shadow: var(--yuzey-yok); }

/* Ana Sayfa panosu: tek büyük katman. Kurucunun istediği tek pano korunur; içeride ritim değişir. */
.ev-pano { border: 1px solid var(--hat); box-shadow: var(--yuzey-2); padding: 20px 18px 18px; gap: 16px; }
.ev-alt2 { border-top: 1px solid var(--hat); padding-top: 16px; }
.ev-kapi { border: 1px solid var(--hat); border-bottom-width: 1px; box-shadow: var(--yuzey-1); }
.ev-kapi:active { transform: translateY(1px); box-shadow: var(--yuzey-yok); }
.ev-kapilar { gap: 12px; margin-top: 18px; }

/* ---- 2) vurgu diyeti: mor yalnız birincil eylem, etkin sekme, ilerleme ---- */
/* "Oyun oyna" ikincil bir yol; hapı nötr yüzey oldu, yalnız ikon moru taşıyor. */
.ev-oyun { font-weight: 700; }
.ev-oyun .ic { color: var(--accent-2); }
/* İkon karoları: dolgu nötr, yalnız glif renk taşır — sekiz mor lekeden ikisi kaldı. */
.ev-kapi > i { background: var(--soft); color: var(--accent-2); }
.karo.mavi { background: var(--soft); color: var(--accent-2); }
.karo.mor { background: var(--soft); color: var(--violet-k); }
.karo.yesil { background: var(--soft); color: var(--good); }
.karo.amber { background: var(--soft); color: var(--alev); }
/* Zayıf nokta çipleri: amber dolgu yerine nötr yüzey + amber yazı. */
.ev-cipler a { background: var(--soft); color: var(--alev); border: 1px solid var(--hat); font-weight: 700; }

/* ---- 3) sessiz tipografi ---- */
/* Büyük harf etiket ekranda dört kez bağırıyordu: küçüldü, inceldi, aralığı azaldı. */
.ev-pano .eyebrow { font-size: 12px; }
/* Tek yüksek ses: kalan gün. */
.ev-sayi b { font-size: 44px; letter-spacing: -.03em; }
.ev-plan b { font-size: 18px; line-height: 1.3; }

/* ---- 4) alt gezinme: kutu yok, iOS ritmi ---- */
.tabs { border-top: 1px solid var(--hat); }
.tabs a .ic { padding: 0; border: 0; border-radius: 0; background: transparent; transition: transform var(--motion-standard) var(--ease-spring), color var(--motion-standard) var(--ease); }
.tabs a.active .ic { background: transparent; border-color: transparent; transform: translateY(-2px); }
.tabs a { gap: 4px; padding: 6px 0 2px; }
.tabs a::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; border-radius: 50%; opacity: 0; transform: translateX(-50%) scale(.4);
  transition: opacity var(--motion-standard) var(--ease), transform var(--motion-standard) var(--ease-spring); }
.tabs a.active::after { opacity: 1; transform: translateX(-50%) scale(1); }
/* İçerik alt çubuğa erisin: sert kesim yerine yumuşak geçiş (kaydırırken premium his). */
.tabs::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px;
  background: var(--perde); pointer-events: none; }
.tabs { position: fixed; }

/* ---- 5) üst çubuk: sadeleşti ---- */
.top { padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 10px; }
.top::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: var(--hat); opacity: 0;
  transition: opacity var(--motion-standard) var(--ease); }
.top.kaydi::after { opacity: 1; }
.top.kaydi { border-bottom-color: transparent; }

/* ---- 6) düğme hiyerarşisi: kalın kenar YALNIZ birincil eylemde ---- */
/* v24 her düğmeye 4 px kenar veriyordu; küçük ve hayalet düğmelerde gürültü oluyordu. */
.btn.sm, .btn.xs { --kenar: 2px; }

/* ---- 7) boş durum daha az "bozuk" görünsün ---- */
.ev-cubuklar i { background: color-mix(in srgb, var(--soft) 70%, transparent); }
.ev-halka { gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .tabs a .ic, .tabs a::after, .top::after { transition: none; }
}

/* ===================== v26 · TIRMANIŞ (piksel oyun arayüzü) =====================
   Tuval düşük çözünürlüklü tampondur; tarayıcı tam sayı katla büyütür (image-rendering: pixelated).
   Arayüz tuvalin üstünde DOM'dur ama piksel diliyle konuşur: köşesiz kutu (yarıçap 0 ölçekte var),
   2 px kalın kenar + tek jetonlu sert alt kenar, Pixelify Sans yalnız sayı/başlık/etiket için;
   soru metni okunurluk için Nunito. Bütün süreler jeton; renkler jeton ya da rgba.               */
:root {
  --pixel: "Pixelify Sans", "Nunito", monospace;
  --piksel-cerceve: inset 0 0 0 2px rgba(0,0,0,.55), 0 4px 0 rgba(0,0,0,.45);
  --piksel-cerceve-basili: inset 0 0 0 2px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.45);
  --tehlike-vinyet: inset 0 0 70px 22px rgba(214,48,68,.55);
  --tr-golge-yazi: 0 2px 0 rgba(0,0,0,.65);
}
.tr-wrap { position: relative; height: min(calc(100dvh - 148px), 760px); min-height: 480px; border-radius: 24px; overflow: hidden; background: var(--kapak-koyu);
  border: 1px solid var(--hat); box-shadow: var(--yuzey-2); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tr-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.tr-wrap.sars { animation: sars var(--motion-structural) var(--ease); }
/* HUD */
.tr-hud { position: absolute; left: 0; right: 0; top: 0; padding: 10px 10px 0; display: flex; justify-content: space-between; align-items: center; z-index: 20; pointer-events: none; }
.tr-hud > * { pointer-events: auto; }
.tr-btn { width: 40px; height: 40px; border-radius: 12px; background: rgba(8,10,20,.62); border: 2px solid rgba(255,255,255,.2); color: var(--uzeri); display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: transform var(--motion-instant) var(--ease-snap), background-color var(--motion-fast) var(--ease); }
.tr-btn:active { transform: translateY(2px); } .tr-btn.kapali { opacity: .45; }
.tr-yuk { font-family: var(--pixel); font-size: 26px; color: var(--uzeri); text-shadow: var(--tr-golge-yazi); display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; line-height: 1; }
.tr-yuk b { font-weight: 700; } .tr-yuk small { font-size: 13.5px; opacity: .85; }
/* geri sayım ve orta yazılar */
.tr-orta { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 10; }
.tr-say { font-family: var(--pixel); font-size: 44px; color: var(--uzeri); text-shadow: var(--tr-golge-yazi); animation: pop var(--motion-reveal) var(--ease-spring) both; }
/* soru kartı: alttan gelir, yükseklik sabit (uzun Türkçe sarar ama yerleşim kaymaz) */
.tr-soru { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 10; background: rgba(10,12,24,.88); border: 2px solid rgba(255,255,255,.16); border-radius: 0; box-shadow: var(--piksel-cerceve);
  padding: 10px 12px 12px; color: var(--uzeri); transition: transform var(--motion-structural) var(--ease-enter), opacity var(--motion-standard) var(--ease); }
.tr-soru.gizli { transform: translateY(112%); opacity: 0; pointer-events: none; }
.tr-konu { font-family: var(--pixel); font-size: 12px; letter-spacing: .04em; color: var(--accent-2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-prompt { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 4px 0 10px; min-height: 2.6em; overflow-wrap: anywhere; text-wrap: balance; }
.tr-sik { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-sik button { min-height: 56px; border: 2px solid rgba(255,255,255,.24); border-radius: 0; background: rgba(255,255,255,.08); color: var(--uzeri); font: 700 16px/1.25 var(--body); padding: 8px 10px; overflow-wrap: anywhere; cursor: pointer; box-shadow: var(--piksel-cerceve);
  transition: transform var(--motion-instant) var(--ease-snap), background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.tr-sik button:active { transform: translateY(2px); box-shadow: var(--piksel-cerceve-basili); }
.tr-sik button.dogru { background: var(--good); border-color: var(--good-k); color: var(--uzeri); }
.tr-sik button.yanlis { background: var(--bad); border-color: var(--bad-k); color: var(--uzeri); }
.tr-sik button:disabled { cursor: default; }
/* tehlike: kenarlarda kızıl vinyet + nabız, ortada etiket */
.tr-tehlike { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; box-shadow: var(--tehlike-vinyet); transition: opacity var(--motion-standard) var(--ease); }
.tr-tehlike.acik { opacity: 1; animation: trNabiz var(--motion-cinematic) ease-in-out infinite; }
@keyframes trNabiz { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.tr-etiket { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) scale(.8); font-family: var(--pixel); font-size: 26px; letter-spacing: .06em; color: var(--uzeri); text-shadow: var(--tr-golge-yazi); opacity: 0; z-index: 10; pointer-events: none;
  transition: opacity var(--motion-standard) var(--ease), transform var(--motion-reveal) var(--ease-spring); }
.tr-etiket.acik { opacity: 1; transform: translateX(-50%) scale(1); }
/* kontrol noktası şeridi */
.tr-kontrol { position: absolute; left: 0; right: 0; top: 26%; display: grid; justify-items: center; gap: 2px; z-index: 10; pointer-events: none; color: var(--uzeri); text-shadow: var(--tr-golge-yazi); opacity: 0; transform: translateY(8px); transition: opacity var(--motion-standard) var(--ease), transform var(--motion-reveal) var(--ease-spring); }
.tr-kontrol.acik { opacity: 1; transform: none; }
.tr-kontrol small { font-family: var(--pixel); font-size: 12px; letter-spacing: .12em; opacity: .85; }
.tr-kontrol b { font-family: var(--pixel); font-size: 34px; font-weight: 700; letter-spacing: .02em; }
/* duraklatma ve karartma */
.tr-durak { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(6,8,16,.74); color: var(--uzeri); cursor: pointer; }
.tr-durak b { font-family: var(--pixel); font-size: 26px; } .tr-durak span { font-size: 13.5px; color: var(--muted); }
.tr-karart { position: absolute; inset: 0; z-index: 40; background: var(--kapak-koyu); opacity: 0; pointer-events: none; transition: opacity var(--motion-reveal) var(--ease); }
/* giriş: gerçek oyunun üstünde */
.tr-giris { position: absolute; inset: 0; z-index: 30; display: grid; align-items: end; }
.tr-giris-ic { padding: 18px 16px 16px; display: grid; gap: 10px; }
.tr-baslik { font-family: var(--pixel); font-size: 44px; line-height: 1; color: var(--uzeri); text-shadow: var(--tr-golge-yazi); letter-spacing: .04em; }
.tr-alt { margin: 0; color: var(--hero-muted); font-size: 15px; line-height: 1.4; max-width: 34ch; }
.tr-rekor { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pixel); font-size: 15px; color: var(--alev); }
.tr-modlar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.tr-modlar::-webkit-scrollbar { display: none; }
.tr-mod { flex: 0 0 auto; display: grid; gap: 1px; text-align: left; min-width: 98px; padding: 8px 10px; border: 2px solid rgba(255,255,255,.18); border-radius: 0; background: rgba(255,255,255,.06); color: var(--uzeri); cursor: pointer; font: inherit; }
.tr-mod b { font-family: var(--pixel); font-size: 15px; } .tr-mod span { font-size: 12px; color: var(--muted); }
.tr-mod.on { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent) 28%, transparent); }
.tr-giris-alt { display: flex; align-items: center; gap: 10px; }
.tr-basla { flex: 1 1 auto; font-family: var(--pixel); font-size: 20px; letter-spacing: .06em; min-height: 52px; border-radius: 0; }
/* sonuç */
.tr-sonuc-kart { margin-top: 12px; } .tr-sonuc-ic { position: relative; z-index: 1; }
.tr-sonuc-ust { font-family: var(--pixel); font-size: 15px; letter-spacing: .12em; color: var(--hero-muted); }
.tr-sonuc-m { font-family: var(--pixel); font-size: 44px; line-height: 1; color: var(--uzeri); margin: 6px 0 4px; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.tr-sonuc-m small { font-size: 18px; color: var(--hero-muted); }
.tr-sonuc-alt { color: var(--hero-muted); font-size: 15px; }
.tr-statlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.tr-stat { background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 4px; text-align: center; }
.tr-stat b { display: block; font-family: var(--pixel); font-size: 20px; color: var(--uzeri); } .tr-stat span { font-size: 12px; color: var(--hero-muted); }
.tr-konular { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-konular .eyebrow { width: 100%; color: var(--hero-muted); }
.tr-konular .tag.zayif { background: rgba(255,255,255,.12); color: var(--uzeri); }
.tr-not { margin: 10px 0 0; } .card.hero .tr-not { color: var(--hero-muted); }
.tr-sonuc-eylem { margin-top: 12px; }
.tr-dogru-cevap { display: inline; } .tr-neden { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.tr-canli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 360px) { .tr-statlar { grid-template-columns: repeat(2, 1fr); } .tr-baslik { font-size: 34px; } .tr-prompt { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .tr-tehlike.acik, .tr-say, .tr-wrap.sars { animation: none; } .tr-soru, .tr-etiket, .tr-kontrol, .tr-karart { transition: none; } }
/* v26 ek: altimetre — sağ kenarda bölge şeridi (kamp→zirve renkleri), konum işareti yükseklikle tırmanır */
.tr-alti { position: absolute; right: 14px; top: 70px; width: 8px; height: 40%; border-radius: 999px; border: 2px solid rgba(255,255,255,.22); overflow: visible; z-index: 20; pointer-events: none;
  background: linear-gradient(to top, var(--tr-alti-kamp) 0 12%, var(--tr-alti-kaya) 12% 37%, var(--tr-alti-bulut) 37% 62%, var(--tr-alti-buz) 62% 87%, var(--tr-alti-hamle) 87% 100%); }
.tr-alti i { position: absolute; left: -6px; bottom: 0; width: 16px; height: 4px; margin-bottom: -2px; background: var(--uzeri); border: 1px solid rgba(0,0,0,.6); transition: bottom var(--motion-reveal) var(--ease-flow); }
.tr-alti span { position: absolute; left: -4px; width: 12px; height: 1px; background: rgba(255,255,255,.55); }
.tr-alti .k1 { bottom: 12%; } .tr-alti .k2 { bottom: 37%; } .tr-alti .k3 { bottom: 62%; } .tr-alti .k4 { bottom: 87%; }
:root { --tr-alti-kamp: #6E5240; --tr-alti-kaya: #7E6A5F; --tr-alti-bulut: #6A6B78; --tr-alti-buz: #7B889E; --tr-alti-hamle: #2E3444; }
/* giriş perdesi daha ince: dağ görünsün */
.tr-giris { background: linear-gradient(to top, rgba(6,8,16,.94) 0%, rgba(6,8,16,.62) 46%, rgba(6,8,16,0) 78%); }
/* v26 ek: oyun bitti — arena küçülür, sahne loş kalır; sonuç kartı hemen altında */
.tr-wrap { transition: height var(--motion-reveal) var(--ease-enter); }
.tr-wrap.bitti { height: 300px; min-height: 0; }
.tr-karart.acik { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .tr-wrap { transition: none; } }


/* =====================================================================================
   v27 · FİLDİŞİ TEMA — "zirveye giden yol"
   Kurucunun seçtiği yön: sıcak fildişi zemin, derin lacivert tipografi, tek kraliyet
   mavisi, ölçülü altın. Editoryal serif YALNIZ kahraman ve bölüm başlıklarında; arayüzün
   tamamı Plus Jakarta Sans. Yüzey oranı hedefi: %70-75 fildişi/beyaz, %15-20 lacivert,
   %5-8 mavi, altın bir tutam. Mavi her yerde OLMADIĞI için önemli görünüyor.

   AÇIK TEMA VARSAYILANDIR (v25 koyuyu varsayılan yapmıştı). Koyu tema ikincil olarak
   yaşamaya devam eder: aynı jetonlar, lacivert tabanlı — mor tamamen çıktı.
   Not: seçiciler v25'in :root[data-tema="acik"] bloğuyla aynı özgüllükte yazıldı ki
   dosyada sonra geldiği için kazansın.
   ===================================================================================== */
:root, :root[data-tema="acik"], :root[data-tema="sistem"] {
  /* --- zemin ve mürekkep --- */
  --bg: #F7F4EE;
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;
  --surface-3: #F2EEE6;
  --soft: #EAF1FF;
  --ink: #0B1736;
  --ink-2: #18274A;
  --muted: #5C6577;          /* beyazda 6,0:1, fildişinde 5,6:1 — ölçüldü (eski #6E7789 4,1) */
  --line: #E6E1D6;
  --kapak-koyu: #0B1736;
  --hero-muted: #C7D2E8;
  /* --- vurgular: tek mavi, tek altın --- */
  --accent: #2F6BFF;
  --accent-k: #17469C;
  --accent-2: #17469C;
  --accent-ink: #FFFFFF;
  --blue: #2F6BFF;
  --blue-k: #17469C;
  --violet: #17469C;
  --violet-k: #17469C;
  --gold: #E7B04B;
  --gold-k: #A87A22;
  --warm: #F29B38;
  --alev: #E7B04B;
  --alev-k: #A87A22;
  --alev-d: #A87A22;
  /* io78: dolu kalp/alev, sınav adı parlaması, avatar aileleri */
  --kalp-parla: color-mix(in srgb, var(--kalp) 55%, transparent); --alev-parla: color-mix(in srgb, var(--alev-ates) 60%, transparent); --ikon-ic: #FFD166;
  --av-mavi: #3B82F6; --av-mor: #8B5CF6; --av-yesil: #22C55E; --av-turuncu: #F97316; --av-pembe: #EC4899; --av-camgobegi: #06B6D4;
  --kt-demo: 8000ms; --kt-demo-2: -6000ms; --kt-demo-3: -4000ms; --kt-demo-4: -2000ms;
  --gunes: #E7B04B;
  --gunes-k: #A87A22;
  --good: #26A77B;
  --good-k: #1B8462;
  --good-d: #1B8462;
  --nane: #26A77B;
  --bad: #D95454;
  --bad-k: #B93E3E;
  --bad-d: #B93E3E;
  --mercan: #D95454;
  --warn: #F29B38;
  --info: #2F6BFF;
  --nav-idle: #5C6577;       /* etkin olmayan sekme etiketi 2,8:1 idi */
  --nav-active: #0B1736;
  /* --- kenar, gölge, perde: gölgeler mavi-gri ve çok ölçülü --- */
  --hat: #E6E1D6;
  --hat-guclu: #D9D2C4;
  --yuzey-1: 0 1px 2px rgba(20,35,70,.04), 0 10px 30px -18px rgba(20,35,70,.18);
  --yuzey-2: 0 2px 8px rgba(20,35,70,.06), 0 22px 48px -24px rgba(20,35,70,.26);
  --yuzey-yok: 0 0 0 0 rgba(0,0,0,0);
  --shadow-1: var(--yuzey-1);
  --shadow-2: var(--yuzey-2);
  --shadow-3: 0 30px 60px -30px rgba(11,23,54,.32);
  --shadow-basma: 0 1px 2px rgba(11,23,54,.12);
  --perde: linear-gradient(to top, var(--bg) 14%, transparent);
  --tint: #EAF1FF;
  --tint-blue: #EAF1FF;
  --tint-good: #E4F4EE;
  --tint-violet: #E7EDFA;
  --tint-warn: #FDF0DC;
  --tint-bad: #FBE9E9;
  --grad: linear-gradient(135deg, #17469C 0%, #2F6BFF 100%);
  --hero: linear-gradient(155deg, #0B1736 0%, #14275A 58%, #17469C 100%);
  /* --- yazı --- */
  --display: "Plus Jakarta Sans", "Nunito", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", "Nunito", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  /* --- geometri: küçük 12, kart 20, kahraman 28 --- */
  --r-xs: 12px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 24px;
  --r-hero: 28px;
  --r-pano: 28px;
  --kenar: 0px;             /* Duolingo'nun kalın alt kenarı kalktı: burada derinlik gölgeyle */
  /* --- hareket: dokunuş 90, geçiş 200/240, açılış 320/420 --- */
  --ease-enter: cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.32, 0, .12, 1);
  --motion-reveal: 420ms;
  /* --- ölçek --- */
  --yazi-kahraman: clamp(30px, 8.4vw, 40px);
  --yazi-bolum: 26px;
  --yazi-kart: 18px;
  --yazi-govde: 15px;
  --yazi-meta: 12px;
  --sayfa-yan: 18px;   /* #view yan dolgusuyla birebir: şeridin tam genişliğe taşması buna bağlı */
  --yuzey-cta: 0 8px 20px -10px rgba(11,23,54,.6);
  --cta-yuz: #0B1736;   /* birincil kahraman düğmesinin yüzü; koyu temada maviye döner */
  --gold-yazi: #8A6320;
  --baglanti: #17469C;       /* bölüm başlığındaki "Tümü" gibi ikincil bağlantılar */   /* fildişi üstünde 4,6:1 — etiket metni için; parlak altın yalnız koyu zeminde */
}
@media (prefers-color-scheme: dark) {  }

/* ---------- tipografi: serif yalnız editoryal anlarda ---------- */
body { font-family: var(--body); letter-spacing: -.005em; }
h1 { font-family: var(--serif); font-weight: 400; font-size: var(--yazi-bolum); letter-spacing: 0; line-height: 1.12; color: var(--ink); }
h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; }
.eyebrow, .t-label { font-family: var(--display); font-size: var(--yazi-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }

/* ---------- kart ve düğme: kenar ince, gölge ölçülü, basma 1 px ---------- */
.card { border-radius: var(--r); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); }
.btn { font-family: var(--display); border-bottom-width: 1px; }
/* ---------- üst çubuk: sessiz, marka serif ---------- */
.top .brand > span:last-child { font-family: var(--serif); font-weight: 400; letter-spacing: 0; font-size: var(--yazi-kart); }
.ust-durum { background: var(--surface); border: 1px solid var(--hat); color: var(--ink); }   /* io93 */
/* ---------- alt gezinme ---------- */
.tabs a { color: var(--nav-idle); }
.tabs a.on { color: var(--nav-active); }
.tabs a::after { background: var(--nav-active); }

/* =====================================================================================
   ANA SAYFA
   Sıra: selam → kahraman (tek sonraki hamle) → dört modül → durum şeridi → oyunlar → içgörü.
   Her bölüm varlığını hak etmeli; veri yoksa bölüm ya düşer ya dürüst boş durumla gelir.
   ===================================================================================== */
.ev-selam { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 14px; }
.ev-selam b { font-family: var(--serif); font-size: var(--yazi-kart); color: var(--ink); letter-spacing: 0; }
.ev-selam > span:first-child { color: var(--muted); font-size: var(--yazi-govde); }
.ev-selam .ev-sinav { color: var(--muted); font-size: var(--yazi-meta); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.ev-selam .ev-sinav b { font-family: var(--display); font-weight: 800; color: var(--ink-2); font-size: var(--yazi-meta); }

/* --- kahraman: illüstrasyonun fildişi göğü başlığın zeminidir --- */
.ev-kahraman { position: relative; border-radius: var(--r-hero); overflow: hidden; background: var(--surface);
  border: 1px solid var(--hat); box-shadow: var(--yuzey-2); }
.ev-kh-sahne { position: relative; aspect-ratio: 3 / 2; }
.ev-kh-sahne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
/* Metin artık resmin ÜSTÜNDE DEĞİL, kartın kendi zemininde: her başlık uzunluğunda
   4,5:1 karşıtlık garanti. Perde gerekmiyor. */
.ev-kh-sahne::after { content: ""; position: absolute; inset: 0; background: none; }
.ev-kh-yazi { position: static; padding: 22px 20px 18px; }
.ev-kh-yazi .eyebrow { color: var(--gold-yazi); }
.ev-kh-bas { font-family: var(--serif); font-weight: 400; font-size: var(--yazi-kahraman); letter-spacing: -.01em;
  color: var(--ink); margin: 8px 0 0; text-wrap: balance; overflow-wrap: anywhere; }
.ev-kh-alt-yazi { margin: 8px 0 0; color: var(--ink-2); font-size: var(--yazi-govde); line-height: 1.45; max-width: 30ch; opacity: .85; }
.ev-kh-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 18px; background: var(--surface); }
.ev-kh-cta { border: 0; min-height: 48px; padding: 0 20px; gap: 10px; }
.ev-kh-meta { color: var(--muted); font-size: var(--yazi-meta); text-align: right; line-height: 1.35; }
.ev-kh-meta b { color: var(--ink-2); font-weight: 800; }

/* --- dört modül --- */
.ev-moduller { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.ev-modul { position: relative; display: block; background: var(--surface); border: 1px solid var(--hat); border-radius: var(--r);
  padding: 16px 16px 14px; box-shadow: var(--yuzey-1); color: inherit; text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-enter), box-shadow var(--motion-standard) var(--ease-enter); }
.ev-modul:active { transform: translateY(1px); box-shadow: var(--yuzey-yok); }
@media (hover: hover) { .ev-modul:hover { transform: translateY(-2px); box-shadow: var(--yuzey-2); } }
.ev-modul > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-xs); background: var(--soft); color: var(--accent-k); margin-bottom: 12px; }
.ev-modul > b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--yazi-kart); letter-spacing: -.015em; color: var(--ink); }
.ev-modul > span { display: block; margin-top: 3px; color: var(--muted); font-size: var(--yazi-meta); line-height: 1.4; }
.ev-modul > .ic { position: absolute; right: 14px; top: 20px; color: var(--muted); opacity: .45; transform: scaleX(-1); }

/* --- durum şeridi: seri + bugün + konu --- */
.ev-durum { display: flex; align-items: stretch; gap: 0; margin-top: 14px; background: var(--surface);
  border: 1px solid var(--hat); border-radius: var(--r); box-shadow: var(--yuzey-1); overflow: hidden; }
.ev-durum > div { flex: 1; padding: 15px 12px; text-align: center; }
.ev-durum > div + div { border-left: 1px solid var(--hat); }
.ev-durum b { display: block; white-space: nowrap; font-family: var(--serif); font-weight: 400; font-size: var(--yazi-bolum); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-durum b .kucuk { font-family: var(--display); font-size: var(--yazi-meta); font-weight: 700; color: var(--muted); }
.ev-durum span { display: block; margin-top: 6px; color: var(--muted); font-size: var(--yazi-meta); }
.ev-durum .seri b { color: var(--gold-k); display: flex; align-items: center; justify-content: center; gap: 6px; }
.ev-durum .seri .ic { display: block; flex: none; }
.ev-durum-bos { margin-top: 14px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--hat); border-radius: var(--r); color: var(--muted); font-size: var(--yazi-govde); line-height: 1.5; }

/* --- bölüm başlığı --- */
.ev-bolum { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.ev-bolum h2 { font-family: var(--serif); font-weight: 400; font-size: var(--yazi-bolum); letter-spacing: 0; line-height: 1.1; margin: 4px 0 0; color: var(--ink); }
.ev-bolum a { font-size: var(--yazi-meta); font-weight: 700; color: var(--baglanti); white-space: nowrap; text-decoration: none; }

/* --- oyunlar: çalışma arayüzü sakin, oyun arayüzü sinematik --- */
.ev-one { position: relative; display: block; border-radius: var(--r-hero); overflow: hidden; background: var(--kapak-koyu);
  box-shadow: var(--yuzey-2); color: #FFFFFF; text-decoration: none; }
/* height: auto ŞART — <img height> sunum ipucu aspect-ratio'yu eziyor, kapak dikey uzuyordu. */
.ev-one img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ev-one::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,12,28,.95) 0%, rgba(6,12,28,.88) 26%, rgba(6,12,28,.62) 50%, rgba(6,12,28,.2) 74%, rgba(6,12,28,0) 100%); }
.ev-one-yazi { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; z-index: 1; }
/* Marka adı büyük harfe ÇEVRİLMEZ: Türkçe i→İ "FORMULA DRİVE" yapıyor. */
.ev-one-yazi .eyebrow { color: var(--gold); text-transform: none; letter-spacing: .06em; font-size: var(--yazi-govde); }
.ev-one-ad { font-family: var(--serif); font-weight: 400; font-size: var(--yazi-bolum); line-height: 1.08; margin: 6px 0 0; color: #FFFFFF; }
.ev-one-alt { margin: 6px 0 0; color: rgba(255,255,255,.78); font-size: var(--yazi-govde); line-height: 1.4; }
.ev-one-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 40px; padding: 0 16px;
  background: #FFFFFF; color: var(--kapak-koyu); font-family: var(--display); font-weight: 700; font-size: var(--yazi-govde); }
.ev-one:active { transform: translateY(1px); }

.ev-serit { display: grid; grid-auto-flow: column; grid-auto-columns: 58%; gap: 12px; margin-top: 12px; overflow-x: auto;
  margin-inline: calc(var(--sayfa-yan) * -1); padding-inline: var(--sayfa-yan); scroll-padding-inline: var(--sayfa-yan);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.ev-serit::-webkit-scrollbar { display: none; }
.ev-oyun { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--kapak-koyu);
  scroll-snap-align: start; color: #FFFFFF; text-decoration: none; box-shadow: var(--yuzey-1); }
.ev-oyun img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ev-oyun::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,12,28,.9) 8%, rgba(6,12,28,.25) 52%, rgba(6,12,28,0) 78%); }
.ev-oyun-yazi { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 13px 13px; z-index: 1; }
.ev-oyun-yazi b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--yazi-govde); letter-spacing: -.01em; }
.ev-oyun-yazi span { display: block; margin-top: 2px; color: rgba(255,255,255,.72); font-size: var(--yazi-meta); line-height: 1.35; }
.ev-oyun-rekor { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 4px 9px; border-radius: 999px;
  background: rgba(6,12,28,.62); color: #FFFFFF; font-size: var(--yazi-meta); font-weight: 700; }

/* --- içgörü listesi --- */
.ev-icgoru { margin-top: 12px; background: var(--surface); border: 1px solid var(--hat); border-radius: var(--r); box-shadow: var(--yuzey-1); overflow: hidden; }
.ev-icgoru > a, .ev-icgoru > div { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; color: inherit; text-decoration: none; }
.ev-icgoru > * + * { border-top: 1px solid var(--hat); }
.ev-icgoru i.karo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-xs); background: var(--soft); color: var(--accent-k); }
.ev-icgoru b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--yazi-govde); color: var(--ink); }
.ev-icgoru p { margin: 2px 0 0; color: var(--muted); font-size: var(--yazi-meta); line-height: 1.45; }
.ev-cip { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.ev-cip a { padding: 7px 13px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hat); color: var(--ink-2);
  font-size: var(--yazi-meta); font-weight: 700; text-decoration: none; }

/* --- açılış kademesi: her bölüm görünür durumdan başlar, sadece hafifçe yükselir --- */
@media (prefers-reduced-motion: no-preference) {
  .ev-kahraman, .ev-moduller, .ev-durum, .ev-durum-bos, .ev-bolum, .ev-one, .ev-serit, .ev-icgoru { animation: evGir var(--motion-reveal) var(--ease-enter) both; }
  .ev-moduller { animation-delay: 40ms; } .ev-durum, .ev-durum-bos { animation-delay: 80ms; }
  .ev-bolum { animation-delay: 100ms; } .ev-one { animation-delay: 120ms; } .ev-serit { animation-delay: 150ms; } .ev-icgoru { animation-delay: 180ms; }
  @keyframes evGir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* --- dar telefon (360 px) --- */
@media (max-width: 372px) {
  :root { --sayfa-yan: 16px; }
  .ev-modul { padding: 14px 13px 12px; }
  .ev-modul > i { width: 34px; height: 34px; margin-bottom: 10px; }
  .ev-durum > div { padding: 13px 8px; }
  .ev-kh-yazi { padding: 18px 17px 15px; }
}
/* --- geniş telefon ve üstü: kahraman yanyana, moduller dört sütun --- */
@media (min-width: 560px) {
  .ev-moduller { grid-template-columns: repeat(4, 1fr); }
  .ev-serit { grid-auto-columns: 32%; }
  .ev-kh-alt-yazi { max-width: 42ch; }
}

/* v27 ek: üst çubuk sakinleşti — avatar lacivert, ikon düğmesi kenarlı beyaz. */
.avatar { color: #FFFFFF; font-family: var(--display); font-weight: 700; }
.top .iconbtn { background: var(--surface); color: var(--ink-2); }

/* v27 ek 2: içgörü satırındaki ok sağa baksın (back ikonu sola bakıyor). */
.ev-icgoru > a > .ic { flex: none; margin-left: auto; align-self: center; color: var(--muted); opacity: .45; transform: scaleX(-1); }
.ev-icgoru > a > span { flex: 1; }

/* v27 ek 3: marka adları büyük harfe çevrilmez — Türkçe i→İ "DRİVE" yapıyor. */
.eyebrow.marka, .t-label.marka { text-transform: none; letter-spacing: .04em; }

/* v27 ek 4: basma sözleşmesi — her yüzey 1 px iner.
   :hover ve :active aynı anda eşleşiyor; hover kuralı transform'u sıfırlamasın diye
   iki durumlu seçici gerekiyor (özgüllük :hover'dan yüksek). */
.chip:active, .iconbtn:active { transform: translateY(1px); }
@media (hover: hover) { .card.tap:hover:active { transform: translateY(1px); } }

/* v27 ek 5: erişilebilirlik denetimi düzeltmeleri (tarayıcıda ölçüldü).
   Dokunma hedefi 44 px — görsel boy değil, HEDEF büyüyor. */
.ud-alev b { color: var(--gold-yazi); }   /* io93 */
.avatar { width: 44px; height: 44px; }
.ev-bolum a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; padding-inline: 6px; margin-inline-end: -6px; }
.ev-cip a { min-height: 44px; display: inline-flex; align-items: center; }

/* v27 ek 6: kahraman şeridi ekran genişledikçe sinematikleşir (dikey yer kaplamasın). */
@media (min-width: 560px) { .ev-kh-sahne { aspect-ratio: 21 / 9; } }
@media (orientation: landscape) and (max-height: 520px) { .ev-kh-sahne { aspect-ratio: 32 / 9; } }


/* =====================================================================================
   v28 · KOYU TEMA — tasarlanmış gece modu (ters çevrilmiş açık tema değil)
   Açık temada derinlik kâğıt + yumuşak gölgeyle gelir. Koyuda gölge çalışmaz: derinlik
   YÜZEY BASAMAĞI ve ÜST KENAR IŞIĞI ile kurulur. Tipografi, boşluk, yerleşim aynı kalır.
   ===================================================================================== */
:root, :root[data-tema="acik"] {
  --medya-filtre: none;          /* açık temada fotoğraf olduğu gibi */
  --kapak-kenar: transparent;
}
:root[data-tema="koyu"] {
  --bg: #070B16;                 /* zemin derinleşti ki kart üstüne çıksın */
  --surface: #111A2E;            /* kart — zeminle farkı artık okunuyor */
  --surface-2: #16203A;          /* sessiz kart, boş durum */
  --surface-3: #1C2848;
  --soft: #21304F;               /* ikon karosu: bir basamak açık */
  --ink: #EAF0F9;                /* kırık beyaz: ince serifte hâle yapmaz */
  --ink-2: #C3CFE4;
  --muted: #94A2BC;
  --line: #26324F;
  --hat: rgba(255,255,255,.11);
  --hat-guclu: rgba(255,255,255,.17);
  --accent: #6D9BFF;
  --accent-k: #8FB4FF;           /* koyuda ikon glifi ve bağlantı AÇILIR, koyulaşmaz */
  --accent-2: #9CBBFF;
  --blue: #6D9BFF;
  --blue-k: #3F73E8;
  --violet: #9CBBFF;
  --violet-k: #9CBBFF;
  --gold: #E7B04B;
  --gold-k: #E7B04B;
  --gold-yazi: #E7B04B;
  --baglanti: #9CBBFF;
  --cta-yuz: #2757D8;
  --nav-idle: #9AA8C4;
  --nav-active: #9CBBFF;
  --grad: linear-gradient(135deg, #6D9BFF 0%, #9CBBFF 100%);
  --hero: linear-gradient(155deg, #0B1736 0%, #16255A 60%, #1E3A86 100%);
  --tint: #182449;
  --tint-blue: #182449;
  --tint-good: #12332C;
  --tint-violet: #1C2752;
  --tint-warn: #322718;
  --tint-bad: #371C21;
  --surface-0: var(--bg);
  /* Derinlik: siyah gölge değil, ÜST KENAR IŞIĞI + derin yayılma. */
  --yuzey-1: inset 0 1px 0 rgba(255,255,255,.075), 0 10px 30px -20px rgba(0,0,0,.95);
  --yuzey-2: inset 0 1px 0 rgba(255,255,255,.10), 0 22px 50px -26px rgba(0,0,0,1);
  --yuzey-yok: 0 0 0 0 rgba(0,0,0,0);
  --shadow-1: var(--yuzey-1);
  --shadow-2: var(--yuzey-2);
  --shadow-3: 0 30px 60px -30px rgba(0,0,0,1);
  --yuzey-cta: 0 10px 24px -14px rgba(0,0,0,.9);   /* koyuda RENKLİ hâle yok: brief parlamayı yasaklıyor */
  --perde: linear-gradient(to top, var(--bg) 14%, transparent);
  /* Medya gece modunda bir tık kısılır: parlak fotoğraf koyu sayfada göz almasın. */
  --medya-filtre: brightness(.92) saturate(.97);
  --kapak-kenar: rgba(255,255,255,.12);
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistem"] {
    --bg: #070B16;                 /* zemin derinleşti ki kart üstüne çıksın */
    --surface: #111A2E;            /* kart — zeminle farkı artık okunuyor */
    --surface-2: #16203A;          /* sessiz kart, boş durum */
    --surface-3: #1C2848;
    --soft: #21304F;               /* ikon karosu: bir basamak açık */
    --ink: #EAF0F9;                /* kırık beyaz: ince serifte hâle yapmaz */
    --ink-2: #C3CFE4;
    --muted: #94A2BC;
    --line: #26324F;
    --hat: rgba(255,255,255,.11);
    --hat-guclu: rgba(255,255,255,.17);
    --accent: #6D9BFF;
    --accent-k: #8FB4FF;           /* koyuda ikon glifi ve bağlantı AÇILIR, koyulaşmaz */
    --accent-2: #9CBBFF;
    --blue: #6D9BFF;
    --blue-k: #3F73E8;
    --violet: #9CBBFF;
    --violet-k: #9CBBFF;
    --gold: #E7B04B;
    --gold-k: #E7B04B;
    --gold-yazi: #E7B04B;
    --baglanti: #9CBBFF;
    --cta-yuz: #2757D8;
    --nav-idle: #9AA8C4;
    --nav-active: #9CBBFF;
    --grad: linear-gradient(135deg, #6D9BFF 0%, #9CBBFF 100%);
    --hero: linear-gradient(155deg, #0B1736 0%, #16255A 60%, #1E3A86 100%);
    --tint: #182449;
    --tint-blue: #182449;
    --tint-good: #12332C;
    --tint-violet: #1C2752;
    --tint-warn: #322718;
    --tint-bad: #371C21;
    --surface-0: var(--bg);
    /* Derinlik: siyah gölge değil, ÜST KENAR IŞIĞI + derin yayılma. */
    --yuzey-1: inset 0 1px 0 rgba(255,255,255,.075), 0 10px 30px -20px rgba(0,0,0,.95);
    --yuzey-2: inset 0 1px 0 rgba(255,255,255,.10), 0 22px 50px -26px rgba(0,0,0,1);
    --yuzey-yok: 0 0 0 0 rgba(0,0,0,0);
    --shadow-1: var(--yuzey-1);
    --shadow-2: var(--yuzey-2);
    --shadow-3: 0 30px 60px -30px rgba(0,0,0,1);
    --yuzey-cta: 0 10px 24px -14px rgba(0,0,0,.9);   /* koyuda RENKLİ hâle yok: brief parlamayı yasaklıyor */
    --perde: linear-gradient(to top, var(--bg) 14%, transparent);
    /* Medya gece modunda bir tık kısılır: parlak fotoğraf koyu sayfada göz almasın. */
    --medya-filtre: brightness(.92) saturate(.97);
    --kapak-kenar: rgba(255,255,255,.12);
  }
}
/* Tek kural, iki tema: filtre jetondan gelir. Oyun tuvali (Tırmanış) DIŞARIDA —
   oyun kendi ışığını kendi kurar, kısılmaz. */
.ev-kh-sahne img, .ev-one img, .ev-oyun img, .oy-gorsel { filter: var(--medya-filtre); }
/* Koyu kapağın koyu sayfada nerede bittiği belli olsun. */
.ev-one, .ev-oyun { border: 1px solid var(--kapak-kenar); }


/* =====================================================================================
   v29 · MOR / SİYAH TEMA — GERİ GELDİ (2026-09-09, kurucu kararı)
   Fildişi yön (v27–v28) iptal. Kurucunun altı rengi, Nunito ve Duolingo'nun alt kenarı
   geri geldi. TEK TEMA: Hesap'ta görünüm seçeneği yok, cihazda kayıtlı değer ne olursa
   olsun (acik/koyu/sistem) ekran mor çıkar — bu yüzden jetonlar dört seçiciye birden verilir.
   Ana Sayfa'nın YERLEŞİMİ ve fildişi turunda kazanılan erişilebilirlik düzeltmeleri kalır.
   Tırmanış'ın piksel arayüzü (v26) ve games/ altındaki hiçbir şey DEĞİŞMEDİ.
   ===================================================================================== */
:root {
  /* --- kurucunun altı rengi ve türevleri --- */
  --bg: #0B0D17;
  --surface: #141827;
  --surface-2: #191E31;
  --surface-3: #1F2540;
  --surface-0: #0B0D17;
  --soft: #1F2540;
  --line: #262D49;
  --ink: #F5F7FB;
  --ink-2: #C9CEE0;
  --muted: #9AA3B2;
  --kapak-koyu: #0B0D17;
  --hero-muted: #C4BFE6;
  --accent: #7C5CFF;
  --accent-k: #6242E6;
  /* Kontrast türevleri (denetim #19, ölçülerek belirlendi — bkz. p266).
     --accent DEĞİŞMEDİ: marka moru bu. Bunlar yalnız okunabilirlik için. */
  --accent-yuzey: #7255EB;   /* beyaz yazının altındaki dolgu · beyazla 4.98:1 */
  --accent-yazi:  #967DFF;   /* koyu yüzeydeki küçük yazı · --soft üstünde 4.78:1 */
  --accent-2: #9B7BFF;
  --accent-ink: #FFFFFF;
  --blue: #4F7CFF;
  --blue-k: #3B63E0;
  --violet: #9B7BFF;
  --violet-k: #B79DFF;
  --gold: #FFB547;
  --gold-k: #FFB547;
  --gold-yazi: #FFB547;
  --alev: #FFB547;
  --alev-k: #E0952A;
  --alev-d: #FFB547;
  --kalp: #FF5C66; --alev-ates: #FF8A3D; --av-yuz-acik: #FFE8CC; --av-cizgi-koyu: #111827;   /* io78 */
  --gunes: #FFB547;
  --gunes-k: #E0952A;
  --warn: #FFB547;
  --good: #2DBE6C;
  --good-k: #229A56;
  --good-d: #2DBE6C;
  --nane: #2DBE6C;
  --bad: #FF6B7A;
  --bad-k: #E14B5A;
  --bad-d: #FF6B7A;
  --mercan: #FF6B7A;
  --info: #4F7CFF;
  --baglanti: #9B7BFF;
  --cta-yuz: #7C5CFF;
  --nav-idle: #9AA3B2;
  --nav-active: #9B7BFF;
  --grad: linear-gradient(135deg, #7C5CFF 0%, #9B7BFF 100%);
  --hero: linear-gradient(150deg, #1E1A45 0%, #271F5F 55%, #2E2470 100%);
  --tint: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --tint-blue: color-mix(in srgb, var(--blue) 18%, var(--surface));
  --tint-good: color-mix(in srgb, var(--good) 16%, var(--surface));
  --tint-violet: color-mix(in srgb, var(--accent-2) 18%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn) 16%, var(--surface));
  --tint-bad: color-mix(in srgb, var(--bad) 16%, var(--surface));
  /* --- yüzey ve derinlik (v25'ten): kıl payı kenar + iki katmanlı gölge --- */
  --hat: rgba(255,255,255,.07);
  --hat-guclu: rgba(255,255,255,.11);
  --yuzey-1: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -18px rgba(0,0,0,.85);
  --yuzey-2: inset 0 1px 0 rgba(255,255,255,.075), 0 2px 6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.95);
  --yuzey-yok: 0 0 0 0 rgba(0,0,0,0);
  --yuzey-cta: 0 0 0 0 rgba(0,0,0,0);   /* Duolingo grameri gölgeyle değil KENARLA derinlik verir */
  --shadow-1: var(--yuzey-1);
  --shadow-2: var(--yuzey-2);
  --shadow-3: 0 24px 60px -24px rgba(0,0,0,.9);
  --perde: linear-gradient(to top, var(--bg) 12%, transparent);
  --kapak-kenar: rgba(255,255,255,.10);
  --medya-filtre: brightness(.92) saturate(.97);
  /* --- yazı: tek aile Nunito, serif kalktı --- */
  --display: "Nunito", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --serif: "Nunito", "Segoe UI", system-ui, sans-serif;
  /* --- Duolingo alt kenarı geri --- */
  --kenar: 4px;
}
:root[data-tema="acik"], :root[data-tema="koyu"], :root[data-tema="sistem"] {
  /* --- kurucunun altı rengi ve türevleri --- */
  --bg: #0B0D17;
  --surface: #141827;
  --surface-2: #191E31;
  --surface-3: #1F2540;
  --surface-0: #0B0D17;
  --soft: #1F2540;
  --line: #262D49;
  --ink: #F5F7FB;
  --ink-2: #C9CEE0;
  --muted: #9AA3B2;
  --kapak-koyu: #0B0D17;
  --hero-muted: #C4BFE6;
  --accent: #7C5CFF;
  --accent-k: #6242E6;
  /* Kontrast türevleri (denetim #19, ölçülerek belirlendi — bkz. p266).
     --accent DEĞİŞMEDİ: marka moru bu. Bunlar yalnız okunabilirlik için. */
  --accent-yuzey: #7255EB;   /* beyaz yazının altındaki dolgu · beyazla 4.98:1 */
  --accent-yazi:  #967DFF;   /* koyu yüzeydeki küçük yazı · --soft üstünde 4.78:1 */
  --accent-2: #9B7BFF;
  --accent-ink: #FFFFFF;
  --blue: #4F7CFF;
  --blue-k: #3B63E0;
  --violet: #9B7BFF;
  --violet-k: #B79DFF;
  --gold: #FFB547;
  --gold-k: #FFB547;
  --gold-yazi: #FFB547;
  --alev: #FFB547;
  --alev-k: #E0952A;
  --alev-d: #FFB547;
  --kalp: #FF5C66; --alev-ates: #FF8A3D; --av-yuz-acik: #FFE8CC; --av-cizgi-koyu: #111827;   /* io78 */
  --gunes: #FFB547;
  --gunes-k: #E0952A;
  --warn: #FFB547;
  --good: #2DBE6C;
  --good-k: #229A56;
  --good-d: #2DBE6C;
  --nane: #2DBE6C;
  --bad: #FF6B7A;
  --bad-k: #E14B5A;
  --bad-d: #FF6B7A;
  --mercan: #FF6B7A;
  --info: #4F7CFF;
  --baglanti: #9B7BFF;
  --cta-yuz: #7C5CFF;
  --nav-idle: #9AA3B2;
  --nav-active: #9B7BFF;
  --grad: linear-gradient(135deg, #7C5CFF 0%, #9B7BFF 100%);
  --hero: linear-gradient(150deg, #1E1A45 0%, #271F5F 55%, #2E2470 100%);
  --tint: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --tint-blue: color-mix(in srgb, var(--blue) 18%, var(--surface));
  --tint-good: color-mix(in srgb, var(--good) 16%, var(--surface));
  --tint-violet: color-mix(in srgb, var(--accent-2) 18%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn) 16%, var(--surface));
  --tint-bad: color-mix(in srgb, var(--bad) 16%, var(--surface));
  /* --- yüzey ve derinlik (v25'ten): kıl payı kenar + iki katmanlı gölge --- */
  --hat: rgba(255,255,255,.07);
  --hat-guclu: rgba(255,255,255,.11);
  --yuzey-1: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -18px rgba(0,0,0,.85);
  --yuzey-2: inset 0 1px 0 rgba(255,255,255,.075), 0 2px 6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.95);
  --yuzey-yok: 0 0 0 0 rgba(0,0,0,0);
  --yuzey-cta: 0 0 0 0 rgba(0,0,0,0);   /* Duolingo grameri gölgeyle değil KENARLA derinlik verir */
  --shadow-1: var(--yuzey-1);
  --shadow-2: var(--yuzey-2);
  --shadow-3: 0 24px 60px -24px rgba(0,0,0,.9);
  --perde: linear-gradient(to top, var(--bg) 12%, transparent);
  --kapak-kenar: rgba(255,255,255,.10);
  --medya-filtre: brightness(.92) saturate(.97);
  /* --- yazı: tek aile Nunito, serif kalktı --- */
  --display: "Nunito", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --serif: "Nunito", "Segoe UI", system-ui, sans-serif;
  /* --- Duolingo alt kenarı geri --- */
  --kenar: 4px;
}
@media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
  :root[data-tema="sistem"] {
  /* --- kurucunun altı rengi ve türevleri --- */
  --bg: #0B0D17;
  --surface: #141827;
  --surface-2: #191E31;
  --surface-3: #1F2540;
  --surface-0: #0B0D17;
  --soft: #1F2540;
  --line: #262D49;
  --ink: #F5F7FB;
  --ink-2: #C9CEE0;
  --muted: #9AA3B2;
  --kapak-koyu: #0B0D17;
  --hero-muted: #C4BFE6;
  --accent: #7C5CFF;
  --accent-k: #6242E6;
  /* Kontrast türevleri (denetim #19, ölçülerek belirlendi — bkz. p266).
     --accent DEĞİŞMEDİ: marka moru bu. Bunlar yalnız okunabilirlik için. */
  --accent-yuzey: #7255EB;   /* beyaz yazının altındaki dolgu · beyazla 4.98:1 */
  --accent-yazi:  #967DFF;   /* koyu yüzeydeki küçük yazı · --soft üstünde 4.78:1 */
  --accent-2: #9B7BFF;
  --accent-ink: #FFFFFF;
  --blue: #4F7CFF;
  --blue-k: #3B63E0;
  --violet: #9B7BFF;
  --violet-k: #B79DFF;
  --gold: #FFB547;
  --gold-k: #FFB547;
  --gold-yazi: #FFB547;
  --alev: #FFB547;
  --alev-k: #E0952A;
  --alev-d: #FFB547;
  --kalp: #FF5C66; --alev-ates: #FF8A3D; --av-yuz-acik: #FFE8CC; --av-cizgi-koyu: #111827;   /* io78 */
  --gunes: #FFB547;
  --gunes-k: #E0952A;
  --warn: #FFB547;
  --good: #2DBE6C;
  --good-k: #229A56;
  --good-d: #2DBE6C;
  --nane: #2DBE6C;
  --bad: #FF6B7A;
  --bad-k: #E14B5A;
  --bad-d: #FF6B7A;
  --mercan: #FF6B7A;
  --info: #4F7CFF;
  --baglanti: #9B7BFF;
  --cta-yuz: #7C5CFF;
  --nav-idle: #9AA3B2;
  --nav-active: #9B7BFF;
  --grad: linear-gradient(135deg, #7C5CFF 0%, #9B7BFF 100%);
  --hero: linear-gradient(150deg, #1E1A45 0%, #271F5F 55%, #2E2470 100%);
  --tint: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --tint-blue: color-mix(in srgb, var(--blue) 18%, var(--surface));
  --tint-good: color-mix(in srgb, var(--good) 16%, var(--surface));
  --tint-violet: color-mix(in srgb, var(--accent-2) 18%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn) 16%, var(--surface));
  --tint-bad: color-mix(in srgb, var(--bad) 16%, var(--surface));
  /* --- yüzey ve derinlik (v25'ten): kıl payı kenar + iki katmanlı gölge --- */
  --hat: rgba(255,255,255,.07);
  --hat-guclu: rgba(255,255,255,.11);
  --yuzey-1: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -18px rgba(0,0,0,.85);
  --yuzey-2: inset 0 1px 0 rgba(255,255,255,.075), 0 2px 6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.95);
  --yuzey-yok: 0 0 0 0 rgba(0,0,0,0);
  --yuzey-cta: 0 0 0 0 rgba(0,0,0,0);   /* Duolingo grameri gölgeyle değil KENARLA derinlik verir */
  --shadow-1: var(--yuzey-1);
  --shadow-2: var(--yuzey-2);
  --shadow-3: 0 24px 60px -24px rgba(0,0,0,.9);
  --perde: linear-gradient(to top, var(--bg) 12%, transparent);
  --kapak-kenar: rgba(255,255,255,.10);
  --medya-filtre: brightness(.92) saturate(.97);
  /* --- yazı: tek aile Nunito, serif kalktı --- */
  --display: "Nunito", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --serif: "Nunito", "Segoe UI", system-ui, sans-serif;
  /* --- Duolingo alt kenarı geri --- */
  --kenar: 4px;
  }
}

/* ---------- tipografi: serif kalktı, hiyerarşi yeniden AĞIRLIKLA kuruluyor ---------- */
h1, .ev-kh-bas, .ev-bolum h2, .ev-durum b, .ev-one-ad, .ev-selam b { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.ev-kh-bas { line-height: 1.12; }
.ev-selam b { font-weight: 800; }

/* ---------- Duolingo grameri: yüz + 4 px kenar, basınca yüz kenarın içine iner ---------- */
.btn { border-radius: var(--r-sm); border-bottom: var(--kenar) solid var(--accent-k); box-shadow: none; font-weight: 800; letter-spacing: 0; }
.btn:active { transform: translateY(var(--kenar)); border-bottom-color: transparent; box-shadow: none; }
.btn.ghost, .btn.secondary { background: var(--surface); color: var(--ink); border: 2px solid var(--hat-guclu); border-bottom-width: var(--kenar); box-shadow: none; }
.btn.ghost:active, .btn.secondary:active { transform: translateY(var(--kenar)); border-bottom-color: transparent; }
.btn.sm { --kenar: 3px; } .btn.xs { --kenar: 2px; }
.ev-kh-cta { background: var(--accent); color: var(--accent-ink); border-radius: var(--r-sm);
  border-bottom: var(--kenar) solid var(--accent-k); box-shadow: none; }
.ev-kh-cta:active { transform: translateY(var(--kenar)); border-bottom-color: transparent; box-shadow: none; }
.ev-one-cta { border-radius: var(--r-sm); border-bottom: 3px solid rgba(0,0,0,.35); }
.ev-cip a { border-color: var(--hat-guclu); }

/* v29 ek: yüzen düğme de kendi kenarının içine insin (4 px kenar taşıyor ama 1 px iniyordu). */
.btn.fab:active { transform: translateX(-50%) translateY(var(--kenar)); border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) { .btn.fab:active { transform: translateX(-50%); } }

/* v29 ek: Oyunlar sekmesi — dört oyun DİKEY dizi. Yatay kayan şerit kalktı (kurucu kararı):
   bir oyuna ulaşmak için yana kaydırmak gerekmesin, kartın yarısı ekran kenarında kesilmesin. */
.oy-dizi { display: grid; gap: 12px; }
.oy-dizi .oy-kapak { min-height: 176px; }
.oy-rozet { position: absolute; top: 12px; right: 12px; z-index: 10; padding: 5px 10px; border-radius: 999px;
  background: rgba(11,13,23,.66); color: var(--uzeri); font-size: 12px; font-weight: 700; }


/* =====================================================================================
   v30 · MAĞARA (Survival) — piksel oyun arayüzü
   Tuval düşük çözünürlüklü tampondur; arayüz onun ÜSTÜNDE DOM'dur. Meşale söndükçe yalnız
   tuval kararır: kart, canlar ve yol her zaman tam okunur kalır.
   ===================================================================================== */
:root {
  --mg-kart: rgba(8, 11, 18, .9);        /* soru kartı zemini: mağara zemini kadar koyu */
  --mg-kenar: rgba(255, 255, 255, .16);
  --mg-cerceve: inset 0 0 0 2px rgba(0,0,0,.5), 0 4px 0 rgba(0,0,0,.4);
  --mg-cerceve-basili: inset 0 0 0 2px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.4);
  --mg-tehlike: inset 0 0 60px 18px rgba(108, 77, 255, .38);
  --mg-golge-yazi: 0 2px 0 rgba(0,0,0,.6);
  --mg-kalp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6'%3E%3Cpath d='M1 0h1v1H1zM4 0h1v1H4zM0 1h7v1H0zM0 2h7v1H0zM1 3h5v1H1zM2 4h3v1H2zM3 5h1v1H3z'/%3E%3C/svg%3E");
}
.mg-wrap { position: relative; height: min(calc(100dvh - 148px), 720px); min-height: 460px; border-radius: 24px; overflow: hidden;
  background: var(--kapak-koyu); border: 1px solid var(--hat); box-shadow: var(--yuzey-2);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: height var(--motion-reveal) var(--ease-enter); }
.mg-wrap.bitti { height: 260px; min-height: 0; }
.mg-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.mg-wrap.mg-oyunda { touch-action: none; }   /* io236: dikey kaydırma şerit değiştirir, sayfa kaymaz */

/* son can: mor kenar vinyeti — kırmızı değil, marka içinde kalıyor */
.mg-vinyet { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; box-shadow: var(--mg-tehlike);
  transition: opacity var(--motion-standard) var(--ease); }
.mg-wrap.tehlike .mg-vinyet { opacity: 1; animation: mgNabiz var(--motion-cinematic) ease-in-out infinite; }
@keyframes mgNabiz { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* HUD: çık · canlar · ses */
.mg-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 10px 0; pointer-events: none; }
.mg-hud > * { pointer-events: auto; }
.mg-btn { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--mg-kenar);
  color: var(--uzeri); display: grid; place-items: center; padding: 0; cursor: pointer;
  transition: transform var(--motion-instant) var(--ease-snap), background-color var(--motion-fast) var(--ease); }
.mg-btn:active { transform: translateY(2px); }
.mg-btn.kapali { opacity: .45; }
.mg-canlar { display: flex; gap: 6px; align-items: center; }
.mg-canlar i { width: 21px; height: 18px; display: block; background: currentColor;
  -webkit-mask: var(--mg-kalp) center / contain no-repeat; mask: var(--mg-kalp) center / contain no-repeat;
  transition: color var(--motion-standard) var(--ease), transform var(--motion-standard) var(--ease-spring); }
.mg-canlar i.dolu { color: var(--bad); }
.mg-canlar i.bos { color: var(--hat-guclu); transform: scale(.82); }

/* çıkışa giden yol: nokta dizisi + çıkış işareti (SaaS ilerleme çubuğu değil) */
.mg-yol { position: absolute; left: 12px; right: 12px; z-index: 20; display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; pointer-events: none; }
.mg-yol i { flex: 1 1 auto; height: 4px; border-radius: 999px; background: rgba(255,255,255,.18); }
.mg-yol .mg-cikis { flex: 0 0 auto; margin-left: 4px; color: var(--gunes); display: grid; place-items: center; transform: scaleX(-1); }

/* geri sayım */
.mg-orta { position: absolute; inset: 0; display: grid; place-items: center; z-index: 10; pointer-events: none; }
/* io147: yukarıdaki kural Mağara geri sayımı için; mini oyunların üst çubuğundaki .mg-orta (süre) de onu alıyordu ve dar ekranda
   sağdaki "0 hamle" ile üst üste biniyordu ("00:030 hamle"). Üst çubukta akışa geri döner. */
.mg-ust > .mg-orta { position: static; inset: auto; display: flex; justify-content: center; z-index: auto; pointer-events: auto; }
.mg-say { font-family: var(--pixel); font-size: 44px; color: var(--uzeri); text-shadow: var(--mg-golge-yazi);
  animation: pop var(--motion-reveal) var(--ease-spring) both; }

/* soru kartı: alttan gelir, yüksekliği sabit (uzun Türkçe sarar, yerleşim kaymaz) */
.mg-soru { transition: transform var(--motion-structural) var(--ease-enter), opacity var(--motion-standard) var(--ease); }
.mg-soru.gizli { pointer-events: none; }
.mg-konu { font-family: var(--pixel); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-sik { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-sik button { min-height: 56px; border: 2px solid var(--mg-kenar); border-radius: 0; background: rgba(255,255,255,.07);
  color: var(--uzeri); font: 700 16px/1.25 var(--body); padding: 8px 10px; overflow-wrap: anywhere; cursor: pointer;
  box-shadow: var(--mg-cerceve);
  transition: transform var(--motion-instant) var(--ease-snap), background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.mg-sik button:active { transform: translateY(2px); box-shadow: var(--mg-cerceve-basili); }
.mg-sik button.dogru { background: var(--good); border-color: var(--good-k); }
.mg-sik button.yanlis { background: var(--bad); border-color: var(--bad-k); }
.mg-sik button:disabled { cursor: default; }

/* duraklatma ve bitiş karartması */
.mg-durak { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 4px;
  background: rgba(8,11,18,.72); color: var(--uzeri); text-align: center; cursor: pointer; }
.mg-durak b { font-family: var(--pixel); font-size: 26px; }
.mg-durak span { font-size: 13.5px; color: var(--hero-muted); }
.mg-karart { position: absolute; inset: 0; z-index: 30; background: var(--kapak-koyu); opacity: 0; pointer-events: none;
  transition: opacity var(--motion-structural) var(--ease); }
.mg-karart.acik { opacity: .55; }

/* giriş perdesi: oyunun kendisi arkada döner */
.mg-giris { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; padding: 18px;
  background: linear-gradient(to top, rgba(8,11,18,.95) 0%, rgba(8,11,18,.66) 48%, rgba(8,11,18,0) 82%); }
.mg-giris-ic { width: 100%; }
.mg-baslik { font-family: var(--pixel); font-size: 34px; line-height: 1.05; margin: 6px 0 0; color: var(--uzeri);
  text-shadow: var(--mg-golge-yazi); }
.mg-alt { margin: 8px 0 14px; color: var(--hero-muted); font-size: 13.5px; line-height: 1.45; max-width: 34ch; }
.mg-mod { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mg-mod::-webkit-scrollbar { display: none; }
.mg-mod-btn { flex: 0 0 auto; min-height: 44px; padding: 7px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 2px solid var(--mg-kenar); color: var(--uzeri); text-align: left;
  transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.mg-mod-btn b { display: block; font-size: 13.5px; font-weight: 800; }
.mg-mod-btn span { display: block; font-size: 12px; color: var(--hero-muted); }
.mg-mod-btn.on { background: var(--accent); border-color: var(--accent-k); }
.mg-mod-btn.on span { color: var(--uzeri); }
.mg-basla { width: 100%; margin-top: 14px; }
.mg-rekor { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--hero-muted); }
.mg-canli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* sonuç */
.mg-sonuc-kart { margin-top: 12px; }
.mg-sonuc-bas { font-family: var(--pixel); font-size: 34px; line-height: 1.05; margin: 6px 0 0; color: var(--uzeri); }
.mg-sonuc-alt { margin: 8px 0 0; color: var(--hero-muted); font-size: 15px; line-height: 1.45; }
.mg-statlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.mg-statlar > div { background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 6px; text-align: center; }
.mg-statlar b { display: block; font-family: var(--pixel); font-size: 20px; color: var(--uzeri); }
.mg-statlar span { display: block; margin-top: 2px; font-size: 12px; color: var(--hero-muted); }
.mg-konular { margin-top: 16px; }
.mg-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mg-cipler a { min-height: 44px; display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.09); color: var(--uzeri); font-size: 12px; font-weight: 700; text-decoration: none; }
.mg-not { margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--hero-muted); }
.mg-hatalar { margin-top: 12px; }
.mg-hata { padding: 10px 0; border-top: 1px solid var(--hat); }
.mg-hata b { display: block; font-size: 15px; }
.mg-hata span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--good); }
.mg-hata p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.mg-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (max-width: 372px) {
    .mg-sik button { min-height: 52px; font-size: 15px; }
  .mg-statlar { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-wrap, .mg-soru, .mg-vinyet, .mg-canlar i, .mg-karart { transition: none; }
  .mg-wrap.tehlike .mg-vinyet { animation: none; }
  .mg-say { animation: none; }
}

/* =====================================================================================
   v32 · MAĞARA ŞERİT KUMANDASI ve SORU BANDI — "Meşale Koşusu" (2026-09-09)
   Karakter kendi koşuyor; oyuncu şerit seçiyor. Soru üstte bant, şıklar ŞERİTLERE bağlı;
   aynı üç işaret (▲ ● ▼) tünel kapılarındaki tabelalarda tekrar ediyor.
   ===================================================================================== */
:root {
  --mg-ust: #FFD36A;      /* üst şerit: sıcak altın */
  --mg-orta: #A88CFF;     /* orta şerit: mor aksan */
  --mg-alt: #C7D0E4;      /* alt şerit: soğuk taş */
  --mg-alev: #F4A64A;     /* meşale ölçeri */
  --mg-alev-az: #D95454;  /* meşale sönmek üzere */
}

/* HUD: kalpler ve meşale ölçeri tek sütunda */
.mg-olcerler { display: grid; gap: 5px; justify-items: center; }
.mg-mesale { width: 96px; height: 8px; border: 2px solid var(--mg-kenar); overflow: hidden; }
.mg-mesale i { display: block; height: 100%; width: 80%;
  transition: width var(--motion-fast) linear, background-color var(--motion-base) var(--ease); }
.mg-mesale.az i { background: var(--mg-alev-az); }

/* soru bandı: üstte durur, şıklar şerit sırasında (üst → alt) dizilir */
.mg-soru { position: absolute; z-index: 20; border-radius: 0; color: var(--uzeri); }
.mg-soru.gizli { transform: none; opacity: 1; }
.mg-prompt { font-weight: 700; min-height: 0;
  overflow-wrap: anywhere; text-wrap: balance; }
.mg-secenekler { display: grid; gap: 6px; }
.mg-sec { display: flex; align-items: center; gap: 8px; padding: 5px 9px;
  background: rgba(255,255,255,.07); border: 2px solid var(--mg-kenar); }
.mg-sec b { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
/* işaretler: emoji değil, clip-path — kapı tabelalarındaki piksel işaretlerle aynı aile */
.mg-sec i, .mg-serit i { flex: none; width: 14px; height: 14px; display: block; }
.mg-sec.ust i, .mg-serit.ust i { background: var(--mg-ust); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mg-sec.alt i, .mg-serit.alt i { background: var(--mg-alt); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mg-sec.ust { border-color: rgba(255,211,106,.45); }
.mg-sec.alt { border-color: rgba(199,208,228,.35); }

/* yol göstergesi kumandanın üstüne çıktı */
/* şerit kumandası: sağ kenarda DİKEY — tüneldeki şerit sırasıyla birebir aynı */
.mg-kumanda { position: absolute; z-index: 20; pointer-events: none; }
.mg-kumanda > * { pointer-events: auto; }
.mg-serit { border-radius: 14px; padding: 0; cursor: pointer;
  background: rgba(8,11,18,.62); border: 2px solid var(--mg-kenar); color: var(--uzeri); place-items: center; touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-instant) var(--ease-snap), background-color var(--motion-fast) var(--ease); }
.mg-serit span { font-family: var(--pixel); letter-spacing: .04em; }
.mg-serit:active { transform: translateY(2px); background: rgba(108,77,255,.5); }
.mg-serit.ust { border-color: rgba(255,211,106,.4); }
.mg-serit.alt { border-color: rgba(199,208,228,.3); }

@media (max-width: 372px) {
      .mg-serit { width: 52px; }
  .mg-mesale { width: 84px; }
}
@media (prefers-reduced-motion: reduce) { .mg-serit, .mg-mesale i { transition: none; } }

/* =====================================================================================
   v33 · MAĞARA ŞERİT ETİKETLERİ ve GİRİŞ ŞEMASI (2026-09-09)
   Şıkkın tam metni, tuvalin üstünde, ait olduğu şeridin hizasında.
   ===================================================================================== */
.mg-seritler { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
/* top JS'ten geliyor: çizici şeridin ekran oranını veriyor, kabuk her karede yazıyor */
.mg-lane { position: absolute; display: flex; align-items: center;
  transform: translateY(-100%);
  border-left: 3px solid var(--mg-kenar);
  transition: opacity var(--motion-fast) var(--ease); }
.mg-lane i { flex: none; display: block; }
.mg-lane b { font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-lane.ust i { background: var(--mg-ust); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mg-lane.alt i { clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* içinde bulunduğun şerit: daha parlak zemin, kalın kenar */
/* seçili şerit düğmesi */
.mg-serit.on { background: rgba(108,77,255,.44); }
.mg-serit.on.ust { border-color: var(--mg-ust); }
.mg-serit.on.alt { border-color: var(--mg-alt); }

/* giriş perdesindeki şema: üç şerit, üç işaret — oyun başlamadan eşleme kuruluyor */
.mg-sema { display: grid; gap: 4px; margin: 10px 0 2px; }
.mg-sema-satir { display: flex; align-items: center; gap: 8px; padding: 5px 9px;
  background: rgba(255,255,255,.06); border-left: 3px solid var(--mg-kenar); }
.mg-sema-satir i { flex: none; width: 12px; height: 12px; display: block; }
.mg-sema-satir span { font-size: 13.5px; color: var(--hero-muted); }
.mg-sema-satir.ust { border-left-color: var(--mg-ust); }
.mg-sema-satir.alt { border-left-color: var(--mg-alt); }
.mg-sema-satir.ust i { background: var(--mg-ust); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mg-sema-satir.alt i { background: var(--mg-alt); clip-path: polygon(0 0, 100% 0, 50% 100%); }

@media (max-width: 372px) {  }
@media (prefers-reduced-motion: reduce) { .mg-lane { transition: none; } }

/* =====================================================================================
   v34 · MAĞARA YERLEŞİM DÜZELTMESİ (2026-09-09)
   Etiketler karakterin önüne, kumanda tuvalin altındaki ölü banda.
   ===================================================================================== */
.mg-lane { left: auto; right: 6px; width: max-content; }
/* kumanda: sağ kenardan tuvalin altındaki yatay şeride */
.mg-kumanda { left: 6px; right: 6px; bottom: 6px; top: auto;
  display: flex; gap: 6px; align-items: stretch; }
.mg-serit { width: auto; flex: 1 1 0; grid-auto-flow: column;
  display: flex; align-items: center; justify-content: center; }
.mg-yol { bottom: 66px; }

@media (max-width: 372px) {
    .mg-serit span { font-size: 12px; }
  }

/* =====================================================================================
   v35 · MAĞARA İKİ ŞERİT (2026-09-09)
   Şerit sayısı şık sayısına eşit: ÜST ve ALT. Aralık 72 px olduğu için şıkkın metni
   şeridin üstüne büyük ve dolgun yazılabiliyor.
   ===================================================================================== */
.mg-lane { gap: 9px; }
.mg-lane i { width: 15px; height: 15px; }
.mg-lane b { letter-spacing: -.01em; }
/* içinde bulunduğun şerit: cevabın şu an bu — zemin ve kenar birlikte parlıyor */
/* iki düğme: her biri ekranın yarısı, ikisi de rahat basılıyor */
.mg-serit { height: 56px; gap: 9px; }
.mg-serit span { font-size: 13.5px; }
.mg-serit i { width: 15px; height: 15px; }

/* bant: iki şık, ikisi de tam boy */
.mg-sec { min-height: 40px; }
.mg-sec b { font-size: 16px; }

@media (max-width: 372px) {
      .mg-serit { height: 52px; }
  .mg-sec b { font-size: 15px; }
}

/* =====================================================================================
   v36 · MAĞARA BEYAZ ETİKET ve ORTADAKİ SORU (2026-09-09)
   Soru iki şeridin arasında, şıklar şeritlerin üstünde beyaz zeminli etiketlerde.
   ===================================================================================== */
:root {
  --mg-etiket: #FFFFFF;        /* şık etiketinin zemini */
  --mg-etiket-yazi: #0B1120;   /* şık metni ve işaret */
  --mg-etiket-secili: #6C4DFF; /* içinde bulunduğun şerit */
}

/* şık etiketi: beyaz kart, koyu metin, sol kenarda şeridin rengi */
.mg-lane { padding: 6px 12px 7px 10px; min-height: 34px; max-width: 76%; }
.mg-lane b { font-size: 18px; }
.mg-lane i { background: var(--mg-etiket-yazi); }
.mg-lane.ust i, .mg-lane.alt i { background: var(--mg-etiket-yazi); }
/* üst etiket şeridin ÜSTÜNDE, alt etiket şeridin ALTINDA: aradaki bant soruya kalıyor */
.mg-lane.ust { transform: translateY(-100%); }
.mg-lane.alt { transform: translateY(0); }
/* şu an bulunduğun şerit */
/* soru kutusu: konumu ve yüksekliği JS'ten geliyor, burada yalnız görünüm var */
.mg-soru { top: auto; bottom: auto;
  flex-direction: column; justify-content: center; overflow: hidden; }
@media (max-width: 372px) {
  .mg-lane { max-width: 80%; }
  .mg-lane b { font-size: 16px; }
  }

/* =====================================================================================
   v37 · MAĞARA İNCE SORU KUTUSU (2026-09-09)
   Kutu boşluğu doldurmuyor, içeriği kadar yüksek ve boşluğun ortasında duruyor.
   ===================================================================================== */
.mg-soru { display: block; height: auto; transform: translateY(-50%);
  padding: 6px 11px 7px; left: 10px; right: 10px; }
.mg-konu { margin: 0; font-size: 12px; letter-spacing: .06em; opacity: .8; }
.mg-prompt { margin: 1px 0 0; font-size: 16px; line-height: 1.25; }

@media (max-width: 372px) { .mg-prompt { font-size: 15px; } }

/* =====================================================================================
   v38 · PROGRAM — bütün müfredatın gezildiği ekran (2026-09-09)
   Ana Sayfa "bugün ne yapayım"ı, bu ekran "neredeyim"i cevaplıyor.
   ===================================================================================== */
.pr-giris { margin: -4px 0 16px; max-width: 60ch; }
.pr-bolum { margin: 0 0 22px; }
.pr-izgara { display: grid; gap: 10px; margin-top: 8px; }
@media (min-width: 560px) { .pr-izgara { grid-template-columns: 1fr 1fr; } }

/* ders kartı: adı, sınavdaki ağırlığı, içindeki hacim */
.pr-ders { display: block; padding: 13px 14px; min-height: 44px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  color: var(--ink); text-decoration: none;
  transition: transform var(--motion-instant) var(--ease-snap), border-color var(--motion-fast) var(--ease); }
.pr-ders:active { transform: translateY(1px); }
.pr-ders:hover { border-color: var(--accent); }
.pr-ders-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pr-ders-ust b { font-size: 16px; font-weight: 700; }
.pr-soru { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pr-ders-alt { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
/* müfredatı henüz eklenmemiş ders: gizlemek yerine dürüstçe soluk gösteriliyor */
.pr-ders.yok { opacity: .6; }
.pr-bos { font-style: italic; }

/* ünite akordeonu */
.pr-baslik { margin: 6px 0 2px; }
.pr-uniteler { display: grid; gap: 8px; margin-top: 14px; }
.pr-unite { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.pr-unite > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; min-height: 44px; cursor: pointer; list-style: none; }
.pr-unite > summary::-webkit-details-marker { display: none; }
.pr-unite > summary b { font-size: 15px; font-weight: 700; }
.pr-unite > summary span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pr-unite[open] > summary { border-bottom: 1.5px solid var(--line); }

.pr-konu { padding: 10px 14px 4px; }
.pr-konu-ad { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.pr-konu-ad i { font-style: normal; font-weight: 400; opacity: .75; margin-left: 6px; }

/* ders satırı: tam genişlik dokunma hedefi */
.pr-ders-satir { justify-content: space-between;
  width: 100%; min-height: 44px; padding: 9px 10px; margin-bottom: 4px; text-align: left;
  background: var(--tint); border: 1.5px solid transparent; border-radius: 12px; color: var(--ink);
  cursor: pointer; transition: border-color var(--motion-fast) var(--ease); }
.pr-ders-satir:hover, .pr-ders-satir:focus-visible { border-color: var(--accent); }
.pr-ders-ad { font-size: 15px; font-weight: 700; }
.pr-ders-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* seçilen dersin kazanımları */
.pr-detay { margin-top: 16px; }
.pr-detay-ad { margin: 2px 0 2px; font-size: 20px; }
.pr-kazanim { margin: 6px 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.pr-kazanim li { font-size: 15px; line-height: 1.45; }
.pr-uyari { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--muted);
  background: var(--tint-warn); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.pr-not { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) { .pr-ders, .pr-ders-satir { transition: none; } }

/* =====================================================================================
   v39 · PROGRAM DENETIM ONARIMLARI (2026-09-09)
   #11 açılır gösterge · #8 detay yerleşimi · #9 boş ders durumu · #13 Ana Sayfa eylemi
   ===================================================================================== */

/* #11 — ÜNİTELER AÇILIR GÖRÜNMÜYORDU. v38'de tarayıcının kendi <details> üçgeni
   (::-webkit-details-marker) gizlenmiş ama yerine bir işaret konmamıştı; üniteler
   durağan kart gibi duruyor, tıklanabilir olduğu anlaşılmıyordu. Chevron eklendi,
   açıkken dönüyor. Klavye davranışı <details>'in kendisinden geliyor; dokunulmadı. */
.pr-unite > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-left: 2px; align-self: center;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--motion-fast) var(--ease); }
.pr-unite[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pr-unite > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* ünite adları tamamı büyük harf ve uzun; sarma ve nefes payı olmadan taşıyor */
.pr-unite > summary b { overflow-wrap: anywhere; line-height: 1.3; }

/* #8 — detay artık seçilen satırın hemen ALTINDA açılıyor (bölümün en dibinde değil).
   Sabit alt menü 84 px; scroll-margin olmadan CTA menünün altında kalıyordu. */
.pr-ders-satir.secili { border-color: var(--accent); background: var(--tint); }
.pr-ders-satir { scroll-margin-bottom: 96px; }
.pr-detay { margin: 8px 0 12px; scroll-margin-bottom: 96px; }
.pr-detay:focus { outline: none; }
.pr-detay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-kapat { margin-top: 10px; }
.pr-eslesmez { margin: 0 0 10px; }

/* #9 — müfredatı olmayan ders çıkmaz sokaktı: kart açılıyor, içi bomboş kalıyordu */
.pr-yokdurum { margin-top: 14px; }
.pr-yokdurum p { margin: 6px 0 12px; font-size: 15px; }

/* #13 — Program kısayolunun YANINA asıl çalışma eylemi. Kısayol korunuyor
   (kurucunun bilinçli tercihi); Neti "başla" derken basılacak düğme de artık var. */
.ev-ikili { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 400px) { .ev-ikili { grid-template-columns: 1fr 1fr; } }
.ev-ikili > .ev-cta { margin-top: 0; }
.ev-cta2 { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 52px; padding: 0 12px; border: 2px solid var(--line); border-bottom-width: var(--kenar);
  border-radius: var(--r-sm); font: inherit; font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  background: var(--surface-2); cursor: pointer; box-shadow: none;
  transition: transform var(--motion-instant) var(--ease-snap), border-color var(--motion-instant) var(--ease-snap); }
.ev-cta2:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pr-unite > summary::after { transition: none; }
  .ev-cta2 { transition: none; }
  .ev-cta2:active { transform: none; }
}

/* #2 — örnek plan rozeti. Uyarı niteliğinde: sarı, ama alarm değil. */
.ornek-rozet { background: var(--tint-warn); color: var(--warn); font-weight: 700; white-space: nowrap; }
.ornek-rozet svg { color: var(--warn); }
.pl-hedef { font-family: var(--display); font-weight: 750; font-size: 20px; margin-top: 4px; }

/* =====================================================================================
   v40 · ERİŞİLEBİLİRLİK (denetim #19, 2026-09-09)
   ===================================================================================== */

/* (e) KLAVYE ODAĞI GÖRÜNMÜYORDU. Ortak bir :focus-visible kuralı yoktu; bazı
   yüzeylerde tarayıcının kendi halkası da başka bir kuralla siliniyordu. Fareyle
   tıklayanı rahatsız etmeyen tek kural: :focus-visible (:focus değil). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Alt menüde offset dışarı taşıyor; içeri alıyoruz. */
.tabs a:focus-visible { outline-offset: -3px; }

/* (a) aria-current görsel olarak da desteklensin: renk TEK başına taşımasın. */
.tabs a[aria-current="page"]::before { transform: translateX(-50%) scaleX(1); }

/* (b) ad alanının görünür etiketi */
.tn-etiket { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); text-align: center; }

/* (f) 200% YAKINLAŞTIRMA. Alt menüde beş etiket 5 eşit sütuna sıkışıyor ve
   taşıyordu. Etiketi sarmıyoruz (iki satır menüyü büyütür); taşmayı kesiyoruz ve
   sekmenin adı zaten aria ile tam okunuyor. */
.tabs a { min-width: 0; }
.tabs a > :last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ekranda görünmeyen ama okunan metin (ekran okuyucu için). */
.gorunmez-metin { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* #10 — sınıf ayracı ve çakışan ünite adlarında sınıf eki */
.pr-sinif { margin: 18px 0 6px; }
.pr-sinif:first-of-type { margin-top: 14px; }
.pr-uniteler + .pr-sinif { margin-top: 20px; }
.pr-sinif-ek { font-style: normal; font-weight: 600; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* #7 — Program'dan gelen konu isteği: öneri kartından ayrışsın, ama onunla yarışmasın. */
.cz-istenen { border: 2px solid var(--accent); background: var(--tint); }

/* #5 — hazırlık durumu ders KARTINDA, açmadan görünsün */
.pr-durum { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pr-rozet { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--soft); }
.pr-rozet svg { width: 14px; height: 14px; }
.pr-rozet-ok { color: var(--good); background: var(--tint-good); }
.pr-uyari-ust { margin: 8px 0 4px; }
.pr-var { color: var(--good); font-weight: 700; }

/* #20 — kart başlığı; satır içi style yerine sınıf */
.ol-baslik { margin: 0 0 6px; }

/* =====================================================================================
   v41 · KONTRAST (denetim #19, 2026-09-09) — yalnız ölçülerek düşük bulunan yerler
   ===================================================================================== */

/* Beyaz yazı accent dolgunun üstündeydi: 4.35:1. Dolgu bir tık koyulaşıyor (4.98:1);
   göz farkı ayırt etmiyor, ekran okuyucu olmayan zayıf görenler için fark ediyor. */
.btn { background: var(--grad-yazi); }   /* io326: ikinci durak --accent-2 idi; koyu temada beyaz yazı 3,2:1'e düşüyordu */
.avatar { background: var(--accent-yuzey); }
.ev-cta { background: var(--accent-yuzey); }

/* Accent küçük yazı olarak koyu yüzeyin üstündeydi: 3.46:1 (--soft). Yazı açılıyor. */
.days button.sel b { color: var(--accent-yazi); }
.session .min { color: var(--world, var(--accent-yazi)); }
.ev-cta2 { color: var(--accent-yazi); }
.ev-cta2 svg { color: var(--accent-yazi); }

/* #20 — ölçüm yokken ne yapılacağını söyleyen satır */
.ol-ipucu { margin: 8px 0 0; }

/* =====================================================================================
   v42 · ÇALIŞMA AKIŞI (denetim U1–U17, 2026-09-09)
   Yeni sınıflar; mevcut blokların hiçbiri düzenlenmedi (AGENTS.md §5).
   ===================================================================================== */

/* U1 — hedefli oturumun kapsam çubuğu. Vaat ile verilen aynı olsun: hangi konu,
   kaç soru. Denetimde "8 soru" yazıp üçü konudan gelen oturum vardı. */
.cz-kapsam { background: var(--tint); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
.cz-kapsam-ad { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); }
.cz-kapsam-ad svg { color: var(--accent-yazi); flex: none; }
.cz-kapsam-not { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* U3/U5 — süren oturum şeridi ve baştan başlama. Kaza sonucu ilerleme silinmesin
   diye "Baştan başla" ayrı ve küçük; birincil eylem devam etmek. */
.cl-surdur { display: flex; align-items: center; gap: 8px; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; font-size: 13.5px; color: var(--ink); }
.cl-surdur svg { color: var(--accent-yazi); flex: none; }
.cl-surdur span { flex: 1; }
.cl-bastan { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; min-height: 32px; cursor: pointer; }

/* U17 — "Bilmiyorum". Tahmine zorlamak ölçümü de öğrenciyi de yanıltıyor.
   Şıkların altında, onlarla yarışmayacak ağırlıkta. */
.cl-bilmiyorum { display: block; width: 100%; margin-top: 10px; min-height: 44px; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.cl-bilmiyorum:hover { color: var(--ink); border-color: var(--muted); }

/* U13 — onarımda soru sormadan ÖNCE kaçırılan kural. */
.cz-hatirlat { background: var(--tint); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.cz-hatirlat-ust { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); }
.cz-hatirlat-ust svg { color: var(--accent-yazi); flex: none; }
.cz-hatirlat-liste { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.cz-hatirlat-liste li + li { margin-top: 6px; }
.cz-hatirlat-not { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* U8/U15/U16 — Ana Sayfa: çalışma görevi ilk sırada, bugünün gerçek işi görünür,
   günlük süre tercihi tek dokunuşta. */
.ev-plan-bas { margin-top: 0; }
.ev-bugun { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; color: var(--good); }
.ev-bugun svg { flex: none; }
.ev-bugun b { color: var(--ink); }
.ev-sure { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ev-sure-btn { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 12px; min-height: 34px; font: inherit; font-size: 12px; cursor: pointer; }
.ev-sure-btn.on { border-color: var(--accent); color: var(--accent-yazi); background: var(--tint); font-weight: 600; }
.ev-zayif-not { margin: 8px 0 0; }

/* U9 — Program araması ve konu düzeyinde eylem. Öğrenci adını bildiği konuyu
   ünite ünite gezmeden bulsun; her satır ne yapılabileceğini söylesin. */
.pr-ara { margin: 10px 0 6px; }
.pr-ara-etiket { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.pr-ara-girdi { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.pr-ara-girdi:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pr-ara-sonuc { margin-bottom: 10px; }
.pr-ara-bos { margin: 6px 0 8px; }
.pr-bulgu { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.pr-bulgu-ad { font-weight: 650; font-size: 15px; color: var(--ink); }
.pr-bulgu-yer { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pr-bulgu-eylem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pr-konu-eylem { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.pr-terim { margin-top: 10px; }
.pr-terim summary { cursor: pointer; font-size: 13.5px; color: var(--muted); min-height: 44px; display: flex; align-items: center; }

/* U11/U12 — ders sayfası: anlatım önce, yönetim ikincil. Kendi işaretin (beyan)
   ölçülen hâkimiyetten ayrı; ikisi aynı kelimeyle anlatılmıyor. */
.ds-eylem { margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.ds-isaret { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ds-isaret-etiket { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ds-ikincil { margin-top: 12px; border-top: 1px solid var(--line); }
.ds-ikincil summary { cursor: pointer; font-size: 13.5px; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.ds-ikincil-ic { padding-top: 4px; }

/* U10 — Sorular panosunda ikincil araçlar. Kaldırılmadılar, ilk ekranda yer
   kaplamıyorlar; rotaları aynı. */
.cz-daha { margin: 2px 0 8px; }
.cz-daha summary { cursor: pointer; font-size: 13.5px; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.cz-daha-serit { margin-top: 2px; }

/* U16 — plan bayatladığında açık tazeleme yolu. Plan sessizce değiştirilmiyor. */
.ev-bayat { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.ev-bayat svg { flex: none; color: var(--warn, var(--muted)); }
.ev-bayat span { flex: 1; min-width: 160px; }

/* Bu turda eklenen kartların aralıkları — satır içi style yerine sınıf
   (stil kapısı: JS şablonunda satır içi style bütçesi artmasın). */
.y-bas { margin: 6px 0; }
.y-bas2 { margin: 0 0 6px; }
.y-bas3 { margin: 0 0 4px; }
.y-not { margin: 0 0 10px; }
.y-not2 { margin: 0 0 12px; }
.y-alt { margin: 6px 0 0; }

/* U9 — arama sonucunda konunun ne öğrettiği. Metin MEB kazanımının kendisi;
   özetlenmiyor, uydurulmuyor. */
.pr-bulgu-not { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* U17 — çalışma oturumunun çıkış düğmesi 40 px'ti; dokunma hedefi en az 44 px
   olmalı (ölçüldü). Yalnız bu düğme büyütülüyor: genel .chip boyunu değiştirmek
   onlarca ekranın yerleşimini kaydırırdı. */
.cz-cik { min-height: 44px; }

/* =====================================================================================
   v43 · MAĞARA GÖRSEL ELDEN GEÇİRME — arayüz dünyaya uysun (2026-09-09)

   Sanat yönü değişti: derin lacivert–indigo–mor harabe, sıcak meşale karşıtlığı.
   Arayüz hâlâ düz beyaz/mor kutulardı ve sahnenin içinden çıkmış gibi durmuyordu.

   DİKKAT — v36'nın kararı geri alınmıyor, taşınıyor. Orada şık etiketi BİLEREK beyaz
   yapılmıştı: koyu ve hareketli bir tuvalin üstünde okunması gerekiyor. Aynı ayrım
   burada başka yolla korunuyor:
     · zemin SAYDAM DEĞİL (dolu koyu taş),
     · 2 px açık kenar + dışında koyu hâle (sahneden ayıran çift kontur),
     · yazı sıcak fildişi: #F6EBD6 üstüne #0D1122 → yaklaşık 15:1 (eşik 4,5:1).
   Yani okunabilirlik düşmüyor, artıyor; değişen yalnız etiketin dünyaya ait görünmesi.
   ===================================================================================== */
:root {
  --mg-tas: #0D1122;          /* oyulmuş taş pano zemini */
  --mg-tas-ust: #1A2138;      /* panonun ışık alan üst kenarı */
  --mg-tas-kenar: #46567E;    /* taş kenar */
  --mg-yazi: #F6EBD6;         /* sıcak fildişi metin */
  --mg-altin: #F4A64A;        /* meşale ambeni: vurgu ve seçili durum */
  --mg-altin-ac: #FFD9A0;
  --mg-secili: #2A1F52;       /* içinde bulunduğun şerit: mor taş */
  --mg-hale: 0 0 0 2px rgba(4,6,14,.85), 0 3px 10px rgba(0,0,0,.55);
  --mg-altin-hale: 0 0 0 2px rgba(4,6,14,.85), 0 0 14px rgba(244,166,74,.42), 0 3px 10px rgba(0,0,0,.55);
  --mg-kor: 0 0 8px rgba(244,166,74,.55);      /* meşale ölçerinin kor parıltısı */
  --mg-nokta: 0 0 6px rgba(244,166,74,.5);     /* yol üstündeki yanan düğüm */
}

/* --- şık etiketi: oyulmuş taş levha --- */
.mg-lane { background: linear-gradient(180deg, var(--mg-tas-ust) 0%, var(--mg-tas) 46%);
  color: var(--mg-yazi); border: 2px solid var(--mg-tas-kenar); border-left-width: 8px;
  box-shadow: var(--mg-hale); }
.mg-lane b { color: var(--mg-yazi); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.mg-lane i, .mg-lane.ust i, .mg-lane.alt i { background: var(--mg-altin); }
.mg-lane.alt i { background: #C7D0E4; }
.mg-lane.ust { border-left-color: var(--mg-altin); }
.mg-lane.alt { border-left-color: #8FA3C9; }
/* içinde bulunduğun şerit: mor taş + altın kenar + sıcak hâle */
.mg-lane.bende { background: linear-gradient(180deg, #3A2C6E 0%, var(--mg-secili) 52%);
  border-color: var(--mg-altin); box-shadow: var(--mg-altin-hale); }
.mg-lane.bende b { color: #FFF3E2; }
.mg-lane.bende i { background: var(--mg-altin-ac); }

/* --- soru panosu: taş çerçeve, üstte altın saç teli --- */
.mg-soru { background: linear-gradient(180deg, rgba(20,26,46,.96) 0%, rgba(9,12,24,.96) 60%);
  border: 2px solid var(--mg-tas-kenar); box-shadow: var(--mg-hale); }
.mg-soru::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(244,166,74,.7), transparent); }
.mg-konu { color: var(--mg-altin); }
.mg-prompt { color: var(--mg-yazi); }

/* --- alt kumanda düğmeleri: taş, seçili olan altın --- */
.mg-sec, .mg-serit { background: linear-gradient(180deg, var(--mg-tas-ust) 0%, var(--mg-tas) 55%);
  border: 2px solid var(--mg-tas-kenar); color: var(--mg-yazi); box-shadow: var(--mg-hale); }
/* Etkin şerit düğmesi ".on" sınıfıyla işaretleniyor (magara.js:132). Eski mor dolgu
   yerine altın kenar + sıcak hâle: seçili olan, meşalenin ısıttığı taş gibi duruyor. */
.mg-serit.on, .mg-sec.bende, .mg-serit.bende, .mg-sec[aria-pressed="true"] {
  background: linear-gradient(180deg, #3A2C6E 0%, var(--mg-secili) 52%);
  border-color: var(--mg-altin); box-shadow: var(--mg-altin-hale); }
.mg-serit.on.ust, .mg-serit.on.alt { border-color: var(--mg-altin); }
.mg-serit.on span { color: #FFF3E2; }

/* --- HUD: yuvarlak değil oyulmuş; meşale ölçeri kor gibi --- */
.mg-btn { background: linear-gradient(180deg, var(--mg-tas-ust) 0%, var(--mg-tas) 60%);
  border-color: var(--mg-tas-kenar); box-shadow: var(--mg-hale); }
.mg-mesale { border-color: var(--mg-tas-kenar); background: rgba(6,9,18,.85); box-shadow: var(--mg-hale); }
.mg-mesale i { background: linear-gradient(90deg, #B9541C 0%, var(--mg-altin) 55%, var(--mg-altin-ac) 100%);
  box-shadow: var(--mg-kor); }
.mg-yol i.on { background: var(--mg-altin); box-shadow: var(--mg-nokta); }

@media (prefers-reduced-motion: reduce) {
  .mg-lane.bende, .mg-sec.bende { box-shadow: var(--mg-hale); }
}

/* =====================================================================================
   v44 · AKADEMİ — ders merkezi, anlatım, sınav tarzı ve soru bankası (2026-09-09)

   ÜRÜN İLKESİ: üç yol üç ayrı NİYETİ karşılıyor, üçü aynı görünmemeli.
     sınav tarzı  → ciddi, sınav kâğıdı; en güçlü çağrı
     dersi öğren  → sakin, kitap
     soru bankası → pratik/arşiv
   Aynı temada kalıyorlar; ayrımı ikon karosunun rengi ve sol kenar vurgusu taşıyor.
   ===================================================================================== */
:root {
  --ak-sinav: #C2410C;      /* sınav tarzı: sıcak, ciddi */
  --ak-sinav-y: #FFF1E7;
  --ak-ogren: #2563EB;      /* dersi öğren: birincil mavi, sakin */
  --ak-ogren-y: #E8F0FF;
  --ak-banka: #7C3AED;      /* soru bankası: mor arşiv */
  --ak-banka-y: #F1EBFF;
  --ak-okuma-en: 68ch;      /* okuma satır uzunluğu: masaüstünde metin gerilmiyor */
  --mat-vek-ok: .8em;        /* vektör okunun harfe oranı; merdiven dışı ama göreli */
}

/* --- üst gezinme: her ekranın YUKARISI belli --- */
.ak-geri { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font-size: 13.5px; }
.ak-geri span { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-kirinti { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.ak-baslik { margin: 4px 0 6px; font-size: 26px; line-height: 1.15; }
.ak-ozet { margin: 0 0 12px; color: var(--muted); max-width: var(--ak-okuma-en); }

/* --- durum ve ilerleme --- */
.ak-durum-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ak-rozet { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--accent-yazi); }
.ak-rozet-guclu { background: var(--tint-good); color: var(--good-d); }
.ak-yuzde { font-family: var(--display); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.ak-cubuk { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 16px; }
.ak-cubuk i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* --- üç büyük kart --- */
.ak-kart { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; margin-bottom: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.ak-kart-ust { display: flex; gap: 12px; align-items: flex-start; }
.ak-kart h3 { margin: 0; font-size: 18px; }
.ak-kart p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
.ak-ikon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.ak-olcu { margin-top: 10px; font-size: 13.5px; color: var(--ink); }
.ak-cta { margin-top: 12px; width: 100%; justify-content: center; }
.ak-sebep { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ak-kart.kapali { opacity: .72; }
.ak-sinav { border-left-color: var(--ak-sinav); }
.ak-sinav .ak-ikon { background: var(--ak-sinav-y); color: var(--ak-sinav); }
.ak-ogren { border-left-color: var(--ak-ogren); }
.ak-ogren .ak-ikon { background: var(--ak-ogren-y); color: var(--ak-ogren); }
.ak-banka { border-left-color: var(--ak-banka); }
.ak-banka .ak-ikon { background: var(--ak-banka-y); color: var(--ak-banka); }

.ak-biliyorum { width: 100%; min-height: 44px; border: 1px dashed var(--line); background: transparent;
  color: var(--muted); border-radius: var(--r-md); font: inherit; font-size: 13.5px; cursor: pointer; margin-bottom: 12px; }

/* --- oyunlar: ikincil, üç kartla yarışmıyor --- */
.ak-oyun { margin-top: 4px; }
.ak-oyun-satir { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.ak-oyun-kart { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; color: var(--ink); }
.ak-kazanim { margin-top: 12px; border-top: 1px solid var(--line); }
.ak-kazanim summary { min-height: 44px; display: flex; align-items: center; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.ak-kazanim ul { margin: 0 0 8px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; }

/* --- okuma ekranı --- */
.ak-okuma-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; }
.ak-sayac { font-family: var(--display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ak-bolum-ad { font-size: 13.5px; color: var(--muted); text-align: right; }
.ak-metin { max-width: var(--ak-okuma-en); font-size: 16px; line-height: 1.68; }
/* Odak artık bölüm BAŞLIĞINA gidiyor (bkz. a09); kabı saran halka kalktı. */
.ak-metin h2:focus { outline: none; }
.ak-metin h2 { font-size: 20px; margin: 20px 0 8px; line-height: 1.25; }
.ak-metin p { margin: 0 0 12px; }
.ak-okuma-alt { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 6px; }

.ak-kutu { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin: 0 0 12px; }
.ak-kutu b { display: block; margin-bottom: 6px; }
.ak-kutu ul { margin: 0; padding-left: 20px; }
.ak-kutu li { margin-bottom: 4px; }
.ak-kutu-bilgi { border-left: 3px solid var(--ak-ogren); }
.ak-kutu-soru { border-left: 3px solid var(--ak-sinav); font-weight: 600; }
.ak-kutu-sonuc { border-left: 3px solid var(--good); }

.ak-tanim { margin: 0; }
.ak-tanim > div { padding: 10px 0; border-top: 1px solid var(--line); }
.ak-tanim dt { font-weight: 700; }
.ak-tanim dd { margin: 3px 0 0; color: var(--muted); }

.ak-formul { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 12px; }
.ak-formul-g { font-size: 20px; text-align: center; padding: 10px 0; }
.ak-sinir { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin: 6px 0 0; }
.ak-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0; }
.ak-tablo th, .ak-tablo td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ak-tablo th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }

.ak-adim { margin: 0 0 12px; padding-left: 22px; }
.ak-adim li { margin-bottom: 8px; }
.ak-adim b { display: block; }
.ak-adim span { color: var(--muted); }

.ak-kontrol { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 12px; }
.ak-kontrol-s { margin: 0 0 10px; font-weight: 600; }
.ak-kontrol-sik { display: grid; gap: 8px; }
.ak-kontrol-sik button { min-height: 44px; text-align: left; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.ak-kontrol-sik button.ok { border-color: var(--good); }
.ak-kontrol-sik button.no { opacity: .6; }
.ak-kontrol-sik button.secili-no { border-color: var(--bad); }
.ak-kontrol-geri { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

.ak-hata { border-left: 3px solid var(--bad); padding: 8px 0 8px 12px; margin-bottom: 10px; }
.ak-hata-x { display: flex; gap: 6px; align-items: flex-start; font-weight: 600; }
.ak-hata-v { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); margin-top: 4px; }
.ak-tuzak { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 8px; }
.ak-tuzak b { display: block; margin-bottom: 3px; }
.ak-tuzak span { color: var(--muted); font-size: 13.5px; }
.ak-sema { margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); overflow-x: auto;
  --d-kutu: var(--surface); --d-cizgi: var(--muted); --d-yazi: var(--ink); --d-sonuk: var(--muted);
  --d-ok1: var(--ak-ogren); --d-ok2: var(--bad); --d-ok3: var(--good-d); --d-ok4: var(--ak-banka); }
.ak-sema svg { width: 100%; height: auto; display: block; }
.ak-capa { display: flex; gap: 10px; align-items: center; background: var(--tint); border-radius: var(--r-md); padding: 14px; margin-bottom: 12px; }
.ak-capa p { margin: 0; font-weight: 650; }
.ak-ozet-liste { margin: 0; padding-left: 20px; }
.ak-ozet-liste li { margin-bottom: 6px; }

/* matematik gösterimi — KaTeX yok, çevrimdışı çalışır */
.mat { white-space: nowrap; }
.mat-kesir { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 2px; }
.mat-kesir i { font-style: normal; padding: 0 4px; line-height: 1.15; }
.mat-kesir i:first-child { border-bottom: 1px solid currentColor; }
.mat-kok { border-top: 1px solid currentColor; padding: 0 2px; margin-left: 7px; }
.mat-kok::before { content: "\221A"; border-top: 0; margin-left: -8px; }
.mat-vek { position: relative; }
.mat-vek::after { content: "\2192"; position: absolute; left: 0; right: 0; top: -.72em; font-size: var(--mat-vek-ok); text-align: center; }

/* --- oturum ekranları (sınav tarzı / banka) --- */
.ak-oturum-b { margin: 2px 0 4px; font-size: 20px; }
.ak-oturum-not { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); max-width: var(--ak-okuma-en); }
.ak-suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ak-suzgec button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.ak-suzgec button.on { border-color: var(--accent); color: var(--accent-yazi); background: var(--tint); font-weight: 600; }
.ak-adet { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 12px; }
.ak-adet > span { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.ak-adet-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.ak-bos-suzgec { margin: 0 0 12px; }
.ak-bos-b { margin: 0 0 6px; }

.ak-sonuc-ust { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.ak-sonuc-sayi { display: flex; align-items: baseline; gap: 8px; }
.ak-sonuc-sayi b { font-family: var(--display); font-weight: 800; font-size: 34px; font-variant-numeric: tabular-nums; }
.ak-sonuc-sayi i { font-style: normal; margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 20px; }
.ak-sonuc-kirilim { display: flex; gap: 12px; margin-top: 6px; font-size: 13.5px; }
.ak-sonuc-kirilim .iyi { color: var(--good-d); }
.ak-sonuc-kirilim .kotu { color: var(--bad); }
.ak-sonuc-zayif { margin: 8px 0 0; font-size: 13.5px; display: flex; gap: 6px; align-items: flex-start; }
.ak-sonuc-zayif svg { flex: none; margin-top: 3px; }
.ak-bitis { text-align: center; }
.ak-bitis .ak-ikon { margin: 0 auto 8px; background: var(--tint-good); color: var(--good-d); }
.ak-bitis h2 { margin: 0 0 6px; }
.ak-bitis-eylem { display: grid; gap: 8px; margin-top: 14px; }

/* --- Program: ders satırı durumu --- */
.pr-ders-durum { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pr-rozet-durum { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--tint); color: var(--accent-yazi); white-space: nowrap; }
.pr-rozet-durum.d-guclu { background: var(--tint-good); color: var(--good-d); }
.pr-yuzde { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.pr-ilerleme { margin: 10px 0; }
.pr-ilerleme-ust { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 5px; }
.pr-ilerleme-ust b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-ilerleme-cubuk { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pr-ilerleme-cubuk i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* --- masaüstü: metin gerilmesin, kartlar yayılmasın --- */
@media (min-width: 900px) {
  .ak-kart { max-width: 720px; }
}

/* Soru bankası ekranından dersin diğer iki yoluna dürüst çıkış (seyrek konularda
   ekranın yarısı boş kalıyordu; süs değil, gerçekten oraya ait bir bağlantı). */
.ak-diger { margin-top: 18px; }
.ak-diger-satir { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 8px; color: var(--ink); font-size: 15px; }
.ak-diger-satir span { flex: 1; }
/* Son ikon İLERİ yönü gösterir; "back" ikonu aynalanıyor (depodaki yerleşik desen). */
.ak-diger-satir svg:last-child { color: var(--muted); opacity: .45; transform: scaleX(-1); }
.pr-ders-durum svg:last-child { transform: scaleX(-1); opacity: .45; }

/* =====================================================================================
   v45 · ÜNİTE SAYFASI ve HAZIRLIK DURUMU (2026-09-09)

   İki şeyi çözüyor:
   1. Ders ekranı altı üniteyi tek sayfada akordeon olarak açıyordu; 29 ders tek
      kaydırma sütununa yığılıyordu. Ünite artık kendi sayfasında.
   2. 665 dersin 339'unda (%51) hiçbir içerik yok. Liste ekranında hepsi AYNI
      görünüyordu, yani öğrenci ancak içeri girip çıkmaza tosladıktan sonra
      öğreniyordu. Artık satır önceden söylüyor.
   ===================================================================================== */

/* --- ünite kartı: kendi sayfasına giden bağlantı --- */
.pr-unite-kart { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ad ok" "meta ok" "hazir ok";
  gap: 2px 10px; align-items: center; padding: 14px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); }
.pr-unite-kart:hover, .pr-unite-kart:focus-visible { border-color: var(--accent); }
.pr-unite-ad { grid-area: ad; font-weight: 700; font-size: 16px; line-height: 1.25; }
.pr-unite-meta { grid-area: meta; font-size: 13.5px; color: var(--muted); }
.pr-unite-hazir { grid-area: hazir; margin-top: 4px; }
.pr-unite-kart > svg { grid-area: ok; color: var(--muted); opacity: .45; transform: scaleX(-1); }

/* --- hazırlık etiketi: neyin hazır olduğunu ÖNCEDEN söyler --- */
.pr-hazir { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pr-hazir-var { background: var(--tint-good); color: var(--good-d); }
.pr-hazir-yok { background: var(--tint); color: var(--muted); }
.pr-hazir svg { flex: none; }

/* İçeriği olmayan satır ve kart SÖNÜK. Gizlemiyoruz — müfredat haritası eksiksiz
   kalmalı — ama öğrencinin gözü hazır olanlara gitsin.
   Ad .pr-bos DEĞİL: o ad zaten program listesinde italik bir alt yazı sınıfı olarak
   kullanılıyor ve kartların tamamını eğik yazdırıyordu. */
.pr-sonuk { opacity: .62; }
.pr-sonuk:hover { opacity: .85; }

/* --- ders satırı: hazırlık etiketi için ızgara --- */
.pr-ders-satir { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ad durum" "meta durum" "hazir durum";
  gap: 2px 10px; align-items: center; }
.pr-ders-ad { grid-area: ad; }
.pr-ders-meta { grid-area: meta; }
.pr-ders-satir .pr-hazir { grid-area: hazir; margin-top: 4px; justify-self: start; }
.pr-ders-durum { grid-area: durum; }

.pr-kirinti { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

@media (max-width: 372px) {
  .pr-unite-ad { font-size: 15px; }
}

/* =====================================================================================
   v46 · KURS KAPSAMI (2026-09-09)

   Kurs sayfasının başındaki kapsam kutusu. Eski hâli tek satır gömülü metindi ve yalnız
   anlatımı sayıyordu; kaç dersin tamamen boş olduğunu hiç söylemiyordu.
   ===================================================================================== */

.pr-kapsam { display: grid; gap: 10px; padding: 14px; margin: 12px 0 16px; }
.pr-kapsam-baslik { font-size: 13.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em; text-transform: uppercase; }
.pr-kapsam-kirilim { display: grid; gap: 8px; }

/* Satır adları ders merkezindeki üç yolun AYNI adları. Sayı sağda, sekmeli rakamla:
   üç satır alt alta okunduğunda hizalı kalsın. */
.pr-kapsam-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-kapsam-satir span { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); }
.pr-kapsam-satir span svg { flex: none; color: var(--good); }
.pr-kapsam-satir b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-kapsam-sifir span, .pr-kapsam-sifir b { color: var(--muted); }
.pr-kapsam-sifir span svg { color: var(--muted); }
.pr-kapsam-yok { font-size: 15px; color: var(--ink); }
/* Boş ders çıkmaz sokak olmasın: kazanım listesi hâlâ gerçek bir değer taşıyor. */
.pr-kapsam-yok span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }

/* Ünite kartı artık tek "hazır" rozeti değil, moda göre BİRDEN ÇOK rozet taşıyabiliyor
   (a14); dar telefonda alt satıra sarsınlar. */
.pr-unite-hazir { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-unite-hazir-ust { margin: 10px 0 4px; }


/* =====================================================================================
   v47 · OYUNDA DOĞRU/YANLIŞ YALNIZ RENKLE ANLATILMASIN (yol haritası E2)

   ÖLÇÜLDÜ: Tırmanış ve Mağara'da cevap geri bildirimi TEK sinyalle veriliyordu —
   arka plan rengi. `.tr-sik button.dogru { background: var(--good) }`,
   `.yanlis { background: var(--bad) }`. Başka hiçbir işaret yok.

   Açıklayıcı metin VAR ama görünmüyor: `.tr-canli` ve `.mg-canli` ekran okuyucuya
   özel (1px, clip). Yani ekran okuyucu kullanan öğrenci "Yanlış. Bir elin kaydı"
   duyuyor; GÖREN ama kırmızı-yeşil ayıramayan öğrenciye hiçbir şey kalmıyor.

   Kırmızı-yeşil renk körlüğü erkeklerin yaklaşık %8'inde görülüyor ve bu uygulamanın
   kitlesi ağırlıklı olarak ergen. Ses ve titreşim kapatılabilir; renk tek başına
   kalıyor.

   ONARIM: renge ek olarak ŞEKİL. Doğru şıkta ✓, yanlış seçimde ✕. İkisi de köşede,
   metnin akışını bozmadan. Renk kaldırılmadı — ikinci bir kanal eklendi.
   ===================================================================================== */

.tr-sik button, .mg-sik button { position: relative; }

.tr-sik button.dogru::after, .tr-sik button.yanlis::after,
.mg-sik button.dogru::after, .mg-sik button.yanlis::after {
  position: absolute; top: 3px; right: 5px;
  font-size: 13.5px; line-height: 1; font-weight: 700;
  color: var(--uzeri); opacity: .95; pointer-events: none;
}
.tr-sik button.dogru::after, .mg-sik button.dogru::after { content: "\2713"; }   /* ✓ */
.tr-sik button.yanlis::after, .mg-sik button.yanlis::after { content: "\2715"; } /* ✕ */

/* Yanlış seçimde kenar da kalınlaşıp kesikli oluyor: renk görülemese bile iki şık
   birbirinden dokusuyla ayrılıyor. */
.tr-sik button.yanlis, .mg-sik button.yanlis { border-style: dashed; }

/* P0-6 — Pratik ön kapısı */
.pr-pratik-kapi { margin: 4px 0 14px; }
.pr-konu-sec { margin-top: 12px; }
.pr-ikincil-bas { margin-top: 18px; }
.pr-ikincil { display: grid; gap: 10px; margin-top: 8px; }
.pr-oneri { margin-top: 6px; }
.pr-baglam a { color: var(--blue); }
.pr-unite-katla { margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; background: var(--surface); }
.pr-unite-katla > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px; list-style: none; }
.pr-unite-katla > summary::-webkit-details-marker { display: none; }
.pr-unite-govde { display: grid; gap: 8px; padding: 8px 0 4px; }
.pr-bankasiz { opacity: 1; }
.pr-satir-alt { display: block; margin-top: 2px; }

/* =====================================================================================
   v30 — CEVAP GERİ BİLDİRİMİ, TEK TEMA (2026-09-11, issue #37)
   Uygulama tek tema (koyu) olduğundan cevap renkleri artık açık temanın sabit hex'lerinden
   değil, jetonlardan türetilir. Kural: her durum üç kanalla söylenir — dolgu + kenarlık + işaret
   (✓ / ✕) — renk körlüğünde de ayrışır. Ölçümler (WCAG): metin/dolgu ≥ 12:1, rozet ≥ 7:1,
   kenarlık/yüzey ≥ 6:1 (test-renk.js doğrular). Bu blok sondadır; önceki bloklar düzenlenmedi.
   ===================================================================================== */
:root, :root[data-tema="acik"], :root[data-tema="koyu"], :root[data-tema="sistem"] {
  --geri-iyi-bg: color-mix(in srgb, var(--good) 22%, var(--surface));
  --geri-kotu-bg: color-mix(in srgb, var(--bad) 22%, var(--surface));
  --geri-uyari-bg: color-mix(in srgb, var(--warn) 16%, var(--surface));
  --geri-rozet-ink: var(--bg);      /* rozet üstünde koyu yazı: beyaz 2.4:1 idi, koyu 8:1 */
}
/* --- CALISMA şıkları --- */
.cl-sik.ok, :root[data-tema="acik"] .cl-sik.ok, :root[data-tema="koyu"] .cl-sik.ok, :root[data-tema="sistem"] .cl-sik.ok { background: var(--geri-iyi-bg); border: 2px solid var(--good); color: var(--ink); }
.cl-sik.no, :root[data-tema="acik"] .cl-sik.no, :root[data-tema="koyu"] .cl-sik.no, :root[data-tema="sistem"] .cl-sik.no { background: var(--geri-kotu-bg); border: 2px solid var(--bad); color: var(--ink); }
.cl-sik.ok .cl-harf { background: var(--good); color: var(--geri-rozet-ink); }
.cl-sik.no .cl-harf { background: var(--bad); color: var(--geri-rozet-ink); }
.cl-sik.ok .cl-metin, .cl-sik.no .cl-metin { color: var(--ink); font-weight: 700; }
.cl-sik.ok::after { content: "✓"; color: var(--good); font-weight: 900; font-size: 18px; flex: 0 0 auto; }
.cl-sik.no::after { content: "✕"; color: var(--bad); font-weight: 900; font-size: 18px; flex: 0 0 auto; }
.cl-sik.no .cl-metin { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--bad); }
/* --- sonuç satırı, "neden yanlış" kutusu, özet satırları --- */
.cl-sonuc.iyi { color: var(--good); }
.cl-sonuc.kotu { color: var(--bad); }
.cl-nicin-yanlis, :root[data-tema="acik"] .cl-nicin-yanlis, :root[data-tema="koyu"] .cl-nicin-yanlis, :root[data-tema="sistem"] .cl-nicin-yanlis { background: var(--geri-uyari-bg); border-left-color: var(--warn); color: var(--ink); }
.cl-nicin-yanlis b { color: var(--warn); }
.cl-satir.iyi .cl-rozet { background: var(--good); color: var(--geri-rozet-ink); }
.cl-satir.kotu .cl-rozet { background: var(--bad); color: var(--geri-rozet-ink); }
/* --- X-Ray güven rozetleri --- */
.xr-guven.guven-y { background: var(--good); color: var(--geri-rozet-ink); }
.xr-guven.guven-o { background: var(--warn); color: var(--geri-rozet-ink); }
/* --- eski test çizimi (.opt): yanlış artık mor değil kırmızı; işaret eklendi --- */
.opt.ok { border-color: var(--good); background: var(--geri-iyi-bg); }
.opt.no { border-color: var(--bad); background: var(--geri-kotu-bg); }
.opt.ok b { background: var(--good); color: var(--geri-rozet-ink); }
.opt.no b { background: var(--bad); color: var(--geri-rozet-ink); }
/* --- deneme sonuç karoları: yanlış = kırmızı (mor marka rengi "yanlış" anlamı taşımıyordu) --- */
.tiles .tile.no, .tiles i.no, .tile.sm.no { background: var(--bad); }
/* --- akademi hızlı kontrol --- */
.ak-kontrol-sik button.ok { border: 2px solid var(--good); background: var(--geri-iyi-bg); }
.ak-kontrol-sik button.secili-no { border: 2px solid var(--bad); background: var(--geri-kotu-bg); opacity: 1; }

/* =====================================================================================
   v31 — KART KAYDIRMA · v32 — UNO KART (2026-09-11, issue #39)
   Kart dersinin rengini taşır (--world, WORLDS); içerik UNO'nun beyaz ovali gibi açık panelde,
   koyu yazı (15:1). Damgalar flört uygulaması gibi köşeden döner; üstteki kart sürüklenir, döner,
   eşikte uçar, bırakınca yaylanır. Hareket azaltma: dönme ve uçuş yok. Stil kapısına uyumlu:
   hex yalnız jeton tanımında, yarıçap/yazı/gölge/süre/z-index ölçek içinde. Bu blok sondadır.
   ===================================================================================== */
:root, :root[data-tema="acik"], :root[data-tema="koyu"], :root[data-tema="sistem"] {
  --kart-panel: #FFFFFF; --kart-ink: #171A2E; --kart-ink-2: #2A2F47; --kart-sessiz: #5B627A;
  --kart-sik: #F6F5FB; --kart-sik-kenar: #E1DEF0; --kart-uzeri: #FFFFFF;
  --kart-iyi: #16A34A; --kart-iyi-bg: #E7F9EE; --kart-iyi-metin: #15803D;
  --kart-kotu: #DC2626; --kart-kotu-bg: #FDECEC; --kart-kotu-metin: #B91C1C;
  --kart-uyari: #B45309; --kart-ai: #6A4AF0; --kart-sikayet: #8A6B00;
  --kart-golge: 0 18px 44px -18px rgba(0,0,0,.7), inset 0 0 0 3px rgba(255,255,255,.55);
  --kart-golge-tut: 0 28px 60px -20px rgba(0,0,0,.8), inset 0 0 0 3px rgba(255,255,255,.7);
  --kart-golge-iyi: 0 18px 44px -18px rgba(0,0,0,.7), inset 0 0 0 3px rgba(255,255,255,.55), 0 0 0 4px rgba(22,163,74,.45);
  --kart-golge-kotu: 0 18px 44px -18px rgba(0,0,0,.7), inset 0 0 0 3px rgba(255,255,255,.55), 0 0 0 4px rgba(220,38,38,.45);
  --kart-panel-golge: 0 6px 18px -10px rgba(0,0,0,.4);
  --kart-damga-bg: rgba(255,255,255,.92);
  --kart-mono: rgba(255,255,255,.92);
}
.kt-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kt-baslik { margin: 6px 0 2px; }
.kt-sahne { height: min(560px, 68vh); max-width: 440px; }
.kt-kart.kt-2 { transition: transform var(--motion-fast), opacity var(--motion-fast); }
.kt-kart.kt-3 { transition: transform var(--motion-fast), opacity var(--motion-fast); }
.kt-kart.kt-ucuyor { pointer-events: none; }
.kt-kart:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kt-mono { position: absolute; z-index: 1; font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--kart-mono); pointer-events: none; }
.kt-mono-ust { top: 8px; left: 16px; }
.kt-mono-alt { bottom: 8px; right: 16px; transform: rotate(180deg); }
.kt-govde { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 10px; height: 100%; margin: 34px 4px 30px; padding: 14px 14px 12px;
  background: var(--kart-panel); color: var(--kart-ink); border-radius: 18px; overflow: auto; box-shadow: var(--kart-panel-golge); }
.kt-kirinti { font-size: 12px; color: var(--kart-sessiz); font-weight: 700; letter-spacing: .02em; }
.kt-tekrar-rozet { color: var(--kart-uyari); }
.kt-ai-rozet { color: var(--kart-ai); }
.kt-soru { font-size: 18px; font-weight: 700; line-height: 1.4; white-space: pre-wrap; color: var(--kart-ink); }
.kt-ipucu { margin: 8px 0 0; color: var(--kart-sessiz); }
/* şıklar: v30 tema kuralları (0,4,0) ile yarışmasın diye :root .kt-kart .kt-govde (0,5,0) */
:root .kt-kart .kt-govde .cl-sik { background: var(--kart-sik); border: 2px solid var(--kart-sik-kenar); color: var(--kart-ink); border-radius: 12px; }
:root .kt-kart .kt-govde .cl-sik .cl-harf { font-weight: 900; }
:root .kt-kart .kt-govde .cl-sik .cl-metin { color: var(--kart-ink); }
:root .kt-kart .kt-govde .cl-sik.ok { background: var(--kart-iyi-bg); border-color: var(--kart-iyi); color: var(--kart-ink); }
:root .kt-kart .kt-govde .cl-sik.ok .cl-harf { background: var(--kart-iyi); color: var(--kart-uzeri); }
:root .kt-kart .kt-govde .cl-sik.ok .cl-metin { color: var(--kart-ink); }
:root .kt-kart .kt-govde .cl-sik.ok::after { color: var(--kart-iyi); }
:root .kt-kart .kt-govde .cl-sik.no { background: var(--kart-kotu-bg); border-color: var(--kart-kotu); color: var(--kart-ink); }
:root .kt-kart .kt-govde .cl-sik.no .cl-harf { background: var(--kart-kotu); color: var(--kart-uzeri); }
:root .kt-kart .kt-govde .cl-sik.no .cl-metin { color: var(--kart-ink); text-decoration-color: var(--kart-kotu); }
:root .kt-kart .kt-govde .cl-sik.no::after { color: var(--kart-kotu); }
:root .kt-kart .kt-govde .cl-sonuc.iyi { color: var(--kart-iyi-metin); }
:root .kt-kart .kt-govde .cl-sonuc.kotu { color: var(--kart-kotu-metin); }
/* damgalar */
.kt-damga { transition: opacity var(--motion-instant); }
.kt-etiket { display: none; }
/* düğmeler, bitti, liste */
.kt-eylem { max-width: 440px; }
.kt-bitti { text-align: left; }
.kt-liste-renk { display: none; }
@media (prefers-reduced-motion: reduce) { .kt-kart, .kt-damga { transition: none !important; } }

/* =====================================================================================
   v33 — UNO RENKLERİ + ANA SAYFA YÜZEN KART DÜĞMESİ (2026-09-11, issue #39)
   Dört UNO rengi ders grubuna göre: kırmızı dil, mavi matematik, yeşil fen, sarı sosyal; joker
   siyah. Kart: renkli zemin, ortada eğik beyaz oval, köşelerde gölgeli harf, beyaz içerik paneli.
   Yüzen düğme yalnız Ana Sayfa'da (data-rota="bugun"): üç mini kart sürekli karılır; hareket
   azaltmada durur. Stil kapısı: hex yalnız jeton tanımında; ölçek içi değerler. Bu blok sondadır.
   ===================================================================================== */
:root, :root[data-tema="acik"], :root[data-tema="koyu"], :root[data-tema="sistem"] {
  --uno-kirmizi: #E3242B; --uno-kirmizi-koyu: #B1161C;
  --uno-mavi: #1E6FD9; --uno-mavi-koyu: #144FA0;
  --uno-yesil: #238741; --uno-yesil-koyu: #186A31;   /* io146: beyaz soru/şık yazısı 2,70:1 idi → 4,55:1 (kırmızı 4,61, mavi 4,85 zaten geçiyordu) */
  --uno-sari: #FFD43B; --uno-sari-koyu: #D9A800;
  --uno-siyah: #1B1B1F; --uno-siyah-koyu: #000000;
  --uno-beyaz: #FFFFFF; --uno-koyu-yazi: #171A2E;
  --uno-golge-harf: 0 2px 0 rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.25);
  --uno-oval-golge: 0 10px 30px -12px rgba(0,0,0,.5);
  --uno-fab-golge: 0 12px 30px -10px rgba(0,0,0,.65);
  --uno-mini-r: 6px;
  --uno-mini-golge: inset 0 0 0 2px #FFFFFF, 0 2px 4px rgba(0,0,0,.35);
  --uno-nabiz-0: 0 0 0 0 rgba(30,111,217,.45);
  --uno-nabiz-1: 0 0 0 14px rgba(30,111,217,0);
  --uno-fan-sure: 3.6s;
  --uno-ic-cerceve: inset 0 0 0 6px #FFFFFF;
  --uno-golge-kart: 0 18px 44px -18px rgba(0,0,0,.7), inset 0 0 0 6px #FFFFFF;
  --uno-golge-tut: 0 28px 60px -20px rgba(0,0,0,.8), inset 0 0 0 6px #FFFFFF;
  --uno-golge-iyi: 0 18px 44px -18px rgba(0,0,0,.7), inset 0 0 0 6px #FFFFFF, 0 0 0 4px rgba(22,163,74,.45);
  --uno-golge-kotu: 0 18px 44px -18px rgba(0,0,0,.7), inset 0 0 0 6px #FFFFFF, 0 0 0 4px rgba(220,38,38,.45);
  --uno-fab-golge-tam: 0 12px 30px -10px rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.12);
}
/* kart zemini ve oval */
.kt-kart.kt-dogru { box-shadow: var(--uno-golge-iyi); }
.kt-kart.kt-yanlis { box-shadow: var(--uno-golge-kotu); }
.kt-oval { position: absolute; z-index: 1; left: 50%; top: 50%; width: 96%; height: 58%; transform: translate(-50%, -50%) rotate(-24deg); border-radius: 50%; background: var(--uno-beyaz); opacity: .6; box-shadow: var(--uno-oval-golge); pointer-events: none; }
.kt-kart.kt-uno-sari .kt-mono { color: var(--uno-koyu-yazi); text-shadow: none; }
.kt-kart .kt-govde { z-index: 10; box-shadow: none; background: var(--uno-beyaz); }
:root .kt-kart .kt-govde .cl-sik .cl-harf { background: var(--kart-renk, var(--uno-siyah)); color: var(--uno-beyaz); }
:root .kt-kart.kt-uno-sari .kt-govde .cl-sik .cl-harf { color: var(--uno-koyu-yazi); }
@keyframes ktGeldi { from { transform: translateY(14px) scale(.97); opacity: .6; } to { transform: none; opacity: 1; } }
.kt-liste .cl-satir { border-left: 6px solid var(--kart-renk, var(--line)); }
/* Ana Sayfa yüzen düğme */
.kt-fab { display: none; position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  align-items: center; gap: 10px; padding: 8px 16px 8px 10px; min-height: 56px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; font-size: 15px; box-shadow: var(--uno-fab-golge-tam); }
/* io318: Bugün'deki yüzen Kartlar düğmesi kalktı — yerini ikincil bölümdeki Kartlar karosu aldı (kurucu onayı, 2026-10-10; aynı hedef #/kartlar,
   aynı ölçüm kart_acildi). Düğme kart.js'te kurulmaya devam eder, hiçbir rotada görünmez; alt boşluk (168 px) da gerekmiyor. */
.kt-fab:active { transform: translateY(2px); }
.kt-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kt-fab-deste { position: relative; width: 44px; height: 40px; flex: 0 0 auto; }
.kt-fab-kart { position: absolute; left: 12px; top: 2px; width: 22px; height: 32px; border-radius: var(--uno-mini-r); box-shadow: var(--uno-mini-golge); display: grid; place-items: center; transform-origin: 50% 90%; }
.kt-fab-kart b { color: var(--uno-beyaz); font-size: 13.5px; text-shadow: var(--uno-golge-harf); }
.kt-fab-k1 { background: var(--uno-kirmizi); transform: rotate(-16deg) translateX(-4px); animation: ktFan1 var(--uno-fan-sure) ease-in-out infinite; }
.kt-fab-k2 { background: var(--uno-mavi); transform: rotate(0deg); animation: ktFan2 var(--uno-fan-sure) ease-in-out infinite; }
.kt-fab-k3 { background: var(--uno-yesil); transform: rotate(16deg) translateX(4px); animation: ktFan3 var(--uno-fan-sure) ease-in-out infinite; }
.kt-fab-k3 b { color: var(--uno-beyaz); }
@keyframes ktFan1 { 0%, 55%, 100% { transform: rotate(-16deg) translateX(-4px); } 20% { transform: rotate(-26deg) translate(-8px, -6px); } 38% { transform: rotate(-12deg) translate(-2px, 2px); } }
@keyframes ktFan2 { 0%, 55%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(4deg) translateY(-9px); } 42% { transform: rotate(-2deg) translateY(1px); } }
@keyframes ktFan3 { 0%, 55%, 100% { transform: rotate(16deg) translateX(4px); } 30% { transform: rotate(28deg) translate(9px, -6px); } 48% { transform: rotate(13deg) translate(3px, 2px); } }
.kt-fab::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; box-shadow: var(--uno-nabiz-0); animation: ktNabiz var(--uno-fan-sure) ease-out infinite; pointer-events: none; }
@keyframes ktNabiz { 0% { box-shadow: var(--uno-nabiz-0); } 60%, 100% { box-shadow: var(--uno-nabiz-1); } }
/* io236: Android'da "Animasyonları kaldır" ya da güç tasarrufu da "azaltılmış hareket" bildiriyor — kartlar düğmesi orada hiç
   kıpırdamıyordu (kurucu). Küçük ve yavaş deste yelpazesi azaltılmış harekette de sürer (1,5 kat yavaş); nabız halkası ve
   kart geliş efekti kapalı kalır. Genel kural (430) bu kartları dışarıda bırakır. */
@media (prefers-reduced-motion: reduce) { .kt-fab::after, .kt-kart.kt-geldi { animation: none !important; } .kt-fab .kt-fab-kart { animation-duration: calc(var(--uno-fan-sure) * 1.5); } }
@media (min-width: 720px) { .kt-fab { right: calc(50% - 344px); } }

/* =====================================================================================
   v34 — KARTLAR TAM EKRAN + TEK RENK UNO KARTI (2026-09-11, issue #39)
   #/kartlar açılınca üst çubuk ve sekmeler gizlenir; zemin derin, arkada yavaş süzülen mini kartlar.
   Kart: tek düz UNO rengi, beyaz panel YOK; dersin Netçi motifi (WORLDS) ve N markası su damgası;
   metin beyaz (sarıda koyu). Şıklar yarı saydam kapsül; doğru beyaz+yeşil yazı, yanlış koyu+üstü çizili.
   Sürükleme touch-action: none, translate3d. Stil kapısı: hex yalnız jetonda, ölçek içi. Bu blok sondadır.
   ===================================================================================== */
:root, :root[data-tema="acik"], :root[data-tema="koyu"], :root[data-tema="sistem"] {
  --kt-zemin-1: #0B0D17; --kt-zemin-2: #141A33;
  --kt-kapsul: rgba(0,0,0,.28); --kt-kapsul-kenar: rgba(255,255,255,.35); --kt-kapsul-sari: rgba(255,255,255,.42);
  --kt-yanlis: rgba(0,0,0,.5); --kt-yanlis-sari: rgba(0,0,0,.18);
  --kt-iyi-yazi: #15803D; --kt-beyaz: #FFFFFF; --kt-koyu: #171A2E;
  --kt-golge: 0 26px 60px -22px rgba(0,0,0,.85);
  --kt-golge-tut: 0 36px 80px -24px rgba(0,0,0,.9);
  --kt-suzul-sure: 14s;
  --kt-yuzen-golge: 0 10px 24px -10px rgba(0,0,0,.6);
}
/* --- tam ekran kabuk --- */
:root[data-rota="kartlar"] .top, :root[data-rota="kartlar"] .tabs, :root[data-rota="kartlar"] .kt-fab { display: none; }
:root[data-rota="kartlar"] body::before { background: radial-gradient(900px 600px at 20% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--uno-mavi) 18%, transparent), transparent 60%), linear-gradient(180deg, var(--kt-zemin-1), var(--kt-zemin-2)); }
:root[data-rota="kartlar"] body::after { display: none; }
:root[data-rota="kartlar"] #view { padding: 0; max-width: none; }
.kt-tam { position: fixed; inset: 0; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(12px + env(safe-area-inset-bottom, 0px)); overflow: hidden; z-index: 20; }
.kt-tam-liste { position: static; min-height: 100dvh; overflow: auto; }
.kt-tam-ust { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 10px; position: relative; z-index: 20; }
.kt-kapat, .kt-kaydettik { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); text-decoration: none; font-weight: 800; }
.kt-sayac { justify-self: center; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink); }
.kt-sahne { position: relative; z-index: 10; perspective: 1000px; touch-action: none; }
.kt-eylem { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; width: min(100%, 440px); margin: 12px auto 0; }
.kt-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; }
.kt-btn-kaydet { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.kt-btn:active { transform: translateY(2px); }
.kt-not { position: relative; z-index: 20; margin: 8px 0 0; text-align: center; color: var(--muted); font-size: 12px; }
/* --- arkada süzülen mini kartlar --- */
.kt-yuzen { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.kt-yuzen i { position: absolute; width: 34px; height: 48px; border-radius: 12px; opacity: .28; box-shadow: var(--kt-yuzen-golge); animation: ktSuzul var(--kt-suzul-sure) ease-in-out infinite alternate; }
.kt-yuzen i:nth-child(1) { left: 6%; top: 14%; background: var(--uno-kirmizi); transform: rotate(-18deg); animation-delay: 0s; }
.kt-yuzen i:nth-child(2) { left: 84%; top: 10%; background: var(--uno-mavi); transform: rotate(14deg); animation-delay: -3s; }
.kt-yuzen i:nth-child(3) { left: 10%; top: 62%; background: var(--uno-yesil); transform: rotate(10deg); animation-delay: -6s; }
.kt-yuzen i:nth-child(4) { left: 88%; top: 56%; background: var(--uno-sari); transform: rotate(-12deg); animation-delay: -9s; }
.kt-yuzen i:nth-child(5) { left: 48%; top: 4%; background: var(--uno-mavi); transform: rotate(6deg); width: 24px; height: 34px; animation-delay: -2s; }
.kt-yuzen i:nth-child(6) { left: 30%; top: 84%; background: var(--uno-kirmizi); transform: rotate(22deg); width: 26px; height: 36px; animation-delay: -11s; }
.kt-yuzen i:nth-child(7) { left: 70%; top: 88%; background: var(--uno-yesil); transform: rotate(-8deg); width: 28px; height: 40px; animation-delay: -5s; }
@keyframes ktSuzul { from { translate: 0 0; } to { translate: 12px -26px; } }
/* --- kart: tek renk --- */
.kt-kart { position: absolute; padding: 18px 18px 16px; border: 0; border-radius: 24px; background: var(--kart-renk, var(--uno-siyah)); color: var(--kt-beyaz);
  box-shadow: var(--kt-golge); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; will-change: transform; transform-origin: 50% 110%; }
.kt-kart.kt-tutuluyor { box-shadow: var(--kt-golge-tut); cursor: grabbing; }
.kt-kart.kt-dogru, .kt-kart.kt-yanlis { box-shadow: var(--kt-golge); }
.kt-kart > .world-bg { display: block; position: absolute; inset: -10%; pointer-events: none; }
.kt-kart .kt-oval, .kt-kart .kt-mono-ust, .kt-kart .kt-mono-alt, .kt-kart .kt-govde { display: none; }
.kt-marka { position: absolute; pointer-events: none; }
.kt-marka svg { width: 100%; height: auto; }
.kt-kart .kt-mono { position: absolute; top: 10px; right: 16px; font-family: var(--display); font-weight: 900; line-height: 1; color: var(--kt-beyaz); text-shadow: none; pointer-events: none; }
.kt-icerik { position: relative; z-index: 10; gap: 12px; overflow: hidden; }
.kt-kart .kt-kirinti { color: var(--kt-beyaz); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.kt-kart .kt-soru { color: var(--kt-beyaz); font-weight: 800; line-height: 1.35; }
.kt-kart .kt-tekrar-rozet, .kt-kart .kt-ai-rozet { color: var(--kt-beyaz); opacity: 1; text-decoration: underline; }
.kt-siklar { display: grid; gap: 10px; }
.kt-sik { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 18px; border: 2px solid var(--kt-kapsul-kenar); background: var(--kt-kapsul); color: var(--kt-beyaz); font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; transition: transform var(--motion-fast), background var(--motion-fast); }
.kt-sik:active { transform: scale(.985); }
.kt-sik[aria-disabled="true"] { cursor: default; }
.kt-harf { flex: 0 0 30px; height: 30px; border-radius: 12px; display: grid; place-items: center; background: var(--kt-beyaz); color: var(--kart-renk, var(--uno-siyah)); font-size: 13.5px; font-weight: 900; }
.kt-metin { flex: 1; line-height: 1.35; }
.kt-sik.ok { background: var(--kt-beyaz); border-color: var(--kt-beyaz); color: var(--kt-iyi-yazi); }
.kt-sik.ok .kt-harf { background: var(--kt-iyi-yazi); color: var(--kt-beyaz); }
.kt-sik.ok::after { content: "✓"; font-weight: 900; font-size: 18px; }
.kt-sik.no { background: var(--kt-yanlis); border-color: transparent; }
.kt-sik.no .kt-metin { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .85; }
.kt-sik.no::after { content: "✕"; font-weight: 900; font-size: 18px; }
.kt-sonuc { display: flex; align-items: center; gap: 8px; color: var(--kt-beyaz); }
.kt-aciklama { margin: 6px 0 0; line-height: 1.5; color: var(--kt-beyaz); opacity: .92; }
.kt-sikayet { align-self: flex-start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12px; color: var(--kt-beyaz); opacity: .8; text-decoration: underline; cursor: pointer; }
/* sarı kart: koyu yazı */
.kt-kart.kt-uno-sari, .kt-kart.kt-uno-sari .kt-kirinti, .kt-kart.kt-uno-sari .kt-soru, .kt-kart.kt-uno-sari .kt-sonuc, .kt-kart.kt-uno-sari .kt-aciklama, .kt-kart.kt-uno-sari .kt-sikayet, .kt-kart.kt-uno-sari .kt-mono, .kt-kart.kt-uno-sari .kt-tekrar-rozet, .kt-kart.kt-uno-sari .kt-ai-rozet { color: var(--kt-koyu); }
.kt-kart.kt-uno-sari .kt-sik { background: var(--kt-kapsul-sari); border-color: transparent; color: var(--kt-koyu); }
.kt-kart.kt-uno-sari .kt-harf { background: var(--kt-koyu); color: var(--uno-sari); }
.kt-kart.kt-uno-sari .kt-sik.ok { background: var(--kt-beyaz); color: var(--kt-iyi-yazi); }
.kt-kart.kt-uno-sari .kt-sik.no { background: var(--kt-yanlis-sari); color: var(--kt-koyu); }
/* yığın ve damgalar */
.kt-kart.kt-1 { z-index: 30; cursor: grab; }
.kt-kart.kt-2 { z-index: 20; transform: translate3d(0, 14px, 0) scale(.95); opacity: .82; pointer-events: none; }
.kt-kart.kt-3 { z-index: 10; transform: translate3d(0, 28px, 0) scale(.9); opacity: .55; pointer-events: none; }
.kt-kart.kt-geldi { animation: ktGeldi var(--motion-standard) cubic-bezier(.2,.8,.2,1) both; }
.kt-damga { position: absolute; z-index: 30; top: 52px; padding: 8px 14px; border: 4px solid currentColor; border-radius: 12px; background: var(--kart-damga-bg); font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; }
.kt-damga-sag { left: 18px; color: var(--kt-iyi-yazi); --tr: rotate(-14deg); transform: rotate(-14deg); }
.kt-damga-sol { right: 18px; color: var(--kart-uyari); --tr: rotate(14deg); transform: rotate(14deg); }
.kt-damga-ust { left: 50%; top: 50%; color: var(--kt-iyi-yazi); --tr: translate(-50%, -50%) rotate(-6deg); transform: translate(-50%, -50%) rotate(-6deg); }   /* io97: yukarı = SONRAKİ (sağla aynı renk) */
.kt-damga-alt { left: 50%; top: 50%; color: var(--kart-ai); --tr: translate(-50%, -50%) rotate(6deg); transform: translate(-50%, -50%) rotate(6deg); }   /* io97: aşağı = KAYDET, kart ortasında */
/* bitti ve liste */
.kt-bitti { position: relative; z-index: 10; margin: 24px auto 0; width: min(100%, 440px); padding: 18px; border-radius: 24px; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line); }
.kt-bitti h3 { margin: 0 0 6px; } .kt-bitti p { color: var(--muted); font-size: 13.5px; }
.kt-liste { position: relative; z-index: 10; display: grid; gap: 10px; width: min(100%, 520px); margin: 12px auto 0; }
.kt-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--kart-renk, var(--surface)); color: var(--kt-beyaz); }
.kt-satir.kt-uno-sari { color: var(--kt-koyu); }
.kt-satir-alt { font-size: 12px; opacity: .85; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .kt-yuzen i, .kt-kart.kt-geldi { animation: none !important; } }
@media (min-height: 760px) { .kt-sahne { margin-top: 18px; } }
/* v34 ek: #tabs kimlik kuralı (1,0,0) sınıf kuralını eziyordu; kart içerik kadar yüksek, tam yükseklik değil */
:root[data-rota="kartlar"] #tabs { display: none; }
.kt-sahne { display: block; }
/* v34 ek2: UNO kart boyu — kart sahneyi doldurur; sahne genişliği yükseklikten türetilir (5:8 oranı korunur) */
.kt-sahne { flex: 1 1 auto; min-height: 0; width: min(100%, 440px, calc((100dvh - 236px) * 0.66)); margin: 10px auto 0; }   /* io81: alt rehber kalktı */
.kt-kart { inset: 0; max-height: none; }
.kt-kart .kt-mono { font-size: 44px; opacity: .4; }
@media (min-height: 800px) { .kt-kart .kt-soru { font-size: 20px; } .kt-siklar { gap: 12px; } .kt-sik { min-height: 56px; } }
/* v34 ek3: kart dolu tasarım — soru üstte, şıklar ortada, alt köşe harfi + saydam oval + ipucu şeridi;
   cevaplanınca ipucu gider, cevap alta yaslanır. Hex yok; jetonlar. */
:root, :root[data-tema="acik"], :root[data-tema="koyu"], :root[data-tema="sistem"] { --kt-oval2: rgba(255,255,255,.10); --kt-oval2-sari: rgba(0,0,0,.06); --kt-ipucu-cizgi: rgba(255,255,255,.28); }
.kt-oval2 { position: absolute; z-index: 1; left: 50%; top: 52%; width: 150%; height: 44%; transform: translate(-50%, -50%) rotate(-28deg); border-radius: 50%; background: var(--kt-oval2); pointer-events: none; }
.kt-kart.kt-uno-sari .kt-oval2 { background: var(--kt-oval2-sari); }
.kt-kart > .world-bg { opacity: .2; }
.kt-kart .kt-mono-alt2 { top: auto; right: auto; transform: rotate(180deg); }
.kt-icerik { display: flex; flex-direction: column; height: 100%; }
.kt-kart .kt-soru { font-size: 20px; margin: 2px 0 6px; }
.kt-siklar { margin: 12px 0 0; }
.kt-sik { min-height: 56px; }
.kt-alt-ipucu { margin-top: auto; border-top: 1px solid var(--kt-ipucu-cizgi); display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.kt-alt-ipucu span { display: inline-flex; align-items: center; gap: 4px; }
.kt-cevap { padding-top: 12px; border-top: 1px solid var(--kt-ipucu-cizgi); }
.kt-sonuc { font-size: 16px; }
.kt-aciklama { font-size: 15px; }

/* =====================================================================================
   v35 · DERSİ ÖĞREN — rehberli öğrenme yolu (io17, 2026-09-11)

   ÜRÜN İLKESİ: "belge okuyucu" değil "rehberli yolculuk". Dikey bir ray, her bölüm bir
   düğüm + bir kart. Üç durum: tamam (sönük + onay) · şimdi (mor kenar + halka + ŞİMDİ) ·
   sırada (nötr). Kilit yok; vurgu var. Renk anlamla kullanılır: ilerleme mor, formül mavi,
   örnek yeşilimsi-mavi, tuzak/hata sıcak amber, doğru/yanlış yalnız kontrolde.
   Sakin: yanıp sönme yok, sürekli parlama yok; azaltılmış harekete uyar (534. satır).
   ===================================================================================== */
:root {
  --og-ray: var(--line);
  --og-ray-tamam: var(--accent);
  --og-halka: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --og-dugum-golge: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px -4px color-mix(in srgb, var(--accent) 60%, transparent);
  --og-ornek: color-mix(in srgb, var(--blue) 55%, var(--good));
  --og-ornek-y: color-mix(in srgb, var(--og-ornek) 14%, var(--surface));
  --og-formul-y: color-mix(in srgb, var(--blue) 14%, var(--surface));
  --og-uyari-y: color-mix(in srgb, var(--warn) 12%, var(--surface));
  --og-mini-bg: color-mix(in srgb, var(--bg) 92%, transparent);
  --og-en: 640px;
  --og-ust: 0px;
}

/* --- A · yönelim başlığı --- */
.og-bas { margin: 2px 0 14px; }
.og-kirinti { font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.og-baslik { margin: 4px 0 8px; font-size: 26px; line-height: 1.15; font-weight: 800; }
.og-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--muted); }
.og-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.og-sayac { font-family: var(--display); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.og-harita-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--accent-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.og-cubuk { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 10px; }
.og-cubuk i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 320ms var(--ease); }
.og-kaldigin { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); font-size: 13.5px; }
.og-kaldigin span { flex: 1; }
.og-bastan { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--accent-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: underline; }

/* --- yapışkan küçük çubuk: başlık kayınca gelir, ekranın %6'sı --- */
.og-mini { position: fixed; top: var(--og-ust); left: 0; right: 0; z-index: 10; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 6px; background: var(--og-mini-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transform: translateY(-110%); opacity: 0; transition: transform 200ms var(--ease), opacity 200ms var(--ease); pointer-events: none; }
.og-mini.gorunur { transform: none; opacity: 1; pointer-events: auto; }
.og-mini-geri, .og-mini-harita { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
.og-mini-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.og-mini-sayac { flex: none; font-family: var(--display); font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--accent-2); }
.og-mini-cizgi { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); transition: width 320ms var(--ease); }

/* --- C · dikey yol --- */
.og-duzen { display: block; }
.og-yan { display: none; }
.og-yol { list-style: none; margin: 0; padding: 4px 0 8px 38px; position: relative; max-width: var(--og-en); }
.og-adim { position: relative; margin: 0 0 14px; }
/* ray: her adımın sol kenarında, düğümden düğüme sürer; son adımda düğümde biter */
.og-adim::before { content: ""; position: absolute; left: -25px; top: 14px; bottom: -14px; width: 2px; background: var(--og-ray); }
.og-adim.tamam::before { background: var(--og-ray-tamam); }
.og-adim.og-son::before { display: none; }
.og-dugum { position: absolute; left: -38px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--og-ray); background: var(--bg); color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; padding: 0; cursor: pointer; z-index: 1; transition: box-shadow 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease); }
.og-dugum::after { content: ""; position: absolute; inset: -8px; }   /* 44 px dokunma hedefi */
.og-adim.tamam .og-dugum { background: var(--accent); border-color: var(--accent); color: var(--uzeri); }
.og-adim.simdi .og-dugum { border-color: var(--accent); color: var(--accent-2); box-shadow: var(--og-dugum-golge); }
.og-dugum-son { cursor: default; }
.og-adim.og-son.tamam .og-dugum-son { background: var(--good); border-color: var(--good); color: var(--uzeri); }

.og-kart { position: relative; padding: 12px 14px 14px; border: 1px solid var(--hat); border-radius: 18px; background: var(--surface); box-shadow: var(--yuzey-1); scroll-margin-top: calc(var(--og-ust) + 56px); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), opacity 200ms var(--ease); }
.og-adim.simdi .og-kart { border-color: var(--accent); box-shadow: var(--og-halka); }
.og-adim.tamam .og-kart { opacity: .82; }
.og-adim.tamam .og-kart:hover, .og-adim.tamam .og-kart:focus-within { opacity: 1; }
.og-tur { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.og-tur-ad { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.og-formul .og-tur-ad { color: var(--blue); }
.og-ornek .og-tur-ad { color: var(--og-ornek); }
.og-uyari .og-tur-ad { color: var(--warn); }
.og-kontrol .og-tur-ad, .og-capa .og-tur-ad { color: var(--accent-2); }
.og-ozet .og-tur-ad { color: var(--good); }
.og-simdi { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); padding: 2px 8px; border-radius: 999px; background: var(--tint); }
.og-h { margin: 2px 0 8px; font-size: 18px; line-height: 1.25; font-weight: 800; }
.og-h:focus { outline: none; }
.og-govde { font-size: 16px; line-height: 1.62; }
.og-govde p { margin: 0 0 10px; }
.og-govde p:last-child { margin-bottom: 0; }
.og-kucuk { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.og-mini-etiket { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.og-liste { margin: 0; padding-left: 20px; }
.og-liste li { margin-bottom: 4px; }

/* katlanan derinlik: zayıf öğrenci ana metni görür, isteyen açar */
.og-derin { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.og-derin summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent-2); list-style: none; }
.og-derin summary::-webkit-details-marker { display: none; }
.og-derin summary::after { content: "+"; margin-left: auto; font-weight: 800; }
.og-derin[open] summary::after { content: "–"; }
.og-derin p { font-size: 15px; }

/* hedefler (Bu derste) ve özet: onay listesi */
.og-hedef, .og-ozet { list-style: none; margin: 0; padding: 0; }
.og-hedef li, .og-ozet li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.og-hedef li svg, .og-ozet li svg { flex: none; margin-top: 5px; color: var(--accent-2); }
.og-ozet li svg { color: var(--good); }

/* tanım */
.og-tanim { margin: 0; }
.og-tanim > div { padding: 8px 0; border-top: 1px solid var(--line); }
.og-tanim > div:first-child { border-top: 0; padding-top: 0; }
.og-tanim dt { font-weight: 800; }
.og-tanim dd { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }

/* formül: sarmaz, ortalı panel + simge sözlüğü */
.og-formul { margin-bottom: 12px; }
.og-formul:last-child { margin-bottom: 0; }
.og-formul-g { text-align: center; padding: 14px 10px; border-radius: 14px; background: var(--og-formul-y); border: 1px solid var(--line); font-size: 26px; font-weight: 700; overflow-x: auto; }
.og-formul-g .mat { white-space: nowrap; }
.og-formul-a { margin: 8px 0 0; }
.og-simge { margin: 8px 0 0; display: grid; gap: 4px; }
.og-simge > div { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: baseline; }
.og-simge dt { font-weight: 800; color: var(--blue); }
.og-simge dd { margin: 0; font-size: 15px; }
.og-simge dd i { font-style: normal; color: var(--muted); font-size: 13.5px; }
.og-not { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; }
.og-not svg { flex: none; margin-top: 3px; }
.og-not-uyari { background: var(--og-uyari-y); color: var(--ink-2); }
.og-not-uyari svg { color: var(--warn); }

/* örnek: soru → adımlar → sonuç ayrık */
.og-soru { padding: 10px 12px; border-radius: 14px; background: var(--og-ornek-y); border-left: 3px solid var(--og-ornek); margin-bottom: 10px; }
.og-soru p, .og-sonuc p { margin: 0; font-weight: 600; }
.og-adimlar { list-style: none; margin: 0 0 10px; padding: 0; counter-reset: og; }
.og-adimlar li { position: relative; padding-left: 34px; margin-bottom: 8px; counter-increment: og; }
.og-adimlar li::before { content: counter(og); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--accent-2); font-size: 12px; font-weight: 800; }
.og-adimlar b { display: block; }
.og-adimlar span { color: var(--ink-2); font-size: 15px; }
.og-sonuc { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--good); background: var(--tint-good); }

/* hızlı kontrol: anlık geri bildirim; renk tek sinyal değil (ikon + metin) */
.og-kontrol { padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--line); }
.og-kontrol:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.og-kontrol-s { margin: 0 0 8px; font-weight: 700; }
.og-kontrol-sik { display: grid; gap: 8px; }
.og-kontrol-sik button { display: flex; align-items: center; gap: 10px; min-height: 48px; text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; transition: border-color 200ms var(--ease), background 200ms var(--ease); }
.og-kontrol-sik button[aria-disabled="true"] { cursor: default; }
.og-harf { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-size: 12px; font-weight: 800; color: var(--muted); }
.og-kontrol-sik button.ok { border-color: var(--good); background: var(--tint-good); }
.og-kontrol-sik button.ok .og-harf { background: var(--good); color: var(--uzeri); }
.og-kontrol-sik button.secili-no { border-color: var(--bad); background: var(--tint-bad); }
.og-kontrol-sik button.secili-no .og-harf { background: var(--bad); color: var(--uzeri); }
.og-kontrol.cevapli .og-kontrol-sik button:not(.ok):not(.secili-no) { opacity: .55; }
.og-kontrol-geri { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 15px; }
.og-kontrol-geri svg { flex: none; margin-top: 4px; }
.og-kontrol-geri.iyi { background: var(--tint-good); color: var(--ink); }
.og-kontrol-geri.iyi svg { color: var(--good); }
.og-kontrol-geri.kotu { background: var(--tint-bad); color: var(--ink); }
.og-kontrol-geri.kotu svg { color: var(--bad); }

/* sık hata + sınav tuzağı: sıcak ama bağırmayan */
.og-hata { padding: 8px 0; border-top: 1px solid var(--line); }
.og-hata:first-of-type { border-top: 0; padding-top: 0; }
.og-hata-x, .og-hata-v { display: flex; gap: 8px; align-items: flex-start; }
.og-hata-x { font-weight: 700; }
.og-hata-x svg { color: var(--warn); flex: none; margin-top: 5px; }
.og-hata-v { color: var(--ink-2); font-size: 15px; margin-top: 3px; }
.og-hata-v svg { color: var(--good); flex: none; margin-top: 4px; }
.og-tuzak { padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: var(--og-uyari-y); border-left: 3px solid var(--warn); }
.og-tuzak b { display: block; margin-bottom: 2px; }
.og-tuzak span { color: var(--ink-2); font-size: 15px; }

/* çapa: tek satır kalıcı kural */
.og-capa { display: flex; gap: 10px; align-items: flex-start; }
.og-capa svg { flex: none; color: var(--accent-2); margin-top: 3px; }
.og-capa p { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; }
.og-capa-satir { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-weight: 700; }
.og-capa-satir svg { color: var(--accent-2); flex: none; margin-top: 4px; }

/* şema — io124: kartın iç boşluğuna taşarak büyür (telefonda ~0,93 ölçek; yazı 12 → ~11 px);
   masaüstünde aşırı büyümesin diye tavan. Altında "Baştan oynat" ve "Büyüt" düğmeleri. */
.og-etiket { font-weight: 800; color: var(--ink); }
/* io124 (tam tur bulgusu): uzun formül nowrap ile sayfayı yana taşırıyordu (ör. VB − VA = 1,8 × 10⁵ − …); kart içinde satır kırılır */
.og-govde .mat { white-space: normal; overflow-wrap: anywhere; }
.og-sema { position: relative; margin: 10px -10px 0; padding: 6px 4px; border-radius: 14px; }
.og-sema svg { max-width: 560px; margin: 0 auto; }
.og-sema-arac { display: flex; justify-content: flex-end; gap: 6px; margin: 6px -6px 0 0; }
.og-sema-arac button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 13px/1 var(--body); cursor: pointer; }
.og-sema-arac button:active { transform: scale(.97); }
.og-sema-buyuk { width: min(100vw, 900px); max-width: 100vw; max-height: 100dvh; margin: auto; padding: 12px; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); }
.og-sema-buyuk::backdrop { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.og-sema-buyuk figure { margin: 0; padding: 0; border: 0; touch-action: pinch-zoom; overflow: auto; }
.og-sema-buyuk figure svg { width: 100%; max-width: none; height: auto; }
.og-sema-buyuk-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.og-sema-buyuk-bas b { font-family: var(--display); font-size: 17px; }
.og-sema-buyuk-bas button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }

/* zaman çizgisi (kronolojik ders içeriği için; şu an içerik yok) */
.og-zaman { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 2px solid var(--og-ray); }
.og-zaman li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 0 0 12px 14px; }
.og-zaman li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.og-yil { font-family: var(--display); font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; }

/* karşılaştırma: yatay kaydırma yok */
.og-kiyas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.og-kiyas-sutun { padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
.og-kiyas-sutun b { display: block; margin-bottom: 4px; color: var(--accent-2); }
.og-kiyas-sutun ul { margin: 0; padding-left: 18px; font-size: 15px; }

/* --- D · kapanış kartı: tek baskın eylem --- */
.og-bitis { margin: 0; }
.og-bitis-ust { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.og-bitis-ust > svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--tint-good); color: var(--good); }
.og-bitis-ust h2 { margin: 0 0 2px; font-size: 20px; }
.og-bitis-ust p { margin: 0; }
.og-t60 { margin-top: 6px; }
.og-bitis-eylem { display: grid; gap: 8px; margin-top: 14px; }
.og-cta { width: 100%; justify-content: center; flex-direction: column; gap: 0; min-height: 56px; line-height: 1.2; }
.og-cta small { display: block; font-size: 12px; font-weight: 600; opacity: .85; }
.og-ikincil { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 4px; }
.og-ikincil a { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; font-size: 13.5px; font-weight: 700; color: var(--accent-2); }

/* --- ders haritası (alt sayfa + masaüstü yan sütun) --- */
.og-harita { list-style: none; margin: 0; padding: 0; }
.og-harita li { border-top: 1px solid var(--line); }
.og-harita li:first-child { border-top: 0; }
.og-harita button { width: 100%; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 4px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; border-radius: 12px; }
.og-harita i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); font-size: 13.5px; }
.og-harita li.tamam i { background: var(--accent); color: var(--uzeri); }
.og-harita li.simdi i { color: var(--accent-2); box-shadow: var(--og-halka); }
.og-harita li.simdi span { font-weight: 800; }
.og-harita small { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* --- masaüstü / tablet: okuma sütunu gerilmez, harita solda --- */
@media (min-width: 900px) {
  .og-duzen { display: grid; grid-template-columns: 200px minmax(0, var(--og-en)); gap: 24px; align-items: start; }
  .og-yan .og-harita small { display: none; }
  .og-yan .og-harita button { grid-template-columns: 22px 1fr; font-size: 13.5px; min-height: 40px; gap: 8px; }
  .og-yan { display: block; position: sticky; top: calc(var(--og-ust) + 12px); padding: 8px 10px; border: 1px solid var(--hat); border-radius: 18px; background: var(--surface); }
  .og-harita-btn { display: none; }
}

/* v34 ek4: kartın ALT BANDI — köşe harfi, Netçi işareti ve ipucu/cevap birbirine girmesin (kurucu, 2026-09-11).
   Ölçüm (390×844): ipucu şeridi y731–759, ters harf y722–762, işaret y687–762 → üst üste. Cevap açıklaması da
   y632–722 ile işaretin üstüne biniyordu. Çözüm: içerik sütunu altta 76 px BANT bırakır; bant yalnız köşe harfi,
   işaret ve tek satırlık "cevapla, sonra kaydır" ipucunu taşır. Cevap paneli her zaman bandın ÜSTÜNDE kalır.
   Soru + şıklar kırıntı ile bant arasında dikey ortalanır (boş orta alan dengelenir). Arkadaki kartların içeriği
   görünmez: yalnız renk ve kenar (öndeki kartın altından yazı sızmasın). */
.kt-kart .kt-icerik { padding-bottom: 76px; }
.kt-kart .kt-kirinti { padding-right: 44px; }
.kt-kart .kt-soru { margin-top: auto; padding-right: 8px; }
.kt-siklar { flex: 0 0 auto; margin-bottom: auto; }
.kt-cevap { margin-top: 0; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.kt-kart .kt-mono-alt2 { bottom: 16px; left: 18px; }
.kt-marka { width: 56px; right: 16px; bottom: 14px; opacity: .28; }
.kt-alt-ipucu { position: absolute; left: 56px; right: 84px; bottom: 28px; margin: 0; padding: 0; border: 0; justify-content: center; text-align: center; opacity: .8; }
.kt-alt-ipucu span:first-child, .kt-alt-ipucu span:last-child { display: none; }
.kt-kart.kt-cevapli .kt-alt-ipucu { display: none; }
.kt-kart.kt-2 .kt-icerik, .kt-kart.kt-3 .kt-icerik, .kt-kart.kt-2 .kt-marka, .kt-kart.kt-3 .kt-marka,
.kt-kart.kt-2 .kt-mono, .kt-kart.kt-3 .kt-mono, .kt-kart.kt-2 .kt-oval2, .kt-kart.kt-3 .kt-oval2 { visibility: hidden; }

/* =====================================================================================
   v36 · DERS AMBLEMİ — Dersler bölümünde her dersin tanınır görseli (io18, 2026-09-11)

   KARAR: fotoğraf ya da yapay zekâ görseli değil, ders rengi + özgün çizgi motifi (worlds.js).
   Sebep: 31 dersin hepsi aynı dilde konuşur, dosya yok (SVG satır içi, 0 KB indirme), koyu
   temada okunur, ucuz Android'de ağır gelmez, lisans sorusu yok, renk zaten uygulamanın
   ders dilidir (--c-mat, --c-fizik…). Emoji ikon olarak yasak (AGENTS.md §1).
   Amblem = yumuşak renkli karo (renk %16) + aynı renkte çizgi; dokunma hedefi kartın kendisi.
   ===================================================================================== */
.ders-amblem { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--world, var(--c-genel)); background: color-mix(in srgb, var(--world, var(--c-genel)) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--world, var(--c-genel)) 32%, transparent); }
.ders-amblem svg { width: 62%; height: 62%; display: block; }
.da-turkce { --world: var(--c-turkce); }
.da-mat { --world: var(--c-mat); }
.da-fizik { --world: var(--c-fizik); }
.da-kimya { --world: var(--c-kimya); }
.da-biyoloji { --world: var(--c-biyoloji); }
.da-tarih { --world: var(--c-tarih); }
.da-cografya { --world: var(--c-cografya); }
.da-felsefe { --world: var(--c-felsefe); }
.da-din { --world: var(--c-din); }
.da-edebiyat { --world: var(--c-edebiyat); }
.da-genel { --world: var(--c-genel); }

/* ders kartı: amblem solda, metin sağda; kart yine tek dokunma hedefi */
.pr-ders-amblemli { display: flex; gap: 12px; align-items: flex-start; }
.pr-ders-ic { flex: 1; min-width: 0; }
.pr-ders.yok .ders-amblem { opacity: .7; }

/* kurs ve ünite başlığı: büyük amblem + başlık satırı */
.pr-kurs-bas { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.pr-kurs-bas .ders-amblem { width: 56px; height: 56px; border-radius: 14px; }
.pr-kurs-bas .pr-baslik { margin: 0 0 2px; }
.pr-kurs-bas p { margin: 0; }
.pr-kurs-bas-kucuk .ders-amblem { width: 40px; height: 40px; border-radius: 12px; }

/* =====================================================================================
   v37 · BİLDİRİMLER — ayar ekranı ve önizleme (io19, Faz A1, 2026-09-11)
   Sistem bildirimi henüz yok; ekran tercihleri ve motorun "bugün ne planlardı" çıktısını gösterir.
   ===================================================================================== */
.bl-giris { display: block; color: var(--ink); text-decoration: none; }
.bl-kart { display: grid; gap: 0; }
.bl-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--line); }
.bl-satir:first-child { border-top: 0; padding-top: 0; }
.bl-satir > div:first-child { flex: 1 1 auto; min-width: 120px; }
.bl-satir > .bl-anahtar, .bl-satir > .bl-saat, .bl-satir > .bl-aralik, .bl-satir > .btn { flex: none; }
.bl-saat { width: 112px; }
.bl-aralik input { width: 104px; padding: 0 6px; }
.bl-satir { flex-wrap: wrap; }
.bl-aralik { margin-left: auto; }
.bl-anahtar { flex: none; width: 48px; height: 28px; border-radius: 999px; border: 0; padding: 0; background: var(--soft); position: relative; cursor: pointer; transition: background 200ms var(--ease); }
.bl-anahtar i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform 200ms var(--ease), background 200ms var(--ease); }
.bl-anahtar.on { background: var(--accent); }
.bl-anahtar.on i { transform: translateX(20px); background: var(--uzeri); }
.bl-anahtar::after { content: ""; position: absolute; inset: -8px; }
.bl-saat, .bl-aralik input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 15px; }
.bl-aralik { display: flex; align-items: center; gap: 6px; flex: none; }
.bl-oniz { padding: 10px 12px; margin-top: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.bl-oniz-ust { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); }
.bl-oniz-metin { font-size: 16px; font-weight: 700; margin: 4px 0 2px; }
.bl-oniz-bos { color: var(--muted); }
.bl-baslik { margin: 0; }
.bl-onizleme .og-derin { margin-top: 10px; }

/* =====================================================================================
   v39 · KARŞILAMA — açılışta Neti, "Bizi nereden duydun?" marka karoları, Ana sayfada Yolculuk (io21)
   ===================================================================================== */
/* açılış perdesi: logo çizilir, Neti zıplayarak gelir ve el sallar (azaltılmış harekette anında) */
#acilis .ac-neti { min-height: 112px; display: grid; place-items: center; }
#acilis .ac-neti .neti { animation: acNeti var(--motion-reveal) var(--ease-spring) 320ms both; }
#acilis .ac-neti .anten { animation: netiAnten var(--motion-anten) ease-in-out 320ms 2; }
@keyframes acNeti { from { transform: translateY(24px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #acilis .ac-neti .neti, #acilis .ac-neti .anten { animation: none; } }

/* Ana sayfa Neti: her girişte selam (bir kez) */
/* io139: DIŞ KABA TAŞINDI. .govde üzerindeki üç sınıflık kural, hareketlerin iki sınıflık
   ".neti.<hareket> .govde" kurallarını eziyordu; "selamla" sınıfı hiç kaldırılmadığı için ana
   sayfadaki Neti'nin gövde hareketleri kalıcı olarak bastırılmıştı. Nefes .neti.canli .govde'de kalır. */
.ev-neti .neti.selamla { animation: netiZipla var(--motion-reveal) var(--ease-spring) both; }

/* marka karoları (kayıt: nereden duydun) */
.karo.siyah { background: var(--ink); color: var(--bg); }
.karo.pembe { background: color-mix(in srgb, var(--c-edebiyat) 22%, var(--surface)); color: var(--c-edebiyat); }
.karo.kirmizi { background: var(--tint-bad); color: var(--bad); }
.karo.turkuaz { background: color-mix(in srgb, var(--c-kimya) 22%, var(--surface)); color: var(--c-kimya); }

/* Yolculuk: zikzak patika, düğümler, aktif nabız (sakin) */
.ev-yol { margin-top: 14px; padding: 16px 18px 12px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); }
.ev-yol[hidden] { display: none; }
.yol-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.yol-kurs { display: block; font-size: 16px; font-weight: 800; }
.yol-sayac { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.yol-bekle { padding: 8px 0 4px; }
.yol-patika { position: relative; display: grid; gap: 6px; padding: 4px 0 0; }
.yol-patika::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px); }
.yol-dugum { position: relative; display: flex; align-items: center; gap: 10px; width: 62%; min-height: 52px; padding: 6px 10px 6px 6px; border-radius: 18px; color: var(--ink); text-decoration: none; background: var(--surface); }
.yol-dugum.sol { justify-self: start; }
.yol-dugum.sag { justify-self: end; flex-direction: row-reverse; text-align: right; }
.yol-nokta { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 13.5px; font-weight: 800; }
.yol-nokta i { font-style: normal; }
.yol-etiket { min-width: 0; }
.yol-etiket b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }   /* io334: uzun ünite adı 2 satırda kesiliyordu → 3 */
.yol-etiket small { display: block; font-size: 12px; color: var(--muted); }
.yol-tamam .yol-nokta { background: var(--accent); border-color: var(--accent); color: var(--uzeri); }
.yol-tamam .yol-etiket b { color: var(--ink-2); }
.yol-aktif .yol-nokta { background: var(--accent); border-color: var(--accent-2); color: var(--uzeri); box-shadow: var(--og-dugum-golge); animation: yolNabiz var(--motion-nefes) ease-in-out infinite; }
.yol-aktif { background: var(--tint); }
.yol-aktif .yol-etiket small { color: var(--accent-2); font-weight: 700; }
.yol-sirada .yol-nokta { opacity: .8; }
.yol-devam { justify-self: center; font-size: 12px; font-weight: 700; color: var(--accent-2); padding: 6px 10px; text-align: center; }
@keyframes yolNabiz { 0%, 100% { box-shadow: var(--og-dugum-golge); } 50% { box-shadow: var(--og-halka); } }
@media (prefers-reduced-motion: reduce) { .yol-aktif .yol-nokta { animation: none; } }

/* =====================================================================================
   v40 · SADELİK P0 (io22) — Bugün tek birincil, ders merkezinde önerilen adım, Pratik Değiştir,
   Yolculuk katlı. Kaldırılan bloklar (.ev-ust, .ev-alt2, .ev-kapilar, .ev-sure) artık çizilmiyor;
   eski kuralları duruyor (dokunulmaz), yalnız yeni kurallar eklendi.
   ===================================================================================== */
.ev-pano { min-height: auto; }
.ev-bugun b { display: inline; }
.ev-neti { margin-top: 4px; }

/* ders merkezi: önerilen adım */
.ak-kart.ak-oneri { border-color: var(--accent); box-shadow: var(--og-halka); }
.ak-oneri-etiket { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; }
.ak-daha { margin-top: 12px; }
.ak-daha summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); list-style: none; }
.ak-daha summary::-webkit-details-marker { display: none; }
.ak-daha summary::after { content: "+"; margin-left: auto; font-weight: 800; }
.ak-daha[open] summary::after { content: "–"; }
.ak-daha .ak-biliyorum { margin-top: 4px; }

/* pratik: değiştir bağlantısı */
.pr-degistir { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 4px 0 14px; font-size: 13.5px; font-weight: 700; color: var(--accent-2); }

/* yolculuk: katlı — yalnız aktif düğüm; açınca tamamı */
.yol-ac { display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 4px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--accent-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ev-yol:not(.acik) .yol-dugum:not(.yol-aktif), .ev-yol:not(.acik) .yol-devam { display: none; }
.ev-yol:not(.acik) .yol-patika::before { display: none; }
.ev-yol:not(.acik) .yol-dugum.yol-aktif { width: 100%; justify-self: stretch; flex-direction: row; text-align: left; }

/* io23-koc: Koç üst çubuktan kalktı; Gelişim › Detaylar'dan girilir (altıncı kapı olmasın) */
#kocBtn { display: none; }

/* =====================================================================================
   v41 · SADELİK P1 (io23) — Gelişim tek sayfa: Bu hafta · İyi gidiyor · Dikkat · Sırada · Detaylar.
   Kart içinde kart yok: bölümler başlık + satırlar; sayılar sessiz; tek vurgulu satır (Sırada).
   ===================================================================================== */
.gl-geri { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
.gl-bolum { margin: 0 0 22px; }
.gl-bolum > .eyebrow { margin-bottom: 8px; }
.gl-sayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gl-sayilar > div { display: grid; gap: 2px; padding: 12px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hat); }
.gl-sayilar b { font-family: var(--display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.gl-sayilar span { font-size: 12px; color: var(--muted); }
.gl-fark { font-style: normal; font-size: 12px; color: var(--muted); }
.gl-fark.artti { color: var(--good); }
.gl-fark.azaldi { color: var(--warn); }
.gl-bos { margin: 0; font-size: 15px; color: var(--muted); }
.gl-liste, .gl-detay { display: grid; gap: 8px; }
.gl-satir { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hat); color: var(--ink); text-decoration: none; }
.gl-satir > span { flex: 1; min-width: 0; }
.gl-satir b { display: block; font-size: 15px; font-weight: 700; }
.gl-satir small { display: block; font-size: 12px; color: var(--muted); }
.gl-satir em { font-style: normal; font-size: 13.5px; font-weight: 800; color: var(--accent-2); }
.gl-satir > svg:first-child { flex: none; color: var(--accent-2); }
.gl-satir > svg:last-child { flex: none; color: var(--muted); opacity: .5; transform: scaleX(-1); }
.gl-liste .gl-satir > svg:last-child { transform: none; opacity: 1; color: var(--good); }
.gl-sirada .gl-satir-buyuk { border-color: var(--accent); background: var(--tint); min-height: 64px; }
.gl-sirada .gl-satir-buyuk b { font-size: 16px; }
@media (max-width: 380px) { .gl-sayilar { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================================
   v42 · SADELİK P2 (io24) — Dersler kartları sade, Denemeler "Daha fazla", Oyunlar önerilen satır.
   ===================================================================================== */
.pr-ders-amblemli .pr-ders-ust { align-items: center; }
.pr-ders-alt.pr-ilerleme-satir { display: flex; align-items: center; gap: 6px; }
.pr-ders-alt.pr-ilerleme-satir svg { color: var(--accent-2); }
.dn-daha { margin-top: 8px; }
.dn-daha summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); list-style: none; }
.dn-daha summary::-webkit-details-marker { display: none; }
.dn-daha summary::after { content: "+"; margin-left: auto; font-weight: 800; }
.dn-daha[open] summary::after { content: "–"; }
.dn-daha .secim { margin-top: 6px; }
.oy-oneri-bas { margin-top: 6px; }

/* =====================================================================================
   v43 · SADELİK P3 (io25) — 10 dk satırı, Yolculuk tam harita ekranı, Yarış alt sekmesiz.
   ===================================================================================== */
.ev-kisa { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--accent-2); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.yol-ac { text-decoration: none; }
.yol-tam .yol-ust { margin-bottom: 14px; }
.yol-tam .yol-patika { gap: 8px; }

/* =====================================================================================
   v44 · AÇIK TEMA (io26, 2026-09-11) — koyu marka teması varsayılan kalır; bu blok yalnız
   :root[data-tema="acik"] için v29 "tek tema" bloğundaki her renk jetonunu açık değerle ezer.
   Dosyanın sonunda olduğu için kazanır; "sistem" tercihi JS'te koyu|acik'e çözülür (app.js temaEtkin).
   Kahraman kartı (--hero) iki temada da koyu kalır: üstündeki beyaz yazı ve #A8B4CC alt yazı değişmez.
   Oyun sahneleri (Formula Drive, Tırmanış, Mağara, Kartlar) kendi sahne jetonlarını kullanır; onlar temadan bağımsız.
   ===================================================================================== */
:root[data-tema="acik"] {
  --kalp: #E5484D; --alev-ates: #FF7A1A; --av-yuz-acik: #FFF3E0; --av-cizgi-koyu: #1F2937;   /* io78 */
  color-scheme: light;
  /* --- zemin ve mürekkep --- */
  --bg: #F4F3FB;
  --surface: #FFFFFF;
  --surface-2: #F8F7FD;
  --surface-3: #F1EFF9;
  --surface-0: #F4F3FB;
  --soft: #ECEAF7;
  --line: #E1DEF0;
  --ink: #171A2E;
  --ink-2: #2E3350;
  --muted: #5F6578;          /* beyazda 6,1:1 */
  --kapak-koyu: #171A2E;
  --hero-muted: #C4BFE6;
  /* --- marka moru ve türevleri (beyaz üstünde ölçülü) --- */
  --accent: #6A4AF0;
  --accent-k: #5535D6;
  --accent-yuzey: #6242E6;   /* beyaz yazının altındaki dolgu · beyazla 5,2:1 */
  --accent-yazi:  #5535D6;   /* açık yüzeydeki küçük yazı · beyazda 6,3:1 */
  /* io139: #7C5CFF idi — beyazda 4,35:1, AA altı. 37 yerde METİN rengi olarak kullanılıyor
     ("Haritayı aç", "Değiştir", "Önümüzdeki 7 gün" …). Açık temanın kendi marka moruna
     çekildi: beyazda 5,45:1. Parlama/ton karışımlarında fark bir ton koyulaşma kadar. */
  --accent-2: #6A4AF0;
  --accent-ink: #FFFFFF;
  --blue: #3E6BF2;
  --blue-k: #2E55CC;
  --violet: #6A4AF0;
  --violet-k: #5535D6;
  --gold: #B45309;
  --gold-k: #92400E;
  --gold-yazi: #8A6320;
  --alev: #D97706;
  --alev-k: #B45309;
  --alev-d: #92400E;
  --gunes: #D97706;
  --gunes-k: #B45309;
  --warn: #92400E;           /* uyarı dolgusunda (%16 karışım) yazı 5,5:1 */
  --good: #15803D;           /* beyaz yazı üstünde 5,0:1; beyazda yazı olarak 4,9:1 */
  --good-k: #166534;
  --good-d: #14532D;
  --nane: #15803D;
  --bad: #C81E1E;            /* beyaz yazı üstünde 5,2:1 */
  --bad-k: #A31616;
  --bad-d: #7F1D1D;
  --mercan: #C81E1E;
  --info: #3E6BF2;
  --baglanti: #5535D6;
  --cta-yuz: #6A4AF0;
  --nav-idle: #5F6578;   /* io113: beyazda 4,4 → 6,1:1 */
  --nav-active: #6A4AF0;
  --grad: linear-gradient(135deg, #6A4AF0 0%, #8B6CFF 100%);
  --hero: linear-gradient(150deg, #2A1F6E 0%, #34288A 55%, #3B2E9C 100%);
  --tint: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --tint-blue: color-mix(in srgb, var(--blue) 12%, var(--surface));
  --tint-good: color-mix(in srgb, var(--good) 12%, var(--surface));
  --tint-violet: color-mix(in srgb, var(--accent-2) 12%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn) 14%, var(--surface));
  --tint-bad: color-mix(in srgb, var(--bad) 12%, var(--surface));
  /* --- yüzey ve derinlik: kıl payı kenar + hafif mavi-gri gölge --- */
  --hat: rgba(16,24,40,.08);
  --hat-guclu: rgba(16,24,40,.14);
  --yuzey-1: 0 1px 2px rgba(16,24,40,.05), 0 10px 30px -18px rgba(16,24,40,.18);
  --yuzey-2: 0 2px 6px rgba(16,24,40,.06), 0 22px 50px -24px rgba(16,24,40,.26);
  --yuzey-yok: 0 0 0 0 rgba(0,0,0,0);
  --yuzey-cta: 0 0 0 0 rgba(0,0,0,0);
  --shadow-1: var(--yuzey-1);
  --shadow-2: var(--yuzey-2);
  --shadow-3: 0 24px 60px -24px rgba(16,24,40,.28);
  --shadow-basma: 0 1px 2px rgba(16,24,40,.08);
  --perde: linear-gradient(to top, var(--bg) 12%, transparent);
  --kapak-kenar: rgba(16,24,40,.10);
  --medya-filtre: none;
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 40px -18px color-mix(in srgb, var(--accent) 45%, transparent);
  /* --- akademi ikon zeminleri (pastel) zaten açık; dersler renkleri v14 açık bloğundan gelir --- */
}
.ayar-gorunum h3 { margin: 0; }
.ayar-gorunum .seg { flex: none; }

/* io26-beyaz-dugme: kahraman kartı üstündeki beyaz düğme (Pratik Başla, X-Ray Onar, karşılama) — sonraki .btn gradyanı ezmesin */
.cz-basla, .xr-onar, .on-basla, .cz-basla:hover, .cz-basla:active, .xr-onar:hover, .on-basla:hover { background: var(--uzeri); color: var(--accent-k); }
.cz-basla svg, .xr-onar svg, .on-basla svg { color: var(--accent-k); }

/* io26-link-btn: "güncellemeyi denetle" gibi metin düğmeleri tarayıcı düğme yüzü taşımasın; iki temada da bağlantı rengi */
.link-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent-yazi); cursor: pointer; }

/* =====================================================================================
   v45 · BUGÜN TEK ADIM (io29, P0-B) — kahraman kartında tek akademik adım: etiket · konu · araç/dk · gerekçe · CTA · Değiştir.
   ===================================================================================== */
.ev-adim-b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; }
.ev-adim-alt { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.ev-neden { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.ev-degistir { grid-column: 1 / -1; justify-self: start; min-height: 36px; padding: 0 4px; margin: -2px 0 0; background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--accent-yazi); cursor: pointer; }
.ev-cta-ikincil { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-color: var(--line); box-shadow: none; }
.ev-alt-liste { display: grid; gap: 8px; padding: 4px 0 12px; }
.ev-alt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ev-alt span { font-size: 13.5px; color: var(--muted); }

/* io29-sheet-ust: alt sayfa (sheet) yüzen Kartlar düğmesinin üstünde */
.sheet-wrap { z-index: 50; }

/* io29-cta-tam: tek CTA her genişlikte tam satır; Değiştir altında sola yaslı */
.ev-ikili > .ev-cta { grid-column: 1 / -1; }

/* =====================================================================================
   v46 · SONUÇ KARTI (io30, P0-C) — ne oldu · ne öğrendik · sonraki adım. Sakin tonlar: iyi / nötr / dikkat / karışık;
   düşük sonuç bilgi, ceza değil (kırmızı yok). Öncesi → şimdi iki kutu, grafik yok.
   ===================================================================================== */
.pf-sonuc { padding: 12px 14px; margin: 0 0 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.pf-sonuc.pf-iyi { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); background: var(--tint-good); }
.pf-sonuc.pf-dikkat { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--tint-warn); }
.pf-sonuc.pf-karisik { border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.pf-karsi { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.pf-karsi > div { display: flex; flex-direction: column; }
.pf-karsi small { font-size: 12px; font-weight: 700; color: var(--muted); }
.pf-karsi b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf-ok { font-size: 20px; color: var(--muted); }
.pf-baslik { margin: 8px 0 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.pf-aciklama { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pf-neden { flex-basis: 100%; width: 100%; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.og-olcum { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* io30-cta-sar: sonuç ekranı düğmeleri uzun Türkçe etiketle sarabilir; tek satıra sığmayan metin kesilmez */
.cl-ozetEylem .btn { white-space: normal; height: auto; min-height: 48px; line-height: 1.25; text-align: center; }

/* =====================================================================================
   v47 · İLK ÖLÇÜM (io31, P0-D) — seçim · tek soru · sonuç. Odak: pano yok, oyun yok, sayaç yok.
   ===================================================================================== */
.io { display: grid; gap: 12px; }
.io-bas h1 { margin: 6px 0 4px; font-size: 26px; line-height: 1.15; }
.io-not { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.io-uyari { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--tint-warn); font-size: 15px; line-height: 1.4; }
.io-netci { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 56px; }
.io-netci small { font-size: 12px; font-weight: 600; }
.io-dersler { display: flex; flex-wrap: wrap; gap: 8px; }
.io-kucuk { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.io-gec { justify-self: start; min-height: 36px; padding: 0 4px; background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--accent-yazi); cursor: pointer; }
.io-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.io-alt { font-size: 15px; font-weight: 700; }
.io-ilerleme { display: flex; align-items: center; gap: 10px; }
.io-noktalar { display: inline-flex; gap: 6px; }
.io-noktalar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.io-noktalar i.dolu { background: var(--accent); }
.io-noktalar i.simdi { background: transparent; box-shadow: var(--shadow-cerceve); }
.io-sayac { font-size: 13.5px; color: var(--muted); }
.io-kapsam { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.io-soru { font-size: 18px; font-weight: 600; line-height: 1.4; }
.io-siklar .cl-sik[disabled] { opacity: .6; }
.io-gecis { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--tint-good); font-size: 12px; font-weight: 700; }
.io-kart { padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); }
.io-kart h1 { margin: 4px 0 6px; font-size: 26px; line-height: 1.15; }
.io-bulgu { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.io-oneri { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.io-oneri b { display: block; font-size: 18px; }
.io-oneri span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.io-neden { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.io-cta { width: 100%; }

/* =====================================================================================
   v48 · ÖĞRENME BAĞLAMI (io43, L1) — Dersler'de Okul | YKS/LGS segment denetimi (direktif 001) ve ders alt başlığı
   (003/011). Jetonlar NETCI_EXECUTION_MASTER_SPEC §5'ten; koyu tema uygulamanın kendi ekseniyle (data-tema="koyu";
   şartnamedeki data-theme="dark" seçicisi burada o eksene çevrildi). Sabit değerler jetonda: stil kapısı için tek yer.
   ===================================================================================== */
:root {
  --netci-bg: #F7F4EE; --netci-surface: #FFFFFF; --netci-text: #121827; --netci-muted: #5F6578; /* io139: #667085 seçici rayında 4,29:1 idi */
  --netci-primary: #3B5BFF; --netci-primary-dark: #2942D9; --netci-primary-soft: #E9EDFF;
  --netci-success: #16A56A; --netci-success-dark: #0E8050; --netci-success-soft: #E9F8F1;
  --netci-danger: #D64545; --netci-danger-dark: #A92F2F; --netci-danger-soft: #FFF0F0;
  --netci-border: #D9DDE7;
  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 18px; --radius-sheet: 24px;
  --netci-motion-fast: 90ms; --netci-motion-card: 220ms; --netci-motion-progress: 240ms;   /* şartname adı --motion-*; uygulamada --motion-fast zaten var (farklı değer) → çakışmamak için netci- öneki (sapma raporlandı) */
  --ease-netci: cubic-bezier(.2, .8, .2, 1);
  --netci-yazi-13: 13px; --netci-yazi-14: 14px; --netci-yazi-17: 17px;
  --db-seg-bg: #ECEEF4; --db-seg-secili: #FFFFFF; --db-seg-golge: 0 1px 3px rgba(17, 24, 39, .10);
}
:root[data-tema="koyu"] {
  --netci-bg: #0F1424; --netci-surface: #171E31; --netci-text: #F7F8FC; --netci-muted: #98A2B3;
  --netci-primary: #7184FF; --netci-primary-dark: #5268F2; --netci-primary-soft: #232D59;
  --netci-border: #2A334A;
  --db-seg-bg: #1A2235; --db-seg-secili: #29334B; --db-seg-golge: 0 1px 3px rgba(0, 0, 0, .28);
}
.db-seg { display: flex; align-items: stretch; height: 40px; padding: 3px; gap: 2px; margin: 2px 0 14px; border-radius: 14px; background: var(--db-seg-bg); }
.db-seg-b { flex: 1; min-width: 0; border: 0; border-radius: 12px; background: transparent; color: var(--netci-muted); font-size: var(--netci-yazi-14); font-weight: 700; line-height: 1; cursor: pointer; }
.db-seg-b.on { background: var(--db-seg-secili); color: var(--netci-text); box-shadow: var(--db-seg-golge); }
.db-seg-b:focus-visible { outline: 2px solid var(--netci-primary); outline-offset: 1px; }
.pr-alt-baslik { margin: 2px 0 0; font-size: var(--netci-yazi-13); line-height: 1.3; color: var(--netci-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-baglam-yok { margin: 0 0 12px; }
.pr-baglam-yok p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }


/* =====================================================================================
   v50io · OYUN GERİ BİLDİRİMİ (io56, G6) — ders merkezinde "Hatalarım · N" kartı (§76): vurgu kenarı, sessiz etiket.
   ===================================================================================== */
.ak-oyun-hata { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.ak-oyun-hata-kart { border-color: var(--accent); color: var(--accent); }
.ak-oyun-etiket { font-size: 13.5px; color: var(--muted); }

/* =====================================================================================
   v51io · SADELİK + KURS MİMARİSİ (io60, S2) — Bugün'de "Tüm dersler" giriş satırı (§3): sakin satır, gradyan yok,
   tek ok; yüzey/kenar jetonu (açık #FFFFFF/#E4E7EC, koyu #171E31/#2A334A). Kurs sayfaları public/kurs/kurs.css'te.
   ===================================================================================== */

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════
   v52io · KAYIT AKIŞI: NETLER + HEDEF ARAMA (io68, O1) — basamaklı sayaç (44 px düğmeler, elle yazılabilir sayı), combobox +
   listbox araması (önek önce), seçili kart, "Henüz karar vermedim" sessiz bağlantı; iskelet en çok 3 satır; jetonlar v48.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.tn-netler { display: grid; gap: 14px; }
/* io98: net çarkı — beş satır görünür, ortadaki seçili; satırlar --m (açı) / --a (uzaklık) ile silindir gibi döner */
:root { --tn-cark-satir: 36px; --tn-cark-maske: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .45) 24%, rgb(0 0 0) 42%, rgb(0 0 0) 58%, rgb(0 0 0 / .45) 76%, rgb(0 0 0 / 0) 100%); }
.tn-net-grup { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.tn-net-bas { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.tn-net-bas b { font-size: 16px; font-weight: 800; }
.tn-net-ust { font-size: 12px; font-weight: 700; color: var(--muted); }
.tn-net-fark { margin-left: auto; display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 999px; background: var(--tint-good); color: var(--good); font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tn-net-fark:empty { display: none; }
.tn-net-fark.zip { animation: tnFark 320ms var(--ease-spring) 1; }
@keyframes tnFark { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.tn-carklar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tn-cark { display: grid; gap: 6px; min-width: 0; }
.tn-cark-etiket { font-size: 13.5px; font-weight: 700; color: var(--muted); text-align: center; }
.tn-cark-kutu { position: relative; height: calc(var(--tn-cark-satir) * 5); border-radius: 18px; background: var(--netci-bg); border: 1px solid var(--line); overflow: hidden; }
.tn-cark-bant { position: absolute; left: 6px; right: 6px; top: 50%; height: var(--tn-cark-satir); transform: translateY(-50%); border-radius: 12px; background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; }
.tn-cark-kutu:focus-within .tn-cark-bant { border-color: var(--accent); box-shadow: var(--glow-focus); }
.tn-cark-pencere { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; perspective: 320px; touch-action: pan-y; outline: none; -webkit-mask-image: var(--tn-cark-maske); mask-image: var(--tn-cark-maske); }
.tn-cark-pencere::-webkit-scrollbar { display: none; }
.tn-cark-liste { list-style: none; margin: 0; padding: calc(var(--tn-cark-satir) * 2) 0; }
.tn-cark-liste li { height: var(--tn-cark-satir); display: grid; place-items: center; scroll-snap-align: center; font-family: var(--display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); cursor: pointer; user-select: none; transform: rotateX(calc(var(--m, 3) * -20deg)) scale(calc(1.3 - var(--a, 3) * .1)); opacity: calc(1 - var(--a, 3) * .24); transition: color 90ms; }
.tn-cark-liste li.on { color: var(--ink); }
.tn-cark.bos .tn-cark-pencere { display: grid; place-items: center; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.tn-cark-bos { font-size: 26px; font-weight: 800; color: var(--muted); }
.tn-cark.bos .tn-cark-bant { opacity: .4; }
.tn-net-kaynak { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.4; }
.tn-netler ~ .tn-alt { position: sticky; bottom: 0; z-index: 5; padding: 18px 0 12px; background: linear-gradient(to bottom, transparent, var(--bg) 40%); }   /* io98: Devam her zaman görünür (çarklar ekranı doldurur) */
.tn-gec { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 10px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border-radius: 12px; }
.tn-gec.on { color: var(--accent); }
.tn-gec:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-ara { position: relative; display: grid; gap: 6px; }
.tn-ara-giris { font-size: 18px; font-weight: 700; padding: 14px 16px; }
.tn-ara-durum { min-height: 18px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.tn-liste { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.tn-liste li[role="option"] { display: grid; gap: 2px; min-height: 52px; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.tn-liste li[role="option"] b { font-size: 15px; font-weight: 750; }
.tn-liste li[role="option"] span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.tn-liste li[aria-selected="true"] { background: var(--tint); }
.tn-liste-iskelet { height: 52px; border-radius: 12px; background: var(--kurs-iskelet, var(--soft)); }
.tn-secili { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--tint); border: 1px solid var(--accent); }
.tn-secili .karo { width: 40px; height: 40px; flex: none; }
.tn-secili-metin { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tn-secili-metin b { font-size: 16px; font-weight: 800; line-height: 1.2; }
.tn-secili-metin span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.tn-degistir { flex: none; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; border-radius: 12px; }
.tn-onlisans { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.tn-onlisans input { width: 20px; height: 20px; accent-color: var(--accent); }
.tn-alt .tn-gec { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .tn-cark-liste li { transform: none; } .tn-net-fark.zip { animation: none; } }   /* io98 */

/* ===================== v72io-jeton · GRAFİK (io228) renk jetonları — "KAYIT SONRASI bloğundan sonra hex yok" kuralı gereği burada;
   kuralları ve hareket sınıfları Grand Prix bloğundan hemen önceki v72io bloğunda. =====================
   Jetonlar (--g-*) iki temada AYRI seçildi (koyu değerler açıktan türetilmedi; her basamak kendi yüzeyinde ölçüldü).
   Kategorik sıra mor → turuncu → turkuaz → mavi → pembe → sarı: dataviz doğrulayıcısıyla (OKLab, Machado 2009) bitişik
   renk körlüğü ΔE 14,0 açık / 10,7 koyu (hedef ≥ 8), normal görüş 25,7 / 19,7 (taban 15); ilk üç ton tüm çiftlerde geçer.
   Her tonun -yazi basamağı kendi -zemin'inde ve kart yüzeyinde ≥ 6:1. Doğru/yanlış/uyarı DURUM renkleridir, kategorik
   değildir ve her zaman ✓/✗ işaretiyle gelir. Hex yalnız jeton tanımında; color-mix yok (eski Android WebView).
   Eski elle yazılmış şemaların --d-* jetonları artık kökte de tanımlı: öğrenme oturumunda (.ls-sema) tanımsızdı; kutular
   siyah, oklar görünmez çiziliyordu (io228'de tarayıcıda ölçüldü). .ak-sema kendi eski eşlemesini korur. */
:root {
  --g-tuy-acik: #FAFAF7; --g-tuy-koyu: #2B2733;   /* io251: gerçek renk taşıyan çizimler (Himalaya tavşanı) — temadan bağımsız */
  --g-zemin: #FFFFFF; --g-zemin2: #F6F4FC; --g-cerceve: #E9E6F2; --g-yazi: #171A2E; --g-sonuk: #5F6578;
  --g-cizgi: #E7E4F1; --g-eksen: #A9A6BC; --g-kenar: #DAD6E8; --g-ok: #8A87A3;
  --g-mor: #6A4AF0; --g-mor-zemin: #F2F2FF; --g-mor-orta: #D9DAFF; --g-mor-kenar: #BDBDFD; --g-mor-yazi: #5338C0;
  --g-turuncu: #E8590C; --g-turuncu-zemin: #FFF0EA; --g-turuncu-orta: #FFD3C2; --g-turuncu-kenar: #F7B197; --g-turuncu-yazi: #953400;
  --g-turkuaz: #0FA38A; --g-turkuaz-zemin: #E0FBF3; --g-turkuaz-orta: #B0EDDD; --g-turkuaz-kenar: #81D8C2; --g-turkuaz-yazi: #006756;
  --g-mavi: #2563EB; --g-mavi-zemin: #EEF4FF; --g-mavi-orta: #CDDFFF; --g-mavi-kenar: #A5C4FF; --g-mavi-yazi: #124AC5;
  --g-pembe: #D6336C; --g-pembe-zemin: #FFEFF2; --g-pembe-orta: #FFD0D9; --g-pembe-kenar: #F7ACBC; --g-pembe-yazi: #A3004A;
  --g-sari: #D99A00; --g-sari-zemin: #FFF2DD; --g-sari-orta: #F5DAAE; --g-sari-kenar: #E3BE80; --g-sari-yazi: #785300;
  --g-dogru: #15803D; --g-dogru-zemin: #E6FAE9; --g-dogru-orta: #C0EBC8; --g-dogru-kenar: #9AD5A6; --g-dogru-yazi: #006B2E;
  --g-yanlis: #C81E1E; --g-yanlis-zemin: #FFEFED; --g-yanlis-orta: #FFD2CB; --g-yanlis-kenar: #F9AEA4; --g-yanlis-yazi: #A8000B;
  --g-uyari: #B45309; --g-uyari-zemin: #FFF0E8; --g-uyari-orta: #FFD4BD; --g-uyari-kenar: #F5B390; --g-uyari-yazi: #914000;
  --g-sure: 480ms; --g-sure-uzun: 820ms; --g-sure-vurgu: 900ms; --g-egri: cubic-bezier(.22, .61, .36, 1);
  --g-adim: 45ms;   /* io288: parça parça kurulumun gecikme basamağı (.gr-dN = N × adım; en geç d16 = 720 ms) */
  --d-kutu: var(--g-zemin); --d-cizgi: var(--g-sonuk); --d-yazi: var(--g-yazi); --d-sonuk: var(--g-sonuk);
  --d-ok1: var(--g-mavi); --d-ok2: var(--g-yanlis); --d-ok3: var(--g-dogru); --d-ok4: var(--g-mor);
  /* io286: harita (deniz, kara, komşu kara, sınır, akarsu) ve IŞIK renkleri — fiziksel renkler, doğru/yanlış DEĞİL; tayf ve
     renk karışımı yalnız bunlarla çizilir. Toplamsal (ek-*) ve çıkarımsal (camgöbeği, macenta, sarı-boya) saf renklerdir:
     ekranda karışım (screen / multiply) tam sarı, camgöbeği, beyaz… verir. Işık paneli iki temada aynı (karanlık / kâğıt). */
  --g-deniz: #DCEBFA; --g-deniz-yazi: #2F5C8F; --g-kara: #FCFBF7; --g-kara2: #ECEAE3; --g-sinir: #B9B5C8; --g-sinir-koyu: #6E6A85; --g-akarsu: #3D7DD8;
  --g-isik-kirmizi: #E53935; --g-isik-turuncu: #FB8C00; --g-isik-sari: #FDD835; --g-isik-yesil: #43A047; --g-isik-mavi: #1E63E9; --g-isik-lacivert: #3F2FB5; --g-isik-mor: #8E24AA;
  --g-isik-ek-kirmizi: #FF0000; --g-isik-ek-yesil: #00FF00; --g-isik-ek-mavi: #0000FF; --g-isik-camgobegi: #00FFFF; --g-isik-macenta: #FF00FF; --g-isik-sari-boya: #FFFF00;
  --g-isik-karanlik: #0B0D14; --g-isik-kagit: #FFFFFF; --g-isik-beyaz-cizgi: #4A4F63;
}
:root[data-tema="koyu"], .gr-koyu {
  --g-zemin: #171E31; --g-zemin2: #1C2439; --g-cerceve: #242D45; --g-yazi: #F5F7FB; --g-sonuk: #A3ACBD;
  --g-cizgi: #27304A; --g-eksen: #56617F; --g-kenar: #343F5E; --g-ok: #7F8AA8;
  --g-mor: #8879FF; --g-mor-zemin: #282740; --g-mor-orta: #3A385E; --g-mor-kenar: #514E82; --g-mor-yazi: #C8C7FF;
  --g-turuncu: #E66932; --g-turuncu-zemin: #3D2218; --g-turuncu-orta: #593120; --g-turuncu-kenar: #7C442D; --g-turuncu-yazi: #FFBCA1;
  --g-turkuaz: #19A289; --g-turkuaz-zemin: #0B3129; --g-turkuaz-orta: #05483C; --g-turkuaz-kenar: #006453; --g-turkuaz-yazi: #7CE4CB;
  --g-mavi: #4882F3; --g-mavi-zemin: #1E2A40; --g-mavi-orta: #2A3D5F; --g-mavi-kenar: #3B5484; --g-mavi-yazi: #B4CFFF;
  --g-pembe: #E0527D; --g-pembe-zemin: #3D2027; --g-pembe-orta: #592E38; --g-pembe-kenar: #7C404F; --g-pembe-yazi: #FFB7C6;
  --g-sari: #BC8600; --g-sari-zemin: #36270E; --g-sari-orta: #4F390E; --g-sari-kenar: #6E4F11; --g-sari-yazi: #F2C67C;
  --g-dogru: #2DBE6C; --g-dogru-zemin: #17311F; --g-dogru-orta: #1F472C; --g-dogru-kenar: #2A633E; --g-dogru-yazi: #97E2AD;
  --g-yanlis: #FF6B7A; --g-yanlis-zemin: #3E2022; --g-yanlis-orta: #5A2E31; --g-yanlis-kenar: #7E4044; --g-yanlis-yazi: #FFB8BB;
  --g-uyari: #FFB547; --g-uyari-zemin: #37260F; --g-uyari-orta: #513710; --g-uyari-kenar: #714D15; --g-uyari-yazi: #F8C37E;
  --g-deniz: #16304D; --g-deniz-yazi: #9CC3EE; --g-kara: #2A3350; --g-kara2: #1F2740; --g-sinir: #4A5576; --g-sinir-koyu: #8D97B5; --g-akarsu: #5A9BF0;
  --g-isik-kagit: #F2F0EA; --g-isik-beyaz-cizgi: #F5F7FB;
}

/* ===== v81io (io326) — YAYIN CİLASI 1 · ORTAK JETON (jeton bölgesinde: sonraki bloklarda hex yok).
   Yayın hazırlık denetiminin (docs/yayin/hazirlik-denetimi-2026-10.md) sistem düzeyindeki bulguları için tek karar noktaları:
     · --accent-yuzey-2 / --grad-yazi: BEYAZ YAZI TAŞIYAN mor geçişin ikinci durağı. Koyu temada düğme #7255EB → #9B7BFF
       geçişiyle çiziliyordu; yazının sağ ucunda beyaz 3,2–3,9:1'e düşüyordu. Artık geçiş koyulaşarak biter (6,1:1).
       --grad (çubuk, süs) DEĞİŞMEDİ; üstünde yazı olan yüzeyler --grad-yazi kullanır.
     · --good-uzeri / --bad-uzeri: yeşil / kırmızı DOLGU üstündeki yazı. Koyu temada --good #2DBE6C, --bad #FF6B7A açık
       tonlardır: beyaz 2,4:1 / 2,8:1 idi ("Bitir", "Doğru"); koyu mürekkep 8,0:1 / 7,0:1. Açık temada beyaz (5,0 / 5,2).
     · --mg-k0…3, --mg-dogru, --mg-yanlis: hızlı oyun sahnesi (Yıldırım, Doğru mu?) temadan BAĞIMSIZ koyu mor sahnedir;
       karolar tema renklerini alınca koyu temada soluyordu (2,4–4,3:1). Sabit oyun paleti, beyaz yazıyla hepsi ≥ 5,0:1
       (Düello karoları gibi). --mg-sonuk: sahnedeki ikincil yazı (8,7:1).
     · --sec-*: TEK çoktan seçmeli şık bileşeni (.secenek) — ders oynatıcısının değerleri (docs/tasarim/bilesenler.md).
     · --etiket-sonuk: renkli/tonlu zemindeki küçük etiketler için --muted'in bir basamak koyusu/açığı (≥ 4,5:1).
   Ölçüm: node scripts/dogrula-kontrast.mjs · tarayıcısız nöbet: test-kontrast-jeton.js */
:root {
  --accent-yuzey-2: #6242E6;
  --grad-yazi: linear-gradient(135deg, var(--accent-yuzey) 0%, var(--accent-yuzey-2) 100%);
  --good-uzeri: #0B0D17; --bad-uzeri: #0B0D17;
  --mg-k0: #6D4AE8; --mg-k1: #2563EB; --mg-k2: #B45309; --mg-k3: #1D7A46; --mg-dogru: #1D7A46; --mg-yanlis: #C2323F; --mg-sonuk: #C3CCE0; --mg-uzeri: #FFFFFF;
  --sec-yuk: 58px; --sec-kenar: 1.5px; --sec-basma: 90ms; --sec-kesir-boy: .92em;
  --sec-zemin: var(--netci-surface); --sec-cizgi: var(--netci-border); --sec-yazi: var(--netci-text); --sec-harf: var(--netci-muted);
  --sec-uzeri-kenar: color-mix(in srgb, var(--accent) 45%, var(--netci-border));
  --sec-secili-zemin: color-mix(in srgb, var(--accent) 9%, var(--netci-surface)); --sec-secili-yazi: #FFFFFF;
  --sec-dogru: var(--netci-success); --sec-yanlis: var(--netci-danger);
  --sec-dogru-zemin: var(--netci-success-soft); --sec-dogru-yazi: #0B7048;
  --sec-yanlis-zemin: var(--netci-danger-soft); --sec-yanlis-yazi: #A92F2F;
  --sec-rozet-yazi: #FFFFFF;
  --sec-golge: 0 1px 2px rgba(23, 26, 46, .04), 0 6px 18px -12px rgba(23, 26, 46, .22);
  --onay-ikon-zemin: color-mix(in srgb, var(--bad) 16%, var(--surface));
  --oto-dolgu-koyu: rgb(0 0 0 / .2); --oy-kapak-erime: linear-gradient(to bottom, rgb(0 0 0) 68%, rgb(0 0 0 / 0));
}
:root[data-tema="acik"] { --accent-yuzey-2: #6A4AF0; --good-uzeri: #FFFFFF; --bad-uzeri: #FFFFFF; }
:root[data-tema="koyu"] {
  --sec-secili-zemin: color-mix(in srgb, var(--accent) 18%, var(--netci-surface));
  --sec-dogru-zemin: color-mix(in srgb, var(--netci-success) 20%, var(--netci-surface)); --sec-dogru-yazi: #7BE0AE;
  --sec-yanlis-zemin: color-mix(in srgb, var(--netci-danger) 20%, var(--netci-surface)); --sec-yanlis-yazi: #FFB3B3;
}

/* ===== v80io (io319): ÇİZİM AİLELERİ (io319) — ORTAK JETON (jeton bölgesinde: hedef ekranı bloğundan sonrası hex'siz kuralı). Yol haritasının (io317) düz-3B çizim aileleri artık tek yerde:
   her aile 4 ton (0 taban · 1 gölge · 2 parlak · 3 kenar ışığı); gölge/parlak/kenar ışığı tabandan karışımla. Koyu temada tabanlar
   AYRI seçildi (beyaz yok → hale yok). Kullananlar: yol haritası çizimleri (harita-sanat.js), Gelişim rozet madalyaları.
   Aileler: n krem · k gri taş · w altın · o turuncu · r mercan · p pembe · g yeşil · j koyu yeşil · s gök · b kahve · c kum · i mürekkep · v mor · bulut. */
:root {
  --hs-gece: #2A1E66; --hs-isik: #FFFFFF; --hs-kenar: #FFFFFF;
  --hs-n0: #FBF6EC; --hs-k0: #C5CCD9; --hs-w0: #FFC845; --hs-o0: #FF9A4A; --hs-r0: #FF6670; --hs-p0: #FF9DC4; --hs-g0: #6FCB5C; --hs-j0: #36A56C; --hs-s0: #8CD2FF; --hs-b0: #C98A55; --hs-c0: #FFF0CF; --hs-i0: #3B3459; --hs-v0: #9C7CFF; --hs-bulut0: #FFFFFF;
  --hs-n1: color-mix(in srgb, var(--hs-n0) 72%, var(--hs-gece)); --hs-n2: color-mix(in srgb, var(--hs-n0) 48%, var(--hs-isik)); --hs-n3: color-mix(in srgb, var(--hs-n0) 58%, var(--hs-kenar));
  --hs-k1: color-mix(in srgb, var(--hs-k0) 72%, var(--hs-gece)); --hs-k2: color-mix(in srgb, var(--hs-k0) 48%, var(--hs-isik)); --hs-k3: color-mix(in srgb, var(--hs-k0) 58%, var(--hs-kenar));
  --hs-w1: color-mix(in srgb, var(--hs-w0) 72%, var(--hs-gece)); --hs-w2: color-mix(in srgb, var(--hs-w0) 48%, var(--hs-isik)); --hs-w3: color-mix(in srgb, var(--hs-w0) 58%, var(--hs-kenar));
  --hs-o1: color-mix(in srgb, var(--hs-o0) 72%, var(--hs-gece)); --hs-o2: color-mix(in srgb, var(--hs-o0) 48%, var(--hs-isik)); --hs-o3: color-mix(in srgb, var(--hs-o0) 58%, var(--hs-kenar));
  --hs-r1: color-mix(in srgb, var(--hs-r0) 72%, var(--hs-gece)); --hs-r2: color-mix(in srgb, var(--hs-r0) 48%, var(--hs-isik)); --hs-r3: color-mix(in srgb, var(--hs-r0) 58%, var(--hs-kenar));
  --hs-p1: color-mix(in srgb, var(--hs-p0) 72%, var(--hs-gece)); --hs-p2: color-mix(in srgb, var(--hs-p0) 48%, var(--hs-isik)); --hs-p3: color-mix(in srgb, var(--hs-p0) 58%, var(--hs-kenar));
  --hs-g1: color-mix(in srgb, var(--hs-g0) 72%, var(--hs-gece)); --hs-g2: color-mix(in srgb, var(--hs-g0) 48%, var(--hs-isik)); --hs-g3: color-mix(in srgb, var(--hs-g0) 58%, var(--hs-kenar));
  --hs-j1: color-mix(in srgb, var(--hs-j0) 72%, var(--hs-gece)); --hs-j2: color-mix(in srgb, var(--hs-j0) 48%, var(--hs-isik)); --hs-j3: color-mix(in srgb, var(--hs-j0) 58%, var(--hs-kenar));
  --hs-s1: color-mix(in srgb, var(--hs-s0) 72%, var(--hs-gece)); --hs-s2: color-mix(in srgb, var(--hs-s0) 48%, var(--hs-isik)); --hs-s3: color-mix(in srgb, var(--hs-s0) 58%, var(--hs-kenar));
  --hs-b1: color-mix(in srgb, var(--hs-b0) 72%, var(--hs-gece)); --hs-b2: color-mix(in srgb, var(--hs-b0) 48%, var(--hs-isik)); --hs-b3: color-mix(in srgb, var(--hs-b0) 58%, var(--hs-kenar));
  --hs-c1: color-mix(in srgb, var(--hs-c0) 72%, var(--hs-gece)); --hs-c2: color-mix(in srgb, var(--hs-c0) 48%, var(--hs-isik)); --hs-c3: color-mix(in srgb, var(--hs-c0) 58%, var(--hs-kenar));
  --hs-i1: color-mix(in srgb, var(--hs-i0) 72%, var(--hs-gece)); --hs-i2: color-mix(in srgb, var(--hs-i0) 48%, var(--hs-isik)); --hs-i3: color-mix(in srgb, var(--hs-i0) 58%, var(--hs-kenar));
  --hs-v1: color-mix(in srgb, var(--hs-v0) 72%, var(--hs-gece)); --hs-v2: color-mix(in srgb, var(--hs-v0) 48%, var(--hs-isik)); --hs-v3: color-mix(in srgb, var(--hs-v0) 58%, var(--hs-kenar));
  --hs-bulut1: color-mix(in srgb, var(--hs-bulut0) 72%, var(--hs-gece)); --hs-bulut2: color-mix(in srgb, var(--hs-bulut0) 48%, var(--hs-isik)); --hs-bulut3: color-mix(in srgb, var(--hs-bulut0) 58%, var(--hs-kenar));
}
:root[data-tema="koyu"] {
  --hs-gece: #07061A; --hs-isik: #E6E0FF; --hs-kenar: #B7A6FF;
  --hs-n0: #BDB8D6; --hs-k0: #717C9C; --hs-w0: #E2AA38; --hs-o0: #D97C3C; --hs-r0: #D5565F; --hs-p0: #CF7AA2; --hs-g0: #55A65A; --hs-j0: #2D8058; --hs-s0: #5A9ED2; --hs-b0: #9A6943; --hs-c0: #CBBE9E; --hs-i0: #3D3763; --hs-v0: #7F65E2; --hs-bulut0: #2E3760;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════
   v53io · KAYIT SONRASI: HEDEFİN + NEREYE GİDEBİLİRSİN? (io69, O2) — resmî sayı satırları, zorluk bandı çipi (yalnız ad),
   dürüst net satırı, en çok 5 yüzen süs (aria-hidden; azaltılmış hareket ve reduced katmanda yok), iki eğri stroke-dashoffset
   ile --motion-reveal'da çizilir; azaltılmış hareketle eğriler tam çizili gelir. Jetonlar v48.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.hd { position: relative; }
.hd-baslik { font-size: 26px; font-weight: 800; line-height: 1.1; margin: 8px 0 14px; }
.hd-alt { margin: -6px 0 16px; font-size: 15px; font-weight: 600; color: var(--muted); }
.hd-kart { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.hd-program { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.hd-program .karo { width: 40px; height: 40px; flex: none; }
.hd-program > div { display: grid; gap: 2px; min-width: 0; }
.hd-program b { font-size: 18px; font-weight: 800; line-height: 1.2; }
.hd-program span { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.hd-satir { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; min-height: 28px; }
.hd-satir > span { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.hd-satir > b { display: grid; justify-items: end; gap: 1px; font-size: 18px; font-weight: 800; text-align: right; }
.hd-satir > b small { font-size: 12px; font-weight: 600; color: var(--muted); }
.hd-sessiz { font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: right; }
.hd-iskelet > i { display: block; width: 88px; height: 22px; border-radius: 999px; background: var(--soft); }
.hd-bant { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 800; font-style: normal; background: var(--tint); color: var(--accent); }
.hd-bant-cok-yuksek, .hd-bant-yuksek { background: var(--tint-warn); color: var(--warn); }
.hd-bant-ulasilabilir { background: var(--tint-good); color: var(--good); }
.hd-net { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.hd-moral { margin: 18px 0 0; text-align: center; font-size: 16px; font-weight: 700; }
.hd-yuzen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hd-yuzen span { position: absolute; color: var(--accent-2); opacity: .45; animation: hdYuz var(--motion-nefes) ease-in-out infinite; }
.hd-yuzen-1 { left: 6%; top: 12%; } .hd-yuzen-2 { right: 8%; top: 9%; animation-delay: -800ms; } .hd-yuzen-3 { left: 10%; top: 58%; animation-delay: -1600ms; }
.hd-yuzen-4 { right: 12%; top: 64%; animation-delay: -2400ms; } .hd-yuzen-5 { left: 48%; top: 84%; animation-delay: -1200ms; }
@keyframes hdYuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hd-grafik { margin: 0; display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.hd-grafik svg { width: 100%; height: auto; max-width: 320px; margin: 0 auto; display: block; overflow: visible; }
.hd-eksen { stroke: var(--line); stroke-width: 2; }
.hd-eksen-yazi { font-size: 12px; font-weight: 700; fill: var(--muted); }
.hd-egri { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hdCiz var(--motion-reveal) var(--ease-enter) forwards; }
path.hd-egri-tekrar { stroke: var(--accent); animation-delay: 120ms; }
path.hd-egri-okuma { stroke: var(--muted); }
@keyframes hdCiz { to { stroke-dashoffset: 0; } }
.hd-az .hd-egri { animation: none; stroke-dashoffset: 0; }
.hd-lejant { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hd-lejant li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.hd-lejant i { width: 18px; height: 4px; border-radius: 999px; }
.hd-lejant i.hd-egri-tekrar { background: var(--accent); } .hd-lejant i.hd-egri-okuma { background: var(--muted); }
.hd-caption { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.hd-kaynaklar { border: 0; background: transparent; padding: 0; font: inherit; font-size: 12px; font-weight: 800; color: var(--accent); text-decoration: underline; cursor: pointer; min-height: 24px; }
.hd-kaynak-liste { margin: 0; padding-left: 18px; display: grid; gap: 12px; font-size: 13.5px; line-height: 1.45; }
.hd-kaynak-liste p { margin: 4px 0 0; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .hd-yuzen { display: none; } .hd-egri { animation: none; stroke-dashoffset: 0; } }
:root[data-tier="reduced"] .hd-yuzen { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════
   v54io · KAYIT SONRASI: ANALİZ + PLANIN HAZIR (io70, O3) — Neti çevresinde üç simge yörüngesi (--motion-kirp, azaltılmış
   hareketle sabit), gerçek aşamalar (UI.stages), plan kartı üç satır + Başla. Jetonlar v48.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.hd-analiz { display: grid; justify-items: center; gap: 14px; padding: 24px 0 8px; text-align: center; }
.hd-baslik-orta { text-align: center; margin: 0; }
.hd-neti { position: relative; width: 180px; height: 180px; display: grid; place-items: center; }
.hd-neti .neti { width: 120px; }
.hd-yorunge { position: absolute; inset: 0; pointer-events: none; animation: hdYorunge var(--motion-kirp) linear infinite; }
.hd-yorunge span { position: absolute; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--accent); }
.hd-yorunge-1 { left: 50%; top: -4px; margin-left: -16px; } .hd-yorunge-2 { right: -2px; bottom: 26px; } .hd-yorunge-3 { left: -2px; bottom: 26px; }
@keyframes hdYorunge { to { transform: rotate(360deg); } }
.hd-neti.hd-az .hd-yorunge { animation: none; }
.hd-asamalar { width: 100%; max-width: 320px; text-align: left; }
.hd-plan-neti { display: grid; justify-items: center; padding: 12px 0 6px; }
.hd-plan-neti .neti { width: 96px; }
@media (prefers-reduced-motion: reduce) { .hd-yorunge { animation: none; } }
:root[data-tier="reduced"] .hd-yorunge { animation: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════
   v55io · BUGÜN ÜSTÜ: GÜN SATIRI + KALP (io71, O4) — sakin tek satır "YKS'ye 281 gün" (sayı --motion-nefes ile ±2 px süzülür,
   azaltılmış hareketle sabit), üst çubukta kalp rozeti (düğme), kural sayfası satırı. Jetonlar v48.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ev-gun { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.ev-gun b { display: inline-block; font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-gun small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 2px; letter-spacing: 0; }   /* io81: "tahmini" küçük, gün'e yakın */
.ev-gun-canli b { animation: evGunYuz var(--motion-nefes) ease-in-out infinite; }
@keyframes evGunYuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.ud-kalp .ic { color: var(--kalp); filter: drop-shadow(0 0 4px var(--kalp-parla)); animation: kalpAt var(--motion-nefes) ease-in-out infinite; transform-origin: 50% 55%; }   /* io78 → io93 */
.ud-parca:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 999px; }
.hd-kalkan-sayi { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.hd-kalkan-sayi .ic { color: var(--kalp); filter: drop-shadow(0 0 4px var(--kalp-parla)); }
@media (max-width: 380px) { :root:not([data-rota="bugun"]) .brand > span:not(.logo) { display: none; } }   /* io79: sayaç görünürken dar ekranda marka yazısı gizli, logo kalır (io93: kapsül kuralları kendi bloğunda) */
@media (prefers-reduced-motion: reduce) { .ev-gun-canli b { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════
   v56io · PLUS ROZETİ + PLUS KARTI (io72, O5) — bayrak arkasında. Rozet ilk boyada bir kez parlar (--motion-reveal);
   kart adım kartının altında, satır geçişi --motion-standard, azaltılmış harekette sabit. Jetonlar v48; fiyat yok.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ud-plan { position: relative; overflow: hidden; isolation: isolate; }   /* io93: kapsülün plan ucu */
.ud-plan.parla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--surface) 50%, transparent 80%); opacity: .55; transform: translateX(-120%); animation: plusParla var(--motion-reveal) var(--ease-flow) 1 forwards; }
@keyframes plusParla { to { transform: translateX(120%); } }
.ev-plus { display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.ev-plus-ust { display: flex; align-items: center; gap: 12px; }
.ev-plus-neti { flex: none; width: 56px; }
.ev-plus-neti .neti { width: 56px; }
.ev-plus-metin { display: grid; gap: 3px; min-width: 0; }
.ev-plus-metin b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.ev-plus-satir { font-size: 13.5px; font-weight: 700; color: var(--muted); min-height: 18px; transition: opacity var(--motion-standard) var(--ease-flow); }
.ev-plus-satir.solgun { opacity: 0; }
.ev-plus-alt { display: flex; align-items: center; gap: 10px; }
.ev-plus-cta { flex: 1; }
@media (prefers-reduced-motion: reduce) { .ud-plan.parla::after { animation: none; opacity: 0; } .ev-plus-satir { transition: none; } }

/* ===================== v60io: UI cila (io78-ui-cila) — alev/kalp döngüleri, sınav adı, avatar, Bugün panosu, Kartlar rehberi ===================== */
@keyframes alevYan { 0%, 100% { transform: scale(1) skewX(0); } 20% { transform: scale(1.08) skewX(-4deg); } 45% { transform: scale(.97) skewX(3deg); } 70% { transform: scale(1.1) skewX(-2deg) translateY(-.5px); } }
@keyframes kalpAt { 0%, 30%, 100% { transform: scale(1); } 8% { transform: scale(1.18); } 16% { transform: scale(1); } 22% { transform: scale(1.12); } }
.sinav-ad { color: var(--alev-ates); font-weight: 900; text-shadow: 0 0 8px var(--alev-parla); letter-spacing: .02em; }
/* io139: açık temada alev turuncusu (--alev-ates) beyaz sayaç kapsülünde 2,61:1 — her ekranın üst
   çubuğunda okunmuyordu. Yazı koyu turuncuya iner (--alev-k, beyazda 5,0:1); alev simgesi aynı kalır. */
:root[data-tema="acik"] .sinav-ad { color: var(--alev-k); }
/* avatar */
.av { display: inline-grid; place-items: center; line-height: 0; --av-zemin: var(--av-mavi); --av-yuz: var(--av-yuz-acik); --av-cizgi: var(--av-cizgi-koyu); }
.av-mavi { --av-zemin: var(--av-mavi); } .av-mor { --av-zemin: var(--av-mor); } .av-yesil { --av-zemin: var(--av-yesil); } .av-turuncu { --av-zemin: var(--av-turuncu); } .av-pembe { --av-zemin: var(--av-pembe); } .av-camgobegi { --av-zemin: var(--av-camgobegi); }
.av svg { display: block; }
.avatar.av-var { background: transparent; padding: 0; } .avatar.av-var .av svg { width: 44px; height: 44px; }
.pf-avatar { padding: 0; border: 0; cursor: pointer; position: relative; }
.pf-avatar.av-var { background: transparent; }
.pf-avatar-rozet { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--ink); display: grid; place-items: center; box-shadow: var(--yuzey-1); }
.av-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.av-sec { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 44px; transition: transform var(--motion-instant) var(--ease-snap), border-color var(--motion-fast) var(--ease-snap); }
.av-sec:active { transform: scale(.96); }
.av-sec.on { border-color: var(--accent); background: var(--tint-blue); }
.av-sec .av-harf { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 44px; text-align: center; }
.av-not { margin: 12px 0 0; }
/* Bugün panosu */
.ev-ist { margin-top: 12px; background: var(--surface); border: 1px solid var(--hat); border-radius: var(--r); box-shadow: var(--yuzey-1); padding: 14px 16px 16px; }
.ev-ist-bas { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ev-ist-bas a { color: var(--accent-yazi); font-weight: 700; font-size: 13.5px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ev-ist-karolar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ev-ist-karo { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 11px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--hat); min-height: 64px; }
.ev-ist-karo i.karo { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-xs); }
.ev-ist-karo i.karo.amber .ic { filter: drop-shadow(0 0 3px var(--alev-parla)); color: var(--alev-ates); }
.ev-ist-karo b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-ist-karo b small { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.ev-ist-karo div > span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.ev-ist-delta { font-style: normal; font-size: 12px; font-weight: 800; } .ev-ist-delta.art { color: var(--good-d); } .ev-ist-delta.dus { color: var(--bad-d); } .ev-ist-delta.ayni { color: var(--muted); }
.ev-ist-alt { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; margin-top: 12px; }
.ev-ist-cubuk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 64px; }
.ev-ist-cubuk div { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: end; gap: 4px; min-height: 0; }
.ev-ist-cubuk i { display: block; width: 100%; max-width: 22px; height: 0; border-radius: 999px; background: var(--tint-blue); transition: height var(--motion-structural) var(--ease-enter); }
.ev-ist-cubuk div.bugun i { background: var(--accent); }
.ev-ist-cubuk div.bos i { background: var(--surface-3); }
.ev-ist-cubuk em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700; }
.ev-ist-cubuk div.bugun em { color: var(--accent-yazi); }
.ev-ist-halka { display: grid; justify-items: center; gap: 2px; font-size: 12px; color: var(--muted); font-weight: 700; text-align: center; }
.ev-ist-bos { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }
.ev-oyunlar { margin-top: 14px; } .ev-oyunlar .ev-ist-bas { margin-bottom: 0; } .ev-oyunlar .ev-serit { margin-top: 4px; }
@media (min-width: 560px) { .ev-ist-karolar { grid-template-columns: repeat(4, 1fr); } }
/* Kartlar: pusula rehberi (çipler gerçek düğme; ortadaki mini kart yönleri gösterir; o anki yön çipi yanar) */
.kt-rehber { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr 96px 1fr; gap: 6px 8px; width: min(100%, 440px); margin: 10px auto 0; align-items: center; }
.kt-yon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; box-shadow: none; animation: ktYan var(--kt-demo) ease-in-out infinite; transition: transform var(--motion-instant) var(--ease-snap), opacity var(--motion-fast) var(--ease-snap); }
.kt-yon:active { transform: translateY(2px); }
.kt-yon i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700; }
.kt-yon-ust { grid-column: 2; grid-row: 1; animation-delay: var(--kt-demo-3); } .kt-yon-sol { grid-column: 1; grid-row: 2; justify-self: end; animation-delay: var(--kt-demo-2); }
.kt-yon-sag { grid-column: 3; grid-row: 2; justify-self: start; } .kt-yon-alt { grid-column: 2; grid-row: 3; animation-delay: var(--kt-demo-4); }
.kt-yon-orta { grid-column: 2; grid-row: 2; position: relative; height: 60px; display: grid; place-items: center; }
.kt-mini { position: absolute; width: 32px; height: 46px; border-radius: 12px; background: var(--accent); box-shadow: var(--yuzey-1); animation: ktMini var(--kt-demo) ease-in-out infinite; }
.kt-el { position: absolute; width: 14px; height: 14px; margin-top: 22px; border-radius: 50%; background: var(--uzeri); border: 2px solid var(--ink); animation: ktMini var(--kt-demo) ease-in-out infinite; }
@keyframes ktMini { 0%, 100% { transform: none; } 6% { transform: translateX(30px) rotate(10deg); } 18% { transform: none; } 31% { transform: translateX(-30px) rotate(-10deg); } 43% { transform: none; } 56% { transform: translateY(-26px); } 68% { transform: none; } 81% { transform: translateY(26px); } 93% { transform: none; } }
@keyframes ktYan { 0%, 20%, 100% { box-shadow: none; } 4%, 16% { box-shadow: var(--glow-focus); } }
.kt-rehber[data-cevapli="0"] .kt-yon-sag, .kt-rehber[data-cevapli="0"] .kt-yon-sol { opacity: .45; animation: none; }
.kt-rehber-not { grid-column: 1 / -1; grid-row: 4; margin: 0; text-align: center; color: var(--muted); font-size: 12px; }
/* kısa ekran (≤ 700 px): pusula tek sıraya iner (demo gizli), sahne payı eski 236 px'e döner — 5 şıklı kart kırpılmasın */
@media (max-height: 700px) {
  .kt-rehber { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .kt-yon-ust, .kt-yon-sol, .kt-yon-sag, .kt-yon-alt { grid-column: auto; grid-row: 1; justify-self: stretch; padding: 6px 4px; font-size: 12px; }
  .kt-yon i, .kt-yon-orta, .kt-rehber-not { display: none; }
  .kt-sahne { width: min(100%, 440px, calc((100dvh - 236px) * 0.66)); }
}

/* ===================== io79-ui-cila-2: tema düğmesi, sayaç çipi, X-Ray + DNA karoları ===================== */
/* io83: tema düğmesi kalktı */
@media (max-width: 374px) { #countdown .cd-gun { display: none; } }   /* io93: kapsülde 375 px'e kadar "gün" sığıyor */
/* io83: rozet artık Plus'a giden düğme — dar ekranda da görünür */   /* Bugün'de Plus kartı zaten sayfada; dar ekranda rozet tema düğmesine yer açar */
.ev-ist-zekalar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ev-ist-zeka { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; gap: 2px; padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--hat); color: var(--ink); text-decoration: none; min-height: 64px; }   /* io95: küçük resimli kart */
.ev-ist-zeka:active { transform: scale(.985); }
.ev-ist-zeka i.karo { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-xs); flex: none; }
.ev-ist-zeka > span { min-width: 0; }   /* io95: zk-bas/zk-gorsel/zk-lejant */
.zk-bas b { font-size: 12px; color: var(--muted); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ev-ist-zeka em { display: block; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.ev-ist-zeka > small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.35; }
.ev-ist-zeka.bos em { color: var(--ink-2); font-weight: 700; }
.ev-ist-zeka.bos > small { color: var(--ink-2); }
@media (max-width: 372px) { .ev-ist-zekalar { grid-template-columns: 1fr; } }

/* ===================== io81-cila-3: Bugün ölçüleri, oyun tam ekran, Kartlar öğretici + limit, avatar tasarımcısı, arkadaş kodu ===================== */
.ev-gun .sinav-ad { font-size: 26px; line-height: 1; vertical-align: -2px; }
:root[data-rota="bugun"] .pill.streak .ic, :root[data-rota="bugun"] .pill.kalkan .ic { width: 20px; height: 20px; }
:root[data-rota="bugun"] .pill.streak, :root[data-rota="bugun"] .pill.kalkan { font-size: 15px; }
.ev-cta-ad { display: block; width: 100%; font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; opacity: .92; line-height: 1.2; }
.ev-cta:has(.ev-cta-ad) { flex-wrap: wrap; row-gap: 0; padding-top: 10px; padding-bottom: 10px; }
/* oyunlar tam ekran: üst çubuk ve sekmeler gizli, oyunun kendi Çık düğmesi kalır */
:root[data-rota="oyna"] .top, :root[data-rota="surus"] .top, :root[data-rota="tirmanis"] .top, :root[data-rota="magara"] .top, :root[data-rota="yildirim"] .top, :root[data-rota="eslestir"] .top, :root[data-rota="dogrumu"] .top,
:root[data-rota="oyna"] #tabs, :root[data-rota="surus"] #tabs, :root[data-rota="tirmanis"] #tabs, :root[data-rota="magara"] #tabs, :root[data-rota="yildirim"] #tabs, :root[data-rota="eslestir"] #tabs, :root[data-rota="dogrumu"] #tabs,
:root[data-rota="oyna"] .kt-fab, :root[data-rota="surus"] .kt-fab, :root[data-rota="tirmanis"] .kt-fab, :root[data-rota="magara"] .kt-fab, :root[data-rota="yildirim"] .kt-fab, :root[data-rota="eslestir"] .kt-fab, :root[data-rota="dogrumu"] .kt-fab { display: none; }
:root[data-rota="oyna"] #view { padding: 0; max-width: none; }   /* io237: oyun menüsü tam ekran, güvenli alanı kendisi bırakır */
:root[data-rota="surus"] #view, :root[data-rota="tirmanis"] #view, :root[data-rota="magara"] #view, :root[data-rota="yildirim"] #view, :root[data-rota="eslestir"] #view, :root[data-rota="dogrumu"] #view { padding: env(safe-area-inset-top, 0px) 0 0; max-width: none; }
:root[data-rota="tirmanis"] .tr-wrap, :root[data-rota="magara"] .mg-wrap { height: calc(100dvh - env(safe-area-inset-top, 0px)); min-height: 0; border-radius: 0; }
:root[data-rota="surus"] .road-wrap { height: calc(100dvh - env(safe-area-inset-top, 0px)); min-height: 0; border-radius: 0; }
:root[data-rota="yildirim"] .mg, :root[data-rota="eslestir"] .mg, :root[data-rota="dogrumu"] .mg { min-height: calc(100dvh - env(safe-area-inset-top, 0px)); border-radius: 0; }
/* Kartlar: gizli eylem düğmeleri (klavye/okuyucu), "?" düğmesi, öğretici, limit */
.kt-eylem-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kt-eylem-gizli button:focus-visible { position: fixed; left: 50%; bottom: 24px; width: auto; height: auto; clip: auto; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); border: 0; z-index: 30; }
.kt-yardim { justify-self: end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink); font: inherit; font-weight: 900; font-size: 18px; cursor: pointer; margin-right: 8px; }
.kt-ogretici { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: var(--perde); }
.kt-og-kutu { width: min(100%, 360px); background: var(--surface); color: var(--ink); border-radius: 24px; padding: 18px 18px 16px; display: grid; gap: 12px; box-shadow: var(--yuzey-2); }
.kt-og-kutu h3 { margin: 0; font-size: 20px; }
.kt-og-demo { position: relative; height: 200px; display: grid; place-items: center; border-radius: 18px; background: var(--surface-2); }
.kt-og-demo .kt-mini { position: absolute; width: 40px; height: 56px; border-radius: 12px; background: var(--accent); box-shadow: var(--yuzey-1); animation: ktMini var(--kt-demo) ease-in-out infinite; }
.kt-og-demo .kt-el { position: absolute; width: 16px; height: 16px; margin-top: 26px; border-radius: 50%; background: var(--uzeri); border: 2px solid var(--ink); animation: ktMini var(--kt-demo) ease-in-out infinite; }
.kt-og-yon { position: absolute; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--muted); animation: ktYan var(--kt-demo) ease-in-out infinite; padding: 4px 8px; border-radius: 999px; }
.kt-og-ust { top: 10px; left: 50%; transform: translateX(-50%); animation-delay: var(--kt-demo-3); } .kt-og-alt { bottom: 10px; left: 50%; transform: translateX(-50%); animation-delay: var(--kt-demo-4); }
.kt-og-sol { left: 10px; top: 50%; transform: translateY(-50%); animation-delay: var(--kt-demo-2); } .kt-og-sag { right: 10px; top: 50%; transform: translateY(-50%); }
.kt-og-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .kt-og-liste li { display: flex; align-items: center; gap: 10px; font-size: 15px; } .kt-og-liste .ic { color: var(--accent); flex: none; }
.kt-og-tamam { min-height: 48px; }
.kt-limit { display: grid; gap: 10px; text-align: center; justify-items: center; } .kt-limit-neti { margin-bottom: 2px; } .kt-limit h3 { margin: 0; } .kt-limit p { margin: 0; color: var(--muted); }
/* avatar tasarımcısı */
.av-db svg { display: block; border-radius: 50%; }
.av-sec2 { display: grid; gap: 12px; }
.av-onizleme { display: grid; justify-items: center; gap: 10px; }
.av-onizleme-dugmeler { display: flex; gap: 8px; }
.av-kategoriler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px; }
.av-kategoriler::-webkit-scrollbar { display: none; }
.av-kat { flex: none; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.av-kat.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.av-op-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 44vh; overflow-y: auto; padding: 2px; }
.av-op { display: grid; place-items: center; min-height: 64px; padding: 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.av-op.on { border-color: var(--accent); box-shadow: var(--glow-focus); }
.av-op .av-db svg { width: 56px; height: 56px; }
.av-renkler { grid-template-columns: repeat(6, 1fr); }
.av-renk { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--av-r); box-shadow: var(--shadow-ickenar); }
.av-yok { font-size: 20px; color: var(--muted); font-weight: 800; }
/* arkadaş kodu */
.pf-kod { font-family: var(--mono); font-size: 16px; letter-spacing: .08em; color: var(--ink); }
.pf-kod-dugmeler { display: flex; gap: 2px; }
.pf-kod-btn { color: var(--accent-k); border-radius: 50%; }
.pf-wa { color: var(--good-d); }

/* ===================== io82-neti: Neti hareketleri (NETI.oynat) — yalnız transform; azaltılmış harekette küresel kural durdurur ===================== */
:root { --neti-hareket: 900ms; }
.neti.zipla .govde { animation: netiZipla2 var(--neti-hareket) var(--ease-spring) both; }
.neti.salla .govde { animation: netiSalla var(--neti-hareket) ease-in-out both; }
.neti.dans .govde { animation: netiDans var(--neti-hareket) ease-in-out both; }
.neti.titre .govde { animation: netiTitre var(--motion-structural) ease-in-out both; }
.neti.don .govde { animation: netiDon var(--neti-hareket) var(--ease-spring) both; }
.neti.bas .govde { animation: netiBas var(--neti-hareket) ease-in-out both; }
.neti.heyecan .govde { animation: netiHeyecan var(--neti-hareket) ease-in-out both; }
@keyframes netiZipla2 { 0% { transform: translateY(0) scaleY(1); } 20% { transform: translateY(2px) scaleY(.92) scaleX(1.06); } 50% { transform: translateY(-16px) scaleY(1.06) scaleX(.96); } 80% { transform: translateY(1px) scaleY(.96); } 100% { transform: none; } }
@keyframes netiSalla { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }
@keyframes netiDans { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translate(-3px, -6px) rotate(-6deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translate(3px, -6px) rotate(6deg); } }
@keyframes netiTitre { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes netiDon { 0% { transform: rotate(0) scale(1); } 60% { transform: rotate(360deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes netiBas { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(2px) rotate(-3deg); } 60% { transform: translateY(-1px) rotate(2deg); } }
@keyframes netiHeyecan { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-7px); } 30% { transform: translateY(0); } 45% { transform: translateY(-5px); } 60% { transform: translateY(0); } 75% { transform: translateY(-3px); } }
.ev-neti .neti { cursor: pointer; }

/* ===================== io83-cila-4: Plus rozeti dokunulabilir; Hesap'ta mor Plus kahraman kartı ===================== */
button.ud-parca { cursor: pointer; }   /* io93 */
.pill.plus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-plus { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 16px 16px 16px 18px; border-radius: var(--r); background: var(--hero); color: var(--uzeri); text-decoration: none; box-shadow: var(--yuzey-1); min-height: 112px; }
.hs-plus:active { transform: scale(.985); }
.hs-plus-parilti { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hs-plus-parilti i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ikon-ic); opacity: 0; animation: hsParla var(--pp-parilti, 2600ms) ease-in-out infinite; }
.hs-plus-parilti i:nth-child(1) { left: 6%; top: 18%; } .hs-plus-parilti i:nth-child(2) { left: 30%; top: 78%; animation-delay: var(--kt-demo-4); }
.hs-plus-parilti i:nth-child(3) { left: 58%; top: 12%; animation-delay: var(--kt-demo-3); } .hs-plus-parilti i:nth-child(4) { left: 88%; top: 70%; animation-delay: var(--kt-demo-2); }
.hs-plus-parilti i:nth-child(5) { left: 44%; top: 50%; animation-delay: var(--pp-g2, -900ms); } .hs-plus-parilti i:nth-child(6) { left: 72%; top: 86%; animation-delay: var(--pp-g4, -1900ms); }
@keyframes hsParla { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
.hs-plus-yazi { display: grid; gap: 4px; min-width: 0; }
.hs-plus-yazi .eyebrow { color: var(--ikon-ic); }
.hs-plus-yazi b { font-family: var(--display); font-size: 18px; line-height: 1.2; }
.hs-plus-yazi span { font-size: 13.5px; opacity: .9; line-height: 1.35; }
.hs-plus-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--uzeri); color: var(--accent-k); font-weight: 800; font-size: 13.5px; width: max-content; }
.hs-plus-neti { flex: none; }

/* ===================== io86-neti: kollar — Neti selamlarken el sallar, kutlarken iki kolunu kaldırır =====================
   Kol gövdenin parçası (maskot.js .kol-sol/.kol-sag); dönüş omuzdan olsun diye transform-box: fill-box
   kullanılıyor (.goz ve .anten ile aynı yöntem). Poz sınıfı NETI.pozDegistir ile geldiği için CSS
   ifadeyi ve kolu birlikte değiştirir; JS'te ek iş yok. */
.neti .kol { transform-box: view-box; transition: transform var(--motion-structural) var(--ease-spring); }
/* io248: omuz noktaları yeni çizimin koordinatlarında; poz duruşu maskot.js EK tablosundan CSS değişkeniyle gelir */
.neti .kol-sol { transform-origin: 30px 84px; transform: var(--neti-kol-sol, none); }
.neti .kol-sag { transform-origin: 97px 77px; transform: var(--neti-kol-sag, none); }
.neti .mercek { opacity: var(--neti-mercek, 1); transition: opacity var(--motion-structural) var(--ease-flow); }
/* io248: sağ kolun iki biçimi — dururken el kalçada (kimlik), kalkınca/hareket ederken düz kol */
.neti .kol-duz { opacity: 0; }
.neti:is([data-kol], .alkis, .elSalla, .goster, .yumruk, .esne, .egil, .usu, .irkil, .kos, .kutla) .kol-bukuk { opacity: 0; }
.neti:is([data-kol], .alkis, .elSalla, .goster, .yumruk, .esne, .egil, .usu, .irkil, .kos, .kutla) .kol-duz { opacity: 1; }
.neti.canli.selam .kol-sag { animation: netiEl 1.5s ease-in-out infinite; }
@keyframes netiEl { 0%, 100% { transform: rotate(-72deg); } 50% { transform: rotate(-100deg); } }
@media (prefers-reduced-motion: reduce) { .neti .kol { transition: none; } .neti.canli.selam .kol-sag { animation: none; } }

/* ===================== io86-mat: matematik dizgisi her ekranda aynı =====================
   Çevirici public/mat.js (window.MAT); biçim burada. Yığılmış kesir satır kutusunu
   büyüttüğü için soru kökü, şık, çözüm ve hata defteri satırlarında satır yüksekliği
   bol tutuluyor — mobilde kırpılma ve üst üste binme buradan geliyordu. */
.mat-kesir { line-height: 1; }
.stem, .qstem, .cl-govde, .kt-soru, .io-soru, .cozum, .cl-derin, .kt-aciklama, .flash .face,
.opt span, .cl-metin, .kt-metin, .og-kart span, .yl-sik span, .es-on, .dm-metin { line-height: 1.55; }
/* sup/sup yığını satırı büyütmesin: göreli konum + sıfır yükseklik etkisi */
.mat sup, .stem sup, .qstem sup, .cl-govde sup, .kt-soru sup, .io-soru sup, .cozum sup, .opt sup { font-size: .7em; line-height: 0; position: relative; top: -.45em; }
.mat sub, .stem sub, .qstem sub, .cl-govde sub, .kt-soru sub, .io-soru sub, .cozum sub, .opt sub { font-size: .7em; line-height: 0; position: relative; bottom: -.25em; }
/* uzun formül dar ekranda taşmasın: kutu kendi içinde kayar, sayfa yatayda kaymaz */
.cl-govde, .qstem, .kt-soru, .io-soru { overflow-wrap: anywhere; }

/* ===================== io86-arkadaslar: altı sekmeli alt gezinme =====================
   Beşinci sekme (Arkadaşlar) eklendi. Dar ekranda etiketler daralmasın diye
   ızgara altıya çıkıyor, yatay iç boşluk azalıyor ve 360 px altında yazı bir puan
   küçülüyor. Dokunma hedefi 56 px yükseklikte kalıyor (erişilebilirlik). */
/* io236: altı sekme etiketi ekran genişliğiyle ölçeklenir — 412 px Android'da "Arkadaşlar" 64/65 px ile kesiliyordu (Android yazı tipi biraz daha geniş). Her genişlikte ~%10 pay kalır. */
#tabs a { font-size: clamp(8.5px, 2.5vw, 11px); letter-spacing: -.015em; }

/* ===================== io93 — ÜST DURUM KAPSÜLÜ + ALEV/KALP SAYFALARI =====================
   Kurucu: "üst çubuk sığmıyor". Sayaç · alev · kalp · plan tek kapsülde; 44 px dokunma hedefi,
   bölmeler 1 px çizgi, plan ucu mor gradyan (Plus'ta altın). Dar ekran sırası: Bugün dışında
   marka → "gün" (≤374) → bölme boşluğu (≤380) → plan yazısı (≤340, yıldız kalır). Renkler ve
   gölgeler jetonda; süreler jetonda ya da sonsuz ortam döngüsü. */
:root { --ud-yuk: 44px; --ud-golge: 0 10px 24px -16px rgba(5, 6, 20, .75); --ud-bolme: inset 1px 0 0 rgba(255, 255, 255, .08); --ud-basma: rgba(255, 255, 255, .06); --ud-plan-golge: inset 0 1px 0 rgba(255, 255, 255, .24); --ud-parilti: rgba(255, 255, 255, .5); --ud-pop-sure: 560ms; --ud-parilti-sure: 5200ms; --ud-altin: linear-gradient(135deg, rgb(245 184 61) 0%, rgb(255 138 61) 100%); --ud-cta: var(--ikon-ic); --ud-cta-yazi: rgb(42 26 0); --ud-plus-golge: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 16px 36px -18px color-mix(in srgb, var(--accent) 80%, transparent); --ud-nokta-golge: inset 0 0 0 1px rgba(255, 255, 255, .06); }
:root[data-tema="acik"] { --ud-golge: 0 10px 22px -16px rgba(16, 24, 40, .35); --ud-bolme: inset 1px 0 0 rgba(16, 24, 40, .08); --ud-basma: rgba(16, 24, 40, .05); --ud-nokta-golge: inset 0 0 0 1px rgba(16, 24, 40, .06); }
.ud-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ust-durum { display: inline-flex; align-items: stretch; height: var(--ud-yuk); border-radius: 999px; box-shadow: var(--ud-golge); }
.ust-durum:not(:has(> .ud-parca:not([hidden]))) { display: none; }
.ud-parca { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; padding: 0 11px; border: 0; background: transparent; color: inherit; font: inherit; font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; transition: background-color 200ms var(--ease-flow); -webkit-tap-highlight-color: transparent; }
.ud-parca:not([hidden]) ~ .ud-parca:not([hidden]) { box-shadow: var(--ud-bolme); }
button.ud-parca:active { background-color: var(--ud-basma); }
.ud-parca .ic { width: 16px; height: 16px; flex: none; }
.ud-sayac { gap: 4px; }
.ud-sayac .sinav-ad { font-size: 12px; letter-spacing: .05em; }
.ud-sayac .cd-gun { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.ud-alev.sonuk .ic { color: var(--muted); filter: none; animation: none; }
.ud-alev.sonuk b { color: var(--muted); }
.ud-plan { gap: 6px; padding: 0 14px 0 11px; background: var(--grad-yazi); color: var(--accent-ink); font-size: 13.5px; box-shadow: var(--ud-plan-golge); }
.ud-plan .ic { width: 14px; height: 14px; color: var(--ikon-ic); animation: udYildiz var(--motion-nefes) ease-in-out infinite; }
.ud-plan::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, var(--ud-parilti), transparent); transform: translateX(-120%) skewX(-18deg); animation: udParilti var(--ud-parilti-sure) ease-in-out infinite; pointer-events: none; }
.ud-plan.plus-var { background: var(--ud-altin); color: var(--ud-cta-yazi); }
.ud-plan.plus-var .ic { color: var(--uzeri); }
@keyframes udParilti { 0%, 70% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes udYildiz { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(16deg); } }
.ud-pop b { display: inline-block; animation: udPop var(--ud-pop-sure) var(--ease-spring) 1; }
.ud-pop .ic { animation: udPop var(--ud-pop-sure) var(--ease-spring) 1; }
@keyframes udPop { 0% { transform: scale(1); } 35% { transform: scale(1.5) translateY(-2px); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
@media (max-width: 419px) { :root:not([data-rota="bugun"]) .top .brand { display: none; } :root:not([data-rota="bugun"]) .top-right { justify-content: space-between; } .ud-sayac .cd-gun { display: none; } .ud-sayac { flex: none; } }   /* io242: dar ekranda "YKS 262" — "gün" sığmayınca YKS kesiliyordu */
@media (max-width: 380px) { .ud-parca { padding: 0 9px; } .ud-plan { padding: 0 12px 0 9px; } :root[data-rota="bugun"] .top .brand > span:not(.logo) { display: none; } }
@media (max-width: 340px) { .ud-plan span { display: none; } .ud-plan { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .ud-plan::before, .ud-plan .ic, .ud-pop b, .ud-pop .ic { animation: none; } }

/* --- alev / kalp sayfaları --- */
.ud-sh { display: grid; gap: 14px; padding-bottom: 4px; }
.ud-sh-kahraman { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 18px; background: var(--hero); color: var(--uzeri); }
.ud-sh-kahraman::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle, var(--alev-parla), transparent 65%); opacity: .55; }
.ud-sh-kalp::after { background: radial-gradient(circle, var(--kalp-parla), transparent 65%); }
.ud-sh-buyuk { display: grid; place-items: center; }
.ud-sh-buyuk .ic { width: 64px; height: 64px; color: var(--alev-ates); filter: drop-shadow(0 0 14px var(--alev-parla)); animation: alevYan var(--motion-nefes) ease-in-out infinite; transform-origin: 50% 90%; }
.ud-sh-alev.sonuk .ud-sh-buyuk .ic { color: var(--muted); filter: none; animation: none; }
.ud-sh-sayi { display: block; font-family: var(--display); font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ud-sh-birim { font-size: 15px; font-weight: 700; opacity: .86; }
.ud-sh-durum { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.ud-sh-not { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.ud-sh-not .ic { flex: none; }
.ud-sh-hafta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ud-sh-hafta li { position: relative; display: grid; justify-items: center; gap: 6px; }
.ud-sh-nokta { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); box-shadow: var(--ud-nokta-golge); }
.ud-sh-nokta .ic { width: 20px; height: 20px; color: var(--alev-ates); filter: drop-shadow(0 0 4px var(--alev-parla)); }
.ud-sh-hafta .aktif .ud-sh-nokta { background: var(--tint-warn); }
.ud-sh-hafta .bugun .ud-sh-nokta { outline: 2px solid var(--accent); outline-offset: 2px; }
.ud-sh-hafta .gelecek .ud-sh-nokta { opacity: .45; }
.ud-sh-hafta small { font-size: 12px; font-weight: 700; color: var(--muted); }
.ud-sh-hafta .bugun small { color: var(--ink); }
.ud-sh-satir { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--hat); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.ud-sh-satir span { flex: 1; }
.ud-sh-satir > .ic:first-child { color: var(--kalp); }
.ud-sh-satir > .ic:last-child { color: var(--muted); }
.ud-sh-kalpler { display: flex; gap: 4px; }
.ud-sh-kalpler i { display: grid; }
.ud-sh-kalpler .ic { width: 30px; height: 30px; }
.ud-sh-kalpler .dolu .ic { color: var(--kalp); filter: drop-shadow(0 0 8px var(--kalp-parla)); animation: kalpAt var(--motion-nefes) ease-in-out infinite; }
.ud-sh-kalpler .dolu:nth-child(2) .ic { animation-delay: 180ms; }
.ud-sh-kalpler .dolu:nth-child(3) .ic { animation-delay: 360ms; }
.ud-sh-kalpler .bos .ic { color: color-mix(in srgb, var(--uzeri) 22%, transparent); }
.ud-sh-kalpler .bos .ic path + path { opacity: 0; }
.ud-sh-plus { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--hero); color: var(--uzeri); text-decoration: none; box-shadow: var(--ud-plus-golge); }
.ud-sh-plus-parilti { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; z-index: -1; background: linear-gradient(100deg, transparent, var(--ud-parilti), transparent); opacity: .35; transform: translateX(-120%) skewX(-18deg); animation: udParilti var(--ud-parilti-sure) ease-in-out infinite; }
.ud-sh-plus-ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); }
.ud-sh-plus-ikon .ic { color: var(--ikon-ic); animation: udYildiz var(--motion-nefes) ease-in-out infinite; }
.ud-sh-plus-metin { display: grid; gap: 2px; min-width: 0; }
.ud-sh-plus-metin b { font-size: 15px; }
.ud-sh-plus-metin span { font-size: 13.5px; line-height: 1.35; opacity: .84; }
.ud-sh-plus-cta { display: grid; place-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--ud-cta); color: var(--ud-cta-yazi); font-family: var(--display); font-size: 13.5px; font-weight: 900; white-space: nowrap; }
.ud-sh-plus:active { transform: scale(.985); }
.ud-sh-plus-var { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--tint); color: var(--accent); font-size: 15px; }
@media (max-width: 360px) { .ud-sh-plus { grid-template-columns: auto 1fr; } .ud-sh-plus-cta { grid-column: 1 / -1; } .ud-sh-nokta { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .ud-sh-buyuk .ic, .ud-sh-kalpler .dolu .ic, .ud-sh-plus-parilti, .ud-sh-plus-ikon .ic { animation: none; } }

/* ===================== io95 — PANODA X-RAY VE DNA KARTLARI =====================
   Halka: hata kategorilerinin gerçek dağılımı (SVG dilimleri, renkleri jetonda). Radar: beş boyut.
   Veri yetersizse hayalet çizgi + eşiğe ilerleme. Kartın arkasında konu renginde yumuşak ışık.
   Giriş bir kez (halka döner, radar açılır); radar nefes alır. Azaltılmış harekette durur. */
:root { --zk-acele: rgb(240 69 90); --zk-yorum: rgb(242 123 28); --zk-formul: rgb(245 184 0); --zk-dikkat: rgb(124 92 255); --zk-bilgi: rgb(33 178 107); --zk-mavi-isik: color-mix(in srgb, var(--blue) 28%, transparent); --zk-mor-isik: color-mix(in srgb, var(--accent) 30%, transparent); --zk-alan: color-mix(in srgb, var(--accent) 34%, transparent); --zk-giris-sure: 760ms; }
.zk-kart { transition: transform 200ms var(--ease-flow), border-color 200ms var(--ease-flow); }
.zk-kart:active { transform: scale(.985); }
.zk-kart::before { content: ""; position: absolute; inset: -30% -30% auto auto; width: 90%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle, var(--zk-mavi-isik), transparent 65%); pointer-events: none; }
.zk-dna::before { background: radial-gradient(circle, var(--zk-mor-isik), transparent 65%); }
.zk-kart.bos::before { opacity: .45; }
.zk-bas { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.zk-bas b { white-space: nowrap; }
.zk-gorsel { position: relative; display: grid; place-items: center; height: 96px; margin: 6px 0 4px; }
.zk-halka, .zk-radar { width: 88px; height: 88px; overflow: visible; }
.zk-iz { fill: none; stroke: var(--hat); stroke-width: 11; }
.zk-iz.hayalet { stroke-dasharray: 3 5; }
.zk-dilim { fill: none; stroke-width: 11; stroke-linecap: butt; }
.zk-dilim.zk-acele { stroke: var(--zk-acele); } .zk-dilim.zk-yorum { stroke: var(--zk-yorum); } .zk-dilim.zk-formul { stroke: var(--zk-formul); } .zk-dilim.zk-dikkat { stroke: var(--zk-dikkat); } .zk-dilim.zk-bilgi { stroke: var(--zk-bilgi); }
.zk-dilim.zk-ilerleme { stroke: var(--accent); stroke-linecap: round; }
.zk-merkez { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; line-height: 1.05; pointer-events: none; }
.zk-merkez b { font-family: var(--display); font-size: 15px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zk-merkez b.zk-uzun { font-size: 12px; }
.zk-merkez small { font-size: 12px; font-weight: 700; color: var(--muted); }
.zk-izgara { fill: none; stroke: var(--hat); stroke-width: 1; }
.zk-izgara.hayalet { stroke-dasharray: 3 4; }
.zk-eksen { stroke: var(--hat); stroke-width: 1; }
.zk-alan { fill: var(--zk-alan); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.zk-uc { fill: var(--accent); }
.zk-lejant { display: grid; gap: 2px; margin-top: 6px; }
.zk-lejant > span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); min-width: 0; white-space: nowrap; }
.zk-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zk-lejant b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.zk-nokta { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zk-nokta.zk-g1 { background: var(--accent); } .zk-nokta.zk-g2 { background: var(--zk-bilgi); }
.zk-nokta.zk-acele { background: var(--zk-acele); } .zk-nokta.zk-yorum { background: var(--zk-yorum); } .zk-nokta.zk-formul { background: var(--zk-formul); } .zk-nokta.zk-dikkat { background: var(--zk-dikkat); } .zk-nokta.zk-bilgi { background: var(--zk-bilgi); }
.zk-cubuk { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--hat); overflow: hidden; }
.zk-cubuk i { display: block; height: 100%; border-radius: 999px; background: var(--grad); width: 0; }
.zk-cubuk .zk-dolu-1 { width: 10%; } .zk-cubuk .zk-dolu-2 { width: 20%; } .zk-cubuk .zk-dolu-3 { width: 30%; } .zk-cubuk .zk-dolu-4 { width: 40%; } .zk-cubuk .zk-dolu-5 { width: 50%; }
.zk-cubuk .zk-dolu-6 { width: 60%; } .zk-cubuk .zk-dolu-7 { width: 70%; } .zk-cubuk .zk-dolu-8 { width: 80%; } .zk-cubuk .zk-dolu-9 { width: 90%; } .zk-cubuk .zk-dolu-10 { width: 100%; }
.zk-halka { animation: zkDon var(--zk-giris-sure) var(--ease-spring) both; }
.zk-alan-g { transform-box: view-box; transform-origin: 50% 50%; animation: zkAc var(--zk-giris-sure) var(--ease-spring) both, zkNefes var(--motion-nefes) ease-in-out var(--zk-giris-sure) infinite; }
@keyframes zkDon { from { opacity: 0; transform: rotate(-140deg) scale(.82); } }
@keyframes zkAc { from { opacity: 0; transform: scale(.2); } }
@keyframes zkNefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (max-width: 372px) { .zk-gorsel { height: 88px; } }
@media (prefers-reduced-motion: reduce) { .zk-halka, .zk-alan-g { animation: none; } }

/* ===================== io96 — NETİ HAREKET STİLİ =====================
   22 yeni hareket (maskot.js HAREKETLER), efekt katmanı, bakış takibi (--neti-bx/--neti-by), anten ışığı, jestler.
   Hareket sınıfı .neti üzerindedir; bitince maskot.js kaldırır. */
:root { --neti-kisa: 720ms; --neti-orta: 1150ms; --neti-uzun: 1700ms; --neti-bakis: 240ms; }
.neti.canli { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.neti .bakis { transform: translate(var(--neti-bx, 0px), var(--neti-by, 0px)); transition: transform var(--neti-bakis) var(--ease-flow); }
.neti .ayak { transform-box: fill-box; transform-origin: 50% 100%; }
.neti .golge { transform-box: fill-box; transform-origin: 50% 50%; }
.neti .efekt > * { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; pointer-events: none; }
.neti .anten-isik { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.neti.canli .anten-isik { animation: netiAntenIsik var(--motion-nefes) ease-in-out infinite; }
@keyframes netiAntenIsik { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .55; transform: scale(1.15); } }

/* --- el ve kol hareketleri --- */
.neti.alkis .kol-sol { animation: netiAlkisSol var(--neti-orta) ease-in-out both; }
.neti.alkis .kol-sag { animation: netiAlkisSag var(--neti-orta) ease-in-out both; }
.neti.alkis .govde { animation: netiHop2 var(--neti-orta) ease-in-out both; }
@keyframes netiAlkisSol { 0%, 100% { transform: var(--neti-kol-sol, none); } 15%, 45%, 75% { transform: translate(16px,-4px) rotate(-12deg); } 30%, 60%, 90% { transform: translate(9px,-2px) rotate(-6deg); } }
@keyframes netiAlkisSag { 0%, 100% { transform: rotate(0); } 15%, 45%, 75% { transform: rotate(52deg); } 30%, 60%, 90% { transform: rotate(22deg); } }
.neti.elSalla .kol-sag { animation: netiElSalla var(--neti-orta) ease-in-out both; }
.neti.elSalla .govde { animation: netiEgimSag var(--neti-orta) ease-in-out both; }
@keyframes netiElSalla { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-100deg); } 34% { transform: rotate(-72deg); } 50% { transform: rotate(-104deg); } 66% { transform: rotate(-72deg); } 82% { transform: rotate(-100deg); } }
@keyframes netiEgimSag { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(3deg); } }
.neti.goster .kol-sag { animation: netiGoster var(--neti-orta) var(--ease-spring) both; }
.neti.goster .govde { animation: netiEgimSag var(--neti-orta) ease-in-out both; }
@keyframes netiGoster { 0%, 100% { transform: rotate(0); } 25%, 85% { transform: rotate(-128deg); } 45% { transform: rotate(-118deg); } 60% { transform: rotate(-132deg); } }
.neti.dusun .kol-sol { animation: netiDusunKol var(--neti-orta) ease-in-out both; }
.neti.dusun .govde { animation: netiEgimSol var(--neti-orta) ease-in-out both; }
@keyframes netiDusunKol { 0%, 100% { transform: var(--neti-kol-sol, none); } 25%, 80% { transform: translate(12px,-5px) rotate(-8deg); } 45% { transform: translate(11px,-4px) rotate(-5deg); } 62% { transform: translate(12px,-6px) rotate(-9deg); } }
@keyframes netiEgimSol { 0%, 100% { transform: rotate(0); } 30%, 75% { transform: rotate(-4deg); } }
.neti.yumruk .kol-sag { animation: netiYumruk var(--neti-orta) ease-in-out both; }
.neti.yumruk .govde { animation: netiHop2 var(--neti-orta) ease-in-out both; }
@keyframes netiYumruk { 0%, 100% { transform: rotate(0); } 15%, 45%, 75% { transform: rotate(-150deg); } 30%, 60%, 90% { transform: rotate(-112deg); } }
.neti.esne .kol-sol { animation: netiEsneSol var(--neti-orta) ease-in-out both; }
.neti.esne .kol-sag { animation: netiEsneSag var(--neti-orta) ease-in-out both; }
.neti.esne .govde { animation: netiEsneGovde var(--neti-orta) ease-in-out both; }
@keyframes netiEsneSol { 0%, 100% { transform: var(--neti-kol-sol, none); } 35%, 65% { transform: translate(-3px,-22px) rotate(16deg); } }
@keyframes netiEsneSag { 0%, 100% { transform: rotate(0); } 35%, 65% { transform: rotate(-150deg); } }
@keyframes netiEsneGovde { 0%, 100% { transform: scale(1); } 40%, 60% { transform: scale(.96, 1.07); } }

/* --- gövde hareketleri --- */
.neti.takla .govde { transform-origin: 50% 50%; animation: netiTakla var(--neti-orta) var(--ease-spring) both; }
.neti.takla .golge { animation: netiGolgeUcus var(--neti-orta) ease-in-out both; }
@keyframes netiTakla { 0% { transform: translateY(0) rotate(0); } 18% { transform: translateY(3px) scale(1.06, .9); } 50% { transform: translateY(-28px) rotate(-200deg); } 78% { transform: translateY(-4px) rotate(-360deg); } 90% { transform: translateY(2px) rotate(-360deg) scale(1.05, .93); } 100% { transform: translateY(0) rotate(-360deg); } }
@keyframes netiGolgeUcus { 0%, 100% { transform: scale(1); opacity: .14; } 50% { transform: scale(.55); opacity: .06; } }
.neti.egil .govde { animation: netiEgil var(--neti-orta) ease-in-out both; }
.neti.egil .kol-sol { animation: netiEgilKolSol var(--neti-orta) ease-in-out both; }
.neti.egil .kol-sag { animation: netiEgilKolSag var(--neti-orta) ease-in-out both; }
@keyframes netiEgil { 0%, 100% { transform: rotate(0) translateY(0); } 35%, 65% { transform: rotate(14deg) translateY(4px); } }
@keyframes netiEgilKolSol { 0%, 100% { transform: var(--neti-kol-sol, none); } 35%, 65% { transform: translate(-3px,4px) rotate(-18deg); } }
@keyframes netiEgilKolSag { 0%, 100% { transform: rotate(0); } 35%, 65% { transform: rotate(30deg); } }
.neti.usu .govde { animation: netiUsu var(--neti-orta) linear both; }
.neti.usu .kol-sol { animation: netiSarilSol var(--neti-orta) ease-in-out both; }
.neti.usu .kol-sag { animation: netiSarilSag var(--neti-orta) ease-in-out both; }
@keyframes netiUsu { 0%, 100% { transform: translateX(0); } 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85% { transform: translateX(-1.6px) scale(.98); } 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { transform: translateX(1.6px) scale(.98); } }
@keyframes netiSarilSol { 0%, 100% { transform: var(--neti-kol-sol, none); } 15%, 85% { transform: translate(12px,-1px) rotate(-14deg); } }
@keyframes netiSarilSag { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(46deg); } }
.neti.hop .govde { animation: netiHop2 var(--neti-kisa) ease-in-out both; }
.neti.hop .golge { animation: netiGolgeHop var(--neti-kisa) ease-in-out both; }
@keyframes netiHop2 { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-7px) scale(.98, 1.03); } 40% { transform: translateY(1px) scale(1.04, .95); } 60% { transform: translateY(-5px); } 80% { transform: translateY(1px) scale(1.02, .97); } }
@keyframes netiGolgeHop { 0%, 40%, 80%, 100% { transform: scale(1); } 20%, 60% { transform: scale(.8); } }
.neti.havalan .govde { animation: netiHavalan var(--neti-uzun) ease-in-out both; }
.neti.havalan .golge { animation: netiGolgeUcus var(--neti-uzun) ease-in-out both; }
.neti.havalan .anten-isik { animation: netiAntenYan var(--neti-uzun) ease-in-out both; }
@keyframes netiHavalan { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-14px); } 45% { transform: translateY(-10px) rotate(-2deg); } 65% { transform: translateY(-15px) rotate(2deg); } 85% { transform: translateY(-4px); } }
@keyframes netiAntenYan { 0%, 100% { opacity: 0; } 20%, 80% { opacity: .9; transform: scale(1.3); } }
.neti.irkil .govde { animation: netiIrkil var(--neti-kisa) var(--ease-spring) both; }
.neti.irkil .kol-sol { animation: netiIrkilSol var(--neti-kisa) ease-out both; }
.neti.irkil .kol-sag { animation: netiIrkilSag var(--neti-kisa) ease-out both; }
.neti.irkil .ef-unlem { animation: netiUnlem var(--neti-kisa) ease-out both; }
@keyframes netiIrkil { 0% { transform: translateY(0); } 18% { transform: translateY(-10px) scale(1.05, .95); } 45% { transform: translateY(0) scale(1.06, .9); } 70% { transform: scale(.97, 1.04); } 100% { transform: none; } }
@keyframes netiIrkilSol { 0%, 100% { transform: var(--neti-kol-sol, none); } 20%, 55% { transform: translate(-4px,-12px) rotate(-14deg); } }
@keyframes netiIrkilSag { 0%, 100% { transform: rotate(0); } 20%, 55% { transform: rotate(-42deg); } }
@keyframes netiUnlem { 0%, 100% { opacity: 0; transform: translateY(4px) scale(.6); } 20%, 70% { opacity: 1; transform: translateY(0) scale(1); } }
.neti.sallan .govde { animation: netiSallan var(--neti-uzun) ease-in-out both; }
@keyframes netiSallan { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

/* --- ayaklar --- */
.neti.kos .ayak-sol { animation: netiAyakA var(--neti-orta) ease-in-out both; }
.neti.kos .ayak-sag { animation: netiAyakB var(--neti-orta) ease-in-out both; }
.neti.kos .kol-sol { animation: netiKolKosA var(--neti-orta) ease-in-out both; }
.neti.kos .kol-sag { animation: netiKolKosB var(--neti-orta) ease-in-out both; }
.neti.kos .govde { animation: netiKosGovde var(--neti-orta) ease-in-out both; }
@keyframes netiAyakA { 0%, 25%, 50%, 75%, 100% { transform: translateY(0); } 12%, 62% { transform: translateY(-6px) rotate(-8deg); } }
@keyframes netiAyakB { 0%, 25%, 50%, 75%, 100% { transform: translateY(0); } 37%, 87% { transform: translateY(-6px) rotate(8deg); } }
@keyframes netiKolKosA { 0%, 50%, 100% { transform: var(--neti-kol-sol, none); } 25%, 75% { transform: translate(-2px,3px) rotate(-10deg); } 12%, 62% { transform: translate(2px,-4px) rotate(10deg); } }
@keyframes netiKolKosB { 0%, 50%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-28deg); } 12%, 62% { transform: rotate(24deg); } }
@keyframes netiKosGovde { 0%, 25%, 50%, 75%, 100% { transform: translateY(0); } 12%, 37%, 62%, 87% { transform: translateY(-3px); } }
.neti.tepin .ayak-sol { animation: netiTepinA var(--neti-orta) linear both; }
.neti.tepin .ayak-sag { animation: netiTepinB var(--neti-orta) linear both; }
.neti.tepin .govde { animation: netiTepinGovde var(--neti-orta) ease-in-out both; }
@keyframes netiTepinA { 0%, 16%, 33%, 50%, 66%, 83%, 100% { transform: translateY(0); } 8%, 41%, 75% { transform: translateY(-7px); } }
@keyframes netiTepinB { 0%, 16%, 33%, 50%, 66%, 83%, 100% { transform: translateY(0); } 25%, 58%, 91% { transform: translateY(-7px); } }
@keyframes netiTepinGovde { 0%, 33%, 66%, 100% { transform: translateY(0); } 16%, 50%, 83% { transform: translateY(-5px) rotate(-2deg); } }

/* --- baş (yüz kabı) --- */
.neti.bak .bakis { animation: netiBak var(--neti-orta) ease-in-out both; }
.neti.bak .govde { animation: netiBakGovde var(--neti-orta) ease-in-out both; }
@keyframes netiBak { 0%, 100% { transform: translate(0, 0); } 20%, 40% { transform: translate(-5px, -1px); } 60%, 80% { transform: translate(5px, -1px); } }
@keyframes netiBakGovde { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2deg); } 70% { transform: rotate(2deg); } }
.neti.evet .bakis { animation: netiEvet var(--neti-kisa) ease-in-out both; }
.neti.evet .govde { animation: netiEvetGovde var(--neti-kisa) ease-in-out both; }
@keyframes netiEvet { 0%, 40%, 80%, 100% { transform: translateY(0); } 20%, 60% { transform: translateY(4px); } }
@keyframes netiEvetGovde { 0%, 40%, 80%, 100% { transform: translateY(0); } 20%, 60% { transform: translateY(1.5px); } }
.neti.hayir .bakis { animation: netiHayir var(--neti-kisa) ease-in-out both; }
@keyframes netiHayir { 0%, 100% { transform: translateX(0); } 15%, 55% { transform: translateX(-5px); } 35%, 75% { transform: translateX(5px); } }

/* --- efektler --- */
.neti.kalpler .ef-kalp { animation: netiKalpUc var(--neti-uzun) ease-out both; }
.neti.kalpler .ef-kalp.ef-2 { animation-delay: 220ms; } .neti.kalpler .ef-kalp.ef-3 { animation-delay: 440ms; }
.neti.kalpler .govde { animation: netiSallan var(--neti-uzun) ease-in-out both; }
@keyframes netiKalpUc { 0% { opacity: 0; transform: translateY(8px) scale(.4); } 25% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-22px) scale(.9); } }
.neti.yildizlar .ef-yildiz, .neti.kutla .ef-yildiz { animation: netiYildiz var(--neti-orta) ease-out both; }
.neti.yildizlar .ef-yildiz.ef-2, .neti.kutla .ef-yildiz.ef-2 { animation-delay: 120ms; } .neti.yildizlar .ef-yildiz.ef-3, .neti.kutla .ef-yildiz.ef-3 { animation-delay: 240ms; } .neti.yildizlar .ef-yildiz.ef-4, .neti.kutla .ef-yildiz.ef-4 { animation-delay: 360ms; }
.neti.yildizlar .govde { animation: netiHop2 var(--neti-orta) ease-in-out both; }
@keyframes netiYildiz { 0% { opacity: 0; transform: scale(0) rotate(0); } 35% { opacity: 1; transform: scale(1.25) rotate(60deg); } 100% { opacity: 0; transform: scale(.5) rotate(120deg); } }
.neti.kutla .ef-konfeti { animation: netiKonfeti var(--neti-uzun) ease-out both; }
.neti.kutla .ef-konfeti.ef-2 { animation-delay: 90ms; } .neti.kutla .ef-konfeti.ef-3 { animation-delay: 180ms; } .neti.kutla .ef-konfeti.ef-4 { animation-delay: 270ms; }
.neti.kutla .kol-sol { animation: netiKutlaSol var(--neti-uzun) ease-in-out both; }
.neti.kutla .kol-sag { animation: netiKutlaSag var(--neti-uzun) ease-in-out both; }
.neti.kutla .govde { animation: netiKutlaGovde var(--neti-uzun) var(--ease-spring) both; }
.neti.kutla .golge { animation: netiGolgeHop var(--neti-uzun) ease-in-out both; }
@keyframes netiKonfeti { 0% { opacity: 0; transform: translateY(6px) scale(.3); } 20% { opacity: 1; transform: translateY(-8px) scale(1.2); } 100% { opacity: 0; transform: translateY(18px) rotate(160deg) scale(.8); } }
@keyframes netiKutlaSol { 0%, 100% { transform: var(--neti-kol-sol, none); } 15%, 85% { transform: translate(-2px,-20px) rotate(14deg); } 35%, 65% { transform: translate(-1px,-15px) rotate(8deg); } 50% { transform: translate(-2px,-21px) rotate(16deg); } }
@keyframes netiKutlaSag { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(-148deg); } 35%, 65% { transform: rotate(-128deg); } 50% { transform: rotate(-150deg); } }
@keyframes netiKutlaGovde { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(2px) scale(1.05, .93); } 32% { transform: translateY(-16px); } 50% { transform: translateY(1px) scale(1.04, .95); } 68% { transform: translateY(-12px); } 85% { transform: translateY(1px); } }
.neti.terle .ef-ter { animation: netiTer var(--neti-orta) ease-in both; }
.neti.terle .govde { animation: netiUsu var(--neti-orta) linear both; }
@keyframes netiTer { 0% { opacity: 0; transform: translateY(-4px) scale(.6); } 25% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(16px) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .neti .bakis, .neti .kol, .neti .ayak, .neti .govde, .neti .golge, .neti .anten-isik, .neti .efekt > * { animation: none; transition: none; }
  .neti .bakis { transform: none; }
}

/* ===================== io97 — KART YÖNLERİ =====================
   Öğreticide "Yön değişti" notu (eski yönleri görmüş öğrenciye bir kez). */
.kt-og-yeni { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--tint); color: var(--ink); font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.kt-og-yeni .ic { color: var(--accent); flex: none; }

/* ===================== io99 — OTOMATİK DÖNÜŞ =====================
   Test/ders sonucu: "Ana sayfaya dön" düğmesinin arkası soldan sağa dolar (JS scaleX), kalan saniye sağda.
   Durunca dolgu ve saniye kaybolur, "Burada kal" gizlenir; düğme sıradan birincil düğme olarak kalır. */
.oto-donus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; width: 100%; margin-top: 10px; }
.oto-dugme { position: relative; overflow: hidden; isolation: isolate; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; flex-basis: 100%; text-decoration: none; }
.oto-dolgu { position: absolute; inset: 0; z-index: -1; transform-origin: 0 50%; transform: scaleX(0); background: color-mix(in srgb, currentColor 20%, transparent); pointer-events: none; }
.oto-sn { min-width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, transparent); font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.oto-kal { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.oto-kal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oto-donus.durdu .oto-dolgu, .oto-donus.durdu .oto-sn, .oto-donus.durdu .oto-kal { display: none; }
.oto-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-bitti { display: grid; gap: 4px; }
.tk-bitti > b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.tk-bitti > b .ic { color: var(--good); }

/* ===================== io100 — NEREYE GİDEBİLİRSİN? SAHNESİ =====================
   Tek koreografi (2,7 sn), sonra sakin canlılık. Gecikmeler ve süreler jetonda; yıldızın SMIL zamanı hedef-ekrani.js YILDIZ
   ile aynı (0,75 sn + 1,3 sn, .2 .7 .2 1). .hd-sakin / .hd-az: hiçbir şey hareket etmez, her şey son hâlinde. */
:root { --hd-ciz-kisa: 900ms; --hd-ciz-uzun: 1300ms; --hd-yumusak: cubic-bezier(.2, .7, .2, 1); --hd-aurora: 9000ms; --hd-nabiz: 1800ms; --hd-akis: 1100ms; --hd-isik: 3600ms;
  --hd-gec-okuma: 250ms; --hd-gec-tekrar: 750ms; --hd-gec-uc-okuma: 1150ms; --hd-gec-alan: 1500ms; --hd-gec-son: 2050ms; --hd-gec-fark: 2150ms; --hd-gec-lejant: 2250ms; --hd-gec-dongu: 2400ms; }
.hd-grafik-ekran { position: relative; }
.hd-grafik-ekran > :not(.hd-yuzen) { position: relative; z-index: 1; }
@keyframes hdYukari { from { opacity: 0; transform: translateY(14px); } }
@keyframes hdBelirTam { from { opacity: 0; } to { opacity: 1; } }
@keyframes hdPop { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hdAurora { to { transform: translate(-8%, 6%) rotate(10deg) scale(1.08); } }
@keyframes hdNabiz { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes hdYildizGor { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hdAkis { to { background-position: 24px 0; } }
@keyframes hdIkonIsik { 0%, 70%, 100% { box-shadow: none; transform: none; } 20% { box-shadow: var(--glow-focus); transform: translateY(-3px); } }
.hd-rozet { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; animation: hdYukari 320ms var(--hd-yumusak) both; }
.hd-grafik-ekran .hd-baslik { animation: hdYukari 320ms var(--hd-yumusak) 60ms both; }
.hd-grafik-ekran .hd-alt { animation: hdYukari 320ms var(--hd-yumusak) 120ms both; }
.hd-grafik-ekran .hd-grafik { position: relative; overflow: hidden; isolation: isolate; border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); animation: hdYukari 320ms var(--hd-yumusak) 160ms both; }
.hd-grafik-ekran .hd-grafik::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; background: radial-gradient(34% 34% at 78% 22%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), radial-gradient(30% 30% at 18% 82%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%); animation: hdAurora var(--hd-aurora) ease-in-out infinite alternate; }
.hd-grafik-ekran .hd-grafik svg { max-width: 100%; }
.hd-izgara line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.hd-grafik-ekran .hd-izgara { animation: hdBelirTam 320ms ease-out var(--hd-gec-okuma) both; }
.hd-dur-bas { stop-color: var(--accent-2); } .hd-dur-orta { stop-color: var(--accent); } .hd-dur-son { stop-color: var(--ikon-ic); }
.hd-alan-ust { stop-color: var(--accent); stop-opacity: .32; } .hd-alan-alt { stop-color: var(--accent); stop-opacity: 0; }
.hd-alan { opacity: 0; animation: hdBelirTam 640ms ease-out var(--hd-gec-alan) both; }
.hd-grafik-ekran path.hd-egri-okuma { animation: hdCiz var(--hd-ciz-kisa) var(--hd-yumusak) var(--hd-gec-okuma) both; }
.hd-grafik-ekran path.hd-egri-tekrar { stroke: url(#hdCizgi); stroke-width: 5; animation: hdCiz var(--hd-ciz-uzun) var(--hd-yumusak) var(--hd-gec-tekrar) both; }
.hd-egri-isik { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; opacity: .5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hdCiz var(--hd-ciz-uzun) var(--hd-yumusak) var(--hd-gec-tekrar) both; }
.hd-fark { opacity: 0; animation: hdBelirTam 320ms ease-out var(--hd-gec-fark) both; }
.hd-fark line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.hd-fark text { font-size: 12px; font-weight: 800; fill: var(--accent); }
.hd-uc { transform-box: fill-box; transform-origin: center; animation: hdPop 320ms var(--ease-spring) var(--hd-gec-uc-okuma) both; }
.hd-uc-tekrar { animation-delay: var(--hd-gec-son); }
.hd-uc-okuma circle { fill: var(--muted); }
.hd-uc-nokta { fill: var(--ikon-ic); stroke: var(--surface); stroke-width: 2; }
.hd-nabiz { fill: var(--ikon-ic); transform-box: fill-box; transform-origin: center; opacity: 0; animation: hdNabiz var(--hd-nabiz) ease-out var(--hd-gec-son) infinite; }
.hd-yildiz { opacity: 0; animation: hdYildizGor var(--hd-ciz-uzun) linear var(--hd-gec-tekrar) both; pointer-events: none; }
.hd-yildiz-isik { fill: var(--accent); opacity: .35; }
.hd-yildiz-oz { fill: var(--uzeri); }
.hd-grafik-ekran .hd-lejant { gap: 8px; }
.hd-grafik-ekran .hd-lejant li { padding: 8px 10px; border-radius: 12px; background: var(--netci-bg); border: 1px solid var(--line); animation: hdYukari 320ms var(--hd-yumusak) var(--hd-gec-lejant) both; }
.hd-grafik-ekran .hd-lejant li.hd-lejant-tekrar { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--tint); }
.hd-grafik-ekran .hd-lejant li.hd-lejant-okuma { color: var(--muted); animation-delay: calc(var(--hd-gec-lejant) + 100ms); }
.hd-grafik-ekran .hd-lejant i.hd-egri-tekrar { background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--ikon-ic)); }
.hd-dongu { display: grid; gap: 10px; margin-top: 16px; }
.hd-dongu-baslik { margin: 0; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--muted); animation: hdBelirTam 320ms ease-out var(--hd-gec-dongu) both; }
.hd-dongu-adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.hd-dongu-adim { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 13.5px; animation: hdPop 320ms var(--ease-spring) var(--hd-gec-dongu) both; }
.hd-dongu-adim b { font-weight: 800; }
.hd-dongu-2 { animation-delay: calc(var(--hd-gec-dongu) + 120ms); } .hd-dongu-3 { animation-delay: calc(var(--hd-gec-dongu) + 240ms); }
.hd-dongu-ikon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--tint); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); animation: hdIkonIsik var(--hd-isik) ease-in-out calc(var(--hd-gec-dongu) + 400ms) infinite; }
.hd-dongu-2 .hd-dongu-ikon { animation-delay: calc(var(--hd-gec-dongu) + 1600ms); } .hd-dongu-3 .hd-dongu-ikon { animation-delay: calc(var(--hd-gec-dongu) + 2800ms); }
.hd-dongu-adim:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: calc(50% + 30px); right: calc(-50% + 30px); height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); background-size: 24px 2px; opacity: .7; animation: hdAkis var(--hd-akis) linear infinite; }
/* sakin: azaltılmış hareket ya da reduced katman — her şey son hâlinde, hareketsiz */
.hd-sakin .hd-rozet, .hd-sakin .hd-baslik, .hd-sakin .hd-alt, .hd-sakin .hd-grafik, .hd-sakin .hd-grafik::before, .hd-sakin .hd-izgara, .hd-sakin .hd-lejant li, .hd-sakin .hd-dongu-baslik, .hd-sakin .hd-dongu-adim, .hd-sakin .hd-dongu-ikon, .hd-sakin .hd-dongu-adim::after, .hd-sakin .hd-uc { animation: none; }
.hd-grafik-ekran .hd-az path.hd-egri, .hd-grafik-ekran .hd-az .hd-egri-isik { animation: none; stroke-dashoffset: 0; }
.hd-grafik-ekran .hd-az .hd-alan, .hd-grafik-ekran .hd-az .hd-fark { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hd-grafik-ekran .hd-grafik::before, .hd-dongu-ikon, .hd-dongu-adim::after, .hd-nabiz { animation: none; } }


/* ===================== io104 — GÖVDE KİLİDİ =====================
   Alt sayfa açıkken sayfa kaymaz (sayaçlı sınıf, ui.js). Satır içi overflow kullanılmaz. */
body.sheet-acik { overflow: hidden; }

/* ===================== io106 — ÜNİTE KUPASI SINAVI =====================
   Kupa sınavı üst satırı, giriş şeridi ("12 soru · 3 dersten karışık · Kupa için 9 doğru"), sonuç sahnesi (kupa + ışık),
   ders ders kırılım. Hex yok (v53io sonrası kuralı): altın tonları --gold / --gold-k ve color-mix; yalnız transform/opacity
   animasyonu; azaltılmış harekette durur. Haritadaki kupa/kahraman stili yol/harita-v2.css'te. */
:root { --kp-sure-kupa: 900ms; --kp-sure-isik: 2600ms; }
.kp-svg .kp-kulp { stroke: color-mix(in srgb, var(--gold) 72%, black); }
.kp-svg .kp-govde, .kp-svg .kp-taban { fill: var(--gold); }
.kp-svg .kp-ayak, .kp-svg .kp-kaide { fill: color-mix(in srgb, var(--gold) 72%, black); }
.kp-svg .kp-parilti { stroke: white; opacity: .55; }
.kp-svg .kp-yildiz { fill: white; opacity: 0; }
.kp-svg.kp-kusursuz .kp-yildiz { opacity: .95; }
.kp-svg.kp-sonuk .kp-kulp { stroke: color-mix(in srgb, var(--netci-muted) 55%, transparent); }
.kp-svg.kp-sonuk .kp-govde, .kp-svg.kp-sonuk .kp-taban { fill: color-mix(in srgb, var(--netci-muted) 30%, var(--netci-surface)); }
.kp-svg.kp-sonuk .kp-ayak, .kp-svg.kp-sonuk .kp-kaide { fill: color-mix(in srgb, var(--netci-muted) 55%, transparent); }
.kp-svg.kp-sonuk .kp-parilti { opacity: .2; }
.kp-ust { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.kp-geri { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--netci-text); }
.kp-ust-metin { min-width: 0; display: grid; gap: 2px; }
.kp-ust-metin .eyebrow { margin: 0; }
.kp-baslik { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.kp-giris { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 18px; background: color-mix(in srgb, var(--gold) 14%, var(--netci-surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.kp-giris-kupa { flex: none; display: grid; }
.kp-giris-metin { margin: 0; display: grid; gap: 2px; font-size: 15px; line-height: 1.3; }
.kp-giris-metin span { font-size: 13.5px; color: var(--netci-muted); }
.kp-giris-metin span b { color: var(--netci-text); }
.kp-sonuc { display: grid; justify-items: center; gap: 6px; padding: 0 0 8px; text-align: center; }
.kp-sonuc .eyebrow { margin: 2px 0 0; }
.kp-sonuc-sahne { position: relative; width: 168px; height: 136px; display: grid; place-items: center; }
.kp-sonuc-isik { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 45%, transparent), transparent); opacity: .3; }
.kp-sonuc.gecti .kp-sonuc-isik { opacity: 1; animation: kpIsik var(--kp-sure-isik) ease-in-out infinite; }
.kp-sonuc-sahne .kp-svg { position: relative; animation: kpKupa var(--kp-sure-kupa) var(--ease-spring) both; }
.kp-sonuc-baslik { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; }
.kp-sonuc.gecti .kp-sonuc-baslik { color: var(--gold-yazi); }
.kp-sonuc-sayi { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; }
.kp-sonuc-sayi b { font-family: var(--display); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kp-sonuc-sayi span { font-size: 15px; font-weight: 700; color: var(--netci-muted); }
.kp-rozet { align-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--gold); color: color-mix(in srgb, var(--gold) 22%, black); font-style: normal; font-size: 12px; font-weight: 800; }
.kp-sonuc-alt { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--netci-muted); }
.kp-kirilim { width: 100%; display: grid; gap: 6px; margin-top: 8px; text-align: left; }
.kp-kirilim .eyebrow { margin: 0 0 2px; }
.kp-kir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 14px; background: var(--netci-surface); border: 1px solid var(--netci-border); color: var(--netci-text); text-decoration: none; }
.kp-kir-ad { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.3; }   /* aynı önekli ders adları (…Önermeler 1/2/3) sonda ayrışıyor: kesme yok, iki satır */
.kp-kir-nokta { display: flex; gap: 3px; }
.kp-kir-nokta i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--netci-muted) 35%, transparent); }
.kp-kir-nokta i.d { background: var(--netci-success); }
.kp-kir b { font-size: 15px; font-variant-numeric: tabular-nums; }
.kp-kir.zayif { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.kp-kir.zayif b { color: var(--gold-yazi); }
.kp-kilitli { display: grid; justify-items: center; gap: 8px; text-align: center; }
@keyframes kpKupa { 0% { transform: scale(.5) translateY(18px); opacity: 0; } 55% { transform: scale(1.12) rotate(-6deg); opacity: 1; } 80% { transform: scale(.97) rotate(3deg); } 100% { transform: none; opacity: 1; } }
@keyframes kpIsik { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .kp-sonuc-isik, .kp-sonuc.gecti .kp-sonuc-isik, .kp-sonuc-sahne .kp-svg { animation: none; } }
:root[data-tier="reduced"] .kp-sonuc.gecti .kp-sonuc-isik, :root[data-tier="reduced"] .kp-sonuc-sahne .kp-svg { animation: none; }

:root[data-rota="surus"] #view > :not(#rdOyun) { margin-inline: 16px; }   /* lobi kartları ekran kenarına yapışıyordu (oyun için sıfırlanan görünüm dolgusu lobiye de uygulanıyordu) */

/* ===================== io109 — kurucu düzeltmeleri =====================
   X-Ray/DNA veri azken ortada kilit (sayı yok); Plus yapışkan düğme bölümle kaynaşır. Hex yok. */
.zk-kilit { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* ============================================================================
   v48ab · DERS OKUMA — KUTU YIĞINI DEĞİL, OKUNUR BİR SAYFA (ab25)

   On iki adımın on ikisi de aynı çerçeveli kutuydu; hiyerarşi düzdü. Artık
   ANLATIM bölümleri çerçevesiz (yazı doğrudan sayfada, omurga çizgisi tek
   düzenleyici); çerçeve yalnız gerçekten ayrı bir nesne olan bölümlerde:
   giriş hedefleri, formül, şema, işlenmiş örnek, hızlı kontrol, sık hata,
   sınav tuzağı, çapa, özet.

   Yeni renk / yarıçap / gölge jetonu YOK — yalnız var() ve merdiven değerleri.
   ============================================================================ */
.og-adim.og-duz .og-kart { border-color: transparent; background: none; box-shadow: none; padding: 2px 0 0; }
.og-adim.og-duz { margin-bottom: 24px; }
/* Kutudan çıkan başlık kendi ağırlığını taşımalı: bir basamak yukarı. */
.og-adim.og-duz .og-h { font-size: 20px; }
/* Bölüm etiketi yazının önüne geçmesin (çerçevesizken daha yakın duruyor). */
.og-adim.og-duz .og-tur-ad { opacity: .72; }
/* Şimdiki adım: çerçevesiz bölümde halka çizilmez — düğüm ışığı ve ŞİMDİ rozeti yeter. */
.og-adim.simdi.og-duz .og-kart { border-color: transparent; box-shadow: none; }

/* ============================================================================
   v49ab · DERSTE NETİ VE BÖLÜM EMOJİSİ (ab26)

   İçerikte 2.856 Neti repliği ve 8.196 bölüm emojisi yazılıydı; kaydırmalı ders
   hiçbirini çizmiyordu. Kart destesindeki biçimin aynısı (ls-emoji /
   ls-neti-laf) buraya taşındı ki iki ekran aynı dili konuşsun.
   ============================================================================ */
.og-emoji { font-size: 34px; line-height: 1; margin: 2px 0 6px; }
.og-neti-laf { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--tint); border: 1px solid var(--hat); font-size: 15px; line-height: 1.45; }
.og-neti-laf b { color: var(--accent-2); }
/* Çerçevesiz bölümde balon tek vurgu olduğu için biraz daha nefes alsın. */
.og-adim.og-duz .og-neti-laf { margin-top: 12px; }

/* İlerleme hissi: bir adım tamamlanınca düğüm kısa bir "pop" yapar. */
@keyframes ogDugumPop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.og-adim.tamam .og-dugum { animation: ogDugumPop 320ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .og-adim.tamam .og-dugum { animation: none; } }

/* ===================== v61io: kanıt önceliği (io127) — Gelişim'de akademik kanıt satırları ve hafıza cümleleri =====================
   Kural: bu blok SAYI göstermez, CÜMLE gösterir. Sayaç kartları (.gl-sayilar) altta ikincil kalır.
   Renkler yalnız jetondan; "iyi/kötü" rengi YOK — gelişme iddiası metinden gelir, renkten değil. */
.gl-kanit { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.gl-kanit > li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hat); }
.gl-kanit b { font-weight: 700; font-size: 15px; line-height: 1.35; }
.gl-kanit small { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gl-hafiza { margin-top: -10px; }
.gl-hafiza-satir { margin: 0 0 6px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.gl-hafiza-satir:last-child { margin-bottom: 0; }

/* io128: Bugün — günün görevi tamamlandı satırı ve tek hafıza cümlesi. Kutlama abartısı yok: tek satır, jeton rengi. */
.ev-gorev-bitti { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 15px; color: var(--good); }
.ev-hafiza { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* ============================================================================
   v62io · VİTRİN: KİLİTLİ DERS (io132)

   Bu kurallar önce kurs.css'e yazılmıştı ve ekran ÇIPLAK çiziliyordu: kilitli ders
   ekranını akademi.js çiziyor; adresten doğrudan girildiğinde kurs.css hiç
   yüklenmiyor. Kurs sayfasından geçince stil vardı, doğrudan girince yoktu —
   tarayıcıda açık temada yakalandı. Bu yüzden genel sayfaya taşındı.
   ============================================================================ */
/* Kaynak kurallar (ui-ux-pro-max): `empty-nav-state` (nedenini söyle, gizleme),
   `disabled-states` (azaltılmış vurgu + anlamsal öznitelik), pro-rules "Disabled
   state clarity" (tıklanır GÖRÜNÜP hiçbir şey yapmayan denetim olmaz) ve
   "State contrast parity" (durumlar İKİ temada da ayırt edilebilir).
   Yazı basamağı 12/13.5/15/16/20/26, yarıçap var(--radius-*) — stil kapısı. */
.vt-kilit { display: grid; gap: 12px; min-width: 0; }
.vt-kilit > * { min-width: 0; }
.vt-rozet { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.vt-baslik { font-size: 20px; line-height: 1.2; margin: 0; }
.vt-baslik:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.vt-aciklama { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.vt-acik { border-top: 1px solid var(--line); padding-top: 12px; }
.vt-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.vt-liste a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: 12px; background: var(--soft); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700; min-width: 0; }
.vt-liste a span { min-width: 0; overflow-wrap: anywhere; }
.vt-liste a:hover { background: var(--line); }
.vt-liste a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vt-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.vt-eylem .btn { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }

/* Liste/harita içindeki kilitli satır: TIKLANIR GÖRÜNMEZ.
   Saydamlık 0.55 — Material'ın 0.38–0.5 aralığının üst ucu; koyu temada 0.38
   okunabilirlik eşiğinin altına düşüyordu (kontrast parite kuralı). */
.vt-kilitli { opacity: .55; cursor: not-allowed; }
.vt-kilitli, .vt-kilitli * { pointer-events: none; }
.vt-kilitli .vt-etiket { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 800; }

/* v63io (io154): Kartlar — kısa ekranda (yükseklik < 760 px) alt ipucu gizlenir; beş şıklı YKS kartında
   "cevapla, sonra kaydır" yazısı E şıkkının üstüne biniyordu. Kural "?" düğmesinde ve ilk rehberde duruyor. */
@media (max-height: 759px) { .kt-alt-ipucu { display: none; } }

/* v64io (io159): yapay zekâ izni tabakası — düğmeler alt sekme çubuğunun üstüne binmesin. */
.ai-izin { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.ai-izin-ayrinti summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.ai-izin-ayrinti[open] summary { margin-bottom: 4px; }

/* v65io (io160): kayıt sonu plan bekleme çubuğu — yüzde + değişen cümle. */
.hd-bar { margin: 14px auto 0; width: min(280px, 78%); height: 8px; border-radius: 999px; background: var(--hat); overflow: hidden; }
.hd-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-k, var(--accent))); transition: width 320ms linear; }
.hd-bar-alt { margin: 8px auto 0; width: min(280px, 78%); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hd-soz { font-size: 13.5px; color: var(--ink-2); }
.hd-yuzde { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .hd-bar > i { transition: none; } }
[data-tier="reduced"] .hd-bar > i { transition: none; }

/* v66io (io163): oyun seçim ekranı oyunun kapağı üzerinde. Görsel süs; okunabilirlik koyu perdeyle sağlanır. */
.ob-sahne { position: relative; z-index: 0; }
.ob-arka { position: fixed; inset: 0; z-index: -1; background-image: var(--ob-gorsel); background-size: cover; background-position: 62% 45%; }
.ob-arka::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 28, .52) 0%, rgba(10, 8, 28, .78) 45%, rgba(10, 8, 28, .92) 100%); }
@media (min-width: 640px) { .ob-arka { background-image: var(--ob-gorsel-hd); } }
.ob-sahne .ob-baslik, .ob-sahne .eyebrow, .ob-sahne .ob-zor-bas b, .ob-sahne .ob-zor-ad, .ob-sahne .ob-metin b { color: rgba(255, 255, 255, .96); }
.ob-sahne .ob-zor-alt, .ob-sahne .ob-metin span, .ob-sahne .ob-zor-etiket button { color: rgba(255, 255, 255, .76); }
.ob-sahne .ob-geri { color: rgba(255, 255, 255, .96); background: rgba(255, 255, 255, .14); }
.ob-sahne .card, .ob-sahne .ob-satir, .ob-sahne .ob-panel { background: rgba(18, 14, 42, .58); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ob-sahne .ob-satir:disabled { opacity: .45; }
.ob-sahne .ob-ik, .ob-sahne .ob-ok { color: rgba(255, 255, 255, .88); }
.ob-sahne .ob-cip, .ob-sahne .ob-konu, .ob-sahne .ob-ara { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .94); }
.ob-sahne .ob-konu span, .ob-sahne .ob-ara::placeholder { color: rgba(255, 255, 255, .72); }
[data-tier="reduced"] .ob-sahne .card, [data-tier="reduced"] .ob-sahne .ob-satir, [data-tier="reduced"] .ob-sahne .ob-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18, 14, 42, .82); }

/* v67io (io165): oyun içi soru kutusu ve Formula Drive duraklatma perdesi. Oyunun üstünde, oyunun dilinde. */
.oy-onay { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.oy-onay-perde { position: absolute; inset: 0; background: rgba(6, 8, 18, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.oy-onay-kutu { position: relative; width: min(340px, 92%); padding: 20px; border-radius: 24px; text-align: center;
  background: rgba(22, 18, 48, .92); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 18px 50px rgba(4, 2, 20, .5); color: rgba(255, 255, 255, .94); }
.oy-onay-kutu b { display: block; font-family: var(--display); font-size: 20px; }
.oy-onay-kutu p { margin: 8px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .74); }
.oy-onay-dugmeler { display: flex; gap: 10px; margin-top: 16px; }
.oy-onay-dugmeler button { flex: 1; min-height: 46px; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, .2); }
.oy-onay-hayir { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .96); }
.oy-onay-evet { background: var(--accent); border-color: transparent; color: var(--accent-ink, rgba(255, 255, 255, .98)); }
.oy-onay-dugmeler button:active { transform: translateY(1px); }
.oy-durak { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: rgba(6, 8, 16, .74); color: rgba(255, 255, 255, .95); text-align: center; }
.oy-durak b { font-family: var(--display); font-size: 20px; }
.oy-durak span { font-size: 13.5px; color: rgba(255, 255, 255, .72); }

/* v68io (io166): Hesap kimlik satırı — "Düzenle" düğmesi ad sütununu 63 px'e sıkıştırıyordu (ad ortadan bölünüyordu).
   Ad sütunu en az 140 px ister, düğme büyümez; 380 px altı ekranda düğme alta geçer ve tam genişlik olur. */
.pf-kimlik .row.nowrap { flex-wrap: wrap; row-gap: 10px; }
.pf-kimlik .row.nowrap > div { flex: 1 1 140px; min-width: 0; }
.pf-kimlik .row.nowrap > .btn { flex: 0 0 auto; }
@media (max-width: 380px) {
  .pf-kimlik .row.nowrap > .btn { order: 3; width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════
   v70io · PLAN KURULUM ANİMASYONU (io186) — Neti çevresinde yüzdeyle dolan halka + parıltı, "Haftan" panosu (7 gün × 3 blok,
   eşik geçtikçe oturur, tarama ışığı), cümle geçişi, %100'de dalga + konfeti. Azaltılmış hareket: hepsi durağan.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.hd-canli { gap: 12px; padding-top: 12px; }
.hd-sahne { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.hd-sahne .hd-neti { width: 180px; height: 180px; }
.hd-parilti { position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 68%); animation: hdParilti 2400ms ease-in-out infinite; pointer-events: none; }
@keyframes hdParilti { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } }
.hd-halka { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.hd-halka circle { fill: none; stroke-width: 7; }
.hd-durak-1 { stop-color: var(--accent); } .hd-durak-2 { stop-color: var(--accent-2, var(--accent)); }   /* renk CSS'te: Safari özellikte var() okumayabilir */
.hd-halka-iz { stroke: var(--hat); }
.hd-halka-dolu { stroke: url(#hdHalkaRenk); stroke-linecap: round; transition: stroke-dasharray 320ms ease-out; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent)); }
.hd-bitti .hd-halka-dolu { animation: hdHalkaParla 900ms ease-out 1; }
@keyframes hdHalkaParla { 0% { stroke-width: 7; } 40% { stroke-width: 11; } 100% { stroke-width: 7; } }

/* "Haftan" panosu */
.hd-hafta { position: relative; width: min(320px, 92%); display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 10px 10px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hat); overflow: hidden; }
.hd-hafta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 14%, transparent), transparent); animation: hdTarama 1800ms ease-in-out infinite; pointer-events: none; }
.hd-bitti .hd-hafta::after { animation: none; opacity: 0; }
@keyframes hdTarama { to { transform: translateX(350%); } }
.hd-gun { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.hd-gun-ad { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: center; letter-spacing: .02em; margin-bottom: 2px; }
.hd-blok { display: block; height: calc(var(--h, 2) * 9px); border-radius: 6px; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ink) 8%, transparent); background: var(--hat); opacity: .55; transform-origin: 50% 100%; }
.hd-blok.on { opacity: 1; animation: hdBlokOtur 460ms cubic-bezier(.3, 1.5, .5, 1) both; }
.hd-blok.on.hd-r0 { background: var(--accent); }
.hd-blok.on.hd-r1 { background: var(--good); }
.hd-blok.on.hd-r2 { background: var(--blue, var(--accent-2)); }
.hd-blok.on.hd-r3 { background: var(--accent-2, var(--accent)); }
@keyframes hdBlokOtur { 0% { transform: translateY(-10px) scale(.6); opacity: 0; } 70% { transform: translateY(1px) scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
.hd-bitti .hd-blok.on { animation: hdDalga 620ms ease-in-out both; animation-delay: calc(var(--s, 0) * 55ms); }
@keyframes hdDalga { 0%, 100% { transform: none; } 45% { transform: translateY(-5px) scale(1.05); } }

/* konfeti */
.hd-konfeti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.hd-konfeti i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; opacity: 0; }
.hd-konfeti .hd-k0 { background: var(--accent); } .hd-konfeti .hd-k1 { background: var(--good); } .hd-konfeti .hd-k2 { background: var(--warn); }
.hd-konfeti .hd-k3 { background: var(--accent-2, var(--accent)); border-radius: 50%; } .hd-konfeti .hd-k4 { background: var(--bad, var(--warn)); width: 5px; height: 10px; }
.hd-bitti .hd-konfeti i { animation: hdKonfeti 1000ms cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--g, 0) * 60ms); }
@keyframes hdKonfeti { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-132px) rotate(300deg); } }

/* cümle geçişi */
.hd-soz-yeni { display: inline-block; animation: hdSozGir 380ms ease-out both; }
@keyframes hdSozGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* azaltılmış hareket: aynı ekran, hareketsiz */
.hd-sakin .hd-parilti, .hd-sakin .hd-hafta::after, .hd-sakin .hd-blok.on, .hd-sakin .hd-soz-yeni, .hd-sakin .hd-halka-dolu { animation: none !important; transition: none !important; }
.hd-sakin .hd-konfeti, .hd-sakin .hd-hafta::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hd-parilti, .hd-hafta::after, .hd-blok.on, .hd-soz-yeni, .hd-halka-dolu, .hd-konfeti i { animation: none !important; transition: none !important; }
  .hd-konfeti, .hd-hafta::after { display: none; }
}
:root[data-tier="reduced"] .hd-parilti, :root[data-tier="reduced"] .hd-blok.on, :root[data-tier="reduced"] .hd-soz-yeni { animation: none; }
:root[data-tier="reduced"] .hd-konfeti, :root[data-tier="reduced"] .hd-hafta::after { display: none; }

/* v71io (io189): oyun bitince sonuç + bütün seçenekler ilk ekranda (Tırmanış, Meşale Koşusu, Düello).
   Formula Drive bitiş satırları Grand Prix birleşmesinde çıkarıldı: oyun io173 ile kaldırıldı.
   Tam ekran oyun kuralı .bitti küçültmesini eziyordu; şerit yüksekliğini artık bitiş kodu ölçüp --bitis-bant ile verir. */
:root[data-rota="tirmanis"] .tr-wrap.bitti, :root[data-rota="magara"] .mg-wrap.bitti { height: var(--bitis-bant, 300px); border-width: 0; }
:root[data-rota="tirmanis"] #trSonuc:not(:empty), :root[data-rota="magara"] #mgSonuc:not(:empty) { padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.tr-sonuc-ek .tr-konular { margin-top: 0; }
.tr-sonuc-ek .tr-konular .eyebrow { color: var(--muted); }
.tr-sonuc-ek .tr-konular .tag.zayif { background: var(--tint); color: var(--accent); }
.tr-sonuc-ek > :first-child { margin-top: 0; }
.mg-sonuc-ek .mg-konular { margin-top: 0; }
.mg-sonuc-ek .mg-cipler a { background: var(--tint); color: var(--accent); }
.mg-sonuc-ek .mg-not { color: var(--muted); }
.mg-sonuc-ek > :first-child { margin-top: 0; }
@media (max-width: 372px) { .mg-sonuc-kart .mg-statlar { grid-template-columns: repeat(3, 1fr); } }

/* ===================== v72io · GRAFİK (io228): ders görselleri kitaplığı — public/ogrenme/grafik.js =====================
   Renk jetonları (--g-*, köke taşınan --d-*) dosyanın ortasındaki v72io-jeton bloğunda (hex yalnız orada). */
/* giriş hareketleri: bir kez, kısa; gecikme basamağı 45 ms (en geç ~1,2 sn'de her şey yerinde). Dinlenme hâli son kare:
   hareket hiç çalışmasa da görsel tamdır. */
.gr .gr-sayi { font-variant-numeric: tabular-nums; }
.gr .gr-i { font-style: italic; }
.gr-a { animation: grBelir var(--g-sure) var(--g-egri) both; }
.gr-o { transform-box: fill-box; transform-origin: center; animation: grBuyut var(--g-sure) var(--g-egri) both; }
.gr-c { stroke-dasharray: 1; animation: grCiz var(--g-sure-uzun) var(--g-egri) both; }
.gr-y { transform-box: fill-box; transform-origin: 50% 100%; animation: grUzaY var(--g-sure) var(--g-egri) both; }
.gr-x { transform-box: fill-box; transform-origin: 0 50%; animation: grUzaX var(--g-sure) var(--g-egri) both; }
.gr-xs { transform-box: fill-box; transform-origin: 100% 50%; animation: grUzaX var(--g-sure) var(--g-egri) both; }
.gr-v { animation: grVurgu var(--g-sure-vurgu) ease-in-out 1100ms 2 both; }
.gr-d1 { animation-delay: calc(var(--g-adim) * 1); } .gr-d2 { animation-delay: calc(var(--g-adim) * 2); } .gr-d3 { animation-delay: calc(var(--g-adim) * 3); } .gr-d4 { animation-delay: calc(var(--g-adim) * 4); }
.gr-d5 { animation-delay: calc(var(--g-adim) * 5); } .gr-d6 { animation-delay: calc(var(--g-adim) * 6); } .gr-d7 { animation-delay: calc(var(--g-adim) * 7); } .gr-d8 { animation-delay: calc(var(--g-adim) * 8); }
.gr-d9 { animation-delay: calc(var(--g-adim) * 9); } .gr-d10 { animation-delay: calc(var(--g-adim) * 10); } .gr-d11 { animation-delay: calc(var(--g-adim) * 11); } .gr-d12 { animation-delay: calc(var(--g-adim) * 12); }
.gr-d13 { animation-delay: calc(var(--g-adim) * 13); } .gr-d14 { animation-delay: calc(var(--g-adim) * 14); } .gr-d15 { animation-delay: calc(var(--g-adim) * 15); } .gr-d16 { animation-delay: calc(var(--g-adim) * 16); }
@keyframes grBelir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes grBuyut { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes grCiz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes grUzaY { from { transform: scaleY(0); } to { transform: none; } }
@keyframes grUzaX { from { transform: scaleX(0); } to { transform: none; } }
@keyframes grVurgu { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .gr .gr-a, .gr .gr-o, .gr .gr-c, .gr .gr-y, .gr .gr-x, .gr .gr-xs, .gr .gr-v { animation: none; }
}
:root[data-tier="reduced"] .gr .gr-a, :root[data-tier="reduced"] .gr .gr-o, :root[data-tier="reduced"] .gr .gr-c, :root[data-tier="reduced"] .gr .gr-y,
:root[data-tier="reduced"] .gr .gr-x, :root[data-tier="reduced"] .gr .gr-xs, :root[data-tier="reduced"] .gr .gr-v { animation: none; }
/* io286: ışık karışımı (renkliIsik) — toplamsal ışık ekranda “screen”, boya “multiply” ile karışır; panel yalıtılır */
.gr .gr-izole { isolation: isolate; }
.gr .gr-ekle { mix-blend-mode: screen; }
.gr .gr-carp { mix-blend-mode: multiply; }

/* ===== io243 — GELİŞİM PANOSU (kurucu, 2026-09-30): seçenekler 11 → 4 kısayol; Bu hafta kartı (büyük süre, 7 gün çubuğu, üç küçük sayı),
   X-Ray + DNA kutuları (öğrenciye özel; Bugün ile aynı görünüm modeli), Güçlü / Çalış konu çipleri, Sırada kartı. */
.gl2 { display: grid; gap: 14px; }
.gl2-hafta { position: relative; overflow: hidden; padding: 16px; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--yuzey-2);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 72%); }
.gl2-hafta-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gl2-baslik { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
.gl2-buyuk { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.gl2-buyuk b { font-family: var(--display); font-size: 44px; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gl2-buyuk span { font-size: 15px; font-weight: 700; color: var(--muted); }
.gl2-cubuk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 84px; margin-top: 12px; }
.gl2-cubuk > div { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: end; gap: 4px; min-height: 0; }
.gl2-cubuk i { display: block; width: 100%; max-width: 26px; height: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 30%, var(--surface)); transition: height 320ms var(--ease-enter); }
.gl2-cubuk > div:nth-child(2) i { transition-delay: 40ms; } .gl2-cubuk > div:nth-child(3) i { transition-delay: 80ms; } .gl2-cubuk > div:nth-child(4) i { transition-delay: 120ms; }
.gl2-cubuk > div:nth-child(5) i { transition-delay: 160ms; } .gl2-cubuk > div:nth-child(6) i { transition-delay: 200ms; } .gl2-cubuk > div:nth-child(7) i { transition-delay: 240ms; }
.gl2-cubuk > div.bugun i { background: linear-gradient(var(--accent-2), var(--accent)); }
.gl2-cubuk > div.bos i { background: var(--line); }
.gl2-cubuk em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.gl2-cubuk > div.bugun em { color: var(--accent-yazi); }
.gl2-kucuk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.gl2-kucuk > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.gl2-kucuk b { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gl2-kucuk span { font-size: 12px; font-weight: 700; color: var(--muted); }
.gl2-fark { font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; }
.gl2-fark.artti { color: var(--good-d); } .gl2-fark.azaldi { color: var(--warn); }
.gl2-kanit { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ink);
  background: color-mix(in srgb, var(--good-d) 10%, var(--surface)); }
.gl2-kanit svg { flex: none; margin-top: 2px; color: var(--good-d); }
.gl2-zeka.ev-ist-zekalar { margin-top: 0; }
.gl2-konular { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gl2-konu-kol { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.gl2-cip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.gl2-cip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.gl2-cip span { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.gl2-cip.iyi { background: color-mix(in srgb, var(--good-d) 12%, transparent); } .gl2-cip.iyi span { color: var(--good-d); }
.gl2-cip.dikkat { background: color-mix(in srgb, var(--warn) 14%, transparent); } .gl2-cip.dikkat span { color: var(--warn); }
.gl2-bos { margin: 0; font-size: 13.5px; color: var(--muted); }
.gl2-sirada { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; color: var(--uzeri); text-decoration: none; box-shadow: var(--yuzey-2);
  background: var(--grad-yazi); transition: transform 90ms ease-out; }   /* io326: --accent-2 ucu beyaz yazıyı koyu temada 3,4:1'e düşürüyordu */
.gl2-sirada:active { transform: scale(.98); }
.gl2-sirada-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--uzeri) 20%, transparent); }
.gl2-sirada-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl2-sirada-metin small { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--uzeri) 80%, transparent); }
.gl2-sirada-metin b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.gl2-sirada em { flex: none; padding: 6px 12px; border-radius: 999px; font-style: normal; font-size: 13.5px; font-weight: 800; color: var(--accent-yuzey); background: var(--uzeri); }
.gl2-kisayol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gl2-kisayol a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 12px 4px; border-radius: 18px; font-size: 12px; font-weight: 700; text-align: center; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); transition: transform 90ms ease-out; }
.gl2-kisayol a:active { transform: scale(.96); }
.gl2-kisayol i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--accent); background: var(--tint); }
@media (max-width: 360px) { .gl2-konular { grid-template-columns: 1fr; } .gl2-kucuk b { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .gl2-cubuk i { transition: none; } }

/* ===== io244 — TABLET (kurucu, 2026-09-30: "iPad ve tüm Android tabletler için de iyileştir"). ≥700 px: yeniden tasarlanan sayfalar iki sütun;
   ≥1000 px (iPad yatay, 11–13" tabletler): bu sayfalarda kabuk 1040 px'e genişler, diğer sayfalar okunur 780 px sütunda kalır. */
@media (min-width: 700px) {
  /* io318: Bugün panosu tablette iki sütun — solda Neti'nin görev kartı, sağda istatistikler, hafta ve kısayollar */
  /* io332: .pn ızgara kuralı v85io bloğuna taşındı (taban kuraldan sonra durmalı) */
  .pn > * { grid-column: 2; min-width: 0; }
  .pn > .pn-bas { grid-column: 1 / -1; }
  .pn > .pn-neti { grid-column: 1; grid-row: 2 / span 5; }
  .ev-ist-karolar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gl2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .gl2-hafta { grid-row: span 2; }
  .gl2-sirada, .gl2-kisayol { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  :root[data-rota="bugun"] #app, :root[data-rota="geribildirim"] #app, :root[data-rota="program"] #app { max-width: 1040px; }
  .gl2-kisayol { grid-template-columns: repeat(4, minmax(0, 200px)); justify-content: center; }
}

/* ===================== io248 — YENİ NETİ: poz duruşları ve poz döngüleri =====================
   Kol duruşları maskot.js EK tablosundan ÜRETİLİR: node scripts/neti-duruslar.mjs (test-neti-kod denetler; elle değiştirme).
   Yeni pozların sınıfı np- ile başlar (uygulamada .tamam/.oku/.guven … zaten var). Döngüler yalnız .canli iken ve
   bir hareket (.oynuyor) yokken çalışır; hareket gelince hareket kazanır, bitince döngü kaldığı yerden sürer. */
/* duruşlar (üretilmiş) */
.neti[data-poz="selam"] { --neti-kol-sag: rotate(-105deg); }
.neti[data-poz="kutlama"] { --neti-kol-sol: translate(-2px,-18px) rotate(10deg); --neti-kol-sag: rotate(-120deg); }
.neti[data-poz="heyecan"] { --neti-kol-sol: translate(-2px,-18px) rotate(10deg); --neti-kol-sag: rotate(-120deg); }
.neti[data-poz="kahkaha"] { --neti-kol-sol: translate(12px,4px) rotate(-26deg); --neti-kol-sag: rotate(95deg); }
.neti[data-poz="uzgun"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); --neti-kol-sag: rotate(14deg); }
.neti[data-poz="yorgun"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); --neti-kol-sag: rotate(14deg); }
.neti[data-poz="endise"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); --neti-kol-sag: rotate(14deg); }
.neti[data-poz="sakin"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); --neti-kol-sag: rotate(80deg); }
.neti[data-poz="gulme"] { --neti-kol-sol: translate(12px,4px) rotate(-26deg); --neti-kol-sag: rotate(92deg); }
.neti[data-poz="zafer"] { --neti-kol-sag: rotate(-125deg); }
.neti[data-poz="tesekkur"] { --neti-kol-sol: translate(12px,4px) rotate(-26deg); --neti-kol-sag: rotate(98deg); }
.neti[data-poz="tamam"] { --neti-kol-sag: rotate(-110deg); }
.neti[data-poz="saril"] { --neti-kol-sol: translate(12px,4px) rotate(-26deg); --neti-kol-sag: rotate(100deg); }
.neti[data-poz="kalpTut"] { --neti-kol-sol: translate(12px,4px) rotate(-26deg); --neti-kol-sag: rotate(100deg); }
.neti[data-poz="dua"] { --neti-kol-sol: translate(22px,-4px) rotate(-10deg); --neti-kol-sag: rotate(108deg); --neti-mercek: 0; }
.neti[data-poz="fikir"] { --neti-kol-sag: rotate(-120deg); }
.neti[data-poz="notAl"] { --neti-kol-sag: rotate(58deg); }
.neti[data-poz="oku"] { --neti-kol-sol: translate(12px,4px) rotate(-26deg); --neti-kol-sag: rotate(96deg); }
.neti[data-poz="soruSor"] { --neti-kol-sag: rotate(-40deg); }
.neti[data-poz="anlat"] { --neti-kol-sag: rotate(-70deg); }
.neti[data-poz="isaretEt"] { --neti-kol-sag: rotate(-66deg); }
.neti[data-poz="parmakKaldir"] { --neti-kol-sag: rotate(-108deg); }
.neti[data-poz="ipucu"] { --neti-kol-sag: rotate(108deg); }
.neti[data-poz="incele"] { --neti-kol-sol: translate(29px,-8px); }
.neti[data-poz="mercekYukari"] { --neti-kol-sol: translate(-2px,-18px) rotate(10deg); }
.neti[data-poz="hedef"] { --neti-kol-sag: rotate(-62deg); }
.neti[data-poz="tesvik"] { --neti-kol-sag: rotate(-72deg); }
.neti[data-poz="kazan"] { --neti-kol-sag: rotate(-110deg); }
.neti[data-poz="bitirdi"] { --neti-kol-sag: rotate(-60deg); }
.neti[data-poz="dans"] { --neti-kol-sol: translate(-2px,-18px) rotate(10deg); --neti-kol-sag: rotate(-115deg); }
.neti[data-poz="zipla"] { --neti-kol-sol: translate(-2px,-18px) rotate(10deg); --neti-kol-sag: rotate(-120deg); }
.neti[data-poz="meditasyon"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); --neti-kol-sag: rotate(40deg); }
.neti[data-poz="kasli"] { --neti-kol-sag: rotate(-95deg); }
.neti[data-poz="motive"] { --neti-kol-sag: rotate(-125deg); }
.neti[data-poz="enerjiDolu"] { --neti-kol-sol: translate(-2px,-18px) rotate(10deg); --neti-kol-sag: rotate(-120deg); }
.neti[data-poz="agla"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); }
.neti[data-poz="hickirik"] { --neti-kol-sag: rotate(100deg); }
.neti[data-poz="panik"] { --neti-kol-sol: translate(-2px,-18px) rotate(10deg); --neti-kol-sag: rotate(-120deg); }
.neti[data-poz="korku"] { --neti-kol-sol: translate(12px,4px) rotate(-26deg); --neti-kol-sag: rotate(100deg); }
.neti[data-poz="dehset"] { --neti-kol-sag: rotate(112deg); }
.neti[data-poz="somurt"] { --neti-kol-sol: translate(20px,-2px) rotate(-12deg); --neti-kol-sag: rotate(104deg); }
.neti[data-poz="ofke"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); --neti-kol-sag: rotate(20deg); }
.neti[data-poz="terli"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); }
.neti[data-poz="hasta"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); --neti-kol-sag: rotate(14deg); }
.neti[data-poz="uyurgezer"] { --neti-kol-sol: translate(2px,5px) rotate(-22deg); }
.neti[data-poz="atesli"] { --neti-kol-sag: rotate(-95deg); }
.neti[data-poz="buzlu"] { --neti-kol-sol: translate(12px,4px) rotate(-26deg); --neti-kol-sag: rotate(98deg); }
.neti[data-poz="sabirsiz"] { --neti-kol-sag: rotate(-40deg); }
:root { --neti-dongu-hizli: 700ms; --neti-dongu-kisa: 1400ms; --neti-dongu: 2400ms; --neti-dongu-uzun: 3600ms; }
.neti .ek-arka *, .neti .ek-ust *, .neti .ek-on *, .neti .ek-el *, .neti .yuz * { transform-box: fill-box; transform-origin: 50% 50%; }

/* --- pozun kendi döngüsü (yalnız canlıyken ve bir hareket oynamıyorken; hareket gelince hareket kazanır) --- */
.neti.canli:not(.oynuyor):is(.np-dans) .govde { animation: netiPozDans var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozDans { 0%, 100% { transform: rotate(-5deg) translateY(0); } 25% { transform: rotate(0) translateY(-5px); } 50% { transform: rotate(5deg) translateY(0); } 75% { transform: rotate(0) translateY(-5px); } }
.neti.canli:not(.oynuyor):is(.np-zipla, .np-enerjiDolu) .govde { animation: netiPozZipla var(--neti-dongu-hizli) ease-in-out infinite alternate; }
.neti.canli:not(.oynuyor):is(.np-zipla, .np-enerjiDolu) .golge { animation: netiPozGolge var(--neti-dongu-hizli) ease-in-out infinite alternate; }
@keyframes netiPozZipla { from { transform: translateY(0) scale(1.03, .97); } to { transform: translateY(-11px) scale(.98, 1.02); } }
@keyframes netiPozGolge { from { transform: scale(1); opacity: .18; } to { transform: scale(.7); opacity: .08; } }
.neti.canli:not(.oynuyor):is(.np-gulme, .np-agla) .govde { animation: netiPozSars var(--neti-dongu-hizli) ease-in-out infinite; }
@keyframes netiPozSars { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2.5px) scale(1.02, .98); } }
.neti.canli:not(.oynuyor):is(.np-panik, .np-korku, .np-buzlu) .govde { animation: netiPozTitre var(--neti-dongu-hizli) linear infinite; }
@keyframes netiPozTitre { 0%, 50%, 100% { transform: translateX(0); } 12%, 62% { transform: translateX(-1.4px) rotate(-.6deg); } 37%, 87% { transform: translateX(1.4px) rotate(.6deg); } }
.neti.canli:not(.oynuyor):is(.np-ofke, .np-somurt) .govde { animation: netiPozHirs var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozHirs { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.04, .96) translateY(1.5px); } 80% { transform: scale(.99, 1.01); } }
.neti.canli:not(.oynuyor):is(.np-hickirik) .govde { animation: netiPozHickir var(--neti-dongu-kisa) ease-out infinite; }
@keyframes netiPozHickir { 0%, 70%, 100% { transform: translateY(0); } 76% { transform: translateY(-6px) scale(.97, 1.04); } 84% { transform: translateY(0) scale(1.03, .97); } }
.neti.canli:not(.oynuyor):is(.np-basDoner, .np-uyurgezer, .np-hasta) .govde { animation: netiPozSallan var(--neti-dongu) ease-in-out infinite; }
@keyframes netiPozSallan { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.neti.canli:not(.oynuyor):is(.np-nefes) .govde { animation: netiPozNefes var(--neti-dongu-uzun) ease-in-out infinite; }
@keyframes netiPozNefes { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.04, 1.05); } }
.neti.canli:not(.oynuyor):is(.np-meditasyon) .govde { animation: netiPozSuzul var(--neti-dongu-uzun) ease-in-out infinite; }
.neti.canli:not(.oynuyor):is(.np-meditasyon) .golge { animation: netiPozGolge var(--neti-dongu-uzun) ease-in-out infinite alternate; }
@keyframes netiPozSuzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* kol döngüleri */
.neti.canli:not(.oynuyor):is(.np-zafer, .np-motive) .kol-sag { animation: netiPozYumruk var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozYumruk { 0%, 100% { transform: rotate(-125deg); } 30% { transform: rotate(-140deg); } 55% { transform: rotate(-118deg); } }
.neti.canli:not(.oynuyor):is(.np-kasli) .kol-sag { animation: netiPozPazi var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozPazi { 0%, 100% { transform: rotate(-95deg); } 50% { transform: rotate(-110deg); } }
.neti.canli:not(.oynuyor):is(.np-tesvik) .kol-sag { animation: netiPozBas var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozBas { 0%, 100% { transform: rotate(-72deg); } 50% { transform: rotate(-82deg); } }
.neti.canli:not(.oynuyor):is(.np-isaretEt) .kol-sag { animation: netiPozIsaret var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozIsaret { 0%, 100% { transform: rotate(-66deg); } 20% { transform: rotate(-58deg); } 40% { transform: rotate(-68deg); } }
.neti.canli:not(.oynuyor):is(.np-parmakKaldir) .kol-sag { animation: netiPozParmak var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozParmak { 0%, 100% { transform: rotate(-108deg); } 25% { transform: rotate(-98deg); } 50% { transform: rotate(-112deg); } }
.neti.canli:not(.oynuyor):is(.np-anlat) .kol-sag { animation: netiPozAnlat var(--neti-dongu) ease-in-out infinite; }
@keyframes netiPozAnlat { 0%, 100% { transform: rotate(-70deg); } 30% { transform: rotate(-88deg); } 60% { transform: rotate(-62deg); } }
.neti.canli:not(.oynuyor):is(.np-incele) .kol-sol { animation: netiPozIncele var(--neti-dongu) ease-in-out infinite; }
@keyframes netiPozIncele { 0%, 100% { transform: translate(29px, -8px); } 50% { transform: translate(26px, -5px) rotate(-3deg); } }
.neti.canli:not(.oynuyor):is(.np-mercekYukari) .kol-sol { animation: netiPozMercek var(--neti-dongu) ease-in-out infinite; }
@keyframes netiPozMercek { 0%, 100% { transform: translate(-2px, -18px) rotate(10deg); } 50% { transform: translate(-2px, -21px) rotate(16deg); } }
.neti.canli:not(.oynuyor):is(.np-sabirsiz) .ayak-sag { animation: netiPozTap var(--neti-dongu-hizli) ease-in-out infinite; }
@keyframes netiPozTap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg) translateY(-2px); } }
/* aksesuar ve yüz efektleri */
.neti.canli .ek-yas path { stroke-dasharray: 4 3; animation: netiPozYas var(--neti-dongu-hizli) linear infinite; }
@keyframes netiPozYas { to { stroke-dashoffset: -14; } }
.neti.canli .ek-damla { animation: netiPozDamla var(--neti-dongu-kisa) ease-in infinite; }
@keyframes netiPozDamla { 0% { opacity: 0; transform: translateY(-3px) scale(.7); } 25% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(12px) scale(.9); } }
.neti.canli .ek-z { animation: netiPozZ var(--neti-dongu) ease-out infinite; }
@keyframes netiPozZ { 0% { opacity: 0; transform: translate(-3px, 4px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -8px) scale(1.1); } }
.neti.canli :is(.ek-ampul, .ek-aura, .ek-simsek, .ek-isin) { animation: netiPozIsik var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozIsik { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
.neti.canli :is(.ek-kalp, .ek-rozet, .ek-pazi, .ek-damar) { animation: netiPozAtis var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozAtis { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 28% { transform: scale(.97); } }
.neti.canli :is(.ek-nota, .ek-ucan, .ef-soru, .ek-balon, .ek-kar) { animation: netiPozSuz var(--neti-dongu) ease-in-out infinite; }
@keyframes netiPozSuz { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
.neti.canli :is(.ek-parilti, .ek-nokta, .ek-cizik) { animation: netiPozParla var(--neti-dongu-kisa) ease-in-out infinite; }
@keyframes netiPozParla { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.neti.canli .ek-alev { transform-origin: 50% 100%; animation: netiPozAlev var(--neti-dongu-hizli) ease-in-out infinite alternate; }
@keyframes netiPozAlev { from { transform: scale(1, 1); } to { transform: scale(1.04, 1.08); } }
.neti.canli .ek-buhar { animation: netiPozBuhar var(--neti-dongu-kisa) ease-out infinite; }
@keyframes netiPozBuhar { 0% { opacity: 0; transform: translateY(4px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px) scale(1.2); } }
.neti.canli :is(.ek-titre, .ek-unlem2) { animation: netiPozTitre var(--neti-dongu-hizli) linear infinite; }
.neti.canli .ek-yorunge { transform-box: view-box; transform-origin: 60px 40px; animation: netiPozSallan var(--neti-dongu-kisa) ease-in-out infinite; }
.neti.canli .ek-yelkovan { transform-box: view-box; transform-origin: 109px 72px; animation: netiPozSaat var(--neti-dongu-kisa) steps(8) infinite; }
@keyframes netiPozSaat { to { transform: rotate(360deg); } }
.neti.canli :is(.ek-madalya, .ek-puskul) { transform-origin: 50% 0; animation: netiPozSallan var(--neti-dongu) ease-in-out infinite; }
.neti.canli .ek-kalem { transform-box: view-box; transform-origin: 84px 92px; animation: netiPozYaz var(--neti-dongu-hizli) ease-in-out infinite alternate; }
@keyframes netiPozYaz { from { transform: rotate(-6deg); } to { transform: rotate(6deg) translateX(1.5px); } }
.neti.canli .ek-ok { transform-box: view-box; transform-origin: 109px 60px; animation: netiPozOk var(--neti-dongu-kisa) ease-out infinite; }
@keyframes netiPozOk { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } 90% { transform: rotate(-2deg); } }
.neti.canli :is(.ek-ruzgar, .ek-hiz) { animation: netiPozRuzgar var(--neti-dongu) ease-in-out infinite; }
@keyframes netiPozRuzgar { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: 1; transform: translateX(2px); } }
.neti.canli .ek-gol { animation: netiPozIsik var(--neti-dongu) ease-in-out infinite; }
.neti.canli :is(.ek-g2) { animation-delay: 240ms; } .neti.canli :is(.ek-g3) { animation-delay: 480ms; } .neti.canli .ek-z2 { animation-delay: 900ms; }
@media (prefers-reduced-motion: reduce) {
  .neti.canli:not(.oynuyor):is([class*="np-"]) :is(.govde, .golge, .kol-sag, .kol-sol, .ayak-sag) { animation: none; }
  .neti .ek-arka *, .neti .ek-ust *, .neti .ek-on *, .neti .ek-el *, .neti .yuz *, .neti .ek-arka, .neti .ek-ust, .neti .ek-on { animation: none; }
}
/* ===================== io248 son ===================== */

/* v73io (io285): KART İÇİ GÖRSEL — anlatım bölümünün tek görseli (grafik + gAciklama) okuyucularda bölüm metninin altında
   (ogren.js og-kart-sema, akademi.js ak-kart-sema). Hareket .gr sınıflarında; azaltılmış harekette v72io durdurur. */
.og-kart-sema { margin-top: 12px; }
.og-kart-sema-alt, .ak-kart-sema-alt { margin: 6px 4px 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-align: center; }
.ak-kart-sema { margin-top: 12px; }

/* v74io (io288): GÖRSEL ETKİLEŞİMİ ve PARÇA PARÇA KURULUM. Ders görselleri (.gr) zaten parça parça kurulur: her parça
   .gr-a/-o/-c/-y/-x giriş sınıfı + .gr-dN gecikme basamağı alır (N × --g-adim, v72io-jeton). Kurulum görsel GÖRÜNÜNCE
   başlamalı: .gr-bekle taşıyan kabın içinde bütün giriş hareketleri ilk karede bekler (dokun-ve-gör perdesi altında;
   kaydırmalı okuyucuda ekrana girene dek — ogren.js semaBagla). Sınıf kalkınca hareket o an oynar. Azaltılmış harekette
   ve düşük katmanda hareket zaten yok (v72io): görsel ilk karesinden tam görünür. Tarif düzeyinde kapatma: grafik.hareket=false. */
.gr-bekle .gr :is(.gr-a, .gr-o, .gr-c, .gr-y, .gr-x, .gr-xs, .gr-v) { animation-play-state: paused; }

/* v75io (io309): KOD NETİ YÜKLENİRKEN — maskot.js kod Neti paketini eklerken eski çizim bir an görünüp değişmesin diye gizli
   tutulur; paket gelince (ya da hata / 1,5 sn zaman aşımında) sınıf kalkar, yükseltilemeyen Neti eski çizimiyle görünür. */
.neti-kod-bekle .neti:not(.neti-kodlu) svg { visibility: hidden; }
/* v78io (io322): RESİM NETİ — Neti kurucunun resimlerinden (public/neti/resim, docs/neti/NETI_RESIM.md). neti-resim.js her .neti
   çizimini bir <img>'ye çevirir: .neti > .neti-resim > svg.nr-olcu (eski çizimle aynı ölçülü BOŞ svg: kutuyu her ekranda eskisi gibi
   ölçer, yerleşim kaymaz) + .nr-suz (boşta süzülme) > .nr-har (tepki kalıpları, bulanık ön izleme) > img.nr-kat (poz katmanları üst
   üste; geçişte ikisi birden). Gövde her pozda aynı boyda, ayak tabanı kutunun %94'ünde. Hareket yalnız transform/opacity; azaltılmış harekette süzülme
   yok. Karo (sahneli yer tutucu) resimde zemin gölgesi yok. */
.neti-resim { display: block; position: relative; line-height: 0; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.neti-resim .nr-olcu { visibility: hidden; }
.neti-resim .nr-suz, .neti-resim .nr-har { position: absolute; inset: 0; display: block; }
.neti-resim .nr-har { transform-origin: 50% 94%; background: 50% 80% / 125% 123.077% no-repeat; }
/* TAŞMA PAYI: dosya tuvali 300×320, yerleşim kutusu 240×260, kutu tuvalde (30, 48)'de (manifest.js kutu / tuval / kutuYer) → resim kutunun
   solundan %12,5, üstünden %18,46 taşar; kutunun kendisi (ve sayfa yerleşimi) değişmez. Ayak tabanı tuvalin %91,4'ünde. */
.neti-resim .nr-kat { position: absolute; left: -12.5%; top: -18.4615%; display: block; width: 125%; height: 123.077%; max-width: none; object-fit: fill; transform-origin: 50% 91.4%; transition: opacity 200ms linear; pointer-events: none; -webkit-user-drag: none; }
.neti-resim.nr-bekle .nr-kat { opacity: 0; }
.neti-resim::before { content: ""; position: absolute; left: 20%; right: 20%; bottom: 3%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 28, 99, .2), rgba(42, 28, 99, 0)); pointer-events: none; }
.neti-resim.nr-karo::before { display: none; }
@keyframes nrSuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.4%); } }
@keyframes nrGolge { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .8; } }
.neti-resimli .nr-suz { animation: nrSuz 3800ms ease-in-out infinite; }
.neti-resimli .neti-resim::before { animation: nrGolge 3800ms ease-in-out infinite; }
.y2-az .neti-resimli .nr-suz, .y2-az .neti-resimli .neti-resim::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .neti-resimli .nr-suz, .neti-resimli .neti-resim::before { animation: none; } .neti-resim .nr-kat { transition: none; } }
.nr-fx { position: absolute; inset: 0; display: block; overflow: visible; pointer-events: none; }
.nr-fx > span { position: absolute; display: block; }
.neti-resim-duragan { display: block; max-width: 100%; height: auto; }
/* ders ve Düello: Neti kutusu (.ls-neti-yer · .dl-neti / menü / lobi) kendi ölçüsünü verir */
.ls-neti-yer .neti-resim, .dl-neti .neti-resim, .dl-neti-menu .neti, .dl-neti-menu .neti-resim, .dl-neti-lobi .neti, .dl-neti-lobi .neti-resim { display: block; width: 100%; height: 100%; }
.dl-neti-menu .nr-olcu, .dl-neti-lobi .nr-olcu { display: block; width: 100%; height: 100%; }
/* harita: yola bakan Neti (çizimdeki svg aynasının resim karşılığı); yazılı/işaretli pozlar çevrilmez */
.y2-neti-sag .y2-neti-govde .neti .neti-resim:not(.nr-aynasiz), .y2k-neti-ayna .neti .neti-resim:not(.nr-aynasiz) { transform: scaleX(-1); }
/* v76io (io313): BİLDİRİMLER v3 — Neti kartı (ruh hâli resmi), sıklık seçici (Az · Normal · Çok), önizlemede Neti resmi + başlık,
   "Otomatiğe dön" bağlantısı, ilk görevden sonra Neti teklifi (bl-teklif). Renkler mevcut jetonlardan (açık + koyu ikisinde de). */
.bl-neti { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.bl-neti-resim { flex: none; width: 72px; height: 72px; border-radius: 18px; object-fit: cover; }
.bl-not { margin: 0 0 12px; }
.bl-siklik-satir > div:first-child { min-width: 110px; }
.bl-siklik { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 999px; background: var(--soft); }
.bl-siklik button { min-height: 36px; min-width: 56px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.bl-siklik button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-basma); }
.bl-baglanti { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.bl-oniz { display: flex; gap: 10px; align-items: flex-start; }
.bl-oniz-resim { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.bl-oniz-ic { min-width: 0; }
.bl-oniz-baslik { font-weight: 800; font-size: 14px; margin-top: 3px; }
.bl-oniz .bl-oniz-metin { font-size: 15px; font-weight: 600; margin: 2px 0 0; }
.bl-teklif { display: grid; justify-items: center; text-align: center; gap: 10px; }
.bl-teklif-resim { width: 120px; height: 120px; border-radius: 24px; object-fit: cover; }
.bl-teklif-metin { margin: 0; font-size: 16px; }
.bl-teklif-dugmeler { display: grid; gap: 8px; width: 100%; }
/* v76io: anahtar satırları uzun başlıkta da tek satır kalır (anahtar sağda; metin sarar) */
.bl-satir:has(> .bl-anahtar) { flex-wrap: nowrap; }
.bl-satir:has(> .bl-anahtar) > div:first-child { flex: 1 1 0; min-width: 0; }
/* v77io (io315): DÜELLO tam ekran — Düello sahnesi (#/duello/<kod>, #/canli…) üst çubuk ve sekmeler olmadan, güvenli alanı kendisi
   bırakır (Oyna menüsü zaten tam ekran). Sahnenin kendi stili public/games/duello/duello.css. */
:root[data-rota="duello"] .top, :root[data-rota="canli"] .top, :root[data-rota="duello"] #tabs, :root[data-rota="canli"] #tabs, :root[data-rota="duello"] .kt-fab, :root[data-rota="canli"] .kt-fab { display: none; }
:root[data-rota="duello"] #view, :root[data-rota="canli"] #view { padding: 0; max-width: none; }
/* ===== v78io (io318) — BUGÜN PANOSU "KARTLAR" (kurucu seçimi, 2026-10-10): klasik, sade pano. Düz zemin (uygulamanın olağan yüzeyi).
   Sıra: selam + sınav çipi → Neti bugünkü görevleri söyler (durağan resim + içinde görev satırları ve paylaşılan 3B düğme .ev-cta olan kart)
   → tanıtım yuvası → üç istatistik kartı → "Bu hafta" çubukları → 2×2 kısayol. Kartlar paylaşılan yüzey jetonlarıyla (--surface, --hat,
   --yuzey-1/2, --r-lg); seri alevi --alev-* jetonlarıyla. Hareket: yalnız ilk çizimde tek giriş sırası (pn-ilk) ve alev titremesi
   (--motion-alev); azaltılmış harekette ikisi de yok. */
:root[data-rota="bugun"] #streak { display: none; }   /* seri Bugün'de istatistik kartında (#evSeri aynı sayfayı açar); diğer sayfalarda kapsülde */
/* pano paketler gelince yeniden çizilir: tarayıcının kaydırma çapası sayfayı 2–6 px kaydırmasın */
:root[data-rota="bugun"], :root[data-rota="bugun"] body, :root[data-rota="bugun"] .view { overflow-anchor: none; }
.pn { display: flex; flex-direction: column; gap: 12px; }
.pn-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 0; }
.pn-selam { min-width: 0; margin: 0; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.pn-selam span { color: var(--accent-yazi); }
.pn-bas .ev-gun { flex: none; margin: 0; padding: 0 12px; min-height: 36px; line-height: 34px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.pn-bas .ev-gun b { font-size: 15px; font-weight: 800; color: var(--ink); }
.pn-bas .ev-gun .sinav-ad { font-size: 13.5px; vertical-align: baseline; color: var(--ink-2); background: none; -webkit-text-fill-color: currentColor; text-shadow: none; }
.pn-bas .ev-gun small { display: none; }
.pn-kart { min-width: 0; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-1); color: inherit; text-decoration: none; font: inherit; text-align: left; }
.pn-kart-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pn-kart-bas h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.pn-kart-yan { font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.pn-kart-yan b { font-size: 16px; font-weight: 800; color: var(--ink); }
.pn-fark { font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; color: var(--muted); } .pn-fark.art { color: var(--good-d); } .pn-fark.dus { color: var(--bad-d); }
/* Neti görevleri söyler: durağan resim kartın sol üst köşesinde durur (karttan taşar; aksesuar kırpılmaz), kartın içinde cümle + görevler + düğme */
.pn-neti { position: relative; margin-top: 58px; }
/* io322: ortak resim kümesi (300:320 tuval = yerleşim kutusu + taşma payı; gövde tuvalin ortasında, ayak tabanı %91,4'te) — Neti eskisiyle aynı boyda ve yerde */
.pn-neti-img { position: absolute; left: -20px; top: -102px; z-index: 1; width: 176px; height: 188px; max-width: none; pointer-events: none; user-select: none; }
.pn-balon { position: relative; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hat); box-shadow: var(--yuzey-2); }
.pn-balon::before { content: ""; position: absolute; left: 141px; top: 34px; width: 14px; height: 14px; background: var(--tint-violet); transform: rotate(45deg); }
.pn-giris { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 68px; margin: 0 0 14px 130px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--tint-violet); font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.pn-giris small { font-family: var(--font, inherit); font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--ink-2); }
.pn-liste { list-style: none; margin: 0 -16px 2px; padding: 0; }
.pn-gorev { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; }
.pn-gorev + .pn-gorev { border-top: 1px solid var(--line); }
.pn-tik { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); color: var(--uzeri); }
.pn-gorev.tamam .pn-tik { background: var(--good-d); border-color: var(--good-d); }
.pn-gorev.sirada .pn-tik { border-color: var(--accent); }
.pn-gorev.sirada .pn-tik::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pn-gorev-ad { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-gorev.tamam .pn-gorev-ad { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pn-gorev-dk { flex: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.pn-gorev.sirada { margin: 0 8px; padding: 8px; border-radius: var(--r-sm); border-top-color: transparent; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pn-gorev.sirada + .pn-gorev { border-top-color: transparent; }
.pn-gorev.sirada .pn-gorev-ad { font-weight: 800; }
.pn-gorev.sirada .pn-gorev-dk { color: var(--accent-yazi); }
.pn-cta { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; }
.pn-cta .ev-cta { flex: 1; min-width: 0; margin: 0; min-height: 56px; font-size: 16px; letter-spacing: .06em; }
.pn-degistir { flex: none; display: grid; place-items: center; width: 56px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--hat); color: var(--ink-2); cursor: pointer; }
.pn-degistir:active { transform: scale(.94); }
.pn .pn-gec { display: block; margin: 8px auto 0; }
.pn-yenile { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 10px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hat); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.pn-promo:empty { display: none; }
/* üç istatistik kartı: sayı ve alt satır hiçbir genişlikte kırılmaz */
.pn-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pn-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; overflow: hidden; }
button.pn-stat { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 90ms var(--ease-snap); }
button.pn-stat:active { transform: scale(.97); }
button.pn-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pn-stat-gorsel { display: flex; align-items: center; height: 36px; margin-bottom: 6px; }
.pn-stat-ikon .ic { box-sizing: content-box; padding: 8px; border-radius: 12px; color: var(--accent-yazi); background: var(--tint-violet); }
.pn-stat > b { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.05; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.pn-stat > b i { font-style: normal; font-size: 15px; font-weight: 700; color: var(--muted); }
.pn-stat > small { font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.pn-stat.sonuk > b { color: var(--ink-2); }
.pn-halka { display: block; }
.pn-halka-iz { stroke: color-mix(in srgb, var(--accent) 18%, var(--surface)); } .pn-halka-dolu { stroke: var(--accent); }
.pn-alev { flex: none; width: 30px; height: 34px; overflow: visible; }
.pn-alev-taban { fill: var(--alev-taban); } .pn-alev-golge { fill: var(--alev-golge); } .pn-alev-cekirdek { fill: var(--alev-cekirdek); }
.pn-alev-parlak { fill: var(--uzeri); opacity: .55; } .pn-alev-iz { display: none; }
.pn-alev.sonuk .pn-alev-taban { fill: var(--alev-sonuk); } .pn-alev.sonuk .pn-alev-golge { fill: var(--alev-sonuk-golge); }
.pn-alev.sonuk .pn-alev-cekirdek { fill: color-mix(in srgb, var(--alev-sonuk) 55%, var(--surface)); } .pn-alev.sonuk .pn-alev-parlak { opacity: .3; }
.pn-alev-govde { transform-box: fill-box; transform-origin: 50% 100%; animation: pnAlev var(--motion-alev) ease-in-out infinite; }
.pn-alev.sonuk .pn-alev-govde { animation: none; }
@keyframes pnAlev { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 30% { transform: scale(1.03, .96) skewX(-2deg); } 55% { transform: scale(.98, 1.05) skewX(1.5deg); } 80% { transform: scale(1.02, .98) skewX(-1deg); } }
/* bu hafta: dakika çubukları */
.pn-cubuk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pn-cb { fill: color-mix(in srgb, var(--accent) 34%, var(--surface)); } .pn-cb.bugun { fill: var(--accent); } .pn-cb.bos { fill: var(--line); }
.pn-cb-et { font-size: 12px; font-weight: 700; fill: var(--muted); } .pn-cb-et.bugun { font-weight: 800; fill: var(--accent-yazi); }
/* kısayollar 2×2 */
.pn-kisayol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pn-k { display: flex; align-items: center; gap: 12px; padding: 12px; transition: transform 90ms var(--ease-snap); }
.pn-k:active { transform: scale(.98); }
.pn-k > i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--accent-yazi); background: var(--tint-violet); }
.pn-k > span { display: flex; flex-direction: column; min-width: 0; }
.pn-k b { font-size: 15px; font-weight: 800; color: var(--ink); }
.pn-k small { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tek giriş sırası: yalnız ilk çizimde */
.pn-ilk > * { animation: pnGir var(--motion-reveal) var(--ease-enter) both; }
.pn-ilk > :nth-child(2) { animation-delay: 70ms; } .pn-ilk > :nth-child(3) { animation-delay: 150ms; } .pn-ilk > :nth-child(4) { animation-delay: 230ms; } .pn-ilk > :nth-child(n+5) { animation-delay: 300ms; }
@keyframes pnGir { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .pn-ilk > *, .pn-alev-govde { animation: none; } .pn-k, button.pn-stat { transition: none; } }
@media (max-width: 379px) { .pn-selam { font-size: 20px; } .pn-stat { padding: 10px; } .pn-stat > b { font-size: 20px; } .pn-stat > b i { font-size: 13.5px; } .pn-giris { margin-left: 124px; padding: 10px 12px; font-size: 15px; } .pn-balon::before { left: 135px; } .pn-k { gap: 10px; padding: 10px; } }

/* ===== v79io (io318h) — NETİ AÇILIŞ KARTI (public/neti/acilis.js): panonun üstünde tek kart; küçük bir sekmeyle belirir.
   Neti'nin saydam kesimi duyguya göre yumuşak renkli sahne karosunda (--as-<sahne>-a/-b, açık + koyu), altında TEK cümle (balon), paylaşılan
   3B birincil düğme (.ev-cta) ve "Şimdi değil". Perdeye dokunmak kapatır. Azaltılmış harekette animasyon yok. */
.as-wrap { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; transition: opacity 200ms var(--ease-enter); }
.as-wrap.as-kapaniyor { opacity: 0; pointer-events: none; }
body.as-acik { overflow: hidden; }
.as-perde { position: absolute; inset: 0; background: var(--as-perde); animation: asGir 200ms var(--ease-enter) both; }
.as-kart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 340px; padding: 22px 20px 16px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--hat); box-shadow: var(--yuzey-2); animation: asKart var(--motion-reveal) var(--ease-spring) both; }
.as-kart:focus { outline: none; }
.as-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: none; border: 0; color: var(--muted); cursor: pointer; }
.as-resim { --as-a: var(--as-gun-a); --as-b: var(--as-gun-b); position: relative; flex: none; width: 200px; height: 200px; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 30% 12%, var(--as-a), var(--as-b)); }
.as-resim[data-sahne="sabah"] { --as-a: var(--as-sabah-a); --as-b: var(--as-sabah-b); } .as-resim[data-sahne="aksam"] { --as-a: var(--as-aksam-a); --as-b: var(--as-aksam-b); }
.as-resim[data-sahne="gece"] { --as-a: var(--as-gece-a); --as-b: var(--as-gece-b); } .as-resim[data-sahne="kutlama"] { --as-a: var(--as-kutlama-a); --as-b: var(--as-kutlama-b); }
.as-resim[data-sahne="endise"] { --as-a: var(--as-endise-a); --as-b: var(--as-endise-b); } .as-resim[data-sahne="sicak"] { --as-a: var(--as-sicak-a); --as-b: var(--as-sicak-b); }
.as-resim::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 5.5%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, var(--as-zemin-golge), transparent); }   /* temas gölgesi */
.as-resim[data-sahne="gece"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.8px 1.8px at 14% 18%, var(--as-yildiz), transparent),
  radial-gradient(1.4px 1.4px at 32% 9%, var(--as-yildiz), transparent), radial-gradient(2px 2px at 84% 14%, var(--as-yildiz), transparent), radial-gradient(1.4px 1.4px at 70% 30%, var(--as-yildiz), transparent),
  radial-gradient(1.6px 1.6px at 90% 46%, var(--as-yildiz), transparent), radial-gradient(1.4px 1.4px at 8% 44%, var(--as-yildiz), transparent); }
.as-img { position: absolute; left: -4%; top: -10%; z-index: 1; display: block; width: 108%; height: 115%; max-width: none; user-select: none; -webkit-user-drag: none; animation: asNeti var(--motion-reveal) var(--ease-spring) 90ms both; }
.as-balon { position: relative; margin: 2px 0 0; padding: 12px 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--hat); font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.3;
  text-align: center; color: var(--ink); text-wrap: balance; }
.as-balon::before { content: ""; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; background: var(--surface-2); border-left: 1px solid var(--hat); border-top: 1px solid var(--hat); transform: translateX(-50%) rotate(45deg); }   /* kuyruk: Neti'ye */
.as-kart .ev-cta { margin: 2px 0 0; min-height: 56px; font-size: 16px; letter-spacing: .06em; }
.as-simdi-degil { min-height: 44px; padding: 0 16px; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 800; color: var(--muted); cursor: pointer; }
.ayar-acilis-seg { display: flex; margin-top: 10px; }
.ayar-acilis-seg button { flex: 1; min-height: 44px; }
@keyframes asGir { from { opacity: 0; } }
@keyframes asKart { from { opacity: 0; transform: translateY(26px) scale(.9); } }
@keyframes asNeti { from { transform: translateY(14px) scale(.86); } }
@media (prefers-reduced-motion: reduce) { .as-perde, .as-kart, .as-img { animation: none; } .as-wrap { transition: none; } }
/* ===== v80io (io319): GELİŞİM "ÇİZGİ KAHRAMAN" (kurucu seçimi B, 2026-10-10). Sayfanın tek odağı gelişim çizgisi: büyük son değer +
   fark (ev2-fark — Bugün'deki aynı hap), Neti'nin dürüst cümlesi, yumuşak çizgi + gradyan alan (Bugün çizgisiyle aynı dil), okunur eksen,
   dokun/sürükle ayrıntısı; ilk girişte bir kez çizilir. Segment ortak .db-seg, çubuk ortak .bar, kart ortak .card. Kurs halkaları: açık ton
   tamamlanan, koyu ton doğrulanan (kanıt tonu O7). Rozetler yol haritası madalyası: --hs-* aileleri, kilitli rozet "k" (gri taş).
   Yalnız ortak jetonlar; azaltılmış harekette her şey durağan. */
.gl3 .gl3-kart { margin: 0; padding: 16px; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--yuzey-2); }
.gl3-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gl3-bas h2, .gl3-bas h3 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--ink); }
.gl3-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 800; color: var(--violet); text-decoration: none; }
.gl3-sayac { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.gl3-not { margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
/* kahraman */
.gl3-seg.db-seg { margin: 12px 0 0; }
.gl3-ust { margin-top: 14px; }
/* io319c: "Neti sunar" — Bugün panosuyla AYNI bileşen (.pn-neti · .pn-balon · .pn-giris, v78io io318): Neti kartın sol üstünde durur,
   sözü kartın içindeki mor baloncukta. Burada yalnız Gelişim'e özgü ekler: Neti dokunulabilir düğme (resim bileşeni, kutu 141 px; resim
   taşma payıyla 176 px — Bugün'deki resimle aynı yerde), yazı makinesi imleci, ekran okuyucu metni. Neti kutusunda overflow yok (eşyalar taşar). */
.gl3-neti-kap { position: absolute; top: -74px; left: -2px; z-index: 1; display: block; padding: 0; border: 0; border-radius: 24px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gl3-neti-kap:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.gl3-neti-kap:active { transform: scale(.97); }
.gl3-neti-kap .neti { display: block; }
.gl3-soz.pn-giris { margin-bottom: 12px; min-height: 84px; cursor: default; }
.gl3-balon-ic { display: grid; }
.gl3-balon-hayal, .gl3-balon-metin { grid-area: 1 / 1; }
.gl3-balon-hayal { visibility: hidden; }
.gl3-balon-metin.yaziyor::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: gl3Imlec var(--motion-structural) steps(1) infinite alternate; }
.gl3-soz .gl3-balon-ipucu { color: var(--accent-yazi); }
.gl3-balon-ipucu[hidden] { display: none; }
.gl3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes gl3Imlec { 50% { opacity: 0; } }
.gl3-buyuk { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.gl3-buyuk b { font-family: var(--display); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gl3-buyuk span { font-size: 15px; font-weight: 700; color: var(--muted); }
.gl3-fark-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); }
/* fark hapı: Bugün panosunun .pn-fark renkleri (art / dus), burada hap biçiminde */
.gl3-fark.pn-fark { padding: 4px 10px; border-radius: 999px; font-size: 13.5px; background: var(--surface-2); }
.gl3-fark.pn-fark.art { background: color-mix(in srgb, var(--good-d) 14%, transparent); }
.gl3-fark.pn-fark.dus { background: color-mix(in srgb, var(--bad-d) 12%, transparent); }
/* Neti kartın üstünde durur; sayfa başlığına değmesin diye Bugün'den biraz daha fazla pay */
.gl3-sunum.pn-neti { margin-top: 74px; }
/* çizgi */
.gl3-graf { position: relative; margin-top: 10px; border-radius: 12px; outline: none; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.gl3-graf:focus-visible { box-shadow: var(--glow-focus); }
.gl3-graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.gl3-izgara { stroke: var(--line); stroke-dasharray: 3 5; }
.gl3-eksen { fill: var(--muted); font-family: var(--display); font-size: 12px; font-weight: 700; }
.gl3-a1 { stop-color: var(--accent); stop-opacity: .26; } .gl3-a2 { stop-color: var(--accent); stop-opacity: 0; }
.gl3-c1 { stop-color: var(--accent-2); } .gl3-c2 { stop-color: var(--accent); }
.gl3-cizgi { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 6px color-mix(in srgb, var(--accent) 30%, transparent)); }
.gl3-dikey { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .55; }
.gl3-hale { fill: var(--accent); opacity: .16; }
.gl3-uc { fill: var(--surface); stroke: var(--accent); stroke-width: 3.5; }
.gl3-ipucu rect { fill: var(--ink); }
.gl3-ipucu text { fill: var(--surface); font-family: var(--display); font-size: 13.5px; font-weight: 800; }
.gl3-ayrinti { min-height: 1.4em; margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; }
.gl3-gecmis .gl3-ayrinti { color: var(--ink-2); }
.gl3-graf-bos { display: grid; cursor: default; }
.gl3-hayal { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 10; }
.gl3-hayal-uc { fill: var(--accent); }
.gl3-bos-neti { position: absolute; top: -10px; right: 0; }
.gl3-bos-yazi { display: grid; gap: 2px; margin: 6px 0 0; }
.gl3-bos-yazi b { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--ink); }
.gl3-bos-yazi span { font-size: 13.5px; color: var(--muted); }
.gl3-bos-link { justify-self: start; display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 800; color: var(--violet); text-decoration: none; }
.gl3-sayilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.gl3-sayilar > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gl3-sayilar svg { margin-bottom: 2px; color: var(--violet); }
.gl3-sayilar > div:first-child svg { color: var(--alev); }
.gl3-sayilar b { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gl3-sayilar span { font-size: 12px; font-weight: 700; color: var(--muted); }
/* kurs halkaları */
.gl3-halkalar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.gl3-kurs { display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; color: var(--ink); text-decoration: none; transition: transform 90ms ease-out; }
.gl3-kurs:active { transform: scale(.96); }
.gl3-halka { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; }
.gl3-halka svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gl3-halka b { position: relative; font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gl3-h-iz { fill: none; stroke: var(--soft); stroke-width: 7; }
.gl3-h-tamam, .gl3-h-dogru { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset var(--motion-reveal) var(--ease-enter); }
.gl3-h-tamam { stroke: color-mix(in srgb, var(--gl3-renk) 45%, var(--surface)); }
.gl3-h-dogru { stroke: var(--gl3-renk); }
.gl3-kurs { --gl3-renk: var(--c-genel); }
.gl3-r-turkce { --gl3-renk: var(--c-turkce); } .gl3-r-mat { --gl3-renk: var(--c-mat); } .gl3-r-fizik { --gl3-renk: var(--c-fizik); } .gl3-r-kimya { --gl3-renk: var(--c-kimya); }
.gl3-r-biyoloji { --gl3-renk: var(--c-biyoloji); } .gl3-r-tarih { --gl3-renk: var(--c-tarih); } .gl3-r-cografya { --gl3-renk: var(--c-cografya); } .gl3-r-felsefe { --gl3-renk: var(--c-felsefe); }
.gl3-kurs-ad { max-width: 100%; overflow: hidden; font-size: 13.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.gl3-kurs-alt { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.gl3-halka-sk { justify-self: center; width: 64px; height: 64px; border-radius: 50%; }
.gl3-lejant { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.gl3-lejant i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.gl3-lejant i.koyu { margin-left: 6px; background: var(--accent); }
/* rozet madalyaları — harita çizim aileleri */
.gl3-rozet-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.gl3-rozet { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; text-align: center; }
.gl3-madalya { position: relative; display: block; width: 64px; }
.gl3-madalya svg { display: block; width: 100%; height: auto; overflow: visible; }
.gl3-madalya > i { position: absolute; top: 31%; right: 0; left: 0; display: grid; place-items: center; color: var(--gl3-ikon); }
.gl3-madalya > i svg { width: 24px; height: 24px; stroke-width: 2.3; }
.gl3-m0 { fill: var(--gl3-m0); } .gl3-m1 { fill: var(--gl3-m1); } .gl3-m2 { fill: var(--gl3-m2); opacity: .8; } .gl3-m3 { fill: var(--gl3-m3); }
.gl3-m-golge { fill: var(--ink); opacity: .1; }
.gl3-m-ic { fill: none; stroke: var(--hs-isik); stroke-opacity: .35; stroke-width: 2.4; stroke-linejoin: round; }
.gl3-a-v { --gl3-m0: var(--hs-v0); --gl3-m1: var(--hs-v1); --gl3-m2: var(--hs-v2); --gl3-m3: var(--hs-v3); --gl3-ikon: var(--hs-isik); }
.gl3-a-r { --gl3-m0: var(--hs-r0); --gl3-m1: var(--hs-r1); --gl3-m2: var(--hs-r2); --gl3-m3: var(--hs-r3); --gl3-ikon: var(--hs-isik); }
.gl3-a-g { --gl3-m0: var(--hs-g0); --gl3-m1: var(--hs-g1); --gl3-m2: var(--hs-g2); --gl3-m3: var(--hs-g3); --gl3-ikon: var(--hs-isik); }
.gl3-a-j { --gl3-m0: var(--hs-j0); --gl3-m1: var(--hs-j1); --gl3-m2: var(--hs-j2); --gl3-m3: var(--hs-j3); --gl3-ikon: var(--hs-isik); }
.gl3-a-o { --gl3-m0: var(--hs-o0); --gl3-m1: var(--hs-o1); --gl3-m2: var(--hs-o2); --gl3-m3: var(--hs-o3); --gl3-ikon: var(--hs-i0); }
.gl3-a-w { --gl3-m0: var(--hs-w0); --gl3-m1: var(--hs-w1); --gl3-m2: var(--hs-w2); --gl3-m3: var(--hs-w3); --gl3-ikon: var(--hs-i0); }
.gl3-a-p { --gl3-m0: var(--hs-p0); --gl3-m1: var(--hs-p1); --gl3-m2: var(--hs-p2); --gl3-m3: var(--hs-p3); --gl3-ikon: var(--hs-i0); }
.gl3-a-s { --gl3-m0: var(--hs-s0); --gl3-m1: var(--hs-s1); --gl3-m2: var(--hs-s2); --gl3-m3: var(--hs-s3); --gl3-ikon: var(--hs-i0); }
.gl3-a-k { --gl3-m0: var(--hs-k0); --gl3-m1: var(--hs-k1); --gl3-m2: var(--hs-k2); --gl3-m3: var(--hs-k3); --gl3-ikon: var(--hs-k1); }
.gl3-rozet.kilit .gl3-m-ic { stroke: var(--hs-k1); stroke-opacity: .5; stroke-dasharray: 3 4; }
.gl3-rozet.kilit .gl3-m-golge { opacity: .05; }
.gl3-rozet-ad { font-size: 12px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.gl3-rozet.kilit .gl3-rozet-ad { color: var(--muted); }
.gl3-rozet-bar.bar { width: 44px; height: 6px; margin-top: 2px; }
.gl3-rozet-say { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
/* giriş: kartlar sırayla yükselir, çizgi bir kez çizilir, alan / uç / ipucu sonra; kazanılan rozetler yerine oturur */
.gl3-ciz > * { animation: gl3Gir var(--motion-structural) var(--ease-enter) both; }
.gl3-ciz > :nth-child(2) { animation-delay: 90ms; } .gl3-ciz > :nth-child(3) { animation-delay: 160ms; } .gl3-ciz > :nth-child(n+4) { animation-delay: 220ms; }
.gl3-ciz .gl3-cizgi { stroke-dasharray: 1; animation: gl3Ciz var(--motion-cinematic) var(--ease-flow) 200ms both; }
.gl3-ciz .gl3-alan, .gl3-ciz .gl3-dikey, .gl3-ciz .gl3-ipucu, .gl3-ciz .gl3-ayrinti { animation: gl3Sol var(--motion-standard) var(--ease-enter) 1100ms both; }
.gl3-ciz .gl3-uc, .gl3-ciz .gl3-hale { transform-box: fill-box; transform-origin: center; animation: gl3Pop var(--motion-structural) var(--ease-spring) 1150ms both; }
.gl3-ciz .gl3-rozet.on .gl3-madalya { animation: gl3Pop var(--motion-structural) var(--ease-spring) 420ms both; }
.gl3-ciz .gl3-rozet.on:nth-child(2) .gl3-madalya { animation-delay: 480ms; } .gl3-ciz .gl3-rozet.on:nth-child(3) .gl3-madalya { animation-delay: 540ms; } .gl3-ciz .gl3-rozet.on:nth-child(n+4) .gl3-madalya { animation-delay: 600ms; }
.gl3-gec { animation: gl3Sol var(--motion-standard) var(--ease-enter); }
@keyframes gl3Gir { from { opacity: 0; transform: translateY(12px); } }
@keyframes gl3Ciz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gl3Sol { from { opacity: 0; } }
@keyframes gl3Pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (min-width: 700px) { .gl3 .gl3-sunum { grid-row: span 2; } }
@media (max-width: 350px) { .gl3-buyuk b { font-size: 34px; } .gl3-halka, .gl3-madalya { width: 56px; } .gl3-halka { height: 56px; } }
@media (prefers-reduced-motion: reduce) {
  .gl3-ciz > *, .gl3-ciz .gl3-cizgi, .gl3-ciz .gl3-alan, .gl3-ciz .gl3-dikey, .gl3-ciz .gl3-ipucu, .gl3-ciz .gl3-ayrinti, .gl3-ciz .gl3-uc, .gl3-ciz .gl3-hale, .gl3-ciz .gl3-rozet.on .gl3-madalya, .gl3-gec { animation: none; }
  .gl3-h-tamam, .gl3-h-dogru, .gl3-kurs { transition: none; }
  .gl3-balon-metin.yaziyor::after { animation: none; }
}

/* ===== v80io (io324) — YAYIN HAZIRLIK DENETİMİ, küçük düzeltmeler (docs/yayin/hazirlik-denetimi-2026-10.md).
   1. Üst durum kapsülü: dört parça birden görünürken (sayaç · seri · kalp · plan) 375 px'te "Ücretsiz" sağ kenara yapışıyor, 360 px'te
      kesiliyordu ("Ücretsi"). Dar ekranda parçalar bir kademe daha sıkışır; yine sığmıyorsa (≤366 px, Bugün dışı) plan ucu yalnız simgesini gösterir
      (erişilebilir adı düğmede durur).
   2. Mini oyunlar (Yıldırım, Eşleştir, Doğru mu?): 3-2-1 geri sayımı sol üst köşede, çıkış düğmesinin üstünde beliriyordu — Mağara'nın
      .mg-hud kuralı (üst şerit) mini oyunların aynı adlı katmanını da alıyordu. Mini oyunda katman sahnenin ortasıdır.
   3. Doğru mu? ve Eşleştir kartları her temada beyazdır (--uzeri); yazı --ink olduğu için koyu temada beyaz üstüne beyaz kalıyordu
      (ifade okunmuyordu). Beyaz kart üstündeki yazı temadan bağımsız koyu mürekkeptir.
   4. Tanışma › bölüm listesi: iki satıra saran bölüm adı alt satırın (puan türü · üniversite) üstüne biniyordu; satırlar içeriği kadar uzar. */
@media (max-width: 380px) {
  .ust-durum > .ud-parca { padding: 0 7px; gap: 4px; }   /* io333: min-width 40 px ödünü kalktı (tema düğmesi yok; taban 44 px) */
  .ust-durum > .ud-plan { padding: 0 10px 0 8px; gap: 4px; }
}
@media (max-width: 366px) {
  :root:not([data-rota="bugun"]) .ust-durum:has(> .ud-sayac:not([hidden])) .ud-plan span { display: none; }
  :root:not([data-rota="bugun"]) .ust-durum:has(> .ud-sayac:not([hidden])) .ud-plan { padding: 0 12px; }
}
.mg > .mg-hud { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; place-content: center; gap: 0; padding: 0; pointer-events: none; }
.dm-kart, .es-on { color: var(--mg-etiket-yazi); }
.dm-konu { color: color-mix(in srgb, var(--mg-etiket-yazi) 64%, var(--uzeri)); }
.tn-liste { grid-auto-rows: max-content; }

/* ===== v81io (io326) — YAYIN CİLASI 1: sistem düzeyi düzeltmeler (docs/yayin/hazirlik-denetimi-2026-10.md; jetonlar yukarıda
   "v81io · ORTAK JETON" bloğunda — bu blokta hex yok). İçindekiler: 1 TEK ŞIK BİLEŞENİ · 2 TEK ONAY SAYFASI · 3 KARŞITLIK. ===== */

/* --- 1. TEK ÇOKTAN SEÇMELİ ŞIK (.secenek) — docs/tasarim/bilesenler.md. Ölçüt ders oynatıcısının cevap kartı: tam genişlik,
   58 px, r16, 1,5 px kenar, yuvarlak harf rozeti. Durumlar: taban · üzerinde (hover) · basılı · .secili · .dogru · .yanlis ·
   [disabled]. Doğru/yanlış yalnız renkle anlatılmaz: rozet ✓ / ✕ ikonuna döner (UI.secenekIsaretle). Uzun metin sarar, harf
   rozeti dikeyde ortalı kalır; matematik (MAT.secenek) satırı büyütebilir; sağdan sola dilde (dir="rtl") rozet kendiliğinden
   sağa geçer (mantıksal özellikler). Yoğun liste: .secenekler.dar (süreli, 5 şıklı ekranlar). */
.secenekler { display: grid; gap: 10px; }
.secenek { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--sec-yuk); margin: 0; padding: 14px 16px; border: var(--sec-kenar) solid var(--sec-cizgi); border-radius: var(--radius-md); background: var(--sec-zemin); color: var(--sec-yazi); box-shadow: var(--sec-golge); font: inherit; font-size: var(--netci-yazi-17); font-weight: 600; line-height: 1.28; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--sec-basma) linear, border-color var(--sec-basma) linear, background-color var(--sec-basma) linear; }
.secenek-harf { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: var(--sec-kenar) solid var(--sec-cizgi); border-radius: 50%; color: var(--sec-harf); font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1; }
.secenek-metin { flex: 1; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.secenek-metin .mat-kesir { font-size: var(--sec-kesir-boy); }
.secenek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.secenek:active:not([disabled]), .secenek.basili { transform: translateY(1px); }
.secenek[disabled] { cursor: default; box-shadow: none; }
.secenek.dogru, .secenek.yanlis { box-shadow: none; }
.secenek.secili { border-color: var(--accent); background: var(--sec-secili-zemin); }
.secenek.secili .secenek-harf { border-color: var(--accent); background: var(--accent-yuzey); color: var(--sec-secili-yazi); }
.secenek.dogru { border-color: var(--sec-dogru); background: var(--sec-dogru-zemin); color: var(--sec-dogru-yazi); }
.secenek.yanlis { border-color: var(--sec-yanlis); background: var(--sec-yanlis-zemin); color: var(--sec-yanlis-yazi); }
.secenek.dogru .secenek-harf { border-color: var(--sec-dogru); background: var(--sec-dogru); color: var(--sec-rozet-yazi); }
.secenek.yanlis .secenek-harf { border-color: var(--sec-yanlis); background: var(--sec-yanlis); color: var(--sec-rozet-yazi); }
.secenekler.dar { gap: 8px; }
.secenekler.dar .secenek { min-height: 50px; padding: 9px 14px; font-size: 16px; }
.secenekler.dar .secenek-harf { width: 28px; height: 28px; }
@media (hover: hover) { .secenek:not([disabled]):hover { border-color: var(--sec-uzeri-kenar); } }
@media (prefers-reduced-motion: reduce) { .secenek { transition: none; } .secenek:active:not([disabled]), .secenek.basili { transform: none; } }
/* eski kapların iç boşlukları: şık artık kendi aralığını taşımaz (kap .secenekler ızgarası) */
.q .secenekler { margin-top: 2px; }
.io-siklar.secenekler .secenek[disabled]:not(.secili) { opacity: 1; }

/* --- 2. TEK ONAY SAYFASI (UI.onay) — alt sayfa (.sheet) kabuğu; başlık, kısa metin, iki düğme. Güvenli seçenek solda ve
   odakta; tehlikeli onay kırmızı (.btn.danger). Oyun sahnelerinin (Düello, hızlı oyunlar) üstünde de açılır. */
.onay-kutu { padding-bottom: env(safe-area-inset-bottom, 0px); }
.onay-ic { display: grid; gap: 8px; padding: 10px 20px 20px; text-align: center; justify-items: center; }
.onay-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--onay-ikon-zemin); color: var(--bad); }
.onay-baslik { margin: 4px 0 0; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.onay-metin { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--muted); }
.onay-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 10px; }
.onay-dugmeler .btn { width: 100%; min-height: 48px; justify-content: center; }

/* --- 3. KARŞITLIK (P1-10, P1-11 ve tarama bulguları) --- */
/* hızlı oyun sahnesi temadan bağımsız: ikincil yazı sahne jetonundan (açık temada --muted koyu griydi: 1,8:1) */
.mg .dm-ipucu, .mg .yl-konu, .mg .es-bilgi { color: var(--mg-sonuk); }
/* otomatik dönüş düğmesi: dolan şerit yazının altını AÇIYORDU (beyaz %20) — birincil düğmede beyaz yazı 3,7:1'e düşüyordu.
   Birincil düğmede şerit koyulaşır; hayalet düğmede (yazı mürekkep rengi) eski açık şerit kalır. */
.btn.oto-dugme:not(.ghost):not(.secondary) .oto-dolgu { background: var(--oto-dolgu-koyu); }

/* --- 4. OYUNLAR: Grand Prix kartı (P1-14). Kapak görselinin ortasında oyunun kendi logosu var; kart yazısı ve soldan gelen perde
   logonun üstüne biniyordu. Bu kartta görsel ÜSTTE tam oranıyla (2:1) durur ve alt kenarı kart zeminine erir; yazı görselin
   ALTINDA. Marka etiketi ("Grand Prix") görseldeki logoyla aynı şeyi söylediği için görünmez (ekran okuyucuda kalır). --- */
.oy-one[href$="/surus"] { display: flex; flex-direction: column; }
.oy-one[href$="/surus"]::after { content: none; }
.oy-one[href$="/surus"] .oy-gorsel { position: relative; inset: auto; flex: none; height: auto; aspect-ratio: 2 / 1; -webkit-mask-image: var(--oy-kapak-erime); mask-image: var(--oy-kapak-erime); }
.oy-one[href$="/surus"] .oy-metin { max-width: none; margin-top: -22px; padding-top: 0; }
.oy-one[href$="/surus"] .eyebrow.marka { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.oy-one[href$="/surus"] .oy-one-ad { margin-top: 0; }

/* ===== v82io (io325) — BUGÜN: HAFTALIK DENEME SATIRI. 2×2 kısayolun altında tek satır (ızgara aynı kalır); yalnız haftalık Türkiye
   Geneli denemesi açıkken ya da yarım deneme varken çizilir (bugun.js denemeSatiri). Kart yüzeyi paylaşılan .pn-kart'tan. */
.pn-deneme { display: flex; align-items: center; gap: 12px; padding: 12px; color: inherit; text-decoration: none; transition: transform 90ms var(--ease-snap); }
.pn-deneme:active { transform: translateY(1px); }
.pn-deneme > i { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: var(--tint); color: var(--accent-yazi); font-style: normal; }
.pn-deneme > span { flex: 1; min-width: 0; }
.pn-deneme b { display: block; font-size: 15px; font-weight: 800; }
.pn-deneme small { display: block; color: var(--muted); font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .pn-deneme { transition: none; } }

/* ===== v83io (io331) — SADELİK DENETİMİ: 44 px'ten kısa dokunma hedefleri. Ders çipleri 44 px olur; "Şimdilik geç" bağlantılarında
   yerleşim kaymasın diye yalnız dokunma alanı büyür (görünmez ::after, 36 → 44 px). */
.io .io-ders { min-height: 44px; }
.io .io-gec, .pn .pn-gec { position: relative; }
.io .io-gec::after, .pn .pn-gec::after { content: ""; position: absolute; inset: -4px 0; }

/* ===== v84io (io333) — SADELİK 2 (kurucu onayı): Gelişmiş bölümü · Gelişim sekmeleri · üst çubuk dengesi · Kartlar eylem çubuğu.
   1. .gelismis — ORTAK kapalı bölüm (details): başlık satırı bir kart; ok açılınca döner. Hesap ve Bildirimler kullanır.
   2. Gelişim ayrıntı sekmeleri yana kaymaz, sarar ("Daha fazla" ekran dışında kalmaz); altında bir satır açıklama.
   3. Üst çubuk: tema düğmesi kalktı → dar ekranda bölmeler yeniden en az 44 px (v80io'daki 40 px ödünü o satırdan silindi). 366 px altında
      Hesap'ta sayaç bölmesi gizlenir (aynı sayı hemen altında, profil kartında yazıyor), "Ücretsiz" yazısı kesilmeden kalır.
   4. Kartlar: #ktEylem çubuğu kartın ALT BANDININ üstünde durur (eski "cevapla, sonra kaydır" ipucunun yeri; kart boyu ve açıklamaya
      kalan yer değişmez). Cevaptan önce düğmeler yalnız klavye / okuyucu içindir; cevaptan sonra iki düğme görünür: beyaz "Kaydet" ve
      birincil "Sonraki kart" (her kart renginde okunur). "Tekrar gelsin" sola kaydırma ve klavyeyle kalır (öğretilmez). */
.gelismis { display: block; margin: 0 0 12px; }
.gelismis > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; margin: 0; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gelismis > summary::-webkit-details-marker { display: none; }
.gelismis > summary .ic { flex: none; color: var(--muted); transition: transform 200ms var(--ease-enter); }
.gelismis[open] > summary .ic { transform: rotate(180deg); }
.gelismis[open] > summary { margin-bottom: 12px; }
.gelismis > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gelismis-yazi { display: grid; gap: 2px; min-width: 0; }
.gelismis-yazi > b { font-size: 16px; font-weight: 800; color: var(--ink); }
.gelismis-dugmeler { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .gelismis > summary .ic { transition: none; } }
.subtabs.gl-sekmeler { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
.gl-sekme-alt { margin: 0 0 12px; }
@media (max-width: 366px) {
  :root[data-rota="hesap"] .ust-durum > .ud-sayac { display: none; }
  :root[data-rota="hesap"] .ust-durum:has(> .ud-sayac:not([hidden])) .ud-plan span { display: inline; }
  :root[data-rota="hesap"] .ust-durum:has(> .ud-sayac:not([hidden])) .ud-plan { padding: 0 10px 0 8px; }
}
:root { --kt-demo-tek: 2400ms; }
.kt-tam .kt-eylem-gizli { position: relative; z-index: 20; display: flex; align-items: center; gap: 8px; width: min(calc(100% - 32px), 408px, calc((100dvh - 236px) * 0.66 - 32px)); height: 52px; margin: -66px auto 14px; overflow: visible; clip: auto; white-space: normal; pointer-events: none; }   /* akışta net yükseklik 0: sahne (kart) eski boyunda; çubuk kartın alt bandının üstünde */
.kt-tam .kt-eylem-gizli[hidden] { display: none; }
.kt-tam .kt-eylem-gizli > button:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kt-tam .kt-eylem-gizli[data-cevapli="1"] > button:not([data-yon="tekrar"]) { position: static; transform: none; width: auto; height: auto; clip: auto; overflow: visible; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--kt-beyaz); color: var(--kt-koyu); box-shadow: var(--kt-yuzen-golge); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; pointer-events: auto; }
.kt-tam .kt-eylem-gizli[data-cevapli="1"] > button.btn { flex: 1; min-height: 52px; padding: 0 16px; border: 2px solid var(--kt-beyaz); background: var(--accent-yuzey); color: var(--accent-ink); font-size: 16px; }
.kt-tam .kt-eylem-gizli[data-cevapli="1"] > button:active { transform: translateY(1px); }
.kt-tam .kt-eylem-gizli[data-cevapli="1"] > button:focus-visible { outline: 2px solid var(--kt-beyaz); outline-offset: 2px; }
.kt-og-demo-tek .kt-mini, .kt-og-demo-tek .kt-el { animation: ktMiniTek var(--kt-demo-tek) ease-in-out infinite; }
.kt-og-demo-tek .kt-og-yon { animation: none; color: var(--accent-yazi); }
@keyframes ktMiniTek { 0%, 20%, 100% { transform: none; } 55%, 75% { transform: translateY(-34px); } }
@media (prefers-reduced-motion: reduce) { .kt-og-demo-tek .kt-mini, .kt-og-demo-tek .kt-el { animation: none; } }

/* ===== v85io (io332) — HATA AVI (docs/yayin/hata-avi-2026-10.md). Bu blokta hex yok.
   1 TABLET · BUGÜN PANOSU: io318'in iki sütun kuralı (io244 bloğunda) panonun taban kuralından (v78io: .pn { display: flex }) önce
     durduğu için hiç işlemiyordu; pano tablette sol yarıya büzülüyordu. Kural taban kuraldan SONRA yinelenir. ===== */
@media (min-width: 700px) {
  .pn { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: start; }
}

/* ===== v86io-hp (io336) — SON DÖNGÜ · HESAP, GELİŞİM AYRINTILARI, PLUS (docs/yayin/dongu-hesap-plus-2026-10.md). Bu blokta hex yok.
   1. Gözlemler / konu çubukları: konu adı sözcük ortasından bölünmez, ad sütunu genişler ("Fonksiyonl / ar" kırılıyordu).
   2. Radar etiketi SVG kutusundan taşınca kesilmez ("İstikrar" → "tikrar" görünüyordu).
   3. Hesap: arkadaş sayısı kodun altında ayrı satır; alt bağlantılar eşit aralıkla sarar.
   4. Grafikler: üç sayı kutusunda değer tek satır. */
.card .hbar { grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 44px auto; }
.hbar > span:first-child { overflow-wrap: break-word; word-break: normal; hyphens: none; }
svg.radar { overflow: visible; }
.pf-satir .pf-kod-say { display: block; font-size: var(--yazi-meta); color: var(--muted); margin-top: 2px; }
.hs-altlink { gap: 6px 16px; }
.goz-link { color: var(--accent-yazi); font-weight: 600; }
.stat b { white-space: nowrap; }
/* 5. Bildirimler: "Hatırlatmalar" kapalıyken altındaki satırlar soluk (ayar duruyor ama şu an etkisiz). */
.bl-kart.bl-kapali .bl-satir:not(:first-child) { opacity: .55; }
/* 6. Çevrimdışı şeridi üst çubuğun ÜSTÜNE biniyordu (sayaç ve Hesap düğmesi örtülüyordu): şerit varken kabuk bir şerit boyu aşağı iner. */
:root.cevrimdisi #app { padding-top: 33px; }
:root.cevrimdisi .top { top: 33px; }
.hs-veri .hs-sil { margin-top: 12px; }
/* 7. Günlük sınır kartı (ders · pratik · oyun): tek ortak düzen — başlık, bir cümle, küçük not, iki düğme alt alta sığar. */
.sinir-kart h3 { margin: 0 0 6px; }
.sinir-kart p { margin: 0 0 8px; }
.sinir-kart .row { margin-top: 12px; }

/* ===== v86io-ogrenme (io334) — SON DÖNGÜ, ÖĞRENME ALANI. Bu blokta renk yok; yalnız ölçü.
   1) Kayıt akışında sekme çubuğu gizli ama #view onun için 104 px alt boşluk bırakıyordu: her adımda 39 px'lik boş kaydırma vardı.
   2) 44 px'ten kısa dokunma hedefleri: görünüş aynı kalır, görünmez dokunma alanı büyür (v83io kalıbı) ya da en az yükseklik 44 px olur. */
:root[data-rota="onboarding"] #view { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.ev-yol .yol-ac, .kurs-seg .db-seg-b { position: relative; }
.ev-yol .yol-ac::after { content: ""; position: absolute; inset: -4px 0; }
.kurs-seg .db-seg-b::after { content: ""; position: absolute; inset: -7px 0; }
.ak-oyun-satir .ak-oyun-kart, .pr-degistir, .dn-resmi-satir .btn.sm { min-height: 44px; }
/* "%50 tamam": sayının etiketi */
.ak-yuzde small { font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--muted); }

/* ===== v87io-kod (io341) — TANITIM KODU satırı (plus/kod.js): tanışmanın son adımı, Plus sayfası, #/kod. Bu blokta renk yok; yalnız jeton.
   Tek sessiz satır: bağlantı görünümlü düğme (44 px dokunma alanı). Dokununca tek alan + tek düğme (48 px). İleti her durumda ne
   yapılacağını söyler; hata rengi --bad-d, olumlu --good-d (iki temada da okunur). */
.dk-yuva:empty { display: none; }
.dk-yuva { margin: 12px 0 0; }
.dk { display: grid; justify-items: center; gap: 2px; }
.dk-ac { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--accent-yazi); font: inherit; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dk-ac:active { transform: translateY(1px); }
.dk-form { display: grid; gap: 6px; width: 100%; text-align: left; }
.dk-etiket { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.dk-satir { display: flex; gap: 8px; }
.dk .dk-alan { flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: 0 14px; border-radius: 14px; border: 1px solid var(--hat-guclu); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.dk .dk-alan::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.dk-satir .btn { flex: none; min-height: 48px; }
.dk-satir.dk-iki { justify-content: center; flex-wrap: wrap; }
.dk-ileti { margin: 0; min-height: 20px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.dk-ileti.hata { color: var(--bad-d); }
.dk-ileti.tamam { color: var(--good-d); }
.dk-bagli { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-size: 15px; color: var(--ink); }
.dk-bagli svg { flex: none; color: var(--good-d); }
.dk-sayfa { display: grid; gap: 14px; max-width: 480px; margin: 0 auto; padding: 8px 0 24px; }
.dk-neti { display: grid; place-items: center; }
.dk-h1 { margin: 0; font-size: 26px; text-align: center; }
.dk-aciklama { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center; }

/* ===== v87io-sinif (io340) — DÜELLO SINIFLARI tam ekran: #/sinif… sayfaları Düello'nun sahnesidir (üst çubuk ve sekmeler yok; v77io ile
   aynı kural). Sayfaların kendi stili public/games/duello/duello.css "io340". Bu blokta renk yok. */
:root[data-rota="sinif"] .top, :root[data-rota="sinif"] #tabs, :root[data-rota="sinif"] .kt-fab { display: none; }
:root[data-rota="sinif"] #view { padding: 0; max-width: none; }

/* ===== v88io-kartfab (io345) — Ana Sayfa'da YÜZEN KARTLAR DÜĞMESİ geri (kurucu, 2026-10-27). io318 gizlemişti; düğme
   kart.js fabKur() ile zaten kuruluyor. Yalnız Bugün'de görünür; öteki rotalardaki gizleme kuralları aynen geçerli. Renk yok. */
:root[data-rota="bugun"] .kt-fab { display: inline-flex; }
:root[data-rota="bugun"] #view { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }   /* düğme (alttan 84 + 56 px) son kartı örtmesin */
:root body.as-acik .kt-fab { display: none; }   /* açılış kartı (aynı z katmanı) açıkken perdenin üstünde parlamasın; :root üstteki kuralı yener */

/* ===== v89io-duvar (io348) — ÖDEME DUVARI #/duvar: tam ekran (üst çubuk, sekmeler, yüzen Kartlar düğmesi yok; v87io-sinif ile aynı kural).
   Ekranın kendi stili public/plus/plus.css "io348". Bu blokta renk yok. */
:root[data-rota="duvar"] .top, :root[data-rota="duvar"] #tabs, :root[data-rota="duvar"] .kt-fab { display: none; }

/* ===== v90io-ana (io349) — ANA EKRAN "Bugünün planı önde": iki kutu (seri · bugünkü dakika), veri yokken "Bu hafta" yerine davet satırı.
   2×2 kısayol ve üçlü istatistik kalktı; eski .pn-uclu / .pn-kisayol / .pn-k kuralları eski blokta duruyor (eski bloklar düzenlenmez). Bu blokta renk yok. */
.pn-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pn-hafta-bos { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px; font-size: 14px; font-weight: 700; color: var(--muted); }
.pn-hafta-bos .ic { flex: none; color: var(--accent-yazi); }

/* v69io (io174): Netçi Grand Prix — oyun kökü, HUD, soru kartı, cevap çipleri, sonuç/garaj/lobi panelleri. */
/* Oyunun HUD'u temadan bağımsızdır: koyu cam üstünde beyaz yazı, beyaz kart ve çiplerde koyu yazı. Menüler (sonuç, Grand Prix,
   garaj, oda sonucu, lobi) uygulama jetonlarıyla açık/koyu temayı izler; hata kartı da tema kartıdır. Renkler yalnız var(--…);
   --gp-* jetonları rgb() ile yazılır (blokta hiç onaltılık renk yok). Zemin veren her kural yazı rengini de verir.
   Yazı 12 / 13.5 / 15 / 16 / 18 / 20 / 26 / 34 / 44 px; yarıçap 12 / 14 / 18 / 24 / 999 px / 50 %; süre 90 / 200 / 320 ms ya da
   var(--motion-*); z-index 0 / 1 / 10 / 20 / 30 / 40 / 50. Yalnız YENİ seçiciler.
   Soru ve şık metni asla kesilmez: kırpma, üç nokta ve tek satıra zorlama yok; en küçük basamakta öğe büyür (§4.5). Tek istisna
   oda HUD'undaki sürücü ADI (.gp-fark b): 24 harflik adlar 320 px'te üç noktayla kısalır (U-15).
   Her kare değişen değerler (--gp-x, --gp-y, --gp-opak, --gp-nitro) yalnız onları kullanan öğeye yazılır; yavaş çekim perdesi
   sınıf ile açılır (.gp-vinyet.acik, 320 ms saydamlık geçişi). Ad etiketinin saydamlığı sahnenin 200 ms solmasıdır (--gp-opak). */
:root {
  --gp-zemin: rgb(14 18 32); --gp-cam: rgb(12 14 30 / .72); --gp-cam-koyu: rgb(8 10 22 / .86); --gp-cam-cizgi: rgb(255 255 255 / .16);
  --gp-yazi: rgb(255 255 255); --gp-yazi-soluk: rgb(255 255 255 / .74); --gp-golge-yazi: 0 2px 10px rgb(6 8 18 / .75), 0 0 2px rgb(6 8 18 / .6);
  --gp-kart: rgb(255 255 255); --gp-kart-yazi: rgb(20 24 39); --gp-kart-soluk: rgb(91 101 119); --gp-cip-kenar: rgb(213 218 227);
  --gp-a: rgb(59 130 246); --gp-b: rgb(245 158 11); --gp-c: rgb(168 85 247); --gp-soru: rgb(138 144 166); --gp-altin: rgb(245 179 1);
  --gp-iyi: rgb(22 163 74); --gp-kotu: rgb(225 29 72); --gp-ben: rgb(124 92 255); --gp-hazal: rgb(255 107 90); --gp-sarp: rgb(20 184 166); --gp-cem: rgb(245 197 24);
  --gp-perde: rgb(6 8 18 / .72);
  --gp-golge-kart: 0 12px 30px -14px rgb(0 0 0 / .6); --gp-golge-cip: 0 8px 20px -10px rgb(0 0 0 / .55);
  --gp-kart-boy: 20px; --gp-cip-boy: 16px; --gp-vinyet: .35; --gp-nitro: 0; --gp-x: 0px; --gp-y: 0px; --gp-opak: 1; --gp-kart-alt: 0px; --gp-renk: rgb(47 107 255);
}

/* kök ve sahne: yükseklik korunan rota kuralından gelir; geniş ekranda dikey sütun */
.road-wrap.gp { position: relative; width: 100%; overflow: hidden; background: var(--gp-zemin); color: var(--gp-yazi); touch-action: none; user-select: none; -webkit-user-select: none; }
.road-wrap.gp.onarim .gp-ilerleme { visibility: hidden; }
.gp-sahne { position: relative; height: 100%; max-width: calc(100dvh * .62); margin-inline: auto; overflow: hidden; }
.gp-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.gp-vinyet { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 50% 55%, transparent 50%, var(--gp-perde) 100%); color: var(--gp-yazi); opacity: 0; transition: opacity 320ms var(--ease); }
.gp-vinyet.acik { opacity: var(--gp-vinyet); }
.gp-duyuru { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
/* yazı tipi ısıtma (WP-12): kart ve çip sınıflarıyla bir kez dizilen görünmez glif kümesi; yazı tipleri yüklenince kaldırılır */
.gp-isit { position: absolute; left: 0; top: 0; width: 280px; visibility: hidden; pointer-events: none; overflow: hidden; overflow: clip; }

/* HUD: üst sıra (duraklat · sıra · ilerleme · çık) ve bilgi sırası; her metin grubu camın üstünde, yalnız düğmeler dokunuş alır */
.gp-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none; display: grid; gap: 2px; padding: 8px 8px 0; }
.gp-ust { display: grid; grid-template-columns: 44px 48px minmax(0, 1fr) 44px; gap: 6px; align-items: center; }
.gp-dugme { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--gp-cam-cizgi); border-radius: 12px; background: var(--gp-cam); color: var(--gp-yazi); pointer-events: auto; cursor: pointer; }
.gp-cip, .gp-dugme, .gp-parca { transition: transform 90ms var(--ease-snap); }
.gp-dugme:focus-visible, .gp-cip:focus-visible, .gp-nitro:focus-visible, .gp-parca:focus-visible { outline: 2px solid var(--gp-ben); outline-offset: 2px; }
.gp-sira { height: 44px; display: flex; align-items: baseline; justify-content: center; gap: 1px; padding-top: 11px; border: 1px solid var(--gp-cam-cizgi); border-radius: 12px; background: var(--gp-cam); color: var(--gp-yazi); font-variant-numeric: tabular-nums; }
.gp-sira.degisti { animation: gpNabiz 200ms var(--ease) both; }
.gp-sira b { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; }
.gp-sira span { font-size: 12px; font-weight: 700; line-height: 1; }
.gp-ilerleme { position: relative; height: 44px; overflow: hidden; overflow: clip; }
.gp-ilerleme::after { content: ""; position: absolute; right: 7px; top: 12px; width: 4px; height: 20px; border-radius: 999px; background: var(--gp-yazi); color: var(--gp-yazi); }
.gp-ray { position: absolute; left: 10px; right: 10px; top: 19px; height: 6px; border-radius: 999px; background: var(--gp-cam-koyu); color: var(--gp-yazi); outline: 1px solid var(--gp-cam-cizgi); overflow: hidden; }
.gp-nokta { position: absolute; top: 0; left: 10px; right: 10px; height: 100%; transform: translateX(var(--gp-x)); pointer-events: none; }
.gp-nokta b { position: absolute; left: -10px; top: 12px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--gp-renk); color: var(--gp-kart-yazi); font-family: var(--display); font-size: 12px; font-weight: 800; line-height: 1; }
.gp-nokta.hazal { --gp-renk: var(--gp-hazal); }
.gp-nokta.sarp { --gp-renk: var(--gp-sarp); }
.gp-nokta.cem { --gp-renk: var(--gp-cem); }
.gp-nokta.ben b { border: 3px solid var(--gp-yazi); background: var(--gp-ben); color: var(--gp-yazi); }
.gp-nokta.hayalet b { border: 2px dashed var(--gp-yazi); background: transparent; color: var(--gp-yazi); }
.gp-ray .gp-nokta.oda { left: -100%; right: auto; width: 100%; background: var(--gp-ben); color: var(--gp-yazi); }
.gp-catal-cizgi { position: absolute; top: 0; left: 10px; right: 10px; height: 100%; transform: translateX(var(--gp-x)); pointer-events: none; }
.gp-catal-cizgi::before { content: ""; position: absolute; left: -1px; top: 15px; width: 2px; height: 14px; border-radius: 999px; background: var(--gp-yazi-soluk); color: var(--gp-yazi); }
.gp-catal-cizgi.rovans::before { background: var(--gp-altin); color: var(--gp-yazi); }
.gp-bilgi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 16px; }
.gp-sure, .gp-fark, .gp-soru-no { padding: 1px 8px; border-radius: 999px; background: var(--gp-cam); color: var(--gp-yazi); font-size: 12px; font-weight: 700; line-height: 14px; }
.gp-sure { grid-column: 1; justify-self: start; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gp-fark { grid-column: 2; justify-self: center; display: flex; align-items: baseline; gap: 4px; min-width: 0; max-width: 100%; }
.gp-fark span { flex: none; }
.gp-fark b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.gp-soru-no { grid-column: 3; justify-self: end; }

/* ad etiketleri (rakip ve oda sürücüleri): koyu cam hap, beyaz yazı, solda sürücü renginde 3 px çizgi; 200 ms solma sahneden (--gp-opak) */
.gp-etiketler { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; overflow: clip; }
/* duraklatma perdesi açıkken (arayüz .gp-sahne'ye data-durak yazar) donmuş bildirimler ve ad etiketleri perdenin altında görünmez */
.gp-sahne[data-durak] > .gp-orta, .gp-sahne[data-durak] > .gp-etiketler { visibility: hidden; }
.gp-etiket { position: absolute; left: 0; top: 0; max-width: 140px; padding: 2px 8px; border-left: 3px solid var(--gp-renk); border-radius: 12px; background: var(--gp-cam-koyu); color: var(--gp-yazi); font-size: 12px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; opacity: var(--gp-opak); transform: translate(calc(var(--gp-x) - 50%), calc(var(--gp-y) - 100%)); }
.gp-etiket.hazal { --gp-renk: var(--gp-hazal); }
.gp-etiket.sarp { --gp-renk: var(--gp-sarp); }
.gp-etiket.cem { --gp-renk: var(--gp-cem); }

/* soru kartı: beyaz kart, iç boşluk 12 px (içerik genişliği = min(G − 16, 560) − 24, §4.5); duyuru ayrı canlı bölgede */
.gp-kart { position: absolute; top: 76px; left: 8px; right: 8px; z-index: 20; max-width: 560px; margin-inline: auto; display: grid; gap: 4px; padding: 12px; border-radius: 18px; background: var(--gp-kart); color: var(--gp-kart-yazi); box-shadow: var(--gp-golge-kart); }
.gp-kart.acik { animation: gpKartGir 200ms var(--ease) both; }
.gp-kart.dogru { outline: 2px solid var(--gp-iyi); outline-offset: -2px; }
.gp-kart.yanlis { outline: 2px solid var(--gp-kotu); outline-offset: -2px; }
.gp-kart-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 20px; font-size: 12px; font-weight: 800; line-height: 1.25; }
.gp-kart-no { color: var(--gp-kart-soluk); }
.gp-kart.dogru .gp-kart-ust, .gp-kart.yanlis .gp-kart-ust { font-size: 16px; }
.gp-kart.dogru .gp-kart-ust .ic { color: var(--gp-iyi); }
.gp-kart.yanlis .gp-kart-ust .ic { color: var(--gp-kotu); }
.gp-rozet { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; background: var(--gp-cip-kenar); color: var(--gp-kart-yazi); font-size: 12px; font-weight: 800; line-height: 1.25; }
.gp-rozet.rovans { background: var(--gp-altin); color: var(--gp-kart-yazi); }
.gp-rozet.son { background: var(--gp-kart-yazi); color: var(--gp-kart); }
.gp-kart-ders { margin: 0; color: var(--gp-kart-soluk); font-size: 12px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.gp-kart-metin { margin: 0; font-family: var(--display); font-size: var(--gp-kart-boy); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.gp-kart-metin .mat, .gp-cip-metin .mat, .gp-dogrusu .mat { white-space: normal; }
.gp-ipucu { margin: 2px 0 0; color: var(--gp-kart-soluk); font-size: 12px; font-weight: 700; line-height: 1.3; }
.gp-dogrusu { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border-radius: 12px; background: var(--gp-kart); background: color-mix(in srgb, var(--gp-iyi) 12%, var(--gp-kart)); color: var(--gp-kart-yazi); font-size: 16px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }

/* orta: geri sayım, yükleniyor, bildirimler; kart açıkken bildirimler kartın ALTINDA başlar (--gp-kart-alt, U-5) */
.gp-orta { position: absolute; left: 16px; right: 16px; top: 38%; z-index: 30; pointer-events: none; display: grid; justify-items: center; gap: 8px; transform: translateY(-50%); }
.gp-kart:not([hidden]) ~ .gp-orta { top: max(38%, calc(var(--gp-kart-alt) + 12px)); transform: none; }
.gp-sayac { display: grid; justify-items: center; gap: 8px; text-align: center; }
.gp-sayac > div { display: grid; justify-items: center; gap: 2px; max-width: 280px; padding: 8px 14px; border-radius: 14px; background: var(--gp-cam-koyu); color: var(--gp-yazi); text-wrap: balance; }
.gp-sayac-baslik { font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.25; }
.gp-sayac-alt, .gp-sayac-rakip { color: var(--gp-yazi-soluk); font-size: 12px; font-weight: 700; line-height: 1.35; }
.gp-sayac-ipucu { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.gp-sayac-rakam { font-family: var(--display); font-size: clamp(64px, 24vw, 120px); font-weight: 800; line-height: 1; color: var(--gp-yazi); text-shadow: var(--gp-golge-yazi); animation: gpSayac 320ms var(--ease) both; }
.gp-sayac-rakam[data-basla] { font-size: clamp(44px, 14vw, 72px); }
.gp-sayac i { width: 28px; height: 28px; border: 3px solid var(--gp-cam-cizgi); border-top-color: var(--gp-yazi); border-radius: 50%; animation: spin var(--motion-cinematic) linear infinite; }
.gp-bildirim { max-width: 280px; padding: 8px 16px; border: 2px solid var(--gp-cam-cizgi); border-radius: 24px; background: var(--gp-cam-koyu); color: var(--gp-yazi); font-family: var(--display); font-size: 18px; font-weight: 800; line-height: 1.25; text-align: center; text-wrap: balance; overflow-wrap: anywhere; animation: gpToast 200ms var(--ease) both; }
.gp-bildirim.iyi { border-color: var(--gp-iyi); }
.gp-bildirim.uyari { border-color: var(--gp-altin); }

/* dok: düzlükte hız · seri · nitro, bölgede cevap çipleri (şerit sırasıyla); dok yukarı doğru büyür; koç balonu yalnız düzlükte */
.gp-dok { position: absolute; left: 8px; right: 8px; bottom: 0; z-index: 20; max-width: 560px; margin-inline: auto; display: grid; gap: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.gp-koc { justify-self: center; position: relative; max-width: 260px; margin-bottom: 4px; padding: 8px 12px; border-radius: 14px; background: var(--gp-kart); color: var(--gp-kart-yazi); box-shadow: var(--gp-golge-cip); font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: center; text-wrap: balance; pointer-events: none; }
.gp-koc::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; margin-left: -6px; background: var(--gp-kart); color: var(--gp-kart-yazi); transform: rotate(45deg); }
.gp-surus-bilgi { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: end; gap: 8px; }
.gp-hiz { justify-self: start; display: flex; align-items: baseline; gap: 4px; padding: 6px 10px; border-radius: 14px; background: var(--gp-cam); color: var(--gp-yazi); }
.gp-hiz b { min-width: 3ch; font-family: var(--mono); font-size: 26px; font-weight: 800; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; text-shadow: var(--gp-golge-yazi); }
.gp-hiz span { font-size: 12px; font-weight: 700; }
.gp-seri { display: grid; grid-template-columns: repeat(3, 24px); justify-items: center; gap: 4px; padding: 8px 10px; border-radius: 14px; background: var(--gp-cam); color: var(--gp-yazi); }
.gp-seri i { width: 24px; height: 10px; border-radius: 999px; background: var(--gp-cam-cizgi); color: var(--gp-yazi); }
.gp-seri i.dolu { background: var(--gp-altin); color: var(--gp-kart-yazi); }
.gp-seri span { grid-column: 1 / -1; font-size: 12px; font-weight: 700; line-height: 1; }
.gp-nitro { position: relative; width: 64px; height: 64px; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 0; border: 1px solid var(--gp-cam-cizgi); border-radius: 50%; background: var(--gp-cam); color: var(--gp-yazi); pointer-events: auto; cursor: pointer; }
.gp-nitro .ic, .gp-nitro span { position: relative; }
.gp-nitro span { font-size: 12px; font-weight: 800; line-height: 1; }
.gp-nitro:disabled { opacity: .6; cursor: default; }
.gp-nitro.hazir { border-color: var(--gp-yazi); background: var(--gp-ben); background: color-mix(in srgb, var(--gp-ben) 82%, var(--gp-zemin)); color: var(--gp-yazi); opacity: 1; animation: gpNabiz calc(var(--motion-cinematic) + 100ms) ease-in-out infinite; }
.gp-nitro.aktif { background: conic-gradient(var(--gp-ben) calc(var(--gp-nitro) * 1turn), var(--gp-cam) 0); color: var(--gp-yazi); opacity: 1; }
.gp-nitro.aktif::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--gp-cam-koyu); color: var(--gp-yazi); }

/* cevap çipleri: K = 3 üç sütun, K = 2 iki sütun; içerik genişliği (§4.5) = sütun − 16 (kenar 2 + dolgu 6). Seçilene kadar nötr
   (hedef görünümü yok, U-4); kilitten sonra çipler sıkışır (yalnız rozet, en az 44 px) ve "Doğrusu" kartta okunur (U-6). */
.gp-cipler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gp-cipler.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-cip { min-height: 56px; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 8px 6px; border: 2px solid var(--gp-cip-kenar); border-radius: 14px; background: var(--gp-kart); color: var(--gp-kart-yazi); box-shadow: var(--gp-golge-cip); text-align: center; pointer-events: auto; cursor: pointer; }
.gp-cip-rozet { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; line-height: 1; }
.gp-cip-rozet em { display: inline-flex; font-style: normal; }
.gp-cip-rozet em:empty { display: none; }
.gp-sekil { width: 16px; height: 16px; flex: none; }
.gp-sekil > * { stroke: var(--gp-kart-yazi); stroke-width: 1.5px; stroke-linejoin: round; }
.gp-sekil.daire { color: var(--gp-a); }
.gp-sekil.ucgen { color: var(--gp-b); }
.gp-sekil.kare { color: var(--gp-c); }
.gp-cip-metin { display: block; width: 100%; font-family: var(--display); font-size: var(--gp-cip-boy); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.gp-cip.rovans { border-color: var(--gp-altin); }
.gp-cip.secili { border-color: var(--gp-ben); background: var(--gp-kart); background: color-mix(in srgb, var(--gp-ben) 10%, var(--gp-kart)); color: var(--gp-kart-yazi); transform: translateY(-4px); }
.gp-cip:active, .gp-dugme:active, .gp-parca:active { transform: translateY(1px); }
.gp-cip.dogru { border-color: var(--gp-iyi); }
.gp-cip.yanlis { border-color: var(--gp-kotu); }
.gp-cip.soluk { opacity: .5; }
.gp-cip.dogru, .gp-cip.yanlis, .gp-cip.soluk { min-height: 44px; padding-block: 6px; }
.gp-cip.dogru .gp-cip-metin, .gp-cip.yanlis .gp-cip-metin, .gp-cip.soluk .gp-cip-metin { display: none; }
.gp-cip.dogru .gp-cip-rozet .ic { color: var(--gp-iyi); }
.gp-cip.yanlis .gp-cip-rozet .ic { color: var(--gp-kotu); }

/* duraklatma perdesine eklenen düğmeler (.oy-durak kuralları korunur; perdenin span rengi düğmelere sızmaz) */
.gp-durak-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; padding-inline: 16px; }
.gp-durak-dugmeler span { color: inherit; font-size: inherit; }
.gp-durak-ses[aria-pressed="false"] .ic { opacity: .45; }
/* çıkış sorusunun onay düğmesi oyunda temadan bağımsız (koyu temada mor üstüne beyaz 4,35:1 kalıyordu) */
.gp-sahne .oy-onay-evet { background: var(--gp-ben); background: color-mix(in srgb, var(--gp-ben) 85%, var(--gp-zemin)); color: var(--gp-yazi); }
/* oyundaki ve lobideki birincil düğme: uygulama degradesinin koyu temadaki açık ucu beyaz yazıyla 3,15:1 kalıyordu; burada iki temada da 5,4:1 */
.gp-sahne .oy-onay-kutu b { text-wrap: balance; }
.gp-sahne .btn:not(.ghost), .gp-lobi .btn:not(.ghost) { background: var(--gp-ben); background: color-mix(in srgb, var(--gp-ben) 85%, var(--gp-zemin)); color: var(--gp-yazi); }

/* paneller: sonuç, Grand Prix, garaj, oda sonucu (uygulama teması, perdenin üstünde kart) */
.gp-panel { position: absolute; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--gp-perde); color: var(--gp-yazi); }
.gp-panel[data-ekran="garaj"] { background: linear-gradient(180deg, transparent 0%, transparent 32%, var(--gp-perde) 44%); color: var(--gp-yazi); }
.gp-sonuc, .gp-garaj, .gp-oda-sonuc { max-width: 560px; margin-inline: auto; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: none; }
.gp-panel[data-ekran="garaj"] .gp-garaj { margin-top: 40dvh; }
.gp-sonuc-ust { display: grid; justify-items: center; gap: 2px; text-align: center; }
.gp-sonuc-ust .eyebrow { margin: 0; }
.gp-panel h2:focus, .gp-hata h2:focus { outline: none; }
.gp-sonuc-ust > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; }
.gp-sonuc-ust h2 { font-size: 26px; font-weight: 800; line-height: 1.15; }
.gp-sonuc-ust > div + p { margin: 0; color: var(--muted); font-size: 15px; font-weight: 700; }
.gp-sonuc-sira { font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; color: var(--accent); }
.gp-yildizlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gp-yildiz { display: grid; justify-items: center; align-content: start; gap: 2px; color: var(--muted); text-align: center; }
.gp-yildiz .ic { width: 26px; height: 26px; }
.gp-yildiz span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.25; }
.gp-yildiz.dolu { color: var(--ink); animation: gpYildiz 320ms var(--ease) both; }
.gp-yildiz.dolu .ic { fill: var(--gp-altin); }
.gp-yildiz.dolu:nth-child(2) { animation-delay: 90ms; }
.gp-yildiz.dolu:nth-child(3) { animation-delay: 200ms; }
.gp-istatistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; margin: 0; }
.gp-istatistik div { display: grid; align-content: space-between; gap: 2px; padding: 6px 4px; border-radius: 12px; background: var(--bg); color: var(--ink); text-align: center; }
.gp-istatistik dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.gp-istatistik dd { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gp-rekor, .gp-acilan { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.gp-rekor .ic, .gp-acilan .ic { flex: none; color: var(--accent); }
.gp-acilan { background: color-mix(in srgb, var(--gp-altin) 16%, var(--surface)); color: var(--ink); }
.gp-dugmeler { display: grid; gap: 8px; }
.gp-dugmeler .btn { width: 100%; white-space: normal; text-align: center; }
/* io190: sonuç ekranlarında düğmeler iki sütun (birincil ve tek kalan son düğme tam genişlik); hepsi kaydırmadan görünür */
.gp-sonuc .gp-dugmeler, .gp-oda-sonuc .gp-dugmeler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-sonuc .gp-dugmeler > :first-child, .gp-oda-sonuc .gp-dugmeler > :first-child, .gp-sonuc .gp-dugmeler > :nth-child(even):last-child, .gp-oda-sonuc .gp-dugmeler > :nth-child(even):last-child { grid-column: 1 / -1; }
.gp-sonuc .gp-dugmeler .btn.ghost, .gp-oda-sonuc .gp-dugmeler .btn.ghost { min-height: 46px; padding: 6px 10px; font-size: 15px; line-height: 1.25; }
.gp-kacan { display: grid; gap: 8px; }
.gp-kacan h3, .gp-sonuc section > h3, .gp-garaj-grup h3 { font-size: 16px; font-weight: 800; }
.gp-kacan ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gp-kacan-oge { display: grid; justify-items: start; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); overflow-wrap: anywhere; }
.gp-kacan-oge p { margin: 0; font-size: 15px; line-height: 1.4; }
.gp-kacan-oge > p:first-child { font-weight: 800; }
.gp-kacan-oge s { text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
.gp-kacan-oge s * { text-decoration: inherit; }                /* io194: kesir/kök (inline-flex) de çizili */
.gp-neden { display: grid; gap: 4px; padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--ink); }
.gp-neden p { font-size: 13.5px; line-height: 1.45; }
.gp-sonuc section > h3 { margin-bottom: 6px; }
.gp-tablo { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.gp-tablo th { padding: 0 6px 6px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: left; }
.gp-tablo td { padding: 6px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.gp-oda-sonuc .gp-tablo th, .gp-oda-sonuc .gp-tablo td:not(:nth-child(2)) { white-space: nowrap; }
.gp-oda-sonuc .gp-sonuc-ust h2 { font-size: 20px; }
.gp-tablo th:last-child, .gp-tablo td:last-child { text-align: right; }
.gp-tablo-satir.ben td { font-weight: 800; background: var(--bg); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--ink); }
.gp-tablo i, .gp-podyum i { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--gp-renk); color: var(--ink); vertical-align: 1px; }
.gp-tablo i.ben, .gp-podyum li.ben i { background: var(--gp-ben); color: var(--ink); }
.gp-tablo i.hazal, .gp-podyum li.hazal i { background: var(--gp-hazal); color: var(--ink); }
.gp-tablo i.sarp, .gp-podyum li.sarp i { background: var(--gp-sarp); color: var(--ink); }
.gp-tablo i.cem, .gp-podyum li.cem i { background: var(--gp-cem); color: var(--ink); }
.gp-not { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.gp-podyum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gp-podyum li { display: grid; justify-items: center; align-content: end; gap: 2px; padding: 8px 4px; border-radius: 14px; background: var(--bg); color: var(--ink); text-align: center; overflow-wrap: anywhere; }
.gp-podyum li:nth-child(1) { order: 2; min-height: 104px; background: var(--bg); background: color-mix(in srgb, var(--gp-altin) 20%, var(--surface)); color: var(--ink); }
.gp-podyum li:nth-child(2) { order: 1; min-height: 92px; }
.gp-podyum li:nth-child(3) { order: 3; min-height: 80px; }
.gp-podyum li > span:first-child { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; }
.gp-podyum li > span:last-child { color: var(--muted); font-size: 12px; font-weight: 700; }
.gp-podyum b { font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.gp-garaj > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gp-garaj h2 { font-size: 26px; font-weight: 800; }
.gp-garaj > p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.gp-garaj-grup { display: grid; gap: 8px; }
.gp-garaj-grup > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gp-parca { min-height: 44px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 700; line-height: 1.25; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.gp-parca > .ic { color: var(--muted); }
.gp-parca em { display: inline-flex; font-style: normal; color: var(--accent); }
.gp-parca.secili { border-color: var(--accent); background: var(--surface); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--ink); }
.gp-parca.kilitli { color: var(--muted); background: var(--bg); cursor: default; }
.gp-parca.kilitli em { color: var(--muted); }
.gp-parca-renk { width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; background: var(--gp-renk); color: var(--ink); }
.gp-parca-kosul { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.3; }

/* yarış odası lobisi (#view'in 16 px kenarı korunan rota kuralından); dokunma hedefleri en az 44 px (U-10) */
.gp-lobi { display: grid; gap: 12px; padding-block: 12px; }
.gp-lobi .btn.sm { min-height: 44px; }
.gp-lobi-geri { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.gp-lobi-kod { font-family: var(--mono); font-size: 34px; font-weight: 800; letter-spacing: .12em; }
.gp-oda-not { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* hata ekranları: perdenin üstünde tema kartı; "baglam" engellemeyen bir haptır */
.gp-hata { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: var(--gp-perde); color: var(--gp-yazi); }
.gp-hata > div { width: 100%; max-width: 360px; display: grid; justify-items: center; gap: 8px; padding: 20px 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); text-align: center; }
.gp-hata > div > .ic { width: 34px; height: 34px; color: var(--bad); }
.gp-hata h2 { font-size: 20px; font-weight: 800; line-height: 1.2; }
.gp-hata p { margin: 0; font-size: 15px; line-height: 1.45; }
.gp-hata .gp-dugmeler { width: 100%; margin-top: 8px; }
.gp-hata[data-tur="baglam"] { z-index: 50; place-items: start center; padding-top: 128px; background: transparent; pointer-events: none; }
.gp-hata[data-tur="baglam"] > div { width: auto; padding: 10px 16px; border-color: var(--gp-cam-cizgi); border-radius: 999px; background: var(--gp-cam-koyu); color: var(--gp-yazi); }
.gp-hata[data-tur="baglam"] h2 { font-size: 15px; }

/* yatay telefon uyarısı (tüm ekran, gerçek metin) ve QA metin sığdırma görünümü */
.gp-yatay { position: fixed; inset: 0; z-index: 50; display: none; place-content: center; justify-items: center; gap: 8px; padding: 24px; background: var(--bg); color: var(--ink); font-size: 18px; text-align: center; }
.gp-yatay b { font-family: var(--display); font-size: 20px; font-weight: 800; }
.gp-metin-harnes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.gp-metin-harnes .gp-sahne { flex: none; width: var(--gp-x); height: var(--gp-y); max-width: none; margin-inline: 0; border: 1px solid var(--gp-cam-cizgi); border-radius: 18px; background: var(--gp-zemin); color: var(--gp-yazi); }

@keyframes gpNabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes gpKartGir { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gpSayac { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gpToast { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gpYildiz { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 400px) {
  .gp-hud { padding: 8px 10px 0; }
  .gp-ust { grid-template-columns: 48px 52px minmax(0, 1fr) 48px; gap: 8px; }
  .gp-dugme { width: 48px; height: 48px; }
  .gp-sira { height: 48px; padding-top: 13px; }
  .gp-ilerleme { height: 48px; }
  .gp-ilerleme::after { top: 14px; }
  .gp-ray { top: 21px; }
  .gp-nokta b { top: 14px; }
  .gp-catal-cizgi::before { top: 17px; }
  .gp-sure, .gp-fark, .gp-soru-no { font-size: 13.5px; line-height: 16px; }
  .gp-kart { top: 80px; }
  .gp-bildirim, .gp-sayac > div { max-width: 340px; }
  .gp-koc { max-width: 300px; font-size: 15px; }
  .gp-surus-bilgi { grid-template-columns: minmax(0, 1fr) auto 72px; }
  .gp-seri { grid-template-columns: repeat(3, 28px); }
  .gp-seri i { width: 28px; height: 12px; }
  .gp-nitro { width: 72px; height: 72px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  :root[data-rota="surus"] .gp-yatay { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-nitro.hazir, .gp-sayac-rakam, .gp-bildirim, .gp-kart.acik, .gp-yildiz.dolu, .gp-sira.degisti, .gp-sayac i { animation: none; }
  .gp-cip, .gp-dugme, .gp-parca, .gp-vinyet { transition: none; }
}