/* ==========================================================================
   ── GLOBALS & VARIABLES SECTION ──
   ========================================================================== */
:root {
  --ocean: #0a4a5e;
  --ocean-mid: #0e6b87;
  --teal: #1a9bb8;
  --aqua: #40c9d6;
  --sand: #e8d5b0;
  --sand-light: #f5edd8;
  --cream: #faf6ee;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --dark: #0d1f26;
  --text: #1a2f38;
  --text-light: #4a6572;
  --white: #ffffff;
  --wa-green: #25d366;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Jost", sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
}

/* ==========================================================================
                         ── NAVBAR START ──
   ========================================================================== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 7%;
  background-color: rgba(1, 1, 1, 0.8);
  border-bottom: 1px solid var(--white);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.navbar .navbar-logo {
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--white);
}

.navbar .navbar-logo span {
  color: var(--gold-light);
  font-style: italic;
}

.navbar .navbar-nav {
  display: flex;
  gap: 0.2rem;
  list-style: none;
  align-items: center;
}

.navbar .navbar-nav a {
  color: #fff;
  display: inline-block;
  font-size: 1.5rem;
  margin: 0 1rem;
  padding: 0.5rem 1rem;
}

.navbar .navbar-nav a:hover {
  color: var(--gold-light);
}

.navbar .navbar-nav a::after {
  content: "";
  display: block;
  padding-bottom: 0.5rem;
  border-bottom: 0.1rem solid var(--gold-light);
  transform: scaleX(0);
  transition: 0.2s linear;
}

.navbar .navbar-nav a:hover::after {
  transform: scaleX(0.5);
}

.navbar .navbar-nav .nav-wa {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--wa-green);
  display: inline-block;
  font-size: 1.1rem;
  text-decoration: none;
}

.navbar .navbar-extra a {
  color: #ffffff;
  margin: 0 0.5rem;
}

.navbar .navbar-extra a:hover {
  color: var(--gold-light);
}

#hamburger-menu {
  display: none;
}
/* ==========================================================================
                             ── NAVBAR END ──
   ========================================================================== */

/* ==========================================================================
                             ── NAVBAR PERCOBAAN START ──
   ========================================================================== */
.main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Menjamin navbar selalu berada di lapisan paling atas */
  background: rgba(
    13,
    31,
    38,
    0.85
  ); /* Efek kaca gelap transparan menyatu ke hero */
  backdrop-filter: blur(
    12px
  ); /* Mengaburkan latar belakang di belakang navbar */
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Kontainer Penyeimbang Isi Menu */
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  transition: padding 0.3s ease;
}

/* 1. Gaya Logo Brand */
.nav-logo {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.nav-logo span {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  color: #e8c97a; /* Aksen warna emas khas Lombok Paradise */
  margin-left: 0.15rem;
}

/* 2. Menu Link Tengah */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.2rem; /* Jarak renggang yang lega dan profesional */
}

.nav-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.3s ease;
}

/* Animasi Garis Bawah yang Meluncur Cantik saat Di-hover */
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #40c9d6; /* Toska cerah signature */
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover,
.nav-link.active {
  color: #ffffff;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* 3. Tombol Kontak Kanan */
.btn-nav-contact {
  background-color: #00e676; /* Hijau segar mengundang klik */
  color: #ffffff;
  text-decoration: none;
  padding: 0.65rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 230, 118, 0.2);
  transition: all 0.3s ease;
}

.btn-nav-contact:hover {
  background-color: #00cc66;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 230, 118, 0.35);
}

/* 4. Tombol Hamburger Mobile (Sembunyi di Desktop) */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #ffffff;
  transition: all 0.3s ease;
}
/* ==========================================================================
                             ── NAVBAR PERCOBAAN END ──
   ========================================================================== */

/* ==========================================================================
   ── HERO LOMBOK PARADISE START ──
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 90vh; /* Tinggi yang megah untuk halaman utama */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f7fafd; /* Warna dasar biru langit yang sangat cerah */
  padding-top: 80px;
}

/* Background Foto Cerah dengan Lapisan Filter Kontras */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(247, 250, 253, 0.4) 0%,
      /* Transparan di bagian atas dekat navbar */ rgba(247, 250, 253, 0.2) 50%,
      rgba(247, 250, 253, 0.95) 100%
        /* Tebal di bawah agar menyatu sempurna dengan ombak putih */
    ),
    url("img/rinjani.jpg") center/cover no-repeat; /* Pastikan menggunakan foto yang bernuansa cerah/siang hari */
  filter: contrast(1.05) brightness(1.1); /* Menaikkan kecerahan gambar latar secara alami */
}

/* Kontainer Utama Teks */
.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 6rem 2rem; /* Jarak bawah agar teks aman dari potongan ombak */
  text-align: center;
}

.hero-content {
  max-width: 850px;
  margin: 0 auto;
}

/* Sub-Judul Tropis */
.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #008fa0; /* Warna biru toska/aqua tua yang kontras di latar cerah */
  margin-bottom: 1.2rem;
}

/* Judul Utama yang Tajam dan Jelas */
.hero-title {
  color: #0b2228; /* Warna Deep Navy: Menjamin teks sangat terbaca jelas */
  font-size: clamp(2.5rem, 5.5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

/* Aksen Warna pada Judul */
.hero-title span {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: #00a8b5; /* Warna cyan/aqua yang menyegarkan mata */
}

/* Paragraf Deskripsi */
.hero-lead {
  color: #2e4347; /* Abu-abu gelap berkarakter agar mata tidak lelah membaca */
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.8;
  font-weight: 400;
  max-width: 700px;
  margin: 0 auto 3rem auto;
}

/* ── TOMBOL AKSI (HERO ACTIONS) ── */
.hero-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tombol Utama (Lihat Paket Wisata) */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #00a8b5; /* Aqua cerah */
  color: #ffffff;
  padding: 1.1rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 168, 181, 0.25);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-primary:hover {
  background-color: #0b2228; /* Berubah menjadi navy premium saat disentuh */
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(11, 34, 40, 0.3);
}

/* Tombol Kedua (Jelajahi Destinasi) */
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0b2228;
  color: #0b2228;
  padding: 1.1rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-outline:hover {
  background-color: #0b2228;
  color: #ffffff;
  transform: translateY(-3px);
}

/* 🌊 OMBAK PUTIH DIKUNCI MATI DI DASAR HERO (ANTI-MELAYANG) */
.hero-wave {
  position: absolute;
  bottom: -2px; /* Mengunci paksa agar menempel ke halaman bawah */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 3;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: 90px; /* Tinggi lengkungan ombak */
}

/* Warna Isian Ombak */
.hero-wave .shape-fill {
  fill: #ffffff; /* Menggunakan putih bersih agar menyatu mulus dengan konten di bawahnya */
}
/* ==========================================================================
   ── HERO LOMBOK PARADISE END ──
   ========================================================================== */

/* ==========================================================================
   ── HIGHLIGHTS LOMBOK PARADISE START ──
   ========================================================================== */
.highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Desktop */
  gap: 1.5rem;

  /* 🎯 Kunci Utama: Jangan gunakan angka px tetap untuk width! */
  width: 100% !important;
  max-width: 1200px;

  /* Berikan bantalan kanan-kiri yang fleksibel agar tidak mepet kaca gawai */
  padding: 0 1.5rem;
  margin: 4rem auto;

  /* Amankan dari kebocoran elemen */
  box-sizing: border-box !important;
  overflow: hidden;
}

/* 2. Kartu Item (Menciut Sesuai Lebar Kontainer) */
.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  padding: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(13, 31, 38, 0.05);

  /* 🎯 Memaksa kartu patuh pada lebar pembungkusnya */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; /* Menghapus paksaan min-width pixel lama jika ada */

  box-sizing: border-box !important;
}

/* 3. Dudukan Ikon (Dibuat Fleksibel) */
.highlight-icon {
  font-size: 1.6rem;
  /* Gunakan flex-shrink agar ikon tidak gepeng saat teks mendorong ke kiri */
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: #f7fafc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 4. Blok Teks (Membatasi Kalimat Memanjang) */
.highlight-text {
  flex: 1 !important;
  min-width: 0 !important;
  width: 100%;
}

.highlight-text h4 {
  color: #0d1f26;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.3rem 0;
}

.highlight-text p {
  color: #4a6572;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  /* 🎯 Memaksa teks memotong diri dan melompat ke baris baru */
  white-space: normal !important;
  word-break: break-word !important;
}
/* ==========================================================================
   ── HIGHLIGHT LOMBOK PARADISE END ──
   ========================================================================== */

/* ==========================================================================
   ── ABOUT LOMBOK PARADISE START ──
   ========================================================================== */
.about {
  background: var(--cream);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.about-images {
  position: relative;
  height: 560px;
}

.about-img-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 74%;
  height: 78%;
  object-fit: cover;
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.18);
}

.about-img-accent {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 52%;
  height: 55%;
  object-fit: cover;
  border: 4px solid var(--cream);
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
}

.about-badge {
  position: absolute;
  top: 58%;
  left: 46%;
  background: var(--gold);
  color: var(--dark);
  padding: 1rem 1.4rem;
  text-align: center;
  box-shadow: 0 8px 30px rgba(201, 168, 76, 0.4);
  z-index: 2;
}

.about-badge strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
}

.about-badge span {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.about-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.stat h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.4rem;
  color: var(--ocean);
  font-weight: 300;
  line-height: 1;
}

.stat span {
  color: var(--gold);
}

.stat p {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.3rem;
}

section {
  padding: 6rem 4rem;
}

.section-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.section-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--teal);
}

.section-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ocean);
  margin-bottom: 1.2rem;
}

.section-title em {
  font-style: italic;
  color: var(--teal);
}

.section-lead {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-light);
  max-width: 600px;
  font-weight: 300;
}
/* ==========================================================================
   ── ABOUT LOMBOK PARADISE END ──
   ========================================================================== */

/* ==========================================================================
   ── DESTINATION LOMBOK PARADISE START ──
   ========================================================================== */
.destinations {
  background-color: #0d1f26; /* Menyatu dengan latar belakang gelap halaman utama Anda */
  padding: 6rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* Header Konten */
.dest-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.dest-header .section-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #00a8b5; /* Warna toska terang agar kontras di latar gelap */
  margin-bottom: 0.8rem;
}

.dest-header .section-title {
  color: #ffffff;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  margin-bottom: 1.2rem;
}

.dest-header .section-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: var(--gold-light, #e8c97a);
}

.dest-header .section-lead {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}

/* ────────── TATA LETAK GRID MULTI-KOLOM ────────── */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Basis 6 kolom mewah */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Pengaturan Dasar Kartu */
.dest-card {
  position: relative;
  grid-column: span 2; /* Kartu biasa memakan 2 dari 6 kolom */
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;

  /* Mengamankan interaksi sentuh di perangkat mobile */
  -webkit-tap-highlight-color: transparent;
}

/* Kartu Gili Trawangan (Featured) Memakan 4 Kolom */
.dest-card.featured {
  grid-column: span 4;
}

/* Gambar Latar Belakang */
.dest-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ────────── OVERLAY GRADASI & TIPOGRAFI ────────── */
.dest-overlay {
  position: absolute;
  inset: 0;
  /* Gradasi hitam solid di dasar kartu untuk melindungi keterbacaan teks */
  background: linear-gradient(
    to top,
    rgba(13, 31, 38, 0.95) 0%,
    rgba(13, 31, 38, 0.6) 50%,
    rgba(13, 31, 38, 0.1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  box-sizing: border-box;
  z-index: 2;
  transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dest-tag {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-light, #e8c97a);
  margin-bottom: 0.4rem;
}

.dest-name {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* 🌟 KONDISI TERSEMBUNYI AWAL (Akan meluncur ke atas) */
.dest-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.6;

  /* Sembunyi murni menggunakan opacity dan tinggi nol */
  opacity: 0;
  max-height: 0;
  transform: translateY(20px);
  overflow: hidden;
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.4s ease,
    margin 0.4s ease;
  margin-bottom: 0;
}

.dest-link {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s;
  display: inline-block;
  margin-top: 0.5rem;
}

/* ────────── TRIGGER ANIMASI (HOVER & TOUCH) ────────── */

/* 1. Efek Saat Di-hover (Desktop) atau Di-tap/Sentuh (HP & Tablet) */
.dest-card:hover img,
.dest-card:focus img,
.dest-card:active img {
  transform: scale(1.05); /* Gambar sedikit membesar mewah */
}

.dest-card:hover .dest-desc,
.dest-card:focus .dest-desc,
.dest-card:active .dest-desc {
  opacity: 1;
  max-height: 120px; /* Melonggarkan batas tinggi agar kalimat keluar */
  transform: translateY(0); /* Kembali ke posisi semula */
  margin-bottom: 1.5rem; /* Memberi jarak ke tombol */
}

.dest-card:hover .dest-link,
.dest-card:focus .dest-link,
.dest-card:active .dest-link {
  color: var(--gold-light, #e8c97a);
}
/* ==========================================================================
   ── DESTINATION LOMBOK PARADISE END ──
   ========================================================================== */

/* ==========================================================================
   ── PACKAGES LOMBOK PARADISE START ──
   ========================================================================== */
.packages {
  background: var(--sand-light);
  padding: 6rem 0; /* PERBAIKAN: Memberikan ruang 6rem di atas dan di bawah agar tidak tumpang tindih */
  width: 100%;
  position: relative;
  display: block;
}

.packages-header {
  text-align: center;
  margin-bottom: 4rem;
}

.packages-header .section-eyebrow {
  justify-content: center;
}

.packages-header .section-eyebrow::before {
  display: none;
}

.packages-header .section-lead {
  margin: 0 auto;
}

.pkg-tabs {
  display: flex;
  gap: 0;
  justify-content: center;
  margin-bottom: 3rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.pkg-tab {
  padding: 0.8rem 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color 0.3s;
  position: relative;
}

.pkg-tab::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ocean);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.pkg-tab.active {
  color: var(--ocean);
}

.pkg-tab.active::after {
  transform: scaleX(1);
}

.pkg-tab:hover {
  color: var(--ocean);
}

.pkg-panel {
  display: none;
}

.pkg-panel.active {
  display: block;
}

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(320px, 1fr)
  ); /* Mengatur kolom fleksibel */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem; /* Menjaga jarak dari tepi layar */
}

.pkg-card {
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.4s,
    transform 0.3s;
  position: relative;
}

.pkg-card:hover {
  box-shadow: 0 16px 60px rgba(10, 74, 94, 0.15);
  transform: translateY(-5px);
}

.pkg-card.recommended::before {
  content: "TERPOPULER";
  position: absolute;
  top: 1.2rem;
  right: -2rem;
  background: var(--gold);
  color: var(--dark);
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  padding: 0.3rem 2.5rem;
  transform: rotate(45deg) translateX(1rem);
  box-shadow: 0 2px 10px rgba(201, 168, 76, 0.4);
}

.pkg-img {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.pkg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.pkg-card:hover .pkg-img img {
  transform: scale(1.07);
}

.pkg-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(10, 31, 38, 0.8);
  backdrop-filter: blur(6px);
  color: var(--aqua);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
}

.pkg-body {
  padding: 1.8rem;
}

.pkg-duration {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.pkg-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.45rem;
  color: var(--ocean);
  font-weight: 400;
  margin-bottom: 0.8rem;
  line-height: 1.2;
}

.pkg-desc {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.75;
  margin-bottom: 1.4rem;
}

.pkg-includes {
  list-style: none;
  margin-bottom: 1.6rem;
}

.pkg-includes li {
  font-size: 0.77rem;
  color: var(--text-light);
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.pkg-includes li::before {
  content: "✓";
  color: var(--teal);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.pkg-footer {
  padding: 1.2rem 1.8rem;
  background: var(--sand-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pkg-price {
  font-family: "Cormorant Garamond", serif;
}

.pkg-price .from {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-light);
  display: block;
}

.pkg-price .amount {
  font-size: 1.6rem;
  color: var(--ocean);
  font-weight: 400;
  line-height: 1;
}

.pkg-price .per {
  font-size: 0.68rem;
  color: var(--text-light);
}

.pkg-wa {
  background: #25d366;
  color: var(--white);
  padding: 0.6rem 1.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition:
    background 0.3s,
    transform 0.2s;
  white-space: nowrap;
}

.pkg-wa:hover {
  background: #20ba5a;
  transform: translateY(-1px);
}

.pkg-wa svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
/* ==========================================================================
   ── PACKAGES LOMBOK PARADISE END ──
   ========================================================================== */

/* ==========================================================================
   ── RINJANI LOMBOK PARADISE START ──
   ========================================================================== */
.rinjani {
  position: relative;
  overflow: hidden;
  min-height: 700px;
  display: flex;
  align-items: center;
}

.rinjani-bg {
  position: absolute;
  inset: -10px; /* Diatur minus agar efek blur tidak membuat pinggiran gambar menjadi putih/bocor */
  z-index: 1;

  /* PERBAIKAN: Menggelapkan lapisan gradasi agar tulisan di atasnya kontras */
  background:
    linear-gradient(
      110deg,
      rgba(10, 31, 38, 0.75) 0%,
      /* Sisi kiri: sedikit diturunkan agar teks tetap terbaca jelas */
      rgba(10, 31, 38, 0.3) 50%,
      /* Sisi tengah: dibuat lebih transparan */ rgba(10, 31, 38, 0.05) 100%
        /* Sisi kanan (gunung): dibuat hampir sepenuhnya transparan/terang */
    ),
    url(img/rinjani.jpg) center/cover no-repeat;

  /* MENAMBAHKAN EFEK BURAM */
  filter: blur(
    0.5px
  ); /* Anda bisa mengubah angkanya (misal: 3px - 8px) sesuai tingkat keburaman yang diinginkan */
}

.rinjani-content {
  position: relative;
  z-index: 2;
  padding: 6rem 4rem;
  max-width: 700px;
}

.rinjani-content .section-eyebrow {
  color: var(--aqua);
}

.rinjani-content .section-eyebrow::before {
  background: var(--aqua);
}

.rinjani-content .section-title {
  color: var(--white);
}

.rinjani-content .section-title em {
  color: var(--aqua);
}

.rinjani-content .section-lead {
  color: rgba(255, 255, 255, 0.7);
}

.rinjani-specs {
  display: flex;
  gap: 2.5rem;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}

.rspec {
  border-left: 2px solid var(--gold);
  padding-left: 1rem;
}

.rspec h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  color: var(--gold-light);
  font-weight: 300;
  line-height: 1;
}

.rspec p {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.2rem;
}

.rinjani-pkgs {
  display: flex;
  flex-direction: column; /* Ditumpuk ke bawah agar struktur tombol kokoh & rapi */
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.rpkg {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Membuat teks di kiri, panah otomatis di kanan */
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  padding: 1rem 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rpkg:hover {
  border-color: var(--aqua, #40c9d6);
  color: var(--dark, #0d1f26);
  background: var(--aqua, #40c9d6);
  transform: translateX(5px); /* Efek meluncur kecil ke kanan */
}

.rpkg::after {
  content: "→";
  font-size: 1.1rem;
  opacity: 0.5;
  transition:
    transform 0.3s ease,
    opacity 0.3s;
}

.rpkg:hover::after,
.rpkg.active-r::after {
  transform: translateX(3px);
  opacity: 1;
}

.rinjani-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 3rem; /* Jarak proporsional dari paragraf di atasnya */
}

.btn-rinjani-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: var(--aqua, #40c9d6);
  color: #0d1f26;
  padding: 1.1rem 2.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(64, 201, 214, 0.25);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-rinjani-primary:hover {
  background: var(--white, #ffffff);
  color: #0d1f26;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.25);
}

.btn-rinjani-primary svg.feather {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.btn-rinjani-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white, #ffffff);
  padding: 1rem 2.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-rinjani-outline:hover {
  border-color: var(--aqua, #40c9d6);
  color: var(--aqua, #40c9d6);
  background: rgba(64, 201, 214, 0.05);
  transform: translateY(-3px);
}
/* ==========================================================================
   ── RINJANI LOMBOK PARADISE END ──
   ========================================================================== */

/* ==========================================================================
   ── GALLERY LOMBOK PARADISE START ──
   ========================================================================== */
.gallery {
  background: var(--cream);
  padding: 6rem 4rem;
}

.gallery-header {
  text-align: center;
  margin-bottom: 3rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 280px 200px;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.gal-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.gal-item:nth-child(1) {
  grid-column: 1 / 3;
}

.gal-item:nth-child(5) {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
}

.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.6s ease,
    filter 0.4s;
}

.gal-item:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

.gal-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.8rem 1rem;
  background: linear-gradient(to top, rgba(10, 31, 38, 0.75), transparent);
  color: var(--white);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s;
}

.gal-item:hover .gal-label {
  opacity: 1;
}

.galeri-action-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  width: 100%;
}

.btn-galeri-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(65, 7, 139, 0.7);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
  transition: color 0.3s ease;
}

/* ── PERBAIKAN DI SINI ── */
.btn-galeri-more::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Diubah ke 2px agar garis terlihat lebih tegas */

  /* Menggunakan sintaks fallback var() yang benar (tanpa spasi/koma langsung) */
  background: var(--aqua, #222424);

  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── PERBAIKAN DI SINI ── */
.btn-galeri-more .arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--aqua, #151718); /* Menggunakan tanda kurung yang benar */
}

/* ── PERBAIKAN DI SINI ── */
.btn-galeri-more:hover {
  color: var(--dark, #ffffff); /* Menggunakan tanda kurung yang benar */
}

.btn-galeri-more:hover::after {
  transform: scaleX(1);
}

.btn-galeri-more:hover .arrow {
  transform: translateX(6px);
}
/* ==========================================================================
   ── GALERI LOMBOK PARADISE END ──
   ========================================================================== */

/* ==========================================================================
   ── TESTIMONI LOMBOK PARADISE START ──
   ========================================================================== */
.testimonials {
  background: var(--ocean);
  padding: 6rem 4rem;
  text-align: center;
}

.testimonials .section-title {
  color: var(--sand);
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 3rem auto 0;
}

.testi-card {
  background: rgba(255, 255, 255, 0.06);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  transition: background 0.3s;
}

.testi-card:hover {
  background: rgba(255, 255, 255, 0.1);
}

.testi-stars {
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
}

.testi-text {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.testi-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  color: var(--white);
  flex-shrink: 0;
}

.testi-name {
  font-size: 0.8rem;
  color: var(--sand);
  font-weight: 400;
}

.testi-origin {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1em;
  margin-top: 0.1rem;
}
/* ==========================================================================
   ── TESTIMONI LOMBOK PARADISE END ──
   ========================================================================== */

/* ==========================================================================
                               ── DESTINASI START ──
   ========================================================================== */

/* ==========================================================================
   ── HERO DESTINASI START ──
   ========================================================================== */
.page-hero {
  position: relative;
  min-height: 50vh; /* Tinggi yang ideal dan tidak terlalu memakan ruang untuk halaman sub-menu */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f7fafd; /* Warna dasar cerah yang menyegarkan */
  padding-top: 70px; /* Menyesuaikan jarak agar pas di bawah tinggi navbar Anda */
  box-sizing: border-box;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(247, 250, 253, 0.3) 0%,
      rgba(247, 250, 253, 0.1) 50%,
      rgba(247, 250, 253, 0.95) 100%
        /* Tebal di bawah agar menyatu mulus dengan ombak putih */
    ),
    url("img/rinjani.jpg") center/cover no-repeat; /* Menggunakan gambar lanskap yang cerah */
  filter: contrast(1.03) brightness(1.1); /* Menaikkan kecerahan gambar latar secara alami */
}

.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem 5rem 2rem; /* Padding bawah 5rem menjadi bemper agar teks aman dari potongan ombak */
  text-align: center;
  box-sizing: border-box;
}

.page-hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #008fa0; /* Warna biru toska tua sebagai aksen tropis yang tegas */
  margin-bottom: 0.8rem;
}
.page-hero-title {
  color: #0b2228; /* Deep Navy: Teks dijamin super tajam dan sangat mudah dibaca */
  font-size: clamp(
    2.4rem,
    5vw,
    3.8rem
  ); /* Ukuran teks adaptif otomatis di berbagai layar */
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.page-hero-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: var(
    --gold,
    #c9a84c
  ); /* Menggunakan warna emas identitas Lombok Paradise */
}

.page-hero-sub {
  color: #c7d6da; /* Abu-abu gelap eksklusif agar kontrasnya pas di mata */
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.7;
  font-weight: 400;
  max-width: 620px;
  margin: 0 auto;
}

.page-wave {
  position: absolute;
  bottom: -2px; /* Mengunci paksa tepat di pembatas paling bawah section */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 3;
}

.page-wave svg {
  display: block;
  width: 100%;
  height: 65px; /* Tinggi kelengkungan ombak yang proporsional */
}

.page-wave path {
  fill: #ffffff; /* Menggunakan putih bersih agar menyatu mulus dengan section putih di bawahnya */
}
/* ==========================================================================
   ── HERO DESTINASI END ──
   ========================================================================== */

/* ==========================================================================
   ── HIGHLIGHT DESTINASI START ──
   ========================================================================== */
section[style*="background: var(--cream)"] {
  background-color: #faf6ee !important; /* Krem lembut premium */
  padding: 6rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

.dest-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 5rem auto;
}

.section-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #008fa0; /* Aksen Toska Tua */
  margin-bottom: 1rem;
}

.section-title {
  color: #0b2228;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.section-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: var(--gold, #c9a84c);
}

.section-lead {
  color: #3d565c;
  font-size: 1.05rem;
  line-height: 1.8;
  font-weight: 400;
  margin-bottom: 2.5rem;
}

/* Blok Statistik */
.dest-intro-stats {
  display: flex;
  gap: 3rem;
  border-top: 1px solid rgba(11, 34, 40, 0.1);
  padding-top: 2rem;
}

.stat h3 {
  font-size: 2.2rem;
  font-weight: 500;
  color: #0b2228;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat h3 span {
  color: var(--gold, #c9a84c);
  font-weight: 600;
}

.stat p {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7c9398;
}

/* Gambar Kanan Intro */
.dest-intro div:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.dest-intro img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 4px 6px -1px rgba(11, 34, 40, 0.05),
    0 20px 40px -15px rgba(11, 34, 40, 0.15);
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dest-intro img:hover,
.dest-intro img:active {
  transform: translateY(-8px) scale(1.01); /* Gambar terangkat sedikit ke atas secara anggun */

  /* Bayangan menajam ke bawah mengikuti pergerakan gambar yang melayang naik */
  box-shadow:
    0 10px 15px -3px rgba(11, 34, 40, 0.08),
    0 30px 50px -10px rgba(11, 34, 40, 0.25);
}

.dest-grid-full {
  display: grid;
  grid-template-columns: repeat(
    6,
    1fr
  ); /* Basis grid 6 kolom untuk variasi lebar */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Pengaturan Dasar Kartu */
.dest-card {
  position: relative;
  grid-column: span 2; /* Default kartu kecil memakan 2 kolom (total 3 kartu per baris) */
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 34, 40, 0.08);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Variasi Lebar Kartu (Wide & Large) */
.dest-card.wide {
  grid-column: span 4; /* Kartu lebar memakan 4 kolom */
}

.dest-card.large {
  grid-column: span 4;
}

/* Gambar di Dalam Kartu */
.dest-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lapisan Gelap Pembungkus Teks (Overlay) */
.dest-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 34, 40, 0.9) 0%,
    rgba(11, 34, 40, 0.4) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  box-sizing: border-box;
  z-index: 2;
}

/* Komponen Detail Teks di Kartu */
.dest-tag {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-light, #e8c97a);
  margin-bottom: 0.5rem;
}

.dest-name {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
}

/* 1. Kondisi Awal (Diam / Normal) */
.dest-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;

  /* State Awal: Sembunyi secara visual & dikunci tingginya */
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  transform: translateY(15px);

  /* Pindahkan fungsi pemangkasan 3 baris di sini (Kondisi Diam) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Transisi khusus pergerakan meluncur */
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.4s ease,
    margin 0.4s ease;
}

/* 2. Kondisi Saat Di-Hover / Di-Sentuh (Ganti Kode Anda dengan Ini) */
.dest-card:hover .dest-desc,
.dest-card:focus .dest-desc,
.dest-card:active .dest-desc {
  opacity: 1;
  max-height: 120px; /* Melonggarkan ruang tinggi agar tulisan keluar */
  transform: translateY(0); /* Kembali ke posisi semula */
  margin-bottom: 1.5rem; /* Memberi jarak aman ke elemen di bawahnya */

  /* JANGAN masukkan properti 'display: -webkit-box' lagi di sini agar animasi tidak rusak */
}

/* Pil Kategori (Pills) */
.dest-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}

.pill {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Baris Tombol Aksi (CTA Row) */
.dest-cta-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.dest-link {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s;
}

.dest-link:hover {
  color: var(--gold-light, #e8c97a);
}

/* Tombol WA Pendek */
.wa-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #25d366;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.3s;
}

.wa-sm svg {
  width: 16px;
  height: 16px;
  fill: #25d366;
}

.wa-sm:hover {
  opacity: 0.85;
}

/* Efek Hover Animasi Zoom Kartu */
.dest-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(11, 34, 40, 0.2);
}

.dest-card:hover img {
  transform: scale(1.06);
}
/* ==========================================================================
   ── HIGHLIGHT DESTINASI END ──
   ========================================================================== */

/* ==========================================================================
   ── INFO STRIP DESIGN DESTINASI START ──
   ========================================================================== */
.info-strip {
  background-color: #ffffff; /* Putih bersih kontras dengan area krem di atasnya */
  padding: 5rem 2rem;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Kolom sejajar di desktop */
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.info-item {
  background: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  text-align: center;
  /* Memberikan border tipis elegan daripada bayangan hitam tebal */
  border: 1px solid rgba(11, 34, 40, 0.06);
  box-shadow: 0 10px 30px rgba(11, 34, 40, 0.03);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-icon {
  width: 60px;
  height: 60px;
  background-color: rgba(
    0,
    168,
    181,
    0.08
  ); /* Efek warna air laut transparan */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem; /* Ukuran emoji proporsional */
  margin-bottom: 1.5rem;
  transition: all 0.4s ease;
}

.info-item h3 {
  color: #0b2228; /* Deep Navy */
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}

.info-item p {
  color: #5a7175; /* Abu-abu redup premium */
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}

.info-item:hover {
  transform: translateY(-7px);
  border-color: rgba(
    201,
    168,
    76,
    0.3
  ); /* Mengubah border ke arah warna emas saat didekati */
  box-shadow: 0 20px 40px rgba(11, 34, 40, 0.08);
}

.info-item:hover .info-icon {
  background-color: var(
    --gold,
    #c9a84c
  ); /* Lingkaran berubah menjadi emas penuh */
  transform: scale(1.05) rotate(5deg); /* Sedikit membesar dan miring estetik */
}
/* ==========================================================================
   ── INFO STRIP DESIGN DESTINASI END ──
   ========================================================================== */

/* ==========================================================================
   ── CTA DESTINASI START ──
   ========================================================================== */
.cta-band {
  display: block !important; /* Memastikan tidak terganggu sistem flex luar */
  width: 90% !important; /* Lebar seimbang 90% murni */
  max-width: 1100px !important;
  margin: 5rem auto !important; /* 🎯 Kunci Simetris: Atas-bawah 5rem, Kanan-Kiri OTOMATIS seimbang */
  padding: 4rem 2rem !important; /* Padding kanan-kiri disamakan rata (2rem) */
  text-align: center !important; /* 🎯 Memaksa seluruh isi teks tegak lurus di tengah */
  background: linear-gradient(135deg, #f4f9fb 0%, #e8f5f8 100%) !important;
  border-radius: 24px !important;
  box-sizing: border-box !important; /* Mengunci total agar padding tidak merusak simetrisitas */
  overflow: hidden !important;
  box-shadow: 0 20px 40px rgba(13, 31, 38, 0.03);
}

/* 2. Gaya Teks Alis Kategori (Section Eyebrow) */
.cta-band .section-eyebrow {
  color: #c9a84c !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin: 0 auto 0.8rem auto !important; /* Rata tengah */
  display: block !important;
  text-align: center !important;
}

/* 3. Gaya Judul Utama (Section Title) */
.cta-band .section-title {
  color: #0d1f26 !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  /* 🎯 Margin kanan-kiri dipaksa AUTO agar judul tidak miring ke kanan */
  margin: 0 auto 1.2rem auto !important;
  max-width: 700px !important;
  width: 100% !important;
}

/* Gaya Teks Italic (Menggoda Anda?) */
.cta-band .section-title em {
  font-family: "Cormorant Garamond", serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  color: #1a9bb8 !important;
}

/* 4. Deskripsi Paragraf */
.cta-band p {
  color: #4a6572 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  /* 🎯 Margin kanan-kiri dipaksa AUTO agar paragraf berada di tengah */
  margin: 0 auto 2.5rem auto !important;
  max-width: 650px !important;
  width: 100% !important;
}

.cta-band .wa-big {
  display: inline-flex !important; /* Menjaga tombol tetap proporsional mengikuti teks */
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  background-color: #25d366 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 1.1rem 2.4rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3) !important;
  /* 🎯 Memastikan tombol berada di titik tengah as roda */
  margin: 0 auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Gaya Ukuran Ikon SVG WhatsApp di Dalam Tombol */
.cta-band .wa-big svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
}

/* Efek Kontak Saat Kursor/Sentuhan Mendekat */
.cta-band .wa-big:hover {
  background-color: #20ba59;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.45);
}

.cta-band .wa-big:hover svg {
  transform: scale(1.15) rotate(-8deg); /* Ikon WA sedikit memuntir estetik */
}
/* ==========================================================================
   ── CTA DESTINASI END ──
   ========================================================================== */

/* ==========================================================================
                              ── DESTINASI END ──
   ========================================================================== */

/* ==========================================================================
                             ── PAKET WISATA START ──
   ========================================================================== */

/* ==========================================================================
   ── HERO PAKET WISATA START ──
   ========================================================================== */
.page-hero-section {
  position: relative;
  min-height: 65vh; /* Menentukan tinggi area hero */
  display: flex;
  align-items: center; /* Membuat teks otomatis berada di tengah-tengah tinggi hero */
  justify-content: center;
  overflow: hidden;
  background-color: #071419;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(7, 20, 25, 0.5) 0%,
      rgba(7, 20, 25, 0.2) 60%,
      rgba(7, 20, 25, 0.8) 100%
        /* Menggelapkan bagian bawah agar menyatu dengan konten selanjutnya */
    ),
    url("img/rinjani.jpg") center/cover no-repeat;
  transform: scale(1.02);
}

.page-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  /* Hapus padding bottom atau margin masif di sini agar tidak mendorong elemen lain */
}

.page-hero-content {
  margin-bottom: 0; /* Menghilangkan jarak dorong */
}
/* Breadcrumb Minimalis Premium */

.breadcrumb {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1rem;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb a:hover {
  color: var(--aqua, #40c9d6);
}

.page-title {
  color: #ffffff;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.page-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--aqua, #40c9d6);
}

.hero-wave {
  position: absolute; /* Diposisikan absolut terhadap .hero-section, bukan .hero-container */
  bottom: -1px; /* Mengunci tepat di dasar bagian bawah */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 3; /* Berada di atas background dan teks jika tumpang tindih */
}

.hero-wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 80px; /* Anda bisa mengecilkan ini (misal: 60px) jika ombak dirasa terlalu tinggi */
}

.hero-wave path {
  fill: #ffffff; /* Warna ombak diubah ke putih bersih agar menyatu dengan halaman bawahnya */
}
/* ==========================================================================
   ── HERO PAKET WISATA END ──
   ========================================================================== */

/* ==========================================================================
   ── PACKAGES PAKET WISATA START ──
   ========================================================================== */
.pkg-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
  padding-top: 5rem; /* Memberikan ruang bernapas dari navbar atas agar tidak menempel */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* Kategori Kecil di Atas */
.pkg-header .section-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #008fa0; /* Biru toska petualangan khas Lombok Paradise */
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: center;
}

/* Judul Utama */
.pkg-header .section-title {
  color: #0b2228; /* Deep Navy kokoh agar sangat mudah dibaca */
  font-size: clamp(
    2.2rem,
    4vw,
    3.2rem
  ); /* Ukuran teks dinamis yang otomatis mengecil di HP */
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1.2rem 0;
  letter-spacing: -0.01em;
}

/* Sentuhan Estetik pada Kata "Wisata" */
.pkg-header .section-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: #c9a84c; /* Warna emas signature premium */
}

/* Deskripsi Pendek di Bawah Judul */
.pkg-header .section-lead {
  color: #5a7175; /* Abu-abu gelap eksklusif */
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto;
}
/* ==========================================================================
   ── PACKAGES PAKET WISATA END ──
   ========================================================================== */

/* ==========================================================================
   ── CTA PAKET WISATA START ──
   ========================================================================== */
.cta-premium-section {
  position: relative;
  background-color: #faf6ee; /* Menggunakan warna krem lembut tropis agar seimbang dengan area atas */
  padding: 5rem 2rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.cta-premium-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 80% 20%,
    rgba(201, 168, 76, 0.08) 0%,
    transparent 50%
  );
  z-index: 1;
}

.cta-premium-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Judul di kiri, tombol pemicu di kanan */
  gap: 3rem;
  background: #0d1f26; /* Menggunakan warna Navy khas Lombok Paradise agar kontras tinggi */
  padding: 3.5rem 4rem;
  border-radius: 12px; /* Sudut melengkung halus modern */
  box-shadow: 0 20px 40px rgba(13, 31, 38, 0.15);
  box-sizing: border-box;
}

.cta-premium-content {
  max-width: 600px;
  text-align: left;
}

.cta-title {
  color: #ffffff;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}

.cta-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light, #e8c97a); /* Warna aksen emas mewah */
}

.cta-lead {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
}

.btn-cta-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background-color: var(--gold, #c9a84c);
  color: #0d1f26; /* Teks gelap di atas warna emas agar sangat jelas dibaca */
  padding: 1.1rem 2.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(201, 168, 76, 0.2);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap; /* Mencegah teks tombol terpotong ke bawah */
}

.btn-cta-gold svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #0d1f26 !important;
  stroke-width: 2.3;
}

.btn-cta-gold:hover {
  background-color: #ffffff; /* Berubah menjadi putih bersih premium */
  color: #0d1f26;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(255, 255, 255, 0.25);
}

.btn-cta-gold:hover svg {
  stroke: #0d1f26 !important;
}
/* ==========================================================================
   ── CTA PAKET WISATA END ──
   ========================================================================== */

/* ==========================================================================
                               ── PAKET WISATA END ──
   ========================================================================== */

/* ==========================================================================
                               ── RINJANI START ──
   ========================================================================== */

/* ==========================================================================
   ── HERO RINJANI START ──
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f7fafd;
  padding-top: 90px;
  box-sizing: border-box;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(247, 250, 253, 0.2) 0%,
      rgba(247, 250, 253, 0.75) 80%,
      rgba(250, 246, 238, 1) 100%
    ),
    url("img/rinjani.jpg") center/cover no-repeat;
}

.hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem 2rem;
  text-align: center;
  box-sizing: border-box;
}

.hero-eyebrow {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #008fa0;
  margin-bottom: 1rem;
}

.hero-title {
  color: #0b2228;
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1.5rem 0;
}

.hero-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: #c9a84c;
}

.hero-sub {
  color: #3d565c;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 3rem auto;
}

/* ── SPESIFIKASI ROW (DESKTOP) ── */
.hero-specs-grid {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.hspec-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hspec-val {
  font-size: 1.6rem;
  font-weight: 600;
  color: #0b2228;
}

.hspec-lbl {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7c9398;
  margin-top: 0.2rem;
}

/* ── TOMBOL PREMIUM (DESKTOP) ── */
.hero-btns-wrapper {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.btn-rinjani-gold {
  background-color: #c9a84c;
  color: #ffffff !important;
  padding: 1.1rem 2.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(201, 168, 76, 0.2);
  transition: all 0.35s ease;
}

.btn-rinjani-transparent {
  background-color: transparent;
  color: #0b2228 !important;
  padding: 1.1rem 2.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 50px;
  border: 1.5px solid #0b2228;
  transition: all 0.35s ease;
}

.btn-rinjani-gold:hover {
  background-color: #0b2228;
  transform: translateY(-3px);
}

.btn-rinjani-transparent:hover {
  background-color: rgba(11, 34, 40, 0.05);
  transform: translateY(-3px);
}

.hero-wave-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 3;
  line-height: 0;
}

.hero-wave-bottom svg {
  width: 100%;
  height: 60px;
}

.breadcrumb-container {
  background-color: #faf6ee;
  width: 100%;
}

.breadcrumb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 0 2rem;
  font-size: 0.85rem;
  color: #7c9398;
}

.breadcrumb-inner a {
  color: #3d565c;
  text-decoration: none;
}

.breadcrumb-inner span {
  margin: 0 0.7rem;
  color: rgba(11, 34, 40, 0.2);
}
/* ==========================================================================
   ── HERO RINJANI END ──
   ========================================================================== */

/* ==========================================================================
   ── ABOUT RINJANI START ──
   ========================================================================== */
.about-rinjani {
  background-color: #faf6ee; /* Warna krem lembut agar serasi dengan fill ombak hero */
  padding: 7rem 2rem;
  width: 100%;
  overflow: hidden; /* Tameng pelindung kebocoran horizontal */
  box-sizing: border-box;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

/* ── KIRI: ASYMMETRICAL IMAGE LAYOUT (TUMPUKAN FOTO) ── */
.about-grid > div:first-child {
  grid-column: span 6;
}

.about-img-wrap {
  position: relative;
  width: 100%;
  height: 480px;
}

/* Foto Utama (Besar - Belakang) */
.about-img-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 75%;
  height: 85%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(11, 34, 40, 0.12);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Foto Aksen (Kecil - Depan Bertumpuk) */
.about-img-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 60%;
  object-fit: cover;
  border-radius: 12px;
  border: 8px solid #faf6ee; /* Frame pembatas warna krem agar tumpukan terlihat clean */
  box-shadow: 0 15px 35px rgba(11, 34, 40, 0.18);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Badge Ketinggian Melayang (MDPL) */
.about-badge {
  position: absolute;
  left: 5%;
  bottom: 20%;
  background-color: #0b2228; /* Deep Navy premium */
  color: #ffffff;
  padding: 1rem 1.4rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(11, 34, 40, 0.25);
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-badge strong {
  font-size: 1.6rem;
  font-weight: 600;
  color: #c9a84c; /* Emas signature */
  line-height: 1;
}

.about-badge span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.2rem;
}

/* Efek Hover Halus pada Tumpukan Foto */
.about-img-wrap:hover .about-img-main {
  transform: scale(1.02) translateY(-5px);
}

.about-img-wrap:hover .about-img-accent {
  transform: scale(1.04) translate(-5px, -5px);
}

/* ── KANAN: TIPOGRAFI & KONTEN TEKS ── */
.about-grid > div:last-child {
  grid-column: span 6;
}

.about-rinjani .section-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #008fa0;
  margin-bottom: 0.8rem;
}

.about-rinjani .section-title {
  color: #0b2228;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

.about-rinjani .section-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: #c9a84c;
}

.about-rinjani .section-lead {
  color: #4a5f64;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0;
}

/* ── KANAN BAWAH: FACT GRID (4 POIN PENTING) ── */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}

.fact-item {
  position: relative;
  padding-left: 1.2rem;
}

/* Garis aksen emas vertikal di sebelah kiri setiap poin judul */
.fact-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 3px;
  height: 16px;
  background-color: #c9a84c;
  border-radius: 2px;
}

.fact-item h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0b2228;
  margin: 0 0 0.4rem 0;
}

.fact-item p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #6b8287;
  margin: 0;
}
/* ==========================================================================
   ── ABOUT RINJANI END ──
   ========================================================================== */

/* ==========================================================================
   ── PACKAGES RINJANI START ──
   ========================================================================== */
.paket-section {
  background-color: #faf6ee; /* Menggunakan warna krem lembut agar mengalir mulus */
  padding: 6rem 2rem;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.paket-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
  padding-top: 5rem; /* Memberikan jarak bernapas yang cukup dari elemen atas/navbar */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

.paket-header .section-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #008fa0; /* Warna biru toska petualangan khas Lombok Paradise */
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: center;
}

.paket-header .section-title {
  color: #0b2228; /* Deep Navy kokoh agar kontras dan tajam */
  font-size: clamp(
    2.2rem,
    4vw,
    3.2rem
  ); /* Ukuran huruf fleksibel yang otomatis mengecil di HP */
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1.2rem 0;
  letter-spacing: -0.01em;
}

.paket-header .section-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: #c9a84c; /* Akses emas signature */
}

.paket-header .section-lead {
  color: #5a7175; /* Abu-abu gelap eksklusif */
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  max-width: 650px;
  margin: 0 auto;
}

/* ── GRID CONFIGURATION ── */
.paket-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* ── KARTU PAKET UTAMA ── */
.paket-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 34, 40, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(11, 34, 40, 0.05);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.paket-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(11, 34, 40, 0.12);
}

/* 🌟 POPULER/FEATURED CARD HIGHLIGHT (PAKET 2) */
.paket-card.featured {
  border: 2px solid #c9a84c;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(201, 168, 76, 0.15);
}

.paket-card.featured:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 45px rgba(201, 168, 76, 0.25);
}

/* Label Tambahan khusus Paket Terpopuler di bagian atas */
.paket-card.featured::before {
  content: "TERPOPULER";
  position: absolute;
  top: 15px;
  left: 15px;
  background: #c9a84c;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  letter-spacing: 0.1em;
  z-index: 3;
}

/* ── AREA GAMBAR & TAG KESULITAN ── */
.paket-img {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.paket-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

.difficulty {
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  color: #ffffff;
  letter-spacing: 0.05em;
  z-index: 2;
}

.diff-easy {
  background-color: #2e7d32;
} /* Hijau teduh untuk Pemula */
.diff-medium {
  background-color: #008fa0;
} /* Biru toska untuk Menengah */
.diff-hard {
  background-color: #c62828;
} /* Merah marun untuk Lanjutan */

/* ── BADAN KARTU (BODY KONTEN) ── */
.paket-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.paket-duration {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #c9a84c;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem 0;
}

.paket-title {
  color: #0b2228;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  min-height: 52px; /* Menjaga keselarasan tinggi judul antar kartu desktop */
}

.paket-desc {
  color: #5a7175;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

/* Daftar Fasilitas Pendakian (Includes) */
.paket-includes {
  list-style: none;
  padding: 0;
  margin: auto 0 0 0; /* Mendorong daftar melekat rapi di atas footer */
  border-top: 1px solid rgba(11, 34, 40, 0.06);
  padding-top: 1.5rem;
}

.paket-includes li {
  font-size: 0.88rem;
  color: #4a5f64;
  margin-bottom: 0.6rem;
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.4;
}

/* Efek kustom checklist hijau centang minimalis */
.paket-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2e7d32;
  font-weight: 700;
}

/* ── AREA FOOTER & HARGA ── */
.paket-footer {
  padding: 1.5rem 2rem 2rem 2rem;
  background-color: #fcfbfa;
  border-top: 1px solid rgba(11, 34, 40, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.paket-price {
  display: flex;
  flex-direction: column;
}

.paket-price .from {
  font-size: 0.75rem;
  color: #7c9398;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.paket-price .amount {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0b2228;
  line-height: 1.1;
  margin: 0.1rem 0;
}

.paket-price .per {
  font-size: 0.75rem;
  color: #7c9398;
}

/* ── TOMBOL WHATSAPP ── */
.wa-btn {
  background-color: #25d366; /* Warna asli identitas WhatsApp */
  color: #ffffff !important;
  text-decoration: none;
  padding: 0.8rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.2);
  transition: all 0.3s ease;
}

.wa-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.wa-btn:hover {
  background-color: #128c7e; /* Hijau WhatsApp gelap saat kursor mengarah */
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(18, 140, 126, 0.3);
}
/* ==========================================================================
   ── PACKAGES RINJANI END ──
   ========================================================================== */

/* ==========================================================================
   ── ITINERARY RINJANI START ──
   ========================================================================== */
.itinerary {
  background-color: #ffffff; /* Latar belakang putih bersih agar kontras dengan bagian paket */
  padding: 6rem 2rem;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── HEADER FORMATTING ── */
.itinerary .section-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #008fa0;
  display: flex;
  margin-bottom: 0.5rem;
}

.itinerary .section-title {
  color: #0b2228;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 auto 3rem auto;
}

.itinerary .section-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: #c9a84c;
}

/* ── KONTROLLER NAVIGATION TABS ── */
.itin-wrap {
  max-width: 850px; /* Ukuran menyempit eksklusif agar membaca timeline lebih fokus */
  margin: 0 auto;
}

.itin-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 4rem;
  width: 100%;
}

.itin-tab {
  background-color: #f4f7f8;
  color: #5a7175;
  border: 1px solid rgba(11, 34, 40, 0.05);
  padding: 0.9rem 1.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.35s ease;
}

/* State Tab Aktif */
.itin-tab.active {
  background-color: #0b2228;
  color: #ffffff;
  border-color: #0b2228;
  box-shadow: 0 10px 20px rgba(11, 34, 40, 0.15);
}

/* ── LOGIKA SWITCH PANEL DISPLAY ── */
.itin-panel {
  display: none; /* Sembunyikan default panel */
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.itin-panel.active {
  display: block; /* Tampilkan panel aktif */
  opacity: 1;
  transform: translateY(0);
}

/* ── STRUKTUR UTAMA TIMELINE PATH ── */
.itin-days {
  position: relative;
  padding: 1rem 0;
}

/* Garis vertikal tipis penghubung antar hari */
.itin-days::before {
  content: "";
  position: absolute;
  left: 26px; /* Senter tepat di tengah lingkaran nomor hari */
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(201, 168, 76, 0.1) 0%,
    #c9a84c 15%,
    #c9a84c 85%,
    rgba(201, 168, 76, 0.1) 100%
  );
}

.itin-day {
  display: flex;
  gap: 2.5rem;
  position: relative;
  margin-bottom: 3.5rem;
}

/* Mencegah margin sisa pada baris terakhir hari */
.itin-day:last-child {
  margin-bottom: 0;
}

/* ── LINGKARAN NOMOR HARI (TIMELINE NODE) ── */
.itin-num {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.itin-circle {
  width: 54px;
  height: 54px;
  background-color: #ffffff;
  border: 2px solid #c9a84c;
  color: #0b2228;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(11, 34, 40, 0.05);
}

/* ── BLOK KONTEN DETAIL ── */
.itin-content {
  flex-grow: 1;
  padding-top: 0.4rem; /* Sejajar lurus dengan pucuk lingkaran */
}

.itin-day-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c9a84c;
  margin: 0 0 0.4rem 0;
}

.itin-day-title {
  color: #0b2228;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.8rem 0;
}

.itin-day-desc {
  color: #5a7175;
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 1.2rem 0;
  text-align: justify;
}

/* ── TIMELINE MIKRO TAGS ── */
.itin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.itin-tag {
  background-color: #f4f7f8;
  color: #4a5f64;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  border: 1px solid rgba(11, 34, 40, 0.03);
}

.itin-tag {
  background-color: #f4f7f8;
  color: #4a5f64;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  border: 1px solid rgba(11, 34, 40, 0.03);
  display: inline-block;
}

/* Gaya khusus ketika tag memiliki atribut data-status="warning" */
.itin-tag[data-status="warning"] {
  background-color: #fff3cd !important; /* Warna latar kuning madu lembut */
  color: #856404 !important; /* Warna teks cokelat gelap agar kontras */
  border: 1px solid #ffeeba !important; /* Bingkai pembatas kuning hangat */
  font-weight: 600 !important;
}
/* ==========================================================================
   ── ITINERARY RINJANI END ──
   ========================================================================== */

/* ==========================================================================
   ── TIPS RINJANI START ──
   ========================================================================== */
.tips-section {
  background-color: #faf6ee; /* Krem lembut senada dengan kelengkungan wave Rinjani */
  padding: 6rem 2rem;
  width: 100%;
  overflow: hidden; /* Mengunci kebocoran elemen ke kanan */
  box-sizing: border-box;
}

/* ── HEADER FORMATTING ── */
.tips-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.tips-header .section-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #008fa0; /* Biru toska petualangan */
  margin-bottom: 0.8rem;
}

.tips-header .section-title {
  color: #0b2228; /* Deep Navy kokoh */
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.tips-header .section-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: #c9a84c; /* Akses emas signature */
}

/* ── TATA LETAK GRID 3 KOLOM (DESKTOP) ── */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

/* ── KARTU PANDUAN (TIP CARD) ── */
.tip-card {
  background: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  border: 1px solid rgba(11, 34, 40, 0.04);
  box-shadow: 0 10px 30px rgba(11, 34, 40, 0.03);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease;
}

/* Efek Angkat Saat Di-hover */
.tip-card:hover {
  transform: translateY(-6px);
  border-color: rgba(
    201,
    168,
    76,
    0.3
  ); /* Bingkai berubah emas transparan halus */
  box-shadow: 0 20px 40px rgba(11, 34, 40, 0.08);
}

/* Wadah Emoji / Ikon */
.tip-icon {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
  display: inline-block;
  line-height: 1;
  transition: transform 0.4s ease;
}

.tip-card:hover .tip-icon {
  transform: scale(1.15) rotate(5deg); /* Animasi mikro interaktif pada emoji */
}

/* Judul Tip */
.tip-card h4 {
  color: #0b2228;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.01em;
}

/* Deskripsi Konten */
.tip-card p {
  color: #5a7175;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
  text-align: justify;
}
/* ==========================================================================
   ── TIPS RINJANI END ──
   ========================================================================== */

/* ==========================================================================
   ── GALLERY RINJANI START ──
   ========================================================================== */
.gal-strip {
  display: flex;
  width: 100%;
  height: 280px; /* Tinggi strip yang ideal di desktop */
  overflow: hidden;
  box-sizing: border-box;
  background-color: #0b2228; /* Dasar Navy gelap agar efek transisi foto terlihat sinematik */
  gap: 0px; /* Merapatkan foto tanpa celah untuk efek seamless */
}

/* ── WADAH ITEM FOTO ── */
.gal-strip-item {
  flex: 1; /* Semua foto membagi ruang secara rata saat default */
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* Transisi super halus menggunakan cubic-bezier premium */
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Elemen Gambar di Dalam Item */
.gal-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) brightness(85%); /* Sedikit dramatis saat diam */
  transition:
    filter 0.6s ease,
    transform 0.6s ease;
}

/* ── LOGIKA HOVER INTERAKTIF (FLEX EXPAND) ── */

/* 1. Ketika area galeri di-hover, semua foto otomatis sedikit meredup */
.gal-strip:hover .gal-strip-item img {
  filter: grayscale(40%) brightness(60%);
}

/* 2. KECUALI foto yang sedang ditunjuk secara spesifik oleh kursor (Akan Melebar & Terang) */
.gal-strip-item:hover {
  flex: 2.2; /* Foto yang di-hover melebar secara signifikan */
}

.gal-strip-item:hover img {
  filter: grayscale(0%) brightness(105%); /* Warna asli foto keluar dengan cerah */
  transform: scale(1.05); /* Sedikit zoom-in dramatis */
}

/* Memberikan efek bayangan halus di sisi kiri-kanan bagian dalam foto yang aktif */
.gal-strip-item::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.gal-strip-item:hover::after {
  opacity: 1;
}
/* ==========================================================================
   ── GALLERY RINJANI END ──
   ========================================================================== */

/* ==========================================================================
   ── CTA RINJANI START ──
   ========================================================================== */
/* .cta-band {
  background-color: #faf6ee;
  padding: 5rem 2rem;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.cta-band .section-eyebrow {
  /* font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #008fa0;
  margin-bottom: 0.8rem;
  display: flex;
}

.cta-band .section-title {
  color: #0b2228;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 auto 1.2rem auto;
  max-width: 700px;
}

.cta-band .section-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: #c9a84c;
}

.cta-band p:not(.section-eyebrow) {
  color: #5a7175;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 2.5rem auto;
}

.wa-big {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem;
  background-color: #00bfa5;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 1.1rem 2.5rem; 
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 50px;
  line-height: 1 !important;
  box-shadow: 0 10px 25px rgba(0, 191, 165, 0.25);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-big svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

.wa-big:hover {
  background-color: #0b2228; 
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(11, 34, 40, 0.25);
}
/* ==========================================================================
   ── CTA RINJANI END ──
   ========================================================================== */

/* ==========================================================================
                               ── RINJANI END ──
   ========================================================================== */

/* ==========================================================================
                               ── GALERI START ──
   ========================================================================== */

/* ==========================================================================
    ── HERO GALERI START ──
   ========================================================================== */
.page-hero {
  position: relative;
  min-height: 55vh; /* Tinggi proporsional yang mewah untuk halaman sub-menu */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0d1f26; /* Dasar gelap untuk transisi gambar sinematik */
  padding-top: 80px; /* Bemper aman agar tidak tertabrak oleh navbar fixed Anda */
  box-sizing: border-box;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(13, 31, 38, 0.5) 0%,
      rgba(13, 31, 38, 0.2) 50%,
      rgba(13, 31, 38, 0.85) 100%
        /* Menggelap di bawah agar menyatu mulus ke ombak */
    ),
    url("img/rinjani.jpg") center/cover no-repeat; /* Otomatis menggunakan aset gambar utama Anda */
  transform: scale(
    1.03
  ); /* Menghilangkan efek garis putih bocor di pinggiran layar */
  transition: transform 0.8s ease;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  padding: 0 2rem 5rem 2rem; /* Padding bawah sebagai bemper agar teks tidak termakan ombak */
  text-align: center;
  box-sizing: border-box;
}

.page-hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(
    --aqua,
    #40c9d6
  ); /* Toska terang signature agar langsung menyala */
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 10px rgba(64, 201, 214, 0.2);
}

.page-hero-title {
  color: #ffffff;
  font-size: clamp(
    2.6rem,
    5.5vw,
    4rem
  ); /* Responsif otomatis: mengecil di HP, membesar di Desktop */
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.page-hero-title em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold-light, #e8c97a); /* Emas mewah identitas Lombok Paradise */
  text-shadow: none;
}

.page-hero-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.75;
  font-weight: 300;
  max-width: 650px;
  margin: 0 auto;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page-wave {
  position: absolute;
  bottom: -1px; /* Mengunci paksa ke dasar section agar tidak ada celah pixel kosong */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 3;
}

.page-wave svg {
  display: block;
  width: 100%;
  height: 65px; /* Tinggi lengkungan proporsional */
}

.breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 0 2rem; /* Jarak pas setelah keluar dari lengkungan wave hero */
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--text-light, #4a6572);
  box-sizing: border-box;
}

.breadcrumb a {
  color: var(--text-light, #4a6572);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: var(--teal, #1a9bb8); /* Berubah menjadi toska saat didekati */
}

/* Simbol Pembatas (›) */
.breadcrumb span {
  margin: 0 0.8rem;
  color: rgba(13, 31, 38, 0.2);
  font-size: 1rem;
  font-weight: 400;
}

.breadcrumb strong {
  color: var(--dark, #0d1f26);
  font-weight: 600;
}
/* ==========================================================================
   ── HERO GALERI END ──
   ========================================================================== */

/* ==========================================================================
   ── FILTER GALERI START ──
   ========================================================================== */
.filter-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 2rem 2rem;
  box-sizing: border-box;
}

/* 1. Header Bagian Filter */
.filter-header {
  margin-bottom: 2.5rem;
  text-align: left; /* Teks rata kiri estetik ala portofolio modern */
}

.filter-header p {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal, #1a9bb8); /* Warna toska penanda kategori */
  margin-bottom: 0.5rem;
}

.filter-header h2 {
  color: var(--dark, #0d1f26);
  font-size: clamp(2rem, 4vw, 2.8rem); /* Ukuran adaptif otomatis */
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

.filter-header h2 em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: var(--gold, #c9a84c); /* Sentuhan emas khas Lombok Paradise */
}

/* 2. Tombol Navigasi Filter (Tabs) */
.filter-tabs {
  display: flex;
  flex-wrap: wrap; /* Otomatis melipat ke bawah jika layar kekecilan */
  gap: 0.8rem;
  border-bottom: 1px solid rgba(13, 31, 38, 0.08); /* Garis batas bawah tipis yang elegan */
  padding-bottom: 1.5rem;
}

/* Gaya Dasar Tombol Filter */
.filter-btn {
  background-color: #ffffff;
  color: var(--text-light, #4a6572);
  border: 1px solid rgba(13, 31, 38, 0.1);
  padding: 0.65rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 50px; /* Bentuk kapsul modern yang ramah sentuhan gawai */
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* Efek Hover (Kursor Mendekat) */
.filter-btn:hover {
  color: var(--dark, #0d1f26);
  border-color: var(--dark, #0d1f26);
  background-color: #fcfbfa;
  transform: translateY(-1px);
}

/* State Tombol yang Sedang Aktif/Diklik */
.filter-btn.active {
  background-color: var(
    --dark,
    #0d1f26
  ) !important; /* Berubah menjadi navy gelap eksklusif */
  color: #ffffff !important;
  border-color: var(--dark, #0d1f26) !important;
  box-shadow: 0 10px 20px rgba(13, 31, 38, 0.15);
  font-weight: 600;
}
/* ==========================================================================
   ── FILTER GALERI END ──
   ========================================================================== */

/* ==========================================================================
   ── GALLERY GALERI END ──
   ========================================================================== */

.gallery-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 5rem 2rem;
  box-sizing: border-box;
}

/* 1. Kontainer Utama Menggunakan CSS Columns */
.masonry {
  column-count: 3; /* Tiga kolom sejajar di desktop */
  column-gap: 1.5rem; /* Jarak horizontal antar kolom */
  width: 100%;
}

/* 2. Pembungkus Item Foto (Kartu) */
.masonry-item {
  position: relative;
  display: inline-block; /* Mencegah item terpotong di tengah jalan saat pindah kolom */
  width: 100%;
  margin-bottom: 1.5rem; /* Jarak vertikal antar foto */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(13, 31, 38, 0.05);
  cursor: pointer;
  background-color: #0d1f26; /* Dasar gelap penahan kedipan muat gambar */
  transform: translateY(0);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

/* 3. Pengaturan Gambar di Dalam Item */
.masonry-item img {
  display: block;
  width: 100%;
  height: auto; /* Mengikuti rasio asli foto agar efek masonry bekerja sempurna */
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4. Lapisan Gradasi Gelap (Overlay) Tempat Teks Berada */
.masonry-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(13, 31, 38, 0.85) 0%,
    rgba(13, 31, 38, 0.3) 50%,
    rgba(13, 31, 38, 0) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem;
  box-sizing: border-box;
  opacity: 0; /* Tersembunyi di awal */
  transition: opacity 0.4s ease;
}

/* 5. Gaya Teks di Dalam Overlay */
.masonry-cat {
  color: var(--aqua, #40c9d6); /* Toska terang signature */
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0 0 0.4rem 0;
  transform: translateY(10px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.masonry-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.01em;
  transform: translateY(10px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(13, 31, 38, 0.18);
}

/* Gambar membesar halus saat didekati */
.masonry-item:hover img {
  transform: scale(1.06);
}

/* Munculkan lapisan overlay penahan teks */
.masonry-item:hover .masonry-overlay {
  opacity: 1;
}

/* Teks meluncur naik secara anggun */
.masonry-item:hover .masonry-cat,
.masonry-item:hover .masonry-title {
  transform: translateY(0);
}

/* ==========================================================================
   ── GALLERY GALERI END ──
   ========================================================================== */

/* ==========================================================================
   ── VIDEO GALERI START ──
   ========================================================================== */
.video-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 5rem 2rem;
  box-sizing: border-box;
}

/* 1. Header Section Video */
.video-section h2 {
  color: var(--dark, #0d1f26);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.video-section h2 em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  color: var(--gold, #c9a84c); /* Sentuhan warna emas khas Lombok Paradise */
}

.video-section > p {
  color: var(--text-light, #4a6572);
  font-size: 1rem;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem auto;
  line-height: 1.6;
}

/* 2. Grid Tata Letak Tiga Kolom */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* 3. Kartu Thumbnail Video */
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9; /* Mengunci rasio video layar lebar standar */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(13, 31, 38, 0.08);
  cursor: pointer;
  background-color: #0d1f26;
  transform: translateY(0);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s ease;
  filter: brightness(0.9); /* Sedikit redup di awal agar tombol play kontras */
}

/* 4. Tombol Putar Tengah (Play Button) */
.play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.play-circle {
  width: 55px;
  height: 55px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.play-circle svg {
  width: 24px;
  height: 24px;
  fill: var(--dark, #0d1f26); /* Warna ikon mengikuti navy gelap website Anda */
  margin-left: 3px; /* Kompensasi visual agar segitiga tepat di tengah */
  transition: fill 0.3s ease;
}

/* 5. Label Judul Video di Pojok Bawah */
.video-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.5rem 1.5rem 1.2rem 1.5rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 2;
  box-sizing: border-box;
  background: linear-gradient(
    to top,
    rgba(13, 31, 38, 0.85) 0%,
    rgba(13, 31, 38, 0) 100%
  );
  transform: translateY(0);
  transition: transform 0.4s ease;
}

.video-thumb:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 35px rgba(13, 31, 38, 0.18);
}

/* Gambar membesar dan lebih terang saat di-hover */
.video-thumb:hover img {
  transform: scale(1.05);
  filter: brightness(1);
}

/* Tombol play membesar dan berubah warna menjadi toska/emas */
.video-thumb:hover .play-circle {
  transform: scale(1.12);
  background-color: var(--dark, #0d1f26);
}

.video-thumb:hover .play-circle svg {
  fill: var(--gold-light, #e8c97a); /* Segitiga berubah menjadi emas menyala */
}
/* ==========================================================================
   ── VIDEO GALERI END ──
   ========================================================================== */

/* ==========================================================================
                               ── GALERI END ──
   ========================================================================== */

/* ==========================================================================
                               ── CTA START ──
   ========================================================================== */
.cta-section {
  background: var(--sand-light);
  padding: 6rem 4rem;
  text-align: center;
}

.cta-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cta-section .section-lead {
  margin: 0 auto 2.5rem;
}

.wa-big {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: #25d366;
  color: var(--white);
  padding: 1.2rem 3rem;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(37, 211, 102, 0.35);
  transition:
    background 0.3s,
    transform 0.2s,
    box-shadow 0.3s;
}

.wa-big:hover {
  background: #20ba5a;
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(37, 211, 102, 0.45);
}

.wa-big svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.cta-note {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  color: var(--text-light);
  letter-spacing: 0.05em;
}
/* ==========================================================================
                                   ── CTA END ──
   ========================================================================== */

/* ==========================================================================
                                   ── FOOTER START ──
   ========================================================================== */
footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.5);
  padding: 4rem 4rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-logo {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 1rem;
  display: block;
}

.footer-logo span {
  color: var(--gold-light);
  font-style: italic;
}

.footer-about {
  font-size: 0.8rem;
  line-height: 1.8;
  max-width: 280px;
}

.footer-col h5 {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.2rem;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 0.6rem;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: var(--aqua);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
}

.footer-wa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #25d366;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}

.footer-wa:hover {
  opacity: 0.8;
}
/* ==========================================================================
                                     ── FOOTER END ──
   ========================================================================== */

/* ==========================================================================
                                     ── FLOATING WHATSAPP START ──
   ========================================================================== */
.float-wa {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  background: #25d366;
  color: var(--white);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
  text-decoration: none;
  animation: waPulse 2.5s ease-in-out infinite;
  transition: transform 0.2s;
}

.float-wa:hover {
  transform: scale(1.1);
}

.float-wa svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
/* ==========================================================================
                                   ── FLOATING WHATSAAPP END ──
   ========================================================================== */

/* ==========================================================================
                                   ── MEDIA QUERIES ──
   ========================================================================== */

/* ==========================================================================
                                   ── MEDIA 1366 ──
   ========================================================================== */
@media (max-width: 1366px) {
  html {
    font-size: 75%;
  }
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ==========================================================================
                               ── MEDIA 1024 ──
   ========================================================================== */
@media (max-width: 1024px) {
  section {
    padding: 5rem 2rem;
  }

  /* ==========================================================================
                         ── LOMBOK PARADISE START ──
   ========================================================================== */

  /* ==========================================================================
   ── ABOUT LOMBOK PARADISE START ──
   ========================================================================== */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about-images {
    height: 450px;
  }
  /* ==========================================================================
   ── ABOUT LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
   ── DESTINATION LOMBOK PARADISE START ──
   ========================================================================== */
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dest-card.featured {
    grid-column: span 2;
  }

  .testi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  /* ==========================================================================
   ── DESTINATION LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
   ── PACKAGES LOMBOK PARADISE START ──
   ========================================================================== */
  .pkg-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 0;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
  }
  /* ==========================================================================
   ── PACKAGES LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
                        ── LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
                            ── DESTINASI START ──
   ========================================================================== */

  /* ==========================================================================
   ── HIGHLIGHT DESTINASI START ──
   ========================================================================== */
  .dest-intro {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .dest-grid-full {
    grid-template-columns: repeat(2, 1fr);
  }

  .dest-card,
  .dest-card.wide,
  .dest-card.large {
    grid-column: span 1;
    height: 380px;
  }
  /* ==========================================================================
   ── DHIGHTLIGHT DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
   ── INFO STRIP DESAIN DESTINASI START ──
   ========================================================================== */
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  /* ==========================================================================
   ── INFO STRIP DESAIN DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── RINJANI START ──
   ========================================================================== */
  /* ==========================================================================
   ── ABOUT RINJANI START ──
   ========================================================================== */
  .about-grid {
    gap: 3rem;
  }

  .about-img-wrap {
    height: 400px;
  }
  /* ==========================================================================
   ── ABOUT RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── PACKAGES RINJANI START ──
   ========================================================================== */
  .paket-grid {
    grid-template-columns: repeat(2, 1fr); /* Menjadi 2 kolom di tablet */
    gap: 2rem;
  }

  /* Reset transformasi tumpuk agar seimbang di tablet */
  .paket-card.featured {
    transform: none;
  }
  .paket-card.featured:hover {
    transform: translateY(-6px);
  }
  /* ==========================================================================
   ── PACKAGES RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── TIPS RINJANI START ──
   ========================================================================== */
  .tips-grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Melipat menjadi 2 kolom seimbang di tablet */
    gap: 1.5rem;
  }
  /* ==========================================================================
   ── TIPS RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── GALERI START ──
   ========================================================================== */
  .video-grid {
    grid-template-columns: repeat(2, 1fr); /* Menjadi 2 kolom di tablet */
    gap: 1.5rem;
  }
  /* ==========================================================================
                            ── GALERI END ──
   ========================================================================== */

  /* ==========================================================================
   ── FOOTER START ──
   ========================================================================== */
  /* .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  } */
  /* ==========================================================================
   ── FOOTER END ──
   ========================================================================== */
}

/* ==========================================================================
                             ── MEDIA 768 ──
   ========================================================================== */
@media (max-width: 768px) {
  html {
    font-size: 62.5%;
  }

  /* ==========================================================================
                         ── NAVBAR PERCOBAAN START ──
   ========================================================================== */

  /* ==========================================================================
                         ── NAVBAR PERCOBAAN END ──
   ========================================================================== */

  /* ==========================================================================
                            ── NAVBAR START ──
   ========================================================================== */

  .nav-container {
    padding: 1rem 1.5rem;
  }

  .menu-toggle {
    display: flex; 
    position: relative;
    z-index: 1002; 
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -300px; 
    width: 280px; 
    height: 100vh;
    background: #0d1f26;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 6rem 2rem 2rem 2rem;
    gap: 2rem;
    box-sizing: border-box;

    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1001;
  }

  .nav-menu.open {
    right: 0; 
  }

  .nav-link {
    font-size: 1.1rem;
    width: fit-content;
  }

  .btn-nav-contact {
    display: none; 
  }

  .menu-toggle.toggle-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background-color: #e8c97a; 
  }

  .menu-toggle.toggle-active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
  }

  .menu-toggle.toggle-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background-color: #e8c97a;
  }
  /* ==========================================================================
                            ── NAVBAR END ──
   ========================================================================== */

  /* ==========================================================================
                            ── LOMBOK PARADISE START ──
   ========================================================================== */

  /* ==========================================================================
   ── HERO LOMBOK PARADISE START ──
   ========================================================================== */
  .hero-section {
    min-height: 80vh !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .hero-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-bottom: 5rem !important;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
  }

  .hero-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    margin-bottom: 0.8rem;
  }

  .hero-title {
    font-size: 2.6rem !important;
    line-height: 1.3;
    margin-bottom: 1.2rem;
    color: #0b2228 !important;
  }

  .hero-lead {
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 auto 2.5rem auto;
    max-width: 100%;
    color: #2e4347 !important;
  }

  .hero-actions {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-wave svg {
    height: 45px;
    width: 100%;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* ==========================================================================
   ── HERO LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
   ── HIGHLIGHT LOMBOK PARADISE START ──
   ========================================================================== */
  .highlights {
    grid-template-columns: repeat(
      2,
      1fr
    ) !important; /* Berjejer 2 kolom rapi */
    gap: 1.2rem;
    padding: 0 1.2rem;
  }

  .highlight-item {
    padding: 1.5rem; /* Penyesuaian ketebalan kartu di HP agar pas */
    gap: 1.2rem; /* Jarak ikon dan teks dirapatkan proporsional */
  }

  .highlight-icon {
    min-width: 48px;
    height: 48px; /* Sedikit mengecilkan kotak ikon di resolusi HP */
    font-size: 1.5rem;
  }

  .highlight-text h4 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
  }

  .highlight-text p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  /* ==========================================================================
   ── HIGHLIGHT LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
   ── DESTINATION LOMBOK PARADISE START ──
   ========================================================================== */
  .destinations {
    padding: 4rem 1.5rem;
  }

  .dest-grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Berubah jadi 2 kolom sejajar di tablet */
  }

  .dest-card,
  .dest-card.featured {
    grid-column: span 1; /* Ukuran disamakan rata agar seimbang */
    height: 380px;
  }

  .dest-grid {
    grid-template-columns: 1fr; /* 1 baris memanjang penuh ke bawah di HP */
    gap: 1.5rem;
  }

  .dest-card,
  .dest-card.featured {
    grid-column: span 1;
    height: 360px; /* Tinggi proporsional yang pas untuk genggaman ponsel */
  }

  .dest-overlay {
    padding: 1.8rem; /* Padding sedikit merapat agar teks muat banyak */
  }
  /* ==========================================================================
   ── DESTINATION LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
                            ── LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
                            ── DESTINASI START ──
   ========================================================================== */

  /* ==========================================================================
   ── HERO DESTINASI START ──
   ========================================================================== */
  .page-hero {
    min-height: 40vh;
  }

  .page-hero-content {
    padding-bottom: 3rem;
  }

  .page-wave svg {
    height: 35px;
  }
  /* ==========================================================================
   ── HERO DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
   ── HIGHLIGHT DESTINASI START ──
   ========================================================================== */
  section[style*="background: var(--cream)"] {
    padding: 4rem 1.5rem;
  }

  .dest-intro-stats {
    gap: 1.5rem;
    justify-content: space-between;
  }

  .dest-grid-full {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .dest-card,
  .dest-card.wide,
  .dest-card.large {
    grid-column: span 1;
    height: 400px;
  }

  .dest-overlay {
    padding: 1.8rem;
  }

  .dest-intro img {
    height: 300px; /* Tinggi mengecil di HP agar tidak terlalu memakan layar */
    margin-top: 1rem; /* Memberi bantalan jarak aman dari teks di atasnya */
    border-radius: 12px; /* Kelengkungan sudut sedikit merapat di layar kecil */
  }
  /* ==========================================================================
   ── HIGHLIGHT DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
   ── INFO STRIP DESAIN DESTINASI START ──
   ========================================================================== */
  .info-strip {
    padding: 4rem 1.5rem;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .info-item {
    padding: 2rem 1.5rem;
  }
  /* ==========================================================================
   ── INFO STRIP DESAIN DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── PAKET WISATA START ──
   ========================================================================== */
  /* ==========================================================================
   ── PACKAGES PAKET WISATA START ──
   ========================================================================== */
  .pkg-header {
    padding-top: 4rem; /* Menyesuaikan jarak intim di layar tablet */
    margin-bottom: 3rem;
  }
  /* ==========================================================================
   ── PACKAGES PAKET WISATA END ──
   ========================================================================== */

  /* ==========================================================================
                            ── PAKET WISATA END ──
   ========================================================================== */

  /* ==========================================================================
                            ── RINJANI START ──
   ========================================================================== */
  /* ==========================================================================
   ── HERO RINJANI START ──
   ========================================================================== */
  /* Proteksi total agar elemen tidak bisa merusak koordinat X */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  body,
  html {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Mengikat paksa navbar Anda agar sinkron lurus */
  .navbar,
  header,
  .site-header {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  .hero {
    min-height: 100vh !important;
    height: 100vh !important; /* Mengunci tinggi 1 layar mutlak */
    overflow: hidden !important;
    padding-top: 75px !important;
  }

  .hero-content {
    padding: 1rem 1rem 4rem 1rem !important;
  }

  .hero-title {
    font-size: 2.5rem !important;
  }

  /* Menghancurkan flex kesamping yang merusak layar, ganti ke Grid Aman */
  .hero-specs-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
  }

  .hspec-box {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(4px);
    padding: 0.6rem 0.4rem !important;
    border-radius: 8px;
    border: 1px solid rgba(11, 34, 40, 0.05);
  }

  .hspec-val {
    font-size: 1.25rem !important;
  }

  .hspec-lbl {
    font-size: 0.68rem !important;
  }

  .hero-btns-wrapper {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 290px !important;
    margin: 0 auto !important;
    gap: 0.6rem !important;
  }

  .btn-rinjani-gold,
  .btn-rinjani-transparent {
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    font-size: 0.8rem !important;
    text-align: center !important;
    display: block !important;
  }

  .hero-wave-bottom svg {
    height: 35px !important;
  }
  /* ==========================================================================
   ── HERO RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── ABOUT RINJANI START ──
   ========================================================================== */
  .about-rinjani {
    padding: 5rem 1.5rem;
  }

  /* Mengubah layout tumpuk kiri-kanan menjadi baris memanjang ke bawah */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .about-grid > div:first-child,
  .about-grid > div:last-child {
    grid-column: span 1;
  }

  .about-img-wrap {
    height: 360px;
    max-width: 500px;
    margin: 0 auto; /* Memposisikan susunan foto di tengah layar tablet/HP */
  }

  .about-badge {
    padding: 0.8rem 1.1rem;
    left: 2%;
    bottom: 22%;
  }

  .about-badge strong {
    font-size: 1.3rem;
  }

  .fact-grid {
    grid-template-columns: 1fr; /* Fact item berubah menjadi 1 kolom vertikal rapi */
    gap: 1.5rem;
  }

  /* ==========================================================================
   ── ABOUT RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── PAKET RINJANI START ──
   ========================================================================== */
  .paket-section {
    padding: 5rem 1.5rem;
  }

  .paket-header {
    padding-top: 4rem; /* Jarak atas yang lebih intim untuk ukuran tablet */
    margin-bottom: 3rem;
  }

  .paket-grid {
    grid-template-columns: 1fr; /* Memanjang 1 kolom vertikal penuh di HP */
    gap: 2rem;
  }

  .paket-card {
    max-width: 480px;
    margin: 0 auto; /* Menjaga kartu tetap simetris tepat di tengah */
  }

  .paket-title {
    min-height: auto; /* Membebaskan pembatas tinggi kaku di handphone */
  }
  /* ==========================================================================
   ── PAKET RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── ITINERARY RINJANI START ──
   ========================================================================== */
  .itinerary {
    padding: 5rem 1.5rem;
  }

  .itin-tabs {
    flex-direction: row; /* Tetap horizontal di tablet namun melonggarkan ruang */
    gap: 0.6rem;
    margin-bottom: 3rem;
  }

  .itin-tab {
    padding: 0.75rem 1.2rem;
    font-size: 0.82rem;
    flex-grow: 1;
    text-align: center;
  }

  .itin-day {
    gap: 1.5rem; /* Merapatkan jarak garis ke teks detail */
  }

  .itin-circle {
    width: 44px; /* Mengecilkan bulatan angka agar tidak memakan ruang lebar */
    height: 44px;
    font-size: 1rem;
  }

  .itin-days::before {
    left: 21px; /* Menyelaraskan ulang garis tengah mengikuti penyusutan lingkaran */
  }

  .itin-day-title {
    font-size: 1.2rem;
  }

  .itin-day-desc {
    font-size: 0.92rem;
  }
  /* ==========================================================================
   ── ITINERARY RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── TIPS RINJANI START ──
   ========================================================================== */
  .tips-section {
    padding: 4rem 1rem;
  }

  .tips-header {
    margin-bottom: 2.5rem;
  }

  .tip-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .tip-card h4 {
    font-size: 1.15rem;
  }

  .tip-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: left; /* Mengubah rata kanan-kiri menjadi rata kiri agar spasi kata tidak renggang di HP */
  }
  /* ==========================================================================
   ── TIPS RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── GALLERY RINJANI START ──
   ========================================================================== */
  .gal-strip {
    height: 180px; /* Memperpendek tinggi strip di tablet agar menghemat ruang */
  }

  /* Kurangi efek melebarnya di layar medium agar tidak terlalu ekstrem */
  .gal-strip-item:hover {
    flex: 1.6;
  }
  /* ==========================================================================
   ── GALLERY RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── GALERI START ──
   ========================================================================== */

  /* ==========================================================================
   ── HERO GALERI START ──
   ========================================================================== */
  .page-hero {
    min-height: 45vh; /* Sedikit memendek di tablet agar hemat ruang gulir */
  }
  .page-hero-content {
    padding-bottom: 4rem;
  }
  .page-wave svg {
    height: 45px; /* Kelengkungan merapat manis mengikuti aspek rasio layar */
  }
  .breadcrumb {
    padding: 2rem 1.5rem 0 1.5rem;
  }
  /* ==========================================================================
   ── HERO GALERI END ──
   ========================================================================== */

  /* ==========================================================================
   ── FILTER GALERI START ──
   ========================================================================== */
  .filter-section {
    padding: 3rem 1.5rem 1.5rem 1.5rem;
  }
  .filter-header {
    margin-bottom: 2rem;
  }
  .filter-tabs {
    gap: 0.6rem;
    padding-bottom: 1rem;
  }
  .filter-btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem; /* Ukuran pas agar pas di layar tablet */
  }
  /* ==========================================================================
   ── FILTER GALERI END ──
   ========================================================================== */

  /* ==========================================================================
   ── GALLERY GALERI END ──
   ========================================================================== */
  .masonry {
    column-count: 2; /* Menjadi dua kolom pada layar tablet */
    column-gap: 1.2rem;
  }
  .masonry-item {
    margin-bottom: 1.2rem;
  }
  .masonry-overlay {
    padding: 1.4rem; /* Memperkecil bantalan teks agar tidak sesak */
  }
  /* Di perangkat sentuh, biarkan informasi teks langsung terlihat tipis */
  .masonry-overlay {
    opacity: 1;
    background: linear-gradient(
      to top,
      rgba(13, 31, 38, 0.7) 0%,
      rgba(13, 31, 38, 0) 70%
    );
  }
  .masonry-cat,
  .masonry-title {
    transform: translateY(0);
  }
  /* ==========================================================================
   ── GALLERY GALERI END ──
   ========================================================================== */

  /* ==========================================================================
   ── VIDEO GALERI START ──
   ========================================================================== */
  .video-section {
    padding: 3rem 1.5rem 3rem 1.5rem;
  }
  .video-grid {
    grid-template-columns: 1fr; /* Menjadi 1 kolom penuh di gawai/HP */
    gap: 1.5rem;
  }
  .video-section > p {
    margin-bottom: 2rem;
  }
  .play-circle {
    width: 48px;
    height: 48px; /* Sedikit mengecil di HP agar tidak terlalu penuh */
  }
  .play-circle svg {
    width: 20px;
    height: 20px;
  }
  .video-label {
    font-size: 0.95rem;
    padding: 2rem 1.2rem 1rem 1.2rem;
  }
  /* ==========================================================================
   ── VIDEO GALERI END ──
   ========================================================================== */

  /* ==========================================================================
                            ── GALERI END ──
   ========================================================================== */
}

/* ==========================================================================
   ── MEDIA 450 ──
   ========================================================================== */

@media (max-width: 450px) {
  html {
    font-size: 55%; /* Mengecilkan basis REM agar teks tidak luber di layar mini */
  }

  /* ==========================================================================
                            ── LOMBOK PARADISE START ──
   ========================================================================== */

  /* ==========================================================================
   ── HIGHLIGHT LOMBOK PARADISE START ──
   ========================================================================== */
  .highlights {
    grid-template-columns: 1fr !important; /* Wajib 1 kolom tunggal vertikal */
    gap: 1rem;
    padding: 0 1rem; /* Menyisakan ruang 1rem di kanan-kiri layar */
    margin: 2.5rem auto;
  }

  .highlight-item {
    padding: 1.2rem; /* Memperkecil padding dalam agar teks punya ruang lebih luas */
    gap: 0.8rem;
  }
  /* ==========================================================================
   ── HIGHLIGHT LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
                            ── LOMBOK PARADISE END ──
   ========================================================================== */

  /* ==========================================================================
                            ── DESTINASI START ──
   ========================================================================== */
  /* ==========================================================================
   ── HERO DESTINASI START ──
   ========================================================================== */
  .hero {
    min-height: 100vh !important;
    height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 4rem !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
  }

  /* Mengoptimalkan ruang kontainer dalam */
  .hero-content {
    padding: 1rem 1rem 5rem 1rem !important;
  }

  .hero-title {
    font-size: 2.2rem !important; /* Ukuran pas agar "Gunung Rinjani" tidak pecah baris kaku */
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  .hero-sub {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
  }
  /* ==========================================================================
   ── HERO DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
                           ── DESTINASI END ──
   ========================================================================== */

  /* ==========================================================================
                           ── PAKET WISATA START ──
   ========================================================================== */

  /* ==========================================================================
   ── PACKAGES PAKET WISATA START ──
   ========================================================================== */
  .pkg-header {
    padding-top: 3rem; /* Menghemat ruang vertikal di layar smartphone */
    margin-bottom: 2rem;
  }

  .pkg-header .section-title {
    font-size: 1.9rem; /* Ukuran yang proporsional untuk genggaman satu tangan */
  }

  .pkg-header .section-lead {
    font-size: 0.92rem;
    line-height: 1.5;
  }
  /* ==========================================================================
   ── PACKAGES PAKET WISATA END ──
   ========================================================================== */

  /* ==========================================================================
                           ── PAKET WISATA END ──
   ========================================================================== */

  /* ==========================================================================
                            ── RINJANI START ──
   ========================================================================== */
  /* ==========================================================================
   ── HERO RINJANI START ──
   ========================================================================== */
  .hero-content {
    padding: 0.5rem 0.8rem 3rem 0.8rem !important;
  }

  .hero-title {
    font-size: 2.1rem !important;
  }

  .hero-sub {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-specs-grid {
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .hspec-box {
    padding: 0.5rem 0.2rem !important;
  }

  .hspec-val {
    font-size: 1.1rem !important;
  }

  .hspec-lbl {
    font-size: 0.62rem !important;
  }

  .btn-rinjani-gold,
  .btn-rinjani-transparent {
    padding: 0.85rem !important;
  }

  .hero-wave-bottom svg {
    height: 25px !important;
  }
  /* ==========================================================================
   ── HERO RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── ABOUT RINJANI START ──
   ========================================================================== */
  .about-rinjani {
    padding: 4rem 1rem;
  }

  .about-img-wrap {
    height: 280px; /* Mengecilkan tinggi tumpukan foto agar tidak boros layar HP */
  }

  .about-rinjani .section-title {
    font-size: 1.9rem !important;
  }

  .about-rinjani .section-lead {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .about-img-accent {
    border: 5px solid #faf6ee; /* Memperkecil border putih frame depan di layar mini */
  }
  /* ==========================================================================
   ── ABOUT RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── PACKAGES RINJANI START ──
   ========================================================================== */
  .paket-header {
    padding-top: 3rem; /* Menghemat ruang vertikal di layar smartphone */
    margin-bottom: 2rem;
  }
  .paket-header .section-title {
    font-size: 1.9rem; /* Ukuran pas agar judul tidak patah berantakan di HP */
  }
  .paket-header .section-lead {
    font-size: 0.92rem;
    line-height: 1.5;
  }
  /* ==========================================================================
   ── PACKAGES RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
   ── GALLERY RINJANI START ──
   ========================================================================== */
  /* Proteksi mutlak agar tumpukan flex tidak memaksa keluar layar gawai */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }
  .gal-strip {
    height: 120px; /* Ukuran kompak dan proporsional untuk layar smartphone */
  }
  /* Matikan efek hover flex di HP karena tidak ada kursor (mencegah glitch sentuhan jari) */
  .gal-strip:hover .gal-strip-item img,
  .gal-strip-item img {
    filter: grayscale(0%) brightness(95%) !important;
  }
  .gal-strip-item:hover {
    flex: 1 !important;
  }
  .gal-strip-item:hover img {
    transform: none !important;
  }
  /* ==========================================================================
   ── GALLERY RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
                           ── RINJANI END ──
   ========================================================================== */

  /* ==========================================================================
                           ── GALLERY START ──
   ========================================================================== */

  /* ==========================================================================
   ── HERO GALERI START ──
   ========================================================================== */
  .page-hero {
    min-height: 45vh; /* Sedikit memendek di tablet agar hemat ruang gulir */
  }
  .page-hero-content {
    padding-bottom: 4rem;
  }
  .page-wave svg {
    height: 45px; /* Kelengkungan merapat manis mengikuti aspek rasio layar */
  }
  .breadcrumb {
    padding-top: 2rem;
  }
  /* ==========================================================================
   ── HERO GALERI START ──
   ========================================================================== */
  .page-hero {
    min-height: 40vh; /* Sangat pas untuk kenyamanan genggaman satu tangan di HP */
    padding-top: 70px;
  }
  .page-hero-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 3.5rem;
  }
  .page-hero-title {
    font-size: 2.3rem; /* Memastikan teks judul tidak pecah baris berantakan */
  }
  .page-hero-sub {
    font-size: 0.92rem;
    line-height: 1.6;
  }
  .page-wave svg {
    height: 30px;
  }
  /* ==========================================================================
   ── HERO GALERI END ──
   ========================================================================== */

  /* ==========================================================================
   ── FILTER GALERI START ──
   ========================================================================== */
  .filter-header {
    text-align: center; /* Di HP lebih rapi rata tengah agar seimbang dengan hero */
  }
  .filter-tabs {
    justify-content: center; /* Tombol otomatis berkumpul di tengah layar HP */
  }
  /* ==========================================================================
   ── FILTER GALERI END ──
   ========================================================================== */

  /* ==========================================================================
   ── GALLERY GALERI START ──
   ========================================================================== */
  .gallery-section {
    padding: 1rem 1.2rem 3rem 1.2rem;
  }
  .masonry {
    column-count: 1; /* Menjadi satu kolom vertikal penuh di layar HP */
  }
  .masonry-title {
    font-size: 1.15rem;
  }
  /* ==========================================================================
   ── GALLERY GALERI END ──
   ========================================================================== */

  /* ==========================================================================
                           ── GALERI END ──
   ========================================================================== */
}
/* ==========================================================================
   ── EFEK BOUNCE SCROLL ──
   ========================================================================== */
@keyframes bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

/* Gerakan Gerak Ombak */
@keyframes waveAnimation {
  0% {
    transform: scaleX(1) translateX(0) translateY(0);
  }
  25% {
    transform: scaleX(1.1) translateX(-2%) translateY(1px);
  }
  50% {
    transform: scaleX(1.05) translateX(-1.5%) translateY(4px);
  }
  75% {
    transform: scaleX(1.1) translateX(-2%) translateY(1px);
  }
  100% {
    transform: scaleX(1) translateX(0) translateY(0);
  }
}

@keyframes waPulse {
  0%,
  100% {
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
  }
  50% {
    box-shadow:
      0 6px 50px rgba(37, 211, 102, 0.8),
      0 0 0 12px rgba(37, 211, 102, 0.1);
  }
}