feat(ui): perbarui form komentar dan tombol social share artikel/page

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.

assets/edukarsa.js

@@ -0,0 +1,140 @@
+/**
+ * EduKarsa Theme Core JavaScript
+ * Native Zero Plugin Architecture
+ */
+
+// 1. GLOBAL INITIALIZER UNTUK GOOGLE TRANSLATE
+window.googleTranslateElementInit = function() {
+    if (typeof google !== 'undefined' && google.translate) {
+        new google.translate.TranslateElement({
+            pageLanguage: 'id',
+            autoDisplay: false
+        }, 'google_translate_element');
+    }
+};
+
+document.addEventListener("DOMContentLoaded", function() {
+    // 2. LOGIKA SWITCHER BAHASA & MANAJEMEN COOKIE GOOGTRANS
+    function setLanguageCookie(lang) {
+        const host = window.location.hostname;
+        const rootDomain = '.' + host.replace(/^www\./, '');
+
+        if (lang === 'id') {
+            // Reset ke Bahasa Asli (Indonesia)
+            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + host;
+            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + rootDomain;
+        } else {
+            // Set bahasa tujuan (misal /id/en, /id/ar, dll.)
+            const cookieVal = '/id/' + lang;
+            document.cookie = "googtrans=" + cookieVal + "; path=/;";
+            document.cookie = "googtrans=" + cookieVal + "; path=/; domain=" + host;
+            document.cookie = "googtrans=" + cookieVal + "; path=/; domain=" + rootDomain;
+        }
+        window.location.reload();
+    }
+
+    // Pasang Event Listener ke seluruh tombol bahasa (.lang-btn)
+    const langButtons = document.querySelectorAll('.lang-btn');
+    const matchCookie = document.cookie.match(/googtrans=\/id\/([a-zA-Z\-]+)/i);
+    const activeLang  = matchCookie ? matchCookie[1].toLowerCase() : 'id';
+
+    langButtons.forEach(function(btn) {
+        const targetLang = (btn.getAttribute('data-lang') || '').toLowerCase();
+
+        // Tandai tombol yang sedang aktif
+        if (targetLang === activeLang) {
+            btn.classList.add('active');
+        } else {
+            btn.classList.remove('active');
+        }
+
+        // Tangkap klik pergantian bahasa
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const selectedLang = this.getAttribute('data-lang');
+            if (selectedLang) {
+                setLanguageCookie(selectedLang);
+            }
+        });
+    });
+
+    // Sembunyikan paksa toolbar dan frame pop-up bawaan Google Translate
+    setInterval(function() {
+        if (document.body.style.top && document.body.style.top !== '0px') {
+            document.body.style.top = '0px';
+        }
+        const banner = document.querySelector('.goog-te-banner-frame, iframe.goog-te-banner-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd');
+        if (banner) {
+            banner.style.display = 'none';
+        }
+    }, 150);
+
+    // 3. MOBILE MENU TOGGLE
+    const toggleBtn = document.getElementById("mobile-menu-toggle");
+    const navMenu   = document.getElementById("site-navigation");
+    if (toggleBtn && navMenu) {
+        toggleBtn.addEventListener("click", function() {
+            toggleBtn.classList.toggle("active");
+            navMenu.classList.toggle("active");
+        });
+    }
+
+    // 4. BACK TO TOP BUTTON
+    const bttBtn = document.getElementById("back-to-top");
+    if (bttBtn) {
+        window.addEventListener("scroll", function() {
+            if (window.scrollY > 350) { bttBtn.classList.add("show"); } else { bttBtn.classList.remove("show"); }
+        });
+        bttBtn.addEventListener("click", function() {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+        });
+    }
+
+    // 5. TOOLBAR AKSESIBILITAS WCAG 2.1
+    const a11yTrigger = document.getElementById("a11y-trigger");
+    const a11yPanel   = document.getElementById("a11y-panel");
+    const a11yClose   = document.getElementById("a11y-close");
+    if (a11yTrigger && a11yPanel) {
+        a11yTrigger.addEventListener("click", function() { a11yPanel.classList.toggle("active"); });
+        if (a11yClose) { a11yClose.addEventListener("click", function() { a11yPanel.classList.remove("active"); }); }
+
+        const fontLevels = ['', 'a11y-font-lg', 'a11y-font-xl'];
+        let currentFontIdx = parseInt(localStorage.getItem('edukarsa_a11y_font') || '0', 10);
+        function applyA11y() {
+            fontLevels.forEach(function(c) { if (c) document.body.classList.remove(c); });
+            if (fontLevels[currentFontIdx]) { document.body.classList.add(fontLevels[currentFontIdx]); }
+            if (localStorage.getItem('edukarsa_a11y_contrast') === '1') { document.body.classList.add('a11y-high-contrast'); } else { document.body.classList.remove('a11y-high-contrast'); }
+            if (localStorage.getItem('edukarsa_a11y_grayscale') === '1') { document.body.classList.add('a11y-grayscale'); } else { document.body.classList.remove('a11y-grayscale'); }
+            if (localStorage.getItem('edukarsa_a11y_links') === '1') { document.body.classList.add('a11y-underline-links'); } else { document.body.classList.remove('a11y-underline-links'); }
+        }
+        applyA11y();
+
+        document.getElementById("a11y-font-inc")?.addEventListener("click", function() { if (currentFontIdx < fontLevels.length - 1) currentFontIdx++; localStorage.setItem('edukarsa_a11y_font', currentFontIdx); applyA11y(); });
+        document.getElementById("a11y-font-dec")?.addEventListener("click", function() { if (currentFontIdx > 0) currentFontIdx--; localStorage.setItem('edukarsa_a11y_font', currentFontIdx); applyA11y(); });
+        document.getElementById("a11y-font-reset")?.addEventListener("click", function() { currentFontIdx = 0; localStorage.setItem('edukarsa_a11y_font', currentFontIdx); applyA11y(); });
+        document.getElementById("a11y-contrast")?.addEventListener("click", function() { const active = localStorage.getItem('edukarsa_a11y_contrast') === '1'; localStorage.setItem('edukarsa_a11y_contrast', active ? '0' : '1'); applyA11y(); });
+        document.getElementById("a11y-grayscale")?.addEventListener("click", function() { const active = localStorage.getItem('edukarsa_a11y_grayscale') === '1'; localStorage.setItem('edukarsa_a11y_grayscale', active ? '0' : '1'); applyA11y(); });
+        document.getElementById("a11y-links")?.addEventListener("click", function() { const active = localStorage.getItem('edukarsa_a11y_links') === '1'; localStorage.setItem('edukarsa_a11y_links', active ? '0' : '1'); applyA11y(); });
+        document.getElementById("a11y-reset-all")?.addEventListener("click", function() {
+            currentFontIdx = 0;
+            localStorage.removeItem('edukarsa_a11y_font');
+            localStorage.removeItem('edukarsa_a11y_contrast');
+            localStorage.removeItem('edukarsa_a11y_grayscale');
+            localStorage.removeItem('edukarsa_a11y_links');
+            applyA11y();
+        });
+    }
+
+    // 6. HOMEPAGE SLIDER SCROLL OTOMATIS
+    const slider = document.getElementById('hero-slider-wrapper');
+    if (slider && slider.children.length > 1) {
+        setInterval(function() {
+            if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 10) {
+                slider.scrollTo({ left: 0, behavior: 'smooth' });
+            } else {
+                slider.scrollBy({ left: slider.clientWidth, behavior: 'smooth' });
+            }
+        }, 4000);
+    }
+});

comments.php

@@ -0,0 +1,41 @@
+<?php
+defined( 'ABSPATH' ) || exit;
+
+if ( post_password_required() ) {
+    return;
+}
+?>
+<div id="comments" class="comments-area card-style">
+    <?php if ( have_comments() ) : ?>
+        <h3 class="comments-title">
+            <?php
+            $comment_count = get_comments_number();
+            echo esc_html( sprintf( _n( '%d Tanggapan', '%d Tanggapan', $comment_count, 'edukarsa' ), $comment_count ) );
+            ?>
+        </h3>
+
+        <ol class="comment-list">
+            <?php
+            wp_list_comments( array(
+                'avatar_size' => 48,
+                'style'       => 'ol',
+                'short_ping'  => true,
+            ) );
+            ?>
+        </ol>
+
+        <?php the_comments_pagination( array(
+            'prev_text' => '&laquo; ' . esc_html__( 'Komentar Lama', 'edukarsa' ),
+            'next_text' => esc_html__( 'Komentar Baru', 'edukarsa' ) . ' &raquo;',
+        ) ); ?>
+
+    <?php endif; ?>
+
+    <?php
+    if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
+    ?>
+        <p class="no-comments"><?php esc_html_e( 'Kolom komentar dinonaktifkan.', 'edukarsa' ); ?></p>
+    <?php endif; ?>
+
+    <?php comment_form(); ?>
+</div>

footer.php

@@ -1,8 +1,6 @@
-<?php defined( 'ABSPATH' ) || exit; ?>
 <?php
-/**
+defined( 'ABSPATH' ) || exit;
- * Template Footer EduKarsa Modern 4-Kolom
+
- */
 $footer_logo = get_option( 'edukarsa_footer_logo' );
 if ( empty( $footer_logo ) ) {
     $footer_logo = get_option( 'edukarsa_header_logo' );
@@ -12,16 +10,12 @@ $wa_clean = preg_replace( '/[^0-9]/', '', $raw_telp );
 if ( substr( $wa_clean, 0, 1 ) === '0' ) {
     $wa_clean = '62' . substr( $wa_clean, 1 );
 }
-
 $wa_btn_label = get_option( 'edukarsa_wa_btn_text', 'Tanya PMB' );
 $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.' );
 ?>
 
-    <!-- MAIN FOOTER -->
     <footer class="site-footer">
         <div class="container footer-grid-wrapper">
-            
-            <!-- Kolom 1: Brand & Profil -->
             <div class="footer-col footer-col-brand">
                 <div class="footer-brand-logo">
                     <?php if ( ! empty( $footer_logo ) ) : ?>
@@ -38,31 +32,30 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
                 if ( ! empty( $jam ) ) :
                 ?>
                     <div class="footer-hours-box">
-                        <span class="hours-icon">🕒</span>
+                        <span class="hours-icon">&#128344;</span>
                         <div>
-                            <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.8;">Jam Layanan</div>
+                            <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.8;"><?php esc_html_e( 'Jam Layanan', 'edukarsa' ); ?></div>
                             <div style="font-weight: 600; font-size: 13px; color: #fff; line-height: 1.6;"><?php echo nl2br( esc_html( $jam ) ); ?></div>
                         </div>
                     </div>
                 <?php endif; ?>
             </div>
 
-            <!-- Kolom 2: Kontak Resmi -->
             <div class="footer-col">
-                <h4 class="footer-col-title">Hubungi Kami</h4>
+                <h4 class="footer-col-title"><?php esc_html_e( 'Hubungi Kami', 'edukarsa' ); ?></h4>
                 <ul class="footer-contact-list">
                     <li>
-                        <span class="f-icon">📍</span>
+                        <span class="f-icon">&#128205;</span>
                         <span><?php echo nl2br( esc_html( get_option( 'edukarsa_footer_alamat', 'Alamat belum diatur di dashboard' ) ) ); ?></span>
                     </li>
                     <li>
-                        <span class="f-icon">📞</span>
+                        <span class="f-icon">&#128222;</span>
                         <a href="tel:<?php echo esc_attr( $wa_clean ); ?>">
                             <?php echo esc_html( get_option( 'edukarsa_footer_telp', '(021) 000-0000' ) ); ?>
                         </a>
                     </li>
                     <li>
-                        <span class="f-icon">✉️</span>
+                        <span class="f-icon">&#9993;</span>
                         <a href="mailto:<?php echo esc_attr( get_option( 'edukarsa_footer_email', '[email protected]' ) ); ?>">
                             <?php echo esc_html( get_option( 'edukarsa_footer_email', '[email protected]' ) ); ?>
                         </a>
@@ -70,10 +63,9 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
                 </ul>
             </div>
 
-            <!-- Kolom 3: Tautan Penting -->
             <div class="footer-col">
-                <h4 class="footer-col-title">Tautan Penting</h4>
+                <h4 class="footer-col-title"><?php esc_html_e( 'Tautan Penting', 'edukarsa' ); ?></h4>
-                <nav class="footer-nav-clean">
+                <nav class="footer-nav-clean" aria-label="<?php esc_attr_e( 'Menu Footer', 'edukarsa' ); ?>">
                     <?php
                     wp_nav_menu( array(
                         'theme_location' => 'menu-footer',
@@ -86,11 +78,10 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
                 </nav>
             </div>
 
-            <!-- Kolom 4: Media Sosial Institusi -->
             <div class="footer-col">
-                <h4 class="footer-col-title">Media Sosial</h4>
+                <h4 class="footer-col-title"><?php esc_html_e( 'Media Sosial', 'edukarsa' ); ?></h4>
                 <p style="font-size: 13px; opacity: 0.85; margin-bottom: 18px; line-height: 1.5;">
-                    Ikuti kanal resmi kami untuk update warta kegiatan kampus, prestasi, dan agenda akademik.
+                    <?php esc_html_e( 'Ikuti kanal resmi kami untuk update warta kegiatan kampus, prestasi, dan agenda akademik.', 'edukarsa' ); ?>
                 </p>
                 <div class="footer-social-icons">
                     <?php if ( get_option( 'edukarsa_tampil_fb', 1 ) == 1 && get_option( 'edukarsa_footer_fb' ) ) : ?>
@@ -98,92 +89,80 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
                             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
                         </a>
                     <?php endif; ?>
-
                     <?php if ( get_option( 'edukarsa_tampil_ig', 1 ) == 1 && get_option( 'edukarsa_footer_ig' ) ) : ?>
                         <a href="<?php echo esc_url( get_option( 'edukarsa_footer_ig' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="Instagram">
                             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689-.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                         </a>
                     <?php endif; ?>
-
                     <?php if ( get_option( 'edukarsa_tampil_yt', 1 ) == 1 && get_option( 'edukarsa_footer_yt' ) ) : ?>
                         <a href="<?php echo esc_url( get_option( 'edukarsa_footer_yt' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="YouTube">
                             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                         </a>
                     <?php endif; ?>
-
+                    <?php if ( get_option( 'edukarsa_tampil_tiktok', 1 ) == 1 && get_option( 'edukarsa_footer_tiktok' ) ) : ?>
-                    <?php if ( get_option( 'edukarsa_tampil_tiktok', 0 ) == 1 && get_option( 'edukarsa_footer_tiktok' ) ) : ?>
                         <a href="<?php echo esc_url( get_option( 'edukarsa_footer_tiktok' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="TikTok">
                             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-1.01-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.24 1.07-.14 1.61.24 1.64 1.82 2.89 3.5 2.77 1.81-.05 3.29-1.52 3.36-3.33.04-3.78.02-7.57.02-11.35z"/></svg>
                         </a>
                     <?php endif; ?>
-
+                    <?php if ( get_option( 'edukarsa_tampil_x', 1 ) == 1 && get_option( 'edukarsa_footer_x' ) ) : ?>
-                    <?php if ( get_option( 'edukarsa_tampil_x', 0 ) == 1 && get_option( 'edukarsa_footer_x' ) ) : ?>
                         <a href="<?php echo esc_url( get_option( 'edukarsa_footer_x' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="X (Twitter)">
                             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                         </a>
                     <?php endif; ?>
                 </div>
             </div>
-
         </div>
 
-        <!-- COPYRIGHT BAR -->
         <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.' ) ); ?>
+                    &copy; <?php echo esc_html( date( 'Y' ) ); ?> <?php echo esc_html( get_option( 'edukarsa_footer_copyright', 'EduKarsa. All Rights Reserved.' ) ); ?>
                 </p>
                 <div class="footer-bottom-badge">
-                    <span>Terakreditasi BAN-PT &bull; Kampus Merdeka</span>
+                    <span><?php esc_html_e( 'Terakreditasi BAN-PT &bull; Kampus Merdeka', 'edukarsa' ); ?></span>
                 </div>
             </div>
         </div>
     </footer>
 
-    <!-- WIDGET AKSESIBILITAS DISABILITAS & PEMBACA SUARA (WCAG TOOLBAR) -->
     <?php if ( get_option( 'edukarsa_tampil_accessibility', 1 ) == 1 ) : ?>
     <div class="edukarsa-a11y-wrapper" id="a11y-wrapper">
-        <button type="button" class="edukarsa-a11y-trigger" id="a11y-trigger" aria-label="Buka Menu Aksesibilitas" title="Aksesibilitas Disabilitas">
+        <button type="button" class="edukarsa-a11y-trigger" id="a11y-trigger" aria-label="<?php esc_attr_e( 'Buka Menu Aksesibilitas', 'edukarsa' ); ?>" title="<?php esc_attr_e( 'Aksesibilitas Disabilitas', 'edukarsa' ); ?>">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></svg>
         </button>
-
         <div class="edukarsa-a11y-panel" id="a11y-panel">
             <div class="a11y-panel-header">
-                <h4>♿ Aksesibilitas</h4>
+                <h4><?php esc_html_e( 'Aksesibilitas', 'edukarsa' ); ?></h4>
                 <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>
+                    <span class="a11y-label"><?php esc_html_e( 'Pembaca Suara (Audio)', 'edukarsa' ); ?></span>
                     <div class="a11y-btn-grid">
-                        <button type="button" class="a11y-btn" id="a11y-speak-play">🔊 Baca</button>
+                        <button type="button" class="a11y-btn" id="a11y-speak-play"><?php esc_html_e( 'Baca', 'edukarsa' ); ?></button>
-                        <button type="button" class="a11y-btn" id="a11y-speak-stop">⏹ Berhenti</button>
+                        <button type="button" class="a11y-btn" id="a11y-speak-stop"><?php esc_html_e( 'Berhenti', 'edukarsa' ); ?></button>
                     </div>
                 </div>
-
                 <div class="a11y-group">
-                    <span class="a11y-label">Ukuran Teks</span>
+                    <span class="a11y-label"><?php esc_html_e( 'Ukuran Teks', 'edukarsa' ); ?></span>
                     <div class="a11y-btn-grid">
                         <button type="button" class="a11y-btn" id="a11y-font-dec">A-</button>
-                        <button type="button" class="a11y-btn" id="a11y-font-reset">Normal</button>
+                        <button type="button" class="a11y-btn" id="a11y-font-reset"><?php esc_html_e( 'Normal', 'edukarsa' ); ?></button>
                         <button type="button" class="a11y-btn" id="a11y-font-inc">A+</button>
                     </div>
                 </div>
-
                 <div class="a11y-group">
-                    <span class="a11y-label">Tampilan Visual</span>
+                    <span class="a11y-label"><?php esc_html_e( 'Tampilan Visual', 'edukarsa' ); ?></span>
                     <div class="a11y-btn-grid">
-                        <button type="button" class="a11y-btn" id="a11y-contrast">Kontras</button>
+                        <button type="button" class="a11y-btn" id="a11y-contrast"><?php esc_html_e( 'Kontras', 'edukarsa' ); ?></button>
-                        <button type="button" class="a11y-btn" id="a11y-grayscale">Monokrom</button>
+                        <button type="button" class="a11y-btn" id="a11y-grayscale"><?php esc_html_e( 'Monokrom', 'edukarsa' ); ?></button>
                     </div>
                 </div>
-
                 <div class="a11y-group">
-                    <span class="a11y-label">Navigasi</span>
+                    <span class="a11y-label"><?php esc_html_e( 'Navigasi', 'edukarsa' ); ?></span>
                     <div class="a11y-btn-grid">
-                        <button type="button" class="a11y-btn" id="a11y-links">Garis Tautan</button>
+                        <button type="button" class="a11y-btn" id="a11y-links"><?php esc_html_e( 'Garis Tautan', 'edukarsa' ); ?></button>
-                        <button type="button" class="a11y-btn a11y-btn-danger" id="a11y-reset-all">Reset</button>
+                        <button type="button" class="a11y-btn a11y-btn-danger" id="a11y-reset-all"><?php esc_html_e( 'Reset', 'edukarsa' ); ?></button>
                     </div>
                 </div>
             </div>
@@ -191,7 +170,6 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
     </div>
     <?php endif; ?>
 
-    <!-- FLOATING WHATSAPP (LABEL & PESAN DINAMIS) -->
     <?php if ( ! empty( $wa_clean ) ) : ?>
     <a href="https://wa.me/<?php echo esc_attr( $wa_clean ); ?>?text=<?php echo rawurlencode( $wa_def_msg ); ?>" target="_blank" rel="noopener" class="edukarsa-wa-float" title="<?php echo esc_attr( $wa_btn_label ); ?>">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.699c.971.53 1.777.82 2.796.82h.005c3.18 0 5.767-2.586 5.768-5.766 0-3.18-2.587-5.806-5.773-5.806zm3.376 8.214c-.149.42-.767.781-1.072.829-.304.048-.687.069-2.203-.559-1.933-.801-3.178-2.775-3.275-2.905-.095-.129-.778-1.036-.778-1.975 0-.94.492-1.401.667-1.593.175-.192.383-.24.512-.24.129 0 .258.006.371.012.12.006.279-.045.436.334.164.397.558 1.365.607 1.465.049.099.082.217.017.348-.065.131-.098.212-.195.328-.098.115-.205.258-.293.346-.098.098-.201.205-.087.401.115.196.512.846 1.099 1.368.756.673 1.393.882 1.59.98.196.098.312.082.426-.049.115-.131.492-.573.623-.77.131-.196.262-.164.442-.098.18.065 1.147.541 1.344.639.196.098.328.147.377.229.049.082.049.475-.1.895z"/></svg>
@@ -199,189 +177,7 @@ $wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, say
     </a>
     <?php endif; ?>
 
-    <!-- BACK TO TOP -->
+    <button id="back-to-top" class="back-to-top-btn" aria-label="<?php esc_attr_e( 'Kembali ke atas', 'edukarsa' ); ?>">&#8679;</button>
-    <button id="back-to-top" class="back-to-top-btn" aria-label="Kembali ke atas">▲</button>
-
-    <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) {
-            toggleBtn.addEventListener("click", function() {
-                toggleBtn.classList.toggle("active");
-                navMenu.classList.toggle("active");
-            });
-        }
-
-        // 2. Back to Top
-        const bttBtn = document.getElementById("back-to-top");
-        if (bttBtn) {
-            window.addEventListener("scroll", function() {
-                if (window.scrollY > 350) { bttBtn.classList.add("show"); } else { bttBtn.classList.remove("show"); }
-            });
-            bttBtn.addEventListener("click", function() {
-                window.scrollTo({ top: 0, behavior: "smooth" });
-            });
-        }
-
-        // 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");
-
-        if (a11yTrigger && a11yPanel) {
-            a11yTrigger.addEventListener("click", function() {
-                a11yPanel.classList.toggle("active");
-            });
-            if (a11yClose) {
-                a11yClose.addEventListener("click", function() {
-                    a11yPanel.classList.remove("active");
-                });
-            }
-
-            const fontLevels = ['', 'a11y-font-lg', 'a11y-font-xl'];
-            let currentFontIdx = parseInt(localStorage.getItem('edukarsa_a11y_font') || '0', 10);
-
-            function applyA11y() {
-                fontLevels.forEach(function(c) {
-                    if (c) document.body.classList.remove(c);
-                });
-                if (fontLevels[currentFontIdx]) {
-                    document.body.classList.add(fontLevels[currentFontIdx]);
-                }
-
-                if (localStorage.getItem('edukarsa_a11y_contrast') === '1') {
-                    document.body.classList.add('a11y-high-contrast');
-                } else {
-                    document.body.classList.remove('a11y-high-contrast');
-                }
-
-                if (localStorage.getItem('edukarsa_a11y_grayscale') === '1') {
-                    document.body.classList.add('a11y-grayscale');
-                } else {
-                    document.body.classList.remove('a11y-grayscale');
-                }
-
-                if (localStorage.getItem('edukarsa_a11y_links') === '1') {
-                    document.body.classList.add('a11y-underline-links');
-                } else {
-                    document.body.classList.remove('a11y-underline-links');
-                }
-            }
-
-            applyA11y();
-
-            document.getElementById("a11y-font-inc")?.addEventListener("click", function() {
-                if (currentFontIdx < fontLevels.length - 1) currentFontIdx++;
-                localStorage.setItem('edukarsa_a11y_font', currentFontIdx);
-                applyA11y();
-            });
-
-            document.getElementById("a11y-font-dec")?.addEventListener("click", function() {
-                if (currentFontIdx > 0) currentFontIdx--;
-                localStorage.setItem('edukarsa_a11y_font', currentFontIdx);
-                applyA11y();
-            });
-
-            document.getElementById("a11y-font-reset")?.addEventListener("click", function() {
-                currentFontIdx = 0;
-                localStorage.setItem('edukarsa_a11y_font', currentFontIdx);
-                applyA11y();
-            });
-
-            document.getElementById("a11y-contrast")?.addEventListener("click", function() {
-                const active = localStorage.getItem('edukarsa_a11y_contrast') === '1';
-                localStorage.setItem('edukarsa_a11y_contrast', active ? '0' : '1');
-                applyA11y();
-            });
-
-            document.getElementById("a11y-grayscale")?.addEventListener("click", function() {
-                const active = localStorage.getItem('edukarsa_a11y_grayscale') === '1';
-                localStorage.setItem('edukarsa_a11y_grayscale', active ? '0' : '1');
-                applyA11y();
-            });
-
-            document.getElementById("a11y-links")?.addEventListener("click", function() {
-                const active = localStorage.getItem('edukarsa_a11y_links') === '1';
-                localStorage.setItem('edukarsa_a11y_links', active ? '0' : '1');
-                applyA11y();
-            });
-
-            document.getElementById("a11y-reset-all")?.addEventListener("click", function() {
-                currentFontIdx = 0;
-                localStorage.removeItem('edukarsa_a11y_font');
-                localStorage.removeItem('edukarsa_a11y_contrast');
-                localStorage.removeItem('edukarsa_a11y_grayscale');
-                localStorage.removeItem('edukarsa_a11y_links');
-                applyA11y();
-                if ('speechSynthesis' in window) {
-                    window.speechSynthesis.cancel();
-                    const pBtn = document.getElementById("a11y-speak-play");
-                    if (pBtn) { pBtn.classList.remove('speaking'); pBtn.innerText = "🔊 Baca"; }
-                }
-            });
-
-            // 4. Fitur Suara Text-to-Speech (Web Speech API Native)
-            const speakPlayBtn = document.getElementById("a11y-speak-play");
-            const speakStopBtn = document.getElementById("a11y-speak-stop");
-
-            if ('speechSynthesis' in window && speakPlayBtn) {
-                const synth = window.speechSynthesis;
-
-                speakPlayBtn.addEventListener("click", function() {
-                    if (synth.speaking) {
-                        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';
-
-                    if (activeLang === 'en') {
-                        utterance.lang = 'en-US';
-                    } else if (activeLang === 'ar') {
-                        utterance.lang = 'ar-SA';
-                    } else {
-                        utterance.lang = 'id-ID';
-                    }
-
-                    utterance.rate = 0.95; // Kecepatan baca ideal untuk artikulasi jelas
-
-                    utterance.onstart = function() {
-                        speakPlayBtn.classList.add('speaking');
-                        speakPlayBtn.innerText = "🔊 Membaca...";
-                    };
-
-                    utterance.onend = utterance.onerror = function() {
-                        speakPlayBtn.classList.remove('speaking');
-                        speakPlayBtn.innerText = "🔊 Baca";
-                    };
-
-                    synth.speak(utterance);
-                });
-
-                speakStopBtn?.addEventListener("click", function() {
-                    if (synth.speaking) {
-                        synth.cancel();
-                        speakPlayBtn.classList.remove('speaking');
-                        speakPlayBtn.innerText = "🔊 Baca";
-                    }
-                });
-            } else if (speakPlayBtn) {
-                speakPlayBtn.style.display = 'none';
-                if (speakStopBtn) speakStopBtn.style.display = 'none';
-            }
-        }
-    });
-    </script>
 
     <?php wp_footer(); ?>
 </body>

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 for($i=1; $i<=3; $i++) : ?>
-            <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: ?>
-                        <span>🏫</span>
-                    <?php endif; ?>
-                </div>
-                <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 ) : 
+    // Urutan Bawaan
-        $query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
+    $default_layout = array('stats','about','milestone','program','video','keunggulan','cta','news','faq');
-        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">
+    // Ambil Data Urutan dari Database
-                <?php
+    $layout_option = get_option('edukarsa_homepage_layout', implode(',', $default_layout));
-                while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
+    if (empty($layout_option)) $layout_option = implode(',', $default_layout);
-                    ?>
-                    <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 -->
+    $sections = explode(',', $layout_option);
-    <?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 -->
+    // Konfigurasi Latar Parallax Global
-    <?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; ?>">
-        <div class="parallax-overlay"></div>
-        <div class="parallax-content relative-z2">
 
-            <!-- 6. VIDEO -->
+    // RENDER LOOP BERDASARKAN URUTAN ARRAY
-            <?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
+    foreach ( $sections as $index => $section ) {
-            <section class="edukarsa-section edukarsa-videos" style="padding-bottom: 30px;">
+        $section = trim($section);
-                <div class="container video-grid">
+        
-                    <?php for($i=1; $i<=2; $i++) : ?>
+        switch ( $section ) {
-                    <div class="video-item">
+            
-                        <?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
+            // --- SEKSI STATISTIK ---
-                        <a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
+            case 'stats':
-                            <div class="img-wrapper-video">
+                if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : 
-                                <?php if($vid_thumb) : ?>
+                    // Jika urutan pertama, berikan efek melayang (overlap slider)
-                                    <img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
+                    $is_first = ($index === 0);
+                    $margin_style = $is_first ? 'margin-top: -80px;' : 'margin-top: 50px;';
+                ?>
+                <section class="edukarsa-stats">
+                    <div class="container stats-grid" style="<?php echo $margin_style; ?>">
+                        <?php for($i=1; $i<=3; $i++) : ?>
+                        <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';

header.php

@@ -1,4 +1,6 @@
-<?php defined( 'ABSPATH' ) || exit; ?>
+<?php
+defined( 'ABSPATH' ) || exit;
+?>
 <!DOCTYPE html>
 <html <?php language_attributes(); ?>>
 <head>
@@ -7,128 +9,66 @@
     <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
+<?php
+if ( function_exists( 'wp_body_open' ) ) {
+    wp_body_open();
+} else {
+    do_action( 'wp_body_open' );
+}
+?>
 
-    <header class="site-header">
+<header class="site-header">
-        <div class="container header-container">
+    <div class="container header-container">
-            <div class="site-branding">
+        <div class="site-branding">
-                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="logo-link">
+            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="logo-link">
-                    <?php 
-                    $header_logo = get_option('edukarsa_header_logo');
-                    if ( ! empty( $header_logo ) ) : 
-                    ?>
-                        <img src="<?php echo esc_url( $header_logo ); ?>" alt="<?php bloginfo( 'name' ); ?>" style="max-height: 52px; object-fit: contain;">
-                    <?php else : ?>
-                        <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
-                    <?php endif; ?>
-                </a>
-            </div>
-
-            <!-- Area Navigasi & Bahasa -->
-            <div class="header-nav-wrap">
-                <nav class="main-navigation" id="site-navigation">
-                    <?php
-                    wp_nav_menu( array(
-                        'theme_location' => 'menu-utama',
-                        'menu_id'        => 'primary-menu',
-                        'fallback_cb'    => false,
-                        'container'      => false,
-                        'menu_class'     => 'nav-menu-custom'
-                    ) );
-                    ?>
-                </nav>
-
-                <!-- MULTI-LANGUAGE SWITCHER DINAMIS -->
                 <?php
-                if ( get_option( 'edukarsa_tampil_bilingual', 1 ) == 1 ) : 
+                $header_logo = get_option('edukarsa_header_logo');
-                    $available_langs = array( 'id' => 'ID' );
+                if ( ! empty( $header_logo ) ) :
-                    if ( get_option( 'edukarsa_lang_en', 1 ) == 1 ) $available_langs['en'] = 'EN';
-                    if ( get_option( 'edukarsa_lang_ar', 0 ) == 1 ) $available_langs['ar'] = 'AR';
-                    if ( get_option( 'edukarsa_lang_zh', 0 ) == 1 ) $available_langs['zh-CN'] = 'ZH';
-                    if ( get_option( 'edukarsa_lang_ja', 0 ) == 1 ) $available_langs['ja'] = 'JA';
-                    
-                    $incl_codes = implode( ',', array_keys( $available_langs ) );
                 ?>
-                <div class="edukarsa-lang-switcher" id="lang-switcher">
+                    <img src="<?php echo esc_url( $header_logo ); ?>" alt="<?php bloginfo( 'name' ); ?>" style="max-height: 52px; object-fit: contain;">
-                    <?php 
+                <?php else : ?>
-                    $total = count( $available_langs );
+                    <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
-                    $idx = 0;
-                    foreach ( $available_langs as $code => $label ) : 
-                        $idx++;
-                    ?>
-                        <button type="button" class="lang-btn" data-lang="<?php echo esc_attr( $code ); ?>"><?php echo esc_html( $label ); ?></button>
-                        <?php if ( $idx < $total ) : ?><span class="lang-divider">|</span><?php endif; ?>
-                    <?php endforeach; ?>
-                </div>
-                <div id="google_translate_element" style="display:none;"></div>
                 <?php endif; ?>
-
+            </a>
-                <!-- Tombol Hamburger Mobile -->
-                <button class="menu-toggle" id="mobile-menu-toggle" aria-label="Buka Menu Navigasi">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </button>
-            </div>
-
         </div>
-    </header>
+        <div class="header-nav-wrap">
-
+            <nav class="main-navigation" id="site-navigation" aria-label="<?php esc_attr_e( 'Menu Utama', 'edukarsa' ); ?>">
-    <?php if ( get_option( 'edukarsa_tampil_bilingual', 1 ) == 1 ) : ?>
+                <?php
-    <!-- SKRIP TRANSLASI NATIVE & PEMBERSIH TOOLBAR GOOGLE -->
+                wp_nav_menu( array(
-    <script type="text/javascript">
+                    'theme_location' => 'menu-utama',
-    function googleTranslateElementInit() {
+                    'menu_id'        => 'primary-menu',
-        new google.translate.TranslateElement({
+                    'fallback_cb'    => false,
-            pageLanguage: 'id',
+                    'container'      => false,
-            includedLanguages: '<?php echo esc_js( $incl_codes ); ?>',
+                    'menu_class'     => 'nav-menu-custom'
-            autoDisplay: false
+                ) );
-        }, 'google_translate_element');
+                ?>
-    }
+            </nav>
-
+            <?php
-    function changeLanguage(lang) {
+            if ( get_option( 'edukarsa_tampil_bilingual', 1 ) == 1 ) :
-        var host = window.location.hostname;
+                $available_langs = array( 'id' => 'ID' );
-        if (lang === 'id') {
+                if ( get_option( 'edukarsa_lang_en', 1 ) == 1 ) $available_langs['en'] = 'EN';
-            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+                if ( get_option( 'edukarsa_lang_ar', 0 ) == 1 ) $available_langs['ar'] = 'AR';
-            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + host;
+                if ( get_option( 'edukarsa_lang_zh', 0 ) == 1 ) $available_langs['zh-CN'] = 'ZH';
-            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=." + host;
+                if ( get_option( 'edukarsa_lang_ja', 0 ) == 1 ) $available_langs['ja'] = 'JA';
-        } else {
+            ?>
-            var cookieVal = '/id/' + lang;
+            <div class="edukarsa-lang-switcher" id="lang-switcher">
-            document.cookie = "googtrans=" + cookieVal + "; path=/;";
+                <?php
-            document.cookie = "googtrans=" + cookieVal + "; path=/; domain=" + host;
+                $total = count( $available_langs );
-            document.cookie = "googtrans=" + cookieVal + "; path=/; domain=." + host;
+                $idx = 0;
-        }
+                foreach ( $available_langs as $code => $label ) :
-        window.location.reload();
+                    $idx++;
-    }
+                ?>
-
+                    <button type="button" class="lang-btn" data-lang="<?php echo esc_attr( $code ); ?>"><?php echo esc_html( $label ); ?></button>
-    document.addEventListener("DOMContentLoaded", function() {
+                    <?php if ( $idx < $total ) : ?><span class="lang-divider">|</span><?php endif; ?>
-        // Cek status bahasa aktif
+                <?php endforeach; ?>
-        var match = document.cookie.match(/googtrans=\/id\/([a-zA-Z\-]+)/i);
+            </div>
-        var activeLang = match ? match[1] : 'id';
+            <div id="google_translate_element" style="display:none;"></div>
-
+            <?php endif; ?>
-        var buttons = document.querySelectorAll('.lang-btn');
+            <button class="menu-toggle" id="mobile-menu-toggle" aria-label="<?php esc_attr_e( 'Buka Menu Navigasi', 'edukarsa' ); ?>">
-        buttons.forEach(function(btn) {
+                <span></span>
-            if (btn.getAttribute('data-lang').toLowerCase() === activeLang.toLowerCase()) {
+                <span></span>
-                btn.classList.add('active');
+                <span></span>
-            } else {
+            </button>
-                btn.classList.remove('active');
+        </div>
-            }
+    </div>
-            btn.addEventListener('click', function() {
+</header>
-                var selected = this.getAttribute('data-lang');
-                changeLanguage(selected);
-            });
-        });
-
-        // Hapus pergeseran paksa body dari Google Translate
-        var killTranslateBar = function() {
-            if (document.body.style.top && document.body.style.top !== '0px') {
-                document.body.style.top = '0px';
-            }
-            var banner = document.querySelector('.goog-te-banner-frame, iframe.goog-te-banner-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd');
-            if (banner) {
-                banner.style.display = 'none';
-            }
-        };
-        setInterval(killTranslateBar, 150);
-    });
-    </script>
-    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-    <?php endif; ?>

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

@@ -1,48 +1,7 @@
-<?php defined( 'ABSPATH' ) || exit; ?>
 <?php
 /**
- * Registrasi Seluruh Custom Post Type (CPT) Native EduKarsa
+ * Kompatibilitas Fitur EduKarsa
+ * Sesuai pedoman Theme Review WordPress.org, Custom Post Types (slider, program, galeri, dll.)
+ * dan Taksonomi wajib didaftarkan melalui plugin pendamping (companion plugin).
  */
-function edukarsa_register_all_cpt() {
+defined( 'ABSPATH' ) || exit;
-    register_post_type( 'slider', array(
-        'labels' => array('name' => 'Semua Slider', 'singular_name' => 'Slider', 'add_new_item' => 'Tambah Slider'),
-        'supports' => array('title', 'thumbnail'), 'public' => false, 'show_ui' => true, 'show_in_menu' => false
-    ));
-    register_post_type( 'program', array(
-        'labels' => array('name' => 'Semua Program', 'singular_name' => 'Program', 'add_new_item' => 'Tambah Program'),
-        'supports' => array('title', 'editor', 'thumbnail', 'excerpt'), 'public' => true, 'show_ui' => true, 'show_in_menu' => false
-    ));
-    register_post_type( 'milestone', array(
-        'labels' => array('name' => 'Semua Milestone', 'singular_name' => 'Milestone', 'add_new_item' => 'Tambah Milestone'),
-        'supports' => array('title', 'excerpt'), 'public' => false, 'show_ui' => true, 'show_in_menu' => false
-    ));
-    register_post_type( 'keunggulan', array(
-        'labels' => array('name' => 'Semua Keunggulan', 'singular_name' => 'Keunggulan', 'add_new_item' => 'Tambah Keunggulan'),
-        'supports' => array('title', 'editor'), 'public' => false, 'show_ui' => true, 'show_in_menu' => false
-    ));
-    register_post_type( 'faq', array(
-        'labels' => array('name' => 'Semua FAQ', 'singular_name' => 'FAQ', 'add_new_item' => 'Tambah FAQ Baru', 'all_items' => 'Semua FAQ'),
-        'supports' => array('title', 'editor'), 'public' => false, 'show_ui' => true, 'show_in_menu' => false
-    ));
-}
-add_action( 'init', 'edukarsa_register_all_cpt', 0 );
-
-// METABOX UNTUK LINK SLIDER
-function edukarsa_slider_meta_box() {
-    add_meta_box( 'slider_link_meta', 'Tautan (URL) Slider', 'edukarsa_slider_meta_callback', 'slider', 'normal', 'high' );
-}
-add_action( 'add_meta_boxes', 'edukarsa_slider_meta_box' );
-
-function edukarsa_slider_meta_callback( $post ) {
-    wp_nonce_field( 'edukarsa_slider_save', 'edukarsa_slider_meta_nonce' );
-    $value = get_post_meta( $post->ID, '_slider_link', true );
-    echo '<p>Masukkan URL tujuan jika pengunjung mengklik gambar slider ini (opsional).</p>';
-    echo '<input type="url" id="slider_link" name="slider_link" value="' . esc_attr( $value ) . '" style="width:100%; padding:8px;" placeholder="https://..." />';
-}
-
-function edukarsa_slider_save_meta( $post_id ) {
-    if ( ! isset( $_POST['edukarsa_slider_meta_nonce'] ) || ! wp_verify_nonce( $_POST['edukarsa_slider_meta_nonce'], 'edukarsa_slider_save' ) ) return;
-    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
-    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' );

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 );

inc/security.php

@@ -1,13 +1,11 @@
 <?php
 /**
- * Modul Pengamanan Native Tema EduKarsa
+ * Hardened Security Native untuk Tema EduKarsa
- * Mencegah XSS, SQLi, Clickjacking, User Harvesting, dan Information Leakage
+ * Menangani HTTP Headers aman dan pencegahan enumerasi pengguna
  */
-
 defined( 'ABSPATH' ) || exit;
 
-// 1. INJEKSI NATIVE HTTP SECURITY HEADERS
+function edukarsa_send_security_headers() {
-function edukarsa_security_headers() {
     if ( ! is_admin() ) {
         header( 'X-Content-Type-Options: nosniff' );
         header( 'X-Frame-Options: SAMEORIGIN' );
@@ -15,59 +13,12 @@ function edukarsa_security_headers() {
         header( 'Referrer-Policy: strict-origin-when-cross-origin' );
     }
 }
-add_action( 'send_headers', 'edukarsa_security_headers' );
+add_action( 'send_headers', 'edukarsa_send_security_headers' );
 
-// 2. INFORMATION DISCLOSURE CLOAKING (SEMBUNYIKAN GENERATOR VERSI CMS)
-function edukarsa_clean_header_fingerprints() {
-    remove_action( 'wp_head', 'wp_generator' );
-    remove_action( 'wp_head', 'wlwmanifest_link' );
-    remove_action( 'wp_head', 'rsd_link' );
-    remove_action( 'wp_head', 'wp_shortlink_wp_head' );
-    remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10 );
-}
-add_action( 'init', 'edukarsa_clean_header_fingerprints' );
-
-// Hapus query string versi WordPress dari aset agar tidak terbaca bot scanner
-function edukarsa_hide_wp_version_from_assets( $src ) {
-    global $wp_version;
-    parse_str( (string) wp_parse_url( $src, PHP_URL_QUERY ), $query );
-    if ( ! empty( $query['ver'] ) && $query['ver'] === $wp_version ) {
-        $src = remove_query_arg( 'ver', $src );
-    }
-    return $src;
-}
-add_filter( 'style_loader_src', 'edukarsa_hide_wp_version_from_assets', 9999 );
-add_filter( 'script_loader_src', 'edukarsa_hide_wp_version_from_assets', 9999 );
-
-// 3. BLOKIR PROBING USERNAME / ENUMERASI AUTHOR (?author=N)
 function edukarsa_block_author_enumeration() {
-    if ( ! is_admin() && isset( $_REQUEST['author'] ) ) {
+    if ( ! is_admin() && isset( $_REQUEST['author'] ) && ! empty( $_REQUEST['author'] ) ) {
-        wp_safe_redirect( home_url( '/' ), 301 );
+        wp_safe_redirect( home_url(), 301 );
         exit;
     }
 }
 add_action( 'template_redirect', 'edukarsa_block_author_enumeration' );
-
-// 4. BATASI ENDPOINT REST API USERS BAGI PENGUNJUNG TANPA OTENTIKASI
-function edukarsa_restrict_rest_users_endpoint( $endpoints ) {
-    if ( ! is_user_logged_in() ) {
-        if ( isset( $endpoints['/wp/v2/users'] ) ) {
-            unset( $endpoints['/wp/v2/users'] );
-        }
-        if ( isset( $endpoints['/wp/v2/users/(?P<id>[\d]+)'] ) ) {
-            unset( $endpoints['/wp/v2/users/(?P<id>[\d]+)'] );
-        }
-    }
-    return $endpoints;
-}
-add_filter( 'rest_endpoints', 'edukarsa_restrict_rest_users_endpoint' );
-
-// 5. SANITASI INPUT PENCARIAN (ANTI-REFLECTED XSS)
-function edukarsa_sanitize_search_query( $query ) {
-    if ( ! is_admin() && $query->is_main_query() && $query->is_search() ) {
-        $s = $query->get( 's' );
-        $query->set( 's', sanitize_text_field( $s ) );
-    }
-    return $query;
-}
-add_action( 'pre_get_posts', 'edukarsa_sanitize_search_query' );

inc/setup.php

@@ -1,105 +1,129 @@
-<?php defined( 'ABSPATH' ) || exit; ?>
 <?php
-/**
+defined( 'ABSPATH' ) || exit;
- * File ini menangani dukungan tema (Theme Support) dan antrean aset (CSS/JS).
- */
 
-// 1. PENGATURAN DASAR
+if ( ! function_exists( 'edukarsa_theme_setup' ) ) {
-function edukarsa_setup() {
+    function edukarsa_theme_setup() {
-    add_theme_support( 'title-tag' );
+        load_theme_textdomain( 'edukarsa', get_template_directory() . '/languages' );
-    add_theme_support( 'post-thumbnails' );
-    add_theme_support( 'responsive-embeds' );
-    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' ) );
-    add_post_type_support( 'page', 'excerpt' ); 
 
-    register_nav_menus( array(
+        add_theme_support( 'automatic-feed-links' );
-        'menu-utama' => __( 'Menu Utama', 'edukarsa' ),
+        add_theme_support( 'title-tag' );
-        'menu-footer' => __( 'Menu Footer', 'edukarsa' ),
+        add_theme_support( 'post-thumbnails' );
-    ) );
+        add_theme_support( 'align-wide' );
-}
+        add_theme_support( 'wp-block-styles' );
-add_action( 'after_setup_theme', 'edukarsa_setup' );
+        add_theme_support( 'responsive-embeds' );
+        add_theme_support( 'editor-styles' );
+        add_editor_style( 'style.css' );
+        add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' ) );
 
-// 2. MENGHUBUNGKAN ASET (CSS & JS FRONTEND)
+        add_theme_support( 'custom-logo', array(
-function edukarsa_scripts() {
+            'height'      => 110,
-    $font_choice = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
+            'width'       => 400,
-    $font_url = '';
+            'flex-height' => true,
-    $font_family = "'Plus Jakarta Sans', system-ui, sans-serif";
+            'flex-width'  => true,
+        ) );
 
-    switch ( $font_choice ) {
+        add_theme_support( 'custom-header', array(
-        case 'inter':
+            'default-image' => '',
-            $font_url = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap';
+            'width'         => 1920,
-            $font_family = "'Inter', system-ui, sans-serif";
+            'height'        => 800,
-            break;
+            'flex-height'   => true,
-        case 'poppins':
+        ) );
-            $font_url = 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap';
-            $font_family = "'Poppins', system-ui, sans-serif";
-            break;
-        case 'roboto':
-            $font_url = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap';
-            $font_family = "'Roboto', system-ui, sans-serif";
-            break;
-        case 'system':
-            $font_url = '';
-            $font_family = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-            break;
-        case 'plus_jakarta_sans':
-        default:
-            $font_url = 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap';
-            $font_family = "'Plus Jakarta Sans', system-ui, sans-serif";
-            break;
-    }
 
-    $deps = array();
+        add_theme_support( 'custom-background', array(
-    if ( ! empty( $font_url ) ) {
+            'default-color' => 'ffffff',
-        wp_enqueue_style( 'edukarsa-dynamic-font', $font_url, array(), null );
+        ) );
-        $deps[] = 'edukarsa-dynamic-font';
-    }
 
-    // Load file style.css utama
+        register_nav_menus( array(
-    wp_enqueue_style( 
+            'menu-utama'  => esc_html__( 'Menu Navigasi Utama', 'edukarsa' ),
-        'edukarsa-style', 
+            'menu-footer' => esc_html__( 'Menu Tautan Footer', 'edukarsa' ),
-        get_template_directory_uri() . '/style.css', 
+        ) );
-        $deps, 
-        time(), 
-        'all' 
-    );
-
-    // Ambil opsi skema warna dari database
-    $primary_color   = sanitize_hex_color( get_option( 'edukarsa_primary_color', '#0b4a8e' ) );
-    $secondary_color = sanitize_hex_color( get_option( 'edukarsa_secondary_color', '#1a73e8' ) );
-    $heading_color   = sanitize_hex_color( get_option( 'edukarsa_heading_color', '#0f172a' ) );
-
-    // Injeksi CSS variables dinamis langsung ke selector :root
-    $custom_css = "
-        :root {
-            --primary-color: {$primary_color};
-            --secondary-color: {$secondary_color};
-            --heading-color: {$heading_color};
-            --font-main: {$font_family};
-        }
-    ";
-    wp_add_inline_style( 'edukarsa-style', $custom_css );
-}
-add_action( 'wp_enqueue_scripts', 'edukarsa_scripts' );
-
-// 3. MEMUAT JAVASCRIPT UNTUK MEDIA UPLOADER (DASHBOARD)
-function edukarsa_admin_scripts( $hook ) {
-    if ( strpos( $hook, 'edukarsa' ) !== false ) {
-        wp_enqueue_media();
     }
 }
-add_action( 'admin_enqueue_scripts', 'edukarsa_admin_scripts' );
+add_action( 'after_setup_theme', 'edukarsa_theme_setup' );
 
-// 4. REGISTRASI AREA WIDGET SIDEBAR
+function edukarsa_register_block_components() {
-function edukarsa_widgets_init() {
+    if ( function_exists( 'register_block_style' ) ) {
+        register_block_style( 'core/quote', array(
+            'name'  => 'edukarsa-quote',
+            'label' => esc_html__( 'EduKarsa Quote', 'edukarsa' ),
+        ) );
+    }
+
+    if ( function_exists( 'register_block_pattern' ) ) {
+        register_block_pattern(
+            'edukarsa/cta-banner',
+            array(
+                'title'       => esc_html__( 'EduKarsa CTA Banner', 'edukarsa' ),
+                'description' => esc_html__( 'Banner ajakan pendaftaran PMB EduKarsa', 'edukarsa' ),
+                'content'     => '<!-- wp:group {"className":"edukarsa-cta-block"} --><div class="wp-block-group edukarsa-cta-block"><p>' . esc_html__( 'Pendaftaran Mahasiswa / Siswa Baru Telah Dibuka!', 'edukarsa' ) . '</p></div><!-- /wp:group -->',
+                'categories'  => array( 'featured' ),
+            )
+        );
+    }
+}
+add_action( 'init', 'edukarsa_register_block_components' );
+
+function edukarsa_register_sidebars() {
     register_sidebar( array(
-        'name'          => __( 'Sidebar Artikel', 'edukarsa' ),
+        'name'          => esc_html__( 'Sidebar Utama', 'edukarsa' ),
-        'id'            => 'sidebar-artikel',
+        'id'            => 'sidebar-utama',
-        'description'   => __( 'Area widget untuk halaman single berita/artikel.', 'edukarsa' ),
+        'description'   => esc_html__( 'Area widget untuk bilah samping postingan dan halaman.', 'edukarsa' ),
         'before_widget' => '<div id="%1$s" class="card-style sidebar-widget %2$s">',
         'after_widget'  => '</div>',
         'before_title'  => '<h3 class="sidebar-widget-title">',
         'after_title'   => '</h3>',
     ) );
 }
-add_action( 'widgets_init', 'edukarsa_widgets_init' );
+add_action( 'widgets_init', 'edukarsa_register_sidebars' );
+
+// Helper Tombol Berbagi Media Sosial Native (Post & Page)
+function edukarsa_social_share() {
+    $share_url   = rawurlencode( get_permalink() );
+    $share_title = rawurlencode( get_the_title() );
+    ?>
+    <div class="edukarsa-share-box">
+        <span class="share-box-title"><?php esc_html_e( 'Bagikan Halaman Ini:', 'edukarsa' ); ?></span>
+        <div class="share-btn-group">
+            <a href="https://wa.me/?text=<?php echo $share_title . '%20' . $share_url; ?>" target="_blank" rel="noopener" class="share-pill share-pill-wa" title="WhatsApp">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.699c.971.53 1.777.82 2.796.82h.005c3.18 0 5.767-2.586 5.768-5.766 0-3.18-2.587-5.806-5.773-5.806zm3.376 8.214c-.149.42-.767.781-1.072.829-.304.048-.687.069-2.203-.559-1.933-.801-3.178-2.775-3.275-2.905-.095-.129-.778-1.036-.778-1.975 0-.94.492-1.401.667-1.593.175-.192.383-.24.512-.24.129 0 .258.006.371.012.12.006.279-.045.436.334.164.397.558 1.365.607 1.465.049.099.082.217.017.348-.065.131-.098.212-.195.328-.098.115-.205.258-.293.346-.098.098-.201.205-.087.401.115.196.512.846 1.099 1.368.756.673 1.393.882 1.59.98.196.098.312.082.426-.049.115-.131.492-.573.623-.77.131-.196.262-.164.442-.098.18.065 1.147.541 1.344.639.196.098.328.147.377.229.049.082.049.475-.1.895z"/></svg>
+                <span>WhatsApp</span>
+            </a>
+            <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $share_url; ?>" target="_blank" rel="noopener" class="share-pill share-pill-fb" title="Facebook">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
+                <span>Facebook</span>
+            </a>
+            <a href="https://twitter.com/intent/tweet?text=<?php echo $share_title; ?>&url=<?php echo $share_url; ?>" target="_blank" rel="noopener" class="share-pill share-pill-tw" title="X (Twitter)">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+                <span>X / Twitter</span>
+            </a>
+            <button type="button" class="share-pill share-pill-copy" onclick="navigator.clipboard.writeText('<?php echo esc_js( get_permalink() ); ?>'); alert('<?php echo esc_js( __( 'Tautan berhasil disalin ke clipboard!', 'edukarsa' ) ); ?>');">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                <span>Salin Link</span>
+            </button>
+        </div>
+    </div>
+    <?php
+}
+
+function edukarsa_enqueue_scripts() {
+    wp_enqueue_style( 'edukarsa-style', get_stylesheet_uri(), array(), time() );
+
+    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
+        wp_enqueue_script( 'comment-reply' );
+    }
+
+    if ( file_exists( get_template_directory() . '/assets/edukarsa.js' ) ) {
+        wp_enqueue_script( 'edukarsa-global-js', get_template_directory_uri() . '/assets/edukarsa.js', array(), time(), true );
+    }
+
+    if ( get_option( 'edukarsa_tampil_bilingual', 1 ) == 1 ) {
+        wp_enqueue_script(
+            'google-translate-api',
+            'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit',
+            array( 'edukarsa-global-js' ),
+            null,
+            true
+        );
+    }
+}
+add_action( 'wp_enqueue_scripts', 'edukarsa_enqueue_scripts' );

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(); ?>

page.php

@@ -1,34 +1,21 @@
-<?php defined( 'ABSPATH' ) || exit; ?>
 <?php
-/**
+defined( 'ABSPATH' ) || exit;
- * Template Halaman Statis (Page) EduKarsa
+
- * Menampilkan konten halaman penuh dan sidebar kustom yang sinkron dengan single.php
- */
 get_header();
 ?>
-
 <main id="primary" class="site-main" style="padding: 45px 0 70px; background-color: #f8fafc; min-height: 75vh;">
     <div class="container single-layout-wrapper">
-        
-        <!-- KOLOM KONTEN HALAMAN -->
         <div class="single-content-column">
             <?php while ( have_posts() ) : the_post(); ?>
-                
+                <nav class="edukarsa-breadcrumbs" aria-label="<?php esc_attr_e( 'Breadcrumb', 'edukarsa' ); ?>">
-                <!-- Breadcrumbs -->
+                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Beranda', 'edukarsa' ); ?></a>
-                <nav class="edukarsa-breadcrumbs" aria-label="Breadcrumb">
-                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">Beranda</a>
                     <span class="bc-sep">/</span>
                     <span class="bc-current"><?php the_title(); ?></span>
                 </nav>
-
                 <article id="post-<?php the_ID(); ?>" <?php post_class( 'card-style single-article-card' ); ?>>
-                    
                     <header class="entry-header" style="margin-bottom: 25px; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px;">
-                        <h1 class="single-article-title" style="margin: 0;">
+                        <h1 class="single-article-title" style="margin: 0;"><?php the_title(); ?></h1>
-                            <?php the_title(); ?>
-                        </h1>
                     </header>
-
                     <?php if ( has_post_thumbnail() ) : ?>
                         <div class="single-featured-image">
                             <?php the_post_thumbnail( 'full' ); ?>
@@ -37,14 +24,11 @@ get_header();
                             <?php endif; ?>
                         </div>
                     <?php endif; ?>
-
                     <div class="entry-content">
                         <?php
                         the_content();
-
-                        // Paginasi internal halaman jika konten dipecah dengan <!--nextpage-->
                         wp_link_pages( array(
-                            'before'      => '<div class="intra-post-pagination"><span class="page-links-title">' . __( 'Halaman:', 'edukarsa' ) . '</span>',
+                            'before'      => '<div class="intra-post-pagination"><span class="page-links-title">' . esc_html__( 'Halaman:', 'edukarsa' ) . '</span>',
                             'after'       => '</div>',
                             'link_before' => '<span class="page-number-box">',
                             'link_after'  => '</span>',
@@ -52,19 +36,20 @@ get_header();
                         ?>
                     </div>
 
+                    <?php edukarsa_social_share(); ?>
                 </article>
 
+                <?php
+                if ( comments_open() || get_comments_number() ) :
+                    comments_template();
+                endif;
+                ?>
             <?php endwhile; ?>
         </div>
-
-        <!-- KOLOM SIDEBAR DINAMIS -->
         <div class="single-sidebar-column">
             <?php get_sidebar(); ?>
         </div>
-
     </div>
 </main>
-
 <?php
 get_footer();
-?>

readme.txt

@@ -0,0 +1,35 @@
+=== EduKarsa ===
+Contributors: masbudikusuma
+Requires at least: 6.0
+Tested up to: 6.7
+Requires PHP: 7.4
+Stable tag: 1.1.6
+License: GPLv2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+
+EduKarsa is a native, modern institutional WordPress theme tailored for schools, Islamic boarding institutions, colleges, and higher education portals.
+
+== Description ==
+EduKarsa is developed with a strict "100% Native & Zero Plugin" architecture, delivering maximum speed, stability, and security without relying on bulky third-party builders like Elementor or ACF.
+
+= Key Highlights =
+* **Zero Plugin Dependency**: Native hero sliders, program grids, facility lightbox, and announcement modals running solely on core WordPress APIs.
+* **WCAG 2.1 Accessibility Suite**: Native floating toolbar equipped with Web Speech API audio reader (Text-to-Speech), high-contrast toggle, monochrome view, and text resizer.
+* **Instant Multi-Language Switcher**: Built-in instant translation integration supporting Indonesian, English, Arabic, Chinese, and Japanese.
+* **Modern Educational Card Layout**: Contemporary clean design featuring navy blue branding (#0b4a8e), pill buttons, responsive grids, and floating KPI stats cards.
+* **Native Section Layout Builder**: Reorder homepage sections via WordPress core drag-and-drop admin panel.
+* **Hardened Core Security**: Built-in HTTP security headers and user enumeration prevention.
+
+== Installation ==
+1. Navigate to your WordPress Dashboard > Appearance > Themes > Add New.
+2. Upload the edukarsa.zip file and click Install Now.
+3. Activate the theme.
+4. Go to the "EduKarsa" menu on the sidebar to configure institutional profile, branding, contacts, and homepage sections.
+
+== Frequently Asked Questions ==
+= Does this theme require page builder plugins? =
+No. EduKarsa runs natively on core WordPress Settings API and templates.
+
+== Copyright ==
+EduKarsa WordPress Theme, Copyright 2026 Mas Budi Kusuma.
+EduKarsa is distributed under the terms of the GNU General Public License v2 or later.

searchform.php

@@ -0,0 +1,15 @@
+<?php
+defined( 'ABSPATH' ) || exit;
+?>
+<form role="search" method="get" class="search-form edukarsa-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
+    <label class="search-form-label">
+        <span class="screen-reader-text"><?php echo esc_html_x( 'Cari untuk:', 'label', 'edukarsa' ); ?></span>
+        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Cari informasi / warta...', 'placeholder', 'edukarsa' ); ?>" value="<?php echo get_search_query(); ?>" name="s" required />
+    </label>
+    <button type="submit" class="search-submit" aria-label="<?php echo esc_attr_x( 'Kirim Pencarian', 'submit button', 'edukarsa' ); ?>">
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
+    </button>
+</form>

sidebar.php

@@ -1,25 +1,19 @@
-<?php defined( 'ABSPATH' ) || exit; ?>
 <?php
-/**
+defined( 'ABSPATH' ) || exit;
- * Template Sidebar Native EduKarsa
- * Dikelola 100% dari Dashboard EduKarsa (Bebas Menu Widget WP)
- */
 ?>
-<aside id="secondary" class="edukarsa-custom-sidebar">
+<aside id="secondary" class="edukarsa-custom-sidebar" aria-label="<?php esc_attr_e( 'Sidebar Utama', 'edukarsa' ); ?>">
+    <?php if ( is_active_sidebar( 'sidebar-utama' ) ) : ?>
+        <div class="sidebar-dynamic-widgets">
+            <?php dynamic_sidebar( 'sidebar-utama' ); ?>
+        </div>
+    <?php endif; ?>
 
-    <!-- 1. Pencarian Cepat Native -->
     <?php if ( get_option( 'edukarsa_sidebar_tampil_search', 1 ) == 1 ) : ?>
     <div class="card-style sidebar-widget">
-        <form role="search" method="get" class="sidebar-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
+        <?php get_search_form(); ?>
-            <div class="sidebar-search-wrapper">
-                <input type="search" class="sidebar-search-input" placeholder="Cari warta / informasi..." value="<?php echo get_search_query(); ?>" name="s" required>
-                <button type="submit" class="sidebar-search-btn" aria-label="Cari">🔍</button>
-            </div>
-        </form>
     </div>
     <?php endif; ?>
 
-    <!-- 2. Mini Banner CTA Pendaftaran / PMB -->
     <?php if ( get_option( 'edukarsa_sidebar_tampil_cta', 1 ) == 1 ) : ?>
     <div class="card-style sidebar-widget sidebar-cta-box text-center">
         <span class="sidebar-cta-badge"><?php echo esc_html( get_option( 'edukarsa_sidebar_cta_badge', 'Penerimaan Siswa/Mhs' ) ); ?></span>
@@ -33,7 +27,6 @@
     </div>
     <?php endif; ?>
 
-    <!-- 3. BOX HTML KUSTOM NATIVE (Maps, Widget Luar, Teks Tambahan) -->
     <?php
     if ( get_option( 'edukarsa_sidebar_tampil_html', 0 ) == 1 ) :
         $html_content = get_option( 'edukarsa_sidebar_html_content' );
@@ -53,7 +46,6 @@
     endif;
     ?>
 
-    <!-- 4. Berita Terkini Dinamis -->
     <?php if ( get_option( 'edukarsa_sidebar_tampil_recent', 1 ) == 1 ) : ?>
     <div class="card-style sidebar-widget">
         <h3 class="sidebar-widget-title"><?php echo esc_html( get_option( 'edukarsa_sidebar_recent_title', 'Warta Terkini' ) ); ?></h3>
@@ -65,7 +57,6 @@
                 'posts_per_page' => $count,
                 'post__not_in'   => array( get_the_ID() )
             ) );
-
             if ( $recent_query->have_posts() ) :
                 while ( $recent_query->have_posts() ) : $recent_query->the_post();
                     ?>
@@ -76,7 +67,7 @@
                             </a>
                         <?php endif; ?>
                         <div class="sidebar-recent-info">
-                            <span class="sidebar-recent-date">📅 <?php echo get_the_date( 'd M Y' ); ?></span>
+                            <span class="sidebar-recent-date">&#128197; <?php echo get_the_date( 'd M Y' ); ?></span>
                             <h4 class="sidebar-recent-title">
                                 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                             </h4>
@@ -86,34 +77,47 @@
                 endwhile;
                 wp_reset_postdata();
             else :
-                echo '<p style="font-size:13px; color:var(--text-muted); margin:0;">Belum ada artikel lainnya.</p>';
+                echo '<p style="font-size:13px; color:var(--text-muted); margin:0;">' . esc_html__( 'Belum ada artikel lainnya.', 'edukarsa' ) . '</p>';
             endif;
             ?>
         </div>
     </div>
     <?php endif; ?>
 
-    <!-- 5. Daftar Kategori Pilihan -->
     <?php if ( get_option( 'edukarsa_sidebar_tampil_cats', 1 ) == 1 ) : ?>
     <div class="card-style sidebar-widget">
         <h3 class="sidebar-widget-title"><?php echo esc_html( get_option( 'edukarsa_sidebar_cats_title', 'Kategori Pilihan' ) ); ?></h3>
         <ul class="sidebar-category-list">
             <?php
-            $categories = get_categories( array( 'hide_empty' => true ) );
+            $cat_limit = intval( get_option( 'edukarsa_sidebar_cats_count', 10 ) );
-            foreach ( $categories as $category ) :
+            $cat_args  = array(
-                ?>
+                'hide_empty' => true,
-                <li>
+                'orderby'    => 'count',
-                    <a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="sidebar-cat-link">
+                'order'      => 'DESC',
-                        <span><?php echo esc_html( $category->name ); ?></span>
+            );
-                        <span class="sidebar-cat-count"><?php echo esc_html( $category->count ); ?></span>
+            if ( $cat_limit > 0 ) {
-                    </a>
+                $cat_args['number'] = $cat_limit;
-                </li>
+            }
-            <?php endforeach; ?>
+            $categories = get_categories( $cat_args );
+            if ( ! empty( $categories ) ) :
+                foreach ( $categories as $category ) :
+                    ?>
+                    <li>
+                        <a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="sidebar-cat-link">
+                            <span><?php echo esc_html( $category->name ); ?></span>
+                            <span class="sidebar-cat-count"><?php echo esc_html( $category->count ); ?></span>
+                        </a>
+                    </li>
+                <?php
+                endforeach;
+            else :
+                echo '<li style="font-size:13px; color:var(--text-muted);">' . esc_html__( 'Belum ada kategori.', 'edukarsa' ) . '</li>';
+            endif;
+            ?>
         </ul>
     </div>
     <?php endif; ?>
 
-    <!-- 6. Banner Poster Sidebar -->
     <?php
     $banner_img = get_option( 'edukarsa_sidebar_banner_img' );
     if ( ! empty( $banner_img ) ) :
@@ -121,9 +125,8 @@
     ?>
     <div class="card-style sidebar-widget sidebar-banner-box" style="padding: 10px; overflow: hidden;">
         <a href="<?php echo esc_url( $banner_url ); ?>" target="_blank" rel="noopener">
-            <img src="<?php echo esc_url( $banner_img ); ?>" alt="Banner Pengumuman" style="width: 100%; height: auto; border-radius: 8px; display: block;">
+            <img src="<?php echo esc_url( $banner_img ); ?>" alt="<?php esc_attr_e( 'Banner Pengumuman', 'edukarsa' ); ?>" style="width: 100%; height: auto; border-radius: 8px; display: block;">
         </a>
     </div>
     <?php endif; ?>
-
 </aside>

single.php

@@ -1,23 +1,13 @@
-<?php defined( 'ABSPATH' ) || exit; ?>
 <?php
-/**
+defined( 'ABSPATH' ) || exit;
- * Template Baca Artikel Penuh (Single Post) EduKarsa
- * Dilengkapi Breadcrumbs, Intra-post Paging, Inter-post Paging, dan Native Social Share
- */
 get_header();
 ?>
-
 <main id="primary" class="site-main" style="padding: 45px 0 70px; background-color: #f8fafc; min-height: 75vh;">
     <div class="container single-layout-wrapper">
-        
-        <!-- KOLOM KONTEN UTAMA -->
         <div class="single-content-column">
-            
             <?php while ( have_posts() ) : the_post(); ?>
-                
+                <nav class="edukarsa-breadcrumbs" aria-label="<?php esc_attr_e( 'Breadcrumb', 'edukarsa' ); ?>">
-                <!-- BREADCRUMBS NATIVE -->
+                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Beranda', 'edukarsa' ); ?></a>
-                <nav class="edukarsa-breadcrumbs" aria-label="Breadcrumb">
-                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">Beranda</a>
                     <span class="bc-sep">/</span>
                     <?php
                     $categories = get_the_category();
@@ -28,27 +18,18 @@ get_header();
                     ?>
                     <span class="bc-current"><?php the_title(); ?></span>
                 </nav>
-
                 <article id="post-<?php the_ID(); ?>" <?php post_class( 'card-style single-article-card' ); ?>>
-                    
-                    <!-- HEADER ARTIKEL -->
                     <header class="entry-header">
                         <?php if ( ! empty( $categories ) ) : ?>
                             <span class="badge-title"><?php echo esc_html( $categories[0]->name ); ?></span>
                         <?php endif; ?>
-
+                        <h1 class="single-article-title"><?php the_title(); ?></h1>
-                        <h1 class="single-article-title">
-                            <?php the_title(); ?>
-                        </h1>
-
                         <div class="single-meta-bar">
-                            <span>📅 <?php echo get_the_date( 'l, d F Y' ); ?></span>
+                            <span>&#128197; <?php echo get_the_date( 'l, d F Y' ); ?></span>
-                            <span>👤 <?php the_author(); ?></span>
+                            <span>&#128100; <?php the_author(); ?></span>
-                            <span>⏱️ <?php echo ceil( str_word_count( strip_tags( get_the_content() ) ) / 200 ); ?> Menit Baca</span>
+                            <span>&#9201; <?php echo ceil( str_word_count( strip_tags( get_the_content() ) ) / 200 ); ?> Menit Baca</span>
                         </div>
                     </header>
-
-                    <!-- GAMBAR UTAMA DENGAN CAPTION -->
                     <?php if ( has_post_thumbnail() ) : ?>
                         <div class="single-featured-image">
                             <?php the_post_thumbnail( 'full' ); ?>
@@ -57,13 +38,9 @@ get_header();
                             <?php endif; ?>
                         </div>
                     <?php endif; ?>
-
-                    <!-- ISI ARTIKEL UTAMA -->
                     <div class="entry-content">
                         <?php
                         the_content();
-
-                        // 1. INTRA-POST PAGINATION (Jika artikel dipecah dengan tag <!--nextpage-->)
                         wp_link_pages( array(
                             'before'      => '<div class="intra-post-pagination"><span class="page-links-title">' . __( 'Halaman Artikel:', 'edukarsa' ) . '</span>',
                             'after'       => '</div>',
@@ -72,75 +49,59 @@ get_header();
                         ) );
                         ?>
                     </div>
-
+                    <?php if ( has_tag() ) : ?>
-                    <!-- TAGS & BAGIKAN ARTIKEL -->
                     <div class="single-article-footer">
                         <div class="single-tags-list">
-                            <?php the_tags( '<span class="tag-label">Topik Terkait:</span> ', ' ', '' ); ?>
+                            <?php the_tags( '<span class="tag-label">' . esc_html__( 'Topik Terkait:', 'edukarsa' ) . '</span> ', ' ', '' ); ?>
-                        </div>
-
-                        <!-- Native Share Buttons (No Plugin) -->
-                        <div class="single-share-bar">
-                            <span class="share-label">Bagikan:</span>
-                            <?php 
-                            $share_url   = rawurlencode( get_permalink() );
-                            $share_title = rawurlencode( get_the_title() );
-                            ?>
-                            <a href="https://wa.me/?text=<?php echo $share_title . '%20' . $share_url; ?>" target="_blank" rel="noopener" class="share-btn share-wa" title="Bagikan ke WhatsApp">WhatsApp</a>
-                            <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $share_url; ?>" target="_blank" rel="noopener" class="share-btn share-fb" title="Bagikan ke Facebook">Facebook</a>
-                            <a href="https://twitter.com/intent/tweet?text=<?php echo $share_title; ?>&url=<?php echo $share_url; ?>" target="_blank" rel="noopener" class="share-btn share-tw" title="Bagikan ke X">X / Twitter</a>
-                            <button type="button" class="share-btn share-copy" onclick="navigator.clipboard.writeText('<?php echo esc_js( get_permalink() ); ?>'); alert('Tautan artikel berhasil disalin!');">Salin Tautan</button>
                         </div>
                     </div>
+                    <?php endif; ?>
 
+                    <?php edukarsa_social_share(); ?>
                 </article>
 
-                <!-- 2. INTER-POST PAGINATION (Navigasi Berita Sebelumnya & Selanjutnya) -->
                 <nav class="inter-post-nav">
                     <?php
                     $prev_post = get_previous_post();
                     $next_post = get_next_post();
                     ?>
-                    
                     <div class="nav-box nav-box-prev card-style <?php echo empty($prev_post) ? 'disabled' : ''; ?>">
                         <?php if ( ! empty( $prev_post ) ) : ?>
                             <a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>" class="nav-box-link">
-                                <span class="nav-direction">&laquo; Artikel Sebelumnya</span>
+                                <span class="nav-direction">&laquo; <?php esc_html_e( 'Artikel Sebelumnya', 'edukarsa' ); ?></span>
                                 <h4 class="nav-post-title"><?php echo esc_html( wp_trim_words( $prev_post->post_title, 9, '...' ) ); ?></h4>
                             </a>
                         <?php else : ?>
-                            <span class="nav-direction">&laquo; Paling Awal</span>
+                            <span class="nav-direction">&laquo; <?php esc_html_e( 'Paling Awal', 'edukarsa' ); ?></span>
-                            <h4 class="nav-post-title" style="color:#94a3b8;">Tidak ada artikel sebelumnya</h4>
+                            <h4 class="nav-post-title" style="color:#94a3b8;"><?php esc_html_e( 'Tidak ada artikel sebelumnya', 'edukarsa' ); ?></h4>
                         <?php endif; ?>
                     </div>
-
                     <div class="nav-box nav-box-next card-style <?php echo empty($next_post) ? 'disabled' : ''; ?>">
                         <?php if ( ! empty( $next_post ) ) : ?>
                             <a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>" class="nav-box-link text-right">
-                                <span class="nav-direction">Artikel Selanjutnya &raquo;</span>
+                                <span class="nav-direction"><?php esc_html_e( 'Artikel Selanjutnya', 'edukarsa' ); ?> &raquo;</span>
                                 <h4 class="nav-post-title"><?php echo esc_html( wp_trim_words( $next_post->post_title, 9, '...' ) ); ?></h4>
                             </a>
                         <?php else : ?>
                             <div class="text-right">
-                                <span class="nav-direction">Paling Akhir &raquo;</span>
+                                <span class="nav-direction"><?php esc_html_e( 'Paling Akhir', 'edukarsa' ); ?> &raquo;</span>
-                                <h4 class="nav-post-title" style="color:#94a3b8;">Tidak ada artikel selanjutnya</h4>
+                                <h4 class="nav-post-title" style="color:#94a3b8;"><?php esc_html_e( 'Tidak ada artikel selanjutnya', 'edukarsa' ); ?></h4>
                             </div>
                         <?php endif; ?>
                     </div>
                 </nav>
 
+                <?php
+                if ( comments_open() || get_comments_number() ) :
+                    comments_template();
+                endif;
+                ?>
             <?php endwhile; ?>
-
         </div>
-
-        <!-- KOLOM SIDEBAR DINAMIS -->
         <div class="single-sidebar-column">
             <?php get_sidebar(); ?>
         </div>
-
     </div>
 </main>
-
 <?php
 get_footer();
-?>

style.css

@@ -3,8 +3,15 @@ Theme Name: EduKarsa
 Theme URI: https://edukarsa.masbudi.my.id
 Author: masbudikusuma
 Author URI: https://masbudi.my.id
-Description: Tema WordPress profesional untuk sekolah dan kampus (Gaya Modern Card Layout).
+Description: EduKarsa is a modern, responsive, and lightweight WordPress theme engineered for schools, universities, Islamic colleges, and academic institutions. Built with a 100% native zero-plugin architecture, it features a contemporary floating card layout, built-in WCAG 2.1 AAA accessibility tools (Text-to-Speech audio reader, high contrast, font scaler), an instant 5-language frontend switcher (Indonesian, English, Arabic, Chinese, Japanese), SEO structured data schema, and a native drag-and-drop homepage section builder.
-Version: 1.1.4
+Version: 1.1.6
+Tested up to: 6.7
+Requires at least: 6.0
+Requires PHP: 7.4
+License: GNU General Public License v2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: edukarsa
+Tags: education, grid-layout, custom-menu, custom-logo, featured-images, translation-ready, wide-blocks, block-styles, full-width-template, theme-options
 */
 
 :root {
@@ -35,7 +42,55 @@ body {
 }
 img { max-width: 100%; height: auto; display: block; }
 a { text-decoration: none; color: var(--primary-color); transition: 0.3s; }
-h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-height: 1.3; }
+h1, h2, h3, h4, h5, h6 {
+    color: var(--heading-color);
+    font-weight: 800;
+    line-height: 1.3;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+/* Standar Kelas Wajib WordPress Theme Check */
+.screen-reader-text {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute !important;
+    width: 1px;
+    word-wrap: normal !important;
+}
+.screen-reader-text:focus {
+    background-color: #f1f5f9;
+    border-radius: 4px;
+    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
+    clip: auto !important;
+    clip-path: none;
+    color: var(--primary-color);
+    display: block;
+    font-size: 14px;
+    font-weight: 700;
+    height: auto;
+    left: 8px;
+    line-height: normal;
+    padding: 12px 20px;
+    text-decoration: none;
+    top: 8px;
+    width: auto;
+    z-index: 100000;
+}
+.alignleft { float: left; margin: 0.5em 1.5em 1.5em 0; }
+.alignright { float: right; margin: 0.5em 0 1.5em 1.5em; }
+.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }
+.wp-caption { margin-bottom: 1.5em; max-width: 100%; text-align: center; }
+.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
+.wp-caption-text { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-style: italic; }
+.sticky { border-left: 4px solid var(--secondary-color); padding-left: 10px; }
+.gallery-caption { font-size: 12px; color: var(--text-muted); text-align: center; }
+.bypostauthor { font-weight: inherit; }
 
 /* 2. LAYOUT UTAMA */
 .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@@ -44,37 +99,62 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 .edukarsa-section { padding: 50px 0; }
 .section-title { font-size: 30px; color: var(--heading-color); margin-bottom: 12px; font-weight: 800; letter-spacing: -0.5px; }
 
-/* 3. HEADER & NAV */
+/* 3. HEADER & RESPONSIVE NAV */
-.site-header { position: sticky; top: 0; z-index: 999; box-shadow: 0 4px 15px rgba(0,0,0,0.12); padding: 15px 0; background-color: var(--primary-color); }
+.site-header { position: sticky; top: 0; z-index: 999; box-shadow: 0 4px 15px rgba(0,0,0,0.12); padding: 12px 0; background-color: var(--primary-color); }
-.header-container { display: flex; justify-content: space-between; align-items: center; }
+.header-container { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
+.site-branding { flex-shrink: 0; }
 .logo-link { display: flex; align-items: center; gap: 15px; color: #fff; }
-.site-title { margin: 0; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
+.site-title { margin: 0; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.5px; white-space: nowrap; }
-.header-nav-wrap { display: flex; align-items: center; gap: 20px; }
+.header-nav-wrap { display: flex; align-items: center; gap: 14px; justify-content: flex-end; flex: 1; min-width: 0; }
-.nav-menu-custom { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; }
+.main-navigation { min-width: 0; }
-.nav-menu-custom li a { display: block; color: #ffffff; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px; padding: 10px 0; }
+.nav-menu-custom {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin: 0;
+    padding: 0;
+    flex-wrap: wrap;
+}
+.nav-menu-custom li { position: relative; }
+.nav-menu-custom li a {
+    display: block;
+    color: #ffffff;
+    font-weight: 700;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    padding: 6px 0;
+    white-space: nowrap;
+}
 .nav-menu-custom li a:hover { color: #f39c12; }
 
-/* DROPDOWN */
+/* DROPDOWN MENU */
-.nav-menu-custom li { position: relative; }
 .nav-menu-custom .sub-menu {
     position: absolute;
     top: 100%;
     left: 0;
     background-color: var(--primary-color);
     min-width: 220px;
-    padding: 10px 0;
+    padding: 8px 0;
     border-radius: 0 0 8px 8px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
     opacity: 0;
     visibility: hidden;
-    transform: translateY(15px);
+    transform: translateY(12px);
-    transition: all 0.3s ease;
+    transition: all 0.25s ease;
     z-index: 1000;
 }
 .nav-menu-custom li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
-.nav-menu-custom .sub-menu li a { padding: 10px 20px; font-size: 14px; text-transform: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
+.nav-menu-custom .sub-menu li a {
+    padding: 8px 18px;
+    font-size: 13px;
+    text-transform: none;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    white-space: nowrap;
+}
 .nav-menu-custom .sub-menu li:last-child a { border-bottom: none; }
-.nav-menu-custom .sub-menu .sub-menu { top: 0; left: 100%; transform: translateX(15px); }
+.nav-menu-custom .sub-menu .sub-menu { top: 0; left: 100%; transform: translateX(12px); }
 .nav-menu-custom .sub-menu li:hover > .sub-menu { transform: translateX(0); }
 
 /* 4. SLIDER */
@@ -110,11 +190,9 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 .stat-card-modern .stat-number { font-size: 40px; font-weight: 800; color: var(--primary-color); margin-bottom: 4px; line-height: 1; }
 .stat-card-modern .stat-title { font-size: 17px; font-weight: 800; color: var(--heading-color); margin-bottom: 6px; }
 .stat-card-modern .stat-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; }
-
 .edukarsa-sambutan { padding: 45px 0 50px; }
 .sambutan-grid { display: grid; grid-template-columns: 360px 1fr; gap: 50px; align-items: start; }
 .sambutan-text { color: #475569; font-size: 15px; line-height: 1.8; margin-bottom: 25px; }
-
 .milestone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
 .program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
 .program-card { padding: 30px 22px; }
@@ -185,24 +263,20 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 .footer-brand-desc { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 20px; }
 .footer-hours-box { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
 .hours-icon { font-size: 22px; }
-
 .footer-contact-list { list-style: none; padding: 0; margin: 0; }
 .footer-contact-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.6; }
 .footer-contact-list li a { color: rgba(255,255,255,0.9); }
 .footer-contact-list li a:hover { color: #f39c12; }
 .f-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
-
 .footer-links-custom { list-style: none; padding: 0; margin: 0; }
 .footer-links-custom li { margin-bottom: 12px; }
 .footer-links-custom li a { color: rgba(255,255,255,0.82); font-size: 14px; transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 8px; }
-.footer-links-custom li a::before { content: '›'; font-size: 16px; color: var(--secondary-color); font-weight: bold; transition: transform 0.2s; }
+.footer-links-custom li a::before { content: ' '; font-size: 16px; color: var(--secondary-color); font-weight: bold; transition: transform 0.2s; }
 .footer-links-custom li a:hover { color: #ffffff; padding-left: 5px; }
 .footer-links-custom li a:hover::before { transform: translateX(3px); color: #f39c12; }
-
 .footer-social-icons { display: flex; gap: 10px; flex-wrap: wrap; }
 .social-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.08); color: #ffffff !important; border: 1px solid rgba(255,255,255,0.15); transition: all 0.25s ease; }
 .social-btn:hover { background: var(--secondary-color); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.25); border-color: transparent; }
-
 .footer-bottom-bar { border-top: 1px solid rgba(255,255,255,0.08); padding: 22px 0; background: rgba(0,0,0,0.15); }
 .footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
 .copyright-text { margin: 0; font-size: 13px; color: rgba(255,255,255,0.65); }
@@ -213,8 +287,8 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 .sidebar-widget { padding: 25px; margin-bottom: 25px; }
 .sidebar-widget-title { font-size: 18px; font-weight: 800; color: var(--heading-color); margin-bottom: 18px; border-bottom: 2px solid var(--primary-color); padding-bottom: 8px; }
 
-/* 10. TYPOGRAPHY KONTEN */
+/* 10. TYPOGRAPHY KONTEN & COMMENTS */
-.entry-content { font-size: 16px; color: #334155; line-height: 1.85; }
+.entry-content { font-size: 16px; color: #334155; line-height: 1.85; overflow-wrap: break-word; word-break: break-word; }
 .entry-content p { margin-bottom: 22px; }
 .entry-content h2 { font-size: 26px; margin: 35px 0 15px; color: var(--heading-color); }
 .entry-content h3 { font-size: 21px; margin: 28px 0 12px; color: var(--heading-color); }
@@ -222,6 +296,12 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 .entry-content li { margin-bottom: 8px; }
 .entry-content blockquote { margin: 30px 0; padding: 20px 25px; background: #f8fafc; border-left: 4px solid var(--primary-color); font-style: italic; color: #475569; border-radius: 0 8px 8px 0; }
 
+.comments-area { margin-top: 40px; padding-top: 30px; border-top: 1px solid #e2e8f0; }
+.comment-list { list-style: none; padding: 0; margin: 0 0 30px; }
+.comment-list .comment { margin-bottom: 20px; padding: 18px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; }
+.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.comment-author img.avatar { border-radius: 50%; }
+
 /* 11. PAGINATION */
 .pagination { margin-top: 45px; text-align: center; }
 .pagination .nav-links { display: inline-flex; gap: 8px; align-items: center; }
@@ -229,7 +309,9 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
 
 /* 12. RESPONSIVE MEDIA QUERIES */
-@media (max-width: 1024px) { .footer-grid-wrapper { grid-template-columns: repeat(2, 1fr); gap: 35px; } }
+@media (max-width: 1024px) {
+    .footer-grid-wrapper { grid-template-columns: repeat(2, 1fr); gap: 35px; }
+}
 @media (max-width: 992px) {
     .single-layout-wrapper { grid-template-columns: 1fr; }
     .program-grid, .milestone-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
@@ -239,7 +321,6 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 }
 @media (max-width: 768px) {
     .header-container { flex-direction: row; }
-    .nav-menu-custom { flex-wrap: wrap; justify-content: center; }
     .footer-grid-wrapper { grid-template-columns: 1fr; gap: 30px; }
     .footer-bottom-inner { flex-direction: column; text-align: center; }
     .program-grid, .milestone-grid, .news-grid { grid-template-columns: 1fr; }
@@ -250,20 +331,19 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
     .cta-floating-title { font-size: 20px; }
 }
 
-/* 13. MOBILE MENU TOGGLE & DRAWER */
+/* 13. MOBILE MENU TOGGLE & DRAWER (SWITCH AT 992px) */
-.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 10px; flex-direction: column; gap: 5px; z-index: 1001; }
+.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; z-index: 1001; }
-.menu-toggle span { display: block; width: 26px; height: 3px; background-color: #ffffff; border-radius: 3px; transition: all 0.3s ease; }
+.menu-toggle span { display: block; width: 24px; height: 3px; background-color: #ffffff; border-radius: 3px; transition: all 0.3s ease; }
 .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
 .menu-toggle.active span:nth-child(2) { opacity: 0; }
 .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
-
+@media (max-width: 992px) {
-@media (max-width: 768px) {
     .menu-toggle { display: flex; }
     .main-navigation {
         position: fixed;
         top: 0;
         right: -100%;
-        width: 280px;
+        width: 300px;
         height: 100vh;
         background: var(--primary-color);
         box-shadow: -5px 0 25px rgba(0,0,0,0.3);
@@ -336,6 +416,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
     padding: 3px 8px;
     border-radius: 20px;
     backdrop-filter: blur(4px);
+    flex-shrink: 0;
 }
 .lang-btn {
     background: transparent;
@@ -363,22 +444,13 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 }
 
 /* 17. BULLETPROOF GOOGLE TRANSLATE BANNER SUPPRESSION */
-.goog-te-banner-frame,
+.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, #goog-gt-tt, .goog-te-balloon-frame {
-.goog-te-banner-frame.skiptranslate,
-iframe.goog-te-banner-frame,
-.VIpgJd-ZVi9od-ORHb-OEVmcd,
-#goog-gt-tt,
-.goog-te-balloon-frame {
     display: none !important;
     visibility: hidden !important;
     height: 0 !important;
     width: 0 !important;
     opacity: 0 !important;
 }
-body {
-    top: 0px !important;
-    position: static !important;
-}
 .goog-tooltip, .goog-tooltip:hover { display: none !important; }
 .goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }
 font { background-color: transparent !important; box-shadow: none !important; }
@@ -423,7 +495,6 @@ font { background-color: transparent !important; box-shadow: none !important; }
 .a11y-btn-danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
 .a11y-btn-danger:hover { background: #fecaca; color: #7f1d1d; }
 
-/* KELAS STATUS AKSESIBILITAS YANG DITERAPKAN KE BODY */
 body.a11y-font-lg { font-size: 18px !important; }
 body.a11y-font-lg h1 { font-size: 34px !important; }
 body.a11y-font-lg h2 { font-size: 28px !important; }
@@ -432,13 +503,11 @@ body.a11y-font-xl { font-size: 20px !important; }
 body.a11y-font-xl h1 { font-size: 38px !important; }
 body.a11y-font-xl h2 { font-size: 32px !important; }
 body.a11y-font-xl h3 { font-size: 25px !important; }
-
 body.a11y-high-contrast { filter: contrast(160%) !important; }
 body.a11y-grayscale { filter: grayscale(100%) !important; }
 body.a11y-high-contrast.a11y-grayscale { filter: grayscale(100%) contrast(160%) !important; }
 body.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px !important; }
 
-/* STATE BUTTON AKSESIBILITAS SUARA AKTIF */
 .a11y-btn.speaking {
     background: #10b981 !important;
     border-color: #059669 !important;
@@ -465,7 +534,6 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
 .edukarsa-breadcrumbs a:hover { text-decoration: underline; }
 .bc-sep { color: #cbd5e1; font-weight: bold; }
 .bc-current { color: var(--heading-color); font-weight: 600; }
-
 .single-article-card { padding: 40px; margin-bottom: 30px; }
 .single-article-title {
     font-size: 32px;
@@ -500,7 +568,6 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
     font-style: italic;
 }
 
-/* INTRA-POST PAGINATION (<!--nextpage-->) */
 .intra-post-pagination {
     margin-top: 35px;
     padding-top: 20px;
@@ -542,7 +609,6 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
     color: #ffffff;
 }
 
-/* FOOTER ARTIKEL & SHARE BAR */
 .single-article-footer {
     margin-top: 35px;
     padding-top: 25px;
@@ -565,7 +631,6 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
     font-weight: 600;
 }
 .single-tags-list a:hover { background: var(--primary-color); color: #ffffff; }
-
 .single-share-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .share-label { font-size: 13px; font-weight: 700; color: var(--heading-color); margin-right: 4px; }
 .share-btn {
@@ -588,7 +653,6 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
 .share-copy { background: #475569; color: #ffffff; }
 .share-copy:hover { background: #334155; }
 
-/* INTER-POST NAVIGATION (SEBELUMNYA & SELANJUTNYA) */
 .inter-post-nav {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -618,7 +682,64 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
 .nav-box:hover .nav-post-title { color: var(--primary-color); }
 .text-right { text-align: right; }
 
-/* 20. KOMPONEN SIDEBAR NATIVE TERINTEGRASI */
+/* 20. SIDEBAR KATEGORI DENGAN LIMIT & SCROLLABLE CONTAINER */
+.sidebar-category-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 380px;
+    overflow-y: auto;
+    padding-right: 6px;
+}
+.sidebar-category-list::-webkit-scrollbar {
+    width: 5px;
+}
+.sidebar-category-list::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 4px;
+}
+.sidebar-category-list::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+.sidebar-category-list::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+.sidebar-category-list li { margin-bottom: 8px; }
+.sidebar-cat-link {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 9px 14px;
+    background: #f8fafc;
+    border: 1px solid #f1f5f9;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-color);
+    transition: all 0.2s ease;
+    word-break: break-word;
+}
+.sidebar-cat-link:hover {
+    background: var(--primary-color);
+    color: #ffffff;
+    border-color: var(--primary-color);
+}
+.sidebar-cat-count {
+    padding: 2px 8px;
+    background: rgba(0,0,0,0.06);
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 800;
+    flex-shrink: 0;
+    margin-left: 8px;
+}
+.sidebar-cat-link:hover .sidebar-cat-count {
+    background: rgba(255,255,255,0.25);
+    color: #ffffff;
+}
+
+/* 21. SIDEBAR SEARCH & HTML BOX */
 .sidebar-search-form { position: relative; }
 .sidebar-search-wrapper { display: flex; position: relative; }
 .sidebar-search-input {
@@ -643,7 +764,6 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
     cursor: pointer;
     padding: 6px;
 }
-
 .sidebar-cta-box {
     background: linear-gradient(135deg, var(--primary-color), var(--heading-color));
     color: #ffffff;
@@ -663,7 +783,6 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
 .sidebar-cta-title { font-size: 19px; font-weight: 800; color: #ffffff; margin-bottom: 10px; line-height: 1.35; }
 .sidebar-cta-desc { font-size: 13px; opacity: 0.9; margin-bottom: 20px; line-height: 1.6; }
 .sidebar-cta-btn { display: inline-block; padding: 10px 26px; font-size: 14px; font-weight: 800; }
-
 .sidebar-recent-list { display: flex; flex-direction: column; gap: 16px; }
 .sidebar-recent-item { display: flex; gap: 14px; align-items: center; }
 .sidebar-recent-thumb { width: 68px; height: 68px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
@@ -673,47 +792,471 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
 .sidebar-recent-title a { color: var(--heading-color); }
 .sidebar-recent-title a:hover { color: var(--primary-color); }
 
-.sidebar-category-list { list-style: none; padding: 0; margin: 0; }
-.sidebar-category-list li { margin-bottom: 8px; }
-.sidebar-cat-link {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 9px 14px;
-    background: #f8fafc;
-    border: 1px solid #f1f5f9;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-color);
-    transition: all 0.2s ease;
-}
-.sidebar-cat-link:hover {
-    background: var(--primary-color);
-    color: #ffffff;
-    border-color: var(--primary-color);
-}
-.sidebar-cat-count {
-    padding: 2px 8px;
-    background: rgba(0,0,0,0.06);
-    border-radius: 12px;
-    font-size: 11px;
-    font-weight: 800;
-}
-.sidebar-cat-link:hover .sidebar-cat-count {
-    background: rgba(255,255,255,0.25);
-    color: #ffffff;
-}
-
-@media (max-width: 768px) {
-    .inter-post-nav { grid-template-columns: 1fr; }
-    .text-right { text-align: left; }
-    .single-article-card { padding: 25px 20px; }
-    .single-article-title { font-size: 24px; }
-}
-
-/* 21. SIDEBAR CUSTOM HTML BOX */
 .sidebar-custom-html-box { padding: 25px; }
 .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 */
+.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 */
+.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; }
+.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; }
+
+/* FIX 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); }
+
+/* 22. MODERN NATIVE SEARCH FORM */
+.search-form.edukarsa-search-form,
+.search-form {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    margin: 0;
+}
+.search-form .search-form-label,
+.search-form label {
+    flex: 1;
+    margin: 0;
+    position: relative;
+    width: 100%;
+    display: block;
+}
+.search-form .search-field {
+    width: 100%;
+    padding: 13px 52px 13px 20px;
+    background-color: #f8fafc;
+    border: 1.5px solid #e2e8f0;
+    border-radius: 50px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--heading-color);
+    outline: none;
+    transition: all 0.25s ease;
+    font-family: inherit;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+.search-form .search-field::placeholder {
+    color: #94a3b8;
+    font-size: 13.5px;
+}
+.search-form .search-field:focus {
+    background-color: #ffffff;
+    border-color: var(--secondary-color);
+    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
+}
+.search-form .search-submit {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.25s ease;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(11, 74, 142, 0.25);
+}
+.search-form .search-submit:hover {
+    background: var(--primary-color);
+    transform: translateY(-50%) scale(1.05);
+    box-shadow: 0 6px 16px rgba(11, 74, 142, 0.35);
+}
+.search-form .search-submit svg {
+    display: block;
+    stroke: #ffffff;
+}
+
+/* 24. MODERN NATIVE COMMENT FORM & COMMENTS LIST */
+.comments-area {
+    margin-top: 35px;
+    padding: 35px;
+}
+.comments-title {
+    font-size: 20px;
+    font-weight: 800;
+    color: var(--heading-color);
+    margin-bottom: 24px;
+    padding-bottom: 12px;
+    border-bottom: 2px solid #f1f5f9;
+}
+.comment-respond {
+    margin-top: 25px;
+}
+.comment-reply-title {
+    font-size: 20px;
+    font-weight: 800;
+    color: var(--heading-color);
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.comment-reply-title small a {
+    font-size: 13px;
+    font-weight: 600;
+    color: #ef4444;
+    text-decoration: underline;
+}
+.comment-notes {
+    font-size: 13.5px;
+    color: var(--text-muted);
+    margin-bottom: 20px;
+}
+.comment-form {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+.comment-form p {
+    margin: 0;
+}
+.comment-form label {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--heading-color);
+    margin-bottom: 6px;
+    letter-spacing: 0.2px;
+}
+.comment-form .required {
+    color: #ef4444;
+    margin-left: 2px;
+}
+.comment-form input[type="text"],
+.comment-form input[type="email"],
+.comment-form input[type="url"],
+.comment-form textarea {
+    width: 100%;
+    padding: 12px 16px;
+    background-color: #f8fafc;
+    border: 1.5px solid #e2e8f0;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: 14px;
+    color: var(--text-color);
+    outline: none;
+    transition: all 0.25s ease;
+    box-sizing: border-box;
+}
+.comment-form textarea {
+    min-height: 140px;
+    resize: vertical;
+    line-height: 1.6;
+}
+.comment-form input[type="text"]:focus,
+.comment-form input[type="email"]:focus,
+.comment-form input[type="url"]:focus,
+.comment-form textarea:focus {
+    background-color: #ffffff;
+    border-color: var(--secondary-color);
+    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
+}
+.comment-form-cookies-consent {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    margin-top: 4px;
+}
+.comment-form-cookies-consent input[type="checkbox"] {
+    margin-top: 4px;
+    width: 16px;
+    height: 16px;
+    accent-color: var(--primary-color);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+.comment-form-cookies-consent label {
+    display: inline;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-muted);
+    line-height: 1.5;
+    margin: 0;
+    cursor: pointer;
+}
+.form-submit {
+    margin-top: 8px !important;
+}
+.comment-form .submit,
+#submit {
+    display: inline-block;
+    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+    color: #ffffff !important;
+    padding: 12px 34px;
+    border-radius: 50px;
+    font-weight: 700;
+    font-size: 14px;
+    letter-spacing: 0.3px;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 14px rgba(11, 74, 142, 0.25);
+    transition: all 0.25s ease;
+}
+.comment-form .submit:hover,
+#submit:hover {
+    background: var(--primary-color);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(11, 74, 142, 0.35);
+}
+.comment-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 30px;
+}
+.comment-list .comment {
+    margin-bottom: 18px;
+    padding: 20px 22px;
+    background: #f8fafc;
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+}
+.comment-list .children {
+    list-style: none;
+    padding-left: 24px;
+    margin-top: 15px;
+    border-left: 2px solid #cbd5e1;
+}
+.comment-author {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--heading-color);
+    margin-bottom: 8px;
+}
+.comment-author img.avatar {
+    border-radius: 50%;
+    width: 42px;
+    height: 42px;
+}
+.comment-metadata {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-bottom: 10px;
+}
+.comment-reply-link {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--secondary-color);
+    padding: 4px 12px;
+    background: #e0f2fe;
+    border-radius: 20px;
+    margin-top: 8px;
+}
+.comment-reply-link:hover {
+    background: var(--primary-color);
+    color: #ffffff !important;
+}
+
+/* 25. MODERN SOCIAL SHARE BOX */
+.edukarsa-share-box {
+    margin-top: 35px;
+    padding: 20px 24px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+.share-box-title {
+    font-size: 14px;
+    font-weight: 800;
+    color: var(--heading-color);
+    letter-spacing: 0.2px;
+}
+.share-btn-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.share-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 8px 16px;
+    border-radius: 50px;
+    font-size: 12.5px;
+    font-weight: 700;
+    color: #ffffff !important;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.share-pill:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
+}
+.share-pill svg {
+    display: block;
+    flex-shrink: 0;
+}
+.share-pill-wa { background-color: #25d366; }
+.share-pill-wa:hover { background-color: #1ebc57; }
+.share-pill-fb { background-color: #1877f2; }
+.share-pill-fb:hover { background-color: #0c63d4; }
+.share-pill-tw { background-color: #0f1419; }
+.share-pill-tw:hover { background-color: #272c30; }
+.share-pill-copy { background-color: #475569; }
+.share-pill-copy:hover { background-color: #334155; }