CeLOE Header Section<\/title>\n <style>\n \/* Import Font Poppins agar sesuai desain *\/\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;700;800&display=swap');\n\n \/* Container untuk memastikan layout rapi *\/\n .celoe-header-wrapper {\n font-family: 'Poppins', sans-serif;\n padding: 40px 20px;\n max-width: 1200px;\n margin: 0 auto;\n text-align: center;\n }\n\n \/* Styling Header Utama *\/\n .celoe-creative-header {\n position: relative;\n z-index: 1;\n \/* Animasi masuk dari atas *\/\n animation: celoeFadeInDown 1s ease-out;\n }\n\n .celoe-creative-header h2 {\n font-size: 2.8rem;\n color: #8a1a19; \/* Telkom Dark Maroon *\/\n font-weight: 800;\n margin: 0 0 20px 0;\n text-transform: uppercase;\n letter-spacing: 1px;\n position: relative;\n display: inline-block;\n }\n\n \/* Garis bawah merah di bawah judul *\/\n .celoe-creative-header h2::after {\n content: '';\n display: block;\n width: 60px;\n height: 4px;\n background: #b02120; \/* Telkom Red *\/\n margin: 10px auto 0;\n border-radius: 2px;\n transition: width 0.3s ease; \/* Efek transisi halus *\/\n }\n\n \/* Efek saat mouse diarahkan ke header: Garis memanjang *\/\n .celoe-creative-header:hover h2::after {\n width: 120px;\n }\n\n \/* Styling Paragraf Deskripsi *\/\n .celoe-creative-header p {\n color: #555;\n max-width: 700px;\n margin: 0 auto;\n font-size: 1.1rem;\n line-height: 1.6;\n }\n\n \/* Definisi Keyframes untuk Animasi *\/\n @keyframes celoeFadeInDown {\n from { \n opacity: 0; \n transform: translateY(-30px); \n }\n to { \n opacity: 1; \n transform: translateY(0); \n }\n }\n\n \/* Responsif untuk Layar HP *\/\n @media (max-width: 768px) {\n .celoe-creative-header h2 {\n font-size: 2rem; \/* Ukuran font lebih kecil di HP *\/\n }\n .celoe-creative-header p {\n font-size: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"celoe-header-wrapper\">\n <div class=\"celoe-creative-header\">\n <h2>Virtual Tour Fasilitas CeLOE<\/h2>\n <p>Eksplorasi potensi pembelajaran digital Anda. Dari konsep dasar hingga teknologi imersif masa depan, kami siap memandu transformasi pendidikan Anda.<\/p>\n <\/div>\n <\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f71cea elementor-widget elementor-widget-html\" data-id=\"5f71cea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n \/* --- CSS WRAPPER (AMAN ELEMENTOR) --- *\/\n #celoe-wrapper-v2 {\n position: relative;\n width: 100%;\n max-width: 100%;\n margin: 0 auto;\n font-family: 'Segoe UI', sans-serif;\n line-height: normal;\n z-index: 1;\n }\n\n #celoe-wrapper-v2 * {\n box-sizing: border-box !important;\n outline: none;\n }\n\n \/* Kartu Utama *\/\n #celoe-wrapper-v2 .vr-card {\n position: relative;\n width: 100%;\n border-radius: 12px;\n overflow: hidden;\n background-color: #1e293b; \n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n }\n\n \/* Aspect Ratio Default (Desktop 16:9) *\/\n #celoe-wrapper-v2 .vr-ratio {\n position: relative;\n width: 100%;\n padding-top: 56.25%; \/* Rasio Desktop *\/\n }\n\n \/* --- MOBILE OPTIMIZATION (SOLUSI MASALAH GEPENG) --- *\/\n @media (max-width: 767px) {\n #celoe-wrapper-v2 .vr-ratio {\n padding-top: 0; \/* Matikan rasio 16:9 *\/\n height: 80vh; \/* Ubah jadi tinggi Portrait (70% layar HP) *\/\n min-height: 450px; \/* Jaga agar tidak terlalu pendek di HP kecil *\/\n }\n \n #celoe-wrapper-v2 .vr-title {\n font-size: 24px !important; \/* Sesuaikan font judul di HP *\/\n margin-bottom: 5px !important;\n }\n\n #celoe-wrapper-v2 .play-btn {\n width: 60px;\n height: 60px;\n margin: 15px auto;\n }\n }\n\n \/* OVERLAY CONTAINER *\/\n #celoe-wrapper-v2 .vr-overlay {\n position: absolute;\n inset: 0;\n z-index: 20;\n background: #000; \/* Fallback color *\/\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: opacity 0.5s ease, visibility 0.5s ease;\n overflow: hidden; \/* Pastikan gambar tidak bocor *\/\n }\n\n \/* --- SETTING BACKGROUND IMAGE & FILTER TELKOM --- *\/\n\n \/* 1. BACKGROUND FOTO *\/\n #celoe-wrapper-v2 .vr-bg-image {\n position: absolute;\n inset: 0;\n z-index: 1;\n background-size: cover;\n background-position: center;\n \/* Efek Zoom in sedikit saat hover (opsional) *\/\n transition: transform 0.6s ease;\n \n \/* --- GANTI URL FOTO DISINI --- *\/\n background-image: url('https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/Thumbnail-360-celoe-scaled.png'); \n }\n\n \/* 2. FILTER WARNA (TELKOM PALETTE) *\/\n #celoe-wrapper-v2 .vr-bg-filter {\n position: absolute;\n inset: 0;\n z-index: 2;\n \/* Gradient Merah Telkom (atas transparan, bawah gelap) agar tulisan jelas *\/\n background: linear-gradient(to bottom, rgba(144, 5, 4, 0.4), rgba(15, 23, 42, 0.9));\n \/* Blend mode untuk menyatukan warna dengan foto *\/\n mix-blend-mode: multiply; \n }\n\n \/* Efek Hover pada Foto *\/\n #celoe-wrapper-v2 .vr-overlay:hover .vr-bg-image {\n transform: scale(1.05); \/* Zoom in halus saat mouse diarahkan *\/\n }\n\n \/* Konten Teks *\/\n #celoe-wrapper-v2 .vr-content {\n position: relative;\n z-index: 30; \/* Di atas filter & foto *\/\n text-align: center;\n padding: 15px;\n transition: opacity 0.3s;\n }\n\n \/* Judul *\/\n #celoe-wrapper-v2 .vr-title {\n margin: 0 0 10px 0 !important;\n color: #fff !important;\n font-size: clamp(20px, 4vw, 32px) !important;\n font-weight: 700 !important;\n line-height: 1.2 !important;\n text-shadow: 0 2px 4px rgba(0,0,0,0.5); \/* Shadow agar terbaca di foto terang *\/\n }\n \n #celoe-wrapper-v2 .vr-subtitle {\n display: block;\n font-size: 14px;\n color: #e2e8f0;\n margin-top: 5px;\n font-weight: 500;\n letter-spacing: 1px;\n }\n\n \/* Tombol Play *\/\n #celoe-wrapper-v2 .play-btn {\n width: 70px;\n height: 70px;\n background: #be1e2d; \/* Telkom Red Solid *\/\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 20px auto;\n cursor: pointer;\n position: relative;\n box-shadow: 0 0 20px rgba(190, 30, 45, 0.6);\n border: 2px solid rgba(255,255,255,0.2);\n transition: transform 0.2s, background 0.3s;\n }\n\n #celoe-wrapper-v2 .play-btn svg {\n width: 28px;\n height: 28px;\n fill: #fff;\n margin-left: 4px;\n }\n\n #celoe-wrapper-v2 .play-btn:hover {\n transform: scale(1.1);\n background: #d62336;\n }\n\n \/* LOADER *\/\n #celoe-wrapper-v2 .vr-loader {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n z-index: 25;\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n }\n\n #celoe-wrapper-v2 .spinner {\n width: 40px; height: 40px;\n border: 4px solid rgba(255,255,255,0.2);\n border-top: 4px solid #be1e2d;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-bottom: 15px;\n }\n \n #celoe-wrapper-v2 .loading-text {\n color: #fff;\n font-size: 14px;\n letter-spacing: 1px;\n text-shadow: 0 2px 4px rgba(0,0,0,0.8);\n }\n\n \/* Tombol Fallback *\/\n #celoe-wrapper-v2 .fallback-btn {\n display: none;\n margin-top: 15px;\n padding: 8px 16px;\n background: rgba(0,0,0,0.5);\n border: 1px solid rgba(255,255,255,0.3);\n color: #fff;\n text-decoration: none;\n border-radius: 4px;\n font-size: 12px;\n cursor: pointer;\n backdrop-filter: blur(4px);\n }\n #celoe-wrapper-v2 .fallback-btn:hover { background: rgba(0,0,0,0.7); }\n\n \/* IFRAME *\/\n #celoe-wrapper-v2 iframe {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n border: 0;\n opacity: 0; \/* Hidden default *\/\n transition: opacity 0.8s ease;\n z-index: 10;\n background: #fff; \n }\n\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n\n<\/style>\n\n<div id=\"celoe-wrapper-v2\">\n <div class=\"vr-card\">\n <div class=\"vr-ratio\">\n \n \n <div class=\"vr-overlay\" id=\"v2Overlay\">\n \n <div class=\"vr-bg-image\"><\/div>\n \n <div class=\"vr-bg-filter\"><\/div>\n \n \n <div class=\"vr-content\" id=\"v2Content\">\n <h2 class=\"vr-title\">Fasilitas Produksi Konten CeLOE <span class=\"vr-subtitle\">Virtual Tour Studio Experience<\/span><\/h2>\n \n <div class=\"play-btn\" onclick=\"startCeloeTour()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <\/div>\n \n <div style=\"color:#e2e8f0; font-size:12px; font-weight:500;\">Klik untuk Mulai<\/div>\n <\/div>\n\n \n <div class=\"vr-loader\" id=\"v2Loader\">\n <div class=\"spinner\"><\/div>\n <div class=\"loading-text\">SEDANG MEMUAT...<\/div>\n <a href=\"https:\/\/v1celoe.netlify.app\/\" target=\"_blank\" class=\"fallback-btn\" id=\"v2Fallback\">\n Lama memuat? Buka di Tab Baru\n <\/a>\n <\/div>\n <\/div>\n\n \n <iframe \n id=\"v2Iframe\"\n data-src=\"https:\/\/v1celoe.netlify.app\/\" \n allowfullscreen \n allow=\"gyroscope; accelerometer; fullscreen; xr-spatial-tracking;\"\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\">\n <\/iframe>\n\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n function startCeloeTour() {\n var overlay = document.getElementById('v2Overlay');\n var content = document.getElementById('v2Content');\n var loader = document.getElementById('v2Loader');\n var fallback = document.getElementById('v2Fallback');\n var iframe = document.getElementById('v2Iframe');\n\n \/\/ 1. Sembunyikan Tombol Play, Tampilkan Loader\n content.style.opacity = '0';\n setTimeout(function(){ content.style.display = 'none'; }, 300);\n \n loader.style.display = 'flex';\n\n \/\/ 2. Load Source Iframe\n if (!iframe.src) {\n iframe.src = iframe.getAttribute('data-src');\n }\n\n \/\/ 3. Timer Fallback (Jika 5 detik masih loading, munculkan tombol alternatif)\n var loadTimer = setTimeout(function() {\n fallback.style.display = 'inline-block';\n loader.querySelector('.loading-text').innerText = \"Koneksi lambat...\";\n }, 5000);\n\n \/\/ 4. Deteksi Iframe Selesai Load\n iframe.onload = function() {\n clearTimeout(loadTimer); \n \n iframe.style.opacity = '1';\n \n overlay.style.opacity = '0';\n setTimeout(function(){ \n overlay.style.visibility = 'hidden'; \n }, 800);\n };\n }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CeLOE Header Section Virtual Tour Fasilitas CeLOE Eksplorasi potensi pembelajaran digital Anda. Dari konsep dasar hingga teknologi imersif masa depan, kami siap memandu transformasi pendidikan Anda. Fasilitas Produksi Konten CeLOE Virtual Tour Studio Experience Klik untuk Mulai SEDANG MEMUAT… Lama memuat? Buka di Tab Baru<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-756","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/comments?post=756"}],"version-history":[{"count":0,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/756\/revisions"}],"wp:attachment":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/media?parent=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n CeLOE Header Section<\/title>\n <style>\n \/* Import Font Poppins agar sesuai desain *\/\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;700;800&display=swap');\n\n \/* Container untuk memastikan layout rapi *\/\n .celoe-header-wrapper {\n font-family: 'Poppins', sans-serif;\n padding: 40px 20px;\n max-width: 1200px;\n margin: 0 auto;\n text-align: center;\n }\n\n \/* Styling Header Utama *\/\n .celoe-creative-header {\n position: relative;\n z-index: 1;\n \/* Animasi masuk dari atas *\/\n animation: celoeFadeInDown 1s ease-out;\n }\n\n .celoe-creative-header h2 {\n font-size: 2.8rem;\n color: #8a1a19; \/* Telkom Dark Maroon *\/\n font-weight: 800;\n margin: 0 0 20px 0;\n text-transform: uppercase;\n letter-spacing: 1px;\n position: relative;\n display: inline-block;\n }\n\n \/* Garis bawah merah di bawah judul *\/\n .celoe-creative-header h2::after {\n content: '';\n display: block;\n width: 60px;\n height: 4px;\n background: #b02120; \/* Telkom Red *\/\n margin: 10px auto 0;\n border-radius: 2px;\n transition: width 0.3s ease; \/* Efek transisi halus *\/\n }\n\n \/* Efek saat mouse diarahkan ke header: Garis memanjang *\/\n .celoe-creative-header:hover h2::after {\n width: 120px;\n }\n\n \/* Styling Paragraf Deskripsi *\/\n .celoe-creative-header p {\n color: #555;\n max-width: 700px;\n margin: 0 auto;\n font-size: 1.1rem;\n line-height: 1.6;\n }\n\n \/* Definisi Keyframes untuk Animasi *\/\n @keyframes celoeFadeInDown {\n from { \n opacity: 0; \n transform: translateY(-30px); \n }\n to { \n opacity: 1; \n transform: translateY(0); \n }\n }\n\n \/* Responsif untuk Layar HP *\/\n @media (max-width: 768px) {\n .celoe-creative-header h2 {\n font-size: 2rem; \/* Ukuran font lebih kecil di HP *\/\n }\n .celoe-creative-header p {\n font-size: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"celoe-header-wrapper\">\n <div class=\"celoe-creative-header\">\n <h2>Virtual Tour Fasilitas CeLOE<\/h2>\n <p>Eksplorasi potensi pembelajaran digital Anda. Dari konsep dasar hingga teknologi imersif masa depan, kami siap memandu transformasi pendidikan Anda.<\/p>\n <\/div>\n <\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f71cea elementor-widget elementor-widget-html\" data-id=\"5f71cea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n \/* --- CSS WRAPPER (AMAN ELEMENTOR) --- *\/\n #celoe-wrapper-v2 {\n position: relative;\n width: 100%;\n max-width: 100%;\n margin: 0 auto;\n font-family: 'Segoe UI', sans-serif;\n line-height: normal;\n z-index: 1;\n }\n\n #celoe-wrapper-v2 * {\n box-sizing: border-box !important;\n outline: none;\n }\n\n \/* Kartu Utama *\/\n #celoe-wrapper-v2 .vr-card {\n position: relative;\n width: 100%;\n border-radius: 12px;\n overflow: hidden;\n background-color: #1e293b; \n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n }\n\n \/* Aspect Ratio Default (Desktop 16:9) *\/\n #celoe-wrapper-v2 .vr-ratio {\n position: relative;\n width: 100%;\n padding-top: 56.25%; \/* Rasio Desktop *\/\n }\n\n \/* --- MOBILE OPTIMIZATION (SOLUSI MASALAH GEPENG) --- *\/\n @media (max-width: 767px) {\n #celoe-wrapper-v2 .vr-ratio {\n padding-top: 0; \/* Matikan rasio 16:9 *\/\n height: 80vh; \/* Ubah jadi tinggi Portrait (70% layar HP) *\/\n min-height: 450px; \/* Jaga agar tidak terlalu pendek di HP kecil *\/\n }\n \n #celoe-wrapper-v2 .vr-title {\n font-size: 24px !important; \/* Sesuaikan font judul di HP *\/\n margin-bottom: 5px !important;\n }\n\n #celoe-wrapper-v2 .play-btn {\n width: 60px;\n height: 60px;\n margin: 15px auto;\n }\n }\n\n \/* OVERLAY CONTAINER *\/\n #celoe-wrapper-v2 .vr-overlay {\n position: absolute;\n inset: 0;\n z-index: 20;\n background: #000; \/* Fallback color *\/\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: opacity 0.5s ease, visibility 0.5s ease;\n overflow: hidden; \/* Pastikan gambar tidak bocor *\/\n }\n\n \/* --- SETTING BACKGROUND IMAGE & FILTER TELKOM --- *\/\n\n \/* 1. BACKGROUND FOTO *\/\n #celoe-wrapper-v2 .vr-bg-image {\n position: absolute;\n inset: 0;\n z-index: 1;\n background-size: cover;\n background-position: center;\n \/* Efek Zoom in sedikit saat hover (opsional) *\/\n transition: transform 0.6s ease;\n \n \/* --- GANTI URL FOTO DISINI --- *\/\n background-image: url('https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/Thumbnail-360-celoe-scaled.png'); \n }\n\n \/* 2. FILTER WARNA (TELKOM PALETTE) *\/\n #celoe-wrapper-v2 .vr-bg-filter {\n position: absolute;\n inset: 0;\n z-index: 2;\n \/* Gradient Merah Telkom (atas transparan, bawah gelap) agar tulisan jelas *\/\n background: linear-gradient(to bottom, rgba(144, 5, 4, 0.4), rgba(15, 23, 42, 0.9));\n \/* Blend mode untuk menyatukan warna dengan foto *\/\n mix-blend-mode: multiply; \n }\n\n \/* Efek Hover pada Foto *\/\n #celoe-wrapper-v2 .vr-overlay:hover .vr-bg-image {\n transform: scale(1.05); \/* Zoom in halus saat mouse diarahkan *\/\n }\n\n \/* Konten Teks *\/\n #celoe-wrapper-v2 .vr-content {\n position: relative;\n z-index: 30; \/* Di atas filter & foto *\/\n text-align: center;\n padding: 15px;\n transition: opacity 0.3s;\n }\n\n \/* Judul *\/\n #celoe-wrapper-v2 .vr-title {\n margin: 0 0 10px 0 !important;\n color: #fff !important;\n font-size: clamp(20px, 4vw, 32px) !important;\n font-weight: 700 !important;\n line-height: 1.2 !important;\n text-shadow: 0 2px 4px rgba(0,0,0,0.5); \/* Shadow agar terbaca di foto terang *\/\n }\n \n #celoe-wrapper-v2 .vr-subtitle {\n display: block;\n font-size: 14px;\n color: #e2e8f0;\n margin-top: 5px;\n font-weight: 500;\n letter-spacing: 1px;\n }\n\n \/* Tombol Play *\/\n #celoe-wrapper-v2 .play-btn {\n width: 70px;\n height: 70px;\n background: #be1e2d; \/* Telkom Red Solid *\/\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 20px auto;\n cursor: pointer;\n position: relative;\n box-shadow: 0 0 20px rgba(190, 30, 45, 0.6);\n border: 2px solid rgba(255,255,255,0.2);\n transition: transform 0.2s, background 0.3s;\n }\n\n #celoe-wrapper-v2 .play-btn svg {\n width: 28px;\n height: 28px;\n fill: #fff;\n margin-left: 4px;\n }\n\n #celoe-wrapper-v2 .play-btn:hover {\n transform: scale(1.1);\n background: #d62336;\n }\n\n \/* LOADER *\/\n #celoe-wrapper-v2 .vr-loader {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n z-index: 25;\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n }\n\n #celoe-wrapper-v2 .spinner {\n width: 40px; height: 40px;\n border: 4px solid rgba(255,255,255,0.2);\n border-top: 4px solid #be1e2d;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-bottom: 15px;\n }\n \n #celoe-wrapper-v2 .loading-text {\n color: #fff;\n font-size: 14px;\n letter-spacing: 1px;\n text-shadow: 0 2px 4px rgba(0,0,0,0.8);\n }\n\n \/* Tombol Fallback *\/\n #celoe-wrapper-v2 .fallback-btn {\n display: none;\n margin-top: 15px;\n padding: 8px 16px;\n background: rgba(0,0,0,0.5);\n border: 1px solid rgba(255,255,255,0.3);\n color: #fff;\n text-decoration: none;\n border-radius: 4px;\n font-size: 12px;\n cursor: pointer;\n backdrop-filter: blur(4px);\n }\n #celoe-wrapper-v2 .fallback-btn:hover { background: rgba(0,0,0,0.7); }\n\n \/* IFRAME *\/\n #celoe-wrapper-v2 iframe {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n border: 0;\n opacity: 0; \/* Hidden default *\/\n transition: opacity 0.8s ease;\n z-index: 10;\n background: #fff; \n }\n\n @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n\n<\/style>\n\n<div id=\"celoe-wrapper-v2\">\n <div class=\"vr-card\">\n <div class=\"vr-ratio\">\n \n \n <div class=\"vr-overlay\" id=\"v2Overlay\">\n \n <div class=\"vr-bg-image\"><\/div>\n \n <div class=\"vr-bg-filter\"><\/div>\n \n \n <div class=\"vr-content\" id=\"v2Content\">\n <h2 class=\"vr-title\">Fasilitas Produksi Konten CeLOE <span class=\"vr-subtitle\">Virtual Tour Studio Experience<\/span><\/h2>\n \n <div class=\"play-btn\" onclick=\"startCeloeTour()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <\/div>\n \n <div style=\"color:#e2e8f0; font-size:12px; font-weight:500;\">Klik untuk Mulai<\/div>\n <\/div>\n\n \n <div class=\"vr-loader\" id=\"v2Loader\">\n <div class=\"spinner\"><\/div>\n <div class=\"loading-text\">SEDANG MEMUAT...<\/div>\n <a href=\"https:\/\/v1celoe.netlify.app\/\" target=\"_blank\" class=\"fallback-btn\" id=\"v2Fallback\">\n Lama memuat? Buka di Tab Baru\n <\/a>\n <\/div>\n <\/div>\n\n \n <iframe \n id=\"v2Iframe\"\n data-src=\"https:\/\/v1celoe.netlify.app\/\" \n allowfullscreen \n allow=\"gyroscope; accelerometer; fullscreen; xr-spatial-tracking;\"\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\">\n <\/iframe>\n\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n function startCeloeTour() {\n var overlay = document.getElementById('v2Overlay');\n var content = document.getElementById('v2Content');\n var loader = document.getElementById('v2Loader');\n var fallback = document.getElementById('v2Fallback');\n var iframe = document.getElementById('v2Iframe');\n\n \/\/ 1. Sembunyikan Tombol Play, Tampilkan Loader\n content.style.opacity = '0';\n setTimeout(function(){ content.style.display = 'none'; }, 300);\n \n loader.style.display = 'flex';\n\n \/\/ 2. Load Source Iframe\n if (!iframe.src) {\n iframe.src = iframe.getAttribute('data-src');\n }\n\n \/\/ 3. Timer Fallback (Jika 5 detik masih loading, munculkan tombol alternatif)\n var loadTimer = setTimeout(function() {\n fallback.style.display = 'inline-block';\n loader.querySelector('.loading-text').innerText = \"Koneksi lambat...\";\n }, 5000);\n\n \/\/ 4. Deteksi Iframe Selesai Load\n iframe.onload = function() {\n clearTimeout(loadTimer); \n \n iframe.style.opacity = '1';\n \n overlay.style.opacity = '0';\n setTimeout(function(){ \n overlay.style.visibility = 'hidden'; \n }, 800);\n };\n }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CeLOE Header Section Virtual Tour Fasilitas CeLOE Eksplorasi potensi pembelajaran digital Anda. Dari konsep dasar hingga teknologi imersif masa depan, kami siap memandu transformasi pendidikan Anda. Fasilitas Produksi Konten CeLOE Virtual Tour Studio Experience Klik untuk Mulai SEDANG MEMUAT… Lama memuat? Buka di Tab Baru<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-756","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/comments?post=756"}],"version-history":[{"count":0,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/756\/revisions"}],"wp:attachment":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/media?parent=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}