/*
 * KARBAY ILE INGILIZCE 1  -  uslup
 *
 * Renk ve olculer kardes derslerle AYNI degiskenlerden geliyor
 * (--bg, --card, --ink, --r...). Cocuk sinif kabugunun icinde ders
 * degistirdiginde baska bir uygulamaya girmis gibi hissetmemeli.
 *
 * BU DERSE OZEL TEK SEY: renk kutusu ve Ingilizce kelime kartlari.
 * Ikisi de icerigin tasiyicisi - ses olmadigi icin anlam GORSELDE
 * duruyor, dolayisiyla bunlarin okunakliligi kozmetik degil islevsel.
 */
:root{
  --bg:#FFF6E5; --card:#fff; --ink:#2E2A26; --muted:#8A8175;
  --ok:#38B36B; --no:#E8563F; --gold:#F5B22D;
  --shadow:0 4px 0 rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.08);
  --r:22px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Comic Sans MS","Trebuchet MS",Verdana,system-ui,sans-serif;
  font-size:17px;line-height:1.35;
  user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;
}
#app{min-height:100%;display:flex;flex-direction:column}
.screen{
  flex:1;display:flex;flex-direction:column;
  padding:calc(14px + var(--safe-t)) 16px calc(14px + var(--safe-b));
  animation:pop .25s ease-out;
}
/* hidden CSS ile EZILMEMELI: gizli ekran gercekten gizli kalsin. */
.screen[hidden],[hidden]{display:none !important}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.gokyuzu{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(#FFF6E5,#F3E7D3)}

/* ---------- ana menu ---------- */
.home-head{display:flex;align-items:center;gap:12px;margin:8px 0 6px;padding-left:52px}
.home-head h1{margin:0;font-size:27px;letter-spacing:.5px}
.sub{margin:0;color:var(--muted);font-size:14px}
.starbar{
  margin-left:auto;background:var(--card);border-radius:var(--r);
  padding:10px 14px;box-shadow:var(--shadow);font-weight:bold;white-space:nowrap;
}

.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.topic-card{
  border:none;border-radius:var(--r);padding:18px 12px;color:#fff;cursor:pointer;
  background:var(--konu-renk,#4F8EF7);
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:140px;justify-content:center;font-family:inherit;
}
.topic-card:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.12)}
.topic-card.kilitli{background:#C9C2B6}
.topic-icon{font-size:42px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.topic-name{font-size:18px;font-weight:bold;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.topic-stars{font-size:13px;opacity:.95}

.home-foot{margin-top:auto;padding-top:16px;text-align:center}

/* ---------- bar ---------- */
.bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-left:52px}
.bar h2{margin:0;font-size:21px}
.bar-spacer{flex:1}
.icon-btn{
  background:var(--card);border:none;border-radius:16px;
  width:48px;height:48px;font-size:22px;box-shadow:var(--shadow);cursor:pointer;
  font-family:inherit;
}
.icon-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}

/* ---------- bolum listesi ---------- */
.level-list{display:flex;flex-direction:column;gap:12px}
.level-row{
  background:var(--card);border:none;border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;
  display:grid;grid-template-columns:1fr auto;gap:4px 10px;
  text-align:left;font-family:inherit;color:var(--ink);
}
.level-row:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.level-row.kilitli{opacity:.55}
.level-title{font-size:18px;font-weight:bold}
.level-sub{grid-column:1;color:var(--muted);font-size:14px}
.level-stars{grid-row:1 / span 2;align-self:center;font-size:17px;color:var(--gold)}

/* ---------- oyun ---------- */
.game-bar{align-items:center}
.progress-track{flex:1;height:14px;background:#EDE2CF;border-radius:10px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--ok);transition:width .25s ease}
.lives{font-size:18px;letter-spacing:2px}

.q-area{display:flex;flex-direction:column;align-items:center;gap:14px;margin:10px 0 18px}
.q-prompt p{margin:0;font-size:20px;font-weight:bold;text-align:center}

.visual{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px;min-height:132px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.sayma-oge{font-size:34px;line-height:1.1}
.renk-kutu{
  display:block;width:120px;height:92px;border-radius:18px;
  /* Beyaz renk kartin zemininde kaybolmasin diye cerceve HER renkte var:
     yalnizca beyaza cerceve koymak, beyazi "cerceveli olan" diye
     ele veren bir ipucu olurdu. */
  border:3px solid rgba(46,42,38,.22);
}
.kart-emoji{font-size:62px}
.kart-altyazi{font-size:16px;color:var(--muted);width:100%;text-align:center}
.kelime-buyuk{font-size:40px;font-weight:bold;letter-spacing:1px}
.kelime-kart{
  background:#F3E7D3;border-radius:14px;padding:10px 14px;
  font-size:22px;font-weight:bold;
}
.kelime-kart.bos{background:#FFE39A;color:#8A6B12}

.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answer-btn{
  background:var(--card);border:none;border-radius:var(--r);
  padding:18px 10px;font-size:21px;font-weight:bold;font-family:inherit;
  color:var(--ink);box-shadow:var(--shadow);cursor:pointer;min-height:64px;
}
.answer-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.answer-btn.dogru{background:var(--ok);color:#fff}
.answer-btn.yanlis{background:var(--no);color:#fff}
.answer-btn[disabled]{cursor:default}

.hint-row{margin-top:14px;text-align:center}
.hint-text{margin:10px 0 0;color:var(--muted);font-size:15px}

.feedback{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--card);border-radius:var(--r) var(--r) 0 0;
  box-shadow:0 -6px 24px rgba(0,0,0,.14);
  padding:16px 16px calc(16px + var(--safe-b));text-align:center;
}
.fb-emoji{font-size:38px}
.fb-text{margin:6px 0 12px;font-size:19px;font-weight:bold}

/* ---------- sonuc ---------- */
.result{align-items:center;justify-content:center}
.result-card{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:24px 20px;text-align:center;width:100%;max-width:360px;
}
.result-emoji{font-size:54px}
.result-card h2{margin:6px 0}
.stars-big{font-size:34px;color:var(--gold)}
.result-score{margin:8px 0 2px;font-size:18px;font-weight:bold}
.result-hedef{margin:0 0 14px;color:var(--muted);font-size:15px}

/* ---------- dugmeler ---------- */
.primary-btn{
  display:block;width:100%;margin:8px 0;padding:16px;
  background:var(--ok);color:#fff;border:none;border-radius:var(--r);
  font-size:19px;font-weight:bold;font-family:inherit;
  box-shadow:var(--shadow);cursor:pointer;
}
.primary-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.ghost-btn{
  display:inline-block;margin:6px 4px;padding:12px 16px;
  background:var(--card);color:var(--ink);border:none;border-radius:var(--r);
  font-size:16px;font-family:inherit;box-shadow:var(--shadow);cursor:pointer;
}
.ghost-btn.small{font-size:14px;padding:9px 13px}
.ghost-btn.yanlis{background:var(--no);color:#fff}

/* ---------- katmanlar ---------- */
.sifirla-katman{
  position:fixed;inset:0;z-index:60;background:rgba(46,42,38,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.sifirla-kutu{
  background:var(--card);border-radius:var(--r);padding:22px 20px;
  width:100%;max-width:360px;text-align:center;box-shadow:var(--shadow);
}
.sifirla-emoji{font-size:44px}
.sifirla-kutu h2{margin:6px 0;font-size:21px}
.sifirla-aciklama{color:var(--muted);font-size:15px}
.kilit-soru{font-size:17px;margin:14px 0 8px}
.kilit-siklar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sifirla-dugmeler{margin-top:14px}

/* ---------- 2-4. SINIF: COK KELIMELI KALIPLAR ----------
   1. sinifta her cevap TEK kelimeydi ('five', 'red') ve 21px sigiyordu.
   Burada "good morning", "ride a bike", "the United States of America"
   gibi kaliplar var; iki sutunlu dugmede tasiyorlardi. Olcu kuculdu ve
   satir kirilmasi acildi.

   DOGRULANMADI: bu degisiklik gercek bir tarayicida/cihazda
   GORULMEDI. Olculen tek sey, sayfanin ve testlerin bozulmadigi. */
.answer-btn{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.kelime-buyuk{font-size:30px;line-height:1.2;text-align:center}
.visual{overflow-wrap:anywhere}
.kart-altyazi{overflow-wrap:anywhere}


/* ORTAK UYARI SERIDI  -  kilitli bolume dokununca sebebini soyler.
   18 Ekim 2026'ya kadar 17 derste kilitli bolume dokunmak SESSIZ
   kaliyordu ve cocuk uygulamayi bozuk saniyordu. Okuma dersindeki
   uyari bicimi ortak kalip olarak buraya alindi.
   CEZA RENGI YOK: kirmizi, carpi, titresim kullanilmaz. */
#uyari{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);
       background:rgba(58,68,80,.95);color:#fff;padding:12px 18px;border-radius:16px;
       font-size:15px;font-weight:600;max-width:86vw;text-align:center;
       opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:99}
#uyari.gorun{opacity:1;transform:translate(-50%,0)}


/* ILERLEME KODU EKRANI  -  18 Ekim 2026.
   Motor A'daki (matematik) ekranla ayni gorunum: iki ayri gorunum iki
   ayri uygulama hissi verirdi, oysa ayni kod ayni kutuya yaziliyor. */
.kod-katman{
  position:fixed;inset:0;background:rgba(32,40,48,.55);z-index:120;
  display:flex;align-items:center;justify-content:center;padding:18px}
.kod-katman[hidden]{display:none}
.kod-kutu{
  position:relative;background:#fff;border-radius:22px;padding:26px 22px 22px;
  max-width:380px;width:100%;text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.22);max-height:92vh;overflow-y:auto}
.kod-kapat{
  position:absolute;top:10px;right:12px;border:0;background:transparent;
  font-size:19px;color:#8A97A3;cursor:pointer;line-height:1;padding:6px}
.kod-sekmeler{display:flex;gap:8px;margin:2px 0 16px;justify-content:center}
.kod-sekme{
  border:0;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;
  background:#EDF1F5;color:#5B6B7A;cursor:pointer}
.kod-sekme.etkin{background:#4F8EF7;color:#fff}
.kod-emoji{font-size:40px;line-height:1;margin-bottom:6px}
.kod-aciklama{margin:0 0 14px;font-size:14.5px;color:#6B7A88;line-height:1.45}
.kod-goster{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;font-weight:700;
  letter-spacing:.08em;background:#F3F6F9;border-radius:14px;padding:14px 10px;
  margin-bottom:12px;word-break:break-all;user-select:all}
.kod-not{margin:12px 0 0;font-size:13.5px;color:#7A8894;min-height:18px}
.kod-giris{
  width:100%;box-sizing:border-box;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:18px;letter-spacing:.06em;text-align:center;padding:13px 10px;
  border:2px solid #DCE3EA;border-radius:14px;margin-bottom:12px;text-transform:uppercase}
.kod-giris:focus{outline:none;border-color:#4F8EF7}
.kod-sonuc{margin:12px 0 0;font-size:14px;min-height:20px;line-height:1.4}
.kod-sonuc.tamam{color:#256B33}
.kod-sonuc.hata{color:#C0392B}

/* ===== GEZINTI TURU DUZELTMELERI (12.11.2026, testler/gezinti-tarayici.mjs) =====
   1) KATMANLAR KISA EKRANDA KAYAR. Yatay telefonda (780x360) ilerleme kodu
      kutusu ekrandan uzundu; align-items:center kutunun ustunu kesiyordu ve
      kapat dugmesi ekranin disinda kaliyordu. Kutu sigarsa yine ortada durur
      (otomatik kenar bosluklari), sigmazsa ustten baslar ve katman kayar.
   2) DOKUNMA HEDEFI EN AZ 44 PX. Alt menu, ipucu, sonuc dugmeleri, kod
      sekmeleri, kapat ve veli/ogretmen paneli dugmeleri 36-43 px idi.
      Ortak modullerin (veli-kilit.js, ogretmen.js, veli-kapi.js) kendi
      uslubu min-height vermiyor; burada yalniz alt sinir ekleniyor. */
#kod-katman,#sifirla-katman,#kapali-katman,#isim-katman,#veli-katman{overflow-y:auto}
#kod-katman>*,#sifirla-katman>*,#kapali-katman>*,#isim-katman>*,#veli-katman>*{margin-top:auto;margin-bottom:auto}
#btn-hint,#btn-kod,#btn-veli,#btn-reset,#btn-isimler,#btn-to-home,#btn-again,#btn-next-level,
#sekme-al,#sekme-gir,#btn-kapali-tamam,#btn-kod-kopyala,#btn-kod-yukle,
.vk button,.vk-tanitim button,.vk-kutu .vk-kapat,.vk-kutu .vk-tamam,.ogr-dugmeler button,
.vkp-katman button{min-height:44px}
#btn-kod-kapat{min-width:44px;min-height:44px}

/* ============ BONUS BOLUMLER (12.11.2026) ============
   Birinci motordaki (Matematik css/style.css) gorunumun aynisi: mufredat
   disi, her zaman acik, konuyu bitirmek icin sart degil.
   Bekci: testler/bonus-isaret-testi.mjs                              */
.level-row.bonus{
  background:linear-gradient(135deg,#FFF6E0,#FFEFC7);
  border:2px dashed #E9B949;
}
.bonus-rozet{
  display:inline-block;margin-left:8px;vertical-align:middle;
  background:#E9B949;color:#4A3306;
  font-size:10.5px;font-weight:bold;letter-spacing:.5px;
  padding:2px 7px;border-radius:9px;
}