/* ============================================================
   theme.css — dua palet warna situs EducativeAI, dipilih lewat tombol tema
   (assets/theme.js). Dimuat SETELAH gaya halaman, sehingga:
   1) variabel warna halaman ditimpa per palet;
   2) warna yang tertanam langsung di gaya halaman (gradien ungu, topbar gelap,
      tombol berwarna) ikut diseragamkan.
   Palet 1 "Zaitun" : #F5EFE3 krem · #4F5B2A zaitun · #B8892D oker · #D8C9A8 pasir
   Palet 2 "Persik" : #FFFAF3 krem · #FFF2DB persik muda · #FFE5BF persik · #F62440 merah
   ============================================================ */

html[data-theme="zaitun"]{
  --bg:#F5EFE3; --surface:#FFFCF6; --surface2:#EFE6D3; --surface3:#E6DAC1; --surface-card:#FFFCF6;
  --text:#2F3519; --text2:#4C5233; --text3:#686B4E; --muted:#686B4E;
  --accent:#4F5B2A; --accent-dark:#3C4520; --accent-mid:#4F5B2A; --accent-text:#4F5B2A;
  --accent-light:rgba(79,91,42,.12); --on-accent:#FFFFFF; --accent-rgb:79,91,42;
  --accent2:#B8892D; --accent3:#B8892D; --gold:#B8892D;
  --purple:#4F5B2A; --purple-light:rgba(79,91,42,.12); --teal:#4F5B2A; --teal-light:rgba(79,91,42,.10);
  --border:#D8C9A8; --border2:#E6DAC1;
  --success:#3F7A3A; --success-light:rgba(63,122,58,.12); --error:#B23A2A; --danger:#B23A2A; --danger-light:rgba(178,58,42,.10);
  --warning:#8C6212; --warning-light:rgba(184,137,45,.16);
  --shadow:0 1px 3px rgba(47,53,25,.08); --shadow-lg:0 12px 32px rgba(47,53,25,.12);
  --t-topbar:rgba(245,239,227,.88); --t-heading:#2F3519; --t-hl:#B8892D; --t-chip:#EFE6D3;
  color-scheme:light;
}
html[data-theme="persik"]{
  --bg:#FFFAF3; --surface:#FFFFFF; --surface2:#FFF2DB; --surface3:#FFE5BF; --surface-card:#FFFFFF;
  --text:#3A1F14; --text2:#5E3B2B; --text3:#80604F; --muted:#80604F;
  --accent:#F62440; --accent-dark:#C8102E; --accent-mid:#F62440; --accent-text:#C8102E;
  --accent-light:rgba(246,36,64,.10); --on-accent:#FFFFFF; --accent-rgb:246,36,64;
  --accent2:#E07A1F; --accent3:#E07A1F; --gold:#E07A1F;
  --purple:#C8102E; --purple-light:rgba(246,36,64,.10); --teal:#C8102E; --teal-light:rgba(246,36,64,.08);
  --border:#F5D3A6; --border2:#FFE5BF;
  --success:#2E7D4F; --success-light:rgba(46,125,79,.12); --error:#C8102E; --danger:#C8102E; --danger-light:rgba(200,16,46,.10);
  --warning:#9A5A0E; --warning-light:rgba(224,122,31,.14);
  --shadow:0 1px 3px rgba(58,31,20,.08); --shadow-lg:0 12px 32px rgba(58,31,20,.12);
  --t-topbar:rgba(255,250,243,.9); --t-heading:#3A1F14; --t-hl:#F62440; --t-chip:#FFF2DB;
  color-scheme:light;
}

/* ── Dasar ───────────────────────────────────────────────────────────────── */
html[data-theme] body{background:var(--bg)!important;color:var(--text)!important;}
html[data-theme] a{color:var(--accent-text);}
html[data-theme] body::before, html[data-theme] body::after,
html[data-theme] .orb, html[data-theme] .orb1, html[data-theme] .orb2, html[data-theme] .orb3{display:none!important;}

/* ── Topbar & navigasi ───────────────────────────────────────────────────── */
html[data-theme] .topbar{background:var(--t-topbar)!important;border-bottom:1px solid var(--border2)!important;box-shadow:none!important;}
html[data-theme] .brand, html[data-theme] .brand-name, html[data-theme] .topbar-name{color:var(--text)!important;}
html[data-theme] .brand-icon, html[data-theme] .brand-mark, html[data-theme] .logo-badge, html[data-theme] .logo-dot{background:var(--accent)!important;color:var(--on-accent)!important;}
html[data-theme] .nav-pill, html[data-theme] .nav-link, html[data-theme] .topbar-pill, html[data-theme] .back-btn{
  background:var(--surface)!important;color:var(--text2)!important;border:1px solid var(--border)!important;}
html[data-theme] .nav-pill:hover, html[data-theme] .nav-link:hover, html[data-theme] .topbar-pill:hover, html[data-theme] .back-btn:hover{color:var(--accent-text)!important;border-color:var(--accent)!important;}

/* ── Judul: gradien → warna solid ────────────────────────────────────────── */
html[data-theme] h1, html[data-theme] h2, html[data-theme] .hero h1, html[data-theme] .hero h2, html[data-theme] .hero-title,
html[data-theme] .sec-title, html[data-theme] .page-title, html[data-theme] .stat-num, html[data-theme] .price-amount,
html[data-theme] .price-hero, html[data-theme] .price-val, html[data-theme] .how-num, html[data-theme] .scard-num, html[data-theme] .kode-num{
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;color:var(--t-heading)!important;}
html[data-theme] h1 span, html[data-theme] h1 em, html[data-theme] .hero h1 span, html[data-theme] .hero-title em,
html[data-theme] .price-amount, html[data-theme] .price-hero, html[data-theme] .price-val{color:var(--t-hl)!important;-webkit-text-fill-color:var(--t-hl)!important;}
html[data-theme] .stat-num.ok{color:var(--success)!important;-webkit-text-fill-color:var(--success)!important;}
html[data-theme] .stat-num.danger{color:var(--danger)!important;-webkit-text-fill-color:var(--danger)!important;}
html[data-theme] .stat-num.info{color:var(--accent)!important;-webkit-text-fill-color:var(--accent)!important;}
html[data-theme] .hero-sub, html[data-theme] .subtitle, html[data-theme] .card-desc, html[data-theme] .feat-title,
html[data-theme] .feature-title, html[data-theme] .card-feat, html[data-theme] .stat-label{color:var(--text2)!important;}
html[data-theme] .card-title, html[data-theme] .scard-title, html[data-theme] .section-title, html[data-theme] .upload-title,
html[data-theme] .uz-title, html[data-theme] .rb-title, html[data-theme] .result-banner-title, html[data-theme] .modal-title,
html[data-theme] .success-title{color:var(--text)!important;}

/* ── Lencana / label kecil ───────────────────────────────────────────────── */
html[data-theme] .hero-badge, html[data-theme] .hero-eyebrow, html[data-theme] .chip-new, html[data-theme] .comp-badge,
html[data-theme] .fi-badge, html[data-theme] .drop-pill, html[data-theme] .price-badge, html[data-theme] .sec-eyebrow{
  background:var(--t-chip)!important;color:var(--accent-text)!important;border:1px solid var(--border)!important;}
html[data-theme] .chip-hot{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important;}
html[data-theme] .hero-dot, html[data-theme] .hero-feat-dot, html[data-theme] .feat-dot{background:var(--accent2)!important;}

/* ── Kartu & panel ───────────────────────────────────────────────────────── */
html[data-theme] .card, html[data-theme] .tool-card, html[data-theme] .feat-card, html[data-theme] .feature, html[data-theme] .how-card,
html[data-theme] .how-wrap, html[data-theme] .trust-bar, html[data-theme] .scard, html[data-theme] .search-card, html[data-theme] .section-card,
html[data-theme] .result-card, html[data-theme] .progress-card, html[data-theme] .access-card, html[data-theme] .contact-card,
html[data-theme] .review-card, html[data-theme] .stat-box, html[data-theme] .apa-card, html[data-theme] .modal-box,
html[data-theme] .success-box, html[data-theme] .panel-right, html[data-theme] .article-preview{
  background:var(--surface)!important;border-color:var(--border)!important;box-shadow:var(--shadow)!important;}
html[data-theme] .tool-card::before{display:none!important;}
html[data-theme] .tool-card:hover{border-color:var(--accent)!important;box-shadow:var(--shadow-lg)!important;}
html[data-theme] .card-icon-wrap, html[data-theme] .uz-icon, html[data-theme] .upload-icon-wrap, html[data-theme] .file-ico,
html[data-theme] .icon-blue, html[data-theme] .icon-sky, html[data-theme] .icon-teal, html[data-theme] .icon-purple, html[data-theme] .icon-amber{
  background:var(--accent-light)!important;border-color:var(--border)!important;}
html[data-theme] .card-price-row{background:var(--surface2)!important;border-color:var(--border)!important;}
html[data-theme] .upload-zone, html[data-theme] .drop{background:var(--surface2)!important;border-color:var(--border)!important;}
html[data-theme] .upload-zone:hover, html[data-theme] .drop:hover, html[data-theme] .drop.over, html[data-theme] .upload-zone.dragging{border-color:var(--accent)!important;background:var(--accent-light)!important;}

/* ── Tombol ──────────────────────────────────────────────────────────────── */
html[data-theme] .submit-btn, html[data-theme] .btn-primary, html[data-theme] .pay-btn, html[data-theme] .btn-pay, html[data-theme] .gen-btn,
html[data-theme] .upload-cta, html[data-theme] .dl-btn, html[data-theme] .btn-dl, html[data-theme] .prev-btn-dl, html[data-theme] .verify-btn,
html[data-theme] .btn-verify, html[data-theme] .search-btn, html[data-theme] .download-btn, html[data-theme] .edu-btn:not(.ghost), html[data-theme] .btn-err.primary{
  background:var(--accent)!important;background-image:none!important;color:var(--on-accent)!important;border-color:var(--accent)!important;box-shadow:none!important;}
html[data-theme] .submit-btn:hover:not(:disabled), html[data-theme] .btn-primary:hover:not(:disabled), html[data-theme] .gen-btn:hover:not(:disabled),
html[data-theme] .dl-btn:hover, html[data-theme] .btn-dl:hover, html[data-theme] .pay-btn:hover, html[data-theme] .btn-pay:hover,
html[data-theme] .search-btn:hover:not(:disabled), html[data-theme] .verify-btn:hover{background:var(--accent-dark)!important;}
html[data-theme] .card-btn, html[data-theme] .btn-blue, html[data-theme] .btn-sky, html[data-theme] .btn-teal, html[data-theme] .btn-purple, html[data-theme] .btn-amber,
html[data-theme] .btn-secondary, html[data-theme] .btn-ghost, html[data-theme] .reset-btn, html[data-theme] .btn-reset, html[data-theme] .copy-btn,
html[data-theme] .prev-btn-back, html[data-theme] .rm-btn, html[data-theme] .edu-btn.ghost{
  background:var(--accent-light)!important;color:var(--accent-text)!important;border:1px solid var(--border)!important;}

/* ── Tab & pilihan ───────────────────────────────────────────────────────── */
html[data-theme] .tab-btn, html[data-theme] .lang-tab, html[data-theme] .pay-tab, html[data-theme] .access-tab, html[data-theme] .apa-tab,
html[data-theme] .journal-btn, html[data-theme] .section-btn, html[data-theme] .lang-btn{background:var(--surface)!important;color:var(--text2)!important;border-color:var(--border)!important;}
html[data-theme] .tab-btn.active, html[data-theme] .lang-tab.active, html[data-theme] .pay-tab.active, html[data-theme] .access-tab.active,
html[data-theme] .apa-tab.active, html[data-theme] .journal-btn.selected, html[data-theme] .section-btn.selected, html[data-theme] .lang-btn.active{
  background:var(--accent-light)!important;color:var(--accent-text)!important;border-color:var(--accent)!important;}

/* ── Isian ───────────────────────────────────────────────────────────────── */
html[data-theme] input:not([type=checkbox]):not([type=radio]):not([type=file]), html[data-theme] select, html[data-theme] textarea{
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;}
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder{color:var(--text3)!important;}
/* Daftar pilihan dropdown & label tema slide: ikut warna tema (dulu latar gelap bawaan desain lama) */
html[data-theme] select option, html[data-theme] select optgroup{background:var(--surface)!important;color:var(--text)!important;}
html[data-theme] .theme-name{background:var(--surface)!important;color:var(--text)!important;border-top:1px solid var(--border)!important;font-size:11px!important;}
html[data-theme] .theme-opt.sel{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-light)!important;}
html[data-theme] .theme-opt.sel .theme-name{background:var(--accent)!important;color:#fff!important;}
html[data-theme] input[type=checkbox], html[data-theme] input[type=radio]{accent-color:var(--accent);}

/* ── Kotak status ────────────────────────────────────────────────────────── */
html[data-theme] .warn-box, html[data-theme] .warn-pay, html[data-theme] .pay-warn, html[data-theme] .info-warn, html[data-theme] .kode-info, html[data-theme] .warn{
  background:var(--warning-light)!important;color:var(--warning)!important;border-color:var(--border)!important;}
html[data-theme] .err-box, html[data-theme] .error-box, html[data-theme] .pay-err, html[data-theme] .error-msg{background:var(--danger-light)!important;color:var(--danger)!important;border-color:var(--danger-light)!important;}
html[data-theme] .result-banner, html[data-theme] .file-info, html[data-theme] .edu-ok-banner.show{background:var(--success-light)!important;border-color:var(--success-light)!important;}
html[data-theme] .result-banner *, html[data-theme] .file-info .file-name, html[data-theme] .file-name-disp{color:var(--success)!important;-webkit-text-fill-color:var(--success)!important;}
html[data-theme] .cite-mark{background:var(--warning-light)!important;color:var(--warning)!important;}
html[data-theme] .prog-track, html[data-theme] .progress-track{background:var(--surface3)!important;}
html[data-theme] .prog-fill, html[data-theme] .progress-fill{background:var(--accent)!important;}
html[data-theme] .footer, html[data-theme] .site-foot, html[data-theme] .footer-note{color:var(--text3)!important;border-color:var(--border2)!important;}
html[data-theme] .footer a, html[data-theme] .site-foot a{color:var(--text3)!important;}
html[data-theme] .modal-bg{background:rgba(0,0,0,.45)!important;}
/* Pratinjau slide layar penuh: latar gelap pekat agar slide & judul terbaca (halaman di belakang tidak tembus) */
html[data-theme] .preview-modal{background:rgba(17,20,24,.97)!important;}
html[data-theme] .preview-title{color:#F5F5F4!important;}
html[data-theme] .preview-modal .prev-btn-back{background:rgba(255,255,255,.1)!important;color:#F5F5F4!important;border:1px solid rgba(255,255,255,.25)!important;}

/* ── Tombol pilihan tema ─────────────────────────────────────────────────── */
.theme-toggle{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border-radius:100px;
  border:1px solid var(--border,#ccc);background:var(--surface,#fff);color:var(--text2,#333);font:600 12px/1 system-ui,-apple-system,'Segoe UI',sans-serif;
  cursor:pointer;flex-shrink:0;white-space:nowrap;}
.theme-toggle:hover{border-color:var(--accent,#888);}
.theme-toggle:focus-visible{outline:2px solid var(--accent,#888);outline-offset:2px;}
.theme-toggle .sw{display:inline-flex;}
.theme-toggle .sw i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15);margin-left:-3px;}
.theme-toggle .sw i:first-child{margin-left:0;}
.theme-toggle.floating{position:fixed;right:16px;bottom:16px;z-index:9999;box-shadow:0 4px 14px rgba(0,0,0,.15);}
@media(max-width:640px){.theme-toggle .tt-label{display:none;}.theme-toggle{padding:0 9px;}}

/* ── Logo SVG di halaman informasi (Cek Pesanan, FAQ, Syarat, Refund, Privasi) ── */
html[data-theme] .topbar svg [fill="#1D4ED8"]{fill:var(--accent);}
html[data-theme] .topbar svg [fill="#F59E0B"]{fill:var(--accent2);}
html[data-theme] .topbar a span[style*="#1D4ED8"]{color:var(--text)!important;}
html[data-theme] .topbar a span[style*="#F59E0B"]{color:var(--accent2)!important;}

/* ── Panel admin (admin.php memakai nama variabel sendiri) ───────────────── */
html[data-theme] .admin-ui{
  --s1:var(--surface); --s2:var(--surface2); --b:var(--border); --t:var(--text); --m:var(--text3);
  --a:var(--accent); --a2:var(--accent2); --ok:var(--success); --er:var(--danger); --wa:var(--warning);}
html[data-theme] .admin-ui .top{background:var(--t-topbar)!important;}
html[data-theme] .admin-ui .tabs a{color:var(--text2);}
html[data-theme] .admin-ui .tabs a.on, html[data-theme] .admin-ui .tabs a:hover{background:var(--accent-light);color:var(--accent-text);}
html[data-theme] .admin-ui .btn{background:var(--surface);color:var(--text);border-color:var(--border);}
html[data-theme] .admin-ui .btn:hover{border-color:var(--accent);}
html[data-theme] .admin-ui .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
html[data-theme] .admin-ui .btn.danger{color:var(--danger);}
html[data-theme] .admin-ui .linkbtn, html[data-theme] .admin-ui a{color:var(--accent-text);}
html[data-theme] .admin-ui .alert.ok{background:var(--success-light);border-color:var(--success-light);color:var(--success);}
html[data-theme] .admin-ui .alert.err{background:var(--danger-light);border-color:var(--danger-light);color:var(--danger);}
html[data-theme] .admin-ui .alert.warn{background:var(--warning-light);border-color:var(--border);color:var(--warning);}
html[data-theme] .admin-ui .p-approved{background:var(--success-light);color:var(--success);}
html[data-theme] .admin-ui .p-pending{background:var(--warning-light);color:var(--warning);}
html[data-theme] .admin-ui .p-used{background:var(--accent-light);color:var(--accent-text);}
html[data-theme] .admin-ui .p-failed, html[data-theme] .admin-ui .p-creating{background:var(--danger-light);color:var(--danger);}
html[data-theme] .admin-ui code, html[data-theme] .admin-ui .path, html[data-theme] .admin-ui pre.log{background:var(--surface2);border-color:var(--border);color:var(--text);}
html[data-theme] .admin-ui input:focus, html[data-theme] .admin-ui select:focus, html[data-theme] .admin-ui textarea:focus{outline-color:var(--accent);}

/* ── Mode demo (assets/demo.js) ──────────────────────────────────────────── */
.demo-btn{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;margin:12px 0 4px;padding:12px 16px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--accent,#7c3aed);background:var(--accent-light,rgba(124,58,237,.08));color:var(--accent-text,#7c3aed);font:inherit;}
.demo-btn:hover{background:var(--surface2,#f3f3f3);}
.demo-btn.on{border-style:solid;}
.demo-btn:disabled{opacity:.7;cursor:wait;}
.demo-btn-title{font-weight:700;font-size:14px;}
.demo-btn-sub{font-size:12px;opacity:.85;}
.demo-banner{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 5%;
  background:var(--warning-light,#fff4d6);color:var(--text,#222);border-bottom:1px solid var(--border,#e5d3a6);font-size:13px;line-height:1.5;
  backdrop-filter:blur(8px);}
.demo-pill{font-weight:800;font-size:11px;letter-spacing:.08em;padding:3px 8px;border-radius:6px;background:var(--accent,#7c3aed);color:var(--on-accent,#fff);}
.demo-text{flex:1;min-width:220px;}
.demo-exit{border:1px solid var(--border,#ccc);background:var(--surface,#fff);color:var(--text,#222);border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;}
.demo-access-note{margin:12px 0;padding:12px 16px;border-radius:12px;border:1px dashed var(--accent,#4F5B2A);background:var(--surface,#fff);color:var(--text,#2b2b2b);font-size:13px;line-height:1.5;text-align:center;}

/* ── Navigasi situs: markup & gaya sama di semua halaman ─────────────────── */
.site-nav{position:sticky;top:0;z-index:200;background:var(--t-topbar,rgba(255,255,255,.92));
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border2,#e5e5e5);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;}
.site-nav-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px;min-height:60px;padding:0 clamp(16px,3vw,32px);}
.site-brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none!important;
  color:var(--text)!important;font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
.site-brand b{font-weight:700;color:var(--accent2,#B8892D);}
.site-brand-mark{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--on-accent,#fff);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.site-links{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;}
.site-links a{padding:7px 12px;border-radius:8px;font-size:13.5px;font-weight:500;line-height:1.2;white-space:nowrap;
  color:var(--text2)!important;text-decoration:none!important;transition:background .15s,color .15s;}
.site-links a:hover{background:var(--surface2);color:var(--text)!important;}
.site-links a[aria-current="page"]{background:var(--accent-light);color:var(--accent-text)!important;font-weight:600;}
.site-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
.site-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border-radius:100px;
  border:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap;
  color:var(--text)!important;text-decoration:none!important;}
.site-btn:hover, .site-btn[aria-current="page"]{border-color:var(--accent);color:var(--accent-text)!important;}
.site-btn.icon{width:32px;padding:0;}
.site-links a:focus-visible, .site-btn:focus-visible, .site-brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Menu "Layanan": daftar turun berisi kelima layanan (dibuka/ditutup oleh theme.js) */
.nav-dd{position:relative;}
.nav-dd-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 10px 7px 12px;border:0;border-radius:8px;background:none;cursor:pointer;
  font:500 13.5px/1.2 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--text2);white-space:nowrap;transition:background .15s,color .15s;}
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn{background:var(--surface2);color:var(--text);}
.nav-dd.on .nav-dd-btn{background:var(--accent-light);color:var(--accent-text);font-weight:600;}
.nav-dd-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.nav-dd-chev{width:14px;height:14px;transition:transform .15s;}
.nav-dd.open .nav-dd-chev{transform:rotate(180deg);}
.nav-dd-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:260;width:350px;padding:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.16);}
.nav-dd-menu::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px;}   /* jembatan agar menu tidak tertutup saat kursor turun */
.nav-dd.open .nav-dd-menu{display:block;}
.site-links .nav-dd-menu a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;white-space:normal;font-weight:500;color:var(--text)!important;}
.site-links .nav-dd-menu a:hover{background:var(--surface2);}
.site-links .nav-dd-menu a[aria-current="page"]{background:var(--accent-light);}
.nav-dd-ic{flex:0 0 36px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  background:var(--accent-light);color:var(--accent-text);}
.nav-dd-ic .ico{width:18px;height:18px;}
.nav-dd-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.nav-dd-tx b{font-size:14px;font-weight:600;line-height:1.3;color:var(--text);}
.nav-dd-tx small{font-size:12px;font-weight:400;line-height:1.4;color:var(--text2);}
.site-links .nav-dd-menu a.nav-dd-foot{display:block;margin:6px 0 0;padding:10px 10px 4px;border-top:1px solid var(--border2,#e5e5e5);border-radius:0;
  font-size:12.5px;font-weight:600;color:var(--accent-text)!important;}
.site-links .nav-dd-menu a.nav-dd-foot:hover{background:none;text-decoration:underline!important;}

@media (max-width:1000px){
  .site-nav-inner{padding-top:10px;padding-bottom:6px;}
  .site-links{order:3;flex:0 0 100%;}
  .site-links a{padding:6px 10px;font-size:13px;}
  .nav-dd-btn{padding:6px 8px 6px 10px;font-size:13px;}
  .nav-dd-menu{width:min(360px, calc(100vw - 32px));}
}

/* Ikon garis (pengganti emoji) */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex-shrink:0;}

/* ── Harga & promo (assets/price.js) ─────────────────────────────────────── */
.price-was{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.55;font-weight:500;font-size:.78em;margin-right:4px;white-space:nowrap;}
.price-now{white-space:nowrap;}
.price-save{display:inline-flex;align-items:center;margin-left:6px;padding:2px 8px;border-radius:100px;vertical-align:middle;
  background:var(--accent)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
  font:700 11px/1.4 'Inter',system-ui,sans-serif!important;letter-spacing:.02em;white-space:nowrap;text-transform:none;}
.promo-note{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;
  background:var(--accent-light);color:var(--accent-text);font:600 13px/1.4 'Inter',system-ui,sans-serif;}
.promo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.price-save[hidden], .promo-note[hidden]{display:none!important;}

/* ── Penghitung pemakaian & voucher ──────────────────────────────────────── */
.usage-note{display:inline-flex;align-items:center;gap:6px;font:500 14px/1.4 'Inter',system-ui,sans-serif;color:var(--text2);}
.usage-note b{color:var(--t-heading,var(--text));font-weight:800;}
.usage-line{font:500 12px/1.4 'Inter',system-ui,sans-serif;color:var(--text3,var(--muted));margin:8px 0 0;}
.usage-note[hidden], .usage-line[hidden], [data-voucher-note][hidden]{display:none!important;}
.voucher{margin:10px 0 12px;font-family:'Inter',system-ui,sans-serif;text-align:left;}
.voucher-toggle{background:none!important;border:0!important;padding:0!important;font:600 13px/1.4 'Inter',system-ui,sans-serif!important;
  color:var(--accent-text)!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.voucher-row{display:flex;gap:8px;}
.voucher-row[hidden]{display:none;}
.voucher-input{flex:1;min-width:0;height:38px;padding:0 12px;border:1.5px solid var(--border)!important;border-radius:10px!important;
  background:var(--surface)!important;color:var(--text)!important;font:600 14px/1 'Inter',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;outline:none;}
.voucher-input:focus{border-color:var(--accent)!important;}
.voucher-apply{height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--accent)!important;background:var(--surface)!important;
  color:var(--accent-text)!important;font:700 13px/1 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap;}
.voucher-apply:disabled{opacity:.6;cursor:wait;}
.voucher-msg{font-size:12.5px;line-height:1.5;margin-top:6px;color:var(--text2);}
.voucher-msg:empty{display:none;}
.voucher-msg.ok{color:var(--success,#2E7D4F);}
.voucher-msg.err{color:var(--danger,#B23A2A);}
.voucher-note{display:inline-block;margin-top:10px;padding:6px 14px;border-radius:100px;border:1px dashed var(--accent);
  font:500 13px/1.4 'Inter',system-ui,sans-serif;color:var(--accent-text);}

/* ── Tata letak halaman layanan (sama di kelima layanan, mengikuti AcademiSlide) ──
   Kiri: langkah-langkah (unggah, pengaturan). Kanan: kartu Biaya Layanan + akses,
   tombol mulai, dan "Yang dihasilkan". Di layar sempit, kolom kanan turun ke bawah. */
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;}
.svc-main{min-width:0;}
.svc-side{display:flex;flex-direction:column;gap:16px;min-width:0;font-family:'Inter',system-ui,sans-serif;}
@media (max-width:860px){.svc-grid{grid-template-columns:minmax(0,1fr);}}
html[data-theme] .svc-card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);}
.svc-price{padding:20px;border-bottom:1px solid var(--border);}
html[data-theme] .svc-price-label{font:700 11px/1.3 'Inter',system-ui,sans-serif!important;letter-spacing:.06em;text-transform:uppercase;color:var(--t-hl)!important;margin-bottom:8px;}
html[data-theme] .svc-price-amount{font-family:'Instrument Serif',Georgia,serif!important;font-size:38px!important;font-weight:400!important;line-height:1.05;
  color:var(--t-hl)!important;-webkit-text-fill-color:currentColor!important;background:none!important;letter-spacing:0!important;}
html[data-theme] .svc-price-amount *{color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important;font:inherit!important;}
html[data-theme] .svc-price-amount .price-was{font-size:.82em!important;opacity:.55;margin-right:8px;}
.svc-price .price-save{margin:8px 0 0;}
html[data-theme] .svc-price-unit{font-size:12.5px;color:var(--t-hl)!important;opacity:.85;margin-top:8px;}
.svc-tabs{display:flex;gap:4px;margin:14px 16px 0;padding:4px;border-radius:12px;background:var(--surface2);}
html[data-theme] .svc-tab{flex:1;padding:9px 8px;border:0!important;border-radius:9px;background:transparent!important;color:var(--text2)!important;
  font:700 13px/1.2 'Inter',system-ui,sans-serif!important;cursor:pointer;box-shadow:none!important;}
html[data-theme] .svc-tab.active{background:var(--accent-light)!important;color:var(--accent-text)!important;}
.svc-body{padding:16px;}
html[data-theme] .svc-label{display:block;margin:0 0 6px;font:700 11px/1.3 'Inter',system-ui,sans-serif!important;letter-spacing:.05em;text-transform:uppercase;color:var(--text2)!important;}
html[data-theme] .svc-input{display:block;width:100%;height:44px;padding:0 14px;border:1px solid var(--border)!important;border-radius:10px!important;
  font:500 15px/1 'Inter',system-ui,sans-serif!important;letter-spacing:0!important;outline:none;box-shadow:none!important;margin:0!important;}
html[data-theme] .svc-input:focus{border-color:var(--accent)!important;}
.svc-note{font-size:12px;color:var(--text3);margin-top:6px;line-height:1.5;}
.svc-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0;}
html[data-theme] .svc-method{padding:7px 4px;border:1px solid var(--border)!important;border-radius:8px;background:var(--surface)!important;
  text-align:center;font:700 11.5px/1.2 'Inter',system-ui,sans-serif!important;color:var(--text2)!important;}
html[data-theme] .svc-pay, html[data-theme] .svc-go{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:0!important;cursor:pointer;
  background:var(--accent)!important;background-image:none!important;color:#fff!important;font-family:'Inter',system-ui,sans-serif!important;box-shadow:none!important;}
html[data-theme] .svc-pay{height:46px;border-radius:10px!important;font-size:14.5px!important;font-weight:700!important;margin:0!important;}
html[data-theme] .svc-go{min-height:58px;padding:14px;border-radius:14px!important;font-size:16px!important;font-weight:700!important;}
html[data-theme] .svc-pay:hover:not(:disabled), html[data-theme] .svc-go:hover:not(:disabled){background:var(--accent-dark)!important;}
.svc-pay:disabled{opacity:.6;cursor:wait;}
.svc-go:disabled{opacity:.4;cursor:not-allowed;}
html[data-theme] .svc-ghost{width:100%;margin-top:8px;padding:10px;border:1px solid var(--border)!important;border-radius:10px;background:var(--surface)!important;
  color:var(--text2)!important;font:600 13px/1.2 'Inter',system-ui,sans-serif!important;cursor:pointer;}
html[data-theme] .svc-kode{margin:12px 0 0;padding:10px 12px;border:1px solid var(--border)!important;border-radius:10px;background:var(--accent-light)!important;
  color:var(--text)!important;font-size:13px;line-height:1.6;}
.svc-status{font-size:12.5px;line-height:1.5;min-height:16px;margin-top:6px;color:var(--text2);}
html[data-theme] .svc-status.err{color:var(--danger)!important;}
.svc-pin-row{display:flex;gap:8px;margin-top:2px;}
.svc-pin-row .svc-input{flex:1;letter-spacing:.2em!important;}
html[data-theme] .svc-verify{flex-shrink:0;height:44px;padding:0 16px;border:1px solid var(--accent)!important;border-radius:10px;background:var(--surface)!important;
  color:var(--accent-text)!important;font:700 13px/1 'Inter',system-ui,sans-serif!important;cursor:pointer;}
.svc-info{padding:18px 20px;}
.svc-info-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;}
.svc-info ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.svc-info li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--text2);}
.svc-info li .ico{color:var(--accent);margin-top:2px;}
.svc-side .voucher{margin:0 0 12px;}
.svc-side .usage-line{margin:0 0 8px;}

/* ── Pemberitahuan akun konsumen (assets/account.js) ─────────────────────── */
html[data-theme] .site-btn.cta{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent,#fff)!important;}
html[data-theme] .site-btn.cta:hover{background:var(--accent-dark)!important;}
.site-btn .ico{width:15px;height:15px;}
.acct-hero{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin-top:10px;
  font:500 14px/1.5 'Inter',system-ui,sans-serif;color:var(--text2);}
.acct-hero .ico{width:16px;height:16px;color:var(--accent-text);}
html[data-theme] .acct-hero a{color:var(--accent-text)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.acct-hero[hidden]{display:none!important;}
.acct-hint{display:flex;gap:10px;align-items:flex-start;margin:14px 16px 0;padding:10px 12px;border-radius:10px;
  background:var(--accent-light);font:500 12.5px/1.55 'Inter',system-ui,sans-serif;color:var(--text2);}
.acct-hint .ico{width:16px;height:16px;margin-top:1px;color:var(--accent-text);}
html[data-theme] .acct-hint a{color:var(--accent-text)!important;font-weight:700;text-decoration:underline;text-underline-offset:2px;}
/* Pembayaran yang belum tuntas: angka di tombol Akun + pengingat di halaman layanan (account.js) */
.acct-dot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:2px;padding:0 5px;border-radius:99px;
  background:var(--danger,#B23A2A);color:#fff;font:700 11px/1 'Inter',system-ui,sans-serif;}
.acct-pend{margin:14px 16px 0;padding:12px 14px;border-radius:12px;border:1.5px solid var(--accent);background:var(--accent-light);
  font:500 13px/1.55 'Inter',system-ui,sans-serif;color:var(--text);}
.acct-pend-t{font-weight:700;margin-bottom:2px;color:var(--accent-text);}
.acct-pend-btn{display:block;width:100%;margin-top:10px;padding:10px 12px;border:0;border-radius:10px;background:var(--accent);color:#fff;
  font:700 13.5px/1.2 'Inter',system-ui,sans-serif;cursor:pointer;}
.acct-pend-btn:hover{background:var(--accent-dark);}
/* Kotak "lanjutkan pekerjaan" (pay.js kit) */
.resume-note{border:1.5px solid var(--accent);background:var(--accent-light);border-radius:16px;padding:16px 18px;margin-bottom:16px;
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-family:'Inter',system-ui,sans-serif;}
.resume-note[hidden]{display:none!important;}
.resume-note .rn-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;}
.resume-note .rn-text{font-size:13px;color:var(--text2);line-height:1.55;}
.resume-note .rn-list{list-style:none;margin:6px 0 0;padding:0;font-size:13px;line-height:1.7;color:var(--text);}
.resume-note .rn-list li.ok{color:var(--success);}
.resume-note .rn-list li.todo{font-weight:600;}
.resume-note .rn-btn{flex:0 0 auto;padding:11px 18px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:700 14px/1.2 'Inter',system-ui,sans-serif;cursor:pointer;}
.resume-note .rn-btn:hover{background:var(--accent-dark);}
@media(max-width:640px){.resume-note .rn-btn{width:100%;}}
/* Sudah lunas (pay.js paidView): isian bayar disembunyikan, tinggal status pembayaran */
.svc-body.paid > .svc-label, .svc-body.paid > .svc-input, .svc-body.paid > .svc-note, .svc-body.paid > .svc-methods,
.svc-body.paid > .usage-line, .svc-body.paid > [data-voucher], .svc-body.paid .svc-ghost, .svc-body.paid > .svc-pay{display:none!important;}
html[data-theme] .svc-body.paid .svc-kode{margin-top:0!important;background:var(--success-light)!important;border-color:var(--success)!important;
  color:var(--success)!important;font-weight:600;}