/* ============================================================
   Replaypoker — replaypoker.games
   Tema: Casino Premium (Hitam · Emas · Merah · Hijau · Biru · Putih)
   Responsif untuk semua perangkat
   ============================================================ */

:root{
  --bg:#0b0d13;
  --bg-2:#10131d;
  --surface:#161a28;
  --surface-2:#1c2133;
  --line:#272e45;
  --line-soft:#20263a;
  --text:#f1f4fb;
  --muted:#a3adc4;
  --gold:#f7c948;
  --gold-2:#e8a91f;
  --gold-dark:#9c6f10;
  --red:#ef4444;
  --red-2:#c2262c;
  --green:#34d399;
  --green-2:#22a370;
  --blue:#60a5fa;
  --blue-2:#3b82f6;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --radius-sm:10px;
  --container:1180px;
  --font:"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size:16px;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--gold)}
ul,ol{list-style:none}
strong{color:var(--white)}
::selection{background:var(--gold);color:#1a1400}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#1a1400;padding:10px 16px;border-radius:0 0 8px 0;z-index:2000;font-weight:700}
.skip-link:focus{left:0}

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:999px;font-weight:800;font-size:.95rem;
  letter-spacing:.3px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,#ffd75e,var(--gold-2));color:#2a1e00;box-shadow:0 6px 20px rgba(247,201,72,.35)}
.btn-gold:hover{color:#2a1e00;box-shadow:0 8px 26px rgba(247,201,72,.5);transform:translateY(-1px)}
.btn-green{background:linear-gradient(180deg,#3ddba0,var(--green-2));color:#03251a;box-shadow:0 6px 20px rgba(52,211,153,.3)}
.btn-green:hover{color:#03251a;box-shadow:0 8px 26px rgba(52,211,153,.45);transform:translateY(-1px)}
.btn-red{background:linear-gradient(180deg,#f66266,var(--red-2));color:#fff;box-shadow:0 6px 20px rgba(239,68,68,.3)}
.btn-red:hover{color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:8px 18px;font-size:.85rem}
.btn-lg{padding:15px 34px;font-size:1.05rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(11,13,19,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;font-size:1.35rem;font-weight:900;color:var(--white);letter-spacing:.5px}
.brand:hover{color:var(--white)}
.brand svg{width:34px;height:34px;flex:none}
.brand b{color:var(--gold)}
.brand .brand-dot{color:var(--red)}

.main-nav{margin-left:12px}
.main-nav ul{display:flex;gap:4px;flex-wrap:wrap}
.main-nav a{
  display:block;padding:9px 14px;border-radius:10px;color:var(--muted);
  font-weight:600;font-size:.93rem;
}
.main-nav a:hover{color:var(--white);background:var(--surface-2)}
.main-nav a.active{color:var(--gold);background:rgba(247,201,72,.09)}

.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.searchbox{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 14px;min-width:220px}
.searchbox input{background:transparent;border:0;outline:0;color:var(--text);font-size:.88rem;width:100%;min-width:0}
.searchbox input::placeholder{color:#6b7590}
.searchbox button{background:var(--gold);border:0;border-radius:999px;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.searchbox button svg{width:15px;height:15px;stroke:#2a1e00}
.nav-toggle{display:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;width:42px;height:42px;color:var(--text);font-size:1.2rem;cursor:pointer}

/* ---------- Kicker & judul seksi ---------- */
.section{padding:72px 0}
.section--alt{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.kicker{
  display:inline-flex;align-items:center;gap:8px;color:var(--gold);
  font-weight:800;font-size:.8rem;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:12px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.section__title{font-size:clamp(1.55rem,3.2vw,2.15rem);line-height:1.25;color:var(--white);margin-bottom:14px;font-weight:800}
.section__title em{color:var(--gold);font-style:normal}
.section__lead{color:var(--muted);max-width:760px;margin-bottom:36px;font-size:1.02rem}
.section__head{margin-bottom:36px}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 85% -10%,rgba(239,68,68,.16),transparent 60%),
    radial-gradient(700px 380px at -5% 110%,rgba(247,201,72,.12),transparent 60%),
    linear-gradient(160deg,#131727 0%,#0c0f18 55%,#12060b 100%);
  border-bottom:1px solid var(--line-soft);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.022) 0 2px,transparent 2px 9px);
}
.hero__inner{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;padding:84px 0 90px;position:relative;z-index:2}
.hero__badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.pill-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.4px;border:1px solid var(--line);
  background:rgba(22,26,40,.7);color:var(--muted);
}
.pill-badge.age{border-color:rgba(239,68,68,.5);color:#ff8f93;font-weight:800}
.pill-badge.rg{border-color:rgba(52,211,153,.45);color:#6fe3b4}
.hero h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.18;color:var(--white);margin-bottom:18px;font-weight:900}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__lead{color:var(--muted);font-size:1.06rem;max-width:560px;margin-bottom:22px}
.hero__points{display:grid;gap:10px;margin-bottom:30px}
.hero__points li{display:flex;gap:10px;align-items:flex-start;color:#cdd5e6;font-size:.95rem}
.hero__points .tick{color:var(--green);font-weight:900;flex:none}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero__note{font-size:.82rem;color:#7c869e}
.hero__media{position:relative}
.hero__media .frame{
  border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 6px rgba(247,201,72,.05);
}
.hero__media img{width:100%;object-fit:cover}
.hero-chip{
  position:absolute;background:rgba(20,24,38,.92);border:1px solid var(--line);
  border-radius:12px;padding:9px 14px;font-size:.8rem;font-weight:700;color:var(--text);
  box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;
}
.hero-chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;justify-content:center}
.hero-chips .chip{
  flex:1;min-width:130px;text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;
}
.hero-chips .chip b{display:block;color:var(--gold);font-size:1.15rem}
.hero-chips .chip span{font-size:.78rem;color:var(--muted)}

/* ---------- Kartu umum ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--gold-dark);box-shadow:var(--shadow)}
.card__icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:16px;background:rgba(247,201,72,.1);border:1px solid rgba(247,201,72,.25);
}
.card__icon.ic-green{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3)}
.card__icon.ic-red{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.card__icon.ic-blue{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.3)}
.card h3{color:var(--white);font-size:1.06rem;margin-bottom:9px}
.card p{color:var(--muted);font-size:.92rem}

/* ---------- Kartu promo ---------- */
.promo-card{position:relative;overflow:hidden;display:flex;flex-direction:column}
.promo-card .ribbon{
  position:absolute;top:16px;right:-34px;transform:rotate(40deg);
  background:linear-gradient(180deg,#ffd75e,var(--gold-2));color:#2a1e00;
  font-size:.68rem;font-weight:900;letter-spacing:1.5px;padding:5px 40px;
}
.promo-card .p-icon{font-size:1.9rem;margin-bottom:12px}
.promo-card h3{margin-bottom:6px}
.promo-card .p-sub{color:var(--gold);font-size:.86rem;font-weight:700;margin-bottom:10px}
.promo-card p{flex:1}
.promo-card .p-facts{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.p-facts span{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.promo-card .p-link{font-weight:800;font-size:.9rem}

/* ---------- Split media/teks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split .media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.split .media img{width:100%;object-fit:cover}
.feature-list{display:grid;gap:16px}
.feature-list li{display:flex;gap:14px;align-items:flex-start}
.feature-list .f-ico{
  width:42px;height:42px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);font-size:1.15rem;
}
.feature-list b{display:block;color:var(--white);margin-bottom:2px;font-size:.98rem}
.feature-list p{color:var(--muted);font-size:.9rem}

/* ---------- Metode pembayaran (informatif) ---------- */
.pay-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pay-chips span{
  padding:9px 18px;border-radius:12px;border:1px dashed var(--line);
  background:var(--surface);color:#cdd5e6;font-weight:700;font-size:.88rem;display:inline-flex;gap:8px;align-items:center;
}
.pay-note{font-size:.82rem;color:#7c869e;margin-top:14px;max-width:560px}

/* ---------- Testimoni ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.testi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.testi .stars{color:var(--gold);letter-spacing:3px;margin-bottom:12px;font-size:.95rem}
.testi p{color:#cdd5e6;font-size:.92rem;font-style:italic;margin-bottom:16px}
.testi .who{display:flex;align-items:center;gap:12px}
.avatar{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.95rem;color:#1a1400;flex:none;
}
.av-gold{background:linear-gradient(135deg,#ffd75e,var(--gold-2))}
.av-green{background:linear-gradient(135deg,#5ce0ab,#1f9e6e);color:#03251a}
.av-red{background:linear-gradient(135deg,#ff8f93,#c2262c);color:#fff}
.av-blue{background:linear-gradient(135deg,#93c5fd,#3b82f6);color:#06203f}
.testi .who b{color:var(--white);font-size:.92rem;display:block}
.testi .who span{color:var(--muted);font-size:.78rem}
.testi-note{font-size:.8rem;color:#7c869e;margin-top:18px}

/* ---------- Kalkulator ---------- */
.calc-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:start}
.calc-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.calc-grid{display:grid;gap:18px}
.field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:7px;color:#cdd5e6}
.field input,.field select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--text);font-size:.95rem;outline:none;
}
.field input:focus,.field select:focus{border-color:var(--gold)}
.calc-result{background:linear-gradient(160deg,#1b2033,#141826);border:1px solid var(--gold-dark);border-radius:var(--radius);padding:28px}
.calc-result h3{color:var(--gold);margin-bottom:16px;font-size:1.05rem}
.calc-out{display:grid;gap:12px}
.calc-out .row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:rgba(247,201,72,.06);border:1px solid rgba(247,201,72,.2);
  padding:12px 16px;border-radius:12px;font-size:.92rem;color:#cdd5e6;flex-wrap:wrap;
}
.calc-out .row b{color:var(--gold);font-size:1.05rem}
.calc-note{font-size:.78rem;color:#8d97b0;margin-top:16px}

/* ---------- Tag cloud ---------- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:11px}
.tag{
  padding:9px 18px;border-radius:999px;font-size:.86rem;font-weight:700;
  border:1px solid var(--line);background:var(--surface);color:#cdd5e6;
  transition:all .2s ease;
}
.tag:hover{transform:translateY(-2px);color:var(--white)}
.tag-gold{border-color:rgba(247,201,72,.4);color:var(--gold)}
.tag-green{border-color:rgba(52,211,153,.4);color:#6fe3b4}
.tag-red{border-color:rgba(239,68,68,.4);color:#ff9a9d}
.tag-blue{border-color:rgba(96,165,250,.4);color:#9ec9fd}

/* ---------- Artikel / prose ---------- */
.prose{color:#c9d1e3;font-size:1.01rem}
.prose h2{color:var(--white);font-size:1.45rem;margin:34px 0 12px;font-weight:800}
.prose h2::before{content:"";display:inline-block;width:10px;height:22px;background:linear-gradient(180deg,var(--gold),var(--red));border-radius:3px;margin-right:12px;vertical-align:-3px}
.prose h3{color:var(--gold);font-size:1.12rem;margin:26px 0 10px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 4px;display:grid;gap:9px}
.prose ul li{padding-left:26px;position:relative}
.prose ul li::before{content:"◆";position:absolute;left:2px;color:var(--gold);font-size:.65rem;top:8px}
.prose ol{counter-reset:li}
.prose ol li{padding-left:40px;position:relative;counter-increment:li}
.prose ol li::before{
  content:counter(li);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--gold-dark);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;
}
.prose figure{margin:26px 0}
.prose figure img{border-radius:var(--radius);border:1px solid var(--line);width:100%}
.prose figcaption{font-size:.82rem;color:#7c869e;margin-top:10px;text-align:center}
.prose blockquote{
  border-left:4px solid var(--gold);background:var(--surface);
  padding:18px 22px;border-radius:0 12px 12px 0;margin:20px 0;color:#dfe5f2;font-style:italic;
}
.article-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:.82rem;color:#7c869e;margin-bottom:20px}
.article-meta .au{color:var(--gold);font-weight:700}
.article-wrap{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.article-wrap>*{min-width:0}
.split>*{min-width:0}
.grid-cards>*{min-width:0}
.calc-wrap>*{min-width:0}
.testi-grid>*{min-width:0}
.steps>*{min-width:0}
.auth-wrap>*{min-width:0}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:96px}
.toc h3{font-size:.85rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.toc a{display:block;padding:7px 0;color:var(--muted);font-size:.88rem;border-bottom:1px dashed var(--line-soft)}
.toc a:last-child{border:0}
.toc a:hover{color:var(--gold)}

/* ---------- Tabel ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:20px 0;background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:13px 16px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line-soft)}
th{background:var(--surface-2);color:var(--gold);font-size:.8rem;letter-spacing:1px;text-transform:uppercase}
td{color:#c9d1e3}
tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px;max-width:860px}
.faq-list details{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq-list summary{
  cursor:pointer;padding:17px 52px 17px 20px;font-weight:700;color:var(--white);
  position:relative;list-style:none;font-size:.97rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:8px;border:1px solid var(--gold-dark);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.faq-list details[open] summary::after{content:"−"}
.faq-list details[open] summary{color:var(--gold)}
.faq-list .faq-body{padding:0 20px 18px;color:var(--muted);font-size:.93rem}
.faq-list .faq-body a{font-weight:700}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:
    radial-gradient(600px 260px at 15% 0%,rgba(247,201,72,.16),transparent 60%),
    radial-gradient(600px 260px at 85% 100%,rgba(239,68,68,.14),transparent 60%),
    linear-gradient(140deg,#1a1330,#12161f 60%,#1d0e14);
  border:1px solid var(--gold-dark);border-radius:22px;padding:52px 40px;text-align:center;
}
.cta-banner h2{color:var(--white);font-size:clamp(1.5rem,3vw,2rem);margin-bottom:12px}
.cta-banner p{color:var(--muted);max-width:620px;margin:0 auto 26px}
.cta-banner .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-banner .cta-note{margin-top:18px;font-size:.8rem;color:#7c869e;margin-bottom:0}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:16px 22px 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;font-size:.82rem;color:var(--muted)}
.breadcrumb li{display:flex;align-items:center;gap:6px}
.breadcrumb li+li::before{content:"›";color:var(--gold);font-size:1rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb [aria-current]{color:var(--gold);font-weight:700}

/* ---------- Halaman kategori hero kecil ---------- */
.page-hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(700px 300px at 90% -20%,rgba(247,201,72,.13),transparent 60%),
    radial-gradient(600px 300px at 0% 120%,rgba(239,68,68,.1),transparent 60%),
    linear-gradient(160deg,#141828,#0d101a);
}
.page-hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:56px 0 60px}
.page-hero h1{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.22;color:var(--white);font-weight:900;margin-bottom:14px}
.page-hero h1 em{color:var(--gold);font-style:normal}
.page-hero .lead{color:var(--muted);max-width:560px;margin-bottom:22px}
.page-hero .media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.page-hero .media img{width:100%;object-fit:cover}
.mini-facts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.mini-facts span{font-size:.78rem;font-weight:700;border:1px solid var(--line);padding:6px 12px;border-radius:999px;color:#cdd5e6;background:var(--surface)}

/* ---------- Langkah ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:st}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:relative}
.step::before{
  counter-increment:st;content:"0" counter(st);
  font-size:1.9rem;font-weight:900;color:transparent;
  -webkit-text-stroke:1.5px var(--gold-dark);letter-spacing:1px;display:block;margin-bottom:10px;
}
.step b{color:var(--white);display:block;margin-bottom:6px}
.step p{color:var(--muted);font-size:.88rem}

/* ---------- Halaman auth (daftar/masuk) ---------- */
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;padding:64px 0 84px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:var(--shadow)}
.auth-card h1{color:var(--white);font-size:1.6rem;margin-bottom:6px}
.auth-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.form-grid{display:grid;gap:18px}
.form-field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:7px;color:#cdd5e6}
.form-field label .req{color:var(--red)}
.form-field input[type=text],.form-field input[type=email],.form-field input[type=tel],.form-field input[type=password]{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--text);font-size:.95rem;outline:none;transition:border-color .2s;
}
.form-field input:focus{border-color:var(--gold)}
.form-field .hint{font-size:.76rem;color:#7c869e;margin-top:6px}
.form-check{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:#cdd5e6}
.form-check input{margin-top:4px;accent-color:var(--gold);width:16px;height:16px;flex:none}
.auth-side .side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:18px}
.auth-side h2{color:var(--white);font-size:1.05rem;margin-bottom:14px}
.auth-side .feature-list p{font-size:.86rem}
.form-alert{display:none;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.4);color:#ffb3b5;border-radius:12px;padding:12px 16px;font-size:.85rem;margin-bottom:16px}
.form-alert.show{display:block}
.lost-pw{font-size:.85rem;color:var(--muted);text-align:right;display:block;margin-top:-8px;margin-bottom:14px}

/* ---------- Halaman pencarian ---------- */
.search-hero{padding:56px 0 10px;text-align:center}
.search-hero h1{color:var(--white);font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:8px}
.search-hero p{color:var(--muted);margin-bottom:28px}
.search-big{max-width:640px;margin:0 auto;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 22px;align-items:center}
.search-big input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:1rem;min-width:0}
.search-big button{border:0;border-radius:999px;padding:12px 28px;background:linear-gradient(180deg,#ffd75e,var(--gold-2));color:#2a1e00;font-weight:800;cursor:pointer;font-size:.92rem}
.search-results{padding:34px 0 80px;display:grid;gap:16px}
.result-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 24px}
.result-card .r-url{font-size:.75rem;color:var(--green);font-weight:700;letter-spacing:.4px}
.result-card h2{font-size:1.08rem;margin:4px 0 6px}
.result-card h2 a{color:var(--white)}
.result-card h2 a:hover{color:var(--gold)}
.result-card p{color:var(--muted);font-size:.9rem}
.result-card .r-crumb{font-size:.75rem;color:#7c869e;margin-top:8px}
.search-empty{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:40px;text-align:center;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:#08090f;border-top:1px solid var(--line-soft);margin-top:0}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:56px 0 40px}
.footer-brand .brand{margin-bottom:16px}
.footer-brand p{color:var(--muted);font-size:.88rem;max-width:320px;margin-bottom:18px}
.footer-badges{display:flex;gap:10px;flex-wrap:wrap}
.f-badge{
  border-radius:10px;padding:8px 12px;font-size:.72rem;font-weight:800;letter-spacing:.5px;
  border:1px solid var(--line);color:var(--muted);
}
.f-badge.b18{border-color:rgba(239,68,68,.55);color:#ff8f93}
.f-badge.brg{border-color:rgba(52,211,153,.5);color:#6fe3b4}
.site-footer h3{color:var(--white);font-size:.95rem;margin-bottom:16px;letter-spacing:.5px}
.site-footer h3::after{content:"";display:block;width:28px;height:2px;background:var(--gold);margin-top:8px;border-radius:2px}
.footer-links{display:grid;gap:10px}
.footer-links a{color:var(--muted);font-size:.88rem}
.footer-links a:hover{color:var(--gold)}
.footer-contact{color:var(--muted);font-size:.87rem;display:grid;gap:8px}
.footer-contact a{font-weight:700}
.footer-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.footer-pay span{font-size:.72rem;border:1px dashed var(--line);border-radius:8px;padding:5px 10px;color:#8d97b0}
.footer-bottom{border-top:1px solid var(--line-soft);padding:22px 0 26px}
.footer-bottom p{font-size:.78rem;color:#7c869e;text-align:center;max-width:860px;margin:0 auto 8px}
.footer-bottom .fb-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:.8rem}
.footer-bottom .fb-row a{color:#8d97b0}
.footer-bottom .fb-row a:hover{color:var(--gold)}

/* ---------- Bar mengambang (slot style) ---------- */
.float-bar{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:1200;display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,#1c2133,#12151f);
  border:2px solid var(--gold);border-radius:18px;
  padding:10px 14px;box-shadow:0 10px 34px rgba(0,0,0,.6),0 0 22px rgba(247,201,72,.18);
  overflow:visible;
}
.reels{display:flex;gap:6px}
.reel{
  width:34px;height:34px;border-radius:9px;overflow:hidden;
  background:linear-gradient(180deg,#f7c94822,#ffffff0d);
  border:1px solid var(--gold-dark);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
.reel.spin{animation:reelBounce .34s ease}
@keyframes reelBounce{0%{transform:translateY(-4px) scale(1.04)}100%{transform:translateY(0) scale(1)}}
.float-cta{display:flex;gap:10px;min-width:0}
.fbtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:12px;font-weight:900;font-size:.95rem;letter-spacing:1px;
  transition:transform .15s ease,box-shadow .2s ease;
}
.fbtn:active{transform:translateY(2px)}
.fbtn-gold{
  background:linear-gradient(180deg,#ffe081,#e8a91f);color:#2a1e00;
  box-shadow:0 0 0 3px #2a1e00,0 0 0 5px rgba(247,201,72,.55),0 6px 18px rgba(247,201,72,.4);
  animation:goldPulse 2.2s infinite;
}
.fbtn-gold:hover{color:#1a1400;transform:translateY(-2px)}
.fbtn-green{
  background:linear-gradient(180deg,#4fe0a8,#1f9e6e);color:#03251a;
  box-shadow:0 0 0 3px #03251a,0 0 0 5px rgba(52,211,153,.4),0 6px 18px rgba(52,211,153,.3);
}
.fbtn-green:hover{color:#03251a;transform:translateY(-2px)}
@keyframes goldPulse{
  0%,100%{box-shadow:0 0 0 3px #2a1e00,0 0 0 5px rgba(247,201,72,.5),0 6px 18px rgba(247,201,72,.35)}
  50%{box-shadow:0 0 0 3px #2a1e00,0 0 0 7px rgba(247,201,72,.28),0 6px 26px rgba(247,201,72,.55)}
}
.coin-layer{position:absolute;inset:0;pointer-events:none;overflow:visible}
.coin{
  position:absolute;bottom:60%;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff3c4,#f7c948 55%,#9c6f10);
  box-shadow:0 0 6px rgba(247,201,72,.8);
  animation:coinUp var(--d,1.1s) ease-out forwards;
}
@keyframes coinUp{
  0%{transform:translateY(0) scale(.5) rotate(0);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(-120px) scale(1.05) rotate(200deg);opacity:0}
}

/* ---------- Legal / statis ---------- */
.static-hero{padding:52px 0 8px}
.static-hero h1{font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--white)}
.static-hero .upd{color:#7c869e;font-size:.82rem;margin-top:8px}
.static-body{padding:26px 0 84px}
.legal-block h2{color:var(--white);font-size:1.2rem;margin:30px 0 10px}
.legal-block p,.legal-block li{color:#b9c2d8;font-size:.94rem;margin-bottom:10px}
.legal-block ul{margin-left:20px;list-style:disc;margin-bottom:16px}
.legal-block ul li{margin-bottom:7px}

/* ---------- Util ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.chain-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ============================================================
   Responsif
   ============================================================ */
@media (max-width:1120px){
  .searchbox{min-width:150px}
  .main-nav{display:none}
  .main-nav.open{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:#0d101a;border-bottom:1px solid var(--line);padding:12px 22px 18px;
  }
  .main-nav.open ul{flex-direction:column;gap:2px}
  .main-nav.open a{padding:12px 14px;font-size:1rem}
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .header-actions{order:3}
}
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;padding:56px 0 64px}
  .page-hero__inner{grid-template-columns:1fr;padding:44px 0 48px}
  .article-wrap{grid-template-columns:1fr}
  .toc{position:static}
  .calc-wrap{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:30px}
  .auth-wrap{grid-template-columns:1fr;padding-top:44px}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px}
  .searchbox{display:none}
}
@media (max-width:640px){
  .section{padding:52px 0}
  .container{padding:0 16px}
  .hero h1{font-size:1.85rem}
  .hero__cta .btn{width:100%}
  .hero-chips .chip{min-width:100px}
  .btn-lg{padding:13px 24px;font-size:.98rem}
  .card{padding:22px 18px}
  .cta-banner{padding:38px 20px}
  .float-bar{left:0;right:0;bottom:0;transform:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:9px 10px;gap:10px}
  .reel{width:30px;height:30px;font-size:.95rem}
  .fbtn{padding:11px 16px;font-size:.9rem;flex:1}
  .float-cta{flex:1}
  .footer-top{grid-template-columns:1fr;gap:26px;padding:42px 0 30px}
  .header-actions .btn{display:none}
  .faq-list summary{font-size:.9rem;padding:15px 48px 15px 16px}
  .auth-card{padding:26px 20px}
  .table-wrap{border-radius:12px}
  th,td{padding:11px 12px;font-size:.84rem}
  .prose h2{font-size:1.25rem}
}
@media (max-width:420px){
  .btn{white-space:normal;padding:11px 18px}
  .brand{font-size:1.12rem;min-width:0}
  .brand svg{width:26px;height:26px}
  .brand .brand-dot{display:none}
  .header-inner{gap:8px}
  .reels{gap:4px}
  .reel{width:22px;height:22px;font-size:.7rem;border-radius:6px}
  .float-bar{gap:8px;padding:8px}
  .float-cta{gap:6px}
  .fbtn{padding:9px 10px;font-size:.78rem;letter-spacing:.4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .coin{display:none}
}