/* ==========================================================================
   Sapporo88 — Theme Stylesheet (WordPress-convention class names)
   Palet: hitam · putih · merah · emas/kuning · hijau · biru
   ========================================================================== */

:root{
  --bg:        #0b0d12;
  --bg-2:      #10141d;
  --card:      #151a26;
  --card-2:    #1a2130;
  --line:      #242c3d;
  --white:     #f4f7fb;
  --muted:     #9aa5b8;
  --red:       #e22536;
  --red-deep:  #b0162a;
  --gold:      #f5b301;
  --gold-soft: #ffd34d;
  --green:     #21b573;
  --green-soft:#3ddc97;
  --blue:      #3b82f6;
  --blue-soft: #7db1ff;
  --grad-brand: linear-gradient(135deg,#e22536 0%,#f5b301 100%);
  --grad-green: linear-gradient(135deg,#0e7a4a 0%,#21b573 100%);
  --grad-blue:  linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%);
  --shadow-1:  0 6px 24px rgba(0,0,0,.35);
  --shadow-2:  0 14px 44px rgba(0,0,0,.5);
  --radius:    14px;
  --radius-sm: 10px;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ overflow-x:clip; max-width:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  color:var(--white);
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(226,37,54,.14), transparent 60%),
    radial-gradient(760px 420px at -10% 12%, rgba(59,130,246,.10), transparent 55%),
    var(--bg);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-soft); text-decoration:none; }
a:hover{ color:var(--gold); }
p{ margin:0 0 1em; }
ul,ol{ padding-left:1.25em; }
h1,h2,h3,h4{ line-height:1.28; margin:0 0 .55em; font-weight:800; letter-spacing:.2px; }
h1{ font-size:clamp(1.65rem,4vw,2.5rem); }
h2{ font-size:clamp(1.35rem,3vw,1.9rem); }
h3{ font-size:clamp(1.1rem,2.4vw,1.3rem); }
hr{ border:0; border-top:1px solid var(--line); margin:2em 0; }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:8px; z-index:2000;
  background:var(--gold); color:#111; padding:8px 14px; border-radius:8px; font-weight:700;
}
.skip-link:focus{ left:8px; }

.wrap{ width:min(1180px,100% - 2.5rem); margin-inline:auto; }

/* ---------- tombol ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.78rem 1.5rem; border-radius:999px; border:1px solid transparent;
  font-weight:800; font-size:.98rem; letter-spacing:.3px; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); color:inherit; }
.btn:active{ transform:translateY(0); }
.btn-gold{ background:var(--grad-brand); color:#fff; box-shadow:0 8px 22px rgba(226,37,54,.35); }
.btn-gold:hover{ filter:brightness(1.06); color:#fff; }
.btn-green{ background:var(--grad-green); color:#fff; box-shadow:0 8px 22px rgba(33,181,115,.3); }
.btn-green:hover{ color:#fff; }
.btn-blue{ background:var(--grad-blue); color:#fff; box-shadow:0 8px 22px rgba(59,130,246,.3); }
.btn-blue:hover{ color:#fff; }
.btn-ghost{ background:transparent; color:var(--white); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-sm{ padding:.5rem 1.05rem; font-size:.88rem; }
.btn-block{ width:100%; }

/* badge umum */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.74rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  padding:.28rem .7rem; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--muted);
}
.badge-red{ color:#ffb3ba; border-color:rgba(226,37,54,.45); background:rgba(226,37,54,.12); }
.badge-gold{ color:var(--gold-soft); border-color:rgba(245,179,1,.45); background:rgba(245,179,1,.1); }
.badge-green{ color:var(--green-soft); border-color:rgba(33,181,115,.45); background:rgba(33,181,115,.12); }
.badge-blue{ color:var(--blue-soft); border-color:rgba(59,130,246,.45); background:rgba(59,130,246,.12); }

.badge-18{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.6rem; height:2.6rem; padding:0 .5rem; border-radius:50%;
  border:2px solid var(--red); color:#ff8f9c; font-weight:900; font-size:.95rem;
  background:rgba(226,37,54,.1);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{
  background:#080a0f; border-bottom:1px solid var(--line);
  font-size:.8rem; color:var(--muted);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.6rem; }
.topbar-left{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.topbar-right{ display:flex; align-items:center; gap:.9rem; }
.topbar a{ color:var(--muted); }
.topbar a:hover{ color:var(--gold); }
.topbar .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); display:inline-block; }

.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(11,13,18,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.45); }
.navbar{ display:flex; align-items:center; gap:1.1rem; min-height:4.4rem; }

.site-branding{ display:flex; align-items:center; gap:.6rem; font-weight:900; font-size:1.22rem; letter-spacing:.4px; color:var(--white); }
.site-branding:hover{ color:var(--white); }
.logo-chip{
  width:2.15rem; height:2.15rem; border-radius:50%; flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 26%, transparent 27% 100%),
    conic-gradient(var(--gold) 0 25%, var(--red-deep) 0 50%, var(--gold) 0 75%, var(--red-deep) 0);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35), 0 4px 12px rgba(245,179,1,.35);
  position:relative;
}
.logo-chip::after{
  content:"88"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.62rem; font-weight:900; color:#b0162a;
}
.brand-name b{ color:var(--gold); }

.nav-toggle{
  margin-left:auto; display:none; flex-direction:column; gap:5px;
  background:transparent; border:1px solid var(--line); border-radius:10px;
  padding:.6rem .65rem; cursor:pointer;
}
.nav-toggle span{ width:1.35rem; height:2px; background:var(--white); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-menu{ display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0; }
.nav-menu li{ position:relative; }
.nav-menu a{
  display:block; padding:.6rem .8rem; border-radius:9px;
  color:var(--muted); font-weight:700; font-size:.93rem;
}
.nav-menu a:hover{ color:var(--white); background:rgba(255,255,255,.05); }
.nav-menu .current-menu-item a{ color:var(--gold); }
.nav-menu .current-menu-item a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.28rem; height:2px;
  background:var(--grad-brand); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:.55rem; margin-left:auto; }

.nav-search{ position:relative; }
.nav-search-btn{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  width:2.5rem; height:2.5rem; border-radius:10px; cursor:pointer; font-size:1rem;
  display:grid; place-items:center; transition:color .2s ease, border-color .2s ease;
}
.nav-search-btn:hover{ color:var(--gold); border-color:var(--gold); }

/* ==========================================================================
   SEARCH OVERLAY
   ========================================================================== */
.search-overlay{
  position:fixed; inset:0; z-index:1500; display:none;
  background:rgba(8,10,15,.92); backdrop-filter:blur(8px);
  padding:14vh 1.25rem 2rem;
}
.search-overlay.is-open{ display:block; }
.search-panel{ width:min(680px,100%); margin-inline:auto; }
.search-box{ display:flex; gap:.5rem; }
.search-input{
  flex:1; min-width:0; padding:.95rem 1.2rem; border-radius:14px;
  border:1px solid var(--line); background:var(--card); color:var(--white);
  font-size:1.02rem; font-family:inherit;
}
.search-input:focus{ outline:2px solid var(--gold); outline-offset:-1px; border-color:transparent; }
.search-close{
  background:var(--card); border:1px solid var(--line); color:var(--muted);
  width:3.3rem; border-radius:14px; cursor:pointer; font-size:1.1rem;
}
.search-close:hover{ color:var(--white); border-color:var(--red); }
.search-hint{ color:var(--muted); font-size:.85rem; margin:.9rem 0 .4rem; }
.search-results{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.6rem; max-height:52vh; overflow-y:auto; }
.search-results li a{
  display:block; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:.85rem 1rem; transition:border-color .2s ease;
}
.search-results li a:hover{ border-color:var(--gold); }
.sr-path{ font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.sr-title{ font-weight:800; color:var(--white); margin:.15rem 0; }
.sr-desc{ font-size:.86rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.search-empty{ color:var(--muted); padding:1rem; text-align:center; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb{ padding:.9rem 0 0; font-size:.83rem; }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; color:var(--muted); }
.breadcrumb li{ display:flex; align-items:center; gap:.35rem; }
.breadcrumb li+li::before{ content:"›"; color:var(--gold); font-weight:900; }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb [aria-current]{ color:var(--white); font-weight:700; }

/* ==========================================================================
   HERO (beranda)
   ========================================================================== */
.hero{
  position:relative; overflow:clip; border-radius:0 0 26px 26px;
  background:var(--bg-2);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.38; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,13,18,.55) 0%, rgba(11,13,18,.86) 62%, var(--bg) 100%),
    radial-gradient(640px 300px at 18% 30%, rgba(226,37,54,.28), transparent 65%);
}
.hero-inner{ position:relative; padding:5.2rem 0 4.4rem; max-width:760px; }
.hero .badge-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem; }
.hero h1 .grad{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ font-size:1.06rem; color:#cbd5e4; max-width:620px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.7rem; }

/* strip statistik non-angka di bawah hero */
.hero-strip{ border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.hero-strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.hero-strip .cell{ padding:1.05rem .8rem; text-align:center; }
.hero-strip .cell b{ display:block; color:var(--gold); font-size:.95rem; }
.hero-strip .cell span{ font-size:.8rem; color:var(--muted); }

/* ==========================================================================
   SECTION umum
   ========================================================================== */
.section{ padding:3.4rem 0; }
.section.alt{ background:var(--bg-2); border-block:1px solid var(--line); }
.section-head{ max-width:720px; margin-bottom:1.8rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:900;
  letter-spacing:1.6px; text-transform:uppercase; margin-bottom:.6rem;
}
.eyebrow::before{ content:""; width:1.6rem; height:3px; border-radius:3px; background:var(--grad-brand); }
.acc-green .eyebrow::before{ background:var(--grad-green); }
.acc-blue  .eyebrow::before{ background:var(--grad-blue); }
.acc-gold  .eyebrow::before{ background:var(--grad-brand); }
.acc-green .eyebrow{ color:var(--green-soft); }
.acc-blue  .eyebrow{ color:var(--blue-soft); }
.acc-gold  .eyebrow{ color:var(--gold-soft); }
.section-sub{ color:var(--muted); }

/* grid kartu */
.grid{ display:grid; gap:1.15rem; }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* kartu kategori permainan */
.game-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.game-card:hover{ transform:translateY(-5px); border-color:rgba(245,179,1,.5); box-shadow:var(--shadow-2); }
.game-card .thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.game-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.game-card:hover .thumb img{ transform:scale(1.06); }
.game-card .thumb .badge{ position:absolute; top:.8rem; left:.8rem; }
.game-card .body{ padding:1.15rem 1.2rem 1.35rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.game-card p{ color:var(--muted); font-size:.92rem; margin:0; }
.game-card .more{ margin-top:auto; font-weight:800; font-size:.9rem; }

/* kartu langkah (panduan 4 langkah) */
.step-card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem 1.3rem 1.3rem; counter-increment:step;
}
.step-card::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; top:-1.05rem; left:1.1rem;
  background:var(--grad-brand); color:#fff; font-weight:900; font-size:.85rem;
  padding:.28rem .75rem; border-radius:999px; box-shadow:var(--shadow-1);
}
.steps{ display:grid; gap:1.4rem 1.15rem; grid-template-columns:repeat(4,minmax(0,1fr)); counter-reset:step; padding-top:1rem; }
.step-card h3{ font-size:1.05rem; margin-top:.3rem; }
.step-card p{ color:var(--muted); font-size:.9rem; margin:0; }
.step-card .step-link{ display:inline-block; margin-top:.7rem; font-size:.85rem; font-weight:800; }

/* kartu keunggulan */
.feat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.3rem; transition:border-color .22s ease, transform .22s ease;
}
.feat-card:hover{ border-color:rgba(59,130,246,.55); transform:translateY(-4px); }
.feat-ico{
  width:2.9rem; height:2.9rem; border-radius:12px; display:grid; place-items:center;
  font-size:1.35rem; margin-bottom:.85rem; background:rgba(59,130,246,.14);
  border:1px solid rgba(59,130,246,.35);
}
.feat-card.acc-gold   .feat-ico{ background:rgba(245,179,1,.12);  border-color:rgba(245,179,1,.4); }
.feat-card.acc-green  .feat-ico{ background:rgba(33,181,115,.12); border-color:rgba(33,181,115,.4); }
.feat-card.acc-red    .feat-ico{ background:rgba(226,37,54,.12);  border-color:rgba(226,37,54,.4); }
.feat-card h3{ font-size:1.02rem; }
.feat-card p{ color:var(--muted); font-size:.9rem; margin:0; }

/* split media + poin (kenapa pilih kami / mobile / keamanan / RG) */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.4rem; align-items:center; }
.split .media{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-2); position:relative;
}
.split .media img{ width:100%; height:100%; object-fit:cover; }
.split .media .badge{ position:absolute; top:.9rem; left:.9rem; backdrop-filter:blur(4px); }
.check-list{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.75rem; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; color:#cdd6e4; font-size:.95rem; }
.check-list li::before{
  content:"✓"; flex:0 0 auto; width:1.45rem; height:1.45rem; border-radius:50%;
  display:grid; place-items:center; font-size:.8rem; font-weight:900; color:#06281a;
  background:var(--green-soft); margin-top:.18rem;
}
.check-list.blue li::before{ background:var(--blue-soft); color:#0a1c3d; }
.check-list.gold li::before{ background:var(--gold-soft); color:#3d2c00; }

/* testimoni */
.t-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.35rem 1.3rem; display:flex; flex-direction:column; gap:.9rem;
}
.t-head{ display:flex; align-items:center; gap:.8rem; }
.t-ava{
  width:2.7rem; height:2.7rem; border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:.95rem; color:#fff; flex:0 0 auto;
}
.t-ava.a1{ background:var(--grad-brand); }
.t-ava.a2{ background:var(--grad-green); }
.t-ava.a3{ background:var(--grad-blue); }
.t-ava.a4{ background:linear-gradient(135deg,#7c3aed,#3b82f6); }
.t-name{ font-weight:800; font-size:.95rem; }
.t-loc{ font-size:.78rem; color:var(--muted); }
.t-stars{ color:var(--gold); letter-spacing:2px; font-size:.85rem; margin-left:auto; }
.t-card blockquote{ margin:0; color:#cdd6e4; font-size:.93rem; }
.testi-note{ font-size:.78rem; color:var(--muted); margin-top:1rem; }

/* kamus istilah */
.glossary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.term-card{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius-sm); padding:1rem 1.1rem;
}
.term-card:nth-child(3n+2){ border-left-color:var(--green); }
.term-card:nth-child(3n){ border-left-color:var(--blue); }
.term-card dt{ font-weight:900; color:var(--gold-soft); font-size:.95rem; }
.term-card dd{ margin:.3rem 0 0; color:var(--muted); font-size:.86rem; }

/* kalkulator turnover */
.calc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; display:grid; gap:1rem;
}
.calc-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.calc label{ display:grid; gap:.35rem; font-size:.82rem; font-weight:700; color:var(--muted); }
.calc input{
  width:100%; padding:.7rem .85rem; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--white); font-size:1rem; font-family:inherit;
}
.calc input:focus{ outline:2px solid var(--gold); outline-offset:-1px; }
.calc-out{
  background:var(--bg-2); border:1px dashed rgba(245,179,1,.5); border-radius:var(--radius-sm);
  padding:1rem 1.2rem; display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center;
}
.calc-out .co b{ display:block; font-size:1.3rem; color:var(--gold); font-variant-numeric:tabular-nums; }
.calc-out .co span{ font-size:.78rem; color:var(--muted); }
.calc-note{ font-size:.78rem; color:var(--muted); }

/* tag cloud */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tag-cloud a{
  display:inline-block; padding:.45rem .95rem; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:#c3ccdb;
  font-size:.86rem; font-weight:700; transition:all .2s ease;
}
.tag-cloud a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.tag-cloud a.lg{ font-size:1rem; padding:.55rem 1.15rem; color:var(--gold-soft); border-color:rgba(245,179,1,.4); }
.tag-cloud a.gr{ border-color:rgba(33,181,115,.4); }
.tag-cloud a.bl{ border-color:rgba(59,130,246,.4); }
.tag-cloud a.rd{ border-color:rgba(226,37,54,.4); }

/* FAQ details */
.faq-item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.2rem 1.2rem; overflow:hidden;
}
.faq-item + .faq-item{ margin-top:.7rem; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.8rem;
  padding:1.05rem 0; font-weight:800; font-size:.99rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; margin-left:auto; flex:0 0 auto; width:1.7rem; height:1.7rem; border-radius:50%;
  display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--line);
  color:var(--gold); font-weight:900; transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-body{ padding:0 0 1.15rem; color:var(--muted); font-size:.93rem; }
.faq-item .faq-body p:last-child{ margin-bottom:0; }

/* CTA band */
.cta-band{
  position:relative; overflow:clip; border-radius:20px; border:1px solid rgba(245,179,1,.35);
  background:
    radial-gradient(480px 220px at 12% 0%, rgba(226,37,54,.35), transparent 60%),
    radial-gradient(480px 220px at 88% 100%, rgba(59,130,246,.25), transparent 60%),
    var(--card);
  padding:2.6rem 2rem; text-align:center;
}
.cta-band h2{ margin-bottom:.4rem; }
.cta-band p{ color:var(--muted); max-width:620px; margin-inline:auto; }
.cta-band .hero-cta{ justify-content:center; }
.cta-band .fine{ font-size:.78rem; color:var(--muted); margin-top:1rem; }

/* ==========================================================================
   LAYOUT ARTIKEL (WP single)
   ========================================================================== */
.page-hero{ padding:2.6rem 0 0; }
.page-hero .cat-row{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.entry-meta{ display:flex; flex-wrap:wrap; gap:1.1rem; color:var(--muted); font-size:.84rem; margin:.6rem 0 1.2rem; }
.entry-meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.content-area{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:2.6rem; padding:2.4rem 0 3.6rem; align-items:start; }
.entry-cover{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-2); margin-bottom:1.8rem; }
.entry-cover img{ width:100%; object-fit:cover; }
.entry-cover figcaption{ padding:.6rem .9rem; font-size:.78rem; color:var(--muted); background:var(--card); border-top:1px solid var(--line); }

.entry-content{ font-size:1.01rem; color:#d5dce8; }
.entry-content > p:first-of-type::first-letter{ font-size:1.05em; }
.entry-content h2{
  margin-top:2em; padding-left:.85rem; border-left:4px solid;
  border-image:linear-gradient(180deg,#e22536,#f5b301) 1;
}
.entry-content h3{ margin-top:1.6em; color:var(--gold-soft); }
.entry-content a{ text-decoration:underline; text-underline-offset:3px; }
.entry-content ul li,.entry-content ol li{ margin-bottom:.45em; }
.entry-content figure{ margin:1.6em 0; }
.entry-content figure img{ border-radius:var(--radius-sm); border:1px solid var(--line); }
.entry-content figcaption{ font-size:.8rem; color:var(--muted); margin-top:.5rem; text-align:center; }

.note{
  border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:1.4em 0;
  font-size:.93rem; border:1px solid; background:var(--card);
}
.note b{ display:block; margin-bottom:.25rem; }
.note-info{ border-color:rgba(59,130,246,.45); }
.note-info b{ color:var(--blue-soft); }
.note-warn{ border-color:rgba(226,37,54,.5); }
.note-warn b{ color:#ff9aa5; }
.note-ok{ border-color:rgba(33,181,115,.45); }
.note-ok b{ color:var(--green-soft); }
.note-18{ border-color:rgba(245,179,1,.5); }
.note-18 b{ color:var(--gold); }

.table-wrap{ overflow-x:auto; margin:1.5em 0; border:1px solid var(--line); border-radius:var(--radius-sm); -webkit-overflow-scrolling:touch; }
table.wp-style{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:540px; }
table.wp-style caption{ caption-side:bottom; padding:.7rem 1rem; font-size:.78rem; color:var(--muted); text-align:left; }
table.wp-style th{
  background:var(--card-2); text-align:left; padding:.8rem 1rem; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.6px; color:var(--gold-soft); border-bottom:1px solid var(--line);
}
table.wp-style td{ padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; color:#cdd6e4; }
table.wp-style tr:last-child td{ border-bottom:0; }
table.wp-style td b{ color:var(--white); }

/* box penulis/tanggal di akhir artikel */
.entry-footer{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; font-size:.85rem; color:var(--muted); }

/* sidebar widget */
.widget-area{ display:grid; gap:1.5rem; position:sticky; top:5.4rem; }
.widget{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.25rem; }
.widget h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--gold); margin-bottom:.9rem; }
.widget ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.widget ul a{ display:flex; justify-content:space-between; gap:.6rem; color:#c3ccdb; font-size:.9rem; font-weight:600; }
.widget ul a::after{ content:"→"; color:var(--muted); transition:transform .2s ease; }
.widget ul a:hover{ color:var(--gold); }
.widget ul a:hover::after{ transform:translateX(3px); }
.widget .btn{ margin-top:.4rem; }
.widget-cta{ background:
  radial-gradient(300px 160px at 20% 0%, rgba(226,37,54,.3), transparent 60%), var(--card);
}

/* promo card */
.promo-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, border-color .22s ease;
}
.promo-card:hover{ transform:translateY(-5px); border-color:rgba(245,179,1,.5); }
.promo-card .thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.promo-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.promo-card .body{ padding:1.15rem 1.2rem 1.35rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.promo-card h3{ font-size:1.05rem; }
.promo-card .terms{ display:flex; flex-wrap:wrap; gap:.4rem; }
.promo-card .terms span{ font-size:.72rem; border:1px solid var(--line); border-radius:999px; padding:.2rem .6rem; color:var(--muted); }
.promo-card p{ color:var(--muted); font-size:.9rem; margin:0; }
.promo-card .more{ margin-top:auto; font-weight:800; font-size:.9rem; }

/* form auth */
.auth-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:start; padding:2.6rem 0 3.6rem; }
.auth-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:2rem 1.8rem; box-shadow:var(--shadow-2);
}
.auth-card h1{ font-size:1.5rem; }
.auth-card .lead{ color:var(--muted); font-size:.92rem; }
.form-grid{ display:grid; gap:1rem; margin-top:1.4rem; }
.field label{ display:block; font-size:.84rem; font-weight:700; margin-bottom:.35rem; color:#c3ccdb; }
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=password]{
  width:100%; padding:.8rem .95rem; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--white); font-size:1rem; font-family:inherit;
}
.field input:focus{ outline:2px solid var(--gold); outline-offset:-1px; border-color:transparent; }
.field .hint{ font-size:.75rem; color:var(--muted); margin-top:.3rem; }
.checkline{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color:var(--muted); }
.checkline input{ margin-top:.25rem; width:1.05rem; height:1.05rem; accent-color:var(--gold); }
.auth-side{ display:grid; gap:1.3rem; }
.auth-side .media{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.auth-note{ font-size:.78rem; color:var(--muted); margin-top:1.1rem; text-align:center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  margin-top:2rem; background:#080a0f; border-top:1px solid var(--line);
  padding:3rem 0 6.5rem; /* bawah lebih lapang agar tombol melayang tidak menutupi tautan */
}
.footer-grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:2.2rem; }
.footer-grid h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:1.3px; color:var(--gold); margin-bottom:1rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer-grid ul a{ color:var(--muted); font-size:.9rem; }
.footer-grid ul a:hover{ color:var(--gold); }
.footer-about p{ color:var(--muted); font-size:.88rem; }
.footer-badges{ display:flex; gap:.6rem; margin-top:1rem; align-items:center; flex-wrap:wrap; }
.pay-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.pay-chips span{
  font-size:.72rem; font-weight:800; letter-spacing:.5px; padding:.28rem .6rem;
  border:1px solid var(--line); border-radius:7px; color:var(--muted); background:rgba(255,255,255,.03);
}
.footer-legal{
  margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--muted); display:grid; gap:.8rem;
}
.footer-copy{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }

/* ==========================================================================
   FLOAT CTA — mesin slot + koin (tanpa tombol tutup)
   ========================================================================== */
.float-cta{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:1200; display:inline-flex; align-items:center; gap:.8rem;
  padding:.55rem 1.25rem .55rem .8rem; border-radius:999px;
  background:linear-gradient(180deg,#2a0f13,#160a10);
  border:2px solid var(--gold);
  box-shadow:0 0 0 4px rgba(245,179,1,.16), 0 14px 34px rgba(0,0,0,.6), 0 0 26px rgba(245,179,1,.28);
  animation:fcPulse 2.6s ease-in-out infinite;
  text-decoration:none; overflow:visible; isolation:isolate;
}
.float-cta:hover{ filter:brightness(1.1); }
.float-cta .fc-reels{ display:flex; gap:4px; }
.float-cta .reel{
  width:1.55rem; height:1.85rem; border-radius:6px; overflow:hidden;
  background:linear-gradient(180deg,#fff 0 18%,#f3f4f6 100%);
  border:1px solid #d4d7dd; position:relative;
}
.float-cta .strip{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  font-size:.78rem; line-height:1.85rem;
  animation:fcSpin 1.15s linear infinite;
}
.float-cta .reel:nth-child(2) .strip{ animation-duration:.95s; animation-delay:.12s; }
.float-cta .reel:nth-child(3) .strip{ animation-duration:1.3s; animation-delay:.06s; }
.float-cta .fc-text{
  font-weight:900; letter-spacing:1.1px; font-size:.98rem; color:var(--gold);
  text-shadow:0 1px 0 #7a5a00; white-space:nowrap;
}
.float-cta .fc-text small{ display:block; font-size:.6rem; letter-spacing:2px; color:#ff9aa5; font-weight:800; }
/* koin emas melengkung naik */
.float-cta::before,.float-cta::after{
  content:""; position:absolute; bottom:6px; z-index:-1;
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff3bf 0 22%, var(--gold-soft) 45%, #c98a00 100%);
  box-shadow:0 0 10px rgba(255,211,77,.85);
  opacity:0; animation:fcCoin 2.6s ease-in infinite;
}
.float-cta::before{ left:12px; animation-delay:.2s; }
.float-cta::after{ right:12px; animation-delay:1.3s; }
@keyframes fcPulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(245,179,1,.14),0 14px 34px rgba(0,0,0,.6),0 0 22px rgba(245,179,1,.22);} 50%{ box-shadow:0 0 0 7px rgba(245,179,1,.08),0 14px 34px rgba(0,0,0,.6),0 0 40px rgba(245,179,1,.5);} }
@keyframes fcCoin{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 12%{ opacity:1; } 55%{ transform:translateY(-46px) scale(1); opacity:1; } 100%{ transform:translateY(-84px) scale(.85); opacity:0; } }
@keyframes fcSpin{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-50%); } }

/* koin hasil klik */
.coin-burst{ position:fixed; z-index:1300; pointer-events:none; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff3bf 0 22%, var(--gold-soft) 45%, #c98a00 100%);
  box-shadow:0 0 10px rgba(255,211,77,.85); animation:coinFly .8s ease-out forwards; }
@keyframes coinFly{ 0%{ transform:translate(0,0) scale(.7); opacity:1; } 100%{ transform:translate(var(--cx),var(--cy)) scale(1.05); opacity:0; } }

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width:1080px){
  .nav-menu{ gap:0; }
  .nav-menu a{ padding:.55rem .6rem; font-size:.88rem; }
  .content-area{ grid-template-columns:minmax(0,1fr); }
  .widget-area{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:1.8rem; }
}
@media (max-width:920px){
  .split{ grid-template-columns:1fr; gap:1.6rem; }
  .cols-3,.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .glossary{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calc-row{ grid-template-columns:1fr; }
  .auth-wrap{ grid-template-columns:1fr; }
  .hero-strip .wrap{ grid-template-columns:repeat(2,1fr); }
  .topbar-right{ display:none; }
}
@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:#0d1017; border-bottom:1px solid var(--line); padding:.7rem 1.1rem 1.1rem;
    gap:.2rem; display:none; box-shadow:var(--shadow-2);
  }
  .nav-menu.is-open{ display:flex; }
  .nav-menu a{ padding:.75rem .6rem; font-size:.95rem; }
  .nav-menu .current-menu-item a::after{ display:none; }
  .nav-cta .btn{ padding:.55rem 1rem; font-size:.85rem; }
  .section{ padding:2.5rem 0; }
  .hero-inner{ padding:3.4rem 0 3rem; }
  .widget-area{ grid-template-columns:1fr; }
  .cols-2{ grid-template-columns:1fr; }
}
@media (max-width:540px){
  .cols-3,.cols-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .glossary{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; }
  .hero-strip .wrap{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .float-cta{ bottom:10px; padding:.45rem .95rem .45rem .6rem; gap:.55rem; }
  .float-cta .fc-text{ font-size:.86rem; letter-spacing:.8px; }
  .float-cta .reel{ width:1.3rem; height:1.6rem; }
  .float-cta .strip{ line-height:1.6rem; font-size:.68rem; }
  .t-stars{ display:none; }
  .auth-card{ padding:1.5rem 1.2rem; }
  .entry-content{ font-size:.97rem; }
}

/* aksesibilitas gerak */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* fokus keyboard */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;
}

::selection{ background:rgba(245,179,1,.35); }