<style>
        /* Efek Gulir Mulus */
        html {
            scroll-behavior: smooth;
        }
        
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            margin: 0; 
            padding: 0; 
            line-height: 1.6; 
            color: #333; 
            background-color: #f4f7f6; 
        }
        
        /* Navigation Bar */
        nav { 
            background-color: #004d28; 
            position: sticky; 
            top: 0; 
            z-index: 1000; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.15); 
        }
        .nav-container { 
            max-width: 1100px; 
            margin: auto; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            list-style: none; 
            padding: 0; 
        }
        .nav-menu { 
            display: flex; 
            list-style: none; 
            padding: 0; 
            margin: 0; 
            width: 100%;
        }
        .nav-menu > li { 
            position: relative; 
        }
        .nav-menu a { 
            display: block; 
            color: white; 
            padding: 18px 20px; 
            text-decoration: none; 
            font-weight: 500; 
            font-size: 14px; 
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .nav-menu a:hover { 
            background-color: #006633; 
        }
        
        /* Dropdown Menu Modern */
        .dropdown { 
            display: none; 
            position: absolute; 
            background-color: white; 
            min-width: 280px; 
            box-shadow: 0 8px 16px rgba(0,0,0,0.15); 
            list-style: none; 
            padding: 5px 0; 
            margin: 0; 
            border-top: 3px solid #005a30; 
            border-radius: 0 0 6px 6px;
        }
        .dropdown li a { 
            color: #333; 
            padding: 12px 20px; 
            font-size: 13px; 
            border-bottom: 1px solid #eee; 
        }
        .dropdown li a:hover { 
            background-color: #f4f7f6; 
            color: #005a30; 
            padding-left: 25px; /* Efek bergeser sedikit saat di-hover */
        }
        .nav-menu > li:hover .dropdown { 
            display: block; 
        }
        .arrow-down { 
            font-size: 10px; 
            margin-left: 5px; 
        }

        /* HEADER SPANDUK UTAMA */
        .header-bg-container {
    max-width: 1200px;
    margin: 20px auto;
    text-align: center;
}

.header-bg-container img {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: auto;
}
        /* Box Alert Pengumuman */
        .alert-box { 
            background-color: #fff3cd; 
            color: #856404; 
            padding: 15px 20px; 
            border-left: 6px solid #ffc107; 
            margin: 20px auto; 
            max-width: 1100px; 
            border-radius: 6px; 
            box-sizing: border-box; 
            font-size: 14px; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .container { 
            padding: 0 20px; 
            max-width: 1100px; 
            margin: auto; 
            box-sizing: border-box;
        }
        
        /* HERO FOTO GEDUNG */
        .hero-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.hero-container img {
    width: 100%;
    max-width: 1200px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    margin: auto;
    border-radius: 15px;
}

        /* Kotak Konten Utama */
        .intro-box { 
            background: white; 
            padding: 30px; 
            border-radius: 12px; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
            margin-bottom: 30px; 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-sizing: border-box;
        }
        .intro-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.05);
        }
        .intro-box h2 { 
            margin-top: 0; 
            color: #005a30; 
            border-bottom: 2px solid #f0f0f0; 
            padding-bottom: 12px; 
            font-size: 22px; 
        }
        
        /* VISI MISI STYLES */
        .vm-section { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 25px; 
        }
        .vm-box { 
            background: #fafafa; 
            padding: 25px; 
            border-radius: 8px; 
            border-left: 4px solid #005a30; 
            box-shadow: inset 0 0 10px rgba(0,0,0,0.01);
        }
        .vm-box h3 { 
            margin-top: 0; 
            color: #005a30; 
            font-size: 18px; 
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .visi-text { 
            font-style: italic; 
            font-weight: 600; 
            color: #222; 
            font-size: 15px; 
            line-height: 1.8; 
        }
        .misi-list { 
            padding-left: 20px; 
            margin: 0; 
        }
        .misi-list li { 
            margin-bottom: 10px; 
            font-size: 14px; 
            color: #444;
        }

        /* DIAGRAM INFOGRAFIS */
        .diagram-container {
    max-width: 1200px;
    margin: 30px auto;
    text-align: center;
}

.diagram-container img {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: auto;
}

        /* ALUR PELAYANAN GRID */
        .alur-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 20px; 
            margin-top: 20px; 
        }
        .alur-card { 
            background: #f9f9f9; 
            padding: 20px; 
            border-radius: 8px; 
            border-top: 4px solid #ffc107; 
            font-size: 13px; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
            transition: all 0.3s ease;
        }
        .alur-card:hover {
            background: #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            border-top-color: #005a30;
        }
        .alur-card h5 { 
            margin: 0 0 8px 0; 
            color: #005a30; 
            font-size: 15px; 
            text-transform: uppercase; 
        }

        /* Grid Fitur Layanan */
        .services-grid { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 20px; 
            margin-top: 20px; 
        }
        .service-card { 
            background: #fafafa; 
            padding: 22px; 
            border-radius: 8px; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
            border-top: 4px solid #005a30; 
            font-size: 13.5px; 
            transition: all 0.3s ease;
        }
        .service-card:hover {
            background: #ffffff;
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }
        .service-card h4 { 
            margin-top: 0; 
            color: #005a30; 
            font-size: 16px; 
            display: flex; 
            align-items: center; 
            gap: 10px; 
            margin-bottom: 12px; 
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }
        .badge { 
            background: #005a30; 
            color: white; 
            padding: 2px 8px; 
            border-radius: 50%; 
            font-size: 12px; 
            font-weight: bold;
        }
        .service-card ul {
            margin: 8px 0 0 0;
            padding-left: 18px;
            color: #555;
        }
        .service-card li {
            margin-bottom: 4px;
        }

        /* Maps Container */
        .maps-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* rasio 16:9 */
    position: relative;
    height: 0;
    margin-top: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.maps-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

        /* SOSIAL MEDIA & KONTAK FOOTER */
        .btn-whatsapp { 
            display: inline-block; 
            background-color: #25D366; 
            color: white; 
            padding: 12px 25px; 
            text-decoration: none; 
            font-weight: bold; 
            border-radius: 6px; 
            margin-top: 15px; 
            font-size: 15px; 
            box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
            transition: all 0.3s ease;
        }
        .btn-whatsapp:hover {
            background-color: #20ba56;
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(37, 211, 102, 0.4);
        }
        .social-media-bar { 
            background: #004d28; 
            padding: 20px; 
            text-align: center; 
            border-radius: 8px; 
            margin-top: 25px; 
        }
        .social-media-bar p { 
            margin: 0 0 15px 0; 
            color: white; 
            font-weight: bold; 
            font-size: 14px; 
            letter-spacing: 0.5px;
        }
        .sm-link { 
            display: inline-block; 
            margin: 6px 8px; 
            padding: 8px 18px; 
            border-radius: 20px; 
            text-decoration: none; 
            color: white; 
            font-weight: 500; 
            font-size: 13px; 
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        .sm-link:hover {
            transform: scale(1.05);
            opacity: 0.9;
        }
        .sm-tiktok { background-color: #010101; }
        .sm-instagram { background-color: #e1306c; }
        .sm-facebook { background-color: #3b5998; }
        .sm-youtube { background-color: #ff0000; }

        footer { 
            background: #1a1a1a; 
            color: white; 
            text-align: center; 
            padding: 40px 20px; 
            margin-top: 50px; 
            font-size: 13px; 
            line-height: 1.8; 
        }
        .footer-address { 
            color: #ccc; 
            max-width: 750px; 
            margin: 10px auto 25px auto; 
            border-bottom: 1px solid #333; 
            padding-bottom: 20px; 
        }
        .footer-logos {
    text-align: center;
    padding: 20px;
}

.footer-logos img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: auto;
}

        /* =======================================================
           ATURAN RESPONSIVE (OPTIMALISASI SMARTPHONE & TABLET)
           ======================================================= */
        @media (max-width: 900px) {
            .services-grid {
                grid-template-columns: 1fr; /* Grid layanan jadi 1 kolom di tablet/HP */
            }
            .alur-grid {
                grid-template-columns: repeat(2, 1fr); /* Grid alur jadi 2 kolom di tablet */
            }
            .vm-section {
                grid-template-columns: 1fr; /* Visi misi bertumpuk vertikal */
            }
            .maps-responsive {
                padding-bottom: 60%; /* Map sedikit lebih tinggi di layar sedang */
            }
        }

        @media (max-width: 600px) {
            .nav-container {
                flex-direction: column;
            }
            .nav-menu {
                flex-direction: column;
                width: 100%;
            }
            .nav-menu > li {
                text-align: center;
                border-bottom: 1px solid #005a30;
                width: 100%;
            }
            .nav-menu a {
                padding: 12px;
            }
            .dropdown {
                position: static;
                width: 100%;
                box-shadow: none;
                border-radius: 0;
                background-color: #003d20;
            }
            .dropdown li a {
                color: #ddd;
                border-bottom: 1px solid #004d28;
            }
            .dropdown li a:hover {
                background-color: #004d28;
                color: #fff;
            }
            .alur-grid {
                grid-template-columns: 1fr; /* Alur pelayanan jadi 1 kolom penuh di HP */
            }
            .intro-box {
                padding: 20px; /* Jarak padding box menyusut di HP agar luas */
            }
            .hero-tag {
                font-size: 12px;
                bottom: 10px;
                left: 10px;
                padding: 8px 14px;
            }
            .maps-responsive {
                padding-bottom: 75%; /* Map proporsional kotak di layar HP */
            }
        }
    </style>