/* Import Font Dipisah Agar Ramah XML Blogger */
@import url(‘https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&display=swap’);
@import url(‘https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap’);

/* SCOPED CSS KHUSUS APLIKASI */
#qowim-abudaud-app {
/* Palette Sand & Emerald */
–ad-sand-50: #fdfbf7;
–ad-sand-100: #f8f4eb;
–ad-sand-200: #efe6d3;
–ad-sand-700: #7a6a53;
–ad-sand-800: #5c4e3a;
–ad-sand-900: #4b4031;
–ad-em-50: #ecfdf5;
–ad-em-100: #d1fae5;
–ad-em-300: #6ee7b7;
–ad-em-600: #059669;
–ad-em-700: #047857;
–ad-em-800: #065f46;
–ad-em-900: #064e3b;
–ad-amber: #d97706;
–ad-red: #b91c1c;

font-family: ‘Plus Jakarta Sans’, system-ui, -apple-system, sans-serif;
background-color: var(–ad-sand-50);
color: var(–ad-sand-900);
line-height: 1.7;
border-radius: 16px;
border: 1px solid var(–ad-sand-200);
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
}

#qowim-abudaud-app * { box-sizing: border-box; }
#qowim-abudaud-app p { margin-top: 0; margin-bottom: 1.2rem; color: var(–ad-sand-800); font-size: 1.05rem; }
#qowim-abudaud-app h1, #qowim-abudaud-app h2, #qowim-abudaud-app h3, #qowim-abudaud-app h4 {
font-family: ‘Merriweather’, Georgia, serif;
color: var(–ad-sand-900);
margin-top: 0;
line-height: 1.3;
}

/* Navigasi Internal */
#qowim-abudaud-app .ad-nav {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
background: rgba(253, 251, 247, 0.95); padding: 15px 25px; border-bottom: 1px solid var(–ad-sand-200);
}
#qowim-abudaud-app .ad-nav-brand { font-family: ‘Merriweather’, serif; font-weight: 700; font-size: 1.25rem; color: var(–ad-em-800); }
#qowim-abudaud-app .ad-nav-links { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 10px; }
@media (min-width: 768px) { #qowim-abudaud-app .ad-nav-links { margin-top: 0; } }
#qowim-abudaud-app .nav-link {
color: var(–ad-sand-800); text-decoration: none; font-size: 0.9rem; font-weight: 600;
transition: 0.3s; cursor: pointer;
}
#qowim-abudaud-app .nav-link:hover { color: var(–ad-em-700); }

/* Header Utama */
#qowim-abudaud-app .ad-header { text-align: center; padding: 60px 20px 50px; background: linear-gradient(to bottom, var(–ad-sand-100), var(–ad-sand-50)); border-bottom: 1px solid var(–ad-sand-200); }
#qowim-abudaud-app .ad-badge { color: var(–ad-em-700); font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 15px; display: block; }
#qowim-abudaud-app .ad-header h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 20px; }
#qowim-abudaud-app .ad-header h1 span { color: var(–ad-em-800); }
@media (min-width: 768px) { #qowim-abudaud-app .ad-header h1 { font-size: 3.5rem; } }

#qowim-abudaud-app .btn-start { display: inline-flex; align-items: center; justify-content: center; padding: 12px 25px; font-weight: 600; color: #fff; background: var(–ad-em-700); border-radius: 8px; text-decoration: none; transition: 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-top: 20px; }
#qowim-abudaud-app .btn-start:hover { background: var(–ad-em-800); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }

/* General Layout */
#qowim-abudaud-app .ad-section { padding: 60px 25px; border-bottom: 1px solid var(–ad-sand-200); }
#qowim-abudaud-app .ad-section-title { font-size: 2rem; font-weight: 700; color: var(–ad-sand-900); border-bottom: 3px solid var(–ad-em-700); display: inline-block; padding-bottom: 8px; margin-bottom: 25px; text-align: center; }

/* FIX: TATA LETAK KOLOM MENGGUNAKAN FLEXBOX STABIL */
#qowim-abudaud-app .ad-flex-2 { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 768px) {
#qowim-abudaud-app .ad-flex-2 { flex-direction: row; align-items: flex-start; }
#qowim-abudaud-app .ad-flex-2 > div { flex: 1; width: 50%; }
}

#qowim-abudaud-app .ad-flex-3 { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
@media (min-width: 768px) {
#qowim-abudaud-app .ad-flex-3 { flex-direction: row; }
#qowim-abudaud-app .ad-flex-3 > button { flex: 1; width: 33.333%; }
}

/* Timeline Fix (Blogger Safe) */
#qowim-abudaud-app .ad-timeline { border-left: 2px solid var(–ad-sand-200); margin-left: 10px; padding-left: 25px; display: flex; flex-direction: column; gap: 30px; }
#qowim-abudaud-app .ad-time-item { position: relative; }
#qowim-abudaud-app .ad-time-dot { position: absolute; left: -35px; top: 6px; width: 18px; height: 18px; background: var(–ad-em-700); border-radius: 50%; border: 3px solid var(–ad-sand-50); }
#qowim-abudaud-app .ad-time-item h4 { font-size: 1.1rem; font-family: ‘Plus Jakarta Sans’, sans-serif; font-weight: 700; margin-bottom: 5px; }
#qowim-abudaud-app .ad-time-item p { font-size: 0.95rem; margin: 0; }

/* Cards & Boxes */
#qowim-abudaud-app .card-white { background: #ffffff; padding: 30px; border-radius: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); border: 1px solid var(–ad-sand-200); }

#qowim-abudaud-app .list-box { background: var(–ad-em-50); padding: 25px; border-radius: 12px; border: 1px solid var(–ad-em-100); margin-bottom: 20px; }
#qowim-abudaud-app .list-box h4 { color: var(–ad-em-900); font-family: ‘Plus Jakarta Sans’, sans-serif; font-size: 1.1rem; display: flex; align-items: center; margin-bottom: 15px; }
#qowim-abudaud-app .list-box ul { margin: 0; padding-left: 20px; color: var(–ad-sand-800); }
#qowim-abudaud-app .list-box li { margin-bottom: 5px; }

#qowim-abudaud-app .list-box-sand { background: var(–ad-sand-100); border-color: var(–ad-sand-200); }
#qowim-abudaud-app .list-box-sand h4 { color: var(–ad-sand-900); }

#qowim-abudaud-app .ad-quote { font-style: italic; color: var(–ad-sand-800); border-left: 4px solid var(–ad-em-600); padding-left: 20px; margin: 20px 0; }
#qowim-abudaud-app .ad-quote span { display: block; font-weight: 700; font-size: 0.9rem; margin-top: 10px; font-style: normal; }

/* Karakteristik List */
#qowim-abudaud-app .char-list { list-style: none; padding: 0; margin: 0 0 30px 0; }
#qowim-abudaud-app .char-item { display: flex; align-items: flex-start; margin-bottom: 20px; }
#qowim-abudaud-app .char-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(–ad-em-100); color: var(–ad-em-800); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; margin-right: 15px; margin-top: 3px; }
#qowim-abudaud-app .char-item h4 { font-family: ‘Plus Jakarta Sans’, sans-serif; font-weight: 700; margin-bottom: 5px; font-size: 1.1rem; }

/* Interactive Method Cards */
#qowim-abudaud-app .ad-method-btn { background: #ffffff; padding: 25px; border-radius: 12px; border: 2px solid transparent; text-align: left; cursor: pointer; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); display: block; font-family: inherit; overflow-wrap: break-word;}
#qowim-abudaud-app .ad-method-btn:hover { border-color: var(–ad-em-300); box-shadow: 0 6px 12px rgba(0,0,0,0.05); }
#qowim-abudaud-app .ad-method-btn h3 { font-family: ‘Plus Jakarta Sans’, sans-serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
#qowim-abudaud-app .ad-method-btn p { font-size: 0.9rem; margin: 0; color: var(–ad-sand-700); }

#qowim-abudaud-app .ad-method-btn.active-shahih { border-color: var(–ad-em-600); background: var(–ad-em-50); }
#qowim-abudaud-app .ad-method-btn.active-diam { border-color: var(–ad-amber); background: #fffbeb; }
#qowim-abudaud-app .ad-method-btn.active-daif { border-color: var(–ad-red); background: #fef2f2; }

/* Chart Containers */
#qowim-abudaud-app .chart-container { position: relative; width: 100%; margin: 0 auto; height: 300px; max-height: 400px; display: flex; justify-content: center; align-items: center; }
@media (min-width: 768px) { #qowim-abudaud-app .chart-container { height: 350px; } }

/* Footer */
#qowim-abudaud-app .ad-footer { background: var(–ad-sand-900); color: var(–ad-sand-200); text-align: center; padding: 40px 20px; border-radius: 0 0 16px 16px; }
#qowim-abudaud-app .ad-footer h2 { color: #ffffff; font-size: 1.5rem; margin-bottom: 15px; }

// Smooth Scroll untuk Navigasi Internal
document.querySelectorAll(‘#qowim-abudaud-app .nav-link, #qowim-abudaud-app .btn-start’).forEach(link => {
link.addEventListener(‘click’, function(e) {
e.preventDefault();
const targetId = this.getAttribute(‘href’).substring(1);
const targetEl = document.getElementById(targetId);
if(targetEl) {
const y = targetEl.getBoundingClientRect().top + window.pageYOffset – 20;
window.scrollTo({top: y, behavior: ‘smooth’});
}
});
});

// Config Data
const chartColors = {
emerald: ‘#047857’,
amber: ‘#d97706’,
red: ‘#b91c1c’,
sandDark: ‘#9ca3af’,
sandLight: ‘#e5e7eb’
};

let qualityChartInstance = null;

document.addEventListener(‘DOMContentLoaded’, function() {
Chart.defaults.font.family = “‘Plus Jakarta Sans’, sans-serif”;

// — Chart 1: Selection Process (Doughnut) —
const ctxSelection = document.getElementById(‘selectionChart’).getContext(‘2d’);
new Chart(ctxSelection, {
type: ‘doughnut’,
data: {
labels: [‘Hadis Terpilih (Masuk Sunan)’, ‘Hadis Disaring (Tidak Masuk)’],
datasets: [{
data: [4800, 495200], // Total 500k
backgroundColor: [chartColors.emerald, chartColors.sandDark],
borderWidth: 2,
borderColor: ‘#fdfbf7’,
hoverOffset: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: ‘70%’,
plugins: {
legend: { position: ‘bottom’, labels: { usePointStyle: true, padding: 15 } },
tooltip: {
callbacks: {
label: function(context) {
let label = context.label || ”;
if (label) label += ‘: ‘;
label += new Intl.NumberFormat(‘id-ID’).format(context.raw) + ‘ Riwayat’;
return label;
}
}
}
}
}
});

// — Chart 2: Methodology/Quality (Bar) —
const ctxQuality = document.getElementById(‘qualityChart’).getContext(‘2d’);
qualityChartInstance = new Chart(ctxQuality, {
type: ‘bar’,
data: {
labels: [‘Shahih’, ‘Hasan’, ‘Shalih (Didiamkan)’, ‘Da’if (Dijelaskan)’],
datasets: [{
label: ‘Tingkat Prioritas Dalil’,
data: [100, 80, 50, 10],
backgroundColor: [chartColors.emerald, chartColors.emerald, chartColors.amber, chartColors.red],
borderRadius: 4
}]
},
options: {
responsive: true, maintainAspectRatio: false, indexAxis: ‘y’,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: function(context) {
const texts = [
‘Pilihan Utama’,
‘Diterima Sepenuhnya’,
‘Dapat Diamalkan (Pendapat Mayoritas)’,
‘Hanya untuk Penjelasan, Bukan Hukum Utama’
];
return texts[context.dataIndex];
}
}
}
},
scales: {
x: { display: false, max: 110 },
y: { grid: { display: false }, ticks: { font: { weight: ‘bold’ }, color: ‘#4b4031’ } }
}
}
});
});

// — Interactive Logic for Methodology Section —
const methodDescriptions = {
‘shahih’: {
title: “Prioritas: Shahih & Hasan”,
text: “Imam Abu Daud selalu mengutamakan hadis Shahih. Jika tidak ada yang Shahih dalam suatu bab, beliau menggunakan hadis Hasan. Kedua kategori ini adalah pilar utama dari Sunan Abu Daud yang secara mutlak dapat dijadikan hujjah (dalil) dalam menetapkan hukum fikih.”,
activeClass: “active-shahih”,
chartColors: [chartColors.emerald, chartColors.emerald, chartColors.sandLight, chartColors.sandLight]
},
‘diam’: {
title: “Konsep Hadis ‘Sukaat’ (Didiamkan)”,
text: “Keunikan Sunan Abu Daud adalah adanya hadis yang beliau cantumkan tanpa komentar. Beliau menyatakan: ‘Wa maa lam adzkur fihi syai-an fahuwa shaalih’ (Apa yang tidak aku komentari, maka ia Shalih/layak diamalkan). Ulama kontemporer meneliti ulang bagian ini; sebagian memang Hasan, sebagian lain Da’if namun maknanya didukung dalil lain.”,
activeClass: “active-diam”,
chartColors: [chartColors.sandLight, chartColors.sandLight, chartColors.amber, chartColors.sandLight]
},
‘daif’: {
title: “Penanganan Hadis Da’if”,
text: “Berbeda dengan persepsi awam, kitab rujukan fikih klasik kadang memuat hadis lemah. Abu Daud memasukkan hadis Da’if DENGAN SYARAT: (1) Kelemahannya dijelaskan secara gamblang di dalam kitab. (2) Hadis Da’if yang ringan lebih beliau sukai untuk diamalkan daripada harus menggunakan logika murni (Qiyas) jika tidak ada dalil riwayat lain sama sekali.”,
activeClass: “active-daif”,
chartColors: [chartColors.sandLight, chartColors.sandLight, chartColors.sandLight, chartColors.red]
}
};

window.updateMethodology = function(type) {
const data = methodDescriptions[type];

// Animasi teks
const titleEl = document.getElementById(‘methodology-title’);
const descEl = document.getElementById(‘methodology-desc’);

titleEl.style.opacity = 0; descEl.style.opacity = 0;

setTimeout(() => {
titleEl.innerText = data.title;
descEl.innerText = data.text;
titleEl.style.opacity = 1; descEl.style.opacity = 1;
titleEl.style.transition = “opacity 0.3s”; descEl.style.transition = “opacity 0.3s”;
}, 200);

// Update status tombol
document.querySelectorAll(‘.ad-method-btn’).forEach(btn => {
btn.classList.remove(‘active-shahih’, ‘active-diam’, ‘active-daif’);
});
document.getElementById(‘btn-‘ + type).classList.add(data.activeClass);

// Update Chart Colors
if(qualityChartInstance) {
qualityChartInstance.data.datasets[0].backgroundColor = data.chartColors;
qualityChartInstance.update();
}
};