.hero-gradient {
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
}

.glass-effect {
   background-color: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
}

.dark .glass-effect {
   background-color: rgba(15, 23, 42, 0.9);
}

.carousel-item {
   display: none;
   transition: opacity 0.8s ease-in-out;
}

.carousel-item.active {
   display: block;
}

.line-clamp-2 {
   display: -webkit-box;
   line-clamp: 2;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

#main-nav {
   color: #ffffff;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header-logo {
   width: min(230px, calc(100vw - 6.5rem));
}

@media (min-width: 640px) {
   .site-header-logo {
      width: min(260px, calc(100vw - 8rem));
   }
}

@media (min-width: 1024px) {
   .site-header-logo {
      width: 330px;
   }
}

.mobile-menu-trigger {
   background-color: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.18);
   color: #ffffff;
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.mobile-menu-trigger:hover,
.mobile-menu-trigger:focus-visible {
   background-color: rgba(255, 255, 255, 0.2);
}

/* Optimasi CSS untuk Dark Mode & Scroll Navbar */
.nav-scrolled {
   background-color: rgba(255, 255, 255, 0.5) !important;
   backdrop-filter: blur(10px);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dark .nav-scrolled {
   background-color: rgba(15, 23, 42, 0.5) !important;
}

.nav-scrolled .nav-link,
.nav-scrolled #mobile-menu-btn,
.nav-scrolled #dark-mode-toggle,
.nav-scrolled .lang-btn,
.nav-scrolled .logo-subtext,
.nav-scrolled .fa-circle-half-stroke {
   color: #1a365d !important;
}

.nav-scrolled .mobile-menu-trigger {
   background-color: rgba(255, 255, 255, 0.82);
   border-color: rgba(26, 54, 93, 0.12);
   color: #1a365d !important;
   box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.dark .nav-scrolled .nav-link,
.dark .nav-scrolled #mobile-menu-btn,
.dark .nav-scrolled #dark-mode-toggle,
.dark .nav-scrolled .lang-btn,
.dark .nav-scrolled .logo-subtext,
.dark .nav-scrolled .fa-circle-half-stroke {
   color: #ffffff !important;
}

.dark .nav-scrolled .mobile-menu-trigger {
   background-color: rgba(15, 23, 42, 0.78);
   border-color: rgba(255, 255, 255, 0.12);
   color: #ffffff !important;
   box-shadow: 0 12px 30px rgba(2, 6, 23, 0.28);
}

.nav-scrolled .lang-btn.bg-white {
   background-color: #800000 !important;
   color: #ffffff !important;
   border: none;
}

.nav-scrolled .h-6.w-\[1px\] {
   background-color: rgba(0, 0, 0, 0.1) !important;
}

.dark .nav-scrolled .h-6.w-\[1px\] {
   background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Pastikan tombol hamburger tetap putih saat menu mobile terbuka */
body.overflow-hidden #mobile-menu-btn {
   color: white !important;
}

body.overflow-hidden .mobile-menu-trigger {
   background-color: rgba(128, 0, 0, 0.9) !important;
   border-color: rgba(255, 255, 255, 0.18);
   color: #ffffff !important;
}

#mobile-menu {
   background-color: rgba(15, 23, 42, 0.5);
}

#mobile-menu a,
#mobile-menu button {
   color: #ffffff !important;
}

#mobile-menu .mobile-dropdown div a {
   color: rgba(255, 255, 255, 0.7) !important;
}

.dropdown-menu a,
.mobile-dropdown div a {
   display: block !important;
   width: 100%;
   clear: both;
}

.mobile-dropdown div {
   flex-direction: column !important;
   display: flex;
}

.mobile-dropdown div.hidden {
   display: none !important;
}

#modal-img {
   animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
   from {
      transform: scale(0.9);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}

/* Animasi Ikon Chevron pada Dropdown Desktop */
.dropdown-container button i.fa-chevron-down {
   transition: transform 0.3s ease;
}

.dropdown-container.open button i.fa-chevron-down {
   transform: rotate(180deg);
}

/* Gaya untuk Indikator Slide Carousel */
.slide-dot {
   transition: all 0.3s ease;
}

.slide-dot.active {
   width: 2rem;
   background-color: white;
}

.group:hover {
   border-color: rgba(128, 0, 0, 0.3);
   /* Warna primary dengan transparansi */
   transform: translateY(-5px);
   transition: all 0.3s ease;
}

/* Parallax Effect */
.parallax-section {
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
}

/* Fallback untuk iOS/Safari Mobile yang sering bermasalah dengan background-attachment: fixed */
@supports (-webkit-overflow-scrolling: touch) {
   .parallax-section {
      background-attachment: scroll;
   }
}

/* Glassmorphism Hover */
.parallax-section .group {
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.parallax-section .group:hover {
   transform: translateY(-10px);
   border-color: rgba(255, 215, 0, 0.4);
   /* Warna accent */
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}