/* Container for menu items (keep light dom structure) */
.nav-desktop { z-index: 1200; }

/* Mega menu parent (inline in nav) */
.mega-menu {
  position: relative; /* parent position not required for panel (panel is fixed) */
}

/* FIXED — dropdown desktop */
.mega-menu-dropdown {
  position: fixed; /* make it full width and above content */
  top: 41px;

  /* KUNCI PENTING */
  left: 50%;
  width: 100vw;      /* selebar parent .nav-desktop */
  transform: translateX(-50%);

  /* membuat menjadi SUPER LEBAR mengikuti header */
  max-width: 100vw;        /* kunci agar tidak melebar berlebih */
  min-width: 100vw;        /* hilangkan 340% yang memotong nav */

  background: var(--header-bg); /* locked */
  color: #fff;

/* no border gap — keep flush with header */
  border: 0;
  
/* visual */
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  
/* hidden by default */
  display: none;
  padding: 75px 0px; /* top/bottom padding for layer; content centered inside */
  z-index: 1199;
  -webkit-tap-highlight-color: transparent;
}

.mega-menu:hover .mega-menu-dropdown {
  display: block;
}

/* Centered inner container inside the full-width layer (keeps links centered like header) */
.mega-menu-dropdown .mega-inner {
  width: 100%;
  max-width: 1200px;      /* match header container */
  margin: 0 auto;         /* centered */
  padding: 0 22px;        /* page side padding */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Column */
.mega-col {
  display: flex;
  flex-direction: column;
  min-width: 370px;
}

/* Title (Explore profile) */
.mega-title {
  font-size: 13px;
  font-weight: 200;
  margin-bottom: 20px;
}

/* Links */
.mega-menu-dropdown a {
  display: block;
  padding: 8px 0;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none;
  font-size: 17px;          /* Ubah ukuran font */
  font-weight: 400;         /* Tebal font */
  letter-spacing: -0.2px;   /* Apple spacing */
  transition: color .12s ease, transform .08s ease;
}

.nav-btn,
.mega-menu-dropdown a {
  color: rgba(255,255,255,0.75) !important;
}

.nav-btn:hover,
.mega-menu-dropdown a:hover {
  color: #fff !important;
}

.mega-menu-dropdown a:hover,
.mega-menu-dropdown a:focus {
  color: #ffffff;
  transform: translateX(3px);
}

/* Show when parent hovered or focused (keyboard accessible) */
.mega-menu:hover > .mega-menu-dropdown,
.mega-menu:focus-within > .mega-menu-dropdown {
  display: block;
}

/* Extra: allow the layer to stay visible when mouse is over the layer itself
   (prevents flicker when pointer leaves the small area between trigger and layer)
*/
.mega-menu-dropdown:hover,
.mega-menu-dropdown:focus-within {
  display: block;
}

/* Accessibility: ensure links focusable */
.mega-menu-dropdown a:focus { outline: 2px solid rgba(255,255,255,0.08); outline-offset: 2px; }

.mega-menu::after {
  content: "";
  position: absolute;
  top: 41px;                 /* sama persis seperti top submenu */
  left: 0;
  width: 100%;
  height: 41px;              /* jembatan hover */
  background: transparent;
  z-index: 500;
  pointer-events: auto;
}


/* Hide completely in mobile */
@media (max-width: 992px) {
  .mega-menu-dropdown {
    display: none !important;
  }
}

/* Safety: prevent horizontal scroll when layer is visible */
html, body { overflow-x: hidden; }

/* FORCE DESKTOP SUBMENU STYLE */
.mega-menu-dropdown a {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.75) !important;
}

.mega-menu-dropdown a:hover {
  color: #ffffff !important;
}