/* ============================================================
   Wangi4d — style.css
   Tema  : Casino premium (merah · emas · hijau · biru · hitam)
   Frame : penamaan kelas mengikuti konvensi tema WordPress
           (site-header, main-navigation, entry-content, dst.)
   Catatan: semua layout memakai grid/flex minmax(0,1fr),
            clamp() untuk tipografi, dan overflow-x:clip
            agar tidak ada konten meluber di layar kecil.
   ============================================================ */

:root{
  --red:        #C8102E;
  --red-dark:   #8E0E20;
  --red-deeper: #5E0915;
  --gold:       #F7C948;
  --gold-deep:  #E0A526;
  --gold-soft:  #FFF3D6;
  --green:      #0E9F6E;
  --green-soft: #E7F7F0;
  --blue:       #2456D6;
  --blue-soft:  #EBF0FE;
  --ink:        #171720;
  --ink-2:      #262633;
  --paper:      #FFFFFF;
  --cream:      #FFF9EF;
  --line:       #EAE3D3;
  --muted:      #5D5D6C;
  --radius:     16px;
  --shadow:     0 10px 30px rgba(23,23,32,.10);
  --shadow-lg:  0 22px 50px rgba(94,9,21,.18);
  --container:  1180px;
}

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

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

body{
  margin:0;
  overflow-x:clip;
  min-width:0;
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:clamp(15px,.4vw + 14px,16.5px);
  line-height:1.75;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ padding-left:1.25em; }
h1,h2,h3,h4{ line-height:1.25; color:var(--ink); overflow-wrap:break-word; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,28px);
}

.section{ padding-block:clamp(44px,7vw,86px); }
.section--cream{ background:var(--cream); }
.section--dark{ background:var(--ink-2); color:#F4F2EC; }
.section--dark h2,.section--dark h3{ color:#FFFDF7; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--red); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ============ Topbar pemberitahuan 18+ ============ */
.topbar{
  background:linear-gradient(90deg,var(--red-deeper),var(--red-dark) 50%,var(--red-deeper));
  color:#FFEFD6; font-size:.82rem; letter-spacing:.2px;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:34px; text-align:center; padding-block:4px;
}
.topbar b{ color:var(--gold); }

/* ============ Site header ============ */
.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 18px rgba(23,23,32,.06);
}
.site-header__inner{
  display:flex; align-items:center; gap:14px;
  min-height:66px; padding-block:8px;
}
.site-branding{
  display:flex; align-items:center; gap:10px;
  color:var(--ink); text-decoration:none; flex-shrink:0;
}
.site-branding:hover{ text-decoration:none; }
.site-branding img{ width:42px; height:42px; }
.site-branding__name{
  font-size:1.3rem; font-weight:900; letter-spacing:.3px; color:var(--red-dark);
  line-height:1.05;
}
.site-branding__name span{ color:var(--gold-deep); }
.site-branding__domain{ font-size:.62rem; color:var(--muted); letter-spacing:2px; text-transform:uppercase; }

.main-navigation{ margin-left:auto; }
.main-navigation ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
}
.main-navigation a{
  display:block; padding:9px 12px; border-radius:10px;
  color:var(--ink-2); font-weight:600; font-size:.92rem; white-space:nowrap;
}
.main-navigation a:hover,.main-navigation .current-menu-item a{
  background:var(--gold-soft); color:var(--red-dark); text-decoration:none;
}

.nav-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; border-radius:999px; font-weight:800; font-size:.92rem;
  border:2px solid transparent; cursor:pointer; line-height:1.2;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn--gold{
  background:linear-gradient(180deg,#FFE083,var(--gold) 45%,var(--gold-deep));
  color:var(--red-deeper); border-color:#C8901B;
  box-shadow:0 6px 16px rgba(224,165,38,.45);
}
.btn--red{
  background:linear-gradient(180deg,#E1415C,var(--red) 55%,var(--red-dark));
  color:#fff; box-shadow:0 6px 16px rgba(200,16,46,.35);
}
.btn--ghost{ background:#fff; color:var(--red-dark); border-color:var(--red); }
.btn--block{ width:100%; }
.btn--lg{ padding:14px 30px; font-size:1.02rem; }

.search-widget{ position:relative; flex-shrink:0; }
.search-widget__field{
  display:flex; align-items:center; gap:6px;
  background:var(--cream); border:1.5px solid var(--line);
  border-radius:999px; padding:4px 6px 4px 14px;
}
.search-widget input{
  border:0; outline:0; background:transparent; font:inherit;
  width:150px; color:var(--ink); padding-block:5px;
}
.search-widget input::placeholder{ color:#9A937F; }
.search-widget__btn{
  border:0; cursor:pointer; border-radius:999px; width:34px; height:34px;
  background:linear-gradient(180deg,var(--red),var(--red-dark)); color:#FFD98A;
  font-size:1rem; display:grid; place-items:center;
}
.search-results{
  position:absolute; top:calc(100% + 8px); right:0; z-index:1200;
  width:min(360px,88vw); max-height:340px; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:6px; display:none;
}
.search-results.is-open{ display:block; }
.search-results__item{
  display:block; padding:10px 12px; border-radius:10px; color:var(--ink-2);
}
.search-results__item:hover{ background:var(--gold-soft); text-decoration:none; }
.search-results__item b{ display:block; font-size:.92rem; color:var(--red-dark); }
.search-results__item small{ color:var(--muted); font-size:.8rem; line-height:1.4; display:block; }
.search-results__empty{ padding:12px; color:var(--muted); font-size:.9rem; }

.nav-toggle{
  margin-left:auto; display:none; flex-direction:column; gap:5px;
  background:transparent; border:0; cursor:pointer; padding:10px;
}
.nav-toggle span{
  width:24px; height:3px; border-radius:2px;
  background:var(--red-dark); transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ============ Hero ============ */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(1000px 480px at 85% -10%, rgba(247,201,72,.20), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(14,159,110,.14), transparent 55%),
    linear-gradient(160deg,var(--red-deeper) 0%, var(--red-dark) 48%, #71101F 100%);
  color:#FFF7E8;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.10;
  background-image:
    linear-gradient(rgba(255,215,130,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,130,.5) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(720px 480px at 70% 30%, #000 30%, transparent 75%);
}
.hero__inner{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,5vw,56px); align-items:center;
  padding-block:clamp(46px,7vw,90px);
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,220,140,.35);
  color:#FFE9AE; border-radius:999px; padding:7px 16px;
  font-size:.82rem; font-weight:700; letter-spacing:.4px;
}
.badge-18{
  display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:50%; background:var(--gold); color:var(--red-deeper);
  font-weight:900; font-size:.72rem; border:2px solid #FFF0C4; flex-shrink:0;
}
.hero h1{
  color:#FFFDF5; margin:20px 0 14px;
  font-size:clamp(1.85rem,1.1vw + 1.5rem,3.1rem);
  font-weight:900; letter-spacing:-.4px;
}
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero__lede{
  margin:0 0 22px; max-width:56ch; color:#FFEBD0; font-size:clamp(1rem,.3vw + .95rem,1.13rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero__meta{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 22px;
  font-size:.85rem; color:#FFDFA8;
}
.hero__meta i{ font-style:normal; display:inline-flex; align-items:center; gap:7px; }
.hero__meta i::before{ content:"✓"; color:var(--gold); font-weight:900; }

.hero__figure{ position:relative; }
.hero__figure img{
  border-radius:22px; border:3px solid rgba(255,224,131,.55);
  box-shadow:0 30px 60px rgba(38,3,10,.45);
}
.hero__figure::after{
  content:"18+ HANYA DEWASA"; position:absolute; top:-14px; right:-6px;
  background:var(--gold); color:var(--red-deeper);
  font-size:.72rem; font-weight:900; letter-spacing:1px;
  padding:7px 14px; border-radius:999px;
  border:2px solid #fff; box-shadow:0 8px 18px rgba(38,3,10,.35);
}

/* ============ Kepala section ============ */
.section-head{ max-width:760px; margin:0 auto clamp(26px,4vw,44px); text-align:center; }
.section-head--left{ margin-inline:0; text-align:left; }
.section-head h2{
  margin:0 0 10px; font-size:clamp(1.5rem,.8vw + 1.25rem,2.2rem); font-weight:900;
}
.section-head h2 mark{ background:linear-gradient(transparent 62%, rgba(247,201,72,.75) 62%); color:inherit; padding-inline:2px; }
.section-head p{ margin:0; color:var(--muted); }
.section--dark .section-head p{ color:#D8D3C6; }
.kicker{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--red); margin-bottom:10px;
}
.section--dark .kicker{ color:var(--gold); }

/* ============ Kartu umum ============ */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px); box-shadow:var(--shadow);
  min-width:0;
}

/* ============ Langkah 4 panduan ============ */
.steps-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px);
}
.step-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 20px 22px; box-shadow:var(--shadow);
  counter-increment:step;
}
.step-card__num{
  position:absolute; top:-16px; left:20px;
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center; font-weight:900; color:var(--red-deeper);
  background:linear-gradient(180deg,#FFE083,var(--gold) 50%,var(--gold-deep));
  border:2px solid #fff; box-shadow:0 6px 14px rgba(224,165,38,.5);
}
.step-card h3{ margin:8px 0 8px; font-size:1.06rem; }
.step-card p{ margin:0; color:var(--muted); font-size:.92rem; }
.step-card .icon-chip{ font-size:1.5rem; }

/* ============ Grid keunggulan / mengapa ============ */
.feature-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); }
.feature-card{ display:flex; gap:14px; align-items:flex-start; min-width:0; }
.feature-card__icon{
  flex-shrink:0; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; font-size:1.35rem;
  background:var(--gold-soft); border:1.5px solid #EED9A4;
}
.feature-card__icon--green{ background:var(--green-soft); border-color:#BEE5D5; }
.feature-card__icon--blue{ background:var(--blue-soft); border-color:#C4D2F7; }
.feature-card__icon--red{ background:#FDE9ED; border-color:#F3C1CC; }
.feature-card h3{ margin:2px 0 6px; font-size:1.02rem; }
.feature-card p{ margin:0; color:var(--muted); font-size:.92rem; }

/* ============ Section mobile ============ */
.mobile-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,5vw,54px); align-items:center;
}
.phone-mock{
  position:relative; max-width:330px; margin-inline:auto;
  border-radius:38px; padding:12px;
  background:linear-gradient(180deg,#2B2B38,#17171F);
  box-shadow:0 30px 60px rgba(23,23,32,.35), inset 0 0 0 2px #3A3A4A;
}
.phone-mock img{ border-radius:28px; }
.phone-mock::before{
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:90px; height:14px; border-radius:999px; background:#0C0C12; z-index:2;
}
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; }
.check-list li::before{
  content:"✓"; flex-shrink:0; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; font-size:.85rem;
  background:var(--green-soft); color:var(--green); border:1.5px solid #BEE5D5;
  margin-top:3px;
}
.check-list b{ display:block; }
.check-list p{ margin:2px 0 0; color:var(--muted); font-size:.92rem; }

/* ============ Ulasan pembaca ============ */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); }
.review-card{ position:relative; }
.review-card__stars{ color:var(--gold-deep); letter-spacing:2px; font-size:.95rem; }
.review-card blockquote{
  margin:10px 0 16px; font-size:.95rem; color:var(--ink-2);
}
.review-card__who{ display:flex; align-items:center; gap:12px; }
.review-card__ava{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-weight:900; color:#fff; font-size:.95rem;
}
.review-card__who b{ display:block; font-size:.95rem; }
.review-card__who small{ color:var(--muted); }
.reviews-note{ text-align:center; color:var(--muted); font-size:.8rem; margin-top:18px; }

/* ============ Mitos vs Fakta (board inovatif) ============ */
.mf-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,22px); }
.mf-card{
  border-radius:var(--radius); padding:20px 22px; min-width:0;
  border:1.5px solid transparent;
}
.mf-card--myth{ background:#FDF1F3; border-color:#F3C6CF; }
.mf-card--fact{ background:var(--green-soft); border-color:#BEE5D5; }
.mf-card__tag{
  display:inline-block; font-size:.72rem; font-weight:900; letter-spacing:1.5px;
  padding:4px 12px; border-radius:999px; margin-bottom:10px; text-transform:uppercase;
}
.mf-card--myth .mf-card__tag{ background:#F6D4DB; color:var(--red-dark); }
.mf-card--fact .mf-card__tag{ background:#CDEBDD; color:#0A6B4A; }
.mf-card h3{ margin:0 0 6px; font-size:1rem; }
.mf-card p{ margin:0; font-size:.92rem; color:var(--ink-2); }

/* ============ Keamanan & privasi ============ */
.sec-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px); }
.sec-card{ text-align:center; }
.sec-card__icon{
  width:58px; height:58px; margin:0 auto 14px; border-radius:18px;
  display:grid; place-items:center; font-size:1.6rem;
  background:var(--blue-soft); border:1.5px solid #C4D2F7;
}
.sec-card h3{ font-size:1rem; margin:0 0 6px; }
.sec-card p{ margin:0; font-size:.9rem; color:var(--muted); }
.notice{
  margin-top:26px; border-radius:14px; padding:16px 20px;
  background:var(--gold-soft); border:1.5px solid #EBD9A8;
  display:flex; gap:12px; align-items:flex-start; font-size:.92rem;
}
.notice__icon{ font-size:1.2rem; flex-shrink:0; }
.notice p{ margin:0; }
.notice--green{ background:var(--green-soft); border-color:#BEE5D5; }

/* ============ Perjudian bertanggung jawab ============ */
.rg-wrap{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(22px,4vw,40px); align-items:start;
}
.rg-rules{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.rg-rules li{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,224,131,.25);
  border-radius:14px; padding:14px 18px; display:flex; gap:12px;
}
.rg-rules b{ color:var(--gold); }
.rg-rules p{ margin:2px 0 0; font-size:.92rem; color:#E4DFD2; }
.rg-box{
  background:#fff; color:var(--ink); border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px); box-shadow:var(--shadow-lg);
}
.rg-box h3{ margin:0 0 10px; font-size:1.1rem; }
.rg-box ul{ margin:0 0 16px; }
.rg-box li{ margin-bottom:8px; }
.rg-tools{ display:grid; gap:10px; }
.rg-tools a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1.5px solid var(--line); border-radius:12px; padding:12px 16px;
  font-weight:700; color:var(--ink-2);
}
.rg-tools a:hover{ border-color:var(--green); text-decoration:none; background:var(--green-soft); }
.rg-tools a::after{ content:"→"; color:var(--green); font-weight:900; }

/* ============ FAQ ============ */
.faq-list{ display:grid; gap:12px; max-width:860px; margin-inline:auto; }
.faq-list details{
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
}
.faq-list summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px;
  padding:16px 18px; font-weight:800; color:var(--ink);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"+"; margin-left:auto; flex-shrink:0; width:30px; height:30px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--red-dark); font-weight:900;
  transition:transform .2s ease;
}
.faq-list details[open] summary::after{ content:"−"; transform:rotate(180deg); }
.faq-list details[open] summary{ color:var(--red-dark); }
.faq-list .faq-body{ padding:0 18px 18px; color:var(--muted); }
.faq-list .faq-body p{ margin:0; }

/* ============ Tag cloud pencarian populer ============ */
.tag-cloud{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px;
}
.tag-cloud a{
  background:#fff; border:1.5px solid var(--line); color:var(--ink-2);
  padding:8px 16px; border-radius:999px; font-size:.86rem; font-weight:600;
}
.tag-cloud a:hover{
  border-color:var(--gold-deep); background:var(--gold-soft);
  color:var(--red-dark); text-decoration:none; transform:translateY(-2px);
}
.tag-cloud .hot{
  border-color:#F3C1CC; background:#FDF1F3; color:var(--red-dark);
}
.tag-cloud .hot::before{ content:"🔥 "; }

/* ============ Breadcrumbs ============ */
.breadcrumbs-bar{ background:var(--cream); border-bottom:1px solid var(--line); }
.breadcrumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-block:10px; font-size:.82rem; color:var(--muted); }
.breadcrumbs a{ color:var(--red-dark); font-weight:600; }
.breadcrumbs li{ list-style:none; display:flex; align-items:center; gap:8px; }
.breadcrumbs ul{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.breadcrumbs li+li::before{ content:"›"; color:var(--gold-deep); font-weight:900; }
.breadcrumbs [aria-current]{ color:var(--ink-2); font-weight:700; }

/* ============ Halaman artikel / kategori ============ */
.page-hero{
  background:
    radial-gradient(800px 300px at 90% 0%, rgba(247,201,72,.16), transparent 60%),
    linear-gradient(160deg,var(--red-deeper),var(--red-dark) 70%,#71101F);
  color:#FFF7E8;
}
.page-hero__inner{ padding-block:clamp(34px,5vw,58px); max-width:900px; }
.page-hero h1{
  color:#FFFDF5; margin:10px 0 12px;
  font-size:clamp(1.6rem,.9vw + 1.3rem,2.4rem); font-weight:900;
}
.page-hero p{ margin:0; color:#FFE9CE; }
.page-hero .kicker{ color:var(--gold); }

.layout-single{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(24px,4vw,44px); padding-block:clamp(34px,5vw,60px); align-items:start; }
.entry-content{ min-width:0; }
.entry-header{ margin-bottom:22px; }
.entry-title{ font-size:clamp(1.5rem,.8vw + 1.25rem,2.15rem); font-weight:900; margin:8px 0 10px; }
.entry-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.82rem; color:var(--muted); }
.entry-content .post-thumb{ margin:0 0 26px; }
.post-thumb img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; object-fit:cover; }
.post-thumb figcaption{ font-size:.8rem; color:var(--muted); margin-top:10px; text-align:center; }

.entry-content h2{
  font-size:clamp(1.25rem,.6vw + 1.05rem,1.6rem); font-weight:900;
  margin:38px 0 14px; padding-left:14px;
  border-left:5px solid var(--gold);
}
.entry-content h3{ font-size:1.1rem; font-weight:800; margin:26px 0 10px; }
.entry-content p{ margin:0 0 16px; }
.entry-content ul,.entry-content ol{ margin:0 0 18px; }
.entry-content li{ margin-bottom:8px; }
.entry-content blockquote{
  margin:24px 0; padding:18px 22px; border-radius:14px;
  background:var(--cream); border-left:5px solid var(--red);
  font-style:italic;
}
.entry-content blockquote p{ margin:0; }
.entry-content table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:.92rem; }
.entry-content th,.entry-content td{ border:1px solid var(--line); padding:10px 14px; text-align:left; vertical-align:top; }
.entry-content th{ background:var(--gold-soft); color:var(--red-deeper); font-weight:800; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.article-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:clamp(14px,2vw,22px); }
.article-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.article-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.article-card__thumb{ aspect-ratio:16/9; overflow:hidden; }
.article-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.article-card__body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.article-card__tag{
  align-self:flex-start; font-size:.7rem; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--red); background:#FDE9ED;
  border-radius:999px; padding:4px 12px;
}
.article-card__tag--green{ color:var(--green); background:var(--green-soft); }
.article-card__tag--blue{ color:var(--blue); background:var(--blue-soft); }
.article-card__tag--gold{ color:#8A6205; background:var(--gold-soft); }
.article-card h3{ margin:0; font-size:1.05rem; line-height:1.35; }
.article-card h3 a{ color:var(--ink); }
.article-card h3 a:hover{ color:var(--red-dark); }
.article-card p{ margin:0; color:var(--muted); font-size:.9rem; flex:1; }
.article-card__more{ font-weight:800; font-size:.88rem; }

/* ============ Sidebar widget ============ */
.widget-area{ display:grid; gap:22px; position:sticky; top:86px; }
.widget{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); min-width:0;
}
.widget h2,.widget .widget-title{
  font-size:1rem; font-weight:900; margin:0 0 14px; padding-bottom:10px;
  border-bottom:2px solid var(--gold); color:var(--ink);
}
.widget ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.widget li a{
  display:flex; justify-content:space-between; gap:10px; padding:9px 10px;
  border-radius:10px; color:var(--ink-2); font-size:.92rem; font-weight:600;
}
.widget li a:hover{ background:var(--gold-soft); color:var(--red-dark); text-decoration:none; }
.widget li a span{ color:var(--muted); font-size:.8rem; }
.widget--cta{
  background:linear-gradient(160deg,var(--red-deeper),var(--red-dark));
  border:0; color:#FFF3DA; text-align:center;
}
.widget--cta .widget-title{ color:var(--gold); border-color:rgba(255,224,131,.4); }
.widget--cta p{ font-size:.9rem; color:#FFE6C4; margin:0 0 16px; }

/* ============ Halaman daftar / masuk ============ */
.auth-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,56px); align-items:center; padding-block:clamp(38px,6vw,72px);
}
.auth-visual{ position:relative; }
.auth-visual img{ border-radius:22px; box-shadow:var(--shadow-lg); }
.auth-visual__badge{
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  padding:8px 18px; font-size:.8rem; font-weight:800; color:var(--red-dark);
  box-shadow:var(--shadow); white-space:nowrap; max-width:92%;
}
.auth-card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:clamp(24px,3.4vw,40px); box-shadow:var(--shadow-lg); min-width:0;
}
.auth-card h1{ font-size:clamp(1.4rem,.7vw + 1.15rem,1.9rem); font-weight:900; margin:6px 0 8px; }
.auth-card > p{ color:var(--muted); margin:0 0 22px; font-size:.94rem; }
.form-row{ margin-bottom:16px; }
.form-row label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:6px; }
.form-row label small{ color:var(--muted); font-weight:500; }
.form-row input{
  width:100%; font:inherit; color:var(--ink);
  border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; background:var(--cream); outline:0;
}
.form-row input:focus{ border-color:var(--gold-deep); background:#fff; box-shadow:0 0 0 4px rgba(247,201,72,.25); }
.form-hint{ font-size:.8rem; color:var(--muted); margin:-6px 0 14px; }
.form-error{
  display:none; background:#FDF1F3; color:var(--red-dark);
  border:1.5px solid #F3C1CC; border-radius:10px; padding:10px 14px;
  font-size:.85rem; margin-bottom:14px;
}
.form-error.is-visible{ display:block; }
.form-note{ font-size:.8rem; color:var(--muted); margin-top:16px; text-align:center; }
.form-note a{ font-weight:700; }
.auth-alt{ text-align:center; margin-top:8px; font-size:.9rem; }

/* ============ Blok promo ============ */
.promo-hero{
  position:relative; overflow:hidden; border-radius:22px;
  padding:clamp(26px,4vw,46px); color:#FFF9EA;
  background:linear-gradient(150deg,var(--red-deeper),var(--red-dark) 55%,#7D1224);
  box-shadow:var(--shadow-lg);
}
.promo-hero::after{
  content:"🎁"; position:absolute; right:-10px; bottom:-18px; font-size:7rem;
  opacity:.14; transform:rotate(-12deg);
}
.promo-hero .kicker{ color:var(--gold); }
.promo-hero h1{ color:#FFFDF5; margin:8px 0 10px; font-size:clamp(1.5rem,.9vw + 1.2rem,2.3rem); font-weight:900; }
.promo-hero p{ margin:0 0 20px; max-width:60ch; color:#FFE9CE; }
.promo-badge{
  display:inline-block; background:var(--gold); color:var(--red-deeper);
  font-weight:900; border-radius:12px; padding:10px 18px; font-size:1.05rem;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.promo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)); gap:clamp(14px,2vw,22px); }
.terms-table th{ width:38%; }

/* ============ Site footer ============ */
.site-footer{
  background:
    radial-gradient(700px 300px at 110% 0%, rgba(247,201,72,.08), transparent 60%),
    linear-gradient(180deg,#191922,#101017);
  color:#C9C5B8; padding-top:clamp(40px,6vw,64px);
  padding-bottom:96px; /* ruang tombol melayang, bukan blok kosong */
}
.site-footer a{ color:#E7E2D4; }
.site-footer a:hover{ color:var(--gold); }
.footer-grid{
  display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr;
  gap:clamp(22px,3.5vw,40px); padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; color:#fff; }
.footer-brand img{ width:40px; height:40px; }
.footer-brand b{ font-size:1.2rem; color:#FFFDF5; }
.footer-brand b span{ color:var(--gold); }
.site-footer h2,.site-footer .footer-title{
  font-size:.85rem; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px; font-weight:900;
}
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.site-footer li a{ font-size:.9rem; }
.footer-desc{ font-size:.88rem; margin:0 0 14px; }
.footer-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.footer-badges span{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,224,131,.35); color:#FFE9AE;
  font-size:.74rem; font-weight:800; letter-spacing:.6px;
  border-radius:999px; padding:5px 12px;
}
.footer-legal{
  padding-top:20px; display:grid; gap:12px;
  font-size:.78rem; color:#9C978A; line-height:1.7;
}
.footer-legal strong{ color:#CFC9BA; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10); margin-top:6px; padding-top:18px;
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between;
  font-size:.8rem; color:#A9A496;
}
.footer-bottom .muted-links{ display:flex; flex-wrap:wrap; gap:16px; }

/* ============ Tombol melayang gaya slot ============ */
.float-cta{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:12px; z-index:1500;
  width:min(94vw,470px);
  filter:drop-shadow(0 14px 26px rgba(94,9,21,.55));
}
.float-cta__btn{
  position:relative; display:flex; align-items:center; justify-content:center; gap:14px;
  min-height:60px; padding:9px 20px;
  border-radius:999px; text-decoration:none; overflow:visible;
  background:linear-gradient(180deg,#E63B57,var(--red) 45%,var(--red-dark));
  border:2.5px solid var(--gold);
  box-shadow:
    0 0 0 3px rgba(94,9,21,.45),
    0 10px 30px rgba(200,16,46,.55),
    inset 0 2px 0 rgba(255,255,255,.35);
  animation:ctaGlow 2.2s ease-in-out infinite;
}
.float-cta__btn:hover{ text-decoration:none; transform:translateY(-2px); }
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 0 3px rgba(94,9,21,.45),0 10px 30px rgba(200,16,46,.55),0 0 18px rgba(247,201,72,.35), inset 0 2px 0 rgba(255,255,255,.35); }
  50%    { box-shadow:0 0 0 3px rgba(94,9,21,.45),0 10px 30px rgba(200,16,46,.65),0 0 34px rgba(247,201,72,.75), inset 0 2px 0 rgba(255,255,255,.35); }
}
.float-cta__reels{ display:flex; gap:5px; flex-shrink:0; }
.float-cta__reel{
  width:24px; height:32px; border-radius:6px; overflow:hidden;
  background:#3A0710; border:1.5px solid var(--gold);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.float-cta__strip{
  display:flex; flex-direction:column; align-items:center;
  animation:reelSpin 2.6s cubic-bezier(.5,0,.5,1) infinite;
  color:#FFE083; font-weight:900; font-size:.95rem; line-height:32px;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.float-cta__reel:nth-child(2) .float-cta__strip{ animation-duration:3.1s; animation-delay:.3s; }
.float-cta__reel:nth-child(3) .float-cta__strip{ animation-duration:2.3s; animation-delay:.6s; }
@keyframes reelSpin{
  0%,18%   { transform:translateY(0); }
  38%,58%  { transform:translateY(-32px); }
  78%,100% { transform:translateY(-64px); }
}
.float-cta__text{
  display:flex; flex-direction:column; align-items:flex-start; line-height:1.12;
  color:#FFFDF3; font-weight:900; letter-spacing:1.5px; font-size:1.02rem;
  text-shadow:0 2px 4px rgba(60,3,12,.7);
}
.float-cta__text small{
  font-size:.68rem; letter-spacing:3.5px; color:var(--gold); font-weight:800;
}
.float-cta__coins{ position:absolute; inset:-6px 0 0 0; pointer-events:none; overflow:visible; }
.float-cta__coin{
  position:absolute; bottom:8px; width:16px; height:16px; border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%, #FFF3C4 0 18%, transparent 40%),
    radial-gradient(circle at 50% 50%, #F7C948 55%, #D99A1B 100%);
  border:1.5px solid #B3791A;
  animation:coinRise 2.4s linear infinite;
  opacity:0;
}
.float-cta__coin::after{
  content:"Rp"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:7px; font-weight:900; color:#8E6A12;
}
.float-cta__coin:nth-child(1){ left:16%; animation-delay:0s; }
.float-cta__coin:nth-child(2){ left:30%; animation-delay:.55s; width:12px; height:12px; }
.float-cta__coin:nth-child(3){ left:52%; animation-delay:1.05s; }
.float-cta__coin:nth-child(4){ left:68%; animation-delay:.35s; width:13px; height:13px; }
.float-cta__coin:nth-child(5){ left:82%; animation-delay:1.5s; }
@keyframes coinRise{
  0%   { transform:translateY(0) scale(.5) rotate(0deg); opacity:0; }
  15%  { opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateY(-92px) scale(1.12) rotate(28deg); opacity:0; }
}

/* ============ Utilitas ============ */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.legal-block{
  font-size:.85rem; color:var(--muted); background:var(--cream);
  border:1px solid var(--line); border-radius:14px; padding:18px 22px;
}
.legal-block p{ margin:0 0 10px; }
.legal-block p:last-child{ margin:0; }

/* ============ Responsif ============ */
@media (max-width:1080px){
  .layout-single{ grid-template-columns:1fr; }
  .widget-area{ position:static; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
  .search-widget input{ width:120px; }
}
@media (max-width:980px){
  .steps-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sec-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__figure{ max-width:560px; }
  .mobile-grid{ grid-template-columns:1fr; }
  .rg-wrap{ grid-template-columns:1fr; }
  .auth-layout{ grid-template-columns:1fr; }
  .auth-visual{ order:2; }
}
@media (max-width:920px){
  .nav-toggle{ display:flex; }
  .main-navigation{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(23,23,32,.12);
    margin:0; padding:10px clamp(16px,4vw,28px) 18px;
  }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .main-navigation a{ padding:12px 14px; }
  .search-widget{ display:none; }
  .nav-actions .btn--ghost{ display:none; }
  .site-header__inner{ position:relative; }
  .mobile-search{
    display:block; padding:12px clamp(16px,4vw,28px) 4px;
  }
}
.mobile-search{ display:none; }
.mobile-search .search-widget{ display:block; position:static; }
.mobile-search .search-widget__field{ width:100%; }
.mobile-search .search-widget input{ width:100%; flex:1; }
.mobile-search .search-results{ left:0; right:0; width:auto; }
@media (min-width:921px){
  .mobile-search{ display:none!important; }
}
@media (max-width:720px){
  .feature-grid,.reviews-grid,.mf-grid{ grid-template-columns:1fr; }
  .steps-grid{ grid-template-columns:1fr; }
  .step-card{ padding-top:30px; }
}
@media (max-width:560px){
  .sec-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; }
  .float-cta{ bottom:8px; }
  .float-cta__btn{ gap:10px; padding:8px 14px; min-height:56px; }
  .float-cta__text{ font-size:.92rem; letter-spacing:1px; }
  .float-cta__reel{ width:20px; height:28px; }
  .float-cta__strip{ line-height:28px; font-size:.85rem; }
  /* header mobile: pastikan tombol Daftar tidak terpotong */
  .site-header__inner{ gap:8px; }
  .site-branding__domain{ display:none; }
  .site-branding__name{ font-size:1.1rem; }
  .nav-actions{ gap:6px; }
  .nav-actions .btn--gold{ padding:8px 13px; font-size:.82rem; }
  .nav-toggle{ padding:8px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  html{ scroll-behavior:auto; }
}