: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;
}
.screen[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- ana menu ---------- */
.home-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.mascot{font-size:46px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
.home-head h1{margin:0;font-size:27px;letter-spacing:.5px}
.sub{margin:0;color:var(--muted);font-size:14px}
.icon-btn{
  margin-left:auto;background:var(--card);border:none;border-radius:16px;
  width:48px;height:48px;font-size:22px;box-shadow:var(--shadow);cursor:pointer;
}
.icon-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.icon-btn.off{opacity:.4}

.starbar{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--card);border-radius:var(--r);padding:10px;margin:12px 0 16px;
  box-shadow:var(--shadow);font-size:17px;font-weight:bold;
}

.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.topic-card{
  border:none;border-radius:var(--r);padding:18px 12px;color:#fff;cursor:pointer;
  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 .t-icon{font-size:42px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.topic-card .t-title{font-size:17px;font-weight:bold;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.topic-card .t-prog{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}
.bar h2{margin:0;font-size:20px;flex:1;text-align:center}
.bar-spacer{width:48px}
.bar .icon-btn{margin-left:0}

/* ---------- level listesi ---------- */
.level-list{display:flex;flex-direction:column;gap:11px;overflow-y:auto;padding-bottom:8px}
.level-row{
  display:flex;align-items:center;gap:12px;background:var(--card);border:none;
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;
  text-align:left;font-family:inherit;font-size:16px;color:var(--ink);
}
.level-row:active{transform:translateY(2px)}
.level-row .n{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:bold;font-size:17px;
}
.level-row .meta{flex:1;min-width:0}
.level-row .lv-title{font-weight:bold;display:block}
.level-row .lv-kazanim{font-size:11.5px;color:var(--muted);display:block;margin-top:2px}
.level-row .lv-stars{flex:none;font-size:15px;letter-spacing:-1px}

/* ---------- oyun ---------- */
.game{gap:12px}
.game-bar{margin-bottom:4px}
.progress-track{flex:1;height:14px;background:#E9DFCC;border-radius:9px;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#7ED957,#38B36B);border-radius:9px;transition:width .35s ease}
.lives{font-size:17px;flex:none;letter-spacing:-2px}

.q-area{display:flex;flex-direction:column;gap:12px}
.q-prompt{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.q-prompt p{margin:0;font-size:20px;font-weight:bold;flex:1}
.speak-btn{
  flex:none;width:44px;height:44px;border:none;border-radius:14px;background:#FFE9B8;
  font-size:20px;cursor:pointer;
}
.speak-btn:active{transform:scale(.93)}

.visual{
  background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);
  min-height:110px;display:flex;align-items:center;justify-content:center;
}
.visual:empty{display:none}

/* gorsel: nesneler */
.objs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center}
.objs .o{font-size:34px;line-height:1;animation:drop .3s backwards}
@keyframes drop{from{opacity:0;transform:translateY(-10px) scale(.6)}to{opacity:1;transform:none}}
.group-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.group{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:150px;
  padding:9px;border:3px dashed #DCD2BE;border-radius:16px;
}
.group-op{font-size:30px;font-weight:bold;color:var(--muted)}

/* gorsel: sayi dogrusu */
.nline{display:flex;align-items:flex-end;gap:0;overflow-x:auto;width:100%;padding:8px 2px}
.nline .tick{
  flex:1;min-width:27px;text-align:center;font-size:14px;font-weight:bold;
  border-top:4px solid #DCD2BE;padding-top:6px;position:relative;
}
.nline .tick.mark{color:var(--ok);border-top-color:var(--ok)}
.nline .tick.miss{color:var(--no);border-top-color:var(--no)}

/* gorsel: sekiller */
.shapes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.shp{display:inline-block}
.shp.kare{width:52px;height:52px;border-radius:6px}
.shp.dikdortgen{width:76px;height:44px;border-radius:6px}
.shp.daire{width:54px;height:54px;border-radius:50%}
.shp.ucgen{width:0;height:0;border-left:29px solid transparent;border-right:29px solid transparent;border-bottom:50px solid currentColor;background:none !important}

/* gorsel: oruntu */
.pattern{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:center}
.pattern .p{
  font-size:28px;min-width:48px;height:48px;display:grid;place-items:center;
  background:#F6F0E2;border-radius:13px;font-weight:bold;
}
.pattern .p.q{background:#FFE1DB;color:var(--no);border:3px dashed var(--no)}

/* gorsel: saat */
.clock-face{position:relative;width:150px;height:150px;border-radius:50%;background:#FFFDF6;border:7px solid #4F8EF7}
.clock-face .num{position:absolute;font-size:14px;font-weight:bold;transform:translate(-50%,-50%)}
.clock-face .hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:4px}
.clock-face .hour{width:7px;height:38px;background:var(--ink);margin-left:-3.5px}
.clock-face .minute{width:5px;height:54px;background:var(--no);margin-left:-2.5px}
.clock-face .pin{position:absolute;left:50%;top:50%;width:12px;height:12px;background:var(--ink);border-radius:50%;transform:translate(-50%,-50%)}

/* gorsel: para (MAT.1.1.9)
   1 TL madeni - yuvarlak; 5-200 TL banknot - dikdortgen.
   Sekil farki bilerek duruyor: cocuk paranin turunu once bicimden
   ayirt etsin, sonra renginden, en son ustundeki sayidan.            */
.paralar{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:center}
.coin{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-weight:bold;font-size:13px;text-align:center;line-height:1.1;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), var(--shadow);
}
.banknot{
  min-width:86px;height:46px;padding:0 10px;border-radius:7px;
  display:grid;place-items:center;
  font-weight:bold;font-size:16px;letter-spacing:.3px;
  border:2px solid rgba(0,0,0,.22);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14), var(--shadow);
}

/* gorsel: karsilastirma */
.compare{display:flex;gap:14px;align-items:stretch;width:100%;justify-content:center}
.cmp-side{flex:1;max-width:46%;padding:10px;background:#F6F0E2;border-radius:16px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center}
.cmp-side .o{font-size:27px}

/* gorsel: islem */
.eq{display:flex;align-items:center;gap:10px;font-size:40px;font-weight:bold;flex-wrap:wrap;justify-content:center}
.eq .box{
  min-width:62px;height:62px;padding:0 8px;display:grid;place-items:center;
  background:#FFE9B8;border-radius:15px;border:4px dashed #E3B84A;color:var(--muted);
}

/* ---------- cevaplar ---------- */
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto}
.answers.three{grid-template-columns:1fr 1fr 1fr}
.ans{
  border:none;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);
  padding:20px 10px;font-size:30px;font-weight:bold;cursor:pointer;
  font-family:inherit;color:var(--ink);min-height:78px;
}
.ans:active{transform:translateY(3px)}
.ans.ok{background:var(--ok);color:#fff;animation:shake-ok .4s}
.ans.no{background:var(--no);color:#fff;animation:shake-no .4s}
.ans:disabled{cursor:default}
@keyframes shake-ok{0%,100%{transform:scale(1)}45%{transform:scale(1.09)}}
@keyframes shake-no{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

.hint-row{min-height:40px;text-align:center}
.hint-text{margin:7px 0 0;font-size:14.5px;color:var(--muted)}

/* ---------- geri bildirim ---------- */
.feedback{
  position:fixed;inset:0;background:rgba(46,42,38,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:20;
}
.feedback[hidden]{display:none}
.fb-emoji{font-size:74px;animation:bounce .5s}
@keyframes bounce{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.fb-text{color:#fff;font-size:23px;font-weight:bold;margin:0;text-align:center;padding:0 24px}

/* ---------- butonlar ---------- */
.primary-btn{
  border:none;border-radius:var(--r);background:var(--gold);color:#3A2B06;
  padding:16px 40px;font-size:20px;font-weight:bold;cursor:pointer;
  box-shadow:0 4px 0 #C98F14;font-family:inherit;
}
.primary-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #C98F14}
.ghost-btn{
  border:none;background:none;color:var(--muted);font-size:15px;cursor:pointer;
  padding:11px 16px;font-family:inherit;text-decoration:underline;
}
.ghost-btn.small{font-size:14px}

/* ---------- sonuc ---------- */
.result{align-items:center;justify-content:center}
.result-card{
  background:var(--card);border-radius:28px;padding:28px 22px;box-shadow:var(--shadow);
  text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;max-width:340px;width:100%;
}
.result-emoji{font-size:70px;animation:bounce .6s}
.result-card h2{margin:0;font-size:25px}
.stars-big{font-size:42px;letter-spacing:3px}
.stars-big .s{display:inline-block;animation:bounce .5s backwards}
.result-score{margin:0;color:var(--muted);font-size:16px}

/* ---------- konfeti ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.confetti i{position:absolute;width:10px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(720deg);opacity:.9}}

/* ---------- genis ekran ---------- */
@media (min-width:600px){
  body{font-size:19px}
  #app{max-width:620px;margin:0 auto;width:100%}
  .topic-grid{gap:18px}
  .ans{font-size:34px;min-height:92px}
}
@media (min-height:760px){
  .visual{min-height:170px}
}

/* ==================== KARBAY (kar baykusu maskot) ==================== */

.mascot{filter:saturate(.45) brightness(1.3)}

.karbay-katman{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}

.karbay{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;visibility:hidden;width:min(230px,62vw);
}
.karbay.gir{visibility:visible;animation:karbay-gir var(--sure,3s) cubic-bezier(.22,1.2,.36,1) forwards}

/* --- gelis yonleri: konum + ekran disi baslangic --- */
.karbay[data-yon="sag"]      {right:12px;  top:38%;    --gx:160%;  --gy:0}
.karbay[data-yon="sol"]      {left:12px;   top:38%;    --gx:-160%; --gy:0}
.karbay[data-yon="ust"]      {top:64px;    left:50%;   --gx:0;     --gy:-190%; margin-left:min(-115px,-31vw)}
.karbay[data-yon="alt"]      {bottom:88px; left:50%;   --gx:0;     --gy:190%;  margin-left:min(-115px,-31vw)}
.karbay[data-yon="sag-ust"]  {right:12px;  top:64px;   --gx:160%;  --gy:-150%}
.karbay[data-yon="sag-alt"]  {right:12px;  bottom:88px;--gx:160%;  --gy:150%}
.karbay[data-yon="sol-ust"]  {left:12px;   top:64px;   --gx:-160%; --gy:-150%}
.karbay[data-yon="sol-alt"]  {left:12px;   bottom:88px;--gx:-160%; --gy:150%}

@keyframes karbay-gir{
  0%  {transform:translate(var(--gx),var(--gy)) scale(.55) rotate(-12deg);opacity:0}
  16% {transform:translate(0,0) scale(1.06) rotate(3deg);opacity:1}
  24% {transform:translate(0,0) scale(1) rotate(0);opacity:1}
  80% {transform:translate(0,0) scale(1) rotate(0);opacity:1}
  100%{transform:translate(var(--gx),var(--gy)) scale(.55) rotate(10deg);opacity:0}
}

/* --- baykus --- */
.karbay-kus{position:relative;display:flex;align-items:center;justify-content:center}
.karbay-kus .govde{
  font-size:60px;line-height:1;
  filter:saturate(.4) brightness(1.35) drop-shadow(0 3px 5px rgba(0,0,0,.25));
}
.karbay-kus .kanat{
  position:absolute;font-size:26px;line-height:1;
  filter:saturate(.25) brightness(1.5);
}
.karbay-kus .kanat.sol {left:-6px;  transform-origin:right center;animation:kanat-sol .34s ease-in-out infinite}
.karbay-kus .kanat.sag {right:-6px; transform-origin:left center; animation:kanat-sag .34s ease-in-out infinite}
@keyframes kanat-sol{0%,100%{transform:rotate(-18deg) scaleX(-1)}50%{transform:rotate(26deg) scaleX(-1)}}
@keyframes kanat-sag{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-26deg)}}

/* dururken kanatlar yavaslar, govde zipar */
.karbay.sevinc .karbay-kus .govde{animation:karbay-zipla .5s ease-in-out 3}
.karbay.yardim .karbay-kus .govde{animation:karbay-salin 1.1s ease-in-out 3}
@keyframes karbay-zipla{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-13px) scale(1.09)}}
@keyframes karbay-salin{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* --- konusma balonu --- */
.karbay-balon{
  background:#fff;color:var(--ink);border-radius:17px;padding:10px 13px;
  font-size:14.5px;font-weight:bold;text-align:center;line-height:1.3;
  box-shadow:0 4px 14px rgba(0,0,0,.22);border:3px solid #BFE3FF;
  max-width:100%;position:relative;
}
.karbay-balon:empty{display:none}
.karbay-balon::after{
  content:"";position:absolute;left:50%;bottom:-11px;margin-left:-8px;
  border:8px solid transparent;border-top-color:#BFE3FF;
}
.karbay.yardim .karbay-balon{border-color:#FFD79A}
.karbay.yardim .karbay-balon::after{border-top-color:#FFD79A}

/* --- sacilan kalp ve yildizlar --- */
.sacilan{
  position:fixed;pointer-events:none;z-index:46;
  animation:sacil 1.5s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes sacil{
  0%  {transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0}
  18% {opacity:1;transform:translate(calc(-50% + var(--dx)*.32),calc(-50% + var(--dy)*.32)) scale(1.15) rotate(calc(var(--don)*.3))}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.6) rotate(var(--don));opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .karbay-kus .kanat{animation:none}
  .karbay.gir{animation-duration:.2s}
}

/* ============ ARKA PLAN: Karbay'ın kar gokyuzu ============ */

body{
  background:linear-gradient(180deg,#BFE0FF 0%,#DDEEFF 34%,#F2F8FF 62%,#FFF6E5 100%);
  background-attachment:fixed;
}
#app{position:relative;z-index:1}

.gokyuzu{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* kar tepeleri - alt kisimda yumusak beyaz kabartilar */
.gokyuzu .tepe{position:absolute;bottom:-54vw;border-radius:50%;background:#fff;opacity:.72}
.gokyuzu .tepe.t1{left:-22vw;width:86vw;height:86vw}
.gokyuzu .tepe.t2{right:-26vw;width:74vw;height:74vw;background:#F4FAFF;opacity:.85}

/* yavasca dusen kar taneleri */
.kar{
  position:absolute;top:-8vh;color:#fff;opacity:.85;
  text-shadow:0 1px 3px rgba(90,130,170,.35);
  animation:kar-dus linear infinite;
}
@keyframes kar-dus{
  0%  {transform:translateY(-10vh) rotate(0) translateX(0)}
  50% {transform:translateY(45vh) rotate(180deg) translateX(16px)}
  100%{transform:translateY(108vh) rotate(360deg) translateX(-10px)}
}
.k1{left:6%;  font-size:21px;animation-duration:17s;animation-delay:0s}
.k2{left:19%; font-size:14px;animation-duration:22s;animation-delay:3s}
.k3{left:33%; font-size:26px;animation-duration:19s;animation-delay:7s}
.k4{left:47%; font-size:16px;animation-duration:25s;animation-delay:1s}
.k5{left:61%; font-size:23px;animation-duration:20s;animation-delay:9s}
.k6{left:74%; font-size:15px;animation-duration:24s;animation-delay:5s}
.k7{left:86%; font-size:24px;animation-duration:18s;animation-delay:12s}
.k8{left:94%; font-size:13px;animation-duration:26s;animation-delay:15s}

@media (prefers-reduced-motion:reduce){ .kar{animation:none;opacity:.5} }

/* ============ ANA MENU: ekrani dolduran duzen ============ */

.screen.home{gap:10px}

.home-head{
  background:rgba(255,255,255,.82);border-radius:24px;padding:10px 14px;
  box-shadow:0 4px 16px rgba(80,120,160,.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  margin-bottom:0;
}
.home-title{flex:1;min-width:0}
.home-head h1{font-size:clamp(21px,3.4vh,30px);color:#20536B}
.home-head .sub{font-size:clamp(12px,1.7vh,15px)}
.mascot{font-size:clamp(38px,6.4vh,56px)}

.starbar{
  margin:0;padding:9px;background:rgba(255,255,255,.86);
  font-size:clamp(14px,2vh,18px);box-shadow:0 3px 12px rgba(80,120,160,.14);
}

/* kartlar kalan alanin tamamini esit bolerek doldurur */
.topic-grid{
  flex:1;min-height:0;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
}
.topic-card{
  min-height:0;height:100%;gap:4px;padding:10px 8px;
  box-shadow:0 5px 0 rgba(0,0,0,.14), 0 10px 24px rgba(60,100,140,.18);
  position:relative;overflow:hidden;
}
/* kartin ustunde hafif parlama */
.topic-card::before{
  content:"";position:absolute;top:-46%;left:-18%;width:150%;height:64%;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));
  border-radius:50%;pointer-events:none;
}
.topic-card .t-icon{font-size:clamp(34px,7.6vh,62px)}
.topic-card .t-title{font-size:clamp(14px,2.3vh,20px);line-height:1.15}
.topic-card .t-prog{
  font-size:clamp(11px,1.7vh,15px);background:rgba(0,0,0,.16);
  padding:2px 10px;border-radius:11px;
}

.home-foot{padding-top:6px;margin-top:0}
.home-foot .ghost-btn{color:#5C7A90}

/* ============ YATAY (telefon yan cevrilince) ============ */

@media (orientation:landscape) and (max-height:620px){
  .screen{padding-top:calc(8px + var(--safe-t));padding-bottom:calc(8px + var(--safe-b))}
  .screen.home{gap:7px}
  .topic-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;gap:9px}
  .topic-card{padding:8px 6px}
  .topic-card .t-icon{font-size:clamp(26px,11vh,44px)}
  .mascot{font-size:clamp(30px,9vh,44px)}
  .home-head{padding:6px 12px}
  .starbar{padding:6px}
  .home-foot{padding-top:2px}
  .answers{grid-template-columns:repeat(4,1fr)}
  .answers.three{grid-template-columns:repeat(3,1fr)}
  .ans{min-height:60px;padding:12px 8px;font-size:26px}
  .visual{min-height:78px;padding:9px}
  .q-prompt{padding:9px}
  .q-prompt p{font-size:17px}
  .karbay{width:min(200px,38vw)}
  .karbay-kus .govde{font-size:46px}
}

/* ============ BOLUM LISTESI: bos alan kalmasin ============ */

.level-list{flex:1;justify-content:flex-start}
.level-row{background:rgba(255,255,255,.93)}
.bar h2{color:#20536B}

/* kar taneleri kartlarin onunden gecsin (tepeler arkada kalir) */
.kar-katman{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.kar-katman .kar{opacity:.72}
.topic-card .t-icon{font-size:clamp(40px,9vh,72px)}

/* ============ IKONLAR VE SAYILACAK NESNELER BUYUTULDU ============ */

/* konu kartlarindaki ikonlar */
.topic-card .t-icon{font-size:clamp(48px,10.5vh,88px)}

/* oyun alani daha genis olsun ki nesneler buyuyebilsin */
.q-area{flex:1;min-height:0}
.visual{flex:1;min-height:clamp(150px,26vh,320px);padding:12px}

/* sayilacak nesneler - adede gore olceklenir */
.objs{gap:clamp(5px,1.2vh,12px)}
.objs.az   .o{font-size:clamp(52px,10vh,92px)}
.objs.orta .o{font-size:clamp(40px,7.4vh,68px)}
.objs.cok  .o{font-size:clamp(28px,5vh,46px)}
.group{max-width:none;padding:clamp(8px,1.6vh,14px);border-width:4px}

/* karsilastirma gorseli */
.cmp-side .o{font-size:clamp(34px,6.4vh,58px)}
.cmp-side{padding:clamp(8px,1.6vh,14px);gap:clamp(4px,1vh,9px)}

/* oruntu kutulari */
.pattern{gap:clamp(7px,1.4vh,13px)}
.pattern .p{
  font-size:clamp(32px,6vh,52px);
  min-width:clamp(56px,9.5vh,84px);
  height:clamp(56px,9.5vh,84px);
  border-radius:16px;
}

/* sekiller */
.shapes{gap:clamp(12px,2.4vh,22px)}
.shp.kare       {width:clamp(58px,10vh,92px); height:clamp(58px,10vh,92px)}
.shp.dikdortgen {width:clamp(84px,14vh,128px);height:clamp(50px,8.4vh,76px)}
.shp.daire      {width:clamp(60px,10.4vh,96px);height:clamp(60px,10.4vh,96px)}
.shp.ucgen{
  border-left-width:clamp(32px,5.6vh,52px);
  border-right-width:clamp(32px,5.6vh,52px);
  border-bottom-width:clamp(56px,9.6vh,88px);
}

/* saat */
.clock-face{width:clamp(170px,29vh,260px);height:clamp(170px,29vh,260px);border-width:8px}
.clock-face .num{font-size:clamp(15px,2.6vh,22px)}
.clock-face .hour{width:8px;height:clamp(44px,7.6vh,68px);margin-left:-4px}
.clock-face .minute{width:6px;height:clamp(62px,10.6vh,96px);margin-left:-3px}

/* paralar */
.paralar{gap:clamp(8px,1.6vh,14px)}
.coin{
  width:clamp(64px,11vh,96px);height:clamp(64px,11vh,96px);
  font-size:clamp(14px,2.3vh,19px);
}
.banknot{
  min-width:clamp(96px,16vh,132px);height:clamp(52px,8.6vh,72px);
  font-size:clamp(17px,2.8vh,23px);border-radius:clamp(7px,1.2vh,10px);
}

/* islem (5 + 3 = ?) */
.eq{font-size:clamp(42px,8vh,66px);gap:clamp(10px,2vh,18px)}
.eq .box{
  min-width:clamp(66px,11vh,98px);height:clamp(66px,11vh,98px);
  border-radius:18px;
}

/* sayi dogrusu */
.nline .tick{min-width:clamp(30px,5vh,46px);font-size:clamp(15px,2.5vh,21px);border-top-width:5px}

/* ============ KARBAY: SVG cizim (emoji yerine) ============ */

.karbay-kus{display:flex;align-items:center;justify-content:center}
.karbay-kus .baykus{
  width:clamp(96px,18vh,150px);height:auto;display:block;
  filter:drop-shadow(0 5px 10px rgba(40,70,100,.28));
}
.mascot{display:flex;align-items:center;justify-content:center;animation:none}
.mascot .baykus{
  width:clamp(46px,7.8vh,68px);height:auto;display:block;
  filter:drop-shadow(0 2px 4px rgba(40,70,100,.22));
  animation:bob 3.2s ease-in-out infinite;
}

/* kanat cirpma - SVG gruplari */
.kb-kanat{transform-box:fill-box;transform-origin:center}
.karbay-kus .kb-sol{animation:kb-cirp-sol .38s ease-in-out infinite}
.karbay-kus .kb-sag{animation:kb-cirp-sag .38s ease-in-out infinite}
@keyframes kb-cirp-sol{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(-16deg) translateY(-3px)}}
@keyframes kb-cirp-sag{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(16deg) translateY(-3px)}}

/* ana menude cok daha sakin kanat */
.mascot .kb-sol{animation:kb-cirp-sol 3.4s ease-in-out infinite}
.mascot .kb-sag{animation:kb-cirp-sag 3.4s ease-in-out infinite}

/* sevinc / yardim hareketleri artik SVG uzerinde */
.karbay.sevinc .karbay-kus .baykus{animation:karbay-zipla .5s ease-in-out 3}
.karbay.yardim .karbay-kus .baykus{animation:karbay-salin 1.1s ease-in-out 3}

@media (prefers-reduced-motion:reduce){
  .kb-kanat{animation:none !important}
  .mascot .baykus{animation:none}
}

/* ============ SORU EKRANI: bos alan birakmadan, nesneler daha buyuk ============ */

/* gorsel alani icerik kadar olsun; artan yer cevap butonlarina gitsin */
.q-area{flex:0 1 auto}
.visual{
  flex:0 1 auto;
  min-height:clamp(120px,17vh,180px);
  max-height:46vh;
  padding:clamp(10px,1.8vh,16px);
}

/* sayilacak nesneler: az sayidayken cok daha buyuk */
.objs.az   .o{font-size:clamp(68px,13.5vh,136px)}
.objs.orta .o{font-size:clamp(46px,8.8vh,84px)}
.objs.cok  .o{font-size:clamp(30px,5.4vh,54px)}

/* cevap butonlari da buyusun - kucuk parmaklar icin kolay hedef */
.ans{
  min-height:clamp(88px,12.5vh,130px);
  font-size:clamp(34px,5.8vh,56px);
  padding:clamp(12px,2vh,22px) 10px;
}
.answers{gap:clamp(10px,1.8vh,16px)}

/* soru metni biraz daha buyuk */
.q-prompt p{font-size:clamp(19px,3vh,26px)}

/* ============ NESNE DIZILISI: satirli, desenli ============ */

.objs{flex-direction:column;justify-content:center}
.obj-satir{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(6px,1.4vh,16px);
}
.objs.az   .obj-satir{gap:clamp(10px,2vh,22px)}
.objs.cok  .obj-satir{gap:clamp(4px,1vh,10px)}

/* toplama kumeleri de kendi icinde desenli dizilir */
.group .objs{gap:clamp(3px,0.8vh,8px)}

/* gorsel karti daha dolgun: az nesnede bile alt tarafta bosluk kalmasin */
.visual{min-height:clamp(190px,31vh,430px)}
.game{gap:clamp(9px,1.8vh,18px)}
.hint-row{min-height:0;padding-top:2px}

/* Karbay biraz daha buyuk ve belirgin */
.karbay-kus .baykus{width:clamp(120px,22vh,185px)}
.karbay{width:min(260px,68vw)}

/* ============ TASMA DUZELTMESI ============
   Nesne boyutu sadece ekran YUKSEKLIGINE gore hesaplaniyordu; 5'li
   satirda yatayda tasiyordu. Artik satirdaki nesne sayisina gore
   genislik sinirli: n nesne en fazla ~%88 genislik kaplar.         */

.objs.satir-1 .o{font-size:min(clamp(68px,13.5vh,150px), 46vw)}
.objs.satir-2 .o{font-size:min(clamp(60px,12.5vh,140px), 34vw)}
.objs.satir-3 .o{font-size:min(clamp(50px,11vh,118px),  25vw)}
.objs.satir-4 .o{font-size:min(clamp(42px,9.4vh,100px), 19vw)}
.objs.satir-5 .o{font-size:min(clamp(34px,8vh,88px),    15vw)}

/* kume icinde (toplama) daha dar alan var */
.group .objs.satir-1 .o{font-size:min(11vh, 24vw)}
.group .objs.satir-2 .o{font-size:min(9.5vh, 17vw)}
.group .objs.satir-3 .o{font-size:min(8vh, 12vw)}
.group .objs.satir-4 .o{font-size:min(7vh, 9.5vw)}
.group .objs.satir-5 .o{font-size:min(6vh, 8vw)}

/* guvenlik agi: hicbir sekilde disari tasmasin */
.objs, .obj-satir{max-width:100%}
.visual{overflow:hidden}

/* ============ IPUCU: Karbay ucup gitse de ekranda kalir ============ */

.hint-row{min-height:0;padding-top:4px}
.hint-text{
  margin:8px auto 0;
  max-width:96%;
  font-size:clamp(15px,2.3vh,19px);
  color:#5A4A33;
  background:#FFF3D6;
  border:2px solid #F0D089;
  border-radius:14px;
  padding:9px 13px;
  line-height:1.35;
  box-shadow:0 2px 8px rgba(120,90,30,.12);
  animation:ipucu-bel .3s ease-out;
}
@keyframes ipucu-bel{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Karbay'ın konusma balonu da daha okunakli olsun */
.karbay-balon{
  font-size:clamp(15px,2.3vh,19px);
  padding:12px 15px;
  line-height:1.35;
}

/* ============ SIK METNI: uzunluga gore olceklenir ============
   Yazi boyutu sayilar icin ayarlanmisti; "12 buçuk" ya da
   "Dikdörtgen" gibi kelimeler o boyutta butondan tasiyordu.       */

.ans{
  line-height:1.15;
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
  padding-left:6px;
  padding-right:6px;
}
.ans.sik-kisa   {font-size:clamp(34px,5.8vh,56px)}
.ans.sik-orta   {font-size:clamp(27px,4.5vh,44px)}
.ans.sik-uzun   {font-size:clamp(19px,3.1vh,30px)}
.ans.sik-cokuzun{font-size:clamp(15px,2.5vh,24px)}

/* uc sikli duzende butonlar daha dar, bir tik daha kucult */
.answers.three .ans.sik-uzun   {font-size:clamp(17px,2.8vh,26px)}
.answers.three .ans.sik-cokuzun{font-size:clamp(14px,2.3vh,21px)}

/* saat kadrani hicbir ekranda tasmasin */
.clock-face{
  width:min(clamp(170px,29vh,260px), 62vw);
  height:min(clamp(170px,29vh,260px), 62vw);
}

/* sekil gorseli de yatayda sinirli olsun */
.shapes{max-width:100%}
.shp.kare       {width:min(clamp(58px,10vh,92px),   20vw); height:min(clamp(58px,10vh,92px),   20vw)}
.shp.daire      {width:min(clamp(60px,10.4vh,96px), 21vw); height:min(clamp(60px,10.4vh,96px), 21vw)}
.shp.dikdortgen {width:min(clamp(84px,14vh,128px),  27vw); height:min(clamp(50px,8.4vh,76px),  16vw)}

/* ============ BONUS BOLUMLER ============
   Mufredat disi, ogrenmesi guzel ama zorunlu degil.
   Konuyu bitirmek icin oynanmasi gerekmez.                       */

.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;
}
.level-row.bonus .n{background:#E9B949 !important}

/* ============ BONUS SEKILLER ============ */
.shp.besgen,
.shp.altigen,
.shp.eskenar{
  width:min(clamp(62px,10.6vh,98px), 22vw);
  height:min(clamp(62px,10.6vh,98px), 22vw);
}
.shp.besgen  {clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}
.shp.altigen {clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)}
.shp.eskenar {clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}

/* ============ SEKIL GRAFIGI (veri isleme) ============
   Her tur kendi satirinda. Cocuk satir uzunluklarini karsilastirarak
   "en cok hangisi" sorusunu tek bakista cevaplayabilmeli.           */

.grafik{display:flex;flex-direction:column;gap:clamp(8px,1.8vh,16px);width:100%}
.grafik-satir{display:flex;align-items:center;gap:clamp(8px,1.6vh,14px)}
.grafik-etiket{
  flex:none;
  font-size:clamp(26px,4.6vh,42px);
  width:clamp(38px,6.4vh,58px);
  text-align:center;
  border-right:3px solid #DCE7F0;
  padding-right:clamp(6px,1.2vh,10px);
}
.grafik-kutular{display:flex;gap:clamp(3px,0.8vh,7px);flex-wrap:nowrap;min-width:0}
.grafik-birim{
  font-size:min(clamp(22px,4vh,38px), 9vw);
  line-height:1;
  animation:drop .3s backwards;
}

/* ============ KONUM (uzamsal iliskiler) ============
   Kap ve nesne birbirine gore yerlestirilir: ustunde, altinda,
   icinde, saginda, solunda.                                          */

.konum{
  position:relative;
  display:grid;
  place-items:center;
  width:min(300px,76vw);
  height:min(260px,42vh);
}
.konum-kap   {font-size:min(clamp(72px,13vh,120px), 30vw);line-height:1}
.konum-nesne {font-size:min(clamp(46px,8.4vh,78px), 19vw);line-height:1;position:absolute}

.konum.yer-ust  .konum-nesne{top:2%;   left:50%;transform:translateX(-50%)}
.konum.yer-alt  .konum-nesne{bottom:2%;left:50%;transform:translateX(-50%)}
.konum.yer-sag  .konum-nesne{right:2%; top:50%; transform:translateY(-50%)}
.konum.yer-sol  .konum-nesne{left:2%;  top:50%; transform:translateY(-50%)}
/* icinde: kabin tam ortasinda ve biraz kucuk - "ice girmis" hissi */
.konum.yer-ic   .konum-nesne{
  top:50%;left:50%;transform:translate(-50%,-42%) scale(.62);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* ============ SAAT: AKREP one cikar, YELKOVAN geri cekilir ============
   Onceki halde yelkovan KIRMIZIYDI ve tam saatte hep 12'yi gosteriyordu;
   ekrandaki en dikkat cekici sey, cocugu dogrudan yanlis cevaba goturen
   koldu. Tam ve bucuk saat okumada anlam tasiyan kol AKREPTIR.          */

.clock-face .hour{
  width:clamp(11px,1.9vh,15px);
  height:clamp(42px,7.2vh,64px);
  margin-left:calc(clamp(11px,1.9vh,15px) / -2);
  background:#E8563F;                 /* akrep: dikkat ceken renk */
  border-radius:8px 8px 3px 3px;
  box-shadow:0 0 0 2px rgba(255,255,255,.7);
  z-index:2;
}
.clock-face .minute{
  width:clamp(4px,0.7vh,6px);
  height:clamp(60px,10.2vh,92px);
  margin-left:calc(clamp(4px,0.7vh,6px) / -2);
  background:#A8B2BD;                 /* yelkovan: soluk, geri planda */
  border-radius:3px;
  z-index:1;
  opacity:.85;
}
.clock-face .pin{
  width:clamp(13px,2.2vh,18px);
  height:clamp(13px,2.2vh,18px);
  background:#E8563F;
  border:3px solid #fff;
  z-index:3;
}
/* akrebin gosterdigi yon daha okunur olsun diye kadran sayilari koyu */
.clock-face .num{color:#2E3A45;font-weight:bold}

/* ============ ILERLEMEYI SIFIRLAMA: iki asamali, veli kilitli ============
   Onceki halinde onay ekraninda tek dugme vardi ve o dugme siliyordu;
   cocuk icin cikis yolu yoktu.                                          */

.sifirla-katman{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(30,40,50,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.sifirla-katman[hidden]{display:none}
.sifirla-kutu{
  background:#fff;border-radius:24px;padding:24px 22px;max-width:380px;width:100%;
  text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.28);
  animation:pop .25s ease-out;
}
.sifirla-emoji{font-size:52px;line-height:1;margin-bottom:6px}
.sifirla-kutu h2{margin:0 0 8px;font-size:21px;color:#2E3A45}
.sifirla-kutu p{margin:0 0 16px;font-size:15px;color:#6B7A88;line-height:1.4}

.sifirla-dugmeler{display:flex;flex-direction:column;gap:10px;align-items:center}
/* Vazgec ANA dugme: en belirgin secenek guvenli olan olmali */
#btn-sifirla-vazgec{width:100%;padding:16px}
/* Silme ikincil ve kirmizi */
.ghost-btn.tehlike{color:#C0392B;text-decoration:underline;font-size:14.5px}

.kilit-soru{margin:4px 0 12px !important;font-size:15.5px;color:#2E3A45 !important}
.kilit-soru b{font-size:19px}
.kilit-siklar{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.kilit-sik{
  border:2px solid #D8E2EC;background:#F7FAFD;border-radius:14px;
  padding:14px 8px;font-size:22px;font-weight:bold;color:#2E3A45;
  font-family:inherit;cursor:pointer;
}
.kilit-sik:active{transform:translateY(2px)}
.kilit-sik.yanlis{background:#FDEDEA;border-color:#E8563F;color:#C0392B;opacity:.6}

/* ============ ILERLEME KODU ============
   Eski konsollarin sifre sistemi: ilerleme kodun icinde tasiniyor.   */

.kod-katman{
  position:fixed;inset:0;z-index:58;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(30,40,50,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.kod-katman[hidden]{display:none}
.kod-kutu{
  position:relative;background:#fff;border-radius:24px;padding:20px 20px 24px;
  max-width:400px;width:100%;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.28);animation:pop .25s ease-out;
}
.kod-kapat{
  position:absolute;top:10px;right:12px;border:none;background:none;
  font-size:20px;color:#8A9AA8;cursor:pointer;padding:6px 10px;
}

.kod-sekmeler{display:flex;gap:8px;margin:2px 0 16px;justify-content:center}
.kod-sekme{
  border:none;background:#EDF3F9;color:#5D6E7D;border-radius:12px;
  padding:10px 20px;font-size:15px;font-weight:600;font-family:inherit;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:"Courier New",ui-monospace,monospace;
  font-size:clamp(19px,4.4vw,26px);font-weight:bold;letter-spacing:1.5px;
  background:#F4F8FC;border:2px dashed #B9CEE0;border-radius:14px;
  padding:14px 10px;margin-bottom:14px;color:#20536B;
  user-select:all;-webkit-user-select:all;word-break:break-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:"Courier New",ui-monospace,monospace;
  font-size:clamp(17px,4vw,22px);letter-spacing:1.5px;text-align:center;
  padding:14px 10px;border:2px solid #C9DAE8;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}

.home-foot{display:flex;flex-direction:column;gap:2px;align-items:center}

/* ============ SONUC EKRANI DUGMELERI ============
   Dugmeler duruma gore gizleniyor (uc yildizda "tekrar dene" yok,
   son bolumde "sıradaki bölüm" yok). Kart flex kolon oldugu icin
   gizlemenin display:none olmasi sart - yoksa bos satir birakiyor.
   Bu kural acikca yazildi cunku projede daha once ayni tuzaga
   dusulmustu (.feedback[hidden], .kod-katman[hidden]).            */
.result-card button[hidden]{display:none}

/* ============ SIFIRLAMA EKRANINDA ILERLEME KODU ============
   "Geri alinamaz" demek yetmiyordu; geri almanin yolunu da vermek
   gerekiyor. Kod silmeden once burada duruyor.                      */
.sifirla-kod{
  background:rgba(255,255,255,.55);border:1.5px dashed var(--line,#CBD8E4);
  border-radius:14px;padding:12px 10px;margin:4px 0 12px;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.sifirla-kod[hidden]{display:none}
.sifirla-kod-baslik{margin:0;font-size:14px;font-weight:700;color:var(--ink,#2E2A26)}
.sifirla-kod-not{margin:0;font-size:12.5px;color:var(--muted,#6B7A88);line-height:1.35}

/* Yildiz hedefi: sonuc ekraninda "kac dogru gerekiyor" satiri */
.result-hedef{
  margin:0;font-size:14px;font-weight:600;color:var(--muted,#6B7A88);
  line-height:1.4;max-width:290px;
}

/* ============ PARALAR (MAT.1.1.9) ============
   Cocuk parayi once renginden taniyor. Her deger gercek banknotun
   rengini tasiyor; yazi rengi her zemin icin ayri secildi ki
   kontrast WCAG grafik esigi 3.0'in uzerinde kalsin.

   Zemin / yazi / kontrast:
     5 TL   kahverengi / beyaz   -> 4.73x
     10 TL  kirmizi    / beyaz   -> 4.70x
     20 TL  yesil      / beyaz   -> 4.59x
     50 TL  turuncu    / #3B2205 -> 6.48x  (turuncuda beyaz yetmiyor)
     100 TL mavi       / beyaz   -> 4.59x
     200 TL mor        / beyaz   -> 5.29x
   Degerler her notun EN ACIK ucundan olculdu (degrade ustten aciliyor);
   koyu ucta hepsi 5.0x'in uzerinde.                                   */
.banknot.banknot-5   { background:linear-gradient(160deg,#9A6845,#8A5A3B); color:#FFFFFF; }
.banknot.banknot-10  { background:linear-gradient(160deg,#C94743,#B3312E); color:#FFFFFF; }
.banknot.banknot-20  { background:linear-gradient(160deg,#328457,#2E7D4F); color:#FFFFFF; }
.banknot.banknot-50  { background:linear-gradient(160deg,#F4B463,#E89B3C); color:#3B2205; }
.banknot.banknot-100 { background:linear-gradient(160deg,#3B76C4,#2B5FA8); color:#FFFFFF; }
.banknot.banknot-200 { background:linear-gradient(160deg,#8256B8,#6B3F9E); color:#FFFFFF; }

/* 1 TL madeni para: disi sari, ici gumus - gercegi gibi iki renkli.
   Ic gobek box-shadow ile ciziliyor, fazladan element gerekmesin diye. */
.coin.para-1tl{
  background:radial-gradient(circle at 34% 30%, #F2D98A, #D4AF37 62%, #A8832A);
  color:#42340A;
  box-shadow:inset 0 0 0 9px #C2C9D2, inset 0 -3px 0 rgba(0,0,0,.18), var(--shadow);
}

/* ============ KESIR: BUTUN VE YARIM (M.1.1.4.1) ============
   1. sinifta kesir SAYIYLA degil, boyanmis alanla gosterilir.     */
.kesir{display:flex;justify-content:center;align-items:center;width:100%}
.kesir-sekil{
  position:relative;overflow:hidden;
  width:clamp(110px,26vh,180px);height:clamp(110px,26vh,180px);
  border:4px solid #6E7C8C;background:#FFFFFF;
  display:flex;
}
.kesir-sekil.daire{border-radius:50%}
.kesir-sekil.kare{border-radius:14px}
.kesir-parca{flex:1;display:block;background:#FFFFFF}
.kesir-parca.dolu{background:#F5B22D}
/* Bolunmus sekilde ortada ayirma cizgisi olmali; yoksa "yarim"
   oldugu anlasilmiyor, tek renk blok gibi duruyor. */
.kesir-sekil.bolunmus .kesir-parca:first-child{border-right:4px solid #6E7C8C}

/* ============ SIVI OLCME (M.1.3.5.1 / M.1.3.5.2) ============
   Kaplar OZDES cizilir; degisen tek sey su seviyesi. Kazanim
   "uc ozdes kaptaki sivi" diyor - farkli boyda kap karsilastirmak
   1. sinifta istenmiyor.                                          */
.sivi{display:flex;gap:clamp(10px,3vw,22px);justify-content:center;align-items:flex-end;width:100%}
.kap{
  position:relative;width:clamp(52px,13vw,78px);height:clamp(90px,20vh,140px);
  border:4px solid #6E7C8C;border-top:none;
  border-radius:0 0 14px 14px;background:#FFFFFF;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.kap-su{width:100%;background:linear-gradient(180deg,#6FC3F0,#3E9FD6);transition:height .3s}
.kap-etiket{
  position:absolute;top:6px;left:0;right:0;text-align:center;
  font-weight:bold;font-size:17px;color:#2E3540;
}

/* ============ ONLUK VE BIRLIK (M.1.1.1.7) ============
   Demet TEK PARCA cizilir. On tane ayri nesne cizilirse cocuk yine
   birer birer sayar ve kazanim olculmemis olur.                    */
.onluk{display:flex;gap:clamp(10px,3vw,20px);justify-content:center;align-items:flex-end;flex-wrap:wrap;width:100%}
.onluk-demet{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;
  padding:10px 10px 26px;border:4px solid #E8563F;border-radius:14px;background:#FFF3F1;
}
.onluk-yazi{
  position:absolute;bottom:4px;left:0;right:0;text-align:center;
  font-weight:bold;font-size:16px;color:#B8402E;
}
.onluk-birlikler{display:flex;gap:6px;flex-wrap:wrap;max-width:44%}
/* Cubuklar BUYUK olmali: sorunun konusu bu demet. Ilk olculer
   (9-14px genislik) telefonda gorsel kartinin icinde kaybolmustu -
   cocuk neyi sayacagini secemiyordu. */
.onluk-cubuk{
  display:block;width:clamp(15px,4.4vw,26px);height:clamp(40px,9.5vh,64px);
  border-radius:4px;background:linear-gradient(180deg,#8FD6A0,#4FAE68);
  border:2px solid #3C8A52;
}
.onluk-cubuk.tek{background:linear-gradient(180deg,#9EC9F5,#5B9BE0);border-color:#3F7CBF}

/* Degisme ozelligi: cozulmus islem sorunun ustunde, soluk ve kucuk */
.eq-kutu{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.4vh,12px);width:100%}
.eq-oncesi{font-size:clamp(20px,4.4vh,30px);color:var(--muted,#6B7A88);opacity:.85}

/* ============ YAPI: nesnelerin icindeki sekiller (MAT.1.3.4) ============
   Parcalar ust uste diziliyor ve SILUET olarak ciziliyor - evin
   resmi degil, evin sekilleri. Soru hangi parcayi soruyorsa o parca
   koyu mavi, digerleri soluk gri-mavi. Renk sekli SOYLEMIYOR,
   yalnizca "bundan bahsediyorum" diyor.

   Ucgenler clip-path ile ciziliyor, border hilesiyle degil: border
   hilesinde elemanin genisligi 0 oluyor, vurgu rengi tutmuyordu.   */
.yapi{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;width:100%;
}
.yapi-parca{ background:#B9C8D6; }
.yapi-parca.vurgu{ background:#3C7BE0; }

.yapi-parca.sekil-kare       { width:74px;height:74px;border-radius:6px; }
.yapi-parca.sekil-dikdortgen { width:96px;height:52px;border-radius:6px; }
.yapi-parca.sekil-dikdortgen.dar { width:26px;height:58px; }
.yapi-parca.sekil-daire      { width:74px;height:74px;border-radius:50%; }
.yapi-parca.sekil-ucgen      { width:96px;height:66px;clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.yapi-parca.sekil-ucgen.dar  { width:64px;height:66px; }
.yapi-parca.sekil-ucgen-ters { width:80px;height:70px;clip-path:polygon(0 0, 100% 0, 50% 100%); }

/* ============ YOL: mesafe ve yon (MAT.1.3.1) ============
   Kutular bir sirada; baslangic kutusu mavi cerceveli ve altinda
   "basla" yaziyor. Cocuk parmagini oraya koyup adim adim sayiyor.
   Alt bosluk etiketin sigmasi icin.                                */
.yol{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;
  width:100%;margin-bottom:22px;
}
.yol-kutu{
  position:relative;width:62px;height:62px;border-radius:14px;
  background:#F6F0E2;border:2px solid #CBD8E4;
  display:grid;place-items:center;
}
.yol-kutu.baslangic{ border-color:#3C7BE0;border-width:3px;background:#E3EEFF; }
.yol-nesne{ font-size:30px;line-height:1; }
.yol-etiket{
  position:absolute;bottom:-20px;left:0;right:0;text-align:center;
  font-size:11.5px;font-weight:700;color:#2F6BD4;letter-spacing:.2px;
}

/* Genis/uzun ekranda buyut */
@media (min-height:700px){
  .yapi-parca.sekil-kare       { width:clamp(74px,12vh,104px);height:clamp(74px,12vh,104px); }
  .yapi-parca.sekil-daire      { width:clamp(74px,12vh,104px);height:clamp(74px,12vh,104px); }
  .yapi-parca.sekil-dikdortgen { width:clamp(96px,15vh,132px);height:clamp(52px,8vh,72px); }
  .yapi-parca.sekil-dikdortgen.dar { width:clamp(26px,4.2vh,36px);height:clamp(58px,9vh,80px); }
  .yapi-parca.sekil-ucgen      { width:clamp(96px,15vh,132px);height:clamp(66px,10.5vh,92px); }
  .yapi-parca.sekil-ucgen.dar  { width:clamp(64px,10vh,88px); }
  .yapi-parca.sekil-ucgen-ters { width:clamp(80px,13vh,112px);height:clamp(70px,11vh,96px); }
  .yol-kutu{ width:clamp(62px,10vh,88px);height:clamp(62px,10vh,88px); }
  .yol-nesne{ font-size:clamp(30px,5vh,42px); }
}

/* ============================================================
   FEN BILIMLERI GORSELLERI
   js/render.js icindeki drawKartlar, drawSahne, drawKutular,
   drawAdimlar, drawDevre, drawKatman ile birlikte calisir.

   Sinif adlari hb- onekiyle duruyor: cizim kodu Hayat Bilgisi 3'ten
   devralindi ve onek yalnizca ad. Toplu yeniden adlandirma
   YAPILMADI - Matematik sekmesinde kor yeniden adlandirmanin bir
   testin anlamini tersine cevirdigi ornegi var. Yeni Fen tipleri
   fen- onekiyle yaziliyor.
   ============================================================ */

@keyframes hb-gir {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* --- kartlar --- */
/* Kartlar + altinda tek satirlik cumle. Sarmalayici sonradan geldi:
   kartlar dogrudan gorsel alanina konuyordu, altyazi eklenince
   yan yana dusuyordu. */
.hb-kartlar-alan { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.hb-kartlar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hb-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 76px;
  padding: 10px 8px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid #E3EDF7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  animation: hb-gir .32s ease both;
}
.hb-kart.isaretli {
  border-color: #FFB703;
  box-shadow: 0 0 0 3px rgba(255, 183, 3, .28);
}
.hb-kart-emoji { font-size: 38px; line-height: 1; }
.hb-kart-ad {
  font-size: 14px;
  font-weight: 700;
  color: #35495E;
  text-align: center;
}

/* --- sahne --- */
.hb-sahne { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hb-sahne-resim {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.hb-sahne-oge { font-size: 54px; line-height: 1.1; animation: hb-gir .32s ease both; }
.hb-sahne-altyazi {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #35495E;
  text-align: center;
}

/* --- atik kutulari (FB.3.4.3) --- */
.hb-kutular { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hb-atik {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}
.hb-atik-emoji { font-size: 38px; line-height: 1; }
.hb-atik-ok { font-size: 20px; color: #6B7A88; line-height: 1; }
.hb-kutu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 84px;
  padding: 12px 6px;
  border-radius: 10px 10px 4px 4px;
  color: #fff;
  animation: hb-gir .32s ease both;
}
.hb-kutu.mavi  { background: #1F6FB2; }
.hb-kutu.yesil { background: #2E8B57; }
.hb-kutu.sari  { background: #D9A317; }
.hb-kutu.gri   { background: #6B7A88; }
.hb-kutu.isaretli { box-shadow: 0 0 0 3px #FFB703; }
.hb-kutu-emoji { font-size: 30px; line-height: 1; }
.hb-kutu-etiket { font-size: 13px; font-weight: 700; text-align: center; }

/* --- sirali adimlar --- */
.hb-adimlar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hb-adim {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 92px;
  padding: 14px 6px 10px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid #E3EDF7;
  animation: hb-gir .32s ease both;
}
.hb-adim.gizli { border-style: dashed; border-color: #FFB703; background: #FFFBF0; }
.hb-adim-no {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #4F8EF7;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.hb-adim.gizli .hb-adim-no { background: #FFB703; }
.hb-adim-emoji { font-size: 32px; line-height: 1; }
.hb-adim-yazi { font-size: 12.5px; font-weight: 700; color: #35495E; text-align: center; }

/* Kucuk telefonlarda kutu ve adim tasmasin. */
@media (max-width: 380px) {
  .hb-kutu { width: 74px; }
  .hb-adim { width: 84px; }
  .fen-devre-hat { gap: 8px; }
  .fen-devre-parca { width: 68px; }
}


/* ---------- Arkadas isimleri ayari ---------- */
/* Tek sutun: iki sutun denendi, 400px altinda ad kutulari daraliyor ve
   uzun adlar kesiliyordu. */
.isim-alanlari { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.isim-satir { display: flex; align-items: center; gap: 10px; }
.isim-satir .isim-emoji { font-size: 26px; width: 34px; text-align: center; flex: none; }
.isim-satir input {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 17px;
  border: 2px solid #D9E6F2; border-radius: 12px; background: #fff; color: #2E2A26;
}
.isim-satir input:focus { outline: none; border-color: #4F8EF7; }


/* ---------- iOS "Ana Ekrana Ekle" seridi ---------- */
/* Ekranin altinda ince bir serit; oyunu ortmuyor, kapatilabiliyor.
   Yalniz iOS Safari'de ve yalniz ana ekrana eklenmemisken gorunur. */
/* [hidden] GUVENCESI - display veren her sinifa gerekli.
   Tarayicinin [hidden]{display:none} kurali ayni oncelikte ve bizim
   kuralimiz sonra geldigi icin onu ezerdi; serit APK'da gorundu.
   testler/gizli-oge-testi.mjs bunu koruyor. */
.ios-serit[hidden] { display: none; }
.ios-serit {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: #2B2B2B; color: #fff;
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.ios-serit .ios-metin { flex: 1; }
.ios-serit b { font-weight: 700; }
.ios-kapat {
  flex: 0 0 28px; height: 28px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 15px; cursor: pointer;
}


/* ============ VELI PANELI ============================================
   Katman ve kutu sifirlama ekraniyla AYNI siniflari kullaniyor
   (.sifirla-katman / .sifirla-kutu) - o siniflarin [hidden] guvencesi
   zaten var, yeni bir gizlenme tuzagi acilmiyor.

   #veli-kilit ve #veli-icerik'e display veren bir kural BILEREK
   yazilmadi: ikisi de `hidden` ile acilip kapaniyor ve bir sinifa
   display verildigi anda hidden ezilir (bkz. testler/gizli-oge-testi).
   ==================================================================== */
.veli-kutu{max-width:440px;text-align:left}
.veli-kutu h2,.veli-kutu .sifirla-emoji{text-align:center}

.veli-pin-giris{
  width:150px;display:block;margin:0 auto 10px;
  border:2px solid #D8E2EC;background:#F7FAFD;border-radius:14px;
  padding:12px 10px;font:inherit;font-size:26px;letter-spacing:10px;
  text-align:center;color:#2E3A45;
}
.veli-pin-giris:focus{outline:none;border-color:var(--gold)}
.veli-pin-not{margin:0 0 4px !important;font-size:13.5px;text-align:center}
.veli-pin-not.hata{color:#C0392B}

/* Ozet iki satir olabiliyor; satir sonlari korunuyor. */
.veli-ozet{
  white-space:pre-line;margin:0 0 14px !important;
  font-size:15px;color:#2E3A45 !important;text-align:center;
}

.veli-liste{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}

.veli-alt-baslik{
  margin:16px 0 6px !important;font-size:13px;font-weight:bold;
  color:#8A8175 !important;text-transform:uppercase;letter-spacing:.6px;
}

.veli-satir{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 10px;border-radius:12px;
}
.veli-satir + .veli-satir{border-top:1px solid #EFE7D9}
.veli-ad{flex:1;font-size:14.5px;color:#2E3A45}
.veli-deger{font-size:13px;color:#8A8175;white-space:nowrap}

/* "Zorlaniyor" damgasi KIRMIZI DEGIL: bu bir karne degil, nereye
   birlikte bakilacagini soyleyen bir isaret. */
.veli-satir.zorlandi{background:#FFF3E0}
.veli-satir.zorlandi .veli-ad{font-weight:bold}

/* --- son 7 gun seridi --- */
.veli-gun-serit{display:flex;gap:6px;align-items:flex-end;margin:2px 0 4px}
.veli-gun{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.veli-gun-cubuk{
  width:100%;height:54px;display:flex;align-items:flex-end;
  background:#F4EEE3;border-radius:8px;overflow:hidden;
}
.veli-gun-dolu{width:100%;background:var(--gold);border-radius:8px;min-height:3px}
.veli-gun-dolu.bos{background:#E3DACB}
.veli-gun-ad{font-size:11px;color:#8A8175}
.veli-gun-dk{font-size:10.5px;color:#8A8175}

.veli-not{
  margin:14px 0 4px !important;font-size:12.5px;line-height:1.35;
  color:#8A8175 !important;text-align:center;
}


/* ============================================================
   FEN'E OZEL GORSELLER  -  devre ve toprak katmanlari
   ============================================================ */

/* ---------- Basit elektrik devresi (FB.3.6.1) ---------- */
/*
 * Uc parca yan yana ve aralarinda TEL var: tel iki parcayi
 * birlestiren yatay cizgi olarak ::before ile ciziliyor.
 * Anahtar acikken tel KESIK gorunuyor - "devre kapali degilse akim
 * gecmez" bilgisi resmin kendisinde olsun diye.
 */
.fen-devre { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fen-devre-hat {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 16px;
  border: 3px solid #6B7A88;
  border-radius: 16px;
  background: #F7FBFF;
}
.fen-devre.acik .fen-devre-hat { border-style: dashed; }
.fen-devre-parca {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 78px;
}
.fen-devre-emoji { font-size: 36px; line-height: 1; }
.fen-devre-etiket { font-size: 13px; font-weight: 700; color: #35495E; }

/* Anahtar: kucuk bir kol. Kapaliyken yatay (devre tam), acikken
   yukari kalkik (devre kesik). Emoji kullanilmadi: anahtar emojisi
   her cihazda baska turlu ve hicbirinde "acik/kapali" okunmuyor. */
.fen-devre-kol {
  display: block; width: 34px; height: 5px;
  background: #35495E; border-radius: 3px;
  transform-origin: left center;
  transition: transform .2s ease;
}
.fen-devre.acik .fen-devre-kol { transform: rotate(-32deg); }

.fen-devre-parca.ampul.yaniyor .fen-devre-emoji {
  filter: drop-shadow(0 0 10px #FFD54A);
}
/* Sonuk ampul: AYNI emoji, rengi alinmis ve solgun. Ayri bir emoji
   kullanmak (yeni ay) ekranda mor bir kure uretiyordu - cocugun
   gormesi gereken sey ayni ampulun sonmus hali. */
.fen-devre-parca.ampul.sonuk .fen-devre-emoji {
  filter: grayscale(1) brightness(.8);
  opacity: .5;
}

/* ---------- Toprak katmanlari (FB.3.7.1) ---------- */
/*
 * Seritler ust uste; en ustteki listede ilk. Renkler gercege yakin
 * secildi: ustte koyu humuslu toprak, altta acik kum-kil, en altta
 * gri ana kaya. Uydurma renk yok - cocuk kesitten katmani taniyor.
 */
.fen-katman { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 230px; margin: 0 auto; }
.fen-katman-serit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 6px 10px;
  color: #fff; font-weight: 700; font-size: 14px;
  animation: hb-gir .3s ease both;
}
.fen-katman-serit:first-child { border-radius: 12px 12px 0 0; }
.fen-katman-serit:last-child  { border-radius: 0 0 12px 12px; }
.fen-katman-serit.ust  { background: #4A3524; }
.fen-katman-serit.orta { background: #8B6239; }
.fen-katman-serit.alt  { background: #C0A070; color: #3A2E20; }
.fen-katman-serit.kaya { background: #7E8A93; }
.fen-katman-serit.isaretli { box-shadow: inset 0 0 0 3px #FFB703; }
.fen-katman-emoji { font-size: 22px; line-height: 1; }
.fen-katman-ad { text-align: center; }

/* ===== 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}

/* ORTAK UYARI SERIDI  -  kilitli bolume dokununca sebebini soyler.
   18 Ekim 2026'da kabuktaki 17 derste kapanan sessiz kilidin 5-8
   kopyasi (14.11.2026). Kabuktaki kalibin aynisi.
   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)}