/* Scoping style agar tidak merusak layout utama Blogger */
#eco-prophetic-container {
–earth-cream: #FDFBF7;
–olive-dark: #3D4828;
–olive-light: #8B9D77;
–clay: #B36A5E;
–leaf: #556B2F;
font-family: ‘Inter’, sans-serif;
background-color: var(–earth-cream);
color: #2D2D2D;
}
#eco-prophetic-container .arabic {
font-family: ‘Amiri’, serif;
direction: rtl;
}
#eco-prophetic-container .chart-container {
position: relative;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
height: 400px;
max-height: 500px;
}
#eco-prophetic-container .glass-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
#eco-prophetic-container .nav-link.active {
color: var(–leaf) !important;
border-bottom: 2px solid var(–leaf);
}
#eco-prophetic-container .scroll-section {
display: none;
}
#eco-prophetic-container .scroll-section.active {
display: block;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#eco-prophetic-container .tab-btn.active {
background-color: var(–olive-dark);
color: white;
}

const hadiths = [
{
id: 1,
title: “Mandat Kekhalifahan”,
arabic: “إِنَّ الدُّنْيَا حُلْوَةٌ خَضِرَةٌ، وَإِنَّ اللَّهَ مُسْتَخْلِفُكُمْ فِيهَا، فَيَنْظُرُ كَيْفَ تَعْمَلُونَ”,
meaning: “Sesungguhnya dunia ini hijau dan manis, dan sesungguhnya Allah menjadikan kalian sebagai khalifah di dalamnya…”,
source: “Shahih Muslim – Jalur Abu Sa’id al-Khudri”,
syarah: “Metafora dunia yang ‘hijau dan manis’ melambangkan keindahan ekosistem sekaligus potensi ujian. Manusia bukan pemilik mutlak, melainkan pengelola (steward) yang bertanggung jawab menjaga ‘Masjid Semesta’.”
},
{
id: 2,
title: “Sedekah Penghijauan”,
arabic: “مَا مِنْ مُسْلِمٍ يَغْرِسُ غَرْسًا، أَوْ يَزْرَعُ زَرْعًا، فَيَأْكُلُ مِنْهُ طَيْرٌ أَوْ إِنْسَانٌ أَوْ بَهِيمَةٌ، إِلَّا كَانَ لَهُ بِهِ صَدَقَةٌ”,
meaning: “Tidaklah seorang muslim menanam tanaman, lalu hasilnya dimakan oleh burung, manusia, atau hewan, melainkan hal tersebut bernilai sedekah.”,
source: “Shahih Bukhari & Muslim – Jalur Anas bin Malik”,
syarah: “Mengubah tindakan agronomis menjadi spiritual. Pahala tetap mengalir meskipun tanaman dicuri atau dimakan hewan tanpa izin. Ini adalah investasi jariyah yang berkelanjutan.”
},
{
id: 3,
title: “Etika Satwa”,
arabic: “دَخَلَتِ امْرَأَةٌ النَّارَ فِي هِرَّةٍ رَبَطَتْهَا، فَلَا هِيَ أَطْعَمَتْهَا، وَلَا هِيَ أَرْسَلَتْهَا تَأْكُلُ مِنْ خَشَاشِ الْأَرْضِ”,
meaning: “Seorang wanita disiksa di neraka disebabkan mengurung seekor kucing hingga mati kelaparan…”,
source: “Muttafaq ‘Alayh – Jalur Abdullah bin Umar”,
syarah: “Hewan memiliki hak dasar hidup. Eksploitasi dan penyiksaan terhadap satwa adalah dosa sistemik karena merusak rantai makanan dan keseimbangan ekosistem (Mizan).”
},
{
id: 4,
title: “Moderasi Air”,
arabic: “أَفِي الْوُضُوءِ إِسْرَافٌ؟ قَالَ: نَعَمْ، وَإِنْ كُنْتَ عَلَى نَهَرٍ جَارٍ”,
meaning: “Apakah dalam wudhu juga ada pemborosan? Nabi menjawab: ‘Ya, meskipun engkau berada di tepi sungai yang mengalir deras.'”,
source: “Musnad Ahmad & Ibnu Majah – Status: Hasan”,
syarah: “Konsep al-iqtisad (moderasi). Efisiensi adalah kewajiban moral trans-situasional. Ibadah ritual sekalipun harus tunduk pada disiplin konservasi lingkungan.”
},
{
id: 5,
title: “Sumber Daya Publik”,
arabic: “الْمُسْلِمُونَ شُرَكَاءُ فِي ثَلَاثٍ: فِي الْمَاءِ، وَالْكَلَإِ، وَالنَّارِ”,
meaning: “Umat Islam bersekutu dalam tiga hal: air, rumput (padang gembalaan), dan api (energi).”,
source: “Sunan Ibnu Majah – Sanad Shahih”,
syarah: “Melarang privatisasi atau monopoli barang vital. Landasan keadilan distributif dalam pengelolaan hutan, air, dan tambang untuk kemaslahatan rakyat luas.”
},
{
id: 6,
title: “Revitalisasi Lahan”,
arabic: “مَنْ أَحْيَا أَرْضًا مَيِّتَةً فَهِيَ لَهُ”,
meaning: “Barangsiapa yang menghidupkan tanah yang mati (tidak produktif), maka tanah tersebut menjadi miliknya.”,
source: “Shahih Bukhari – Jalur Aisyah RA”,
syarah: “Konsep Ihya al-Mawat. Mendorong produktivitas lahan kosong untuk kedaulatan pangan dan mencegah penelantaran sumber daya alam.”
}
];

const pesantrens = [
{
name: “Pondok Pesantren Lirboyo”,
location: “Kediri, Jatim”,
tag: “Circular Economy”,
details: “Mengolah limbah dapur dengan Maggot BSF dan unit daur ulang plastik. Memiliki unit pertanian mandiri al-Baqoroh.”
},
{
name: “PP. Nurul Jadid”,
location: “Probolinggo, Jatim”,
tag: “Water Efficiency”,
details: “Mendaur ulang air bekas wudhu (greywater) untuk keperluan MCK dan penyiraman kebun pesantren secara otomatis.”
},
{
name: “Pesantren At-Thaariq”,
location: “Garut, Jabar”,
tag: “Agroekologi”,
details: “Fokus pada kedaulatan pangan dan benih lokal (seed banking). Menanam 450 spesies tanpa pupuk kimia sintetis.”
},
{
name: “PP. Al-Mizan Wanajaya”,
location: “Majalengka, Jabar”,
tag: “Digital-Green”,
details: “Implementasi Smart Farming berbasis IoT (sprinkler otomatis dan sensor tanah) dalam ekonomi syariah.”
}
];

// Gunakan event listener yang aman untuk Blogger Ajax loading
function initEcoApp() {
renderHadiths();
renderPesantrenList();
initChart();
}

if (document.readyState === “complete” || document.readyState === “interactive”) {
setTimeout(initEcoApp, 1);
} else {
document.addEventListener(“DOMContentLoaded”, initEcoApp);
}

function showSection(id) {
document.querySelectorAll(‘#eco-prophetic-container .scroll-section’).forEach(s => s.classList.remove(‘active’));
document.querySelectorAll(‘#eco-prophetic-container .nav-link’).forEach(l => l.classList.remove(‘active’));
document.getElementById(id).classList.add(‘active’);
document.getElementById(‘btn-‘ + id).classList.add(‘active’);
}

function renderHadiths() {
const container = document.getElementById(‘hadith-grid’);
if(!container) return;
container.innerHTML = hadiths.map(h => `

`).join(”);
}

function showHadithDetail(id) {
const h = hadiths.find(item => item.id === id);
const grid = document.getElementById(‘hadith-grid’);
const detail = document.getElementById(‘hadith-detail’);
const content = document.getElementById(‘detail-content’);

grid.classList.add(‘hidden’);
detail.classList.remove(‘hidden’);

content.innerHTML = `

`;
}

function hideHadithDetail() {
document.getElementById(‘hadith-grid’).classList.remove(‘hidden’);
document.getElementById(‘hadith-detail’).classList.add(‘hidden’);
}

function renderPesantrenList() {
const container = document.getElementById(‘pesantren-list’);
if(!container) return;
container.innerHTML = pesantrens.map((p, idx) => `

${p.name}

${p.location}

${p.tag}

`).join(”);
}

function displayPesantren(idx) {
const p = pesantrens[idx];
const display = document.getElementById(‘pesantren-display’);
display.innerHTML = `

`;
}

function initChart() {
const canvas = document.getElementById(‘ecoChart’);
if(!canvas) return;
const ctx = canvas.getContext(‘2d’);
new Chart(ctx, {
type: ‘radar’,
data: {
labels: [‘Pencegahan Limbah’, ‘Efisiensi Energi’, ‘Bahan Baku Terbarukan’, ‘Produk Terurai’, ‘Keamanan Bahan Kimia’],
datasets: [{
label: ‘Korelasi Nilai Islam (Hadis)’,
data: [95, 88, 92, 85, 90],
backgroundColor: ‘rgba(85, 107, 47, 0.2)’,
borderColor: ‘rgba(85, 107, 47, 1)’,
borderWidth: 2,
pointBackgroundColor: ‘rgba(85, 107, 47, 1)’
}, {
label: ‘Prinsip Green Chemistry’,
data: [90, 95, 85, 95, 88],
backgroundColor: ‘rgba(179, 106, 94, 0.2)’,
borderColor: ‘rgba(179, 106, 94, 1)’,
borderWidth: 2,
pointBackgroundColor: ‘rgba(179, 106, 94, 1)’
}]
},
options: {
maintainAspectRatio: false,
scales: {
r: {
angleLines: { display: true },
suggestedMin: 0,
suggestedMax: 100,
ticks: { display: false }
}
},
plugins: {
legend: { position: ‘bottom’ }
}
}
});
}