/* ==========================================================================
   Ajaib88 — style.css (tema "Tinta Merah")
   Palet: hitam-tinta #0d1117 · merah #e63946 · emas #ffd23f
          hijau #2bd48a · biru #4da3ff · putih #ffffff
   Markup bergaya WordPress: .site-header .main-navigation .entry-content .site-footer
   ========================================================================== */

:root{
  --ink:#0d1117;
  --ink-2:#111925;
  --ink-3:#182333;
  --line:#263243;
  --red:#e63946;
  --red-deep:#b32230;
  --gold:#ffd23f;
  --gold-2:#f2b705;
  --green:#2bd48a;
  --blue:#4da3ff;
  --white:#ffffff;
  --tx:#e9eef6;
  --tx-dim:#a8b6c9;
  --tx-dark:#1c2430;
  --tx-dark-dim:#4c5a6b;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.7;
  color:var(--tx);
  background:
    radial-gradient(1100px 420px at 85% -80px, rgba(230,57,70,.16), transparent 62%),
    radial-gradient(900px 380px at -10% 30%, rgba(77,163,255,.08), transparent 60%),
    var(--ink);
}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;font-family:Georgia,"Times New Roman",serif;letter-spacing:.2px}
p{margin:0 0 14px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;padding:8px 16px;z-index:999;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* jaring pengaman grid: cegah min-content blowout di layar sempit */
.grid{display:grid;gap:18px}
.grid>*{min-width:0;max-width:100%}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;text-decoration:none!important;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:linear-gradient(160deg,#ff5a52,var(--red) 55%,var(--red-deep));color:#fff;box-shadow:0 6px 20px rgba(230,57,70,.35)}
.btn-gold{background:linear-gradient(160deg,#ffe27a,var(--gold) 45%,var(--gold-2));color:#241a00;box-shadow:0 6px 20px rgba(255,210,63,.28)}
.btn-line{border-color:var(--gold);color:var(--gold)}
.btn-line:hover{background:rgba(255,210,63,.1)}
.btn-sm{padding:8px 18px;font-size:13.5px}

/* ---------- topbar + header ---------- */
.topbar{background:linear-gradient(90deg,var(--red-deep),var(--red));color:#fff;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;gap:14px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.topbar b{color:var(--gold)}
.tb-right{color:#ffe3e5}
.site-header{position:sticky;top:0;z-index:60;background:rgba(13,17,23,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-main .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);font-family:Georgia,serif;font-size:23px;font-weight:700;flex:none}
.brand:hover{text-decoration:none}
.brand small{display:block;font-family:"Segoe UI",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase}
.main-navigation{margin-left:auto}
.main-navigation ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.main-navigation a{display:block;padding:10px 13px;color:var(--tx-dim);font-weight:600;font-size:14.5px;border-radius:8px}
.main-navigation a:hover{color:var(--gold);text-decoration:none}
.main-navigation .current-menu-item a{color:var(--gold);background:rgba(255,210,63,.09)}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.hdr-search{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--ink-2)}
.hdr-search input{width:170px;border:0;background:transparent;color:var(--tx);padding:8px 14px;font-size:13.5px;outline:none}
.hdr-search input::placeholder{color:#5f7085}
.hdr-search button{border:0;background:var(--gold);color:#241a00;font-weight:700;font-size:13px;padding:0 15px;cursor:pointer}
.nav-toggle{display:none;background:var(--ink-2);color:var(--gold);border:1px solid var(--line);border-radius:10px;font-size:20px;width:44px;height:44px;cursor:pointer}
#mobile-nav{display:none;background:var(--ink-2);border-bottom:1px solid var(--line)}
body.nav-open #mobile-nav{display:block}
#mobile-nav ul{list-style:none;margin:0;padding:8px 14px 14px}
#mobile-nav li{border-bottom:1px solid #1b2534}
#mobile-nav li:last-child{border-bottom:0}
#mobile-nav a{display:block;padding:11px 6px;color:var(--tx);font-weight:600}

/* ---------- hero ---------- */
.hero{padding:56px 0 50px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.kicker.red{background:rgba(230,57,70,.14);color:#ff8d95;border:1px solid rgba(230,57,70,.4)}
.kicker.green{background:rgba(43,212,138,.12);color:var(--green);border:1px solid rgba(43,212,138,.35)}
.kicker.blue{background:rgba(77,163,255,.12);color:var(--blue);border:1px solid rgba(77,163,255,.35)}
.kicker.gold{background:rgba(255,210,63,.12);color:var(--gold);border:1px solid rgba(255,210,63,.4)}
.hero h1{margin:0 0 18px;font-size:44px;color:#fff}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{font-size:17.5px;color:var(--tx-dim);max-width:58ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 18px}
.hero-note{font-size:13px;color:#7f8fa5}
.hero-note b{color:var(--green)}
.hero-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-card img{display:block;width:100%}
.hero-card .hc-tag{position:absolute;left:14px;bottom:14px;background:rgba(13,17,23,.88);border:1px solid var(--gold);color:var(--gold);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.hero-stats .hs{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-align:center}
.hero-stats b{display:block;font-size:21px;color:var(--gold);font-family:Georgia,serif}
.hero-stats span{font-size:12.5px;color:var(--tx-dim)}

/* ---------- bagian umum ---------- */
.sec{padding:56px 0;border-bottom:1px solid var(--line)}
.sec-light{background:#f4f7fb;color:var(--tx-dark)}
.sec-light h2,.sec-light h3{color:var(--tx-dark)}
.sec-light p{color:var(--tx-dark-dim)}
.sec-head{max-width:76ch;margin-bottom:30px}
.sec-head h2{margin:0 0 10px;font-size:31px;color:#fff}
.sec-head p{color:var(--tx-dim);font-size:16px;margin:0}
.sec-light .sec-head p{color:var(--tx-dark-dim)}

/* langkah 4 */
.step-card{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:border-color .2s}
.step-card:hover{border-color:var(--red)}
.step-num{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;font-family:Georgia,serif;font-size:22px;font-weight:700;margin-bottom:14px}
.step-card:nth-child(4n+1) .step-num{background:rgba(230,57,70,.15);color:#ff8d95;border:1px solid rgba(230,57,70,.45)}
.step-card:nth-child(4n+2) .step-num{background:rgba(255,210,63,.13);color:var(--gold);border:1px solid rgba(255,210,63,.45)}
.step-card:nth-child(4n+3) .step-num{background:rgba(43,212,138,.12);color:var(--green);border:1px solid rgba(43,212,138,.4)}
.step-card:nth-child(4n+4) .step-num{background:rgba(77,163,255,.12);color:var(--blue);border:1px solid rgba(77,163,255,.4)}
.step-card h3{margin:0 0 8px;font-size:19px;color:#fff}
.step-card p{margin:0;font-size:14.5px;color:var(--tx-dim)}
.step-card a{font-weight:700;font-size:14px}
.step-card:nth-child(4n+1) a{color:#ff8d95}
.step-card:nth-child(4n+2) a{color:var(--gold)}
.step-card:nth-child(4n+3) a{color:var(--green)}
.step-card:nth-child(4n+4) a{color:var(--blue)}

/* kartu promo beranda */
.promo-card{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .18s,border-color .18s}
.promo-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.promo-card img{width:100%;display:block}
.promo-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.promo-body h3{margin:0;font-size:18.5px;color:#fff}
.promo-body p{margin:0;font-size:14px;color:var(--tx-dim);flex:1}
.promo-chip{align-self:flex-start;font-size:12px;font-weight:700;border-radius:999px;padding:4px 12px}
.pc-red{background:rgba(230,57,70,.14);color:#ff8d95;border:1px solid rgba(230,57,70,.4)}
.pc-gold{background:rgba(255,210,63,.12);color:var(--gold);border:1px solid rgba(255,210,63,.4)}
.pc-green{background:rgba(43,212,138,.12);color:var(--green);border:1px solid rgba(43,212,138,.4)}
.pc-blue{background:rgba(77,163,255,.12);color:var(--blue);border:1px solid rgba(77,163,255,.4)}
.promo-more{margin-top:28px;text-align:center}

/* mengapa memilih */
.why-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}
.why{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.why li{display:flex;gap:14px;background:var(--ink-2);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:12px;padding:16px 18px}
.why li:nth-child(2){border-left-color:var(--gold)}
.why li:nth-child(3){border-left-color:var(--red)}
.why li:nth-child(4){border-left-color:var(--blue)}
.why li:nth-child(5){border-left-color:var(--green)}
.why .ic{flex:none;font-size:22px;line-height:1.4}
.why b{display:block;color:#fff;font-size:15.5px}
.why span{font-size:14px;color:var(--tx-dim)}
.why-side{background:linear-gradient(165deg,var(--ink-3),var(--ink-2));border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.why-side h3{margin:0 0 12px;color:var(--gold);font-size:21px}
.why-side p{font-size:14.5px;color:var(--tx-dim)}
.why-side ul{margin:12px 0 0;padding-left:20px;color:var(--tx-dim);font-size:14.5px}
.why-side li{margin-bottom:6px}

/* pengalaman seluler */
.mobile-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;align-items:center}
.mobile-grid .shot{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.mobile-grid .shot img{display:block;width:100%}
.feat-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.feat-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--tx-dim)}
.feat-list .dot{flex:none;margin-top:5px;width:10px;height:10px;border-radius:50%}
.feat-list li:nth-child(4n+1) .dot{background:var(--red)}
.feat-list li:nth-child(4n+2) .dot{background:var(--gold)}
.feat-list li:nth-child(4n+3) .dot{background:var(--green)}
.feat-list li:nth-child(4n+4) .dot{background:var(--blue)}
.feat-list b{color:#fff}

/* testimoni */
.quote-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px}
.quote-card .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.quote-card blockquote{margin:0;font-size:14.5px;color:var(--tx);font-style:italic;flex:1}
.quote-card .who{display:flex;align-items:center;gap:12px}
.quote-card .ava{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;color:#fff}
.ava.a1{background:linear-gradient(150deg,var(--red),#7a1620)}
.ava.a2{background:linear-gradient(150deg,var(--gold-2),#8a6300);color:#241a00}
.ava.a3{background:linear-gradient(150deg,#22a06b,#0e5c3c)}
.ava.a4{background:linear-gradient(150deg,var(--blue),#1a4f85)}
.quote-card .who b{display:block;font-size:14px;color:#fff}
.quote-card .who span{font-size:12.5px;color:var(--tx-dim)}
.testi-note{margin-top:22px;font-size:13px;color:#7f8fa5;text-align:center}

/* kamus istilah (inovasi) — details/summary murni HTML */
.kamu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g-term{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.g-term summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;color:#fff;font-size:15.5px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.g-term summary::-webkit-details-marker{display:none}
.g-term summary::after{content:"+";font-family:monospace;font-size:19px;color:var(--gold);transition:transform .2s}
.g-term[open] summary::after{transform:rotate(45deg)}
.g-term[open] summary{border-bottom:1px dashed var(--line)}
.g-term .g-body{padding:14px 18px 18px;font-size:14px;color:var(--tx-dim)}
.g-term .g-body b{color:var(--gold)}
.g-term:nth-child(3n+1){border-top:3px solid var(--red)}
.g-term:nth-child(3n+2){border-top:3px solid var(--gold)}
.g-term:nth-child(3n){border-top:3px solid var(--green)}

/* keamanan beranda */
.sec-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mini-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.mini-card .ic{font-size:26px;display:block;margin-bottom:10px}
.mini-card h3{margin:0 0 8px;font-size:18px;color:#fff}
.mini-card p{margin:0 0 10px;font-size:14px;color:var(--tx-dim)}
.mini-card a{font-weight:700;font-size:14px}

/* tanggung jawab beranda */
.resp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tool-card{background:rgba(43,212,138,.06);border:1px solid rgba(43,212,138,.3);border-radius:var(--radius);padding:24px}
.tool-card h3{margin:0 0 8px;font-size:18px;color:var(--green)}
.tool-card p{margin:0;font-size:14px;color:var(--tx-dim)}
.resp-ban{margin-top:24px;background:linear-gradient(90deg,rgba(230,57,70,.15),rgba(255,210,63,.1));border:1px solid rgba(230,57,70,.4);border-radius:var(--radius);padding:18px 24px;display:flex;gap:14px;align-items:flex-start}
.resp-ban .ic{font-size:22px}
.resp-ban p{margin:0;font-size:14.5px;color:var(--tx)}

/* FAQ */
.faq-list{display:grid;gap:12px;max-width:880px}
.faq-item{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;color:#fff;font-size:15.5px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:monospace;color:var(--red);font-size:19px;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 20px 18px;font-size:14.5px;color:var(--tx-dim)}

/* tag cloud */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tag{font-size:13.5px;font-weight:600;color:var(--tx-dim);border:1px solid var(--line);background:var(--ink-2);padding:7px 16px;border-radius:999px;transition:all .15s}
.tag:hover{color:var(--gold);border-color:var(--gold);text-decoration:none;transform:translateY(-2px)}
.tag.hot{color:#fff;background:linear-gradient(150deg,var(--red),var(--red-deep));border-color:transparent}

/* ---------- artikel / halaman dalam ---------- */
.page-head{padding:36px 0 6px}
.crumbs{font-size:13px;color:var(--tx-dim);margin-bottom:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li:not(:last-child)::after{content:"›";margin-left:6px;color:#5f7085}
.crumbs a{color:var(--blue)}
.crumbs .cur{color:var(--gold)}
.page-head h1{margin:0 0 12px;font-size:34px;color:#fff;max-width:22ch}
.page-head .meta-line{font-size:13.5px;color:var(--tx-dim)}
.page-head .meta-line b{color:var(--green)}
.article-hero{margin:22px 0 8px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.article-hero img{display:block;width:100%}
.layout-1c{max-width:900px;margin:0 auto;padding-bottom:50px}
.entry-content{font-size:16px;color:var(--tx)}
.entry-content h2{font-size:26px;color:var(--gold);margin:38px 0 14px;padding-top:10px;border-top:1px dashed var(--line)}
.entry-content h2:first-child{margin-top:8px;border-top:0;padding-top:0}
.entry-content h3{font-size:19.5px;color:#fff;margin:26px 0 10px}
.entry-content ul,.entry-content ol{padding-left:24px;margin:0 0 16px;color:var(--tx-dim)}
.entry-content li{margin-bottom:7px}
.entry-content li::marker{color:var(--red)}
.entry-content b,.entry-content strong{color:#fff}
.entry-content .tbl-note{font-size:12.5px;color:#7f8fa5}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:18px 0}
.table-wrap table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.table-wrap th{background:var(--ink-3);color:var(--gold);text-align:left;padding:12px 14px;font-family:Georgia,serif}
.table-wrap td{padding:11px 14px;border-top:1px solid var(--line);color:var(--tx-dim);vertical-align:top}
.table-wrap tr td:first-child{color:var(--tx);font-weight:600;white-space:nowrap}
.note-box{border-radius:12px;padding:16px 20px;margin:20px 0;font-size:14.5px}
.note-box.info{background:rgba(77,163,255,.09);border:1px solid rgba(77,163,255,.35);color:#cfe4ff}
.note-box.warn{background:rgba(230,57,70,.09);border:1px solid rgba(230,57,70,.4);color:#ffd3d6}
.note-box.ok{background:rgba(43,212,138,.08);border:1px solid rgba(43,212,138,.35);color:#c9f5e2}
.note-box b{color:#fff}
figure.art-fig{margin:20px 0}
figure.art-fig img{border-radius:14px;border:1px solid var(--line);width:100%;display:block}
figure.art-fig figcaption{font-size:12.5px;color:#7f8fa5;margin-top:8px;text-align:center}
.article-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px}
.afn{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.afn:hover{border-color:var(--gold);text-decoration:none}
.afn span{font-size:12px;color:#7f8fa5;display:block}
.afn b{color:#fff;font-size:15px}

/* daftar isi kecil di kategori */
.toc{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:22px 0}
.toc b{color:var(--gold);font-size:14px;letter-spacing:1px;text-transform:uppercase}
.toc ol{margin:8px 0 0;padding-left:22px;color:var(--tx-dim);font-size:14.5px}
.toc a{color:var(--blue)}

/* ---------- formir ---------- */
.form-wrap{max-width:560px;margin:0 auto;padding:34px 0 60px}
.form-card{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:34px 32px;box-shadow:var(--shadow)}
.form-card h1{margin:0 0 6px;font-size:27px;color:#fff}
.form-card .sub{font-size:14px;color:var(--tx-dim);margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--tx);margin-bottom:6px}
.field input{width:100%;padding:12px 15px;border-radius:10px;border:1px solid var(--line);background:var(--ink);color:var(--tx);font-size:15px;outline:none}
.field input:focus{border-color:var(--gold)}
.field .hint{font-size:12px;color:#7f8fa5;margin-top:5px}
.field-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--tx-dim);margin:18px 0}
.field-check input{margin-top:3px;accent-color:var(--red);width:16px;height:16px;flex:none}
.form-submit{width:100%;border:0;font-size:16px;padding:14px;margin-top:6px}
.form-alt{text-align:center;font-size:14px;color:var(--tx-dim);margin-top:18px}
.form-aside{background:rgba(255,210,63,.07);border:1px solid rgba(255,210,63,.3);border-radius:12px;padding:14px 18px;font-size:13px;color:#e8d9a8;margin-top:22px}

/* ---------- pencarian ---------- */
.search-box{display:flex;gap:0;max-width:640px;margin:0 auto 26px;border-radius:999px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.search-box input{flex:1;border:0;background:transparent;color:var(--tx);padding:14px 22px;font-size:15px;outline:none;min-width:0}
.search-box button{border:0;background:var(--red);color:#fff;font-weight:700;padding:0 26px;cursor:pointer;font-size:15px}
.result-card{display:flex;gap:16px;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:12px}
.result-card .ric{flex:none;font-size:24px}
.result-card h3{margin:0 0 4px;font-size:17px}
.result-card h3 a{color:#fff}
.result-card p{margin:0;font-size:13.5px;color:var(--tx-dim)}
#search-status{color:var(--tx-dim);font-size:14px;text-align:center;margin:18px 0}

/* ---------- footer ---------- */
.site-footer{background:#090c10;border-top:3px solid var(--red)}
.footer-widgets{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:30px;padding:48px 20px 30px}
.f-brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:21px;font-weight:700;color:#fff;margin-bottom:12px}
.widget h4{font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{margin-bottom:9px}
.widget a{color:var(--tx-dim);font-size:14px}
.widget a:hover{color:var(--gold)}
.f-desc p{font-size:13.5px;color:#7f8fa5}
.f-legal{border-top:1px solid var(--line);text-align:center;padding:28px 20px 30px}
.f-legal p{max-width:820px;margin:0 auto 12px;font-size:13px;color:#7f8fa5}
.f-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 16px}
.f-badges span{font-size:12px;font-weight:700;color:var(--tx-dim);border:1px solid var(--line);border-radius:999px;padding:5px 14px}

/* ---------- floatbar (DAFTAR/MASUK gaya slot) ---------- */
.floatbar{position:fixed;left:0;right:0;bottom:0;z-index:90;pointer-events:none}
.fb-row{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;max-width:680px;margin:0 auto;padding:10px 14px 12px;background:linear-gradient(180deg,rgba(9,12,16,.82),rgba(9,12,16,.97));border-top:1px solid rgba(255,210,63,.35);border-radius:18px 18px 0 0;backdrop-filter:blur(8px);pointer-events:auto;box-shadow:0 -8px 30px rgba(0,0,0,.45)}
.fb-reels{display:flex;gap:6px;margin-right:6px}
.fb-reels .reel{display:block;width:30px;height:36px;overflow:hidden;background:#070a0e;border:2px solid #3a2f10;border-radius:8px}
.fb-reels .strip{display:block;animation:fb-spin 1.15s steps(4) infinite}
.fb-reels .strip b{display:block;height:36px;line-height:36px;text-align:center;font-size:19px;font-weight:400}
@keyframes fb-spin{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.fb-btn{flex:1;max-width:190px;text-align:center;font-weight:900;font-size:15.5px;letter-spacing:.6px;padding:12px 10px;border-radius:12px;text-decoration:none!important;border:2px solid}
.fb-daftar{background:linear-gradient(165deg,#ff6057,var(--red) 55%,var(--red-deep));color:#fff;border-color:var(--gold);animation:fb-pulse 1.6s ease-in-out infinite}
.fb-masuk{background:linear-gradient(165deg,#ffe589,var(--gold) 50%,var(--gold-2));color:#241a00;border-color:#fff3;text-shadow:0 1px 0 rgba(255,255,255,.35)}
@keyframes fb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,63,.55)}55%{box-shadow:0 0 0 9px rgba(255,210,63,0)}}
.fb-coins .coin{position:absolute;bottom:10px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff3c4,var(--gold-2) 58%,#8a6300);box-shadow:0 0 8px rgba(255,210,63,.8);opacity:0;animation:fb-coin 3.4s linear infinite}
.fb-coins .c1{left:12%;animation-delay:0s}
.fb-coins .c2{left:28%;animation-delay:.7s;animation-duration:3s}
.fb-coins .c3{left:72%;animation-delay:1.3s;animation-duration:3.7s}
.fb-coins .c4{left:86%;animation-delay:.4s;animation-duration:3.1s}
.fb-coins .c5{left:50%;animation-delay:1.9s;animation-duration:3.5s}
@keyframes fb-coin{0%{transform:translateY(0) scale(.7);opacity:0}14%{opacity:.95}100%{transform:translateY(-64px) scale(1.05);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .fb-reels .strip,.fb-daftar,.fb-coins .coin{animation:none}
  .fb-coins .coin{display:none}
}

/* ---------- responsif ---------- */
@media (max-width:1080px){
  .hero h1{font-size:38px}
  .main-navigation a{padding:10px 9px;font-size:13.5px}
  .kamu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .main-navigation{display:none}
  .nav-toggle{display:block}
  .hero-grid,.mobile-grid,.why-grid{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-cards,.resp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-widgets{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .hero{padding:40px 0 38px}
  .hero h1{font-size:33px}
  .sec{padding:44px 0}
  .sec-head h2{font-size:26px}
  .page-head h1{font-size:28px}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-footer-nav{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hdr-search{display:none}
  .topbar .tb-right{display:none}
  .g2,.g3,.g4,.sec-cards,.resp-grid,.kamu-grid,.hero-stats{grid-template-columns:minmax(0,1fr)}
  .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fb-reels{display:none}
  .footer-widgets{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .hero h1{font-size:28px}
  .hero-stats{grid-template-columns:minmax(0,1fr)}
  .form-card{padding:26px 20px}
  .fb-btn{font-size:14px}
}
@media (max-width:380px){
  .fb-reels{display:none}
  .brand span{font-size:20px}
}