/* build: v266 */
/* =========================================================
   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{position:relative;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:10px 8px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.rail-shop{background:rgba(255,255,255,.14);color:#fff}
.rail-shop:hover{background:rgba(255,255,255,.24);color:#fff}
.rail-logout{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--slate-400)}
.rail-logout: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)}
/* Atur Produk Pinjaman - fee toggle Rp/% */
.pj-fee{display:flex;flex-direction:column;gap:6px}
.pj-fee-line{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#f8fafc}
.pj-fee-line input,.pj-fee-line select{flex:1;border:0;background:transparent;padding:9px 11px;font-size:13px;outline:none;min-width:0;color:var(--ink);font-family:inherit}
.pj-fee-line select{cursor:pointer}
.pj-fee-line input::placeholder{color:var(--slate-400)}
.pj-unit{display:flex;align-items:center;padding:0 12px;background:#eef2f7;color:var(--slate-600);font-size:12.5px;font-weight:600;border-left:1px solid var(--line)}
.pj-fee-mlbl{display:flex;align-items:center;padding:0 12px;background:#eef2f7;color:var(--slate-600);font-size:12.5px;font-weight:600;border-right:1px solid var(--line)}
.pj-custom{padding:10px 0 2px}
.pj-custom a{color:var(--blue-bright);font-size:13.5px;font-weight:600;text-decoration:none}
.pj-custom a:hover{text-decoration:underline}
/* 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%}
.sim-filter{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.sim-filter .filter-item{flex:1;min-width:150px}
.sim-filter .inv-fld{width:100%}
.sim-proses{flex:0 0 auto}
.sim-btns{display:flex;gap:8px}
.sim-simulasi{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:11px 18px;font-size:13.5px}
.sim-cetak{background:var(--blue-bright);color:#fff;padding:11px 16px;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
.ppo-filter{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.ppo-filter .filter-item{flex:1;min-width:180px}
.ppo-filter .inv-fld{width:100%}
.ppo-periode{display:flex;gap:8px}
.ppo-periode .inv-fld{flex:1}
.ppo-periode .inp-date{flex:1;min-width:0}
.ppo-btns{display:flex;flex-direction:column;gap:8px;min-width:130px}
.ppo-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}
.ppo-cetak{background:var(--blue-bright);color:#fff;padding:9px 16px;font-size:13px;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.pb-filter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}
.pb-filter .inv-fld{width:100%}
@media(max-width:900px){.pb-filter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.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)}
.rpk-tbl th{text-align:center;vertical-align:middle}
.rpk-tbl th:first-child,.rpk-tbl th:nth-child(2),.rpk-tbl th:nth-child(3){text-align:left}
.rpk-tbl .rpk-mid{background:var(--soft)}
.rpk-total td{font-weight:700;color:var(--ink);border-top:1px solid var(--line)}
.lnp-filter{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.lnp-filter .filter-item{flex:1;min-width:190px}
.lnp-filter .inv-fld{width:100%}
.lnp-filter .lnp-lunas{flex:0 0 150px}
.lnp-filter .lnp-sel{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#fff;color:var(--ink);font-family:inherit;cursor:pointer}
.agn-action .agn-btns{display:flex;gap:8px;flex-wrap:wrap}
.agn-action .btn{white-space:nowrap}
.sup-body{padding:18px 22px;color:var(--ink);font-size:14px}
.sup-body .sup-status{margin-bottom:14px}
.sup-body .tbl-wrap{margin:0 -6px}
.sup-body .sup-bold{font-weight:600;margin-bottom:10px}
.sup-banner .sup-form{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.sup-banner .sup-form input[type=date]{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink)}
.sup-submit{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:9px 18px;font-size:13px}
.sup-raw{font-family:'Times New Roman',Times,serif;font-size:16px;line-height:1.45;color:#000;padding:6px 2px}
.sup-flash{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#dcfce7;color:#166534;border:1px solid #bbf7d0;border-radius:12px;padding:16px 20px;font-size:14px}
.sup-flash .sup-flash-x{color:#166534;font-size:20px;line-height:1;text-decoration:none;opacity:.7}
.sup-flash .sup-flash-x:hover{opacity:1}
.sup-flash.sup-flash-err{background:#fdecec;color:#b42318;border-color:#fca5a5}
.sup-flash.sup-flash-err .sup-flash-x{color:#b42318}
/* Background Worker (Horizon) - modern inKUR */
.hzm-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.hzm-tab{padding:8px 14px;font-size:13px;font-weight:500;color:var(--slate-500);text-decoration:none;border-radius:8px}
.hzm-tab:hover{background:var(--blue-50,#eff6ff);color:var(--blue)}
.hzm-tab.on{background:var(--blue);color:#fff}
.hzm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.hzm-kpi{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.hzm-kic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 46px;border-radius:12px}
.hzm-kic svg{width:22px;height:22px}
.hzm-kmeta{display:flex;flex-direction:column;gap:3px;min-width:0}
.hzm-kmeta span{font-size:12.5px;color:var(--slate-500)}
.hzm-kmeta b{font-size:22px;font-weight:700;color:var(--ink);line-height:1.1}
.hzm-badge{font-size:13px!important;background:#e7f7ef;color:#12b76a;padding:3px 12px;border-radius:999px;width:fit-content}
.hzm-recent{margin-top:16px}
.hzm-rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.hzm-rhead h3{font-size:15px;font-weight:700;color:var(--ink)}
.hzm-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--slate-500)}
.hzm-live i{width:8px;height:8px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 3px #12b76a22}
.hzm-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:44px 20px;color:var(--slate-400)}
.hzm-empty svg{width:34px;height:34px;color:var(--slate-300,#cbd5e1)}
.hzm-empty span{font-size:14px;font-weight:600;color:var(--slate-500)}
.hzm-empty small{font-size:12.5px;color:var(--slate-400)}
/* Log Viewer - modern inKUR */
.lvm-main{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.lvm-gridcard{flex:1;min-width:320px}
.lvm-chartcard{flex:0 0 288px;display:flex;flex-direction:column}
.lvm-ctitle{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px}
.lvm-chartrow{display:flex;flex-direction:column;align-items:center;gap:18px;flex:1;justify-content:center}
.lvm-dnum{font-size:26px;font-weight:700;fill:var(--ink)}
.lvm-dlbl{font-size:10px;fill:var(--slate-400);text-transform:uppercase;letter-spacing:.5px}
.lvm-legend{width:100%;display:flex;flex-direction:column;gap:10px}
.lvm-lrow{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--slate-600,#475569)}
.lvm-ldot{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.lvm-lname{flex:1}
.lvm-lrow b{color:var(--ink)}
.lvm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.lvm-card{display:flex;gap:13px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:box-shadow .15s,transform .15s}
.lvm-card:hover{box-shadow:0 6px 18px rgba(15,27,45,.07);transform:translateY(-1px)}
.lvm-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px}
.lvm-info{flex:1;min-width:0}
.lvm-name{font-size:13px;color:var(--slate-500);font-weight:500}
.lvm-nrow{display:flex;align-items:baseline;gap:6px;margin:2px 0 9px}
.lvm-nrow b{font-size:23px;font-weight:700;color:var(--ink);line-height:1}
.lvm-ent{font-size:12px;color:var(--slate-400)}
.lvm-track{height:5px;background:#eef2f6;border-radius:3px;overflow:hidden}
.lvm-track i{display:block;height:100%;border-radius:3px}
.lvm-pct{display:block;font-size:11.5px;color:var(--slate-400);margin-top:6px}
/* Pengaturan Data Koperasi */
.dk-head{display:flex;align-items:center;gap:22px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:4px}
.dk-logo{width:132px;height:auto;flex:0 0 132px}
.dk-htext h2{font-size:21px;font-weight:600;color:var(--ink)}
.dk-htext b{display:block;font-size:14px;color:var(--ink);margin-top:4px}
.dk-htext p{font-size:12.5px;color:var(--slate-500);margin-top:3px;line-height:1.5;max-width:760px}
.dk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 8px}
.dk-tab{padding:11px 20px;font-size:14px;color:var(--slate-500);text-decoration:none;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;margin-bottom:-1px}
.dk-tab:hover{color:var(--blue)}
.dk-tab.on{color:var(--ink);font-weight:600;background:#fff;border-color:var(--line);border-bottom:1px solid #fff}
.dk-form{padding-top:6px}
.dk-row{display:flex;align-items:center;gap:20px;padding:14px 4px;border-bottom:1px solid #f1f5f9}
.dk-row>label{flex:0 0 180px;font-size:14px;font-weight:600;color:var(--ink)}
.dk-ctrl{flex:1;min-width:0}
.dk-ctrl>input,.dk-ctrl>select,.dk-af input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#f8fafc;color:var(--ink);font-family:inherit}
.dk-ctrl>select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.dk-ctrl>input:focus,.dk-ctrl>select:focus,.dk-af input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(46,144,250,.13)}
.dk-alamat{display:flex;gap:12px}
.dk-af{display:flex;flex-direction:column;gap:5px}
.dk-af-main{flex:1}
.dk-af>span{font-size:11.5px;color:var(--slate-500);font-weight:500}
.dk-af input[type=number]{width:100px}
.dk-filerow{align-items:flex-start}
.dk-preview{padding:10px 0}
.dk-preview img{max-width:200px;max-height:90px}
.dk-preview-sm img{max-width:70px;max-height:70px}
.dk-hint{font-size:12px;color:var(--slate-400);margin-bottom:6px}
.dk-file{display:inline-flex;align-items:center;gap:10px}
.dk-choose{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;background:#f1f5f9;color:var(--ink);cursor:pointer}
.dk-fn{font-size:13px;color:var(--slate-400)}
.dk-foot{display:flex;justify-content:flex-end;padding-top:18px}
.dk-uhead{display:flex;justify-content:flex-end;margin-bottom:16px}
.dk-addunit{padding:11px 20px;font-size:13.5px}
.dk-utbl{min-width:900px}
.dk-utbl td{vertical-align:middle}
.dk-uname b{display:block;font-size:14px;color:var(--ink);font-weight:600}
.dk-uname span{display:block;font-size:12px;color:var(--slate-500);line-height:1.5}
.dk-ubadge{display:inline-block;font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:8px;white-space:nowrap}
.dk-lvl-pusat{border:1px solid #12b76a;color:#12b76a;background:#fff;border-radius:999px}
.dk-lvl-unit{border:1px solid var(--blue);color:var(--blue);background:#fff;border-radius:999px}
.dk-b-grn{background:#12b76a;color:#fff}
.dk-b-off{background:#e5e9ee;color:var(--slate-500)}
.dk-b-blu{background:var(--blue);color:#fff}
.dk-tog{display:inline-flex;align-items:center;width:46px;height:24px;border-radius:999px;background:#cbd5e1;padding:2px;transition:background .15s}
.dk-tog i{width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.dk-tog.on{background:#12b76a}
.dk-tog.on i{transform:translateX(22px)}
.dk-edit{padding:7px 20px;font-size:13px}
.uu-form{display:flex;flex-direction:column;gap:14px}
.uu-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.uu-f{display:flex;flex-direction:column;gap:6px}
.uu-f>label{font-size:13px;font-weight:500;color:var(--slate-600,#475569)}
.uu-f input,.uu-f select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#f8fafc;color:var(--ink);font-family:inherit}
.uu-f select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.uu-f input:focus,.uu-f select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(46,144,250,.13)}
.uu-file{display:inline-flex;align-items:center;gap:10px;padding:5px 0}
.uu-f textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#f8fafc;color:var(--ink);font-family:inherit;resize:vertical}
.uu-f .inv-fld,.dka-f .inv-fld{width:100%}
.dka-prefix{font-weight:700;color:var(--slate-500);font-size:13px}
/* Data Keanggotaan */
.dka-sec{padding-top:8px}
.dka-sechead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}
.dka-sechead h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px}
.dka-sechead p{font-size:13px;color:var(--slate-500);line-height:1.6;max-width:640px}
.dka-sechead .btn{flex:0 0 auto;white-space:nowrap}
.dka-pct{width:110px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px;text-align:center;background:#fff;color:var(--ink);font-family:inherit}
.dka-pct.muted{color:var(--slate-400)}
.dka-pct.red{border-color:var(--red);color:var(--red);font-weight:600}
.dka-kode{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.dka-badge{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:6px}
.dka-pub{background:#12b76a;color:#fff}
.dka-total td{border-top:2px solid var(--line);padding-top:14px}
.dka-act{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:#fff;margin-right:4px}
.dka-act svg{width:16px;height:16px}
.dka-edit{background:#f0ad2e}
.dka-del{background:var(--red)}
.dka-2col{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.dka-col{min-width:0}
.dka-coltitle{font-size:18px;font-weight:600;color:var(--slate-400);margin-bottom:6px}
.dka-colsub{font-size:12.5px;color:var(--slate-400);line-height:1.6;margin-bottom:18px}
.dka-f{margin-bottom:14px}
.dka-f>label{display:block;font-size:12.5px;color:var(--slate-500);margin-bottom:6px}
.dka-f select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#f8fafc;color:var(--ink);font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.dka-f select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(46,144,250,.13)}
.dka-colfoot{margin-top:8px}
.dka-diagram{border:1px dashed var(--line);border-radius:12px;padding:18px;margin-bottom:20px;background:#f8fafc}
.dka-dnum{font-size:13px;color:var(--slate-500)}
.dka-dnum b{color:var(--ink)}
.dka-dsplit{font-size:30px;font-weight:700;letter-spacing:2px;margin:8px 0}
.dka-dp1{color:var(--blue);background:#eff6ff;padding:0 4px;border-radius:4px}
.dka-dp3{color:var(--slate-300,#cbd5e1)}
.dka-dlegend{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--slate-400);align-items:flex-end}
.dka-keluar{padding:14px 0}
.dka-ktitle{text-align:center;font-size:26px;font-weight:700;color:#9db2d6;letter-spacing:1px;margin-bottom:24px}
.dka-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.dka-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.dka-phone{width:100%;aspect-ratio:9/16;max-width:150px;border:2px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#eff6ff,#f8fafc);display:flex;align-items:center;justify-content:center;position:relative}
.dka-phone::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:3px;background:var(--line)}
.dka-stepno{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dka-step b{font-size:13px;color:var(--ink)}
.dka-step span{font-size:11.5px;color:var(--slate-500);line-height:1.5}
@media(max-width:1100px){.dka-2col{grid-template-columns:1fr}.dka-steps{grid-template-columns:repeat(2,1fr)}}
/* Migrasi Data */
.mig-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mig-head h2{font-size:20px;font-weight:600;color:var(--ink)}
.mig-head p{font-size:12.5px;color:var(--slate-500);margin-top:4px}
.mig-switch{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mig-switch span:first-child{font-size:12.5px;color:var(--slate-500)}
.mig-persiapan{padding-top:8px}
.mig-illus{display:block;width:280px;max-width:100%;height:auto;margin:6px auto 20px}
.mig-intro{font-size:14px;color:var(--ink);margin-bottom:14px}
.mig-guide{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.mig-guide li{font-size:13.5px;color:var(--slate-600,#475569);line-height:1.7}
.mig-guide li b{color:var(--ink)}
.mig-thanks{font-size:13.5px;color:var(--slate-500);font-style:italic;text-align:center;padding-top:6px}
.mig-sec{padding-top:8px}
.mig-sectitle{font-size:18px;font-weight:600;color:var(--slate-400);margin-bottom:4px}
.mig-secsub{font-size:12.5px;color:var(--slate-400);line-height:1.6;margin-bottom:20px;max-width:820px}
.mig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mig-card{display:flex;gap:16px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.mig-cic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:0 0 52px;border-radius:12px;background:var(--blue-50,#eff6ff);color:var(--blue)}
.mig-cic svg{width:26px;height:26px}
.mig-cbody{flex:1;min-width:0}
.mig-cbody h4{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:12px}
.mig-crow{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.mig-file{display:flex;align-items:center;gap:8px;flex:1;min-width:150px;border:1px solid var(--line);border-radius:8px;padding:4px 4px 4px 4px;background:#f8fafc;overflow:hidden}
.mig-choose{background:#e5e9ee;color:var(--ink);font-size:12.5px;padding:6px 10px;border-radius:6px;white-space:nowrap}
.mig-fn{font-size:12.5px;color:var(--slate-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mig-proses{padding:9px 18px;font-size:13px;flex:0 0 auto}
.mig-sample{font-size:12.5px;color:var(--blue);text-decoration:none}
.mig-sample:hover{text-decoration:underline}
@media(max-width:1100px){.mig-grid{grid-template-columns:1fr}}
/* Backup & Restore */
.bkp-mulai{display:flex;gap:30px;align-items:flex-start;padding-top:12px;flex-wrap:wrap}
.bkp-illus{width:220px;max-width:100%;height:auto;flex:0 0 auto}
.bkp-guide{flex:1;min-width:300px;display:flex;flex-direction:column;gap:18px}
.bkp-item b{font-size:14px;color:var(--ink)}
.bkp-item p{font-size:13.5px;color:var(--slate-600,#475569);line-height:1.7;margin-top:5px}
.bkp-item ul{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:5px}
.bkp-item li{font-size:13.5px;color:var(--slate-600,#475569);line-height:1.6}
.bkp-sec,.bkp-restoresec{padding-top:10px}
.bkp-full{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.bkp-fulltext{flex:1;min-width:300px}
.bkp-fulltext h3{font-size:18px;font-weight:600;color:var(--slate-400);margin-bottom:6px}
.bkp-fulltext p{font-size:12.5px;color:var(--slate-400);line-height:1.6;max-width:640px}
.bkp-dlfull{background:#a9d5f5;color:#fff;padding:16px 28px;font-size:14px;flex:0 0 auto;border-radius:10px}
.bkp-partitle{font-size:18px;font-weight:600;color:var(--slate-400);margin-bottom:14px}
.bkp-subtabs{margin-bottom:8px}
.bkp-rows{display:flex;flex-direction:column}
.bkp-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 6px;border-bottom:1px solid #f1f5f9;font-size:13.5px;color:var(--slate-400)}
.bkp-dl{background:#b8e6cd;color:#0b7a44;padding:8px 16px;font-size:12.5px}
.bkp-2col{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.bkp-warn{background:#fff8e6;border:1px solid #fde8b0;border-radius:12px;padding:18px 20px}
.bkp-warn b{display:block;font-size:14px;color:#8a6d1a;margin-bottom:6px}
.bkp-warn b:nth-of-type(2){margin-top:14px}
.bkp-warn p{font-size:13px;color:#8a6d1a;line-height:1.7}
.bkp-rform{display:flex;flex-direction:column;gap:16px}
.bkp-f label{display:block;font-size:13px;color:var(--slate-500);margin-bottom:6px}
.bkp-f input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#f8fafc;color:var(--ink);font-family:inherit}
.bkp-f input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(46,144,250,.13)}
.bkp-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--slate-600,#475569);line-height:1.5}
.bkp-restore{background:#f5a3a3;color:#fff;padding:11px 22px;font-size:13.5px;align-self:flex-start}
@media(max-width:1100px){.bkp-2col{grid-template-columns:1fr}}
/* Reset Data */
.rst-banner{display:flex;justify-content:space-between;align-items:center;gap:24px;background:#f07373;color:#fff;border-radius:14px;padding:22px 26px;margin-bottom:16px;flex-wrap:wrap}
.rst-text h2{font-size:22px;font-weight:700}
.rst-text p{font-size:13px;margin-top:4px;opacity:.95}
.rst-switch{display:flex;align-items:center;gap:12px;flex:0 0 auto;max-width:360px}
.rst-switch>span{font-size:12.5px;line-height:1.5;text-align:right;opacity:.95}
.rst-tog{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.rst-tog i{width:46px;height:24px;border-radius:999px;background:rgba(255,255,255,.55);padding:2px;display:inline-flex}
.rst-tog i::before{content:'';width:20px;height:20px;border-radius:50%;background:#fff}
.rst-tog b{font-size:12px;font-weight:700}
.rst-body{min-height:64px}
/* Manajemen Admin (Akses) */
.adm-banner .lb-tools{gap:14px}
.adm-hlink{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--slate-500);text-decoration:none}
.adm-hlink:hover{color:var(--blue)}
.adm-sep{color:var(--slate-300,#cbd5e1)}
.adm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.adm-left{display:flex;align-items:center;gap:12px}
.adm-search input{border:1px solid var(--line);border-radius:8px;padding:9px 13px;font-size:13px;background:#fff;color:var(--ink);font-family:inherit;min-width:220px}
.adm-filter{font-size:13px;color:var(--slate-600,#475569);text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:8px}
.adm-len .sel-sm{min-width:64px}
.adm-tbl th{white-space:nowrap}
.adm-sort{color:var(--slate-300,#cbd5e1);margin-left:5px;font-size:12px}
.adm-email{color:var(--blue);text-decoration:none}
.adm-email:hover{text-decoration:underline}
.adm-badge{display:inline-block;font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:6px;color:#fff}
.adm-yes{background:#12b76a}
.adm-no{background:var(--red)}
.adm-actwrap{display:flex;gap:8px}
.adm-lihat{background:#2E90FA;color:#fff;padding:7px 14px;font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.adm-lihat svg{width:14px;height:14px}
.adm-editbtn{padding:7px 14px;font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.adm-editbtn svg{width:14px;height:14px}
.adm-result{font-size:13px;color:var(--slate-500);padding-top:14px}
.adm-chk{width:18px;height:18px;accent-color:var(--blue)}
.adm-norole{font-size:13px;color:var(--slate-400);font-style:italic}
.adm-hapus{background:var(--red);color:#fff;padding:7px 14px;font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.adm-hapus svg{width:14px;height:14px}
.hak-tbl td{vertical-align:top}
.hak-izin{display:flex;flex-direction:column;gap:3px}
.hak-izin span{font-size:12.5px;color:var(--slate-600,#475569);line-height:1.5}
/* Setting Akun COA */
.coa-head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.coa-title{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:var(--ink);flex:0 0 auto}
.coa-unit{flex:1;min-width:280px}
.coa-unit>label{display:block;font-size:12.5px;color:var(--slate-500);margin-bottom:6px}
.coa-unitsel{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f8fafc}
.coa-uicon{display:flex;align-items:center;padding:0 10px;color:var(--slate-400)}
.coa-unitsel select{flex:1;border:none;background:transparent;padding:11px 10px;font-size:13.5px;color:var(--ink);font-family:inherit;cursor:pointer}
.coa-action{flex:0 0 auto}
.coa-action>label{display:block;font-size:12.5px;color:var(--blue);margin-bottom:6px}
.coa-abtns{display:flex;gap:8px}
.coa-abtns .btn{padding:10px 16px;font-size:13px}
.coa-lock{color:var(--slate-400);display:inline-flex}
.coa-dk{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#12b76a;color:#fff;font-size:12px;font-weight:700}
.coa-jenis{display:inline-block;background:var(--blue);color:#fff;font-size:11px;font-weight:600;padding:3px 12px;border-radius:6px}
.coa-edit{padding:6px 12px;font-size:12px;display:inline-flex;align-items:center;gap:4px}
.coa-edit svg{width:13px;height:13px}
.coa-trash{color:var(--red);display:inline-flex;vertical-align:middle}
.coa-trash svg{width:16px;height:16px}
.coa-prefix{font-weight:700;color:var(--slate-500);font-size:12.5px;white-space:nowrap}
.kk-list{display:flex;flex-direction:column;gap:14px}
.kk-cat{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kk-cathead{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#f8fafc;border-bottom:1px solid var(--line)}
.kk-cathead b{font-size:14px;color:var(--ink)}
.kk-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;color:#fff}
.kk-debit{background:#12b76a}
.kk-kredit{background:var(--red)}
.kk-addsub{margin-left:auto;padding:7px 14px;font-size:12.5px}
.kk-catbody{padding:18px 16px;font-size:13px;color:var(--slate-400)}
/* Setting Saldo Awal */
.sal-head h2{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px}
.sal-notes p{font-size:12.5px;color:var(--slate-500);line-height:1.7}
.sal-notes b{color:var(--ink)}
.sal-filter{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.sal-fdate{display:flex;align-items:center;gap:10px}
.sal-fdate label{font-size:12.5px;color:var(--slate-500);line-height:1.3}
.sal-fdate input{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#f8fafc;color:var(--ink);font-family:inherit}
.sal-unit{flex:1;min-width:280px;max-width:420px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#f8fafc;color:var(--ink);font-family:inherit;cursor:pointer}
.sal-save{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:12px 22px;font-size:13.5px;margin-left:auto}
.sal-tbl th{white-space:nowrap;vertical-align:top}
.sal-total{display:block;font-size:11px;font-weight:400;color:var(--slate-400);margin-top:2px}
.sal-inp{width:100%;max-width:220px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px;text-align:right;background:#fff;color:var(--ink);font-family:inherit}
.sal-inp.sal-active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(46,144,250,.1)}
/* Setting Simpanan */
.smp-sec{display:flex;gap:26px;padding:22px 0;border-bottom:1px solid #f1f5f9;align-items:flex-start}
.smp-left{flex:1;min-width:260px;max-width:440px}
.smp-left b{font-size:15px;font-weight:700;color:var(--ink)}
.smp-left p{font-size:12.5px;color:var(--slate-500);line-height:1.6;margin-top:5px}
.smp-ctrls{display:grid;grid-template-columns:repeat(3,minmax(0,185px));gap:16px;flex:0 0 auto}
.smp-col{display:flex;flex-direction:column;gap:14px}
.smp-f label{display:block;font-size:12px;color:var(--slate-500);margin-bottom:5px}
.smp-f input,.smp-f select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;background:#f8fafc;color:var(--ink);font-family:inherit}
.smp-f select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.smp-f input:focus,.smp-f select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(46,144,250,.13)}
.smp-foot{display:flex;justify-content:flex-end;padding-top:20px}
@media(max-width:1000px){.smp-sec{flex-direction:column}.smp-ctrls{grid-template-columns:repeat(2,1fr)}}
/* Setting SHU */
.shu-metode{display:flex;align-items:flex-start;gap:20px;justify-content:center;padding:6px 0 20px;border-bottom:1px solid var(--line);margin-bottom:8px}
.shu-mtext{text-align:right;max-width:520px}
.shu-mtext b{font-size:14px;color:var(--ink)}
.shu-mtext p{font-size:12px;color:var(--slate-500);line-height:1.5;margin-top:4px}
.shu-msel{flex:0 0 auto;min-width:200px;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#f8fafc;color:var(--ink);font-family:inherit;cursor:pointer}
.shu-row{display:flex;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid #f1f5f9}
.shu-row>label{flex:1;text-align:right;font-size:13.5px;color:var(--ink);min-width:180px}
.shu-akun{flex:0 0 300px;display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#f8fafc}
.shu-persen{flex:0 0 240px;display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#f8fafc}
.shu-pre{background:#e5e9ee;color:var(--slate-500);font-size:13px;padding:11px 13px;font-weight:600}
.shu-akun input,.shu-persen input{flex:1;border:none;background:transparent;padding:11px 13px;font-size:13.5px;color:var(--ink);font-family:inherit;text-align:right;min-width:0}
.shu-akun input:focus,.shu-persen input:focus{outline:none}
.shu-suf{color:var(--slate-500);font-size:13px;padding:0 14px 0 4px}
.shu-total>label{font-weight:700}
.shu-total .shu-persen{border:none;background:transparent;justify-content:flex-end;padding-right:14px}
.shu-total .shu-persen b{color:var(--blue);font-size:15px}
.shu-foot{display:flex;justify-content:flex-end;gap:10px;padding-top:18px}
/* Sistem Topup/Deposit */
.top-2col{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.top-col h3{font-size:19px;font-weight:600;color:var(--ink)}
.top-col>p{font-size:12.5px;color:var(--slate-500);line-height:1.6;margin-top:6px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}
.top-right{border-left:1px solid var(--line);padding-left:36px}
.top-inner{display:flex;gap:30px}
.top-days h4,.top-jam h4{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:12px}
.top-day{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);margin-bottom:10px}
.top-day input{width:17px;height:17px;accent-color:var(--blue)}
.top-jam{flex:1;min-width:200px}
.top-time{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.top-time input{flex:1;border:none;padding:11px 13px;font-size:13.5px;color:var(--slate-500);font-family:inherit;min-width:0}
.top-time input:focus{outline:none}
.top-clk{display:flex;padding:0 12px;color:var(--slate-400)}
.top-sampai{display:block;font-size:12.5px;color:var(--slate-500);margin:10px 0 6px}
.top-qris{display:flex;align-items:center;gap:16px;margin-top:10px}
.top-qris b{font-size:18px;font-weight:600;color:var(--ink);flex:1}
.top-qsel{flex:0 0 auto;min-width:110px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px;background:#fff;color:var(--ink);font-family:inherit;cursor:pointer}
.top-foot{display:flex;justify-content:flex-end;padding-top:26px;margin-top:20px;border-top:1px solid var(--line)}
@media(max-width:1000px){.top-2col{grid-template-columns:1fr}.top-right{border-left:none;padding-left:0}}
/* Sistem Transfer AntarBank */
.trf-head h2{font-size:20px;font-weight:600;color:var(--ink)}
.trf-head p{font-size:12.5px;color:var(--slate-500);margin-top:5px;margin-bottom:20px}
.trf-banner{display:flex;align-items:flex-start;gap:18px;background:#f4f6f8;border-radius:12px;padding:20px 22px;margin-bottom:24px}
.trf-bicon{flex:0 0 auto;width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--red),var(--red-2));display:flex;align-items:center;justify-content:center}
.trf-btext{flex:1;min-width:0}
.trf-btext b{font-size:15px;color:var(--ink)}
.trf-btext p{font-size:12.5px;color:var(--slate-500);line-height:1.6;margin-top:5px}
.trf-status{flex:0 0 auto;min-width:150px;align-self:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;background:#fff;color:var(--ink);font-family:inherit;cursor:pointer}
.trf-form{max-width:860px;display:flex;flex-direction:column;gap:18px}
.trf-f label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.trf-f input{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-size:13.5px;background:#fff;color:var(--slate-500);font-family:inherit}
.trf-f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,144,250,.13)}
.trf-fbtn{display:flex;justify-content:flex-end}
.trf-listtitle{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px}
.trf-tbl td{vertical-align:middle}
.trf-logo{display:inline-flex;align-items:center;justify-content:center;width:52px;height:34px;border:1px solid var(--line);border-radius:6px;color:var(--slate-400);background:#f8fafc}
/* Sistem Pembayaran VA/QRIS */
.qr-banner{display:flex;align-items:center;gap:22px;background:#f4f6f8;border-radius:12px;padding:18px 24px;margin-bottom:24px}
.qr-logo{flex:0 0 auto}
.qr-btext b{font-size:14px;color:var(--ink)}
.qr-btext p{font-size:12.5px;color:var(--slate-500);line-height:1.6;margin-top:5px}
.qr-2col{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:36px;align-items:start}
.qr-f{margin-bottom:16px}
.qr-f>label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.qr-sel{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-size:13.5px;background:#fff;color:var(--ink);font-family:inherit;cursor:pointer}
.qr-pf{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.qr-pre{background:#eef1f4;color:var(--slate-500);font-size:12.5px;font-weight:600;padding:11px 13px;display:flex;align-items:center}
.qr-pf input{flex:1;border:none;padding:11px 13px;font-size:13px;color:var(--slate-500);font-family:inherit;min-width:0}
.qr-pf input:focus{outline:none}
.qr-dual{display:flex;gap:14px}
.qr-dual .qr-pf{flex:1}
.qr-pk{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:5px 5px 5px 0;flex-wrap:wrap}
.qr-genkey{margin-left:auto;background:#eef1f4;color:var(--slate-600,#475569);font-size:12.5px;padding:8px 14px;border-radius:6px;text-decoration:none}
.qr-hint{display:block;font-size:12px;color:var(--slate-400);margin-top:6px}
.qr-btns{display:flex;gap:12px;margin-top:22px}
.qr-test{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff;padding:11px 20px;font-size:13.5px}
.qr-right{min-width:0}
.qr-gwtitle{text-align:center;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px}
@media(max-width:1000px){.qr-2col{grid-template-columns:1fr}}
/* Sistem Pembayaran Non Tunai */
.nt-tbl td{vertical-align:middle}
.nt-tbl td b{font-size:14px;color:var(--ink)}
.nt-an{font-size:12px;color:var(--slate-500)}
/* Sistem Withdrawal */
.wd-head{display:flex;align-items:flex-start;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:8px}
.wd-icon{flex:0 0 auto;width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--red),var(--red-2));display:flex;align-items:center;justify-content:center}
.wd-htext h2{font-size:20px;font-weight:600;color:var(--ink)}
.wd-htext p{font-size:12.5px;color:var(--slate-500);line-height:1.6;margin-top:5px;max-width:520px}
.wd-sec{padding:18px 0;border-bottom:1px solid #f1f5f9}
.wd-sec h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:14px}
.wd-jamrow{display:flex;align-items:center;gap:16px;max-width:640px}
.wd-jamrow .top-time{flex:1;max-width:260px}
.wd-sampai{font-size:12.5px;color:var(--slate-500);line-height:1.3}
.wd-biaya{width:100%;max-width:320px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#fff;color:var(--slate-500);font-family:inherit}
.wd-biaya:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,144,250,.13)}
.wd-foot{display:flex;justify-content:flex-end;padding-top:20px}
/* Pengaturan Umum HRM */
.hrm-head{display:flex;align-items:center;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.hrm-htext h2{font-size:21px;font-weight:600;color:var(--ink)}
.hrm-htext p{font-size:12.5px;color:var(--slate-500);letter-spacing:.5px;margin-top:3px}
.hrm-tabs{flex-wrap:wrap}
.hrm-green{background:linear-gradient(135deg,#16b364,#0b8a4f);color:#fff}
.hrm-sechead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.hrm-sechead h3{font-size:15px;font-weight:700;color:var(--ink)}
.hrm-btns{display:flex;gap:8px;flex-wrap:wrap}
.hrm-btns .btn{padding:9px 14px;font-size:12.5px}
.hrm-jabatan{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.hrm-jleft{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hrm-addjab{display:block;text-align:center;border-radius:0;padding:14px}
.hrm-empty{padding:32px 20px;text-align:center;font-size:13px;color:var(--slate-500);line-height:1.6}
.hrm-jtitle{font-size:17px;font-weight:600;color:var(--blue);margin-bottom:14px}
.hrm-jsel{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13.5px;background:#fff;color:var(--ink);font-family:inherit;cursor:pointer;margin-bottom:20px}
.hrm-subhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 10px;flex-wrap:wrap}
.hrm-subhead b{font-size:14px;color:var(--ink)}
.hrm-jfoot{display:flex;gap:10px;margin-top:18px}
.hrm-jfoot .btn{padding:9px 16px;font-size:13px}
.hrm-qrow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #f1f5f9}
.hrm-qrow>label{font-size:13.5px;color:var(--ink);flex:1}
.hrm-qsel,.hrm-qinp{flex:0 0 150px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;background:#fff;color:var(--ink);font-family:inherit}
.hrm-qsel{cursor:pointer}
.hrm-lembur{display:grid;grid-template-columns:1fr 320px;gap:30px;align-items:start}
@media(max-width:1000px){.hrm-jabatan,.hrm-lembur{grid-template-columns:1fr}}
/* Unavailable placeholder */
.unavail{text-align:center;padding:60px 24px}
.unavail-ic{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:var(--blue-50,#eff6ff);color:var(--blue);margin-bottom:18px}
.unavail h3{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:8px}
.unavail p{font-size:13.5px;color:var(--slate-500);line-height:1.6}
/* Pengaturan Apps HRM */
.hra-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.hra-htext h2{font-size:21px;font-weight:600;color:var(--ink)}
.hra-htext p{font-size:12.5px;color:var(--slate-500);letter-spacing:.5px;margin-top:3px}
.hra-gpwrap{text-align:right}
.hra-gplbl{display:block;font-size:12px;color:var(--slate-500);margin-bottom:6px}
.hra-gp{display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;border-radius:8px;padding:8px 16px}
.hra-gp small{display:block;font-size:9px;text-transform:uppercase;opacity:.85;letter-spacing:.5px}
.hra-gp b{display:block;font-size:15px;line-height:1.1}
.hra-sec{padding:20px 0;border-bottom:1px solid #f1f5f9}
.hra-sec h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px}
.hra-3up{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hra-2col{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start}
.hra-lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px}
.hra-imgcol .mig-file{max-width:240px}
.hra-fields{display:flex;flex-direction:column;gap:14px}
.hra-f label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.hra-f input{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-size:13.5px;background:#fff;color:var(--slate-600,#475569);font-family:inherit}
.hra-f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,144,250,.13)}
.hra-foot{display:flex;justify-content:flex-end;padding-top:20px}
@media(max-width:1000px){.hra-3up{grid-template-columns:1fr}.hra-2col{grid-template-columns:1fr}}
/* Pengaturan USP Umum */
.usp-head{display:flex;align-items:flex-start;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:8px}
.usp-icon{flex:0 0 auto;width:70px;height:70px;border-radius:18px;background:linear-gradient(135deg,var(--red),var(--red-2));display:flex;align-items:center;justify-content:center}
.usp-htext h2{font-size:21px;font-weight:600;color:var(--ink)}
.usp-htext p{font-size:12.5px;color:var(--slate-500);line-height:1.6;margin-top:5px;max-width:760px}
.usp-2col{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;padding-top:8px}
.usp-sectitle{font-size:16px;font-weight:600;color:var(--blue);margin:18px 0 12px}
.usp-col>.usp-sectitle:first-child{margin-top:0}
.usp-row{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:8px}
.usp-row>label{flex:1;display:flex;align-items:center;padding:10px 13px;font-size:13px;color:var(--ink);background:#f8fafc;border-right:1px solid var(--line)}
.usp-row>select,.usp-row>input{flex:0 0 45%;border:none;padding:10px 13px;font-size:13px;color:var(--ink);font-family:inherit;background:#fff}
.usp-row>select{cursor:pointer}
.usp-row>select:focus,.usp-row>input:focus{outline:none;background:#eff6ff}
.usp-note{font-size:11.5px;color:var(--slate-400);font-style:italic;margin:2px 0 6px}
.usp-gap{height:12px}
.usp-foot{display:flex;justify-content:flex-end;padding-top:22px;margin-top:16px;border-top:1px solid var(--line)}
@media(max-width:1000px){.usp-2col{grid-template-columns:1fr}}
/* Sistem Buku Tabungan */
.bkt-head{display:flex;align-items:center;gap:20px;padding-bottom:18px}
.bkt-icon{flex:0 0 auto;width:64px;height:64px;border-radius:14px;background:var(--blue-50,#eff6ff);display:flex;align-items:center;justify-content:center}
.bkt-htext h2{font-size:20px;font-weight:600;color:var(--ink)}
.bkt-htext p{font-size:12.5px;color:var(--slate-500);margin-top:4px}
.bkt-tpl{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px;background:#fff;color:var(--slate-500);font-family:inherit;cursor:pointer;margin-bottom:22px}
.bkt-2col{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.bkt-sec{margin-bottom:22px}
.bkt-sec h3{font-size:16px;font-weight:600;color:var(--blue);margin-bottom:12px}
.bkt-row{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:8px}
.bkt-row>label{flex:0 0 42%;display:flex;align-items:center;padding:10px 13px;font-size:13px;color:var(--ink);background:#f8fafc;border-right:1px solid var(--line)}
.bkt-row>input,.bkt-row>select{flex:1;border:none;padding:10px 13px;font-size:13px;color:var(--ink);font-family:inherit;background:#fff;min-width:0}
.bkt-row>select{cursor:pointer}
.bkt-row>input:focus,.bkt-row>select:focus{outline:none;background:#eff6ff}
.bkt-suf{display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:var(--slate-500);background:#f1f5f9;border-left:1px solid var(--line)}
.bkt-newbook{display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:var(--blue);background:#eff6ff;border-left:1px solid var(--line);text-decoration:none;white-space:nowrap}
.bkt-namabuku{background:#f1f5f9!important}
.bkt-foot{margin-top:8px}
@media(max-width:1000px){.bkt-2col{grid-template-columns:1fr}}
/* Tabel Perhitungan Daperpim */
.dpm-title{font-size:20px;font-weight:700;color:var(--ink)}
.dpm-tbl{min-width:1000px;border-collapse:collapse}
.dpm-tbl th,.dpm-tbl td{border:1px solid var(--line);text-align:center;padding:9px 10px;font-size:13px}
.dpm-tbl thead th{background:#f8fafc;color:var(--ink);font-weight:700}
.dpm-umur{font-weight:700;background:#f8fafc}
.dpm-upd{padding:6px 18px;font-size:12.5px}
/* Template Editor (Sertifikat/Pencairan/Akad) */
.tpl-title{font-size:19px;font-weight:600;color:var(--slate-500)}
.tpl-2col{display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:start}
.tpl-editor{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tpl-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--line);background:#fafbfc}
.tpl-tb{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;font-size:13px;color:var(--slate-600,#475569);text-decoration:none;border-radius:5px}
.tpl-tb:hover{background:#eef1f4}
.tpl-sep{width:1px;height:20px;background:var(--line);margin:0 5px}
.tpl-sel{height:28px;border:1px solid var(--line);border-radius:5px;font-size:12.5px;background:#fff;color:var(--slate-600,#475569);font-family:inherit;padding:0 6px;margin:0 2px}
.tpl-content{padding:18px 20px;min-height:280px;font-size:14px;color:var(--ink)}
.tpl-line{margin-bottom:2px;line-height:1.6}
.tpl-blank{height:18px}
.tpl-ebtns{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.tpl-preview{background:#2E90FA}
.tpl-ebtns .btn{padding:8px 16px;font-size:12.5px}
.tpl-side{display:flex;flex-direction:column;gap:8px}
.tpl-ph{display:block;text-align:center;padding:11px 12px;font-size:13px;color:var(--slate-600,#475569);background:#f4f6f8;border:1px solid var(--line);border-radius:8px;text-decoration:none}
.tpl-ph:hover{background:var(--blue-50,#eff6ff);color:var(--blue);border-color:var(--blue)}
@media(max-width:1000px){.tpl-2col{grid-template-columns:1fr}}
/* Welcome Screen / Image upload cards (Pengaturan System) */
.ws-2col{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.ws-card{padding:24px 26px}
.ws-h{font-size:19px;font-weight:700;color:var(--ink)}
.ws-desc{font-size:13px;color:var(--slate-600);line-height:1.6;margin:6px 0 18px;max-width:520px}
.ws-preview{aspect-ratio:1/1;border-radius:12px;border:1px solid var(--line);background:linear-gradient(135deg,#eef4fb,#dbeafe);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ws-preview.ws-wide{aspect-ratio:4/1}
.ws-preview span{font-size:13px;font-weight:600;color:var(--blue);letter-spacing:.02em}
.ws-preview img{width:100%;height:100%;object-fit:cover}
.ws-file{display:flex;align-items:center;gap:12px;margin-top:14px}
.ws-choose{border:1px solid var(--line);background:#f4f6f8;border-radius:8px;padding:8px 16px;font-size:12.5px;color:var(--slate-700);cursor:pointer}
.ws-fname{font-size:12.5px;color:var(--slate-500)}
.ws-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:16px 0 7px}
.ws-input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:13px;color:var(--slate-700);outline:none}
.ws-input:focus{border-color:var(--blue)}
.ws-btnrow{display:flex;justify-content:flex-end;margin-top:18px}
.ws-btnrow .btn{padding:11px 20px;font-size:13px}
@media(max-width:1000px){.ws-2col{grid-template-columns:1fr}}
.sys-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 26px;margin:6px 0 4px}
.sys-slot{display:flex;align-items:center;gap:10px}
.sys-thumb{width:42px;height:42px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(135deg,#eef4fb,#dbeafe);flex:none}
.sys-foot{text-align:right}
/* Sistem Fitur & Layanan */
.fl-list{display:flex;flex-direction:column;margin-top:8px}
.fl-row{display:flex;align-items:flex-start;gap:16px;padding:20px 4px;border-top:1px solid var(--line)}
.fl-row:first-child{border-top:0}
.fl-ic{width:48px;height:48px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center}
.fl-ic svg{width:24px;height:24px}
.fl-main{flex:1;min-width:0}
.fl-main h4{font-size:15px;font-weight:700;color:var(--ink)}
.fl-main p{font-size:13px;color:var(--slate-600);line-height:1.55;margin-top:3px;max-width:760px}
.fl-lic{display:flex;align-items:center;gap:0;margin-top:12px;max-width:620px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.fl-lock{display:flex;align-items:center;justify-content:center;width:44px;align-self:stretch;background:#f4f6f8;color:var(--slate-500);border-right:1px solid var(--line)}
.fl-lock svg{width:16px;height:16px}
.fl-key{border:0!important;border-radius:0!important;flex:1;padding:11px 14px;font-size:13px;outline:none}
.fl-right{flex:none;width:180px;display:flex;flex-direction:column;gap:10px}
.fl-sel{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px;background:#fff;color:var(--slate-700);font-family:inherit}
.fl-daftar{text-align:center;padding:10px 14px;font-size:13px}
.pm-right{flex:none;width:280px;display:flex;flex-direction:column;gap:11px}
.pm-f{display:flex;flex-direction:column;gap:4px}
.pm-f label{font-size:11.5px;color:var(--slate-500);text-align:right}
.pm-num{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--slate-700);outline:none}
.pm-num:focus{border-color:var(--blue)}
/* Sistem Chat / Layanan Pelanggan */
.sc-card{padding:26px 30px}
.sc-2col{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.sc-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sc-hic{width:52px;height:52px;border-radius:14px;flex:none;background:#e7f1fb;color:var(--blue);display:flex;align-items:center;justify-content:center}
.sc-hic svg{width:28px;height:28px}
.sc-head h2{font-size:19px;font-weight:700;color:var(--ink)}
.sc-p{font-size:13px;color:var(--slate-600);line-height:1.65;margin-bottom:12px;max-width:720px}
.sc-lv{font-size:13.5px;color:var(--ink);line-height:1.7}
.sc-lv b{font-weight:700}
.sc-form{margin-top:22px;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:18px}
.sc-frow{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
.sc-lbl{font-size:14px;font-weight:600;color:var(--blue);padding-top:9px}
.sc-sel{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:13.5px;background:#fff;color:var(--slate-700);font-family:inherit}
.sc-keys{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.sc-inrow{display:flex;align-items:stretch;border-top:1px solid var(--line)}
.sc-inrow:first-child{border-top:0}
.sc-ic{display:flex;align-items:center;justify-content:center;width:46px;background:#f4f6f8;color:var(--slate-500);border-right:1px solid var(--line)}
.sc-ic svg{width:17px;height:17px}
.sc-in{flex:1;border:0;padding:11px 14px;font-size:13px;color:var(--slate-700);outline:none}
.sc-getkey{border-radius:0;padding:0 20px;font-size:13px;display:flex;align-items:center}
.sc-quota{background:#dcecfa;border-radius:14px;padding:22px 20px;text-align:left}
.sc-qnum{font-size:22px;font-weight:800;color:#0b3d66}
.sc-qsub{font-size:13px;color:#2c6aa0;margin:2px 0 16px}
.sc-isi{width:100%;text-align:center;background:#2E90FA;color:#fff;padding:11px;font-size:14px}
@media(max-width:1000px){.sc-2col{grid-template-columns:1fr}.sc-frow{grid-template-columns:1fr}}
/* Sistem Whatsapp */
.wa-2col{grid-template-columns:1fr 260px}
.wa-hic{background:#e4f7ec;color:#25d366}
.sc-note{font-size:12.5px;color:var(--slate-600);line-height:1.6;margin-bottom:8px;max-width:720px}
.sc-note b{color:var(--ink)}
.wa-test{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.wa-msg{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:13px;color:var(--slate-700);min-height:70px;font-family:inherit;resize:vertical;outline:none}
.wa-kirim{padding:9px 20px;font-size:13px}
.wa-updrow{margin-top:20px;text-align:right}
.wa-side{display:flex;flex-direction:column;gap:12px}
.wa-qr{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.wa-qr svg{width:100%;height:auto;display:block}
.wa-disc,.wa-scan{text-align:center;padding:10px;font-size:13px;background:#fff;border:1px solid}
.wa-disc{color:#ED2329;border-color:#f3b6b8}
.wa-scan{color:#16a34a;border-color:#b7e4c7}
@media(max-width:1000px){.wa-2col{grid-template-columns:1fr}}
/* Sistem Biometrik */
.bio-banner{display:flex;gap:16px;align-items:flex-start;background:#f6f8fa;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:8px 0 26px}
.bio-bic{width:58px;height:58px;border-radius:12px;flex:none;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#ED2329}
.bio-bic svg{width:30px;height:30px}
.bio-banner h4{font-size:14.5px;font-weight:700;color:var(--ink)}
.bio-banner p{font-size:13px;color:var(--slate-600);line-height:1.6;margin-top:4px;max-width:660px}
.bio-2col{display:grid;grid-template-columns:360px 1fr;gap:36px;align-items:start}
.bio-h{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:6px}
.bio-form{display:flex;flex-direction:column;gap:14px}
.bio-f label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.bio-ig{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.bio-ig span{display:flex;align-items:center;padding:0 14px;background:#f4f6f8;color:var(--slate-500);font-size:12.5px;border-right:1px solid var(--line)}
.bio-ig input{flex:1;border:0;padding:11px 12px;font-size:13px;outline:none}
.bio-add{margin-top:8px;align-self:center;padding:11px 22px;font-size:13.5px}
.bio-rh{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.03em;margin-bottom:6px}
.bio-tbl{width:100%;border-collapse:collapse}
.bio-tbl th{text-align:left;font-size:12.5px;color:var(--slate-500);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line)}
.bio-tbl td{padding:15px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top;color:var(--slate-700)}
.bio-dev{font-weight:700;color:var(--ink)}
.bio-det{color:var(--slate-600);line-height:1.8;white-space:nowrap}
.bio-hapus{background:#ED2329;color:#fff;padding:8px 18px;font-size:13px}
@media(max-width:1000px){.bio-2col{grid-template-columns:1fr}}
/* Pengaturan Harga (tab operator + tabel produk) */
.ht-card{padding:0;overflow:hidden}
.ht-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 10px;overflow-x:auto}
.ht-tab{padding:15px 20px;font-size:13.5px;color:var(--slate-600);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.ht-tab:hover{color:var(--blue)}
.ht-tab.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.ht-scroll{overflow-x:auto}
.ht-tbl{width:100%;border-collapse:collapse;min-width:940px}
.ht-tbl th{text-align:left;font-size:12.5px;color:var(--slate-500);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--line)}
.ht-tbl td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--slate-700);vertical-align:middle}
.ht-tbl tbody tr:hover{background:#fafbfc}
.ht-kode b{display:block;font-weight:700;color:var(--ink)}
.ht-kode span{font-size:12px;color:var(--slate-500)}
.ht-toggle{display:inline-flex;align-items:center;width:46px;height:23px;border-radius:12px;background:#22c55e;color:#fff;font-size:9.5px;font-weight:700;padding-left:9px;position:relative;letter-spacing:.04em}
.ht-toggle:after{content:'';position:absolute;right:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff}
.ht-gw{color:var(--slate-500);font-size:12px}
.ht-edit{width:98px;border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:13px;outline:none}
.ht-edit:focus{border-color:var(--blue)}
.ht-upd{padding:8px 16px;font-size:12.5px}
.ht-note{padding:14px 18px;font-size:12px;color:var(--slate-500);border-top:1px solid var(--line);background:#fafbfc}
.ht-toggle.off{background:#cbd5e1;padding-left:0;padding-right:9px;justify-content:flex-end}
.ht-toggle.off:after{right:auto;left:3px}
.tr-body{padding:20px 22px 4px}
.tr-notice{background:#fff7e6;border:1px solid #f6d98a;color:#8a6100;border-radius:10px;padding:14px 16px;font-size:12.5px;line-height:1.6}
.tr-notice b{color:#7a4f00}
.tr-map{display:flex;align-items:center;gap:14px;margin:16px 0 8px;background:linear-gradient(135deg,#eef4fb,#e0efe6);border:1px dashed var(--line);border-radius:12px;padding:22px 22px;color:#2E90FA}
.tr-map svg{width:32px;height:32px;flex:none}
.tr-mapt span{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.tr-mapt small{font-size:12px;color:var(--slate-500)}
.tr-edit{width:110px}
/* Pengaturan Website (Website Builder) */
.pw-card0{padding:0;overflow:hidden}
.pw-banner{display:grid;grid-template-columns:1fr 360px;gap:24px;background:#e6f3fb;padding:24px 28px}
.pw-btext h2{font-size:20px;font-weight:700;color:#0b3d66}
.pw-btext p{font-size:12.5px;color:var(--slate-600);line-height:1.65;margin-top:8px}
.pw-bctrl{display:flex;flex-direction:column;justify-content:center;gap:10px}
.pw-blbl{font-size:12.5px;color:var(--slate-600)}
.pw-brow{display:flex;gap:10px;align-items:center}
.pw-selbar{padding:20px 28px;border-bottom:1px solid var(--line);background:#f8fafc}
.pw-selbar label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}
.pw-selrow{display:flex;gap:10px}
.pw-selrow .pw-sel{flex:1}
.pw-tambah{padding:9px 16px;font-size:13px}
.pw-hapus{padding:9px 16px;font-size:13px;background:#ED2329;color:#fff}
.pw-sel{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;background:#fff;color:var(--slate-700);font-family:inherit}
.pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pw-col{padding:8px 28px 20px}
.pw-col:first-child{border-right:1px solid var(--line)}
.pw-card{display:flex;gap:16px;justify-content:space-between;padding:20px 0;border-top:1px solid var(--line)}
.pw-col .pw-card:first-child{border-top:0}
.pw-ctext{flex:1;min-width:0}
.pw-ctext h4{font-size:16px;font-weight:700;color:var(--blue)}
.pw-ctext p{font-size:12px;color:var(--slate-600);line-height:1.55;margin-top:4px}
.pw-cctrl{flex:none;display:flex;flex-direction:column;gap:8px;align-items:flex-end;width:190px}
.pw-in{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px;outline:none}
.pw-color{display:block;width:100%;height:36px;border-radius:8px;background:#111;border:1px solid var(--line)}
.pw-file{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--slate-500);width:100%}
.pw-fcol{display:flex;flex-direction:column;gap:8px;width:100%}
.pw-cctrl .pw-sel{width:100%}
.pw-save{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:12.5px}
.pw-save svg{width:14px;height:14px}
@media(max-width:1000px){.pw-banner{grid-template-columns:1fr}.pw-grid{grid-template-columns:1fr}.pw-col:first-child{border-right:0;border-bottom:1px solid var(--line)}}
/* Menu Utama Website */
.mw-card{padding:0;overflow:hidden}
.mw-illus{height:220px;overflow:hidden}
.mw-svg{width:100%;height:100%;display:block}
.mw-body{display:grid;grid-template-columns:1fr 340px;gap:28px;padding:22px 28px 28px}
.mw-text h2{font-size:21px;font-weight:700;color:var(--blue)}
.mw-text p{font-size:13px;color:var(--slate-600);line-height:1.65;margin-top:8px;max-width:620px}
.mw-side{display:flex;flex-direction:column;gap:12px}
.mw-menuitem{background:#22c55e;color:#fff;font-style:italic;font-size:13.5px;text-align:center;padding:11px;border-radius:8px;font-weight:500}
.mw-add{text-align:center;padding:11px;font-size:13.5px;background:#fff;border:1px solid var(--line);color:var(--slate-700)}
.mw-add:hover{border-color:var(--blue);color:var(--blue)}
@media(max-width:1000px){.mw-body{grid-template-columns:1fr}}
/* Slider Website */
.sl-card{padding:0;overflow:hidden}
.sl-banner{border-radius:0}
.sl-2col{display:grid;grid-template-columns:330px 1fr;gap:0}
.sl-left{padding:20px 22px;border-right:1px solid var(--line)}
.sl-lefth{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:14px}
.sl-models{display:flex;flex-direction:column;gap:16px;max-height:520px;overflow-y:auto;padding-right:6px}
.sl-model{cursor:pointer}
.sl-thumb{height:150px;border-radius:10px;border:2px solid transparent;display:flex;align-items:center;justify-content:center;padding:14px;text-align:center}
.sl-model.on .sl-thumb{border-color:var(--blue)}
.sl-thumb span{color:#fff;font-size:14px;font-weight:700;letter-spacing:.03em;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.sl-plabel{margin-top:6px;font-size:12.5px;color:var(--blue)}
.sl-setpanel{padding:20px 24px}
.sl-sethead{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;background:#f6f8fa;border-radius:12px;padding:16px 18px}
.sl-sethead h3{font-size:15px;font-weight:700;color:var(--ink)}
.sl-sethead>div:first-child p{font-size:12px;color:var(--slate-500);margin-top:3px;max-width:180px;line-height:1.5}
.sl-cur{text-align:right}
.sl-cur small{display:block;font-size:11.5px;color:var(--slate-500)}
.sl-cur b{font-size:19px;font-weight:800;color:var(--blue)}
.sl-curprev{width:160px;height:90px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center}
.sl-curprev span{color:#fff;font-size:10.5px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.sl-slides{display:flex;gap:8px;margin:18px 0}
.sl-slide{padding:7px 16px;font-size:12.5px;color:var(--slate-500);border:1px solid var(--line);border-radius:7px;text-decoration:none}
.sl-slide.on{color:var(--blue);border-color:var(--blue);background:var(--blue-50,#eff6ff);font-weight:600}
.sl-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sl-fcol{display:flex;flex-direction:column;gap:12px}
.sl-lbl{font-size:13.5px;font-weight:600;color:var(--blue);margin-top:4px}
.sl-fcol .bio-ig span{min-width:90px}
.sl-ta{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;min-height:90px;font-family:inherit;resize:vertical;outline:none}
.sl-uprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sl-upl{padding:8px 16px;font-size:12.5px}
.sl-updrow{margin-top:20px;text-align:right}
@media(max-width:1000px){.sl-2col{grid-template-columns:1fr}.sl-left{border-right:0;border-bottom:1px solid var(--line)}.sl-fgrid{grid-template-columns:1fr}.sl-sethead{grid-template-columns:1fr}}
/* Halaman / Page Website */
.hp-bctrl{text-align:right;justify-content:center}
.hp-pgname{font-size:30px;font-weight:800;color:var(--blue);line-height:1}
.hp-url{font-size:12.5px;color:var(--slate-600);margin-top:6px;display:inline-block}
.hp-urltag{background:#22c55e;color:#fff;font-size:10.5px;padding:2px 8px;border-radius:5px;font-weight:600}
.hp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;background:#f8fafc;border-bottom:1px solid var(--line)}
.hp-pgtab{padding:9px 20px;font-size:13px;background:var(--blue);color:#fff;border-radius:8px;text-decoration:none;font-weight:500}
.hp-baractions{display:flex;gap:8px}
.hp-b{padding:8px 15px;font-size:12.5px}
.hp-secrow{padding:12px 24px;border-bottom:1px solid var(--line)}
.hp-sec{padding:8px 16px;font-size:12.5px;background:#fff;border:1px solid var(--line);color:var(--slate-700)}
.hp-catsel{width:100%;margin-bottom:14px}
.hp-thumb{height:150px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px}
.sl-model.on .hp-thumb{border-color:var(--blue);border-width:2px}
.hp-mrow{height:12px;background:#e2e8f0;border-radius:6px;display:block}
.hp-mrow.short{width:60%}
.hp-curprev{background:#fff;border:1px solid var(--line);flex-direction:column;justify-content:center;gap:6px;padding:12px}
.hp-curprev .hp-mrow{width:100%}
.hp-curprev .hp-mrow.short{width:55%}
/* Footer Website */
.fw-banner{grid-template-columns:auto 1fr 300px;align-items:center}
.fw-brand{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--blue);padding-right:20px;border-right:1px solid #bcdcf0}
.fw-globe svg{width:44px;height:44px}
.fw-brand span:last-child{font-size:15px;font-weight:700;color:#0b3d66}
.fw-thumb{height:150px;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:14px;border:1px solid var(--line)}
.sl-model.on .fw-thumb{border-color:var(--blue);border-width:2px}
.fw-dark{background:#1f2937}
.fw-dark .hp-mrow{background:#4b5563}
.fw-social{height:10px;width:40%;background:#374151;border-radius:5px;display:block;margin-top:6px}
.fw-light{background:#e5e7eb;justify-content:center;align-items:center}
.fw-nav{background:#111827;color:#fff;font-size:8px;padding:6px 10px;border-radius:6px;text-align:center}
.fw-txtcol{margin-bottom:8px}
.fw-txtcol .bio-ig span{min-width:76px}
.fw-links{margin-top:8px}
.fw-links .bio-ig span{min-width:96px}
/* Preview Website */
.pv-card{padding:0;overflow:hidden;max-width:760px}
.pv-illus{height:200px;overflow:hidden}
.pv-illus .mw-svg{width:100%;height:100%}
.pv-body{padding:24px 28px 28px}
.pv-body h2{font-size:21px;font-weight:700;color:var(--blue)}
.pv-body p{font-size:13px;color:var(--slate-600);line-height:1.65;margin:8px 0 20px;max-width:560px}
.pv-btn{padding:12px 22px;font-size:14px}
/* ===== LISENSI & MODULE GATING ===== */
/* Rail locked modules */
.rail-item.locked{opacity:.5}
.rail-item.locked:hover{opacity:.8}
.rail-lock{position:absolute;top:9px;left:calc(50% + 7px);width:16px;height:16px;background:#64748b;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.rail-lock svg{width:9px;height:9px}
/* Topbar license chip */
.tb-lic{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer}
.tb-lic-ok{background:#e7f8ef;color:#0f9d58;border-color:#b7ebd0}
.tb-lic-warn{background:#fef6e7;color:#b7791f;border-color:#f6d98a}
.tb-lic-err{background:#fdecec;color:#ED2329;border-color:#f3b6b8}
.tb-lic:hover{filter:brightness(.97)}
/* Activation page */
.act-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
.act-preview{position:relative;border-radius:16px;overflow:hidden;min-height:440px;background:#eef2f7;border:1px solid var(--line)}
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px;filter:blur(3px);opacity:.75;pointer-events:none}
.lp-tile{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 14px}
.lp-ic svg{width:22px;height:22px;color:var(--blue)}
.lp-nm{font-weight:600;font-size:13px;color:var(--ink)}
.act-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(240,245,250,.35),rgba(240,245,250,.82))}
.act-glass{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.act-lockcirc{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.act-lockcirc svg{width:34px;height:34px}
.act-glass h3{font-size:21px;font-weight:800;color:var(--ink)}
.act-glass p{font-size:13.5px;color:var(--slate-600);margin-top:6px;max-width:340px;line-height:1.5}
.act-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px;display:flex;flex-direction:column}
.act-head{display:flex;align-items:center;gap:14px}
.act-ic{width:52px;height:52px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center}
.act-ic svg{width:28px;height:28px}
.act-head h2{font-size:20px;font-weight:800;color:var(--ink);line-height:1.1}
.act-badge{display:inline-block;margin-top:4px;font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-50,#eff6ff);padding:2px 10px;border-radius:20px}
.act-sub{font-size:13px;color:var(--slate-600);margin:16px 0 4px;line-height:1.6}
.act-feats{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.act-feats li{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--ink);line-height:1.5}
.af-ck{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.af-ck svg{width:13px;height:13px}
.act-pricebox{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
.act-pr small{display:block;font-size:11.5px;color:var(--slate-500)}
.act-pr b{font-size:24px;font-weight:800;color:var(--ink)}
.act-pr span{font-size:12px;color:var(--slate-500);margin-left:2px}
.act-cta{padding:13px 24px;font-size:14px;white-space:nowrap}
.act-alt{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;font-size:12.5px}
.act-alt a{color:var(--blue);text-decoration:none}
.act-alt a:hover{text-decoration:underline}
.act-alt span{color:#cbd5e1}
.act-note{margin-top:18px;font-size:12px;color:var(--slate-600);background:#f6f8fa;border-radius:10px;padding:12px 14px;line-height:1.6}
@media(max-width:1000px){.act-wrap{grid-template-columns:1fr}}
/* Langganan & Lisensi page */
.lg-wrap{padding:0;overflow:hidden}
.lg-plan{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:linear-gradient(120deg,#035187,#2E90FA);color:#fff;padding:28px 30px}
.lg-pl-badge{display:inline-block;background:rgba(255,255,255,.2);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
.lg-plan h2{font-size:22px;font-weight:800;margin:10px 0 4px}
.lg-plan p{font-size:13.5px;opacity:.94}
.lg-price{font-size:12.5px;opacity:.9;margin-top:4px}
.lg-price b{font-weight:700}
.lg-bar{height:8px;background:rgba(255,255,255,.25);border-radius:6px;margin-top:14px;max-width:440px;overflow:hidden}
.lg-bar i{display:block;height:100%;border-radius:6px}
.lg-nmod{opacity:.8}
.lg-meters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 22px;max-width:720px;margin-top:16px}
.lg-meter .lg-mtop{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:5px;opacity:.92}
.lg-meter .lg-mtop b{font-weight:700;opacity:1}
.lg-mtrack{height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.lg-mtrack i{display:block;height:100%;border-radius:99px}
.lg-mtrack i.lg-ok{background:#7BE0A9}
.lg-mtrack i.lg-warn{background:#FBB552}
.lg-mtrack i.lg-full{background:#FF7A7A}
.lg-mnudge{background:rgba(255,255,255,.15);border-radius:8px;padding:9px 13px;font-size:12.5px;margin-top:14px;max-width:520px}
.lg-mnudge b{font-weight:700}
.lg-pl-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.lg-status{font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:20px}
.lg-acts{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.lg-cta{text-align:center;white-space:nowrap;text-decoration:none;transition:.15s var(--ease)}
.lg-cta.primary{background:#fff;color:#035187;font-size:13px;font-weight:700;padding:10px 22px;border-radius:10px;box-shadow:0 8px 16px -10px rgba(0,0,0,.45)}
.lg-cta.primary:hover{background:#eaf3fe}
.lg-cta.primary.urgent{background:#f59e0b;color:#3d2600}
.lg-cta.primary.urgent:hover{background:#ea8f08}
.lg-cta.link{color:#fff;font-size:12.5px;font-weight:600;opacity:.82}
.lg-cta.link:hover{opacity:1;text-decoration:underline}
.up-cur{font-size:13px;color:var(--slate-600);margin-bottom:14px}
.up-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.up-grid.up-grid3{grid-template-columns:1fr 1fr 1fr;gap:11px}
.up-grid3 .up-card{padding:16px 13px}
.up-grid3 .up-price{font-size:20px}
.up-force{font-size:12px;color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:9px;padding:11px 13px;margin-top:14px;line-height:1.6}
.up-force b{font-weight:700}
.up-break{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.ub-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nm sel" "ft ft";gap:1px 8px;padding:8px 11px;background:#f6f9fd;border-radius:8px}
.ub-nm{grid-area:nm;font-size:13px;font-weight:700;color:var(--ink)}
.ub-sel{grid-area:sel;font-size:14px;font-weight:800;color:#2E90FA}
.ub-ft{grid-area:ft;font-size:11px;color:var(--slate-500)}
.up-total{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;border-top:2px solid var(--line);margin-bottom:14px}
.up-total span{font-size:12.5px;color:var(--slate-600)}
.up-total b{font-size:19px;font-weight:800;color:#035187}
.up-card{border:1px solid var(--line);border-radius:12px;padding:18px 16px;position:relative}
.up-card.rec{border:2px solid #2E90FA}
.up-pop{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;background:#eaf3fe;color:#2E90FA;padding:3px 9px;border-radius:20px}
.up-card h4{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:12px}
.up-lbl{font-size:11.5px;color:var(--slate-500);margin-bottom:2px}
.up-price{font-size:23px;font-weight:800;color:#2E90FA;margin-bottom:2px}
.up-strike{font-size:11px;color:var(--slate-400);margin-bottom:14px}
.up-feat{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.up-feat li{font-size:12.5px;color:var(--slate-600);padding-left:18px;position:relative}
.up-feat li:before{content:"✓";position:absolute;left:0;color:#0f9d58;font-weight:800}
.up-btn{width:100%;display:flex;justify-content:center;padding:11px}
.up-note{font-size:12px;color:var(--slate-600);background:#eff6fd;border-radius:9px;padding:11px 13px;margin-top:16px}
.up-none{font-size:14px;color:var(--slate-600);text-align:center;padding:24px 10px;line-height:1.6}
.pj-body{padding:2px}
.pj-cur{font-size:13px;color:var(--slate-600);margin-bottom:16px;line-height:1.6}
.pj-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--slate-600)}
.pj-row b{color:var(--ink);font-weight:700}
.pj-row.pj-tot{border-top:2px solid var(--line)}
.pj-row.pj-tot b{color:#035187;font-size:16px}
.pj-btn{width:100%;display:flex;justify-content:center;padding:12px;margin-top:16px}
.pj-hint{font-size:11.5px;color:var(--slate-500);margin-top:12px;line-height:1.6}
.mdl:has(.st-modwrap){width:min(660px,94vw)}
.st-modwrap{width:100%;margin:-4px 0 0}
.st-intro{font-size:12.5px;color:var(--slate-500);margin:0 0 6px;line-height:1.5}
.st-sec{font-size:11px;font-weight:800;color:var(--slate-400);text-transform:uppercase;letter-spacing:.6px;margin:16px 4px 8px}
.st-grid{display:grid;grid-template-columns:repeat(4,minmax(96px,1fr));gap:10px}
@media(max-width:600px){.st-grid{grid-template-columns:repeat(3,minmax(80px,1fr))}}
.st-tile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px 13px;border-radius:16px;text-decoration:none;text-align:center;background:#f7f9fc;border:1px solid #eef1f6}
a.st-tile{cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease)}
a.st-tile:hover{transform:translateY(-3px);border-color:#d9e5f2;box-shadow:0 12px 24px -12px rgba(15,27,45,.28)}
.st-tile .st-ic{position:relative;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#eef2f7;color:#526074}
.st-tile.on .st-ic{background:#e6f1fb;color:#035187}
.st-tile .st-ic svg{width:22px;height:22px}
.st-lock{position:absolute;top:-5px;right:-5px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(15,27,45,.22);display:grid;place-items:center;color:#94a3b8}
.st-lock svg{width:10px;height:10px}
.st-nm{font-size:12px;font-weight:700;color:var(--ink);line-height:1.2}
.st-sub{font-size:10.5px;color:var(--slate-500);line-height:1.3}
.st-tile.st-soon{cursor:default}
.st-soon .st-ic{opacity:.55}
.st-soon .st-nm{color:var(--slate-500)}
.st-soon .st-sub{color:var(--slate-400)}
.lg-h{font-size:17px;font-weight:700;color:var(--ink)}
.lg-sub{font-size:13px;color:var(--slate-600);margin:4px 0 16px}
.lg-list{display:flex;flex-direction:column}
.lg-row{display:grid;grid-template-columns:auto 1fr auto auto 140px;gap:16px;align-items:center;padding:16px 4px;border-top:1px solid var(--line)}
.lg-rowcore{background:#f6f9fd;border-radius:10px;padding-left:10px;padding-right:10px}
.lg-rowcore .lg-mt b{color:var(--blue)}
.lg-rprice{display:flex;flex-direction:column;gap:2px;text-align:right;white-space:nowrap}
.lg-rprice span{font-size:12px;color:var(--slate-500)}
.lg-rprice span b{color:var(--ink);font-weight:700;font-size:12.5px}
.lg-rprice.core-inc{color:var(--slate-400);font-size:12px;font-style:italic}
.lg-rprice .lp-ok{color:#0f9d58;font-weight:600}
.lg-rprice .lp-due{color:#dc2626;font-weight:600}
.lg-tag.due{background:#fef2f2;color:#dc2626}
.lg-tag.trial{background:#f3e8ff;color:#7c3aed}
.lg-tag.free{background:#e0f2fe;color:#0369a1}
.jl-badge.free{background:#e0f2fe;color:#0369a1}
.jl-free{background:#0ea5e9!important;border:none}
.act-free{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px;padding:16px 20px;margin-bottom:14px}
.act-free-t{font-size:13px;color:var(--slate-600);line-height:1.55;flex:1}
.act-free-b{background:#0ea5e9!important;white-space:nowrap;padding:11px 24px;flex:none}
/* Pemilih varian (i-APPS platform, i-POS jenis usaha) */
.vpick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 14px}
.vpick-l{font-size:12px;color:var(--slate-500);font-weight:600}
.vpick-b{padding:6px 12px;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:600;color:var(--slate-600);cursor:pointer;transition:.12s;white-space:nowrap}
.vpick-b:hover{background:#f1f5f9}
.vpick-b.on{background:var(--blue);color:#fff;border-color:var(--blue)}
/* ===== Jelajahi Modul (marketplace / trial onboarding) ===== */
.dash.onboard .tabbar-wrap{display:none}
.dash.onboard .content-d{padding-top:22px}
.jl-hero{background:linear-gradient(120deg,#035187,#2E90FA);color:#fff;border-radius:16px;padding:30px 32px;margin-bottom:20px}
.jl-hero h1{font-size:24px;font-weight:800;margin-bottom:8px}
.jl-hero p{font-size:14px;line-height:1.6;opacity:.95;max-width:660px}
.jl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.jl-sec-h{font-size:16px;font-weight:800;color:var(--ink);margin:26px 0 4px}
.jl-grid+.jl-sec-h{margin-top:30px}
.jl-sec-sub{font-size:12.5px;color:var(--slate-500);margin:0 0 14px}
.jl-badge.soon{background:#fff7ed;color:#c2410c}
.jl-card.jl-soon{background:#fbfcfe}
.jl-soon .jl-sub{min-height:0;margin-bottom:18px}
.jl-soon-b{background:#64748b!important;width:100%;display:flex;justify-content:center;padding:11px}
.jl-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column}
.jl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.jl-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.jl-ic svg{width:24px;height:24px}
.jl-badge{font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;white-space:nowrap}
.jl-badge.on{background:#e7f8ef;color:#0f9d58}
.jl-badge.trial{background:#f3e8ff;color:#7c3aed}
.jl-badge.due{background:#fef2f2;color:#dc2626}
.jl-badge.off{background:#f1f5f9;color:#64748b}
.jl-card h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:4px}
.jl-sub{font-size:12.5px;color:var(--slate-500);margin-bottom:12px;min-height:34px;line-height:1.45}
.jl-feats{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.jl-feats li{font-size:12.5px;color:var(--slate-600);padding-left:19px;position:relative}
.jl-feats li:before{content:"✓";position:absolute;left:0;color:#0f9d58;font-weight:800}
.jl-tiernote{font-size:11.5px;color:var(--slate-500);background:#f6f9fd;border-radius:7px;padding:7px 11px;margin:4px 0 10px}
.jl-tiernote b{color:#035187;font-weight:700}
.act-tiernote{font-size:12.5px;color:#7a4b00;background:#fef6e7;border:1px solid #fde3b0;border-radius:9px;padding:10px 13px;margin:12px 0}
.act-tiernote b{font-weight:700}
.jl-more{display:inline-block;font-size:12.5px;font-weight:600;color:#2E90FA;margin:-4px 0 14px;text-decoration:none}
.jl-more:hover{text-decoration:underline}
.jl-price{font-size:13px;color:var(--slate-500);padding:12px 0;border-top:1px solid var(--line);margin-top:auto}
.jl-price b{font-size:15px;color:var(--ink);font-weight:800}
.jl-cta{display:flex;flex-direction:column;gap:8px}
.jl-cta .btn{display:flex;width:100%;justify-content:center;text-align:center;padding:11px}
.jl-trial{background:#7c3aed!important;border:none}
.jl-buy{font-size:12px;color:var(--slate-500);text-align:center}
.jl-buy:hover{color:var(--blue)}
@media(max-width:1100px){.jl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.jl-grid{grid-template-columns:1fr}}
.lg-demo.lg-sim{display:block}
.lg-sim .lg-demo-l{display:block;margin-bottom:2px}
.lg-simcore{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0 14px;border-bottom:1px solid var(--line);margin:6px 0}
.lg-simhead{display:grid;grid-template-columns:220px 1fr 1fr;gap:18px;padding:8px 0 4px;font-size:10.5px;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.5px}
.lg-simrow{display:grid;grid-template-columns:220px 1fr 1fr;gap:18px;align-items:center;padding:8px 0;border-top:1px solid #eef2f6}
.lg-simcorerow{background:#eff6fd;border-radius:8px;border-top:0}
.lg-simcorerow .lg-simname{color:var(--blue)}
.lg-simname{font-size:13.5px;font-weight:600;color:var(--ink)}
.lg-simname small{display:block;font-size:11px;color:var(--slate-500);font-weight:400;width:auto}
.lg-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;width:fit-content}
.lg-seg.disabled{opacity:.45;pointer-events:none}
.lg-seg-b{padding:6px 15px;font-size:12px;font-weight:600;color:var(--slate-500);border-left:1px solid var(--line);cursor:pointer;transition:.12s;white-space:nowrap}
.lg-seg-b:first-child{border-left:0}
.lg-seg-b:hover{background:#f1f5f9}
.lg-seg-b.on{background:#035187;color:#fff}
.lg-seg-b.on.due{background:#dc2626}
.sim-capsum{font-size:13px;color:#475569;background:#f8fafc;border:1px solid #eef2f6;border-radius:8px;padding:9px 13px;margin:8px 0 14px}
.sim-capsum b{color:#035187;font-weight:700}
.sim-wrap{display:block;margin:8px 0 2px}
.sim-sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:16px}
.sim-sl label{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:700;color:var(--slate-500);margin-bottom:7px}
.sim-sl label span{font-size:14px;font-weight:700;color:#035187}
.sim-sl input[type=range]{width:100%;accent-color:#2E90FA;cursor:pointer}
.sim-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sim-badge{font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:8px}
.sim-badge.tier{background:#e6f1fb;color:#0c447c}
.sim-badge.cap{background:#eef2ff;color:#3730a3}
.sim-meter{margin-bottom:12px}
.sim-meter .sm-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--slate-500);margin-bottom:5px}
.sim-meter .sm-top b{font-size:13px;font-weight:700;color:var(--ink)}
.sim-track{height:9px;border-radius:99px;background:#eef2f6;overflow:hidden}
.sim-track i{display:block;height:100%;width:100%;border-radius:99px}
.sim-bar-ok{background:#2E90FA}
.sim-bar-warn{background:#f59e0b}
.sim-bar-full{background:#ED2329}
.sim-bar-max{background:#0d9488}
.sim-nudge{background:#fff7ed;border:1px solid #fed7aa;border-radius:9px;padding:11px 14px;font-size:12.5px;line-height:1.6;color:#9a3412;margin:14px 0 4px}
.sim-nudge b{font-weight:700}
.sim-price{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid #eef2f6;padding-top:14px;margin-top:14px}
.sim-price .sp-item small{display:block;font-size:11.5px;color:var(--slate-500);margin-bottom:3px}
.sim-price .sp-item b{font-size:16px;font-weight:700;color:#035187}
.sim-price .sp-item.total b{color:#0f766e}
@media(max-width:700px){.sim-sliders{grid-template-columns:1fr}}
.lg-row:first-child{border-top:0}
.lg-mic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.lg-mic svg{width:22px;height:22px}
.lg-mt b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.lg-mt small{font-size:12px;color:var(--slate-500)}
.lg-tag{font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:20px;white-space:nowrap;justify-self:start}
.lg-tag.core{background:#eef2fb;color:#2E90FA}
.lg-tag.on{background:#e7f8ef;color:#0f9d58}
.lg-tag.off{background:#f1f5f9;color:#64748b}
.lg-ract{text-align:right}
.lg-act{padding:9px 15px;font-size:12.5px;white-space:nowrap}
.lg-check{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center}
.lg-check svg{width:18px;height:18px}
.lg-tbl th{text-align:left}
.lg-lunas{font-size:11.5px;font-weight:600;color:#0f9d58;background:#e7f8ef;padding:3px 12px;border-radius:20px}
.lg-note{margin-top:16px;font-size:12.5px;color:var(--slate-600);background:#f6f8fa;border-radius:10px;padding:14px 16px;line-height:1.6}
@media(max-width:1000px){.lg-plan{grid-template-columns:1fr}.lg-pl-r{align-items:flex-start}.lg-row{grid-template-columns:auto 1fr}}
/* Read-only masa tenggang */
.ro-banner{display:flex;align-items:center;gap:14px;background:#fff7e6;border:1px solid #f6d98a;border-radius:12px;padding:13px 18px;margin-bottom:18px;color:#8a6100}
.ro-banner.ro-kad{background:#fdecec;border-color:#f3b6b8;color:#a11}
.ro-ic{flex:none;width:38px;height:38px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center}
.ro-msg{flex:1;font-size:12.5px;line-height:1.55}
.ro-msg b{font-weight:700}
.ro-btn{flex:none;background:#035187;color:#fff;padding:9px 18px;border-radius:9px;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.ro-banner.ro-kad .ro-btn{background:#ED2329}
.dash.ro .content-d .btn[data-noop]:not(.lg-perpanjang):not(.lg-act):not(.act-cta):not(.lg-upg):not(.ro-btn),
.dash.ro .content-d [data-act="tambah"],
.dash.ro .content-d [data-act="edit"]{opacity:.4;pointer-events:none;filter:grayscale(.35)}
/* Demo status switcher */
.lg-demo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#f8fafc}
.lg-demo-l{font-size:12.5px;font-weight:600;color:var(--slate-600)}
.lg-demo-b{display:flex;gap:8px}
.lg-demo-btn{font-size:12px;padding:7px 14px;border-radius:8px;border:1px solid var(--line);color:var(--slate-600);text-decoration:none}
.lg-demo-btn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.lg-demo small{width:100%;font-size:11.5px;color:var(--slate-500)}
/* inKUR Distributor Console */
.rail-op{color:#7a1fa2}
.rail-op.active{background:#7a1fa2;color:#fff}
.ik-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#4a1063,#7a1fa2);color:#fff;border-radius:16px;padding:20px 24px;margin-bottom:18px}
.ik-bic{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex:none}
.ik-bic svg{width:26px;height:26px}
.ik-bt{flex:1}
.ik-bt h2{font-size:20px;font-weight:800}
.ik-bt p{font-size:12.5px;opacity:.9;margin-top:3px}
.ik-op{font-size:10.5px;font-weight:700;letter-spacing:.08em;background:rgba(255,255,255,.2);padding:5px 12px;border-radius:20px;white-space:nowrap}
.ik-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.ik-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:12px}
.ik-kdot{width:12px;height:12px;border-radius:50%;flex:none}
.ik-kpi b{font-size:22px;font-weight:800;color:var(--ink);display:block;line-height:1}
.ik-kpi small{font-size:11.5px;color:var(--slate-500)}
.ik-listhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.ik-listhead h3{font-size:17px;font-weight:700;color:var(--ink)}
.ik-add{padding:10px 18px;font-size:13px;white-space:nowrap}
.ik-filter{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ik-filter .in{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;min-width:180px;background:#fff;font-family:inherit}
.ik-tbl th{text-align:left;font-size:12px;color:var(--slate-500);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line)}
.ik-tbl td{padding:14px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--slate-700);vertical-align:middle}
.ik-tbl tbody tr:hover{background:#faf7fc}
.ik-kode{font-family:monospace;color:var(--slate-500);font-size:12px}
.ik-nm b{display:block;font-weight:700;color:var(--ink)}
.ik-nm small{font-size:11.5px;color:var(--slate-500)}
.ik-tipe{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}
.ik-moduls{display:flex;flex-wrap:wrap;gap:5px;max-width:230px}
.ik-mod{font-size:10.5px;font-weight:600;background:#eef2fb;color:#2E90FA;padding:2px 8px;border-radius:6px}
.ik-mod.core{background:#f1f5f9;color:#64748b}
.ik-tier{font-size:12.5px}
.ik-st{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}
.ik-until{display:block;font-size:10.5px;color:#94a3b8;margin-top:3px}
.ik-act{white-space:nowrap;display:flex;gap:12px;align-items:center}
.ik-kelola{padding:7px 14px;font-size:12px}
.ik-masuk{font-size:12px;color:#7a1fa2;text-decoration:none;font-weight:600}
.ik-masuk:hover{text-decoration:underline}
.ik-arow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.ik-acard{padding:18px 20px}
.ik-acard small{font-size:11.5px;color:var(--slate-500)}
.ik-acard b{font-size:24px;font-weight:800;color:var(--ink);display:block;margin-top:6px}
.ik-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ik-bars{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.ik-bar{display:grid;grid-template-columns:130px 1fr 32px;gap:12px;align-items:center}
.ik-blab{font-size:12.5px;color:var(--ink)}
.ik-btrack{height:10px;background:#f1f5f9;border-radius:6px;overflow:hidden}
.ik-btrack i{display:block;height:100%;border-radius:6px}
.ik-bval{font-size:12.5px;font-weight:700;color:var(--slate-600);text-align:right}
.ik-lchips{display:flex;flex-wrap:wrap;gap:6px}
.ik-lchip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:8px;background:#f1f5f9;color:#94a3b8;border:1px solid var(--line)}
.ik-lchip.on{background:#e7f8ef;color:#0f9d58;border-color:#b7ebd0}
.ik-lchip{cursor:pointer;display:inline-flex;align-items:center;gap:5px;user-select:none;transition:border-color .12s,background .12s,transform .08s}
.ik-lchip:hover{border-color:#94a3b8;background:#eef2f6}
.ik-lchip.on:hover{border-color:#0f9d58;background:#dcf5e6}
.ik-lchip:active{transform:scale(.94)}
.ik-lc-ic{font-weight:800;font-size:11px;opacity:.85}
@media(max-width:1000px){.ik-kpis,.ik-arow{grid-template-columns:1fr 1fr}.ik-2col{grid-template-columns:1fr}}
/* Submenu terkunci karena dependency modul */
.ftile.ft-locked,.navcol-item.nc-locked,.sublist-item.nc-locked{opacity:.55}
.ftile.ft-locked:hover,.navcol-item.nc-locked:hover,.sublist-item.nc-locked:hover{opacity:.85}
.ft-lk,.nc-lk{display:inline-flex;align-items:center;justify-content:center;color:#94a3b8}
.ft-lk svg,.nc-lk svg{width:13px;height:13px}
.sl-lk{color:#94a3b8}
.sl-lk svg{width:15px;height:15px}
/* ===== POS Kasir (modul Core) ===== */
.pos-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(120deg,#0d9488,#0f766e);color:#fff;border-radius:14px;padding:22px 26px;margin-bottom:16px}
.pos-hero-t{display:flex;align-items:center;gap:16px}
.pos-hero-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.16);border-radius:12px}
.pos-hero-ic svg{width:26px;height:26px}
.pos-hero h2{font-size:19px;font-weight:800;margin-bottom:4px}
.pos-hero p{font-size:13px;line-height:1.55;opacity:.92;max-width:520px}
.pos-launch{flex:none;background:#fff;color:#0d7a70;font-weight:700;font-size:14px;padding:12px 22px;border-radius:10px;white-space:nowrap;transition:.15s}
.pos-launch:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(13,148,136,.28)}
.pos-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.pos-kpi{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line,#e6ecf2);border-radius:12px;padding:16px 18px}
.pos-kdot{width:10px;height:10px;border-radius:50%;flex:none}
.pos-kpi b{font-size:22px;font-weight:800;line-height:1.1;display:block}
.pos-kpi small{font-size:12px;color:var(--slate-500,#64748b)}
.pos-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pos-steps{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.pos-steps li{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.5}
.pos-stepn{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;background:#0d94881a;color:#0d7a70;font-weight:800;font-size:12px}
.pos-slink{color:#0d7a70;font-weight:600;font-size:12.5px}
.pos-info{display:flex;flex-direction:column;margin-top:6px}
.pos-irow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line,#eef2f6);font-size:13px}
.pos-irow:last-child{border-bottom:none}
.pos-irow span{color:var(--slate-500,#64748b)}
.pos-mt{margin-top:14px}
.pos-listhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.pos-listhead h3{font-size:16px;font-weight:800}
.pos-role{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;background:#0d94881a;color:#0d7a70}
.pos-stat{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.pos-stat.on{background:#e7f8ef;color:#12b76a}
.pos-stat.off{background:#f1f5f9;color:#64748b}
.pos-act{display:flex;gap:8px;align-items:center;white-space:nowrap}
.pos-act .btn{padding:6px 14px;font-size:12.5px}
.pos-reset{color:#0d7a70;font-weight:600;font-size:12.5px}
.pos-matrix td.pos-pc,.pos-matrix th{text-align:center}
.pos-matrix td:first-child,.pos-matrix th:first-child{text-align:left}
.pos-perm-y{color:#12b76a;font-weight:800;font-size:15px}
.pos-perm-n{color:#cbd5e1;font-weight:800;font-size:15px}
@media(max-width:768px){.pos-kpis{grid-template-columns:repeat(2,1fr)}.pos-2col{grid-template-columns:1fr}.pos-hero{flex-direction:column;align-items:flex-start}}
/* 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}
/* Blok putih atas: logo + inKUR Console menyatu */
.rail-brand{background:#fff;border-radius:0 0 16px 16px;margin:0 0 3px;overflow:hidden;width:100%}
.rail-brand .rail-logo{background:transparent;border-radius:0;margin:0;border-bottom:0;padding:11px 6px 4px}
.rail-item.rail-console{width:auto;margin:2px 9px 9px;flex-direction:column;gap:5px;padding:9px 4px 10px;border-radius:12px;color:#7a1fa2;font-size:9.5px;font-weight:700;line-height:1.15;background:#f4e9fb;transition:.15s var(--ease)}
.rail-item.rail-console svg{width:21px;height:21px}
.rail-item.rail-console:hover{background:#ecdcf7;color:#5b1580}
.rail-item.rail-console.active{background:#7a1fa2;color:#fff;box-shadow:0 8px 16px -8px rgba(122,31,162,.6)}
@media(max-width:768px){.rail-item.rail-console{margin:2px 6px 6px;font-size:8px}}

/* ============================================================
   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 */

/* =========================================================
   KUOTA AKUN. Bar di Manajemen Admin + modal Tambah Akun
   ========================================================= */
.qt-bar{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:14px 0}
.qt-bar.qt-overq{border-color:#fecdca;background:#fffbfa}
.qt-l{flex:1;min-width:0}
.qt-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.qt-top span{font-size:13px;color:var(--slate-500)}
.qt-top span b{color:var(--ink);font-weight:600}
.qt-num{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.qt-plus{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:20px;background:#fee4e2;color:#b42318;font-size:11.5px;font-weight:700}
.qt-track{height:8px;border-radius:20px;background:#eef2f7;overflow:hidden}
.qt-track i{display:block;height:100%;border-radius:20px}
.qt-ok{background:#12b76a}
.qt-warn{background:#f79009}
.qt-full{background:#f04438}
.qt-note{margin:8px 0 0;font-size:12.5px;color:var(--slate-500);line-height:1.5}
.qt-note b{color:var(--ink)}
.qt-btn{white-space:nowrap;flex:none}
.adm-xrow{background:#fffbfa}
.adm-xtag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;background:#fef0c7;color:#b54708;font-size:11px;font-weight:700;vertical-align:1px}

.ka-use{margin-bottom:16px}
.ka-utop{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.ka-utop span{font-size:12.5px;color:var(--slate-500)}
.ka-utop b{font-size:14px;font-weight:700;color:var(--ink)}
.ka-track{height:7px;border-radius:20px;background:#eef2f7;overflow:hidden}
.ka-track i{display:block;height:100%;border-radius:20px}
.ka-ok{background:#12b76a}
.ka-warn{background:#f79009}
.ka-full{background:#f04438}
.ka-hint{margin:9px 0 0;font-size:12.5px;color:var(--slate-500);line-height:1.55}
.ka-hint b{color:var(--ink)}

.ka-box{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.ka-brow{display:flex;align-items:flex-start;gap:16px}
.ka-btxt{flex:1;min-width:0}
.ka-btxt h4{margin:0 0 4px;font-size:14.5px;font-weight:700;color:var(--ink)}
.ka-btxt small{display:block;font-size:12.3px;color:var(--slate-500);line-height:1.55}
.ka-stepper{flex:none;display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#f7f9fc}
.ka-stp{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--slate-500);font-weight:700;font-size:15px;text-decoration:none}
.ka-stp:hover{background:var(--brand);color:#fff}
.ka-n{min-width:34px;text-align:center;font-size:14.5px;font-weight:700;color:var(--ink);background:#fff;align-self:stretch;display:flex;align-items:center;justify-content:center}
.ka-sum{display:flex;align-items:center;justify-content:space-between;margin:14px 0 12px;padding-top:12px;border-top:1px dashed var(--line)}
.ka-sum span{font-size:12.5px;color:var(--slate-500)}
.ka-c{font-size:14px;font-weight:700;color:#12b76a}
.ka-c.pay{color:#b42318}
.ka-cta{display:block;text-align:center}
.ka-alt{margin:14px 0 0;font-size:12.5px;color:var(--slate-500);text-align:center}
.ka-alt a{color:var(--brand);font-weight:600;text-decoration:none}
.ka-alt a:hover{text-decoration:underline}
.ka-alt-max{color:var(--slate-400)}

/* aksi "+ Tambah" akun di meter kartu Langganan (di atas hero biru) */
.lg-mlink{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:20px;background:rgba(255,255,255,.18);color:#fff;font-size:11px;font-weight:600;text-decoration:none;vertical-align:1px;transition:background .15s}
.lg-mlink:hover{background:rgba(255,255,255,.34)}
.lg-mnlink{margin-left:5px;color:#fff;font-weight:700;text-decoration:underline;white-space:nowrap}

/* =========================================================
   POS FnB. Hero merah & denah Meja/Area
   ========================================================= */
.pos-hero-fnb{background:linear-gradient(135deg,#be123c,#e11d48)}
.fnb-legend{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.fnb-lg{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px}
.fnb-area{margin-bottom:20px}
.fnb-area:last-child{margin-bottom:0}
.fnb-ahead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fnb-ahead h4{margin:0;font-size:14.5px;font-weight:700;color:var(--ink)}
.fnb-ahead span{font-size:12px;color:var(--slate-400)}
.fnb-alink{margin-left:auto;font-size:12px;font-weight:600;color:var(--brand);text-decoration:none}
.fnb-alink:hover{text-decoration:underline}
.fnb-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.fnb-t{border-radius:10px;padding:11px 8px;text-align:center;border:1px solid transparent;transition:transform .12s}
.fnb-t:hover{transform:translateY(-2px)}
.fnb-t b{display:block;font-size:14px;font-weight:700;line-height:1.2}
.fnb-t small{display:block;font-size:10.5px;opacity:.75;margin:2px 0 5px}
.fnb-t span{display:block;font-size:10.5px;font-weight:600}
.fnb-t-free{background:#f2f4f7;border-color:#e4e7ec;color:#475467}
.fnb-t-busy{background:#e6f7ef;border-color:#a7e8c8;color:#05603a}
.fnb-t-bill{background:#fef3c7;border-color:#fcd34d;color:#92400e}

/* =========================================================
   POS BBM. Dispenser/nozzle & stok tangki (halaman setup)
   ========================================================= */
.bbm-disps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bbm-disp{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.bbm-dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bbm-dhead h4{margin:0;font-size:14.5px;font-weight:700;color:var(--ink)}
.bbm-dstat{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px}
.bbm-d-on{background:#e6f7ef;color:#05603a}
.bbm-d-off{background:#fef3c7;color:#92400e}
.bbm-nzs{display:flex;flex-direction:column;gap:8px}
.bbm-nz{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;background:#f7f9fc}
.bbm-nzdot{width:9px;height:9px;border-radius:50%;flex:none}
.bbm-nz b{font-size:13px;font-weight:600;color:var(--ink)}
.bbm-nz small{margin-left:auto;font-size:12px;color:var(--slate-500)}
.bbm-tanks{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.bbm-tank{padding:2px 0}
.bbm-ttop{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px;font-size:13px}
.bbm-ttop b{font-weight:700}
.bbm-ttop>b{color:var(--ink);font-size:12.5px}
.bbm-low{font-size:11px;font-weight:600;color:#b42318;background:#fee4e2;padding:1px 7px;border-radius:20px;margin-left:6px}
.bbm-ttrack{height:9px;border-radius:20px;background:#eef2f7;overflow:hidden}
.bbm-ttrack i{display:block;height:100%;border-radius:20px}

/* Reorder modul sidebar (drag & drop). Hanya modul unlocked yang bisa diseret */
.rail-drag{cursor:grab}
.rail-drag:active{cursor:grabbing}
.rail-item.rail-dragging{opacity:.45}
.rail-nav.rail-dropzone{background:rgba(46,144,250,.05)}

/* Dashboard konsolidasi per modul. Grid pintasan ke submenu */
.md-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.md-card{display:flex;flex-direction:column;gap:10px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;transition:transform .14s,box-shadow .14s,border-color .14s}
.md-card:hover{border-color:transparent;box-shadow:0 8px 20px rgba(15,23,42,.09);transform:translateY(-2px)}
.md-ic{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:11px}
.md-ic svg{width:20px;height:20px}
.md-card b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.md-go{font-size:12px;color:var(--slate-400);font-weight:600;margin-top:auto}
.md-card:hover .md-go{color:var(--brand)}
@media(max-width:860px){.md-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   POS BBM — manajemen (harga, kupon, undian, setoran, laporan, peran)
   ========================================================= */
.bbm-note{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:12.8px;line-height:1.6}
.bbm-note b{color:#0f5132}
.bbm-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.bbm-badge.sub{background:#fef3c7;color:#92400e}
.bbm-badge.non{background:#eef2f7;color:#475467}
.bbm-price{font-weight:700;color:var(--ink);white-space:nowrap}
.bbm-price small{font-weight:500;color:var(--slate-400)}
.bbm-stat{font-size:11.5px;font-weight:600;padding:2px 10px;border-radius:20px}
.bbm-st-wait{background:#fef3c7;color:#92400e}
.bbm-st-ok{background:#e6f7ef;color:#05603a}
/* Undian doorprize */
.bbm-drawcard{text-align:center}
.bbm-drawbox{min-height:118px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--line);border-radius:14px;background:#f7f9fc;margin:6px 0 16px;padding:16px}
.bbm-drawbox.rolling{border-color:#15803d;background:#f0fdf4}
.bbm-draw-empty{color:var(--slate-400);font-size:13px}
.bbm-draw-roll{font-size:22px;font-weight:800;color:#15803d;letter-spacing:1px;font-variant-numeric:tabular-nums}
.bbm-win{display:flex;flex-direction:column;gap:5px;animation:bbmpop .3s var(--ease)}
.bbm-win-lbl{font-size:12px;font-weight:700;color:#15803d;text-transform:uppercase;letter-spacing:.5px}
.bbm-win-nm{font-size:26px;font-weight:800;color:var(--ink);line-height:1.1}
.bbm-win-kode{font-size:13px;color:var(--slate-500);font-weight:600}
@keyframes bbmpop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.bbm-drawbtn{min-width:230px;justify-content:center}
/* Peran: kartu ringkas */
.bbm-rolecards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.bbm-rc{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.bbm-rc b{display:block;font-size:14px;color:var(--ink);margin-bottom:5px}
.bbm-rc small{font-size:12.3px;color:var(--slate-500);line-height:1.55}
.bbm-rc b b{display:inline;color:#15803d}
/* Kartu Poin & Kupon di profil anggota */
.dp-bbm{display:flex;align-items:center;gap:14px;padding:4px 0 10px}
.dp-bbm-poin{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:66px;height:60px;border-radius:12px;background:#f0fdf4;color:#15803d}
.dp-bbm-poin b{font-size:24px;line-height:1;font-weight:800}
.dp-bbm-poin span{font-size:11px;margin-top:2px}
.dp-bbm small{font-size:12px;color:var(--slate-500);line-height:1.55}
.dp-bbm-kupon{border-top:1px solid var(--line);padding-top:10px;font-size:12.5px;color:var(--slate-500)}
.dp-bbm-kupon b{color:#15803d;font-weight:700;margin-right:4px}
.dp-bbm-kupon i{color:var(--slate-400);font-style:normal}
@media(max-width:860px){.bbm-rolecards{grid-template-columns:1fr}}

/* =========================================================
   POS BBM — Koneksi API (pairing kode)
   ========================================================= */
.ak-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:12.8px;line-height:1.6}
.ak-note b{color:#1e3a8a}
.ak-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
.ak-status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.ak-status{font-size:12px;font-weight:700;padding:3px 11px;border-radius:20px;white-space:nowrap}
.ak-status.on{background:#e6f7ef;color:#05603a}
.ak-status.off{background:#fef3c7;color:#92400e}
.ak-lbl{display:block;font-size:12px;font-weight:600;color:var(--slate-500);margin:15px 0 6px}
.ak-lbl small{font-weight:500;color:var(--slate-400)}
.ak-inp{display:flex;align-items:center;gap:6px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.ak-inp code{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-ib{flex:none;font-size:12px;font-weight:600;color:var(--brand);text-decoration:none;padding:4px 9px;border-radius:7px}
.ak-ib:hover{background:#e6f1fb}
.ak-ib.ok{color:#12b76a}
.ak-actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.ak-warn{font-size:11.5px;color:#b42318}
.ak-perms{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ak-perms li{display:flex;gap:9px;align-items:flex-start;font-size:12.8px;line-height:1.45}
.ak-mk{flex:none;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px}
.ak-p.yes{color:var(--ink)}
.ak-p.yes .ak-mk{background:#e6f7ef;color:#05603a}
.ak-p.no{color:var(--slate-400)}
.ak-p.no .ak-mk{background:#fee4e2;color:#b42318}
@media(max-width:860px){.ak-grid{grid-template-columns:1fr}}

/* Koneksi API — Simulasi Alur Data */
.ak-simhead{margin:24px 0 14px;border-top:1px solid var(--line);padding-top:22px}
.ak-simhead h3{font-size:16px;font-weight:700;color:var(--ink)}
.ak-simhead h3 span{font-size:12px;font-weight:500;color:var(--slate-400)}
.ak-reqline{margin:0 0 12px}
.ak-reqline code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#0f172a;color:#7ee787;padding:6px 12px;border-radius:8px;display:inline-block}
.ak-unit{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:#f0fdf4;color:#15803d;white-space:nowrap}
.ak-loginok{color:#05603a;font-weight:600;font-size:12.5px}
.ak-loginno{color:#b42318;font-weight:600;font-size:12.5px}
@keyframes akrow{0%{background:#fef9c3}100%{background:transparent}}
.ak-newrow{animation:akrow 1.8s ease}

/* Hub Anggota — tab sub-view di atas list */
.hub-tabs{display:flex;gap:4px;margin:0 0 16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.hub-tab{padding:9px 16px;font-size:13px;font-weight:600;color:var(--slate-500);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.hub-tab:hover{color:var(--ink)}
.hub-tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.hub-sep{width:1px;align-self:center;height:20px;background:var(--line);margin:0 8px}

/* Tombol "Atur Menu" di rail + popup atur urutan */
.rail-foot .rail-atur-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:4px auto 0;border-radius:9px;color:rgba(255,255,255,.45);text-decoration:none;transition:.15s var(--ease)}
.rail-foot .rail-atur-btn svg{width:16px;height:16px}
.rail-foot .rail-atur-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.atm-hint{font-size:12.5px;color:var(--slate-500);margin:0 0 14px;line-height:1.6}
.atm-hint b{color:var(--ink)}
.atm-list{display:flex;flex-direction:column;gap:8px}
.atm-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.atm-ic{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none}
.atm-ic svg{width:20px;height:20px}
.atm-nm{flex:1;font-size:13.5px;font-weight:600;color:var(--ink)}
.atm-btns{display:flex;gap:5px}
.atm-mv{width:31px;height:31px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;color:var(--slate-500);text-decoration:none;font-size:11px}
.atm-mv:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.atm-mv.off{opacity:.3;pointer-events:none}
.atm-lockhd{font-size:11px;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.4px;margin:18px 0 8px}
.atm-lock{opacity:.65;background:var(--soft)}
.atm-lockmk{color:#94a3b8;display:flex}
.atm-lockmk svg{width:15px;height:15px}

/* Ringkasan hub (dashboard: KPI + chart + komposisi) */
.rk-kpis{margin-bottom:16px}
.rk-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}
.rk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.rk-trend{font-size:12px;font-weight:700;color:#05603a;background:#e6f7ef;padding:3px 11px;border-radius:20px;white-space:nowrap}
.rk-chart{margin-top:8px}
.rk-bars{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.rk-bar{display:flex;align-items:center;gap:10px}
.rk-bl{font-size:12px;color:var(--slate-500);width:118px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-bt{flex:1;height:8px;border-radius:20px;background:#eef2f7;overflow:hidden}
.rk-bt i{display:block;height:100%;border-radius:20px}
.rk-bv{font-size:12.5px;font-weight:700;color:var(--ink);width:34px;text-align:right;flex:none}
@media(max-width:960px){.rk-grid{grid-template-columns:1fr}}

/* Dashboard hub v2 — KPI ber-delta + toolbar chart */
.rk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.rk-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.rk-kpi-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.rk-kpi-l{font-size:12px;color:var(--slate-500);font-weight:500}
.rk-kpi-d{font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px;white-space:nowrap}
.rk-kpi-d.up{color:#05603a;background:#e6f7ef}
.rk-kpi-d.down{color:#b42318;background:#fee4e2}
.rk-kpi-v{font-size:26px;font-weight:800;color:var(--ink);line-height:1;display:block}
.rk-kpi-s{font-size:11px;color:var(--slate-400);margin-top:6px;display:block}
.rk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.rk-cur{display:block;font-size:20px;font-weight:800;color:var(--ink);margin-top:4px}
.rk-cur small{font-size:12px;font-weight:500;color:var(--slate-400)}
.rk-tools{display:flex;align-items:center;gap:8px;flex:none}
.rk-sel{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--ink);background:#fff;font-weight:600;cursor:pointer}
.rk-trend{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.rk-trend.up{color:#05603a;background:#e6f7ef}
.rk-trend.down{color:#b42318;background:#fee4e2}
@media(max-width:960px){.rk-kpis{grid-template-columns:repeat(2,1fr)}}


/* Dashboard Anggota — widget tambahan */
.rk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.rk-todos{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.rk-todo{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;text-decoration:none;transition:.14s}
.rk-todo:hover{border-color:transparent;box-shadow:0 6px 16px rgba(15,23,42,.08);transform:translateY(-1px)}
.rk-todo-ic{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:15px}
.rk-todo-t{flex:1;font-size:13px;color:var(--ink);line-height:1.35}
.rk-todo-n{font-size:15px;font-weight:800;color:var(--ink)}
.rk-todo-go{color:var(--slate-400);font-size:18px;font-weight:700}
.rk-clegend{display:flex;gap:14px;font-size:11.5px;color:var(--slate-500);font-weight:600}
.rk-clegend span{display:flex;align-items:center;gap:5px}
.rk-clegend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.rk-donutwrap{display:flex;align-items:center;gap:18px;margin-top:8px}
.rk-donutwrap svg{flex:none}
.rk-legend{display:flex;flex-direction:column;gap:9px;flex:1}
.rk-lg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--slate-600,#475467)}
.rk-lg .rk-lg-l{flex:1}
.rk-lg b{color:var(--ink);font-weight:700}
.rk-dot{width:10px;height:10px;border-radius:50%;flex:none}
.rk-feeds{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.rk-feed{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--line)}
.rk-feed:last-child{border-bottom:0}
.rk-ava{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}
.rk-feed-t{flex:1;min-width:0}
.rk-feed-t b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.rk-feed-t small{font-size:11.5px;color:var(--slate-400)}
.rk-feed-d{font-size:11.5px;color:var(--slate-400);flex:none}
@media(max-width:960px){.rk-grid2{grid-template-columns:1fr}}

/* Dashboard Anggota — header global + demografi */
.rk-dashhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px}
.rk-dashhead h2{font-size:19px;font-weight:800;color:var(--ink);margin:0}
.rk-dashhead>div>span{font-size:12.5px;color:var(--slate-400)}
.rk-gender{margin-top:4px}
.rk-split{display:flex;height:12px;border-radius:20px;overflow:hidden;gap:2px}
.rk-split i{display:block;height:100%}
.rk-glbl{display:flex;justify-content:space-between;margin-top:9px;font-size:12.5px;color:var(--slate-500)}
.rk-glbl b{color:var(--ink);font-weight:700}
.rk-demo-sub{font-size:11.5px;font-weight:700;color:var(--slate-400);text-transform:uppercase;letter-spacing:.4px;margin:16px 0 8px}

/* Dashboard hub — note skala */
.rk-note-s{font-size:11px;color:var(--slate-400);margin-top:8px;text-align:right}

/* Dashboard Keuangan — ringkasan neraca */
.rk-nrc{margin-top:6px}
.rk-nrc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px;color:var(--slate-600,#475467)}
.rk-nrc-row b{font-size:15px;font-weight:800;color:var(--ink)}
.rk-nrc-row b.pos{color:#12b76a}
.rk-nrc-bar{height:10px;border-radius:20px;background:#eef2f7;overflow:hidden;margin:16px 0 8px}
.rk-nrc-bar i{display:block;height:100%;background:linear-gradient(90deg,#0a8f52,#12b76a)}
.rk-nrc-cap{font-size:12px;color:var(--slate-400)}
.rk-nrc-cap b{color:var(--ink);font-weight:700}

/* Dashboard utama — ringkasan eksekutif agregat */
.dm-kpis{grid-template-columns:repeat(6,1fr)}
.dm-card{display:flex;flex-direction:column}
.dm-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.dm-dot{width:11px;height:11px;border-radius:50%;flex:none}
.dm-go{margin-left:auto;font-size:12.5px;font-weight:600;color:#2E90FA;text-decoration:none;white-space:nowrap}
.dm-go:hover{text-decoration:underline}
.dm-stats{display:flex;gap:28px;margin-bottom:10px}
.dm-stat{display:flex;flex-direction:column;gap:3px}
.dm-l{font-size:12px;color:var(--slate-500,#667085)}
.dm-vr{display:flex;align-items:baseline;gap:7px}
.dm-v{font-size:21px;font-weight:800;color:var(--ink)}
.dm-d{font-size:12px;font-weight:700}
.dm-d.up{color:#12b76a}
.dm-d.down{color:#ED2329}
@media(max-width:1200px){.dm-kpis{grid-template-columns:repeat(3,1fr)}}

/* POS Retail — connbar dashboard */
.pos-connbar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(120deg,#eef5fb,#f7fafd);border:1px solid #e3edf6;border-radius:14px;padding:13px 16px;margin-bottom:16px}
.pos-conn-l{display:flex;align-items:center;gap:11px}
.pos-conn-dot{width:11px;height:11px;border-radius:50%;background:#cbd5e1;flex:none}
.pos-conn-dot.on{background:#12b76a;box-shadow:0 0 0 4px rgba(18,183,106,.18)}
.pos-conn-l b{font-size:13.5px;color:var(--ink);display:block}
.pos-conn-l small{font-size:12px;color:var(--slate-500)}

/* Pengaturan — Koneksi & API (registry pusat) */
.kn-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.kn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kn-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;gap:11px}
.kn-card.kn-off{opacity:.72}
.kn-card-h{display:flex;align-items:center;gap:11px}
.kn-dot{width:12px;height:12px;border-radius:4px;flex:none}
.kn-card-t{flex:1;min-width:0}
.kn-card-t b{font-size:14px;color:var(--ink);display:block;line-height:1.2}
.kn-mod{font-size:11.5px;color:var(--slate-500)}
.kn-status{font-size:11.5px;font-weight:700;white-space:nowrap}
.kn-status.on{color:#12b76a}
.kn-status.off{color:var(--slate-400)}
.kn-scopes{display:flex;flex-wrap:wrap;gap:6px}
.kn-scope{font-size:11px;font-weight:600;padding:4px 9px;border-radius:20px;background:#eef2f7;color:var(--slate-600,#475467)}
.kn-scope.kn-r{background:#e6f1fb;color:#0a4d80}
.kn-scope.kn-w{background:#e7f7ef;color:#0a7a44}
.kn-scope.kn-x{background:#fdecec;color:#b42318}
.kn-card-f{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:11px;margin-top:1px}
.kn-dev{font-size:11.5px;color:var(--slate-400)}
.kn-acts{display:flex;gap:8px}
.kn-btn{padding:6px 13px;font-size:12.5px}
.kn-revoke{padding:6px 13px;font-size:12.5px;background:#fff;border:1px solid #f2c4c4;color:#b42318}
.kn-revoke:hover{background:#fdecec}
.kn-pol{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:6px}
.kn-pol-hd{font-size:12.5px;font-weight:800;margin-bottom:2px}
.kn-pol-hd.kn-ok{color:#12b76a}
.kn-pol-hd.kn-no{color:#ED2329}
.kn-prev{margin-top:2px}
.kn-prev-h{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.kn-json{background:#0f172a;color:#cbd5e1;border-radius:11px;padding:14px 16px;font-size:12.5px;line-height:1.55;overflow-x:auto;font-family:'SFMono-Regular',Consolas,monospace;margin:0}
.kn-jl{color:#4ade80;font-weight:700}
.kn-prev-x{font-size:12px;color:var(--slate-500);margin-top:10px;line-height:1.5}
@media(max-width:900px){.kn-grid,.kn-pol{grid-template-columns:1fr}}

/* POS FnB — Kitchen Display (KDS) */
.kds-legend{display:flex;gap:14px;margin:0 0 14px;font-size:12px;font-weight:600}
.kds-lg{padding:4px 12px;border-radius:20px}
.kds-lg.kds-baru{background:#e6f1fb;color:#0a4d80}
.kds-lg.kds-masak{background:#fef3e2;color:#b45309}
.kds-lg.kds-siap{background:#e7f7ef;color:#0a7a44}
.kds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kds-card{border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;background:#fff;border-top:4px solid #cbd5e1;display:flex;flex-direction:column}
.kds-card.kds-baru{border-top-color:#2E90FA}
.kds-card.kds-masak{border-top-color:#f59e0b}
.kds-card.kds-siap{border-top-color:#12b76a}
.kds-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:13px 14px 8px}
.kds-h b{font-size:15px;color:var(--ink)}
.kds-meja{display:block;font-size:12px;color:var(--slate-500);margin-top:1px}
.kds-badge{font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;white-space:nowrap}
.kds-baru .kds-badge{background:#e6f1fb;color:#0a4d80}
.kds-masak .kds-badge{background:#fef3e2;color:#b45309}
.kds-siap .kds-badge{background:#e7f7ef;color:#0a7a44}
.kds-items{list-style:none;margin:0;padding:4px 14px 10px;flex:1}
.kds-items li{font-size:13px;color:var(--ink);padding:4px 0;border-bottom:1px dashed var(--line);line-height:1.35}
.kds-items li:last-child{border-bottom:0}
.kds-f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:#fafbfd;border-top:1px solid var(--line)}
.kds-timer{font-size:12px;color:var(--slate-500);font-weight:600}
.kds-btn{padding:6px 12px;font-size:12px}
@media(max-width:900px){.kds-grid{grid-template-columns:1fr 1fr}}

/* Demo live — efek koneksi antar-modul (mockup, tanpa backend) */
.demo-live{border:1px solid #bfe3d0;background:linear-gradient(180deg,#f2fbf6,#fff)}
.demo-badge{display:inline-block;font-size:10px;font-weight:800;color:#fff;background:#12b76a;padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle;animation:demopulse 1.5s infinite}
@keyframes demopulse{0%,100%{opacity:1}50%{opacity:.5}}
.demo-count{color:#0a7a44;font-size:13px;white-space:nowrap;font-weight:700}
.demo-newrow{animation:demoflash 1.1s ease}
@keyframes demoflash{0%{background:#d9f5e6}100%{background:transparent}}
.demo-poin{display:flex;align-items:center;gap:12px;padding:12px 2px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.demo-ava{width:40px;height:40px;border-radius:50%;background:#035187;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:none}
.demo-poin-t{flex:1}
.demo-poin-t b{display:block;font-size:14px;color:var(--ink)}
.demo-poin-t small{font-size:12px;color:var(--slate-400)}
.demo-pts{font-size:19px;font-weight:800;color:#12b76a}
.demo-act{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--slate-600,#475467);padding:5px 2px}
.demo-act b{color:#0a7a44;white-space:nowrap}

/* Agregat poin LIVE (3 kolom) */
.demo-kpi3{grid-template-columns:repeat(3,1fr);margin:0}

/* Akun Demo — pintasan buka aplikasi terpisah */
.lg-apps .lg-demo-b{gap:10px;flex-wrap:wrap}
.lg-appbtn{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;transition:.15s;min-width:172px}
.lg-appbtn:hover{border-color:#d9e5f2;box-shadow:0 8px 18px -10px rgba(15,27,45,.3);transform:translateY(-1px)}
.lg-appbtn.off{opacity:.5;cursor:default}
.lg-appdot{width:10px;height:10px;border-radius:50%;flex:none}
.lg-appt{flex:1;line-height:1.25}
.lg-appt b{display:block;font-size:13px;color:var(--ink)}
.lg-appt small{font-size:11px;color:var(--slate-400)}
.lg-appgo{color:var(--slate-400);font-size:13px;font-weight:700}

/* Bar penunjuk: saldo/plafon terpusat di Core (tab Poin & Kasbon tiap POS) */
.poin-corebar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(90deg,#f4f9ff,#fff);border-left:3px solid var(--blue)}
.pcb-i{font-size:15px;flex:none}
.pcb-t{flex:1;margin:0;font-size:12.5px;line-height:1.5;color:var(--slate-400)}
.pcb-t b{font-weight:600;color:var(--ink)}
.pcb-go{flex:none;font-size:12px;font-weight:600;color:var(--blue);text-decoration:none;padding:8px 14px;border:1px solid #cfe3f7;border-radius:9px;background:#fff;transition:.15s;white-space:nowrap}
.pcb-go:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Satuan menempel di kanan input (Rp / poin / hari / %) — halaman aturan poin & kasbon */
.fld-wu{position:relative;display:flex;align-items:center}
.fld-wu input,.fld-wu select,.fld-wu textarea{width:100%;padding-right:74px}
.fld-unit{position:absolute;right:10px;font-size:11px;font-weight:600;color:var(--slate-400);background:var(--slate-50,#f6f8fb);border:1px solid var(--line);border-radius:6px;padding:2px 7px;pointer-events:none;white-space:nowrap;max-width:66px;overflow:hidden;text-overflow:ellipsis}

/* ===== Aturan Poin interaktif (simulator + toast) ===== */
.pc-secd{font-size:12px;color:var(--slate-400);margin:-4px 0 12px}
.pc-sim{background:linear-gradient(180deg,#f0f7ff,#fff);border:1px solid #d6e6f7;border-radius:14px;padding:16px 18px;margin:0 0 4px}
.pc-simrow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.pc-simrow .form-group{margin:0;min-width:180px}
.pc-out{flex:1;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;justify-content:center}
.pc-out b{font-size:24px;font-weight:800;color:var(--blue);line-height:1.1}
.pc-out small{font-size:11.5px;color:var(--slate-400);margin-top:3px}
.pc-dirty{font-size:12px;font-weight:600;color:#d97706;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:5px 10px;white-space:nowrap}
.pc-toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:9999;background:#0f2a43;color:#fff;font-size:13px;font-weight:500;padding:13px 20px;border-radius:12px;box-shadow:0 16px 40px -12px rgba(3,27,55,.55);opacity:0;transition:.28s;max-width:560px;line-height:1.5}
.pc-toast.show{opacity:1;transform:translate(-50%,0)}
.pc-toast.err{background:#7f1d1d}
.pc-toast b{color:#6ee7b7}

/* Item menu deprecated — tetap tampil, dipudarkan + aksen merah (mis. Website Builder) */
.ftile.ft-dep{--tc:#ef4444;opacity:.62;filter:grayscale(.2)}
.ftile.ft-dep:hover{opacity:.92;filter:none}
.ftile.ft-dep .fic{color:#dc2626}
.ftile.ft-dep .ft b{color:#b91c1c;text-decoration:line-through;text-decoration-color:rgba(185,28,28,.45)}
.ft-deptag{display:inline-block;margin-left:7px;font-size:9px;font-weight:800;color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;border-radius:5px;padding:1px 5px;vertical-align:middle;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.navcol-item.ft-dep{opacity:.6}
.navcol-item.ft-dep .nc-t{color:#b91c1c;text-decoration:line-through;text-decoration-color:rgba(185,28,28,.4)}


/* Dropdown entitas (PUSAT) — dirapikan: ikon + jenis, item aktif disorot */
.tb-ent{min-width:280px;padding:6px}
.tb-ent-mi{align-items:center;gap:11px;padding:9px 10px;margin-bottom:2px}
.tb-ent-mi:last-child{margin-bottom:0}
.tb-ent-ic{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--soft);color:var(--slate-500);transition:.14s}
.tb-ent-ic svg{width:16px;height:16px}
.tb-ent-t{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.tb-ent-t b{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-ent-t small{font-size:11px;color:var(--slate-400);font-weight:500}
.tb-ent-ck{flex:none;color:var(--blue);display:flex}
.tb-ent-ck svg{width:18px;height:18px}
.tb-ent-mi.on{background:#eff6fd}
.tb-ent-mi.on .tb-ent-ic{background:var(--blue);color:#fff}
.tb-ent-mi.on .tb-ent-t b{color:var(--blue)}
.tb-ent-mi.on:hover{background:#e4f0fb}

/* Breadcrumb lokasi di topbar kiri (Modul › Halaman) */
.tb-loc-div{width:1px;height:20px;background:var(--line);flex:none;margin:0 2px}
.tb-loc{display:flex;align-items:center;gap:6px;font-size:14px;min-width:0;overflow:hidden}
.tb-loc-m{color:var(--slate-400);font-weight:500;white-space:nowrap}
.tb-loc b{color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-loc-sep{width:13px;height:13px;color:var(--slate-300);flex:none}

/* Tombol home topbar (ikon saja, tanpa teks "Dash" yg dobel dengan breadcrumb) */
.tb-home{padding:8px;gap:0}

/* angka utama + persen pendamping di legenda demografi */
.rk-glbl b{font-size:14px}
.rk-glbl small{font-size:11px;color:var(--slate-400);font-weight:600;margin-left:3px}

/* Kartu KPI "Anggota Baru" (pengganti feed pasif) */
.rk-nbcard .rk-cur small{color:var(--slate-400);font-weight:500;font-size:11px}
.rk-spark{width:100%;height:54px;display:block;margin:10px 0 2px}
.rk-cbwrap{display:flex;align-items:flex-end;gap:8px;margin:16px 0 2px}
.rk-cb{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.rk-cb-v{font-size:11px;font-weight:600;color:var(--slate-400);line-height:1}
.rk-cb-track{height:88px;width:100%;max-width:30px;display:flex;align-items:flex-end}
.rk-cb-track i{width:100%;border-radius:6px 6px 0 0;display:block;min-height:3px;transition:height .35s ease}
.rk-cb-l{font-size:11px;color:var(--slate-400);line-height:1}
.rk-cb.cur .rk-cb-v{color:#12b76a}
.rk-cb.cur .rk-cb-l{color:var(--ink);font-weight:700}
.rk-nb-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--slate-400);border-top:1px solid var(--line);padding-top:11px;margin-top:8px}
.rk-nb-foot b{color:var(--ink);font-weight:700}

/* ikon todo (Perlu Diproses) kini SVG, bukan emoji */
.rk-todo-ic svg{width:17px;height:17px}

/* ikon lock di bar corebar & preview API (SVG, bukan emoji) */
.pcb-i{color:var(--blue)}
.pcb-i svg{width:15px;height:15px;display:block}

/* Tabel prospek "Pelanggan Paling Aktif" di dashboard Non-Anggota */
.pr-nm{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);white-space:nowrap}
.pr-av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
.pr-pot{color:#12b76a;font-weight:600;font-size:12.5px;white-space:nowrap}
.pr-pot span{color:var(--slate-400);font-weight:500}
.pr-ajak{padding:7px 14px;font-size:12.5px;white-space:nowrap}
.pr-tbl td{vertical-align:middle}

/* tombol "Ajak" kompak di baris Pengguna Umum */
.act .act-ajak{font-size:11.5px;font-weight:700;color:#fff;background:var(--blue);border-radius:7px;padding:4px 11px;white-space:nowrap;text-decoration:none}
.act .act-ajak:hover{background:var(--blue-2)}