:root { --dark-green:#1A4314; --light-green:#A2D240; --white:#FFFFFF; --black:#000000; 
            --red:#D90429; --background-color:#f0f2f5; --font-ubuntu:'Ubuntu',sans-serif; 
            --font-noto:'Noto Sans',sans-serif; --font-lato:'Lato',sans-serif; 
            --font-opensans:'Open Sans',sans-serif; }
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body { font-family:var(--font-opensans); background-color:var(--background-color); color:var(--black); 
            display:flex; justify-content:center; align-items:flex-start; min-height:100vh; padding:20px 0; }
        .microsite-container { width:99%; max-width:999px; background-color:var(--white); 
            box-shadow:0 4px 12px rgba(0,0,0,0.1); border-radius:8px; overflow:hidden; }
        .header-background {width: 100%;aspect-ratio:1200/630;border-radius: 25px;overflow: hidden;}
        /* CSS tambahan untuk memastikan gambar di dalam slide mengisi seluruh area */
        .swiper-slide img {width:100%;height:100%;object-fit: cover;}
        /* CSS untuk mengatur warna panah navigasi (opsional) */
        .swiper-button-next, .swiper-button-prev {color:#88f784;}
        .header-background { width:100%; aspect-ratio:1200/630; background-image:url('kopatas.jpg'); 
        background-size:cover; background-position:center; border-radius:25px; }
        .profile-picture { width:199px; height:199px; border-radius:50%; overflow:hidden; border:5px solid var(--white); 
            box-shadow:0 2px 8px rgba(0,0,0,0.15); position:relative; margin:-60px auto 0; z-index:2; }
        .profile-picture img { width:100%; height:100%; object-fit:cover; }
        .profile-info { padding:20px; padding-bottom:25px; }
        .profile-info h1 { font-family:var(--font-ubuntu); font-weight:700; font-size:19px; color:var(--dark-green); 
            padding-bottom:23px; }
        .profile-info h2 { font-family:var(--font-lato); font-weight:400; font-size:17px; color:var(--black); 
            padding-bottom:21px; }
        .profile-info p { font-family:var(--font-noto); font-size:15px; color:#555; letter-spacing:1px; }
        .accordion-wrapper { padding:0 20px 20px 20px; display:flex; flex-direction:column; gap:9px; margin-bottom:90px; }
        .accordion-header { background-color:var(--dark-green); color:var(--white); border:none; border-radius:9px; 
            padding:15px; font-family:var(--font-ubuntu); font-size:16px; font-weight:500; text-align:left; 
            cursor:pointer; transition:background-color 0.3s ease, border-radius 0.3s ease; width:100%; display:flex; 
            justify-content:space-between; align-items:center; }
        .accordion-header.active, .accordion-header:hover { background-color:var(--light-green); 
            color:var(--dark-green); }
        .accordion-header.active { border-bottom-left-radius:0; border-bottom-right-radius:0; }
        .accordion-header::after { content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; 
        transition:transform 0.3s ease; }
        .accordion-header.active::after { transform:rotate(-180deg); }
        .accordion-content { background-color:#fdfdfd; overflow:hidden; max-height:0; 
            transition:max-height 0.4s ease-out, padding 0.4s ease-out; border:1px solid #e0e0e0; border-top:none; 
            border-bottom-left-radius:9px; border-bottom-right-radius:9px; }
        .accordion-content-inner { padding:20px; }
        .accordion-content h3 { font-family:var(--font-ubuntu); color:var(--dark-green); margin-bottom:15px; 
            border-left:4px solid var(--light-green); padding-left:10px; }
        .accordion-content p { font-family:var(--font-opensans); font-size:15px; line-height:1.6; margin-bottom:15px; }
        #backToTopBtn { display:none; position:fixed; bottom:20px; right:20px; z-index:99; border:none; outline:none; 
            background-color:#D90429; color:white; cursor:pointer; padding:12px; border-radius:50%; 
            font-size:18px; width:50px; height:50px; box-shadow:0 4px 8px rgba(0,0,0,0.2); 
            transition:opacity 0.3s, transform 0.3s; }
        #backToTopBtn:hover { background-color:#f89334; color:#492400; transform:scale(1.1); }
        .pacifico-text {font-family:'Pacifico',cursive;font-size:14px;}
        .copyrightfooter{background:#003003;color:#FFF;font-size:9px;font-weight:500;text-align:center;
            padding:9px;position:fixed;bottom:0;left:0;width:100%;z-index:999;margin: 0 auto;}
        .tblprofil{border-collapse:collapse;width:100%;max-width:699px;margin:auto;font-size:14px}
        .tblprofil td{padding:4px 6px;vertical-align:top}
        .tblprofil td:first-child{text-align:right;font-weight:600;width:110px}
        .tblprofil td:nth-child(2){text-align:center;width:10px}
        .tblprofil td:last-child{text-align:left}
        .profil-title{background:#003003;color:#fff;font-weight:700;text-align:center;padding:8px;border-radius:7px;
            margin-bottom:11px}
        .btn{display:inline-block;padding:10px 16px;border-radius:11px;background:#003313;color:#fff;
            text-decoration:none;font-weight:600;cursor:pointer}
                .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;justify-content:center}
        .gallery-grid a{position:relative;width:100%;padding-top:100%;overflow:hidden;border-radius:12px}
        .gallery-grid img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:12px;cursor:pointer;transition:transform 0.3s}
        .gallery-grid img:hover{transform:scale(1.05)}
        @media(min-width:1000px){.gallery-grid{grid-template-columns:repeat(6,1fr)}}
        @media(max-width:300px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}