/* style.css - CM8 LP3 (Neon Purple N2, Buttons C) */
/* Dark-first; supports [data-theme="light"] to enable light theme */

:root{
  /* core */
  --bg-900:#07060a;
  --bg-800:#0f0e13;
  --surface:#121217;
  --primary:#b34cff;
  --primary-600:#9a3bff;
  --secondary:#6f2be8;
  --accent:#7af0ff;
  --gold:#ffd27a;

  --text:#ffffff;
  --muted:#bfc3c8;
  --glass:rgba(255,255,255,0.03);

  --glow-1:0 0 10px rgba(179,76,255,0.22);
  --glow-2:0 0 22px rgba(111,43,232,0.14);

  --container:1200px;
  --pad:18px;
  --radius-sm:12px;
  --radius-pill:999px;

  --transition-fast:160ms;
  --transition-medium:320ms;
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  --lead-size:1.05rem;

  /* neon button variable for neon-btn style (Style B) */
  --neon: #b62cff;
}

/* Light theme */
body[data-theme="light"]{
  --bg-900:#f3f4f6;
  --bg-800:#eceef2;
  --surface:#ffffff;
  --primary:#7e4bff;
  --primary-600:#6b3dff;
  --secondary:#5a32c8;
  --accent:#00c8d6;
  --text:#0b1220;
  --muted:#4b5563;
  --glow-1:0 0 8px rgba(126,75,255,0.12);
  --glow-2:0 0 16px rgba(90,50,200,0.06);
}

/* resets & base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-family:var(--font-sans)}
body{
  margin:0; min-height:100vh;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-900),rgba(6,6,8,0.95) 85%);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{width:92%;max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Header (N2 solid dark) */
.header{
  position:sticky;top:0;z-index:1200;
  background:linear-gradient(90deg, rgba(7,6,10,0.96), rgba(15,12,18,0.96));
  border-bottom:1px solid rgba(255,255,255,0.03);
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
}
.header-container{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.logo img{width:140;transition:transform var(--transition-medium) ease}
.header-controls{display:flex;align-items:center;gap:10px}

/* Nav */
.navbar{display:flex;align-items:center;gap:12px}
.nav-list{list-style:none;display:flex;gap:16px;margin:0;padding:0;align-items:center}
.nav-link{padding:8px 12px;border-radius:10px;font-weight:700;color:var(--muted);font-size:0.95rem;transition:all var(--transition-medium) ease}
.nav-link:hover,.nav-link.active{
  color:var(--text);
  background:linear-gradient(90deg, rgba(179,76,255,0.06), rgba(111,43,232,0.04));
  box-shadow:var(--glow-1);
  transform:translateY(-3px);
}

/* nav toggle (mobile) */
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-weight:800;cursor:pointer;padding:8px 10px;border-radius:8px}
@media (max-width:992px){
  .nav-list{display:none}
  .nav-toggle{display:inline-flex}
}

/* Hero */
.hero{
  padding:110px 0 80px 0;text-align:center;
  background-image:linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.44)), url('/image/banner_CM.jpg');
  background-size:cover;background-position:center;position:relative;isolation:isolate;
}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(800px 320px at 50% 18%, rgba(179,76,255,0.06), transparent 18%),
  radial-gradient(1000px 360px at 10% 82%, rgba(111,43,232,0.03), transparent 20%)}
.hero h1{
  font-size:clamp(1.8rem,3.8vw,3.2rem);
  line-height:1.06;margin-bottom:12px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 6px 28px rgba(0,0,0,0.75);
  animation:neonPulse 3.6s ease-in-out infinite;
}
.lead{color:var(--muted);font-size:var(--lead-size);max-width:920px;margin:0 auto 20px}

/* Buttons - Style A (Register) and Style B (Login) */

/* Base btn */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 26px;border-radius:var(--radius-pill);font-weight:800;font-size:1rem;border:0;cursor:pointer;text-decoration:none;transition:transform var(--transition-medium) ease,box-shadow var(--transition-medium) ease;
}

/* Style A - primary (Register) */
.btn-primary{
  background:linear-gradient(90deg,var(--primary),var(--primary-600));
  color:#fff;box-shadow:var(--glow-1),0 10px 28px rgba(0,0,0,0.55);
}
.btn-primary:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--glow-1),var(--glow-2),0 22px 48px rgba(0,0,0,0.6)}
.btn-primary:active{transform:translateY(-3px)}
.btn-daftar{ /* alias if needed */ }

/* Style B - neon outline (Login) */
.neon-btn{
  display:inline-flex;align-items:center;justify-content:center;padding:12px 26px;border-radius:12px;font-weight:700;cursor:pointer;transition:all var(--transition-medium) ease;
}
.neon-btn.outline{
  background:transparent;border:2px solid rgba(255,255,255,0.06);color:var(--muted);
  box-shadow:inset 0 0 6px rgba(255,255,255,0.02);
}
.neon-btn.outline:hover{
  background:var(--neon);color:#fff;box-shadow:0 0 12px var(--neon),0 0 25px var(--neon);transform:translateY(-3px);
}

/* Ghost / WhatsApp */
.btn-ghost{background:transparent;border:0;color:var(--accent);padding:10px 14px;border-radius:12px}

/* Action buttons container */
.action-buttons{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}

/* Sections */
section{padding:72px 0}
.about{text-align:center}
.about h2{color:var(--secondary);font-size:clamp(1.4rem,2.6vw,2.2rem);margin-bottom:12px}
.about p{color:var(--muted);max-width:900px;margin:0 auto 12px}

/* Feature grid */
.feature-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:22px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 18px rgba(0,0,0,0.6);transition:transform var(--transition-medium) ease,box-shadow var(--transition-medium) ease}
.feature-card h3{color:var(--gold);margin-bottom:8px}
.feature-card p{color:var(--muted)}

/* Games */
.games{background:linear-gradient(90deg, rgba(10,10,12,0.98), rgba(16,10,20,0.98))}
.game-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.game-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);transition:transform var(--transition-medium) ease;overflow:hidden}
.game-card img{border-radius:10px}
.game-card h3{color:var(--secondary);margin:12px 0 8px}
.game-card p{color:var(--muted)}

/* CTA (promo) */
.cta{padding:60px 12px;border-radius:14px;margin:28px auto;background:linear-gradient(135deg, rgba(179,76,255,0.07), rgba(111,43,232,0.05));text-align:center}

/* Link alternatif */
.link-alternatif ul{list-style:none;padding-left:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.link-alternatif a{display:inline-block;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border:1px solid rgba(255,255,255,0.03);color:var(--muted)}

/* FAQ */
.faq-item{padding:20px 24px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.03)}
.faq-item h3{color:var(--primary)}

/* Footer */
.footer{background:linear-gradient(180deg, rgba(8,8,10,0.95), rgba(6,6,8,0.95));padding:36px 0;border-top:2px solid rgba(179,76,255,0.08);text-align:center}
.footer .container{display:flex;flex-direction:column;gap:12px;align-items:center}
.footer-nav a{color:var(--muted);margin:0 8px;font-weight:700}
.disclaimer{color:rgba(255,255,255,0.62);font-size:0.92rem}

/* Forms */
input,textarea,select{background:var(--surface);color:var(--text);border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:10px;width:100%}
input:focus,textarea:focus{outline:none;box-shadow:var(--glow-1);transform:translateY(-2px)}

/* Mobile sticky CTA (M2) */
.mobile-cta{
  display:none;
  position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;justify-content:center;gap:12px;padding:10px;border-radius:14px;background:linear-gradient(90deg, rgba(15,12,18,0.95), rgba(10,8,12,0.9));box-shadow:0 30px 80px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.04)
}
.mobile-cta .btn{padding:10px 14px;min-width:92px;border-radius:10px}
@media (max-width:768px){
  .mobile-cta{display:flex}
  .hero{padding:64px 0 48px 0}
  .nav-list{display:none}
  .nav-toggle{display:inline-flex}
  .logo img{width:120px}
  .header-cta{display:none} /* hide header CTAs on small */
}

/* theme toggle */
.theme-toggle{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;background:transparent;color:var(--primary);cursor:pointer}

/* animations */
@keyframes neonPulse{0%{filter:drop-shadow(var(--glow-1));transform:translateY(0)}50%{filter:drop-shadow(var(--glow-2));transform:translateY(-3px)}100%{filter:drop-shadow(var(--glow-1));transform:translateY(0)}}

/* accessibility */
a:focus{outline:2px dashed rgba(111,43,232,0.12);outline-offset:3px}
.btn:focus{outline:3px solid rgba(122,240,255,0.12);outline-offset:4px;border-radius:var(--radius-pill)}


/* Base variables for neon multi-color (C5) */
:root{
  --bg:#0a0a12; --text:#fff; --card-bg:rgba(255,255,255,0.06); --blur:12px;
  --neon1:#00ff88; --neon2:#b62cff; --neon3:#00bfff;
}

/* Body */
body{margin:0;font-family:Inter,system-ui;background:var(--bg);color:var(--text);transition:0.3s}

/* Header/Navbar */
.header{position:sticky;top:0;z-index:999;background:rgba(10,10,18,0.95);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.04);}
.header-container{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;}
.logo img{width:110px;transition:0.3s;}
.navbar ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;}
.navbar a{padding:6px 12px;color:rgba(255,255,255,0.7);border-radius:8px;text-decoration:none;transition:0.3s;}
.navbar a.active,.navbar a:hover{color:#fff;box-shadow:0 0 8px var(--neon1),0 0 12px var(--neon2);transform:translateY(-2px);}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.2rem;cursor:pointer;}
@media(max-width:992px){.navbar ul{display:none;}.nav-toggle{display:inline-flex;}}

/* Hero */
.hero{padding:100px 16px 60px;background:url('image/banner_CM.jpg') center/cover no-repeat;text-align:center;position:relative;}
.hero h1{font-size:clamp(1.8rem,3.8vw,2.8rem);background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--neon3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:neonPulse 3s infinite;}
.hero p{color:rgba(255,255,255,0.8);margin:16px 0 24px;max-width:800px;margin-left:auto;margin-right:auto;}
.action-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 26px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;transition:0.3s;}
.btn-primary{background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--neon3));color:#fff;border:none;}
.btn-primary:hover{box-shadow:0 0 12px var(--neon1),0 0 16px var(--neon2),0 0 20px var(--neon3);transform:translateY(-3px);}
.btn-login{background:transparent;border:2px solid var(--neon2);color:var(--neon2);}
.btn-login:hover{background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--neon3));color:#fff;box-shadow:0 0 12px var(--neon1),0 0 16px var(--neon2),0 0 20px var(--neon3);transform:translateY(-3px);}
.btn-ghost{background:transparent;border:none;color:var(--neon3);}
.btn:hover{transition:0.3s;}

/* Sections */
section{padding:72px 16px;}
.about,.features,.games,.faq,.link-alternatif{background:rgba(255,255,255,0.02);border-radius:12px;margin-bottom:32px;}
h2{font-size:2rem;margin-bottom:16px;color:var(--neon2);}
.feature-grid,.game-grid,.link-alternatif ul{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.feature-card,.game-card,.link-alternatif a{background:var(--card-bg);padding:16px;border-radius:14px;transition:0.3s;overflow:hidden;}
.feature-card:hover,.game-card:hover,.link-alternatif a:hover{transform:translateY(-6px);box-shadow:0 0 12px var(--neon1),0 0 14px var(--neon2),0 0 18px var(--neon3);}
.faq-item{padding:16px;border-radius:12px;background:var(--card-bg);margin-bottom:12px;}

/* Footer */
.footer{background:rgba(10,10,18,0.95);padding:32px;text-align:center;}
.footer-nav a{color:rgba(255,255,255,0.7);margin:0 6px;text-decoration:none;}
.footer-nav a:hover{color:var(--neon1);}

/* Mobile Sticky CTA */
.mobile-cta{display:none;position:fixed;bottom:12px;left:12px;right:12px;gap:10px;padding:12px;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(10px);z-index:999;}
.mobile-cta .btn{min-width:100px;}
@media(max-width:768px){.mobile-cta{display:flex;}}

/* Animations */
@keyframes neonPulse{0%,100%{text-shadow:0 0 6px var(--neon1),0 0 12px var(--neon2),0 0 18px var(--neon3);}50%{text-shadow:0 0 10px var(--neon1),0 0 20px var(--neon2),0 0 26px var(--neon3);}}