/* E-Rapor Bakti — kulit kaca cair, satu keluarga dengan BAKTI. Dimuat setelah erapor.css. */
.isi { animation: bkRise 260ms var(--ease-out); }
@media (min-width: 861px) {
  .shell { grid-template-columns: 276px 1fr; }
  .sidebar {
    margin: 12px 0 12px 12px; height: calc(100dvh - 24px); border-radius: 26px; padding: 18px 12px;
    background: linear-gradient(165deg, rgba(20, 70, 168, .86), rgba(10, 36, 98, .84));
    -webkit-backdrop-filter: blur(28px) saturate(1.9); backdrop-filter: blur(28px) saturate(1.9);
    border: 1px solid rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 24px 54px rgba(10, 36, 98, .30);
  }
  .topbar {
    margin: 12px 16px 0; top: 12px; border-radius: 20px; padding: 12px 20px; min-height: 58px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--glass-shadow);
  }
  .isi { padding: 22px 16px 40px; }
}
@media (max-width: 860px) {
  .sidebar { background: linear-gradient(165deg, rgba(20, 70, 168, .96), rgba(10, 36, 98, .96)); border-radius: 0 26px 26px 0; }
  .topbar { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-line); }
}
.sidebar .merek { border-bottom: 1px solid rgba(255, 255, 255, .16); padding-bottom: 14px; }
.sidebar .merek img { border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.sidebar .merek b { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.sidebar .merek small { color: #bfe9fb; font-size: 11.5px; font-weight: 600; }
.sidebar .grup { color: rgba(255, 255, 255, .72); font-weight: 700; }
.nav { border-radius: 13px; color: rgba(255, 255, 255, .86); padding: 9px 11px; transition: background 160ms var(--ease-out), color 160ms ease, transform 120ms var(--ease-out); }
.nav:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .nav:hover { background: rgba(255, 255, 255, .13); color: #fff; } }
.nav.aktif { background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .16)); color: #fff; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 16px rgba(5, 20, 60, .22); }
.sidebar .kaki { border-top-color: rgba(255, 255, 255, .16); position: sticky; bottom: -18px; margin: auto -4px -18px; padding: 12px 12px 18px; background: rgba(11, 38, 100, .97); border-radius: 0 0 24px 24px; }
.sidebar .kaki .peran span { background: rgba(255, 255, 255, .14); color: #fff; }
.topbar h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 17px; }
.topbar .sem { color: var(--ink-500); }

.kartu, .stat {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow);
}
.kartu h3 { font-family: var(--font-display); font-weight: 750; letter-spacing: -.01em; }
.kartu .ket { color: var(--ink-500); }
.stat .n { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: 26px; }
.stat .l { color: var(--ink-500); font-weight: 600; }

.btn { border-radius: 999px; padding: 9px 17px; font-weight: 650; background: rgba(255, 255, 255, .55); border: 1px solid rgba(18, 52, 120, .16); color: var(--ink-800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); transition: transform 140ms var(--ease-out), background 160ms ease, box-shadow 160ms ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: rgba(255, 255, 255, .92); } }
.btn:active { transform: scale(.97); }
.btn.utama-btn { background: linear-gradient(180deg, #2b78f0 0%, #1d66e4 55%, #1858c8 100%); color: #fff; border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 1px 2px rgba(18, 52, 120, .25), 0 8px 20px rgba(29, 102, 228, .28); }
@media (hover: hover) and (pointer: fine) { .btn.utama-btn:hover { background: linear-gradient(180deg, #3584f5 0%, #2272ec 55%, #1b5fd6 100%); } }
.btn.bahaya { background: rgba(251, 228, 226, .8); color: #a11f18; border-color: rgba(179, 38, 30, .22); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29, 102, 228, .38); }

.input, select.input, textarea.input { background: rgba(255, 255, 255, .78); border: 1px solid rgba(18, 52, 120, .16); border-radius: 13px; padding: 9px 12px; box-shadow: inset 0 1px 2px rgba(18, 52, 120, .05); }
.input:focus { background: #fff; border-color: #1d66e4; box-shadow: 0 0 0 4px rgba(29, 102, 228, .18); }
label.f { color: var(--ink-700); font-weight: 650; }

.tabel-bungkus { background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: var(--radius-md); box-shadow: var(--glass-edge); }
table.t th { background: rgba(234, 240, 251, .85); color: var(--ink-500); border-bottom: 1px solid var(--glass-hair); }
table.t td { border-bottom: 1px solid rgba(18, 52, 120, .07); }
table.t .lekat { background: rgba(255, 255, 255, .92); }
table.t th.lekat { background: rgba(234, 240, 251, .95); }
@media (hover: hover) and (pointer: fine) { table.t tr:hover td { background: rgba(87, 142, 245, .10); } }
input.sel { background: rgba(227, 237, 255, .75); }
.tab { border-bottom-color: var(--glass-hair); }
.tab button { color: var(--ink-500); }
.tab button.aktif { color: var(--blue-600); }
.lencana { font-weight: 650; }
.peringatan { border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--glass-edge); }

.lapis { background: rgba(10, 26, 62, .34); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.modal { background: rgba(255, 255, 255, .88); border: 1px solid var(--glass-line); border-radius: var(--radius-xl); -webkit-backdrop-filter: blur(30px) saturate(1.7); backdrop-filter: blur(30px) saturate(1.7); box-shadow: var(--glass-edge), 0 30px 80px rgba(10, 36, 98, .28); }
.modal h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.toast { background: rgba(12, 26, 58, .88); border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.toast.ok { background: rgba(21, 94, 58, .93); } .toast.galat { background: rgba(170, 36, 28, .94); }

/* Layar masuk */
.masuk { background: none; padding: 16px; }
.masuk-kartu {
  max-width: 420px; padding: 34px 32px; border-radius: 32px; background: rgba(255, 255, 255, .72); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: var(--glass-edge), 0 4px 8px rgba(12, 26, 58, .05), 0 34px 80px rgba(18, 52, 120, .20); animation: bkPop 380ms var(--ease-out);
}
.masuk-kartu .merek img { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 8px 22px rgba(18, 52, 120, .22); }
.masuk-kartu h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: 24px; }
.masuk-kartu p.sub, .masuk-kartu .catatan { color: var(--ink-500); }