/* Matematik oyunları (embed/matematik) — 2026-10-12. Ölçüler #sahne'nin --sh (yükseklik) / --sw (genişlik) değişkenlerinden türer (js boyutla()) */
:root{ --ust-h:max(7vh,46px); --mavi:#4fc3f7; --turuncu:#ff8a65; --sari:#ffd54f; --yesil:#3ddc84; --kirmizi:#ff5a5a; --pano:#14123a; }
body.dik{ --ust-h:max(11vw,46px); }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; overflow:hidden; }
body{
	background:#0a081e url("../img/bg.png") center/cover no-repeat;
	background-blend-mode:normal;
	color:#fff; font-family:'Nunito',Tahoma,Arial,sans-serif;
	user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
}
body::before{ content:""; position:fixed; inset:0; background:radial-gradient(ellipse at 50% 40%, rgba(38,34,104,.55), rgba(10,8,30,.2) 70%); pointer-events:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus{ outline:none; }
button:focus-visible{ outline:3px solid var(--sari); outline-offset:2px; }
#oyun{ position:fixed; inset:0; display:flex; flex-direction:column; }

/* ---------- Üst bant ---------- */
#ust{ flex:none; display:flex; align-items:center; gap:max(.8vh,5px); padding:max(.8vh,5px) max(1.6vw,8px) 0; height:calc(var(--ust-h) + max(.8vh,5px)); }
.ust-satir{ display:contents; }
body.dik #ust{ flex-direction:column; align-items:stretch; height:auto; gap:4px; padding:5px 2.5vw 0; }
body.dik .ust-satir{ display:flex; gap:4px; height:calc(var(--ust-h) - 4px); }
.ust-dugme{ flex:none; height:100%; aspect-ratio:1/1; max-height:var(--ust-h); border:0; border-radius:12px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; padding:0; min-width:44px; min-height:44px; }
body.yatay .ust-dugme{ height:var(--ust-h); width:var(--ust-h); }
body.dik .ust-dugme{ height:100%; width:auto; }
.ust-dugme:hover{ background:rgba(255,255,255,.18); }
.ust-dugme svg{ width:58%; height:58%; }
.ust-dugme.altin{ color:var(--sari); }
#ses .carpi{ display:none; }
#ses.kapali .dalga{ display:none; }
#ses.kapali .carpi{ display:inline; }
#ses.kapali{ color:#9a98c4; }
.kutu{ flex:1 1 0; min-width:0; height:var(--ust-h); border-radius:12px; background:rgba(255,255,255,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; white-space:nowrap; overflow:hidden; }
body.dik .kutu{ height:100%; }
.kutu small{ font-size:calc(var(--ust-h)*.22); color:#bdbbea; font-weight:600; }
.kutu b{ font-size:calc(var(--ust-h)*.4); font-weight:800; }
body.dik #soru-kutu{ flex:1 1 0; }
#dy-kutu{ flex-direction:row; gap:.35em; }
#dy-kutu b{ font-size:calc(var(--ust-h)*.36); }
#dy-kutu b::before{ font-size:.75em; margin-right:.15em; }
#dogru-sayi::before{ content:"✓"; }
#yanlis-sayi::before{ content:"✗"; }
.yesil{ color:var(--yesil); }
.kirmizi{ color:var(--kirmizi); }
#seri-kutu.aktif b{ color:var(--sari); }
#eniyi{ color:var(--sari); }
.bump{ animation:bump .35s ease; }
@keyframes bump{ 40%{ transform:scale(1.18); } }

/* ---------- Süre çubuğu ---------- */
#sure{ flex:none; height:max(1.2vh,7px); margin:max(1vh,6px) max(1.6vw,8px) 0; border-radius:99px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12); overflow:hidden; }
#sure-dolu{ display:block; height:100%; width:100%; transform-origin:left center; background:linear-gradient(90deg,#00ce8a,#7dffb0); border-radius:99px; }
#sure.uyari #sure-dolu{ background:linear-gradient(90deg,#ce2300,#ff6a3d); }

/* ---------- Sahne ---------- */
#sahne{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 3vw; position:relative; }
#islem-ad{ height:calc(var(--sh)*.08); font-size:min(calc(var(--sh)*.055),30px); font-weight:800; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:flex-end; }
.islem-t{ color:var(--mavi); } .islem-c{ color:var(--turuncu); } .islem-x, .islem-m{ color:var(--sari); } .islem-b{ color:var(--yesil); }
#soru{ width:100%; height:calc(var(--sh)*.34); display:flex; align-items:center; justify-content:center; overflow:hidden; }
body.dik #soru{ height:calc(var(--sh)*.26); }
body.yaz-kip.yatay #soru{ height:calc(var(--sh)*.3); }
body.yaz-kip.dik #soru{ height:calc(var(--sh)*.22); }
#soru-yazi{ font-family:'Cabin Sketch',cursive; font-weight:700; white-space:nowrap; line-height:1; text-shadow:0 0 18px rgba(255,255,255,.18); }
#soru-yazi em{ font-style:normal; }
#soru-yazi em.dogru{ color:var(--yesil); }
#soru-yazi em.yanlis{ color:var(--kirmizi); }
#soru-yazi.giris{ animation:giris .32s ease-out; }
@keyframes giris{ from{ opacity:0; transform:translateY(12%) scale(.94); } }
#bildirim{ height:calc(var(--sh)*.12); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:min(calc(var(--sh)*.05),26px); line-height:1.2; text-align:center; }
#bildirim b{ font-weight:800; font-size:1.1em; }
#bildirim small{ font-size:.75em; color:#d6d4ff; font-weight:600; }
#bildirim .seri-kutla{ color:var(--sari); }

/* şıklar */
#siklar{ display:flex; justify-content:center; gap:calc(var(--sw)*.025); height:calc(var(--sh)*.26); width:100%; }
.sik{ position:relative; width:min(calc(var(--sw)*.215), calc(var(--sh)*.42)); height:100%; border-radius:min(2vw,18px); border:max(.5vmin,3px) solid #fff; font-family:'Cabin Sketch',cursive; font-weight:700; font-size:calc(var(--sh)*.14); display:flex; align-items:center; justify-content:center; padding:0; transition:transform .12s, background-color .15s, opacity .15s; }
.sik.uzun{ font-size:calc(var(--sh)*.11); }
.sik small{ position:absolute; top:.3em; left:.45em; font-family:'Nunito',sans-serif; font-size:max(11px,calc(var(--sh)*.03)); font-weight:800; opacity:.55; }
body.dik .sik small{ display:none; }
#s0{ background:#004540; } #s1{ background:#451800; } #s2{ background:#001245; } #s3{ background:#453e00; }
.sik:not(:disabled):hover{ transform:translateY(-3px); }
.sik:not(:disabled):active{ transform:scale(.96); }
.sik:disabled{ cursor:default; }
.sik.dogru{ background:#0a8f4f !important; border-color:#7dffb0; }
.sik.yanlis{ background:#9b1b1b !important; border-color:#ff9a9a; }
.sik.soluk{ opacity:.4; }
.sik.parla{ animation:parla .5s ease; }
.sik.salla{ animation:salla .4s ease; }
@keyframes parla{ 40%{ transform:scale(1.08); box-shadow:0 0 30px rgba(61,220,132,.8); } }
@keyframes salla{ 20%{ transform:translateX(-6%); } 40%{ transform:translateX(5%); } 60%{ transform:translateX(-3%); } 80%{ transform:translateX(2%); } }
body.dik #siklar{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; height:calc(var(--sh)*.4); width:min(calc(var(--sw)*.94), calc(var(--sh)*.75)); gap:calc(var(--sw)*.03); }
body.dik .sik{ width:100%; font-size:min(calc(var(--sh)*.085), calc(var(--sw)*.12)); }
body.dik .sik.uzun{ font-size:min(calc(var(--sh)*.07), calc(var(--sw)*.095)); }

/* yazarak cevap */
#yaz{ display:none; flex-direction:column; align-items:center; gap:calc(var(--sh)*.02); width:100%; }
body.yaz-kip #yaz{ display:flex; }
body.yaz-kip #siklar{ display:none; }
#yaz-kutu{ height:calc(var(--sh)*.16); width:min(calc(var(--sw)*.5), calc(var(--sh)*.9)); border-radius:14px; border:3px solid rgba(255,255,255,.7); background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; font-family:'Cabin Sketch',cursive; font-weight:700; }
#yaz-kutu i{ display:block; width:3px; height:55%; background:#fff; margin-left:4px; animation:imlec 1s steps(1) infinite; }
#yaz-kutu.dogru{ border-color:var(--yesil); color:var(--yesil); }
#yaz-kutu.yanlis{ border-color:var(--kirmizi); color:var(--kirmizi); }
#yaz-kutu.dogru i, #yaz-kutu.yanlis i{ display:none; }
@keyframes imlec{ 50%{ opacity:0; } }
#tuslar{ display:grid; grid-template-columns:repeat(12,1fr); gap:max(.8vh,4px); height:calc(var(--sh)*.17); width:min(calc(var(--sw)*.96), calc(var(--sh)*2.6)); }
.tus{ border:2px solid rgba(255,255,255,.55); border-radius:10px; background:rgba(255,255,255,.08); font-family:'Cabin Sketch',cursive; font-weight:700; font-size:min(calc(var(--sh)*.09), calc(var(--sw)*.04)); padding:0; min-height:40px; }
.tus:active{ background:rgba(255,255,255,.25); transform:scale(.95); }
.tus[data-t="0"]{ order:1; } .tus-sil{ order:2; font-family:'Nunito',sans-serif; } .tus-tamam{ order:3; background:#0a6f40; border-color:#7dffb0; font-family:'Nunito',sans-serif; }
body.dik #yaz-kutu{ height:calc(var(--sh)*.11); width:min(calc(var(--sw)*.7), 420px); }
body.dik #tuslar{ grid-template-columns:repeat(3,1fr); height:calc(var(--sh)*.44); width:min(calc(var(--sw)*.86), calc(var(--sh)*.5)); gap:max(1.2vw,6px); }
body.dik .tus{ order:0; font-size:min(calc(var(--sh)*.055), calc(var(--sw)*.09)); }

/* menü ve geri sayım: soru alanı gizli (yer kaplamaya devam eder, yerleşim kaymaz) */
body.bos-sahne #islem-ad, body.bos-sahne #soru, body.bos-sahne #bildirim, body.bos-sahne #siklar, body.bos-sahne #yaz{ visibility:hidden; }

/* ilerleme noktaları */
#noktalar{ flex:none; display:flex; gap:max(.4vw,3px); height:max(1.1vh,7px); margin:0 max(3vw,10px) max(1.6vh,10px); }
#noktalar i{ flex:1; border-radius:99px; background:rgba(255,255,255,.14); }
#noktalar i.d{ background:var(--yesil); }
#noktalar i.y{ background:var(--kirmizi); }
#noktalar i.simdi{ background:#fff; animation:nabiz 1s ease-in-out infinite; }
@keyframes nabiz{ 50%{ opacity:.45; } }

/* uçan puan */
#ucanlar{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:40; }
.ucan{ position:absolute; left:50%; top:42%; transform:translate(-50%,0); font-weight:800; color:var(--yesil); font-size:max(18px,5vmin); text-shadow:0 2px 8px rgba(0,0,0,.6); animation:uc 1.05s ease-out forwards; }
@keyframes uc{ to{ transform:translate(-50%,-160%); opacity:0; } }

/* ---------- Katmanlar (menü, geri sayım, onay, sonuç) ---------- */
.katman{ position:absolute; inset:0; z-index:50; display:none; align-items:center; justify-content:center; background:rgba(6,5,24,.78); padding:max(1.5vh,8px) 3vw; }
.panel{ background:linear-gradient(#24205a,#191646); border:2px solid rgba(255,255,255,.16); border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.5); text-align:center; color:#fff; font-size:clamp(11px, min(3.1vh, 3.6vw), 21px); padding:1.1em 1.4em; max-width:min(94vw, 46em); width:100%; max-height:100%; overflow:hidden; animation:panel .25s ease-out; }
body.dik .panel{ font-size:clamp(12px, min(4.2vw, 2.6vh), 21px); }
@keyframes panel{ from{ opacity:0; transform:scale(.95); } }
.panel h1{ margin:0; font-size:2.2em; font-weight:800; line-height:1.05; letter-spacing:.02em; }
.panel p{ margin:.3em 0; }
#menu-alt{ color:#c9c7f2; }
#menu-not{ color:#bdbbea; font-size:.85em; min-height:1.2em; margin:.5em 0 .2em; }
.secim-satir{ display:flex; align-items:center; justify-content:center; gap:.6em; margin-top:.55em; }
.secim-ad{ width:3.6em; text-align:right; color:#bdbbea; font-weight:700; font-size:.9em; flex:none; }
.secim{ display:flex; flex-wrap:wrap; gap:.35em; justify-content:center; }
.secim button{ min-height:max(2.6em,40px); min-width:5.2em; border-radius:99px; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); font-weight:800; font-size:1em; padding:0 1em; }
.secim button em{ font-style:normal; color:var(--sari); font-size:.8em; }
.secim button.secili{ background:var(--sari); color:#1b1640; border-color:var(--sari); }
.secim button.secili em{ color:#5a3d00; }
.secim-sik{ gap:.25em; }
.secim-sik button{ min-width:max(2.3em,30px); padding:0 .35em; min-height:max(2.4em,40px); }
.secim-sik button[data-t="0"]{ padding:0 .9em; }
.dugmeler{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5em; margin-top:.7em; }
.dugme{ min-height:max(2.8em,42px); border-radius:12px; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); font-weight:800; font-size:1em; padding:0 1.2em; }
.dugme:hover{ background:rgba(255,255,255,.16); }
.dugme.ana{ background:#0a8f4f; border-color:#7dffb0; }
.dugme.ana:hover{ background:#0ba35a; }
.dugme.altin{ color:var(--sari); border-color:rgba(255,213,79,.5); }
#geri-sayim{ background:rgba(6,5,24,.45); }
#geri-sayi{ font-family:'Cabin Sketch',cursive; font-size:min(40vh,40vw); line-height:1; text-shadow:0 0 30px rgba(255,255,255,.35); }
.onay-panel{ max-width:min(94vw, 30em); }
.onay-panel p{ font-size:1.1em; font-weight:700; }

/* sonuç */
.sonuc-panel h2{ margin:0; font-size:1.1em; color:#c9c7f2; font-weight:700; }
#sonuc-puan{ font-family:'Cabin Sketch',cursive; font-size:3.2em; line-height:1.05; color:var(--sari); }
#sonuc-rekor{ display:none; font-weight:800; color:var(--sari); letter-spacing:.08em; animation:rekor 1s ease-in-out infinite; }
@keyframes rekor{ 50%{ opacity:.55; transform:scale(1.06); } }
#sonuc-istat{ display:flex; justify-content:center; gap:.4em; margin:.45em 0 .2em; flex-wrap:wrap; }
#sonuc-istat span{ flex:1 1 0; min-width:5em; max-width:8em; background:rgba(255,255,255,.07); border-radius:10px; padding:.25em .3em; font-size:.8em; color:#c9c7f2; display:flex; flex-direction:column; }
#sonuc-istat b{ font-size:1.5em; color:#fff; }
#sonuc-istat b.yesil{ color:var(--yesil); } #sonuc-istat b.kirmizi{ color:var(--kirmizi); }
#sonuc-islem{ display:flex; justify-content:center; gap:.9em; flex-wrap:wrap; font-size:.9em; font-weight:700; margin:.2em 0; }
#sonuc-islem b{ color:#fff; }
#sonuc-hata{ font-size:.85em; margin:.25em 0; line-height:1.6; }
#sonuc-hata i{ font-style:normal; display:inline-block; background:rgba(255,90,90,.15); border:1px solid rgba(255,90,90,.35); border-radius:8px; padding:0 .45em; margin:.1em .1em; white-space:nowrap; }
#sonuc-hata small{ color:#bdbbea; }
#sonuc-not{ font-size:.8em; color:#bdbbea; }
#sonuc-not:empty{ display:none; }
#sonuc-form{ display:none; justify-content:center; align-items:center; gap:.4em; margin-top:.5em; flex-wrap:wrap; }
#isim{ height:max(2.8em,42px); width:11em; max-width:60vw; border-radius:12px; border:2px solid rgba(255,255,255,.4); background:rgba(0,0,0,.3); color:#fff; font:inherit; font-weight:700; padding:0 .8em; user-select:text; -webkit-user-select:text; }
#isim:focus{ outline:none; border-color:var(--sari); }
#rekor-durum{ font-size:.85em; color:var(--sari); min-height:1.1em; margin-top:.25em; }
#rekor-durum:empty{ min-height:0; margin:0; }
#sonuc-dugmeler{ margin-top:.5em; }

/* rekor tablosu (ortak servis HTML'i) */
#rekor-kap{ position:absolute; inset:0; z-index:60; display:none; background:#f5f5f5; }
#rekor-yukleniyor{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#333; font-size:18px; gap:.4em; }

@media (prefers-reduced-motion: reduce){
	*{ animation:none !important; transition:none !important; }
}