/* ======================================================
   HOME HERO SLIDER (INDEX)
====================================================== */

/* sebelumnya: .section.hero-section */
.section.home-hero {
  padding-block-end: 0rem;
}

/* sebelumnya: .hero-section */
.home-hero {
  margin-top: -3rem;
  overflow-y: visible;
}

/* sebelumnya: .hero-slider */
.home-hero__slider {
  position: relative;
  width: 100%;
  padding: 0 0px; /* menentukan besar hero */
  overflow-x: hidden;
  overflow-y: hidden;
}

/* sebelumnya: .hero-track */
.home-hero__track {
  display: flex;
  will-change: transform;
  transition: none;
  overflow-y: visible;
}

/* sebelumnya: .hero-slide */
.home-hero__slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0 var(--slide-gap);
  box-sizing: border-box;
  overflow: visible;
}

/* sebelumnya: .hero-slide-inner */
.home-hero__slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}

/* sebelumnya: .hero-bg */
.home-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
  transform: translateZ(0);
  position: relative;
  padding-bottom: 3rem;
}

/*
   HERO LAYOUT / WRAPPER
   sebelumnya: .hero-wrapper
*/
.home-hero__layout {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  z-index: 12;

  transform: translate(-50%, -70px);
  max-width: 1440px;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 360px;

  opacity: 0;
  pointer-events: none;

  transition:
    transform 700ms cubic-bezier(0.28, 1.8, 0.45, 1),
    opacity 300ms ease;
}

/* sebelumnya: .hero-slide.is-active .hero-wrapper */
.home-hero__slide.is-active .home-hero__layout {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* sebelumnya: .hero-slide.clone .hero-wrapper */
.home-hero__slide.clone .home-hero__layout {
  display: none;
}

/*
   HERO CONTROLS (ARROWS)
   sebelumnya: .arrows-hero-slider
*/
.home-hero__controls {
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;

  transform: translateY(-48%);
  pointer-events: none; /* supaya klik hanya di button */
}

/* sebelumnya: .hero-arrow */
.home-hero__arrow {
  position: absolute;
  top: 0;

  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  border-radius: 50%;
  border: none;
  cursor: none;
  pointer-events: auto;
  z-index: 10;
}

/* sebelumnya: .hero-arrow.left */
.home-hero__arrow--left {
  left: clamp(16px, 16vw, 10rem);
}

/* sebelumnya: .hero-arrow.right */
.home-hero__arrow--right {
  right: clamp(16px, 16vw, 10rem);
}

/* sebelumnya: .arrow-icon */
.home-hero__arrow-icon {
  width: 32px;
  height: 32px;
  stroke: #ffffff;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
   HERO DOTS
   sebelumnya: .hero-dots
*/
.home-hero__dots {
  position: absolute;
  bottom: clamp(24px, 8vw, 24px);
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 10px;
  z-index: 10;
}

/* sebelumnya: .hero-dot */
.home-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

/* sebelumnya: .hero-dot.active */
.home-hero__dot.active {
  background: #007cff;
  scale: 1.1;
}

/*
   HERO CONTENT
   sebelumnya: .stats-group, .stat-card, .stat-number, .second-stat-numb, .stat-label
*/
.home-hero__stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-hero__stat-card {
  width: 192px;
  height: 196px;
  padding: 0 32px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;

  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 24px;
  backdrop-filter: blur(12px);
}

.home-hero__stat-number {
  font-size: 56px;
  font-weight: 600;
  line-height: 56px;
  color: #359d41;
}

/* sebelumnya: .second-stat-numb */
.home-hero__stat-number.is-secondary {
  color: #d55c00;
}

.home-hero__stat-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 22.5px;
  color: #303135;
}

/*
   INFO CARD
   sebelumnya: .info-card, .info-text, .brand, .description, .cta-group
*/
.home-hero__info-card {
  box-sizing: border-box;
  padding: 42px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;

  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 24px;
  backdrop-filter: blur(12px);

  min-width: 560px;
}

.home-hero__info-text {
  width: auto;
  text-align: justify;
}

.home-hero__brand {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-transform: uppercase;
  color: #303135;
}

.home-hero__desc {
  font-size: 18px;
  line-height: 28px;
  color: #303135;
}

.home-hero__cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ======================================================
   HOME BENEFIT SECTION (INDEX)
   + UNIVERSAL HEADING SUPPORT
====================================================== */

/* sebelumnya: .benefit-section */
.home-benefit {
  width: 100%;
  /* margin: 100px 0 0 0; */
}

/* sebelumnya: .benefit-container */
.home-benefit__container {
  max-width: 80rem; /* 🔒 KUNCI LEBAR */
  margin: 0 auto;
  /* padding-inline: 24px;  RESPONSIVE SAFE  */
  box-sizing: border-box;
}

/*
   CARD WRAPPER
   sebelumnya: .benefit-cards
*/
.home-benefit__cards {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: stretch;
  overflow: hidden; /* anti layout shift */
}

/*
   CARD BASE
   sebelumnya: .benefit-card
*/
.home-benefit__card {
  flex: 1;
  height: 420px; /* 🔒 KUNCI TINGGI */
  display: flex;
  flex-direction: column;

  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  cursor: none;

  transition:
    flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

/*
   IMAGE
   sebelumnya: .benefit-image
*/
.home-benefit__image {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; /* 🔥 cegah flex narik tinggi */
}

.home-benefit__image img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  transform: translateZ(0);
  will-change: transform;

  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
   PANEL
   sebelumnya: .benefit-panel
*/
.home-benefit__panel {
  position: relative;
  flex-shrink: 0;

  padding: 48px 24px 28px;
  text-align: center;

  transition:
    padding 0.4s ease,
    text-align 0.3s ease;
}

/* PANEL COLORS (sebelumnya: .panel-blue dst) */
.home-benefit__panel--blue {
  background: #dff7fb;
}
.home-benefit__panel--purple {
  background: #eadcff;
}
.home-benefit__panel--pink {
  background: #ffd6d6;
}
.home-benefit__panel--green {
  background: #d8ffd1;
}

/*
   ICON
   sebelumnya: .benefit-icon
*/
.home-benefit__icon {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);

  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;

  display: grid;
  place-items: center;

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.home-benefit__icon img {
  width: 85%;
}

/*
   TEXT
   sebelumnya: .benefit-text
*/
.home-benefit__content h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;

  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.home-benefit__content p {
  font-size: 15px;
  line-height: 1.5;

  opacity: 0;
  max-height: 0;
  overflow: hidden;

  transition:
    opacity 0.35s ease,
    max-height 0.35s ease;
}

/* ULTRA SMOOTH TRANSITION */
.home-benefit__content h3,
.home-benefit__content p {
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/*
   ACTIVE / INACTIVE STATES
   (state class tetap: is-active, has-active)
*/
.home-benefit__card.is-active {
  flex-grow: 2;
}

.home-benefit__card.is-active .home-benefit__panel {
  padding: 32px;
  text-align: left;

  display: flex;
  align-items: center;
  gap: 16px;
}

.home-benefit__card.is-active .home-benefit__content {
  display: flex;
  flex-direction: column;
}

.home-benefit__card.is-active .home-benefit__content p {
  opacity: 1;
  max-height: 120px;
  margin: 0;
  transform: translateY(0);
  transition-delay: 0.14s;
}

/* ICON ACTIVE */
.home-benefit__card.is-active .home-benefit__icon {
  position: relative;
  inset: 0;
  transform: none;

  width: 72px;
  height: 72px;
  border-radius: 8px;

  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
  align-self: center;
}

.home-benefit__card.is-active .home-benefit__icon img {
  width: 100%;
  height: 100%;
}

/* INACTIVE */
.home-benefit__cards.has-active .home-benefit__card:not(.is-active) {
  flex-grow: 0.45;
  filter: brightness(0.92);
}

.home-benefit__cards.has-active
  .home-benefit__card:not(.is-active)
  .home-benefit__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}

.home-benefit__cards.has-active
  .home-benefit__card:not(.is-active)
  .home-benefit__content
  h3 {
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.1px;

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

  min-height: 2.8em;
}

/* TEXT RESET */
.home-benefit__cards.has-active
  .home-benefit__card:not(.is-active)
  .home-benefit__content
  p {
  opacity: 0;
  transform: translateY(14px);
}

.home-benefit__cards:not(.has-active) .home-benefit__content h3,
.home-benefit__cards:not(.has-active) .home-benefit__content p {
  transition-delay: 0s;
}

/*
   TITLE ANIMATION
*/
.home-benefit__cards.has-active .home-benefit__content h3,
.home-benefit__card.is-active .home-benefit__content h3 {
  animation: title-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
   DESKTOP HOVER
*/
@media (hover: hover) {
  .home-benefit__card:hover {
    filter: brightness(1);
  }
}

/*
   RESPONSIVE
*/
@media (max-width: 1024px) {
  .home-benefit__cards {
    gap: 16px;
  }

  .home-benefit__card {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .home-benefit__cards {
    flex-direction: column;
  }

  .home-benefit__card,
  .home-benefit__card.is-active,
  .home-benefit__cards.has-active .home-benefit__card:not(.is-active) {
    height: auto;
    flex-grow: unset;
  }

  .home-benefit__content p {
    opacity: 1;
    max-height: none;
  }
}
/* ======================================================
   WAHANA SLIDER (SSS REFINED SAFE VERSION)
====================================================== */
.wahana-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1410px;
  margin: 0 auto;
  gap: 12px;
}

/*
   BASE
*/
.slider {
  width: 100%;
  padding: 4.375rem 0 0 0; /* 70px */
  margin: 0 auto;
  text-align: center;

  overflow-x: hidden;
  background: transparent;

  position: relative; /* safety for absolute children */
}

.slider__header {
  margin-bottom: 5.375rem; /* 86px */
}

.slider__title {
  font-size: 1.75rem; /* 28px */
  font-weight: 600;
  line-height: 1.2;
}

/* ================================
   VIEWPORT
================================ */
.slider__viewport {
  width: 100%;
  position: relative;
  overflow: visible;
}

/* WRAPPER KHUSUS OVERFLOW VISUAL */
.slider__overflow {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  margin: 0 auto; /* center safety */
}

/* ================================
   TRACK
================================ */
.slider__track {
  display: flex;
  align-items: center;
  gap: 48px;

  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;

  overflow: visible;
}

/* ================================
   ITEM (CARD)
================================ */
.slider__item {
  width: 420px;
  height: 260px;
  border-radius: 32px;
  position: relative;
  flex-shrink: 0;

  overflow: hidden;
  transform: scale(0.85);
  opacity: 0.45;

  transition:
    transform 0.4s ease,
    opacity 0.4s ease;

  backface-visibility: hidden; /* performance safety */
  transform-origin: center center;
}

.slider__item.is-active {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
  overflow: visible;
}

/* ================================
   BACKGROUND
================================ */
.slider__bg {
  position: absolute;
  inset: 0;
  border-radius: 32px;

  transform: scale(0.9);
  transition: transform 0.4s ease;
  will-change: transform;
}

.slider__item.is-active .slider__bg {
  transform: scale(1);
}

/* ================================
   IMAGE
================================ */
.slider__image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;

  transform: translate(-50%, -50%) scale(0.75);
  transition: transform 0.4s ease;

  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.slider__item.is-active .slider__image {
  transform: translate(-50%, -50%) scale(2.2);
}

/* ================================
   CONTROLS
================================ */
.slider__controls {
  margin: 96px 0 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;

  overflow: visible;
}

/* ================================
   NAV BUTTON
================================ */
.slider__nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;

  background: #8a8a8a;
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: none; /* mengikuti custom cursor */
  transition:
    background 0.25s ease,
    transform 0.25s ease;

  flex-shrink: 0;
}

.slider__nav:hover {
  background: #6f6f6f;
  transform: scale(1.08);
}

.slider__nav:active {
  transform: scale(0.95);
}

.slider__nav:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.slider__nav-icon {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* ================================
   BACKGROUND VARIANTS
================================ */
.bg-slide {
  background: linear-gradient(135deg, #c7d2e9, #ff9b7b);
}

.bg-horse {
  background: linear-gradient(135deg, #ffb26b, #ffd27f);
}

.bg-trampoline {
  background: linear-gradient(135deg, #7dd3c7, #e9ef6b);
}

.bg-rainbow-slide {
  background: linear-gradient(135deg, #ff5f6d, #ffc3d4);
}

.bg-gocart {
  background: linear-gradient(135deg, #ff6b6b, #ffd93d);
}

.bg-bunny-car {
  background: linear-gradient(135deg, #f7a1c4, #ffe6cf);
}

.bg-push-bike {
  background: linear-gradient(135deg, #6aa8ff, #7de0e6);
}

.bg-animal-train {
  background: linear-gradient(135deg, #b07a4f, #ffe97a);
}

.bg-becak-rainbow {
  background: linear-gradient(135deg, #a78bfa, #6ee7f9);
}

.bg-carousel {
  background: linear-gradient(135deg, #ffb07a, #fff07a);
}

.bg-dino {
  background: linear-gradient(135deg, #7ee3c2, #fff07a);
}

.bg-battery-car {
  background: linear-gradient(135deg, #ffb6d9, #ffb27a);
}

.bg-jumping {
  background: linear-gradient(135deg, #7ee3c2, #8fc7ff);
}

.bg-climbing-wall {
  background: linear-gradient(135deg, #ffb07a, #fff07a);
}

.bg-sandplay {
  background: linear-gradient(135deg, #ffb07a, #fff07a);
}

/* ===============================
   LOCATION
================================ */

/* sebelumnya: .location */
.home-location {
  position: relative;
  min-height: 45rem;
  margin-top: 0;
  overflow: hidden;
}

/* WRAPPER (PENTING) */
/* sebelumnya: .location-bg-wrapper */
.home-location__bg-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* IMAGE PARALLAX */
/* sebelumnya: .location-bg */
.home-location__bg {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 160%; /* RUANG GERAK */
  object-fit: cover;

  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.08);
}

/* OVERLAY (TETAP PUNYAMU) */
/* sebelumnya: .location-overlay */
.home-location__overlay {
  position: absolute;
  z-index: 2;

  left: 200px;
  bottom: 60px;
  max-width: 720px;

  padding: 48px 52px;

  background: linear-gradient(
    83deg,
    rgba(49, 176, 255, 0.55) 23.9%,
    rgba(224, 130, 255, 0.55) 49.53%,
    rgba(255, 146, 113, 0.55) 78.25%
  );

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  color: #fff;
}

/* sebelumnya: .title-eyebrow.location-label */
.title-eyebrow.home-location__label {
  color: #d6d6d6;
}

/* TITLE */
/* sebelumnya: .location-title */
.home-location__title {
  font-size: 42px;
  line-height: 1.1;
  margin: 8px 0 16px;
  font-weight: 700;
}

/* DESCRIPTION */
/* sebelumnya: .location-desc */
.home-location__desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 560px;
  margin-bottom: 28px;
}

/*
  BUTTON
  NOTE: CSS lama target .btn-outline.location-btn, tapi HTML kamu pakai
  .btn-outline-white + (refactor) .home-location__btn
*/
/* sebelumnya: .btn-outline.location-btn */
.btn-outline-white.home-location__btn {
  margin-top: auto;
  min-height: 52px;
  padding: 2px 28px;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 500;
  color: #fff;
  border-color: #fff;

  cursor: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* sebelumnya: .location-btn:hover */
.home-location__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 124, 255, 0.3);
  color: #007cff;
  font-weight: 500;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero {
    height: 480px;
  }

  .hero-overlay {
    margin: 24px;
    padding: 28px;
  }

  .hero-title {
    font-size: 28px;
  }
}
/* ===============================
   PARTNER SECTION
================================ */
.partner-section {
  /* width: 100%; */
  width: 65.5rem;
  margin: 0 auto;
}

/* 
   CONTAINER
 */
.partner-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* 
   CARD WITH GRADIENT BORDER
 */
.partner-border {
  position: relative;
  border-radius: 42px;
  padding: 10px; /* ketebalan border */
  background: linear-gradient(83deg, #31b0ff, #e082ff, #ff9271, #31b0ff);
  background-size: 300% 300%;
  animation: border-flow 6s linear infinite;
}

.partner-card {
  border-radius: 32px; /* 32 - 10 */
  background: #ffffff;
  padding: 72px 96px;
}

/* 
   HEADER
*/
.partner-header {
  display: grid;
  justify-content: center;
  justify-items: center;
  gap: 18px;
  margin-bottom: 48px;
}

/* 
   TITLE ROW
*/
.partner-title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}

.partner-brand img {
  height: 42px;
  object-fit: contain;
}

.partner-text {
  font-size: 36px;
  font-weight: 400;
  color: #333;
}

/* 
   LOGO GRID
 */
.partner-logos {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* gap: 42px; */
  width: 100%;
}

.partner-logo {
  max-height: 142px;
  object-fit: contain;
}

/* .partner-logo:nth-child(2) {
  max-height: 78px;
} */

.partner-logo:nth-child(3) {
  align-self: center;
}

/* 
   LOGO PARTNER ANIMATION
 */

.partner-logo {
  transition: transform 0.35s ease;
}

.partner-logo:hover {
  transform: scale(1.03);
}

/* 
   RESPONSIVE
*/

/* ===============================
   EVENT ACARA
================================ */
.event-slider {
  max-width: 100%;
  margin: 0 auto;
  padding: 2.375rem 0 1rem 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  /* cursor: grab; */
}

.event-slider:active {
  /* cursor: grabbing; */
}

.event-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.event-card {
  min-width: 280px;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;

  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.event-card:hover {
  transform: scale(1.06);
}

/* EFEK KIRI KANAN */
.event-slider::before,
.event-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.event-slider::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}

.event-slider::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

/* pop up modal */
.image-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.image-modal.is-active {
  display: block;
}

.image-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.image-modal-content {
  position: absolute;
  inset: 0;
  margin: auto;
  /* max-width: 90vw; */
  /* max-height: 90vh; */
  width: fit-content;

  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal-content img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
}

/* CLOSE BUTTON for Event & Promo POP UP*/
.image-modal-close {
  position: fixed;
  display: none;
  top: -48px;
  right: 0;
  z-index: 10000;

  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 999px;
  width: 46px;
  height: 46px;

  cursor: none;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.image-modal.is-active .image-modal-close {
  display: flex; /* ⬅️ MUNCUL SAAT MODAL AKTIF */
  align-items: center;
  justify-content: center;
}

/* ======================================================
   GALERI
====================================================== */
.auto-gallery {
  width: 100%;
  overflow: hidden;
  padding: 40px 0 0 0;
}

.auto-gallery__viewport {
  overflow: hidden;
  width: 100%;
}

.auto-gallery__track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.auto-gallery__item {
  width: 380px;
  height: 480px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.auto-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===============================
   CUSTOMER SERVICE
================================ */
.feedback-section {
  width: 100%;
  /* padding: 80px 24px; */
  display: flex;
  justify-content: center;
}

.feedback-card {
  max-width: 68.75rem;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 48px;

  padding: 48px 70px 48px 96px;
  border-radius: 24px;

  background: linear-gradient(90deg, #39b5ff 0%, #b18cff 50%, #ff9b73 100%);

  color: #fff;
  position: relative;
  overflow: hidden;
}

.feedback-illustration img {
  width: 300px;
  height: auto;
  display: block;
  position: absolute;
  top: 24px;
  left: 40px;
}

.feedback-content {
  max-width: 640px;
}

.feedback-eyebrow {
  font-size: 14px;
  letter-spacing: 0.14em;
  font-weight: 600;
  opacity: 0.9;
}

.feedback-title {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin: 12px 0 16px;
}

.feedback-desc {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.95;
  margin-bottom: 28px;
}

.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 48px;
  padding: 14px 24px;
  border-radius: 12px;

  font-weight: 600;
  font-size: 15px;
  text-decoration: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.feedback-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
  .feedback-card {
    flex-direction: column;
    text-align: center;
    padding: 40px 28px;
  }

  .feedback-illustration img {
    width: 180px;
  }

  .feedback-title {
    font-size: 28px;
  }
}

/* ===============================
   HOME CTA SECTION
================================ */
.home-cta {
  max-width: 1000px;
  margin: 1rem auto 7.5rem auto;
  padding: 0 24px;
}

.home-cta__box {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-radius: 28px;

  padding: 64px 64px 64px 280px;
  min-height: 360px;

  background:
    linear-gradient(
      83deg,
      rgba(255, 255, 255, 0.88) 17.62%,
      rgba(237, 195, 251, 0.85) 57.51%,
      rgba(185, 219, 255, 0.85) 78.59%
    ),
    url("/img/wave-bg2.png");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.home-cta__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/wave-bg.png") center / cover no-repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.home-cta__box > * {
  position: relative;
  z-index: 2;
}

/* Mascot */
.home-cta__mascot {
  position: absolute;
  left: -138px;
  bottom: -40px;
  height: 500px;
  z-index: 2;
  pointer-events: none;
}

/* Content */
.home-cta__content {
  max-width: 560px;
  color: #303135;
  margin-left: 52px;
}

.home-cta__title {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.home-cta__desc {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.home-cta__btn {
  width: fit-content;
}

/* ======================================================
   HERO SLIDER OVERLAY (DARKEN ON HOVER / TAP)
====================================================== */
.about-hero-slide::after,
.package-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0);
  transition: background 0.35s ease;
  pointer-events: none;
  z-index: 1; /* Di atas gambar, di bawah konten navigasi/teks */
}

/* DESKTOP HOVER */
@media (hover: hover) {
  .about-hero-slider:hover .about-hero-slide::after,
  .package-hero-slider:hover .package-hero-slide::after {
    background: rgba(0, 0, 0, 0.75);
  }
}

/* MOBILE TAP (.is-dim toggle via JS) */
.about-hero-slider.is-dim .about-hero-slide::after,
.package-hero-slider.is-dim .package-hero-slide::after {
  background: rgba(0, 0, 0, 0.75);
}

/* FIX CLICK DELEGATION PADA IOS/MOBILE DIV */
@media (hover: none) {
  .about-hero-slider,
  .package-hero-slider {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}