feat: integrasi modul FAQ accordion native dan input jam kerja multi-baris

footer.php

@@ -37,7 +37,7 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
                         <span class="hours-icon">🕒</span>
                         <div>
                             <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.8;">Jam Layanan</div>
-                            <div style="font-weight: 600; font-size: 13px; color: #fff;"><?php echo esc_html( $jam ); ?></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; ?>
@@ -136,7 +136,7 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
         </div>
     </footer>
 
-    <!-- FLOATING WHATSAPP HOTLINE PPDB -->
+    <!-- FLOATING WHATSAPP -->
     <?php if ( ! empty( $wa_clean ) ) : ?>
     <a href="https://wa.me/<?php echo esc_attr( $wa_clean ); ?>?text=Halo%20Admin%20EduKarsa,%20saya%20ingin%20bertanya%20mengenai%20pendaftaran." target="_blank" rel="noopener" class="edukarsa-wa-float" title="Chat WhatsApp Panitia PMB">
         <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>
@@ -144,13 +144,11 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
     </a>
     <?php endif; ?>
 
-    <!-- TOMBOL BACK TO TOP -->
+    <!-- BACK TO TOP -->
     <button id="back-to-top" class="back-to-top-btn" aria-label="Kembali ke atas">▲</button>
 
-    <!-- NATIVE VANILLA SCRIPT: HAMBURGER & BACK-TO-TOP -->
     <script>
     document.addEventListener("DOMContentLoaded", function() {
-        // 1. Toggle Mobile Menu Drawer
         const toggleBtn = document.getElementById("mobile-menu-toggle");
         const navMenu   = document.getElementById("site-navigation");
         if (toggleBtn && navMenu) {
@@ -160,15 +158,10 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
             });
         }
 
-        // 2. Back to Top Smooth Logic
         const bttBtn = document.getElementById("back-to-top");
         if (bttBtn) {
             window.addEventListener("scroll", function() {
-                if (window.scrollY > 350) {
+                if (window.scrollY > 350) { bttBtn.classList.add("show"); } else { bttBtn.classList.remove("show"); }
-                    bttBtn.classList.add("show");
-                } else {
-                    bttBtn.classList.remove("show");
-                }
             });
             bttBtn.addEventListener("click", function() {
                 window.scrollTo({ top: 0, behavior: "smooth" });

front-page.php

@@ -80,7 +80,7 @@
     </section>
     <?php endif; ?>
 
-    <!-- 4. MILESTONES (LABEL & HEADINGS DINAMIS) -->
+    <!-- 4. MILESTONES -->
     <?php 
     if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : 
         $query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
@@ -122,7 +122,7 @@
     endif; 
     ?>
 
-    <!-- 5. PROGRAM UNGGULAN (LABEL & HEADINGS DINAMIS) -->
+    <!-- 5. PROGRAM UNGGULAN -->
     <?php 
     if ( get_option('edukarsa_tampil_program', 1) == 1 ) : 
         $prog_sub   = get_option( 'edukarsa_program_subtitle', 'AKADEMIK & KARAKTER' );
@@ -199,7 +199,7 @@
             </section>
             <?php endif; ?>
 
-            <!-- 7. KEUNGGULAN DINAMIS (LABEL & HEADINGS DINAMIS) -->
+            <!-- 7. KEUNGGULAN DINAMIS -->
             <?php 
             if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : 
                 $k_sub   = get_option( 'edukarsa_keunggulan_subtitle', 'WHY CHOOSE US' );
@@ -241,7 +241,7 @@
         </div>
     </div>
 
-    <!-- 8. CTA SECTION (FLOATING CARD DESIGN) -->
+    <!-- 8. CTA SECTION (FLOATING CARD) -->
     <?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
     <section class="edukarsa-cta-floating-section">
         <div class="container">
@@ -260,9 +260,56 @@
     </section>
     <?php endif; ?>
 
-    <!-- 9. LATEST NEWS -->
+    <!-- 9. SEKSI FAQ / PERTANYAAN UMUM (ACCORDION NATIVE) -->
+    <?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">
+        <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
+                $item_index = 0;
+                while ( $query_faq->have_posts() ) : $query_faq->the_post();
+                    // Buka pertanyaan pertama secara default untuk mengundang interaksi
+                    $active_class = ( $item_index === 0 ) ? ' active' : '';
+                    ?>
+                    <div class="faq-item<?php echo $active_class; ?>">
+                        <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
+                    $item_index++;
+                endwhile;
+                wp_reset_postdata();
+                ?>
+            </div>
+        </div>
+    </section>
+    <?php 
+        endif;
+    endif; 
+    ?>
+
+    <!-- 10. LATEST NEWS -->
     <?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
-    <section class="edukarsa-section edukarsa-latest-news" style="padding-top: 50px;">
+    <section class="edukarsa-section edukarsa-latest-news" style="padding-top: 40px;">
         <div class="container">
             <div class="section-header text-center">
                 <span class="badge-title">INFORMASI TERKINI</span>
@@ -303,6 +350,7 @@
 
 <script>
 document.addEventListener("DOMContentLoaded", function() {
+    // 1. Slider Auto Scroll
     const slider = document.getElementById('hero-slider-wrapper');
     if (slider && slider.children.length > 1) { 
         setInterval(function() {
@@ -313,6 +361,14 @@ 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;
+            item.classList.toggle('active');
+        });
+    });
 });
 </script>
 

inc/admin-menu.php

@@ -1,9 +1,8 @@
 <?php
 /**
- * Modul Pengaturan Menu Admin dan Toolbar EduKarsa
+ * Modul Pengaturan Menu Admin, Toolbar, dan Settings API EduKarsa
  */
 
-// 1. REGISTRASI MENU ADMIN SIDEBAR
 function edukarsa_admin_menu() {
     add_menu_page( 
         'EduKarsa', 
@@ -15,50 +14,15 @@ function edukarsa_admin_menu() {
         2 
     );
 
-    add_submenu_page( 
+    add_submenu_page( 'edukarsa_settings', 'Pengaturan Utama', '⚙️ Pengaturan Utama', 'manage_options', 'edukarsa_settings', 'edukarsa_settings_page_html' );
-        'edukarsa_settings', 
+    add_submenu_page( 'edukarsa_settings', 'Semua Slider', '🌟 Slider Banner', 'manage_options', 'edit.php?post_type=slider' );
-        'Pengaturan Utama', 
+    add_submenu_page( 'edukarsa_settings', 'Semua Program', '📚 Program Kami', 'manage_options', 'edit.php?post_type=program' );
-        '⚙️ Pengaturan Utama', 
+    add_submenu_page( 'edukarsa_settings', 'Semua Keunggulan', '⭐ Keunggulan', 'manage_options', 'edit.php?post_type=keunggulan' );
-        'manage_options', 
+    add_submenu_page( 'edukarsa_settings', 'Semua Milestone', '🏆 Milestone', 'manage_options', 'edit.php?post_type=milestone' );
-        'edukarsa_settings', 
+    add_submenu_page( 'edukarsa_settings', 'Semua FAQ', '❓ Tanya Jawab (FAQ)', 'manage_options', 'edit.php?post_type=faq' );
-        'edukarsa_settings_page_html' 
-    );
-
-    add_submenu_page( 
-        'edukarsa_settings', 
-        'Semua Slider', 
-        '🌟 Slider Banner', 
-        'manage_options', 
-        'edit.php?post_type=slider' 
-    );
-
-    add_submenu_page( 
-        'edukarsa_settings', 
-        'Semua Program', 
-        '📚 Program Kami', 
-        'manage_options', 
-        'edit.php?post_type=program' 
-    );
-
-    add_submenu_page( 
-        'edukarsa_settings', 
-        'Semua Keunggulan', 
-        '⭐ Keunggulan', 
-        'manage_options', 
-        'edit.php?post_type=keunggulan' 
-    );
-
-    add_submenu_page( 
-        'edukarsa_settings', 
-        'Semua Milestone', 
-        '🏆 Milestone', 
-        'manage_options', 
-        'edit.php?post_type=milestone' 
-    );
 }
 add_action( 'admin_menu', 'edukarsa_admin_menu' );
 
-// 2. SHORTCUT MENU DI TOPBAR (ADMIN BAR)
 function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
     if ( ! current_user_can( 'manage_options' ) ) return;
 
@@ -68,90 +32,40 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
         'href'  => admin_url( 'admin.php?page=edukarsa_settings' ),
     ) );
 
-    $wp_admin_bar->add_node( array(
+    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-settings', 'parent' => 'edukarsa-topbar-menu', 'title' => '⚙️ Pengaturan Utama', 'href' => admin_url( 'admin.php?page=edukarsa_settings' ) ) );
-        'id'     => 'edukarsa-sub-settings',
+    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-slider', 'parent' => 'edukarsa-topbar-menu', 'title' => '🌟 Slider Banner', 'href' => admin_url( 'edit.php?post_type=slider' ) ) );
-        'parent' => 'edukarsa-topbar-menu',
+    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-program', 'parent' => 'edukarsa-topbar-menu', 'title' => '📚 Program Kami', 'href' => admin_url( 'edit.php?post_type=program' ) ) );
-        'title'  => '⚙️ Pengaturan Utama',
+    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-keunggulan', 'parent' => 'edukarsa-topbar-menu', 'title' => '⭐ Keunggulan', 'href' => admin_url( 'edit.php?post_type=keunggulan' ) ) );
-        'href'   => admin_url( 'admin.php?page=edukarsa_settings' ),
+    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-milestone', 'parent' => 'edukarsa-topbar-menu', 'title' => '🏆 Milestone', 'href' => admin_url( 'edit.php?post_type=milestone' ) ) );
-    ) );
+    $wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-faq', 'parent' => 'edukarsa-topbar-menu', 'title' => '❓ Tanya Jawab (FAQ)', 'href' => admin_url( 'edit.php?post_type=faq' ) ) );
-
-    $wp_admin_bar->add_node( array(
-        'id'     => 'edukarsa-sub-slider',
-        'parent' => 'edukarsa-topbar-menu',
-        'title'  => '🌟 Slider Banner',
-        'href'   => admin_url( 'edit.php?post_type=slider' ),
-    ) );
-
-    $wp_admin_bar->add_node( array(
-        'id'     => 'edukarsa-sub-program',
-        'parent' => 'edukarsa-topbar-menu',
-        'title'  => '📚 Program Kami',
-        'href'   => admin_url( 'edit.php?post_type=program' ),
-    ) );
-
-    $wp_admin_bar->add_node( array(
-        'id'     => 'edukarsa-sub-keunggulan',
-        'parent' => 'edukarsa-topbar-menu',
-        'title'  => '⭐ Keunggulan',
-        'href'   => admin_url( 'edit.php?post_type=keunggulan' ),
-    ) );
-
-    $wp_admin_bar->add_node( array(
-        'id'     => 'edukarsa-sub-milestone',
-        'parent' => 'edukarsa-topbar-menu',
-        'title'  => '🏆 Milestone',
-        'href'   => admin_url( 'edit.php?post_type=milestone' ),
-    ) );
 }
 add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
 
-// 3. REGISTRASI SELURUH PENGATURAN TEMA
 function edukarsa_register_settings() {
     $options = array(
-        // Dynamic Appearance
         'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
-
+        'edukarsa_tampil_slider', 'edukarsa_tampil_stats', 'edukarsa_tampil_about', 'edukarsa_tampil_milestone', 'edukarsa_tampil_program', 'edukarsa_tampil_video', 'edukarsa_tampil_keunggulan', 'edukarsa_tampil_cta', 'edukarsa_tampil_faq', 'edukarsa_tampil_news',
-        // Toggle Seksi Beranda
-        'edukarsa_tampil_slider', 'edukarsa_tampil_stats', 'edukarsa_tampil_about', 'edukarsa_tampil_milestone', 'edukarsa_tampil_program', 'edukarsa_tampil_video', 'edukarsa_tampil_keunggulan', 'edukarsa_tampil_cta', 'edukarsa_tampil_news',
-        
-        // Header Logo
         'edukarsa_header_logo',
-        
-        // Custom Teks Headings Frontend (Milestone, Program, Keunggulan, News)
         'edukarsa_milestone_subtitle', 'edukarsa_milestone_title',
         'edukarsa_program_subtitle', 'edukarsa_program_title',
         'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title',
+        'edukarsa_faq_subtitle', 'edukarsa_faq_title',
         'edukarsa_news_title',
-        
-        // Stats Fields
         'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon',
         'edukarsa_stat2_angka', 'edukarsa_stat2_label', 'edukarsa_stat2_desc', 'edukarsa_stat2_icon',
         'edukarsa_stat3_angka', 'edukarsa_stat3_label', 'edukarsa_stat3_desc', 'edukarsa_stat3_icon',
-        
-        // About & Video
         'edukarsa_foto_kepsek', 'edukarsa_nama_kepsek', 'edukarsa_subtitle_about', 'edukarsa_teks_sambutan', 'edukarsa_link_about',
         'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
-        
-        // Parallax Area
         'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
-        
-        // CTA
         'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
-        
-        // Footer Lengkap
         'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
-        'edukarsa_tampil_fb', 'edukarsa_footer_fb',
+        'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok', 'edukarsa_tampil_x', 'edukarsa_footer_x',
-        'edukarsa_tampil_ig', 'edukarsa_footer_ig',
-        'edukarsa_tampil_yt', 'edukarsa_footer_yt',
-        'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok',
-        'edukarsa_tampil_x', 'edukarsa_footer_x',
         'edukarsa_footer_copyright', 'edukarsa_custom_css'
     );
     foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
 }
 add_action( 'admin_init', 'edukarsa_register_settings' );
 
-// 4. HALAMAN PENGATURAN
 function edukarsa_settings_page_html() {
     if ( ! current_user_can( 'manage_options' ) ) return;
     $font_current    = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
@@ -160,9 +74,9 @@ function edukarsa_settings_page_html() {
     $heading_color   = get_option( 'edukarsa_heading_color', '#0f172a' );
     ?>
     <style>
-        .edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }
+        .edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
         .edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
-        .edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: visible; }
+        .edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; }
         .edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; }
         .edukarsa-card-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
         .edukarsa-card-body { padding: 24px; }
@@ -172,45 +86,13 @@ function edukarsa_settings_page_html() {
         .switch-label-wrap { display: flex; flex-direction: column; gap: 5px; }
         .switch-label { font-weight: 700; font-size: 13px; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
         
-        /* Shortcut Badge Link */
         .cpt-shortcut-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0b4a8e; text-decoration: none; background: #e0f2fe; padding: 2px 9px; border-radius: 12px; width: fit-content; transition: all 0.2s ease; border: 1px solid #bae6fd; }
         .cpt-shortcut-link:hover { background: #0b4a8e; color: #ffffff !important; border-color: #0b4a8e; }
         
-        /* Tooltip Native CSS */
         .tooltip-hint { position: relative; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 10px; font-weight: 800; }
         .tooltip-hint:hover { background: #0b4a8e; }
-        .tooltip-hint .tooltip-text {
+        .tooltip-hint .tooltip-text { visibility: hidden; opacity: 0; position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%); background-color: #0f172a; color: #ffffff; text-align: left; padding: 8px 12px; border-radius: 6px; font-size: 11px; font-weight: 500; line-height: 1.45; white-space: normal; width: 220px; z-index: 1000; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; }
-            visibility: hidden;
+        .tooltip-hint .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #0f172a transparent transparent transparent; }
-            opacity: 0;
-            position: absolute;
-            bottom: 140%;
-            left: 50%;
-            transform: translateX(-50%);
-            background-color: #0f172a;
-            color: #ffffff;
-            text-align: left;
-            padding: 8px 12px;
-            border-radius: 6px;
-            font-size: 11px;
-            font-weight: 500;
-            line-height: 1.45;
-            white-space: normal;
-            width: 220px;
-            z-index: 1000;
-            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
-            transition: opacity 0.2s ease, visibility 0.2s ease;
-            pointer-events: none;
-        }
-        .tooltip-hint .tooltip-text::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            margin-left: -5px;
-            border-width: 5px;
-            border-style: solid;
-            border-color: #0f172a transparent transparent transparent;
-        }
         .tooltip-hint:hover .tooltip-text { visibility: visible; opacity: 1; }
 
         .edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; flex-shrink: 0; }
@@ -257,15 +139,11 @@ function edukarsa_settings_page_html() {
             <?php settings_fields( 'edukarsa_settings_group' ); ?>
 
             <div class="edukarsa-admin-layout">
-                
-                <!-- KOLOM KIRI (FORM UTAMA) -->
                 <div class="edukarsa-admin-main">
                     
                     <!-- 1. Header, Logo & Slider -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header">
+                        <div class="edukarsa-card-header"><h2>🏛️ 1. Header, Logo & Slider</h2></div>
-                            <h2>🏛️ 1. Header, Logo & Slider</h2>
-                        </div>
                         <div class="edukarsa-card-body">
                             <div class="form-field-group">
                                 <label>Logo Website (Header)</label>
@@ -278,10 +156,7 @@ function edukarsa_settings_page_html() {
                             <div class="switch-row-inline" style="margin-top: 20px;">
                                 <div class="switch-row">
                                     <div class="switch-label-wrap">
-                                        <div class="switch-label">
+                                        <div class="switch-label"><span>Tampilkan Slider Atas</span><span class="tooltip-hint">?<span class="tooltip-text">Gambar & tautan banner dikelola pada modul 🌟 Slider Banner.</span></span></div>
-                                            <span>Tampilkan Slider Atas</span>
-                                            <span class="tooltip-hint">?<span class="tooltip-text">Gambar & tautan banner dikelola pada modul 🌟 Slider Banner.</span></span>
-                                        </div>
                                         <a href="<?php echo admin_url('edit.php?post_type=slider'); ?>" class="cpt-shortcut-link">Kelola Slider ↗</a>
                                     </div>
                                     <label class="edukarsa-switch">
@@ -291,10 +166,7 @@ function edukarsa_settings_page_html() {
                                 </div>
                                 <div class="switch-row">
                                     <div class="switch-label-wrap">
-                                        <div class="switch-label">
+                                        <div class="switch-label"><span>Tampilkan 3 Kotak Statistik</span><span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur pada form di bawah.</span></span></div>
-                                            <span>Tampilkan 3 Kotak Statistik</span>
-                                            <span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur langsung pada formulir di bawah.</span></span>
-                                        </div>
                                         <span style="font-size: 11px; color: #64748b;">Formulir Pengaturan Bawah ↓</span>
                                     </div>
                                     <label class="edukarsa-switch">
@@ -316,18 +188,9 @@ function edukarsa_settings_page_html() {
                                                 <button type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon">Up</button>
                                             </div>
                                         </div>
-                                        <div class="form-field-group">
+                                        <div class="form-field-group"><label>Angka / Capaian</label><input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" placeholder="cth: 98%"></div>
-                                            <label>Angka / Capaian</label>
+                                        <div class="form-field-group"><label>Judul Statistik</label><input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" placeholder="cth: Akreditasi A"></div>
-                                            <input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" placeholder="cth: 98%">
+                                        <div class="form-field-group" style="margin-bottom:0;"><label>Deskripsi Ringkas</label><textarea name="edukarsa_stat<?php echo $i; ?>_desc" rows="2"><?php echo esc_textarea(get_option('edukarsa_stat'.$i.'_desc')); ?></textarea></div>
-                                        </div>
-                                        <div class="form-field-group">
-                                            <label>Judul Statistik</label>
-                                            <input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" placeholder="cth: Akreditasi A">
-                                        </div>
-                                        <div class="form-field-group" style="margin-bottom:0;">
-                                            <label>Deskripsi Ringkas</label>
-                                            <textarea name="edukarsa_stat<?php echo $i; ?>_desc" rows="2"><?php echo esc_textarea(get_option('edukarsa_stat'.$i.'_desc')); ?></textarea>
-                                        </div>
                                     </div>
                                     <?php endfor; ?>
                                 </div>
@@ -339,145 +202,63 @@ function edukarsa_settings_page_html() {
                     <div class="edukarsa-card">
                         <div class="edukarsa-card-header">
                             <h2>👤 2. Sambutan & Profil Pimpinan</h2>
-                            <label class="edukarsa-switch">
+                            <label class="edukarsa-switch"><input type="checkbox" class="section-toggle" data-target="#about-settings-box" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?>><span class="slider-round"></span></label>
-                                <input type="checkbox" class="section-toggle" data-target="#about-settings-box" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?>>
-                                <span class="slider-round"></span>
-                            </label>
                         </div>
                         <div class="edukarsa-card-body" id="about-settings-box">
                             <div class="form-grid-2">
-                                <div class="form-field-group">
+                                <div class="form-field-group"><label>Foto Pimpinan (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">Pilih</button></div></div>
-                                    <label>Foto Pimpinan (Portrait 3:4)</label>
+                                <div class="form-field-group"><label>Nama Lengkap & Gelar</label><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>"></div>
-                                    <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">Pilih</button>
-                                    </div>
-                                </div>
-                                <div class="form-field-group">
-                                    <label>Nama Lengkap & Gelar</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">
-                                <div class="form-field-group">
+                                <div class="form-field-group"><label>Sub-Judul (cth: Rektor / Kepala Sekolah)</label><input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>"></div>
-                                    <label>Sub-Judul (cth: Rektor / Kepala Sekolah)</label>
+                                <div class="form-field-group"><label>Tautan Detail (URL Profil)</label><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></div>
-                                    <input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>">
-                                </div>
-                                <div class="form-field-group">
-                                    <label>Tautan Detail (URL Profil)</label>
-                                    <input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>">
-                                </div>
-                            </div>
-                            <div class="form-field-group" style="margin-bottom:0;">
-                                <label>Teks Sambutan</label>
-                                <textarea name="edukarsa_teks_sambutan" rows="4"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea>
                             </div>
+                            <div class="form-field-group" style="margin-bottom:0;"><label>Teks Sambutan</label><textarea name="edukarsa_teks_sambutan" rows="4"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea></div>
                         </div>
                     </div>
 
-                    <!-- 3. Program, Milestone & Keunggulan (KATA-KATA FRONTEND BISA DIKOSTUM) -->
+                    <!-- 3. Program, Milestones, & Keunggulan -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header">
+                        <div class="edukarsa-card-header"><h2>⭐ 3. Program, Milestones, & Keunggulan</h2></div>
-                            <h2>⭐ 3. Program, Milestones, & Keunggulan</h2>
-                        </div>
                         <div class="edukarsa-card-body">
-                            
-                            <!-- Baris Switch Toggle & Shortcut Sidebar CPT -->
                             <div class="switch-row-inline">
                                 <div class="switch-row">
-                                    <div class="switch-label-wrap">
+                                    <div class="switch-label-wrap"><div class="switch-label"><span>Seksi Milestone</span><span class="tooltip-hint">?<span class="tooltip-text">Data capaian diisi melalui menu 🏆 Milestone di sidebar.</span></span></div><a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a></div>
-                                        <div class="switch-label">
+                                    <label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>><span class="slider-round"></span></label>
-                                            <span>Seksi Milestone</span>
-                                            <span class="tooltip-hint">?<span class="tooltip-text">Data angka prestasi diisi melalui menu 🏆 Milestone di sidebar admin.</span></span>
-                                        </div>
-                                        <a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a>
-                                    </div>
-                                    <label class="edukarsa-switch">
-                                        <input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
                                 </div>
-
                                 <div class="switch-row">
-                                    <div class="switch-label-wrap">
+                                    <div class="switch-label-wrap"><div class="switch-label"><span>Seksi Program</span><span class="tooltip-hint">?<span class="tooltip-text">Daftar program kurikulum dikelola pada menu 📚 Program Kami.</span></span></div><a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a></div>
-                                        <div class="switch-label">
+                                    <label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>><span class="slider-round"></span></label>
-                                            <span>Seksi Program</span>
-                                            <span class="tooltip-hint">?<span class="tooltip-text">Daftar jurusan & program kurikulum dikelola melalui menu 📚 Program Kami di sidebar admin.</span></span>
-                                        </div>
-                                        <a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a>
-                                    </div>
-                                    <label class="edukarsa-switch">
-                                        <input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
                                 </div>
-
                                 <div class="switch-row">
-                                    <div class="switch-label-wrap">
+                                    <div class="switch-label-wrap"><div class="switch-label"><span>Seksi Keunggulan</span><span class="tooltip-hint">?<span class="tooltip-text">Poin keunggulan dikelola pada menu ⭐ Keunggulan.</span></span></div><a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a></div>
-                                        <div class="switch-label">
+                                    <label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>><span class="slider-round"></span></label>
-                                            <span>Seksi Keunggulan</span>
-                                            <span class="tooltip-hint">?<span class="tooltip-text">Butir keunggulan institusi dikelola melalui menu ⭐ Keunggulan di sidebar admin.</span></span>
-                                        </div>
-                                        <a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a>
-                                    </div>
-                                    <label class="edukarsa-switch">
-                                        <input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
                                 </div>
                             </div>
 
-                            <!-- Opsi Custom Teks Frontend: Milestone -->
                             <div style="border-top: 1px solid #e2e8f0; margin-top: 20px; padding-top: 15px;">
-                                <h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e; display: flex; align-items: center; gap: 6px;">
+                                <h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e;">🏆 Label Tampilan: Seksi Milestone</h4>
-                                    🏆 Label Tampilan: Seksi Milestone
-                                </h4>
                                 <div class="form-grid-2">
-                                    <div class="form-field-group" style="margin-bottom: 0;">
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Subtitle / Badge Teks</label><input type="text" name="edukarsa_milestone_subtitle" value="<?php echo esc_attr(get_option('edukarsa_milestone_subtitle', 'REKAM JEJAK')); ?>"></div>
-                                        <label>Subtitle / Badge Teks</label>
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi (Heading)</label><input type="text" name="edukarsa_milestone_title" value="<?php echo esc_attr(get_option('edukarsa_milestone_title', 'Milestone & Prestasi')); ?>"></div>
-                                        <input type="text" name="edukarsa_milestone_subtitle" value="<?php echo esc_attr(get_option('edukarsa_milestone_subtitle', 'REKAM JEJAK')); ?>" placeholder="cth: REKAM JEJAK / CAPAIAN KAMI">
-                                    </div>
-                                    <div class="form-field-group" style="margin-bottom: 0;">
-                                        <label>Judul Seksi (Heading)</label>
-                                        <input type="text" name="edukarsa_milestone_title" value="<?php echo esc_attr(get_option('edukarsa_milestone_title', 'Milestone & Prestasi')); ?>" placeholder="cth: Milestone & Prestasi (Kosongkan jika tanpa judul)">
-                                    </div>
                                 </div>
                             </div>
 
-                            <!-- Opsi Custom Teks Frontend: Program -->
                             <div style="border-top: 1px solid #e2e8f0; margin-top: 15px; padding-top: 15px;">
-                                <h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e; display: flex; align-items: center; gap: 6px;">
+                                <h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e;">📚 Label Tampilan: Seksi Program</h4>
-                                    📚 Label Tampilan: Seksi Program
-                                </h4>
                                 <div class="form-grid-2">
-                                    <div class="form-field-group" style="margin-bottom: 0;">
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Subtitle / Badge Teks</label><input type="text" name="edukarsa_program_subtitle" value="<?php echo esc_attr(get_option('edukarsa_program_subtitle', 'AKADEMIK & KARAKTER')); ?>"></div>
-                                        <label>Subtitle / Badge Teks</label>
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi (Heading)</label><input type="text" name="edukarsa_program_title" value="<?php echo esc_attr(get_option('edukarsa_program_title', 'Our Program')); ?>"></div>
-                                        <input type="text" name="edukarsa_program_subtitle" value="<?php echo esc_attr(get_option('edukarsa_program_subtitle', 'AKADEMIK & KARAKTER')); ?>" placeholder="cth: AKADEMIK & KARAKTER / JURUSAN PILIHAN">
-                                    </div>
-                                    <div class="form-field-group" style="margin-bottom: 0;">
-                                        <label>Judul Seksi (Heading)</label>
-                                        <input type="text" name="edukarsa_program_title" value="<?php echo esc_attr(get_option('edukarsa_program_title', 'Our Program')); ?>" placeholder="cth: Program Unggulan / Program Studi">
-                                    </div>
                                 </div>
                             </div>
 
-                            <!-- Opsi Custom Teks Frontend: Keunggulan -->
                             <div style="border-top: 1px solid #e2e8f0; margin-top: 15px; padding-top: 15px;">
-                                <h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e; display: flex; align-items: center; gap: 6px;">
+                                <h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e;">⭐ Label Tampilan: Seksi Keunggulan</h4>
-                                    ⭐ Label Tampilan: Seksi Keunggulan
-                                </h4>
                                 <div class="form-grid-2">
-                                    <div class="form-field-group" style="margin-bottom: 0;">
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Subtitle / Badge Teks</label><input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>"></div>
-                                        <label>Subtitle / Badge Teks</label>
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi (Heading)</label><input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>"></div>
-                                        <input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>" placeholder="cth: WHY CHOOSE US / ALASAN MEMILIH KAMI">
-                                    </div>
-                                    <div class="form-field-group" style="margin-bottom: 0;">
-                                        <label>Judul Seksi (Heading)</label>
-                                        <input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>" placeholder="cth: Keunggulan Sekolah / Fasilitas Terbaik">
-                                    </div>
                                 </div>
                             </div>
-
                         </div>
                     </div>
 
@@ -485,134 +266,81 @@ function edukarsa_settings_page_html() {
                     <div class="edukarsa-card">
                         <div class="edukarsa-card-header">
                             <h2>🎬 4. Video & Parallax (Area Tengah)</h2>
-                            <label class="edukarsa-switch">
+                            <label class="edukarsa-switch"><input type="checkbox" class="section-toggle" data-target="#video-settings-box" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?>><span class="slider-round"></span></label>
-                                <input type="checkbox" class="section-toggle" data-target="#video-settings-box" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?>>
-                                <span class="slider-round"></span>
-                            </label>
                         </div>
                         <div class="edukarsa-card-body" id="video-settings-box">
                             <div class="form-grid-2">
-                                <div class="form-field-group">
+                                <div class="form-field-group"><label>Gambar Latar Parallax</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">Pilih</button></div></div>
-                                    <label>Gambar Latar Parallax</label>
+                                <div class="form-field-group"><label>Warna Overlay Parallax</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 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">Pilih</button>
-                                    </div>
-                                </div>
-                                <div class="form-field-group">
-                                    <label>Warna Overlay Parallax</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">
+                                    <div class="form-field-group"><label>Thumbnail Video 1</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>
-                                        <label>Thumbnail Video 1</label>
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>URL Video 1</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 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>URL Video 1</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">
+                                    <div class="form-field-group"><label>Thumbnail Video 2</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>
-                                        <label>Thumbnail Video 2</label>
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>URL Video 2</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 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>URL Video 2</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>
                         </div>
                     </div>
 
-                    <!-- 5. CTA & Berita -->
+                    <!-- 5. CTA, FAQ & Berita -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header">
+                        <div class="edukarsa-card-header"><h2>📢 5. CTA Pendaftaran, FAQ & Berita</h2></div>
-                            <h2>📢 5. CTA Pendaftaran & Berita</h2>
-                        </div>
                         <div class="edukarsa-card-body">
+                            
+                            <!-- Switch Rows -->
                             <div class="switch-row-inline">
                                 <div class="switch-row">
-                                    <div class="switch-label-wrap">
+                                    <div class="switch-label-wrap"><span class="switch-label">Tampilkan CTA Banner</span><span style="font-size: 11px; color: #64748b;">Pengaturan Khusus PPDB</span></div>
-                                        <span class="switch-label">Tampilkan CTA Banner</span>
+                                    <label class="edukarsa-switch"><input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>><span class="slider-round"></span></label>
-                                        <span style="font-size: 11px; color: #64748b;">Pengaturan Khusus PPDB</span>
-                                    </div>
-                                    <label class="edukarsa-switch">
-                                        <input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
                                 </div>
                                 <div class="switch-row">
                                     <div class="switch-label-wrap">
-                                        <div class="switch-label">
+                                        <div class="switch-label"><span>Tampilkan Seksi FAQ</span><span class="tooltip-hint">?<span class="tooltip-text">Daftar tanya jawab diisi lewat menu ❓ Tanya Jawab (FAQ).</span></span></div>
-                                            <span>Tampilkan Berita Kampus</span>
+                                        <a href="<?php echo admin_url('edit.php?post_type=faq'); ?>" class="cpt-shortcut-link">Kelola FAQ ↗</a>
-                                            <span class="tooltip-hint">?<span class="tooltip-text">Berita otomatis diambil dari menu 'Pos' bawaan WordPress.</span></span>
-                                        </div>
-                                        <a href="<?php echo admin_url('edit.php'); ?>" class="cpt-shortcut-link">Kelola Berita ↗</a>
                                     </div>
-                                    <label class="edukarsa-switch">
+                                    <label class="edukarsa-switch"><input type="checkbox" class="section-toggle" data-target="#faq-settings-box" name="edukarsa_tampil_faq" value="1" <?php checked(1, get_option('edukarsa_tampil_faq', 1)); ?>><span class="slider-round"></span></label>
-                                        <input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>>
+                                </div>
-                                        <span class="slider-round"></span>
+                                <div class="switch-row">
-                                    </label>
+                                    <div class="switch-label-wrap"><div class="switch-label"><span>Tampilkan Berita Kampus</span><span class="tooltip-hint">?<span class="tooltip-text">Berita otomatis diambil dari menu 'Pos'.</span></span></div><a href="<?php echo admin_url('edit.php'); ?>" class="cpt-shortcut-link">Kelola Berita ↗</a></div>
+                                    <label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>><span class="slider-round"></span></label>
                                 </div>
                             </div>
 
+                            <!-- Form CTA -->
                             <div id="cta-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
                                 <h4>Konfigurasi CTA PPDB / PMB</h4>
                                 <div class="form-grid-2">
-                                    <div class="form-field-group">
+                                    <div class="form-field-group"><label>Gambar Latar CTA</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>
-                                        <label>Gambar Latar CTA</label>
+                                    <div class="form-field-group"><label>Teks Tombol CTA</label><input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang')); ?>"></div>
-                                        <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>Teks Tombol CTA</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">
-                                    <div class="form-field-group" style="margin-bottom:0;">
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Judul Ajakan CTA</label><input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>"></div>
-                                        <label>Judul Ajakan CTA</label>
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Tautan Tombol CTA</label><input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>"></div>
-                                        <input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>">
-                                    </div>
-                                    <div class="form-field-group" style="margin-bottom:0;">
-                                        <label>Tautan Tombol CTA</label>
-                                        <input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>">
-                                    </div>
                                 </div>
                             </div>
 
-                            <div class="form-field-group" style="margin-bottom:0;">
+                            <!-- Form Label FAQ -->
-                                <label>Judul Seksi Berita</label>
+                            <div id="faq-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
-                                <input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>">
+                                <h4>Label Tampilan Seksi FAQ (Tanya Jawab)</h4>
+                                <div class="form-grid-2">
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Subtitle / Badge FAQ</label><input type="text" name="edukarsa_faq_subtitle" value="<?php echo esc_attr(get_option('edukarsa_faq_subtitle', 'FAQ')); ?>" placeholder="cth: FAQ / INFO PENTING"></div>
+                                    <div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi FAQ</label><input type="text" name="edukarsa_faq_title" value="<?php echo esc_attr(get_option('edukarsa_faq_title', 'Pertanyaan Umum')); ?>" placeholder="cth: Pertanyaan Umum"></div>
+                                </div>
                             </div>
+
+                            <div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi Berita</label><input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>"></div>
                         </div>
                     </div>
 
                     <!-- 6. Footer & Kontak -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header">
+                        <div class="edukarsa-card-header"><h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2></div>
-                            <h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2>
-                        </div>
                         <div class="edukarsa-card-body">
                             <div class="form-grid-2">
                                 <div class="form-field-group">
@@ -623,94 +351,32 @@ function edukarsa_settings_page_html() {
                                     </div>
                                 </div>
                                 <div class="form-field-group">
-                                    <label>Jam Operasional / Layanan</label>
+                                    <label>Jam Operasional / Layanan (Multi-baris / Bebas Tekan Enter)</label>
-                                    <input type="text" name="edukarsa_footer_jam" value="<?php echo esc_attr(get_option('edukarsa_footer_jam', 'Senin – Jumat: 08.00 – 16.00 WIB')); ?>" placeholder="cth: Senin – Jumat: 08.00 – 16.00 WIB">
+                                    <textarea name="edukarsa_footer_jam" rows="3" placeholder="Senin – Kamis: 08.00 – 16.00 WIB&#10;Jumat: 08.00 – 11.30 WIB&#10;Sabtu: 08.00 – 12.00 WIB"><?php echo esc_textarea(get_option('edukarsa_footer_jam', "Senin – Jumat: 08.00 – 16.00 WIB\nSabtu: 08.00 – 12.00 WIB")); ?></textarea>
                                 </div>
                             </div>
 
                             <div class="form-field-group">
                                 <label>Deskripsi Singkat Kampus / Visi Ringkas (Kolom 1)</label>
-                                <textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.')); ?></textarea>
+                                <textarea name="edukarsa_footer_desc" rows="3"><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.')); ?></textarea>
                             </div>
 
-                            <div class="form-field-group">
+                            <div class="form-field-group"><label>Alamat Lengkap Institusi</label><textarea name="edukarsa_footer_alamat" rows="2"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea></div>
-                                <label>Alamat Lengkap Institusi</label>
-                                <textarea name="edukarsa_footer_alamat" rows="2"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea>
-                            </div>
 
                             <div class="form-grid-2">
-                                <div class="form-field-group">
+                                <div class="form-field-group"><label>Nomor Telepon / WhatsApp Layanan</label><input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>" placeholder="+62 ..."></div>
-                                    <label>Nomor Telepon / WhatsApp Layanan</label>
+                                <div class="form-field-group"><label>Alamat Email Resmi</label><input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>" placeholder="[email protected]"></div>
-                                    <input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>" placeholder="+62 ...">
-                                </div>
-                                <div class="form-field-group">
-                                    <label>Alamat Email Resmi</label>
-                                    <input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>" placeholder="[email protected]">
-                                </div>
                             </div>
 
-                            <div class="form-field-group">
+                            <div class="form-field-group"><label>Teks Hak Cipta (Copyright Bar)</label><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.')); ?>"></div>
-                                <label>Teks Hak Cipta (Copyright Bar)</label>
-                                <input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.')); ?>">
-                            </div>
 
                             <h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</h4>
                             
-                            <div class="switch-row">
+                            <div class="switch-row"><span class="switch-label">Facebook</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>" placeholder="https://facebook.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>><span class="slider-round"></span></label></div></div>
-                                <span class="switch-label">Facebook</span>
+                            <div class="switch-row"><span class="switch-label">Instagram</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>" placeholder="https://instagram.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>><span class="slider-round"></span></label></div></div>
-                                <div style="display:flex; align-items:center; gap:12px; width:70%;">
+                            <div class="switch-row"><span class="switch-label">YouTube</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>" placeholder="https://youtube.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>><span class="slider-round"></span></label></div></div>
-                                    <input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>" placeholder="https://facebook.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
+                            <div class="switch-row"><span class="switch-label">TikTok</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_tiktok" value="<?php echo esc_attr(get_option('edukarsa_footer_tiktok')); ?>" placeholder="https://tiktok.com/@..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_tiktok" value="1" <?php checked(1, get_option('edukarsa_tampil_tiktok', 0)); ?>><span class="slider-round"></span></label></div></div>
-                                    <label class="edukarsa-switch">
+                            <div class="switch-row"><span class="switch-label">X (Twitter)</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_x" value="<?php echo esc_attr(get_option('edukarsa_footer_x')); ?>" placeholder="https://x.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_x" value="1" <?php checked(1, get_option('edukarsa_tampil_x', 0)); ?>><span class="slider-round"></span></label></div></div>
-                                        <input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
-                                </div>
-                            </div>
-
-                            <div class="switch-row">
-                                <span class="switch-label">Instagram</span>
-                                <div style="display:flex; align-items:center; gap:12px; width:70%;">
-                                    <input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>" placeholder="https://instagram.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
-                                    <label class="edukarsa-switch">
-                                        <input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
-                                </div>
-                            </div>
-
-                            <div class="switch-row">
-                                <span class="switch-label">YouTube</span>
-                                <div style="display:flex; align-items:center; gap:12px; width:70%;">
-                                    <input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>" placeholder="https://youtube.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
-                                    <label class="edukarsa-switch">
-                                        <input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
-                                </div>
-                            </div>
-
-                            <div class="switch-row">
-                                <span class="switch-label">TikTok</span>
-                                <div style="display:flex; align-items:center; gap:12px; width:70%;">
-                                    <input type="text" name="edukarsa_footer_tiktok" value="<?php echo esc_attr(get_option('edukarsa_footer_tiktok')); ?>" placeholder="https://tiktok.com/@..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
-                                    <label class="edukarsa-switch">
-                                        <input type="checkbox" name="edukarsa_tampil_tiktok" value="1" <?php checked(1, get_option('edukarsa_tampil_tiktok', 0)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
-                                </div>
-                            </div>
-
-                            <div class="switch-row">
-                                <span class="switch-label">X (Twitter)</span>
-                                <div style="display:flex; align-items:center; gap:12px; width:70%;">
-                                    <input type="text" name="edukarsa_footer_x" value="<?php echo esc_attr(get_option('edukarsa_footer_x')); ?>" placeholder="https://x.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
-                                    <label class="edukarsa-switch">
-                                        <input type="checkbox" name="edukarsa_tampil_x" value="1" <?php checked(1, get_option('edukarsa_tampil_x', 0)); ?>>
-                                        <span class="slider-round"></span>
-                                    </label>
-                                </div>
-                            </div>
-
                         </div>
                     </div>
 
@@ -718,21 +384,16 @@ function edukarsa_settings_page_html() {
 
                 <!-- KOLOM KANAN (SIDEBAR ACTION PANEL) -->
                 <div class="edukarsa-admin-sidebar">
-                    
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header">
+                        <div class="edukarsa-card-header"><h2>💾 Publikasi</h2></div>
-                            <h2>💾 Publikasi</h2>
-                        </div>
                         <div class="edukarsa-card-body text-center" style="padding:18px;">
-                            <p style="font-size:12px; color:#64748b; margin-top:0; margin-bottom:15px;">Simpan seluruh konfigurasi desain dan seksi halaman EduKarsa.</p>
+                            <p style="font-size:12px; color:#64748b; margin-top:0; margin-bottom:15px;">Simpan konfigurasi tema EduKarsa.</p>
                             <?php submit_button( 'Simpan Pengaturan', 'primary large', 'submit', false, array('style'=>'width:100%; border-radius:6px; font-weight:700; padding:10px;') ); ?>
                         </div>
                     </div>
 
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header">
+                        <div class="edukarsa-card-header"><h2>🔤 Tipografi Font</h2></div>
-                            <h2>🔤 Tipografi Font</h2>
-                        </div>
                         <div class="edukarsa-card-body">
                             <div class="form-field-group" style="margin-bottom:0;">
                                 <label>Pilihan Font Utama</label>
@@ -748,70 +409,25 @@ function edukarsa_settings_page_html() {
                     </div>
 
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header">
+                        <div class="edukarsa-card-header"><h2>🎨 Skema Warna</h2></div>
-                            <h2>🎨 Skema Warna</h2>
-                        </div>
                         <div class="edukarsa-card-body">
                             <label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:10px;">Pilih Preset Instan</label>
-                            
                             <div class="preset-grid">
-                                <div class="preset-pill" data-p="#0b4a8e" data-s="#1a73e8" data-h="#0f172a">
+                                <div class="preset-pill" data-p="#0b4a8e" data-s="#1a73e8" data-h="#0f172a"><div class="swatch-group"><span class="swatch-item" style="background:#0b4a8e;"></span><span class="swatch-item" style="background:#1a73e8;"></span></div><span class="preset-name">Classic Navy (Default)</span></div>
-                                    <div class="swatch-group"><span class="swatch-item" style="background:#0b4a8e;"></span><span class="swatch-item" style="background:#1a73e8;"></span></div>
+                                <div class="preset-pill" data-p="#065f46" data-s="#10b981" data-h="#064e3b"><div class="swatch-group"><span class="swatch-item" style="background:#065f46;"></span><span class="swatch-item" style="background:#10b981;"></span></div><span class="preset-name">Islamic Emerald Green</span></div>
-                                    <span class="preset-name">Classic Navy (Default)</span>
+                                <div class="preset-pill" data-p="#881337" data-s="#e11d48" data-h="#4c0519"><div class="swatch-group"><span class="swatch-item" style="background:#881337;"></span><span class="swatch-item" style="background:#e11d48;"></span></div><span class="preset-name">Prestige Maroon</span></div>
-                                </div>
+                                <div class="preset-pill" data-p="#0f766e" data-s="#06b6d4" data-h="#134e4a"><div class="swatch-group"><span class="swatch-item" style="background:#0f766e;"></span><span class="swatch-item" style="background:#06b6d4;"></span></div><span class="preset-name">Techno Teal</span></div>
-                                <div class="preset-pill" data-p="#065f46" data-s="#10b981" data-h="#064e3b">
+                                <div class="preset-pill" data-p="#581c87" data-s="#8b5cf6" data-h="#3b0764"><div class="swatch-group"><span class="swatch-item" style="background:#581c87;"></span><span class="swatch-item" style="background:#8b5cf6;"></span></div><span class="preset-name">Royal Violet</span></div>
-                                    <div class="swatch-group"><span class="swatch-item" style="background:#065f46;"></span><span class="swatch-item" style="background:#10b981;"></span></div>
+                                <div class="preset-pill" data-p="#b45309" data-s="#f59e0b" data-h="#78350f"><div class="swatch-group"><span class="swatch-item" style="background:#b45309;"></span><span class="swatch-item" style="background:#f59e0b;"></span></div><span class="preset-name">Autumn Gold</span></div>
-                                    <span class="preset-name">Islamic Emerald Green</span>
-                                </div>
-                                <div class="preset-pill" data-p="#881337" data-s="#e11d48" data-h="#4c0519">
-                                    <div class="swatch-group"><span class="swatch-item" style="background:#881337;"></span><span class="swatch-item" style="background:#e11d48;"></span></div>
-                                    <span class="preset-name">Prestige Maroon</span>
-                                </div>
-                                <div class="preset-pill" data-p="#0f766e" data-s="#06b6d4" data-h="#134e4a">
-                                    <div class="swatch-group"><span class="swatch-item" style="background:#0f766e;"></span><span class="swatch-item" style="background:#06b6d4;"></span></div>
-                                    <span class="preset-name">Techno Teal</span>
-                                </div>
-                                <div class="preset-pill" data-p="#581c87" data-s="#8b5cf6" data-h="#3b0764">
-                                    <div class="swatch-group"><span class="swatch-item" style="background:#581c87;"></span><span class="swatch-item" style="background:#8b5cf6;"></span></div>
-                                    <span class="preset-name">Royal Violet</span>
-                                </div>
-                                <div class="preset-pill" data-p="#b45309" data-s="#f59e0b" data-h="#78350f">
-                                    <div class="swatch-group"><span class="swatch-item" style="background:#b45309;"></span><span class="swatch-item" style="background:#f59e0b;"></span></div>
-                                    <span class="preset-name">Autumn Gold</span>
-                                </div>
                             </div>
-
                             <hr style="margin:20px 0; border:none; border-top:1px solid #f1f5f9;">
-
                             <label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:12px;">Sesuaikan Manual</label>
-
+                            <div class="color-picker-row"><span style="font-size:13px; font-weight:600;">Warna Primer</span><div style="display:flex; align-items:center; gap:8px;"><input type="color" id="primary_picker" name="edukarsa_primary_color" value="<?php echo esc_attr( $primary_color ); ?>"><code id="primary_code"><?php echo esc_html( $primary_color ); ?></code></div></div>
-                            <div class="color-picker-row">
+                            <div class="color-picker-row"><span style="font-size:13px; font-weight:600;">Warna Aksen</span><div style="display:flex; align-items:center; gap:8px;"><input type="color" id="secondary_picker" name="edukarsa_secondary_color" value="<?php echo esc_attr( $secondary_color ); ?>"><code id="secondary_code"><?php echo esc_html( $secondary_color ); ?></code></div></div>
-                                <span style="font-size:13px; font-weight:600;">Warna Primer</span>
+                            <div class="color-picker-row"><span style="font-size:13px; font-weight:600;">Warna Judul</span><div style="display:flex; align-items:center; gap:8px;"><input type="color" id="heading_picker" name="edukarsa_heading_color" value="<?php echo esc_attr( $heading_color ); ?>"><code id="heading_code"><?php echo esc_html( $heading_color ); ?></code></div></div>
-                                <div style="display:flex; align-items:center; gap:8px;">
-                                    <input type="color" id="primary_picker" name="edukarsa_primary_color" value="<?php echo esc_attr( $primary_color ); ?>">
-                                    <code id="primary_code"><?php echo esc_html( $primary_color ); ?></code>
-                                </div>
-                            </div>
-                            <div class="color-picker-row">
-                                <span style="font-size:13px; font-weight:600;">Warna Aksen</span>
-                                <div style="display:flex; align-items:center; gap:8px;">
-                                    <input type="color" id="secondary_picker" name="edukarsa_secondary_color" value="<?php echo esc_attr( $secondary_color ); ?>">
-                                    <code id="secondary_code"><?php echo esc_html( $secondary_color ); ?></code>
-                                </div>
-                            </div>
-                            <div class="color-picker-row">
-                                <span style="font-size:13px; font-weight:600;">Warna Judul</span>
-                                <div style="display:flex; align-items:center; gap:8px;">
-                                    <input type="color" id="heading_picker" name="edukarsa_heading_color" value="<?php echo esc_attr( $heading_color ); ?>">
-                                    <code id="heading_code"><?php echo esc_html( $heading_color ); ?></code>
-                                </div>
-                            </div>
-
                         </div>
                     </div>
-
                 </div>
-
             </div>
         </form>
     </div>
@@ -821,30 +437,17 @@ function edukarsa_settings_page_html() {
         function syncToggles() {
             $('.section-toggle').each(function(){
                 var target = $(this).data('target');
-                if ($(this).is(':checked')) {
+                if ($(this).is(':checked')) { $(target).slideDown(200); } else { $(target).slideUp(200); }
-                    $(target).slideDown(200);
-                } else {
-                    $(target).slideUp(200);
-                }
             });
         }
         $('.section-toggle').change(syncToggles);
         syncToggles();
 
         $('.preset-pill').click(function(){
-            var p = $(this).data('p');
+            var p = $(this).data('p'), s = $(this).data('s'), h = $(this).data('h');
-            var s = $(this).data('s');
+            $('#primary_picker').val(p); $('#primary_code').text(p);
-            var h = $(this).data('h');
+            $('#secondary_picker').val(s); $('#secondary_code').text(s);
-
+            $('#heading_picker').val(h); $('#heading_code').text(h);
-            $('#primary_picker').val(p);
-            $('#primary_code').text(p);
-
-            $('#secondary_picker').val(s);
-            $('#secondary_code').text(s);
-
-            $('#heading_picker').val(h);
-            $('#heading_code').text(h);
-
             $('.preset-pill').css('border-color', '#e2e8f0');
             $(this).css('border-color', '#0b4a8e');
         });
@@ -857,16 +460,8 @@ function edukarsa_settings_page_html() {
         $('.btn-upload').click(function(e) {
             e.preventDefault();
             var targetInput = $(this).data('target');
-            if (mediaUploader) {
+            if (mediaUploader) { mediaUploader.targetInput = targetInput; mediaUploader.open(); return; }
-                mediaUploader.targetInput = targetInput;
+            mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Berkas Media', button: { text: 'Gunakan Media Ini' }, multiple: false });
-                mediaUploader.open();
-                return;
-            }
-            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();

inc/cpt-slider.php

@@ -1,9 +1,7 @@
 <?php
 /**
- * File ini menangani pembuatan Custom Post Type (CPT)
+ * Registrasi Seluruh Custom Post Type (CPT) Native EduKarsa
- * beserta Custom Meta Box untuk Tautan (Link) Slider.
  */
-
 function edukarsa_register_all_cpt() {
     register_post_type( 'slider', array(
         'labels' => array('name' => 'Semua Slider', 'singular_name' => 'Slider', 'add_new_item' => 'Tambah Slider'),
@@ -21,10 +19,14 @@ function edukarsa_register_all_cpt() {
         '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 ---
+// 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' );
 }

style.css

@@ -363,3 +363,18 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 }
 .back-to-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
 .back-to-top-btn:hover { background-color: var(--secondary-color); transform: translateY(-3px); }
+
+/* 16. FAQ ACCORDION SECTION */
+.edukarsa-faq-section { padding: 60px 0 40px; background-color: #f8fafc; }
+.faq-accordion-container { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
+.faq-item { background: #ffffff; border-radius: var(--radius); border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow: hidden; transition: all 0.25s ease; }
+.faq-item:hover { border-color: var(--secondary-color); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }
+.faq-header { width: 100%; padding: 22px 26px; background: transparent; border: none; outline: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; }
+.faq-title { font-size: 16px; font-weight: 700; color: var(--heading-color); margin: 0; line-height: 1.45; transition: color 0.2s ease; }
+.faq-item:hover .faq-title, .faq-item.active .faq-title { color: var(--primary-color); }
+.faq-icon { width: 26px; height: 26px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; font-weight: 800; color: var(--primary-color); transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; line-height: 1; }
+.faq-item.active .faq-icon { background: var(--primary-color); color: #ffffff; transform: rotate(45deg); }
+.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 26px; color: var(--text-color); font-size: 15px; line-height: 1.75; }
+.faq-body-content p { margin-bottom: 0; }
+.faq-body-content p + p { margin-top: 10px; }
+.faq-item.active .faq-body { max-height: 400px; padding: 0 26px 22px; }