{"id":5095,"date":"2026-08-14T18:15:48","date_gmt":"2026-08-14T18:15:48","guid":{"rendered":"https:\/\/moralitycentral.com\/?page_id=5095"},"modified":"2026-09-08T17:58:18","modified_gmt":"2026-09-08T17:58:18","slug":"mc-dictionary","status":"publish","type":"page","link":"https:\/\/moralitycentral.com\/?page_id=5095","title":{"rendered":"MC Dictionary"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5095\" class=\"elementor elementor-5095\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-62a5583 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"62a5583\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c7df593\" data-id=\"c7df593\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-597a85b elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"597a85b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>MC Lexicon | Morality Central Scholastic Portal<\/title>\n    \n    <!-- Google Fonts: Alegreya, David Libre, JetBrains Mono, & Amiri -->\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=Alegreya:ital,wght@0,400..900;1,400..900&family=David+Libre:wght@400;500;700&family=JetBrains+Mono:wght@300;400;700&family=Amiri:ital@0;1&display=swap\" rel=\"stylesheet\">\n    \n    <!-- FontAwesome Icons for Scholastic Symbols -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        brand: {\n                            DEFAULT: '#070E1A', \/* Deep Midnight Navy *\/\n                            light: '#13213c',\n                            accent: '#C5A880', \/* Scholastic Gold *\/\n                            goldDark: '#A38458',\n                            slate: '#1E293B',\n                            parchment: '#FDFBF7', \/* Editorial Parchment Background *\/\n                            parchmentDark: '#F5EFEB'\n                        }\n                    },\n                    fontFamily: {\n                        alegreya: ['\"Alegreya\"', 'serif'],\n                        david: ['\"David Libre\"', 'serif'],\n                        mono: ['\"JetBrains Mono\"', 'monospace'],\n                        arabic: ['\"Amiri\"', 'serif']\n                    }\n                }\n            }\n        }\n    <\/script>\n\n    <style>\n        \/* Global layout guardrails *\/\n        html, body {\n            max-width: 100% !important;\n            overflow-x: clip !important; \/* clip allows position:sticky to function, hidden sometimes breaks it *\/\n            margin: 0;\n            padding: 0;\n            background-color: #FDFBF7;\n        }\n\n        .font-alegreya { font-family: \"Alegreya\", serif !important; }\n        .font-david { font-family: \"David Libre\", serif !important; }\n        .font-arabic { font-family: \"Amiri\", serif !important; }\n        \n        \/* Subtle academic grid *\/\n        .academic-grid {\n            background-image: radial-gradient(rgba(7, 14, 26, 0.04) 1px, transparent 1px);\n            background-size: 24px 24px;\n        }\n\n        \/* Custom scrollbar *\/\n        ::-webkit-scrollbar { width: 6px; height: 6px; }\n        ::-webkit-scrollbar-track { background: transparent; }\n        ::-webkit-scrollbar-thumb { background: #C5A880; border-radius: 3px; }\n        ::-webkit-scrollbar-thumb:hover { background: #A38458; }\n\n        \/* Robust word wrap *\/\n        #mc-dictionary-wrapper p, \n        #mc-dictionary-wrapper blockquote, \n        #mc-dictionary-wrapper span, \n        #mc-dictionary-wrapper h1, \n        #mc-dictionary-wrapper h2, \n        #mc-dictionary-wrapper h3, \n        #mc-dictionary-wrapper h4, \n        #mc-dictionary-wrapper li {\n            word-wrap: break-word !important;\n            overflow-wrap: break-word !important;\n        }\n\n        \/* Sidebar Link Overrides (Protect against Elementor) *\/\n        #mc-dictionary-wrapper .index-item {\n            color: #e2e8f0 !important; \/* High contrast light text *\/\n            transition: all 0.3s ease;\n        }\n        #mc-dictionary-wrapper .index-item:hover {\n            color: #C5A880 !important;\n            background-color: #13213c !important;\n        }\n        #mc-dictionary-wrapper .index-item.active {\n            background-color: #13213c !important; \/* brand-light *\/\n            border-left-color: #C5A880 !important;\n            color: #C5A880 !important;\n            font-weight: bold !important;\n        }\n        #mc-dictionary-wrapper .index-item.active .opacity-50 {\n            opacity: 1 !important; \/* Make number fully visible when active *\/\n        }\n\n        \/* High specificity enforcement for Mobile Menu text colors against Divi\/Elementor overrides *\/\n        #mobile-index a.mobile-index-item {\n            color: #FFFFFF !important;\n            background-color: #070E1A !important;\n        }\n        #mobile-index a.mobile-index-item:hover, \n        #mobile-index a.mobile-index-item.mobile-active {\n            color: #C5A880 !important;\n            background-color: #13213c !important;\n        }\n        #mobile-index a.mobile-index-item span,\n        #mobile-index a.mobile-index-item i {\n            color: inherit !important;\n        }\n\n        \/* Sidebar Transition *\/\n        #desktop-sidebar {\n            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        #desktop-sidebar.collapsed {\n            width: 80px;\n        }\n        #desktop-sidebar.collapsed .sidebar-content {\n            opacity: 0;\n            pointer-events: none;\n            display: none;\n        }\n        #desktop-sidebar.collapsed .sidebar-toggle-icon {\n            transform: rotate(180deg);\n        }\n\n        \/* Collapsed Sidebar Icons High Contrast Fix *\/\n        #collapsed-icons a {\n            color: #C5A880 !important;\n            background-color: #13213c !important;\n            border: 1px solid rgba(197, 168, 128, 0.3) !important;\n        }\n        #collapsed-icons a:hover, #collapsed-icons a.collapsed-active {\n            background-color: #C5A880 !important;\n            color: #070E1A !important;\n        }\n\n        \/* High specificity enforcement for Sidebar H1 against Elementor *\/\n        #mc-dictionary-wrapper h1.sidebar-main-heading {\n            font-family: \"Alegreya\", serif !important;\n            font-weight: 800 !important;\n            font-size: 1.875rem !important; \/* default text-3xl *\/\n            line-height: 1.2 !important;\n            margin-bottom: 0 !important;\n            margin-top: 0 !important;\n            color: transparent !important;\n            background-image: linear-gradient(to bottom right, #ffffff, #C5A880, #e5e7eb) !important;\n            -webkit-background-clip: text !important;\n            background-clip: text !important;\n        }\n        @media (min-width: 1024px) {\n            #mc-dictionary-wrapper h1.sidebar-main-heading {\n                font-size: 2.25rem !important; \/* lg:text-4xl *\/\n            }\n        }\n\n        html { scroll-padding-top: 140px; }\n        @media (min-width: 768px) { html { scroll-padding-top: 70px; } }\n    <\/style>\n<\/head>\n\n<body class=\"text-brand font-david antialiased selection:bg-brand-accent selection:text-brand academic-grid\">\n\n    <!-- Wrapper to protect layout from Elementor conflicts -->\n    <div id=\"mc-dictionary-wrapper\" class=\"flex flex-col md:flex-row min-h-screen w-full relative\">\n\n        <!-- Mobile Top Navigation (Visible only on small screens) -->\n        <div class=\"md:hidden sticky top-0 z-50 bg-brand text-white border-b border-brand-accent\/30 shadow-md w-full\">\n            <div class=\"p-4 flex items-center justify-between\">\n                <h1 class=\"font-alegreya text-lg font-bold tracking-tight text-brand-accent\" style=\"color: #C5A880 !important;\">MC Dictionary<\/h1>\n                <button id=\"mobile-menu-btn\" class=\"text-brand-accent hover:text-white transition-colors p-2 bg-brand-light rounded border border-brand-accent\/30\">\n                    <i class=\"fa-solid fa-bars text-lg\"><\/i>\n                <\/button>\n            <\/div>\n            <!-- Mobile Index Menu -->\n            <div id=\"mobile-index\" class=\"hidden flex-col bg-brand border-b border-brand-accent\/30 shadow-2xl max-h-[70vh] overflow-y-auto\">\n                <div class=\"px-5 py-2.5 text-xs font-mono text-brand-accent\/80 uppercase tracking-widest border-b border-brand-accent\/20 bg-brand-slate\">Directory Index<\/div>\n                <a href=\"#term-fitrah\" class=\"mobile-index-item px-6 py-3.5 text-sm font-alegreya border-b border-brand-accent\/10 flex justify-between items-center transition-colors\">\n                    <span><span class=\"font-mono text-xs text-brand-accent mr-2\">01.<\/span> Fitrah<\/span>\n                    <i class=\"fa-solid fa-chevron-right text-xs text-brand-accent\"><\/i>\n                <\/a>\n                <a href=\"#term-purpose\" class=\"mobile-index-item px-6 py-3.5 text-sm font-alegreya border-b border-brand-accent\/10 flex justify-between items-center transition-colors\">\n                    <span><span class=\"font-mono text-xs text-brand-accent mr-2\">02.<\/span> Purpose<\/span>\n                    <i class=\"fa-solid fa-chevron-right text-xs text-brand-accent\"><\/i>\n                <\/a>\n                <a href=\"#term-spirituality\" class=\"mobile-index-item px-6 py-3.5 text-sm font-alegreya border-b border-brand-accent\/10 flex justify-between items-center transition-colors\">\n                    <span><span class=\"font-mono text-xs text-brand-accent mr-2\">03.<\/span> Spirituality<\/span>\n                    <i class=\"fa-solid fa-chevron-right text-xs text-brand-accent\"><\/i>\n                <\/a>\n                <a href=\"#term-tradition\" class=\"mobile-index-item px-6 py-3.5 text-sm font-alegreya border-b border-brand-accent\/10 flex justify-between items-center transition-colors\">\n                    <span><span class=\"font-mono text-xs text-brand-accent mr-2\">04.<\/span> Tradition<\/span>\n                    <i class=\"fa-solid fa-chevron-right text-xs text-brand-accent\"><\/i>\n                <\/a>\n                <a href=\"#term-ethics\" class=\"mobile-index-item px-6 py-3.5 text-sm font-alegreya border-b border-brand-accent\/10 flex justify-between items-center transition-colors\">\n                    <span><span class=\"font-mono text-xs text-brand-accent mr-2\">05.<\/span> Ethics<\/span>\n                    <i class=\"fa-solid fa-chevron-right text-xs text-brand-accent\"><\/i>\n                <\/a>\n                <a href=\"#term-aql\" class=\"mobile-index-item px-6 py-3.5 text-sm font-alegreya border-b border-brand-accent\/10 flex justify-between items-center transition-colors\">\n                    <span><span class=\"font-mono text-xs text-brand-accent mr-2\">06.<\/span> \u02bfAql<\/span>\n                    <i class=\"fa-solid fa-chevron-right text-xs text-brand-accent\"><\/i>\n                <\/a>\n                <!-- New Terms Added -->\n                <a href=\"#term-religion\" class=\"mobile-index-item px-6 py-3.5 text-sm font-alegreya border-b border-brand-accent\/10 flex justify-between items-center transition-colors\">\n                    <span><span class=\"font-mono text-xs text-brand-accent mr-2\">07.<\/span> Religion<\/span>\n                    <i class=\"fa-solid fa-chevron-right text-xs text-brand-accent\"><\/i>\n                <\/a>\n                <a href=\"#term-deen\" class=\"mobile-index-item px-6 py-3.5 text-sm font-alegreya flex justify-between items-center transition-colors\">\n                    <span><span class=\"font-mono text-xs text-brand-accent mr-2\">08.<\/span> Deen<\/span>\n                    <i class=\"fa-solid fa-chevron-right text-xs text-brand-accent\"><\/i>\n                <\/a>\n            <\/div>\n        <\/div>\n\n        <!-- Desktop Sidebar (The Index) sits side-by-side -->\n        <aside id=\"desktop-sidebar\" class=\"hidden md:flex flex-col w-72 lg:w-80 bg-brand text-white border-r border-brand-accent\/30 sticky top-0 h-screen flex-shrink-0 z-40 shadow-xl\">\n            \n            <!-- Upgraded Toggle Button -->\n            <button id=\"sidebar-toggle\" title=\"Toggle Sidebar Menu\" class=\"absolute -right-5 top-12 w-10 h-10 bg-brand border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent hover:bg-brand-accent hover:text-brand transition-all duration-300 z-50 shadow-[0_0_15px_rgba(197,168,128,0.3)] cursor-pointer\">\n                <i class=\"fa-solid fa-chevron-left text-sm sidebar-toggle-icon transition-transform duration-300\"><\/i>\n            <\/button>\n\n            <!-- Sidebar Inner Content -->\n            <div class=\"sidebar-content flex flex-col h-full overflow-y-auto\">\n                <div class=\"p-6 lg:p-8 border-b border-brand-accent\/20 relative overflow-hidden flex-shrink-0\">\n                    <div class=\"absolute inset-0 opacity-10 pointer-events-none mix-blend-overlay bg-[radial-gradient(#C5A880_1px,transparent_1px)] [background-size:12px_12px]\"><\/div>\n                    <span class=\"text-brand-accent font-mono text-[10px] uppercase tracking-widest block mb-1\">Epistemic Framework<\/span>\n                    <h1 class=\"sidebar-main-heading font-alegreya text-3xl lg:text-4xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-br from-white via-brand-accent to-gray-200\">\n                        Dictionary\n                    <\/h1>\n                    <p class=\"font-david text-xs text-gray-300 mt-2 italic leading-relaxed\">\n                        Uncovering the worldviews hidden within the everyday words we use. Revisiting epistemically grounded terms in accordance with the Qur\u2019an and Sunnah.\n                    <\/p>\n                <\/div>\n\n                <nav class=\"flex-grow py-4\" id=\"desktop-index\">\n                    <div class=\"px-6 lg:px-8 mb-3 text-[10px] font-mono text-brand-accent\/70 uppercase tracking-widest\">Index Directory<\/div>\n                    <ul class=\"space-y-1\">\n                        <li>\n                            <a href=\"#term-fitrah\" class=\"index-item flex items-center px-6 lg:px-8 py-3 border-l-4 border-transparent group\">\n                                <span class=\"font-mono text-xs opacity-60 mr-3 group-hover:opacity-100 transition-opacity\">01<\/span>\n                                <span class=\"font-alegreya text-base tracking-wide\">Fitrah<\/span>\n                            <\/a>\n                        <\/li>\n                        <li>\n                            <a href=\"#term-purpose\" class=\"index-item flex items-center px-6 lg:px-8 py-3 border-l-4 border-transparent group\">\n                                <span class=\"font-mono text-xs opacity-60 mr-3 group-hover:opacity-100 transition-opacity\">02<\/span>\n                                <span class=\"font-alegreya text-base tracking-wide\">Purpose<\/span>\n                            <\/a>\n                        <\/li>\n                        <li>\n                            <a href=\"#term-spirituality\" class=\"index-item flex items-center px-6 lg:px-8 py-3 border-l-4 border-transparent group\">\n                                <span class=\"font-mono text-xs opacity-60 mr-3 group-hover:opacity-100 transition-opacity\">03<\/span>\n                                <span class=\"font-alegreya text-base tracking-wide\">Spirituality<\/span>\n                            <\/a>\n                        <\/li>\n                        <li>\n                            <a href=\"#term-tradition\" class=\"index-item flex items-center px-6 lg:px-8 py-3 border-l-4 border-transparent group\">\n                                <span class=\"font-mono text-xs opacity-60 mr-3 group-hover:opacity-100 transition-opacity\">04<\/span>\n                                <span class=\"font-alegreya text-base tracking-wide\">Tradition<\/span>\n                            <\/a>\n                        <\/li>\n                        <li>\n                            <a href=\"#term-ethics\" class=\"index-item flex items-center px-6 lg:px-8 py-3 border-l-4 border-transparent group\">\n                                <span class=\"font-mono text-xs opacity-60 mr-3 group-hover:opacity-100 transition-opacity\">05<\/span>\n                                <span class=\"font-alegreya text-base tracking-wide\">Ethics<\/span>\n                            <\/a>\n                        <\/li>\n                        <li>\n                            <a href=\"#term-aql\" class=\"index-item flex items-center px-6 lg:px-8 py-3 border-l-4 border-transparent group\">\n                                <span class=\"font-mono text-xs opacity-60 mr-3 group-hover:opacity-100 transition-opacity\">06<\/span>\n                                <span class=\"font-alegreya text-base tracking-wide\">\u02bfAql<\/span>\n                            <\/a>\n                        <\/li>\n                        <!-- New Terms -->\n                        <li>\n                            <a href=\"#term-religion\" class=\"index-item flex items-center px-6 lg:px-8 py-3 border-l-4 border-transparent group\">\n                                <span class=\"font-mono text-xs opacity-60 mr-3 group-hover:opacity-100 transition-opacity\">07<\/span>\n                                <span class=\"font-alegreya text-base tracking-wide\">Religion<\/span>\n                            <\/a>\n                        <\/li>\n                        <li>\n                            <a href=\"#term-deen\" class=\"index-item flex items-center px-6 lg:px-8 py-3 border-l-4 border-transparent group\">\n                                <span class=\"font-mono text-xs opacity-60 mr-3 group-hover:opacity-100 transition-opacity\">08<\/span>\n                                <span class=\"font-alegreya text-base tracking-wide\">Deen<\/span>\n                            <\/a>\n                        <\/li>\n                    <\/ul>\n                <\/nav>\n\n                <div class=\"p-5 border-t border-brand-light text-center flex-shrink-0\">\n                    <div class=\"w-8 h-8 mx-auto border border-brand-accent\/30 rounded-full flex items-center justify-center text-brand-accent mb-2\">\n                        <i class=\"fa-solid fa-scale-balanced text-xs\"><\/i>\n                    <\/div>\n                    <p class=\"font-mono text-[9px] text-brand-accent\/80 uppercase tracking-widest\">Morality Central<\/p>\n                <\/div>\n            <\/div>\n            \n            <!-- Collapsed State Icons -->\n            <div class=\"hidden flex-col items-center py-8 space-y-5 h-full\" id=\"collapsed-icons\">\n                 <div class=\"w-8 h-8 mx-auto border border-brand-accent\/30 rounded-full flex items-center justify-center text-brand-accent mb-4\">\n                    <i class=\"fa-solid fa-book-open text-xs\"><\/i>\n                <\/div>\n                <a href=\"#term-fitrah\" id=\"collapsed-01\" class=\"w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer\" title=\"01. Fitrah\"><span class=\"font-mono text-xs font-bold\">01<\/span><\/a>\n                <a href=\"#term-purpose\" id=\"collapsed-02\" class=\"w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer\" title=\"02. Purpose\"><span class=\"font-mono text-xs font-bold\">02<\/span><\/a>\n                <a href=\"#term-spirituality\" id=\"collapsed-03\" class=\"w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer\" title=\"03. Spirituality\"><span class=\"font-mono text-xs font-bold\">03<\/span><\/a>\n                <a href=\"#term-tradition\" id=\"collapsed-04\" class=\"w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer\" title=\"04. Tradition\"><span class=\"font-mono text-xs font-bold\">04<\/span><\/a>\n                <a href=\"#term-ethics\" id=\"collapsed-05\" class=\"w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer\" title=\"05. Ethics\"><span class=\"font-mono text-xs font-bold\">05<\/span><\/a>\n                <a href=\"#term-aql\" id=\"collapsed-06\" class=\"w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer\" title=\"06. \u02bfAql\"><span class=\"font-mono text-xs font-bold\">06<\/span><\/a>\n                <!-- New Collapsed Icons -->\n                <a href=\"#term-religion\" id=\"collapsed-07\" class=\"w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer\" title=\"07. Religion\"><span class=\"font-mono text-xs font-bold\">07<\/span><\/a>\n                <a href=\"#term-deen\" id=\"collapsed-08\" class=\"w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer\" title=\"08. Deen\"><span class=\"font-mono text-xs font-bold\">08<\/span><\/a>\n            <\/div>\n        <\/aside>\n\n        <!-- Main Content Area -->\n        <main id=\"main-content\" class=\"flex-grow w-full px-4 sm:px-8 md:px-10 py-6 md:py-10 bg-brand-parchment relative transition-all duration-300\">\n            <div class=\"max-w-3xl mx-auto\">\n\n                <!-- Floating Sticky Directory Bar for Quick Jump (Distinct White Design) -->\n                <div class=\"sticky top-[76px] md:top-6 z-40 bg-white\/95 backdrop-blur-md text-brand px-4 py-2.5 rounded-lg border border-brand-accent\/50 shadow-[0_4px_15px_rgba(197,168,128,0.2)] mb-8 flex items-center justify-between text-xs font-mono w-full transition-all duration-300\">\n                    <div class=\"flex items-center space-x-2\">\n                        <i class=\"fa-solid fa-compass text-brand-accent text-base\"><\/i>\n                        <span class=\"text-gray-500 hidden sm:inline uppercase tracking-widest text-[10px]\">Active Term:<\/span>\n                        <span id=\"sticky-current-term\" class=\"text-brand font-bold font-alegreya text-base\">01. Fitrah<\/span>\n                    <\/div>\n                    <div class=\"flex items-center space-x-3\">\n                        <label for=\"quick-term-selector\" class=\"sr-only\">Jump to term<\/label>\n                        <select id=\"quick-term-selector\" onchange=\"window.location.hash=this.value\" class=\"bg-brand-parchment text-brand font-bold border border-brand-accent\/40 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-brand-accent cursor-pointer shadow-sm\">\n                            <option value=\"#term-fitrah\">01. Fitrah<\/option>\n                            <option value=\"#term-purpose\">02. Purpose<\/option>\n                            <option value=\"#term-spirituality\">03. Spirituality<\/option>\n                            <option value=\"#term-tradition\">04. Tradition<\/option>\n                            <option value=\"#term-ethics\">05. Ethics<\/option>\n                            <option value=\"#term-aql\">06. \u02bfAql<\/option>\n                            <!-- New Options -->\n                            <option value=\"#term-religion\">07. Religion<\/option>\n                            <option value=\"#term-deen\">08. Deen<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n\n                <!-- Entry 01: Fitrah -->\n                <article id=\"term-fitrah\" class=\"mb-16 md:mb-20 scroll-mt-28\">\n                    \n                    <header class=\"mb-6 border-b border-brand\/20 pb-4\">\n                        <div class=\"flex flex-wrap items-baseline gap-3 mb-1\">\n                            <h2 class=\"font-alegreya text-3xl sm:text-4xl font-extrabold text-brand tracking-tight\">\n                                Fitrah\n                            <\/h2>\n                            <span class=\"font-arabic text-xl sm:text-2xl text-brand-accent\">\u0641\u0637\u0631\u0629<\/span>\n                        <\/div>\n                        \n                        <div class=\"flex items-center gap-3 text-[11px] font-mono text-gray-500 uppercase tracking-widest\">\n                            <span class=\"bg-brand-parchmentDark px-2 py-0.5 rounded border border-gray-300 text-brand font-bold\">Noun<\/span>\n                            <span>\u2022<\/span>\n                            <span class=\"text-brand-accent font-bold\">Arabic Term<\/span>\n                        <\/div>\n                    <\/header>\n\n                    <div class=\"prose max-w-none mb-8\">\n                        <p class=\"font-alegreya text-lg sm:text-xl text-brand leading-relaxed font-medium border-l-4 border-brand-accent pl-4 py-1\">\n                            <strong class=\"font-bold\">Fitrah<\/strong> refers to the creation \u201cupon\u201d which Allah created every human being.\n                        <\/p>\n                    <\/div>\n\n                    <div class=\"bg-brand text-white rounded-lg p-5 sm:p-6 shadow-lg relative overflow-hidden mb-8\">\n                        <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                        \n                        <div class=\"flex items-center justify-between gap-3 mb-4 border-b border-white\/10 pb-3\">\n                            <div class=\"flex items-center gap-2.5\">\n                                <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Evidence<\/h3>\n                                    <p class=\"font-david text-[11px] text-gray-400\">Surah Ar-Room : 30<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                            \u0641\u064e\u0623\u064e\u0642\u0650\u0645\u0652 \u0648\u064e\u062c\u0652\u0647\u064e\u0643\u064e \u0644\u0650\u0644\u062f\u0650\u0651\u064a\u0646\u0650 \u062d\u064e\u0646\u0650\u064a\u0641\u064b\u0627 \u06da \u0641\u0650\u0637\u0652\u0631\u064e\u062a\u064e \u0627\u0644\u0644\u064e\u0651\u0647\u0650 \u0627\u0644\u064e\u0651\u062a\u0650\u064a \u0641\u064e\u0637\u064e\u0631\u064e \u0627\u0644\u0646\u064e\u0651\u0627\u0633\u064e \u0639\u064e\u0644\u064e\u064a\u0652\u0647\u064e\u0627 \u06da \u0644\u064e\u0627 \u062a\u064e\u0628\u0652\u062f\u0650\u064a\u0644\u064e \u0644\u0650\u062e\u064e\u0644\u0652\u0642\u0650 \u0627\u0644\u0644\u064e\u0651\u0647\u0650 \u06da \u0630\u064e\u0670\u0644\u0650\u0643\u064e \u0627\u0644\u062f\u0650\u0651\u064a\u0646\u064f \u0627\u0644\u0652\u0642\u064e\u064a\u0650\u0651\u0645\u064f \u0648\u064e\u0644\u064e\u0640\u0670\u0643\u0650\u0646\u064e\u0651 \u0623\u064e\u0643\u0652\u062b\u064e\u0631\u064e \u0627\u0644\u0646\u064e\u0651\u0627\u0633\u0650 \u0644\u064e\u0627 \u064a\u064e\u0639\u0652\u0644\u064e\u0645\u064f\u0648\u0646\u064e\n                        <\/p>\n                        \n                        <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                            <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                \"So direct your face [i.e., self] toward the religion, inclining to truth. [Adhere to] the fi\u1e6drah of All\u0101h upon which He has created [all] people. No change should there be in the creation of All\u0101h. That is the correct religion, but most of the people do not know.\"\n                            <\/p>\n                            <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Saheeh International, Translation.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Refutation Section -->\n                    <div class=\"mt-8\">\n                        <h3 class=\"font-alegreya text-xl font-bold text-brand mb-4 flex items-center\">\n                            <i class=\"fa-solid fa-scale-unbalanced text-brand-accent text-base mr-2.5\"><\/i>\n                            Epistemological Distortions\n                        <\/h3>\n                        \n                        <div class=\"mb-6 bg-brand-parchmentDark border border-gray-300 rounded-lg p-4 shadow-sm\">\n                            <p class=\"font-david text-sm text-gray-800 leading-relaxed\">\n                                At Morality Central, we do not use \u201cnatural disposition,\u201d \u201cnatural inclination,\u201d \u201cnatural tendency,\u201d or \u201cnatural orientation\u201d to translate fitrah. For, neither adequately expresses fitrah as the creation \u201cupon\u201d which Allah created human beings.\n                            <\/p>\n                        <\/div>\n\n                        <!-- Stepped Breakdown -->\n                        <div class=\"relative border-l border-brand-accent\/30 ml-3 md:ml-4 space-y-6 pb-2\">\n                            \n                            <!-- Refutation 1 -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-red-800\/40 rounded-full flex items-center justify-center text-red-700 z-10 text-[10px]\">\n                                    <i class=\"fa-solid fa-xmark\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-1\">Why not \u201cNatural Disposition\u201d?<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    If fitrah is understood merely as a disposition, it implies that it is an internal arrangement or positioning of traits \"externally positioned\" within a person. In Qur'anic usage, however, fitrah is not an externally rearranged internal state but the <strong class=\"text-brand\">original creation upon which Allah has created human beings.<\/strong>\n                                <\/p>\n                            <\/div>\n\n                            <!-- Refutation 2 -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-red-800\/40 rounded-full flex items-center justify-center text-red-700 z-10 text-[10px]\">\n                                    <i class=\"fa-solid fa-xmark\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-1\">Why not \u201cNatural Tendency\u201d or \u201cInclination\u201d?<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    A tendency can differ between individuals. Once fitrah is understood in this way, a person may begin to identify whatever they feel, prefer, or incline toward as their fitrah. This can occur when those feelings and inclinations have been shaped by corrupted desires, external influences, or distorted understandings.\n                                <\/p>\n                                <div class=\"bg-red-50 border-l-2 border-red-600 p-2.5 mb-2 text-xs italic text-gray-800 font-mono\">\n                                    \"I feel this is right \u2192 therefore it is my fi\u1e6drah \u2192 therefore it must be right.\"\n                                <\/div>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    <strong class=\"text-brand font-bold\">The Danger:<\/strong> If personal feelings can be treated as evidence of one's fitrah, it becomes subject to individual interpretation rather than remaining grounded in what Allah has created human beings upon.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Refutation 3 -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-red-800\/40 rounded-full flex items-center justify-center text-red-700 z-10 text-[10px]\">\n                                    <i class=\"fa-solid fa-xmark\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-1\">Why not \u201cOrientation\u201d?<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    An orientation is a direction toward something, but toward what? If the answer is left to the individual, then the direction itself becomes open to subjective interpretation. The word therefore does not tell us what the direction is objectively grounded in.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                <\/article>\n\n                <!-- Entry 02: Purpose -->\n                <article id=\"term-purpose\" class=\"mb-16 md:mb-20 scroll-mt-28\">\n                    \n                    <header class=\"mb-6 border-b border-brand\/20 pb-4\">\n                        <div class=\"flex flex-wrap items-baseline gap-3 mb-1\">\n                            <h2 class=\"font-alegreya text-3xl sm:text-4xl font-extrabold text-brand tracking-tight\">\n                                Purpose\n                            <\/h2>\n                        <\/div>\n                        \n                        <div class=\"flex items-center gap-3 text-[11px] font-mono text-gray-500 uppercase tracking-widest\">\n                            <span class=\"bg-brand-parchmentDark px-2 py-0.5 rounded border border-gray-300 text-brand font-bold\">Noun<\/span>\n                            <span>\u2022<\/span>\n                            <span class=\"text-brand-accent font-bold\">English Term<\/span>\n                        <\/div>\n                    <\/header>\n\n                    <div class=\"prose max-w-none mb-8\">\n                        <p class=\"font-alegreya text-lg sm:text-xl text-brand leading-relaxed font-medium border-l-4 border-brand-accent pl-4 py-1\">\n                            <strong class=\"font-bold\">Purpose<\/strong> refers to what Allah created human beings for.\n                        <\/p>\n                    <\/div>\n\n                    <div class=\"bg-brand text-white rounded-lg p-5 sm:p-6 shadow-lg relative overflow-hidden mb-6\">\n                        <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                        \n                        <div class=\"flex items-center justify-between gap-3 mb-4 border-b border-white\/10 pb-3\">\n                            <div class=\"flex items-center gap-2.5\">\n                                <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Evidence<\/h3>\n                                    <p class=\"font-david text-[11px] text-gray-400\">Surah Adh-Dhariyat : 56<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                            \u0648\u064e\u0645\u064e\u0627 \u062e\u064e\u0644\u064e\u0642\u0652\u062a\u064f \u0627\u0644\u0652\u062c\u0650\u0646\u064e\u0651 \u0648\u064e\u0627\u0644\u0652\u0625\u0650\u0646\u0633\u064e \u0625\u0650\u0644\u064e\u0651\u0627 \u0644\u0650\u064a\u064e\u0639\u0652\u0628\u064f\u062f\u064f\u0648\u0646\u0650\n                        <\/p>\n                        \n                        <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                            <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                \"And I did not create the jinn and mankind except to worship Me.\"\n                            <\/p>\n                            <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Saheeh International Translation.<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed bg-white border border-gray-200 rounded-lg p-4 shadow-sm\">\n                        Thus, the purpose of human creation is to worship Allah. This provides the ultimate end toward which human life is directed and gives meaning to how human beings are to live, act, and use the capacities Allah has given them.\n                    <\/p>\n                <\/article>\n\n                <!-- Entry 03: Spirituality -->\n                <article id=\"term-spirituality\" class=\"mb-16 md:mb-20 scroll-mt-28\">\n                    \n                    <header class=\"mb-6 border-b border-brand\/20 pb-4\">\n                        <div class=\"flex flex-wrap items-baseline gap-3 mb-1\">\n                            <h2 class=\"font-alegreya text-3xl sm:text-4xl font-extrabold text-brand tracking-tight\">\n                                Spirituality\n                            <\/h2>\n                        <\/div>\n                        \n                        <div class=\"flex items-center gap-3 text-[11px] font-mono text-gray-500 uppercase tracking-widest\">\n                            <span class=\"bg-brand-parchmentDark px-2 py-0.5 rounded border border-gray-300 text-brand font-bold\">Noun<\/span>\n                            <span>\u2022<\/span>\n                            <span class=\"text-brand-accent font-bold\">English Term<\/span>\n                        <\/div>\n                    <\/header>\n\n                    <div class=\"prose max-w-none mb-8\">\n                        <p class=\"font-alegreya text-lg sm:text-xl text-brand leading-relaxed font-medium border-l-4 border-brand-accent pl-4 py-1\">\n                            At Morality Central, <strong class=\"font-bold\">\u201cspirituality\u201d<\/strong> refers to a person's felt state in relation to the unseen and metaphysical realities of existence.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mt-3\">\n                            It describes how receptive and connected a person feels to their fitrah (upon which they were created).\n                        <\/p>\n                    <\/div>\n\n                    <div class=\"bg-white border border-gray-200 rounded-lg p-4 sm:p-5 shadow-sm relative mb-8\">\n                        <div class=\"absolute -top-2.5 left-5 bg-brand-parchment px-2 font-mono text-[9px] font-bold text-brand-accent uppercase tracking-widest border border-brand-accent\/30 rounded\">Application<\/div>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed\">\n                            Thus, when we use the phrases <span class=\"font-bold text-brand\">\u201cspiritually strong\u201d<\/span> or <span class=\"font-bold text-brand\">\u201cspiritually weak,\u201d<\/span> we use them to describe the closeness of a person's connection to their fi\u1e6drah and how this connection is reflected in their relationship with Allah and their Deen.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Epistemological Breakdown -->\n                    <div class=\"mt-8\">\n                        <h3 class=\"font-alegreya text-xl font-bold text-brand mb-4 flex items-center\">\n                            <i class=\"fa-solid fa-triangle-exclamation text-brand-accent text-base mr-2.5\"><\/i>\n                            The Epistemological Shift\n                        <\/h3>\n                        \n                        <div class=\"mb-6\">\n                            <p class=\"font-david text-sm text-gray-800 leading-relaxed\">\n                                The term \u201cspirituality\u201d requires particular care because it is widely used by Muslims and non-Muslims alike. However, contemporary secular usage poses a severe threat to conceptual integrity.\n                            <\/p>\n                        <\/div>\n\n                        <div class=\"relative border-l border-brand-accent\/30 ml-3 md:ml-4 space-y-6 pb-2\">\n                            \n                            <!-- Phase 1 -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-gray-400 rounded-full flex items-center justify-center text-gray-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-globe\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-gray-600 mb-1\">The Secular Definition<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    In contemporary secular usage, spirituality can refer to subjective experiences of meaning, inner connection, transcendence, personal values, or a personal sense of right and wrong <strong class=\"text-brand\">without being grounded in revelation<\/strong> or an objective source of moral truth.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 2 -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-red-600 rounded-full flex items-center justify-center text-red-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-bolt\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-red-700 mb-1\">The Danger<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    This creates a dangerous epistemological shift. If spirituality is understood primarily through subjective feeling, a person's internal experience can become the measure of what feels meaningful, true, right, or morally good.\n                                <\/p>\n                                <div class=\"bg-red-50 border-l-2 border-red-600 p-2.5 rounded-r\">\n                                    <p class=\"font-david text-red-900 text-xs italic leading-relaxed\">\n                                        What feels spiritually right to one person may therefore be treated as spiritually right for that person, even without reference to Allah, revelation, or the Deen.\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Phase 3 -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-check\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-1 bg-brand-accent\/20 inline-block px-2 py-0.5 rounded\">The Morality Central Stance<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    This subjective definition is <strong class=\"font-bold underline decoration-brand-accent decoration-2 underline-offset-2\">not<\/strong> the basis on which spirituality is understood at Morality Central. Human experience is not treated as the source that determines truth or morality. Rather, spirituality is understood within the framework established by Allah.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    Therefore, we use \u201cspirituality\u201d as a functional term while strictly defining its meaning within the Islamic framework, rather than allowing contemporary secular usage to determine its meaning.\n                                <\/p>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                <\/article>\n\n                <!-- Entry 04: Tradition -->\n                <article id=\"term-tradition\" class=\"mb-16 md:mb-20 scroll-mt-28\">\n                    \n                    <header class=\"mb-6 border-b border-brand\/20 pb-4\">\n                        <div class=\"flex flex-wrap items-baseline gap-3 mb-1\">\n                            <h2 class=\"font-alegreya text-3xl sm:text-4xl font-extrabold text-brand tracking-tight\">\n                                Tradition\n                            <\/h2>\n                        <\/div>\n                        \n                        <div class=\"flex items-center gap-3 text-[11px] font-mono text-gray-500 uppercase tracking-widest\">\n                            <span class=\"bg-brand-parchmentDark px-2 py-0.5 rounded border border-gray-300 text-brand font-bold\">Noun<\/span>\n                            <span>\u2022<\/span>\n                            <span class=\"text-brand-accent font-bold\">English Term<\/span>\n                        <\/div>\n                    <\/header>\n\n                    <div class=\"prose max-w-none mb-8\">\n                        <p class=\"font-alegreya text-lg sm:text-xl text-brand leading-relaxed font-medium border-l-4 border-brand-accent pl-4 py-1\">\n                            At Morality Central, <strong class=\"font-bold\">\u2018tradition\u2019<\/strong> refers to a humanly developed method, approach, practice, or body of scholarship transmitted from one generation to another, without making it infallible or absolute authority.\n                        <\/p>\n                    <\/div>\n\n                    <div class=\"bg-white border border-gray-200 rounded-lg p-4 sm:p-5 shadow-sm relative mb-8\">\n                        <div class=\"absolute -top-2.5 left-5 bg-brand-parchment px-2 font-mono text-[9px] font-bold text-brand-accent uppercase tracking-widest border border-brand-accent\/30 rounded\">Application<\/div>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-3\">\n                            The term <span class=\"font-bold text-brand\">\u201cIslamic tradition\u201d<\/span> may be used when referring to a method, approach, or scholarly framework developed by Muslims to understand or approach Islam and transmitted across generations.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-3\">\n                            For example, a particular method developed by scholars for approaching the Qur\u2019an and Sunnah may be described as part of the Islamic tradition. Such a method remains a human development. Its presence within the Islamic tradition does not make it identical to Islam or establish every element of it as correct.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-brand font-medium leading-relaxed bg-brand-parchmentDark border border-gray-200 p-3 rounded\">\n                            The tradition represents the human means developed and used to approach the primary sources of Islam.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Epistemological Breakdown -->\n                    <div class=\"mt-8\">\n                        <h3 class=\"font-alegreya text-xl font-bold text-brand mb-4 flex items-center\">\n                            <i class=\"fa-solid fa-triangle-exclamation text-brand-accent text-base mr-2.5\"><\/i>\n                            The Epistemological Shift\n                        <\/h3>\n                        \n                        <div class=\"mb-6\">\n                            <p class=\"font-david text-sm text-gray-800 leading-relaxed\">\n                                The term \u201ctradition\u201d requires particular care because inheritance does not establish authority.\n                            <\/p>\n                        <\/div>\n\n                        <div class=\"relative border-l border-brand-accent\/30 ml-3 md:ml-4 space-y-6 pb-2\">\n                            \n                            <!-- Phase 1: General Definition -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-gray-400 rounded-full flex items-center justify-center text-gray-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-globe\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-gray-600 mb-1\">The General Definition<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    In general usage, tradition refers to something transmitted from one generation to another. It may include customs, practices, beliefs, methods, or scholarly approaches.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    The term therefore describes continuity and inheritance, while questions of truth, correctness, and authority require a separate basis.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 2: The Problem -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-red-600 rounded-full flex items-center justify-center text-red-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-bolt\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-red-700 mb-1\">The Problem<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    The epistemological shift occurs when the Qur\u2019an, Hadith, or Sunnah are themselves reduced to \u201ctradition,\u201d as though their authority arises from their transmission across generations.\n                                <\/p>\n                                <div class=\"bg-red-50 border-l-2 border-red-600 p-2.5 rounded-r mb-2\">\n                                    <p class=\"font-david text-red-900 text-xs italic leading-relaxed\">\n                                        This produces assumptions such as: \"We believe this because our predecessors transmitted it to us.\" Or: \"Muslims believe this because previous Muslims believed it.\"\n                                    <\/p>\n                                <\/div>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed font-bold text-brand\">\n                                    Transmission explains how knowledge reaches later generations. It does not itself establish the authority\/foundation of that knowledge.\n                                <\/p>\n                            <\/div>\n                            \n                            <!-- Phase 3: Why Sunnah is not Tradition -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-book-open\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-1\">Why Sunnah is Not Tradition<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-3\">\n                                    The Sunnah of the Prophet \ufdfa is not a humanly developed method or practice. It is part of revelation itself, conveyed through the Messenger\u2019s words, actions, and approvals. To call Sunnah \u201ctradition\u201d would wrongly suggest that its authority arises from transmission across generations, like customs or scholarly methods. In reality, its authority rests on Allah, who appointed the Messenger \ufdfa and made his guidance binding.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-3 font-medium\">\n                                    Transmission preserves Sunnah for later generations, but transmission does not create its authority. The Islamic epistemological structure is therefore:\n                                <\/p>\n                                <div class=\"bg-brand-parchmentDark border border-gray-300 p-2.5 rounded text-center text-xs sm:text-sm font-mono text-brand mb-3 overflow-x-auto\">\n                                    Allah \u2192 Wa\u1e25y \u2192 Messenger \ufdfa \u2192 Prophetic guidance \u2192 Transmission \u2192 Human knowledge\n                                <\/div>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    Transmission functions as the means through which knowledge of revelation and Prophetic guidance reaches later generations. We do not follow Islam merely because it has been inherited by us or our forefathers, but because he \ufdfa was the Messenger of Allah. The absolute authority rests with Allah.\n                                <\/p>\n                            <\/div>\n                            \n                            <!-- Phase 4: Inherited Belief and the Qur\u2019anic Critique -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-2\">Inherited Belief & The Qur\u2019anic Critique<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-3\">\n                                    The Qur\u2019an highlights disbelievers who inherited their deen from their ancestors.\n                                <\/p>\n                                \n                                <div class=\"bg-brand text-white rounded-lg p-5 shadow-lg relative overflow-hidden mb-3\">\n                                    <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                                    <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                        \u0648\u064e\u0625\u0650\u0630\u064e\u0627 \u0642\u0650\u064a\u0644\u064e \u0644\u064e\u0647\u064f\u0645\u064f \u0671\u062a\u064e\u0651\u0628\u0650\u0639\u064f\u0648\u0627\u06df \u0645\u064e\u0622 \u0623\u064e\u0646\u0632\u064e\u0644\u064e \u0671\u0644\u0644\u064e\u0651\u0647\u064f \u0642\u064e\u0627\u0644\u064f\u0648\u0627\u06df \u0628\u064e\u0644\u0652 \u0646\u064e\u062a\u064e\u0651\u0628\u0650\u0639\u064f \u0645\u064e\u0622 \u0623\u064e\u0644\u0652\u0641\u064e\u064a\u0652\u0646\u064e\u0627 \u0639\u064e\u0644\u064e\u064a\u0652\u0647\u0650 \u0621\u064e\u0627\u0628\u064e\u0622\u0621\u064e\u0646\u064e\u0622 \u06d7 \u0623\u064e\u0648\u064e\u0644\u064e\u0648\u0652 \u0643\u064e\u0627\u0646\u064e \u0621\u064e\u0627\u0628\u064e\u0622\u0624\u064f\u0647\u064f\u0645\u0652 \u0644\u064e\u0627 \u064a\u064e\u0639\u0652\u0642\u0650\u0644\u064f\u0648\u0646\u064e \u0634\u064e\u064a\u0652\u0640\u064b\u06ed\u0654\u0627 \u0648\u064e\u0644\u064e\u0627 \u064a\u064e\u0647\u0652\u062a\u064e\u062f\u064f\u0648\u0646\u064e\n                                    <\/p>\n                                    <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                        <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                            \u201cAnd when it is said to them, \u2018Follow what All\u0101h has revealed,\u2019 they say, \u2018Rather, we will follow that which we found our fathers doing.\u2019 Even though their fathers understood nothing, nor were they guided?\u201d\n                                        <\/p>\n                                        <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Qur\u2019an, Surah Baqarah 2:170, Saheeh International<\/p>\n                                    <\/div>\n                                <\/div>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    These verses establish an important epistemological distinction. Something inherited from previous generations does not acquire truth merely through its inheritance.\n                                <\/p>\n                            <\/div>\n                            \n                            <!-- Phase 5: The Western Conception -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-gray-500 rounded-full flex items-center justify-center text-gray-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-landmark\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-gray-600 mb-1\">The Western Conception<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    In modern Western intellectual discourse, \u201ctradition\u201d can be placed in contrast with reason and critical inquiry, as though following tradition means accepting what has been handed down without engaging one\u2019s own understanding or intellect. This creates a tradition versus reason framework.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    Such a conception is incompatible with the Islamic understanding of intellectual engagement. It would be contrary to Islam to suggest that using one\u2019s understanding, intellect, or capacity for reflection stands against following revelation.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    The Qur\u2019anic language itself repeatedly directs human beings towards pondering and reflection, using expressions such as \u062a\u064e\u0641\u064e\u0643\u064e\u0651\u0631\u064f\u0648\u0646\u064e (tafakkar\u016bn) and \u062a\u064e\u0639\u0652\u0642\u0650\u0644\u064f\u0648\u0646\u064e (ta\u02bfqil\u016bn). The Islamic framework therefore does not place revelation and intellectual engagement in opposition. Revelation provides guidance, while human beings ponder, reflect, understand, and respond to it.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 6: The Morality Central Stance -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-check\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-1 bg-brand-accent\/20 inline-block px-2 py-0.5 rounded\">The Morality Central Stance<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    At Morality Central, tradition means human practices transmitted among people, without making them infallible or absolute authority.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    A method may become part of the Islamic tradition because Muslim scholars developed and used it in their efforts to understand and approach the Qur\u2019an and Sunnah. Its transmission across generations identifies it as part of a continuing scholarly tradition. Its validity must be assessed through its relationship with the revealed sources and the principles by which those sources are understood.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    Thus, Islamic tradition describes the inherited human effort to approach Islam, rather than functioning as an independent source of Islamic authority.\n                                <\/p>\n                            <\/div>\n                            \n                            <!-- Phase 7: Why We Reframe -->\n                            <div class=\"relative pl-6 md:pl-8 pt-2\">\n                                <div class=\"absolute -left-3 top-3 w-6 h-6 bg-brand-parchment border-2 border-brand\/50 rounded-full flex items-center justify-center text-brand\/70 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-list\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-3\">Why We Reframe The Definition<\/h4>\n                                <ul class=\"space-y-3 font-david text-sm text-gray-700\">\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To distinguish inheritance from authority:<\/strong> Inheritance describes continuity across generations. Authority requires an established basis.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To distinguish transmission from revelation:<\/strong> Transmission conveys knowledge of revelation to later generations. It does not become revelation itself.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To distinguish human methods from Islam:<\/strong> A method developed by Muslim scholars to understand Islam remains a human method.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To distinguish Islamic tradition from Islam itself:<\/strong> A scholarly approach may belong to the Islamic tradition without being Islam itself.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To preserve the role of intellectual engagement:<\/strong> Following revelation does not require abandoning understanding, pondering, or reflection.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To distinguish inherited practice from revealed guidance:<\/strong> A practice transmitted through Muslim societies requires examination against the Qur\u2019an and Sunnah before it can be treated as Islamic guidance.<\/div>\n                                    <\/li>\n                                <\/ul>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                <\/article>\n\n                <!-- Entry 05: Ethics -->\n                <article id=\"term-ethics\" class=\"mb-16 md:mb-20 scroll-mt-28\">\n                    \n                    <header class=\"mb-6 border-b border-brand\/20 pb-4\">\n                        <div class=\"flex flex-wrap items-baseline gap-3 mb-1\">\n                            <h2 class=\"font-alegreya text-3xl sm:text-4xl font-extrabold text-brand tracking-tight\">\n                                Ethics\n                            <\/h2>\n                        <\/div>\n                        \n                        <div class=\"flex items-center gap-3 text-[11px] font-mono text-gray-500 uppercase tracking-widest\">\n                            <span class=\"bg-brand-parchmentDark px-2 py-0.5 rounded border border-gray-300 text-brand font-bold\">Noun<\/span>\n                            <span>\u2022<\/span>\n                            <span class=\"text-brand-accent font-bold\">English Term<\/span>\n                        <\/div>\n                    <\/header>\n\n                    <div class=\"prose max-w-none mb-8\">\n                        <p class=\"font-alegreya text-lg sm:text-xl text-brand leading-relaxed font-medium border-l-4 border-brand-accent pl-4 py-1\">\n                            At Morality Central, <strong class=\"font-bold\">\u201cethics\u201d<\/strong> refers to Islamic principles of right and wrong grounded in the Qur\u2019an and Sunnah.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mt-3\">\n                            These principles guide and evaluate human behavior, character, intentions, habits, and actions.\n                        <\/p>\n                    <\/div>\n\n                    <div class=\"bg-white border border-gray-200 rounded-lg p-4 sm:p-5 shadow-sm relative mb-8\">\n                        <div class=\"absolute -top-2.5 left-5 bg-brand-parchment px-2 font-mono text-[9px] font-bold text-brand-accent uppercase tracking-widest border border-brand-accent\/30 rounded\">Application<\/div>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed\">\n                            Thus, when we describe an action, intention, habit, or conduct as <span class=\"font-bold text-brand\">\u201cethical\u201d<\/span> or <span class=\"font-bold text-brand\">\u201cunethical,\u201d<\/span> we are referring to its conformity or non-conformity with the standard established through the Qur\u2019an and Sunnah.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Epistemological Breakdown -->\n                    <div class=\"mt-8\">\n                        <h3 class=\"font-alegreya text-xl font-bold text-brand mb-4 flex items-center\">\n                            <i class=\"fa-solid fa-triangle-exclamation text-brand-accent text-base mr-2.5\"><\/i>\n                            The Epistemological Shift\n                        <\/h3>\n                        \n                        <div class=\"mb-6\">\n                            <p class=\"font-david text-sm text-gray-800 leading-relaxed\">\n                                The term \u201cethics\u201d requires particular care because its general definition does not necessarily specify who determines the standard of right and wrong.\n                            <\/p>\n                        <\/div>\n\n                        <div class=\"relative border-l border-brand-accent\/30 ml-3 md:ml-4 space-y-6 pb-2\">\n                            \n                            <!-- Phase 1: General Definition -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-gray-400 rounded-full flex items-center justify-center text-gray-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-globe\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-gray-600 mb-1\">The General Definition<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    In general usage, ethics may be defined as the discipline concerned with what is morally good or bad, and with what is morally right or wrong.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    This definition describes the subject of ethics, but does not establish the source that determines moral correctness. Consequently, the standard may be derived from personal opinion, social acceptance, cultural practice, professional rules, or changing circumstances.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 2: The Problem -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-red-600 rounded-full flex items-center justify-center text-red-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-bolt\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-red-700 mb-1\">The Problem<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    This creates a danger of treating human judgment as the source of moral truth. A principle may appear universal, while its application changes according to individual or collective judgment. For example, lying is generally regarded as wrong. Yet its moral assessment can change when human judgment becomes the determining standard:\n                                <\/p>\n                                <ul class=\"list-disc list-outside ml-4 mb-3 text-sm font-david text-gray-700 space-y-1\">\n                                    <li>A student lies to protect a friend from punishment. Some may consider it kindness; others may consider it dishonesty.<\/li>\n                                    <li>A politician lies while claiming that the lie serves the nation. Some may call it strategy; others may call it betrayal.<\/li>\n                                    <li>A person lies to prevent conflict within a family. One society may tolerate the act, while another may consider it unacceptable.<\/li>\n                                <\/ul>\n                                <p class=\"font-david text-brand text-sm leading-relaxed font-bold\">\n                                    The question therefore becomes: who determines when an act becomes ethically permissible?\n                                <\/p>\n                            <\/div>\n                            \n                            <!-- Phase 3: The Islamic Standard -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-scale-balanced\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-2\">The Islamic Standard<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-3\">\n                                    Islam does not leave the permissibility of lying to individual assessment. Instead, gives objective exceptions:\n                                <\/p>\n                                \n                                <div class=\"bg-brand text-white rounded-lg p-5 shadow-lg relative overflow-hidden mb-3\">\n                                    <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                                    <div class=\"flex items-center gap-2.5 mb-3\">\n                                        <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                            <i class=\"fa-solid fa-book-open\"><\/i>\n                                        <\/div>\n                                        <div>\n                                            <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Prophetic Tradition<\/h3>\n                                            <p class=\"font-david text-[11px] text-gray-400\">Riyadh as-Salihin 249<\/p>\n                                        <\/div>\n                                    <\/div>\n                                    <p class=\"text-sm sm:text-base italic text-gray-100 leading-relaxed font-david\">\n                                        Umm Kulthum bint 'Uqbah (May Allah be pleased with her) said: \"I never heard him (she meant the Prophet \ufdfa) giving permission of lying in anything except in three (things): war, conciliating between people and the conversation of man with his wife and the conversation of a woman with her husband\".\n                                    <\/p>\n                                <\/div>\n                                \n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    Outside these exceptions, a person cannot make lying permissible simply because he considers his purpose beneficial.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 4: The Morality Central Stance -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-check\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-1 bg-brand-accent\/20 inline-block px-2 py-0.5 rounded\">The Morality Central Stance<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    At Morality Central, ethics is therefore not founded upon custom, habit, social acceptance, or human opinion. The Qur\u2019an and Sunnah establish the standard by which right and wrong are determined.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    Human customs and habits remain relevant because ethics guides and evaluates them, but they do not establish the ethical standard. What society accepts is not automatically what Islam considers right. Likewise, a practice being widespread does not establish its moral validity.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed font-medium\">\n                                    Custom is therefore evaluated against the ethical standard, rather than becoming the source of that standard.\n                                <\/p>\n                            <\/div>\n                            \n                            <!-- Phase 5: Why We Reframe -->\n                            <div class=\"relative pl-6 md:pl-8 pt-2\">\n                                <div class=\"absolute -left-3 top-3 w-6 h-6 bg-brand-parchment border-2 border-brand\/50 rounded-full flex items-center justify-center text-brand\/70 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-list\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-3\">Why We Reframe The Definition<\/h4>\n                                <ul class=\"space-y-3 font-david text-sm text-gray-700\">\n                                    <li class=\"flex items-center\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mr-2 text-xs\"><\/i>\n                                        <strong class=\"text-brand\">To establish the source<\/strong>\n                                    <\/li>\n                                    <li class=\"flex items-center\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mr-2 text-xs\"><\/i>\n                                        <strong class=\"text-brand\">To establish an objective standard<\/strong>\n                                    <\/li>\n                                    <li class=\"flex items-center\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mr-2 text-xs\"><\/i>\n                                        <strong class=\"text-brand\">To distinguish morality from custom<\/strong>\n                                    <\/li>\n                                    <li class=\"flex items-center\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mr-2 text-xs\"><\/i>\n                                        <strong class=\"text-brand\">To distinguish what is common from what is correct<\/strong>\n                                    <\/li>\n                                <\/ul>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                <\/article>\n\n                <!-- Entry 06: Aql -->\n                <article id=\"term-aql\" class=\"mb-16 md:mb-20 scroll-mt-28\">\n                    \n                    <header class=\"mb-6 border-b border-brand\/20 pb-4\">\n                        <div class=\"flex flex-wrap items-baseline gap-3 mb-1\">\n                            <h2 class=\"font-alegreya text-3xl sm:text-4xl font-extrabold text-brand tracking-tight\">\n                                \u02bfAql\n                            <\/h2>\n                            <span class=\"font-arabic text-xl sm:text-2xl text-brand-accent\">\u0639\u0642\u0644<\/span>\n                        <\/div>\n                        \n                        <div class=\"flex items-center gap-3 text-[11px] font-mono text-gray-500 uppercase tracking-widest\">\n                            <span class=\"bg-brand-parchmentDark px-2 py-0.5 rounded border border-gray-300 text-brand font-bold\">Verbal Noun<\/span>\n                            <span>\u2022<\/span>\n                            <span class=\"text-brand-accent font-bold\">Arabic Term<\/span>\n                        <\/div>\n                    <\/header>\n\n                    <!-- Literally -->\n                    <div class=\"mb-8\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-2\">Literally<\/h3>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-2\">\n                            \u02bfAql (\u0639\u0642\u0644) comes from the root <strong>\u0639 \u0642 \u0644<\/strong>, whose fundamental meaning is to bind, hold firmly and restrain.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed\">\n                            Its meanings extend to gathering, grasping, retaining, discerning and restraining oneself, all connected to the idea of binding.\n                        <\/p>\n                    <\/div>\n\n                    <!-- In the Qur'an -->\n                    <div class=\"mb-10\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-4\">In the Qur\u2019an<\/h3>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-4\">\n                            The root <strong>\u0639 \u0642 \u0644<\/strong> is used in the Qur\u2019an in verbal forms, including \u062a\u064e\u0639\u0652\u0642\u0650\u0644\u064f\u0648\u0646\u064e (ta\u02bfqil\u016bn) and \u064a\u064e\u0639\u0652\u0642\u0650\u0644\u064f\u0648\u0646\u064e (ya\u02bfqil\u016bn).\n                        <\/p>\n\n                        <!-- Verse 1 -->\n                        <div class=\"bg-brand text-white rounded-lg p-5 sm:p-6 shadow-lg relative overflow-hidden mb-6\">\n                            <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                            <div class=\"flex items-center gap-2.5 mb-4 border-b border-white\/10 pb-3\">\n                                <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Surah al-Baqarah : 44<\/h3>\n                                <\/div>\n                            <\/div>\n                            <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                \u0623\u064e\u062a\u064e\u0623\u0652\u0645\u064f\u0631\u064f\u0648\u0646\u064e \u0671\u0644\u0646\u064e\u0651\u0627\u0633\u064e \u0628\u0650\u0671\u0644\u0652\u0628\u0650\u0631\u0650\u0651 \u0648\u064e\u062a\u064e\u0646\u0633\u064e\u0648\u0652\u0646\u064e \u0623\u064e\u0646\u0641\u064f\u0633\u064e\u0643\u064f\u0645\u0652 \u0648\u064e\u0623\u064e\u0646\u062a\u064f\u0645\u0652 \u062a\u064e\u062a\u0652\u0644\u064f\u0648\u0646\u064e \u0671\u0644\u0652\u0643\u0650\u062a\u064e\u0640\u0670\u0628\u064e \u06da \u0623\u064e\u0641\u064e\u0644\u064e\u0627 \u062a\u064e\u0639\u0652\u0642\u0650\u0644\u064f\u0648\u0646\u064e \n                            <\/p>\n                            <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                    \"Do you order righteousness of the people and forget yourselves while you recite the Scripture? Then will you not ta\u02bfqil\u016bn?\"\n                                <\/p>\n                                <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Saheeh International Translation<\/p>\n                            <\/div>\n                            <p class=\"font-david text-sm text-gray-300 mt-4 border-t border-brand-accent\/20 pt-3\">\n                                Here, <span class=\"font-bold text-brand-accent\">ta\u02bfqil\u016bn<\/span> can be understood through its root sense of grasping firmly, retaining what is known and restraining oneself accordingly.\n                            <\/p>\n                        <\/div>\n\n                        <!-- Verse 2 -->\n                        <div class=\"bg-brand text-white rounded-lg p-5 sm:p-6 shadow-lg relative overflow-hidden mb-6\">\n                            <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                            <div class=\"flex items-center gap-2.5 mb-4 border-b border-white\/10 pb-3\">\n                                <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Surah al-An\u02bfam : 151<\/h3>\n                                <\/div>\n                            <\/div>\n                            <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                \u0642\u064f\u0644\u0652 \u062a\u064e\u0639\u064e\u0627\u0644\u064e\u0648\u0652\u0627\u06df \u0623\u064e\u062a\u0652\u0644\u064f \u0645\u064e\u0627 \u062d\u064e\u0631\u064e\u0651\u0645\u064e \u0631\u064e\u0628\u064f\u0651\u0643\u064f\u0645\u0652 \u0639\u064e\u0644\u064e\u064a\u0652\u0643\u064f\u0645\u0652 \u06d6 \u0623\u064e\u0644\u064e\u0651\u0627 \u062a\u064f\u0634\u0652\u0631\u0650\u0643\u064f\u0648\u0627\u06df \u0628\u0650\u0647\u0650\u06e6 \u0634\u064e\u064a\u0652\u0640\u064b\u06ed\u0654\u0627 \u06d6 \u0648\u064e\u0628\u0650\u0671\u0644\u0652\u0648\u064e\u0670\u0644\u0650\u062f\u064e\u064a\u0652\u0646\u0650 \u0625\u0650\u062d\u0652\u0633\u064e\u0640\u0670\u0646\u064b\u06ed\u0627 \u06d6 \u0648\u064e\u0644\u064e\u0627 \u062a\u064e\u0642\u0652\u062a\u064f\u0644\u064f\u0648\u0653\u0627\u06df \u0623\u064e\u0648\u0652\u0644\u064e\u0640\u0670\u062f\u064e\u0643\u064f\u0645 \u0645\u0650\u0651\u0646\u0652 \u0625\u0650\u0645\u0652\u0644\u064e\u0640\u0670\u0642\u064d\u06e2 \u06d6 \u0646\u064e\u0651\u062d\u0652\u0646\u064f \u0646\u064e\u0631\u0652\u0632\u064f\u0642\u064f\u0643\u064f\u0645\u0652 \u0648\u064e\u0625\u0650\u064a\u064e\u0651\u0627\u0647\u064f\u0645\u0652 \u06d6 \u0648\u064e\u0644\u064e\u0627 \u062a\u064e\u0642\u0652\u0631\u064e\u0628\u064f\u0648\u0627\u06df \u0671\u0644\u0652\u0641\u064e\u0648\u064e\u0670\u062d\u0650\u0634\u064e \u0645\u064e\u0627 \u0638\u064e\u0647\u064e\u0631\u064e \u0645\u0650\u0646\u0652\u0647\u064e\u0627 \u0648\u064e\u0645\u064e\u0627 \u0628\u064e\u0637\u064e\u0646\u064e \u06d6 \u0648\u064e\u0644\u064e\u0627 \u062a\u064e\u0642\u0652\u062a\u064f\u0644\u064f\u0648\u0627\u06df \u0671\u0644\u0646\u064e\u0651\u0641\u0652\u0633\u064e \u0671\u0644\u064e\u0651\u062a\u0650\u0649 \u062d\u064e\u0631\u064e\u0651\u0645\u064e \u0671\u0644\u0644\u064e\u0651\u0647\u064f \u0625\u0650\u0644\u064e\u0651\u0627 \u0628\u0650\u0671\u0644\u0652\u062d\u064e\u0642\u0650\u0651 \u06da \u0630\u064e\u0670\u0644\u0650\u0643\u064f\u0645\u0652 \u0648\u064e\u0635\u064e\u0651\u0649\u0670\u0643\u064f\u0645 \u0628\u0650\u0647\u0650\u06e6 \u0644\u064e\u0639\u064e\u0644\u064e\u0651\u0643\u064f\u0645\u0652 \u062a\u064e\u0639\u0652\u0642\u0650\u0644\u064f\u0648\u0646\u064e\n                            <\/p>\n                            <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                    \"Say, 'Come, I will recite what your Lord has prohibited to you. [He commands] that you not associate anything with Him, and to parents, good treatment, and do not kill your children out of poverty; We will provide for you and them. And do not approach immoralities - what is apparent of them and what is concealed. And do not kill the soul which All\u0101h has forbidden [to be killed] except by [legal] right. This He has instructed you with, so that you may ta\u02bfqil\u016bn.'\"\n                                <\/p>\n                                <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Saheeh International Translation<\/p>\n                            <\/div>\n                            <p class=\"font-david text-sm text-gray-300 mt-4 border-t border-brand-accent\/20 pt-3\">\n                                Here, <span class=\"font-bold text-brand-accent\">ta\u02bfqil\u016bn<\/span> can be also be understood as holding firmly or restraining oneself from the above prohibitions.\n                            <\/p>\n                        <\/div>\n\n                        <!-- Verse 3 -->\n                        <div class=\"bg-brand text-white rounded-lg p-5 sm:p-6 shadow-lg relative overflow-hidden mb-6\">\n                            <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                            <div class=\"flex items-center gap-2.5 mb-4 border-b border-white\/10 pb-3\">\n                                <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Surah al-\u1e24ajj : 46<\/h3>\n                                <\/div>\n                            <\/div>\n                            <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                \u0623\u064e\u0641\u064e\u0644\u064e\u0645\u0652 \u064a\u064e\u0633\u0650\u064a\u0631\u064f\u0648\u0627\u06df \u0641\u0650\u0649 \u0671\u0644\u0652\u0623\u064e\u0631\u0652\u0636\u0650 \u0641\u064e\u062a\u064e\u0643\u064f\u0648\u0646\u064e \u0644\u064e\u0647\u064f\u0645\u0652 \u0642\u064f\u0644\u064f\u0648\u0628\u064c\u06ed \u064a\u064e\u0639\u0652\u0642\u0650\u0644\u064f\u0648\u0646\u064e \u0628\u0650\u0647\u064e\u0622 \u0623\u064e\u0648\u0652 \u0621\u064e\u0627\u0630\u064e\u0627\u0646\u064c\u06ed \u064a\u064e\u0633\u0652\u0645\u064e\u0639\u064f\u0648\u0646\u064e \u0628\u0650\u0647\u064e\u0627 \u06d6 \u0641\u064e\u0625\u0650\u0646\u064e\u0651\u0647\u064e\u0627 \u0644\u064e\u0627 \u062a\u064e\u0639\u0652\u0645\u064e\u0649 \u0671\u0644\u0652\u0623\u064e\u0628\u0652\u0635\u064e\u0640\u0670\u0631\u064f \u0648\u064e\u0644\u064e\u0640\u0670\u0643\u0650\u0646 \u062a\u064e\u0639\u0652\u0645\u064e\u0649 \u0671\u0644\u0652\u0642\u064f\u0644\u064f\u0648\u0628\u064f \u0671\u0644\u064e\u0651\u062a\u0650\u0649 \u0641\u0650\u0649 \u0671\u0644\u0635\u064f\u0651\u062f\u064f\u0648\u0631\u0650 \n                            <\/p>\n                            <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                    \"So have they not traveled through the earth and have hearts by with which they ya\u02bfqil\u016bn, and ears by which to hear? For indeed, it is not eyes that are blinded, but blinded are the hearts which are within the breasts.\"\n                                <\/p>\n                                <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Saheeh International Translation<\/p>\n                            <\/div>\n                            <p class=\"font-david text-sm text-gray-300 mt-4 border-t border-brand-accent\/20 pt-3\">\n                                Here, <span class=\"font-bold text-brand-accent\">ya\u02bfqil\u016bn<\/span> also points to grasping and discerning what is witnessed.\n                            <\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Why It Matters -->\n                    <div class=\"mb-10\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-4\">Why It Matters<\/h3>\n                        <div class=\"bg-white border border-gray-200 rounded-lg p-5 shadow-sm mb-4\">\n                            <p class=\"font-david text-sm text-gray-500 mb-2\">Allah says concerning Adam \u0639\u0644\u064a\u0647 \u0627\u0644\u0633\u0644\u0627\u0645:<\/p>\n                            <p dir=\"rtl\" class=\"font-arabic text-xl sm:text-2xl text-right leading-loose text-brand py-2 break-words\">\n                                \u0648\u064e\u0639\u064e\u0644\u064e\u0651\u0645\u064e \u0621\u064e\u0627\u062f\u064e\u0645\u064e \u0671\u0644\u0652\u0623\u064e\u0633\u0652\u0645\u064e\u0622\u0621\u064e \u0643\u064f\u0644\u064e\u0651\u0647\u064e\u0627 \n                            <\/p>\n                            <p class=\"text-sm sm:text-base italic text-gray-700 leading-relaxed font-david bg-brand-parchment p-3 rounded\">\n                                \"And He taught Adam the names - all of them.\"<br>\n                                <span class=\"text-xs text-gray-500 not-italic font-mono mt-1 block\">\u2014 Surah al-Baqarah 2:31<\/span>\n                            <\/p>\n                        <\/div>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-3\">\n                            Adam \u0639\u0644\u064a\u0647 \u0627\u0644\u0633\u0644\u0627\u0645 was given knowledge that was not given to the angels. This marked him as distinct from them in the test that followed. The story invites us to ponder the distinctive human capacity to receive knowledge, grasp it, retain it and engage with its meaning.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed font-medium\">\n                            Understanding \u02bfaql matters because the human being is capable of more than merely receiving or processing information. It concerns how knowledge is gathered, grasped, held firmly, discerned and brought into conduct.\n                        <\/p>\n                    <\/div>\n\n                    <!-- The Prophetic Usage -->\n                    <div class=\"mb-10\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-4\">The Prophetic Usage<\/h3>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-4\">\n                            The noun \u02bfaql is explicitly used in Prophetic speech:\n                        <\/p>\n                        \n                        <div class=\"bg-brand text-white rounded-lg p-5 shadow-lg relative overflow-hidden mb-5\">\n                            <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                            <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                \u0623\u064e\u0644\u064e\u064a\u0652\u0633\u064e \u0634\u064e\u0647\u064e\u0627\u062f\u064e\u0629\u064f \u0627\u0644\u0652\u0645\u064e\u0631\u0652\u0623\u064e\u0629\u0650 \u0645\u0650\u062b\u0652\u0644\u064e \u0646\u0650\u0635\u0652\u0641\u0650 \u0634\u064e\u0647\u064e\u0627\u062f\u064e\u0629\u0650 \u0627\u0644\u0631\u064e\u0651\u062c\u064f\u0644\u0650 \u200f\"\u200f\u200f.\u200f \u0642\u064f\u0644\u0652\u0646\u064e\u0627 \u0628\u064e\u0644\u064e\u0649\u200f.\u200f \u0642\u064e\u0627\u0644\u064e \u200f\"\u200f \u0641\u064e\u0630\u064e\u0644\u0650\u0643\u064e \u0645\u0650\u0646\u0652 \u0646\u064f\u0642\u0652\u0635\u064e\u0627\u0646\u0650 \u0639\u064e\u0642\u0652\u0644\u0650\u0647\u064e\u0627 \u200f\u200f\n                            <\/p>\n                            <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                    \u201cIs not the testimony of a woman equal to half of the testimony of a man?\u201d They said, \u201cYes.\u201d He said, \u201cThat is from the deficiency of her \u02bfaql.\u201d\n                                <\/p>\n                                <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 \u1e62a\u1e25\u012b\u1e25 al-Bukh\u0101r\u012b, Hadith 2658.<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"bg-brand-parchmentDark border-l-4 border-red-600 p-4 mb-4\">\n                            <p class=\"font-david text-sm text-gray-800 leading-relaxed\">\n                                The problem arises when <em>nuq\u1e63\u0101n al-\u02bfaql<\/em> is reduced to the claim that women are \u201cstupid\u201d or inherently less intelligent.\n                            <\/p>\n                        <\/div>\n                        \n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-3\">\n                            The Prophet \ufdfa connects the expression directly to the matter of testimony discussed in the Hadith. It cannot be detached from this context and transformed into a general judgment about the intellectual capacity of women.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-3\">\n                            In the context of testimony, \u201cnuq\u1e63\u0101n al-\u02bfaql\u201d may be understood in relation to the particular demands placed upon a woman in bearing witness, including her ability to gather the details of an incident, hold them firmly, discern what has occurred, and maintain composure when the matter carries emotional or personal weight.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-brand font-bold leading-relaxed bg-brand-accent\/10 p-3 rounded\">\n                            This does not amount to a judgment that women are inherently less intelligent; rather, the expression is tied to a specific context of testimony and the human capacities involved in responding to it. A blanket claim that women are \u201cstupid\u201d or intellectually inferior cannot be derived from the Hadith.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Understanding Aql -->\n                    <div class=\"mb-6\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-3\">Understanding \u02bfAql<\/h3>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-3\">\n                            \u02bfAql encompasses:\n                        <\/p>\n                        <div class=\"flex flex-wrap gap-2 mb-4 font-mono text-xs font-bold text-brand uppercase\">\n                            <span class=\"bg-white border border-brand-accent\/40 px-3 py-1.5 rounded-full shadow-sm\">Binding<\/span>\n                            <span class=\"bg-white border border-brand-accent\/40 px-3 py-1.5 rounded-full shadow-sm\">Gathering<\/span>\n                            <span class=\"bg-white border border-brand-accent\/40 px-3 py-1.5 rounded-full shadow-sm\">Grasping<\/span>\n                            <span class=\"bg-white border border-brand-accent\/40 px-3 py-1.5 rounded-full shadow-sm\">Holding firmly<\/span>\n                            <span class=\"bg-white border border-brand-accent\/40 px-3 py-1.5 rounded-full shadow-sm\">Retaining<\/span>\n                            <span class=\"bg-white border border-brand-accent\/40 px-3 py-1.5 rounded-full shadow-sm\">Discerning<\/span>\n                            <span class=\"bg-white border border-brand-accent\/40 px-3 py-1.5 rounded-full shadow-sm\">Restraining<\/span>\n                        <\/div>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-3\">\n                            Its meaning unfolds through context and should not be fixed to one English equivalent such as \u201creason,\u201d \u201cintellect\u201d or \u201cunderstanding.\u201d\n                        <\/p>\n                        <p class=\"font-alegreya text-lg sm:text-xl text-brand leading-relaxed font-bold border-l-4 border-brand-accent pl-4 py-1\">\n                            \u02bfAql is the capacity through which the human being gathers, grasps, discerns, holds firmly and governs himself by what he has recognised.\n                        <\/p>\n                    <\/div>\n                <\/article>\n\n                <!-- Entry 07: Religion -->\n                <article id=\"term-religion\" class=\"mb-16 md:mb-20 scroll-mt-28\">\n                    \n                    <header class=\"mb-6 border-b border-brand\/20 pb-4\">\n                        <div class=\"flex flex-wrap items-baseline gap-3 mb-1\">\n                            <h2 class=\"font-alegreya text-3xl sm:text-4xl font-extrabold text-brand tracking-tight\">\n                                Religion\n                            <\/h2>\n                        <\/div>\n                        \n                        <div class=\"flex items-center gap-3 text-[11px] font-mono text-gray-500 uppercase tracking-widest\">\n                            <span class=\"bg-brand-parchmentDark px-2 py-0.5 rounded border border-gray-300 text-brand font-bold\">Noun<\/span>\n                            <span>\u2022<\/span>\n                            <span class=\"text-brand-accent font-bold\">English Term<\/span>\n                        <\/div>\n                    <\/header>\n\n                    <div class=\"prose max-w-none mb-8\">\n                        <p class=\"font-alegreya text-lg sm:text-xl text-brand leading-relaxed font-medium border-l-4 border-brand-accent pl-4 py-1\">\n                            At Morality Central, <strong class=\"font-bold\">\u201creligion\u201d<\/strong> refers to a system primarily concerned with belief, worship, doctrine, ritual and religious practice, particularly where religious life is understood as a distinct sphere within human existence.\n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mt-3\">\n                            The term may describe traditions whose conception of religious life is centred upon a particular set of beliefs and practices, often distinguished from the ordinary organisation of worldly life.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Epistemological Breakdown: Why we refrain -->\n                    <div class=\"mt-8\">\n                        <h3 class=\"font-alegreya text-xl font-bold text-brand mb-4 flex items-center\">\n                            <i class=\"fa-solid fa-triangle-exclamation text-brand-accent text-base mr-2.5\"><\/i>\n                            Why We Refrain from Using \"Religion\" for the Deen of Islam\n                        <\/h3>\n                        \n                        <div class=\"mb-6 bg-brand-parchmentDark border border-gray-300 rounded-lg p-4 shadow-sm\">\n                            <p class=\"font-david text-sm text-gray-800 leading-relaxed font-bold mb-2\">\n                                At Morality Central, we do not use \u201creligion\u201d as the defining term for the Deen of Islam. The reason is conceptual.\n                            <\/p>\n                            <p class=\"font-david text-sm text-gray-800 leading-relaxed\">\n                                The Qur\u2019an identifies Islam as Deen:\n                            <\/p>\n                        <\/div>\n                        \n                        <div class=\"bg-brand text-white rounded-lg p-5 shadow-lg relative overflow-hidden mb-6\">\n                            <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                            <div class=\"flex items-center gap-2.5 mb-3\">\n                                <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Evidence<\/h3>\n                                    <p class=\"font-david text-[11px] text-gray-400\">Qur\u2019an 3:19<\/p>\n                                <\/div>\n                            <\/div>\n                            <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                \u0625\u0650\u0646\u0651\u064e \u0627\u0644\u062f\u0651\u0650\u064a\u0646\u064e \u0639\u0650\u0646\u062f\u064e \u0627\u0644\u0644\u0651\u064e\u0647\u0650 \u0627\u0644\u0652\u0625\u0650\u0633\u0652\u0644\u064e\u0627\u0645\u064f\n                            <\/p>\n                            <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                    \u201cIndeed, the Deen in the sight of All\u0101h is Islam.\u201d\n                                <\/p>\n                                <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Saheeh International Translation<\/p>\n                            <\/div>\n                        <\/div>\n                        \n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-6\">\n                            Deen encompasses submission, obedience, obligation, conduct and accountability. It concerns the ordering of human life in submission to Allah. The category of \u201creligion\u201d can place Islam into a particular compartment of life, creating a distinction between the \u201creligious\u201d and the \u201cnon-religious.\u201d\n                        <\/p>\n\n                        <div class=\"relative border-l border-brand-accent\/30 ml-3 md:ml-4 space-y-6 pb-2\">\n                            \n                            <!-- Phase 1: The Shift -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-red-600 rounded-full flex items-center justify-center text-red-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-bolt\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-red-700 mb-2\">The Epistemological Shift<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-3\">\n                                    The shift occurs when:\n                                <\/p>\n                                <div class=\"bg-red-50 border border-red-200 p-3 rounded text-center text-xs sm:text-sm font-mono text-red-900 mb-3 overflow-x-auto shadow-sm\">\n                                    Deen \u2192 Religion \u2192 One compartment of life\n                                <\/div>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    This can produce a framework in which:\n                                <\/p>\n                                <ul class=\"list-disc list-outside ml-4 mb-3 text-sm font-david text-gray-700 space-y-1\">\n                                    <li>Worship becomes \u201creligious.\u201d<\/li>\n                                    <li>Education becomes separate.<\/li>\n                                    <li>Ethics becomes separate.<\/li>\n                                    <li>Law becomes separate.<\/li>\n                                    <li>Economics becomes separate.<\/li>\n                                    <li>Social life becomes separate.<\/li>\n                                <\/ul>\n                                <p class=\"font-david text-brand text-sm leading-relaxed font-bold\">\n                                    Islam does not establish these as independent spheres detached from the Deen.\n                                <\/p>\n                            <\/div>\n                            \n                            <!-- Phase 2: A Comprehensive Word -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-globe\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-2\">Deen: A Comprehensive Word<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-3\">\n                                    Allah \u0633\u0628\u062d\u0627\u0646\u0647 \u0648\u062a\u0639\u0627\u0644\u0649 says:\n                                <\/p>\n                                <div class=\"bg-brand text-white rounded-lg p-5 shadow-lg relative overflow-hidden mb-3\">\n                                    <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                                    <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                        \u064a\u064e\u0627 \u0623\u064e\u064a\u0651\u064f\u0647\u064e\u0627 \u0627\u0644\u0651\u064e\u0630\u0650\u064a\u0646\u064e \u0622\u0645\u064e\u0646\u064f\u0648\u0627 \u0627\u062f\u0652\u062e\u064f\u0644\u064f\u0648\u0627 \u0641\u0650\u064a \u0627\u0644\u0633\u0651\u0650\u0644\u0652\u0645\u0650 \u0643\u064e\u0627\u0641\u0651\u064e\u0629\u064b\n                                    <\/p>\n                                    <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                        <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                            \u201cO you who believe, enter into submission completely [and perfectly].\u201d\n                                        <\/p>\n                                        <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Qur\u2019an, Surah Baqarah 2:208, Saheeh International<\/p>\n                                    <\/div>\n                                <\/div>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    The command to enter into submission completely reflects the comprehensive character of Islam.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    Deen therefore concerns the human being as a whole, including what one believes, how one worships, how one conducts oneself, how one acquires knowledge, how one deals with others, and how one orders one's affairs.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 3: Religion as a Category -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-gray-400 rounded-full flex items-center justify-center text-gray-600 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-layer-group\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-gray-600 mb-2\">Religion As A Category<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    The word \u201creligion\u201d may appropriately describe traditions whose religious conception is fundamentally organised around a distinct religious sphere, particularly traditions shaped by separation between sacred and worldly life, ritual practice, or forms of religious withdrawal and monasticism.\n                                <\/p>\n                                <p class=\"font-david text-brand font-bold text-sm leading-relaxed mb-2\">\n                                    This category does not adequately describe Islam.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    Islam does not establish a monk-like separation between religious existence and ordinary human existence. Submission to Allah extends into the whole of life.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 4: Application -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand-parchment border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-compass\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-2\">Application<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    At Morality Central, the word \u201creligion\u201d may be used when referring to religions as a comparative or descriptive category, particularly when discussing systems whose conception of religious life is organised around belief, ritual, worship, or a distinct religious sphere.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    The term may therefore be used when discussing other religious traditions, their doctrines, practices, institutions, histories, or conceptions of religious life.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-4\">\n                                    When referring specifically to Islam, however, Morality Central will use <strong class=\"text-brand\">Deen<\/strong> or <strong class=\"text-brand\">Deen of Islam<\/strong> rather than \u201creligion,\u201d in order to preserve the Qur\u2019anic conception of Islam as a comprehensive order of submission to Allah.\n                                <\/p>\n                                <div class=\"bg-brand-parchmentDark border border-gray-300 p-4 rounded text-sm font-david text-brand mb-3 space-y-2\">\n                                    <div><strong class=\"font-mono text-xs text-brand-accent uppercase mr-2\">Religion<\/strong> \u2192 a descriptive category for religious systems<\/div>\n                                    <div><strong class=\"font-mono text-xs text-brand-accent uppercase mr-2\">Deen<\/strong> \u2192 the Qur\u2019anic conception of an order or way followed<\/div>\n                                    <div><strong class=\"font-mono text-xs text-brand-accent uppercase mr-2\">Deen of Islam<\/strong> \u2192 Allah\u2019s revealed Deen, Islam<\/div>\n                                <\/div>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    The use of \u201creligion\u201d is therefore contextual, while Deen of Islam remains the precise terminology for Islam.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 5: The Problem -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-red-600 border-2 border-white rounded-full flex items-center justify-center text-white z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-exclamation\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-red-600 mb-2\">The Problem of Calling Islam a Religion<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    Calling Islam a \u201creligion\u201d can appear linguistically harmless while carrying a deeper conceptual consequence. It can make Islam appear to be:\n                                <\/p>\n                                <div class=\"bg-red-50 border-l-2 border-red-600 p-2.5 mb-2 text-sm italic text-gray-800 font-david\">\n                                    one belief system among others, occupying one sphere of human life.\n                                <\/div>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    The Qur\u2019anic conception presents Islam as:\n                                <\/p>\n                                <div class=\"bg-brand-accent\/10 border-l-2 border-brand-accent p-2.5 mb-2 text-sm italic text-brand font-david\">\n                                    the Deen through which human life is ordered in submission to Allah.\n                                <\/div>\n                                <p class=\"font-david text-brand text-sm leading-relaxed font-bold\">\n                                    The issue is therefore not merely the choice of an English word. It is the worldview carried by the category itself.\n                                <\/p>\n                            <\/div>\n\n                            <!-- Phase 6: The Morality Central Stance -->\n                            <div class=\"relative pl-6 md:pl-8\">\n                                <div class=\"absolute -left-3 top-1 w-6 h-6 bg-brand border-2 border-brand-accent rounded-full flex items-center justify-center text-brand-accent z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-check\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-1 bg-brand-accent\/20 inline-block px-2 py-0.5 rounded\">The Morality Central Stance<\/h4>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    At Morality Central, Islam is referred to as the <strong class=\"text-brand\">Deen of Islam<\/strong> rather than as a religion.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed mb-2\">\n                                    The term \u201creligion\u201d may be used when discussing religious systems whose conception is centred upon a distinct religious sphere or upon forms of separation between religious and worldly existence.\n                                <\/p>\n                                <p class=\"font-david text-gray-700 text-sm leading-relaxed\">\n                                    For Islam, however, <strong class=\"text-brand\">Deen<\/strong> preserves the Qur\u2019anic conception of a comprehensive order of submission, obedience, obligation, conduct and accountability.\n                                <\/p>\n                            <\/div>\n                            \n                            <!-- Phase 7: Why We Reframe -->\n                            <div class=\"relative pl-6 md:pl-8 pt-2\">\n                                <div class=\"absolute -left-3 top-3 w-6 h-6 bg-brand-parchment border-2 border-brand\/50 rounded-full flex items-center justify-center text-brand\/70 z-10 text-[10px] shadow-sm\">\n                                    <i class=\"fa-solid fa-list\"><\/i>\n                                <\/div>\n                                <h4 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand mb-3\">Why We Reframe The Definition<\/h4>\n                                <ul class=\"space-y-3 font-david text-sm text-gray-700\">\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To preserve the Qur\u2019anic terminology:<\/strong> Allah identifies Islam as Deen, not as a category constructed around the modern conception of religion.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To prevent compartmentalisation:<\/strong> Islam is not confined to worship or private belief while other areas of life operate independently.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To preserve the comprehensive character of Islam:<\/strong> Deen encompasses the human being and the ordering of human life.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To distinguish Islam from religious systems:<\/strong> The category of religion may describe systems structured around a distinct religious sphere or separation between sacred and worldly life.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">To prevent an epistemological shift:<\/strong> Calling Islam a religion can introduce a framework in which revelation is placed within one compartment of human knowledge and life.<\/div>\n                                    <\/li>\n                                <\/ul>\n                            <\/div>\n\n                        <\/div>\n                    <\/div>\n                <\/article>\n\n                <!-- Entry 08: Deen -->\n                <article id=\"term-deen\" class=\"mb-16 md:mb-20 scroll-mt-28\">\n                    \n                    <header class=\"mb-6 border-b border-brand\/20 pb-4\">\n                        <div class=\"flex flex-wrap items-baseline gap-3 mb-1\">\n                            <h2 class=\"font-alegreya text-3xl sm:text-4xl font-extrabold text-brand tracking-tight\">\n                                Deen\n                            <\/h2>\n                            <span class=\"font-arabic text-xl sm:text-2xl text-brand-accent\">\u062f\u0650\u064a\u0646<\/span>\n                        <\/div>\n                        \n                        <div class=\"flex items-center gap-3 text-[11px] font-mono text-gray-500 uppercase tracking-widest\">\n                            <span class=\"bg-brand-parchmentDark px-2 py-0.5 rounded border border-gray-300 text-brand font-bold\">Verbal Noun<\/span>\n                            <span>\u2022<\/span>\n                            <span class=\"text-brand-accent font-bold\">Arabic Term<\/span>\n                        <\/div>\n                    <\/header>\n\n                    <!-- Literally -->\n                    <div class=\"mb-8\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-2\">Literally<\/h3>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-2\">\n                            Deen (\u062f\u0650\u064a\u0646) comes from the root <strong>\u062f \u064a \u0646<\/strong> and is a ma\u1e63dar (verbal noun). \n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-2\">\n                            The root conveys meanings of obedience, submission, obligation, prescribed way, that which is followed, debt, judgment and recompense. \n                        <\/p>\n                        <p class=\"font-alegreya text-lg sm:text-xl text-brand leading-relaxed font-bold border-l-4 border-brand-accent pl-4 py-1\">\n                            Together, these meanings convey an order to which one submits, which one follows and by which one is bound and ultimately recompensed.\n                        <\/p>\n                    <\/div>\n\n                    <!-- In the Qur'an -->\n                    <div class=\"mb-8\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-4\">In the Qur\u2019an<\/h3>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-2\">\n                            Deen can refer to the order, way or system that people follow. \n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-2\">\n                            In its Qur\u2019anic usage, its meaning is determined by context and can refer to the Deen revealed by Allah as well as systems or ways followed by people. \n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed\">\n                            A deen followed by people does not thereby become the Deen of Islam. It may conform to Islam or contradict it.\n                        <\/p>\n                    <\/div>\n\n                    <!-- The Deen of Islam -->\n                    <div class=\"mb-8\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-4\">The Deen of Islam<\/h3>\n                        \n                        <div class=\"bg-brand text-white rounded-lg p-5 sm:p-6 shadow-lg relative overflow-hidden mb-4\">\n                            <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                            <div class=\"flex items-center gap-2.5 mb-4 border-b border-white\/10 pb-3\">\n                                <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Evidence<\/h3>\n                                    <p class=\"font-david text-[11px] text-gray-400\">Qur\u2019an 3:19<\/p>\n                                <\/div>\n                            <\/div>\n                            <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                \u0625\u0650\u0646\u0651\u064e \u0627\u0644\u062f\u0651\u0650\u064a\u0646\u064e \u0639\u0650\u0646\u062f\u064e \u0627\u0644\u0644\u0651\u064e\u0647\u0650 \u0627\u0644\u0652\u0625\u0650\u0633\u0652\u0644\u064e\u0627\u0645\u064f\n                            <\/p>\n                            <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                    \u201cIndeed, the Deen in the sight of All\u0101h is Islam.\u201d\n                                <\/p>\n                                <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Saheeh International Translation<\/p>\n                            <\/div>\n                        <\/div>\n                        \n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-2\">\n                            <strong class=\"text-brand\">Deen of Islam<\/strong> precisely identifies Allah\u2019s Deen, the Deen revealed and recognised by Him. \n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed\">\n                            It distinguishes the revealed Deen from other systems, ways or orders that human beings may follow.\n                        <\/p>\n                    <\/div>\n\n                    <!-- Entering Completely -->\n                    <div class=\"mb-8\">\n                        <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-4\">Entering Completely<\/h3>\n                        \n                        <div class=\"bg-brand text-white rounded-lg p-5 sm:p-6 shadow-lg relative overflow-hidden mb-4\">\n                            <div class=\"absolute top-0 right-0 w-24 h-24 bg-brand-accent opacity-5 rounded-bl-full pointer-events-none\"><\/div>\n                            <div class=\"flex items-center gap-2.5 mb-4 border-b border-white\/10 pb-3\">\n                                <div class=\"w-7 h-7 rounded bg-brand-accent\/20 flex items-center justify-center text-brand-accent text-xs\">\n                                    <i class=\"fa-solid fa-book-quran\"><\/i>\n                                <\/div>\n                                <div>\n                                    <h3 class=\"font-mono text-[11px] uppercase tracking-widest text-brand-accent font-bold\">Evidence<\/h3>\n                                    <p class=\"font-david text-[11px] text-gray-400\">Surah Baqarah 2:208<\/p>\n                                <\/div>\n                            <\/div>\n                            <p dir=\"rtl\" class=\"font-arabic text-lg sm:text-2xl text-right leading-loose text-white py-2 break-words\">\n                                \u064a\u064e\u0627 \u0623\u064e\u064a\u0651\u064f\u0647\u064e\u0627 \u0627\u0644\u0651\u064e\u0630\u0650\u064a\u0646\u064e \u0622\u0645\u064e\u0646\u064f\u0648\u0627 \u0627\u062f\u0652\u062e\u064f\u0644\u064f\u0648\u0627 \u0641\u0650\u064a \u0627\u0644\u0633\u0651\u0650\u0644\u0652\u0645\u0650 \u0643\u064e\u0627\u0641\u0651\u064e\u0629\u064b\n                            <\/p>\n                            <div class=\"bg-brand-light\/60 p-3.5 rounded mt-3\">\n                                <p class=\"text-xs sm:text-sm italic text-gray-200 leading-relaxed font-david\">\n                                    \u201cO you who believe, enter into submission completely [and perfectly].\u201d\n                                <\/p>\n                                <p class=\"mt-2 font-bold font-mono text-[9px] text-brand-accent uppercase tracking-wider\">\u2014 Saheeh International Translation<\/p>\n                            <\/div>\n                        <\/div>\n                        \n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed mb-2\">\n                            The verse reflects the comprehensive nature of submission to Allah. \n                        <\/p>\n                        <p class=\"font-david text-sm sm:text-base text-gray-800 leading-relaxed\">\n                            The Deen of Islam concerns the human being as a whole and the ordering of life in submission to Allah. \n                        <\/p>\n                    <\/div>\n\n                    <!-- No Compulsion & Accountability -->\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n                        <div>\n                            <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-3\">No Compulsion in Deen<\/h3>\n                            <div class=\"bg-white border border-gray-200 rounded-lg p-4 shadow-sm h-full\">\n                                <p dir=\"rtl\" class=\"font-arabic text-xl text-brand text-right mb-2\">\n                                    \u0644\u064e\u0627 \u0625\u0650\u0643\u0652\u0631\u064e\u0627\u0647\u064e \u0641\u0650\u064a \u0627\u0644\u062f\u0651\u0650\u064a\u0646\u0650\n                                <\/p>\n                                <p class=\"text-xs italic text-gray-600 font-david mb-2\">\n                                    \u201cThere shall be no compulsion in [acceptance of] the Deen\u201d<br>\n                                    <span class=\"text-[9px] text-gray-400 font-mono mt-1 block\">\u2014 Qur\u2019an 2:256, Saheeh International<\/span>\n                                <\/p>\n                                <p class=\"font-david text-sm text-gray-800 leading-relaxed mt-3 border-t border-gray-100 pt-3\">\n                                    Entry into the Deen cannot be established through coercion. Submission requires conviction and sincerity.\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                        \n                        <div>\n                            <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-3\">Deen and Accountability<\/h3>\n                            <div class=\"bg-brand-parchmentDark border border-gray-300 rounded-lg p-4 shadow-sm h-full\">\n                                <p class=\"font-david text-sm text-gray-800 leading-relaxed mb-2\">\n                                    The root also carries the meanings of debt, judgment and recompense. \n                                <\/p>\n                                <p class=\"font-david text-sm text-gray-800 leading-relaxed mb-2\">\n                                    These meanings illuminate the relationship between obligation and accountability. \n                                <\/p>\n                                <p class=\"font-david text-sm text-gray-800 leading-relaxed font-bold text-brand mt-3 border-t border-brand-accent\/20 pt-3\">\n                                    The human being is bound by what is required and ultimately faces recompense according to conduct.\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Application & Why We Do Not Use Religion -->\n                    <div class=\"mb-6 space-y-6\">\n                        <div>\n                            <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-brand-accent mb-3\">Application<\/h3>\n                            <div class=\"bg-white border-l-4 border-brand-accent p-4 shadow-sm\">\n                                <ul class=\"list-none space-y-3 font-david text-sm text-gray-800\">\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">Deen<\/strong> may be used generally for a system, order or way that people follow.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div><strong class=\"text-brand\">Deen of Islam<\/strong> may be used when referring specifically to Allah\u2019s Deen, Islam.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div>A deen in the general sense may be consistent with Islam or contradictory to it. Its meaning must therefore be understood contextually.<\/div>\n                                    <\/li>\n                                    <li class=\"flex items-start\">\n                                        <i class=\"fa-solid fa-angle-right text-brand-accent mt-1 mr-2 text-xs\"><\/i>\n                                        <div>At Morality Central, Deen and Deen of Islam may both be used, with Deen of Islam providing greater precision when Allah\u2019s revealed Deen is intended.<\/div>\n                                    <\/li>\n                                <\/ul>\n                            <\/div>\n                        <\/div>\n\n                        <div>\n                            <h3 class=\"font-mono text-xs uppercase tracking-widest font-bold text-red-600 mb-3\">Why We Do Not Use \"Religion\" for Deen of Islam<\/h3>\n                            <div class=\"bg-red-50 border-l-4 border-red-600 p-4 shadow-sm\">\n                                <p class=\"font-david text-sm text-gray-800 leading-relaxed mb-2\">\n                                    \u201cReligion\u201d can confine Islam to a category of belief, worship and religious practice. \n                                <\/p>\n                                <p class=\"font-david text-sm text-gray-800 leading-relaxed mb-2\">\n                                    This can create a division between the religious and the worldly, placing education, ethics, law, economics and social life outside the framework of Islam. \n                                <\/p>\n                                <p class=\"font-david text-sm text-brand font-bold leading-relaxed mb-2\">\n                                    The Deen of Islam is a comprehensive order of submission, extending across human life. \n                                <\/p>\n                                <p class=\"font-david text-sm text-gray-800 leading-relaxed italic\">\n                                    Calling Islam merely a \u201creligion\u201d can therefore introduce a conceptual framework that compartmentalises what the Qur\u2019an presents comprehensively.\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/article>\n\n                <section class=\"mt-10 pt-8 border-t-2 border-brand-accent\/30 border-dashed\">\n                    <div class=\"text-center mb-6\">\n                        <span class=\"font-mono text-[9px] text-brand-accent uppercase tracking-widest font-bold\">Synthesis<\/span>\n                        <h3 class=\"font-alegreya text-xl font-bold text-brand mt-0.5\">The Foundational Distinction<\/h3>\n                    <\/div>\n                    \n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n                        <div class=\"bg-white rounded-lg p-4 border border-gray-200 shadow-sm text-center group\">\n                            <div class=\"w-8 h-8 mx-auto bg-brand-parchmentDark rounded-full border border-brand-accent\/30 flex items-center justify-center text-brand mb-2 group-hover:bg-brand group-hover:text-brand-accent transition-colors\">\n                                <i class=\"fa-solid fa-arrow-down text-xs\"><\/i>\n                            <\/div>\n                            <h4 class=\"font-alegreya text-lg font-bold text-brand mb-0.5\">Fitrah<\/h4>\n                            <p class=\"font-david text-gray-600 text-xs sm:text-sm\">What Allah created us <strong class=\"text-brand font-bold underline decoration-brand-accent decoration-2 underline-offset-2\">upon<\/strong><\/p>\n                        <\/div>\n                        \n                        <div class=\"bg-white rounded-lg p-4 border border-gray-200 shadow-sm text-center group\">\n                            <div class=\"w-8 h-8 mx-auto bg-brand-parchmentDark rounded-full border border-brand-accent\/30 flex items-center justify-center text-brand mb-2 group-hover:bg-brand group-hover:text-brand-accent transition-colors\">\n                                <i class=\"fa-solid fa-arrow-right text-xs\"><\/i>\n                            <\/div>\n                            <h4 class=\"font-alegreya text-lg font-bold text-brand mb-0.5\">Purpose<\/h4>\n                            <p class=\"font-david text-gray-600 text-xs sm:text-sm\">What Allah created us <strong class=\"text-brand font-bold underline decoration-brand-accent decoration-2 underline-offset-2\">for<\/strong><\/p>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- Footer \/ Disclaimer -->\n                <footer class=\"mt-16 text-center pb-12\">\n                    \n                    <!-- Foundational Basis Box -->\n                    <div class=\"bg-brand text-white p-5 sm:p-6 rounded-lg shadow-lg relative mb-10 max-w-2xl mx-auto border border-brand-accent\/20\">\n                        <div class=\"absolute -top-2.5 left-1\/2 transform -translate-x-1\/2 bg-brand-accent text-brand px-3 py-0.5 text-[10px] font-mono rounded font-bold uppercase tracking-widest whitespace-nowrap border border-brand shadow-sm\">\n                            Foundational Basis\n                        <\/div>\n                        <p dir=\"rtl\" class=\"font-arabic text-xl sm:text-2xl text-right leading-loose text-white mb-4 mt-2\">\n                            \u0623\u064e\u0641\u064e\u062a\u064e\u0637\u0652\u0645\u064e\u0639\u064f\u0648\u0646\u064e \u0623\u064e\u0646 \u064a\u064f\u0624\u0652\u0645\u0650\u0646\u064f\u0648\u0627\u06df \u0644\u064e\u0643\u064f\u0645\u0652 \u0648\u064e\u0642\u064e\u062f\u0652 \u0643\u064e\u0627\u0646\u064e \u0641\u064e\u0631\u0650\u064a\u0642\u064c\u06ed \u0645\u0650\u0651\u0646\u0652\u0647\u064f\u0645\u0652 \u064a\u064e\u0633\u0652\u0645\u064e\u0639\u064f\u0648\u0646\u064e \u0643\u064e\u0644\u064e\u0640\u0670\u0645\u064e \u0671\u0644\u0644\u064e\u0651\u0647\u0650 \u062b\u064f\u0645\u064e\u0651 \u064a\u064f\u062d\u064e\u0631\u0650\u0651\u0641\u064f\u0648\u0646\u064e\u0647\u064f\u06e5 \u0645\u0650\u0646\u06e2 \u0628\u064e\u0639\u0652\u062f\u0650 \u0645\u064e\u0627 \u0639\u064e\u0642\u064e\u0644\u064f\u0648\u0647\u064f \u0648\u064e\u0647\u064f\u0645\u0652 \u064a\u064e\u0639\u0652\u0644\u064e\u0645\u064f\u0648\u0646\u064e\n                        <\/p>\n                        <div class=\"bg-brand-light\/60 p-4 rounded border border-white\/5 text-left\">\n                            <p class=\"font-david text-sm sm:text-base italic text-gray-200 leading-relaxed mb-2\">\n                                \"Do you \u02f9believers still\u02fa expect them to be true to you, though a group of them would hear the word of Allah then knowingly corrupt it after understanding it?\"\n                            <\/p>\n                            <p class=\"font-bold font-mono text-[10px] text-brand-accent uppercase tracking-wider\">\n                                \u2014 Qur'an, Surah Baqarah: 75, Dr. Mustafa Khattab, The Clear Quran\n                            <\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Disclaimer and Scope -->\n                    <div class=\"inline-block p-1 border-t border-b border-brand-accent\/40 mb-6\">\n                        <div class=\"font-alegreya text-lg font-extrabold tracking-tight text-brand px-4 uppercase tracking-widest\">Disclaimer and Scope<\/div>\n                    <\/div>\n                    \n                    <div class=\"text-gray-700 text-sm sm:text-base leading-relaxed font-david max-w-3xl mx-auto text-left space-y-4 bg-white p-6 sm:p-8 rounded-lg border border-gray-200 shadow-sm\">\n                        <p>\n                            MC Dictionary uncovers the worldviews hidden within everyday words. It exposes mistranslations, ambiguous and incomplete renderings, and inherited influences embedded within terminology. Such terminology can carry entire worldviews, shaping how one understands the world and its reality, and ultimately influencing how Islam is understood.\n                        <\/p>\n                        <p>\n                            The MC Dictionary investigates Arabic and English terms, bringing their meanings back into focus through an Islamic grounding, in accordance with the Qur\u2019an and Sunnah. It presents general meanings and definitions drawn from established references such as Oxford, Encyclopaedia Britannica, and Merriam-Webster, using them to demonstrate the epistemic problem within the terminology.\n                        <\/p>\n                    <\/div>\n\n                <\/footer>\n\n            <\/div>\n        <\/main>\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            \n            \/\/ --- Mobile Menu Toggle ---\n            const menuBtn = document.getElementById('mobile-menu-btn');\n            const mobileIndex = document.getElementById('mobile-index');\n            const mobileIcon = menuBtn.querySelector('i');\n            \n            menuBtn.addEventListener('click', () => {\n                mobileIndex.classList.toggle('hidden');\n                mobileIndex.classList.toggle('flex');\n                \n                if (mobileIndex.classList.contains('hidden')) {\n                    mobileIcon.classList.remove('fa-xmark');\n                    mobileIcon.classList.add('fa-bars');\n                } else {\n                    mobileIcon.classList.remove('fa-bars');\n                    mobileIcon.classList.add('fa-xmark');\n                }\n            });\n\n            document.querySelectorAll('.mobile-index-item').forEach(item => {\n                item.addEventListener('click', () => {\n                    mobileIndex.classList.add('hidden');\n                    mobileIndex.classList.remove('flex');\n                    mobileIcon.classList.remove('fa-xmark');\n                    mobileIcon.classList.add('fa-bars');\n                });\n            });\n\n\n            \/\/ --- Desktop Sidebar Toggle ---\n            const sidebar = document.getElementById('desktop-sidebar');\n            const toggleBtn = document.getElementById('sidebar-toggle');\n            const sidebarContent = document.querySelector('.sidebar-content');\n            const collapsedIcons = document.getElementById('collapsed-icons');\n\n            toggleBtn.addEventListener('click', () => {\n                sidebar.classList.toggle('collapsed');\n                \n                if (sidebar.classList.contains('collapsed')) {\n                    setTimeout(() => {\n                        collapsedIcons.classList.remove('hidden');\n                        collapsedIcons.classList.add('flex');\n                    }, 150);\n                } else {\n                    collapsedIcons.classList.add('hidden');\n                    collapsedIcons.classList.remove('flex');\n                    sidebarContent.style.display = 'flex';\n                }\n            });\n\n\n            \/\/ Term Labels Dictionary (Updated to include new terms)\n            const termLabels = {\n                'term-fitrah': '01. Fitrah',\n                'term-purpose': '02. Purpose',\n                'term-spirituality': '03. Spirituality',\n                'term-tradition': '04. Tradition',\n                'term-ethics': '05. Ethics',\n                'term-aql': '06. \u02bfAql',\n                'term-religion': '07. Religion',\n                'term-deen': '08. Deen'\n            };\n\n            \/\/ --- Intersection Observer for Active State Highlight & Sticky Indicator Update ---\n            const observerOptions = {\n                root: null,\n                rootMargin: '-15% 0px -55% 0px', \n                threshold: 0\n            };\n\n            const observer = new IntersectionObserver((entries) => {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        const id = entry.target.getAttribute('id');\n                        \n                        \/\/ Update Sticky Top Indicator & Dropdown\n                        const stickyLabel = document.getElementById('sticky-current-term');\n                        const quickSelector = document.getElementById('quick-term-selector');\n                        if (stickyLabel && termLabels[id]) {\n                            stickyLabel.innerText = termLabels[id];\n                        }\n                        if (quickSelector && termLabels[id]) {\n                            quickSelector.value = `#${id}`;\n                        }\n\n                        \/\/ Handle Desktop Links\n                        document.querySelectorAll('.index-item').forEach(link => {\n                            link.classList.remove('active');\n                            link.classList.add('border-transparent');\n                        });\n\n                        const activeLink = document.querySelector(`.index-item[href=\"#${id}\"]`);\n                        if (activeLink) {\n                            activeLink.classList.add('active');\n                            activeLink.classList.remove('border-transparent');\n                        }\n\n                        \/\/ Handle Collapsed Sidebar Icon States\n                        document.querySelectorAll('#collapsed-icons a').forEach(iconLink => {\n                            iconLink.classList.remove('collapsed-active');\n                        });\n                        const activeCollapsedLink = document.querySelector(`#collapsed-icons a[href=\"#${id}\"]`);\n                        if (activeCollapsedLink) {\n                            activeCollapsedLink.classList.add('collapsed-active');\n                        }\n\n                        \/\/ Handle Mobile Links\n                        document.querySelectorAll('.mobile-index-item').forEach(link => {\n                             link.classList.remove('mobile-active');\n                        });\n                        \n                        const activeMobileLink = document.querySelector(`.mobile-index-item[href=\"#${id}\"]`);\n                        if (activeMobileLink) {\n                            activeMobileLink.classList.add('mobile-active');\n                        }\n                    }\n                });\n            }, observerOptions);\n\n            document.querySelectorAll('article[id^=\"term-\"]').forEach((article) => {\n                observer.observe(article);\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\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\t\t<\/div>\n\t\t\n","protected":false},"excerpt":{"rendered":"<p>MC Lexicon | Morality Central Scholastic Portal MC Dictionary Directory Index 01. Fitrah 02. Purpose 03. Spirituality 04. Tradition 05. Ethics 06. \u02bfAql 07. Religion 08. Deen Epistemic Framework Dictionary Uncovering the worldviews hidden within the everyday words we use. Revisiting epistemically grounded terms in accordance with the Qur\u2019an and Sunnah. Index Directory 01 Fitrah [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-5095","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/5095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moralitycentral.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5095"}],"version-history":[{"count":29,"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/5095\/revisions"}],"predecessor-version":[{"id":5153,"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/5095\/revisions\/5153"}],"wp:attachment":[{"href":"https:\/\/moralitycentral.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}