/* Inter — dibundel lokal (SIL OFL 1.1, lihat fonts/LICENSE-OFL.txt); kontrak §02: font lokal berlisensi */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-latin-800-normal.woff2') format('woff2')}
/* CyGap.id design system — token diambil dari CyGap.id-Design-Reference-v5 (hitam, merah CYB, emas aksen, kartu putih) */
:root{
  /* alias token yang dipakai komponen baru — sebelumnya tidak terdefinisi sehingga latar menjadi transparan */
  --bg-1:#FFFFFF; --bg-2:#F6F6F9; --gold-bg:#FDF6E6;

  --black:#0B0D10; --ink:#111216; --side:#062740; --side-hi:#0C3A5E;
  --red:#1273D4; --red-dk:#0B5AA6; --red-soft:#E9F3FC;
  --gold:#C9962E; --gold-dk:#79551D; --gold-soft:#FBF4E3; --gold-text:#D6A83A;
  --bg:#f5f5f7; --card:#FFFFFF; --line:#e7e7eb; --line-2:#EEF0F3;
  --text:#0B0D10; --muted:#71727b; --muted-2:#9CA3AF;
  --green:#0F8A6B; --green-soft:#E5F5F0; --amber:#D97706; --amber-soft:#FEF3DE; --blue:#1273D4; --blue-soft:#E9F3FC;
  --r:12px; --r-sm:8px; --shadow:0 1px 2px rgba(17,18,20,.05);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
svg[viewBox="0 0 24 24"]{width:1em;height:1em;flex:none}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.5 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:28px;letter-spacing:-.02em}
h2{font-size:16px}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:12px} .tiny{font-size:11px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.logo{font-weight:800;font-size:22px;letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:baseline;gap:0}
.logo b{color:var(--red)} .logo span{color:#fff;font-weight:600} .logo.dark span{color:var(--ink)}
.logo-sub{display:block;margin-top:5px;font-size:9px;letter-spacing:.28em;color:#9CA3AF;font-weight:600}

/* ---------- Shell (V33/V37) ---------- */
.shell{display:grid;grid-template-columns:214px 1fr;min-height:100vh}
.side-bg{display:none}
.side{background:var(--side);color:#fff;padding:22px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.side .brand{padding:0 10px 22px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#D1D5DB;font-weight:500;position:relative}
.nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.nav a:hover{background:var(--side-hi);color:#fff}
.nav a.on{background:var(--side-hi);color:#fff;font-weight:600}
.nav a.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;background:var(--red);border-radius:0 3px 3px 0}
.nav .badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;padding:0 5px}
.side-foot{margin-top:auto;border-top:1px solid #222;padding-top:14px;display:flex;flex-direction:column;gap:12px}
.sys{background:#151517;border-radius:10px;padding:10px 12px;font-size:12px}
.sys .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;box-shadow:0 0 0 3px rgba(22,163,74,.2)}
.sys .lbl{font-size:10px;letter-spacing:.14em;color:#6B7280;font-weight:600;margin-bottom:6px}
.side-user{display:flex;align-items:center;gap:10px;padding:6px 4px}
.av{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.side .av{background:#fff}
.main{min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);height:72px;display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:20}
.top .search{flex:1;max-width:520px;font-size:13px;display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:9px;padding:9px 12px;color:var(--muted-2)}
.top .search svg{width:16px;height:16px}
.top .search kbd{margin-left:auto;font-size:11px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--muted)}
.top .spacer{flex:1}
.icon-btn{width:38px;height:38px;border-radius:9px;border:0;background:transparent;display:grid;place-items:center;position:relative;cursor:pointer}
.icon-btn:hover{background:var(--bg)}
.icon-btn .n{position:absolute;top:5px;right:5px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center}
.burger{display:none}
.content{padding:24px;display:flex;flex-direction:column;gap:18px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head .sub{color:var(--muted);margin-top:2px;font-size:15px}
.page-head .right{font-size:13px;color:var(--muted);border-bottom:2px solid var(--gold);padding-bottom:6px;align-self:flex-end}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:10px 16px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.2;transition:filter .12s}
.btn svg{width:16px;height:16px}
.btn:hover{filter:brightness(.96)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn-red{background:var(--red);color:#fff}
.btn-gold{background:linear-gradient(180deg,#C9A24B,#A07A33);color:#fff}
.btn-black{background:var(--ink);color:#fff}
.btn-outline{background:#fff;border-color:var(--line);color:var(--text)}
.btn-outline.gold{border-color:var(--gold);color:var(--gold-dk)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-danger{background:#fff;border-color:#F5C2C5;color:var(--red-dk)}
.btn-lg{padding:13px 20px;font-size:15px;border-radius:10px}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:7px}
.btn-block{width:100%}

/* ---------- Cards / grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card.dark{background:var(--ink);color:#fff;border-color:#222}
.card.dark .muted{color:#9CA3AF}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-h h2{display:flex;align-items:center;gap:9px}
.card-h h2 svg{width:18px;height:18px;color:var(--muted)}
.card .small svg,.card .tiny svg{width:15px;height:15px;flex:none}
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:1fr 1fr} .g-3{grid-template-columns:repeat(3,1fr)} .g-2-1{grid-template-columns:2fr 1fr} .g-3-1{grid-template-columns:3fr 1fr}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}

/* ---------- Stepper (V37) ---------- */
.stepper{display:flex;align-items:flex-start;gap:0}
.step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;gap:6px}
.step .n{width:28px;height:28px;border-radius:50%;background:var(--line);color:var(--muted);display:grid;place-items:center;font-weight:700;font-size:13px;position:relative;z-index:1}
.step .t{font-weight:600;font-size:13px}
.step .d{font-size:11px;color:var(--muted)}
.step:not(:last-child)::after{content:"";position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--line)}
.step.done .n,.step.on .n{background:var(--red);color:#fff}
.step.done::after{background:var(--red)}
.step.on::after{background:linear-gradient(90deg,var(--red) 50%,var(--line) 50%)}
.step.done .n::before{content:"✓";font-size:13px}
.step.done .n span{display:none}

/* ---------- Dropzone ---------- */
.drop{border:1.5px dashed #C9CBD1;border-radius:var(--r);padding:26px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;background:#FAFAFB;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--gold);background:var(--gold-soft)}
.drop .ico{width:64px;height:76px;border-radius:8px;background:linear-gradient(180deg,#F3F4F6,#E5E7EB);display:grid;place-items:center;position:relative}
.drop .ico svg{width:30px;height:30px;color:#6B7280}
.drop .ok{position:absolute;right:-8px;bottom:-8px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:14px;border:3px solid #fff}
.drop .fn{font-weight:700;font-size:15px}
.drop .fm{color:var(--muted);font-size:12px}
.drop input{display:none}

/* ---------- Targets (V37) ---------- */
.target{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;position:relative}
.target .chk{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:5px;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:12px}
.target .chk.off{background:#fff;border:1.5px solid var(--line)}
.target .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px}
.target .ic.web{background:#EEF0F4;color:#111}
.target .ic.and{background:#E8F7EE;color:#16A34A}
.target .ic svg{width:24px;height:24px}
.target .v{font-size:18px;font-weight:700}

/* ---------- Status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--green-soft);color:#15803D} .pill.warn{background:var(--amber-soft);color:#B45309}
.pill.err{background:var(--red-soft);color:#0B5AA6} .pill.info{background:var(--blue-soft);color:#1D4ED8}
.pill.gray{background:#F0F1F3;color:var(--muted)} .pill.gold{background:var(--gold-soft);color:var(--gold-dk)}
.pill.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.note{border-radius:var(--r-sm);padding:12px 14px;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.note svg{width:18px;height:18px;flex:none;margin-top:1px}
.note.ok{background:var(--green-soft);color:#166534} .note.warn{background:var(--amber-soft);color:#92400E}
.note.err{background:var(--red-soft);color:#991B1B} .note.info{background:var(--blue-soft);color:#1E3A8A}
.note.gold{background:var(--gold-soft);color:#7C5F1A}
.note b{display:block}

/* ---------- Check list ---------- */
.checks{display:grid;gap:10px}
.check{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;display:flex;align-items:center;gap:12px;background:#fff}
.check.ok{background:var(--green-soft);border-color:#CDEEDA}
.check.err{background:var(--red-soft);border-color:#F5C2C5}
.check .ci{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.check.ok .ci{background:var(--green)} .check.err .ci{background:var(--red)} .check.pending .ci{background:#D1D5DB}
.check b{display:block;font-size:13px} .check span{font-size:12px;color:var(--muted)}

/* ---------- Timeline ---------- */
.tl{display:flex;flex-direction:column;gap:0}
.tl-i{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:8px 0;position:relative}
.tl-i:not(:last-child)::before{content:"";position:absolute;left:10px;top:30px;bottom:-8px;width:2px;background:var(--line)}
.tl-i .dot{width:22px;height:22px;border-radius:50%;background:var(--line);display:grid;place-items:center;color:#fff;font-size:11px;position:relative;z-index:1}
.tl-i.ok .dot{background:var(--green)} .tl-i.err .dot{background:var(--red)} .tl-i.warn .dot{background:var(--amber)} .tl-i.on .dot{background:var(--gold)}
.tl-i b{display:block;font-size:13px} .tl-i span{font-size:12px;color:var(--muted)} .tl-i .r{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}

/* ---------- Health ---------- */
.hl{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.hl:last-child{border-bottom:0}
.hl .dot{width:9px;height:9px;border-radius:50%;background:var(--green)} .hl.err .dot{background:var(--red)}
.hl b{display:block;font-size:13px} .hl span{font-size:12px;color:var(--muted)} .hl .pill{margin-left:auto}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.hi td{background:var(--red-soft)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Forms ---------- */
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-size:13px;font-weight:600}
.f label i{color:var(--red);font-style:normal}
.in{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px 12px;min-height:46px;background:#fff;outline:0;transition:border-color .12s,box-shadow .12s}
.in:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,147,61,.15)}
.in.dark{background:#1A1A1D;border-color:#2A2A2E;color:#fff}
.in.dark:focus{border-color:var(--gold)}
.hint{font-size:12px;color:var(--muted)}
.pw{position:relative}.pw .in{padding-right:44px}.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;width:32px;height:32px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.chkbox{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}
.chkbox input{width:18px;height:18px;accent-color:var(--gold)}
.sw{position:relative;width:40px;height:22px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:#D1D5DB;border-radius:11px;transition:.15s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.sw input:checked+i{background:var(--gold)} .sw input:checked+i::after{transform:translateX(18px)}

/* ---------- Approval panel (V37) ---------- */
.approve{background:var(--ink);color:#fff;border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px}
.approve .hd{display:flex;gap:12px;align-items:flex-start}
.approve .hd .ic{width:38px;height:38px;border-radius:50%;background:var(--gold);display:grid;place-items:center;flex:none}
.approve .hd .ic svg{width:20px;height:20px;color:#fff}
.approve .hd b{font-size:15px;display:block} .approve .hd span{font-size:12px;color:#9CA3AF}
.approve label{font-size:12px;color:#D1D5DB;font-weight:600}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;align-items:baseline}
.kv .k{color:#9CA3AF;display:flex;align-items:center;gap:8px} .kv .k svg{width:15px;height:15px}
.kv b{font-size:15px;display:block} .kv span{font-size:12px;color:#9CA3AF}
.keyrow{display:flex;align-items:center;gap:10px;background:#1A1A1D;border-radius:9px;padding:9px 12px;border:1px solid #2A2A2E}
.keyrow .k-ic{width:34px;height:34px;border-radius:8px;background:#fff;display:grid;place-items:center;color:#111;flex:none}
.keyrow b{display:block;font-size:12px} .keyrow span{font-size:11px;color:#9CA3AF}
.keyrow .ok{margin-left:auto;color:var(--green)}

/* ---------- Progress ---------- */
.prog{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s}

/* ---------- Toast / modal ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:100;max-width:92vw}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.err{background:var(--red-dk)}
.modal-bg{position:fixed;inset:0;background:rgba(10,10,10,.55);display:none;place-items:center;z-index:90;padding:16px;overscroll-behavior:contain}
.modal-bg.open{display:grid}
.modal{background:#fff;border-radius:14px;padding:22px;width:min(96vw,460px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- Login (V04) ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(300px,4fr) 7fr;background:#fff}
.login-l{background:radial-gradient(120% 80% at 80% 90%,#3A2A10 0%,#0A0A0A 55%);color:#fff;padding:44px 40px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.login-l::after{content:"";position:absolute;right:-40px;top:20%;bottom:0;width:180px;background:linear-gradient(180deg,rgba(201,162,75,.0),rgba(201,162,75,.22));filter:blur(40px)}
.login-l .brand{display:flex;gap:14px;align-items:center}
.login-l .brand .logo{font-size:30px}
.login-l .brand .tag{border-left:1px solid #444;padding-left:14px;font-size:11px;line-height:1.35;color:#C4C7CE}
.login-l h2{font-size:30px;font-weight:600;line-height:1.2;margin:56px 0 14px;letter-spacing:-.02em}
.login-l h2 em{font-style:normal;color:var(--gold-text)}
.login-l p{color:#B0B4BC;font-size:14px;max-width:34ch}
.feat{display:flex;gap:12px;align-items:flex-start;margin-top:20px}
.feat .fi{width:36px;height:36px;border:1px solid #3A3A3F;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--gold-text)}
.feat .fi svg{width:17px;height:17px}
.feat b{display:block;font-size:13px} .feat span{font-size:12px;color:#9CA3AF}
.quote{margin-top:auto;border:1px solid #3A3A3F;border-radius:10px;padding:16px;font-size:13px;color:#D1D5DB;max-width:300px}
.quote::before{content:"“";color:var(--gold-text);font-size:26px;line-height:.5;display:block;margin-bottom:8px}
.login-l .foot{margin-top:24px;font-size:11px;color:#6B7280}
.login-r{display:grid;place-items:center;padding:32px 20px;background:var(--bg)}
.login-card{width:min(100%,420px);background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 30px;display:flex;flex-direction:column;gap:18px}
.login-card .bar{width:40px;height:3px;background:var(--gold);border-radius:2px}
.login-card .hello{font-size:15px;font-weight:600}
.login-card .logo{font-size:40px;margin:2px 0}
.login-card .lead{color:var(--muted)}
.login-top{position:absolute;top:18px;right:24px;display:flex;gap:14px;font-size:13px;color:var(--muted);align-items:center}
.login-top span{display:inline-flex;align-items:center;gap:6px}
.login-top svg{width:15px;height:15px}

/* ---------- Public download (V05) ---------- */
.pub{max-width:1040px;margin:0 auto;padding:24px 20px 60px}
.pub-nav{display:flex;align-items:center;gap:22px;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:26px}
.pub-nav .links{display:flex;gap:18px;font-size:13px;color:var(--muted);margin-left:8px}
.pub-nav .links a.on{color:var(--gold-dk);border-bottom:2px solid var(--gold);padding-bottom:4px}
.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--gold-dk);font-weight:600;margin-bottom:8px}
.pub h1{font-size:40px;line-height:1.1}
.pub h1 .logo{font-size:40px}
.dl-opt{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:14px;background:#fff}
.dl-opt .ic{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;flex:none}
.dl-opt b{display:block;font-size:14px} .dl-opt span{font-size:12px;color:var(--muted)}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.meta .mi{display:flex;gap:10px;align-items:center;font-size:12px}
.meta .mi .ic{width:32px;height:32px;border-radius:50%;background:#F3F4F6;display:grid;place-items:center;color:var(--muted)}
.meta .mi b{display:block;font-size:13px;color:var(--text)}
.help{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;display:flex;gap:12px;align-items:center;background:#fff}
.help .hi{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;flex:none}
.help b{display:block;font-size:13px} .help span{font-size:12px;color:var(--muted)}

/* ---------- Responsive (Kennedy bekerja dari HP) ---------- */
@media (max-width:1100px){.g-3{grid-template-columns:1fr 1fr}.g-2-1,.g-3-1{grid-template-columns:1fr}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:60;transform:translateX(-100%);transition:transform .2s;height:100vh}
  .side.open{transform:none}
  .side-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;display:none}
  .side-bg.open{display:block}
  .burger{display:grid}
  .top{padding:0 14px;gap:6px} .top .search{display:none}
  .content{padding:14px;gap:14px}
  .g-2,.g-3{grid-template-columns:1fr}
  h1{font-size:23px}
  .stepper{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .step{min-width:96px}
  .step .d{display:none}
  .login{grid-template-columns:1fr}
  .login-l{padding:28px 22px;min-height:0}
  .login-l h2{margin:26px 0 10px;font-size:24px}
  .feat,.quote,.login-l .foot,.login-l p{display:none}
  .login-top{position:static;padding:12px 0 0;justify-content:flex-end}
  .login-r{padding:18px 14px 40px;align-items:start}
  .login-card{padding:24px 20px}
  .meta{grid-template-columns:1fr}
  .pub h1,.pub h1 .logo{font-size:30px}
  .card{padding:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* =================== Marketing (V01 / V02) =================== */
.mk{background:#fff;color:var(--text)}
.mk-nav{background:var(--black);color:#fff;height:64px;display:flex;align-items:center;gap:26px;padding:0 40px;position:sticky;top:0;z-index:30}
.mk-nav .logo{font-size:26px}
.mk-nav .links{display:flex;gap:26px;font-size:14px;color:#D1D5DB;margin-left:26px}
.mk-nav .links a{display:inline-flex;align-items:center;gap:5px}
.mk-nav .links a.on{color:#fff;font-weight:600}
.mk-nav .right{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px}
.mk-nav.light{background:#fff;color:var(--text);border-bottom:1px solid var(--line)}
.mk-nav.light .links{color:var(--muted)} .mk-nav.light .links a.on{color:var(--text);border-bottom:2px solid var(--red);padding-bottom:4px}
.bracket{display:inline-flex;align-items:center;padding:4px 8px;position:relative}
.bracket::before,.bracket::after{content:"";position:absolute;top:0;bottom:0;width:10px;border:2px solid currentColor}
.bracket::before{left:0;border-right:0}.bracket::after{right:0;border-left:0}
.hero{background:radial-gradient(90% 70% at 85% 30%,#F1E7D2 0%,#FAFAFA 45%,#F5F5F7 100%);padding:56px 40px 40px;display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:center;position:relative;overflow:hidden}
.hero .eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold-dk);font-size:10.5px;letter-spacing:.22em;font-weight:600}
.hero .eyebrow::before{content:"";width:30px;height:1px;background:var(--gold)}
.hero h1{font-size:64px;line-height:1.02;letter-spacing:-.035em;margin:16px 0 18px;font-weight:800}
.hero h1 .r{color:var(--red);display:block}
.hero .sub{font-size:22px;color:#374151;max-width:24ch;line-height:1.35}
.hero .cta{display:flex;gap:14px;margin:26px 0 30px;flex-wrap:wrap}
.trust{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--text)}
.trust span{display:inline-flex;align-items:center;gap:8px} .trust svg{width:18px;height:18px;color:var(--ink)}
.hero .caps{position:absolute;font-size:9px;letter-spacing:.3em;color:var(--gold-dk);font-weight:600;line-height:2}
.mock{position:relative;min-height:520px}
.mock .ring{position:absolute;right:6%;top:2%;width:420px;height:420px;border-radius:50%;border:14px solid transparent;background:linear-gradient(#fff0,#fff0) padding-box,conic-gradient(from 200deg,#8F6F26,#E8C972,#B8933D,#F3DFA5,#8F6F26) border-box;opacity:.9}
.mock .stone{position:absolute;left:12%;bottom:0;width:70%;height:90px;background:linear-gradient(180deg,#1A1A1D,#050506);border-radius:8px 8px 4px 4px;transform:skewX(-8deg)}
.mock .orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F3DFA5,#B8933D 45%,#6E521A);box-shadow:0 20px 40px rgba(0,0,0,.25)}
.mock .dash{position:absolute;left:14%;top:14%;width:62%;background:#0F0F11;border-radius:14px;padding:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);color:#fff;font-size:11px;border:1px solid #222}
.dash .row1{display:flex;align-items:center;gap:10px;margin-bottom:10px}.dash .row1 .logo{font-size:15px}
.dash .body{display:grid;grid-template-columns:78px 1fr;gap:10px}
.dash .sb a{display:block;padding:5px 8px;border-radius:6px;color:#9CA3AF;font-size:10px}.dash .sb a.on{background:var(--red);color:#fff;font-weight:600}
.dash h3{font-size:15px;margin:0 0 2px}.dash .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.dash .st{background:#1A1A1D;border-radius:8px;padding:8px}.dash .st b{font-size:16px;display:block}.dash .st span{color:#9CA3AF;font-size:9.5px}.dash .st i{font-style:normal;color:#22C55E;font-size:9px;margin-left:4px}
.dash .two{display:grid;grid-template-columns:1.2fr 1fr;gap:8px}
.dash .pn{background:#1A1A1D;border-radius:8px;padding:8px}.dash .pn b{font-size:10.5px;display:block;margin-bottom:5px}
.dash .ev{display:flex;gap:8px;padding:3px 0;color:#D1D5DB;font-size:9.5px}.dash .ev em{font-style:normal;color:#6B7280;width:30px}
.dash .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:8.5px;text-align:center;color:#9CA3AF}.dash .cal b{color:#fff}.dash .cal .t{background:var(--red);color:#fff;border-radius:50%;font-weight:700}
.mock .face{position:absolute;left:0;top:44%;width:150px;background:#fff;border-radius:12px;padding:10px;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);font-size:10px;border:1px solid var(--line)}
.mock .face .cam{height:88px;border-radius:8px;background:radial-gradient(circle at 50% 40%,#E9D6C0,#8C6B55 60%,#3A2C25);position:relative;margin:6px 0}
.mock .face .cam::after{content:"";position:absolute;inset:14px 34px;border:2px solid #22C55E;border-radius:6px}
.mock .live{position:absolute;right:0;top:52%;width:170px;background:#fff;border-radius:12px;padding:10px;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);font-size:10px;border:1px solid var(--line)}
.mock .live .vid{height:80px;border-radius:8px;background:linear-gradient(135deg,#2B2B30,#111);position:relative;margin-bottom:6px}
.mock .live .vid i{position:absolute;top:6px;right:6px;background:var(--red);color:#fff;font-style:normal;font-size:8px;padding:1px 5px;border-radius:4px}
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 40px 50px;background:#F5F5F7}
.fc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;grid-template-columns:58px 1fr auto;gap:16px;align-items:start}
.fc .ic{width:58px;height:58px;border-radius:12px;display:grid;place-items:center;color:#fff}.fc .ic svg{width:26px;height:26px}
.fc .ic.red{background:var(--red)}.fc .ic.blk{background:var(--ink)}.fc .ic.gld{background:var(--gold)}
.fc h3{font-size:18px;margin:0 0 6px}.fc p{color:var(--muted);font-size:13.5px}
.fc .go{width:30px;height:30px;border-radius:50%;background:#F3F4F6;display:grid;place-items:center}.fc .go svg{width:14px;height:14px}
.fc .cap{grid-column:2/4;font-size:9px;letter-spacing:.25em;color:var(--gold-dk);font-weight:600;line-height:2;margin-top:8px;display:flex;align-items:center;gap:12px}
.fc .cap::after{content:"";width:40px;height:1px;background:var(--gold)}
.mk-foot{background:#0A0A0A;color:#9CA3AF;padding:26px 40px;display:flex;gap:22px;flex-wrap:wrap;align-items:center;font-size:12.5px}
.mk-foot .logo{font-size:20px}
/* V02 */
.p-hero{padding:40px;background:linear-gradient(90deg,#FAF7F0,#fff 60%);display:grid;grid-template-columns:5fr 7fr;gap:30px;align-items:center}
.p-hero h1{font-size:48px;line-height:1.05;letter-spacing:-.03em;margin:10px 0 14px;font-weight:800}
.p-hero .sub{font-size:17px;color:#374151;max-width:44ch}
.p-mock{background:#0F0F11;border-radius:14px;padding:16px;color:#fff;font-size:11px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);border:1px solid #222;position:relative}
.p-mock .vid{height:150px;border-radius:10px;background:linear-gradient(120deg,#2F2A26,#0F0F11 70%);display:grid;place-items:center;margin:10px 0;position:relative}
.p-mock .vid .pl{width:44px;height:44px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center}
.p-mock .bar{height:6px;border-radius:3px;background:#2A2A2E;overflow:hidden}.p-mock .bar i{display:block;width:75%;height:100%;background:var(--gold)}
.p-mock .hand{position:absolute;right:-10px;top:-30px;font-family:"Segoe Script",cursive;color:var(--gold-dk);font-size:15px;transform:rotate(-8deg);background:#fff;border-radius:8px;padding:6px 10px}
.f4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 40px 30px}
.f4 .c{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;gap:12px;align-items:flex-start}
.f4 .ic{width:46px;height:46px;border-radius:10px;background:var(--gold-soft);color:var(--gold-dk);display:grid;place-items:center;flex:none}.f4 .ic svg{width:22px;height:22px}
.f4 b{display:block;font-size:14px}.f4 span{font-size:12px;color:var(--muted)}
.sec2{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;padding:0 40px 40px;background:#F5F5F7;padding-top:30px}
.sec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.sec h2{font-size:28px;letter-spacing:-.02em;margin:4px 0 4px}
.ind{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.ind .i{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ind .i.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.ind .ph{height:110px;display:grid;place-items:center;color:#fff}.ind .ph svg{width:36px;height:36px}
.ind .i b{display:flex;align-items:center;gap:8px;padding:10px 12px 2px;font-size:14px}.ind .i b .go{margin-left:auto;width:22px;height:22px;border-radius:50%;background:#F3F4F6;display:grid;place-items:center}.ind .i b .go svg{width:11px;height:11px}
.ind .i p{padding:0 12px 12px;font-size:12px;color:var(--muted)}
.price{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.pc{border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px}
.pc.gold{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF7,#fff)}
.pc .big{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}.pc .big small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.pc ul{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px}
.pc li{display:flex;gap:8px;align-items:center}.pc li::before{content:"✓";width:16px;height:16px;border-radius:50%;background:var(--gold);color:#fff;font-size:10px;display:grid;place-items:center;flex:none}
.tog{display:inline-flex;background:#F3F4F6;border-radius:9px;padding:3px}.tog span{padding:6px 12px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer}.tog span.on{background:var(--gold);color:#fff}.tog small{font-size:10px;color:var(--muted);margin-left:4px}
@media (max-width:900px){
  .mk-nav{padding:0 16px;gap:12px}.mk-nav .links{display:none}
  .hero{grid-template-columns:1fr;padding:34px 18px 26px}.hero h1{font-size:42px}.hero .sub{font-size:18px}.hero .caps{display:none}
  .mock{min-height:0;height:auto;margin-top:10px}.mock .ring,.mock .orb,.mock .stone,.mock .face,.mock .live{display:none}.mock .dash{position:static;width:100%}
  .feat3,.f4{grid-template-columns:1fr;padding:0 16px 30px}
  .p-hero{grid-template-columns:1fr;padding:26px 16px}.p-hero h1{font-size:34px}
  .sec2{grid-template-columns:1fr;padding:20px 16px 30px}.ind{grid-template-columns:1fr 1fr}.price{grid-template-columns:1fr}
  .mk-foot{padding:20px 16px}
}
/* =================== Wizard organisasi (V03) =================== */
.tabs3{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.tabs3 label{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font-weight:600;font-size:14px;cursor:pointer;border-right:1px solid var(--line)}
.tabs3 label:last-child{border-right:0}.tabs3 label.on{background:var(--gold-soft);color:var(--gold-dk)}.tabs3 input{display:none}.tabs3 svg{width:18px;height:18px}
.ent{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ent label{border:1px solid var(--line);border-radius:12px;padding:18px 14px 14px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff}
.ent label.on{border-color:var(--gold);background:var(--gold-soft)}.ent input{display:none}.ent svg{width:26px;height:26px;color:var(--ink)}
.ent b{font-size:15px}.ent span{font-size:12px;color:var(--muted)}.ent .rb{width:16px;height:16px;border-radius:50%;border:1.5px solid #C9CBD1;margin-top:4px}.ent label.on .rb{border:5px solid var(--gold)}
.wz{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:4px 0}
.wz .s{display:flex;gap:10px;align-items:flex-start;position:relative}
.wz .n{width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--muted);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.wz .s.on .n,.wz .s.done .n{background:var(--gold);color:#fff}
.wz b{display:block;font-size:13px}.wz span{font-size:11px;color:var(--muted)}
.wz .s:not(:last-child)::after{content:"";position:absolute;left:34px;right:14px;top:12px;height:2px;background:var(--line)}.wz .s.done::after{background:var(--gold)!important}
.tree{background:var(--ink);color:#fff;border-radius:var(--r);padding:20px}
.tree .root{border:1px solid var(--gold);border-radius:12px;padding:16px;text-align:center;width:min(100%,220px);margin:14px auto 0;background:#151517}
.tree .root b{display:block;font-size:16px;margin-top:4px}.tree .root .pill{background:var(--gold);color:#fff;margin-top:8px}
.tree .kids{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;position:relative}
.tree .kids::before{content:"";position:absolute;left:25%;right:25%;top:-12px;height:1px;background:var(--gold)}
.tree .kid{border:1px solid #333;border-radius:12px;padding:14px;text-align:center;background:#151517;position:relative}
.tree .kid::before{content:"";position:absolute;left:50%;top:-12px;width:1px;height:12px;background:var(--gold)}
.tree .kid b{display:block;font-size:14px}.tree .kid span{font-size:11px;color:#9CA3AF}.tree .kid .pill{margin-top:8px;background:#2A2A2E;color:#D1D5DB}
.tree .empty{color:#9CA3AF;font-size:12px;text-align:center;margin-top:14px}
.modgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modgrid label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;background:#fff}
.modgrid label.on{border-color:var(--gold);background:var(--gold-soft)}.modgrid input{margin-top:3px;accent-color:var(--gold)}
.modgrid b{display:block;font-size:13px}.modgrid span{font-size:11.5px;color:var(--muted)}
.kidrow{display:grid;grid-template-columns:1fr 130px 36px;gap:8px;align-items:center}
.appr{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.appr .n{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px}.appr .n.g{background:var(--line);color:var(--muted)}
@media (max-width:900px){.ent{grid-template-columns:1fr 1fr}.wz{grid-template-columns:1fr 1fr;gap:12px}.wz .s::after{display:none}.tabs3 label{font-size:12px;padding:10px 6px}.modgrid{grid-template-columns:1fr}.tree .kids{grid-template-columns:1fr}.tree .kids::before{display:none}.kidrow{grid-template-columns:1fr 110px 36px}}
/* ukuran ikon default di konteks yang belum diatur */
.side-foot a svg{width:17px;height:17px;flex:none}
.search svg{width:16px;height:16px;flex:none}
.tree .root svg{width:28px;height:28px;color:var(--gold-text)}
.tree .kid svg{width:18px;height:18px;color:#9CA3AF}
.mock .ring{background:conic-gradient(from 200deg,#8F6F26,#E8C972,#B8933D,#F3DFA5,#8F6F26);border:0;-webkit-mask:radial-gradient(circle,transparent 63%,#000 64%);mask:radial-gradient(circle,transparent 63%,#000 64%)}
.mock .stone{height:70px;width:56%;left:20%}
.icon-btn svg{width:18px;height:18px}

.wiz-grid{grid-template-columns:minmax(0,3fr) minmax(300px,1.6fr)}
@media (max-width:1100px){.wiz-grid{grid-template-columns:1fr}}
@media (max-width:860px){.top .av{display:none}.hide-sm{display:none}#orgSw{max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.top{overflow:hidden}}

/* koreksi hero V01 */
.dash svg{width:14px;height:14px;color:#9CA3AF;flex:none}
.mock{min-height:600px}.mock .dash{top:6%;width:64%}.mock .dash .row1 span:nth-child(2){white-space:nowrap}
.mock .face{top:40%}.mock .live{top:48%}
/* koreksi stepper V03: label di atas garis */
.wz .s>div{position:relative;z-index:1;background:var(--bg);padding-right:10px}
.wz .s:not(:last-child)::after{z-index:0}

/* ---------- Logo gambar (brand-logo.png handoff v5: CYB merah #1273D4, FR + bracket) ---------- */
.logo-img{display:inline-block;height:26px;width:auto;vertical-align:middle}
.logo-img.lg{height:40px}.logo-img.sm{height:20px}.logo-img.xl{height:56px}
.side .brand .logo-img{height:28px}
.mk-nav .logo-img{height:28px}.mk-foot .logo-img{height:22px}
.login-card .logo-img{height:44px;margin:6px 0 4px}
.login-l .brand .logo-img{height:34px}
@media (max-width:860px){.login-card .logo-img{height:36px}.mk-nav .logo-img{height:24px}}

/* =====================================================================
   POLISH — glass, ambient light, motion (kontrak §18: M01 hero 600–900ms
   stagger 60ms · M02 route 160ms/≤8px · M03 drawer 220ms · M04 konfirmasi 180ms)
   ===================================================================== */
:root{--ease:cubic-bezier(.2,.8,.2,1);--glass:rgba(255,255,255,.78);--glass-line:rgba(255,255,255,.65);
  --shadow-1:0 1px 2px rgba(11,13,16,.04),0 10px 30px -18px rgba(11,13,16,.28);
  --shadow-2:0 2px 4px rgba(11,13,16,.05),0 24px 48px -24px rgba(11,13,16,.35)}
html{scroll-behavior:smooth}
body{background:
  radial-gradient(70% 45% at 100% 0%,rgba(188,145,72,.14),transparent 62%),
  radial-gradient(45% 35% at 0% 100%,rgba(255,23,31,.07),transparent 60%),
  var(--bg);background-attachment:fixed}
/* kaca pada permukaan terang */
.card,.check,.target,.dl-opt,.topic,.help,.result,.modgrid label,.legal label,.tiles4 .t,.ind .ic,.price .pc,.fc,.f4 .c{
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-color:var(--glass-line);box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.card:hover,.fc:hover,.price .pc:hover,.ind .ic:hover,.tiles4 .t:hover,.dl-opt:hover,.topic:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:rgba(188,145,72,.35)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%,rgba(188,145,72,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card{position:relative}
.check{background:rgba(255,255,255,.7)}
.check.ok{background:linear-gradient(135deg,rgba(230,244,236,.9),rgba(255,255,255,.7))}
.check.err{background:linear-gradient(135deg,rgba(255,240,241,.95),rgba(255,255,255,.7))}
/* kaca pada permukaan gelap */
.side{background:linear-gradient(180deg,rgba(17,19,24,.98),rgba(11,13,16,.98));border-right:1px solid rgba(255,255,255,.06);box-shadow:inset -1px 0 0 rgba(255,255,255,.03)}
.side::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 30% at 20% 0%,rgba(255,23,31,.12),transparent 70%),radial-gradient(50% 30% at 100% 100%,rgba(188,145,72,.10),transparent 70%)}
.side>*{position:relative}
.nav a{transition:background .16s var(--ease),color .16s,transform .16s var(--ease)}
.nav a:hover{transform:translateX(2px)}
.nav a.on{background:linear-gradient(90deg,rgba(255,23,31,.16),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.nav a.on::before{box-shadow:0 0 12px rgba(255,23,31,.7)}
.sys{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.top{background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(225,228,233,.8)}
.approve,.card.dark,.tree,.keyrow{background:linear-gradient(160deg,rgba(28,31,37,.96),rgba(11,13,16,.98));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.7)}
.approve{position:relative;overflow:hidden}
.approve::after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(188,145,72,.28),transparent 60%);pointer-events:none}
.card.dark::before{background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 40%,rgba(188,145,72,.35))}
/* tombol */
.btn{transition:transform .14s var(--ease),box-shadow .18s var(--ease),filter .14s,background .14s}
.btn:active{transform:scale(.98)}
.btn-red{box-shadow:0 8px 20px -10px rgba(255,23,31,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-red:hover{box-shadow:0 12px 26px -10px rgba(255,23,31,.8);filter:brightness(1.04)}
.btn-gold{position:relative;overflow:hidden;box-shadow:0 8px 20px -10px rgba(188,145,72,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-outline:hover{border-color:var(--gold);box-shadow:0 6px 16px -10px rgba(11,13,16,.3)}
.icon-btn{transition:background .14s,transform .14s var(--ease)}.icon-btn:active{transform:scale(.94)}
.in{transition:border-color .14s,box-shadow .18s var(--ease),background .14s;background:rgba(255,255,255,.9)}
.in:focus{box-shadow:0 0 0 4px rgba(188,145,72,.18),0 6px 18px -12px rgba(188,145,72,.6)}
.pill{transition:transform .14s var(--ease)}
.tbl tr{transition:background .12s}.tbl tbody tr:hover td,.tbl tr:hover td{background:rgba(188,145,72,.06)}
.modal{animation:pop .18s var(--ease)}.modal-bg{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* koreografi masuk (M02: 160ms, ≤8px; dipicu JS via .reveal) */
.reveal{opacity:0;transform:translateY(8px)}
.reveal.in{opacity:1;transform:none;transition:opacity .16s var(--ease),transform .16s var(--ease)}
/* hero publik (M01: 600–900ms, stagger 60ms, satu kali) */
.hero>div:not(.mock):not(.caps)>*,.p-hero>div:not(.p-mock)>*{opacity:0;animation:rise .6s var(--ease) forwards}
.hero>div>*:nth-child(1){animation-delay:.05s}.hero>div>*:nth-child(2){animation-delay:.11s}.hero>div>*:nth-child(3){animation-delay:.17s}.hero>div>*:nth-child(4){animation-delay:.23s}.hero>div>*:nth-child(5){animation-delay:.29s}
.p-hero>div>*:nth-child(1){animation-delay:.05s}.p-hero>div>*:nth-child(2){animation-delay:.11s}.p-hero>div>*:nth-child(3){animation-delay:.17s}.p-hero>div>*:nth-child(4){animation-delay:.23s}.p-hero>div>*:nth-child(5){animation-delay:.29s}
.mock,.p-mock{opacity:0;animation:rise .8s var(--ease) .25s forwards}
.mock .face{animation:float 6s ease-in-out 1.2s 3}.mock .live{animation:float 7s ease-in-out 1.6s 3}
.mock .ring{animation:spin 40s linear 1s 1}
.mock .orb{animation:float 8s ease-in-out 3}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.feat3 .fc,.f4 .c,.ind .ic,.price .pc{opacity:0;animation:rise .5s var(--ease) forwards}
.feat3 .fc:nth-child(1),.f4 .c:nth-child(1),.ind .ic:nth-child(1),.price .pc:nth-child(1){animation-delay:.35s}
.feat3 .fc:nth-child(2),.f4 .c:nth-child(2),.ind .ic:nth-child(2),.price .pc:nth-child(2){animation-delay:.41s}
.feat3 .fc:nth-child(3),.f4 .c:nth-child(3),.ind .ic:nth-child(3){animation-delay:.47s}
.f4 .c:nth-child(4),.ind .ic:nth-child(4){animation-delay:.53s}
/* login */
.login-r{background:radial-gradient(60% 50% at 80% 20%,rgba(188,145,72,.16),transparent 60%),radial-gradient(40% 40% at 10% 90%,rgba(255,23,31,.08),transparent 60%),var(--bg)}
.login-card{background:rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-color:rgba(255,255,255,.8);box-shadow:var(--shadow-2);animation:pop .4s var(--ease)}
.login-l .brand,.login-l h2,.login-l p,.login-l .feat,.login-l .quote{opacity:0;animation:rise .6s var(--ease) forwards}
.login-l h2{animation-delay:.08s}.login-l p{animation-delay:.14s}.login-l .feat:nth-of-type(1){animation-delay:.2s}.login-l .feat:nth-of-type(2){animation-delay:.26s}.login-l .feat:nth-of-type(3){animation-delay:.32s}.login-l .quote{animation-delay:.4s}
/* banner beranda tenant (V23) */
.hero-band{position:relative;overflow:hidden;border-radius:16px;padding:26px 28px;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:6px;
  background:linear-gradient(120deg,#1B1E24 0%,#0B0D10 55%,#141418 100%);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-2)}
.hero-band::before{content:"";position:absolute;right:-60px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(188,145,72,.35),transparent 62%)}
.hero-band::after{content:"";position:absolute;left:30%;bottom:-140px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,23,31,.22),transparent 62%)}
.hero-band>*{position:relative}
.hero-band .d{font-size:12.5px;color:#C3C7CF}.hero-band h1{font-size:30px;color:#fff}
.hero-band .m{color:#C3C7CF;font-size:14px;max-width:60ch}
.hero-band .tag{position:absolute;right:26px;top:22px;text-align:right;font-size:11px;line-height:1.5;color:#E5C88A;font-weight:600}
.hero-band .cta{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi .card{display:flex;gap:14px;align-items:center;padding:18px 20px}
.kpi .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}
.kpi .ic svg{width:22px;height:22px}
.kpi .ic.red{background:linear-gradient(160deg,#1273D4,#B5121A)}.kpi .ic.ink{background:linear-gradient(160deg,#2A2E36,#0B0D10)}.kpi .ic.gold{background:linear-gradient(160deg,#D3AE63,#8F6F26)}.kpi .ic.green{background:linear-gradient(160deg,#2FA36F,#14794F)}
.kpi .v{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.05}.kpi .l{font-size:12.5px;color:var(--muted)}.kpi .s{font-size:11px;color:var(--muted-2)}
.mod-tile{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--glass-line);background:rgba(255,255,255,.7);transition:transform .16s var(--ease),box-shadow .16s,border-color .16s}
.mod-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-1);border-color:rgba(188,145,72,.4)}
.mod-tile .mi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:#EEF0F3;color:var(--muted)}
.mod-tile.on .mi{background:linear-gradient(160deg,#D3AE63,#8F6F26);color:#fff;box-shadow:0 6px 14px -8px rgba(188,145,72,.9)}
.mod-tile .mi svg{width:18px;height:18px}.mod-tile b{display:block;font-size:13px}.mod-tile span{font-size:11.5px;color:var(--muted)}
.mod-tile .st{margin-left:auto}
.org-tree .node{transition:transform .16s var(--ease)}.org-tree .node:hover{transform:translateY(-2px)}
.tree .node svg{width:22px;height:22px}
@media (max-width:1100px){.kpi{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.kpi{grid-template-columns:1fr 1fr;gap:10px}.kpi .card{padding:14px}.kpi .v{font-size:22px}.hero-band{padding:20px}.hero-band h1{font-size:22px}.hero-band .tag{display:none}
  .card,.check,.top{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero>div>*,.p-hero>div>*,.mock>*,.mock,.p-mock,.feat3 .fc,.f4 .c,.ind .ic,.price .pc,.login-l .brand,.login-l h2,.login-l p,.login-l .feat,.login-l .quote{opacity:1;transform:none}
  .card,.check,.top,.login-card,.modal-bg{backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* ---------- Mobile pass (HP 360–430px) ---------- */
.m-logo{display:none;align-items:center}
@media (max-width:860px){
  html,body{overflow-x:hidden}
  .m-logo{display:inline-flex}
  .top{gap:6px;padding:0 10px}.top .btn-gold.btn-sm span,.top .hide-sm{display:none}.top .btn-gold.btn-sm{padding:8px 10px}
  #orgSw{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;padding:6px 6px}
  .top .m-logo img{height:18px}
  .content{padding:12px;gap:12px}
  .page-head{gap:8px}.page-head .right{display:none}
  .card{padding:14px;border-radius:12px}
  .stepper{overflow:visible;gap:0}.step{min-width:0;flex:1}.step .n{width:24px;height:24px;font-size:11px}.step .t{font-size:10.5px}.step:not(:last-child)::after{top:12px}
  .approve{padding:16px}.kv b{font-size:14px}
  .login.v04,.login{grid-template-columns:1fr}
  .login-l{padding:22px 18px 18px;min-height:0;display:flex;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
  .login-l .brand{width:100%}
  .login-l h2{margin:6px 0 0;font-size:19px;line-height:1.25;width:100%}
  .login-l::after{display:none}
  .login-r{padding:14px 12px 40px;align-items:start}
  .login-card{padding:22px 18px;gap:14px}.login-card .lead{font-size:14px}
  .login-top{padding:0 0 10px;font-size:12px}
  .p-hero{grid-template-columns:1fr;padding:24px 16px}.p-hero h1{font-size:32px}.p-mock{min-width:0}
  .sec2,.f4,.ind,.price{grid-template-columns:1fr}
  .mk-foot span{margin-left:0!important;width:100%}
  .hero-band{padding:18px}.hero-band h1{font-size:22px}
  .kpi{grid-template-columns:1fr 1fr;gap:10px}
  .tbl th,.tbl td{padding:8px}
  .modgrid{grid-template-columns:1fr}
  .grid.g-2-1,.grid.g-3-1,.grid.g-3,.grid.g-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .wz{grid-template-columns:1fr 1fr;gap:8px}.wz .s::after{display:none}
  .legal{grid-template-columns:1fr 1fr;gap:8px}.legal label{padding:12px 8px}
  .kind-tabs{grid-template-columns:1fr}
  .tree .kids{flex-direction:column;align-items:center}
  .btn-lg{padding:12px 16px;font-size:14px}
}
@media (max-width:860px){.mk-nav{padding:0 12px}.mk-nav .right{gap:10px}.mk-nav .right .btn{padding:8px 12px;font-size:13px}.mk-nav .right .btn svg{display:none}.p-mock .hand{display:none}.mk-nav .logo-img{height:22px}}
/* ---------- Wizard V03: stepper di atas, bisa diklik ---------- */
.wz.card{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:14px 16px 12px;position:relative;overflow:visible}
.wz.card .wzline{position:absolute;left:32px;right:32px;top:29px;height:2px;background:var(--line);z-index:0;border-radius:2px}
.wz.card .wzline i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#D3AE63);transition:width .3s var(--ease);box-shadow:0 0 10px rgba(188,145,72,.6)}
.wz.card .s{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative;z-index:1;cursor:default;border-radius:10px;padding:0 4px;transition:transform .16s var(--ease)}
.wz.card .s::after{display:none}
.wz.card .s .n{width:30px;height:30px;font-size:12px;background:#fff;border:1.5px solid var(--line);color:var(--muted);box-shadow:0 1px 2px rgba(11,13,16,.05);transition:all .18s var(--ease)}
.wz.card .s>div{background:transparent;padding:0}
.wz.card .s b{font-size:13px;color:var(--muted)}.wz.card .s span{font-size:11px;color:var(--muted-2)}
.wz.card .s.open{cursor:pointer}.wz.card .s.open:hover{transform:translateY(-1px)}.wz.card .s.open:hover .n{border-color:var(--gold)}
.wz.card .s.open b{color:var(--text)}
.wz.card .s.on .n{background:linear-gradient(160deg,#D3AE63,#8F6F26);border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(188,145,72,.9),0 0 0 4px rgba(188,145,72,.15)}
.wz.card .s.on b{color:var(--ink);font-weight:700}
.wz.card .s.done .n{background:var(--ink);border-color:var(--ink);color:#fff;font-size:0}
.wz.card .s.done .n::before{content:"✓";font-size:13px}
.wz.card .s:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* tabs & kartu badan usaha */
.tabs3{padding:4px;gap:4px;border-radius:12px;background:rgba(255,255,255,.75);backdrop-filter:blur(10px)}
.tabs3 label{border-right:0;border-radius:9px;transition:background .16s,color .16s}
.tabs3 label.on{background:linear-gradient(160deg,#FBF1DD,#F5E6C4);color:var(--gold-dk);box-shadow:inset 0 0 0 1px #EBD9B0}
.ent label{position:relative;padding:20px 12px 16px;transition:transform .16s var(--ease),box-shadow .16s,border-color .16s;box-shadow:var(--shadow-1)}
.ent label:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:rgba(188,145,72,.45)}
.ent label svg{width:22px;height:22px;box-sizing:content-box;padding:10px;border-radius:50%;background:#F0F1F3;color:var(--ink);transition:background .16s,color .16s}
.ent label.on svg{background:linear-gradient(160deg,#D3AE63,#8F6F26);color:#fff;box-shadow:0 8px 18px -8px rgba(188,145,72,.9)}
.ent label.on{background:linear-gradient(180deg,rgba(251,244,227,.95),rgba(255,255,255,.8));border-color:var(--gold);box-shadow:0 0 0 3px rgba(188,145,72,.14),var(--shadow-1)}
.ent label.on::after{content:"✓";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#fff;font-size:11px;display:grid;place-items:center}
@media (max-width:860px){
  .wz.card{grid-template-columns:repeat(4,1fr);padding:12px 8px 10px;gap:2px}
  .wz.card .wzline{left:14%;right:14%;top:26px}
  .wz.card .s .n{width:26px;height:26px;font-size:11px}.wz.card .s b{font-size:11px}.wz.card .s span{display:none}
  .ent{grid-template-columns:1fr 1fr;gap:10px}.ent label{padding:16px 10px 12px}.ent b{font-size:14px}.ent span{font-size:11.5px}
  .tabs3{grid-template-columns:repeat(3,1fr)}.tabs3 label{padding:10px 6px;font-size:12.5px;gap:5px}.tabs3 svg{width:15px;height:15px}
}
/* ---------- Cek ketersediaan live ---------- */
.hint.lv{min-height:16px;transition:color .14s}.hint.lv.ok{color:var(--green)}.hint.lv.err{color:var(--red-dk)}
.hint.lv a{color:var(--gold-dk);font-weight:600;text-decoration:underline}
.in.is-ok{border-color:#7FC7A1;box-shadow:0 0 0 3px rgba(20,121,79,.12)}.in.is-err{border-color:#F0A0A4;box-shadow:0 0 0 3px rgba(255,23,31,.10)}
/* ---------- Typeahead ---------- */
.ta{position:relative}
.ta-list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);z-index:40;display:none;overflow:hidden;max-height:320px;overflow-y:auto}
.ta-list.open{display:block;animation:pop .16s var(--ease)}
.ta-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.ta-item:last-child{border-bottom:0}.ta-item:hover{background:var(--gold-soft)}
.ta-item b{display:block;font-size:13px}.ta-item span{font-size:11.5px;color:var(--muted)}.ta-item .pill{margin-left:auto}
.ta-empty{padding:12px 14px;font-size:12.5px;color:var(--muted)}
.linkrow{display:flex;align-items:center;gap:10px;border:1px solid var(--glass-line);background:rgba(255,255,255,.7);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-1)}
.linkrow b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.linkrow span{font-size:11.5px;color:var(--muted)}
.linkrow .pill{margin-left:auto;white-space:normal;text-align:center}
@media (max-width:860px){.linkrow{flex-wrap:wrap}.linkrow .pill{margin-left:42px;font-size:11px}}
/* portal dropdown */
.dd-portal{position:fixed!important;z-index:1000!important;overflow-y:auto;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);animation:pop .16s var(--ease);right:auto!important}
.dd-portal.ta-list{top:auto}
/* ---------- Panel brand auth: tagline & header HP satu baris ---------- */
.login-l .brand .tag span{display:block}
.login-l .brand-link{display:inline-flex;align-items:center}
@media (max-width:860px){
  .login,.login.v04{grid-template-rows:auto 1fr;align-content:start}
  .login-l{padding:12px 16px;flex-direction:row;align-items:center;gap:12px;min-height:0;background:#0B0D10}
  .login-l .brand{width:auto;flex:1;display:flex;align-items:center;gap:12px;min-width:0}
  .login-l .brand .logo-img{height:26px}
  .login-l .brand .tag{border-left:1px solid #3A3A3F;padding-left:12px;font-size:10.5px;line-height:1.35;color:#C4C7CE}
  .login-l .brand .tag span:nth-child(2)::after{content:"\A";white-space:pre}
  .login-l .brand .tag span{display:inline}.login-l .brand .tag span+span::before{content:" · ";color:#6B7280}
  .login-l h2{display:none}
  .login-r{padding-top:10px}
  .login-top{padding:8px 0 8px}
}
/* segmented control */
.seg{display:inline-flex;background:var(--bg);border-radius:10px;padding:3px;font-size:13px;gap:2px}
.seg span{padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:600;transition:background .14s,color .14s}
.seg span.on{background:linear-gradient(180deg,#C9A24B,#A07A33);color:#fff;box-shadow:0 4px 10px -6px rgba(188,145,72,.9)}
#draftBar svg{width:14px;height:14px}
.matrix tr.hi td{background:var(--gold-soft)}
/* koreksi overflow: anak grid tidak boleh melebarkan kolom; tabel lebar digulir di dalam kartunya */
.grid>*,.stack>*{min-width:0}
.card{max-width:100%}
.tbl-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.tbl-wrap .tbl{min-width:640px}
.matrix{min-width:760px}
@media (max-width:860px){.tabs{-webkit-overflow-scrolling:touch}.content{overflow-x:hidden}.kv{grid-template-columns:1fr}.approve,.card.dark{max-width:100%}}
/* ===================== FaceCapture — pengambilan wajah terpandu ===================== */
.fc{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.fc-stage{position:relative;width:100%;max-width:400px;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#0B0D10;box-shadow:var(--shadow-2);isolation:isolate}
.fc-video,.fc-dots{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.fc-dots{z-index:2;pointer-events:none;opacity:.85}
.fc-mask{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 38% 44% at 50% 47%,transparent 96%,rgba(11,13,16,.55) 100%);pointer-events:none}
.fc-ring{position:absolute;left:50%;top:47%;width:min(84%,330px);aspect-ratio:1;transform:translate(-50%,-50%) scale(1,1.18) rotate(-90deg);z-index:4;pointer-events:none;filter:drop-shadow(0 0 10px rgba(211,174,99,.45))}
.fc-ring circle{fill:none;stroke-linecap:round}
.fc-ring-bg{stroke:rgba(255,255,255,.18);stroke-width:2.2}
.fc-ring-seg{stroke:#D3AE63;stroke-width:3;transition:stroke-dashoffset .5s var(--ease)}
.fc-ring-hold{stroke:#22C55E;stroke-width:2;transition:stroke-dashoffset .12s linear;opacity:.9}
.fc-live .fc-ring-bg{animation:fcpulse 2.4s ease-in-out infinite}
@keyframes fcpulse{0%,100%{stroke:rgba(255,255,255,.18)}50%{stroke:rgba(255,255,255,.45)}}
.fc-arrow{position:absolute;z-index:5;pointer-events:none;opacity:0;width:64px;height:64px;transition:opacity .2s}
.fc-arrow::before{content:"";position:absolute;inset:0;border-left:6px solid #D3AE63;border-top:6px solid #D3AE63;width:28px;height:28px;margin:auto;border-radius:3px;box-shadow:-6px -6px 14px rgba(211,174,99,.35)}
.fc-arrow.show{opacity:1}
.fc-arrow.left{left:6%;top:42%}.fc-arrow.left::before{transform:rotate(-45deg);animation:fcL 1s ease-in-out infinite}
.fc-arrow.right{right:6%;top:42%}.fc-arrow.right::before{transform:rotate(135deg);animation:fcR 1s ease-in-out infinite}
.fc-arrow.up{left:50%;top:5%;margin-left:-32px}.fc-arrow.up::before{transform:rotate(45deg);animation:fcU 1s ease-in-out infinite}
.fc-arrow.down{left:50%;bottom:16%;margin-left:-32px}.fc-arrow.down::before{transform:rotate(225deg);animation:fcD 1s ease-in-out infinite}
.fc-arrow.near{left:50%;top:47%;width:120px;height:120px;margin:-60px 0 0 -60px}.fc-arrow.near::before{border:3px solid #D3AE63;width:100%;height:100%;border-radius:50%;animation:fcN 1.2s ease-out infinite;box-shadow:none}
@keyframes fcL{0%,100%{translate:0 0}50%{translate:-12px 0}}@keyframes fcR{0%,100%{translate:0 0}50%{translate:12px 0}}
@keyframes fcU{0%,100%{translate:0 0}50%{translate:0 -12px}}@keyframes fcD{0%,100%{translate:0 0}50%{translate:0 12px}}
@keyframes fcN{0%{transform:scale(1.35);opacity:0}40%{opacity:1}100%{transform:scale(.7);opacity:0}}
.fc-count{position:absolute;inset:0;z-index:6;display:grid;place-items:center;font-size:96px;font-weight:800;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.6);opacity:0;transform:scale(1.6);pointer-events:none;transition:opacity .15s,transform .15s}
.fc-count.show{opacity:1;transform:scale(1)}
.fc-flash{position:absolute;inset:0;z-index:7;background:#fff;opacity:0;pointer-events:none}.fc-flash.go{animation:fcflash .26s ease-out}
@keyframes fcflash{0%{opacity:.95}100%{opacity:0}}
.fc-check{position:absolute;inset:0;z-index:8;display:grid;place-items:center;font-size:120px;color:#22C55E;text-shadow:0 0 40px rgba(34,197,94,.8);opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.fc-check.show{opacity:1;transform:scale(1)}
.fc-hint{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:16px 14px 14px;background:linear-gradient(transparent,rgba(11,13,16,.85));color:#fff;text-align:center}
.fc-hint b{display:block;font-size:16px}.fc-hint span{font-size:12px;color:#C3C7CF}
.fc-start{position:absolute;left:50%;top:47%;z-index:9;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:0;background:radial-gradient(circle at 30% 30%,#E5C88A,#BC9148 60%,#8F6F26);color:#fff;font-weight:800;font-size:17px;cursor:pointer;box-shadow:0 18px 40px -12px rgba(188,145,72,.9),inset 0 1px 0 rgba(255,255,255,.4);display:grid;place-items:center;transition:transform .15s var(--ease)}
.fc-start:active{transform:scale(.96)}
.fc-start-ring{position:absolute;inset:-9px;border-radius:50%;border:3px solid rgba(211,174,99,.65);border-top-color:transparent;animation:fcspin 1.6s linear infinite}
.fc-start-lbl{position:relative}
.fc-start.loading .fc-start-ring{border-color:rgba(255,255,255,.35);border-top-color:#fff;animation-duration:.7s}
@keyframes fcspin{to{transform:rotate(360deg)}}
.fc-thumbs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:0}
.fc-thumbs img{width:48px;height:64px;object-fit:cover;border-radius:8px;border:2px solid var(--line);transform:scaleX(-1);animation:pop .3s var(--ease)}
.fc-thumbs img.bad{border-color:var(--red);opacity:.55}
@media (prefers-reduced-motion:reduce){.fc-start-ring,.fc-arrow::before,.fc-live .fc-ring-bg{animation:none}}
.fc-spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:fcspin .8s linear infinite;vertical-align:-2px;margin-right:6px}
.fc-prompt{position:absolute;left:12px;right:12px;bottom:14px;z-index:9;background:rgba(17,19,24,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px 16px 16px;color:#fff;text-align:center;box-shadow:0 30px 60px -24px rgba(0,0,0,.8);animation:rise .35s var(--ease);display:flex;flex-direction:column;gap:6px;align-items:center}
.fc-prompt.out{animation:fcout .22s var(--ease) forwards}@keyframes fcout{to{opacity:0;transform:translateY(12px)}}
.fc-prompt-ic{font-size:40px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.fc-prompt b{font-size:17px}.fc-prompt span{font-size:12.5px;color:#C3C7CF}
.fc-prompt-det{font-size:12px;color:#9CA3AF;min-height:16px;margin-top:2px}.fc-prompt-det.ok{color:#22C55E}.fc-prompt-det.warn{color:#F59E0B}
.fc-prompt-btn{margin-top:8px;padding:13px 22px;border:0;border-radius:14px;background:linear-gradient(180deg,#D3AE63,#A07A33);color:#fff;font-weight:800;font-size:15px;box-shadow:0 12px 26px -10px rgba(188,145,72,.9),inset 0 1px 0 rgba(255,255,255,.35);width:100%;cursor:pointer;transition:transform .12s var(--ease),filter .12s}
.fc-prompt-btn:active{transform:scale(.97)}.fc-prompt-btn:hover{filter:brightness(1.05)}
/* lonceng notifikasi */
.bell-dd{width:340px;max-width:92vw;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-2);overflow:hidden}
.bell-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.bell-list{max-height:min(60vh,420px);overflow-y:auto}
.nitem{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;transition:background .12s}
.nitem:hover{background:var(--gold-soft)}.nitem.unread{background:rgba(188,145,72,.08)}
.nitem b{display:block;font-size:13px}.nitem .ni{width:32px;height:32px;border-radius:50%;background:#F0F1F3;display:grid;place-items:center;color:var(--ink);flex:none}
.nitem.unread .ni{background:linear-gradient(160deg,#D3AE63,#8F6F26);color:#fff}
.nitem .ni svg{width:15px;height:15px}
.bell-ft{display:block;text-align:center;padding:10px;font-size:12.5px;font-weight:600;color:var(--gold-dk);border-top:1px solid var(--line)}
/* mode app (WebView CYBFRApp): sembunyikan hal yang tidak relevan */
body.is-app .m-logo{pointer-events:none}body.is-app .pnav,body.is-app .mk-nav{display:none}
/* ---------- Pengaman tata letak desktop (laptop ≥ 861px): aturan eksplisit di akhir berkas ---------- */
@media (min-width:861px){
  .shell{display:grid!important;grid-template-columns:214px minmax(0,1fr)!important;align-items:start}
  .shell>.side{grid-column:1;position:sticky;top:0;height:100vh;width:auto;transform:none!important;z-index:30}
  .shell>.main{grid-column:2;min-width:0}
  .side-bg,.burger,.m-logo{display:none!important}
  .top{position:sticky;top:0}
  .content{max-width:1440px}
}
@media (min-width:1600px){.content{padding:28px 36px}}

/* ===== Tema showcase: tipografi display serif, tombol & header marketing ===== */
.page-head h1,.hello,.login-l h2,.p-hero h1,.hero h1,.ld-hero h1,.modal h2,.card .card-h h2{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.01em}
.page-head h1{font-size:30px}.card .card-h h2{font-size:17px}
.btn{border-radius:10px;letter-spacing:.01em}.btn-lg{min-height:50px;padding:14px 22px}
.mk-nav.light,.mk-nav{height:86px;background:#ffffffed;backdrop-filter:blur(16px);color:var(--ink);border-bottom:1px solid #ededf180;padding-inline:max(24px,calc((100% - 1264px)/2))}
.mk-nav .links a{color:var(--ink);font-weight:600;font-size:14px}.mk-nav .links a.on{color:var(--red)}.mk-nav .right a{color:var(--ink)}
.mk-nav img.logo-img{height:26px}
.mk-foot{background:var(--ink)}
.mk .p-hero,.mk .hero{background:#fff;color:var(--ink)}
.mk-nav .right a.btn{color:#fff}.mk-nav .right a.btn:hover{color:#fff}
/* profil bisnis (wizard) */
.profgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.prof{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}.prof input{position:absolute;opacity:0;pointer-events:none}.prof .pi{width:30px;height:30px;border-radius:8px;background:#F0F1F3;display:grid;place-items:center}.prof.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 2px rgba(189,151,79,.25)}.prof.on .pi{background:linear-gradient(160deg,#D3AE63,#8F6F26);color:#fff}.prof b{font-size:13px}@media(max-width:640px){.profgrid{grid-template-columns:1fr 1fr}}
/* ===== KPI: anti-overflow di HP ===== */
.kpi .card{min-width:0}.kpi .card>div:last-child{min-width:0}.kpi .v{overflow-wrap:anywhere;font-size:clamp(18px,2.2vw,28px)}
@media (max-width:560px){.kpi{grid-template-columns:1fr;gap:8px}.kpi .card{padding:12px 14px}.kpi .v{font-size:22px}.kpi .ic{width:40px;height:40px}}
/* ===== Keuangan gaya bank ===== */
.fin-hero{background:linear-gradient(135deg,#0B0D10,#23262D 60%,#3A2F1C);color:#fff;border-radius:20px;padding:22px;position:relative;overflow:hidden}
.fin-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(189,151,79,.45),transparent 65%);filter:blur(10px)}
.fin-hero .lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#C3C7CE}.fin-hero .total{font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-.02em;margin:4px 0 2px;overflow-wrap:anywhere}.fin-hero .meta{font-size:12px;color:#9CA3AF}
.fin-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;position:relative}
.fin-actions a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:13px;text-align:center;transition:background .15s,transform .15s}
.fin-actions a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}.fin-actions .ai{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:800}
.fin-actions .ai.in{background:var(--green)}.fin-actions .ai.out{background:var(--red)}.fin-actions .ai.mut{background:linear-gradient(160deg,#D3AE63,#8F6F26)}
.acc-scroll{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.acc-card{flex:0 0 min(78vw,260px);scroll-snap-align:start;border-radius:16px;padding:14px 16px;color:#fff;position:relative;overflow:hidden;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.acc-card.bank{background:linear-gradient(135deg,#1E3A5F,#0B1A2B)}.acc-card.cash{background:linear-gradient(135deg,#14794F,#0A3D28)}.acc-card.petty{background:linear-gradient(135deg,#7C5F1A,#3A2C0C)}.acc-card.clearing{background:linear-gradient(135deg,#4B5563,#111827)}
.acc-card .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}.acc-card .n{font-weight:700;font-size:14px}.acc-card .no{font-family:ui-monospace,monospace;font-size:12px;color:rgba(255,255,255,.75);margin-top:2px}.acc-card .b{font-size:20px;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}.acc-card .b.neg{color:#FCA5A5}
.acc-card::after{content:"";position:absolute;right:-30px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}
.acc-card.add{background:#fff;color:var(--muted);border:1px dashed var(--line);justify-content:center;align-items:center;font-weight:600}
.money-in{position:relative;display:block}.money-in>input,.money-in .in{padding-left:46px!important;font-family:ui-monospace,monospace}.money-in .in{font-size:22px;font-weight:700}.money-in input::placeholder{font-weight:400;font-size:13px;font-family:inherit}.money-in::before{content:"Rp";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted)}
.prev{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}.prev .pc{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;min-width:0}.prev .pc b{display:block;font-size:13px}.prev .pc .now{font-size:12px;color:var(--muted)}.prev .pc .after{font-family:ui-monospace,monospace;font-weight:700;overflow-wrap:anywhere}.prev .pc .after.neg{color:var(--red)}
/* tabel → kartu di HP */
@media (max-width:640px){.tbl-cards .tbl-wrap .tbl{min-width:0;width:100%}.tbl-cards .tbl thead,.tbl-cards .tbl tr:first-child:has(th){display:none}.tbl-cards .tbl tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#fff}.tbl-cards .tbl td{display:block;border:0;padding:0;font-size:13px}.tbl-cards .tbl td[data-l]::before{content:attr(data-l) " ";color:var(--muted);font-size:11px}.tbl-cards .tbl td.amt{grid-column:2;grid-row:1/3;align-self:center;text-align:right;font-weight:700}.tbl-cards .tbl td.hide-m{display:none}.tbl-cards .tbl td.full{grid-column:1/-1}}
.stmt tr.open td{background:var(--gold-soft)}
/* ===== .tabs global: pil bergeser ===== */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px;margin:0 0 14px;border-radius:14px;background:rgba(255,255,255,.75);border:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}
.tabs>button,.tabs>a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .16s,color .16s;text-decoration:none}
.tabs>button svg,.tabs>a svg{width:15px;height:15px}.tabs>button:hover,.tabs>a:hover{color:var(--ink);background:#F0F1F3}
.tabs>button.on,.tabs>a.on{background:linear-gradient(160deg,#FBF1DD,#F5E6C4);color:var(--gold-dk);box-shadow:inset 0 0 0 1px #EBD9B0}
/* daftar baris ala bank di pengaturan */
.rowlist{display:flex;flex-direction:column;gap:8px}.rowitem{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}.rowitem .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;font-weight:800}.rowitem .body{flex:1;min-width:0}.rowitem .body b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rowitem .body span{font-size:12px;color:var(--muted);display:block}.rowitem .amt{font-family:ui-monospace,monospace;font-weight:700;white-space:nowrap}.rowitem .acts{display:flex;gap:4px;flex:none}
.rowitem.sub{margin-left:28px;border-style:dashed}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;background:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.chip.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-dk)}.chip i{width:9px;height:9px;border-radius:3px;display:inline-block}
.f label i{color:var(--red);font-style:normal}
.rowitem .body{flex:1 1 160px}@media (max-width:560px){.rowitem{flex-wrap:wrap;row-gap:6px}.rowitem .body{flex:1 1 55%}.rowitem .acts{margin-left:auto}.rowitem .amt{flex-basis:100%;padding-left:52px;font-size:15px}}
/* ===== Panduan interaktif ===== */
.gd-ov{position:fixed;inset:0;z-index:9000;opacity:0;transition:opacity .25s var(--ease);pointer-events:none}.gd-ov.on{opacity:1;pointer-events:auto}
.gd-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(11,13,16,.62),0 0 0 3px var(--gold),0 0 40px rgba(189,151,79,.6);transition:all .35s var(--ease);pointer-events:none;animation:gdpulse 2s ease-in-out infinite}
@keyframes gdpulse{50%{box-shadow:0 0 0 9999px rgba(11,13,16,.62),0 0 0 6px rgba(189,151,79,.6),0 0 60px rgba(189,151,79,.8)}}
.gd-tip{position:fixed;background:#fff;color:var(--ink);border-radius:16px;padding:16px 18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transition:top .35s var(--ease),left .35s var(--ease);animation:gdin .35s var(--ease)}
@keyframes gdin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gd-tip::before{content:"";position:absolute;width:14px;height:14px;background:#fff;left:50%;margin-left:-7px;transform:rotate(45deg)}.gd-tip[data-pos="bottom"]::before{top:-7px}.gd-tip[data-pos="top"]::before{bottom:-7px}
.gd-step{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dk);font-weight:700}.gd-title{margin:4px 0 6px;font-size:17px;font-family:Georgia,serif}.gd-text{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}.gd-text b{color:var(--ink)}
.gd-ex{margin-top:10px;background:var(--gold-soft);border:1px dashed var(--gold);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}.gd-exl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dk);font-weight:700}.gd-exv{font-family:ui-monospace,monospace;font-size:13px;color:var(--ink)}
.gd-nav{display:flex;align-items:center;gap:8px;margin-top:14px}.gd-nav button{border:0;border-radius:10px;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer}.gd-skip{background:transparent;color:var(--muted)}.gd-prev{background:#F0F1F3;color:var(--ink)}.gd-next{background:linear-gradient(180deg,#D3AE63,#A07A33);color:#fff;margin-left:auto}
.gd-dots{display:flex;gap:4px;margin-left:auto}.gd-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.gd-dots i.on{background:var(--gold);width:16px;border-radius:3px}.gd-dots i.done{background:var(--gold-dk)}
.gd-typing{box-shadow:0 0 0 3px rgba(189,151,79,.35)!important;border-color:var(--gold)!important}
.gd-btn{position:relative}.gd-btn .badge{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--red)}
/* ===== sidebar: pengguna & keluar di atas, menu bisa digulir ===== */
.side{overflow:hidden}.side .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin}.side .nav::-webkit-scrollbar{width:6px}.side .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.side-user.top{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin:6px 0 4px}.side-user.top .av{width:36px;height:36px;flex:none}.side-user.top .icon-btn{width:32px;height:32px;flex:none}
.side-quick{display:flex;gap:4px;margin-bottom:6px}.side-quick a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:10px;font-size:12px;color:#D1D5DB;background:rgba(255,255,255,.04);position:relative;white-space:nowrap}.side-quick a svg{width:15px;height:15px}.side-quick a:hover{background:rgba(255,255,255,.09);color:#fff}.side-quick .badge{position:absolute;top:2px;right:6px;background:var(--gold);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:inline-grid;place-items:center;padding:0 4px}.side-quick .badge.red{background:var(--red)}
.side-foot{margin-top:6px;border-top:1px solid #222;padding-top:8px;flex:none}
@media (max-width:860px){.side{height:100dvh;padding-bottom:max(14px,env(safe-area-inset-bottom))}}
.side-user.top{flex-wrap:wrap}.side-user.top>div:not(.acts){flex:1 1 110px}.side-user.top .acts{display:flex;gap:2px;margin-left:auto}
/* ===== Kamera browser ===== */
.cam-modal{width:min(96vw,560px)}.cam-view{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}.cam-view video,.cam-view img{width:100%;height:100%;object-fit:cover;display:block}.cam-guide{position:absolute;inset:0;pointer-events:none}.cam-guide.card::before{content:"";position:absolute;left:10%;right:10%;top:22%;bottom:22%;border:2px dashed rgba(255,255,255,.85);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}.cam-guide.doc::before{content:"";position:absolute;left:8%;right:8%;top:8%;bottom:8%;border:2px dashed rgba(255,255,255,.85);border-radius:8px}.cam-guide.none::before{display:none}.cam-shutter{font-size:16px;padding:12px 22px;border-radius:999px}
/* ===== Motion & polish global ===== */
@media (prefers-reduced-motion:no-preference){.card,.kpi .card,.rowitem,.check{animation:cyIn .35s var(--ease) both}.card:nth-child(2){animation-delay:.04s}.card:nth-child(3){animation-delay:.08s}.card:nth-child(4){animation-delay:.12s}@keyframes cyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.btn:active{transform:scale(.97)}.btn{transition:transform .12s,background .15s,box-shadow .15s}.btn-gold:hover,.btn-red:hover,.btn-black:hover{box-shadow:0 8px 20px -10px rgba(0,0,0,.4);transform:translateY(-1px)}.modal-bg .modal{animation:cyUp .28s var(--ease)}@keyframes cyUp{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}.pill{transition:background .2s}.tabs>button,.tabs>a{transition:background .18s,color .18s,transform .12s}.tabs>button:active{transform:scale(.97)}.rowitem:hover{border-color:var(--gold);box-shadow:0 6px 16px -12px rgba(0,0,0,.25)}.in:focus{box-shadow:0 0 0 4px rgba(189,151,79,.18)}}
.skel{background:linear-gradient(90deg,#f0f1f3 25%,#e6e7ea 50%,#f0f1f3 75%);background-size:200% 100%;animation:skel 1.2s infinite;border-radius:8px}@keyframes skel{to{background-position:-200% 0}}
/* ===== Wizard langkah ===== */
.steps{display:flex;gap:6px;margin-bottom:14px}.steps .st{flex:1;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--muted);transition:all .2s}.steps .st .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#F0F1F3;font-weight:800;font-size:12px;flex:none}.steps .st.on{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}.steps .st.on .n{background:var(--gold);color:#fff}.steps .st.done .n{background:var(--green);color:#fff}.steps .st.done{color:var(--ink)}@media (max-width:560px){.steps .st span.l{display:none}}
.wz-pane{display:none;animation:cyIn .3s var(--ease)}.wz-pane.on{display:block}
.sticky-sum{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 12px;margin:12px -16px -16px;border-radius:0 0 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pay-opt{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:#fff;transition:all .15s}.pay-opt.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 3px rgba(189,151,79,.15)}.pay-opt .pi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:#F0F1F3;flex:none}.pay-opt b{display:block;font-size:14px}.pay-opt span{font-size:12px;color:var(--muted)}
.proof-thumb{height:72px;border-radius:10px;border:2px solid var(--green);object-fit:cover}
/* ===== sidebar grup ===== */
.nav-group{margin:6px 0 2px}.nav-gh{width:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;border:0;color:#9CA3AF;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:8px 12px 4px;cursor:pointer;text-align:left}.nav-gh:hover{color:#fff}.nav-gh .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s;margin-right:4px}.nav-group.open .nav-gh .chev{transform:rotate(45deg)}
.nav-gi{display:none;flex-direction:column;gap:2px}.nav-group.open .nav-gi{display:flex;animation:cyIn .2s var(--ease)}
.cam-status{position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.65);color:#fff;font-size:12.5px;padding:8px 12px;text-align:center}
.cam-view{min-height:220px}
.steps .st span.l{display:inline!important}.steps .st{padding:8px 10px;font-size:12px}.step-desc{font-size:13px;color:var(--muted);margin:-6px 0 12px}
/* ===== v1.2.5 — HOT-W07/W08: subnav hotel, standar visual, banding foto, dialog terpandu ===== */
.hnav{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.hnav::-webkit-scrollbar{display:none}
.hnav a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted);transition:all .18s var(--ease);min-height:38px}
.hnav a svg{width:15px;height:15px}.hnav a:hover{border-color:var(--gold);color:var(--ink)}.hnav a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-dk);margin-bottom:4px}
.hh-ver{font-weight:400;color:var(--muted)}
.empty-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:34px 18px}
.empty-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-dk)}.empty-ic svg{width:24px;height:24px}
.how{margin:0;padding-left:18px;font-size:13px;color:var(--text)}.how li{margin-bottom:6px}
/* foto acuan */
.ref-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;align-items:flex-start;scrollbar-width:thin}
.ref-ph{position:relative;margin:0;flex:none;width:190px;animation:cyIn .3s var(--ease)}
.ref-ph img{width:190px;height:132px;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;display:block;transition:transform .2s var(--ease)}
.ref-ph img:hover{transform:scale(1.02)}.ref-ph.priv img{border:2px dashed var(--amber)}
.ref-ph figcaption{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.ph-del{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:9px;border:0;background:rgba(12,15,19,.72);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}
.ref-ph:hover .ph-del,.ph-del:focus{opacity:1}.ph-del svg{width:14px;height:14px}
.ref-add{flex:none;width:200px;display:flex;flex-direction:column;gap:6px;padding:12px;border:1.5px dashed var(--line);border-radius:12px;background:var(--bg)}
.crit-mini{margin:10px 0 0;padding-left:0;list-style:none;font-size:12.5px;color:var(--muted)}.crit-mini li{padding:3px 0;border-top:1px solid var(--line-2)}.crit-mini .mono{color:var(--gold-dk);margin-right:6px}
/* kriteria */
.crit-list{margin:0;padding:0;list-style:none;counter-reset:c}
.crit-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.crit-list li:last-child{border-bottom:0}.crit-list .cn{color:var(--muted);font-size:12px;padding-top:2px;flex:none}
.crit-list .ct{flex:1;min-width:0;line-height:1.45}.crit-list .ca{display:flex;gap:2px;opacity:.55;transition:opacity .15s}.crit-list li:hover .ca{opacity:1}
.crit-list .pill{margin-left:6px}
.applies{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px}
/* banding foto acuan vs laporan */
.cmp{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0C0F13;aspect-ratio:16/10}
.cmp-pane{position:absolute;inset:0}.cmp-pane img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-b{clip-path:inset(0 0 0 50%)}
.cmp-badge{position:absolute;top:10px;left:10px;background:rgba(12,15,19,.82);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:5px 9px;border-radius:7px}
.cmp-badge.b{left:auto;right:10px}
.cmp-handle{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:50%;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.cmp-handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.cmp-handle i::before{content:'‹ ›';position:absolute;inset:0;display:grid;place-items:center;font-size:15px;color:var(--ink);letter-spacing:2px}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.linkbtn{background:none;border:0;padding:0;color:var(--gold-dk);font-weight:600;cursor:pointer;font-size:inherit;text-decoration:underline}
/* baris kriteria saat inspeksi */
.crit-check{margin-top:12px;border-top:1px solid var(--line-2)}
.cc-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.cc-t{flex:1;min-width:190px;font-size:13.5px;line-height:1.45}.cc-t b{font-weight:600}
.ai-note{color:var(--muted);margin-top:3px;line-height:1.5}.ai-note svg{width:12px;height:12px;vertical-align:-2px;color:var(--gold-dk)}
.seg-res{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;flex:none}
.seg-res .sr{border:0;background:transparent;border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;min-height:34px;transition:all .16s var(--ease)}
.seg-res .sr:disabled{cursor:default;opacity:.55}
.seg-res .sr.on.pass{background:var(--green);color:#fff}.seg-res .sr.on.fail{background:var(--red);color:#fff}.seg-res .sr.on.not_assessable{background:var(--amber);color:#111}
.seg-res .sr.pop{animation:srPop .3s var(--ease)}@keyframes srPop{0%{transform:scale(.88)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
/* kartu hasil & biaya */
.ins-card{border-left:4px solid var(--line)}.ins-card.ok{border-left-color:var(--green)}.ins-card.bad{border-left-color:var(--red)}
.cost-card{border-left:4px solid var(--gold)}
.cost-l{font-size:14px}.trace{font-size:12px;color:var(--gold-dk);margin:8px 0;word-break:break-all}
.find{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.6}
.act-card .btn{margin-top:2px}
/* dialog terpandu & lightbox */
.ask-modal{width:min(96vw,460px)}.ask-modal textarea{resize:vertical}
.in.shake{animation:shk .35s;border-color:var(--red)}@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.btn.busy{position:relative;color:transparent!important;pointer-events:none}
.btn.busy::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.lb{position:fixed;inset:0;background:rgba(12,15,19,.92);z-index:9700;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}
.lb.open{display:flex;animation:cyIn .2s var(--ease)}
.lb-imgs{display:flex;gap:10px;max-width:100%;max-height:78vh}.lb-imgs img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px}
.lb-imgs.two img{max-width:48vw}.lb-cap{color:#fff;font-size:12.5px;opacity:.85}
.lb-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:17px;cursor:pointer}
@media (max-width:640px){.ref-ph,.ref-ph img,.ref-add{width:150px}.ref-ph img{height:108px}.cc-row{align-items:flex-start}.seg-res{width:100%;justify-content:space-between}.seg-res .sr{flex:1}.lb-imgs{flex-direction:column}.lb-imgs.two img{max-width:92vw;max-height:36vh}}
@media (prefers-reduced-motion:reduce){.ref-ph,.seg-res .sr.pop,.lb.open{animation:none}.btn.busy::after{animation:none}}
/* ===== v1.3.4 — kalender salon: drag & drop, garis sekarang, legenda ===== */
.cal-drag .ap{cursor:grab;touch-action:pan-y}
.cal-drag .ap .ap-grip{position:absolute;top:4px;right:5px;font-size:11px;color:rgba(12,15,19,.35);letter-spacing:-1px}
.cal-drag .ap.dragging{cursor:grabbing;z-index:60;box-shadow:0 12px 28px rgba(0,0,0,.28);transform:scale(1.02);opacity:.96;transition:none}
.cal-drag .ap:active{cursor:grabbing}
.ap{position:absolute;left:4px;right:4px;overflow:hidden;border-radius:10px;padding:6px 8px;background:color-mix(in srgb,var(--c,#BD974F) 14%,#fff);border:1px solid color-mix(in srgb,var(--c,#BD974F) 45%,#fff);color:var(--ink);display:flex;flex-direction:column;gap:1px;transition:box-shadow .15s,transform .15s}
.ap b{font-size:12.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:14px}
.ap .tiny{font-size:11px;color:var(--muted)}
.ap-work{position:absolute;left:0;top:0;width:3px;border-radius:3px;background:var(--c,#BD974F)}
.ap-st{position:absolute;bottom:4px;right:6px;font-size:10px;font-weight:700;color:var(--muted);text-transform:lowercase}
.ap.st-cancelled,.ap.st-no_show{opacity:.5;text-decoration:line-through}
.cal-now{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:40;pointer-events:none}
.cal-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.cal-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:10px;font-size:11.5px;color:var(--muted)}
.cal-legend i{display:inline-block;width:12px;height:8px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.lg-work{background:var(--gold)}.lg-buf{background:var(--line)}.lg-now{background:var(--red)}
.cal-legend .lg-hint{flex:1;min-width:220px}
.no-sel{user-select:none;-webkit-user-select:none}
.mv-cmp{display:flex;align-items:center;gap:10px;margin:10px 0}
.mv-side{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:15px}
.mv-side.ok{border-color:var(--green);background:#F2FAF6}
.mv-ar{color:var(--muted);font-size:18px}
.mv-segs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.mv-seg{font-size:11px;padding:4px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--line);text-transform:capitalize}
.mv-seg.s-apply{background:#FDECEE;border-color:#F7C9CE}.mv-seg.s-processing{background:#FEF3DD;border-color:#F6DDA8}
.mv-seg.s-finish{background:#EAF0FB;border-color:#C9D8F2}.mv-seg.s-buffer{background:#F1F2F4}
@media (max-width:640px){.mv-cmp{flex-direction:column;align-items:stretch}.mv-ar{transform:rotate(90deg);text-align:center}}
@media (prefers-reduced-motion:reduce){.cal-drag .ap.dragging{transform:none}.ap{transition:none}}
/* ===== v1.3.5 — header modul ringkas (menggantikan hero besar) ===== */
.mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:2px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.mhead .mh-l{min-width:0;flex:1}
.mh-lab{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-bottom:3px}
.mhead h1{font-family:inherit;font-size:21px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0}
.mh-sub{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.5;max-width:64ch}
.mh-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){.mhead{padding-bottom:12px;margin-bottom:12px}.mhead h1{font-size:19px}.mh-sub{font-size:12.5px}.mh-a{width:100%}.mh-a .btn{flex:1}}
/* kartu angka: rapi di HP, angka berjalan, sentuhan hidup */
.kpi .card{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.kpi .card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,15,19,.07)}
@media (max-width:560px){.kpi{grid-template-columns:1fr 1fr;gap:8px}.kpi .card{padding:12px;gap:10px;flex-direction:column;align-items:flex-start}.kpi .ic{width:32px;height:32px;border-radius:9px}.kpi .ic svg{width:16px;height:16px}.kpi .v{font-size:20px}.kpi .l{font-size:11px;line-height:1.3}}
@media (prefers-reduced-motion:reduce){.kpi .card:hover{transform:none}}
/* ===== v1.3.6 — form booking salon: rapat, bertahap, aksi menempel ===== */
.bk-modal{display:flex;flex-direction:column;max-height:92dvh;padding-bottom:0}
.bk-top{padding-bottom:8px;border-bottom:1px solid var(--line-2);flex:none}
.bk-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 0 0;margin:0 -2px;display:block}
.bk-sec{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin:14px 0 8px}
.bk-sec:first-child{margin-top:0}
.bk-n{width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11px;flex:none}
.bk-grid{gap:10px}
.bk-grid .f label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px;display:block}
.bk-grid .f label .opt{font-weight:400;color:var(--muted);font-size:11px}
.bk-grid .in{min-height:42px;padding:9px 12px;font-size:14px}
.bk-quick{display:flex;flex-wrap:wrap;gap:6px}
.chip-b{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;min-height:34px;transition:all .15s var(--ease)}
.chip-b:hover,.chip-b:active{border-color:var(--gold);color:var(--ink);background:var(--gold-soft)}
.bk-more{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:14px;background:var(--bg)}
.bk-more summary{font-size:13px;font-weight:600;cursor:pointer;color:var(--text)}
.bk-more[open]{background:#fff}
.bk-foot{position:sticky;bottom:0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:1px solid var(--line);margin:14px -2px 0;padding:10px 2px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px}
.bk-foot .btn-red{flex:1;max-width:260px}
.prev-box{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);font-size:13px;animation:cyIn .25s var(--ease);margin-top:12px}
.prev-box .segbar{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.prev-box .seg{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:#fff}
.prev-box .seg.s-apply{background:#FDECEE;border-color:#F7C9CE}.prev-box .seg.s-processing{background:#FEF3DD;border-color:#F6DDA8}
.prev-box .seg.s-finish{background:#EAF0FB;border-color:#C9D8F2}.prev-box .seg.s-buffer{background:#F1F2F4}
@media (max-width:640px){.bk-modal{width:100vw!important;max-height:94dvh;border-radius:18px 18px 0 0;margin-top:auto}
 .bk-grid .in{min-height:40px;font-size:13.5px}.bk-sec{margin:12px 0 6px}.bk-foot .btn-red{max-width:none}}
@media (prefers-reduced-motion:reduce){.prev-box{animation:none}.chip-b{transition:none}}
/* ===== v1.3.7 — perbaikan form booking: label terpotong, chip menumpuk, footer menutup isi ===== */
.bk-modal{gap:0;padding:18px 18px 0}
.bk-body{margin:0;padding:12px 2px 0;overflow-x:hidden;overflow-y:auto;min-height:0}
.bk-body>*{max-width:100%}
.bk-grid .f{min-width:0}
.bk-grid .f label{padding-left:1px;overflow-wrap:anywhere}
/* tombol jam cepat: satu baris mengalir, bukan satu per baris */
.bk-grid .f.bk-quick{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:6px;align-items:center}
.bk-quick .chip-b{width:auto;flex:0 0 auto;white-space:nowrap}
/* footer tidak lagi menutup isian terakhir */
.bk-foot{margin:14px 0 0;padding:10px 0 calc(12px + env(safe-area-inset-bottom));z-index:5}
.bk-body{padding-bottom:4px}
.bk-more{margin-bottom:4px}
@media (max-width:640px){
  #bkModal{padding:0;align-items:end}
  .bk-modal{width:100vw!important;max-width:100vw;height:92dvh;max-height:92dvh;border-radius:18px 18px 0 0;padding:16px 16px 0}
  .bk-quick .chip-b{padding:7px 12px;font-size:12.5px}
  .bk-grid{grid-template-columns:1fr}
}
/* ===== v1.3.8 — lembar booking penuh layar di HP (tanpa celah di atas) ===== */
.bk-top h2{font-family:inherit;font-size:18px;font-weight:700;letter-spacing:-.01em}
@media (max-width:640px){
  #bkModal{padding:0;align-items:stretch;place-items:stretch}
  .bk-modal{width:100vw!important;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0;
            padding:calc(10px + env(safe-area-inset-top)) 16px 0}
  .bk-top{position:sticky;top:0;background:#fff;z-index:6;padding-top:2px}
  .bk-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
/* ===== v1.4.0 — antrean walk-in & waitlist ===== */
.q-list{display:flex;flex-direction:column;gap:10px}
.q-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:4px;animation:cyIn .28s var(--ease)}
.q-card:hover{border-color:var(--gold)}
.q-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.q-code{font-size:12px;font-weight:700;color:var(--gold-dk)}
.q-card b{font-size:14.5px}
.q-est{font-size:13px;font-weight:600;margin-top:2px}
.q-offer{margin-top:6px}
.q-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2)}
.q-act .btn{flex:0 0 auto}
@media (max-width:640px){.q-act .btn{flex:1 1 calc(50% - 6px)}}
@media (prefers-reduced-motion:reduce){.q-card{animation:none}}
/* ===== v1.4.1 — halaman booking publik (tamu, tanpa akun) ===== */
.pb-body{background:var(--bg);min-height:100dvh;margin:0}
.pb-wrap{max-width:620px;margin:0 auto;padding:16px 14px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.pb-head{display:flex;align-items:center;gap:10px;padding:6px 2px 4px}
.pb-head b{font-size:16px}
.pb-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;animation:cyIn .3s var(--ease)}
.pb-step{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:12px}
.pb-step span{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11px;flex:none}
.pb-svcs{display:flex;flex-direction:column;gap:8px}
.pb-svc{text-align:left;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:all .16s var(--ease);min-height:56px}
.pb-svc b{font-size:14.5px}.pb-svc span{font-size:12.5px;color:var(--muted)}
.pb-svc:hover{border-color:var(--gold)}.pb-svc.on{border-color:var(--red);background:#FFF5F5;box-shadow:0 0 0 3px rgba(255,23,31,.08)}
.pb-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.pb-slot{border:1px solid var(--line);border-radius:10px;padding:9px 6px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:1px;transition:all .16s var(--ease);min-height:50px}
.pb-slot b{font-size:14px}.pb-slot span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-slot:hover{border-color:var(--gold)}.pb-slot.on{border-color:var(--red);background:#FFF5F5}
.chip-b.on{border-color:var(--ink);background:var(--ink);color:#fff}
.pb-sum{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);margin:12px 0;font-size:14px;display:flex;flex-direction:column;gap:4px}
.pb-ok{border-left:3px solid var(--green);padding-left:10px}
.pb-ok b{font-size:16px}
.pb-foot{text-align:center;padding-top:4px}
@media (prefers-reduced-motion:reduce){.pb-card{animation:none}.pb-svc,.pb-slot{transition:none}}
/* ===== v1.5.1 — kasir salon ===== */
.pos-tbl{width:100%;font-size:14px}
.pos-tbl td{padding:9px 4px;border-bottom:1px solid var(--line-2)}
.pos-tbl td.num{text-align:right;white-space:nowrap}
.pos-tbl tr.pos-sum td{border-top:1px solid var(--line);font-weight:600}
.pos-tbl tr.pos-due td{border-top:2px solid var(--ink);font-size:16px;padding-top:12px}
/* ===== v1.6.2 — penyeragaman tampilan aplikasi dengan referensi =====
   Referensi memakai judul SANS tebal, bukan serif. Aturan ini menyeragamkan semua halaman /app dan superadmin
   sekaligus, tanpa mengubah markup tiap halaman. Halaman publik (showcase/landing) sengaja tidak disentuh. */
.shell .page-head h1, .shell .hello, .shell .modal h2, .shell .card .card-h h2, .shell h2.sec-title{
  font-family:inherit;letter-spacing:-.015em}
.shell .page-head{align-items:flex-end;padding:2px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.shell .page-head h1{font-size:21px;font-weight:700;line-height:1.2;margin:0}
.shell .page-head .sub{font-size:13px;color:var(--muted);line-height:1.5;max-width:64ch;margin-top:4px}
.shell .page-head .eyebrow{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-bottom:3px}
.shell .card .card-h h2{font-size:15px;font-weight:700}
.shell .modal h2{font-size:18px;font-weight:700}
.shell .hello{font-size:21px;font-weight:700}
/* Tabel apa pun tetap bisa digeser sendiri, jadi halaman tidak pernah ikut bergeser mendatar */
.shell .card>table,.shell .card>form>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media (max-width:640px){
  .shell .page-head{padding-bottom:12px;margin-bottom:12px}
  .shell .page-head h1{font-size:19px}
  .shell .page-head .sub{font-size:12.5px}
  .shell .page-head>div:last-child:not(:only-child){width:100%}
  .shell .page-head .btn{flex:1}
}
/* ===== v1.6.3 — tampilan laptop/PC disamakan dengan bingkai referensi ===== */
/* Referensi: konten berada di kolom selebar ±1040px di dalam bingkai 1300px, bukan melebar penuh ke tepi layar. */
.shell .content{max-width:1320px;width:100%;margin:0 auto;padding:24px 28px 40px}
@media (min-width:1600px){.shell .content{max-width:1440px}}
.shell .top{padding:0 28px}
/* Kartu & grid: jarak sama seperti mockup (kartu putih, jarak 18px, sudut 16px) */
.shell .grid{gap:18px}
.shell .card{padding:20px}
.shell .card .card-h{margin-bottom:12px}
/* Panel kanan di mockup lebih sempit dari kolom isi */
@media (min-width:1100px){.shell .grid.g-2-1{grid-template-columns:minmax(0,2.15fr) minmax(300px,1fr)}}
/* Tabel di layar lebar: baris lebih lega seperti referensi */
@media (min-width:900px){.shell .tbl td{padding:11px 10px}.shell .tbl th{padding:10px}}
/* ===== v1.6.4 — perbaikan bilah atas, baris filter, dan strip kartu rekening ===== */
/* Bilah atas: tidak pernah melebihi lebar layar, dan isi yang tidak penting disembunyikan di HP */
.top{flex-wrap:nowrap;overflow:hidden}
.top .sel{min-width:0}
.top .sel>.btn{max-width:min(46vw,280px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .search{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:38px;flex:1 1 180px;min-width:0}
.top .spacer{flex:1 1 0;min-width:0}
.top .av{flex:none}
@media (max-width:900px){.top .search{display:none}}
@media (max-width:640px){
  .top{padding:0 10px;gap:4px;height:60px}
  .top .gd-btn,.top .btn-gold{display:none}        /* panduan & Tanya AI: ada di sidebar, tidak perlu di bilah sempit */
  .top .sel:nth-of-type(2){display:none}           /* pemilih outlet pindah ke halaman Pengaturan di layar kecil */
  .top .sel>.btn{max-width:42vw;font-size:12.5px}
  .top .m-logo img{height:20px}
}
/* Judul halaman: latar transparan, dan baris filter/aksi tidak pernah terpotong */
.shell .page-head{background:transparent}
.shell .page-head form{flex-wrap:wrap;gap:6px}
.shell .page-head form .in{min-width:0}
@media (max-width:640px){
  .shell .page-head form{width:100%}
  .shell .page-head form .in{flex:1 1 40%}
  .shell .page-head form .btn{flex:1 1 100%}
}
/* Strip kartu rekening: tidak melebar keluar konten, bisa digeser dengan jari, mouse, atau tarik */
.content>*{min-width:0;max-width:100%}
.acc-scroll{scroll-snap-type:x proximity;scroll-behavior:smooth;cursor:grab;padding-bottom:10px}
.acc-scroll.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.acc-scroll::-webkit-scrollbar{height:8px}
.acc-scroll::-webkit-scrollbar-track{background:var(--line-2);border-radius:99px}
.acc-scroll::-webkit-scrollbar-thumb{background:var(--muted);border-radius:99px}
.acc-scroll::-webkit-scrollbar-thumb:hover{background:var(--ink)}
.acc-scroll{scrollbar-width:thin;scrollbar-color:var(--muted) var(--line-2)}
@media (min-width:900px){.acc-card{flex:0 0 268px}}
/* Pastikan blok judul halaman tidak pernah punya latar/kotak sendiri, dari sumber mana pun */
.shell .page-head,.shell .mhead{background:none!important;box-shadow:none!important;border-radius:0!important}
/* ===== v1.6.6 — sidebar & bilah atas dirapikan TANPA mengubah markup (hanya CSS) ===== */
/* Avatar sempat hilang di HP karena aturan lama .av{display:none}; dikembalikan khusus untuk sidebar & bilah atas. */
.side .side-user .av,.top>.av{display:grid!important}
.side{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;padding-bottom:16px}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
/* Kartu pengguna: jadi kartu utuh, nama & peran tidak berdempetan */
.side .side-user.top{align-items:center;gap:10px;padding:10px;margin:0 2px 10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.side .side-user .av{width:36px;height:36px;background:linear-gradient(160deg,#1273D4,#B5121A);color:#fff;font-size:13px;border-radius:50%;flex:none}
.side .side-user>div:nth-child(2){min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.side .side-user .acts{display:flex;gap:2px;flex:none}
.side .side-user .acts .icon-btn{width:32px;height:32px;border-radius:10px}
.side .side-user .acts .icon-btn:hover{background:rgba(255,255,255,.08)}
.side .side-user .acts svg{width:16px;height:16px}
/* Pintasan: membungkus, tidak terpotong di tepi kanan */
.side .side-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 2px 12px}
.side .side-quick a{flex:1 1 calc(50% - 6px);display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;padding:8px 6px;border-radius:10px;background:rgba(255,255,255,.05);color:#D1D5DB;white-space:nowrap;overflow:hidden}
.side .side-quick a svg{width:14px;height:14px;flex:none}
.side .side-quick a:hover{background:rgba(255,255,255,.1);color:#fff}
.side .side-quick .badge{position:static;margin-left:2px}
/* Avatar bilah atas: selalu tampil, ukuran pas */
.top>.av{width:32px;height:32px;font-size:11.5px;flex:none;margin-left:2px}
@media (max-width:640px){.top>.av{width:30px;height:30px;font-size:11px}.side .side-quick a{flex:1 1 calc(33.333% - 6px)}}
/* ===== v1.6.7 — kartu pengguna, kartu judul halaman, dan kalender =====
   TEMUAN: kartu pengguna di sidebar memakai kelas "top" yang sama dengan bilah atas halaman,
   sehingga ikut mewarisi latar putih, tinggi 72px, padding 24px, sticky, dan overflow tersembunyi.
   Itulah sebab avatar tampak melar seperti pil dan nama/peran terpotong. Di sini gaya itu dinetralkan. */
.side .side-user.top{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);border-radius:14px;
  height:auto;min-height:0;padding:10px;margin:0 2px 10px;position:static;z-index:auto;overflow:visible;
  display:flex;align-items:center;gap:10px;box-shadow:none}
.side .side-user.top .av{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:50%;
  background:linear-gradient(160deg,#1273D4,#B5121A)!important;color:#fff!important;font-size:13px;display:grid!important;place-items:center}
.side .side-user.top>div:nth-child(2){min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.side .side-user.top .acts{flex:0 0 auto;display:flex;gap:2px}

/* Judul halaman jadi kartu yang disengaja, bukan garis tipis: putih, sudut 16px, bayangan halus, masuk beranimasi */
.shell .page-head,.shell .mhead{background:#fff!important;border:1px solid var(--line);border-radius:16px!important;
  box-shadow:0 1px 2px rgba(12,15,19,.04)!important;padding:16px 18px!important;margin-bottom:18px;
  align-items:center;gap:14px;animation:cyIn .28s var(--ease)}
.shell .page-head>div:first-child,.shell .mhead .mh-l{min-width:0;flex:1}
.shell .page-head h1,.shell .mhead h1{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0}
.shell .page-head .small.muted,.shell .page-head .eyebrow,.shell .mhead .mh-lab{font-size:11.5px;color:var(--muted);margin-bottom:4px;display:block}
.shell .page-head .sub,.shell .mhead .mh-sub{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5}
.shell .page-head form{flex:0 0 auto;align-items:center}
@media (max-width:640px){
  .shell .page-head,.shell .mhead{padding:14px!important;border-radius:14px!important;align-items:stretch;flex-direction:column}
  .shell .page-head h1,.shell .mhead h1{font-size:20px}
  .shell .page-head form,.shell .mhead .mh-a{width:100%}
}
@media (prefers-reduced-motion:reduce){.shell .page-head,.shell .mhead{animation:none}}

/* Kalender: bingkai rapi, kolom & jam terbaca, garis lembut, blok lebih hidup */
.cal{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.cal-head{height:46px;display:flex;flex-direction:column;justify-content:center;padding:0 10px;background:var(--bg);border-bottom:1px solid var(--line);font-size:12.5px}
.cal-head b{font-size:13px;font-weight:600}
.cal-time{border-right:1px solid var(--line);background:var(--bg)}
.cal-hr span{font-size:11px;color:var(--muted);padding:2px 8px 0;display:block}
.cal-col+.cal-col{border-left:1px solid var(--line-2)}
.cal-line{border-top:1px solid var(--line-2)}
.cal-body{background:repeating-linear-gradient(to bottom,transparent,transparent calc(60px * var(--ppm,1.4) - 1px),var(--line-2) calc(60px * var(--ppm,1.4)))}
.ap{box-shadow:0 1px 2px rgba(12,15,19,.06)}
.ap:hover{box-shadow:0 6px 16px rgba(12,15,19,.12);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.ap:hover{transform:none}}
/* ===== v1.6.8 — kartu pengguna: garis tipis dibuang, kotaknya dilegakan ===== */
.side .side-user.top{border:0!important;background:rgba(255,255,255,.06)!important;border-radius:16px;
  padding:12px 12px 13px!important;gap:12px;margin:0 2px 12px;min-height:62px;align-items:center;transition:background .16s var(--ease)}
.side .side-user.top:hover{background:rgba(255,255,255,.09)!important}
.side .side-user.top .av{width:40px!important;height:40px!important;flex:0 0 40px!important;font-size:14px}
.side .side-user.top>div:nth-child(2){gap:3px;padding-right:2px}
.side .side-user.top>div:nth-child(2)>div:first-child{font-size:14px;font-weight:600;color:#fff;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .side-user.top>div:nth-child(2)>div:last-child{font-size:12px;color:#9CA3AF;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .side-user.top .acts{align-self:center}
@media (prefers-reduced-motion:reduce){.side .side-user.top{transition:none}}
/* ===== v1.6.9 — kartu kosong & kartu modul terkunci: lebih rapi, bukan blok kosong besar ===== */
.shell .card.empty-card,.shell .lock-card{align-items:center;text-align:center;gap:12px;padding:32px 20px}
.shell .empty-card b,.shell .lock-card b{font-size:16px;font-weight:700}
.shell .empty-card .small.muted,.shell .lock-card .small.muted{max-width:48ch;line-height:1.6}
.shell .empty-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-dk)}
.shell .empty-ic svg{width:26px;height:26px}
.shell .empty-card .row,.shell .lock-card .row{justify-content:center;flex-wrap:wrap;gap:8px}
@media (max-width:640px){.shell .card.empty-card,.shell .lock-card{padding:26px 16px}.shell .empty-card .row .btn{flex:1 1 100%}}
/* v1.7.0 — nama perusahaan di bawah logo sidebar + ikon baris berukuran seragam */
.side-org{padding:0 8px 12px;font-size:12px;color:#9CA3AF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowitem .ri-ic svg{width:17px;height:17px}
/* ===== v1.7.3 — bilah proses & penanda offline ===== */
.net-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:9800;
  background:linear-gradient(90deg,var(--red),var(--gold));opacity:0;transition:opacity .2s}
.net-bar.on{opacity:1;animation:netRun 1.1s ease-in-out infinite}
@keyframes netRun{0%{transform:scaleX(.05)}50%{transform:scaleX(.7)}100%{transform:scaleX(1);opacity:.35}}
.net-off{position:fixed;left:0;right:0;bottom:0;z-index:9750;display:none;gap:6px;justify-content:center;flex-wrap:wrap;
  background:var(--ink);color:#fff;font-size:12.5px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));text-align:center}
.net-off span{color:#D1D5DB}
body.is-offline .net-off{display:flex}
body.is-offline .btn-red,body.is-offline .btn-gold{opacity:.6}
@media (prefers-reduced-motion:reduce){.net-bar.on{animation:none;transform:scaleX(1)}}
/* ===== v1.13.4 — grafik ringkas kehadiran pribadi ===== */
.spark{display:flex;align-items:flex-end;gap:6px;height:130px;padding:6px 2px 0}
.spark-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.spark-bar{width:100%;max-width:26px;border-radius:7px 7px 3px 3px;transform-origin:50% 100%;animation:sparkUp .5s var(--ease) both;animation-delay:calc(var(--i) * 35ms)}
.spark-bar.ok{height:82%;background:linear-gradient(180deg,#22A06B,#167C5A)}
.spark-bar.late{height:52%;background:linear-gradient(180deg,#F0B429,#C98A0E)}
.spark-bar.none{height:14%;background:var(--line);border-radius:6px}
.spark-d{font-size:10.5px;color:var(--muted)}
.spark-col:hover .spark-bar{filter:brightness(1.08);transform:translateY(-2px)}
@keyframes sparkUp{from{transform:scaleY(.04);opacity:.2}to{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.spark-bar{animation:none}.spark-col:hover .spark-bar{transform:none}}
.spark-stack{display:flex;flex-direction:column-reverse;justify-content:flex-start;align-items:center;width:100%;height:100%;gap:2px}
.spark-stack .spark-bar{max-width:24px;animation:sparkUp .5s var(--ease) both;animation-delay:calc(var(--i) * 30ms)}
/* ===== v1.15.0 — beranda karyawan (arah visual referensi Employee Dashboard) ===== */
.emp-hero{background:linear-gradient(118deg,#22252d 0%,#101217 76%);border-radius:18px;padding:20px 20px 18px;color:#fff;
  position:relative;overflow:hidden;box-shadow:0 12px 26px rgba(16,18,23,.14);margin-bottom:16px;animation:cyIn .3s var(--ease)}
.emp-hero::after{content:"";position:absolute;right:-70px;top:-90px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,23,31,.34),transparent 68%);pointer-events:none}
.emp-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;position:relative;z-index:1}
.emp-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  border-radius:99px;padding:6px 12px;font-size:12.5px;font-weight:600}
.emp-dot{width:7px;height:7px;border-radius:50%;background:#22A06B;box-shadow:0 0 0 3px rgba(34,160,107,.22)}
.emp-hero.belum .emp-dot,.emp-hero.telat .emp-dot{background:#F0B429;box-shadow:0 0 0 3px rgba(240,180,41,.22)}
.emp-hero.nojadwal .emp-dot{background:#9CA3AF;box-shadow:none}
.emp-ghost{display:inline-flex;align-items:center;gap:6px;color:#D1D5DB;font-size:12.5px;text-decoration:none;
  padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.06)}
.emp-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.emp-ghost svg{width:14px;height:14px}
.emp-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:end;position:relative;z-index:1}
.emp-kicker{font-size:10.5px;letter-spacing:.12em;color:#9CA3AF;font-weight:700;margin-bottom:6px}
.emp-hero h2{font-size:22px;line-height:1.25;font-weight:700;margin:0 0 10px;letter-spacing:-.015em;color:#fff}
.emp-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;color:#D1D5DB}
.emp-meta span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.emp-meta svg{width:14px;height:14px;flex:none;color:#E5C88A}
.emp-timer{text-align:right;min-width:0}
.emp-timer-l{font-size:11.5px;color:#9CA3AF;margin-bottom:2px}
.emp-count{font-size:34px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
.emp-count span{opacity:.45;margin:0 1px}
.emp-count.emp-off{font-size:26px;opacity:.6}
.emp-count.emp-off svg{width:26px;height:26px}
.emp-timer-s{font-size:11.5px;color:#9CA3AF;display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.emp-pulse{width:6px;height:6px;border-radius:50%;background:#1273D4;animation:empPulse 1.6s ease-in-out infinite}
@keyframes empPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.emp-progress{margin-top:16px;position:relative;z-index:1}
.emp-progress-c{display:flex;justify-content:space-between;font-size:11.5px;color:#9CA3AF;margin-bottom:6px}
.emp-track{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.emp-track>div{height:100%;border-radius:99px;background:linear-gradient(90deg,#1273D4,#E5C88A);transition:width .5s var(--ease)}
.emp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;position:relative;z-index:1}
.emp-actions .btn-outline,.emp-actions .btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.emp-actions .btn-outline:hover,.emp-actions .btn-ghost:hover{background:rgba(255,255,255,.14)}

.emp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.emp-stats .stat{display:flex;gap:11px;padding:15px 14px;background:#fff;border:1px solid var(--line);border-radius:16px;min-width:0}
.emp-stats .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.emp-stats .ic svg{width:17px;height:17px}
.emp-stats .ic.green{background:#E7F6EF;color:#167C5A}.emp-stats .ic.gold{background:var(--gold-soft);color:var(--gold-dk)}
.emp-stats .ic.ink{background:#EEF0F4;color:var(--ink)}.emp-stats .ic.red{background:#FFECEC;color:var(--red)}
.emp-stats .v{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.emp-stats .l{font-size:12.5px;font-weight:600}
.emp-stats .s{font-size:11px;color:var(--muted);margin-top:1px}

.emp-chart{display:flex;align-items:flex-end;gap:5px;height:136px;padding:4px 0 0;overflow:hidden}
.emp-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.emp-slot{flex:1;width:100%;max-width:26px;display:flex;align-items:flex-end;background:var(--bg);border-radius:8px;overflow:hidden}
.emp-bar{width:100%;border-radius:8px;transform-origin:50% 100%;animation:empUp .45s var(--ease) both;animation-delay:calc(var(--i) * 28ms)}
.emp-bar.ok{height:86%;background:linear-gradient(180deg,#22A06B,#167C5A)}
.emp-bar.late{height:56%;background:linear-gradient(180deg,#F0B429,#C98A0E)}
.emp-bar.leave{height:40%;background:linear-gradient(180deg,#9FB6FF,#6C86E8)}
.emp-bar.miss{height:24%;background:repeating-linear-gradient(135deg,#F3C0C2 0 4px,#FFE7E8 4px 8px)}
.emp-bar.off{height:10%;background:var(--line)}
.emp-col>span{font-size:10.5px;color:var(--muted);line-height:1}
@keyframes empUp{from{transform:scaleY(.05);opacity:.25}to{transform:scaleY(1);opacity:1}}
.emp-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.emp-legend b{color:var(--ink);margin-left:2px}
.emp-legend .d{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.emp-legend .d.ok{background:#22A06B}.emp-legend .d.late{background:#F0B429}
.emp-legend .d.leave{background:#6C86E8}.emp-legend .d.miss{background:#F3C0C2}

@media (max-width:880px){
  .emp-hero-grid{grid-template-columns:1fr;gap:14px;align-items:start}
  .emp-timer{text-align:left}
  .emp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .emp-hero{padding:16px 15px 15px;border-radius:16px}
  .emp-hero h2{font-size:19px}
  .emp-count{font-size:30px}
  .emp-chart{height:112px;gap:4px}
  .emp-actions .btn{flex:1 1 calc(50% - 8px);justify-content:center}
  .emp-actions .btn-red{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.emp-hero,.emp-bar{animation:none}.emp-pulse{animation:none}}

body.modal-open{overflow:hidden}
.modal>form,.modal>.stack{min-height:0}

/* Isi modal tidak boleh melebar melewati kotaknya: baris berisi beberapa kolom harus
   membungkus di layar sempit, dan setiap kolom boleh menyusut (min-width:0). Tanpa ini,
   modal dengan tiga kolom meluber ke samping dan tombolnya terpotong di HP. */
.modal .row{flex-wrap:wrap;align-items:flex-end}   /* label dua baris tidak lagi menggeser kotak isiannya */
.modal .row>.f{flex:1 1 150px;min-width:0}
.modal .f .in,.modal .f select,.modal .f textarea{width:100%;max-width:100%}
.modal .form-grid{grid-template-columns:1fr}
@media(min-width:520px){.modal .form-grid{grid-template-columns:1fr 1fr}}

/* Penjelasan singkat per kolom isian: ikon "i" yang bisa diketuk, bukan tooltip melayang
   yang mustahil dibuka di layar sentuh. */
.f-lbl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bantu{width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--muted);font:600 11px/1 system-ui,sans-serif;cursor:pointer;padding:0;display:inline-flex;
  align-items:center;justify-content:center}
.bantu:hover,.bantu[aria-expanded="true"]{border-color:var(--blue);color:var(--blue);background:var(--blue-soft,#EFF6FD)}
.bantu-teks{display:none;margin:4px 0 6px;padding:8px 10px;border-radius:9px;background:var(--blue-soft,#EFF6FD);
  color:#12405F;font-size:11.5px;line-height:1.6}
.bantu-teks.buka{display:block}
/* Bagian di dalam formulir supaya tidak menjadi satu tumpukan panjang */
.f-bagian{border-top:1px solid var(--line-2);padding-top:12px;margin-top:4px}
.f-bagian>.judul{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}