/* SweetAlert2 harus selalu tampil di atas modal/overlay kustom manapun (mis. .admin-modal-backdrop, .auth-modal-backdrop) — beberapa modal kustom di situs ini pakai z-index lebih tinggi dari default SweetAlert2 (1060), jadi tanpa ini alert bisa tampil "terkubur" di belakang modal dan tidak bisa diklik. */ .swal2-container { z-index: 20000 !important; } :root { --primary-color: #173350; --accent-color: #0C7A6E; --coral-color: #E2643B; --amber-color: #D98A2B; --bg-color: #f8f9fc; --text-dark: #5a5c69; --transition-speed: 0.4s; --transition-curve: cubic-bezier(0.25, 0.8, 0.25, 1); } html { scroll-behavior: smooth; /* Selalu sisakan ruang scrollbar, supaya lebar halaman tidak "kedip"/geser waktu pindah dari halaman panjang (ada scrollbar) ke halaman pendek (belum ada scrollbar) atau sebaliknya -- misalnya dari dashboard.html ke diagnostik.html. Catatan: cukup pakai "overflow-y: scroll" saja untuk ini -- menambahkan "scrollbar-gutter: stable" di atasnya bikin sebagian browser (mis. Chrome di Windows) menyisakan ruang scrollbar dua kali lipat, sehingga muncul dua jalur scrollbar berdampingan di tepi kanan halaman. */ overflow-y: scroll; /* overflow-x taruh di sini (bukan di body) -- kalau ditaruh di body, overflow-y body ikut "berubah" jadi auto (aturan CSS: salah satu sumbu di-set non-visible bikin sumbu lain yang masih visible ikut jadi auto), sehingga body diam-diam jadi scroll container sendiri. Akibatnya elemen position:sticky (topbar/navbar) jadi nempel ke body yang tidak pernah betulan di-scroll, bukan ke halaman -- jadi terlihat ikut ke-scroll ke atas alih-alih tetap terkunci. */ overflow-x: hidden; } body { font-family: 'Poppins', sans-serif; background-color: var(--bg-color); color: var(--text-dark); } /* Scrollbar-nya sudah selalu ditampilkan lewat "overflow-y: scroll" di (lihat komentar di atas), jadi kompensasi lebar scrollbar yang otomatis ditambahkan Bootstrap ke body (padding-right) waktu modal Masuk/Daftar dibuka jadi tidak diperlukan -- malah bikin halaman kelihatan geser sedikit ke kiri lalu balik lagi waktu modal ditutup. "overflow: hidden" bawaan Bootstrap di (dipasang lewat inline style oleh JS-nya, bukan class CSS) JUGA perlu dibatalkan di sini -- bukan cuma soal double-scrollbar. Situs ini scroll di level (bukan , lihat "overflow-y: scroll" di atas), sementara sendiri TIDAK PERNAH discroll (scrollTop-nya selalu 0). Kalau ikut jadi "overflow: hidden" waktu modal dibuka, dia jadi ancestor ber-overflow-non-visible yang PALING DEKAT dengan navbar (lebih dekat dari ), sehingga "position: sticky" pada navbar (lihat .navbar-cakar) jadi berpatokan ke scrollTop yang selalu 0 itu, bukan ke scrollTop yang sebenarnya sedang discroll peserta -- navbar-nya jadi lepas dari "nempel" dan balik ke posisi normal di dokumen (kelihatan seperti halaman "naik" tiba-tiba waktu dialog dibuka, atau navbar-nya malah hilang kalau peserta lagi scroll jauh ke bawah). "overflow:visible" di sini mengembalikan sebagai satu-satunya ancestor ber-overflow-non-visible, supaya sticky-nya kembali berpatokan ke scroll yang benar -- -nya sendiri tetap terkunci lewat "cn-modal-scroll-lock" di bawah, jadi halaman di baliknya tetap tidak bisa ikut discroll peserta selama dialog masih terbuka. */ body.modal-open { padding-right: 0 !important; overflow: visible !important; } /* SweetAlert2 melakukan hal yang PERSIS SAMA seperti modal Bootstrap di atas begitu dialognya (Swal.fire) terbuka -- diam-diam menambahkan "padding-right" ke sendiri (lewat inline style, bukan class) untuk "mengompensasi" scrollbar yang dia kira baru hilang. Tapi di situs ini scrollbar-nya TIDAK PERNAH hilang -- dia selalu ada di ("overflow-y: scroll" di atas, dan waktu dialog SweetAlert dibuka pun -nya tidak disentuh) -- jadi padding tambahan itu cuma bikin halaman kelihatan geser sedikit ke kiri begitu dialognya muncul, lalu balik lagi begitu ditutup. "!important" di sini menang lawan inline style yang dipasang SweetAlert2, jadi paddingnya dipaksa selalu 0 -- konsisten dengan alasan body.modal-open di atas. */ body { padding-right: 0 !important; } /* Ternyata paddingnya bukan satu-satunya biang keladi -- SweetAlert2 JUGA menambahkan CSS-nya SENDIRI (bukan cuma inline style), yaitu aturan "body.swal2-shown { overflow: hidden; }" (dipasang lewat