/* ==========================================================================
   JBG — Tema "ink & brass" untuk aplikasi dalaman (SRK / SPP / SKN).

   Memetakan warna PRIMARY Vuexy (ungu #7367f0) kepada navy "ink" + aksen
   loyang, supaya bahagian log masuk memadani halaman awam (/login, pendaftaran).

   Fail ini DITULIS TANGAN (bukan hasil binaan SCSS) dan dimuat PALING AKHIR
   dalam panels/styles supaya menang ke atas core.css tanpa perlu `npm run dev`.
   Jika kelak SCSS dibina semula dgn $primary baharu, fail ini boleh dibuang.
   ========================================================================== */
:root {
  --jbg-ink: #0F1D2E;
  --jbg-ink-2: #17293F;
  --jbg-ink-3: #22374f;
  --jbg-cream: #F6F2E9;
  --jbg-brass: #C6A15B;
  --jbg-brass-d: #A9843F;
  --jbg-ink-08: rgba(15, 29, 46, .08);
  --jbg-brass-14: rgba(198, 161, 91, .14);
  --jbg-brass-20: rgba(198, 161, 91, .20);
}

/* ==========================================================================
   SKALA FON GLOBAL — klien minta teks lebih besar merentas SKN / SPP / SRK.
   Vuexy tetapkan root `html { font-size: .7rem }` (kecil). Kerana hampir semua
   komponen guna unit `rem`, menaikkan nilai root ini membesarkan SEMUA teks &
   jarak berasaskan rem secara berkadar (seperti zum) di seluruh sistem.

   >>> INI SATU-SATUNYA SUIS: laras nilai di bawah utk besar/kecil <<<
     .70rem = asal Vuexy · .80rem ≈ +14% · .85rem ≈ +21% · .90rem ≈ +28%
   ========================================================================== */
html { font-size: .8rem !important; }

/* ---- Butang: primary ---- */
.btn-primary {
  background-color: var(--jbg-ink) !important;
  border-color: var(--jbg-ink) !important;
  color: var(--jbg-cream) !important;
}
.btn-primary:hover:not(.disabled):not(:disabled) {
  background-color: var(--jbg-ink-2) !important;
  border-color: var(--jbg-ink-2) !important;
  box-shadow: 0 8px 25px -8px rgba(15, 29, 46, .55) !important;
}
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
  background-color: var(--jbg-ink-2) !important;
  border-color: var(--jbg-ink-2) !important;
  color: var(--jbg-cream) !important;
}
.btn-outline-primary {
  color: var(--jbg-ink) !important;
  border-color: var(--jbg-ink) !important;
}
.btn-outline-primary:hover:not(.disabled):not(:disabled),
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  background-color: var(--jbg-ink) !important;
  border-color: var(--jbg-ink) !important;
  color: var(--jbg-cream) !important;
}
.btn-flat-primary { color: var(--jbg-ink) !important; }
.btn-flat-primary:hover:not(.disabled):not(:disabled),
.btn-flat-primary:active {
  background-color: var(--jbg-brass-14) !important;
  color: var(--jbg-ink) !important;
}
.btn-relief-primary {
  background-color: var(--jbg-ink) !important;
  border-color: var(--jbg-ink) !important;
  color: var(--jbg-cream) !important;
}
.btn-gradient-primary {
  background-image: linear-gradient(47deg, var(--jbg-ink), var(--jbg-ink-3)) !important;
  border: none !important;
  color: var(--jbg-cream) !important;
}

/* ---- Latar & teks ---- */
.bg-primary { background-color: var(--jbg-ink) !important; }
.text-primary { color: var(--jbg-ink) !important; }
.bg-light-primary { background-color: var(--jbg-ink-08) !important; color: var(--jbg-ink) !important; }
.avatar.bg-light-primary,
.bg-light-primary .avatar-content { color: var(--jbg-ink) !important; }

/* ---- Pautan kandungan (komponen dgn peraturan sendiri tidak terjejas) ---- */
a { color: var(--jbg-ink-2); }
a:hover { color: var(--jbg-brass-d); }

/* ---- Menu sisi: item aktif (gradien primary → ink) ---- */
.main-menu .navigation > li.active > a {
  background: linear-gradient(118deg, var(--jbg-ink), rgba(23, 41, 63, .85)) !important;
  box-shadow: 0 0 10px 1px rgba(15, 29, 46, .5) !important;
  color: var(--jbg-cream) !important;
}
.main-menu .navigation > li.active > a * { color: var(--jbg-cream) !important; }
.main-menu.menu-light .navigation > li:not(.active) > a:hover { color: var(--jbg-brass-d); }
.main-menu .navigation li a i.text-primary { color: var(--jbg-ink) !important; }

/* ---- Borang: fokus loyang (sepadan /login & pendaftaran) ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--jbg-brass) !important;
  box-shadow: 0 0 0 .15rem var(--jbg-brass-20) !important;
}
.form-check-input:checked {
  background-color: var(--jbg-ink) !important;
  border-color: var(--jbg-ink) !important;
}
.form-check-input:focus {
  border-color: var(--jbg-brass) !important;
  box-shadow: 0 0 0 .15rem var(--jbg-brass-20) !important;
}

/* ---- Nav pills / tabs ---- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--jbg-ink) !important;
  color: var(--jbg-cream) !important;
  box-shadow: 0 4px 18px -4px rgba(15, 29, 46, .5) !important;
}
.nav-tabs .nav-link.active { color: var(--jbg-ink) !important; }
.nav-tabs .nav-link.active:after {
  background: linear-gradient(30deg, var(--jbg-ink), rgba(23, 41, 63, .7)) !important;
}

/* ---- Pagination ---- */
.pagination .page-item.active .page-link {
  background-color: var(--jbg-ink) !important;
  border-color: var(--jbg-ink) !important;
  color: var(--jbg-cream) !important;
}
.pagination .page-item .page-link:hover {
  color: var(--jbg-brass-d) !important;
  background-color: var(--jbg-brass-14) !important; /* ganti tint ungu Vuexy */
}
.pagination .page-item.prev-item .page-link:hover,
.pagination .page-item.next-item .page-link:hover {
  background-color: var(--jbg-ink) !important;
  color: var(--jbg-cream) !important;
}

/* ---- DataTables: baiki anak panah isihan BERGANDA & karet dropdown ----
   Bug seluruh aplikasi (bukan satu halaman): dataTables.bootstrap5.css tambah
   teks ↑/↓ pd th boleh-isih, manakala teras Vuexy (_datatables.scss) tambah
   chevron-LATAR pd pseudo-elemen yg SAMA. Kerana satu tetapkan `content` &
   satu lagi `background-image`, kedua-duanya papar → anak panah nampak berganda
   & tak sejajar. Kosongkan teks ↑/↓ (chevron Vuexy dikekalkan, warnanya sudah
   dikendali dark-layout.css ikut mod) & susun semula chevron atas/bawah menegak
   di tepi kanan. */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  content: "" !important; right: .5rem !important; left: auto !important; bottom: auto !important;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before { top: .5rem !important; }
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { top: 1.15rem !important; }

/* Karet dropdown "Papar N rekod": Vuexy letak kedudukan latar tetap (11px/13px)
   yg tak sejajar utk select pendek ini → chevron terapung. Ganti dgn satu
   chevron-bawah di tengah menegak (versi gelap ada dlm blok .dark-layout). */
.dataTables_length select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236e6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .5rem center !important;
  background-size: 13px !important;
  padding-right: 1.6rem !important;
}

/* ---- Responsif: imej kandungan tidak melebihi bekas (elak skrol melintang di mobil) ----
   Diskop ke kawasan kandungan sahaja supaya logo navbar/sidebar (saiz tetap) tak terjejas. */
.app-content .content-body img { max-width: 100%; height: auto; }

/* ---- Kad worklist papan pemuka SPP (tajuk kad) ---- */
.wl-head { color: #5e5873; }

/* ---- Borang: label semi-bold sebagai asas merentas apl (borang tanpa skop
   khusus spt SKN mewarisi ini; borang berskop kekal guna tetapan lebih tebal). ---- */
.form-label { font-weight: 600; }

/* ---- Badges ---- */
.badge.bg-primary { background-color: var(--jbg-ink) !important; }
.badge.bg-light-primary { background-color: var(--jbg-ink-08) !important; color: var(--jbg-ink) !important; }

/* ---- Progress ---- */
.progress-bar { background-color: var(--jbg-ink) !important; }

/* ---- Dropdown ---- */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--jbg-ink) !important;
  color: var(--jbg-cream) !important;
}
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--jbg-brass-14); color: var(--jbg-ink); }

/* ---- Alert primary ---- */
.alert-primary { background-color: var(--jbg-ink-08) !important; color: var(--jbg-ink) !important; }
.alert-primary .alert-link { color: var(--jbg-ink) !important; }

/* ---- Select2 (pilihan, highlight & pilihan berbilang) ---- */
/* Pilihan semasa (aria-selected) — dulu ungu Vuexy; tukar ke tint ink loyang.
   Diletak SEBELUM rule highlight supaya highlight (ink pekat) menang bila
   sesuatu option itu terpilih DAN disorot serentak (spesifisiti sama). */
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--jbg-brass-14) !important;
  color: var(--jbg-ink) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--jbg-ink) !important;
  color: var(--jbg-cream) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--jbg-ink) !important;
  border-color: var(--jbg-ink) !important;
}

/* ---- Switch (custom-control lama) ---- */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--jbg-ink) !important; }

/* ---- Navbar: avatar pengguna berjenama (ink + cincin loyang) ---- */
.header-navbar .dropdown-user .avatar {
  background-color: var(--jbg-ink) !important;
  box-shadow: 0 0 0 2px rgba(198, 161, 91, .65);
}
.header-navbar .dropdown-user .avatar .avatar-content {
  color: var(--jbg-cream) !important;
  font-weight: 700;
}
.header-navbar .dropdown-user .user-name { color: var(--jbg-ink) !important; }

/* ---- Pilihan teks ---- */
::selection { background: var(--jbg-brass-20); }

/* ==========================================================================
   MOD GELAP (.dark-layout)
   Dalam mod gelap, warna "ink" navy (#0F1D2E) hampir tak nampak atas latar
   gelap Vuexy (#161d31 / #283046). Jadi kita alih AKSEN UTAMA kepada LOYANG —
   kontras cukup & jenama "ink & brass" kekal terpelihara. Butang primary jadi
   loyang dgn teks ink gelap; teks/pautan/latar-lembut primary jadi loyang.
   ========================================================================== */
.dark-layout {
  --jbg-brass-hi: #dcc188; /* loyang cerah untuk hover atas latar gelap */
}

/* ---- Butang: primary (loyang atas gelap, teks ink) ---- */
.dark-layout .btn-primary,
.dark-layout .btn-relief-primary {
  background-color: var(--jbg-brass) !important;
  border-color: var(--jbg-brass) !important;
  color: var(--jbg-ink) !important;
}
.dark-layout .btn-primary:hover:not(.disabled):not(:disabled),
.dark-layout .btn-primary:focus,
.dark-layout .btn-primary:active,
.dark-layout .btn-primary.active,
.dark-layout .btn-check:checked + .btn-primary {
  background-color: var(--jbg-brass-d) !important;
  border-color: var(--jbg-brass-d) !important;
  color: var(--jbg-ink) !important;
  box-shadow: 0 8px 25px -8px rgba(198, 161, 91, .45) !important;
}
.dark-layout .btn-outline-primary,
.dark-layout .btn-flat-primary { color: var(--jbg-brass) !important; }
.dark-layout .btn-outline-primary { border-color: var(--jbg-brass) !important; }
.dark-layout .btn-outline-primary:hover:not(.disabled):not(:disabled),
.dark-layout .btn-outline-primary:active,
.dark-layout .btn-outline-primary.active,
.dark-layout .btn-check:checked + .btn-outline-primary,
.dark-layout .btn-check:active + .btn-outline-primary,
.dark-layout .btn-flat-primary:hover:not(.disabled):not(:disabled),
.dark-layout .btn-flat-primary:active {
  background-color: var(--jbg-brass) !important;
  border-color: var(--jbg-brass) !important;
  color: var(--jbg-ink) !important;
}
.dark-layout .btn-flat-primary:hover:not(.disabled):not(:disabled),
.dark-layout .btn-flat-primary:active { background-color: var(--jbg-brass-14) !important; color: var(--jbg-brass) !important; }
.dark-layout .btn-gradient-primary {
  background-image: linear-gradient(47deg, var(--jbg-brass-d), var(--jbg-brass)) !important;
  color: var(--jbg-ink) !important;
}

/* ---- Latar & teks ---- */
.dark-layout .bg-primary { background-color: var(--jbg-brass) !important; color: var(--jbg-ink) !important; }
.dark-layout .text-primary { color: var(--jbg-brass) !important; }
.dark-layout .bg-light-primary { background-color: var(--jbg-brass-14) !important; color: var(--jbg-brass) !important; }
.dark-layout .avatar.bg-light-primary,
.dark-layout .bg-light-primary .avatar-content { color: var(--jbg-brass) !important; }

/* ---- Pautan ---- */
.dark-layout a { color: var(--jbg-brass); }
.dark-layout a:hover { color: var(--jbg-brass-hi); }

/* ---- Menu sisi: item aktif (gradien loyang) ---- */
.dark-layout .main-menu .navigation > li.active > a {
  background: linear-gradient(118deg, var(--jbg-brass), rgba(169, 132, 63, .85)) !important;
  box-shadow: 0 0 10px 1px rgba(198, 161, 91, .4) !important;
  color: var(--jbg-ink) !important;
}
.dark-layout .main-menu .navigation > li.active > a * { color: var(--jbg-ink) !important; }
.dark-layout .main-menu .navigation li a i.text-primary { color: var(--jbg-brass) !important; }

/* ---- Borang: fokus & pilihan (loyang) ---- */
.dark-layout .form-check-input:checked {
  background-color: var(--jbg-brass) !important;
  border-color: var(--jbg-brass) !important;
}

/* ---- Nav pills / tabs ---- */
.dark-layout .nav-pills .nav-link.active,
.dark-layout .nav-pills .show > .nav-link {
  background-color: var(--jbg-brass) !important;
  color: var(--jbg-ink) !important;
  box-shadow: 0 4px 18px -4px rgba(198, 161, 91, .45) !important;
}
.dark-layout .nav-tabs .nav-link.active { color: var(--jbg-brass) !important; }
.dark-layout .nav-tabs .nav-link.active:after {
  background: linear-gradient(30deg, var(--jbg-brass-d), var(--jbg-brass)) !important;
}

/* ---- Pagination ---- */
.dark-layout .pagination .page-item.active .page-link {
  background-color: var(--jbg-brass) !important;
  border-color: var(--jbg-brass) !important;
  color: var(--jbg-ink) !important;
}
.dark-layout .pagination .page-item .page-link:hover {
  color: var(--jbg-brass) !important;
  background-color: var(--jbg-brass-14) !important; /* ganti tint ungu Vuexy */
}
.dark-layout .pagination .page-item.prev-item .page-link:hover,
.dark-layout .pagination .page-item.next-item .page-link:hover {
  background-color: var(--jbg-brass) !important;
  color: var(--jbg-ink) !important;
}

/* ---- DataTables: karet dropdown (chevron terang atas latar gelap) ---- */
.dark-layout .dataTables_length select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b4b7bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* ---- Kad worklist papan pemuka SPP (tajuk kad) — mod gelap ---- */
.dark-layout .wl-head { color: #c6c9d3; }

/* ---- Badges ---- */
.dark-layout .badge.bg-primary { background-color: var(--jbg-brass) !important; color: var(--jbg-ink) !important; }
.dark-layout .badge.bg-light-primary { background-color: var(--jbg-brass-14) !important; color: var(--jbg-brass) !important; }

/* ---- Progress ---- */
.dark-layout .progress-bar { background-color: var(--jbg-brass) !important; }

/* ---- Dropdown ---- */
.dark-layout .dropdown-menu .dropdown-item.active,
.dark-layout .dropdown-menu .dropdown-item:active {
  background-color: var(--jbg-brass) !important;
  color: var(--jbg-ink) !important;
}
.dark-layout .dropdown-item:hover,
.dark-layout .dropdown-item:focus { background-color: var(--jbg-brass-14); color: var(--jbg-brass); }

/* ---- Alert primary ---- */
.dark-layout .alert-primary { background-color: var(--jbg-brass-14) !important; color: var(--jbg-brass) !important; }
.dark-layout .alert-primary .alert-link { color: var(--jbg-brass) !important; }

/* ---- Select2 (padan tema gelap Vuexy) ---- */
.dark-layout .select2-container--default .select2-selection--single,
.dark-layout .select2-container--default .select2-selection--multiple {
  background-color: #283046 !important;
  border-color: #3b4253 !important;
}
.dark-layout .select2-container--default .select2-selection--single .select2-selection__rendered { color: #b4b7bd !important; }
.dark-layout .select2-dropdown { background-color: #283046 !important; border-color: #3b4253 !important; }
.dark-layout .select2-search__field { background-color: #283046 !important; color: #b4b7bd !important; }
.dark-layout .select2-container--default .select2-results__option { color: #b4b7bd !important; }
.dark-layout .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--jbg-brass-14) !important;
  color: var(--jbg-brass) !important;
}
.dark-layout .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--jbg-brass) !important;
  color: var(--jbg-ink) !important;
}
.dark-layout .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--jbg-brass) !important;
  border-color: var(--jbg-brass) !important;
  color: var(--jbg-ink) !important;
}

/* ---- Switch (custom-control lama) ---- */
.dark-layout .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--jbg-brass) !important; }

/* ---- Navbar: avatar pengguna (loyang + cincin) ---- */
.dark-layout .header-navbar .dropdown-user .avatar {
  background-color: var(--jbg-brass) !important;
  box-shadow: 0 0 0 2px rgba(198, 161, 91, .5);
}
.dark-layout .header-navbar .dropdown-user .avatar .avatar-content { color: var(--jbg-ink) !important; }
.dark-layout .header-navbar .dropdown-user .user-name { color: #d0d2d6 !important; }

/* ---- Pilihan teks ---- */
.dark-layout ::selection { background: var(--jbg-brass-20); }

/* ==========================================================================
   Jadual Bootstrap .table-striped / .table-hover — MOD GELAP (pembetulan global)
   Vuexy dark-layout.css menetapkan --bs-table-accent-bg pada <tr>, TETAPI Bootstrap
   menetapkannya pada SEL (> *) dgn warna hampir putih (#fafafc / #f6f6f9). Nilai yg
   ditetapkan terus pada sel mengatasi nilai warisan dari <tr>, jadi baris jadi PUTIH
   dlm mod gelap. Betulkan di peringkat SEL supaya semua jadual .table-striped/.table-hover
   standard (bukan yg diberi gaya tersuai) terus betul tanpa perlu tampal satu-satu.
   ========================================================================== */
.dark-layout .table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, .022);
  color: #b4b7bd;
}
.dark-layout .table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(198, 161, 91, .12);
  color: #e4e5ea;
}

/* ==========================================================================
   Suis mod terang/gelap — pil sun/moon dgn ibu jari meluncur (ganti butang ikon).
   Keadaan gelap dipacu oleh nenek moyang .dark-layout (bukan kelas JS) supaya
   suis mencerminkan tema serta-merta tanpa kelipan. Ikon sentiasa di atas thumb;
   ikon mod semasa "duduk" atas thumb, ikon satu lagi malap di sebelah.
   ========================================================================== */
.jbg-theme-switch {
  position: relative; display: inline-flex; align-items: center; flex-shrink: 0;
  width: 58px; height: 28px; padding: 0; border: 0; border-radius: 50rem;
  background: rgba(15, 29, 46, .12); cursor: pointer; vertical-align: middle;
  transition: background .2s ease;
}
.jbg-theme-switch:focus-visible { outline: 2px solid var(--jbg-brass, #C6A15B); outline-offset: 2px; }
.jbg-theme-switch .jbg-ts-thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; z-index: 1;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), background .2s ease;
}
.jbg-theme-switch .jbg-ts-ic {
  position: absolute; top: 0; bottom: 0; width: 24px; z-index: 2;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: color .2s ease, transform .2s ease;
}
.jbg-theme-switch .jbg-ts-ic svg { width: 15px; height: 15px; }
.jbg-theme-switch .jbg-ts-sun { left: 2px; color: #e8a013; transform: scale(1.06); }
.jbg-theme-switch .jbg-ts-moon { right: 2px; color: #9aa0b0; }
/* Keadaan GELAP (nenek moyang .dark-layout): thumb ke kanan, bulan diserlahkan. */
.dark-layout .jbg-theme-switch { background: rgba(255, 255, 255, .14); }
.dark-layout .jbg-theme-switch .jbg-ts-thumb { transform: translateX(30px); background: #1b2438; }
.dark-layout .jbg-theme-switch .jbg-ts-sun { color: #6b7180; transform: scale(.9); }
.dark-layout .jbg-theme-switch .jbg-ts-moon { color: var(--jbg-brass, #C6A15B); transform: scale(1.1); }

/* ---- Alert .alert-light — MOD GELAP (pembetulan global) ----
   Vuexy tidak menggelapkan .alert-light, jadi ia kekal PUTIH atas latar gelap
   (mis. kotak nota "Tiada maklum balas..."). Gelapkan di sini utk semua halaman. */
.dark-layout .alert.alert-light {
  background-color: #283046 !important;
  border-color: #3b4253 !important;
  color: #b4b7bd !important;
}
.dark-layout .alert.alert-light .alert-link,
.dark-layout .alert.alert-light a { color: var(--jbg-brass) !important; }

/* ==========================================================================
   JBG Masthead — hero rasmi dashboard (SRK · SPP · SKN).
   Satu rawatan visual dikongsi supaya ketiga-tiga sistem konsisten. Warna aksen
   PERANAN dihantar per-halaman via pemboleh ubah:
     --mh-accent      : hex aksen (dipakai oleh garis atas, inline)
     --mh-accent-dark : hex aksen gelap (inline)
     --mh-glow        : rgba tint aksen — cahaya aksen yg membasahi hero
   Susun atur sedia ada dikekalkan (jata + identiti kiri, sapaan + cip kanan);
   kita cuma memperkaya kedalaman, cahaya aksen peranan, kilau tepi & cip kaca.
   ========================================================================== */
.jbg-masthead {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    /* Cahaya aksen peranan — mengalir dari penjuru kanan-atas (dekat garis aksen)
       supaya seluruh hero "memakai" warna peranan pengguna. */
    radial-gradient(760px 320px at 100% -28%, var(--mh-glow, rgba(90, 110, 220, .3)), transparent 60%),
    /* Cahaya ambien sejuk kiri-atas (kekal spt asal — sentuhan familiar). */
    radial-gradient(900px 340px at 8% -45%, rgba(90, 110, 220, .42), transparent 60%),
    /* Asas navy diperdalam sedikit utk lebih 'rich'. */
    linear-gradient(118deg, #0a1230 0%, #14204d 54%, #1c2a6e 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
/* Kilau lembut di tepi atas — spt cahaya mengenai kepala kad (bukan jalur diagonal). */
.jbg-masthead::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 34%);
}
/* Cip kaca — sedikit kabur + bayang lembut supaya "terapung" atas navy. */
.jbg-masthead .badge {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
/* Bingkai jata — kedalaman + cincin dalaman halus (satu-satunya .bg-white dlm hero). */
.jbg-masthead .bg-white {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .5);
}