/* Portal BayarMudah: halaman masuk/daftar + dashboard merchant & admin */
.halaman-auth { background: #fff; }
.auth-wadah { display: flex; min-height: 100vh; }
.auth-merek { width: 42%; max-width: 560px; flex-direction: column; padding: 2.5rem 3rem; color: #e8f3ff; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #3d9bff 0%, var(--biru) 45%, #0a55b8 100%); }
.auth-merek::before, .auth-merek::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); }
.auth-merek::before { width: 380px; height: 380px; right: -140px; top: -120px; }
.auth-merek::after { width: 260px; height: 260px; left: -90px; bottom: -110px; }
.auth-merek > * { position: relative; z-index: 1; }
.auth-merek h2 { font-size: 2rem; line-height: 1.2; }
.auth-poin { list-style: none; padding: 0; margin: 0; }
.auth-poin li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; }
.auth-poin i { margin-top: .2rem; color: #9ff0e3; }
.auth-isi { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem 1rem; max-width: 100%; }
@media (max-width: 991.98px) { .auth-isi { justify-content: flex-start; padding-top: 1.25rem; } }
.auth-isi > * { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
.auth-kartu h1 { font-size: 1.6rem; }
.auth-kartu .form-label { font-weight: 600; font-size: .85rem; color: var(--gelap); }
.auth-kartu .form-control, .auth-kartu .form-select { border-radius: 10px; padding: .62rem .85rem; border-color: #d9e2ef; }
.auth-kartu .form-control:focus, .auth-kartu .form-select:focus, .portal-isi .form-control:focus, .portal-isi .form-select:focus { border-color: var(--biru); box-shadow: 0 0 0 .2rem rgba(31,134,255,.15); }
.auth-kartu .btn-bm { padding: .7rem; border-radius: 10px; }
.kolom-sandi { position: relative; }
.kolom-sandi .form-control { padding-right: 2.8rem; }
.kolom-sandi .mata { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--redup); padding: .35rem .55rem; }
.meter-sandi { height: 4px; border-radius: 4px; background: var(--garis); overflow: hidden; margin-top: .4rem; }
.meter-sandi span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.kotak-otp { letter-spacing: .6em; font-size: 1.6rem; font-weight: 700; text-align: center; padding-left: 1.2rem !important; }
.jebakan { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* dashboard */
.halaman-portal { background: var(--latar); }
.portal-sisi { background-color: #fff !important; border-right: 1px solid var(--garis); }   /* offcanvas-lg membuat latar transparan di desktop */
@media (min-width: 992px) {
  .portal-sisi { position: fixed; top: 0; bottom: 0; left: 0; width: 250px; display: flex; flex-direction: column; }
  .portal-utama { margin-left: 250px; }
}
@media (max-width: 991.98px) { .portal-sisi.offcanvas-lg { width: 270px; } .portal-sisi .offcanvas-body, .portal-sisi { display: flex; flex-direction: column; } }
.menu-sisi { padding: .25rem .75rem; display: flex; flex-direction: column; gap: .15rem; }
.menu-sisi a { display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: 10px; color: var(--teks); font-weight: 500; font-size: .92rem; }
.menu-sisi a i { width: 18px; text-align: center; color: var(--redup); }
.menu-sisi a:hover { background: var(--latar); color: var(--gelap); }
.menu-sisi a.aktif { background: #eaf3ff; color: var(--biru); font-weight: 700; }
.menu-sisi a.aktif i { color: var(--biru); }
.portal-utama { min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
.portal-atas { position: sticky; top: 0; z-index: 1020; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--garis);
  display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; }
.portal-isi { padding: 1.5rem 1.25rem; flex: 1; width: 100%; max-width: 1200px; }
.portal-kaki { padding: 1rem 1.25rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--biru), var(--tosca)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.kartu { background: #fff; border: 1px solid var(--garis); border-radius: 16px; padding: 1.25rem; }
.kartu h2 { font-size: 1rem; margin-bottom: 1rem; }
.min-w-0 { min-width: 0; }
.statistik .angka { font-size: 1.5rem; font-weight: 800; color: var(--gelap); line-height: 1.2; }
.statistik .ket { font-size: .8rem; color: var(--redup); }
.statistik .ikon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.langkah { display: flex; gap: .9rem; padding: .85rem 0; border-bottom: 1px dashed var(--garis); }
.langkah:last-child { border-bottom: 0; }
.langkah .bulat { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: .85rem;
  background: var(--latar); color: var(--redup); border: 1px solid var(--garis); }
.langkah.selesai .bulat { background: #e3f8ef; color: #12a46b; border-color: #bfeed9; }
.langkah.sekarang .bulat { background: var(--biru); color: #fff; border-color: var(--biru); }
.langkah .judul { font-weight: 700; color: var(--gelap); font-size: .92rem; }
.tabel-bm { font-size: .88rem; margin-bottom: 0; }
.tabel-bm th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--redup); font-weight: 700; background: var(--latar); border-bottom: 0; white-space: nowrap; }
.tabel-bm td { vertical-align: middle; }
.data-baris { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--garis); font-size: .9rem; }
.data-baris:last-child { border-bottom: 0; }
.data-baris > :first-child { width: 38%; flex-shrink: 0; color: var(--redup); }
.data-baris > :last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--gelap); }
.portal-isi .form-label { font-weight: 600; font-size: .85rem; color: var(--gelap); }
.portal-isi .form-control, .portal-isi .form-select { border-radius: 10px; border-color: #d9e2ef; }
@media (max-width: 575.98px) { .portal-isi { padding: 1rem; } .portal-atas { padding: .6rem 1rem; } .data-baris { flex-direction: column; gap: .1rem; } .data-baris > :first-child { width: auto; } }