{"id":5065,"date":"2025-10-11T13:02:41","date_gmt":"2025-10-11T13:02:41","guid":{"rendered":"https:\/\/tarfus.org\/?page_id=5065"},"modified":"2026-02-18T23:18:13","modified_gmt":"2026-02-18T23:18:13","slug":"zakat","status":"publish","type":"page","link":"https:\/\/tarfus.org\/en\/zakat\/","title":{"rendered":"Zakat"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Gelenekten Gelece\u011fe\u2026<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tnamaz vakitleri<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t<\/path><\/svg>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n TARF Zekat Hesaplama - Geli\u015fmi\u015f \u0130slami Finans Arac\u0131<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Amiri:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');\r\n \r\n .zakat-calculator {\r\n --primary-color: #FECC5B;\r\n --primary-light: #FED97B;\r\n --primary-dark: #E6B84F;\r\n --secondary-color: #DE4445;\r\n --secondary-light: #F4A6A7;\r\n --secondary-dark: #C73E3F;\r\n --text-dark: #2c3e50;\r\n --text-light: #6c757d;\r\n --background-color: #ffffff;\r\n --border-color: #dee2e6;\r\n --shadow-color: rgba(0, 0, 0, 0.1);\r\n font-family: 'Inter', sans-serif;\r\n line-height: 1.6;\r\n color: var(--text-dark);\r\n }\r\n\r\n .zakat-calculator * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n .zakat-calculator .container {\r\n max-width: 100%;\r\n width: 100%;\r\n background: rgba(255, 255, 255, 0.98);\r\n border-radius: 30px;\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n overflow: hidden;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n\r\n .zakat-calculator .container::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));\r\n animation: shimmer 3s infinite;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { transform: translateX(-100%); }\r\n 100% { transform: translateX(100%); }\r\n }\r\n\r\n .zakat-calculator .header {\r\n padding: 20px;\r\n background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);\r\n color: white !important;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .zakat-calculator .header-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n position: relative;\r\n z-index: 1;\r\n gap: 16px;\r\n }\r\n .zakat-calculator .header-cta {\r\n flex: 1;\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .zakat-calculator .header-text {\r\n text-align: left;\r\n }\r\n\r\n .zakat-calculator .header-text h1 {\r\n font-family: 'Amiri', serif;\r\n font-size: 1.8rem;\r\n margin-bottom: 5px;\r\n text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\r\n color: white !important;\r\n }\r\n\r\n .zakat-calculator .header-text p {\r\n font-size: 0.9rem;\r\n opacity: 0.9;\r\n font-weight: 300;\r\n margin: 0;\r\n color: white !important;\r\n }\r\n\r\n .zakat-calculator .currency-selector {\r\n text-align: right;\r\n }\r\n\r\n .zakat-calculator .currency-selector h3 {\r\n color: white;\r\n margin-bottom: 8px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n opacity: 0.9;\r\n }\r\n\r\n .zakat-calculator .currency-buttons {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: flex-end;\r\n }\r\n\r\n .zakat-calculator .top-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 8px;\r\n }\r\n .zakat-calculator .nav-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 18px;\r\n border: 2px solid var(--primary-color);\r\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);\r\n background-size: 200% 200%;\r\n background-position: 0% 50%;\r\n color: #fff;\r\n border-radius: 28px;\r\n cursor: pointer;\r\n font-weight: 700;\r\n letter-spacing: 0.2px;\r\n transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-position 0.3s ease;\r\n font-size: 0.9rem;\r\n text-decoration: none;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 6px 16px rgba(254, 204, 91, 0.35), 0 2px 6px rgba(222, 68, 69, 0.25);\r\n text-shadow: 0 1px 1px rgba(0,0,0,0.15);\r\n will-change: transform;\r\n animation: cta-zoom 3s ease-in-out infinite;\r\n }\r\n .zakat-calculator .nav-btn:hover {\r\n transform: translateY(-2px) scale(1.03);\r\n background-position: 100% 50%;\r\n box-shadow: 0 10px 24px rgba(254, 204, 91, 0.45), 0 4px 10px rgba(222, 68, 69, 0.35);\r\n }\r\n .zakat-calculator .nav-btn::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -30%;\r\n width: 30%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);\r\n transform: skewX(-20deg);\r\n transition: left 0.6s ease;\r\n }\r\n .zakat-calculator .nav-btn:hover::after {\r\n left: 130%;\r\n }\r\n .zakat-calculator .nav-btn:active {\r\n transform: translateY(0);\r\n filter: brightness(0.98);\r\n }\r\n .zakat-calculator .nav-btn:focus-visible {\r\n outline: none;\r\n box-shadow: 0 0 0 4px rgba(254, 204, 91, 0.45);\r\n }\r\n\r\n \/* One-time attention animation and click feedback *\/\r\n @keyframes cta-pop {\r\n 0% { transform: translateY(0) scale(1); }\r\n 40% { transform: translateY(-1px) scale(1.03); }\r\n 100% { transform: translateY(0) scale(1); }\r\n }\r\n .zakat-calculator .nav-btn.attention {\r\n animation: cta-pop 800ms ease-out both;\r\n }\r\n \/* Idle zoom pulse to indicate clickability *\/\r\n @keyframes cta-zoom {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.04); }\r\n 100% { transform: scale(1); }\r\n }\r\n @keyframes click-pulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6); }\r\n 100% { box-shadow: 0 0 0 12px rgba(255, 193, 7, 0); }\r\n }\r\n .zakat-calculator .nav-btn.clicked {\r\n animation: click-pulse 500ms ease-out;\r\n }\r\n \/* Respect reduced motion preferences *\/\r\n @media (prefers-reduced-motion: reduce) {\r\n .zakat-calculator .nav-btn { animation: none; }\r\n }\r\n \/* Hint copy under the button *\/\r\n .zakat-calculator .cta-hint {\r\n text-align: center;\r\n color: #666;\r\n font-size: 0.9rem;\r\n margin-top: 6px;\r\n }\r\n\r\n .zakat-calculator .currency-btn {\r\n padding: 8px 16px;\r\n border: 2px solid var(--primary-color);\r\n background: var(--primary-color);\r\n color: var(--text-dark);\r\n border-radius: 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n font-size: 0.85rem;\r\n box-shadow: 0 2px 8px rgba(254, 204, 91, 0.3);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .zakat-calculator .currency-btn.active {\r\n background: var(--secondary-color);\r\n border-color: var(--secondary-color);\r\n color: white;\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 12px rgba(222, 68, 69, 0.4);\r\n }\r\n\r\n .zakat-calculator .currency-btn:hover {\r\n background: var(--secondary-color);\r\n border-color: var(--secondary-color);\r\n color: white;\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 12px rgba(222, 68, 69, 0.4);\r\n }\r\n\r\n .zakat-calculator .flag-icon {\r\n width: 20px;\r\n height: 15px;\r\n border-radius: 2px;\r\n }\r\n\r\n .zakat-calculator .calculator-grid {\r\n margin: 15px;\r\n display: grid;\r\n grid-template-columns: 2fr 1fr;\r\n gap: 20px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .zakat-calculator .calculator-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n .zakat-calculator .input-section {\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 15px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n backdrop-filter: blur(5px);\r\n margin-bottom: 0;\r\n }\r\n\r\n .zakat-calculator .results-section {\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 15px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n padding: 20px;\r\n backdrop-filter: blur(5px);\r\n }\r\n\r\n .zakat-calculator .tabs {\r\n display: flex;\r\n background: rgba(248, 249, 250, 0.8);\r\n border-radius: 10px 10px 0 0;\r\n }\r\n\r\n .zakat-calculator .tab {\r\n flex: 1;\r\n padding: 15px 12px;\r\n text-align: center;\r\n cursor: pointer;\r\n border: none;\r\n background: transparent;\r\n color: var(--text-light);\r\n font-weight: 600;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n font-size: 0.85rem;\r\n border-radius: 12px 12px 0 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .zakat-calculator .tab::before {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%) scaleX(0);\r\n width: 80%;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\r\n border-radius: 2px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .zakat-calculator .tab.active {\r\n background: rgba(255, 255, 255, 0.98);\r\n color: var(--secondary-color);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .zakat-calculator .tab.active::before {\r\n transform: translateX(-50%) scaleX(1);\r\n }\r\n\r\n .zakat-calculator .tab:hover {\r\n color: var(--primary-color);\r\n background: rgba(255, 255, 255, 0.8);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .zakat-calculator .tab-content {\r\n padding: 20px;\r\n display: none;\r\n }\r\n\r\n .zakat-calculator .tab-content.active {\r\n display: block;\r\n }\r\n\r\n .zakat-calculator .form-group {\r\n margin-bottom: 20px;\r\n position: relative;\r\n }\r\n\r\n .zakat-calculator .form-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: var(--text-dark);\r\n font-size: 0.9rem;\r\n position: relative;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .zakat-calculator .form-group label::before {\r\n content: '';\r\n position: absolute;\r\n left: -12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 4px;\r\n height: 0;\r\n background: var(--primary-color);\r\n border-radius: 2px;\r\n transition: height 0.3s ease;\r\n }\r\n\r\n .zakat-calculator .form-group:hover label::before {\r\n height: 100%;\r\n }\r\n\r\n .zakat-calculator .form-group input {\r\n width: 100%;\r\n padding: 12px 16px;\r\n border: 2px solid var(--border-color);\r\n border-radius: 12px;\r\n font-size: 0.95rem;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: rgba(255, 255, 255, 0.95);\r\n backdrop-filter: blur(10px);\r\n position: relative;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .zakat-calculator .form-group input:hover {\r\n border-color: var(--primary-color);\r\n box-shadow: 0 4px 12px rgba(254, 204, 91, 0.15);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .zakat-calculator .form-group input:focus {\r\n outline: none;\r\n border-color: var(--secondary-color);\r\n box-shadow: 0 0 0 4px rgba(222, 68, 69, 0.15), 0 8px 25px rgba(222, 68, 69, 0.1);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .zakat-calculator .form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 15px;\r\n }\r\n\r\n .zakat-calculator .results-section h3 {\r\n color: var(--primary-color);\r\n margin-bottom: 15px;\r\n font-size: 1.1rem;\r\n text-align: center;\r\n border-bottom: 2px solid var(--primary-color);\r\n padding-bottom: 8px;\r\n }\r\n\r\n .zakat-calculator .result-card {\r\n background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);\r\n padding: 18px 20px;\r\n border-radius: 16px;\r\n margin-bottom: 16px;\r\n border-left: 5px solid var(--primary-color);\r\n backdrop-filter: blur(10px);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .zakat-calculator .result-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\r\n transform: scaleX(0);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .zakat-calculator .result-card:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\r\n border-left-color: var(--secondary-color);\r\n }\r\n\r\n .zakat-calculator .result-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .zakat-calculator .result-card h4 {\r\n color: var(--primary-color);\r\n margin-bottom: 5px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n }\r\n\r\n .zakat-calculator .result-value {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: var(--text-dark);\r\n }\r\n\r\n .zakat-calculator .nisab-info {\r\n background: linear-gradient(135deg, rgba(255, 243, 205, 0.9) 0%, rgba(255, 234, 167, 0.9) 100%);\r\n padding: 12px 15px;\r\n border-radius: 10px;\r\n margin-bottom: 12px;\r\n backdrop-filter: blur(5px);\r\n border: 1px solid rgba(255, 234, 167, 0.5);\r\n }\r\n\r\n .zakat-calculator .section-header {\r\n background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);\r\n color: white !important;\r\n padding: 12px 15px;\r\n border-radius: 10px;\r\n margin: 20px 0 15px 0;\r\n text-align: center;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .zakat-calculator .section-header h2 {\r\n margin: 0;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n color: white !important;\r\n }\r\n\r\n .zakat-calculator .liabilities-section {\r\n background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);\r\n margin-top: 25px;\r\n color: white !important;\r\n }\r\n\r\n .zakat-calculator .liabilities-section h2 {\r\n color: white !important;\r\n }\r\n\r\n .zakat-calculator .liabilities-content {\r\n background: rgba(255, 245, 245, 0.9);\r\n padding: 20px;\r\n border-radius: 10px;\r\n border: 2px solid rgba(220, 53, 69, 0.3);\r\n margin-bottom: 15px;\r\n backdrop-filter: blur(5px);\r\n }\r\n\r\n .zakat-calculator .nisab-info h4 {\r\n color: #856404;\r\n margin-bottom: 15px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .zakat-calculator .nisab-values {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n\r\n .zakat-calculator .refresh-gold-price-btn {\r\n background: linear-gradient(135deg, #ffd700, #ffed4e);\r\n color: #333;\r\n border: none;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n margin: 15px auto 0 auto;\r\n display: block;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);\r\n }\r\n\r\n .zakat-calculator .refresh-gold-price-btn:hover {\r\n background: linear-gradient(135deg, #ffed4e, #ffd700);\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 8px rgba(255, 215, 0, 0.4);\r\n }\r\n\r\n .zakat-calculator .refresh-gold-price-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .zakat-calculator .nisab-item {\r\n text-align: center;\r\n padding: 15px 25px;\r\n background: rgba(255, 255, 255, 0.7);\r\n border-radius: 10px;\r\n min-width: 200px;\r\n }\r\n\r\n .zakat-calculator .cash-info {\r\n margin-top: 8px;\r\n padding: 8px 12px;\r\n background: #f8f9fa;\r\n border-radius: 6px;\r\n border-left: 3px solid #28a745;\r\n }\r\n\r\n .zakat-calculator .cash-info small {\r\n color: #6c757d;\r\n font-weight: 500;\r\n }\r\n\r\n .zakat-calculator .gold-info {\r\n margin-top: 5px;\r\n padding: 8px 12px;\r\n background: rgba(255, 243, 205, 0.8);\r\n border-radius: 6px;\r\n border-left: 3px solid #ffd700;\r\n }\r\n\r\n .zakat-calculator .gold-info small {\r\n color: #856404;\r\n font-weight: 500;\r\n }\r\n\r\n .zakat-calculator .nisab-item .label {\r\n font-size: 0.9rem;\r\n color: #856404;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .zakat-calculator .nisab-item .value {\r\n font-weight: 700;\r\n color: #856404;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .zakat-calculator .zakat-status {\r\n padding: 25px;\r\n border-radius: 20px;\r\n text-align: center;\r\n margin-bottom: 25px;\r\n font-weight: 600;\r\n font-size: 1.2rem;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .zakat-calculator .zakat-status::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n transition: left 0.6s ease;\r\n }\r\n\r\n .zakat-calculator .zakat-status:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .zakat-calculator .zakat-due {\r\n background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);\r\n color: var(--text-dark);\r\n border: 3px solid var(--primary-dark);\r\n font-weight: 700;\r\n animation: pulse-glow 2s infinite;\r\n }\r\n\r\n @keyframes pulse-glow {\r\n 0%, 100% { box-shadow: 0 8px 25px rgba(254, 204, 91, 0.3); }\r\n 50% { box-shadow: 0 12px 35px rgba(254, 204, 91, 0.5); }\r\n }\r\n\r\n .zakat-calculator .zakat-not-due {\r\n background: linear-gradient(135deg, var(--secondary-light) 0%, rgba(244, 166, 167, 0.8) 100%);\r\n color: var(--text-dark);\r\n border: 3px solid var(--secondary-color);\r\n }\r\n\r\n .zakat-calculator .zakat-paid {\r\n background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);\r\n color: #155724;\r\n border: 3px solid #28a745;\r\n font-weight: 700;\r\n animation: success-glow 2s infinite;\r\n }\r\n\r\n @keyframes success-glow {\r\n 0%, 100% { box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3); }\r\n 50% { box-shadow: 0 12px 35px rgba(40, 167, 69, 0.5); }\r\n }\r\n\r\n \/* Progress indicator styles *\/\r\n .zakat-calculator .calculation-progress {\r\n background: linear-gradient(135deg, rgba(254, 204, 91, 0.1) 0%, rgba(222, 68, 69, 0.1) 100%);\r\n padding: 15px 20px;\r\n border-radius: 12px;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n border: 1px solid rgba(254, 204, 91, 0.3);\r\n }\r\n\r\n .zakat-calculator .progress-bar {\r\n width: 100%;\r\n height: 6px;\r\n background: rgba(255, 255, 255, 0.3);\r\n border-radius: 3px;\r\n overflow: hidden;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .zakat-calculator .progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));\r\n width: 0%;\r\n transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n border-radius: 3px;\r\n }\r\n\r\n .zakat-calculator .progress-text {\r\n font-size: 0.9rem;\r\n color: var(--text-dark);\r\n font-weight: 600;\r\n }\r\n\r\n \/* Input validation styles *\/\r\n .zakat-calculator .form-group.focused {\r\n transform: scale(1.02);\r\n }\r\n\r\n .zakat-calculator .valid-input {\r\n border-color: #28a745 !important;\r\n box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15) !important;\r\n }\r\n\r\n .zakat-calculator .invalid-input {\r\n border-color: #dc3545 !important;\r\n box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;\r\n }\r\n\r\n .zakat-calculator .valid-input::after {\r\n content: '\u2713';\r\n position: absolute;\r\n right: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #28a745;\r\n font-weight: bold;\r\n }\r\n\r\n .zakat-calculator .calculation-breakdown {\r\n background: var(--primary-light);\r\n padding: 20px;\r\n border-radius: 15px;\r\n border: 2px solid var(--primary-color);\r\n }\r\n\r\n .zakat-calculator .calculation-breakdown h4 {\r\n color: var(--secondary-color);\r\n margin-bottom: 15px;\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n }\r\n\r\n .zakat-calculator .breakdown-item {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n padding: 8px 0;\r\n border-bottom: 1px solid rgba(0,0,0,0.1);\r\n color: var(--text-dark);\r\n }\r\n\r\n .zakat-calculator .breakdown-item:last-child {\r\n border-bottom: none;\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n color: var(--text-dark);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .zakat-calculator .calculator-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .zakat-calculator .header-content {\r\n flex-direction: column;\r\n gap: 10px;\r\n text-align: center;\r\n padding: 15px 0;\r\n }\r\n \r\n .zakat-calculator .header-text {\r\n text-align: center;\r\n }\r\n \r\n \/* Hide currency selector on mobile since only USD is used *\/\r\n .zakat-calculator .currency-selector {\r\n display: none;\r\n }\r\n \r\n .zakat-calculator .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .zakat-calculator .currency-buttons {\r\n justify-content: center;\r\n }\r\n \r\n .zakat-calculator .header h1 {\r\n font-size: 1.8rem;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .zakat-calculator .header p {\r\n font-size: 0.9rem;\r\n margin-bottom: 0;\r\n }\r\n \r\n .zakat-calculator .nisab-values {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n \/* Mobile-optimized input fields *\/\r\n .zakat-calculator input[type=\"number\"] {\r\n height: 48px; \/* Minimum 44px for touch targets *\/\r\n font-size: 16px; \/* Prevents zoom on iOS *\/\r\n padding: 12px 8px;\r\n border-radius: 8px;\r\n margin-bottom: 6px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n }\r\n \r\n .zakat-calculator .form-group {\r\n margin-bottom: 15px;\r\n }\r\n \r\n .zakat-calculator .form-group label {\r\n font-size: 14px;\r\n margin-bottom: 6px;\r\n display: block;\r\n font-weight: 600;\r\n }\r\n \r\n \/* Larger touch targets for tabs *\/\r\n .zakat-calculator .tab {\r\n padding: 12px 20px;\r\n font-size: 14px;\r\n min-height: 44px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n \/* Better spacing for mobile *\/\r\n .zakat-calculator .container {\r\n padding: 3px;\r\n }\r\n \r\n .zakat-calculator .input-section,\r\n .zakat-calculator .result-section {\r\n padding: 10px 3px;\r\n }\r\n \r\n \/* Mobile-first typography improvements *\/\r\n .zakat-calculator .result-section h3 {\r\n font-size: 1.2rem;\r\n margin-bottom: 12px;\r\n line-height: 1.4;\r\n }\r\n \r\n .zakat-calculator .result-item {\r\n margin-bottom: 16px;\r\n padding: 12px;\r\n border-radius: 8px;\r\n }\r\n \r\n .zakat-calculator .result-item strong {\r\n font-size: 1.1rem;\r\n display: block;\r\n margin-bottom: 4px;\r\n }\r\n \r\n .zakat-calculator .nisab-item {\r\n padding: 12px;\r\n margin-bottom: 12px;\r\n border-radius: 8px;\r\n }\r\n \r\n .zakat-calculator .nisab-item strong {\r\n font-size: 1rem;\r\n line-height: 1.3;\r\n }\r\n \r\n \/* Better button spacing and typography *\/\r\n .zakat-calculator .calculate-btn {\r\n padding: 14px 24px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-top: 20px;\r\n border-radius: 8px;\r\n min-height: 48px;\r\n }\r\n \r\n \/* Improved readability for small text *\/\r\n .zakat-calculator .nisab-values p {\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin-bottom: 8px;\r\n }\r\n \r\n \/* Better spacing between sections *\/\r\n .zakat-calculator .tabs {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .zakat-calculator .tab-content {\r\n padding-top: 20px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"zakat-calculator\">\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <div class=\"header-content\">\r\n <div class=\"header-text\">\r\n <h1>\ud83d\udd4c TARF Zekat Hesaplama<\/h1>\r\n <p>ABD i\u00e7in Geli\u015fmi\u015f \u0130slami Finans Arac\u0131<\/p>\r\n <\/div>\r\n <div class=\"header-cta\">\r\n <a class=\"nav-btn\" href=\"https:\/\/tarfus.org\/tr\/zekat-hesaplama\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Zekat Hesaplamay\u0131 A\u00e7\">Zekat Hesaplama<\/a>\r\n <a class=\"nav-btn\" href=\"https:\/\/tarfus.org\/zekat-fetvalari\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Zekat Fetvalar\u0131n\u0131 A\u00e7\">Zekat Fetvalar\u0131<\/a>\r\n <\/div>\r\n <div class=\"currency-selector\">\r\n <h3>\ud83d\udcb1 Para Birimi: USD<\/h3>\r\n <div class=\"currency-buttons\">\r\n <button class=\"currency-btn active\" data-currency=\"USD\">\ud83c\uddfa\ud83c\uddf8 USD<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"calculator-grid\">\r\n <div class=\"input-section\">\r\n <div class=\"section-header\">\r\n <h2>\ud83d\udcca ZEKATA TAB\u0130 VARLIKLAR<\/h2>\r\n <\/div>\r\n <div class=\"tabs\">\r\n <button class=\"tab active\" data-tab=\"personal\">\ud83d\udcb0 \u015eahsi Varl\u0131klar<\/button>\r\n <button class=\"tab\" data-tab=\"business\">\ud83c\udfe2 Ticari Varl\u0131klar<\/button>\r\n <button class=\"tab\" data-tab=\"investments\">\ud83d\udcc8 Yat\u0131r\u0131mlar<\/button>\r\n <\/div>\r\n\r\n <div class=\"tab-content active\" id=\"personal\">\r\n <div class=\"form-group\">\r\n <label for=\"cash\">\ud83d\udcb5 Nakit ve Banka Hesaplar\u0131<\/label>\r\n <input type=\"number\" id=\"cash\" placeholder=\"Eldeki nakit, vadesiz, vadeli hesaplar vb.\" step=\"1\">\r\n <div class=\"cash-info\">\r\n <small>\ud83d\udca1 T\u00fcm likit nakitleri dahil edin: eldeki nakit, vadesiz hesaplar, tasarruf hesaplar\u0131<\/small>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"gold\">\ud83e\udd47 Alt\u0131n (gram cinsinden)<\/label>\r\n <input type=\"number\" id=\"gold\" placeholder=\"A\u011f\u0131rl\u0131\u011f\u0131 gram olarak girin\" step=\"1\">\r\n <div class=\"gold-info\">\r\n <small>\ud83d\udca1 Hesaplama i\u00e7in g\u00fcncel alt\u0131n fiyat\u0131 kullan\u0131lacakt\u0131r<\/small>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"money-lent\">\ud83d\udcb0 Ba\u015fkalar\u0131na Verilen Bor\u00e7lar<\/label>\r\n <input type=\"number\" id=\"money-lent\" placeholder=\"Aileye\/arkada\u015flara verilen geri al\u0131nabilir bor\u00e7lar\" step=\"1\">\r\n <div class=\"money-lent-info\">\r\n <small>\ud83d\udca1 Geri \u00f6denmesini bekledi\u011finiz bor\u00e7lar\u0131 dahil edin<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tab-content\" id=\"business\">\r\n <div class=\"form-group\">\r\n <label for=\"business-cash\">\ud83d\udcbc Ticari Nakit ve Banka Hesaplar\u0131<\/label>\r\n <input type=\"number\" id=\"business-cash\" placeholder=\"Tutar\u0131 girin\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"inventory\">\ud83d\udce6 Ticari Mal Stoku<\/label>\r\n <input type=\"number\" id=\"inventory\" placeholder=\"G\u00fcncel piyasa de\u011feri\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"receivables\">\ud83d\udccb Alacaklar (Ticari)<\/label>\r\n <input type=\"number\" id=\"receivables\" placeholder=\"\u0130\u015fletmeye bor\u00e7lu olunan para\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"rental-income\">\ud83c\udfe0 Kira Geliri (Ayl\u0131k)<\/label>\r\n <input type=\"number\" id=\"rental-income\" placeholder=\"Ayl\u0131k kira geliri\" step=\"1\">\r\n <div class=\"rental-income-info\">\r\n <small>\ud83d\udca1 Sahip oldu\u011funuz m\u00fclklerden gelen ayl\u0131k kira gelirini girin<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tab-content\" id=\"investments\">\r\n <div class=\"form-group\">\r\n <label for=\"stocks\">\ud83d\udcca Hisse Senetleri<\/label>\r\n <input type=\"number\" id=\"stocks\" placeholder=\"G\u00fcncel piyasa de\u011feri\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"bonds\">\ud83c\udfdb Menkul K\u0131ymetler<\/label>\r\n <input type=\"number\" id=\"bonds\" placeholder=\"G\u00fcncel de\u011fer\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"mutual-funds\">\ud83d\udcc8 Yat\u0131r\u0131m Fonlar\u0131<\/label>\r\n <input type=\"number\" id=\"mutual-funds\" placeholder=\"G\u00fcncel de\u011fer (NAV)\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"retirement\">\ud83c\udfe6 Emeklilik Hesaplar\u0131 (401k, IRA)<\/label>\r\n <input type=\"number\" id=\"retirement\" placeholder=\"G\u00fcncel de\u011fer\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"crypto\">\u20bf Kripto Para<\/label>\r\n <input type=\"number\" id=\"crypto\" placeholder=\"G\u00fcncel piyasa de\u011feri\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"investment-property\">\ud83c\udfd8 Yat\u0131r\u0131m Ama\u00e7l\u0131 Gayrimenkul<\/label>\r\n <input type=\"number\" id=\"investment-property\" placeholder=\"G\u00fcncel piyasa de\u011feri\" step=\"1\">\r\n <div class=\"investment-property-info\">\r\n <small>\ud83d\udca1 Yat\u0131r\u0131m ama\u00e7l\u0131 tutulan kiral\u0131k m\u00fclkleri, arsalar\u0131 dahil edin<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-header liabilities-section\">\r\n <h2>\ud83d\udcb3 BOR\u00c7LAR<\/h2>\r\n <\/div>\r\n \r\n <div class=\"liabilities-content\">\r\n <div class=\"form-group\">\r\n <label for=\"personal-debts\">\ud83d\udcb3 \u00d6denmemi\u015f \u015eahsi Bor\u00e7lar<\/label>\r\n <input type=\"number\" id=\"personal-debts\" placeholder=\"Kredi kartlar\u0131, \u015fahsi krediler\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"loans\">\ud83c\udfe0 Krediler ve \u0130potekler (bir y\u0131l i\u00e7inde \u00f6denecek)<\/label>\r\n <input type=\"number\" id=\"loans\" placeholder=\"Bu y\u0131l \u00f6denecek tutar\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"business-debts\">\ud83c\udfe2 Ticari Bor\u00e7lar<\/label>\r\n <input type=\"number\" id=\"business-debts\" placeholder=\"Ticari krediler ve bor\u00e7lar\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"zakat-paid\">\u2705 Pe\u015fin \u00d6denen Zekat (Mevcut Y\u0131l)<\/label>\r\n <input type=\"number\" id=\"zakat-paid\" placeholder=\"Bu y\u0131l zaten \u00f6denmi\u015f zekat\" step=\"1\">\r\n <div class=\"zakat-paid-info\">\r\n <small>\ud83d\udca1 Bu kameri y\u0131l i\u00e7inde yap\u0131lan zekat \u00f6demelerini girin<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"results-section\">\r\n <h3>\ud83d\udcca Zekat Hesaplama Sonu\u00e7lar\u0131<\/h3>\r\n \r\n <div class=\"nisab-info\">\r\n <h4>\ud83d\udccf Nisab S\u0131n\u0131rlar\u0131<\/h4>\r\n <div class=\"nisab-values\">\r\n <div class=\"nisab-item\">\r\n <div class=\"label\">Alt\u0131n Nisab\u0131<\/div>\r\n <div class=\"value\" id=\"gold-nisab\">$5,567.50<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"gold-info\">\r\n <small>Zekat alt\u0131n nisab\u0131 81.18 gram alt\u0131nd\u0131r.<\/small>\r\n <\/div>\r\n <button class=\"refresh-gold-price-btn\" onclick=\"refreshGoldPrice()\" title=\"G\u00fcncel alt\u0131n fiyat\u0131n\u0131 yenile\">\r\n \ud83d\udd04 Alt\u0131n Fiyat\u0131n\u0131 G\u00fcncelle\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"zakat-status\" id=\"zakat-status\">\r\n Zekat hesaplamak i\u00e7in varl\u0131klar\u0131n\u0131z\u0131 girin\r\n <\/div>\r\n\r\n <div class=\"result-card\">\r\n <h4>\ud83d\udcb0 Toplam \u00d6denecek Zekat<\/h4>\r\n <div class=\"result-value\" id=\"zakat-amount\">$0.00<\/div>\r\n <\/div>\r\n\r\n <div class=\"calculation-breakdown\">\r\n <h4>\ud83e\uddee Hesaplama Detay\u0131<\/h4>\r\n <div class=\"breakdown-item\">\r\n <span>Toplam Varl\u0131klar:<\/span>\r\n <span id=\"total-assets\">$0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-item\">\r\n <span>Toplam Bor\u00e7lar:<\/span>\r\n <span id=\"total-liabilities\">$0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-item\">\r\n <span>Net Zekata Tabi Servet:<\/span>\r\n <span id=\"net-wealth\">$0.00<\/span>\r\n <\/div>\r\n <div class=\"breakdown-item\">\r\n <span>Zekat (%2.5):<\/span>\r\n <span id=\"zakat-breakdown\">$0.00<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Currency rates and precious metal prices (fallback values)\r\n const currencyData = {\r\n USD: {\r\n symbol: '$',\r\n goldPrice: 160 \/\/ per gram (fallback)\r\n }\r\n };\r\n\r\n \/\/ Live gold price data\r\n let liveGoldPrices = {\r\n USD: null,\r\n lastUpdated: null\r\n };\r\n\r\n let currentCurrency = 'USD';\r\n\r\n \/\/ Gold price API configuration\r\n const GOLD_API_CONFIG = {\r\n \/\/ Using a free API endpoint for gold prices\r\n baseUrl: 'https:\/\/api.metals.live\/v1\/spot',\r\n \/\/ Fallback to alternative free APIs if needed\r\n fallbackUrls: [\r\n 'https:\/\/api.coindesk.com\/v1\/bpi\/currentprice.json', \/\/ Bitcoin price API (has gold data)\r\n 'https:\/\/api.exchangerate-api.com\/v4\/latest\/XAU' \/\/ Exchange rate API\r\n ]\r\n };\r\n\r\n \/\/ Function to fetch live gold prices\r\n async function fetchLiveGoldPrices() {\r\n try {\r\n \/\/ Check if we have cached data from today\r\n const today = new Date().toDateString();\r\n const cachedData = localStorage.getItem('goldPricesCache');\r\n \r\n if (cachedData) {\r\n const parsed = JSON.parse(cachedData);\r\n if (parsed.date === today) {\r\n liveGoldPrices = parsed.data;\r\n console.log('Using cached gold prices from today');\r\n return true;\r\n }\r\n }\r\n\r\n \/\/ Show loading indicator\r\n showGoldPriceLoading(true);\r\n\r\n \/\/ Try to fetch from real gold price API\r\n const response = await fetch('https:\/\/api.metals.live\/v1\/spot\/gold', {\r\n method: 'GET',\r\n headers: {\r\n 'Accept': 'application\/json'\r\n }\r\n });\r\n \r\n if (!response.ok) {\r\n throw new Error('Gold API failed');\r\n }\r\n\r\n const data = await response.json();\r\n \r\n \/\/ Convert from troy ounce to grams (1 troy ounce = 31.1035 grams)\r\n const goldPricePerOunce = data.price; \/\/ Price in USD per troy ounce\r\n const goldPricePerGramUSD = goldPricePerOunce \/ 31.1035;\r\n \r\n liveGoldPrices = {\r\n USD: goldPricePerGramUSD,\r\n lastUpdated: new Date().toISOString(),\r\n source: 'metals.live'\r\n };\r\n\r\n \/\/ Cache the data\r\n localStorage.setItem('goldPricesCache', JSON.stringify({\r\n date: today,\r\n data: liveGoldPrices\r\n }));\r\n\r\n console.log('Fetched live gold prices:', liveGoldPrices);\r\n showGoldPriceLoading(false);\r\n return true;\r\n\r\n } catch (error) {\r\n console.warn('Failed to fetch live gold prices, trying backup API:', error);\r\n \r\n \/\/ Try backup API\r\n try {\r\n const backupResponse = await fetch('https:\/\/api.coinbase.com\/v2\/exchange-rates?currency=XAU');\r\n \r\n if (backupResponse.ok) {\r\n const backupData = await backupResponse.json();\r\n const goldPricePerOunce = parseFloat(backupData.data.rates.USD);\r\n const goldPricePerGramUSD = goldPricePerOunce \/ 31.1035;\r\n \r\n liveGoldPrices = {\r\n USD: goldPricePerGramUSD,\r\n lastUpdated: new Date().toISOString(),\r\n source: 'coinbase'\r\n };\r\n \r\n localStorage.setItem('goldPricesCache', JSON.stringify({\r\n date: new Date().toDateString(),\r\n data: liveGoldPrices\r\n }));\r\n \r\n console.log('Fetched gold prices from backup API:', liveGoldPrices);\r\n showGoldPriceLoading(false);\r\n return true;\r\n }\r\n } catch (backupError) {\r\n console.warn('Backup API also failed:', backupError);\r\n }\r\n \r\n showGoldPriceLoading(false);\r\n \r\n \/\/ Use current market fallback prices (updated for 2024)\r\n liveGoldPrices = {\r\n USD: 160, \/\/ Fallback price per gram\r\n lastUpdated: new Date().toISOString(),\r\n source: 'fallback'\r\n };\r\n \r\n return false;\r\n }\r\n }\r\n\r\n \/\/ Function to show\/hide loading indicator for gold prices\r\n function showGoldPriceLoading(show) {\r\n const goldNisabElement = document.getElementById('gold-nisab');\r\n if (show) {\r\n goldNisabElement.innerHTML = '<span style=\"color: #ffc107;\">\u23f3 G\u00fcncelleniyor...<\/span>';\r\n }\r\n }\r\n\r\n \/\/ Function to get current gold price for currency\r\n function getCurrentGoldPrice(currency) {\r\n return liveGoldPrices[currency] || currencyData[currency].goldPrice;\r\n }\r\n\r\n \/\/ Function to manually refresh gold prices\r\n async function refreshGoldPrice() {\r\n const button = document.querySelector('.refresh-gold-price-btn');\r\n const originalText = button.innerHTML;\r\n \r\n \/\/ Show loading state\r\n button.innerHTML = '\u23f3 G\u00fcncelleniyor...';\r\n button.disabled = true;\r\n \r\n try {\r\n \/\/ Clear cache to force fresh fetch\r\n localStorage.removeItem('goldPricesCache');\r\n \r\n \/\/ Fetch new prices\r\n const success = await fetchLiveGoldPrices();\r\n \r\n \/\/ Update displays\r\n updateNisabDisplay();\r\n calculateZakat();\r\n \r\n \/\/ Show success feedback\r\n button.innerHTML = '\u2705 G\u00fcncellendi!';\r\n setTimeout(() => {\r\n button.innerHTML = originalText;\r\n button.disabled = false;\r\n }, 2000);\r\n \r\n } catch (error) {\r\n console.error('Failed to refresh gold price:', error);\r\n button.innerHTML = '\u274c Ba\u015far\u0131s\u0131z';\r\n setTimeout(() => {\r\n button.innerHTML = originalText;\r\n button.disabled = false;\r\n }, 2000);\r\n }\r\n }\r\n\r\n \/\/ Currency selection handlers\r\n\r\n \/\/ Add progress indicator for calculations\r\n function showCalculationProgress() {\r\n const progressBar = document.createElement('div');\r\n progressBar.className = 'calculation-progress';\r\n progressBar.innerHTML = `\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\"><\/div>\r\n <\/div>\r\n <span class=\"progress-text\">Zekat Hesaplan\u0131yor...<\/span>\r\n `;\r\n \r\n const resultsSection = document.querySelector('.results-section');\r\n resultsSection.insertBefore(progressBar, resultsSection.firstChild);\r\n \r\n \/\/ Animate progress\r\n setTimeout(() => {\r\n const fill = progressBar.querySelector('.progress-fill');\r\n fill.style.width = '100%';\r\n }, 100);\r\n \r\n \/\/ Remove after calculation\r\n setTimeout(() => {\r\n progressBar.remove();\r\n }, 800);\r\n }\r\n\r\n \/\/ Add input validation feedback with debouncing\r\n function addInputValidation() {\r\n inputs.forEach(input => {\r\n let debounceTimer;\r\n \r\n input.addEventListener('input', function() {\r\n const value = parseFloat(this.value) || 0;\r\n \r\n \/\/ Remove existing validation classes\r\n this.classList.remove('valid-input', 'invalid-input');\r\n \r\n \/\/ Add validation feedback\r\n if (value > 0) {\r\n this.classList.add('valid-input');\r\n this.setAttribute('title', 'Ge\u00e7erli tutar girildi');\r\n } else if (this.value !== '') {\r\n this.classList.add('invalid-input');\r\n this.setAttribute('title', 'L\u00fctfen ge\u00e7erli bir pozitif tutar girin');\r\n }\r\n \r\n \/\/ Debounce the calculation to reduce frequent updates\r\n clearTimeout(debounceTimer);\r\n debounceTimer = setTimeout(() => {\r\n calculateZakat();\r\n }, 500); \/\/ Wait 500ms after user stops typing\r\n });\r\n \r\n \/\/ Add focus animations\r\n input.addEventListener('focus', function() {\r\n this.parentElement.classList.add('focused');\r\n });\r\n \r\n input.addEventListener('blur', function() {\r\n this.parentElement.classList.remove('focused');\r\n });\r\n });\r\n }\r\n\r\n \/\/ DOM Elements\r\n const currencyButtons = document.querySelectorAll('.currency-btn');\r\n const tabs = document.querySelectorAll('.tab');\r\n const tabContents = document.querySelectorAll('.tab-content');\r\n const inputs = document.querySelectorAll('input[type=\"number\"]');\r\n\r\n \/\/ Initialize the calculator when page loads\r\n document.addEventListener('DOMContentLoaded', async function() {\r\n \/\/ Initialize input validation\r\n addInputValidation();\r\n \r\n \/\/ Fetch live gold prices on page load\r\n await fetchLiveGoldPrices();\r\n \r\n \/\/ Update displays with current prices\r\n updateNisabDisplay();\r\n calculateZakat();\r\n \r\n \/\/ Set up automatic daily updates\r\n setInterval(async () => {\r\n await fetchLiveGoldPrices();\r\n updateNisabDisplay();\r\n calculateZakat();\r\n }, 24 * 60 * 60 * 1000); \/\/ Check every 24 hours\r\n });\r\n\r\n \/\/ Currency selection\r\n currencyButtons.forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n \/\/ Trigger haptic feedback for button press\r\n triggerHapticFeedback('light');\r\n \r\n currencyButtons.forEach(b => b.classList.remove('active'));\r\n this.classList.add('active');\r\n currentCurrency = this.dataset.currency;\r\n updateNisabDisplay();\r\n calculateZakat();\r\n });\r\n });\r\n\r\n \/\/ Tab switching\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', function() {\r\n \/\/ Trigger haptic feedback for tab switch\r\n triggerHapticFeedback('light');\r\n \r\n tabs.forEach(t => t.classList.remove('active'));\r\n tabContents.forEach(tc => tc.classList.remove('active'));\r\n \r\n this.classList.add('active');\r\n document.getElementById(this.dataset.tab).classList.add('active');\r\n });\r\n });\r\n\r\n \/\/ Mobile swipe gestures for tab navigation\r\n let touchStartX = 0;\r\n let touchEndX = 0;\r\n let isSwiping = false;\r\n \r\n function handleSwipeGesture() {\r\n const swipeThreshold = 50; \/\/ Minimum distance for a swipe\r\n const swipeDistance = touchEndX - touchStartX;\r\n \r\n if (Math.abs(swipeDistance) > swipeThreshold) {\r\n const activeTab = document.querySelector('.tab.active');\r\n const activeIndex = Array.from(tabs).indexOf(activeTab);\r\n let newIndex;\r\n \r\n if (swipeDistance > 0 && activeIndex > 0) {\r\n \/\/ Swipe right - go to previous tab\r\n newIndex = activeIndex - 1;\r\n } else if (swipeDistance < 0 && activeIndex < tabs.length - 1) {\r\n \/\/ Swipe left - go to next tab\r\n newIndex = activeIndex + 1;\r\n } else {\r\n return; \/\/ No valid swipe\r\n }\r\n \r\n \/\/ Switch to the new tab\r\n tabs.forEach(t => t.classList.remove('active'));\r\n tabContents.forEach(tc => tc.classList.remove('active'));\r\n \r\n tabs[newIndex].classList.add('active');\r\n document.getElementById(tabs[newIndex].dataset.tab).classList.add('active');\r\n \r\n \/\/ Trigger haptic feedback for swipe navigation\r\n triggerHapticFeedback('medium');\r\n }\r\n }\r\n \r\n \/\/ Add touch event listeners to the tab container for mobile swipe\r\n const tabContainer = document.querySelector('.tabs');\r\n if (tabContainer && window.innerWidth <= 768) {\r\n tabContainer.addEventListener('touchstart', function(e) {\r\n touchStartX = e.changedTouches[0].screenX;\r\n isSwiping = true;\r\n }, { passive: true });\r\n \r\n tabContainer.addEventListener('touchend', function(e) {\r\n if (isSwiping) {\r\n touchEndX = e.changedTouches[0].screenX;\r\n handleSwipeGesture();\r\n isSwiping = false;\r\n }\r\n }, { passive: true });\r\n \r\n \/\/ Prevent default scrolling during horizontal swipes\r\n tabContainer.addEventListener('touchmove', function(e) {\r\n if (isSwiping) {\r\n const touchMoveX = e.changedTouches[0].screenX;\r\n const deltaX = Math.abs(touchMoveX - touchStartX);\r\n const deltaY = Math.abs(e.changedTouches[0].screenY - e.changedTouches[0].screenY);\r\n \r\n \/\/ If horizontal movement is greater than vertical, prevent default\r\n if (deltaX > deltaY) {\r\n e.preventDefault();\r\n }\r\n }\r\n });\r\n }\r\n\r\n \/\/ Input listeners with digit validation\r\n inputs.forEach(input => {\r\n let debounceTimer;\r\n \r\n input.addEventListener('input', function() {\r\n \/\/ Store cursor position before processing\r\n const cursorPosition = this.selectionStart;\r\n const originalValue = this.value;\r\n \r\n \/\/ Limit input to 15 digits (including decimal places)\r\n let value = this.value;\r\n \r\n \/\/ Remove any non-numeric characters except decimal point\r\n value = value.replace(\/[^0-9.]\/g, '');\r\n \r\n \/\/ Ensure only one decimal point\r\n const parts = value.split('.');\r\n if (parts.length > 2) {\r\n value = parts[0] + '.' + parts.slice(1).join('');\r\n }\r\n \r\n \/\/ Limit to 15 total digits (including decimal places)\r\n if (value.replace('.', '').length > 15) {\r\n value = value.substring(0, value.indexOf('.') !== -1 ? 16 : 15);\r\n }\r\n \r\n \/\/ Only update if the value actually changed\r\n if (value !== originalValue) {\r\n this.value = value;\r\n \r\n \/\/ Restore cursor position, adjusting for any removed characters\r\n const lengthDifference = originalValue.length - value.length;\r\n const newCursorPosition = Math.max(0, cursorPosition - lengthDifference);\r\n this.setSelectionRange(newCursorPosition, newCursorPosition);\r\n }\r\n \r\n \/\/ Debounce the calculation to reduce frequent updates\r\n clearTimeout(debounceTimer);\r\n debounceTimer = setTimeout(() => {\r\n calculateZakat();\r\n }, 500); \/\/ Wait 500ms after user stops typing\r\n });\r\n \r\n \/\/ Also add blur event to format the number nicely\r\n input.addEventListener('blur', function() {\r\n if (this.value && !isNaN(this.value)) {\r\n const num = parseFloat(this.value);\r\n \/\/ Only show decimal places if the number has decimals\r\n if (num % 1 === 0) {\r\n this.value = num.toString(); \/\/ No decimals for whole numbers\r\n } else {\r\n this.value = num.toFixed(2); \/\/ Show 2 decimals for decimal numbers\r\n }\r\n }\r\n });\r\n });\r\n\r\n function updateNisabDisplay() {\r\n const currency = currencyData[currentCurrency];\r\n \r\n \/\/ Use live gold prices if available, otherwise fallback to static prices\r\n const goldPrice = getCurrentGoldPrice(currentCurrency);\r\n \r\n const goldNisab = 85 * goldPrice;\r\n\r\n document.getElementById('gold-nisab').textContent =\r\n `${currency.symbol}${goldNisab.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;\r\n }\r\n\r\n \/\/ Haptic feedback function for mobile devices\r\n function triggerHapticFeedback(type = 'light') {\r\n if ('vibrate' in navigator && window.innerWidth <= 768) {\r\n switch(type) {\r\n case 'light':\r\n navigator.vibrate(10); \/\/ Light tap\r\n break;\r\n case 'medium':\r\n navigator.vibrate(25); \/\/ Medium feedback\r\n break;\r\n case 'success':\r\n navigator.vibrate([50, 50, 100]); \/\/ Success pattern\r\n break;\r\n default:\r\n navigator.vibrate(10);\r\n }\r\n }\r\n }\r\n\r\n function calculateZakat() {\r\n const currency = currencyData[currentCurrency];\r\n \r\n \/\/ Use live gold prices if available, otherwise fallback to static prices\r\n const goldPrice = getCurrentGoldPrice(currentCurrency);\r\n \r\n \/\/ Get all input values\r\n const cash = parseFloat(document.getElementById('cash').value) || 0;\r\n const goldGrams = parseFloat(document.getElementById('gold').value) || 0;\r\n const moneyLent = parseFloat(document.getElementById('money-lent').value) || 0;\r\n const businessCash = parseFloat(document.getElementById('business-cash').value) || 0;\r\n const inventory = parseFloat(document.getElementById('inventory').value) || 0;\r\n const receivables = parseFloat(document.getElementById('receivables').value) || 0;\r\n const rentalIncome = parseFloat(document.getElementById('rental-income').value) || 0;\r\n const stocks = parseFloat(document.getElementById('stocks').value) || 0;\r\n const bonds = parseFloat(document.getElementById('bonds').value) || 0;\r\n const mutualFunds = parseFloat(document.getElementById('mutual-funds').value) || 0;\r\n const retirement = parseFloat(document.getElementById('retirement').value) || 0;\r\n const crypto = parseFloat(document.getElementById('crypto').value) || 0;\r\n const investmentProperty = parseFloat(document.getElementById('investment-property').value) || 0;\r\n const personalDebts = parseFloat(document.getElementById('personal-debts').value) || 0;\r\n const loans = parseFloat(document.getElementById('loans').value) || 0;\r\n const businessDebts = parseFloat(document.getElementById('business-debts').value) || 0;\r\n const zakatPaid = parseFloat(document.getElementById('zakat-paid').value) || 0;\r\n\r\n \/\/ Calculate precious metals value using live prices\r\n const goldValue = goldGrams * goldPrice;\r\n\r\n \/\/ Calculate total assets\r\n const totalAssets = cash + goldValue + moneyLent + businessCash + \r\n inventory + receivables + rentalIncome + stocks + bonds + mutualFunds + \r\n retirement + crypto + investmentProperty;\r\n \r\n const totalLiabilities = personalDebts + loans + businessDebts;\r\n const netWealth = totalAssets - totalLiabilities;\r\n\r\n \/\/ Calculate Nisab threshold using live gold price\r\n const goldNisab = 85 * goldPrice;\r\n const applicableNisab = goldNisab;\r\n\r\n \/\/ Calculate Zakat\r\n let zakatAmount = 0;\r\n let zakatStatus = '';\r\n \r\n if (netWealth >= applicableNisab) {\r\n zakatAmount = netWealth * 0.025; \/\/ 2.5%\r\n \r\n \/\/ Subtract any Zakat already paid this year\r\n zakatAmount = Math.max(0, zakatAmount - zakatPaid);\r\n \r\n if (zakatAmount > 0) {\r\n zakatStatus = '\u2705 Zekat Verilmesi Gerekir';\r\n document.getElementById('zakat-status').className = 'zakat-status zakat-due';\r\n } else {\r\n zakatStatus = '\u2705 Zekat Zaten \u00d6dendi';\r\n document.getElementById('zakat-status').className = 'zakat-status zakat-paid';\r\n }\r\n } else {\r\n zakatStatus = '\u274c Zekat Gerekmiyor';\r\n document.getElementById('zakat-status').className = 'zakat-status zakat-not-due';\r\n }\r\n\r\n \/\/ Update display\r\n const symbol = currency.symbol;\r\n document.getElementById('zakat-status').textContent = zakatStatus;\r\n document.getElementById('zakat-amount').textContent = \r\n `${symbol}${zakatAmount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;\r\n document.getElementById('total-assets').textContent = \r\n `${symbol}${totalAssets.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;\r\n document.getElementById('total-liabilities').textContent = \r\n `${symbol}${totalLiabilities.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;\r\n document.getElementById('net-wealth').textContent = \r\n `${symbol}${netWealth.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;\r\n document.getElementById('zakat-breakdown').textContent = \r\n `${symbol}${zakatAmount.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;\r\n \r\n \/\/ Trigger success haptic feedback after calculation\r\n triggerHapticFeedback('success');\r\n }\r\n\r\n \/\/ CTA attention on load and click feedback\r\n document.addEventListener('DOMContentLoaded', function() {\r\n var cta = document.querySelector('.below-header-actions .nav-btn');\r\n if (cta) {\r\n cta.classList.add('attention');\r\n setTimeout(function(){ cta.classList.remove('attention'); }, 1200);\r\n cta.addEventListener('click', function(){\r\n cta.classList.add('clicked');\r\n setTimeout(function(){ cta.classList.remove('clicked'); }, 500);\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gelenekten Gelece\u011fe\u2026 namaz vakitleri TARF Zekat Hesaplama – Geli\u015fmi\u015f \u0130slami Finans Arac\u0131 \ud83d\udd4c TARF Zekat Hesaplama ABD i\u00e7in Geli\u015fmi\u015f \u0130slami Finans Arac\u0131 Zekat Hesaplama Zekat Fetvalar\u0131 \ud83d\udcb1 Para Birimi: USD \ud83c\uddfa\ud83c\uddf8 USD \ud83d\udcca ZEKATA TAB\u0130 VARLIKLAR \ud83d\udcb0 \u015eahsi Varl\u0131klar \ud83c\udfe2 Ticari Varl\u0131klar \ud83d\udcc8 Yat\u0131r\u0131mlar \ud83d\udcb5 Nakit ve Banka Hesaplar\u0131 \ud83d\udca1 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-5065","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/pages\/5065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/comments?post=5065"}],"version-history":[{"count":62,"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/pages\/5065\/revisions"}],"predecessor-version":[{"id":5900,"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/pages\/5065\/revisions\/5900"}],"wp:attachment":[{"href":"https:\/\/tarfus.org\/en\/wp-json\/wp\/v2\/media?parent=5065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}