/* HUB ISKNET v2 — dasar tema. Diturunkan dari MOCKUP-HUB-V2-CI4.html v2.0.8.
   Tiga tema (default / gelap / terang), font baku Source Sans 3, tanpa biru sebagai warna utama;
   tiga warna logo (biru, merah, kuning) hanya sebagai garis identitas. */
:root{--radius:6px;--font:'Source Sans 3',system-ui,Segoe UI,Arial,sans-serif;--logo-biru:#1f4e9c;--logo-merah:#c8102e;--logo-kuning:#f2b400;--maks:1440px;--sidebar:248px}
[data-tema="default"]{--bg:#f3f1ec;--panel:#fff;--panel2:#faf9f6;--garis:#dcd8cf;--garis2:#ebe8e1;--teks:#1f2328;--teks2:#5b6069;--teks3:#8a8f98;
  --kepala:#23262b;--kepala-teks:#f3f1ec;--kepala-teks2:#b9bcc4;--side:#2b2e34;--side-teks:#d7d9de;--side-teks2:#8f939c;--side-aktif:#3a2024;--side-aktif-teks:#ffd8dc;--side-garis:#3a3d44;--side-hover:rgba(255,255,255,.05);
  --utama:#c8102e;--utama-teks:#fff;--utama-lembut:#fbe9ec;--utama-lembut-teks:#8f0a21;--sorot:#f2b400;--sorot-lembut:#fff4d1;--sorot-lembut-teks:#7a5a00;
  --hijau:#2e7d32;--hijau-lembut:#e4f3e5;--merah:#c8102e;--merah-lembut:#fbe9ec;--abu-lembut:#ecebe7;--bayang:0 1px 2px rgba(0,0,0,.06);--scroll:#c9c5bb}
[data-tema="gelap"]{--bg:#1e2126;--panel:#272b31;--panel2:#22262b;--garis:#3a3f47;--garis2:#30353c;--teks:#eceef1;--teks2:#b3b8c0;--teks3:#7f858e;
  --kepala:#15181c;--kepala-teks:#f1f1f1;--kepala-teks2:#a3a9b2;--side:#1a1d22;--side-teks:#d6d9de;--side-teks2:#868c95;--side-aktif:#45191f;--side-aktif-teks:#ffd0d5;--side-garis:#2c3137;--side-hover:rgba(255,255,255,.05);
  --utama:#e0263f;--utama-teks:#fff;--utama-lembut:#43191f;--utama-lembut-teks:#ffb3bb;--sorot:#f2b400;--sorot-lembut:#3e3414;--sorot-lembut-teks:#ffd866;
  --hijau:#5cb860;--hijau-lembut:#1b3620;--merah:#e0263f;--merah-lembut:#43191f;--abu-lembut:#30353c;--bayang:0 1px 2px rgba(0,0,0,.4);--scroll:#4a5059}
[data-tema="terang"]{--bg:#fff;--panel:#fff;--panel2:#f7f7f7;--garis:#e3e3e3;--garis2:#eee;--teks:#111;--teks2:#555;--teks3:#8c8c8c;
  --kepala:#fff;--kepala-teks:#111;--kepala-teks2:#777;--side:#f7f7f7;--side-teks:#222;--side-teks2:#777;--side-aktif:#fbe9ec;--side-aktif-teks:#8f0a21;--side-garis:#e3e3e3;--side-hover:rgba(0,0,0,.04);
  --utama:#c8102e;--utama-teks:#fff;--utama-lembut:#fbe9ec;--utama-lembut-teks:#8f0a21;--sorot:#f2b400;--sorot-lembut:#fff4d1;--sorot-lembut-teks:#7a5a00;
  --hijau:#2e7d32;--hijau-lembut:#e4f3e5;--merah:#c8102e;--merah-lembut:#fbe9ec;--abu-lembut:#efefef;--bayang:0 1px 2px rgba(0,0,0,.05);--scroll:#d5d5d5}

*{box-sizing:border-box} html,body{margin:0;min-height:100%}
body{font-family:var(--font);font-size:15px;color:var(--teks);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit}
svg.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tri{height:3px;background:linear-gradient(90deg,var(--logo-biru) 0 33.3%,var(--logo-merah) 33.3% 66.6%,var(--logo-kuning) 66.6% 100%);border-radius:2px}
.logo{font-weight:700;letter-spacing:.3px;line-height:1.1}
.logo .nm{font-size:22px;color:var(--teks)} .logo .pt{font-size:12px;color:var(--teks2);font-weight:500;margin-top:2px}
.logo .tri{width:110px;margin-top:8px}

/* halaman pintu (masuk, otp, lupa sandi) */
.pintu{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.kartu{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--garis);border-radius:10px;box-shadow:var(--bayang);overflow:hidden}
.kartu .kepala{padding:26px 28px 18px;border-bottom:1px solid var(--garis2);text-align:center}
.kartu .kepala .logo .tri{margin:8px auto 0}
.kartu .isi{padding:22px 28px 26px}
.kartu h1{font-size:17px;margin:0 0 4px;font-weight:600} .kartu .ket{color:var(--teks2);font-size:13.5px;margin:0 0 16px}
.lbl{display:block;font-size:13px;font-weight:600;color:var(--teks2);margin:0 0 5px}
.in{width:100%;padding:10px 12px;border:1px solid var(--garis);border-radius:var(--radius);background:var(--panel2);outline:none;transition:border-color .15s,box-shadow .15s}
.in:focus{border-color:var(--utama);box-shadow:0 0 0 3px var(--utama-lembut)}
.in.kode{font-size:28px;letter-spacing:10px;text-align:center;font-weight:600;padding:12px}
.bidang{margin-bottom:14px;position:relative}
.mata{position:absolute;right:10px;top:31px;background:none;border:0;cursor:pointer;color:var(--teks3);padding:4px} .mata:hover{color:var(--teks)}
.tbl{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;font-weight:600;transition:filter .15s}
.tbl.utama{background:var(--utama);color:var(--utama-teks)} .tbl.utama:hover{filter:brightness(1.08)}
.tbl.garis{background:transparent;border-color:var(--garis);color:var(--teks)} .tbl.garis:hover{background:var(--panel2)}
.tbl[disabled]{opacity:.5;cursor:not-allowed}
.peringatan{border:1px solid;border-radius:var(--radius);padding:10px 12px;font-size:13.5px;margin:0 0 14px}
.peringatan.merah{background:var(--merah-lembut);border-color:var(--merah);color:var(--utama-lembut-teks)}
.peringatan.hijau{background:var(--hijau-lembut);border-color:var(--hijau);color:var(--hijau)}
.peringatan.kuning{background:var(--sorot-lembut);border-color:var(--sorot);color:var(--sorot-lembut-teks)}
.tautan{color:var(--utama-lembut-teks);font-weight:600} .tautan:hover{text-decoration:underline}
.kecil{font-size:12.5px;color:var(--teks3)} .tengah{text-align:center} .baris{display:flex;align-items:center;gap:8px}
.kaki{text-align:center;color:var(--teks3);font-size:12px;margin-top:16px}
.cek{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--teks2);margin:4px 0 16px;cursor:pointer}
.cek input{width:16px;height:16px;accent-color:var(--utama)}
.tema-pilih{position:fixed;top:12px;right:12px;display:flex;gap:4px;background:var(--panel);border:1px solid var(--garis);border-radius:20px;padding:3px}
.tema-pilih button{border:0;background:none;width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--teks3);display:grid;place-items:center}
.tema-pilih button.on{background:var(--utama-lembut);color:var(--utama-lembut-teks)}

/* cangkang dasbor sementara */
.cangkang{max-width:1080px;margin:0 auto;padding:20px 16px}
.kepala-app{display:flex;align-items:center;gap:14px;padding:10px 0 14px;border-bottom:1px solid var(--garis)}
.kepala-app .sela{flex:1}
.kartu-kecil{background:var(--panel);border:1px solid var(--garis);border-radius:8px;padding:14px 16px;box-shadow:var(--bayang)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0}
.angka{font-size:26px;font-weight:700;line-height:1.1} .angka-lbl{font-size:12.5px;color:var(--teks2);margin-top:4px}
table.tb{width:100%;border-collapse:collapse;font-size:13.5px} .tb th{text-align:left;font-weight:600;color:var(--teks2);padding:8px 10px;border-bottom:1px solid var(--garis)} .tb td{padding:8px 10px;border-bottom:1px solid var(--garis2)}
.lencana{display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:600;background:var(--abu-lembut);color:var(--teks2)}
.lencana.merah{background:var(--utama-lembut);color:var(--utama-lembut-teks)}
.foto{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--abu-lembut);display:grid;place-items:center;font-weight:700;color:var(--teks2)}