Ekstrakurikuler SMPN 1 Rancabali<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n * { font-family: 'Plus Jakarta Sans', sans-serif; }\n .card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }\n .card-hover:hover { transform: translateY(-8px) scale(1.02); }\n .card-hover:hover .card-icon { transform: scale(1.1) rotate(5deg); }\n .card-icon { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }\n .fade-in { animation: fadeIn 0.6s ease forwards; opacity: 0; }\n @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(20px); } }\n .modal-overlay { transition: opacity 0.3s ease; }\n .modal-content { transition: transform 0.3s ease, opacity 0.3s ease; }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full\">\n <div id=\"app\" class=\"w-full h-full overflow-auto bg-slate-900\">\n <header class=\"relative overflow-hidden py-16 px-6 text-center\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-emerald-600\/20 via-slate-900 to-teal-700\/20\"><\/div>\n <div class=\"absolute top-0 left-1\/4 w-96 h-96 bg-emerald-500\/10 rounded-full blur-3xl\"><\/div>\n <div class=\"absolute bottom-0 right-1\/4 w-72 h-72 bg-teal-400\/10 rounded-full blur-3xl\"><\/div>\n <div class=\"relative z-10\">\n <p id=\"school-name\" class=\"text-emerald-400 font-semibold tracking-widest uppercase text-sm mb-3\">SMPN 1 Rancabali<\/p>\n <h1 id=\"page-title\" class=\"text-4xl md:text-5xl font-800 text-white mb-4\">Ekstrakurikuler Kami<\/h1>\n <p class=\"text-slate-400 max-w-xl mx-auto text-lg\">Temukan minat dan bakatmu melalui berbagai kegiatan ekstrakurikuler yang kami sediakan<\/p>\n <\/div>\n <\/header>\n <main class=\"max-w-7xl mx-auto px-6 pb-20\">\n <div id=\"ekskul-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <\/div>\n <\/main>\n <div id=\"modal\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4 hidden\">\n <div class=\"modal-overlay absolute inset-0 bg-black\/70\" onclick=\"closeModal()\"><\/div>\n <div class=\"modal-content relative bg-slate-800 rounded-2xl max-w-lg w-full p-8 border border-slate-700 shadow-2xl\"><button onclick=\"closeModal()\" class=\"absolute top-4 right-4 text-slate-400 hover:text-white transition\"><i data-lucide=\"x\" class=\"w-6 h-6\"><\/i><\/button>\n <div id=\"modal-icon\" class=\"w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl mb-5\"><\/div>\n <h2 id=\"modal-title\" class=\"text-2xl font-bold text-white mb-3\"><\/h2>\n <p id=\"modal-desc\" class=\"text-slate-300 leading-relaxed\"><\/p>\n <div id=\"modal-benefits\" class=\"mt-5 space-y-2\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\nconst ekskulData = [\n { name: \"Pramuka\", icon: \"\u269c\ufe0f\", color: \"from-amber-500 to-orange-600\", desc: \"Kegiatan kepramukaan yang membentuk karakter, kedisiplinan, dan jiwa kepemimpinan siswa melalui kegiatan outdoor, berkemah, dan latihan survival.\", benefits: [\"Kedisiplinan & Kepemimpinan\", \"Keterampilan Survival\", \"Kerja Tim\"] },\n { name: \"Paskibra\", icon: \"\ud83d\udea9\", color: \"from-red-500 to-rose-600\", desc: \"Pasukan Pengibar Bendera yang melatih kedisiplinan tinggi, baris-berbaris, dan kebanggaan nasional melalui upacara bendera dan lomba.\", benefits: [\"Kedisiplinan Tinggi\", \"Nasionalisme\", \"Percaya Diri\"] },\n { name: \"Karate Inkanas\", icon: \"\ud83e\udd4b\", color: \"from-slate-600 to-slate-800\", desc: \"Seni bela diri Karate di bawah naungan INKANAS yang melatih fisik, mental, dan teknik pertahanan diri siswa.\", benefits: [\"Kebugaran Fisik\", \"Pertahanan Diri\", \"Mental Tangguh\"] },\n { name: \"English Club\", icon: \"\ud83c\udf0d\", color: \"from-blue-500 to-indigo-600\", desc: \"Klub bahasa Inggris yang mengasah kemampuan berbicara, menulis, dan memahami bahasa Inggris melalui diskusi, debat, dan permainan edukatif.\", benefits: [\"Kemampuan Berbahasa\", \"Wawasan Global\", \"Public Speaking\"] },\n { name: \"Volley Ball\", icon: \"\ud83c\udfd0\", color: \"from-yellow-500 to-amber-600\", desc: \"Olahraga bola voli yang membangun kerja sama tim, kelincahan, dan sportivitas melalui latihan rutin dan kompetisi.\", benefits: [\"Kebugaran Jasmani\", \"Kerja Sama Tim\", \"Sportivitas\"] },\n { name: \"Basket Ball\", icon: \"\ud83c\udfc0\", color: \"from-orange-500 to-red-500\", desc: \"Olahraga basket yang melatih koordinasi, strategi permainan, dan membangun semangat kompetisi yang sehat.\", benefits: [\"Koordinasi Tubuh\", \"Strategi & Taktik\", \"Semangat Kompetisi\"] },\n { name: \"Teras Balione\", icon: \"\ud83d\udcf0\", color: \"from-teal-500 to-emerald-600\", desc: \"Ekstrakurikuler jurnalistik dan majalah dinding sekolah yang mengasah kemampuan menulis, fotografi, dan kreativitas siswa.\", benefits: [\"Kemampuan Menulis\", \"Kreativitas\", \"Berpikir Kritis\"] },\n { name: \"Degung\", icon: \"\ud83c\udfb5\", color: \"from-purple-500 to-violet-600\", desc: \"Seni musik tradisional Sunda yang melestarikan budaya melalui permainan alat musik gamelan degung.\", benefits: [\"Pelestarian Budaya\", \"Musikalitas\", \"Kebersamaan\"] },\n { name: \"Tari\", icon: \"\ud83d\udc83\", color: \"from-pink-500 to-rose-500\", desc: \"Seni tari tradisional dan kreasi yang mengembangkan ekspresi, kelenturan tubuh, dan apresiasi budaya Indonesia.\", benefits: [\"Ekspresi Seni\", \"Kelenturan Tubuh\", \"Apresiasi Budaya\"] },\n { name: \"PMR\", icon: \"\ud83c\udfe5\", color: \"from-red-600 to-red-800\", desc: \"Palang Merah Remaja yang melatih keterampilan pertolongan pertama, kepedulian sosial, dan kesiapsiagaan bencana.\", benefits: [\"Pertolongan Pertama\", \"Kepedulian Sosial\", \"Kesiapsiagaan\"] }\n];\n\nfunction renderGrid() {\n const grid = document.getElementById('ekskul-grid');\n grid.innerHTML = ekskulData.map((item, i) => `\n <div class=\"card-hover fade-in cursor-pointer\" style=\"animation-delay: ${i * 0.08}s\" onclick=\"openModal(${i})\">\n <div class=\"h-full bg-slate-800\/80 backdrop-blur border border-slate-700\/50 rounded-2xl p-6 hover:border-slate-600 hover:shadow-lg hover:shadow-emerald-500\/5\">\n <div class=\"card-icon w-14 h-14 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center text-2xl mb-4 shadow-lg\">${item.icon}<\/div>\n <h3 class=\"text-lg font-bold text-white mb-2\">${item.name}<\/h3>\n <p class=\"text-slate-400 text-sm line-clamp-3\">${item.desc}<\/p>\n <div class=\"mt-4 flex items-center text-emerald-400 text-sm font-medium\">\n <span>Selengkapnya<\/span>\n <i data-lucide=\"arrow-right\" class=\"w-4 h-4 ml-1\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n `).join('');\n lucide.createIcons();\n}\n\nfunction openModal(index) {\n const item = ekskulData[index];\n const modal = document.getElementById('modal');\n const iconEl = document.getElementById('modal-icon');\n iconEl.className = `w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-5 bg-gradient-to-br ${item.color} shadow-lg`;\n iconEl.textContent = item.icon;\n document.getElementById('modal-title').textContent = item.name;\n document.getElementById('modal-desc').textContent = item.desc;\n document.getElementById('modal-benefits').innerHTML = item.benefits.map(b => `\n <div class=\"flex items-center gap-2 text-sm text-slate-300\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-emerald-400\"><\/i><span>${b}<\/span><\/div>\n `).join('');\n modal.classList.remove('hidden');\n setTimeout(() => lucide.createIcons(), 0);\n}\n\nfunction closeModal() {\n document.getElementById('modal').classList.add('hidden');\n}\n\ndocument.addEventListener('DOMContentLoaded', renderGrid);\n\nconst defaultConfig = {\n page_title: \"Ekstrakurikuler Kami\",\n school_name: \"SMPN 1 Rancabali\",\n background_color: \"#0f172a\",\n accent_color: \"#10b981\",\n card_color: \"#1e293b\",\n text_color: \"#f8fafc\",\n secondary_text_color: \"#94a3b8\",\n font_family: \"Plus Jakarta Sans\"\n};\n\nwindow.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n const bg = config.background_color || defaultConfig.background_color;\n const accent = config.accent_color || defaultConfig.accent_color;\n const textC = config.text_color || defaultConfig.text_color;\n const secText = config.secondary_text_color || defaultConfig.secondary_text_color;\n const font = config.font_family || defaultConfig.font_family;\n\n document.getElementById('app').style.backgroundColor = bg;\n document.getElementById('page-title').textContent = config.page_title || defaultConfig.page_title;\n document.getElementById('school-name').textContent = config.school_name || defaultConfig.school_name;\n document.getElementById('page-title').style.color = textC;\n document.getElementById('school-name').style.color = accent;\n document.body.style.fontFamily = `${font}, sans-serif`;\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } },\n { get: () => config.card_color || defaultConfig.card_color, set: (v) => { config.card_color = v; window.elementSdk.setConfig({ card_color: v }); } },\n { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } },\n { get: () => config.accent_color || defaultConfig.accent_color, set: (v) => { config.accent_color = v; window.elementSdk.setConfig({ accent_color: v }); } },\n { get: () => config.secondary_text_color || defaultConfig.secondary_text_color, set: (v) => { config.secondary_text_color = v; window.elementSdk.setConfig({ secondary_text_color: v }); } }\n ],\n borderables: [],\n fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); } },\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"page_title\", config.page_title || defaultConfig.page_title],\n [\"school_name\", config.school_name || defaultConfig.school_name]\n ])\n});\n\nrenderGrid();\ndocument.documentElement.style.scrollBehavior = 'smooth';\n<\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9fbb764a7258e787',t:'MTc3ODc3ODA1Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Ekstrakurikuler SMPN 1 Rancabali SMPN 1 Rancabali Ekstrakurikuler Kami Temukan minat dan bakatmu melalui berbagai kegiatan ekstrakurikuler yang…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-65","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=65"}],"version-history":[{"count":3,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/65\/revisions"}],"predecessor-version":[{"id":92,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/65\/revisions\/92"}],"wp:attachment":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":65,"date":"2026-05-14T10:19:09","date_gmt":"2026-05-14T10:19:09","guid":{"rendered":"https:\/\/smpn1rancabali.sch.id\/?page_id=65"},"modified":"2026-05-14T17:07:01","modified_gmt":"2026-05-14T17:07:01","slug":"ekstrakurikuler","status":"publish","type":"page","link":"https:\/\/smpn1rancabali.sch.id\/?page_id=65","title":{"rendered":"Ekstrakurikuler"},"content":{"rendered":"\n\n\n \n \n \n Ekstrakurikuler SMPN 1 Rancabali<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lucide@0.263.0\/dist\/umd\/lucide.min.js\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n * { font-family: 'Plus Jakarta Sans', sans-serif; }\n .card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }\n .card-hover:hover { transform: translateY(-8px) scale(1.02); }\n .card-hover:hover .card-icon { transform: scale(1.1) rotate(5deg); }\n .card-icon { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }\n .fade-in { animation: fadeIn 0.6s ease forwards; opacity: 0; }\n @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(20px); } }\n .modal-overlay { transition: opacity 0.3s ease; }\n .modal-content { transition: transform 0.3s ease, opacity 0.3s ease; }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full\">\n <div id=\"app\" class=\"w-full h-full overflow-auto bg-slate-900\">\n <header class=\"relative overflow-hidden py-16 px-6 text-center\">\n <div class=\"absolute inset-0 bg-gradient-to-br from-emerald-600\/20 via-slate-900 to-teal-700\/20\"><\/div>\n <div class=\"absolute top-0 left-1\/4 w-96 h-96 bg-emerald-500\/10 rounded-full blur-3xl\"><\/div>\n <div class=\"absolute bottom-0 right-1\/4 w-72 h-72 bg-teal-400\/10 rounded-full blur-3xl\"><\/div>\n <div class=\"relative z-10\">\n <p id=\"school-name\" class=\"text-emerald-400 font-semibold tracking-widest uppercase text-sm mb-3\">SMPN 1 Rancabali<\/p>\n <h1 id=\"page-title\" class=\"text-4xl md:text-5xl font-800 text-white mb-4\">Ekstrakurikuler Kami<\/h1>\n <p class=\"text-slate-400 max-w-xl mx-auto text-lg\">Temukan minat dan bakatmu melalui berbagai kegiatan ekstrakurikuler yang kami sediakan<\/p>\n <\/div>\n <\/header>\n <main class=\"max-w-7xl mx-auto px-6 pb-20\">\n <div id=\"ekskul-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <\/div>\n <\/main>\n <div id=\"modal\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4 hidden\">\n <div class=\"modal-overlay absolute inset-0 bg-black\/70\" onclick=\"closeModal()\"><\/div>\n <div class=\"modal-content relative bg-slate-800 rounded-2xl max-w-lg w-full p-8 border border-slate-700 shadow-2xl\"><button onclick=\"closeModal()\" class=\"absolute top-4 right-4 text-slate-400 hover:text-white transition\"><i data-lucide=\"x\" class=\"w-6 h-6\"><\/i><\/button>\n <div id=\"modal-icon\" class=\"w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl mb-5\"><\/div>\n <h2 id=\"modal-title\" class=\"text-2xl font-bold text-white mb-3\"><\/h2>\n <p id=\"modal-desc\" class=\"text-slate-300 leading-relaxed\"><\/p>\n <div id=\"modal-benefits\" class=\"mt-5 space-y-2\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\nconst ekskulData = [\n { name: \"Pramuka\", icon: \"\u269c\ufe0f\", color: \"from-amber-500 to-orange-600\", desc: \"Kegiatan kepramukaan yang membentuk karakter, kedisiplinan, dan jiwa kepemimpinan siswa melalui kegiatan outdoor, berkemah, dan latihan survival.\", benefits: [\"Kedisiplinan & Kepemimpinan\", \"Keterampilan Survival\", \"Kerja Tim\"] },\n { name: \"Paskibra\", icon: \"\ud83d\udea9\", color: \"from-red-500 to-rose-600\", desc: \"Pasukan Pengibar Bendera yang melatih kedisiplinan tinggi, baris-berbaris, dan kebanggaan nasional melalui upacara bendera dan lomba.\", benefits: [\"Kedisiplinan Tinggi\", \"Nasionalisme\", \"Percaya Diri\"] },\n { name: \"Karate Inkanas\", icon: \"\ud83e\udd4b\", color: \"from-slate-600 to-slate-800\", desc: \"Seni bela diri Karate di bawah naungan INKANAS yang melatih fisik, mental, dan teknik pertahanan diri siswa.\", benefits: [\"Kebugaran Fisik\", \"Pertahanan Diri\", \"Mental Tangguh\"] },\n { name: \"English Club\", icon: \"\ud83c\udf0d\", color: \"from-blue-500 to-indigo-600\", desc: \"Klub bahasa Inggris yang mengasah kemampuan berbicara, menulis, dan memahami bahasa Inggris melalui diskusi, debat, dan permainan edukatif.\", benefits: [\"Kemampuan Berbahasa\", \"Wawasan Global\", \"Public Speaking\"] },\n { name: \"Volley Ball\", icon: \"\ud83c\udfd0\", color: \"from-yellow-500 to-amber-600\", desc: \"Olahraga bola voli yang membangun kerja sama tim, kelincahan, dan sportivitas melalui latihan rutin dan kompetisi.\", benefits: [\"Kebugaran Jasmani\", \"Kerja Sama Tim\", \"Sportivitas\"] },\n { name: \"Basket Ball\", icon: \"\ud83c\udfc0\", color: \"from-orange-500 to-red-500\", desc: \"Olahraga basket yang melatih koordinasi, strategi permainan, dan membangun semangat kompetisi yang sehat.\", benefits: [\"Koordinasi Tubuh\", \"Strategi & Taktik\", \"Semangat Kompetisi\"] },\n { name: \"Teras Balione\", icon: \"\ud83d\udcf0\", color: \"from-teal-500 to-emerald-600\", desc: \"Ekstrakurikuler jurnalistik dan majalah dinding sekolah yang mengasah kemampuan menulis, fotografi, dan kreativitas siswa.\", benefits: [\"Kemampuan Menulis\", \"Kreativitas\", \"Berpikir Kritis\"] },\n { name: \"Degung\", icon: \"\ud83c\udfb5\", color: \"from-purple-500 to-violet-600\", desc: \"Seni musik tradisional Sunda yang melestarikan budaya melalui permainan alat musik gamelan degung.\", benefits: [\"Pelestarian Budaya\", \"Musikalitas\", \"Kebersamaan\"] },\n { name: \"Tari\", icon: \"\ud83d\udc83\", color: \"from-pink-500 to-rose-500\", desc: \"Seni tari tradisional dan kreasi yang mengembangkan ekspresi, kelenturan tubuh, dan apresiasi budaya Indonesia.\", benefits: [\"Ekspresi Seni\", \"Kelenturan Tubuh\", \"Apresiasi Budaya\"] },\n { name: \"PMR\", icon: \"\ud83c\udfe5\", color: \"from-red-600 to-red-800\", desc: \"Palang Merah Remaja yang melatih keterampilan pertolongan pertama, kepedulian sosial, dan kesiapsiagaan bencana.\", benefits: [\"Pertolongan Pertama\", \"Kepedulian Sosial\", \"Kesiapsiagaan\"] }\n];\n\nfunction renderGrid() {\n const grid = document.getElementById('ekskul-grid');\n grid.innerHTML = ekskulData.map((item, i) => `\n <div class=\"card-hover fade-in cursor-pointer\" style=\"animation-delay: ${i * 0.08}s\" onclick=\"openModal(${i})\">\n <div class=\"h-full bg-slate-800\/80 backdrop-blur border border-slate-700\/50 rounded-2xl p-6 hover:border-slate-600 hover:shadow-lg hover:shadow-emerald-500\/5\">\n <div class=\"card-icon w-14 h-14 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center text-2xl mb-4 shadow-lg\">${item.icon}<\/div>\n <h3 class=\"text-lg font-bold text-white mb-2\">${item.name}<\/h3>\n <p class=\"text-slate-400 text-sm line-clamp-3\">${item.desc}<\/p>\n <div class=\"mt-4 flex items-center text-emerald-400 text-sm font-medium\">\n <span>Selengkapnya<\/span>\n <i data-lucide=\"arrow-right\" class=\"w-4 h-4 ml-1\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n `).join('');\n lucide.createIcons();\n}\n\nfunction openModal(index) {\n const item = ekskulData[index];\n const modal = document.getElementById('modal');\n const iconEl = document.getElementById('modal-icon');\n iconEl.className = `w-16 h-16 rounded-xl flex items-center justify-center text-3xl mb-5 bg-gradient-to-br ${item.color} shadow-lg`;\n iconEl.textContent = item.icon;\n document.getElementById('modal-title').textContent = item.name;\n document.getElementById('modal-desc').textContent = item.desc;\n document.getElementById('modal-benefits').innerHTML = item.benefits.map(b => `\n <div class=\"flex items-center gap-2 text-sm text-slate-300\"><i data-lucide=\"check-circle\" class=\"w-4 h-4 text-emerald-400\"><\/i><span>${b}<\/span><\/div>\n `).join('');\n modal.classList.remove('hidden');\n setTimeout(() => lucide.createIcons(), 0);\n}\n\nfunction closeModal() {\n document.getElementById('modal').classList.add('hidden');\n}\n\ndocument.addEventListener('DOMContentLoaded', renderGrid);\n\nconst defaultConfig = {\n page_title: \"Ekstrakurikuler Kami\",\n school_name: \"SMPN 1 Rancabali\",\n background_color: \"#0f172a\",\n accent_color: \"#10b981\",\n card_color: \"#1e293b\",\n text_color: \"#f8fafc\",\n secondary_text_color: \"#94a3b8\",\n font_family: \"Plus Jakarta Sans\"\n};\n\nwindow.elementSdk.init({\n defaultConfig,\n onConfigChange: async (config) => {\n const bg = config.background_color || defaultConfig.background_color;\n const accent = config.accent_color || defaultConfig.accent_color;\n const textC = config.text_color || defaultConfig.text_color;\n const secText = config.secondary_text_color || defaultConfig.secondary_text_color;\n const font = config.font_family || defaultConfig.font_family;\n\n document.getElementById('app').style.backgroundColor = bg;\n document.getElementById('page-title').textContent = config.page_title || defaultConfig.page_title;\n document.getElementById('school-name').textContent = config.school_name || defaultConfig.school_name;\n document.getElementById('page-title').style.color = textC;\n document.getElementById('school-name').style.color = accent;\n document.body.style.fontFamily = `${font}, sans-serif`;\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } },\n { get: () => config.card_color || defaultConfig.card_color, set: (v) => { config.card_color = v; window.elementSdk.setConfig({ card_color: v }); } },\n { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } },\n { get: () => config.accent_color || defaultConfig.accent_color, set: (v) => { config.accent_color = v; window.elementSdk.setConfig({ accent_color: v }); } },\n { get: () => config.secondary_text_color || defaultConfig.secondary_text_color, set: (v) => { config.secondary_text_color = v; window.elementSdk.setConfig({ secondary_text_color: v }); } }\n ],\n borderables: [],\n fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); } },\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n [\"page_title\", config.page_title || defaultConfig.page_title],\n [\"school_name\", config.school_name || defaultConfig.school_name]\n ])\n});\n\nrenderGrid();\ndocument.documentElement.style.scrollBehavior = 'smooth';\n<\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9fbb764a7258e787',t:'MTc3ODc3ODA1Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Ekstrakurikuler SMPN 1 Rancabali SMPN 1 Rancabali Ekstrakurikuler Kami Temukan minat dan bakatmu melalui berbagai kegiatan ekstrakurikuler yang…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-65","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=65"}],"version-history":[{"count":3,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/65\/revisions"}],"predecessor-version":[{"id":92,"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/65\/revisions\/92"}],"wp:attachment":[{"href":"https:\/\/smpn1rancabali.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}