/* Navbar utama: hanya font merah saat hover/active */
nav[aria-label="Primary Navigation"] > ul > li > a,
nav[aria-label="Primary Navigation"] > ul > li > button {
  transition: color 0.2s;
}
nav[aria-label="Primary Navigation"] > ul > li > a:hover,
nav[aria-label="Primary Navigation"] > ul > li > button:hover {
  color: #dc2626 !important;
  background: none !important;
}
nav[aria-label="Primary Navigation"] > ul > li.active > a,
nav[aria-label="Primary Navigation"] > ul > li.active > button {
  color: #dc2626 !important;
  background: none !important;
}

/* Dropdown menu tetap seperti sebelumnya */
nav[aria-label="Primary Navigation"] ul li .group-hover\:opacity-100,
nav[aria-label="Primary Navigation"] ul li .group-hover\:scale-100 {
  /* handled by tailwind */
}
nav[aria-label="Primary Navigation"] ul li .block.px-4.py-2:hover,
nav[aria-label="Primary Navigation"] ul li .block.px-4.py-2.active {
  color: #fff !important;
  background: #dc2626 !important;
  border-radius: 4px;
}

  .animate-fade-in {
    animation: fadeIn 0.2s ease-in-out;
  }

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

/* Sidebar (mobile menu) hover/active effect same as desktop */
#mobile-menu a:hover, #mobile-menu a:focus {
  background-color: #b91c1c !important; /* Tailwind's red-700 */
  color: #fff !important;
}
#mobile-menu a.bg-red-100, #mobile-menu a.font-bold {
  background-color: #b91c1c !important;
  color: #fff !important;
}

/* Hamburger icon with border and rounded */
#menu-toggle {
  border: 2px solid #b91c1c;
  border-radius: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: #fff;
  transition: box-shadow 0.2s;
}
#menu-toggle:focus, #menu-toggle:hover {
  box-shadow: 0 0 0 2px #b91c1c33;
  background: #fef2f2;
}
#menu-toggle svg {
  display: block;
}

.modal-enter {
        opacity: 0;
        transform: scale(0.9);
      }

      .modal-enter-active {
        opacity: 1;
        transform: scale(1);
        transition: all 0.3s ease-out;
      }

      .modal-leave {
        opacity: 1;
        transform: scale(1);
      }

      .modal-leave-active {
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.2s ease-in;
      }