html, body { background-color: #020617 !important; }
/* Sembunyikan body sampai Tailwind siap (opsional) */
body { opacity: 0; transition: opacity 0.2s; }

/* Setting awal Mega Menu: Hilang & Transparan */
.mega-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none; /* Biar nggak nge-block klik saat sembunyi */
}

/* Saat di-hover: Muncul & Bisa di-klik */
.group:hover .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Efek Kaca Buram buat Menu */
.glass-menu {
	background: rgba(15, 23, 42, 0.95) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 2px solid rgba(34, 197, 94, 0.5); /* Garis hijau Yukagen di bawah */
}

@keyframes float {
	0% { transform: translateY(0px) translateX(20px); opacity: 0; }
	100% { transform: translateY(0px) translateX(0px); opacity: 1; }
}

.efek_masuk_dari_kiri {
    /* Pakai ease-out biar pas mau berhenti gerakannya melambat (lebih natural) */
    animation: slideFromLeft 0.8s ease-out forwards;
    /* Optimasi GPU HP */
    will-change: transform, opacity;
}

.efek_masuk_dari_kanan {
    animation: slideFromRight 0.8s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes slideFromLeft {
    0% { 
        transform: translateX(-40px); 
        opacity: 0; 
    }
    100% { 
        transform: translateX(0); 
        opacity: 1; 
    }
}

@keyframes slideFromRight {
    0% { 
        transform: translateX(40px); 
        opacity: 0; 
    }
    100% { 
        transform: translateX(0); 
        opacity: 1; 
    }
}

@media print {
	body {
		margin: 0 !important;
		padding: 0 !important;
	}

	@page {
		margin: 5mm !important; /* bisa 0mm jika mau full */
	}

	.container, .wrap, #page {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.no-print { 
		display: none; 
	}
}