@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700&family=Figtree:wght@400;500;600;700&display=swap');
/* ==========================================================================
   KLIK PAKET - kulit halaman masuk & daftar: "Aplikasi Kaca"
   Kartu KACA BURAM di tengah, di atas mesh gradien navy; isi panel info
   mengapit kartu (kiri: sambutan + statistik, kanan: mitra ekspedisi) pada
   layar >= 1200 px; medan dan tombol berbentuk pil, sudut 20-28 px;
   Lexend (judul) / Figtree (isi); navy #12325E + oranye #F48D13.
   Dimuat SESUDAH blok <style> halaman. Tidak ada elemen fungsional yang
   disembunyikan; !important hanya dipakai melawan !important bawaan / gaya inline.

   SELEKTOR UTAMA YANG DITIMPA
   Login (auth/login.blade.php, akar main.bp-auth-root):
     token --bp-* (terang, gelap OS, body.bp-dark) · main.bp-auth-root (+::before/::after)
     .bp-auth-container · .bp-auth-grid (3 kolom) · .bp-auth-form-wrap · .bp-home-link
     .bp-theme-toggle · .bp-auth-cover · .bp-cover-inner (grid) · .bp-cover-header
     .bp-blob · .bp-cover-logo · .bp-cover-title · .bp-text-gradient · .bp-cover-subtitle
     .bp-cover-stats · .bp-stat(-num|-lbl) · .bp-courier-slider-wrap · .bp-courier-label
     .bp-courier-slider · .bp-courier-card · .bp-courier-logo-box · .bp-courier-name
     .bp-courier-btn · .bp-courier-progress · .bp-trust-badges · .bp-trust-badge
     .bp-login-card (.card-body) · .bp-form-brand-row · .bp-form-title · .bp-label
     .bp-input-wrap · .bp-input-icon · .bp-input · .bp-input-toggle · .bp-input-suffix
     .bp-field-error · .bp-check · .bp-forgot-link · .bp-btn-primary · .bp-btn-secondary
     .bp-btn-ghost-yellow · #loginForm a.btn[href*="auth/google"] · .bp-security-note
     .bp-alert-* · .bp-mobile-courier (+slider, nav) · .bp-modal (.modal-content,
     .bp-modal-header-yellow/-dark, .modal-title, .bp-token-input)
   Registrasi (frontend/daftar-dop.blade.php, akar .container.auth-container):
     token :root / body.bp-dark · .auth-container (+::before latar) · .bp-auth-grid
     .auth-left (grid 3 kolom, +::before/::after) · .bp-cover-logo · .bp-logo-mark
     .bp-logo-main · .auth-content h2 / p · .bp-cover-stats · .feature-list
     .bp-courier-slide · .bp-courier-dots .dot · .auth-right (kaca) · .form-container
     .logo · .auth-heading · #formProgress · .step-indicator · .step(.active|.completed)
     .form-step h5 · .form-label · #registrationForm .form-control (+:focus,
     .is-invalid, -from-kelurahan, textarea) · .toggle-password · .requirement-list
     .address-preview · .form-check-input · .btn-register · .btn-secondary
     #registrationForm a.btn[href*="auth/google"] · .alert-* · #registrationForm .uk-wrap
     (.uk-gambar, .uk-tombol, .uk-nama) · #daftarDopVerifyModal (.modal-content,
     .modal-header.bg-primary/.bg-info, .reg-token-digit, .btn-info) · .ui-autocomplete
   ========================================================================== */

/* ---------- 0. TOKEN ---------- */
:root,
main.bp-auth-root {
    --mk-navy: #12325E; --mk-navy-pekat: #0A2752; --mk-biru: #2A559E; --mk-oranye: #F48D13; --mk-oranye-terang: #FFB453;
    --mk-aksen: linear-gradient(135deg, #FFB453 0%, #F48D13 100%);
    --mk-kaca: rgba(255, 255, 255, 0.88); --mk-kaca-tepi: rgba(255, 255, 255, 0.7); --mk-kaca-kilau: rgba(255, 255, 255, 0.6);
    --mk-garis-medan: #8493AE; --mk-fokus: #12325E; --mk-cincin: rgba(244, 141, 19, 0.45); --mk-sekunder: #12325E; --mk-pelat: transparent;
    --mk-galat: #B42318; --mk-sukses: #05603A; --mk-info: #1D4ED8;
    --mk-judul: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mk-huruf: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --bp-yellow: #F48D13; --bp-yellow-dark: #8F4A00; --bp-yellow-light: #FFB453; --bp-yellow-soft: #FFF0DC;
    --bp-black: #0A2752; --bp-charcoal: #12325E;
    --bp-bg: #FFFFFF; --bp-bg-alt: #F5F7FB; --bp-bg-soft: #EEF2F9;
    --bp-surface: rgba(255, 255, 255, 0.16); --bp-surface-strong: #FFFFFF;
    --bp-text: #16294A; --bp-text-strong: #0A2752; --bp-text-muted: #44546F; --bp-text-subtle: #51617C;
    --bp-border: rgba(18, 50, 94, 0.12); --bp-border-strong: rgba(18, 50, 94, 0.3);
    --bp-shadow-sm: 0 4px 14px rgba(5, 20, 48, 0.18); --bp-shadow-md: 0 12px 30px rgba(5, 20, 48, 0.22);
    --bp-shadow-lg: 0 24px 60px rgba(5, 20, 48, 0.3); --bp-shadow-xl: 0 36px 90px -24px rgba(3, 14, 36, 0.65);
    --bp-shadow-yellow: 0 14px 30px -12px rgba(244, 141, 19, 0.8); --bp-shadow-yellow-lg: 0 20px 40px -12px rgba(244, 141, 19, 0.9);
    --bp-grid-pattern: transparent; --bp-input-bg: rgba(255, 255, 255, 0.8); --bp-cover-bg: transparent;
    --bp-radius-xs: 12px; --bp-radius-sm: 16px; --bp-radius: 20px; --bp-radius-lg: 24px; --bp-radius-xl: 28px; --bp-radius-full: 999px;
    --danger-color: #B42318; --success-color: #05603A; --warning-color: #8F4A00;
    --primary-color: #8F4A00; --accent-color: #F48D13; --secondary-color: #0A2752; --dark-color: #0A2752; --light-color: #EEF2F9;
}
@media (prefers-color-scheme: dark) {
    html body:not(.bp-light),
    html body:not(.bp-light) main.bp-auth-root {
        --mk-kaca: rgba(12, 34, 72, 0.78); --mk-kaca-tepi: rgba(255, 255, 255, 0.16); --mk-kaca-kilau: rgba(255, 255, 255, 0.12);
        --mk-garis-medan: #7D90B5; --mk-fokus: #FFD08A; --mk-cincin: rgba(244, 141, 19, 0.5); --mk-sekunder: #2A559E; --mk-pelat: #FFFFFF;
        --mk-galat: #FDA29B; --mk-sukses: #75E0A7; --mk-info: #A5C4FF;
        --bp-yellow-dark: #FFB453; --bp-yellow-soft: rgba(244, 141, 19, 0.18);
        --bp-bg: #0F2A55; --bp-bg-alt: #0A2752; --bp-bg-soft: #16386E;
        --bp-surface: rgba(255, 255, 255, 0.12); --bp-surface-strong: #12325E;
        --bp-text: #EAF0FA; --bp-text-strong: #FFFFFF; --bp-text-muted: #C6D1E6; --bp-text-subtle: #A9B8D3;
        --bp-border: rgba(255, 255, 255, 0.12); --bp-border-strong: rgba(255, 255, 255, 0.3);
        --bp-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35); --bp-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.4);
        --bp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); --bp-shadow-xl: 0 36px 90px -24px rgba(0, 0, 0, 0.75);
        --bp-grid-pattern: transparent; --bp-input-bg: rgba(6, 22, 50, 0.55);
        --danger-color: #FDA29B; --success-color: #75E0A7; --warning-color: #FFB453; --primary-color: #FFB453; --light-color: #16386E;
    }
}
html body.bp-dark,
html body.bp-dark main.bp-auth-root,
main.bp-auth-root.bp-dark {
    --mk-kaca: rgba(12, 34, 72, 0.78); --mk-kaca-tepi: rgba(255, 255, 255, 0.16); --mk-kaca-kilau: rgba(255, 255, 255, 0.12);
    --mk-garis-medan: #7D90B5; --mk-fokus: #FFD08A; --mk-cincin: rgba(244, 141, 19, 0.5); --mk-sekunder: #2A559E; --mk-pelat: #FFFFFF;
    --mk-galat: #FDA29B; --mk-sukses: #75E0A7; --mk-info: #A5C4FF;
    --bp-yellow-dark: #FFB453; --bp-yellow-soft: rgba(244, 141, 19, 0.18);
    --bp-bg: #0F2A55; --bp-bg-alt: #0A2752; --bp-bg-soft: #16386E;
    --bp-surface: rgba(255, 255, 255, 0.12); --bp-surface-strong: #12325E;
    --bp-text: #EAF0FA; --bp-text-strong: #FFFFFF; --bp-text-muted: #C6D1E6; --bp-text-subtle: #A9B8D3;
    --bp-border: rgba(255, 255, 255, 0.12); --bp-border-strong: rgba(255, 255, 255, 0.3);
    --bp-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35); --bp-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.4);
    --bp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); --bp-shadow-xl: 0 36px 90px -24px rgba(0, 0, 0, 0.75);
    --bp-grid-pattern: transparent; --bp-input-bg: rgba(6, 22, 50, 0.55);
    --danger-color: #FDA29B; --success-color: #75E0A7; --warning-color: #FFB453; --primary-color: #FFB453; --light-color: #16386E;
}

/* ---------- 1. LATAR: mesh gradien navy ---------- */
main.bp-auth-root,
.container.auth-container::before {
    background-color: #0A2752;
    background-image:
        radial-gradient(60% 50% at 10% 6%, rgba(42, 85, 158, 0.85) 0, transparent 62%),
        radial-gradient(42% 38% at 92% 10%, rgba(244, 141, 19, 0.34) 0, transparent 64%),
        radial-gradient(55% 55% at 82% 96%, rgba(42, 85, 158, 0.6) 0, transparent 62%),
        radial-gradient(40% 42% at 4% 92%, rgba(30, 160, 210, 0.24) 0, transparent 62%);
}
main.bp-auth-root { font-family: var(--mk-huruf); }
main.bp-auth-root::before,
main.bp-auth-root::after { content: none; }
.container.auth-container { font-family: var(--mk-huruf); max-width: 1360px; padding-top: 56px; }
.container.auth-container::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Tombol melayang = pil kaca */
body .bp-home-link,
body .bp-theme-toggle {
    position: absolute; top: max(20px, calc(env(safe-area-inset-top, 0px) + 10px)); min-height: 44px;
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: #FFFFFF;
    box-shadow: 0 10px 26px -14px rgba(3, 14, 36, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body .bp-home-link { font-family: var(--mk-judul); font-weight: 500; padding-left: 18px; padding-right: 20px; }
body .bp-home-link:hover,
body .bp-theme-toggle:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0A2752; }

/* ---------- 2. SUSUNAN: kartu kaca diapit isi panel ---------- */
.bp-auth-root .bp-auth-container { padding-top: calc(max(16px, env(safe-area-inset-top, 0px)) + 68px); }
.auth-container .bp-auth-grid { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
@media (max-width: 991px) {
    .bp-auth-root .bp-auth-grid { max-width: 480px; }
    .container.auth-container { max-width: 600px; }
}
@media (max-width: 580px) {
    .container.auth-container { padding-left: 4px; padding-right: 4px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .bp-auth-root .bp-auth-grid { grid-template-columns: minmax(0, 1fr) minmax(400px, 440px); gap: 40px; max-width: 1010px; align-items: center; }
    .auth-container .bp-auth-grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 32px; align-items: start; }
    .auth-container .auth-left { align-self: start; }
    .auth-left .bp-cover-stats { grid-template-columns: repeat(2, 1fr); }
    .auth-left .feature-list { grid-template-columns: 1fr; }
}
@media (min-width: 1200px) {
    .bp-auth-root .bp-auth-grid,
    .bp-auth-root .bp-cover-inner { grid-template-columns: minmax(0, 1fr) 440px minmax(0, 1fr); column-gap: clamp(28px, 3vw, 48px); }
    .bp-auth-root .bp-auth-grid { row-gap: 0; max-width: 1360px; align-items: center; }
    .bp-auth-root .bp-auth-cover { grid-column: 1 / -1; grid-row: 1; align-self: stretch; }
    .bp-auth-root .bp-auth-form-wrap { grid-column: 2; grid-row: 1; position: relative; z-index: 2; }
    .bp-auth-root .bp-cover-inner { display: grid; row-gap: 22px; align-content: center; align-items: center; }
    .bp-auth-root .bp-cover-header { grid-column: 1; grid-row: 1; }
    .bp-auth-cover .bp-cover-stats { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, 1fr); }
    .bp-auth-cover .bp-courier-slider-wrap { grid-column: 3; grid-row: 1; }
    .bp-auth-cover .bp-trust-badges { grid-column: 3; grid-row: 2; grid-template-columns: 1fr; }

    .auth-container .bp-auth-grid,
    .auth-container .auth-left { grid-template-columns: minmax(0, 1fr) 548px minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 40px); }
    .auth-container .bp-auth-grid { row-gap: 0; align-items: start; }
    .auth-container .auth-left { grid-column: 1 / -1; grid-row: 1; display: grid; row-gap: 20px; align-content: start; align-self: stretch; }
    .auth-container .auth-right { grid-column: 2; grid-row: 1; position: relative; z-index: 2; }
    .auth-left > .bp-cover-logo { grid-column: 1; grid-row: 1; justify-self: start; }
    .auth-left > .auth-content { grid-column: 1; grid-row: 2; }
    .auth-left > .bp-cover-stats { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2, 1fr); }
    .auth-left > .feature-list { grid-column: 3; grid-row: 1 / span 2; grid-template-columns: 1fr; align-self: start; }
    .auth-left > .bp-courier-slider-wrap { grid-column: 3; grid-row: 3; align-self: start; }
}

/* ---------- 3. ISI PANEL INFO (langsung di atas mesh) ---------- */
.bp-auth-root .bp-auth-cover,
.auth-container .auth-left { background: none; border-radius: 0; box-shadow: none; overflow: visible; min-height: 0; color: #FFFFFF; }
.bp-auth-root .bp-cover-inner { padding: 0; }
.auth-container .auth-left { padding: 10px 0 0; }
.bp-auth-root .bp-blob,
.auth-container .auth-left::before,
.auth-container .auth-left::after { display: none; }

.bp-auth-root .bp-cover-logo { background: rgba(255, 255, 255, 0.95); border-radius: 18px; padding: 10px 16px; box-shadow: 0 14px 34px -16px rgba(3, 14, 36, 0.8); margin-bottom: 24px; }
.bp-auth-root .bp-cover-logo img { height: 46px !important; }
.auth-container .bp-logo-mark { background: var(--mk-aksen); border-radius: 14px; box-shadow: 0 10px 24px -10px rgba(244, 141, 19, 0.8); }
.auth-container .bp-logo-mark::before,
.auth-container .logo .bp-logo-mark::before { background: #0A2752; border-radius: 12px; }
.auth-container .bp-logo-mark i { color: #FFB453; }
.auth-container .bp-logo-main,
.auth-container .logo > span { font-family: var(--mk-judul); font-weight: 600; }

.bp-auth-root .bp-cover-title,
.auth-container .auth-content h2 { font-family: var(--mk-judul); font-weight: 600; font-size: clamp(1.9rem, 2.8vw, 2.8rem); line-height: 1.14; letter-spacing: -0.03em; color: #FFFFFF; }
.bp-auth-root .bp-text-gradient,
.auth-container .bp-text-gradient {
    background: linear-gradient(120deg, #FFD08A 0%, #F48D13 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #FFB453;
}
.bp-auth-root .bp-cover-subtitle,
.auth-container .auth-content > p { color: rgba(255, 255, 255, 0.84); font-size: 1rem; line-height: 1.7; }

.bp-auth-cover .bp-stat,
.auth-left .bp-stat,
.auth-left .feature-list li,
.bp-auth-root .bp-trust-badge {
    background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bp-auth-cover .bp-stat,
.auth-left .bp-stat { border-radius: 20px; padding: 16px 10px; }
.bp-auth-cover .bp-stat:hover,
.auth-left .bp-stat:hover,
.auth-left .feature-list li:hover,
.bp-auth-root .bp-trust-badge:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 196, 107, 0.6); }
.bp-auth-cover .bp-stat-num,
.auth-left .bp-stat-num { font-family: var(--mk-judul); font-weight: 600; color: #FFC46B; }
.bp-auth-cover .bp-stat-lbl,
.auth-left .bp-stat-lbl { color: rgba(255, 255, 255, 0.84); font-weight: 500; font-size: 0.74rem; }
.auth-left .feature-list li { border-radius: 999px; padding: 8px 16px 8px 8px; color: #FFFFFF; }
.bp-auth-root .bp-trust-badge { border-radius: 999px; padding: 10px 20px 10px 10px; }
.auth-left .feature-list li i,
.bp-auth-root .bp-trust-badge > i { background: var(--mk-aksen); color: #0A2752; border-radius: 50%; }
.auth-left .feature-list li i { width: 32px; height: 32px; }
.bp-auth-root .bp-trust-badge > i { width: 42px; height: 42px; }
.bp-auth-root .bp-trust-badge small { color: rgba(255, 255, 255, 0.82); }

/* ---------- 4. SLIDER EKSPEDISI: kartu kaca ---------- */
.bp-auth-cover .bp-courier-slider-wrap,
.auth-left .bp-courier-slider-wrap {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; padding: 18px;
    box-shadow: 0 30px 70px -36px rgba(3, 14, 36, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); flex: 0 0 auto;
}
.bp-auth-cover .bp-courier-label,
.auth-left .bp-courier-label {
    align-self: flex-start; background: rgba(244, 141, 19, 0.18); color: #FFC46B; border-radius: 999px; padding: 6px 14px;
    font-family: var(--mk-judul); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em;
}
.bp-auth-cover .bp-courier-slider,
.auth-left .bp-courier-slider { height: 176px; border-radius: 20px; background: rgba(4, 18, 44, 0.38); border: 1px solid rgba(255, 255, 255, 0.12); }
.bp-auth-root .bp-mobile-courier-slider { border-radius: 20px; }
.bp-auth-root .bp-courier-slider .bp-courier-card,
.auth-left .bp-courier-card { background: none; border: 0; border-radius: 16px; }
.bp-auth-root .bp-mobile-courier-slider .bp-courier-card { border-radius: 16px; }
.bp-auth-root .bp-courier-logo-box,
.auth-left .bp-courier-logo-box { border-radius: 16px; }
.bp-auth-root .bp-courier-name,
.auth-left .bp-courier-name { font-family: var(--mk-judul); font-weight: 600; }
.bp-auth-root .bp-courier-btn,
.auth-left .bp-courier-btn { width: 44px; height: 44px; }
.bp-auth-cover .bp-courier-btn,
.auth-left .bp-courier-btn { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); color: #FFFFFF; }
.bp-auth-root .bp-courier-btn:hover,
.bp-auth-root .bp-mobile-courier-nav .bp-courier-btn:hover,
.auth-left .bp-courier-btn:hover { background: var(--mk-aksen); border-color: transparent; color: #0A2752; }
.bp-auth-cover .bp-courier-progress .progress-bar,
.auth-left .bp-courier-progress > div { background: linear-gradient(90deg, #FFB453, #F48D13); }
.bp-auth-root .bp-mobile-courier .bp-btn-ghost-yellow { min-height: 46px; font-weight: 600; }

/* ---------- 5. KARTU KACA BURAM ---------- */
.bp-auth-root .bp-login-card,
.bp-auth-root .bp-mobile-courier,
.auth-container .auth-right {
    background: var(--mk-kaca) !important; border: 1px solid var(--mk-kaca-tepi) !important; border-radius: 28px !important;
    box-shadow: 0 36px 90px -24px rgba(3, 14, 36, 0.65), inset 0 1px 0 var(--mk-kaca-kilau) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
}
.bp-auth-root .bp-login-card .card-body { padding: 36px 34px 30px !important; }
.bp-auth-root .bp-mobile-courier .card-body { padding: 26px 22px !important; }
.auth-container .auth-right { padding: 34px 36px; }
.auth-container .form-container { max-width: none; }
@media (max-width: 580px) {
    .auth-container .auth-right { padding: 26px 20px; }
}
@media (max-width: 480px) {
    .bp-auth-root .bp-login-card .card-body { padding: 28px 20px 24px !important; }
}
@media (max-width: 380px) {
    .bp-auth-root .bp-login-card .card-body { padding-left: 16px !important; padding-right: 16px !important; }
}

.bp-auth-root .bp-form-brand-row img { background: var(--mk-pelat); border-radius: 12px; padding: 4px 10px; box-sizing: content-box; }
.bp-auth-root .bp-form-title,
.auth-container .auth-heading { font-family: var(--mk-judul); font-weight: 600; letter-spacing: -0.03em; color: var(--bp-text-strong) !important; }
.bp-auth-root .bp-form-subtitle { color: var(--bp-text-muted) !important; }
.bp-auth-root .bp-text-yellow { color: var(--bp-yellow-dark); }
.bp-auth-root .bp-mobile-title { font-family: var(--mk-judul); font-weight: 600; }

/* ---------- 6. LABEL, MEDAN PIL, CENTANG ---------- */
.bp-auth-root .bp-label,
.auth-container .form-label { font-size: 0.84rem; font-weight: 600; letter-spacing: 0; color: var(--bp-text-strong); padding-left: 6px; }

.bp-auth-root .bp-input-wrap { border: 1.5px solid var(--mk-garis-medan); border-radius: 999px; min-height: 52px; }
.bp-auth-root .bp-input-wrap:focus-within { border-color: var(--mk-fokus); box-shadow: 0 0 0 4px var(--mk-cincin); }
.bp-auth-root .bp-input-icon { left: 20px; }
.bp-auth-root .bp-input-wrap > .bp-input-icon ~ .bp-input { padding-left: 50px !important; }
.bp-auth-root .bp-input-wrap > #passwordInput { padding-right: 58px !important; }
.bp-auth-root .bp-input-toggle,
.bp-auth-root .bp-input-suffix { width: 44px; height: 44px; right: 4px; border-radius: 50% !important; }
.bp-auth-root .bp-input-prefix { padding-left: 20px !important; }
.bp-auth-root .bp-input::placeholder,
#registrationForm .form-control::placeholder { opacity: 1; }
.bp-auth-root .bp-field-error,
.bp-auth-root .modern-invalid-feedback.bp-field-error,
.auth-container .invalid-feedback { color: var(--mk-galat) !important; padding-left: 6px; }
.auth-container .form-text { padding-left: 6px; }

#registrationForm .form-control {
    font-family: var(--mk-huruf) !important; border: 1.5px solid var(--mk-garis-medan) !important; border-radius: 999px !important;
    padding-left: 20px !important; padding-right: 20px !important; min-height: 50px;
}
#registrationForm textarea.form-control { border-radius: 22px !important; }
#registrationForm .form-control:focus { border-color: var(--mk-fokus) !important; box-shadow: 0 0 0 4px var(--mk-cincin) !important; }
#registrationForm .form-control.is-invalid { border-color: var(--mk-galat) !important; box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.2) !important; }
#registrationForm .form-control-from-kelurahan { border-style: dashed !important; }
#registrationForm .password-container .form-control { padding-right: 58px !important; }
.auth-container .toggle-password { width: 44px; height: 44px; right: 4px; border-radius: 50%; }
.auth-container .requirement-list { border-radius: 18px; padding: 14px 18px; }
.auth-container .address-preview { border-radius: 20px; }
.auth-container #wilayahOtomatisHelp { border-radius: 16px; }

.bp-auth-root .bp-check { min-height: 44px !important; }
.bp-auth-root .bp-check .form-check-input,
.auth-container .form-check-input { width: 20px !important; height: 20px !important; border: 1.5px solid var(--mk-garis-medan) !important; border-radius: 7px !important; }
.bp-auth-root .bp-check .form-check-input:focus-visible,
.auth-container .form-check-input:focus-visible { outline: 3px solid var(--mk-fokus); outline-offset: 2px; }
.auth-container .form-check { padding-left: 30px; min-height: 44px; display: flex; align-items: center; }
.auth-container .form-check-input { margin-left: -30px !important; margin-right: 10px !important; flex: 0 0 auto; }
.bp-auth-root .bp-forgot-link { display: inline-flex; align-items: center; min-height: 44px; }
.bp-auth-root .bp-forgot-link:hover,
.bp-auth-root .bp-register-link:hover { color: var(--bp-text-strong); }

/* ---------- 7. TOMBOL PIL ---------- */
.bp-auth-root .btn.bp-btn-primary,
.auth-container .btn-register,
#daftarDopVerifyModal .btn.btn-primary:not(.btn-register) {
    background: var(--mk-aksen) !important; color: #0A2752 !important; border-radius: 999px !important;
    font-family: var(--mk-judul) !important; font-weight: 600 !important; letter-spacing: 0;
    box-shadow: 0 14px 30px -12px rgba(244, 141, 19, 0.8) !important; min-height: 52px;
}
.bp-auth-root .btn.bp-btn-primary:hover:not(:disabled),
.auth-container .btn-register:hover:not(:disabled) { color: #0A2752 !important; box-shadow: 0 20px 40px -12px rgba(244, 141, 19, 0.9) !important; }
.auth-container .btn-register { padding: 12px 26px !important; }
.bp-auth-root .btn.bp-btn-secondary,
#daftarDopVerifyModal .btn.btn-info { background: var(--mk-sekunder) !important; color: #FFFFFF !important; border-radius: 999px !important; font-family: var(--mk-judul); font-weight: 600 !important; min-height: 50px; }
.bp-auth-root .btn.bp-btn-secondary:hover,
#daftarDopVerifyModal .btn.btn-info:hover { background: #2A559E !important; }
.bp-auth-root .btn.bp-btn-ghost,
.auth-container .btn-secondary,
#daftarDopVerifyModal .btn.btn-outline-secondary { border: 1.5px solid var(--mk-garis-medan) !important; min-height: 48px; }
.auth-container .btn-secondary { background: transparent !important; font-family: var(--mk-judul); font-weight: 600 !important; padding: 11px 24px !important; }

#loginForm a.btn[href*="auth/google"],
#registrationForm a.btn[href*="auth/google"] {
    border: 1.5px solid rgba(18, 50, 94, 0.26) !important; border-radius: 999px !important; min-height: 50px; padding: 11px 18px !important;
    box-shadow: 0 8px 18px -12px rgba(3, 14, 36, 0.6); font-family: var(--mk-huruf);
}
#loginForm a.btn[href*="auth/google"]:hover,
#registrationForm a.btn[href*="auth/google"]:hover { background: #F5F7FB !important; border-color: #12325E !important; }
#loginForm hr,
#registrationForm hr { border-color: var(--bp-border-strong); opacity: 1; }
#loginForm .text-muted,
#registrationForm .text-muted { color: var(--bp-text-subtle) !important; }

/* ---------- 8. LANGKAH REGISTRASI: stepper pil ---------- */
.auth-container #formProgress { height: 6px; background: var(--bp-border); }
.auth-container #formProgress::after { background: linear-gradient(90deg, #FFB453, #F48D13); box-shadow: 0 0 14px rgba(244, 141, 19, 0.6); }
.auth-container .step-indicator { padding: 0; }
.auth-container .step-indicator::before { left: 24px; right: 24px; height: 3px; border-radius: 999px; }
.auth-container .step { width: 64px; height: 44px; border-radius: 999px; border: 1.5px solid var(--mk-garis-medan); background: var(--bp-bg); color: var(--bp-text-muted); font-family: var(--mk-judul); font-weight: 600; }
.auth-container .step.active { background: var(--mk-aksen); border-color: transparent; color: #0A2752; box-shadow: 0 12px 24px -10px rgba(244, 141, 19, 0.85); transform: none; }
.auth-container .step.completed { background: var(--mk-sekunder); border-color: var(--mk-sekunder); color: #FFFFFF; font-size: 0; }
.auth-container .form-step h5 { font-family: var(--mk-judul); font-weight: 600; letter-spacing: -0.01em; }
.auth-container .form-step h5 i { border-radius: 12px; }

/* ---------- 9. UNGGAH KTP ---------- */
#registrationForm .uk-wrap { border: 1.5px dashed var(--mk-garis-medan); border-radius: 22px; background: var(--bp-input-bg); min-height: 92px; padding: 16px; }
#registrationForm .uk-wrap:hover,
#registrationForm .uk-wrap.uk-fokus { border-color: var(--mk-fokus); background: var(--bp-input-bg); }
#registrationForm .uk-wrap.uk-fokus { box-shadow: 0 0 0 4px var(--mk-cincin); }
#registrationForm .uk-wrap.uk-isi-ada { border-style: solid; border-color: var(--mk-sukses); background: var(--bp-input-bg); }
#registrationForm .uk-gambar { border-radius: 14px; border: 1px solid var(--bp-border-strong); background: var(--bp-bg-soft); }
#registrationForm .uk-gambar-ikon { color: var(--bp-text-subtle); }
#registrationForm .uk-tombol { background: var(--mk-sekunder); border: 1px solid transparent; color: #FFFFFF; border-radius: 999px; padding: 7px 16px; font-family: var(--mk-judul); font-size: 0.8rem; font-weight: 500; }
#registrationForm .uk-nama { color: var(--bp-text-muted); }

/* ---------- 10. PERINGATAN & CATATAN ---------- */
.bp-auth-root .bp-alert,
.auth-container .alert,
#daftarDopVerifyModal .alert { border-radius: 18px !important; }
.bp-auth-root .bp-alert-danger,
.auth-container .alert-danger,
#daftarDopVerifyModal .alert-danger { color: var(--mk-galat) !important; }
.bp-auth-root .bp-alert-success,
.auth-container .alert-success { color: var(--mk-sukses) !important; }
.bp-auth-root .bp-alert-info,
.auth-container .alert-info { color: var(--mk-info) !important; }
.bp-auth-root .bp-security-note { border-style: solid; border-color: var(--bp-border); border-radius: 999px; background: var(--bp-border); color: var(--bp-text-muted); }

/* ---------- 11. MODAL ---------- */
#daftarDopVerifyModal { font-family: var(--mk-huruf); }
.bp-auth-root .bp-modal .modal-content,
#daftarDopVerifyModal .modal-content { border-radius: 28px !important; }
.bp-auth-root .bp-modal .bp-modal-header-yellow,
#daftarDopVerifyModal .modal-header.bg-primary { background: var(--mk-aksen) !important; color: #0A2752 !important; }
.bp-auth-root .bp-modal .bp-modal-header-yellow .modal-title,
#daftarDopVerifyModal .modal-header.bg-primary .modal-title { color: #0A2752 !important; }
.bp-auth-root .bp-modal .bp-modal-header-dark,
#daftarDopVerifyModal .modal-header.bg-info { background: linear-gradient(135deg, #0A2752 0%, #2A559E 100%) !important; color: #FFFFFF !important; }
.bp-auth-root .bp-modal .bp-modal-header-dark .modal-title,
#daftarDopVerifyModal .modal-header.bg-info .modal-title { color: #FFFFFF !important; }
.bp-auth-root .bp-modal .modal-title,
#daftarDopVerifyModal .modal-title { font-family: var(--mk-judul) !important; font-weight: 600 !important; }
.bp-auth-root .bp-modal-title { font-family: var(--mk-judul); font-weight: 600; letter-spacing: -0.02em; }
.bp-auth-root .bp-token-input,
#daftarDopVerifyModal .reg-token-digit { font-family: var(--mk-judul) !important; font-weight: 600 !important; border: 1.5px solid var(--mk-garis-medan) !important; border-radius: 16px !important; }
.bp-auth-root .bp-token-input:focus,
#daftarDopVerifyModal .reg-token-digit:focus { border-color: var(--mk-fokus) !important; box-shadow: 0 0 0 4px var(--mk-cincin) !important; }
@media (max-width: 420px) {
    .bp-auth-root .bp-modal .modal-body { padding: 22px 18px !important; }
}
body .ui-autocomplete { font-family: var(--mk-huruf) !important; }

/* ---------- 12. FOKUS & GERAK ---------- */
.bp-auth-root :is(a, button, .btn, [role="button"]):focus-visible,
.auth-container :is(a, button, .btn, [role="button"]):focus-visible,
#daftarDopVerifyModal :is(a, button, .btn):focus-visible { outline: 3px solid var(--mk-fokus); outline-offset: 3px; }
body .bp-home-link:focus-visible,
body .bp-theme-toggle:focus-visible,
.bp-auth-cover .bp-courier-btn:focus-visible,
.auth-left .bp-courier-btn:focus-visible { outline: 3px solid #FFD08A; outline-offset: 3px; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :root,
    main.bp-auth-root { --mk-kaca: rgba(255, 255, 255, 0.95); }
    html body.bp-dark,
    html body.bp-dark main.bp-auth-root,
    main.bp-auth-root.bp-dark { --mk-kaca: rgba(12, 34, 72, 0.95); }
    @media (prefers-color-scheme: dark) {
        html body:not(.bp-light),
        html body:not(.bp-light) main.bp-auth-root { --mk-kaca: rgba(12, 34, 72, 0.95); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .bp-auth-root *,
    .auth-container *,
    .auth-container *::before,
    .auth-container *::after,
    #daftarDopVerifyModal * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .bp-auth-root .btn:hover,
    .auth-container .btn:hover { transform: none !important; }
}

/* Ponsel/tablet: panel promosi registrasi disembunyikan seperti bawaan (max-width 991px) supaya FORM langsung terlihat
   tanpa menggulir; kulit sempat menampilkannya lagi karena aturan display berspesifisitas lebih tinggi. */
@media (max-width: 991px) {
  .auth-container .auth-left { display: none !important; }
}