{"id":27,"date":"2026-03-02T02:53:40","date_gmt":"2026-03-02T02:53:40","guid":{"rendered":"https:\/\/batam.dtpeduli.id\/?page_id=27"},"modified":"2026-03-02T08:05:22","modified_gmt":"2026-03-02T08:05:22","slug":"home","status":"publish","type":"page","link":"https:\/\/batam.dtpeduli.id\/","title":{"rendered":"Home"},"content":{"rendered":"\n<!-- DT PEDULI BATAM - WordPress Complete Version -->\n<style>\n    \/* Reset untuk menghindari konflik dengan tema WordPress *\/\n    .dt-container * {\n        box-sizing: border-box;\n    }\n    \n    .dt-container {\n        font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n        background: #f0f4fa;\n        color: #1e293b;\n        padding-bottom: 70px;\n        max-width: 32rem;\n        margin: 0 auto;\n        position: relative;\n    }\n    \n    \/* Glass Header *\/\n    .dt-glass { \n        background: rgba(255,255,255,0.96); \n        backdrop-filter: blur(12px); \n        -webkit-backdrop-filter: blur(12px); \n    }\n\n    \/* Bottom Nav *\/\n    .dt-bnav {\n        position: fixed !important;\n        bottom: 0 !important;\n        left: 50% !important;\n        transform: translateX(-50%) !important;\n        z-index: 9999 !important;\n        background: rgba(255,255,255,.97) !important;\n        backdrop-filter: blur(12px) !important;\n        border-top: 1px solid #e5e7eb !important;\n        height: 64px !important;\n        display: flex !important;\n        align-items: stretch !important;\n        box-shadow: 0 -4px 20px rgba(0,0,0,.06) !important;\n        max-width: 32rem !important;\n        width: 100% !important;\n    }\n    \n    .dt-bnav-item {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 2px;\n        color: #9ca3af;\n        font-size: 10px;\n        font-weight: 600;\n        text-decoration: none !important;\n        background: none;\n        border: none;\n        cursor: pointer;\n        transition: color .2s;\n    }\n    \n    .dt-bnav-item.active,\n    .dt-bnav-item:hover { \n        color: #FF7B0F !important; \n    }\n    \n    .dt-bnav-item i { \n        font-size: 18px; \n        margin-bottom: 2px; \n    }\n\n    .dt-bnav-donate-btn {\n        width: 48px !important;\n        height: 48px !important;\n        border-radius: 50% !important;\n        background: linear-gradient(135deg, #FF7B0F, #ff9b3f) !important;\n        color: #fff !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        font-size: 20px !important;\n        border: 4px solid #fff !important;\n        box-shadow: 0 4px 12px rgba(255,123,15,.4) !important;\n        transform: translateY(-15px) !important;\n        transition: transform .2s !important;\n        text-decoration: none !important;\n    }\n    \n    .dt-bnav-donate-btn:hover { \n        transform: translateY(-15px) scale(1.05) !important; \n    }\n\n    \/* Icon Animation *\/\n    .dt-icon-btn { \n        transition: transform 0.2s ease, box-shadow 0.2s ease; \n        cursor: pointer;\n    }\n    \n    .dt-icon-btn:active { \n        transform: scale(0.95); \n    }\n\n    \/* MODAL OVERLAY - Maximum Priority *\/\n    .dt-modal-overlay {\n        display: none !important;\n        position: fixed !important;\n        top: 0 !important;\n        left: 0 !important;\n        right: 0 !important;\n        bottom: 0 !important;\n        width: 100vw !important;\n        height: 100vh !important;\n        z-index: 2147483647 !important;\n        background-color: rgba(0, 0, 0, 0.6) !important;\n        backdrop-filter: blur(8px) !important;\n        -webkit-backdrop-filter: blur(8px) !important;\n        align-items: center !important;\n        justify-content: center !important;\n        padding: 1rem !important;\n        overflow-y: auto !important;\n        margin: 0 !important;\n    }\n    \n    .dt-modal-overlay.dt-active {\n        display: flex !important;\n    }\n    \n    .dt-modal-content {\n        background: white !important;\n        border-radius: 24px !important;\n        width: 100% !important;\n        max-width: 28rem !important;\n        max-height: 90vh !important;\n        display: flex !important;\n        flex-direction: column !important;\n        overflow: hidden !important;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;\n        position: relative !important;\n        z-index: 2147483647 !important;\n        margin: auto !important;\n    }\n\n    \/* Toggle Styles *\/\n    .dt-toggle-label { \n        position: relative; \n        display: inline-block; \n        width: 44px; \n        height: 24px; \n    }\n    \n    .dt-toggle-label input { \n        opacity: 0; \n        width: 0; \n        height: 0; \n    }\n    \n    .dt-slider { \n        position: absolute; \n        cursor: pointer; \n        top: 0; \n        left: 0; \n        right: 0; \n        bottom: 0; \n        background-color: #ccc; \n        transition: .4s; \n        border-radius: 34px; \n    }\n    \n    .dt-slider:before { \n        position: absolute; \n        content: \"\"; \n        height: 18px; \n        width: 18px; \n        left: 3px; \n        bottom: 3px; \n        background-color: white; \n        transition: .4s; \n        border-radius: 50%; \n    }\n    \n    input:checked + .dt-slider { \n        background-color: #FF7B0F; \n    }\n    \n    input:checked + .dt-slider:before { \n        transform: translateX(20px); \n    }\n\n    \/* Input Styles *\/\n    .dt-input-wrapper { \n        position: relative; \n    }\n    \n    .dt-input-icon { \n        position: absolute; \n        left: 0; \n        top: 50%; \n        transform: translateY(-50%); \n        color: #9ca3af; \n    }\n    \n    .dt-input-field { \n        width: 100%; \n        border: 0; \n        border-bottom: 2px solid #d1d5db; \n        padding: 0.5rem 0.5rem 0.5rem 2.5rem; \n        background-color: transparent; \n        transition: border-color 0.3s; \n    }\n    \n    .dt-input-field:focus { \n        outline: none !important; \n        border-color: #FF7B0F !important; \n    }\n\n    \/* Tab Styles *\/\n    .dt-tab-active { \n        color: #FF7B0F !important; \n        font-weight: 700 !important; \n        border-bottom-color: #FF7B0F !important; \n    }\n    \n    .dt-tab-active svg { \n        color: #FF7B0F !important; \n    }\n    \n    .dt-tab-inactive { \n        border-bottom-color: transparent !important; \n        color: #6b7280 !important; \n    }\n    \n    .dt-tab-inactive:hover { \n        color: #FF7B0F !important; \n    }\n    \n    \/* Prevent WordPress theme override *\/\n    .dt-container a {\n        text-decoration: none !important;\n    }\n    \n    .dt-container button {\n        cursor: pointer !important;\n    }\n    \n    \/* QR Code Container *\/\n    .dt-qr-container {\n        display: inline-block;\n    }\n<\/style>\n\n<!-- Pastikan dependencies dimuat -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n\n<script>\nif (typeof tailwind !== 'undefined') {\n    tailwind.config = {\n        theme: {\n            extend: {\n                fontFamily: { sans: ['Sora', 'sans-serif'] }\n            }\n        }\n    }\n}\n<\/script>\n\n<!-- Main Container -->\n<div class=\"dt-container max-w-lg mx-auto bg-white shadow-xl min-h-screen relative overflow-hidden\">\n\n    <!-- HEADER -->\n    <header class=\"sticky top-0 z-40 dt-glass border-b border-gray-100\">\n        <div class=\"flex items-center justify-between px-4 py-3\">\n            <div class=\"flex items-center gap-2\">\n                <img decoding=\"async\" src=\"https:\/\/erp.dtpeduli.org\/assets\/2025-10\/251021JC10T2.png\" alt=\"DT Peduli\" class=\"h-8 object-contain\">\n                <span class=\"font-bold text-sm\" style=\"color:#1845A1\">Batam<\/span>\n            <\/div>\n            <div class=\"flex items-center gap-2\">\n                <a href=\"https:\/\/wa.me\/628117073075\" target=\"_blank\"\n                   class=\"flex items-center gap-1.5 bg-orange-50 border border-orange-200 px-3 py-1.5 rounded-full text-xs font-bold transition-colors hover:bg-orange-100\" style=\"color:#FF7B0F\">\n                    <i class=\"fa-solid fa-headset text-sm\"><\/i> Bantuan\n                <\/a>\n            <\/div>\n        <\/div>\n        <div class=\"px-4 py-2\" style=\"background:linear-gradient(90deg,#1845A1,#0095D9)\">\n             <p class=\"text-white text-xs font-semibold text-center tracking-wide\">\n                 Pilih program kebaikan Anda hari ini \ud83e\udd32\n             <\/p>\n        <\/div>\n    <\/header>\n\n    <!-- QUICK ACTIONS -->\n    <section class=\"px-4 py-5 bg-white border-b border-gray-100\">\n        <div class=\"grid grid-cols-4 gap-2\">\n            \n            <button onclick=\"dtPeduliOpenDonasiCepat()\" class=\"dt-icon-btn flex flex-col items-center gap-2 group bg-transparent border-none\">\n                <div class=\"w-12 h-12 rounded-2xl flex items-center justify-center shadow-sm border border-orange-200\" style=\"background:linear-gradient(135deg,#FF7B0F,#ff9b3f);color:#fff\">\n                    <i class=\"fa-solid fa-qrcode text-xl\"><\/i>\n                <\/div>\n                <span class=\"text-[9px] font-bold text-center text-gray-700 leading-tight\">Donasi<br>Cepat<\/span>\n            <\/button>\n\n            <a href=\"https:\/\/wa.me\/628117073075?text=Assalamu'alaikum,%20saya%20ingin%20menggunakan%20layanan%20Jemput%20Zakat\/Donasi%20DT%20Peduli%20Batam.\" target=\"_blank\" class=\"dt-icon-btn flex flex-col items-center gap-2 group\">\n                <div class=\"w-12 h-12 rounded-2xl flex items-center justify-center shadow-sm border border-orange-100\" style=\"background:#fff7ed;color:#FF7B0F\">\n                    <i class=\"fa-solid fa-hand-holding-heart text-xl\"><\/i>\n                <\/div>\n                <span class=\"text-[9px] font-bold text-center text-gray-700 leading-tight\">Jemput<br>Donasi<\/span>\n            <\/a>\n\n            <button onclick=\"dtPeduliOpenKalkulator()\" class=\"dt-icon-btn flex flex-col items-center gap-2 group bg-transparent border-none\">\n                <div class=\"w-12 h-12 rounded-2xl flex items-center justify-center shadow-sm border border-orange-100\" style=\"background:#fff7ed;color:#FF7B0F\">\n                    <i class=\"fa-solid fa-calculator text-xl\"><\/i>\n                <\/div>\n                <span class=\"text-[9px] font-bold text-center text-gray-700 leading-tight\">Kalkulator<br>Zakat<\/span>\n            <\/button>\n\n            <a href=\"https:\/\/dtpeduli.org\/rekening\" target=\"_blank\" class=\"dt-icon-btn flex flex-col items-center gap-2 group\">\n                <div class=\"w-12 h-12 rounded-2xl flex items-center justify-center shadow-sm border border-green-100\" style=\"background:#f0fdf4;color:#16a34a\">\n                    <i class=\"fa-solid fa-building-columns text-xl\"><\/i>\n                <\/div>\n                <span class=\"text-[9px] font-bold text-center text-gray-700 leading-tight\">Rekening<br>Donasi<\/span>\n            <\/a>\n\n        <\/div>\n    <\/section>\n\n    <!-- IFRAME DONASI -->\n    <section class=\"w-full bg-gray-50 pt-3 pb-4\">\n        <div class=\"px-3\">\n            <iframe \n                src=\"https:\/\/ziswafhub.innovasia.id\/embed\/Fkh90Nb9iA\" \n                width=\"100%\" \n                height=\"700\" \n                frameborder=\"0\" \n                style=\"border:none; overflow:hidden; border-radius:16px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); background: #fff;\">\n            <\/iframe>\n        <\/div>\n    <\/section>\n\n    <!-- FOOTER -->\n    <footer style=\"background: linear-gradient(180deg, #002B45 0%, #001220 100%)\" class=\"text-white mt-4\">\n        <div style=\"background: linear-gradient(135deg, #B85501 0%, #D97B40 100%)\">\n            <div class=\"px-5 py-5 flex flex-col sm:flex-row items-center justify-between gap-4\">\n                <div class=\"flex items-center gap-3\">\n                    <i class=\"fa-solid fa-heart text-white text-xl flex-shrink-0\"><\/i>\n                    <p class=\"text-white font-bold text-sm\">Hadirkan manfaat untuk sesama hari ini<\/p>\n                <\/div>\n                <button onclick=\"window.scrollTo(0,0)\" class=\"bg-white text-[#B85501] hover:bg-orange-50 px-6 py-2.5 rounded-xl transition-all flex-shrink-0 text-sm font-bold w-full sm:w-auto\">\n                    Donasi Sekarang\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"px-5 py-8 pb-24\">\n            <div class=\"mb-8\">\n                <img decoding=\"async\" src=\"https:\/\/erp.dtpeduli.org\/assets\/2025-06\/2506183HM7B6.png\" alt=\"DT Peduli\" class=\"h-10 object-contain mb-4\" onerror=\"this.style.display='none'\">\n                <p class=\"text-white\/50 text-xs leading-relaxed mb-3\">LEMBAGA AMIL ZAKAT NASIONAL DAARUT TAUHID<\/p>\n                <div class=\"flex items-center gap-2\">\n                    <div class=\"w-1.5 h-1.5 rounded-full bg-[#B85501]\"><\/div>\n                    <span class=\"text-white\/40 text-[10px]\">SK KEMENAG RI NO 1200 TAHUN 2022<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"grid grid-cols-2 gap-x-4 gap-y-8\">\n                <div>\n                    <h4 class=\"text-white mb-4 font-bold text-sm\">Navigasi<\/h4>\n                    <ul class=\"space-y-3\">\n                        <li>\n                            <button onclick=\"window.scrollTo(0,0)\" class=\"text-white\/60 hover:text-[#FFBFB1] text-xs transition-colors flex items-center gap-2 group\">\n                                <span class=\"w-1 h-1 rounded-full bg-white\/20 group-hover:bg-[#FFBFB1] transition-colors\"><\/span> Beranda\n                            <\/button>\n                        <\/li>\n                        <li>\n                            <button onclick=\"dtPeduliOpenKalkulator()\" class=\"text-white\/60 hover:text-[#FFBFB1] text-xs transition-colors flex items-center gap-2 group\">\n                                <span class=\"w-1 h-1 rounded-full bg-white\/20 group-hover:bg-[#FFBFB1] transition-colors\"><\/span> Kalkulator Zakat\n                            <\/button>\n                        <\/li>\n                        <li>\n                            <a href=\"https:\/\/dtpeduli.org\/laporan\" target=\"_blank\" class=\"text-white\/60 hover:text-[#FFBFB1] text-xs transition-colors flex items-center gap-2 group\">\n                                <span class=\"w-1 h-1 rounded-full bg-white\/20 group-hover:bg-[#FFBFB1] transition-colors\"><\/span> Laporan\n                            <\/a>\n                        <\/li>\n                    <\/ul>\n                <\/div>\n\n                <div>\n                    <h4 class=\"text-white mb-4 font-bold text-sm\">Rekening<\/h4>\n                    <div class=\"bg-white\/5 border border-white\/10 rounded-xl p-3\">\n                        <p class=\"text-white\/50 text-[9px] mb-1.5 uppercase tracking-wider\">Zakat &#038; Infak<\/p>\n                        <p class=\"text-white\/40 text-[9px] mb-0.5\">BSI<\/p>\n                        <p class=\"text-[#B85501] font-extrabold text-[15px] tracking-wide leading-tight\">7460000040<\/p>\n                        <p class=\"text-white\/40 text-[9px] mt-0.5\">a.n Daarut tauhiid<\/p>\n                    <\/div>\n                <\/div>\n\n                <div>\n                    <h4 class=\"text-white mb-4 font-bold text-sm\">Kontak<\/h4>\n                    <div class=\"space-y-4\">\n                        <div class=\"flex items-start gap-2.5\">\n                            <i class=\"fa-solid fa-phone text-[#B85501] text-xs mt-0.5\"><\/i>\n                            <div>\n                                <p class=\"text-white text-xs font-medium\">0811 707 3075<\/p>\n                                <p class=\"text-white\/40 text-[9px]\">WhatsApp<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"flex items-start gap-2.5\">\n                            <i class=\"fa-solid fa-envelope text-[#B85501] text-xs mt-0.5\"><\/i>\n                            <div class=\"break-words\">\n                                <p class=\"text-white text-xs font-medium\">info@<wbr>dtpeduli.org<\/p>\n                                <p class=\"text-white\/40 text-[9px]\">Email<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div>\n                    <h4 class=\"text-white mb-4 font-bold text-sm\">Alamat<\/h4>\n                    <div class=\"flex items-start gap-2.5 mb-5\">\n                        <i class=\"fa-solid fa-location-dot text-[#B85501] text-xs mt-0.5\"><\/i>\n                        <div>\n                            <p class=\"text-white text-[11px] leading-snug\">Komp. Pesantren Daarut Tauhiid<br>Tembesi, Sagulung<br>Batam<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <p class=\"text-white\/50 text-[9px] mb-2 uppercase tracking-wider font-semibold\">Ikuti Kami<\/p>\n                    <div class=\"flex gap-2 flex-wrap\">\n                        <a href=\"#\" class=\"w-8 h-8 bg-white\/10 rounded-lg flex items-center justify-center transition-all hover:bg-gradient-to-br hover:from-[#B85501] hover:to-[#D97B40] text-white\/60 hover:text-white text-xs\">\n                            <i class=\"fa-brands fa-instagram\"><\/i>\n                        <\/a>\n                        <a href=\"#\" class=\"w-8 h-8 bg-white\/10 rounded-lg flex items-center justify-center transition-all hover:bg-gradient-to-br hover:from-[#B85501] hover:to-[#D97B40] text-white\/60 hover:text-white text-xs\">\n                            <i class=\"fa-brands fa-facebook\"><\/i>\n                        <\/a>\n                        <a href=\"#\" class=\"w-8 h-8 bg-white\/10 rounded-lg flex items-center justify-center transition-all hover:bg-gradient-to-br hover:from-[#B85501] hover:to-[#D97B40] text-white\/60 hover:text-white text-xs\">\n                            <i class=\"fa-brands fa-youtube\"><\/i>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"border-t border-white\/10\">\n            <div class=\"px-5 py-5 flex flex-col items-center gap-3 text-[10px] text-white\/30 text-center\">\n                <p>\u00a9 2026 DT Peduli. All rights reserved.<\/p>\n                <div class=\"flex items-center justify-center gap-4 flex-wrap\">\n                    <a href=\"#\" class=\"hover:text-white\/60 transition-colors\">Privasi<\/a>\n                    <a href=\"#\" class=\"hover:text-white\/60 transition-colors\">Syarat &#038; Ketentuan<\/a>\n                    <a href=\"https:\/\/dtpeduli.org\" target=\"_blank\" rel=\"noreferrer\" class=\"hover:text-white\/60 transition-colors flex items-center gap-1\">\n                        dtpeduli.org <i class=\"fa-solid fa-arrow-up-right-from-square text-[8px]\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n    <!-- BOTTOM NAV -->\n    <nav class=\"dt-bnav\">\n        <a href=\"#\" class=\"dt-bnav-item active\">\n            <i class=\"fa-solid fa-house\"><\/i>\n            <span>Home<\/span>\n        <\/a>\n        <a href=\"https:\/\/dtpeduli.org\/laporan\" target=\"_blank\" class=\"dt-bnav-item\">\n            <i class=\"fa-solid fa-bullhorn\"><\/i>\n            <span>Laporan<\/span>\n        <\/a>\n        \n        <div style=\"flex:1; display:flex; justify-content:center;\">\n            <a href=\"#\" onclick=\"window.scrollTo(0,0); return false;\" class=\"dt-bnav-donate-btn\">\n                <i class=\"fa-solid fa-heart\"><\/i>\n            <\/a>\n        <\/div>\n\n        <a href=\"https:\/\/wa.me\/628117073075\" target=\"_blank\" class=\"dt-bnav-item\">\n            <i class=\"fa-brands fa-whatsapp\"><\/i>\n            <span>Chat<\/span>\n        <\/a>\n        <button onclick=\"dtPeduliOpenKalkulator()\" class=\"dt-bnav-item\">\n            <i class=\"fa-solid fa-coins\"><\/i>\n            <span>Zakat<\/span>\n        <\/button>\n    <\/nav>\n\n<\/div>\n\n<!-- MODAL KALKULATOR ZAKAT - Lengkap dengan semua konten -->\n<div id=\"dt-modal-kalkulator\" class=\"dt-modal-overlay\">\n    <div class=\"dt-modal-content\">\n        <div class=\"px-5 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50 flex-shrink-0\">\n            <div class=\"flex items-center gap-2\">\n                <i class=\"fa-solid fa-calculator\" style=\"color:#FF7B0F\"><\/i>\n                <h3 class=\"font-extrabold text-sm\" style=\"color:#1845A1\">Kalkulator Zakat<\/h3>\n            <\/div>\n            <button onclick=\"dtPeduliCloseKalkulator()\" class=\"w-7 h-7 bg-white border border-gray-200 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100\">\n                <i class=\"fa-solid fa-xmark text-xs\"><\/i>\n            <\/button>\n        <\/div>\n\n        <!-- Step 1: Calculator Form -->\n        <div id=\"kz-step-1\" class=\"overflow-y-auto p-4 sm:p-5\">\n            <p class=\"text-gray-500 mb-5 text-xs text-center\">Hitung kewajiban zakat Anda dengan mudah dan akurat.<\/p>\n            \n            <!-- Tabs Navigation -->\n            <div class=\"border-b border-gray-200 mb-6\">\n                <nav class=\"flex justify-around -mb-px\" aria-label=\"Tabs\">\n                    <button data-tab=\"penghasilan\" class=\"flex flex-col items-center gap-1.5 tab-penghasilan py-3 px-1 border-b-[3px] text-[10px] font-medium dt-tab-active\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"><\/path><\/svg>\n                        <span>Penghasilan<\/span>\n                    <\/button>\n                    <button data-tab=\"emas\" class=\"flex flex-col items-center gap-1.5 tab-emas py-3 px-1 border-b-[3px] text-[10px] font-medium dt-tab-inactive\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"2\"\/><path d=\"M6 12h12\"\/><\/svg>\n                        <span>Emas<\/span>\n                    <\/button>\n                    <button data-tab=\"investasi\" class=\"flex flex-col items-center gap-1.5 tab-investasi py-3 px-1 border-b-[3px] text-[10px] font-medium dt-tab-inactive\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v18h18\"\/><path d=\"m19 9-5 5-4-4-3 3\"\/><\/svg>\n                        <span>Investasi<\/span>\n                    <\/button>\n                    <button data-tab=\"perniagaan\" class=\"flex flex-col items-center gap-1.5 tab-perniagaan py-3 px-1 border-b-[3px] text-[10px] font-medium dt-tab-inactive\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"\/><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"\/><path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"\/><path d=\"M2 7h20\"\/><path d=\"M22 7L12 17 2 7\"\/><\/svg>\n                        <span>Perniagaan<\/span>\n                    <\/button>\n                <\/nav>\n            <\/div>\n            \n            <!-- KONTEN PENGHASILAN -->\n            <div id=\"content-penghasilan\" class=\"tab-content text-sm\">\n                <div class=\"flex items-center justify-center space-x-6 mb-5\">\n                    <label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"periode_penghasilan\" value=\"bulan\" class=\"form-radio text-[#FF7B0F] focus:ring-[#FF7B0F]\" checked><span class=\"text-gray-700\">Perbulan<\/span><\/label>\n                    <label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"periode_penghasilan\" value=\"tahun\" class=\"form-radio text-[#FF7B0F] focus:ring-[#FF7B0F]\"><span class=\"text-gray-700\">Pertahun<\/span><\/label>\n                <\/div>\n                <div class=\"space-y-4\">\n                    <div><label for=\"penghasilan_gaji\" class=\"lbl text-gray-500 text-xs font-semibold\">Pendapatan Gaji<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 12h.01\"\/><path d=\"M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/><path d=\"M22 13v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3c0-1.18.37-2.29 1-3.32\"\/><rect width=\"20\" height=\"14\" x=\"2\" y=\"6\" rx=\"2\"\/><\/svg><input type=\"text\" id=\"penghasilan_gaji\" class=\"dt-input-field input-currency text-sm font-semibold\" placeholder=\"0\"><\/div><\/div>\n                    <div><label for=\"penghasilan_lain\" class=\"lbl text-gray-500 text-xs font-semibold\">Penghasilan Lain (bonus,thr,dll)<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14\"\/><path d=\"M5 12h14\"\/><\/svg><input type=\"text\" id=\"penghasilan_lain\" class=\"dt-input-field input-currency text-sm font-semibold\" placeholder=\"0\"><\/div><\/div>\n                    <div id=\"pengeluaran-section\" class=\"space-y-4\">\n                        <div class=\"border-t pt-4 mt-2\">\n                            <h4 class=\"text-center text-gray-500 mb-3 text-xs font-semibold uppercase\">Pengeluaran<\/h4>\n                            <div><label for=\"penghasilan_kebutuhan\" class=\"lbl text-gray-500 text-xs font-semibold\">Kebutuhan Pokok<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22v-6\"\/><path d=\"M12 8V2\"\/><path d=\"M4.93 4.93l4.24 4.24\"\/><path d=\"M14.83 14.83l4.24 4.24\"\/><path d=\"M17.66 6.34l-1.41 1.41\"\/><path d=\"M6.34 17.66l-1.41 1.41\"\/><path d=\"M22 12h-6\"\/><path d=\"M8 12H2\"\/><path d=\"M4.93 19.07l4.24-4.24\"\/><path d=\"M14.83 9.17l4.24-4.24\"\/><\/svg><input type=\"text\" id=\"penghasilan_kebutuhan\" class=\"dt-input-field input-currency text-sm font-semibold\" placeholder=\"0\"><\/div><\/div>\n                            <div class=\"mt-4\"><label for=\"penghasilan_hutang\" class=\"lbl text-gray-500 text-xs font-semibold\">Hutang\/Cicilan<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 5-3-3-3 3\"\/><path d=\"m15 19 3 3 3-3\"\/><path d=\"M4 11v1a2 2 0 0 0 2 2h4a2 2 0 0 1 2 2v1\"\/><path d=\"M12 5V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1\"\/><\/svg><input type=\"text\" id=\"penghasilan_hutang\" class=\"dt-input-field input-currency text-sm font-semibold\" placeholder=\"0\"><\/div><\/div>\n                            <div class=\"mt-4\"><label for=\"penghasilan_pengeluaran_lain\" class=\"lbl text-gray-500 text-xs font-semibold\">Pengeluaran Lainnya<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"18\" x2=\"8\" y2=\"2\"\/><line x1=\"4\" y1=\"6\" x2=\"8\" y2=\"6\"\/><line x1=\"16\" y1=\"4\" x2=\"16\" y2=\"8\"\/><path d=\"M18 6h-2c-2.2 0-4 1.8-4 4v0c0 2.2 1.8 4 4 4h2\"\/><\/svg><input type=\"text\" id=\"penghasilan_pengeluaran_lain\" class=\"dt-input-field input-currency text-sm font-semibold\" placeholder=\"0\"><\/div><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"mt-6 flex justify-center items-center gap-3 text-[10px] text-gray-600\">\n                    <span id=\"label-metode-netto\" class=\"font-bold text-[#FF7B0F]\">Pendapatan Bersih (Netto)<\/span>\n                    <label class=\"dt-toggle-label\"><input type=\"checkbox\" id=\"metode-toggle\"><span class=\"dt-slider\"><\/span><\/label>\n                    <span id=\"label-metode-bruto\">Pendapatan Kotor (Bruto)<\/span>\n                <\/div>\n                <p id=\"metode-info\" class=\"text-center text-[10px] text-gray-400 mt-1.5\">Perhitungan zakat dari pendapatan bersih (setelah dikurangi pengeluaran).<\/p>\n                <div class=\"mt-3 text-center\">\n                    <div class=\"inline-flex justify-center items-center gap-3 text-[10px] text-gray-600\">\n                        <span id=\"label-kalender-hijriah-penghasilan\" class=\"font-bold text-[#FF7B0F]\">Hijriah (2.5%)<\/span>\n                        <label class=\"dt-toggle-label\"><input type=\"checkbox\" id=\"kalender-toggle-penghasilan\" class=\"kalender-toggle\"><span class=\"dt-slider\"><\/span><\/label>\n                        <span id=\"label-kalender-masehi-penghasilan\">Masehi (2.577%)<\/span>\n                    <\/div>\n                    <p class=\"text-[10px] text-gray-400 mt-1\">Berdasarkan Taklimat DPS DT Peduli<\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- KONTEN EMAS -->\n            <div id=\"content-emas\" class=\"tab-content hidden text-sm\">\n                <div class=\"flex justify-center items-center gap-4 text-xs text-gray-600 mb-5\">\n                    <span id=\"label-emas-rupiah\">Nilai (Rp)<\/span>\n                    <label class=\"dt-toggle-label\"><input type=\"checkbox\" id=\"emas-metode-toggle\"><span class=\"dt-slider\"><\/span><\/label>\n                    <span id=\"label-emas-gram\" class=\"font-bold text-[#FF7B0F]\">Berat (Gram)<\/span>\n                <\/div>\n                <div id=\"emas-gram-section\" class=\"space-y-4\">\n                    <div><label for=\"emas_gram\" class=\"lbl text-gray-500 text-xs font-semibold\">Jumlah Emas (gram)<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7-3 9-6 13S6 15 6 8z\"\/><circle cx=\"12\" cy=\"8\" r=\"1\"\/><\/svg><input type=\"number\" id=\"emas_gram\" class=\"dt-input-field font-semibold\" placeholder=\"0\"><\/div><\/div>\n                    <div class=\"text-center text-xs text-gray-500\">Estimasi Nilai: <span id=\"emas-gram-value\" class=\"font-bold\">Rp 0<\/span><\/div>\n                <\/div>\n                <div id=\"emas-rupiah-section\" class=\"space-y-4 hidden\">\n                    <div><label for=\"emas_nilai\" class=\"lbl text-gray-500 text-xs font-semibold\">Total Nilai Emas (Rp)<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 12h.01\"\/><path d=\"M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/><path d=\"M22 13v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3c0-1.18.37-2.29 1-3.32\"\/><rect width=\"20\" height=\"14\" x=\"2\" y=\"6\" rx=\"2\"\/><\/svg><input type=\"text\" id=\"emas_nilai\" class=\"input-currency dt-input-field font-semibold\" placeholder=\"0\"><\/div><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- KONTEN INVESTASI -->\n            <div id=\"content-investasi\" class=\"tab-content hidden text-sm\">\n                <div class=\"flex items-center justify-center space-x-6 mb-5\"><label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"periode_investasi\" value=\"bulan\" class=\"form-radio text-[#FF7B0F] focus:ring-[#FF7B0F]\" checked><span class=\"text-gray-700\">Perbulan<\/span><\/label><label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"periode_investasi\" value=\"tahun\" class=\"form-radio text-[#FF7B0F] focus:ring-[#FF7B0F]\"><span class=\"text-gray-700\">Pertahun<\/span><\/label><\/div>\n                <div class=\"space-y-4\">\n                    <div><label for=\"investasi_pendapatan\" class=\"lbl text-gray-500 text-xs font-semibold\">Hasil Investasi<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"\/><polyline points=\"5 12 12 5 19 12\"\/><\/svg><input type=\"text\" id=\"investasi_pendapatan\" class=\"dt-input-field input-currency font-semibold\" placeholder=\"0\"><\/div><\/div>\n                    <div><label for=\"investasi_operasional\" class=\"lbl text-gray-500 text-xs font-semibold\">Biaya Operasional<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 5-3-3-3 3\"\/><path d=\"m15 19 3 3 3-3\"\/><path d=\"M4 11v1a2 2 0 0 0 2 2h4a2 2 0 0 1 2 2v1\"\/><path d=\"M12 5V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1\"\/><\/svg><input type=\"text\" id=\"investasi_operasional\" class=\"dt-input-field input-currency font-semibold\" placeholder=\"0\"><\/div><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- KONTEN PERNIAGAAN -->\n            <div id=\"content-perniagaan\" class=\"tab-content hidden text-sm\">\n                <div class=\"flex items-center justify-center space-x-6 mb-5\"><label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"periode_perniagaan\" value=\"bulan\" class=\"form-radio text-[#FF7B0F] focus:ring-[#FF7B0F]\" checked><span class=\"text-gray-700\">Perbulan<\/span><\/label><label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"periode_perniagaan\" value=\"tahun\" class=\"form-radio text-[#FF7B0F] focus:ring-[#FF7B0F]\"><span class=\"text-gray-700\">Pertahun<\/span><\/label><\/div>\n                <div class=\"grid grid-cols-1 gap-y-4\">\n                    <div class=\"bg-green-50 p-4 rounded-xl border border-green-100\">\n                        <h4 class=\"text-center text-green-800 mb-3 text-xs font-bold uppercase\">Aktiva<\/h4>\n                        <div class=\"space-y-4\">\n                            <div><label for=\"niaga_modal\" class=\"lbl text-gray-500 text-xs font-semibold\">Uang Cash \/ Modal<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 12h.01\"\/><path d=\"M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/><path d=\"M22 13v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3c0-1.18.37-2.29 1-3.32\"\/><rect width=\"20\" height=\"14\" x=\"2\" y=\"6\" rx=\"2\"\/><\/svg><input type=\"text\" id=\"niaga_modal\" class=\"dt-input-field input-currency font-semibold\" placeholder=\"0\"><\/div><\/div>\n                            <div><label for=\"niaga_keuntungan\" class=\"lbl text-gray-500 text-xs font-semibold\">Keuntungan<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"\/><polyline points=\"5 12 12 5 19 12\"\/><\/svg><input type=\"text\" id=\"niaga_keuntungan\" class=\"dt-input-field input-currency font-semibold\" placeholder=\"0\"><\/div><\/div>\n                            <div><label for=\"niaga_piutang\" class=\"lbl text-gray-500 text-xs font-semibold\">Piutang<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 8c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4\"\/><path d=\"M20.2 16.2c.4-.9.6-1.9.6-3 0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8c1.1 0 2.1-.2 3-.6\"\/><\/svg><input type=\"text\" id=\"niaga_piutang\" class=\"dt-input-field input-currency font-semibold\" placeholder=\"0\"><\/div><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"bg-red-50 p-4 rounded-xl border border-red-100\">\n                        <h4 class=\"text-center text-red-800 mb-3 text-xs font-bold uppercase\">Pasiva<\/h4>\n                        <div class=\"space-y-4\">\n                            <div><label for=\"niaga_kerugian\" class=\"lbl text-gray-500 text-xs font-semibold\">Kerugian<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><polyline points=\"19 12 12 19 5 12\"\/><\/svg><input type=\"text\" id=\"niaga_kerugian\" class=\"dt-input-field input-currency font-semibold\" placeholder=\"0\"><\/div><\/div>\n                            <div><label for=\"niaga_hutang\" class=\"lbl text-gray-500 text-xs font-semibold\">Hutang \/ cicilan<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 5-3-3-3 3\"\/><path d=\"m15 19 3 3 3-3\"\/><path d=\"M4 11v1a2 2 0 0 0 2 2h4a2 2 0 0 1 2 2v1\"\/><path d=\"M12 5V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1\"\/><\/svg><input type=\"text\" id=\"niaga_hutang\" class=\"dt-input-field input-currency font-semibold\" placeholder=\"0\"><\/div><\/div>\n                            <div><label for=\"niaga_pengeluaran_lain\" class=\"lbl text-gray-500 text-xs font-semibold\">Pengeluaran Lainnya<\/label><div class=\"dt-input-wrapper\"><svg class=\"dt-input-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"18\" x2=\"8\" y2=\"2\"\/><line x1=\"4\" y1=\"6\" x2=\"8\" y2=\"6\"\/><line x1=\"16\" y1=\"4\" x2=\"16\" y2=\"8\"\/><path d=\"M18 6h-2c-2.2 0-4 1.8-4 4v0c0 2.2 1.8 4 4 4h2\"\/><\/svg><input type=\"text\" id=\"niaga_pengeluaran_lain\" class=\"dt-input-field input-currency font-semibold\" placeholder=\"0\"><\/div><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Kalender Toggle for non-Penghasilan tabs -->\n            <div id=\"kalender-section-other\" class=\"mt-5 text-center hidden\">\n                <div class=\"inline-flex justify-center items-center gap-3 text-[10px] text-gray-600\">\n                    <span id=\"label-kalender-hijriah-other\" class=\"font-bold text-[#FF7B0F]\">Hijriah (2.5%)<\/span>\n                    <label class=\"dt-toggle-label\"><input type=\"checkbox\" id=\"kalender-toggle-other\" class=\"kalender-toggle\"><span class=\"dt-slider\"><\/span><\/label>\n                    <span id=\"label-kalender-masehi-other\">Masehi (2.577%)<\/span>\n                <\/div>\n                <p class=\"text-[10px] text-gray-400 mt-1\">Berdasarkan Taklimat DPS DT Peduli<\/p>\n            <\/div>\n\n            <!-- Hasil Perhitungan -->\n            <div id=\"result-container\" class=\"mt-6 p-5 bg-orange-50 border-t-4 border-[#FF7B0F] rounded-xl shadow-inner text-center\">\n                <h4 class=\"font-bold text-[#FF7B0F] text-xs\">Zakat yang harus dibayarkan:<\/h4>\n                <p id=\"result-text\" class=\"text-[#FF7B0F] mt-1 text-3xl font-extrabold\">Rp 0<\/p>\n                <p id=\"result-note\" class=\"text-[10px] text-gray-500 mt-1.5\"><\/p>\n                \n                <!-- Form Info Pengguna & Generate QRIS -->\n                <div id=\"kz-user-form\" class=\"hidden mt-4 space-y-3 text-left border-t border-gray-200 pt-4\">\n                    <p class=\"text-xs font-bold text-gray-700 mb-1\">Data Muzakki<\/p>\n                    <input type=\"text\" id=\"kz-nama\" placeholder=\"Nama Lengkap\" class=\"w-full bg-white border border-gray-300 text-sm rounded-xl px-3 py-2.5 outline-none focus:border-[#FF7B0F] transition-colors\">\n                    <input type=\"tel\" id=\"kz-wa\" placeholder=\"Nomor WhatsApp\" class=\"w-full bg-white border border-gray-300 text-sm rounded-xl px-3 py-2.5 outline-none focus:border-[#FF7B0F] transition-colors\">\n                    <button onclick=\"dtPeduliGenerateKalkulatorQR()\" class=\"w-full py-3 mt-1 rounded-xl font-bold text-white text-sm transition-transform active:scale-95 bg-[#FF7B0F] shadow-md hover:bg-[#ff9b3f] flex justify-center items-center gap-2\">\n                        <i class=\"fa-solid fa-qrcode\"><\/i> Bayar Zakat Sekarang\n                    <\/button>\n                <\/div>\n\n                <!-- Infaq Bridging Jika Belum Wajib Zakat -->\n                <div id=\"infaq-bridging\" class=\"hidden mt-4 p-3.5 bg-yellow-50 border border-[#FF7B0F]\/30 text-yellow-800 rounded-xl text-left\">\n                    <p class=\"font-bold text-xs mb-1\">Anda belum wajib zakat.<\/p>\n                    <p class=\"text-[10px] leading-relaxed\">Meskipun belum wajib, menyalurkan infaq\/sedekah tetap membawa keberkahan tak terhingga. Mari buka pintu rezeki dengan bersedekah.<\/p>\n                    <a href=\"https:\/\/dtpeduli.org\/donasi\" target=\"_blank\" class=\"mt-3 block w-full text-center bg-[#FF7B0F] text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition duration-300 text-xs shadow-sm\">\n                        Tunaikan Infaq Sekarang\n                    <\/a>\n                <\/div>\n            <\/div>\n            \n            <div class=\"mt-4 text-center text-[10px] text-gray-500 pb-2\">\n                <p id=\"nishab-info\"><\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Step 2: QR Code Result -->\n        <div id=\"kz-step-2\" class=\"overflow-y-auto p-5 hidden text-center\">\n            <p class=\"text-xs text-gray-500 font-medium mb-1\">Scan QRIS ini menggunakan aplikasi M-Banking atau E-Wallet (OVO, Gopay, Dana, dll).<\/p>\n            <h4 id=\"kz-display-nominal\" class=\"text-2xl font-extrabold mb-4\" style=\"color:#FF7B0F\">Rp 0<\/h4>\n            \n            <div class=\"bg-gray-50 p-4 rounded-2xl inline-block border border-gray-100 shadow-inner mb-4\">\n                <div id=\"kz-qrcode-container\" class=\"dt-qr-container flex justify-center mx-auto\"><\/div>\n            <\/div>\n\n            <a id=\"kz-btn-konfirmasi\" href=\"#\" target=\"_blank\" class=\"flex items-center justify-center gap-2 w-full py-3 rounded-xl font-bold text-white text-sm mb-2 transition-transform active:scale-95 bg-green-500 hover:bg-green-600\">\n                <i class=\"fa-brands fa-whatsapp text-lg\"><\/i> Konfirmasi ke Admin\n            <\/a>\n            \n            <button onclick=\"dtPeduliBackToKzStep1()\" class=\"text-xs font-semibold text-gray-500 hover:text-gray-800 underline\">\n                Kembali Hitung Ulang\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- MODAL DONASI CEPAT - Lengkap dengan form dan QR -->\n<div id=\"dt-modal-donasi-cepat\" class=\"dt-modal-overlay\">\n    <div class=\"dt-modal-content\" style=\"max-width: 24rem;\">\n        <div class=\"px-5 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50\">\n            <div class=\"flex items-center gap-2\">\n                <i class=\"fa-solid fa-qrcode\" style=\"color:#FF7B0F\"><\/i>\n                <h3 class=\"font-extrabold text-sm\" style=\"color:#1845A1\">Donasi Cepat QRIS<\/h3>\n            <\/div>\n            <button onclick=\"dtPeduliCloseDonasiCepat()\" class=\"w-7 h-7 bg-white border border-gray-200 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100\">\n                <i class=\"fa-solid fa-xmark text-xs\"><\/i>\n            <\/button>\n        <\/div>\n\n        <!-- Step 1: Form Input -->\n        <div id=\"step-1-form\" class=\"p-5\">\n            <div class=\"space-y-4\">\n                <div>\n                    <label class=\"block text-xs font-bold text-gray-700 mb-1.5\">Tipe Donasi<\/label>\n                    <select id=\"dc-tipe\" class=\"w-full bg-gray-50 border border-gray-200 text-sm rounded-xl px-3 py-2.5 outline-none focus:border-[#FF7B0F]\">\n                        <option value=\"Sedekah\">Sedekah \/ Infaq<\/option>\n                        <option value=\"Zakat\">Zakat<\/option>\n                        <option value=\"Wakaf\">Wakaf<\/option>\n                    <\/select>\n                <\/div>\n                <div>\n                    <label class=\"block text-xs font-bold text-gray-700 mb-1.5\">Nominal Donasi (Rp)<\/label>\n                    <input type=\"text\" id=\"dc-nominal\" placeholder=\"Contoh: 50.000\" oninput=\"dtPeduliFormatRupiahInput(this)\" class=\"w-full bg-gray-50 border border-gray-200 text-sm font-bold rounded-xl px-3 py-2.5 outline-none focus:border-[#FF7B0F]\">\n                <\/div>\n                <div>\n                    <label class=\"block text-xs font-bold text-gray-700 mb-1.5\">Nama Lengkap<\/label>\n                    <input type=\"text\" id=\"dc-nama\" placeholder=\"Hamba Allah\" class=\"w-full bg-gray-50 border border-gray-200 text-sm rounded-xl px-3 py-2.5 outline-none focus:border-[#FF7B0F]\">\n                <\/div>\n                <div>\n                    <label class=\"block text-xs font-bold text-gray-700 mb-1.5\">Nomor WhatsApp<\/label>\n                    <input type=\"tel\" id=\"dc-wa\" placeholder=\"0812xxxxxx\" class=\"w-full bg-gray-50 border border-gray-200 text-sm rounded-xl px-3 py-2.5 outline-none focus:border-[#FF7B0F]\">\n                <\/div>\n                <button onclick=\"dtPeduliGenerateDynamicQR()\" class=\"w-full mt-2 py-3 rounded-xl font-bold text-white text-sm transition-transform active:scale-95 bg-[#FF7B0F] hover:bg-[#ff9b3f]\">\n                    Buat QRIS Sekarang\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- Step 2: Tampilan QR Code -->\n        <div id=\"step-2-qr\" class=\"p-5 hidden text-center\">\n            <p class=\"text-xs text-gray-500 font-medium mb-1\">Scan QRIS ini menggunakan aplikasi M-Banking atau E-Wallet (OVO, Gopay, Dana, dll).<\/p>\n            <h4 id=\"dc-display-nominal\" class=\"text-2xl font-extrabold mb-4\" style=\"color:#FF7B0F\">Rp 0<\/h4>\n            \n            <div class=\"bg-gray-50 p-4 rounded-2xl inline-block border border-gray-100 shadow-inner mb-4\">\n                <div id=\"qrcode-container\" class=\"dt-qr-container flex justify-center mx-auto\"><\/div>\n            <\/div>\n\n            <a id=\"dc-btn-konfirmasi\" href=\"#\" target=\"_blank\" class=\"flex items-center justify-center gap-2 w-full py-3 rounded-xl font-bold text-white text-sm mb-2 transition-transform active:scale-95 bg-green-500 hover:bg-green-600\">\n                <i class=\"fa-brands fa-whatsapp text-lg\"><\/i> Konfirmasi ke Admin\n            <\/a>\n            \n            <button onclick=\"dtPeduliBackToStep1()\" class=\"text-xs font-semibold text-gray-500 hover:text-gray-800 underline\">\n                Kembali Edit Nominal\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ WordPress-safe JavaScript LENGKAP dengan semua fungsi\n(function(window, document) {\n    'use strict';\n    \n    console.log('DT Peduli Complete Script Loading...');\n    \n    \/\/ PAYLOAD QRIS STATIS DT PEDULI BATAM\n    var BASE_QRIS_PAYLOAD = \"00020101021126670016COM.NOBUBANK.WWW01189360050300000561900214041300000551000303UMI51440014ID.CO.QRIS.WWW0215ID20200328192410303UMI5204511153033605802ID5916KEPRI BERSEDEKAH6007Bandung61054011162070703A016304C840\";\n    var NOMOR_WA_ADMIN = \"628117073075\";\n\n    \/\/ Global Vars for Kalkulator\n    window.dtPeduliCurrentKzAmount = 0;\n    window.dtPeduliCurrentKzType = 'penghasilan';\n\n    \/\/ === MODAL FUNCTIONS ===\n    window.dtPeduliOpenKalkulator = function() {\n        console.log('Opening Kalkulator Modal...');\n        var modal = document.getElementById('dt-modal-kalkulator');\n        if (modal) {\n            modal.classList.add('dt-active');\n            document.body.style.overflow = 'hidden';\n            window.dtPeduliBackToKzStep1();\n            console.log('Kalkulator Modal opened');\n        }\n        return false;\n    };\n    \n    window.dtPeduliCloseKalkulator = function() {\n        var modal = document.getElementById('dt-modal-kalkulator');\n        if (modal) {\n            modal.classList.remove('dt-active');\n            document.body.style.overflow = '';\n        }\n        return false;\n    };\n    \n    window.dtPeduliBackToKzStep1 = function() {\n        document.getElementById('kz-step-1').classList.remove('hidden');\n        document.getElementById('kz-step-2').classList.add('hidden');\n    };\n\n    window.dtPeduliOpenDonasiCepat = function() {\n        console.log('Opening Donasi Cepat Modal...');\n        var modal = document.getElementById('dt-modal-donasi-cepat');\n        if (modal) {\n            modal.classList.add('dt-active');\n            document.body.style.overflow = 'hidden';\n            window.dtPeduliBackToStep1();\n            console.log('Donasi Cepat Modal opened');\n        }\n        return false;\n    };\n    \n    window.dtPeduliCloseDonasiCepat = function() {\n        var modal = document.getElementById('dt-modal-donasi-cepat');\n        if (modal) {\n            modal.classList.remove('dt-active');\n            document.body.style.overflow = '';\n        }\n        return false;\n    };\n    \n    window.dtPeduliBackToStep1 = function() {\n        document.getElementById('step-1-form').classList.remove('hidden');\n        document.getElementById('step-2-qr').classList.add('hidden');\n    };\n\n    window.dtPeduliFormatRupiahInput = function(elm) {\n        var val = elm.value.replace(\/[^0-9]\/g, '');\n        if(val !== '') {\n            elm.value = new Intl.NumberFormat('id-ID').format(val);\n        } else {\n            elm.value = '';\n        }\n    };\n\n    \/\/ === QRIS FUNCTIONS ===\n    function crc16ccitt(data) {\n        var crc = 0xFFFF;\n        var polynomial = 0x1021;\n        for (var i = 0; i < data.length; i++) {\n            crc ^= (data.charCodeAt(i) << 8);\n            for (var j = 0; j < 8; j++) {\n                if ((crc &#038; 0x8000) !== 0) crc = (crc << 1) ^ polynomial;\n                else crc = (crc << 1);\n            }\n        }\n        var hex = (crc &#038; 0xFFFF).toString(16).toUpperCase();\n        return hex.padStart(4, '0');\n    }\n\n    function convertToDynamicQRIS(payload, amount) {\n        var parts = [];\n        var index = 0;\n        \n        while (index < payload.length) {\n            var id = payload.substring(index, index + 2);\n            var lenStr = payload.substring(index + 2, index + 4);\n            var length = parseInt(lenStr);\n            var value = payload.substring(index + 4, index + 4 + length);\n            parts.push({ id: id, length: length, value: value });\n            index += 4 + length;\n        }\n\n        var poi = parts.find(function(p) { return p.id === '01'; });\n        if (poi) poi.value = '12';\n\n        parts = parts.filter(function(p) { return p.id !== '54' &#038;&#038; p.id !== '63'; });\n\n        var amountStr = amount.toString();\n        var currencyIndex = -1;\n        for (var i = 0; i < parts.length; i++) {\n            if (parts[i].id === '53') {\n                currencyIndex = i;\n                break;\n            }\n        }\n        \n        var amountPart = { id: '54', length: amountStr.length, value: amountStr };\n        \n        if (currencyIndex !== -1) {\n            parts.splice(currencyIndex + 1, 0, amountPart);\n        } else {\n            parts.push(amountPart);\n        }\n\n        var rawData = \"\";\n        parts.forEach(function(p) {\n            var lenStr = p.value.length.toString().padStart(2, '0');\n            rawData += p.id + lenStr + p.value;\n        });\n\n        rawData += \"6304\";\n        return rawData + crc16ccitt(rawData);\n    }\n\n    \/\/ === DONASI CEPAT SUBMIT ===\n    window.dtPeduliGenerateDynamicQR = function() {\n        var nominalRaw = document.getElementById('dc-nominal').value.replace(\/[^0-9]\/g, '');\n        var nominal = parseInt(nominalRaw);\n        \n        if(!nominal || nominal < 1000) {\n            alert('Mohon masukkan nominal donasi minimal Rp 1.000');\n            return;\n        }\n\n        var tipe = document.getElementById('dc-tipe').value;\n        var nama = document.getElementById('dc-nama').value || 'Hamba Allah';\n        var wa = document.getElementById('dc-wa').value || '-';\n\n        var dynamicString = convertToDynamicQRIS(BASE_QRIS_PAYLOAD, nominal);\n\n        var qrContainer = document.getElementById(\"qrcode-container\");\n        qrContainer.innerHTML = \"\"; \n        new QRCode(qrContainer, {\n            text: dynamicString,\n            width: 200,\n            height: 200,\n            colorDark : \"#000000\",\n            colorLight : \"#ffffff\",\n            correctLevel : QRCode.CorrectLevel.M\n        });\n\n        document.getElementById('dc-display-nominal').textContent = 'Rp ' + new Intl.NumberFormat('id-ID').format(nominal);\n        document.getElementById('step-1-form').classList.add('hidden');\n        document.getElementById('step-2-qr').classList.remove('hidden');\n\n        var textWA = \"Assalamu'alaikum Admin DT Peduli Batam, saya ingin konfirmasi *Donasi Cepat QRIS*:\\n\\n*Nama:* \" + nama + \"\\n*No WA:* \" + wa + \"\\n*Tipe:* \" + tipe + \"\\n*Nominal:* Rp \" + new Intl.NumberFormat('id-ID').format(nominal) + \"\\n\\nTerima kasih.\";\n        document.getElementById('dc-btn-konfirmasi').href = \"https:\/\/wa.me\/\" + NOMOR_WA_ADMIN + \"?text=\" + encodeURIComponent(textWA);\n    };\n\n    \/\/ === KALKULATOR ZAKAT SUBMIT ===\n    window.dtPeduliGenerateKalkulatorQR = function() {\n        if (!window.dtPeduliCurrentKzAmount || window.dtPeduliCurrentKzAmount < 1000) {\n            alert('Nominal zakat tidak valid atau terlalu kecil.');\n            return;\n        }\n\n        var nama = document.getElementById('kz-nama').value || 'Hamba Allah';\n        var wa = document.getElementById('kz-wa').value || '-';\n        var tipeDisplay = 'Zakat ' + window.dtPeduliCurrentKzType.charAt(0).toUpperCase() + window.dtPeduliCurrentKzType.slice(1);\n\n        var dynamicString = convertToDynamicQRIS(BASE_QRIS_PAYLOAD, window.dtPeduliCurrentKzAmount);\n\n        var qrContainer = document.getElementById(\"kz-qrcode-container\");\n        qrContainer.innerHTML = \"\"; \n        new QRCode(qrContainer, {\n            text: dynamicString,\n            width: 200,\n            height: 200,\n            colorDark : \"#000000\",\n            colorLight : \"#ffffff\",\n            correctLevel : QRCode.CorrectLevel.M\n        });\n\n        document.getElementById('kz-display-nominal').textContent = 'Rp ' + new Intl.NumberFormat('id-ID').format(window.dtPeduliCurrentKzAmount);\n        document.getElementById('kz-step-1').classList.add('hidden');\n        document.getElementById('kz-step-2').classList.remove('hidden');\n\n        var textWA = \"Assalamu'alaikum Admin DT Peduli Batam, saya ingin konfirmasi *Pembayaran Zakat QRIS*:\\n\\n*Nama:* \" + nama + \"\\n*No WA:* \" + wa + \"\\n*Tipe:* \" + tipeDisplay + \"\\n*Nominal:* Rp \" + new Intl.NumberFormat('id-ID').format(window.dtPeduliCurrentKzAmount) + \"\\n\\nTerima kasih.\";\n        document.getElementById('kz-btn-konfirmasi').href = \"https:\/\/wa.me\/\" + NOMOR_WA_ADMIN + \"?text=\" + encodeURIComponent(textWA);\n    };\n\n    \/\/ === KALKULATOR LOGIC ===\n    document.addEventListener('DOMContentLoaded', function() {\n        var PERSEN_HIJRIAH = 0.025;\n        var PERSEN_MASEHI = 0.02577;\n        var NISHAB_TAHUNAN_BAZNAS = 85685972;\n        var NISHAB_BULANAN_BAZNAS = 7140498;\n        var NISHAB_EMAS_RUPIAH = NISHAB_TAHUNAN_BAZNAS;\n        var HARGA_EMAS_ACUAN = 1350000;\n        \n        var activeTab = 'penghasilan';\n        var metodeHitungProfesi = 'netto';\n        var metodeHitungEmas = 'gram';\n        var jenisKalender = 'hijriah';\n\n        var tabs = document.querySelectorAll('#kz-step-1 nav button');\n        var resultText = document.getElementById('result-text');\n        var resultNote = document.getElementById('result-note');\n        var nishabInfo = document.getElementById('nishab-info');\n        var infaqBridging = document.getElementById('infaq-bridging');\n        var kzUserForm = document.getElementById('kz-user-form');\n        \n        var pengeluaranSection = document.getElementById('pengeluaran-section');\n        var metodeToggle = document.getElementById('metode-toggle');\n        var kalenderToggles = document.querySelectorAll('.kalender-toggle');\n        var kalenderSectionOther = document.getElementById('kalender-section-other');\n        var emasMetodeToggle = document.getElementById('emas-metode-toggle');\n        var emasGramSection = document.getElementById('emas-gram-section');\n        var emasRupiahSection = document.getElementById('emas-rupiah-section');\n        var emasGramValue = document.getElementById('emas-gram-value');\n        \n        var formatCurrency = function(num) { \n            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(num); \n        };\n        var parseCurrency = function(str) { \n            return str ? Number(String(str).replace(\/[^0-9]\/g, '')) : 0; \n        };\n        var formatInputAsCurrency = function(e) {\n            var value = e.target.value.replace(\/[^0-9]\/g, '');\n            e.target.value = value ? new Intl.NumberFormat('id-ID').format(value) : '';\n            recalculateAndDisplay();\n        };\n        var getVal = function(id) { return parseCurrency(document.getElementById(id).value); };\n        var getNum = function(id) { return Number(document.getElementById(id).value) || 0; };\n\n        function recalculateAndDisplay() {\n            var message = formatCurrency(0);\n            var note = '';\n            var showInfaq = false;\n            var rawZakatAmount = 0;\n\n            var result;\n            switch (activeTab) {\n                case 'penghasilan': result = calculateZakatPenghasilan(); break;\n                case 'emas': result = calculateZakatEmas(); break;\n                case 'investasi': result = calculateZakatInvestasi(); break;\n                case 'perniagaan': result = calculateZakatPerniagaan(); break;\n            }\n            \n            message = result[0];\n            note = result[1];\n            showInfaq = result[2];\n            rawZakatAmount = result[3];\n            \n            resultText.innerHTML = message;\n            resultNote.innerHTML = note;\n            infaqBridging.classList.toggle('hidden', !showInfaq);\n            kzUserForm.classList.toggle('hidden', showInfaq);\n\n            if (!showInfaq) {\n                updateZakatButton(rawZakatAmount, activeTab);\n            }\n        }\n        \n        function updateZakatButton(amount, type) {\n            window.dtPeduliCurrentKzAmount = amount;\n            window.dtPeduliCurrentKzType = type;\n        }\n\n        function calculateZakatPenghasilan() {\n            var periode = document.querySelector('input[name=\"periode_penghasilan\"]:checked').value;\n            var pendapatanBruto = getVal('penghasilan_gaji') + getVal('penghasilan_lain');\n            var penghasilanKenaZakat = pendapatanBruto;\n\n            if (metodeHitungProfesi === 'netto') {\n                penghasilanKenaZakat -= (getVal('penghasilan_kebutuhan') + getVal('penghasilan_hutang') + getVal('penghasilan_pengeluaran_lain'));\n            }\n\n            var nishab = periode === 'bulan' ? NISHAB_BULANAN_BAZNAS : NISHAB_TAHUNAN_BAZNAS;\n            \n            if (penghasilanKenaZakat >= nishab) {\n                var persentase = jenisKalender === 'hijriah' ? PERSEN_HIJRIAH : PERSEN_MASEHI;\n                var zakat = penghasilanKenaZakat * persentase;\n                return [formatCurrency(zakat), 'Penghasilan kena zakat (' + metodeHitungProfesi + '): ' + formatCurrency(penghasilanKenaZakat), false, zakat];\n            }\n            return [formatCurrency(0), '', true, 0];\n        }\n\n        function calculateZakatEmas() {\n            var zakat = 0;\n            var note = '';\n            var showInfaq = true;\n            var nishab = NISHAB_EMAS_RUPIAH;\n            var persentase = jenisKalender === 'hijriah' ? PERSEN_HIJRIAH : PERSEN_MASEHI;\n\n            if (metodeHitungEmas === 'gram') {\n                var jumlahGram = getNum('emas_gram');\n                var nilaiEstimasi = jumlahGram * HARGA_EMAS_ACUAN;\n                emasGramValue.textContent = formatCurrency(nilaiEstimasi);\n                if (jumlahGram >= 85) {\n                    zakat = nilaiEstimasi * persentase;\n                    note = 'Zakat dari ' + jumlahGram + ' gram emas (estimasi ' + formatCurrency(nilaiEstimasi) + ')';\n                    showInfaq = false;\n                }\n            } else {\n                var nilaiEmas = getVal('emas_nilai');\n                if (nilaiEmas >= nishab) {\n                    zakat = nilaiEmas * persentase;\n                    note = 'Zakat dari emas senilai ' + formatCurrency(nilaiEmas);\n                    showInfaq = false;\n                }\n            }\n            return [formatCurrency(zakat), note, showInfaq, zakat];\n        }\n        \n        function calculateZakatInvestasi() {\n            var periode = document.querySelector('input[name=\"periode_investasi\"]:checked').value;\n            var bersih = getVal('investasi_pendapatan') - getVal('investasi_operasional');\n            var nishab = periode === 'bulan' ? NISHAB_BULANAN_BAZNAS : NISHAB_TAHUNAN_BAZNAS;\n            if (bersih >= nishab) {\n                var persentase = jenisKalender === 'hijriah' ? PERSEN_HIJRIAH : PERSEN_MASEHI;\n                var zakat = bersih * persentase;\n                return [formatCurrency(zakat), 'Hasil bersih investasi: ' + formatCurrency(bersih), false, zakat];\n            }\n            return [formatCurrency(0), '', true, 0];\n        }\n\n        function calculateZakatPerniagaan() {\n            var periode = document.querySelector('input[name=\"periode_perniagaan\"]:checked').value;\n            var bersih = (getVal('niaga_modal') + getVal('niaga_keuntungan') + getVal('niaga_piutang')) - (getVal('niaga_kerugian') + getVal('niaga_hutang') + getVal('niaga_pengeluaran_lain'));\n            var nishab = periode === 'bulan' ? NISHAB_BULANAN_BAZNAS : NISHAB_TAHUNAN_BAZNAS;\n            if (bersih >= nishab) {\n                var persentase = jenisKalender === 'hijriah' ? PERSEN_HIJRIAH : PERSEN_MASEHI;\n                var zakat = bersih * persentase;\n                return [formatCurrency(zakat), 'Harta bersih perniagaan: ' + formatCurrency(bersih), false, zakat];\n            }\n            return [formatCurrency(0), '', true, 0];\n        }\n\n        function updateNishabInfo() {\n            var skLinkBaznas = '<a href=\"https:\/\/baznas.go.id\/assets\/pdf\/ppid\/tentang%20zakat\/SK_13_2025.pdf\" target=\"_blank\" class=\"text-[#FF7B0F] font-medium hover:underline\">SK BAZNAS 13\/2025<\/a>';\n            var skLinkDt = '<a href=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/07\/TAKLIMAT-DPS-Tentang-Nilai-Nisab-Zakat-Pendapatan-dan-Jasa-tahun-2025-Rev_signed.pdf\" target=\"_blank\" class=\"text-[#FF7B0F] font-medium hover:underline\">Taklimat DPS<\/a>';\n\n            if (activeTab === 'emas') {\n                nishabInfo.innerHTML = 'Nishab zakat emas: 85 gram (' + formatCurrency(NISHAB_EMAS_RUPIAH) + '). <br>Ref: ' + skLinkBaznas + ' & ' + skLinkDt;\n            } else {\n                var periode;\n                if (activeTab === 'penghasilan') periode = document.querySelector('input[name=\"periode_penghasilan\"]:checked').value;\n                if (activeTab === 'investasi') periode = document.querySelector('input[name=\"periode_investasi\"]:checked').value;\n                if (activeTab === 'perniagaan') periode = document.querySelector('input[name=\"periode_perniagaan\"]:checked').value;\n                \n                var nishabValue = periode === 'bulan' ? NISHAB_BULANAN_BAZNAS : NISHAB_TAHUNAN_BAZNAS;\n                nishabInfo.innerHTML = 'Nishab yang digunakan: ' + formatCurrency(nishabValue) + ' per ' + periode + '.<br>Ref: ' + skLinkBaznas + ' & ' + skLinkDt;\n            }\n        }\n        \n        function setupEventListeners() {\n            tabs.forEach(function(tab) {\n                tab.addEventListener('click', function() {\n                    activeTab = tab.dataset.tab;\n                    tabs.forEach(function(t) {\n                        t.classList.replace('dt-tab-active', 'dt-tab-inactive');\n                        t.querySelector('svg').classList.remove('text-[#FF7B0F]');\n                    });\n                    tab.classList.replace('dt-tab-inactive', 'dt-tab-active');\n                    tab.querySelector('svg').classList.add('text-[#FF7B0F]');\n                    \n                    document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.add('hidden'); });\n                    document.getElementById('content-' + activeTab).classList.remove('hidden');\n                    \n                    kalenderSectionOther.style.display = activeTab === 'penghasilan' ? 'none' : 'block';\n\n                    recalculateAndDisplay();\n                    updateNishabInfo();\n                });\n            });\n\n            document.querySelectorAll('.input-currency').forEach(function(input) {\n                input.addEventListener('input', formatInputAsCurrency);\n            });\n            document.querySelectorAll('#dt-modal-kalkulator input[type=number]').forEach(function(input) {\n                input.addEventListener('input', recalculateAndDisplay);\n            });\n\n            document.querySelectorAll('#dt-modal-kalkulator input[type=radio]').forEach(function(radio) {\n                radio.addEventListener('change', function() {\n                    updateNishabInfo();\n                    recalculateAndDisplay();\n                });\n            });\n            \n            metodeToggle.addEventListener('change', function(e) {\n                metodeHitungProfesi = e.target.checked ? 'bruto' : 'netto';\n                pengeluaranSection.style.display = e.target.checked ? 'none' : 'block';\n                document.getElementById('label-metode-bruto').classList.toggle('font-bold', e.target.checked);\n                document.getElementById('label-metode-bruto').classList.toggle('text-[#FF7B0F]', e.target.checked);\n                document.getElementById('label-metode-netto').classList.toggle('font-bold', !e.target.checked);\n                document.getElementById('label-metode-netto').classList.toggle('text-[#FF7B0F]', !e.target.checked);\n                document.getElementById('metode-info').textContent = e.target.checked\n                    ? 'Perhitungan zakat dari seluruh pendapatan kotor (bruto).'\n                    : 'Perhitungan zakat dari pendapatan bersih (setelah dikurangi pengeluaran).';\n                recalculateAndDisplay();\n            });\n            \n            function handleKalenderToggle(isMasehi) {\n                jenisKalender = isMasehi ? 'masehi' : 'hijriah';\n                \n                kalenderToggles.forEach(function(toggle) {\n                    toggle.checked = isMasehi;\n                    var parent = toggle.parentElement.parentElement;\n                    parent.querySelector('[id^=\"label-kalender-masehi\"]').classList.toggle('font-bold', isMasehi);\n                    parent.querySelector('[id^=\"label-kalender-masehi\"]').classList.toggle('text-[#FF7B0F]', isMasehi);\n                    parent.querySelector('[id^=\"label-kalender-hijriah\"]').classList.toggle('font-bold', !isMasehi);\n                    parent.querySelector('[id^=\"label-kalender-hijriah\"]').classList.toggle('text-[#FF7B0F]', !isMasehi);\n                });\n                recalculateAndDisplay();\n            }\n\n            kalenderToggles.forEach(function(toggle) {\n                toggle.addEventListener('change', function(e) { handleKalenderToggle(e.target.checked); });\n            });\n\n            emasMetodeToggle.addEventListener('change', function(e) {\n                metodeHitungEmas = e.target.checked ? 'gram' : 'rupiah';\n                emasGramSection.classList.toggle('hidden', !e.target.checked);\n                emasRupiahSection.classList.toggle('hidden', e.target.checked);\n                document.getElementById('label-emas-gram').classList.toggle('font-bold', e.target.checked);\n                document.getElementById('label-emas-gram').classList.toggle('text-[#FF7B0F]', e.target.checked);\n                document.getElementById('label-emas-rupiah').classList.toggle('font-bold', !e.target.checked);\n                document.getElementById('label-emas-rupiah').classList.toggle('text-[#FF7B0F]', !e.target.checked);\n                recalculateAndDisplay();\n            });\n        }\n        \n        function initializeCalculator() {\n            setupEventListeners();\n            updateNishabInfo();\n            metodeToggle.checked = false; \n            metodeToggle.dispatchEvent(new Event('change'));\n            emasMetodeToggle.checked = true; \n            emasMetodeToggle.dispatchEvent(new Event('change'));\n            kalenderToggles.forEach(function(toggle) {\n                toggle.checked = false; \n                toggle.dispatchEvent(new Event('change'));\n            });\n        }\n        \n        initializeCalculator();\n    });\n\n    \/\/ Close modal when clicking outside\n    document.addEventListener('click', function(e) {\n        if (e.target.classList.contains('dt-modal-overlay')) {\n            if (e.target.id === 'dt-modal-kalkulator') {\n                window.dtPeduliCloseKalkulator();\n            } else if (e.target.id === 'dt-modal-donasi-cepat') {\n                window.dtPeduliCloseDonasiCepat();\n            }\n        }\n    });\n    \n    console.log('DT Peduli Complete Script Loaded Successfully!');\n})(window, document);\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Batam Bantuan Pilih program kebaikan Anda hari ini \ud83e\udd32 DonasiCepat JemputDonasi KalkulatorZakat RekeningDonasi Hadirkan manfaat untuk sesama hari ini Donasi Sekarang LEMBAGA AMIL ZAKAT NASIONAL DAARUT TAUHID SK KEMENAG RI NO 1200 TAHUN 2022 Navigasi Beranda Kalkulator Zakat Laporan Rekening Zakat &#038; Infak BSI 7460000040 a.n Daarut tauhiid Kontak 0811 707 3075 WhatsApp info@dtpeduli.org Email &#8230; <a title=\"Home\" class=\"read-more\" href=\"https:\/\/batam.dtpeduli.id\/\" aria-label=\"Baca selengkapnya tentang Home\">Baca Selengkapnya<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-page-builder-no-header-footer.php","meta":{"footnotes":""},"class_list":["post-27","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/batam.dtpeduli.id\/index.php\/wp-json\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/batam.dtpeduli.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/batam.dtpeduli.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/batam.dtpeduli.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/batam.dtpeduli.id\/index.php\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":14,"href":"https:\/\/batam.dtpeduli.id\/index.php\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/batam.dtpeduli.id\/index.php\/wp-json\/wp\/v2\/pages\/27\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/batam.dtpeduli.id\/index.php\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}