/* =============================================================
   SDI TEKNOLOGI — navbar.css
   Glassmorphism navbar, nav links, theme toggle, hamburger menu.
   ============================================================= */

/* ─────────────────────────────────────────────
   GLASSMORPHISM NAVBAR
───────────────────────────────────────────── */
.glass-nav {
  background: rgba(11, 0, 20, 0.25);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    background var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth);
}

html:not(.dark) .glass-nav {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

/* Navbar scrolled state (added by JS) */
#navbar.scrolled,
#navbar.scrolled.glass-nav,
#navbar.scrolled .glass-nav {
  background: rgba(23, 5, 41, 0.90);
  border-bottom: 1px solid rgba(217, 2, 238, 0.20);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
html:not(.dark) #navbar.scrolled,
html:not(.dark) #navbar.scrolled.glass-nav,
html:not(.dark) #navbar.scrolled .glass-nav {
  background: rgba(255, 255, 255, 0.90);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Mobile dropdown menu styles */
#mobile-menu {
  background: rgba(23, 5, 41, 0.95);
  border: 1px solid rgba(217, 2, 238, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html:not(.dark) #mobile-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

/* ─────────────────────────────────────────────
   NAV LINK — underline animation
───────────────────────────────────────────── */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background: var(--clr-accent);
  transition: width var(--dur-base) var(--ease-smooth);
  border-radius: 1px;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ─────────────────────────────────────────────
   DARK MODE TOGGLE THUMB
───────────────────────────────────────────── */
#theme-toggle-thumb {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
html.dark #theme-toggle-thumb {
  transform: translateX(1.5rem);
}
html:not(.dark) #theme-toggle-thumb {
  transform: translateX(0);
}

/* ─────────────────────────────────────────────
   NAVBAR LOGO SIZING
───────────────────────────────────────────── */
/* Light theme logo has 2 lines (SDI + TEKNOLOGI text), needs slightly more height */
#nav-logo img:first-child,
#nav-logo img.dark\:hidden {
  height: 42px !important;
  max-height: 46px !important;
  width: auto !important;
}
@media (min-width: 640px) {
  #nav-logo img:first-child,
  #nav-logo img.dark\:hidden {
    height: 48px !important;
    max-height: 52px !important;
  }
}

/* Dark theme logo is a single horizontal row */
#nav-logo img:last-child,
#nav-logo img.dark\:block {
  height: 30px !important;
  max-height: 32px !important;
  width: auto !important;
}
@media (min-width: 640px) {
  #nav-logo img:last-child,
  #nav-logo img.dark\:block {
    height: 34px !important;
    max-height: 36px !important;
  }
}


/* ─────────────────────────────────────────────
   SERVICES DROPDOWN MENU
───────────────────────────────────────────── */
.group\/dropdown:hover .dropdown-menu,
.group\/dropdown:focus-within .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}
.dropdown-menu {
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────────────
   HAMBURGER MENU — open state
───────────────────────────────────────────── */
.hamburger-open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }