From ffda37329352f50cf76e8e2d04b779709db39679 Mon Sep 17 00:00:00 2001
From: Mas Budi Kusuma <admin@masbudi.my.id>
Date: Tue, 15 Sep 2026 21:13:09 +0700
Subject: [PATCH] feat(customizer): integrasi pengaturan font dinamis dan color
 scheme picker

---
 inc/admin-menu.php | 408 ++++++++++++++++++++++++++-------------------
 inc/setup.php      |  60 ++++++-
 2 files changed, 283 insertions(+), 185 deletions(-)

diff --git a/inc/admin-menu.php b/inc/admin-menu.php
index 4a6cd7d..05c2387 100644
--- a/inc/admin-menu.php
+++ b/inc/admin-menu.php
@@ -1,176 +1,232 @@
-<?php
-function edukarsa_admin_menu() {
-    add_menu_page( 'EduKarsa', 'EduKarsa', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html', 'dashicons-welcome-learn-more', 2 );
-    add_submenu_page( 'edukarsa_main_menu', 'Tentang Tema', 'Tentang Tema', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html' );
-    add_submenu_page( 'edukarsa_main_menu', 'Pengaturan Utama', 'Pengaturan Utama', 'manage_options', 'edukarsa_settings', 'edukarsa_settings_page_html' );
-    add_submenu_page( 'edukarsa_main_menu', 'Semua Slider', '🌟 Slider Banner', 'manage_options', 'edit.php?post_type=slider' );
-    add_submenu_page( 'edukarsa_main_menu', 'Semua Program', '📚 Program Kami', 'manage_options', 'edit.php?post_type=program' );
-    add_submenu_page( 'edukarsa_main_menu', 'Semua Keunggulan', '⭐ Keunggulan', 'manage_options', 'edit.php?post_type=keunggulan' );
-    add_submenu_page( 'edukarsa_main_menu', 'Semua Milestone', '🏆 Milestone', 'manage_options', 'edit.php?post_type=milestone' );
-}
-add_action( 'admin_menu', 'edukarsa_admin_menu' );
-
-function edukarsa_register_settings() {
-    $options = array(
-        // Toggle
-        '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',
-        
-        // Logo
-        'edukarsa_header_logo',
-        
-        // Custom Teks (Keunggulan & News)
-        'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_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',
-        
-        // Mid Section Parallax
-        'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
-        
-        // CTA & Footer
-        'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
-        'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_footer_copyright', 'edukarsa_custom_css'
-    );
-    foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
-}
-add_action( 'admin_init', 'edukarsa_register_settings' );
-
-function edukarsa_welcome_page_html() {
-    if ( ! current_user_can( 'manage_options' ) ) return;
-    echo '<div class="wrap" style="max-width:900px;"><h1>EduKarsa Dashboard</h1><p>Gunakan Pengaturan Utama untuk memodifikasi Halaman Depan.</p></div>';
-}
-
-function edukarsa_settings_page_html() {
-    if ( ! current_user_can( 'manage_options' ) ) return;
-    ?>
-    <style>
-        .edukarsa-panel { background:#fff; padding:20px 30px; border:1px solid #ccd0d4; border-radius:4px; margin-bottom: 20px; max-width: 950px; }
-        .edukarsa-panel h2 { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; color: #0b4a8e; }
-        .toggle-row { display: flex; align-items: center; gap: 10px; font-weight: bold; background: #f0f7ff; padding: 15px; border-left: 4px solid #0b4a8e; }
-        .hidden-row { display: none; } 
-    </style>
-
-    <div class="wrap">
-        <h1>Pengaturan EduKarsa Lengkap</h1>
-        <?php settings_errors(); ?>
-        <form action="options.php" method="post">
-            <?php settings_fields( 'edukarsa_settings_group' ); ?>
-            
-            <div class="edukarsa-panel">
-                <h2>1. Header, Logo & Slider</h2>
-                <table class="form-table">
-                    <tr><th>Logo Website</th><td><input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#edukarsa_header_logo" value="Upload Logo" /></td></tr>
-                </table>
-                <hr>
-                <div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?> /> <label>Tampilkan Slider Atas</label></div>
-                <div class="toggle-row" style="margin-top:10px;"><input type="checkbox" class="section-toggle" data-target=".row-stats" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?> /> <label>Tampilkan 3 Kotak Statistik</label></div>
-                <table class="form-table row-stats hidden-row">
-                    <?php for($i=1; $i<=3; $i++) : ?>
-                    <tr>
-                        <th>Statistik <?php echo $i; ?></th>
-                        <td>
-                            Ikon: <input type="text" id="stat<?php echo $i; ?>_icon" name="edukarsa_stat<?php echo $i; ?>_icon" value="<?php echo esc_url(get_option('edukarsa_stat'.$i.'_icon')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon" value="Upload" /><br>
-                            Angka: <input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" class="regular-text"><br>
-                            Judul: <input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" class="regular-text"><br>
-                            Subteks: <input type="text" name="edukarsa_stat<?php echo $i; ?>_desc" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_desc')); ?>" class="regular-text">
-                        </td>
-                    </tr>
-                    <?php endfor; ?>
-                </table>
-            </div>
-
-            <div class="edukarsa-panel">
-                <h2>2. Tentang Kami</h2>
-                <div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-about" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?> /> <label>Tampilkan Seksi About</label></div>
-                <table class="form-table row-about hidden-row">
-                    <tr><th>Foto</th><td><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><input type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek" value="Upload" /></td></tr>
-                    <tr><th>Nama</th><td><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>" class="large-text" /></td></tr>
-                    <tr><th>Sub-Judul</th><td><input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>" class="large-text" /></td></tr>
-                    <tr><th>Teks</th><td><textarea name="edukarsa_teks_sambutan" rows="4" class="large-text"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea></td></tr>
-                    <tr><th>Link</th><td><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></td></tr>
-                </table>
-            </div>
-
-            <div class="edukarsa-panel">
-                <h2>3. Program, Milestones, & Keunggulan</h2>
-                <div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?> /> <label>Tampilkan 4 Milestone</label></div>
-                <div class="toggle-row" style="margin-top:10px;"><input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?> /> <label>Tampilkan Program (3 Grid)</label></div>
-                <hr>
-                <div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?> /> <label>Tampilkan Keunggulan (9 Grid)</label></div>
-                <table class="form-table">
-                    <tr><th>Subtitle (Contoh: WHY CHOOSE US)</th><td><input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>" class="regular-text"></td></tr>
-                    <tr><th>Judul (Contoh: Keunggulan Program)</th><td><input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>" class="regular-text"></td></tr>
-                </table>
-            </div>
-
-            <div class="edukarsa-panel">
-                <h2>4. Video & Latar Parallax (Area Biru Tengah)</h2>
-                <table class="form-table">
-                    <tr><th>Gambar Parallax</th><td><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><input type="button" class="button btn-upload" data-target="#mid_bg_image" value="Upload" /></td></tr>
-                    <tr><th>Warna Overlay Parallax</th><td><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"></td></tr>
-                </table>
-                <hr>
-                <div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-video" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?> /> <label>Tampilkan Video</label></div>
-                <table class="form-table row-video hidden-row">
-                    <tr><th>Video 1</th><td>Thumb: <input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid1_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>"></td></tr>
-                    <tr><th>Video 2</th><td>Thumb: <input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid2_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>"></td></tr>
-                </table>
-            </div>
-
-            <div class="edukarsa-panel">
-                <h2>5. CTA, Berita, Footer & Sosial Media</h2>
-                <div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-cta" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?> /> <label>Tampilkan CTA PPDB</label></div>
-                <table class="form-table row-cta hidden-row">
-                    <tr><th>Gambar Bg</th><td><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><input type="button" class="button btn-upload" data-target="#cta_bg" value="Up" /></td></tr>
-                    <tr><th>Judul</th><td><input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>" class="large-text"></td></tr>
-                    <tr><th>Tombol</th><td>Teks: <input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks')); ?>"><br>URL: <input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>"></td></tr>
-                </table>
-                <hr>
-                <div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?> /> <label>Tampilkan Berita</label></div>
-                <table class="form-table">
-                    <tr><th>Judul Seksi Berita</th><td><input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>" class="regular-text"></td></tr>
-                </table>
-                
-                <h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Footer</h3>
-                <table class="form-table">
-                    <tr><th>Alamat</th><td><textarea name="edukarsa_footer_alamat" rows="2" class="large-text"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea></td></tr>
-                    <tr><th>Telepon</th><td><input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>"></td></tr>
-                    <tr><th>Email</th><td><input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>"></td></tr>
-                    <tr><th>Copyright</th><td><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>"></td></tr>
-                </table>
-                
-                <h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Sosial Media</h3>
-                <table class="form-table">
-                    <tr><th>Facebook</th><td><input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>"></td></tr>
-                    <tr><th>Instagram</th><td><input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>"></td></tr>
-                    <tr><th>YouTube</th><td><input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>"></td></tr>
-                </table>
-            </div>
-
-            <p class="submit"><?php submit_button( 'Simpan Pengaturan', 'primary', 'submit', false ); ?></p>
-        </form>
-    </div>
-
-    <script>
-    jQuery(document).ready(function($){
-        function handleToggles() { $('.section-toggle').each(function(){ var t = $(this).data('target'); if($(this).is(':checked')){ $(t).fadeIn(200); } else { $(t).hide(); } }); }
-        $('.section-toggle').change(handleToggles); handleToggles();
-        var mediaUploader;
-        $('.btn-upload').click(function(e) {
-            e.preventDefault(); var target = $(this).data('target');
-            if (mediaUploader) { mediaUploader.targetInput = target; mediaUploader.open(); return; }
-            mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Gambar', button: { text: 'Pilih' }, multiple: false });
-            mediaUploader.targetInput = target;
-            mediaUploader.on('select', function() { $(mediaUploader.targetInput).val(mediaUploader.state().get('selection').first().toJSON().url); });
-            mediaUploader.open();
-        });
-    });
-    </script>
-    <?php
-}
\ No newline at end of file
+<?php
+function edukarsa_admin_menu() {
+    add_menu_page( 'EduKarsa', 'EduKarsa', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html', 'dashicons-welcome-learn-more', 2 );
+    add_submenu_page( 'edukarsa_main_menu', 'Tentang Tema', 'Tentang Tema', 'manage_options', 'edukarsa_main_menu', 'edukarsa_welcome_page_html' );
+    add_submenu_page( 'edukarsa_main_menu', 'Pengaturan Utama', 'Pengaturan Utama', 'manage_options', 'edukarsa_settings', 'edukarsa_settings_page_html' );
+    add_submenu_page( 'edukarsa_main_menu', 'Semua Slider', '🌟 Slider Banner', 'manage_options', 'edit.php?post_type=slider' );
+    add_submenu_page( 'edukarsa_main_menu', 'Semua Program', '📚 Program Kami', 'manage_options', 'edit.php?post_type=program' );
+    add_submenu_page( 'edukarsa_main_menu', 'Semua Keunggulan', '⭐ Keunggulan', 'manage_options', 'edit.php?post_type=keunggulan' );
+    add_submenu_page( 'edukarsa_main_menu', 'Semua Milestone', '🏆 Milestone', 'manage_options', 'edit.php?post_type=milestone' );
+}
+add_action( 'admin_menu', 'edukarsa_admin_menu' );
+
+function edukarsa_register_settings() {
+    $options = array(
+        // Dynamic Appearance
+        'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
+
+        // Toggle
+        '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',
+        
+        // Logo
+        'edukarsa_header_logo',
+        
+        // Custom Teks (Keunggulan & News)
+        'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_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',
+        
+        // Mid Section Parallax
+        'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
+        
+        // CTA & Footer
+        'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
+        'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_footer_copyright', 'edukarsa_custom_css'
+    );
+    foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
+}
+add_action( 'admin_init', 'edukarsa_register_settings' );
+
+function edukarsa_welcome_page_html() {
+    if ( ! current_user_can( 'manage_options' ) ) return;
+    echo '<div class="wrap" style="max-width:900px;"><h1>EduKarsa Dashboard</h1><p>Gunakan Pengaturan Utama untuk memodifikasi Halaman Depan, Desain Warna, dan Tipografi.</p></div>';
+}
+
+function edukarsa_settings_page_html() {
+    if ( ! current_user_can( 'manage_options' ) ) return;
+    $font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
+    ?>
+    <style>
+        .edukarsa-panel { background:#fff; padding:20px 30px; border:1px solid #ccd0d4; border-radius:8px; margin-bottom: 20px; max-width: 950px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
+        .edukarsa-panel h2 { border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; margin-top: 0; color: #0b4a8e; font-size: 18px; }
+        .toggle-row { display: flex; align-items: center; gap: 10px; font-weight: bold; background: #f0f7ff; padding: 15px; border-left: 4px solid #0b4a8e; border-radius: 4px; }
+        .hidden-row { display: none; }
+        .color-field-wrap { display: flex; align-items: center; gap: 12px; }
+        .color-field-wrap input[type="color"] { border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; background: transparent; }
+    </style>
+
+    <div class="wrap">
+        <h1>Pengaturan Tema EduKarsa</h1>
+        <?php settings_errors(); ?>
+        <form action="options.php" method="post">
+            <?php settings_fields( 'edukarsa_settings_group' ); ?>
+            
+            <!-- PANEL BARU: TIPOGRAFI & SKEMA WARNA -->
+            <div class="edukarsa-panel">
+                <h2>🎨 Tipografi & Skema Warna Global</h2>
+                <table class="form-table">
+                    <tr>
+                        <th>Pilihan Font Tema</th>
+                        <td>
+                            <select name="edukarsa_font_choice" id="edukarsa_font_choice" style="min-width: 240px; padding: 5px;">
+                                <option value="plus_jakarta_sans" <?php selected( 'plus_jakarta_sans', $font_current ); ?>>Plus Jakarta Sans (Default Rekomendasi)</option>
+                                <option value="inter" <?php selected( 'inter', $font_current ); ?>>Inter (Modern & Netral)</option>
+                                <option value="poppins" <?php selected( 'poppins', $font_current ); ?>>Poppins (Geometris & Tegas)</option>
+                                <option value="roboto" <?php selected( 'roboto', $font_current ); ?>>Roboto (Klasik & Ringkas)</option>
+                                <option value="system" <?php selected( 'system', $font_current ); ?>>System Native (Super Cepat, Tanpa Font Luar)</option>
+                            </select>
+                            <p class="description">Font utama yang diterapkan ke seluruh halaman publikasi.</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>Warna Primer (Primary)</th>
+                        <td>
+                            <div class="color-field-wrap">
+                                <input type="color" name="edukarsa_primary_color" value="<?php echo esc_attr( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?>">
+                                <code><?php echo esc_html( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?></code>
+                            </div>
+                            <p class="description">Warna identitas kampus (header bar, tombol primer, latar footer, dan border utama).</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>Warna Sekunder / Aksen</th>
+                        <td>
+                            <div class="color-field-wrap">
+                                <input type="color" name="edukarsa_secondary_color" value="<?php echo esc_attr( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?>">
+                                <code><?php echo esc_html( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?></code>
+                            </div>
+                            <p class="description">Warna sorotan interaktif (hover tombol, kartu statistik, dan aksen badge).</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>Warna Teks Judul (Heading)</th>
+                        <td>
+                            <div class="color-field-wrap">
+                                <input type="color" name="edukarsa_heading_color" value="<?php echo esc_attr( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?>">
+                                <code><?php echo esc_html( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?></code>
+                            </div>
+                            <p class="description">Warna teks untuk seluruh judul seksi, judul berita, dan header halaman.</p>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <div class="edukarsa-panel">
+                <h2>1. Header, Logo & Slider</h2>
+                <table class="form-table">
+                    <tr><th>Logo Website</th><td><input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#edukarsa_header_logo" value="Upload Logo" /></td></tr>
+                </table>
+                <hr>
+                <div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?> /> <label>Tampilkan Slider Atas</label></div>
+                <div class="toggle-row" style="margin-top:10px;"><input type="checkbox" class="section-toggle" data-target=".row-stats" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?> /> <label>Tampilkan 3 Kotak Statistik</label></div>
+                <table class="form-table row-stats hidden-row">
+                    <?php for($i=1; $i<=3; $i++) : ?>
+                    <tr>
+                        <th>Statistik <?php echo $i; ?></th>
+                        <td>
+                            Ikon: <input type="text" id="stat<?php echo $i; ?>_icon" name="edukarsa_stat<?php echo $i; ?>_icon" value="<?php echo esc_url(get_option('edukarsa_stat'.$i.'_icon')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon" value="Upload" /><br>
+                            Angka: <input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" class="regular-text"><br>
+                            Judul: <input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" class="regular-text"><br>
+                            Subteks: <input type="text" name="edukarsa_stat<?php echo $i; ?>_desc" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_desc')); ?>" class="regular-text">
+                        </td>
+                    </tr>
+                    <?php endfor; ?>
+                </table>
+            </div>
+
+            <div class="edukarsa-panel">
+                <h2>2. Tentang Kami</h2>
+                <div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-about" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?> /> <label>Tampilkan Seksi About</label></div>
+                <table class="form-table row-about hidden-row">
+                    <tr><th>Foto</th><td><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><input type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek" value="Upload" /></td></tr>
+                    <tr><th>Nama</th><td><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>" class="large-text" /></td></tr>
+                    <tr><th>Sub-Judul</th><td><input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>" class="large-text" /></td></tr>
+                    <tr><th>Teks</th><td><textarea name="edukarsa_teks_sambutan" rows="4" class="large-text"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea></td></tr>
+                    <tr><th>Link</th><td><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></td></tr>
+                </table>
+            </div>
+
+            <div class="edukarsa-panel">
+                <h2>3. Program, Milestones, & Keunggulan</h2>
+                <div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?> /> <label>Tampilkan 4 Milestone</label></div>
+                <div class="toggle-row" style="margin-top:10px;"><input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?> /> <label>Tampilkan Program (3 Grid)</label></div>
+                <hr>
+                <div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?> /> <label>Tampilkan Keunggulan (9 Grid)</label></div>
+                <table class="form-table">
+                    <tr><th>Subtitle (Contoh: WHY CHOOSE US)</th><td><input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>" class="regular-text"></td></tr>
+                    <tr><th>Judul (Contoh: Keunggulan Program)</th><td><input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>" class="regular-text"></td></tr>
+                </table>
+            </div>
+
+            <div class="edukarsa-panel">
+                <h2>4. Video & Latar Parallax (Area Biru Tengah)</h2>
+                <table class="form-table">
+                    <tr><th>Gambar Parallax</th><td><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><input type="button" class="button btn-upload" data-target="#mid_bg_image" value="Upload" /></td></tr>
+                    <tr><th>Warna Overlay Parallax</th><td><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"></td></tr>
+                </table>
+                <hr>
+                <div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-video" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?> /> <label>Tampilkan Video</label></div>
+                <table class="form-table row-video hidden-row">
+                    <tr><th>Video 1</th><td>Thumb: <input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid1_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>"></td></tr>
+                    <tr><th>Video 2</th><td>Thumb: <input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid2_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>"></td></tr>
+                </table>
+            </div>
+
+            <div class="edukarsa-panel">
+                <h2>5. CTA, Berita, Footer & Sosial Media</h2>
+                <div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-cta" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?> /> <label>Tampilkan CTA PPDB</label></div>
+                <table class="form-table row-cta hidden-row">
+                    <tr><th>Gambar Bg</th><td><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><input type="button" class="button btn-upload" data-target="#cta_bg" value="Up" /></td></tr>
+                    <tr><th>Judul</th><td><input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>" class="large-text"></td></tr>
+                    <tr><th>Tombol</th><td>Teks: <input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks')); ?>"><br>URL: <input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>"></td></tr>
+                </table>
+                <hr>
+                <div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?> /> <label>Tampilkan Berita</label></div>
+                <table class="form-table">
+                    <tr><th>Judul Seksi Berita</th><td><input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>" class="regular-text"></td></tr>
+                </table>
+                
+                <h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Footer</h3>
+                <table class="form-table">
+                    <tr><th>Alamat</th><td><textarea name="edukarsa_footer_alamat" rows="2" class="large-text"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea></td></tr>
+                    <tr><th>Telepon</th><td><input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>"></td></tr>
+                    <tr><th>Email</th><td><input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>"></td></tr>
+                    <tr><th>Copyright</th><td><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>"></td></tr>
+                </table>
+                
+                <h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Sosial Media</h3>
+                <table class="form-table">
+                    <tr><th>Facebook</th><td><input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>"></td></tr>
+                    <tr><th>Instagram</th><td><input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>"></td></tr>
+                    <tr><th>YouTube</th><td><input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>> Aktifkan &nbsp;|&nbsp; URL: <input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>"></td></tr>
+                </table>
+            </div>
+
+            <p class="submit"><?php submit_button( 'Simpan Pengaturan', 'primary', 'submit', false ); ?></p>
+        </form>
+    </div>
+
+    <script>
+    jQuery(document).ready(function($){
+        function handleToggles() { $('.section-toggle').each(function(){ var t = $(this).data('target'); if($(this).is(':checked')){ $(t).fadeIn(200); } else { $(t).hide(); } }); }
+        $('.section-toggle').change(handleToggles); handleToggles();
+        var mediaUploader;
+        $('.btn-upload').click(function(e) {
+            e.preventDefault(); var target = $(this).data('target');
+            if (mediaUploader) { mediaUploader.targetInput = target; mediaUploader.open(); return; }
+            mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Gambar', button: { text: 'Pilih' }, multiple: false });
+            mediaUploader.targetInput = target;
+            mediaUploader.on('select', function() { $(mediaUploader.targetInput).val(mediaUploader.state().get('selection').first().toJSON().url); });
+            mediaUploader.open();
+        });
+    });
+    </script>
+    <?php
+}
diff --git a/inc/setup.php b/inc/setup.php
index bd6f2ac..c2ae55a 100644
--- a/inc/setup.php
+++ b/inc/setup.php
@@ -20,22 +20,64 @@ add_action( 'after_setup_theme', 'edukarsa_setup' );
 
 // 2. MENGHUBUNGKAN ASET (CSS & JS FRONTEND)
 function edukarsa_scripts() {
-    // Memuat Google Font: Plus Jakarta Sans (Native Webfont)
-    wp_enqueue_style( 
-        'edukarsa-google-fonts', 
-        'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap', 
-        array(), 
-        null 
-    );
+    $font_choice = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
+    $font_url = '';
+    $font_family = "'Plus Jakarta Sans', system-ui, sans-serif";
 
-    // CSS Utama Tema dengan Cache Busting time()
+    switch ( $font_choice ) {
+        case 'inter':
+            $font_url = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap';
+            $font_family = "'Inter', system-ui, sans-serif";
+            break;
+        case 'poppins':
+            $font_url = 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap';
+            $font_family = "'Poppins', system-ui, sans-serif";
+            break;
+        case 'roboto':
+            $font_url = 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap';
+            $font_family = "'Roboto', system-ui, sans-serif";
+            break;
+        case 'system':
+            $font_url = '';
+            $font_family = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+            break;
+        case 'plus_jakarta_sans':
+        default:
+            $font_url = 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap';
+            $font_family = "'Plus Jakarta Sans', system-ui, sans-serif";
+            break;
+    }
+
+    $deps = array();
+    if ( ! empty( $font_url ) ) {
+        wp_enqueue_style( 'edukarsa-dynamic-font', $font_url, array(), null );
+        $deps[] = 'edukarsa-dynamic-font';
+    }
+
+    // Load file style.css utama
     wp_enqueue_style( 
         'edukarsa-style', 
         get_template_directory_uri() . '/style.css', 
-        array('edukarsa-google-fonts'), 
+        $deps, 
         time(), 
         'all' 
     );
+
+    // Ambil opsi skema warna dari database
+    $primary_color   = sanitize_hex_color( get_option( 'edukarsa_primary_color', '#0b4a8e' ) );
+    $secondary_color = sanitize_hex_color( get_option( 'edukarsa_secondary_color', '#1a73e8' ) );
+    $heading_color   = sanitize_hex_color( get_option( 'edukarsa_heading_color', '#0f172a' ) );
+
+    // Injeksi CSS variables dinamis langsung ke selector :root
+    $custom_css = "
+        :root {
+            --primary-color: {$primary_color};
+            --secondary-color: {$secondary_color};
+            --heading-color: {$heading_color};
+            --font-main: {$font_family};
+        }
+    ";
+    wp_add_inline_style( 'edukarsa-style', $custom_css );
 }
 add_action( 'wp_enqueue_scripts', 'edukarsa_scripts' );