*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{height:100%;overflow:hidden;font-family:'Comic Sans MS','Chalkboard SE','Segoe UI',system-ui,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);color:#2f3542;overscroll-behavior:none}
[hidden]{display:none!important}
.ekran{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(env(safe-area-inset-top) + 64px) max(14px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(14px,env(safe-area-inset-left))}
.ekran.aktif{display:flex;animation:gir .3s}
@keyframes gir{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.kaydir{width:100%;max-width:980px;max-height:100%;overflow-y:auto;overflow-x:hidden;padding:6px 4px;-webkit-overflow-scrolling:touch}
h1{color:#fff;font-size:clamp(26px,5.5vw,52px);text-shadow:3px 3px 0 rgba(0,0,0,.2);margin-bottom:8px}
h2{color:#fff;font-size:clamp(22px,4.5vw,40px);margin-bottom:6px;text-shadow:2px 2px 0 rgba(0,0,0,.2)}
.not{color:rgba(255,255,255,.85);font-size:clamp(13px,2.4vw,18px);margin:8px}
.metin{color:#fff;font-size:clamp(16px,3vw,24px);margin:8px 0 14px}
.ortala{text-align:center}
.baslik-emoji{font-size:clamp(44px,10vw,90px);animation:sallan 2s ease-in-out infinite}
@keyframes sallan{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

.buton{background:linear-gradient(180deg,#ffb347,#ff8c42);border:none;border-radius:30px;padding:clamp(12px,2.2vh,18px) clamp(26px,5vw,45px);font-size:clamp(18px,3.6vw,28px);font-family:inherit;font-weight:bold;color:#fff;cursor:pointer;box-shadow:0 6px 0 #d35400,0 10px 20px rgba(0,0,0,.3);margin:8px;transition:transform .1s,filter .2s}
.buton:active{transform:translateY(5px);box-shadow:0 1px 0 #d35400}
.buton.yesil{background:linear-gradient(180deg,#7bed9f,#2ed573);box-shadow:0 6px 0 #1e9e52,0 10px 20px rgba(0,0,0,.3)}
.buton.mavi{background:linear-gradient(180deg,#70a1ff,#1e90ff);box-shadow:0 6px 0 #1366b3,0 10px 20px rgba(0,0,0,.3)}
.buton.kucuk{font-size:clamp(14px,2.6vw,20px);padding:10px 24px;background:rgba(255,255,255,.25);box-shadow:none}
.buton:disabled{filter:grayscale(.8) brightness(.9);opacity:.7;cursor:wait}

/* üst bar */
#ust-bar{position:fixed;top:0;left:0;right:0;display:flex;gap:8px;align-items:center;z-index:100;padding:calc(env(safe-area-inset-top) + 8px) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
.ust-buton{background:rgba(255,255,255,.25);border:none;border-radius:50%;width:48px;height:48px;font-size:24px;cursor:pointer;color:#fff;flex:none}
#ust-bilgi{flex:1;display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:bold;background:rgba(0,0,0,.25);border-radius:25px;padding:10px 20px;font-size:clamp(14px,2.8vw,20px);min-width:0}
#ust-baslik{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px}

/* menü */
#giris-kutu{margin:10px 0}
input[type=text]{font-family:inherit;font-size:clamp(18px,4vw,26px);padding:12px 22px;border-radius:25px;border:4px solid #fff;text-align:center;outline:none;width:min(85%,350px);margin:8px;user-select:text;-webkit-user-select:text}
#ders-kartlari{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin-top:10px;padding:8px 2px 20px}
.ders-kart{position:relative;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.28);cursor:pointer;text-align:left;transition:transform .15s}
.ders-kart:hover{transform:translateY(-4px)}
.ders-kart img{width:100%;display:block;aspect-ratio:400/260;object-fit:cover}
.ders-kart .alt{padding:10px 14px 14px}
.ders-kart b{font-size:clamp(17px,2.6vw,22px);color:#5f27cd;display:block}
.ders-kart small{color:#57606f;font-size:clamp(12px,2vw,15px)}
.cubuk{height:10px;border-radius:6px;background:#e5e8ee;margin-top:8px;overflow:hidden}.cubuk i{display:block;height:100%;background:linear-gradient(90deg,#7bed9f,#2ed573)}
.ders-kart.kilitli{filter:grayscale(1);opacity:.75;cursor:not-allowed}
.rozet{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;border-radius:20px;padding:5px 12px;font-size:16px}
.bilgi-btn{position:absolute;top:10px;left:10px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.85);font-size:20px;cursor:pointer}

/* aşama listesi */
#asama-listesi{display:flex;flex-direction:column;gap:12px;margin:12px auto;max-width:620px}
.asama-kart{display:flex;align-items:center;gap:14px;background:#fff;border-radius:24px;padding:14px 18px;text-align:left;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);border:5px solid transparent}
.asama-kart .em{font-size:clamp(30px,6vw,46px)}.asama-kart b{display:block;color:#5f27cd;font-size:clamp(17px,3vw,24px)}
.asama-kart small{color:#57606f;font-size:clamp(12px,2.2vw,16px)}
.asama-kart.kilitli{filter:grayscale(1);opacity:.7;cursor:not-allowed}
.asama-kart.tamam{border-color:#2ed573}
.noktalar{margin-left:auto;font-size:clamp(18px,3vw,26px);letter-spacing:3px;white-space:nowrap}

/* tanıtım */
#tanitim-kartlar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:8px 0 14px}
.tk{background:#fff;border-radius:22px;padding:8px 16px;min-width:clamp(80px,16vw,130px);box-shadow:0 6px 14px rgba(0,0,0,.25);border:5px solid transparent;transition:transform .2s;cursor:pointer}
.tk.okunuyor{border-color:#ffb347;transform:scale(1.12)}
.tk .ar{font-size:clamp(40px,9vw,76px);line-height:1.3}.tk small{display:block;color:#5f27cd;font-weight:bold;font-size:clamp(13px,2.4vw,18px)}

/* arapça yazı */
.ar{font-family:'Traditional Arabic','Amiri','Scheherazade New','Noto Naskh Arabic','Geeza Pro',serif;direction:rtl;color:#2f3542}
.yazi-ayrik{display:inline-flex;flex-direction:row;direction:rtl;gap:.35em;align-items:center;justify-content:center}
.yazi-ayrik span{display:inline-block}

/* soru */
#ilerleme{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 66px);height:8px;margin:0 max(14px,env(safe-area-inset-left));background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden}
#ilerleme-dolu{height:100%;width:0;background:#feca57;transition:width .4s}
#ekran-oyun .baslik-emoji{font-size:clamp(34px,8vh,70px)}
#soru-kutu{background:rgba(255,255,255,.95);border-radius:36px;padding:clamp(10px,2vh,20px) clamp(20px,4vw,40px);margin:8px;font-size:clamp(18px,4vw,34px);color:#5f27cd;font-weight:bold;box-shadow:0 8px 25px rgba(0,0,0,.25)}
#soru-yazi{background:#fff;border-radius:34px;padding:6px 36px;margin:6px;font-size:clamp(56px,min(14vw,18vh),130px);box-shadow:0 8px 22px rgba(0,0,0,.25);line-height:1.5}
#secenekler{display:flex;gap:clamp(10px,2vw,18px);flex-wrap:wrap;justify-content:center;width:100%;max-width:980px;margin-top:8px;transition:opacity .25s}
#secenekler.bekle{opacity:.45;pointer-events:none}
.secenek{background:#fff;border:6px solid #dfe4ea;border-radius:30px;min-width:clamp(96px,min(26vw,32vh),210px);min-height:clamp(96px,min(26vw,28vh),200px);padding:6px 14px;cursor:pointer;transition:transform .15s,border-color .15s;display:flex;align-items:center;justify-content:center;font-size:clamp(44px,min(12vw,15vh),96px);box-shadow:0 8px 20px rgba(0,0,0,.2);color:#2f3542}
.secenek:hover{transform:scale(1.05)}
.secenek.hece{font-size:clamp(30px,min(8.5vw,10vh),64px)}
.secenek.metin-sec{font-size:clamp(24px,min(6vw,7.5vh),54px);font-weight:bold;color:#5f27cd;min-width:clamp(120px,28vw,280px)}
.secenek.dogru{border-color:#2ed573;background:#d9ffe3;animation:zipla .5s}
.secenek.yanlis{border-color:#ff4757;background:#ffe0e3;animation:sarsil .4s}
@keyframes zipla{0%,100%{transform:scale(1)}50%{transform:scale(1.2) rotate(5deg)}}
@keyframes sarsil{0%,100%{transform:translateX(0)}25%{transform:translateX(-12px)}75%{transform:translateX(12px)}}
#yildizlar{font-size:clamp(24px,5vw,40px);min-height:44px;letter-spacing:5px}

/* bilgi */
#bilgi-kutu{background:#fff;border-radius:34px;padding:clamp(14px,3vh,26px);max-width:660px;width:96%;box-shadow:0 15px 40px rgba(0,0,0,.3);max-height:100%;overflow-y:auto}
#bilgi-harf{font-size:clamp(70px,min(18vw,22vh),150px);line-height:1.3;color:#5f27cd}
#bilgi-kutu h2{color:#ff6348;text-shadow:none}
.bilgi-satir{font-size:clamp(15px,3vw,22px);margin:10px 0;text-align:left}.bilgi-satir b{color:#1e90ff}

/* sonuç */
#zafer{background:rgba(255,215,0,.15);border-radius:40px;padding:20px;margin-bottom:10px}
#zafer p{color:#fff;font-size:clamp(18px,3.6vw,28px)}
#sonuc-yildiz{font-size:clamp(34px,8vw,60px);margin-top:6px}
#konfeti{position:fixed;inset:0;pointer-events:none;z-index:999;width:100%;height:100%}
@media (max-height:480px){.baslik-emoji{display:none}.ekran{padding-top:calc(env(safe-area-inset-top) + 58px)}}

.secenek.metin-sec{font-family:'Comic Sans MS','Chalkboard SE','Segoe UI',system-ui,sans-serif}