:root {
            --dark-green: #152C1E; 
            --light-green: #2B4E38;
            --gold: #B89B5E; 
            --bg-cream: #FAF9F5; 
            --text-main: #1C1C1C;
            --text-muted: #5A5A5A;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
        
        html, body { 
            background-color: var(--bg-cream); 
            color: var(--text-main); 
            font-family: 'Outfit', sans-serif; 
            line-height: 1.7; 
            overflow-x: hidden; 
            width: 100%;
            max-width: 100vw; /* Tambahan Wajib untuk iPhone */
        }

        body.menu-open { overflow: hidden; }

        h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.5px; }
        h1 { font-size: 4.5rem; font-weight: 800; line-height: 1.05; margin-bottom: 1.5rem; letter-spacing: -1.5px; }
        h2 { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--dark-green); letter-spacing: -1px; }
        h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; color: var(--dark-green); }
        
        .handwritten-text { font-family: 'Caveat', cursive; font-size: 2.2rem; color: var(--gold); font-weight: 700; display: block; margin-bottom: 15px; transform: rotate(-2deg); }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
        section { padding: 120px 0; border-bottom: 1px dashed rgba(21, 44, 30, 0.15); }
        .no-border { border-bottom: none; }

        /* Navbar */
        header { position: fixed; top: 0; width: 100%; z-index: 1000; background: transparent; padding: 30px 0; transition: all 0.4s ease; border-bottom: 1px solid transparent; }
        .nav-container { display: flex; justify-content: space-between; align-items: center; position: relative; }
        .logo { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.8rem; font-weight: 800; color: white; letter-spacing: 0px; transition: color 0.4s ease;}
        .logo span { color: var(--gold); }
        .nav-links { display: flex; align-items: center; }
        .nav-links a { margin-left: 35px; text-decoration: none; color: white; font-weight: 600; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s; }
        .nav-links a:hover { color: var(--gold); }

        header.scrolled { background: rgba(250, 249, 245, 0.98); box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-bottom: 1px solid rgba(21, 44, 30, 0.05); padding: 15px 0; }
        header.scrolled .logo { color: var(--dark-green); }
        header.scrolled .nav-links a { color: var(--text-main); }
        header.scrolled .nav-links a:hover { color: var(--gold); }

        /* Hamburger Menu Icon */
        .menu-toggle { display: none; color: white; font-size: 1.8rem; cursor: pointer; z-index: 2001; transition: color 0.3s; }
        header.scrolled .menu-toggle { color: var(--dark-green); }
        .menu-overlay { 
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
            background: rgba(0,0,0,0.7); 
            z-index: 990; /* UBAH ANGKA INI JADI 990 */
            display: none; opacity: 0; transition: opacity 0.4s ease; 
        }
        .menu-overlay.active { display: block; opacity: 1; }

        /* Hero */
        .hero { height: 100vh; display: flex; align-items: center; background: linear-gradient(rgba(21, 44, 30, 0.8), rgba(21, 44, 30, 0.6)), url('https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=2000&auto=format&fit=crop') center/cover; color: var(--bg-cream); margin-top: 0; border-bottom: none; }
        .hero-content { max-width: 900px; text-align: center; margin: 0 auto; }
        .hero p { font-size: 1.25rem; font-weight: 300; margin-bottom: 40px; color: rgba(250, 249, 245, 0.9); }
        .btn { display: inline-block; padding: 16px 40px; background: var(--gold); color: white; text-decoration: none; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all 0.4s ease; border: 2px solid var(--gold); border-radius: 50px; }
        .btn:hover { background: transparent; color: var(--gold); transform: translateY(-3px); }

        /* About & Grids */
        .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start; }
        .text-column p { margin-bottom: 20px; font-size: 1.1rem; color: var(--text-muted); }
        .text-column p.lead { font-size: 1.4rem; color: var(--dark-green); font-weight: 500; font-family: 'Bricolage Grotesque', sans-serif; line-height: 1.5; }
        .box-elegant { border: 2px solid rgba(21, 44, 30, 0.1); padding: 40px; background: white; border-radius: 24px; position: relative; margin-bottom: 30px; transition: transform 0.4s ease, box-shadow 0.4s ease; }
        .box-elegant:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(21, 44, 30, 0.08); border-color: var(--gold); }
        .box-elegant ul { list-style: none; color: var(--text-muted); }
        .box-elegant li { padding: 10px 0; border-bottom: 1px dashed rgba(21, 44, 30, 0.1); font-size: 1.05rem; }

        .adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
        .adv-item { padding: 30px; border-radius: 20px; background: white; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(0,0,0,0.03); }
        .adv-item:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); }
        .adv-item i { font-size: 2.5rem; color: var(--gold); margin-bottom: 20px; display: block; }
        .adv-item p { color: var(--text-muted); font-size: 1rem; }

        .prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin-top: 50px; }
        .prod-item { display: flex; gap: 25px; transition: transform 0.3s ease; padding: 20px; border-radius: 20px; }
        .prod-item:hover { transform: translateX(10px); background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
        .prod-number { font-family: 'Bricolage Grotesque', sans-serif; font-size: 4rem; font-weight: 800; color: rgba(21, 44, 30, 0.08); line-height: 0.8; transition: color 0.3s ease; }
        .prod-item:hover .prod-number { color: var(--gold); }
        .prod-detail h3 { margin-bottom: 10px; font-size: 1.5rem; }
        .prod-detail p { color: var(--text-muted); font-size: 1.05rem; }

        /* Gallery Static */
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 60px; }
        .gallery-item { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4/5; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
        .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 44, 30, 0.9) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; display: flex; align-items: flex-end; padding: 30px; }
        .gallery-item:hover .gallery-img { transform: scale(1.1); }
        .gallery-item:hover .gallery-overlay { opacity: 1; }
        .gallery-text h3 { color: white; font-size: 1.5rem; margin-bottom: 5px; font-family: 'Bricolage Grotesque', sans-serif; }
        .gallery-text p { color: var(--gold); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin: 0;}

        /* Marquee Seamless */
        .marquee-wrapper { margin-top: 60px; width: 100%; overflow: hidden; position: relative; padding: 20px 0; -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
        .marquee-track { display: flex; gap: 20px; width: max-content; animation: scrollMarquee 90s linear infinite; transform: translateZ(0); will-change: transform; }
        .marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
        @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 10px)); } }
        .marquee-item { width: 220px; height: 250px; position: relative; border-radius: 20px; overflow: hidden; flex-shrink: 0; cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .marquee-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
        .marquee-item:hover img { transform: scale(1.1); }
        .marquee-reverse { animation: scrollMarqueeReverse 90s linear infinite; }
        @keyframes scrollMarqueeReverse { 0% { transform: translateX(calc(-50% - 10px)); } 100% { transform: translateX(0); } }

        .btn-outline-gold { display: inline-block; padding: 12px 30px; color: var(--gold); border: 2px solid var(--gold); border-radius: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; transition: all 0.3s; cursor: pointer; background: transparent; margin-top: 30px; }
        .btn-outline-gold:hover { background: var(--gold); color: white; }

        /* Clients */
        .client-section { background: var(--dark-green); color: var(--bg-cream); text-align: center; }
        .client-section h2 { color: var(--bg-cream); }
        .client-list { display: flex; justify-content: center; align-items: center; gap: 60px; flex-wrap: wrap; margin: 50px 0; }
        .client-logo-item { display: flex; flex-direction: column; align-items: center; gap: 15px; cursor: pointer; }
        .client-img { max-width: 200px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.5) brightness(200%); transition: all 0.4s ease; }
        .client-logo-item:hover .client-img { filter: grayscale(0%) opacity(1) brightness(100%); transform: scale(1.1) rotate(2deg); }
        .client-branch { font-size: 0.9rem; font-weight: 600; color: rgba(250, 249, 245, 0.6); letter-spacing: 1px; text-transform: uppercase; background: rgba(0,0,0,0.2); padding: 4px 12px; border-radius: 20px; }
        .tag-list { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 40px; }
        .tag-item { border: 2px solid rgba(250, 249, 245, 0.2); padding: 12px 25px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s; }
        .tag-item:hover { background: var(--gold); border-color: var(--gold); color: white; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(184, 155, 94, 0.3); }

        /* Contact & Footer */
        .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
        .contact-info { border-left: 3px solid var(--gold); padding-left: 30px; }
        .contact-info h3 { font-size: 1.3rem; margin-bottom: 15px; }
        .contact-info p { margin-bottom: 15px; color: var(--text-muted); font-size: 1.1rem; }
        .cta-gold { background: linear-gradient(135deg, var(--gold), #d4b572); padding: 60px 40px; border-radius: 30px; text-align: center; color: white; transition: transform 0.4s ease; box-shadow: 0 20px 40px rgba(184, 155, 94, 0.2); }
        .cta-gold:hover { transform: scale(1.02); }
        .cta-gold h2 { color: white; margin-bottom: 20px; font-size: 3.5rem; }
        .btn-wa { display: inline-block; padding: 15px 30px; background: white; color: var(--dark-green); border-radius: 50px; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 20px; font-size: 0.9rem; transition: all 0.3s; }
        .btn-wa:hover { background: var(--dark-green); color: white; }

        footer { background: #0A150E; color: rgba(250, 249, 245, 0.6); padding: 80px 0 30px; font-size: 0.95rem; border-top: 5px solid var(--gold); overflow: hidden; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; margin-bottom: 50px; }
        .footer-logo { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.2rem; font-weight: 800; color: white; margin-bottom: 20px; display: inline-block; letter-spacing: -1px; }
        .footer-logo span { color: var(--gold); }
        .footer-tagline { margin-bottom: 25px; line-height: 1.8; max-width: 350px; }
        .footer-heading { color: white; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.2rem; margin-bottom: 20px; letter-spacing: 0.5px; }
        .footer-links { list-style: none; }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a { color: rgba(250, 249, 245, 0.6); text-decoration: none; transition: color 0.3s, transform 0.3s; display: inline-block; }
        .footer-links a:hover { color: var(--gold); transform: translateX(5px); }
        .footer-contact p { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px; }
        .footer-contact i { color: var(--gold); margin-top: 5px; font-size: 1.1rem; }
        .social-links { margin: 20px 0; }
        .social-links a { display: inline-block; margin-right: 15px; color: rgba(250, 249, 245, 0.5); font-size: 1.5rem; transition: all 0.3s ease; }
        .social-links a:hover { color: var(--gold); transform: translateY(-3px); }
        .footer-bottom { border-top: 1px dashed rgba(250, 249, 245, 0.15); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
        .footer-bottom-links a { color: rgba(250, 249, 245, 0.6); text-decoration: none; margin-left: 20px; font-size: 0.85rem; transition: color 0.3s; }
        .footer-bottom-links a:hover { color: var(--gold); }

        /* Modal Gallery (No Lag) */
        .modal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: rgba(21, 44, 30, 0.65); opacity: 0; transition: opacity 0.3s ease; }
        .modal.show { display: block; opacity: 1; }
        .modal-content { margin: 5% auto; padding: 40px; width: 90%; max-width: 1100px; background-color: var(--bg-cream); border-radius: 24px; position: relative; transform: translateY(-20px) translateZ(0); transition: transform 0.3s ease; will-change: transform; }
        .modal.show .modal-content { transform: translateY(0) translateZ(0); }
        .close-modal { color: var(--dark-green); position: absolute; top: 20px; right: 30px; font-size: 35px; font-weight: bold; cursor: pointer; transition: color 0.3s; z-index: 10; }
        .close-modal:hover { color: var(--gold); }
        .modal-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; margin-top: 30px; }
        .modal-gallery-item { border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; background-color: #e2e8f0; border: 1px solid rgba(0,0,0,0.08); }
        .modal-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

        /* Animations General */
        .reveal-up, .reveal-left, .reveal-right, .reveal-scale { opacity: 0; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease-out; transform: translateZ(0); }
        .reveal-up { transform: translateY(60px) translateZ(0); }
        .reveal-left { transform: translateX(-60px) translateZ(0); }
        .reveal-right { transform: translateX(60px) translateZ(0); }
        .reveal-scale { transform: scale(0.8) rotate(-2deg) translateZ(0); }
        .reveal-up.active, .reveal-left.active, .reveal-right.active, .reveal-scale.active { opacity: 1; transform: translate(0) scale(1) rotate(0) translateZ(0); }
        .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; }

        /* =========================================
        INTERACTIVE SCROLL FEATURES
        ========================================= */
        /* 1. Scroll Progress Bar Emas */
        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background-color: var(--gold);
            z-index: 9999;
            border-radius: 0 2px 2px 0;
            transition: width 0.1s ease-out;
        }

        /* 2. Indikator Menu Aktif (Scroll Spy) */
        .nav-links a.active-link {
            color: var(--gold);
        }
        .nav-links a.active-link::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--gold);
            border-radius: 2px;
            animation: slideIn 0.3s ease forwards;
        }

        @keyframes slideIn {
            from { transform: scaleX(0); transform-origin: left; }
            to { transform: scaleX(1); transform-origin: left; }
        }

        /* =========================================
           RESPONSIVE MOBILE (HANDPHONE FRIENDLY)
           ========================================= */
        @media (max-width: 900px) {
            h1 { font-size: 2.5rem; letter-spacing: -0.5px; margin-bottom: 1rem; }
            h2 { font-size: 2.1rem; }
            .hero p { font-size: 1.1rem; margin-bottom: 30px; }
            .handwritten-text { font-size: 1.8rem; }
            section { padding: 70px 0; } /* Jarak atas bawah diperkecil di HP */
            
            .split-grid, .adv-grid, .prod-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; gap: 30px; }
            .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
            
            .footer-grid { text-align: center; }
            .footer-tagline { margin: 0 auto 25px; }
            .footer-contact p { justify-content: center; }
            .footer-bottom { flex-direction: column; text-align: center; }
            .footer-bottom-links a { margin: 0 10px; }
            
            .cta-gold h2 { font-size: 2.2rem; }
            .modal-content { padding: 30px 20px; width: 95%; margin: 15% auto; }

            /* Konfigurasi Hamburger Menu (Fix Scroll & Kontras) */
            .menu-toggle { 
                display: block; 
                position: relative; 
                z-index: 2005; 
                font-size: 2rem; /* Ikon diperbesar sedikit agar mudah dipencet */
            }
            
            .nav-links {
                position: fixed;
                top: 0;
                /* FIX: Gunakan pixel (-320px) bukan -100% untuk mencegah scroll bawah muncul */
                right: -320px; 
                width: 300px;
                height: 100vh;
                background-color: var(--bg-cream) !important; /* Paksa warna terang */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
                z-index: 2000; 
                box-shadow: -10px 0 30px rgba(0,0,0,0.15); /* Bayangan lebih tegas */
            }
            
            .nav-links.active { 
                right: 0; 
            }
            
            .nav-links a { 
                margin: 18px 0; 
                color: var(--dark-green) !important; /* Paksa teks berwarna hijau gelap agar terbaca jelas */
                font-size: 1.3rem; 
                font-weight: 700;
                letter-spacing: 2px;
            }

            .modal-content {
            padding: 30px 15px; /* Kurangi padding putih agar area foto lebih luas */
            width: 95%; /* Kotak modal hampir full layar kiri kanan */
            margin: 10% auto; /* Jarak atas sedikit diturunkan */
            }

            .close-modal {
                top: 10px; /* Tombol X sedikit naik */
                right: 15px;
                font-size: 30px;
            }

            .modal-gallery-grid {
                /* GANTI DI SINI: Di HP, kita paksa jadi 2 kolom sejajar */
                grid-template-columns: repeat(2, 1fr); 
                gap: 10px; /* Jarak antar foto diperkecil biar rapi */
                margin-top: 20px;
            }

            .modal-gallery-item {
                border-radius: 8px; /* Radius sedikit diperkecil menyesuaikan ukuran foto */
            }
            
            /* Opsional: Jika ingin 3 kolom di HP yang agak lebar (seperti tablet/phablet) */
            @media (min-width: 480px) and (max-width: 900px) {
                .modal-gallery-grid {
                    grid-template-columns: repeat(3, 1fr); 
                }
            }
            .marquee-item {
                width: 130px;  /* Lebar foto diperkecil (dari 220px) */
                height: 150px; /* Tinggi foto diperkecil (dari 250px) */
                border-radius: 12px; /* Lengkungan ujungnya disesuaikan */
            }

            .marquee-track {
                gap: 10px; /* Jarak antar kotak foto agak dirapatkan sedikit */
            }

            /* Penyesuaian jarak mulus animasi karena gap berubah jadi 10px */
            @keyframes scrollMarquee { 
                0% { transform: translateX(0); } 
                100% { transform: translateX(calc(-50% - 5px)); } 
            }
            @keyframes scrollMarqueeReverse { 
                0% { transform: translateX(calc(-50% - 5px)); } 
                100% { transform: translateX(0); } 
            }

            /* =========================================
            🍎 iOS & SAFARI SUPPORT (VAKSIN APPLE) 🍎
            ========================================= */

            /* 1. Mencegah Kedip Highlight saat Tombol/Link disentuh di iPhone */
            a, button, .menu-toggle, .gallery-item, .marquee-item, .client-logo-item {
                -webkit-tap-highlight-color: transparent;
            }

            /* 2. Fix Masalah Address Bar Safari yang Menutupi Layar (100vh Bug) */
            .hero, .nav-links, .menu-overlay {
                height: 100vh; /* Fallback untuk browser lama */
                height: 100dvh; /* Support Modern iOS (Dynamic Viewport) */
            }

            /* 3. Membuat Scroll Modal Super Mulus di iPhone (Momentum Scrolling) */
            .modal {
                -webkit-overflow-scrolling: touch;
            }

            /* 4. Fix Efek Kaca Buram (Blur) agar aktif di Safari iOS */
            .modal {
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
            }

            /* 5. Mencegah iPhone mengubah ukuran font secara otomatis saat orientasi layar diputar */
            html {
                -webkit-text-size-adjust: 100%;
            }

            /* 6. Memastikan tombol tidak menggunakan gaya default bawaan Apple */
            button, .btn, .btn-outline-gold, .btn-wa {
                -webkit-appearance: none;
                appearance: none;
            }

        }