/* ==========================================================================
   RORO NUSANTARA — index.css (CSS gabungan: Homepage, Katalog Tur,
   Rent Car, Shuttle, Hotel, About Us, Artikel, Promo, FAQ, Kebijakan
   Privasi, Syarat & Ketentuan, Detail Tur, Detail Rent Car, Detail
   Shuttle, Detail Hotel, Detail Artikel, Modal Login Pelanggan, Modal Super Admin & Form Booking)
   Dipakai bersama oleh seluruh halaman .html di folder ini.
   (Utility Tailwind digenerate oleh Play CDN — konfigurasinya di index.js)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Gaya Homepage: token Neumorphic Clay + override tema maroon
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   1. Neumorphic Clay Styles
   -------------------------------------------------------------------------- */
:root {
  --clay-bg: #e8edf3;
  --shadow-light: #ffffff;
  --shadow-dark: rgba(163, 177, 198, 0.6);
  --shadow-inset-dark: rgba(163, 177, 198, 0.55);
}
body {
  background-color: var(--clay-bg);
  color: #1e293b;
  overflow-x: hidden;
}

/* Extruded surface (Card, Button standard) */
.clay-card {
  background: var(--clay-bg);
  box-shadow:
    9px 9px 20px var(--shadow-dark),
    -9px -9px 20px var(--shadow-light);
  border-radius: 24px;
}
.clay-card-sm {
  background: var(--clay-bg);
  box-shadow:
    5px 5px 12px var(--shadow-dark),
    -5px -5px 12px var(--shadow-light);
  border-radius: 16px;
}

/* Sunken / Recessed surface (Tracks, Input wrappers) */
.clay-sunken {
  background: var(--clay-bg);
  box-shadow:
    inset 5px 5px 10px var(--shadow-inset-dark),
    inset -5px -5px 10px var(--shadow-light);
}
.clay-sunken-pill {
  background: var(--clay-bg);
  box-shadow:
    inset 4px 4px 8px var(--shadow-inset-dark),
    inset -4px -4px 8px var(--shadow-light);
  border-radius: 9999px;
}

/* Extruded Button & Interactive States */
.clay-btn {
  background: var(--clay-bg);
  box-shadow:
    6px 6px 14px var(--shadow-dark),
    -6px -6px 14px var(--shadow-light);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.clay-btn:hover {
  box-shadow:
    8px 8px 18px var(--shadow-dark),
    -8px -8px 18px var(--shadow-light);
  transform: translateY(-2px);
}
.clay-btn:active {
  box-shadow:
    inset 4px 4px 8px var(--shadow-inset-dark),
    inset -4px -4px 8px var(--shadow-light);
  transform: translateY(1px);
}

/* Extruded Active Pill */
.clay-pill-active {
  background: #e8edf3;
  box-shadow:
    4px 4px 10px rgba(163, 177, 198, 0.75),
    -4px -4px 10px #ffffff;
  color: #0d9488;
}

/* Teal Action Button */
.clay-btn-teal {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  box-shadow:
    5px 5px 15px rgba(13, 148, 136, 0.4),
    -5px -5px 12px #ffffff;
  color: #ffffff;
  transition: all 0.2s ease;
}
.clay-btn-teal:hover {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  box-shadow:
    7px 7px 20px rgba(13, 148, 136, 0.5),
    -5px -5px 12px #ffffff;
  transform: translateY(-2px);
}
.clay-btn-teal:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(15, 118, 110, 0.6);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #e8edf3;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.5);
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* --------------------------------------------------------------------------
   2. Override Tema Maroon
   -------------------------------------------------------------------------- */
.text-teal-700,
.text-teal-800,
.text-teal-600 {
  color: #8b1e1e !important;
}

.hover\:text-teal-700:hover,
.hover\:text-teal-800:hover,
.hover\:text-teal-600:hover,
.hover\:text-teal-400:hover,
.group-hover\:text-teal-700:hover {
  color: #6a020a !important;
}

.focus\:ring-emerald-600:focus {
  --tw-ring-color: #8b1e1e !important;
}

.text-teal-400 {
  color: #ff9d95 !important;
}

.clay-pill-active {
  color: #8b1e1e !important;
}

.clay-btn-teal {
  background: linear-gradient(135deg, #8b1e1e, #6a020a) !important;
  box-shadow:
    5px 5px 15px rgba(139, 30, 30, 0.4),
    -5px -5px 12px #ffffff !important;
  color: #ffffff !important;
}

.clay-btn-teal:hover {
  background: linear-gradient(135deg, #a32222, #8b1e1e) !important;
  box-shadow:
    7px 7px 20px rgba(139, 30, 30, 0.5),
    -5px -5px 12px #ffffff !important;
}

.from-teal-900 {
  --tw-gradient-from: #4a090b var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(74 9 11 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:
    var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-teal-950 {
  --tw-gradient-to: #2d0406 var(--tw-gradient-to-position) !important;
}

/* --------------------------------------------------------------------------
   B. Gaya Katalog Tur: varian dark clay, tombol maroon/raised, backdrop modal
   -------------------------------------------------------------------------- */
body {
  background-color: #e8edf3;
  color: #0f172a;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
.dark body {
  background-color: #141a23;
  color: #f1f5f9;
}

/* Raised Neumorphic Card */
.clay-card {
  border-radius: 24px;
  background: #e8edf3;
  box-shadow:
    9px 9px 20px rgba(163, 177, 198, 0.6),
    -9px -9px 20px #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
}
.dark .clay-card {
  background: #1b232f;
  box-shadow:
    8px 8px 18px #0c1017,
    -8px -8px 18px #283344;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sunken Neumorphic Container */
.clay-sunken {
  background: #e8edf3;
  box-shadow:
    inset 5px 5px 10px rgba(163, 177, 198, 0.55),
    inset -5px -5px 10px #ffffff;
}
.dark .clay-sunken {
  background: #111720;
  box-shadow:
    inset 5px 5px 10px #090c12,
    inset -5px -5px 10px #212c3b;
}

/* Sunken Pill Bar */
.clay-sunken-pill {
  border-radius: 9999px;
  background: #e8edf3;
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.5),
    inset -4px -4px 8px #ffffff;
}
.dark .clay-sunken-pill {
  background: #111720;
  box-shadow:
    inset 4px 4px 8px #080c11,
    inset -4px -4px 8px #202b3b;
}

/* Active Pill Item */
.clay-pill-active {
  background: #e8edf3 !important;
  color: #8b1e1e !important;
  font-weight: 700 !important;
  box-shadow:
    4px 4px 10px rgba(163, 177, 198, 0.6),
    -4px -4px 10px #ffffff !important;
}
.dark .clay-pill-active {
  background: #1e2837 !important;
  color: #f87171 !important;
  box-shadow:
    4px 4px 10px #0b0f15,
    -4px -4px 10px #29374c !important;
}

/* Standard Maroon Neumorphic Button */
.clay-btn-maroon {
  background: linear-gradient(135deg, #8b1e1e, #6a020a);
  color: #ffffff;
  box-shadow:
    6px 6px 14px rgba(139, 30, 30, 0.38),
    -4px -4px 10px rgba(255, 255, 255, 0.85);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.clay-btn-maroon:hover {
  transform: translateY(-2px);
  box-shadow:
    8px 8px 18px rgba(139, 30, 30, 0.48),
    -5px -5px 12px rgba(255, 255, 255, 0.95);
}
.clay-btn-maroon:active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.4),
    inset -3px -3px 6px rgba(255, 255, 255, 0.2);
}
.dark .clay-btn-maroon {
  box-shadow:
    5px 5px 14px rgba(0, 0, 0, 0.6),
    -2px -2px 8px rgba(255, 255, 255, 0.08);
}

/* Raised Interactive Button */
.clay-btn-raised {
  background: #e8edf3;
  box-shadow:
    5px 5px 12px rgba(163, 177, 198, 0.6),
    -5px -5px 12px #ffffff;
  transition: all 0.2s ease;
}
.clay-btn-raised:hover {
  transform: translateY(-1px);
  box-shadow:
    7px 7px 15px rgba(163, 177, 198, 0.7),
    -6px -6px 14px #ffffff;
}
.clay-btn-raised:active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 7px rgba(163, 177, 198, 0.7),
    inset -3px -3px 7px #ffffff;
}
.dark .clay-btn-raised {
  background: #1e2837;
  box-shadow:
    5px 5px 12px #0c1017,
    -5px -5px 12px #263346;
}

/* Modal Backdrop */
.modal-backdrop {
  backdrop-filter: blur(8px);
  background-color: rgba(15, 23, 42, 0.55);
}

/* --------------------------------------------------------------------------
   C. Penyesuaian Dark Mode (nightmode) untuk bagian asli Homepage
      Header, CTA & footer homepage kini memakai markup tur.html yang sudah
      dark-mode aware. Kelas di bawah adalah bagian homepage lama yang
      warnanya statis terang, diberi varian .dark agar nightmode konsisten.
   -------------------------------------------------------------------------- */

/* Section berlatar terang */
.dark .bg-slate-100\/40 {
  background-color: rgba(17, 24, 39, 0.4);
}
.dark .bg-slate-100\/60 {
  background-color: rgba(17, 24, 39, 0.6);
}

/* Teks statis terang pada kartu homepage */
.dark .text-slate-800 {
  color: #e2e8f0;
}
.dark .text-slate-700 {
  color: #cbd5e1;
}
.dark .text-slate-600 {
  color: #94a3b8;
}
.dark .text-slate-500 {
  color: #64748b;
}
.dark .text-slate-400 {
  color: #64748b;
}

/* Border statis terang */
.dark .border-slate-200 {
  border-color: #1e293b;
}
.dark .border-slate-200\/60 {
  border-color: rgba(30, 41, 59, 0.6);
}
.dark .border-slate-200\/70 {
  border-color: rgba(30, 41, 59, 0.7);
}
.dark .border-white\/60 {
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .border-white\/50 {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Chip/badge warna pastel khas mode terang */
.dark .bg-slate-200 {
  background-color: #1e293b;
}
.dark .bg-teal-100 {
  background-color: rgba(139, 30, 30, 0.25);
}
.dark .bg-amber-100 {
  background-color: rgba(217, 119, 6, 0.25);
}
.dark .text-amber-800 {
  color: #fbbf24;
}
.dark .bg-purple-100 {
  background-color: rgba(147, 51, 234, 0.25);
}
.dark .text-purple-800 {
  color: #c084fc;
}

/* Aksen teal yang dioverride maroon: pakai merah muda terang di dark mode */
.dark .text-teal-600,
.dark .text-teal-700,
.dark .text-teal-800 {
  color: #f87171 !important;
}
.dark .hover\:text-teal-600:hover,
.dark .hover\:text-teal-700:hover,
.dark .hover\:text-teal-800:hover,
.dark .group-hover\:text-teal-700:hover {
  color: #fca5a5 !important;
}

/* Input kode booking (punya box-shadow inline — perlu !important) */
.dark .bg-\[\#e8edf3\] {
  background-color: #111720;
}
.dark #form-cek-booking input {
  box-shadow:
    inset 5px 5px 10px #090c12,
    inset -5px -5px 10px #212c3b !important;
}

/* Tombol prev/next carousel & kartu reels berlatar putih */
.dark .bg-white {
  background-color: #1b232f;
}

/* Scrollbar */
.dark ::-webkit-scrollbar-track {
  background: #141a23;
}
.dark ::-webkit-scrollbar-thumb {
  background: #2b3648;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #3d4a61;
}

/* --------------------------------------------------------------------------
   D. Urutan cascade dark mode
      Rule `body` seksi A/B sama-spesifik; yang menang adalah yang terakhir.
      Rule .dark di bawah memastikan latar/warna body homepage ikut nightmode.
   -------------------------------------------------------------------------- */
.dark body {
  background-color: #141a23;
  color: #f1f5f9;
}

/* --------------------------------------------------------------------------
   E. Gaya Rent Car: base layer, scrollbar hidden, kelas clay convex/concave
      (digabung dari rentcar.css — dipakai oleh rentcar.html)
   -------------------------------------------------------------------------- */
/* ==========================================================================
   RORO NUSANTARA — rentcar.css (Halaman Rent Car / Sewa Mobil)
   Gaya kustom: base layer, scrollbar tersembunyi, kelas Neumorphic Clay.
   (Utility Tailwind digenerate oleh Play CDN — konfigurasinya di rentcar.js)
   ========================================================================== */

@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
  }
  body {
    overscroll-behavior: none;
  }
  main > :first-child {
    margin-top: 0 !important;
  }
  main > :last-child {
    margin-bottom: 0 !important;
  }
}
::-webkit-scrollbar {
  display: none;
}
.clay-convex {
  background: #eceff4;
  box-shadow:
    6px 6px 14px rgba(163, 177, 198, 0.55),
    -6px -6px 14px rgba(255, 255, 255, 0.85);
}
.clay-convex-sm {
  background: #eceff4;
  box-shadow:
    3px 3px 8px rgba(163, 177, 198, 0.5),
    -3px -3px 8px rgba(255, 255, 255, 0.8);
}
.clay-concave {
  background: #eceff4;
  box-shadow:
    inset 3px 3px 6px rgba(163, 177, 198, 0.6),
    inset -3px -3px 6px rgba(255, 255, 255, 0.85);
}
.clay-maroon-btn {
  background: linear-gradient(145deg, #8b1e1e, #6a020a);
  box-shadow:
    5px 5px 12px rgba(106, 2, 10, 0.35),
    -4px -4px 10px rgba(255, 255, 255, 0.7);
}
.clay-emerald-btn {
  background: linear-gradient(145deg, #00533c, #003a29);
  box-shadow:
    5px 5px 12px rgba(0, 58, 41, 0.35),
    -4px -4px 10px rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   F. Dark Mode untuk halaman Rent Car (nightmode)
      Header, CTA & footer rentcar kini memakai markup homepage yang sudah
      dark-mode aware. Kelas di bawah adalah bagian rentcar asli yang
      warnanya statis terang, diberi varian .dark agar nightmode konsisten.
   -------------------------------------------------------------------------- */
.dark .clay-convex {
  background: #1b232f;
  box-shadow:
    6px 6px 14px rgba(12, 16, 23, 0.8),
    -6px -6px 14px rgba(40, 51, 68, 0.35);
}
.dark .clay-convex-sm {
  background: #1b232f;
  box-shadow:
    3px 3px 8px rgba(12, 16, 23, 0.8),
    -3px -3px 8px rgba(40, 51, 68, 0.35);
}
.dark .clay-concave {
  background: #111720;
  box-shadow:
    inset 3px 3px 6px rgba(9, 12, 18, 0.9),
    inset -3px -3px 6px rgba(33, 44, 59, 0.6);
}
.dark .text-on-surface {
  color: #e2e8f0;
}
.dark .text-on-surface-variant {
  color: #94a3b8;
}
.dark .text-outline {
  color: #64748b;
}
.dark .bg-surface-container,
.dark .bg-surface-container-low {
  background-color: #1b232f;
}
.dark .border-outline-variant\/30 {
  border-color: rgba(30, 41, 59, 0.5);
}
.dark .bg-surface {
  background-color: #141a23;
}
.dark main.bg-surface {
  background-color: #141a23;
}

/* --------------------------------------------------------------------------
   G. Gaya Shuttle: kelas input form clay + dark mode (nightmode)
      (digabung dari shuttle.css — dipakai oleh shuttle.html)
      Catatan: .clay-card/.clay-sunken/.clay-btn/.clay-*-btn/.clay-convex/.clay-concave
      versi shuttle identik dengan seksi A/B/E di atas, jadi tidak diduplikasi.
   -------------------------------------------------------------------------- */
.clay-input {
  background: #eceff4;
  box-shadow:
    inset 3px 3px 7px rgba(163, 177, 198, 0.55),
    inset -3px -3px 7px rgba(255, 255, 255, 0.9);
  border: none;
  outline: none;
}
.clay-input:focus {
  box-shadow:
    inset 4px 4px 8px rgba(163, 177, 198, 0.7),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9),
    0 0 0 2px rgba(139, 30, 30, 0.3);
}
.dark .clay-input {
  background: #111720;
  box-shadow:
    inset 3px 3px 7px rgba(9, 12, 18, 0.9),
    inset -3px -3px 7px rgba(33, 44, 59, 0.6);
  color: #e2e8f0;
}
.dark .clay-input:focus {
  box-shadow:
    inset 4px 4px 8px rgba(9, 12, 18, 0.9),
    inset -3px -3px 6px rgba(33, 44, 59, 0.6),
    0 0 0 2px rgba(248, 113, 113, 0.35);
}

/* Teks palet Material agar tetap terbaca di atas latar gelap */
.dark .text-primary {
  color: #f87171;
}
.dark .text-secondary,
.dark .text-secondary-container {
  color: #fbbf24;
}
.dark .text-tertiary,
.dark .text-on-tertiary-container {
  color: #7cc6a7;
}
.dark .text-outline {
  color: #64748b;
}
.dark .bg-primary {
  background-color: #8b1e1e;
}
.dark .bg-secondary {
  background-color: #92400e;
}
.dark .bg-tertiary {
  background-color: #00533c;
}
.dark .border-outline-variant\/20,
.dark .border-outline-variant\/30 {
  border-color: rgba(30, 41, 59, 0.5);
}

/* --------------------------------------------------------------------------
   H. Gaya Hotel: base layer & kelas clay convex/concave sudah tercakup di
      seksi E; di bawah ini hanya dark mode (nightmode) untuk kelas Material
      khas hotel.html yang belum tercakup seksi F/G (badge, rating pill,
      border pembatas, footer lama).
      (digabung dari hotel.css — dipakai oleh hotel.html)
   -------------------------------------------------------------------------- */
/* Teks Material di atas latar gelap (varian tambahan hotel) */
.dark .text-on-primary {
  color: #ffffff;
}
.dark .text-on-secondary {
  color: #ffffff;
}
.dark .text-on-secondary-container {
  color: #ffdcc3;
}
.dark .text-on-secondary-fixed {
  color: #ffedd5;
}
.dark .text-on-tertiary-fixed {
  color: #d1fae5;
}
.dark .text-outline-variant {
  color: #64748b;
}

/* Latar badge & pill Material */
.dark .bg-primary-container {
  background-color: #7a1a1a;
}
.dark .bg-secondary {
  background-color: #92400e;
}
.dark .bg-secondary-container {
  background-color: rgba(146, 64, 14, 0.4);
}
.dark .bg-secondary-fixed {
  background-color: #92400e;
}
.dark .bg-tertiary-container {
  background-color: rgba(0, 83, 60, 0.4);
}
.dark .bg-tertiary-fixed {
  background-color: #00533c;
}
.dark .bg-surface-container-lowest {
  background-color: #1b232f;
}
.dark .bg-surface\/90 {
  background-color: rgba(20, 26, 35, 0.9);
}

/* Border pembatas khas hotel */
.dark .border-surface-container,
.dark .border-surface-container-high {
  border-color: rgba(30, 41, 59, 0.6);
}

/* --------------------------------------------------------------------------
   I. Gaya About Us: kelas clay khas about-us (discope lewat .page-about-us
      agar tidak menimpa definisi homepage) + dark mode (nightmode)
      (digabung dari about-us.css — dipakai oleh about-us.html)
   -------------------------------------------------------------------------- */
/* .clay-sunken versi about-us punya nilai lebih ringan (3px) daripada
   homepage (5px); hanya diberlakukan untuk konten asli about-us di dalam
   <main>, sehingga header/CTA/footer/modal versi homepage tetap identik
   dengan index.html */
.page-about-us main .clay-sunken {
  box-shadow:
    inset 3px 3px 6px rgba(163, 177, 198, 0.55),
    inset -3px -3px 6px rgba(255, 255, 255, 0.85);
}
.dark .page-about-us main .clay-sunken {
  box-shadow:
    inset 3px 3px 6px #090c12,
    inset -3px -3px 6px #212c3b;
}
.clay-extruded {
  box-shadow:
    5px 5px 12px rgba(163, 177, 198, 0.45),
    -5px -5px 12px rgba(255, 255, 255, 0.9);
}
.clay-extruded-sm {
  box-shadow:
    3px 3px 8px rgba(163, 177, 198, 0.4),
    -3px -3px 8px rgba(255, 255, 255, 0.85);
}
.clay-floating {
  box-shadow:
    8px 8px 20px rgba(163, 177, 198, 0.55),
    -8px -8px 20px rgba(255, 255, 255, 0.95);
}

/* Nightmode: varian dark kelas clay khas about-us + badge/pill Material */
.dark .clay-extruded {
  box-shadow:
    5px 5px 12px rgba(12, 16, 23, 0.8),
    -5px -5px 12px rgba(40, 51, 68, 0.35);
}
.dark .clay-extruded-sm {
  box-shadow:
    3px 3px 8px rgba(12, 16, 23, 0.8),
    -3px -3px 8px rgba(40, 51, 68, 0.35);
}
.dark .clay-floating {
  box-shadow:
    8px 8px 20px rgba(9, 12, 18, 0.7),
    -8px -8px 20px rgba(40, 51, 68, 0.3);
}
.dark .text-primary-container {
  color: #ffb3ad;
}
.dark .text-tertiary-container {
  color: #7cc6a7;
}
.dark .text-on-primary-container {
  color: #ffd7d4;
}
.dark .bg-surface\/95 {
  background-color: rgba(20, 26, 35, 0.95);
}
.dark .bg-surface-container-low\/60 {
  background-color: rgba(27, 35, 47, 0.6);
}
.dark .border-outline-variant\/20 {
  border-color: rgba(30, 41, 59, 0.4);
}

/* --------------------------------------------------------------------------
   J. Gaya Artikel: artikel.css identik dengan about-us.css — kelas
      .clay-extruded/.clay-extruded-sm/.clay-floating sudah tercakup seksi I.
      Di bawah hanya .clay-sunken versi ringan (3px) yang di-scope ke
      .page-artikel agar tidak menimpa definisi homepage, + varian dark.
      (digabung dari artikel.css — dipakai oleh artikel.html)
   -------------------------------------------------------------------------- */
.page-artikel main .clay-sunken {
  box-shadow:
    inset 3px 3px 6px rgba(163, 177, 198, 0.55),
    inset -3px -3px 6px rgba(255, 255, 255, 0.85);
}
.dark .page-artikel main .clay-sunken {
  box-shadow:
    inset 3px 3px 6px #090c12,
    inset -3px -3px 6px #212c3b;
}

/* --------------------------------------------------------------------------
   K. Gaya Promo: kelas clay khas promo (discope lewat .page-promo agar tidak
      menimpa definisi homepage) + dark mode (nightmode)
      (digabung dari promo.css — dipakai oleh promo.html)
      Catatan: .clay-card/.clay-sunken/.clay-btn-maroon/.clay-pill-active versi
      promo identik dengan seksi A/B di atas, jadi tidak diduplikasi.
   -------------------------------------------------------------------------- */
/* .clay-card versi promo (border + hover lift) — discope agar tidak menimpa
   homepage; dipakai seluruh kartu voucher & panel promo */
.page-promo main .clay-card:not([data-purpose="booking-cta-banner"]) {
  background: #e8edf3;
  box-shadow:
    8px 8px 18px #cad1dc,
    -8px -8px 18px #ffffff;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-promo main .clay-card:not([data-purpose="booking-cta-banner"]):hover {
  box-shadow:
    12px 12px 24px #c2c9d4,
    -12px -12px 24px #ffffff;
  transform: translateY(-2px);
}

/* .clay-sunken versi promo (lebih lembut, rounded) — discope */
.page-promo main .clay-sunken {
  background: #e4e9ef;
  box-shadow:
    inset 4px 4px 8px #cad1dc,
    inset -4px -4px 8px #ffffff;
  border-radius: 1rem;
}
.page-promo main .clay-sunken-sm {
  background: #e4e9ef;
  box-shadow:
    inset 2px 2px 5px #cbd2dd,
    inset -2px -2px 5px #ffffff;
}

/* Tombol maroon promo (glow + hover lebih terang) — discope */
.page-promo .clay-btn-maroon {
  background: linear-gradient(135deg, #8b1e1e 0%, #6a020a 100%);
  box-shadow:
    5px 5px 12px #c2c9d4,
    -3px -3px 8px #ffffff,
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transition: all 0.2s ease;
}
.page-promo .clay-btn-maroon:hover {
  background: linear-gradient(135deg, #9b2424 0%, #7d050f 100%);
  box-shadow:
    7px 7px 16px rgba(139, 30, 30, 0.4),
    -3px -3px 8px #ffffff;
  transform: translateY(-1px);
}
.page-promo .clay-btn-maroon:active {
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.4),
    inset -2px -2px 4px rgba(255, 255, 255, 0.1);
  transform: translateY(1px);
}

/* Tombol netral (salin kode promo) */
.clay-btn-neutral {
  background: #e8edf3;
  box-shadow:
    4px 4px 10px #cbd2dd,
    -4px -4px 10px #ffffff;
  color: #334155;
  transition: all 0.2s ease;
}
.clay-btn-neutral:hover {
  color: #8b1e1e;
  box-shadow:
    6px 6px 14px #c2c9d4,
    -6px -6px 14px #ffffff;
}
.clay-btn-neutral:active {
  box-shadow:
    inset 2px 2px 5px #cbd2dd,
    inset -2px -2px 5px #ffffff;
}

/* .clay-pill-active versi promo (filter voucher) — discope */
.page-promo main .clay-pill-active {
  background: #e4e9ef;
  box-shadow:
    inset 3px 3px 6px #cad1dc,
    inset -3px -3px 6px #ffffff;
  color: #8b1e1e;
  font-weight: 700;
}

/* Sembunyikan scrollbar (row filter voucher) */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Pulse beacon (indikator promo aktif) */
@keyframes beacon-ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-beacon {
  animation: beacon-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* --- Nightmode promo (kelas khas promo + override konten) --- */
.dark .page-promo main .clay-card:not([data-purpose="booking-cta-banner"]) {
  background: #1b232f;
  box-shadow:
    8px 8px 18px #0c1017,
    -8px -8px 18px #283344;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.dark
  .page-promo
  main
  .clay-card:not([data-purpose="booking-cta-banner"]):hover {
  box-shadow:
    12px 12px 24px #0c1017,
    -12px -12px 24px #283344;
}
.dark .page-promo main .clay-sunken,
.dark .page-promo main .clay-sunken-sm {
  background: #111720;
  box-shadow:
    inset 3px 3px 6px #090c12,
    inset -3px -3px 6px #212c3b;
}
.dark .page-promo main .clay-pill-active {
  background: #1e2837;
  box-shadow:
    inset 3px 3px 6px #0b0f15,
    inset -3px -3px 6px #29374c;
  color: #f87171;
}
.dark .clay-btn-neutral {
  background: #1e2837;
  box-shadow:
    4px 4px 10px #0c1017,
    -4px -4px 10px #263346;
  color: #cbd5e1;
}
.dark .clay-btn-neutral:hover {
  color: #fca5a5;
  box-shadow:
    6px 6px 14px #0c1017,
    -6px -6px 14px #263346;
}

/* Teks/warna konten promo agar terbaca di atas latar gelap */
.dark .page-promo .text-slate-900 {
  color: #f1f5f9;
}
.dark .page-promo .text-slate-800 {
  color: #e2e8f0;
}
.dark .page-promo .text-slate-700 {
  color: #cbd5e1;
}
.dark .page-promo .text-slate-600 {
  color: #94a3b8;
}
.dark .page-promo .text-slate-500 {
  color: #64748b;
}
.dark .page-promo .text-slate-400 {
  color: #64748b;
}
/* Aksen maroon brand (text-[#8b1e1e]) -> merah muda terang di dark mode */
.dark .page-promo .text-\[\#8b1e1e\] {
  color: #f87171 !important;
}
/* Badge diskon putih (bg-white/90) -> gelap agar tidak silau */
.dark .page-promo .bg-white\/90 {
  background-color: rgba(27, 35, 47, 0.9);
}
.dark .page-promo .border-white\/60 {
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .page-promo .border-white\/70 {
  border-color: rgba(255, 255, 255, 0.06);
}
/* Banner sukses notifikasi promo */
.dark .page-promo .bg-emerald-50 {
  background-color: rgba(6, 78, 59, 0.35);
}
.dark .page-promo .border-emerald-200 {
  border-color: rgba(6, 95, 70, 0.5);
}
.dark .page-promo .text-emerald-800 {
  color: #6ee7b7;
}

/* --------------------------------------------------------------------------
   L. Carousel Hero Beranda (Coverflow): 4 banner promo bergerak kiri/kanan
      Slide aktif di tengah; yang digeser ke kiri jadi Flanking Left, ke kanan
      jadi Flanking Right (recessed & dimmed), sisanya di belakang (hidden).
      Tinggi stage dijaga JS (.hp-slide-stage.style.height) agar layout stabil.
      (dipakai oleh index.html)
   -------------------------------------------------------------------------- */
.hp-slide-stage {
  position: relative;
}
.hp-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 560px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition:
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.65s ease,
    filter 0.65s ease,
    box-shadow 0.65s ease;
  will-change: transform, opacity;
  border-radius: 1.5rem;
}

/* Tengah (aktif) */
.hp-slide.is-center {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 10;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
}

/* Kiri (flanker recessed & dimmed) — slide aktif bergerak ke kiri jadi ini */
.hp-slide.is-left {
  transform: translate(-50%, -50%) translateX(-82%) scale(0.84);
  opacity: 0.55;
  filter: blur(1px) brightness(0.85);
  visibility: visible;
  z-index: 5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

/* Kanan (flanker recessed & dimmed) — slide aktif bergerak ke kanan jadi ini */
.hp-slide.is-right {
  transform: translate(-50%, -50%) translateX(82%) scale(0.84);
  opacity: 0.55;
  filter: blur(1px) brightness(0.85);
  visibility: visible;
  z-index: 5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

/* Belakang (tersembunyi) */
.hp-slide.is-back {
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Layar sempit: sembunyikan flanker agar tidak menutupi slide tengah */
@media (max-width: 1023px) {
  .hp-slide.is-left,
  .hp-slide.is-right {
    opacity: 0;
    visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   M. Gaya FAQ: utilitas .no-scrollbar (tab kategori) + dark mode (nightmode)
      untuk kelas Material khas faq.html yang belum tercakup seksi F/G/H.
      (digabung dari faq.css — dipakai oleh faq.html)
      Catatan: base layer & ::-webkit-scrollbar sudah ada di seksi E; palet
      Material faq.js identik dengan konfigurasi di index.js.
   -------------------------------------------------------------------------- */
/* Sembunyikan scrollbar horizontal tab kategori (Firefox & IE; WebKit
   sudah tercakup aturan ::-webkit-scrollbar seksi E) */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Nightmode: badge kategori Material khas faq.html */
.dark .bg-primary-fixed {
  background-color: rgba(139, 30, 30, 0.45);
}
.dark .bg-primary-fixed-dim {
  background-color: rgba(255, 179, 173, 0.18);
}
.dark .text-on-primary-fixed {
  color: #ffd7d4;
}
.dark .text-on-primary-fixed-variant {
  color: #ffb3ad;
}
.dark .text-error {
  color: #ffb4ab;
}

/* Nightmode: gradasi teks judul hero faq (from-primary via-primary-container
   to-secondary) agar tetap terbaca di latar gelap */
.dark .page-faq .from-primary {
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .page-faq .via-primary-container {
  --tw-gradient-to: rgb(255 179 173 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
    var(--tw-gradient-from), #ffb3ad var(--tw-gradient-via-position),
    var(--tw-gradient-to);
}
.dark .page-faq .to-secondary {
  --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position);
}

/* --------------------------------------------------------------------------
   N. Gaya Kebijakan Privasi: kelas clay khas kebijakan (discope lewat
      .page-kebijakan agar tidak menimpa definisi homepage) + dark mode
      untuk kelas Material khasnya.
      (digabung dari kebijakan.css — dipakai oleh kebijakan.html)
      Catatan: .clay-extruded/.clay-extruded-sm/.clay-floating versi kebijakan
      identik dengan seksi I (about-us), sehingga tidak diduplikasi; hanya
      .clay-sunken versi ringan (3px) yang di-scope ke .page-kebijakan.
      Palet Material kebijakan.js identik dengan konfigurasi di index.js.
   -------------------------------------------------------------------------- */
/* .clay-sunken versi kebijakan (3px, lebih ringan dari homepage 5px) */
.page-kebijakan main .clay-sunken {
  box-shadow:
    inset 3px 3px 6px rgba(163, 177, 198, 0.55),
    inset -3px -3px 6px rgba(255, 255, 255, 0.85);
}
.dark .page-kebijakan main .clay-sunken {
  box-shadow:
    inset 3px 3px 6px #090c12,
    inset -3px -3px 6px #212c3b;
}

/* Nightmode: kelas Material khas kebijakan.html yang belum tercakup seksi lain */
.dark .bg-error-container\/20 {
  background-color: rgba(147, 0, 10, 0.2);
}
.dark .bg-surface-bright {
  background-color: #1b232f;
}
.dark .text-primary-fixed {
  color: #ffb3ad;
}
.dark .text-secondary-fixed {
  color: #ffb77d;
}
.dark .border-primary\/20 {
  border-color: rgba(248, 113, 113, 0.25);
}
/* --------------------------------------------------------------------------
   O. Gaya Syarat & Ketentuan: kelas clay khas term (discope lewat .page-term
      agar tidak menimpa definisi homepage) + dark mode (nightmode).
      (digabung dari term.css — dipakai oleh term.html)
      Catatan: .clay-card versi term (bg #f7f9fe + border) hanya diberlakukan
      untuk konten asli term di dalam <main>; header/CTA/footer/modal versi
      homepage tetap identik dengan index.html.
   -------------------------------------------------------------------------- */
/* Latar halaman & kartu versi term (lebih terang dari clay homepage) */
.page-term {
  background-color: #f7f9fe;
}
.page-term main .clay-card {
  background: #f7f9fe;
  box-shadow:
    6px 6px 16px #d5dce6,
    -6px -6px 16px #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.clay-inset {
  background: #f1f4f9;
  box-shadow:
    inset 3px 3px 6px #d0d7e2,
    inset -3px -3px 6px #ffffff;
}
.badge-sunken {
  background: #f1f4f9;
  box-shadow:
    inset 2px 2px 4px #d3dae4,
    inset -2px -2px 4px #ffffff;
}

/* Nightmode: varian dark untuk kelas khas term.html */
.dark .page-term {
  background-color: #141a23;
}
.dark .page-term main .clay-card {
  background: #1b232f;
  box-shadow:
    6px 6px 16px rgba(12, 16, 23, 0.8),
    -6px -6px 16px rgba(40, 51, 68, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.dark .clay-inset {
  background: #111720;
  box-shadow:
    inset 3px 3px 6px rgba(9, 12, 18, 0.9),
    inset -3px -3px 6px rgba(33, 44, 59, 0.6);
}
.dark .badge-sunken {
  background: #111720;
  box-shadow:
    inset 2px 2px 4px rgba(9, 12, 18, 0.9),
    inset -2px -2px 4px rgba(33, 44, 59, 0.55);
}

/* Nightmode: warna statis khas konten term.html agar terbaca di latar gelap */
.dark .page-term .text-slate-900 {
  color: #f1f5f9;
}
.dark .page-term .text-maroon,
.dark .page-term .text-maroon-deep {
  color: #f87171 !important;
}
.dark .page-term .hover\:text-maroon:hover,
.dark .page-term .hover\:text-maroon-deep:hover {
  color: #fca5a5 !important;
}
.dark .page-term .bg-maroon {
  background-color: #8b1e1e;
}
.dark .page-term .bg-maroon-deep {
  background-color: #520308;
}
.dark .page-term .bg-maroon-tint {
  background-color: rgba(139, 30, 30, 0.22);
}
.dark .page-term .bg-blue-50 {
  background-color: rgba(30, 58, 138, 0.25);
}
.dark .page-term .text-blue-700 {
  color: #93c5fd;
}
.dark .page-term .bg-emerald-50 {
  background-color: rgba(6, 78, 59, 0.3);
}
.dark .page-term .text-emerald-700 {
  color: #6ee7b7;
}
.dark .page-term .bg-emerald-100 {
  background-color: rgba(6, 78, 59, 0.4);
}
.dark .page-term .bg-amber-50 {
  background-color: rgba(120, 53, 15, 0.3);
}
.dark .page-term .text-amber-700 {
  color: #fbbf24;
}
.dark .page-term .bg-amber-200\/70,
.dark .page-term .border-amber-200\/70 {
  border-color: rgba(180, 83, 9, 0.45);
}
.dark .page-term .bg-amber-50.border-amber-200\/70 {
  background-color: rgba(120, 53, 15, 0.3);
  border-color: rgba(180, 83, 9, 0.45);
}
.dark .page-term .text-amber-900 {
  color: #fcd34d;
}
.dark .page-term .text-rose-700 {
  color: #fda4af;
}
.dark .page-term .bg-white\/80 {
  background-color: rgba(27, 35, 47, 0.8);
}
.dark .page-term .border-slate-200\/50,
.dark .page-term .border-slate-200\/60,
.dark .page-term .border-slate-200\/80 {
  border-color: rgba(30, 41, 59, 0.6);
}
.dark .page-term .border-white\/80,
.dark .page-term .border-white\/90 {
  border-color: rgba(255, 255, 255, 0.06);
}
.dark .page-term .bg-slate-100 {
  background-color: #1e2837;
}
/* --------------------------------------------------------------------------
   P. Gaya Detail Tur: kelas clay khas detail-tur (discope lewat
      .page-detail-tur agar tidak menimpa definisi halaman lain) + dark mode
      (nightmode) untuk kelas Material khasnya.
      (digabung dari detail-tur.css — dipakai oleh detail-tur.html)
      Catatan: .clay-sunken versi detail-tur (3px) di-scope; .clay-raised
      menambah latar #f7f9fe di atas shadow-nya agar kartu tidak transparan;
      palet Material detail-tur.js identik dengan konfigurasi di index.js.
   -------------------------------------------------------------------------- */
.page-detail-tur main .clay-raised {
  background: #f7f9fe;
  box-shadow:
    6px 6px 14px rgba(163, 177, 198, 0.55),
    -6px -6px 14px rgba(255, 255, 255, 0.85);
}
.page-detail-tur main .clay-sunken {
  box-shadow:
    inset 3px 3px 6px rgba(163, 177, 198, 0.6),
    inset -3px -3px 6px rgba(255, 255, 255, 0.8);
}
.clay-crimson {
  box-shadow:
    6px 6px 16px rgba(106, 2, 10, 0.35),
    -4px -4px 10px rgba(255, 255, 255, 0.7);
}

/* Nightmode: varian dark kelas khas detail-tur */
.dark .page-detail-tur main .clay-raised {
  background: #1b232f;
  box-shadow:
    6px 6px 14px rgba(12, 16, 23, 0.8),
    -6px -6px 14px rgba(40, 51, 68, 0.35);
}
.dark .page-detail-tur main .clay-sunken {
  box-shadow:
    inset 3px 3px 6px rgba(9, 12, 18, 0.9),
    inset -3px -3px 6px rgba(33, 44, 59, 0.6);
}
.dark .clay-crimson {
  box-shadow:
    5px 5px 14px rgba(0, 0, 0, 0.6),
    -2px -2px 8px rgba(255, 255, 255, 0.08);
}

/* Nightmode: kelas Material khas detail-tur yang belum tercakup seksi lain */
.dark .text-on-tertiary {
  color: #d1fae5;
}
.dark .bg-primary\/10 {
  background-color: rgba(139, 30, 30, 0.2);
}
.dark .bg-primary\/70 {
  background-color: rgba(106, 2, 10, 0.7);
}
.dark .bg-secondary\/10 {
  background-color: rgba(146, 64, 14, 0.25);
}
.dark .bg-outline-variant {
  background-color: rgba(30, 41, 59, 0.7);
}
.dark .ring-secondary\/20 {
  --tw-ring-color: rgba(251, 191, 36, 0.2);
}
.dark .bg-\[\#25D366\] {
  background-color: #1da851;
}
/* --------------------------------------------------------------------------
   Q. Gaya Detail Rent Car: kelas clay khas detail-rent-car (discope lewat
      .page-detail-rent-car agar tidak menimpa definisi halaman lain)
      + dark mode (nightmode) untuk kelas khasnya.
      (digabung dari detail-rent-car.css — dipakai oleh detail-rent-car.html)
      Catatan: .clay-sunken versi halaman ini (bg #e4e9f0, inset 4px) dan
      .clay-raised versi halaman ini (border + radius) hanya berlaku untuk
      konten asli di dalam <main>; header/CTA/footer/modal homepage tetap
      identik dengan index.html.
   -------------------------------------------------------------------------- */
.page-detail-rent-car main .clay-raised {
  background: #e8edf3;
  box-shadow:
    7px 7px 16px #cbd4e1,
    -7px -7px 16px #ffffff;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
}
.page-detail-rent-car main .clay-sunken {
  background: #e4e9f0;
  box-shadow:
    inset 4px 4px 8px #cbd4e1,
    inset -4px -4px 8px #ffffff;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.clay-button {
  background: #e8edf3;
  box-shadow:
    4px 4px 10px #cbd4e1,
    -4px -4px 10px #ffffff;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.clay-button:hover {
  box-shadow:
    6px 6px 14px #c2cddb,
    -6px -6px 14px #ffffff;
  transform: translateY(-1px);
}
.clay-button:active,
.clay-button.active {
  box-shadow:
    inset 3px 3px 6px #cbd4e1,
    inset -3px -3px 6px #ffffff;
  transform: translateY(1px);
}
.page-detail-rent-car .clay-maroon-btn {
  background: linear-gradient(135deg, #8b1e1e 0%, #6a020a 100%);
  box-shadow:
    4px 4px 12px rgba(106, 2, 10, 0.3),
    -2px -2px 6px rgba(255, 255, 255, 0.6);
  color: #ffffff;
  transition: all 0.2s ease;
}
.page-detail-rent-car .clay-maroon-btn:hover {
  background: linear-gradient(135deg, #9e2323 0%, #7d040e 100%);
  transform: translateY(-1px);
  box-shadow:
    6px 6px 16px rgba(106, 2, 10, 0.4),
    -3px -3px 8px rgba(255, 255, 255, 0.7);
}
.page-detail-rent-car .clay-maroon-btn:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4);
}

/* Nightmode: varian dark kelas khas detail-rent-car */
.dark .page-detail-rent-car main .clay-raised {
  background: #1b232f;
  box-shadow:
    7px 7px 16px rgba(12, 16, 23, 0.8),
    -7px -7px 16px rgba(40, 51, 68, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.dark .page-detail-rent-car main .clay-sunken {
  background: #111720;
  box-shadow:
    inset 4px 4px 8px rgba(9, 12, 18, 0.9),
    inset -4px -4px 8px rgba(33, 44, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.dark .clay-button {
  background: #1e2837;
  box-shadow:
    4px 4px 10px #0c1017,
    -4px -4px 10px #263346;
}
.dark .clay-button:hover {
  box-shadow:
    6px 6px 14px #0c1017,
    -6px -6px 14px #263346;
}
.dark .page-detail-rent-car .clay-maroon-btn {
  box-shadow:
    5px 5px 14px rgba(0, 0, 0, 0.6),
    -2px -2px 8px rgba(255, 255, 255, 0.08);
}

/* Nightmode: warna statis khas konten detail-rent-car */
.dark .page-detail-rent-car .text-slate-900 {
  color: #f1f5f9;
}
.dark .page-detail-rent-car .text-maroon-700,
.dark .page-detail-rent-car .text-maroon-800 {
  color: #f87171 !important;
}
.dark .page-detail-rent-car .hover\:text-maroon-700:hover,
.dark .page-detail-rent-car .hover\:text-maroon-800:hover {
  color: #fca5a5 !important;
}
.dark .page-detail-rent-car .bg-\[\#e4e9f0\] {
  background-color: #111720;
}
.dark .page-detail-rent-car .bg-\[\#e4e9f0\]\/70 {
  background-color: rgba(17, 23, 32, 0.7);
}
.dark .page-detail-rent-car .bg-white\/50 {
  background-color: rgba(27, 35, 47, 0.5);
}
.dark .page-detail-rent-car .bg-white\/60 {
  background-color: rgba(27, 35, 47, 0.6);
}
.dark .page-detail-rent-car .bg-white\/70 {
  background-color: rgba(27, 35, 47, 0.7);
}
.dark .page-detail-rent-car .bg-white\/80 {
  background-color: rgba(27, 35, 47, 0.8);
}
.dark .page-detail-rent-car .border-slate-300 {
  border-color: #1e293b;
}
.dark .page-detail-rent-car .border-slate-300\/70,
.dark .page-detail-rent-car .border-slate-300\/80 {
  border-color: rgba(30, 41, 59, 0.7);
}
.dark .page-detail-rent-car .border-transparent {
  border-color: transparent;
}
.dark .page-detail-rent-car .text-amber-800 {
  color: #fbbf24;
}
.dark .page-detail-rent-car .text-emerald-800 {
  color: #6ee7b7;
}
.dark .page-detail-rent-car .text-blue-800 {
  color: #93c5fd;
}
.dark .page-detail-rent-car .text-cyan-800 {
  color: #67e8f9;
}
.dark .page-detail-rent-car .text-purple-800 {
  color: #c084fc;
}
.dark .page-detail-rent-car .text-rose-700,
.dark .page-detail-rent-car .text-rose-800 {
  color: #fda4af;
}
.dark .page-detail-rent-car .bg-slate-200\/80 {
  background-color: rgba(30, 41, 59, 0.8);
}
.dark .page-detail-rent-car .bg-slate-300\/60 {
  background-color: rgba(51, 65, 85, 0.6);
}
.dark .page-detail-rent-car .bg-blue-100 {
  background-color: rgba(30, 58, 138, 0.3);
}
.dark .page-detail-rent-car .from-\[\#ffffff\] {
  --tw-gradient-from: #1e2837 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 40 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark .page-detail-rent-car .to-\[\#f4f7fb\] {
  --tw-gradient-to: #141a23 var(--tw-gradient-to-position);
}
.dark .page-detail-rent-car .border-maroon-700 {
  border-color: rgba(248, 113, 113, 0.45);
}
.dark .page-detail-rent-car .border-l-maroon-700 {
  border-left-color: rgba(248, 113, 113, 0.45);
}

/* --------------------------------------------------------------------------
   R. Gaya Detail Shuttle: kelas clay khas detail-shuttle (discope lewat
      .page-detail-shuttle agar tidak menimpa definisi halaman lain) + dark
      mode (nightmode) untuk kelas Material khasnya.
      (digabung dari detail-shuttle.css — dipakai oleh detail-shuttle.html)
      Catatan: .clay-convex/.clay-convex-sm/.clay-concave/.clay-maroon-btn/
      .clay-emerald-btn versi halaman ini identik dengan seksi E (rentcar),
      jadi tidak diduplikasi; hanya override dark & kelas Material khasnya.
   -------------------------------------------------------------------------- */
/* Body & main mengikuti nightmode (kelas bg-surface Material tetap terang
   di mode gelap — dipaksa gelap agar konsisten dengan halaman lain) */
.dark body.page-detail-shuttle,
.dark body.page-detail-shuttle main.bg-surface,
.dark body.page-detail-shuttle .bg-surface {
  background-color: #141a23;
}
.dark .page-detail-shuttle .bg-surface\/90 {
  background-color: rgba(20, 26, 35, 0.9);
}

/* Nightmode: kelas Material khas detail-shuttle yang belum tercakup seksi lain */
.dark .page-detail-shuttle .text-on-primary-fixed {
  color: #ffd7d4;
}
.dark .page-detail-shuttle .bg-primary-fixed\/20 {
  background-color: rgba(139, 30, 30, 0.25);
}
.dark .page-detail-shuttle .text-secondary-fixed {
  color: #ffb77d;
}
.dark .page-detail-shuttle .border-secondary\/20 {
  border-color: rgba(146, 64, 14, 0.35);
}
.dark .page-detail-shuttle .border-outline-variant\/30 {
  border-color: rgba(30, 41, 59, 0.5);
}
.dark .page-detail-shuttle .bg-secondary-container\/10 {
  background-color: rgba(146, 64, 14, 0.2);
}
.dark .page-detail-shuttle .bg-tertiary-container\/10 {
  background-color: rgba(0, 83, 60, 0.2);
}
.dark .page-detail-shuttle .text-on-tertiary-container {
  color: #7cc6a7;
}
.dark .page-detail-shuttle .text-on-secondary-container {
  color: #ffdcc3;
}
.dark .page-detail-shuttle .bg-surface-container-lowest {
  background-color: #1b232f;
}
.dark .page-detail-shuttle .text-on-secondary-fixed {
  color: #2f1500;
}
.dark .page-detail-shuttle .bg-surface-container-high {
  background-color: rgba(30, 41, 59, 0.6);
}
.dark .page-detail-shuttle .bg-surface\/90 {
  background-color: rgba(20, 26, 35, 0.9);
}
.dark .page-detail-shuttle .text-outline-variant {
  color: #64748b;
}
.dark .page-detail-shuttle .bg-inverse-surface\/60 {
  background-color: rgba(45, 49, 53, 0.7);
}

/* --------------------------------------------------------------------------
   S. Gaya Detail Hotel: nightmode (dark mode) untuk kelas Material khas
      detail-hotel.html. Kelas .clay-convex/.clay-convex-sm/.clay-concave/
      .clay-maroon-btn/.clay-emerald-btn versi halaman ini identik dengan
      seksi E (rentcar), jadi tidak diduplikasi; hanya override dark &
      kelas Material khasnya.
      (digabung dari detail-hotel.css — dipakai oleh detail-hotel.html)
   -------------------------------------------------------------------------- */
/* Body & main mengikuti nightmode (kelas bg-surface Material tetap terang
   di mode gelap — dipaksa gelap agar konsisten dengan halaman lain) */
.dark body.page-detail-hotel,
.dark body.page-detail-hotel main.bg-surface,
.dark body.page-detail-hotel .bg-surface {
  background-color: #141a23;
}
.dark .page-detail-hotel .bg-surface\/90 {
  background-color: rgba(20, 26, 35, 0.9);
}

/* Nightmode: kelas Material khas detail-hotel yang belum tercakup seksi lain */
.dark .page-detail-hotel .bg-error-container {
  background-color: rgba(147, 0, 10, 0.3);
}
.dark .page-detail-hotel .text-error {
  color: #ffb4ab;
}
.dark .page-detail-hotel .bg-surface-container-lowest\/90 {
  background-color: rgba(27, 35, 47, 0.9);
}
.dark .page-detail-hotel .bg-surface-container-lowest\/50 {
  background-color: rgba(27, 35, 47, 0.5);
}
.dark .page-detail-hotel .bg-surface-container-high {
  background-color: rgba(30, 41, 59, 0.6);
}
.dark .page-detail-hotel .border-primary\/20 {
  border-color: rgba(248, 113, 113, 0.25);
}
.dark .page-detail-hotel .bg-primary\/90 {
  background-color: rgba(139, 30, 30, 0.9);
}
.dark .page-detail-hotel .bg-primary-container\/60 {
  background-color: rgba(139, 30, 30, 0.6);
}
.dark .page-detail-hotel .bg-secondary\/15 {
  background-color: rgba(146, 64, 14, 0.2);
}
.dark .page-detail-hotel .text-tertiary {
  color: #7cc6a7;
}
.dark .page-detail-hotel .text-secondary {
  color: #fbbf24;
}
.dark .page-detail-hotel .text-primary {
  color: #f87171;
}
.dark .page-detail-hotel .hover\:text-primary:hover {
  color: #fca5a5;
}
.dark .page-detail-hotel .text-on-tertiary {
  color: #d1fae5;
}
.dark .page-detail-hotel .text-on-surface {
  color: #e2e8f0;
}
.dark .page-detail-hotel .text-on-surface-variant {
  color: #94a3b8;
}
.dark .page-detail-hotel .text-outline-variant {
  color: #64748b;
}
.dark .page-detail-hotel .bg-surface-container-lowest {
  background-color: #1b232f;
}
.dark .page-detail-hotel .bg-surface-container {
  background-color: #1b232f;
}
.dark .page-detail-hotel .bg-surface-container-low {
  background-color: #1b232f;
}
.dark .page-detail-hotel .border-outline-variant\/20,
.dark .page-detail-hotel .border-outline-variant\/30 {
  border-color: rgba(30, 41, 59, 0.5);
}
.dark .page-detail-hotel .text-on-primary {
  color: #ffffff;
}
.dark .page-detail-hotel .text-on-primary-container {
  color: #ffd7d4;
}
.dark .page-detail-hotel .text-on-secondary-container {
  color: #ffdcc3;
}
.dark .page-detail-hotel .bg-secondary {
  background-color: #92400e;
}
.dark .page-detail-hotel .bg-secondary-container {
  background-color: rgba(146, 64, 14, 0.4);
}
.dark .page-detail-hotel .bg-tertiary-container {
  background-color: rgba(0, 83, 60, 0.4);
}

/* --------------------------------------------------------------------------
   T. Gaya Detail Artikel: nightmode (dark mode) untuk kelas Material khas
      detail-artikel.html. Base layer & ::-webkit-scrollbar halaman ini
      identik dengan seksi E (rentcar), jadi tidak diduplikasi; hanya
      override dark untuk latar/border khas konten artikel.
      (digabung dari detail-artikel.css — dipakai oleh detail-artikel.html)
   -------------------------------------------------------------------------- */
/* Body & main mengikuti nightmode (kelas bg-surface Material tetap terang
   di mode gelap — dipaksa gelap agar konsisten dengan halaman lain) */
.dark body.page-detail-artikel,
.dark body.page-detail-artikel main.bg-surface,
.dark body.page-detail-artikel .bg-surface {
  background-color: #141a23;
}

/* Nightmode: kelas Material khas detail-artikel yang belum tercakup seksi lain */
.dark .page-detail-artikel .bg-surface-container-low\/90 {
  background-color: rgba(27, 35, 47, 0.9);
}
.dark .page-detail-artikel .bg-surface-container-lowest\/90 {
  background-color: rgba(27, 35, 47, 0.9);
}
.dark .page-detail-artikel .bg-surface-container-high {
  background-color: rgba(30, 41, 59, 0.6);
}
.dark .page-detail-artikel .border-surface-container-high\/60 {
  border-color: rgba(30, 41, 59, 0.6);
}
.dark .page-detail-artikel .text-gray-200 {
  color: #94a3b8;
}
.dark .page-detail-artikel .selection\:bg-primary-fixed {
  --tw-gradient-from: none;
}

/* --------------------------------------------------------------------------
   U. Gaya Log-In User (Modal Login Pelanggan): permukaan Neumorphic Clay
      khas modal auth (surface/input/tombol/icon-btn) + animasi buka-tutup
      modal via class body.modal-open / body.modal-closed.
      (digabung dari log-in-user.css — dipakai oleh log-in-user.html)
      Catatan: kelas .clay-surface/.clay-sunken-input/.clay-button-maroon/
      .clay-button-secondary/.clay-icon-btn unik untuk halaman ini;
      body override di-scope .page-log-in-user agar tidak menimpa homepage.
   -------------------------------------------------------------------------- */
.page-log-in-user {
  background-color: #e8edf3;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #1e293b;
}

.clay-surface {
  background: #e8edf3;
  box-shadow:
    10px 10px 24px #cbd5e1,
    -10px -10px 24px #ffffff;
}

.clay-sunken-input {
  background: #e4eaf0;
  box-shadow:
    inset 4px 4px 8px #cad5e2,
    inset -4px -4px 8px #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.6);
  transition: all 0.25s ease;
}

.clay-sunken-input:focus-within {
  border-color: #8b1e1e;
  box-shadow:
    inset 3px 3px 6px #cad5e2,
    inset -3px -3px 6px #ffffff,
    0 0 0 3px rgba(139, 30, 30, 0.12);
}

.clay-button-maroon {
  background: linear-gradient(135deg, #8b1e1e 0%, #6a020a 100%);
  box-shadow:
    0 10px 20px -4px rgba(139, 30, 30, 0.4),
    4px 4px 10px #cad5e2,
    -4px -4px 10px #ffffff;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.clay-button-maroon:hover {
  background: linear-gradient(135deg, #9b2222 0%, #77030c 100%);
  transform: translateY(-2px);
  box-shadow:
    0 14px 24px -4px rgba(139, 30, 30, 0.5),
    6px 6px 14px #cad5e2,
    -6px -6px 14px #ffffff;
}

.clay-button-maroon:active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.35),
    inset -2px -2px 5px rgba(255, 255, 255, 0.2);
}

.clay-button-secondary {
  background: #e8edf3;
  box-shadow:
    5px 5px 12px #cad5e2,
    -5px -5px 12px #ffffff;
  transition: all 0.2s ease;
}

.clay-button-secondary:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
  box-shadow:
    7px 7px 15px #c2cddb,
    -7px -7px 15px #ffffff;
}

.clay-button-secondary:active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 6px #cad5e2,
    inset -3px -3px 6px #ffffff;
}

.clay-icon-btn {
  background: #e8edf3;
  box-shadow:
    4px 4px 9px #cad5e2,
    -4px -4px 9px #ffffff;
  transition: all 0.2s ease;
}

.clay-icon-btn:hover {
  color: #8b1e1e;
  transform: scale(1.05);
}

.clay-icon-btn:active {
  transform: scale(0.95);
  box-shadow:
    inset 2px 2px 5px #cad5e2,
    inset -2px -2px 5px #ffffff;
}

/* Modal Animation */
#userAuthModal {
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.3s;
}

#modalCard {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-open #userAuthModal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-closed #userAuthModal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal-open #modalCard {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-closed #modalCard {
  transform: scale(0.92) translateY(24px);
  opacity: 0;
}

/* --------------------------------------------------------------------------
   V. Gaya Log-In Admin (Modal Super Admin & Operasional): Dark Neumorphism
      khas portal admin (clay card gelap, sunken field, PIN box, tombol
      otorisasi, icon button), cyber grid backdrop, efek scan radar, dan
      pulse glow. (digabung dari log-in-admin.css — dipakai log-in-admin.html)
      Catatan: seluruh kelas memakai prefix admin-* (unik) & keyframes
      scanline/pulse-glow tidak bentrok dengan beacon-ping (seksi K);
      halaman ini memang sengaja selalu gelap (tanpa nightmode toggle).
   -------------------------------------------------------------------------- */
/* Dark Neumorphism Shadows */
.admin-clay-card {
  background: radial-gradient(120% 120% at 50% 0%, #222934 0%, #161a22 100%);
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(139, 30, 30, 0.4),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.5);
}

.admin-sunken-field {
  background: #12151c;
  box-shadow:
    inset 2px 2px 6px rgba(0, 0, 0, 0.8),
    inset -1px -1px 3px rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-pin-box {
  background: #11141a;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.85),
    inset -1px -1px 2px rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}

.admin-pin-box:focus-within,
.admin-pin-box:focus {
  background: #151922;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.9),
    0 0 0 2px #8b1e1e,
    0 0 16px rgba(139, 30, 30, 0.45);
}

.admin-btn-primary {
  background: linear-gradient(135deg, #a51d24 0%, #8b1e1e 50%, #580d0d 100%);
  box-shadow:
    0 8px 20px -4px rgba(139, 30, 30, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-btn-primary:hover {
  background: linear-gradient(135deg, #b9242c 0%, #9e1c1c 50%, #681111 100%);
  box-shadow:
    0 12px 25px -4px rgba(165, 29, 36, 0.8),
    0 0 20px rgba(139, 30, 30, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.admin-btn-primary:active {
  transform: translateY(1px);
  box-shadow:
    0 4px 10px -2px rgba(139, 30, 30, 0.5),
    inset 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.admin-icon-btn {
  background: linear-gradient(135deg, #252c38 0%, #171b23 100%);
  box-shadow:
    3px 3px 8px rgba(0, 0, 0, 0.6),
    -2px -2px 6px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.admin-icon-btn:hover {
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.7),
    -1px -1px 3px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #f87171;
}

.cyber-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Radar scan effect */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.15;
  }
  100% {
    transform: translateY(1000%);
    opacity: 0;
  }
}
.scan-effect {
  animation: scanline 8s linear infinite;
}

/* Pulse lock */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.85;
  }
}
.pulse-amber {
  animation: pulse-glow 2.5s infinite;
}

/* --------------------------------------------------------------------------
   W. Tombol mengambang (WA + Back-to-Top): transparan saat idle, menjadi
      solid/tidak transparan saat di-hover atau diklik (:active).
      Diterapkan ke semua halaman yang memakai tombol ini.
   -------------------------------------------------------------------------- */
.float-wa-btn,
.float-btt-btn {
  opacity: 0.4;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.float-wa-btn:hover,
.float-wa-btn:active,
.float-wa-btn:focus-visible,
.float-btt-btn:hover,
.float-btt-btn:active,
.float-btt-btn:focus-visible {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   X. Gaya Form Booking (Modal Booking Neumorphic Clay): kelas unik global
      (.clay-inset-deep/.clay-btn-whatsapp/.clay-chip/.clay-checkbox/
      .clay-radio/.stepper-btn/.custom-scrollbar + animasi checkmarkPop),
      sedangkan kelas yang bentrok nilai dengan seksi lain (.clay-card,
      .clay-card-sm, .clay-inset, .clay-btn, .clay-btn-maroon) di-scope ke
      .page-form-booking agar tampilan halaman ini tetap sesuai desain asli
      tanpa mengubah halaman lain.
      (digabung dari form-booking.css — dipakai oleh form-booking.html)
   -------------------------------------------------------------------------- */
/* Token warna khusus halaman form-booking */
.page-form-booking {
  --clay-shadow-dark: #b8c3d1;
}

/* Kelas bentrok — versi form-booking, di-scope */
.page-form-booking .clay-card {
  border-radius: 0;
  border: none;
  background: #e8edf3;
  box-shadow:
    12px 12px 24px var(--clay-shadow-dark),
    -12px -12px 24px #ffffff;
}
.page-form-booking .clay-card-sm {
  border-radius: 0;
  background: #e8edf3;
  box-shadow:
    6px 6px 14px var(--clay-shadow-dark),
    -6px -6px 14px #ffffff;
}
.page-form-booking .clay-inset {
  background: #e4e9f0;
  box-shadow:
    inset 4px 4px 8px #b4bfcf,
    inset -4px -4px 8px #ffffff;
}
.page-form-booking .clay-btn {
  background: #e8edf3;
  box-shadow:
    6px 6px 14px var(--clay-shadow-dark),
    -6px -6px 14px #ffffff;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-form-booking .clay-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    8px 8px 18px var(--clay-shadow-dark),
    -8px -8px 18px #ffffff;
}
.page-form-booking .clay-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 6px var(--clay-shadow-dark),
    inset -3px -3px 6px #ffffff;
}
.page-form-booking .clay-btn-maroon {
  background: linear-gradient(145deg, #8b1e1e, #6a020a);
  color: #ffffff;
  box-shadow:
    6px 6px 16px rgba(106, 2, 10, 0.4),
    -4px -4px 12px rgba(255, 255, 255, 0.7);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-form-booking .clay-btn-maroon:hover {
  transform: translateY(-2px);
  box-shadow:
    8px 10px 22px rgba(106, 2, 10, 0.5),
    -5px -5px 14px rgba(255, 255, 255, 0.8);
}
.page-form-booking .clay-btn-maroon:active {
  transform: translateY(1px);
  box-shadow:
    inset 4px 4px 8px rgba(45, 1, 6, 0.7),
    inset -3px -3px 6px rgba(255, 255, 255, 0.2);
}

/* Kelas unik form-booking (global — tidak dipakai halaman lain) */
.clay-inset-deep {
  background: #dfe5ec;
  box-shadow:
    inset 6px 6px 12px #aab6c6,
    inset -6px -6px 12px #ffffff;
}

/* WhatsApp Green Button */
.clay-btn-whatsapp {
  background: linear-gradient(145deg, #25d366, #1ea952);
  color: #ffffff;
  box-shadow:
    6px 6px 16px rgba(30, 169, 82, 0.35),
    -4px -4px 12px rgba(255, 255, 255, 0.7);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.clay-btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow:
    8px 10px 20px rgba(30, 169, 82, 0.45),
    -5px -5px 14px rgba(255, 255, 255, 0.8);
}
.clay-btn-whatsapp:active {
  transform: translateY(1px);
  box-shadow:
    inset 4px 4px 8px rgba(13, 100, 45, 0.7),
    inset -3px -3px 6px rgba(255, 255, 255, 0.3);
}

/* Chips Selection */
.clay-chip {
  background: #e8edf3;
  box-shadow:
    3px 3px 7px #b8c3d1,
    -3px -3px 7px #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}
.clay-chip.active {
  background: #e2e8f0;
  color: #8b1e1e;
  box-shadow:
    inset 3px 3px 6px #b4bfcf,
    inset -3px -3px 6px #ffffff;
  font-weight: 700;
  border: 1px solid rgba(139, 30, 30, 0.2);
}

/* Custom Checkbox Inset */
.clay-checkbox {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #e4e9f0;
  box-shadow:
    inset 2px 2px 4px #b8c4d2,
    inset -2px -2px 4px #ffffff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.clay-checkbox:checked {
  background: #8b1e1e;
  box-shadow: 2px 2px 6px rgba(139, 30, 30, 0.4);
}
.clay-checkbox:checked::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Custom Radio Inset */
.clay-radio {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e4e9f0;
  box-shadow:
    inset 2px 2px 4px #b8c4d2,
    inset -2px -2px 4px #ffffff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.clay-radio:checked {
  background: #e8edf3;
  box-shadow:
    2px 2px 5px #b8c3d1,
    -2px -2px 5px #ffffff;
}
.clay-radio:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8b1e1e;
  box-shadow: 0 0 6px rgba(139, 30, 30, 0.6);
}

/* Stepper buttons */
.stepper-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold;
  background: #e8edf3;
  box-shadow:
    3px 3px 6px #b8c3d1,
    -3px -3px 6px #ffffff;
  cursor: pointer;
  transition: all 0.15s;
}
.stepper-btn:active {
  box-shadow:
    inset 2px 2px 4px #b8c3d1,
    inset -2px -2px 4px #ffffff;
  transform: scale(0.96);
}

/* Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animation Keyframes */
@keyframes checkmarkPop {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.15) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.animate-check-pop {
  animation: checkmarkPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* --------------------------------------------------------------------------
   Y. Polish Global: tipografi, fokus, seleksi, scrollbar & transisi nav
   (diterapkan ke semua halaman; ringan & aman untuk shared hosting)
   -------------------------------------------------------------------------- */

/* Tipografi dasar: anti-aliasing + fallback font konsisten */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Warna seleksi teks mengikuti tema maroon */
::selection {
  background: rgba(139, 30, 30, 0.18);
  color: inherit;
}

/* Fokus keyboard yang konsisten (aksesibilitas) tanpa outline ganda */
:focus-visible {
  outline: 2px solid rgba(139, 30, 30, 0.55);
  outline-offset: 2px;
}
.dark :focus-visible {
  outline-color: rgba(248, 113, 113, 0.6);
}

/* Scrollbar halus senada tema clay */
* {
  scrollbar-width: thin;
  scrollbar-color: #b8c3d1 transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: #b8c3d1;
  border-radius: 9999px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
.dark *::-webkit-scrollbar-thumb {
  background: #33405240;
}
.dark * {
  scrollbar-color: #334052 transparent;
}

/* Transisi nav: perubahan warna/bayangan halus, tanpa lompatan.
   Selektor [href] menaikkan specificity agar tidak kalah dari
   aturan a[class*="rounded"] di bawah. */
header nav a[href],
header nav button {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}
header nav a[href]:hover {
  transform: translateY(-1px);
}

/* Animasi masuk halus untuk item nav aktif saat halaman dimuat */
@keyframes navActiveIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.nav-active-in {
  animation: navActiveIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sudut lengkung & bayangan tombol/link konsisten di kartu */
a[class*="rounded"],
button[class*="rounded"] {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

/* Gambar di dalam kartu ikut lengkung (hindari sudut tajam bocor) */
.rounded-xl img,
.rounded-2xl img,
.rounded-3xl img {
  border-radius: inherit;
}

/* Mode malam: teks & permukaan umum yang masih terang diperbaiki */
.dark body {
  background-color: #141a23;
  color: #e2e8f0;
}
.dark .clay-surface,
.dark .clay-sunken-pill {
  background: #1b232f;
}
.dark .text-slate-800 {
  color: #f1f5f9;
}
.dark .text-slate-700 {
  color: #e2e8f0;
}
.dark .text-slate-600 {
  color: #cbd5e1;
}
.dark .text-slate-500 {
  color: #94a3b8;
}
.dark .text-slate-400 {
  color: #94a3b8;
}
.dark .bg-white\/60,
.dark .bg-white\/70,
.dark .bg-white\/80 {
  background-color: rgba(255, 255, 255, 0.06);
}
.dark .border-white\/50,
.dark .border-white\/60,
.dark .border-white\/70,
.dark .border-white\/80 {
  border-color: rgba(255, 255, 255, 0.08);
}
.dark input,
.dark select,
.dark textarea {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  .nav-active-in {
    animation: none;
  }
  header nav a:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Z. Nightmode (dark) untuk kelas clay yang belum tercakup — konsisten
   palet gelap: latar #141a23, permukaan #1b232f, bayangan #0c1017/#283344
   -------------------------------------------------------------------------- */
.dark .clay-card-sm {
  background: #1b232f;
  box-shadow:
    5px 5px 12px #0c1017,
    -5px -5px 12px #283344;
  border-color: rgba(255, 255, 255, 0.05);
}
.dark .clay-raised {
  background: #1b232f;
  box-shadow:
    6px 6px 14px #0c1017,
    -6px -6px 14px #283344;
  border-color: rgba(255, 255, 255, 0.05);
}
.dark .clay-sunken-sm {
  background: #161d28;
  box-shadow:
    inset 4px 4px 8px #0c1017,
    inset -4px -4px 8px #283344;
}
.dark .clay-inset-deep {
  background: #161d28;
  box-shadow:
    inset 6px 6px 12px #0a0e14,
    inset -6px -6px 12px #283344;
}
.dark .clay-sunken-input {
  background: #161d28;
  color: #e2e8f0;
  box-shadow:
    inset 4px 4px 8px #0c1017,
    inset -4px -4px 8px #283344;
}
.dark .clay-icon-btn {
  background: #1b232f;
  color: #94a3b8;
  box-shadow:
    4px 4px 8px #0c1017,
    -4px -4px 8px #283344;
}
.dark .clay-icon-btn:hover {
  color: #f87171;
}
.dark .clay-checkbox,
.dark .clay-radio {
  accent-color: #f87171;
}
.dark .clay-chip {
  background: #1b232f;
  color: #cbd5e1;
  box-shadow:
    3px 3px 7px #0c1017,
    -3px -3px 7px #283344;
}
.dark .clay-chip.active {
  background: #3f1521;
  color: #fca5a5;
  box-shadow: inset 3px 3px 6px #1c0810;
}

/* Tombol gradient di nightmode: saturasinya diturunkan agar tidak menyilaukan */
.dark .clay-btn-maroon,
.dark .clay-maroon-btn,
.dark .clay-button-maroon,
.dark .clay-crimson {
  background: linear-gradient(145deg, #7c1d1d, #5c060f);
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.5);
}
.dark .clay-btn-whatsapp {
  background: linear-gradient(145deg, #1ea952, #178a44);
}
.dark .clay-btn-teal {
  background: linear-gradient(135deg, #0f766e, #115e59);
}
.dark .clay-emerald-btn {
  background: linear-gradient(135deg, #059669, #047857);
}
.dark .clay-button-secondary {
  background: #232d3b;
  color: #e2e8f0;
  box-shadow:
    4px 4px 10px #0c1017,
    -4px -4px 10px #283344;
}

/* --------------------------------------------------------------------------
   Perbaikan kontras nightmode: tombol CTA putih (.bg-white) yang teksnya
   maroon gelap (.text-maroon-*) menjadi tak terbaca setelah background
   digelapkan oleh .dark .bg-white. Paksa teksnya jadi terang.
   -------------------------------------------------------------------------- */
.dark .bg-white[class*="text-maroon"],
.dark .bg-white[class*="text-maroon"] * {
  color: #f1f5f9;
}
.dark .bg-white.text-maroon-800,
.dark .bg-white.text-maroon-700,
.dark .bg-white.text-maroon-900 {
  color: #f1f5f9;
}
/* Emerald teks gelap di atas permukaan gelap -> terang */
.dark .text-emerald-600 {
  color: #34d399;
}

/* --------------------------------------------------------------------------
   Peta warna nightmode: teks berwarna gelap/reds/amber/emerald yang tidak
   memakai palet .dark bawaan Tailwind diubah ke varian terang agar kontras
   terjaga di latar gelap. (Komprehensif, dipakai semua halaman.)
   -------------------------------------------------------------------------- */
.dark .text-red-300,
.dark .text-red-400 {
  color: #fca5a5;
}
.dark .text-red-600,
.dark .text-red-700,
.dark .text-red-800,
.dark .text-red-900,
.dark .text-maroon-600,
.dark .text-maroon-700,
.dark .text-maroon-800,
.dark .text-primary,
.dark .text-primary-container {
  color: #f87171;
}

.dark .text-amber-300,
.dark .text-amber-400 {
  color: #fcd34d;
}
.dark .text-amber-600,
.dark .text-amber-700,
.dark .text-amber-800,
.dark .text-amber-900,
.dark .text-amber-950 {
  color: #fbbf24;
}
.dark .text-yellow-300,
.dark .text-yellow-400 {
  color: #fde047;
}
.dark .text-yellow-600,
.dark .text-yellow-700,
.dark .text-yellow-800,
.dark .text-yellow-900 {
  color: #facc15;
}

.dark .text-emerald-600,
.dark .text-emerald-700,
.dark .text-emerald-800,
.dark .text-emerald-900,
.dark .text-emerald-950,
.dark .text-on-primary {
  color: #34d399;
}
.dark .text-green-600,
.dark .text-green-700,
.dark .text-green-800,
.dark .text-green-900 {
  color: #4ade80;
}

.dark .text-teal-600,
.dark .text-teal-700,
.dark .text-teal-800 {
  color: #2dd4bf;
}
.dark .text-cyan-600,
.dark .text-cyan-700,
.dark .text-cyan-800 {
  color: #22d3ee;
}

.dark .text-slate-500 {
  color: #94a3b8;
}
.dark .text-slate-400 {
  color: #94a3b8;
}
.dark .text-slate-600 {
  color: #cbd5e1;
}
.dark .text-slate-700 {
  color: #cbd5e1;
}
.dark .text-slate-800,
.dark .text-slate-900 {
  color: #e2e8f0;
}

.dark .text-on-surface,
.dark .text-on-surface-variant {
  color: #e2e8f0;
}

/* Placeholder & input terang */
.dark ::placeholder {
  color: #64748b;
  opacity: 1;
}
.dark input,
.dark select,
.dark textarea,
.dark [contenteditable] {
  color: #e2e8f0;
  background-color: #161d28;
}

/* Teks putih di atas tombol gelap yang digelapkan di nightmode */
.dark .clay-btn-maroon,
.dark .clay-maroon-btn,
.dark .clay-button-maroon,
.dark .clay-crimson,
.dark .bg-primary,
.dark .bg-primary-container {
  color: #ffffff;
}
/* Badge on-dark (contoh promo amber di atas bg/10) */
.dark [class*="text-amber-300"],
.dark [class*="text-amber-400"] {
  color: #fcd34d;
}
.dark [class*="text-amber-600"] {
  color: #fbbf24;
}
.dark [class*="text-emerald-600"],
.dark [class*="text-emerald-700"],
.dark [class*="text-emerald-800"],
.dark [class*="text-emerald-900"],
.dark .text-on-primary {
  color: #34d399;
}

/* --------------------------------------------------------------------------
   Nightmode untuk kelas scoped form-booking (seksi X memakai specificity
   0-2-0 yang sama dengan .dark .clay-card; aturan ini 0-3-0 sehingga menang
   saat .dark aktif). Juga clay-btn & nilai arbitrary terang di markup.
   -------------------------------------------------------------------------- */
.dark .page-form-booking .clay-card {
  background: #1b232f;
  box-shadow:
    12px 12px 24px #0c1017,
    -12px -12px 24px #283344;
}
.dark .page-form-booking .clay-card-sm {
  background: #1b232f;
  box-shadow:
    6px 6px 14px #0c1017,
    -6px -6px 14px #283344;
}
.dark .page-form-booking .clay-inset,
.dark .page-form-booking .clay-inset-deep {
  background: #161d28;
  box-shadow:
    inset 4px 4px 8px #0c1017,
    inset -4px -4px 8px #283344;
}
.dark .page-form-booking .clay-btn {
  background: #1b232f;
  box-shadow:
    6px 6px 14px #0c1017,
    -6px -6px 14px #283344;
  color: #e2e8f0;
}
.dark .page-form-booking .clay-chip {
  background: #1b232f;
  color: #cbd5e1;
  box-shadow:
    3px 3px 7px #0c1017,
    -3px -3px 7px #283344;
}
.dark .page-form-booking .clay-chip.active {
  background: #3f1521;
  color: #fca5a5;
  box-shadow: inset 3px 3px 6px #1c0810;
}

/* Tombol clay standar (dipakai index, tombol prev/next, dsb.) */
.dark .clay-btn {
  background: #1b232f;
  box-shadow:
    6px 6px 14px #0c1017,
    -6px -6px 14px #283344;
  color: #e2e8f0;
}
.dark .clay-btn:hover {
  box-shadow:
    8px 8px 18px #0c1017,
    -8px -8px 18px #283344;
}
.dark .clay-btn:active {
  box-shadow:
    inset 3px 3px 6px #0c1017,
    inset -3px -3px 6px #283344;
}

/* Nilai arbitrary terang yang dipakai markup form-booking */
.dark .bg-\[\#e4e9f0\],
.dark .bg-\[\#e8edf3\],
.dark .page-form-booking [class*="bg-[#e4e9f0]"],
.dark .page-form-booking [class*="bg-[#e8edf3]"] {
  background-color: #161d28;
}
.dark .page-form-booking input,
.dark .page-form-booking select,
.dark .page-form-booking textarea {
  color: #e2e8f0;
}
.dark .page-form-booking ::placeholder {
  color: #64748b;
}
.dark #thankYouModalCard,
.dark #bookingSearchCard {
  background: #1b232f;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Badge putih/90 di dark mode */
.dark .bg-white\/90 {
  background-color: rgba(27, 35, 47, 0.9);
}
.dark .bg-white {
  color: #f1f5f9;
}

/* Tombol emerald WA: sedikit lebih gelap agar teks putih kontras */
.dark .bg-emerald-600 {
  background-color: #047857;
}

/* --------------------------------------------------------------------------
   Dark: latar tinted (badge/label) supaya tidak silau — digelapkan.
   Dipakai lintas halaman; tetap konsisten palet gelap.
   -------------------------------------------------------------------------- */
/* Latar terang aksen -> versi gelap */
.dark .bg-amber-600,
.dark .bg-amber-500 {
  background-color: #92400e;
}
.dark .bg-amber-100 {
  background-color: #3d2b0f;
}
.dark .bg-amber-600\/80 {
  background-color: rgba(146, 64, 14, 0.8);
}
.dark .bg-emerald-600 {
  background-color: #047857;
}
.dark .bg-emerald-500 {
  background-color: #047857;
}
.dark .bg-emerald-100 {
  background-color: #063426;
}
.dark .bg-emerald-100\/70 {
  background-color: rgba(6, 52, 38, 0.75);
}
.dark .bg-emerald-500\/15,
.dark .bg-emerald-500\/20 {
  background-color: rgba(16, 185, 129, 0.18);
}
.dark .bg-blue-500\/15,
.dark .bg-blue-500\/20 {
  background-color: rgba(59, 130, 246, 0.18);
}
.dark .bg-cyan-500\/20 {
  background-color: rgba(34, 211, 238, 0.15);
}
.dark .bg-amber-500\/15,
.dark .bg-amber-500\/20 {
  background-color: rgba(245, 158, 11, 0.16);
}
.dark .bg-primary-fixed-dim {
  background-color: #3f1521;
}
.dark .bg-surface-container {
  background-color: #1b232f;
}
.dark .bg-surface-container\/90 {
  background-color: rgba(27, 35, 47, 0.92);
}
.dark .bg-slate-200\/50 {
  background-color: rgba(51, 65, 85, 0.5);
}
.dark .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.08);
}
.dark .bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Teks pada latar gelap ini jadi terang (elemen badge sendiri + anak) */
.dark .bg-amber-600,
.dark .bg-amber-500,
.dark .bg-amber-700,
.dark .bg-emerald-600,
.dark .bg-emerald-500,
.dark .bg-emerald-700,
.dark .bg-primary-fixed-dim,
.dark .bg-surface-container\/90,
.dark .bg-amber-600 *,
.dark .bg-amber-500 *,
.dark .bg-amber-700 *,
.dark .bg-emerald-600 *,
.dark .bg-emerald-500 *,
.dark .bg-emerald-700 *,
.dark .bg-primary-fixed-dim *,
.dark .bg-surface-container\/90 * {
  color: #f8fafc;
}
.dark .bg-amber-700 {
  background-color: #b45309;
}
.dark .bg-emerald-700 {
  background-color: #065f46;
}

/* Keterbacaan teks putih/terang yang diletakkan di atas foto/gambar:
   beri text-shadow agar terpisah dari latar gambar yang cerah. */
[class*="drop-shadow"],
[style*="drop-shadow"] {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.text-white,
.text-slate-100,
.text-slate-50,
.text-amber-300 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Tab switcher log-in-user: bg arbitrary terang digelapkan di nightmode */
.dark .bg-\[\#e0e6ec\] {
  background-color: #161d28;
}
.dark .page-log-in-user .bg-\[\#e8edf3\] {
  background-color: #1b232f;
}

/* --------------------------------------------------------------------------
   Light mode: naikkan kegelapan teks slate-400/500 (abu pucat) agar kontras
   terhadap latar clay terang terjaga. Dark mode tetap di-override di atas.
   -------------------------------------------------------------------------- */
.text-slate-400 {
  color: #64748b;
}
.text-slate-500 {
  color: #5b6b7f;
}
.dark .text-slate-400 {
  color: #94a3b8;
}
.dark .text-slate-500 {
  color: #94a3b8;
}