/* Palet warna resmi untuk banner: Sky Blue, Cerulean, Chrome Yellow. Gradasi menahan Cerulean di sisi teks (kontras putih >= 4,5:1)
   dan baru menuju Sky Blue di sisi ilustrasi. Tema dasar (--lz-primary) tidak diubah. */
:root { --uns-sky: #1FABE1; --uns-cerulean: #0E7DA7; --uns-yellow: #FFDB07; --uns-cerulean-ink: #0A5C7C; --uns-grad: linear-gradient(120deg, #0E7DA7 0%, #0E7DA7 40%, #1FABE1 100%); }
/* Tambahan khusus integrasi Yii2 pada tema Learn (di luar template asli). */

/* Label menu dari Yii::$app->menu boleh memuat badge HTML; jaga agar tetap sebaris. */
.side-nav .menu-badge { margin-left: auto; }

/* Flash message Yii (alert Bootstrap 5) memakai jarak yang sama dengan kartu. */
.app-content > .alert { margin-bottom: 1rem; }

/* Pager Yii (LinkPager) versi lama menghasilkan <li><a> tanpa kelas page-link. */
.pagination > li > a, .pagination > li > span { display: block; padding: .375rem .75rem; }

/* Template memberi .lz-card tinggi 100% agar kartu dalam kolom grid sama tinggi. Pada kartu yang ditumpuk
   langsung di .app-content, tinggi 100% membuat kartu melar sepanjang halaman dan menimpa elemen di bawahnya.
   Jadi: tinggi mengikuti isi, kecuali kartu yang berada langsung di dalam kolom grid (pola asli template). */
.lz-card { height: auto; }
.row > [class*="col"] > .lz-card { height: 100%; }

/* Breadcrumb: panah pemisah (glyph Bootstrap Icons) disejajarkan vertikal dengan label.
   Bawaan Bootstrap memakai float + vertical-align sehingga glyph tampak lebih tinggi daripada teks. */
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item::before { float: none; display: inline-flex; align-items: center; line-height: 1; vertical-align: baseline; }

/* Kisi data "label di atas nilai" (.lz-dl): dipakai bersama yii\widgets\DetailView (tag dl) untuk tampilan profil/biodata. */
.lz-dl dt { font-size: .78rem; font-weight: 600; color: var(--lz-text-3); margin-bottom: .15rem; }
.lz-dl dd { margin: 0; font-weight: 500; color: var(--lz-text); overflow-wrap: anywhere; }
/* Nilai kosong dibuat pucat agar mata tertuju ke data yang terisi. */
.lz-dl-kosong { color: var(--lz-muted); opacity: .6; }

/* Kartu profil: foto + identitas + aksi dalam satu baris, data kunci di bawah garis pemisah. */
.profil-card { padding: 1.5rem; }
.profil-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1.25rem; }
/* Pas foto umumnya potret 3:4: bingkai potret + object-position atas agar kepala/rambut tidak terpotong. */
.profil-foto { width: 84px; height: 112px; object-fit: cover; object-position: center top; border-radius: 16px; background: var(--lz-bg); flex: none; }
.profil-identitas { flex: 1 1 260px; min-width: 0; }
.profil-aksi { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.profil-kunci { padding-top: 1.1rem; border-top: 1px solid var(--lz-border); }
.profil-kunci dd { font-weight: 600; }
@media (max-width: 575.98px) {
  .profil-card { padding: 1.1rem; }
  /* HP: foto lebih kecil dan sejajar atas dengan nama; identitas berdampingan dengan foto (bukan turun ke baris baru).
     Chip diubah jadi baris teks berikon: pil bertumpuk di kolom sempit tampak berantakan dan memakan tinggi. */
  .profil-head { align-items: flex-start; gap: .75rem 1rem; }
  .profil-foto { width: 72px; height: 96px; }
  .profil-identitas { flex-basis: 150px; }
  .profil-identitas .h4 { font-size: 1.15rem; margin-bottom: .5rem !important; }
  .profil-chips { flex-direction: column; align-items: flex-start; gap: .3rem !important; }
  .profil-chips .lz-chip { background: none; border: 0; padding: 0; border-radius: 0; font-weight: 500; font-size: .84rem; align-items: flex-start; text-align: left; }
  .profil-chips .lz-chip i { margin-top: .12rem; color: var(--lz-primary-ink); }
  .profil-aksi { width: 100%; }
  .profil-aksi > .btn { flex: 2 1 auto; white-space: nowrap; }
  .profil-aksi > .dropdown { flex: 1 1 auto; }
  .profil-aksi .dropdown > .btn { width: 100%; }
}

/* Kartu di halaman data/form: area konten template menukar --lz-surface jadi abu muda (#f5f7fa) di atas latar putih.
   Kontrasnya terlalu tipis untuk teks kecil (label abu di atas abu) dan baris tabel sulit dibaca. Kartu dikembalikan
   ke putih dengan garis tipis yang mengikuti warna teks, jadi tetap terpisah dari latar di mode terang maupun gelap.
   .lz-card-table dipertahankan sebagai alias untuk kartu berisi tabel. */
.app-content .lz-card, .lz-card-table {
  --lz-surface: var(--lz-wrap);
  border: 1px solid color-mix(in srgb, var(--lz-text) 12%, transparent);
}
.lz-dl dt { color: var(--lz-text-3); }

/* Data tersamar (MaskedValue): nilai + tombol mata sebaris. */
.lz-mask { display: inline-flex; align-items: center; gap: .35rem; }
.lz-mask-btn { border: 0; background: none; padding: .15rem .3rem; border-radius: 6px; color: var(--lz-muted); line-height: 1; }
.lz-mask-btn:hover, .lz-mask-btn:focus-visible { background: var(--lz-hover); color: var(--lz-primary-ink); }

/* Judul halaman sejajar dengan nama aplikasi di sidebar (berlaku untuk semua halaman ber-layout Learn).
   Kartu sidebar mulai 1rem dari atas + padding kepala 1.5rem = 2.5rem; baris merek dan baris judul dibuat sama tinggi (44px)
   dan sama-sama rata tengah, sehingga garis tengahnya jatuh di titik yang sama, juga saat sidebar dilipat jadi rail. */
.side-head .brand { min-height: 44px; }
.page-head { align-items: center; min-height: 44px; }
@media (min-width: 992px) {
  .app-main { padding-top: 2.5rem; }
}
/* Huruf judul (1.75rem) lebih besar daripada nama aplikasi (1.4rem): bila hanya garis tengah baris yang disamakan,
   garis dasar tulisan judul jatuh ~2px lebih rendah. Digeser ke atas agar baseline keduanya sama. */
.page-head h1 { position: relative; top: -.07em; }

/* Tombol lipat sidebar: pusatnya disejajarkan dengan garis tengah baris merek.
   Tengah merek = 1rem (jarak kartu) + 1.5rem (padding kepala) + 22px (setengah tinggi baris 44px); tombol 30px -> geser 15px. */
.side-collapse { --sb-toggle-top: calc(2.5rem + 22px - 15px); }

/* Logo aplikasi (public/img/logo-uns-100.png) menggantikan tanda merek bawaan template. */
.brand-logo { width: 32px; height: 32px; object-fit: contain; flex: none; }

/* Nav tabs (semua halaman ber-layout Learn): selalu satu baris; bila tab tidak muat, bergulir mendatar
   (bukan turun ke baris kedua yang membuat garis bawah tab tidak sejajar).
   - Ujung yang masih bisa digulir memudar (kelas .lz-fade-l / .lz-fade-r diatur learn-layout.js).
   - Scrollbar tipis di perangkat dengan kursor, disembunyikan di layar sentuh.
   Pengecualian: tab vertikal (.flex-column), tab yang memuat dropdown (menu akan terpotong overflow), dan tab yang
   sengaja boleh membungkus (tambahkan kelas .lz-tabs-wrap). */
.nav-tabs:not(.flex-column):not(.lz-tabs-wrap):not(:has(.dropdown-menu)) {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--lz-text) 25%, transparent) transparent;
}
.nav-tabs:not(.flex-column):not(.lz-tabs-wrap):not(:has(.dropdown-menu)) .nav-item { flex: none; }
.nav-tabs:not(.flex-column):not(.lz-tabs-wrap):not(:has(.dropdown-menu)) .nav-link { white-space: nowrap; }
@media (hover: none) {
  .nav-tabs { scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 575.98px) {
  .nav-tabs .nav-link { padding-left: .6rem; padding-right: .6rem; }
}
.nav-tabs.lz-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.nav-tabs.lz-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.nav-tabs.lz-fade-l.lz-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

/* Isi alert yang berdampingan dengan ikon dan tombol: teks boleh menyusut sampai 200px, baru tombol turun ke baris
   berikutnya (tanpa ini, ikon sendirian di satu baris pada layar HP). */
.lz-alert-body { flex: 1 1 200px; min-width: 0; }

/* Pemberitahuan mode malam otomatis (learn-layout.js). Kartu melayang di kanan bawah; di HP selebar layar. */
.lz-night-notice {
  position: fixed; z-index: 1080; right: 1rem; bottom: 1rem; width: 380px; max-width: calc(100vw - 2rem);
  display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 2.5rem 1rem 1rem;
  background: var(--lz-wrap); color: var(--lz-text);
  border: 1px solid color-mix(in srgb, var(--lz-text) 14%, transparent); border-radius: 16px;
  box-shadow: 0 12px 32px -12px rgba(8, 15, 30, .45);
  animation: lz-night-in .35s ease-out both;
}
.lz-night-icon { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.2rem; background: var(--lz-primary-soft); color: var(--lz-primary-ink); }
.lz-night-body { min-width: 0; }
.lz-night-body strong { display: block; margin-bottom: .2rem; }
.lz-night-body p { margin: 0 0 .75rem; font-size: .84rem; color: var(--lz-text-3); line-height: 1.5; }
.lz-night-close { position: absolute; top: .75rem; right: .75rem; }
@keyframes lz-night-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lz-night-notice { animation: none; } }
@media (max-width: 575.98px) { .lz-night-notice { left: 1rem; width: auto; } }

/* ---------- Form wizard (komponen wizard tema + tambahan integrasi Yii/kartik) ---------- */
/* Kartu wizard putih bergaris tipis, sama dengan .lz-card di area konten. */
.app-content .lz-wizard { --lz-surface: var(--lz-wrap); border: 1px solid color-mix(in srgb, var(--lz-text) 12%, transparent); }

/* Pengelompokan isian di dalam satu langkah: judul bagian bergaris bawah tipis, tanpa kartu bersarang. */
.wizard-section { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; }
.wizard-section-title {
  float: none; width: auto; display: flex; align-items: center; gap: .5rem;
  font-size: 1.02rem; font-weight: 700; padding: 0 0 .6rem; margin: 0 0 1rem;
  border-bottom: 1px solid var(--lz-border);
}
.wizard-section-title i { color: var(--lz-primary-ink); }

/* Pratinjau foto di langkah unggah: bingkai potret 3:4, bagian atas diprioritaskan agar kepala tidak terpotong. */
.wizard-foto { display: block; width: 100%; max-width: 180px; margin: 0 auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 16px; border: 1px solid var(--lz-border); background: var(--lz-bg); }

/* Select2 kartik dihitung lebarnya saat panel masih tersembunyi (hasil 0px); paksa selebar kolom. */
.lz-wizard .select2-container { width: 100% !important; }

/* Validasi dilakukan server, jadi gaya "valid" hijau bawaan Bootstrap (.was-validated dipasang komponen wizard saat Lanjut)
   tidak dipakai; kolom tidak diberi tanda centang. Galat tetap tampil lewat .is-invalid. */
.lz-wizard-server .was-validated .form-control:valid,
.lz-wizard-server .was-validated .form-select:valid { border-color: var(--bs-border-color); background-image: none; padding-right: .85rem; }
/* Select2 (tema krajee-bs5) tidak membaca .is-invalid pada <select> tersembunyi; tandai kotak pilihannya. */
select.is-invalid + .select2-container .select2-selection { border-color: var(--bs-form-invalid-border-color, #dc3545); }
/* Judul langkah wizard difokuskan lewat skrip saat pindah langkah (pembaca layar); cincin fokusnya tidak perlu terlihat. */
.wizard-title:focus, .wizard-title:focus-visible { outline: 0; box-shadow: none; }

/* Beranda publik: pratinjau kartu di hero berisi tiga baris sehingga terpotong di HP; disembunyikan di layar sempit. */
@media (max-width: 575.98px) {
  .hero-preview { display: none; }
  .pub-section .feature { padding: 1.1rem; }
}

/* Banner sapaan beranda login (site/index-learn). Gradasi biru dan ilustrasi sama dengan banner beranda pengunjung. */
.lz-welcome { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 1rem; overflow: hidden; border-radius: 28px; color: #fff; background: var(--uns-grad); box-shadow: 0 24px 48px -28px rgba(15, 30, 60, .6); }
.lz-welcome-copy { padding: clamp(1.5rem, 3.5vw, 2.5rem); display: flex; flex-direction: column; gap: .85rem; }
.lz-welcome-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; padding: .3rem .8rem; border-radius: 99px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .35); }
.lz-welcome h2 { color: inherit; font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
.lz-welcome p { margin: 0; max-width: 32rem; opacity: .94; font-weight: 500; }
.lz-welcome-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin-top: .25rem; }
.lz-welcome .btn-light { color: var(--uns-cerulean-ink); }
.lz-welcome-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.lz-welcome-link:hover { color: inherit; opacity: .85; }
.lz-welcome-art { position: relative; align-self: stretch; display: grid; place-items: center; padding: 1rem 1.5rem 1rem 0; }
.lz-welcome-art::before { content: ""; position: absolute; inset: 12% 6% 12% 2%; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.lz-welcome-art svg { position: relative; width: 100%; max-height: 220px; display: block; }
@media (max-width: 767.98px) {
  .lz-welcome { grid-template-columns: 1fr; border-radius: 22px; }
  .lz-welcome-art { display: none; }
}

/* Ilustrasi banner sapaan melayang naik turun; kartu centang dan bintang bergerak dengan jeda berbeda agar terasa hidup.
   Dimatikan bila pengguna meminta gerak dikurangi. */
@keyframes lz-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (prefers-reduced-motion: no-preference) {
  .lz-welcome-art svg { animation: lz-float 4s ease-in-out infinite alternate; }
  .lz-welcome-art svg > g { animation: lz-float 3s ease-in-out infinite alternate; }
  .lz-welcome-art svg > g:last-of-type { animation-duration: 3.6s; animation-delay: -1.2s; }
}

/* Banner dompet digital pada Cek Tagihan (registrasi/cek/tagihan): angka utama besar, "kartu" identitas, ringkasan. */
.lz-wallet { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 28px; color: #fff; background: var(--uns-grad); box-shadow: 0 24px 48px -28px rgba(15, 30, 60, .65); }
.lz-wallet::before, .lz-wallet::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; }
.lz-wallet::before { width: 320px; height: 320px; right: -90px; top: -150px; }
.lz-wallet::after { width: 220px; height: 220px; left: 32%; bottom: -130px; background: rgba(255, 255, 255, .07); }
.lz-wallet > * { position: relative; z-index: 1; }
.lz-wallet-main { display: flex; flex-direction: column; gap: .35rem; justify-content: center; min-width: 0; }
.lz-wallet-status { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem; margin-bottom: .6rem; border-radius: 99px; font-size: .8rem; font-weight: 700; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); }
.lz-wallet-status.is-ok { background: rgba(46, 204, 113, .28); border-color: rgba(120, 235, 170, .6); }
.lz-wallet-status.is-pay { background: rgba(255, 255, 255, .92); color: var(--uns-cerulean-ink); border-color: transparent; }
.lz-wallet-status.is-warn { background: var(--uns-yellow); color: #3d3000; border-color: transparent; }
.lz-wallet-label { opacity: .85; font-weight: 600; }
.lz-wallet-amount { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lz-wallet-amount-text { font-size: clamp(1.4rem, 3vw, 2rem); }
.lz-wallet-note { margin: .4rem 0 0; opacity: .92; font-weight: 500; }

/* Kartu identitas: berkaca di atas gradasi, bergaya kartu bank */
.lz-wallet-card { align-self: center; display: flex; flex-direction: column; gap: .9rem; padding: 1.25rem 1.4rem; border-radius: 22px; background: rgba(4, 52, 74, .3); border: 1px solid rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-width: 0; }
.lz-wallet-card-chip { width: 42px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #FFE866, var(--uns-yellow)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.lz-wallet-holder small { display: block; opacity: .8; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.lz-wallet-holder strong { display: block; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.lz-wallet-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .88rem; font-weight: 600; }
.lz-wallet-meta i { margin-right: .35rem; opacity: .85; }
.lz-wallet-prodi { font-size: .85rem; opacity: .9; }

/* Ringkasan di dasar banner */
.lz-wallet-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.lz-wallet-stats > div { padding: .8rem 1rem; border-radius: 16px; background: rgba(4, 52, 74, .28); border: 1px solid rgba(255, 255, 255, .22); display: flex; flex-direction: column; min-width: 0; }
.lz-wallet-stats small { opacity: .8; font-weight: 600; font-size: .78rem; }
.lz-wallet-stats strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lz-wallet-stats span { font-size: .78rem; opacity: .85; }
@media (max-width: 767.98px) {
  .lz-wallet { grid-template-columns: 1fr; border-radius: 22px; gap: 1.1rem; }
}

/* Banner identitas bergaya kartu (registrasi/biodata/view, partial _kartu-identitas). Gradasi dan watermark logo UNS. */
.id-card { position: relative; overflow: hidden; padding: clamp(1.1rem, 2.5vw, 1.6rem); border-radius: 26px; color: #fff; background: var(--uns-grad); box-shadow: 0 24px 48px -28px rgba(15, 30, 60, .65); }
.id-card::before { content: ""; position: absolute; width: 340px; height: 340px; right: -110px; top: -170px; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; }
.id-card > * { position: relative; z-index: 1; }
.id-card-watermark { position: absolute !important; z-index: 0 !important; right: 3%; bottom: -14%; width: 280px; height: 280px; object-fit: contain; opacity: .1; filter: brightness(0) invert(1); pointer-events: none; }
.id-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem; margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.id-card-brand i { margin-right: .45rem; }
.id-card-kind { opacity: .85; }
.id-card-body { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 300px); align-items: center; gap: 1.25rem 1.5rem; }
.id-card-foto { width: 96px; height: 128px; object-fit: cover; object-position: center top; border-radius: 16px; border: 3px solid rgba(255, 255, 255, .9); background: #cdeaf6; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.id-card-data { min-width: 0; }
.id-card-nama { color: inherit; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .35rem; overflow-wrap: anywhere; }
.id-card-nim { display: inline-block; margin-bottom: .55rem; padding: .15rem .7rem; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--uns-cerulean-ink); font-weight: 800; font-size: .95rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.id-card-prodi { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; font-weight: 600; opacity: .95; }
.id-card-prodi i { margin-top: .15rem; opacity: .85; }
.id-card-kunci { display: grid; gap: .6rem; margin: 0; padding: .85rem 1rem; border-radius: 16px; background: rgba(4, 52, 74, .3); border: 1px solid rgba(255, 255, 255, .25); }
.id-card-kunci dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.id-card-kunci dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.id-card-kosong { opacity: .6; }
.id-card .lz-mask-btn { color: #fff; opacity: .85; }
.id-card .lz-mask-btn:hover, .id-card .lz-mask-btn:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; }
.id-card-aksi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .25); }
/* Tombol di atas gradasi biru: aksi utama putih, aksi sekunder transparan bergaris */
.id-card-aksi .btn-primary { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--uns-cerulean-ink); --bs-btn-hover-bg: #e3f4fb; --bs-btn-hover-border-color: #e3f4fb; --bs-btn-hover-color: var(--uns-cerulean-ink); --bs-btn-active-bg: #cdeaf6; --bs-btn-active-color: var(--uns-cerulean-ink); }
.id-card-aksi .btn-secondary { --bs-btn-bg: rgba(255, 255, 255, .14); --bs-btn-border-color: rgba(255, 255, 255, .55); --bs-btn-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .26); --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .3); --bs-btn-active-color: #fff; --bs-btn-active-border-color: #fff; }
@media (max-width: 991.98px) {
  .id-card-body { grid-template-columns: auto minmax(0, 1fr); }
  .id-card-kunci { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 575.98px) {
  .id-card { border-radius: 22px; }
  .id-card-foto { width: 76px; height: 102px; }
  .id-card-aksi > .btn { flex: 2 1 auto; white-space: nowrap; }
  .id-card-aksi > .dropdown { flex: 1 1 auto; }
  .id-card-aksi .dropdown > .btn { width: 100%; }
}

/* Latar "aurora": bercak warna lembut di balik shell aplikasi, menggantikan abu-abu polos (dirender main.php untuk semua halaman ber-sidebar).
   z-index -1 (bukan menaikkan z-index shell) supaya offcanvas sidebar dan backdrop Bootstrap tidak terjebak stacking context. */
.lz-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lz-aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.lz-aurora .a1 { width: 380px; height: 380px; left: -150px; top: -170px; background: var(--uns-sky); opacity: .12; }   /* biru dibuat tipis: mendekati putih */
.lz-aurora .a2 { width: 500px; height: 500px; right: -140px; top: -60px; background: #fbb6e6; }
.lz-aurora .a3 { width: 460px; height: 460px; left: 42%; bottom: -200px; background: var(--uns-yellow); opacity: .3; }
[data-bs-theme="dark"] .lz-aurora span { opacity: .22; }
[data-bs-theme="dark"] .lz-aurora .a3 { opacity: .12; }
@media (max-width: 767.98px) { .lz-aurora span { filter: blur(70px); } .lz-aurora .a1, .lz-aurora .a2 { width: 340px; height: 340px; } .lz-aurora .a3 { width: 300px; height: 300px; } }
/* Latar body Bootstrap menutupi elemen ber-z-index negatif; warna dasar tetap tampil lewat <html> (theme.css). */
body:has(> .lz-aurora) { background: transparent; }

/* Sidebar berkaca (blur): latar semi-transparan + backdrop-filter sehingga bercak .lz-aurora di belakangnya tampak kabur.
   !important karena theme.css memaksa warna solid pada .app-sidebar. Offcanvas (layar < 992px) dibuat lebih pekat agar menu tetap terbaca. */
.app-sidebar {
  background-color: rgba(255, 255, 255, .6) !important;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 16px 44px -20px rgba(15, 30, 60, .28);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
}
[data-bs-theme="dark"] .app-sidebar { background-color: rgba(22, 30, 48, .58) !important; border-color: rgba(255, 255, 255, .1); box-shadow: 0 16px 44px -20px rgba(0, 0, 0, .65); }
@media (max-width: 991.98px) {
  .app-sidebar { background-color: rgba(255, 255, 255, .88) !important; }
  [data-bs-theme="dark"] .app-sidebar { background-color: rgba(22, 30, 48, .9) !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-sidebar, [data-bs-theme="dark"] .app-sidebar { background-color: var(--lz-surface) !important; }
}

/* Kartu bantuan di dasar sidebar (.promo bawaan template): daftar kontak WhatsApp tanpa bullet. */
.promo .promo-kontak { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; color: inherit; }
.promo .promo-kontak small { display: block; margin-bottom: .3rem; color: var(--lz-text-3); font-weight: 600; }
.promo .promo-kontak .btn { font-size: .85rem; padding-inline: .5rem; white-space: nowrap; }
/* Ilustrasi kartu bantuan: lebih pendek (agar kartu muat di layar rendah) dan memakai gradasi palet resmi. */
.promo .promo-art { height: 68px; font-size: 2rem; background: var(--uns-grad); }
/* Tombol WhatsApp hijau. #168F4F dipilih (bukan #25D366 asli) agar teks putih tetap berkontras >= 4,5:1. */
.btn-wa { --bs-btn-bg: #168F4F; --bs-btn-border-color: #168F4F; --bs-btn-color: #fff; --bs-btn-hover-bg: #117a42; --bs-btn-hover-border-color: #117a42; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0e6a39; --bs-btn-active-border-color: #0e6a39; --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: 22, 143, 79; }
/* Tombol Telegram biru. #1877A8 dipilih (bukan #26A5E4 asli) agar teks putih tetap berkontras >= 4,5:1. */
.btn-tg { --bs-btn-bg: #1877A8; --bs-btn-border-color: #1877A8; --bs-btn-color: #fff; --bs-btn-hover-bg: #136590; --bs-btn-hover-border-color: #136590; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0f547a; --bs-btn-active-border-color: #0f547a; --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: 24, 119, 168; }