/* Tambahan milik proyek untuk layout publik (glass). Hanya dimuat oleh LearnPublicAsset.
   glass.css adalah salinan template dan tidak diedit di sini. */

/* Logo UNS di merek navbar/footer (template memakai .brand-mark) */
.gl-bar .brand-logo, .gl-footer .brand-logo { width: 32px; height: 32px; }
.gl-bar .brand, .gl-footer .brand { gap: .6rem; }

/* Pesan flash di bawah navbar melayang */
.gl-flash { position: relative; z-index: 2; max-width: 1172px; margin: 0 auto; padding: 6.5rem 16px 0; }

/* Tiga banner pertama menumpuk di bawah navbar; flash tidak boleh menggeser tinggi hero */
.gl-flash + .gl-hero { padding-top: 1.5rem; min-height: 0; }

/* Dropdown menu: ikon kecil bertema, label tunggal */
.glass-menu .dropdown-item span > b { font-weight: 700; }
.glass-menu .dropdown-item.active, .glass-menu .dropdown-item:active { background: var(--lz-primary-soft); color: var(--lz-text); }

/* Aplikasi terkait: gambar ilustrasi di atas kartu kaca */
.gl-app { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.gl-app img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.gl-app .gl-app-body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.gl-app h3 { margin: 0 0 .35rem; }
.gl-app .gl-more { margin-top: auto; font-size: .85rem; font-weight: 700; color: var(--lz-primary-ink); }

/* Tile layanan / jalur masuk yang dapat diklik */
a.gl-tile { display: block; color: inherit; text-decoration: none; }
a.gl-tile .gl-more { font-size: .85rem; font-weight: 700; color: var(--lz-primary-ink); }

/* Daftar jalur masuk di panel samping langkah-langkah */
.gl-roles { height: auto; position: sticky; top: 6.5rem; }
.gl-roles h3 { margin-top: 0; }
.gl-roles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.gl-roles a { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 14px; color: var(--lz-text); text-decoration: none; transition: background-color .15s; }
.gl-roles a:hover, .gl-roles a:focus-visible { background: rgba(15, 111, 222, .1); }
.gl-roles a b { display: block; font-size: .92rem; line-height: 1.2; }
.gl-roles a small { display: block; color: var(--lz-text-3); font-weight: 500; font-size: .76rem; }
.gl-roles a .bi-chevron-right { margin-left: auto; color: var(--lz-muted); }
@media (max-width: 767.98px) { .gl-roles { position: static; } }

/* Berita: tanggal dan pembaca di kaki kartu */
.gl-news-body .gl-meta { margin-top: .75rem; font-size: .8rem; color: var(--lz-muted); font-weight: 600; }
.gl-news-prodi { color: var(--lz-primary-ink); font-weight: 700; font-size: .8rem; }
.gl-news-cover .gs-tag { position: absolute; left: 14px; top: 14px; padding: .2rem .7rem; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #0b1220; font-weight: 700; }
.gl-news-cover.pink { background: linear-gradient(135deg, #8f2268, #b8357f 60%, #d65fb0); }
a.gl-news { padding: 0; }

/* Footer: kontak */
.gl-footer .gl-contact { display: grid; gap: .25rem; font-size: .85rem; color: var(--lz-text-3); }
.gl-footer .gl-contact a { font-weight: 600; }

/* Banner sedikit lebih tinggi dari template: teks Indonesia lebih panjang dan tombol tidak boleh terpotong */
@media (min-width: 860px) { .gl-stage .card-stack { --stack-h: 560px; } }

/* Warna biru mengikuti palet resmi (Sky Blue / Cerulean / Chrome Yellow); menimpa gradasi biru bawaan template glass.css */
.gb-blue { background: var(--uns-grad); }
.gb-blue .btn-light { color: var(--uns-cerulean-ink); }
.gl-cta-band { background: var(--uns-grad); }
.gl-cta-band .btn-light { color: var(--uns-cerulean-ink); }
.gl-news-cover.blue { background: linear-gradient(135deg, #0E7DA7, #1FABE1); }
.gb-yellow { background: linear-gradient(120deg, #F2CB00 0%, #FFDB07 60%, #FFE653 100%); }

/* ---------- Halaman login/registrasi (auth): kartu dua kolom, diadaptasi dari .auth-* template public.css ---------- */
.auth-wrap { display: grid; place-items: start center; padding: 7rem 16px 4rem; }
/* Bila ada pesan flash di atasnya, flash sudah memberi jarak dari navbar */
.gl-flash + .auth-wrap { padding-top: 1.5rem; }
.auth-card { width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); overflow: hidden; border-radius: 28px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.auth-side { background: var(--uns-grad); color: #fff; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; justify-content: center; }
.auth-side h2 { color: #fff; font-size: 1.7rem; font-weight: 800; margin: 0; }
.auth-side p { margin: 0; opacity: .94; }
.auth-steps { list-style: none; counter-reset: auth; margin: .5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.auth-steps li { counter-increment: auth; position: relative; padding-left: 2.9rem; display: grid; opacity: .8; }
.auth-steps li::before { content: counter(auth); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .45); }
.auth-steps li.is-current { opacity: 1; }
.auth-steps li.is-current::before { background: #fff; color: var(--uns-cerulean-ink); border-color: #fff; }
.auth-steps b { font-size: 1rem; }
.auth-steps span { font-size: .85rem; opacity: .9; }
.auth-form { padding: 2.5rem; }
.auth-form h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: .35rem; }
.auth-form .sub { color: var(--lz-text-3); margin-bottom: 1.5rem; }
.auth-alt { text-align: center; margin: 1.5rem 0 0; color: var(--lz-text-3); }
/* Tombol mata di kolom PIN (gaya dari bootstrap-skin: .pw-field/.pw-toggle) */
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 3rem; }
.pw-field .invalid-feedback { position: static; }
.pw-toggle { position: absolute; right: 6px; top: 8px; transform: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--lz-muted); display: grid; place-items: center; }
.pw-toggle:hover, .pw-toggle:focus-visible { background: var(--lz-hover); color: var(--lz-primary-ink); }
/* Captcha hitung: gambar, tulisan "Hasilnya =", lalu kolom jawaban dalam satu baris */
.lz-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
.lz-captcha img { height: 48px; border-radius: 10px; border: 1px solid var(--lz-border); background: #fff; cursor: pointer; }
.lz-captcha-q { font-weight: 700; color: var(--lz-text-2); }
.lz-captcha .form-control { flex: 1 1 120px; min-width: 0; width: auto; }
@media (max-width: 767.98px) {
  .auth-wrap { padding-top: 6.5rem; }
  .gl-flash + .auth-wrap { padding-top: 1.25rem; }
  .auth-card { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-form { padding: 1.75rem 1.25rem; }
}
/* Saat PIN salah, ikon peringatan Bootstrap bergeser ke kiri agar tidak menumpuk dengan tombol mata */
.pw-field .form-control.is-invalid { padding-right: 5.5rem; background-position: right calc(.375em + 2.9rem) center; }

/* ---------- Halaman isi layout publik (setelah login Registrasi Maru) ---------- */
.gl-page { padding-top: 7rem; padding-bottom: 4rem; }
.gl-flash + .gl-page { padding-top: 1.5rem; }
@media (max-width: 767.98px) { .gl-page { padding-top: 6.5rem; } .gl-flash + .gl-page { padding-top: 1.25rem; } }
.gl-page .gl-tile { height: auto; }
.gl-page .row > [class*="col"] > .gl-tile { height: 100%; }

/* Penunjuk langkah registrasi (partial default/_stepper.php) */
.gl-stepper { margin-bottom: 1.25rem; }
.gl-stepper ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.gl-stepper li { flex: 1 1 180px; }
.gl-stepper a { display: flex; align-items: center; gap: .65rem; padding: .6rem .9rem; border-radius: 16px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--lz-text-2); font-weight: 700; text-decoration: none; transition: background-color .15s, color .15s; }
.gl-stepper a:hover, .gl-stepper a:focus-visible { background: var(--lz-hover); color: var(--lz-primary-ink); }
.gl-step-no { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; background: var(--lz-gray); color: var(--lz-text-3); }
.gl-stepper .is-current a { background: var(--uns-grad); color: #fff; border-color: transparent; }
.gl-stepper .is-current .gl-step-no { background: #fff; color: var(--uns-cerulean-ink); }
.gl-stepper .is-done .gl-step-no { background: var(--lz-green-soft); color: var(--lz-green-ink); }

/* Latar gradasi layout publik dibuat lebih tipis (selaras dengan latar aurora layout aplikasi): biru paling pucat, pink dan kuning diredam.
   Menimpa nilai bawaan template glass.css yang tidak diedit. */
.gl-blob { opacity: .3; }
.gl-blob.b1 { width: 400px; height: 400px; left: -150px; top: -150px; background: var(--uns-sky); opacity: .12; }
.gl-blob.b2 { opacity: .26; }
.gl-blob.b3 { opacity: .2; }
.gl-blob-sec { opacity: .16; }
[data-bs-theme="dark"] .gl-blob { opacity: .2; }
[data-bs-theme="dark"] .gl-blob.b1 { opacity: .1; }
[data-bs-theme="dark"] .gl-blob.b3 { opacity: .1; }
[data-bs-theme="dark"] .gl-blob-sec { opacity: .12; }

/* Wizard biodata di layout publik: kartu kaca seperti .gl-tile (di layout aplikasi memakai kartu putih .app-content) */
.gl-page .lz-wizard { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--glass-shadow); }
.gl-page .tbl-mhs-biodata-update-data-utama > .profil-card { background: var(--glass-bg-strong); border-color: var(--glass-border); }