/* ============================================================ */

/* === RESPONSIVE NAVBAR - SIMPLE VERSION === */

/* ============================================================ */



/* === MOBILE (≤ 768px) === */

@media screen and (max-width: 768px) {

    /* Remove body margin di mobile */

    body {

        margin-left: 0 !important;

        padding-left: 0 !important;

    }

    

    body.no-scroll {

        overflow: hidden;

        position: fixed;

        width: 100%;

    }

    

    /* Navbar mobile - slide from left */

    .navbar {

        position: fixed !important;

        left: 0 !important;

        top: 0 !important;

        width: 280px !important;

        max-width: 85vw !important;

        height: 100vh !important;

        transform: translateX(-100%) !important;

        transition: transform 0.4s ease !important;

        z-index: 9999 !important;

        overflow-y: auto !important;

        padding: 1rem 0 2rem 0 !important;

    }

    

    /* Navbar visible */

    .navbar:not(.hidden) {

        transform: translateX(0) !important;

        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5) !important;

    }

    

    /* Navbar hidden */

    .navbar.hidden {

        transform: translateX(-100%) !important;

    }

    

    /* Sidebar header mobile */

    .sidebar-header {

        padding: 1rem !important;

        margin-bottom: 1rem !important;

        min-height: auto !important;

    }

    

    .navbar-logo {

        max-width: 120px !important;

        width: 70% !important;

    }

    

    /* Menu mobile - always visible inside navbar */

    .nav-menu {

        display: flex !important;

        flex-direction: column !important;

        opacity: 1 !important;

        visibility: visible !important;

        padding: 0 !important;

        margin: 0 !important;

    }

    

    .nav-menu li {

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;

    }

    

    .nav-menu li a {

        display: flex !important;

        align-items: center !important;

        gap: 1rem !important;

        padding: 1rem 1.5rem !important;

        color: white !important;

        font-size: 1rem !important;

        opacity: 1 !important;

    }

    

    /* Tombol hamburger - show button */

    .sidebar-show-btn {

        position: fixed !important;

        top: 15px !important;

        left: 15px !important;

        width: 50px !important;

        height: 50px !important;

        border-radius: 12px !important;

        z-index: 999 !important;

        background: var(--leaf-green) !important;

        color: white !important;

        border: none !important;

        font-size: 1.5rem !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        opacity: 1 !important;

        pointer-events: all !important;

        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;

    }

    

    /* Hide hamburger saat navbar terbuka */

    .sidebar-show-btn:not(.active) {

        opacity: 0 !important;

        pointer-events: none !important;

    }

    

    /* Hide tombol toggle desktop di mobile */

    .sidebar-toggle {

        display: none !important;

    }

    

    /* Hide overlay */

    .navbar-overlay {

        display: none !important;

    }

    

    /* === RESPONSIVE CONTENT === */

    .hero {

        min-height: 70vh !important;

        padding: 6rem 1.5rem 4rem 1.5rem !important;

        background-attachment: scroll !important;

    }

    

    .hero-content h1 {

        font-size: 2.2rem !important;

    }

    

    .hero-content p {

        font-size: 1.05rem !important;

    }

    

    .hero-buttons {

        flex-direction: column !important;

        gap: 1rem !important;

    }

    

    .hero-buttons .btn {

        width: 100% !important;

        padding: 1rem 1.5rem !important;

    }

    

    .stats-section {

        flex-direction: column !important;

        width: 90% !important;

        margin-top: -60px !important;

    }

    

    .info-section {

        padding: 3rem 1.5rem !important;

    }

    

    .info-section h2 {

        font-size: 2rem !important;

    }

    

    .booking-steps {

        grid-template-columns: 1fr !important;

    }

    

    .faq-container {

        margin: 0 1rem !important;

    }

    

    .map-feature-container {

        flex-direction: column !important;

        padding: 2rem 1.5rem !important;

    }

    

    .map-embed-container {

        height: 400px !important;

    }

}



/* === DESKTOP (> 768px) - RESTORE ORIGINAL === */

@media screen and (min-width: 769px) {

    /* Body margin untuk sidebar */

    body {

        margin-left: 250px;

        transition: margin-left 0.4s ease;

    }

    

    body.sidebar-hidden {

        margin-left: 0 !important;

    }

    

    /* Navbar desktop - original style */

    .navbar {

        position: fixed;

        left: 0;

        top: 0;

        width: 250px;

        height: 100vh;

        transition: left 0.4s ease;

        z-index: 1000;

    }

    

    .navbar.hidden {

        left: -250px;

    }

    

    /* Sidebar header desktop */

    .sidebar-header {

        padding: 2rem 1rem;

        margin-bottom: 1.5rem;

        min-height: 100px;

    }

    

    .navbar-logo {

        width: 85%;

        max-width: 220px;

    }

    

    /* Tombol toggle desktop - tanda panah */

    .sidebar-toggle {

        position: fixed !important;

        top: 50% !important;

        left: 235px !important;

        transform: translateY(-50%) !important;

        background: var(--leaf-green) !important;

        border: none !important;

        color: white !important;

        width: 40px !important;

        height: 40px !important;

        border-radius: 50% !important;

        cursor: pointer !important;

        transition: all 0.3s ease !important;

        z-index: 1001 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;

    }

    

    .sidebar-toggle:hover {

        background: var(--leaf-dark) !important;

        transform: translateY(-50%) scale(1.1) !important;

    }

    

    /* Hide tombol toggle saat navbar tertutup */

    .navbar.hidden .sidebar-toggle {

        opacity: 0 !important;

        pointer-events: none !important;

    }

    

    /* Tombol show desktop */

    .sidebar-show-btn {

        position: fixed !important;

        top: 50% !important;

        left: -50px !important;

        transform: translateY(-50%) !important;

        background: var(--leaf-green) !important;

        color: white !important;

        border: none !important;

        width: 50px !important;

        height: 50px !important;

        border-radius: 0 8px 8px 0 !important;

        cursor: pointer !important;

        z-index: 999 !important;

        transition: all 0.3s ease !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        opacity: 0 !important;

        pointer-events: none !important;

    }

    

    .sidebar-show-btn.active {

        left: 0 !important;

        opacity: 1 !important;

        pointer-events: all !important;

    }

    

    .sidebar-show-btn:hover {

        background: var(--leaf-dark) !important;

    }

    

    /* Hide overlay di desktop */

    .navbar-overlay {

        display: none !important;

    }

}



/* Prevent horizontal scroll */

html, body {

    overflow-x: hidden !important;

    max-width: 100vw !important;

}

/* ============================================================ */

/* === IMPROVEMENT TOMBOL LOGIN - MOBILE & DESKTOP === */

/* ============================================================ */



/* === MOBILE === */

@media screen and (max-width: 768px) {

    /* Spacing sebelum tombol login */

    .login-btn {

        margin-top: 1.5rem !important;

        padding: 1rem 2rem !important;

        font-size: 1.1rem !important;

        font-weight: 600 !important;

        border-radius: 8px !important;

    }

    

    /* Efek saat tombol diklik/tap */

    .login-btn:active {

        transform: scale(0.97) !important;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;

    }

    

    /* Icon login lebih besar */

    .login-btn i {

        font-size: 1.2rem !important;

        margin-right: 0.5rem !important;

    }

}



/* === DESKTOP === */

@media screen and (min-width: 769px) {

    .login-btn {

        padding: 0.8rem 1.5rem !important;

        font-size: 1rem !important;

        font-weight: 600 !important;

        border-radius: 8px !important;

        transition: all 0.3s ease !important;

        margin-top: 1rem !important;

    }

    

    /* Hover effect desktop */

    .login-btn:hover {

        transform: translateY(-2px) !important;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;

    }

    

    /* Icon login */

    .login-btn i {

        font-size: 1.1rem !important;

        margin-right: 0.5rem !important;

    }

}



/*