:root{
  --pembe:#ff7eb6; --mor:#a77bff; --mavi:#7ec8ff; --sari:#ffd84d; --yesil:#6ee0a0;
  --yazi:#4a2a6b; --kart:#fff;
  --golge:0 8px 24px rgba(120,60,160,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  font-family:'Baloo 2',system-ui,sans-serif;font-size:18px;color:var(--yazi);
  background:linear-gradient(180deg,#ffe3f1 0%,#efe4ff 50%,#dff3ff 100%) fixed;
  overflow-x:hidden;user-select:none;
}
button{font-family:inherit;cursor:pointer;border:0}

/* uçuşan süsler */
.gok{position:fixed;inset:0;pointer-events:none;z-index:0}
.bulut,.yildiz{position:absolute;opacity:.75}
.bulut{font-size:64px;animation:suz 28s linear infinite}
.b1{top:8%;left:-10%}.b2{top:40%;left:-15%;animation-duration:36s;animation-delay:-12s}.b3{top:75%;left:-12%;animation-duration:32s;animation-delay:-20s}
.yildiz{font-size:34px;animation:zipla 3s ease-in-out infinite}
.s1{top:18%;right:6%}.s2{top:60%;left:4%;animation-delay:-1s}.s3{bottom:6%;right:10%;animation-delay:-2s}.s4{top:30%;left:12%;animation-delay:-1.5s}
@keyframes suz{to{transform:translateX(130vw)}}
@keyframes zipla{50%{transform:translateY(-14px) rotate(10deg)}}

.ust{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:16px 20px}
.ust h1{flex:1;margin:0;text-align:center;font-size:clamp(24px,4vw,40px);font-weight:800;
  color:#fff;text-shadow:0 3px 0 var(--pembe),0 6px 14px rgba(167,123,255,.5)}
/* şeker butonlar: alt kenarda koyu gölge, basınca çöker */
.btn,.geri,.unite,.etk,.kart,.secenek button,.es,.soru .dinle,.sonuc button,.vliste button{
  position:relative;box-shadow:0 7px 0 var(--alt,#e6d3f5),0 12px 20px rgba(120,60,160,.18);
  transition:transform .08s,box-shadow .08s}
:is(.btn,.geri,.unite,.etk,.kart,.secenek button,.es,.soru .dinle,.sonuc button,.vliste button):active{
  transform:translateY(6px)!important;box-shadow:0 1px 0 var(--alt,#e6d3f5),0 3px 8px rgba(120,60,160,.15)}
.geri{display:flex;align-items:center;gap:6px;height:56px;padding:0 20px 0 14px;border-radius:30px;
  background:#fff;color:var(--mor);font-size:22px;font-weight:800;--alt:#d9c6f7}
.geri svg{width:26px;height:26px}
.puan{background:var(--sari);border-radius:30px;padding:8px 18px;font-size:24px;box-shadow:var(--golge)}
.puan.parla{animation:parla .6s}
@keyframes parla{50%{transform:scale(1.35)}}

main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:8px 20px 40px}
.giris{text-align:center;font-size:22px;margin:4px 0 20px}

/* ünite seçimi */
.uniteler{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.unite{background:var(--kart);border-radius:32px;padding:28px 20px;text-align:center;
  font-size:28px;font-weight:800;color:var(--yazi);transition:transform .15s}
.unite:active{transform:scale(.96)}
.unite .em{display:block;font-size:84px;line-height:1.1;animation:zipla 2.5s ease-in-out infinite}
.unite small{display:block;font-size:18px;font-weight:500;opacity:.8}

/* etkinlik menüsü */
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.etk{border-radius:28px;padding:26px 14px;font-size:26px;font-weight:800;color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.12);transition:transform .15s}
.etk:active{transform:scale(.95)}
.etk span{display:block;font-size:64px}
.etk small{display:block;font-size:16px;font-weight:500}
.e1{background:linear-gradient(180deg,#ffa3cd,#ff6fa8);--alt:#d94d86}.e2{background:linear-gradient(180deg,#c0a8ff,#8d6bff);--alt:#6a48d6}
.e3{background:linear-gradient(180deg,#9adbff,#4fb0f0);--alt:#2f8ccb}.e4{background:linear-gradient(180deg,#8cedb9,#3fc787);--alt:#27a066}
.etk::before,.unite::before{content:'';position:absolute;left:14%;right:14%;top:8px;height:14px;border-radius:10px;background:rgba(255,255,255,.35)}
.unite::before{background:rgba(255,200,230,.35)}

/* video listesi */
.vliste{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 20px}
.vliste button{flex:1 1 220px;background:#fff;border-radius:22px;padding:14px 18px;font-size:20px;font-weight:800;color:var(--yazi);text-align:left}
.vliste button.secili{background:var(--pembe);color:#fff;--alt:#d94d86}
.vliste small{display:block;font-size:15px;font-weight:500;opacity:.85}

/* gelişim */
.gel{background:#fff;border-radius:28px;padding:20px 22px;box-shadow:var(--golge);margin-bottom:20px}
.gel h2{margin:0 0 10px;font-size:26px}
.cubuk{height:24px;background:#f3eafc;border-radius:14px;overflow:hidden;margin:6px 0 4px}
.cubuk div{height:100%;border-radius:14px;background:linear-gradient(90deg,var(--yesil),#3fc787)}
.rozet{display:inline-block;margin:4px;padding:6px 14px;border-radius:20px;background:#fff0f7;font-size:18px}
.gel table{width:100%;border-collapse:collapse;font-size:17px}
.gel td{padding:6px 4px;border-bottom:1px solid #f3eafc}
.ust .btn{background:#fff;border-radius:30px;height:56px;padding:0 18px;font-size:20px;font-weight:800;color:var(--yazi)}

/* video */
.video{width:100%;border-radius:28px;box-shadow:var(--golge);background:#000}

/* kartlar */
.kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.kart{background:var(--kart);border-radius:26px;padding:12px;text-align:center;}
.kart:active{transform:scale(.95) rotate(-2deg)}
.kart img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:18px;background:#fff7fb}
.kart b{display:block;font-size:24px;margin-top:6px}
.kart i{display:block;font-style:normal;font-size:17px;opacity:.75}
.kart.caliyor{animation:sallan .5s}
@keyframes sallan{25%{transform:rotate(-4deg) scale(1.04)}75%{transform:rotate(4deg) scale(1.04)}}

/* oyunlar */
.soru{background:#fff;border-radius:28px;padding:18px;box-shadow:var(--golge);text-align:center;margin-bottom:20px}
.soru .dinle{font-size:26px;font-weight:800;background:var(--sari);color:var(--yazi);border-radius:40px;padding:12px 30px;margin-top:6px}
.soru .kelime{font-size:44px;font-weight:800;color:var(--mor)}
.ilerleme{height:16px;background:#fff;border-radius:10px;overflow:hidden;margin:10px auto 0;max-width:500px}
.ilerleme div{height:100%;background:linear-gradient(90deg,var(--pembe),var(--mor));transition:width .4s}
.secenek{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px;margin:0 auto}
.secenek button{background:#fff;border-radius:26px;padding:10px;}
.secenek img{width:100%;aspect-ratio:4/3;object-fit:contain}
.secenek .yazi{font-size:30px;font-weight:800;color:var(--yazi);padding:26px 8px}
.secenek .dogru{background:#c9f7dc;animation:sallan .5s}
.secenek .yanlis{background:#ffd3d3;animation:titre .4s}
@keyframes titre{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* eşleştirme */
.eslestir{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.es{aspect-ratio:1;border-radius:22px;background:linear-gradient(135deg,#ffb3d6,#c7a8ff);
  font-size:20px;font-weight:800;color:var(--yazi);display:flex;align-items:center;justify-content:center;padding:6px;transition:transform .3s}
.es.kapali::after{content:'❓';font-size:46px}
.es.kapali>*{display:none}
.es.acik,.es.bitti{background:#fff}
.es.bitti{opacity:.55;transform:scale(.92)}
.es img{width:100%;height:100%;object-fit:contain}

.sonuc{text-align:center;background:#fff;border-radius:32px;padding:30px;box-shadow:var(--golge);font-size:28px;font-weight:800}
.sonuc .buyuk{font-size:90px;display:block}
.sonuc button{margin:14px 8px 0;font-size:24px;font-weight:800;border-radius:40px;padding:12px 28px;background:var(--pembe);color:#fff}

#konfeti{position:fixed;inset:0;pointer-events:none;z-index:10;overflow:hidden}
#konfeti span{position:absolute;top:-40px;font-size:30px;animation:dus 1.8s ease-in forwards}
@keyframes dus{to{transform:translateY(110vh) rotate(540deg)}}

@media (max-width:600px){.eslestir{grid-template-columns:repeat(3,1fr)}.kartlar{grid-template-columns:repeat(2,1fr)}}
.geri[hidden]{display:none}
@media (max-width:820px){.ust h1{font-size:26px}}