:root{--sky:#5ED1FF;--sky2:#2E8BFF;--sun:#FFD23F;--ink:#1B1A3A;--pink:#FF5CA8;--lime:#9BFF3D;--grape:#8A5CFF;--orange:#FF8A3D;--mint:#3DFFC9}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#5ED1FF 0,#8FE0FF 40%,#FFF8E0 100%);background-attachment:fixed;color:var(--ink);font-family:Nunito,system-ui,sans-serif;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg span{position:absolute;border-radius:50%;opacity:.55;filter:blur(2px);animation:float 9s ease-in-out infinite}
.bg .a{width:220px;height:220px;background:var(--sun);top:8%;left:-60px}
.bg .b{width:140px;height:140px;background:var(--pink);top:20%;right:6%;animation-delay:-3s}
.bg .c{width:300px;height:300px;background:var(--grape);bottom:-120px;left:30%;animation-delay:-5s;opacity:.35}
.bg .d{width:120px;height:120px;background:var(--lime);top:55%;right:20%;animation-delay:-7s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(8deg)}}
.z{position:relative;z-index:1}

header{padding:14px 0}
.head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:#fff;border-radius:999px;padding:10px 14px 10px 10px;box-shadow:0 10px 30px rgba(27,26,58,.15)}
.logo{display:inline-flex;align-items:center;gap:10px;padding-right:6px}
.logo .mark{width:50px;height:50px;border-radius:50%;background:var(--sun);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #D9A800;animation:wig 3s ease-in-out infinite}
@keyframes wig{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.logo .t{font:700 26px/1 Fredoka,sans-serif;letter-spacing:-.5px}
.logo .t b{color:var(--pink)}
.cats{display:flex;gap:6px;flex-wrap:wrap}
.cat{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 8px;border-radius:999px;font:800 14px/1 Nunito,sans-serif;transition:.15s;background:#F0F4FF}
.cat i{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.cat:hover{transform:translateY(-2px) scale(1.04)}
.search{flex:1 1 180px;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:#F0F4FF;min-width:0}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:700 15px/1 Nunito,sans-serif;color:var(--ink)}
.lang{display:inline-flex;background:#F0F4FF;border-radius:999px;padding:4px;gap:2px}
.lang a{height:36px;padding:0 12px;border-radius:999px;font:800 13px/36px Nunito,sans-serif}
.lang a.on{background:var(--ink);color:#fff}

.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:36px 0 20px}
.hero h1{margin:0;font:700 clamp(48px,8vw,96px)/.95 Fredoka,sans-serif;letter-spacing:-1px;color:#fff;text-shadow:0 6px 0 rgba(27,26,58,.25)}
.hero h1 span{display:block;color:var(--sun)}
.hero p{margin:12px 0 0;font:800 18px/1.4 Nunito,sans-serif;max-width:460px}
.big{display:inline-flex;align-items:center;gap:14px;height:76px;padding:0 34px;border-radius:999px;background:var(--pink);color:#fff;font:700 24px/1 Fredoka,sans-serif;box-shadow:0 8px 0 #C2347C,0 18px 30px rgba(27,26,58,.25);transition:.12s;border:0;cursor:pointer}
.big:hover{transform:translateY(3px);box-shadow:0 5px 0 #C2347C,0 10px 20px rgba(27,26,58,.25)}
.big:active{transform:translateY(8px);box-shadow:0 0 0 #C2347C}

.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;gap:16px;padding:12px 0 40px}
.tile{position:relative;border-radius:26px;overflow:hidden;border:5px solid #fff;box-shadow:0 10px 24px rgba(27,26,58,.18);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;transition:.18s cubic-bezier(.34,1.56,.64,1);background:#2E8BFF}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile:hover{transform:scale(1.045) rotate(-1.2deg);z-index:2;box-shadow:0 18px 40px rgba(27,26,58,.28)}
.tile.w2{grid-column:span 2}.tile.h2{grid-row:span 2}
.tile .name{font:700 20px/1.1 Fredoka,sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.35);position:relative}
.tile.h2 .name{font-size:30px}
.tile .cat2{font:800 12px/1 Nunito,sans-serif;opacity:.95;position:relative;margin-top:4px;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.tile .play{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.18);transform:scale(.85);opacity:0;transition:.18s}
.tile:hover .play{opacity:1;transform:scale(1)}
.tile .hot{position:absolute;top:12px;left:12px;padding:7px 10px;border-radius:999px;background:var(--sun);color:var(--ink);font:800 12px/1 Nunito,sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.tile .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
@media(max-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:140px}}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}}

.sec{padding:10px 0 40px}
.sh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sh h2{margin:0;font:700 36px/1 Fredoka,sans-serif}
.sh a{font:800 14px/1 Nunito,sans-serif;padding:12px 16px;border-radius:999px;background:#fff;box-shadow:0 4px 0 rgba(27,26,58,.12)}
.bubbles{display:flex;gap:14px;overflow-x:auto;padding:8px 4px 16px;scrollbar-width:none}
.bubbles::-webkit-scrollbar{display:none}
.bub{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:108px}
.bub i{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:5px solid #fff;box-shadow:0 8px 0 rgba(27,26,58,.15);transition:.18s cubic-bezier(.34,1.56,.64,1)}
.bub:hover i{transform:translateY(-6px) scale(1.06)}
.bub span{font:800 14px/1.2 Nunito,sans-serif;text-align:center}

/* Oyun sayfası */
.gp{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding:20px 0 40px}
@media(max-width:960px){.gp{grid-template-columns:1fr}}
.frame{background:#fff;border-radius:26px;padding:10px;box-shadow:0 10px 30px rgba(27,26,58,.15)}
.frame .box{position:relative;width:100%;background:#1B1A3A;border-radius:18px;overflow:hidden}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 8px 4px}
.frame h1{margin:0;font:700 28px/1.1 Fredoka,sans-serif}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font:800 14px/1 Nunito,sans-serif;border:0;cursor:pointer}
.btn:hover{background:var(--pink)}
.card{background:#fff;border-radius:22px;padding:20px;box-shadow:0 10px 30px rgba(27,26,58,.12);margin-top:16px}
.card h2{margin:0 0 10px;font:700 24px/1 Fredoka,sans-serif}
.card p{margin:0;font:600 15px/1.6 Nunito,sans-serif}
.side .tile{height:150px;margin-bottom:14px}

/* Mobil oyun: kapak + Oyna, tam ekran katman */
.poster{display:none}
.overlay{position:fixed;inset:0;z-index:1000;background:#000}
.overlay iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.overlay button{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#1B1A3A;font:800 20px/44px Nunito,sans-serif;cursor:pointer}
@media(max-width:720px){
  .head{border-radius:24px;padding:10px;gap:10px}
  .logo .mark{width:40px;height:40px}.logo .t{font-size:22px}
  .cats{display:none}
  .search{flex:1 1 100%;order:3}
  .lang{margin-left:auto}
  .hero{padding:24px 0 10px}.hero p{font-size:16px}
  .big{height:64px;padding:0 24px;font-size:20px;width:100%;justify-content:center}
  .gp{padding:10px 0 30px;gap:14px}
  .frame{padding:6px;border-radius:20px}
  .frame .box{padding-top:62% !important;min-height:260px}
  .frame iframe{display:none}
  .poster{display:flex;position:absolute;inset:0;background-size:cover;background-position:center;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:16px}
  .poster::before{content:"";position:absolute;inset:0;background:rgba(27,26,58,.45)}
  .poster .big{position:relative;width:auto;padding:0 40px}
  .poster .rot{position:relative;color:#fff;font:800 13px/1.3 Nunito,sans-serif;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
  .frame h1{font-size:22px}
  .side .tile{height:120px}
  .sec{padding:6px 0 24px}.sh h2{font-size:28px}
  .wrap{padding:0 14px}
}
footer{padding:30px 0 40px}
.foot{background:var(--ink);color:#fff;border-radius:28px;padding:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.foot .t{font:700 22px/1 Fredoka,sans-serif}
.foot .d{font:700 14px/1.6 Nunito,sans-serif;opacity:.8;max-width:380px;margin-top:8px}
.foot .links{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.foot .links a{font:800 13px/1 Nunito,sans-serif;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.12)}
.foot .links a:hover{background:var(--pink)}