/* Sosyal Bilgiler 4 · Ünite 1 konuya özel etkinlikler — ortak kabuk v2
   Sahne SABİT 1600×840 tasarım tuvali; ekrana orantılı ölçeklenir (kompozisyon her ekranda aynı). */
:root{
  --lacivert:#17294a; --lacivert2:#22406e; --altin:#f5a623; --altin-koyu:#b9740b;
  --parsomen:#fbf1da; --murekkep:#2a2118; --yesil:#2e9d55; --kirmizi:#e0483a; --kobalt:#1f4fa3; --turkuaz:#1a9c9a;
  --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:#0e1a30;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:linear-gradient(#1c3157,#152645);color:#fff;z-index:30;box-shadow:0 3px 14px rgba(0,0,0,.35)}
.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 .ara{flex:1}
.yildizlar{display:flex;gap:6px}
.yildizlar i{width:30px;height:30px;display:block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.8-5.3 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1L1.8 9.2l7.1-.8z' fill='%23ffffff' fill-opacity='.18' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.yildizlar i.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe27a'/%3E%3Cstop offset='1' stop-color='%23f5a623'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.8-5.3 4.9 1.5 7.1L12 17.6l-6.4 3.6 1.5-7.1L1.8 9.2l7.1-.8z' fill='url(%23g)' stroke='%23b9740b' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 0 6px rgba(255,210,90,.8))}
.ust .ikon{width:46px;height:46px;border:none;border-radius:12px;background:var(--lacivert2);color:#fff;font-size:22px}

/* ölçeklenen sahne */
.cerceve{position:fixed;inset:64px 0 0 0;overflow:hidden;background:#0e1a30}
.cerceve .bulanik{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(26px) brightness(.55) saturate(1.1)}
.sahne{position:absolute;left:0;top:0;width:1600px;height:840px;transform-origin:0 0;overflow:hidden;background:#2b4a6b center/cover no-repeat;box-shadow:0 0 60px rgba(0,0,0,.5)}
.sahne .katman{position:absolute;inset:0}
.fx{position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.fx .p{position:absolute;left:0;top:0;will-change:transform}
canvas.ortam{position:absolute;inset:0;pointer-events:none;z-index:2}
.golge{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(30,15,0,.45),rgba(30,15,0,0));pointer-events:none}

/* Profesör Baykuş + balon (sahne içinde, sol alt) */
.bk-kutu{position:absolute;left:18px;bottom:14px;display:flex;align-items:flex-end;gap:6px;z-index:35;pointer-events:none}
.bk{position:relative;width:132px;aspect-ratio:600/516;flex:0 0 auto;pointer-events:auto;cursor:pointer;transform-origin:50% 100%}
.bk img{position:absolute;inset:0;width:100%;height:100%}
.bk .kL{transform-origin:35% 55%}
.bk .kR{transform-origin:65% 55%}
.bk .agiz{opacity:0}
.bk.konus .agiz{animation:agiz .24s steps(1) infinite}
@keyframes agiz{50%{opacity:1}}
.balon{position:relative;max-width:470px;min-width:240px;background:var(--parsomen);border:3px solid var(--altin-koyu);border-radius:20px 20px 20px 6px;padding:12px 18px;font-weight:800;font-size:21px;line-height:1.35;box-shadow:0 10px 24px rgba(0,0,0,.35);margin-bottom:78px;pointer-events:auto;transform-origin:0 100%}
.balon:empty{display:none}
.balon b{color:var(--altin-koyu)}

/* düğmeler */
.dugme{border:none;border-radius:18px;padding:13px 26px;font-weight:900;font-size:23px;background:linear-gradient(#ffc04d,var(--altin));color:var(--murekkep);box-shadow:0 6px 0 var(--altin-koyu),0 10px 20px rgba(0,0,0,.28);transition:transform .1s, box-shadow .1s}
.dugme:hover{filter:brightness(1.05)}
.dugme:active{transform:translateY(4px);box-shadow:0 2px 0 var(--altin-koyu)}
.dugme.ikincil{background:#fff;box-shadow:0 6px 0 #c8b994,0 10px 20px rgba(0,0,0,.2)}
.dugme[disabled]{opacity:.45;pointer-events:none}
.sagalt{position:absolute;right:26px;bottom:24px;z-index:36}
.tur-etiket{position:absolute;right:24px;top:18px;background:rgba(18,32,58,.82);color:#fff;font-weight:900;border-radius:14px;padding:6px 16px;font-size:18px;z-index:36;box-shadow:0 4px 10px rgba(0,0,0,.25)}

/* sürükleme */
.tasiniyor{z-index:50!important;transition:none!important;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));cursor:grabbing}

.yan-cevir{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:45;background:rgba(18,32,58,.92);color:#fff;font-weight:900;font-size:17px;border-radius:999px;padding:10px 20px;box-shadow:0 8px 20px rgba(0,0,0,.4);white-space:nowrap}
.yan-cevir[hidden]{display:none}
/* bitiş */
.bitis{position:fixed;inset:0;background:rgba(10,20,40,.7);display:grid;place-items:center;z-index:60;backdrop-filter:blur(3px)}
.bitis[hidden]{display:none}
.bitis .kart{position:relative;background:var(--parsomen);border:4px solid var(--altin-koyu);border-radius:28px;padding:30px 38px;text-align:center;max-width:min(660px,92vw);display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.bitis h2{font-family:var(--f-baslik);font-size:42px;margin:0;line-height:1}
.bitis p{margin:0;font-size:20px;font-weight:700;line-height:1.45}
.bitis .yr{display:flex;gap:10px}
.bitis .yr i{width:54px;height:54px}
.bitis .skor{font-weight:900;color:#8a6a2a;font-size:18px}
.bitis .sira{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}