/* ══════════════════════════════════════════════════════════════════════════
   KADEME TEMASI — ÖNİZLEME SÜRÜMÜ (Ç-F)   ·   ENTEGRE EDİLMEDİ, ONAY BEKLİYOR
   ──────────────────────────────────────────────────────────────────────────
   Öğrenci test ekranını (odm2/ogrenci_portal.html #examScreen / #resultScreen,
   yani `.kraft` kapsam kökü) ÖĞRENCİNİN KADEMESİNE göre giydirir:
        ilkokul (1-4)  → oyunsu     ortaokul (5-8) → ara     lise (9-12) → sade
   Aydınlık / koyu iki şema, her kademede ayrı ölçülmüş palet.

   NASIL ÇALIŞIR (yalnız CSS değişkeni + küçük sınıf eşlemesi, JS yok):
     · Kök: `.kraft[data-kademe-tema="ilkokul|ortaokul|lise"]`  (öznitelik YOKSA
       bu dosyadaki HİÇBİR kural eşleşmez → bugünkü görünüm bayt-bayt aynı = geri alma).
     · Şema: `[data-kademe-renk="koyu"]` (yoksa aydınlık). Şemayı CSS değil JS çözer
       (localStorage.matai_tema | sistem) → media-query ile öznitelik iki kaynağa bölünmez.
     · Bölüm A: kademe × şema JETONLARI (--kt-*). Bölüm B: portalın KENDİ semantik
       değişkenlerini (--text, --text2, --surface, --border, --emerald, --red …) bu
       jetonlara BAĞLAR → portalda `style="color:var(--text2)"` diyen satır-içi stiller
       kendiliğinden temaya uyar. Bölüm C: sınıf eşlemesi (kraft_tema.css + soru_sablonu.css
       kurallarından daha özgül: 0,3,0 ≥ 0,2,0). Bölüm D: kademe farkları. Bölüm E: hareket.
     · Yüklenme sırası: portal <style> → soru_sablonu.css → kraft_tema.css → BU DOSYA.

   KURALLAR (proje belleği): palet RENKTİR, TON DEĞİL → her renk jetonu `.kraft[data-kademe-tema]`
   TABAN kapsamda tanımlı, kullanımlar `var(--kt-x, #yedek)` yedekli (tema dışı = SVG fill SİYAH tuzağı).
   Yeni font/kütüphane YOK: yalnız kraft_fontlar.css'in Poppins 400/600/700 ve ElYazi 400/700'ü.
   Dokunma hedefi: ilkokul ≥ 56px, ortaokul ≥ 48px, lise ≥ 44px. Asgari punto: ilkokul 18px,
   diğerleri 14px (soru gövdesi ilkokul 22px, ortaokul 18px, lise 17px). Kontrast: ≥ 4.5:1
   (metin ve rozet içi harf), ≥ 3:1 (odak halkası, seçili çerçeve, etkileşimli kenar) —
   `olc_kontrast.js` bu dosyadaki jetonları OKUYUP hesaplar, tabloyu belge/'ye yazar.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── A · JETONLAR ───────────────────────── */

/* ── A1 · İLKOKUL (oyunsu) — AYDINLIK ── */
.kraft[data-kademe-tema="ilkokul"] {
  --kt-zemin: radial-gradient(circle at 12% 8%, #FDE68A 0%, rgba(253,230,138,0) 34%),
              radial-gradient(circle at 92% 6%, #FBCFE8 0%, rgba(251,207,232,0) 36%),
              linear-gradient(160deg, #7DD3FC 0%, #A5B4FC 55%, #D8B4FE 100%);
  --kt-kart: #FFFFFF;  --kt-kart-2: #F3F0FF;
  --kt-cizgi: #C4B5FD;  --kt-cizgi-guclu: #7C6FD0;
  --kt-metin: #1E1B4B;  --kt-metin-2: #4A4580;
  --kt-vurgu: #4F46E5;  --kt-vurgu-ustu: #FFFFFF;  --kt-vurgu-metin: #4338CA;
  --kt-vurgu-zemin: #E0E7FF;  --kt-secili-kenar: #4F46E5;
  --kt-dogru: #166534;  --kt-dogru-ustu: #FFFFFF;  --kt-dogru-zemin: #DCFCE7;  --kt-dogru-metin: #14532D;
  --kt-yanlis: #BE123C; --kt-yanlis-ustu: #FFFFFF; --kt-yanlis-zemin: #FFE4E6; --kt-yanlis-metin: #881337;
  --kt-uyari: #92400E;  --kt-uyari-zemin: #FEF3C7; --kt-uyari-metin: #78350F;
  --kt-odak: #1E1B4B;  --kt-odak-sayfa: #1E1B4B;   /* odak halkası: kart üstünde | sayfa zemini üstünde */
  --kt-sayfa-metin: #1E1B4B;   /* sayfa zemininin DOĞRUDAN üstündeki yazı (inceleme başlığı) */
  --kt-ok-zemin: #FDE047; --kt-ok-yazi: #1E1B4B; --kt-ok-kenar: #1E1B4B;
  --kt-cta: #312E81; --kt-cta-ustu: #FDE047;   /* sayfa düzeyi birincil düğme (Sınavı Bitir) */
  --kt-golge: 0 10px 0 rgba(67, 56, 202, .18), 0 18px 36px rgba(30, 27, 75, .22);
  /* şekil + yazı ölçeği */
  --kt-r-kart: 30px; --kt-r-sik: 22px; --kt-r-harf: 50%; --kt-r-dugme: 999px; --kt-kenar: 3px;
  --kt-harf-boy: 56px; --kt-hedef: 56px;
  --kt-rozet: 24px; --kt-rozet-ofset: -8px; --kt-nokta: 48px;
  --kt-p-soru: clamp(1.375rem, 1.25rem + .6vw, 1.625rem);   /* 22px → 26px */
  --kt-p-sik: clamp(1.25rem, 1.15rem + .4vw, 1.4rem);        /* 20px → 22px */
  --kt-p-meta: 1.125rem;                                      /* 18px: en küçük yazı */
  --kt-satir: 1.55;
  --kt-font-baslik: 'ElYazi', 'Poppins', cursive;
  --kt-font-govde: 'Poppins', "Segoe UI", system-ui, sans-serif;
  --kt-sure: 220ms; --kt-egri: cubic-bezier(.34, 1.56, .64, 1);
}
/* ── A1k · İLKOKUL — KOYU ("gece") ── */
.kraft[data-kademe-tema="ilkokul"][data-kademe-renk="koyu"] {
  --kt-zemin: radial-gradient(circle at 14% 10%, rgba(253,224,71,.55) 0, rgba(253,224,71,0) 3px) ,
              radial-gradient(circle at 78% 22%, rgba(255,255,255,.7) 0, rgba(255,255,255,0) 2px),
              radial-gradient(circle at 40% 60%, rgba(255,255,255,.5) 0, rgba(255,255,255,0) 2px),
              linear-gradient(160deg, #1E1B4B 0%, #312E81 58%, #4C1D95 100%);
  --kt-kart: #2B2670;  --kt-kart-2: #373188;
  --kt-cizgi: #6D66C8;  --kt-cizgi-guclu: #A29BF5;
  --kt-metin: #F5F3FF;  --kt-metin-2: #D4D0FF;
  --kt-vurgu: #FBBF24;  --kt-vurgu-ustu: #1E1B4B;  --kt-vurgu-metin: #FDE68A;
  --kt-vurgu-zemin: #3F3996;  --kt-secili-kenar: #FDE047;
  --kt-dogru: #34D399;  --kt-dogru-ustu: #022C22;  --kt-dogru-zemin: #0F4D3A;  --kt-dogru-metin: #D1FAE5;
  --kt-yanlis: #FDA4AF; --kt-yanlis-ustu: #4C0519; --kt-yanlis-zemin: #5B1230; --kt-yanlis-metin: #FFE4E6;
  --kt-uyari: #FBBF24;  --kt-uyari-zemin: #5A3A0B; --kt-uyari-metin: #FEF3C7;
  --kt-odak: #FDE047;  --kt-odak-sayfa: #FDE047;   /* odak halkası: kart üstünde | sayfa zemini üstünde */
  --kt-sayfa-metin: #F5F3FF;   /* sayfa zemininin DOĞRUDAN üstündeki yazı (inceleme başlığı) */
  --kt-ok-zemin: #FBBF24; --kt-ok-yazi: #1E1B4B; --kt-ok-kenar: #FDE68A;
  --kt-cta: #FBBF24; --kt-cta-ustu: #1E1B4B;   /* sayfa düzeyi birincil düğme (Sınavı Bitir) */
  --kt-golge: 0 10px 0 rgba(0, 0, 0, .28), 0 18px 36px rgba(0, 0, 0, .4);
}

/* ── A2 · ORTAOKUL (ara) — AYDINLIK ── */
.kraft[data-kademe-tema="ortaokul"] {
  --kt-zemin: radial-gradient(circle at 30% 12%, #2F5BD6 0%, #1E3A8A 48%, #172554 100%);
  --kt-kart: #FFFFFF;  --kt-kart-2: #F1F5F9;
  --kt-cizgi: #CBD5E1;  --kt-cizgi-guclu: #64748B;
  --kt-metin: #0F172A;  --kt-metin-2: #475569;
  --kt-vurgu: #1D4ED8;  --kt-vurgu-ustu: #FFFFFF;  --kt-vurgu-metin: #1D4ED8;
  --kt-vurgu-zemin: #EFF6FF;  --kt-secili-kenar: #1D4ED8;
  --kt-dogru: #15803D;  --kt-dogru-ustu: #FFFFFF;  --kt-dogru-zemin: #DCFCE7;  --kt-dogru-metin: #14532D;
  --kt-yanlis: #B91C1C; --kt-yanlis-ustu: #FFFFFF; --kt-yanlis-zemin: #FEE2E2; --kt-yanlis-metin: #7F1D1D;
  --kt-uyari: #B45309;  --kt-uyari-zemin: #FEF3C7; --kt-uyari-metin: #78350F;
  --kt-odak: #B45309;  --kt-odak-sayfa: #FDE047;   /* odak halkası: kart üstünde | sayfa zemini üstünde */
  --kt-sayfa-metin: #FFFFFF;   /* sayfa zemininin DOĞRUDAN üstündeki yazı (inceleme başlığı) */
  --kt-ok-zemin: #FFFFFF; --kt-ok-yazi: #1D4ED8; --kt-ok-kenar: #FFFFFF;
  --kt-cta: #FBBF24; --kt-cta-ustu: #0F172A;   /* sayfa düzeyi birincil düğme (Sınavı Bitir) */
  --kt-golge: 0 14px 40px rgba(2, 6, 23, .38);
  --kt-r-kart: 20px; --kt-r-sik: 14px; --kt-r-harf: 12px; --kt-r-dugme: 12px; --kt-kenar: 2px;
  --kt-harf-boy: 48px; --kt-hedef: 48px;
  --kt-rozet: 22px; --kt-rozet-ofset: -9px; --kt-nokta: 44px;
  --kt-p-soru: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);    /* 18px → 20px */
  --kt-p-sik: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);    /* 17px → 19px */
  --kt-p-meta: .875rem;                                      /* 14px */
  --kt-satir: 1.6;
  --kt-font-baslik: 'Poppins', "Segoe UI", system-ui, sans-serif;
  --kt-font-govde: 'Poppins', "Segoe UI", system-ui, sans-serif;
  --kt-sure: 160ms; --kt-egri: cubic-bezier(.2, .8, .2, 1);
}
/* ── A2k · ORTAOKUL — KOYU ── */
.kraft[data-kademe-tema="ortaokul"][data-kademe-renk="koyu"] {
  --kt-zemin: radial-gradient(circle at 30% 12%, #16276B 0%, #0E1A4A 50%, #070D26 100%);
  --kt-kart: #141F4D;  --kt-kart-2: #1D2A63;
  --kt-cizgi: #33427F;  --kt-cizgi-guclu: #8795D6;
  --kt-metin: #E8EEFF;  --kt-metin-2: #B6C2EE;
  --kt-vurgu: #60A5FA;  --kt-vurgu-ustu: #0A1128;  --kt-vurgu-metin: #93C5FD;
  --kt-vurgu-zemin: #1E3A8A;  --kt-secili-kenar: #60A5FA;
  --kt-dogru: #4ADE80;  --kt-dogru-ustu: #052E16;  --kt-dogru-zemin: #0F4A2C;  --kt-dogru-metin: #DCFCE7;
  --kt-yanlis: #F87171; --kt-yanlis-ustu: #450A0A; --kt-yanlis-zemin: #5C1A1A; --kt-yanlis-metin: #FEE2E2;
  --kt-uyari: #FBBF24;  --kt-uyari-zemin: #4D350A; --kt-uyari-metin: #FEF3C7;
  --kt-odak: #FBBF24;  --kt-odak-sayfa: #FBBF24;   /* odak halkası: kart üstünde | sayfa zemini üstünde */
  --kt-sayfa-metin: #E8EEFF;   /* sayfa zemininin DOĞRUDAN üstündeki yazı (inceleme başlığı) */
  --kt-ok-zemin: #1D2A63; --kt-ok-yazi: #E8EEFF; --kt-ok-kenar: #8795D6;
  --kt-cta: #60A5FA; --kt-cta-ustu: #0A1128;   /* sayfa düzeyi birincil düğme (Sınavı Bitir) */
  --kt-golge: 0 14px 40px rgba(0, 0, 0, .55);
}

/* ── A3 · LİSE (sade) — AYDINLIK ── */
.kraft[data-kademe-tema="lise"] {
  --kt-zemin: linear-gradient(#EAEEF4, #EAEEF4);
  --kt-kart: #FFFFFF;  --kt-kart-2: #F4F6FA;
  --kt-cizgi: #D3DAE6;  --kt-cizgi-guclu: #6B7688;
  --kt-metin: #111827;  --kt-metin-2: #4B5563;
  --kt-vurgu: #1E3A8A;  --kt-vurgu-ustu: #FFFFFF;  --kt-vurgu-metin: #1E3A8A;
  --kt-vurgu-zemin: #EEF2FF;  --kt-secili-kenar: #1E3A8A;
  --kt-dogru: #166534;  --kt-dogru-ustu: #FFFFFF;  --kt-dogru-zemin: #ECFDF3;  --kt-dogru-metin: #14532D;
  --kt-yanlis: #991B1B; --kt-yanlis-ustu: #FFFFFF; --kt-yanlis-zemin: #FEF2F2; --kt-yanlis-metin: #7F1D1D;
  --kt-uyari: #92400E;  --kt-uyari-zemin: #FFFBEB; --kt-uyari-metin: #78350F;
  --kt-odak: #1E3A8A;  --kt-odak-sayfa: #1E3A8A;   /* odak halkası: kart üstünde | sayfa zemini üstünde */
  --kt-sayfa-metin: #111827;   /* sayfa zemininin DOĞRUDAN üstündeki yazı (inceleme başlığı) */
  --kt-ok-zemin: #FFFFFF; --kt-ok-yazi: #1E3A8A; --kt-ok-kenar: #6B7688;
  --kt-cta: #1E3A8A; --kt-cta-ustu: #FFFFFF;   /* sayfa düzeyi birincil düğme (Sınavı Bitir) */
  --kt-golge: 0 1px 2px rgba(15, 23, 42, .06);
  --kt-r-kart: 12px; --kt-r-sik: 10px; --kt-r-harf: 8px; --kt-r-dugme: 8px; --kt-kenar: 1.5px;
  --kt-harf-boy: 40px; --kt-hedef: 44px;
  --kt-rozet: 20px; --kt-rozet-ofset: -10px; --kt-nokta: 44px;
  --kt-p-soru: clamp(1.0625rem, 1.02rem + .2vw, 1.125rem);  /* 17px → 18px */
  --kt-p-sik: clamp(1rem, .97rem + .15vw, 1.0625rem);       /* 16px → 17px */
  --kt-p-meta: .875rem;                                      /* 14px */
  --kt-satir: 1.65;
  --kt-font-baslik: 'Poppins', "Segoe UI", system-ui, sans-serif;
  --kt-font-govde: 'Poppins', "Segoe UI", system-ui, sans-serif;
  --kt-sure: 100ms; --kt-egri: ease-out;
}
/* ── A3k · LİSE — KOYU ── */
.kraft[data-kademe-tema="lise"][data-kademe-renk="koyu"] {
  --kt-zemin: linear-gradient(#0B0F19, #0B0F19);
  --kt-kart: #141B2B;  --kt-kart-2: #1B2438;
  --kt-cizgi: #2A3550;  --kt-cizgi-guclu: #7C89A8;
  --kt-metin: #E5E7EB;  --kt-metin-2: #A3ADC2;
  --kt-vurgu: #93C5FD;  --kt-vurgu-ustu: #0B0F19;  --kt-vurgu-metin: #93C5FD;
  --kt-vurgu-zemin: #1E2A4A;  --kt-secili-kenar: #93C5FD;
  --kt-dogru: #4ADE80;  --kt-dogru-ustu: #052E16;  --kt-dogru-zemin: #0F2A1C;  --kt-dogru-metin: #BBF7D0;
  --kt-yanlis: #F87171; --kt-yanlis-ustu: #450A0A; --kt-yanlis-zemin: #2E1316; --kt-yanlis-metin: #FECACA;
  --kt-uyari: #FBBF24;  --kt-uyari-zemin: #2B2209; --kt-uyari-metin: #FDE68A;
  --kt-odak: #FBBF24;  --kt-odak-sayfa: #FBBF24;   /* odak halkası: kart üstünde | sayfa zemini üstünde */
  --kt-sayfa-metin: #E5E7EB;   /* sayfa zemininin DOĞRUDAN üstündeki yazı (inceleme başlığı) */
  --kt-ok-zemin: #141B2B; --kt-ok-yazi: #93C5FD; --kt-ok-kenar: #7C89A8;
  --kt-cta: #93C5FD; --kt-cta-ustu: #0B0F19;   /* sayfa düzeyi birincil düğme (Sınavı Bitir) */
  --kt-golge: none;
}

/* ───────────────────── B · PORTALIN KENDİ DEĞİŞKENLERİNİ JETONLARA BAĞLA ─────────────────────
   Portal :root'u --text/--text2/--surface/--surface2/--border/--primary/--emerald/--red/--amber/--blue
   tanımlar ve 370 satır-içi stilin bir kısmı bunları `var(--…)` ile okur (ör. istatistik değerleri,
   süre etiketi). Aynı adları KAPSAMDA yeniden tanımlamak, o satır-içi stilleri kod değiştirmeden
   temaya bağlar. kraft'ın kendi paleti (--navy, --murekkep …) de aynı yolla bağlanır. */
.kraft[data-kademe-tema] {
  --text: var(--kt-metin, #1a2340);          --text2: var(--kt-metin-2, #4b5563);
  --surface: var(--kt-kart, #ffffff);        --surface2: var(--kt-kart-2, #f1f5f9);
  --border: var(--kt-cizgi, #e2e8f0);        --radius: var(--kt-r-kart, 12px);
  --primary: var(--kt-vurgu, #1d4ed8);       --primary-light: var(--kt-secili-kenar, #1d4ed8);
  --emerald: var(--kt-dogru, #166534);       --red: var(--kt-yanlis, #b91c1c);
  --amber: var(--kt-uyari, #92400e);         --blue: var(--kt-vurgu-metin, #1d4ed8);
  --navy: var(--kt-vurgu, #1d4ed8);          --baslik: var(--kt-vurgu-metin, #1d4ed8);
  --murekkep: var(--kt-metin, #1a2340);
  color: var(--kt-metin, #1a2340);
  font-family: var(--kt-font-govde, 'Poppins', system-ui, sans-serif);
  color-scheme: light;
}
.kraft[data-kademe-tema][data-kademe-renk="koyu"] { color-scheme: dark; }

/* ───────────────────────── C · SINIF EŞLEMESİ ───────────────────────── */

/* C1 · sayfa zemini (kraft: `.kraft::before` sabit katman) */
.kraft[data-kademe-tema]::before { background: var(--kt-zemin, linear-gradient(#0d2170, #0d2170)); }

/* C1b · sayfa zemininin doğrudan üstündeki yazı: portal `#reviewSection > h3` satır-içi `color:var(--text)` (=kart yazısı) basıyor;
   bugünkü lacivert zeminde koyu yazı SİLİK kalıyor → sayfa-yazısı jetonu */
.kraft[data-kademe-tema] #reviewSection > h3 { color: var(--kt-sayfa-metin, #fff) !important; font-size: var(--kt-p-sik, 1rem) !important; font-family: var(--kt-font-baslik, sans-serif); }

/* C2 · sınav üst şeridi */
.kraft[data-kademe-tema] .exam-header {
  background: var(--kt-kart, #fff); color: var(--kt-metin, #1a2340);
  border: var(--kt-kenar, 2px) solid var(--kt-cizgi, #e2e8f0);
  border-radius: var(--kt-r-kart, 20px); box-shadow: var(--kt-golge, none);
  font-family: var(--kt-font-govde, 'Poppins', sans-serif);
}
.kraft[data-kademe-tema] .exam-header h2 {
  font-family: var(--kt-font-baslik, 'Poppins', sans-serif); color: var(--kt-metin, #1a2340);
  font-size: calc(var(--kt-p-sik, 1rem) * 1.05) !important;       /* satır-içi font-size:1rem'i ezer */
  line-height: 1.25;
}
.kraft[data-kademe-tema] .exam-timer { color: var(--kt-vurgu-metin, #1d4ed8); font-size: calc(var(--kt-p-sik, 1rem) * 1.25); }
.kraft[data-kademe-tema] .exam-timer.warning { color: var(--kt-yanlis, #b91c1c); }
.kraft[data-kademe-tema] .exam-progress { color: var(--kt-metin-2, #4b5563); font-size: var(--kt-p-meta, .875rem); }
.kraft[data-kademe-tema] #examTimerLabel { font-size: var(--kt-p-meta, .875rem) !important; color: var(--kt-metin-2, #4b5563) !important; }

/* C3 · soru kartı */
.kraft[data-kademe-tema] .question-card {
  position: relative;
  background: var(--kt-kart, #fff); color: var(--kt-metin, #1a2340);
  border: var(--kt-kenar, 2px) solid var(--kt-cizgi, #e2e8f0);
  border-radius: var(--kt-r-kart, 20px); box-shadow: var(--kt-golge, none);
  font-family: var(--kt-font-govde, 'Poppins', sans-serif);
  padding: clamp(1rem, 3.2vw, 1.75rem);
}
.kraft[data-kademe-tema] .question-card.answered { border-color: var(--kt-secili-kenar, #1d4ed8); }
.kraft[data-kademe-tema] .question-card.correct { background: var(--kt-dogru-zemin, #dcfce7); border-color: var(--kt-dogru, #166534); }
.kraft[data-kademe-tema] .question-card.wrong   { background: var(--kt-yanlis-zemin, #fee2e2); border-color: var(--kt-yanlis, #b91c1c); }
.kraft[data-kademe-tema] .q-head { margin-bottom: .9rem; gap: .6rem; flex-wrap: wrap; align-items: center; }
.kraft[data-kademe-tema] .q-number {                       /* "Soru N" rozeti (kraft'ın lacivert hapı) */
  background: var(--kt-vurgu, #1d4ed8); color: var(--kt-vurgu-ustu, #fff);
  border-radius: var(--kt-r-dugme, 12px); box-shadow: none;
  font-family: var(--kt-font-baslik, 'Poppins', sans-serif); font-weight: 700;
  font-size: var(--kt-p-meta, .875rem); padding: .45em 1.1em; min-width: 0; float: none; margin: 0;
  width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;   /* dar ekranda tam genişlik hapı yok */
}
.kraft[data-kademe-tema] .q-subject {
  background: var(--kt-kart-2, #f1f5f9); color: var(--kt-metin-2, #4b5563);
  border: 1px solid var(--kt-cizgi, #e2e8f0); border-radius: var(--kt-r-dugme, 12px);
  font-size: var(--kt-p-meta, .875rem); font-weight: 600; padding: .3em .85em;
}
.kraft[data-kademe-tema] .q-text {
  color: var(--kt-metin, #1a2340); font-size: var(--kt-p-soru, 1.125rem);
  line-height: var(--kt-satir, 1.6); font-weight: var(--kt-agirlik-soru, 600); margin-bottom: 1.1rem;
}
.kraft[data-kademe-tema] .q-text .katex { font-size: 1.05em; }

/* C4 · şıklar (portal .option + soru_sablonu .sbl-sik + kraft .option) */
.kraft[data-kademe-tema] .options { gap: calc(var(--kt-hedef, 44px) * .2); }
.kraft[data-kademe-tema] .option {
  position: relative; min-height: var(--kt-hedef, 44px);
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .9rem; cursor: pointer;
  background: var(--kt-kart, #fff); color: var(--kt-metin, #1a2340);
  border: var(--kt-kenar, 2px) solid var(--kt-cizgi-guclu, #64748b);
  border-radius: var(--kt-r-sik, 14px);
  font-size: var(--kt-p-sik, 1rem); line-height: 1.45; font-weight: 400;
}
.kraft[data-kademe-tema] .option > .letter {                  /* harf kutusu */
  flex: 0 0 auto; width: var(--kt-harf-boy, 44px); height: var(--kt-harf-boy, 44px); min-width: var(--kt-harf-boy, 44px);
  border-radius: var(--kt-r-harf, 12px); border: 0;
  background: var(--kt-vurgu, #1d4ed8); color: var(--kt-vurgu-ustu, #fff);
  display: flex; align-items: center; justify-content: center; position: relative;
  font-family: var(--kt-font-govde, 'Poppins', sans-serif); font-weight: 700;      /* harf daima Poppins: el yazısı harf karışmasın */
  font-size: calc(var(--kt-harf-boy, 44px) * .42);
}
.kraft[data-kademe-tema] .option:hover { border-color: var(--kt-secili-kenar, #1d4ed8); background: var(--kt-vurgu-zemin, #eff6ff); }
.kraft[data-kademe-tema] .option:hover > .letter { box-shadow: none; }
.kraft[data-kademe-tema] .option.selected {
  background: var(--kt-vurgu-zemin, #eff6ff); border-color: var(--kt-secili-kenar, #1d4ed8);
  box-shadow: inset 0 0 0 1px var(--kt-secili-kenar, #1d4ed8);
}
.kraft[data-kademe-tema] .option.selected > .letter { box-shadow: none; background: var(--kt-vurgu, #1d4ed8); color: var(--kt-vurgu-ustu, #fff); }
.kraft[data-kademe-tema] .option.correct-answer {
  background: var(--kt-dogru-zemin, #dcfce7); border-color: var(--kt-dogru, #166534); color: var(--kt-dogru-metin, #14532d);
  box-shadow: inset 0 0 0 1px var(--kt-dogru, #166534);
}
.kraft[data-kademe-tema] .option.correct-answer > .letter { background: var(--kt-dogru, #166534); color: var(--kt-dogru-ustu, #fff); box-shadow: none; }
.kraft[data-kademe-tema] .option.wrong-answer {
  background: var(--kt-yanlis-zemin, #fee2e2); border-color: var(--kt-yanlis, #b91c1c); color: var(--kt-yanlis-metin, #7f1d1d);
  box-shadow: inset 0 0 0 1px var(--kt-yanlis, #b91c1c);
}
.kraft[data-kademe-tema] .option.wrong-answer > .letter { background: var(--kt-yanlis, #b91c1c); color: var(--kt-yanlis-ustu, #fff); box-shadow: none; }
/* durum rozeti — RENKLE DEĞİL ŞEKİLLE de ayrışır (kraft kuralı): ● seçili · ✓ doğru · ✕ yanlış */
.kraft[data-kademe-tema] .option.selected > .letter::after,
.kraft[data-kademe-tema] .option.correct-answer > .letter::after,
.kraft[data-kademe-tema] .option.wrong-answer > .letter::after {
  position: absolute; top: var(--kt-rozet-ofset, -9px); right: var(--kt-rozet-ofset, -9px);
  width: var(--kt-rozet, 22px); height: var(--kt-rozet, 22px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--kt-rozet, 22px) * .58); font-weight: 700; line-height: 1; font-family: var(--kt-font-govde, sans-serif);
  border: 2px solid var(--kt-kart, #fff); box-shadow: none;
}
.kraft[data-kademe-tema] .option.selected > .letter::after       { content: "●"; background: var(--kt-secili-kenar, #1d4ed8); color: var(--kt-vurgu-ustu, #fff); }
.kraft[data-kademe-tema] .option.correct-answer > .letter::after { content: "✓"; background: var(--kt-dogru, #166534);        color: var(--kt-dogru-ustu, #fff); }
.kraft[data-kademe-tema] .option.wrong-answer > .letter::after   { content: "✕"; background: var(--kt-yanlis, #b91c1c);       color: var(--kt-yanlis-ustu, #fff); }

/* C4b · verilenler kutusu: zemin/mürekkep KORUNUR (daima açık), yalnız boyut kademeye uyar */
.kraft[data-kademe-tema] .verilenlerKutusu { font-size: var(--kt-p-sik, 1rem); line-height: var(--kt-satir, 1.6); }

/* C5 · çözüm kutusu · verilenler/şekil kutuları BİLEREK dokunulmadı (daima açık zemin) */
.kraft[data-kademe-tema] .solution-box {
  background: var(--kt-dogru-zemin, #dcfce7); border: 2px dashed var(--kt-dogru, #166534);
  color: var(--kt-dogru-metin, #14532d); border-radius: var(--kt-r-sik, 14px);
  font-size: var(--kt-p-sik, 1rem); line-height: var(--kt-satir, 1.6);
}
.kraft[data-kademe-tema] .solution-box .sol-head { color: var(--kt-dogru-metin, #14532d); font-size: var(--kt-p-meta, .875rem); font-weight: 700; }
/* anahtar yokken basılan nötr kutu satır-içi stil taşır → yalnız o varyant için !important */
.kraft[data-kademe-tema] .solution-box[style*="background"] { background: var(--kt-kart-2, #f1f5f9) !important; border-color: var(--kt-cizgi-guclu, #64748b) !important; }
.kraft[data-kademe-tema] .solution-box[style*="background"] .sol-head,
.kraft[data-kademe-tema] .solution-box[style*="background"] div { color: var(--kt-metin-2, #4b5563) !important; }

/* C6 · sayfa düzeyi düğmeler: Sınavı Bitir + pager okları + noktalar */
.kraft[data-kademe-tema] .nav-bottom { border-top: 0; }
.kraft[data-kademe-tema] .btn {
  border-radius: var(--kt-r-dugme, 12px); min-height: var(--kt-hedef, 44px); font-family: var(--kt-font-govde, sans-serif);
  font-weight: 600; font-size: var(--kt-p-sik, 1rem);
  background: var(--kt-kart, #fff); color: var(--kt-metin, #1a2340); border: var(--kt-kenar, 2px) solid var(--kt-cizgi-guclu, #64748b);
}
.kraft[data-kademe-tema] .btn-primary { background: var(--kt-vurgu, #1d4ed8); color: var(--kt-vurgu-ustu, #fff); border-color: var(--kt-vurgu, #1d4ed8); }
.kraft[data-kademe-tema] .btn-primary:hover { background: var(--kt-vurgu, #1d4ed8); filter: brightness(1.08); }
.kraft[data-kademe-tema] #finishBtn,
.kraft[data-kademe-tema] .nav-bottom .btn-primary {            /* sayfa zemininde duran birincil eylem */
  background: var(--kt-cta, #1d4ed8); color: var(--kt-cta-ustu, #fff); border-color: var(--kt-cta, #1d4ed8);
  font-size: var(--kt-p-sik, 1rem) !important; padding: .7rem 1.8rem !important; font-weight: 700;
}
.kraft[data-kademe-tema] .btn-success { background: var(--kt-dogru, #166534); color: var(--kt-dogru-ustu, #fff); border-color: var(--kt-dogru, #166534); }
.kraft[data-kademe-tema] .btn-danger  { background: var(--kt-yanlis, #b91c1c); color: var(--kt-yanlis-ustu, #fff); border-color: var(--kt-yanlis, #b91c1c); }

/* pager okları: kraft raster oku (`--kraft-ok-*`, lacivert PNG) yerine CSS oku — koyu şemada da ve
   kademe renginde de okunur. kraft kuralları `!important` olduğu için burada da !important ŞART. */
.kraft[data-kademe-tema] #pylOnceki,
.kraft[data-kademe-tema] #pylSonraki {
  width: auto !important; height: auto !important; min-width: calc(var(--kt-hedef, 44px) * 1.6) !important; min-height: var(--kt-hedef, 44px) !important;
  background-image: none !important; background-color: var(--kt-ok-zemin, #fff) !important;
  border: var(--kt-kenar, 2px) solid var(--kt-ok-kenar, #64748b) !important; border-radius: var(--kt-r-dugme, 12px) !important;
  color: var(--kt-ok-yazi, #1d4ed8) !important; font-size: var(--kt-p-sik, 1rem) !important; font-weight: 700; font-family: var(--kt-font-govde, sans-serif);
  padding: 0 1.1rem !important; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; filter: none !important;
}
.kraft[data-kademe-tema] #pylOnceki::before  { content: "←"; }
.kraft[data-kademe-tema] #pylSonraki::after  { content: "→"; }
.kraft[data-kademe-tema] #pylOnceki::after   { content: "Geri"; }
.kraft[data-kademe-tema] #pylSonraki::before { content: "İleri"; }
.kraft[data-kademe-tema] .sbl-ok img { display: none; }
@media (max-width: 480px) {      /* dar ekran: oklar yalnız ok işareti (ad aria-label'da); satır başı noktalara kalsın */
  .kraft[data-kademe-tema] #pylOnceki::after, .kraft[data-kademe-tema] #pylSonraki::before { content: none; }
  .kraft[data-kademe-tema] #pylOnceki, .kraft[data-kademe-tema] #pylSonraki { min-width: var(--kt-hedef, 44px) !important; padding: 0 .6rem !important; }
}     /* raster ok: erişilebilir ad zaten aria-label'da */
/* noktalar: JS satır-içi stil basıyor (aktif #6c5ce7 / dolu #d1fae5 / boş #fff) → durum SINIFI/özniteliği
   olmadığından CSS ayırt edemez. Entegrasyonda _pylNoktaTazele'ye tek satır: d.dataset.durum = aktif?'aktif':dolu?'dolu':'bos' */
.kraft[data-kademe-tema] #pylNokta button {
  width: var(--kt-nokta, 44px) !important; height: var(--kt-nokta, 44px) !important; border-radius: var(--kt-r-dugme, 12px) !important;
  font-size: var(--kt-p-meta, .875rem) !important; font-weight: 700; font-family: var(--kt-font-govde, sans-serif);
  border: var(--kt-kenar, 2px) solid var(--kt-cizgi-guclu, #64748b) !important;
  background: var(--kt-kart, #fff) !important; color: var(--kt-metin-2, #4b5563) !important;
}
.kraft[data-kademe-tema] #pylNokta button[data-durum="dolu"]  { background: var(--kt-dogru-zemin, #dcfce7) !important; color: var(--kt-dogru-metin, #14532d) !important; border-color: var(--kt-dogru, #166534) !important; }
.kraft[data-kademe-tema] #pylNokta button[data-durum="aktif"] { background: var(--kt-vurgu, #1d4ed8) !important; color: var(--kt-vurgu-ustu, #fff) !important; border-color: var(--kt-vurgu, #1d4ed8) !important; }

/* C7 · sonuç ekranı */
.kraft[data-kademe-tema] .card, .kraft[data-kademe-tema] .result-card {
  background: var(--kt-kart, #fff); color: var(--kt-metin, #1a2340);
  border: var(--kt-kenar, 2px) solid var(--kt-cizgi, #e2e8f0); border-radius: var(--kt-r-kart, 20px); box-shadow: var(--kt-golge, none);
  font-family: var(--kt-font-govde, sans-serif);
}
.kraft[data-kademe-tema] .result-card h2 { font-family: var(--kt-font-baslik, sans-serif); color: var(--kt-metin, #1a2340); font-size: calc(var(--kt-p-soru, 1.125rem) * 1.15); }
.kraft[data-kademe-tema] .result-card p { font-size: var(--kt-p-meta, .875rem) !important; }
.kraft[data-kademe-tema] .score-circle { box-shadow: none; border-width: calc(var(--kt-kenar, 2px) + 2px); font-family: var(--kt-font-baslik, sans-serif); }
.kraft[data-kademe-tema] .score-circle small { font-size: var(--kt-p-meta, .875rem); font-weight: 600; }
.kraft[data-kademe-tema] .score-circle.high { background: var(--kt-dogru-zemin, #dcfce7);  color: var(--kt-dogru-metin, #14532d);   border-color: var(--kt-dogru, #166534); }
.kraft[data-kademe-tema] .score-circle.mid  { background: var(--kt-uyari-zemin, #fef3c7);  color: var(--kt-uyari-metin, #78350f);   border-color: var(--kt-uyari, #92400e); }
.kraft[data-kademe-tema] .score-circle.low  { background: var(--kt-yanlis-zemin, #fee2e2); color: var(--kt-yanlis-metin, #7f1d1d);  border-color: var(--kt-yanlis, #b91c1c); }
.kraft[data-kademe-tema] .stat-item {
  background: var(--kt-kart-2, #f1f5f9); border: var(--kt-kenar, 2px) solid var(--kt-cizgi, #e2e8f0);
  border-radius: var(--kt-r-sik, 14px); box-shadow: none; font-family: var(--kt-font-govde, sans-serif);
}
.kraft[data-kademe-tema] .stat-item .lbl { color: var(--kt-metin-2, #4b5563); font-size: var(--kt-p-meta, .875rem); font-weight: 600; }
.kraft[data-kademe-tema] .stat-item .val { font-size: calc(var(--kt-p-sik, 1rem) * 1.3); }

/* C8 · serbest yazı alanları (yazılı/açık uçlu) */
.kraft[data-kademe-tema] textarea, .kraft[data-kademe-tema] input[type="text"], .kraft[data-kademe-tema] input[type="number"] {
  background: var(--kt-kart-2, #f1f5f9); color: var(--kt-metin, #1a2340);
  border: var(--kt-kenar, 2px) solid var(--kt-cizgi-guclu, #64748b); border-radius: var(--kt-r-sik, 14px);
  font-family: var(--kt-font-govde, sans-serif); font-size: var(--kt-p-sik, 1rem);
}

/* C9 · KLAVYE ODAĞI — kart üstünde ve sayfa zemini üstünde ayrı renk (iki bağlamda da ≥ 3:1) */
.kraft[data-kademe-tema] .option:focus-visible,
.kraft[data-kademe-tema] .question-card :focus-visible,
.kraft[data-kademe-tema] textarea:focus-visible,
.kraft[data-kademe-tema] input:focus-visible { outline: 3px solid var(--kt-odak, #b45309); outline-offset: 2px; }
.kraft[data-kademe-tema] .nav-bottom :focus-visible,
.kraft[data-kademe-tema] #pylNav :focus-visible { outline: 3px solid var(--kt-odak-sayfa, #fde047); outline-offset: 3px; }

/* ───────────────────────── D · KADEME FARKLARI ───────────────────────── */

/* D0 · ağırlık + dar ekran ölçekleri (jeton düzeyinde, kural değil) */
.kraft[data-kademe-tema="ilkokul"] { --kt-agirlik-soru: 600; }
.kraft[data-kademe-tema="ortaokul"] { --kt-agirlik-soru: 600; }
.kraft[data-kademe-tema="lise"] { --kt-agirlik-soru: 400; }
@media (max-width: 420px) {
  .kraft[data-kademe-tema="ilkokul"] { --kt-harf-boy: 50px; --kt-r-kart: 24px; }
  .kraft[data-kademe-tema="ortaokul"] { --kt-harf-boy: 44px; }
  .kraft[data-kademe-tema="lise"] { --kt-harf-boy: 38px; }
}

/* D1 · İLKOKUL — oyunsu: gökkuşağı sekmesi, çıkartma gölgeli harfler, el yazısı başlık, çaba ödülü */
.kraft[data-kademe-tema="ilkokul"] .question-card::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 10px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(90deg, #F472B6 0 25%, #FBBF24 25% 50%, #34D399 50% 75%, #60A5FA 75% 100%);
}
.kraft[data-kademe-tema="ilkokul"] .question-card { padding-top: calc(clamp(1rem, 3.2vw, 1.75rem) + 8px); }
.kraft[data-kademe-tema="ilkokul"] .q-number { font-size: calc(var(--kt-p-meta) * 1.15); padding: .35em 1.2em; }
.kraft[data-kademe-tema="ilkokul"] .option > .letter { box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
.kraft[data-kademe-tema="ilkokul"] .option.selected > .letter,
.kraft[data-kademe-tema="ilkokul"] .option.correct-answer > .letter,
.kraft[data-kademe-tema="ilkokul"] .option.wrong-answer > .letter { box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
.kraft[data-kademe-tema="ilkokul"] .option { border-radius: var(--kt-r-sik); }
.kraft[data-kademe-tema="ilkokul"] .exam-progress::before { content: "⭐ "; content: "⭐ " / ""; }
.kraft[data-kademe-tema="ilkokul"] .exam-timer { font-family: var(--kt-font-baslik); font-weight: 700; }
/* ÇABA ÖDÜLÜ: ödül doğruluğa DEĞİL cevaplamaya bağlı (`.answered` = herhangi bir şık seçildi).
   Sınavda doğru/yanlış anlık gösterilmez (anahtar sunucuda) → ödül asla doğruluk sızdırmaz. */
.kraft[data-kademe-tema="ilkokul"] .question-card.answered .q-number::after { content: " ⭐"; content: " ⭐" / ""; }
.kraft[data-kademe-tema="ilkokul"] .score-circle { width: 170px; height: 170px; font-size: 3.1rem; margin-bottom: 3.4rem; position: relative; }
.kraft[data-kademe-tema="ilkokul"] .score-circle::after {
  position: absolute; left: 50%; bottom: -2.6rem; transform: translateX(-50%); white-space: nowrap;
  font-size: 1.9rem; letter-spacing: .12em; line-height: 1;
}
.kraft[data-kademe-tema="ilkokul"] .score-circle.high::after { content: "⭐⭐⭐"; content: "⭐⭐⭐" / ""; }
.kraft[data-kademe-tema="ilkokul"] .score-circle.mid::after  { content: "⭐⭐"; content: "⭐⭐" / ""; }
.kraft[data-kademe-tema="ilkokul"] .score-circle.low::after  { content: "⭐"; content: "⭐" / ""; }   /* denemek de kazanmaktır: en az 1 yıldız */
.kraft[data-kademe-tema="ilkokul"] .stat-item .val { font-family: var(--kt-font-baslik); }

/* D2 · ORTAOKUL — ara: yuvarlak-kare harf, ölçülü hareket (ek süs yok) */

/* D3 · LİSE — sade: gölgesiz düz kart, ÇERÇEVELİ (dolgusuz) harf, seçilince dolar; süs yok */
.kraft[data-kademe-tema="lise"] .option > .letter {
  background: transparent; color: var(--kt-vurgu-metin);
  border: 2px solid var(--kt-vurgu);
}
.kraft[data-kademe-tema="lise"] .option.selected > .letter { background: var(--kt-vurgu); color: var(--kt-vurgu-ustu); }
.kraft[data-kademe-tema="lise"] .option.correct-answer > .letter { background: var(--kt-dogru); color: var(--kt-dogru-ustu); border-color: var(--kt-dogru); }
.kraft[data-kademe-tema="lise"] .option.wrong-answer > .letter   { background: var(--kt-yanlis); color: var(--kt-yanlis-ustu); border-color: var(--kt-yanlis); }
.kraft[data-kademe-tema="lise"] .q-number { background: transparent; color: var(--kt-vurgu-metin); border: 1.5px solid var(--kt-vurgu); }
.kraft[data-kademe-tema="lise"] .exam-header, .kraft[data-kademe-tema="lise"] .question-card, .kraft[data-kademe-tema="lise"] .card { box-shadow: none; }

/* ───────────────────────── E · HAREKET · YAZDIRMA · YÜKSEK KONTRAST ─────────────────────────
   Animasyon yalnız `no-preference`te VAR (varsayılan = hareketsiz). `reduce`te her şey anında. */
@media (prefers-reduced-motion: no-preference) {
  .kraft[data-kademe-tema] .option,
  .kraft[data-kademe-tema] .option > .letter,
  .kraft[data-kademe-tema] .btn,
  .kraft[data-kademe-tema] #pylNokta button {
    transition: transform var(--kt-sure, 120ms) var(--kt-egri, ease-out), background-color var(--kt-sure, 120ms) ease-out,
                border-color var(--kt-sure, 120ms) ease-out, box-shadow var(--kt-sure, 120ms) ease-out;
  }
  /* ilkokul: sıçrama + ödül */
  .kraft[data-kademe-tema="ilkokul"] .option:hover { transform: translateY(-3px); }
  .kraft[data-kademe-tema="ilkokul"] .option:active { transform: translateY(1px) scale(.985); }
  .kraft[data-kademe-tema="ilkokul"] .option.selected > .letter { animation: kt-zipla 380ms var(--kt-egri) 1; }
  .kraft[data-kademe-tema="ilkokul"] .question-card.answered .q-number::after { display: inline-block; animation: kt-yildiz 560ms var(--kt-egri) 1; }
  .kraft[data-kademe-tema="ilkokul"] .score-circle { animation: kt-giris 700ms var(--kt-egri) 1; }
  .kraft[data-kademe-tema="ilkokul"] .score-circle::after { animation: kt-yildiz 900ms var(--kt-egri) 1; }
  .kraft[data-kademe-tema="ilkokul"] .btn:active { transform: translateY(2px); }
  /* ortaokul: küçük "tık" */
  .kraft[data-kademe-tema="ortaokul"] .option.selected > .letter { animation: kt-tik 200ms ease-out 1; }
  /* lise: yalnız renk geçişi (yukarıdaki transition), hareket yok */
  @keyframes kt-zipla  { 0% { transform: scale(.6); } 55% { transform: scale(1.22) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }
  @keyframes kt-yildiz { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.4) rotate(12deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
  @keyframes kt-giris  { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes kt-tik    { 0% { transform: scale(.92); } 100% { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .kraft[data-kademe-tema], .kraft[data-kademe-tema] *, .kraft[data-kademe-tema] *::before, .kraft[data-kademe-tema] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}
@media print {
  .kraft[data-kademe-tema]::before, .kraft[data-kademe-tema] .question-card::before, .kraft[data-kademe-tema] .score-circle::after { display: none !important; }
  .kraft[data-kademe-tema] .question-card, .kraft[data-kademe-tema] .card, .kraft[data-kademe-tema] .exam-header { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 1px solid #999 !important; }
}
@media (forced-colors: active) {      /* Windows Yüksek Karşıtlık: sistem renkleri, çerçeve görünür kalsın */
  .kraft[data-kademe-tema] .option { border: 2px solid CanvasText; }
  .kraft[data-kademe-tema] .option.selected { border-color: Highlight; outline: 2px solid Highlight; }
  .kraft[data-kademe-tema] .option > .letter { forced-color-adjust: none; }
}