/* Mobile Menu Fixes */

/* Critical Burger Menu Fixes */

/* Always ensure the burger menu structure is correct regardless of viewport */
.tombol-menu {
  position: absolute !important;
  top: 1.7rem !important;
  right: 1rem !important;
  width: 30px !important;
  height: 20px !important;
  cursor: pointer !important;
  z-index: 9999 !important; /* Increased z-index to ensure it's on top of everything */
  display: none; /* Hidden by default on desktop */
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Explicitly style the three lines of the burger menu */
.tombol-menu .garis {
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  background-color: #fff !important;
  margin-bottom: 5px !important;
}

.tombol-menu .garis:last-child {
  margin-bottom: 0 !important;
}

/* When navbar is white, make lines dark */
nav.putih .tombol-menu .garis {
  background-color: #333 !important;
}

/* Mobile-specific styles with !important to override any conflicts */
@media screen and (max-width: 991.98px) {
  /* Force display for mobile */
  .tombol-menu {
    display: flex !important; /* Show burger menu on mobile */
  }
  
  /* Add hover effect for better user experience */
  .tombol-menu:hover {
    opacity: 0.8 !important;
  }
  
  /* Style the burger menu when clicked */
  .tombol-menu:active .garis {
    background-color: #c86b85 !important;
  }
  
  /* Ensure menu appears on top of other content */
  nav .menu {
    z-index: 9998 !important; /* Increased z-index to be just below the burger button */
  }
  
  /* Fix menu position */
  nav .menu ul {
    background-color: rgba(0, 0, 0, 0.9) !important;
  }
}