{"id":356,"date":"2025-10-01T15:11:10","date_gmt":"2025-10-01T08:11:10","guid":{"rendered":"https:\/\/celoe.telkomuniversity.ac.id\/code\/?page_id=356"},"modified":"2025-12-08T10:35:12","modified_gmt":"2025-12-08T03:35:12","slug":"konten-video-pembelajaran","status":"publish","type":"page","link":"https:\/\/celoe.telkomuniversity.ac.id\/code\/konten-video-pembelajaran\/","title":{"rendered":"Konten Video Pembelajaran"},"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\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
\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
\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
\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>Layanan Produksi Video<\/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-7d744f0 elementor-widget elementor-widget-spacer\" data-id=\"7d744f0\" 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<div class=\"elementor-element elementor-element-c0d7ec8 e-flex e-con-boxed e-con e-parent\" data-id=\"c0d7ec8\" 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-b87277b elementor-widget elementor-widget-html\" data-id=\"b87277b\" 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<!-- Mulai Bagian Workflow CeLOE -->\r\n<div class=\"celoe-workflow-wrapper\">\r\n <style>\r\n \/* Reset sederhana untuk isolasi style *\/\r\n .celoe-workflow-wrapper {\r\n font-family: 'Inter', sans-serif; \/* Sesuaikan dengan font website Anda *\/\r\n background-color: #f9fafb; \/* Latar abu-abu muda lembut *\/\r\n padding: 80px 20px;\r\n box-sizing: border-box;\r\n color: #1C1C1C;\r\n }\r\n\r\n .celoe-workflow-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n\r\n \/* Header Section *\/\r\n .celoe-workflow-header h2 {\r\n font-size: 32px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n color: #1C1C1C;\r\n }\r\n\r\n .celoe-workflow-header p {\r\n color: #6b7280;\r\n font-size: 16px;\r\n margin-bottom: 60px;\r\n }\r\n\r\n \/* Grid Layout *\/\r\n .celoe-steps-grid {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr); \/* Mobile default *\/\r\n gap: 40px;\r\n position: relative;\r\n }\r\n\r\n \/* Step Item Styles *\/\r\n .celoe-step-item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n cursor: pointer;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .celoe-step-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* Lingkaran Ikon Utama *\/\r\n .celoe-icon-circle {\r\n width: 100px;\r\n height: 100px;\r\n background-color: #ffffff;\r\n border: 4px solid #f3f4f6;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 20px;\r\n position: relative;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n z-index: 2;\r\n }\r\n\r\n .celoe-step-item:hover .celoe-icon-circle {\r\n border-color: #E31E25; \/* Warna Merah Telkom saat hover *\/\r\n color: #E31E25;\r\n box-shadow: 0 10px 15px -3px rgba(227, 30, 37, 0.2);\r\n }\r\n\r\n \/* Ikon SVG *\/\r\n .celoe-icon-circle svg {\r\n width: 40px;\r\n height: 40px;\r\n stroke: #9ca3af;\r\n stroke-width: 1.5;\r\n transition: stroke 0.3s ease;\r\n }\r\n\r\n .celoe-step-item:hover .celoe-icon-circle svg {\r\n stroke: #E31E25;\r\n }\r\n\r\n \/* Badge Nomor (01, 02, dst) *\/\r\n .celoe-step-number {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 32px;\r\n height: 32px;\r\n background-color: #ffffff;\r\n border: 2px solid #f3f4f6;\r\n border-radius: 50%;\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: #9ca3af;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n z-index: 3;\r\n }\r\n\r\n .celoe-step-item:hover .celoe-step-number {\r\n border-color: #E31E25;\r\n color: #E31E25;\r\n background-color: #fff;\r\n }\r\n\r\n \/* Teks Judul dan Deskripsi *\/\r\n .celoe-step-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #1C1C1C;\r\n margin-bottom: 5px;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .celoe-step-item:hover .celoe-step-title {\r\n color: #E31E25;\r\n }\r\n\r\n .celoe-step-desc {\r\n font-size: 12px;\r\n color: #6b7280;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n }\r\n\r\n \/* Garis Penghubung (Line) *\/\r\n .celoe-line-connector {\r\n display: none; \/* Sembunyikan di mobile *\/\r\n position: absolute;\r\n top: 50px; \/* Posisi tengah lingkaran icon *\/\r\n left: 0;\r\n width: 100%;\r\n height: 2px;\r\n background-color: #e5e7eb;\r\n z-index: 1;\r\n }\r\n\r\n \/* Responsive Tablet & Desktop *\/\r\n @media (min-width: 768px) {\r\n .celoe-steps-grid {\r\n grid-template-columns: repeat(5, 1fr); \/* 5 Kolom sejajar *\/\r\n gap: 20px;\r\n }\r\n \r\n .celoe-line-connector {\r\n display: block; \/* Munculkan garis di desktop *\/\r\n }\r\n }\r\n <\/style>\r\n\r\n <div class=\"celoe-workflow-container\">\r\n <div class=\"celoe-workflow-header\">\r\n <h2>5 Workflow Produksi<\/h2>\r\n <p>Proses efektif 5 langkah yang memastikan kualitas dan kecepatan.<\/p>\r\n <\/div>\r\n\r\n <div style=\"position: relative;\">\r\n <!-- Garis Penghubung -->\r\n <div class=\"celoe-line-connector\"><\/div>\r\n\r\n <!-- Grid Langkah -->\r\n <div class=\"celoe-steps-grid\">\r\n \r\n <!-- Step 1: Analysis -->\r\n <div class=\"celoe-step-item\">\r\n <div class=\"celoe-icon-circle\">\r\n <div class=\"celoe-step-number\">01<\/div>\r\n <!-- Icon Search -->\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg>\r\n <\/div>\r\n <div class=\"celoe-step-title\">Analysis<\/div>\r\n <div class=\"celoe-step-desc\">Requirement Gathering<\/div>\r\n <\/div>\r\n\r\n <!-- Step 2: Script -->\r\n <div class=\"celoe-step-item\">\r\n <div class=\"celoe-icon-circle\">\r\n <div class=\"celoe-step-number\">02<\/div>\r\n <!-- Icon Clipboard -->\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"><\/path><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"><\/rect><\/svg>\r\n <\/div>\r\n <div class=\"celoe-step-title\">Script<\/div>\r\n <div class=\"celoe-step-desc\">Pedagogical Design<\/div>\r\n <\/div>\r\n\r\n <!-- Step 3: Production -->\r\n <div class=\"celoe-step-item\">\r\n <div class=\"celoe-icon-circle\">\r\n <div class=\"celoe-step-number\">03<\/div>\r\n <!-- Icon Camera -->\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"><\/path><circle cx=\"12\" cy=\"13\" r=\"4\"><\/circle><\/svg>\r\n <\/div>\r\n <div class=\"celoe-step-title\">Production<\/div>\r\n <div class=\"celoe-step-desc\">Filming & Design<\/div>\r\n <\/div>\r\n\r\n <!-- Step 4: Review -->\r\n <div class=\"celoe-step-item\">\r\n <div class=\"celoe-icon-circle\">\r\n <div class=\"celoe-step-number\">04<\/div>\r\n <!-- Icon Eye -->\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\r\n <\/div>\r\n <div class=\"celoe-step-title\">Review<\/div>\r\n <div class=\"celoe-step-desc\">QA & Standardization<\/div>\r\n <\/div>\r\n\r\n <!-- Step 5: Delivery -->\r\n <div class=\"celoe-step-item\">\r\n <div class=\"celoe-icon-circle\">\r\n <div class=\"celoe-step-number\">05<\/div>\r\n <!-- Icon Upload\/Share -->\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"><\/path><polyline points=\"16 6 12 2 8 6\"><\/polyline><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\"><\/line><\/svg>\r\n <\/div>\r\n <div class=\"celoe-step-title\">Delivery<\/div>\r\n <div class=\"celoe-step-desc\">LMS Deployment<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<!-- Akhir Bagian Workflow CeLOE -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bf46ee elementor-widget elementor-widget-spacer\" data-id=\"0bf46ee\" 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<div class=\"elementor-element elementor-element-4d0e6aa e-flex e-con-boxed e-con e-parent\" data-id=\"4d0e6aa\" 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-a62bc1f elementor-widget elementor-widget-html\" data-id=\"a62bc1f\" 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>Responsive Video Preview<\/title>\n <!-- Load Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <!-- Custom Style untuk Animasi & Tab -->\n <style>\n \/* Transisi halus untuk konten Tab *\/\n .tab-content {\n display: none;\n opacity: 0;\n transform: translateX(10px);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n .tab-content.active {\n display: block;\n opacity: 1;\n transform: translateX(0);\n }\n \n \/* Efek Hover Image *\/\n .perspective-1000 {\n perspective: 1000px;\n }\n \/* Logika Hover: Di Desktop pakai hover, di Mobile (touch) kita biarkan default atau tap *\/\n @media (hover: hover) {\n .hover-trigger:hover .play-icon {\n opacity: 1;\n transform: scale(1);\n }\n .hover-trigger:hover .main-img {\n transform: scale(1.1);\n }\n .hover-trigger:hover .badges {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n \/* Fallback untuk mobile agar Play Icon tetap terlihat semi-visible atau visible jika diinginkan, \n tapi disini saya biarkan default hidden dan muncul saat di-tap\/active jika didukung *\/\n .hover-trigger:active .play-icon {\n opacity: 1;\n transform: scale(1);\n }\n <\/style>\n<\/head>\n<body class=\"bg-white font-sans text-gray-900\">\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n\n <!-- ========================================== -->\n <!-- ITEM 1: VIDEO LECTURE (Gambar Kiri) -->\n <!-- ========================================== -->\n <div class=\"flex flex-col lg:flex-row gap-8 lg:gap-16 items-center mb-24\">\n \n <!-- BAGIAN 1: GAMBAR INTERAKTIF -->\n <div class=\"w-full lg:w-1\/2 group cursor-pointer perspective-1000 hover-trigger\">\n <!-- \n PERBAIKAN: \n 1. Menjaga aspect-video untuk mobile, tapi memastikan overflow tertangani.\n -->\n <div class=\"relative overflow-hidden rounded-2xl shadow-2xl aspect-video lg:aspect-[4\/3] transition-all duration-500 hover:shadow-red-900\/20 hover:-translate-y-2\">\n \n <!-- Gambar Utama -->\n <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/10\/bc4ece0e2732e27ab5d008e9457642c06d8f9ae6.png\" \n alt=\"Video Lecture\" \n class=\"main-img object-cover w-full h-full transform transition-transform duration-700\">\n \n <!-- Overlay Gradient -->\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300\"><\/div>\n\n <!-- Tombol Play -->\n <!-- \n PERBAIKAN: \n 1. Menambahkan z-10 agar selalu di atas layer lain jika overlap.\n 2. Ukuran ikon w-12 h-12 di mobile, w-16 h-16 di desktop (sm).\n -->\n <div class=\"play-icon absolute inset-0 flex items-center justify-center opacity-0 transform scale-75 transition-all duration-300 z-10\">\n <a href=\"https:\/\/telkomuniversityofficial-my.sharepoint.com\/personal\/celoecode_365_telkomuniversity_ac_id\/_layouts\/15\/stream.aspx?sw=bypass&bypassReason=abandoned&id=%2Fpersonal%2Fceloecode_365_telkomuniversity_ac_id%2FDocuments%2FPORTOFOLIO%2FPortofolio+Layanan+%26+Jasa+Bang+CeLOE+2024%2F1.1.+COH2J3+-+KOMUNIKASI+PEMASARAN+TERPADU+-+PB02+-+M1+-+KOMUNIKASI+1.0.mp4&startedResponseCatch=true\" target=\"_blank\" \n class=\"w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-white\/20 backdrop-blur-md border border-white\/50 flex items-center justify-center shadow-lg hover:bg-white\/30 transition-colors cursor-pointer\">\n <svg class=\"w-6 h-6 sm:w-8 sm:h-8 text-white fill-white ml-1\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n <\/svg>\n <\/a>\n <\/div>\n\n <!-- Badges (Pojok Kanan Atas) -->\n <!-- \n PERBAIKAN: \n 1. top-2 right-2 untuk mobile (lebih mepet tepi), top-4 right-4 untuk desktop.\n 2. Ukuran text text-[10px] di mobile.\n 3. Salah satu badge di-hide di mobile agar tidak menumpuk ke bawah.\n -->\n <div class=\"badges absolute top-2 right-2 sm:top-4 sm:right-4 flex flex-col gap-1 sm:gap-2 items-end transition-all duration-500 opacity-1 lg:opacity-0 lg:translate-x-4\">\n <span class=\"px-2 py-0.5 sm:px-3 sm:py-1 bg-black\/40 backdrop-blur-md border border-white\/10 text-white text-[10px] sm:text-xs font-medium rounded-full shadow-lg\">Full HD 1080p<\/span>\n <!-- Badge kedua disembunyikan di mobile (hidden) muncul di sm (block) -->\n <span class=\"hidden sm:inline-block px-3 py-1 bg-black\/40 backdrop-blur-md border border-white\/10 text-white text-xs font-medium rounded-full shadow-lg\">Professional Production<\/span>\n <\/div>\n\n <!-- Info Bar Bawah -->\n <!-- \n PERBAIKAN: \n 1. Padding p-3 di mobile, p-6 di desktop.\n -->\n <div class=\"absolute bottom-0 left-0 right-0 p-3 sm:p-6 flex justify-between items-end z-20\">\n <div class=\"text-white w-full\">\n <div class=\"flex items-center gap-2 mb-1 sm:mb-2\">\n <!-- Ikon diperkecil paddingnya di mobile -->\n <div class=\"p-1.5 sm:p-2 bg-red-600 rounded-lg shadow-lg\">\n <svg class=\"w-3 h-3 sm:w-5 sm:h-5 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n <\/div>\n <span class=\"bg-white\/20 backdrop-blur-md px-1.5 py-0.5 sm:px-2 sm:py-0.5 rounded text-[10px] sm:text-xs font-semibold text-white border border-white\/20\">Video Service<\/span>\n <\/div>\n <!-- Judul diperkecil fontnya di mobile -->\n <h4 class=\"text-sm sm:text-lg font-bold text-white\/90 truncate\">Preview Sample<\/h4>\n <\/div>\n <\/div>\n <\/div>\n <!-- Dekorasi Background Blur -->\n <div class=\"absolute -z-10 w-full h-full bg-red-500\/10 blur-3xl rounded-full top-10 -left-10\"><\/div>\n <\/div>\n\n <!-- BAGIAN 2: KONTEN TAB INFORMASI -->\n <div class=\"w-full lg:w-1\/2\">\n <h3 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mb-2\">Video Lecture<\/h3>\n <p class=\"text-red-600 font-medium mb-4 text-base sm:text-lg\">Konten Video Pembelajaran<\/p>\n <p class=\"text-gray-600 leading-relaxed mb-8 text-sm sm:text-base\">\n Pembuatan konten video pembelajaran didampingi oleh profesional dari proses pra-produksi, produksi dan post-produksi. Pendampingan talent, penyusunan skrip, serta proses tapping video di CeLOE Studio Digital Space.\n <\/p>\n\n <!-- Container Tab -->\n <div class=\"bg-white border border-gray-100 rounded-xl shadow-lg p-1 tab-container\" id=\"tab-container-1\">\n <!-- Navigasi Tab -->\n <div class=\"flex gap-1 p-1 bg-gray-50 rounded-lg mb-4 overflow-x-auto\">\n <button onclick=\"switchTab('1', 'output')\" class=\"tab-btn active flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 bg-white text-red-700 shadow-sm whitespace-nowrap\">Output<\/button>\n <button onclick=\"switchTab('1', 'durasi')\" class=\"tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\">Durasi<\/button>\n <button onclick=\"switchTab('1', 'crew')\" class=\"tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\">Tim<\/button>\n <\/div>\n\n <!-- Isi Konten Tab -->\n <div class=\"px-3 sm:px-5 pb-5 min-h-[100px] sm:min-h-[120px]\">\n <div id=\"content-1-output\" class=\"tab-content active\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Shooting di studio : 4-5 video dengan durasi 5-7 menit<\/li>\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Video MP4 dengan resolusi Full HD (1080p)<\/li>\n <\/ul>\n <\/div>\n <div id=\"content-1-durasi\" class=\"tab-content\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Total durasi pengerjaan: 7 hari kerja<\/li>\n <\/ul>\n <\/div>\n <div id=\"content-1-crew\" class=\"tab-content\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Studio manager, Cameraperson, Editor, Script writer, MUA<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ========================================== -->\n <!-- ITEM 2: VIDEO LEARNING (Gambar Kanan) -->\n <!-- ========================================== -->\n <div class=\"flex flex-col lg:flex-row-reverse gap-8 lg:gap-16 items-center mb-24\">\n \n <!-- BAGIAN 1: GAMBAR INTERAKTIF -->\n <div class=\"w-full lg:w-1\/2 group cursor-pointer perspective-1000 hover-trigger\">\n <div class=\"relative overflow-hidden rounded-2xl shadow-2xl aspect-video lg:aspect-[4\/3] transition-all duration-500 hover:shadow-red-900\/20 hover:-translate-y-2\">\n <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/383a94bd31d18e900f411bb22c204e7307f2fae0.png\" \n alt=\"Video Learning\" \n class=\"main-img object-cover w-full h-full transform transition-transform duration-700\">\n \n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300\"><\/div>\n\n <div class=\"play-icon absolute inset-0 flex items-center justify-center opacity-0 transform scale-75 transition-all duration-300 z-10\">\n <a href=\"https:\/\/telkomuniversityofficial-my.sharepoint.com\/personal\/celoecode_365_telkomuniversity_ac_id\/_layouts\/15\/stream.aspx?id=%2Fpersonal%2Fceloecode%5F365%5Ftelkomuniversity%5Fac%5Fid%2FDocuments%2FPORTOFOLIO%2FPortofolio%20Layanan%20%26%20Jasa%20Bang%20CeLOE%202024%2F4%2E%20Dopamin%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2E523c78f1%2D145d%2D492b%2D811b%2Df2b8072122f2\" target=\"_blank\" \n class=\"w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-white\/20 backdrop-blur-md border border-white\/50 flex items-center justify-center shadow-lg hover:bg-white\/30 transition-colors cursor-pointer\">\n <svg class=\"w-6 h-6 sm:w-8 sm:h-8 text-white fill-white ml-1\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon>\n <\/svg>\n <\/a>\n <\/div>\n\n <!-- Badges Item 2 -->\n <div class=\"badges absolute top-2 right-2 sm:top-4 sm:right-4 flex flex-col gap-1 sm:gap-2 items-end transition-all duration-500 opacity-1 lg:opacity-0 lg:translate-x-4\">\n <span class=\"px-2 py-0.5 sm:px-3 sm:py-1 bg-black\/40 backdrop-blur-md border border-white\/10 text-white text-[10px] sm:text-xs font-medium rounded-full shadow-lg\">Motion Graphic<\/span>\n <span class=\"hidden sm:inline-block px-3 py-1 bg-black\/40 backdrop-blur-md border border-white\/10 text-white text-xs font-medium rounded-full shadow-lg\">Interactive<\/span>\n <\/div>\n\n <!-- Info Bar Bawah Item 2 -->\n <div class=\"absolute bottom-0 left-0 right-0 p-3 sm:p-6 flex justify-between items-end z-20\">\n <div class=\"text-white w-full\">\n <div class=\"flex items-center gap-2 mb-1 sm:mb-2\">\n <div class=\"p-1.5 sm:p-2 bg-red-600 rounded-lg shadow-lg\">\n <svg class=\"w-3 h-3 sm:w-5 sm:h-5 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>\n <\/div>\n <span class=\"bg-white\/20 backdrop-blur-md px-1.5 py-0.5 sm:px-2 sm:py-0.5 rounded text-[10px] sm:text-xs font-semibold text-white border border-white\/20\">Video Service<\/span>\n <\/div>\n <h4 class=\"text-sm sm:text-lg font-bold text-white\/90 truncate\">Preview Sample<\/h4>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"absolute -z-10 w-full h-full bg-red-500\/10 blur-3xl rounded-full top-10 -right-10\"><\/div>\n <\/div>\n\n <!-- KONTEN TAB ITEM 2 -->\n <div class=\"w-full lg:w-1\/2\">\n <h3 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mb-2\">Video Learning<\/h3>\n <p class=\"text-red-600 font-medium mb-4 text-base sm:text-lg\">Animasi & Motion Grafis<\/p>\n <p class=\"text-gray-600 leading-relaxed mb-8 text-sm sm:text-base\">\n Pembuatan konten video full animasi 2D didampingi oleh profesional dari pra-produksi hingga post-produksi.\n <\/p>\n\n <div class=\"bg-white border border-gray-100 rounded-xl shadow-lg p-1 tab-container\" id=\"tab-container-2\">\n <div class=\"flex gap-1 p-1 bg-gray-50 rounded-lg mb-4 overflow-x-auto\">\n <button onclick=\"switchTab('2', 'output')\" class=\"tab-btn active flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 bg-white text-red-700 shadow-sm whitespace-nowrap\">Output<\/button>\n <button onclick=\"switchTab('2', 'durasi')\" class=\"tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\">Durasi<\/button>\n <button onclick=\"switchTab('2', 'crew')\" class=\"tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\">Tim<\/button>\n <\/div>\n\n <div class=\"px-3 sm:px-5 pb-5 min-h-[100px] sm:min-h-[120px]\">\n <div id=\"content-2-output\" class=\"tab-content active\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Video MP4 High Bitrate<\/li>\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Aset Grafis Terpisah<\/li>\n <\/ul>\n <\/div>\n <div id=\"content-2-durasi\" class=\"tab-content\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Script & Storyboard: 3 hari<\/li>\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Editing & Animasi: 7-10 hari<\/li>\n <\/ul>\n <\/div>\n <div id=\"content-2-crew\" class=\"tab-content\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Creative Director, Motion Artist<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- JAVASCRIPT UNTUK FUNGSI TAB -->\n <script>\n function switchTab(groupId, targetId) {\n const container = document.getElementById('tab-container-' + groupId);\n const buttons = container.querySelectorAll('.tab-btn');\n \n \/\/ Perbaikan class saat reset agar konsisten responsive\n buttons.forEach(btn => {\n btn.className = \"tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\";\n });\n \n event.currentTarget.className = \"tab-btn active flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 bg-white text-red-700 shadow-sm whitespace-nowrap\";\n\n const contents = container.querySelectorAll('.tab-content');\n contents.forEach(content => {\n content.classList.remove('active');\n });\n\n const targetContent = document.getElementById('content-' + groupId + '-' + targetId);\n if (targetContent) {\n targetContent.classList.add('active');\n }\n }\n <\/script>\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-bbbe2e8 elementor-widget elementor-widget-html\" data-id=\"bbbe2e8\" 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<!-- ================================================================================== -->\n<!-- KODE SNIPPET ELEMENTOR (VERSI \"EVENT LISTENER\" - ANTI KONFLIK) -->\n<!-- Cara Pasang: Copy SEMUA kode di bawah ini lalu Paste ke Widget \"HTML\" di Elementor -->\n<!-- ================================================================================== -->\n\n<!-- 1. Load Tailwind -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- 2. Style CSS Khusus (Scoped ID) -->\n<style>\n \/* Menggunakan ID #celoe-wrapper agar lebih kuat prioritasnya dibanding tema *\/\n #celoe-wrapper .celoe-tab-content {\n display: none !important; \/* Paksa sembunyi *\/\n opacity: 0;\n transform: translateX(10px);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n \n #celoe-wrapper .celoe-tab-content.active {\n display: block !important; \/* Paksa muncul *\/\n animation: celoeFadeIn 0.4s ease forwards;\n }\n \n @keyframes celoeFadeIn {\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n \/* Styling tambahan untuk memastikan button tidak rusak oleh tema *\/\n #celoe-wrapper button:focus {\n outline: none;\n }\n\n \/* Efek Hover Image *\/\n .perspective-1000 {\n perspective: 1000px;\n }\n \n @media (hover: hover) {\n .hover-trigger:hover .play-icon { opacity: 1; transform: scale(1); }\n .hover-trigger:hover .main-img { transform: scale(1.1); }\n .hover-trigger:hover .badges { opacity: 1; transform: translateX(0); }\n }\n \n .hover-trigger:active .play-icon { opacity: 1; transform: scale(1); }\n<\/style>\n\n<!-- 3. Konten Utama (Dibungkus ID Wrapper) -->\n<div id=\"celoe-wrapper\" class=\"w-full bg-white font-sans text-gray-900\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n\n <!-- ========================================== -->\n <!-- ITEM 1: VIDEO TUTORIAL (Gambar Kiri) -->\n <!-- ========================================== -->\n <div class=\"flex flex-col lg:flex-row gap-8 lg:gap-16 items-center mb-24\">\n \n <!-- GAMBAR -->\n <div class=\"w-full lg:w-1\/2 group cursor-pointer perspective-1000 hover-trigger\">\n <div class=\"relative overflow-hidden rounded-2xl shadow-2xl aspect-video lg:aspect-[4\/3] transition-all duration-500 hover:shadow-red-900\/20 hover:-translate-y-2\">\n <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/bb8f639deacf01df172999693828439f7273e3d3.png\" alt=\"Video Tutorial\" class=\"main-img object-cover w-full h-full transform transition-transform duration-700\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300\"><\/div>\n\n <!-- Tombol Play -->\n <div class=\"play-icon absolute inset-0 flex items-center justify-center opacity-0 transform scale-75 transition-all duration-300 z-10\">\n <a href=\"https:\/\/telkomuniversityofficial-my.sharepoint.com\/:v:\/g\/personal\/celoecode_365_telkomuniversity_ac_id\/IQBebnVBtWaZTrmBvPslEdkeAekQQCZ70DT1fPKFjQTXrJo?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=FzyGei\" target=\"_blank\" class=\"w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-white\/20 backdrop-blur-md border border-white\/50 flex items-center justify-center shadow-lg hover:bg-white\/30 transition-colors cursor-pointer\">\n <svg class=\"w-6 h-6 sm:w-8 sm:h-8 text-white fill-white ml-1\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n <\/a>\n <\/div>\n\n <!-- Badges -->\n <div class=\"badges absolute top-2 right-2 sm:top-4 sm:right-4 flex flex-col gap-1 sm:gap-2 items-end transition-all duration-500 opacity-1 lg:opacity-0 lg:translate-x-4\">\n <span class=\"px-2 py-0.5 sm:px-3 sm:py-1 bg-black\/40 backdrop-blur-md border border-white\/10 text-white text-[10px] sm:text-xs font-medium rounded-full shadow-lg\">Full HD 1080p<\/span>\n <span class=\"hidden sm:inline-block px-3 py-1 bg-black\/40 backdrop-blur-md border border-white\/10 text-white text-xs font-medium rounded-full shadow-lg\">Multi-Angle<\/span>\n <\/div>\n\n <!-- Info Bar -->\n <div class=\"absolute bottom-0 left-0 right-0 p-3 sm:p-6 flex justify-between items-end z-20\">\n <div class=\"text-white w-full\">\n <div class=\"flex items-center gap-2 mb-1 sm:mb-2\">\n <div class=\"p-1.5 sm:p-2 bg-red-600 rounded-lg shadow-lg\"><svg class=\"w-3 h-3 sm:w-5 sm:h-5 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg><\/div>\n <span class=\"bg-white\/20 backdrop-blur-md px-1.5 py-0.5 sm:px-2 sm:py-0.5 rounded text-[10px] sm:text-xs font-semibold text-white border border-white\/20\">Video Service<\/span>\n <\/div>\n <h4 class=\"text-sm sm:text-lg font-bold text-white\/90 truncate\">Preview Sample<\/h4>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"absolute -z-10 w-full h-full bg-red-500\/10 blur-3xl rounded-full top-10 -left-10\"><\/div>\n <\/div>\n\n <!-- TAB INFORMASI ITEM 1 -->\n <div class=\"w-full lg:w-1\/2\">\n <h3 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mb-2\">Video Tutorial<\/h3>\n <p class=\"text-red-600 font-medium mb-4 text-base sm:text-lg\">Konten Video Pembelajaran dengan Tools<\/p>\n <p class=\"text-gray-600 leading-relaxed mb-8 text-sm sm:text-base\">\n Pembuatan konten video menggunakan tools dan perangkat sesuai kebutuhan, didampingi oleh profesional dari pra-produksi hingga post-produksi, termasuk pendampingan talent dan penyusunan skrip.\n <\/p>\n\n <!-- ID Container 1 -->\n <div id=\"celoe-tab-container-1\" class=\"bg-white border border-gray-100 rounded-xl shadow-lg p-1\">\n <div class=\"flex gap-1 p-1 bg-gray-50 rounded-lg mb-4 overflow-x-auto\">\n <!-- Perhatikan: Tidak ada onclick, kita pakai data attributes -->\n <button class=\"celoe-tab-btn active flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 bg-white text-red-700 shadow-sm whitespace-nowrap\" data-group=\"1\" data-target=\"output\">Output<\/button>\n <button class=\"celoe-tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\" data-group=\"1\" data-target=\"durasi\">Durasi<\/button>\n <button class=\"celoe-tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\" data-group=\"1\" data-target=\"crew\">Tim<\/button>\n <\/div>\n\n <div class=\"px-3 sm:px-5 pb-5 min-h-[100px] sm:min-h-[120px]\">\n <div id=\"celoe-content-1-output\" class=\"celoe-tab-content active\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Video MP4 Full HD (1080p)<\/li>\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Teaser video (Instagram\/TikTok)<\/li>\n <\/ul>\n <\/div>\n <div id=\"celoe-content-1-durasi\" class=\"celoe-tab-content\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Pre-production: 1-2 hari<\/li>\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Shooting: Sesuai SKS<\/li>\n <\/ul>\n <\/div>\n <div id=\"celoe-content-1-crew\" class=\"celoe-tab-content\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>1 Videographer & 1 Audioman<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ========================================== -->\n <!-- ITEM 2: VIDEO SIMULASI (Gambar Kanan) -->\n <!-- ========================================== -->\n <div class=\"flex flex-col lg:flex-row-reverse gap-8 lg:gap-16 items-center mb-24\">\n \n <!-- GAMBAR -->\n <div class=\"w-full lg:w-1\/2 group cursor-pointer perspective-1000 hover-trigger\">\n <div class=\"relative overflow-hidden rounded-2xl shadow-2xl aspect-video lg:aspect-[4\/3] transition-all duration-500 hover:shadow-red-900\/20 hover:-translate-y-2\">\n <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/bf1f0c001bb897cd1b5d7fe67bc49498136ab1da.png\" alt=\"Video Simulasi\" class=\"main-img object-cover w-full h-full transform transition-transform duration-700\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-black\/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300\"><\/div>\n\n <div class=\"play-icon absolute inset-0 flex items-center justify-center opacity-0 transform scale-75 transition-all duration-300 z-10\">\n <a href=\"https:\/\/www.youtube.com\/watch?v=PI-3G44GLO0\" target=\"_blank\" class=\"w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-white\/20 backdrop-blur-md border border-white\/50 flex items-center justify-center shadow-lg hover:bg-white\/30 transition-colors cursor-pointer\">\n <svg class=\"w-6 h-6 sm:w-8 sm:h-8 text-white fill-white ml-1\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>\n <\/a>\n <\/div>\n\n <div class=\"badges absolute top-2 right-2 sm:top-4 sm:right-4 flex flex-col gap-1 sm:gap-2 items-end transition-all duration-500 opacity-1 lg:opacity-0 lg:translate-x-4\">\n <span class=\"px-2 py-0.5 sm:px-3 sm:py-1 bg-black\/40 backdrop-blur-md border border-white\/10 text-white text-[10px] sm:text-xs font-medium rounded-full shadow-lg\">360\u00b0 Video<\/span>\n <span class=\"hidden sm:inline-block px-3 py-1 bg-black\/40 backdrop-blur-md border border-white\/10 text-white text-xs font-medium rounded-full shadow-lg\">Interactive<\/span>\n <\/div>\n\n <div class=\"absolute bottom-0 left-0 right-0 p-3 sm:p-6 flex justify-between items-end z-20\">\n <div class=\"text-white w-full\">\n <div class=\"flex items-center gap-2 mb-1 sm:mb-2\">\n <div class=\"p-1.5 sm:p-2 bg-red-600 rounded-lg shadow-lg\"><svg class=\"w-3 h-3 sm:w-5 sm:h-5 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg><\/div>\n <span class=\"bg-white\/20 backdrop-blur-md px-1.5 py-0.5 sm:px-2 sm:py-0.5 rounded text-[10px] sm:text-xs font-semibold text-white border border-white\/20\">Video Service<\/span>\n <\/div>\n <h4 class=\"text-sm sm:text-lg font-bold text-white\/90 truncate\">Preview Sample<\/h4>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"absolute -z-10 w-full h-full bg-red-500\/10 blur-3xl rounded-full top-10 -right-10\"><\/div>\n <\/div>\n\n <!-- TAB INFORMASI ITEM 2 -->\n <div class=\"w-full lg:w-1\/2\">\n <h3 class=\"text-2xl sm:text-3xl font-bold text-gray-900 mb-2\">Video Simulasi<\/h3>\n <p class=\"text-red-600 font-medium mb-4 text-base sm:text-lg\">Video 360 & Interaktif<\/p>\n <p class=\"text-gray-600 leading-relaxed mb-8 text-sm sm:text-base\">\n Pembuatan konten video menggunakan teknologi 360\u00b0 didampingi oleh profesional dari pra-produksi hingga post-produksi.\n <\/p>\n\n <!-- ID Container 2 -->\n <div id=\"celoe-tab-container-2\" class=\"bg-white border border-gray-100 rounded-xl shadow-lg p-1\">\n <div class=\"flex gap-1 p-1 bg-gray-50 rounded-lg mb-4 overflow-x-auto\">\n <button class=\"celoe-tab-btn active flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 bg-white text-red-700 shadow-sm whitespace-nowrap\" data-group=\"2\" data-target=\"output\">Output<\/button>\n <button class=\"celoe-tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\" data-group=\"2\" data-target=\"durasi\">Durasi<\/button>\n <button class=\"celoe-tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\" data-group=\"2\" data-target=\"crew\">Tim<\/button>\n <\/div>\n\n <div class=\"px-3 sm:px-5 pb-5 min-h-[100px] sm:min-h-[120px]\">\n <div id=\"celoe-content-2-output\" class=\"celoe-tab-content active\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Video MP4 High Bitrate<\/li>\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Aset Grafis Terpisah<\/li>\n <\/ul>\n <\/div>\n <div id=\"celoe-content-2-durasi\" class=\"celoe-tab-content\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Script & Storyboard: 3 hari<\/li>\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Editing & Animasi: 7-10 hari<\/li>\n <\/ul>\n <\/div>\n <div id=\"celoe-content-2-crew\" class=\"celoe-tab-content\">\n <ul class=\"space-y-2 sm:space-y-3\">\n <li class=\"flex items-start gap-3 text-gray-700 text-xs sm:text-base\"><span class=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0\"><\/span>Creative Director, Motion Artist<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n<!-- 4. Javascript (EVENT LISTENER METHOD) -->\n<script>\n \/\/ Fungsi pembungkus (Self Invoking) agar variabel tidak bentrok dengan plugin lain\n (function() {\n \/\/ Fungsi inisialisasi\n function initCeloeTabs() {\n \/\/ 1. Cari semua tombol dengan class 'celoe-tab-btn'\n var buttons = document.querySelectorAll('.celoe-tab-btn');\n \n buttons.forEach(function(btn) {\n \/\/ Hapus event listener lama (jika ada) biar gak double, lalu tambah baru\n \/\/ Note: cloneNode cara paling mudah untuk membersihkan listener lama di vanilla JS sederhana\n var newBtn = btn.cloneNode(true);\n btn.parentNode.replaceChild(newBtn, btn);\n \n newBtn.addEventListener('click', function(e) {\n e.preventDefault(); \/\/ Mencegah scroll ke atas\n \n var group = this.getAttribute('data-group');\n var target = this.getAttribute('data-target');\n var container = document.getElementById('celoe-tab-container-' + group);\n \n if (!container) return;\n\n \/\/ A. Reset Tombol di grup ini\n var groupButtons = container.querySelectorAll('.celoe-tab-btn');\n groupButtons.forEach(function(b) {\n b.className = \"celoe-tab-btn flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 text-gray-500 hover:bg-gray-200 whitespace-nowrap\";\n });\n\n \/\/ B. Set Tombol Aktif\n this.className = \"celoe-tab-btn active flex-1 py-2 sm:py-2.5 px-2 sm:px-4 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 bg-white text-red-700 shadow-sm whitespace-nowrap\";\n\n \/\/ C. Sembunyikan Konten\n var contents = container.querySelectorAll('.celoe-tab-content');\n contents.forEach(function(c) {\n c.classList.remove('active');\n });\n\n \/\/ D. Tampilkan Konten Target\n var targetContent = document.getElementById('celoe-content-' + group + '-' + target);\n if (targetContent) {\n targetContent.classList.add('active');\n }\n });\n });\n }\n\n \/\/ Jalankan saat DOM siap (Kompatibel dengan Elementor\/WordPress)\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initCeloeTabs);\n } else {\n initCeloeTabs();\n }\n \n \/\/ Listener tambahan jika Elementor me-render ulang widget via AJAX (Optional tapi berguna)\n window.addEventListener('elementor\/frontend\/init', initCeloeTabs);\n })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-736bbd3 elementor-widget elementor-widget-spacer\" data-id=\"736bbd3\" 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<div class=\"elementor-element elementor-element-f3f9bd0 e-flex e-con-boxed e-con e-parent\" data-id=\"f3f9bd0\" 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-ce0e369 elementor-widget elementor-widget-html\" data-id=\"ce0e369\" 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-520def7 e-flex e-con-boxed e-con e-parent\" data-id=\"520def7\" 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-16ffc47 elementor-widget elementor-widget-spacer\" data-id=\"16ffc47\" 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 Layanan Produksi Video Kami juga […]<\/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-356","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/356","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=356"}],"version-history":[{"count":0,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/356\/revisions"}],"wp:attachment":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/media?parent=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}