/**
 * DapurKode - CSS Perbaikan Navbar
 * Versi: 1.0 (Oktober 2025)
 * 
 * File ini berisi perbaikan khusus untuk navbar mengambang
 */

/* Efek mengambang untuk navbar */
nav.fixed.top-8 {
    padding: 0;
    margin-top: 20px;
    margin-bottom: 15px;
}

/* Mengatur transisi untuk navbar */
nav .max-w-4xl {
    transition: all 0.3s ease;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 8px 10px rgba(0, 0, 0, 0.02),
        0 0 0 1px rgba(0, 0, 0, 0.01);
}

/* Efek hover pada navbar */
nav .max-w-4xl:hover {
    box-shadow: 0 14px 30px rgba(0, 27, 183, 0.08),
        0 10px 15px rgba(0, 27, 183, 0.04), 0 0 0 1px rgba(0, 27, 183, 0.02);
    transform: translateY(-1px);
}

/* Memperbaiki tampilan link navigasi */
.nav-link,
.nav-link-active {
    border: none !important;
    border-bottom: none !important;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
}

.nav-link:hover {
    transform: translateY(-1px);
}

.nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #001bb7, #2563eb);
    transition: width 0.3s ease;
    opacity: 0.8;
    border-radius: 2px;
}

.nav-link:hover::before {
    width: 60%;
}

/* Centered menu styling */
.space-x-10 {
    justify-content: center;
}

.space-x-10 a {
    flex: 0 0 auto;
    margin: 0 0.5rem;
}

/* Indikator untuk navigasi aktif */
.nav-link-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, #ff9d00, #ffcf71);
    border-radius: 2px;
    opacity: 0.9;
}

/* Efek glassmorphism pada navbar */
.backdrop-blur-md {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* Animasi subtle untuk navbar saat scroll */
@keyframes navbar-appear {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

nav.sticky:not(.hidden) {
    animation: navbar-appear 0.4s ease-out;
}

/* Ensure navbar has background when scrolled */
nav.sticky .max-w-4xl {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 8px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Dropdown container styling */
.navbar-container {
    overflow: visible !important; /* Penting untuk menampilkan dropdown di luar container */
}

/* Perbaikan untuk dropdown */
.dropdown-content {
    position: absolute;
    z-index: 999 !important; /* Z-index yang lebih tinggi */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 10rem;
    max-height: 80vh;
    overflow-y: auto;
}

/* Style khusus untuk dropdown notifikasi */
.notification-dropdown {
    width: 320px !important;
    right: 0;
}

/* Animasi dropdown */
@keyframes dropdown-enter {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dropdown-leave {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

.dropdown-enter {
    animation: dropdown-enter 0.2s ease-out forwards;
}

.dropdown-leave {
    animation: dropdown-leave 0.15s ease-in forwards;
}

/* Style untuk menu item di dropdown */
.menu-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #4b5563;
    transition: all 0.2s ease;
}

.menu-item:hover {
    background-color: rgba(243, 244, 246, 0.7);
    color: #1f2937;
}

.menu-icon {
    height: 1.75rem;
    width: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    margin-right: 0.75rem;
    transition: transform 0.3s;
}

.menu-item:hover .menu-icon {
    transform: scale(1.1);
}

/* Scrollbar untuk dropdown */
.dropdown-content::-webkit-scrollbar {
    width: 4px;
}

.dropdown-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}