{"id":271,"date":"2025-09-04T10:59:57","date_gmt":"2025-09-04T03:59:57","guid":{"rendered":"https:\/\/celoe.telkomuniversity.ac.id\/code\/?page_id=271"},"modified":"2025-12-08T13:53:50","modified_gmt":"2025-12-08T06:53:50","slug":"support-event","status":"publish","type":"page","link":"https:\/\/celoe.telkomuniversity.ac.id\/code\/support-event\/","title":{"rendered":"Support Event"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
<\/div>
<\/div>
CeLOE Content Development<\/div>
Bagian Pengembangan Konten CeLOE<\/div><\/div><\/div><\/div>
<\/div>
<\/div>
CeLOE Content Development<\/div>
Bagian Pengembangan Konten CeLOE<\/div><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t<\/path><\/svg>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t<\/path><\/svg>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\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
\n\t\t\t\t\t
\n\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>Support Event<\/h2>\n <p>Kami juga menyediakan dukungan penuh untuk berbagai acara, baik yang diselenggarakan di lingkungan Telkom University maupun oleh mitra. Layanan dukungan ini mencakup dokumentasi lengkap dan streaming langsung, memastikan setiap momen penting terekam dengan baik dan dapat diakses oleh audiens secara luas.<\/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-3a837b1 elementor-widget elementor-widget-html\" data-id=\"3a837b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<!-- Mengambil Font Poppins agar terlihat modern -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<!-- Mengambil FontAwesome untuk Ikon -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<style>\n \/* Scoped CSS untuk mencegah konflik dengan tema WordPress\/Elementor lain *\/\n .celoe-custom-section {\n font-family: 'Poppins', sans-serif;\n box-sizing: border-box;\n padding: 40px 20px;\n background-color: #f9f9f9;\n color: #333;\n line-height: 1.6;\n }\n\n .celoe-custom-section * {\n box-sizing: border-box;\n }\n\n \/* Grid Container *\/\n .celoe-services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 30px;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n \/* Service Card *\/\n .service-card {\n background: #fff;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n position: relative;\n height: 500px; \/* Tinggi fix untuk konsistensi *\/\n group: hover;\n }\n\n .service-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(176, 28, 46, 0.15);\n }\n\n \/* Card Image Background *\/\n .card-image {\n height: 100%;\n width: 100%;\n background-size: cover;\n background-position: center;\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.5s ease;\n }\n \n \/* Overlay Gradient *\/\n .card-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.1) 100%);\n z-index: 1;\n }\n\n \/* Card Content *\/\n .card-content {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 30px;\n z-index: 2;\n color: #fff;\n transform: translateY(280px); \/* Menyembunyikan detail secara default *\/\n transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n background: linear-gradient(to top, #b01c2e 0%, rgba(176, 28, 46, 0.95) 80%, rgba(176, 28, 46, 0) 100%);\n }\n\n \/* Efek Hover: Konten Naik *\/\n .service-card:hover .card-content {\n transform: translateY(0);\n background: linear-gradient(to top, #b01c2e 0%, rgba(176, 28, 46, 1) 100%);\n height: 100%;\n overflow-y: auto; \/* Scroll jika konten terlalu panjang di layar kecil *\/\n }\n\n \/* Scrollbar styling for hover state *\/\n .card-content::-webkit-scrollbar {\n width: 6px;\n }\n .card-content::-webkit-scrollbar-thumb {\n background-color: rgba(255,255,255,0.3);\n border-radius: 4px;\n }\n\n .card-title {\n font-size: 1.8rem;\n margin-bottom: 10px;\n font-weight: 700;\n border-bottom: 2px solid rgba(255,255,255,0.3);\n padding-bottom: 15px;\n display: block;\n }\n\n .card-desc-short {\n font-size: 0.95rem;\n margin-bottom: 20px;\n opacity: 0.9;\n display: block;\n }\n\n \/* List Details *\/\n .detail-list {\n list-style: none;\n padding: 0;\n margin: 20px 0;\n opacity: 0; \/* Hidden default *\/\n transition: opacity 0.3s ease 0.1s;\n }\n\n .service-card:hover .detail-list {\n opacity: 1;\n }\n\n .detail-item {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n }\n\n .detail-icon {\n background: rgba(255,255,255,0.2);\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 15px;\n flex-shrink: 0;\n font-size: 0.8rem;\n }\n\n .detail-text h4 {\n margin: 0 0 5px 0;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #ffd1d1;\n }\n\n .detail-text p {\n margin: 0;\n font-size: 0.85rem;\n color: #fff;\n }\n\n \/* Responsive Adjustments *\/\n @media (max-width: 768px) {\n .celoe-services-grid {\n grid-template-columns: 1fr;\n }\n \n .service-card {\n height: auto;\n min-height: 400px;\n }\n\n .card-content {\n transform: translateY(0); \/* Di HP selalu tampil sebagian agar user tahu ada konten *\/\n background: linear-gradient(to top, #b01c2e 20%, rgba(176, 28, 46, 0.8) 100%);\n position: relative;\n }\n \n .card-image {\n height: 250px;\n position: relative;\n }\n\n .detail-list {\n opacity: 1; \/* Selalu tampil di mobile *\/\n display: block;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"celoe-custom-section\">\n \n <!-- Services Grid -->\n <div class=\"celoe-services-grid\">\n \n <!-- Card 1: Digital Studio -->\n <div class=\"service-card\">\n <!-- Ganti URL gambar di bawah dengan URL gambar studio Anda -->\n <div class=\"card-image\" style=\"background-image: url('https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-16.webp\"><\/div>\n <div class=\"card-overlay\"><\/div>\n \n <div class=\"card-content\">\n <span class=\"card-title\">Digital Studio <br> Recording<\/span>\n <span class=\"card-desc-short\">Layanan rekaman video dan audio profesional untuk konten e-learning, modul belajar, dan kuliah online.<\/span>\n \n <ul class=\"detail-list\">\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-video\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Fasilitas<\/h4>\n <p>Studio kedap suara, Kamera 4K, Audio Mixer, Green Screen, Lighting Profesional.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-users\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Crew Support<\/h4>\n <p>Studio Manager, Make-Up Artist, Camera Person.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Durasi<\/h4>\n <p>Per Sesi atau Paket Kegiatan.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-file-video\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Output<\/h4>\n <p>Raw Video Format Digital (MTS\/MP4).<\/p>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <!-- Card 2: Live Streaming -->\n <div class=\"service-card\">\n <!-- Ganti URL gambar di bawah dengan URL gambar event\/live Anda -->\n <div class=\"card-image\" style=\"background-image: url('https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-15.webp\"><\/div>\n <div class=\"card-overlay\"><\/div>\n \n <div class=\"card-content\">\n <span class=\"card-title\">Live Streaming<\/span>\n <span class=\"card-desc-short\">Solusi livestreaming interaktif real-time untuk Seminar, Workshop, dan pelatihan online.<\/span>\n \n <ul class=\"detail-list\">\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-broadcast-tower\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Fasilitas<\/h4>\n <p>Kamera Multi-angle, Mic Wireless, Audio Mixer, Perangkat Streaming Hybrid.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-user-friends\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Crew Support<\/h4>\n <p>Operator Live Stream, 1-4 Cameraman, Kru Teknis Berpengalaman.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Durasi<\/h4>\n <p>Per Sesi atau Paket per Kegiatan.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-photo-video\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Output<\/h4>\n <p>Siaran Langsung & File Rekaman Kegiatan.<\/p>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <\/div>\n\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-75cf227 elementor-widget elementor-widget-spacer\" data-id=\"75cf227\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f22304 elementor-widget elementor-widget-html\" data-id=\"9f22304\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<!-- Mengambil Font Poppins agar terlihat modern -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<!-- Mengambil FontAwesome untuk Ikon -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<style>\n \/* Scoped CSS untuk mencegah konflik dengan tema WordPress\/Elementor lain *\/\n .celoe-custom-section {\n font-family: 'Poppins', sans-serif;\n box-sizing: border-box;\n padding: 40px 20px;\n background-color: #f9f9f9;\n color: #333;\n line-height: 1.6;\n }\n\n .celoe-custom-section * {\n box-sizing: border-box;\n }\n\n \/* Grid Container *\/\n .celoe-services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 30px;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n \/* Service Card *\/\n .service-card {\n background: #fff;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n position: relative;\n height: 500px; \/* Tinggi fix untuk konsistensi *\/\n group: hover;\n }\n\n .service-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(176, 28, 46, 0.15);\n }\n\n \/* Card Image Background *\/\n .card-image {\n height: 100%;\n width: 100%;\n background-size: cover;\n background-position: center;\n position: absolute;\n top: 0;\n left: 0;\n transition: transform 0.5s ease;\n }\n \n \/* Overlay Gradient *\/\n .card-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.1) 100%);\n z-index: 1;\n }\n\n \/* Card Content *\/\n .card-content {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 30px;\n z-index: 2;\n color: #fff;\n transform: translateY(280px); \/* Menyembunyikan detail secara default *\/\n transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n background: linear-gradient(to top, #b01c2e 0%, rgba(176, 28, 46, 0.95) 80%, rgba(176, 28, 46, 0) 100%);\n }\n\n \/* Efek Hover: Konten Naik *\/\n .service-card:hover .card-content {\n transform: translateY(0);\n background: linear-gradient(to top, #b01c2e 0%, rgba(176, 28, 46, 1) 100%);\n height: 100%;\n overflow-y: auto; \/* Scroll jika konten terlalu panjang di layar kecil *\/\n }\n\n \/* Scrollbar styling for hover state *\/\n .card-content::-webkit-scrollbar {\n width: 6px;\n }\n .card-content::-webkit-scrollbar-thumb {\n background-color: rgba(255,255,255,0.3);\n border-radius: 4px;\n }\n\n .card-title {\n font-size: 1.8rem;\n margin-bottom: 10px;\n font-weight: 700;\n border-bottom: 2px solid rgba(255,255,255,0.3);\n padding-bottom: 15px;\n display: block;\n }\n\n .card-desc-short {\n font-size: 0.95rem;\n margin-bottom: 20px;\n opacity: 0.9;\n display: block;\n }\n\n \/* List Details *\/\n .detail-list {\n list-style: none;\n padding: 0;\n margin: 20px 0;\n opacity: 0; \/* Hidden default *\/\n transition: opacity 0.3s ease 0.1s;\n }\n\n .service-card:hover .detail-list {\n opacity: 1;\n }\n\n .detail-item {\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n }\n\n .detail-icon {\n background: rgba(255,255,255,0.2);\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 15px;\n flex-shrink: 0;\n font-size: 0.8rem;\n }\n\n .detail-text h4 {\n margin: 0 0 5px 0;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #ffd1d1;\n }\n\n .detail-text p {\n margin: 0;\n font-size: 0.85rem;\n color: #fff;\n }\n\n \/* Responsive Adjustments *\/\n @media (max-width: 768px) {\n .celoe-services-grid {\n grid-template-columns: 1fr;\n }\n \n .service-card {\n height: auto;\n min-height: 400px;\n }\n\n .card-content {\n transform: translateY(0); \/* Di HP selalu tampil sebagian agar user tahu ada konten *\/\n background: linear-gradient(to top, #b01c2e 20%, rgba(176, 28, 46, 0.8) 100%);\n position: relative;\n }\n \n .card-image {\n height: 250px;\n position: relative;\n }\n\n .detail-list {\n opacity: 1; \/* Selalu tampil di mobile *\/\n display: block;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"celoe-custom-section\">\n \n <!-- Services Grid -->\n <div class=\"celoe-services-grid\">\n \n <!-- Card 1: Digital Studio -->\n <div class=\"service-card\">\n <!-- Ganti URL gambar di bawah dengan URL gambar studio Anda -->\n <div class=\"card-image\" style=\"background-image: url('https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-13.webp\"><\/div>\n <div class=\"card-overlay\"><\/div>\n \n <div class=\"card-content\">\n <span class=\"card-title\">Professional Development LMS & Apps<\/span>\n <span class=\"card-desc-short\">Layanan rekaman video dan audio profesional untuk konten e-learning, modul belajar, dan kuliah online.<\/span>\n \n <ul class=\"detail-list\">\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-video\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Fasilitas<\/h4>\n <p>Studio kedap suara, Kamera 4K, Audio Mixer, Green Screen, Lighting Profesional.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-users\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Crew Support<\/h4>\n <p>Studio Manager, Make-Up Artist, Camera Person.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Durasi<\/h4>\n <p>Per Sesi atau Paket Kegiatan.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-file-video\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Output<\/h4>\n <p>Raw Video Format Digital (MTS\/MP4).<\/p>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <!-- Card 2: Live Streaming -->\n <div class=\"service-card\">\n <!-- Ganti URL gambar di bawah dengan URL gambar event\/live Anda -->\n <div class=\"card-image\" style=\"background-image: url('https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-14.webp\"><\/div>\n <div class=\"card-overlay\"><\/div>\n \n <div class=\"card-content\">\n <span class=\"card-title\"><br> Hybrid Event Meeting<\/span>\n <span class=\"card-desc-short\">Solusi livestreaming interaktif real-time untuk Seminar, Workshop, dan pelatihan online.<\/span>\n \n <ul class=\"detail-list\">\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-broadcast-tower\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Fasilitas<\/h4>\n <p>Kamera Multi-angle, Mic Wireless, Audio Mixer, Perangkat Streaming Hybrid.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-user-friends\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Crew Support<\/h4>\n <p>Operator Live Stream, 1-4 Cameraman, Kru Teknis Berpengalaman.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Durasi<\/h4>\n <p>Per Sesi atau Paket per Kegiatan.<\/p>\n <\/div>\n <\/li>\n <li class=\"detail-item\">\n <div class=\"detail-icon\"><i class=\"fas fa-photo-video\"><\/i><\/div>\n <div class=\"detail-text\">\n <h4>Output<\/h4>\n <p>Siaran Langsung & File Rekaman Kegiatan.<\/p>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <\/div>\n\n<\/div>\n\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f272431 e-flex e-con-boxed e-con e-parent\" data-id=\"f272431\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf0d146 elementor-widget elementor-widget-spacer\" data-id=\"cf0d146\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd92ad3 elementor-widget elementor-widget-html\" data-id=\"dd92ad3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Section Kerjasama Celoe V2<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* Container Utama *\/\n .celoe-v2-wrapper {\n font-family: 'Poppins', sans-serif;\n padding: 40px 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n overflow: hidden;\n background-color: transparent; \/* Transparan agar ikut warna section Elementor *\/\n }\n\n \/* Dekorasi Latar Belakang (Red Blobs) *\/\n .celoe-blob {\n position: absolute;\n width: 300px;\n height: 300px;\n background: rgba(189, 3, 22, 0.05); \/* Merah Telkom transparan *\/\n border-radius: 50%;\n filter: blur(60px);\n z-index: 0;\n animation: floatBlob 8s infinite ease-in-out;\n }\n .blob-1 { top: -50px; left: -50px; }\n .blob-2 { bottom: -50px; right: -50px; animation-delay: 4s; }\n\n @keyframes floatBlob {\n 0%, 100% { transform: translate(0, 0); }\n 50% { transform: translate(20px, 30px); }\n }\n\n \/* Kartu Utama *\/\n .celoe-v2-card {\n display: flex;\n background: #ffffff;\n width: 100%;\n max-width: 1100px;\n border-radius: 24px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.08);\n overflow: hidden;\n z-index: 1;\n border: 1px solid rgba(0,0,0,0.03);\n flex-wrap: wrap; \/* Agar responsif *\/\n }\n\n \/* Bagian Kiri: Konten *\/\n .celoe-v2-content {\n flex: 1;\n padding: 60px 50px;\n min-width: 300px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .celoe-tag {\n display: inline-block;\n background: rgba(189, 3, 22, 0.1);\n color: #bd0316;\n padding: 6px 14px;\n border-radius: 30px;\n font-size: 0.85rem;\n font-weight: 600;\n margin-bottom: 20px;\n width: fit-content;\n letter-spacing: 0.5px;\n }\n\n .celoe-v2-title {\n font-size: 2.8rem;\n font-weight: 800;\n color: #222;\n margin: 0 0 20px 0;\n line-height: 1.1;\n position: relative;\n }\n\n .celoe-v2-title span {\n color: #bd0316;\n position: relative;\n z-index: 1;\n }\n \n \/* Garis bawah dekoratif pada judul *\/\n .celoe-v2-title span::after {\n content: '';\n position: absolute;\n bottom: 5px;\n left: 0;\n width: 100%;\n height: 10px;\n background: rgba(189, 3, 22, 0.15);\n z-index: -1;\n transform: skewX(-15deg);\n }\n\n .celoe-v2-desc {\n font-size: 1.05rem;\n color: #666;\n line-height: 1.7;\n margin-bottom: 35px;\n }\n\n \/* Container Tombol *\/\n .celoe-v2-actions {\n display: flex;\n gap: 15px;\n align-items: center;\n flex-wrap: wrap;\n }\n\n \/* Tombol Utama *\/\n .btn-v2-main {\n background: #bd0316;\n color: white;\n padding: 14px 30px;\n border-radius: 12px;\n font-weight: 600;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n box-shadow: 0 10px 20px rgba(189, 3, 22, 0.2);\n border: 2px solid #bd0316;\n }\n\n .btn-v2-main:hover {\n background: white;\n color: #bd0316;\n transform: translateY(-3px);\n box-shadow: 0 15px 30px rgba(189, 3, 22, 0.3);\n }\n\n \/* Tombol Copy (Icon Only style) *\/\n .btn-v2-copy {\n background: #f4f4f4;\n color: #555;\n padding: 14px 20px;\n border-radius: 12px;\n border: 2px solid transparent;\n cursor: pointer;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: all 0.3s ease;\n }\n\n .btn-v2-copy:hover {\n background: #e0e0e0;\n color: #222;\n }\n \n .btn-v2-copy.copied {\n background: #d4edda;\n color: #155724;\n border-color: #c3e6cb;\n }\n\n \/* Bagian Kanan: Gambar *\/\n .celoe-v2-image {\n flex: 1;\n min-width: 300px;\n min-height: 400px;\n position: relative;\n overflow: hidden;\n }\n\n .celoe-v2-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \/* Mulai dengan hitam putih sedikit *\/\n filter: grayscale(80%); \n transition: all 0.6s ease;\n transform: scale(1.01);\n }\n\n \/* Efek Hover pada container Image *\/\n .celoe-v2-image:hover img {\n filter: grayscale(0%); \/* Kembali berwarna *\/\n transform: scale(1.1); \/* Zoom in *\/\n }\n\n \/* Overlay Merah Tipis *\/\n .celoe-v2-image::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(to right, rgba(0,0,0,0.2), transparent);\n z-index: 2;\n pointer-events: none;\n }\n\n \/* Tooltip Toast *\/\n .v2-toast {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n background: #333;\n color: white;\n padding: 8px 16px;\n border-radius: 30px;\n font-size: 0.8rem;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n white-space: nowrap;\n }\n .v2-toast.show {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n \/* Responsiveness *\/\n @media (max-width: 900px) {\n .celoe-v2-card {\n flex-direction: column-reverse;\n }\n .celoe-v2-image {\n min-height: 250px;\n height: 250px;\n }\n .celoe-v2-content {\n padding: 40px 30px;\n text-align: center;\n }\n .celoe-v2-actions {\n justify-content: center;\n }\n .celoe-v2-title span::after {\n left: 10%;\n width: 80%;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"celoe-v2-wrapper\">\n <!-- Dekorasi Background -->\n <div class=\"celoe-blob blob-1\"><\/div>\n <div class=\"celoe-blob blob-2\"><\/div>\n\n <div class=\"celoe-v2-card\">\n <!-- Kolom Teks -->\n <div class=\"celoe-v2-content\">\n <div class=\"celoe-tag\"><i class=\"fas fa-handshake\"><\/i> Partnership<\/div>\n <h2 class=\"celoe-v2-title\">Pengajuan <br><span>Kerjasama<\/span><\/h2>\n <p class=\"celoe-v2-desc\">\n Wujudkan kolaborasi inovatif bersama CeLOE Telkom University. \n Kami terbuka untuk berbagai peluang kemitraan strategis. \n Hubungi kami untuk diskusi lebih lanjut.\n <\/p>\n \n <div class=\"celoe-v2-actions\" style=\"position: relative;\">\n <a href=\"mailto:celoecode@telkomuniversity.ac.id\" class=\"btn-v2-main\">\n <i class=\"fas fa-envelope-open-text\"><\/i> Hubungi Kami\n <\/a>\n \n <button class=\"btn-v2-copy\" id=\"copyBtnV2\" onclick=\"copyEmailV2()\">\n <i class=\"fas fa-copy\"><\/i>\n <span id=\"copyTextV2\">Salin Email<\/span>\n <\/button>\n\n <!-- Toast Notification Kecil di atas tombol -->\n <div id=\"v2Toast\" class=\"v2-toast\">Email Disalin!<\/div>\n <\/div>\n <\/div>\n\n <!-- Kolom Gambar -->\n <div class=\"celoe-v2-image\">\n <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-3.webp\" alt=\"Kolaborasi Tim\">\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n function copyEmailV2() {\n const email = \"celoecode@telkomuniversity.ac.id\";\n const btn = document.getElementById('copyBtnV2');\n const btnText = document.getElementById('copyTextV2');\n const icon = btn.querySelector('i');\n const toast = document.getElementById('v2Toast');\n\n \/\/ Logic Copy\n const tempInput = document.createElement(\"input\");\n tempInput.value = email;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand(\"copy\");\n document.body.removeChild(tempInput);\n\n \/\/ Ubah Tampilan Tombol\n btn.classList.add('copied');\n btnText.innerText = \"Tersalin\";\n icon.className = \"fas fa-check\";\n\n \/\/ Tampilkan Toast\n toast.classList.add('show');\n\n \/\/ Reset setelah 3 detik\n setTimeout(() => {\n btn.classList.remove('copied');\n btnText.innerText = \"Salin Email\";\n icon.className = \"fas fa-copy\";\n toast.classList.remove('show');\n }, 3000);\n }\n<\/script>\n\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e5cd87d e-flex e-con-boxed e-con e-parent\" data-id=\"e5cd87d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f9431e3 elementor-widget elementor-widget-spacer\" data-id=\"f9431e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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 Content DevelopmentBagian Pengembangan Konten CeLOECeLOE Content DevelopmentBagian Pengembangan Konten CeLOE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. CeLOE Header Section Support Event Kami juga menyediakan […]<\/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-271","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/271","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=271"}],"version-history":[{"count":0,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/271\/revisions"}],"wp:attachment":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/media?parent=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}