/* ===== WormStore.io — tanıtım sitesi tasarım sistemi (çok sayfalı) ===== */
:root{
  --bg:#070b16; --bg2:#0c1326; --panel:#111a30; --panel2:#16213c;
  --line:#1e2a48; --line2:#2a3a62;
  --txt:#eef2fb; --muted:#94a3c8; --dim:#5f6e92;
  --acc:#6d8bff; --acc2:#9b6bff; --grad:linear-gradient(135deg,#6d8bff,#9b6bff);
  --play:#28e07a; --gold:#ffd86b;
  --r:16px; --rl:22px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--txt); letter-spacing:-.01em;
  background:
    radial-gradient(1100px 600px at 100% -10%, rgba(109,139,255,.14), transparent 55%),
    radial-gradient(900px 520px at -8% 6%, rgba(155,107,255,.10), transparent 52%),
    var(--bg); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ width:min(1180px, calc(100% - 40px)); margin:0 auto; }

/* NAV */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:linear-gradient(180deg, rgba(8,12,24,.85), rgba(8,12,24,.55)); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; gap:18px; height:68px; }
.nav-logo{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:20px; letter-spacing:-.03em; }
.nav-logo img{ height:30px; width:auto; }
.nav-links{ display:flex; gap:6px; margin-left:auto; }
.nav-links a{ padding:9px 14px; border-radius:11px; font-weight:700; font-size:14px; color:var(--muted); transition:.15s; }
.nav-links a:hover{ color:#fff; background:#ffffff0c; }
.nav-links a.active{ color:#fff; background:var(--acc-soft,rgba(109,139,255,.16)); }
.nav-play{ margin-left:6px; padding:11px 22px; border-radius:12px; background:var(--play); color:#06251a; font-weight:800; box-shadow:0 10px 24px -10px rgba(40,224,122,.7); transition:.15s; }
.nav-play:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.nav-burger{ display:none; margin-left:auto; width:44px;height:44px; border:1px solid var(--line2); border-radius:11px; background:transparent; color:#fff; font-size:20px; cursor:pointer; }

/* HERO */
.hero{ padding:clamp(48px,9vw,110px) 0 64px; text-align:center; position:relative; }
.hero h1{ font-size:clamp(34px,6vw,68px); font-weight:900; line-height:1.04; letter-spacing:-.03em; margin:0 0 18px; }
.hero h1 .g{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p{ max-width:640px; margin:0 auto 30px; color:var(--muted); font-size:clamp(15px,2.2vw,19px); line-height:1.6; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 30px; border-radius:14px; font-weight:800; font-size:16px; cursor:pointer; border:0; transition:.15s; }
.btn-play{ background:var(--play); color:#06251a; box-shadow:0 14px 34px -12px rgba(40,224,122,.7); }
.btn-play:hover{ filter:brightness(1.07); transform:translateY(-2px); }
.btn-ghost{ background:#ffffff0a; color:#fff; border:1px solid var(--line2); }
.btn-ghost:hover{ background:#ffffff14; }

/* LIVE STAT BAND */
.statband{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:8px 0 0; }
.stat{ background:linear-gradient(180deg,var(--panel),#0b1322); border:1px solid var(--line); border-radius:var(--r); padding:20px; text-align:center; }
.stat .v{ font-size:clamp(26px,4vw,38px); font-weight:900; letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .l{ color:var(--muted); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }
.live-dot{ display:inline-block; width:8px;height:8px; border-radius:50%; background:var(--play); margin-right:6px; vertical-align:1px; animation:lp 1.6s infinite; }
@keyframes lp{0%{box-shadow:0 0 0 0 rgba(40,224,122,.5)}70%{box-shadow:0 0 0 7px rgba(40,224,122,0)}100%{box-shadow:0 0 0 0 rgba(40,224,122,0)}}

/* SECTIONS */
.section{ padding:64px 0; }
.sec-h{ text-align:center; margin-bottom:40px; }
.sec-h h2{ font-size:clamp(26px,4vw,40px); font-weight:900; letter-spacing:-.03em; margin:0 0 10px; }
.sec-h p{ color:var(--muted); margin:0; font-size:16px; }
.page-head{ padding:54px 0 10px; text-align:center; }
.page-head h1{ font-size:clamp(30px,5vw,52px); font-weight:900; letter-spacing:-.03em; margin:0 0 10px; }
.page-head p{ color:var(--muted); margin:0; }

/* CARDS GRID */
.grid{ display:grid; gap:16px; }
.g3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card{ background:linear-gradient(180deg,var(--panel),#0b1322); border:1px solid var(--line); border-radius:var(--rl); padding:24px; transition:.16s; }
.card:hover{ transform:translateY(-4px); border-color:var(--line2); box-shadow:0 24px 50px -24px rgba(109,139,255,.5); }
.card .ic{ width:50px;height:50px; border-radius:14px; display:grid; place-items:center; background:var(--grad); margin-bottom:14px; }
.card .ic svg{ width:24px;height:24px; stroke:#fff; fill:none; stroke-width:2; }
.card h3{ margin:0 0 8px; font-size:19px; font-weight:800; }
.card p{ margin:0; color:var(--muted); line-height:1.6; font-size:15px; }

/* LEADERBOARD / SERVER tables */
.lbx{ background:linear-gradient(180deg,var(--panel),#0b1322); border:1px solid var(--line); border-radius:var(--rl); overflow:hidden; }
.lbx-row{ display:grid; grid-template-columns:56px 1fr repeat(3,90px); align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); }
.lbx-row.head{ color:var(--muted); font:800 12px/1 Inter; text-transform:uppercase; letter-spacing:.07em; background:#0b1322; }
.lbx-row:last-child{ border-bottom:0; }
.lbx-rank{ font-weight:900; font-size:18px; color:var(--muted); }
.lbx-row.t1 .lbx-rank{ color:var(--gold); } .lbx-row.t2 .lbx-rank{ color:#dfe6ef; } .lbx-row.t3 .lbx-rank{ color:#e6aa76; }
.lbx-name{ font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbx-num{ text-align:center; font-weight:800; }
.lbx-num.gold{ color:var(--gold); }
.srv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.srv{ background:linear-gradient(180deg,var(--panel),#0b1322); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; display:flex; align-items:center; gap:14px; }
.srv .flag{ width:40px;height:28px; border-radius:6px; object-fit:cover; box-shadow:0 0 0 1px #ffffff22; }
.srv-info{ flex:1; min-width:0; }
.srv-name{ font-weight:800; font-size:16px; }
.srv-reg{ color:var(--dim); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.srv-count{ text-align:right; }
.srv-count b{ font-size:20px; font-weight:900; }
.srv-count span{ display:block; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; }
.srv-bar{ height:6px; border-radius:6px; background:#0b1322; border:1px solid var(--line); overflow:hidden; margin-top:6px; }
.srv-bar i{ display:block; height:100%; background:var(--grad); }

/* COMMUNITY / SOCIAL */
.soc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.soc{ display:flex; align-items:center; gap:14px; padding:20px 22px; border-radius:var(--rl); border:1px solid var(--line); background:linear-gradient(180deg,var(--panel),#0b1322); transition:.16s; }
.soc:hover{ transform:translateY(-4px); border-color:var(--sc,var(--acc)); box-shadow:0 22px 50px -22px var(--sc,var(--acc)); }
.soc-ic{ width:50px;height:50px; flex:0 0 50px; border-radius:14px; display:grid; place-items:center; background:var(--sc,var(--acc)); }
.soc-ic svg{ width:26px;height:26px; fill:#fff; }
.soc b{ font-size:17px; } .soc span{ display:block; color:var(--muted); font-size:13px; margin-top:2px; }

/* SLIDER (kullanıcının görselleri) */
.slider{ position:relative; border-radius:var(--rl); overflow:hidden; border:1px solid var(--line2);
  box-shadow:0 36px 90px -34px rgba(0,0,0,.85), 0 0 80px -30px rgba(109,139,255,.5); aspect-ratio:16/6.5; background:#0b1322; }
.slider-track{ display:flex; height:100%; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.slider-slide{ flex:0 0 100%; height:100%; }
.slider-slide img{ width:100%; height:100%; object-fit:cover; }
.slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:13px;
  background:rgba(8,12,24,.55); backdrop-filter:blur(8px); border:1px solid var(--line2); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:22px; transition:.15s; z-index:2; }
.slider-arrow:hover{ background:rgba(109,139,255,.5); transform:translateY(-50%) scale(1.06); }
.slider-arrow.l{ left:14px; } .slider-arrow.r{ right:14px; }
.slider-dots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2; }
.slider-dot{ width:9px; height:9px; border-radius:50%; background:#ffffff55; cursor:pointer; transition:.2s; }
.slider-dot.active{ background:#fff; width:24px; border-radius:6px; }
/* showcase strip (mağaza görselleri) */
.showcase{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.show-card{ position:relative; border-radius:var(--rl); overflow:hidden; border:1px solid var(--line2); aspect-ratio:4/3; background:#0b1322; transition:.16s; }
.show-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -24px rgba(109,139,255,.6); }
.show-card img{ width:100%; height:100%; object-fit:cover; }
.show-card .show-ov{ position:absolute; inset:auto 0 0 0; padding:30px 16px 14px; background:linear-gradient(180deg,transparent,rgba(6,10,22,.92)); font-weight:800; font-size:18px; }

/* CTA + FOOTER */
.cta-box{ text-align:center; padding:clamp(40px,7vw,72px) 24px; border-radius:var(--rl);
  background:radial-gradient(700px 300px at 50% -20%, rgba(109,139,255,.22), transparent 60%), linear-gradient(180deg,var(--panel2),#0b1322); border:1px solid var(--line2); }
.cta-box h2{ font-size:clamp(26px,4vw,42px); font-weight:900; margin:0 0 12px; letter-spacing:-.03em; }
.cta-box p{ color:var(--muted); margin:0 0 26px; }
.foot{ border-top:1px solid var(--line); margin-top:30px; padding:40px 0; }
.foot-in{ display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.foot-brand{ max-width:300px; } .foot-brand p{ color:var(--dim); font-size:14px; line-height:1.6; margin:10px 0 0; }
.foot-cols{ display:flex; gap:50px; flex-wrap:wrap; }
.foot-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin:0 0 12px; }
.foot-col a{ display:block; color:var(--muted); font-size:14px; font-weight:600; margin:8px 0; transition:.13s; }
.foot-col a:hover{ color:#fff; }
.foot-soc{ display:flex; gap:10px; margin-top:14px; }
.foot-soc a{ width:40px;height:40px; border-radius:11px; display:grid; place-items:center; background:#ffffff0a; border:1px solid var(--line2); transition:.15s; }
.foot-soc a:hover{ background:var(--sc,var(--acc)); border-color:transparent; transform:translateY(-2px); }
.foot-soc svg{ width:20px;height:20px; fill:#cdd6ff; }
.foot-soc a:hover svg{ fill:#fff; }
.foot-bottom{ text-align:center; color:var(--dim); font-size:13px; margin-top:30px; padding-top:20px; border-top:1px solid var(--line); }

@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .nav-links.open{ display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; background:var(--bg2); border-bottom:1px solid var(--line); padding:10px; }
  .lbx-row{ grid-template-columns:44px 1fr 64px 64px; }
  .lbx-row .hide-sm{ display:none; }
}