Skip to content

Commit 801164b

Browse files
Update index.html
1 parent e107cc5 commit 801164b

1 file changed

Lines changed: 101 additions & 18 deletions

File tree

index.html

Lines changed: 101 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,20 @@
344344
.stat-lbl{font-size:8px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);line-height:1.4}
345345
.def-card{border-left:2px solid var(--blue);padding:16px 20px}
346346
.def-label{margin-bottom:8px}
347-
.def-text{font-size:11px;font-weight:300;color:var(--t2);line-height:2.1}
347+
.def-text{font-size:11px;font-weight:300;color:var(--t2);line-height:2.0}
348+
.def-section{margin-bottom:10px}
349+
.def-section:last-of-type{margin-bottom:8px}
350+
.def-tag{
351+
display:inline-block;font-family:var(--mono);font-size:7px;font-weight:700;
352+
letter-spacing:1.6px;text-transform:uppercase;color:var(--blue);
353+
border:1px solid rgba(74,114,204,.3);border-radius:3px;
354+
padding:1px 6px;margin-bottom:5px;
355+
}
356+
.def-note{
357+
font-size:9px;font-family:var(--mono);color:var(--t4);
358+
border-top:1px solid rgba(74,114,204,.12);padding-top:8px;margin-top:2px;
359+
letter-spacing:.2px;
360+
}
348361
.def-text b{color:var(--t1);font-weight:600}
349362

350363
/* ═══ CHAPTER BREAK ═══ */
@@ -626,6 +639,10 @@
626639
border:1px solid var(--bbd);border-radius:var(--rsm);font-size:9.5px;font-weight:300;
627640
color:var(--t2);line-height:1.8}
628641
.kafarat-box b{color:var(--t1);font-weight:600}
642+
.badge-legend{
643+
font-size:8.5px;font-family:var(--mono);color:var(--t4);
644+
padding:6px 14px 2px;letter-spacing:.3px;
645+
}
629646

630647
/* ═══ SAFE GRID ═══ */
631648
.safe-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@@ -936,18 +953,27 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
936953
<div class="slide" data-ch="0" data-bc="Gambaran Umum">
937954
<div class="slide-inner"><div class="slide-wrap">
938955
<div class="overview-intro glass" data-reveal>
939-
Materi ini membahas <b>8 hal</b> yang membatalkan puasa berdasarkan dalil yang kuat,
940-
<b>6 tindakan</b> yang sering dikhawatirkan namun terbukti tidak membatalkan,
941-
serta <b>3 syarat</b> yang harus hadir bersamaan agar suatu pembatal dinyatakan berlaku.
956+
Materi ini membahas klasifikasi pembatal puasa yang meliputi hal-hal yang masuk ke tubuh (seperti makan, minum, dan infus nutrisi) serta hal-hal yang keluar dari tubuh (seperti jima', muntah sengaja, dan bekam). Terdapat pula penjelasan mengenai nawazil medis (isu modern) seperti inhaler dan suntikan medis yang terbukti tidak membatalkan puasa. Seluruh pembatal tersebut hanya berlaku jika memenuhi 3 syarat utama secara bersamaan: Al-'Ilmu (tahu hukumnya), Adz-Dzikru (ingat sedang puasa), dan Al-Ikhtiyar (atas kemauan sendiri/tidak dipaksa).
942957
</div>
943958
<div class="stats-grid">
944-
<div class="stat glass" data-reveal><div class="stat-num blue" data-target="8">0</div><div class="stat-lbl">Total<br>Pembatal</div></div>
945-
<div class="stat glass" data-reveal><div class="stat-num" data-target="6">0</div><div class="stat-lbl">Tidak<br>Membatalkan</div></div>
959+
<div class="stat glass" data-reveal><div class="stat-num blue" data-target="9">0</div><div class="stat-lbl">Total<br>Pembatal</div></div>
960+
<div class="stat glass" data-reveal><div class="stat-num" data-target="9">0</div><div class="stat-lbl">Tidak<br>Membatalkan</div></div>
946961
<div class="stat glass" data-reveal><div class="stat-num" data-target="3">0</div><div class="stat-lbl">Syarat<br>Berlaku</div></div>
947962
</div>
948963
<div class="def-card glass" data-reveal>
949964
<div class="label def-label">// definisi puasa</div>
950-
<p class="def-text"><b>Puasa</b> adalah menahan diri dari segala pembatal yang telah ditetapkan syariat, dimulai sejak <b>terbit fajar shadiq</b> hingga <b>terbenam matahari</b>, disertai <b>niat ibadah</b> kepada Allah ﷻ.</p>
965+
966+
<div class="def-section">
967+
<span class="def-tag">Lughatan</span>
968+
<p class="def-text"><b>Ash-shiyam</b> — menahan diri (<em>al-imsak</em>), meninggalkan (<em>at-tark</em>), mencegah diri (<em>al-imtina'</em>). Dalil: QS Maryam: 26 — kata "puasa" digunakan untuk makna menahan diri dari berbicara.</p>
969+
</div>
970+
971+
<div class="def-section">
972+
<span class="def-tag">Syar'an</span>
973+
<p class="def-text"><b>Al-imsak bi niyyah</b> — menahan diri disertai niat ibadah, pada <b>waktu tertentu</b> (fajar shadiq → ghurub), oleh <b>orang tertentu</b> (Muslim, berakal, baligh, mampu, mukim, suci), dari <b>hal-hal tertentu</b> yang membatalkan.</p>
974+
</div>
975+
976+
<div class="def-note">Niat puasa wajib: malam hari sebelum fajar (<em>tabyitun niyah</em>)</div>
951977
</div>
952978
</div></div>
953979
</div>
@@ -961,7 +987,7 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
961987
</div>
962988
<div>
963989
<div class="ch-title" data-reveal data-type="Pembatal Puasa"></div>
964-
<div class="ch-desc" data-reveal>Delapan hal yang membatalkan puasa, dibagi dua: sesuatu yang masuk ke tubuh, dan sesuatu yang keluar dari tubuh.</div>
990+
<div class="ch-desc" data-reveal>Sembilan hal yang membatalkan puasa, dibagi dua: sesuatu yang masuk ke tubuh, dan sesuatu yang keluar dari tubuh.</div>
965991
<div class="ch-tags" data-reveal>
966992
<span class="tag tag-blue">A · Ma Yadkhulu</span>
967993
<span class="tag tag-muted">B · Ma Yakhruju</span>
@@ -1151,6 +1177,7 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
11511177
<ul>
11521178
<li><strong>Prinsip al-Jawf:</strong> Kitab ini menjadikan konsep <strong>al-jawf (rongga dalam tubuh)</strong> sebagai inti pembatalan. Segala zat yang mencapai al-jawf melalui jalur mana pun — termasuk dubur atau rongga tubuh lainnya — dihukumi membatalkan puasa.</li>
11531179
<li><strong>Supositoria dan Enema:</strong> Obat yang dimasukkan melalui dubur (suppositoria) dan cairan yang disemprotkan ke usus besar (enema) membatalkan puasa karena keduanya memasukkan materi ke rongga dalam tubuh.</li>
1180+
<li><strong>Selang Makanan (<em>Unbub</em>):</strong> Penggunaan selang makanan yang dipasang langsung ke lambung atau melalui tenggorokan (<em>nasogastric tube</em>) juga membatalkan puasa, karena memasukkan materi secara langsung ke al-jawf melalui prosedur yang disengaja.</li>
11541181
<li><strong>Pengecualian Ihlil:</strong> Memasukkan benda ke lubang kemaluan laki-laki (<em>ihlil</em>) <strong>tidak membatalkan</strong> menurut qaul mu'tamad, karena salurannya tidak terhubung ke al-jawf (lambung/usus).</li>
11551182
</ul>
11561183
</div>
@@ -1391,8 +1418,8 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
13911418
<span class="dl-source">// Syaikh Dr. Abdul Muhsin al-Qasim</span>
13921419
<ul>
13931420
<li><strong>Pendapat Syaikh:</strong> Mengikuti madzhab Hanbali — bekam <strong>membatalkan puasa</strong>, baik pembekam maupun yang dibekam. Beliau menguatkan hadits "afthara al-hajim" sebagai dalil yang valid dan tidak mansukh.</li>
1394-
<li><strong>Jawab atas Hadits Bukhari:</strong> Syaikh menjelaskan bahwa hadits "Nabi berbekam saat puasa" tidak menasakh, karena kemungkinan itu terjadi dalam kondisi safar (perjalanan) di mana Nabi dibolehkan berbuka — atau itu adalah puasa sunnah yang boleh dibatalkan.</li>
1395-
<li><strong>Fatwa Praktis:</strong> Beliau menyarankan bagi yang membutuhkan bekam untuk melakukannya di <strong>malam hari saja</strong> selama Ramadan. Jika darurat siang hari, batalkan puasa dan qada — jangan menanggung khilaf tanpa kebutuhan.</li>
1421+
<li><strong>Tarjih Kritis — Bekam Modern (Pompa Vakum):</strong> Syaikh memberikan <em>takhrij</em> penting: pembekam modern yang menggunakan <strong>pompa vakum (bukan sedotan mulut)</strong> <strong>tidak membatalkan puasanya</strong>. 'Illah (sebab) batalnya puasa bagi <em>al-hajim</em> dalam hadits adalah risiko tertelannya darah saat menghisap — dan 'illah ini telah hilang pada bekam modern yang menggunakan alat mekanis.</li>
1422+
<li><strong>Fatwa Praktis:</strong> Yang dibekam (<em>al-mahjum</em>) tetap batal karena keluarnya darah dalam jumlah besar melemahkan fisik secara nyata. Dianjurkan melakukan bekam di <strong>malam hari</strong> selama Ramadan jika memungkinkan, atau membatalkan dan mengqada jika darurat di siang hari.</li>
13961423
</ul>
13971424
</div>
13981425

@@ -1412,7 +1439,61 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
14121439
</div></div></div></div>
14131440
<div class="item-right"><div class="item-badge">BATAL*</div><div class="item-chevron"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg></div></div>
14141441
</div>
1442+
1443+
<div class="item" onclick="openSystem(this)">
1444+
<div class="item-n">05</div>
1445+
<div><div class="item-name">Darah Haid &amp; Nifas</div><div class="item-desc">Keluarnya darah haid atau nifas secara otomatis membatalkan puasa wanita.</div>
1446+
<div class="item-dalil"><div class="item-dalil-inner" style="padding:0;overflow:hidden"><div class="dalil-deck" data-deck>
1447+
<div class="dalil-track">
1448+
1449+
<!-- Card 1: Zad al-Mustaqni' -->
1450+
<div class="dalil-card">
1451+
<span class="dl-source">// Zad al-Mustaqni'</span>
1452+
<ul>
1453+
<li><strong>Hukum Dasar:</strong> Keluarnya darah haid dan nifas merupakan pembatal puasa yang disepakati (<em>mujma' 'alaih</em>). Wanita yang mengalaminya wajib menghentikan puasa dan mengqada sejumlah hari yang ditinggalkan setelah Ramadan.</li>
1454+
<li><strong>Walaupun Sesaat:</strong> Jika darah haid keluar sesaat sebelum matahari terbenam — meski hanya beberapa menit sebelum buka puasa — puasa hari itu batal dan wajib diqada. Kesempurnaan puasa mensyaratkan hari itu bebas dari haid hingga terbenamnya matahari.</li>
1455+
<li><strong>Berbeda dari Pembatal Lain:</strong> Haid dan nifas membatalkan puasa tanpa syarat <em>kesengajaan</em> (<em>al-ikhtiyar</em>) maupun <em>pengetahuan</em> (<em>al-'ilmu</em>), karena ini adalah kondisi fisiologis yang terjadi di luar kehendak.</li>
1456+
</ul>
1457+
</div>
1458+
1459+
<!-- Card 2: Buloogh al-Maram -->
1460+
<div class="dalil-card">
1461+
<span class="dl-source">// Buloogh al-Maram</span>
1462+
<ul>
1463+
<li><strong>Dalil Hadits:</strong> Nabi ﷺ bersabda: <em>"Bukankah jika wanita haid ia tidak shalat dan tidak berpuasa?"</em> — HR. Bukhari &amp; Muslim. Ini adalah dalil sharih (eksplisit) bahwa haid menjadi penghalang sah untuk puasa, bukan sekadar rukhshah.</li>
1464+
<li><strong>Nifas Disamakan:</strong> Nifas (darah pasca-melahirkan) diqiyaskan dengan haid dalam seluruh hukumnya termasuk larangan puasa, karena keduanya sama dalam sifat, asal, dan dampak syariatnya.</li>
1465+
<li><strong>Kewajiban Qada:</strong> Keduanya wajib mengqada hari-hari yang ditinggalkan — berbeda dari shalat yang tidak perlu diqada. Ini menunjukkan bahwa puasa adalah ibadah yang bisa diganti setelah Ramadan, tidak gugur sama sekali.</li>
1466+
</ul>
1467+
</div>
1468+
1469+
<!-- Card 3: Syaikh Dr. Abdul Muhsin al-Qasim -->
1470+
<div class="dalil-card">
1471+
<span class="dl-source">// Syaikh Dr. Abdul Muhsin al-Qasim</span>
1472+
<ul>
1473+
<li><strong>Tarikh Keluarnya Darah:</strong> Syaikh menegaskan bahwa yang menjadi patokan adalah <strong>waktu keluarnya darah</strong>, bukan waktu dirasakannya. Jika darah sudah keluar di siang hari — meski baru diketahui sore hari — maka puasa hari itu batal sejak darah keluar.</li>
1474+
<li><strong>Jika Darah Keluar Setelah Maghrib:</strong> Wanita yang suci saat siang hari penuh kemudian mengalami haid setelah terbenam matahari, puasanya tetap sah. Ia tidak wajib qada hari itu.</li>
1475+
<li><strong>Wanita yang Haid Menahan Diri di Siang Hari:</strong> Beliau menjelaskan bahwa wanita yang haid tidak disyariatkan untuk <em>imsak</em> (menahan makan/minum) di siang Ramadan, karena puasanya memang tidak sah. Namun ia tetap dianjurkan menjaga adab bulan Ramadan.</li>
1476+
</ul>
1477+
</div>
1478+
1479+
</div>
1480+
<div class="dalil-nav">
1481+
<button class="dalil-nav-btn" data-deck-prev>← Prev</button>
1482+
<div style="display:flex;flex-direction:column;align-items:center;gap:3px">
1483+
<div class="dalil-nav-dots">
1484+
<div class="dalil-dot active"></div>
1485+
<div class="dalil-dot"></div>
1486+
<div class="dalil-dot"></div>
1487+
</div>
1488+
<span class="dalil-counter">1 / 3</span>
1489+
</div>
1490+
<button class="dalil-nav-btn" data-deck-next>Next →</button>
1491+
</div>
1492+
</div></div></div></div>
1493+
<div class="item-right"><div class="item-badge">BATAL</div><div class="item-chevron"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg></div></div>
1494+
</div>
14151495
</div>
1496+
<div class="badge-legend" data-reveal>* Ada khilaf mu'tabar atau catatan tambahan di System Panel</div>
14161497
<div class="scroll-pill"><span>↓ geser untuk lihat semua</span></div>
14171498
</div></div>
14181499
</div>
@@ -1426,7 +1507,7 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
14261507
</div>
14271508
<div>
14281509
<div class="ch-title" data-reveal data-type="Tidak Membatalkan"></div>
1429-
<div class="ch-desc" data-reveal>Enam hal yang sering dikhawatirkan namun tidak membatalkan puasa berdasarkan dalil dan kaidah fikih yang sahih.</div>
1510+
<div class="ch-desc" data-reveal>Sembilan hal yang sering dikhawatirkan namun tidak membatalkan puasa berdasarkan dalil dan kaidah fikih yang sahih.</div>
14301511
<button class="ch-next" data-reveal data-magnet onclick="navigate(1)">Lihat Daftarnya <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg></button>
14311512
</div>
14321513
</div>
@@ -1440,11 +1521,15 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
14401521
<div class="safe-grid">
14411522
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Lupa / Tidak Sengaja</div><div class="safe-desc">Makan atau minum karena lupa sedang berpuasa.</div></div>
14421523
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Debu atau Lalat</div><div class="safe-desc">Masuk ke tenggorokan tanpa disengaja.</div></div>
1443-
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Tetes Mata / Telinga</div><div class="safe-desc">Bukan lubang yang menuju lambung.</div></div>
1444-
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Inhaler Asma</div><div class="safe-desc">Berupa uap atau gas, bukan cairan.</div></div>
1524+
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Tetes Mata / Telinga</div><div class="safe-desc">Bukan lubang alami menuju lambung — tidak batal meski kadang rasanya mencapai tenggorokan.</div></div>
1525+
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Inhaler Asma (Bakhakh)</div><div class="safe-desc">Menuju paru-paru, bukan lambung — meski masuk lewat mulut atau hidung.</div></div>
14451526
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Suntikan Insulin</div><div class="safe-desc">Non-nutrisi, tidak menggantikan makanan.</div></div>
14461527
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Mimpi Basah</div><div class="safe-desc">Keluar mani tanpa kesengajaan saat tidur.</div></div>
1528+
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Mencicipi Makanan</div><div class="safe-desc">Makruh, namun tidak batal selama tidak ada yang tertelan ke kerongkongan.</div></div>
1529+
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Siwak &amp; Pasta Gigi</div><div class="safe-desc">Tidak membatalkan selama zat yang ada tidak sengaja ditelan.</div></div>
1530+
<div class="safe-item glass" data-reveal><div class="safe-valid">Valid</div><div class="safe-name">Celak (Al-Kuuhl)</div><div class="safe-desc">Matan Zad menyebutnya membatalkan, namun tarjih Syaikh: tidak membatalkan — mata bukan lubang alami menuju lambung.</div></div>
14471531
</div>
1532+
<div class="scroll-pill"><span>↓ geser untuk lihat semua</span></div>
14481533
</div></div>
14491534
</div>
14501535

@@ -1470,9 +1555,9 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
14701555
<div class="sec-head" data-reveal><span class="sec-n">03</span><span class="sec-t">Syarat Berlaku</span><div class="sec-rule"></div></div>
14711556
<div class="val-card glass" data-reveal>
14721557
<div class="val-intro">Puasa <b>hanya batal</b> jika ketiga syarat terpenuhi bersamaan. Jika salah satu absen, puasa <b>tetap sah</b>.</div>
1473-
<div class="val-row"><div class="val-n">01</div><div><div class="val-key">'AmidanSengaja</div><div class="val-sub">Dilakukan atas kemauan sendiri, bukan karena paksaan.</div></div><div class="val-req">Wajib</div></div>
1474-
<div class="val-row"><div class="val-n">02</div><div><div class="val-key">Dzakiran — Ingat</div><div class="val-sub">Menyadari sepenuhnya bahwa dirinya sedang berpuasa.</div></div><div class="val-req">Wajib</div></div>
1475-
<div class="val-row"><div class="val-n">03</div><div><div class="val-key">'AlimanTahu Hukum</div><div class="val-sub">Mengetahui bahwa perbuatan itu membatalkan — tidak dalam keadaan jahil.</div></div><div class="val-req">Wajib</div></div>
1558+
<div class="val-row"><div class="val-n">01</div><div><div class="val-key">Al-'IlmuTahu</div><div class="val-sub">Mengetahui bahwa ia sedang berpuasa dan tahu bahwa perbuatan itu dilarang.</div></div><div class="val-req">Wajib</div></div>
1559+
<div class="val-row"><div class="val-n">02</div><div><div class="val-key">Adz-Dzikru — Ingat</div><div class="val-sub">Tidak dalam keadaan lupa. Makan/minum karena lupa tidak membatalkan puasa.</div></div><div class="val-req">Wajib</div></div>
1560+
<div class="val-row"><div class="val-n">03</div><div><div class="val-key">Al-IkhtiyarSukarela</div><div class="val-sub">Dilakukan atas kemauan sendiri, bukan karena paksaan atau tidak berdaya.</div></div><div class="val-req">Wajib</div></div>
14761561
</div>
14771562
</div></div>
14781563
</div>
@@ -2685,5 +2770,3 @@ <h1 class="hero-title" data-reveal>Fikih Puasa<span class="hero-accent">Klasifik
26852770
</script>
26862771
</body>
26872772
</html>
2688-
2689-
feat: update index.html versi terbaru dakwah publik

0 commit comments

Comments
 (0)