:root {
            --primary-blue: #0056b3;
            --light-blue: #00a8ff;
            --dark-navy: #0a192f;
            --accent-orange: #ff9800;
            --white: #ffffff;
            --gray-light: #f4f7f6;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        body { background-color: var(--white); color: #333; line-height: 1.6; }

        /* Navbar */
        nav { background: var(--white); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .logo { font-weight: 700; color: var(--primary-blue); font-size: 1.5rem; text-decoration: none;}
        .nav-links { list-style: none; display: flex; }
        .nav-links li { margin-left: 25px; }
        .nav-links a { text-decoration: none; color: var(--dark-navy); font-weight: 500; transition: 0.3s; }
        .nav-links a:hover { color: var(--light-blue); }

        /* Hero Kota */
        .hero { background: linear-gradient(135deg, var(--dark-navy), var(--primary-blue)); padding: 100px 5% 80px; display: flex; align-items: center; justify-content: space-between; color: var(--white); min-height: 70vh; }
        .hero-text { flex: 1; max-width: 650px; }
        .hero-text h1 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 20px; font-weight: 600; }
        .highlight-kota { display: block; font-size: 4rem; font-weight: 900; color: var(--accent-orange); text-transform: uppercase; text-shadow: 2px 4px 10px rgba(0,0,0,0.4); margin-top: 10px; letter-spacing: 2px; }
        .hero-text p { font-size: 1.1rem; margin-bottom: 30px; opacity: 0.9; }
        .hero-image { flex: 1; text-align: right; }
        .hero-image img { max-width: 100%; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); }
        
        .cta-buttons { display: flex; gap: 15px; }
        .btn { padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: 0.3s; }
        .btn-whatsapp { background: #25d366; color: white; }
        .btn-phone { background: var(--accent-orange); color: white; }
        .btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

        /* Layanan Outline Style */
        .layanan-kota { padding: 60px 5%; text-align: center; background: #fcfcfc; }
        .section-title { margin-bottom: 10px; font-size: 2rem; color: var(--dark-navy); }
        .layanan-grid-outline { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; margin: 40px auto 0; }
        .service-card-outline { background: var(--white); padding: 30px 20px; border: 1px solid #dcdde1; border-radius: 12px; transition: 0.3s; }
        .service-card-outline:hover { border-color: var(--light-blue); box-shadow: 0 4px 15px rgba(0, 168, 255, 0.1); }
        .service-card-outline i { font-size: 2.5rem; color: var(--light-blue); margin-bottom: 15px; }
        .service-card-outline h3 { color: var(--primary-blue); font-size: 1.2rem; margin-bottom: 15px; }
        .service-card-outline p { font-size: 0.95rem; color: #666; margin-bottom: 20px; }
        .link-pesan { color: var(--primary-blue); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
        .link-pesan:hover { text-decoration: underline; }

        /* Area Kecamatan */
        .area-kecamatan { padding: 50px 5%; text-align: center; background: #f4f7f6; }
        .kecamatan-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 30px auto; }
        .kecamatan-btn { background: var(--white); border: 1px solid #e1e1e1; padding: 8px 15px; border-radius: 5px; font-size: 0.85rem; color: #333; display: flex; align-items: center; gap: 8px; }
        .kecamatan-btn i { color: #e74c3c; }

        /* Map */
        .map-container { max-width: 900px; margin: 0 auto 50px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .map-container iframe { width: 100%; height: 400px; border: none; display: block; }

        /* FAQ Outline */
        .faq-outline { padding: 80px 5%; max-width: 800px; margin: 0 auto; }
        .faq-outline .accordion-item { border: none; border-left: 4px solid var(--primary-blue); background: #fcfcfc; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); border-radius: 4px; overflow: hidden; }
        .accordion-header { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--dark-navy); }
        .accordion-header i { color: var(--light-blue); transition: 0.3s; }
        .accordion-content { padding: 0 20px; max-height: 0; overflow: hidden; transition: 0.3s ease-out; }
        
        /* Footer */
        footer { background: var(--dark-navy); color: var(--white); padding: 50px 5% 20px; text-align: center; }
        .footer-content { margin-bottom: 30px; }
        .copyright { font-size: 0.8rem; opacity: 0.6; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }

        @media (max-width: 768px) {
            .hero { flex-direction: column; text-align: center; padding-top: 60px; }
            .hero-text h1 { font-size: 1.8rem; }
            .highlight-kota { font-size: 2.8rem; }
            .hero-image { margin-top: 40px; }
            .cta-buttons { justify-content: center; flex-direction: column; }
            .nav-links { display: none; }
        }