/**
 * Komponen UI — dikerjakan bertahap mulai Tahap 4 di WORKFLOW.md.
 * Placeholder sengaja dikosongkan agar Claude Code mengisi sesuai urutan tahap,
 * bukan sekaligus, supaya tiap komponen bisa direview satu per satu.
 */

/* ==========================================================================
   section-heading — template-parts/section-heading.php, dipakai di setiap
   section homepage ("Find Your Ride", "Our ATV Packages", dst — sebelumnya
   .home-section__title berulang di tiap section, sekarang 1 template-part).
   Diperbesar dari {typography.display-sm} ke {typography.display-lg} (poin C
   sesi sebelumnya) supaya hierarki lebih tegas dibanding body/card text.
   Garis aksen 2px ink di bawah judul — reuse spec {component.product-tab-active}
   ("2px ink underline rule"), lebar 48px ASUMSI (source tidak dokumentasikan
   lebar underline non-nav, ink dipilih karena Rausch sengaja dipakai scarcely).
   ========================================================================== */

.section-heading {
  margin-bottom: var(--spacing-lg);
}

.section-heading__title {
  margin: 0;
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-ls);
  color: var(--color-ink);
}

.section-heading__accent {
  display: block;
  width: 48px;
  height: 2px;
  margin-top: var(--spacing-sm);
  background: var(--color-ink);
}

.section-heading__subtitle {
  margin: var(--spacing-sm) 0 0;
  max-width: 640px;
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
}

/* ==========================================================================
   cta-banner — template-parts/cta-banner.php. Satu-satunya band full-Rausch
   di halaman ("one Rausch moment" per Overview DESIGN-airbnb.md), tombol
   pakai .btn-secondary sebagai inverse CTA di atas surface Rausch — persis
   use-case yang didokumentasikan token itu. Icon bulat putih pakai
   {colors.canvas} bg + ink icon (kontras di atas Rausch), rounded-full.
   Dipakai di: front-page.php (penutup homepage), single-paket.php (penutup
   detail paket).
   ========================================================================== */

.cta-banner {
  padding-block: var(--spacing-section);
  background: var(--color-primary);
  text-align: center;
}

.cta-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  color: var(--color-primary);
}

.cta-banner__title {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls);
  color: var(--color-on-primary);
}

.cta-banner__subtext {
  margin: calc(-1 * var(--spacing-base)) 0 var(--spacing-lg);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-on-primary);
}

/* ==========================================================================
   button-primary — {component.button-primary}
   Dipakai duluan di sini karena template-parts/cta-whatsapp.php (Tahap 4a)
   sudah merender class .btn-primary; base style-nya dilengkapi bersama nav.
   ========================================================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-family-base);
  font-size: var(--type-button-md-size);
  font-weight: var(--type-button-md-weight);
  line-height: var(--type-button-md-lh);
  letter-spacing: var(--type-button-md-ls);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

/* :active = {component.button-primary-active} persis sesuai dokumentasi:
   "Background flips to {colors.primary-active}. No transform, no shadow change." */
.btn-primary:active {
  background: var(--color-primary-active);
}

/* :hover murni undokumented (lihat "Known Gaps" DESIGN-airbnb.md — hover state
   colors intentionally not documented). Dipetakan ke warna primary-active yang
   sama + slight lift, dibedakan dari :active supaya spec button-primary-active
   ("no transform, no shadow") tetap dipatuhi persis saat ditekan. */
.btn-primary:hover {
  background: var(--color-primary-active);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary {
    transition: none;
  }

  .btn-primary:hover {
    transform: none;
  }
}

/* Varian kecil — dipakai package-card.php "Book Now" (sejajar harga, bukan
   full-width). {typography.button-sm} bukan button-md, tinggi diturunkan
   proporsional; warna/radius/shadow tetap 100% reuse .btn-primary. */
.btn-primary--sm {
  height: 36px;
  padding: 8px 16px;
  font-size: var(--type-button-sm-size);
  font-weight: var(--type-button-sm-weight);
  line-height: var(--type-button-sm-lh);
  letter-spacing: var(--type-button-sm-ls);
}

/* ==========================================================================
   site-header / top-nav — {component.top-nav}
   80px height, canvas background, 1px hairline bottom border.
   Logo kiri, menu {typography.nav-link} tengah, tombol WA kanan.
   ========================================================================== */

.site-header {
  position: relative;
  height: 80px;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--spacing-lg);
  height: 100%;
}

.site-logo {
  grid-column: 1;
  justify-self: start;
  font-size: var(--type-title-md-size);
  font-weight: 700;
  line-height: var(--type-title-md-lh);
  color: var(--color-ink);
  white-space: nowrap;
}

.site-nav {
  grid-column: 2;
  justify-self: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list a {
  font-size: var(--type-nav-link-size);
  font-weight: var(--type-nav-link-weight);
  line-height: var(--type-nav-link-lh);
  letter-spacing: var(--type-nav-link-ls);
  color: var(--color-ink);
}

.site-nav__list a:hover {
  text-decoration: underline;
}

.site-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xxs);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-header__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
}

/* Mobile — Responsive Behavior DESIGN-airbnb.md: "Top nav collapses to logo
   + hamburger; product tabs hide behind a sheet." Tombol WA tetap tampil di
   mobile (asumsi: ini CTA konversi utama situs tur, beda konteks dari
   account-utilities Airbnb yang boleh disembunyikan sepenuhnya). */
@media (max-width: 743px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    grid-column: auto;
    justify-self: stretch;
    background: var(--color-canvas);
    border-bottom: 1px solid var(--color-hairline);
    padding: var(--spacing-lg) var(--spacing-base);
    box-shadow: var(--shadow-card-hover);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-base);
  }

  .site-header__toggle {
    display: flex;
  }

  .site-header--open .site-nav {
    display: block;
  }
}

/* ==========================================================================
   button-secondary — {component.button-secondary}
   Dipakai oleh tombol "Lihat Detail" di package-card.php.
   ========================================================================== */

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 13px 23px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-family-base);
  font-size: var(--type-button-md-size);
  font-weight: var(--type-button-md-weight);
  line-height: var(--type-button-md-lh);
  letter-spacing: var(--type-button-md-ls);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.btn-secondary:hover {
  background: var(--color-surface-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.btn-secondary:active {
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-secondary {
    transition: none;
  }

  .btn-secondary:hover {
    transform: none;
  }
}

/* ==========================================================================
   package-card / package-grid — {component.property-card}
   Foto 1:1 {rounded.md}, badge promosi ala guest-favorite-badge kiri-atas,
   heart icon-button-circle kanan-atas, judul, rating placeholder, info-row
   icon (durasi/insurance/lunch/hotel transfer), harga ringkas + Book Now.
   ========================================================================== */

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-base);
}

/* Elevation resting state (bukan cuma on-hover — keputusan brand eksplisit
   untuk menonjolkan card depth) memakai {shadow-card-hover}, satu-satunya
   shadow tier di sistem ini; hover menumpuk token yang sama 2x supaya makin
   tegas tanpa mengarang nilai shadow baru. Card sekarang jadi surface penuh
   (padding + radius + shadow), bukan cuma foto yang rounded. position:relative
   supaya .package-card__heart (absolute, lihat di bawah) ter-anchor ke kartu,
   bukan cuma ke foto — heart tetap di pojok kanan-atas foto walau card
   sekarang punya padding di sekeliling foto. */
.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-base);
  background: var(--color-canvas);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.package-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-card-hover), var(--shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  .package-card {
    transition: none;
  }

  .package-card:hover {
    transform: none;
    box-shadow: var(--shadow-card-hover);
  }
}

.package-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-soft);
}

.package-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* {component.guest-favorite-badge}: white pill, {typography.badge}, padding
   4px 10px, shadow-card-hover elevation — dipakai literal sesuai token. */
.package-card__badge {
  position: absolute;
  top: var(--spacing-base);
  left: var(--spacing-base);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--type-badge-size);
  font-weight: var(--type-badge-weight);
  line-height: var(--type-badge-lh);
  letter-spacing: var(--type-badge-ls);
  box-shadow: var(--shadow-card-hover);
}

/* {component.icon-button-circle}: surface-strong bg, ink icon, rounded-full,
   32px — cosmetic-only (lihat komentar package-card.php), default outline
   state, tidak pernah Rausch-filled karena tidak ada save-state di tahap ini. */
.package-card__heart {
  position: absolute;
  top: calc(var(--spacing-base) + var(--spacing-base));
  right: calc(var(--spacing-base) + var(--spacing-base));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-surface-strong);
  color: var(--color-ink);
}

.package-card__body {
  padding-top: var(--spacing-base);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.package-card__title {
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
  letter-spacing: var(--type-title-md-ls);
}

.package-card__title a {
  color: var(--color-ink);
}

/* Rating placeholder — star icon WAJIB {colors.star-rating} (ink), bukan
   gold/kuning — keputusan eksplisit DESIGN-airbnb.md, sama seperti
   .trust-bar__icon varian star. */
.package-card__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  margin: 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-ink);
}

.package-card__rating svg {
  flex-shrink: 0;
  color: var(--color-star-rating);
}

.package-card__meta {
  margin: 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-muted);
}

/* Info-row — icon Lucide 16px + {typography.caption-sm} muted, inline-flex wrap. */
.package-card__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-base);
  margin: 0;
  padding: 0;
  list-style: none;
}

.package-card__info-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
  font-size: var(--type-caption-sm-size);
  font-weight: var(--type-caption-sm-weight);
  line-height: var(--type-caption-sm-lh);
  color: var(--color-muted);
}

.package-card__info-item svg {
  flex-shrink: 0;
  color: var(--color-muted);
}

/* Footer — harga rata kiri (bukan lagi rata kanan/2-baris single-tandem) +
   Book Now kecil sejajar kanan, BUKAN full-width ala reservation-card. */
.package-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.package-card__price {
  margin: 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-body);
}

/* Angka harga sedikit lebih besar/bold dari label sekitarnya (body-sm 14px/400)
   — dipakai pasangan token title-md (16px/600) yang sudah lengkap ada,
   bukan hardcode font-weight terpisah dari font-size seperti sebelumnya. */
.package-card__price strong {
  color: var(--color-ink);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
}

/* Responsive Behavior — diturunkan dari 4-up ke 3-up desktop (permintaan
   sesi ini), tetap 2-up tablet (744-1128px), 1-up mobile (<744px). */
@media (max-width: 1127px) {
  .package-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 743px) {
  .package-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   booking-bar — {component.search-bar-pill} + {component.search-orb}
   Pill 64px height, 3 segmen dipisah hairline, orb Rausch 48x48px kanan.
   ========================================================================== */

.booking-bar-wrap {
  position: relative;
}

.booking-bar {
  display: flex;
  align-items: center;
  height: 64px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  /* search-bar-pill "at rest" memakai satu-satunya shadow tier di sistem ini. */
  box-shadow: var(--shadow-card-hover);
}

.booking-bar__segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  /* {component.search-field-segment} spec eksplisit: "padding: 8px 24px"
     (sebelumnya 14px 24px, tidak sesuai literal DESIGN-airbnb.md). */
  padding: 8px 24px;
  /* {colors.hairline} (bukan hairline-soft) — DESIGN-airbnb.md eksplisit:
     "The default 1px border tone — search bar dividers..." */
  border-left: 1px solid var(--color-hairline);
}

.booking-bar__segment:first-child {
  border-left: 0;
}

.booking-bar__label {
  margin: 0 0 2px;
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  letter-spacing: var(--type-caption-ls);
  color: var(--color-ink);
  text-transform: uppercase;
}

.booking-bar__control {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-body);
}

/* <option> TIDAK otomatis ikut font-family <select> induknya di sebagian
   browser (terutama saat dropdown popup terbuka, beberapa browser Windows
   render list pakai chrome OS-native yang mengabaikan font-family kalau
   cuma di-set di <select>) — perlu di-set eksplisit di sini juga. */
.booking-bar__control option {
  font-family: var(--font-family-base);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  color: var(--color-body);
}

.booking-bar__control:focus {
  outline: none;
  color: var(--color-ink);
}

/* Overlay icon Lucide "calendar" di atas <input type="date"> — wrapper baru
   scoped hanya ke segmen Tanggal (bukan .booking-bar__segment yang dipakai
   bareng Select Package/Guests), supaya struktur segmen lain sama sekali
   tidak tersentuh. position:relative di sini, BUKAN di .booking-bar__segment. */
.booking-bar__date-field {
  position: relative;
  display: flex;
  align-items: center;
}

/* Sisakan ruang kanan supaya teks tanggal (mm/dd/yyyy) tidak numpuk sama icon
   overlay. Native picker-indicator browser TETAP ada di baliknya (cuma
   opacity:0, bukan display:none) — lihat aturan ::-webkit-calendar-picker-
   indicator di bawah — jadi area klik & fungsi buka date-picker tetap penuh. */
.booking-bar__control--date {
  padding-right: 28px;
}

/* Sembunyikan icon kalender bawaan Chrome/Edge/Safari (WebKit/Blink) supaya
   tidak dobel sama icon Lucide overlay. Sengaja MINIMAL — cuma opacity:0 +
   cursor, TANPA override position/width/height/margin/padding — karena
   ::-webkit-calendar-picker-indicator hidup di shadow-DOM internal <input>
   yang layoutnya dikontrol browser sendiri; menimpa position/size-nya lewat
   author CSS terbukti tidak reliable (itu penyebab icon dobel sebelumnya —
   override sebelumnya membuat indicator tetap ke-render di posisi/ukuran
   defaultnya milik browser, opacity:0 tidak "menempel" karena bentrok
   dengan layout paksaan tsb). Indicator tetap ada & clickable di posisi
   nativenya sendiri (opacity 0 = transparan, bukan display:none), icon
   Lucide overlay yang terlihat menutupinya secara visual.
   FIREFOX TIDAK PUNYA pseudo-element ini sama sekali (bukan WebKit/Blink) —
   icon kalender native Firefox akan tetap tampil berdampingan dengan overlay
   Lucide. Ini keterbatasan browser, tidak ada workaround CSS murni yang
   reliable — lihat laporan akhir sesi ini. */
.booking-bar__control--date::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

/* pointer-events: none — icon murni visual, klik tembus ke input/native
   picker-indicator di baliknya (task poin 3). Warna ikut --color-muted, sama
   seperti label caption segmen lain (bukan hex baru). Ukuran 20px sama
   persis dengan arrow-right di .booking-bar__orb supaya konsisten. */
.booking-bar__date-icon {
  position: absolute;
  right: 0;
  flex-shrink: 0;
  pointer-events: none;
  color: var(--color-muted);
}

.booking-bar__orb {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: var(--spacing-sm);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}

.booking-bar__orb:hover,
.booking-bar__orb:active {
  background: var(--color-primary-active);
}

/* Subtle pulse ring — pakai warna token yang sama ({color.primary}) diredupkan
   lewat `opacity` (bukan rgba/hex baru), supaya orb WA lebih "hidup" tanpa
   menambah warna di luar tokens.css. ::before dipakai (bukan ::after) supaya
   ring ini render di BAWAH ikon panah (paint order: bg tombol -> ::before ->
   child SVG -> ::after), jadi ikon tetap terlihat jelas. */
.booking-bar__orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  animation: quadatv-orb-pulse 2.4s ease-out infinite;
}

.booking-bar__orb:hover::before {
  animation-play-state: paused;
}

@keyframes quadatv-orb-pulse {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-bar__orb::before {
    animation: none;
    opacity: 0;
  }
}

.booking-bar__summary {
  display: none;
  width: 100%;
  align-items: center;
  height: 64px;
  padding: 0 var(--spacing-lg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  box-shadow: var(--shadow-card-hover);
  font-family: var(--font-family-base);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  color: var(--color-ink);
  cursor: pointer;
}

/* Collapsing Strategy DESIGN-airbnb.md: "Search bar's 3 segments collapse
   into a single-tap entry" di bawah 744px — di sini jadi satu pill yang
   membuka form lengkap saat di-tap, bukan overlay full-screen terpisah. */
@media (max-width: 743px) {
  .booking-bar {
    display: none;
  }

  .booking-bar__summary {
    display: flex;
  }

  .booking-bar-wrap.is-expanded .booking-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    border-radius: var(--radius-lg);
  }

  .booking-bar-wrap.is-expanded .booking-bar__summary {
    display: none;
  }

  .booking-bar-wrap.is-expanded .booking-bar__segment {
    border-left: 0;
    border-top: 1px solid var(--color-hairline);
  }

  .booking-bar-wrap.is-expanded .booking-bar__segment:first-child {
    border-top: 0;
  }

  .booking-bar-wrap.is-expanded .booking-bar__orb {
    align-self: flex-end;
    margin: var(--spacing-sm);
  }
}

/* ==========================================================================
   testimonial-card / testimonial-grid — {component.reviews-card}
   Grid 2-column, tiap kolom: author row (avatar + nama + negara asal)
   di atas kutipan {typography.body-sm}.
   ========================================================================== */

/* Fallback layout kalau CDN Splide (splide.min.css/js) gagal load — .splide__list
   adalah <ul> asli (front-page.php), tanpa rule ini dia akan render sebagai
   bullet-list block-stacked bawaan browser begitu splide.min.css tidak sampai
   (network/firewall/ad-blocker di sisi visitor). Discope KETAT ke
   :not(.is-initialized) — class itu baru ditambahkan Splide JS sendiri
   setelah .mount() sukses, jadi begitu Splide beneran jalan, selector ini
   otomatis berhenti match dan tidak menimpa flex-nowrap sliding aslinya
   (selector kita lebih spesifik dari punya Splide, kalau tidak di-scope
   begini rule fallback ini akan menang terus dan merusak animasi geser). */
.testimonial-slider.splide:not(.is-initialized) .splide__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.testimonial-slider.splide:not(.is-initialized) .splide__slide {
  flex: 1 1 320px;
}

/* Slider Splide.js (CDN, lihat quadatv_assets() di functions.php). Struktur
   .splide > .splide__track > .splide__list > .splide__slide di-generate PHP
   (front-page.php), perPage & breakpoints di-init lewat JS (assets/js/main.js)
   supaya persis ikut breakpoint {Mobile <744px / Tablet 744-1128px / Desktop
   >=1128px} di DESIGN-airbnb.md — bukan lewat CSS width override.
   Padding vertikal di track supaya hover lift + shadow testimonial-card
   (translateY -4px) tidak terpotong oleh overflow:hidden bawaan Splide. */
.testimonial-slider .splide__track {
  padding-block: var(--spacing-sm);
}

.testimonial-slider .splide__slide {
  height: auto;
}

/* {component.reviews-card} didokumentasikan transparan tanpa shadow di
   DESIGN-airbnb.md, tapi brief tahap ini secara eksplisit minta elevation
   lebih jelas di semua card homepage (lihat instruksi sesi ini poin A) —
   deviasi disengaja dari dokumen asli, tetap 100% pakai token yang sama
   (radius-md + shadow-card-hover), bukan nilai baru. */
.testimonial-card {
  height: 100%;
  padding: var(--spacing-lg);
  background: var(--color-canvas);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover), var(--shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-card {
    transition: none;
  }

  .testimonial-card:hover {
    transform: none;
    box-shadow: var(--shadow-card-hover);
  }
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.testimonial-card__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-strong);
  color: var(--color-ink);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name {
  margin: 0;
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-lh);
  color: var(--color-ink);
}

.testimonial-card__country {
  margin: 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-muted);
}

.testimonial-card__quote {
  margin: 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-body);
}

/* Override tema default Splide (arrow bulat putih + dot abu-abu) supaya
   konsisten dengan tokens.css — bukan warna bawaan paket Splide. */
.testimonial-slider .splide__arrow {
  width: 40px;
  height: 40px;
  background: var(--color-canvas);
  box-shadow: var(--shadow-card-hover);
  opacity: 1;
}

.testimonial-slider .splide__arrow svg {
  width: 16px;
  height: 16px;
  fill: var(--color-primary);
}

.testimonial-slider .splide__arrow:hover:not(:disabled) {
  background: var(--color-primary);
}

.testimonial-slider .splide__arrow:hover:not(:disabled) svg {
  fill: var(--color-canvas);
}

.testimonial-slider .splide__arrow:disabled {
  opacity: 0.35;
}

.testimonial-slider .splide__pagination__page {
  background: var(--color-primary-disabled);
  opacity: 1;
}

.testimonial-slider .splide__pagination__page.is-active {
  background: var(--color-primary);
  transform: scale(1.2);
}

.testimonial-slider .splide__pagination__page:hover {
  background: var(--color-primary-active);
}

@media (max-width: 743px) {
  .testimonial-slider .splide__arrow {
    display: none;
  }
}

/* ==========================================================================
   footer-light / legal-band — {component.footer-light} + {component.legal-band}
   3 kolom (Perusahaan/Paket/Bantuan), gutter {spacing.lg}, ditutup legal-band.
   Asumsi: horizontal padding memakai .container (bukan literal 80px dari
   DESIGN-airbnb.md — tidak ada token spacing 80px di tokens.css); vertical
   padding memakai {spacing.xxl} 48px sesuai angka pertama "48x80px padding".
   ========================================================================== */

.site-footer {
  background: var(--color-canvas);
  color: var(--color-ink);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  padding-block: var(--spacing-xxl);
}

.footer-column__heading {
  margin: 0 0 var(--spacing-base);
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-lh);
  color: var(--color-ink);
}

.footer-column__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column__list a {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-lh);
  color: var(--color-ink);
}

.footer-column__list a:hover {
  text-decoration: underline;
}

.legal-band {
  border-top: 1px solid var(--color-hairline);
}

.legal-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-base);
  padding-block: var(--spacing-lg);
}

.legal-band__copyright {
  margin: 0;
  font-size: var(--type-caption-sm-size);
  font-weight: var(--type-caption-sm-weight);
  line-height: var(--type-caption-sm-lh);
  color: var(--color-muted);
}

.legal-band__social {
  display: flex;
  align-items: center;
  gap: var(--spacing-base);
}

.legal-band__social a {
  display: inline-flex;
  color: var(--color-muted);
}

.legal-band__social a:hover {
  color: var(--color-ink);
}

@media (max-width: 743px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .legal-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   js-reveal — utility scroll-reveal (fade-in + slide-up saat masuk viewport).
   Class ini DITAMBAHKAN oleh assets/js/main.js lewat IntersectionObserver,
   bukan ditulis manual di template — kalau JS gagal load atau browser tidak
   dukung IntersectionObserver, elemen tetap tampil normal (progressive
   enhancement), tidak pernah "hilang" karena CSS.
   ========================================================================== */

.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.js-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   gallery-lightbox — modal foto home-gallery, dibangun & dikontrol penuh
   lewat JS (initGalleryLightbox() di assets/js/main.js), bukan markup PHP
   statis, karena template-parts/gallery-grid.php bisa dipanggil lebih dari
   sekali per halaman. Belum ada foto asli (lihat komentar home-gallery di
   pages.css) jadi .gallery-lightbox__placeholder reuse bahasa visual yang
   sama dengan kartu grid (surface-soft + scrim gradient), cuma diperbesar.
   Arrow/close button reuse persis gaya .splide__arrow (canvas bg + shadow-
   card-hover + icon primary) supaya konsisten dengan slider testimoni,
   bukan komponen visual baru. Overlay pakai {colors.scrim-modal} yang sudah
   ada di tokens.css (belum pernah dipakai sebelumnya).
   Open/close: JS toggle .is-open (display) lalu .is-visible (opacity+scale)
   sesudah satu reflow paksa — pola sama dengan expandFaqItem/collapseFaqItem
   (attribute/class dulu, animasi belakangan, transitionend baru lepas state
   akhir) supaya transisi CSS benar-benar jalan.
   ========================================================================== */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
}

.gallery-lightbox.is-open {
  display: flex;
}

.gallery-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: var(--scrim-modal);
  opacity: 0;
  transition: opacity 250ms ease;
}

.gallery-lightbox__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 250ms ease, transform 250ms ease;
}

.gallery-lightbox.is-visible .gallery-lightbox__overlay {
  opacity: 1;
}

.gallery-lightbox.is-visible .gallery-lightbox__content {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox__overlay,
  .gallery-lightbox__content {
    transition: none;
  }
}

.gallery-lightbox__placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface-soft);
  overflow: hidden;
}

.gallery-lightbox__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-scrim) 65%, transparent),
    transparent 55%
  );
  pointer-events: none;
}

.gallery-lightbox__caption {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--type-body-md-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-on-dark);
}

/* Tombol close/prev/next — gaya identik .splide__arrow (lihat block splide
   di atas) supaya kontrol bulat floating konsisten di seluruh situs. */
.gallery-lightbox__close,
.gallery-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  box-shadow: var(--shadow-card-hover);
  color: var(--color-primary);
  cursor: pointer;
}

.gallery-lightbox__close svg,
.gallery-lightbox__nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

.gallery-lightbox__close:hover,
.gallery-lightbox__nav:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-canvas);
}

.gallery-lightbox__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.gallery-lightbox__close {
  top: calc(-1 * var(--spacing-lg));
  right: calc(-1 * var(--spacing-lg));
}

.gallery-lightbox__nav--prev {
  top: 50%;
  left: calc(-1 * var(--spacing-xl));
  transform: translateY(-50%);
}

.gallery-lightbox__nav--next {
  top: 50%;
  right: calc(-1 * var(--spacing-xl));
  transform: translateY(-50%);
}

@media (max-width: 743px) {
  .gallery-lightbox {
    padding: var(--spacing-base);
  }

  .gallery-lightbox__close {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }

  .gallery-lightbox__nav--prev {
    left: var(--spacing-sm);
  }

  .gallery-lightbox__nav--next {
    right: var(--spacing-sm);
  }
}

/* ==========================================================================
   floating-whatsapp — tombol WA fixed pojok kanan-bawah, tampil di semua
   halaman (di-include sekali dari footer.php). Warna & shadow reuse token
   yang sama dengan komponen lain (tidak ada hijau WA baru di luar tokens.css).
   Pulse ring reuse @keyframes quadatv-orb-pulse dari .booking-bar__orb di
   atas — tidak ada keyframe baru.
   ========================================================================== */

.floating-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-card-hover);
  transition: transform 200ms ease;
}

.floating-whatsapp:hover {
  transform: scale(1.05);
}

.floating-whatsapp:active {
  transform: scale(1);
}

.floating-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  animation: quadatv-orb-pulse 2.4s ease-out infinite;
}

.floating-whatsapp:hover::before {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp {
    transition: none;
  }

  .floating-whatsapp:hover {
    transform: none;
  }

  .floating-whatsapp::before {
    animation: none;
    opacity: 0;
  }
}

/* Mobile: kecilkan tombol + kurangi jarak dari tepi layar. */
@media (max-width: 743px) {
  .floating-whatsapp {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 16px;
  }
}

/* single-paket.php punya .booking-summary-card yang jadi sticky bottom bar
   penuh lebar di mobile (lihat pages.css) — geser floating button ke atas
   supaya tidak tumpang tindih. Selector pakai body_class() WP native
   ("single-paket" otomatis ditambahkan untuk singular CPT "paket"). */
@media (max-width: 743px) {
  body.single-paket .floating-whatsapp {
    bottom: 80px;
  }
}