/* ============================================================
   TEMA GELAP — lapisan warna saja (disetujui kibo 2026-10-23).
   Aktif hanya bila <html data-theme="dark">. Tidak mengubah
   layout, animasi, maupun isi — hanya warna/latar/batas.
   Tombol .themebtn tinggal di berkas ini agar fitur utuh di sini.
   ============================================================ */

/* ---------- tombol pengalih tema ---------- */
.themebtn{width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);background:transparent;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);padding:0;transition:border-color .25s,color .25s}
.themebtn:hover{border-color:var(--sky);color:var(--navy)}
.themebtn svg{width:17px;height:17px;display:block}
.themebtn .ic-sun{display:none}
html[data-theme="dark"] .themebtn .ic-sun{display:block}
html[data-theme="dark"] .themebtn .ic-moon{display:none}
html[data-theme="dark"] .themebtn:hover{color:var(--sky)}
.mm-lang .themebtn{margin-left:auto;border-color:rgba(255,255,255,.3);color:#dbe7fa;width:36px;height:36px}

/* ---------- palet gelap (remap variabel) ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e9effc; --ink2:#c2d2ee; --mut:#93a7c9; --faint:#63789c;
  --line:rgba(127,176,247,.20); --line2:rgba(127,176,247,.11);
  --bg:#050d1f; --gray:#081831; --gray2:#0d2148;
  --acc:#7fb0f7; --acc-soft:#0e2a57;
}
html[data-theme="dark"] ::selection{background:#7fb0f7;color:#071a3e}

/* ---------- chrome ---------- */
html[data-theme="dark"] header{background:rgba(5,13,31,.92)}
html[data-theme="dark"] .btn-o{border-color:rgba(233,239,252,.65)}
html[data-theme="dark"] .burger{background:#081831}
html[data-theme="dark"] .scroll-progress{background:var(--amber)}

/* ---------- hero & judul ---------- */
html[data-theme="dark"] .hero h1 .out{-webkit-text-stroke-color:#7fb0f7}
html[data-theme="dark"] .p-hero h1 .out{-webkit-text-stroke-color:#7fb0f7}
html[data-theme="dark"] .cta h2 .out{-webkit-text-stroke-color:#e9effc}
html[data-theme="dark"] .nv{color:#e9effc}
html[data-theme="dark"] .grad{background:linear-gradient(94deg,#8fbdf9 5%,#5b93e6 58%,#d7e9ff 105%);-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] .p-hero::before{background:radial-gradient(rgba(127,176,247,.17) 1.2px,transparent 1.7px) 0 0/24px 24px}
html[data-theme="dark"] .d-hero::before{background:radial-gradient(rgba(127,176,247,.17) 1.2px,transparent 1.7px) 0 0/24px 24px}
html[data-theme="dark"] .hero-c::before{background:radial-gradient(rgba(127,176,247,.17) 1.2px,transparent 1.7px) 0 0/24px 24px}
html[data-theme="dark"] .reveal .big b{color:var(--sky)}
html[data-theme="dark"] .plusorn{color:var(--sky)}

/* ---------- mock browser di hero ---------- */
html[data-theme="dark"] .browser{background:#081831;box-shadow:0 -18px 60px rgba(0,0,0,.35)}
html[data-theme="dark"] .browser .bar{background:#071630}
html[data-theme="dark"] .dot{background:#2c4a7c}
html[data-theme="dark"] .url{background:#0d2148}
html[data-theme="dark"] .side{background:#071630}
html[data-theme="dark"] .bars i{background:linear-gradient(180deg,#24457f,#12294f)}
html[data-theme="dark"] .float-card{background:#0d2148;box-shadow:0 18px 40px rgba(0,0,0,.45)}

/* ---------- marquee & kinetik ---------- */
html[data-theme="dark"] .marquee{background:#050d1f}
html[data-theme="dark"] .kinetic{background:#050d1f}
html[data-theme="dark"] .krow{color:#e9effc}
html[data-theme="dark"] .krow.r{-webkit-text-stroke-color:#41619a}

/* ---------- panel & kartu generik ---------- */
html[data-theme="dark"] .philo div{background:#081831}
html[data-theme="dark"] .stats{background:#081831}
html[data-theme="dark"] .why .card{background:#081831}
html[data-theme="dark"] .steps .st{background:#081831}
html[data-theme="dark"] .pstep{background:#081831}
html[data-theme="dark"] .pstep:hover{box-shadow:0 22px 44px rgba(0,0,0,.4)}
html[data-theme="dark"] .ppill{color:var(--sky);border-color:var(--sky)}
html[data-theme="dark"] .clients span{color:rgba(233,239,252,.32)}
html[data-theme="dark"] .clients span.dark{color:rgba(233,239,252,.62)}
html[data-theme="dark"] .sec.grayband .stats-nv b{color:#e9effc}
html[data-theme="dark"] .sec.grayband .clients span{color:rgba(233,239,252,.32)}
html[data-theme="dark"] .sec.grayband .clients span.dark{color:rgba(233,239,252,.62)}
html[data-theme="dark"] .sec.grayband .stats-nv{border-top-color:rgba(127,176,247,.2);border-bottom-color:rgba(127,176,247,.2)}
html[data-theme="dark"] .sec.grayband .stats-nv div{border-left-color:rgba(127,176,247,.2)}
html[data-theme="dark"] .sec.grayband .clients{border-color:rgba(127,176,247,.2)}

/* ---------- sampul karya ---------- */
html[data-theme="dark"] .cov-a{background:linear-gradient(135deg,#12294f,#081831 62%)}
html[data-theme="dark"] .cov-b{background:linear-gradient(135deg,#0d2f2a,#081831 62%)}
html[data-theme="dark"] .cov-c{background:linear-gradient(135deg,#33240d,#081831 62%)}
html[data-theme="dark"] .cov-d{background:linear-gradient(135deg,#1a2440,#081831 65%)}
html[data-theme="dark"] .cov-e{background:linear-gradient(135deg,#0e2c4d,#081831 62%)}
html[data-theme="dark"] .cov-f{background:linear-gradient(135deg,#241743,#081831 62%)}
html[data-theme="dark"] .cover .mono{color:rgba(255,255,255,.13)}
html[data-theme="dark"] .cover .yr{color:rgba(233,239,252,.55)}
html[data-theme="dark"] .cover .ring{border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .d-cover .mono{color:rgba(255,255,255,.12)}
html[data-theme="dark"] .wno{-webkit-text-stroke-color:rgba(127,176,247,.5)}

/* ---------- layanan: daftar & akordeon ---------- */
html[data-theme="dark"] .acc-ic::before,html[data-theme="dark"] .acc-ic::after{background:#7fb0f7}
html[data-theme="dark"] .acc-item.open .acc-ic::before,html[data-theme="dark"] .acc-item.open .acc-ic::after{background:#fff}
html[data-theme="dark"] .acc-proj .cov i{color:rgba(255,255,255,.35)}
html[data-theme="dark"] .tag.acc{border-color:#2c4a7c}

/* ---------- filter & formulir ---------- */
html[data-theme="dark"] .filters a.on{background:#e9effc;color:#071a3e;border-color:#e9effc}
html[data-theme="dark"] .form input,html[data-theme="dark"] .form select,html[data-theme="dark"] .form textarea{background:#081831}
html[data-theme="dark"] .form select{background:#081831 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237fb0f7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center}
html[data-theme="dark"] .info-card + .info-card{background:#081831}

/* ---------- manifesto & poster (About) ---------- */
html[data-theme="dark"] .mani{background:#071630}
html[data-theme="dark"] .mani-stage{background:#071630}
html[data-theme="dark"] .mani-wm{color:rgba(127,176,247,.06)}
html[data-theme="dark"] .mani-badge{background:#0d2148;color:#8fbdf9;box-shadow:0 12px 32px rgba(0,0,0,.4)}
html[data-theme="dark"] .mani-big{color:#dbe7fa}
html[data-theme="dark"] .mani-side{color:#a9bde0}
html[data-theme="dark"] .mword .mtext{-webkit-text-stroke-color:#5b93e6}
html[data-theme="dark"] .mword:hover .mtext,html[data-theme="dark"] .mword.auto .mtext{color:#5b93e6}
html[data-theme="dark"] .mword .micon{background:#0d2148}
html[data-theme="dark"] .poster-stage{background:linear-gradient(180deg,#081831,#050d1f)}
html[data-theme="dark"] .pw.blue{color:#5b93e6}
html[data-theme="dark"] .pw.navy{color:#7d94c2}
html[data-theme="dark"] .orb text{fill:#7fb0f7}

/* ---------- insights & artikel ---------- */
html[data-theme="dark"] .ins-tick .track{color:#c2d2ee}
html[data-theme="dark"] .ins-cat{background:#0e2a57;color:#8fbdf9}
html[data-theme="dark"] .ins-cat.plain{background:none;color:var(--sky)}
html[data-theme="dark"] .ins-side .box{background:#081831}
html[data-theme="dark"] .ins-side .pop .n{-webkit-text-stroke-color:#5b93e6}
html[data-theme="dark"] .ins-side .ctab{background:#241b09;border-color:#4d3a14}
html[data-theme="dark"] .ins-side .ctab h4{color:#f5cf87}
html[data-theme="dark"] .ins-side .ctab p{color:#c9b083}
html[data-theme="dark"] .ins-side .ctab .go{color:#f5cf87}
html[data-theme="dark"] .art-tldr{background:#241b09;border-color:#4d3a14}
html[data-theme="dark"] .art-tldr .k{color:#d9a94f}
html[data-theme="dark"] .art-tldr p{color:#e3d3a8}
html[data-theme="dark"] .art-body p,html[data-theme="dark"] .art-body li{color:#c2d2ee}
html[data-theme="dark"] .art-quote{color:#8fbdf9}
html[data-theme="dark"] .art-author{background:#081831}
html[data-theme="dark"] .art-share a{color:#8fbdf9}

/* ---------- melayang ---------- */
html[data-theme="dark"] .fb.up{background:#123a7d;border:1px solid rgba(127,176,247,.4)}

/* submenu nav & akordeon beranda — tema gelap */
html[data-theme="dark"] .sub{background:#0a1830}
html[data-theme="dark"] nav.main .sub a:hover{background:#0e2148;color:#fff}
html[data-theme="dark"] .svc .svc-lab{color:var(--amber)}

html[data-theme="dark"] .steps .st b{color:var(--sky)}

/* chatbot — tema gelap */
html[data-theme="dark"] .chat-panel{background:#081831;border-color:#14305f}
html[data-theme="dark"] .cp-msg.bot{background:#0d2148;border-color:#1b3a6e;color:#e9effc}
html[data-theme="dark"] .cp-brief{background:#0d2148;border-color:#1b3a6e}
html[data-theme="dark"] .cp-brief p{color:#c9dcf7}
html[data-theme="dark"] .cp-brief h5,html[data-theme="dark"] .cp-tag{color:var(--amber)}
html[data-theme="dark"] .cp-typing{background:#0d2148;border-color:#1b3a6e}
html[data-theme="dark"] .cp-chips button{background:transparent;border-color:var(--sky);color:var(--sky)}
html[data-theme="dark"] .cp-foot{background:#081831;border-top-color:#14305f}
html[data-theme="dark"] .cp-foot input{background:#0d2148;border-color:#1b3a6e;color:#e9effc}
html[data-theme="dark"] .chat-panel{color-scheme:dark}
html[data-theme="dark"] .cp-chips{background:#081831;border-top-color:#14305f}
html[data-theme="dark"] .cp-form{background:#0d2148;border-color:#1b3a6e}
html[data-theme="dark"] .cp-fhead{color:#c9dcf7}
html[data-theme="dark"] .cp-form input{background:#081831;border-color:#1b3a6e;color:#e9effc}
html[data-theme="dark"] .cp-err{color:#ff9d94}