/* ============================================================
   Indowin88 — Teras Baca Kasino Daring
   Tema "Teras Meja": kertas hangat + hijau felt + merah + kuning
   emas + biru royal + hitam kehijauan (enam warna, terang & rapi).
   ============================================================ */

:root{
  --hijau:#0a6b3f;
  --hijau-2:#0e8a52;
  --hijau-tua:#07492b;
  --hijau-tint:#e7f4ec;
  --merah:#d2402f;
  --merah-2:#b53425;
  --merah-tint:#fceae7;
  --kuning:#f0b429;
  --kuning-2:#d99b17;
  --kuning-tint:#fdf3dc;
  --biru:#1f5fbe;
  --biru-2:#184a97;
  --biru-tint:#e9f0fb;
  --hitam:#0e1512;
  --hitam-2:#16211c;
  --paper:#faf8f2;
  --card:#ffffff;
  --line:#e6dfd0;
  --ink:#1c2420;
  --mut:#5c675f;
  --rad:14px;
  --rad-sm:10px;
  --shadow:0 10px 30px rgba(14,21,18,.08);
  --shadow-sm:0 4px 14px rgba(14,21,18,.07);
}

*{box-sizing:border-box}
html,body{overflow-x: clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hijau);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.28;color:var(--ink);font-weight:800;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.35em}
li{margin:.35em 0}
b,strong{color:inherit}

.container{width:min(1160px,100% - 40px);margin-inline:auto}
.section{padding:56px 0}
.text-center{text-align:center}
.grid{display:grid;gap:22px}
.grid > *{min-width:0;max-width:100%}

.skip-link{
  position:absolute;left:12px;top:-64px;z-index:200;
  background:var(--kuning);color:var(--hitam);font-weight:700;
  padding:10px 18px;border-radius:0 0 10px 10px;transition:top .2s;
}
.skip-link:focus{top:0}

/* ---------- tombol ---------- */
.btn{
  display:inline-block;cursor:pointer;user-select:none;
  font-weight:800;font-size:.95rem;letter-spacing:.03em;text-align:center;
  padding:13px 26px;border-radius:999px;border:2px solid transparent;
  text-decoration:none!important;transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn--hijau{background:var(--hijau);color:#fff;box-shadow:0 6px 18px rgba(10,107,63,.35)}
.btn--merah{background:var(--merah);color:#fff;box-shadow:0 6px 18px rgba(210,64,47,.35)}
.btn--kuning{background:var(--kuning);color:var(--hitam);box-shadow:0 6px 18px rgba(217,155,23,.35)}
.btn--biru{background:var(--biru);color:#fff;box-shadow:0 6px 18px rgba(31,95,190,.32)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--outline{background:transparent;border-color:var(--hijau);color:var(--hijau)}
.btn--outline:hover{background:var(--hijau-tint)}
.btn--sm{padding:9px 18px;font-size:.82rem}
.btn--block{display:block;width:100%}

/* ---------- topbar ---------- */
.topbar{background:var(--hitam);color:#cfe4d6;font-size:.8rem}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;min-height:38px;flex-wrap:wrap;padding:4px 0;
}
.topbar__left{display:flex;align-items:center;gap:9px;min-width:0}
.topbar__left .dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--kuning);box-shadow:0 0 0 4px rgba(240,180,41,.22);
  animation:pulse-dot 2.4s infinite;
}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(240,180,41,.25)}50%{box-shadow:0 0 0 7px rgba(240,180,41,.06)}}
.topbar__left .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__right{display:flex;align-items:center;gap:10px;flex:none}
.badge--18{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;padding:2px 8px;border-radius:8px;
  background:var(--merah);color:#fff;font-weight:800;letter-spacing:.04em;
}
.motto{color:#ffd97a}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(255,255,255,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(14,21,18,.02);
  transition:box-shadow .25s;
}
.site-header.is-scrolled{box-shadow:0 8px 26px rgba(14,21,18,.12)}
.site-header .container{
  display:flex;align-items:center;gap:22px;min-height:72px;
}
.brand{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none!important}
.brand svg{width:48px;height:48px;flex:none}
.brand__name{display:flex;flex-direction:column;line-height:1.15}
.brand__name>span{font-size:1.34rem;font-weight:900;color:var(--hitam);letter-spacing:-.02em}
.brand__name .hl{color:var(--merah)}
.brand__name small{font-size:.66rem;font-weight:700;color:var(--hijau);letter-spacing:.14em;text-transform:uppercase}

.main-navigation{margin-left:8px}
.menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu-item{position:relative}
.menu-item>a{
  display:block;padding:10px 13px;border-radius:10px;
  font-weight:700;font-size:.93rem;color:var(--ink);text-decoration:none!important;
}
.menu-item>a:hover{background:var(--hijau-tint);color:var(--hijau-tua)}
.menu-item.current-menu-item>a{background:var(--hijau);color:#fff}
.menu-item-has-children>a::after{content:"";margin-left:5px}
.sub-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:236px;padding:8px;margin:0;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--rad-sm);
  box-shadow:var(--shadow);display:none;
}
.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:focus-within .sub-menu{display:block}
.menu:last-child .menu-item:last-child .sub-menu,
.menu-item:last-child .sub-menu{left:auto;right:0}
.sub-menu a{display:block;padding:9px 13px;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none!important}
.sub-menu a:hover{background:var(--kuning-tint);color:var(--kuning-2)}

.hdr-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.hdr-searchlink{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;font-size:1.05rem;
  background:var(--hijau-tint);text-decoration:none!important;
}
.hdr-searchlink:hover{background:var(--kuning-tint)}
.nav-toggle{
  display:none;width:44px;height:44px;border-radius:10px;cursor:pointer;
  background:var(--hitam);border:none;padding:11px 10px;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;height:2.5px;border-radius:2px;background:#fff}

/* ---------- breadcrumb ---------- */
.breadcrumb{background:#fff;border-bottom:1px solid var(--line)}
.breadcrumb ol{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  list-style:none;margin:0;padding:11px 0;font-size:.82rem;color:var(--mut);
}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--kuning-2);font-weight:800}
.breadcrumb a{color:var(--hijau);font-weight:600}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- kepala halaman ---------- */
.page-head{padding:38px 0 8px;max-width:840px}
.page-head.center{margin-inline:auto;text-align:center}
.cat-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--hijau-tint);color:var(--hijau-tua);
  font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;border:1px solid rgba(10,107,63,.18);
}
.page-head h1{font-size:clamp(1.55rem,3.4vw,2.3rem);margin:14px 0 10px}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.8rem;color:var(--mut);margin:0}
.meta span{display:inline-flex;align-items:center;gap:6px}

/* ---------- layout artikel ---------- */
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) 328px;
  gap:38px;align-items:start;padding:22px 0 56px;
}
.entry-content{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:clamp(20px,3.4vw,40px);box-shadow:var(--shadow-sm)}
.entry-content h2{font-size:clamp(1.28rem,2.4vw,1.6rem);margin:1.6em 0 .6em;padding-top:.35em;border-top:1px dashed var(--line)}
.entry-content h2:first-of-type{border-top:none;padding-top:0;margin-top:1.1em}
.entry-content h3{font-size:1.12rem;margin:1.4em 0 .5em}
.entry-content figure{margin:1.6em 0}
.entry-content figure img{width:100%;border-radius:var(--rad-sm);box-shadow:var(--shadow-sm)}
.entry-content figcaption{font-size:.8rem;color:var(--mut);padding:9px 4px 0;text-align:center}
.entry-content a{text-decoration:underline;text-decoration-color:rgba(10,107,63,.35);text-underline-offset:3px}
.table-wrap{overflow-x:auto;margin:1.3em 0;border-radius:var(--rad-sm);border:1px solid var(--line)}
table.t{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px;background:#fff}
table.t th{
  background:var(--hijau);color:#fff;text-align:left;
  padding:11px 14px;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
}
table.t td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
table.t tr:nth-child(even) td{background:#f7f9f5}
.steps-inline{background:var(--hijau-tint);border-radius:var(--rad-sm);padding:18px 20px;margin:1.3em 0;border-left:4px solid var(--hijau)}
.steps-inline ol{margin:0;padding-left:1.25em}
.note{
  background:var(--kuning-tint);border:1px solid rgba(217,155,23,.35);
  border-radius:var(--rad-sm);padding:14px 18px;font-size:.88rem;color:#6b5410;
}
.note18{font-size:.76rem;color:var(--mut);margin:12px 0 0}
.entry-foot{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  border-top:1px dashed var(--line);margin-top:2em;padding-top:15px;
  font-size:.78rem;color:var(--mut);
}

/* ---------- sidebar ---------- */
.sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:92px}
.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:20px 22px;box-shadow:var(--shadow-sm)}
.widget h3{font-size:1rem;margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid var(--kuning);display:inline-block}
.widget ul{list-style:none;margin:0;padding:0}
.widget li+li{border-top:1px dashed var(--line)}
.widget a{display:block;padding:9px 2px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none!important}
.widget a:hover{color:var(--hijau)}
.widget--cta{background:linear-gradient(150deg,var(--hitam),#1a2f24);border-color:rgba(240,180,41,.4)}
.widget--cta h3{color:#ffd97a;border-color:var(--kuning)}
.widget--cta p{color:#cfe4d6;font-size:.86rem}

/* ---------- kotak pasangan ---------- */
.duo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.sec-box{border-radius:var(--rad);padding:24px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.sec-box h3{margin:0 0 10px;font-size:1.05rem}
.sec-box p{font-size:.92rem}
.sec-box--hijau{background:var(--hijau-tint);border-color:rgba(10,107,63,.25)}
.sec-box--biru{background:var(--biru-tint);border-color:rgba(31,95,190,.25)}
.sec-box--merah{background:var(--merah-tint);border-color:rgba(210,64,47,.25)}
.sec-box--kuning{background:var(--kuning-tint);border-color:rgba(217,155,23,.3)}

/* ---------- formulir ---------- */
.form-card{
  max-width:860px;margin:0 auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad);
  padding:clamp(20px,3.4vw,38px);box-shadow:var(--shadow);
}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px 20px}
label{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px}
label.req::after{content:" *";color:var(--merah)}
input,select{
  width:100%;padding:12px 14px;font:inherit;color:var(--ink);
  border:1.6px solid var(--line);border-radius:10px;background:#fff;
}
input:focus,select:focus{outline:none;border-color:var(--hijau-2);box-shadow:0 0 0 3px rgba(14,138,82,.15)}
.fcheck{display:flex;gap:11px;align-items:flex-start;margin:20px 0 0;font-weight:500;font-size:.88rem}
.fcheck input{width:19px;height:19px;flex:none;margin-top:3px;accent-color:var(--hijau)}
.form-note{font-size:.8rem;color:var(--mut);margin:16px 0 0}

/* ---------- beranda: hero ---------- */
.hero{
  position:relative;color:#eef6ef;overflow:clip;
  background:
    radial-gradient(900px 420px at 12% -8%,rgba(240,180,41,.16),transparent 60%),
    radial-gradient(760px 380px at 96% 6%,rgba(31,95,190,.18),transparent 62%),
    linear-gradient(158deg,var(--hitam) 4%,#0d2b1c 52%,var(--hijau-tua) 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.1px,transparent 1.1px);
  background-size:26px 26px;
}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:44px;align-items:center;padding-top:64px;padding-bottom:64px}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(240,180,41,.14);border:1px solid rgba(240,180,41,.5);
  color:#ffd97a;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 15px;border-radius:999px;
}
.hero h1{color:#fff;font-size:clamp(1.9rem,4.6vw,3.15rem);margin:18px 0 14px}
.hero h1 .accent{color:#ffd97a}
.hero__lead{color:#c6dccb;font-size:clamp(1rem,1.6vw,1.13rem);max-width:56ch}
.hero__btns{display:flex;flex-wrap:wrap;gap:13px;margin:26px 0 20px}
.hero__meta{display:flex;flex-wrap:wrap;gap:9px}
.hero__meta span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:700;color:#d9e9dd;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  padding:6px 13px;border-radius:999px;
}
.hero__panel{
  position:relative;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px;
  backdrop-filter:blur(4px);
}
.hero__panel h2{color:#fff;font-size:1.02rem;margin:0 0 12px;display:flex;align-items:center;gap:9px}
.hero__panel h2::before{content:"🔥";font-size:1rem}
.searchband{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.searchband input{
  background:rgba(255,255,255,.96);border-color:transparent;color:var(--ink);padding:12px 16px;
}
.searchband .btn{padding:12px 22px}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.tagcloud a{
  display:inline-block;font-size:.76rem;font-weight:700;color:#ffd97a;
  border:1px solid rgba(240,180,41,.45);border-radius:999px;padding:4px 12px;
  text-decoration:none!important;transition:background .15s;
}
.tagcloud a:hover{background:rgba(240,180,41,.2)}
.tagcloud .tc-lead{color:#9fc3ab;border-color:rgba(255,255,255,.25);cursor:default}
.hero__panel .note18{color:#9fb8a6}

/* ---------- kepala seksi ---------- */
.sec-head{max-width:760px;margin:0 auto 34px;text-align:center}
.sec-head .kicker{
  display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--merah);margin-bottom:10px;
}
.sec-head h2{font-size:clamp(1.42rem,3vw,2.05rem);margin:0 0 12px}
.sec-head .lead{color:var(--mut);font-size:.98rem;margin:0}
.sec--tint{background:#f2f0e6;border-block:1px solid var(--line)}
.sec--green{background:linear-gradient(165deg,var(--hijau-tua),var(--hijau));color:#eef6ef}
.sec--green .sec-head .kicker{color:#ffd97a}
.sec--green h2{color:#fff}
.sec--green .sec-head .lead{color:#cfe4d6}

/* ---------- 4 langkah ---------- */
.steps4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr));gap:20px}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:26px 22px 22px;box-shadow:var(--shadow-sm);counter-increment:step;
}
.step::before{
  content:counter(step,decimal-leading-zero);
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:13px;margin-bottom:14px;
  background:var(--hijau);color:#fff;font-weight:900;font-size:1.05rem;
  box-shadow:0 6px 14px rgba(10,107,63,.3);
}
.step:nth-child(2)::before{background:var(--merah);box-shadow:0 6px 14px rgba(210,64,47,.3)}
.step:nth-child(3)::before{background:var(--kuning);color:var(--hitam);box-shadow:0 6px 14px rgba(217,155,23,.3)}
.step:nth-child(4)::before{background:var(--biru);box-shadow:0 6px 14px rgba(31,95,190,.3)}
.step h3{margin:0 0 8px;font-size:1.03rem}
.step p{margin:0;font-size:.89rem;color:var(--mut)}

/* ---------- kartu kategori ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:22px}
.cat-card{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none!important;
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cat-card .ph{position:relative;aspect-ratio:16/9;overflow:hidden}
.cat-card .ph img{width:100%;height:100%;object-fit:cover}
.cat-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(14,21,18,.55))}
.cat-card .ph span{
  position:absolute;left:14px;bottom:11px;z-index:2;color:#fff;font-weight:900;
  font-size:1.06rem;text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.cat-card .bd{padding:18px 20px 20px}
.cat-card p{margin:0;font-size:.87rem;color:var(--mut)}
.cat-card .more{display:inline-block;margin-top:12px;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- kartu keunggulan ---------- */
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.adv-card{background:#fff;border:1px solid var(--line);border-left:5px solid var(--hijau);border-radius:var(--rad-sm);padding:20px 22px;box-shadow:var(--shadow-sm)}
.adv-card:nth-child(2){border-left-color:var(--merah)}
.adv-card:nth-child(3){border-left-color:var(--kuning)}
.adv-card:nth-child(4){border-left-color:var(--biru)}
.adv-card:nth-child(5){border-left-color:var(--hijau-2)}
.adv-card:nth-child(6){border-left-color:var(--merah-2)}
.adv-card .ico{font-size:1.55rem;display:block;margin-bottom:8px}
.adv-card h3{margin:0 0 7px;font-size:1rem}
.adv-card p{margin:0;font-size:.88rem;color:var(--mut)}

/* ---------- daftar "mengapa" ---------- */
.why-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
.why-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.why-list li{
  display:flex;gap:13px;align-items:flex-start;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--rad-sm);
  padding:14px 17px;box-shadow:var(--shadow-sm);font-size:.92rem;
}
.why-list .ok{
  flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--hijau-tint);
  color:var(--hijau-tua);font-weight:900;font-size:.85rem;margin-top:2px;
}
.why-media{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.why-media img{width:100%;height:100%;object-fit:cover}
.why-media figcaption{font-size:.78rem;color:#e8f0ea;padding:10px 14px;background:var(--hitam-2)}

/* ---------- seksi mobile ---------- */
.mobile-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:center}
.phone{
  width:min(258px,78%);margin:0 auto;border-radius:34px;padding:13px;
  background:var(--hitam);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 55px rgba(14,21,18,.35);
}
.phone .scr{border-radius:23px;overflow:hidden;background:var(--paper)}
.phone .scr .bar{height:38px;background:var(--hijau);display:flex;align-items:center;gap:6px;padding:0 13px}
.phone .scr .bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.65);font-style:normal}
.phone .scr .bar b{flex:1;height:9px;border-radius:6px;background:rgba(255,255,255,.28);font-weight:400}
.phone .scr .ln{height:10px;border-radius:6px;background:#e6dfd0;margin:11px 13px 0}
.phone .scr .ln:first-of-type{width:72%}
.phone .scr .ln.w2{width:88%}
.phone .scr .ln.w3{width:55%}
.phone .scr .pic{margin:12px 13px 0;border-radius:11px;background:linear-gradient(140deg,var(--biru),var(--hijau-2));height:92px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem}
.phone .scr .cta{margin:13px;display:flex;gap:8px}
.phone .scr .cta i{flex:1;height:30px;border-radius:999px;background:var(--kuning);font-style:normal}
.phone .scr .cta i+i{background:var(--merah)}
.mobile-points{list-style:none;margin:0 0 1.4em;padding:0;display:flex;flex-direction:column;gap:12px}
.mobile-points li{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:.94rem}
.mobile-points .em{flex:none;font-size:1.25rem;line-height:1.4}

/* ---------- testimoni ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.testi-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;
}
.testi-card .stars{color:var(--kuning);letter-spacing:3px;font-size:.95rem}
.testi-card blockquote{margin:0;font-size:.92rem;flex:1}
.testi-card .who{display:flex;align-items:center;gap:11px;border-top:1px dashed var(--line);padding-top:13px}
.testi-card .who .av{
  width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#fff;font-size:.95rem;
}
.testi-card:nth-child(1) .av{background:var(--hijau)}
.testi-card:nth-child(2) .av{background:var(--merah)}
.testi-card:nth-child(3) .av{background:var(--biru)}
.testi-card .who b{display:block;font-size:.88rem}
.testi-card .who small{color:var(--mut);font-size:.74rem}
.testi-note{text-align:center;font-size:.78rem;color:var(--mut);margin:18px 0 0}

/* ---------- inovasi: Bengkel Verifikasi ---------- */
.bv-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start;
}
.bv-lane{list-style:none;margin:0;padding:0;counter-reset:lane;display:flex;flex-direction:column;gap:11px}
.bv-lane li{
  counter-increment:lane;position:relative;margin:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rad-sm);padding:13px 16px 13px 56px;font-size:.9rem;color:#d9e9dd;
}
.bv-lane li::before{
  content:counter(lane);position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:29px;height:29px;border-radius:9px;background:var(--kuning);color:var(--hitam);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;
}
.bv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));gap:18px;margin-top:8px}
.bv-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.bv-card summary{
  list-style:none;cursor:pointer;padding:16px 18px;display:block;position:relative;
}
.bv-card summary::-webkit-details-marker{display:none}
.bv-card summary::after{
  content:"+";position:absolute;right:15px;top:13px;font-size:1.3rem;font-weight:800;color:var(--kuning-2);
  transition:transform .2s;
}
.bv-card[open] summary::after{transform:rotate(45deg)}
.bv-doc{
  height:74px;margin:0 18px 12px;border-radius:9px;position:relative;overflow:hidden;
  background:linear-gradient(115deg,#f4f1e6,#e7e2d2);
  border:1px solid var(--line);
}
.bv-doc::before{
  content:"";position:absolute;inset:12px 55% 12px 13px;border-radius:5px;
  background:repeating-linear-gradient(180deg,#cfd8cf 0 7px,transparent 7px 13px);
  opacity:.75;
}
.bv-doc::after{
  content:"";position:absolute;top:12px;bottom:12px;left:calc(55% + 10px);right:13px;border-radius:5px;
  background:repeating-linear-gradient(45deg,#dfe7df 0 6px,#d2dcd2 6px 12px);
}
.bv-card[data-status="ok"] .bv-doc{border:2.5px solid var(--hijau-2)}
.bv-card[data-status="no"] .bv-doc{border:2.5px solid var(--merah);filter:saturate(.82)}
.bv-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 11px;margin-bottom:7px;
}
.bv-chip--ok{background:var(--hijau-tint);color:var(--hijau-tua)}
.bv-chip--no{background:var(--merah-tint);color:var(--merah-2)}
.bv-card summary h3{margin:0;font-size:.93rem;line-height:1.35;padding-right:22px}
.bv-why{padding:0 18px 18px;font-size:.85rem;color:var(--mut);border-top:1px dashed var(--line);padding-top:13px}
.bv-why b{color:var(--ink)}
.bv-foot{margin:26px 0 0;font-size:.85rem;color:#cfe4d6;text-align:center}

/* ---------- seksi keamanan ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.guard-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--rad);padding:22px}
.guard-card .ico{font-size:1.5rem;display:block;margin-bottom:9px}
.guard-card h3{color:#fff;font-size:1rem;margin:0 0 8px}
.guard-card p{margin:0;font-size:.88rem;color:#c6dccb}
.guard-card a{color:#ffd97a}

/* ---------- RG ---------- */
.rg-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:center}
.rg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.rg-list li{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--rad-sm);padding:13px 16px;font-size:.92rem;box-shadow:var(--shadow-sm)}
.rg-list b{color:var(--hijau-tua)}
.rg-box{background:var(--hitam);color:#e8f0ea;border-radius:var(--rad);padding:26px;border:1px solid rgba(240,180,41,.35)}
.rg-box h3{color:#ffd97a;margin:0 0 10px;font-size:1.05rem}
.rg-box p{font-size:.9rem;color:#c6dccb}
.rg-box .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-wrap details{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad-sm);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.faq-wrap summary{
  cursor:pointer;list-style:none;padding:16px 52px 16px 20px;
  font-weight:800;font-size:.98rem;position:relative;
}
.faq-wrap summary::-webkit-details-marker{display:none}
.faq-wrap summary::after{
  content:"?";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--kuning-tint);
  color:var(--kuning-2);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.85rem;
}
.faq-wrap details[open] summary::after{content:"−";background:var(--merah-tint);color:var(--merah-2)}
.faq-wrap details p{margin:0;padding:0 20px 18px;font-size:.9rem;color:var(--mut);border-top:1px dashed var(--line);padding-top:13px}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--rad);overflow:hidden;position:relative;color:#fff;
  background:linear-gradient(140deg,var(--hitam) 20%,#173a26 90%);
  padding:46px 34px;text-align:center;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 200px at 18% 0%,rgba(240,180,41,.22),transparent 60%),
             radial-gradient(420px 200px at 84% 100%,rgba(31,95,190,.25),transparent 60%);
}
.cta-band>*{position:relative}
.cta-band h2{color:#fff;font-size:clamp(1.3rem,2.6vw,1.8rem);margin:0 0 10px}
.cta-band p{color:#c6dccb;max-width:62ch;margin:0 auto 22px;font-size:.95rem}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- pencarian ---------- */
.sr-box{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sr-item{background:#fff;border:1px solid var(--line);border-radius:var(--rad-sm);padding:18px 20px;box-shadow:var(--shadow-sm)}
.sr-item .crumb{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--merah)}
.sr-item h3{margin:6px 0 6px;font-size:1.05rem}
.sr-item p{margin:0;font-size:.88rem;color:var(--mut)}

/* ---------- footer ---------- */
.site-footer{background:var(--hitam);color:#c6dccb;margin-top:0}
.footer-cta{background:linear-gradient(120deg,var(--hijau-tua),var(--hijau) 70%,#0f9a5b);padding:44px 0}
.footer-cta .container{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.footer-cta h2{color:#fff;font-size:clamp(1.2rem,2.4vw,1.6rem);margin:0 0 8px}
.footer-cta p{margin:0;color:#d9ecdf;font-size:.92rem;max-width:58ch}
.footer-cta .btns{display:flex;gap:12px;flex-wrap:wrap}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:34px;padding:52px 0 30px;
}
.f-brand p{font-size:.88rem;color:#a9bfb1}
.f-brand .brand__name>span{color:#fff}
.f-brand .brand__name small{color:#8fd6ac}
.f-sos{display:flex;gap:9px;margin-top:16px}
.f-sos a{
  width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:1rem;
  text-decoration:none!important;transition:background .15s;
}
.f-sos a:hover{background:rgba(240,180,41,.25)}
.f-col h3{color:#ffd97a;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin:4px 0 14px}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col li+li{border-top:1px solid rgba(255,255,255,.07)}
.f-col a{display:block;padding:8px 2px;font-size:.88rem;color:#c6dccb;text-decoration:none!important}
.f-col a:hover{color:#ffd97a}
.f-rg{font-size:.82rem;color:#a9bfb1;background:rgba(210,64,47,.1);border:1px solid rgba(210,64,47,.35);border-radius:var(--rad-sm);padding:15px 17px}
.f-rg b{display:block;color:#ff9d8f;letter-spacing:.1em;margin-bottom:6px}
.f-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0 26px;font-size:.78rem;color:#93a89a}
.f-bottom .container:first-child{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between}
.brand-mini{display:inline-flex;align-items:center;gap:10px;font-weight:900;color:#fff;font-size:.95rem}
.brand-mini svg{width:30px;height:30px}
.f-legal{margin-top:14px;line-height:1.7;color:#7e937f}

/* ---------- floatbar ---------- */
.floatbar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:linear-gradient(90deg,var(--hitam) 0%,#15291d 55%,var(--hitam) 100%);
  border-top:2px solid var(--kuning);
  box-shadow:0 -12px 34px rgba(14,21,18,.45);
}
.floatbar .container{
  display:flex;align-items:center;gap:20px;min-height:72px;padding-top:8px;padding-bottom:8px;
}
.reels{display:flex;gap:7px;flex:none}
.reel{
  width:34px;height:44px;border-radius:8px;overflow:hidden;
  background:#f4f1e6;border:2px solid var(--kuning);
}
.reel .strip{display:flex;flex-direction:column;animation:reelspin 2.6s steps(4) infinite}
.reel--mid .strip{animation-duration:3.4s;animation-direction:reverse}
.reel--slow .strip{animation-duration:4.6s}
.reel b{height:44px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:400}
@keyframes reelspin{to{transform:translateY(-50%)}}
.floatbar__mid{min-width:0;flex:1}
.floatbar__mid .t1{color:#fff;font-weight:800;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.floatbar__mid .t1 .gold{color:#ffd97a}
.floatbar__mid .t2{color:#9fc3ab;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.floatbar__cta{display:flex;align-items:center;gap:10px;flex:none;position:relative}
.floatbar__cta .btn{padding:12px 24px}
.coin{position:absolute;font-size:1rem;opacity:0;pointer-events:none;animation:coinpop 3.2s infinite}
.coin--1{left:-6px;top:-6px;animation-delay:0s}
.coin--2{left:26px;top:-12px;animation-delay:1.1s}
.coin--3{left:52px;top:-4px;animation-delay:2.2s}
@keyframes coinpop{
  0%{opacity:0;transform:translateY(6px) rotate(-14deg)}
  12%{opacity:1}
  30%{opacity:0;transform:translateY(-26px) rotate(16deg)}
  100%{opacity:0}
}

/* ---------- responsif ---------- */
@media (max-width:1080px){
  .menu-item>a{padding:10px 9px;font-size:.88rem}
}
@media (max-width:1023px){
  .nav-toggle{display:flex}
  .main-navigation{
    display:none;position:fixed;inset:0;z-index:140;
    background:rgba(14,21,18,.62);backdrop-filter:blur(3px);
    margin:0;padding:24px;
  }
  .main-navigation.is-open{display:block}
  .main-navigation .menu{
    flex-direction:column;align-items:stretch;gap:6px;
    background:#fff;border-radius:var(--rad);padding:16px;max-width:390px;margin:40px auto 0;
    box-shadow:var(--shadow);max-height:calc(100vh - 90px);overflow:auto;
  }
  .menu-item>a{padding:13px 15px;border-radius:10px;font-size:1rem}
  .sub-menu{position:static;display:block;border:none;box-shadow:none;padding:0 0 0 14px;margin:2px 0 6px;min-width:0}
  .menu-item-has-children:hover .sub-menu{display:block}
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static}
  .hero .container{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:48px;padding-bottom:48px}
  .why-wrap,.mobile-wrap,.rg-wrap,.bv-intro{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px}
}
@media (max-width:720px){
  .section{padding:44px 0}
  .reels{display:none}
  .floatbar__mid .t2{display:none}
  .floatbar .container{min-height:62px;gap:12px}
  .floatbar__cta .btn{padding:11px 19px;font-size:.85rem}
  .footer-cta .container{flex-direction:column;align-items:flex-start}
}
@media (max-width:639px){
  .brand__name small{display:none}
  .hdr-searchlink{display:none}
  .topbar .motto{display:none}
  .site-header .container{min-height:62px;gap:12px}
  .brand svg{width:40px;height:40px}
  .hero .container{padding-top:38px;padding-bottom:38px}
  .cta-band{padding:36px 20px}
  .coin--3{display:none}
}
@media (max-width:420px){
  body{font-size:16px}
  .floatbar__mid .t1{font-size:.84rem}
  .floatbar__cta{gap:7px}
  .floatbar__cta .btn{padding:10px 15px;font-size:.78rem}
  .steps-inline{padding:15px 16px}
  .entry-content{padding:18px 16px}
}