/* =====================================================================
   Posi HRIS — sistem desain
   Tema: nebula · samudra · zamrud · senja · grafit · brand (warna organisasi)
   Mode: terang / gelap / otomatis mengikuti perangkat
   ===================================================================== */
@font-face{font-family:"Jakarta";src:url(fonts/pjs-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jakarta";src:url(fonts/pjs-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jakarta";src:url(fonts/pjs-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Jakarta";src:url(fonts/pjs-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jakarta";src:url(fonts/pjs-800.woff2) format("woff2");font-weight:800;font-display:swap}

/* ---------- token dasar (mode terang) ---------- */
:root{
  --primary:#6366f1; --primary-2:#a855f7; --accent:#22d3ee;
  --bg:#f3f4fb; --surface:#ffffff; --surface-2:#f6f7fd; --surface-3:#eceef8;
  --line:#e3e6f3; --line-2:#d5d9ec; --ink:#101332; --ink-2:#3a4068; --muted:#6c7396;
  --success:#0ea371; --danger:#e5484d; --warning:#d98a04; --info:#3b82f6;
  --glass:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.6);
  --shadow-sm:0 1px 2px rgba(16,19,50,.05),0 1px 3px rgba(16,19,50,.04);
  --shadow:0 6px 24px -8px rgba(16,19,50,.14),0 2px 6px rgba(16,19,50,.05);
  --shadow-lg:0 24px 60px -18px rgba(16,19,50,.28);
  --radius:18px; --radius-sm:12px; --sidebar:268px;
  --font:"Jakarta",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
/* ---------- palet tema ---------- */
[data-tema="nebula"]{--primary:#6366f1;--primary-2:#a855f7;--accent:#22d3ee}
[data-tema="samudra"]{--primary:#0284c7;--primary-2:#2563eb;--accent:#14b8a6}
[data-tema="zamrud"]{--primary:#059669;--primary-2:#0d9488;--accent:#84cc16}
[data-tema="senja"]{--primary:#ea580c;--primary-2:#db2777;--accent:#f59e0b}
[data-tema="grafit"]{--primary:#475569;--primary-2:#1e293b;--accent:#6366f1}

/* ---------- mode gelap ---------- */
[data-mode="gelap"]{
  --bg:#080b1c; --surface:#11152e; --surface-2:#161b39; --surface-3:#1d2346;
  --line:rgba(150,160,255,.13); --line-2:rgba(150,160,255,.22); --ink:#eef0ff; --ink-2:#c3c8ea; --muted:#8f97c0;
  --success:#34d399; --danger:#f87171; --warning:#fbbf24; --info:#60a5fa;
  --glass:rgba(17,21,46,.68); --glass-line:rgba(150,160,255,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 10px 30px -10px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -20px rgba(0,0,0,.75);
  color-scheme:dark;
}
[data-mode="gelap"][data-tema="grafit"]{--primary:#64748b;--primary-2:#334155}

/* ---------- turunan & alias untuk kode lama ---------- */
:root,[data-tema],[data-mode]{
  --grad:linear-gradient(135deg,var(--primary),var(--primary-2));
  --grad-3:linear-gradient(120deg,var(--primary) 0%,var(--primary-2) 55%,var(--accent) 120%);
  --primary-soft:color-mix(in srgb,var(--primary) 11%,transparent);
  --primary-line:color-mix(in srgb,var(--primary) 28%,transparent);
  --ring:color-mix(in srgb,var(--primary) 30%,transparent);
  --success-soft:color-mix(in srgb,var(--success) 13%,transparent);
  --danger-soft:color-mix(in srgb,var(--danger) 12%,transparent);
  --warning-soft:color-mix(in srgb,var(--warning) 15%,transparent);
  --info-soft:color-mix(in srgb,var(--info) 12%,transparent);
  --card:var(--surface); --green:var(--success); --red:var(--danger); --amber:var(--warning); --purple:#8b5cf6;
  --blue-bg:var(--primary-soft); --green-bg:var(--success-soft); --red-bg:var(--danger-soft); --amber-bg:var(--warning-soft);
}

/* ---------- dasar ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 520px at 88% -8%,color-mix(in srgb,var(--primary-2) 16%,transparent),transparent 62%),
             radial-gradient(700px 480px at -6% 104%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),
             radial-gradient(600px 380px at 40% 40%,color-mix(in srgb,var(--primary) 5%,transparent),transparent 70%)}
.hidden{display:none !important}
a{color:var(--primary)}
h1,h2,h3,h4{letter-spacing:-.01em;margin:0}
code{font-size:.9em;background:var(--surface-3);padding:1px 6px;border-radius:6px}
.ik{width:18px;height:18px;flex:0 0 auto;vertical-align:-3.5px}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:12.5px}.tiny{font-size:11.5px}
.sep{height:1px;background:var(--line);margin:14px 0}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.num{font-variant-numeric:tabular-nums}
::selection{background:var(--ring)}

/* ---------- formulir ---------- */
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 6px;letter-spacing:.01em}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;font-size:14.5px;
  font-family:inherit;background:var(--surface-2);color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring);background:var(--surface)}
textarea{min-height:80px;resize:vertical}
input[type=file]{padding:9px}
input[type=color]{padding:3px;height:44px;cursor:pointer}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;border:0;
  border-radius:12px;background:var(--grad);color:#fff;font:700 14.5px var(--font);cursor:pointer;margin-top:12px;
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--primary) 60%,transparent);transition:transform .12s,box-shadow .2s,filter .2s;
  text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.06);box-shadow:0 12px 26px -10px color-mix(in srgb,var(--primary) 70%,transparent)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn.green{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 20px -8px rgba(16,185,129,.6)}
.btn.red{background:linear-gradient(135deg,#f43f5e,#e11d48);box-shadow:0 8px 20px -8px rgba(244,63,94,.55)}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--primary-line);color:var(--primary);background:var(--primary-soft)}
.btn.soft{background:var(--primary-soft);color:var(--primary);box-shadow:none}
.btn.sm{padding:8px 12px;font-size:13px;margin-top:0;border-radius:10px}
.btn.auto{width:auto}
.btn.icon{width:40px;height:40px;padding:0;border-radius:12px;margin:0}
.btn .ik{width:17px;height:17px}
.row .btn{margin-top:0}

/* ---------- lencana ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  line-height:1.5;white-space:nowrap}
.badge .ik{width:13px;height:13px}
.b-green{background:var(--success-soft);color:var(--success)}
.b-red{background:var(--danger-soft);color:var(--danger)}
.b-amber{background:var(--warning-soft);color:var(--warning)}
.b-blue{background:var(--primary-soft);color:var(--primary)}
.b-gray{background:var(--surface-3);color:var(--muted)}
.b-purple{background:color-mix(in srgb,#8b5cf6 14%,transparent);color:#8b5cf6}
[data-mode="gelap"] .b-purple{color:#c4b5fd}

/* ---------- kartu ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  margin-top:16px;box-shadow:var(--shadow-sm)}
[data-mode="gelap"] .card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,var(--primary) 8%),var(--surface))}
.card h3{font-size:15.5px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.card h3 .ik{color:var(--primary)}
.card h3 .m{font-weight:500;color:var(--muted);font-size:13px}
.card.flat{box-shadow:none}
.card.glow{border-color:var(--primary-line);box-shadow:0 0 0 4px var(--primary-soft),var(--shadow)}
.note,.warn,.err{border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.55}
.note{background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--ink-2)}
.warn{background:var(--warning-soft);border:1px solid color-mix(in srgb,var(--warning) 35%,transparent);color:var(--ink-2)}
.err{background:var(--danger-soft);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);color:var(--ink-2)}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:28px 12px}
.empty .ik{width:34px;height:34px;display:block;margin:0 auto 8px;opacity:.5}

/* ---------- statistik ---------- */
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.statgrid.g3{grid-template-columns:repeat(3,1fr)}
.stat{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface-2);text-align:left}
.stat .k{font-size:11.5px;color:var(--muted);font-weight:600}
.stat .v{font-size:21px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:16px}
.kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 14px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--grad);
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--primary) 70%,transparent)}
.kpi .ico .ik{width:20px;height:20px}
.kpi .v{font-size:28px;font-weight:800;letter-spacing:-.03em;margin-top:10px;font-variant-numeric:tabular-nums}
.kpi .k{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi .spark{position:absolute;right:10px;bottom:10px;width:90px;height:34px;opacity:.9}
.kpi.c-green .ico{background:linear-gradient(135deg,#10b981,#059669)}
.kpi.c-red .ico{background:linear-gradient(135deg,#fb7185,#e11d48)}
.kpi.c-amber .ico{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.kpi.c-cyan .ico{background:linear-gradient(135deg,#22d3ee,#0891b2)}
.kpi.c-gray .ico{background:linear-gradient(135deg,#94a3b8,#64748b)}

/* ---------- daftar ---------- */
.item{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:10px;background:var(--surface);
  transition:border-color .15s,box-shadow .15s}
.item:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.item .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.item .nm{font-weight:700;font-size:14px}
.item .dt{font-size:12.5px;color:var(--muted)}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;gap:12px}
.kv span:first-child{color:var(--muted);flex:0 0 auto}
.orang{display:flex;align-items:center;gap:10px;min-width:0}
.orang b{font-weight:700}

/* ---------- avatar ---------- */
.av{flex:0 0 auto;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:800;overflow:hidden;
  background:var(--grad);letter-spacing:.02em;box-shadow:0 0 0 2px var(--surface)}
.av img{width:100%;height:100%;object-fit:cover}

/* ---------- tabel ---------- */
.tblwrap{overflow:auto;-webkit-overflow-scrolling:touch;margin-top:12px;border:1px solid var(--line);border-radius:14px;max-height:70vh}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;min-width:640px;background:var(--surface)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--surface-2);font-weight:700;color:var(--muted);position:sticky;top:0;z-index:1;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.04em}
tbody tr{transition:background .12s}
tbody tr:hover td{background:color-mix(in srgb,var(--primary) 4%,var(--surface))}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}

/* ---------- tab bersegmen ---------- */
.seg,.tabs{display:flex;gap:4px;padding:4px;background:var(--surface-3);border-radius:14px;overflow-x:auto;margin:6px 0 4px;
  scrollbar-width:none}
.seg::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.seg button,.tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border:0;
  border-radius:11px;background:transparent;color:var(--muted);font:600 13px var(--font);cursor:pointer;white-space:nowrap;transition:.15s}
.seg button:hover,.tab:hover{color:var(--ink)}
.seg button.on,.tab.on{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}
.seg button .ik{width:16px;height:16px}
.ftab{animation:muncul .25s ease}

/* ---------- saklar ---------- */
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)}
.sw{width:46px;height:27px;border-radius:999px;background:var(--line-2);position:relative;flex:0 0 auto;cursor:pointer;transition:.2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}
.sw.on{background:var(--grad)}.sw.on::after{left:22px}

/* ---------- progres ---------- */
.bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* ---------- linimasa persetujuan ---------- */
.alur{display:flex;align-items:flex-start;margin:12px 0 4px;gap:0}
.alur .t{flex:1;text-align:center;position:relative;font-size:11px;color:var(--muted);font-weight:600}
.alur .t::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.alur .t:first-child::before{display:none}
.alur .t .o{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;margin:0 auto 5px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--muted);border:2px solid var(--surface)}
.alur .t .o .ik{width:14px;height:14px}
.alur .t.ok .o{background:var(--success);color:#fff}
.alur .t.ok::before,.alur .t.now::before{background:var(--success)}
.alur .t.now .o{background:var(--grad);color:#fff;box-shadow:0 0 0 5px var(--ring);animation:denyut 1.8s infinite}
.alur .t.no .o{background:var(--danger);color:#fff}
.alur .t.ok,.alur .t.now{color:var(--ink-2)}

/* =====================================================================
   SHELL: sidebar + topbar + konten
   ===================================================================== */
.shell{position:relative;z-index:1;min-height:100vh}
#sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);z-index:50;display:flex;flex-direction:column;
  background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-right:1px solid var(--line);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 14px}
.logo{width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;
  font-size:14px;background:var(--grad-3);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--primary) 80%,transparent);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.brand .nm{font-weight:800;font-size:14.5px;line-height:1.2}
.brand .sl{font-size:11.5px;color:var(--muted);line-height:1.3}
#sideNav{flex:1;overflow-y:auto;padding:6px 12px 12px;scrollbar-width:thin}
.ngrp{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:16px 12px 6px;opacity:.8}
.nitem{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;
  color:var(--ink-2);font:600 13.5px var(--font);cursor:pointer;text-align:left;position:relative;transition:.15s}
.nitem:hover{background:var(--surface-3);color:var(--ink)}
.nitem.on{background:var(--grad);color:#fff;box-shadow:0 10px 22px -12px color-mix(in srgb,var(--primary) 90%,transparent)}
.nitem .cnt{margin-left:auto;min-width:21px;height:21px;padding:0 6px;border-radius:99px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center}
.nitem.on .cnt{background:#fff;color:var(--primary)}
.sidefoot{padding:12px;border-top:1px solid var(--line)}
.me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;cursor:pointer}
.me:hover{background:var(--surface-3)}
.me .nm{font-weight:700;font-size:13px;line-height:1.2}
.me .rl{font-size:11.5px;color:var(--muted)}

.main{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:14px 28px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar h1{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.topbar .sub{font-size:12.5px;color:var(--muted)}
.topbar .sp{flex:1}
.tbtn{position:relative;width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:.15s}
.tbtn:hover{color:var(--primary);border-color:var(--primary-line)}
.tbtn .dot{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--danger);
  color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.cari{position:relative;width:min(320px,34vw)}
.cari input{padding-left:40px;background:var(--surface);height:42px}
.cari .ik{position:absolute;left:13px;top:12px;color:var(--muted)}
.cari .hasil{position:absolute;top:48px;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:6px;max-height:360px;overflow:auto;z-index:60}
.cari .hasil button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;background:none;border-radius:10px;
  cursor:pointer;color:var(--ink);font:500 13px var(--font);text-align:left}
.cari .hasil button:hover{background:var(--surface-3)}
#burger{display:none}
#content{flex:1;padding:4px 28px 40px;width:100%;max-width:1360px;margin:0 auto}
.page{animation:muncul .35s cubic-bezier(.2,.8,.2,1)}
.page.sempit{max-width:780px;margin:0 auto}
.grid-2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-2>div>.card:first-child,.grid-3>div>.card:first-child{margin-top:16px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}
#bottomNav{display:none}
#scrim{position:fixed;inset:0;background:rgba(6,8,24,.5);backdrop-filter:blur(3px);z-index:45;opacity:0;pointer-events:none;transition:.25s}

/* =====================================================================
   BERANDA KARYAWAN
   ===================================================================== */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:26px;margin-top:14px;color:#fff;
  background:var(--grad-3);box-shadow:var(--shadow-lg);isolation:isolate}
.hero .orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;z-index:-1;animation:melayang 14s ease-in-out infinite}
.hero .orb.a{width:260px;height:260px;background:#fff;top:-120px;right:-60px;opacity:.22}
.hero .orb.b{width:220px;height:220px;background:var(--accent);bottom:-120px;left:-40px;animation-delay:-5s}
.hero .grid-bg{position:absolute;inset:0;z-index:-1;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(ellipse at 70% 0%,#000 10%,transparent 70%)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:18px}
.sapa{font-size:13.5px;opacity:.85;font-weight:500}
.hero h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:2px 0 4px}
.hero .date{font-size:13px;color:rgba(255,255,255,.86)}
.jamring{position:relative;width:132px;height:132px;flex:0 0 auto}
.jamring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.jamring .clock{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.hero .chips{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.hchip{flex:1;min-width:120px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:16px;
  padding:10px 14px;backdrop-filter:blur(8px)}
.hchip .k{font-size:11.5px;opacity:.8;font-weight:600}
.hchip .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
#stInfo{margin-top:12px}
.hero #stInfo .note,.hero #stInfo .warn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff}
.hero #stInfo .badge{background:rgba(255,255,255,.2);color:#fff}
.hero-act{display:flex;gap:12px;margin-top:16px}
.hero-act .btn{margin:0;padding:15px;font-size:15.5px;border-radius:16px;background:#fff;color:var(--primary);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.45)}
.hero-act .btn.out{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.4);box-shadow:none}
.hero-act .btn[disabled]{opacity:.4}
.quick{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:16px}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:18px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font:600 12.5px var(--font);color:var(--ink-2);transition:.2s;box-shadow:var(--shadow-sm)}
.qa:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--primary)}
.qa .i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--grad)}
.qa:nth-child(2) .i{background:linear-gradient(135deg,#fb7185,#f43f5e)}
.qa:nth-child(3) .i{background:linear-gradient(135deg,#22d3ee,#0891b2)}
.qa:nth-child(4) .i{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.qa:nth-child(5) .i{background:linear-gradient(135deg,#34d399,#059669)}
.qa:nth-child(6) .i{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.qa .i .ik{width:21px;height:21px}
.pg-item{display:flex;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);margin-top:10px;cursor:pointer;transition:.15s;
  background:var(--surface)}
.pg-item:hover{border-color:var(--primary-line)}
.pg-item .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);flex:0 0 auto}
.pg-item.penting .ic{background:var(--danger-soft);color:var(--danger)}
.pg-item .jd{font-weight:700;font-size:13.5px}
.pg-item.baru .jd::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);margin-left:7px;vertical-align:1px}
.pg-item .ringkas{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rayakan{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.rayakan .p{flex:0 0 auto;width:112px;text-align:center;padding:12px 8px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.rayakan .p .nm{font-weight:700;font-size:12.5px;margin-top:6px;line-height:1.25}
.rayakan .p .ket{font-size:11px;color:var(--muted)}

/* =====================================================================
   DIALOG, SHEET, TOAST
   ===================================================================== */
.mask{position:fixed;inset:0;background:rgba(6,8,24,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:70;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:pudar .2s ease}
.sheet{background:var(--surface);width:100%;max-width:560px;border-radius:24px;padding:22px 22px 24px;max-height:90vh;overflow:auto;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);animation:naik .3s cubic-bezier(.2,.8,.2,1)}
.sheet.big{max-width:880px}
.sheet h3{margin:0 0 8px;font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px}
.dlg{z-index:90}
.dlg .sheet{max-width:420px}
#toastRoot{position:fixed;top:18px;right:18px;z-index:100;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;min-width:260px;max-width:380px;padding:13px 15px;border-radius:14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-lg);font-size:13.5px;
  animation:geser .35s cubic-bezier(.2,.8,.2,1)}
.toast .ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--success-soft);color:var(--success);flex:0 0 auto}
.toast.bad .ic{background:var(--danger-soft);color:var(--danger)}
.toast.keluar{animation:hilang .3s forwards}
#loader{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;overflow:hidden;background:transparent}
#loader::after{content:"";position:absolute;inset:0;width:40%;background:var(--grad-3);animation:muat 1s ease-in-out infinite;border-radius:9px}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:putar .7s linear infinite}
.skel{border-radius:12px;background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:kilap 1.4s ease infinite}

/* ---------- kamera & peta (fitur lama) ---------- */
.clockbox{text-align:center;padding:6px 0 2px}
.clock{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums}
.date{color:var(--muted);font-size:13.5px}
.thumb{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:#000}
.camwrap{position:relative;border-radius:18px;overflow:hidden;background:#0b1020;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}
.camwrap video,.camwrap img{width:100%;height:100%;object-fit:cover}
.camwrap video{transform:scaleX(-1)}
.camhint{color:#9fb0c8;font-size:13px;padding:20px;text-align:center}
.geo{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:11px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:0 0 auto;margin-top:5px}
.dot.ok{background:var(--success);box-shadow:0 0 0 4px var(--success-soft)}.dot.bad{background:var(--danger)}.dot.wait{background:var(--warning)}
#mapBox{height:320px;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-top:10px;background:var(--surface-3)}

/* ---------- grafik ---------- */
.chart{width:100%;height:340px}
.chart.tinggi{height:430px}
.chart.pendek{height:260px}
.hero3d{position:relative;overflow:hidden}
.hero3d .label3d{position:absolute;left:18px;top:52px;z-index:2;pointer-events:none}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.org{height:620px}

/* ---------- slip gaji ---------- */
.slip{background:#fff;color:#111827;border-radius:18px;padding:28px;border:1px solid #e5e7eb;max-width:760px;margin:0 auto;font-size:13px}
.slip .kop{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:3px solid var(--primary)}
.slip .kop img{width:54px;height:54px;object-fit:contain}
.slip h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin:18px 0 6px}
.slip table{min-width:0;font-size:12.5px;background:#fff}
.slip td{border-bottom:1px dashed #e5e7eb;padding:6px 4px;white-space:normal;color:#111827}
.slip .tot td{font-weight:800;border-bottom:0;border-top:2px solid #111827}
.slip .thp{margin-top:16px;padding:14px 16px;border-radius:14px;background:#f5f3ff;display:flex;justify-content:space-between;align-items:center}
.slip .thp b{font-size:22px;color:var(--primary)}

/* ---------- layar masuk ---------- */
#loginScreen{position:relative;min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;z-index:1}
.lg-art{position:relative;overflow:hidden;background:#070a1f;color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.lg-art canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.lg-art .blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;opacity:.65;animation:melayang 16s ease-in-out infinite}
.lg-art .blob.a{width:420px;height:420px;background:var(--primary);top:-120px;right:-80px}
.lg-art .blob.b{width:360px;height:360px;background:var(--primary-2);bottom:-100px;left:-60px;animation-delay:-6s}
.lg-art .blob.c{width:240px;height:240px;background:var(--accent);top:40%;left:45%;opacity:.35;animation-delay:-11s}
.lg-art .brand{padding:0}
.lg-art .brand .sl{color:rgba(255,255,255,.7)}
.lg-art h1{font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.03em;max-width:560px}
.lg-art h1 span{background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-art p{max-width:480px;color:rgba(255,255,255,.75);font-size:15px}
.lg-fitur{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.lg-fitur span{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:99px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);font-size:12.5px;backdrop-filter:blur(6px)}
.lg-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.lg-box{width:100%;max-width:400px}
.lg-box h2{font-size:28px;font-weight:800;letter-spacing:-.02em}
.lg-box .card{padding:24px;border-radius:22px;box-shadow:var(--shadow-lg)}
.lg-jam{font-size:13px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}

/* ---------- animasi ---------- */
@keyframes muncul{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes naik{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pudar{from{opacity:0}to{opacity:1}}
@keyframes geser{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes hilang{to{opacity:0;transform:translateX(30px)}}
@keyframes putar{to{transform:rotate(360deg)}}
@keyframes muat{0%{left:-40%}100%{left:100%}}
@keyframes kilap{0%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes denyut{0%,100%{box-shadow:0 0 0 4px var(--ring)}50%{box-shadow:0 0 0 9px transparent}}
@keyframes melayang{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.08)}66%{transform:translate(-20px,20px) scale(.95)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* =====================================================================
   RESPONSIF
   ===================================================================== */
@media (max-width:1180px){
  .quick{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  #sidebar{transform:translateX(-102%);box-shadow:var(--shadow-lg);background:var(--surface)}
  body.drawer #sidebar{transform:none}
  body.drawer #scrim{opacity:1;pointer-events:auto}
  .main{margin-left:0}
  #burger{display:grid}
  .topbar{padding:12px 16px}
  #content{padding:0 16px 110px}
  .cari{display:none}
  #bottomNav{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:44;
    background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
    border:1px solid var(--glass-line);border-radius:22px;padding:6px;box-shadow:var(--shadow-lg)}
  #bottomNav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border:0;background:none;
    color:var(--muted);font:700 10.5px var(--font);border-radius:16px;cursor:pointer;position:relative}
  #bottomNav button .ik{width:21px;height:21px}
  #bottomNav button.on{color:var(--primary);background:var(--primary-soft)}
  #bottomNav .cnt{position:absolute;top:3px;right:calc(50% - 20px);min-width:16px;height:16px;border-radius:99px;background:var(--danger);
    color:#fff;font-size:9.5px;display:grid;place-items:center;padding:0 4px}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  #loginScreen{grid-template-columns:1fr}
  .lg-art{min-height:340px;padding:28px 22px}
  .lg-art h1{font-size:28px}
}
@media (max-width:640px){
  body{font-size:14px}
  .hero{padding:20px;border-radius:22px}
  .hero-top{flex-direction:column-reverse;align-items:flex-start}
  .jamring{width:112px;height:112px}
  .hero h2{font-size:22px}
  .quick{grid-template-columns:repeat(3,1fr);gap:10px}
  .card{padding:15px;border-radius:16px}
  .topbar h1{font-size:17px}
  .mask{align-items:flex-end;padding:0}
  .sheet{border-radius:24px 24px 0 0;max-height:92vh;padding:20px 16px 28px}
  #toastRoot{left:12px;right:12px;top:12px}
  .toast{max-width:none}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi .v{font-size:23px}
  .kpi .spark{display:none}
  .chart{height:300px}.chart.tinggi{height:360px}
  .statgrid.g3{grid-template-columns:1fr 1fr}
  .slip{padding:18px}
}

/* ---------- cetak slip ---------- */
@media print{
  body::before,#sidebar,.topbar,#bottomNav,#toastRoot,#loader,.noprint{display:none !important}
  body.cetak .shell,body.cetak .mask>.sheet>*:not(.slip){display:none !important}
  body{background:#fff}
  .main{margin:0}
  .mask{position:static;background:none;backdrop-filter:none;padding:0}
  .sheet{box-shadow:none;border:0;max-height:none;padding:0;max-width:none}
  .slip{border:0;padding:0}
}