/* ==================================================================
 * LIQUID GLASS FLOATING NAVBAR — Premium Ultimate Balanced (Clean Version)
 * Core Concept: Apple VisionOS Glassmorphism + Mobile Auto-Collapse Engine
 * Add-on: Full Synchronized Scrollspy Indicators (Desktop & Mobile)
 * ================================================================== */

:root {
  /* Dynamic Theme Variables for Easy Maintenance */
  --nav-bg-expanded: rgba(255, 255, 255, 0.45);
  --nav-bg-mobile-expanded: rgba(255, 255, 255, 0.55);
  --nav-bg-collapsed: rgba(255, 255, 255, 0.75);
  --nav-blur: blur(25px) saturate(200%);
  --nav-text-dark: #050d18;
  --nav-text-muted: #272829;
  --nav-accent: #149ddd;
  
  /* Shadow Models */
  --shadow-desktop: 0 12px 40px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --shadow-collapsed: 0 16px 35px rgba(20, 157, 221, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  
  /* Timing Transition Engines */
  --nav-transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- SECTION 1: GLOBAL & DESKTOP DESAIN LAYOUT --- */
.header,
#header,
#header.floating-navbar {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 40px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important; /* Dioptimalkan untuk kenyamanan visual desktop */
  padding: 8px 22px !important;
  border-radius: 100px !important;
  z-index: 99999 !important;

  /* Glassmorphism Surface Core */
  background: var(--nav-bg-expanded) !important;
  backdrop-filter: var(--nav-blur) !important;
  -webkit-backdrop-filter: var(--nav-blur) !important;
  box-shadow: var(--shadow-desktop) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: var(--nav-transition) !important;
}

/* Brand Identity Typography (WK) */
.nav-logo {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--nav-text-dark) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 12px !important; /* Memberikan sela proporsional dengan menu */
  margin-left: 0 !important;
  transition: var(--nav-transition) !important;
}

/* Navigation List Wrapper */
.navmenu {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: var(--nav-transition) !important;
}

.navmenu ul {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important; /* Menggunakan gap kecil karena ukuran tombol <a> sudah melebar */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.navmenu ul li {
  position: relative !important; /* Dudukan jangkar koordinat untuk pseudo-element dot */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Base Style Link Menu (Desktop & Mobile) */
.navmenu a {
  color: var(--nav-text-muted) !important;
  font-size: 18px !important;
  width: 40px !important;   /* Menyamakan dimensi box agar lingkaran background simetris murni */
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important; /* Membentuk base lingkaran sempurna */
  position: relative !important;
  transition: color 0.3s ease, background-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* [EFEK 1: CIRCLE GLOW - DESKTOP & MOBILE] */
.navmenu a.active {
  color: var(--nav-accent) !important;
  background: rgba(20, 157, 221, 0.12) !important; /* Lingkaran transparan biru */
  box-shadow: 0 0 12px rgba(20, 157, 221, 0.08) !important; /* Pendaran aura halus */
}

/* Hover Effect Penyeimbang */
.navmenu a:hover:not(.active) {
  color: var(--nav-accent) !important;
  background: rgba(20, 157, 221, 0.05) !important;
}

/* [EFEK 2: BLUE DOT INDICATOR - DESKTOP & MOBILE] */
.navmenu a.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important; /* Letak gantung presisi di bawah ikon desktop */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  background-color: var(--nav-accent) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px var(--nav-accent) !important; /* Dot berpendar tajam */
  animation: dotFadeIn 0.4s ease forwards !important;
}

@keyframes dotFadeIn {
  from { opacity: 0; transform: translate(-50%, 3px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* --- SECTION 2: MOBILE OPTIMIZATION ENGINE (MAX-WIDTH: 768px) --- */
@media (max-width: 768px) {
  
  /* Mobile Expanded Base */
  .header,
  #header,
  #header.floating-navbar {
    width: 92% !important;
    max-width: 380px !important;
    height: 56px !important;
    padding: 0 24px !important;
    display: flex !important;
    justify-content: space-between !important; 
    gap: 0 !important;
    background: var(--nav-bg-mobile-expanded) !important;
  }

  /* Symmetric Virtual Grid — Left Zone */
  .header .nav-logo,
  #header .nav-logo {
    margin: 0 !important;
    font-size: 16px !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  /* Symmetric Virtual Grid — Right Zone */
  .header .navmenu,
  #header .navmenu {
    flex: 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  /* Balanced Core Icon Spacing Mobile */
  .header .navmenu ul,
  #header .navmenu ul {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header .navmenu ul li,
  #header .navmenu ul li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important;
  }

  /* Menyesuaikan dimensi lingkaran tombol & posisi dot aktif agar pas pada layout mobile */
  .header .navmenu a,
  #header .navmenu a {
    width: 38px !important;
    height: 38px !important;
  }

  .header .navmenu a.active::after,
  #header .navmenu a.active::after {
    bottom: 0px !important; 
  }

  /* --- SECTION 3: MOBILE COLLAPSED RESPONSE STAGE (.nav-collapsed) --- */
  #header.nav-collapsed {
    width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    padding: 0 !important; 
    border-radius: 50% !important; 
    left: 50% !important;
    transform: translate(-50%, 0) !important; 
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;    
    text-align: center !important;
    background: var(--nav-bg-collapsed) !important;
    box-shadow: var(--shadow-collapsed) !important;
    border-color: rgba(20, 157, 221, 0.3) !important;
  }

  /* Destroy Layout Dimension Right Menu Entirely */
  #header.nav-collapsed .navmenu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Lock Logo Elements to Dead-Center Anchor */
  #header.nav-collapsed .nav-logo {
    margin: 0 !important; 
    padding: 0 !important;
    font-size: 15px !important;
    color: var(--nav-accent) !important; 
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    flex: none !important; 
  }

  /* Kill Default iPortfolio Burger Navigation Button */
  .mobile-nav-toggle {
    display: none !important;
  }
}