{"id":604,"date":"2026-03-23T13:44:41","date_gmt":"2026-03-23T13:44:41","guid":{"rendered":"https:\/\/www.jejakkebaikan.com\/?page_id=604"},"modified":"2026-03-23T13:51:06","modified_gmt":"2026-03-23T13:51:06","slug":"108-al-kauthar","status":"publish","type":"page","link":"https:\/\/www.jejakkebaikan.com\/?page_id=604","title":{"rendered":"108 Al-Kauthar"},"content":{"rendered":"\n\n<div id=\"quran-portal-wrapper\">\n  <style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Amiri:wght@400;700&family=Inter:wght@300;400;600;700&display=swap');\n\n    #quran-portal-wrapper {\n      font-family: 'Inter', sans-serif;\n      color: #333;\n      line-height: 1.6;\n      max-width: 1000px;\n      margin: 0 auto;\n      background: #fff;\n    }\n\n    \/* Hero Section *\/\n    .qp-hero {\n      background: linear-gradient(135deg, #F0F7F0 0%, #E0EFE0 100%);\n      padding: 40px 30px;\n      border-radius: 12px;\n      margin-bottom: 30px;\n      text-align: center;\n      border: 1px solid #e5ece5;\n    }\n    .qp-badge {\n      display: inline-block;\n      background: #e6f2e6;\n      color: #2D5A27;\n      padding: 5px 12px;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      margin-bottom: 15px;\n    }\n    .qp-hero h1 {\n      color: #2D5A27;\n      margin: 0 0 10px 0;\n      font-size: 32px;\n      font-weight: 700;\n    }\n    .qp-arabic {\n      font-family: 'Amiri', serif;\n      font-size: 40px;\n      color: #2D5A27;\n      display: block;\n      margin-bottom: 10px;\n    }\n    .qp-meta {\n      color: #666;\n      font-size: 14px;\n      margin-bottom: 20px;\n    }\n    .qp-btn {\n      background: #2D5A27;\n      color: #fff;\n      border: none;\n      padding: 10px 24px;\n      border-radius: 6px;\n      font-weight: 600;\n      cursor: pointer;\n      text-decoration: none;\n      transition: background 0.3s;\n      display: inline-block;\n      margin: 5px;\n    }\n    .qp-btn:hover { background: #1f401b; }\n    .qp-btn-outline {\n      background: transparent;\n      color: #2D5A27;\n      border: 2px solid #2D5A27;\n    }\n    .qp-btn-outline:hover { background: #e6f2e6; color: #2D5A27; }\n\n    \/* Tabs Navigation *\/\n    .qp-tabs {\n      display: flex;\n      border-bottom: 2px solid #eaeaea;\n      margin-bottom: 25px;\n      overflow-x: auto;\n      white-space: nowrap;\n    }\n    .qp-tab-btn {\n      background: none;\n      border: none;\n      padding: 12px 20px;\n      font-size: 15px;\n      font-weight: 600;\n      color: #666;\n      cursor: pointer;\n      border-bottom: 3px solid transparent;\n      margin-bottom: -2px;\n      transition: all 0.3s ease;\n    }\n    .qp-tab-btn:hover { color: #2D5A27; }\n    .qp-tab-btn.active {\n      color: #2D5A27;\n      border-bottom: 3px solid #2D5A27;\n    }\n\n    \/* Tab Content *\/\n    .qp-tab-content {\n      display: none;\n      padding: 20px 10px;\n      animation: fadeIn 0.4s;\n    }\n    .qp-tab-content.active { display: block; }\n    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n\n    \/* Summary Styling *\/\n    .qp-summary h2 { color: #1f401b; margin-bottom: 15px; }\n    .qp-summary h3 { color: #2D5A27; margin-top: 30px; border-bottom: 1px solid #eee; padding-bottom: 8px; font-size: 18px;}\n    .qp-summary p { margin-bottom: 15px; text-align: justify; }\n    .qp-summary ul { padding-left: 20px; margin-bottom: 15px; }\n    .qp-summary li { margin-bottom: 10px; line-height: 1.6; }\n    \n    \/* Quiz Styling *\/\n    .qp-quiz-card {\n      border: 1px solid #eaeaea;\n      border-radius: 8px;\n      padding: 25px;\n      background: #fafafa;\n    }\n    .qp-option {\n      display: block;\n      padding: 12px 15px;\n      margin-bottom: 10px;\n      background: #fff;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: 0.2s;\n    }\n    .qp-option:hover { border-color: #2D5A27; background: #F0F7F0; }\n\n    \/* Responsive Images *\/\n    .qp-img-responsive {\n      max-width: 100%;\n      height: auto;\n      border-radius: 8px;\n      box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n      display: block;\n      margin: 0 auto;\n    }\n  <\/style>\n\n    <header class=\"qp-hero\">\n        <span class=\"qp-badge\">&#x2728; Powered by AI Insights<\/span>\n        <span class=\"qp-arabic\">\u0627\u0644\u0643\u0648\u062b\u0631<\/span>\n        <h1>Surah Al-Kauthar<\/h1>\n        <div class=\"qp-meta\">Surah-108 \u2022 3 Verses \u2022 Makkiyah \u2022 &#8220;Abundance&#8221;<\/div>\n    \n        <a href=\"https:\/\/www.jejakkebaikan.com\/?page_id=605\" target=\"_blank\" class=\"qp-btn\">Read Full Tafsir<\/a>\n        \n        <a href=\"https:\/\/www.youtube.com\/watch?v=uDp16fM311I\" \n           target=\"_blank\" \n           rel=\"noopener noreferrer\" \n           class=\"qp-btn qp-btn-outline\">\n           Watch Video\n        <\/a>\n        \n        <a href=\"https:\/\/open.noice.id\/content\/0cf957bd-f0b5-4402-b5ab-e3e9fc929aad\" \n           target=\"_blank\" \n           rel=\"noopener noreferrer\" \n           class=\"qp-btn qp-btn-outline\">\n           Listen to Audio\n        <\/a>\n    <\/header>\n      \n      \n    <div class=\"qp-tabs\">\n        <button class=\"qp-tab-btn\" onclick=\"openQPTab(event, 'qp-overview')\">Ringkasan<\/button>\n        <button class=\"qp-tab-btn\" onclick=\"openQPTab(event, 'qp-mindmap')\">Mindmap<\/button>\n        <button class=\"qp-tab-btn active\" onclick=\"openQPTab(event, 'qp-infographic')\">Infografis<\/button>\n        <button class=\"qp-tab-btn\" onclick=\"openQPTab(event, 'qp-slides')\">Slide Deck<\/button>\n        <button class=\"qp-tab-btn\" onclick=\"openQPTab(event, 'qp-quiz')\">Kuis Interaktif<\/button>\n    <\/div>\n    \n    \n    <section id=\"qp-overview\" class=\"qp-tab-content qp-summary\">\n        \n    <h1>Surah Al-Kawthar: Pelajaran Tentang Kelimpahan dan Cara Menghadapi Kebencian<\/h1>\n\n    <h2>1. Saat Kita Merasa Kecil di Mata Dunia<\/h2>\n    <p>Pernahkah Anda merasa begitu kecil di tengah riuhnya dunia yang sering kali hanya memuja materi dan jumlah pengikut? Perasaan terasing dan direndahkan ini bukanlah hal baru; ia adalah beban emosional yang juga dipikul oleh Nabi Muhammad SAW ribuan tahun silam.<\/p>\n    <p>Dalam catatan sejarah, kaum musyrik Quraisy mengejek Nabi dengan sebutan <i>Abter<\/i> (orang yang terputus) tepat setelah wafatnya putra-putra beliau. Namun, di tengah kepungan kebencian itulah Allah menurunkan Surah Al-Kawthar sebagai <strong>tasliyah<\/strong> atau hiburan spiritual. Surah ini adalah sebuah manifesto kekuatan: bahwa ketika dunia mencoba menciutkan harga diri kita, Tuhan justru menjanjikan kelimpahan yang tak bertepi.<\/p>\n\n    <h2>2. Makna &#8220;Al-Kawthar&#8221;: Lebih dari Sekadar Angka<\/h2>\n    <p>Secara bahasa, &#8220;Al-Kawthar&#8221; berasal dari akar kata <i>katsrah<\/i> (banyak), namun menggunakan pola <i>fau\u2019al<\/i> yang menunjukkan <strong>mubalaghah<\/strong> atau intensifikasi. Al-Kawthar bukan sekadar &#8220;banyak&#8221;, melainkan kelimpahan yang meluap-luap dan kebaikan yang tidak terbatas (<i>infinite goodness<\/i>).<\/p>\n    <p>Kelimpahan sejati bukanlah tentang berapa banyak harta yang kita tumpuk secara kuantitatif, melainkan tentang kualitas anugerah Tuhan yang tetap abadi meski dipandang hina oleh mata yang dangkal. Anugerah ini mencakup hikmah, syafaat, hingga warisan ilmu yang tak lekang oleh zaman.<\/p>\n\n    <h2>3. Visualisasi Sungai Surga: Keindahan di Balik Deskripsi<\/h2>\n    <p>Sebagai penawar luka batin, Allah memberikan gambaran visual mengenai Al-Kawthar dalam bentuk sungai dan telaga (<i>Al-Hawdh<\/i>) di surga. Deskripsi ini berfungsi sebagai penguat jiwa bagi siapa pun yang sedang mengalami kesulitan.<\/p>\n    <blockquote>\n        &#8220;Al-Kawthar adalah sebuah sungai di surga, kedua tepinya dari emas, tempat mengalirnya di atas mutiara dan yakut, tanahnya lebih harum dari misik, airnya lebih putih dari susu dan lebih manis dari madu.&#8221; (HR. At-Tirmidzi)\n    <\/blockquote>\n\n    <h2>4. Paradoks &#8220;Abter&#8221;: Siapa yang Sebenarnya Terputus?<\/h2>\n    <p>Kaum musyrik percaya bahwa tanpa keturunan laki-laki, seseorang akan hilang dari sejarah. Namun, ayat ketiga surah ini membalikkan logika tersebut. Warisan (<i>legacy<\/i>) sejati seseorang tidak terletak pada garis keturunan biologis, melainkan pada pengaruh kebaikan yang ditinggalkan.<\/p>\n    <ul>\n        <li><strong>Nama yang Ditinggikan:<\/strong> Nama Nabi Muhammad SAW ditinggikan dalam setiap azan dan selawat, sementara para pencaci hanya diingat sebagai simbol kejahatan.<\/li>\n        <li><strong>Keberlanjutan Ajaran:<\/strong> Kekuasaan materi kaum Quraisy lenyap ditelan zaman, sedangkan ajaran Islam terus tumbuh melintasi batas waktu.<\/li>\n        <li><strong>Terputus dari Rahmat:<\/strong> Para pembenci kehilangan keberkahan sejati baik di dunia maupun di akhirat.<\/li>\n    <\/ul>\n\n    <h2>5. Formula Syukur: Salat dan Pengorbanan sebagai Respon<\/h2>\n    <p>Menanggapi kelimpahan tersebut, Allah memberikan instruksi praktis: <strong>&#8220;Maka laksanakanlah salat karena Tuhanmu dan berkurbanlah.&#8221;<\/strong> Ini adalah bentuk &#8220;pemberontakan teologis&#8221; terhadap praktik <i>riya<\/i> (pamer) kaum musyrik.<\/p>\n    <p>Instruksi ini menekankan totalitas ikhlas. Salat melatih ketundukan batin, sementara kurban (<i>An-Nahr<\/i>) melatih kita melepaskan keterikatan materi demi kepentingan sosial. Hidup dan mati kita didedikasikan sepenuhnya hanya untuk Allah, Tuhan seluruh alam.<\/p>\n\n    <hr>\n\n    <h3>6. Penutup: Membawa Kelimpahan ke Dalam Keseharian<\/h3>\n    <p>Surah Al-Kawthar mengingatkan bahwa harga diri kita tidak ditentukan oleh seberapa banyak pengikut digital yang kita miliki, melainkan oleh kualitas kebaikan yang kita bagikan. Selama kita menjaga hubungan vertikal (salat) dan semangat berbagi horisontal (kurban), kita tidak akan pernah menjadi orang yang terputus.<\/p>\n\n    <h5>Pertanyaan Renungan:<\/h5>\n    <p><i>&#8220;Setelah memahami bahwa kelimpahan sejati adalah kebaikan yang tak terhitung dari Tuhan, bagaimanakah Anda mendefinisikan kembali arti &#8216;kekayaan&#8217; dalam hidup Anda hari ini?&#8221;<\/i><\/p>\n\n    \n    <\/section>\n    \n        \n    <section id=\"qp-mindmap\" class=\"qp-tab-content\">\n        <h2>Struktur Surat Al-Kauthar<\/h2>\n        <p>Peta konsep ini menunjukkan pembagian tema utama dalam Surat.<\/p>\n        <img decoding=\"async\" src=\"http:\/\/www.jejakkebaikan.com\/wp-content\/uploads\/2026\/03\/108-Al-Kauthar-Mind-Map.png\" alt=\"Mindmap Surat Al-Kauthar\" class=\"qp-img-responsive\" style=\"max-width: 600px;\">\n    <\/section>\n    \n    <section id=\"qp-infographic\" class=\"qp-tab-content active\">\n        <img decoding=\"async\" src=\"http:\/\/www.jejakkebaikan.com\/wp-content\/uploads\/2026\/03\/108-Al-Kauthar-infograph-1-scaled.png\" alt=\"Infografis Detail\" class=\"qp-img-responsive\">\n    <\/section>\n    \n    <section id=\"qp-slides\" class=\"qp-tab-content\">\n        <h2>Deep Dive Presentation Al-Kauthar<\/h2>\n        <p>Gulir ke bawah pada tampilan di bawah untuk membaca presentasi lengkap mengenai Surat Al-Kauthar.<\/p>\n        \n        <div style=\"position: relative; width: 100%; padding-top: 56.25%; \/* 16:9 Aspect Ratio *\/ box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; background: #f9f9f9;\">\n        <iframe loading=\"lazy\" \n        src=\"https:\/\/docs.google.com\/gview?url=http:\/\/www.jejakkebaikan.com\/wp-content\/uploads\/2026\/03\/108-Al-Kauthar-slidedeck-Infinite_Abundance_compressed.pdf&#038;embedded=true\" \n        width=\"100%\" \n        height=\"100%\" \n        frameborder=\"0\" \n        style=\"position: absolute; top: 0; left: 0;\"\n        title=\"Abundance Deck PDF\">\n        <\/iframe>\n        <\/div>\n    <\/section>\n\n    \n    <section id=\"qp-quiz\" class=\"qp-tab-content\">\n        <style>\n          .qp-question-container { display: none; animation: fadeIn 0.3s; }\n          .qp-question-container.active { display: block; }\n          .qp-quiz-header { color: #666; font-size: 13px; margin-bottom: 15px; font-weight: 600; }\n          .qp-quiz-nav { display: flex; justify-content: space-between; margin-top: 25px; gap: 10px; }\n          .qp-btn-prev { background: #fff; color: #2D5A27; border: 1px solid #2D5A27; padding: 10px 24px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; }\n          .qp-btn-prev:hover { background: #f0f7f0; }\n          .qp-btn-next { background: #4F46E5; color: #fff; border: none; padding: 10px 24px; border-radius: 20px; font-weight: 600; cursor: pointer; transition: 0.2s; min-width: 100px;}\n          .qp-btn-next:hover { background: #4338ca; }\n          .qp-result-card { text-align: center; display: none; }\n          .qp-score { font-size: 48px; font-weight: 700; color: #2D5A27; margin: 10px 0; }\n        <\/style>\n    \n        <div class=\"qp-quiz-card\">\n          <form id=\"qp-quiz-form\" onsubmit=\"event.preventDefault();\">\n            \n            <div class=\"qp-question-container active\" id=\"qp-q1\">\n              <div class=\"qp-quiz-header\">1 \/ 10<\/div>\n              <h3 style=\"margin-top: 0;\">Secara linguistik dari kata dasar apakah istilah &#8216;Al-Kautsar&#8217; berasal dan apa maknanya?<\/h3>\n              <label class=\"qp-option\"><input type=\"radio\" name=\"q1\" value=\"A\"> A.Berasal dari kata &#8216;Al-Karomah&#8217; yang berarti kemuliaan seorang Nabi.<\/label>\n              <label class=\"qp-option\"><input type=\"radio\" name=\"q1\" value=\"B\"> B.Berasal dari kata &#8216;Al-Kautsar&#8217; yang berarti pemutus hubungan.<\/label>\n              <label class=\"qp-option\"><input type=\"radio\" name=\"q1\" value=\"C\"> C.Berasal dari kata &#8216;Al-Kathrah&#8217; yang berarti kelimpahan atau sesuatu yang sangat banyak.<\/label>\n              <label class=\"qp-option\"><input type=\"radio\" name=\"q1\" value=\"D\"> D.Berasal dari kata &#8216;Al-Kautsarah&#8217; yang berarti sungai kecil di padang pasir.<\/label>\n              <div class=\"qp-quiz-nav\">\n                <div><\/div> <button type=\"button\" class=\"qp-btn-next\" onclick=\"qpNextQuestion(1, event)\">Next<\/button>\n              <\/div>\n            <\/div>\n    \n          <\/form>\n    \n          <div class=\"qp-result-card\" id=\"qp-quiz-result\">\n            <h3>Kuis Selesai!<\/h3>\n            <p>Skor Anda:<\/p>\n            <div class=\"qp-score\" id=\"qp-final-score\">0 \/ 10<\/div>\n            <p id=\"qp-score-message\"><\/p>\n            <button type=\"button\" class=\"qp-btn\" onclick=\"qpResetQuiz(event)\" style=\"margin-top: 15px;\">Ulangi Kuis<\/button>\n          <\/div>\n    \n        <\/div>\n            \n        <script>\n          var qpCorrectAnswers = {\n            'q1': 'A', 'q2': 'D', 'q3': 'B', 'q4': 'C', 'q5': 'A', \n            'q6': 'B', 'q7': 'C', 'q8': 'D', 'q9': 'D', 'q10': 'A'\n          };\n    \n          function qpNextQuestion(currentNum, e) {\n            if(e) e.preventDefault();\n            var selected = document.querySelector('input[name=\"q' + currentNum + '\"]:checked');\n            if (!selected) {\n              alert(\"Silakan pilih jawaban terlebih dahulu.\");\n              return;\n            }\n            document.getElementById('qp-q' + currentNum).classList.remove('active');\n            document.getElementById('qp-q' + (currentNum + 1)).classList.add('active');\n          }\n    \n          function qpPrevQuestion(currentNum, e) {\n            if(e) e.preventDefault();\n            document.getElementById('qp-q' + currentNum).classList.remove('active');\n            document.getElementById('qp-q' + (currentNum - 1)).classList.add('active');\n          }\n    \n          function qpSubmitQuiz(e) {\n            if(e) e.preventDefault();\n            var selected = document.querySelector('input[name=\"q10\"]:checked');\n            if (!selected) {\n              alert(\"Silakan pilih jawaban terlebih dahulu.\");\n              return;\n            }\n    \n            var score = 0;\n            \/\/ Check answers manually to support older browsers\/WP setups\n            for (var i = 1; i <= 10; i++) {\n              var answer = document.querySelector('input[name=\"q' + i + '\"]:checked');\n              if (answer &#038;&#038; answer.value === qpCorrectAnswers['q' + i]) {\n                score++;\n              }\n            }\n    \n            \/\/ Hide form, show results\n            document.getElementById('qp-quiz-form').style.display = 'none';\n            document.getElementById('qp-quiz-result').style.display = 'block';\n            document.getElementById('qp-final-score').innerText = score + ' \/ 10';\n    \n            var message = \"\";\n            if (score === 10) message = \"Luar biasa! Pemahaman Anda sangat sempurna. &#x1f31f;\";\n            else if (score >= 7) message = \"Bagus sekali! Anda memahami materi ini dengan baik. &#x1f44d;\";\n            else message = \"Tetap semangat! Anda bisa membaca kembali ringkasan untuk memantapkan pemahaman.\";\n            document.getElementById('qp-score-message').innerText = message;\n          }\n    \n          function qpResetQuiz(e) {\n            if(e) e.preventDefault();\n            document.getElementById('qp-quiz-form').reset();\n            document.getElementById('qp-quiz-result').style.display = 'none';\n            document.getElementById('qp-quiz-form').style.display = 'block';\n            \n            \/\/ Hide all questions, show question 1\n            for (var i = 1; i <= 10; i++) {\n                var q = document.getElementById('qp-q' + i);\n                if(q) q.classList.remove('active');\n            }\n            document.getElementById('qp-q1').classList.add('active');\n          }\n        <\/script>\n    <\/section>\n     \n\n  <script>\n    function openQPTab(evt, tabName) {\n      \/\/ Hide all tab content\n      var i, tabcontent, tablinks;\n      tabcontent = document.getElementsByClassName(\"qp-tab-content\");\n      for (i = 0; i < tabcontent.length; i++) {\n        tabcontent[i].style.display = \"none\";\n        tabcontent[i].classList.remove(\"active\");\n      }\n      \n      \/\/ Remove active class from all buttons\n      tablinks = document.getElementsByClassName(\"qp-tab-btn\");\n      for (i = 0; i < tablinks.length; i++) {\n        tablinks[i].classList.remove(\"active\");\n      }\n      \n      \/\/ Show the current tab, and add an \"active\" class to the button that opened the tab\n      document.getElementById(tabName).style.display = \"block\";\n      \/\/ Small timeout to allow display:block to apply before animating opacity\n      setTimeout(function() {\n        document.getElementById(tabName).classList.add(\"active\");\n      }, 10);\n      evt.currentTarget.classList.add(\"active\");\n    }\n  <\/script>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>&#x2728; Powered by AI Insights \u0627\u0644\u0643\u0648\u062b\u0631 Surah Al-Kauthar Surah-108 \u2022 3 Verses \u2022 Makkiyah \u2022 &#8220;Abundance&#8221; Read Full Tafsir Watch Video Listen to Audio Ringkasan Mindmap Infografis Slide Deck Kuis Interaktif Surah Al-Kawthar: Pelajaran Tentang Kelimpahan dan Cara Menghadapi Kebencian 1. Saat Kita Merasa Kecil di Mata Dunia Pernahkah Anda merasa begitu kecil di tengah [&hellip;]<\/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-604","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.jejakkebaikan.com\/index.php?rest_route=\/wp\/v2\/pages\/604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jejakkebaikan.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jejakkebaikan.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jejakkebaikan.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jejakkebaikan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=604"}],"version-history":[{"count":2,"href":"https:\/\/www.jejakkebaikan.com\/index.php?rest_route=\/wp\/v2\/pages\/604\/revisions"}],"predecessor-version":[{"id":613,"href":"https:\/\/www.jejakkebaikan.com\/index.php?rest_route=\/wp\/v2\/pages\/604\/revisions\/613"}],"wp:attachment":[{"href":"https:\/\/www.jejakkebaikan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}