/* Side Float Nav — navbar melayang berbentuk pill */

.sfn-nav {
	--sfn-bg: #111827;
	--sfn-bg-alpha: 92%;
	--sfn-icon: #e5e7eb;
	--sfn-active-bg: #f59e0b;
	--sfn-active-icon: #111827;
	--sfn-size: 44px;
	--sfn-icon-size: 20px;
	--sfn-gap: 6px;
	--sfn-pad: 6px;
	--sfn-x: 16px;
	--sfn-y: 50%;
	--sfn-z: 9990;
	--sfn-m-size: 40px;
	--sfn-m-offset: 16px;

	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: inherit;
	animation: sfn-in .5s ease both;
}

.sfn-nav *,
.sfn-nav *::before,
.sfn-nav *::after {
	box-sizing: border-box;
}

@keyframes sfn-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Posisi ---------- */
.sfn-nav--fixed {
	position: fixed;
	z-index: var(--sfn-z);
	top: var(--sfn-y);
	transform: translateY(-50%);
}

.sfn-nav--fixed.sfn-pos-right { right: var(--sfn-x); left: auto; }
.sfn-nav--fixed.sfn-pos-left  { left: var(--sfn-x);  right: auto; }

.sfn-nav--static {
	position: relative;
	display: inline-block;
}

/* ---------- Pill ---------- */
.sfn-nav .sfn-list {
	list-style: none;
	margin: 0;
	padding: var(--sfn-pad);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sfn-gap);
	border-radius: 999px;
	background: var(--sfn-bg);
	background: color-mix(in srgb, var(--sfn-bg) var(--sfn-bg-alpha), transparent);
}

.sfn-nav.sfn-blur .sfn-list {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.sfn-nav.sfn-shadow .sfn-list {
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .15);
}

.sfn-nav.sfn-horizontal .sfn-list {
	flex-direction: row;
}

.sfn-nav .sfn-li {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfn-nav .sfn-li::before,
.sfn-nav .sfn-li::marker {
	content: none;
}

/* ---------- Tombol ---------- */
.sfn-nav .sfn-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sfn-size);
	height: var(--sfn-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: 0;
	background: transparent;
	color: var(--sfn-icon);
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
	-webkit-tap-highlight-color: transparent;
}

.sfn-nav .sfn-item:hover,
.sfn-nav .sfn-item:focus {
	background: rgba(255, 255, 255, .14);
	color: var(--sfn-icon);
	text-decoration: none;
}

.sfn-nav .sfn-item:focus-visible {
	outline: 2px solid var(--sfn-active-bg);
	outline-offset: 2px;
}

.sfn-nav .sfn-item.is-active,
.sfn-nav .sfn-item.is-active:hover,
.sfn-nav .sfn-item.is-active:focus {
	background: var(--sfn-active-bg);
	color: var(--sfn-active-icon);
}

.sfn-nav .sfn-item:active {
	transform: scale(.92);
}

/* Ikon */
.sfn-nav .sfn-item svg,
.sfn-nav .sfn-item i {
	display: block;
	width: var(--sfn-icon-size);
	height: var(--sfn-icon-size);
	font-size: var(--sfn-icon-size);
	line-height: 1;
	text-align: center;
	color: inherit;
}

.sfn-nav .sfn-item svg:not(.sfn-svg) {
	fill: currentColor;
}

.sfn-nav .sfn-item .sfn-txt {
	font-size: calc(var(--sfn-icon-size) * .9);
	font-weight: 600;
	line-height: 1;
}

/* ---------- Label (tooltip) ---------- */
.sfn-nav .sfn-label {
	position: absolute;
	top: 50%;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--sfn-bg);
	color: var(--sfn-icon);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) scale(.96);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.sfn-nav.sfn-pos-right .sfn-label { right: calc(100% + 12px); left: auto; }
.sfn-nav.sfn-pos-left  .sfn-label { left: calc(100% + 12px);  right: auto; }

.sfn-nav:not(.sfn-has-labels) .sfn-label {
	display: none;
}

.sfn-nav .sfn-item:hover .sfn-label,
.sfn-nav .sfn-item:focus-visible .sfn-label {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) scale(1);
}

/* Horizontal (mode static): label muncul di atas */
.sfn-nav.sfn-horizontal .sfn-label {
	top: auto;
	right: auto;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) scale(.96);
}

.sfn-nav.sfn-horizontal .sfn-item:hover .sfn-label,
.sfn-nav.sfn-horizontal .sfn-item:focus-visible .sfn-label {
	transform: translateX(-50%) scale(1);
}

/* Layar sentuh: tanpa tooltip */
@media (hover: none) {
	.sfn-nav .sfn-label { display: none; }
}

/* ---------- Menu yang ID-nya tidak ada di halaman ---------- */
.sfn-nav[data-hide-missing="1"] .sfn-li.sfn-missing {
	display: none;
}

.sfn-nav.sfn-empty {
	display: none !important;
}

/* ---------- Mobile (class ditambahkan oleh JS sesuai titik pindah) ---------- */
.sfn-nav--fixed.sfn-is-mobile .sfn-item {
	width: var(--sfn-m-size);
	height: var(--sfn-m-size);
}

/* Mobile: vertikal di sisi layar */
.sfn-nav--fixed.sfn-is-mobile.sfn-m-side.sfn-pos-right { right: var(--sfn-m-offset); }
.sfn-nav--fixed.sfn-is-mobile.sfn-m-side.sfn-pos-left  { left: var(--sfn-m-offset); }

/* Mobile: horizontal di bawah layar */
.sfn-nav--fixed.sfn-is-mobile.sfn-m-bottom {
	top: auto;
	right: auto;
	left: 50%;
	bottom: calc(var(--sfn-m-offset) + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	max-width: calc(100vw - 24px);
}

.sfn-nav--fixed.sfn-is-mobile.sfn-m-bottom .sfn-list {
	flex-direction: row;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sfn-nav--fixed.sfn-is-mobile.sfn-m-bottom .sfn-list::-webkit-scrollbar {
	display: none;
}

.sfn-nav--fixed.sfn-is-mobile.sfn-m-bottom .sfn-label {
	display: none;
}

/* ---------- Preferensi gerak & cetak ---------- */
@media (prefers-reduced-motion: reduce) {
	.sfn-nav { animation: none; }
	.sfn-nav .sfn-item,
	.sfn-nav .sfn-label { transition: none; }
}

@media print {
	.sfn-nav { display: none !important; }
}