:root{
  --bg:#F2F0FF; --surface:#FFFFFF; --surface2:#E6E1FF;
  --mango:#FFB300; --pink:#FF4D86; --teal:#14C9B8; --violet:#7C6CFF;
  --text:#2A2354; --muted:#6E67A8;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(620px 420px at 12% 8%,rgba(139,124,255,.20),transparent 60%),radial-gradient(520px 380px at 88% 28%,rgba(255,93,143,.16),transparent 60%),radial-gradient(720px 520px at 50% 105%,rgba(62,224,207,.12),transparent 60%)}
h1,h2,h3,.logo,.chip,.btn{font-family:'Fredoka',sans-serif}
a{color:inherit;text-decoration:none}

header{position:sticky;top:0;z-index:50;background:rgba(242,240,255,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(60,50,140,.08);
  display:flex;align-items:center;gap:16px;padding:12px 20px;flex-wrap:wrap}
.logo{font-size:1.5rem;font-weight:700;letter-spacing:.3px;cursor:pointer;user-select:none}
.logo span{color:var(--mango)}
.logo .dot{color:var(--pink)}
.search{flex:1;min-width:180px;max-width:420px;position:relative}
.search input{width:100%;padding:11px 16px 11px 42px;border-radius:999px;border:2px solid var(--surface2);
  background:var(--surface);color:var(--text);font:inherit;font-weight:600;outline:none;transition:border-color .2s}
.search input:focus{border-color:var(--violet)}
.search input::placeholder{color:var(--muted)}
.search .ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);opacity:.7}
#installBtn{display:none;margin-left:auto}

.chips{display:flex;gap:10px;padding:14px 20px 4px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:8px 18px;border-radius:999px;background:var(--surface);border:2px solid var(--surface2);
  color:var(--text);font-weight:600;font-size:.95rem;cursor:pointer;transition:.15s}
.chip:hover{background:var(--surface2)}
.chip.active{background:var(--mango);color:#3A2A00;border-color:var(--mango)}
.chip:focus-visible,.tile:focus-visible,.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

.hero{margin:28px 20px 18px;border-radius:24px;padding:26px 28px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#5B3FD4,#8B2FB8,#D42F7F,#FF5D8F,#5B3FD4);background-size:300% 300%;animation:heroShift 12s ease infinite;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero h1{font-size:clamp(1.4rem,4vw,2.3rem);line-height:1.15;max-width:560px}
.hero p{color:#F0E8FF;margin-top:8px;font-weight:600;max-width:500px}
.hero .btn{margin-top:16px}
.hero .blob{position:absolute;right:-40px;top:-40px;font-size:9rem;opacity:.3;pointer-events:none;--r:12deg;animation:floaty 5s ease-in-out infinite}
.btn{display:inline-block;border:none;cursor:pointer;font-weight:700;font-size:1rem;
  padding:12px 26px;border-radius:999px;background:var(--mango);color:#3A2A00;transition:transform .12s}
.btn:hover{transform:scale(1.05)}

main{padding:14px 20px 60px;max-width:1200px;margin:0 auto}
.sec-title{font-size:1.25rem;margin:18px 4px 12px;display:flex;align-items:center;gap:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;grid-auto-rows:150px;grid-auto-flow:dense}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:none;padding:0;text-align:left;
  display:flex;align-items:flex-end;transition:transform .18s,box-shadow .18s;background:var(--surface);box-shadow:0 6px 16px rgba(60,50,140,.12)}
.tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 30px rgba(60,50,140,.22),0 0 26px rgba(124,108,255,.35);z-index:2}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile .cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3.4rem}
.tile.big .cover{font-size:6rem}
.tile .label{position:relative;width:100%;padding:26px 12px 10px;font-weight:800;font-size:.95rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75))}
.empty{color:var(--muted);text-align:center;padding:50px 10px;font-weight:600;display:none}
.net{color:var(--teal);text-align:center;font-weight:800;padding:4px 20px}

/* Game page */
.game-wrap{max-width:760px;margin:0 auto;padding:14px 16px 60px}
.game-wrap h1{font-size:clamp(1.3rem,4vw,1.9rem);margin:14px 4px}
.hud{display:flex;gap:16px;justify-content:center;padding:12px;font-weight:800;flex-wrap:wrap}
.hud b{color:var(--mango)}
.stage{background:#0E0B26;min-height:320px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  position:relative;padding:10px;flex-direction:column}
.stage canvas{max-width:100%;height:auto;touch-action:none;border-radius:8px}
.pnote{padding:12px 4px;font-size:.9rem;color:var(--muted);line-height:1.5;text-align:center}
.howto{background:var(--surface);border-radius:18px;padding:18px 20px;margin-top:18px}
.howto h2{font-size:1.1rem;margin-bottom:10px}
.howto ol{padding-left:22px;line-height:1.9;font-weight:600}
.desc{color:var(--muted);font-weight:600;line-height:1.6;margin:0 4px 14px}

.dom-grid{display:grid;gap:10px;padding:6px}
.card{width:70px;height:70px;border-radius:12px;background:var(--violet);display:flex;align-items:center;justify-content:center;
  font-size:2rem;cursor:pointer;border:none;transition:transform .15s;color:transparent}
.card.flip{background:#fff;color:#000;transform:scale(1.04)}
.card.done{background:var(--teal);color:#00332E;cursor:default}
.hole{width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3A2E7A,#1E1750 70%);
  display:flex;align-items:center;justify-content:center;font-size:2.6rem;cursor:pointer;border:none;user-select:none}
.xo{width:86px;height:86px;border-radius:14px;background:var(--surface2);border:none;cursor:pointer;
  font-family:'Fredoka';font-size:2.6rem;font-weight:700;color:var(--text)}
.xo.x{color:var(--mango)}.xo.o{color:var(--teal)}
.xo.win{background:var(--pink)}
.dom-msg{text-align:center;font-weight:800;padding:8px;font-size:1.05rem;width:100%}

footer{text-align:center;color:var(--muted);font-size:.85rem;padding:24px;line-height:1.6}
@media (max-width:520px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-auto-rows:110px;gap:10px}
  .tile .cover{font-size:2.4rem}.tile.big .cover{font-size:4.5rem}
  .hero{padding:20px}
  .card{width:58px;height:58px;font-size:1.6rem}
  .hole{width:72px;height:72px;font-size:2.1rem}
  .xo{width:72px;height:72px;font-size:2.1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- Canlılık paketi --- */
@keyframes heroShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.tile{animation:popIn .45s both}
.tile:hover .cover{animation:floaty 1.8s ease-in-out infinite}
.logo .dot{display:inline-block;animation:floaty 3.2s ease-in-out infinite}
.chip.active{box-shadow:0 0 14px rgba(255,201,60,.55)}

/* --- Statik içerik sayfaları (tentang/privasi/kontak/ketentuan) --- */
main.page{max-width:760px;margin:0 auto;padding:8px 20px 20px}
.prose{background:var(--surface);border-radius:20px;padding:28px 26px;box-shadow:0 6px 18px rgba(60,50,140,.1);line-height:1.75;color:var(--text)}
.prose h1{font-family:Fredoka;font-size:2rem;margin:0 0 16px;color:var(--violet)}
.prose h2{font-family:Fredoka;font-size:1.25rem;margin:26px 0 8px;color:var(--text)}
.prose p{margin:10px 0;color:var(--text)}
.prose a{color:var(--pink);font-weight:700;text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose a.mail{font-size:1.15rem}
.prose em{color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:14px}
.foot-links a{color:var(--violet);font-weight:700;text-decoration:none}
.foot-links a:hover{text-decoration:underline}

/* --- SEO intro bölümü (ana sayfa) + landing sayfaları --- */
.intro{max-width:820px;margin:8px auto 0;padding:22px 24px;background:var(--surface);border-radius:20px;box-shadow:0 6px 18px rgba(60,50,140,.1);line-height:1.7;color:var(--text)}
.intro h2{font-family:Fredoka;font-size:1.35rem;margin:0 0 12px;color:var(--violet)}
.intro p{margin:10px 0}
.intro-links{list-style:none;padding:0;margin:14px 0;display:flex;flex-wrap:wrap;gap:10px}
.intro-links a{display:inline-block;background:var(--surface2);color:var(--violet);font-weight:700;text-decoration:none;padding:9px 15px;border-radius:12px;transition:.15s}
.intro-links a:hover{background:var(--violet);color:#fff}
.landing-intro{max-width:820px;margin:0 auto;padding:20px 24px 6px;line-height:1.7;color:var(--text)}
.landing-intro h1{font-family:Fredoka;font-size:1.9rem;margin:0 0 12px;color:var(--violet)}
.landing-intro p{margin:10px 0}
.landing-intro strong{color:var(--text)}