* {
	font-family: 'Inter', sans-serif;
}

body {
	scroll-behavior: smooth;
}

.navbar-transition {
	transition: all 0.3s ease-in-out;
}

.hero-overlay {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.4) 100%);
}

@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-up {
	animation: fadeUp 0.8s ease-out forwards;
}

/* Card infografik vertikal */
.hero-stat-card {
	backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	transition: all 0.3s ease;
	border-radius: 1rem;
}

.hero-stat-card:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateX(5px);
	border-color: rgba(59, 130, 246, 0.7);
}

/* Menu mobile - selalu solid/terang */
.mobile-menu {
	transition: all 0.3s ease;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	background: white;
	backdrop-filter: blur(0px);
	border-radius: 1rem;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.mobile-menu.open {
	max-height: 500px;
	opacity: 1;
}

/* Slideshow background */
.hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 1s ease-in-out;
}

.hero-bg.fade-out {
	opacity: 0;
}

.hero-bg.fade-in {
	opacity: 1;
}

.nav-link {
	position: relative;
}

.nav-link:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.active-menu {
	background: rgba(255, 255, 255, 0.20);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.navbar-scrolled .nav-link:hover {
	background: #eff6ff;
	color: #2563eb;
}

.navbar-scrolled .active-menu {
	background: #eff6ff;
	color: #2563eb;
	border: 1px solid #bfdbfe;
}

.navbar-scrolled #login-menu {
	background: #2563eb;
	color: #ffffff;
}

.navbar-scrolled #login-menu:hover {
	background: #1d4ed8;
	color: #ffffff;
}

.active-login-menu {
	background: #2563eb !important;
	color: #ffffff !important;
}