/* ==========================================================================
   DIGIBRANDTAL — Modern-Futuristic Enterprise Neo-Tech
   Token warna: PRD 13.2 + design.md (langit biru, lime, ink, abu struktural)
   ========================================================================== */
:root {
  --sky-700:#0B63C9; --sky-600:#1479E0; --sky-500:#2E93F0; --sky-300:#8CC6F7; --sky-100:#D9ECFC; --sky-pale:#BCD8F4; --cyan-500:#35B5EA;
  --lime-400:#D4F75B; --lime-500:#C3E83F; --lime-200:#EAFAA8; --lime-700:#526600;
  --ink-900:#0E0E10; --ink-700:#2A2A2E; --gray-600:#6B6B72; --gray-400:#9A9AA1; --gray-200:#E3E3E6; --gray-100:#F2F2F3; --white:#FFFFFF;
  --star-400:#F6D83A; --green-500:#22A559; --red-500:#E5484D; --amber-500:#F5A524;
  /* semantik */
  --bg-page:#FCF8FB; --bg-card:#FFFFFF; --bg-surface:#F2F2F3; --bg-surface-2:#EAE7EA; --bg-inset:#F6F3F5;
  --bg-hero:linear-gradient(160deg,var(--sky-700) 0%,var(--sky-600) 30%,var(--sky-500) 62%,var(--sky-300) 100%);
  --text:#0E0E10; --text-2:#6B6B72; --text-3:#9A9AA1; --text-on-brand:#fff; --text-on-brand-soft:var(--sky-pale);
  --border:#E3E3E6; --border-2:#C1C6D5; --focus:var(--cyan-500);
  --action:var(--lime-400); --action-hover:var(--lime-500); --ink-btn:var(--ink-900);
  --ok:var(--green-500); --danger:var(--red-500); --warn:var(--amber-500); --rating:var(--star-400);
  --info-bg:#E8F2FD; --warn-bg:#FFF7E6; --err-bg:#FDECEC; --ok-bg:#E8F7EE; --lime-bg:#F4FCD4;
  --radius-panel:28px; --radius-card:24px; --radius-md:16px; --radius-sm:12px; --radius-pill:999px;
  --font-sans:"Geist","Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","Geist Mono",ui-monospace,Menlo,monospace;
  --nav-h:68px; --maks:1320px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg-page:#0E0E10; --bg-card:#18181B; --bg-surface:#202024; --bg-surface-2:#2A2A2E; --bg-inset:#141416;
  --text:#F3F0F2; --text-2:#B4B4BC; --text-3:#85858D; --border:#2E2E33; --border-2:#3A3A40;
  --info-bg:#0F2236; --warn-bg:#2B2210; --err-bg:#2D1415; --ok-bg:#0F2618; --lime-bg:#1F2408; color-scheme:dark;
} }
:root[data-theme="dark"] {
  --bg-page:#0E0E10; --bg-card:#18181B; --bg-surface:#202024; --bg-surface-2:#2A2A2E; --bg-inset:#141416;
  --text:#F3F0F2; --text-2:#B4B4BC; --text-3:#85858D; --border:#2E2E33; --border-2:#3A3A40;
  --info-bg:#0F2236; --warn-bg:#2B2210; --err-bg:#2D1415; --ok-bg:#0F2618; --lime-bg:#1F2408; color-scheme:dark;
}

/* ---------- dasar ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg-page); color:var(--text); font:400 15px/1.55 var(--font-sans); letter-spacing:-.005em; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
h1,h2,h3,h4,h5 { margin:0 0 .35em; line-height:1.18; letter-spacing:-.02em; font-weight:600; }
h1 { font-size:clamp(30px,4.6vw,48px); font-weight:700; letter-spacing:-.03em; } h2 { font-size:clamp(24px,3vw,34px); } h3 { font-size:20px; } h4 { font-size:16px; } h5 { font-size:13px; }
.h2 { font-size:clamp(22px,2.6vw,30px); }
p { margin:0 0 .6em; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
input,select,textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
[hidden] { display:none !important; }
.mono { font-family:var(--font-mono); letter-spacing:.04em; }
.muted { color:var(--text-2); } .kecil { font-size:13px; } .tengah { text-align:center; } .kanan { margin-left:auto; } .pre { white-space:pre-line; }
.hijau { color:var(--ok); } .merah { color:var(--danger); } .biru { color:var(--sky-600); }
.mt { margin-top:24px; } .mt-s { margin-top:12px; } .inline { display:inline; }
.antara { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.wrap { width:100%; max-width:var(--maks); margin:0 auto; padding:0 24px; }
.wrap.sempit { max-width:560px; padding-top:40px; } .wrap.sedang { max-width:880px; }
@media (max-width:640px) { .wrap { padding:0 16px; } .hide-sm { display:none !important; } }

/* ---------- ikon ---------- */
.ic { width:18px; height:18px; flex:none; vertical-align:-3px; }
.ic-lg { width:28px; height:28px; } .ic-xl { width:44px; height:44px; }

/* ---------- tombol ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 20px; border-radius:var(--radius-pill); border:1px solid transparent; font:500 12.5px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; transition:background .15s,border-color .15s,transform .1s,color .15s; }
.btn:active { transform:scale(.98); }
.btn-lime { background:var(--action); color:var(--ink-900); } .btn-lime:hover { background:var(--action-hover); }
.btn-ink { background:var(--ink-900); color:#fff; } .btn-ink:hover { background:var(--ink-700); }
:root[data-theme="dark"] .btn-ink { background:#F3F0F2; color:#0E0E10; }
.btn-ghost { background:var(--bg-card); border-color:var(--border); color:var(--text); } .btn-ghost:hover { background:var(--bg-surface); border-color:var(--gray-400); }
.btn-ghost-hero { background:rgba(11,99,201,.55); color:#fff; } .btn-ghost-hero:hover { background:rgba(11,99,201,.75); }
.btn-putih { background:#fff; color:var(--ink-900); }
.btn-danger { background:var(--red-500); color:#fff; } .btn-danger-ghost { background:var(--err-bg); color:var(--red-500); }
.btn-mati,.btn:disabled { background:var(--bg-surface-2); color:var(--text-3); cursor:not-allowed; }
.btn-sm { min-height:36px; padding:0 16px; font-size:11.5px; } .btn-xs { min-height:30px; padding:0 12px; font-size:10.5px; gap:6px; }
.btn-besar { min-height:52px; } .btn-blok { width:100%; }
.btn-panah { padding-right:6px; } .btn-panah .panah { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ink-900); color:#fff; }
.btn-split { justify-content:space-between; } .btn-split small { font-size:10px; opacity:.75; }
.is-busy { opacity:.85; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:putar .7s linear infinite; }
.spin.besar { width:34px; height:34px; border-width:3px; color:var(--sky-600); }
@keyframes putar { to { transform:rotate(360deg); } }
.ibtn { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid transparent; background:transparent; color:var(--text); }
.ibtn:hover { background:var(--bg-surface); } .ibtn-abu { background:var(--bg-surface); border-color:var(--border); } .ibtn.merah { color:var(--red-500); }
.lnk { background:none; border:0; padding:0; color:var(--sky-600); font-weight:500; } .lnk:hover { text-decoration:underline; }
.baris-btn { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .baris-btn.antara { justify-content:space-between; } .baris-btn.tengah { justify-content:center; } .baris-btn.kolom { flex-direction:column; align-items:stretch; }
.baris-kecil { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ---------- lencana & status ---------- */
.bdg { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:var(--radius-pill); font:600 10.5px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; }
.bdg .ic { width:13px; height:13px; }
.bdg-putih { background:#fff; color:var(--ink-900); border-color:var(--gray-200); } .bdg-lime { background:var(--lime-400); color:var(--ink-900); }
.bdg-biru { background:var(--sky-100); color:var(--sky-700); border-color:var(--sky-300); } .bdg-biru-tua { background:var(--sky-700); color:#fff; }
.bdg-hijau-tua { background:var(--lime-700); color:#fff; } .bdg-merah { background:var(--err-bg); color:var(--red-500); } .bdg-abu { background:var(--bg-surface); color:var(--text-2); border-color:var(--border); }
.bdg-ink { background:var(--ink-900); color:var(--lime-400); } .bdg-live { background:var(--red-500); color:#fff; animation:kedip 1.6s infinite; }
@keyframes kedip { 50% { opacity:.6; } }
.kat { background:#fff; color:var(--ink-900); border-color:var(--gray-200); }
.kat-kelas { color:var(--sky-700); } .kat-aplikasi { color:var(--lime-700); } .kat-dokumen { color:#7A4E00; } .kat-ailink { color:#7B3FE4; }
.st { background:var(--bg-surface); color:var(--text-2); }
.st .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-hijau { background:var(--ok-bg); color:#13804A; border-color:#BDE8CC; } .st-abu { background:var(--bg-surface); color:var(--text-2); border-color:var(--border); }
.st-kuning { background:#FFF4D6; color:#9A6100; border-color:#FBDDA0; } .st-biru { background:var(--sky-100); color:var(--sky-700); border-color:var(--sky-300); }
.st-merah { background:var(--err-bg); color:#C2272D; border-color:#F7C3C5; }
:root[data-theme="dark"] .st-kuning { background:#2B2210; color:#F5C46A; } :root[data-theme="dark"] .bdg-biru,:root[data-theme="dark"] .st-biru { background:#0F2236; color:#8CC6F7; border-color:#1C3E63; }
.dot-lime,.dot-hijau,.dot-biru,.dot-merah { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:1px; }
.dot-lime { background:var(--lime-400); } .dot-hijau { background:var(--green-500); } .dot-biru { background:var(--sky-600); } .dot-merah { background:var(--red-500); }
.nbadge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--sky-600); color:#fff; font:600 10px/1 var(--font-mono); font-style:normal; }

/* ---------- avatar, meter, bintang ---------- */
.ava { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--av,#1479E0); color:#fff; font:600 13px/1 var(--font-mono); flex:none; }
.ava img { width:100%; height:100%; object-fit:cover; } .ava-sm { width:32px; height:32px; font-size:11px; } .ava-lg { width:64px; height:64px; font-size:20px; }
.img-ph { display:grid; place-items:center; width:100%; height:100%; background:var(--sky-100); color:var(--sky-700); font:700 28px var(--font-sans); }
.meter { height:8px; border-radius:8px; background:var(--bg-surface-2); overflow:hidden; } .meter i { display:block; height:100%; border-radius:8px; }
.m-hijau i { background:var(--green-500); } .m-kuning i { background:var(--amber-500); } .m-merah i { background:var(--red-500); } .m-lime i { background:var(--lime-400); }
.bintang-wrap { display:inline-flex; gap:2px; } .bintang { color:var(--gray-200); font-size:14px; } .bintang.on { color:var(--rating); }

/* ---------- navbar ---------- */
.nav { position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg-card) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.nav-in { max-width:var(--maks); margin:0 auto; height:var(--nav-h); padding:0 24px; display:flex; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:-.02em; font-size:18px; white-space:nowrap; }
.brand-logo { width:30px; height:30px; border-radius:8px; object-fit:cover; } .brand-dot { width:7px; height:7px; border-radius:50%; background:var(--sky-600); display:inline-block; }
.nav-mid { flex:1; display:flex; justify-content:center; align-items:center; gap:12px; font-size:11px; text-transform:uppercase; color:var(--text-2); }
.nav-mid a:hover,.nav-mem a:hover { color:var(--text); } .nav-mid .sep { color:var(--text-3); }
.nav-act { display:flex; align-items:center; gap:8px; margin-left:auto; }
.ava-btn { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--sky-600); color:#fff; border:0; font:600 14px var(--font-mono); }
.nav-mem { flex:1; display:flex; justify-content:center; gap:4px; font-size:11px; text-transform:uppercase; color:var(--text-2); overflow-x:auto; scrollbar-width:none; }
.nav-mem::-webkit-scrollbar { display:none; }
.nav-mem a { padding:8px 12px; border-radius:var(--radius-pill); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.nav-mem a.on { background:var(--lime-400); color:var(--ink-900); }
@media (max-width:1020px) {
  .nav-mid { display:none; }
  .nav-member .nav-in { flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:0; row-gap:6px; }
  .nav-mem { order:3; flex-basis:100%; justify-content:flex-start; padding-bottom:8px; }
}
@media (max-width:640px) { .nav-in { padding:0 16px; gap:10px; } .brand { font-size:16px; } }

/* ---------- footer ---------- */
.foot { background:#0E0E10; color:#fff; margin-top:56px; }
.foot-in { max-width:var(--maks); margin:0 auto; padding:48px 24px 28px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.foot-brand b { font-size:18px; } .foot-brand p { color:var(--gray-400); font-size:13px; margin-top:10px; max-width:300px; }
.foot h5 { font:600 11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--gray-400); margin-bottom:12px; }
.foot-in a,.foot-in .lnk { display:block; color:#E3E3E6; font-size:13.5px; margin-bottom:8px; text-align:left; } .foot-in a:hover,.foot-in .lnk:hover { color:var(--lime-400); text-decoration:none; }
.foot-bawah { max-width:var(--maks); margin:0 auto; padding:16px 24px 28px; display:flex; justify-content:space-between; gap:12px; color:var(--gray-400); font-size:11px; border-top:1px solid #2A2A2E; flex-wrap:wrap; }
.foot-mini { max-width:var(--maks); margin:48px auto 0; padding:18px 24px; border-top:1px solid var(--border); font-size:11px; color:var(--text-2); }
@media (max-width:820px) { .foot-in { grid-template-columns:1fr 1fr; } .foot-brand { grid-column:1/-1; } }

/* ---------- loader & galat ---------- */
.loader { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--bg-page); transition:opacity .3s; }
.loader.hilang { opacity:0; pointer-events:none; } .loader-in { text-align:center; } .loader-in p { margin-top:14px; font-size:12px; color:var(--text-2); }
.layar-galat { text-align:center; padding:64px 16px; max-width:460px; margin:auto; } .layar-galat .ic-xl { color:var(--text-3); margin:0 auto 12px; display:block; }

/* ---------- section umum ---------- */
.sek { padding-top:64px; } .sek-kecil { padding-top:28px; }
.sek-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.label-sek { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:var(--radius-pill); background:var(--sky-100); color:var(--sky-700); font-size:10.5px; font-weight:600; text-transform:uppercase; margin-bottom:12px; }
.label-sek::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--sky-600); }
:root[data-theme="dark"] .label-sek { background:#0F2236; color:#8CC6F7; }
.judul-sek { font-size:clamp(24px,2.8vw,32px); font-weight:600; }
.judul-besar { font-size:clamp(26px,3.8vw,44px); font-weight:500; max-width:900px; margin:0 auto 12px; letter-spacing:-.025em; }
.judul-halaman { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:28px 0 20px; }
.judul-halaman h1 { margin-bottom:4px; }
.sub-judul { display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:16px; } .sub-judul::before { content:""; width:4px; height:20px; border-radius:2px; background:var(--sky-600); }
.grid { display:grid; gap:20px; } .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)); }
@media (max-width:1100px) { .g4 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .g3,.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .g2,.g3,.g4 { grid-template-columns:1fr; } }
.panel-putih,.panel-abu,.panel-gelap,.panel-biru-muda { border-radius:var(--radius-card); padding:24px; margin-bottom:16px; }
.panel-putih { background:var(--bg-card); border:1px solid var(--border); } .panel-abu { background:var(--bg-surface); border:1px solid var(--border); }
.panel-gelap { background:var(--ink-900); color:#fff; } .panel-gelap .muted { color:var(--gray-400); } .panel-biru-muda { background:var(--sky-100); color:var(--ink-900); }
.panel-putih h4,.panel-abu h4,.panel-gelap h4 { display:flex; align-items:center; gap:8px; }
@media (max-width:600px) { .panel-putih,.panel-abu,.panel-gelap { padding:18px; } }
.info-box,.warn-box,.err-box,.sukses-box { display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-radius:var(--radius-md); font-size:14px; margin:12px 0; }
.info-box { background:var(--info-bg); color:var(--text); } .info-box .ic { color:var(--sky-600); } .info-box.abu { background:var(--bg-surface); }
.warn-box { background:var(--warn-bg); border:1px solid #F7D9A4; } .warn-box .ic { color:var(--amber-500); }
.err-box { background:var(--err-bg); color:#B4232A; } .sukses-box { background:var(--ok-bg); border:1px solid #BDE8CC; } .sukses-box .ic { color:var(--ok); }
.empty { text-align:center; padding:48px 16px; color:var(--text-2); } .empty .ic-xl { color:var(--sky-600); background:var(--sky-100); border-radius:50%; padding:14px; width:72px; height:72px; margin:0 auto 14px; display:block; }
.empty h4 { color:var(--text); font-size:20px; } .empty p { max-width:440px; margin:0 auto 16px; }
.skel { background:linear-gradient(90deg,var(--bg-surface) 25%,var(--bg-surface-2) 50%,var(--bg-surface) 75%); background-size:300% 100%; animation:kilau 1.4s infinite; border-radius:var(--radius-card); }
.skel-card { height:340px; } .skel-hero { height:360px; margin:24px 0; border-radius:var(--radius-panel); }
@keyframes kilau { to { background-position:-150% 0; } }

/* ---------- form ---------- */
.form { display:flex; flex-direction:column; gap:14px; }
.g2f { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:600px) { .g2f { grid-template-columns:1fr; } }
.fld { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fld > span { font:600 11px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); }
.fld small { color:var(--text-2); font-size:12px; } .req { color:var(--red-500); font-style:normal; }
.fld input,.fld select,.fld textarea,.form input:not([type=checkbox]):not([type=radio]),.inp { width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-inset); outline:none; transition:border-color .15s,background .15s; }
.fld textarea { min-height:96px; resize:vertical; }
.fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus { border-color:var(--sky-600); background:var(--bg-card); }
.fld input[readonly] { color:var(--text-2); }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.inp-btn { display:flex; gap:8px; } .inp-btn input { flex:1; }
.inp-ikon { position:relative; } .inp-ikon .ic { position:absolute; left:14px; top:13px; color:var(--text-2); } .inp-ikon input { padding-left:42px !important; }
.inp-rp { display:flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-inset); padding-left:14px; } .inp-rp span { color:var(--text-2); font-family:var(--font-mono); font-size:13px; } .inp-rp input { border:0 !important; background:transparent !important; }
.cek-label { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-md); background:var(--lime-bg); border:1px solid var(--lime-200); cursor:pointer; font-size:14px; }
.cek-label input,input[type=checkbox],input[type=radio] { width:18px; height:18px; accent-color:var(--sky-600); flex:none; margin-top:2px; }
.radio-grid,.harga-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } @media (max-width:760px) { .radio-grid,.harga-grid { grid-template-columns:1fr; } }
.radio-kartu,.harga-kartu { position:relative; display:flex; gap:10px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-card); cursor:pointer; }
.radio-kartu span { display:flex; flex-direction:column; } .radio-kartu small { color:var(--text-2); font-size:12px; }
.radio-kartu.on,.harga-kartu.on { border-color:var(--sky-600); background:var(--info-bg); box-shadow:0 0 0 1px var(--sky-600) inset; }
.harga-kartu { flex-direction:column; gap:6px; padding:18px; } .harga-kartu input { position:absolute; opacity:0; }
.harga-kartu .cek-bulat { position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; color:transparent; }
.harga-kartu.on .cek-bulat { background:var(--lime-400); border-color:var(--lime-500); color:var(--ink-900); } .harga-kartu .harga { font:600 20px var(--font-sans); }

/* ---------- chip, seg, stepper ---------- */
.chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 16px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--bg-card); font:500 11.5px var(--font-mono); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.chip.on { background:var(--ink-900); color:#fff; border-color:var(--ink-900); } .chip i { font-style:normal; opacity:.7; }
:root[data-theme="dark"] .chip.on { background:#F3F0F2; color:#0E0E10; }
.chip-x { padding:0 4px 0 12px; text-transform:none; } .chip-x button { background:none; border:0; padding:4px; display:inline-flex; } .chip-x .ic { width:14px; height:14px; }
.chip-hero { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); } .chip-lime { background:var(--lime-400); color:var(--ink-900); border-color:var(--lime-400); }
.seg { display:flex; padding:4px; background:var(--bg-surface); border-radius:var(--radius-pill); gap:4px; margin:20px 0; }
.seg button { flex:1; min-height:42px; border:0; border-radius:var(--radius-pill); background:transparent; font:500 12px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); }
.seg button.on { background:var(--lime-400); color:var(--ink-900); }
.stepper { list-style:none; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap; }
.stepper li { flex:1; min-width:150px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-md); }
.stepper .st-no { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--bg-surface-2); color:var(--text-2); font:600 13px var(--font-mono); flex:none; }
.stepper .st-tx { display:flex; flex-direction:column; } .stepper small { font:500 10px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); } .stepper b { font-size:14px; }
.stepper li.done .st-no { background:var(--green-500); color:#fff; } .stepper li.now { background:var(--lime-bg); border:1px solid var(--lime-400); } .stepper li.now .st-no { background:var(--lime-400); color:var(--ink-900); }
.stepper.kecil li { min-width:120px; padding:8px 10px; } .stepper.kecil .st-no { width:28px; height:28px; }
.stepper-wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .stepper-wrap .stepper { flex:1; } .stepper-wrap > p { flex-basis:220px; }

/* ---------- modal & toast ---------- */
.modal-ov { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(14,14,16,.6); animation:muncul .18s; }
.modal-ov.keluar { opacity:0; transition:opacity .18s; }
@keyframes muncul { from { opacity:0; } }
.modal { width:100%; max-height:calc(100dvh - 32px); display:flex; flex-direction:column; background:var(--bg-card); border-radius:var(--radius-panel); border:1px solid var(--border); animation:naik .2s; }
@keyframes naik { from { transform:translateY(12px); opacity:.6; } }
.modal-sm { max-width:460px; } .modal-md { max-width:640px; } .modal-lg { max-width:880px; } .modal-xl { max-width:1120px; }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:22px 24px 8px; } .modal-head h3 { margin:0; } .modal-head p { margin:4px 0 0; font-size:13px; }
.modal-body { padding:8px 24px 20px; overflow:auto; } .modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 24px 20px; border-top:1px solid var(--border); flex-wrap:wrap; }
@media (max-width:600px) { .modal-ov { padding:0; align-items:flex-end; } .modal { max-height:94dvh; border-radius:24px 24px 0 0; } .modal-head,.modal-body,.modal-foot { padding-left:16px; padding-right:16px; } .modal-foot .btn { flex:1; } }
#toasts { position:fixed; z-index:90; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; max-width:min(380px,calc(100vw - 32px)); }
.toast { display:flex; gap:12px; padding:14px 16px; border-radius:var(--radius-md); background:var(--ink-900); color:#fff; animation:naik .2s; font-size:14px; }
.toast p { margin:2px 0 0; color:#D0D0D6; font-size:13px; } .toast.keluar { opacity:0; transform:translateY(8px); transition:.3s; }
.toast-ok .ic { color:var(--lime-400); } .toast-warn .ic { color:var(--amber-500); } .toast-err .ic { color:#FF8A8E; }
.pv-wrap { display:grid; place-items:center; background:var(--bg-surface); border-radius:var(--radius-md); min-height:280px; padding:8px; }
.pv-img { max-height:70vh; width:auto; border-radius:8px; } .pv-frame { width:100%; height:70vh; border:0; border-radius:var(--radius-sm); background:#fff; }
.pv-kosong { display:grid; place-items:center; gap:8px; padding:56px; background:var(--bg-surface); border-radius:var(--radius-md); color:var(--text-2); }
.video-box { position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:#000; } .video-box iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- dropzone & berkas ---------- */
.dz { border:1.5px dashed var(--border-2); border-radius:var(--radius-md); background:var(--bg-inset); padding:22px; text-align:center; cursor:pointer; transition:.15s; }
.dz:hover,.dz-over { border-color:var(--sky-600); background:var(--info-bg); } .dz-in { display:flex; flex-direction:column; align-items:center; gap:6px; } .dz-in .ic { color:var(--sky-600); } .dz-in small { color:var(--text-2); font-size:12px; }
.dz-kecil { margin-top:8px; } .dz-kecil.dz { padding:16px; }
.berkas-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.berkas-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); margin-top:8px; }
.berkas-item img { width:44px; height:44px; object-fit:cover; border-radius:8px; } .berkas-item > div { flex:1; min-width:0; display:flex; flex-direction:column; } .berkas-item b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .berkas-item small { color:var(--text-2); font-size:12px; }
.thumb-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:8px 0; } @media (max-width:520px) { .thumb-grid { grid-template-columns:repeat(3,1fr); } }
.thumb { position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-surface); } .thumb img,.thumb .img-ph { width:100%; height:100%; object-fit:cover; }
.thumb .bdg { position:absolute; left:6px; bottom:6px; } .thumb .ibtn { position:absolute; right:4px; top:4px; width:28px; height:28px; background:#fff; }
.thumb-load { position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.6); }

/* ---------- kartu produk ---------- */
.pcard { position:relative; display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card); padding:16px; transition:border-color .15s,transform .15s; }
.pcard:hover { border-color:var(--gray-400); }
.pcard.terkunci .pc-img img { filter:grayscale(.85) brightness(.95); opacity:.7; } .pcard.terkunci .pc-body { opacity:.85; }
.pcard.paket { border-color:var(--lime-500); }
.pc-paket { position:absolute; top:-12px; left:50%; transform:translateX(-50%); z-index:2; display:inline-flex; gap:6px; align-items:center; padding:3px 12px; border-radius:var(--radius-pill); background:var(--lime-200); border:1px solid var(--lime-500); font:600 10.5px var(--font-mono); white-space:nowrap; }
.pc-img { position:relative; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; background:var(--sky-100); }
.pc-img img,.pc-img .img-ph { width:100%; height:100%; object-fit:cover; }
.pc-badges { position:absolute; inset:10px; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.pc-badges .bdg-pojok { position:absolute; right:0; bottom:0; } .pc-badges .bdg-kanan { margin-left:auto; }
.pc-lock { position:absolute; right:10px; top:10px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(14,14,16,.7); color:#fff; }
.pc-body { flex:1; padding:14px 2px 6px; }
.pc-harga { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; } .pc-harga b { font-size:18px; } .pc-harga s { color:var(--text-3); font:12px var(--font-mono); }
.pc-harga.besar b { font-size:26px; color:var(--sky-700); }
.pc-judul { font-size:17px; margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pc-tag { color:var(--text-2); font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pc-meta { display:flex; gap:6px; align-items:center; font:12px var(--font-mono); color:var(--text-2); margin:0; } .pc-meta .ic { width:15px; height:15px; }
.pc-aksi { display:flex; gap:10px; padding-top:12px; } .pc-aksi .btn { flex:1; }

/* ---------- kartu karya & testimoni & panduan ---------- */
.kcard { display:flex; flex-direction:column; gap:10px; width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card); padding:14px; }
.kc-img { position:relative; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; background:var(--sky-100); } .kc-img img,.kc-img .img-ph { width:100%; height:100%; object-fit:cover; }
.kc-img .bdg-kiri { position:absolute; left:10px; top:10px; } .kc-video { position:absolute; right:10px; top:10px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(14,14,16,.7); color:#fff; }
.kc-body { flex:1; display:flex; flex-direction:column; gap:8px; } .kc-body h4 { margin:0; font-size:16px; } .kc-orang { display:flex; gap:10px; align-items:center; } .kc-orang div { display:flex; flex-direction:column; } .kc-orang b { font-size:14px; } .kc-orang small { color:var(--text-2); font:11px var(--font-mono); }
.kc-cerita { color:var(--text-2); font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
.tcard { background:var(--bg-surface); border-radius:var(--radius-card); padding:22px; display:flex; flex-direction:column; gap:14px; } .tcard p { color:var(--text); font-size:14.5px; flex:1; }
.gcard { display:flex; flex-direction:column; gap:12px; background:var(--bg-surface); border-radius:var(--radius-card); padding:16px; }
.gc-img { position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:var(--sky-100); display:grid; place-items:center; }
.gc-img img,.gc-img .img-ph { width:100%; height:100%; object-fit:cover; } .gc-img .bdg-kiri { position:absolute; left:10px; top:10px; }
.gc-play { position:absolute; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--sky-700); }
.gc-ext { font-size:28px; font-weight:700; color:var(--sky-700); } .gc-body { flex:1; } .gc-body h4 { margin-bottom:4px; }

/* ---------- carousel ---------- */
.car { position:relative; overflow:hidden; border-radius:var(--radius-md); background:var(--bg-surface); }
.car-track { display:flex; transition:transform .35s ease; } .car-slide { flex:0 0 100%; margin:0; cursor:zoom-in; } .car-slide img,.car-slide .img-ph { width:100%; aspect-ratio:16/9; object-fit:cover; }
.car-slide figcaption { padding:10px 14px; font-size:13px; color:var(--text-2); background:var(--bg-card); }
.car-nav { position:absolute; top:calc(50% - 40px); width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--ink-900); display:grid; place-items:center; } .car-nav.prev { left:10px; } .car-nav.next { right:10px; }
.car-dots { position:absolute; left:0; right:0; bottom:48px; display:flex; justify-content:center; gap:6px; } .car-dots button { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.6); } .car-dots button.on { width:22px; border-radius:4px; background:var(--lime-400); }

/* ---------- HERO ---------- */
.hero { margin:16px; border-radius:var(--radius-panel); background:var(--bg-hero); color:#fff; overflow:hidden; position:relative; }
.hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 120%,rgba(255,255,255,.55),transparent 55%),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/48px 48px; pointer-events:none; }
.hero-in { position:relative; max-width:1120px; margin:0 auto; padding:56px 24px 40px; text-align:center; }
.pill-hero { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--radius-pill); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); font-size:10.5px; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.hero-judul { font-size:clamp(36px,6vw,64px); line-height:1.04; font-weight:700; letter-spacing:-.035em; margin-bottom:16px; } .hero-judul span { display:block; color:var(--sky-pale); }
.hero-sub { max-width:640px; margin:0 auto 26px; color:rgba(255,255,255,.88); font-size:16px; }
.hero-btn { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero-slides { position:relative; margin-top:40px; height:340px; }
.hs-stage { position:relative; height:300px; perspective:1400px; }
.hs-card { --d:0; position:absolute; left:50%; top:0; width:300px; margin-left:-150px; background:#fff; color:var(--ink-900); border-radius:20px; padding:12px; text-align:left; transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s; transform:translateX(calc(var(--d) * 250px)) rotateY(calc(var(--d) * -14deg)) scale(calc(1 - (max(var(--d), var(--d) * -1)) * .12)) translateZ(calc(max(var(--d), var(--d) * -1) * -60px)); cursor:pointer; }
.hs-card.aktif { cursor:default; box-shadow:0 0 0 1px rgba(255,255,255,.4),0 10px 40px rgba(11,99,201,.25); }
.hs-card:nth-child(3n+2):not(.aktif) { background:var(--ink-900); color:#fff; } .hs-card:nth-child(3n):not(.aktif) { background:var(--cyan-500); color:#fff; }
.hs-img { aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:var(--sky-100); } .hs-img img,.hs-img .img-ph { width:100%; height:100%; object-fit:cover; }
.hs-txt { padding:12px 4px 4px; display:flex; flex-direction:column; gap:4px; } .hs-txt b { font-size:15px; line-height:1.3; } .hs-txt small { font:11px var(--font-mono); opacity:.7; } .hs-txt .btn { margin-top:8px; align-self:flex-start; }
.hs-card:not(.aktif) .hs-txt .btn { display:none; }
.hs-ctrl { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:4px; }
.hs-btn { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; }
.hs-dots { display:flex; gap:6px; } .hs-dots i { width:8px; height:8px; border-radius:4px; background:rgba(255,255,255,.5); cursor:pointer; transition:.2s; } .hs-dots i.on { width:26px; background:var(--lime-400); }
.rating-strip { display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:8px 16px; border-radius:var(--radius-pill); background:rgba(255,255,255,.14); font-size:11px; }
@media (max-width:640px) { .hero { margin:10px; } .hero-in { padding:40px 16px 28px; } .hs-card { width:240px; margin-left:-120px; transform:translateX(calc(var(--d) * 170px)) rotateY(calc(var(--d) * -12deg)) scale(calc(1 - (max(var(--d), var(--d) * -1)) * .14)); } .hero-slides { height:320px; } }
.logo-strip { display:flex; gap:28px; overflow-x:auto; padding:18px 24px; margin-top:20px; border-radius:var(--radius-pill); background:var(--bg-surface); font-size:10.5px; color:var(--text-2); text-transform:uppercase; white-space:nowrap; scrollbar-width:none; justify-content:space-between; }
.logo-strip span { display:inline-flex; align-items:center; gap:8px; }
.tentang .tengah { text-align:center; } .tentang .tengah p { max-width:620px; margin:0 auto; }
.ikon-sisip { display:inline-grid; place-items:center; width:1em; height:1em; border-radius:50%; vertical-align:-.1em; margin:0 .05em; } .ikon-sisip .ic { width:.55em; height:.55em; }
.ikon-sisip.biru { background:var(--cyan-500); color:#fff; } .ikon-sisip.lime { background:var(--lime-400); color:var(--ink-900); }
.bento { display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:16px; margin-top:40px; }
.b-card { border-radius:var(--radius-card); padding:20px; min-height:220px; display:flex; flex-direction:column; gap:8px; }
.b-top { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:10.5px; text-transform:uppercase; margin-bottom:auto; }
.b-biru { background:var(--sky-600); color:#fff; } .b-putih { background:#fff; color:var(--ink-900); border-radius:var(--radius-md); padding:16px; display:flex; flex-direction:column; }
.b-abu { background:var(--bg-surface); } .b-lime { background:var(--lime-400); color:var(--ink-900); } .b-gelap { background:var(--ink-900); color:#fff; }
.b-angka { font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1.1; color:inherit; } .b-putih .b-angka { color:var(--sky-700); } .b-angka-sedang { font-size:26px; font-weight:500; }
.b-card small { font-size:12px; opacity:.75; } .b-kutip { color:var(--text-2); font-size:13px; font-style:italic; }
@media (max-width:900px) { .bento { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .bento { grid-template-columns:1fr; } }
.bc-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:24px; padding:20px; border-radius:var(--radius-panel); background:var(--bg-surface); }
.bc-poster,.bc-poster-kecil { position:relative; min-height:260px; border-radius:var(--radius-card); overflow:hidden; background:linear-gradient(135deg,var(--sky-700),var(--cyan-500)); color:#fff; }
.bc-poster img,.bc-poster-kecil img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bc-poster-tx { position:absolute; inset:auto 0 0 0; padding:20px; background:linear-gradient(transparent,rgba(11,99,201,.9)); display:flex; flex-direction:column; gap:8px; align-items:flex-start; } .bc-poster-tx b { font-size:22px; }
.bc-isi { display:flex; flex-direction:column; gap:10px; } .bc-top { display:flex; justify-content:flex-end; } .bc-isi h3 { font-size:24px; }
.bc-meta { display:flex; gap:10px; flex-wrap:wrap; } .bc-meta span { display:inline-flex; gap:6px; align-items:center; padding:8px 12px; border-radius:var(--radius-sm); background:var(--bg-card); font-size:12.5px; border:1px solid var(--border); }
.bc-bawah { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:auto; } .harga-besar { font-size:26px; color:var(--sky-700); }
@media (max-width:820px) { .bc-feature { grid-template-columns:1fr; } }
.kelas-info { display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:860px) { .kelas-info { grid-template-columns:1fr; } }
.acc { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.acc-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); }
.acc-head { width:100%; display:flex; align-items:center; gap:12px; padding:14px 16px; background:none; border:0; text-align:left; }
.acc-head > span:nth-child(2),.acc-head > b { flex:1; display:flex; flex-direction:column; } .acc-head small { font-size:10px; color:var(--text-3); text-transform:uppercase; } .acc-head b { font-size:14.5px; }
.acc-no { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--bg-surface); color:var(--text-3); } .acc-item.open .acc-no { background:var(--lime-400); color:var(--ink-900); }
.acc-plus { transition:transform .2s; color:var(--text-2); } .acc-item.open .acc-plus { transform:rotate(180deg); }
.acc-plus.lime { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--lime-400); color:var(--ink-900); } .acc-item.open .acc-plus.lime { transform:rotate(45deg); }
.acc-body { display:none; padding:0 16px 16px 58px; } .acc-item.open .acc-body { display:block; }
.titik { margin:0; padding-left:18px; font-size:13.5px; color:var(--text-2); } .titik li::marker { color:var(--sky-600); }
.video-card { background:var(--ink-900); color:#fff; border-radius:var(--radius-card); padding:20px; display:flex; flex-direction:column; gap:12px; }
.vc-head { display:flex; justify-content:space-between; font-size:10.5px; text-transform:uppercase; }
.vc-frame { position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:radial-gradient(circle,#2A2A2E,#0E0E10); display:grid; place-items:center; }
.vc-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vc-play { width:64px; height:64px; border-radius:50%; border:0; background:var(--lime-400); color:var(--ink-900); display:grid; place-items:center; } .vc-play .ic { width:26px; height:26px; }
.vc-ket { display:flex; gap:8px; } .video-card .btn-ink { background:#2A2A2E; } .video-card p { color:var(--gray-400); font-size:13.5px; }
.custom-band { padding:40px; } .custom-band p { max-width:680px; }
ul.cek { list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:10px; } ul.cek li { display:flex; gap:10px; align-items:flex-start; font-size:14px; }
ul.cek .ic { flex:none; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--lime-400); color:var(--ink-900); }
.band-biru-tipis { display:flex; align-items:center; gap:14px; padding:14px 20px; border-radius:var(--radius-md); background:var(--sky-600); color:#fff; flex-wrap:wrap; } .band-biru-tipis span { flex:1; opacity:.85; font-size:14px; }
.band-biru,.cta-band { border-radius:var(--radius-panel); background:var(--bg-hero); color:#fff; padding:36px 40px; }
.band-biru { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; } .band-biru p { color:rgba(255,255,255,.85); max-width:560px; margin:0; }
.band-abu { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:28px 32px; border-radius:var(--radius-card); background:var(--bg-surface); }
.cta-band { text-align:center; padding:64px 24px; } .cta-band h2 { font-size:clamp(28px,4vw,44px); font-weight:700; } .cta-band p { max-width:620px; margin:0 auto 22px; color:rgba(255,255,255,.88); }
.mq { position:relative; } .mq-viewport { overflow:hidden; cursor:grab; touch-action:pan-y; } .mq-track { display:flex; gap:20px; width:max-content; will-change:transform; } .mq-track > * { width:290px; flex:none; }
.mq-nav { display:flex; gap:8px; }

/* ---------- dialog spesifik ---------- */
.kontak-chips { display:flex; flex-direction:column; gap:6px; } .kontak-chips:empty { display:none; }
.karya-orang { display:flex; gap:14px; align-items:center; } .karya-orang div { display:flex; flex-direction:column; } .karya-orang small { color:var(--text-2); font:12px var(--font-mono); }
.opsi-list { display:flex; flex-direction:column; gap:10px; }
.opsi { display:flex; align-items:center; gap:12px; padding:16px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-card); text-align:left; } .opsi b { flex:1; } .opsi:hover { border-color:var(--sky-600); background:var(--info-bg); }
.ck-garis { display:flex; gap:6px; margin-bottom:18px; } .ck-garis div { flex:1; } .ck-garis i { display:block; height:4px; border-radius:2px; background:var(--bg-surface-2); margin-bottom:6px; }
.ck-garis .done i { background:var(--sky-600); } .ck-garis .now i { background:var(--lime-400); } .ck-garis small { font-size:10px; color:var(--text-2); }
.total-box { margin-top:14px; padding:18px; border-radius:var(--radius-md); background:var(--lime-bg); border:1px solid var(--lime-400); } .total-box b { display:block; font-size:30px; letter-spacing:-.02em; } .total-box p { margin:6px 0 0; color:var(--text-2); }
.ch-list { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.ch-item { display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:var(--radius-md); border:1px solid var(--border); cursor:pointer; } .ch-item.on { border-color:var(--sky-600); background:var(--info-bg); box-shadow:0 0 0 1px var(--sky-600) inset; }
.ch-isi { flex:1; display:flex; flex-direction:column; gap:2px; } .ch-baris { display:flex; gap:8px; align-items:center; } .ch-isi small { color:var(--text-2); font-size:12.5px; }
.ann-img { border-radius:var(--radius-md); overflow:hidden; margin-bottom:12px; }

/* ---------- wizard bootcamp & halaman daftar ---------- */
.bc-wizard .stepper { margin-bottom:18px; background:var(--bg-surface); padding:6px; border-radius:var(--radius-card); }
.syarat-blok { padding:16px; border-radius:var(--radius-md); background:var(--bg-surface); margin-bottom:12px; }
.syarat-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px; } .syarat-head b { font-size:12px; text-transform:uppercase; }
.didapat { margin-top:20px; padding:18px; border-radius:var(--radius-md); background:var(--bg-surface); }
.sesi-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; } .sesi-mini { display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:var(--radius-sm); background:var(--bg-card); border:1px solid var(--border); } .sesi-mini small { color:var(--sky-600); font-size:10.5px; }
.bc-hasil { padding:24px 8px; } .bc-hasil .ic-xl { margin:0 auto 10px; display:block; }
.hero-kecil { position:relative; margin:20px 0 0; padding:36px 40px; border-radius:var(--radius-panel); background:var(--bg-hero); color:#fff; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-kecil h1 { margin:0 0 6px; font-size:clamp(28px,4vw,44px); } .hero-kecil h1 span { color:var(--sky-pale); } .hero-kecil p { margin:0; color:rgba(255,255,255,.88); max-width:640px; }
.hero-kecil .pill-hero { margin-bottom:12px; } .hero-kecil .chips { margin-top:16px; } .hk-kiri { flex:1; min-width:260px; } .hk-kanan { display:flex; gap:10px; }
.pill-putih { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--radius-pill); background:#fff; color:var(--ink-900); font:500 12px var(--font-mono); text-transform:uppercase; }
@media (max-width:600px) { .hero-kecil { padding:28px 20px; } }
.daftar-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start; } .daftar-ringkas { position:sticky; top:calc(var(--nav-h) + 16px); }
.kapasitas { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--err-bg); font-size:11px; color:var(--red-500); text-transform:uppercase; }
@media (max-width:900px) { .daftar-grid { grid-template-columns:1fr; } .daftar-ringkas { position:static; } }

/* ---------- login ---------- */
.login-bg { min-height:calc(100dvh - var(--nav-h)); margin:16px; border-radius:var(--radius-panel); background:var(--bg-hero); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 16px; position:relative; overflow:hidden; }
.login-bg::after { content:""; position:absolute; left:-10%; right:-10%; bottom:-60px; height:160px; background:rgba(255,255,255,.35); border-radius:50% 50% 0 0; }
.login-card { position:relative; z-index:1; width:100%; max-width:460px; background:var(--bg-card); border-radius:var(--radius-panel); padding:36px; }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; } .login-brand b { font-size:14px; }
.logo-kotak { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--lime-400); color:var(--ink-900); overflow:hidden; } .logo-kotak img { width:100%; height:100%; object-fit:cover; }
.login-card h2 { font-size:30px; } .riwayat { margin-top:18px; } .riwayat small { display:block; color:var(--text-2); font-size:10.5px; margin-bottom:8px; text-transform:uppercase; } .riwayat .chip { text-transform:none; }
.login-kembali { position:relative; z-index:1; margin-top:22px; display:inline-flex; gap:8px; align-items:center; color:#fff; font-size:11px; text-transform:uppercase; }
.gsi-wadah { display:flex; justify-content:center; min-height:60px; margin-top:16px; }
@media (max-width:520px) { .login-card { padding:24px 18px; } .login-bg { margin:8px; } }
dl.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; text-align:left; margin:16px 0 0; } dl.kv dt { color:var(--text-2); font-size:13px; } dl.kv dd { margin:0; font-weight:500; text-align:right; }

/* ---------- area member ---------- */
.banner-abu,.banner-biru,.banner-lime { display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--radius-card); margin-top:20px; flex-wrap:wrap; }
.banner-abu { background:var(--bg-surface); } .banner-abu > div,.banner-biru > div { flex:1; min-width:200px; display:flex; flex-direction:column; } .banner-abu p { margin:0; }
.banner-biru { background:var(--sky-600); color:#fff; } .banner-biru small { font-size:10.5px; opacity:.8; text-transform:uppercase; } .banner-biru b { font-size:17px; }
.banner-lime { background:var(--lime-bg); border:1px solid var(--lime-400); }
.ikon-kotak { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--bg-card); flex:none; }
.ikon-kotak.lime { background:var(--lime-400); color:var(--ink-900); } .ikon-kotak.kuning { background:#FFF1CC; color:#9A6100; } .ikon-kotak.biru { background:var(--sky-100); color:var(--sky-700); } .ikon-kotak.merah { background:var(--err-bg); color:var(--red-500); }
.banner-biru .ikon-kotak { background:rgba(255,255,255,.18); color:#fff; }
.ikon-bulat { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; flex:none; } .ikon-bulat.lime { background:var(--lime-400); color:var(--ink-900); } .ikon-bulat .ic { width:28px; height:28px; }
.kosong-besar { margin-top:24px; }
.lnk-kembali { display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:11px; text-transform:uppercase; color:var(--text-2); } .lnk-kembali:hover { color:var(--text); }
.gate-box { display:flex; align-items:center; gap:16px; padding:22px 24px; border-radius:var(--radius-card); background:var(--warn-bg); border:1px solid #F7D9A4; flex-wrap:wrap; } .gate-box > div { flex:1; min-width:240px; } .gate-box p { margin:4px 0 0; font-size:14px; }
.ruang-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
.ruang-kanan { position:sticky; top:calc(var(--nav-h) + 16px); } @media (max-width:980px) { .ruang-grid { grid-template-columns:1fr; } .ruang-kanan { position:static; } }
.player { position:relative; aspect-ratio:16/9; border-radius:var(--radius-card); overflow:hidden; background:var(--ink-900); border:6px solid var(--ink-900); margin-bottom:16px; display:grid; place-items:center; color:#fff; }
.player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .player .empty { color:var(--gray-400); } .player .empty h4 { color:#fff; }
.ep-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:16px; } .ep-head h2 { margin:8px 0 0; font-size:clamp(20px,2.4vw,28px); }
.ep-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ep-item { display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-card); text-align:left; width:100%; }
.ep-item > span:nth-child(2) { flex:1; min-width:0; display:flex; flex-direction:column; } .ep-item b { font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; } .ep-item small { color:var(--text-2); font-size:11px; }
.ep-item.on { border-color:var(--sky-600); background:var(--info-bg); box-shadow:0 0 0 1px var(--sky-600) inset; } .ep-item > .ic { color:var(--text-3); }
.ep-no { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--bg-surface); font:600 12px var(--font-mono); flex:none; } .ep-item.on .ep-no { background:var(--sky-600); color:#fff; }
.grup-card { position:relative; padding:22px; border-radius:var(--radius-card); background:var(--lime-400); color:var(--ink-900); margin-bottom:16px; } .grup-card .dot-hijau { position:absolute; right:20px; top:24px; } .grup-card h3 { margin-top:12px; }
.grup-card .btn-ink { background:var(--ink-900); color:#fff; }
.materi-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.materi-item { display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--radius-md); background:var(--bg-card); border:1px solid var(--border); flex-wrap:wrap; }
.materi-item > div:nth-child(2) { flex:1; min-width:180px; display:flex; flex-direction:column; } .materi-item small { color:var(--text-2); font-size:11px; }
.poin-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; } .poin-grid div { display:flex; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--bg-surface); font-size:13px; } .poin-grid .ic { color:var(--ok); }
@media (max-width:600px) { .poin-grid { grid-template-columns:1fr; } }
.ai-card { display:flex; align-items:center; gap:14px; padding:18px; border-radius:var(--radius-md); background:var(--bg-surface); margin-top:16px; flex-wrap:wrap; } .ai-card > div { flex:1; min-width:200px; }
.bc-saya { display:grid; grid-template-columns:320px minmax(0,1fr); gap:28px; padding:28px; }
.bc-kiri { display:flex; flex-direction:column; gap:12px; } .bc-poster-kecil { min-height:170px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:8px; padding:16px; }
.bc-poster-kecil b { position:relative; font-size:18px; text-shadow:0 1px 8px rgba(0,0,0,.25); } .bc-poster-kecil .bdg { position:relative; }
.akses-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--bg-surface); font-size:13px; }
.sesi-row { display:flex; align-items:center; gap:16px; padding:18px; border-radius:var(--radius-md); background:var(--bg-surface); border:1px solid var(--border); margin-top:12px; flex-wrap:wrap; }
.sesi-row.live { background:var(--bg-surface-2); border-color:var(--gray-400); }
.sesi-no { position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--sky-100); color:var(--sky-700); font:600 14px var(--font-mono); flex:none; }
.sesi-no.hadir { background:var(--lime-200); color:var(--lime-700); } .sesi-no.absen { background:var(--err-bg); color:var(--red-500); }
.dot-live { position:absolute; right:0; top:0; width:10px; height:10px; border-radius:50%; background:var(--red-500); border:2px solid var(--bg-card); }
.sesi-info { flex:1; min-width:220px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; } .sesi-info small.mono { color:var(--text-2); font-size:11.5px; }
.sesi-aksi { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:900px) { .bc-saya { grid-template-columns:1fr; padding:18px; } }
.bc-card { display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:var(--radius-card); background:var(--bg-surface); border:1px solid var(--border); } .bc-card .harga { font-size:18px; }
.list-kartu { display:flex; flex-direction:column; gap:10px; }
.custom-item { display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--radius-card); background:var(--bg-card); border:1px solid var(--border); flex-wrap:wrap; }
.custom-item > div { flex:1; min-width:220px; display:flex; flex-direction:column; gap:2px; } .custom-item p { margin:4px 0 0; color:var(--text-2); } .custom-item:hover { border-color:var(--gray-400); }
.wz-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start; } .wz-ringkas { position:sticky; top:calc(var(--nav-h) + 16px); }
@media (max-width:900px) { .wz-grid { grid-template-columns:1fr; } .wz-ringkas { position:static; } }
.rk-item { display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:var(--radius-sm); background:var(--bg-card); border:1px solid var(--border); margin:8px 0; } .rk-item small { font-size:10.5px; color:var(--sky-700); }
.rk-qa { position:relative; padding:12px 40px 12px 14px; border-radius:var(--radius-sm); background:var(--bg-card); border:1px solid var(--border); margin-top:8px; } .rk-qa b { font-size:13px; } .rk-qa p { margin:4px 0 0; color:var(--text-2); }
.rk-qa .ibtn { position:absolute; right:4px; top:4px; width:32px; height:32px; }
.tanya-blok { padding:18px; border-radius:var(--radius-md); background:var(--bg-surface); margin-bottom:14px; display:flex; flex-direction:column; gap:8px; }
.tanya-blok input,.tanya-blok textarea { width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); }
.timeline { list-style:none; margin:10px 0 0; padding:0 0 0 18px; border-left:2px solid var(--border); } .timeline li { position:relative; padding:0 0 16px 12px; display:flex; flex-direction:column; gap:2px; }
.timeline li::before { content:""; position:absolute; left:-26px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--bg-card); border:2px solid var(--sky-600); } .timeline li:first-child::before { background:var(--amber-500); border-color:var(--amber-500); }
.timeline b { font-size:12px; } .timeline p { margin:0; color:var(--text-2); }
.order-card { padding:20px; border-radius:var(--radius-card); background:var(--bg-card); border:1px solid var(--border); margin-bottom:14px; display:flex; flex-direction:column; gap:14px; }
.id-pill { padding:6px 12px; border-radius:var(--radius-pill); background:var(--bg-surface); font-size:11.5px; } .order-card .antara small { margin-left:auto; }
.order-isi { display:flex; gap:14px; } .order-isi h4 { font-size:17px; margin:2px 0 4px; } .order-isi p { margin:0; color:var(--text-2); } .order-isi small { font-size:10.5px; text-transform:uppercase; }
.help-hero { flex-direction:column; align-items:flex-start; } .help-hero .pill-hero { margin-bottom:12px; }
.cari-besar { display:flex; align-items:center; gap:10px; width:100%; max-width:640px; margin-top:20px; padding:6px 6px 6px 18px; border-radius:var(--radius-pill); background:#fff; color:var(--ink-900); }
.cari-besar input { flex:1; border:0; outline:0; background:transparent; min-height:40px; font-size:14px; min-width:0; } .cari-besar .ic { color:var(--gray-600); }
.kat-grid { gap:14px; } .kat-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:18px; min-height:118px; border-radius:var(--radius-card); border:1px solid var(--border); background:var(--bg-card); text-align:left; }
.kat-card b { margin-top:8px; font-size:15px; } .kat-card small { color:var(--text-2); font-size:12px; } .kat-card.on { background:var(--lime-400); border-color:var(--lime-500); color:var(--ink-900); } .kat-card.on small { color:var(--ink-700); }
.kat-pojok { position:absolute; right:14px; top:14px; font-size:10.5px; } .kat-card:not(.on) .bdg-ink.kat-pojok { display:none; }
.bar-info { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; border-radius:var(--radius-md); background:var(--bg-surface); margin-bottom:12px; font-size:14px; flex-wrap:wrap; }
.help-acc .acc-head { padding:18px 20px; } .help-acc .acc-head b { font-size:15.5px; font-weight:500; } .help-acc .acc-body { padding:0 20px 20px; } .help-acc .acc-head .bdg { flex:none; }
.solusi p { font-size:14px; color:var(--text-2); } .solusi .langkah { color:var(--text); padding-left:4px; } .gambar-solusi { border-radius:var(--radius-sm); margin-top:10px; }
.eskalasi { display:flex; gap:20px; align-items:center; padding:32px; flex-wrap:wrap; } .eskalasi > div:nth-child(2) { flex:1; min-width:260px; } .eskalasi h3 { font-size:26px; margin-top:10px; }
.daftar-ringkas h3 { margin-bottom:12px; }
@media (max-width:600px) { .ep-head .baris-btn { width:100%; } .ep-head .baris-btn .btn { flex:1; } .band-biru,.cta-band,.custom-band { padding:28px 20px; } .eskalasi { padding:20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }