* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: "Poppins", sans-serif; 
}

body { 
  background: #111; 
  color: #fff; 
  overflow-x: hidden;
  width: 100%;
}

.hero {
  margin-top: 55px;
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: brightness(80%);
  transition: transform 0.8s ease, filter 0.8s ease;
}

.hero:hover img { 
  transform: scale(1.05); 
  filter: brightness(70%); 
}

.hero-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 80%; /* Lebar container */
  
  /* LOGIKA FLEXBOX (INI KUNCINYA) */
  display: flex;
  align-items: center; /* Memaksa items sejajar vertikal (tengah) */
  justify-content: center; /* Memaksa items sejajar horizontal (tengah) */
  gap: 20px; /* Jarak antara panah dan teks */
}

.hero-caption h3 {
  font-size: 2.2rem;
  line-height: 1.1;
  white-space: pre-wrap;
  margin: 0; /* Matikan margin bawaan h3 agar senter akurat */
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  font-weight: 700;
}

/* KITA RESET STYLE BAWAAN BOOTSTRAP KHUSUS TOMBOL INI */
.custom-nav-btn {
  position: static !important; /* Matikan absolute positioning */
  width: auto !important; /* Lebar mengikuti konten icon */
  height: auto !important;
  background: none !important; /* Hapus background hitam/abu */
  opacity: 0.8;
  border: none;
  padding: 10px;
  transform: none !important; /* Hapus transform aneh */
}

.custom-nav-btn:hover {
  opacity: 1;
}

.custom-nav-btn .carousel-control-prev-icon,
.custom-nav-btn .carousel-control-next-icon {
  width: 2rem; /* Ukuran icon */
  height: 2rem;
  background-size: 100%, 100%;
}


.gallery { 
  background-color: #000000; 
}

.gallery-item {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.gallery.is-visible .gallery-item {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item img { 
  width: 100%; 
  height: 250px; 
  object-fit: cover; 
  transition: transform 0.4s ease;
}

.gallery-item:hover img { 
  transform: scale(1.08); 
}

.products { 
  background-color: #181C1F; 
  color: #fff; 
}

.product-card {
  opacity: 0;
  transform: translateY(30px);
  width: 100%;
  height: 300px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  background: #fff; 
  border-radius: 12px; 
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.products.is-visible .product-card {
  opacity: 1;
  transform: translateY(0);
}

.product-card img { 
  width: auto; 
  height: 200px; 
  object-fit: contain; 
  opacity: 0;
  transition: opacity 0.5s ease;
}

.products.is-visible .product-card img {
  opacity: 1;
  transition-delay: 200ms;
}

.product-overlay {
  position: absolute; 
  inset: 0;
  background: rgba(0,0,0,0.7); 
  display:flex; 
  flex-direction:column;
  justify-content:center; 
  align-items:center; 
  color:#fff; 
  opacity:0;
  transition: opacity 0.25s ease;
}

.product-card:hover .product-overlay { 
  opacity: 1; 
}

.btn-view { 
  background:#111; 
  color:#fff; 
  padding:8px 18px; 
  border-radius:8px; 
  text-decoration:none; 
  transition: background 0.2s ease; 
}

.btn-view:hover { 
  background:#444; 
}

.about { 
  background-color: #f8f9fa; 
  color:#111; 
}

.about-title { 
  font-size:2rem; 
  font-weight:700; 
  margin-bottom:16px; 
}

.about-text {
  font-size:1rem; 
  line-height:1.7; 
  color:#333; 
  margin-bottom:12px; 
}

.map-container { 
  border-radius:12px; 
  overflow:hidden; 
  box-shadow:0 4px 12px rgba(0,0,0,0.12); 
}

.reservation-card { 
  position: relative; 
  width: 100%;
  height: 500px; 
  overflow: hidden; 
}

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

.reservation-card:hover img {
  transform: scale(1.05); 
  filter: brightness(70%); 
}

.reservation-overlay {
  position: absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%,-50%);
  color:#fff; 
  text-align:center; 
  opacity:0; 
  transition:opacity 0.35s ease;
}

.reservation-card:hover .reservation-overlay {
  opacity:1;
}

.btn-reserve {
  display:inline-block; 
  padding:12px 20px; 
  border-radius:6px; 
  background:#111; 
  color:#fff;
  text-decoration:none; 
  font-weight:600; 
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-reserve.is-hover { 
  transform: scale(1.05); 
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); 
}

.container { 
  max-width: 1140px; 
  margin: 0 auto; 
  padding: 0 16px; 
}

@media (max-width: 1024px) {
  .hero-caption h3 { font-size: 2rem; }
  .gallery-item img { height: 220px; }
  .product-card { height: 280px; }
  .product-card img { height: 180px; }
  .reservation-card { height: 450px; }
}

@media (max-width: 768px) {
  .hero {
    width: 100%;
    height: auto !important; 
    min-height: unset !important;
    aspect-ratio: 16 / 9 !important; 
  }

  .hero img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
  }

  .hero-caption {
    width: 95%;
    padding: 0 5px;
  }
  
  .hero-caption h3 {
    font-size: 1rem !important;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    margin-bottom: 0;
  }

  .gallery .row, .products .row { 
    display: flex; 
    flex-wrap: wrap; 
    margin-right: -5px; 
    margin-left: -5px; 
  }
  
  .gallery .col-md-3, .products .col-md-3, 
  .gallery .col-lg-3, .products .col-lg-3, 
  .gallery .col-6, .products .col-6 { 
    width: 50% !important; 
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 5px;
    margin-bottom: 10px;
  }
  
  .gallery-item img { height: 160px !important; }
  .product-card { height: 260px !important; }
  .product-card img { height: 150px !important; }
  
  .about-title { font-size: 1.5rem; }
  .about-text { font-size: 0.9rem; }
  .reservation-card { height: 400px; }
  .carousel-control-prev, .carousel-control-next { width: 10%; }
}

@media (max-width: 480px) {
  .hero { aspect-ratio: 16 / 9; }
  .hero-caption h3 { font-size: 0.9rem !important; }
  .gallery-item img { height: 140px !important; }
  .product-card { height: 240px !important; }
  .product-card img { height: 130px !important; }
  .btn-view { padding: 5px 10px; font-size: 0.8rem; }
}