/* NEORP Konsol: onboarding SaaS. Sistem desain v4 (terang default, gelap lewat tombol tema). */
:root{
  --bg:#F6F9F8; --pn:#FFFFFF; --pn2:#EEF4F2; --ink:#0B1F1A; --dim:#52665F;
  --ln:rgba(11,31,26,.09); --ln2:rgba(11,31,26,.18);
  --ac:#0A7A69; --acInk:#FFFFFF; --acSoft:#DDF3EE; --acHover:#086B5C; --acGlow:rgba(10,122,105,.5);
  --hot:#A86206; --hotSoft:#FBEFD9; --hotInk:#7A4706;
  --bad:#B42318; --badSoft:#FDECEA; --ai:#5B3FC4; --aiSoft:#EDE9FE;
  --wajibBg:#DDEFEA; --wajibInk:#075F52; --mati:#CBD8D3;
  --bar:rgba(255,255,255,.84); --grid:rgba(11,31,26,.055); --mark:rgba(38,246,214,.38);
  --orb1:rgba(38,246,214,.22); --orb2:rgba(242,184,75,.16);
  --bayang:0 1px 2px rgba(11,31,26,.04),0 18px 40px -26px rgba(11,31,26,.24);
  --bayang2:0 30px 70px -36px rgba(11,31,26,.32);
  --r:20px; --r-m:16px; --r-s:11px;
  --f-judul:"Plus Jakarta Sans",system-ui,sans-serif; --f-isi:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  /* nama lama, dipakai gaya inline di templat & skrip */
  --aksen:var(--ac); --teal:var(--ac); --hijau:var(--ac); --merah:var(--bad); --tinta:var(--ink); --redup:var(--dim);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#07110F; --pn:#0D1A17; --pn2:#13241F; --ink:#E8F3EF; --dim:#9DB5AE;
  --ln:rgba(232,243,239,.09); --ln2:rgba(232,243,239,.2);
  --ac:#38E1C6; --acInk:#04110E; --acSoft:rgba(56,225,198,.12); --acHover:#5BEBD4; --acGlow:rgba(56,225,198,.5);
  --hot:#F2B84B; --hotSoft:rgba(242,184,75,.14); --hotInk:#F2B84B;
  --bad:#FCA5A5; --badSoft:rgba(248,113,113,.14); --ai:#B9AAFF; --aiSoft:rgba(139,120,255,.16);
  --wajibBg:#123A33; --wajibInk:#8FF2E1; --mati:#23403A;
  --bar:rgba(7,17,15,.8); --grid:rgba(232,243,239,.05); --mark:rgba(56,225,198,.28);
  --orb1:rgba(56,225,198,.16); --orb2:rgba(242,184,75,.08);
  --bayang:0 1px 2px rgba(0,0,0,.3),0 20px 44px -26px rgba(0,0,0,.75);
  --bayang2:0 40px 90px -40px rgba(0,0,0,.8);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#07110F; --pn:#0D1A17; --pn2:#13241F; --ink:#E8F3EF; --dim:#9DB5AE;
    --ln:rgba(232,243,239,.09); --ln2:rgba(232,243,239,.2);
    --ac:#38E1C6; --acInk:#04110E; --acSoft:rgba(56,225,198,.12); --acHover:#5BEBD4; --acGlow:rgba(56,225,198,.5);
    --hot:#F2B84B; --hotSoft:rgba(242,184,75,.14); --hotInk:#F2B84B;
    --bad:#FCA5A5; --badSoft:rgba(248,113,113,.14); --ai:#B9AAFF; --aiSoft:rgba(139,120,255,.16);
    --wajibBg:#123A33; --wajibInk:#8FF2E1; --mati:#23403A;
    --bar:rgba(7,17,15,.8); --grid:rgba(232,243,239,.05); --mark:rgba(56,225,198,.28);
    --orb1:rgba(56,225,198,.16); --orb2:rgba(242,184,75,.08);
    --bayang:0 1px 2px rgba(0,0,0,.3),0 20px 44px -26px rgba(0,0,0,.75);
    --bayang2:0 40px 90px -40px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--f-isi);overflow-x:hidden;transition:background-color .3s,color .3s;min-width:320px}
a{color:var(--ac);text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-judul);letter-spacing:-.02em;margin:0;line-height:1.15;color:inherit;font-weight:700}
img{max-width:100%}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum"}
.redup{color:var(--dim)}
.kecil{font-size:13px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
::selection{background:var(--acSoft);color:var(--ink)}
.lompat{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ac);color:var(--acInk);padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none}
.lompat:focus{top:12px}
.jangkar{outline:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* label kecil bergaya mono: eyebrow */
.eyebrow,.hero .eyebrow{display:inline-flex;gap:8px;align-items:center;font:700 11.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac);background:var(--acSoft);padding:7px 12px;border-radius:999px;max-width:100%;overflow-wrap:anywhere}

/* ── kerangka: header */
.atas{position:sticky;top:0;z-index:30;background:var(--bar);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--ln);color:var(--ink)}
.atas .dalam{max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 20px/1 var(--f-judul);letter-spacing:-.02em;flex:none}
.logo img{width:30px;height:30px;display:block}
.logo b{color:var(--ac);font-weight:800}
.atas-kanan{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.nav-utama{display:flex;gap:2px;align-items:center}
.nav-utama a{color:var(--dim);text-decoration:none;font:500 14.5px var(--f-isi);padding:8px 12px;border-radius:9px;white-space:nowrap;transition:background .2s,color .2s}
.nav-utama a:hover{color:var(--ink);background:var(--pn2)}
.nav-utama a.tbl{color:var(--acInk);margin-left:6px}
.nav-utama a.tbl:hover{color:var(--acInk);background:var(--acHover)}
.nav-utama .email-admin{color:var(--dim);font-size:13px;padding:0 8px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tema-tbl{width:44px;height:44px;flex:none;border-radius:11px;border:1px solid var(--ln);background:var(--pn2);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.tema-tbl:hover{border-color:var(--ln2)}
.tema-tbl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.tema-tbl .ikon-matahari{display:none}
:root[data-theme="dark"] .tema-tbl .ikon-matahari{display:block}
:root[data-theme="dark"] .tema-tbl .ikon-bulan{display:none}
.lebar{max-width:1280px;margin:0 auto;padding:0 24px}

/* footer */
.kaki{border-top:1px solid var(--ln);background:var(--pn);margin-top:80px;color:var(--dim)}
.kaki .lebar{padding-top:36px}
.kaki-merek{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.kaki-merek .logo{font-size:18px}
.kaki-merek .logo img{width:26px;height:26px}
.kaki-merek p{margin:0;font-size:14px;max-width:560px}
.kaki-bawah{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:28px;padding:20px 0 26px;border-top:1px solid var(--ln)}
.produk-dari{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--dim);min-height:44px;border-radius:8px}
.produk-dari>span:first-child{font:500 11px var(--f-mono);letter-spacing:.14em}
.logo-pai{display:inline-block;height:20px;width:168px;background:var(--ink);-webkit-mask:url("/static/pengusahaai-logo.png") left center/contain no-repeat;mask:url("/static/pengusahaai-logo.png") left center/contain no-repeat;transition:background .3s}
.produk-dari:hover .logo-pai{background:var(--ac)}

/* ── tombol & form */
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1.2 var(--f-isi);border-radius:12px;padding:11px 20px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s,color .2s;min-height:44px;text-align:center}
.tbl:hover{transform:translateY(-1px)}
.tbl:active{transform:translateY(1px)}
.tbl-utama{background:var(--ac);color:var(--acInk);box-shadow:0 12px 28px -16px var(--acGlow)}
.tbl-utama:hover{background:var(--acHover);box-shadow:0 16px 34px -14px var(--acGlow)}
.tbl-gelap{background:var(--ink);color:var(--bg)}
.tbl-gelap:hover{opacity:.9}
.tbl-garis{background:var(--pn);color:var(--ink);border-color:var(--ln2)}
.tbl-garis:hover{border-color:var(--ac);color:var(--ac)}
.tbl-ai{background:linear-gradient(135deg,var(--acSoft),var(--aiSoft));color:var(--ink);border-color:var(--ln2)}
.tbl-ai:hover{border-color:var(--ac)}
.tbl-ai::before{content:"";width:14px;height:14px;flex:none;background:conic-gradient(from 45deg,var(--ac),var(--ai),var(--ac));border-radius:4px;transform:rotate(45deg) scale(.8)}
.tbl-kecil{padding:8px 14px;font-size:13.5px;min-height:44px;border-radius:10px}
.tbl[disabled]{opacity:.55;cursor:wait;transform:none}
.tbl-bahaya{background:var(--badSoft);color:var(--bad);border-color:transparent}
.tbl-bahaya:hover{border-color:var(--bad)}
label.lbl{display:block;font:600 13px var(--f-isi);color:var(--ink);margin:0 0 6px}
.isian{width:100%;font:15px var(--f-isi);color:var(--ink);background:var(--pn);border:1px solid var(--ln2);border-radius:11px;padding:10px 12px;min-height:44px;transition:border-color .15s,box-shadow .15s,background .3s}
.isian::placeholder{color:var(--dim);opacity:.75}
.isian:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acSoft)}
select.isian{cursor:pointer}
textarea.isian{min-height:96px;resize:vertical;line-height:1.5}
.isian.salah{border-color:var(--bad);background:var(--badSoft)}
.pesan-salah{color:var(--bad);font-size:12.5px;margin-top:5px}
.bantu{color:var(--dim);font-size:12.5px;margin-top:6px}
input[type=file]{font:13.5px var(--f-isi);color:var(--dim);max-width:100%}
input[type=file]::file-selector-button{font:600 13px var(--f-isi);padding:8px 12px;margin-right:10px;border-radius:9px;border:1px solid var(--ln2);background:var(--pn2);color:var(--ink);cursor:pointer}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kol-penuh{grid-column:1/-1}
.baris-tbl{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:720px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}

.kartu{background:var(--pn);border:1px solid var(--ln);border-radius:var(--r);padding:24px;box-shadow:var(--bayang);transition:background .3s}
.kartu+.kartu{margin-top:16px}
.kartu h3{font-size:17.5px;margin-bottom:4px}
.kartu .sub{color:var(--dim);font-size:14px;margin:0 0 16px}
.lencana{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1.4 var(--f-isi);padding:3px 9px;border-radius:999px;background:var(--pn2);color:var(--dim);white-space:nowrap}
.lencana.kunci{background:var(--wajibBg);color:var(--wajibInk)}
.lencana.kunci::before{content:"";width:9px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h.5A1.5 1.5 0 0 1 10 6.5v4A1.5 1.5 0 0 1 8.5 12h-7A1.5 1.5 0 0 1 0 10.5v-4A1.5 1.5 0 0 1 1.5 5H2Zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0V5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h.5A1.5 1.5 0 0 1 10 6.5v4A1.5 1.5 0 0 1 8.5 12h-7A1.5 1.5 0 0 1 0 10.5v-4A1.5 1.5 0 0 1 1.5 5H2Zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0V5Z'/%3E%3C/svg%3E") center/contain no-repeat}
.lencana.oto{background:var(--hotSoft);color:var(--hotInk);white-space:normal}
.lencana.ai{background:var(--aiSoft);color:var(--ai)}
.lencana.ok{background:var(--acSoft);color:var(--wajibInk)}
.lencana.bahaya{background:var(--badSoft);color:var(--bad)}
.lencana.tenggang{background:var(--hotSoft);color:var(--hotInk)}
.mode-ai{font-size:12px;color:var(--dim);margin-left:6px}
.mode-ai.ai{color:var(--ai)}
.notis{border-radius:12px;padding:12px 14px;font-size:13.5px;background:var(--pn2);color:var(--ink);border:1px solid var(--ln)}
.notis.amber{background:var(--hotSoft);color:var(--hotInk);border-color:transparent}
.notis.merah{background:var(--badSoft);color:var(--bad);border-color:transparent}
.notis.hijau{background:var(--acSoft);color:var(--wajibInk);border-color:transparent}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:90;max-width:min(92vw,520px);box-shadow:var(--bayang2)}
.toast.tampil{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── landing */
.hero{position:relative;overflow:hidden;padding:72px 0 88px;background:var(--bg)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 30%,transparent 75%);pointer-events:none}
.hero::after{content:"";position:absolute;width:620px;height:620px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,var(--orb1),transparent);pointer-events:none;animation:orb 14s ease-in-out infinite}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
.hero .lebar{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(36px,5vw,60px);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:20px 0 18px}
.hero h1 em{font-style:normal;background-image:linear-gradient(transparent 60%,var(--mark) 60% 92%,transparent 92%);background-repeat:no-repeat}
.hero p.lead{font-size:17.5px;line-height:1.6;color:var(--dim);max-width:560px;margin:0 0 28px}
.pilih-ind{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px}
.pilih-ind a{display:block;text-decoration:none;color:var(--ink);background:var(--pn);border:1px solid var(--ln);border-radius:var(--r-m);padding:16px 16px 14px;transition:.25s var(--ease);box-shadow:var(--bayang)}
.pilih-ind a:hover{border-color:var(--ac);transform:translateY(-2px)}
.pilih-ind b{font:700 16.5px var(--f-judul);letter-spacing:-.02em;display:block;margin-bottom:2px}
.pilih-ind span{font-size:13.5px;color:var(--dim)}
.pilih-ind .pnh{float:right;color:var(--ac);font-weight:700;width:28px;height:28px;border-radius:9px;background:var(--acSoft);display:grid;place-items:center;margin:-2px 0 0 8px}
.hero .catat{margin-top:16px;font-size:13.5px;color:var(--dim)}
.hero .catat a{color:var(--ac);font-weight:600}
@media (max-width:980px){.hero .lebar{grid-template-columns:minmax(0,1fr)}.hero{padding:44px 0 60px}}
@media (max-width:480px){.pilih-ind{grid-template-columns:1fr}}

/* rakitan: pratinjau ERP yang tersusun dari modul */
.rakitan{background:var(--pn);border:1px solid var(--ln);border-radius:var(--r);padding:18px;color:var(--ink);box-shadow:var(--bayang2);transition:background .3s}
.rakitan .rk-label{font:500 11px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.rakitan .jendela{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--ln);margin-bottom:14px}
.rakitan .titik{display:flex;gap:5px}.rakitan .titik i{width:9px;height:9px;border-radius:50%;background:var(--ln2)}
.rakitan .alamat{font:500 12px var(--f-mono);color:var(--dim);background:var(--pn2);padding:6px 10px;border-radius:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rakitan .merek{display:flex;gap:12px;align-items:center;margin-bottom:14px;min-height:44px}
.rakitan .merek .lg{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:800 16px var(--f-judul);color:#fff;background:var(--warna,#0A7A69);flex:none;overflow:hidden}
.rakitan .merek .lg img{width:100%;height:100%;object-fit:contain;background:#fff}
.rakitan .merek b{font:700 15.5px var(--f-judul);letter-spacing:-.02em;display:block;color:var(--ink);line-height:1.25}
.rakitan .merek small{color:var(--dim);font-size:12.5px;display:block;line-height:1.35}
.ubin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ubin .u{border-radius:12px;padding:10px 10px 9px;border:1px dashed var(--ln2);color:var(--dim);font:600 11.5px/1.3 var(--f-isi);min-height:62px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;transition:.35s var(--ease);position:relative;opacity:.7;overflow-wrap:anywhere}
.ubin .u .g{width:16px;height:16px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ubin .u .g i{border-radius:2px;background:var(--mati)}
.ubin .u.on{opacity:1;border:1px solid transparent;background:var(--acSoft);color:var(--ink);animation:pasang .45s var(--ease)}
.ubin .u.on .g i{background:var(--ac)}.ubin .u.on .g i:nth-child(2){opacity:.5}
.ubin .u.wajib::after{content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac)}
@keyframes pasang{from{transform:scale(.92);opacity:.4}to{transform:none;opacity:1}}
.meter{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--hotSoft);display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.meter .angka{font:700 22px var(--f-mono);color:var(--hot);letter-spacing:-.01em}
.meter small{display:block;color:var(--dim);font-size:12px}
.hero .rakitan{transform:rotate(-1deg)}

.seksi{padding:80px 0 0}
.seksi>.lebar>h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.022em;line-height:1.12;max-width:760px;margin-top:14px}
.seksi>.lebar>p.lead{color:var(--dim);max-width:680px;font-size:16.5px;margin:14px 0 32px}
.alur{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:a;padding:0;margin:0}
.alur li{list-style:none;background:var(--pn);border:1px solid var(--ln);border-radius:var(--r-m);padding:20px;counter-increment:a;box-shadow:var(--bayang)}
.alur li::before{content:counter(a,decimal-leading-zero);font:700 12px var(--f-mono);color:var(--ac);background:var(--acSoft);border-radius:999px;padding:4px 10px;display:inline-block;margin-bottom:12px;letter-spacing:.06em}
.alur b{font:700 16px var(--f-judul);letter-spacing:-.02em;display:block;margin-bottom:4px}
.alur span{color:var(--dim);font-size:14px}
@media (max-width:820px){.alur{grid-template-columns:minmax(0,1fr)}}
.tabel-harga{width:100%;border-collapse:separate;border-spacing:0;background:var(--pn);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.tabel-harga th,.tabel-harga td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--ln);font-size:14.5px}
.tabel-harga th{font:500 11px var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--dim);background:var(--pn2)}
.tabel-harga tr:last-child td{border-bottom:0}
.tabel-harga td.mono{text-align:right;white-space:nowrap}
.tabel-harga tbody tr:hover td{background:var(--pn2)}
.harga-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.harga-grid{grid-template-columns:minmax(0,1fr)}}
.syarat li{margin-bottom:8px;color:var(--dim)}
.syarat li b{color:var(--ink)}
.gulir-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.mbaris{display:grid;grid-template-columns:minmax(150px,38%) 1fr;gap:4px 14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--ln)}
.mbaris:last-child{border-bottom:0}
.mbaris b{font:700 14.5px var(--f-judul);letter-spacing:-.01em}
@media (max-width:560px){.mbaris{grid-template-columns:1fr}}

/* ── auth (daftar & masuk) */
.auth{max-width:1280px;margin:0 auto;padding:48px 24px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.auth .kiri{position:relative;overflow:hidden;background:var(--pn2);border:1px solid var(--ln);border-radius:24px;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;gap:0}
.auth .kiri::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 90% 80% at 80% 10%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse 90% 80% at 80% 10%,#000 20%,transparent 70%);pointer-events:none}
.auth .kiri>*{position:relative}
.auth .kiri .eyebrow{align-self:flex-start;margin-bottom:18px}
.auth .kiri h1{font-size:clamp(30px,3.4vw,42px);font-weight:800;letter-spacing:-.025em;margin-bottom:14px}
.auth .kiri p{color:var(--dim);max-width:460px;margin:0 0 10px}
.auth .kiri p b{color:var(--ink)}
.auth .kiri .terpilih{color:var(--ac);font-weight:700}
.auth .kanan{display:flex;align-items:center;justify-content:center;background:var(--pn);border:1px solid var(--ln);border-radius:24px;padding:40px 24px;box-shadow:var(--bayang)}
.auth form{width:100%;max-width:420px;display:grid;gap:16px}
.auth form .tbl-utama{width:100%;min-height:48px}
@media (max-width:860px){.auth{grid-template-columns:minmax(0,1fr);padding-top:20px;gap:16px}.auth .kiri{padding:28px 22px}.auth .kanan{padding:28px 18px}}

/* ── wizard: navigasi langkah (di header) */
.langkah-bar{min-width:0;flex:0 1 auto}
.langkah-bar ol{list-style:none;margin:0;padding:3px;display:flex;gap:2px;overflow-x:auto;background:var(--pn2);border-radius:11px;scrollbar-width:none}
.langkah-bar ol::-webkit-scrollbar{display:none}
.langkah-bar li{flex:none}
.langkah-bar li a,.langkah-bar li span{display:flex;align-items:center;gap:6px;font:500 12.5px/1 var(--f-mono);white-space:nowrap;padding:0 11px;min-height:38px;border-radius:8px;color:var(--dim);text-decoration:none;transition:background .2s,color .2s}
.langkah-bar li span{opacity:.65;cursor:not-allowed}
.langkah-bar li a:hover{background:var(--pn);color:var(--ink)}
.langkah-bar li i{font-style:normal}
.langkah-bar li.selesai a{color:var(--ac)}
.langkah-bar li.kini a,.langkah-bar li.kini span{background:var(--ac);color:var(--acInk);font-weight:700;opacity:1}
@media (max-width:980px){
  .atas .dalam{flex-wrap:wrap;row-gap:10px}
  .langkah-bar{order:3;flex:1 1 100%}
}

.wiz{max-width:1280px;margin:0 auto;padding:32px 24px 40px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.wiz .kepala{margin-bottom:22px}
.wiz .kepala .eyebrow{margin-bottom:14px}
.wiz .kepala h1{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.wiz .kepala p{color:var(--dim);margin:12px 0 0;max-width:660px;font-size:15.5px}
.wiz aside{position:sticky;top:96px}
.wiz aside>p{color:var(--dim)}
.wiz .aksi{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.wiz .aksi .tbl-utama{min-height:52px;padding:0 24px;font-size:16px}
.wiz main{min-width:0}
@media (max-width:1020px){.wiz{grid-template-columns:minmax(0,1fr)}.wiz aside{position:static;order:-1}.wiz aside .rakitan .ubin{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.wiz aside .rakitan .ubin,.wiz aside .rakitan .jendela,.wiz aside>p{display:none}.wiz aside .rakitan{padding:14px}.wiz aside .rakitan .merek{margin-bottom:0}.wiz aside .rakitan .meter{margin-top:10px}.wiz{padding-top:18px;gap:16px}.wiz .aksi .tbl{flex:1 1 auto}}
.tier-langsung{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px}

/* logo */
.logo-zona{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logo-pratinjau{width:180px;height:96px;border:1px dashed var(--ln2);border-radius:14px;display:grid;place-items:center;background:repeating-conic-gradient(#EEF3F1 0 25%,#fff 0 50%) 0 0/16px 16px;overflow:hidden}
.logo-pratinjau .kecil{color:#52665F}
.logo-pratinjau img{max-width:90%;max-height:80px}
.warna-pil{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.warna-pil button{width:32px;height:32px;border-radius:9px;border:2px solid var(--pn);box-shadow:0 0 0 1px var(--ln2);cursor:pointer}
.warna-pil button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}
.warna-input{display:flex;gap:8px;align-items:center}
.warna-input input[type=color]{width:44px;height:44px;flex:none;border:1px solid var(--ln2);border-radius:11px;padding:3px;background:var(--pn);cursor:pointer}

/* modul & fitur: kartu modul, fitur sebagai chip */
.modul-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:12px;align-items:start}
.mdl{border:1px solid var(--ln);border-radius:var(--r-m);background:var(--pn);overflow:hidden;transition:border-color .2s,opacity .25s,background .3s;box-shadow:var(--bayang)}
.mdl.off{opacity:.62;box-shadow:none}
.mdl .kpl{display:flex;gap:12px;align-items:flex-start;padding:16px}
.mdl .kpl::before{content:"";order:1;width:9px;height:9px;flex:0 0 9px;border-radius:50%;margin-top:8px;background:var(--mati);transition:background .2s,box-shadow .2s}
.mdl.on .kpl::before{background:var(--ac);box-shadow:0 0 10px var(--ac)}
.mdl .kpl .tks{order:2;flex:1;min-width:0}
.mdl .kpl .saklar{order:3}
.mdl .kpl .saklar:has(input:disabled){display:none}
.mdl .kpl b{font:700 16px var(--f-judul);letter-spacing:-.02em}
.mdl .kpl label{cursor:pointer}
.mdl .kpl p{margin:3px 0 0;color:var(--dim);font-size:13.5px}
.mdl .kpl .lencana.kunci{font:700 10.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;vertical-align:2px}
.mdl .alasan{margin:6px 0 0;font-size:12.5px;color:var(--ai)}
.mdl .ftr{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 16px}
.mdl.off .ftr{display:none}
.ftr-b{position:relative;flex:1 1 210px;min-width:0;display:flex;align-items:flex-start;gap:8px;padding:9px 12px;min-height:44px;border-radius:10px;border:1px dashed var(--ln2);background:transparent;transition:background .18s,border-color .18s,transform .18s}
.ftr-b:hover{transform:translateY(-1px)}
.ftr-b .saklar{position:absolute;inset:0;width:auto;height:auto;z-index:1}
.ftr-b .saklar i{display:none}
.ftr-b .tks{flex:1;min-width:0;font-size:13.5px;color:var(--dim)}
.ftr-b .tks b{font:600 13.5px var(--f-isi);color:var(--ink)}
.ftr-b .tks b::before{content:"+ ";color:var(--dim)}
.ftr-b .tks span{color:var(--dim);display:block;font-size:12px;line-height:1.45;margin-top:2px}
.ftr-b .tks span.lencana{display:inline-flex;font-size:11px;vertical-align:1px;margin:0 0 0 4px;padding:1px 8px}
.ftr-b:has(input:checked){background:var(--ac);border:1px solid var(--ac)}
.ftr-b:has(input:checked) .tks,.ftr-b:has(input:checked) .tks b,.ftr-b:has(input:checked) .tks span:not(.lencana),.ftr-b:has(input:checked) .tks b::before{color:var(--acInk)}
.ftr-b:has(input:checked) .tks span:not(.lencana){opacity:.85}
.ftr-b:has(input:checked) .tks b::before{content:"\2713  "}
.ftr-b:has(input:checked:disabled),.ftr-b:not(:has(.saklar)){background:var(--wajibBg);border:1px solid transparent;transform:none}
.ftr-b:has(input:checked:disabled) .tks,.ftr-b:has(input:checked:disabled) .tks b,.ftr-b:has(input:checked:disabled) .tks span:not(.lencana),.ftr-b:not(:has(.saklar)) .tks b,.ftr-b:not(:has(.saklar)) .tks span:not(.lencana){color:var(--wajibInk);opacity:1}
.ftr-b:has(input:checked:disabled) .tks b::before,.ftr-b:not(:has(.saklar)) .tks b::before{content:"\25CF  ";color:var(--wajibInk)}
.ftr-b:has(input:disabled:not(:checked)){opacity:.6}
.ftr-b:has(input:focus-visible){outline:2px solid var(--ac);outline-offset:2px}
.ftr-b .tks span.lencana.kunci{background:transparent;color:inherit;padding:0;font:700 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.ftr-b .tks span.lencana.oto{background:var(--hotSoft);color:var(--hotInk)}
.saklar{position:relative;width:48px;height:28px;flex:none;display:inline-block}
.saklar input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.saklar i{position:absolute;inset:0;border-radius:99px;background:var(--mati);transition:background .2s}
.saklar i::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.saklar input:checked+i{background:var(--ac)}
.saklar input:checked+i::after{transform:translateX(20px)}
:root[data-theme="dark"] .saklar input:checked+i::after{background:var(--acInk)}
.saklar input:disabled{cursor:not-allowed}
.saklar input:focus-visible+i{outline:2px solid var(--ac);outline-offset:2px}

/* tabel data awal */
.tab-data{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab-data button{font:600 13.5px var(--f-isi);border:1px solid var(--ln2);background:var(--pn);color:var(--dim);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:44px;transition:background .2s,color .2s,border-color .2s}
.tab-data button:hover{color:var(--ink);border-color:var(--ac)}
.tab-data button[aria-selected=true]{background:var(--ac);color:var(--acInk);border-color:var(--ac)}
.tab-data button .n{font:700 11px var(--f-mono);background:var(--pn2);color:var(--dim);border-radius:99px;padding:1px 7px;margin-left:6px}
.tab-data button[aria-selected=true] .n{background:var(--acInk);color:var(--ac)}
.grid-ed{width:100%;border-collapse:collapse;min-width:640px}
.grid-ed th{font:500 10.5px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);text-align:left;padding:8px 6px;border-bottom:1px solid var(--ln2)}
.grid-ed td{padding:5px 4px;border-bottom:1px solid var(--ln);vertical-align:top}
.grid-ed .isian{min-height:40px;padding:7px 9px;font-size:14px;border-radius:9px}
.grid-ed td.hps{width:44px}
.grid-ed .hapus{border:0;background:none;color:var(--dim);cursor:pointer;width:40px;height:40px;border-radius:9px;font-size:18px}
.grid-ed .hapus:hover{background:var(--badSoft);color:var(--bad)}
.kosong{padding:28px;text-align:center;color:var(--dim);border:1px dashed var(--ln2);border-radius:14px;font-size:14px}
dialog.dlg{border:1px solid var(--ln);border-radius:20px;padding:0;max-width:min(680px,94vw);width:100%;background:var(--pn);color:var(--ink);box-shadow:0 40px 100px -30px rgba(0,0,0,.5)}
dialog.dlg::backdrop{background:rgba(4,17,14,.55);backdrop-filter:blur(2px)}
dialog.dlg .isi{padding:24px}
dialog.dlg h3{font-size:19px;margin-bottom:6px}

/* langganan */
.durasi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.durasi label{display:block;border:1.5px solid var(--ln2);border-radius:16px;padding:16px 18px;cursor:pointer;background:var(--pn);position:relative;transition:border-color .2s,box-shadow .2s,background .2s}
.durasi label:hover{border-color:var(--ac)}
.durasi input{position:absolute;opacity:0}
.durasi label:has(input:checked){border-color:var(--ac);box-shadow:0 0 0 3px var(--acSoft);background:linear-gradient(var(--acSoft),var(--acSoft)) padding-box,var(--pn)}
.durasi input:focus-visible+div{outline:2px solid var(--ac);outline-offset:4px;border-radius:6px}
.durasi b{font:800 19px var(--f-judul);letter-spacing:-.02em;display:block;margin-bottom:2px}
.durasi .hemat{float:right;margin-left:8px}
.rincian{width:100%;border-collapse:collapse;font-size:14.5px}
.rincian td{padding:10px 0;border-bottom:1px solid var(--ln);color:var(--dim)}
.rincian td:last-child{text-align:right;font-family:var(--f-mono);font-feature-settings:"tnum";white-space:nowrap;padding-left:12px;color:var(--ink)}
.rincian tr.sub td{font-weight:600;color:var(--ink);border-bottom:1px dashed var(--ln2)}
.rincian tr.total td{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;border-bottom:0;padding-top:18px;vertical-align:baseline;color:var(--dim)}
.rincian tr.total td:last-child{font:700 clamp(22px,3vw,30px) var(--f-mono);letter-spacing:-.01em;text-transform:none;color:var(--hot)}
.rincian tr.minus td:last-child{color:var(--ac)}
@media (max-width:520px){.durasi{grid-template-columns:1fr}}

/* review & bayar */
.ringkas dl{display:grid;grid-template-columns:180px 1fr;gap:8px 16px;margin:0;font-size:14px}
.ringkas dt{color:var(--dim)}
.ringkas dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.ringkas a.kecil{font-weight:600}
@media (max-width:560px){.ringkas dl{grid-template-columns:1fr;gap:2px}.ringkas dd{margin-bottom:8px}}
.transfer{background:var(--pn2);color:var(--ink);border:1px solid var(--ln);border-radius:var(--r-m);padding:18px 20px}
.transfer .label-mono{font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.transfer .rek{font:700 22px var(--f-mono);letter-spacing:.02em;color:var(--ink);margin:6px 0 2px;overflow-wrap:anywhere}
.transfer .kecil{color:var(--dim)}
.medan{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--ln2);border-radius:var(--r-m);padding:16px 18px}
.medan label{font-weight:600}

/* provisi: Menyiapkan ERP */
.prov{max-width:820px;margin:0 auto;padding:40px 24px 20px}
.prov h1{font-size:clamp(28px,3.8vw,44px);font-weight:800;letter-spacing:-.025em;line-height:1.08}
.prov ol{list-style:none;padding:8px 0;margin:20px 0 0;background:var(--pn);border:1px solid var(--ln);border-radius:var(--r);counter-reset:pv;box-shadow:var(--bayang);overflow:hidden}
.prov ol:empty{display:none}
.prov li{display:flex;gap:12px;align-items:center;padding:10px 20px;counter-increment:pv;transition:background .3s}
.prov li::before{content:counter(pv,decimal-leading-zero);order:2;font:500 12.5px var(--f-mono);color:var(--dim);width:24px;flex:none}
.prov li .st{order:1;width:10px;height:10px;border-radius:50%;flex:none;display:block;font-size:0;color:transparent;background:var(--mati)}
.prov li>div{order:3;flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;justify-content:space-between}
.prov li.ok .st{background:var(--ac)}
.prov li.lewat .st{background:var(--hot)}
.prov li.gagal .st{background:var(--bad)}
.prov li.jalan{background:var(--pn2)}
.prov li.jalan .st{background:var(--hot);box-shadow:0 0 10px var(--hot);animation:denyut .8s infinite}
.prov li.jalan .st::after{content:none}
@keyframes denyut{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes putar{to{transform:rotate(360deg)}}
.prov li b{font:500 13.5px var(--f-mono);display:block;color:var(--ink)}
.prov li.jalan b{font-weight:700}
.prov li.menunggu b{color:var(--dim)}
.prov li small{font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);overflow-wrap:anywhere}
.prov li.ok small{color:var(--ac)}
.prov li.jalan small{color:var(--hot)}
.prov li.gagal small{color:var(--bad)}
.progres{height:6px;background:var(--pn2);border-radius:99px;overflow:hidden;margin-top:22px}
.progres i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--hot),var(--ac));background-size:200% 100%;width:0;transition:width .6s var(--ease);animation:kilau 1.6s linear infinite}
@keyframes kilau{from{background-position:200% 0}to{background-position:-200% 0}}
.dasbor ol.prov{list-style:none;margin:14px 0 0;max-width:none;background:var(--pn2);border-radius:var(--r-m);counter-reset:pv;overflow:hidden}
.dasbor ol.prov li.jalan{background:var(--pn)}

/* akun & admin */
.dasbor{max-width:1180px;margin:0 auto;padding:32px 24px 20px}
.dasbor>h1,.dasbor .judul-dasbor{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.025em}
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0}
.stat{background:var(--pn);border:1px solid var(--ln);border-radius:var(--r-m);padding:16px 18px;box-shadow:var(--bayang)}
.stat small{color:var(--dim);font:500 10.5px var(--f-mono);text-transform:uppercase;letter-spacing:.12em}
.stat b{display:block;font:700 22px var(--f-judul);letter-spacing:-.02em;margin-top:6px}
@media (max-width:860px){.statgrid{grid-template-columns:1fr 1fr}}
.tabel{width:100%;border-collapse:collapse;font-size:14px}
.tabel th{font:500 10.5px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);text-align:left;padding:10px 10px;border-bottom:1px solid var(--ln2);white-space:nowrap}
.tabel td{padding:12px 10px;border-bottom:1px solid var(--ln);vertical-align:top}
.tabel tr:last-child td{border-bottom:0}
.tabel td.mono{white-space:nowrap}

/* asisten (chat) */
.asisten-tbl{position:fixed;right:20px;bottom:20px;z-index:60;border-radius:99px;box-shadow:0 14px 40px -12px rgba(4,17,14,.55)}
.asisten{position:fixed;right:20px;bottom:84px;width:min(380px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 120px));background:var(--pn);color:var(--ink);border:1px solid var(--ln);border-radius:20px;box-shadow:0 30px 80px -24px rgba(4,17,14,.45);z-index:61;display:none;flex-direction:column;overflow:hidden}
.asisten.buka{display:flex}
.asisten header{background:var(--pn2);color:var(--ink);padding:10px 10px 10px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--ln)}
.asisten header b{font:700 14.5px var(--f-judul);letter-spacing:-.01em}
.asisten header button{background:none;border:0;color:var(--dim);font-size:22px;cursor:pointer;width:44px;height:44px;border-radius:10px;flex:none}
.asisten header button:hover{background:var(--pn);color:var(--ink)}
.asisten .log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.asisten .gel{max-width:88%;padding:9px 12px;border-radius:14px;line-height:1.5;white-space:pre-wrap}
.asisten .gel.u{align-self:flex-end;background:var(--ac);color:var(--acInk);border-bottom-right-radius:4px}
.asisten .gel.a{align-self:flex-start;background:var(--pn2);border-bottom-left-radius:4px}
.asisten .gel.a small{display:block;color:var(--dim);font-size:11px;margin-top:4px}
.asisten form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--ln)}
.asisten form .isian{min-height:44px}

/* invoice cetak A4: kertas tetap putih di kedua tema */
.a4{background:#fff;width:210mm;min-height:297mm;margin:20px auto;padding:18mm 16mm;box-shadow:var(--bayang2);color:#111;font-size:12.5px;border-radius:4px}
.a4 .kop{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #0A7A69;padding-bottom:12px}
.a4 h1{font-size:26px;letter-spacing:.06em}
.a4 table{width:100%;border-collapse:collapse;margin-top:14px}
.a4 th,.a4 td{border-bottom:1px solid #DDE5E2;padding:7px 6px;text-align:left}
.a4 td.r,.a4 th.r{text-align:right;font-family:var(--f-mono)}
.cap{display:inline-block;border:2px solid #0A7A69;color:#0A7A69;font:800 18px var(--f-judul);padding:6px 14px;border-radius:8px;transform:rotate(-6deg);letter-spacing:.1em}
.cap.belum{border-color:#A86206;color:#A86206}
.no-cetak{display:flex}
@media print{html,body{background:#fff}.atas,.kaki,.no-cetak,.asisten-tbl,.lompat{display:none!important}.a4{margin:0;box-shadow:none;width:auto;min-height:auto;padding:0}@page{size:A4;margin:14mm}}
@media (max-width:820px){.a4{width:auto;margin:10px;padding:18px}}

@media (max-width:640px){
  .grid-ed{min-width:0;display:block}
  .grid-ed thead{display:none}
  .grid-ed tbody,.grid-ed tr,.grid-ed td{display:block}
  .grid-ed tr{border:1px solid var(--ln);border-radius:14px;padding:8px 8px 4px;margin-bottom:10px;position:relative;background:var(--pn2)}
  .grid-ed td{border:0;padding:3px 0}
  .grid-ed td[data-label]::before{content:attr(data-label);display:block;font:500 10.5px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin:2px 0 3px}
  .grid-ed td.hps{position:absolute;top:4px;right:4px;width:auto}
  .grid-ed td:first-child{padding-right:44px}
}

@media (max-width:560px){
  .atas .dalam{padding:10px 16px;gap:8px;min-height:64px}
  .logo{font-size:18px;gap:8px}.logo img{width:26px;height:26px}
  .atas-kanan{gap:4px}
  .tema-tbl{width:44px;height:44px}
  .nav-utama a{padding:8px 7px;font-size:13.5px}
  .nav-utama a.opsional{display:none}
  .nav-utama a.tbl{white-space:nowrap;padding:8px 11px;margin-left:2px}
  .nav-utama .email-admin{display:none}
  .lebar{padding:0 16px}
  .wiz,.dasbor,.prov,.auth{padding-left:16px;padding-right:16px}
  .kartu{padding:18px;border-radius:var(--r-m)}
  .rincian tr.total td:last-child{font-size:22px}
  .transfer .rek{font-size:19px}
  .asisten-tbl{right:12px;bottom:12px}
}
@media (max-width:380px){.nav-utama a.tbl{font-size:12.5px;padding:8px 9px}}
.prov-status{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:26px}
.prov-status #hitung{font-weight:700;font-size:14px}
.prov-status+.progres{margin-top:8px}
.grid2>.kartu+.kartu,.harga-grid>.kartu{margin-top:0}