/* ============================================================
   Dangdut4d — Casino editorial theme
   Palette: black / red / gold-yellow / green / blue / white
   ============================================================ */
:root{
  --ink:#0a0a10;
  --ink-2:#101018;
  --panel:#15151f;
  --card:#1b1b28;
  --card-2:#22222f;
  --line:#2c2c3d;
  --line-soft:#262636;
  --red:#e5252c;
  --red-2:#ff4d4d;
  --red-deep:#a3101c;
  --gold:#ffc933;
  --gold-2:#ffe08a;
  --green:#2ecc71;
  --green-deep:#1d9d55;
  --blue:#3e8bff;
  --blue-deep:#2563c9;
  --white:#ffffff;
  --text:#f2f2f8;
  --muted:#a8a8bd;
  --muted-2:#82829a;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 12px 34px rgba(0,0,0,.45);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--ink);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  padding-bottom:86px; /* ruang untuk floating CTA */
}
img{max-width:100%;display:block;height:auto}
a{color:var(--gold);text-decoration:none;transition:color .18s}
a:hover{color:var(--gold-2)}
ul,ol{padding-left:1.25rem}
li{margin:.3rem 0}
p{margin:.7rem 0}
h1,h2,h3,h4{line-height:1.28;font-weight:800;letter-spacing:.2px}
.container{width:min(1180px,92%);margin:0 auto}
.section{padding:56px 0}
.section-sm{padding:38px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 34px}
.section-head .kicker{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,201,51,.4);
  background:rgba(255,201,51,.08);padding:.3rem .8rem;border-radius:999px;margin-bottom:.7rem;
}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2.15rem);color:var(--white)}
.section-head h2 em{font-style:normal;color:var(--red-2)}
.section-head p{color:var(--muted);margin-top:.6rem}
.tint-red{background:linear-gradient(180deg,var(--ink-2),rgba(229,37,44,.06))}
.tint-blue{background:linear-gradient(180deg,var(--ink-2),rgba(62,139,255,.07))}
.tint-green{background:linear-gradient(180deg,var(--ink-2),rgba(46,204,113,.06))}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font);font-weight:800;font-size:.95rem;letter-spacing:.4px;
  padding:.78rem 1.6rem;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;line-height:1.2;transition:transform .15s,box-shadow .15s,filter .15s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-red{background:linear-gradient(180deg,var(--red-2),var(--red) 55%,var(--red-deep));color:#fff;box-shadow:0 6px 20px rgba(229,37,44,.35)}
.btn-red:hover{filter:brightness(1.08);color:#fff}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold) 60%,#e0a91c);color:#231a02;box-shadow:0 6px 20px rgba(255,201,51,.28)}
.btn-gold:hover{filter:brightness(1.06);color:#231a02}
.btn-green{background:linear-gradient(180deg,#43dd86,var(--green) 55%,var(--green-deep));color:#03210f;box-shadow:0 6px 20px rgba(46,204,113,.3)}
.btn-green:hover{filter:brightness(1.07);color:#03210f}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:.5rem 1.05rem;font-size:.84rem}
.btn-lg{padding:.95rem 2.1rem;font-size:1.02rem}

/* ============ Header ============ */
.site-head{
  position:sticky;top:0;z-index:120;
  background:linear-gradient(180deg,rgba(12,12,20,.98),rgba(12,12,20,.92));
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(8px);
}
.head-note{
  background:linear-gradient(90deg,var(--red-deep),var(--red) 45%,#7c0d15);
  text-align:center;font-size:.76rem;font-weight:700;letter-spacing:.5px;
  padding:.32rem .8rem;color:#ffe9e9;
}
.head-note .age{background:#fff;color:#a3101c;border-radius:4px;padding:0 .35rem;font-weight:900;margin-right:.4rem}
.head-bar{display:flex;align-items:center;gap:18px;padding:.65rem 0}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand .logo{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:radial-gradient(circle at 32% 28%,var(--red-2),var(--red) 45%,var(--red-deep));
  border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--gold);font-size:1.05rem;letter-spacing:-.5px;
  box-shadow:0 4px 14px rgba(229,37,44,.4);
}
.brand .name{font-size:1.28rem;font-weight:900;color:#fff;letter-spacing:.3px}
.brand .name span{color:var(--gold)}
.brand .name small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.28em;color:var(--muted);text-transform:uppercase}
.nav{display:flex;gap:4px;margin-left:6px;flex-wrap:wrap}
.nav a{
  color:var(--text);font-weight:700;font-size:.9rem;padding:.5rem .78rem;border-radius:9px;
}
.nav a:hover,.nav a.active{background:rgba(255,201,51,.12);color:var(--gold)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex-shrink:0}
.icon-btn{
  width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--card);color:var(--gold);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .15s;
}
.icon-btn:hover{border-color:var(--gold)}
.burger{display:none}
.head-search{display:none;padding:0 0 .8rem}
.head-search.on{display:block}
.head-search .row{display:flex;gap:8px}
.head-search input{
  flex:1;background:var(--card);border:1.5px solid var(--line);border-radius:10px;
  color:var(--text);padding:.6rem .9rem;font-size:.92rem;font-family:var(--font);min-width:0;
}
.head-search input:focus{outline:none;border-color:var(--gold)}

/* ============ Hero (home) ============ */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    linear-gradient(100deg,rgba(10,10,16,.96) 30%,rgba(10,10,16,.72) 55%,rgba(120,10,16,.5)),
    url("../img/hero.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink));
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:72px 0 96px}
.hero .age-pill{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:800;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.3rem .85rem;
  background:rgba(0,0,0,.35);margin-bottom:1rem;
}
.hero .age-pill b{background:var(--gold);color:#231a02;border-radius:4px;padding:0 .4rem}
.hero h1{font-size:clamp(1.9rem,4.6vw,3.15rem);color:#fff;margin:.4rem 0}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero h1 .red{color:var(--red-2)}
.hero .lede{color:#e4e4f0;max-width:560px;font-size:1.02rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:1.4rem 0 1.1rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px}
.hero-trust .pill{
  font-size:.76rem;font-weight:700;color:#f4f4f8;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);padding:.28rem .7rem;border-radius:999px;
}
.hero-card{
  background:linear-gradient(160deg,rgba(27,27,40,.96),rgba(20,20,31,.96));
  border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);
}
.hero-card .hc-title{display:flex;align-items:center;gap:.6rem;font-weight:900;color:var(--gold);font-size:1.02rem;margin-bottom:.4rem}
.hero-card ul{list-style:none;padding:0;margin:.6rem 0 1rem}
.hero-card li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:#dcdce8;margin:.5rem 0}
.hero-card li .dot{color:var(--green);font-weight:900}
.hero-card .hc-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-card .hc-note{font-size:.72rem;color:var(--muted);margin-top:.8rem;text-align:center}

/* ============ Search strip + tag cloud ============ */
.search-strip{background:var(--ink-2);border-bottom:1px solid var(--line-soft);padding:26px 0}
.search-strip .box{max-width:720px;margin:0 auto;text-align:center}
.search-strip .label{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.search-form{display:flex;gap:9px}
.search-form input{
  flex:1;min-width:0;background:var(--card);border:1.5px solid var(--line);border-radius:999px;
  color:var(--text);padding:.72rem 1.2rem;font-size:.95rem;font-family:var(--font);
}
.search-form input:focus{outline:none;border-color:var(--gold)}
.tag-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.tag-cloud button{
  font-family:var(--font);font-size:.8rem;font-weight:700;color:var(--text);cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.36rem .85rem;
  transition:all .15s;
}
.tag-cloud button:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.tag-cloud button.hot{border-color:rgba(229,37,44,.55);color:#ffb3b6;background:rgba(229,37,44,.12)}

/* ============ Search modal ============ */
.search-modal{
  position:fixed;inset:0;z-index:400;display:none;
  background:rgba(6,6,12,.82);backdrop-filter:blur(5px);
  padding:8vh 5% 5vh;overflow:auto;
}
.search-modal.on{display:block}
.search-panel{max-width:680px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.search-panel .sp-head{display:flex;gap:9px;padding:16px;border-bottom:1px solid var(--line-soft);background:var(--card)}
.search-panel input{flex:1;min-width:0;background:var(--ink-2);border:1.5px solid var(--line);border-radius:10px;color:var(--text);padding:.6rem .9rem;font-size:.95rem;font-family:var(--font)}
.search-panel input:focus{outline:none;border-color:var(--gold)}
.sp-results{max-height:52vh;overflow:auto;padding:8px}
.sp-results .item{display:block;padding:11px 13px;border-radius:10px}
.sp-results .item:hover{background:var(--card)}
.sp-results .item b{color:var(--gold);font-size:.92rem;display:block}
.sp-results .item span{font-size:.8rem;color:var(--muted)}
.sp-results .none{padding:18px;text-align:center;color:var(--muted);font-size:.9rem}
.sp-tip{font-size:.72rem;color:var(--muted);padding:10px 16px;border-top:1px solid var(--line-soft)}

/* ============ Feature grids ============ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{
  background:linear-gradient(165deg,var(--card),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  transition:transform .18s,border-color .18s;
}
.feat:hover{transform:translateY(-4px);border-color:rgba(255,201,51,.5)}
.feat .ico{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:14px;
}
.ico.red{background:rgba(229,37,44,.15);border:1px solid rgba(229,37,44,.4)}
.ico.gold{background:rgba(255,201,51,.14);border:1px solid rgba(255,201,51,.4)}
.ico.green{background:rgba(46,204,113,.14);border:1px solid rgba(46,204,113,.4)}
.ico.blue{background:rgba(62,139,255,.14);border:1px solid rgba(62,139,255,.4)}
.feat h3{font-size:1.05rem;color:#fff;margin-bottom:.4rem}
.feat p{font-size:.88rem;color:var(--muted);margin:0}

/* split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.split .img-wrap{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.split h2{font-size:clamp(1.4rem,3vw,1.9rem);color:#fff;margin-bottom:.8rem}
.split h2 em{font-style:normal;color:var(--red-2)}
.check-list{list-style:none;padding:0;margin:1rem 0}
.check-list li{display:flex;gap:.65rem;align-items:flex-start;margin:.6rem 0;font-size:.93rem;color:#dcdce8}
.check-list .tick{color:var(--green);font-weight:900;flex-shrink:0}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.pay-badge{
  font-size:.76rem;font-weight:800;letter-spacing:.4px;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;
}
.pay-badge b{color:var(--gold)}

/* ============ Category cards (home) ============ */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);transition:transform .18s,border-color .18s;display:block;color:var(--text);
}
.cat-card:hover{transform:translateY(-5px);border-color:rgba(255,201,51,.55);color:var(--text)}
.cat-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cat-card .cc-body{padding:15px 16px 17px}
.cat-card .cc-tag{font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cat-card h3{font-size:1.02rem;color:#fff;margin:.25rem 0 .3rem}
.cat-card p{font-size:.8rem;color:var(--muted);margin:0}

/* ============ Testimonials ============ */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testi{
  background:linear-gradient(165deg,var(--card),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:relative;
}
.testi::before{
  content:"\201C";position:absolute;top:6px;right:16px;font-size:3.4rem;line-height:1;
  color:rgba(255,201,51,.25);font-family:Georgia,serif;
}
.testi .stars{color:var(--gold);letter-spacing:2px;font-size:.85rem}
.testi p{font-size:.88rem;color:#d8d8e4;margin:.55rem 0 .8rem}
.testi .who{display:flex;align-items:center;gap:.7rem}
.testi .ava{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.95rem;color:#fff;flex-shrink:0;
}
.testi .who b{font-size:.88rem;color:#fff;display:block}
.testi .who span{font-size:.74rem;color:var(--muted)}
.ava.a-red{background:linear-gradient(140deg,var(--red-2),var(--red-deep))}
.ava.a-gold{background:linear-gradient(140deg,var(--gold-2),#d99e12);color:#231a02}
.ava.a-green{background:linear-gradient(140deg,#43dd86,var(--green-deep));color:#03210f}
.ava.a-blue{background:linear-gradient(140deg,#6fabff,var(--blue-deep))}

/* ============ Responsible hub (innovative section) ============ */
.resp-hub{
  background:
    radial-gradient(900px 380px at 15% -10%,rgba(46,204,113,.13),transparent 60%),
    radial-gradient(700px 340px at 92% 8%,rgba(62,139,255,.12),transparent 60%),
    var(--ink-2);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.resp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.resp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.resp-card h3{font-size:1rem;color:#fff;display:flex;gap:.5rem;align-items:center;margin-bottom:.4rem}
.resp-card p{font-size:.86rem;color:var(--muted)}
.self-check{
  margin-top:22px;background:linear-gradient(160deg,var(--card-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
}
.self-check h3{color:#fff;font-size:1.1rem;margin-bottom:.3rem}
.self-check .hint{font-size:.8rem;color:var(--muted);margin-bottom:1rem}
.check-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.check-opts label{
  display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:#d8d8e4;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;
  cursor:pointer;transition:border-color .15s;
}
.check-opts label:hover{border-color:var(--gold)}
.check-opts input{accent-color:var(--green);margin-top:.22rem}
.check-result{margin-top:1rem;font-size:.9rem;color:var(--text);display:none;
  border-left:4px solid var(--green);background:rgba(46,204,113,.08);border-radius:0 10px 10px 0;padding:.85rem 1rem}
.check-result.warn{border-left-color:var(--red);background:rgba(229,37,44,.08)}

/* ============ Security section ============ */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sec-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
.sec-item .ico{margin:0 auto 12px}
.sec-item h3{font-size:.94rem;color:#fff;margin-bottom:.3rem}
.sec-item p{font-size:.8rem;color:var(--muted);margin:0}

/* ============ Prose (article typography) ============ */
.prose{color:#d6d6e2;font-size:.98rem}
.prose h2{font-size:1.35rem;color:#fff;margin:1.6rem 0 .6rem;padding-left:.85rem;border-left:4px solid var(--red)}
.prose h3{font-size:1.08rem;color:var(--gold);margin:1.2rem 0 .4rem}
.prose p{margin:.65rem 0}
.prose ul,.prose ol{margin:.6rem 0}
.prose strong{color:#fff}
.prose .note{
  background:rgba(62,139,255,.1);border:1px solid rgba(62,139,255,.35);border-radius:12px;
  padding:.85rem 1.05rem;font-size:.88rem;color:#cfdcfe;margin:1rem 0;
}
.prose .note.warn{background:rgba(229,37,44,.09);border-color:rgba(229,37,44,.4);color:#ffd9db}
.prose .note.good{background:rgba(46,204,113,.09);border-color:rgba(46,204,113,.4);color:#d2f7e2}
.article-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start;
}
.article-main{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow);min-width:0}
.article-fig{border-radius:14px;overflow:hidden;margin:6px 0 8px;border:1px solid var(--line)}
.article-fig figcaption{font-size:.75rem;color:var(--muted);padding:.5rem .2rem 0;text-align:center}
.article-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.78rem;color:var(--muted);margin-bottom:.6rem}
.article-meta .pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.16rem .7rem;font-weight:700;color:var(--gold)}
.article-meta time{color:var(--muted)}
.article-side{min-width:0}
.article-side .side-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px}
.article-side h3{font-size:.98rem;color:var(--gold);margin-bottom:.7rem}
.article-side ul{list-style:none;padding:0}
.article-side li{padding:.5rem 0;border-bottom:1px dashed var(--line-soft);font-size:.88rem}
.article-side li:last-child{border-bottom:0}
.article-side li a{color:var(--text);font-weight:700}
.article-side li a:hover{color:var(--gold)}
.side-cta{background:linear-gradient(160deg,rgba(229,37,44,.16),var(--panel));border-color:rgba(229,37,44,.45)}

/* ============ Tables ============ */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:1rem 0;-webkit-overflow-scrolling:touch}
table.terms{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
table.terms th{background:var(--card-2);color:var(--gold);text-align:left;padding:.7rem .9rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
table.terms td{padding:.7rem .9rem;border-top:1px solid var(--line-soft);color:#d6d6e2;vertical-align:top}
table.terms td:first-child{color:#fff;font-weight:700;white-space:nowrap}

/* ============ Steps ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative}
.step::before{
  counter-increment:step;content:counter(step);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#231a02;background:linear-gradient(160deg,var(--gold-2),var(--gold));
  margin-bottom:10px;font-size:.95rem;
}
.step h3{font-size:.95rem;color:#fff;margin-bottom:.3rem}
.step p{font-size:.82rem;color:var(--muted);margin:0}

/* ============ FAQ ============ */
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:10px}
details.acc{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
details.acc summary{
  cursor:pointer;list-style:none;padding:15px 44px 15px 18px;position:relative;
  font-weight:800;color:#fff;font-size:.94rem;
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--gold);font-weight:900;transition:transform .2s;
}
details.acc[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details.acc[open] summary{border-bottom:1px dashed var(--line-soft)}
details.acc .acc-body{padding:13px 18px 16px;font-size:.88rem;color:#cfcfdd}
details.acc .acc-body p{margin:.35rem 0}
details.acc .acc-body a{font-weight:700}

/* ============ Inner page hero ============ */
.page-hero{position:relative;color:#fff;overflow:hidden;background:var(--ink-2)}
.page-hero .bg{position:absolute;inset:0}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.page-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--ink) 25%,rgba(10,10,16,.55) 60%,rgba(229,37,44,.25))}
.page-hero .inner{position:relative;z-index:2;padding:52px 0 44px;max-width:840px}
.page-hero h1{font-size:clamp(1.7rem,4vw,2.5rem);color:#fff;margin:.5rem 0}
.page-hero h1 em{font-style:normal;color:var(--gold)}
.page-hero .lede{color:#e2e2ee;font-size:1rem;max-width:680px}
.page-hero .ph-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.2rem}
.age-badge{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:900;
  background:var(--gold);color:#231a02;border-radius:6px;padding:.16rem .5rem;letter-spacing:.5px;
}

/* ============ Breadcrumb ============ */
.crumbs{font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs .sep{color:var(--red-2)}
.crumbs b{color:var(--gold);font-weight:700}

/* ============ Promo cards ============ */
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.promo-card{
  background:linear-gradient(170deg,var(--card),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,border-color .18s;
}
.promo-card:hover{transform:translateY(-4px);border-color:rgba(255,201,51,.5)}
.promo-card figure{position:relative;margin:0}
.promo-card figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.promo-card figure .p-tag{
  position:absolute;top:10px;left:10px;font-size:.68rem;font-weight:900;letter-spacing:.08em;
  background:var(--red);color:#fff;border-radius:6px;padding:.2rem .55rem;text-transform:uppercase;
}
.promo-card .pc-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.promo-card h2,.promo-card h3{font-size:1.02rem;color:#fff}
.promo-card .period{font-size:.76rem;color:var(--gold);font-weight:700}
.promo-card p{font-size:.84rem;color:var(--muted);margin:0;flex:1}
.promo-card .terms-mini{font-size:.74rem;color:var(--muted-2);border-top:1px dashed var(--line-soft);padding-top:8px}

/* ============ Forms ============ */
.form-shell{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow)}
.form-card h1,.form-card .form-title{font-size:1.5rem;color:#fff;margin-bottom:.2rem}
.form-card .form-sub{font-size:.86rem;color:var(--muted);margin-bottom:1.2rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.8rem;font-weight:800;color:#d8d8e4;margin-bottom:.35rem;letter-spacing:.03em}
.field label span{color:var(--red-2)}
.field input[type=text],.field input[type=password],.field input[type=email],.field input[type=tel]{
  width:100%;background:var(--ink-2);border:1.5px solid var(--line);border-radius:10px;
  color:var(--text);padding:.72rem .95rem;font-size:.95rem;font-family:var(--font);
}
.field input:focus{outline:none;border-color:var(--gold)}
.field .hint{font-size:.72rem;color:var(--muted-2);margin-top:.3rem}
.field.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:#c9c9d6}
.field.check input{margin-top:.22rem;accent-color:var(--red)}
.form-note{font-size:.74rem;color:var(--muted);margin-top:1rem;line-height:1.6}
.form-alt{text-align:center;font-size:.86rem;color:var(--muted);margin-top:1.1rem}
.form-alt a{font-weight:800}
.benefit-list{list-style:none;padding:0}
.benefit-list li{display:flex;gap:.7rem;align-items:flex-start;margin:.75rem 0;font-size:.9rem;color:#d8d8e4}

/* ============ CTA band ============ */
.cta-band{
  background:
    radial-gradient(700px 300px at 85% 20%,rgba(255,201,51,.16),transparent 60%),
    linear-gradient(120deg,var(--red-deep),var(--red) 55%,#8c0e18);
  border-radius:20px;padding:40px 34px;text-align:center;color:#fff;
  border:1px solid rgba(255,201,51,.35);position:relative;overflow:hidden;
}
.cta-band h2{font-size:clamp(1.3rem,3vw,1.8rem);color:#fff;margin-bottom:.5rem}
.cta-band p{color:#ffe3e3;font-size:.92rem;max-width:620px;margin:0 auto 1.2rem}
.cta-band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-band .fine{font-size:.72rem;color:#ffc9c9;margin-top:1rem}

/* ============ Footer ============ */
.site-foot{background:#07070c;border-top:1px solid var(--line-soft);padding:48px 0 26px;position:relative}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot-grid h3{font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.foot-grid ul{list-style:none;padding:0}
.foot-grid li{margin:.45rem 0}
.foot-grid a{color:#b9b9c9;font-size:.86rem}
.foot-grid a:hover{color:var(--gold)}
.foot-brand p{font-size:.82rem;color:var(--muted);margin-top:.8rem;max-width:300px}
.foot-pay{display:flex;flex-wrap:wrap;gap:7px;margin-top:1rem}
.foot-legal{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:.74rem;color:var(--muted-2);line-height:1.7;
}
.foot-legal .age-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:.7rem}
.foot-legal .chip18{border:2px solid var(--red-2);color:#ff8f93;font-weight:900;border-radius:8px;padding:.05rem .5rem}
.foot-copy{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between}

/* ============ Floating CTA (slot bar + coins) ============ */
.float-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:300;height:78px;
  background:linear-gradient(180deg,#191225,#120d1c 60%,#0d0a14);
  border-top:2px solid var(--gold);
  box-shadow:0 -10px 30px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
}
.float-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,201,51,.05) 26px 28px);
}
.fc-inner{display:flex;align-items:center;gap:18px;width:min(1180px,94%);position:relative;z-index:3}
.fc-reels{display:flex;gap:7px;flex-shrink:0}
.reel{
  width:40px;height:46px;border-radius:9px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#fdf6e3,#e8d9a8);border:2px solid var(--gold);
  box-shadow:inset 0 -14px 12px -10px rgba(0,0,0,.35);
}
.reel .strip{
  position:absolute;left:0;right:0;top:0;
  animation:reelspin 2.6s linear infinite;
}
.reel .strip span{display:block;height:46px;line-height:46px;text-align:center;font-size:1.25rem}
.reel:nth-child(2) .strip{animation-duration:3.1s}
.reel:nth-child(3) .strip{animation-duration:2.2s}
@keyframes reelspin{
  0%{transform:translateY(0)}
  100%{transform:translateY(-276px)}
}
.fc-label{color:var(--gold);font-weight:900;font-size:.86rem;letter-spacing:.06em;line-height:1.3;display:none}
.fc-label small{display:block;color:var(--muted);font-weight:700;font-size:.68rem;letter-spacing:.02em}
.fc-btns{display:flex;gap:12px;margin-left:auto;flex-shrink:0}
.fc-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-width:150px;padding:.85rem 1.6rem;border-radius:12px;font-family:var(--font);
  font-weight:900;font-size:1rem;letter-spacing:.05em;text-decoration:none;
  transition:transform .15s,filter .15s;overflow:visible;
}
.fc-btn:active{transform:scale(.96)}
.fc-btn.daftar{
  color:#fff;background:linear-gradient(180deg,var(--red-2),var(--red) 55%,var(--red-deep));
  border:2px solid var(--gold);box-shadow:0 0 22px rgba(229,37,44,.55),inset 0 1px 0 rgba(255,255,255,.25);
}
.fc-btn.login{
  color:#03210f;background:linear-gradient(180deg,#54e694,var(--green) 55%,var(--green-deep));
  border:2px solid #0b3d24;box-shadow:0 0 20px rgba(46,204,113,.45),inset 0 1px 0 rgba(255,255,255,.3);
}
.fc-btn:hover{filter:brightness(1.1)}
.fc-btn .glow{
  position:absolute;inset:0;border-radius:12px;
  animation:pulse-glow 1.8s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 14px rgba(255,201,51,.35)}
  50%{box-shadow:0 0 30px rgba(255,201,51,.75)}
}
/* falling coins */
.coin{
  position:absolute;width:16px;height:16px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#fff3c2,var(--gold) 55%,#c78f12);
  border:1.5px solid #a97c0d;
  font-size:.5rem;font-weight:900;color:#7a5806;display:flex;align-items:center;justify-content:center;
  animation:coinfall linear infinite;
}
@keyframes coinfall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  8%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(-118px) rotate(340deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .reel .strip,.coin,.fc-btn .glow{animation:none}
}

/* ============ Utilities ============ */
.center{text-align:center}
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.1rem}.mt-3{margin-top:1.8rem}
.text-gold{color:var(--gold)}.text-red{color:var(--red-2)}.text-green{color:var(--green)}.text-blue{color:var(--blue)}
.small{font-size:.8rem;color:var(--muted)}
.divider{height:1px;background:var(--line-soft);border:0;margin:34px 0}

/* ============ Responsive ============ */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .head-bar{position:relative}
  .mobile-nav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:130;
    background:#101018;border-bottom:1px solid var(--line);padding:10px 4%;
  }
  .mobile-nav.on{display:block}
  .mobile-nav a{display:block;padding:.75rem .6rem;color:var(--text);font-weight:700;border-bottom:1px dashed var(--line-soft)}
  .mobile-nav a:last-child{border-bottom:0}
  .hero-inner{grid-template-columns:1fr;padding:54px 0 80px}
  .article-wrap{grid-template-columns:1fr}
  .article-side{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
  .resp-grid{grid-template-columns:1fr 1fr}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .promo-grid{grid-template-columns:repeat(2,1fr)}
  .form-shell{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .fc-label{display:block}
}
@media (max-width:760px){
  .section{padding:42px 0}
  .head-actions .btn-head{display:none}
  .split{grid-template-columns:1fr;gap:22px}
  .article-side{grid-template-columns:1fr}
  .article-main{padding:22px}
  .form-card{padding:22px}
  .cta-band{padding:30px 20px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px}
  .check-opts{grid-template-columns:1fr}
  body{padding-bottom:80px}
  .float-cta{height:72px}
  .fc-inner{gap:10px}
  .fc-reels{display:none}
  .fc-label{display:none}
  .fc-btn{min-width:0;flex:1;padding:.8rem .8rem;font-size:.95rem}
  .fc-btns{width:100%;gap:10px}
}
@media (max-width:520px){
  .feat-grid,.cat-grid,.testi-grid,.resp-grid,.sec-grid,.steps,.promo-grid{grid-template-columns:1fr}
  .hero-cta .btn{flex:1;min-width:150px}
  .hero-card .hc-cta{grid-template-columns:1fr 1fr}
  .brand .name{font-size:1.05rem}
  .brand .logo{width:38px;height:38px;font-size:.9rem}
  .foot-grid{grid-template-columns:1fr}
  .search-form{flex-direction:column}
  .search-form .btn{width:100%}
  .prose h2{font-size:1.18rem}
  .page-hero .inner{padding:38px 0 34px}
}
@media (max-width:360px){
  .fc-btn{font-size:.88rem;padding:.75rem .5rem}
}