/* ==========================================================================
   SECTION GALERI OPERASIONAL (CLEAN & MODULAR CSS)
   Target ID: #galeri
   ========================================================================== */

/* 1. Root Section Wrapper */
#galeri,
section#galeri.section-gallery {
  position: relative !important;
  width: 100% !important;
  background-color: #02091c !important; /* Obsidian Navy Base */
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* 2. Header Center-Alignment (Tanpa Redeklarasi Container Global) */
#galeri .nx-section-header.is-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto clamp(2rem, 4vw, 3rem) auto !important;
  position: relative !important;
  z-index: 2 !important;
}

#galeri .nx-header-title-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Pill Glass Badge */
#galeri .nx-header-badge.is-glass {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #dbeafe !important;
}

#galeri .nx-badge-dot {
  width: 6px !important;
  height: 6px !important;
  background-color: #1b43fe !important; /* Royal Blue */
  border-radius: 50% !important;
  box-shadow: 0 0 8px #1b43fe !important;
}

/* Headline H2 */
#galeri .nx-h2 {
  font-family: var(--font-heading, "Helvetica Now Display", sans-serif) !important;
  font-size: clamp(2rem, 3.8vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  width: 100% !important;
}

#galeri .nx-heading-accent,
#galeri .nx-highlight {
  color: #1b43fe !important; /* Royal Blue */
  display: inline !important;
}

/* Body Lead (Rapat & Proporsional ke Judul) */
#galeri .nx-body-lead,
#galeri .nx-body {
  color: #94a3b8 !important;
  max-width: 680px !important;
  margin: 10px auto 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

/* ==========================================================================
   3. SINGLE-ROW MARQUEE (SMOOTH & INFINITE LOOP)
   ========================================================================== */
#galeri .nx-marquee-wrapper {
  display: flex !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  /* Fade Masking di Tepi Kiri & Kanan */
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

#galeri .nx-marquee-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  user-select: none !important;
  will-change: transform !important;
}

/* Hover-to-Pause */
#galeri .nx-marquee-track:hover .nx-marquee-group {
  animation-play-state: paused !important;
}

#galeri .nx-marquee-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  padding-right: 20px !important; /* Jarak pas antar-grup duplikat */
  flex-shrink: 0 !important;
  min-width: max-content !important;
  animation: nxMarqueeScrollLeft 65s linear infinite !important; /* Tenang dan halus */
}

/* Keyframe Translasi Murni Tanpa Jeda */
@keyframes nxMarqueeScrollLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* ==========================================================================
   4. KARTU FOTO GALERI (16:10 PRECISE ASPECT RATIO)
   ========================================================================== */
#galeri .nx-gallery-card {
  position: relative !important;
  width: clamp(260px, 24vw, 360px) !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background-color: #06112c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  flex-shrink: 0 !important;
  transition: border-color 0.3s ease, transform 0.3s ease !important;
}

#galeri .nx-gallery-card:hover {
  border-color: rgba(27, 67, 254, 0.6) !important;
  transform: translateY(-4px) !important;
}

#galeri .nx-gallery-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(0.92) !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease !important;
}

#galeri .nx-gallery-card:hover img {
  transform: scale(1.06) !important;
  filter: brightness(1.03) !important;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  #galeri .nx-marquee-group {
    gap: 14px !important;
    padding-right: 14px !important;
    animation-duration: 45s !important;
  }

  #galeri .nx-gallery-card {
    border-radius: 14px !important;
  }
}

#galeri,
section#galeri.section-gallery {
  position: relative !important;
  width: 100% !important;
  padding-top: var(--_sizes---spacing--spacing-massive, 5rem) !important;
  padding-bottom: var(--_sizes---spacing--spacing-massive, 5rem) !important;
  background-color: #02091c !important; /* Obsidian Navy */
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: block !important;
}