Donate | DT Peduli – Spreading Goodness<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n \n \n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n\n \n <style>\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n \/* 3. FIX TUMPANG TINDIH: Padding bawah untuk mobile *\/\n padding-bottom: 90px; \n overflow-x: hidden;\n }\n @media (min-width: 1024px) {\n body { padding-bottom: 0; }\n }\n\n .bg-dt-blue { background-color: #00358f; }\n .text-dt-blue { color: #00358f; }\n .bg-dt-yellow { background-color: #ffaf23; }\n .text-dt-yellow { color: #ffaf23; }\n .border-dt-yellow { border-color: #ffaf23; }\n .ring-dt-yellow { --tw-ring-color: #ffaf23; }\n\n \/* 3. Modern Sticky Mobile Styles (Glassmorphism & Shadow) *\/\n .shadow-soft-up {\n box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.1);\n }\n \n \/* Sticky Header *\/\n #mainHeader {\n transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;\n }\n .header-scrolled {\n background-color: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);\n }\n\n \/* 1. Hero Section Styling - Full Width *\/\n .hero-section {\n background-color: #1a202c;\n height: 60vh;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n \/* Submenu Panel Animation *\/\n .submenu-panel {\n transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n }\n .submenu-panel.hidden {\n transform: translateY(100%);\n }\n \n \/* 7. HILANGKAN JARAK: Menggunakan top: 100% agar menempel *\/\n .group .mega-menu, .group .simple-dropdown {\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;\n opacity: 0;\n transform: translateY(10px);\n pointer-events: none;\n visibility: hidden;\n top: 100%; \n margin-top: 0;\n }\n .group:hover .mega-menu, .group:hover .simple-dropdown {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n visibility: visible;\n }\n \n \/* Mobile Menu Overlay Styles *\/\n #mobileMenu.is-open {\n transform: translateY(0);\n }\n \/* Mobile Menu Accordion *\/\n .mobile-submenu {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);\n }\n\n \/* 2. Mega Menu Interaction - Compact Layout *\/\n .program-link:hover, .program-link.active {\n background-color: white;\n transform: translateX(4px);\n box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);\n }\n .program-link.active {\n border-left: 3px solid #00358f;\n }\n .program-link {\n border-left: 3px solid transparent;\n padding: 0.5rem 0.75rem;\n }\n .program-content-panel {\n position: absolute;\n top: 1rem;\n left: 1.5rem;\n right: 1.5rem;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease-in-out;\n }\n .program-content-panel.active {\n opacity: 1;\n visibility: visible;\n }\n .mega-menu-img {\n height: 180px;\n object-fit: cover;\n }\n \n \/* Animation Keyframes *\/\n @keyframes slide-up {\n from { transform: translateY(100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n .animate-slide-up {\n animation: slide-up 0.3s ease-out forwards;\n }\n\n \/* Custom Button Gradient *\/\n .btn-gradient {\n background-image: linear-gradient(to right, #00358f, #0052a5);\n transition: all 0.3s ease;\n background-size: 200% auto;\n }\n .btn-gradient:hover {\n background-position: right center;\n transform: translateY(-2px);\n box-shadow: 0 10px 20px -10px rgba(0, 53, 143, 0.5);\n }\n \n \/* Calculator Specifics *\/\n .calculator-loader {\n border: 3px solid #f3f3f3;\n border-top: 3px solid #00358f;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n }\n .news-loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #00358f;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 20px auto;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n .input-group { position: relative; }\n .input-group .currency-symbol {\n position: absolute;\n top: 50%;\n left: 0.75rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: #6b7280;\n }\n .input-group input { padding-left: 2.5rem; }\n button:disabled {\n background-color: #d1a55b;\n cursor: not-allowed;\n transform: scale(1);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n \n <header id=\"mainHeader\" class=\"sticky top-0 z-50 w-full bg-white\/90 backdrop-blur-md border-b border-gray-100\">\n <div class=\"container mx-auto px-4 lg:px-6\">\n <div class=\"flex items-center justify-between h-16 lg:h-20\">\n \n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/erp.dtpeduli.org\/assets\/2025-06\/250618K5BPVT.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <\/a>\n \n \n <div class=\"hidden lg:flex items-center\">\n \n <nav class=\"flex items-center space-x-1 h-full\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors\">Home<\/a>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>About Us<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute left-0 w-56 origin-top-left bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1 top-full mt-0\">\n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Official Address<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>Programs<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"mega-menu absolute -right-24 w-screen max-w-4xl origin-top-right z-50 top-full mt-0\">\n <div class=\"bg-white rounded-xl shadow-2xl border border-gray-100 grid grid-cols-12 overflow-hidden\">\n \n <div class=\"col-span-4 bg-gray-50 p-4 border-r border-gray-100\">\n <h3 class=\"text-xs font-bold text-dt-blue uppercase tracking-wider mb-3 ml-2\">Our Core Pillars<\/h3>\n <div id=\"program-links\" class=\"space-y-1\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" data-program=\"dawah\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p><\/div>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" data-program=\"economy\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p><\/div>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" data-program=\"education\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Education<\/p><\/div>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" data-program=\"health\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Health<\/p><\/div>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" data-program=\"social\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Social Humanitarian<\/p><\/div>\n <\/a>\n <\/div>\n <\/div>\n \n <div id=\"program-content\" class=\"col-span-8 p-5 relative min-h-[300px]\">\n <div id=\"program-content-dawah\" class=\"program-content-panel active\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" alt=\"Da'wah\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Da’wah Program<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Fostering spiritual growth and spreading peaceful Islamic values.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-economy\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" alt=\"Economy\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Economic Empowerment<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Creating sustainable livelihoods via micro-loans.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-education\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/4cc7638b-3eb5-4b00-8309-4ef773ff4a7d-scaled.jpeg\" alt=\"Education\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Education For All<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Ensuring children have access to quality education.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-health\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KKOGnoD65U1j95nTiuZlUPrwRfC7YkGQYaK07hfw.jpg\" alt=\"Health\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Community Health<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Improving well-being by offering free medical services.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-social\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/07\/dapur-umum-gaza.jpg\" alt=\"Social\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Social & Humanitarian<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Providing rapid response and relief during emergencies.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-dt-blue font-bold text-sm uppercase tracking-wide px-3 py-2 rounded-lg bg-blue-50 transition-all h-10\">\n <span>Giving<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute left-0 w-56 origin-top-left bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1 top-full mt-0\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"block px-4 py-2 text-sm text-dt-blue bg-gray-50 rounded-md font-bold\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Palestine Relief<\/a>\n <a href=\"http:\/\/dtpeduli.com\/ramadhan\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Ramadhan<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>Governance<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute right-0 w-56 origin-top-right bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1 top-full mt-0\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Audit Result<\/a>\n <a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Report<\/a>\n <a href=\"https:\/\/dtpeduli.com\/complaint-service\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Complaint Service<\/a>\n <a href=\"https:\/\/dtpeduli.com\/terms-and-conditions\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Terms and Conditions<\/a>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors\">News<\/a>\n <\/nav>\n \n \n <div class=\"ml-4\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"bg-dt-yellow text-white font-bold text-sm py-2.5 px-5 rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105 shadow-md hover:shadow-lg\">\n Donate\n <\/a>\n <\/div>\n <\/div>\n\n \n <button id=\"mobileMenuButton\" class=\"lg:hidden text-dt-blue focus:outline-none z-50 p-2 rounded-md hover:bg-gray-100\">\n <svg id=\"menu-open-icon\" class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n <svg id=\"menu-close-icon\" class=\"w-7 h-7 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"mobileMenu\" class=\"lg:hidden fixed top-0 left-0 w-full h-screen bg-white z-40 transform -translate-y-full transition-transform duration-300 ease-in-out\">\n <div id=\"mobileMenuContent\" class=\"h-full overflow-y-auto pb-32\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"block py-4 px-6 text-gray-700 hover:bg-gray-100 border-b border-gray-100\">Home<\/a>\n \n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>About Us<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Official Address<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>Programs<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu p-4 space-y-3 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/4cc7638b-3eb5-4b00-8309-4ef773ff4a7d-scaled.jpeg\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Education<\/p>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KKOGnoD65U1j95nTiuZlUPrwRfC7YkGQYaK07hfw.jpg\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Health<\/p>\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-dt-blue font-bold py-4 px-6 focus:outline-none bg-blue-50\/50\">\n <span>Giving<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"block py-3 px-6 text-sm text-dt-blue font-bold bg-white\/50\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Palestine Relief<\/a>\n <a href=\"http:\/\/dtpeduli.com\/ramadhan\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Ramadhan<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>Governance<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform rotate-180 text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\" style=\"max-height: 500px;\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Audit Result<\/a>\n <a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Report<\/a>\n <a href=\"https:\/\/dtpeduli.com\/complaint-service\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Complaint Service<\/a>\n <a href=\"https:\/\/dtpeduli.com\/terms-and-conditions\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Terms and Conditions<\/a>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"block text-gray-700 hover:text-dt-blue font-medium py-4 px-6 border-b border-gray-100\">News & Stories<\/a>\n <div class=\"p-6\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"block w-full text-center py-3 px-6 text-white bg-dt-yellow rounded-lg font-bold shadow-md\">Donate Now<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main>\n \n <section class=\"hero-section relative\">\n \n <div class=\"absolute top-0 left-0 w-full h-full\">\n \n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1532629345422-7515f3d16bb6?q=80&w=2940&auto=format&fit=crop\" \n alt=\"Donate Banner\" \n class=\"w-full h-full object-cover\"\n style=\"filter: brightness(0.4);\">\n \n \n \n <div class=\"absolute top-0 left-0 w-full h-full bg-dt-blue\/60 mix-blend-multiply\"><\/div>\n <\/div>\n\n <div class=\"relative z-10 container mx-auto px-6 text-center\" data-aos=\"fade-up\" data-aos-duration=\"1000\">\n <h1 class=\"text-4xl lg:text-6xl font-extrabold text-white mb-6 drop-shadow-lg\">Donate & Zakat Calculator<\/h1>\n <div class=\"max-w-3xl mx-auto space-y-4 text-lg lg:text-xl text-gray-100 font-medium\">\n <p>Calculate your Zakat Maal accurately and distribute it to those in need. Every contribution counts.<\/p>\n <\/div>\n <div class=\"mt-8 w-24 h-1 bg-dt-yellow mx-auto rounded-full\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 lg:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n \n <div class=\"max-w-7xl mx-auto\">\n <div class=\"grid grid-cols-1 lg:grid-cols-5 gap-12\">\n \n \n <div class=\"lg:col-span-3 bg-white rounded-2xl shadow-xl overflow-hidden\" data-aos=\"fade-right\">\n <div class=\"bg-dt-blue p-6 text-center text-white\">\n <h2 class=\"text-2xl font-bold\">Zakat Maal Calculator<\/h2>\n <p class=\"text-blue-100 text-sm mt-1\">Calculate based on Gold\/Silver Nisab<\/p>\n <\/div>\n \n <div class=\"p-6 md:p-10\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-8 p-4 border rounded-lg bg-gray-50\">\n <div>\n <label for=\"currency\" class=\"block text-sm font-medium text-gray-700 mb-1\">Select Currency<\/label>\n <select id=\"currency\" class=\"w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-dt-yellow focus:border-dt-yellow transition bg-white\"><\/select>\n <\/div>\n <div>\n <label for=\"nisabBasis\" class=\"block text-sm font-medium text-gray-700 mb-1\">Nisab Basis<\/label>\n <select id=\"nisabBasis\" class=\"w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-dt-yellow focus:border-dt-yellow transition bg-white\">\n <option value=\"gold\">Gold (85g)<\/option>\n <option value=\"silver\">Silver (595g)<\/option>\n <\/select>\n <\/div>\n <div class=\"md:col-span-2 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm flex items-center justify-between\">\n <div>\n <p class=\"text-gray-600\">Current Nisab Value:<\/p>\n <p class=\"text-lg font-bold text-dt-blue\" id=\"nisabValue\"><div class=\"calculator-loader inline-block\"><\/div><\/p>\n <\/div>\n <div class=\"text-right text-xs text-gray-500 max-w-[200px]\">\n Based on live market prices.\n <\/div>\n <\/div>\n <\/div>\n\n \n <h3 class=\"text-lg font-bold text-gray-800 border-b pb-2 mb-4\">Assets (Wealth)<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Gold Value<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"goldValue\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Silver Value<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"silverValue\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Cash on Hand \/ Bank<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"cash\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Investments \/ Shares<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"investments\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Loans Receivable<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"loansGiven\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Business Stock Value<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"tradeGoods\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <\/div>\n\n \n <h3 class=\"text-lg font-bold text-gray-800 border-b pb-2 mb-4\">Liabilities (Debts)<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Debts \/ Borrowed Money<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"borrowedMoney\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Expenses Due Immediately<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"billsDue\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Wages Due<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"wagesDue\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-gray-50 rounded-xl p-6 border border-gray-200 text-center\">\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 text-sm text-gray-600\">\n <div>Total Assets: <span id=\"totalAssets\" class=\"font-bold text-gray-800\">0.00<\/span><\/div>\n <div>Total Liabilities: <span id=\"totalLiabilities\" class=\"font-bold text-gray-800\">0.00<\/span><\/div>\n <div>Net Assets: <span id=\"netAssets\" class=\"font-bold text-gray-800\">0.00<\/span><\/div>\n <\/div>\n \n <div class=\"py-4 border-t border-gray-200\">\n <p class=\"text-gray-500 mb-1\">Zakat Payable (2.5%)<\/p>\n <p id=\"zakatResult\" class=\"text-4xl font-extrabold text-dt-blue mb-2\">$0.00<\/p>\n <p id=\"zakatMessage\" class=\"text-sm text-orange-500 font-medium\">Your net assets are below the Nisab value.<\/p>\n <\/div>\n\n <div class=\"mt-6 space-y-3\">\n <button id=\"donateZakatButton\" disabled class=\"w-full btn-gradient text-white font-bold py-3.5 px-6 rounded-full shadow-lg hover:shadow-xl transition-all transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none flex items-center justify-center\">\n <i class=\"fab fa-paypal mr-2\"><\/i> Pay via PayPal\n <\/button>\n <button id=\"openWiseModalBtn\" disabled class=\"w-full bg-white border-2 border-gray-200 text-gray-700 font-bold py-3.5 px-6 rounded-full hover:bg-gray-50 hover:border-gray-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center\">\n <svg class=\"w-5 h-5 mr-2\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12.13 2.19a.46.46 0 00-.26 0l-9.08 5a.48.48 0 00-.23.42v9.54c0 .17.09.33.23.42l9.08 5.04a.46.46 0 00.26 0l9.08-5.04a.48.48 0 00.23-.42V7.61a.48.48 0 00-.23-.42l-9.08-5zm-.67 1.25l.58.32 7.43 4.1-3.64 2.02-4.37-2.42v-4zm1.11 0l4.38 2.43-3.8 2.1-.58-.32zm-1.11.6v4l4.38 2.43.58.32.58-.32 3.64-2.02-7.44-4.11-.57-.32zM3.46 8.16l8.13 4.5V20.7L3.46 16.12V8.16zm9.21 4.5l8.14-4.5v7.96l-8.14 4.55V12.66z\"\/><\/svg>\n Pay via Wise\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:col-span-2 flex flex-col justify-center\" data-aos=\"fade-left\" data-aos-delay=\"200\">\n <div class=\"bg-white p-8 rounded-2xl shadow-md border border-gray-100 h-full\">\n <div class=\"mb-8\">\n <div class=\"w-12 h-1 bg-dt-yellow rounded-full mb-4\"><\/div>\n <h2 class=\"text-3xl font-bold text-dt-blue mb-4\">Understanding Zakat Maal<\/h2>\n <p class=\"text-gray-600 leading-relaxed\">\n Zakat Maal, or zakat on wealth, is an obligatory charity for every capable Muslim. It is a pillar of Islam that ensures the circulation of wealth and supports the vulnerable in society. The rate is <strong>2.5%<\/strong> of one’s total savings and wealth that has been held for one full lunar year (Haul) and exceeds the minimum threshold, known as the <strong>Nisab<\/strong>.\n <\/p>\n <\/div>\n \n <div class=\"space-y-8\">\n <div>\n <h4 class=\"flex items-center font-bold text-dt-blue text-lg mb-2\">\n <i class=\"fas fa-university mr-2 text-dt-yellow\"><\/i>\n View of Dar al-Ifta al-Misriyyah\n <\/h4>\n <p class=\"text-gray-600 text-sm leading-relaxed\">\n Dar al-Ifta emphasizes that Zakat is a divine right of the poor upon the wealth of the rich. They state that Zakat is applicable to assets that are productive or have the potential for growth, including cash, gold, silver, business inventory, and livestock. They stress the importance of calculating Zakat accurately based on current market values to fulfill the obligation correctly.\n <\/p>\n <\/div>\n \n <div>\n <h4 class=\"flex items-center font-bold text-dt-blue text-lg mb-2\">\n <i class=\"fas fa-mosque mr-2 text-dt-yellow\"><\/i>\n View of Al-Azhar al-Sharif\n <\/h4>\n <p class=\"text-gray-600 text-sm leading-relaxed\">\n Al-Azhar, as a leading authority in the Sunni Islamic world, teaches that Zakat is a fundamental act of worship and a cornerstone of social justice. It purifies the soul of the giver from greed and the heart of the recipient from envy. Al-Azhar scholars clarify that the Nisab for gold is 85 grams of pure gold, and for silver, it is 595 grams.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n <\/section>\n\n \n <section class=\"py-16 lg:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\" data-aos=\"fade-up\">\n <h2 class=\"text-3xl lg:text-4xl font-bold text-dt-blue\">Where Your Zakat Goes<\/h2>\n <p class=\"text-gray-600 mt-4 max-w-2xl mx-auto\">Stay updated with our latest activities and the impact of your donations across the globe.<\/p>\n <\/div>\n <div id=\"news-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <div class=\"lg:col-span-3 text-center\">\n <div class=\"news-loader\"><\/div>\n <p class=\"text-gray-500\">Loading latest stories…<\/p>\n <\/div>\n \n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n \n <footer class=\"bg-dt-blue\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-6 py-16 text-gray-300\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12\">\n \n <div class=\"md:col-span-2 lg:col-span-1\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/12\/DT-PEDULI-PUTIH.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <p class=\"text-gray-400 text-sm leading-relaxed mb-6\">\n A globally trusted charity empowering communities and spreading goodness through sustainable programs in education, health, economy, and humanitarian aid.\n <\/p>\n <div class=\"text-xs text-gray-500 space-y-1 p-4 bg-white\/5 rounded-lg border border-white\/10\">\n <p><strong>ID:<\/strong> SK KEMENAG RI NO 1200 (2022)<\/p>\n <p><strong>AUS:<\/strong> ABN 68709571627<\/p>\n <p><strong>TR:<\/strong> Darul Tevhid Derne\u011fi (K\u00fct\u00fck No: 34-285-124)<\/p>\n <\/div>\n <\/div>\n\n \n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Explore<\/h3>\n <ul class=\"space-y-3 text-sm\">\n <li><a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"hover:text-dt-yellow transition-colors flex items-center\"><span class=\"w-1.5 h-1.5 bg-dt-yellow rounded-full mr-2\"><\/span>About Us<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"hover:text-dt-yellow transition-colors flex items-center\"><span class=\"w-1.5 h-1.5 bg-dt-yellow rounded-full mr-2\"><\/span>News & Stories<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"hover:text-dt-yellow transition-colors flex items-center\"><span class=\"w-1.5 h-1.5 bg-dt-yellow rounded-full mr-2\"><\/span>Zakat Calculator<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"hover:text-dt-yellow transition-colors flex items-center\"><span class=\"w-1.5 h-1.5 bg-dt-yellow rounded-full mr-2\"><\/span>Contact Us<\/a><\/li>\n <\/ul>\n <\/div>\n \n \n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Contact<\/h3>\n <ul class=\"space-y-4 text-gray-400 text-sm\">\n <li class=\"flex items-start\">\n <i class=\"fas fa-map-marker-alt mt-1 mr-3 text-dt-yellow\"><\/i>\n <span>Jl. Gegerkalong Girang No.32, Bandung, Jawa Barat 40153<\/span>\n <\/li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-envelope mr-3 text-dt-yellow\"><\/i>\n <a href=\"mailto:hello@dtpeduli.org\" class=\"hover:text-dt-yellow transition-colors\">hello@dtpeduli.org<\/a>\n <\/li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-phone mr-3 text-dt-yellow\"><\/i>\n <span>+62 813-1712-1712<\/span>\n <\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Follow Us<\/h3>\n <div class=\"flex space-x-3 mb-6\">\n <a href=\"https:\/\/www.facebook.com\/dtpeduliaustralia\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"https:\/\/www.instagram.com\/dtpeduli\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/x.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"https:\/\/youtube.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <p class=\"text-xs text-gray-500\">Subscribe to our newsletter for updates.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-black\/20 border-t border-white\/5\">\n <div class=\"container mx-auto px-6 py-4 text-center text-gray-500 text-xs\">\n © 2025 DT Peduli. All Rights Reserved.\n <\/div>\n <\/div>\n <\/footer>\n\n \n <nav class=\"lg:hidden fixed bottom-0 left-0 right-0 bg-white\/80 backdrop-blur-lg shadow-soft-up rounded-t-2xl flex justify-around items-end z-50 pb-2 pt-1 border-t border-white\/50\">\n \n \n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1946\/1946436.png\" alt=\"Home\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\"> \n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Home<\/span>\n <\/a>\n\n \n <button id=\"servicesButton\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3063\/3063822.png\" alt=\"Services\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Services<\/span>\n <\/button>\n\n \n <button id=\"quickDonateButton\" class=\"relative -top-6 group focus:outline-none tap-highlight-transparent\">\n <div class=\"bg-gradient-to-br from-dt-yellow to-orange-400 rounded-full p-4 shadow-xl border-4 border-white\/80 transform transition-transform group-hover:scale-105 group-active:scale-95\">\n \n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-7 w-7 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z\" clip-rule=\"evenodd\" \/><\/svg>\n <\/div>\n <span class=\"absolute -bottom-5 left-1\/2 transform -translate-x-1\/2 text-[10px] font-bold text-dt-blue whitespace-nowrap\">Donate<\/span>\n <\/button>\n \n \n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1077\/1077114.png\" alt=\"Profile\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Profile<\/span>\n <\/a>\n \n <button id=\"mobileMenuTriggerBottom\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2976\/2976215.png\" alt=\"Menu\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Menu<\/span>\n <\/button>\n <\/nav>\n \n \n <div id=\"quickDonateSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up max-h-[85vh] overflow-y-auto\">\n <div class=\"flex justify-between items-center mb-6 sticky top-0 bg-white pb-2 border-b border-gray-100\">\n <div>\n <h3 class=\"text-xl font-bold text-dt-blue\">Quick Donation<\/h3>\n <p class=\"text-xs text-gray-500\">Select a category to help<\/p>\n <\/div>\n <button id=\"closeQuickDonate\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800 hover:bg-gray-200\">×<\/button>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83d\udcb0<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Zakat Maal<\/span>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83c\udf5a<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Zakat Fitr<\/span>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83d\udcb8<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Infaq<\/span>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-red-50 border border-red-100 hover:border-red-300 hover:bg-red-100 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83c\uddf5\ud83c\uddf8<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Palestine<\/span>\n <\/a>\n \n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83c\udf72<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Fidyah<\/span>\n <\/a>\n <a href=\"http:\/\/dtpeduli.com\/ramadhan\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83c\udf19<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Ramadhan<\/span>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/\" class=\"col-span-2 flex items-center justify-center p-4 rounded-2xl bg-dt-blue text-white font-bold shadow-lg mt-2 hover:bg-blue-800 transition-colors\">\n View All Campaigns\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"servicesSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up\">\n <div class=\"flex justify-between items-center mb-6 border-b border-gray-100 pb-4\">\n <h3 class=\"text-xl font-bold text-dt-blue\">Customer Services<\/h3>\n <button id=\"closeServices\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800\">×<\/button>\n <\/div>\n <div class=\"space-y-3\">\n <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281317121712\" class=\"flex items-center p-4 rounded-xl bg-green-50 border border-green-100 hover:bg-green-100\">\n <i class=\"fab fa-whatsapp text-2xl text-green-600 mr-4\"><\/i>\n <div>\n <p class=\"font-bold text-gray-800 text-sm\">Head Office Support<\/p>\n <p class=\"text-xs text-gray-500\">Chat with us on WhatsApp<\/p>\n <\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-blue-50 border border-blue-100 hover:bg-blue-100\">\n <i class=\"fas fa-headset text-2xl text-blue-600 mr-4\"><\/i>\n <div>\n <p class=\"font-bold text-gray-800 text-sm\">Call Center<\/p>\n <p class=\"text-xs text-gray-500\">Direct line assistance<\/p>\n <\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-red-50 border border-red-100 hover:bg-red-100\">\n <i class=\"fas fa-exclamation-circle text-2xl text-red-500 mr-4\"><\/i>\n <div>\n <p class=\"font-bold text-gray-800 text-sm\">Complaint Service<\/p>\n <p class=\"text-xs text-gray-500\">Report an issue<\/p>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"paymentModal\" class=\"modal hidden fixed inset-0 bg-black bg-opacity-50 z-[100] flex justify-center items-start overflow-y-auto px-4 pt-10 pb-10 opacity-0\">\n <div class=\"modal-content bg-white rounded-2xl shadow-2xl p-6 md:p-8 w-full max-w-md transform scale-95 opacity-0\">\n <div class=\"flex justify-between items-center mb-6\">\n <h3 class=\"text-2xl font-bold text-dt-blue\">Pay Your Zakat Maal<\/h3>\n <button id=\"closePaymentModal\" class=\"text-gray-400 hover:text-gray-800 text-3xl\">×<\/button>\n <\/div>\n \n <div class=\"mb-6 text-center\">\n <p class=\"text-gray-600\">Your calculated Zakat obligation is:<\/p>\n <p id=\"modalZakatAmount\" class=\"text-3xl font-bold text-dt-blue\">Rp0.00<\/p>\n <\/div>\n\n <div class=\"bg-gray-100 border border-dashed border-gray-300 rounded-lg p-4 text-center\">\n <p class=\"text-sm font-semibold text-gray-700 mb-2\">WPPayForm Payment Form<\/p>\n <p id=\"paymentShortcode\" class=\"text-lg font-mono text-dt-blue bg-gray-200 px-2 py-1 rounded inline-block\"> <div class=\"wpf_form_wrapper wpf_form_wrapper_384\">\n <form data-wpf_form_id='384' wpf_form_instance='wpf_form_instance_384_1' class='wpf_form wpf_form_instance_384_1 wpf_strip_default_style wpf_form_id_384 wpf_label_top wpf_asterisk_right wpf_submit_button_pos_left wppayform_has_payment wpf_default_form_styles' method='POST' action='https:\/\/dtpeduli.com\/donate' id='wpf_form_id_384' >\n <span style=\"display: none !important;\"><input type=\"checkbox\" name=\"item__384__wppay_checkme_\" value=\"1\"\n style=\"display: none !important;\" tabindex=\"-1\"><\/span>\n <input type=\"hidden\" name=\"__wpf_form_id\" value=\"384\" \/>\n <input type=\"hidden\" name=\"__wpf_current_url\" value=\"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/176\">\n <input type=\"hidden\" name=\"__wpf_current_page_id\" value=\"176\">\n <div data-element_type=\"customer_name\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_customer_name\" >Your Name <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"customer_name\" condition_id=\"customer_name\" placeholder=\"Name\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_customer_name\" required=\"1\" \/>\n <\/div>\n <\/div>\n <div class=\"wpf-container\">\n <div class=\"wpf-row\" style=\"display: flex; gap: 24px;\">\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div data-element_type=\"customer_email\"\n class=\"wpf_form_group wpf_item_email\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_customer_email\" >Email Address <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"customer_email\" condition_id=\"customer_email\" placeholder=\"Email Address\" value=\"\" type=\"email\" class=\"wpf_form_control wpf_customer_email\" id=\"wpf_input_384_customer_email\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf-col\" style=\"width: 50%\">\n <p id=\"error_phone_code_wpf_input_384_phone_input\" hidden\n name=\"Phone Number\" data-element_type=\"wpf_phone_input_error\">\n <\/p>\n\n <div field_name=\"phone\" style=\"display: block\"\n data-element_type=\"phone\"\n class=\"wpf_form_group wpf_item_tel\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_phone\" >Phone Number<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input style=\"padding-left: 65px;\" value=\"\" class=\"wpf_form_control\" type=\"tel\" id=\"phone_code_wpf_input_384_phone_input\" condition_id=\"phone\" \/>\n <input name=\"phone\" value=\"\" type=\"hidden\" id=\"phone_code_wpf_input_384_phone_input_hidden\" \/>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf_address_wrapper\"><label condition_id=address_input class=\"wpf_address_heading\">Address<\/label><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_address_line_1_\" >Address Line 1 <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"address_input[address_line_1]\" condition_id=\"address_line_1\" placeholder=\"Address Line 1\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_address_line_1_\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_address_line_2_\" >Address Line 2<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[address_line_2]\" condition_id=\"address_line_2\" placeholder=\"Address Line 2\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_address_line_2_\" \/>\n <\/div>\n <\/div>\n <\/div><\/div><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_city_\" >City<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[city]\" condition_id=\"city\" placeholder=\"City\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_city_\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_state_\" >State <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"address_input[state]\" condition_id=\"state\" placeholder=\"State\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_state_\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div><\/div><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_zip_code_\" >ZIP Code<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[zip_code]\" condition_id=\"zip_code\" placeholder=\"ZIP Code\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_zip_code_\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div style=\"display : block\" id=\"wpf_address_input\" data-element_type=\"address_input\" class=\"wpf_form_group wpf_item_select\" >\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_country_\" >Country <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <select data-required=\"yes\" name=\"address_input[country]\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_country_\" condition_id=\"country\" required=\"1\" >\n <option data-type=\"placeholder\" value= >Select Country<\/option>\n <option value=\"AF\" >Afghanistan<\/option>\n <option value=\"AX\" >\u00c5land Islands<\/option>\n <option value=\"AL\" >Albania<\/option>\n <option value=\"DZ\" >Algeria<\/option>\n <option value=\"AS\" >American Samoa<\/option>\n <option value=\"AD\" >Andorra<\/option>\n <option value=\"AO\" >Angola<\/option>\n <option value=\"AI\" >Anguilla<\/option>\n <option value=\"AQ\" >Antarctica<\/option>\n <option value=\"AG\" >Antigua and Barbuda<\/option>\n <option value=\"AR\" >Argentina<\/option>\n <option value=\"AM\" >Armenia<\/option>\n <option value=\"AW\" >Aruba<\/option>\n <option value=\"AU\" >Australia<\/option>\n <option value=\"AT\" >Austria<\/option>\n <option value=\"AZ\" >Azerbaijan<\/option>\n <option value=\"BS\" >Bahamas<\/option>\n <option value=\"BH\" >Bahrain<\/option>\n <option value=\"BD\" >Bangladesh<\/option>\n <option value=\"BB\" >Barbados<\/option>\n <option value=\"BY\" >Belarus<\/option>\n <option value=\"BE\" >Belgium<\/option>\n <option value=\"PW\" >Belau<\/option>\n <option value=\"BZ\" >Belize<\/option>\n <option value=\"BJ\" >Benin<\/option>\n <option value=\"BM\" >Bermuda<\/option>\n <option value=\"BT\" >Bhutan<\/option>\n <option value=\"BO\" >Bolivia<\/option>\n <option value=\"BQ\" >Bonaire, Saint Eustatius and Saba<\/option>\n <option value=\"BA\" >Bosnia and Herzegovina<\/option>\n <option value=\"BW\" >Botswana<\/option>\n <option value=\"BV\" >Bouvet Island<\/option>\n <option value=\"BR\" >Brazil<\/option>\n <option value=\"IO\" >British Indian Ocean Territory<\/option>\n <option value=\"VG\" >British Virgin Islands<\/option>\n <option value=\"BN\" >Brunei<\/option>\n <option value=\"BG\" >Bulgaria<\/option>\n <option value=\"BF\" >Burkina Faso<\/option>\n <option value=\"BI\" >Burundi<\/option>\n <option value=\"KH\" >Cambodia<\/option>\n <option value=\"CM\" >Cameroon<\/option>\n <option value=\"CA\" >Canada<\/option>\n <option value=\"CV\" >Cape Verde<\/option>\n <option value=\"KY\" >Cayman Islands<\/option>\n <option value=\"CF\" >Central African Republic<\/option>\n <option value=\"TD\" >Chad<\/option>\n <option value=\"CL\" >Chile<\/option>\n <option value=\"CN\" >China<\/option>\n <option value=\"CX\" >Christmas Island<\/option>\n <option value=\"CC\" >Cocos (Keeling) Islands<\/option>\n <option value=\"CO\" >Colombia<\/option>\n <option value=\"KM\" >Comoros<\/option>\n <option value=\"CG\" >Congo (Brazzaville)<\/option>\n <option value=\"CD\" >Congo (Kinshasa)<\/option>\n <option value=\"CK\" >Cook Islands<\/option>\n <option value=\"CR\" >Costa Rica<\/option>\n <option value=\"HR\" >Croatia<\/option>\n <option value=\"CU\" >Cuba<\/option>\n <option value=\"CW\" >Curaçao<\/option>\n <option value=\"CY\" >Cyprus<\/option>\n <option value=\"CZ\" >Czech Republic<\/option>\n <option value=\"DK\" >Denmark<\/option>\n <option value=\"DJ\" >Djibouti<\/option>\n <option value=\"DM\" >Dominica<\/option>\n <option value=\"DO\" >Dominican Republic<\/option>\n <option value=\"EC\" >Ecuador<\/option>\n <option value=\"EG\" >Egypt<\/option>\n <option value=\"SV\" >El Salvador<\/option>\n <option value=\"GQ\" >Equatorial Guinea<\/option>\n <option value=\"ER\" >Eritrea<\/option>\n <option value=\"EE\" >Estonia<\/option>\n <option value=\"ET\" >Ethiopia<\/option>\n <option value=\"FK\" >Falkland Islands<\/option>\n <option value=\"FO\" >Faroe Islands<\/option>\n <option value=\"FJ\" >Fiji<\/option>\n <option value=\"FI\" >Finland<\/option>\n <option value=\"FR\" >France<\/option>\n <option value=\"GF\" >French Guiana<\/option>\n <option value=\"PF\" >French Polynesia<\/option>\n <option value=\"TF\" >French Southern Territories<\/option>\n <option value=\"GA\" >Gabon<\/option>\n <option value=\"GM\" >Gambia<\/option>\n <option value=\"GE\" >Georgia<\/option>\n <option value=\"DE\" >Germany<\/option>\n <option value=\"GH\" >Ghana<\/option>\n <option value=\"GI\" >Gibraltar<\/option>\n <option value=\"GR\" >Greece<\/option>\n <option value=\"GL\" >Greenland<\/option>\n <option value=\"GD\" >Grenada<\/option>\n <option value=\"GP\" >Guadeloupe<\/option>\n <option value=\"GU\" >Guam<\/option>\n <option value=\"GT\" >Guatemala<\/option>\n <option value=\"GG\" >Guernsey<\/option>\n <option value=\"GN\" >Guinea<\/option>\n <option value=\"GW\" >Guinea-Bissau<\/option>\n <option value=\"GY\" >Guyana<\/option>\n <option value=\"HT\" >Haiti<\/option>\n <option value=\"HM\" >Heard Island and McDonald Islands<\/option>\n <option value=\"HN\" >Honduras<\/option>\n <option value=\"HK\" >Hong Kong<\/option>\n <option value=\"HU\" >Hungary<\/option>\n <option value=\"IS\" >Iceland<\/option>\n <option value=\"IN\" >India<\/option>\n <option value=\"ID\" >Indonesia<\/option>\n <option value=\"IR\" >Iran<\/option>\n <option value=\"IQ\" >Iraq<\/option>\n <option value=\"IE\" >Ireland<\/option>\n <option value=\"IM\" >Isle of Man<\/option>\n <option value=\"IL\" >Israel<\/option>\n <option value=\"IT\" >Italy<\/option>\n <option value=\"CI\" >Ivory Coast<\/option>\n <option value=\"JM\" >Jamaica<\/option>\n <option value=\"JP\" >Japan<\/option>\n <option value=\"JE\" >Jersey<\/option>\n <option value=\"JO\" >Jordan<\/option>\n <option value=\"KZ\" >Kazakhstan<\/option>\n <option value=\"KE\" >Kenya<\/option>\n <option value=\"KI\" >Kiribati<\/option>\n <option value=\"KW\" >Kuwait<\/option>\n <option value=\"KG\" >Kyrgyzstan<\/option>\n <option value=\"LA\" >Laos<\/option>\n <option value=\"LV\" >Latvia<\/option>\n <option value=\"LB\" >Lebanon<\/option>\n <option value=\"LS\" >Lesotho<\/option>\n <option value=\"LR\" >Liberia<\/option>\n <option value=\"LY\" >Libya<\/option>\n <option value=\"LI\" >Liechtenstein<\/option>\n <option value=\"LT\" >Lithuania<\/option>\n <option value=\"LU\" >Luxembourg<\/option>\n <option value=\"MO\" >Macao S.A.R., China<\/option>\n <option value=\"MK\" >Macedonia<\/option>\n <option value=\"MG\" >Madagascar<\/option>\n <option value=\"MW\" >Malawi<\/option>\n <option value=\"MY\" >Malaysia<\/option>\n <option value=\"MV\" >Maldives<\/option>\n <option value=\"ML\" >Mali<\/option>\n <option value=\"MT\" >Malta<\/option>\n <option value=\"MH\" >Marshall Islands<\/option>\n <option value=\"MQ\" >Martinique<\/option>\n <option value=\"MR\" >Mauritania<\/option>\n <option value=\"MU\" >Mauritius<\/option>\n <option value=\"YT\" >Mayotte<\/option>\n <option value=\"MX\" >Mexico<\/option>\n <option value=\"FM\" >Micronesia<\/option>\n <option value=\"MD\" >Moldova<\/option>\n <option value=\"MC\" >Monaco<\/option>\n <option value=\"MN\" >Mongolia<\/option>\n <option value=\"ME\" >Montenegro<\/option>\n <option value=\"MS\" >Montserrat<\/option>\n <option value=\"MA\" >Morocco<\/option>\n <option value=\"MZ\" >Mozambique<\/option>\n <option value=\"MM\" >Myanmar<\/option>\n <option value=\"NA\" >Namibia<\/option>\n <option value=\"NR\" >Nauru<\/option>\n <option value=\"NP\" >Nepal<\/option>\n <option value=\"NL\" >Netherlands<\/option>\n <option value=\"NC\" >New Caledonia<\/option>\n <option value=\"NZ\" >New Zealand<\/option>\n <option value=\"NI\" >Nicaragua<\/option>\n <option value=\"NE\" >Niger<\/option>\n <option value=\"NG\" >Nigeria<\/option>\n <option value=\"NU\" >Niue<\/option>\n <option value=\"NF\" >Norfolk Island<\/option>\n <option value=\"MP\" >Northern Mariana Islands<\/option>\n <option value=\"KP\" >North Korea<\/option>\n <option value=\"NO\" >Norway<\/option>\n <option value=\"OM\" >Oman<\/option>\n <option value=\"PK\" >Pakistan<\/option>\n <option value=\"PS\" >Palestinian Territory<\/option>\n <option value=\"PA\" >Panama<\/option>\n <option value=\"PG\" >Papua New Guinea<\/option>\n <option value=\"PY\" >Paraguay<\/option>\n <option value=\"PE\" >Peru<\/option>\n <option value=\"PH\" >Philippines<\/option>\n <option value=\"PN\" >Pitcairn<\/option>\n <option value=\"PL\" >Poland<\/option>\n <option value=\"PT\" >Portugal<\/option>\n <option value=\"PR\" >Puerto Rico<\/option>\n <option value=\"QA\" >Qatar<\/option>\n <option value=\"RE\" >Reunion<\/option>\n <option value=\"RO\" >Romania<\/option>\n <option value=\"RU\" >Russia<\/option>\n <option value=\"RW\" >Rwanda<\/option>\n <option value=\"BL\" >Saint Barthélemy<\/option>\n <option value=\"SH\" >Saint Helena<\/option>\n <option value=\"KN\" >Saint Kitts and Nevis<\/option>\n <option value=\"LC\" >Saint Lucia<\/option>\n <option value=\"MF\" >Saint Martin (French part)<\/option>\n <option value=\"SX\" >Saint Martin (Dutch part)<\/option>\n <option value=\"PM\" >Saint Pierre and Miquelon<\/option>\n <option value=\"VC\" >Saint Vincent and the Grenadines<\/option>\n <option value=\"SM\" >San Marino<\/option>\n <option value=\"ST\" >São Tomé and Príncipe<\/option>\n <option value=\"SA\" >Saudi Arabia<\/option>\n <option value=\"SN\" >Senegal<\/option>\n <option value=\"RS\" >Serbia<\/option>\n <option value=\"SC\" >Seychelles<\/option>\n <option value=\"SL\" >Sierra Leone<\/option>\n <option value=\"SG\" >Singapore<\/option>\n <option value=\"SK\" >Slovakia<\/option>\n <option value=\"SI\" >Slovenia<\/option>\n <option value=\"SB\" >Solomon Islands<\/option>\n <option value=\"SO\" >Somalia<\/option>\n <option value=\"ZA\" >South Africa<\/option>\n <option value=\"GS\" >South Georgia\/Sandwich Islands<\/option>\n <option value=\"KR\" >South Korea<\/option>\n <option value=\"SS\" >South Sudan<\/option>\n <option value=\"ES\" >Spain<\/option>\n <option value=\"LK\" >Sri Lanka<\/option>\n <option value=\"SD\" >Sudan<\/option>\n <option value=\"SR\" >Suriname<\/option>\n <option value=\"SJ\" >Svalbard and Jan Mayen<\/option>\n <option value=\"SZ\" >Swaziland<\/option>\n <option value=\"SE\" >Sweden<\/option>\n <option value=\"CH\" >Switzerland<\/option>\n <option value=\"SY\" >Syria<\/option>\n <option value=\"TW\" >Taiwan<\/option>\n <option value=\"TJ\" >Tajikistan<\/option>\n <option value=\"TZ\" >Tanzania<\/option>\n <option value=\"TH\" >Thailand<\/option>\n <option value=\"TL\" >Timor-Leste<\/option>\n <option value=\"TG\" >Togo<\/option>\n <option value=\"TK\" >Tokelau<\/option>\n <option value=\"TO\" >Tonga<\/option>\n <option value=\"TT\" >Trinidad and Tobago<\/option>\n <option value=\"TN\" >Tunisia<\/option>\n <option value=\"TR\" >Turkey<\/option>\n <option value=\"TM\" >Turkmenistan<\/option>\n <option value=\"TC\" >Turks and Caicos Islands<\/option>\n <option value=\"TV\" >Tuvalu<\/option>\n <option value=\"UG\" >Uganda<\/option>\n <option value=\"UA\" >Ukraine<\/option>\n <option value=\"AE\" >United Arab Emirates<\/option>\n <option value=\"GB\" >United Kingdom (UK)<\/option>\n <option value=\"US\" >United States (US)<\/option>\n <option value=\"UM\" >United States (US) Minor Outlying Islands<\/option>\n <option value=\"VI\" >United States (US) Virgin Islands<\/option>\n <option value=\"UY\" >Uruguay<\/option>\n <option value=\"UZ\" >Uzbekistan<\/option>\n <option value=\"VU\" >Vanuatu<\/option>\n <option value=\"VA\" >Vatican<\/option>\n <option value=\"VE\" >Venezuela<\/option>\n <option value=\"VN\" >Vietnam<\/option>\n <option value=\"WF\" >Wallis and Futuna<\/option>\n <option value=\"EH\" >Western Sahara<\/option>\n <option value=\"WS\" >Samoa<\/option>\n <option value=\"YE\" >Yemen<\/option>\n <option value=\"ZM\" >Zambia<\/option>\n <option value=\"ZW\" >Zimbabwe<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div><\/div><\/div> \n <div style = \"display : \" data-element_type=\"donation_item\" data-required_element=\"radio\" data-required=\"yes\" data-target_element=\"donation_item\" class=\"wpf_form_group wpf_item_donation_item\" >\n\n <div class=\"donation-wrapper \">\n <div class=\"wpf_donation_status\">\n <div class=\"raised_amount\">\n <div class=\"number\" name=\"wpf_form_id_384_raised_donation\" data-raised=\"0\">\n $0 <\/div>\n <div class=\"text\">Raised<\/div>\n <\/div>\n <div class=\"count_amount\">\n <div class=\"number\">\n 0 <\/div>\n\n <div class=\"text\">Donations<\/div>\n <\/div>\n <div class=\"goal_amount\">\n <div class=\"number\" name=\"wpf_form_id_384_goal_amount\" data-goal=\"100000\">\n $1,000 <\/div>\n <div class=\"text\">Goal<\/div>\n <\/div>\n <\/div>\n <div class=\"wpf_donation_bar_wrapper\">\n <div class=\"wpf_donation_fields_bar\">\n <div\n class=\"wpf_bar\"\n style=\"width: 0%;\"\n name=\"wpf_form_id_384_bar\"\n data-percentage=\"0\"\n >\n 0% <\/div>\n <\/div>\n <\/div>\n \n <div class=\"wpf_donation_fields_wrapper\" >\n <div class=\"wpf_input_content wpf_donation_controls_custom\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_donation_item\" >Donation Progress Item <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_form_item_group\">\n <div class=\"wpf_input-group-prepend\">\n <div class=\"wpf_input-group-text wpf_input-group-text-prepend\">$<\/div>\n <\/div>\n <input data-required=\"yes\" data-type=\"input\" name=\"donation_item_custom\" value=\"20\" base-price=\"20\" base-currency-price=\"20\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" id=\"wpf_input_384_donation_item\" class=\"wpf_custom_amount wpf_money_amount input-prepend wpf_donation_item\" customname=\"Donation Progress Item\" disabled=\"1\" \/>\n <input data-required=\"yes\" data-type=\"input\" name=\"donation_item_custom\" value=\"20\" base-price=\"20\" base-currency-price=\"20\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" id=\"wpf_input_384_donation_item\" class=\"wpf_custom_amount wpf_money_amount input-prepend wpf_donation_item\" customname=\"Donation Progress Item\" style=\"display: none\" \/>\n <\/div>\n <\/div>\n <br\/>\n <div class=\"wpf_input_content wpf_donation_controls_radio\">\n <div class=\"form-check\">\n <input class=\"form-check-input wpf_payment_item wpf_donation_item_0\" type=\"radio\" data-price=\"1000\" base-price=\"1000\" name=\"donation_item\" id=\"donation_item_0_384\" customname=\"Donation Progress Item\" >\n <label class=\"form-check-label\" for=\"donation_item_0_384\">\n <span class=\"wpf_price_option_name\"\n itemprop=\"description\">\n $10 <\/span>\n <meta itemprop=\"price\" content=\"10\">\n <\/label>\n <\/div>\n <div class=\"form-check\">\n <input class=\"form-check-input wpf_payment_item wpf_donation_item_1\" type=\"radio\" data-price=\"2000\" base-price=\"2000\" name=\"donation_item\" id=\"donation_item_1_384\" value=\"1\" customname=\"Donation Progress Item\" checked=\"true\" >\n <label class=\"form-check-label\" for=\"donation_item_1_384\">\n <span class=\"wpf_price_option_name\"\n itemprop=\"description\">\n $20 <\/span>\n <meta itemprop=\"price\" content=\"20\">\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <input data-wpf_payment_method=\"paypal\" type=\"hidden\" name=\"__paypal_payment_gateway\" value=\"paypal\" \/> <div class=\"wpf-container\">\n <div class=\"wpf-row\" style=\"display: flex; gap: 24px;\">\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div style=\"display : block\" data-element_type=\"currency_switcher\" data-required_element=\"select\" data-required=\"yes\" data-target_element=\"currency_switcher\" required_id=\"currency_switcher\" class=\"wpf_form_group wpf_item_currency_switcher\" >\n <div class=\"wpf_input_label\">\n <label for=\"wpf_currency_switcher\" >Currency Switcher Options <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_multi_form_controls wpf_input_content wpf_multi_form_controls_select\">\n <select data-required=\"yes\" data-type=\"select\" name=\"currency_switcher\" class=\"wpf_form_control wpf_payment_item\" id=\"wpf_input_384_currency_switcher\" >\n <option data-type=\"placeholder\" value=\"\">--Select--<\/option>\n <option value=\"USD\" data-currency=\"USD\" customname=\"United States Dollar\" >United States Dollar (USD)\n <\/option>\n <option value=\"AED\" data-currency=\"AED\" customname=\"United Arab Emirates Dirham\" >United Arab Emirates Dirham (AED)\n <\/option>\n <option value=\"ANG\" data-currency=\"ANG\" customname=\"Netherlands Antillean Gulden\" >Netherlands Antillean Gulden (ANG)\n <\/option>\n <option value=\"AUD\" data-currency=\"AUD\" customname=\"Australian Dollar\" >Australian Dollar (AUD)\n <\/option>\n <option value=\"EGP\" data-currency=\"EGP\" customname=\"Egyptian Pound\" >Egyptian Pound (EGP)\n <\/option>\n <option value=\"EUR\" data-currency=\"EUR\" customname=\"Euro\" >Euro (EUR)\n <\/option>\n <option value=\"GBP\" data-currency=\"GBP\" customname=\"British Pound\" >British Pound (GBP)\n <\/option>\n <option value=\"JPY\" data-currency=\"JPY\" customname=\"Japanese Yen\" >Japanese Yen (JPY)\n <\/option>\n <option value=\"MYR\" data-currency=\"MYR\" customname=\"Malaysian Ringgit\" >Malaysian Ringgit (MYR)\n <\/option>\n <option value=\"NZD\" data-currency=\"NZD\" customname=\"New Zealand Dollar\" >New Zealand Dollar (NZD)\n <\/option>\n <option value=\"QAR\" data-currency=\"QAR\" customname=\"Qatari Riyal\" >Qatari Riyal (QAR)\n <\/option>\n <option value=\"SAR\" data-currency=\"SAR\" customname=\"Saudi Riyal\" >Saudi Riyal (SAR)\n <\/option>\n <option value=\"SGD\" data-currency=\"SGD\" customname=\"Singapore Dollar\" >Singapore Dollar (SGD)\n <\/option>\n <option value=\"TRY\" data-currency=\"TRY\" customname=\"Turkish Lira\" >Turkish Lira (TRY)\n <\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div style= \"display : block\" data-element_type=\"custom_payment_input\"\n class=\"wpf_form_group wpf_item_custom_payment_input\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_custom_payment_input\" >Custom Payment Amount<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <div class=\"wpf_form_item_group\">\n <div class=\"wpf_input-group-prepend\">\n <div class=\"wpf_input-group-text wpf_input-group-text-prepend\">$<\/div>\n <\/div>\n <input data-required=\"no\" data-type=\"input\" name=\"custom_payment_input\" placeholder=\"\" value=\"\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" min=\"\" data-price=\"0\" id=\"wpf_input_384_custom_payment_input\" customname=\"Custom Payment Amount\" class=\"wpf_form_control wpf_custom_amount wpf_money_amount wpf_payment_item input-prepend\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n \n <div class=\"wpf_form_group wpf_form_submissions\" style=\"margin-top: 20px;\">\n <button id='stripe_form_submit_384' disabled='1' class='wpf_submit_button wpf_default_btn' >\n <span class=\"wpf_txt_normal\">Pay Your Zakat Now<\/span>\n <span style=\"display: none;\" class=\"wpf_txt_loading\">\n Please Wait\u2026 <\/span>\n <\/button>\n <div class=\"wpf_loading_svg\">\n <svg version=\"1.1\" id=\"loader-1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" width=\"30px\" height=\"30px\" viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\" xml:space=\"preserve\">\n <path opacity=\"0.2\" fill=\"#000\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z\" \/>\n <path fill=\"#000\" d=\"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z\">\n <animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 20 20\" to=\"360 20 20\" dur=\"0.5s\" repeatCount=\"indefinite\" \/>\n <\/path>\n <\/svg>\n <\/div>\n <\/div>\n <\/form>\n <div style=\"display: none\" class=\"wpf_form_notices\"><\/div>\n <\/div>\n\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"wisePaymentModal\" class=\"modal hidden fixed inset-0 bg-black bg-opacity-50 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 opacity-0\">\n <div class=\"modal-content bg-white w-full max-w-2xl rounded-2xl shadow-2xl relative transform scale-95 opacity-0 flex flex-col\" style=\"height: 90vh;\">\n <div class=\"flex-shrink-0 p-6 border-b flex justify-between items-center\">\n <div>\n <h2 class=\"text-2xl font-bold text-dt-blue\">Pay Zakat Maal via Wise<\/h2>\n <p id=\"wise-modal-subtitle\" class=\"text-gray-500 mt-1\">Complete your international payment.<\/p>\n <\/div>\n <button id=\"closeWiseModal\" class=\"text-gray-400 hover:text-gray-700 text-3xl leading-none\">×<\/button>\n <\/div>\n <div class=\"flex-grow p-2\">\n <iframe id=\"wiseIframe\" src=\"\" class=\"w-full h-full border-0 rounded-b-xl\"><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n \n \n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n \/\/ Initialize AOS (Animate On Scroll)\n if (typeof AOS !== 'undefined') {\n AOS.init({ once: true, duration: 800, easing: 'ease-in-out-cubic' });\n }\n\n \/\/ --- Sticky Header Logic ---\n const header = document.getElementById('mainHeader');\n if (header) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) header.classList.add('header-scrolled');\n else header.classList.remove('header-scrolled');\n });\n }\n\n \/\/ --- Mobile Menu Logic ---\n const mobileMenuButton = document.getElementById('mobileMenuButton');\n const mobileMenuTriggerBottom = document.getElementById('mobileMenuTriggerBottom');\n const mobileMenu = document.getElementById('mobileMenu');\n \n function toggleMobileMenu() {\n const isOpen = mobileMenu.classList.contains('is-open');\n mobileMenu.classList.toggle('is-open');\n const openIcon = document.getElementById('menu-open-icon');\n const closeIcon = document.getElementById('menu-close-icon');\n \n if (isOpen) {\n document.body.style.overflow = '';\n openIcon.classList.remove('hidden');\n closeIcon.classList.add('hidden');\n } else {\n document.body.style.overflow = 'hidden';\n openIcon.classList.add('hidden');\n closeIcon.classList.remove('hidden');\n }\n }\n\n if (mobileMenuButton) mobileMenuButton.addEventListener('click', toggleMobileMenu);\n if (mobileMenuTriggerBottom) mobileMenuTriggerBottom.addEventListener('click', toggleMobileMenu);\n\n \/\/ Accordion\n document.querySelectorAll('.mobile-menu-item button').forEach(btn => {\n btn.addEventListener('click', () => {\n const submenu = btn.nextElementSibling;\n const icon = btn.querySelector('i');\n const isOpen = submenu.style.maxHeight && submenu.style.maxHeight !== '0px';\n \n document.querySelectorAll('.mobile-submenu').forEach(el => el.style.maxHeight = '0px');\n document.querySelectorAll('.mobile-menu-item i').forEach(el => el.classList.remove('rotate-180'));\n\n if (!isOpen) {\n submenu.style.maxHeight = submenu.scrollHeight + \"px\";\n icon.classList.add('rotate-180');\n }\n });\n });\n\n \/\/ --- Sticky Bottom Nav Submenus ---\n const quickDonateBtn = document.getElementById('quickDonateButton');\n const servicesBtn = document.getElementById('servicesButton');\n const quickDonateMenu = document.getElementById('quickDonateSubmenu');\n const servicesMenu = document.getElementById('servicesSubmenu');\n const closeQuick = document.getElementById('closeQuickDonate');\n const closeServ = document.getElementById('closeServices');\n\n function toggleBottomMenu(menuToShow, menuToHide) {\n if(menuToHide) menuToHide.classList.add('hidden');\n if(menuToShow) menuToShow.classList.toggle('hidden');\n }\n\n if(quickDonateBtn) quickDonateBtn.addEventListener('click', () => toggleBottomMenu(quickDonateMenu, servicesMenu));\n if(servicesBtn) servicesBtn.addEventListener('click', () => toggleBottomMenu(servicesMenu, quickDonateMenu));\n if(closeQuick) closeQuick.addEventListener('click', () => closeSubmenu(quickDonateMenu));\n if(closeServ) closeServ.addEventListener('click', () => closeSubmenu(servicesMenu));\n \n \/\/ Close on backdrop click\n [quickDonateMenu, servicesMenu].forEach(menu => {\n if(menu) menu.addEventListener('click', (e) => { if(e.target === menu) closeSubmenu(menu); });\n });\n\n const openSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('hidden');\n setTimeout(() => submenu.classList.add('is-open'), 10);\n document.body.style.overflow = 'hidden';\n };\n\n const closeSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('is-open');\n setTimeout(() => submenu.classList.add('hidden'), 300); \/\/ Wait for transition\n document.body.style.overflow = '';\n };\n\n \/\/ --- Mega Menu Hover Logic ---\n const programLinks = document.querySelectorAll('.program-link');\n const panels = document.querySelectorAll('.program-content-panel');\n programLinks.forEach(link => {\n link.addEventListener('mouseenter', () => {\n const id = link.dataset.program;\n programLinks.forEach(l => l.classList.remove('active', 'bg-white', 'shadow-sm'));\n link.classList.add('active', 'bg-white', 'shadow-sm');\n panels.forEach(p => p.classList.remove('active'));\n const target = document.getElementById(`program-content-${id}`);\n if(target) target.classList.add('active');\n });\n });\n \/\/ Set default active\n if(programLinks.length > 0) {\n programLinks[0].classList.add('active', 'bg-white', 'shadow-sm');\n if(panels.length > 0) panels[0].classList.add('active');\n }\n\n \/\/ --- Zakat Calculator Logic ---\n const currencySelect = document.getElementById('currency');\n const nisabBasisSelect = document.getElementById('nisabBasis');\n const nisabValueEl = document.getElementById('nisabValue');\n const allInputs = document.querySelectorAll('.zakat-input');\n const currencySymbolEls = document.querySelectorAll('.currency-symbol');\n const totalAssetsEl = document.getElementById('totalAssets');\n const totalLiabilitiesEl = document.getElementById('totalLiabilities');\n const netAssetsEl = document.getElementById('netAssets');\n const zakatResultEl = document.getElementById('zakatResult');\n const zakatMessageEl = document.getElementById('zakatMessage');\n \n \/\/ Payment Elements\n const donateZakatButton = document.getElementById('donateZakatButton');\n const openWiseModalBtn = document.getElementById('openWiseModalBtn');\n const paymentModal = document.getElementById('paymentModal');\n const closePaymentModalBtn = document.getElementById('closePaymentModal');\n const modalZakatAmountEl = document.getElementById('modalZakatAmount');\n const paymentShortcodeEl = document.getElementById('paymentShortcode');\n const wisePaymentModal = document.getElementById('wisePaymentModal');\n const closeWiseModalBtn = document.getElementById('closeWiseModal');\n const wiseIframe = document.getElementById('wiseIframe');\n const wiseModalSubtitle = document.getElementById('wise-modal-subtitle');\n \n const paymentFormIds = { 'IDR': 384, 'AUD': 385, 'USD': 386, 'SGD': 387, 'MYR': 388, 'TRY': 389 };\n const NISAB_GOLD_GRAMS = 85;\n const NISAB_SILVER_GRAMS = 595;\n const ZAKAT_RATE = 0.025;\n const TROY_OUNCE_IN_GRAMS = 31.1035;\n\n let goldPriceUSD = 0, silverPriceUSD = 0, exchangeRates = {}, currentCurrency = 'USD', currentNisabValue = 0, currentZakatAmount = 0;\n\n async function initializeCalculator() {\n await fetchApiData();\n populateCurrencies();\n addEventListeners();\n updateCalculator();\n }\n\n async function fetchApiData() {\n try {\n const [metalRes, currencyRes] = await Promise.all([\n fetch('https:\/\/api.metals.live\/v1\/spot').catch(e=>null),\n fetch('https:\/\/api.exchangerate-api.com\/v4\/latest\/USD').catch(e=>null)\n ]);\n const metalData = metalRes && metalRes.ok ? await metalRes.json() : [{metal: 'XAU', price: 2350.50}, {metal: 'XAG', price: 30.50}];\n const currencyData = currencyRes && currencyRes.ok ? await currencyRes.json() : {rates: {\"USD\":1,\"EUR\":0.92,\"GBP\":0.79,\"AUD\":1.50,\"CAD\":1.37,\"IDR\":16250.00,\"SGD\":1.35,\"MYR\":4.70, \"TRY\":32.25}};\n \n let goldItem = metalData.find ? metalData.find(m => m.metal === 'XAU') : null; \n let silverItem = metalData.find ? metalData.find(m => m.metal === 'XAG') : null;\n \n goldPriceUSD = (goldItem ? goldItem.price : 2350.50) \/ TROY_OUNCE_IN_GRAMS;\n silverPriceUSD = (silverItem ? silverItem.price : 30.50) \/ TROY_OUNCE_IN_GRAMS;\n exchangeRates = currencyData.rates;\n } catch (error) {\n console.error(\"Failed to fetch API data, using mock data:\", error);\n goldPriceUSD = 2350.50 \/ TROY_OUNCE_IN_GRAMS;\n silverPriceUSD = 30.50 \/ TROY_OUNCE_IN_GRAMS;\n exchangeRates = {\"USD\":1,\"EUR\":0.92,\"GBP\":0.79,\"AUD\":1.50,\"CAD\":1.37,\"IDR\":16250.00,\"SGD\":1.35,\"MYR\":4.70, \"TRY\":32.25};\n }\n }\n\n function populateCurrencies() {\n if (!currencySelect) return;\n const currencies = Object.keys(exchangeRates);\n const preferredCurrencies = ['IDR', 'AUD', 'USD', 'SGD', 'MYR', 'TRY', 'SAR', 'EUR', 'GBP'];\n \n const otherCurrencies = currencies.filter(c => !preferredCurrencies.includes(c)).sort();\n const sortedCurrencies = [...new Set([...preferredCurrencies, ...otherCurrencies])];\n\n let currencyNames;\n try {\n currencyNames = new Intl.DisplayNames(['en'], { type: 'currency' });\n } catch (e) {\n console.warn(\"Intl.DisplayNames not supported\");\n }\n\n currencySelect.innerHTML = ''; \n\n sortedCurrencies.forEach(currency => {\n if (exchangeRates[currency]) {\n const option = document.createElement('option');\n option.value = currency;\n let displayName = currency;\n if (currencyNames) {\n try {\n const name = currencyNames.of(currency);\n displayName = `${currency} - ${name}`;\n } catch (e) {}\n }\n option.textContent = displayName;\n currencySelect.appendChild(option);\n }\n });\n \n if (exchangeRates['IDR']) {\n currencySelect.value = 'IDR';\n } else {\n currencySelect.value = 'USD';\n }\n }\n \n function getCurrencySymbol(currencyCode) {\n try {\n return (0).toLocaleString(undefined, { style: 'currency', currency: currencyCode, minimumFractionDigits: 0, maximumFractionDigits: 0 }).replace(\/[0-9]\/g, '').trim();\n } catch (e) {\n const symbols = { USD: '$', EUR: '\u20ac', GBP: '\u00a3', AUD: 'A$', CAD: 'C$', IDR: 'Rp', SGD: 'S$', MYR: 'RM', TRY: '\u20ba' };\n return symbols[currencyCode] || currencyCode;\n }\n }\n\n function formatCurrency(value, currencyCode) {\n try {\n return value.toLocaleString(undefined, { style: 'currency', currency: currencyCode });\n } catch (e) {\n return `${getCurrencySymbol(currencyCode)}${value.toFixed(2)}`;\n }\n }\n\n function updateCalculator() {\n currentCurrency = currencySelect.value;\n const rate = exchangeRates[currentCurrency];\n \n currencySymbolEls.forEach(el => el.textContent = getCurrencySymbol(currentCurrency));\n const nisabBasis = nisabBasisSelect.value;\n const nisabGrams = nisabBasis === 'gold' ? NISAB_GOLD_GRAMS : NISAB_SILVER_GRAMS;\n const pricePerGramUSD = nisabBasis === 'gold' ? goldPriceUSD : silverPriceUSD;\n \n currentNisabValue = nisabGrams * pricePerGramUSD * rate;\n nisabValueEl.textContent = formatCurrency(currentNisabValue, currentCurrency);\n\n let totalAssets = 0;\n document.querySelectorAll('#goldValue, #silverValue, #cash, #loansGiven, #investments, #tradeGoods').forEach(input => {\n totalAssets += parseFloat(input.value) || 0;\n });\n\n let totalLiabilities = 0;\n document.querySelectorAll('#borrowedMoney, #wagesDue, #billsDue').forEach(input => {\n totalLiabilities += parseFloat(input.value) || 0;\n });\n\n const netAssets = totalAssets - totalLiabilities;\n totalAssetsEl.textContent = formatCurrency(totalAssets, currentCurrency);\n totalLiabilitiesEl.textContent = formatCurrency(totalLiabilities, currentCurrency);\n netAssetsEl.textContent = formatCurrency(netAssets, currentCurrency);\n\n if (netAssets >= currentNisabValue) {\n currentZakatAmount = netAssets * ZAKAT_RATE;\n zakatResultEl.textContent = formatCurrency(currentZakatAmount, currentCurrency);\n zakatMessageEl.textContent = `Your net assets are above the Nisab value. Your Zakat is 2.5% of your net assets.`;\n zakatMessageEl.classList.remove('text-orange-500');\n zakatMessageEl.classList.add('text-green-600');\n donateZakatButton.disabled = false;\n if(openWiseModalBtn) openWiseModalBtn.disabled = false;\n } else {\n currentZakatAmount = 0;\n zakatResultEl.textContent = formatCurrency(0, currentCurrency);\n zakatMessageEl.textContent = `Your net assets are below the Nisab value of ${formatCurrency(currentNisabValue, currentCurrency)}.`;\n zakatMessageEl.classList.remove('text-green-600');\n zakatMessageEl.classList.add('text-orange-500');\n donateZakatButton.disabled = true;\n if(openWiseModalBtn) openWiseModalBtn.disabled = true;\n }\n }\n \n \/\/ Modal Functions\n function openModal(modal) {\n if (!modal) return;\n const modalContent = modal.querySelector('.modal-content');\n document.body.style.overflow = 'hidden';\n modal.classList.remove('hidden');\n setTimeout(() => {\n modal.classList.remove('opacity-0');\n if (modalContent) modalContent.classList.remove('scale-95', 'opacity-0');\n }, 10);\n }\n\n function closeModal(modal) {\n if (!modal) return;\n const modalContent = modal.querySelector('.modal-content');\n document.body.style.overflow = '';\n modal.classList.add('opacity-0');\n if (modalContent) modalContent.classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n modal.classList.add('hidden');\n \/\/ Stop iframe content when closing wise modal to stop video\/process\n if (modal.id === 'wisePaymentModal' && wiseIframe) {\n wiseIframe.src = ''; \n }\n }, 300);\n }\n\n const setupAndOpenPaypalModal = () => {\n if (!modalZakatAmountEl || !paymentShortcodeEl) return;\n modalZakatAmountEl.textContent = formatCurrency(currentZakatAmount, currentCurrency);\n const formId = paymentFormIds[currentCurrency] || paymentFormIds['IDR'];\n paymentShortcodeEl.textContent = ``;\n openModal(paymentModal);\n };\n\n const setupAndOpenWiseModal = () => {\n if (!wiseModalSubtitle || !wiseIframe) return;\n wiseModalSubtitle.textContent = `Total Payment: ${formatCurrency(currentZakatAmount, currentCurrency)}`;\n \/\/ Replace with actual Wise integration link logic\n const wiseUrl = `https:\/\/dtpeduli.com\/donate-via-wise\/?amount=${currentZakatAmount.toFixed(2)}¤cy=${currentCurrency}`; \n wiseIframe.src = wiseUrl;\n openModal(wisePaymentModal);\n };\n\n\n function addEventListeners() {\n if (currencySelect) currencySelect.addEventListener('change', updateCalculator);\n if (nisabBasisSelect) nisabBasisSelect.addEventListener('change', updateCalculator);\n allInputs.forEach(input => input.addEventListener('input', updateCalculator));\n \n \/\/ Paypal Modal Triggers\n if (donateZakatButton) donateZakatButton.addEventListener('click', () => { if (!donateZakatButton.disabled) setupAndOpenPaypalModal(); });\n if(closePaymentModalBtn) closePaymentModalBtn.addEventListener('click', () => closeModal(paymentModal));\n if(paymentModal) paymentModal.addEventListener('click', (e) => { if (e.target === paymentModal) closeModal(paymentModal); });\n \n \/\/ Wise Modal Triggers\n if (openWiseModalBtn) openWiseModalBtn.addEventListener('click', () => { if (!openWiseModalBtn.disabled) setupAndOpenWiseModal(); });\n if (closeWiseModalBtn) closeWiseModalBtn.addEventListener('click', () => closeModal(wisePaymentModal));\n if (wisePaymentModal) wisePaymentModal.addEventListener('click', (e) => { if (e.target === wisePaymentModal) closeModal(wisePaymentModal); });\n }\n \n if (currencySelect && nisabBasisSelect) {\n initializeCalculator();\n }\n \n \/\/ --- News Integration Logic ---\n const newsContainer = document.getElementById('news-container');\n async function fetchNewsAndStories() {\n if (!newsContainer) return;\n const apiUrl = 'https:\/\/dtpeduli.com\/wp-json\/wp\/v2\/posts?_embed&per_page=3';\n try {\n const response = await fetch(apiUrl);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n const posts = await response.json();\n newsContainer.innerHTML = '';\n posts.forEach(post => {\n const title = post.title.rendered;\n const link = post.link;\n const excerpt = post.excerpt.rendered.replace(\/<[^>]*>?\/gm, '').replace('[…]', '...');\n const imageUrl = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || `https:\/\/placehold.co\/600x400\/00358f\/FFFFFF?text=News`;\n \n const card = document.createElement('div');\n card.className = 'bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 flex flex-col';\n card.setAttribute('data-aos', 'fade-up');\n card.innerHTML = `\n <a href=\"${link}\" target=\"_blank\" class=\"block\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${title}\" class=\"w-full h-48 object-cover\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x400\/00358f\/FFFFFF?text=Image+Not+Found';\">\n <\/a>\n <div class=\"p-6 flex flex-col flex-grow\">\n <h3 class=\"font-bold text-xl mb-2 text-dt-blue\">\n <a href=\"${link}\" target=\"_blank\" class=\"hover:underline\">${title}<\/a>\n <\/h3>\n <p class=\"text-gray-600 text-base mb-4 flex-grow\">${excerpt}<\/p>\n <a href=\"${link}\" target=\"_blank\" class=\"w-full text-center bg-dt-blue text-white font-bold py-2 px-6 rounded-full hover:bg-opacity-90 transition-colors mt-auto\">Read More<\/a>\n <\/div>\n `;\n newsContainer.appendChild(card);\n });\n } catch (error) {\n console.error(\"Could not fetch news:\", error);\n newsContainer.innerHTML = `<div class=\"lg:col-span-3 text-center\"><p class=\"text-red-500\">Could not load the latest stories. Please try again later.<\/p><\/div>`;\n }\n }\n fetchNewsAndStories();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Donate | DT Peduli – Spreading Goodness Home About Us Profile Our Management History Official Address Programs Our Core Pillars […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-176","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":41,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/176\/revisions"}],"predecessor-version":[{"id":557,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/176\/revisions\/557"}],"wp:attachment":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/media?parent=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":176,"date":"2025-07-24T06:14:31","date_gmt":"2025-07-24T06:14:31","guid":{"rendered":"https:\/\/dtpeduli.com\/donate\/?page_id=176"},"modified":"2025-12-05T04:27:21","modified_gmt":"2025-12-05T04:27:21","slug":"zakat-maal","status":"publish","type":"page","link":"https:\/\/dtpeduli.com\/donate\/zakat-maal\/","title":{"rendered":"Zakat Maal"},"content":{"rendered":"\n\n\n\n \n \n Donate | DT Peduli – Spreading Goodness<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n \n \n <link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n\n \n <style>\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n \/* 3. FIX TUMPANG TINDIH: Padding bawah untuk mobile *\/\n padding-bottom: 90px; \n overflow-x: hidden;\n }\n @media (min-width: 1024px) {\n body { padding-bottom: 0; }\n }\n\n .bg-dt-blue { background-color: #00358f; }\n .text-dt-blue { color: #00358f; }\n .bg-dt-yellow { background-color: #ffaf23; }\n .text-dt-yellow { color: #ffaf23; }\n .border-dt-yellow { border-color: #ffaf23; }\n .ring-dt-yellow { --tw-ring-color: #ffaf23; }\n\n \/* 3. Modern Sticky Mobile Styles (Glassmorphism & Shadow) *\/\n .shadow-soft-up {\n box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.1);\n }\n \n \/* Sticky Header *\/\n #mainHeader {\n transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;\n }\n .header-scrolled {\n background-color: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);\n }\n\n \/* 1. Hero Section Styling - Full Width *\/\n .hero-section {\n background-color: #1a202c;\n height: 60vh;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n \n \/* Submenu Panel Animation *\/\n .submenu-panel {\n transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n }\n .submenu-panel.hidden {\n transform: translateY(100%);\n }\n \n \/* 7. HILANGKAN JARAK: Menggunakan top: 100% agar menempel *\/\n .group .mega-menu, .group .simple-dropdown {\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;\n opacity: 0;\n transform: translateY(10px);\n pointer-events: none;\n visibility: hidden;\n top: 100%; \n margin-top: 0;\n }\n .group:hover .mega-menu, .group:hover .simple-dropdown {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n visibility: visible;\n }\n \n \/* Mobile Menu Overlay Styles *\/\n #mobileMenu.is-open {\n transform: translateY(0);\n }\n \/* Mobile Menu Accordion *\/\n .mobile-submenu {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);\n }\n\n \/* 2. Mega Menu Interaction - Compact Layout *\/\n .program-link:hover, .program-link.active {\n background-color: white;\n transform: translateX(4px);\n box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);\n }\n .program-link.active {\n border-left: 3px solid #00358f;\n }\n .program-link {\n border-left: 3px solid transparent;\n padding: 0.5rem 0.75rem;\n }\n .program-content-panel {\n position: absolute;\n top: 1rem;\n left: 1.5rem;\n right: 1.5rem;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease-in-out;\n }\n .program-content-panel.active {\n opacity: 1;\n visibility: visible;\n }\n .mega-menu-img {\n height: 180px;\n object-fit: cover;\n }\n \n \/* Animation Keyframes *\/\n @keyframes slide-up {\n from { transform: translateY(100%); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n .animate-slide-up {\n animation: slide-up 0.3s ease-out forwards;\n }\n\n \/* Custom Button Gradient *\/\n .btn-gradient {\n background-image: linear-gradient(to right, #00358f, #0052a5);\n transition: all 0.3s ease;\n background-size: 200% auto;\n }\n .btn-gradient:hover {\n background-position: right center;\n transform: translateY(-2px);\n box-shadow: 0 10px 20px -10px rgba(0, 53, 143, 0.5);\n }\n \n \/* Calculator Specifics *\/\n .calculator-loader {\n border: 3px solid #f3f3f3;\n border-top: 3px solid #00358f;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n }\n .news-loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #00358f;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 20px auto;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n .input-group { position: relative; }\n .input-group .currency-symbol {\n position: absolute;\n top: 50%;\n left: 0.75rem;\n transform: translateY(-50%);\n pointer-events: none;\n color: #6b7280;\n }\n .input-group input { padding-left: 2.5rem; }\n button:disabled {\n background-color: #d1a55b;\n cursor: not-allowed;\n transform: scale(1);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50\">\n\n \n <header id=\"mainHeader\" class=\"sticky top-0 z-50 w-full bg-white\/90 backdrop-blur-md border-b border-gray-100\">\n <div class=\"container mx-auto px-4 lg:px-6\">\n <div class=\"flex items-center justify-between h-16 lg:h-20\">\n \n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/erp.dtpeduli.org\/assets\/2025-06\/250618K5BPVT.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <\/a>\n \n \n <div class=\"hidden lg:flex items-center\">\n \n <nav class=\"flex items-center space-x-1 h-full\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors\">Home<\/a>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>About Us<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute left-0 w-56 origin-top-left bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1 top-full mt-0\">\n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Official Address<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>Programs<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"mega-menu absolute -right-24 w-screen max-w-4xl origin-top-right z-50 top-full mt-0\">\n <div class=\"bg-white rounded-xl shadow-2xl border border-gray-100 grid grid-cols-12 overflow-hidden\">\n \n <div class=\"col-span-4 bg-gray-50 p-4 border-r border-gray-100\">\n <h3 class=\"text-xs font-bold text-dt-blue uppercase tracking-wider mb-3 ml-2\">Our Core Pillars<\/h3>\n <div id=\"program-links\" class=\"space-y-1\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" data-program=\"dawah\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p><\/div>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" data-program=\"economy\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p><\/div>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" data-program=\"education\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Education<\/p><\/div>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" data-program=\"health\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Health<\/p><\/div>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" data-program=\"social\" class=\"program-link flex items-center rounded-md transition-all duration-200 cursor-pointer\">\n <div><p class=\"font-semibold text-gray-800 text-sm\">Social Humanitarian<\/p><\/div>\n <\/a>\n <\/div>\n <\/div>\n \n <div id=\"program-content\" class=\"col-span-8 p-5 relative min-h-[300px]\">\n <div id=\"program-content-dawah\" class=\"program-content-panel active\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" alt=\"Da'wah\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Da’wah Program<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Fostering spiritual growth and spreading peaceful Islamic values.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-economy\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" alt=\"Economy\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Economic Empowerment<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Creating sustainable livelihoods via micro-loans.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-education\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/4cc7638b-3eb5-4b00-8309-4ef773ff4a7d-scaled.jpeg\" alt=\"Education\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Education For All<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Ensuring children have access to quality education.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-health\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KKOGnoD65U1j95nTiuZlUPrwRfC7YkGQYaK07hfw.jpg\" alt=\"Health\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Community Health<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Improving well-being by offering free medical services.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <div id=\"program-content-social\" class=\"program-content-panel\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/07\/dapur-umum-gaza.jpg\" alt=\"Social\" class=\"w-full mega-menu-img rounded-lg mb-3 shadow-sm\">\n <h4 class=\"font-bold text-lg text-dt-blue\">Social & Humanitarian<\/h4>\n <p class=\"text-gray-600 text-sm mt-1 mb-3 line-clamp-2\">Providing rapid response and relief during emergencies.<\/p>\n <a href=\"https:\/\/dtpeduli.com\/social-humanitarian\/\" class=\"text-sm font-semibold text-dt-yellow hover:underline\">Learn More →<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-dt-blue font-bold text-sm uppercase tracking-wide px-3 py-2 rounded-lg bg-blue-50 transition-all h-10\">\n <span>Giving<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute left-0 w-56 origin-top-left bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1 top-full mt-0\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"block px-4 py-2 text-sm text-dt-blue bg-gray-50 rounded-md font-bold\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Palestine Relief<\/a>\n <a href=\"http:\/\/dtpeduli.com\/ramadhan\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-100 hover:text-dt-blue\">Ramadhan<\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"relative group h-full flex items-center\">\n <button class=\"flex items-center text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-all h-10\">\n <span>Governance<\/span>\n <svg class=\"w-3 h-3 ml-1 transform group-hover:rotate-180 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path><\/svg>\n <\/button>\n <div class=\"simple-dropdown absolute right-0 w-56 origin-top-right bg-white rounded-lg shadow-xl z-50 border border-gray-100 p-1 top-full mt-0\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Audit Result<\/a>\n <a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Report<\/a>\n <a href=\"https:\/\/dtpeduli.com\/complaint-service\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Complaint Service<\/a>\n <a href=\"https:\/\/dtpeduli.com\/terms-and-conditions\/\" class=\"block px-4 py-2 text-sm text-gray-600 rounded-md hover:bg-gray-50 hover:text-dt-blue transition-colors\">Terms and Conditions<\/a>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"text-gray-600 hover:text-dt-blue font-medium text-sm uppercase tracking-wide px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors\">News<\/a>\n <\/nav>\n \n \n <div class=\"ml-4\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"bg-dt-yellow text-white font-bold text-sm py-2.5 px-5 rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105 shadow-md hover:shadow-lg\">\n Donate\n <\/a>\n <\/div>\n <\/div>\n\n \n <button id=\"mobileMenuButton\" class=\"lg:hidden text-dt-blue focus:outline-none z-50 p-2 rounded-md hover:bg-gray-100\">\n <svg id=\"menu-open-icon\" class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path><\/svg>\n <svg id=\"menu-close-icon\" class=\"w-7 h-7 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"mobileMenu\" class=\"lg:hidden fixed top-0 left-0 w-full h-screen bg-white z-40 transform -translate-y-full transition-transform duration-300 ease-in-out\">\n <div id=\"mobileMenuContent\" class=\"h-full overflow-y-auto pb-32\">\n <a href=\"https:\/\/dtpeduli.com\/\" class=\"block py-4 px-6 text-gray-700 hover:bg-gray-100 border-b border-gray-100\">Home<\/a>\n \n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>About Us<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Profile<\/a>\n <a href=\"https:\/\/dtpeduli.com\/our-management\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Our Management<\/a>\n <a href=\"https:\/\/dtpeduli.com\/history\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">History<\/a>\n <a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Official Address<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>Programs<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu p-4 space-y-3 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/dawah\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/Media-2.jpg\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Da’wah<\/p>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/economy\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KANDANG-SOREANG-1.png\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Economy<\/p>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/education\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/4cc7638b-3eb5-4b00-8309-4ef773ff4a7d-scaled.jpeg\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Education<\/p>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/health\/\" class=\"flex items-center p-2 rounded-lg bg-white shadow-sm border border-gray-100\">\n <div class=\"w-10 h-10 rounded-md bg-gray-200 overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/05\/KKOGnoD65U1j95nTiuZlUPrwRfC7YkGQYaK07hfw.jpg\" class=\"w-full h-full object-cover\">\n <\/div>\n <p class=\"font-semibold text-gray-800 text-sm\">Health<\/p>\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-dt-blue font-bold py-4 px-6 focus:outline-none bg-blue-50\/50\">\n <span>Giving<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"block py-3 px-6 text-sm text-dt-blue font-bold bg-white\/50\">Zakat Maal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Zakat Fitr<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/sadaqah\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Sadaqah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Infaq<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Fidyah<\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Palestine Relief<\/a>\n <a href=\"http:\/\/dtpeduli.com\/ramadhan\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Ramadhan<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mobile-menu-item border-b border-gray-100\">\n <button class=\"w-full flex justify-between items-center text-gray-700 hover:text-dt-blue font-medium py-4 px-6 focus:outline-none\">\n <span>Governance<\/span>\n <i class=\"fas fa-chevron-down text-xs transition-transform rotate-180 text-gray-400\"><\/i>\n <\/button>\n <div class=\"mobile-submenu pl-6 bg-gray-50\/50\" style=\"max-height: 500px;\">\n <a href=\"https:\/\/dtpeduli.com\/legal-formal\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Legal & Formal<\/a>\n <a href=\"https:\/\/dtpeduli.com\/quality-policy\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Quality Policy<\/a>\n <a href=\"https:\/\/dtpeduli.com\/audit-result\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Audit Result<\/a>\n <a href=\"https:\/\/dtpeduli.com\/report\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Report<\/a>\n <a href=\"https:\/\/dtpeduli.com\/complaint-service\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Complaint Service<\/a>\n <a href=\"https:\/\/dtpeduli.com\/terms-and-conditions\/\" class=\"block py-3 px-6 text-sm text-gray-600 hover:text-dt-blue\">Terms and Conditions<\/a>\n <\/div>\n <\/div>\n\n <a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"block text-gray-700 hover:text-dt-blue font-medium py-4 px-6 border-b border-gray-100\">News & Stories<\/a>\n <div class=\"p-6\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/donate\/\" class=\"block w-full text-center py-3 px-6 text-white bg-dt-yellow rounded-lg font-bold shadow-md\">Donate Now<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main>\n \n <section class=\"hero-section relative\">\n \n <div class=\"absolute top-0 left-0 w-full h-full\">\n \n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1532629345422-7515f3d16bb6?q=80&w=2940&auto=format&fit=crop\" \n alt=\"Donate Banner\" \n class=\"w-full h-full object-cover\"\n style=\"filter: brightness(0.4);\">\n \n \n \n <div class=\"absolute top-0 left-0 w-full h-full bg-dt-blue\/60 mix-blend-multiply\"><\/div>\n <\/div>\n\n <div class=\"relative z-10 container mx-auto px-6 text-center\" data-aos=\"fade-up\" data-aos-duration=\"1000\">\n <h1 class=\"text-4xl lg:text-6xl font-extrabold text-white mb-6 drop-shadow-lg\">Donate & Zakat Calculator<\/h1>\n <div class=\"max-w-3xl mx-auto space-y-4 text-lg lg:text-xl text-gray-100 font-medium\">\n <p>Calculate your Zakat Maal accurately and distribute it to those in need. Every contribution counts.<\/p>\n <\/div>\n <div class=\"mt-8 w-24 h-1 bg-dt-yellow mx-auto rounded-full\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 lg:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n \n <div class=\"max-w-7xl mx-auto\">\n <div class=\"grid grid-cols-1 lg:grid-cols-5 gap-12\">\n \n \n <div class=\"lg:col-span-3 bg-white rounded-2xl shadow-xl overflow-hidden\" data-aos=\"fade-right\">\n <div class=\"bg-dt-blue p-6 text-center text-white\">\n <h2 class=\"text-2xl font-bold\">Zakat Maal Calculator<\/h2>\n <p class=\"text-blue-100 text-sm mt-1\">Calculate based on Gold\/Silver Nisab<\/p>\n <\/div>\n \n <div class=\"p-6 md:p-10\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-8 p-4 border rounded-lg bg-gray-50\">\n <div>\n <label for=\"currency\" class=\"block text-sm font-medium text-gray-700 mb-1\">Select Currency<\/label>\n <select id=\"currency\" class=\"w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-dt-yellow focus:border-dt-yellow transition bg-white\"><\/select>\n <\/div>\n <div>\n <label for=\"nisabBasis\" class=\"block text-sm font-medium text-gray-700 mb-1\">Nisab Basis<\/label>\n <select id=\"nisabBasis\" class=\"w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-dt-yellow focus:border-dt-yellow transition bg-white\">\n <option value=\"gold\">Gold (85g)<\/option>\n <option value=\"silver\">Silver (595g)<\/option>\n <\/select>\n <\/div>\n <div class=\"md:col-span-2 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm flex items-center justify-between\">\n <div>\n <p class=\"text-gray-600\">Current Nisab Value:<\/p>\n <p class=\"text-lg font-bold text-dt-blue\" id=\"nisabValue\"><div class=\"calculator-loader inline-block\"><\/div><\/p>\n <\/div>\n <div class=\"text-right text-xs text-gray-500 max-w-[200px]\">\n Based on live market prices.\n <\/div>\n <\/div>\n <\/div>\n\n \n <h3 class=\"text-lg font-bold text-gray-800 border-b pb-2 mb-4\">Assets (Wealth)<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Gold Value<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"goldValue\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Silver Value<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"silverValue\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Cash on Hand \/ Bank<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"cash\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Investments \/ Shares<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"investments\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Loans Receivable<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"loansGiven\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Business Stock Value<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"tradeGoods\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <\/div>\n\n \n <h3 class=\"text-lg font-bold text-gray-800 border-b pb-2 mb-4\">Liabilities (Debts)<\/h3>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Debts \/ Borrowed Money<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"borrowedMoney\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Expenses Due Immediately<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"billsDue\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Wages Due<\/label>\n <div class=\"input-group\"><span class=\"currency-symbol\"><\/span><input type=\"number\" id=\"wagesDue\" class=\"w-full p-2 border border-gray-300 rounded-lg zakat-input\" placeholder=\"0.00\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-gray-50 rounded-xl p-6 border border-gray-200 text-center\">\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 text-sm text-gray-600\">\n <div>Total Assets: <span id=\"totalAssets\" class=\"font-bold text-gray-800\">0.00<\/span><\/div>\n <div>Total Liabilities: <span id=\"totalLiabilities\" class=\"font-bold text-gray-800\">0.00<\/span><\/div>\n <div>Net Assets: <span id=\"netAssets\" class=\"font-bold text-gray-800\">0.00<\/span><\/div>\n <\/div>\n \n <div class=\"py-4 border-t border-gray-200\">\n <p class=\"text-gray-500 mb-1\">Zakat Payable (2.5%)<\/p>\n <p id=\"zakatResult\" class=\"text-4xl font-extrabold text-dt-blue mb-2\">$0.00<\/p>\n <p id=\"zakatMessage\" class=\"text-sm text-orange-500 font-medium\">Your net assets are below the Nisab value.<\/p>\n <\/div>\n\n <div class=\"mt-6 space-y-3\">\n <button id=\"donateZakatButton\" disabled class=\"w-full btn-gradient text-white font-bold py-3.5 px-6 rounded-full shadow-lg hover:shadow-xl transition-all transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none flex items-center justify-center\">\n <i class=\"fab fa-paypal mr-2\"><\/i> Pay via PayPal\n <\/button>\n <button id=\"openWiseModalBtn\" disabled class=\"w-full bg-white border-2 border-gray-200 text-gray-700 font-bold py-3.5 px-6 rounded-full hover:bg-gray-50 hover:border-gray-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center\">\n <svg class=\"w-5 h-5 mr-2\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12.13 2.19a.46.46 0 00-.26 0l-9.08 5a.48.48 0 00-.23.42v9.54c0 .17.09.33.23.42l9.08 5.04a.46.46 0 00.26 0l9.08-5.04a.48.48 0 00.23-.42V7.61a.48.48 0 00-.23-.42l-9.08-5zm-.67 1.25l.58.32 7.43 4.1-3.64 2.02-4.37-2.42v-4zm1.11 0l4.38 2.43-3.8 2.1-.58-.32zm-1.11.6v4l4.38 2.43.58.32.58-.32 3.64-2.02-7.44-4.11-.57-.32zM3.46 8.16l8.13 4.5V20.7L3.46 16.12V8.16zm9.21 4.5l8.14-4.5v7.96l-8.14 4.55V12.66z\"\/><\/svg>\n Pay via Wise\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:col-span-2 flex flex-col justify-center\" data-aos=\"fade-left\" data-aos-delay=\"200\">\n <div class=\"bg-white p-8 rounded-2xl shadow-md border border-gray-100 h-full\">\n <div class=\"mb-8\">\n <div class=\"w-12 h-1 bg-dt-yellow rounded-full mb-4\"><\/div>\n <h2 class=\"text-3xl font-bold text-dt-blue mb-4\">Understanding Zakat Maal<\/h2>\n <p class=\"text-gray-600 leading-relaxed\">\n Zakat Maal, or zakat on wealth, is an obligatory charity for every capable Muslim. It is a pillar of Islam that ensures the circulation of wealth and supports the vulnerable in society. The rate is <strong>2.5%<\/strong> of one’s total savings and wealth that has been held for one full lunar year (Haul) and exceeds the minimum threshold, known as the <strong>Nisab<\/strong>.\n <\/p>\n <\/div>\n \n <div class=\"space-y-8\">\n <div>\n <h4 class=\"flex items-center font-bold text-dt-blue text-lg mb-2\">\n <i class=\"fas fa-university mr-2 text-dt-yellow\"><\/i>\n View of Dar al-Ifta al-Misriyyah\n <\/h4>\n <p class=\"text-gray-600 text-sm leading-relaxed\">\n Dar al-Ifta emphasizes that Zakat is a divine right of the poor upon the wealth of the rich. They state that Zakat is applicable to assets that are productive or have the potential for growth, including cash, gold, silver, business inventory, and livestock. They stress the importance of calculating Zakat accurately based on current market values to fulfill the obligation correctly.\n <\/p>\n <\/div>\n \n <div>\n <h4 class=\"flex items-center font-bold text-dt-blue text-lg mb-2\">\n <i class=\"fas fa-mosque mr-2 text-dt-yellow\"><\/i>\n View of Al-Azhar al-Sharif\n <\/h4>\n <p class=\"text-gray-600 text-sm leading-relaxed\">\n Al-Azhar, as a leading authority in the Sunni Islamic world, teaches that Zakat is a fundamental act of worship and a cornerstone of social justice. It purifies the soul of the giver from greed and the heart of the recipient from envy. Al-Azhar scholars clarify that the Nisab for gold is 85 grams of pure gold, and for silver, it is 595 grams.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n <\/section>\n\n \n <section class=\"py-16 lg:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\" data-aos=\"fade-up\">\n <h2 class=\"text-3xl lg:text-4xl font-bold text-dt-blue\">Where Your Zakat Goes<\/h2>\n <p class=\"text-gray-600 mt-4 max-w-2xl mx-auto\">Stay updated with our latest activities and the impact of your donations across the globe.<\/p>\n <\/div>\n <div id=\"news-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n <div class=\"lg:col-span-3 text-center\">\n <div class=\"news-loader\"><\/div>\n <p class=\"text-gray-500\">Loading latest stories…<\/p>\n <\/div>\n \n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n \n <footer class=\"bg-dt-blue\" data-aos=\"fade-up\">\n <div class=\"container mx-auto px-6 py-16 text-gray-300\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12\">\n \n <div class=\"md:col-span-2 lg:col-span-1\">\n <img decoding=\"async\" src=\"https:\/\/dtpeduli.com\/wp-content\/uploads\/2025\/12\/DT-PEDULI-PUTIH.png\" alt=\"DT Peduli Logo\" class=\"h-8 lg:h-10\">\n <p class=\"text-gray-400 text-sm leading-relaxed mb-6\">\n A globally trusted charity empowering communities and spreading goodness through sustainable programs in education, health, economy, and humanitarian aid.\n <\/p>\n <div class=\"text-xs text-gray-500 space-y-1 p-4 bg-white\/5 rounded-lg border border-white\/10\">\n <p><strong>ID:<\/strong> SK KEMENAG RI NO 1200 (2022)<\/p>\n <p><strong>AUS:<\/strong> ABN 68709571627<\/p>\n <p><strong>TR:<\/strong> Darul Tevhid Derne\u011fi (K\u00fct\u00fck No: 34-285-124)<\/p>\n <\/div>\n <\/div>\n\n \n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Explore<\/h3>\n <ul class=\"space-y-3 text-sm\">\n <li><a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"hover:text-dt-yellow transition-colors flex items-center\"><span class=\"w-1.5 h-1.5 bg-dt-yellow rounded-full mr-2\"><\/span>About Us<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/news-stories\/\" class=\"hover:text-dt-yellow transition-colors flex items-center\"><span class=\"w-1.5 h-1.5 bg-dt-yellow rounded-full mr-2\"><\/span>News & Stories<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"hover:text-dt-yellow transition-colors flex items-center\"><span class=\"w-1.5 h-1.5 bg-dt-yellow rounded-full mr-2\"><\/span>Zakat Calculator<\/a><\/li>\n <li><a href=\"https:\/\/dtpeduli.com\/official-adress-contact\/\" class=\"hover:text-dt-yellow transition-colors flex items-center\"><span class=\"w-1.5 h-1.5 bg-dt-yellow rounded-full mr-2\"><\/span>Contact Us<\/a><\/li>\n <\/ul>\n <\/div>\n \n \n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Contact<\/h3>\n <ul class=\"space-y-4 text-gray-400 text-sm\">\n <li class=\"flex items-start\">\n <i class=\"fas fa-map-marker-alt mt-1 mr-3 text-dt-yellow\"><\/i>\n <span>Jl. Gegerkalong Girang No.32, Bandung, Jawa Barat 40153<\/span>\n <\/li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-envelope mr-3 text-dt-yellow\"><\/i>\n <a href=\"mailto:hello@dtpeduli.org\" class=\"hover:text-dt-yellow transition-colors\">hello@dtpeduli.org<\/a>\n <\/li>\n <li class=\"flex items-center\">\n <i class=\"fas fa-phone mr-3 text-dt-yellow\"><\/i>\n <span>+62 813-1712-1712<\/span>\n <\/li>\n <\/ul>\n <\/div>\n\n \n <div>\n <h3 class=\"text-lg font-semibold text-white mb-4 tracking-wider\">Follow Us<\/h3>\n <div class=\"flex space-x-3 mb-6\">\n <a href=\"https:\/\/www.facebook.com\/dtpeduliaustralia\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"https:\/\/www.instagram.com\/dtpeduli\/\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/x.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"https:\/\/youtube.com\/dtpeduli\" class=\"w-10 h-10 flex items-center justify-center bg-white\/10 rounded-full hover:bg-dt-yellow hover:text-white transition-all\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <p class=\"text-xs text-gray-500\">Subscribe to our newsletter for updates.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-black\/20 border-t border-white\/5\">\n <div class=\"container mx-auto px-6 py-4 text-center text-gray-500 text-xs\">\n © 2025 DT Peduli. All Rights Reserved.\n <\/div>\n <\/div>\n <\/footer>\n\n \n <nav class=\"lg:hidden fixed bottom-0 left-0 right-0 bg-white\/80 backdrop-blur-lg shadow-soft-up rounded-t-2xl flex justify-around items-end z-50 pb-2 pt-1 border-t border-white\/50\">\n \n \n <a href=\"https:\/\/dtpeduli.com\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1946\/1946436.png\" alt=\"Home\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\"> \n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Home<\/span>\n <\/a>\n\n \n <button id=\"servicesButton\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3063\/3063822.png\" alt=\"Services\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Services<\/span>\n <\/button>\n\n \n <button id=\"quickDonateButton\" class=\"relative -top-6 group focus:outline-none tap-highlight-transparent\">\n <div class=\"bg-gradient-to-br from-dt-yellow to-orange-400 rounded-full p-4 shadow-xl border-4 border-white\/80 transform transition-transform group-hover:scale-105 group-active:scale-95\">\n \n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-7 w-7 text-white\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z\" clip-rule=\"evenodd\" \/><\/svg>\n <\/div>\n <span class=\"absolute -bottom-5 left-1\/2 transform -translate-x-1\/2 text-[10px] font-bold text-dt-blue whitespace-nowrap\">Donate<\/span>\n <\/button>\n \n \n <a href=\"https:\/\/dtpeduli.com\/profile\/\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1077\/1077114.png\" alt=\"Profile\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Profile<\/span>\n <\/a>\n \n <button id=\"mobileMenuTriggerBottom\" class=\"flex flex-col items-center w-full py-2 group focus:outline-none tap-highlight-transparent\">\n \n <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/2976\/2976215.png\" alt=\"Menu\" class=\"w-6 h-6 mb-1 object-contain opacity-70 group-hover:opacity-100 transition-opacity\">\n <span class=\"text-[10px] font-semibold text-gray-500 group-hover:text-dt-blue transition-colors\">Menu<\/span>\n <\/button>\n <\/nav>\n \n \n <div id=\"quickDonateSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up max-h-[85vh] overflow-y-auto\">\n <div class=\"flex justify-between items-center mb-6 sticky top-0 bg-white pb-2 border-b border-gray-100\">\n <div>\n <h3 class=\"text-xl font-bold text-dt-blue\">Quick Donation<\/h3>\n <p class=\"text-xs text-gray-500\">Select a category to help<\/p>\n <\/div>\n <button id=\"closeQuickDonate\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800 hover:bg-gray-200\">×<\/button>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-maal\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83d\udcb0<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Zakat Maal<\/span>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/zakat-al-fitr\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83c\udf5a<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Zakat Fitr<\/span>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/infaq\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83d\udcb8<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Infaq<\/span>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/palestine-relief\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-red-50 border border-red-100 hover:border-red-300 hover:bg-red-100 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83c\uddf5\ud83c\uddf8<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Palestine<\/span>\n <\/a>\n \n <a href=\"https:\/\/dtpeduli.com\/donate\/fidyah\/\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83c\udf72<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Fidyah<\/span>\n <\/a>\n <a href=\"http:\/\/dtpeduli.com\/ramadhan\" class=\"flex flex-col items-center p-4 rounded-2xl bg-gray-50 border border-gray-100 hover:border-dt-yellow hover:bg-yellow-50 transition-all\">\n <span class=\"text-3xl mb-2\">\ud83c\udf19<\/span>\n <span class=\"font-semibold text-gray-700 text-sm\">Ramadhan<\/span>\n <\/a>\n <a href=\"https:\/\/dtpeduli.com\/donate\/\" class=\"col-span-2 flex items-center justify-center p-4 rounded-2xl bg-dt-blue text-white font-bold shadow-lg mt-2 hover:bg-blue-800 transition-colors\">\n View All Campaigns\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"servicesSubmenu\" class=\"lg:hidden fixed inset-0 bg-black\/60 backdrop-blur-sm z-[60] flex items-end hidden transition-opacity duration-300\">\n <div class=\"bg-white w-full rounded-t-3xl p-6 shadow-2xl animate-slide-up\">\n <div class=\"flex justify-between items-center mb-6 border-b border-gray-100 pb-4\">\n <h3 class=\"text-xl font-bold text-dt-blue\">Customer Services<\/h3>\n <button id=\"closeServices\" class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-800\">×<\/button>\n <\/div>\n <div class=\"space-y-3\">\n <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281317121712\" class=\"flex items-center p-4 rounded-xl bg-green-50 border border-green-100 hover:bg-green-100\">\n <i class=\"fab fa-whatsapp text-2xl text-green-600 mr-4\"><\/i>\n <div>\n <p class=\"font-bold text-gray-800 text-sm\">Head Office Support<\/p>\n <p class=\"text-xs text-gray-500\">Chat with us on WhatsApp<\/p>\n <\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-blue-50 border border-blue-100 hover:bg-blue-100\">\n <i class=\"fas fa-headset text-2xl text-blue-600 mr-4\"><\/i>\n <div>\n <p class=\"font-bold text-gray-800 text-sm\">Call Center<\/p>\n <p class=\"text-xs text-gray-500\">Direct line assistance<\/p>\n <\/div>\n <\/a>\n <a href=\"#\" class=\"flex items-center p-4 rounded-xl bg-red-50 border border-red-100 hover:bg-red-100\">\n <i class=\"fas fa-exclamation-circle text-2xl text-red-500 mr-4\"><\/i>\n <div>\n <p class=\"font-bold text-gray-800 text-sm\">Complaint Service<\/p>\n <p class=\"text-xs text-gray-500\">Report an issue<\/p>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"paymentModal\" class=\"modal hidden fixed inset-0 bg-black bg-opacity-50 z-[100] flex justify-center items-start overflow-y-auto px-4 pt-10 pb-10 opacity-0\">\n <div class=\"modal-content bg-white rounded-2xl shadow-2xl p-6 md:p-8 w-full max-w-md transform scale-95 opacity-0\">\n <div class=\"flex justify-between items-center mb-6\">\n <h3 class=\"text-2xl font-bold text-dt-blue\">Pay Your Zakat Maal<\/h3>\n <button id=\"closePaymentModal\" class=\"text-gray-400 hover:text-gray-800 text-3xl\">×<\/button>\n <\/div>\n \n <div class=\"mb-6 text-center\">\n <p class=\"text-gray-600\">Your calculated Zakat obligation is:<\/p>\n <p id=\"modalZakatAmount\" class=\"text-3xl font-bold text-dt-blue\">Rp0.00<\/p>\n <\/div>\n\n <div class=\"bg-gray-100 border border-dashed border-gray-300 rounded-lg p-4 text-center\">\n <p class=\"text-sm font-semibold text-gray-700 mb-2\">WPPayForm Payment Form<\/p>\n <p id=\"paymentShortcode\" class=\"text-lg font-mono text-dt-blue bg-gray-200 px-2 py-1 rounded inline-block\"> <div class=\"wpf_form_wrapper wpf_form_wrapper_384\">\n <form data-wpf_form_id='384' wpf_form_instance='wpf_form_instance_384_1' class='wpf_form wpf_form_instance_384_1 wpf_strip_default_style wpf_form_id_384 wpf_label_top wpf_asterisk_right wpf_submit_button_pos_left wppayform_has_payment wpf_default_form_styles' method='POST' action='https:\/\/dtpeduli.com\/donate' id='wpf_form_id_384' >\n <span style=\"display: none !important;\"><input type=\"checkbox\" name=\"item__384__wppay_checkme_\" value=\"1\"\n style=\"display: none !important;\" tabindex=\"-1\"><\/span>\n <input type=\"hidden\" name=\"__wpf_form_id\" value=\"384\" \/>\n <input type=\"hidden\" name=\"__wpf_current_url\" value=\"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/176\">\n <input type=\"hidden\" name=\"__wpf_current_page_id\" value=\"176\">\n <div data-element_type=\"customer_name\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_customer_name\" >Your Name <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"customer_name\" condition_id=\"customer_name\" placeholder=\"Name\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_customer_name\" required=\"1\" \/>\n <\/div>\n <\/div>\n <div class=\"wpf-container\">\n <div class=\"wpf-row\" style=\"display: flex; gap: 24px;\">\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div data-element_type=\"customer_email\"\n class=\"wpf_form_group wpf_item_email\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_customer_email\" >Email Address <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"customer_email\" condition_id=\"customer_email\" placeholder=\"Email Address\" value=\"\" type=\"email\" class=\"wpf_form_control wpf_customer_email\" id=\"wpf_input_384_customer_email\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf-col\" style=\"width: 50%\">\n <p id=\"error_phone_code_wpf_input_384_phone_input\" hidden\n name=\"Phone Number\" data-element_type=\"wpf_phone_input_error\">\n <\/p>\n\n <div field_name=\"phone\" style=\"display: block\"\n data-element_type=\"phone\"\n class=\"wpf_form_group wpf_item_tel\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_phone\" >Phone Number<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input style=\"padding-left: 65px;\" value=\"\" class=\"wpf_form_control\" type=\"tel\" id=\"phone_code_wpf_input_384_phone_input\" condition_id=\"phone\" \/>\n <input name=\"phone\" value=\"\" type=\"hidden\" id=\"phone_code_wpf_input_384_phone_input_hidden\" \/>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf_address_wrapper\"><label condition_id=address_input class=\"wpf_address_heading\">Address<\/label><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_address_line_1_\" >Address Line 1 <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"address_input[address_line_1]\" condition_id=\"address_line_1\" placeholder=\"Address Line 1\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_address_line_1_\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_address_line_2_\" >Address Line 2<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[address_line_2]\" condition_id=\"address_line_2\" placeholder=\"Address Line 2\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_address_line_2_\" \/>\n <\/div>\n <\/div>\n <\/div><\/div><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_city_\" >City<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[city]\" condition_id=\"city\" placeholder=\"City\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_city_\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_state_\" >State <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"yes\" data-type=\"input\" name=\"address_input[state]\" condition_id=\"state\" placeholder=\"State\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_state_\" required=\"1\" \/>\n <\/div>\n <\/div>\n <\/div><\/div><div class=\"wpf-t-container\"><div class=\"wpf-t-cell\"> <div data-element_type=\"address_input\"\n class=\"wpf_form_group wpf_item_text\" style=\"display: block\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_zip_code_\" >ZIP Code<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <input data-required=\"no\" data-type=\"input\" name=\"address_input[zip_code]\" condition_id=\"zip_code\" placeholder=\"ZIP Code\" value=\"\" type=\"text\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_zip_code_\" \/>\n <\/div>\n <\/div>\n <\/div><div class=\"wpf-t-cell\"> <div style=\"display : block\" id=\"wpf_address_input\" data-element_type=\"address_input\" class=\"wpf_form_group wpf_item_select\" >\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_address_input_country_\" >Country <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <select data-required=\"yes\" name=\"address_input[country]\" class=\"wpf_form_control\" id=\"wpf_input_384_address_input_country_\" condition_id=\"country\" required=\"1\" >\n <option data-type=\"placeholder\" value= >Select Country<\/option>\n <option value=\"AF\" >Afghanistan<\/option>\n <option value=\"AX\" >\u00c5land Islands<\/option>\n <option value=\"AL\" >Albania<\/option>\n <option value=\"DZ\" >Algeria<\/option>\n <option value=\"AS\" >American Samoa<\/option>\n <option value=\"AD\" >Andorra<\/option>\n <option value=\"AO\" >Angola<\/option>\n <option value=\"AI\" >Anguilla<\/option>\n <option value=\"AQ\" >Antarctica<\/option>\n <option value=\"AG\" >Antigua and Barbuda<\/option>\n <option value=\"AR\" >Argentina<\/option>\n <option value=\"AM\" >Armenia<\/option>\n <option value=\"AW\" >Aruba<\/option>\n <option value=\"AU\" >Australia<\/option>\n <option value=\"AT\" >Austria<\/option>\n <option value=\"AZ\" >Azerbaijan<\/option>\n <option value=\"BS\" >Bahamas<\/option>\n <option value=\"BH\" >Bahrain<\/option>\n <option value=\"BD\" >Bangladesh<\/option>\n <option value=\"BB\" >Barbados<\/option>\n <option value=\"BY\" >Belarus<\/option>\n <option value=\"BE\" >Belgium<\/option>\n <option value=\"PW\" >Belau<\/option>\n <option value=\"BZ\" >Belize<\/option>\n <option value=\"BJ\" >Benin<\/option>\n <option value=\"BM\" >Bermuda<\/option>\n <option value=\"BT\" >Bhutan<\/option>\n <option value=\"BO\" >Bolivia<\/option>\n <option value=\"BQ\" >Bonaire, Saint Eustatius and Saba<\/option>\n <option value=\"BA\" >Bosnia and Herzegovina<\/option>\n <option value=\"BW\" >Botswana<\/option>\n <option value=\"BV\" >Bouvet Island<\/option>\n <option value=\"BR\" >Brazil<\/option>\n <option value=\"IO\" >British Indian Ocean Territory<\/option>\n <option value=\"VG\" >British Virgin Islands<\/option>\n <option value=\"BN\" >Brunei<\/option>\n <option value=\"BG\" >Bulgaria<\/option>\n <option value=\"BF\" >Burkina Faso<\/option>\n <option value=\"BI\" >Burundi<\/option>\n <option value=\"KH\" >Cambodia<\/option>\n <option value=\"CM\" >Cameroon<\/option>\n <option value=\"CA\" >Canada<\/option>\n <option value=\"CV\" >Cape Verde<\/option>\n <option value=\"KY\" >Cayman Islands<\/option>\n <option value=\"CF\" >Central African Republic<\/option>\n <option value=\"TD\" >Chad<\/option>\n <option value=\"CL\" >Chile<\/option>\n <option value=\"CN\" >China<\/option>\n <option value=\"CX\" >Christmas Island<\/option>\n <option value=\"CC\" >Cocos (Keeling) Islands<\/option>\n <option value=\"CO\" >Colombia<\/option>\n <option value=\"KM\" >Comoros<\/option>\n <option value=\"CG\" >Congo (Brazzaville)<\/option>\n <option value=\"CD\" >Congo (Kinshasa)<\/option>\n <option value=\"CK\" >Cook Islands<\/option>\n <option value=\"CR\" >Costa Rica<\/option>\n <option value=\"HR\" >Croatia<\/option>\n <option value=\"CU\" >Cuba<\/option>\n <option value=\"CW\" >Curaçao<\/option>\n <option value=\"CY\" >Cyprus<\/option>\n <option value=\"CZ\" >Czech Republic<\/option>\n <option value=\"DK\" >Denmark<\/option>\n <option value=\"DJ\" >Djibouti<\/option>\n <option value=\"DM\" >Dominica<\/option>\n <option value=\"DO\" >Dominican Republic<\/option>\n <option value=\"EC\" >Ecuador<\/option>\n <option value=\"EG\" >Egypt<\/option>\n <option value=\"SV\" >El Salvador<\/option>\n <option value=\"GQ\" >Equatorial Guinea<\/option>\n <option value=\"ER\" >Eritrea<\/option>\n <option value=\"EE\" >Estonia<\/option>\n <option value=\"ET\" >Ethiopia<\/option>\n <option value=\"FK\" >Falkland Islands<\/option>\n <option value=\"FO\" >Faroe Islands<\/option>\n <option value=\"FJ\" >Fiji<\/option>\n <option value=\"FI\" >Finland<\/option>\n <option value=\"FR\" >France<\/option>\n <option value=\"GF\" >French Guiana<\/option>\n <option value=\"PF\" >French Polynesia<\/option>\n <option value=\"TF\" >French Southern Territories<\/option>\n <option value=\"GA\" >Gabon<\/option>\n <option value=\"GM\" >Gambia<\/option>\n <option value=\"GE\" >Georgia<\/option>\n <option value=\"DE\" >Germany<\/option>\n <option value=\"GH\" >Ghana<\/option>\n <option value=\"GI\" >Gibraltar<\/option>\n <option value=\"GR\" >Greece<\/option>\n <option value=\"GL\" >Greenland<\/option>\n <option value=\"GD\" >Grenada<\/option>\n <option value=\"GP\" >Guadeloupe<\/option>\n <option value=\"GU\" >Guam<\/option>\n <option value=\"GT\" >Guatemala<\/option>\n <option value=\"GG\" >Guernsey<\/option>\n <option value=\"GN\" >Guinea<\/option>\n <option value=\"GW\" >Guinea-Bissau<\/option>\n <option value=\"GY\" >Guyana<\/option>\n <option value=\"HT\" >Haiti<\/option>\n <option value=\"HM\" >Heard Island and McDonald Islands<\/option>\n <option value=\"HN\" >Honduras<\/option>\n <option value=\"HK\" >Hong Kong<\/option>\n <option value=\"HU\" >Hungary<\/option>\n <option value=\"IS\" >Iceland<\/option>\n <option value=\"IN\" >India<\/option>\n <option value=\"ID\" >Indonesia<\/option>\n <option value=\"IR\" >Iran<\/option>\n <option value=\"IQ\" >Iraq<\/option>\n <option value=\"IE\" >Ireland<\/option>\n <option value=\"IM\" >Isle of Man<\/option>\n <option value=\"IL\" >Israel<\/option>\n <option value=\"IT\" >Italy<\/option>\n <option value=\"CI\" >Ivory Coast<\/option>\n <option value=\"JM\" >Jamaica<\/option>\n <option value=\"JP\" >Japan<\/option>\n <option value=\"JE\" >Jersey<\/option>\n <option value=\"JO\" >Jordan<\/option>\n <option value=\"KZ\" >Kazakhstan<\/option>\n <option value=\"KE\" >Kenya<\/option>\n <option value=\"KI\" >Kiribati<\/option>\n <option value=\"KW\" >Kuwait<\/option>\n <option value=\"KG\" >Kyrgyzstan<\/option>\n <option value=\"LA\" >Laos<\/option>\n <option value=\"LV\" >Latvia<\/option>\n <option value=\"LB\" >Lebanon<\/option>\n <option value=\"LS\" >Lesotho<\/option>\n <option value=\"LR\" >Liberia<\/option>\n <option value=\"LY\" >Libya<\/option>\n <option value=\"LI\" >Liechtenstein<\/option>\n <option value=\"LT\" >Lithuania<\/option>\n <option value=\"LU\" >Luxembourg<\/option>\n <option value=\"MO\" >Macao S.A.R., China<\/option>\n <option value=\"MK\" >Macedonia<\/option>\n <option value=\"MG\" >Madagascar<\/option>\n <option value=\"MW\" >Malawi<\/option>\n <option value=\"MY\" >Malaysia<\/option>\n <option value=\"MV\" >Maldives<\/option>\n <option value=\"ML\" >Mali<\/option>\n <option value=\"MT\" >Malta<\/option>\n <option value=\"MH\" >Marshall Islands<\/option>\n <option value=\"MQ\" >Martinique<\/option>\n <option value=\"MR\" >Mauritania<\/option>\n <option value=\"MU\" >Mauritius<\/option>\n <option value=\"YT\" >Mayotte<\/option>\n <option value=\"MX\" >Mexico<\/option>\n <option value=\"FM\" >Micronesia<\/option>\n <option value=\"MD\" >Moldova<\/option>\n <option value=\"MC\" >Monaco<\/option>\n <option value=\"MN\" >Mongolia<\/option>\n <option value=\"ME\" >Montenegro<\/option>\n <option value=\"MS\" >Montserrat<\/option>\n <option value=\"MA\" >Morocco<\/option>\n <option value=\"MZ\" >Mozambique<\/option>\n <option value=\"MM\" >Myanmar<\/option>\n <option value=\"NA\" >Namibia<\/option>\n <option value=\"NR\" >Nauru<\/option>\n <option value=\"NP\" >Nepal<\/option>\n <option value=\"NL\" >Netherlands<\/option>\n <option value=\"NC\" >New Caledonia<\/option>\n <option value=\"NZ\" >New Zealand<\/option>\n <option value=\"NI\" >Nicaragua<\/option>\n <option value=\"NE\" >Niger<\/option>\n <option value=\"NG\" >Nigeria<\/option>\n <option value=\"NU\" >Niue<\/option>\n <option value=\"NF\" >Norfolk Island<\/option>\n <option value=\"MP\" >Northern Mariana Islands<\/option>\n <option value=\"KP\" >North Korea<\/option>\n <option value=\"NO\" >Norway<\/option>\n <option value=\"OM\" >Oman<\/option>\n <option value=\"PK\" >Pakistan<\/option>\n <option value=\"PS\" >Palestinian Territory<\/option>\n <option value=\"PA\" >Panama<\/option>\n <option value=\"PG\" >Papua New Guinea<\/option>\n <option value=\"PY\" >Paraguay<\/option>\n <option value=\"PE\" >Peru<\/option>\n <option value=\"PH\" >Philippines<\/option>\n <option value=\"PN\" >Pitcairn<\/option>\n <option value=\"PL\" >Poland<\/option>\n <option value=\"PT\" >Portugal<\/option>\n <option value=\"PR\" >Puerto Rico<\/option>\n <option value=\"QA\" >Qatar<\/option>\n <option value=\"RE\" >Reunion<\/option>\n <option value=\"RO\" >Romania<\/option>\n <option value=\"RU\" >Russia<\/option>\n <option value=\"RW\" >Rwanda<\/option>\n <option value=\"BL\" >Saint Barthélemy<\/option>\n <option value=\"SH\" >Saint Helena<\/option>\n <option value=\"KN\" >Saint Kitts and Nevis<\/option>\n <option value=\"LC\" >Saint Lucia<\/option>\n <option value=\"MF\" >Saint Martin (French part)<\/option>\n <option value=\"SX\" >Saint Martin (Dutch part)<\/option>\n <option value=\"PM\" >Saint Pierre and Miquelon<\/option>\n <option value=\"VC\" >Saint Vincent and the Grenadines<\/option>\n <option value=\"SM\" >San Marino<\/option>\n <option value=\"ST\" >São Tomé and Príncipe<\/option>\n <option value=\"SA\" >Saudi Arabia<\/option>\n <option value=\"SN\" >Senegal<\/option>\n <option value=\"RS\" >Serbia<\/option>\n <option value=\"SC\" >Seychelles<\/option>\n <option value=\"SL\" >Sierra Leone<\/option>\n <option value=\"SG\" >Singapore<\/option>\n <option value=\"SK\" >Slovakia<\/option>\n <option value=\"SI\" >Slovenia<\/option>\n <option value=\"SB\" >Solomon Islands<\/option>\n <option value=\"SO\" >Somalia<\/option>\n <option value=\"ZA\" >South Africa<\/option>\n <option value=\"GS\" >South Georgia\/Sandwich Islands<\/option>\n <option value=\"KR\" >South Korea<\/option>\n <option value=\"SS\" >South Sudan<\/option>\n <option value=\"ES\" >Spain<\/option>\n <option value=\"LK\" >Sri Lanka<\/option>\n <option value=\"SD\" >Sudan<\/option>\n <option value=\"SR\" >Suriname<\/option>\n <option value=\"SJ\" >Svalbard and Jan Mayen<\/option>\n <option value=\"SZ\" >Swaziland<\/option>\n <option value=\"SE\" >Sweden<\/option>\n <option value=\"CH\" >Switzerland<\/option>\n <option value=\"SY\" >Syria<\/option>\n <option value=\"TW\" >Taiwan<\/option>\n <option value=\"TJ\" >Tajikistan<\/option>\n <option value=\"TZ\" >Tanzania<\/option>\n <option value=\"TH\" >Thailand<\/option>\n <option value=\"TL\" >Timor-Leste<\/option>\n <option value=\"TG\" >Togo<\/option>\n <option value=\"TK\" >Tokelau<\/option>\n <option value=\"TO\" >Tonga<\/option>\n <option value=\"TT\" >Trinidad and Tobago<\/option>\n <option value=\"TN\" >Tunisia<\/option>\n <option value=\"TR\" >Turkey<\/option>\n <option value=\"TM\" >Turkmenistan<\/option>\n <option value=\"TC\" >Turks and Caicos Islands<\/option>\n <option value=\"TV\" >Tuvalu<\/option>\n <option value=\"UG\" >Uganda<\/option>\n <option value=\"UA\" >Ukraine<\/option>\n <option value=\"AE\" >United Arab Emirates<\/option>\n <option value=\"GB\" >United Kingdom (UK)<\/option>\n <option value=\"US\" >United States (US)<\/option>\n <option value=\"UM\" >United States (US) Minor Outlying Islands<\/option>\n <option value=\"VI\" >United States (US) Virgin Islands<\/option>\n <option value=\"UY\" >Uruguay<\/option>\n <option value=\"UZ\" >Uzbekistan<\/option>\n <option value=\"VU\" >Vanuatu<\/option>\n <option value=\"VA\" >Vatican<\/option>\n <option value=\"VE\" >Venezuela<\/option>\n <option value=\"VN\" >Vietnam<\/option>\n <option value=\"WF\" >Wallis and Futuna<\/option>\n <option value=\"EH\" >Western Sahara<\/option>\n <option value=\"WS\" >Samoa<\/option>\n <option value=\"YE\" >Yemen<\/option>\n <option value=\"ZM\" >Zambia<\/option>\n <option value=\"ZW\" >Zimbabwe<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div><\/div><\/div> \n <div style = \"display : \" data-element_type=\"donation_item\" data-required_element=\"radio\" data-required=\"yes\" data-target_element=\"donation_item\" class=\"wpf_form_group wpf_item_donation_item\" >\n\n <div class=\"donation-wrapper \">\n <div class=\"wpf_donation_status\">\n <div class=\"raised_amount\">\n <div class=\"number\" name=\"wpf_form_id_384_raised_donation\" data-raised=\"0\">\n $0 <\/div>\n <div class=\"text\">Raised<\/div>\n <\/div>\n <div class=\"count_amount\">\n <div class=\"number\">\n 0 <\/div>\n\n <div class=\"text\">Donations<\/div>\n <\/div>\n <div class=\"goal_amount\">\n <div class=\"number\" name=\"wpf_form_id_384_goal_amount\" data-goal=\"100000\">\n $1,000 <\/div>\n <div class=\"text\">Goal<\/div>\n <\/div>\n <\/div>\n <div class=\"wpf_donation_bar_wrapper\">\n <div class=\"wpf_donation_fields_bar\">\n <div\n class=\"wpf_bar\"\n style=\"width: 0%;\"\n name=\"wpf_form_id_384_bar\"\n data-percentage=\"0\"\n >\n 0% <\/div>\n <\/div>\n <\/div>\n \n <div class=\"wpf_donation_fields_wrapper\" >\n <div class=\"wpf_input_content wpf_donation_controls_custom\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_donation_item\" >Donation Progress Item <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_form_item_group\">\n <div class=\"wpf_input-group-prepend\">\n <div class=\"wpf_input-group-text wpf_input-group-text-prepend\">$<\/div>\n <\/div>\n <input data-required=\"yes\" data-type=\"input\" name=\"donation_item_custom\" value=\"20\" base-price=\"20\" base-currency-price=\"20\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" id=\"wpf_input_384_donation_item\" class=\"wpf_custom_amount wpf_money_amount input-prepend wpf_donation_item\" customname=\"Donation Progress Item\" disabled=\"1\" \/>\n <input data-required=\"yes\" data-type=\"input\" name=\"donation_item_custom\" value=\"20\" base-price=\"20\" base-currency-price=\"20\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" id=\"wpf_input_384_donation_item\" class=\"wpf_custom_amount wpf_money_amount input-prepend wpf_donation_item\" customname=\"Donation Progress Item\" style=\"display: none\" \/>\n <\/div>\n <\/div>\n <br\/>\n <div class=\"wpf_input_content wpf_donation_controls_radio\">\n <div class=\"form-check\">\n <input class=\"form-check-input wpf_payment_item wpf_donation_item_0\" type=\"radio\" data-price=\"1000\" base-price=\"1000\" name=\"donation_item\" id=\"donation_item_0_384\" customname=\"Donation Progress Item\" >\n <label class=\"form-check-label\" for=\"donation_item_0_384\">\n <span class=\"wpf_price_option_name\"\n itemprop=\"description\">\n $10 <\/span>\n <meta itemprop=\"price\" content=\"10\">\n <\/label>\n <\/div>\n <div class=\"form-check\">\n <input class=\"form-check-input wpf_payment_item wpf_donation_item_1\" type=\"radio\" data-price=\"2000\" base-price=\"2000\" name=\"donation_item\" id=\"donation_item_1_384\" value=\"1\" customname=\"Donation Progress Item\" checked=\"true\" >\n <label class=\"form-check-label\" for=\"donation_item_1_384\">\n <span class=\"wpf_price_option_name\"\n itemprop=\"description\">\n $20 <\/span>\n <meta itemprop=\"price\" content=\"20\">\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <input data-wpf_payment_method=\"paypal\" type=\"hidden\" name=\"__paypal_payment_gateway\" value=\"paypal\" \/> <div class=\"wpf-container\">\n <div class=\"wpf-row\" style=\"display: flex; gap: 24px;\">\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div style=\"display : block\" data-element_type=\"currency_switcher\" data-required_element=\"select\" data-required=\"yes\" data-target_element=\"currency_switcher\" required_id=\"currency_switcher\" class=\"wpf_form_group wpf_item_currency_switcher\" >\n <div class=\"wpf_input_label\">\n <label for=\"wpf_currency_switcher\" >Currency Switcher Options <span class=\"wpf_required_sign wpf_required_sign_left\">*<\/span><\/label>\n <\/div>\n <div class=\"wpf_multi_form_controls wpf_input_content wpf_multi_form_controls_select\">\n <select data-required=\"yes\" data-type=\"select\" name=\"currency_switcher\" class=\"wpf_form_control wpf_payment_item\" id=\"wpf_input_384_currency_switcher\" >\n <option data-type=\"placeholder\" value=\"\">--Select--<\/option>\n <option value=\"USD\" data-currency=\"USD\" customname=\"United States Dollar\" >United States Dollar (USD)\n <\/option>\n <option value=\"AED\" data-currency=\"AED\" customname=\"United Arab Emirates Dirham\" >United Arab Emirates Dirham (AED)\n <\/option>\n <option value=\"ANG\" data-currency=\"ANG\" customname=\"Netherlands Antillean Gulden\" >Netherlands Antillean Gulden (ANG)\n <\/option>\n <option value=\"AUD\" data-currency=\"AUD\" customname=\"Australian Dollar\" >Australian Dollar (AUD)\n <\/option>\n <option value=\"EGP\" data-currency=\"EGP\" customname=\"Egyptian Pound\" >Egyptian Pound (EGP)\n <\/option>\n <option value=\"EUR\" data-currency=\"EUR\" customname=\"Euro\" >Euro (EUR)\n <\/option>\n <option value=\"GBP\" data-currency=\"GBP\" customname=\"British Pound\" >British Pound (GBP)\n <\/option>\n <option value=\"JPY\" data-currency=\"JPY\" customname=\"Japanese Yen\" >Japanese Yen (JPY)\n <\/option>\n <option value=\"MYR\" data-currency=\"MYR\" customname=\"Malaysian Ringgit\" >Malaysian Ringgit (MYR)\n <\/option>\n <option value=\"NZD\" data-currency=\"NZD\" customname=\"New Zealand Dollar\" >New Zealand Dollar (NZD)\n <\/option>\n <option value=\"QAR\" data-currency=\"QAR\" customname=\"Qatari Riyal\" >Qatari Riyal (QAR)\n <\/option>\n <option value=\"SAR\" data-currency=\"SAR\" customname=\"Saudi Riyal\" >Saudi Riyal (SAR)\n <\/option>\n <option value=\"SGD\" data-currency=\"SGD\" customname=\"Singapore Dollar\" >Singapore Dollar (SGD)\n <\/option>\n <option value=\"TRY\" data-currency=\"TRY\" customname=\"Turkish Lira\" >Turkish Lira (TRY)\n <\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"wpf-col\" style=\"width: 50%\">\n <div style= \"display : block\" data-element_type=\"custom_payment_input\"\n class=\"wpf_form_group wpf_item_custom_payment_input\">\n <div class=\"wpf_input_label\">\n <label for=\"wpf_input_384_custom_payment_input\" >Custom Payment Amount<\/label>\n <\/div>\n <div class=\"wpf_input_content\">\n <div class=\"wpf_form_item_group\">\n <div class=\"wpf_input-group-prepend\">\n <div class=\"wpf_input-group-text wpf_input-group-text-prepend\">$<\/div>\n <\/div>\n <input data-required=\"no\" data-type=\"input\" name=\"custom_payment_input\" placeholder=\"\" value=\"\" type=\"number\" step=\"any\" data-is_custom_price=\"yes\" min=\"\" data-price=\"0\" id=\"wpf_input_384_custom_payment_input\" customname=\"Custom Payment Amount\" class=\"wpf_form_control wpf_custom_amount wpf_money_amount wpf_payment_item input-prepend\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n \n <div class=\"wpf_form_group wpf_form_submissions\" style=\"margin-top: 20px;\">\n <button id='stripe_form_submit_384' disabled='1' class='wpf_submit_button wpf_default_btn' >\n <span class=\"wpf_txt_normal\">Pay Your Zakat Now<\/span>\n <span style=\"display: none;\" class=\"wpf_txt_loading\">\n Please Wait\u2026 <\/span>\n <\/button>\n <div class=\"wpf_loading_svg\">\n <svg version=\"1.1\" id=\"loader-1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" width=\"30px\" height=\"30px\" viewBox=\"0 0 40 40\" enable-background=\"new 0 0 40 40\" xml:space=\"preserve\">\n <path opacity=\"0.2\" fill=\"#000\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z\" \/>\n <path fill=\"#000\" d=\"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z\">\n <animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 20 20\" to=\"360 20 20\" dur=\"0.5s\" repeatCount=\"indefinite\" \/>\n <\/path>\n <\/svg>\n <\/div>\n <\/div>\n <\/form>\n <div style=\"display: none\" class=\"wpf_form_notices\"><\/div>\n <\/div>\n\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"wisePaymentModal\" class=\"modal hidden fixed inset-0 bg-black bg-opacity-50 z-[100] flex justify-center items-start overflow-y-auto p-4 py-8 md:py-12 opacity-0\">\n <div class=\"modal-content bg-white w-full max-w-2xl rounded-2xl shadow-2xl relative transform scale-95 opacity-0 flex flex-col\" style=\"height: 90vh;\">\n <div class=\"flex-shrink-0 p-6 border-b flex justify-between items-center\">\n <div>\n <h2 class=\"text-2xl font-bold text-dt-blue\">Pay Zakat Maal via Wise<\/h2>\n <p id=\"wise-modal-subtitle\" class=\"text-gray-500 mt-1\">Complete your international payment.<\/p>\n <\/div>\n <button id=\"closeWiseModal\" class=\"text-gray-400 hover:text-gray-700 text-3xl leading-none\">×<\/button>\n <\/div>\n <div class=\"flex-grow p-2\">\n <iframe id=\"wiseIframe\" src=\"\" class=\"w-full h-full border-0 rounded-b-xl\"><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n \n \n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n <script>\n document.addEventListener('DOMContentLoaded', function () {\n \/\/ Initialize AOS (Animate On Scroll)\n if (typeof AOS !== 'undefined') {\n AOS.init({ once: true, duration: 800, easing: 'ease-in-out-cubic' });\n }\n\n \/\/ --- Sticky Header Logic ---\n const header = document.getElementById('mainHeader');\n if (header) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) header.classList.add('header-scrolled');\n else header.classList.remove('header-scrolled');\n });\n }\n\n \/\/ --- Mobile Menu Logic ---\n const mobileMenuButton = document.getElementById('mobileMenuButton');\n const mobileMenuTriggerBottom = document.getElementById('mobileMenuTriggerBottom');\n const mobileMenu = document.getElementById('mobileMenu');\n \n function toggleMobileMenu() {\n const isOpen = mobileMenu.classList.contains('is-open');\n mobileMenu.classList.toggle('is-open');\n const openIcon = document.getElementById('menu-open-icon');\n const closeIcon = document.getElementById('menu-close-icon');\n \n if (isOpen) {\n document.body.style.overflow = '';\n openIcon.classList.remove('hidden');\n closeIcon.classList.add('hidden');\n } else {\n document.body.style.overflow = 'hidden';\n openIcon.classList.add('hidden');\n closeIcon.classList.remove('hidden');\n }\n }\n\n if (mobileMenuButton) mobileMenuButton.addEventListener('click', toggleMobileMenu);\n if (mobileMenuTriggerBottom) mobileMenuTriggerBottom.addEventListener('click', toggleMobileMenu);\n\n \/\/ Accordion\n document.querySelectorAll('.mobile-menu-item button').forEach(btn => {\n btn.addEventListener('click', () => {\n const submenu = btn.nextElementSibling;\n const icon = btn.querySelector('i');\n const isOpen = submenu.style.maxHeight && submenu.style.maxHeight !== '0px';\n \n document.querySelectorAll('.mobile-submenu').forEach(el => el.style.maxHeight = '0px');\n document.querySelectorAll('.mobile-menu-item i').forEach(el => el.classList.remove('rotate-180'));\n\n if (!isOpen) {\n submenu.style.maxHeight = submenu.scrollHeight + \"px\";\n icon.classList.add('rotate-180');\n }\n });\n });\n\n \/\/ --- Sticky Bottom Nav Submenus ---\n const quickDonateBtn = document.getElementById('quickDonateButton');\n const servicesBtn = document.getElementById('servicesButton');\n const quickDonateMenu = document.getElementById('quickDonateSubmenu');\n const servicesMenu = document.getElementById('servicesSubmenu');\n const closeQuick = document.getElementById('closeQuickDonate');\n const closeServ = document.getElementById('closeServices');\n\n function toggleBottomMenu(menuToShow, menuToHide) {\n if(menuToHide) menuToHide.classList.add('hidden');\n if(menuToShow) menuToShow.classList.toggle('hidden');\n }\n\n if(quickDonateBtn) quickDonateBtn.addEventListener('click', () => toggleBottomMenu(quickDonateMenu, servicesMenu));\n if(servicesBtn) servicesBtn.addEventListener('click', () => toggleBottomMenu(servicesMenu, quickDonateMenu));\n if(closeQuick) closeQuick.addEventListener('click', () => closeSubmenu(quickDonateMenu));\n if(closeServ) closeServ.addEventListener('click', () => closeSubmenu(servicesMenu));\n \n \/\/ Close on backdrop click\n [quickDonateMenu, servicesMenu].forEach(menu => {\n if(menu) menu.addEventListener('click', (e) => { if(e.target === menu) closeSubmenu(menu); });\n });\n\n const openSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('hidden');\n setTimeout(() => submenu.classList.add('is-open'), 10);\n document.body.style.overflow = 'hidden';\n };\n\n const closeSubmenu = (submenu) => {\n if (!submenu) return;\n submenu.classList.remove('is-open');\n setTimeout(() => submenu.classList.add('hidden'), 300); \/\/ Wait for transition\n document.body.style.overflow = '';\n };\n\n \/\/ --- Mega Menu Hover Logic ---\n const programLinks = document.querySelectorAll('.program-link');\n const panels = document.querySelectorAll('.program-content-panel');\n programLinks.forEach(link => {\n link.addEventListener('mouseenter', () => {\n const id = link.dataset.program;\n programLinks.forEach(l => l.classList.remove('active', 'bg-white', 'shadow-sm'));\n link.classList.add('active', 'bg-white', 'shadow-sm');\n panels.forEach(p => p.classList.remove('active'));\n const target = document.getElementById(`program-content-${id}`);\n if(target) target.classList.add('active');\n });\n });\n \/\/ Set default active\n if(programLinks.length > 0) {\n programLinks[0].classList.add('active', 'bg-white', 'shadow-sm');\n if(panels.length > 0) panels[0].classList.add('active');\n }\n\n \/\/ --- Zakat Calculator Logic ---\n const currencySelect = document.getElementById('currency');\n const nisabBasisSelect = document.getElementById('nisabBasis');\n const nisabValueEl = document.getElementById('nisabValue');\n const allInputs = document.querySelectorAll('.zakat-input');\n const currencySymbolEls = document.querySelectorAll('.currency-symbol');\n const totalAssetsEl = document.getElementById('totalAssets');\n const totalLiabilitiesEl = document.getElementById('totalLiabilities');\n const netAssetsEl = document.getElementById('netAssets');\n const zakatResultEl = document.getElementById('zakatResult');\n const zakatMessageEl = document.getElementById('zakatMessage');\n \n \/\/ Payment Elements\n const donateZakatButton = document.getElementById('donateZakatButton');\n const openWiseModalBtn = document.getElementById('openWiseModalBtn');\n const paymentModal = document.getElementById('paymentModal');\n const closePaymentModalBtn = document.getElementById('closePaymentModal');\n const modalZakatAmountEl = document.getElementById('modalZakatAmount');\n const paymentShortcodeEl = document.getElementById('paymentShortcode');\n const wisePaymentModal = document.getElementById('wisePaymentModal');\n const closeWiseModalBtn = document.getElementById('closeWiseModal');\n const wiseIframe = document.getElementById('wiseIframe');\n const wiseModalSubtitle = document.getElementById('wise-modal-subtitle');\n \n const paymentFormIds = { 'IDR': 384, 'AUD': 385, 'USD': 386, 'SGD': 387, 'MYR': 388, 'TRY': 389 };\n const NISAB_GOLD_GRAMS = 85;\n const NISAB_SILVER_GRAMS = 595;\n const ZAKAT_RATE = 0.025;\n const TROY_OUNCE_IN_GRAMS = 31.1035;\n\n let goldPriceUSD = 0, silverPriceUSD = 0, exchangeRates = {}, currentCurrency = 'USD', currentNisabValue = 0, currentZakatAmount = 0;\n\n async function initializeCalculator() {\n await fetchApiData();\n populateCurrencies();\n addEventListeners();\n updateCalculator();\n }\n\n async function fetchApiData() {\n try {\n const [metalRes, currencyRes] = await Promise.all([\n fetch('https:\/\/api.metals.live\/v1\/spot').catch(e=>null),\n fetch('https:\/\/api.exchangerate-api.com\/v4\/latest\/USD').catch(e=>null)\n ]);\n const metalData = metalRes && metalRes.ok ? await metalRes.json() : [{metal: 'XAU', price: 2350.50}, {metal: 'XAG', price: 30.50}];\n const currencyData = currencyRes && currencyRes.ok ? await currencyRes.json() : {rates: {\"USD\":1,\"EUR\":0.92,\"GBP\":0.79,\"AUD\":1.50,\"CAD\":1.37,\"IDR\":16250.00,\"SGD\":1.35,\"MYR\":4.70, \"TRY\":32.25}};\n \n let goldItem = metalData.find ? metalData.find(m => m.metal === 'XAU') : null; \n let silverItem = metalData.find ? metalData.find(m => m.metal === 'XAG') : null;\n \n goldPriceUSD = (goldItem ? goldItem.price : 2350.50) \/ TROY_OUNCE_IN_GRAMS;\n silverPriceUSD = (silverItem ? silverItem.price : 30.50) \/ TROY_OUNCE_IN_GRAMS;\n exchangeRates = currencyData.rates;\n } catch (error) {\n console.error(\"Failed to fetch API data, using mock data:\", error);\n goldPriceUSD = 2350.50 \/ TROY_OUNCE_IN_GRAMS;\n silverPriceUSD = 30.50 \/ TROY_OUNCE_IN_GRAMS;\n exchangeRates = {\"USD\":1,\"EUR\":0.92,\"GBP\":0.79,\"AUD\":1.50,\"CAD\":1.37,\"IDR\":16250.00,\"SGD\":1.35,\"MYR\":4.70, \"TRY\":32.25};\n }\n }\n\n function populateCurrencies() {\n if (!currencySelect) return;\n const currencies = Object.keys(exchangeRates);\n const preferredCurrencies = ['IDR', 'AUD', 'USD', 'SGD', 'MYR', 'TRY', 'SAR', 'EUR', 'GBP'];\n \n const otherCurrencies = currencies.filter(c => !preferredCurrencies.includes(c)).sort();\n const sortedCurrencies = [...new Set([...preferredCurrencies, ...otherCurrencies])];\n\n let currencyNames;\n try {\n currencyNames = new Intl.DisplayNames(['en'], { type: 'currency' });\n } catch (e) {\n console.warn(\"Intl.DisplayNames not supported\");\n }\n\n currencySelect.innerHTML = ''; \n\n sortedCurrencies.forEach(currency => {\n if (exchangeRates[currency]) {\n const option = document.createElement('option');\n option.value = currency;\n let displayName = currency;\n if (currencyNames) {\n try {\n const name = currencyNames.of(currency);\n displayName = `${currency} - ${name}`;\n } catch (e) {}\n }\n option.textContent = displayName;\n currencySelect.appendChild(option);\n }\n });\n \n if (exchangeRates['IDR']) {\n currencySelect.value = 'IDR';\n } else {\n currencySelect.value = 'USD';\n }\n }\n \n function getCurrencySymbol(currencyCode) {\n try {\n return (0).toLocaleString(undefined, { style: 'currency', currency: currencyCode, minimumFractionDigits: 0, maximumFractionDigits: 0 }).replace(\/[0-9]\/g, '').trim();\n } catch (e) {\n const symbols = { USD: '$', EUR: '\u20ac', GBP: '\u00a3', AUD: 'A$', CAD: 'C$', IDR: 'Rp', SGD: 'S$', MYR: 'RM', TRY: '\u20ba' };\n return symbols[currencyCode] || currencyCode;\n }\n }\n\n function formatCurrency(value, currencyCode) {\n try {\n return value.toLocaleString(undefined, { style: 'currency', currency: currencyCode });\n } catch (e) {\n return `${getCurrencySymbol(currencyCode)}${value.toFixed(2)}`;\n }\n }\n\n function updateCalculator() {\n currentCurrency = currencySelect.value;\n const rate = exchangeRates[currentCurrency];\n \n currencySymbolEls.forEach(el => el.textContent = getCurrencySymbol(currentCurrency));\n const nisabBasis = nisabBasisSelect.value;\n const nisabGrams = nisabBasis === 'gold' ? NISAB_GOLD_GRAMS : NISAB_SILVER_GRAMS;\n const pricePerGramUSD = nisabBasis === 'gold' ? goldPriceUSD : silverPriceUSD;\n \n currentNisabValue = nisabGrams * pricePerGramUSD * rate;\n nisabValueEl.textContent = formatCurrency(currentNisabValue, currentCurrency);\n\n let totalAssets = 0;\n document.querySelectorAll('#goldValue, #silverValue, #cash, #loansGiven, #investments, #tradeGoods').forEach(input => {\n totalAssets += parseFloat(input.value) || 0;\n });\n\n let totalLiabilities = 0;\n document.querySelectorAll('#borrowedMoney, #wagesDue, #billsDue').forEach(input => {\n totalLiabilities += parseFloat(input.value) || 0;\n });\n\n const netAssets = totalAssets - totalLiabilities;\n totalAssetsEl.textContent = formatCurrency(totalAssets, currentCurrency);\n totalLiabilitiesEl.textContent = formatCurrency(totalLiabilities, currentCurrency);\n netAssetsEl.textContent = formatCurrency(netAssets, currentCurrency);\n\n if (netAssets >= currentNisabValue) {\n currentZakatAmount = netAssets * ZAKAT_RATE;\n zakatResultEl.textContent = formatCurrency(currentZakatAmount, currentCurrency);\n zakatMessageEl.textContent = `Your net assets are above the Nisab value. Your Zakat is 2.5% of your net assets.`;\n zakatMessageEl.classList.remove('text-orange-500');\n zakatMessageEl.classList.add('text-green-600');\n donateZakatButton.disabled = false;\n if(openWiseModalBtn) openWiseModalBtn.disabled = false;\n } else {\n currentZakatAmount = 0;\n zakatResultEl.textContent = formatCurrency(0, currentCurrency);\n zakatMessageEl.textContent = `Your net assets are below the Nisab value of ${formatCurrency(currentNisabValue, currentCurrency)}.`;\n zakatMessageEl.classList.remove('text-green-600');\n zakatMessageEl.classList.add('text-orange-500');\n donateZakatButton.disabled = true;\n if(openWiseModalBtn) openWiseModalBtn.disabled = true;\n }\n }\n \n \/\/ Modal Functions\n function openModal(modal) {\n if (!modal) return;\n const modalContent = modal.querySelector('.modal-content');\n document.body.style.overflow = 'hidden';\n modal.classList.remove('hidden');\n setTimeout(() => {\n modal.classList.remove('opacity-0');\n if (modalContent) modalContent.classList.remove('scale-95', 'opacity-0');\n }, 10);\n }\n\n function closeModal(modal) {\n if (!modal) return;\n const modalContent = modal.querySelector('.modal-content');\n document.body.style.overflow = '';\n modal.classList.add('opacity-0');\n if (modalContent) modalContent.classList.add('scale-95', 'opacity-0');\n setTimeout(() => {\n modal.classList.add('hidden');\n \/\/ Stop iframe content when closing wise modal to stop video\/process\n if (modal.id === 'wisePaymentModal' && wiseIframe) {\n wiseIframe.src = ''; \n }\n }, 300);\n }\n\n const setupAndOpenPaypalModal = () => {\n if (!modalZakatAmountEl || !paymentShortcodeEl) return;\n modalZakatAmountEl.textContent = formatCurrency(currentZakatAmount, currentCurrency);\n const formId = paymentFormIds[currentCurrency] || paymentFormIds['IDR'];\n paymentShortcodeEl.textContent = ``;\n openModal(paymentModal);\n };\n\n const setupAndOpenWiseModal = () => {\n if (!wiseModalSubtitle || !wiseIframe) return;\n wiseModalSubtitle.textContent = `Total Payment: ${formatCurrency(currentZakatAmount, currentCurrency)}`;\n \/\/ Replace with actual Wise integration link logic\n const wiseUrl = `https:\/\/dtpeduli.com\/donate-via-wise\/?amount=${currentZakatAmount.toFixed(2)}¤cy=${currentCurrency}`; \n wiseIframe.src = wiseUrl;\n openModal(wisePaymentModal);\n };\n\n\n function addEventListeners() {\n if (currencySelect) currencySelect.addEventListener('change', updateCalculator);\n if (nisabBasisSelect) nisabBasisSelect.addEventListener('change', updateCalculator);\n allInputs.forEach(input => input.addEventListener('input', updateCalculator));\n \n \/\/ Paypal Modal Triggers\n if (donateZakatButton) donateZakatButton.addEventListener('click', () => { if (!donateZakatButton.disabled) setupAndOpenPaypalModal(); });\n if(closePaymentModalBtn) closePaymentModalBtn.addEventListener('click', () => closeModal(paymentModal));\n if(paymentModal) paymentModal.addEventListener('click', (e) => { if (e.target === paymentModal) closeModal(paymentModal); });\n \n \/\/ Wise Modal Triggers\n if (openWiseModalBtn) openWiseModalBtn.addEventListener('click', () => { if (!openWiseModalBtn.disabled) setupAndOpenWiseModal(); });\n if (closeWiseModalBtn) closeWiseModalBtn.addEventListener('click', () => closeModal(wisePaymentModal));\n if (wisePaymentModal) wisePaymentModal.addEventListener('click', (e) => { if (e.target === wisePaymentModal) closeModal(wisePaymentModal); });\n }\n \n if (currencySelect && nisabBasisSelect) {\n initializeCalculator();\n }\n \n \/\/ --- News Integration Logic ---\n const newsContainer = document.getElementById('news-container');\n async function fetchNewsAndStories() {\n if (!newsContainer) return;\n const apiUrl = 'https:\/\/dtpeduli.com\/wp-json\/wp\/v2\/posts?_embed&per_page=3';\n try {\n const response = await fetch(apiUrl);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n const posts = await response.json();\n newsContainer.innerHTML = '';\n posts.forEach(post => {\n const title = post.title.rendered;\n const link = post.link;\n const excerpt = post.excerpt.rendered.replace(\/<[^>]*>?\/gm, '').replace('[…]', '...');\n const imageUrl = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || `https:\/\/placehold.co\/600x400\/00358f\/FFFFFF?text=News`;\n \n const card = document.createElement('div');\n card.className = 'bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 flex flex-col';\n card.setAttribute('data-aos', 'fade-up');\n card.innerHTML = `\n <a href=\"${link}\" target=\"_blank\" class=\"block\">\n <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${title}\" class=\"w-full h-48 object-cover\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/600x400\/00358f\/FFFFFF?text=Image+Not+Found';\">\n <\/a>\n <div class=\"p-6 flex flex-col flex-grow\">\n <h3 class=\"font-bold text-xl mb-2 text-dt-blue\">\n <a href=\"${link}\" target=\"_blank\" class=\"hover:underline\">${title}<\/a>\n <\/h3>\n <p class=\"text-gray-600 text-base mb-4 flex-grow\">${excerpt}<\/p>\n <a href=\"${link}\" target=\"_blank\" class=\"w-full text-center bg-dt-blue text-white font-bold py-2 px-6 rounded-full hover:bg-opacity-90 transition-colors mt-auto\">Read More<\/a>\n <\/div>\n `;\n newsContainer.appendChild(card);\n });\n } catch (error) {\n console.error(\"Could not fetch news:\", error);\n newsContainer.innerHTML = `<div class=\"lg:col-span-3 text-center\"><p class=\"text-red-500\">Could not load the latest stories. Please try again later.<\/p><\/div>`;\n }\n }\n fetchNewsAndStories();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Donate | DT Peduli – Spreading Goodness Home About Us Profile Our Management History Official Address Programs Our Core Pillars […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-176","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":41,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/176\/revisions"}],"predecessor-version":[{"id":557,"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/pages\/176\/revisions\/557"}],"wp:attachment":[{"href":"https:\/\/dtpeduli.com\/donate\/wp-json\/wp\/v2\/media?parent=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}