masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: inisialisasi repo tema edukarsa

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 20:50:26 +07:00
commit 4a304e5e0a
10 changed files with 927 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+5
View File
@@ -0,0 +1,5 @@
.DS_Store
Thumbs.db
*.log
.vscode/
.idea/
footer.php
+65
View File
@@ -0,0 +1,65 @@
<!-- SEKSI LOGO MITRA / AKREDITASI -->
<div class="partner-logos text-center" style="padding: 40px 0; background: #fff;">
<div class="container" style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;">
<img src="<?php echo get_template_directory_uri(); ?>/assets/logo-kemdikbud.png" alt="Kemdikbud" style="height: 60px; filter: grayscale(100%);" onerror="this.style.display='none'">
</div>
</div>
<!-- MAIN FOOTER -->
<footer style="background-color: var(--primary-color); color: #ffffff; padding: 60px 0 30px;">
<div class="container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px;">
<!-- Kolom 1: Kontak -->
<div class="footer-col">
<h3 style="color: #fff; margin-bottom: 20px;">Hubungi Kami</h3>
<p style="font-size: 15px; opacity: 0.9; line-height: 1.8;">
📍 <?php echo nl2br(esc_html(get_option('edukarsa_footer_alamat', 'Alamat belum diisi'))); ?><br>
📞 <?php echo esc_html(get_option('edukarsa_footer_telp', '000-0000')); ?><br>
✉️ <?php echo esc_html(get_option('edukarsa_footer_email', '[email protected]')); ?>
</p>
</div>
<!-- Kolom 2: Tautan -->
<div class="footer-col">
<h3 style="color: #fff; margin-bottom: 20px;">Tautan Penting</h3>
<nav class="footer-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-footer',
'fallback_cb' => false,
'container' => false,
'menu_class' => 'footer-links-custom'
) );
?>
</nav>
</div>
<!-- Kolom 3: Sosial Media -->
<div class="footer-col">
<h3 style="color: #fff; margin-bottom: 20px;">Ikuti Kami</h3>
<div class="social-icons" style="display: flex; gap: 20px;">
<!-- Pengecekan Toggle Tampil dari Dashboard -->
<?php if( get_option('edukarsa_tampil_fb', 1) == 1 ) : ?>
<a href="<?php echo esc_url(get_option('edukarsa_footer_fb', '#')); ?>" target="_blank" style="color: #fff; font-size: 20px; font-weight:bold;">FB</a>
<?php endif; ?>
<?php if( get_option('edukarsa_tampil_ig', 1) == 1 ) : ?>
<a href="<?php echo esc_url(get_option('edukarsa_footer_ig', '#')); ?>" target="_blank" style="color: #fff; font-size: 20px; font-weight:bold;">IG</a>
<?php endif; ?>
<?php if( get_option('edukarsa_tampil_yt', 1) == 1 ) : ?>
<a href="<?php echo esc_url(get_option('edukarsa_footer_yt', '#')); ?>" target="_blank" style="color: #fff; font-size: 20px; font-weight:bold;">YT</a>
<?php endif; ?>
</div>
</div>
</div>
<div class="footer-bottom" style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center;">
<p style="margin: 0; font-size: 14px; opacity: 0.7;">
&copy; <?php echo date( 'Y' ); ?> <?php echo esc_html(get_option('edukarsa_footer_copyright', 'Semua Hak Dilindungi')); ?>.
</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
front-page.php
+271
View File
@@ -0,0 +1,271 @@
<?php get_header(); ?>
<main id="primary" class="site-main edukarsa-home">
<!-- 1. SLIDER -->
<?php if ( get_option('edukarsa_tampil_slider', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-hero-slider" style="padding: 0;">
<div class="slider-container" id="hero-slider-container">
<?php
$query_slider = new WP_Query( array( 'post_type' => 'slider', 'posts_per_page' => -1 ) );
if ( $query_slider->have_posts() ) :
echo '<div class="slider-wrapper" id="hero-slider-wrapper">';
while ( $query_slider->have_posts() ) : $query_slider->the_post();
$link = get_post_meta( get_the_ID(), '_slider_link', true );
?>
<div class="slide-item img-wrapper-slider">
<?php if(!empty($link)) echo '<a href="'.esc_url($link).'">'; ?>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'full' ); ?>
<?php else: ?>
<div class="img-placeholder"><i>🖼️</i><span>Upload Gambar Slider untuk "<?php the_title(); ?>"</span></div>
<?php endif; ?>
<?php if(!empty($link)) echo '</a>'; ?>
</div>
<?php
endwhile;
echo '</div>';
wp_reset_postdata();
endif;
?>
</div>
</section>
<?php endif; ?>
<!-- 2. STATISTIK DESAIN KARTU -->
<?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-stats">
<div class="container stats-grid">
<?php for($i=1; $i<=3; $i++) : ?>
<div class="stat-item card-style stat-card-modern">
<div class="stat-icon-wrapper">
<?php $icon = get_option('edukarsa_stat'.$i.'_icon'); ?>
<?php if($icon) : ?>
<img src="<?php echo esc_url($icon); ?>" alt="Icon">
<?php else: ?>
<span>🏫</span>
<?php endif; ?>
</div>
<h3 class="stat-number"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_angka', '00') ); ?></h3>
<h4 class="stat-title"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_label', 'Judul Statistik') ); ?></h4>
<p class="stat-desc"><?php echo nl2br(esc_html( get_option('edukarsa_stat'.$i.'_desc', 'Deskripsi singkat') )); ?></p>
</div>
<?php endfor; ?>
</div>
</section>
<?php endif; ?>
<!-- 3. ABOUT US -->
<?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-sambutan pt-0">
<div class="container sambutan-grid">
<div class="sambutan-image-wrapper">
<div class="img-wrapper-portrait">
<?php $foto = get_option('edukarsa_foto_kepsek'); ?>
<?php if(!empty($foto)) : ?>
<img src="<?php echo esc_url($foto); ?>" alt="Kepala Sekolah">
<?php else : ?>
<div class="img-placeholder"><i>👤</i><span>Upload Foto Kepala Sekolah</span></div>
<?php endif; ?>
</div>
</div>
<div class="sambutan-content">
<span class="badge-title">ABOUT US</span>
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_nama_kepsek') ); ?></h2>
<h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:15px; font-size:18px;"><?php echo esc_html( get_option('edukarsa_subtitle_about') ); ?></h4>
<div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
<a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary">Ketahui Lebih Lanjut</a>
</div>
</div>
</section>
<?php endif; ?>
<!-- 4. MILESTONES -->
<?php if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-milestones bg-light-blue">
<div class="container milestone-grid text-center">
<?php
$query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
if ( $query_milestone->have_posts() ) :
while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
echo '<div class="milestone-item card-style"><h3 class="milestone-title" style="color:var(--primary-color); font-size:28px; margin-bottom:5px;">' . get_the_title() . '</h3><div class="milestone-desc">' . get_the_excerpt() . '</div></div>';
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</section>
<?php endif; ?>
<!-- 5. PROGRAM -->
<?php if ( get_option('edukarsa_tampil_program', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-programs">
<div class="container">
<div class="section-header text-center"><h2 class="section-title">Our Program</h2><hr class="title-underline"></div>
<div class="program-grid">
<?php
$query_program = new WP_Query( array( 'post_type' => 'program', 'posts_per_page' => 3 ) );
if ( $query_program->have_posts() ) :
while ( $query_program->have_posts() ) : $query_program->the_post();
?>
<div class="program-card card-style text-center top-border-blue">
<div class="img-wrapper-landscape" style="margin-bottom: 20px;">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'medium' ); ?>
<?php else: ?>
<div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
<?php endif; ?>
</div>
<h3 style="margin-bottom:15px; color:var(--heading-color);"><?php the_title(); ?></h3>
<div class="program-desc" style="margin-bottom:20px; font-size:14px; color:#666;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
<a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
</section>
<?php endif; ?>
<!-- WRAPPER PARALLAX -->
<?php
$mid_bg = get_option('edukarsa_mid_bg_image');
$mid_color = get_option('edukarsa_mid_bg_color', '#0b4a8e');
$parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background-color: '.esc_attr($mid_color).';';
?>
<div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
<div class="parallax-overlay" style="background-color: <?php echo esc_attr($mid_color); ?>; opacity: <?php echo $mid_bg ? '0.9' : '1'; ?>;"></div>
<div class="parallax-content relative-z2">
<!-- 6. VIDEO -->
<?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-videos">
<div class="container video-grid">
<?php for($i=1; $i<=2; $i++) : ?>
<div class="video-item">
<?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
<a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
<div class="img-wrapper-video">
<?php if($vid_thumb) : ?>
<img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
<?php else: ?>
<div class="img-placeholder" style="background:#1e293b; color:#cbd5e1; border:none;"><i>▶️</i><span>Upload Thumbnail Video <?php echo $i; ?></span></div>
<?php endif; ?>
</div>
<?php if($vid_thumb) echo '<div class="play-btn">▶</div>'; ?>
</a>
</div>
<?php endfor; ?>
</div>
</section>
<?php endif; ?>
<!-- 7. KEUNGGULAN DINAMIS -->
<?php if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 0; padding-bottom: 100px;">
<div class="container">
<div class="section-header text-center">
<span class="badge-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US') ); ?></span>
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_title', 'Keunggulan Program') ); ?></h2>
</div>
<div class="keunggulan-grid">
<?php
$query_keunggulan = new WP_Query( array( 'post_type' => 'keunggulan', 'posts_per_page' => 9 ) );
if ( $query_keunggulan->have_posts() ) :
$nomor = 1;
while ( $query_keunggulan->have_posts() ) : $query_keunggulan->the_post();
?>
<div class="keunggulan-card card-style">
<div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
<div class="keunggulan-content-inner">
<h4><?php the_title(); ?></h4>
<div style="font-size: 14px; color: #666;">
<?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
</div>
</div>
</div>
<?php
$nomor++;
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
</section>
<?php endif; ?>
</div>
</div>
<!-- 8. CTA SECTION (SEKARANG SUDAH KEMBALI) -->
<?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
<?php $cta_bg = get_option('edukarsa_cta_bg'); ?>
<section class="edukarsa-section edukarsa-cta-bg" <?php if($cta_bg) echo 'style="background-image: url('.esc_url($cta_bg).');"'; ?>>
<div class="container text-center text-white relative-z2">
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light" style="margin-top: 20px;">
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?>
</a>
</div>
</section>
<?php endif; ?>
<!-- 9. LATEST NEWS DINAMIS -->
<?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-latest-news">
<div class="container">
<div class="section-header text-center">
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
</div>
<div class="news-grid">
<?php
$query_news = new WP_Query( array('post_type' => 'post', 'posts_per_page' => 6) );
if ( $query_news->have_posts() ) :
while ( $query_news->have_posts() ) : $query_news->the_post();
?>
<article class="news-card card-style">
<div class="img-wrapper-landscape" style="border-radius: 12px 12px 0 0;">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium' ); ?></a>
<?php else: ?>
<div class="img-placeholder"><i>📰</i><span>Gambar Berita</span></div>
<?php endif; ?>
</div>
<div class="news-content">
<h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
<div class="news-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
<a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
</div>
</article>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
</section>
<?php endif; ?>
</main>
<script>
document.addEventListener("DOMContentLoaded", function() {
const slider = document.getElementById('hero-slider-wrapper');
if (slider && slider.children.length > 1) {
setInterval(function() {
if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 10) {
slider.scrollTo({ left: 0, behavior: 'smooth' });
} else {
slider.scrollBy({ left: slider.clientWidth, behavior: 'smooth' });
}
}, 4000);
}
});
</script>
<?php get_footer(); ?>
functions.php
+15
View File
@@ -0,0 +1,15 @@
<?php
/**
* File ini sekarang hanya berfungsi sebagai 'Router/Loader'.
* Semua fungsi inti dipecah ke dalam folder 'inc' agar rapi.
*/
// 1. Memuat Pengaturan Dasar Tema & Aset
require_once get_template_directory() . '/inc/setup.php';
// 2. Memuat Custom Post Type (Slider, dll)
require_once get_template_directory() . '/inc/cpt-slider.php';
// 3. Memuat Panel Menu EduKarsa & Pengaturan
require_once get_template_directory() . '/inc/admin-menu.php';
header.php
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header bg-dark-blue">
<div class="container header-container">
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="logo-link">
<?php
$header_logo = get_option('edukarsa_header_logo');
if ( !empty($header_logo) ) :
?>
<img src="<?php echo esc_url($header_logo); ?>" alt="<?php bloginfo( 'name' ); ?>" style="max-height: 55px; object-fit: contain;">
<?php else : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
</a>
</div>
<nav class="main-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-utama',
'menu_id' => 'primary-menu',
'fallback_cb' => false,
'container' => false,
'menu_class' => 'nav-menu-custom'
) );
?>
</nav>
</div>
</header>
inc/admin-menu.php
+176
View File
@@ -0,0 +1,176 @@
<?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
}
inc/cpt-slider.php
+45
View File
@@ -0,0 +1,45 @@
<?php
/**
* File ini menangani pembuatan Custom Post Type (CPT)
* 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'),
'supports' => array('title', 'thumbnail'), 'public' => false, 'show_ui' => true, 'show_in_menu' => false
));
register_post_type( 'program', array(
'labels' => array('name' => 'Semua Program', 'singular_name' => 'Program', 'add_new_item' => 'Tambah Program'),
'supports' => array('title', 'editor', 'thumbnail', 'excerpt'), 'public' => true, 'show_ui' => true, 'show_in_menu' => false
));
register_post_type( 'milestone', array(
'labels' => array('name' => 'Semua Milestone', 'singular_name' => 'Milestone', 'add_new_item' => 'Tambah Milestone'),
'supports' => array('title', 'excerpt'), 'public' => false, 'show_ui' => true, 'show_in_menu' => false
));
register_post_type( 'keunggulan', array(
'labels' => array('name' => 'Semua Keunggulan', 'singular_name' => 'Keunggulan', 'add_new_item' => 'Tambah Keunggulan'),
'supports' => array('title', 'editor'), 'public' => false, 'show_ui' => true, 'show_in_menu' => false
));
}
add_action( 'init', 'edukarsa_register_all_cpt', 0 );
// --- METABOX UNTUK LINK SLIDER ---
function edukarsa_slider_meta_box() {
add_meta_box( 'slider_link_meta', 'Tautan (URL) Slider', 'edukarsa_slider_meta_callback', 'slider', 'normal', 'high' );
}
add_action( 'add_meta_boxes', 'edukarsa_slider_meta_box' );
function edukarsa_slider_meta_callback( $post ) {
wp_nonce_field( 'edukarsa_slider_save', 'edukarsa_slider_meta_nonce' );
$value = get_post_meta( $post->ID, '_slider_link', true );
echo '<p>Masukkan URL tujuan jika pengunjung mengklik gambar slider ini (opsional).</p>';
echo '<input type="url" id="slider_link" name="slider_link" value="' . esc_attr( $value ) . '" style="width:100%; padding:8px;" placeholder="https://..." />';
}
function edukarsa_slider_save_meta( $post_id ) {
if ( ! isset( $_POST['edukarsa_slider_meta_nonce'] ) || ! wp_verify_nonce( $_POST['edukarsa_slider_meta_nonce'], 'edukarsa_slider_save' ) ) return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( isset( $_POST['slider_link'] ) ) { update_post_meta( $post_id, '_slider_link', sanitize_text_field( $_POST['slider_link'] ) ); }
}
add_action( 'save_post', 'edukarsa_slider_save_meta' );
inc/setup.php
+41
View File
@@ -0,0 +1,41 @@
<?php
/**
* File ini menangani dukungan tema (Theme Support) dan antrean aset (CSS/JS).
*/
// 1. PENGATURAN DASAR
function edukarsa_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
// Pastikan tema mendukung excerpt (kutipan) untuk CPT yang baru dibuat
add_post_type_support( 'page', 'excerpt' );
register_nav_menus( array(
'menu-utama' => __( 'Menu Utama', 'edukarsa' ),
'menu-footer' => __( 'Menu Footer', 'edukarsa' ),
) );
}
add_action( 'after_setup_theme', 'edukarsa_setup' );
// 2. MENGHUBUNGKAN ASET (CSS & JS FRONTEND)
function edukarsa_scripts() {
// Memaksa path absolut langsung ke folder tema
wp_enqueue_style(
'edukarsa-style',
get_template_directory_uri() . '/style.css',
array(),
time(),
'all'
);
}
add_action( 'wp_enqueue_scripts', 'edukarsa_scripts' );
// 3. MEMUAT JAVASCRIPT UNTUK MEDIA UPLOADER (DASHBOARD)
function edukarsa_admin_scripts( $hook ) {
// Memastikan skrip uploader dipanggil di halaman pengaturan Edukarsa[cite: 9]
if ( strpos( $hook, 'edukarsa' ) !== false ) {
wp_enqueue_media();
}
}
add_action( 'admin_enqueue_scripts', 'edukarsa_admin_scripts' );
index.php
+103
View File
@@ -0,0 +1,103 @@
<?php
/**
* File template utama (Fallback untuk semua halaman)
* Digunakan untuk menampilkan daftar berita/artikel terbaru jika halaman khusus tidak ditemukan.
*/
get_header();
?>
<main id="primary" class="site-main" style="padding: 40px 5%; font-family: sans-serif; color: #333; max-width: 1200px; margin: 0 auto; min-height: 60vh;">
<header class="page-header" style="margin-bottom: 40px; text-align: center;">
<h1 class="page-title" style="color: #2c3e50; border-bottom: 3px solid #3498db; display: inline-block; padding-bottom: 10px; margin: 0;">
<?php
if ( is_home() && ! is_front_page() ) {
single_post_title();
} elseif ( is_archive() ) {
the_archive_title();
} elseif ( is_search() ) {
echo 'Hasil Pencarian: ' . get_search_query();
} else {
echo 'Berita & Pengumuman';
}
?>
</h1>
</header>
<div class="post-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px;">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> style="background: #ffffff; border-radius: 8px; border: 1px solid #e1e8ed; overflow: hidden; transition: box-shadow 0.3s; display: flex; flex-direction: column;">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'medium_large', array( 'style' => 'width: 100%; height: 200px; object-fit: cover; display: block;' ) ); ?>
</a>
<?php else: ?>
<!-- Placeholder jika artikel tidak memiliki gambar unggulan -->
<div style="width: 100%; height: 200px; background: #ecf0f1; display: flex; align-items: center; justify-content: center; color: #95a5a6;">
<span>Gambar Tidak Tersedia</span>
</div>
<?php endif; ?>
<div class="entry-content" style="padding: 20px; flex-grow: 1; display: flex; flex-direction: column;">
<header class="entry-header">
<h2 class="entry-title" style="margin: 0 0 10px; font-size: 20px; line-height: 1.4;">
<a href="<?php the_permalink(); ?>" style="text-decoration: none; color: #2c3e50; font-weight: bold;"><?php the_title(); ?></a>
</h2>
<div class="entry-meta" style="font-size: 13px; color: #7f8c8d; margin-bottom: 15px;">
<span>📅 <?php echo get_the_date(); ?></span> |
<span>👤 <?php the_author(); ?></span>
</div>
</header>
<div class="entry-summary" style="color: #555; line-height: 1.6; font-size: 14px; margin-bottom: 20px; flex-grow: 1;">
<?php
// Menampilkan kutipan (excerpt) artikel
the_excerpt();
?>
</div>
<div style="margin-top: auto;">
<a href="<?php the_permalink(); ?>" style="display: inline-block; padding: 8px 15px; background: #2c3e50; color: #fff; text-decoration: none; border-radius: 4px; font-size: 14px; transition: background 0.3s;">
Baca Selengkapnya &raquo;
</a>
</div>
</div>
</article>
<?php
endwhile;
?>
</div> <!-- Akhir dari post-list grid -->
<div class="pagination" style="margin-top: 50px; text-align: center;">
<?php
// Menampilkan tombol Halaman Selanjutnya / Sebelumnya
the_posts_pagination( array(
'prev_text' => __( '« Sebelumnya', 'edukarsa' ),
'next_text' => __( 'Selanjutnya »', 'edukarsa' ),
'before_page_number' => '<span style="padding: 5px 10px; background: #eee; margin: 0 2px; border-radius: 3px;">',
'after_page_number' => '</span>',
) );
?>
</div>
<?php else : ?>
<!-- Jika tidak ada postingan sama sekali -->
</div> <!-- Tutup div post-list agar layout tidak berantakan -->
<div style="text-align: center; width: 100%; padding: 50px 20px; background: #fdfdfe; border: 1px dashed #bdc3c7; border-radius: 8px;">
<h2 style="color: #e74c3c; margin-top: 0;">Belum Ada Berita</h2>
<p style="color: #7f8c8d; font-size: 16px;">Maaf, saat ini belum ada artikel, berita, atau pengumuman yang dipublikasikan.</p>
</div>
<?php endif; ?>
</main>
<?php
get_footer();
?>
style.css
+169
View File
@@ -0,0 +1,169 @@
/*
Theme Name: EduKarsa
Theme URI: https://edukarsa.masbudi.my.id
Author: masbudikusuma
Author URI: https://masbudi.my.id
Description: Tema WordPress profesional untuk sekolah (Gaya Modern Card Layout).
Version: 1.0.0
*/
:root {
--primary-color: #0b4a8e;
--secondary-color: #1a73e8;
--text-color: #4a4a4a;
--heading-color: #1a2b4c;
--bg-light-blue: #f0f7ff;
--bg-white: #ffffff;
--radius: 12px;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
--font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* 1. RESET & DASAR */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); color: var(--text-color); background-color: var(--bg-white); line-height: 1.6; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: var(--primary-color); transition: 0.3s; }
/* 2. LAYOUT KOTAK UTAMA */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.text-white { color: #fff !important; }
.edukarsa-section { padding: 80px 0; }
.section-title { font-size: 32px; color: var(--heading-color); margin-bottom: 15px; font-weight: 800; }
/* 3. HEADER & MENU NAVIGATION */
.site-header { position: sticky; top: 0; z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 15px 0; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo-link { display: flex; align-items: center; gap: 15px; color: #fff; }
.site-title { margin: 0; font-size: 24px; font-weight: 800; color: #fff; }
.nav-menu-custom { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; }
.nav-menu-custom li a { display: block; color: #ffffff; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 0; }
.nav-menu-custom li a:hover { color: #f39c12; }
/* 3.1 DROPDOWN MENU (Sub-menu Animasi) */
.nav-menu-custom li { position: relative; } /* Agar sub-menu mengikuti induknya */
.nav-menu-custom .sub-menu {
position: absolute;
top: 100%; /* Turun di bawah menu utama */
left: 0;
background-color: var(--primary-color);
min-width: 220px;
padding: 10px 0;
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden; /* Sembunyikan secara default */
transform: translateY(15px); /* Posisi awal agak ke bawah */
transition: all 0.3s ease;
z-index: 1000;
}
.nav-menu-custom li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0); /* Muncul dengan mulus ke atas */
}
.nav-menu-custom .sub-menu li a {
padding: 10px 20px;
font-size: 14px;
text-transform: none; /* Sub menu tidak kapital semua */
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-menu-custom .sub-menu li:last-child a { border-bottom: none; }
/* Sub-menu di dalam sub-menu (Level 3) */
.nav-menu-custom .sub-menu .sub-menu { top: 0; left: 100%; transform: translateX(15px); }
.nav-menu-custom .sub-menu li:hover > .sub-menu { transform: translateX(0); }
/* 4. ANIMASI SLIDER */
.edukarsa-hero-slider { padding: 0; }
.slider-container { position: relative; width: 100%; overflow: hidden; }
.slider-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.slider-wrapper::-webkit-scrollbar { display: none; }
.slide-item { flex: 0 0 100%; position: relative; scroll-snap-align: center; }
/* 5. KOMPONEN UMUM */
.bg-light-blue { background-color: var(--bg-light-blue); }
.bg-dark-blue { background-color: var(--primary-color); }
.card-style { background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,0.03); transition: transform 0.3s ease; }
.card-style:hover { transform: translateY(-5px); }
.top-border-blue { border-top: 4px solid var(--primary-color); }
.title-underline { width: 50px; border: 2px solid #f39c12; margin: 10px auto 30px; }
/* BUTTONS */
.btn-primary { display: inline-block; background-color: var(--primary-color); color: var(--bg-white); padding: 12px 35px; border-radius: 50px; font-weight: bold; letter-spacing: 0.5px; }
.btn-primary:hover { background-color: var(--secondary-color); color: #fff; }
.btn-light { background-color: #fff; color: var(--primary-color); }
.btn-light:hover { background-color: #f1f1f1; color: var(--primary-color); }
.btn-outline-primary { display: inline-block; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: bold; }
.btn-outline-primary:hover { background-color: var(--primary-color); color: #fff; }
.badge-title { display: inline-block; color: var(--secondary-color); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
/* 6. GRID SYSTEM (Stats, Milestones, Program, Video, Keunggulan, News) */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 10; margin-top: -80px; margin-bottom: 40px; }
.stat-card-modern { padding: 40px 30px; text-align: left; border-radius: 24px; border-top: 5px solid var(--secondary-color); transition: all 0.3s ease; background: #fff; }
.stat-card-modern:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(11, 74, 142, 0.12); }
.stat-icon-wrapper { width: 65px; height: 65px; background-color: #e6f0fa; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; font-size: 28px; }
.stat-icon-wrapper img { width: 32px; height: 32px; object-fit: contain; }
.stat-card-modern .stat-number { font-size: 46px; font-weight: 900; color: var(--primary-color); margin-bottom: 5px; line-height: 1; }
.stat-card-modern .stat-title { font-size: 18px; font-weight: 800; color: var(--heading-color); margin-bottom: 8px; }
.stat-card-modern .stat-desc { font-size: 14px; color: #64748b; line-height: 1.6; margin: 0; }
.pt-0 { padding-top: 20px !important; }
.sambutan-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.sambutan-text { color: #666; font-size: 16px; margin-bottom: 30px; }
.milestone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.milestone-item { padding: 20px; }
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.program-card { padding: 40px 20px; }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 40px 0; }
.video-item { position: relative; border-radius: var(--radius); overflow: hidden; border: 5px solid rgba(255,255,255,0.2); }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #e74c3c; color: white; padding: 20px; border-radius: 50%; font-size: 24px; cursor: pointer; }
/* EFEK PARALLAX (AREA BIRU) */
.parallax-section-wrapper { position: relative; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
.parallax-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
.relative-z2 { position: relative; z-index: 2; }
.keunggulan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.keunggulan-card { position: relative; padding: 30px; display: flex; align-items: flex-start; overflow: hidden; }
.keunggulan-number { position: absolute; top: 10px; right: 10px; font-size: 80px; font-weight: 900; color: rgba(11, 74, 142, 0.05); line-height: 1; z-index: 0; }
.keunggulan-content-inner { position: relative; z-index: 1; }
.keunggulan-content-inner h4 { color: var(--primary-color); margin-bottom: 10px; font-size: 18px;}
.edukarsa-cta-bg { background-size: cover; background-position: center; position: relative; padding: 100px 0; }
.edukarsa-cta-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 74, 142, 0.85); z-index: 1;}
.edukarsa-cta-bg .container { position: relative; z-index: 2; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.news-title { font-size: 18px; margin-bottom: 10px; line-height: 1.4; }
/* 7. IMAGE LOCKS & PLACEHOLDERS */
.img-wrapper-slider { height: 600px; width: 100%; overflow: hidden; position: relative; }
.img-wrapper-landscape { aspect-ratio: 4/3; width: 100%; overflow: hidden; position: relative; border-radius: 8px; }
.img-wrapper-video { aspect-ratio: 16/9; width: 100%; overflow: hidden; position: relative; border-radius: 12px; }
.img-wrapper-portrait { aspect-ratio: 3/4; width: 100%; max-width: 350px; overflow: hidden; position: relative; border-radius: 12px; box-shadow: var(--shadow); }
.img-wrapper-slider img, .img-wrapper-landscape img, .img-wrapper-video img, .img-wrapper-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.img-placeholder { width: 100%; height: 100%; background-color: #f1f5f9; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; font-size: 14px; text-align: center; border: 2px dashed #cbd5e1; }
.img-placeholder i { font-size: 32px; margin-bottom: 5px; font-style: normal; opacity: 0.5; }
/* 8. FOOTER STYLING */
.footer-links-custom { list-style: none; padding: 0; margin: 0; line-height: 2; }
.footer-links-custom li a { color: #ffffff; opacity: 0.8; }
.footer-links-custom li a:hover { opacity: 1; color: #f39c12; }
/* 9. RESPONSIVE MEDIA QUERIES */
@media (max-width: 992px) {
.keunggulan-grid, .program-grid, .milestone-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
.video-grid { grid-template-columns: 1fr; }
.sambutan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.header-container { flex-direction: column; gap: 15px; }
.nav-menu-custom { flex-wrap: wrap; justify-content: center; }
.nav-menu-custom .sub-menu { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; background: rgba(0,0,0,0.1); }
.keunggulan-grid, .program-grid, .milestone-grid, .stats-grid, .news-grid { grid-template-columns: 1fr; }
.edukarsa-stats { margin-top: -40px; }
.img-wrapper-slider { height: 400px; }
}