html {
    scroll-behavior: smooth;
}

/* Tambahkan padding top agar judul tidak tertutup navbar saat meluncur */
section {
    scroll-margin-top: 80px; 
}

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

/* --- Root Variables untuk Color Palette & Typography --- */
:root {
  /* Warna Utama */
  --gold-champagne: #D4AF37;
  --gold-light: #F3E5D8;
  --charcoal-dark: #2C2C2C;
  --charcoal-light: #4A4A4A;
  --off-white: #FAFAFA;
  --pure-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Montserrat', sans-serif;
}

/* --- Reset & Base Styles --- */
body {
  font-family: var(--font-body);
  background-color: var(--off-white);
  color: var(--charcoal-dark);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--charcoal-dark);
  font-weight: 600;
  margin-bottom: 1rem;
}

/* --- Tombol (CTA) Elegan --- */
.btn-gold {
  display: inline-block;
  background-color: transparent;
  color: var(--charcoal-dark);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid var(--charcoal-dark);
  border-radius: 0; /* Menghilangkan sudut melengkung agar lebih tegas/elegan */
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

.btn-gold:hover {
  background-color: var(--charcoal-dark);
  color: var(--gold-light);
  border-color: var(--charcoal-dark);
}

/* Helper untuk Spacing / Jarak antar Section */
.section-padding {
  padding: 80px 20px;
}

.hero-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.hero-img-wrapper img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.about-section {
    background-color: #835315; /* Sedikit kontras dengan background body */
}

/* Mengatur font agar lebih mirip Canva */
h1, h2 {
    color: var(--dark-brown);
    letter-spacing: 1px;
}

.btn-jam {
    border: 2px solid #D6C7B5;
    background-color: transparent;
    color: #C5B299;
    padding: 10px 20px;
    border-radius: 15px; /* Membuat bentuk kapsul/bulat di pinggir */
    width: 100px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-jam:hover:not(:disabled) {
    background-color: #D6C7B5;
    color: white;
}

/* Warna saat jam dipilih */
.btn-jam.active {
    background-color: #C5B299 !important;
    color: white !important;
    border-color: #C5B299;
}

/* Tampilan untuk jam yang sudah terisi */
.btn-jam:disabled {
    border-color: #eee;
    color: #ccc;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Mengatur Rasio Gambar Portofolio 2:3 */
.portfolio-img-container {
    width: 100%;
    aspect-ratio: 2 / 3; /* Mengunci rasio 2x3 */
    overflow: hidden;
    border-radius: 8px 8px 0 0; /* Mengikuti lekukan card */
}

.portfolio-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Menjamin gambar memenuhi kotak tanpa gepeng */
    object-position: center;
}

.portfolio-img-container {
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    /* Memberikan batas maksimal agar tidak terlalu raksasa */
    max-width: 200px; 
    margin: 0 auto; /* Menjaga posisi tetap di tengah */
}

.portfolio-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.jadwal-info .row::-webkit-scrollbar {
    height: 8px;
}
.jadwal-info .row::-webkit-scrollbar-thumb {
    background: #C5B299;
    border-radius: 10px;
}
.jadwal-info .card-header {
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
}

.card[style*="cursor: pointer"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card[style*="cursor: pointer"]:hover {
    transform: translateY(-5px); /* Efek melayang saat kursor di atasnya */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

#modalImage {
    max-height: 85vh; /* Menjaga agar gambar tidak melebihi layar */
    object-fit: contain;
}

/* Styling Ikon Price List */
.price-icon-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Membuat foto jadi kotak sempurna */
    overflow: hidden;
    background-color: #f0f0f0;
}

.price-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Menjamin gambar memenuhi kotak tanpa gepeng */
    transition: transform 0.5s ease;
}

/* Efek zoom saat kartu di-hover */
.card:hover .price-icon-wrapper img {
    transform: scale(1.1);
}

.card:hover {
    transform: translateY(-10px);
}

/* Styling Ikon Price List dengan Rasio 2:3 */
.price-icon-container {
    width: 100%;
    aspect-ratio: 2 / 3; /* Samakan rasio dengan portofolio */
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}

.price-icon-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

/* Mengatur ukuran kolom agar 1.5x lebih besar dari col-md-2 (portofolio) */
/* Kita gunakan col-md-3 untuk Price List agar ukurannya pas */
.price-card {
    transition: transform 0.3s ease;
    border-radius: 15px !important;
}

.about-img-wrapper img {
    transition: all 0.4s ease;
    filter: grayscale(20%); /* Memberikan kesan vintage sedikit */
}

.about-img-wrapper img:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}

.navbar-brand img {
    transition: transform 0.3s ease;
    display: block;
}

/* Efek saat logo disorot kursor */
.navbar-brand img:hover {
    transform: scale(1.05);
}

/* Styling Dasar Tombol Interaktif */
.btn-interactive {
    min-height: 160px;
    background-color: transparent;
    color: #4a3f35;
    border: 2px solid #4a3f35;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transisi halus */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Efek Saat Disentuh (Hover/Active) */
.btn-interactive:hover, 
.btn-interactive:active {
    color: #ffffff !important; /* Warna teks jadi putih */
    background-color: #4a3f35 !important; /* Warna background jadi coklat gelap */
    transform: translateY(-8px); /* Melayang ke atas */
    box-shadow: 0 12px 24px rgba(74, 63, 53, 0.3); /* Bayangan lembut */
}

/* Efek Transisi Ikon & Teks */
.btn-interactive i, 
.btn-interactive span {
    transition: transform 0.3s ease;
}

.btn-interactive:hover i {
    transform: scale(1.2); /* Ikon membesar sedikit saat di-hover */
}

.btn-dark.btn-interactive:hover {
    background-color: #C5B299 !important; /* Berubah jadi coklat muda/emas */
    border-color: #C5B299 !important;
}

#area_jadwal {
    animation: fadeIn 0.5s ease-in-out;
    background: #fdfaf7; /* Warna senada dengan tema Queen Studio */
    padding: 15px;
    border-radius: 15px;
    margin-top: 10px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#slot_jam_form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 10px;
}

/* Efek saat jam dipilih */
.btn-check:checked + .btn-outline-dark {
    background-color: #212529;
    color: white;
    border-color: #212529;
}

section {
    position: relative;
}

/* Menghilangkan sela antar section yang bersebelahan */
.section-no-gap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Memberikan sedikit bayangan halus pada card agar tidak terpotong tajam */
.card-booking {
    margin-bottom: -30px; /* Menarik card sedikit ke bawah agar menimpa section berikutnya */
    z-index: 10;
}