/* 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; }
.lencana-portal { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .28rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.lencana-portal.gelap { background: #eef5ff; color: var(--biru); border-color: #d6e7ff; }
.auth-domain { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600; color: #bfe0ff; background: rgba(13,27,62,.22); border-radius: 8px; padding: .25rem .6rem; margin-bottom: .9rem; }
.auth-pratinjau { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 16px; padding: 1rem 1.1rem; backdrop-filter: blur(4px); }
.auth-pratinjau .kecil { font-size: .72rem; color: #d6e8ff; }
.auth-pratinjau .besar { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: .04em; }
.auth-pratinjau .chip-naik { font-size: .68rem; font-weight: 700; background: #12a46b; color: #fff; border-radius: 999px; padding: .15rem .5rem; }
.auth-pratinjau .batang { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin: .8rem 0 .7rem; }
.auth-pratinjau .batang span { flex: 1; background: linear-gradient(180deg, #9ff0e3, rgba(159,240,227,.35)); border-radius: 4px 4px 0 0; }
.auth-pratinjau .baris { display: flex; justify-content: space-between; font-size: .76rem; color: #e8f3ff; padding: .3rem 0; border-top: 1px dashed rgba(255,255,255,.22); }
.auth-pratinjau .baris b { color: #9ff0e3; font-weight: 700; }
.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 { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-bottom: .75rem; }
.judul-menu { font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--redup); padding: .9rem .8rem .3rem; }
.portal-atas h1 { min-width: 0; }
.pilih-mode { display: inline-flex; border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; margin: 0; }
.pilih-mode button { border: 0; background: #fff; font-size: .74rem; font-weight: 700; padding: .35rem .6rem; color: var(--redup); white-space: nowrap; }
.pilih-mode button.aktif { background: #12a46b; color: #fff; }
.pilih-mode button.aktif.sb { background: #f5a524; color: #fff; }
.pilih-mode button:disabled { opacity: .55; cursor: not-allowed; }
.pita-sandbox { background: #fff6e0; color: #8a5a00; border-bottom: 1px solid #f3dfae; font-size: .8rem; padding: .35rem 1.25rem; }
.kode-blok { background: #0d1b3e; color: #e6edf7; border-radius: 12px; padding: 1rem; font-size: .8rem; overflow-x: auto; white-space: pre; }
.kunci-teks { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .portal-atas .pilih-bahasa { display: none; } .pilih-mode button { padding: .3rem .45rem; font-size: .68rem; } }
.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; }
/* Kartu dashboard bergradien (Ringkasan, Saldo Perusahaan, Saldo Merchant, Penarikan) */
.kartu-gradien { border: 0; color: #fff; position: relative; overflow: hidden; border-radius: 16px; padding: 1.15rem 1.25rem; height: 100%; display: block;
  box-shadow: 0 10px 24px rgba(13,27,62,.10); transition: transform .15s, box-shadow .15s; }
a.kartu-gradien:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13,27,62,.16); color: #fff; }
.kartu-gradien .label { font-size: .8rem; opacity: .92; font-weight: 600; letter-spacing: .01em; }
.kartu-gradien .nilai { font-size: 1.45rem; font-weight: 800; margin: .3rem 0 .15rem; color: #fff; line-height: 1.2; overflow-wrap: anywhere; }
.kartu-gradien .ket { font-size: .78rem; opacity: .9; }
.kartu-gradien .ket a { color: #fff; text-decoration: underline; }
.kartu-gradien .ikon-bg { position: absolute; right: -4px; bottom: -14px; font-size: 4.4rem; opacity: .16; pointer-events: none; }
.g-hijau { background: linear-gradient(135deg, #12a46b, #0c8a59); }
.g-oranye { background: linear-gradient(135deg, #f5a524, #e08a00); }
.g-biru { background: linear-gradient(135deg, #1f86ff, #0b5fcc); }
.g-ungu { background: linear-gradient(135deg, #6c4bd8, #5233b8); }
.g-merah { background: linear-gradient(135deg, #e5484d, #c4282d); }
.g-tosca { background: linear-gradient(135deg, #00b3a0, #00897a); }
.g-gelap { background: linear-gradient(135deg, #23366b, #0d1b3e); }
/* Penarikan: pilihan rekening berbentuk kartu + ringkasan langsung */
.pilih-rek { display: block; border: 1px solid var(--garis); border-radius: 12px; padding: .7rem .85rem; cursor: pointer; transition: border-color .15s, background .15s; }
.pilih-rek:hover { border-color: #b8d4ff; }
.btn-check:checked + .pilih-rek { border-color: var(--biru); background: #eef5ff; box-shadow: 0 0 0 .15rem rgba(31,134,255,.15); }
.logo-bank { width: 38px; height: 38px; border-radius: 10px; background: var(--latar); color: var(--gelap); font-weight: 800; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -.02em; }
.ringkas-tarik { background: var(--latar); border-radius: 12px; padding: .9rem 1rem; }
.ringkas-tarik .baris { display: flex; justify-content: space-between; font-size: .88rem; padding: .2rem 0; }
.ringkas-tarik .total { border-top: 1px dashed #c9d6ea; margin-top: .35rem; padding-top: .5rem; font-weight: 800; color: var(--gelap); }
.nav-tarik .nav-link { color: var(--teks); font-weight: 600; }
.nav-tarik .nav-link.active { color: var(--biru); }
.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; } }