/* ─────────────────────────────────────────────────────────────────────────────
   1–3. SINIF (okumayan çocuk + erken okur) — SON KATMAN (14.10.2026)
   ─────────────────────────────────────────────────────────────────────────────
   Ağustos 2026 kararı (index.html `body.pre-reader / body.early-reader` blokları): sıcak krem
   zemin, beyaz kartlar, renkli büyük düğmeler, 19px okuma yazısı. Ekim'deki yeniden tasarım
   (redesign.css → experience.css → kabuk.css) bu kuralların ARKASINDAN yüklenip onları eziyordu
   (ör. redesign.css küçüklerin düğmelerini bilerek düz beyaza çeviriyordu). Kullanıcı kararı
   (14.10.2026): 1–3'ün ayrı görünümü geri gelsin.

   ⚠️ YALNIZ body.pre-reader / body.early-reader — 4. sınıf ve üstü bu dosyadan etkilenmez.
   ⚠️ Bu dosya kabuk.css'ten SONRA yüklenmeli (index.html). Seçiciler bilerek iki kimlik
      (#app #messages) taşır: rakip kurallar tek kimlik + !important.
   ⚠️ Giriş ekranının rol kartları (.dg-entry-choices) ve "Bugün" eylem ızgarası kendi
      tasarımını korur — onlar aşağıda ayrıca ele alınır. */

html body.pre-reader, html body.early-reader { --bg:#FFF6E9 !important; }

html body:is(.pre-reader,.early-reader) #app,
html body:is(.pre-reader,.early-reader) #app #messages { background:#FFF6E9 !important; }

/* Dugi balonu: beyaz, sıcak sarı çerçeve */
html body:is(.pre-reader,.early-reader) #app #messages .msg .bubble-bot {
  background:#FFFFFF !important; color:#2A2622 !important; border:2px solid #FFD98A !important;
  box-shadow:3px 3px 0 rgba(199,154,107,.30) !important; border-radius:18px !important; }

/* Okuma / video / etkinlik / tamamlama kartları */
html body:is(.pre-reader,.early-reader) #app #messages :is(.rd-card,.vd-card,.cc-card,.chat-card) {
  background:#FFFFFF !important; border:2px solid #FFD98A !important;
  box-shadow:4px 4px 0 rgba(199,154,107,.32) !important; border-radius:20px !important; }

/* Okuma yazısı: 19px, geniş satır aralığı (kabuk.css ders ekranında 17px'e indiriyordu) */
html body:is(.pre-reader,.early-reader) #app #messages .rd-card .rd-para,
html body:is(.pre-reader,.early-reader) #app #messages .rd-card .rd-word { font-size:19px !important; line-height:2 !important; }
html body.pre-reader #app #messages .chat-card { font-size:19px; line-height:2.05; }

/* Renkli, büyük düğmeler — sırayla turuncu / yeşil / mavi / mor (giriş kartları hariç) */
html body:is(.pre-reader,.early-reader) #app #messages .quick-replies:not(.dg-entry-choices) .qr-btn {
  color:#fff !important; border:0 !important; font-weight:800 !important; }
html body.pre-reader #app #messages .quick-replies:not(.dg-entry-choices) .qr-btn { font-size:20px !important; min-height:64px !important; border-radius:22px !important; padding:18px 22px !important; }
html body.early-reader #app #messages .quick-replies:not(.dg-entry-choices) .qr-btn { font-size:18px !important; min-height:56px !important; border-radius:18px !important; padding:15px 20px !important; }
html body:is(.pre-reader,.early-reader) #app #messages .quick-replies:not(.dg-entry-choices) .qr-btn:nth-of-type(4n+1) { background:#FF8A5B !important; box-shadow:3px 3px 0 #d96a3f !important; }
html body:is(.pre-reader,.early-reader) #app #messages .quick-replies:not(.dg-entry-choices) .qr-btn:nth-of-type(4n+2) { background:#3FB477 !important; box-shadow:3px 3px 0 #2f8f5c !important; }
html body:is(.pre-reader,.early-reader) #app #messages .quick-replies:not(.dg-entry-choices) .qr-btn:nth-of-type(4n+3) { background:#5B9BF2 !important; box-shadow:3px 3px 0 #3f79cc !important; }
html body:is(.pre-reader,.early-reader) #app #messages .quick-replies:not(.dg-entry-choices) .qr-btn:nth-of-type(4n)   { background:#C77DFF !important; box-shadow:3px 3px 0 #9a54cc !important; }
html body:is(.pre-reader,.early-reader) #app #messages .quick-replies:not(.dg-entry-choices) .qr-btn:hover:not(:disabled) { color:#fff !important; filter:brightness(1.05); }

/* Ana eylem (Okudum / Bitti / Devam): güçlü yeşil */
html body:is(.pre-reader,.early-reader) #app #messages :is(.card-btn,.rd-done-btn,.kb-ana) {
  background:#2F7D5B !important; color:#fff !important; border:0 !important;
  box-shadow:3px 3px 0 #245e45 !important; font-size:19px !important; min-height:58px !important; border-radius:16px !important; }
html body:is(.pre-reader,.early-reader) #app #messages :is(.qr-btn,.card-btn,.rd-done-btn):active {
  transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.25) !important; }

/* 1. sınıf: "Sohbet geçmişi" yazısı kafa karıştırıyor (sohbet yok) → gizli. 1–3: "Yardım" metni yok. */
html body:is(.pre-reader,.early-reader) .dx-history { display:none !important; }

/* Koyu tema 1–3'te de çalışsın: krem zemin yalnız açık temada */
html.dark body:is(.pre-reader,.early-reader) { --bg:#1d1b24 !important; }
html.dark body:is(.pre-reader,.early-reader) #app,
html.dark body:is(.pre-reader,.early-reader) #app #messages { background:#1d1b24 !important; }
html.dark body:is(.pre-reader,.early-reader) #app #messages .msg .bubble-bot,
html.dark body:is(.pre-reader,.early-reader) #app #messages :is(.rd-card,.vd-card,.cc-card,.chat-card) { background:#2a2733 !important; color:#f4efe6 !important; border-color:#6b5a33 !important; }

/* Tamamlama kartı (1–3): büyük yıldız + büyük başlık; özet sesli okunur (main.ts _completionCard) */
html body:is(.pre-reader,.early-reader) #app #messages .cc-card.kucuk { padding:18px 20px !important; gap:16px !important; align-items:center !important; }
html body:is(.pre-reader,.early-reader) #app #messages .cc-card.kucuk .ok { font-size:40px !important; width:64px !important; height:64px !important; min-width:64px !important; display:grid !important; place-items:center !important; background:#FFF1CC !important; border-radius:50% !important; }
html body:is(.pre-reader,.early-reader) #app #messages .cc-card.kucuk .ttl { font-size:22px !important; line-height:1.35 !important; font-weight:800 !important; }
html body:is(.pre-reader,.early-reader) #app #messages .cc-card.kucuk .res,
html body:is(.pre-reader,.early-reader) #app #messages .cc-card.kucuk .xp { font-size:18px !important; line-height:1.5 !important; }

/* "Bugün" (1–3): tek büyük başla düğmesi + şehir (kabuk.ts anaEkranSusle) */
html body:is(.pre-reader,.early-reader) #kbBugun .kb-bugun-kucuk { display:flex; flex-direction:column; gap:18px; padding-top:12px; }
html body:is(.pre-reader,.early-reader) #kbBugun .kb-bugun-kucuk .kb-selam b { font-size:24px; }
html body:is(.pre-reader,.early-reader) #kbBugun .kb-kucuk-basla,
html body:is(.pre-reader,.early-reader) #kbBugun .kb-kucuk-sehir {
  display:flex; align-items:center; justify-content:center; gap:14px; width:100%; border:0; cursor:pointer;
  border-radius:24px; color:#fff; font:800 24px/1.2 Andika,var(--font),sans-serif; }
html body:is(.pre-reader,.early-reader) #kbBugun .kb-kucuk-basla { min-height:110px; background:#FF8A5B; box-shadow:4px 4px 0 #d96a3f; }
html body:is(.pre-reader,.early-reader) #kbBugun .kb-kucuk-sehir  { min-height:72px; background:#5B9BF2; box-shadow:4px 4px 0 #3f79cc; font-size:20px; }
html body:is(.pre-reader,.early-reader) #kbBugun :is(.kb-kucuk-basla,.kb-kucuk-sehir) span { font-size:34px; }
html body:is(.pre-reader,.early-reader) #kbBugun :is(.kb-kucuk-basla,.kb-kucuk-sehir):active { transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.25); }

/* Okuma boşlukları (2–3): experience.css `.chat-card select{font:400 15px …!important}` satır içi büyütmeyi eziyordu
   (testte ölçüldü: 15px). Dokunması kolay, okunur boyut. 1. sınıf boşluk görmez (main.ts). */
html body.early-reader #app #messages .rd-card select.rd-cloze { font:700 20px/1.3 Andika,var(--font),sans-serif !important; min-height:48px !important; padding:6px 14px !important; }