From f6a16450da6d8f6624d18d48c22fbe53d43f2fb1 Mon Sep 17 00:00:00 2001
From: Mas Budi Kusuma <admin@masbudi.my.id>
Date: Wed, 16 Sep 2026 00:04:57 +0700
Subject: [PATCH] feat: tambahkan sidebar pada page.php, box html kustom, dan
 collapsible accordion dashboard

---
 inc/admin-menu.php | 228 +++++++++++++++++++++++++++++++++------------
 page.php           |  69 ++++++++++----
 sidebar.php        |  26 +++++-
 style.css          |   6 ++
 4 files changed, 249 insertions(+), 80 deletions(-)

diff --git a/inc/admin-menu.php b/inc/admin-menu.php
index 056f395..d90feba 100644
--- a/inc/admin-menu.php
+++ b/inc/admin-menu.php
@@ -43,23 +43,16 @@ add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
 
 function edukarsa_register_settings() {
     $options = array(
-        // Desain & Fitur Global
         'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
         'edukarsa_tampil_bilingual', 'edukarsa_lang_en', 'edukarsa_lang_ar', 'edukarsa_lang_zh', 'edukarsa_lang_ja',
         'edukarsa_tampil_accessibility',
-        
-        // Halaman Depan Seksi
         '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',
         'edukarsa_header_logo',
-        
-        // Label Kustom Frontend
         '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',
-        
-        // Data Beranda
         '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',
@@ -68,7 +61,7 @@ function edukarsa_register_settings() {
         'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
         'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
         
-        // KUSTOMISASI SIDEBAR (Bebas Menu Widget)
+        // Pengaturan Sidebar (Termasuk Box HTML Kustom)
         'edukarsa_sidebar_tampil_search',
         'edukarsa_sidebar_tampil_cta',
         'edukarsa_sidebar_cta_badge',
@@ -76,6 +69,9 @@ function edukarsa_register_settings() {
         'edukarsa_sidebar_cta_desc',
         'edukarsa_sidebar_cta_btn_text',
         'edukarsa_sidebar_cta_btn_url',
+        'edukarsa_sidebar_tampil_html',
+        'edukarsa_sidebar_html_title',
+        'edukarsa_sidebar_html_content',
         'edukarsa_sidebar_tampil_recent',
         'edukarsa_sidebar_recent_title',
         'edukarsa_sidebar_recent_count',
@@ -84,7 +80,6 @@ function edukarsa_register_settings() {
         'edukarsa_sidebar_banner_img',
         'edukarsa_sidebar_banner_url',
 
-        // Footer & WA
         'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
         'edukarsa_wa_btn_text', 'edukarsa_wa_default_msg',
         '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',
@@ -104,11 +99,35 @@ function edukarsa_settings_page_html() {
     <style>
         .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; }
-        .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; }
         
+        /* CARD COLLAPSIBLE ACCORDION STYLE */
+        .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: 16px; overflow: hidden; transition: border-color 0.2s ease; }
+        .edukarsa-card:hover { border-color: #cbd5e1; }
+        
+        .edukarsa-card-header { 
+            padding: 16px 22px; 
+            background: #fafafa; 
+            display: flex; 
+            justify-content: space-between; 
+            align-items: center; 
+            cursor: pointer; 
+            user-select: none;
+            transition: background 0.2s ease;
+        }
+        .edukarsa-card-header:hover { background: #f1f5f9; }
+        .edukarsa-card-header h2 { margin: 0; font-size: 15px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 10px; }
+        
+        .header-collapse-trigger { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #64748b; }
+        .collapse-icon { width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: transform 0.25s ease, background 0.2s ease; color: #334155; }
+        .edukarsa-card.is-collapsed .collapse-icon { transform: rotate(-90deg); background: #f1f5f9; }
+        .edukarsa-card-body { padding: 22px; border-top: 1px solid #f1f5f9; }
+        .edukarsa-card.is-collapsed .edukarsa-card-body { display: none; }
+
+        /* ACTION TOOLBAR ATAS */
+        .edukarsa-accordion-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 15px; }
+        .btn-acc-action { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: #475569; }
+        .btn-acc-action:hover { background: #e2e8f0; color: #0b4a8e; }
+
         .switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
         .switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 15px; }
         .switch-label-wrap { display: flex; flex-direction: column; gap: 5px; }
@@ -133,7 +152,7 @@ function edukarsa_settings_page_html() {
         .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
         .form-field-group { margin-bottom: 15px; }
         .form-field-group label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 6px; }
-        .form-field-group input[type="text"], .form-field-group textarea, .form-field-group select { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; font-size: 13px; box-sizing: border-box; }
+        .form-field-group input[type="text"], .form-field-group input[type="number"], .form-field-group textarea, .form-field-group select { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; font-size: 13px; box-sizing: border-box; }
         .input-with-button { display: flex; gap: 8px; }
         .input-with-button input { flex-grow: 1; }
 
@@ -167,11 +186,21 @@ function edukarsa_settings_page_html() {
             <?php settings_fields( 'edukarsa_settings_group' ); ?>
 
             <div class="edukarsa-admin-layout">
+                
+                <!-- KOLOM UTAMA (7 PANEL COLLAPSIBLE ACCORDION) -->
                 <div class="edukarsa-admin-main">
                     
+                    <div class="edukarsa-accordion-actions">
+                        <button type="button" class="btn-acc-action" id="acc-expand-all">➕ Buka Semua</button>
+                        <button type="button" class="btn-acc-action" id="acc-collapse-all">➖ Tutup Semua</button>
+                    </div>
+
                     <!-- 1. Header, Logo, Slider, Bahasa & Aksesibilitas -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header"><h2>🏛️ 1. Header, Logo & Slider</h2></div>
+                        <div class="edukarsa-card-header">
+                            <h2>🏛️ 1. Header, Logo, Slider & Bahasa</h2>
+                            <div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
+                        </div>
                         <div class="edukarsa-card-body">
                             <div class="form-field-group">
                                 <label>Logo Website (Header)</label>
@@ -217,7 +246,7 @@ function edukarsa_settings_page_html() {
                                 <div class="switch-label-wrap">
                                     <div class="switch-label" style="color: #166534;">
                                         <span>♿ Fitur Aksesibilitas Disabilitas (WCAG Toolbar & Suara)</span>
-                                        <span class="tooltip-hint">?<span class="tooltip-text">Menampilkan toolbar ramah disabilitas (pembaca suara/audio, kontras, monokrom, ukuran huruf, sorot tautan).</span></span>
+                                        <span class="tooltip-hint">?<span class="tooltip-text">Menampilkan toolbar ramah disabilitas (pembaca suara audio, kontras, monokrom, ukuran huruf, sorot tautan).</span></span>
                                     </div>
                                     <span style="font-size: 11px; color: #15803d;">Dilengkapi Web Speech Synthesizer bawaan untuk membacakan artikel bagi tunanetra.</span>
                                 </div>
@@ -276,24 +305,36 @@ function edukarsa_settings_page_html() {
                     <div class="edukarsa-card">
                         <div class="edukarsa-card-header">
                             <h2>👤 2. Sambutan & Profil Pimpinan</h2>
-                            <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>
+                            <div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
                         </div>
-                        <div class="edukarsa-card-body" id="about-settings-box">
-                            <div class="form-grid-2">
-                                <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>
-                                <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="edukarsa-card-body">
+                            <div class="switch-row" style="margin-bottom: 15px;">
+                                <span class="switch-label">Aktifkan Seksi Sambutan</span>
+                                <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>
                             </div>
-                            <div class="form-grid-2">
-                                <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>
-                                <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 id="about-settings-box">
+                                <div class="form-grid-2">
+                                    <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>
+                                    <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"><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>
+                                    <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>
-                            <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, Milestones, & Keunggulan -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header"><h2>⭐ 3. Program, Milestones, & Keunggulan</h2></div>
+                        <div class="edukarsa-card-header">
+                            <h2>⭐ 3. Program, Milestones, & Keunggulan</h2>
+                            <div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
+                        </div>
                         <div class="edukarsa-card-body">
                             <div class="switch-row-inline">
                                 <div class="switch-row">
@@ -340,23 +381,32 @@ 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"><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 class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
                         </div>
-                        <div class="edukarsa-card-body" id="video-settings-box">
-                            <div class="form-grid-2">
-                                <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>
-                                <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="edukarsa-card-body">
+                            <div class="switch-row" style="margin-bottom: 15px;">
+                                <span class="switch-label">Aktifkan Seksi Video</span>
+                                <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>
                             </div>
-                            <div class="form-grid-2">
-                                <div class="stat-config-box">
-                                    <h4>Video 1</h4>
-                                    <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>
-                                    <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 id="video-settings-box">
+                                <div class="form-grid-2">
+                                    <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>
+                                    <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="stat-config-box">
-                                    <h4>Video 2</h4>
-                                    <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>
-                                    <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="form-grid-2">
+                                    <div class="stat-config-box">
+                                        <h4>Video 1</h4>
+                                        <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>
+                                        <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"><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>
+                                        <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>
@@ -364,7 +414,10 @@ function edukarsa_settings_page_html() {
 
                     <!-- 5. CTA, FAQ & Berita -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header"><h2>📢 5. CTA Pendaftaran, FAQ & Berita</h2></div>
+                        <div class="edukarsa-card-header">
+                            <h2>📢 5. CTA Pendaftaran, FAQ & Berita</h2>
+                            <div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
+                        </div>
                         <div class="edukarsa-card-body">
                             <div class="switch-row-inline">
                                 <div class="switch-row">
@@ -376,14 +429,11 @@ function edukarsa_settings_page_html() {
                                     <div class="switch-label-wrap">
                                         <div class="switch-label">
                                             <span>Tampilkan Seksi FAQ</span>
-                                            <span class="tooltip-hint">?<span class="tooltip-text">Jika dinonaktifkan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ yang sudah dibuat tetap tersimpan aman di database.</span></span>
+                                            <span class="tooltip-hint">?<span class="tooltip-text">Jika dinonaktifkan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ tetap tersimpan aman.</span></span>
                                         </div>
                                         <a href="<?php echo admin_url('edit.php?post_type=faq'); ?>" class="cpt-shortcut-link">Kelola Data FAQ ↗</a>
                                     </div>
-                                    <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>
+                                    <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>
                                 </div>
 
                                 <div class="switch-row">
@@ -416,17 +466,17 @@ function edukarsa_settings_page_html() {
                         </div>
                     </div>
 
-                    <!-- 6. KUSTOMISASI SIDEBAR (BARU: PENGGANTI WIDGET WP) -->
+                    <!-- 6. Kustomisasi Sidebar (Termasuk Box HTML Kustom) -->
                     <div class="edukarsa-card">
                         <div class="edukarsa-card-header">
                             <h2>📑 6. Pengaturan Sidebar (Artikel & Halaman)</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;">
-                                Kelola komponen sidebar artikel secara native tanpa perlu menu Widget WordPress.
+                                Kelola komponen sidebar artikel dan halaman statis secara native tanpa menu Widget WordPress.
                             </p>
 
-                            <!-- Toggle Komponen Sidebar -->
                             <div class="switch-row-inline">
                                 <div class="switch-row">
                                     <span class="switch-label">Kotak Pencarian Cepat</span>
@@ -436,7 +486,7 @@ function edukarsa_settings_page_html() {
                                     </label>
                                 </div>
                                 <div class="switch-row">
-                                    <span class="switch-label">Kartu Mini CTA Pendaftaran</span>
+                                    <span class="switch-label">Mini CTA Pendaftaran</span>
                                     <label class="edukarsa-switch">
                                         <input type="checkbox" class="section-toggle" data-target="#sidebar-cta-box" name="edukarsa_sidebar_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_cta', 1)); ?>>
                                         <span class="slider-round"></span>
@@ -444,7 +494,6 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <!-- Detail Form Mini CTA Sidebar -->
                             <div id="sidebar-cta-box" class="stat-config-box" style="margin-bottom: 15px;">
                                 <h4>Konfigurasi Mini CTA Sidebar</h4>
                                 <div class="form-grid-2">
@@ -458,6 +507,33 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
+                            <!-- OPSI BARU: BOX HTML KUSTOM SIDEBAR -->
+                            <div class="switch-row" style="background: #fdf4ff; border-color: #f5d0fe;">
+                                <div class="switch-label-wrap">
+                                    <div class="switch-label" style="color: #86198f;">
+                                        <span>🧩 Box HTML Kustom Sidebar</span>
+                                        <span class="tooltip-hint">?<span class="tooltip-text">Pasang kode HTML bebas seperti embed Google Maps, video profil, widget eksternal, atau teks bebas.</span></span>
+                                    </div>
+                                    <span style="font-size: 11px; color: #a21caf;">Menambahkan area kustomisasi tanpa batas pada sidebar.</span>
+                                </div>
+                                <label class="edukarsa-switch">
+                                    <input type="checkbox" class="section-toggle" data-target="#sidebar-html-box" name="edukarsa_sidebar_tampil_html" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_html', 0)); ?>>
+                                    <span class="slider-round"></span>
+                                </label>
+                            </div>
+
+                            <div id="sidebar-html-box" class="stat-config-box" style="margin-bottom: 15px;">
+                                <h4>Konfigurasi Box HTML Kustom</h4>
+                                <div class="form-field-group">
+                                    <label>Judul Box (Opsional, kosongkan jika tanpa judul)</label>
+                                    <input type="text" name="edukarsa_sidebar_html_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_html_title', 'Informasi Tambahan')); ?>" placeholder="cth: Peta Kampus / Info Layanan">
+                                </div>
+                                <div class="form-field-group" style="margin-bottom:0;">
+                                    <label>Isi Kode HTML / Teks Bebas</label>
+                                    <textarea name="edukarsa_sidebar_html_content" rows="6" placeholder="<p>Tulis teks HTML atau paste iframe Google Maps di sini...</p>" style="font-family: monospace; font-size: 12px;"><?php echo esc_textarea(get_option('edukarsa_sidebar_html_content')); ?></textarea>
+                                </div>
+                            </div>
+
                             <div class="switch-row-inline">
                                 <div class="switch-row">
                                     <span class="switch-label">Daftar Berita Terbaru</span>
@@ -485,7 +561,6 @@ function edukarsa_settings_page_html() {
                                 <input type="text" name="edukarsa_sidebar_cats_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cats_title', 'Kategori Pilihan')); ?>">
                             </div>
 
-                            <!-- Banner Iklan / Pengumuman Khusus Sidebar -->
                             <div class="form-grid-2">
                                 <div class="form-field-group">
                                     <label>Banner Poster Sidebar (Opsional)</label>
@@ -505,7 +580,10 @@ function edukarsa_settings_page_html() {
 
                     <!-- 7. Footer, Kontak & WhatsApp -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header"><h2>📞 7. Footer, Kontak & Tombol WhatsApp</h2></div>
+                        <div class="edukarsa-card-header">
+                            <h2>📞 7. Footer, Kontak & Tombol WhatsApp</h2>
+                            <div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
+                        </div>
                         <div class="edukarsa-card-body">
                             <div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px;">
                                 <h4 style="margin: 0 0 12px; font-size: 13px; color: #166534;">💬 Kustomisasi Tombol WhatsApp Melayang</h4>
@@ -560,18 +638,22 @@ function edukarsa_settings_page_html() {
 
                 </div>
 
-                <!-- KOLOM KANAN (SIDEBAR ACTION PANEL) -->
+                <!-- KOLOM KANAN (SIDEBAR ACTION PANEL STICKY) -->
                 <div class="edukarsa-admin-sidebar">
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header"><h2>💾 Publikasi</h2></div>
+                        <div class="edukarsa-card-header" style="cursor:default;">
+                            <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 konfigurasi tema EduKarsa.</p>
+                            <p style="font-size:12px; color:#64748b; margin-top:0; margin-bottom:15px;">Simpan seluruh 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"><h2>🔤 Tipografi Font</h2></div>
+                        <div class="edukarsa-card-header" style="cursor:default;">
+                            <h2>🔤 Tipografi Font</h2>
+                        </div>
                         <div class="edukarsa-card-body">
                             <div class="form-field-group" style="margin-bottom:0;">
                                 <label>Pilihan Font Utama</label>
@@ -587,7 +669,9 @@ function edukarsa_settings_page_html() {
                     </div>
 
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header"><h2>🎨 Skema Warna</h2></div>
+                        <div class="edukarsa-card-header" style="cursor:default;">
+                            <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">
@@ -612,6 +696,32 @@ function edukarsa_settings_page_html() {
 
     <script>
     jQuery(document).ready(function($){
+        // 1. COLLAPSIBLE ACCORDION PANEL LOGIC
+        // Tutup seksi 2 sampai 7 secara default agar dasbor sangat ringkas
+        $('.edukarsa-admin-main .edukarsa-card').each(function(index){
+            if (index > 0) {
+                $(this).addClass('is-collapsed');
+            }
+        });
+
+        // Event klik toggle header
+        $('.edukarsa-admin-main .edukarsa-card-header').on('click', function(e){
+            if ($(e.target).closest('.edukarsa-switch, input, a, button').length) {
+                return;
+            }
+            var $card = $(this).closest('.edukarsa-card');
+            $card.toggleClass('is-collapsed');
+        });
+
+        $('#acc-expand-all').click(function(){
+            $('.edukarsa-admin-main .edukarsa-card').removeClass('is-collapsed');
+        });
+
+        $('#acc-collapse-all').click(function(){
+            $('.edukarsa-admin-main .edukarsa-card').addClass('is-collapsed');
+        });
+
+        // 2. TOGGLE ROW FORM INPUT
         function syncToggles() {
             $('.section-toggle').each(function(){
                 var target = $(this).data('target');
@@ -621,6 +731,7 @@ function edukarsa_settings_page_html() {
         $('.section-toggle').change(syncToggles);
         syncToggles();
 
+        // 3. COLOR PRESET PICKER
         $('.preset-pill').click(function(){
             var p = $(this).data('p'), s = $(this).data('s'), h = $(this).data('h');
             $('#primary_picker').val(p); $('#primary_code').text(p);
@@ -634,6 +745,7 @@ function edukarsa_settings_page_html() {
         $('#secondary_picker').on('input change', function(){ $('#secondary_code').text($(this).val()); });
         $('#heading_picker').on('input change', function(){ $('#heading_code').text($(this).val()); });
 
+        // 4. NATIVE MEDIA UPLOADER
         var mediaUploader;
         $('.btn-upload').click(function(e) {
             e.preventDefault();
diff --git a/page.php b/page.php
index a748631..5aa8229 100644
--- a/page.php
+++ b/page.php
@@ -1,34 +1,65 @@
 <?php
 /**
- * Template untuk halaman statis tunggal (Page)
+ * 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: 60px 0; min-height: 75vh; background-color: #f8fafc;">
-    <div class="container">
+<main id="primary" class="site-main" style="padding: 45px 0 70px; background-color: #f8fafc; min-height: 75vh;">
+    <div class="container single-layout-wrapper">
         
-        <?php while ( have_posts() ) : the_post(); ?>
-            <article id="post-<?php the_ID(); ?>" <?php post_class( 'card-style' ); ?> style="padding: 45px; max-width: 980px; margin: 0 auto;">
+        <!-- KOLOM KONTEN HALAMAN -->
+        <div class="single-content-column">
+            <?php while ( have_posts() ) : the_post(); ?>
                 
-                <header class="entry-header" style="margin-bottom: 30px; border-bottom: 1px solid #e2e8f0; padding-bottom: 20px;">
-                    <h1 class="entry-title" style="font-size: 32px; font-weight: 800; color: var(--heading-color);">
-                        <?php the_title(); ?>
-                    </h1>
-                </header>
+                <!-- Breadcrumbs -->
+                <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>
 
-                <?php if ( has_post_thumbnail() ) : ?>
-                    <div class="post-thumbnail" style="margin-bottom: 35px; border-radius: var(--radius); overflow: hidden;">
-                        <?php the_post_thumbnail( 'full', array( 'style' => 'width: 100%; height: auto; display: block;' ) ); ?>
+                <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;">
+                            <?php the_title(); ?>
+                        </h1>
+                    </header>
+
+                    <?php if ( has_post_thumbnail() ) : ?>
+                        <div class="single-featured-image">
+                            <?php the_post_thumbnail( 'full' ); ?>
+                            <?php if ( get_the_post_thumbnail_caption() ) : ?>
+                                <figcaption class="img-caption"><?php the_post_thumbnail_caption(); ?></figcaption>
+                            <?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>',
+                            'after'       => '</div>',
+                            'link_before' => '<span class="page-number-box">',
+                            'link_after'  => '</span>',
+                        ) );
+                        ?>
                     </div>
-                <?php endif; ?>
 
-                <div class="entry-content">
-                    <?php the_content(); ?>
-                </div>
+                </article>
 
-            </article>
-        <?php endwhile; ?>
+            <?php endwhile; ?>
+        </div>
+
+        <!-- KOLOM SIDEBAR DINAMIS -->
+        <div class="single-sidebar-column">
+            <?php get_sidebar(); ?>
+        </div>
 
     </div>
 </main>
diff --git a/sidebar.php b/sidebar.php
index f3c4754..a62b29c 100644
--- a/sidebar.php
+++ b/sidebar.php
@@ -32,7 +32,27 @@
     </div>
     <?php endif; ?>
 
-    <!-- 3. Berita Terkini Dinamis -->
+    <!-- 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' );
+        if ( ! empty( $html_content ) ) :
+            $html_title = get_option( 'edukarsa_sidebar_html_title' );
+    ?>
+    <div class="card-style sidebar-widget sidebar-custom-html-box">
+        <?php if ( ! empty( $html_title ) ) : ?>
+            <h3 class="sidebar-widget-title"><?php echo esc_html( $html_title ); ?></h3>
+        <?php endif; ?>
+        <div class="sidebar-html-rendered-content">
+            <?php echo do_shortcode( wp_specialchars_decode( $html_content ) ); ?>
+        </div>
+    </div>
+    <?php 
+        endif;
+    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>
@@ -72,7 +92,7 @@
     </div>
     <?php endif; ?>
 
-    <!-- 4. Daftar Kategori Pilihan -->
+    <!-- 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>
@@ -92,7 +112,7 @@
     </div>
     <?php endif; ?>
 
-    <!-- 5. Banner Poster Promosi / Pengumuman Khusus -->
+    <!-- 6. Banner Poster Sidebar -->
     <?php 
     $banner_img = get_option( 'edukarsa_sidebar_banner_img' );
     if ( ! empty( $banner_img ) ) :
diff --git a/style.css b/style.css
index 14f459e..05da548 100644
--- a/style.css
+++ b/style.css
@@ -711,3 +711,9 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
     .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; }