feat: tambah documentation.html

README.md

@@ -0,0 +1,117 @@
+# EduKarsa — Tema WordPress Native Sekolah & Perguruan Tinggi
+
+EduKarsa adalah tema WordPress institusional yang dibangun dengan arsitektur **100% Native & Zero Plugin**. Didesain khusus untuk portal sekolah, madrasah, pesantren, dan perguruan tinggi dengan mengutamakan performa, keamanan ketat, serta aksesibilitas ramah disabilitas.
+
+- **Demo Situs**: https://edukarsa.masbudi.my.id
+- **Portal Aplikasi**: https://apps.masbudi.my.id/edukarsa
+- **Dukungan & Donasi**: https://donate.masbudi.my.id/edukarsa
+- **Pengembang**: Mas Budi Kusuma (masbudikusuma@gmail.com — https://masbudi.my.id)
+
+---
+
+## Pilar Arsitektur
+
+1. **Zero Plugin Dependency**: Berjalan optimal tanpa ketergantungan plugin pihak ketiga (tanpa ACF, Elementor, atau plugin galeri).
+2. **Modular Architecture (`inc/`)**: Berkas `functions.php` berfungsi murni sebagai pemanggil (*router*). Seluruh fungsionalitas diisolasi ke dalam sub-berkas direktori `inc/`.
+3. **Hardened Security Native**:
+   - Pengecekan eksekusi langsung via `defined('ABSPATH') || exit;`.
+   - Injeksi HTTP *security headers* native (`X-Frame-Options`, `X-Content-Type-Options`, `Referrer-Policy`).
+   - Penonaktifan *author enumeration* (`?author=N`) dan proteksi rute REST API `/wp/v2/users` untuk pengguna anonim.
+   - Sanitasi data ketat di seluruh antarmuka Settings API.
+4. **WCAG 2.1 Accessibility**: Widget aksesibilitas bawaan dengan Web Speech API (suara baca audio), pengubah ukuran teks, kontras tinggi, mode monokrom, dan sorotan tautan.
+5. **Multilingual Terpadu**: Penerjemah instan sisi depan (ID, EN, AR, ZH, JA) serta panel admin dwibahasa (ID/EN).
+6. **SEO & Structured Data**: Skema data terstruktur JSON-LD `EducationalOrganization` dan `NewsArticle` native untuk visibilitas mesin pencari.
+
+---
+
+## Modul & Fitur Utama
+
+### 1. Tata Letak Beranda (Native Section Builder)
+- Pengaturan urutan seksi secara visual (*drag-and-drop*) berbasis jQuery UI Sortable bawaan WordPress.
+- Loop rendering berbasis daftar putih (*whitelist array*) untuk mencegah celah LFI.
+- Slider layar penuh terkunci di posisi teratas dengan dukungan custom link per slide.
+- Kartu statistik melayang dengan penyesuaian margin dinamis.
+- Sambutan pimpinan institusi dengan rasio potret 3:4.
+- Rekam jejak capaian (Milestones) anti-celah kosong.
+- Tiga program unggulan terhubung ke template detail `single-program.php`.
+- Video profil ganda berlatar efek parallax.
+- Sembilan poin keunggulan bernomor otomatis dua digit.
+- Banner pendaftaran (CTA PPDB/PMB) kontras tinggi.
+- Warta berita terbaru dan akordeon tanya-jawab (FAQ) interaktif.
+
+### 2. Galeri Fasilitas & Lightbox (`page-galeri.php`)
+- Custom Post Type `galeri` terintegrasi dengan taksonomi `kategori_galeri`.
+- Tombol penyaring kategori beranimasi halus via JavaScript murni.
+- Lightbox popup native dengan kontrol zoom, navigasi geser, deskripsi foto, dan dukungan tombol keyboard (Esc, Panah Kiri/Kanan).
+
+### 3. Pop-up Flyer Promosi (`inc/popup.php`)
+- Modal dialog promosi PMB/pengumuman penting dengan pengatur waktu tunda (*delay*).
+- Mekanisme penyimpanan sesi (`sessionStorage`) agar tidak berulang kali memblokir layar pengguna.
+- Opsi pembatasan hanya di beranda serta parameter pratinjau `?preview_popup=1`.
+
+### 4. Navigasi, Sidebar, & Footer
+- Dropdown menu bertingkat bebas tanda butir (*bullet*).
+- Sidebar dinamis: form pencarian, mini CTA, daftar berita terkini, arsip kategori, poster gambar, dan kotak HTML kustom.
+- Navigasi paginasi ganda (antar-halaman dan intra-artikel) serta tombol berbagi media sosial native.
+- Footer 4 kolom: profil institusi, jam layanan kantor multi-baris, kontak resmi, lencana akreditasi, tombol WhatsApp melayang dinamis, dan atribusi pengembang.
+
+---
+
+## Rekomendasi Dimensi Aset
+
+| Aset Media | Rekomendasi Dimensi | Rasio Aspek | Format Ideal |
+| :--- | :--- | :--- | :--- |
+| **Logo Header** | Lebar proporsional, tinggi 110 px | Fleksibel | PNG Transparan / WebP |
+| **Slider Banner** | 1920 × 1080 px atau 1920 × 800 px | 16:9 / Lebar | JPG / WebP (< 300 KB) |
+| **Foto Pimpinan** | 600 × 800 px atau 800 × 1067 px | 3:4 (Potret) | JPG / WebP |
+| **Latar Parallax** | 1920 × 1080 px | 16:9 Lanskap | JPG / WebP |
+| **Flyer Pop-up** | Minimal 800 × 800 px | 1:1 / 4:5 | JPG / WebP (< 250 KB) |
+| **Poster Sidebar** | Lebar 600 px (tinggi bebas) | Vertikal | JPG / WebP |
+| **Galeri Kampus** | 1200 × 900 px | 4:3 Lanskap | JPG / WebP |
+
+---
+
+## Struktur Direktori
+
+    edukarsa/
+    ├── 404.php
+    ├── footer.php
+    ├── front-page.php
+    ├── functions.php
+    ├── header.php
+    ├── inc/
+    │   ├── admin-menu.php
+    │   ├── cpt-slider.php
+    │   ├── i18n.php
+    │   ├── popup.php
+    │   ├── security.php
+    │   ├── seo.php
+    │   └── setup.php
+    ├── index.php
+    ├── page-galeri.php
+    ├── page.php
+    ├── README.md
+    ├── sidebar.php
+    ├── single-program.php
+    ├── single.php
+    └── style.css
+
+---
+
+## Petunjuk Penggunaan
+
+1. **Pengaturan Identitas**: Masuk ke **EduKarsa > ⚙️ Pengaturan Utama** untuk konfigurasi logo, warna tema, font, profil, kontak, dan footer.
+2. **Menyusun Halaman Utama**: Buka **EduKarsa > 🏗️ Tata Letak** untuk mengatur urutan seksi secara drag-and-drop, lalu simpan perubahan.
+3. **Membuat Halaman Galeri**:
+   - Tambahkan dokumentasi pada **EduKarsa > 📸 Galeri Fasilitas** dan tandai kategorinya.
+   - Buat laman baru (**Laman > Tambah Baru**), pilih template **Galeri & Fasilitas** di panel atribut laman, lalu terbitkan.
+4. **Mengaktifkan Pop-up Flyer**:
+   - Buka panel **🪟 8. Pop-up Flyer & Pengumuman** di Pengaturan Utama.
+   - Aktifkan sakelar, unggah berkas flyer, isi tautan tujuan pendaftaran, lalu simpan.
+
+---
+
+## Lisensi & Hak Cipta
+
+Dirancang dan dikembangkan oleh **Mas Budi Kusuma** ([masbudi.my.id](https://masbudi.my.id)).
+Didistribusikan di bawah naungan lisensi **GNU General Public License v2** atau yang lebih baru.

footer.php

@@ -127,11 +127,13 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
 
         </div>
 
-        <!-- COPYRIGHT BAR -->
+        <!-- COPYRIGHT BAR DENGAN WATERMARK KREATOR -->
         <div class="footer-bottom-bar">
             <div class="container footer-bottom-inner">
                 <p class="copyright-text">
                     &copy; <?php echo date( 'Y' ); ?> <?php echo esc_html( get_option( 'edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.' ) ); ?>
+                    <span style="opacity: 0.5; margin: 0 6px;">&bull;</span>
+                    <span>Tema <a href="https://apps.masbudi.my.id/edukarsa" target="_blank" rel="noopener" style="color: #f39c12; font-weight: 700; text-decoration: none;">EduKarsa</a> oleh <a href="https://masbudi.my.id" target="_blank" rel="noopener" style="color: #ffffff; text-decoration: underline;">masbudi.my.id</a></span>
                 </p>
                 <div class="footer-bottom-badge">
                     <span>Terakreditasi BAN-PT &bull; Kampus Merdeka</span>
@@ -153,7 +155,6 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
                 <button type="button" class="a11y-close-btn" id="a11y-close">&times;</button>
             </div>
             <div class="a11y-panel-body">
-                <!-- Fitur Pembaca Suara -->
                 <div class="a11y-group">
                     <span class="a11y-label">Pembaca Suara (Audio)</span>
                     <div class="a11y-btn-grid">
@@ -204,7 +205,6 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
 
     <script>
     document.addEventListener("DOMContentLoaded", function() {
-        // 1. Mobile Menu Drawer
         const toggleBtn = document.getElementById("mobile-menu-toggle");
         const navMenu   = document.getElementById("site-navigation");
         if (toggleBtn && navMenu) {
@@ -214,7 +214,6 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
             });
         }
 
-        // 2. Back to Top
         const bttBtn = document.getElementById("back-to-top");
         if (bttBtn) {
             window.addEventListener("scroll", function() {
@@ -225,7 +224,6 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
             });
         }
 
-        // 3. Aksesibilitas Disabilitas Logic (Persistent via localStorage)
         const a11yTrigger = document.getElementById("a11y-trigger");
         const a11yPanel   = document.getElementById("a11y-panel");
         const a11yClose   = document.getElementById("a11y-close");
@@ -322,7 +320,6 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
                 }
             });
 
-            // 4. Fitur Suara Text-to-Speech (Web Speech API Native)
             const speakPlayBtn = document.getElementById("a11y-speak-play");
             const speakStopBtn = document.getElementById("a11y-speak-stop");
 
@@ -334,14 +331,12 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
                         synth.cancel();
                     }
 
-                    // Ambil konten teks utama artikel atau bodi halaman
                     const contentEl = document.querySelector("article .entry-content") || document.getElementById("primary") || document.body;
                     const textToRead = contentEl.innerText.replace(/\s+/g, ' ').trim();
                     if (!textToRead) return;
 
                     const utterance = new SpeechSynthesisUtterance(textToRead);
 
-                    // Deteksi bahasa yang sedang aktif
                     const match = document.cookie.match(/googtrans=\/id\/([a-zA-Z\-]+)/i);
                     const activeLang = match ? match[1].toLowerCase() : 'id';
 
@@ -353,7 +348,7 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
                         utterance.lang = 'id-ID';
                     }
 
-                    utterance.rate = 0.95; // Kecepatan baca ideal untuk artikulasi jelas
+                    utterance.rate = 0.95;
 
                     utterance.onstart = function() {
                         speakPlayBtn.classList.add('speaking');

front-page.php

@@ -3,7 +3,9 @@
 
 <main id="primary" class="site-main edukarsa-home">
 
-    <!-- 1. SLIDER -->
+    <!-- ==========================================
+         1. SLIDER (TERKUNCI DI PALING ATAS)
+    =========================================== -->
     <?php if ( get_option('edukarsa_tampil_slider', 1) == 1 ) : ?>
     <section class="edukarsa-section edukarsa-hero-slider" style="padding: 0;">
         <div class="slider-container" id="hero-slider-container">
@@ -33,321 +35,372 @@
     </section>
     <?php endif; ?>
 
-    <!-- 2. STATISTIK DESAIN KARTU MELAYANG -->
+    <!-- ==========================================
-    <?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
+         2. ENGINE BUILDER NATIVE (DRAG & DROP)
-    <section class="edukarsa-stats">
+    =========================================== -->
-        <div class="container stats-grid">
+    <?php
-            <?php for($i=1; $i<=3; $i++) : ?>
+    // Urutan Bawaan
-            <div class="stat-item card-style stat-card-modern">
+    $default_layout = array('stats','about','milestone','program','video','keunggulan','cta','news','faq');
-                <div class="stat-icon-wrapper">
+    
-                    <?php $icon = get_option('edukarsa_stat'.$i.'_icon'); ?>
+    // Ambil Data Urutan dari Database
-                    <?php if($icon) : ?>
+    $layout_option = get_option('edukarsa_homepage_layout', implode(',', $default_layout));
-                        <img src="<?php echo esc_url($icon); ?>" alt="Icon">
+    if (empty($layout_option)) $layout_option = implode(',', $default_layout);
-                    <?php else: ?>
+    
-                        <span>🏫</span>
+    $sections = explode(',', $layout_option);
-                    <?php endif; ?>
+    
-                </div>
+    // Konfigurasi Latar Parallax Global
-                <h3 class="stat-number"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_angka', '00') ); ?></h3>
-                <h4 class="stat-title"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_label', 'Judul Statistik') ); ?></h4>
-                <p class="stat-desc"><?php echo nl2br(esc_html( get_option('edukarsa_stat'.$i.'_desc', 'Deskripsi singkat') )); ?></p>
-            </div>
-            <?php endfor; ?>
-        </div>
-    </section>
-    <?php endif; ?>
-
-    <!-- 3. ABOUT US / SAMBUTAN -->
-    <?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?>
-    <section class="edukarsa-section edukarsa-sambutan">
-        <div class="container sambutan-grid">
-            <div class="sambutan-image-wrapper">
-                <div class="img-wrapper-portrait">
-                    <?php $foto = get_option('edukarsa_foto_kepsek'); ?>
-                    <?php if(!empty($foto)) : ?>
-                        <img src="<?php echo esc_url($foto); ?>" alt="Kepala Sekolah">
-                    <?php else : ?>
-                        <div class="img-placeholder"><i>👤</i><span>Upload Foto Kepala Sekolah</span></div>
-                    <?php endif; ?>
-                </div>
-            </div>
-            <div class="sambutan-content">
-                <span class="badge-title">ABOUT US</span>
-                <h2 class="section-title" style="margin-bottom: 6px;"><?php echo esc_html( get_option('edukarsa_nama_kepsek', 'Nama Kepala Sekolah') ); ?></h2>
-                <h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:18px; font-size:17px; font-weight:700;"><?php echo esc_html( get_option('edukarsa_subtitle_about', 'Pimpinan Institusi') ); ?></h4>
-                <div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
-                <a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary" style="margin-top: 5px;">Ketahui Lebih Lanjut</a>
-            </div>
-        </div>
-    </section>
-    <?php endif; ?>
-
-    <!-- 4. MILESTONES -->
-    <?php 
-    if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : 
-        $query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
-        if ( $query_milestone->have_posts() ) :
-            $m_sub   = get_option( 'edukarsa_milestone_subtitle', 'REKAM JEJAK' );
-            $m_title = get_option( 'edukarsa_milestone_title', 'Milestone & Prestasi' );
-    ?>
-    <section class="edukarsa-section edukarsa-milestones bg-light-blue" style="padding: 50px 0;">
-        <div class="container">
-            <?php if ( ! empty( $m_title ) ) : ?>
-            <div class="section-header text-center" style="margin-bottom: 30px;">
-                <?php if ( ! empty( $m_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $m_sub ); ?></span><?php endif; ?>
-                <h2 class="section-title"><?php echo esc_html( $m_title ); ?></h2>
-                <hr class="title-underline">
-            </div>
-            <?php endif; ?>
-            
-            <div class="milestone-grid text-center">
-                <?php
-                while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
-                    ?>
-                    <div class="milestone-item card-style" style="padding: 25px 20px;">
-                        <h3 class="milestone-title" style="color: var(--primary-color); font-size: 34px; font-weight: 800; margin-bottom: 6px; line-height: 1;">
-                            <?php the_title(); ?>
-                        </h3>
-                        <div class="milestone-desc" style="font-size: 13px; color: var(--text-muted); line-height: 1.5;">
-                            <?php the_excerpt(); ?>
-                        </div>
-                    </div>
-                    <?php
-                endwhile;
-                wp_reset_postdata();
-                ?>
-            </div>
-        </div>
-    </section>
-    <?php 
-        endif; 
-    endif; 
-    ?>
-
-    <!-- 5. PROGRAM UNGGULAN -->
-    <?php 
-    if ( get_option('edukarsa_tampil_program', 1) == 1 ) : 
-        $prog_sub   = get_option( 'edukarsa_program_subtitle', 'AKADEMIK & KARAKTER' );
-        $prog_title = get_option( 'edukarsa_program_title', 'Our Program' );
-    ?>
-    <section class="edukarsa-section edukarsa-programs">
-        <div class="container">
-            <div class="section-header text-center">
-                <?php if ( ! empty( $prog_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $prog_sub ); ?></span><?php endif; ?>
-                <h2 class="section-title"><?php echo esc_html( $prog_title ); ?></h2>
-                <hr class="title-underline">
-            </div>
-            <div class="program-grid">
-                <?php
-                $query_program = new WP_Query( array( 'post_type' => 'program', 'posts_per_page' => 3 ) );
-                if ( $query_program->have_posts() ) :
-                    while ( $query_program->have_posts() ) : $query_program->the_post();
-                        ?>
-                        <div class="program-card card-style text-center top-border-blue">
-                            <div class="img-wrapper-landscape" style="margin-bottom: 18px;">
-                                <?php if ( has_post_thumbnail() ) : ?>
-                                    <?php the_post_thumbnail( 'medium' ); ?>
-                                <?php else: ?>
-                                    <div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
-                                <?php endif; ?>
-                            </div>
-                            <h3 style="margin-bottom: 10px; font-size: 19px; color: var(--heading-color); font-weight: 700;">
-                                <?php the_title(); ?>
-                            </h3>
-                            <div class="program-desc" style="margin-bottom: 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6;">
-                                <?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?>
-                            </div>
-                            <a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
-                        </div>
-                        <?php
-                    endwhile;
-                    wp_reset_postdata();
-                endif;
-                ?>
-            </div>
-        </div>
-    </section>
-    <?php endif; ?>
-
-    <!-- 6 & 7. WRAPPER PARALLAX -->
-    <?php 
     $mid_bg = get_option('edukarsa_mid_bg_image'); 
     $parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background: linear-gradient(135deg, var(--primary-color), var(--heading-color));';
-    ?>
+
-    <div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
+    // RENDER LOOP BERDASARKAN URUTAN ARRAY
-        <div class="parallax-overlay"></div>
+    foreach ( $sections as $index => $section ) {
-        <div class="parallax-content relative-z2">
+        $section = trim($section);
+        
+        switch ( $section ) {
             
-            <!-- 6. VIDEO -->
+            // --- SEKSI STATISTIK ---
-            <?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
+            case 'stats':
-            <section class="edukarsa-section edukarsa-videos" style="padding-bottom: 30px;">
+                if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : 
-                <div class="container video-grid">
+                    // Jika urutan pertama, berikan efek melayang (overlap slider)
-                    <?php for($i=1; $i<=2; $i++) : ?>
+                    $is_first = ($index === 0);
-                    <div class="video-item">
+                    $margin_style = $is_first ? 'margin-top: -80px;' : 'margin-top: 50px;';
-                        <?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
+                ?>
-                        <a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
+                <section class="edukarsa-stats">
-                            <div class="img-wrapper-video">
+                    <div class="container stats-grid" style="<?php echo $margin_style; ?>">
-                                <?php if($vid_thumb) : ?>
+                        <?php for($i=1; $i<=3; $i++) : ?>
-                                    <img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
+                        <div class="stat-item card-style stat-card-modern">
+                            <div class="stat-icon-wrapper">
+                                <?php $icon = get_option('edukarsa_stat'.$i.'_icon'); ?>
+                                <?php if($icon) : ?>
+                                    <img src="<?php echo esc_url($icon); ?>" alt="Icon">
                                 <?php else: ?>
-                                    <div class="img-placeholder" style="background:#1e293b; color:#cbd5e1; border:none;"><i>▶️</i><span>Upload Thumbnail Video <?php echo $i; ?></span></div>
+                                    <span>🏫</span>
                                 <?php endif; ?>
                             </div>
-                            <?php if($vid_thumb) echo '<div class="play-btn">▶</div>'; ?>
+                            <h3 class="stat-number"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_angka', '00') ); ?></h3>
-                        </a>
+                            <h4 class="stat-title"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_label', 'Judul Statistik') ); ?></h4>
+                            <p class="stat-desc"><?php echo nl2br(esc_html( get_option('edukarsa_stat'.$i.'_desc', 'Deskripsi singkat') )); ?></p>
+                        </div>
+                        <?php endfor; ?>
                     </div>
-                    <?php endfor; ?>
+                </section>
-                </div>
+                <?php 
-            </section>
+                endif; 
-            <?php endif; ?>
+                break;
 
-            <!-- 7. KEUNGGULAN DINAMIS -->
+            // --- SEKSI TENTANG KAMI / SAMBUTAN ---
-            <?php 
+            case 'about':
-            if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : 
+                if ( get_option('edukarsa_tampil_about', 1) == 1 ) : 
-                $k_sub   = get_option( 'edukarsa_keunggulan_subtitle', 'WHY CHOOSE US' );
+                ?>
-                $k_title = get_option( 'edukarsa_keunggulan_title', 'Keunggulan Program' );
+                <section class="edukarsa-section edukarsa-sambutan">
-            ?>
+                    <div class="container sambutan-grid">
-            <section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 20px; padding-bottom: 80px;">
+                        <div class="sambutan-image-wrapper">
-                <div class="container">
+                            <div class="img-wrapper-portrait">
-                    <div class="section-header text-center">
+                                <?php $foto = get_option('edukarsa_foto_kepsek'); ?>
-                        <?php if ( ! empty( $k_sub ) ) : ?><span class="badge-title text-white"><?php echo esc_html( $k_sub ); ?></span><?php endif; ?>
+                                <?php if(!empty($foto)) : ?>
-                        <h2 class="section-title text-white"><?php echo esc_html( $k_title ); ?></h2>
+                                    <img src="<?php echo esc_url($foto); ?>" alt="Kepala Sekolah">
+                                <?php else : ?>
+                                    <div class="img-placeholder"><i>👤</i><span>Upload Foto Kepala Sekolah</span></div>
+                                <?php endif; ?>
+                            </div>
+                        </div>
+                        <div class="sambutan-content">
+                            <span class="badge-title">ABOUT US</span>
+                            <h2 class="section-title" style="margin-bottom: 6px;"><?php echo esc_html( get_option('edukarsa_nama_kepsek', 'Nama Kepala Sekolah') ); ?></h2>
+                            <h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:18px; font-size:17px; font-weight:700;"><?php echo esc_html( get_option('edukarsa_subtitle_about', 'Pimpinan Institusi') ); ?></h4>
+                            <div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
+                            <a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary" style="margin-top: 5px;">Ketahui Lebih Lanjut</a>
+                        </div>
                     </div>
-                    <div class="keunggulan-grid">
+                </section>
-                        <?php
+                <?php 
-                        $query_keunggulan = new WP_Query( array( 'post_type' => 'keunggulan', 'posts_per_page' => 9 ) );
+                endif; 
-                        if ( $query_keunggulan->have_posts() ) :
+                break;
-                            $nomor = 1;
+
-                            while ( $query_keunggulan->have_posts() ) : $query_keunggulan->the_post();
+            // --- SEKSI MILESTONE ---
+            case 'milestone':
+                if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : 
+                    $query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
+                    if ( $query_milestone->have_posts() ) :
+                        $m_sub   = get_option( 'edukarsa_milestone_subtitle', 'REKAM JEJAK' );
+                        $m_title = get_option( 'edukarsa_milestone_title', 'Milestone & Prestasi' );
+                ?>
+                <section class="edukarsa-section edukarsa-milestones bg-light-blue" style="padding: 50px 0;">
+                    <div class="container">
+                        <?php if ( ! empty( $m_title ) ) : ?>
+                        <div class="section-header text-center" style="margin-bottom: 30px;">
+                            <?php if ( ! empty( $m_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $m_sub ); ?></span><?php endif; ?>
+                            <h2 class="section-title"><?php echo esc_html( $m_title ); ?></h2>
+                            <hr class="title-underline">
+                        </div>
+                        <?php endif; ?>
+                        
+                        <div class="milestone-grid text-center">
+                            <?php
+                            while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
                                 ?>
-                                <div class="keunggulan-card card-style">
+                                <div class="milestone-item card-style" style="padding: 25px 20px;">
-                                    <div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
+                                    <h3 class="milestone-title" style="color: var(--primary-color); font-size: 34px; font-weight: 800; margin-bottom: 6px; line-height: 1;">
-                                    <div class="keunggulan-content-inner">
+                                        <?php the_title(); ?>
-                                        <h4><?php the_title(); ?></h4>
+                                    </h3>
-                                        <div style="font-size: 14px; color: var(--text-muted); line-height: 1.6;">
+                                    <div class="milestone-desc" style="font-size: 13px; color: var(--text-muted); line-height: 1.5;">
-                                            <?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
+                                        <?php the_excerpt(); ?>
+                                    </div>
+                                </div>
+                                <?php
+                            endwhile;
+                            wp_reset_postdata();
+                            ?>
+                        </div>
+                    </div>
+                </section>
+                <?php 
+                    endif; 
+                endif; 
+                break;
+
+            // --- SEKSI PROGRAM UNGGULAN ---
+            case 'program':
+                if ( get_option('edukarsa_tampil_program', 1) == 1 ) : 
+                    $prog_sub   = get_option( 'edukarsa_program_subtitle', 'AKADEMIK & KARAKTER' );
+                    $prog_title = get_option( 'edukarsa_program_title', 'Our Program' );
+                ?>
+                <section class="edukarsa-section edukarsa-programs">
+                    <div class="container">
+                        <div class="section-header text-center">
+                            <?php if ( ! empty( $prog_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $prog_sub ); ?></span><?php endif; ?>
+                            <h2 class="section-title"><?php echo esc_html( $prog_title ); ?></h2>
+                            <hr class="title-underline">
+                        </div>
+                        <div class="program-grid">
+                            <?php
+                            $query_program = new WP_Query( array( 'post_type' => 'program', 'posts_per_page' => 3 ) );
+                            if ( $query_program->have_posts() ) :
+                                while ( $query_program->have_posts() ) : $query_program->the_post();
+                                    ?>
+                                    <div class="program-card card-style text-center top-border-blue">
+                                        <div class="img-wrapper-landscape" style="margin-bottom: 18px;">
+                                            <?php if ( has_post_thumbnail() ) : ?>
+                                                <?php the_post_thumbnail( 'medium' ); ?>
+                                            <?php else: ?>
+                                                <div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
+                                            <?php endif; ?>
+                                        </div>
+                                        <h3 style="margin-bottom: 10px; font-size: 19px; color: var(--heading-color); font-weight: 700;">
+                                            <?php the_title(); ?>
+                                        </h3>
+                                        <div class="program-desc" style="margin-bottom: 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6;">
+                                            <?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?>
+                                        </div>
+                                        <a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
+                                    </div>
+                                    <?php
+                                endwhile;
+                                wp_reset_postdata();
+                            endif;
+                            ?>
+                        </div>
+                    </div>
+                </section>
+                <?php 
+                endif; 
+                break;
+
+            // --- SEKSI VIDEO ---
+            case 'video':
+                if ( get_option('edukarsa_tampil_video', 1) == 1 ) : 
+                ?>
+                <div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
+                    <div class="parallax-overlay"></div>
+                    <div class="parallax-content relative-z2">
+                        <section class="edukarsa-section edukarsa-videos" style="padding: 60px 0;">
+                            <div class="container video-grid">
+                                <?php for($i=1; $i<=2; $i++) : ?>
+                                <div class="video-item">
+                                    <?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
+                                    <a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
+                                        <div class="img-wrapper-video">
+                                            <?php if($vid_thumb) : ?>
+                                                <img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
+                                            <?php else: ?>
+                                                <div class="img-placeholder" style="background:#1e293b; color:#cbd5e1; border:none;"><i>▶️</i><span>Upload Thumbnail Video <?php echo $i; ?></span></div>
+                                            <?php endif; ?>
+                                        </div>
+                                        <?php if($vid_thumb) echo '<div class="play-btn">▶</div>'; ?>
+                                    </a>
+                                </div>
+                                <?php endfor; ?>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+                <?php 
+                endif; 
+                break;
+
+            // --- SEKSI KEUNGGULAN ---
+            case 'keunggulan':
+                if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : 
+                    $k_sub   = get_option( 'edukarsa_keunggulan_subtitle', 'WHY CHOOSE US' );
+                    $k_title = get_option( 'edukarsa_keunggulan_title', 'Keunggulan Program' );
+                ?>
+                <div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
+                    <div class="parallax-overlay"></div>
+                    <div class="parallax-content relative-z2">
+                        <section class="edukarsa-section edukarsa-keunggulan" style="padding: 60px 0 80px;">
+                            <div class="container">
+                                <div class="section-header text-center">
+                                    <?php if ( ! empty( $k_sub ) ) : ?><span class="badge-title text-white"><?php echo esc_html( $k_sub ); ?></span><?php endif; ?>
+                                    <h2 class="section-title text-white"><?php echo esc_html( $k_title ); ?></h2>
+                                </div>
+                                <div class="keunggulan-grid">
+                                    <?php
+                                    $query_keunggulan = new WP_Query( array( 'post_type' => 'keunggulan', 'posts_per_page' => 9 ) );
+                                    if ( $query_keunggulan->have_posts() ) :
+                                        $nomor = 1;
+                                        while ( $query_keunggulan->have_posts() ) : $query_keunggulan->the_post();
+                                            ?>
+                                            <div class="keunggulan-card card-style">
+                                                <div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
+                                                <div class="keunggulan-content-inner">
+                                                    <h4><?php the_title(); ?></h4>
+                                                    <div style="font-size: 14px; color: var(--text-muted); line-height: 1.6;">
+                                                        <?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <?php
+                                            $nomor++;
+                                        endwhile;
+                                        wp_reset_postdata();
+                                    endif;
+                                    ?>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+                <?php 
+                endif; 
+                break;
+
+            // --- SEKSI CTA PENDAFTARAN ---
+            case 'cta':
+                if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : 
+                ?>
+                <section class="edukarsa-cta-floating-section" style="padding: 50px 0;">
+                    <div class="container">
+                        <div class="cta-floating-card">
+                            <div class="cta-floating-content">
+                                <span class="badge-title" style="color: rgba(255,255,255,0.85);">PENDAFTARAN MAHASISWA BARU</span>
+                                <h2 class="cta-floating-title"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
+                            </div>
+                            <div class="cta-floating-action">
+                                <a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light cta-btn-custom">
+                                    <?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?> &raquo;
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <?php 
+                endif; 
+                break;
+
+            // --- SEKSI LATEST NEWS ---
+            case 'news':
+                if ( get_option('edukarsa_tampil_news', 1) == 1 ) : 
+                ?>
+                <section class="edukarsa-section edukarsa-latest-news" style="padding-top: 50px; padding-bottom: 60px;">
+                    <div class="container">
+                        <div class="section-header text-center" style="margin-bottom: 35px;">
+                            <h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
+                            <hr class="title-underline">
+                        </div>
+                        <div class="news-grid">
+                            <?php
+                            $query_news = new WP_Query( array('post_type' => 'post', 'posts_per_page' => 6) );
+                            if ( $query_news->have_posts() ) :
+                                while ( $query_news->have_posts() ) : $query_news->the_post();
+                                    ?>
+                                    <article class="news-card card-style">
+                                        <div class="img-wrapper-landscape" style="border-radius: 12px 12px 0 0;">
+                                            <?php if ( has_post_thumbnail() ) : ?>
+                                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium' ); ?></a>
+                                            <?php else: ?>
+                                                <div class="img-placeholder"><i>📰</i><span>Gambar Berita</span></div>
+                                            <?php endif; ?>
+                                        </div>
+                                        <div class="news-content">
+                                            <h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
+                                            <div class="news-excerpt" style="color:var(--text-muted); font-size:14px; margin-bottom:15px;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
+                                            <a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
+                                        </div>
+                                    </article>
+                                    <?php
+                                endwhile;
+                                wp_reset_postdata();
+                            endif;
+                            ?>
+                        </div>
+                    </div>
+                </section>
+                <?php 
+                endif; 
+                break;
+
+            // --- SEKSI FAQ ---
+            case 'faq':
+                if ( get_option('edukarsa_tampil_faq', 1) == 1 ) : 
+                    $query_faq = new WP_Query( array( 'post_type' => 'faq', 'posts_per_page' => -1, 'order' => 'ASC' ) );
+                    if ( $query_faq->have_posts() ) :
+                        $faq_title = get_option( 'edukarsa_faq_title', 'Pertanyaan Umum' );
+                ?>
+                <section class="edukarsa-section edukarsa-faq-section" style="padding: 50px 0 75px; background-color: #f8fafc;">
+                    <div class="container">
+                        <div class="section-header text-center" style="margin-bottom: 35px;">
+                            <h2 class="section-title"><?php echo esc_html( $faq_title ); ?></h2>
+                            <hr class="title-underline">
+                        </div>
+
+                        <div class="faq-accordion-container">
+                            <?php
+                            while ( $query_faq->have_posts() ) : $query_faq->the_post();
+                                ?>
+                                <div class="faq-item">
+                                    <button type="button" class="faq-header">
+                                        <span class="faq-title"><?php the_title(); ?></span>
+                                        <span class="faq-icon">＋</span>
+                                    </button>
+                                    <div class="faq-body">
+                                        <div class="faq-body-content">
+                                            <?php the_content(); ?>
                                         </div>
                                     </div>
                                 </div>
                                 <?php
-                                $nomor++;
                             endwhile;
                             wp_reset_postdata();
-                        endif;
+                            ?>
-                        ?>
-                    </div>
-                </div>
-            </section>
-            <?php endif; ?>
-            
-        </div>
-    </div>
-
-    <!-- 8. CTA SECTION (FLOATING CARD) -->
-    <?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
-    <section class="edukarsa-cta-floating-section">
-        <div class="container">
-            <div class="cta-floating-card">
-                <div class="cta-floating-content">
-                    <span class="badge-title" style="color: rgba(255,255,255,0.85);">PENDAFTARAN MAHASISWA BARU</span>
-                    <h2 class="cta-floating-title"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
-                </div>
-                <div class="cta-floating-action">
-                    <a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light cta-btn-custom">
-                        <?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?> &raquo;
-                    </a>
-                </div>
-            </div>
-        </div>
-    </section>
-    <?php endif; ?>
-
-    <!-- 9. LATEST NEWS (SEKARANG BERADA DI ATAS FAQ) -->
-    <?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
-    <section class="edukarsa-section edukarsa-latest-news" style="padding-top: 50px; padding-bottom: 60px;">
-        <div class="container">
-            <div class="section-header text-center">
-                <span class="badge-title">INFORMASI TERKINI</span>
-                <h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
-                <hr class="title-underline">
-            </div>
-            <div class="news-grid">
-                <?php
-                $query_news = new WP_Query( array('post_type' => 'post', 'posts_per_page' => 6) );
-                if ( $query_news->have_posts() ) :
-                    while ( $query_news->have_posts() ) : $query_news->the_post();
-                        ?>
-                        <article class="news-card card-style">
-                            <div class="img-wrapper-landscape" style="border-radius: 12px 12px 0 0;">
-                                <?php if ( has_post_thumbnail() ) : ?>
-                                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium' ); ?></a>
-                                <?php else: ?>
-                                    <div class="img-placeholder"><i>📰</i><span>Gambar Berita</span></div>
-                                <?php endif; ?>
-                            </div>
-                            <div class="news-content">
-                                <h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
-                                <div class="news-excerpt" style="color:var(--text-muted); font-size:14px; margin-bottom:15px;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
-                                <a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
-                            </div>
-                        </article>
-                        <?php
-                    endwhile;
-                    wp_reset_postdata();
-                endif;
-                ?>
-            </div>
-        </div>
-    </section>
-    <?php endif; ?>
-
-    <!-- 10. SEKSI FAQ / PERTANYAAN UMUM (DI BAWAH BERITA & DEFAULT MINIMIZED) -->
-    <?php 
-    if ( get_option('edukarsa_tampil_faq', 1) == 1 ) : 
-        $query_faq = new WP_Query( array( 'post_type' => 'faq', 'posts_per_page' => -1, 'order' => 'ASC' ) );
-        if ( $query_faq->have_posts() ) :
-            $faq_sub   = get_option( 'edukarsa_faq_subtitle', 'FAQ' );
-            $faq_title = get_option( 'edukarsa_faq_title', 'Pertanyaan Umum' );
-    ?>
-    <section class="edukarsa-section edukarsa-faq-section" style="padding: 60px 0 80px; background-color: #f8fafc;">
-        <div class="container">
-            <div class="section-header text-center" style="margin-bottom: 40px;">
-                <?php if ( ! empty( $faq_sub ) ) : ?><span class="badge-title"><?php echo esc_html( $faq_sub ); ?></span><?php endif; ?>
-                <h2 class="section-title"><?php echo esc_html( $faq_title ); ?></h2>
-                <hr class="title-underline">
-            </div>
-
-            <div class="faq-accordion-container">
-                <?php
-                while ( $query_faq->have_posts() ) : $query_faq->the_post();
-                    ?>
-                    <div class="faq-item">
-                        <button type="button" class="faq-header">
-                            <span class="faq-title"><?php the_title(); ?></span>
-                            <span class="faq-icon">＋</span>
-                        </button>
-                        <div class="faq-body">
-                            <div class="faq-body-content">
-                                <?php the_content(); ?>
-                            </div>
                         </div>
                     </div>
-                    <?php
+                </section>
-                endwhile;
+                <?php 
-                wp_reset_postdata();
+                    endif;
-                ?>
+                endif; 
-            </div>
+                break;
-        </div>
+
-    </section>
+            // Mencegah eksekusi diluar blok template (White-list security)
-    <?php 
+            default:
-        endif;
+                break;
-    endif; 
+        }
+    }
     ?>
 
 </main>
 
 <script>
 document.addEventListener("DOMContentLoaded", function() {
-    // 1. Slider Auto Scroll
     const slider = document.getElementById('hero-slider-wrapper');
     if (slider && slider.children.length > 1) { 
         setInterval(function() {
@@ -359,7 +412,6 @@ document.addEventListener("DOMContentLoaded", function() {
         }, 4000); 
     }
 
-    // 2. FAQ Accordion Toggle Interaction
     document.querySelectorAll('.faq-header').forEach(function(header) {
         header.addEventListener('click', function() {
             const item = this.parentElement;

functions.php

@@ -23,3 +23,6 @@ require_once get_template_directory() . '/inc/admin-menu.php';
 
 // 6. Memuat Native SEO & Structured Data (JSON-LD)
 require_once get_template_directory() . '/inc/seo.php';
+
+// 7. Memuat Modul Pop-up Flyer & Pengumuman Modal
+require_once get_template_directory() . '/inc/popup.php';

inc/admin-menu.php

@@ -17,11 +17,14 @@ function edukarsa_admin_menu() {
     );
 
     add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Pengaturan Utama', 'Main Settings' ), edukarsa_t( '⚙️ Pengaturan Utama', '⚙️ Main Settings' ), 'manage_options', 'edukarsa_settings', 'edukarsa_settings_page_html' );
+    add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Tata Letak Beranda', 'Homepage Layout' ), edukarsa_t( '🏗️ Tata Letak', '🏗️ Layout' ), 'manage_options', 'edukarsa_layout', 'edukarsa_layout_page_html' );
     add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Slider', 'All Sliders' ), edukarsa_t( '🌟 Slider Banner', '🌟 Slider Banners' ), 'manage_options', 'edit.php?post_type=slider' );
     add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Program', 'All Programs' ), edukarsa_t( '📚 Program Kami', '📚 Our Programs' ), 'manage_options', 'edit.php?post_type=program' );
     add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Keunggulan', 'All Advantages' ), edukarsa_t( '⭐ Keunggulan', '⭐ Advantages' ), 'manage_options', 'edit.php?post_type=keunggulan' );
     add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Milestone', 'All Milestones' ), edukarsa_t( '🏆 Milestone', '🏆 Milestones' ), 'manage_options', 'edit.php?post_type=milestone' );
     add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua FAQ', 'All FAQs' ), edukarsa_t( '❓ Tanya Jawab (FAQ)', '❓ FAQs' ), 'manage_options', 'edit.php?post_type=faq' );
+    add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Semua Galeri', 'All Galleries' ), edukarsa_t( '📸 Galeri Fasilitas', '📸 Facilities Gallery' ), 'manage_options', 'edit.php?post_type=galeri' );
+    add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Kategori Galeri', 'Gallery Categories' ), edukarsa_t( '📂 Kategori Galeri', '📂 Gallery Categories' ), 'manage_options', 'edit-tags.php?taxonomy=kategori_galeri&post_type=galeri' );
     add_submenu_page( 'edukarsa_settings', edukarsa_t( 'Tentang & Donasi', 'About & Donate' ), edukarsa_t( '☕ Donasi & Info', '☕ Donate & Info' ), 'manage_options', 'edukarsa_about', 'edukarsa_about_page_html' );
 }
 add_action( 'admin_menu', 'edukarsa_admin_menu' );
@@ -36,16 +39,14 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
     ) );
 
     $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-settings', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '⚙️ Pengaturan Utama', '⚙️ Main Settings' ), 'href' => admin_url( 'admin.php?page=edukarsa_settings' ) ) );
+    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-layout', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '🏗️ Tata Letak', '🏗️ Layout' ), 'href' => admin_url( 'admin.php?page=edukarsa_layout' ) ) );
     $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-slider', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '🌟 Slider Banner', '🌟 Slider Banners' ), 'href' => admin_url( 'edit.php?post_type=slider' ) ) );
-    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-program', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '📚 Program Kami', '📚 Our Programs' ), 'href' => admin_url( 'edit.php?post_type=program' ) ) );
+    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-galeri', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '📸 Galeri Fasilitas', '📸 Facilities Gallery' ), 'href' => admin_url( 'edit.php?post_type=galeri' ) ) );
-    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-keunggulan', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '⭐ Keunggulan', '⭐ Advantages' ), 'href' => admin_url( 'edit.php?post_type=keunggulan' ) ) );
-    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-milestone', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '🏆 Milestone', '🏆 Milestones' ), 'href' => admin_url( 'edit.php?post_type=milestone' ) ) );
-    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-faq', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '❓ Tanya Jawab (FAQ)', '❓ FAQs' ), 'href' => admin_url( 'edit.php?post_type=faq' ) ) );
     $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-about', 'parent' => 'edukarsa-topbar-menu', 'title' => edukarsa_t( '☕ Donasi & Info', '☕ Donate & Info' ), 'href' => admin_url( 'admin.php?page=edukarsa_about' ) ) );
 }
 add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
 
-// SANITASI CHECKBOX (BOOLEAN ENFORCEMENT)
+// SANITASI CHECKBOX
 function edukarsa_sanitize_checkbox( $val ) {
     return ( ! empty( $val ) && ( $val === 1 || $val === '1' || $val === true ) ) ? 1 : 0;
 }
@@ -60,7 +61,8 @@ function edukarsa_register_settings() {
         'edukarsa_tampil_cta', 'edukarsa_tampil_faq', 'edukarsa_tampil_news', 'edukarsa_sidebar_tampil_search',
         'edukarsa_sidebar_tampil_cta', 'edukarsa_sidebar_tampil_html', 'edukarsa_sidebar_tampil_recent',
         'edukarsa_sidebar_tampil_cats', 'edukarsa_tampil_fb', 'edukarsa_tampil_ig', 'edukarsa_tampil_yt',
-        'edukarsa_tampil_tiktok', 'edukarsa_tampil_x'
+        'edukarsa_tampil_tiktok', 'edukarsa_tampil_x',
+        'edukarsa_tampil_popup', 'edukarsa_popup_hanya_beranda'
     );
     foreach ( $checkboxes as $cb ) {
         register_setting( 'edukarsa_settings_group', $cb, array( 'sanitize_callback' => 'edukarsa_sanitize_checkbox' ) );
@@ -78,7 +80,8 @@ function edukarsa_register_settings() {
         'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
         'edukarsa_cta_bg', 'edukarsa_cta_btn_url', 'edukarsa_sidebar_cta_btn_url', 'edukarsa_sidebar_banner_img',
         'edukarsa_sidebar_banner_url', 'edukarsa_footer_logo', 'edukarsa_footer_fb', 'edukarsa_footer_ig',
-        'edukarsa_footer_yt', 'edukarsa_footer_tiktok', 'edukarsa_footer_x'
+        'edukarsa_footer_yt', 'edukarsa_footer_tiktok', 'edukarsa_footer_x',
+        'edukarsa_popup_img', 'edukarsa_popup_btn_url'
     );
     foreach ( $urls as $url ) {
         register_setting( 'edukarsa_settings_group', $url, array( 'sanitize_callback' => 'esc_url_raw' ) );
@@ -86,14 +89,15 @@ function edukarsa_register_settings() {
 
     // 4. Numbers & Integers
     register_setting( 'edukarsa_settings_group', 'edukarsa_sidebar_recent_count', array( 'sanitize_callback' => 'absint' ) );
+    register_setting( 'edukarsa_settings_group', 'edukarsa_popup_delay', array( 'sanitize_callback' => 'absint' ) );
 
     // 5. Emails
     register_setting( 'edukarsa_settings_group', 'edukarsa_footer_email', array( 'sanitize_callback' => 'sanitize_email' ) );
 
-    // 6. Safe HTML Textareas
+    // 6. Safe HTML & Textareas
     $safe_html = array(
         'edukarsa_teks_sambutan', 'edukarsa_sidebar_html_content', 'edukarsa_footer_alamat',
-        'edukarsa_footer_jam', 'edukarsa_footer_desc'
+        'edukarsa_footer_jam', 'edukarsa_footer_desc', 'edukarsa_popup_desc'
     );
     foreach ( $safe_html as $html ) {
         register_setting( 'edukarsa_settings_group', $html, array( 'sanitize_callback' => 'wp_kses_post' ) );
@@ -111,11 +115,15 @@ function edukarsa_register_settings() {
         'edukarsa_sidebar_cta_badge', 'edukarsa_sidebar_cta_title', 'edukarsa_sidebar_cta_desc',
         'edukarsa_sidebar_cta_btn_text', 'edukarsa_sidebar_html_title', 'edukarsa_sidebar_recent_title',
         'edukarsa_sidebar_cats_title', 'edukarsa_footer_telp', 'edukarsa_wa_btn_text',
-        'edukarsa_wa_default_msg', 'edukarsa_footer_copyright'
+        'edukarsa_wa_default_msg', 'edukarsa_footer_copyright',
+        'edukarsa_popup_badge', 'edukarsa_popup_title', 'edukarsa_popup_btn_text'
     );
     foreach ( $text_inputs as $txt ) {
         register_setting( 'edukarsa_settings_group', $txt, array( 'sanitize_callback' => 'sanitize_text_field' ) );
     }
+
+    // Registrasi Layout Builder
+    register_setting('edukarsa_layout_group', 'edukarsa_homepage_layout', 'sanitize_text_field');
 }
 add_action( 'admin_init', 'edukarsa_register_settings' );
 
@@ -247,7 +255,7 @@ function edukarsa_settings_page_html() {
                         </div>
                         <div class="edukarsa-card-body">
                             <div class="form-field-group">
-                                <label><?php echo esc_html( edukarsa_t( 'Logo Website (Header)', 'Website Logo (Header)' ) ); ?></label>
+                                <label><?php echo esc_html( edukarsa_t( 'Logo Website (Header)', 'Website Logo (Header)' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Tinggi 110px, lebar proporsional (contoh: 300x110px). Format PNG Transparan/WebP.', 'Recommended: 110px height, proportional width (e.g. 300x110px). Transparent PNG/WebP.' ) ); ?></span></span></label>
                                 <div class="input-with-button">
                                     <input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" placeholder="https://...">
                                     <button type="button" class="button btn-upload" data-target="#edukarsa_header_logo"><?php echo esc_html( edukarsa_t( 'Pilih Logo', 'Select Logo' ) ); ?></button>
@@ -361,7 +369,7 @@ function edukarsa_settings_page_html() {
                             </div>
                             <div id="about-settings-box">
                                 <div class="form-grid-2">
-                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Foto Pimpinan (Portrait 3:4)', 'Leader Photo (Portrait 3:4)' ) ); ?></label><div class="input-with-button"><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><button type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button></div></div>
+                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Foto Pimpinan (Portrait 3:4)', 'Leader Photo (Portrait 3:4)' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Minimal 600x800 piksel (Rasio pasti 3:4) agar presisi.', 'Recommended: Min 600x800 pixels (Strict 3:4 ratio) for precision.' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><button type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button></div></div>
                                     <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Nama Lengkap & Gelar', 'Full Name & Degree' ) ); ?></label><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>"></div>
                                 </div>
                                 <div class="form-grid-2">
@@ -437,18 +445,18 @@ function edukarsa_settings_page_html() {
                             </div>
                             <div id="video-settings-box">
                                 <div class="form-grid-2">
-                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Gambar Latar Parallax', 'Parallax Background Image' ) ); ?></label><div class="input-with-button"><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><button type="button" class="button btn-upload" data-target="#mid_bg_image"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button></div></div>
+                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Gambar Latar Parallax', 'Parallax Background Image' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: 1920x1080 piksel (Resolusi tinggi, format JPG/WebP terkompresi).', 'Recommended: 1920x1080 pixels (High res, compressed JPG/WebP).' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><button type="button" class="button btn-upload" data-target="#mid_bg_image"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button></div></div>
                                     <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Warna Overlay Parallax', 'Parallax Overlay Color' ) ); ?></label><div style="display:flex; align-items:center; gap:10px;"><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"><code><?php echo esc_html(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?></code></div></div>
                                 </div>
                                 <div class="form-grid-2">
                                     <div class="stat-config-box">
                                         <h4>Video 1</h4>
-                                        <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Thumbnail Video 1', 'Video 1 Thumbnail' ) ); ?></label><div class="input-with-button"><input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid1_thumb">Up</button></div></div>
+                                        <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Thumbnail Video 1', 'Video 1 Thumbnail' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: 1280x720 piksel (Rasio 16:9).', 'Recommended: 1280x720 pixels (16:9 Ratio).' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid1_thumb">Up</button></div></div>
                                         <div class="form-field-group" style="margin-bottom:0;"><label><?php echo esc_html( edukarsa_t( 'URL Video 1', 'Video 1 URL' ) ); ?></label><input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>" placeholder="https://youtube.com/watch?v=..."></div>
                                     </div>
                                     <div class="stat-config-box">
                                         <h4>Video 2</h4>
-                                        <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Thumbnail Video 2', 'Video 2 Thumbnail' ) ); ?></label><div class="input-with-button"><input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid2_thumb">Up</button></div></div>
+                                        <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Thumbnail Video 2', 'Video 2 Thumbnail' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: 1280x720 piksel (Rasio 16:9).', 'Recommended: 1280x720 pixels (16:9 Ratio).' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid2_thumb">Up</button></div></div>
                                         <div class="form-field-group" style="margin-bottom:0;"><label><?php echo esc_html( edukarsa_t( 'URL Video 2', 'Video 2 URL' ) ); ?></label><input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>" placeholder="https://youtube.com/watch?v=..."></div>
                                     </div>
                                 </div>
@@ -489,7 +497,7 @@ function edukarsa_settings_page_html() {
                             <div id="cta-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
                                 <h4><?php echo esc_html( edukarsa_t( 'Konfigurasi CTA PPDB / PMB', 'Admission CTA Configuration' ) ); ?></h4>
                                 <div class="form-grid-2">
-                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Gambar Latar CTA', 'CTA Background Image' ) ); ?></label><div class="input-with-button"><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><button type="button" class="button btn-upload" data-target="#cta_bg">Up</button></div></div>
+                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Gambar Latar CTA', 'CTA Background Image' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: 1920x800 piksel (Lanskap memanjang).', 'Recommended: 1920x800 pixels (Wide landscape).' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><button type="button" class="button btn-upload" data-target="#cta_bg">Up</button></div></div>
                                     <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Teks Tombol CTA', 'CTA Button Text' ) ); ?></label><input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang')); ?>"></div>
                                 </div>
                                 <div class="form-grid-2">
@@ -606,7 +614,7 @@ function edukarsa_settings_page_html() {
 
                             <div class="form-grid-2">
                                 <div class="form-field-group">
-                                    <label><?php echo esc_html( edukarsa_t( 'Banner Poster Sidebar (Opsional)', 'Sidebar Banner Poster (Optional)' ) ); ?></label>
+                                    <label><?php echo esc_html( edukarsa_t( 'Banner Poster Sidebar (Opsional)', 'Sidebar Banner Poster (Optional)' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Lebar 600px, tinggi bebas. Maksimal 300KB.', 'Recommended: 600px width, flexible height. Max 300KB.' ) ); ?></span></span></label>
                                     <div class="input-with-button">
                                         <input type="text" id="edukarsa_sidebar_banner_img" name="edukarsa_sidebar_banner_img" value="<?php echo esc_url(get_option('edukarsa_sidebar_banner_img')); ?>" placeholder="https://...">
                                         <button type="button" class="button btn-upload" data-target="#edukarsa_sidebar_banner_img"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button>
@@ -644,7 +652,7 @@ function edukarsa_settings_page_html() {
 
                             <div class="form-grid-2">
                                 <div class="form-field-group">
-                                    <label><?php echo esc_html( edukarsa_t( 'Logo Footer (Opsional)', 'Footer Logo (Optional)' ) ); ?></label>
+                                    <label><?php echo esc_html( edukarsa_t( 'Logo Footer (Opsional)', 'Footer Logo (Optional)' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Gunakan varian logo terang/putih dengan latar transparan.', 'Recommended: Use a light/white logo variant with transparent background.' ) ); ?></span></span></label>
                                     <div class="input-with-button">
                                         <input type="text" id="edukarsa_footer_logo" name="edukarsa_footer_logo" value="<?php echo esc_url(get_option('edukarsa_footer_logo')); ?>" placeholder="https://...">
                                         <button type="button" class="button btn-upload" data-target="#edukarsa_footer_logo"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button>
@@ -679,6 +687,87 @@ function edukarsa_settings_page_html() {
                         </div>
                     </div>
 
+                    <!-- 8. Pop-up Flyer & Pengumuman (BARU) -->
+                    <div class="edukarsa-card">
+                        <div class="edukarsa-card-header">
+                            <h2><?php echo esc_html( edukarsa_t( '🪟 8. Pop-up Flyer & Pengumuman (Modal Banner)', '🪟 8. Pop-up Flyer & Announcements (Modal Banner)' ) ); ?></h2>
+                            <div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
+                        </div>
+                        <div class="edukarsa-card-body">
+                            <p style="font-size: 13px; color: #64748b; margin-top:0; margin-bottom: 15px;">
+                                <?php echo esc_html( edukarsa_t( 'Tampilkan pop-up dialog promosi PMB, brosur pendaftaran, atau maklumat penting saat pengunjung pertama kali membuka situs.', 'Display promotional admission flyer, registration brochure, or important notices when visitors open the site.' ) ); ?>
+                            </p>
+
+                            <div class="switch-row-inline">
+                                <div class="switch-row">
+                                    <div class="switch-label-wrap">
+                                        <span class="switch-label"><?php echo esc_html( edukarsa_t( 'Aktifkan Pop-up Flyer', 'Enable Pop-up Flyer' ) ); ?></span>
+                                        <a href="<?php echo esc_url( add_query_arg( 'preview_popup', '1', home_url('/') ) ); ?>" target="_blank" class="cpt-shortcut-link"><?php echo esc_html( edukarsa_t( 'Pratinjau Pop-up ↗', 'Preview Pop-up ↗' ) ); ?></a>
+                                    </div>
+                                    <label class="edukarsa-switch">
+                                        <input type="checkbox" class="section-toggle" data-target="#popup-config-box" name="edukarsa_tampil_popup" value="1" <?php checked(1, get_option('edukarsa_tampil_popup', 0)); ?>>
+                                        <span class="slider-round"></span>
+                                    </label>
+                                </div>
+                                <div class="switch-row">
+                                    <div class="switch-label-wrap">
+                                        <span class="switch-label"><?php echo esc_html( edukarsa_t( 'Hanya Muncul di Beranda', 'Homepage Only' ) ); ?></span>
+                                        <span style="font-size: 11px; color: #64748b;"><?php echo esc_html( edukarsa_t( 'Tidak mengganggu halaman artikel', 'Do not disturb inner pages' ) ); ?></span>
+                                    </div>
+                                    <label class="edukarsa-switch">
+                                        <input type="checkbox" name="edukarsa_popup_hanya_beranda" value="1" <?php checked(1, get_option('edukarsa_popup_hanya_beranda', 1)); ?>>
+                                        <span class="slider-round"></span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div id="popup-config-box" class="stat-config-box" style="margin-top: 15px;">
+                                <h4><?php echo esc_html( edukarsa_t( 'Konfigurasi Konten Pop-up', 'Pop-up Content Configuration' ) ); ?></h4>
+                                
+                                <div class="form-grid-2">
+                                    <div class="form-field-group">
+                                        <label><?php echo esc_html( edukarsa_t( 'Gambar Flyer / Poster Banner', 'Flyer Image / Poster Banner' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Minimal 800x800px (format JPG/WebP terkompresi).', 'Recommended: Min 800x800px (compressed JPG/WebP).' ) ); ?></span></span></label>
+                                        <div class="input-with-button">
+                                            <input type="text" id="edukarsa_popup_img" name="edukarsa_popup_img" value="<?php echo esc_url(get_option('edukarsa_popup_img')); ?>" placeholder="https://...">
+                                            <button type="button" class="button btn-upload" data-target="#edukarsa_popup_img"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button>
+                                        </div>
+                                    </div>
+                                    <div class="form-field-group">
+                                        <label><?php echo esc_html( edukarsa_t( 'Badge / Subtitle Kecil', 'Badge / Small Subtitle' ) ); ?></label>
+                                        <input type="text" name="edukarsa_popup_badge" value="<?php echo esc_attr(get_option('edukarsa_popup_badge', 'INFORMASI PMB 2026/2027')); ?>" placeholder="cth: INFORMASI PMB 2026/2027">
+                                    </div>
+                                </div>
+
+                                <div class="form-grid-2">
+                                    <div class="form-field-group">
+                                        <label><?php echo esc_html( edukarsa_t( 'Judul Pop-up (Opsional)', 'Pop-up Title (Optional)' ) ); ?></label>
+                                        <input type="text" name="edukarsa_popup_title" value="<?php echo esc_attr(get_option('edukarsa_popup_title', 'Penerimaan Mahasiswa Baru Telah Dibuka!')); ?>">
+                                    </div>
+                                    <div class="form-field-group">
+                                        <label><?php echo esc_html( edukarsa_t( 'Waktu Tunda Muncul (Detik)', 'Appearance Delay (Seconds)' ) ); ?></label>
+                                        <input type="number" name="edukarsa_popup_delay" value="<?php echo esc_attr(get_option('edukarsa_popup_delay', 2)); ?>" min="0" max="10">
+                                    </div>
+                                </div>
+
+                                <div class="form-field-group">
+                                    <label><?php echo esc_html( edukarsa_t( 'Deskripsi Singkat (Opsional)', 'Short Description (Optional)' ) ); ?></label>
+                                    <textarea name="edukarsa_popup_desc" rows="3" placeholder="Daftarkan diri Anda sekarang dan raih potongan biaya serta beasiswa unggulan prestasi institusi kami."><?php echo esc_textarea(get_option('edukarsa_popup_desc')); ?></textarea>
+                                </div>
+
+                                <div class="form-grid-2" style="margin-bottom:0;">
+                                    <div class="form-field-group" style="margin-bottom:0;">
+                                        <label><?php echo esc_html( edukarsa_t( 'Teks Tombol Aksi', 'Action Button Text' ) ); ?></label>
+                                        <input type="text" name="edukarsa_popup_btn_text" value="<?php echo esc_attr(get_option('edukarsa_popup_btn_text', 'Daftar Sekarang')); ?>" placeholder="cth: Daftar Sekarang">
+                                    </div>
+                                    <div class="form-field-group" style="margin-bottom:0;">
+                                        <label><?php echo esc_html( edukarsa_t( 'Tautan URL Tujuan', 'Target Link URL' ) ); ?></label>
+                                        <input type="text" name="edukarsa_popup_btn_url" value="<?php echo esc_attr(get_option('edukarsa_popup_btn_url')); ?>" placeholder="https://...">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
 
                 <!-- KOLOM KANAN (SIDEBAR ACTION PANEL STICKY) -->
@@ -794,7 +883,7 @@ function edukarsa_settings_page_html() {
             e.preventDefault();
             var targetInput = $(this).data('target');
             if (mediaUploader) { mediaUploader.targetInput = targetInput; mediaUploader.open(); return; }
-            mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Upload Image', button: { text: 'Use Media' }, multiple: false });
+            mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Berkas Media', button: { text: 'Gunakan Media Ini' }, multiple: false });
             mediaUploader.targetInput = targetInput;
             mediaUploader.on('select', function() {
                 var attachment = mediaUploader.state().get('selection').first().toJSON();
@@ -807,6 +896,97 @@ function edukarsa_settings_page_html() {
     <?php
 }
 
+function edukarsa_layout_page_html() {
+    if ( ! current_user_can( 'manage_options' ) ) return;
+    wp_enqueue_script('jquery-ui-sortable');
+    
+    $default_layout = array('stats','about','milestone','program','video','keunggulan','cta','news','faq');
+    $saved_layout = get_option('edukarsa_homepage_layout', implode(',', $default_layout));
+    $current_layout = explode(',', $saved_layout);
+    
+    foreach($default_layout as $sec) {
+        if(!in_array($sec, $current_layout)) $current_layout[] = $sec;
+    }
+
+    $section_names = array(
+        'stats'      => edukarsa_t('📊 Statistik (3 Kotak Capaian)', '📊 Statistics Cards'),
+        'about'      => edukarsa_t('👤 Sambutan & Profil Pimpinan', '👤 Welcome & Leader Profile'),
+        'milestone'  => edukarsa_t('🏆 Rekam Jejak (Milestones)', '🏆 Milestones History'),
+        'program'    => edukarsa_t('📚 Program Unggulan / Kurikulum', '📚 Featured Programs'),
+        'video'      => edukarsa_t('🎬 Video Profil Parallax', '🎬 Parallax Videos'),
+        'keunggulan' => edukarsa_t('⭐ Poin Keunggulan (Grid Berurut)', '⭐ Advantages Grid'),
+        'cta'        => edukarsa_t('📢 Banner Ajakan (CTA) Pendaftaran', '📢 Admission CTA Banner'),
+        'news'       => edukarsa_t('📰 Berita & Warta Terkini', '📰 Latest News & Updates'),
+        'faq'        => edukarsa_t('❓ Seksi Tanya Jawab (FAQ)', '❓ Frequently Asked Questions')
+    );
+    ?>
+    <div class="wrap edukarsa-admin-wrap" style="max-width: 800px; margin-top: 25px;">
+        <div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03);">
+            <div style="padding: 25px 30px; background: #fafafa; border-bottom: 1px solid #f1f5f9;">
+                <h1 style="font-weight: 800; font-size: 22px; color: #0f172a; margin: 0 0 8px; line-height: 1.2;">
+                    <?php echo esc_html(edukarsa_t('🏗️ Builder Tata Letak Beranda', '🏗️ Homepage Layout Builder')); ?>
+                </h1>
+                <p style="color: #64748b; font-size: 14px; margin: 0;">
+                    <?php echo esc_html(edukarsa_t('Tahan dan geser (drag & drop) blok di bawah ini untuk mengatur urutan seksi di halaman beranda. Modul yang dimatikan di Pengaturan Utama akan otomatis dilewati.', 'Drag and drop the blocks below to rearrange the homepage sections. Modules disabled in Main Settings will be skipped automatically.')); ?>
+                </p>
+            </div>
+
+            <form action="options.php" method="post" style="padding: 30px;">
+                <?php settings_fields('edukarsa_layout_group'); ?>
+                
+                <div style="background: #eef2ff; border: 1px solid #c7d2fe; padding: 16px 20px; border-radius: 8px; margin-bottom: 15px; font-weight: 700; color: #3730a3; display: flex; align-items: center; gap: 12px;">
+                    <span style="font-size: 22px;">🔒</span> 
+                    <?php echo esc_html(edukarsa_t('🌟 Slider Banner (Terkunci di Posisi Teratas)', '🌟 Slider Banner (Locked at Very Top)')); ?>
+                </div>
+
+                <input type="hidden" name="edukarsa_homepage_layout" id="layout_order" value="<?php echo esc_attr(implode(',', $current_layout)); ?>">
+                
+                <ul id="sortable-layout" style="margin: 0; padding: 0; list-style: none;">
+                    <?php foreach($current_layout as $sec): if(isset($section_names[$sec])): ?>
+                        <li data-id="<?php echo esc_attr($sec); ?>" style="background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; cursor: grab; display: flex; align-items: center; gap: 15px; transition: all 0.2s; position: relative;">
+                            <span class="dashicons dashicons-menu-alt2" style="color: #94a3b8; font-size: 24px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;"></span>
+                            <span style="font-size: 15px; font-weight: 700; color: #1e293b; flex-grow: 1;"><?php echo esc_html($section_names[$sec]); ?></span>
+                            <span style="font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; background: #f1f5f9; padding: 4px 10px; border-radius: 12px;">Draggable</span>
+                        </li>
+                    <?php endif; endforeach; ?>
+                </ul>
+
+                <div style="margin-top: 30px; text-align: right; border-top: 1px solid #f1f5f9; padding-top: 25px;">
+                    <?php submit_button(edukarsa_t('Simpan Tata Letak', 'Save Layout Order'), 'primary large', 'submit', false, array('style'=>'border-radius:8px; font-weight:700; padding:8px 30px; font-size: 15px;')); ?>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <style>
+        #sortable-layout li:hover { box-shadow: 0 4px 12px rgba(11,74,142,0.08) !important; border-color: #0b4a8e !important; }
+        #sortable-layout li:hover .dashicons { color: #0b4a8e; }
+        .ui-sortable-helper { box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important; transform: scale(1.02); z-index: 9999; border-color: #0b4a8e !important; }
+        .ui-sortable-placeholder { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 8px; visibility: visible !important; height: 60px; margin-bottom: 12px; }
+    </style>
+
+    <script>
+    jQuery(document).ready(function($) {
+        $("#sortable-layout").sortable({
+            placeholder: "ui-sortable-placeholder",
+            cursor: "grabbing",
+            axis: "y",
+            containment: "parent",
+            tolerance: "pointer",
+            update: function(event, ui) {
+                var newOrder = [];
+                $("#sortable-layout li").each(function() {
+                    newOrder.push($(this).data('id'));
+                });
+                $("#layout_order").val(newOrder.join(','));
+            }
+        });
+        $("#sortable-layout").disableSelection();
+    });
+    </script>
+    <?php
+}
+
 function edukarsa_about_page_html() {
     if ( ! current_user_can( 'manage_options' ) ) return;
     ?>

inc/cpt-slider.php

@@ -46,3 +46,41 @@ function edukarsa_slider_save_meta( $post_id ) {
     if ( isset( $_POST['slider_link'] ) ) { update_post_meta( $post_id, '_slider_link', sanitize_text_field( $_POST['slider_link'] ) ); }
 }
 add_action( 'save_post', 'edukarsa_slider_save_meta' );
+
+// --- REGISTRASI CPT GALERI & TAXONOMY ---
+function edukarsa_register_galeri_cpt() {
+    register_post_type( 'galeri', array(
+        'labels' => array(
+            'name' => 'Galeri Fasilitas', 
+            'singular_name' => 'Galeri', 
+            'add_new_item' => 'Tambah Foto Galeri',
+            'all_items' => 'Semua Foto Galeri'
+        ),
+        'supports' => array('title', 'editor', 'thumbnail', 'excerpt'), 
+        'public' => true, 
+        'show_ui' => true, 
+        'show_in_menu' => false,
+        'menu_icon' => 'dashicons-format-gallery'
+    ));
+
+    register_taxonomy( 'kategori_galeri', 'galeri', array(
+        'labels' => array('name' => 'Kategori Galeri', 'singular_name' => 'Kategori', 'add_new_item' => 'Tambah Kategori'),
+        'hierarchical' => true, 
+        'public' => true, 
+        'show_ui' => true, 
+        'show_admin_column' => true,
+        'show_in_menu' => false
+    ));
+}
+add_action( 'init', 'edukarsa_register_galeri_cpt', 0 );
+
+// --- NOTIFIKASI PANDUAN RESOLUSI SLIDER ---
+function edukarsa_slider_admin_notice() {
+    $screen = get_current_screen();
+    if ( isset($screen->post_type) && $screen->post_type === 'slider' ) {
+        echo '<div class="notice notice-info is-dismissible" style="border-left-color: #0b4a8e;">
+            <p><strong>💡 Panduan Resolusi Gambar:</strong> Untuk tampilan terbaik tanpa pecah, gunakan gambar beresolusi <strong>1920x1080 piksel (16:9)</strong> pada kotak <em>Gambar Unggulan (Featured Image)</em> di sisi kanan bawah.</p>
+        </div>';
+    }
+}
+add_action('admin_notices', 'edukarsa_slider_admin_notice');

inc/popup.php

@@ -0,0 +1,133 @@
+<?php
+/**
+ * Modul Native Pop-up Flyer & Pengumuman EduKarsa
+ * 100% Native tanpa plugin eksternal
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+function edukarsa_render_popup_flyer() {
+    // 1. Cek apakah fitur popup aktif
+    $is_active = get_option( 'edukarsa_tampil_popup', 0 );
+    if ( ! $is_active ) {
+        return;
+    }
+
+    // 2. Cek apakah dibatasi hanya di beranda
+    $hanya_beranda = get_option( 'edukarsa_popup_hanya_beranda', 1 );
+    if ( $hanya_beranda && ! is_front_page() ) {
+        return;
+    }
+
+    $img_url  = get_option( 'edukarsa_popup_img', '' );
+    $badge    = get_option( 'edukarsa_popup_badge', '' );
+    $title    = get_option( 'edukarsa_popup_title', '' );
+    $desc     = get_option( 'edukarsa_popup_desc', '' );
+    $btn_text = get_option( 'edukarsa_popup_btn_text', '' );
+    $btn_url  = get_option( 'edukarsa_popup_btn_url', '' );
+    $delay    = intval( get_option( 'edukarsa_popup_delay', 2 ) );
+    if ( $delay < 0 ) {
+        $delay = 1;
+    }
+
+    // Jika tidak ada gambar dan tidak ada judul, hentikan render
+    if ( empty( $img_url ) && empty( $title ) ) {
+        return;
+    }
+    ?>
+    <!-- NATIVE POP-UP FLYER MODAL EDUKARSA -->
+    <div id="edukarsa-popup-overlay" class="edukarsa-popup-overlay" role="dialog" aria-modal="true" aria-hidden="true">
+        <div class="edukarsa-popup-card">
+            <button type="button" class="edukarsa-popup-close" id="edukarsa-popup-close" aria-label="<?php echo esc_attr( edukarsa_t( 'Tutup Pop-up', 'Close Popup' ) ); ?>" title="<?php echo esc_attr( edukarsa_t( 'Tutup', 'Close' ) ); ?>">&times;</button>
+            
+            <div class="edukarsa-popup-content">
+                <?php if ( ! empty( $img_url ) ) : ?>
+                    <div class="edukarsa-popup-media">
+                        <?php if ( ! empty( $btn_url ) ) : ?>
+                            <a href="<?php echo esc_url( $btn_url ); ?>" class="edukarsa-popup-img-link">
+                                <img src="<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_attr( $title ? $title : 'Flyer Pengumuman' ); ?>" loading="lazy">
+                            </a>
+                        <?php else : ?>
+                            <img src="<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_attr( $title ? $title : 'Flyer Pengumuman' ); ?>" loading="lazy">
+                        <?php endif; ?>
+                    </div>
+                <?php endif; ?>
+
+                <?php if ( ! empty( $badge ) || ! empty( $title ) || ! empty( $desc ) || ( ! empty( $btn_text ) && ! empty( $btn_url ) ) ) : ?>
+                    <div class="edukarsa-popup-details">
+                        <?php if ( ! empty( $badge ) ) : ?>
+                            <span class="edukarsa-popup-badge"><?php echo esc_html( $badge ); ?></span>
+                        <?php endif; ?>
+
+                        <?php if ( ! empty( $title ) ) : ?>
+                            <h3 class="edukarsa-popup-heading"><?php echo esc_html( $title ); ?></h3>
+                        <?php endif; ?>
+
+                        <?php if ( ! empty( $desc ) ) : ?>
+                            <div class="edukarsa-popup-desc">
+                                <?php echo nl2br( esc_html( $desc ) ); ?>
+                            </div>
+                        <?php endif; ?>
+
+                        <?php if ( ! empty( $btn_text ) && ! empty( $btn_url ) ) : ?>
+                            <div class="edukarsa-popup-action">
+                                <a href="<?php echo esc_url( $btn_url ); ?>" class="btn-primary edukarsa-popup-btn">
+                                    <?php echo esc_html( $btn_text ); ?> &raquo;
+                                </a>
+                            </div>
+                        <?php endif; ?>
+                    </div>
+                <?php endif; ?>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    document.addEventListener("DOMContentLoaded", function() {
+        var popupOverlay = document.getElementById("edukarsa-popup-overlay");
+        var popupClose   = document.getElementById("edukarsa-popup-close");
+        if (!popupOverlay) return;
+
+        // Cek parameter preview admin (?preview_popup=1) untuk bypass session
+        var urlParams = new URLSearchParams(window.location.search);
+        var isPreview = urlParams.get("preview_popup") === "1";
+
+        // Cek apakah sudah pernah ditutup dalam sesi peramban ini
+        var isDismissed = sessionStorage.getItem("edukarsa_popup_dismissed");
+        if (!isPreview && isDismissed === "1") return;
+
+        var delayMs = <?php echo ( $delay * 1000 ); ?>;
+
+        setTimeout(function() {
+            popupOverlay.classList.add("is-visible");
+            popupOverlay.setAttribute("aria-hidden", "false");
+            document.body.classList.add("edukarsa-popup-open");
+        }, delayMs);
+
+        function closePopup() {
+            popupOverlay.classList.remove("is-visible");
+            popupOverlay.setAttribute("aria-hidden", "true");
+            document.body.classList.remove("edukarsa-popup-open");
+            sessionStorage.setItem("edukarsa_popup_dismissed", "1");
+        }
+
+        if (popupClose) {
+            popupClose.addEventListener("click", closePopup);
+        }
+
+        popupOverlay.addEventListener("click", function(e) {
+            if (e.target === popupOverlay) {
+                closePopup();
+            }
+        });
+
+        document.addEventListener("keydown", function(e) {
+            if (e.key === "Escape" && popupOverlay.classList.contains("is-visible")) {
+                closePopup();
+            }
+        });
+    });
+    </script>
+    <?php
+}
+add_action( 'wp_footer', 'edukarsa_render_popup_flyer', 50 );

page-galeri.php

@@ -0,0 +1,234 @@
+<?php
+/**
+ * Template Name: Galeri & Fasilitas
+ * Deskripsi: Menampilkan grid foto galeri dengan filter kategori dan efek Zoom/Lightbox interaktif.
+ */
+get_header(); 
+?>
+
+<main id="primary" class="site-main edukarsa-gallery-page" style="padding: 60px 0 80px; background-color: var(--bg-light-blue); min-height: 75vh;">
+    <div class="container">
+        
+        <!-- Header Seksi Galeri -->
+        <div class="section-header text-center" style="margin-bottom: 40px;">
+            <span class="badge-title">FASILITAS & DOKUMENTASI KAMI</span>
+            <h1 class="section-title">Galeri Kampus</h1>
+            <hr class="title-underline">
+            <p style="color: #64748b; max-width: 600px; margin: 0 auto; line-height: 1.7; font-size: 15px;">
+                Jelajahi berbagai fasilitas pendukung belajar, laboratorium, sarana olahraga, dan lingkungan inspiratif di institusi kami.
+            </p>
+        </div>
+
+        <!-- Tombol Filter Kategori -->
+        <div class="gallery-filters text-center" style="margin-bottom: 40px;">
+            <button class="gallery-filter-btn active" data-filter="all">Semua Foto</button>
+            <?php
+            $terms = get_terms( array( 'taxonomy' => 'kategori_galeri', 'hide_empty' => true ) );
+            foreach ( $terms as $term ) {
+                echo '<button class="gallery-filter-btn" data-filter="' . esc_attr( $term->slug ) . '">' . esc_html( $term->name ) . '</button>';
+            }
+            ?>
+        </div>
+
+        <!-- Grid Foto Galeri -->
+        <div class="gallery-grid" id="edukarsa-gallery-grid">
+            <?php
+            $query_galeri = new WP_Query( array( 'post_type' => 'galeri', 'posts_per_page' => -1 ) );
+            if ( $query_galeri->have_posts() ) :
+                $idx = 0;
+                while ( $query_galeri->have_posts() ) : $query_galeri->the_post();
+                    // Ambil kategori untuk filter class
+                    $terms = get_the_terms( get_the_ID(), 'kategori_galeri' );
+                    $term_slugs = '';
+                    $term_names = '';
+                    if ( $terms && ! is_wp_error( $terms ) ) {
+                        $slugs = array();
+                        $names = array();
+                        foreach ( $terms as $term ) {
+                            $slugs[] = $term->slug;
+                            $names[] = $term->name;
+                        }
+                        $term_slugs = implode( ' ', $slugs );
+                        $term_names = implode( ', ', $names );
+                    }
+                    
+                    // Ambil URL gambar dan deskripsi
+                    $img_full = has_post_thumbnail() ? get_the_post_thumbnail_url( get_the_ID(), 'full' ) : '';
+                    $img_thumb = has_post_thumbnail() ? get_the_post_thumbnail_url( get_the_ID(), 'large' ) : '';
+                    
+                    // Prioritaskan Excerpt, jika kosong ambil paragraf pertama dari Content
+                    $desc = wp_strip_all_tags( get_the_excerpt() );
+                    if ( empty($desc) ) { 
+                        $desc = wp_trim_words( wp_strip_all_tags( get_the_content() ), 25, '...' ); 
+                    }
+                    ?>
+                    
+                    <div class="gallery-item-card <?php echo esc_attr( $term_slugs ); ?>" 
+                         data-src="<?php echo esc_url( $img_full ); ?>" 
+                         data-title="<?php echo esc_attr( get_the_title() ); ?>" 
+                         data-desc="<?php echo esc_attr( $desc ); ?>"
+                         data-cat="<?php echo esc_attr( $term_names ); ?>">
+                        
+                        <div class="gallery-img-wrapper">
+                            <?php if ( $img_thumb ) : ?>
+                                <img src="<?php echo esc_url( $img_thumb ); ?>" alt="<?php the_title(); ?>" loading="lazy">
+                            <?php else: ?>
+                                <div class="img-placeholder" style="height: 100%;"><i>📸</i></div>
+                            <?php endif; ?>
+                            
+                            <div class="gallery-overlay">
+                                <span class="gallery-zoom-icon">🔍</span>
+                            </div>
+                        </div>
+                        
+                        <div class="gallery-item-info">
+                            <h4><?php the_title(); ?></h4>
+                            <?php if($term_names): ?>
+                                <span class="gallery-cat-badge"><?php echo esc_html( $term_names ); ?></span>
+                            <?php endif; ?>
+                        </div>
+                        
+                    </div>
+                    <?php
+                    $idx++;
+                endwhile;
+                wp_reset_postdata();
+            else :
+                echo '<div style="grid-column: 1 / -1; text-align: center; padding: 40px; background: #fff; border-radius: 12px; border: 1px dashed #cbd5e1; color: #64748b;">Belum ada foto galeri yang dipublikasikan.</div>';
+            endif;
+            ?>
+        </div>
+    </div>
+</main>
+
+<!-- VANILLA JS LIGHTBOX (ZOOM EFFECT OVERLAY) -->
+<div id="ek-lightbox" class="ek-lightbox">
+    <span class="ek-lb-close" id="ek-lb-close" title="Tutup">&times;</span>
+    <div class="ek-lb-content">
+        <div class="ek-lb-img-container">
+            <img id="ek-lb-img" src="" alt="">
+        </div>
+        <div class="ek-lb-caption">
+            <span id="ek-lb-cat" class="ek-lb-cat"></span>
+            <h3 id="ek-lb-title"></h3>
+            <p id="ek-lb-desc"></p>
+        </div>
+    </div>
+    <button class="ek-lb-nav ek-lb-prev" id="ek-lb-prev" title="Sebelumnya">&#10094;</button>
+    <button class="ek-lb-nav ek-lb-next" id="ek-lb-next" title="Selanjutnya">&#10095;</button>
+</div>
+
+<!-- Logika Interaktif Native JS -->
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    // 1. LOGIKA FILTER KATEGORI (SMOOTH FADE)
+    const filterBtns = document.querySelectorAll('.gallery-filter-btn');
+    const galleryItems = document.querySelectorAll('.gallery-item-card');
+
+    filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            // Hapus status aktif dari semua tombol
+            filterBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            
+            const filterValue = btn.getAttribute('data-filter');
+
+            galleryItems.forEach(item => {
+                // Sembunyikan dengan fade out
+                item.style.opacity = '0';
+                item.style.transform = 'scale(0.95)';
+                
+                setTimeout(() => {
+                    if (filterValue === 'all' || item.classList.contains(filterValue)) {
+                        item.style.display = 'block';
+                        // Beri jeda sedikit agar display block dirender sebelum mengubah opacity
+                        setTimeout(() => {
+                            item.style.opacity = '1';
+                            item.style.transform = 'scale(1)';
+                        }, 50);
+                    } else {
+                        item.style.display = 'none';
+                    }
+                }, 300); // 300ms sesuaikan dengan durasi CSS transition
+            });
+        });
+    });
+
+    // 2. LOGIKA LIGHTBOX / ZOOM SLIDER
+    const lightbox = document.getElementById('ek-lightbox');
+    const lbImg = document.getElementById('ek-lb-img');
+    const lbTitle = document.getElementById('ek-lb-title');
+    const lbDesc = document.getElementById('ek-lb-desc');
+    const lbCat = document.getElementById('ek-lb-cat');
+    const closeBtn = document.getElementById('ek-lb-close');
+    const prevBtn = document.getElementById('ek-lb-prev');
+    const nextBtn = document.getElementById('ek-lb-next');
+
+    let currentIndex = 0;
+    let visibleItems = [];
+
+    // Fungsi untuk memperbarui daftar item yang sedang tidak disembunyikan oleh filter
+    function updateVisibleItems() {
+        visibleItems = Array.from(galleryItems).filter(item => item.style.display !== 'none');
+    }
+
+    function openLightbox(index) {
+        if(visibleItems.length === 0) return;
+        currentIndex = index;
+        const item = visibleItems[currentIndex];
+        
+        lbImg.src = item.getAttribute('data-src');
+        lbTitle.textContent = item.getAttribute('data-title');
+        lbDesc.textContent = item.getAttribute('data-desc');
+        lbCat.textContent = item.getAttribute('data-cat');
+        
+        lightbox.classList.add('show');
+        document.body.style.overflow = 'hidden'; // Kunci scroll halaman belakang
+    }
+
+    function closeLightbox() {
+        lightbox.classList.remove('show');
+        document.body.style.overflow = ''; // Kembalikan scroll
+        setTimeout(() => lbImg.src = '', 300); // Bersihkan gambar setelah animasi tutup
+    }
+
+    function showNext() {
+        currentIndex = (currentIndex + 1) % visibleItems.length;
+        openLightbox(currentIndex);
+    }
+
+    function showPrev() {
+        currentIndex = (currentIndex - 1 + visibleItems.length) % visibleItems.length;
+        openLightbox(currentIndex);
+    }
+
+    // Pasang Event Klik pada setiap foto di Grid
+    galleryItems.forEach(item => {
+        item.addEventListener('click', function() {
+            updateVisibleItems();
+            const idx = visibleItems.indexOf(this);
+            if(idx !== -1) openLightbox(idx);
+        });
+    });
+
+    // Event Navigasi Lightbox
+    closeBtn.addEventListener('click', closeLightbox);
+    nextBtn.addEventListener('click', showNext);
+    prevBtn.addEventListener('click', showPrev);
+
+    // Tutup jika mengklik area kosong di luar konten
+    lightbox.addEventListener('click', function(e) {
+        if (e.target === lightbox) closeLightbox();
+    });
+
+    // Dukungan Navigasi Keyboard
+    document.addEventListener('keydown', function(e) {
+        if (!lightbox.classList.contains('show')) return;
+        if (e.key === 'Escape') closeLightbox();
+        if (e.key === 'ArrowRight') showNext();
+        if (e.key === 'ArrowLeft') showPrev();
+    });
+});
+</script>
+
+<?php get_footer(); ?>

style.css

@@ -717,3 +717,304 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
 .sidebar-html-rendered-content { font-size: 14px; line-height: 1.7; color: var(--text-color); }
 .sidebar-html-rendered-content iframe { width: 100% !important; border-radius: 8px; border: none; }
 .sidebar-html-rendered-content img { border-radius: 8px; margin: 10px 0; }
+
+/* ---------------------------------------------------------
+   MODUL GALERI & FASILITAS (GRID + LIGHTBOX)
+--------------------------------------------------------- */
+.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
+.gallery-filter-btn {
+    background: #ffffff; 
+    border: 2px solid #e2e8f0; 
+    color: var(--text-muted);
+    padding: 8px 22px; 
+    border-radius: 50px; 
+    font-weight: 700; 
+    font-size: 14px;
+    cursor: pointer; 
+    transition: all 0.3s ease;
+}
+.gallery-filter-btn:hover, .gallery-filter-btn.active {
+    background: var(--primary-color); 
+    border-color: var(--primary-color); 
+    color: #ffffff;
+    box-shadow: 0 4px 12px rgba(11, 74, 142, 0.2);
+}
+
+.gallery-grid {
+    display: grid; 
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
+    gap: 25px;
+}
+
+.gallery-item-card {
+    background: #ffffff; 
+    border-radius: 14px; 
+    overflow: hidden;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); 
+    cursor: pointer; 
+    transition: all 0.3s ease;
+    border: 1px solid #f1f5f9;
+}
+.gallery-item-card:hover { 
+    transform: translateY(-6px); 
+    box-shadow: 0 15px 35px rgba(11, 74, 142, 0.12); 
+    border-color: var(--secondary-color);
+}
+
+.gallery-img-wrapper { 
+    position: relative; 
+    aspect-ratio: 4/3; 
+    overflow: hidden; 
+    background: #f8fafc;
+}
+.gallery-img-wrapper img { 
+    width: 100%; 
+    height: 100%; 
+    object-fit: cover; 
+    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
+}
+.gallery-item-card:hover .gallery-img-wrapper img { 
+    transform: scale(1.08); 
+}
+
+.gallery-overlay {
+    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+    background: linear-gradient(to bottom, rgba(11,74,142,0.2) 0%, rgba(11,74,142,0.8) 100%); 
+    display: flex; align-items: center; justify-content: center;
+    opacity: 0; transition: opacity 0.3s ease;
+}
+.gallery-item-card:hover .gallery-overlay { opacity: 1; }
+
+.gallery-zoom-icon { 
+    font-size: 32px; color: #fff; 
+    transform: translateY(20px); 
+    transition: transform 0.3s ease; 
+    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
+}
+.gallery-item-card:hover .gallery-zoom-icon { transform: translateY(0); }
+
+.gallery-item-info { padding: 22px 20px; }
+.gallery-item-info h4 { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--heading-color); line-height: 1.4; }
+.gallery-cat-badge { 
+    display: inline-block;
+    font-size: 11px; font-weight: 800; 
+    color: var(--secondary-color); 
+    text-transform: uppercase; 
+    letter-spacing: 0.5px;
+    background: #e0f2fe; padding: 4px 12px; border-radius: 20px; 
+}
+
+/* NATIVE LIGHTBOX (ZOOM EFEK) */
+.ek-lightbox {
+    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(15, 23, 42, 0.96); z-index: 9999;
+    display: flex; align-items: center; justify-content: center;
+    opacity: 0; visibility: hidden; transition: all 0.3s ease; 
+    backdrop-filter: blur(8px);
+}
+.ek-lightbox.show { opacity: 1; visibility: visible; }
+
+.ek-lb-close { 
+    position: absolute; top: 25px; right: 35px; font-size: 45px; 
+    color: rgba(255,255,255,0.6); cursor: pointer; line-height: 1; 
+    transition: color 0.2s, transform 0.2s; z-index: 10;
+}
+.ek-lb-close:hover { color: #f59e0b; transform: scale(1.1); }
+
+.ek-lb-content {
+    max-width: 900px; width: 92%; max-height: 90vh;
+    display: flex; flex-direction: column; 
+    background: #ffffff; border-radius: 16px; overflow: hidden;
+    transform: scale(0.95); transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+.ek-lightbox.show .ek-lb-content { transform: scale(1); }
+
+.ek-lb-img-container {
+    width: 100%; height: 60vh; background: #000;
+    display: flex; align-items: center; justify-content: center;
+}
+.ek-lb-img-container img { 
+    width: 100%; height: 100%; object-fit: contain; 
+}
+
+.ek-lb-caption { padding: 25px 35px; text-align: center; }
+.ek-lb-cat { 
+    font-size: 12px; font-weight: 800; color: var(--secondary-color); 
+    text-transform: uppercase; letter-spacing: 1px; display: inline-block; 
+    margin-bottom: 8px; background: #f1f5f9; padding: 4px 14px; border-radius: 20px;
+}
+.ek-lb-caption h3 { margin: 0 0 12px; font-size: 24px; font-weight: 800; color: var(--heading-color); }
+.ek-lb-caption p { margin: 0; font-size: 15px; color: var(--text-color); line-height: 1.7; }
+
+/* Tombol Navigasi Lightbox */
+.ek-lb-nav {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); 
+    color: #ffffff; width: 56px; height: 56px; border-radius: 50%; 
+    font-size: 20px; cursor: pointer; transition: all 0.2s ease; 
+    display: flex; align-items: center; justify-content: center;
+}
+.ek-lb-nav:hover { background: var(--primary-color); border-color: var(--primary-color); transform: translateY(-50%) scale(1.1); }
+.ek-lb-prev { left: 40px; }
+.ek-lb-next { right: 40px; }
+
+@media (max-width: 768px) {
+    .ek-lb-nav { width: 44px; height: 44px; font-size: 16px; }
+    .ek-lb-prev { left: 15px; }
+    .ek-lb-next { right: 15px; }
+    .ek-lb-close { top: 15px; right: 20px; font-size: 35px; }
+    .ek-lb-img-container { height: 45vh; }
+    .ek-lb-caption { padding: 20px; }
+    .ek-lb-caption h3 { font-size: 20px; }
+    .gallery-grid { grid-template-columns: 1fr; }
+}
+
+/* 22. FIX: HILANGKAN BULLET PADA SUB-MENU DROPDOWN */
+.nav-menu-custom .sub-menu, 
+.nav-menu-custom .sub-menu li {
+    list-style: none !important;
+    list-style-type: none !important;
+}
+.nav-menu-custom .sub-menu li::before {
+    content: none !important;
+    display: none !important;
+}
+
+/* 23. NATIVE POP-UP FLYER MODAL */
+body.edukarsa-popup-open {
+    overflow: hidden;
+}
+.edukarsa-popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(15, 23, 42, 0.78);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
+}
+.edukarsa-popup-overlay.is-visible {
+    opacity: 1;
+    visibility: visible;
+}
+.edukarsa-popup-card {
+    position: relative;
+    background: #ffffff;
+    border-radius: 18px;
+    max-width: 520px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4);
+    transform: scale(0.92) translateY(15px);
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.edukarsa-popup-overlay.is-visible .edukarsa-popup-card {
+    transform: scale(1) translateY(0);
+}
+.edukarsa-popup-close {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(15, 23, 42, 0.75);
+    color: #ffffff;
+    border: 2px solid #ffffff;
+    font-size: 24px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: background 0.2s, transform 0.2s;
+}
+.edukarsa-popup-close:hover {
+    background: #e11d48;
+    transform: scale(1.1);
+}
+.edukarsa-popup-media {
+    width: 100%;
+    background: #0f172a;
+    display: block;
+    line-height: 0;
+}
+.edukarsa-popup-media img {
+    width: 100%;
+    height: auto;
+    max-height: 380px;
+    object-fit: contain;
+    display: block;
+    margin: 0 auto;
+}
+.edukarsa-popup-img-link {
+    display: block;
+    cursor: pointer;
+}
+.edukarsa-popup-details {
+    padding: 24px 28px;
+    text-align: center;
+    background: #ffffff;
+}
+.edukarsa-popup-badge {
+    display: inline-block;
+    padding: 4px 14px;
+    background: #e0f2fe;
+    color: var(--primary-color);
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    border-radius: 20px;
+    margin-bottom: 10px;
+}
+.edukarsa-popup-heading {
+    font-size: 20px;
+    font-weight: 800;
+    color: var(--heading-color);
+    margin: 0 0 10px;
+    line-height: 1.35;
+}
+.edukarsa-popup-desc {
+    font-size: 14px;
+    color: var(--text-color);
+    line-height: 1.6;
+    margin: 0 0 20px;
+}
+.edukarsa-popup-action {
+    margin-top: 15px;
+}
+.edukarsa-popup-btn {
+    display: inline-block;
+    padding: 12px 32px;
+    font-size: 15px;
+    font-weight: 800;
+    border-radius: 50px;
+    box-shadow: 0 6px 18px rgba(11, 74, 142, 0.25);
+}
+.edukarsa-popup-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(11, 74, 142, 0.35);
+}
+
+@media (max-width: 600px) {
+    .edukarsa-popup-card { max-width: 95%; border-radius: 14px; }
+    .edukarsa-popup-details { padding: 18px 16px; }
+    .edukarsa-popup-heading { font-size: 18px; }
+    .edukarsa-popup-desc { font-size: 13px; }
+    .edukarsa-popup-btn { padding: 10px 24px; font-size: 14px; }
+    .edukarsa-popup-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 20px; }
+}