/* ==========================================================================
   BUTON WASDAL — Gaya Aplikasi
   Modern, ringan, gelap/terang, tanpa pustaka eksternal.
   ========================================================================== */

:root {
    --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    --bg: #f1f5f9;
    --bg-card: #ffffff;
    --bg-soft: #f8fafc;
    --bg-sidebar: #0f172a;
    --bg-sidebar-soft: #1e293b;

    --text: #0f172a;
    --text-soft: #475569;
    --text-mute: #94a3b8;
    --text-invert: #f8fafc;

    --line: #e2e8f0;
    --line-soft: #f1f5f9;

    --brand: #4f46e5;
    --brand-soft: #eef2ff;
    --brand-strong: #4338ca;

    --ok: #059669;
    --ok-soft: #ecfdf5;
    --warn: #d97706;
    --warn-soft: #fffbeb;
    --bad: #e11d48;
    --bad-soft: #fff1f2;
    --info: #0284c7;
    --info-soft: #f0f9ff;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
    --shadow-lg: 0 24px 48px -24px rgba(15, 23, 42, .28);

    --sidebar-w: 268px;
}

[data-theme="dark"] {
    --bg: #0b1120;
    --bg-card: #111a2e;
    --bg-soft: #16213a;
    --bg-sidebar: #080d1a;
    --bg-sidebar-soft: #131c31;

    --text: #e6edf7;
    --text-soft: #a9b6cc;
    --text-mute: #6b7a94;

    --line: #22304d;
    --line-soft: #1a2440;

    --brand: #6366f1;
    --brand-soft: #1c2140;
    --brand-strong: #818cf8;

    --ok: #34d399;
    --ok-soft: #0c2a22;
    --warn: #fbbf24;
    --warn-soft: #2c2208;
    --bad: #fb7185;
    --bad-soft: #301019;
    --info: #38bdf8;
    --info-soft: #08263a;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.3; font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }

/* ---------------------------------------------------------------- Tata letak */

.tataletak { display: flex; min-height: 100vh; }

.sisi {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--bg-sidebar) 0%, #111a33 100%);
    color: #cbd5e1;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform .25s ease;
}

.sisi-kepala {
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.merek { display: flex; align-items: center; gap: 12px; }

.merek-logo {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 15px;
    box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .9);
    flex: none;
}

.merek-teks b { display: block; color: #fff; font-size: 15px; letter-spacing: .3px; }
.merek-teks span { font-size: 11.5px; color: #7c8aa5; }

.sisi-menu { flex: 1; overflow-y: auto; padding: 14px 12px; }
.sisi-menu::-webkit-scrollbar { width: 6px; }
.sisi-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }

.grup-judul {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px;
    color: #64748b; padding: 14px 12px 6px; font-weight: 700;
}

.tautan {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 10px;
    color: #cbd5e1; font-size: 13.5px; font-weight: 500;
    margin-bottom: 2px; transition: background .15s, color .15s;
}
.tautan:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.tautan .ic { width: 18px; height: 18px; flex: none; opacity: .85; }
.tautan.aktif {
    background: linear-gradient(90deg, rgba(99, 102, 241, .28), rgba(6, 182, 212, .12));
    color: #fff;
    box-shadow: inset 3px 0 0 #6366f1;
}
.tautan .hitung {
    margin-left: auto; background: var(--bad); color: #fff;
    font-size: 10.5px; padding: 1px 7px; border-radius: 999px; font-weight: 700;
}

.sisi-kaki {
    padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 11.5px; color: #64748b;
}

/* ---------------------------------------------------------------- Konten */

.utama {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex; flex-direction: column;
    min-width: 0;
}

.bar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 12px 26px;
    display: flex; align-items: center; gap: 16px;
}

.bar-tombol {
    display: none; background: none; border: 1px solid var(--line);
    border-radius: 10px; width: 38px; height: 38px; cursor: pointer;
    color: var(--text); align-items: center; justify-content: center;
}

.bar-judul { flex: 1; min-width: 0; }
.bar-judul h1 { font-size: 1.15rem; margin: 0; }
.bar-judul .remah { font-size: 12px; color: var(--text-mute); }

.bar-aksi { display: flex; align-items: center; gap: 10px; }

.icon-tombol {
    position: relative; background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: 10px; width: 38px; height: 38px; cursor: pointer;
    display: grid; place-items: center; color: var(--text-soft);
    transition: background .15s;
}
.icon-tombol:hover { background: var(--brand-soft); color: var(--brand); }
.icon-tombol .hitung {
    position: absolute; top: -5px; right: -5px;
    background: var(--bad); color: #fff; font-size: 10px; font-weight: 700;
    min-width: 17px; height: 17px; border-radius: 999px;
    display: grid; place-items: center; padding: 0 4px;
}

.akun { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
.avatar {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px;
}
.akun-teks b { display: block; font-size: 13px; line-height: 1.2; }
.akun-teks span { font-size: 11.5px; color: var(--text-mute); }

.jatuh {
    position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow-lg);
    min-width: 240px; padding: 6px; display: none; z-index: 80;
}
.jatuh.buka { display: block; animation: jatuhMasuk .16s ease; }
@keyframes jatuhMasuk { from { opacity: 0; transform: translateY(-6px); } }

.jatuh a, .jatuh button {
    display: flex; width: 100%; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 9px; border: 0; background: none;
    color: var(--text); font-size: 13.5px; cursor: pointer; text-align: left;
    font-family: inherit;
}
.jatuh a:hover, .jatuh button:hover { background: var(--bg-soft); text-decoration: none; }
.jatuh .pisah { height: 1px; background: var(--line); margin: 5px 0; }
.jatuh .judul { padding: 8px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-mute); font-weight: 700; }
.jatuh .nota { padding: 8px 12px; border-radius: 9px; }
.jatuh .nota:hover { background: var(--bg-soft); }
.jatuh .nota b { display: block; font-size: 12.5px; }
.jatuh .nota span { font-size: 11.5px; color: var(--text-mute); }

.isi { padding: 26px; flex: 1; max-width: 1500px; width: 100%; }

/* ---------------------------------------------------------------- Kartu */

.kartu {
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    margin-bottom: 22px; overflow: hidden;
}
.kartu-kepala {
    padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.kartu-kepala h2 { margin: 0; font-size: 1.02rem; }
.kartu-kepala .sub { font-size: 12.5px; color: var(--text-mute); }
.kartu-isi { padding: 20px; }
.kartu-kepala .kanan { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.grup-kartu { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 22px; }
.grup-2 { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grup-3 { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.stat {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--brand); border-radius: 4px 0 0 4px;
}
.stat.ok::after { background: var(--ok); }
.stat.warn::after { background: var(--warn); }
.stat.bad::after { background: var(--bad); }
.stat.info::after { background: var(--info); }

.stat-atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-label { font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
.stat-nilai { font-size: 1.85rem; font-weight: 800; letter-spacing: -.5px; margin-top: 6px; line-height: 1.1; }
.stat-kaki { font-size: 11.8px; color: var(--text-mute); margin-top: 5px; }

.stat-ikon {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.stat.ok .stat-ikon { background: var(--ok-soft); color: var(--ok); }
.stat.warn .stat-ikon { background: var(--warn-soft); color: var(--warn); }
.stat.bad .stat-ikon { background: var(--bad-soft); color: var(--bad); }
.stat.info .stat-ikon { background: var(--info-soft); color: var(--info); }

/* ---------------------------------------------------------------- Tabel */

.bungkus-tabel { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
    text-align: left; padding: 11px 14px; font-size: 11.3px;
    text-transform: uppercase; letter-spacing: .6px; color: var(--text-mute);
    border-bottom: 1px solid var(--line); background: var(--bg-soft); font-weight: 700;
    white-space: nowrap;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data tbody tr:hover { background: var(--bg-soft); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; white-space: nowrap; }
table.data .aksi { white-space: nowrap; text-align: right; }
table.data .potong { max-width: 340px; display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.kosong { text-align: center; padding: 40px 20px; color: var(--text-mute); }
.kosong .ic { width: 42px; height: 42px; opacity: .4; margin-bottom: 10px; }

/* ---------------------------------------------------------------- Lencana */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11.3px; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}
.badge-slate   { background: var(--bg-soft); color: var(--text-soft); border-color: var(--line); }
.badge-emerald { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.badge-amber   { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.badge-rose    { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.badge-sky     { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.badge-indigo  { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.badge-violet  { background: var(--brand-soft); color: var(--brand-strong); border-color: color-mix(in srgb, var(--brand-strong) 25%, transparent); }
.badge-cyan    { background: var(--info-soft); color: #0891b2; border-color: rgba(8, 145, 178, .25); }
.badge-teal    { background: var(--ok-soft); color: #0d9488; border-color: rgba(13, 148, 136, .25); }

/* ---------------------------------------------------------------- Tombol */

.tombol {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
    font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
    background: var(--brand); color: #fff; transition: filter .15s, transform .05s;
    text-decoration: none; line-height: 1.3;
}
.tombol:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.tombol:active { transform: translateY(1px); }
.tombol .ic { width: 16px; height: 16px; }

.tombol-garis { background: transparent; border-color: var(--line); color: var(--text); }
.tombol-garis:hover { background: var(--bg-soft); color: var(--text); }

.tombol-ok { background: var(--ok); }
.tombol-bad { background: var(--bad); }
.tombol-warn { background: var(--warn); }
.tombol-kecil { padding: 6px 11px; font-size: 12.3px; border-radius: 8px; }
.tombol-blok { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- Formulir */

.baris { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.baris-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.grup { margin-bottom: 16px; }
.grup > label { display: block; font-size: 12.7px; font-weight: 600; margin-bottom: 6px; color: var(--text-soft); }
.grup > label .wajib { color: var(--bad); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=tel], input[type=file], select, textarea {
    width: 100%; padding: 10px 13px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--bg-card); color: var(--text);
    font-family: inherit; font-size: 13.7px; transition: border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
textarea { resize: vertical; min-height: 92px; }
select { cursor: pointer; }
input[readonly] { background: var(--bg-soft); color: var(--text-soft); }

.centang { display: flex; align-items: flex-start; gap: 9px; font-size: 13.3px; cursor: pointer; }
.centang input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand); cursor: pointer; }

.pembantu { font-size: 11.8px; color: var(--text-mute); margin-top: 5px; }

/* ---------------------------------------------------------------- Pemberitahuan */

.pesan {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 16px; border-radius: 12px; margin-bottom: 18px;
    font-size: 13.5px; border: 1px solid transparent;
}
.pesan .ic { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.pesan-sukses { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.pesan-error { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.pesan-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.pesan-peringatan { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }

/* ---------------------------------------------------------------- Grafik */

.batang { display: flex; flex-direction: column; gap: 11px; }
.batang-baris { display: grid; grid-template-columns: 130px 1fr 46px; align-items: center; gap: 12px; font-size: 12.8px; }
.batang-label { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batang-jalur { background: var(--bg-soft); border-radius: 999px; height: 11px; overflow: hidden; border: 1px solid var(--line-soft); }
.batang-isi { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #06b6d4); transition: width .5s ease; }
.batang-isi.ok { background: linear-gradient(90deg, #10b981, #34d399); }
.batang-isi.warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.batang-isi.bad { background: linear-gradient(90deg, #f43f5e, #fb7185); }
.batang-isi.info { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.batang-nilai { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.tumpuk { display: flex; height: 30px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.tumpuk > div { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; min-width: 0; }

.donat { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donat-svg { flex: none; }
.donat-legenda { display: flex; flex-direction: column; gap: 8px; font-size: 12.7px; }
.donat-legenda > div { display: flex; align-items: center; gap: 8px; }
.titik { width: 11px; height: 11px; border-radius: 4px; flex: none; }

/* Peta risiko 5x5 */
.peta { display: grid; grid-template-columns: 26px repeat(5, 1fr); gap: 5px; font-size: 11.5px; }
.peta-sumbu { display: grid; place-items: center; color: var(--text-mute); font-weight: 700; font-size: 10.5px; }
.peta-sel {
    aspect-ratio: 1/1; border-radius: 9px; display: grid; place-items: center;
    font-weight: 800; font-size: 14px; color: #fff; min-height: 46px; position: relative;
}
.peta-sel.rendah { background: #10b981; }
.peta-sel.sedang { background: #f59e0b; }
.peta-sel.tinggi { background: #f97316; }
.peta-sel.sangat-tinggi { background: #ef4444; }
.peta-sel.kosong { background: var(--bg-soft); color: var(--text-mute); border: 1px dashed var(--line); }
.peta-ket { font-size: 11.8px; color: var(--text-mute); margin-top: 10px; }

/* Meteran */
.meter { margin-bottom: 14px; }
.meter-atas { display: flex; justify-content: space-between; font-size: 12.6px; margin-bottom: 5px; }
.meter-atas b { font-variant-numeric: tabular-nums; }
.meter-jalur { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; border: 1px solid var(--line-soft); }
.meter-isi { height: 100%; background: linear-gradient(90deg, var(--brand), #06b6d4); border-radius: 999px; }

/* ---------------------------------------------------------------- Lain-lain */

.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; padding-bottom: 1px; }
.tab a {
    padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-soft);
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab a:hover { color: var(--text); text-decoration: none; }
.tab a.aktif { color: var(--brand); border-bottom-color: var(--brand); }

.saring { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.saring .grup { margin-bottom: 0; min-width: 150px; }

.halaman-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.halaman-nav .info { font-size: 12.8px; color: var(--text-mute); }
.halaman-tombol { display: flex; gap: 5px; }
.halaman-tombol a, .halaman-tombol span {
    padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
    font-size: 12.8px; color: var(--text-soft); background: var(--bg-card);
}
.halaman-tombol a:hover { background: var(--bg-soft); text-decoration: none; }
.halaman-tombol .aktif { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; }
.halaman-tombol .mati { opacity: .4; pointer-events: none; }

.definisi { display: grid; grid-template-columns: 165px 1fr; gap: 10px 18px; font-size: 13.5px; }
.definisi dt { color: var(--text-mute); font-weight: 600; }
.definisi dd { margin: 0; color: var(--text); }

.kutip {
    border-left: 3px solid var(--brand); background: var(--bg-soft);
    padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: 13.3px; color: var(--text-soft);
}

.daftar-bulat { margin: 0; padding-left: 20px; }
.daftar-bulat li { margin-bottom: 7px; }

.baris-tabel-mini { font-size: 12.7px; }

/* ---------------------------------------------------------------- Halaman publik */

.publik-bar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
    padding: 13px 24px; display: flex; align-items: center; gap: 18px;
}
.publik-bar .merek-logo { width: 40px; height: 40px; }
.publik-bar .merek-teks b { color: var(--text); }
.publik-bar .merek-teks span { color: var(--text-mute); }
.publik-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.publik-nav a { padding: 8px 13px; border-radius: 9px; color: var(--text-soft); font-size: 13.5px; font-weight: 500; }
.publik-nav a:hover { background: var(--bg-soft); text-decoration: none; color: var(--text); }
.publik-nav a.aktif { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.hero {
    position: relative; overflow: hidden;
    background: radial-gradient(1100px 500px at 15% -10%, rgba(99, 102, 241, .35), transparent 60%),
                radial-gradient(900px 500px at 95% 10%, rgba(6, 182, 212, .28), transparent 55%),
                linear-gradient(160deg, #0b1120 0%, #101a35 60%, #0d1428 100%);
    color: #e2e8f0; padding: 64px 24px 56px;
}
.hero-dalam { max-width: 1120px; margin: 0 auto; }
.hero .lencana {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px; font-size: 12.3px; font-weight: 600; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); color: #fff; margin-bottom: 14px; letter-spacing: -.5px; }
.hero p { font-size: 1.06rem; color: #b6c2d9; max-width: 720px; }
.hero-aksi { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero .tombol-garis { border-color: rgba(255, 255, 255, .28); color: #e2e8f0; }
.hero .tombol-garis:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.hero-stat { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 44px; }
.hero-stat > div {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px; padding: 18px; backdrop-filter: blur(6px);
}
.hero-stat b { display: block; font-size: 1.75rem; color: #fff; font-weight: 800; letter-spacing: -.5px; }
.hero-stat span { font-size: 12.5px; color: #94a3b8; }

.wadah { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wadah-lebar { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

.kisi-modul { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kartu-modul {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s;
}
.kartu-modul:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.kartu-modul .stat-ikon { margin-bottom: 13px; }
.kartu-modul h3 { font-size: 1.02rem; margin-bottom: 6px; }
.kartu-modul p { color: var(--text-soft); font-size: 13.4px; margin-bottom: 12px; }

.kartu-peran { border-top: 3px solid var(--brand); }
.kartu-peran.emerald { border-top-color: #10b981; }
.kartu-peran.violet { border-top-color: #8b5cf6; }
.kartu-peran.amber { border-top-color: #f59e0b; }
.kartu-peran.indigo { border-top-color: #6366f1; }

.kaki {
    background: var(--bg-sidebar); color: #94a3b8; padding: 40px 24px 26px; margin-top: 60px;
}
.kaki-dalam { max-width: 1120px; margin: 0 auto; display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kaki h4 { color: #fff; font-size: 13.5px; margin-bottom: 12px; }
.kaki p, .kaki li { font-size: 13px; }
.kaki ul { list-style: none; margin: 0; padding: 0; }
.kaki li { margin-bottom: 7px; }
.kaki a { color: #94a3b8; }
.kaki a:hover { color: #fff; }
.kaki-bawah { max-width: 1120px; margin: 26px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.3px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Halaman masuk */

.masuk { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.masuk-kiri {
    background: radial-gradient(900px 600px at 20% 10%, rgba(99, 102, 241, .4), transparent 60%),
                linear-gradient(160deg, #0b1120, #131f3d 70%, #0d1428);
    color: #cbd5e1; padding: 48px; display: flex; flex-direction: column; justify-content: center;
}
.masuk-kiri h2 { color: #fff; font-size: 1.8rem; margin-bottom: 12px; }
.masuk-kiri p { color: #94a3b8; max-width: 460px; }
.masuk-kiri .daftar-peran { margin-top: 28px; display: grid; gap: 11px; max-width: 460px; }
.masuk-kiri .daftar-peran > div { display: flex; gap: 11px; align-items: flex-start; font-size: 13.3px; }
.masuk-kiri .titik { background: rgba(99, 102, 241, .3); border: 1px solid rgba(129, 140, 248, .4); }

.masuk-kanan { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.masuk-form { width: 100%; max-width: 400px; }

.neraka { max-height: 300px; overflow-y: auto; }

/* ---------------------------------------------------------------- Cetak */

@media print {
    .sisi, .bar, .tombol, .saring, .halaman-nav, .publik-bar, .kaki { display: none !important; }
    .utama { margin-left: 0; }
    body { background: #fff; }
    .kartu { box-shadow: none; border-color: #ddd; break-inside: avoid; }
}

/* ---------------------------------------------------------------- Responsif */

@media (max-width: 1024px) {
    .masuk { grid-template-columns: 1fr; }
    .masuk-kiri { display: none; }
}

@media (max-width: 900px) {
    .sisi { transform: translateX(-100%); }
    .sisi.buka { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .utama { margin-left: 0; }
    .bar-tombol { display: flex; }
    .isi { padding: 18px 15px; }
    .bar { padding: 11px 15px; }
    .akun-teks { display: none; }
    .definisi { grid-template-columns: 1fr; gap: 3px 0; }
    .definisi dd { margin-bottom: 10px; }
    .batang-baris { grid-template-columns: 96px 1fr 40px; }
    .hero { padding: 44px 18px 40px; }
}

.tabir {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
    z-index: 55; display: none; backdrop-filter: blur(2px);
}
.tabir.buka { display: block; }

/* Animasi masuk halus */
@keyframes naik { from { opacity: 0; transform: translateY(10px); } }
.animasi { animation: naik .35s ease both; }
.animasi-1 { animation-delay: .03s; }
.animasi-2 { animation-delay: .08s; }
.animasi-3 { animation-delay: .13s; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}