/* ===========================
   Winer Hotel - Main Stylesheet
   =========================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');

/* MENCEGAH KEBOCORAN KONTEN GLOBAL */
html, body {
  overflow-x: hidden; /* MEMATIKAN SCROLL HORIZONTAL PADA TINGKAT HALAMAN */
  width: 100%; /* MEMASTIKAN LEBAR BODY SAMA DENGAN VIEWPORT */
  position: relative;
}

/* ===========================
   CSS Variables
   =========================== */
:root {
  --primary: #2e7d32;
  --primary-light: #3ec444;
  --primary-lighter: #c8ffcb;
  --primary-dark: #49884d;
  --primary-darken: #214222;
  --white: #ffffff;
  --light: #f8f9fa;
  --dark: #1a1a1a;
  --gray: #6c757d;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --transition: all 0.3s ease;
}

/* ===========================
   Global
   =========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--dark);
  background-color: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
}

a {
  text-decoration: none;
  transition: var(--transition);
}

.bg-cream {
  background-color: #fdfaf3;
}

/* ===========================
   Navbar
   =========================== */
/* ===========================
   Navbar Styles
   =========================== */
/* ===========================
   Navbar Styles (Utama)
   =========================== */
.navbar {
  background-color: transparent;
  padding: 1.2rem 0;
  transition: var(--transition);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.navbar.scrolled {
  background-color: var(--white);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  padding: 0.8rem 0;
}

.navbar-brand .logo-img {
  height: 40px; 
  width: auto;  
  object-fit: contain;
  transition: var(--transition);
}

.navbar-brand span {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  transition: var(--transition);
}

.navbar.scrolled .navbar-brand span {
  color: var(--primary);
}

.navbar-nav .nav-link {
  color: var(--white) !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  letter-spacing: 0.5px;
  transition: var(--transition);
}

.navbar.scrolled .nav-link {
  color: var(--primary-light) !important;
}

.navbar-nav .nav-link.active {
  color: var(--primary-lighter) !important; /* Link aktif ijo lebih gelap */
  font-weight: 700;
}

.navbar.scrolled .nav-link.active {
  color: var(--primary-dark) !important; /* Link aktif ijo lebih gelap */
  font-weight: 700;
}

.navbar-nav .nav-link:hover {
  color: var(--primary-light) !important;
}

.navbar.scrolled .nav-link:hover {
  color: var(--primary) !important;
}

.btn-reservasi {
  background-color: var(--primary);
  color: var(--white) !important;
  border-radius: 4px;
  padding: 0.5rem 1.2rem !important;
  font-weight: 500;
  transition: var(--transition);
}

.navbar .nav-link.btn-reservasi:hover {
  background-color: var(--primary-lighter);
  color: var(--primary-darken) !important;
}

.navbar.scrolled .btn-reservasi {
  color: var(--white) !important;
}

/* ===========================
   Fix Navbar Toggler (Garis Tiga Tetap Putih)
   =========================== */

/* 1. Kasih 'rumah' buat si ikon biar pas di BG putih dia tetep nampak */
.navbar-toggler {
  background-color: rgba(46, 125, 50, 0.8); /* Warna hijau transparan */
  border-radius: 8px;
  padding: 5px;
  transition: var(--transition);
}

/* 2. Pas di-scroll, kita bikin kotaknya lebih tegas */
.navbar.scrolled .navbar-toggler {
  background-color: var(--primary); /* Hijau solid pas di-scroll */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 3. Paksa ikonnya tetep warna putih terus bub */
.navbar-toggler-icon {
  filter: invert(1) brightness(100%) !important;
}

/* ===========================
   Mobile Navbar Menu Fix 
   =========================== */
  .navbar-dark-start {
  background-color: var(--primary-dark) !important;
  }

@media (max-width: 991px) {
  .navbar-collapse {
    background-color: var(--light) !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 1.5rem;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: block; /* Pastikan dia muncul */
    z-index: 1000; /* Pastikan dia di atas konten lain */
  }

  .navbar-collapse.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

/* Link Menu - Warna Primary Dark */
  .navbar-nav .nav-link {
    color: var(--primary) !important; 
    padding: 12px 0;
    font-weight: 500;
    border-bottom: 1px solid #f1f1f1; /* Garis pemisah halus */
  }

    .navbar-nav.scrolled .nav-link {
    color: var(--primary) !important; 
    padding: 12px 0;
    font-weight: 500;
    border-bottom: 1px solid #f1f1f1; /* Garis pemisah halus */
  }

  /* Link Active - Warna Primary */
  .navbar-nav .nav-link.active {
    color: var(--primary) !important;
  }

  /* Link saat Diklik/Hover - Warna Primary Light */
  .navbar-nav .nav-link:active,
  .navbar-nav .nav-link:hover {
    color: var(--primary-darken) !important;
  }

  .navbar .btn-reservasi {
    background-color: var(--primary) !important;
    width: 100%; /* Tombol lebar penuh di HP */
    margin-top: 1rem;
    padding: 12px;
    color: var(--white) !important;
    border: none;
    border-radius: 8px;
    font-weight: 600;

  }

  /* Tombol saat Diklik - BG Primary Lighter, Teks Primary */
  .navbar .btn-reservasi:active,
  .navbar .btn-reservasi:hover {
    background-color: var(--primary-lighter) !important;
    color: var(--primary-darken) !important;
  }
}

.navbar.scrolled .btn-reservasi {
  color: var(--white) !important;
}
/* ===========================
   Hero Section
   =========================== */
.hero {
  position: relative;
  min-height: 100dvh;
  min-height: 600px;
  overflow: hidden;
}

/* Container utama slider harus punya tinggi */
.hero-slider {
  position: absolute; /* atau relative, tergantung struktur hero kamu */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 100vh = 100% tinggi layar monitor/HP */
  z-index: -1; /* Biar posisinya ada di belakang teks */
  overflow: hidden;
}

/* Pengaturan masing-masing slide */
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* Biar gambar menyesuaikan penuh ke layar tanpa gepeng */
  background-position: center; /* Biar gambar selalu fokus di tengah */
  background-repeat: no-repeat;
  opacity: 0; /* Dibikin transparan dulu... */
  transition: opacity 1s ease-in-out; /* Efek transisi halus */
}

/* Slide yang aktif akan dimunculkan */
.hero-slide.active {
  opacity: 1;
}

.hero-slide:first-child {
  opacity: 1;
}

/* Slide backgrounds - ganti URL dengan foto hotel asli */
.hero-slide:nth-child(1) {
  background-image: url('../assets/img/hero-1.jpeg'); 
}
.hero-slide:nth-child(2) {
  background-image: url('../assets/img/hero-2.jpeg'); 
}
.hero-slide:nth-child(3) {
  background-image: url('../assets/img/hero-3.jpeg'); 
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 0.6 ini tingkat kegelapannya */
  z-index: 1; /* Posisinya di atas gambar slider */
}

.hero-content {
  position: relative;
  z-index: 2; 
}

.hero-dots,
.hero-scroll {
  z-index: 2;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  width: 90%;
  max-width: 800px;
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.hero-badge {
  display: inline-block;
  background-color: var(--primary);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.4rem 1.2rem;
  border-radius: 2px;
  margin-bottom: 1.2rem;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-hero-primary {
  background-color: var(--primary);
  color: var(--white);
  padding: 0.85rem 2rem;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-hero-primary:hover {
  background-color: var(--primary-dark);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-hero-secondary {
  background-color: transparent;
  color: var(--white);
  padding: 0.85rem 2rem;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.95rem;
  border: 2px solid var(--white);
  transition: var(--transition);
}

.btn-hero-secondary:hover {
  background-color: var(--white);
  color: var(--dark);
  transform: translateY(-2px);
}

/* Slider Dots */
.hero-dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  padding: 0;
}

.hero-dot.active {
  background-color: var(--white);
  width: 24px;
  border-radius: 4px;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.5);
  animation: scrollLine 1.5s ease infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-scroll {
    display: none;
  }
}

/* ===========================
   Tentang Kami (About)
   =========================== */
#about img {
  transition: var(--transition);
  object-fit: cover;
  height: 450px; /* Menentukan tinggi gambar agar seragam */
  width: 100%;
}

/* Tambahkan ini agar di HP tingginya menyesuaikan */
@media (max-width: 768px) {
  #about img {
    height: 250px; /* Lebih pendek untuk HP */
  }
}

#about img:hover {
  transform: scale(1.02); /* Efek zoom halus saat gambar didekati mouse */
}

.text-justify {
  text-align: justify;
}


/* ===========================
   Fasilitas Hotel
   =========================== */
.bg-winer-green {
  background-color: var(--primary);
}

.fasilitas-card {
  background-color: var(--primary-dark); 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  transition: var(--transition);
}

/* Efek saat didekati mouse (Hover) */
.fasilitas-card:hover {
  transform: translateY(-10px); /* Kotaknya naik ke atas dikit */
  background-color: var(--primary-darken);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Efek bayangan */
}

/* --- Mengganti warna judul "FASILITAS KAMI" --- */
#fasilitas h6 {
  color: #ffc107 !important;
}

/* --- Mengganti warna Judul di dalam Card (Restoran, dll) --- */
.fasilitas-card h4 {
  color: #ffffff; 
}

/* --- Mengganti warna Kalimat Penjelasan di dalam Card --- */
.fasilitas-card p {
  color: #e0e0e0; 
}

/* Custom tombol di section fasilitas */
#fasilitas .btn-outline-light {
  border-width: 2px; /* Biar garisnya tegas kayak di atas */
  transition: var(--transition);
}

#fasilitas .btn-outline-light:hover {
  background-color: var(--white); /* Jadi putih solid */
  color: var(--primary) !important; /* Tulisan jadi hijau */
  transform: translateY(-3px); /* Efek naik dikit */
}

/* ===========================
   Daftar Kamar (Horizontal Scroll)
   =========================== */
.kamar-scroll-wrapper {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  padding-top: 1rem;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  
  /* Ini kode buat nyembunyiin scrollbar-nya */
  -ms-overflow-style: none;  /* Buat Internet Explorer/Edge */
  scrollbar-width: none;  /* Buat Firefox */
}

/* Sembunyiin scrollbar buat Chrome, Safari, dll */
.kamar-scroll-wrapper::-webkit-scrollbar {
  display: none; 
}

/* Biar tombol panahnya pas di-hover jadi hijau full */
#slideLeft:hover, #slideRight:hover {
  background-color: var(--primary);
  color: var(--white) !important;
}

/* Desain masing-masing Card Kamar */
.kamar-card {
  min-width: 280px; /* Ukuran lebar card yang pasti */
  max-width: 350px;
  flex: 0 0 auto; /* Supaya card tidak menciut menyesuaikan layar */
  scroll-snap-align: start; /* Posisi henti card pas digeser */
  cursor: pointer;
  transition: all 0.3s ease;
}

.kamar-card:hover {
  transform: translateY(-8px); /* Efek melayang dikit pas dideketin mouse */
    box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}

.kamar-card img {
  height: 220px; /* Tinggi gambar dibuat seragam semua */
  object-fit: cover; /* Biar gambar nggak gepeng */
}

/* ===========================
   Tombol Slider Melayang (Kiri - Kanan)
   =========================== */
.btn-slider {
  position: absolute;
  top: 50%; /* Tarik ke tengah vertikal */
  transform: translateY(-50%); /* Penyesuaian biar bener-bener di tengah */
  z-index: 10; /* Biar tombolnya ada di depan card (gak ketimpa) */
  width: 50px;
  height: 50px;
  background-color: var(--white);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-slider:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Posisi spesifik tombol kiri */
.btn-slider-left {
  left: -40px; /* Agak keluar dari kotak biar estetik */
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Posisi spesifik tombol kanan */
.btn-slider-right {
  right: -40px;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.btn-detailkamar {
    background-color: var(--light) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-detailkamar:hover {
    /* Mengubah background jadi hijau muda transparan saat hover */
    background-color: var(--primary) !important; 
    /* Memastikan teks tetap warna hijau primary */
    color: var(--light) !important; 
    border-color: var(--primary) !important;
    transform: translateY(-2px); /* Efek angkat sedikit biar cakep */
    transition: all 0.3s ease;
}

/* --- Perbaikan Font & Warna Harga (Beranda) --- */

.price-section-beranda {
    font-family: var(--font-body) !important; /* Pakai Poppins */
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Harga asli yang dicoret */
.price-section-beranda .old-price {
    font-size: 0.8rem;
    color: #888;
    text-decoration: line-through;
    display: block; /* Agar di atas harga utama */
    margin-bottom: -2px; /* Jarak rapat ke harga utama */
}

/* Harga diskon (Warna Hijau Primary) */
.price-section-beranda .current-price {
  font-family: var(--font-body) !important; 
    color: var(--primary) !important; /* Paksa warna hijau hotel */
    font-weight: 900;
    font-size: 1.25rem;
    margin-bottom: 0;
}

/* Label /malam */
.price-section-beranda .price-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #6c757d;
}

/* Penyesuaian khusus buat layar HP (biar panahnya gak kepotong layar) */
@media (max-width: 1200px) {
  #slideLeft, #slideRight {
    top: 35%; /* Naik ke area gambar, jadi ga nabrak tulisan */
  }
  .btn-slider-left {
    left: 5px; 
  }
  .btn-slider-right {
    right: 5px;
  }
}

/* ===========================
   Review Card Styles
   =========================== */
#ulasan h6{
  color: #ffc107 !important;
}

/* =========================================
   PERBAIKAN FINAL CAROUSEL ULASAN (EFEK FADE MULUS)
========================================= */
#reviewCarousel .carousel-inner {
  padding-top: 25px;
  padding-bottom: 30px;
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden !important; /* Cegah kebocoran elemen saat transisi */
}

/* KUNCI UTAMA: Beri warna background hijau solid yang sama dengan warna section. 
   Ini akan menjadi "tirai" penutup slide lama saat fade in! */
#reviewCarousel.carousel-fade .carousel-item {
  background-color: var(--primary) !important; 
  transition: opacity 0.5s ease-in-out !important; /* Durasi fade diatur 0.5 detik agar elegan */
}

/* Memaksa slide lama untuk ikut memudar dengan mulus tanpa menumpuk */
#reviewCarousel.carousel-fade .active.carousel-item-start,
#reviewCarousel.carousel-fade .active.carousel-item-end {
  transition: opacity 0.5s ease-in-out !important;
  opacity: 0;
}

/* ===========================
   Review Card Styles (Fix Lebar & Hover)
   =========================== */
.review-card {
  border-radius: 1.2rem !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  min-height: 220px; 
  height: 100%;
  
  /* --- TAMBAHAN BARU DI SINI --- */
  max-width: 320px; /* Batasi maksimal lebarnya biar ga melar */
  margin: 0 auto;   /* Posisikan card tetap di tengah */
}

/* Biar teks ulasannya punya space yang konsisten */
.review-card p {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
  z-index: 10;
}

/* ===========================
   Section Lokasi Styles
   =========================== */
.bg-white {
  background-color: #ffffff !important;
}

/* Jarak antar list tempat */
.nearby-places .place-item {
  margin-bottom: 1rem !important; 
  transition: transform 0.3s ease;
}

.nearby-places .place-item:hover {
  transform: translateX(8px);
}

.nearby-places .place-item h5 {
  font-size: 1rem;
  margin-bottom: 2px;
}

/* Ikon Tempat */
.place-icon {
  width: 45px;
  height: 45px;
  background-color: var(--primary-lighter);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Wrapper Map */
.map-wrapper {
  border: 8px solid #f8f9fa;
  border-radius: 2rem;
  overflow: hidden;
  width: 100%;
  line-height: 0;
}

.map-wrapper iframe {
  width: 100% !important;
  height: 450px;
  display: block;
}

#lokasi {
  margin-bottom: 50px; /* Kasih jarak napas sebelum masuk footer */
}

/* Custom Tombol Petunjuk Arah Kecil */
.btn-sm {
  font-size: 0.85rem !important;
  padding: 6px 15px !important;
  border-radius: 8px !important;
}

/* Responsif Layar HP/Tablet */
@media (max-width: 991px) {
  .map-wrapper iframe {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .map-wrapper {
    border-width: 5px;
    margin-top: 20px;
  }
  .map-wrapper iframe {
    height: 300px;
  }
}

/* ===========================
   Footer Styles
   =========================== */
.footer-section {
  background-color: #1a1a1a;
  padding: 80px 0 40px;
  color: #ffffff;
  width: 100%;
}

/* Judul Kolom & Logo Putih Semua */
.footer-logo-white, 
.footer-title-uniform {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem; /* Ukuran font disamakan */
  color: #ffffff !important; 
  letter-spacing: 0.5px;
}

/* Teks Deskripsi & List disamakan ukurannya */
.footer-text,
.footer-links a,
.footer-contact li {
  color: #b0b0b0;
  font-size: 0.95rem; /* Ukuran font standar yang sama */
  line-height: 1.6;
  text-decoration: none;
}

.footer-desc {
  max-width: 300px;
}

/* Navigasi & Kontak List */
.footer-links, .footer-contact {
  list-style: none;
}

.footer-links li, .footer-contact li {
  margin-bottom: 10px;
}

.footer-links a:hover {
  color: var(--primary);
}

.footer-contact i {
  color: var(--primary);
}

/* Social Media Icons (Tetap di tengah) */
.social-links a {
  display: flex;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.08);
  color: white;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 5px;
  transition: 0.3s;
}

.social-links a:hover {
  background-color: var(--primary);
  transform: translateY(-5px);
}

.footer-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 40px 0 30px;
}

.footer-bottom {
  color: #888;
  font-size: 0.9rem;
}

/* ===========================
   Custom Navbar Behavior (Kamar Page)
   =========================== */

/* 1. Kondisi Awal (Pas di paling atas) */
.navbar.navbar-dark-start {
  background-color: var(--primary-darken) !important;
  padding: 1.2rem 0; /* Sama kayak index */
  transition: var(--transition);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.navbar.navbar-dark-start .nav-link,
.navbar.navbar-dark-start .navbar-brand span {
  color: var(--light) !important; /* Teks Putih */
}

.navbar.navbar-dark-start .nav-link.active {
  color: var(--primary-lighter) !important;
  font-weight: 600;
}

.navbar.navbar-dark-start .nav-link:hover {
  color: var(--primary-light) !important;
}


/* Styling untuk navbar collapse saat dibuka di mobile */

@media (max-width: 991px) {
  .navbar.navbar-dark-start .navbar-collapse {
    background-color: var(--primary-dark) !important;
  }
  
  .navbar.navbar-dark-start.scrolled .navbar-collapse {
    background-color: var(--light) !important;
  }
}

/* 2. Kondisi Pas DI-SCROLL (Berubah Putih) */
.navbar.navbar-dark-start.scrolled {
  background-color: var(--light)!important;
  padding: 0.8rem 0; /* Mengecil pas di-scroll */
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.navbar.navbar-dark-start.scrolled .nav-link,
.navbar.navbar-dark-start.scrolled .navbar-brand span {
  color: var(--primary-dark) !important;
}

.navbar.navbar-dark-start.scrolled .nav-link:hover {
  color: var(--primary-light) !important;
}

.navbar.navbar-dark-start.scrolled .nav-link.active {
  color: var(--primary-darken) !important; /* Link aktif ijo lebih gelap */
  font-weight: 700;
}

.navbar.navbar-dark-start.scrolled .navbar-toggler-icon {
  filter: none; /* Balikin hamburger ke warna gelap di BG putih */
}

.btn-reservasi-copy {
  background-color: var(--primary);
  color: var(--white) !important;
  border-radius: 4px;
  padding: 0.5rem 1.2rem !important;
  font-weight: 500;
  transition: var(--transition);
}

/* Kasih jarak tombol Reservasi di mobile biar gak dempet */
@media (max-width: 991px) {
  .btn-reservasi-copy {
    margin-top: 1rem !important;
  }
}

.navbar.navbar-dark-start .nav-link.btn-reservasi-copy:hover {
  background-color: var(--primary-lighter) !important;
  color: var(--primary-darken) !important; 
}

.navbar.navbar-dark-start.scrolled .btn-reservasi-copy {
  color: var(--white) !important;
}

.navbar.navbar-dark-start.scrolled .nav-link.btn-reservasi-copy:hover {
  background-color: var(--primary-lighter) !important;
  color: var(--primary-darken) !important; 
}

/* --- Layout Halaman Kamar --- */
#kamar-page {
  padding-top: 130px !important; /* Biar gak dempet ke atas */
  padding-bottom: 60px;          /* Cegah margin card bocor keluar section */
  background-color: #cfddcf;     /* BG Semi Hijau sesuai request */
  display: flow-root;             /* Buat BFC — hentikan margin collapse anak-elemen */
}

.policy-card {
  border-left: 5px solid var(--primary);
  border-radius: 1rem;
}

/* Card Room Traveloka Style */
.card-room-traveloka {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  transition: transform 0.2s ease;
}

.card-room-traveloka .text-danger {
    color: #ff9811 !important; 
}

/* Modal Foto Setup */
.modal-content {
  box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.object-fit-cover {
  object-fit: cover;
}


/* Gaya baris opsi kamar */
.option-row {
  transition: background-color 0.3s ease;
  min-height: 60px;
}

.option-row:hover {
  background-color: #f5f6f7; /* Highlight tipis saat di-hover */
}


.card-room-traveloka .btn-primary-choose {
  background-color: var(--primary-darken);
  color: white;
  border: none;
  font-weight: 600;
  border-radius: 6px;
}

.card-room-traveloka .btn-primary-choose:hover {
  background-color: var(--primary-lighter);
  color: var(--primary-darken);
}

/* 1. Paksa kolom kiri (foto) dan kanan (teks) selalu sama tinggi */
.card-room-traveloka .row {
    display: flex;
    align-items: stretch;
}

/* TRIK JITU LAPTOP: Gambar dijadikan absolute agar menutupi semua ruang kosong */
@media (min-width: 768px) {
    .card-room-traveloka .carousel, 
    .card-room-traveloka .carousel-inner, 
    .card-room-traveloka .carousel-item {
        height: 100% !important;
        min-height: 100% !important;
    }
    
    .card-room-traveloka .carousel-item img {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center;
    }
}

/* Garis pembatas vertikal antar foto dan info di desktop */
@media (min-width: 768px) {
  .border-end {
    border-right: 1px solid #dee2e6 !important;
  }
}

/* Memastikan carousel pas di HP */
@media (max-width: 767px) {
    .card-room-traveloka .carousel, 
    .card-room-traveloka .carousel-inner, 
    .card-room-traveloka .carousel-item {
        height: 250px !important; 
    }
    .card-room-traveloka .carousel-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; 
    }
}

/* Garis pembatas vertikal antar foto dan info di desktop */
@media (min-width: 768px) {
  .border-end {
    border-right: 1px solid #dee2e6 !important;
  }
}

/* Memastikan carousel pas di HP */
@media (max-width: 767px) {
    .card-room-traveloka .carousel, 
    .card-room-traveloka .carousel-inner, 
    .card-room-traveloka .carousel-item {
        height: 250px !important; /* Sesuaikan tinggi foto di HP di sini */
    }
}

/* Penyesuaian tombol di mobile agar tidak terlalu lebar */
@media (max-width: 576px) {
  .card-room-traveloka .btn-primary-choose {
    padding: 5px 10px !important;
    font-size: 0.8rem;
  }
  .price-info p {
    font-size: 0.9rem !important;
  }
}

/* Menyelaraskan ikon yang beda-beda link */
.option-row .d-flex.gap-3 i, 
.option-row .d-flex.gap-3 span {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Supaya semua ikon Google Material ukurannya pas & seragam */
.material-symbols-outlined {
  font-size: 20px !important; /* Ukuran yang pas buat HP & Desktop */
  vertical-align: middle;     /* Biar sejajar sama teks */
  display: inline-flex !important;
  width: 24px !important;
  height: 24px !important;
  margin-right: 1px;
  align-items: center;
  justify-content: center;
  font-variation-settings: 'wght' 250; /* Bikin ikon agak tipis biar mewah */
}

/* --- Perbaikan khusus tampilan HP --- */
@media (max-width: 576px) {

  /* 2. Atur ikon fasilitas agar berbaris rapi (Wrap) */
  .d-flex.gap-3.text-muted {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* Bagi jadi 3 kolom agar rapi */
    gap: 10px !important;
    font-size: 0.90rem !important;
  }

  /* 5. Jarak antar opsi kamar */
  .option-row {
    padding: 10px !important;
  }
}

/* Efek Animasi Highlight saat Card diklik dari Beranda */
.highlight-card {
    box-shadow: 0 0 20px rgba(25, 135, 84, 0.6) !important; /* Warna hijau success */
    transform: scale(1.01);
    transition: all 0.4s ease-in-out;
}

@keyframes highlightPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(46, 125, 50, 0.4);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
    transform: scale(1);
  }
}


/*Page Fasilitas*/
.card-facility-page {
    transition: transform 0.3s ease;
    border-radius: 12px;
}

.card-facility-page:hover {
    transform: translateY(-8px);
}

.card-facility-page .text-primary {
    transition: transform 0.3s ease;
}

.card-facility-page:hover .text-primary {
    transform: scale(1.2);
}

/* Styling Fasilitas Page */
.facility-showcase h2 {
    color: var(--dark);
    position: relative;
}

.facility-showcase .img-fluid {
    transition: transform 0.5s ease;
}

.facility-showcase .row:hover .img-fluid {
    transform: scale(1.02); /* Gambar nge-zoom dikit pas di-hover row-nya */
}

/* Biar padding di mobile gak terlalu lebar */
@media (max-width: 768px) {
    .hero-header {
        padding-top: 120px !important;
        padding-bottom: 50px !important;
    }
    .facility-showcase .img-fluid {
        height: 250px !important; /* Di HP jangan terlalu tinggi gambarnya */
    }
}

/* Mengecilkan teks deskripsi di halaman fasilitas */
.facility-showcase p {
    font-size: 0.95rem; /* Kakak bisa ubah angka ini (misal 0.9rem atau 1rem) */
    line-height: 1.6;   /* Jarak antar baris supaya tetap enak dibaca */
    font-family: var(--font-body);
}

/* Judul fasilitasnya juga kalau mau disesuaikan ukurannya */
.facility-showcase h2 {
    font-size: 1.8rem; /* Ukuran judul agar lebih proporsional dengan teks kecil */
}

.facility-showcase p {
    font-size: 0.95rem; /* Ukuran pas, profesional */
    line-height: 1.7;
    color: #666;
    font-family: var(--font-body);
}

.facility-showcase h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

/* Page Tentang Kami*/
#lokasi h6 {
  color: #ffc107 !important;
}

#histori h6 {
  color: #ffc107 !important;
}

#fasilitas1 h6 {
  color: #ffc107 !important;
}

#komitmen h6 {
  color: #ffc107 !important;
}

/* ===========================
   Booking Modal Styles
   =========================== */
.modal-header.bg-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
}

.form-label {
  font-size: 0.9rem;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.form-control, .form-select {
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.15);
}

.modal-footer .btn-primary {
  background: var(--primary);
  border: none;
}

.modal-footer .btn-primary:hover {
  background: var(--primary-dark);
}

/* =========================================
   Kustomisasi Panah Banner Promo
========================================= */
/* Mengurangi area klik agar panah mepet ke pinggir */
#carouselPromoBanner .carousel-control-prev,
#carouselPromoBanner .carousel-control-next {
    width: 5%; /* Ubah dari default 15% menjadi 5% */
}

/* Mengecilkan ukuran ikon panah */
#carouselPromoBanner .carousel-control-prev-icon,
#carouselPromoBanner .carousel-control-next-icon {
    width: 1.5rem; /* Ukuran asli 2rem, kita kecilkan */
    height: 1.5rem;
}

/* Opsional: Memberikan sedikit bayangan gelap pada panah agar lebih jelas */
#carouselPromoBanner .carousel-control-prev-icon,
#carouselPromoBanner .carousel-control-next-icon {
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));
}

/* =========================================
   Ilustrasi Peta Abstrak (Tentang Kami)
========================================= */
.abstract-map-container {
    position: relative;
    width: 100%;
    height: 380px; /* Tinggi sama dengan gambar sebelumnya */
    background-color: #e9ecef; /* Warna dasar abu-abu terang */
    /* Membuat motif grid/kotak-kotak khas peta */
    background-image:
        linear-gradient(rgba(255,255,255,0.6) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,0.6) 2px, transparent 2px);
    background-size: 40px 40px; 
    overflow: hidden;
}

/* Garis jalanan abstrak */
.map-road {
    position: absolute;
    background-color: #ffffff;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.map-road.horizontal {
    top: 50%; left: 0; right: 0; height: 16px;
}
.map-road.vertical {
    top: 0; bottom: 0; left: 45%; width: 16px;
}

/* Desain Pin Lokasi */
.map-pin {
    position: absolute;
    transform: translate(-50%, -100%); /* Supaya ujung bawah pin pas di titik koordinat */
    z-index: 2;
    text-align: center;
    transition: all 0.3s ease;
    cursor: default;
}

/* Efek saat didekati mouse */
.map-pin:hover {
    transform: translate(-50%, -110%) scale(1.15);
    z-index: 5 !important;
}

.map-pin i {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    display: inline-block;
}

/* Teks label di bawah Pin */
.pin-label {
    display: block;
    background: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    margin-top: -5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    white-space: nowrap;
    font-family: var(--font-body);
}

.pin-hotel .pin-label {
    font-size: 0.95rem;
    border: 2px solid;
    padding: 5px 15px;
}

/* Efek Gelombang (Pulse) Khusus Winer Hotel */
.pin-pulse {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background: rgba(46, 125, 50, 0.6);
    border-radius: 50%;
    animation: pulseMap 1.5s infinite;
    z-index: -1;
}

@keyframes pulseMap {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

/* Penyesuaian di layar HP */
@media (max-width: 576px) {
    .map-pin .pin-label { font-size: 0.65rem; }
    .pin-hotel .pin-label { font-size: 0.8rem; }
}

/* =========================================
   REVISI TAMPILAN MOBILE (HP)
========================================= */

/* 1. Hero Header Lebih Pendek */
.hero-header-page {
    padding: 180px 0 100px 0; /* Standar Desktop */
}
@media (max-width: 768px) {
    .hero-header-page {
        padding: 110px 0 50px 0 !important; /* HP jadi jauh lebih pendek */
    }
}

/* 2. Gambar, Jarak, & Teks Tentang Kami */
.img-tentang {
    width: 100%;
    height: 380px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .img-tentang {
        height: 200px !important; /* Gambar menyesuaikan layar HP */
    }
    .text-desc-mobile {
        font-size: 0.85rem !important; /* Font dikecilkan */
        line-height: 1.6 !important;
    }
    .px-mobile {
        padding-left: 20px !important; /* Jarak aman pinggir layar */
        padding-right: 20px !important;
    }
}

/* 3. Modal Galeri Lanskap di HP */
@media (max-width: 768px) {
    .carousel-item img.modal-galeri-img {
        height: auto !important; /* Biarkan proporsional lanskap */
        max-height: 40vh !important; /* Jangan sampai potrait */
        object-fit: contain !important; /* Gambar utuh, tidak kepotong */
        background-color: #000; /* Memberi efek latar hitam khas galeri */
    }
}

/* Menyesuaikan rasio Banner Promo Kamar di HP */
@media (max-width: 768px) {
    #carouselPromoBanner .carousel-item {
        min-height: 220px !important; /* Menurunkan tinggi banner agar rasionya mendekati lanskap (tidak memotong terlalu banyak tepi gambar) */
    }
}

/* Memaksa batas layar maksimal dan memotong kebocoran horizontal */
body, html {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Menetralkan negative margin bawaan Bootstrap pada layar HP */
@media (max-width: 768px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Badge Diskon Melayang di atas Foto */
.badge-diskon {
    position: absolute;
    top: 15px;
    right: 15px; /* Ubah ke left: 15px jika ingin di kiri atas */
    background-color: #e74c3c; /* Warna merah agar eye-catching */
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    z-index: 2; /* Memastikan badge berada di atas gambar */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
}