/* WoogiGames — index.html sayfasına özel stiller (index.html içinden çıkarıldı) */
  #splashScreen{
    position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 40%, #1a1440, #0a0824 75%);
    animation:splashOut .6s ease forwards; animation-delay:1.3s;
  }
  #splashLogo{
    width:min(70vw, 320px); animation:splashPop .7s cubic-bezier(.34,1.56,.64,1);
    filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
  }
  @keyframes splashPop{ from{ opacity:0; transform:scale(.7);} to{ opacity:1; transform:scale(1);} }
  @keyframes splashOut{ from{ opacity:1; visibility:visible;} to{ opacity:0; visibility:hidden; pointer-events:none;} }
  @media (prefers-reduced-motion: reduce){
    #splashScreen{ animation:splashOut .3s ease forwards; animation-delay:.4s; }
    #splashLogo{ animation:none; }
  }
  :root{
    --bg:#F7F5FF;
    --ink:#1B1B3A;
    --purple:#6C4EF5;
    --purple-dark:#4a34c9;
    --coral:#FF6B6B;
    --coral-dark:#c94b4b;
    --yellow:#FFD23F;
    --teal:#2EC4B6;
    --teal-dark:#1c9c90;
    --pink:#FF6EC7;
    --card:#ffffff;
  }
  html.dark{
    --bg:#0d0a26;
    --ink:#F0EEFF;
    --card:#1a1640;
  }
  html.dark body{
    background:
      radial-gradient(circle at 8% 12%, rgba(255,209,63,.10), transparent 45%),
      radial-gradient(circle at 92% 18%, rgba(46,196,182,.12), transparent 45%),
      radial-gradient(circle at 15% 85%, rgba(255,110,199,.10), transparent 45%),
      radial-gradient(circle at 88% 82%, rgba(108,78,245,.2), transparent 45%),
      var(--bg);
  }
  html.dark header{ background:rgba(13,10,38,.8); }
  html.dark .search-box{ background:#1a1640; }
  html.dark .search-box input{ color:var(--ink); }
  html.dark .cat-pill, html.dark .badge, html.dark .music-btn{ background:#1a1640; color:var(--ink); }
  html.dark .game-card{ background:#1a1640; box-shadow:0 4px 0 #0a0824; }
  html.dark footer{ background:#120e33; }
  html.dark #sidebar{ background:linear-gradient(180deg,#151038,#0a0824); }
  html, body{ transition:background .3s ease, color .3s ease; }
  .game-card, .cat-pill, .search-box, header{ transition:background .3s ease, box-shadow .3s ease, color .3s ease; }

  /* Konuşan maskot */
  #mascotWidget{
    position:fixed; bottom:16px; left:16px; z-index:100; display:flex; align-items:flex-end; gap:10px;
    cursor:pointer;
  }
  #mascotChar{
    font-size:2.6rem; animation:mascotIdle 2.2s ease-in-out infinite;
    filter:drop-shadow(0 6px 10px rgba(108,78,245,.4));
  }
  @keyframes mascotIdle{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-8px) rotate(3deg);} }
  #mascotBubble{
    background:#fff; border-radius:16px 16px 16px 4px; padding:10px 14px; font-weight:800; font-size:.82rem;
    color:var(--ink); box-shadow:0 4px 0 #e4e0f7, 0 8px 20px rgba(0,0,0,.12); max-width:200px;
    opacity:0; transform:translateY(6px) scale(.9); transition:opacity .25s, transform .25s; position:relative;
  }
  #mascotBubble.show{ opacity:1; transform:translateY(0) scale(1); }
  html.dark #mascotBubble{ background:#1a1640; color:var(--ink); box-shadow:0 4px 0 #0a0824, 0 8px 20px rgba(0,0,0,.3); }
  @media (max-width:600px){ #mascotWidget{ bottom:10px; left:10px; } #mascotChar{ font-size:2.1rem; } #mascotBubble{ max-width:150px; font-size:.75rem; } }

  /* Başarılarım paneli */
  #achievements{
    max-width:1100px; margin:0 auto 20px; padding:0 20px; position:relative; z-index:1;
  }
  #achievements.hidden{ display:none; }
  #achTitle{ font-family:'Fredoka',sans-serif; font-size:1.1rem; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
  #achRow{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
  .ach-chip{
    flex:0 0 auto; background:linear-gradient(135deg,#fff,#F7F5FF); border-radius:14px; padding:10px 16px;
    box-shadow:0 3px 0 #e4e0f7; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:8px;
    font-weight:800; font-size:.82rem; white-space:nowrap; transition:transform .15s;
  }
  .ach-chip:hover{ transform:translateY(-2px); }
  .ach-chip .ach-val{ color:var(--purple); font-weight:900; }
  html.dark .ach-chip{ background:linear-gradient(135deg,#1a1640,#120e33); box-shadow:0 3px 0 #0a0824; }

  /* Profil */
  .profile-badge{
    display:flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:6px 14px 6px 6px;
    box-shadow:0 3px 0 #e4e0f7; cursor:pointer; font-weight:800; font-size:.85rem; border:none; font-family:inherit;
  }
  .profile-badge .avatar{ width:30px; height:30px; border-radius:50%; background:var(--purple); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
  html.dark .profile-badge{ background:#1a1640; color:var(--ink); }
  #profileModal{
    position:fixed; inset:0; background:rgba(20,15,40,.55); z-index:200; display:none;
    align-items:center; justify-content:center; padding:20px;
  }
  #profileModal.show{ display:flex; }
  #profileCard{
    background:#fff; border-radius:24px; padding:26px; max-width:360px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.3);
    text-align:center;
  }
  html.dark #profileCard{ background:#1a1640; }
  #profileCard h3{ font-family:'Fredoka',sans-serif; margin-bottom:14px; }
  #avatarPicker{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px; }
  .avatar-opt{ width:44px; height:44px; border-radius:50%; background:#F1EEFF; display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; cursor:pointer; border:3px solid transparent; }
  .avatar-opt.selected{ border-color:var(--purple); background:#E4DDFF; }
  #nameInput{ width:100%; padding:10px 14px; border-radius:12px; border:2px solid #E4DDFF; font-family:inherit; font-size:1rem; margin-bottom:14px; text-align:center; }
  #colorPicker{ display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
  .color-opt{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid transparent; }
  .color-opt.selected{ border-color:var(--ink); transform:scale(1.15); }

  /* Poki tarzı yatay kaydırmalı raylar */
  .rails{ max-width:1100px; margin:0 auto; padding:6px 20px 0; position:relative; z-index:1; }
  .rail{ margin-bottom:26px; }
  .rail-track{
    display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  .rail-track::-webkit-scrollbar{ height:8px; }
  .rail-track::-webkit-scrollbar-thumb{ background:rgba(108,78,245,.25); border-radius:99px; }
  .rail-track .game-card{ flex:0 0 128px; scroll-snap-align:start; }
  .rail-empty{
    background:var(--card); border-radius:16px; padding:18px 20px; font-weight:700; font-size:.9rem;
    box-shadow:0 4px 0 #e4e0f7; display:flex; align-items:center; gap:10px;
  }
  .rail-empty a{ color:var(--purple); text-decoration:underline; }

  /* Rastgele oyun butonu */
  .random-btn{
    display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:14px 26px;
    background:linear-gradient(135deg,#FFD23F,#FF9F5A); color:#1B1B3A; border:none; border-radius:999px;
    font-family:'Baloo 2','Nunito',sans-serif; font-weight:800; font-size:1.05rem; cursor:pointer;
    box-shadow:0 5px 0 #c9762a; transition:transform .15s, box-shadow .15s; text-decoration:none;
  }
  .random-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 0 #c9762a; }
  .random-btn:active{ transform:translateY(0); box-shadow:0 3px 0 #c9762a; }
  .random-btn .dice{ font-size:1.3rem; display:inline-block; animation:diceSpin 3s ease-in-out infinite; }
  @keyframes diceSpin{ 0%,80%,100%{ transform:rotate(0);} 85%{ transform:rotate(-18deg);} 90%{ transform:rotate(14deg);} 95%{ transform:rotate(-8deg);} }

  /* Maskot hikaye modalı */
  #patiStoryModal{
    position:fixed; inset:0; background:rgba(20,14,50,.55); z-index:200; display:none;
    align-items:center; justify-content:center; padding:20px;
  }
  #patiStoryModal.show{ display:flex; }
  .pati-story-box{
    background:var(--card); border-radius:24px; padding:28px 26px; max-width:380px; text-align:center;
    box-shadow:0 10px 0 #e4e0f7, 0 20px 40px rgba(0,0,0,.25); position:relative;
  }
  .pati-story-box .p-emoji{ font-size:3.4rem; display:block; margin-bottom:10px; animation:mascotIdle 2.2s ease-in-out infinite; }
  .pati-story-box h3{ font-family:'Fredoka',sans-serif; font-size:1.25rem; margin:0 0 10px; }
  .pati-story-box p{ font-size:.92rem; line-height:1.5; opacity:.85; margin:0 0 18px; }
  .pati-story-box button{
    background:linear-gradient(135deg,#6C4EF5,#9C7BFF); color:#fff; border:none; border-radius:999px;
    padding:11px 24px; font-weight:800; font-family:'Baloo 2',sans-serif; font-size:.95rem; cursor:pointer;
    box-shadow:0 4px 0 #4a34c9;
  }

  /* Dünya Haritası */
  #worldMap{ max-width:1100px; margin:0 auto 20px; padding:0 20px; position:relative; z-index:1; }
  #worldMapGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:14px; }
  .region-card{
    border-radius:20px; padding:16px 10px; text-align:center; cursor:pointer; text-decoration:none; color:#fff;
    box-shadow:0 4px 0 rgba(0,0,0,.15); transition:transform .15s; position:relative; overflow:hidden;
  }
  .region-card:hover{ transform:translateY(-4px) scale(1.03); }
  .region-card .r-emoji{ font-size:2.4rem; display:block; margin-bottom:6px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
  .region-card .r-name{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:.95rem; }
  .region-card .r-badge{ font-size:.65rem; font-weight:800; margin-top:4px; opacity:.9; }
  .region-card.locked{ filter:grayscale(.5); opacity:.7; }

  /* Ebeveyn Paneli */
  #parentModal{ position:fixed; inset:0; background:rgba(20,15,40,.6); z-index:200; display:none; align-items:center; justify-content:center; padding:16px; }
  #parentModal.show{ display:flex; }
  #parentCard{
    background:#fff; border-radius:24px; padding:26px; max-width:480px; width:100%; max-height:85vh; overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
  }
  html.dark #parentCard{ background:#1a1640; }
  #parentCard h3{ font-family:'Fredoka',sans-serif; margin-bottom:4px; }
  #parentCard .sub{ font-size:.8rem; opacity:.6; margin-bottom:16px; }
  .parent-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
  .parent-stat{ background:#F7F5FF; border-radius:14px; padding:12px; text-align:center; }
  html.dark .parent-stat{ background:#120e33; }
  .parent-stat .num{ font-size:1.5rem; font-weight:900; color:var(--purple); }
  .parent-stat .lbl{ font-size:.72rem; opacity:.7; font-weight:700; }
  #parentCard h4{ font-size:.85rem; margin:14px 0 8px; font-weight:800; }
  .parent-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
  .parent-list-item{ display:flex; justify-content:space-between; background:#F7F5FF; border-radius:10px; padding:8px 12px; font-size:.82rem; font-weight:700; }
  html.dark .parent-list-item{ background:#120e33; }
  .parent-bar-track{ background:#F1EEFF; border-radius:8px; height:10px; overflow:hidden; margin-top:4px; }
  html.dark .parent-bar-track{ background:#120e33; }
  .parent-bar-fill{ height:100%; background:linear-gradient(90deg,var(--purple),var(--teal)); border-radius:8px; }
  #parentCard .empty-note{ font-size:.85rem; opacity:.6; text-align:center; padding:14px; }

  /* Gerçek verili istatistik şeridi */
  #statsRow{
    display:flex; gap:10px; flex-wrap:wrap;
  }
  .stat-pill{
    display:flex; align-items:center; gap:8px; background:linear-gradient(135deg,#fff,#F7F5FF);
    border-radius:999px; padding:8px 16px; box-shadow:0 3px 0 #e4e0f7, 0 6px 14px rgba(108,78,245,.08);
    font-weight:800; font-size:.85rem;
  }
  .stat-pill .icon{ font-size:1.2rem; }
  .stat-pill .val{ color:var(--purple); font-weight:900; }
  html.dark .stat-pill{ background:linear-gradient(135deg,#1a1640,#120e33); }

  /* Macera banner */
  #adventureBanner{ position:relative; z-index:1; margin-top:14px; }
  #adventureCard{
    background:linear-gradient(120deg,#6C4EF5,#4a34c9); border-radius:24px; padding:22px 26px;
    display:flex; align-items:center; gap:18px; box-shadow:0 10px 30px rgba(108,78,245,.35); flex-wrap:wrap;
    color:#fff; text-decoration:none;
  }
  #adventureCard .a-mascot{ font-size:3.2rem; animation:mascotIdle 2.2s ease-in-out infinite; flex:0 0 auto; }
  #adventureCard .a-text{ flex:1; min-width:200px; }
  #adventureCard h3{ font-family:'Fredoka',sans-serif; font-size:1.25rem; margin-bottom:4px; }
  #adventureCard p{ font-size:.85rem; opacity:.92; }
  #adventureCard .a-cta{
    background:#fff; color:var(--purple); font-weight:900; padding:10px 20px; border-radius:999px;
    font-size:.85rem; white-space:nowrap; box-shadow:0 3px 0 rgba(0,0,0,.15);
  }

  /* Sol kenar çubuğu navigasyonu */
  #sidebar{
    position:fixed; left:0; top:0; bottom:0; width:190px; z-index:90;
    background:linear-gradient(180deg,#1b1440,#0f0c2e);
    display:flex; flex-direction:column; padding:18px 12px; gap:4px;
    transform:translateX(-100%); transition:transform .3s ease;
    overflow-y:auto; overflow-x:hidden; box-sizing:border-box;
  }
  #sidebar.open{ transform:translateX(0); box-shadow:10px 0 40px rgba(0,0,0,.4); }
  #sidebar .sb-logo{
    font-family:'Fredoka',sans-serif; color:#fff; font-weight:600; text-align:center;
    margin-bottom:14px; padding:6px 4px; font-size:1.05rem; line-height:1.3;
    white-space:normal; word-break:keep-all; overflow-wrap:break-word;
    display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; width:100%; box-sizing:border-box;
  }
  .sb-item{
    display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:14px; color:#c9c4e8;
    text-decoration:none; font-weight:800; font-size:.88rem; border:none; background:none; width:100%;
    text-align:left; cursor:pointer; font-family:inherit;
  }
  .sb-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
  .sb-item.active{ background:linear-gradient(90deg,#FFD23F,#FFB03D); color:#1B1B3A; }
  .sb-item .sb-icon{ font-size:1.15rem; }
  #sidebarBackdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:85; display:none; }
  #sidebarBackdrop.show{ display:block; }
  #sidebarToggle{
    position:fixed; top:14px; left:14px; z-index:95; width:44px; height:44px; border-radius:14px; border:none;
    background:#1a1640; color:#fff; font-size:1.3rem; box-shadow:0 4px 12px rgba(0,0,0,.3); cursor:pointer;
  }
  @media (min-width:960px){
    #sidebar{ transform:translateX(0); }
    #sidebarToggle{ display:none; }
    #sidebarBackdrop{ display:none !important; }
    body{ padding-left:190px; }
  }

  /* Ana düzen: masaüstünde merkez + sağ sidebar, mobilde tek sütun (doğal DOM sırası) */
  #mainLayout{ max-width:1400px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }
  #centerCol > *{ max-width:1100px; margin-left:auto; margin-right:auto; }
  #rightCol{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
  @media (min-width:1240px){
    #mainLayout{ display:grid; grid-template-columns:1fr 300px; align-items:start; gap:26px; padding:0 24px; }
    #centerCol{ min-width:0; }
    #centerCol > *{ max-width:none; }
    #rightCol{ position:sticky; top:78px; margin-top:22px; }
  }

  /* Günlük Görevler + Sandık + İstatistikler (sidebar bağlamında dikey) */
  #dailySection{ display:flex; flex-direction:column; gap:14px; }
  #questsBox{ background:#fff; border-radius:20px; padding:16px 18px; box-shadow:0 4px 0 #e4e0f7; }
  html.dark #questsBox{ background:#1a1640; }
  #questsBox h4{ font-family:'Fredoka',sans-serif; margin-bottom:10px; }
  .quest-item{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .quest-item .q-icon{ font-size:1.3rem; }
  .quest-item .q-body{ flex:1; }
  .quest-item .q-label{ font-size:.8rem; font-weight:800; margin-bottom:3px; display:flex; justify-content:space-between; }
  .quest-track{ background:#F1EEFF; border-radius:8px; height:9px; overflow:hidden; }
  html.dark .quest-track{ background:#120e33; }
  .quest-fill{ height:100%; background:linear-gradient(90deg,var(--teal),var(--purple)); border-radius:8px; transition:width .3s; }
  .quest-item.done .quest-fill{ background:linear-gradient(90deg,#7bc94a,#4a9a3a); }
  #chestsBox{ background:#fff; border-radius:20px; padding:16px 18px; box-shadow:0 4px 0 #e4e0f7; text-align:center; }
  html.dark #chestsBox{ background:#1a1640; }
  #chestsBox h4{ font-family:'Fredoka',sans-serif; margin-bottom:10px; }
  .chest-btn{ font-size:2.2rem; background:none; border:none; cursor:pointer; padding:6px; transition:transform .15s; }
  .chest-btn:hover{ transform:scale(1.1); }
  .chest-btn:disabled{ opacity:.4; cursor:default; }
  .chest-btn:disabled:hover{ transform:none; }
  #chestNote{ font-size:.75rem; opacity:.65; margin-top:6px; }
  #statsBox{ background:#fff; border-radius:20px; padding:16px 18px; box-shadow:0 4px 0 #e4e0f7; }
  html.dark #statsBox{ background:#1a1640; }
  #statsBox h4{ font-family:'Fredoka',sans-serif; margin-bottom:10px; }
  .ad-slot{ background:#fff; border-radius:16px; padding:10px; box-shadow:0 3px 0 #e4e0f7; text-align:center; min-height:100px; }
  html.dark .ad-slot{ background:#1a1640; }
  .ad-label{ display:block; font-size:.6rem; letter-spacing:1px; color:#9089b8; font-weight:800; margin-bottom:6px; text-transform:uppercase; }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Nunito', system-ui, sans-serif;
    background:
      radial-gradient(circle at 8% 12%, rgba(255,209,63,.28), transparent 45%),
      radial-gradient(circle at 92% 18%, rgba(46,196,182,.25), transparent 45%),
      radial-gradient(circle at 15% 85%, rgba(255,110,199,.22), transparent 45%),
      radial-gradient(circle at 88% 82%, rgba(108,78,245,.2), transparent 45%),
      var(--bg);
    color:var(--ink);
    min-height:100vh;
  }
  h1,h2,h3,.logo,.cta{ font-family:'Baloo 2', 'Nunito', system-ui, sans-serif; }

  /* decorative blobs */
  .blob{ position:fixed; border-radius:50%; filter:blur(2px); opacity:.55; z-index:0; pointer-events:none; animation:blobDrift 9s ease-in-out infinite;}
  .blob1{ width:300px; height:300px; background:radial-gradient(circle,#FFE08A,#FFD23F); top:-90px; left:-110px;}
  .blob2{ width:240px; height:240px; background:radial-gradient(circle,#9CF0E6,#2EC4B6); bottom:-70px; right:-90px; animation-delay:2s;}
  .blob3{ width:180px; height:180px; background:radial-gradient(circle,#FFB8DE,#FF6EC7); top:40%; left:-100px; opacity:.35; animation-delay:4s;}
  @keyframes blobDrift{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(18px,-14px) scale(1.06);} }
  .sparkle{ position:fixed; font-size:1.4rem; z-index:0; pointer-events:none; opacity:.7; animation:twinkle 2.6s ease-in-out infinite; }
  @keyframes twinkle{ 0%,100%{ opacity:.25; transform:scale(.8) rotate(0deg);} 50%{ opacity:.9; transform:scale(1.15) rotate(15deg);} }
  @media (prefers-reduced-motion: reduce){ .blob{ animation:none; } }

  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
    border-bottom:3px solid transparent;
    border-image:linear-gradient(90deg,var(--coral),var(--yellow),var(--teal),var(--purple),var(--pink)) 1;
    box-shadow:0 2px 20px rgba(108,78,245,.08);
  }
  .nav{
    max-width:1400px; margin:0 auto; padding:12px 24px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .logo{
    font-family:'Fredoka',sans-serif; font-size:1.4rem; font-weight:700; margin-right:auto;
    display:flex; align-items:center; gap:8px; line-height:1; white-space:nowrap;
    background:linear-gradient(90deg,var(--purple),var(--pink),var(--coral));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .logo-mascot{
    width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;
    box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--purple), 0 3px 6px rgba(108,78,245,.35);
    transition:transform .2s;
  }
  .logo:hover .logo-mascot{ transform:scale(1.08) rotate(-6deg); }
  nav.links{ display:flex; gap:6px; }
  nav.links a{
    text-decoration:none; color:var(--ink); font-weight:800; font-size:.95rem;
    padding:8px 14px; border-radius:999px; transition:all .18s;
  }
  nav.links a:hover, nav.links a.active{
    background:linear-gradient(135deg,#fff,#F1EEFF); box-shadow:0 3px 0 #e4e0f7; transform:translateY(-1px);
  }
  .search-box{
    display:flex; align-items:center; background:#fff; border-radius:999px; padding:8px 16px;
    box-shadow:0 3px 0 #e4e0f7, inset 0 0 0 2px rgba(108,78,245,.08); min-width:180px; flex:1; max-width:440px;
    transition:box-shadow .2s;
  }
  .search-box:focus-within{ box-shadow:0 3px 0 #e4e0f7, inset 0 0 0 2px var(--purple); }
  .search-box input{ border:none; outline:none; font-family:inherit; font-size:.95rem; flex:1; background:transparent;}
  .header-stat{
    display:flex; align-items:center; gap:5px; background:linear-gradient(135deg,#fff,#FFF6E0); padding:8px 14px;
    border-radius:999px; font-weight:900; font-size:.85rem; box-shadow:0 3px 0 #ffd9a0; white-space:nowrap; flex:0 0 auto;
  }
  html.dark .header-stat{ background:linear-gradient(135deg,#1a1640,#241c50); box-shadow:0 3px 0 #2a2060; }
  .music-btn{
    width:44px; height:44px; border:none; border-radius:50%; background:#fff; font-size:1.3rem; cursor:pointer;
    box-shadow:0 3px 0 #e4e0f7; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    transition:transform .15s;
  }
  .music-btn:active{ transform:scale(.9); }
  .music-btn.playing{ animation:musicPulse 1.2s ease-in-out infinite; }
  @keyframes musicPulse{ 0%,100%{ box-shadow:0 3px 0 #e4e0f7, 0 0 0 0 rgba(108,78,245,.4);} 50%{ box-shadow:0 3px 0 #e4e0f7, 0 0 0 8px rgba(108,78,245,0);} }

  /* hero (kompakt) */
  .hero{
    max-width:1100px; margin:0 auto; padding:22px 20px 18px; position:relative; z-index:1;
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  }
  .hero-text{ flex:1; min-width:260px; }
  .hero-text h1{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.9rem; line-height:1.16; color:var(--ink); margin-bottom:8px;}
  .hero-text h1 em{ font-style:normal; color:var(--purple); text-decoration:underline wavy var(--yellow) 2px; text-underline-offset:4px;}
  .hero-text h1 .rainbow{
    background:linear-gradient(90deg,#FF6B6B,#FFD23F,#2EC4B6,#6C4EF5,#FF6EC7,#FF6B6B);
    background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:rainbowShift 5s linear infinite; text-shadow:0 4px 18px rgba(108,78,245,.2);
  }
  @keyframes rainbowShift{ to{ background-position:300% center; } }
  .hero-text p{ font-size:.92rem; opacity:.7; margin-bottom:14px; max-width:440px;}
  .badges{ display:flex; gap:8px; flex-wrap:wrap; }
  .badge{
    background:linear-gradient(135deg,#fff,#F7F5FF); padding:6px 13px; border-radius:999px; font-weight:800;
    font-size:.72rem; box-shadow:0 3px 0 #e4e0f7, 0 6px 14px rgba(108,78,245,.08); transition:transform .15s;
  }
  .badge:hover{ transform:translateY(-2px) scale(1.05); }
  .badge:nth-child(1){ box-shadow:0 3px 0 #ffd9a0, 0 6px 14px rgba(255,159,61,.15); border:2px solid rgba(255,159,61,.3);}
  .badge:nth-child(2){ box-shadow:0 3px 0 #b8e6ff, 0 6px 14px rgba(61,214,255,.15); border:2px solid rgba(61,214,255,.3);}
  .badge:nth-child(3){ box-shadow:0 3px 0 #ffc2e0, 0 6px 14px rgba(255,110,199,.15); border:2px solid rgba(255,110,199,.3);}
  .hero-art{
    flex:0 0 auto; min-width:120px; display:flex; justify-content:center; align-items:center;
    font-size:4.2rem; position:relative;
  }
  .hero-art::before{
    content:''; position:absolute; width:120px; height:120px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,210,63,.55), rgba(108,78,245,.25) 55%, transparent 75%);
    filter:blur(6px); animation:glowPulse 2.4s ease-in-out infinite;
  }
  @keyframes glowPulse{ 0%,100%{ transform:scale(1); opacity:.8;} 50%{ transform:scale(1.12); opacity:1;} }
  .hero-art .mascot{ display:inline-block; position:relative; z-index:2; animation:bounce 1.8s cubic-bezier(.34,1.56,.64,1) infinite; filter:drop-shadow(0 14px 18px rgba(108,78,245,.4)); }
  @keyframes bounce{ 0%,100%{ transform:translateY(0) rotate(-4deg) scale(1);} 45%{ transform:translateY(-14px) rotate(4deg) scale(1.05);} 55%{ transform:translateY(-14px) rotate(4deg) scale(.98);} }
  .hero-art .float{ position:absolute; font-size:1.3rem; animation:float 4s ease-in-out infinite; filter:drop-shadow(0 4px 6px rgba(0,0,0,.12)); z-index:2; }
  .hero-art .f1{ top:-6px; left:-6px; animation-delay:0s;}
  .hero-art .f2{ bottom:-4px; right:0; animation-delay:1s;}
  .hero-art .f3{ top:45%; right:-20px; animation-delay:2s;}
  .hero-art .f4{ top:4%; right:14%; animation-delay:.6s; font-size:1rem;}
  .hero-art .f5{ bottom:20%; left:-10px; animation-delay:1.6s; font-size:1.8rem;}
  @keyframes float{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-14px) rotate(12deg);} }
  @media (prefers-reduced-motion: reduce){ .hero-art .float, .hero-art .mascot, .hero-art::before{ animation:none; } }

  /* categories */
  .cats{ max-width:1100px; margin:10px auto 0; padding:0 20px; display:flex; gap:10px; overflow-x:auto; position:relative; z-index:1;}
  .cat-pill{
    flex:0 0 auto; background:#fff; border:none; padding:10px 18px; border-radius:999px; font-weight:800; font-family:inherit;
    font-size:.9rem; cursor:pointer; box-shadow:0 3px 0 #e4e0f7; color:var(--ink); white-space:nowrap;
  }
  .cat-pill.active{ background:var(--purple); color:#fff; box-shadow:0 3px 0 var(--purple-dark); }
  .cat-pill[data-cat="hafiza"].active{ background:linear-gradient(135deg,#6C4EF5,#9C7BFF); box-shadow:0 3px 0 #4a34c9; }
  .cat-pill[data-cat="bulmaca"].active{ background:linear-gradient(135deg,#FF6B9E,#FF9F6B); box-shadow:0 3px 0 #c94b6e; }
  .cat-pill[data-cat="yaris"].active{ background:linear-gradient(135deg,#4a34c9,#2b2456); box-shadow:0 3px 0 #1a1638; }
  .cat-pill[data-cat="spor"].active{ background:linear-gradient(135deg,#6bc46b,#4a9a4a); box-shadow:0 3px 0 #327032; }
  .cat-pill[data-cat="yaratici"].active{ background:linear-gradient(135deg,#FFB03D,#FF9F5A); color:#1B1B3A; box-shadow:0 3px 0 #c97a2a; }
  .cat-pill[data-cat="zeka"].active{ background:linear-gradient(135deg,#2EC4B6,#3DD6FF); box-shadow:0 3px 0 #1c9c90; }
  .cat-pill[data-cat="macera"].active{ background:linear-gradient(135deg,#22B8AA,#2EC4B6); box-shadow:0 3px 0 #17847a; }
  .cat-pill[data-cat="hareket"].active{ background:linear-gradient(135deg,#3DD6FF,#2EC4B6); box-shadow:0 3px 0 #1c9cae; }
  .cat-pill[data-cat="mutfak"].active{ background:linear-gradient(135deg,#ff9f5a,#ffb85c); color:#1B1B3A; box-shadow:0 3px 0 #c9762a; }
  .cat-pill[data-cat="aksiyon"].active{ background:linear-gradient(135deg,#FF6B6B,#FF3D6E); box-shadow:0 3px 0 #c9304f; }

  /* grid */
  main{ max-width:1100px; margin:0 auto; padding:30px 20px 60px; position:relative; z-index:1;}
  main h2{ font-size:1.3rem; margin-bottom:16px; }
  .section-band{
    display:flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; margin-bottom:18px;
    color:#fff; font-family:'Baloo 2','Nunito',sans-serif; font-weight:800; font-size:1.15rem;
    box-shadow:0 4px 0 rgba(0,0,0,.08);
  }
  .section-band .count{ font-size:.78rem; font-weight:700; background:rgba(255,255,255,.25); padding:3px 12px; border-radius:999px; margin-left:auto; }
  .show-all-btn{
    display:block; margin:-4px auto 20px; padding:10px 22px; border:none; border-radius:999px;
    background:linear-gradient(135deg,#fff,#F7F5FF); color:var(--purple); font-weight:800; font-size:.9rem;
    box-shadow:0 3px 0 #e4e0f7; cursor:pointer; transition:transform .15s;
  }
  .show-all-btn:hover{ transform:translateY(-2px); }
  .show-all-btn:active{ transform:translateY(1px); }
  .band-featured{ background:linear-gradient(90deg,#FFB03D,#FF6B6B); }
  .band-macera{ background:linear-gradient(90deg,#22B8AA,#2EC4B6); }
  .band-hareket{ background:linear-gradient(90deg,#3DD6FF,#2EC4B6); }
  .band-yaris{ background:linear-gradient(90deg,#2b2456,#6C4EF5); }
  .band-spor{ background:linear-gradient(90deg,#4a9a4a,#6bc46b); }
  .band-mutfak{ background:linear-gradient(90deg,#ff9f5a,#ffb85c); color:#1B1B3A; }
  .band-aksiyon{ background:linear-gradient(90deg,#FF6B6B,#FF3D6E); }
  .band-hafiza{ background:linear-gradient(90deg,#6C4EF5,#9C7BFF); }
  .band-bulmaca{ background:linear-gradient(90deg,#FF6B9E,#FF9F6B); }
  .band-yaratici{ background:linear-gradient(90deg,#FF9F5A,#FFD23F); color:#1B1B3A; }
  .band-zeka{ background:linear-gradient(90deg,#2EC4B6,#3DD6FF); }
  .grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:14px; margin-bottom:36px;
  }
  .game-card{
    background:var(--card); border-radius:16px; padding:8px; text-align:center; text-decoration:none; color:var(--ink);
    box-shadow:0 4px 0 #e4e0f7; transition:transform .15s, box-shadow .15s; position:relative; overflow:hidden;
    --accent:#C9BBFF; --glow:rgba(108,78,245,.18);
  }
  .game-card::after{
    content:''; position:absolute; top:0; left:16%; right:16%; height:4px; z-index:6;
    background:var(--accent); border-radius:0 0 8px 8px; opacity:.9;
  }
  .game-card:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 8px 0 #e4e0f7, 0 14px 22px var(--glow); }
  .game-card[data-cat~="hafiza"]{ --accent:#6C4EF5; --glow:rgba(108,78,245,.3); }
  .game-card[data-cat~="bulmaca"]{ --accent:#FF6B9E; --glow:rgba(255,107,158,.3); }
  .game-card[data-cat~="yaris"]{ --accent:#4a34c9; --glow:rgba(74,52,201,.3); }
  .game-card[data-cat~="spor"]{ --accent:#4a9a4a; --glow:rgba(74,154,74,.3); }
  .game-card[data-cat~="yaratici"]{ --accent:#FFB03D; --glow:rgba(255,176,61,.3); }
  .game-card[data-cat~="zeka"]{ --accent:#2EC4B6; --glow:rgba(46,196,182,.3); }
  .game-card[data-cat~="macera"]{ --accent:#22B8AA; --glow:rgba(34,184,170,.3); }
  .game-card[data-cat~="hareket"]{ --accent:#3DD6FF; --glow:rgba(61,214,255,.3); }
  .game-card[data-cat~="mutfak"]{ --accent:#ff9f5a; --glow:rgba(255,159,90,.3); }
  .game-card[data-cat~="aksiyon"]{ --accent:#FF3D6E; --glow:rgba(255,61,110,.3); }
  .thumb .ic{ display:inline-block; transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
  .game-card:hover .ic{ transform:scale(1.18) rotate(-6deg); }
  @keyframes cardIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .game-card.reveal{ animation:cardIn .45s ease both; }
  .game-card::before{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-20deg); transition:left .55s ease; z-index:5; pointer-events:none;
  }
  .game-card:hover::before{ left:130%; }
  .thumb{
    width:100%; aspect-ratio:1/1; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:3.2rem; margin-bottom:6px; position:relative; overflow:hidden;
  }
  .thumb span.ic{ position:relative; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
  .thumb::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; }
  /* tema renkleri */
  .th-hayvanlar{ background:linear-gradient(135deg,#FFE8C2,#FF9F5A); }
  .th-meyveler{ background:linear-gradient(135deg,#FFD1DC,#FF5C86); }
  .th-uzay{ background:linear-gradient(135deg,#CBBBFF,#6C4EF5); }
  .th-deniz{ background:linear-gradient(135deg,#BDEFFF,#22B8AA); }
  .th-tatli{ background:linear-gradient(135deg,#FFE0F3,#FF7FC2); }
  .th-default{ background:linear-gradient(135deg,#E4DDFF,#C9BBFF); }
  /* mekanik şekil/desen grupları */
  .shape-match{ border-radius:16px; }
  .shape-match::after{ background-image:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
    background-size:33% 33%; }
  .shape-order{ border-radius:50%; margin-left:auto; margin-right:auto; width:88%; aspect-ratio:1/1; }
  .shape-order::after{ background-image: repeating-conic-gradient(rgba(255,255,255,.28) 0deg 8deg, transparent 8deg 40deg); }
  .shape-recall{ border-radius:32% 68% 68% 32% / 32% 32% 68% 68%; }
  .shape-recall::after{ background-image: radial-gradient(circle, rgba(255,255,255,.4) 18%, transparent 19%);
    background-size:24px 24px; }
  .thumb-svg{ width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; margin-bottom:6px; display:block; }
  .thumb-svg svg{ width:100%; height:100%; display:block; }
  .t1{ background:linear-gradient(135deg,#E4DDFF,#C9BBFF); }
  .t2{ background:linear-gradient(135deg,#FFEBB0,#FFD23F); }
  .t3{ background:linear-gradient(135deg,#CFF3F0,#8FE4DB); }
  .t4{ background:linear-gradient(135deg,#FFD9D9,#FFB3B3); }
  .game-card h3{ font-size:.8rem; font-weight:800; margin:0; line-height:1.2; }
  .game-card .tag{
    display:block; position:absolute; top:8px; right:8px; z-index:7;
    background:rgba(20,14,50,.55); color:#fff; font-size:.6rem; font-weight:800;
    padding:2px 7px; border-radius:999px; backdrop-filter:blur(2px); letter-spacing:.2px;
  }
  .rail-track .game-card .tag{ font-size:.55rem; padding:1px 6px; }
  .game-card .age-badge{
    position:absolute; bottom:8px; left:8px; z-index:7; background:rgba(255,255,255,.92); color:var(--ink);
    font-size:.58rem; font-weight:800; padding:2px 6px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.15);
  }
  html.dark .game-card .age-badge{ background:rgba(20,14,50,.85); color:#fff; }
  .game-card .fav-btn{
    position:absolute; bottom:6px; right:6px; z-index:7; background:rgba(255,255,255,.9); border:none;
    border-radius:50%; width:26px; height:26px; font-size:1rem; line-height:1; cursor:pointer; color:#c94b6e;
    box-shadow:0 1px 3px rgba(0,0,0,.15); transition:transform .15s;
  }
  .game-card .fav-btn:hover{ transform:scale(1.15); }
  .game-card .fav-btn.active{ color:#FF3D6E; animation:pop-in .3s var(--ease-pop); }
  html.dark .game-card .fav-btn{ background:rgba(20,14,50,.85); }
  .game-card .play-badge{
    position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:7; background:rgba(20,14,50,.6); color:#fff;
    font-size:.55rem; font-weight:800; padding:2px 7px; border-radius:999px; letter-spacing:.2px; white-space:nowrap;
  }
  .badge-new{
    position:absolute; top:8px; left:8px; background:var(--coral); color:#fff; font-size:.65rem; font-weight:800;
    padding:3px 8px; border-radius:999px;
  }
  .badge-soon{
    position:absolute; inset:0; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center;
    font-weight:800; color:var(--purple); font-size:.85rem; border-radius:18px;
  }
  .soon-card{ cursor:default; }

  footer{
    background:#fff; border-top:3px solid var(--bg); padding:30px 20px; text-align:center;
    font-size:.85rem; opacity:.7; position:relative; z-index:1;
  }
  footer .links{ display:flex; gap:16px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
  footer a{ color:var(--purple); text-decoration:none; font-weight:800; }

  @media (max-width:600px){
    .hero-text h1{ font-size:2rem; }
    .hero-art{ font-size:5rem; }
    nav.links{ display:none; }
    .random-btn{ width:100%; justify-content:center; padding:13px 20px; }
    .rail-track .game-card{ flex-basis:108px; }
    .rails{ padding:6px 14px 0; }
  }