body { background-color: #FDFCFB; color: #1f2937; overflow-x: hidden; }


.glass-nav {
  background: rgba(253, 252, 251, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.text-gradient {
  background: linear-gradient(135deg, #9A1E1E, #ff4d4d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom Scroll Behavior for Carousel */
.smooth-scroll { scroll-behavior: smooth; }

/*
.container { position: relative; width: 90%; max-width: 1000px; padding: 80px 40px; color: #ffffff; text-align: center; overflow: hidden; }
.container .bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: brightness(0.35); }
.content { position: relative; z-index: 2; }
h1 { font-size: 2.5rem; font-weight: bold; margin-bottom: 20px; }
p { font-size: 1rem; line-height: 1.6; margin-bottom: 40px; max-width: 800px; display: inline-block; }
.btn-menu { display: inline-block; text-decoration: none; color: #ffffff; font-weight: bold; padding: 12px 35px; border: 2px solid #28a745; background-color: transparent; transition: all 0.3s ease; }
.btn-menu:hover { background-color: #28a745; }
*/

/* DIV UTAMA: Gambar langsung dipasang di sini sebagai background */
/* BANNER UTAMA: Dibuat lebar penuh (100%) dan lebih tinggi */
.full-banner {
  width: 100%;
  min-height: 450px; /* Menambah tinggi banner agar tidak terlalu pendek */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;

  /* Gabungan overlay gelap dan gambar background */
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
              url('../images/covistry.webp') no-repeat center center;
  background-size: cover;
}

.full-banner {
  width: 100%;
  /* Menggunakan aspect-ratio berdasarkan resolusi gambar (lebar / tinggi) */
  /*aspect-ratio: 1280 / 568;*/

 /* 1. KUNCI UNTUK GAMBAR TINGGI: Gunakan aspek rasio vertikal yang lebih tinggi (Lebar / Tinggi) */
 /*aspect-ratio: 16 / 7;*/

  /* --- TAMBAHKAN DUA BARIS KODE INI --- */
  border-radius: 3rem; /* Mengatur kelengkungan sudut (bisa diganti sesuai selera) */
  overflow: hidden;    /* Memastikan gambar latar belakang ikut terpotong melengkung */
  /* ------------------------------------ */
  min-height: 85vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;

  /* Ubah 'cover' menjadi '100% 100%' agar gambar mengikuti box yang rasionya sudah dikunci */
  /*
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
              url('../images/menu/menu.webp') no-repeat center center;
  */
  background-size: 100% 100%;

}

/* Container konten di dalam banner */
.banner-content {
    max-width: 800px;
    padding: 20px;
    color: #ffffff;
}

/* Judul Cetak Tebal */
.banner-content h1 {
  /* Menggunakan clamp agar ukuran font mengecil otomatis di mobile */
  font-size: clamp(1.2rem, 4vw, 2.2rem);
  font-weight: bold;
  margin-bottom: 15px;
}

/* Tulisan Deskripsi */
/* Catatan: Di HTML Anda, h1 dibungkus dalam tag p.
   Sebaiknya keluarkan h1 dari p, namun CSS ini disesuaikan dengan struktur Anda saat ini */
.banner-content p {
  margin-bottom: clamp(15px, 3vw, 35px);
}

/* Tombol Our Menu */
.btn-menu {
  border-radius: 25px;
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  padding: clamp(8px, 1.5vw, 12px) clamp(20px, 4vw, 40px); /* Padding responsif */
  border: 2px solid #9a1e1e;
  background-color: transparent;
  transition: all 0.3s ease;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
}

/* Efek Hover Tombol */
.btn-menu:hover {
  border-radius: 25px;
  background-color: #9a1e1e;
  color: #ffffff;
}

/* KONDISI: TABLET (Layar sedang) */
/*@media (max-width: 768px) {*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .full-banner {
    min-height: 55vh !important; /* Mengunci tinggi minimal agar tidak terlalu tipis di tablet */
    border-radius: 1.5rem; /* Mengecilkan sedikit radius lengkungan agar seimbang */
  }
}

/* KONDISI RESPONSIVE: KHUSUS MOBILE (Layar di bawah 576px) */
@media (max-width: 576px) {
  .full-banner {
    min-height: 45vh !important;
    /* Opsional: Jika teks terlalu padat di mobile, Anda bisa memberi sedikit ruang */
    padding: 20px 0;
  }
}

/* 1. Mencegah konten melebihi lebar layar (goyang kiri-kanan) */
html, body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 2. Memastikan Slider tidak tertutup menu (padding atas di mobile/tablet) */
@media (max-width: 1023px) {
  /* Memberikan ruang agar konten slider tidak tertutup oleh navbar yang fixed */
  section.relative.pt-20 {
    padding-top: 80px !important; /* Sesuaikan dengan tinggi navbar Anda */
  }
}

/* 3. Posisi Dot/Titik Slider di atas konten slider */
@media (max-width: 1023px) {
  .hero-slide .absolute.bottom-10 {
    bottom: 20px !important; /* Sesuaikan agar dot naik sedikit */
  }
}

/* 4 & 5. Jarak antar section yang proporsional & perbaikan jarak section */
@media (max-width: 1023px) {
  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Perbaikan khusus section Cerita Covistry (menghindari menempel) */
  #about {
    margin-top: 20px !important;
  }
}

/* Tambahan: Pastikan elemen gambar/konten di dalam container tidak overflow */
img, video, .container {
  max-width: 100%;
}

/* Pastikan Grid untuk Promo responsive dan tidak tumpang tindih */
@media (max-width: 1024px) {
  #promo .grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important; /* 1 kolom di mobile/tablet */
    gap: 24px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #promo .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 kolom di tablet */
  }
}

/* Pastikan setiap kartu memiliki jarak vertikal yang aman */
#promo .grid > div {
  margin-bottom: 30px !important; /* Memberi napas antar promo */
  position: relative !important;
}

/* Jika menggunakan grid, pastikan tidak ada tinggi yang dipaksakan */
#promo .grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
}

@media (min-width: 768px) {
  /* Memaksa setiap item promo memiliki ruang dan tidak saling tumpuk */
  #promo .grid {
    display: block !important; /* Ubah dari grid ke block agar kartu berjejer ke bawah */
  }

  #promo .grid > div {
    width: 100% !important; /* Paksa lebar 100% agar tidak ada yang bersampingan */
    margin-bottom: 40px !important; /* Memberi jarak bawah yang jelas */
    display: block !important;
  }
}

/* Mengatur ulang Header agar tidak menumpuk */
/*
@media (max-width: 1024px) {
  .navbar-container {
    justify-content: space-between !important;
  }

  /* Perkecil ukuran teks menu agar lebih muat */
  /*.nav-menu-item {
    font-size: 13px !important;
    margin-right: 10px !important;
  }

  /* Menggeser sedikit tombol agar tidak menabrak teks */
  /*.btn-pesan-sekarang {
    margin-left: 10px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
  }
}

/* Sembunyikan menu teks di layar tablet dan smartphone */
@media (max-width: 1024px) {
  .nav-menu-item {
    display: none !important; /* Sembunyikan link teks menu */
  }

  /* Geser tombol pesan agar tetap terlihat */
  .btn-pesan-sekarang {
    margin-right: 40px; /* Memberi jarak agar tidak menabrak tombol hamburger */
    /*  margin-left: auto !important; */
  }
}

/* Memastikan kartu promo memiliki tinggi yang menyesuaikan isi */
#promo .grid > div {
  height: auto !important;
  min-height: 350px; /* Sesuaikan angka ini agar cukup untuk teks promo */
  display: flex;
  flex-direction: column;
}

/* Memperbaiki jarak antar kolom di layar tablet ke desktop */
@media (min-width: 768px) {
  #promo .grid {
    gap: 20px !important; /* Jarak antar kartu */
  }
}

/* Memaksa Grid 2 Kolom pada Tablet (768px sampai 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  #promo .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Memastikan kartu tidak memiliki lebar statis */
  #promo .grid > div {
    width: 100% !important;
    margin-bottom: 0 !important;
  }
}

/* Untuk layar di atas 1024px (iPad Pro & Desktop) */
@media (min-width: 1024px) {
  #promo .grid {
    grid-template-columns: repeat(3, 1fr) !important; /* Paksa 3 kolom */
  }
}

/* Untuk layar tablet menengah (iPad biasa) */
@media (min-width: 768px) and (max-width: 1023px) {
  #promo .grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Paksa 2 kolom */
  }
}

/* Sembunyikan menu teks di bawah 1100px (agar cukup ruang untuk tombol) */
@media (max-width: 1100px) {
  .nav-menu-desktop {
    display: none !important;
  }
}


/* Memastikan 3 kolom aktif untuk layar 1024px ke atas (termasuk iPad Pro) */
@media (min-width: 1024px) {
  #promo .grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Memastikan iPad Pro (landscape) atau layar lebar tidak kembali ke 1 kolom */
@media (min-width: 1200px) {
  #promo .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Pastikan gambar tidak melampaui container-nya */
#about img {
  max-width: 100% !important;
  object-fit: cover;
}

/* Penyesuaian khusus tablet agar tidak terlalu lebar */
@media (min-width: 768px) and (max-width: 1024px) {
  #about .grid {
    gap: 40px !important;
  }
}

/* Mengatasi masalah Section About (Tablet jadi 2 kolom) */
/*
@media (min-width: 768px) {
  #about .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Paksa 2 kolom */
  /*}
}
*/
/* Perbaikan Section Promo untuk Tablet */
/*@media (min-width: 768px) and (max-width: 1023px) {
  #promo .grid {
    /* Mengatur ulang grid menjadi 2 kolom agar tidak tumpang tindih */
    /*grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Memastikan kartu promo memiliki tinggi yang konsisten agar rapi */
  /*#promo .promo-card {
    height: auto !important;
    min-height: 300px;
  }
}

/* Penyesuaian agar konten di dalam kartu tidak meluap (overflow) */
/*.promo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
*/