@font-face {
    font-family: 'Classy Vogue';
    src: url('fonts/Classyvogueregular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Resotho';
    src: url('fonts/Resotho-Extralight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Resotho';
    src: url('fonts/Resotho-ExtralightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

:root {
    --dark-green: #1a2a22;
    --light-text: #f0f0f0;
    --dark-text: #333;
    --wood-brown: #50392c;
    --heading-font: 'Classy Vogue', serif; 
    --body-font: 'Resotho', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body-font); font-weight: 300; background-color: var(--dark-green); color: var(--light-text); overflow-x: hidden; }
main { display: block; }

section {
    width: 100%;
    min-height: 100vh;
    padding: 150px 10% 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

h2, h3 { font-family: var(--heading-font); font-weight: normal; }

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 10%;
    z-index: 1000;
    background: rgba(15, 23, 20, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo { font-family: var(--heading-font); font-size: 2.5rem; font-weight: normal; letter-spacing: 3px; margin-bottom: 10px; }
.logo a { color: var(--light-text); text-decoration: none; }
nav { display: flex; justify-content: center; gap: 30px; }
nav a { font-family: var(--body-font); color: var(--light-text); text-decoration: none; font-size: 1rem; padding: 5px 10px; transition: color 0.3s; }
nav a:hover, nav a.active { color: #c9a87c; }

#home { text-align: center; background-image: url('assets/heroimg 1.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
#home::before, #welcome::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#home::before { background-color: rgba(26, 42, 34, 0.6); }
.monstera-leaf-1 { position: absolute; bottom: -50px; left: -100px; width: 450px; z-index: 2; transform: rotate(-15deg); opacity: 0.6; }
.hero-content { position: relative; z-index: 2; max-width: 700px; }
.hero-content h2 { font-size: 4.5rem; line-height: 1.2; }
.hero-content p { font-size: 1.1rem; margin: 20px auto 0; max-width: 90%; line-height: 1.8; }
#welcome { justify-content: flex-start; text-align: left; background-image: url('assets/congo_tangga.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
#welcome::before { background-color: rgba(26, 42, 34, 0.7); }
.welcome-text { position: relative; z-index: 2; max-width: 60%; }
.welcome-text h3 { font-size: 3rem; margin-bottom: 20px; }

#profile { justify-content: flex-start; background-color: var(--dark-green); }
#profile::before { content: ''; position: absolute; top: 0; left: 0; width: 65%; height: 100%; background-image: url('assets/heroimg2.jpg'); background-size: cover; background-position: center; mask-image: linear-gradient(to right, black 60%, transparent 100%); z-index: 1; }
.profile-content { position: relative; z-index: 2; max-width: 50%; padding-right: 5%; }
.profile-content h2 { font-size: 4rem; margin-bottom: 30px; }
.profile-content p { line-height: 1.8; font-size: 0.8rem; margin-bottom: 20px; }
.profile-trunk { position: absolute; right: -80px; top: -10%; height: 120%; z-index: 3; filter: brightness(0.9); }
.profile-leaves { position: absolute; right: 5%; bottom: -80px; width: 500px; z-index: 4; transform: rotate(10deg); }

#gallery-visuals, #gallery-taste { text-align: center; background-size: cover; background-position: center; }
#gallery-visuals { background-image: url('assets/wood.jpeg'); }
#gallery-taste { background-image: url('assets/food img.jpg'); }
#gallery-visuals::before, #gallery-taste::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(26, 42, 34, 0.75); z-index: 1; }
.gallery-content { position: relative; z-index: 2; width: 100%; }
.gallery-content h2 { font-size: 4rem; margin-bottom: 40px; color: var(--light-text); text-shadow: 2px 2px 10px rgba(0,0,0,0.7); }
.slider-wrapper { position: relative; width: 80%; margin: 0 auto; display: flex; align-items: center; }
.slider { display: flex; overflow-x: hidden; scroll-snap-type: x mandatory; gap: 15px; flex: 1; }
.slider img { width: calc(100% / 3 - 10px); flex-shrink: 0; height: 300px; object-fit: cover; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.slider-btn { background-color: rgba(255, 255, 255, 0.7); border: none; font-size: 2rem; color: var(--dark-text); cursor: pointer; padding: 10px; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background-color 0.3s; }
.slider-btn:hover { background-color: white; }
.prev-btn { margin-right: 10px; }
.next-btn { margin-left: 10px; }

#reservation {
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background-image: url('assets/heroimg 4.jpg');
    background-size: cover;
    background-position: center;
}
#reservation::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 42, 34, 0.85);
    z-index: 1;
}

.reservation-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
.reservation-content h2 { font-size: 4rem; line-height: 1.1; margin-bottom: 0; }
.reservation-content .subtitle { line-height: 1.7; font-size: 1rem; }
.reservation-content .description { line-height: 1.7; font-size: 0.9rem; margin-top: 40px; }

.btn-reservasi {
    background-color: var(--light-text);
    color: var(--dark-text);
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    align-self: center;
    margin-top: 20px;
    transition: transform 0.3s, background-color 0.3s;
}
.btn-reservasi:hover { background-color: #fff; transform: scale(1.05); }

.reservation-note { font-size: 0.9rem; opacity: 0.8; align-self: center; text-align: center; }

.reserv-food-1 { position: absolute; z-index: 2; right: 5%; bottom: 20%; width: 280px; transform: rotate(15deg); }
.reserv-food-2 { position: absolute; z-index: 2; left: 15%; bottom: 25%; width: 280px; transform: rotate(-10deg); }
.reserv-food-3 { position: absolute; z-index: 2; top: 0; right: 0; width: 220px; transform: translate(20%, -20%) rotate(10deg); }
.reserv-leaves-left { position: absolute; z-index: 4; bottom: -120px; left: -150px; width: 550px; transform: rotate(-15deg); opacity: 0.8; }
.reserv-leaves-right { position: absolute; z-index: 4; bottom: -120px; right: -150px; width: 500px; transform: scaleX(-1) rotate(-15deg); opacity: 0.8; }

footer { text-align: left; padding: 20px 10%; background-color: #111; font-size: 0.9rem; }

@media (max-width: 1024px) {
    h2, h3 { font-size: 2.5rem !important; }
    #profile { background-image: none !important; }
    #profile::before { width: 100%; mask-image: none; opacity: 0.3; }
    #profile { justify-content: center; text-align: center; }
    .profile-trunk, .profile-leaves { display: none; }
    .profile-content { max-width: 80%; padding-right: 0; }
    .welcome-text { max-width: 60%; }
}
@media (max-width: 768px) {
    header { padding: 15px 5%; }
    section { padding: 180px 5% 50px; }
    .monstera-leaf-1 { display: none; }
    .reserv-food-1, .reserv-food-2, .reserv-food-3, .reserv-leaves-left, .reserv-leaves-right { display: none; }
    .reservation-content { align-items: center; text-align: center; }
    .slider-wrapper { width: 95%; }
    .slider img { width: calc(100% / 2 - 10px); }
    #welcome { justify-content: center; text-align: center; }
    .welcome-text { max-width: 90%; }
    footer { padding: 20px 5%; }
}
@media (max-width: 480px) {
    nav { gap: 15px; }
    .slider img { width: 100%; }
    .slider-btn { width: 40px; height: 40px; font-size: 1.5rem; }
    .btn-reservasi { padding: 12px 30px; }
}