/* ============================================================
   Menangbet88 — style.css
   Tema: kasino premium (merah · emas · hijau · biru · hitam)
   Responsif untuk semua perangkat (320px+)
   ============================================================ */

:root{
  --c-bg:        #0f0a13;
  --c-bg-2:      #160e1c;
  --c-surface:   #1c1324;
  --c-surface-2: #241831;
  --c-line:      rgba(255,255,255,.09);
  --c-red:       #e0283a;
  --c-red-2:     #ff4d5e;
  --c-gold:      #f6b93b;
  --c-gold-2:    #ffd66b;
  --c-green:     #21b573;
  --c-green-2:   #3ddc97;
  --c-blue:      #4c8dff;
  --c-blue-2:    #7db1ff;
  --c-text:      #f8f5f0;
  --c-muted:     #b6aab9;
  --c-dark:      #12060c;
  --radius:      18px;
  --radius-sm:   12px;
  --shadow:      0 14px 40px rgba(0,0,0,.45);
  --grad-gold:   linear-gradient(135deg,#ffd66b 0%,#f6b93b 55%,#e59b1a 100%);
  --grad-red:    linear-gradient(135deg,#ff4d5e 0%,#c11427 100%);
  --grad-green:  linear-gradient(135deg,#3ddc97 0%,#148f5a 100%);
  --header-h:    72px;
  --float-h:     72px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-bottom:calc(var(--float-h) + 24px);
  -webkit-text-size-adjust:100%;
}
html,body{ overflow-x:clip; max-width:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.7;
  color:var(--c-text);
  background:
    radial-gradient(1100px 500px at 85% -5%, rgba(224,40,58,.16), transparent 60%),
    radial-gradient(900px 480px at -10% 12%, rgba(246,185,59,.10), transparent 55%),
    radial-gradient(800px 500px at 50% 110%, rgba(33,181,115,.10), transparent 60%),
    var(--c-bg);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-gold-2); text-decoration:none; }
a:hover{ color:#fff; }
p{ margin:0 0 1em; }
ul,ol{ padding-left:1.3em; }
h1,h2,h3,h4{ line-height:1.25; margin:0 0 .5em; font-weight:800; letter-spacing:.2px; }
h1{ font-size:clamp(1.8rem, 4vw, 2.7rem); }
h2{ font-size:clamp(1.45rem, 3vw, 2.05rem); }
h3{ font-size:clamp(1.15rem, 2.2vw, 1.35rem); }
h4{ font-size:1.05rem; }
small{ font-size:.85em; }

.container{ width:min(1160px, 100% - 2.5rem); margin-inline:auto; }
.section{ padding:clamp(2.6rem, 6vw, 4.6rem) 0; }
.section--alt{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.045));
  border-block:1px solid var(--c-line);
}
.section-head{ max-width:720px; margin:0 auto 2.2rem; text-align:center; }
.section-head--left{ margin-inline:0; text-align:left; }
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.16em;
  color:var(--c-gold-2);
  background:rgba(246,185,59,.10);
  border:1px solid rgba(246,185,59,.35);
  padding:.32rem .8rem; border-radius:999px; margin-bottom:.9rem;
}
.kicker--red{ color:#ffb3bb; background:rgba(224,40,58,.12); border-color:rgba(224,40,58,.45); }
.kicker--green{ color:#a9f0cd; background:rgba(33,181,115,.12); border-color:rgba(33,181,115,.45); }
.kicker--blue{ color:#bcd7ff; background:rgba(76,141,255,.12); border-color:rgba(76,141,255,.45); }
.section-head p{ color:var(--c-muted); margin:0; }

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-size:.95rem; font-weight:800; letter-spacing:.3px;
  padding:.72rem 1.5rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  white-space:nowrap; text-align:center;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); color:inherit; }
.btn--gold{ background:var(--grad-gold); color:#3a2301; box-shadow:0 8px 26px rgba(246,185,59,.35); }
.btn--red{ background:var(--grad-red); color:#fff; box-shadow:0 8px 26px rgba(224,40,58,.35); }
.btn--green{ background:var(--grad-green); color:#04281a; box-shadow:0 8px 26px rgba(33,181,115,.30); }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.28); color:var(--c-text); }
.btn--ghost:hover{ border-color:var(--c-gold); color:var(--c-gold-2); }
.btn--sm{ font-size:.85rem; padding:.5rem 1.1rem; }
.btn--block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:120;
  background:rgba(15,10,19,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line);
}
.site-header::after{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg, var(--c-red) 0%, var(--c-gold) 35%, var(--c-green) 70%, var(--c-blue) 100%);
}
.header-inner{ display:flex; align-items:center; gap:1rem; min-height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; font-size:1.22rem; color:var(--c-text); }
.brand:hover{ color:var(--c-text); }
.brand svg{ width:40px; height:40px; flex:none; }
.brand b{ color:var(--c-gold-2); }
.main-nav{ margin-left:auto; }
.main-nav ul{ display:flex; gap:.25rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.main-nav a{
  display:block; padding:.55rem .8rem; border-radius:10px;
  font-size:.92rem; font-weight:600; color:var(--c-muted);
}
.main-nav a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.main-nav a[aria-current="page"]{ color:var(--c-gold-2); background:rgba(246,185,59,.10); }
.header-actions{ display:flex; align-items:center; gap:.55rem; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid var(--c-line);
  color:var(--c-text); cursor:pointer; transition:background .2s;
}
.icon-btn:hover{ background:rgba(255,255,255,.12); }
.icon-btn svg{ width:20px; height:20px; }
.nav-toggle{ display:none; }

.badge-18{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:26px; padding:0 .45rem;
  border-radius:8px; font-size:.75rem; font-weight:900; letter-spacing:.5px;
  color:#ffd9de; background:rgba(224,40,58,.28); border:1px solid rgba(224,40,58,.6);
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:clip;
  padding:clamp(3rem, 7vw, 5.5rem) 0 clamp(2.6rem, 6vw, 4.4rem);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(640px 320px at 80% 20%, rgba(224,40,58,.22), transparent 65%),
    radial-gradient(520px 300px at 12% 80%, rgba(246,185,59,.14), transparent 60%);
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.6rem, 4vw, 3.2rem); align-items:center;
}
.hero-badges{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.15rem; }
.hero-badges .chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; padding:.34rem .75rem; border-radius:999px; border:1px solid var(--c-line); background:rgba(255,255,255,.05); color:var(--c-muted); }
.hero-badges .chip svg{ width:14px; height:14px; }
.hero h1 span{ color:var(--c-gold-2); }
.hero h1 em{ font-style:normal; color:var(--c-red-2); }
.hero-sub{ color:var(--c-muted); font-size:1.04rem; max-width:56ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.5rem 0 1.3rem; }
.hero-note{ font-size:.82rem; color:var(--c-muted); }
.hero-note a{ text-decoration:underline; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.stat-pill{
  display:flex; flex-direction:column; gap:.1rem;
  background:rgba(255,255,255,.04); border:1px solid var(--c-line);
  border-radius:14px; padding:.65rem 1rem; min-width:128px;
}
.stat-pill b{ font-size:1.06rem; color:var(--c-gold-2); }
.stat-pill span{ font-size:.76rem; color:var(--c-muted); }
.hero-figure{ position:relative; }
.hero-figure img{
  width:100%; border-radius:22px; border:1px solid rgba(246,185,59,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 6px rgba(246,185,59,.06);
  object-fit:cover; aspect-ratio:4/3;
}
.hero-figure figcaption{ font-size:.75rem; color:var(--c-muted); margin-top:.5rem; text-align:center; }
.hero-glow{
  position:absolute; inset:auto -12% -14% -12%; height:60%; z-index:-1;
  background:radial-gradient(closest-side, rgba(224,40,58,.30), transparent);
  filter:blur(10px);
}

/* ---------- Kartu umum ---------- */
.card{
  background:linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow);
}
.grid{ display:grid; gap:1.3rem; }
.grid--2{ grid-template-columns:repeat(2, 1fr); }
.grid--3{ grid-template-columns:repeat(3, 1fr); }
.grid--4{ grid-template-columns:repeat(4, 1fr); }

/* ---------- Kartu kategori permainan ---------- */
.game-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.6rem;
  transition:transform .2s ease, border-color .2s ease;
}
.game-card:hover{ transform:translateY(-4px); border-color:rgba(246,185,59,.5); }
.game-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:calc(var(--radius) - 6px); }
.game-card h3{ margin:0; }
.game-card p{ color:var(--c-muted); font-size:.92rem; margin:0; flex:1; }
.game-card .card-link{ font-weight:700; font-size:.9rem; }
.game-tag{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .65rem; border-radius:999px; color:#241000;
  background:var(--grad-gold); box-shadow:0 4px 14px rgba(0,0,0,.4);
}

/* ---------- Kartu promo ---------- */
.promo-card{ display:flex; flex-direction:column; gap:.75rem; }
.promo-ribbon{
  display:inline-flex; width:fit-content; font-size:.75rem; font-weight:800;
  padding:.26rem .7rem; border-radius:999px; letter-spacing:.04em;
}
.promo-ribbon--new{ color:#04281a; background:var(--grad-green); }
.promo-ribbon--hot{ color:#2b0207; background:var(--grad-red); color:#fff; }
.promo-ribbon--reg{ color:#241000; background:var(--grad-gold); }
.promo-card h3{ margin:0; }
.promo-card p{ color:var(--c-muted); font-size:.92rem; margin:0; flex:1; }
.promo-meta{ display:flex; flex-wrap:wrap; gap:.45rem; }
.promo-meta span{ font-size:.74rem; font-weight:700; color:var(--c-muted); border:1px dashed rgba(255,255,255,.22); padding:.2rem .6rem; border-radius:8px; }

/* ---------- Kartu keunggulan ---------- */
.feature-card{ display:flex; gap:1rem; align-items:flex-start; }
.feature-ico{
  flex:none; width:52px; height:52px; border-radius:16px;
  display:grid; place-items:center; font-size:1.4rem;
}
.feature-ico svg{ width:26px; height:26px; }
.feature-ico--red{ background:rgba(224,40,58,.16); color:#ff8b97; border:1px solid rgba(224,40,58,.4); }
.feature-ico--green{ background:rgba(33,181,115,.16); color:#6fe3ae; border:1px solid rgba(33,181,115,.4); }
.feature-ico--blue{ background:rgba(76,141,255,.16); color:#9cc3ff; border:1px solid rgba(76,141,255,.4); }
.feature-ico--gold{ background:rgba(246,185,59,.16); color:#ffd66b; border:1px solid rgba(246,185,59,.4); }
.feature-card h3{ margin:0 0 .25rem; font-size:1.06rem; }
.feature-card p{ margin:0; color:var(--c-muted); font-size:.92rem; }

/* ---------- Testimoni ---------- */
.testi-card{ display:flex; flex-direction:column; gap:.9rem; }
.testi-stars{ color:var(--c-gold); letter-spacing:2px; font-size:.95rem; }
.testi-card blockquote{ margin:0; font-size:.95rem; color:#e9e2ea; flex:1; }
.testi-user{ display:flex; align-items:center; gap:.7rem; }
.avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:900; font-size:.95rem; color:#241000;
}
.avatar--r{ background:var(--grad-red); color:#fff; }
.avatar--g{ background:var(--grad-green); }
.avatar--b{ background:linear-gradient(135deg,#7db1ff,#2f6fe0); color:#fff; }
.avatar--y{ background:var(--grad-gold); }
.testi-user b{ display:block; font-size:.92rem; }
.testi-user small{ color:var(--c-muted); }
.testi-note{ text-align:center; color:var(--c-muted); font-size:.8rem; margin-top:1.2rem; }

/* ---------- Bagian pembayarar & mobile ---------- */
.pay-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.8rem; }
.pay-chip{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  background:rgba(255,255,255,.05); border:1px solid var(--c-line);
  border-radius:12px; padding:.85rem .6rem; font-weight:800; font-size:.9rem;
}
.pay-chip small{ display:block; font-weight:600; color:var(--c-muted); font-size:.68rem; }
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem, 4vw, 3rem); align-items:center;
}
.split img{ border-radius:var(--radius); border:1px solid var(--c-line); box-shadow:var(--shadow); }
.checklist{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.7rem; }
.checklist li{ display:flex; gap:.6rem; align-items:flex-start; color:#e9e2ea; font-size:.95rem; }
.checklist svg{ width:20px; height:20px; flex:none; margin-top:.18rem; }

/* ---------- Pencarian & tag ---------- */
.search-bar{ display:flex; gap:.6rem; max-width:640px; margin:0 auto; }
.search-bar input{
  flex:1; min-width:0; font-family:inherit; font-size:1rem; color:var(--c-text);
  background:rgba(255,255,255,.06); border:1px solid var(--c-line);
  border-radius:999px; padding:.78rem 1.2rem; outline:none;
}
.search-bar input:focus{ border-color:var(--c-gold); box-shadow:0 0 0 3px rgba(246,185,59,.18); }
.tag-cloud{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:1.4rem; }
.tag-cloud a{
  font-size:.83rem; font-weight:700; padding:.4rem .95rem; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--c-line); color:var(--c-muted);
  transition:all .18s ease;
}
.tag-cloud a:hover{ color:#241000; background:var(--grad-gold); border-color:transparent; transform:translateY(-2px); }

/* ---------- Kuis pemilih permainan ---------- */
.quiz-box{ max-width:720px; margin:0 auto; }
.quiz-progress{ display:flex; gap:.4rem; justify-content:center; margin-bottom:1.3rem; }
.quiz-progress span{ width:44px; height:6px; border-radius:99px; background:rgba(255,255,255,.12); }
.quiz-progress span.on{ background:var(--grad-gold); }
.quiz-q{ text-align:center; font-size:1.15rem; font-weight:800; margin-bottom:1.2rem; }
.quiz-opts{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.8rem; }
.quiz-opt{
  font-family:inherit; font-size:.95rem; font-weight:700; color:var(--c-text);
  background:rgba(255,255,255,.05); border:1px solid var(--c-line);
  border-radius:14px; padding:1rem; cursor:pointer; transition:all .18s ease;
}
.quiz-opt:hover{ border-color:var(--c-gold); background:rgba(246,185,59,.08); transform:translateY(-2px); }
.quiz-result{ text-align:center; }
.quiz-result .feature-ico{ margin:0 auto .9rem; width:64px; height:64px; }
.quiz-result h3{ margin-bottom:.3rem; }
.quiz-result p{ color:var(--c-muted); }

/* ---------- FAQ ---------- */
.faq-list{ display:grid; gap:.8rem; max-width:820px; margin:0 auto; }
details.faq{
  background:linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  border:1px solid var(--c-line); border-radius:14px; overflow:hidden;
}
details.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.8rem;
  font-weight:700; padding:1rem 1.2rem; font-size:.98rem;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::before{
  content:"+"; flex:none; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; font-weight:900; color:#241000;
  background:var(--grad-gold); transition:transform .2s;
}
details.faq[open] summary::before{ content:"–"; }
details.faq[open] summary{ color:var(--c-gold-2); }
details.faq .faq-body{ padding:0 1.2rem 1.1rem; color:var(--c-muted); font-size:.93rem; }
details.faq .faq-body a{ text-decoration:underline; }

/* ---------- Artikel ---------- */
.article-wrap{ max-width:800px; margin-inline:auto; }
.article-meta{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; font-size:.8rem; color:var(--c-muted); margin-bottom:1rem; }
.article-meta .dot{ opacity:.5; }
.article-figure img{ border-radius:var(--radius); border:1px solid var(--c-line); }
.article-figure figcaption{ font-size:.78rem; color:var(--c-muted); margin-top:.55rem; text-align:center; }
.prose h2{ margin-top:1.6em; padding-left:.7rem; border-left:4px solid var(--c-gold); }
.prose h3{ margin-top:1.3em; color:var(--c-gold-2); }
.prose p{ color:#e9e2ea; }
.prose ul li,.prose ol li{ margin-bottom:.4em; color:#e9e2ea; }
.prose strong{ color:#fff; }
.prose blockquote{
  margin:1.4em 0; padding:1em 1.3em; border-radius:14px;
  background:rgba(33,181,115,.08); border:1px solid rgba(33,181,115,.35);
  color:#d7f3e5; font-style:italic;
}
.prose table{ width:100%; border-collapse:collapse; font-size:.9rem; margin:1.2em 0; }
.prose th,.prose td{ padding:.65rem .8rem; border:1px solid var(--c-line); text-align:left; }
.prose th{ background:rgba(246,185,59,.12); color:var(--c-gold-2); font-size:.85rem; }
.prose td{ color:#e9e2ea; }
.notice{
  display:flex; gap:.7rem; align-items:flex-start;
  border-radius:14px; padding:.95rem 1.1rem; font-size:.88rem; margin:1.2em 0;
}
.notice svg{ width:20px; height:20px; flex:none; margin-top:.15rem; }
.notice--info{ background:rgba(76,141,255,.10); border:1px solid rgba(76,141,255,.4); color:#cfe2ff; }
.notice--warn{ background:rgba(246,185,59,.10); border:1px solid rgba(246,185,59,.45); color:#ffe9bd; }
.notice--danger{ background:rgba(224,40,58,.10); border:1px solid rgba(224,40,58,.45); color:#ffd6db; }
.notice--green{ background:rgba(33,181,115,.10); border:1px solid rgba(33,181,115,.45); color:#d2f4e2; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ padding:1.1rem 0 0; font-size:.82rem; color:var(--c-muted); }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; }
.breadcrumb li+li::before{ content:"›"; margin-right:.35rem; opacity:.5; }
.breadcrumb a{ color:var(--c-muted); }
.breadcrumb a:hover{ color:var(--c-gold-2); }
.breadcrumb [aria-current]{ color:var(--c-gold-2); }

/* ---------- Formulir ---------- */
.auth-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.4rem, 4vw, 2.6rem); align-items:start; }
.form-card{ padding:clamp(1.4rem, 3.5vw, 2.2rem); }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-size:.86rem; font-weight:700; margin-bottom:.4rem; }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:.98rem; color:var(--c-text);
  background:rgba(255,255,255,.06); border:1px solid var(--c-line);
  border-radius:12px; padding:.78rem 1rem; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--c-gold); box-shadow:0 0 0 3px rgba(246,185,59,.18);
}
.field .hint{ font-size:.75rem; color:var(--c-muted); margin-top:.3rem; }
.field .err{ font-size:.75rem; color:#ff8b97; margin-top:.3rem; display:none; }
.field.invalid input{ border-color:var(--c-red); }
.field.invalid .err{ display:block; }
.check-row{ display:flex; gap:.6rem; align-items:flex-start; font-size:.83rem; color:var(--c-muted); margin:1.1rem 0; }
.check-row input{ width:18px; height:18px; margin-top:.15rem; accent-color:var(--c-gold); }
.form-note{ font-size:.78rem; color:var(--c-muted); margin-top:.9rem; text-align:center; }
.steps-list{ list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:1rem; }
.steps-list li{
  counter-increment:step; position:relative; padding-left:3.4rem;
  color:#e9e2ea; font-size:.93rem;
}
.steps-list li::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:2.4rem; height:2.4rem; border-radius:12px; display:grid; place-items:center;
  font-weight:900; color:#241000; background:var(--grad-gold);
}
.steps-list b{ display:block; color:#fff; }

/* ---------- Footer ---------- */
.site-footer{
  margin-top:3rem; background:var(--c-dark);
  border-top:1px solid rgba(246,185,59,.25);
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem;
  padding:3rem 0 2rem;
}
.footer-brand p{ color:var(--c-muted); font-size:.88rem; }
.footer-badges{ display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.footer-col h4{ color:var(--c-gold-2); font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer-col a{ color:var(--c-muted); font-size:.9rem; }
.footer-col a:hover{ color:var(--c-gold-2); }
.footer-pays{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.footer-pays span{ font-size:.72rem; font-weight:700; padding:.24rem .6rem; border-radius:8px; border:1px solid var(--c-line); color:var(--c-muted); }
.footer-disclaimer{
  border-top:1px solid var(--c-line); padding:1.4rem 0;
  font-size:.78rem; color:#8f8393; line-height:1.6;
}
.footer-bottom{
  border-top:1px solid var(--c-line);
  padding:1.1rem 0 calc(var(--float-h) + 1.6rem);
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between;
  font-size:.8rem; color:var(--c-muted);
}
.footer-bottom .links{ display:flex; gap:1rem; flex-wrap:wrap; }
.footer-bottom a{ color:var(--c-muted); }
.footer-bottom a:hover{ color:var(--c-gold-2); }

/* ---------- Tombol melayang bawah (gaya slot) ---------- */
.float-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  padding:.55rem max(.8rem, env(safe-area-inset-left)) calc(.55rem + env(safe-area-inset-bottom));
  background:linear-gradient(90deg, rgba(18,6,12,.97), rgba(31,10,16,.97));
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg, var(--c-red), var(--c-gold), var(--c-green)) 1;
  box-shadow:0 -12px 34px rgba(0,0,0,.55);
  overflow:hidden;
}
.float-reels{ display:flex; gap:.3rem; margin-right:.2rem; }
.reel{
  width:34px; height:34px; overflow:hidden; border-radius:8px;
  background:linear-gradient(180deg,#fffdf5,#ffe9b3);
  border:2px solid #a86e12; box-shadow:inset 0 -4px 8px rgba(120,70,0,.25);
}
.reel__strip{ display:flex; flex-direction:column; animation:reelspin 1.5s steps(6) infinite; }
.reel__strip span{ height:30px; line-height:30px; text-align:center; font-size:17px; }
.reel:nth-child(2) .reel__strip{ animation-duration:1.9s; }
.reel:nth-child(3) .reel__strip{ animation-duration:1.2s; }
@keyframes reelspin{ from{ transform:translateY(0); } to{ transform:translateY(-180px); } }
.float-cta__btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:132px; padding:.68rem 1.3rem; border-radius:12px;
  font-weight:900; font-size:.98rem; letter-spacing:.06em;
  border:2px solid rgba(0,0,0,.35);
  transition:transform .15s ease, filter .2s ease;
}
.float-cta__btn:hover{ transform:translateY(-2px) scale(1.03); filter:brightness(1.08); }
.float-cta__btn--gold{ background:var(--grad-gold); color:#3a2301; box-shadow:0 0 22px rgba(246,185,59,.55), inset 0 2px 0 rgba(255,255,255,.5); }
.float-cta__btn--green{ background:var(--grad-green); color:#04281a; box-shadow:0 0 22px rgba(33,181,115,.5), inset 0 2px 0 rgba(255,255,255,.4); }
.float-cta__btn--gold::before{ content:"🎰"; margin-right:.4rem; }
.float-cta__btn--green::before{ content:"🔐"; margin-right:.4rem; }
.float-cta .mini18{
  flex:none; font-size:.68rem; font-weight:900; color:#ffb3bb;
  border:1px solid rgba(224,40,58,.6); border-radius:6px; padding:.1rem .35rem;
}
/* koin emas */
.coin{
  position:absolute; bottom:-16px; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff3c4, #f6b93b 55%, #9c6d0b 100%);
  border:1.5px solid #8a5f08;
  box-shadow:0 0 10px rgba(246,185,59,.7);
  animation:coinrise 2.6s ease-in infinite;
  pointer-events:none;
}
.coin::after{ content:"Rp"; position:absolute; inset:0; display:grid; place-items:center; font-size:7px; font-weight:900; color:#7a5205; }
.coin.c1{ left:12%; animation-delay:0s; }
.coin.c2{ left:24%; animation-delay:.9s; animation-duration:3.1s; width:11px; height:11px; }
.coin.c3{ left:47%; animation-delay:1.6s; }
.coin.c4{ left:68%; animation-delay:.4s; animation-duration:2.9s; width:12px; height:12px; }
.coin.c5{ left:82%; animation-delay:1.2s; }
.coin.c6{ left:92%; animation-delay:2s; width:10px; height:10px; }
@keyframes coinrise{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translateY(-92px) rotate(340deg); opacity:0; }
}

/* ---------- Overlay pencarian ---------- */
.search-overlay{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(10,6,14,.88); backdrop-filter:blur(8px);
  padding:clamp(1rem, 8vh, 5rem) 1rem; overflow:auto;
}
.search-overlay.open{ display:block; }
.search-panel{ max-width:680px; margin-inline:auto; }
.search-panel h2{ margin-bottom:1rem; }
.search-panel .search-bar{ margin:0; }
.search-results{ margin-top:1.4rem; display:grid; gap:.7rem; }
.search-item{
  display:block; padding:.9rem 1.1rem; border-radius:14px;
  background:var(--c-surface); border:1px solid var(--c-line);
}
.search-item:hover{ border-color:var(--c-gold); }
.search-item b{ display:block; color:var(--c-gold-2); font-size:.95rem; }
.search-item span{ font-size:.82rem; color:var(--c-muted); }
.search-close{ float:right; margin-top:.5rem; }
.search-empty{ color:var(--c-muted); text-align:center; padding:1.2rem; }

/* ---------- Utilitas ---------- */
.text-center{ text-align:center; }
.mt-1{ margin-top:.6rem; } .mt-2{ margin-top:1.2rem; } .mt-3{ margin-top:1.8rem; } .mt-4{ margin-top:2.6rem; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
.skip-link{
  position:absolute; left:-999px; top:0; z-index:500;
  background:var(--c-gold); color:#241000; padding:.6rem 1rem; border-radius:0 0 10px 0; font-weight:800;
}
.skip-link:focus{ left:0; }

/* ---------- Responsif ---------- */
@media (max-width: 1080px){
  .grid--4{ grid-template-columns:repeat(2, 1fr); }
  .pay-grid{ grid-template-columns:repeat(3, 1fr); }
  .main-nav a{ padding:.5rem .6rem; font-size:.86rem; }
}
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-figure{ max-width:560px; }
  .split{ grid-template-columns:1fr; }
  .split img{ order:-1; }
  .auth-grid{ grid-template-columns:1fr; }
  .grid--3{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  /* navigasi mobile */
  .nav-toggle{ display:inline-flex; }
  .main-nav{
    position:fixed; top:0; right:0; bottom:0; z-index:250;
    width:min(320px, 84vw); margin:0;
    background:var(--c-bg-2); border-left:1px solid var(--c-line);
    padding:5rem 1.2rem 2rem; transform:translateX(105%);
    visibility:hidden;
    transition:transform .28s ease, visibility 0s .28s;
    overflow:auto;
  }
  .main-nav.open{ transform:none; visibility:visible; transition:transform .28s ease; box-shadow:-20px 0 60px rgba(0,0,0,.5); }
  .main-nav ul{ flex-direction:column; gap:.2rem; }
  .main-nav a{ font-size:1.02rem; padding:.75rem .9rem; }
  .nav-backdrop{ position:fixed; inset:0; z-index:240; background:rgba(0,0,0,.55); display:none; }
  .nav-backdrop.show{ display:block; }
  .header-actions .btn--sm.hide-md{ display:none; }
}
@media (max-width: 640px){
  body{ font-size:15.5px; }
  .grid--2, .grid--3{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns:repeat(2, 1fr); }
  .pay-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .hero-cta .btn{ flex:1 1 auto; }
  .quiz-opts{ grid-template-columns:1fr; }
  .hero-stats{ gap:.5rem; }
  .stat-pill{ min-width:104px; padding:.55rem .8rem; }
  .float-reels{ display:none; }
  .float-cta__btn{ min-width:118px; font-size:.92rem; padding:.62rem 1rem; }
  .prose table{ display:block; overflow-x:auto; white-space:nowrap; }
  .footer-bottom{ justify-content:center; text-align:center; }
}
@media (max-width: 400px){
  .grid--4{ grid-template-columns:1fr; }
  .pay-grid{ grid-template-columns:1fr; }
  .brand{ font-size:1.05rem; }
  .brand svg{ width:34px; height:34px; }
  .float-cta{ gap:.5rem; }
  .float-cta .mini18{ display:none; }
  .float-cta__btn{ min-width:104px; }
}

/* ---------- Gerak minimal ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .float-cta, .site-header, .search-overlay{ display:none !important; }
  body{ background:#fff; color:#000; }
}