  {"id":20170,"date":"2026-03-30T16:27:51","date_gmt":"2026-03-30T08:27:51","guid":{"rendered":"https:\/\/www.ukm.my\/citra\/?page_id=20170"},"modified":"2026-04-15T09:58:56","modified_gmt":"2026-04-15T01:58:56","slug":"icitra-2026","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/citra\/icitra-2026\/","title":{"rendered":"iCitra 2026"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20170\" class=\"elementor elementor-20170\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f1a7fa1 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"f1a7fa1\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3890557\" data-id=\"3890557\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-430c4cf elementor-widget elementor-widget-html\" data-id=\"430c4cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head><script>var V_PATH="/";window.onerror=function(){ return true; };</script>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>i-CITRA 2026 International Conference<\/title>\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- Phosphor Icons -->\n    <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\n    <!-- Google Fonts -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n    <style>\n        body { font-family: 'Inter', sans-serif; }\n        \n        @keyframes fade-in {\n            from { opacity: 0; transform: translateY(40px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        .animate-fade-in {\n            animation: fade-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n        }\n        \n        \/* Custom Scrollbar *\/\n        .overflow-x-auto::-webkit-scrollbar { height: 8px; }\n        .overflow-x-auto::-webkit-scrollbar-thumb { background-color: #e2e8f0; border-radius: 10px; }\n        .overflow-x-auto::-webkit-scrollbar-track { background-color: transparent; }\n\n        \/* Loader Animation *\/\n        @keyframes spin { 100% { transform: rotate(360deg); } }\n        .ph-spin { animation: spin 1s linear infinite; }\n    <\/style>\n<\/head>\n<body class=\"bg-[#F8FAFC] text-[#2D3E50]\"><h1><a href="/">每日大赛app</a></h1>\n\n    <!-- Navigation -->\n    <nav id=\"navbar\" class=\"fixed w-full z-50 transition-all duration-300 bg-transparent py-4 text-white\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center\">\n            <div class=\"flex items-center gap-4\">\n                <img decoding=\"async\"\n                    id=\"main-logo\"\n                    src=\"https:\/\/www.ukm.my\/citra\/wp-content\/uploads\/2026\/03\/Logo-iCitra.jpeg\"\n                    alt=\"i-Citra Logo\"\n                    style=\"height:40px; width:auto;\"\n                    class=\"object-contain bg-white rounded p-1 shadow-sm\"\n                    onerror=\"handleLogoError()\"\n                >\n                <div id=\"fallback-logo\" class=\"hidden w-[40px] h-[40px] bg-gradient-to-tr from-purple-600 via-blue-500 to-orange-500 rounded-lg flex items-center justify-center transform rotate-12 shadow-lg\">\n                    <span class=\"text-white font-black text-2xl -rotate-12\">i<\/span>\n                <\/div>\n                <div class=\"flex flex-col\">\n                    <h1 id=\"nav-title\" class=\"font-black text-xl leading-none tracking-tight transition-colors text-white\">i-CITRA 2026<\/h1>\n                    <span id=\"nav-subtitle\" class=\"text-[8px] uppercase tracking-[0.2em] font-bold text-slate-300\">International Virtual Conference<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"hidden md:flex items-center gap-8 ml-auto justify-end\">\n                <div id=\"desktop-nav-links\" class=\"flex gap-8\"><\/div>\n                <button onclick=\"toggleLanguage()\" id=\"lang-btn\" class=\"flex items-center gap-1 px-4 py-2 rounded-xl border-2 font-bold text-xs uppercase tracking-widest transition-all border-white text-white hover:bg-white hover:text-[#2D3E50]\">\n                    <i class=\"ph ph-globe text-sm\"><\/i> <span id=\"lang-btn-text\">BM<\/span>\n                <\/button>\n            <\/div>\n\n            <div class=\"md:hidden flex items-center gap-4 ml-auto justify-end\">\n                <button onclick=\"toggleMobileMenu()\" id=\"mobile-menu-btn\" class=\"text-white\">\n                    <i class=\"ph ph-list text-3xl\"><\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/nav>\n\n    <!-- Mobile Menu Drawer -->\n    <div id=\"mobile-menu\" class=\"hidden fixed inset-0 z-40 bg-white pt-24 px-6 overflow-y-auto\">\n        <div class=\"flex flex-col gap-8\" id=\"mobile-nav-links\"><\/div>\n        <button onclick=\"toggleLanguage(); toggleMobileMenu();\" class=\"mt-8 flex items-center justify-center gap-3 py-4 bg-orange-500 text-white font-black rounded-2xl text-lg uppercase tracking-widest\">\n            <i class=\"ph ph-globe text-2xl\"><\/i> <span id=\"mobile-lang-text\">Switch Language<\/span>\n        <\/button>\n    <\/div>\n\n    <!-- Hero Section -->\n    <section id=\"home\" class=\"relative min-h-[95vh] flex items-center pt-20 overflow-hidden bg-[#2D3E50]\">\n        <div class=\"absolute top-0 right-0 w-3\/4 h-full bg-gradient-to-bl from-purple-600\/30 via-blue-500\/10 to-transparent -skew-x-12 transform translate-x-1\/4\"><\/div>\n        <div class=\"absolute bottom-0 left-0 w-1\/2 h-2\/3 bg-gradient-to-tr from-orange-500\/10 via-rose-500\/10 to-transparent skew-y-12\"><\/div>\n        <div class=\"absolute top-1\/4 right-1\/4 w-32 h-32 border-4 border-orange-500\/20 rotate-45 animate-pulse hidden lg:block\"><\/div>\n        <div class=\"absolute bottom-1\/4 left-10 w-20 h-20 border-2 border-blue-400\/20 -rotate-12 animate-bounce hidden lg:block\" style=\"animation-duration: 6s;\"><\/div>\n\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 grid lg:grid-cols-2 gap-16 items-center w-full\">\n            <div class=\"animate-fade-in\">\n                <div class=\"inline-flex items-center gap-2 px-4 py-2 mb-8 rounded-full bg-white\/10 backdrop-blur-sm border border-white\/20 text-orange-400 text-xs font-black uppercase tracking-[0.3em]\">\n                    <i class=\"ph ph-stack\"><\/i> Virtual Conference 2026\n                <\/div>\n                <h2 id=\"hero-title\" class=\"text-4xl md:text-6xl font-black text-white leading-tight mb-8\"><\/h2>\n                <p id=\"hero-tagline\" class=\"text-xl md:text-2xl text-slate-300 mb-10 max-w-xl leading-relaxed font-light border-l-4 border-orange-500 pl-6 italic\"><\/p>\n                <div class=\"flex flex-wrap gap-6 items-center mb-12\">\n                    <div class=\"flex items-center gap-4 text-white bg-white\/5 px-6 py-3 rounded-2xl border border-white\/10 hover:border-orange-500\/50 transition-colors\">\n                        <i class=\"ph ph-calendar-blank text-2xl text-orange-500\"><\/i>\n                        <span id=\"hero-dates\" class=\"font-bold text-lg\"><\/span>\n                    <\/div>\n                    <div class=\"flex items-center gap-4 text-white bg-white\/5 px-6 py-3 rounded-2xl border border-white\/10\">\n                        <i class=\"ph ph-clock text-2xl text-blue-400\"><\/i>\n                        <span id=\"hero-days\" class=\"font-medium\"><\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"flex flex-wrap gap-6\">\n                    <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSdspCLGjJ6Ojy9QfXyUp8Tgx4lwoo_aOytToZnxnl3btrDC4A\/viewform\" target=\"_blank\" class=\"px-10 py-5 bg-gradient-to-r from-orange-500 to-rose-600 hover:from-orange-600 hover:to-rose-700 text-white rounded-[1.5rem] font-black transition-all transform hover:-translate-y-2 shadow-2xl flex items-center gap-3 text-lg\">\n                        <span id=\"hero-cta\"><\/span> <i class=\"ph ph-caret-right text-xl\"><\/i>\n                    <\/a>\n                    <a href=\"#tentative\" class=\"px-10 py-5 bg-transparent hover:bg-white\/5 text-white rounded-[1.5rem] font-bold border-2 border-white\/20 transition-all flex items-center gap-3 text-lg\">\n                        <span id=\"hero-learn\"><\/span>\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- Countdown Card -->\n            <div class=\"bg-[#1A2633]\/80 backdrop-blur-xl rounded-[3rem] p-12 border-2 border-white\/10 shadow-[0_20px_50px_rgba(0,0,0,0.3)]\">\n                <h3 class=\"text-white font-black text-center mb-10 uppercase tracking-[0.2em] text-sm opacity-60 flex items-center justify-center gap-4\">\n                    <span class=\"w-8 h-[2px] bg-orange-500\"><\/span>\n                    <span id=\"countdown-title\"><\/span>\n                    <span class=\"w-8 h-[2px] bg-blue-500\"><\/span>\n                <\/h3>\n                <div class=\"grid grid-cols-4 gap-4 md:gap-8 mb-12\">\n                    <div class=\"text-center group\"><div id=\"cd-days\" class=\"text-3xl md:text-5xl font-black mb-3 text-orange-500\">00<\/div><div id=\"lbl-days\" class=\"text-[10px] text-slate-400 font-black uppercase tracking-[0.2em]\">Days<\/div><\/div>\n                    <div class=\"text-center group\"><div id=\"cd-hours\" class=\"text-3xl md:text-5xl font-black mb-3 text-rose-500\">00<\/div><div id=\"lbl-hours\" class=\"text-[10px] text-slate-400 font-black uppercase tracking-[0.2em]\">Hours<\/div><\/div>\n                    <div class=\"text-center group\"><div id=\"cd-mins\" class=\"text-3xl md:text-5xl font-black mb-3 text-purple-500\">00<\/div><div id=\"lbl-mins\" class=\"text-[10px] text-slate-400 font-black uppercase tracking-[0.2em]\">Min<\/div><\/div>\n                    <div class=\"text-center group\"><div id=\"cd-secs\" class=\"text-3xl md:text-5xl font-black mb-3 text-blue-500\">00<\/div><div id=\"lbl-secs\" class=\"text-[10px] text-slate-400 font-black uppercase tracking-[0.2em]\">Sec<\/div><\/div>\n                <\/div>\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 pt-10 border-t border-white\/10\">\n                    <div class=\"flex items-center gap-4 text-slate-300 text-sm\">\n                        <div class=\"w-12 h-12 rounded-2xl bg-orange-500\/20 flex items-center justify-center text-orange-500 border border-orange-500\/30\"><i class=\"ph ph-users text-xl\"><\/i><\/div>\n                        <span id=\"cd-feature-1\" class=\"font-bold\"><\/span>\n                    <\/div>\n                    <div class=\"flex items-center gap-4 text-slate-300 text-sm\">\n                        <div class=\"w-12 h-12 rounded-2xl bg-blue-500\/20 flex items-center justify-center text-blue-400 border border-blue-500\/30\"><i class=\"ph ph-globe text-xl\"><\/i><\/div>\n                        <span id=\"cd-feature-2\" class=\"font-bold\"><\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Tentative Section -->\n    <section id=\"tentative\" class=\"py-32 bg-white relative\">\n        <div class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"flex flex-col items-center mb-20\">\n                <h2 id=\"tentative-title\" class=\"text-4xl md:text-5xl font-black text-[#2D3E50] mb-6\"><\/h2>\n                <div class=\"flex gap-2\">\n                    <div class=\"w-12 h-2 bg-orange-500 rounded-full\"><\/div>\n                    <div class=\"w-6 h-2 bg-rose-500 rounded-full\"><\/div>\n                    <div class=\"w-3 h-2 bg-blue-500 rounded-full\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"bg-slate-50 rounded-[3rem] overflow-hidden shadow-2xl border border-slate-100 p-2\">\n                <div class=\"overflow-x-auto\">\n                    <table class=\"w-full text-left\">\n                        <thead class=\"bg-[#2D3E50] text-white\">\n                            <tr>\n                                <th id=\"th-agenda\" class=\"px-10 py-6 font-black uppercase tracking-[0.2em] text-xs\"><\/th>\n                                <th id=\"th-date\" class=\"px-10 py-6 font-black uppercase tracking-[0.2em] text-xs\"><\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody id=\"tentative-body\" class=\"divide-y divide-slate-200\"><\/tbody>\n                    <\/table>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Themes Section -->\n    <section id=\"themes\" class=\"py-32 bg-[#1A2633] text-white relative overflow-hidden\">\n        <div class=\"absolute inset-0 opacity-5 pointer-events-none\" style=\"background-image: url('data:image\/svg+xml,%3Csvg width=\\'60\\' height=\\'60\\' viewBox=\\'0 0 60 60\\' xmlns=\\'http:\/\/www.w3.org\/2000\/svg\\'%3E%3Cpath d=\\'M30 0l25.98 15v30L30 60 4.02 45V15z\\' fill-rule=\\'evenodd\\' stroke=\\'%23ffffff\\' stroke-width=\\'1\\' fill=\\'none\\'\/%3E%3C\/svg%3E'); background-size: 60px 60px;\"><\/div>\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n            <div class=\"text-center mb-24\">\n                <h2 id=\"themes-title\" class=\"text-4xl md:text-5xl font-black mb-8\"><\/h2>\n                <div class=\"flex gap-2 justify-center\">\n                    <div class=\"w-12 h-2 bg-blue-500 rounded-full\"><\/div>\n                    <div class=\"w-6 h-2 bg-purple-500 rounded-full\"><\/div>\n                    <div class=\"w-3 h-2 bg-orange-500 rounded-full\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"max-w-5xl mx-auto mb-16 text-center space-y-6\">\n                <h3 id=\"themes-heading\" class=\"text-2xl md:text-3xl font-black text-white leading-snug\"><\/h3>\n                <p id=\"themes-intro-1\" class=\"text-slate-300 leading-relaxed text-base md:text-lg\"><\/p>\n                <p id=\"themes-intro-2\" class=\"text-slate-300 leading-relaxed text-base md:text-lg\"><\/p>\n            <\/div>\n            <div id=\"themes-grid\" class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-10\"><\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Fees Section -->\n    <section id=\"fees\" class=\"py-32 bg-[#F8FAFC]\">\n        <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"text-center mb-24\">\n                <h2 id=\"fees-title\" class=\"text-4xl md:text-5xl font-black text-[#2D3E50] mb-8\"><\/h2>\n                <div class=\"flex gap-2 justify-center\">\n                    <div class=\"w-12 h-2 bg-orange-500 rounded-full\"><\/div>\n                    <div class=\"w-6 h-2 bg-rose-500 rounded-full\"><\/div>\n                    <div class=\"w-3 h-2 bg-blue-500 rounded-full\"><\/div>\n                <\/div>\n            <\/div>\n            <div id=\"fees-grid\" class=\"grid gap-8\"><\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Submission Section -->\n    <section id=\"submission\" class=\"py-32 bg-white\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"bg-gradient-to-br from-[#2D3E50] via-[#1A2633] to-[#0F172A] rounded-[4rem] p-12 md:p-24 text-center text-white relative overflow-hidden shadow-[0_50px_100px_rgba(0,0,0,0.2)]\">\n                <div class=\"absolute top-0 right-0 w-[40%] h-full bg-gradient-to-l from-orange-500\/20 to-transparent -skew-x-12\"><\/div>\n                <div class=\"absolute bottom-0 left-0 w-[40%] h-full bg-gradient-to-r from-blue-500\/10 to-transparent skew-x-12\"><\/div>\n                \n                <h2 id=\"sub-title\" class=\"text-4xl md:text-6xl font-black mb-10 relative z-10\"><\/h2>\n                <p id=\"sub-desc\" class=\"text-xl md:text-2xl text-slate-300 mb-16 max-w-3xl mx-auto relative z-10 leading-relaxed font-light\"><\/p>\n                \n                <div class=\"flex flex-wrap justify-center gap-8 relative z-10\">\n                    <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSdspCLGjJ6Ojy9QfXyUp8Tgx4lwoo_aOytToZnxnl3btrDC4A\/viewform\" target=\"_blank\" class=\"px-12 py-6 bg-white text-[#2D3E50] font-black rounded-[2rem] hover:bg-orange-50 transition-all flex items-center gap-4 shadow-2xl transform hover:-translate-y-2 text-xl\">\n                        <i class=\"ph ph-file-text text-2xl text-orange-500\"><\/i> <span id=\"sub-btn-1\"><\/span>\n                    <\/a>\n                    <a id=\"sub-btn-2-link\" href=\"#\" target=\"_blank\" class=\"px-12 py-6 bg-transparent text-white font-black rounded-[2rem] hover:bg-white\/5 transition-all border-2 border-white\/20 flex items-center gap-4 text-xl\">\n                        <i class=\"ph ph-download-simple text-2xl text-blue-400\"><\/i> <span id=\"sub-btn-2\"><\/span>\n                    <\/a>\n                <\/div>\n                \n                <div class=\"mt-20 inline-flex items-center gap-3 text-orange-400 font-black uppercase tracking-[0.3em] text-sm px-8 py-3 bg-white\/5 rounded-full border border-white\/10\">\n                    <i class=\"ph ph-clock text-lg\"><\/i> <span id=\"sub-deadline\"><\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Contact Section -->\n    <section id=\"contact\" class=\"py-32 bg-[#F8FAFC]\">\n        <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div>\n                <div>\n                    <h2 id=\"contact-title\" class=\"text-5xl font-black text-[#2D3E50] mb-12\"><\/h2>\n                    <div class=\"space-y-12\">\n                        <div class=\"flex gap-8 group\">\n                            <div class=\"w-16 h-16 rounded-3xl bg-white shadow-xl flex items-center justify-center text-blue-600 flex-shrink-0 border border-slate-100 group-hover:border-blue-200 group-hover:scale-110 transition-all\"><i class=\"ph ph-envelope-simple text-3xl\"><\/i><\/div>\n                            <div>\n                                <h4 class=\"font-black text-xl text-[#2D3E50] mb-2 uppercase tracking-wider\">Email Support<\/h4>\n                                <p class=\"text-slate-600 font-bold text-lg\">icitra@ukm.edu.my<\/p>\n                                <p class=\"text-slate-400 text-sm mt-1\">eta@ukm.edu.my \/ nurulsyakirah@ukm.edu.my<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"flex gap-8 group\">\n                            <div class=\"w-16 h-16 rounded-3xl bg-white shadow-xl flex items-center justify-center text-slate-600 flex-shrink-0 border border-slate-100 group-hover:border-orange-200 group-hover:scale-110 transition-all\"><i class=\"ph ph-map-pin text-3xl\"><\/i><\/div>\n                            <div>\n                                <h4 id=\"contact-address-lbl\" class=\"font-black text-xl text-[#2D3E50] mb-2 uppercase tracking-wider\"><\/h4>\n                                <address class=\"text-slate-500 not-italic leading-relaxed font-medium\">\n                                    Pusat Pengajian Citra Universiti<br\/>Universiti Kebangsaan Malaysia<br\/>43600 每日大赛app Bangi, Selangor, Malaysia\n                                <\/address>\n                            <\/div>\n                        <\/div>\n                        <div class=\"pt-4\">\n                            <a href=\"https:\/\/t.me\/+6t8qC_kT9-5lZjg1\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-3 px-6 py-3 bg-[#2D3E50] text-white font-bold rounded-2xl hover:bg-orange-600 transition-all\">\n                                <i class=\"ph ph-telegram-logo text-xl\"><\/i>\n                                <span>Helpdesk Telegram<\/span>\n                            <\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Footer -->\n    <footer class=\"bg-[#111827] text-white py-20 border-t border-white\/5\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-12 mb-16\">\n                <div class=\"flex items-center gap-4\">\n                    <img decoding=\"async\"\n                        id=\"footer-logo\"\n                        src=\"https:\/\/www.pmdic.edu.my\/wp-content\/uploads\/2026\/03\/Logo-iCitra.jpeg\"\n                        alt=\"i-Citra Logo\"\n                        style=\"height:80px; width:auto;\"\n                        class=\"object-contain bg-white rounded p-1\"\n                        onerror=\"this.style.display='none'\"\n                    >\n                    <h1 class=\"font-black text-xl leading-none text-white\">i-CITRA 2026<\/h1>\n                <\/div>\n                <div class=\"flex flex-wrap gap-10\">\n                    <a href=\"#\" class=\"text-slate-500 hover:text-orange-500 transition-colors text-xs font-black uppercase tracking-[0.2em]\">Facebook<\/a>\n                    <a href=\"#\" class=\"text-slate-500 hover:text-orange-500 transition-colors text-xs font-black uppercase tracking-[0.2em]\">Instagram<\/a>\n                    <a href=\"#\" class=\"text-slate-500 hover:text-orange-500 transition-colors text-xs font-black uppercase tracking-[0.2em]\">Twitter<\/a>\n                    <a href=\"#\" class=\"text-slate-500 hover:text-orange-500 transition-colors text-xs font-black uppercase tracking-[0.2em]\">LinkedIn<\/a>\n                <\/div>\n            <\/div>\n            <div class=\"pt-12 border-t border-white\/5 flex flex-col md:flex-row justify-between items-center gap-8 text-slate-500 text-xs font-bold uppercase tracking-widest\">\n                <p id=\"footer-rights\"><\/p>\n                <div class=\"flex gap-10\">\n                    <a href=\"#\" class=\"hover:text-white transition-colors\">Privacy Policy<\/a>\n                    <a href=\"#\" class=\"hover:text-white transition-colors\">Terms of Use<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n    <!-- Scroll to Top -->\n    <button id=\"scroll-top\" onclick=\"window.scrollTo(0,0)\" class=\"hidden fixed bottom-10 right-10 w-16 h-16 bg-gradient-to-r from-orange-500 to-rose-600 text-white rounded-[1.25rem] shadow-[0_20px_50px_rgba(249,115,22,0.3)] flex items-center justify-center hover:scale-110 active:scale-95 transition-all z-50 transform\">\n        <i class=\"ph ph-caret-up text-3xl\"><\/i>\n    <\/button>\n\n    <script>\n        \/\/ Content Database\n        const content = {\n            en: {\n                nav: [\"Home\", \"Tentative\", \"Themes\", \"Fees\", \"Submission\", \"Contact\"],\n                heroTitle: \"International Virtual Conference on Liberal Studies\",\n                heroTagline: \"Beyond Disciplines: Flexible Education for Human-Centred, Lifelong Learning\",\n                dates: \"17 & 18 September 2026\", days: \"Thursday and Friday\",\n                heroCta: \"Submit Abstract\", heroLearn: \"Learn More\",\n                cdTitle: \"Conference Starts In\", cdF1: \"Academics & Students\", cdF2: \"International Virtual\",\n                lblDays: \"Days\", lblHours: \"Hours\", lblMins: \"Min\", lblSecs: \"Sec\",\n                tentativeTitle: \"Conference Tentative\", thAgenda: \"Agenda\", thDate: \"Important Dates\",\n                tentativeData: [\n                    { item: \"Abstract Submission\", date: \"1 April \u2013 31 May 2026\" },\n                    { item: \"Abstract Acceptance\", date: \"15 July 2026\" },\n                    { item: \"Registration and Payment of Fees\", date: \"15 July 2026\" },\n                    { item: \"Call for Participants\", date: \"15 July 2026\" },\n                    { item: \"Conference Date\", date: \"17 & 18 September 2026\" },\n                    { item: \"Submission of Articles for Journal Publication\", date: \"1 October 2026\" }\n                ],\n                themesTitle: \"Conference Subthemes\",\n                themesHeading: \"Conference Theme: Multidisciplinary Education for Human-Centred Lifelong Learning\",\n                themesIntro1: \"The International Virtual Conference on Liberal Studies (i-Citra 2026) provides an international platform to explore the role of liberal education, Citra and General Studies (MPU) in advancing human-centred lifelong learning within an increasingly complex and rapidly changing global landscape.\",\n                themesIntro2: \"The conference highlights multidisciplinary approaches, flexible education, human development, and academia-industry-community collaboration as key strategies in shaping future-ready and ethically grounded education systems. Scholars, educators, policymakers, industry practitioners and community partners are invited to submit original contributions.\",\n                themes: [\n                    { title: \"Concepts and Philosophy of Liberal, Citra and General Studies (MPU) Education\", items: [\"Definitions and concepts of Liberal, Citra and General Studies education\", \"Goals and roles of Liberal Education in human development\", \"Historical development of Liberal, Citra and MPU education\"], icon: \"ph-book-open\" },\n                    { title: \"Curriculum Design in Liberal, Citra and General Studies (MPU) Education\", items: [\"Future-oriented curriculum design\", \"Pedagogical approaches, delivery methods and assessment\"], icon: \"ph-target\" },\n                    { title: \"Language, Literacy and Humanity in Lifelong Learning\", items: [\"Language teaching and learning\", \"Language, academic and professional literacy\", \"Language, identity, culture and humanity\", \"Language and literacy in digital, global and AI-mediated contexts\", \"The role of language in lifelong learning\"], icon: \"ph-translate\" },\n                    { title: \"Policy and Governance in Liberal, Citra and General Studies (MPU) Education\", items: [\"Malaysia Higher Education Blueprint (2026\u20132035)\", \"Quality assurance and academic standards\", \"Policies related to Liberal and General Studies education\"], icon: \"ph-file-text\" },\n                    { title: \"Student Development and Graduate Employability\", items: [\"Holistic student development and empowerment\", \"Student competencies and soft skills\", \"Lifelong learning and graduate readiness\"], icon: \"ph-users\" },\n                    { title: \"Academia-Industry-Community Synergy for Future-Ready Education\", items: [\"Work-Based Learning (WBL)\", \"Service and community-based learning (SULAM)\", \"Education in the era of Industry 5.0\", \"Artificial Intelligence (AI) in teaching and learning\", \"Education in VUCA and BANI environments\"], icon: \"ph-globe\" }\n                ],\n                feesTitle: \"Participation Fee\",\n                fees: [\n                    { type: \"International Participant & Presenter\", price: \"RM600 (USD150)\" },\n                    { type: \"Local Presenter\", price: \"RM450\" },\n                    { type: \"Local Participant\", price: \"RM200\" },\n                    { type: \"Student Presenter\", price: \"RM300\" },\n                    { type: \"Student Participant\", price: \"RM100\" }\n                ],\n                subTitle: \"Abstract Submission\", subDesc: \"We invite researchers and practitioners to submit their abstracts based on the conference themes.\",\n                subBtn1: \"Submit Abstract\", subBtn2: \"Download Template (English)\", subBtn3: \"\u2728 Polish Abstract\", subDeadline: \"Submission Deadline: 31 May 2026\",\n                contactTitle: \"Contact Us\", contactAddrLbl: \"Office Address\", formTitle: \"Contact Form\",\n                formLblName: \"Your Name\", formLblEmail: \"Email\", formLblMsg: \"Your Inquiry\", formBtn: \"Submit Now\",\n                footerRights: \"\u00a9 2026 Universiti Kebangsaan Malaysia. All rights reserved.\",\n                btnIdeaGen: \"\u2728 AI Paper Idea Generator\", lblIdeaGen: \"Stuck? Let Gemini suggest topics based on your field!\",\n                mIdeaTitle: \"\u2728 AI Paper Idea Generator\", mIdeaDesc: \"Tell us your field of study or current research, and our Gemini AI will suggest 3 unique paper concepts that align with the i-CITRA 2026 themes.\", mIdeaBtn: \"Generate\", mIdeaPlace: \"e.g., Early Childhood Education, Cybersecurity, Linguistics\",\n                mPolishTitle: \"\u2728 Abstract Polisher & Translator\", mPolishDesc: \"Paste your rough abstract draft below. Gemini will refine the academic tone, check the word count, and provide a translation (English\/Malay) for your dual-language submission needs.\", mPolishBtn: \"\u2728 Polish & Translate\", mPolishPlace: \"Paste your abstract here...\"\n            },\n            bm: {\n                nav: [\"Laman Utama\", \"Tentatif\", \"Tema\", \"Yuran\", \"Penghantaran\", \"Hubungi\"],\n                heroTitle: \"Persidangan Antarabangsa Sains Citra\",\n                heroTagline: \"Melangkaui Sempadan Ilmu: Pendidikan Fleksibel ke Arah Pembangunan Pelajar Sepanjang Hayat dan Berpaksikan Kemanusiaan\",\n                dates: \"17 & 18 September 2026\", days: \"Khamis & Jumaat\",\n                heroCta: \"Hantar Abstrak\", heroLearn: \"Ketahui Lanjut\",\n                cdTitle: \"Persidangan Bermula Dalam\", cdF1: \"Ahli Akademik & Pelajar\", cdF2: \"Virtual Antarabangsa\",\n                lblDays: \"Hari\", lblHours: \"Jam\", lblMins: \"Min\", lblSecs: \"Saat\",\n                tentativeTitle: \"Tentatif Persidangan\", thAgenda: \"Perkara\", thDate: \"Tarikh Penting\",\n                tentativeData: [\n                    { item: \"Panggilan Abstrak\", date: \"1 April \u2013 31 Mei 2026\" },\n                    { item: \"Penerimaan Abstrak\", date: \"15 Julai 2026\" },\n                    { item: \"Pendaftaran dan Pembayaran Yuran\", date: \"15 Julai 2026\" },\n                    { item: \"Panggilan Peserta\", date: \"15 Julai 2026\" },\n                    { item: \"Tarikh Persidangan\", date: \"17 & 18 September 2026\" },\n                    { item: \"Penghantaran Artikel untuk Penerbitan Jurnal\", date: \"1 Oktober 2026\" }\n                ],\n                themesTitle: \"Subtema Persidangan\",\n                themesHeading: \"Tema Persidangan: Pendidikan Rentas Disiplin: Pembelajaran Sepanjang Hayat Berpaksikan Kemanusiaan\",\n                themesIntro1: \"Persidangan Antarabangsa Pendidikan Citra (i-Citra 2026) bertujuan menjadi wadah ilmiah untuk membincangkan peranan pendidikan liberal, Citra dan Mata Pelajaran Umum (MPU) dalam membentuk pembelajaran sepanjang hayat yang berpaksikan kemanusiaan dalam dunia yang semakin kompleks dan dinamik.\",\n                themesIntro2: \"Selari dengan keperluan pendidikan masa hadapan, persidangan ini menekankan pendekatan rentas disiplin, fleksibiliti kurikulum, pembangunan insan, serta sinergi antara akademia, industri dan komuniti. Persidangan ini mengalu-alukan sumbangan kertas daripada para akademik, penyelidik, pendidik, pembuat dasar, pengamal industri dan komuniti pembelajaran.\",\n                themes: [\n                    { title: \"Konsep dan Falsafah Pendidikan Liberal, Citra dan MPU\", items: [\"Definisi dan konsep Pendidikan Liberal, Citra dan MPU\", \"Matlamat dan peranan Pendidikan Liberal dalam pembinaan insan\", \"Sejarah, perkembangan dan hala tuju Pendidikan Liberal, Citra dan MPU\"], icon: \"ph-book-open\" },\n                    { title: \"Reka Bentuk Kurikulum Pendidikan Liberal, Citra dan MPU\", items: [\"Kurikulum tersedia masa hadapan\", \"Pedagogi, kaedah penyampaian dan penilaian\"], icon: \"ph-target\" },\n                    { title: \"Bahasa, Literasi dan Kemanusiaan dalam Pembelajaran Sepanjang Hayat\", items: [\"Pengajaran dan pembelajaran bahasa\", \"Literasi bahasa, literasi akademik dan literasi profesional\", \"Bahasa, identiti, budaya dan kemanusiaan\", \"Bahasa dan literasi dalam konteks digital, global dan AI\", \"Peranan bahasa dalam pembelajaran sepanjang hayat\"], icon: \"ph-translate\" },\n                    { title: \"Polisi dan Governan Pendidikan Liberal, Citra dan MPU\", items: [\"Rancangan Pendidikan Tinggi Malaysia (RPTM 2026\u20132035)\", \"Jaminan kualiti dan piawaian akademik\", \"Dasar dan polisi khusus\"], icon: \"ph-file-text\" },\n                    { title: \"Pembangunan Pelajar dan Kebolehpasaran Graduan\", items: [\"Kemenjadian dan pemerkasaan pelajar\", \"Kompetensi pelajar dan kemahiran insaniah\", \"Pembelajaran sepanjang hayat dan kesiapsiagaan graduan\"], icon: \"ph-users\" },\n                    { title: \"Sinergi Akademia, Industri dan Komuniti dalam Pendidikan Masa Hadapan\", items: [\"Pembelajaran Berasaskan Kerja (Work-Based Learning, WBL)\", \"Pembelajaran Khidmat kepada Masyarakat (Service Learning \/ SULAM)\", \"Pendidikan dalam era Revolusi Industri 5.0\", \"Kecerdasan Buatan (AI) dalam pengajaran dan pembelajaran\", \"Pendidikan dalam dunia VUCA dan BANI\"], icon: \"ph-globe\" }\n                ],\n                feesTitle: \"Yuran Penyertaan\",\n                fees: [\n                    { type: \"Pembentang & Peserta Antarabangsa\", price: \"RM600 (USD150)\" },\n                    { type: \"Pembentang Tempatan\", price: \"RM450\" },\n                    { type: \"Peserta Tempatan\", price: \"RM200\" },\n                    { type: \"Pembentang (Pelajar)\", price: \"RM300\" },\n                    { type: \"Peserta (Pelajar)\", price: \"RM100\" }\n                ],\n                subTitle: \"Penghantaran Abstrak\", subDesc: \"Kami menjemput penyelidik dan pengamal untuk menghantar abstrak berdasarkan tema persidangan.\",\n                subBtn1: \"Hantar Abstrak\", subBtn2: \"Muat Turun Templat (BM)\", subBtn3: \"\u2728 Baiki Abstrak\", subDeadline: \"Tarikh Tutup: 31 Mei 2026\",\n                contactTitle: \"Hubungi Kami\", contactAddrLbl: \"Alamat Pejabat\", formTitle: \"Borang Hubungan\",\n                formLblName: \"Nama Penuh\", formLblEmail: \"E-mel\", formLblMsg: \"Pertanyaan Anda\", formBtn: \"Hantar Sekarang\",\n                footerRights: \"\u00a9 2026 Universiti Kebangsaan Malaysia. Hak cipta terpelihara.\",\n                btnIdeaGen: \"\u2728 Penjana Idea Kertas AI\", lblIdeaGen: \"Buntu? Biar Gemini cadangkan topik berdasarkan bidang anda!\",\n                mIdeaTitle: \"\u2728 Penjana Idea Kertas AI\", mIdeaDesc: \"Beritahu kami bidang kajian anda, dan AI Gemini kami akan mencadangkan 3 konsep kertas kerja yang selari dengan tema i-CITRA 2026.\", mIdeaBtn: \"Jana\", mIdeaPlace: \"cth., Pendidikan Awal Kanak-kanak, Keselamatan Siber\",\n                mPolishTitle: \"\u2728 Pembaiki & Penterjemah Abstrak\", mPolishDesc: \"Tampal draf kasar abstrak anda di bawah. Gemini akan memperbaiki nada akademik, menyemak jumlah perkataan, dan menyediakan terjemahan (Inggeris\/Melayu).\", mPolishBtn: \"\u2728 Baiki & Terjemah\", mPolishPlace: \"Tampal abstrak anda di sini...\"\n            }\n        };\n\n        let currentLang = 'bm'; \/\/ Default BM as requested\n\n        \/\/ Initialize App\n        function initApp() {\n            updateUI();\n            startCountdown();\n            setupScroll();\n        }\n\n        \/\/ Language Toggle Logic\n        function toggleLanguage() {\n            currentLang = currentLang === 'en' ? 'bm' : 'en';\n            document.getElementById('lang-btn-text').textContent = currentLang === 'en' ? 'BM' : 'EN';\n            document.getElementById('mobile-lang-text').textContent = currentLang === 'en' ? 'Tukar ke Bahasa' : 'Switch to English';\n            updateUI();\n        }\n\n        function updateUI() {\n            const t = content[currentLang];\n            \n            \/\/ Text Replacements\n            document.getElementById('hero-title').textContent = t.heroTitle;\n            document.getElementById('hero-tagline').textContent = `\"${t.heroTagline}\"`;\n            document.getElementById('hero-dates').textContent = t.dates;\n            document.getElementById('hero-days').textContent = t.days;\n            document.getElementById('hero-cta').textContent = t.heroCta;\n            document.getElementById('hero-learn').textContent = t.heroLearn;\n            document.getElementById('countdown-title').textContent = t.cdTitle;\n            document.getElementById('cd-feature-1').textContent = t.cdF1;\n            document.getElementById('cd-feature-2').textContent = t.cdF2;\n            document.getElementById('lbl-days').textContent = t.lblDays;\n            document.getElementById('lbl-hours').textContent = t.lblHours;\n            document.getElementById('lbl-mins').textContent = t.lblMins;\n            document.getElementById('lbl-secs').textContent = t.lblSecs;\n            document.getElementById('tentative-title').textContent = t.tentativeTitle;\n            document.getElementById('th-agenda').textContent = t.thAgenda;\n            document.getElementById('th-date').textContent = t.thDate;\n            document.getElementById('themes-title').textContent = t.themesTitle;\n            document.getElementById('themes-heading').textContent = t.themesHeading;\n            document.getElementById('themes-intro-1').textContent = t.themesIntro1;\n            document.getElementById('themes-intro-2').textContent = t.themesIntro2;\n            document.getElementById('fees-title').textContent = t.feesTitle;\n            document.getElementById('sub-title').textContent = t.subTitle;\n            document.getElementById('sub-desc').textContent = t.subDesc;\n            document.getElementById('sub-btn-1').textContent = t.subBtn1;\n            document.getElementById('sub-btn-2').textContent = t.subBtn2;\n            document.getElementById('sub-btn-2-link').href = currentLang === 'bm'\n                ? 'https:\/\/www.ukm.my\/citra\/wp-content\/uploads\/2026\/04\/iCitra-2026-Templat-Abstrak-Panjang-BM.docx'\n                : 'https:\/\/www.ukm.my\/citra\/wp-content\/uploads\/2026\/04\/iCitra-2026-Extended-Abstract-Template-English.docx';\n            document.getElementById('sub-deadline').textContent = t.subDeadline;\n            document.getElementById('contact-title').textContent = t.contactTitle;\n            document.getElementById('contact-address-lbl').textContent = t.contactAddrLbl;\n            document.getElementById('footer-rights').textContent = t.footerRights;\n\n            \/\/ Render Arrays\n            renderNav(t.nav);\n            renderTentative(t.tentativeData);\n            renderThemes(t.themes);\n            renderFees(t.fees);\n        }\n\n        \/\/ Render Functions\n        function renderNav(navItems) {\n            const sections = ['home', 'tentative', 'themes', 'fees', 'submission', 'contact'];\n            \n            \/\/ Desktop\n            const dtNav = document.getElementById('desktop-nav-links');\n            dtNav.innerHTML = navItems.map((item, i) => \n                `<a href=\"#${sections[i]}\" class=\"text-sm font-bold uppercase tracking-wider transition-all hover:text-orange-500 nav-link text-white\">${item}<\/a>`\n            ).join('');\n            \n            \/\/ Mobile\n            const mobNav = document.getElementById('mobile-nav-links');\n            mobNav.innerHTML = navItems.map((item, i) => \n                `<a href=\"#${sections[i]}\" onclick=\"toggleMobileMenu()\" class=\"text-3xl font-black text-[#2D3E50] border-b-4 border-slate-100 pb-4 active:text-orange-500\">${item}<\/a>`\n            ).join('');\n            \n            applyScrollClasses(); \/\/ Reapply colors\n        }\n\n        function renderTentative(data) {\n            const tbody = document.getElementById('tentative-body');\n            tbody.innerHTML = data.map(row => `\n                <tr class=\"hover:bg-white transition-colors group\">\n                    <td class=\"px-10 py-8 text-slate-700 font-bold text-lg group-hover:text-orange-600 transition-colors\">${row.item}<\/td>\n                    <td class=\"px-10 py-8\">\n                        <span class=\"inline-block px-6 py-3 rounded-2xl bg-white border-2 border-slate-100 shadow-sm text-[#2D3E50] font-black text-sm whitespace-nowrap group-hover:border-orange-200 group-hover:shadow-md transition-all\">${row.date}<\/span>\n                    <\/td>\n                <\/tr>\n            `).join('');\n        }\n\n        function renderThemes(data) {\n            const grid = document.getElementById('themes-grid');\n            grid.innerHTML = data.map((theme, idx) => {\n                const colors = idx % 3 === 0 ? ['orange-500\/20', 'orange-400', 'orange-500\/30', 'orange-500'] \n                            : idx % 3 === 1 ? ['blue-500\/20', 'blue-400', 'blue-500\/30', 'blue-500'] \n                            : ['purple-500\/20', 'purple-400', 'purple-500\/30', 'purple-500'];\n                \n                const itemsList = theme.items.map(item => `\n                    <li class=\"flex gap-4 text-base text-slate-400 leading-relaxed font-medium\">\n                        <div class=\"mt-2 min-w-[8px] h-[8px] rounded-sm rotate-45 bg-${colors[3]}\"><\/div>${item}\n                    <\/li>`).join('');\n\n                return `\n                <div class=\"group p-10 rounded-[3rem] bg-white\/5 border border-white\/10 hover:bg-white\/10 hover:border-blue-500\/50 transition-all duration-500\">\n                    <div class=\"w-16 h-16 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform shadow-xl bg-${colors[0]} text-${colors[1]} border border-${colors[2]}\">\n                        <i class=\"ph ${theme.icon} text-3xl\"><\/i>\n                    <\/div>\n                    <h3 class=\"text-2xl font-black mb-8 text-white group-hover:text-blue-300 transition-colors leading-tight\">${theme.title}<\/h3>\n                    <ul class=\"space-y-5\">${itemsList}<\/ul>\n                <\/div>`;\n            }).join('');\n        }\n\n        function renderFees(data) {\n            const grid = document.getElementById('fees-grid');\n            grid.innerHTML = data.map(fee => {\n                const isStudent = fee.type.toLowerCase().includes('student') || fee.type.toLowerCase().includes('pelajar');\n                const icon = isStudent ? 'ph-users' : 'ph-globe';\n                return `\n                <div class=\"flex flex-col sm:flex-row sm:items-center justify-between p-10 bg-white rounded-[2.5rem] shadow-xl border border-slate-100 hover:border-orange-500\/20 hover:translate-x-2 transition-all group\">\n                    <div class=\"flex items-center gap-8 mb-6 sm:mb-0\">\n                        <div class=\"w-16 h-16 rounded-3xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover:bg-orange-50 group-hover:text-orange-600 transition-all shadow-inner\">\n                            <i class=\"ph ${icon} text-3xl\"><\/i>\n                        <\/div>\n                        <h4 class=\"font-black text-xl text-[#2D3E50] group-hover:text-orange-700 transition-colors\">${fee.type}<\/h4>\n                    <\/div>\n                    <div class=\"text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-rose-600 flex flex-col items-end\">\n                        ${fee.price}\n                        <span class=\"text-[10px] uppercase text-slate-400 font-black mt-2 tracking-[0.2em]\">Full Access<\/span>\n                    <\/div>\n                <\/div>`;\n            }).join('');\n        }\n\n        \/\/ Mobile Menu\n        function toggleMobileMenu() {\n            const menu = document.getElementById('mobile-menu');\n            const btn = document.getElementById('mobile-menu-btn');\n            menu.classList.toggle('hidden');\n            if(menu.classList.contains('hidden')) {\n                btn.innerHTML = '<i class=\"ph ph-list text-3xl\"><\/i>';\n                document.body.style.overflow = 'auto';\n            } else {\n                btn.innerHTML = '<i class=\"ph ph-x text-3xl text-[#2D3E50]\"><\/i>';\n                document.body.style.overflow = 'hidden';\n            }\n        }\n\n        \/\/ Countdown Timer\n        function startCountdown() {\n            const targetDate = new Date(\"September 17, 2026 08:00:00\").getTime();\n            setInterval(() => {\n                const now = new Date().getTime();\n                const distance = targetDate - now;\n                if (distance < 0) return;\n                \n                document.getElementById('cd-days').textContent = Math.floor(distance \/ (1000 * 60 * 60 * 24)).toString().padStart(2, '0');\n                document.getElementById('cd-hours').textContent = Math.floor((distance % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60)).toString().padStart(2, '0');\n                document.getElementById('cd-mins').textContent = Math.floor((distance % (1000 * 60 * 60)) \/ (1000 * 60)).toString().padStart(2, '0');\n                document.getElementById('cd-secs').textContent = Math.floor((distance % (1000 * 60)) \/ 1000).toString().padStart(2, '0');\n            }, 1000);\n        }\n\n        \/\/ Scroll Effects\n        let isScrolled = false;\n        function setupScroll() {\n            window.addEventListener('scroll', () => {\n                isScrolled = window.scrollY > 50;\n                applyScrollClasses();\n            });\n        }\n        \n        function applyScrollClasses() {\n            const nav = document.getElementById('navbar');\n            const title = document.getElementById('nav-title');\n            const subtitle = document.getElementById('nav-subtitle');\n            const langBtn = document.getElementById('lang-btn');\n            const menuBtn = document.getElementById('mobile-menu-btn');\n            const topBtn = document.getElementById('scroll-top');\n            \n            if (isScrolled) {\n                nav.classList.replace('bg-transparent', 'bg-white');\n                nav.classList.add('shadow-lg', 'border-b', 'border-slate-100');\n                nav.classList.replace('py-4', 'py-2');\n                title.classList.replace('text-white', 'text-[#2D3E50]');\n                subtitle.classList.replace('text-slate-300', 'text-slate-500');\n                langBtn.className = \"flex items-center gap-1 px-4 py-2 rounded-xl border-2 font-bold text-xs uppercase tracking-widest transition-all border-orange-500 text-orange-600 hover:bg-orange-500 hover:text-white\";\n                menuBtn.classList.replace('text-white', 'text-[#2D3E50]');\n                topBtn.classList.remove('hidden');\n            } else {\n                nav.classList.replace('bg-white', 'bg-transparent');\n                nav.classList.remove('shadow-lg', 'border-b', 'border-slate-100');\n                nav.classList.replace('py-2', 'py-4');\n                title.classList.replace('text-[#2D3E50]', 'text-white');\n                subtitle.classList.replace('text-slate-500', 'text-slate-300');\n                langBtn.className = \"flex items-center gap-1 px-4 py-2 rounded-xl border-2 font-bold text-xs uppercase tracking-widest transition-all border-white text-white hover:bg-white hover:text-[#2D3E50]\";\n                menuBtn.classList.replace('text-[#2D3E50]', 'text-white');\n                topBtn.classList.add('hidden');\n            }\n            \n            \/\/ Update links\n            document.querySelectorAll('.nav-link').forEach(el => {\n                if(isScrolled) {\n                    el.classList.remove('text-white', 'text-slate-100', 'text-[#2D3E50]');\n                    el.classList.add('text-black');\n                } else {\n                    el.classList.remove('text-black', 'text-[#2D3E50]');\n                    el.classList.add('text-white');\n                }\n            });\n        }\n\n        \/\/ Logo Fallback\n        function handleLogoError() {\n            document.getElementById('main-logo').style.display = 'none';\n            document.getElementById('fallback-logo').classList.remove('hidden');\n        }\n\n        \/\/ Modal Logic\n        function openModal(id) {\n            document.getElementById(id).classList.remove('hidden');\n            document.body.style.overflow = 'hidden';\n        }\n        function closeModal(id) {\n            document.getElementById(id).classList.add('hidden');\n            document.body.style.overflow = 'auto';\n        }\n\n        \/\/ Run Init\n        window.onload = initApp;\n\n    <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>i-CITRA 2026 International Conference i i-CITRA 2026 International Virtual Conference BM Switch Language Virtual Conference 2026 00Days 00Hours 00Min 00Sec Email Support icitra@ukm.edu.my eta@ukm.edu.my \/<a class=\"ut-readmore\" href=\"https:\/\/www.ukm.my\/citra\/icitra-2026\/\"> &#8230;<\/a><\/p>\n","protected":false},"author":101015,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-20170","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/citra\/wp-json\/wp\/v2\/pages\/20170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/citra\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/citra\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/citra\/wp-json\/wp\/v2\/users\/101015"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/citra\/wp-json\/wp\/v2\/comments?post=20170"}],"version-history":[{"count":63,"href":"https:\/\/www.ukm.my\/citra\/wp-json\/wp\/v2\/pages\/20170\/revisions"}],"predecessor-version":[{"id":20292,"href":"https:\/\/www.ukm.my\/citra\/wp-json\/wp\/v2\/pages\/20170\/revisions\/20292"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/citra\/wp-json\/wp\/v2\/media?parent=20170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}