MC Sessions | Morality Central Scholastic Portal<\/title>\n \n \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 \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \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 \/* Strict global layout guardrails to prevent any horizontal overflow on any screen size *\/\n html, body {\n max-width: 100% !important;\n overflow-x: hidden !important;\n margin: 0;\n padding: 0;\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 grid background suggesting scholastic engineering\/structure *\/\n .academic-grid {\n background-color: #FDFBF7;\n background-image: radial-gradient(rgba(7, 14, 26, 0.05) 1px, transparent 1px);\n background-size: 24px 24px;\n }\n\n \/* Custom scrollbar matching editorial palette *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #FDFBF7;\n }\n ::-webkit-scrollbar-thumb {\n background: #C5A880;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #A38458;\n }\n\n \/* Celebration canvas positioning *\/\n #celebration-canvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 10;\n }\n\n \/* Enforce robust word wrap globally so long terms can never break layout scaling *\/\n #mc-elementor-wrapper p, \n #mc-elementor-wrapper blockquote, \n #mc-elementor-wrapper span, \n #mc-elementor-wrapper h1, \n #mc-elementor-wrapper h2, \n #mc-elementor-wrapper h3,\n #mc-elementor-wrapper h4,\n #mc-elementor-wrapper li {\n word-wrap: break-word !important;\n overflow-wrap: break-word !important;\n word-break: break-word !important;\n }\n\n \/* Responsive Grid enforcement for Pillar Tabs (Solves 2-column squishing on extra-small mobile) *\/\n #mc-elementor-wrapper .pillar-tabs-grid {\n display: grid !important;\n grid-template-columns: repeat(1, minmax(0, 1fr)) !important; \/* 1 Column on tiny screens *\/\n gap: 0.5rem !important; \/* 8px equivalent *\/\n margin-bottom: 1.5rem !important; \/* 24px equivalent *\/\n }\n @media (min-width: 480px) {\n #mc-elementor-wrapper .pillar-tabs-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important; \/* 2 Columns on small viewports *\/\n }\n }\n @media (min-width: 768px) {\n #mc-elementor-wrapper .pillar-tabs-grid {\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important; \/* 4 Columns on desktop *\/\n }\n }\n\n \/* High specificity PDF Download Button enforcement *\/\n #mc-elementor-wrapper .pdf-download-btn {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n background-color: #070E1A !important; \/* Deep Midnight Navy *\/\n color: #FFFFFF !important;\n font-family: \"Alegreya\", serif !important;\n font-weight: 700 !important;\n text-transform: none !important;\n padding: 0.75rem 1.5rem !important; \/* py-3 px-6 equivalent *\/\n border-radius: 0.25rem !important;\n border: 1px solid transparent !important;\n text-decoration: none !important;\n box-shadow: 0 10px 15px -3px rgba(197, 168, 128, 0.1), 0 4px 6px -4px rgba(197, 168, 128, 0.1) !important;\n transition: all 0.2s ease-in-out !important;\n text-align: center !important;\n width: 100% !important; \/* Default full-width on mobile to avoid row squishing *\/\n }\n @media (min-width: 640px) {\n #mc-elementor-wrapper .pdf-download-btn {\n flex: 1 1 0% !important; \/* Becomes flex item only on tablet and up *\/\n width: auto !important;\n }\n }\n #mc-elementor-wrapper .pdf-download-btn:hover {\n background-color: #13213c !important; \/* brand-light *\/\n border-color: #C5A880 !important; \/* brand-accent *\/\n color: #C5A880 !important;\n }\n\n \/* High specificity Hero Main H1 Heading enforcement with fluid text resizing *\/\n #mc-elementor-wrapper h1.mc-sessions-heading {\n font-family: \"Alegreya\", serif !important;\n font-size: 2.5rem !important; \/* Scaled down for mobile to avoid text overflow *\/\n line-height: 1.15 !important;\n font-weight: 800 !important;\n margin-top: 0 !important;\n margin-bottom: 1.5rem !important;\n text-align: center !important;\n display: block !important;\n background: linear-gradient(to right, #ffffff, #C5A880, #e2e8f0) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n }\n @media (min-width: 640px) {\n #mc-elementor-wrapper h1.mc-sessions-heading {\n font-size: 3.5rem !important; \/* Scaled up for tablet *\/\n }\n }\n @media (min-width: 768px) {\n #mc-elementor-wrapper h1.mc-sessions-heading {\n font-size: 4.5rem !important; \/* Scaled up for desktop *\/\n }\n }\n\n \/* Enforce exact hover backgrounds for pillar tabs to override any dark\/black hover bleed from Elementor *\/\n #mc-elementor-wrapper .pillar-tab-btn {\n transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease !important;\n }\n #mc-elementor-wrapper .pillar-tab-btn:hover {\n color: #070E1A !important;\n border-color: #C5A880 !important;\n }\n \/* When the tab is active (bg-brand) *\/\n #mc-elementor-wrapper .pillar-tab-btn.bg-brand:hover {\n background-color: #070E1A !important; \/* Maintain original clean dark background *\/\n color: #C5A880 !important;\n border-color: #C5A880 !important;\n }\n \/* When the tab is inactive (bg-white) *\/\n #mc-elementor-wrapper .pillar-tab-btn.bg-white:hover {\n background-color: #F5EFEB !important; \/* Transition to soft parchment cream hover, never black *\/\n color: #070E1A !important;\n border-color: #C5A880 !important;\n }\n\n \/* Fix quiz button text overflowing on narrow screens (forces text wrapping and correct flex alignments) *\/\n #mc-elementor-wrapper #assessment-options button {\n white-space: normal !important;\n word-break: break-word !important;\n overflow-wrap: break-word !important;\n display: flex !important;\n align-items: flex-start !important; \/* Align option indexes with the top line of text *\/\n text-align: left !important;\n height: auto !important;\n }\n <\/style>\n<\/head>\n<body class=\"bg-brand-parchment text-brand font-david antialiased selection:bg-brand-accent selection:text-brand academic-grid\">\n\n \n <div id=\"toast-container\" class=\"fixed bottom-6 right-6 z-50 flex flex-col gap-2 pointer-events-none max-w-sm w-full px-4\"><\/div>\n\n \n <div id=\"mc-elementor-wrapper\" class=\"w-full min-h-screen flex flex-col justify-between overflow-x-hidden\">\n \n <header class=\"relative bg-brand text-white py-16 md:py-24 px-4 md:px-8 text-center border-b border-brand-accent\/30 overflow-hidden\">\n \n <div class=\"absolute inset-0 opacity-5 pointer-events-none mix-blend-overlay\">\n <div class=\"w-full h-full bg-[radial-gradient(#C5A880_1px,transparent_1px)] [background-size:16px_16px]\"><\/div>\n <\/div>\n \n <div class=\"max-w-4xl mx-auto relative z-10\">\n <span class=\"text-brand-accent font-mono text-xs uppercase tracking-widest block mb-3 border-b border-brand-accent\/20 pb-2 max-w-xs mx-auto\">Colloquia & Epistemic Discourse<\/span>\n <h1 role=\"heading\" aria-level=\"1\" class=\"mc-sessions-heading font-alegreya text-5xl md:text-7xl font-extrabold mb-6 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-white via-brand-accent to-gray-200\">\n MC Sessions\n <\/h1>\n <p class=\"font-david text-base md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed italic px-2\">\n \"Critical discourses, roundtable dialogues, and analytical presentations evaluating contemporary social, ideological, and political issues through an uncompromised Islamic epistemological framework.\"\n <\/p>\n \n <div class=\"mt-8 flex flex-wrap justify-center gap-3 text-xs font-mono\">\n <span class=\"bg-brand-light\/80 border border-brand-accent\/30 text-brand-accent px-3 py-1.5 rounded\"><i class=\"fa-solid fa-graduation-cap mr-1.5\"><\/i> Orthodox Methodology<\/span>\n <span class=\"bg-brand-light\/80 border border-brand-accent\/30 text-brand-accent px-3 py-1.5 rounded\"><i class=\"fa-solid fa-balance-scale mr-1.5\"><\/i> Epistemic Realism<\/span>\n <span class=\"bg-brand-light\/80 border border-brand-accent\/30 text-brand-accent px-3 py-1.5 rounded\"><i class=\"fa-solid fa-circle-nodes mr-1.5\"><\/i> Live Circle<\/span>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"max-w-5xl mx-auto px-4 py-8 md:py-16 flex-grow w-full\">\n\n \n <section class=\"mb-12 md:mb-20\">\n <div class=\"bg-brand text-white rounded-xl overflow-hidden shadow-2xl border border-brand-accent\/30 grid grid-cols-1 lg:grid-cols-12 relative w-full\">\n \n \n <div class=\"p-4 sm:p-6 md:p-8 lg:col-span-5 bg-gradient-to-br from-brand-light to-brand flex flex-col justify-between border-b lg:border-b-0 lg:border-r border-brand-accent\/20\">\n <div>\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-brand-accent text-sm font-mono\"><i class=\"fa-solid fa-calendar mr-1\"><\/i> 09 May 2026<\/span>\n <\/div>\n \n <h2 role=\"heading\" aria-level=\"2\" class=\"font-alegreya text-3xl md:text-4xl font-extrabold text-white mb-3 leading-tight tracking-tight\">\n <span class=\"text-brand-accent block text-xs font-mono uppercase tracking-widest mb-3 font-bold bg-brand-accent\/20 border border-brand-accent\/40 px-3 py-1.5 rounded inline-block shadow-md\">Session 01<\/span>\n <span class=\"block text-2xl md:text-3xl text-white font-extrabold mt-1\">The Awareness Paradox<\/span>\n <\/h2>\n <p class=\"text-brand-accent text-sm md:text-base italic mb-6 font-alegreya\">\n Epistemological Distortions and Defeatism in Muslim Identity Formation.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"p-4 sm:p-6 md:p-10 lg:col-span-7 bg-white text-brand flex flex-col justify-between\">\n <div>\n <div class=\"flex items-center space-x-2 text-xs font-mono uppercase text-brand-accent font-bold tracking-wider mb-2\">\n <i class=\"fa-solid fa-bookmark\"><\/i>\n <span>Essential Thesis<\/span>\n <\/div>\n <blockquote class=\"text-gray-800 font-david text-base md:text-lg mb-6 leading-relaxed border-l-2 border-brand-accent pl-4 pr-1 italic\">\n \"While the urge to protest oppression springs from eeman, unguided reactions inside secular media landscapes produce severe unintended consequences. By adopting secular vocabularies and chasing public validation, we systematically hollow out the theological core of Islamic principles, unknowingly breeding collective despair instead of anchoring ourselves in Divine trust.\"\n <\/blockquote>\n\n <div class=\"border-t border-gray-150 pt-5\">\n <h4 class=\"font-alegreya font-bold text-sm text-gray-500 uppercase tracking-wider mb-3 font-bold\">Core Inquiries Explored<\/h4>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-gray-700\">\n <div class=\"flex items-start\">\n <span class=\"text-brand-accent mr-2 mt-0.5\"><i class=\"fa-solid fa-feather\"><\/i><\/span>\n <span>How linguistic colonization subverts foundational Quranic vocabulary.<\/span>\n <\/div>\n <div class=\"flex items-start\">\n <span class=\"text-brand-accent mr-2 mt-0.5\"><i class=\"fa-solid fa-eye-slash\"><\/i><\/span>\n <span>Foucault's Panopticon: Seeking digital visibility vs. seeking Allah's approval.<\/span>\n <\/div>\n <div class=\"flex items-start\">\n <span class=\"text-brand-accent mr-2 mt-0.5\"><i class=\"fa-solid fa-shuffle\"><\/i><\/span>\n <span>Separating structural theological compromise from geopolitical strategy.<\/span>\n <\/div>\n <div class=\"flex items-start\">\n <span class=\"text-brand-accent mr-2 mt-0.5\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/span>\n <span>The Surah Al-Burooj protocol: Curbing the toxic feedback loop of chronic defeatism.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-8 pt-6 border-t border-gray-150 flex flex-col sm:flex-row gap-4\">\n <a href=\"https:\/\/moralitycentral.com\/wp-content\/uploads\/2026\/06\/Panel-Discussion_Awareness-Paradox.pdf\" target=\"_blank\" class=\"pdf-download-btn flex-1 text-center bg-brand text-white font-bold font-alegreya py-3 px-6 rounded hover:bg-brand-light transition-all text-sm md:text-base border border-transparent shadow-lg hover:shadow-brand-accent\/10 hover:border-brand-accent flex items-center justify-center space-x-2\">\n <i class=\"fa-solid fa-file-pdf\"><\/i>\n <span>Download Session PDF<\/span>\n <\/a>\n <a href=\"#interactive-pillars\" class=\"w-full sm:w-auto text-center bg-gray-100 hover:bg-gray-200 text-brand font-bold font-alegreya py-3 px-6 rounded transition-all text-sm md:text-base border border-gray-200 flex items-center justify-center space-x-2\">\n <span>Examine Pillars<\/span>\n <i class=\"fa-solid fa-arrow-down\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"interactive-pillars\" class=\"mb-12 md:mb-20 w-full\">\n <div class=\"border-b border-brand-accent\/30 pb-4 mb-8 flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4\">\n <div>\n <span class=\"text-brand-accent font-mono text-xs uppercase tracking-widest block mb-1\">Systematic Breakdown<\/span>\n <h2 role=\"heading\" aria-level=\"2\" class=\"font-alegreya text-3xl md:text-4xl font-bold text-brand\">\n Core Epistemological Pillars\n <\/h2>\n <\/div>\n <span class=\"text-gray-500 text-xs font-mono\"><i class=\"fa-solid fa-hand-pointer mr-1\"><\/i> Click a pillar tab to review details<\/span>\n <\/div>\n\n \n <div class=\"pillar-tabs-grid gap-2 mb-6 w-full\">\n <button onclick=\"selectPillar(1)\" id=\"pill-btn-1\" class=\"pillar-tab-btn p-3 rounded border text-left transition-colors duration-75 focus:outline-none bg-brand border-brand-accent\/50 text-brand-accent font-alegreya font-bold text-sm flex items-center space-x-2 min-w-0\">\n <span class=\"bg-brand-accent text-brand rounded w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs font-mono font-bold\">01<\/span>\n <span class=\"truncate flex-1\">Linguistic Overlap<\/span>\n <\/button>\n <button onclick=\"selectPillar(2)\" id=\"pill-btn-2\" class=\"pillar-tab-btn p-3 rounded border text-left transition-colors duration-75 focus:outline-none bg-white border-gray-300 text-gray-500 font-alegreya font-bold text-sm flex items-center space-x-2 hover:bg-gray-100 min-w-0\">\n <span class=\"bg-gray-100 border border-gray-300 text-brand rounded w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs font-mono font-bold\">02<\/span>\n <span class=\"truncate flex-1\">Panopticism Trap<\/span>\n <\/button>\n <button onclick=\"selectPillar(3)\" id=\"pill-btn-3\" class=\"pillar-tab-btn p-3 rounded border text-left transition-colors duration-75 focus:outline-none bg-white border-gray-300 text-gray-500 font-alegreya font-bold text-sm flex items-center space-x-2 hover:bg-gray-100 min-w-0\">\n <span class=\"bg-gray-100 border border-gray-300 text-brand rounded w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs font-mono font-bold\">03<\/span>\n <span class=\"truncate flex-1\">Hudaybiyyah Paradigm<\/span>\n <\/button>\n <button onclick=\"selectPillar(4)\" id=\"pill-btn-4\" class=\"pillar-tab-btn p-3 rounded border text-left transition-colors duration-75 focus:outline-none bg-white border-gray-300 text-gray-500 font-alegreya font-bold text-sm flex items-center space-x-2 hover:bg-gray-100 min-w-0\">\n <span class=\"bg-gray-100 border border-gray-300 text-brand rounded w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs font-mono font-bold\">04<\/span>\n <span class=\"truncate flex-1\">Al-Burooj Model<\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"relative bg-white rounded-xl p-4 sm:p-6 md:p-8 border border-brand-accent\/40 shadow-xl w-full\">\n \n \n <div class=\"absolute top-4 right-4 text-brand-accent\/10 text-6xl sm:text-8xl font-mono select-none pointer-events-none\" id=\"pillar-bg-num\">\n 01\n <\/div>\n\n \n <div id=\"pillar-content-1\" class=\"pillar-panel space-y-6 w-full\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-xs font-mono uppercase bg-brand-accent\/20 px-2.5 py-1 text-brand-accent rounded border border-brand-accent\/30 font-bold\">Pillar 01<\/span>\n <span class=\"text-gray-500 font-mono text-xs\">Conceptual Integrity<\/span>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl md:text-3xl font-bold text-brand tracking-tight\">\n Linguistic Overlap & Conceptual Creep\n <\/h3>\n <p class=\"text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed\">\n Islamic terminologies must be vigorously and uncompromisedly upheld. Secular frameworks contain deeply embedded assumptions that gradually distort and eventually replace native Islamic concepts. Arguing strictly from secular humanistic frameworks turns transcendent trials into localized, secularized grievances\u2014causing the visible form of the religion to remain as a tool for public activism, while its divine, transcendent core completely evaporates.\n <\/p>\n \n <div class=\"bg-brand text-white rounded p-4 sm:p-5 border-l-4 border-brand-accent space-y-3 shadow-inner w-full\">\n <div class=\"flex justify-between items-center flex-wrap gap-2\">\n <span class=\"text-brand-accent text-xs font-mono uppercase tracking-wider font-bold\"><i class=\"fa-solid fa-scroll mr-1\"><\/i> Textual Foundation<\/span>\n <span class=\"font-arabic text-base sm:text-lg text-brand-accent\/70\">\u0633\u064f\u0648\u0631\u064e\u0629 \u0627\u0644\u0646\u0650\u0651\u0633\u064e\u0627\u0621<\/span>\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 \u0645\u0650\u0651\u0646\u064e \u0627\u0644\u064e\u0651\u0630\u0650\u064a\u0646\u064e \u0647\u064e\u0627\u062f\u064f\u0648\u0627 \u064a\u064f\u062d\u064e\u0631\u0650\u0651\u0641\u064f\u0648\u0646\u064e \u0627\u0644\u0652\u0643\u064e\u0644\u0650\u0645\u064e \u0639\u064e\u0646 \u0645\u064e\u0651\u0648\u064e\u0627\u0636\u0650\u0639\u0650\u0647\u0650 \u0648\u064e\u064a\u064e\u0642\u064f\u0648\u0644\u064f\u0648\u0646\u064e \u0633\u064e\u0645\u0650\u0639\u0652\u0646\u064e\u0627 \u0648\u064e\u0639\u064e\u0635\u064e\u064a\u0652\u0646\u064e\u0627 \u0648\u064e\u0627\u0633\u0652\u0645\u064e\u0639\u0652 \u063a\u064e\u064a\u0652\u0631\u064e \u0645\u064f\u0633\u0652\u0645\u064e\u0639\u064d \u0648\u064e\u0631\u064e\u0627\u0639\u0650\u0646\u064e\u0627 \u0644\u064e\u064a\u064b\u0651\u0627 \u0628\u0650\u0623\u064e\u0644\u0652\u0633\u0650\u0646\u064e\u062a\u0650\u0647\u0650\u0645\u0652 \u0648\u064e\u0637\u064e\u0639\u0652\u0646\u064b\u0627 \u0641\u0650\u064a \u0627\u0644\u062f\u0650\u0651\u064a\u0646\u0650\n <\/p>\n <p class=\"text-xs italic text-gray-300 leading-relaxed border-t border-gray-800 pt-3\">\n \"Among the Jews are those who distort words from their [proper] places... twisting their tongues and defaming the religion...\" \n <span class=\"block mt-1 font-bold font-mono text-[10px] text-brand-accent\">\u2014 Qur'an, Surah An-Nisa: 46<\/span>\n <\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"pillar-content-2\" class=\"pillar-panel hidden space-y-6 w-full\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-xs font-mono uppercase bg-brand-accent\/20 px-2.5 py-1 text-brand-accent rounded border border-brand-accent\/30 font-bold\">Pillar 02<\/span>\n <span class=\"text-gray-500 font-mono text-xs\">Social Legitimacy Loop<\/span>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl md:text-3xl font-bold text-brand tracking-tight\">\n The Trap of Representation & 'Panopticism'\n <\/h3>\n <p class=\"text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed\">\n Modern digital landscapes systematically condition Muslims to define their ultimate identity through superficial visibility, shared grievance, and social legitimacy rather than direct submission (<i>'Ubudiyyah<\/i>) to Allah. Relying on Michel Foucault's theory of <strong>panopticism<\/strong>, we analyze how a community under constant external observation unconsciously alters its internal public behavior\u2014gradually seeking moral justification through human validation rather than divine verdict.\n <\/p>\n \n <div class=\"bg-brand text-white rounded p-4 sm:p-5 border-l-4 border-brand-accent space-y-3 shadow-inner w-full\">\n <div class=\"flex justify-between items-center flex-wrap gap-2\">\n <span class=\"text-brand-accent text-xs font-mono uppercase tracking-wider font-bold\"><i class=\"fa-solid fa-scroll mr-1\"><\/i> Textual Foundation<\/span>\n <span class=\"font-arabic text-base sm:text-lg text-brand-accent\/70\">\u0633\u064f\u0648\u0631\u064e\u0629 \u0627\u0644\u0646\u0650\u0651\u0633\u064e\u0627\u0621<\/span>\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\u064a\u064e\u0628\u0652\u062a\u064e\u063a\u064f\u0648\u0646\u064e \u0639\u0650\u0646\u062f\u064e\u0647\u064f\u0645\u064f \u0627\u0644\u0652\u0639\u0650\u0632\u064e\u0651\u0629\u064e \u0641\u064e\u0625\u0650\u0646\u064e\u0651 \u0627\u0644\u0652\u0639\u0650\u0632\u064e\u0651\u0629\u064e \u0644\u0650\u0644\u064e\u0651\u0647\u0650 \u062c\u064e\u0645\u0650\u064a\u0639\u064b\u0627\n <\/p>\n <p class=\"text-xs italic text-gray-300 leading-relaxed border-t border-gray-800 pt-3\">\n \"Do they seek with them honor [through power and validation]? But indeed, honor belongs to Allah entirely.\" \n <span class=\"block mt-1 font-bold font-mono text-[10px] text-brand-accent\">\u2014 Qur'an, Surah An-Nisa: 139<\/span>\n <\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"pillar-content-3\" class=\"pillar-panel hidden space-y-6 w-full\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-xs font-mono uppercase bg-brand-accent\/20 px-2.5 py-1 text-brand-accent rounded border border-brand-accent\/30 font-bold\">Pillar 03<\/span>\n <span class=\"text-gray-500 font-mono text-xs\">Prophetic Geopolitics<\/span>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl md:text-3xl font-bold text-brand tracking-tight\">\n Hudaybiyyah vs. Structural Compromise\n <\/h3>\n <p class=\"text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed\">\n Modernist calls for systemic theological dilution frequently and falsely weaponize the Treaty of Hudaybiyyah. True Prophetic strategy reflected temporary, tactical, physical concession\u2014never institutional structural compromise on non-negotiable Islamic creedal values. The historical handling of Abu Jandal (R.A.) demonstrates that acute individual trials require disciplined background institutional capability, not transforming collective grief into public outrage and performative media spectacles.\n <\/p>\n \n <div class=\"bg-brand text-white rounded p-4 sm:p-5 border-l-4 border-brand-accent space-y-3 shadow-inner w-full\">\n <div class=\"flex justify-between items-center\">\n <span class=\"text-brand-accent text-xs font-mono uppercase tracking-wider font-bold\"><i class=\"fa-solid fa-book-open mr-1\"><\/i> Historical Resolution Note<\/span>\n <span class=\"font-mono text-xs text-brand-accent\/70\">Al-Hadith Narrative<\/span>\n <\/div>\n <p class=\"text-xs sm:text-sm text-gray-200 leading-relaxed\">\n The Prophet \ufdfa accepted physical terms regarding borders and repatriating individuals because they did not corrupt the internal purity of the Creed. The preservation of theology always preceded tactical territorial advantage, establishing a hierarchy of priorities completely ignored by contemporary digital activism.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"pillar-content-4\" class=\"pillar-panel hidden space-y-6 w-full\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-xs font-mono uppercase bg-brand-accent\/20 px-2.5 py-1 text-brand-accent rounded border border-brand-accent\/30 font-bold\">Pillar 04<\/span>\n <span class=\"text-gray-500 font-mono text-xs\">Quranic Epistemology<\/span>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl md:text-3xl font-bold text-brand tracking-tight\">\n Overcoming Victimhood Culture: Surah Al-Burooj Protocol\n <\/h3>\n <p class=\"text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed\">\n Modern journalism operates on constant, panic-inducing digital feedback loops that isolate atrocities to trigger pure shock and despair. By contrast, Surah Al-Burooj outlines a profound cosmic curriculum: out of 22 verses, Allah dedicates only 4 to detailing the severe physics of the crime. The remaining 18 verses refocus the human psyche completely onto sovereign cosmic order, ultimate accountability, and Divine names\u2014sheltering the heart from chronic defeatism and panic.\n <\/p>\n \n <div class=\"bg-brand text-white rounded p-4 sm:p-5 border-l-4 border-brand-accent space-y-3 shadow-inner w-full\">\n <div class=\"flex justify-between items-center flex-wrap gap-2\">\n <span class=\"text-brand-accent text-xs font-mono uppercase tracking-wider font-bold\"><i class=\"fa-solid fa-scroll mr-1\"><\/i> Textual Foundation<\/span>\n <span class=\"font-arabic text-base sm:text-lg text-brand-accent\/70\">\u0633\u064f\u0648\u0631\u064e\u0629 \u0627\u0644\u0628\u064f\u0631\u064f\u0648\u062c<\/span>\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\u064e\u0651 \u0627\u0644\u064e\u0651\u0630\u0650\u064a\u0646\u064e \u0641\u064e\u062a\u064e\u0646\u064f\u0648\u0627 \u0627\u0644\u0652\u0645\u064f\u0624\u0652\u0645\u0650\u0646\u0650\u064a\u0646\u064e \u0648\u064e\u0627\u0644\u0652\u0645\u064f\u0624\u0652\u0645\u0650\u0646\u064e\u0627\u062a\u0650 \u062b\u064f\u0645\u064e\u0651 \u0644\u064e\u0645\u0652 \u064a\u064e\u062a\u064f\u0648\u0628\u064f\u0648\u0627 \u0641\u064e\u0644\u064e\u0647\u064f\u0645\u0652 \u0639\u064e\u0630\u064e\u0627\u0628\u064f \u062c\u064e\u0647\u064e\u0646\u064e\u0651\u0645\u064e \u0648\u064e\u0644\u064e\u0647\u064f\u0645\u0652 \u0639\u064e\u0630\u064e\u0627\u0628\u064f \u0627\u0644\u0652\u062d\u064e\u0631\u0650\u064a\u0642\u0650\n <\/p>\n <p class=\"text-xs italic text-gray-300 leading-relaxed border-t border-gray-800 pt-3\">\n \"Indeed, those who have tortured the believing men and believing women and then have not repented will have the punishment of Hell, and they will have the punishment of the Burning Fire.\" \n <span class=\"block mt-1 font-bold font-mono text-[10px] text-brand-accent\">\u2014 Qur'an, Surah Al-Burooj: 10<\/span>\n <\/p>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <section class=\"mb-12 md:mb-20 bg-white border border-brand-accent\/40 rounded-xl p-4 sm:p-6 md:p-10 shadow-lg relative overflow-hidden w-full\">\n \n <canvas id=\"celebration-canvas\"><\/canvas>\n\n <div class=\"text-center max-w-2xl mx-auto mb-8 relative z-10 w-full\">\n <span class=\"inline-block bg-brand-accent\/20 text-brand-accent text-xs font-mono uppercase tracking-widest px-3 py-1 rounded border border-brand-accent\/25 mb-3 font-bold\">Diagnostic Evaluation<\/span>\n <h2 class=\"font-alegreya text-2xl sm:text-3xl font-bold text-brand\">Epistemic Framework Diagnostics<\/h2>\n <p class=\"text-gray-600 text-xs sm:text-sm mt-2\">Evaluate your understanding of theological frameworks vs. secular conceptual loops. Aim for at least 2\/4 correct answers to unlock scholastic honors.<\/p>\n <\/div>\n\n <div id=\"assessment-container\" class=\"max-w-xl mx-auto relative z-10 w-full\">\n \n <div class=\"mb-6 flex items-center justify-between gap-2\">\n <span class=\"text-xs font-mono text-gray-500\" id=\"assessment-step-text\">Question 1 of 4<\/span>\n <div class=\"h-1.5 w-24 sm:w-32 bg-gray-200 rounded overflow-hidden\">\n <div id=\"assessment-progress\" class=\"h-full bg-brand-accent transition-all duration-300 w-[25%]\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-brand text-white p-4 sm:p-6 rounded border border-brand-accent\/15 min-h-[160px] flex flex-col justify-between mb-6 transition-all duration-300 w-full\" id=\"assessment-box\">\n <h3 class=\"font-alegreya text-lg sm:text-xl font-bold text-brand-accent mb-4 leading-snug\" id=\"assessment-question\">\n When describing injustice, which lexicon do you default to most often?\n <\/h3>\n <div class=\"space-y-3\" id=\"assessment-options\">\n \n <\/div>\n <\/div>\n\n <div class=\"flex justify-between items-center gap-2\">\n <button onclick=\"prevAssessmentQuestion()\" id=\"assessment-prev-btn\" class=\"text-xs font-mono text-gray-500 hover:text-brand-accent disabled:opacity-30 flex items-center\" disabled>\n <i class=\"fa-solid fa-chevron-left mr-1\"><\/i> Back\n <\/button>\n <span class=\"text-[10px] font-mono text-gray-400 text-right\">Strict Conceptual Evaluation<\/span>\n <\/div>\n <\/div>\n\n \n <div id=\"diagnostic-results\" class=\"hidden max-w-xl mx-auto bg-brand text-white p-4 sm:p-6 rounded border border-brand-accent\/30 space-y-4 relative z-10 w-full\">\n <div class=\"text-center\">\n <div id=\"celebration-medal-icon\" class=\"text-brand-accent text-4xl sm:text-5xl mb-3\">\n <i class=\"fa-solid fa-scroll\"><\/i>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl font-bold text-white\">Your Evaluation Result<\/h3>\n <p class=\"text-brand-accent font-mono text-base sm:text-lg font-bold tracking-wider mt-1\" id=\"diagnostic-score-label\">Score: 0 \/ 4 Correct<\/p>\n <p id=\"celebration-banner\" class=\"hidden text-[10px] sm:text-xs text-amber-300 uppercase tracking-widest font-mono font-bold mt-1\">\ud83c\udf89 Congratulations! Scholastic Milestone Achieved \ud83c\udf89<\/p>\n <\/div>\n \n <p id=\"diagnostic-desc\" class=\"text-gray-300 text-xs sm:text-sm text-center leading-relaxed font-david pb-4 border-b border-white\/10\">\n Analyzing framework integrity...\n <\/p>\n\n \n <div class=\"space-y-3\">\n <h4 class=\"font-alegreya text-xs sm:text-sm font-bold uppercase tracking-wider text-brand-accent text-center\">Correct Framework Guidelines<\/h4>\n <div id=\"review-answers-list\" class=\"space-y-3 max-h-60 overflow-y-auto pr-1 text-xs\">\n \n <\/div>\n <\/div>\n\n <div class=\"text-center pt-4 border-t border-white\/10\">\n <button onclick=\"resetAssessment()\" class=\"text-xs font-mono bg-brand-accent text-brand py-2 px-4 rounded font-bold hover:bg-brand-goldDark transition-colors\">\n <i class=\"fa-solid fa-rotate-left mr-1\"><\/i> Retake Diagnostic\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"mb-12 md:mb-16 w-full\" id=\"briefing-center\">\n <div class=\"bg-white p-4 sm:p-6 md:p-8 rounded-xl border border-brand-accent\/40 relative w-full\">\n <div class=\"max-w-2xl mx-auto text-center mb-8\">\n <span class=\"inline-block bg-brand-accent\/20 text-brand-accent text-xs font-mono uppercase tracking-widest px-3 py-1 rounded border border-brand-accent\/25 mb-3 font-bold\">Registration Portal<\/span>\n <h3 role=\"heading\" aria-level=\"3\" class=\"font-alegreya text-2xl font-bold text-brand\">Request Collaboration or Access<\/h3>\n <p class=\"text-gray-600 text-xs sm:text-sm mt-2\">\n MC Sessions are restricted research forums. Submit your credentials below to request access or propose a research paper presentation. All coordination and meeting link dispatch takes place securely via WhatsApp.\n <\/p>\n <\/div>\n\n <form onsubmit=\"submitWhatsAppApplication(event)\" class=\"max-w-xl mx-auto space-y-4 w-full\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-xs font-mono uppercase text-gray-600 mb-1 font-bold\">Full Academic Name<\/label>\n <div class=\"relative\">\n <span class=\"absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-user text-xs\"><\/i><\/span>\n <input type=\"text\" id=\"wa-name\" required placeholder=\"E.g., Dr. Sulaiman Khan\" class=\"w-full bg-brand-parchment border border-gray-300 rounded pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-brand-accent font-david\">\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-mono uppercase text-gray-600 mb-1 font-bold\">Academic Affiliation<\/label>\n <div class=\"relative\">\n <span class=\"absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-building-columns text-xs\"><\/i><\/span>\n <input type=\"text\" id=\"wa-affiliation\" required placeholder=\"University or Independent Study Group\" class=\"w-full bg-brand-parchment border border-gray-300 rounded pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-brand-accent font-david\">\n <\/div>\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-mono uppercase text-gray-600 mb-1 font-bold\">Preferred Colloquium Role<\/label>\n <div class=\"relative\">\n <span class=\"absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-graduation-cap text-xs\"><\/i><\/span>\n <select id=\"wa-role\" required class=\"w-full bg-brand-parchment border border-gray-300 rounded pl-9 pr-8 py-2 text-sm focus:outline-none focus:border-brand-accent font-david text-gray-700 appearance-none cursor-pointer\">\n <option value=\"Evaluator (Peer-Review & Datasets)\">Join as an Evaluator (Peer-Reviews & Historical Datasets)<\/option>\n <option value=\"Presenter (Research Paper Pitch)\">Propose a Discourse Topic (Present Research Framework)<\/option>\n <option value=\"Academic Attendee\">Register as an Attendee<\/option>\n <\/select>\n <span class=\"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-chevron-down text-[10px]\"><\/i><\/span>\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-mono uppercase text-gray-600 mb-1 font-bold\">Area of Focus \/ Key Motivation<\/label>\n <div class=\"relative\">\n <span class=\"absolute top-2.5 left-3 text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-feather-pointed text-xs\"><\/i><\/span>\n <textarea id=\"wa-message\" rows=\"3\" required placeholder=\"State your areas of study or describe your presentation proposal details...\" class=\"w-full bg-brand-parchment border border-gray-300 rounded pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-brand-accent font-david\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"pt-2\">\n <button type=\"submit\" class=\"w-full bg-[#25D366] hover:bg-[#20ba5a] text-white font-bold font-alegreya py-3 px-6 rounded transition-all text-sm md:text-base border border-transparent shadow-md hover:shadow-[#25D366]\/20 flex items-center justify-center space-x-2\">\n <i class=\"fa-brands fa-whatsapp text-lg\"><\/i>\n <span>Send Request via WhatsApp<\/span>\n <\/button>\n <\/div>\n <\/form>\n\n \n <div class=\"text-center mt-10 pt-6 border-t border-gray-200\">\n <p class=\"text-xs text-gray-500 mb-3\">Prefer email? Get in touch with our Secretariat directly:<\/p>\n <button onclick=\"copyToClipboard('moralitycentral@gmail.com')\" class=\"inline-flex items-center space-x-2 bg-brand hover:bg-brand-accent hover:text-brand text-brand-accent font-bold font-mono py-2.5 px-5 rounded border border-brand-accent\/35 transition-all text-xs tracking-wider\">\n <i class=\"fa-regular fa-envelope\"><\/i>\n <span id=\"coord-email\">moralitycentral@gmail.com<\/span>\n <i class=\"fa-regular fa-copy ml-1.5\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"text-center border-t border-brand-accent\/30 pt-10 md:pt-12 pb-6 w-full\">\n <div role=\"heading\" aria-level=\"3\" class=\"font-alegreya text-2xl font-bold mb-4 text-brand\">Disclaimer & Scope<\/div>\n <p class=\"text-gray-600 max-w-3xl mx-auto mb-8 text-xs sm:text-sm md:text-base px-2 leading-relaxed\">\n MC Sessions prioritize analytical realism, intellectual humility, and structural fidelity to Islamic ethics. Sessions purposefully steer clear of insular sectarian polemics and internal legal (<i>Fiqh<\/i>) disputes to preserve communal focus on critical civilizational challenges.\n <\/p>\n\n \n <div class=\"max-w-2xl mx-auto mt-10 md:mt-12 bg-white p-5 sm:p-8 rounded border border-brand-accent\/30 relative shadow w-full\">\n <div class=\"absolute -top-3 left-1\/2 transform -translate-x-1\/2 bg-brand text-white px-4 py-0.5 text-brand-accent text-[10px] sm:text-xs font-mono border border-brand-accent\/30 rounded-full whitespace-nowrap\">\n CIVILIZATIONAL PRINCIPLE\n <\/div>\n <p class=\"font-alegreya text-lg sm:text-2xl italic text-brand mb-2 leading-snug\">\n \"If we seek honor from anything besides that with which Allah honored us, Allah will disgrace us.\"\n <\/p>\n <p class=\"text-[10px] sm:text-xs text-gray-400 font-mono mt-1\">\u2014 Al-Mustadrak 'al\u00e1 al-Sah\u012bhayn 207<\/p>\n <\/div>\n <\/footer>\n\n <\/main>\n\n <\/div>\n\n \n <script>\n \/* State Control Variables *\/\n let currentAssessmentStep = 0;\n let selectedAnswers = []; \/\/ Stores indices chosen by user\n let animationFrameId = null;\n\n \/* Toast Alert Mechanism (Custom fallback for alert\/confirm) *\/\n function showToast(message, type = 'success') {\n const container = document.getElementById('toast-container');\n const toast = document.createElement('div');\n toast.className = `p-4 rounded shadow-lg border text-xs font-mono flex items-center justify-between space-x-3 transition-all duration-300 transform translate-y-2 opacity-0 bg-brand text-white border-brand-accent\/30 text-brand-accent pointer-events-auto`;\n \n let icon = '<i class=\"fa-solid fa-circle-check text-brand-accent\"><\/i>';\n if (type === 'error') {\n icon = '<i class=\"fa-solid fa-triangle-exclamation text-red-500\"><\/i>';\n toast.classList.add('border-red-500\/30');\n } else if (type === 'info') {\n icon = '<i class=\"fa-solid fa-circle-info text-blue-400\"><\/i>';\n }\n\n toast.innerHTML = `\n <div class=\"flex items-center space-x-2\">\n ${icon}\n <span class=\"break-words\">${message}<\/span>\n <\/div>\n <button onclick=\"this.parentElement.remove()\" class=\"text-gray-400 hover:text-white transition-colors flex-shrink-0\">\n <i class=\"fa-solid fa-xmark\"><\/i>\n <\/button>\n `;\n \n container.appendChild(toast);\n \n \/\/ Trigger anim\n setTimeout(() => {\n toast.classList.remove('opacity-0', 'translate-y-2');\n }, 10);\n\n \/\/ Self cleanup\n setTimeout(() => {\n toast.classList.add('opacity-0', 'translate-y-2');\n setTimeout(() => toast.remove(), 300);\n }, 4000);\n }\n\n \/* Copy Action helper *\/\n function copyToClipboard(text) {\n const el = document.createElement('textarea');\n el.value = text;\n document.body.appendChild(el);\n el.select();\n try {\n document.execCommand('copy');\n showToast(\"Secretariat email copied to clipboard.\");\n } catch (err) {\n showToast(\"Failed to copy clipboard, please copy manually.\", \"error\");\n }\n document.body.removeChild(el);\n }\n\n \/* Pillars Switcher Logic with instant classes toggle *\/\n function selectPillar(id) {\n \/\/ Hide panels\n document.querySelectorAll('.pillar-panel').forEach(panel => panel.classList.add('hidden'));\n \/\/ Reset selectors styling\n document.querySelectorAll('.pillar-tab-btn').forEach(btn => {\n btn.classList.remove('bg-brand', 'border-brand-accent\/50', 'text-brand-accent');\n btn.classList.add('bg-white', 'border-gray-300', 'text-gray-500');\n });\n\n \/\/ Activate chosen target\n document.getElementById(`pillar-content-${id}`).classList.remove('hidden');\n const targetBtn = document.getElementById(`pill-btn-${id}`);\n targetBtn.classList.remove('bg-white', 'border-gray-300', 'text-gray-500');\n targetBtn.classList.add('bg-brand', 'border-brand-accent\/50', 'text-brand-accent');\n \n \/\/ Background metadata decor watermark update\n document.getElementById('pillar-bg-num').innerText = id < 10 ? `0${id}` : id;\n }\n\n \/* Diagnostic Assessment Engine Questions *\/\n const diagnosticQuestions = [\n {\n q: \"When describing societal trials, which semantic vocabulary preserves conceptual integrity?\",\n options: [\n { t: \"Sacred\/Creedal categories (Eeman, Ubudiyyah, Divine Sovereignty)\", correct: true },\n { t: \"General humanist categories (Universal values, general human rights)\", correct: false },\n { t: \"Secular political slang (Intersectionality, validation benchmarks)\", correct: false }\n ],\n explanation: \"Correct paradigm: Islamic trials must be spoken of with sacred vocabularies. Secular humanism implicitly strips trials of their transcendent dimension.\"\n },\n {\n q: \"What is the primary indicator of genuine success in community struggle?\",\n options: [\n { t: \"Viral social media amplification and trending digital metrics\", correct: false },\n { t: \"External political visibility and mainstream representation\", correct: false },\n { t: \"Structural self-reliance and theological preservation (Isnad)\", correct: true }\n ],\n explanation: \"Correct paradigm: Preservation is rooted in structural autonomy and rigorous adherence to traditional methodology (Isnad) rather than external validation loops.\"\n },\n {\n q: \"How must temporary strategic concessions (like Hudaybiyyah) be viewed?\",\n options: [\n { t: \"Tactical physical concessions only\u2014never institutional theological compromise\", correct: true },\n { t: \"A blank slate to dynamically alter creedal non-negotiables for results\", correct: false },\n { t: \"Pragmatic licenses to fully align with secular pressure structures\", correct: false }\n ],\n explanation: \"Correct paradigm: Hudaybiyyah proved physical terms could undergo tactical concession, but internal creedal purity remained absolutely non-negotiable.\"\n },\n {\n q: \"What mechanism is most vital for preventing chronic psychological defeatism?\",\n options: [\n { t: \"Ignoring global affairs completely to exist in a cultural vacuum\", correct: false },\n { t: \"Refocusing onto cosmic order, Divine names, and ultimate accountability (Surah Al-Burooj protocol)\", correct: true },\n { t: \"Relentlessly feeding on news cycles to trigger collective performative outrage\", correct: false }\n ],\n explanation: \"Correct paradigm: Surah Al-Burooj dedicates 18 out of 22 verses to shift focus back to sovereign cosmic order, preventing the mind from descending into paralyzing despair.\"\n }\n ];\n\n \/* Loader with top alignment on multi-line text blocks *\/\n function loadAssessmentQuestion() {\n const qEl = document.getElementById('assessment-question');\n const optionsEl = document.getElementById('assessment-options');\n const progressEl = document.getElementById('assessment-progress');\n const stepTextEl = document.getElementById('assessment-step-text');\n const prevBtn = document.getElementById('assessment-prev-btn');\n\n const currentQ = diagnosticQuestions[currentAssessmentStep];\n \n \/\/ Progress tracker states\n stepTextEl.innerText = `Question ${currentAssessmentStep + 1} of 4`;\n progressEl.style.width = `${((currentAssessmentStep + 1) \/ 4) * 100}%`;\n \n \/\/ Prev button lock\n prevBtn.disabled = currentAssessmentStep === 0;\n\n \/\/ Render\n qEl.innerText = currentQ.q;\n optionsEl.innerHTML = '';\n \n currentQ.options.forEach((opt, idx) => {\n const btn = document.createElement('button');\n \/\/ Aligned items to start for comfortable paragraph reading layout on mobile\n btn.className = `w-full text-left p-3.5 rounded border border-white\/20 hover:border-brand-accent bg-brand-light\/90 hover:bg-brand\/80 text-xs text-gray-200 transition-all font-david flex items-start space-x-3`;\n btn.onclick = () => submitAnswer(idx);\n btn.innerHTML = `\n <span class=\"w-5 h-5 rounded-full border border-brand-accent\/50 flex-shrink-0 flex items-center justify-center font-mono text-[10px] text-brand-accent font-bold mt-0.5\">${String.fromCharCode(65 + idx)}<\/span>\n <span class=\"flex-1 break-words\">${opt.t}<\/span>\n `;\n optionsEl.appendChild(btn);\n });\n }\n\n function submitAnswer(chosenIdx) {\n selectedAnswers[currentAssessmentStep] = chosenIdx;\n if (currentAssessmentStep < 3) {\n currentAssessmentStep++;\n loadAssessmentQuestion();\n } else {\n showDiagnosticResult();\n }\n }\n\n function prevAssessmentQuestion() {\n if (currentAssessmentStep > 0) {\n currentAssessmentStep--;\n loadAssessmentQuestion();\n }\n }\n\n \/* Custom Confetti Emitter on Canvas (Resizes perfectly relative to mobile frames) *\/\n function triggerCelebration() {\n const canvas = document.getElementById('celebration-canvas');\n const ctx = canvas.getContext('2d');\n \n \/\/ Adjust canvas to container sizing\n const container = canvas.parentElement;\n canvas.width = container.offsetWidth;\n canvas.height = container.offsetHeight;\n\n const particles = [];\n const colors = ['#C5A880', '#A38458', '#E5D5C0', '#FDFBF7', '#FFD700'];\n\n for (let i = 0; i < 80; i++) {\n particles.push({\n x: Math.random() * canvas.width,\n y: canvas.height + Math.random() * 20,\n size: Math.random() * 5 + 4,\n speedY: -Math.random() * 4 - 3,\n speedX: Math.random() * 4 - 2,\n color: colors[Math.floor(Math.random() * colors.length)],\n rotation: Math.random() * 360,\n rotationSpeed: Math.random() * 5 - 2.5,\n opacity: 1\n });\n }\n\n function animateConfetti() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n let active = false;\n\n particles.forEach(p => {\n if (p.opacity > 0) {\n active = true;\n p.x += p.speedX;\n p.y += p.speedY;\n p.speedY += 0.08; \/\/ gravity drift\n p.rotation += p.rotationSpeed;\n p.opacity -= 0.007;\n\n ctx.save();\n ctx.globalAlpha = p.opacity;\n ctx.translate(p.x, p.y);\n ctx.rotate((p.rotation * Math.PI) \/ 180);\n ctx.fillStyle = p.color;\n ctx.fillRect(-p.size \/ 2, -p.size \/ 2, p.size, p.size);\n ctx.restore();\n }\n });\n\n if (active) {\n animationFrameId = requestAnimationFrame(animateConfetti);\n } else {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n }\n\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n }\n animateConfetti();\n }\n\n function showDiagnosticResult() {\n document.getElementById('assessment-container').classList.add('hidden');\n const resultsEl = document.getElementById('diagnostic-results');\n resultsEl.classList.remove('hidden');\n\n const scoreLabel = document.getElementById('diagnostic-score-label');\n const descEl = document.getElementById('diagnostic-desc');\n const medalIcon = document.getElementById('celebration-medal-icon');\n const celebBanner = document.getElementById('celebration-banner');\n const reviewList = document.getElementById('review-answers-list');\n\n \/\/ Calculate correct score\n let correctCount = 0;\n diagnosticQuestions.forEach((q, qIdx) => {\n const userChoiceIdx = selectedAnswers[qIdx];\n if (q.options[userChoiceIdx] && q.options[userChoiceIdx].correct) {\n correctCount++;\n }\n });\n\n \/\/ Set scores and visuals\n scoreLabel.innerText = `Result: ${correctCount} \/ 4 Correct`;\n\n \/\/ Display review and build feedback\n reviewList.innerHTML = '';\n diagnosticQuestions.forEach((q, qIdx) => {\n const userChoiceIdx = selectedAnswers[qIdx];\n const userChoiceOpt = q.options[userChoiceIdx];\n const correctOpt = q.options.find(o => o.correct);\n const isCorrect = userChoiceOpt && userChoiceOpt.correct;\n\n const reviewBox = document.createElement('div');\n reviewBox.className = `p-3 rounded border ${isCorrect ? 'border-green-500\/30 bg-green-950\/20' : 'border-red-500\/30 bg-red-950\/20'} space-y-1 text-[11px]`;\n reviewBox.innerHTML = `\n <div class=\"flex items-start justify-between font-bold gap-2\">\n <span class=\"text-white\">Q${qIdx + 1}: ${q.q.substring(0, 50)}...<\/span>\n <span class=\"${isCorrect ? 'text-green-400' : 'text-red-400'} whitespace-nowrap\">\n <i class=\"${isCorrect ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'}\"><\/i> ${isCorrect ? 'Correct' : 'Incorrect'}\n <\/span>\n <\/div>\n <p class=\"text-gray-400\">Your Choice: <span class=\"${isCorrect ? 'text-green-300' : 'text-red-300'}\">${userChoiceOpt ? userChoiceOpt.t : 'None'}<\/span><\/p>\n ${!isCorrect ? `<p class=\"text-gray-400\">Correct: <span class=\"text-brand-accent font-bold\">${correctOpt.t}<\/span><\/p>` : ''}\n <p class=\"text-gray-300 italic pt-1 border-t border-white\/5 font-serif\">${q.explanation}<\/p>\n `;\n reviewList.appendChild(reviewBox);\n });\n\n \/\/ If score is at least 2, trigger a celebration sequence!\n if (correctCount >= 2) {\n celebBanner.classList.remove('hidden');\n medalIcon.innerHTML = '<i class=\"fa-solid fa-award text-amber-400 text-5xl sm:text-6xl animate-bounce\"><\/i>';\n descEl.innerText = \"Excellent capability. You demonstrate strong alignment with critical Islamic epistemological concepts, successfully identifying linguistic traps and structural vulnerabilities.\";\n \n \/\/ Fire beautiful confetti animation\n setTimeout(triggerCelebration, 150);\n } else {\n celebBanner.classList.add('hidden');\n medalIcon.innerHTML = '<i class=\"fa-solid fa-book-open text-brand-accent text-4xl sm:text-5xl\"><\/i>';\n descEl.innerText = \"A closer reading is recommended. Your frameworks occasionally overlap with secular digital incentives or visibility metrics. Study the corrective criteria above to strengthen structural clarity.\";\n }\n }\n\n function resetAssessment() {\n currentAssessmentStep = 0;\n selectedAnswers = [];\n \n \/\/ Reset overlay canvas if running\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n }\n const canvas = document.getElementById('celebration-canvas');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n document.getElementById('diagnostic-results').classList.add('hidden');\n document.getElementById('assessment-container').classList.remove('hidden');\n loadAssessmentQuestion();\n showToast(\"Diagnostic assessment restarted.\", \"info\");\n }\n\n function submitWhatsAppApplication(event) {\n event.preventDefault();\n\n const name = document.getElementById('wa-name').value;\n const affiliation = document.getElementById('wa-affiliation').value;\n const role = document.getElementById('wa-role').value;\n const focus = document.getElementById('wa-message').value;\n\n \/\/ Generate beautifully formatted scholastic text with emojis\n const formattedMessage = `\ud83d\udcdc *MC SESSIONS - REGISTRATION APPLICATION* \ud83d\udcdc\n\n\ud83d\udc64 *Academic Name:* ${name}\n\ud83c\udfeb *Affiliation:* ${affiliation}\n\ud83c\udfaf *Preferred Colloquium Role:* ${role}\n\n\ud83d\udcdd *Area of Focus & Motivation:*\n\"${focus}\"\n\n\u2728 _Sent via Morality Central Scholastic Registry Portal_ \u2728`;\n\n \/\/ URL Encode the formatted template\n const encodedText = encodeURIComponent(formattedMessage);\n const phoneNumber = \"918921517844\";\n const whatsappUrl = `https:\/\/wa.me\/${phoneNumber}?text=${encodedText}`;\n\n \/\/ Trigger visual success feedback\n showToast(\"Application compiled. Opening WhatsApp...\", \"success\");\n\n \/\/ Redirect user to WhatsApp in a new tab\n setTimeout(() => {\n window.open(whatsappUrl, '_blank');\n }, 800);\n }\n\n \/\/ Initialize elements on load\n window.onload = function() {\n loadAssessmentQuestion();\n }\n\n \/\/ Redraw canvas content on dynamic resize events\n window.onresize = function() {\n const canvas = document.getElementById('celebration-canvas');\n if (canvas && canvas.offsetParent !== null) {\n canvas.width = canvas.parentElement.offsetWidth;\n canvas.height = canvas.parentElement.offsetHeight;\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 Sessions | Morality Central Scholastic Portal Colloquia & Epistemic Discourse MC Sessions “Critical discourses, roundtable dialogues, and analytical presentations evaluating contemporary social, ideological, and political issues through an uncompromised Islamic epistemological framework.” Orthodox Methodology Epistemic Realism Live Circle 09 May 2026 Session 01 The Awareness Paradox Epistemological Distortions and Defeatism in Muslim Identity Formation. […]<\/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-4961","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/4961","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=4961"}],"version-history":[{"count":13,"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/4961\/revisions"}],"predecessor-version":[{"id":4998,"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/4961\/revisions\/4998"}],"wp:attachment":[{"href":"https:\/\/moralitycentral.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n MC Sessions | Morality Central Scholastic Portal<\/title>\n \n \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 \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \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 \/* Strict global layout guardrails to prevent any horizontal overflow on any screen size *\/\n html, body {\n max-width: 100% !important;\n overflow-x: hidden !important;\n margin: 0;\n padding: 0;\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 grid background suggesting scholastic engineering\/structure *\/\n .academic-grid {\n background-color: #FDFBF7;\n background-image: radial-gradient(rgba(7, 14, 26, 0.05) 1px, transparent 1px);\n background-size: 24px 24px;\n }\n\n \/* Custom scrollbar matching editorial palette *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #FDFBF7;\n }\n ::-webkit-scrollbar-thumb {\n background: #C5A880;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #A38458;\n }\n\n \/* Celebration canvas positioning *\/\n #celebration-canvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 10;\n }\n\n \/* Enforce robust word wrap globally so long terms can never break layout scaling *\/\n #mc-elementor-wrapper p, \n #mc-elementor-wrapper blockquote, \n #mc-elementor-wrapper span, \n #mc-elementor-wrapper h1, \n #mc-elementor-wrapper h2, \n #mc-elementor-wrapper h3,\n #mc-elementor-wrapper h4,\n #mc-elementor-wrapper li {\n word-wrap: break-word !important;\n overflow-wrap: break-word !important;\n word-break: break-word !important;\n }\n\n \/* Responsive Grid enforcement for Pillar Tabs (Solves 2-column squishing on extra-small mobile) *\/\n #mc-elementor-wrapper .pillar-tabs-grid {\n display: grid !important;\n grid-template-columns: repeat(1, minmax(0, 1fr)) !important; \/* 1 Column on tiny screens *\/\n gap: 0.5rem !important; \/* 8px equivalent *\/\n margin-bottom: 1.5rem !important; \/* 24px equivalent *\/\n }\n @media (min-width: 480px) {\n #mc-elementor-wrapper .pillar-tabs-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important; \/* 2 Columns on small viewports *\/\n }\n }\n @media (min-width: 768px) {\n #mc-elementor-wrapper .pillar-tabs-grid {\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important; \/* 4 Columns on desktop *\/\n }\n }\n\n \/* High specificity PDF Download Button enforcement *\/\n #mc-elementor-wrapper .pdf-download-btn {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n background-color: #070E1A !important; \/* Deep Midnight Navy *\/\n color: #FFFFFF !important;\n font-family: \"Alegreya\", serif !important;\n font-weight: 700 !important;\n text-transform: none !important;\n padding: 0.75rem 1.5rem !important; \/* py-3 px-6 equivalent *\/\n border-radius: 0.25rem !important;\n border: 1px solid transparent !important;\n text-decoration: none !important;\n box-shadow: 0 10px 15px -3px rgba(197, 168, 128, 0.1), 0 4px 6px -4px rgba(197, 168, 128, 0.1) !important;\n transition: all 0.2s ease-in-out !important;\n text-align: center !important;\n width: 100% !important; \/* Default full-width on mobile to avoid row squishing *\/\n }\n @media (min-width: 640px) {\n #mc-elementor-wrapper .pdf-download-btn {\n flex: 1 1 0% !important; \/* Becomes flex item only on tablet and up *\/\n width: auto !important;\n }\n }\n #mc-elementor-wrapper .pdf-download-btn:hover {\n background-color: #13213c !important; \/* brand-light *\/\n border-color: #C5A880 !important; \/* brand-accent *\/\n color: #C5A880 !important;\n }\n\n \/* High specificity Hero Main H1 Heading enforcement with fluid text resizing *\/\n #mc-elementor-wrapper h1.mc-sessions-heading {\n font-family: \"Alegreya\", serif !important;\n font-size: 2.5rem !important; \/* Scaled down for mobile to avoid text overflow *\/\n line-height: 1.15 !important;\n font-weight: 800 !important;\n margin-top: 0 !important;\n margin-bottom: 1.5rem !important;\n text-align: center !important;\n display: block !important;\n background: linear-gradient(to right, #ffffff, #C5A880, #e2e8f0) !important;\n -webkit-background-clip: text !important;\n background-clip: text !important;\n color: transparent !important;\n }\n @media (min-width: 640px) {\n #mc-elementor-wrapper h1.mc-sessions-heading {\n font-size: 3.5rem !important; \/* Scaled up for tablet *\/\n }\n }\n @media (min-width: 768px) {\n #mc-elementor-wrapper h1.mc-sessions-heading {\n font-size: 4.5rem !important; \/* Scaled up for desktop *\/\n }\n }\n\n \/* Enforce exact hover backgrounds for pillar tabs to override any dark\/black hover bleed from Elementor *\/\n #mc-elementor-wrapper .pillar-tab-btn {\n transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease !important;\n }\n #mc-elementor-wrapper .pillar-tab-btn:hover {\n color: #070E1A !important;\n border-color: #C5A880 !important;\n }\n \/* When the tab is active (bg-brand) *\/\n #mc-elementor-wrapper .pillar-tab-btn.bg-brand:hover {\n background-color: #070E1A !important; \/* Maintain original clean dark background *\/\n color: #C5A880 !important;\n border-color: #C5A880 !important;\n }\n \/* When the tab is inactive (bg-white) *\/\n #mc-elementor-wrapper .pillar-tab-btn.bg-white:hover {\n background-color: #F5EFEB !important; \/* Transition to soft parchment cream hover, never black *\/\n color: #070E1A !important;\n border-color: #C5A880 !important;\n }\n\n \/* Fix quiz button text overflowing on narrow screens (forces text wrapping and correct flex alignments) *\/\n #mc-elementor-wrapper #assessment-options button {\n white-space: normal !important;\n word-break: break-word !important;\n overflow-wrap: break-word !important;\n display: flex !important;\n align-items: flex-start !important; \/* Align option indexes with the top line of text *\/\n text-align: left !important;\n height: auto !important;\n }\n <\/style>\n<\/head>\n<body class=\"bg-brand-parchment text-brand font-david antialiased selection:bg-brand-accent selection:text-brand academic-grid\">\n\n \n <div id=\"toast-container\" class=\"fixed bottom-6 right-6 z-50 flex flex-col gap-2 pointer-events-none max-w-sm w-full px-4\"><\/div>\n\n \n <div id=\"mc-elementor-wrapper\" class=\"w-full min-h-screen flex flex-col justify-between overflow-x-hidden\">\n \n <header class=\"relative bg-brand text-white py-16 md:py-24 px-4 md:px-8 text-center border-b border-brand-accent\/30 overflow-hidden\">\n \n <div class=\"absolute inset-0 opacity-5 pointer-events-none mix-blend-overlay\">\n <div class=\"w-full h-full bg-[radial-gradient(#C5A880_1px,transparent_1px)] [background-size:16px_16px]\"><\/div>\n <\/div>\n \n <div class=\"max-w-4xl mx-auto relative z-10\">\n <span class=\"text-brand-accent font-mono text-xs uppercase tracking-widest block mb-3 border-b border-brand-accent\/20 pb-2 max-w-xs mx-auto\">Colloquia & Epistemic Discourse<\/span>\n <h1 role=\"heading\" aria-level=\"1\" class=\"mc-sessions-heading font-alegreya text-5xl md:text-7xl font-extrabold mb-6 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-white via-brand-accent to-gray-200\">\n MC Sessions\n <\/h1>\n <p class=\"font-david text-base md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed italic px-2\">\n \"Critical discourses, roundtable dialogues, and analytical presentations evaluating contemporary social, ideological, and political issues through an uncompromised Islamic epistemological framework.\"\n <\/p>\n \n <div class=\"mt-8 flex flex-wrap justify-center gap-3 text-xs font-mono\">\n <span class=\"bg-brand-light\/80 border border-brand-accent\/30 text-brand-accent px-3 py-1.5 rounded\"><i class=\"fa-solid fa-graduation-cap mr-1.5\"><\/i> Orthodox Methodology<\/span>\n <span class=\"bg-brand-light\/80 border border-brand-accent\/30 text-brand-accent px-3 py-1.5 rounded\"><i class=\"fa-solid fa-balance-scale mr-1.5\"><\/i> Epistemic Realism<\/span>\n <span class=\"bg-brand-light\/80 border border-brand-accent\/30 text-brand-accent px-3 py-1.5 rounded\"><i class=\"fa-solid fa-circle-nodes mr-1.5\"><\/i> Live Circle<\/span>\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"max-w-5xl mx-auto px-4 py-8 md:py-16 flex-grow w-full\">\n\n \n <section class=\"mb-12 md:mb-20\">\n <div class=\"bg-brand text-white rounded-xl overflow-hidden shadow-2xl border border-brand-accent\/30 grid grid-cols-1 lg:grid-cols-12 relative w-full\">\n \n \n <div class=\"p-4 sm:p-6 md:p-8 lg:col-span-5 bg-gradient-to-br from-brand-light to-brand flex flex-col justify-between border-b lg:border-b-0 lg:border-r border-brand-accent\/20\">\n <div>\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-brand-accent text-sm font-mono\"><i class=\"fa-solid fa-calendar mr-1\"><\/i> 09 May 2026<\/span>\n <\/div>\n \n <h2 role=\"heading\" aria-level=\"2\" class=\"font-alegreya text-3xl md:text-4xl font-extrabold text-white mb-3 leading-tight tracking-tight\">\n <span class=\"text-brand-accent block text-xs font-mono uppercase tracking-widest mb-3 font-bold bg-brand-accent\/20 border border-brand-accent\/40 px-3 py-1.5 rounded inline-block shadow-md\">Session 01<\/span>\n <span class=\"block text-2xl md:text-3xl text-white font-extrabold mt-1\">The Awareness Paradox<\/span>\n <\/h2>\n <p class=\"text-brand-accent text-sm md:text-base italic mb-6 font-alegreya\">\n Epistemological Distortions and Defeatism in Muslim Identity Formation.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"p-4 sm:p-6 md:p-10 lg:col-span-7 bg-white text-brand flex flex-col justify-between\">\n <div>\n <div class=\"flex items-center space-x-2 text-xs font-mono uppercase text-brand-accent font-bold tracking-wider mb-2\">\n <i class=\"fa-solid fa-bookmark\"><\/i>\n <span>Essential Thesis<\/span>\n <\/div>\n <blockquote class=\"text-gray-800 font-david text-base md:text-lg mb-6 leading-relaxed border-l-2 border-brand-accent pl-4 pr-1 italic\">\n \"While the urge to protest oppression springs from eeman, unguided reactions inside secular media landscapes produce severe unintended consequences. By adopting secular vocabularies and chasing public validation, we systematically hollow out the theological core of Islamic principles, unknowingly breeding collective despair instead of anchoring ourselves in Divine trust.\"\n <\/blockquote>\n\n <div class=\"border-t border-gray-150 pt-5\">\n <h4 class=\"font-alegreya font-bold text-sm text-gray-500 uppercase tracking-wider mb-3 font-bold\">Core Inquiries Explored<\/h4>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-gray-700\">\n <div class=\"flex items-start\">\n <span class=\"text-brand-accent mr-2 mt-0.5\"><i class=\"fa-solid fa-feather\"><\/i><\/span>\n <span>How linguistic colonization subverts foundational Quranic vocabulary.<\/span>\n <\/div>\n <div class=\"flex items-start\">\n <span class=\"text-brand-accent mr-2 mt-0.5\"><i class=\"fa-solid fa-eye-slash\"><\/i><\/span>\n <span>Foucault's Panopticon: Seeking digital visibility vs. seeking Allah's approval.<\/span>\n <\/div>\n <div class=\"flex items-start\">\n <span class=\"text-brand-accent mr-2 mt-0.5\"><i class=\"fa-solid fa-shuffle\"><\/i><\/span>\n <span>Separating structural theological compromise from geopolitical strategy.<\/span>\n <\/div>\n <div class=\"flex items-start\">\n <span class=\"text-brand-accent mr-2 mt-0.5\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/span>\n <span>The Surah Al-Burooj protocol: Curbing the toxic feedback loop of chronic defeatism.<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-8 pt-6 border-t border-gray-150 flex flex-col sm:flex-row gap-4\">\n <a href=\"https:\/\/moralitycentral.com\/wp-content\/uploads\/2026\/06\/Panel-Discussion_Awareness-Paradox.pdf\" target=\"_blank\" class=\"pdf-download-btn flex-1 text-center bg-brand text-white font-bold font-alegreya py-3 px-6 rounded hover:bg-brand-light transition-all text-sm md:text-base border border-transparent shadow-lg hover:shadow-brand-accent\/10 hover:border-brand-accent flex items-center justify-center space-x-2\">\n <i class=\"fa-solid fa-file-pdf\"><\/i>\n <span>Download Session PDF<\/span>\n <\/a>\n <a href=\"#interactive-pillars\" class=\"w-full sm:w-auto text-center bg-gray-100 hover:bg-gray-200 text-brand font-bold font-alegreya py-3 px-6 rounded transition-all text-sm md:text-base border border-gray-200 flex items-center justify-center space-x-2\">\n <span>Examine Pillars<\/span>\n <i class=\"fa-solid fa-arrow-down\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"interactive-pillars\" class=\"mb-12 md:mb-20 w-full\">\n <div class=\"border-b border-brand-accent\/30 pb-4 mb-8 flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4\">\n <div>\n <span class=\"text-brand-accent font-mono text-xs uppercase tracking-widest block mb-1\">Systematic Breakdown<\/span>\n <h2 role=\"heading\" aria-level=\"2\" class=\"font-alegreya text-3xl md:text-4xl font-bold text-brand\">\n Core Epistemological Pillars\n <\/h2>\n <\/div>\n <span class=\"text-gray-500 text-xs font-mono\"><i class=\"fa-solid fa-hand-pointer mr-1\"><\/i> Click a pillar tab to review details<\/span>\n <\/div>\n\n \n <div class=\"pillar-tabs-grid gap-2 mb-6 w-full\">\n <button onclick=\"selectPillar(1)\" id=\"pill-btn-1\" class=\"pillar-tab-btn p-3 rounded border text-left transition-colors duration-75 focus:outline-none bg-brand border-brand-accent\/50 text-brand-accent font-alegreya font-bold text-sm flex items-center space-x-2 min-w-0\">\n <span class=\"bg-brand-accent text-brand rounded w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs font-mono font-bold\">01<\/span>\n <span class=\"truncate flex-1\">Linguistic Overlap<\/span>\n <\/button>\n <button onclick=\"selectPillar(2)\" id=\"pill-btn-2\" class=\"pillar-tab-btn p-3 rounded border text-left transition-colors duration-75 focus:outline-none bg-white border-gray-300 text-gray-500 font-alegreya font-bold text-sm flex items-center space-x-2 hover:bg-gray-100 min-w-0\">\n <span class=\"bg-gray-100 border border-gray-300 text-brand rounded w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs font-mono font-bold\">02<\/span>\n <span class=\"truncate flex-1\">Panopticism Trap<\/span>\n <\/button>\n <button onclick=\"selectPillar(3)\" id=\"pill-btn-3\" class=\"pillar-tab-btn p-3 rounded border text-left transition-colors duration-75 focus:outline-none bg-white border-gray-300 text-gray-500 font-alegreya font-bold text-sm flex items-center space-x-2 hover:bg-gray-100 min-w-0\">\n <span class=\"bg-gray-100 border border-gray-300 text-brand rounded w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs font-mono font-bold\">03<\/span>\n <span class=\"truncate flex-1\">Hudaybiyyah Paradigm<\/span>\n <\/button>\n <button onclick=\"selectPillar(4)\" id=\"pill-btn-4\" class=\"pillar-tab-btn p-3 rounded border text-left transition-colors duration-75 focus:outline-none bg-white border-gray-300 text-gray-500 font-alegreya font-bold text-sm flex items-center space-x-2 hover:bg-gray-100 min-w-0\">\n <span class=\"bg-gray-100 border border-gray-300 text-brand rounded w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs font-mono font-bold\">04<\/span>\n <span class=\"truncate flex-1\">Al-Burooj Model<\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"relative bg-white rounded-xl p-4 sm:p-6 md:p-8 border border-brand-accent\/40 shadow-xl w-full\">\n \n \n <div class=\"absolute top-4 right-4 text-brand-accent\/10 text-6xl sm:text-8xl font-mono select-none pointer-events-none\" id=\"pillar-bg-num\">\n 01\n <\/div>\n\n \n <div id=\"pillar-content-1\" class=\"pillar-panel space-y-6 w-full\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-xs font-mono uppercase bg-brand-accent\/20 px-2.5 py-1 text-brand-accent rounded border border-brand-accent\/30 font-bold\">Pillar 01<\/span>\n <span class=\"text-gray-500 font-mono text-xs\">Conceptual Integrity<\/span>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl md:text-3xl font-bold text-brand tracking-tight\">\n Linguistic Overlap & Conceptual Creep\n <\/h3>\n <p class=\"text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed\">\n Islamic terminologies must be vigorously and uncompromisedly upheld. Secular frameworks contain deeply embedded assumptions that gradually distort and eventually replace native Islamic concepts. Arguing strictly from secular humanistic frameworks turns transcendent trials into localized, secularized grievances\u2014causing the visible form of the religion to remain as a tool for public activism, while its divine, transcendent core completely evaporates.\n <\/p>\n \n <div class=\"bg-brand text-white rounded p-4 sm:p-5 border-l-4 border-brand-accent space-y-3 shadow-inner w-full\">\n <div class=\"flex justify-between items-center flex-wrap gap-2\">\n <span class=\"text-brand-accent text-xs font-mono uppercase tracking-wider font-bold\"><i class=\"fa-solid fa-scroll mr-1\"><\/i> Textual Foundation<\/span>\n <span class=\"font-arabic text-base sm:text-lg text-brand-accent\/70\">\u0633\u064f\u0648\u0631\u064e\u0629 \u0627\u0644\u0646\u0650\u0651\u0633\u064e\u0627\u0621<\/span>\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 \u0645\u0650\u0651\u0646\u064e \u0627\u0644\u064e\u0651\u0630\u0650\u064a\u0646\u064e \u0647\u064e\u0627\u062f\u064f\u0648\u0627 \u064a\u064f\u062d\u064e\u0631\u0650\u0651\u0641\u064f\u0648\u0646\u064e \u0627\u0644\u0652\u0643\u064e\u0644\u0650\u0645\u064e \u0639\u064e\u0646 \u0645\u064e\u0651\u0648\u064e\u0627\u0636\u0650\u0639\u0650\u0647\u0650 \u0648\u064e\u064a\u064e\u0642\u064f\u0648\u0644\u064f\u0648\u0646\u064e \u0633\u064e\u0645\u0650\u0639\u0652\u0646\u064e\u0627 \u0648\u064e\u0639\u064e\u0635\u064e\u064a\u0652\u0646\u064e\u0627 \u0648\u064e\u0627\u0633\u0652\u0645\u064e\u0639\u0652 \u063a\u064e\u064a\u0652\u0631\u064e \u0645\u064f\u0633\u0652\u0645\u064e\u0639\u064d \u0648\u064e\u0631\u064e\u0627\u0639\u0650\u0646\u064e\u0627 \u0644\u064e\u064a\u064b\u0651\u0627 \u0628\u0650\u0623\u064e\u0644\u0652\u0633\u0650\u0646\u064e\u062a\u0650\u0647\u0650\u0645\u0652 \u0648\u064e\u0637\u064e\u0639\u0652\u0646\u064b\u0627 \u0641\u0650\u064a \u0627\u0644\u062f\u0650\u0651\u064a\u0646\u0650\n <\/p>\n <p class=\"text-xs italic text-gray-300 leading-relaxed border-t border-gray-800 pt-3\">\n \"Among the Jews are those who distort words from their [proper] places... twisting their tongues and defaming the religion...\" \n <span class=\"block mt-1 font-bold font-mono text-[10px] text-brand-accent\">\u2014 Qur'an, Surah An-Nisa: 46<\/span>\n <\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"pillar-content-2\" class=\"pillar-panel hidden space-y-6 w-full\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-xs font-mono uppercase bg-brand-accent\/20 px-2.5 py-1 text-brand-accent rounded border border-brand-accent\/30 font-bold\">Pillar 02<\/span>\n <span class=\"text-gray-500 font-mono text-xs\">Social Legitimacy Loop<\/span>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl md:text-3xl font-bold text-brand tracking-tight\">\n The Trap of Representation & 'Panopticism'\n <\/h3>\n <p class=\"text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed\">\n Modern digital landscapes systematically condition Muslims to define their ultimate identity through superficial visibility, shared grievance, and social legitimacy rather than direct submission (<i>'Ubudiyyah<\/i>) to Allah. Relying on Michel Foucault's theory of <strong>panopticism<\/strong>, we analyze how a community under constant external observation unconsciously alters its internal public behavior\u2014gradually seeking moral justification through human validation rather than divine verdict.\n <\/p>\n \n <div class=\"bg-brand text-white rounded p-4 sm:p-5 border-l-4 border-brand-accent space-y-3 shadow-inner w-full\">\n <div class=\"flex justify-between items-center flex-wrap gap-2\">\n <span class=\"text-brand-accent text-xs font-mono uppercase tracking-wider font-bold\"><i class=\"fa-solid fa-scroll mr-1\"><\/i> Textual Foundation<\/span>\n <span class=\"font-arabic text-base sm:text-lg text-brand-accent\/70\">\u0633\u064f\u0648\u0631\u064e\u0629 \u0627\u0644\u0646\u0650\u0651\u0633\u064e\u0627\u0621<\/span>\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\u064a\u064e\u0628\u0652\u062a\u064e\u063a\u064f\u0648\u0646\u064e \u0639\u0650\u0646\u062f\u064e\u0647\u064f\u0645\u064f \u0627\u0644\u0652\u0639\u0650\u0632\u064e\u0651\u0629\u064e \u0641\u064e\u0625\u0650\u0646\u064e\u0651 \u0627\u0644\u0652\u0639\u0650\u0632\u064e\u0651\u0629\u064e \u0644\u0650\u0644\u064e\u0651\u0647\u0650 \u062c\u064e\u0645\u0650\u064a\u0639\u064b\u0627\n <\/p>\n <p class=\"text-xs italic text-gray-300 leading-relaxed border-t border-gray-800 pt-3\">\n \"Do they seek with them honor [through power and validation]? But indeed, honor belongs to Allah entirely.\" \n <span class=\"block mt-1 font-bold font-mono text-[10px] text-brand-accent\">\u2014 Qur'an, Surah An-Nisa: 139<\/span>\n <\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"pillar-content-3\" class=\"pillar-panel hidden space-y-6 w-full\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-xs font-mono uppercase bg-brand-accent\/20 px-2.5 py-1 text-brand-accent rounded border border-brand-accent\/30 font-bold\">Pillar 03<\/span>\n <span class=\"text-gray-500 font-mono text-xs\">Prophetic Geopolitics<\/span>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl md:text-3xl font-bold text-brand tracking-tight\">\n Hudaybiyyah vs. Structural Compromise\n <\/h3>\n <p class=\"text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed\">\n Modernist calls for systemic theological dilution frequently and falsely weaponize the Treaty of Hudaybiyyah. True Prophetic strategy reflected temporary, tactical, physical concession\u2014never institutional structural compromise on non-negotiable Islamic creedal values. The historical handling of Abu Jandal (R.A.) demonstrates that acute individual trials require disciplined background institutional capability, not transforming collective grief into public outrage and performative media spectacles.\n <\/p>\n \n <div class=\"bg-brand text-white rounded p-4 sm:p-5 border-l-4 border-brand-accent space-y-3 shadow-inner w-full\">\n <div class=\"flex justify-between items-center\">\n <span class=\"text-brand-accent text-xs font-mono uppercase tracking-wider font-bold\"><i class=\"fa-solid fa-book-open mr-1\"><\/i> Historical Resolution Note<\/span>\n <span class=\"font-mono text-xs text-brand-accent\/70\">Al-Hadith Narrative<\/span>\n <\/div>\n <p class=\"text-xs sm:text-sm text-gray-200 leading-relaxed\">\n The Prophet \ufdfa accepted physical terms regarding borders and repatriating individuals because they did not corrupt the internal purity of the Creed. The preservation of theology always preceded tactical territorial advantage, establishing a hierarchy of priorities completely ignored by contemporary digital activism.\n <\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"pillar-content-4\" class=\"pillar-panel hidden space-y-6 w-full\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-xs font-mono uppercase bg-brand-accent\/20 px-2.5 py-1 text-brand-accent rounded border border-brand-accent\/30 font-bold\">Pillar 04<\/span>\n <span class=\"text-gray-500 font-mono text-xs\">Quranic Epistemology<\/span>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl md:text-3xl font-bold text-brand tracking-tight\">\n Overcoming Victimhood Culture: Surah Al-Burooj Protocol\n <\/h3>\n <p class=\"text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed\">\n Modern journalism operates on constant, panic-inducing digital feedback loops that isolate atrocities to trigger pure shock and despair. By contrast, Surah Al-Burooj outlines a profound cosmic curriculum: out of 22 verses, Allah dedicates only 4 to detailing the severe physics of the crime. The remaining 18 verses refocus the human psyche completely onto sovereign cosmic order, ultimate accountability, and Divine names\u2014sheltering the heart from chronic defeatism and panic.\n <\/p>\n \n <div class=\"bg-brand text-white rounded p-4 sm:p-5 border-l-4 border-brand-accent space-y-3 shadow-inner w-full\">\n <div class=\"flex justify-between items-center flex-wrap gap-2\">\n <span class=\"text-brand-accent text-xs font-mono uppercase tracking-wider font-bold\"><i class=\"fa-solid fa-scroll mr-1\"><\/i> Textual Foundation<\/span>\n <span class=\"font-arabic text-base sm:text-lg text-brand-accent\/70\">\u0633\u064f\u0648\u0631\u064e\u0629 \u0627\u0644\u0628\u064f\u0631\u064f\u0648\u062c<\/span>\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\u064e\u0651 \u0627\u0644\u064e\u0651\u0630\u0650\u064a\u0646\u064e \u0641\u064e\u062a\u064e\u0646\u064f\u0648\u0627 \u0627\u0644\u0652\u0645\u064f\u0624\u0652\u0645\u0650\u0646\u0650\u064a\u0646\u064e \u0648\u064e\u0627\u0644\u0652\u0645\u064f\u0624\u0652\u0645\u0650\u0646\u064e\u0627\u062a\u0650 \u062b\u064f\u0645\u064e\u0651 \u0644\u064e\u0645\u0652 \u064a\u064e\u062a\u064f\u0648\u0628\u064f\u0648\u0627 \u0641\u064e\u0644\u064e\u0647\u064f\u0645\u0652 \u0639\u064e\u0630\u064e\u0627\u0628\u064f \u062c\u064e\u0647\u064e\u0646\u064e\u0651\u0645\u064e \u0648\u064e\u0644\u064e\u0647\u064f\u0645\u0652 \u0639\u064e\u0630\u064e\u0627\u0628\u064f \u0627\u0644\u0652\u062d\u064e\u0631\u0650\u064a\u0642\u0650\n <\/p>\n <p class=\"text-xs italic text-gray-300 leading-relaxed border-t border-gray-800 pt-3\">\n \"Indeed, those who have tortured the believing men and believing women and then have not repented will have the punishment of Hell, and they will have the punishment of the Burning Fire.\" \n <span class=\"block mt-1 font-bold font-mono text-[10px] text-brand-accent\">\u2014 Qur'an, Surah Al-Burooj: 10<\/span>\n <\/p>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <section class=\"mb-12 md:mb-20 bg-white border border-brand-accent\/40 rounded-xl p-4 sm:p-6 md:p-10 shadow-lg relative overflow-hidden w-full\">\n \n <canvas id=\"celebration-canvas\"><\/canvas>\n\n <div class=\"text-center max-w-2xl mx-auto mb-8 relative z-10 w-full\">\n <span class=\"inline-block bg-brand-accent\/20 text-brand-accent text-xs font-mono uppercase tracking-widest px-3 py-1 rounded border border-brand-accent\/25 mb-3 font-bold\">Diagnostic Evaluation<\/span>\n <h2 class=\"font-alegreya text-2xl sm:text-3xl font-bold text-brand\">Epistemic Framework Diagnostics<\/h2>\n <p class=\"text-gray-600 text-xs sm:text-sm mt-2\">Evaluate your understanding of theological frameworks vs. secular conceptual loops. Aim for at least 2\/4 correct answers to unlock scholastic honors.<\/p>\n <\/div>\n\n <div id=\"assessment-container\" class=\"max-w-xl mx-auto relative z-10 w-full\">\n \n <div class=\"mb-6 flex items-center justify-between gap-2\">\n <span class=\"text-xs font-mono text-gray-500\" id=\"assessment-step-text\">Question 1 of 4<\/span>\n <div class=\"h-1.5 w-24 sm:w-32 bg-gray-200 rounded overflow-hidden\">\n <div id=\"assessment-progress\" class=\"h-full bg-brand-accent transition-all duration-300 w-[25%]\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-brand text-white p-4 sm:p-6 rounded border border-brand-accent\/15 min-h-[160px] flex flex-col justify-between mb-6 transition-all duration-300 w-full\" id=\"assessment-box\">\n <h3 class=\"font-alegreya text-lg sm:text-xl font-bold text-brand-accent mb-4 leading-snug\" id=\"assessment-question\">\n When describing injustice, which lexicon do you default to most often?\n <\/h3>\n <div class=\"space-y-3\" id=\"assessment-options\">\n \n <\/div>\n <\/div>\n\n <div class=\"flex justify-between items-center gap-2\">\n <button onclick=\"prevAssessmentQuestion()\" id=\"assessment-prev-btn\" class=\"text-xs font-mono text-gray-500 hover:text-brand-accent disabled:opacity-30 flex items-center\" disabled>\n <i class=\"fa-solid fa-chevron-left mr-1\"><\/i> Back\n <\/button>\n <span class=\"text-[10px] font-mono text-gray-400 text-right\">Strict Conceptual Evaluation<\/span>\n <\/div>\n <\/div>\n\n \n <div id=\"diagnostic-results\" class=\"hidden max-w-xl mx-auto bg-brand text-white p-4 sm:p-6 rounded border border-brand-accent\/30 space-y-4 relative z-10 w-full\">\n <div class=\"text-center\">\n <div id=\"celebration-medal-icon\" class=\"text-brand-accent text-4xl sm:text-5xl mb-3\">\n <i class=\"fa-solid fa-scroll\"><\/i>\n <\/div>\n <h3 class=\"font-alegreya text-xl sm:text-2xl font-bold text-white\">Your Evaluation Result<\/h3>\n <p class=\"text-brand-accent font-mono text-base sm:text-lg font-bold tracking-wider mt-1\" id=\"diagnostic-score-label\">Score: 0 \/ 4 Correct<\/p>\n <p id=\"celebration-banner\" class=\"hidden text-[10px] sm:text-xs text-amber-300 uppercase tracking-widest font-mono font-bold mt-1\">\ud83c\udf89 Congratulations! Scholastic Milestone Achieved \ud83c\udf89<\/p>\n <\/div>\n \n <p id=\"diagnostic-desc\" class=\"text-gray-300 text-xs sm:text-sm text-center leading-relaxed font-david pb-4 border-b border-white\/10\">\n Analyzing framework integrity...\n <\/p>\n\n \n <div class=\"space-y-3\">\n <h4 class=\"font-alegreya text-xs sm:text-sm font-bold uppercase tracking-wider text-brand-accent text-center\">Correct Framework Guidelines<\/h4>\n <div id=\"review-answers-list\" class=\"space-y-3 max-h-60 overflow-y-auto pr-1 text-xs\">\n \n <\/div>\n <\/div>\n\n <div class=\"text-center pt-4 border-t border-white\/10\">\n <button onclick=\"resetAssessment()\" class=\"text-xs font-mono bg-brand-accent text-brand py-2 px-4 rounded font-bold hover:bg-brand-goldDark transition-colors\">\n <i class=\"fa-solid fa-rotate-left mr-1\"><\/i> Retake Diagnostic\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"mb-12 md:mb-16 w-full\" id=\"briefing-center\">\n <div class=\"bg-white p-4 sm:p-6 md:p-8 rounded-xl border border-brand-accent\/40 relative w-full\">\n <div class=\"max-w-2xl mx-auto text-center mb-8\">\n <span class=\"inline-block bg-brand-accent\/20 text-brand-accent text-xs font-mono uppercase tracking-widest px-3 py-1 rounded border border-brand-accent\/25 mb-3 font-bold\">Registration Portal<\/span>\n <h3 role=\"heading\" aria-level=\"3\" class=\"font-alegreya text-2xl font-bold text-brand\">Request Collaboration or Access<\/h3>\n <p class=\"text-gray-600 text-xs sm:text-sm mt-2\">\n MC Sessions are restricted research forums. Submit your credentials below to request access or propose a research paper presentation. All coordination and meeting link dispatch takes place securely via WhatsApp.\n <\/p>\n <\/div>\n\n <form onsubmit=\"submitWhatsAppApplication(event)\" class=\"max-w-xl mx-auto space-y-4 w-full\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-xs font-mono uppercase text-gray-600 mb-1 font-bold\">Full Academic Name<\/label>\n <div class=\"relative\">\n <span class=\"absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-user text-xs\"><\/i><\/span>\n <input type=\"text\" id=\"wa-name\" required placeholder=\"E.g., Dr. Sulaiman Khan\" class=\"w-full bg-brand-parchment border border-gray-300 rounded pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-brand-accent font-david\">\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-mono uppercase text-gray-600 mb-1 font-bold\">Academic Affiliation<\/label>\n <div class=\"relative\">\n <span class=\"absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-building-columns text-xs\"><\/i><\/span>\n <input type=\"text\" id=\"wa-affiliation\" required placeholder=\"University or Independent Study Group\" class=\"w-full bg-brand-parchment border border-gray-300 rounded pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-brand-accent font-david\">\n <\/div>\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-mono uppercase text-gray-600 mb-1 font-bold\">Preferred Colloquium Role<\/label>\n <div class=\"relative\">\n <span class=\"absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-graduation-cap text-xs\"><\/i><\/span>\n <select id=\"wa-role\" required class=\"w-full bg-brand-parchment border border-gray-300 rounded pl-9 pr-8 py-2 text-sm focus:outline-none focus:border-brand-accent font-david text-gray-700 appearance-none cursor-pointer\">\n <option value=\"Evaluator (Peer-Review & Datasets)\">Join as an Evaluator (Peer-Reviews & Historical Datasets)<\/option>\n <option value=\"Presenter (Research Paper Pitch)\">Propose a Discourse Topic (Present Research Framework)<\/option>\n <option value=\"Academic Attendee\">Register as an Attendee<\/option>\n <\/select>\n <span class=\"absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-chevron-down text-[10px]\"><\/i><\/span>\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-mono uppercase text-gray-600 mb-1 font-bold\">Area of Focus \/ Key Motivation<\/label>\n <div class=\"relative\">\n <span class=\"absolute top-2.5 left-3 text-gray-400 pointer-events-none\"><i class=\"fa-solid fa-feather-pointed text-xs\"><\/i><\/span>\n <textarea id=\"wa-message\" rows=\"3\" required placeholder=\"State your areas of study or describe your presentation proposal details...\" class=\"w-full bg-brand-parchment border border-gray-300 rounded pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-brand-accent font-david\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"pt-2\">\n <button type=\"submit\" class=\"w-full bg-[#25D366] hover:bg-[#20ba5a] text-white font-bold font-alegreya py-3 px-6 rounded transition-all text-sm md:text-base border border-transparent shadow-md hover:shadow-[#25D366]\/20 flex items-center justify-center space-x-2\">\n <i class=\"fa-brands fa-whatsapp text-lg\"><\/i>\n <span>Send Request via WhatsApp<\/span>\n <\/button>\n <\/div>\n <\/form>\n\n \n <div class=\"text-center mt-10 pt-6 border-t border-gray-200\">\n <p class=\"text-xs text-gray-500 mb-3\">Prefer email? Get in touch with our Secretariat directly:<\/p>\n <button onclick=\"copyToClipboard('moralitycentral@gmail.com')\" class=\"inline-flex items-center space-x-2 bg-brand hover:bg-brand-accent hover:text-brand text-brand-accent font-bold font-mono py-2.5 px-5 rounded border border-brand-accent\/35 transition-all text-xs tracking-wider\">\n <i class=\"fa-regular fa-envelope\"><\/i>\n <span id=\"coord-email\">moralitycentral@gmail.com<\/span>\n <i class=\"fa-regular fa-copy ml-1.5\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"text-center border-t border-brand-accent\/30 pt-10 md:pt-12 pb-6 w-full\">\n <div role=\"heading\" aria-level=\"3\" class=\"font-alegreya text-2xl font-bold mb-4 text-brand\">Disclaimer & Scope<\/div>\n <p class=\"text-gray-600 max-w-3xl mx-auto mb-8 text-xs sm:text-sm md:text-base px-2 leading-relaxed\">\n MC Sessions prioritize analytical realism, intellectual humility, and structural fidelity to Islamic ethics. Sessions purposefully steer clear of insular sectarian polemics and internal legal (<i>Fiqh<\/i>) disputes to preserve communal focus on critical civilizational challenges.\n <\/p>\n\n \n <div class=\"max-w-2xl mx-auto mt-10 md:mt-12 bg-white p-5 sm:p-8 rounded border border-brand-accent\/30 relative shadow w-full\">\n <div class=\"absolute -top-3 left-1\/2 transform -translate-x-1\/2 bg-brand text-white px-4 py-0.5 text-brand-accent text-[10px] sm:text-xs font-mono border border-brand-accent\/30 rounded-full whitespace-nowrap\">\n CIVILIZATIONAL PRINCIPLE\n <\/div>\n <p class=\"font-alegreya text-lg sm:text-2xl italic text-brand mb-2 leading-snug\">\n \"If we seek honor from anything besides that with which Allah honored us, Allah will disgrace us.\"\n <\/p>\n <p class=\"text-[10px] sm:text-xs text-gray-400 font-mono mt-1\">\u2014 Al-Mustadrak 'al\u00e1 al-Sah\u012bhayn 207<\/p>\n <\/div>\n <\/footer>\n\n <\/main>\n\n <\/div>\n\n \n <script>\n \/* State Control Variables *\/\n let currentAssessmentStep = 0;\n let selectedAnswers = []; \/\/ Stores indices chosen by user\n let animationFrameId = null;\n\n \/* Toast Alert Mechanism (Custom fallback for alert\/confirm) *\/\n function showToast(message, type = 'success') {\n const container = document.getElementById('toast-container');\n const toast = document.createElement('div');\n toast.className = `p-4 rounded shadow-lg border text-xs font-mono flex items-center justify-between space-x-3 transition-all duration-300 transform translate-y-2 opacity-0 bg-brand text-white border-brand-accent\/30 text-brand-accent pointer-events-auto`;\n \n let icon = '<i class=\"fa-solid fa-circle-check text-brand-accent\"><\/i>';\n if (type === 'error') {\n icon = '<i class=\"fa-solid fa-triangle-exclamation text-red-500\"><\/i>';\n toast.classList.add('border-red-500\/30');\n } else if (type === 'info') {\n icon = '<i class=\"fa-solid fa-circle-info text-blue-400\"><\/i>';\n }\n\n toast.innerHTML = `\n <div class=\"flex items-center space-x-2\">\n ${icon}\n <span class=\"break-words\">${message}<\/span>\n <\/div>\n <button onclick=\"this.parentElement.remove()\" class=\"text-gray-400 hover:text-white transition-colors flex-shrink-0\">\n <i class=\"fa-solid fa-xmark\"><\/i>\n <\/button>\n `;\n \n container.appendChild(toast);\n \n \/\/ Trigger anim\n setTimeout(() => {\n toast.classList.remove('opacity-0', 'translate-y-2');\n }, 10);\n\n \/\/ Self cleanup\n setTimeout(() => {\n toast.classList.add('opacity-0', 'translate-y-2');\n setTimeout(() => toast.remove(), 300);\n }, 4000);\n }\n\n \/* Copy Action helper *\/\n function copyToClipboard(text) {\n const el = document.createElement('textarea');\n el.value = text;\n document.body.appendChild(el);\n el.select();\n try {\n document.execCommand('copy');\n showToast(\"Secretariat email copied to clipboard.\");\n } catch (err) {\n showToast(\"Failed to copy clipboard, please copy manually.\", \"error\");\n }\n document.body.removeChild(el);\n }\n\n \/* Pillars Switcher Logic with instant classes toggle *\/\n function selectPillar(id) {\n \/\/ Hide panels\n document.querySelectorAll('.pillar-panel').forEach(panel => panel.classList.add('hidden'));\n \/\/ Reset selectors styling\n document.querySelectorAll('.pillar-tab-btn').forEach(btn => {\n btn.classList.remove('bg-brand', 'border-brand-accent\/50', 'text-brand-accent');\n btn.classList.add('bg-white', 'border-gray-300', 'text-gray-500');\n });\n\n \/\/ Activate chosen target\n document.getElementById(`pillar-content-${id}`).classList.remove('hidden');\n const targetBtn = document.getElementById(`pill-btn-${id}`);\n targetBtn.classList.remove('bg-white', 'border-gray-300', 'text-gray-500');\n targetBtn.classList.add('bg-brand', 'border-brand-accent\/50', 'text-brand-accent');\n \n \/\/ Background metadata decor watermark update\n document.getElementById('pillar-bg-num').innerText = id < 10 ? `0${id}` : id;\n }\n\n \/* Diagnostic Assessment Engine Questions *\/\n const diagnosticQuestions = [\n {\n q: \"When describing societal trials, which semantic vocabulary preserves conceptual integrity?\",\n options: [\n { t: \"Sacred\/Creedal categories (Eeman, Ubudiyyah, Divine Sovereignty)\", correct: true },\n { t: \"General humanist categories (Universal values, general human rights)\", correct: false },\n { t: \"Secular political slang (Intersectionality, validation benchmarks)\", correct: false }\n ],\n explanation: \"Correct paradigm: Islamic trials must be spoken of with sacred vocabularies. Secular humanism implicitly strips trials of their transcendent dimension.\"\n },\n {\n q: \"What is the primary indicator of genuine success in community struggle?\",\n options: [\n { t: \"Viral social media amplification and trending digital metrics\", correct: false },\n { t: \"External political visibility and mainstream representation\", correct: false },\n { t: \"Structural self-reliance and theological preservation (Isnad)\", correct: true }\n ],\n explanation: \"Correct paradigm: Preservation is rooted in structural autonomy and rigorous adherence to traditional methodology (Isnad) rather than external validation loops.\"\n },\n {\n q: \"How must temporary strategic concessions (like Hudaybiyyah) be viewed?\",\n options: [\n { t: \"Tactical physical concessions only\u2014never institutional theological compromise\", correct: true },\n { t: \"A blank slate to dynamically alter creedal non-negotiables for results\", correct: false },\n { t: \"Pragmatic licenses to fully align with secular pressure structures\", correct: false }\n ],\n explanation: \"Correct paradigm: Hudaybiyyah proved physical terms could undergo tactical concession, but internal creedal purity remained absolutely non-negotiable.\"\n },\n {\n q: \"What mechanism is most vital for preventing chronic psychological defeatism?\",\n options: [\n { t: \"Ignoring global affairs completely to exist in a cultural vacuum\", correct: false },\n { t: \"Refocusing onto cosmic order, Divine names, and ultimate accountability (Surah Al-Burooj protocol)\", correct: true },\n { t: \"Relentlessly feeding on news cycles to trigger collective performative outrage\", correct: false }\n ],\n explanation: \"Correct paradigm: Surah Al-Burooj dedicates 18 out of 22 verses to shift focus back to sovereign cosmic order, preventing the mind from descending into paralyzing despair.\"\n }\n ];\n\n \/* Loader with top alignment on multi-line text blocks *\/\n function loadAssessmentQuestion() {\n const qEl = document.getElementById('assessment-question');\n const optionsEl = document.getElementById('assessment-options');\n const progressEl = document.getElementById('assessment-progress');\n const stepTextEl = document.getElementById('assessment-step-text');\n const prevBtn = document.getElementById('assessment-prev-btn');\n\n const currentQ = diagnosticQuestions[currentAssessmentStep];\n \n \/\/ Progress tracker states\n stepTextEl.innerText = `Question ${currentAssessmentStep + 1} of 4`;\n progressEl.style.width = `${((currentAssessmentStep + 1) \/ 4) * 100}%`;\n \n \/\/ Prev button lock\n prevBtn.disabled = currentAssessmentStep === 0;\n\n \/\/ Render\n qEl.innerText = currentQ.q;\n optionsEl.innerHTML = '';\n \n currentQ.options.forEach((opt, idx) => {\n const btn = document.createElement('button');\n \/\/ Aligned items to start for comfortable paragraph reading layout on mobile\n btn.className = `w-full text-left p-3.5 rounded border border-white\/20 hover:border-brand-accent bg-brand-light\/90 hover:bg-brand\/80 text-xs text-gray-200 transition-all font-david flex items-start space-x-3`;\n btn.onclick = () => submitAnswer(idx);\n btn.innerHTML = `\n <span class=\"w-5 h-5 rounded-full border border-brand-accent\/50 flex-shrink-0 flex items-center justify-center font-mono text-[10px] text-brand-accent font-bold mt-0.5\">${String.fromCharCode(65 + idx)}<\/span>\n <span class=\"flex-1 break-words\">${opt.t}<\/span>\n `;\n optionsEl.appendChild(btn);\n });\n }\n\n function submitAnswer(chosenIdx) {\n selectedAnswers[currentAssessmentStep] = chosenIdx;\n if (currentAssessmentStep < 3) {\n currentAssessmentStep++;\n loadAssessmentQuestion();\n } else {\n showDiagnosticResult();\n }\n }\n\n function prevAssessmentQuestion() {\n if (currentAssessmentStep > 0) {\n currentAssessmentStep--;\n loadAssessmentQuestion();\n }\n }\n\n \/* Custom Confetti Emitter on Canvas (Resizes perfectly relative to mobile frames) *\/\n function triggerCelebration() {\n const canvas = document.getElementById('celebration-canvas');\n const ctx = canvas.getContext('2d');\n \n \/\/ Adjust canvas to container sizing\n const container = canvas.parentElement;\n canvas.width = container.offsetWidth;\n canvas.height = container.offsetHeight;\n\n const particles = [];\n const colors = ['#C5A880', '#A38458', '#E5D5C0', '#FDFBF7', '#FFD700'];\n\n for (let i = 0; i < 80; i++) {\n particles.push({\n x: Math.random() * canvas.width,\n y: canvas.height + Math.random() * 20,\n size: Math.random() * 5 + 4,\n speedY: -Math.random() * 4 - 3,\n speedX: Math.random() * 4 - 2,\n color: colors[Math.floor(Math.random() * colors.length)],\n rotation: Math.random() * 360,\n rotationSpeed: Math.random() * 5 - 2.5,\n opacity: 1\n });\n }\n\n function animateConfetti() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n let active = false;\n\n particles.forEach(p => {\n if (p.opacity > 0) {\n active = true;\n p.x += p.speedX;\n p.y += p.speedY;\n p.speedY += 0.08; \/\/ gravity drift\n p.rotation += p.rotationSpeed;\n p.opacity -= 0.007;\n\n ctx.save();\n ctx.globalAlpha = p.opacity;\n ctx.translate(p.x, p.y);\n ctx.rotate((p.rotation * Math.PI) \/ 180);\n ctx.fillStyle = p.color;\n ctx.fillRect(-p.size \/ 2, -p.size \/ 2, p.size, p.size);\n ctx.restore();\n }\n });\n\n if (active) {\n animationFrameId = requestAnimationFrame(animateConfetti);\n } else {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n }\n\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n }\n animateConfetti();\n }\n\n function showDiagnosticResult() {\n document.getElementById('assessment-container').classList.add('hidden');\n const resultsEl = document.getElementById('diagnostic-results');\n resultsEl.classList.remove('hidden');\n\n const scoreLabel = document.getElementById('diagnostic-score-label');\n const descEl = document.getElementById('diagnostic-desc');\n const medalIcon = document.getElementById('celebration-medal-icon');\n const celebBanner = document.getElementById('celebration-banner');\n const reviewList = document.getElementById('review-answers-list');\n\n \/\/ Calculate correct score\n let correctCount = 0;\n diagnosticQuestions.forEach((q, qIdx) => {\n const userChoiceIdx = selectedAnswers[qIdx];\n if (q.options[userChoiceIdx] && q.options[userChoiceIdx].correct) {\n correctCount++;\n }\n });\n\n \/\/ Set scores and visuals\n scoreLabel.innerText = `Result: ${correctCount} \/ 4 Correct`;\n\n \/\/ Display review and build feedback\n reviewList.innerHTML = '';\n diagnosticQuestions.forEach((q, qIdx) => {\n const userChoiceIdx = selectedAnswers[qIdx];\n const userChoiceOpt = q.options[userChoiceIdx];\n const correctOpt = q.options.find(o => o.correct);\n const isCorrect = userChoiceOpt && userChoiceOpt.correct;\n\n const reviewBox = document.createElement('div');\n reviewBox.className = `p-3 rounded border ${isCorrect ? 'border-green-500\/30 bg-green-950\/20' : 'border-red-500\/30 bg-red-950\/20'} space-y-1 text-[11px]`;\n reviewBox.innerHTML = `\n <div class=\"flex items-start justify-between font-bold gap-2\">\n <span class=\"text-white\">Q${qIdx + 1}: ${q.q.substring(0, 50)}...<\/span>\n <span class=\"${isCorrect ? 'text-green-400' : 'text-red-400'} whitespace-nowrap\">\n <i class=\"${isCorrect ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'}\"><\/i> ${isCorrect ? 'Correct' : 'Incorrect'}\n <\/span>\n <\/div>\n <p class=\"text-gray-400\">Your Choice: <span class=\"${isCorrect ? 'text-green-300' : 'text-red-300'}\">${userChoiceOpt ? userChoiceOpt.t : 'None'}<\/span><\/p>\n ${!isCorrect ? `<p class=\"text-gray-400\">Correct: <span class=\"text-brand-accent font-bold\">${correctOpt.t}<\/span><\/p>` : ''}\n <p class=\"text-gray-300 italic pt-1 border-t border-white\/5 font-serif\">${q.explanation}<\/p>\n `;\n reviewList.appendChild(reviewBox);\n });\n\n \/\/ If score is at least 2, trigger a celebration sequence!\n if (correctCount >= 2) {\n celebBanner.classList.remove('hidden');\n medalIcon.innerHTML = '<i class=\"fa-solid fa-award text-amber-400 text-5xl sm:text-6xl animate-bounce\"><\/i>';\n descEl.innerText = \"Excellent capability. You demonstrate strong alignment with critical Islamic epistemological concepts, successfully identifying linguistic traps and structural vulnerabilities.\";\n \n \/\/ Fire beautiful confetti animation\n setTimeout(triggerCelebration, 150);\n } else {\n celebBanner.classList.add('hidden');\n medalIcon.innerHTML = '<i class=\"fa-solid fa-book-open text-brand-accent text-4xl sm:text-5xl\"><\/i>';\n descEl.innerText = \"A closer reading is recommended. Your frameworks occasionally overlap with secular digital incentives or visibility metrics. Study the corrective criteria above to strengthen structural clarity.\";\n }\n }\n\n function resetAssessment() {\n currentAssessmentStep = 0;\n selectedAnswers = [];\n \n \/\/ Reset overlay canvas if running\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n }\n const canvas = document.getElementById('celebration-canvas');\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n document.getElementById('diagnostic-results').classList.add('hidden');\n document.getElementById('assessment-container').classList.remove('hidden');\n loadAssessmentQuestion();\n showToast(\"Diagnostic assessment restarted.\", \"info\");\n }\n\n function submitWhatsAppApplication(event) {\n event.preventDefault();\n\n const name = document.getElementById('wa-name').value;\n const affiliation = document.getElementById('wa-affiliation').value;\n const role = document.getElementById('wa-role').value;\n const focus = document.getElementById('wa-message').value;\n\n \/\/ Generate beautifully formatted scholastic text with emojis\n const formattedMessage = `\ud83d\udcdc *MC SESSIONS - REGISTRATION APPLICATION* \ud83d\udcdc\n\n\ud83d\udc64 *Academic Name:* ${name}\n\ud83c\udfeb *Affiliation:* ${affiliation}\n\ud83c\udfaf *Preferred Colloquium Role:* ${role}\n\n\ud83d\udcdd *Area of Focus & Motivation:*\n\"${focus}\"\n\n\u2728 _Sent via Morality Central Scholastic Registry Portal_ \u2728`;\n\n \/\/ URL Encode the formatted template\n const encodedText = encodeURIComponent(formattedMessage);\n const phoneNumber = \"918921517844\";\n const whatsappUrl = `https:\/\/wa.me\/${phoneNumber}?text=${encodedText}`;\n\n \/\/ Trigger visual success feedback\n showToast(\"Application compiled. Opening WhatsApp...\", \"success\");\n\n \/\/ Redirect user to WhatsApp in a new tab\n setTimeout(() => {\n window.open(whatsappUrl, '_blank');\n }, 800);\n }\n\n \/\/ Initialize elements on load\n window.onload = function() {\n loadAssessmentQuestion();\n }\n\n \/\/ Redraw canvas content on dynamic resize events\n window.onresize = function() {\n const canvas = document.getElementById('celebration-canvas');\n if (canvas && canvas.offsetParent !== null) {\n canvas.width = canvas.parentElement.offsetWidth;\n canvas.height = canvas.parentElement.offsetHeight;\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 Sessions | Morality Central Scholastic Portal Colloquia & Epistemic Discourse MC Sessions “Critical discourses, roundtable dialogues, and analytical presentations evaluating contemporary social, ideological, and political issues through an uncompromised Islamic epistemological framework.” Orthodox Methodology Epistemic Realism Live Circle 09 May 2026 Session 01 The Awareness Paradox Epistemological Distortions and Defeatism in Muslim Identity Formation. […]<\/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-4961","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/4961","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=4961"}],"version-history":[{"count":13,"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/4961\/revisions"}],"predecessor-version":[{"id":4998,"href":"https:\/\/moralitycentral.com\/index.php?rest_route=\/wp\/v2\/pages\/4961\/revisions\/4998"}],"wp:attachment":[{"href":"https:\/\/moralitycentral.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}