html {
    scroll-behavior: smooth;
}

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

:root {
    --primary-color: #C5B299; /* Warna krem utama */
    --dark-brown: #C5B299;
    --light-bg: #C5B299;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--light-bg); /* Mengikuti variabel di atas */
    color: #C5B299;
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

.btn-custom {
    background-color: var(--dark-brown);
    color: white;
    border-radius: 0;
    padding: 10px 25px;
}

.btn-custom:hover {
    background-color: #766555;
    color: rgb(145, 58, 58);
}

.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;
}