/* Türkçe 4 · Tema 4 hikâye özel etkinlikler — ortak kabuk (akıllı tahta, 16:9) */
:root{
  --lacivert:#17294a; --lacivert2:#22406e; --altin:#f5a623; --altin-koyu:#b9740b;
  --parsomen:#fbf1da; --murekkep:#2a2118; --yesil:#2e9d55; --kirmizi:#e0483a;
  --unlu:#e0483a; --unsuz:#2f6fd1;
  --f-baslik:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-govde:"Nunito","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--lacivert);color:var(--murekkep);font-family:var(--f-govde);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
button{font-family:inherit;cursor:pointer}
button:focus-visible{outline:4px solid var(--altin);outline-offset:3px}

.ust{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--lacivert);color:#fff;z-index:30;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.ust a.geri{color:#fff;text-decoration:none;font-weight:800;font-size:16px;background:var(--lacivert2);border-radius:12px;padding:8px 12px}
.ust .baslik{font-family:var(--f-baslik);font-weight:800;font-size:24px;line-height:1;display:flex;flex-direction:column}
.ust .baslik small{font-family:var(--f-govde);font-size:12.5px;font-weight:700;color:#c9d6ee;margin-top:3px}
.ust .bos{flex:1}
.yildizlar{display:flex;gap:4px;font-size:24px}
.yildizlar span{filter:grayscale(1) opacity(.35);transition:filter .4s, transform .4s}
.yildizlar span.on{filter:none;transform:scale(1.15)}
.ust .ikon{width:46px;height:46px;border:none;border-radius:12px;background:var(--lacivert2);color:#fff;font-size:22px}

.sahne{position:fixed;inset:64px 0 0 0;background:#2b4a6b center/cover no-repeat;overflow:hidden}

/* Profesör Baykuş + konuşma balonu */
.bk-kutu{position:absolute;left:14px;bottom:10px;display:flex;align-items:flex-end;gap:8px;z-index:20;pointer-events:none;max-width:min(520px,34vw)}
.bk-kutu .balon{min-width:220px}
.bk{position:relative;width:120px;aspect-ratio:600/516;flex:0 0 auto;pointer-events:auto;cursor:pointer}
.bk img{position:absolute;inset:0;width:100%;height:100%}
.bk .kL{transform-origin:35% 55%;animation:kanatL 1.6s ease-in-out infinite}
.bk .kR{transform-origin:65% 55%;animation:kanatR 1.6s ease-in-out infinite}
.bk .agiz{opacity:0}
.bk.konus .agiz{animation:agiz .26s steps(1) infinite}
.bk.zipla{animation:zipla .5s ease}
@keyframes kanatL{50%{transform:rotate(-9deg)}}
@keyframes kanatR{50%{transform:rotate(9deg)}}
@keyframes agiz{50%{opacity:1}}
@keyframes zipla{40%{transform:translateY(-22px)}}
.balon{background:var(--parsomen);border:3px solid var(--altin-koyu);border-radius:18px 18px 18px 4px;padding:10px 16px;font-weight:800;font-size:clamp(15px,1.6vw,21px);line-height:1.35;box-shadow:0 8px 20px rgba(0,0,0,.3);margin-bottom:62px;pointer-events:auto}
.balon:empty{display:none}
.balon b{color:var(--altin-koyu)}

/* düğmeler */
.dugme{border:none;border-radius:16px;padding:12px 22px;font-weight:900;font-size:clamp(16px,1.7vw,22px);background:var(--altin);color:var(--murekkep);box-shadow:0 5px 0 var(--altin-koyu),0 8px 18px rgba(0,0,0,.25);transition:transform .1s}
.dugme:active{transform:translateY(3px);box-shadow:0 2px 0 var(--altin-koyu)}
.dugme.ikincil{background:#fff;box-shadow:0 5px 0 #c8b994,0 8px 18px rgba(0,0,0,.2)}
.dugme[disabled]{opacity:.45;pointer-events:none}

/* sürüklenen öğe */
.tasiniyor{z-index:50!important;transition:none!important;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35));cursor:grabbing}
.salla{animation:salla .45s}
@keyframes salla{20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* bitiş */
.bitis{position:fixed;inset:0;background:rgba(10,20,40,.72);display:grid;place-items:center;z-index:60}
.bitis[hidden]{display:none}
.bitis .kart{background:var(--parsomen);border:4px solid var(--altin-koyu);border-radius:26px;padding:28px 34px;text-align:center;max-width:min(620px,90vw);display:flex;flex-direction:column;gap:14px;align-items:center;animation:belir .5s cubic-bezier(.3,1.5,.5,1)}
.bitis h2{font-family:var(--f-baslik);font-size:40px;margin:0;line-height:1}
.bitis p{margin:0;font-size:20px;font-weight:700;line-height:1.4}
.bitis .y{font-size:54px;letter-spacing:6px}
.bitis .sira{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@keyframes belir{from{transform:scale(.6);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}