/* =========================================================
   NAVBAR - panel notifikasi, menu akun, pencarian, sorotan baris
   Memakai token warna orbit.css (--o-*), jadi ikut berganti di mode gelap.
   ========================================================= */
:root {
	--nav-bayang-panel: 0 4px 10px rgba(15, 23, 42, .06), 0 20px 48px rgba(15, 23, 42, .16);
	--nav-sorot: rgba(139, 92, 246, .18);
	--nav-mark: #FEF08A;
	--nav-mark-teks: inherit;
}

/* Titik merah bawaan diganti lencana angka yang hanya muncul bila ada notifikasi baru. */
.topbar-notif::after { content: none; }
.topbar-ikon span[data-icon] { display: inline-grid; place-items: center; }
.lencana-notif {
	position: absolute; top: 1px; right: 0;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 999px; background: var(--o-merah); color: #fff;
	box-shadow: 0 0 0 2px var(--o-permukaan);
	font-size: 10px; font-weight: var(--fw-kuat); line-height: 17px; text-align: center;
	font-variant-numeric: tabular-nums;
}
.lencana-notif[hidden] { display: none; }
button.topbar-ikon[aria-expanded="true"] { background: var(--o-ungu-lembut); color: var(--o-ungu); }

button.topbar-avatar {
	border: 0; padding: 0; cursor: pointer; font-family: inherit;
	transition: box-shadow .2s ease, transform .2s ease;
}
button.topbar-avatar:hover, button.topbar-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--nav-sorot); }
.topbar-ikon:focus-visible, button.topbar-avatar:focus-visible { outline: 3px solid var(--nav-sorot); outline-offset: 1px; }

/* ---------- PANEL DROPDOWN ---------- */
.navbar-wadah { position: relative; display: flex; }
.panel-navbar {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
	width: 340px; max-width: calc(100vw - 24px);
	border: 1px solid var(--o-garis); border-radius: 14px;
	background: var(--o-permukaan); color: var(--o-teks);
	box-shadow: var(--nav-bayang-panel);
	transform-origin: top right;
	animation: panelNavbarMasuk .16s cubic-bezier(.22, .61, .36, 1);
}
.panel-navbar[hidden] { display: none; }
@keyframes panelNavbarMasuk { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.panel-navbar-kepala {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 14px 16px 10px; border-bottom: 1px solid var(--o-garis);
}
.panel-navbar-kepala strong { font-size: var(--fs-dasar); }
.panel-navbar-kepala small { color: var(--o-teks-lembut); font-size: var(--fs-kecil); }

.daftar-notifikasi { max-height: min(420px, 70vh); overflow-y: auto; padding: 6px; }
.item-notifikasi {
	display: flex; align-items: flex-start; gap: 11px; width: 100%;
	padding: 10px; border: 0; border-radius: 10px;
	background: transparent; color: inherit; text-align: left; cursor: pointer; font-family: inherit;
}
.item-notifikasi:hover, .item-notifikasi:focus-visible { background: var(--o-latar); outline: none; }
.ikon-notifikasi {
	flex: 0 0 34px; display: inline-grid; place-items: center; width: 34px; height: 34px;
	border-radius: 10px; --aurora-icon-size: 17px;
}
.notif-bahaya .ikon-notifikasi { background: #FFE4E9; color: var(--o-merah); }
.notif-peringatan .ikon-notifikasi { background: var(--o-jingga-lembut); color: var(--o-jingga); }
.notif-info .ikon-notifikasi { background: var(--o-biru-lembut); color: var(--o-biru); }
.isi-notifikasi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.isi-notifikasi strong { font-size: var(--fs-tabel); font-weight: var(--fw-tebal); }
.isi-notifikasi small { color: var(--o-teks-lembut); font-size: var(--fs-kecil); line-height: 1.45; overflow-wrap: anywhere; }
.notifikasi-kosong {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	margin: 0; padding: 26px 18px; color: var(--o-teks-lembut); font-size: var(--fs-tabel); text-align: center;
	--aurora-icon-size: 26px;
}
.notifikasi-kosong [data-icon] { color: var(--o-hijau); }

/* ---------- MENU AKUN ---------- */
.panel-profil { width: 250px; padding: 6px; }
.profil-navbar { display: flex; align-items: center; gap: 11px; padding: 10px 10px 12px; border-bottom: 1px solid var(--o-garis); margin-bottom: 6px; }
.avatar-besar {
	flex: 0 0 40px; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: linear-gradient(135deg, var(--o-ungu), var(--o-ungu-terang)); color: #fff; font-weight: var(--fw-kuat);
}
.profil-navbar div { display: flex; flex-direction: column; min-width: 0; }
.profil-navbar strong, .profil-navbar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-navbar strong { font-size: var(--fs-dasar); }
.profil-navbar small { color: var(--o-teks-lembut); font-size: var(--fs-kecil); }
.menu-profil[hidden] { display: none; }
.item-profil {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 9px 10px; border: 0; border-radius: 9px;
	background: transparent; color: var(--o-teks); font: inherit; font-size: var(--fs-tabel); font-weight: var(--fw-medium);
	text-align: left; cursor: pointer; --aurora-icon-size: 17px;
}
.item-profil [data-icon] { color: var(--o-teks-lembut); }
.item-profil:hover, .item-profil:focus-visible { background: var(--o-latar); outline: none; }
.item-keluar { margin-top: 4px; color: var(--o-merah); }
.item-keluar [data-icon] { color: var(--o-merah); }
.menu-profil + .item-keluar { border-top: 1px solid var(--o-garis); border-radius: 0 0 9px 9px; }

/* ---------- PENCARIAN ---------- */
body.cari-terbuka { overflow: hidden; }
.lapisan-cari {
	position: fixed; inset: 0; z-index: 90;
	display: flex; align-items: flex-start; justify-content: center;
	padding: 12vh 16px 16px;
	background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px);
	animation: lapisanCariMasuk .14s ease;
}
.lapisan-cari[hidden] { display: none; }
@keyframes lapisanCariMasuk { from { opacity: 0; } }
.kotak-cari {
	display: flex; flex-direction: column; width: 620px; max-width: 100%; max-height: 72vh;
	border: 1px solid var(--o-garis); border-radius: 16px;
	background: var(--o-permukaan); color: var(--o-teks); box-shadow: var(--nav-bayang-panel);
	overflow: hidden;
	animation: panelNavbarMasuk .18s cubic-bezier(.22, .61, .36, 1);
}
.kolom-cari { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--o-garis); --aurora-icon-size: 19px; }
.kolom-cari > [data-icon] { color: var(--o-teks-lembut); }
.kolom-cari input {
	flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--o-teks);
	font-size: var(--fs-sedang);
}
.kolom-cari input:focus { outline: 0; }
.kolom-cari input::-webkit-search-cancel-button { display: none; }
.kotak-cari kbd {
	display: inline-block; min-width: 20px; padding: 1px 6px;
	border: 1px solid var(--o-garis); border-bottom-width: 2px; border-radius: 5px;
	background: var(--o-latar); color: var(--o-teks-lembut);
	font: 600 11px/1.5 var(--font-utama); text-align: center;
}
.hasil-cari { flex: 1; overflow-y: auto; padding: 6px 8px 8px; overscroll-behavior: contain; }
.judul-grup-cari {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 10px 8px 5px; color: var(--o-teks-lembut);
	font-size: var(--fs-mikro); font-weight: var(--fw-kuat); letter-spacing: .08em; text-transform: uppercase;
}
.judul-grup-cari small { font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.item-cari {
	display: flex; align-items: center; gap: 11px; width: 100%;
	padding: 8px; border: 0; border-radius: 10px;
	background: transparent; color: inherit; text-align: left; cursor: pointer; font-family: inherit;
}
.item-cari.aktif { background: var(--o-ungu-lembut); }
.ikon-cari {
	flex: 0 0 32px; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
	background: var(--o-latar); color: var(--o-teks-lembut); --aurora-icon-size: 16px;
}
.item-cari.aktif .ikon-cari { background: var(--o-permukaan); color: var(--o-ungu); }
.isi-cari { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.isi-cari strong, .isi-cari small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isi-cari strong { font-size: var(--fs-tabel); font-weight: var(--fw-tebal); }
.isi-cari small { color: var(--o-teks-lembut); font-size: var(--fs-kecil); }
.isi-cari mark { border-radius: 3px; background: var(--nav-mark); color: var(--nav-mark-teks); }
.cari-kosong { margin: 0; padding: 28px 16px; color: var(--o-teks-lembut); font-size: var(--fs-tabel); text-align: center; }
.kaki-cari {
	display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 14px;
	border-top: 1px solid var(--o-garis); background: var(--o-latar);
	color: var(--o-teks-lembut); font-size: var(--fs-kecil);
}
.kaki-cari span { display: inline-flex; align-items: center; gap: 4px; }

/* Baris tabel yang dituju dari hasil pencarian berkedip lembut sebentar. */
@keyframes barisDisorot { 0%, 35% { background: var(--nav-sorot); } 100% { background: transparent; } }
tr.baris-disorot, tr.baris-disorot td { animation: barisDisorot 2.2s ease-out; }

@media (max-width:760px) {
	.panel-navbar { position: fixed; left: 12px; right: 12px; width: auto; max-width: none; }
	.lapisan-cari { padding: 10px; }
	.kotak-cari { max-height: calc(100vh - 20px); }
	.kaki-cari { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.panel-navbar, .lapisan-cari, .kotak-cari, tr.baris-disorot, tr.baris-disorot td { animation: none; }
}