/* ══════════════════════════════════════════════════════════════════════════
   KRAFT ORTAK — GORSEL TEMA  (surum 1)
   Kaynak tasarim: odm2/matai_kazanim_test_app.html satir 112-483
   ("ARTICULATE KRAFT-KAGIT" / Canva "9.sinif hazir miyiz" + lacivert tema)

   BU DOSYA IKI UYGULAMA TARAFINDAN OKUNUR:
     · odm2/ogrenci_portal.html          (FAZ 1 — bagli)
     · odm2/matai_kazanim_test_app.html  (FAZ 3 — gomulu ikiz henuz sokulmedi)

   ── NEDEN KOKTE, odm2/ ALTINDA DEGIL ──
   vercel.json headers bolumunde YALNIZ iki kural var: "/motor.min.js" ve
   "/js/shared/(.*)". odm2/js/shared/ bu desene TUTMAZ → onbellek davranisi
   farklilasir. Her iki uygulama da MUTLAK yolla (/js/shared/kraft/...) baglar.

   ── KAPSAM KURALI (en onemli kisit) ──
   HER kural ".kraft" koku altinda kapsamlanir. Portalda ".kraft" YALNIZ
   #examScreen ve #resultScreen uzerindedir; BODY'YE ASLA KONMAZ.
   Gerekce olculdu — kaynaktaki su kurallar portale girerse sayfayi OLDURUR:
     · satir 129  html,body{height:100%;background:#000;overflow:hidden}
                  → portal kaydirmasi olur, zemin siyaha doner
     · satir 132  #wrap{position:fixed;inset:0}
     · satir 139  #stage{width:1440px;height:810px}
                  → portalin akiskan .container(max-width:900px) duzeniyle bagdasmaz
     · satir 358-360  ciplak table/th/td{font-size:22px}
                  → portalin .q-text tablolarini sisirir
   Bunlarin hicbiri asagi TASINMADI. Ciplak etiket seciciler gerektiginde
   ".kraft td" bicimine kapsamlandi.

   ── TASINMAYANLAR (ve nedeni) ──
   · 157-161 .tamEkranBtn      → portalda tam ekran dugmesi yok
   · 163-168 .eba/.mataiLogo   → portalin kendi basligi var
   · 373-379 .donusBant        → KAYNAKTA BILE OLU (grep: yalniz 5 CSS satiri,
                                 HTML'de .donusBant ogesi yok)
   · 381-412 .veil/.dialog/.modal → portal confirm() kullaniyor
   · 562-567 .su-tools, 602-654 #suOverlay → kurulum sihirbazi, uygulamaya ozel
   · 651 .su-open{background:var(--red-b)} → --red-b HICBIR YERDE TANIMSIZ
                                 (grep: tek gecis). Sarkan degisken, kopyalanmadi.
   · 1440x810 sabit tuval (.kraft-sahne) → FAZ 3'e ERTELENDI. Bugun onu
     kullanacak tek yer kaynak uygulamadir ve oradaki gomulu ikiz henuz
     sokulmedi; simdi eklenirse OLU KURAL olurdu.

   ── CIFT-AILE KOPRU SECICILERI ──
   Iki uygulama farkli sinif lehcesi kullaniyor; MARKUP GOCU YAPILMADI
   (selectOption / _pylCevapliMi('.option.selected') / collectAllAnswers /
   _soruSemasiNormalize hic ellenmesin diye). Bu yuzden her kural iki adi birden
   hedefler:
        kaynak  .opts   .opt   .opt .l   .opt.sel   .kbaslik
        portal  .options .option .option .letter  .option.selected  .q-number
   Olculdu: portalda "opt"/"opts"/"stage"/"kraft"/"qfit"/"soruBant"/"kbaslik"
   sinif adlari 0 kez geciyor → cakisma yok.
   ══════════════════════════════════════════════════════════════════════════ */

/* SURUM MUHRU — kapsam disindaki TEK kural, bilerek :root uzerinde.
   kraft_varliklar.js boot'ta getComputedStyle(documentElement) ile okur;
   .kraft uzerinde olsaydi okuyamazdi. Yarim dagitim bekcisi. */
:root { --kraft-surum: "1"; }

/* ───────────────────────── 1 · PALET ─────────────────────────
   Kaynak satir 112-127'deki 12 ozel ozellik. :root yerine .kraft uzerinde:
   portalin kendi --primary/--emerald/--red degiskenleri EZILMESIN. */
.kraft {
  --murekkep:#2B2B2B;             /* govde metni (Poppins) */
  --baslik:#0002A9;               /* basliklar (ElYazi) */
  --harfKare:#DDC3AB;             /* sik harf karesi dolgusu (kraft) */
  --harf:#030303;
  --secGlow:rgba(38,125,230,.8);  /* secili sik glow */
  --okGlow:rgba(8,193,104,.85);   /* inceleme: dogru */
  --hataGlow:rgba(143,0,0,.6);    /* inceleme: yanlis */
  --yesil:#08C168; --turuncu:#FF914D; --gri:#A6A6A6; --oranMavi:#76BDC8;
  --lacivert:#1c2340;
  --diyalogKahve:#483018;
  --kraft:#DDA66B;
  --teal:#0097b2;
  --navy:#0002A9;                 /* lacivert temanin ana rengi (satir 174-184) */
}

/* ───────────────── 2 · KIMLIK: LACIVERT ZEMIN + BEYAZ KART ─────────────────
   Kaynak satir 169-184. Orada #wrap radial-gradient + #stage::before beyaz kart.
   Portalda #wrap/#stage YOK; ayni etkiyi sabit bir arka katmanla kuruyoruz.
   position:fixed + z-index:-1 → body'nin mor gradyanini ORTER ama hicbir
   icerigin uzerine binmez. body'ye sinif koymadan tam sayfa zemin veren tek yol. */
.kraft { position: relative; }
.kraft::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 32% 18%, #173aa0 0%, #0d2170 45%, #071445 100%);
}

/* Beyaz icerik karti — kaynakta #stage::before (radius 26, golge .45).
   Portalda kart basina bir tane: .question-card ve .card zaten kart. */
.kraft .question-card,
.kraft .card {
  background: #fbfcff;
  border-radius: 26px;
  box-shadow: 0 18px 54px rgba(0,0,0,.45);
  border: none;
  font-family: 'Poppins', "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--murekkep);
}
/* Inceleme ekranindaki dogru/yanlis kart tonlari korunur (portalin kendi
   .correct/.wrong kurallari), yalniz kraft golgesi/yaricapi giydirilir. */
.kraft .question-card.correct { background: #f2fdf6; }
.kraft .question-card.wrong   { background: #fef4f4; }

/* Sinav ust seridi de ayni kart dilinde */
.kraft .exam-header {
  background: #fbfcff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
  font-family: 'Poppins', "Segoe UI", system-ui, sans-serif;
}
.kraft .exam-timer { color: var(--navy); }

/* ───────────── 3 · "Soru N" LACIVERT PILL (kaynak .soruBant 181-183) ───────────── */
.kraft .kbaslik,
.kraft .q-number {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 9px rgba(0,0,0,.28);
  font-family: 'Poppins', "Segoe UI", sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .2px;
  padding: 9px 18px; min-width: 104px;
}
/* Ders rozeti pill'in yaninda sonuk kalsin */
.kraft .q-subject {
  background: #eef1fb; color: #3a4a7a;
  border-radius: 8px; font-weight: 600;
}

/* Dekoratif basliklar — kaynakta .kbaslik ElYazi 44px/#0002A9.
   Portalda kart basliklari h2/h3; ElYazi YALNIZ buraya, govdeye degil
   (kaynakta da tek dekoratif font kurali var: arayuzde bir tane). */
.kraft .result-card h2,
.kraft .kraft-baslik {
  font-family: 'ElYazi', 'Poppins', cursive;
  font-weight: 700; color: var(--baslik);
  line-height: 1.15;
}

/* ───────────── 4 · SIKLAR (kaynak 206-314) — CIFT-AILE ─────────────
   Kaynak .opt .l : 53x53, radius 9, lacivert dolgu, beyaz harf. */
.kraft .opts,
.kraft .options { display: flex; flex-direction: column; gap: .55rem; }

.kraft .opt,
.kraft .option {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid #e3e8f5; border-radius: 12px;
  background: none; cursor: pointer; transition: .12s;
  font-size: .95rem; line-height: 1.5; color: #000;
  padding: .6rem .9rem;
}
.kraft .opt > .l,
.kraft .option > .letter {
  flex: 0 0 auto;
  width: 53px; height: 53px; min-width: 53px;
  border-radius: 9px;
  background: var(--navy); color: #fff; border: none;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px;
  transition: box-shadow .12s;
}
.kraft .opt:hover .l,
.kraft .option:hover .letter { box-shadow: 0 0 10px 2px rgba(38,125,230,.35); }
.kraft .option:hover { border-color: #b9c6ee; background: rgba(38,125,230,.05); }

/* Secili / dogru / yanlis — kaynak 216-244.
   RENK KORU DOSTU ROZET: ayrim renkle DEGIL SEKILLE (●/✓/✕). Kaynaktaki
   ayni kural; portalda da korunuyor. */
.kraft .opt.sel, .kraft .option.selected,
.kraft .opt.ok,  .kraft .option.correct-answer,
.kraft .opt.no,  .kraft .option.wrong-answer { position: relative; z-index: 3; }

.kraft .opt.sel .l::after, .kraft .option.selected .letter::after,
.kraft .opt.ok  .l::after, .kraft .option.correct-answer .letter::after,
.kraft .opt.no  .l::after, .kraft .option.wrong-answer .letter::after {
  position: absolute; top: -10px; right: -10px;
  width: 24px; height: 24px; border-radius: 50%;
  color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.kraft .opt.sel .l::after, .kraft .option.selected .letter::after       { content: "●"; background: #1d4ed8; }
.kraft .opt.ok  .l::after, .kraft .option.correct-answer .letter::after { content: "✓"; background: #0a8f43; }
.kraft .opt.no  .l::after, .kraft .option.wrong-answer .letter::after   { content: "✕"; background: #c62828; }

.kraft .opt.sel, .kraft .option.selected {
  background: none; border-color: #1d4ed8;
}
.kraft .opt.sel .l, .kraft .option.selected .letter {
  box-shadow: 0 0 0 3px #1d4ed8, 0 0 10px 3px var(--secGlow);
  background: var(--navy); color: #fff;
}
.kraft .opt.ok, .kraft .option.correct-answer { background: #f0fdf4; border-color: #0a8f43; }
.kraft .opt.ok .l, .kraft .option.correct-answer .letter {
  box-shadow: 0 0 0 3px #0a8f43, 0 0 10px 3px var(--okGlow);
  background: #0a8f43; color: #fff;
}
.kraft .opt.no, .kraft .option.wrong-answer { background: #fef2f2; border-color: #c62828; }
.kraft .opt.no .l, .kraft .option.wrong-answer .letter {
  box-shadow: 0 0 0 3px #c62828, 0 0 10px 3px var(--hataGlow);
  background: #c62828; color: #fff;
}

/* ───────────── 5 · SORU GOVDESI (kaynak 186-204) ───────────── */
.kraft .q-text { font-size: 1rem; line-height: 1.6; color: var(--murekkep); }
.kraft .q-text table { white-space: normal; margin: .5rem 0; }
/* Ciplak table/th/td KOPYALANMADI (kaynak 358-360) — portalin tablolarini
   22px'e sisirirdi. Kapsamli ve olculu bicim: */
.kraft td, .kraft th { font-size: .92rem; padding: .3rem .5rem; }

/* Sekil/gorsel — kaynak .qimg/.geosvg golgesi */
.kraft .q-image img,
.kraft .qimg { border-radius: 12px; box-shadow: 0 5px 14px rgba(90,60,20,.12); }

/* ───────────── 6 · SAYFALAYICI OKLARI ─────────────
   #pylOnceki / #pylSonraki JS'te style.cssText ile kuruluyor (satir 679-685),
   bu yuzden !important SART — aksi halde satir-ici stil kazanir.
   _pylSayfalayiciKur'un JS'ine (addEventListener, _pylGoster, _pylNoktaTazele,
   _pylCevapliMi) DOKUNULMADI: yalniz gorunum degisiyor.
   Ok gorselleri kraft_varliklar.js'in :root'a yazdigi --kraft-ok-* degiskeninden. */
.kraft #pylOnceki, .kraft #pylSonraki {
  width: 113px !important; height: 52px !important;
  border: none !important; background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  color: transparent !important; font-size: 0 !important;
  padding: 0 !important; cursor: pointer;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  transition: transform .1s, filter .1s;
}
.kraft #pylOnceki { background-image: var(--kraft-ok-geri) !important; }
.kraft #pylSonraki { background-image: var(--kraft-ok-ileri) !important; }
.kraft #pylOnceki:hover, .kraft #pylSonraki:hover { filter: drop-shadow(0 2px 2px rgba(0,0,0,.29)); }
.kraft #pylOnceki:active, .kraft #pylSonraki:active { transform: translate(2.6px, 2.6px); }
/* Ok gorseli inmezse dugme GORUNMEZ olmasin: degisken bossa metin geri gelir. */
@supports not (background-image: var(--kraft-ok-geri)) {
  .kraft #pylOnceki, .kraft #pylSonraki { color: #fff !important; font-size: 1rem !important; }
}

/* Ilerleme noktalari — lacivert dilde */
.kraft #pylNokta button {
  border-color: #b9c6ee !important; color: #3a4a7a !important;
  font-family: 'Poppins', sans-serif;
}
.kraft #pylNokta button.dolu,
.kraft #pylNokta button[data-dolu="1"] { background: var(--navy) !important; color: #fff !important; }

/* ───────────── 7 · SONUC EKRANI (kaynak 319-371, AKIS TABANLI) ─────────────
   Kaynaktaki mutlak koordinatlar (yildiz left:607px, .statV.d left:164px/top:218px,
   .tblwrap left:150px/top:398px ...) 1440x810 sabit tuval varsayiyor.
   Portal akiskan oldugu icin AYNI GORUNUS akis duzeniyle yeniden kuruldu;
   piksel koordinatlari TASINMADI. */
.kraft .score-circle {
  border-width: 4px; font-family: 'Poppins', sans-serif;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.kraft .score-circle.high { background: #dcfce7; color: #0a8f43; border-color: #0a8f43; }
.kraft .score-circle.mid  { background: #fff3d6; color: #b26a00; border-color: #FF914D; }
.kraft .score-circle.low  { background: #fee2e2; color: #c62828; border-color: #c62828; }

/* Istatistik seridi — kaynaktaki istatistik_serit.png (29.478 B) TASINMADI;
   portalin MEVCUT .stats-row/.stat-item yapisi kraft paletiyle boyandi.
   Yeni isaretleme ve yeni varlik gerekmedi. */
.kraft .stats-row { gap: .75rem; }
.kraft .stat-item {
  background: #fff; border: 2px solid #e3e8f5; border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  min-width: 92px; font-family: 'Poppins', sans-serif;
}
.kraft .stat-item .val { font-weight: 800; }
.kraft .stat-item .lbl { color: #64748b; font-weight: 600; }

/* Yildiz — kaynak yildiz.png + hue-rotate ile duz laciverte cevriliyordu
   (satir 184). Duz renk oldugu icin CSS ile uretildi, 8.098 B varlik tasinmadi. */
.kraft .kraft-yildiz {
  display: inline-block; width: 44px; height: 48px; color: var(--navy);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: currentColor;
}

/* Cozum kutusu */
.kraft .solution-box { border-radius: 12px; font-size: .86rem; }

/* Dugmeler — kaynak .bantBtn dili */
.kraft .btn { border-radius: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; }
.kraft .btn-primary { background: var(--navy); border-color: var(--navy); }
.kraft .btn-primary:hover { background: #0a1fc4; }
.kraft .nav-bottom { border-top-color: rgba(255,255,255,.25); }

/* ───────────── 8 · MOBIL (kaynak 416-483 karsiligi) ─────────────
   Kaynakta body.mobil ile veriliyordu; portalda medya sorgusu — portal
   body'ye sinif basmiyor ve basmasi da istenmiyor. */
@media (max-width: 640px) {
  .kraft .opt > .l,
  .kraft .option > .letter {
    width: 44px; height: 44px; min-width: 44px; font-size: 19px; border-radius: 8px;
  }
  .kraft .question-card, .kraft .card { border-radius: 18px; padding: 1.1rem; }
  .kraft .kbaslik, .kraft .q-number { font-size: 13px; padding: 7px 13px; min-width: 88px; }
  .kraft #pylOnceki, .kraft #pylSonraki { width: 88px !important; height: 42px !important; }
  .kraft .stat-item { min-width: 72px; padding: .6rem .8rem; }
}

/* ───────────── 9 · YAZDIRMA ─────────────
   Rapor ayri sekmede kendi CSS'ini tasiyor; burasi sonuc ekraninin
   dogrudan yazdirilmasi icin. Lacivert zemin muredekkep yakar. */
@media print {
  .kraft::before { display: none; }
  .kraft .question-card, .kraft .card { box-shadow: none; border: 1px solid #ccc; }
}