/* --- 1. RESET & VARIABLES (Pengaturan Dasar) --- */
:root {
    --bg-body: #f5f5f7;       /* Abu-abu muda khas Apple */
    --bg-card: #ffffff;       /* Putih bersih */
    --text-primary: #1d1d1f;  /* Hitam pudar (tidak hitam pekat) */
    --text-secondary: #86868b;/* Abu-abu teks */
    --accent-teal: #579093;   /* Warna Hijau Tosca Brand */
    --accent-gold: #C5A57D;   /* Warna Emas Brand */
    --accent-red: #e63946;    /* Warna Merah Diskon */
    --radius-l: 30px;         /* Sudut melengkung besar */
    --radius-m: 20px;         /* Sudut melengkung sedang */
    --nav-height: 80px;       /* Tinggi navigasi */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* Agar font terlihat halus di Mac/iOS */
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img, video { max-width: 100%; display: block; }

/* --- 2. UTILITIES (Untuk Halaman Multi-Page) --- */
/* Memberi jarak atas agar konten tidak tertutup Navbar Fixed */
.page-container {
    padding-top: 120px; 
    min-height: 80vh; /* Agar footer tidak naik ke tengah jika konten sedikit */
}

/* --- 3. ANIMATIONS (Efek Muncul) --- */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- 4. NAVBAR (Menu Navigasi) --- */
nav {
    position: fixed; top: 0; width: 100%; height: var(--nav-height);
    background: rgba(255, 255, 255, 0.85); /* Efek kaca transparan */
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 9999; display: flex; justify-content: center;
    border-bottom: 1px solid rgba(0,0,0,0.05); transition: all 0.3s ease;
}
.nav-content {
    width: 100%; max-width: 1000px; display: flex;
    justify-content: space-between; align-items: center; padding: 0 20px;
    font-size: 14px; position: relative;
}
.logo-nav img { height: 60px; width: auto; transition: transform 0.3s ease; }
.logo-nav img:hover { transform: scale(1.05); }

.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--text-primary); opacity: 0.8; font-weight: 500; position: relative; }
/* Efek hover dan menu aktif */
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--accent-teal); font-weight: 700; }

/* Hamburger Menu (Mobile) */
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 6px; z-index: 10000; }
.hamburger span { display: block; width: 25px; height: 2px; background-color: var(--text-primary); border-radius: 2px; transition: 0.3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* --- 5. HERO SECTION (Halaman Utama) --- */
.hero {
    height: 100vh; width: 100%; position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    padding-bottom: 100px; text-align: center; overflow: hidden; background: #000;
    padding-top: var(--nav-height); 
}
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)), url('image_17.png');
    background-position: center; background-size: cover;
    transform: scale(1.05); animation: zoomOut 10s forwards ease-out;
}
@keyframes zoomOut { to { transform: scale(1); } }

.hero-content { position: relative; z-index: 10; color: #fff; max-width: 800px; padding: 0 20px; }
.hero-title { font-size: 4.5rem; font-weight: 700; letter-spacing: -1.5px; margin-bottom: 15px; line-height: 1.1; }
.hero-subtitle { font-size: 1.5rem; font-weight: 400; color: #f5f5f7; margin-bottom: 35px; }

/* Tombol Gaya Apple */
.btn-apple {
    background-color: var(--accent-teal); color: white; padding: 14px 35px;
    border-radius: 980px; font-size: 17px; font-weight: 600; display: inline-block;
    box-shadow: 0 4px 15px rgba(87, 144, 147, 0.3); transition: 0.3s;
}
.btn-apple:hover { background-color: #467578; transform: scale(1.02); }

/* --- 6. STATEMENT TEXT --- */
.statement-section { padding: 150px 20px; text-align: center; background: white; }
.statement-text {
    font-size: 3.5rem; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1;
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    max-width: 900px; margin: 0 auto;
}

/* --- 7. TEAM & PROFILE (Halaman Profil) --- */
.team-section { padding: 80px 20px; background: var(--bg-body); }
.team-header { text-align: center; margin-bottom: 70px; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px 60px; max-width: 1000px; margin: 0 auto; }

.team-card { flex: 0 0 200px; text-align: center; border: none; }
/* Card pertama (Owner) dibuat full width di baris atas */
.team-card:first-child { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }

.member-photo {
    width: 160px; height: 160px; margin: 0 auto 20px; position: relative;
    border-radius: 40px; overflow: hidden; background-color: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.team-card:hover .member-photo { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

.member-info h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 5px; color: var(--text-primary); letter-spacing: -0.5px;}
.member-info p { font-size: 0.95rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 10px; }
.member-quote { display: block; font-size: 0.9rem; color: var(--text-secondary); font-style: italic; max-width: 220px; margin: 0 auto; opacity: 0.8; line-height: 1.4; }

/* --- 8. BENTO GRID (Kotak-kotak Fitur) --- */
.bento-section { padding: 50px 20px; max-width: 1200px; margin: 0 auto; }
.section-header { margin-bottom: 40px; text-align: left; }
.section-header h2 { font-size: 3rem; font-weight: 700; letter-spacing: -1px;}
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 320px); gap: 24px; }
.bento-card {
    background: white; border-radius: var(--radius-l); padding: 40px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform 0.3s; overflow: hidden; position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.02);
}
.bento-card:hover { transform: scale(1.01); box-shadow: 0 15px 40px rgba(0,0,0,0.08); }
.bento-card h3 { font-size: 2rem; font-weight: 700; margin-bottom: 10px; z-index: 2; letter-spacing: -0.5px;}
.bento-card p { font-size: 1.1rem; color: var(--text-secondary); z-index: 2; font-weight: 500;}
.span-2 { grid-column: span 2; background: #111; color: white !important; }
.span-2 p { color: #888; }

/* --- 9. SHOWCASE & GALLERY (Halaman Layanan) --- */
.showcase-section { background: #fff; padding: 100px 0; }
.showcase-item { display: flex; align-items: center; max-width: 1200px; margin: 0 auto 120px; padding: 0 40px; gap: 80px; }
.showcase-item.reverse { flex-direction: row-reverse; }
.showcase-text { flex: 1; }
.showcase-label { color: var(--accent-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; display: block; font-size: 0.9rem;}
.showcase-text h3 { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; line-height: 1.05; letter-spacing: -1px;}
.showcase-text p { font-size: 1.25rem; color: var(--text-secondary); line-height: 1.6; font-weight: 400;}
.showcase-img { flex: 1; height: 600px; border-radius: var(--radius-l); overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.showcase-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.showcase-img:hover img { transform: scale(1.03); }

/* Gallery Slider */
.gallery-section { position: relative; width: 100%; height: 80vh; max-height: 800px; overflow: hidden; background: #000; }
.gallery-track { position: relative; width: 100%; height: 100%; }
.gallery-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity 1s ease-in-out;
    display: flex; justify-content: center; align-items: center; z-index: 1;
}
.gallery-slide.active { opacity: 1; z-index: 2; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; opacity: 0.9; }
.gallery-caption {
    position: absolute; bottom: 80px; left: 80px; color: white;
    background: rgba(0,0,0,0.6); padding: 30px; border-radius: 20px;
    backdrop-filter: blur(10px); max-width: 400px;
}
.gallery-caption h3 { font-size: 2.5rem; font-weight: 700; margin-bottom: 5px; }
.slider-nav { position: absolute; bottom: 30px; right: 80px; display: flex; gap: 15px; z-index: 10; }
.nav-btn {
    background: rgba(255,255,255,0.15); border: none; width: 60px; height: 60px; border-radius: 50%;
    color: white; cursor: pointer; font-size: 24px; backdrop-filter: blur(5px);
    transition: 0.3s; display: flex; align-items: center; justify-content: center;
}
.nav-btn:hover { background: rgba(255,255,255,0.3); }

/* --- 10. PRICING & PROMO (Halaman Harga) --- */
.pricing-section { padding: 80px 20px; text-align: center; background: white;}
.price-grid { display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 1000px; margin: 60px auto 0; }
@media (min-width: 768px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
.price-box {
    padding: 40px; background: var(--bg-body); border-radius: var(--radius-l);
    text-align: left; transition: transform 0.3s; height: 100%;
}
.price-box:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.price-box h3 { font-size: 1.5rem; color: var(--accent-teal); margin-bottom: 5px; font-weight: 700; }
.price-box .price-tag { font-size: 2.5rem; font-weight: 700; margin-bottom: 25px; display: block; color: var(--text-primary); }
.price-item { display: flex; justify-content: space-between; border-bottom: 1px solid #e0e0e0; padding: 15px 0; color: var(--text-secondary); font-size: 1rem; font-weight: 500;}
.price-item span:last-child { color: var(--text-primary); font-weight: 600; text-align: right;}

/* Promo Cards */
.promo-section { padding: 40px 0 100px; background: var(--bg-body); overflow: hidden; }
.promo-container { display: flex; gap: 24px; padding: 0 40px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 40px; }
.promo-container::-webkit-scrollbar { display: block; height: 8px; }
.promo-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 4px; margin: 0 40px; }
.promo-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.promo-card { min-width: 320px; height: 550px; border-radius: var(--radius-m); overflow: hidden; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: 0.3s; cursor: pointer; }
.promo-card:hover { transform: translateY(-10px); }
.promo-card img { width: 100%; height: 100%; object-fit: cover; }

/* --- 11. MODAL POPUP (Klik Promo) --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%);
    z-index: 10001; display: none; justify-content: center; align-items: center; padding: 20px;
    opacity: 0; transition: opacity 0.4s ease-in-out;
}
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content {
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    padding: 40px; border-radius: 30px; width: 100%; max-width: 500px; position: relative;
    transform: scale(0.92) translateY(20px); opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 40px 100px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.2);
}
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); opacity: 1; }
.close-modal {
    position: absolute; top: 20px; right: 20px; width: 36px; height: 36px;
    background: rgba(0,0,0,0.08); border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 20px; font-weight: 600; cursor: pointer; color: var(--text-secondary); transition: 0.3s;
}
.close-modal:hover { background: rgba(0,0,0,0.15); color: var(--text-primary); }
.modal-header { margin-bottom: 25px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 15px; }
.modal-header h3 { font-size: 2.2rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px;}
.promo-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px dashed rgba(0,0,0,0.1); }
.item-name { font-weight: 600; color: var(--text-primary); font-size: 1.1rem; }
.item-price { text-align: right; }
.old-price { display: block; font-size: 0.95rem; text-decoration: line-through; color: var(--text-secondary); opacity: 0.7;}
.new-price { display: block; font-size: 1.25rem; font-weight: 700; color: var(--accent-red); }
.modal-footer { margin-top: 35px; text-align: center; }
.btn-claim {
    background: #25d366; color: white; padding: 14px 40px; border-radius: 50px;
    font-weight: 600; font-size: 1.1rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}
.btn-claim:hover { background: #1fe068; transform: scale(1.03); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4); }

/* --- 12. MAPS & FOOTER --- */
.map-container { position: relative; width: 100%; height: 450px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); background: #eee; }
.btn-map { background: white; color: var(--text-primary); padding: 12px 24px; border-radius: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-top: 10px;}
.btn-map:hover { background: #f0f0f0; }

footer { background: #fff; padding: 80px 20px 40px; border-top: 1px solid #e5e5e5; font-size: 13px; color: var(--text-secondary); }
.footer-content { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; }
.footer-col h4 { color: var(--text-primary); margin-bottom: 15px; font-weight: 600; font-size: 14px;}
.footer-col p { margin-bottom: 10px; }
.copyright { text-align: center; margin-top: 80px; padding-top: 20px; border-top: 1px solid #f0f0f0; }

/* Floating WhatsApp */
.float-wa {
    position: fixed; width: 60px; height: 60px; bottom: 30px; left: 30px;
    background-color: #25d366; color: #FFF; border-radius: 50%; text-align: center;
    font-size: 30px; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); z-index: 1000;
    display: flex; align-items: center; justify-content: center; transition: transform 0.3s;
}
.float-wa:hover { transform: scale(1.1); background-color: #1fe068; }

/* --- 13. RESPONSIVE MOBILE (Tampilan HP) --- */
@media (max-width: 768px) {
    :root { --nav-height: 70px; }
    .hamburger { display: flex; }
    .nav-links {
        position: absolute; top: var(--nav-height); left: 0; width: 100%;
        background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px);
        flex-direction: column; align-items: center; gap: 25px; padding: 40px 0;
        border-bottom: 1px solid #eee; transform: translateY(-150%); opacity: 0;
        transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: -1; pointer-events: none;
    }
    .nav-links.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
    
    .hero-title { font-size: 2.8rem; letter-spacing: -1px;}
    .statement-text { font-size: 2rem; }
    
    /* Layout Mobile */
    .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .span-2 { grid-column: auto; }
    
    .showcase-item { flex-direction: column; padding: 0 20px; text-align: center; gap: 40px; margin-bottom: 80px;}
    .showcase-item.reverse { flex-direction: column; }
    .showcase-img { height: 350px; width: 100%; }
    
    .price-grid { grid-template-columns: 1fr; }
    .team-grid { gap: 40px; }
    .team-card { flex: 0 0 100%; margin-bottom: 20px; }
    
    .float-wa { width: 50px; height: 50px; bottom: 20px; left: 20px; }
}
<section class="steps-home-section">
        <div class="reveal">
            <h2 style="font-size: 2.5rem; font-weight: 700;">Cara Kerja.</h2>
            <p style="color: var(--text-secondary);">Laundry bersih tanpa keluar rumah.</p>
        </div>
        <div class="steps-home-container reveal">
            <div class="step-home-item">
                <div class="step-icon-box">📲</div>
                <h3>1. Order</h3>
                <p>Chat WhatsApp kami untuk jadwalkan penjemputan.</p>
            </div>
            <div class="step-home-item">
                <div class="step-icon-box">🚚</div>
                <h3>2. Pick Up</h3>
                <p>Tim kami menjemput pakaian kotor di lokasi Anda.</p>
            </div>
            <div class="step-home-item">
                <div class="step-icon-box">✨</div>
                <h3>3. Process</h3>
                <p>Pakaian dicuci dengan teknologi premium & higienis.</p>
            </div>
            <div class="step-home-item">
                <div class="step-icon-box">🎁</div>
                <h3>4. Delivery</h3>
                <p>Pakaian bersih, wangi, dan rapi diantar kembali.</p>
            </div>
        </div>
    </section>

    <section class="reviews-section">
        <div class="reveal" style="text-align: center; margin-bottom: 50px;">
            <h2 style="font-size: 2.5rem; font-weight: 700;">Kata Mereka.</h2>
            <p style="color: var(--text-secondary);">Pengalaman pelanggan The Laundry House.</p>
        </div>
        <div class="reviews-grid reveal">
            <div class="review-card">
                <div class="stars">★★★★★</div>
                <p class="review-text">"Sangat puas! Wanginya mewah banget dan tahan lama. Sepatu saya yang kotor jadi seperti baru lagi. Recommended di Padangsidimpuan!"</p>
                <div class="review-author"><div class="review-avatar">R</div>Rina Siregar</div>
            </div>
            <div class="review-card">
                <div class="stars">★★★★★</div>
                <p class="review-text">"Layanan antar jemputnya sangat membantu buat saya yang sibuk kerja. Adminnya ramah dan fast respon. Sukses terus!"</p>
                <div class="review-author"><div class="review-avatar">B</div>Budi Santoso</div>
            </div>
            <div class="review-card">
                <div class="stars">★★★★★</div>
                <p class="review-text">"Baru kali ini nemu laundry yang pengerjaannya sangat detail dan rapi. Packingnya juga aman dan eksklusif."</p>
                <div class="review-author"><div class="review-avatar">D</div>Dewi Anggraini</div>
            </div>
        </div>
    </section>

    <section class="faq-section">
        <div class="reveal" style="text-align: center; margin-bottom: 50px;">
            <h2 style="font-size: 2.5rem; font-weight: 700;">Pertanyaan Umum.</h2>
        </div>
        <div class="faq-container reveal">
            <div class="faq-item">
                <button class="faq-question">Apakah dicuci campur dengan pelanggan lain?</button>
                <div class="faq-answer"><p>Tidak. Kami menerapkan sistem "1 Mesin 1 Pelanggan" untuk menjaga kehigienisan dan mencegah pakaian tertukar atau luntur.</p></div>
            </div>
            <div class="faq-item">
                <button class="faq-question">Berapa minimal berat untuk antar jemput?</button>
                <div class="faq-answer"><p>Minimal 5kg untuk Non-Member dan 3kg untuk Member. Jika kurang dari itu, tetap bisa dijemput dengan biaya minimal charge.</p></div>
            </div>
            <div class="faq-item">
                <button class="faq-question">Apakah ada garansi jika pakaian rusak/hilang?</button>
                <div class="faq-answer"><p>Ya, kami memberikan garansi layanan sesuai dengan syarat dan ketentuan yang berlaku. Kepuasan Anda adalah prioritas kami.</p></div>
            </div>
            <div class="faq-item">
                <button class="faq-question">Deterjen apa yang digunakan?</button>
                <div class="faq-answer"><p>Kami menggunakan deterjen ramah lingkungan (Eco-friendly) grade premium yang ampuh mengangkat noda namun tetap lembut di serat kain dan aman bagi kulit sensitif.</p></div>
            </div>
        </div>
    </section>

    <script>
        const faqItems = document.querySelectorAll('.faq-item');
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            question.addEventListener('click', () => {
                item.classList.toggle('active');
            });
        });
    </script>