/* Panel Induk — tampilan disamakan dengan Dashboard Malino Group (kade.malinoku.com), 14 Nov 2026. */
:root {
  --ink: #171512; --cream: #faf3e3; --paper: #fffdf7; --red: #e94f64; --yellow: #f5b83d; --teal: #2fa48c;
  --muted: #7a7365; --line: #171512; --shadow: 4px 4px 0 var(--ink); --sidebar-w: 248px;
  --font-head: "Bricolage Grotesque", sans-serif; --font-body: "DM Sans", sans-serif; --font-mono: "Space Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--cream); color: var(--ink); -webkit-tap-highlight-color: transparent;
       overscroll-behavior-y: none; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
.tersembunyi { display: none !important; }

/* ── Kerangka ─────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-w); background: var(--ink); color: var(--cream); z-index: 20; padding-top: env(safe-area-inset-top);
           padding-left: env(safe-area-inset-left); flex-direction: column; display: flex; position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; }
.main { margin-left: var(--sidebar-w); flex-direction: column; flex: 1; min-width: 0; display: flex; }
.content { padding: 24px 28px 48px; }
.brand { border-bottom: 1px solid rgba(250,243,227,.15); align-items: center; gap: 10px; padding: 20px 18px 16px; display: flex; }
.brand-logo { background: var(--paper); width: 38px; height: 38px; font-family: var(--font-head); color: var(--red); border: 2px solid var(--ink);
              border-radius: 9px; place-items: center; font-size: 20px; font-weight: 800; display: grid; flex: none; }
.brand-name { font-family: var(--font-head); letter-spacing: .5px; font-size: 16px; font-weight: 800; }
.brand-sub { font-family: var(--font-mono); letter-spacing: 2px; color: var(--yellow); font-size: 9px; }
.nav-section { font-family: var(--font-mono); letter-spacing: 2px; color: rgba(250,243,227,.45); padding: 18px 18px 6px; font-size: 10px; }
.nav-link { color: rgba(250,243,227,.85); border-left: 3px solid transparent; align-items: center; gap: 10px; padding: 9px 18px;
            font-size: 13.5px; font-weight: 500; display: flex; }
.nav-link:hover { background: rgba(250,243,227,.08); }
.nav-link.active { border-left-color: var(--yellow); color: var(--yellow); background: rgba(245,184,61,.12); }
.nav-ico { text-align: center; width: 20px; flex: none; }
.nav-teks { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { font-family: var(--font-mono); background: var(--red); color: var(--paper); border-radius: 99px; margin-left: auto; padding: 1px 7px; font-size: 10px; flex: none; }
.nav-badge.kuning { background: var(--yellow); color: var(--ink); }
.sidebar .brand-name { font-size: 14.5px; letter-spacing: .2px; white-space: nowrap; }
.sidebar-foot { font-family: var(--font-mono); color: rgba(250,243,227,.4); border-top: 1px solid rgba(250,243,227,.15); margin-top: auto; padding: 16px 18px; font-size: 10px; }
.header { z-index: 10; background: var(--paper); border-bottom: 2px solid var(--ink);
          padding: max(12px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 12px max(28px, env(safe-area-inset-left));
          align-items: center; gap: 16px; display: flex; position: sticky; top: 0; }
.header h1 { font-family: var(--font-head); white-space: nowrap; text-overflow: ellipsis; min-width: 0; font-size: 20px; font-weight: 800; overflow: hidden; }
.header-clock { font-family: var(--font-mono); color: var(--muted); margin-left: auto; font-size: 12px; white-space: nowrap; }
.chip { background: var(--cream); border: 2px solid var(--ink); border-radius: 99px; align-items: center; gap: 8px; padding: 5px 12px;
        font-size: 12.5px; font-weight: 700; display: inline-flex; white-space: nowrap; }
.chip .dot { background: var(--teal); border-radius: 99px; width: 8px; height: 8px; }
.ticker { background: var(--ink); color: var(--yellow); font-family: var(--font-mono); letter-spacing: 1.5px; white-space: nowrap; padding: 7px 0; font-size: 11px; overflow: hidden; }
.ticker span { padding-left: 100%; animation: 40s linear infinite tick; display: inline-block; }
@keyframes tick { to { transform: translate(-100%); } }

/* ── Tombol ───────────────────────────────────────────── */
.btn { border: 2px solid var(--ink); background: var(--ink); color: var(--yellow); box-shadow: 3px 3px 0 var(--red); border-radius: 9px;
       padding: 7px 14px; font-size: 12.5px; font-weight: 700; transition: transform 60ms, box-shadow 60ms; display: inline-flex;
       align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn:hover { box-shadow: 2px 2px 0 var(--red); transform: translate(1px,1px); }
.btn.ghost { background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.ghost:hover { box-shadow: 2px 2px 0 var(--ink); }
.btn.merah { background: var(--red); color: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.btn.hijau { background: var(--teal); color: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.btn.kecil { padding: 4px 10px; font-size: 11.5px; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.deret { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Kisi & widget ────────────────────────────────────── */
.grid { gap: 18px; display: grid; }
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.two { grid-template-columns: 2fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.units { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 1100px) { .grid.two, .grid.three { grid-template-columns: 1fr; } }
.widget { background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow); border-radius: 14px; min-width: 0; padding: 18px; }
.widget-head { align-items: baseline; gap: 10px; margin-bottom: 12px; display: flex; }
.widget-title { font-family: var(--font-mono); letter-spacing: 2px; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.widget-sub { color: var(--muted); margin-left: auto; font-size: 11.5px; text-align: right; }
.kpi-value { font-family: var(--font-head); font-size: 28px; font-weight: 800; line-height: 1.1; margin-top: 6px; word-break: break-word; }
.kpi-note { color: var(--muted); margin-top: 6px; font-size: 12px; }
.kpi-accent { border-radius: 99px; width: 34px; height: 5px; margin-bottom: 10px; }
.label-mono { font-family: var(--font-mono); letter-spacing: 2px; text-transform: uppercase; font-size: 9.5px; font-weight: 700; }
.section-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.section-head .widget-title { font-size: 11px; }

/* ── Tabel & badge ────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { border-collapse: collapse; width: 100%; font-size: 13px; }
.table th { text-align: left; font-family: var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
            border-bottom: 2px solid var(--ink); padding: 8px 10px; font-size: 10px; white-space: nowrap; }
.table td { border-bottom: 1px solid #e7e0d0; padding: 9px 10px; vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.table th.num { font-size: 10px; }
.table .mono { font-family: var(--font-mono); font-size: 12px; }
.table tr.turun td { background: #ffd7dc; }
.table tr.total td { font-weight: 700; border-top: 2px solid var(--ink); }
.table a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }
.badge { font-family: var(--font-mono); letter-spacing: 1px; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: 99px;
         padding: 2px 9px; font-size: 10px; font-weight: 700; display: inline-block; white-space: nowrap; background: var(--paper); }
.badge.ok { background: #d8f3e8; }
.badge.warn { background: #ffe9b8; }
.badge.bad { background: #ffd7dc; }
.badge.ink { background: var(--ink); color: var(--yellow); }

/* ── Kartu toko (gaya unit bisnis) ────────────────────── */
.unit-card { flex-direction: column; gap: 10px; display: flex; }
.unit-top { align-items: center; gap: 10px; display: flex; }
.unit-top .badge { margin-left: auto; }
.unit-kode { font-family: var(--font-head); background: var(--yellow); border: 2px solid var(--ink); border-radius: 9px; padding: 4px 9px; font-size: 14px; font-weight: 800; flex: none; }
.unit-nama { font-size: 15px; font-weight: 700; min-width: 0; word-break: break-word; }
.unit-desc { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.unit-metric { font-family: var(--font-head); font-size: 22px; font-weight: 800; line-height: 1.15; }
.unit-foot { justify-content: space-between; align-items: center; margin-top: auto; padding-top: 4px; display: flex; gap: 10px; }

/* ── Daftar, avatar, aksi cepat ───────────────────────── */
.list-row { border-bottom: 1px solid #e7e0d0; align-items: center; gap: 10px; padding: 9px 0; display: flex; }
.list-row:last-child { border-bottom: none; }
button.list-row { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.avatar { background: var(--yellow); border: 2px solid var(--ink); border-radius: 99px; flex: none; place-items: center; width: 30px; height: 30px;
          font-size: 12px; font-weight: 800; display: grid; }
.avatar.merah { background: #ffd7dc; }
.avatar.hijau { background: #d8f3e8; }
.list-main { flex: 1; min-width: 0; }
.list-title { white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 700; overflow: hidden; }
.list-sub { color: var(--muted); white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; overflow: hidden; }
.list-time { font-family: var(--font-mono); color: var(--muted); flex: none; font-size: 10px; text-align: right; }
.qa-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; display: grid; }
.qa { border: 2px solid var(--ink); background: var(--cream); text-align: center; border-radius: 11px; padding: 10px; font-size: 12px; font-weight: 700;
      transition: transform 60ms; display: block; }
.qa:hover { box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px,-1px); }
.qa .ico { font-size: 18px; display: block; }
.qa .unit { font-family: var(--font-mono); color: var(--muted); letter-spacing: 1px; font-size: 9px; display: block; }
.kosong { color: var(--muted); font-size: 12.5px; padding: 6px 0; }

.page-title { font-family: var(--font-head); margin-bottom: 4px; font-size: 24px; font-weight: 800; word-break: break-word; }
.page-sub { color: var(--muted); margin-bottom: 20px; font-size: 13px; }
.mt { margin-top: 18px; }
.kembali { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); display: inline-block; margin-bottom: 8px; }

/* ── Grafik ───────────────────────────────────────────── */
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .sumbu { font-family: var(--font-body); font-size: 11px; fill: var(--muted); }
.chart .kisi { stroke: #e7e0d0; stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin-top: 10px; font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 99px; display: inline-block; }
.donut-wrap { display: grid; place-items: center; padding: 6px 0; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; border-bottom: 2px solid var(--ink); padding-top: 6px; }
.bars .bt { flex: 1 1 0; background: var(--yellow); border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; min-height: 2px; }
.bars .bt.hari-ini { background: var(--teal); }
.bars .bt.turun { background: var(--red); }
.bars .bt.nol { border: 0; background: #e7e0d0; }
.bars-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 6px; }

/* ── Hitungan tagihan ─────────────────────────────────── */
.hitungan { display: grid; gap: 8px; }
.hitungan .b { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.hitungan .b span:last-child { font-family: var(--font-mono); font-weight: 700; text-align: right; white-space: nowrap; }
.hitungan .b.coret span:last-child { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.hitungan .b.besar { border-top: 2px solid var(--ink); padding-top: 10px; margin-top: 4px; align-items: baseline; }
.hitungan .b.besar span:first-child { font-family: var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.hitungan .b.besar span:last-child { font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.catatan { color: var(--muted); font-size: 12px; }
.pesan-kotak { border: 2px solid var(--ink); border-radius: 11px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; font-weight: 500; }
.pesan-kotak.bad { background: #ffd7dc; }
.pesan-kotak.warn { background: #ffe9b8; }
.pesan-kotak.ok { background: #d8f3e8; }
.periode-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.periode-nav .widget-title { flex: 1; text-align: center; font-size: 12px; }

/* ── Form ─────────────────────────────────────────────── */
.field-label { font-family: var(--font-mono); letter-spacing: 2px; margin: 14px 0 6px; font-size: 10.5px; font-weight: 700; display: block; text-transform: uppercase; }
.field { border: 2px solid var(--ink); background: var(--cream); border-radius: 11px; width: 100%; padding: 10px 12px; font-size: 15px; min-height: 44px; }
textarea.field { min-height: 76px; resize: vertical; }
.field:focus { outline: 3px solid var(--yellow); }
.field-note { color: var(--muted); font-size: 11.5px; margin-top: 5px; }
.centang { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 13.5px; }
.centang input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.galat { border: 2px solid var(--ink); background: #ffd7dc; border-radius: 9px; margin-top: 12px; padding: 9px 12px; font-size: 12.5px; font-weight: 500; }

/* ── Tab saring ───────────────────────────────────────── */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs button { border: 2px solid var(--ink); background: var(--paper); border-radius: 99px; padding: 5px 14px; font-size: 12.5px; font-weight: 700; }
.tabs button.aktif { background: var(--ink); color: var(--yellow); }

/* ── Dialog & toast ───────────────────────────────────── */
dialog { border: 2px solid var(--ink); border-radius: 16px; padding: 0; width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 32px);
         box-shadow: 8px 8px 0 var(--ink); background: var(--paper); color: var(--ink); margin: auto; }
dialog::backdrop { background: rgba(23,21,18,.5); }
.dialog-isi { padding: 20px; overflow-y: auto; max-height: calc(100vh - 36px); }
.dialog-judul { font-family: var(--font-head); font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.dialog-kaki { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
pre.pesan { white-space: pre-wrap; background: var(--cream); border: 2px solid var(--ink); border-radius: 11px; padding: 10px 12px;
            font: 12px/1.55 var(--font-mono); margin: 0 0 12px; }
.sub-form { border: 2px dashed var(--ink); border-radius: 12px; padding: 4px 14px 14px; margin-top: 14px; background: var(--cream); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: var(--yellow); border: 2px solid var(--ink);
         box-shadow: 3px 3px 0 var(--red); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; z-index: 100;
         max-width: calc(100vw - 32px); }
.toast.merah { background: var(--red); color: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.muat { font-family: var(--font-mono); color: var(--muted); padding: 40px 0; text-align: center; letter-spacing: 1px; font-size: 12px; }

/* ── Riwayat ──────────────────────────────────────────── */
.riwayat .list-title { white-space: normal; }
.riwayat .list-sub { white-space: normal; }

/* ── Menu HP ──────────────────────────────────────────── */
.nav-toggle, .nav-close { display: none; }
.nav-toggle { border: 2px solid var(--ink); background: var(--paper); border-radius: 9px; width: 38px; height: 38px; font-size: 16px; font-weight: 700; place-items: center; }
.nav-overlay { z-index: 19; background: rgba(23,21,18,.5); position: fixed; inset: 0; }
@media (max-width: 860px) {
  .sidebar { transition: transform .2s; transform: translate(-100%); box-shadow: 6px 0 24px rgba(23,21,18,.35); }
  .sidebar.open { transform: translate(0); }
  .nav-toggle { flex: none; display: grid; }
  .nav-close { width: 34px; height: 34px; color: var(--cream); background: 0 0; border: 1.5px solid rgba(250,243,227,.4); border-radius: 9px;
               place-items: center; margin-left: auto; font-size: 16px; display: grid; flex: none; }
  .main { margin-left: 0; }
  .content { padding: 16px max(16px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); gap: 10px; }
  .header h1 { font-size: 17px; }
  .kpi-value { font-size: 24px; }
  .grid { gap: 14px; }
  .widget { box-shadow: 3px 3px 0 var(--ink); padding: 15px; }
}
@media (max-width: 480px) {
  .header-clock { display: none; }
  .chip { margin-left: auto; }
  .chip .chip-label { display: none; }
  .grid.units { grid-template-columns: 1fr; }
  .qa-grid { grid-template-columns: repeat(3, 1fr); }
  /* "PARAKKANG EXPRESS" utuh di HP, bukan terpotong "PARAKKANG EXPRE…". */
  .header h1 { font-size: 15px; letter-spacing: -.2px; }
  .header .btn.ghost { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 430px) {
  /* HP (≤430 px): titik status pengguna disembunyikan supaya judul tetap utuh. */
  .header .chip { display: none; }
  .header .btn.ghost { margin-left: auto; }
}
@media (pointer: coarse) {
  .nav-link { padding: 13px 18px; font-size: 14px; }
  .btn { min-height: 42px; padding: 10px 16px; }
  .btn.kecil { min-height: 34px; padding: 6px 12px; }
  .qa { padding: 13px 10px; }
  .table td { padding: 12px 10px; }
  .nav-close { width: 42px; height: 42px; }
}

/* ── Layar masuk (sama dengan Portal Malino, login v2) ── */
body.login-aktif { overflow: hidden; background: #fffaf5; }
.login-wrap { --login-ink: #1d1b1f; --login-muted: #746f78; --login-red: #ee4564; --login-red-dark: #d92f50; --login-line: #e9e2dc;
              position: relative; display: grid; grid-template-columns: minmax(420px, 43%) minmax(0, 57%); align-items: stretch;
              width: 100%; min-height: 100vh; min-height: 100svh; overflow: hidden; color: var(--login-ink); background: #fffaf5; }
.login-card { position: relative; z-index: 2; align-self: center; justify-self: center; width: min(390px, calc(100% - 72px)); padding: 38px 0 34px;
              animation: malinoFormIn .72s cubic-bezier(.2,.8,.2,1) both; }
.login-pill { display: inline-flex; align-items: center; min-height: 25px; margin-bottom: 22px; padding: 0 10px; border: 1px solid #ffd0d9; border-radius: 99px;
              color: var(--login-red-dark); background: #fff0f3; font: 800 9px/1 var(--font-mono); letter-spacing: .16em; }
.login-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.login-brand .brand-logo { width: 48px; height: 48px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--login-red), #ff6d5f);
                           box-shadow: 0 12px 28px rgba(238,69,100,.25); font-size: 23px; transform: rotate(-4deg); }
.login-brand .brand-sub { color: #a06c17; font-size: 9px; letter-spacing: .2em; }
.login-brand .brand-name { color: var(--login-ink); font-size: 24px; letter-spacing: -.03em; }
.login-welcome { margin: 0 0 27px; }
.login-welcome h2 { margin: 0 0 8px; color: var(--login-ink); font: 700 clamp(31px, 3vw, 43px)/1.02 var(--font-head); letter-spacing: -.045em; }
.login-welcome p { max-width: 330px; margin: 0; color: var(--login-muted); font: 500 14px/1.55 var(--font-body); }
.login-card .field-label { margin: 17px 0 8px; color: #4a454d; font: 800 10px/1 var(--font-mono); letter-spacing: .16em; }
.login-input-wrap { position: relative; }
.login-input-icon { position: absolute; z-index: 2; top: 50%; left: 15px; width: 18px; height: 18px; color: #9a929b; transform: translateY(-50%); pointer-events: none; }
.login-input-icon svg, .password-toggle svg { width: 100%; height: 100%; }
.login-card .field { height: 50px; padding: 0 48px 0 46px; border: 1px solid var(--login-line); border-radius: 10px; outline: 0; color: var(--login-ink);
                     background: #fff; box-shadow: 0 2px 0 rgba(29,27,31,.02); font: 600 14px/1 var(--font-body);
                     transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.login-card .field::placeholder { color: #aea7af; font-weight: 500; }
.login-card .field:hover { border-color: #d5cbd0; }
.login-card .field:focus { border-color: var(--login-red); box-shadow: 0 0 0 4px rgba(238,69,100,.11); transform: translateY(-1px); outline: 0; }
.password-toggle { position: absolute; z-index: 3; top: 50%; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border: 0;
                   border-radius: 9px; color: #8c858e; background: transparent; transform: translateY(-50%); transition: color .2s ease, background .2s ease; }
.password-toggle:hover { color: var(--login-red-dark); background: #fff0f3; }
.login-security-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: #8b848c; font-size: 11px; }
.login-security-row span { display: inline-flex; align-items: center; gap: 6px; }
.login-security-row svg { width: 13px; height: 13px; color: #2f9e69; }
.login-security-row strong { color: var(--login-red-dark); font-weight: 700; }
.login-btn { position: relative; width: 100%; height: 50px; margin-top: 23px; overflow: hidden; border: 0; border-radius: 10px; color: #fff;
             background: linear-gradient(115deg, var(--login-red), #ff6c5e); box-shadow: 0 13px 28px rgba(238,69,100,.23);
             font: 800 12px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease; }
.login-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
                    transform: translateX(-120%); transition: transform .55s ease; }
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(238,69,100,.3); }
.login-btn:hover::after { transform: translateX(120%); }
.login-btn:disabled { opacity: .65; cursor: wait; }
.login-err { margin-top: 12px; padding: 10px 12px; border: 1px solid #fecdd3; border-radius: 9px; color: #be123c; background: #fff1f2; font-weight: 700; font-size: 12.5px; }
.login-err:empty { display: none; }
.login-hint { margin-top: 22px; color: #aaa2aa; font: 500 10px/1.4 var(--font-mono); }
.login-showcase { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; overflow: hidden; isolation: isolate;
                  background: radial-gradient(circle at 83% 12%, rgba(255,255,255,.9) 0 5%, transparent 5.2%),
                              radial-gradient(circle at 10% 88%, rgba(255,255,255,.72) 0 10%, transparent 10.2%),
                              linear-gradient(145deg, #fff0d7 0%, #ffe6d8 42%, #ffd7dc 100%); }
.login-showcase::before, .login-showcase::after { content: ""; position: absolute; z-index: -1; width: 600px; height: 600px; border: 2px solid rgba(225,115,76,.15);
                                                  border-radius: 45% 55% 60% 40%; animation: malinoOrbit 24s linear infinite; }
.login-showcase::before { right: -260px; top: -300px; box-shadow: 0 0 0 34px rgba(255,255,255,.13), 0 0 0 68px rgba(225,115,76,.07); }
.login-showcase::after { left: -330px; bottom: -390px; width: 680px; height: 680px; animation-direction: reverse; animation-duration: 31s; }
.showcase-content { position: relative; width: min(690px, 87%); min-height: 470px; display: grid; align-content: center; justify-items: center; padding: 30px 26px; }
.showcase-copy { position: relative; z-index: 3; max-width: 510px; margin-bottom: 22px; text-align: center; }
.showcase-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #9a4b4e; font: 800 10px/1 var(--font-mono); letter-spacing: .16em; }
.showcase-kicker::before { content: ""; width: 28px; height: 2px; background: #ee4564; }
.showcase-copy h3 { margin: 0 0 10px; color: #2a2327; font: 750 clamp(31px, 3.5vw, 52px)/.98 var(--font-head); letter-spacing: -.055em; }
.showcase-copy p { margin: 0 auto; max-width: 450px; color: #765d61; font: 500 13px/1.55 var(--font-body); }
.portal-visual { position: relative; width: min(530px, 90%); height: 235px; }
.portal-core { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 186px; height: 124px; border: 1px solid rgba(255,255,255,.3);
               border-radius: 25px; color: #fff; background: linear-gradient(145deg,#2b282b,#171517);
               box-shadow: 0 28px 50px rgba(104,56,55,.27), inset 0 1px 0 rgba(255,255,255,.12); transform: translate(-50%,-50%); }
.portal-core::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: -12px; height: 12px; border-radius: 0 0 14px 14px; background: #514a4c;
                      transform: perspective(60px) rotateX(-24deg); transform-origin: top; }
.core-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; background: linear-gradient(145deg,#ffb548,#ff765f);
             box-shadow: 0 14px 26px rgba(255,127,80,.25); font: 800 28px/1 var(--font-head); }
.core-label { position: absolute; bottom: 14px; color: #a9a2a6; font: 700 8px/1 var(--font-mono); letter-spacing: .16em; }
.unit-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; min-width: 110px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.7);
             border-radius: 13px; color: #4c3c40; background: rgba(255,255,255,.76); box-shadow: 0 12px 28px rgba(137,76,65,.12);
             backdrop-filter: blur(10px); animation: malinoFloat 5s ease-in-out infinite; }
.unit-node b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #fff; font: 800 9px/1 var(--font-head); }
.unit-node span { font: 800 9px/1.2 var(--font-head); }
.unit-node small { display: block; margin-top: 2px; color: #988185; font: 600 7px/1 var(--font-mono); }
.node-a { left: 0; top: 22px; } .node-b { right: 0; top: 12px; animation-delay: -1.1s; }
.node-c { left: 22px; bottom: 4px; animation-delay: -2.1s; } .node-d { right: 24px; bottom: 0; animation-delay: -3.1s; }
.node-a b { background: #c93950; } .node-b b { color: #5d4512; background: #f5be3d; } .node-c b { background: #d85f93; } .node-d b { background: #8f6fcb; }
.connector-map { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.connector-map path { fill: none; stroke: rgba(93,72,76,.27); stroke-width: 1.5; stroke-dasharray: 5 7; animation: malinoDash 13s linear infinite; }
.showcase-status { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: #735b5f; font: 700 9px/1 var(--font-mono); letter-spacing: .06em; }
.showcase-status i { width: 8px; height: 8px; border-radius: 50%; background: #38a169; box-shadow: 0 0 0 5px rgba(56,161,105,.12); animation: malinoPulse 2s ease infinite; }
@keyframes malinoFormIn { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes malinoFloat { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }
@keyframes malinoOrbit { to { transform: rotate(360deg); } }
@keyframes malinoDash { to { stroke-dashoffset: -120; } }
@keyframes malinoPulse { 50% { box-shadow: 0 0 0 9px rgba(56,161,105,0); } }
@media (max-height: 700px) and (min-width: 901px) {
  .login-card { padding: 16px 0; } .login-pill { min-height: 22px; margin-bottom: 11px; } .login-brand { margin-bottom: 13px; }
  .login-welcome { margin-bottom: 14px; } .login-welcome h2 { margin-bottom: 5px; font-size: 34px; line-height: .98; }
  .login-card .field-label { margin: 11px 0 6px; } .login-card .field { height: 45px; } .login-btn { height: 46px; margin-top: 14px; }
}
@media (max-width: 900px) {
  body.login-aktif { overflow: auto; }
  .login-wrap { display: flex; align-items: center; justify-content: center; padding: 30px 18px;
                background: radial-gradient(circle at 92% 10%, rgba(238,69,100,.13), transparent 34%), radial-gradient(circle at 5% 90%, rgba(255,181,72,.2), transparent 32%), #fffaf5; }
  .login-showcase { display: none; }
  .login-card { width: min(420px, 100%); padding: 28px; border: 1px solid rgba(233,226,220,.9); border-radius: 22px; background: rgba(255,255,255,.88);
                box-shadow: 0 24px 60px rgba(73,48,50,.12); backdrop-filter: blur(18px); }
}
@media (max-width: 440px) {
  .login-wrap { padding: 16px 12px; } .login-card { padding: 23px 20px; border-radius: 19px; } .login-pill { margin-bottom: 17px; }
  .login-brand { margin-bottom: 18px; } .login-welcome { margin-bottom: 20px; } .login-welcome h2 { font-size: 32px; }
  .login-security-row { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ── Cetak (rincian tagihan) ──────────────────────────── */
@media print { body { background: #fff; } .widget { box-shadow: none; } .cetak-sembunyi { display: none !important; } }