/* =========================================================
   inKUR LINK, Core System · Rebrand Mockup
   Shared stylesheet (white-dominant, brand accents)
   Brand: blue #035187 · red #ED2329 · white #FFFFFF
   ========================================================= */
:root{
  --blue:#035187;
  --blue-2:#0a6cad;
  --blue-ink:#043a61;
  --red:#ED2329;
  --red-2:#c81a20;
  --ink:#0f1b2d;
  --slate-700:#334155;
  --slate-600:#475569;
  --slate-500:#64748b;
  --slate-400:#94a3b8;
  --slate-300:#cbd5e1;
  --line:#e5eaf1;
  --panel:#eef4fb;
  --bg:#ffffff;
  --soft:#f6f9fd;
  --radius:16px;
  --font:'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 20px 45px -24px rgba(3,81,135,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
img{max-width:100%}

/* ---------- Shared logo lockup ---------- */
.logo{display:inline-flex;align-items:center;gap:13px;user-select:none;text-decoration:none}
.logo img{height:52px;width:auto;display:block}
.logo .brand{display:flex;flex-direction:column;line-height:1.05}
.logo .brand b{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--ink)}
.logo .brand span{font-size:10.5px;font-weight:500;letter-spacing:1.4px;color:var(--slate-400);text-transform:uppercase}

/* ---------- Nav (shared) ---------- */
.nav{display:flex;gap:34px}
.nav a{color:var(--slate-500);text-decoration:none;font-size:15px;font-weight:500;transition:color .2s;position:relative}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--blue);font-weight:600}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2.5px;border-radius:2px;background:var(--blue)}

/* ---------- Buttons ---------- */
.btn{border:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;text-decoration:none;
  padding:15px 28px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .15s var(--ease),box-shadow .2s,filter .2s,background .2s,border-color .2s}
.btn svg{width:18px;height:18px}
.btn.ghost{background:#fff;color:var(--ink);border:1.6px solid var(--line)}
.btn.ghost:hover{border-color:var(--slate-300);background:var(--soft)}
.btn.primary{background:linear-gradient(135deg,var(--blue-2),var(--blue));color:#fff;box-shadow:0 16px 28px -12px rgba(3,81,135,.55)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 22px 36px -12px rgba(3,81,135,.7);filter:saturate(1.05)}
.btn.primary:hover svg{transform:translateX(3px);transition:transform .2s}
.btn.primary:active{transform:translateY(0)}

/* =========================================================
   LOGIN (fullscreen)
   ========================================================= */
.app{position:relative;width:100vw;min-height:100dvh;overflow:hidden;background:var(--bg);display:flex;flex-direction:column}
.scene{position:absolute;inset:0 0 0 44%;z-index:0}
.scene svg{width:100%;height:100%;display:block}
.scene-illus{width:100%;height:100%;object-fit:contain;display:block;padding:clamp(20px,4vw,56px)}
.scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%, rgba(255,255,255,.9) 14%, rgba(255,255,255,.15) 44%, rgba(255,255,255,0) 100%)}
.path{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
.path path{stroke:rgba(3,81,135,.35);stroke-width:2;stroke-dasharray:2 11;stroke-linecap:round;fill:none;animation:dash 24s linear infinite}
@keyframes dash{to{stroke-dashoffset:-520}}

.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:46px;padding:26px clamp(28px,5vw,72px)}
/* auth pages: minimal header (logo left, action right) */
.app .lp-header{grid-template-columns:1fr auto}

.content{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:6px clamp(28px,5vw,72px) 18px;max-width:640px;width:56%}
.kicker{font-size:13px;font-weight:600;letter-spacing:3px;color:var(--blue);text-transform:uppercase;margin-bottom:10px}
.content h1{font-size:clamp(34px,4vw,50px);line-height:1.02;font-weight:800;letter-spacing:-1.2px;color:var(--ink)}
.content h1 .dot{color:var(--red)}
.lead{margin:14px 0 6px;font-size:14.5px;line-height:1.55;color:var(--slate-500);max-width:44ch}
.sub{margin:0 0 12px;font-size:14.5px;color:var(--slate-500)}
.sub a{color:var(--blue);font-weight:600;text-decoration:none}
.sub a:hover{text-decoration:underline}
.login-tabs{display:inline-flex;align-self:flex-start;background:var(--soft);border:1px solid var(--line);border-radius:13px;padding:4px;gap:4px;margin-bottom:10px}
.login-tabs .lt{border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--slate-500);padding:10px 20px;border-radius:10px;cursor:pointer;transition:.18s var(--ease)}
.login-tabs .lt.active{background:#fff;color:var(--blue);box-shadow:0 6px 14px -8px rgba(3,81,135,.4)}
.login-hint{font-size:13px;color:var(--slate-500);margin-bottom:12px;display:flex;align-items:center;gap:7px}
.login-hint svg{width:15px;height:15px;color:var(--blue);flex:none}
/* 2FA OTP inputs */
.otp{display:flex;gap:clamp(8px,1.6vw,13px);margin:8px 0 6px}
.otp input{width:clamp(46px,7vw,58px);height:clamp(56px,9vw,66px);text-align:center;font-size:26px;font-weight:700;
  color:var(--ink);background:#f8fafc;border:1.6px solid var(--line);border-radius:14px;outline:none;font-family:inherit;transition:.2s var(--ease)}
.otp input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(3,81,135,.13)}
.otp input:not(:placeholder-shown){border-color:var(--blue-2);background:#fff}
.otp-resend{font-size:13.5px;color:var(--slate-500)}
.otp-resend a{color:var(--blue);font-weight:600;text-decoration:none}
.otp-resend a:hover{text-decoration:underline}
.btn.block{width:100%;max-width:540px;justify-content:center;margin-top:22px}
/* modal (metode verifikasi lain) */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,27,45,.5);backdrop-filter:blur(3px)}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:20px;width:min(440px,100%);padding:26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.45);animation:modalpop .28s var(--ease)}
@keyframes modalpop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-card h3{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:4px}
.modal-card .msub{font-size:13.5px;color:var(--slate-500);margin-bottom:18px}
.mopt{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;margin-bottom:10px;transition:.18s var(--ease);cursor:pointer}
.mopt:hover{border-color:#cfe0f2;background:var(--soft)}
.mopt .mic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--panel);color:var(--blue);flex:none}
.mopt.red .mic{background:#fdeceb;color:var(--red)}
.mopt .mic svg{width:21px;height:21px}
.mopt b{display:block;font-size:14.5px;color:var(--ink);font-weight:700}
.mopt span{font-size:12.5px;color:var(--slate-500)}
.mopt .arr{margin-left:auto;color:var(--slate-400)}
.modal-close{background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--slate-500);cursor:pointer;margin-top:6px;width:100%;padding:11px;border-radius:10px;transition:.15s}
.modal-close:hover{background:var(--soft);color:var(--ink)}

.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:11.5px;font-weight:600;letter-spacing:.3px;padding:6px 12px;border-radius:999px;background:var(--soft);color:var(--slate-500);border:1px solid var(--line)}
.chip.live{color:#0b8a4f;background:#e7f7ee;border-color:#c7ecd6}
.chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#12b76a;display:inline-block;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 3px rgba(18,183,106,.18)}

form{display:flex;flex-direction:column;gap:11px;max-width:540px}
.field{position:relative;display:flex;align-items:center;background:#f8fafc;border:1.6px solid var(--line);border-radius:16px;
  padding:9px 11px 9px 18px;transition:border-color .2s var(--ease),background .2s,box-shadow .2s}
.field:hover{border-color:var(--slate-300)}
.field.focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(3,81,135,.13)}
.field .col{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.field .lbl{font-size:11.5px;font-weight:600;color:var(--slate-400);letter-spacing:.2px}
.field.focus .lbl{color:var(--blue)}
.field input{border:0;background:transparent;outline:none;color:var(--ink);font-family:inherit;font-size:16px;font-weight:600;letter-spacing:.2px;padding:0}
.field input::placeholder{color:var(--slate-400);font-weight:500}
.ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--panel);color:var(--blue);border:1px solid var(--line)}
.ic.btn2{cursor:pointer;transition:.2s}
.ic.btn2:hover{background:#e2ecf7}
.ic svg{width:19px;height:19px}

.misc{display:flex;align-items:center;justify-content:space-between;margin-top:4px;max-width:540px}
.remember{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--slate-600);cursor:pointer;user-select:none}
.remember input{position:absolute;opacity:0;width:0;height:0}
.cbox{width:18px;height:18px;border-radius:5px;border:1.6px solid var(--slate-300);display:grid;place-items:center;transition:.18s}
.remember input:checked + .cbox{background:var(--blue);border-color:var(--blue)}
.cbox svg{width:12px;height:12px;color:#fff;opacity:0}
.remember input:checked + .cbox svg{opacity:1}
.forgot{font-size:13.5px;color:var(--slate-500);text-decoration:none;font-weight:500}
.forgot:hover{color:var(--blue)}

.actions{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.foot{position:relative;z-index:3;padding:0 clamp(28px,5vw,72px) 16px;font-size:12px;color:var(--slate-400)}
.mark{position:absolute;right:clamp(24px,4vw,54px);bottom:clamp(20px,4vw,40px);z-index:2;height:clamp(70px,10vw,120px);width:auto;opacity:.10;pointer-events:none}

/* Login: kompres lebih rapat pada jendela pendek agar tetap tanpa scroll */
@media (max-height:760px){
  .content h1{font-size:clamp(28px,3.4vw,40px)}
  .kicker{margin-bottom:7px}
  .lead{margin:10px 0 4px;font-size:14px;line-height:1.5}
  .sub{margin-bottom:9px}
  .login-tabs{margin-bottom:8px}
  .login-hint{margin-bottom:9px}
  .chips{margin-bottom:10px}
  form{gap:9px}
  .field{padding:8px 11px 8px 18px}
  .actions{margin-top:12px}
  .foot{padding-bottom:12px}
}

/* =========================================================
   CONTENT PAGES (Panduan / Bantuan)
   ========================================================= */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(24px,5vw,64px)}
.site-header .logo img{height:46px}
.header-right{display:flex;align-items:center;gap:28px}
.header-right .btn{padding:11px 22px;font-size:14px}
@media (max-width:760px){.header-right .nav{display:none}}

.container{max-width:1120px;margin:0 auto;padding:0 clamp(24px,5vw,40px)}
.page-hero{padding:64px 0 26px;position:relative;overflow:hidden}
.page-hero .kicker{display:block}
.page-hero h1{font-size:clamp(32px,4.4vw,50px);font-weight:800;letter-spacing:-1.2px;line-height:1.05;margin-bottom:14px}
.page-hero h1 .dot{color:var(--red)}
.page-hero p{font-size:16px;color:var(--slate-500);max-width:60ch}

.section{padding:34px 0}
.section-title{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.section h2{font-size:26px;font-weight:800;letter-spacing:-.6px;margin-bottom:22px;color:var(--ink)}

.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.2s var(--ease)}
.card:hover{border-color:#cfe0f2;box-shadow:var(--shadow);transform:translateY(-2px)}
.card .cic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--panel);color:var(--blue);border:1px solid var(--line);margin-bottom:16px}
.card .cic svg{width:23px;height:23px}
.card h3{font-size:17px;font-weight:700;margin-bottom:7px}
.card p{font-size:14px;color:var(--slate-500);line-height:1.6}
.card .step-count{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.5px}

/* steps timeline */
.steps{display:flex;flex-direction:column;gap:2px;counter-reset:step}
.step{display:flex;gap:18px;padding:18px 0;border-bottom:1px dashed var(--line)}
.step:last-child{border-bottom:0}
.step .num{counter-increment:step;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue-2),var(--blue))}
.step .num::before{content:counter(step)}
.step h4{font-size:16px;font-weight:700;margin-bottom:4px}
.step p{font-size:14px;color:var(--slate-500)}

/* FAQ accordion */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:22px;height:22px;border-radius:6px;background:var(--panel);color:var(--blue);display:grid;place-items:center;font-weight:700;transition:.2s}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq .answer{padding:0 22px 20px;font-size:14px;color:var(--slate-500);line-height:1.65}

/* contact tiles */
.tile{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.tile .tic{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--panel);color:var(--blue);border:1px solid var(--line)}
.tile.red .tic{background:#fdeceb;color:var(--red);border-color:#f7d3d1}
.tile .tic svg{width:23px;height:23px}
.tile h3{font-size:16px;font-weight:700;margin-bottom:3px}
.tile p{font-size:14px;color:var(--slate-500)}
.tile a.linkline{color:var(--blue);font-weight:600;text-decoration:none;font-size:14px}
.tile a.linkline:hover{text-decoration:underline}

/* status banner */
.status{display:flex;align-items:center;gap:12px;background:#e7f7ee;border:1px solid #c7ecd6;color:#0b6b3f;
  border-radius:var(--radius);padding:16px 20px;font-size:14.5px;font-weight:600}
.status .dot{width:11px;height:11px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 4px rgba(18,183,106,.2)}

/* contact / ticket form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.form-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.form-group label{font-size:12.5px;font-weight:600;color:var(--slate-600)}
.form-group input,.form-group textarea,.form-group select{
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#f8fafc;border:1.6px solid var(--line);
  border-radius:12px;padding:13px 15px;outline:none;transition:.2s}
.form-group textarea{resize:vertical;min-height:110px}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--blue);background-color:#fff;box-shadow:0 0 0 4px rgba(3,81,135,.12)}
.form-group select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}

/* CTA band */
.cta{background:linear-gradient(135deg,var(--blue),var(--blue-ink));color:#fff;border-radius:22px;
  padding:44px clamp(26px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06)}
.cta h2{font-size:26px;font-weight:800;letter-spacing:-.5px;position:relative;color:#fff}
.cta p{color:#cfe0f2;margin-top:8px;font-size:15px;position:relative;max-width:52ch}
.cta .btn{position:relative;background:#fff;color:var(--blue)}
.cta .btn:hover{background:#eef4fb}

/* footer (rich, multi-column) */
.site-footer{border-top:1px solid var(--line);margin-top:48px;background:var(--soft)}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.5fr;gap:36px;padding:52px 0 40px}
.site-footer .lp-logo img{height:46px}
.foot-brand p{margin-top:14px;font-size:13.5px;color:var(--slate-500);max-width:34ch;line-height:1.65}
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--slate-500);transition:.2s}
.foot-social a:hover{color:var(--blue);border-color:#cfe0f2}
.foot-social svg{width:18px;height:18px}
.foot-col h4{font-size:12.5px;font-weight:700;letter-spacing:.6px;color:var(--ink);margin-bottom:16px;text-transform:uppercase}
.foot-col a{display:block;font-size:14px;color:var(--slate-500);text-decoration:none;margin-bottom:11px;transition:color .2s}
.foot-col a:hover{color:var(--blue)}
.foot-col p{font-size:13.5px;color:var(--slate-500);line-height:1.65;margin-bottom:12px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--line);font-size:13px;color:var(--slate-400)}
.foot-legal{display:flex;gap:22px}
.foot-legal a{color:var(--slate-400);text-decoration:none}
.foot-legal a:hover{color:var(--blue)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr;gap:28px}.foot-brand{grid-column:1 / -1}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}

/* =========================================================
   LANDING PAGE (public, index.html), quso.ai-style header
   ========================================================= */
:root{ --blue-bright:#2E90FA; }
.lp{min-height:100dvh;background:var(--bg);color:var(--ink)}

/* header: logo | centered nav | actions  (3-col grid keeps nav centered) */
.lp-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding:14px clamp(20px,4vw,54px)}
.lp-logo{justify-self:start;display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.lp-logo img{height:44px;width:auto}
.lp-logo b{font-size:13px;font-weight:800;letter-spacing:.3px;color:var(--ink);line-height:1.1;max-width:150px}
.lp-nav{justify-self:center;display:flex;gap:clamp(18px,2.4vw,38px);align-items:center}
.lp-nav a{color:var(--slate-600);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;transition:color .2s}
.lp-nav a:hover{color:var(--blue)}
.lp-nav a.nav-red{color:var(--red);font-weight:600}
.lp-nav a.nav-red:hover{color:var(--red-2)}
.lp-actions{justify-self:end;display:flex;align-items:center;gap:12px}
.lp-actions .btn{padding:11px 22px;font-size:14.5px}
.lp-ext{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--slate-600);text-decoration:none;white-space:nowrap;padding:9px 4px;transition:color .2s}
.lp-ext:hover{color:var(--blue)}
.lp-ext svg{width:15px;height:15px}
.lp-divider{width:1px;height:22px;background:var(--line)}
.btn.solid{background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;box-shadow:0 14px 26px -12px rgba(46,144,250,.6)}
.btn.solid:hover{transform:translateY(-1px);box-shadow:0 20px 32px -12px rgba(46,144,250,.75)}
.btn.red{background:linear-gradient(135deg,var(--red),var(--red-2));color:#fff;box-shadow:0 14px 26px -12px rgba(228,35,27,.5)}
.btn.red:hover{transform:translateY(-1px);box-shadow:0 20px 32px -12px rgba(228,35,27,.65);filter:saturate(1.05)}
.btn.navy{background:linear-gradient(135deg,#0a6cad,#043a61);color:#fff;box-shadow:0 14px 26px -12px rgba(4,58,97,.55)}
.btn.navy:hover{transform:translateY(-1px);box-shadow:0 20px 32px -12px rgba(4,58,97,.7);filter:saturate(1.05)}
.hamb{display:none;justify-self:end;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.hamb svg{width:22px;height:22px;color:var(--ink)}

/* hero (two-column: content + ecosystem illustration) */
.lp-hero{position:relative;overflow:hidden;padding:clamp(36px,5vw,68px) clamp(20px,4vw,54px) clamp(44px,5vw,76px)}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(circle, rgba(3,81,135,.09) 1.1px, transparent 1.2px);background-size:24px 24px;
  mask:radial-gradient(120% 100% at 72% 42%, #000 22%, transparent 72%)}
.lp-hero::after{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(46% 60% at 76% 32%, rgba(46,144,250,.10), transparent 70%)}
.hero-wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.hero-left{max-width:560px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--blue);
  background:#eef4fb;border:1px solid #d7e6f5;border-radius:999px;padding:7px 16px;margin-bottom:24px}
.hero-badge .d{width:8px;height:8px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 3px rgba(18,183,106,.2)}
.lp-hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.07;font-weight:800;letter-spacing:-1.6px;color:var(--ink)}
.lp-hero h1 .grad{background:linear-gradient(120deg,var(--blue-bright),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-hero .subtitle{margin:20px 0 0;max-width:48ch;font-size:16.5px;line-height:1.6;color:var(--slate-500)}
.hero-cta{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;margin-top:30px}
.hero-cta .btn{padding:16px 28px;font-size:15.5px}
.hero-right{position:relative}
.hero-illus{width:100%;height:auto;display:block}

/* stats */
.hero-stats{display:flex;gap:clamp(24px,4vw,52px);justify-content:flex-start;margin-top:38px;flex-wrap:wrap}
.hero-stats .stat b{display:block;font-size:32px;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(120deg,var(--blue-bright),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats .stat span{font-size:13.5px;color:var(--slate-500);font-weight:500}

@media (max-width:920px){
  .hero-wrap{grid-template-columns:1fr;gap:26px}
  .hero-right{order:2;max-width:520px;margin:0 auto;width:100%}
}

@media (max-width:900px){
  .lp-header{grid-template-columns:1fr auto}
  .lp-nav{display:none}
  .lp-actions{display:none}
  .hamb{display:flex}
}

/* ---------- Pengguna / trusted-by ---------- */
.logo-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:10px}
.logo-chip{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;transition:.2s var(--ease)}
.logo-chip:hover{border-color:#cfe0f2;box-shadow:var(--shadow);transform:translateY(-2px)}
.logo-chip .av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none;letter-spacing:.5px}
.logo-chip .txt{text-align:left}
.logo-chip b{display:block;font-size:14px;color:var(--ink);font-weight:700;line-height:1.15}
.logo-chip span{font-size:11.5px;color:var(--slate-500)}
/* marquee (auto-scroll partner logos) */
.marquee{position:relative;overflow:hidden;margin-top:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{flex:none;width:194px;height:112px;margin-right:20px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:.2s var(--ease)}
.mq-item:hover{border-color:#cfe0f2;box-shadow:var(--shadow)}
.mq-item img{max-width:150px;max-height:66px;object-fit:contain;display:block}

/* ---------- Landing sections ---------- */
.section.center{text-align:center}
.section.alt{background:var(--soft)}
.section.center .section-title{display:block}
.section.center h2{margin-bottom:12px}
.lead-center{max-width:62ch;margin:0 auto 26px;color:var(--slate-500);font-size:16px;text-align:center}

.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid.cols-4{grid-template-columns:1fr}}

/* product cards */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.product-grid{grid-template-columns:1fr}}
.product-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;position:relative;overflow:hidden;transition:.2s var(--ease);display:flex;flex-direction:column}
.product-card .btn{margin-top:auto;align-self:flex-start}
.product-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.product-card.blue::before{background:linear-gradient(90deg,var(--blue-bright),var(--blue))}
.product-card.red::before{background:linear-gradient(90deg,var(--red),var(--red-2))}
.product-card.navy::before{background:linear-gradient(90deg,#0a6cad,#043a61)}
.product-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.product-card .tag{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:1px;
  padding:6px 12px;border-radius:8px;background:var(--panel);color:var(--blue);margin-bottom:16px}
.product-card.red .tag{background:#fdeceb;color:var(--red)}
.product-card.navy .tag{background:#e7eef6;color:#043a61}
.product-card h3{font-size:21px;font-weight:800;margin-bottom:10px}
.product-card > p{font-size:14.5px;color:var(--slate-500);line-height:1.6;margin-bottom:18px}
.product-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.product-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--slate-700)}
.product-card li svg{width:19px;height:19px;color:#12b76a;flex:none;margin-top:1px}

/* numbered feature items */
.feat-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;transition:.2s var(--ease)}
.feat-item:hover{border-color:#cfe0f2;box-shadow:var(--shadow);transform:translateY(-2px)}
.feat-item .n{font-size:13px;font-weight:800;color:var(--red);letter-spacing:1.5px}
.feat-item h4{font-size:15.5px;font-weight:700;margin:10px 0 7px}
.feat-item p{font-size:13.5px;color:var(--slate-500);line-height:1.6}

/* ---------- Get Started (Ajukan Akses) ---------- */
.gs-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:start;padding-top:20px}
@media(max-width:880px){.gs-grid{grid-template-columns:1fr;gap:34px}}
.gs-left h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-1.2px;line-height:1.08;margin:6px 0 14px}
.gs-left h1 .dot{color:var(--red)}
.gs-left .lead{color:var(--slate-500);font-size:16px;margin-bottom:28px;line-height:1.6;max-width:46ch}
.gs-left .steps{margin-bottom:6px}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg label{flex:1;min-width:110px;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg .opt{border:1.6px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center;font-size:14px;font-weight:600;color:var(--slate-600);transition:.18s}
.seg input:checked + .opt{border-color:var(--blue);background:var(--panel);color:var(--blue);box-shadow:0 0 0 4px rgba(3,81,135,.1)}
.form-card .fc-head{margin-bottom:18px}
.form-card .fc-head h2{font-size:21px;font-weight:800;margin-bottom:4px}
.form-card .fc-head p{font-size:13.5px;color:var(--slate-500)}
.form-note{margin-top:14px;font-size:12.5px;color:var(--slate-500);display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.form-note svg{width:16px;height:16px;color:var(--blue);flex:none;margin-top:1px}
.form-card .btn.solid{width:100%;justify-content:center;margin-top:4px}

/* ============================================================
   DASHBOARD CORE (app shell) - white-dominant rebrand
   ============================================================ */
.dash{display:grid;grid-template-columns:92px 1fr;min-height:100dvh;background:#f4f7fc}
/* CANVAS MODE: seluruh desain (design width 1440) di-zoom mengikuti lebar layar via JS,
   supaya tampilan IDENTIK di monitor apapun (2K/4K). --cvh (= innerHeight/zoom) dipasang
   JS agar tinggi 100dvh tidak ikut terkali zoom -> tanpa scroll vertikal. Meniru app.inkurconnect.id */
body.canvas-mode .dash{min-height:var(--cvh,100dvh)}
body.canvas-mode .side{height:var(--cvh,100dvh)}
body.canvas-mode .flyout{max-height:var(--cvh,100dvh);transition:none}
/* canvas mode utk halaman non-dashboard (body di-zoom oleh canvas.js): override 100vw/100dvh
   yg akan ikut terkali zoom. --cvh = innerHeight/zoom supaya tinggi 1 layar tetap pas. */
body.canvas-mode .lp{min-height:var(--cvh,100dvh)}
body.canvas-mode .app{width:100%;min-height:var(--cvh,100dvh);height:var(--cvh,100dvh)}
/* flyout & backdrop dipindah JS ke <body> + diberi zoom sendiri: position:fixed di bawah ancestor
   zoom diabaikan Chrome, tapi elemen dgn zoom-nya SENDIRI sbg anak body -> top/left dihormati */
/* icon rail + tile launcher */
.rail-logo{padding:16px 2px;border-bottom:1px solid var(--line);display:flex;justify-content:center;width:100%}
.rail-logo img{height:66px;max-width:100%;object-fit:contain}
.rail-nav{flex:1;overflow-y:auto;padding:12px 8px;display:flex;flex-direction:column;gap:5px;align-items:center;width:100%}
.rail-nav::-webkit-scrollbar{width:5px}.rail-nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail-item{width:70px;padding:10px 4px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--slate-500);text-decoration:none;font-size:9.5px;font-weight:600;text-align:center;line-height:1.15;transition:.15s var(--ease)}
.rail-item svg{width:22px;height:22px}
.rail-item:hover{background:var(--soft);color:var(--ink)}
.rail-item.active{background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;box-shadow:0 10px 18px -10px rgba(3,81,135,.6)}
.rail-foot{padding:12px 0;border-top:1px solid var(--line);display:flex;justify-content:center;width:100%}
.rail-foot a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--slate-400)}
.rail-foot a:hover{background:var(--soft);color:var(--red)}
.launcher-head{margin-bottom:22px}
.launcher-head .k{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue)}
.launcher-head h2{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--ink);margin-top:4px}
.launcher-head p{font-size:14px;color:var(--slate-500);margin-top:4px}
.launcher-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px){.launcher-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.launcher-grid{grid-template-columns:1fr 1fr}}
.tile-lg{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;text-decoration:none;transition:.2s var(--ease)}
.tile-lg:hover{border-color:#cfe0f2;box-shadow:var(--shadow);transform:translateY(-3px)}
.tile-lg .tic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--panel);color:var(--blue)}
.tile-lg.red .tic{background:#fdeceb;color:var(--red)}
.tile-lg .tic svg{width:30px;height:30px}
.tile-lg b{font-size:14.5px;color:var(--ink);font-weight:700}
.tile-lg span{font-size:12px;color:var(--slate-500);line-height:1.4}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate-500);margin-bottom:6px}
.crumb a{color:var(--blue);text-decoration:none;font-weight:600}
.crumb svg{width:14px;height:14px}
.crumb-back{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:600;font-size:13.5px;margin-bottom:14px;text-decoration:none}
.crumb-back svg{width:16px;height:16px}
.badge-grp{display:inline-block;padding:3px 11px;border-radius:999px;background:var(--soft);color:var(--slate-600);font-size:11.5px;font-weight:700;border:1px solid var(--line)}
/* flyout menu (tile) yang menempel di rail */
.flyout-backdrop{position:fixed;inset:0 0 0 92px;z-index:39;background:rgba(15,27,45,.18);opacity:0;pointer-events:none;transition:.2s}
.flyout-backdrop.open{opacity:1;pointer-events:auto}
.flyout{position:fixed;left:92px;top:0;max-height:100dvh;z-index:40;padding:10px 0 10px 12px;transform:translateX(-24px);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.flycol{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 18px 38px -24px rgba(15,27,45,.4);flex:none}
.flycol-hd{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:14px}
.flyout.open{transform:none;opacity:1;pointer-events:auto}
.flyout-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.flyout-head b{font-size:18px;font-weight:800;color:var(--ink)}
.flyout-x{border:0;background:var(--soft);width:34px;height:34px;border-radius:10px;cursor:pointer;color:var(--slate-500);font-size:20px;line-height:1}
.flyout-x:hover{background:#e2e8f0;color:var(--ink)}
.flyout-grid{display:grid;grid-template-columns:repeat(2,226px);gap:11px}
@media(max-width:700px){.flyout-grid{grid-template-columns:1fr}}
.ftile{background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 13px;display:flex;align-items:center;gap:13px;text-decoration:none;transition:.18s var(--ease)}
.ftile:hover{border-color:#dbe7f4;box-shadow:0 16px 28px -18px rgba(3,81,135,.4);transform:translateY(-2px)}
.ftile .fic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--soft);color:var(--tc,var(--blue));flex:none;transition:.18s var(--ease)}
.ftile:hover .fic{background:var(--tc,var(--blue));color:#fff}
.ftile .fic svg{width:22px;height:22px}
.ftile .ft{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ftile b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.25}
.ftile .ft span{font-size:11px;color:var(--slate-500)}
.ftile .fgo{color:var(--slate-300);flex:none;transition:.18s var(--ease)}
.ftile:hover .fgo{color:var(--tc,var(--blue));transform:translateX(3px)}
.ftile.on{border-color:var(--tc,var(--blue));box-shadow:0 16px 28px -18px rgba(3,81,135,.4)}
.ftile.on .fic{background:var(--tc,var(--blue));color:#fff}
.ftile.on .fgo{color:var(--tc,var(--blue))}
@media(max-width:860px){.flyout{left:74px}.flyout-backdrop{left:74px}}
/* cascading columns nav (sidebar layer 2,3,4...) */
.navcols{display:flex;gap:12px;align-items:flex-start}
.navcard{flex:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 18px 38px -24px rgba(15,27,45,.4)}
.navcard-body{display:flex;align-items:flex-start}
.navcol-inner{width:226px;flex:none}
.navcol-inner + .navcol-inner{border-left:1px solid var(--line);margin-left:8px;padding-left:8px}
.navcol{width:242px;flex:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 18px 38px -24px rgba(15,27,45,.4)}
.navcol-hd{font-size:11px;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.6px;padding:9px 12px 8px}
.navcol-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:var(--slate-600);font-weight:600;font-size:14px;text-decoration:none;transition:.14s var(--ease)}
.navcol-item:hover{background:var(--soft);color:var(--ink)}
.navcol-item.on{background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff}
.nc-ic{width:30px;height:30px;display:grid;place-items:center;color:var(--blue);flex:none}
.navcol-item:hover .nc-ic{color:var(--ink)}
.navcol-item.on .nc-ic{color:#fff}
.nc-ic svg{width:19px;height:19px}
.nc-t{flex:1;white-space:normal;line-height:1.25}
.nc-go{color:var(--slate-300);flex:none;display:grid;place-items:center}
.nc-go svg{width:16px;height:16px}
.navcol-item.on .nc-go{color:rgba(255,255,255,.85)}
.tgl{width:42px;height:23px;border-radius:999px;background:var(--slate-300);position:relative;cursor:pointer;flex:none;transition:.2s}
.tgl.on{background:var(--blue)}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s}
.tgl.on::after{left:21px}
/* tab internal (MDI) */
.tabbar-wrap{position:relative;display:flex;align-items:stretch;background:#e3e9f2;border-bottom:1px solid var(--line)}
.tabbar{display:flex;gap:6px;align-items:flex-end;padding:9px clamp(14px,3vw,26px) 0;overflow-x:auto;flex:1;min-width:0}
.tabbar::-webkit-scrollbar{height:0}
.tabbar-nav{display:none;align-items:center;justify-content:center;width:34px;flex:none;border:none;background:#e3e9f2;color:var(--slate-500);cursor:pointer;padding:0;z-index:3}
.tabbar-nav svg{width:18px;height:18px}
.tabbar-nav:hover{color:var(--ink)}
.tabbar-wrap.scrollable .tabbar-nav{display:flex}
.tabbar-wrap.scrollable.at-start .tabbar-nav.prev{opacity:.28;pointer-events:none}
.tabbar-wrap.scrollable.at-end .tabbar-nav.next{opacity:.28;pointer-events:none}
.tabbar-wrap.scrollable::before,.tabbar-wrap.scrollable::after{content:"";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;z-index:2;transition:opacity .15s}
.tabbar-wrap.scrollable::before{left:34px;background:linear-gradient(90deg,#e3e9f2,rgba(227,233,242,0))}
.tabbar-wrap.scrollable::after{right:34px;background:linear-gradient(270deg,#e3e9f2,rgba(227,233,242,0))}
.tabbar-wrap.scrollable.at-start::before{opacity:0}
.tabbar-wrap.scrollable.at-end::after{opacity:0}
.tab{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:11px 11px 0 0;background:#fff;color:var(--slate-500);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;border:1px solid var(--line);border-top:3px solid transparent;border-bottom:none;opacity:.72;transition:.14s var(--ease)}
.tab:hover{opacity:1;color:var(--ink)}
.tab.on{opacity:1;color:var(--ink);font-weight:700;box-shadow:0 -8px 18px -10px rgba(15,27,45,.3);position:relative;z-index:1}
.tab-dot{width:8px;height:8px;border-radius:50%;flex:none}
.tab-x{border:0;background:none;color:var(--slate-400);cursor:pointer;font-size:15px;line-height:1;width:19px;height:19px;border-radius:5px;display:grid;place-items:center;flex:none}
.tab-x:hover{background:#e2e8f0;color:var(--red)}
.side{position:sticky;top:0;height:100dvh;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;z-index:41}
.side-brand{display:flex;align-items:center;gap:11px;padding:17px 20px;border-bottom:1px solid var(--line)}
.side-brand img{height:40px}
.side-brand .bt{font-size:12px;font-weight:800;color:var(--ink);line-height:1.15}
.side-brand .bt span{display:block;font-size:10px;font-weight:600;color:var(--slate-400);letter-spacing:.5px}
.side-nav{flex:1;overflow-y:auto;padding:12px 12px}
.side-nav::-webkit-scrollbar{width:6px}.side-nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.nav-group{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate-400);padding:13px 12px 5px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--slate-600);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;transition:.15s;margin-bottom:1px}
.nav-item svg{width:19px;height:19px;flex:none}
.nav-item .chev{margin-left:auto;width:15px;height:15px;color:var(--slate-400);transition:transform .2s var(--ease)}
.nav-item.open .chev{transform:rotate(90deg)}
.nav-item:hover{background:var(--soft);color:var(--ink)}
.nav-item.active{background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;box-shadow:0 10px 20px -10px rgba(3,81,135,.55)}
.nav-item.active .chev{color:#fff}
.nav-sub{display:none;flex-direction:column;margin:2px 0 6px 22px;padding-left:14px;border-left:1.5px solid var(--line)}
.nav-sub.show{display:flex}
.nav-sub a{padding:8px 12px;border-radius:9px;color:var(--slate-500);text-decoration:none;font-size:13.5px;transition:.15s}
.nav-sub a:hover{background:var(--soft);color:var(--blue)}
.nav-sub a.on{color:var(--blue);font-weight:600}
.side-foot{border-top:1px solid var(--line);padding:12px;display:flex;align-items:center;gap:11px}
.side-foot .who b{display:block;font-size:13px;color:var(--ink)}
.side-foot .who span{font-size:11.5px;color:var(--slate-500)}
.side-foot .out{margin-left:auto;color:var(--slate-400);display:grid;place-items:center;width:34px;height:34px;border-radius:9px}
.side-foot .out:hover{color:var(--red);background:var(--soft)}
.avatar-d{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}

.main{display:flex;flex-direction:column;min-width:0}
.topbar-d{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px max(clamp(16px,3vw,28px),(100% - 1440px)/2)}
.topbar-d h1{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.topbar-d .sub{font-size:12.5px;color:var(--slate-500);margin-top:1px}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.tb-title{min-width:0}
.tb-burger{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--slate-600);display:grid;place-items:center;cursor:pointer;flex:none}
.tb-burger:hover{background:var(--soft);color:var(--ink)}
.tb-burger svg{width:20px;height:20px}
.tb-quick{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;color:var(--slate-600);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.tb-quick:hover{background:var(--soft);color:var(--ink)}
.tb-quick svg{width:17px;height:17px}
@media(max-width:768px){.tb-quick{display:none}}
.tb-pusat{position:relative;display:flex}
.tb-pusat .pill{border:0;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tb-pusat .pill svg{width:12px;height:12px;opacity:.85}
.tb-mi .tb-chk-sp{width:18px;flex:none}
.dash.rail-collapsed{grid-template-columns:0 1fr}
.dash.rail-collapsed .side{border-right:0}
.tb-right{display:flex;align-items:center;gap:9px}
.pill{font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%}
.pill.ok{background:#e7f7ee;color:#0b8a4f}.pill.ok::before{background:#12b76a}
.pill.mut{background:var(--soft);color:var(--slate-500)}.pill.mut::before{background:var(--slate-400)}
.pill.err{background:#fdeceb;color:var(--red)}.pill.err::before{background:var(--red)}
@media(max-width:768px){.pill{display:none}}
.iconbtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--slate-600);cursor:pointer;position:relative}
.iconbtn:hover{background:var(--soft)}
.iconbtn svg{width:19px;height:19px}
.iconbtn .b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.search-d{display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:9px 13px;min-width:190px}
.search-d input{border:0;background:transparent;outline:none;font-family:inherit;font-size:13.5px;color:var(--ink);width:100%}
.search-d svg{width:16px;height:16px;color:var(--slate-400)}
@media(max-width:760px){.search-d{display:none}}
/* topbar: WhatsApp hijau, badge biru (dompet), avatar + dropdown akun (1:1 UI lama) */
.iconbtn.wa{color:#12a150}
.iconbtn.wa svg{width:17px;height:17px}
.iconbtn .b.blue{background:var(--blue-bright)}
.tb-dd{position:relative;display:flex}
.tb-ava{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;padding:0;overflow:hidden;flex:none}
.tb-ava img{width:30px;height:auto;display:block}
.tb-ava:hover{background:var(--soft)}
.tb-menu{position:absolute;top:calc(100% - 1px);right:0;min-width:216px;max-height:min(72vh,540px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;border-top-right-radius:0;box-shadow:0 24px 54px -22px rgba(15,27,45,.42);padding:6px;opacity:0;transform-origin:top right;transform:translateY(-6px) scale(.97);pointer-events:none;transition:.16s var(--ease);z-index:60}
.tb-menu.open{opacity:1;transform:none;pointer-events:auto}
.tb-dd:has(.tb-menu.open) [data-dd]{background:#fff;border:1px solid var(--line);border-bottom-color:#fff;border-radius:13px 13px 0 0;box-shadow:none;position:relative;z-index:61}
.tb-menu.wide{min-width:290px}
.tb-menu-h{font-size:13px;font-weight:700;color:var(--slate-600);text-align:center;padding:9px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:5px;position:sticky;top:-6px;background:#fff}
.tb-mi{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:.14s}
.tb-mi svg{width:18px;height:18px;color:var(--slate-500);flex:none}
.tb-mi:hover{background:var(--soft)}
.tb-mi.danger{color:var(--red)}.tb-mi.danger svg{color:var(--red)}
.acct-menu{padding:0;min-width:272px;overflow:hidden}
.acct-head{display:flex;align-items:center;gap:13px;padding:17px 17px 15px;background:linear-gradient(180deg,var(--soft),#fff);border-bottom:1px solid var(--line)}
.acct-av{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 4px 12px -6px rgba(15,27,45,.3)}
.acct-av img{width:34px;height:auto;display:block}
.acct-id{display:flex;flex-direction:column;min-width:0}
.acct-id b{font-size:15px;font-weight:800;color:var(--ink);line-height:1.25}
.acct-id>span{font-size:12.5px;color:var(--slate-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-tag{align-self:flex-start;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.4px;color:var(--blue);background:rgba(3,81,135,.1);padding:2px 9px;border-radius:20px;margin-top:6px}
.acct-list{padding:6px}
.acct-out{margin:0 6px 8px;border-radius:10px}
.acct-out:hover{background:#fdecec}
.rat-title{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:16px}
.rat-year{display:flex;gap:12px;align-items:flex-end;margin-bottom:20px}
.rat-run{padding:12px 20px;white-space:nowrap;flex:none}
.rat-form{display:grid;gap:15px;margin:16px 0}
.rat-sec{font-size:15.5px;font-weight:700;color:var(--ink);margin:2px 0 -2px}
.rat-shared{border-top:1px solid var(--line);margin-top:6px;padding-top:18px;display:grid;gap:15px}
.rat-wide{width:100%;justify-content:center;padding:12px}
.file-inp{font-family:inherit;font-size:13px;color:var(--slate-500);width:100%}
.file-inp::file-selector-button{font-family:inherit;font-size:13px;padding:9px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;margin-right:11px;transition:.15s}
.file-inp::file-selector-button:hover{background:var(--soft)}
@media(max-width:900px){.rat-grid{grid-template-columns:1fr}}
.lap-filter{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.lap-qh,.lap-ja{color:var(--blue);font-size:13px;font-weight:700;margin-bottom:7px}
.lap-ja{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.lap-q{font-size:18px;font-weight:700;color:var(--ink);line-height:1.4}
.lap-top{align-items:center}
.lap-distro{display:flex;flex-direction:column;justify-content:center}
.drow{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:0}
.dic{width:36px;height:36px;border-radius:10px;background:var(--soft);color:var(--blue);display:grid;place-items:center;flex:none}
.dic svg{width:20px;height:20px}
.dmid{flex:1;min-width:0}
.dtop{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:6px}
.dtop b{color:var(--ink);font-weight:700}.dtop span{color:var(--slate-500);font-weight:700}
.tb-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:9px 13px;border-radius:9px}
.tb-row:hover{background:var(--soft)}
.tb-row span{font-size:13.5px;color:var(--slate-600);font-weight:500}
.tb-row small{display:block;font-size:11.5px;color:var(--slate-400);margin-top:2px}
.tb-row b{font-size:13.5px;color:var(--ink);font-weight:700;white-space:nowrap}
/* dashboard multi-tab panels */
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.dash-head h2{font-size:22px;font-weight:800;color:var(--ink)}
.dbar-row{padding:11px 0;border-bottom:1px solid var(--line)}
.dbar-row:last-child{border-bottom:0}
.dbar-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.dbar-top span{font-size:13.5px;color:var(--slate-600)}
.dbar-top b{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap}
.dbar-track{height:5px;background:#eef2f7;border-radius:4px;overflow:hidden}
.dbar-track i{display:block;height:100%;border-radius:4px}
.drek{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.drek .di{width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--blue);display:grid;place-items:center;flex:none}
.drek .di svg{width:19px;height:19px}
.drek .dl{flex:1;font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.3}
.drek .dv{text-align:right}
.drek .dv small{display:block;font-size:10.5px;color:var(--slate-400)}
.drek .dv b{font-size:16px;font-weight:800;color:var(--ink)}
.drek-go{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--slate-400);flex:none}
.drek-go:hover{background:var(--soft);color:var(--blue)}
.drek-go svg{width:17px;height:17px}
.dmini-row{display:flex;gap:18px}
.dmini{flex:1;min-width:0}
.dmini b{display:block;font-size:18px;font-weight:800;color:var(--ink);white-space:nowrap}
.dmini span{display:block;font-size:12px;color:var(--slate-500);margin:4px 0 9px}
/* form detail bertingkat (FORMSPEC) */
.fspec{padding:0;overflow:hidden}
.fspec-banner{background:linear-gradient(120deg,#e6f4fb,#dbeafe);padding:22px 28px;border-bottom:1px solid var(--line)}
.fspec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fspec-head h2{font-size:22px;font-weight:800;color:var(--ink)}
.fspec-head p{font-size:13.5px;color:var(--slate-500);margin-top:5px;max-width:62ch;line-height:1.5}
.fspec-head .login-tabs{margin:0;background:rgba(255,255,255,.5)}
.fspec-grid{padding:26px 28px;column-count:3;column-gap:30px}
@media(max-width:1100px){.fspec-grid{column-count:2}}
@media(max-width:680px){.fspec-grid{column-count:1}}
.fspec-sec{margin:0 0 24px;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.fspec-fields{display:block}
.fspec-sec h3{font-size:16px;font-weight:800;color:var(--blue);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.fspec-sec .opt{font-size:10px;font-weight:700;background:#f5b301;color:#fff;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px}
.fspec .form-group{margin-bottom:16px}
.fspec .form-group label{display:block;overflow:hidden}
.fspec .req{color:var(--red)}
.fspec-check{float:right;font-weight:500;font-size:12.5px;color:var(--slate-500);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fspec-check input{margin:0}
.fspec-foot{padding:4px 28px 26px;display:flex;gap:12px}
.fspec-foot.has-confirm{padding:20px 28px 24px;margin-top:6px;border-top:1px solid var(--line);justify-content:space-between;align-items:center}
.fspec-confirm{font-weight:500;font-size:13.5px;color:var(--slate-600);cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.fspec-confirm input{margin:0;width:16px;height:16px}
/* Data Pengguna SAAS (tab Keanggotaan) */
.saas-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.saas-head h3{font-size:18px;font-weight:800;color:var(--ink)}
.saas-head .mut{font-size:12.5px;color:var(--slate-500);margin-top:2px}
.tenant-badge{background:var(--blue-bright);color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;white-space:nowrap;flex:none}
.tenant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:768px){.tenant-grid{grid-template-columns:1fr}}
.tenant-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.tenant-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;font-size:12.5px;font-weight:700}
.tenant-bar .tb-dom{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tenant-bar svg{width:15px;height:15px;flex:none}
.tenant-body{padding:15px}
.tenant-id{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.tenant-id .av{width:44px;height:44px;border-radius:12px;color:#fff;font-weight:800;font-size:17px;display:grid;place-items:center;flex:none}
.tenant-id .ti{min-width:0}
.tenant-id .ti b{display:block;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-id .ti small{display:block;font-size:11.5px;color:var(--slate-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0 5px}
.tstatus{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.tstatus.on{background:#e7f7ee;color:#0b8a4f}
.tstatus.off{background:var(--soft);color:var(--slate-500)}
.tenant-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tstat{background:var(--soft);border-radius:10px;padding:11px 6px;text-align:center}
.tstat b{display:block;font-size:16px;font-weight:800;color:var(--ink)}
.tstat span{display:block;font-size:9px;color:var(--slate-400);text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
/* sub-launcher gaya daftar vertikal */
.sublist{max-width:640px}
.sublist-hd{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-bottom:14px;background:#fff;box-shadow:0 10px 26px -20px rgba(15,27,45,.35)}
.sublist-hd .sl-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;display:grid;place-items:center;flex:none}
.sublist-hd .sl-av svg{width:27px;height:27px}
.sublist-hd .sl-back{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--slate-500);display:grid;place-items:center;flex:none;text-decoration:none}
.sublist-hd .sl-back:hover{background:var(--soft);color:var(--blue);border-color:#cfe0f2}
.sublist-hd .sl-back svg{width:18px;height:18px}
.sublist-hd b{display:block;font-size:23px;font-weight:800;color:var(--ink);line-height:1.1}
.sublist-hd span{font-size:13px;color:var(--slate-500)}
.sublist-item{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:15px 18px;margin-bottom:10px;background:#fff;text-decoration:none;transition:.16s var(--ease)}
.sublist-item:hover{border-color:#cfe0f2;background:var(--soft)}
.sublist-item .sl-ic{width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--blue);display:grid;place-items:center;flex:none}
.sublist-item:hover .sl-ic{background:#fff}
.sublist-item .sl-ic svg{width:19px;height:19px}
.sublist-item .sl-t{flex:1;font-size:15px;font-weight:700;color:var(--ink)}
.sublist-item .sl-go{color:var(--slate-400);display:grid;place-items:center}
.sublist-item .sl-go svg{width:18px;height:18px}
.sublist-item:hover .sl-go{color:var(--blue)}
/* accordion (grup -> sub-menu drop) */
.acc-grp{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#fff;overflow:hidden;transition:.16s var(--ease)}
.acc-grp.open{border-color:#cfe0f2;box-shadow:0 14px 30px -20px rgba(15,27,45,.4)}
.acc-head{display:flex;align-items:center;gap:14px;padding:15px 18px;text-decoration:none;cursor:pointer;user-select:none}
.acc-grp.open .acc-head{background:var(--soft)}
.acc-head .sl-ic{width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--blue);display:grid;place-items:center;flex:none}
.acc-grp.open .acc-head .sl-ic{background:#fff}
.acc-head .sl-ic svg{width:19px;height:19px}
.acc-head .sl-t{flex:1;font-size:15px;font-weight:700;color:var(--ink)}
.acc-chev{color:var(--slate-400);display:grid;place-items:center;transition:transform .2s var(--ease)}
.acc-chev svg{width:18px;height:18px}
.acc-grp.open .acc-chev{transform:rotate(90deg);color:var(--blue)}
.acc-body{padding:6px 12px 12px 64px}
.acc-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--slate-600);text-decoration:none;transition:.14s}
.acc-item:hover{background:var(--soft);color:var(--ink)}
.acc-dot{width:6px;height:6px;border-radius:50%;background:var(--slate-300);flex:none}
.acc-item:hover .acc-dot{background:var(--blue)}
.kpi-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px}
.kpi-line{padding:4px 0 4px 14px;border-left:3px solid #ccc}
.kpi-line span{display:block;font-size:12.5px;color:var(--slate-500);margin-bottom:4px}
.kpi-line b{font-size:19px;font-weight:800;color:var(--ink)}
@media(max-width:768px){.kpi-lines{grid-template-columns:repeat(2,1fr)}}
.pf{display:flex;align-items:center;gap:11px}
.pf-ic{width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--blue);display:grid;place-items:center;flex:none}
.pf-ic svg{width:18px;height:18px}
.pf b{font-size:13.5px;color:var(--ink)}
.pf small{display:block;font-size:11px;color:var(--slate-400)}
.pf-sub{font-size:11px;color:var(--slate-400);margin-top:2px}
.chg{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}
.chg.up{background:#e7f7ee;color:#0b8a4f}
.chg.down{background:#fdeceb;color:var(--red)}
.ratios{margin-top:8px}
.ratio-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13.5px;border-top:1px solid var(--line)}
.ratio-row span{color:var(--slate-600);font-weight:600}
.ratio-row b{color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.ratio-row i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.ratio-row i.up{border-bottom:7px solid #12b76a}
.ratio-row i.down{border-top:7px solid var(--red)}
.tb-depo{padding:11px 13px;border-bottom:1px solid var(--line)}
.tb-depo:last-of-type{border-bottom:0}
.tb-depo b{display:block;font-size:14px;font-weight:800;color:var(--ink);text-transform:uppercase;margin-bottom:6px}
.tb-bar{display:block;height:4px;background:#eef2f7;border-radius:4px;overflow:hidden;margin-bottom:7px}
.tb-bar i{display:block;height:100%;background:var(--red);border-radius:4px}
.tb-depo small{font-size:12.5px;color:var(--slate-500)}
.tb-note{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px;font-size:13.5px;color:var(--ink);font-weight:500;text-decoration:none}
.tb-note:hover{background:var(--soft)}
.tb-note .nd{width:7px;height:7px;border-radius:50%;background:var(--blue-bright);flex:none}
.tb-foot{display:block;text-align:center;padding:11px;margin-top:5px;border-top:1px solid var(--line);color:var(--blue);font-weight:700;font-size:13px;text-decoration:none;position:sticky;bottom:-6px;background:#fff}
.tb-foot:hover{background:var(--soft)}
@media(max-width:768px){.search-d{min-width:150px}}

.content-d{padding:clamp(16px,3vw,26px) max(clamp(16px,3vw,26px),(100% - 1440px)/2);display:flex;flex-direction:column;gap:18px}
.dtabs{display:flex;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:5px;overflow-x:auto}
.dtabs a{padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--slate-500);text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:.15s}
.dtabs a.on{background:var(--panel);color:var(--blue)}
.dtabs a:hover:not(.on){background:var(--soft);color:var(--ink)}
/* elemen klik custom (a tanpa href) -> kursor pointer, jangan seleksi teks */
[data-dash],[data-open],[data-browse],[data-nav],[data-navback],[data-act],[data-noop],[data-dd],[data-del],[data-tgl],[data-pg]{cursor:pointer;user-select:none}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:768px){.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.kpis{grid-template-columns:1fr}}
.kpi-d{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.kpi-d .r{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.kpi-d .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--panel);color:var(--blue)}
.kpi-d .ic.red{background:#fdeceb;color:var(--red)}.kpi-d .ic.green{background:#e7f7ee;color:#0b8a4f}.kpi-d .ic.navy{background:#e7eef6;color:#043a61}
.kpi-d .ic svg{width:21px;height:21px}
.kpi-d .delta{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:#e7f7ee;color:#0b8a4f}
.kpi-d .delta.down{background:#fdeceb;color:var(--red)}
.kpi-d .v{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.kpi-d .l{font-size:12.5px;color:var(--slate-500);margin-top:2px}

.grid-2{display:grid;grid-template-columns:1.7fr 1fr;gap:18px}
@media(max-width:768px){.grid-2{grid-template-columns:1fr}}
.card-d{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.card-d .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.card-d .h h3{font-size:15.5px;font-weight:700;color:var(--ink)}
.card-d .h .mut{font-size:12.5px;color:var(--slate-500)}
.seg-d{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg-d button{border:0;background:transparent;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--slate-500);padding:7px 14px;border-radius:8px;cursor:pointer}
.seg-d button.on{background:#fff;color:var(--blue);box-shadow:0 3px 8px -4px rgba(3,81,135,.4)}
.legend-d{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--slate-600);justify-content:center;margin-top:14px}
.legend-d i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}

.statstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:768px){.statstrip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.statstrip{grid-template-columns:1fr 1fr}}
.statcell{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;text-align:center}
.statcell b{font-size:21px;font-weight:800;color:var(--ink)}
.statcell span{display:block;font-size:11.5px;color:var(--slate-500);margin-top:2px}
.statcell .bar{height:4px;border-radius:2px;margin-top:10px}

.dtbl{width:100%;border-collapse:collapse}
.dtbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--slate-400);padding:0 10px 12px}
.dtbl td{padding:12px 10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--slate-700)}
.dtbl .co{display:flex;align-items:center;gap:10px}
.dtbl .co .a{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:11px;color:#fff;flex:none}
.dtbl .co b{font-size:13.5px;color:var(--ink);font-weight:600}
.tag-sm2{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px}
.tag-sm2.ksp{background:var(--panel);color:var(--blue)}.tag-sm2.ksr{background:#fdeceb;color:var(--red)}
.badge2{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.badge2.on{background:#e7f7ee;color:#0b8a4f}.badge2.wait{background:#fff4e5;color:#b76e00}.badge2.new{background:var(--panel);color:var(--blue)}.badge2.off{background:var(--soft);color:var(--slate-500)}
.tbl-wrap{overflow-x:auto}

/* ---- List / Tabel template ---- */
.page-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:16px}
.tool-left{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inp-sm{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 13px;min-width:230px}
.inp-sm svg{width:16px;height:16px;color:var(--slate-400)}
.inp-sm input{border:0;background:transparent;outline:none;font-family:inherit;font-size:13.5px;color:var(--ink);width:100%}
.sel-sm{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:11px;padding:10px 38px 10px 13px;font-family:inherit;font-size:13.5px;color:var(--slate-700);outline:none;cursor:pointer}
.sel-sm:focus{border-color:var(--primary,#035187)}
.dtbl tbody tr:hover{background:var(--soft)}
.act{display:inline-flex;gap:6px}
.act a{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--slate-500);background:#fff}
.act a svg{width:15px;height:15px}
.act a:hover{color:var(--blue);border-color:#cfe0f2}
.act a.del:hover{color:var(--red);border-color:#f7d3d1}
.pagi{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.pagi .info{font-size:13px;color:var(--slate-500)}
.pagi .pages{display:flex;gap:6px}
.pagi .pages a{min-width:34px;height:34px;padding:0 8px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--slate-600);text-decoration:none;font-size:13.5px;background:#fff}
.pagi .pages a:hover{background:var(--soft)}
.pagi .pages a.on{background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;border-color:transparent}
/* ---- List template gaya DataTables (1:1 sistem lama) ---- */
.list-banner{background:#f6f9fd;border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.list-banner h2{font-size:22px;font-weight:800;color:var(--ink)}
.list-banner p{font-size:13.5px;color:var(--slate-500);margin-top:4px}
.lb-text{min-width:0}
.lb-headsel{min-width:300px;flex:none}
.cell-thumb{display:inline-flex;align-items:center;justify-content:center;width:46px;height:34px;border-radius:8px;color:#fff;font-weight:700;font-size:12px;letter-spacing:.5px}
.co-2{display:flex;flex-direction:column;gap:2px}
.co-2 b{font-weight:600;color:var(--ink)}
.co-unit{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--slate-500)}
.co-unit svg{color:var(--blue)}
.dtbl .tgl{display:inline-block;vertical-align:middle}
.list-note{margin-top:14px;font-size:13px;color:var(--red);font-weight:600}
.bt-grid{align-items:start;grid-template-columns:1.7fr 1fr}
.bt-tab{display:inline-block;padding:9px 18px;border:1px solid var(--line);border-bottom:0;border-radius:11px 11px 0 0;font-size:13.5px;font-weight:600;color:var(--ink);position:relative;z-index:1;margin-bottom:-1px;background:#fff}
.bt-cash{display:grid;grid-template-columns:1fr 1fr;gap:26px;border:1px solid var(--line);border-radius:0 12px 12px 12px;padding:20px;background:#f6fafd}
.bt-cash-head{font-size:13px;color:var(--slate-600);margin-bottom:14px;line-height:1.5}
.bt-cash-head b{display:block;color:var(--ink);font-size:15px;margin-top:2px}
.denom-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.denom-row label{flex:1;font-size:13px;color:var(--slate-600)}
.denom-row input{width:130px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:13.5px;text-align:right;outline:none;background:#fff}
.denom-row input:focus{border-color:var(--blue)}
.bt-total-bar{background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;text-align:center;font-weight:700;padding:12px;border-radius:10px;margin-bottom:15px}
.bt-total{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.bt-total span{font-size:13px;color:var(--slate-500);display:block;margin-bottom:2px}
.bt-total b{font-size:26px;font-weight:800;color:var(--ink)}
.bt-login{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:34px 26px}
.bt-lock{width:98px;height:98px;border-radius:50%;background:#fef3e2;color:#f59e0b;display:grid;place-items:center;margin-bottom:6px}
.bt-login h3{font-size:20px;font-weight:800;color:var(--ink);line-height:1.3}
.bt-login p{font-size:13.5px;color:var(--slate-500);line-height:1.55;max-width:330px;margin:0}
.bt-masuk{background:#12b76a;color:#fff;padding:13px 22px;font-size:15px;width:100%;justify-content:center;margin-top:10px}
.bt-masuk:hover{background:#0e9d5a}
@media(max-width:900px){.bt-grid,.bt-cash{grid-template-columns:1fr}}
.tf-card{padding:0;overflow:hidden;max-width:1040px}
.tf-banner{background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;padding:22px 26px}
.tf-banner.tf-b-edit{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.tf-banner.tf-b-detail{background:linear-gradient(135deg,#22c55e,#12b76a)}
.tf-banner h2{font-size:20px;font-weight:800}
.tf-banner p{font-size:13.5px;opacity:.9;margin-top:3px}
.tf-sec{display:flex;gap:24px;padding:24px 26px;border-bottom:1px solid var(--line)}
.tf-ic{width:90px;height:90px;border-radius:18px;display:grid;place-items:center;flex:none}
.tf-ic-user{background:var(--soft);color:var(--slate-400)}
.tf-ic-lock{background:#e7f7ee;color:#12b76a}
.tf-cols{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;min-width:0}
.tf-col{display:flex;flex-direction:column}
.tf-col .form-group{margin-bottom:16px}
.tf-note{display:block;font-size:11.5px;color:var(--slate-400);margin-top:6px}
.tf-card .form-group input.tf-ro{background:#eef2f7;color:var(--slate-500);cursor:not-allowed}
.tf-foot{display:flex;gap:12px;padding:20px 26px}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding:22px 26px}
.lf-grid .form-group{margin-bottom:16px}
.lf-grid .fg-full{grid-column:1 / -1}
@media(max-width:760px){.lf-grid{grid-template-columns:1fr}}
.dp-grid{display:grid;grid-template-columns:1.3fr 1fr 0.92fr;gap:16px;align-items:start}
.dp-col{display:flex;flex-direction:column;gap:16px}
.dp-ava{width:150px;height:150px;border-radius:50%;background:var(--soft);color:#cbd5e1;display:grid;place-items:center;margin:4px auto 16px}
.dp-title{font-size:18px;font-weight:700;color:var(--blue);padding-bottom:12px;border-bottom:2px solid var(--line);margin-bottom:6px}
.dp-title b{color:var(--ink);font-weight:800}
.dp-sec{font-size:16px;font-weight:800;color:var(--blue);margin-bottom:8px}
.dp-tbl{width:100%;border-collapse:collapse}
.dp-tbl td{padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top;line-height:1.45}
.dp-tbl tr:last-child td{border-bottom:0}
.dp-tbl td:first-child{color:var(--slate-500);width:46%}
.dp-tbl td:last-child{color:var(--ink);font-weight:700}
.dp-rp{text-align:right}
.dp-empty{background:#fdecec;color:var(--slate-600);padding:15px;border-radius:10px;text-align:center;font-size:13.5px;margin-bottom:14px}
.dp-setor{width:100%;justify-content:center;margin-bottom:9px;background:#fff;border:1px solid var(--line);color:var(--slate-500);font-weight:600}
.dp-setor:hover{background:var(--soft)}
.dp-actions{gap:11px}
.dp-act{width:100%;justify-content:center;padding:13px;font-size:14px;font-weight:700;color:#fff;border:0}
.dp-act.g{background:#12b76a}.dp-act.g:hover{background:#0e9d5a}
.dp-act.bl{background:var(--blue)}.dp-act.bl:hover{background:#024067}
.dp-act.r{background:#ED2329}.dp-act.r:hover{background:#c81a20}
.dp-pin{width:100%;text-align:center;padding:12px;border:1px solid var(--line);border-radius:10px;color:var(--slate-400);font-size:13.5px;margin:5px 0}
.dp-submenu{display:none;flex-direction:column;gap:9px;margin:2px 0 3px}
.dp-submenu.open{display:flex}
.dp-sub-item{display:flex;align-items:center;gap:11px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;color:var(--slate-600);font-size:13.5px;font-weight:600;background:#fff}
.dp-sub-item:hover{border-color:var(--blue);color:var(--blue);background:rgba(3,81,135,.05)}
.dp-sub-item svg{width:17px;height:17px;color:var(--blue-bright);flex-shrink:0}
@media(max-width:960px){.dp-grid{grid-template-columns:1fr}}
.mdl-backdrop{position:fixed;inset:0;background:rgba(15,27,45,.5);opacity:0;pointer-events:none;transition:.2s;z-index:200}
.mdl-backdrop.open{opacity:1;pointer-events:auto}
.mdl{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);width:min(620px,94vw);max-height:88vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(15,27,45,.6);opacity:0;pointer-events:none;transition:.2s var(--ease);z-index:201}
.mdl.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.mdl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px;background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;border-radius:16px 16px 0 0;position:sticky;top:0;z-index:10}
.mdl-head.g{background:linear-gradient(135deg,#22c55e,#12b76a)}
.mdl-head.r{background:linear-gradient(135deg,#f87171,#ED2329)}
.mdl-head.w{background:#fff;color:var(--ink);border-bottom:1px solid var(--line);border-radius:16px 16px 0 0}
.mdl-head.w p{color:var(--slate-500);opacity:1}
.mdl-head.w .mdl-x{color:var(--slate-400)}
.mdl.wide{max-width:min(960px,96vw)}
.inv-top{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin-bottom:16px}
.inv-fcol{display:flex;flex-direction:column;gap:11px}
.inv-fld{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.inv-fld-lbl{display:flex;align-items:center;gap:7px;padding:0 13px;background:var(--soft);color:var(--slate-600);font-size:12.5px;font-weight:600;white-space:nowrap;border-right:1px solid var(--line)}
.inv-fld-lbl svg{width:15px;height:15px}
.inv-fld input,.inv-fld select{flex:1;border:0;padding:10px 12px;outline:none;font-size:13.5px;min-width:0;background:#fff}
.inv-fld input.inv-ro{background:var(--soft);color:var(--slate-500)}
.inv-detlbl{font-size:13px;font-weight:600;color:var(--slate-600);margin:4px 0 10px}
.inv-entry{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.inv-entry input{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px;outline:none;width:74px}
.inv-entry input.inv-ket{flex:1;min-width:180px;width:auto}
.inv-add{background:linear-gradient(135deg,#22c55e,#12b76a);color:#fff;border:0;white-space:nowrap;padding:9px 16px}
.inv-tbl th:last-child,.inv-tbl td:last-child{text-align:center}
.inv-totals{margin:6px 0 4px}
.inv-totals>div{display:flex;justify-content:flex-end;gap:40px;padding:7px 12px;border-top:1px solid var(--line)}
.inv-totals>div span{color:var(--slate-500);font-size:13px}
.inv-totals>div b{min-width:80px;text-align:right;font-weight:700}
.inv-totals .gt b,.inv-totals .gt span{font-size:15px;font-weight:800;color:var(--ink)}
.inv-bottom{display:grid;grid-template-columns:1fr 210px;gap:22px;margin-top:16px}
.inv-notes label,.inv-bayar label{display:block;font-size:12.5px;color:var(--slate-600);margin-bottom:5px;font-weight:600}
.inv-notes textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-height:56px;resize:vertical;outline:none}
.inv-sign{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.inv-sign input,.inv-bayar input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;outline:none;font-size:13.5px}
.inv-save{background:linear-gradient(135deg,#22c55e,#12b76a);color:#fff;border:0}
.kt-top{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-bottom:4px}
.kt-body .inv-fld{margin-bottom:10px}
.kt-sec{margin-top:8px}
.kt-sign{margin-top:12px}
.kontak-body{display:flex;flex-direction:column;gap:12px}
.kontak-fld label{display:block;font-size:13px;color:var(--slate-600);margin-bottom:6px}
.pajak-body{display:flex;flex-direction:column;gap:14px}
.pajak-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pajak-lbl{font-weight:700;color:var(--slate-500);font-size:13px}
/* Tambah Pegawai (Pengurus/Pengawas/Karyawan) modal */
.mdl.wide:has(.peg-grid){width:min(1060px,97vw);max-width:none}
.mdl.wide:has(.tps-grid){width:min(1040px,96vw);max-width:none}
.peg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}
.peg-col .form-group{margin:0 0 12px}
.peg-sec{color:var(--blue);font-size:16px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.peg-col .peg-sec:not(:first-child){margin-top:22px}
.peg-opt{background:#fef3c7;color:#b45309;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px}
.peg-nip{display:flex;gap:8px}
.peg-nip input{flex:1}
.peg-pen{border:1px solid var(--line);background:var(--soft);border-radius:8px;width:44px;flex:none;display:grid;place-items:center;cursor:pointer;color:var(--slate-500)}
.peg-pen:hover{color:var(--blue)}
.peg-dom{display:flex;justify-content:space-between;align-items:center;gap:10px}
.peg-same{font-weight:500;font-size:12px;color:var(--slate-600);display:flex;align-items:center;gap:5px}
.peg-file{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.peg-choose{background:var(--soft);padding:9px 12px;font-size:12.5px;cursor:pointer;border-right:1px solid var(--line);white-space:nowrap}
.peg-file>span{padding:9px 12px;font-size:12.5px;color:var(--slate-400)}
.peg-foot{justify-content:space-between;align-items:center}
.peg-consent{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--slate-600);cursor:pointer}
/* Voucher Pengaturan */
.vp-card{background:#e6f6fb;border:1px solid #c7ebf3;border-radius:18px;padding:20px}
.vp-banner{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.vp-illus{flex:none}
.vp-btext{flex:1}
.vp-btext h2{font-size:20px;font-weight:800;color:var(--ink)}
.vp-btext p{font-size:13px;color:var(--slate-600);margin-top:3px;max-width:640px}
.vp-add{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:12px 20px;font-size:14px;font-weight:600;align-self:flex-start;white-space:nowrap}
.vp-add:hover{filter:brightness(1.05)}
.vp-tabs{border:none;margin-bottom:0;gap:4px}
.vp-tabs .ltab{background:#d4eef6;border:1px solid #c7ebf3;border-bottom:none;border-radius:10px 10px 0 0;color:var(--slate-500)}
.vp-tabs .ltab.on{background:#fff;color:var(--ink);font-weight:700}
.vp-inner{border-radius:0 14px 14px 14px;margin:0}
.vp-recv{background:linear-gradient(135deg,#2E90FA,#1e6fd0);color:#fff;float:right;padding:11px 18px;font-size:13.5px;margin-bottom:10px}
.vp-recv:hover{filter:brightness(1.05)}
.vp-expand-wrap{display:none;clear:both}
.vp-expand-wrap.open{display:block}
.vp-expand{display:flex;gap:24px;flex-wrap:wrap;background:#eaf7fb;border:1px solid #d4eef6;border-radius:12px;padding:18px 20px;margin-bottom:16px}
.vp-exp-l{flex:1;min-width:320px}
.vp-exp-l p{font-size:13px;color:var(--slate-600);margin-bottom:12px;line-height:1.6}
.vp-give{border-color:#2E90FA;color:#2E90FA}
.vp-exp-r{min-width:280px}
.vp-csv-h{display:block;font-size:13px;color:var(--slate-600);margin-bottom:8px}
.vp-csv{display:flex;align-items:center;gap:0}
.vp-file{border:1px solid var(--line);border-right:none;border-radius:8px 0 0 8px;background:#f1f5f9;padding:9px 12px;font-size:12.5px;color:var(--slate-600);cursor:pointer;white-space:nowrap}
.vp-fname{border:1px solid var(--line);padding:9px 12px;font-size:12.5px;color:var(--slate-400);flex:1;white-space:nowrap;overflow:hidden}
.vp-upload{background:linear-gradient(135deg,#2E90FA,#1e6fd0);color:#fff;border-radius:0 8px 8px 0;padding:9px 16px;font-size:13px}
.vp-sample{display:inline-block;margin-top:8px;font-size:12.5px;color:#2E90FA;font-weight:600}
/* Tambah Jenis Voucher modal */
.vj-body{display:flex;flex-direction:column;gap:14px}
.vj-fld label{display:block;font-size:13.5px;color:var(--ink);font-weight:600;margin-bottom:3px}
.vj-sub{display:block;font-size:11.5px;color:var(--slate-500);margin-bottom:7px;line-height:1.5}
.vj-fld input,.vj-fld select{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;outline:none;background:#fff}
.vj-fld select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.vj-div{border-top:1px solid var(--line);margin:4px 0}
/* Laporan Voucher */
.vlv-filters .filter-bar{border-bottom:none;margin-bottom:0;padding-bottom:0}
.vlv-badge{display:inline-block;font-size:11px;font-weight:700;color:#fff;border-radius:6px;padding:2px 7px;margin-left:4px}
.vlv-badge.g{background:#16b364}
.vlv-badge.b{background:#2E90FA}
.vlv-badge.o{background:#f59e0b}
.vlv-badge.d{background:#334155}
.vlv-badge.r{background:#ED2329}
/* Topup Request */
.tp-head{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:8px}
.tp-date{flex:1;min-width:260px;max-width:420px}
.tp-date label{display:block;font-size:13px;color:var(--slate-600);margin-bottom:6px}
.tp-date input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:13.5px;outline:none}
.tp-info h2{font-size:20px;font-weight:800;color:var(--ink)}
.tp-info p{font-size:13.5px;color:var(--slate-600);margin-top:3px}
/* Transaksi Aplikasi */
.tx-title{font-size:22px;font-weight:800;color:var(--blue);margin-bottom:16px}
.tx-filter{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.tx-item{display:flex;flex-direction:column;gap:6px;flex:1;min-width:170px}
.tx-item label{font-size:13px;color:var(--slate-600)}
.tx-item input,.tx-item select{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13.5px;outline:none;width:100%}
.tx-act{flex:none;min-width:auto}
.tx-cari{padding:10px 28px;font-size:13.5px}
.tx-summary{text-align:right;font-size:13px;color:var(--slate-600);font-weight:600;margin-bottom:10px}
.tx-hd{margin-bottom:16px}
.tx-title2{font-size:22px;font-weight:800;color:var(--ink)}
.tx-sub{font-size:13px;color:var(--slate-500);margin-top:2px}
/* Set Info Pengguna */
.sip-grid{display:grid;grid-template-columns:520px 1fr;gap:20px;align-items:start}
.sip-title{font-size:20px;font-weight:800;color:var(--ink);line-height:1.3}
.sip-sub{font-size:13px;color:var(--slate-600);margin:4px 0 18px}
.sip-fld{margin-bottom:14px}
.sip-fld label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.sip-fld input,.sip-fld select,.sip-fld textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:13.5px;outline:none;resize:vertical}
.sip-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sip-add{display:inline-block;margin-top:6px;background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:12px 22px;font-size:14px;font-weight:600}
.sip-add:hover{filter:brightness(1.05)}
/* Daftar Layanan Produk Jasa (SAAS) */
.dl-tbl td{vertical-align:top}
.dl-nama b{color:var(--ink);font-size:14px}
.dl-fitur{font-size:12px;color:var(--blue);margin-top:2px}
.dl-tbl .ju-num div{line-height:1.7}
/* Daftar Pelanggan Layanan (SAAS) */
.pl-tbl td{vertical-align:top}
.pl-mut{font-size:12px;color:var(--slate-500);margin-top:3px}
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.pl-grid .form-group{margin-bottom:14px}
.pl-grid textarea{min-height:96px;resize:vertical}
/* Penjualan Layanan Jasa (SAAS) */
.pnl-fbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 18px;padding-bottom:20px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.pnl-fbar .filter-item{flex:1;min-width:170px;margin:0}
.pnl-fbar .inp-date,.pnl-fbar .sel-sm{width:100%}
.inp-date{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;color:var(--ink);background:#fff;font-family:inherit}
.pnl-fbtns{display:flex;flex-direction:column;gap:8px;min-width:120px}
.pnl-filter{background:var(--blue-bright);color:#fff;padding:9px 18px;font-size:13.5px;display:flex;align-items:center;gap:7px;justify-content:center}
.pnl-reset{background:var(--slate-400);color:#fff;padding:9px 18px;font-size:13.5px;justify-content:center}
.pnl-tbl td{vertical-align:top}
.pnl-pel b{color:var(--ink)}
.pnl-mut{font-size:12px;color:var(--slate-500);margin-top:2px}
.pnl-badge{display:inline-block;background:#22c55e;color:#fff;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:6px}
.pnl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 26px}
.pnl-grid .form-group{margin-bottom:14px}
.pnl-grid .form-group input,.pnl-grid .form-group select,.pnl-grid .form-group textarea{width:100%}
.pnl-pellbl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pnl-addpel{padding:6px 12px;font-size:12px;display:inline-flex;align-items:center;gap:5px}
.pnl-spec{padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--slate-400);background:#f8fafc}
.pnl-thb{font-weight:700;font-size:14px;margin:6px 0 10px}
.pnl-sum{background:#eaf6fb;border:1px solid #cde8f2;border-radius:10px;padding:13px 15px;margin-bottom:14px;font-size:13.5px;color:#0b6b86;line-height:1.9}
.pnl-disc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.pnl-sn{display:flex;gap:8px}
.pnl-sn input{flex:1}
.pnl-snbtn{width:44px;flex:none;border:1px solid var(--line);border-radius:9px;background:#f1f5f9;color:var(--slate-500);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pnl-ket{min-height:150px;resize:vertical}
/* Daftar Layanan Aktif (SAAS) */
.la-tbl td{vertical-align:top}
.la-sn b{color:var(--ink)}
.la-mut{font-size:12px;color:var(--slate-500);margin-top:2px}
.la-link{color:var(--blue-bright);text-decoration:none}
.la-link:hover{text-decoration:underline}
.la-tbl td.la-aktif{color:#12b76a;font-weight:600;white-space:nowrap}
.la-perpanjang{padding:7px 14px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.psn-tbl{width:100%;border-collapse:collapse;margin-bottom:16px}
.psn-tbl th,.psn-tbl td{border:1px solid var(--line);padding:11px 14px;font-size:13.5px;text-align:left;vertical-align:top}
.psn-tbl th{background:#f8fafc;font-weight:700;color:var(--ink);width:40%}
.psn-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.psn-row .form-group{margin-bottom:8px}
.psn-row input,.psn-row select{width:100%}
.psn-hint{font-size:12px;color:var(--slate-500);margin-top:4px}
/* Pengaturan Modul Jasa SAAS */
.mod-kode b{color:var(--ink)}
.mod-body .form-group{margin-bottom:14px}
.mod-body input,.mod-body select{width:100%}
.mod-hint{font-weight:400;color:var(--slate-400);font-size:12px}
.mod-token{display:flex;gap:8px;align-items:stretch}
.mod-token input{flex:1}
.mod-gen{flex:none;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border:1px solid var(--line);border-radius:9px;color:var(--slate-600);font-size:13px;background:#f8fafc;white-space:nowrap}
/* Atur Simpanan - Tambah Produk Simpanan (KSP) */
.tps-help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--blue-bright);color:#fff;font-size:11px;font-weight:700;vertical-align:middle;margin-left:4px}
.tps-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 30px}
.tps-sec{font-size:14px;font-weight:700;color:var(--ink);margin:20px 0 4px}
.tps-col>.tps-sec:first-child{margin-top:0}
.tps-badge{display:inline-block;background:var(--blue-bright);color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px;margin-left:6px;vertical-align:middle}
.tps-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.tps-rlbl{flex:1;min-width:0}
.tps-rlbl label{font-size:13.5px;color:var(--slate-600);font-weight:500;display:block}
.tps-sub{font-size:11.5px;color:var(--slate-400);margin-top:2px}
.tps-note{font-size:11.5px;color:var(--red);margin-top:4px;line-height:1.5}
.tps-rctrl{width:190px;flex:none}
.tps-rctrl input,.tps-rctrl select,.tps-stack input,.tps-stack textarea,.tps-stack select{width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);background:#f8fafc;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;transition:.18s}
.tps-rctrl input:focus,.tps-rctrl select:focus,.tps-stack input:focus,.tps-stack textarea:focus,.tps-stack select:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(3,81,135,.12)}
.tps-rctrl select,.tps-stack select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.tps-rctrl input::placeholder,.tps-stack textarea::placeholder{color:var(--slate-400)}
.tps-hint{font-size:11px;color:var(--slate-400);margin-top:4px}
.tps-stack{margin-bottom:12px}
.tps-stack label{display:block;font-size:13.5px;color:var(--slate-600);font-weight:500;margin-bottom:6px}
.tps-stack textarea{min-height:96px;resize:vertical}
.tps-file{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tps-choose{background:#f1f5f9;border:1px solid var(--line);border-radius:6px;padding:5px 11px;font-size:12px;cursor:pointer;white-space:nowrap;color:var(--slate-600)}
.tps-file span{font-size:12px;color:var(--slate-500)}
/* Buka Rekening Simpanan (KSP) */
.brs-title{color:var(--blue-bright);font-weight:700;font-size:15px;margin-bottom:14px}
.brs-box{border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.brs-box.brs-band{border:none;background:var(--soft);border-radius:12px}
.brs-field label{display:block;font-size:13px;color:var(--slate-600);margin-bottom:6px}
.brs-field .inv-fld{width:100%}
.brs-ro{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;background:var(--soft);color:var(--slate-400);text-align:center}
.brs-warn{margin-top:16px;background:#fdf6e3;border:1px solid #f5e6b8;border-radius:8px;padding:14px 16px;font-size:13.5px;color:#8a6d3b}
.brs-warn b{color:#8a6d3b}
@media(max-width:900px){.brs-box{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Request Buka Rekening Simpanan Umum Online (KSP) */
.rru-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--soft);margin:-20px -20px 18px;padding:16px 20px;border-radius:16px 16px 0 0;border-bottom:1px solid var(--line)}
.rru-head h2{font-size:18px;font-weight:800;color:var(--ink)}
.rru-tools{display:flex;gap:9px}
.rru-cari{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:9px 16px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.rru-print{background:var(--blue-bright);color:#fff;padding:9px 16px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.rru-filter{border-bottom:none;margin:0;padding:0}
.rru-filter .filter-item{min-width:0}
.rru-filter .inv-fld{width:100%}
.ksp-sumrow td{font-weight:700;color:var(--ink);border-top:1px solid var(--line);padding:12px 14px}
.lbs-tools{flex-wrap:wrap;justify-content:flex-end}
.lbs-filter{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.lbs-filter .filter-item{flex:1;min-width:150px}
.lbs-filter .inv-fld{width:100%}
.lbs-filter .lbs-status{flex:0 0 150px}
.lbs-filter .lbs-action{flex:0 0 auto}
.lbs-filter .lbs-action .btn{white-space:nowrap}
/* Mutasi Saldo Simpanan (KSP) */
.mss-card{background:var(--soft);padding:0}
.mss-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px}
.mss-head h2{font-size:19px;font-weight:800;color:var(--ink);flex-shrink:0}
.mss-f{display:flex;flex-direction:column;gap:6px}
.mss-f label{font-size:12.5px;color:var(--slate-600)}
.mss-f .inv-fld{min-width:210px;background:#fff}
.mss-btns{display:flex;flex-direction:column;gap:8px;margin-left:auto}
.mss-cari{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:9px 16px;font-size:13px;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.mss-btns .rru-print{justify-content:center}
.mss-info{display:flex;justify-content:space-between;gap:20px;padding:6px 2px 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.mss-row{display:flex;font-size:14px;color:var(--slate-700);margin-bottom:7px}
.mss-lbl{width:180px;display:inline-block}
.mss-info-r{font-size:14px;color:var(--slate-700)}
/* Point Anggota */
.pt-card{padding:0;overflow:hidden}
.pt-banner{display:flex;align-items:center;gap:24px;background:#e6f6fb;padding:26px 30px}
.pt-illus{flex:none}
.pt-text{flex:1}
.pt-text h2{font-size:20px;font-weight:800;color:var(--ink)}
.pt-text p{font-size:13px;color:var(--slate-600);margin-top:4px;max-width:680px;line-height:1.6}
.pt-pill{display:inline-block;margin-top:12px;border:1px solid #9dcfe0;color:#2E90FA;background:#f4fbfd;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600}
.pt-inner{padding:22px 24px}
/* Info/Pengumuman (Pengaturan Informasi) */
.ip-card{padding:26px 30px}
.ip-title{font-size:22px;font-weight:800;color:var(--ink)}
.ip-sub{font-size:13.5px;color:var(--slate-600);margin:4px 0 20px}
.ip-fields{display:flex;flex-direction:column;gap:18px}
.ip-fld label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:7px}
.ip-fld input{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:13.5px;color:var(--slate-700);outline:none}
.ip-fld input:focus{border-color:var(--blue)}
.ip-foot{margin-top:24px}
.ip-save{padding:12px 22px;font-size:14px}
/* Draft Gaji / Honor */
.dg-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
.dg-left{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:14px;padding:22px}
.dg-left h2{font-size:19px;font-weight:800;color:var(--ink)}
.dg-left>p{font-size:12.5px;color:var(--slate-600);margin:4px 0 16px;line-height:1.5}
.dg-fld{margin-bottom:12px}
.dg-fld label{display:block;font-size:13px;color:var(--slate-600);margin-bottom:6px}
.dg-fld .inp-sm{width:100%}
.dg-fld .inp-sm select,.dg-fld .inp-sm input{width:100%}
.dg-pick{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:12px;font-size:14px;font-weight:600}
.dg-pick:hover{filter:brightness(1.05)}
.dg-right{padding:0}
.dg-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--soft);border-radius:14px 14px 0 0}
.dg-perlbl{font-size:13px;color:var(--slate-600);padding:0 4px;white-space:nowrap}
.dg-buat{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:10px 16px;font-size:13.5px;margin-left:auto}
.dg-batal{background:linear-gradient(135deg,var(--red),var(--red-2));color:#fff;padding:10px 16px;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
.dg-buat:hover,.dg-batal:hover{filter:brightness(1.05)}
.dg-right .dt-toolbar,.dg-right .tbl-wrap,.dg-right .pagi{padding-left:18px;padding-right:18px}
.dg-right .dt-toolbar{padding-top:16px}
.dg-right .pagi{padding-bottom:16px}
/* Gaji Karyawan (Slip Gaji) */
.gk-banner{align-items:center;gap:16px;flex-wrap:wrap}
.gk-period{flex:1;min-width:180px;max-width:260px}
.gk-period .inv-fld{width:100%}
.gk-proses{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:9px 16px;font-size:13px}
.gk-rekap{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:9px 16px;font-size:13px}
.gk-proses:hover,.gk-rekap:hover{filter:brightness(1.05)}
.gk-filters{margin-bottom:16px}
.gk-filters .filter-bar{border-bottom:none;margin:0;padding:0}
.gk-filters .filter-item{min-width:260px;flex:1}
.gk-filters .inp-sm{width:100%}
.gk-filters .inp-sm input,.gk-filters .inp-sm select{width:100%}
/* Laporan Gaji / Honor */
.lg-card{padding:22px 26px}
.lg-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.lg-head h2{font-size:20px;font-weight:800;color:var(--ink)}
.lg-period{flex:1;min-width:200px;max-width:320px}
.lg-period .inv-fld{width:100%}
.lg-cetak{margin-left:auto;padding:10px 18px;font-size:13.5px}
.lg-filter{border-bottom:none;margin-bottom:0;padding-bottom:0}
.lg-filter .filter-item{min-width:260px;flex:1}
.lg-filter .inp-sm{width:100%}
.lg-filter .inp-sm input,.lg-filter .inp-sm select{width:100%}
.lg-result{margin-top:18px;border:1px solid var(--line);border-radius:10px;min-height:60px}
/* Whatsapp Blast */
.wb-grid{display:grid;grid-template-columns:400px 1fr;gap:20px;align-items:start}
.wb-left{text-align:center}
.wb-logo{display:flex;justify-content:center;margin-bottom:10px}
.wb-title{font-size:19px;font-weight:800;color:var(--ink)}
.wb-hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.wb-left .form-group{text-align:left;margin-bottom:14px}
.wb-left .form-group label{display:block;font-size:13.5px;color:var(--slate-600);margin-bottom:6px}
.wb-left .form-group input,.wb-left .form-group select,.wb-left .form-group textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:13.5px;outline:none;resize:vertical}
.wb-tags{text-align:left}
.wb-tags p{font-size:12.5px;color:var(--slate-600);margin-bottom:3px}
.wb-tags b{color:var(--ink)}
.wb-foot{text-align:center}
.wb-send{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:12px 24px;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.wb-send:hover{filter:brightness(1.05)}
.wb-hist{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.wb-hist h3{font-size:16px;font-weight:800;color:var(--ink)}
.wb-hfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-cari{padding:9px 16px;font-size:13px}
/* Mitra Driver/Kurir */
.md-tabs{display:flex;gap:20px;align-items:flex-start}
.md-tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--slate-400);font-size:12px;font-weight:600}
.md-tab svg{width:30px;height:30px}
.md-tab.on{color:var(--blue)}
.md-map{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:360px;color:var(--slate-400);background:linear-gradient(180deg,#eef4f8,#f8fafc);border-radius:10px;border:1px dashed var(--line)}
.md-map svg{width:48px;height:48px;color:#94a3b8}
.md-map span{font-size:16px;font-weight:700;color:var(--slate-500)}
.md-map small{font-size:12.5px}
.mo-ico{width:48px;height:48px;border-radius:50%;background:#e6f2fb;display:grid;place-items:center;color:var(--blue)}
.mo-ico svg{width:26px;height:26px}
.mo-2h{line-height:1.4}
/* Kehadiran (Absensi) */
.abs-banner{align-items:center;gap:16px;flex-wrap:wrap}
.abs-banner .lb-text p{font-size:13px;color:var(--slate-500);margin-top:2px}
.abs-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.abs-per{min-width:230px}
.abs-menu{border:none;background:transparent;color:var(--slate-500);cursor:pointer;padding:0 4px;display:grid;place-items:center}
.abs-menu svg{width:16px;height:16px}
.abs-mode{min-width:120px}
.abs-cetak{padding:9px 16px;font-size:13px}
.abs-tambah{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:9px 16px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.abs-tambah:hover{filter:brightness(1.05)}
.abs-tbl{min-width:1500px}
.abs-tbl th,.abs-tbl td{white-space:nowrap}
/* Laporan Harian Teller & Validasi */
.lht-card{padding:22px 26px}
.lht-unit{flex:1;min-width:360px;max-width:600px}
.lht-unit select{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:13.5px;color:var(--ink);outline:none;background:#fff;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.lht-filter{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:16px 0 18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.lht-act{margin-left:auto}
.lht-act>label{display:block}
.lht-btns{display:flex;gap:8px}
.vlt-stats{display:flex;align-items:center;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}
.vlt-stat{flex:1;min-width:150px;padding:2px 20px;border-left:3px solid #2E90FA}
.vlt-stat.r{border-left-color:var(--red)}
.vlt-stat span{display:block;font-size:12.5px;color:var(--slate-500)}
.vlt-stat b{display:block;font-size:20px;font-weight:800;color:var(--ink);margin-top:3px}
.vlt-btn{margin-left:auto;padding:9px 16px;font-size:13px}
.trx-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.trx-form{padding:24px 26px}
.trx-banner{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.trx-banner.kons{background:#e6e1c5;padding:16px 20px;border-radius:12px}
.trx-btext{flex:1;min-width:200px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.trx-banner.kons .trx-btext{display:block}
.trx-btext h2{font-size:20px;font-weight:800;color:var(--ink)}
.trx-banner.kons .trx-btext p{font-size:13px;color:var(--slate-600);margin-top:4px;font-weight:500}
.trx-upload{padding:9px 16px;font-size:13px}
.trx-unitbox{min-width:250px}
.trx-unitbox label{display:block;font-size:12.5px;color:var(--blue);font-weight:600;margin-bottom:6px}
.trx-field{margin-bottom:14px}
.trx-lbl{display:block;font-size:13.5px;font-weight:700;color:var(--blue);margin-bottom:7px}
.trx-addk{color:var(--blue);font-weight:600;font-size:12.5px;margin-left:6px}
.trx-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.trx-field .inv-fld textarea{flex:1;border:0;padding:10px 12px;outline:none;font-size:13.5px;min-height:52px;resize:vertical;background:#fff;font-family:inherit}
.trx-nominal{font-size:20px;font-weight:700}
.trx-opsional{display:inline-block;color:var(--slate-500);font-size:13px;text-decoration:underline;margin:2px 0 16px}
.trx-save{width:100%;justify-content:center;padding:13px;font-size:15px;font-weight:700}
.trx-side{display:flex;flex-direction:column;gap:20px}
.trx-side .card-d{padding:20px}
.trx-sec{font-size:16px;font-weight:800;color:var(--blue);margin-bottom:14px}
.trx-rekap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.trx-rekap span{display:block;font-size:12.5px;color:var(--slate-500);margin-bottom:5px}
.trx-box{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--slate-500)}
.trx-total>span{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.trx-total .inv-fld input{font-size:18px;font-weight:800}
.trx-unitname{font-size:12px;color:var(--slate-500);margin-bottom:10px}
.trx-rdate td{font-weight:700;color:var(--ink);background:var(--soft);font-size:12.5px}
.trx-recent td{font-size:12.5px}
.trx-rj{text-align:right;color:var(--slate-500)}
@media(max-width:900px){.trx-grid{grid-template-columns:1fr}.trx-2{grid-template-columns:1fr}}
.aset-form{padding:24px 26px}
.aset-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 26px;margin-bottom:6px;align-items:start}
.aset-form .form-group label{display:block;font-size:13px;color:var(--slate-600);font-weight:600;margin-bottom:6px}
.aset-form .form-group input,.aset-form .form-group select,.aset-form .form-group textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;outline:none;font-size:13.5px;background:#fff}
.aset-form textarea{min-height:44px;resize:vertical;font-family:inherit}
.aset-sec{font-size:19px;font-weight:800;color:var(--ink);margin:22px 0 12px}
.aset-check{display:inline-block;font-size:14px;color:var(--slate-700);cursor:pointer;margin-bottom:4px}
.aset-cb{width:16px;height:16px;vertical-align:middle;margin-right:9px}
.aset-peny{display:none;background:#eafaf0;border:1px solid #b7ebc9;border-radius:12px;padding:20px;margin-top:12px}
.aset-cb:checked ~ .aset-peny{display:block}
.aset-metode{display:flex;gap:8px}
.aset-metode select{flex:1}
.aset-pct{display:flex;align-items:center;padding:0 12px;background:var(--soft);border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--slate-500);white-space:nowrap}
.aset-hint{display:block;font-size:11.5px;color:#0b8a4f;margin-top:5px}
.aset-tahun{display:flex;gap:8px}
.aset-tahun input{flex:1}
.aset-tahun span{display:flex;align-items:center;padding:0 14px;background:var(--soft);border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--slate-500)}
.aset-note{font-size:12.5px;color:var(--slate-600);margin-top:12px;line-height:1.7}
.aset-foot{display:flex;justify-content:flex-end;border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
@media(max-width:900px){.aset-3{grid-template-columns:1fr}}
.bayar-filters{display:flex;flex-wrap:wrap;gap:16px 26px;padding:4px 0 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.bf-item>label{display:block;font-size:12.5px;color:var(--blue);font-weight:600;margin-bottom:7px}
.bf-period,.bf-unit{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.bf-item .inv-fld{min-width:170px}
.bf-view{background:linear-gradient(135deg,#22c55e,#12b76a);color:#fff;border:0;padding:9px 22px;align-self:stretch}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#22c55e;color:#fff;font-size:11px;font-weight:700;margin-left:6px}
.rd-grid{display:grid;grid-template-columns:420px 1fr;gap:20px;align-items:start}
.rd-form{padding:24px 26px}
.rd-form h2,.rd-hist h2{font-size:20px;font-weight:800;color:var(--ink)}
.rd-sub{font-size:13px;color:var(--slate-500);margin:6px 0 18px;line-height:1.6}
.rd-form .form-group{margin-bottom:16px}
.rd-form label{display:block;font-size:13px;color:var(--slate-600);font-weight:600;margin-bottom:7px}
.rd-form select,.rd-form input{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;outline:none;font-size:13.5px;background:#fff}
.rd-hint{display:block;font-size:11.5px;color:var(--slate-400);margin-top:6px}
.rd-foot{display:flex;justify-content:flex-end;margin-top:6px}
.rd-hist{padding:24px 26px}
.rd-hist-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.rd-date{max-width:210px}
@media(max-width:900px){.rd-grid{grid-template-columns:1fr}}
.keu-filter{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;padding:4px 0 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.keu-filter label{display:block;font-size:12.5px;color:var(--blue);font-weight:600;margin-bottom:7px}
.kf-left{flex:1;min-width:280px}
.kf-row{display:flex;gap:10px}
.kf-left .inv-fld{flex:1}
.kf-item .inv-fld{min-width:150px}
.kf-print{margin-left:auto;white-space:nowrap}
.ju-2{display:flex;flex-direction:column;gap:2px;line-height:1.4}
.ju-2 b{font-weight:700;color:var(--ink)}
.ju-2 span{font-size:12px;color:var(--slate-500)}
.ju-badge{display:inline-block;width:-moz-fit-content;width:fit-content;padding:1px 8px;border-radius:5px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;margin-top:3px}
.ju-num{text-align:right}
.bb-card{padding:24px 26px}
.bb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.bb-head h2{font-size:20px;font-weight:800;color:var(--ink)}
.bb-unit{min-width:280px}
.bb-unit>label,.bb-akun>label,.bb-periode>label{display:block;font-size:12.5px;color:var(--blue);font-weight:600;margin-bottom:7px}
.bb-filter{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;padding:0 0 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.bb-akun{flex:1;min-width:240px}
.bb-akun select{width:100%}
.kf-row{display:flex;gap:10px;align-items:stretch}
.bb-month{border:1px solid var(--line);border-radius:8px;padding:9px 11px;outline:none;font-size:13px}
.bb-show{background:linear-gradient(135deg,#22c55e,#12b76a);color:#fff;border:0;white-space:nowrap}
.bb-badge{display:inline-block;padding:3px 12px;border-radius:6px;background:var(--blue);color:#fff;font-size:11px;font-weight:700}
.bb-sum td{font-weight:800;color:var(--ink);background:var(--soft)}
.bb-sum2 td{border-top:2px solid var(--line)}
.da-period{display:flex;gap:8px}
.da-period .inv-fld{min-width:180px}
.da-search{padding:9px 12px}
.da-tbl{min-width:1500px}
.da-tbl th,.da-tbl td{white-space:nowrap;font-size:12.5px;vertical-align:top}
.da-tbl .ju-2{white-space:normal;min-width:120px}
.da-foto{width:60px;height:52px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:8px;color:var(--slate-400);padding:4px;background:var(--soft)}
.da-act{display:flex;flex-direction:column;gap:3px}
.da-act a{font-size:11.5px;color:var(--blue);font-weight:600;white-space:nowrap}
.da-act a.del{color:var(--red)}
.aa-btns{display:flex;flex-direction:column;gap:8px;align-self:flex-end;margin-left:auto}
.aa-view{background:linear-gradient(135deg,#22c55e,#12b76a);color:#fff;border:0;white-space:nowrap;justify-content:center}
.aa-act{flex-direction:row;gap:6px}
.aa-lihat{padding:5px 12px;border-radius:6px;background:#12b76a;color:#fff;font-size:12px;font-weight:600}
.aa-edit{padding:5px 12px;border-radius:6px;background:#f5a524;color:#fff;font-size:12px;font-weight:600}
.aa-proses{background:linear-gradient(135deg,#22c55e,#12b76a);color:#fff;border:0;padding:8px 16px;white-space:nowrap}
.ns-bb{color:var(--blue);font-weight:600;font-size:12.5px}
.sp-cat td{font-weight:800;color:var(--blue);font-size:14px;padding-top:14px}
.tb-new{background:linear-gradient(135deg,#22c55e,#12b76a);color:#fff;border:0;white-space:nowrap}
.tb-unit{margin-bottom:16px}
.tb-unit span{font-size:12.5px;color:var(--slate-500);font-weight:600}
.tb-unit h3{font-size:22px;font-weight:800;color:var(--ink);margin:2px 0 8px}
.tb-unit p{font-size:13px;color:var(--slate-600)}
.tb-fg{margin-bottom:14px}
.tb-fg label{display:block;font-size:13px;color:var(--slate-600);font-weight:600;margin-bottom:6px}
.tb-fg input{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;outline:none;font-size:13.5px}
.tb-warn{background:#fff4f4;border:1px solid #f8caca;border-radius:8px;padding:12px 14px;font-size:12.5px;color:var(--red);line-height:1.6;margin-top:6px}
.shu-sec{text-align:center;font-size:16px;font-weight:800;color:var(--blue);margin:8px 0 14px}
.shu-modal .tbl-wrap{margin-bottom:6px}
.lr-card{padding:24px 26px}
.lr-filter{display:flex;gap:10px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.lr-filter .inv-fld{min-width:170px}
.lr-filter .kf-print{margin-left:auto}
.lr-sec{font-size:18px;font-weight:800;color:var(--ink);margin:20px 0 10px}
.lr-tbl .lr-sub td{font-weight:800;color:var(--blue);background:var(--soft)}
.lr-tbl .lr-total td{font-weight:800;color:var(--ink);border-top:1px solid var(--line);border-bottom:2px solid var(--line)}
.lr-tbl .lr-grand td{font-weight:800;color:var(--ink);background:#e2e8f0;border-top:2px solid var(--line)}
.lr-tbl .lr-grp td{font-weight:700;color:var(--ink);padding-left:24px}
.lr-tbl .lr-gtot td{font-weight:700;color:var(--slate-600);border-top:1px solid var(--line)}
.lr-title{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:16px}
.pb-filter{align-items:flex-start}
.pb-filter .bb-unit{min-width:340px}
.pb-pers{display:flex;flex-direction:column;gap:8px}
.pb-per{min-width:230px}
.pb-per-lbl{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--slate-600);font-weight:600;font-size:12.5px}
.pb-per-lbl svg{width:15px;height:15px;flex:none}
.pb-btns{display:flex;flex-direction:column;gap:8px;margin-left:auto}
.pb-btns .btn{justify-content:center}
.pb-tbl thead th{background:#fff;border-bottom:1px solid var(--line);padding:12px 14px;vertical-align:bottom;text-transform:none;letter-spacing:0}
.pb-tbl .pb-title{font-size:15px;font-weight:800;color:var(--ink);text-align:left}
.pb-tbl .pb-yr{text-align:right;border-left:1px solid var(--line)}
.pb-tbl .pb-y{display:block;font-size:16px;font-weight:800;color:var(--ink)}
.pb-tbl .pb-d{display:block;font-size:11.5px;font-weight:500;color:var(--slate-500)}
.pb-tbl .lr-grand td{background:#e2e8f0}
.pe-filt{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pe-sd{font-size:13px;color:var(--slate-500);align-self:center;padding:0 2px}
.eb-pers{display:flex;flex-direction:column;gap:8px}
.eb-per{min-width:150px}
.eb-per-lbl{display:flex;align-items:center;gap:5px;white-space:nowrap;color:var(--slate-600);font-weight:600;font-size:12px}
.eb-per-lbl svg{width:14px;height:14px;flex:none}
.eb-tbl thead th{background:var(--soft);text-transform:none;letter-spacing:0;text-align:center;border:1px solid var(--line);color:var(--ink);font-weight:700}
.eb-tbl thead th.ju-num,.eb-tbl thead th.eb-yr{text-align:right}
.eb-tbl thead th.eb-yr{text-align:left;vertical-align:middle;font-size:15px}
.eb-tbl .eb-subrow td{font-weight:600;color:var(--slate-600);background:#fff}
.eb-tbl .eb-awal td{font-weight:800;color:var(--ink)}
.eb-tbl .eb-ind{padding-left:14px;display:inline-block}
.ak-tbl td{padding:11px 16px;font-size:13.5px;color:var(--slate-600)}
.ak-tbl td:last-child{border-left:1px solid var(--line);width:230px}
.ak-tbl .ak-sec td{font-weight:800;text-transform:uppercase;color:var(--ink);letter-spacing:.3px;font-size:13px}
.ak-tbl .ak-item td:first-child{padding-left:40px;color:var(--slate-600)}
.ak-tbl .ak-item.ak-b td:first-child{font-weight:800;color:var(--ink)}
.ak-tbl .ak-tot td{font-weight:800;color:var(--ink);border-top:1px solid var(--line)}
.ak-info{vertical-align:-2px;margin-left:5px}
.ak-tbl .ak-sum td{font-weight:800;color:var(--ink)}
.calk-tb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-bottom:none;border-radius:12px 12px 0 0;padding:9px 12px;background:var(--soft)}
.calk-tb-g{display:flex;gap:3px;align-items:center;padding-right:9px;margin-right:3px;border-right:1px solid var(--line)}
.calk-tb-g:last-child{border-right:none;padding-right:0;margin-right:0}
.calk-tb-btn{min-width:32px;height:32px;border:1px solid transparent;background:#fff;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--slate-600);cursor:pointer;padding:0 7px}
.calk-tb-btn:hover{border-color:var(--line);color:var(--ink)}
.calk-tb-btn svg{width:17px;height:17px}
.calk-a{font-weight:700;line-height:1;padding:0 1px}
.calk-tb-sel{height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 10px;font-size:12.5px;color:var(--slate-600);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:26px}
.calk-doc{border:1px solid var(--line);border-radius:0 0 12px 12px;padding:28px 30px;background:#fff;min-height:420px;font-size:13.5px;line-height:1.75;color:var(--slate-700);outline:none}
.calk-doc p{margin:0 0 5px}
.calk-doc .calk-h{font-weight:800;color:var(--ink);margin:15px 0 4px}
.calk-doc .calk-h:first-child{margin-top:0}
.calk-doc .calk-sig{margin-top:6px}
.calk-foot{display:flex;justify-content:flex-end;margin-top:18px}
.calk-save{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:11px 20px;font-size:14px;gap:8px}
.calk-save:hover{filter:brightness(1.05)}
.mdl-head h3{font-size:18px;font-weight:800}
.mdl-head p{font-size:12.5px;opacity:.92;margin-top:3px}
.mdl-x{border:0;background:rgba(255,255,255,.2);color:#fff;width:32px;height:32px;border-radius:9px;font-size:20px;line-height:1;cursor:pointer;flex:none}
.mdl-x:hover{background:rgba(255,255,255,.35)}
.mdl-body{padding:22px 24px;display:grid;gap:14px}
.mdl-body .form-group{margin:0}
.mdl-note{background:#fff7ed;border:1px solid #fed7aa;color:#b45309;font-size:12.5px;padding:11px 13px;border-radius:9px;line-height:1.5}
.mdl-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line);position:sticky;bottom:0;z-index:10;background:#fff;border-radius:0 0 16px 16px}
.mdl-foot .mdl-close{margin-right:auto}
.mdl-foot .btn.danger{background:linear-gradient(135deg,#f87171,#ED2329)}
.mdl-cap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.mdl-cap-box{width:100%;min-height:150px;border:2px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--slate-400);padding:24px}
.mdl-cap-box span{font-size:13px;max-width:340px}
.mdl-cap-illus{width:100%;min-height:200px;border:2px dashed var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;background:var(--soft)}
.mdl-cap-illus svg{width:66px;height:66px;color:var(--blue-bright);opacity:.55}
.cap-empty{font-size:21px;font-weight:800;color:var(--blue);line-height:1.25;max-width:360px}
.cap-desc{font-size:13.5px;color:var(--slate-500);max-width:320px}
.cap-btn{width:100%;justify-content:center;background:linear-gradient(135deg,#22c55e,#12b76a);border:none}
.ktp-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left;margin-top:2px}
.ktp-part{display:flex;flex-direction:column;gap:8px}
.cap-lbl{font-size:13px;font-weight:600;color:var(--slate-600)}
.ktp-file{display:flex;flex-direction:column;gap:6px}
.ktp-hint{font-size:11.5px;color:var(--slate-400)}
.ktp-part .btn.solid{background:linear-gradient(135deg,#22c55e,#12b76a);border:none;justify-content:center}
.dp-setor.off{color:var(--slate-400);cursor:default;pointer-events:none}
.dp-setor.act{border-color:var(--blue);color:var(--blue);font-weight:700}
.dp-setor.act:hover{background:rgba(3,81,135,.06)}
.mdl-otp{display:inline-flex;gap:10px;margin:6px 0}
.mdl-otp input{width:46px;height:54px;text-align:center;font-size:22px;font-weight:800;border:1px solid var(--line);border-radius:11px;outline:none}
.mdl-otp input:focus{border-color:var(--blue)}
.mdl-hub{display:grid;gap:9px}
.mdl-hub-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:11px}
.mdl-hub-row span{font-size:14px;font-weight:600;color:var(--ink)}
.mdl-hub-row .btn{padding:7px 18px;font-size:13px}
.fld-lookup{display:flex;gap:8px}
.fld-lookup input{flex:1;cursor:pointer}
.fld-lookup .btn{flex:none;padding:0 14px}
.fld-lookup .btn svg{width:16px;height:16px}
.mdl{max-width:min(720px,94vw)}
@media(max-width:820px){.tf-cols{grid-template-columns:1fr}.tf-sec{flex-direction:column}}
.akun-tbl{border-collapse:collapse;width:100%}
.akun-tbl th,.akun-tbl td{border:1px solid var(--line);padding:15px 18px;text-align:left;vertical-align:middle;font-size:14px}
.akun-tbl th{width:240px;color:var(--ink);font-weight:700;background:#f8fafc}
.akun-tbl td{color:var(--slate-700)}
.lb-tools{display:flex;gap:10px;flex:none;flex-wrap:wrap;align-items:center}
.lb-tools .btn svg{width:16px;height:16px}
.inp-date{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-family:inherit;font-size:13.5px;color:var(--slate-700);outline:none;cursor:pointer}
.inp-date:focus{border-color:var(--primary,#035187)}
.stmt-info{display:flex;justify-content:space-between;gap:24px;padding:16px 2px 18px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.stmt-left{display:grid;gap:9px}
.stmt-left>div{display:flex;gap:10px;font-size:13.5px;align-items:baseline}
.stmt-left>div>span{color:var(--slate-500);min-width:170px;position:relative}
.stmt-left>div>span::after{content:':';position:absolute;right:0}
.stmt-left>div>b{color:var(--ink);font-weight:600}
.stmt-right{text-align:right;min-width:180px}
.stmt-right>span{display:block;font-size:12.5px;color:var(--slate-500);margin-bottom:2px}
.stmt-right>b{display:block;font-size:20px;font-weight:800;color:var(--blue)}
.stmt-right>small{font-size:13px;color:var(--slate-500)}
.filter-item .inp-sm,.filter-item .sel-sm{width:100%}
.filter-item .sel-sm{padding:11px 38px 11px 13px}
.filter-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 20px;padding-bottom:20px;margin-bottom:18px;border-bottom:1px solid var(--line)}
@media(max-width:1100px){.filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.filter-bar{grid-template-columns:1fr}}
.filter-item label{display:block;font-size:13px;font-weight:500;color:var(--slate-600);margin-bottom:7px}
.dt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.dt-length,.dt-search{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--slate-600)}
.dt-length select{padding:7px 32px 7px 10px;background-position:right 10px center}
.dt-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dt-search .inp-sm{min-width:200px}
.btn-detail{display:inline-block;background:linear-gradient(135deg,var(--blue-bright),var(--blue));color:#fff;padding:7px 20px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.btn-detail:hover{filter:saturate(1.1);transform:translateY(-1px)}
.approve-change{background:#eef4fb;border:1px solid #d7e6f5;border-radius:12px;padding:14px 16px;font-size:14px;color:var(--slate-700);margin-top:6px}
.approve-change .arr{color:var(--slate-400);margin:0 8px;font-weight:700}
.approve-change .hl{color:var(--blue)}
.list-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.list-tabs .ltab{padding:10px 18px;font-size:14px;font-weight:600;color:var(--slate-500);text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.list-tabs .ltab:hover{color:var(--ink)}
.list-tabs .ltab.on{color:var(--blue);border-bottom-color:var(--blue)}
.approve-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px;margin-top:16px;padding:16px 16px 4px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
@media(max-width:680px){.approve-fields{grid-template-columns:1fr}}
.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:768px){.mini-kpis{grid-template-columns:1fr 1fr}}
.mini-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px}
.mini-kpi b{font-size:20px;font-weight:800;color:var(--ink)}
.mini-kpi span{display:block;font-size:12px;color:var(--slate-500);margin-top:2px}

.dburger{display:none}
@media(max-width:768px){.dash{grid-template-columns:64px 1fr}.rail-item{width:54px;font-size:8px}.rail-item svg{width:20px;height:20px}}

/* login responsive */
@media (max-width:900px){
  .scene{inset:0}
  .scene::after{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.95))}
  .content{width:100%;max-width:none;padding:16px 30px 40px}
  .topbar .nav{display:none}
  .mark{height:70px}
}
@media (max-width:480px){
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{justify-content:center}
  .content h1{font-size:42px}
  .logo img{height:44px}
}

/* =========================================================
   BIDANG BRAND (bidang besar berwarna, bukan ikon)
   Sidebar dashboard = biru brand · Banner landing = biru & merah
   ========================================================= */
/* ---- Sidebar (rail) biru brand ---- */
.side{background:linear-gradient(180deg,#04619f,#023a61);border-right:0}
.rail-logo{background:#fff;margin:0 0 3px;border-radius:0 0 16px 16px;border-bottom:0;padding:9px 6px 9px}
.rail-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}
.rail-item{color:rgba(255,255,255,.82)}
.rail-item:hover{background:rgba(255,255,255,.12);color:#fff}
.rail-item.active{background:#fff;color:var(--blue);box-shadow:0 10px 20px -10px rgba(0,0,0,.45)}
.rail-foot{border-top:1px solid rgba(255,255,255,.15)}
.rail-foot a{color:rgba(255,255,255,.72)}
.rail-foot a:hover{background:rgba(255,255,255,.12);color:#ffd4d4}

/* ============================================================
   BRAND ACCENT SYSTEM (keilmuan: warna brand di lapisan dekoratif,
   aksen kata kunci, tombol & 1 band -> BUKAN isian background konten).
   Background section tetap putih / abu sangat muda.
   ============================================================ */
.section.alt{background:var(--soft)}   /* revert: abu muda, bukan biru */

/* aksen kata kunci pada judul */
.hl{color:var(--blue)}
.hl-red{color:var(--red)}

/* CTA: satu-satunya band penuh (tanda baca brand), warna merah */
.cta{background:linear-gradient(135deg,var(--red),var(--red-2))}
.cta p{color:#ffe0e0}
.cta .btn{color:var(--red);position:relative;z-index:2}
.cta .btn:hover{background:#fff5f5}
.cta::after{pointer-events:none}   /* lingkaran dekoratif jangan menghalangi klik tombol */
.cta > div{position:relative;z-index:2}   /* teks & tombol di atas dekorasi */