/* ===================== */
/* Glossy Navbar Styling */
/* ===================== */
.navbar {
   background: var(--gradient-primary) !important;
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border-color);
   padding: 1rem 0;
   box-shadow: var(--shadow-lg);
   position: fixed; /* biar selalu di atas */
   top: 0;
   left: 0;
   width: 100%;
   z-index: 2000; /* lebih tinggi dari container biasa */
   overflow: visible !important; /* penting biar dropdown bisa muncul */
}

/* Tambahkan offset agar konten tidak ketiban navbar */
body {
   padding-top: 80px; /* sesuaikan tinggi navbar */
}

/* Glossy shine sweeping effect */
.navbar::after {
   content: "";
   position: absolute;
   top: 0;
   left: -50%;
   width: 200%;
   height: 100%;
   background: linear-gradient(120deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 60%);
   transform: skewX(-20deg);
   animation: shine 6s infinite;
   pointer-events: none;
   z-index: 1;
}

@keyframes shine {
   0% {
      transform: translateX(-100%) skewX(-20deg);
   }
   100% {
      transform: translateX(100%) skewX(-20deg);
   }
}

/* Brand */
.navbar-brand {
   font-family: "Poppins", sans-serif !important;
   font-weight: 700;
   color: var(--text-light) !important;
   font-size: 1.5rem;
   text-decoration: none;
   position: relative;
   z-index: 2;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.navbar-brand:hover {
   color: var(--accent) !important;
   transform: scale(1.05);
   text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Toggler */
.navbar-toggler {
   border: 2px solid var(--accent);
   border-radius: 8px;
   padding: 0.5rem;
   background: rgba(58, 175, 169, 0.1);
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
   z-index: 2100;
}
.navbar-toggler:hover {
   background: var(--accent);
   transform: scale(1.05);
   box-shadow: var(--shadow-md);
}
.navbar-toggler:focus {
   box-shadow: 0 0 0 0.2rem rgba(58, 175, 169, 0.25);
}
.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2858,175,169,1%29' stroke-linecap='round' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Links */
.nav-link {
   font-family: "Inter", sans-serif !important;
   color: rgb(175, 175, 175);
   font-weight: 500;
   font-size: 0.95rem;
   padding: 0.75rem 1.25rem !important;
   margin: 0 0.25rem;
   border-radius: 12px;
   position: relative;
   overflow: hidden;
   z-index: 2;
   transition: all 0.3s ease;
}

/* glossy shine on nav-link */
.nav-link::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(120deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%);
   transform: skewX(-20deg);
   transition: left 0.6s ease;
   z-index: 1;
   pointer-events: none;
}
.nav-link:hover::before {
   left: 100%;
}

.nav-link:hover {
   color: var(--accent) !important;
   background: rgba(58, 175, 169, 0.15);
   backdrop-filter: blur(10px);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
}
.nav-link.active,
.dropdown-item.active {
   color: white;
   background: rgba(25, 98, 95, 0.608);
   backdrop-filter: blur(10px);
}

/* Dropdown */
.dropdown-menu {
   background: var(--gradient-primary);
   backdrop-filter: blur(20px);
   border: 1px solid var(--border-color);
   border-radius: 16px;
   box-shadow: var(--shadow-lg);
   padding: 0.75rem;
   margin-top: 0.5rem;
   animation: dropdownSlide 0.3s ease;

   position: absolute;
   z-index: 2500 !important; /* lebih tinggi dari navbar */
}

.dropdown-item {
   font-family: "Inter", sans-serif;
   color: var(--text-muted) !important;
   font-weight: 500;
   padding: 0.75rem 1rem;
   border-radius: 10px;
   margin-bottom: 0.25rem;
   transition: all 0.3s ease;
   z-index: 2501 !important;
}

@keyframes dropdownSlide {
   from {
      opacity: 0;
      transform: translateY(-10px) scale(1);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

.dropdown-item:hover {
   background: rgba(58, 175, 169, 0.2);
   color: var(--accent) !important;
   transform: translateX(4px);
   box-shadow: var(--shadow-sm);
}
.dropdown-divider {
   border-color: var(--border-color);
}

/* Responsive */
@media (max-width: 991.98px) {
   .navbar-collapse {
      background: var(--gradient-primary);
      backdrop-filter: blur(20px);
      border-radius: 16px;
      margin-top: 1rem;
      padding: 1rem;
      box-shadow: var(--shadow-lg);
      position: relative;
      z-index: 2200;
   }
   .nav-link {
      text-align: center;
      margin: 0.25rem 0;
   }

   .navbar::after {
      animation: none;
   }
}
@media (max-width: 576px) {
   .navbar-brand {
      font-size: 1.25rem;
   }
   .nav-link {
      font-size: 0.9rem;
      padding: 0.625rem 1rem !important;
   }

   .navbar::after {
      animation: none;
   }
}