{"id":1082,"date":"2025-12-05T09:05:57","date_gmt":"2025-12-05T02:05:57","guid":{"rendered":"https:\/\/celoe.telkomuniversity.ac.id\/code\/?page_id=1082"},"modified":"2025-12-08T11:42:26","modified_gmt":"2025-12-08T04:42:26","slug":"internship","status":"publish","type":"page","link":"https:\/\/celoe.telkomuniversity.ac.id\/code\/internship\/","title":{"rendered":"Internship"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1082\" class=\"elementor elementor-1082\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37eda73 e-flex e-con-boxed e-con e-parent\" data-id=\"37eda73\" 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-7d263a1 elementor-widget elementor-widget-html\" data-id=\"7d263a1\" 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<!-- LOAD FONT POPPINS -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<!-- LOAD ICON (FontAwesome) -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n\n<style>\n    \/* --- CSS VARIABEL --- *\/\n    :root {\n        --celoe-red: #be1e2d;\n        --celoe-dark: #2d3436;\n        --celoe-text: #636e72;\n        --bg-gradient: linear-gradient(135deg, #fffbfb 0%, #fff0f1 100%);\n    }\n\n    \/* --- CONTAINER UTAMA --- *\/\n    .hero-dynamic {\n        font-family: 'Poppins', sans-serif;\n        background: var(--bg-gradient);\n        padding: 80px 20px;\n        overflow: hidden; \/* Mencegah elemen dekoratif keluar *\/\n        position: relative;\n    }\n\n    .container-dynamic {\n        max-width: 1140px;\n        margin: 0 auto;\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 50px;\n        align-items: center;\n    }\n\n    \/* --- BAGIAN KIRI (KONTEN) --- *\/\n    .content-side {\n        z-index: 2;\n        animation: slideRight 0.8s ease-out;\n    }\n\n    .tag-capsule {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        background: white;\n        padding: 8px 16px;\n        border-radius: 50px;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.05);\n        margin-bottom: 25px;\n        font-size: 0.85rem;\n        font-weight: 600;\n        color: var(--celoe-red);\n        border: 1px solid rgba(190, 30, 45, 0.1);\n    }\n\n    .tag-capsule i {\n        font-size: 0.8rem;\n    }\n\n    .content-side h1 {\n        font-size: 3.2rem;\n        line-height: 1.15;\n        color: var(--celoe-dark);\n        margin: 0 0 25px 0;\n        font-weight: 700;\n    }\n\n    .content-side h1 .highlight {\n        position: relative;\n        color: var(--celoe-red);\n        z-index: 1;\n    }\n    \n    \/* Garis bawah artistik pada teks highlight *\/\n    .content-side h1 .highlight::after {\n        content: \"\";\n        position: absolute;\n        bottom: 5px;\n        left: 0;\n        width: 100%;\n        height: 12px;\n        background-color: rgba(190, 30, 45, 0.15);\n        z-index: -1;\n        border-radius: 4px;\n    }\n\n    .content-side p {\n        font-size: 1.1rem;\n        color: var(--celoe-text);\n        line-height: 1.7;\n        margin-bottom: 40px;\n        max-width: 90%;\n    }\n\n    \/* Button Style Baru *\/\n    .cta-area {\n        display: flex;\n        align-items: center;\n        gap: 20px;\n    }\n\n    .btn-solid {\n        background: var(--celoe-red);\n        color: white;\n        padding: 16px 36px;\n        border-radius: 12px;\n        font-weight: 600;\n        text-decoration: none;\n        transition: all 0.3s ease;\n        box-shadow: 0 10px 25px rgba(190, 30, 45, 0.25);\n    }\n\n    .btn-solid:hover {\n        transform: translateY(-5px);\n        box-shadow: 0 15px 35px rgba(190, 30, 45, 0.35);\n    }\n\n    .link-text {\n        color: var(--celoe-dark);\n        font-weight: 600;\n        text-decoration: none;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        transition: color 0.3s;\n    }\n\n    .link-text:hover {\n        color: var(--celoe-red);\n    }\n    \n    .link-text i {\n        font-size: 0.8rem;\n        transition: transform 0.3s;\n    }\n    \n    .link-text:hover i {\n        transform: translateX(5px);\n    }\n\n    \/* --- BAGIAN KANAN (VISUAL COMPOSITION) --- *\/\n    .visual-side {\n        position: relative;\n        height: 500px; \/* Area untuk komposisi gambar *\/\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        animation: slideLeft 1s ease-out 0.2s backwards;\n    }\n\n    \/* Gambar Utama - Bentuk Unik *\/\n    .main-img-box {\n        width: 380px;\n        height: 480px;\n        border-radius: 30px 30px 30px 5px; \/* Sudut asimetris *\/\n        overflow: hidden;\n        position: relative;\n        z-index: 2;\n        box-shadow: 20px 20px 60px rgba(0,0,0,0.1);\n    }\n\n    .main-img-box img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.5s ease;\n    }\n    \n    .main-img-box:hover img {\n        transform: scale(1.05);\n    }\n\n    \/* Floating Card (Kaca) *\/\n    .floating-card {\n        position: absolute;\n        bottom: 40px;\n        left: -40px;\n        background: rgba(255, 255, 255, 0.9);\n        backdrop-filter: blur(10px);\n        padding: 20px;\n        border-radius: 16px;\n        box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n        z-index: 3;\n        display: flex;\n        align-items: center;\n        gap: 15px;\n        border: 1px solid rgba(255,255,255,0.5);\n        animation: floatY 4s ease-in-out infinite;\n    }\n\n    .icon-box {\n        width: 45px;\n        height: 45px;\n        background: #eafbf0; \/* Hijau muda soft *\/\n        color: #27ae60;\n        border-radius: 50%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 1.2rem;\n    }\n\n    .card-info h4 {\n        margin: 0;\n        font-size: 0.9rem;\n        color: #888;\n        font-weight: 500;\n    }\n    .card-info span {\n        display: block;\n        font-size: 1.1rem;\n        font-weight: 700;\n        color: var(--celoe-dark);\n    }\n\n    \/* Dekorasi Dots *\/\n    .dots-deco {\n        position: absolute;\n        top: -20px;\n        right: 20px;\n        width: 100px;\n        height: 100px;\n        background-image: radial-gradient(#be1e2d 20%, transparent 20%);\n        background-size: 10px 10px;\n        opacity: 0.2;\n        z-index: 1;\n    }\n\n    \/* --- ANIMASI --- *\/\n    @keyframes slideRight {\n        from { opacity: 0; transform: translateX(-50px); }\n        to { opacity: 1; transform: translateX(0); }\n    }\n    @keyframes slideLeft {\n        from { opacity: 0; transform: translateX(50px); }\n        to { opacity: 1; transform: translateX(0); }\n    }\n    @keyframes floatY {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-10px); }\n    }\n\n    \/* --- RESPONSIVE MOBILE --- *\/\n    @media (max-width: 991px) {\n        .hero-dynamic {\n            padding: 50px 20px;\n        }\n        .container-dynamic {\n            grid-template-columns: 1fr;\n            text-align: center;\n        }\n        .content-side {\n            order: 2; \/* Gambar di atas untuk mobile? Atau text di atas. Default text atas. *\/\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n        .content-side h1 {\n            font-size: 2.5rem;\n        }\n        .visual-side {\n            height: auto;\n            margin-bottom: 30px;\n            justify-content: center;\n        }\n        .main-img-box {\n            width: 100%;\n            max-width: 400px;\n            height: 300px;\n        }\n        .floating-card {\n            left: 50%;\n            transform: translateX(-50%);\n            bottom: -20px;\n            width: max-content;\n            animation: none; \/* Matikan animasi float di HP agar tidak berat\/mengganggu *\/\n        }\n        .dots-deco {\n            right: 10px;\n        }\n    }\n<\/style>\n\n<div class=\"hero-dynamic\">\n    <div class=\"container-dynamic\">\n        \n        <!-- KOLOM KIRI -->\n        <div class=\"content-side\">\n            <div class=\"tag-capsule\">\n                <i class=\"fas fa-bolt\"><\/i> Pendaftaran Batch 2024 Dibuka\n            <\/div>\n            \n            <h1>Raih Pengalaman <br><span class=\"highlight\">Magang Terbaik<\/span> di Industri Digital<\/h1>\n            \n            <p>CeLOE Telkom University membuka peluang bagi talenta muda untuk belajar, berkarya, dan berinovasi langsung dari para ahli.<\/p>\n            \n            <div class=\"cta-area\">\n                <a href=\"#daftar\" class=\"btn-solid\">Daftar Sekarang<\/a>\n                <a href=\"#video\" class=\"link-text\">\n                    <i class=\"fas fa-play-circle\" style=\"font-size: 1.5rem; color: #be1e2d;\"><\/i> Tonton Video\n                <\/a>\n            <\/div>\n        <\/div>\n\n        <!-- KOLOM KANAN (Visual) -->\n        <div class=\"visual-side\">\n            <!-- Elemen Dekorasi -->\n            <div class=\"dots-deco\"><\/div>\n            \n            <!-- Gambar Utama -->\n            <div class=\"main-img-box\">\n                <!-- Gunakan gambar portrait (tegak) agar pas -->\n                <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-8.webp\" alt=\"Mahasiswa Diskusi\">\n            <\/div>\n\n            <!-- Kartu Melayang -->\n            <div class=\"floating-card\">\n                <div class=\"icon-box\">\n                    <i class=\"fas fa-user-check\"><\/i>\n                <\/div>\n                <div class=\"card-info\">\n                    <h4>Telah Bergabung<\/h4>\n                    <span>1,200+ Alumni<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50f178f elementor-widget elementor-widget-spacer\" data-id=\"50f178f\" 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-680aa26 elementor-widget elementor-widget-html\" data-id=\"680aa26\" 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<!-- LOAD SWIPER CSS -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@10\/swiper-bundle.min.css\" \/>\n<!-- LOAD FONT POPPINS -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* --- CSS UTAMA --- *\/\n    :root {\n        --celoe-red: #be1e2d;\n        --text-white: #ffffff;\n    }\n\n    .celoe-gallery-section {\n        font-family: 'Poppins', sans-serif;\n        padding: 60px 20px;\n        background: #f9f9f9;\n        overflow: hidden;\n    }\n\n    \/* Header Section *\/\n    .gallery-header {\n        text-align: center;\n        margin-bottom: 40px;\n        animation: fadeIn 1s ease;\n    }\n\n    .gallery-header h2 {\n        font-size: 2rem;\n        font-weight: 700;\n        color: #333;\n        margin-bottom: 10px;\n    }\n\n    .gallery-header span {\n        color: var(--celoe-red);\n    }\n\n    .gallery-header p {\n        color: #666;\n        max-width: 600px;\n        margin: 0 auto;\n    }\n\n    \/* --- SWIPER CONTAINER --- *\/\n    .swiper-container {\n        width: 100%;\n        max-width: 1200px;\n        margin: 0 auto;\n        padding-bottom: 60px;\n        padding-top: 20px;\n    }\n\n    \/* --- SLIDE STYLE (FIXED PORTRAIT) --- *\/\n    .swiper-slide {\n        \/* FORCE PORTRAIT: Menggunakan Aspect Ratio 3:4 *\/\n        aspect-ratio: 3 \/ 4; \n        width: 300px !important; \/* Base width untuk desktop *\/\n        border-radius: 20px;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n        transition: transform 0.3s ease;\n        background-color: #000; \/* Background hitam agar jika loading tidak putih *\/\n        flex-shrink: 0; \/* Mencegah slide mengecil tak terduga *\/\n    }\n\n    \/* Responsive Mobile Width *\/\n    @media (max-width: 768px) {\n        .swiper-slide {\n            width: 75vw !important; \/* Di HP lebar 75% layar agar peeking (kelihatan slide sebelahnya) *\/\n        }\n    }\n\n    \/* --- CARD DESIGN --- *\/\n    .activity-card {\n        width: 100%;\n        height: 100%;\n        position: relative;\n        cursor: pointer;\n    }\n\n    .activity-img {\n        width: 100%;\n        height: 100%;\n        \/* KUNCI UTAMA: Object Fit Cover & Position Absolute *\/\n        object-fit: cover; \n        object-position: center;\n        position: absolute;\n        top: 0;\n        left: 0;\n        transition: transform 0.6s ease;\n    }\n\n    \/* Overlay Gradient *\/\n    .activity-overlay {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: 100%; \/* Overlay full height untuk gradasi lebih smooth *\/\n        background: linear-gradient(to top, rgba(190, 30, 45, 0.9) 0%, rgba(190, 30, 45, 0.4) 30%, rgba(0,0,0,0) 60%);\n        padding: 25px;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        z-index: 2;\n    }\n\n    .activity-content h3 {\n        color: var(--text-white);\n        font-size: 1.4rem;\n        font-weight: 700;\n        margin: 0 0 8px 0;\n        line-height: 1.2;\n        text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n    }\n\n    .activity-content p {\n        color: rgba(255, 255, 255, 0.95);\n        font-size: 0.95rem;\n        margin: 0;\n        line-height: 1.5;\n        font-weight: 400;\n    }\n\n    \/* --- HOVER EFFECTS --- *\/\n    .swiper-slide:hover {\n        transform: translateY(-10px);\n        z-index: 5;\n    }\n\n    .swiper-slide:hover .activity-img {\n        transform: scale(1.1);\n    }\n\n    \/* --- NAVIGATION & PAGINATION --- *\/\n    .swiper-pagination-bullet-active {\n        background-color: var(--celoe-red) !important;\n        width: 30px !important;\n        border-radius: 5px !important;\n    }\n\n    .custom-nav-btn {\n        color: var(--celoe-red);\n        background: white;\n        width: 50px;\n        height: 50px;\n        border-radius: 50%;\n        box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n        font-weight: bold;\n    }\n    .custom-nav-btn:after { font-size: 1.2rem; }\n    .custom-nav-btn:hover {\n        background: var(--celoe-red);\n        color: white;\n    }\n\n    @keyframes fadeIn {\n        from { opacity: 0; transform: translateY(20px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n<\/style>\n\n<div class=\"celoe-gallery-section\">\n    <!-- Judul Section -->\n    <div class=\"gallery-header\">\n        <h2>Galeri Kegiatan <span>Internship<\/span><\/h2>\n        <p>Intip keseruan dan suasana kolaboratif para peserta magang dalam mengembangkan inovasi digital.<\/p>\n    <\/div>\n\n    <!-- Swiper -->\n    <div class=\"swiper mySwiper\">\n        <div class=\"swiper-wrapper\">\n            \n            <!-- SLIDE 1 -->\n            <div class=\"swiper-slide\">\n                <div class=\"activity-card\">\n                    <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-9.webp\" class=\"activity-img\" alt=\"Kegiatan 1\">\n                    <div class=\"activity-overlay\">\n                        <div class=\"activity-content\">\n                            <h3>Project Briefing<\/h3>\n                            <p>Diskusi rutin mingguan dan bulanan untuk menyelaraskan target, progres pekerjaan, hambatan, serta memastikan kolaborasi tim berjalan efektif dan terarah konsisten dengan baik.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- SLIDE 2 -->\n            <div class=\"swiper-slide\">\n                <div class=\"activity-card\">\n                    <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-8.webp\" class=\"activity-img\" alt=\"Kegiatan 2\">\n                    <div class=\"activity-overlay\">\n                        <div class=\"activity-content\">\n                            <h3>Collaborative Team<\/h3>\n                            <p>Proses kolaboratif untuk belajar, berdiskusi, dan memecahkan berbagai tantangan secara terarah bersama mentor berpengalaman dengan pendekatan praktis sistematis, efektif, berkelanjutan.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- SLIDE 3 -->\n            <div class=\"swiper-slide\">\n                <div class=\"activity-card\">\n                    <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-12.webp\" class=\"activity-img\" alt=\"Kegiatan 3\">\n                    <div class=\"activity-overlay\">\n                        <div class=\"activity-content\">\n                            <h3>Workshop & Sharing<\/h3>\n                            <p>Kegiatan berbagi pengetahuan oleh tim CeLOE untuk meningkatkan wawasan, keterampilan praktis, dan inspirasi kerja kolaboratif bagi peserta magang secara berkelanjutan.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- SLIDE 4 -->\n            <div class=\"swiper-slide\">\n                <div class=\"activity-card\">\n                    <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-11.webp\" class=\"activity-img\" alt=\"Kegiatan 4\">\n                    <div class=\"activity-overlay\">\n                        <div class=\"activity-content\">\n                            <h3>Team Gathering<\/h3>\n                            <p>Aktivitas kebersamaan dngan tujuan untuk mempererat hubungan, meningkatkan komunikasi, kepercayaan, dan kolaborasi tim secara positif menyenangkan.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n             <!-- SLIDE 5 -->\n             <div class=\"swiper-slide\">\n                <div class=\"activity-card\">\n                    <img decoding=\"async\" src=\"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-content\/uploads\/2025\/12\/image-10.webp\" class=\"activity-img\" alt=\"Kegiatan 5\">\n                    <div class=\"activity-overlay\">\n                        <div class=\"activity-content\">\n                            <h3>Final Presentation<\/h3>\n                            <p>Kegiatan memaparkan hasil kerja magang secara profesional, terstrukturdi hadapan tim sebagai bentuk evaluasi dan pertanggungjawaban akhir program.<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n        \n        <!-- Pagination -->\n        <div class=\"swiper-pagination\"><\/div>\n        <!-- Navigation Buttons -->\n        <div class=\"swiper-button-next custom-nav-btn\"><\/div>\n        <div class=\"swiper-button-prev custom-nav-btn\"><\/div>\n    <\/div>\n<\/div>\n\n<!-- LOAD SWIPER JS -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@10\/swiper-bundle.min.js\"><\/script>\n\n<!-- INITIALIZE SWIPER -->\n<script>\n    var swiper = new Swiper(\".mySwiper\", {\n        effect: \"coverflow\", \/* Efek 3D agar lebih elegan *\/\n        grabCursor: true,\n        centeredSlides: true,\n        slidesPerView: \"auto\",\n        coverflowEffect: {\n            rotate: 0,\n            stretch: 0,\n            depth: 100,\n            modifier: 2,\n            slideShadows: false, \/* Hilangkan shadow bawaan swiper yang jelek *\/\n        },\n        loop: true,\n        autoplay: {\n            delay: 3000,\n            disableOnInteraction: false,\n        },\n        pagination: {\n            el: \".swiper-pagination\",\n            clickable: true,\n        },\n        navigation: {\n            nextEl: \".swiper-button-next\",\n            prevEl: \".swiper-button-prev\",\n        }\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-853b7a3 elementor-widget elementor-widget-spacer\" data-id=\"853b7a3\" 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-07adc59 elementor-widget elementor-widget-html\" data-id=\"07adc59\" 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<!-- LOAD GOOGLE FONT POPPINS -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* --- CSS UTAMA --- *\/\n    :root {\n        --celoe-red: #be1e2d;       \/* Merah Utama *\/\n        --celoe-red-light: #fff0f1; \/* Merah Muda untuk Background Hover *\/\n        --celoe-dark: #2c3e50;      \/* Teks Judul Gelap *\/\n        --celoe-text: #555555;      \/* Teks Paragraf Abu *\/\n        --font-main: 'Poppins', sans-serif;\n    }\n\n    .celoe-timeline-wrapper {\n        font-family: var(--font-main);\n        max-width: 900px;\n        margin: 0 auto;\n        padding: 50px 20px;\n        position: relative;\n        box-sizing: border-box;\n    }\n\n    \/* Garis Tengah Timeline *\/\n    .celoe-timeline-wrapper::after {\n        content: '';\n        position: absolute;\n        width: 6px;\n        background: #f0f0f0;\n        top: 0;\n        bottom: 0;\n        left: 50px; \/* Posisi garis *\/\n        border-radius: 10px;\n        z-index: 0;\n    }\n\n    \/* Container per Item *\/\n    .timeline-item {\n        position: relative;\n        margin-bottom: 50px;\n        display: flex;\n        align-items: flex-start;\n        z-index: 1;\n        opacity: 0; \/* Mulai dari invisible untuk animasi *\/\n        animation: fadeInUp 0.8s ease forwards; \/* Efek animasi masuk *\/\n    }\n\n    \/* Delay animasi agar muncul bergantian *\/\n    .timeline-item:nth-child(1) { animation-delay: 0.2s; }\n    .timeline-item:nth-child(2) { animation-delay: 0.4s; }\n    .timeline-item:nth-child(3) { animation-delay: 0.6s; }\n    .timeline-item:nth-child(4) { animation-delay: 0.8s; }\n    .timeline-item:nth-child(5) { animation-delay: 1.0s; }\n\n    \/* Ikon Bulat (Angka) *\/\n    .timeline-icon-box {\n        min-width: 60px;\n        height: 60px;\n        background: white;\n        border: 4px solid var(--celoe-red);\n        border-radius: 50%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 22px;\n        font-weight: 700;\n        color: var(--celoe-red);\n        z-index: 2;\n        box-shadow: 0 0 0 5px white; \/* Memberi jarak putih dari garis *\/\n        margin-left: 20px; \/* Menyesuaikan posisi tengah garis *\/\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n\n    \/* Kotak Konten (Kanan) *\/\n    .timeline-content-card {\n        background: white;\n        padding: 30px;\n        border-radius: 15px;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.05);\n        margin-left: 40px;\n        flex-grow: 1;\n        position: relative;\n        transition: all 0.3s ease;\n        border-left: 5px solid transparent;\n    }\n\n    \/* Segitiga kecil penghubung *\/\n    .timeline-content-card::before {\n        content: \"\";\n        position: absolute;\n        top: 20px;\n        left: -12px;\n        width: 0; \n        height: 0; \n        border-top: 12px solid transparent;\n        border-bottom: 12px solid transparent; \n        border-right: 12px solid white;\n    }\n\n    \/* Typography *\/\n    .timeline-content-card h3 {\n        margin: 0 0 15px 0;\n        color: var(--celoe-red);\n        font-weight: 700; \/* Font Poppins Bold *\/\n        font-size: 1.35rem;\n        letter-spacing: -0.5px;\n    }\n\n    .timeline-content-card p {\n        margin: 0 0 15px 0;\n        color: var(--celoe-text);\n        font-weight: 400;\n        line-height: 1.7;\n        font-size: 1rem;\n    }\n\n    \/* Styling List yang lebih rapi *\/\n    .timeline-list {\n        padding: 0;\n        margin: 0;\n        list-style: none;\n    }\n\n    .timeline-list li {\n        position: relative;\n        padding-left: 25px;\n        margin-bottom: 8px;\n        color: #444;\n        font-weight: 500;\n        font-size: 0.95rem;\n    }\n\n    .timeline-list li::before {\n        content: \"\\f00c\"; \/* Check icon fontawesome unicode, atau bisa ganti bullet *\/\n        font-family: \"Font Awesome 5 Free\"; \/* Pastikan elementor load FontAwesome *\/\n        font-weight: 900;\n        position: absolute;\n        left: 0;\n        color: var(--celoe-red);\n        font-size: 0.8rem;\n        top: 4px;\n    }\n\n    \/* Jika FontAwesome tidak load, fallback ke bullet bulat *\/\n    .no-icon .timeline-list li::before {\n        content: \"\";\n        width: 8px;\n        height: 8px;\n        background: var(--celoe-red);\n        border-radius: 50%;\n        top: 8px;\n    }\n\n    \/* Link Highlight *\/\n    .mail-link {\n        color: var(--celoe-red);\n        font-weight: 600;\n        text-decoration: none;\n        background-color: var(--celoe-red-light);\n        padding: 2px 8px;\n        border-radius: 4px;\n        transition: 0.2s;\n    }\n\n    .mail-link:hover {\n        background-color: var(--celoe-red);\n        color: white;\n    }\n\n    \/* --- INTERACTION EFFECTS --- *\/\n    \n    \/* Efek Hover pada Item *\/\n    .timeline-item:hover .timeline-icon-box {\n        background-color: var(--celoe-red);\n        color: white;\n        transform: scale(1.15);\n        box-shadow: 0 0 0 8px rgba(190, 30, 45, 0.2); \/* Efek ring luar *\/\n    }\n\n    .timeline-item:hover .timeline-content-card {\n        transform: translateY(-7px);\n        box-shadow: 0 15px 35px rgba(190, 30, 45, 0.1);\n        border-left: 5px solid var(--celoe-red);\n    }\n\n    \/* Keyframes Animasi *\/\n    @keyframes fadeInUp {\n        from {\n            opacity: 0;\n            transform: translateY(30px);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n\n    \/* --- RESPONSIVE MOBILE --- *\/\n    @media (max-width: 768px) {\n        .celoe-timeline-wrapper::after {\n            left: 30px;\n        }\n        \n        .timeline-icon-box {\n            width: 50px;\n            height: 50px;\n            font-size: 18px;\n            margin-left: 5px; \/* Sesuaikan agar pas dengan garis *\/\n            min-width: 50px; \/* Mencegah penyusutan *\/\n        }\n\n        .timeline-content-card {\n            margin-left: 20px;\n            padding: 20px;\n        }\n\n        .timeline-content-card h3 {\n            font-size: 1.2rem;\n        }\n        \n        .timeline-content-card::before {\n            top: 15px; \/* Sesuaikan panah *\/\n        }\n    }\n<\/style>\n\n<!-- JUDUL SECTION -->\n<div style=\"text-align: center; margin-bottom: 60px; font-family: 'Poppins', sans-serif;\">\n    <h2 style=\"color: #2c3e50; font-weight: 800; font-size: 2.2rem; margin-bottom: 15px;\">Alur Pendaftaran <span style=\"color: #be1e2d;\">Internship<\/span><\/h2>\n    <p style=\"color: #777; font-size: 1.1rem; max-width: 700px; margin: 0 auto;\">Langkah mudah memulai karir profesional Anda bersama Telkom University.<\/p>\n<\/div>\n\n<!-- TIMELINE WRAPPER -->\n<div class=\"celoe-timeline-wrapper no-icon\"> <!-- Hapus class 'no-icon' jika website Anda sudah punya FontAwesome -->\n    \n    <!-- STEP 1 -->\n    <div class=\"timeline-item\">\n        <div class=\"timeline-icon-box\">1<\/div>\n        <div class=\"timeline-content-card\">\n            <h3>Pengajuan Surat Permohonan<\/h3>\n            <p>Pihak Sekolah (SMK) mengirimkan surat permohonan Praktek Kerja Lapangan (PKL) yang <strong>wajib<\/strong> mencantumkan:<\/p>\n            <ul class=\"timeline-list\">\n                <li>Permohonan magang di Telkom University<\/li>\n                <li>Jumlah Siswa\/i<\/li>\n                <li>Rincian Nama & Jurusan Siswa<\/li>\n                <li>Durasi PKL (Tanggal Mulai - Selesai)<\/li>\n            <\/ul>\n            <div style=\"margin-top: 15px; border-top: 1px dashed #ddd; padding-top: 15px; font-size: 0.9rem;\">\n                <span style=\"display:block; color:#888; margin-bottom:5px;\">Kirim ke Bagian SDM Tel-U atau via Email:<\/span>\n                <a href=\"mailto:dppsdm@telkomuniversity.ac.id\" class=\"mail-link\">\ud83d\udce9 dppsdm@telkomuniversity.ac.id<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- STEP 2 -->\n    <div class=\"timeline-item\">\n        <div class=\"timeline-icon-box\">2<\/div>\n        <div class=\"timeline-content-card\">\n            <h3>Konfirmasi & Pemrosesan<\/h3>\n            <p>Tim kami akan segera menghubungi pihak sekolah setelah surat diterima.<\/p>\n            <p style=\"margin-bottom:0;\">Permohonan akan didistribusikan ke unit-unit terkait di lingkungan Telkom University sesuai dengan jurusan siswa.<\/p>\n        <\/div>\n    <\/div>\n\n    <!-- STEP 3 -->\n    <div class=\"timeline-item\">\n        <div class=\"timeline-icon-box\">3<\/div>\n        <div class=\"timeline-content-card\">\n            <h3>Proses Seleksi (Opsional)<\/h3>\n            <p>Beberapa unit mungkin memerlukan tahapan <strong>Interview<\/strong> untuk memastikan kesesuaian keahlian.<\/p>\n            <ul class=\"timeline-list\">\n                <li>Metode: <strong>Online<\/strong> atau <strong>Onsite<\/strong> (Luring)<\/li>\n                <li>Waktu: Disepakati bersama unit terkait<\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n\n    <!-- STEP 4 -->\n    <div class=\"timeline-item\">\n        <div class=\"timeline-icon-box\">4<\/div>\n        <div class=\"timeline-content-card\">\n            <h3>Pengumuman Hasil<\/h3>\n            <p>Keputusan diterima atau tidaknya siswa akan diinformasikan secara resmi melalui Bagian SDM Tel-U langsung kepada:<\/p>\n            <ul class=\"timeline-list\">\n                <li>Bapak\/Ibu Guru Pembimbing<\/li>\n                <li>PIC Sekolah Terkait<\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n\n    <!-- STEP 5 -->\n    <div class=\"timeline-item\">\n        <div class=\"timeline-icon-box\">\u2713<\/div>\n        <div class=\"timeline-content-card\" style=\"border-left: 5px solid #27ae60;\"> <!-- Warna Hijau untuk Sukses -->\n            <h3 style=\"color: #27ae60;\">Pelaksanaan Magang<\/h3>\n            <p><strong>Selamat Bergabung!<\/strong> Siswa yang diterima dapat langsung memulai program magang sesuai jadwal yang telah disepakati.<\/p>\n            <p style=\"font-size: 0.9rem; color: #777;\">Siapkan diri untuk pengalaman kerja yang sesungguhnya di lingkungan profesional.<\/p>\n        <\/div>\n    <\/div>\n\n<\/div>\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-b6877a1 e-flex e-con-boxed e-con e-parent\" data-id=\"b6877a1\" 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-836608f elementor-widget elementor-widget-html\" data-id=\"836608f\" 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>CeLOE CTA Section<\/title>\n    <style>\n        \/* Import Font Poppins *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap');\n\n        \/* Wrapper Body untuk Preview (Abaikan saat copy ke Elementor) *\/\n        body {\n            margin: 0;\n            padding: 0;\n            font-family: 'Poppins', sans-serif;\n        }\n\n        \/* --- WRAPPER UTAMA (SAMA DENGAN KODE REFERENSI ANDA) --- *\/\n        \/* Ini memastikan lebar dan margin sama persis dengan section konten *\/\n        .celoe-creative-wrapper {\n            font-family: 'Poppins', 'Segoe UI', sans-serif;\n            color: #333;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 40px 20px; \/* Padding konsisten *\/\n            position: relative;\n            box-sizing: border-box; \/* Agar padding tidak melebarkan layout *\/\n        }\n\n        \/* --- STYLE CARD CTA --- *\/\n        .celoe-creative-cta {\n            background: linear-gradient(135deg, #b02120 0%, #8a1a19 100%);\n            border-radius: 20px;\n            padding: 50px;\n            text-align: center;\n            color: white;\n            box-shadow: 0 20px 40px rgba(176, 33, 32, 0.3);\n            position: relative;\n            overflow: hidden;\n            z-index: 1;\n            width: 100%; \/* Mengisi penuh wrapper *\/\n            box-sizing: border-box;\n        }\n\n        \/* Dekorasi Lingkaran Background *\/\n        .celoe-creative-cta::before {\n            content: '';\n            position: absolute;\n            top: -50%;\n            left: -10%;\n            width: 300px;\n            height: 300px;\n            background: rgba(255,255,255,0.1);\n            border-radius: 50%;\n            pointer-events: none;\n        }\n\n        \/* Judul *\/\n        .celoe-creative-cta h2 {\n            font-size: 2.2rem;\n            font-weight: 700;\n            margin-top: 0;\n            margin-bottom: 15px;\n            position: relative;\n            color: #fff;\n            line-height: 1.2;\n        }\n\n        \/* Deskripsi *\/\n        .celoe-creative-cta p {\n            margin: 0 auto 25px auto;\n            font-size: 1.1rem;\n            opacity: 0.9;\n            line-height: 1.6;\n            max-width: 800px;\n        }\n\n        \/* Tombol *\/\n        .celoe-cta-btn {\n            background: #fff;\n            color: #b02120;\n            padding: 15px 40px;\n            border-radius: 50px;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            text-decoration: none;\n            display: inline-block;\n            transition: all 0.3s;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n            border: none;\n            cursor: pointer;\n        }\n\n        .celoe-cta-btn:hover {\n            transform: scale(1.05);\n            box-shadow: 0 10px 25px rgba(0,0,0,0.3);\n            background: #f0f0f0;\n        }\n\n        \/* --- RESPONSIF MOBILE --- *\/\n        @media (max-width: 768px) {\n            .celoe-creative-wrapper {\n                padding: 20px; \/* Padding wrapper lebih kecil di HP *\/\n            }\n\n            .celoe-creative-cta {\n                padding: 40px 20px; \/* Padding dalam card lebih kecil *\/\n            }\n\n            .celoe-creative-cta h2 {\n                font-size: 1.6rem;\n            }\n\n            .celoe-creative-cta p {\n                font-size: 1rem;\n            }\n            \n            .celoe-cta-btn {\n                width: 100%; \/* Tombol full width di HP *\/\n                box-sizing: border-box;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- Gunakan Wrapper yang SAMA agar sejajar -->\n    <div class=\"celoe-creative-wrapper\">\n        <div class=\"celoe-creative-cta\">\n            <h2>Siap Berkolaborasi?<\/h2>\n            <p>Jadilah mitra kami dalam membangun ekosistem pendidikan digital masa depan.<\/p>\n            <a href=\"mailto:celoe@telkomuniversity.ac.id\" class=\"celoe-cta-btn\">\n                Hubungi Kami\n            <\/a>\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pendaftaran Batch 2024 Dibuka Raih Pengalaman Magang Terbaik di Industri Digital CeLOE Telkom University membuka peluang bagi talenta muda untuk belajar, berkarya, dan berinovasi langsung dari para ahli. Daftar Sekarang Tonton Video Telah Bergabung 1,200+ Alumni Galeri Kegiatan Internship Intip keseruan dan suasana kolaboratif para peserta magang dalam mengembangkan inovasi digital. Project Briefing Diskusi rutin [&hellip;]<\/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-1082","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/1082","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=1082"}],"version-history":[{"count":0,"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/pages\/1082\/revisions"}],"wp:attachment":[{"href":"https:\/\/celoe.telkomuniversity.ac.id\/code\/wp-json\/wp\/v2\/media?parent=1082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}