/* --- Reset & Global Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --primary: #ebb221;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    background-color: #fcfcfc;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Buttons --- */
.btn-blue, .btn-blue-full, .btn-search {
    background-color: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
    display: inline-block;
    transition: background 0.3s;
}

.btn-blue { padding: 12px 24px; font-size: 15px; }
.btn-blue:hover { background-color: var(--primary); }

.btn-blue-full {
    width: 100%;
    padding: 12px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    margin-top: auto; /* Push to bottom of card */
}

.btn-dark {
    background-color: var(--primary);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

.btn-outline-white {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 24px;
    border-radius: 5px;
}
.btn-outline-white:hover { background-color: rgba(255,255,255,0.1); }

/* --- Navbar --- */
.navbar {
    background-color: transparent; /* Changed to dark blue after scrolling (will require JS) */
    position: absolute; /* Place over hero, but can be changed to fixed/relative */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 15px 0;
}

/* Initially, since it's absolute on white text hero, use dark background for navbar content if hero has dark overlay or just on real site. For now, matching the image, assuming white background and dark text for links */

.navbar {
    background-color: #050505; /* Default white background for header */
    position: relative; /* Change to relative for easier layout if needed */
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img { height: 50px;}

.nav-links { display: flex; gap: 20px; }
.nav-links a { font-size: 14px; font-weight: 500; color: #ffffff; }
.nav-links a:hover { color: var(--primary); }

.phone-cta { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.phone-cta img { height: 16px; }

/* Mobile Menu Button - Hidden on desktop */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
}
.mobile-menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #333;
    border-radius: 3px;
    transition: transform 0.3s, opacity 0.3s;
}

/* --- Hero Section --- */
.hero {
    position:relative;
    overflow: hidden;
    padding:140px 0; /* Adjust bottom padding to accommodate hero image */
    color:#fff;
    background-image: url('img/bannermobil.png');
    background-size: cover;
    background-position: center;

}

.hero .container { position: relative; z-index: 2; }
.hero-content { display: flex; align-items: center; justify-content: space-between; }
.hero-text { flex: 0 0 50%; padding-right: 40px; }
.hero-text h1 { font-size: 40px; line-height: 1.2; margin-bottom: 20px; }
.hero-text h1 .highlight { color: var(--primary); font-weight: 700; }
.hero-text p { font-size: 16px; margin-bottom: 30px; opacity: 0.9; }
.hero-buttons { display: flex; gap: 15px; }


/* --- Search Form --- */
.search-form-section { margin-top: -60px; position: relative; z-index: 10; }
.search-form {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* So form fields and button fill height */
    overflow: hidden; /* For corner rounding on child elements */
}

.form-group {
    flex: 1;
    border-right: 1px solid #eee;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.form-control-wrapper span { display: block; font-size: 12px; color: #888; margin-bottom: 3px; }
.form-group select, .form-group input {
    border: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    width: 100%;
}
.form-group select { cursor: pointer; }

.btn-search {
    padding: 15px 30px;
    border-radius: 0 10px 10px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.btn-search img { height: 20px; }

/* --- Car List Section --- */
.car-list { padding: 80px 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.section-header h2 { font-size: 24px; font-weight: 700; }
.section-subheader { font-size: 14px; color: #777; margin-bottom: 30px; }
.view-all { font-size: 14px; color: var(--primary); font-weight: 500; }

.car-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.car-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.car-thumb { max-height: 150px; width: 100%; object-fit: contain; padding: 20px; }
.car-card h3 { font-size: 16px; font-weight: 600; padding: 0 15px; margin-bottom: 3px; }
.car-card .year { font-size: 13px; color: #888; padding: 0 15px; margin-bottom: 12px; }
.specs { display: flex; gap: 15px; padding: 0 15px; margin-bottom: 15px; font-size: 13px; color: #666; }
.specs span { display: flex; align-items: center; gap: 6px; }
.specs img { height: 24px; } /* Slightly smaller for seat icon */

.price {
    background-color: #f1f8fe;
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
    width: auto;
    margin: 0 15px 15px; /* Control size & spacing */
}
.per-day { font-size: 12px; color: #555; font-weight: 400; }

/* --- Keunggulan Section --- */
.advantages { padding: 1px 0; background-color: #fcfcfc; text-align: center; }
.advantages h3 { font-size: 24px; margin-bottom: 40px; font-weight: 700; }

.advantages-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.adv-item { text-align: center; width: 150px; }
.adv-item img { height: 50px; margin-bottom: 20px; }
.adv-item h4 { font-size: 14px; color: #555; font-weight: 600; }

/* --- Promo Section --- */
.promo { padding: 20px 0; text-align: center; }
.promo h3 { font-size: 24px; margin-bottom: 40px; font-weight: 700; }

.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promo-card {
    background-color: #000000;
    color: #fff;
    border-radius: 10px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.promo-icon img { height: 30px; z-index: 1; position: relative; }

.promo-content h4 { font-size: 14px; font-weight: 600; opacity: 0.9; z-index:1; position: relative; }
.promo-main { font-size: 32px; font-weight: 700; color: var(--primary); line-height: 1; margin: 5px 0; }
.promo-content p { font-size: 13px; opacity: 0.8; z-index: 1; position: relative; }

.promo-car-thumb { height: 140px; width: 375px; position: absolute; bottom: 0px; right: 0px; z-index:0; }
.calendar-illu { height: 140px; width: 375px; position: absolute; bottom: 0px; right: 0px; z-index:0; }

/* --- Testimoni Section --- */
.testimonials { padding: 40px 0; text-align: center; background-color: #f9f9f9; }
.testimonials h3 { font-size: 24px; margin-bottom: 40px; font-weight: 700; }

.testimonials-slider { display: flex; justify-content: space-around; gap: 30px; margin-bottom: 30px; }
.testimonial-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 30px;
    flex: 1;
    text-align: left;
}

.stars { color: #fcc419; font-size: 18px; margin-bottom: 15px; }
.testimonial-card p { font-size: 14px; color: #555; font-style: italic; margin-bottom: 20px; }

.client-info { display: flex; align-items: center; gap: 15px; }
.client-info img { width: 50px; height: 50px; border-radius: 50%; position:relative; top: -15px; }
.client-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.client-info p { font-size: 13px; color: #777; font-style: normal; }

.slider-dots { display: flex; justify-content: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; cursor: pointer; }
.dot.active { background-color: #007bff; }

/* --- Cara Booking Section --- */
.booking-steps { padding: 80px 0; text-align: center; }
.booking-steps h3 { font-size: 24px; margin-bottom: 40px; font-weight: 700; }

.steps-flex { display: flex; align-items: center; justify-content: center; gap: 30px; }
.step-item { width: 140px; text-align: center; position: relative; }
.step-icon img { height: 40px; margin-bottom: 20px; background-color: #cecbcb ;border-radius:50%; }
.step-num {
    position: absolute;
    top: -10px; left: 5px;
    background-color: #007bff;
    color: #fff;
    font-size: 12px; font-weight: 700;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.step-item h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.step-item p { font-size: 12px; color: #666; line-height: 1.4; }

.step-arrow {
    background-image: url('img/step-arrow.png');
    background-size: contain;
    width: 40px; height: 10px;
    opacity: 0.3;
}

/* --- Footer --- */
.footer { background-color: #32291b; color: rgba(255,255,255,0.7); padding: 70px 0 30px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 2.5fr 1.5fr 1.5fr 2fr; gap: 40px; }

.footer-logo { height: 35px; margin-bottom: 15px; }
.footer-col.brand p { font-size: 13px; line-height: 1.6; margin-bottom: 20px; max-width: 300px;}

.social-links { display: flex; gap: 15px; }
.social-links a img { width: 30px; height: 30px; opacity: 0.7;}
.social-links a:hover img { opacity: 1; }

.footer-col h4 { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.footer-col ul li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.footer-col img { height: 30px; width: 30px; margin-top: -6px; } /* White icons */

.footer-col.footer-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.footer-col a { color: inherit; }
.footer-col a:hover { color: #fff; }

.copyright { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; margin-top: 50px; font-size: 12px; opacity: 0.6; }

/* =========================================================================
   MEDIA QUERIES - RESPONSIVE STYLES (Penyesuaian Ukuran Layar)
   ========================================================================= */

/* --- Tablet / Large Mobile (1024px) --- */
@media screen and (max-width: 1024px) {
    .hero-text h1 { font-size: 32px; }
    .hero-image img { max-width: 110%; right: 0%; }
    
    .car-grid { grid-template-columns: repeat(2, 1fr); }
    .promo-grid { grid-template-columns: repeat(1, 1fr); }
    .promo-card { flex-direction: row; gap: 20px; }
    .promo-card .promo-car-thumb { width: 1200px; position:absolute;height:160px; bottom: 0; right: 0;top:-20px; z-index:0;}

    .testimonials-slider { flex-direction: column; gap: 20px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

/* --- Mobile Landscape / Large Mobile (768px) --- */
@media screen and (max-width: 768px) {
    .container { padding: 0 15px; }
    
    /* Navbar Mobile */
    .mobile-menu-toggle { display: flex; }
    .nav-links {
        position: fixed;
        top: 0; right: -100%;
        width: 40%; height: 110vh;
        background-image: url(img/sidebar.png);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: right 0.3s ease;
        z-index: 999;
    }
    .nav-links.active { right: 0; }
    .nav-links a { color: #000000; font-size: 18px; margin: 10px 0; }
    .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
    
    .phone-cta { display: none; } /* Hide on mobile navbar */
    
    /* Hero */
    .hero-content { flex-direction: column; text-align: center; padding-bottom: 200px; }
    .hero-text { flex: 0 0 100%; padding: 0; margin-bottom: 40px; }
    .hero-buttons { justify-content: center; }
    .hero-image img { max-width: 90%; right: 5%; bottom: -50px; position: absolute; }
    
    /* Search Form Mobile */
    .search-form-section { margin-top: -150px; }
    .search-form { flex-direction: column; }
    .form-group { border-right: none; border-bottom: 1px solid #eee; }
    .btn-search { border-radius: 0 0 10px 10px; width: 100%; justify-content: center; }

    /* Steps */
    .steps-flex { flex-direction: column; gap: 15px; }
    .step-arrow { display: none; }

    .promo-card .promo-car-thumb { width:800px; position:absolute;height:160px; bottom: 0; right: 0;top:-20px; z-index:0;}
    .promo-card .calendar-illu {width:800px; position:absolute;height:140px; bottom: 0; right: 0;top:0; z-index:0; background-size:cover;}
}

/* --- Mobile Portrait (480px) --- */
@media screen and (max-width: 480px) {
    .hero-text h1 { font-size: 26px; }
    .hero-buttons { flex-direction: column; gap: 10px; }
    .hero-image  .bannermobil { position:absolute; width:fit-content; height:auto; z-index:0;background-size:cover;}
        
    .car-grid { grid-template-columns: repeat(1, 1fr); }
    
    .advantages-grid { gap: 20px; }
    .adv-item { width: 120px; }
    
    .promo-card {  text-align: left; align-items: center; gap: 10px; padding: 20px;  }
    .promo-card .promo-content p { font-weight:500;}
    .promo-icon { margin-bottom: 10px; height: 20%; }
    .promo-card .promo-car-thumb { width: 1300px; position:absolute;height:120px; bottom: 0; right: 0;top:0; z-index:0;}
    .promo-card .calendar-illu { width: 1300px;position:absolute;height:140px; bottom: 0; right: 0;top:0; z-index:0;}
    
    .testimonial-card { padding: 20px; }
    .step-flex { grid-template-columns: repeat ( 3, 1fr);gap: 10px; }
    .booking-steps .container {display:flex; flex-direction:column; align-items:center; gap:20px;}
    
    .footer-grid { grid-template-columns: 1fr; gap: 25px; }
    .footer-logo { height: 30px; }
}