/* Scoped CSS – Terisolasi agar tidak merusak tema Igniel */
#spa-mubarakfuri-wrapper {
font-family: ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif;
color: #292524;
background-color: #fafaf9;
line-height: 1.6;
box-sizing: border-box;
max-width: 100%;
margin: 0 auto;
border-radius: 12px;
border: 1px solid #e7e5e4;
}
#spa-mubarakfuri-wrapper * { box-sizing: inherit; }
#spa-mubarakfuri-wrapper p { margin-top: 0; margin-bottom: 1.5rem; color: #57534e; font-size: 1.05rem;}
#spa-mubarakfuri-wrapper h1,
#spa-mubarakfuri-wrapper h2,
#spa-mubarakfuri-wrapper h3 { margin-top: 0; color: #1c1917; }

/* Navigasi */
#spa-mubarakfuri-wrapper .spa-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background: #ffffff;
padding: 15px 25px;
border-bottom: 1px solid #e7e5e4;
border-radius: 12px 12px 0 0;
}
#spa-mubarakfuri-wrapper .spa-nav-brand { font-weight: bold; font-size: 1.25rem; color: #b45309; }
#spa-mubarakfuri-wrapper .spa-nav-links { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 10px; }
@media (min-width: 600px) { #spa-mubarakfuri-wrapper .spa-nav-links { margin-top: 0; } }
#spa-mubarakfuri-wrapper .nav-link {
text-decoration: none; color: #57534e; font-size: 0.95rem; font-weight: 500; padding: 5px 0; border-bottom: 2px solid transparent; transition: all 0.3s;
}
#spa-mubarakfuri-wrapper .nav-link:hover { color: #d97706; }
#spa-mubarakfuri-wrapper .nav-link.active { color: #d97706; border-bottom-color: #d97706; font-weight: 600; }

/* Header / Hero */
#spa-mubarakfuri-wrapper .spa-header { background-color: #f5f5f4; padding: 60px 20px; text-align: center; border-bottom: 1px solid #e7e5e4; }
#spa-mubarakfuri-wrapper .spa-subtitle { display: block; color: #d97706; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 15px; }
#spa-mubarakfuri-wrapper .spa-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
@media (min-width: 768px) { #spa-mubarakfuri-wrapper .spa-title { font-size: 3rem; } }
#spa-mubarakfuri-wrapper .spa-title-highlight { color: #b45309; white-space: nowrap; }

/* Sections & Grids */
#spa-mubarakfuri-wrapper .spa-section { padding: 50px 25px; border-bottom: 1px dashed #e7e5e4; }
#spa-mubarakfuri-wrapper .spa-section:last-child { border-bottom: none; }
#spa-mubarakfuri-wrapper .spa-section-title { font-size: 1.8rem; font-weight: bold; border-left: 4px solid #f59e0b; padding-left: 15px; margin-bottom: 25px; }

#spa-mubarakfuri-wrapper .spa-grid-2 { display: grid; grid-template-columns: 1fr; gap: 25px; }
@media (min-width: 768px) { #spa-mubarakfuri-wrapper .spa-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* Cards */
#spa-mubarakfuri-wrapper .spa-card { background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e7e5e4; }
#spa-mubarakfuri-wrapper .spa-card-amber { background: #fffbeb; border: 1px solid #fde68a; }
#spa-mubarakfuri-wrapper ul.spa-list { list-style: none; padding: 0; margin: 0; }
#spa-mubarakfuri-wrapper ul.spa-list li { margin-bottom: 10px; color: #44403c; }

/* Timeline */
#spa-mubarakfuri-wrapper .spa-timeline-wrap { position: relative; border-left: 2px solid #fcd34d; margin-left: 15px; padding-left: 25px; }
#spa-mubarakfuri-wrapper .spa-timeline-item { margin-bottom: 35px; position: relative; }
#spa-mubarakfuri-wrapper .spa-timeline-dot { position: absolute; left: -36px; top: 0; width: 20px; height: 20px; background: #fde68a; border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; color: #b45309; font-size: 10px; }
#spa-mubarakfuri-wrapper .spa-timeline-item h3 { font-size: 1.15rem; color: #1c1917; margin-bottom: 5px; }
#spa-mubarakfuri-wrapper .spa-timeline-box { background: #ffffff; padding: 15px 20px; border-radius: 8px; border: 1px solid #f5f5f4; box-shadow: 0 1px 3px rgba(0,0,0,0.02); font-size: 0.95rem; margin-top: 10px;}

/* Interactive Method Cards */
#spa-mubarakfuri-wrapper .method-card { background: #ffffff; border: 1px solid #e7e5e4; border-radius: 12px; padding: 20px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
#spa-mubarakfuri-wrapper .method-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.05); }
#spa-mubarakfuri-wrapper .method-header { display: flex; justify-content: space-between; align-items: center; }
#spa-mubarakfuri-wrapper .method-title-wrap { display: flex; align-items: center; gap: 12px; }
#spa-mubarakfuri-wrapper .method-title-wrap h3 { margin: 0; font-size: 1.15rem; }
#spa-mubarakfuri-wrapper .icon-indicator { color: #a8a29e; font-size: 0.8rem; transition: transform 0.3s; }
#spa-mubarakfuri-wrapper .method-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
#spa-mubarakfuri-wrapper .method-content.expanded { max-height: 300px; }
#spa-mubarakfuri-wrapper .method-desc { padding-top: 15px; margin-top: 15px; border-top: 1px solid #f5f5f4; font-size: 0.95rem; }

/* Charts */
#spa-mubarakfuri-wrapper .chart-wrapper { background: #ffffff; border-radius: 12px; padding: 20px; border: 1px solid #e7e5e4; text-align: center; }
#spa-mubarakfuri-wrapper .chart-container { position: relative; width: 100%; height: 300px; margin: 0 auto; }
@media (min-width: 768px) { #spa-mubarakfuri-wrapper .chart-container { height: 350px; } }
#spa-mubarakfuri-wrapper .chart-note { margin-top: 20px; background: #fafaf9; padding: 15px; border-radius: 8px; font-size: 0.9rem; text-align: left; border: 1px solid #f5f5f4; }

/* Footer */
#spa-mubarakfuri-wrapper .spa-footer { background: #1c1917; color: #a8a29e; text-align: center; padding: 30px 20px; border-radius: 0 0 12px 12px; font-size: 0.9rem; }

// Data Linimasa
const timelineData = [
{ year: “1866 M (1283 H)”, title: “Kelahiran”, desc: “Lahir di Mubarakpur, Uttar Pradesh, India. Lingkungan asalnya sangat kental dengan tradisi keilmuan Islam.” },
{ year: “1880-an M”, title: “Rihlah Keilmuan”, desc: “Mempelajari Nahwu, Sharf, Mantiq, dan Fiqih dari ulama lokal, kemudian mendalami Hadits dari tokoh besar seperti Syaikh Nadhir Husain Ad-Dihlawi.” },
{ year: “1890-an M”, title: “Aktivitas Mengajar & Fatwa”, desc: “Kembali ke kampung halaman, mendirikan madrasah, mengajar hadits, dan mulai aktif menulis fatwa berdasarkan Al-Qur’an dan Sunnah.” },
{ year: “Pra-1935 M”, title: “Penyusunan Tuhfatul Ahwadzi”, desc: “Mendedikasikan sisa usianya menyusun mahakarya syarah Jami’ At-Tirmidzi; sebuah riset mendalam terhadap ribuan manuskrip.” },
{ year: “1935 M (1353 H)”, title: “Wafat”, desc: “Syaikh wafat di Mubarakpur, meninggalkan warisan intelektual yang terus dipelajari di universitas di seluruh dunia.” }
];

const renderTimeline = () => {
const container = document.getElementById(‘timeline-container’);
timelineData.forEach(item => {
const html = `

`;
container.innerHTML += html;
});
};

// Data Metodologi
const methodData = [
{ icon: “🔍”, title: “1. Takhrij & Tahqiq Sanad”, desc: “Melacak jalur periwayatan ke kitab lain, mengevaluasi kredibilitas perawi, dan memberikan kesimpulan derajat hadits secara independen.” },
{ icon: “📚”, title: “2. Tahqiq Lughawi (Bahasa)”, desc: “Menjelaskan makna kosakata asing (Gharib al-Hadith) dengan merujuk pada kamus besar bahasa Arab untuk memastikan pemahaman teks yang presisi.” },
{ icon: “⚖”, title: “3. Pemaparan Ikhtilaf Fiqih”, desc: “Membedah implikasi hukum dengan menyebutkan pendapat madzhab Hanafiyyah, Syafi’iyyah, Malikiyyah, dan Hanabilah beserta dalilnya.” },
{ icon: “✔”, title: “4. Tarjih (Kesimpulan)”, desc: “Memilih pendapat yang dalilnya paling kuat. Beliau menolak taqlid buta dan berani berbeda dengan madzhab mayoritas jika dalil menunjukkannya.” }
];

const renderMethodology = () => {
const container = document.getElementById(‘methodology-container’);
methodData.forEach(item => {
const card = document.createElement(‘div’);
card.className = ‘method-card’;
card.innerHTML = `

`;

card.addEventListener(‘click’, function() {
const content = this.querySelector(‘.method-content’);
const indicator = this.querySelector(‘.icon-indicator’);
const isExpanded = content.classList.contains(‘expanded’);

// Tutup semua
document.querySelectorAll(‘.method-content’).forEach(el => el.classList.remove(‘expanded’));
document.querySelectorAll(‘.icon-indicator’).forEach(el => el.style.transform = ‘rotate(0deg)’);

// Buka yang diklik
if (!isExpanded) {
content.classList.add(‘expanded’);
indicator.style.transform = ‘rotate(180deg)’;
}
});
container.appendChild(card);
});
};

// Inisialisasi Grafik Chart.js
const initCharts = () => {
const donutCtx = document.getElementById(‘komposisiChart’).getContext(‘2d’);
new Chart(donutCtx, {
type: ‘doughnut’,
data: {
labels: [‘Fiqih & Ikhtilaf’, ‘Kajian Sanad & Takhrij’, ‘Penjelasan Bahasa’, ‘Tarjih Hukum’],
datasets: [{
data: [40, 25, 20, 15],
backgroundColor: [‘#d97706’, ‘#eab308’, ‘#fcd34d’, ‘#fef3c7’],
borderWidth: 2,
borderColor: ‘#ffffff’
}]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: {
legend: { position: ‘bottom’, labels: { font: { family: ‘sans-serif’ } } },
tooltip: { callbacks: { label: function(ctx) { return ‘ ‘ + ctx.label + ‘: ‘ + ctx.parsed + ‘%’; } } }
},
cutout: ‘55%’
}
});

const barCtx = document.getElementById(‘pengaruhChart’).getContext(‘2d’);
new Chart(barCtx, {
type: ‘bar’,
data: {
labels: [‘Ibnu Hajar’, ‘Asy-Syaukani’, ‘An-Nawawi’, ‘Ibnu Taimiyyah’, ‘Ash-Shan’ani’],
datasets: [{
label: ‘Intensitas Rujukan’,
data: [95, 88, 75, 82, 70],
backgroundColor: ‘#d97706’,
borderRadius: 6
}]
},
options: {
responsive: true, maintainAspectRatio: false,
scales: {
y: { beginAtZero: true, max: 100, grid: { color: ‘#f5f5f4’ } },
x: { grid: { display: false } }
},
plugins: {
legend: { display: false }
}
}
});
};

// Skrip Navigasi Aktif Otomatis
const setupScrollSpy = () => {
const navLinks = document.querySelectorAll(‘.nav-link’);
// Menangani klik menu secara mulus
navLinks.forEach(link => {
link.addEventListener(‘click’, function(e) {
e.preventDefault();
const targetId = this.getAttribute(‘href’).substring(1);
const targetEl = document.getElementById(targetId);
if(targetEl) {
// Offset sedikit agar judul tidak tertutup (meskipun nav tidak sticky, memberi ruang nafas)
const yOffset = -20;
const y = targetEl.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: ‘smooth’});
}
});
});
};

// Jalankan semua fungsi saat dokumen dimuat
document.addEventListener(‘DOMContentLoaded’, () => {
renderTimeline();
renderMethodology();
initCharts();
setupScrollSpy();
});