diff --git a/assets/global/localization.js b/assets/global/localization.js index 591f665..2108fcd 100644 --- a/assets/global/localization.js +++ b/assets/global/localization.js @@ -505,6 +505,193 @@ const translations = { kontrib_guideline_4: "Hindari plagiarisme. Karya harus orisinal.", kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.", + // Jellyfish.Corp + grp_jellyfish_hero_title: "Sekilas Informatika", + grp_jellyfish_hero_subtitle: "Universitas Tanjungpura", + grp_jellyfish_hero_desc: "Mencetak talenta digital unggulan dari Kalimantan Barat untuk Indonesia dan dunia. Bergabunglah bersama kami dalam perjalanan membangun masa depan teknologi.", + grp_jellyfish_btn_register: "Daftar Sekarang", + grp_jellyfish_btn_learn: "Pelajari Lebih ↓", + grp_jellyfish_stat_founded: "Tahun Berdirinya", + grp_jellyfish_stat_students: "Mahasiswa Aktif", + + grp_jellyfish_about_badge: "Tentang Prodi", + grp_jellyfish_about_title: "Mengenal Program Studi Informatika UNTAN", + grp_jellyfish_about_intro: "Program Studi Informatika Universitas Tanjungpura hadir sejak 2004 dan merupakan salah satu pusat pengembangan talenta digital di Kalimantan Barat. Seiring berkembangnya era digital, kami terus berinovasi untuk menjadi yang terdepan di bidang teknologi informasi yang terus maju.", + grp_jellyfish_vision_label: "🎯 Visi", + grp_jellyfish_vision_text: "Menjadi program studi unggul, inovatif, dan berdaya saing global, dengan fokus pada informatika cerdas untuk mendukung keberlanjutan dan pemberdayaan masyarakat melalui solusi teknologi berbasis kearifan lokal.", + grp_jellyfish_mission_label: "πŸ“‹ Misi", + grp_jellyfish_mission_1_title: "Pendidikan OBE Unggul", + grp_jellyfish_mission_1_desc: "Menyelenggarakan pendidikan berbasis informatika cerdas yang unggul dan inovatif melalui pendekatan OBE untuk menghasilkan lulusan yang kompeten, adaptif, beretika, dan berdaya saing global.", + grp_jellyfish_mission_2_title: "Penelitian untuk SDGs", + grp_jellyfish_mission_2_desc: "Mengembangkan penelitian unggul di bidang informatika cerdas yang mendukung pencapaian Tujuan Pembangunan Berkelanjutan (SDGs) dan relevan dengan tantangan lokal maupun global.", + grp_jellyfish_mission_3_title: "Pengabdian Berbasis Kearifan Lokal", + grp_jellyfish_mission_3_desc: "Menerapkan dan mengembangkan solusi teknologi berbasis kearifan lokal dalam kegiatan pengabdian kepada masyarakat untuk memberdayakan komunitas secara inklusif dan berkelanjutan.", + grp_jellyfish_mission_4_title: "Kemitraan Strategis", + grp_jellyfish_mission_4_desc: "Membangun kemitraan strategis dengan industri, pemerintah, dan institusi akademik untuk memperkuat ekosistem riset, inovasi, dan penerapan informatika cerdas yang memberikan dampak nyata.", + grp_jellyfish_mission_5_title: "Budaya Akademik Beretika", + grp_jellyfish_mission_5_desc: "Menumbuhkan budaya akademik yang beretika, kolaboratif, kreatif, dan berorientasi pada pembelajaran sepanjang hayat untuk mempersiapkan SDM unggul menghadapi disrupsi teknologi.", + grp_jellyfish_timeline_title: "Tonggak Sejarah", + + grp_jellyfish_stats_badge: "Data & Statistik", + grp_jellyfish_stats_title: "Informatika UNTAN dalam Angka", + grp_jellyfish_stats_subtitle: "Bukan sekadar angka, ini adalah cerita nyata dari perjalanan panjang Informatika UNTAN.", + + grp_jellyfish_achievement_badge: "Prestasi", + grp_jellyfish_achievement_title: "Pencapaian Membanggakan", + grp_jellyfish_achievement_subtitle: "Dari panggung nasional hingga kolaborasi internasional β€” Informatika UNTAN hadir, bersaing, dan meninggalkan jejak.", + + grp_jellyfish_studyclub_badge: "Komunitas", + grp_jellyfish_studyclub_title: "Study Club", + grp_jellyfish_studyclub_subtitle: "Study Club hadir sebagai wadah pengembangan kompetensi mahasiswa melalui peminatan yang terstruktur dan berbasis komunitas. Setiap study club dirancang untuk memperdalam keahlian spesifik di bidang informatika.", + + grp_jellyfish_career_badge: "Karir", + grp_jellyfish_career_title: "Masa Depan Lulusan Informatika", + grp_jellyfish_career_headline: "Lulusan Informatika UNTAN bukan hanya pencari kerja β€” mereka pencipta solusi.", + grp_jellyfish_career_desc: "Lulusan Prodi Informatika UNTAN diserap secara luas oleh industri teknologi, instansi pemerintah, BUMN, dan startup. Dengan bekal kompetensi digital yang kuat, karir cemerlang menanti di berbagai sektor strategis.", + + grp_jellyfish_alumni_badge: "Alumni", + grp_jellyfish_alumni_title: "Kisah Sukses Alumni", + grp_jellyfish_alumni_subtitle: "Mereka adalah bukti nyata bahwa Informatika UNTAN adalah batu loncatan menuju karir gemilang β€” dari Pontianak, ke panggung dunia.", + + grp_jellyfish_infra_badge: "Infrastruktur", + grp_jellyfish_infra_title: "Infrastruktur dan Fasilitas", + grp_jellyfish_infra_subtitle: "Fasilitas lengkap dan modern untuk mendukung proses belajar, penelitian, dan inovasi mahasiswa.", + + grp_jellyfish_partner_badge: "Kerjasama", + grp_jellyfish_partner_title: "Mitra Strategis Informatika UNTAN", + grp_jellyfish_partner_subtitle: "Dibangun di atas kepercayaan dan kolaborasi dengan perusahaan teknologi, instansi pemerintah, dan lembaga pendidikan terkemuka.", + + grp_jellyfish_cta_badge: "Bergabung Bersama Kami", + grp_jellyfish_cta_title: "Mulai Perjalanan Digital Anda", + grp_jellyfish_cta_highlight: "Bersama Kami", + grp_jellyfish_cta_desc: "Jadilah bagian dari komunitas informatika terbaik di Kalimantan Barat. Daftarkan diri Anda sekarang dan wujudkan impian karir teknologi bersama Informatika UNTAN.", + grp_jellyfish_btn_registration: "Daftar Mahasiswa Baru", + grp_jellyfish_btn_whatsapp: "πŸ’¬ Chat WhatsApp", + + grp_jellyfish_timeline_2004_title: "Pendirian Program Studi", + grp_jellyfish_timeline_2004_desc: "Penerimaan mahasiswa angkatan pertama diselenggarakan pada tanggal 18 Mei melalui mekanisme seleksi internal dan perpindahan studi dari Program Studi Teknik Elektro.", + grp_jellyfish_timeline_2005_title: "SNMPTN Pertama", + grp_jellyfish_timeline_2005_desc: "Penerimaan mahasiswa baru mulai diintegrasikan secara nasional melalui jalur Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN).", + grp_jellyfish_timeline_2006_title: "Akreditasi C", + grp_jellyfish_timeline_2006_desc: "Program studi memperoleh peringkat Akreditasi C dari BAN-PT sebagai langkah awal penjaminan mutu akademik secara sistematis.", + grp_jellyfish_timeline_2008_title: "Kelas Malam & SPOTA", + grp_jellyfish_timeline_2008_desc: "Pembukaan program kelas sore/malam serta pengembangan SPOTA (Sistem Pendukung Outline Tugas Akhir) sebagai aplikasi inovatif perdana program studi.", + grp_jellyfish_timeline_2016_title: "Akreditasi B", + grp_jellyfish_timeline_2016_desc: "Peningkatan standar mutu akademik yang ditandai dengan pencapaian peringkat Akreditasi B dari BAN-PT.", + grp_jellyfish_timeline_2017_title: "Nama Resmi Berubah", + grp_jellyfish_timeline_2017_desc: "Perubahan nomenklatur program studi dari Teknik Informatika menjadi Informatika, serta penyesuaian gelar akademik lulusan dari Sarjana Teknik (S.T.) menjadi Sarjana Komputer (S.Kom.).", + grp_jellyfish_timeline_2019_title: "Angkatan PPAPK Terakhir", + grp_jellyfish_timeline_2019_desc: "Penyelenggaraan penerimaan mahasiswa jalur non-reguler (PPAPK) angkatan terakhir sebelum resmi dinonaktifkan.", + grp_jellyfish_timeline_2021_title: "EdoXid Lahir", + grp_jellyfish_timeline_2021_desc: "Peluncuran EdoXid, sistem informasi manajemen sidang tugas akhir berbasis digital guna memfasilitasi kebutuhan akademik selama masa pandemi.", + grp_jellyfish_timeline_2023_title: "Guru Besar Pertama", + grp_jellyfish_timeline_2023_desc: "Pengukuhan Guru Besar pertama Program Studi Informatika UNTAN, yaitu Prof. Dr. Herry Sujaini, S.T., M.T.", + grp_jellyfish_timeline_2025_title: "Kaprodi Ke-5", + grp_jellyfish_timeline_2025_desc: "Pelantikan Ibu Eva Faja Ripanti, S.Kom., M.M.S.I., Ph.D. sebagai Ketua Program Studi Informatika yang kelima.", + + badge_competition: "Kompetisi", + badge_publication: "Publikasi", + badge_community: "Pengabdian Masyarakat", + badge_innovation: "Inovasi Aplikasi", + label_finalist: "Finalis", + label_team_best: "Tim Regional Terbaik", + label_honor: "Honor", + label_participant: "PESERTA", + label_still_active: "πŸ’‘ Masih aktif", + label_faculty_scale: "πŸš€ Skala Fakultas", + + grp_jellyfish_prest_compfest_title: "Finalis 10 Besar Competitive Programming Contest (COMPFEST) 17", + grp_jellyfish_prest_compfest_desc: "Berhasil meraih posisi 10 besar nasional pada COMPFEST 17, kompetisi pemrograman yang diselenggarakan oleh Universitas Indonesia (UI).", + grp_jellyfish_prest_gemastik18_title: "Tim Regional Terbaik GEMASTIK XVIII bidang Competitive Programming", + grp_jellyfish_prest_gemastik18_desc: "Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVIII pada bidang Competitive Programming", + grp_jellyfish_prest_icpc_title: "International Collegiate Programming Contest predikat Honor", + grp_jellyfish_prest_icpc_desc: "Tim competitive programming Informatika UNTAN berhasil lolos ke babak regional ICPC Asia Jakarta 2025.", + grp_jellyfish_prest_gemastik17_title: "Tim Regional Terbaik GEMASTIK XVII bidang Competitive Programming", + grp_jellyfish_prest_gemastik17_desc: "Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVII pada bidang Competitive Programming", + grp_jellyfish_prest_mtq_title: "LOMBA MTQ TINGKAT PROVINSI KALIMANTAN BARAT PESERTA CABANG TAHFIDZ HADITS GOLONGAN 100 HADIST DENGAN SANAD PUTRI", + grp_jellyfish_prest_mtq_desc: "Berpastisipasi pada MTQ tingkat provinsi Kalimantan Barat cabang Tahfidz Hadits 100 Hadits Bersanad Putri", + grp_jellyfish_prest_crm_title: "Customer Relationship Management (CRM) System pada Peningkatan Layanan Pengguna E-Learning", + grp_jellyfish_prest_crm_desc: "Penulis: EF Ripanti, EE Pratama, F Asrin. Penelitian ini mengkaji penerapan sistem CRM untuk meningkatkan kualitas layanan dan kepuasan pengguna pada platform e-learning.", + grp_jellyfish_prest_dbscan_title: "REKOMENDASI AREA PEMASARAN BAGI PEDAGANG SAYUR KELILING MENGGUNAKAN METODE DBSCAN DAN VISUALISASI HEATMAP", + grp_jellyfish_prest_dbscan_desc: "Penulis: DA Nugraha, IY Sholva, EE Pratama. Penelitian ini memanfaatkan metode DBSCAN dan visualisasi heatmap untuk merekomendasikan area pemasaran yang potensial bagi pedagang sayur keliling.", + grp_jellyfish_prest_kmeans_title: "Data mining untuk pengelompokan saham pada sektor energi dengan metode k-means", + grp_jellyfish_prest_kmeans_desc: "Penulis: AS Sukamto, W Setiawan, EE Pratama. Penelitian ini menerapkan algoritma K-Means untuk mengelompokkan saham sektor energi berdasarkan karakteristik data yang serupa guna mendukung analisis investasi.", + grp_jellyfish_prest_kodingmu_title: "KODINGMU PLATFORM BELAJAR COMPUTATIONAL THINKING BAGI SISWA SMAN 1 MEMPAWAH HILIR", + grp_jellyfish_prest_kodingmu_desc: "Kegiatan pengabdian yang bertujuan meningkatkan kemampuan berpikir komputasional dan pemecahan masalah siswa melalui pelatihan serta pemanfaatan platform pembelajaran Kodingmu berbasis aktivitas pemrograman yang interaktif dan menyenangkan.", + grp_jellyfish_prest_spota_title: "SPOTA (2008)", + grp_jellyfish_prest_spota_desc: "Sistem Pendukung Outline Tugas Akhir β€” lahir dari ide dosen, dibangun mahasiswa, masih digunakan hingga kini. Inovasi yang melampaui zamannya.", + grp_jellyfish_prest_edoxid_title: "EdoXid (2021)", + grp_jellyfish_prest_edoxid_desc: "Sistem pengajuan sidang digital β€” hadir menjawab pandemi, kini naik kelas ke skala Fakultas MIPA Universitas Tanjungpura.", + + grp_jellyfish_btn_filter_publikasi: "Publikasi & Pengabdian", + grp_jellyfish_btn_filter_aplikasi: "Aplikasi Unggulan", + grp_jellyfish_mhs_aktif: "Mahasiswa Aktif", + grp_jellyfish_tahun_akademik: "Tahun Akademik 2024/2025", + grp_jellyfish_total_alumni: "Total Alumni", + grp_jellyfish_data_total_alumni: "Data sejak tahun 2022", + grp_jellyfish_bulan_tunggu: "6 Bulan", + grp_jellyfish_waktu_tunggu_kerja: "Waktu Tunggu Kerja", + grp_jellyfish_rata_lulusan: "Rata-rata lulusan terserap", + grp_jellyfish_dosen_tetap: "Dosen Tetap", + grp_jellyfish_desc_dosen: "Berpengalaman dan bersertifikasi di bidangnya masing-masing.", + grp_jellyfish_jurnal_ilmiah: "Jurnal Ilmiah", + grp_jellyfish_jurnal: "400+ Jurnal", + grp_jellyfish_rasio_dosen: "Rasio Dosen : Mahasiswa", + grp_jellyfish_guru_besar: "Guru Besar", + grp_jellyfish_jlh_guru_besar: "1 Guru Besar", + grp_jellyfish_nama_guru_besar: "Prof. Dr. Herry Sujaini, S.T., M.T. β€” Guru Besar pertama Informatika UNTAN (sejak 2023).", + grp_jellyfish_rasio_standar: "Memenuhi standar BAN-PT", + grp_jellyfish_arise: "Program kerja ini berfokus pada peminatan competitive programming. Mahasiswa dilatih untuk mengasah kemampuan pemecahan masalah dan algoritma melalui kompetisi pemrograman bergengsi tingkat nasional maupun internasional.", + grp_jellyfish_software: "Berfokus pada peminatan software development. Materi yang diajarkan meliputi fundamental dasar web, version control (GitHub), software development life cycle, Entity Relationship Diagram, tech-stack, dan use case.", + grp_jellyfish_minerva: "Berfokus pada peminatan data mining. Mahasiswa akan mendalami teknik penggalian data, analisis statistik, dan penerapannya dalam berbagai domain industri untuk menghasilkan insight yang bernilai.", + grp_jellyfish_join_studyclub: "Bergabung dengan Study Club", + grp_jellyfish_studyclub: "Study club ini terbuka bagi seluruh mahasiswa aktif Prodi Informatika UNTAN. Pilih peminatan yang sesuai dengan minat dan tujuan karirmu.", + grp_jellyfish_study_info: "Info Lebih Lanjut β†’", + grp_jellyfish_btn_filter_semua: "Semua", + grp_jellyfish_btn_filter_kompetisi: "Kompetisi", + grp_jellyfish_bidang_karir: "Bidang Karir", + + grp_jellyfish_akademisi: "Akademisi / Dosen", + grp_jellyfish_wirausaha: "Wirausaha Digital", + grp_jellyfish_mandiri: "Mandiri, Remote Work", + grp_jellyfish_if_akt1: "Informatika, Angkatan 2005", + grp_jellyfish_if_akt2: "Informatika, Angkatan 2018", + grp_jellyfish_if_akt3: "Informatika, Angkatan 2006", + grp_jellyfish_kerja1: "Dosen UM Pontianak", + grp_jellyfish_alumni_desc1: "Alumni Informatika UNTAN angkatan 2005 yang membangun fondasi kuat di bidang komputasi, melanjutkan studi magister di Marmara University melalui beasiswa TΓΌrkiye BurslarΔ±, berkarier sebagai dosen di Universitas Muhammadiyah Pontianak, dan kini menempuh doktoral di Universidad de Granada dengan fokus pada kecerdasan buatan untuk sistem transportasi cerdas dan informatika kesehatan.", + grp_jellyfish_alumni_desc2: "Alumni Informatika UNTAN dengan kemampuan kuat dalam pemrograman dan problem solving, melanjutkan studi master di Saarland University Jerman dengan riset kecerdasan buatan bertaraf internasional, lalu berkarier sebagai Software Developer di perusahaan FinTech Travixy Frankfurt, mengembangkan platform pembiayaan yang menggerakkan transaksi bernilai miliaran Euro.", + grp_jellyfish_alumni_desc3: "Alumni Informatika UNTAN angkatan 2006 yang kini berkarier sebagai Product Team di AI Rudder, berbekal pengalaman pembelajaran berbasis proyek selama kuliah, melanjutkan studi S2 di China melalui beasiswa, serta berkontribusi dalam industri kecerdasan buatan dengan perspektif global.", + grp_jellyfish_infra_lab_name: "8 Laboratorium", + grp_jellyfish_infra_lab_desc: "Lab Pemrograman, Jaringan, Multimedia, IoT, AI, Basis Data, Mobile Dev, dan Keamanan Siber β€” ber-AC, High-Speed PC.", + grp_jellyfish_infra_lab_stat: "8 Lab Aktif & Berteknologi", + grp_jellyfish_infra_dc_name: "Data Center", + grp_jellyfish_infra_dc_desc: "Server on-premise dengan infrastruktur cloud lokal berkapasitas tinggi untuk penelitian dan deployment aplikasi.", + grp_jellyfish_infra_dc_stat: "99.9% Uptime Β· Redundant", + grp_jellyfish_infra_hub_name: "IFUNTANHUB", + grp_jellyfish_infra_hub_desc: "Platform PaaS eksklusif mahasiswa untuk deploy aplikasi, hosting proyek, akses GPU computing, dan kolaborasi tim.", + grp_jellyfish_infra_hub_stat: "Gratis Β· GPU Access", + grp_jellyfish_infra_eresources_name: "E-Resources", + grp_jellyfish_infra_eresources_desc: "Akses jurnal internasional Scopus, IEEE Xplore, ACM Digital Library, Springer, dan database ilmiah lainnya.", + grp_jellyfish_infra_eresources_stat: "IEEE Β· Scopus Β· ACM", + grp_jellyfish_license_label: "Lisensi Perangkat Lunak Tersedia:", + + grp_jellyfish_labs: "Lab Pemrograman, Jaringan, Multimedia, IoT, AI, Basis Data, Mobile Dev, dan Keamanan Siber β€” ber-AC, High-Speed PC.", + grp_jellyfish_labs2: "8 Lab Aktif & Berteknologi", + grp_jellyfish_data_center: "Server on-premise dengan infrastruktur cloud lokal berkapasitas tinggi untuk penelitian dan deployment aplikasi.", + grp_jellyfish_ifuntanhub: "Platform PaaS eksklusif mahasiswa untuk deploy aplikasi, hosting proyek, akses GPU computing, dan kolaborasi tim.", + grp_jellyfish_free: "Gratis Β· GPU Access", + grp_jellyfish_resources: "Akses jurnal internasional Scopus, IEEE Xplore, ACM Digital Library, Springer, dan database ilmiah lainnya.", + grp_jellyfish_license: "Lisensi Perangkat Lunak Tersedia:", + + grp_jellyfish_industri: "Industri & Swasta", + grp_jellyfish_pemerintah: "Instansi Pemerintah", + grp_jellyfish_perguruan_tinggi: "Perguruan Tinggi & Lembaga Riset", + + grp_jellyfish_info_kontak: "Informasi Kontak", + grp_jellyfish_alamat: "Alamat", + grp_jellyfish_tanggal: "Senin – Jumat, 08.00 – 16.00 WIB", + grp_jellyfish_telepon: "Telepon / Fax", + grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN", grp_limaem_hero_title: "Kehidupan Mahasiswa & Himpunan (HMIF)", grp_limaem_hero_desc: "Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.", @@ -1437,6 +1624,194 @@ const translations = { kontrib_guideline_2: "Minimum article length is 500 words.", kontrib_guideline_3: "Include accurate and verifiable facts and data.", kontrib_guideline_4: "Avoid plagiarism. Work must be original.", + kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.", + + // Jellyfish.Corp + grp_jellyfish_hero_title: "Informatika Overview", + grp_jellyfish_hero_subtitle: "Tanjungpura University", + grp_jellyfish_hero_desc: "Producing outstanding digital talents from West Kalimantan for Indonesia and the world. Join us on the journey to build the future of technology.", + grp_jellyfish_btn_register: "Register Now", + grp_jellyfish_btn_learn: "Learn More ↓", + grp_jellyfish_stat_founded: "Year Founded", + grp_jellyfish_stat_students: "Active Students", + + grp_jellyfish_about_badge: "About the Program", + grp_jellyfish_about_title: "Get to Know Informatika Study Program UNTAN", + grp_jellyfish_about_intro: "The Informatika Study Program at Tanjungpura University has been active since 2004 and is one of the centers for developing digital talents in West Kalimantan. As the digital era evolves, we continue to innovate to be at the forefront of rapidly advancing information technology.", + grp_jellyfish_vision_label: "🎯 Vision", + grp_jellyfish_vision_text: "To become an excellent, innovative, and globally competitive study program, focusing on intelligent informatics to support sustainability and community empowerment through technology solutions based on local wisdom.", + grp_jellyfish_mission_label: "πŸ“‹ Mission", + grp_jellyfish_mission_1_title: "Excellent OBE Education", + grp_jellyfish_mission_1_desc: "Deliver excellent and innovative education based on intelligent informatics through an OBE approach to produce graduates who are competent, adaptable, ethical, and globally competitive.", + grp_jellyfish_mission_2_title: "Research for SDGs", + grp_jellyfish_mission_2_desc: "Develop leading research in the field of intelligent informatics that supports the achievement of Sustainable Development Goals (SDGs) and is relevant to local and global challenges.", + grp_jellyfish_mission_3_title: "Community Service Based on Local Wisdom", + grp_jellyfish_mission_3_desc: "Apply and develop technology solutions based on local wisdom in community service activities to empower communities inclusively and sustainably.", + grp_jellyfish_mission_4_title: "Strategic Partnerships", + grp_jellyfish_mission_4_desc: "Build strategic partnerships with industry, government, and academic institutions to strengthen the ecosystem of research, innovation, and application of intelligent informatics that has real impact.", + grp_jellyfish_mission_5_title: "Ethical Academic Culture", + grp_jellyfish_mission_5_desc: "Foster an ethical, collaborative, creative academic culture oriented toward lifelong learning to prepare excellent human resources facing technology disruption.", + grp_jellyfish_timeline_title: "Milestones", + + grp_jellyfish_stats_badge: "Data & Statistics", + grp_jellyfish_stats_title: "Informatika UNTAN in Numbers", + grp_jellyfish_stats_subtitle: "Not just numbersβ€”these are real stories from the long journey of Informatika UNTAN.", + + grp_jellyfish_achievement_badge: "Achievements", + grp_jellyfish_achievement_title: "Outstanding Achievements", + grp_jellyfish_achievement_subtitle: "From national stages to international collaboration β€” Informatika UNTAN is present, competing, and leaving a mark.", + + grp_jellyfish_studyclub_badge: "Community", + grp_jellyfish_studyclub_title: "Study Club", + grp_jellyfish_studyclub_subtitle: "Study Club is a platform for developing student competencies through structured interests and community-based initiatives. Each study club is designed to deepen specific expertise in informatics.", + + grp_jellyfish_career_badge: "Career", + grp_jellyfish_career_title: "Future of Informatika Graduates", + grp_jellyfish_career_headline: "Informatika UNTAN graduates are not just job seekers β€” they are solution creators.", + grp_jellyfish_career_desc: "Informatika UNTAN graduates are absorbed widely by technology industries, government agencies, SOEs, and startups. With strong digital competencies, brilliant careers await in various strategic sectors.", + + grp_jellyfish_alumni_badge: "Alumni", + grp_jellyfish_alumni_title: "Alumni Success Stories", + grp_jellyfish_alumni_subtitle: "They are proof that Informatika UNTAN is a stepping stone to a brilliant career β€” from Pontianak, to the world stage.", + + grp_jellyfish_infra_badge: "Infrastructure", + grp_jellyfish_infra_title: "Infrastructure and Facilities", + grp_jellyfish_infra_subtitle: "Complete and modern facilities to support student learning, research, and innovation processes.", + + grp_jellyfish_partner_badge: "Partnerships", + grp_jellyfish_partner_title: "Strategic Partners of Informatika UNTAN", + grp_jellyfish_partner_subtitle: "Built on trust and collaboration with leading technology companies, government agencies, and educational institutions.", + + grp_jellyfish_cta_badge: "Join Us", + grp_jellyfish_cta_title: "Start Your Digital Journey", + grp_jellyfish_cta_highlight: "With Us", + grp_jellyfish_cta_desc: "Become part of the best informatics community in West Kalimantan. Register now and realize your technology career dreams with Informatika UNTAN.", + grp_jellyfish_btn_registration: "Register as New Student", + grp_jellyfish_btn_whatsapp: "πŸ’¬ Chat on WhatsApp", + + grp_jellyfish_timeline_2004_title: "Program Establishment", + grp_jellyfish_timeline_2004_desc: "The first batch of students was admitted on May 18 through internal selection and transfer from the Electrical Engineering Study Program.", + grp_jellyfish_timeline_2005_title: "First SNMPTN", + grp_jellyfish_timeline_2005_desc: "New student admissions were integrated nationally through the Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN).", + grp_jellyfish_timeline_2006_title: "Accreditation C", + grp_jellyfish_timeline_2006_desc: "The study program obtained Accreditation C rating from BAN-PT as the first step of systematic academic quality assurance.", + grp_jellyfish_timeline_2008_title: "Evening Classes & SPOTA", + grp_jellyfish_timeline_2008_desc: "Opening of evening program classes and development of SPOTA (Final Project Outline Support System) as the first innovative application of the study program.", + grp_jellyfish_timeline_2016_title: "Accreditation B", + grp_jellyfish_timeline_2016_desc: "Improvement of academic quality standards marked by achieving Accreditation B rating from BAN-PT.", + grp_jellyfish_timeline_2017_title: "Official Name Change", + grp_jellyfish_timeline_2017_desc: "Change of study program nomenclature from Information Technology Engineering to Informatics, and adjustment of graduate degree title from Bachelor of Engineering (S.T.) to Bachelor of Computer Science (S.Kom.).", + grp_jellyfish_timeline_2019_title: "Last PPAPK Cohort", + grp_jellyfish_timeline_2019_desc: "Implementation of non-regular student admission (PPAPK) as the last cohort before official deactivation.", + grp_jellyfish_timeline_2021_title: "EdoXid Launch", + grp_jellyfish_timeline_2021_desc: "Launch of EdoXid, a digital information management system for final project examinations to support academic needs during the pandemic.", + grp_jellyfish_timeline_2023_title: "First Professor", + grp_jellyfish_timeline_2023_desc: "Inauguration of the first Professor of Informatika Study Program UNTAN, namely Prof. Dr. Herry Sujaini, S.T., M.T.", + grp_jellyfish_timeline_2025_title: "5th Head of Study Program", + grp_jellyfish_timeline_2025_desc: "Inauguration of Eva Faja Ripanti, S.Kom., M.M.S.I., Ph.D. as the fifth Head of Informatika Study Program.", + + badge_competition: "Competition", + badge_publication: "Publication", + badge_community: "Community Service", + badge_innovation: "Application Innovation", + label_finalist: "Finalist", + label_team_best: "Best Regional Team", + label_honor: "Honor", + label_participant: "PARTICIPANT", + label_still_active: "πŸ’‘ Still Active", + label_faculty_scale: "πŸš€ Faculty-wide Scale", + + grp_jellyfish_prest_compfest_title: "Top 10 Finalist Competitive Programming Contest (COMPFEST) 17", + grp_jellyfish_prest_compfest_desc: "Successfully achieved top 10 national position at COMPFEST 17, a programming competition organized by Universitas Indonesia (UI).", + grp_jellyfish_prest_gemastik18_title: "Best Regional Team GEMASTIK XVIII Competitive Programming Category", + grp_jellyfish_prest_gemastik18_desc: "Successfully became the Best Regional Team at GEMASTIK XVIII in the Competitive Programming category.", + grp_jellyfish_prest_icpc_title: "International Collegiate Programming Contest with Honor Distinction", + grp_jellyfish_prest_icpc_desc: "Informatika UNTAN's competitive programming team successfully advanced to the ICPC Asia Jakarta 2025 regional round.", + grp_jellyfish_prest_gemastik17_title: "Best Regional Team GEMASTIK XVII Competitive Programming Category", + grp_jellyfish_prest_gemastik17_desc: "Successfully became the Best Regional Team at GEMASTIK XVII in the Competitive Programming category.", + grp_jellyfish_prest_mtq_title: "WEST KALIMANTAN PROVINCIAL MTQ COMPETITION PARTICIPANT TAHFIDZ HADITS 100 HADITS WITH CHAIN FEMALE CATEGORY", + grp_jellyfish_prest_mtq_desc: "Participated in the West Kalimantan provincial MTQ competition in the Tahfidz Hadits 100 Hadits with Chain Female category.", + grp_jellyfish_prest_crm_title: "Customer Relationship Management (CRM) System to Improve E-Learning User Services", + grp_jellyfish_prest_crm_desc: "Authors: EF Ripanti, EE Pratama, F Asrin. This research examines the application of CRM systems to improve service quality and user satisfaction on e-learning platforms.", + grp_jellyfish_prest_dbscan_title: "MARKETING AREA RECOMMENDATIONS FOR MOBILE VEGETABLE VENDORS USING DBSCAN METHOD AND HEATMAP VISUALIZATION", + grp_jellyfish_prest_dbscan_desc: "Authors: DA Nugraha, IY Sholva, EE Pratama. This research uses DBSCAN method and heatmap visualization to recommend potential marketing areas for mobile vegetable vendors.", + grp_jellyfish_prest_kmeans_title: "Data mining for stock clustering in the energy sector using k-means method", + grp_jellyfish_prest_kmeans_desc: "Authors: AS Sukamto, W Setiawan, EE Pratama. This research applies K-Means algorithm to cluster energy sector stocks based on similar data characteristics to support investment analysis.", + grp_jellyfish_prest_kodingmu_title: "KODINGMU COMPUTATIONAL THINKING LEARNING PLATFORM FOR SMAN 1 MEMPAWAH HILIR STUDENTS", + grp_jellyfish_prest_kodingmu_desc: "A community service program aimed at improving computational thinking and problem-solving skills of students through training and the use of the interactive Kodingmu learning platform based on programming activities.", + grp_jellyfish_prest_spota_title: "SPOTA (2008)", + grp_jellyfish_prest_spota_desc: "Final Project Outline Support System β€” born from faculty idea, built by students, still in use today. An innovation ahead of its time.", + grp_jellyfish_prest_edoxid_title: "EdoXid (2021)", + grp_jellyfish_prest_edoxid_desc: "Digital examination submission system β€” emerged to meet pandemic needs, now scaled up to the Faculty of Mathematics and Natural Sciences of Tanjungpura University.", + + grp_jellyfish_btn_filter_publikasi: "Publications & Community Service", + grp_jellyfish_btn_filter_aplikasi: "Application Innovation", + grp_jellyfish_mhs_aktif: "Active Students", + grp_jellyfish_tahun_akademik: "Academic Year 2024/2025", + grp_jellyfish_total_alumni: "Alumni Total", + grp_jellyfish_data_total_alumni: "Data since 2022", + grp_jellyfish_bulan_tunggu: "6 Months", + grp_jellyfish_waktu_tunggu_kerja: "Employment Wait Time", + grp_jellyfish_rata_lulusan: "Average graduate absorption", + grp_jellyfish_dosen_tetap: "Permanent Lecturers", + grp_jellyfish_desc_dosen: "Experienced and certified in their respective fields.", + grp_jellyfish_jurnal_ilmiah: "Scientific Journals", + grp_jellyfish_jurnal: "400+ Journals", + grp_jellyfish_rasio_dosen: "Lecturer and Student Ratio", + grp_jellyfish_guru_besar: "Professor", + grp_jellyfish_jlh_guru_besar: "1 Professor", + grp_jellyfish_nama_guru_besar: "Prof. Dr. Herry Sujaini, S.T., M.T. β€” the first Professor of Informatika UNTAN (since 2023).", + grp_jellyfish_rasio_standar: "Meets BAN-PT standards", + grp_jellyfish_arise: "This activity program focuses on competitive programming. Students are trained to sharpen problem-solving and algorithm skills through prestigious national and international programming competitions.", + grp_jellyfish_software: "Focused on software development. The materials cover basic web fundamentals, version control (GitHub), software development life cycle, Entity Relationship Diagram, tech stack, and use cases.", + grp_jellyfish_minerva: "Focused on data mining. Students will deepen data extraction techniques, statistical analysis, and application in various industry domains to produce valuable insights.", + grp_jellyfish_join_studyclub: "Join a Study Club", + grp_jellyfish_studyclub: "This study club is open to all active Informatika UNTAN students. Choose a specialization that matches your interests and career goals.", + grp_jellyfish_study_info: "More Info β†’", + grp_jellyfish_btn_filter_semua: "All", + grp_jellyfish_btn_filter_kompetisi: "Competition", + grp_jellyfish_bidang_karir: "Career Field", + + grp_jellyfish_akademisi: "Academia / Lecturer", + grp_jellyfish_wirausaha: "Digital Entrepreneurship", + grp_jellyfish_mandiri: "Independent, Remote Work", + grp_jellyfish_if_akt1: "Informatics, Class of 2005", + grp_jellyfish_if_akt2: "Informatics, Class of 2018", + grp_jellyfish_if_akt3: "Informatics, Class of 2006", + grp_jellyfish_kerja1: "Lecturer at UM Pontianak", + grp_jellyfish_alumni_desc1: "A 2005 Informatika UNTAN alumnus who built a strong computing foundation, continued master's studies at Marmara University on a TΓΌrkiye BurslarΔ± scholarship, worked as a lecturer at Muhammadiyah University of Pontianak, and is now pursuing a doctoral degree at Universidad de Granada with a focus on AI for smart transportation systems and health informatics.", + grp_jellyfish_alumni_desc2: "An Informatika UNTAN alumnus with strong programming and problem-solving skills, who continued master's studies at Saarland University in Germany on international AI research, then worked as a Software Developer at FinTech Travixy Frankfurt, developing financing platforms that power billion-euro transactions.", + grp_jellyfish_alumni_desc3: "A 2006 Informatika UNTAN alumnus currently working on the Product Team at AI Rudder, leveraging project-based learning experience from college, continuing postgraduate studies in China on scholarship, and contributing to the global AI industry.", + grp_jellyfish_infra_lab_name: "8 Laboratories", + grp_jellyfish_infra_lab_desc: "Programming, Networking, Multimedia, IoT, AI, Database, Mobile Dev, and Cybersecurity labs β€” air-conditioned, high-speed PCs.", + grp_jellyfish_infra_lab_stat: "8 Active & High-Tech Labs", + grp_jellyfish_infra_dc_name: "Data Center", + grp_jellyfish_infra_dc_desc: "On-premise servers with high-capacity local cloud infrastructure for research and application deployment.", + grp_jellyfish_infra_dc_stat: "99.9% Uptime Β· Redundant", + grp_jellyfish_infra_hub_name: "IFUNTANHUB", + grp_jellyfish_infra_hub_desc: "Exclusive student PaaS platform for app deployment, project hosting, GPU access, and team collaboration.", + grp_jellyfish_infra_hub_stat: "Free Β· GPU Access", + grp_jellyfish_infra_eresources_name: "E-Resources", + grp_jellyfish_infra_eresources_desc: "Access to international journals like Scopus, IEEE Xplore, ACM Digital Library, Springer, and other research databases.", + grp_jellyfish_infra_eresources_stat: "IEEE Β· Scopus Β· ACM", + grp_jellyfish_license_label: "Available Software Licenses:", + + grp_jellyfish_labs: "Programming, Networking, Multimedia, IoT, AI, Database, Mobile Dev, and Cybersecurity labs β€” air-conditioned, high-speed PCs.", + grp_jellyfish_labs2: "8 Active & High-Tech Labs", + grp_jellyfish_data_center: "On-premise servers with high-capacity local cloud infrastructure for research and application deployment.", + grp_jellyfish_ifuntanhub: "Exclusive student PaaS platform for app deployment, project hosting, GPU access, and team collaboration.", + grp_jellyfish_free: "Free Β· GPU Access", + grp_jellyfish_resources: "Access to international journals like Scopus, IEEE Xplore, ACM Digital Library, Springer, and other research databases.", + grp_jellyfish_license: "Available Software Licenses:", + + grp_jellyfish_industri: "Industry & Private Sector", + grp_jellyfish_pemerintah: "Government Agencies", + grp_jellyfish_perguruan_tinggi: "Higher Education & Research Institutes", + + grp_jellyfish_info_kontak: "Contact Information", + grp_jellyfish_alamat: "Address", + grp_jellyfish_tanggal: "Monday – Friday, 08.00 – 16.00 WIB", + grp_jellyfish_telepon: "Phone / Fax", kontrib_guideline_5: "The editorial team reserves the right", ape_breadcrumb_profile: "Profile", ape_breadcrumb_scholarship: "Scholarship", diff --git a/groups/Jellyfish.Corp/images/Charles.jpg b/groups/Jellyfish.Corp/images/Charles.jpg new file mode 100644 index 0000000..bf3db4d Binary files /dev/null and b/groups/Jellyfish.Corp/images/Charles.jpg differ diff --git a/groups/Jellyfish.Corp/images/Dona.jpg b/groups/Jellyfish.Corp/images/Dona.jpg new file mode 100644 index 0000000..5a52140 Binary files /dev/null and b/groups/Jellyfish.Corp/images/Dona.jpg differ diff --git a/groups/Jellyfish.Corp/images/Izhan.jpg b/groups/Jellyfish.Corp/images/Izhan.jpg new file mode 100644 index 0000000..0c6bd91 Binary files /dev/null and b/groups/Jellyfish.Corp/images/Izhan.jpg differ diff --git a/groups/Jellyfish.Corp/index.html b/groups/Jellyfish.Corp/index.html index b6c7844..25f3cda 100644 --- a/groups/Jellyfish.Corp/index.html +++ b/groups/Jellyfish.Corp/index.html @@ -4,6 +4,7 @@ Group 01 – Jellyfish.Corp | Informatika UNTAN + @@ -1143,14 +1144,726 @@
Tugas Halaman Statis -

Judul Halaman Group 01

+

Sekilas Informatika UNTAN

Kelompok 01 — Jellyfish.Corp  ·  Informatika UNTAN 2026

-

Tulis konten halaman kelompok di sini.

-

Subjudul

-

Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.

+ +
+
+
+
+

Sekilas Informatika
+

Universitas Tanjungpura

+

Mencetak talenta digital unggulan dari Kalimantan Barat untuk Indonesia dan + dunia. Bergabunglah bersama kami dalam perjalanan membangun masa depan teknologi.

+
+ Daftar Sekarang + Pelajari Lebih ↓ +
+
+
+ 2004 + Tahun Berdirinya +
+
+
+ 512 + Mahasiswa Aktif +
+
+
+
+
+
+ + +
+ + +
+
+
+
+ Tentang Prodi +

Mengenal Program Studi Informatika UNTAN

+

Program Studi Informatika Universitas Tanjungpura hadir sejak 2004 dan merupakan salah satu pusat pengembangan talenta digital di Kalimantan Barat. Seiring berkembangnya era digital, kami terus berinovasi untuk menjadi yang terdepan di bidang teknologi informasi yang terus maju.

+ +
+
+
🎯 Visi
+

Menjadi program studi unggul, inovatif, dan berdaya saing global, dengan fokus pada informatika cerdas untuk mendukung keberlanjutan dan pemberdayaan masyarakat melalui solusi teknologi berbasis kearifan lokal.

+
+
+ +
+
πŸ“‹ Misi
+
+
+
1
+
+ Pendidikan OBE Unggul +

Menyelenggarakan pendidikan berbasis informatika cerdas yang unggul dan inovatif melalui pendekatan OBE untuk menghasilkan lulusan yang kompeten, adaptif, beretika, dan berdaya saing global.

+
+
+
+
2
+
+ Penelitian untuk SDGs +

Mengembangkan penelitian unggul di bidang informatika cerdas yang mendukung pencapaian Tujuan Pembangunan Berkelanjutan (SDGs) dan relevan dengan tantangan lokal maupun global.

+
+
+
+
3
+
+ Pengabdian Berbasis Kearifan Lokal +

Menerapkan dan mengembangkan solusi teknologi berbasis kearifan lokal dalam kegiatan pengabdian kepada masyarakat untuk memberdayakan komunitas secara inklusif dan berkelanjutan.

+
+
+
+
4
+
+ Kemitraan Strategis +

Membangun kemitraan strategis dengan industri, pemerintah, dan institusi akademik untuk memperkuat ekosistem riset, inovasi, dan penerapan informatika cerdas yang memberikan dampak nyata.

+
+
+
+
5
+
+ Budaya Akademik Beretika +

Menumbuhkan budaya akademik yang beretika, kolaboratif, kreatif, dan berorientasi pada pembelajaran sepanjang hayat untuk mempersiapkan SDM unggul menghadapi disrupsi teknologi.

+
+
+
+
+
+ +
+
+
Tonggak Sejarah
+
+
+
2004
+
+
+ Pendirian Program Studi + Penerimaan mahasiswa angkatan pertama diselenggarakan pada tanggal 18 Mei melalui mekanisme seleksi internal dan perpindahan studi dari Program Studi Teknik Elektro. +
+
+
+
2005
+
+
+ SNMPTN Pertama + Penerimaan mahasiswa baru mulai diintegrasikan secara nasional melalui jalur Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN). +
+
+
+
2006
+
+
+ Akreditasi C + Program studi memperoleh peringkat Akreditasi C dari BAN-PT sebagai langkah awal penjaminan mutu akademik secara sistematis. +
+
+
+
2008
+
+
+ Kelas Malam & SPOTA + Pembukaan program kelas sore/malam serta pengembangan SPOTA (Sistem Pendukung Outline Tugas Akhir) sebagai aplikasi inovatif perdana program studi. +
+
+
+
2016
+
+
+ Akreditasi B + Peningkatan standar mutu akademik yang ditandai dengan pencapaian peringkat Akreditasi B dari BAN-PT. +
+
+
+
2017
+
+
+ Nama Resmi Berubah + Perubahan nomenklatur program studi dari Teknik Informatika menjadi Informatika, serta penyesuaian gelar akademik lulusan dari Sarjana Teknik (S.T.) menjadi Sarjana Komputer (S.Kom.). +
+
+
+
2019
+
+
+ Angkatan PPAPK Terakhir + Penyelenggaraan penerimaan mahasiswa jalur non-reguler (PPAPK) angkatan terakhir sebelum resmi dinonaktifkan. +
+
+
+
2021
+
+
+ EdoXid Lahir + Peluncuran EdoXid, sistem informasi manajemen sidang tugas akhir berbasis digital guna memfasilitasi kebutuhan akademik selama masa pandemi. +
+
+
+
2023
+
+
+ Guru Besar Pertama + Pengukuhan Guru Besar pertama Program Studi Informatika UNTAN, yaitu Prof. Dr. Herry Sujaini, S.T., M.T. +
+
+
+
2025
+
+
+ Kaprodi Ke-5 + Pelantikan Ibu Eva Faja Ripanti, S.Kom., M.M.S.I., Ph.D. sebagai Ketua Program Studi Informatika yang kelima. +
+
+
+
+
+
+
+
+ + +
+
+
+ Data & Statistik +

Informatika UNTAN dalam Angka

+

+

Bukan sekadar angka, ini adalah cerita nyata dari perjalanan panjang Informatika UNTAN.
+

+
+
+
+
518
+
Mahasiswa Aktif
+
Tahun Akademik 2024/2025
+
+
+
213
+
Total Alumni
+
Data sejak tahun 2022
+
+
+
6 Bulan
+
Waktu Tunggu Kerja
+
Rata-rata lulusan terserap
+
+
+
+
+
Dosen Tetap
+
33
+

Berpengalaman dan bersertifikasi + di bidangnya masing-masing.

+
+
+
Jurnal Ilmiah
+
400+ Jurnal
+
+
πŸ“„ JEPIN  Β·  JUSTIN
+
πŸ“„ JURISTY  Β·  JUARA
+
+
+
+
Guru Besar
+
1 Guru Besar
+

Prof. Dr. Herry Sujaini, S.T., M.T. β€” Guru Besar pertama + Informatika UNTAN (sejak 2023).

+
+
+
+
+
Rasio Dosen : Mahasiswa
+
1 : 11
+
Memenuhi standar BAN-PT
+
+
+
+
+ + +
+
+
+ Prestasi +

Pencapaian Membanggakan

+

+

Dari panggung nasional hingga kolaborasi internasional β€” Informatika UNTAN hadir, + bersaing, dan meninggalkan jejak.
+

+
+
+ + + + +
+
+
+ Kompetisi +

Finalis 10 Besar Competitive Programming Contest (COMPFEST) 17

+

Berhasil meraih posisi 10 besar nasional pada COMPFEST 17, kompetisi pemrograman yang diselenggarakan oleh Universitas Indonesia (UI).

+
πŸ“… 2025 Finalis
+
+
+ Kompetisi +

Tim Regional Terbaik GEMASTIK XVIII bidang Competitive Programming

+

Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVIII pada bidang Competitive Programming

+
πŸ“… 2025Tim Regional Terbaik
+
+
+ Kompetisi +

International Collegiate Programming Contest predikat Honor

+

Tim competitive programming Informatika UNTAN berhasil lolos ke babak regional ICPC Asia Jakarta 2025.

+
πŸ“… 2025Honor
+
+
+ Kompetisi +

Tim Regional Terbaik GEMASTIK XVII bidang Competitive Programming

+

Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVII pada bidang Competitive Programming

+
πŸ“… 2024Tim Regional Terbaik
+
+
+ Kompetisi +

LOMBA MTQ TINGKAT PROVINSI KALIMANTAN BARAT PESERTA CABANG TAHFIDZ HADITS GOLONGAN 100 HADIST DENGAN SANAD PUTRI

+

Berpastisipasi pada MTQ tingkat provinsi Kalimantan Barat cabang Tahfidz Hadits 100 Hadits Bersanad Putri

+
πŸ“… 2024PESERTA
+
+
+ Publikasi +

Customer Relationship Management (CRM) System pada Peningkatan Layanan Pengguna E-Learning

+

Penulis: EF Ripanti, EE Pratama, F Asrin. Penelitian ini mengkaji penerapan sistem CRM untuk meningkatkan kualitas layanan dan kepuasan pengguna pada platform e-learning.

+
πŸ“… 2025
+
+
+ Publikasi +

REKOMENDASI AREA PEMASARAN BAGI PEDAGANG SAYUR KELILING MENGGUNAKAN METODE DBSCAN DAN VISUALISASI HEATMAP

+

Penulis: DA Nugraha, IY Sholva, EE Pratama. Penelitian ini memanfaatkan metode DBSCAN dan visualisasi heatmap untuk merekomendasikan area pemasaran yang potensial bagi pedagang sayur keliling.

+
πŸ“… 2024
+
+
+ Publikasi +

Data mining untuk pengelompokan saham pada sektor energi dengan metode k-means

+

Penulis: AS Sukamto, W Setiawan, EE Pratama. Penelitian ini menerapkan algoritma K-Means untuk mengelompokkan saham sektor energi berdasarkan karakteristik data yang serupa guna mendukung analisis investasi.

+
πŸ“… 2023
+
+
+ Pengabdian Masyarakat +

KODINGMU PLATFORM BELAJAR COMPUTATIONAL THINKING BAGI SISWA SMAN 1 MEMPAWAH HILIR

+

Kegiatan pengabdian yang bertujuan meningkatkan kemampuan berpikir komputasional dan pemecahan masalah siswa melalui pelatihan serta pemanfaatan platform pembelajaran Kodingmu berbasis aktivitas pemrograman yang interaktif dan menyenangkan.

+
πŸ“… 2025
+
+
+ Inovasi Aplikasi +

SPOTA (2008)

+

Sistem Pendukung Outline Tugas Akhir β€” lahir dari ide dosen, dibangun mahasiswa, masih digunakan hingga kini. Inovasi yang melampaui zamannya.

+
πŸ“… 2008πŸ’‘ Masih aktif
+
+
+ Inovasi Aplikasi +

EdoXid (2021)

+

Sistem pengajuan sidang digital β€” hadir menjawab pandemi, kini naik kelas ke skala Fakultas MIPA Universitas Tanjungpura.

+
πŸ“… 2021πŸš€ Skala Fakultas
+
+
+
+
+ + +
+
+
+ Komunitas +

Study Club

+

+

Study Club hadir sebagai wadah pengembangan kompetensi mahasiswa melalui peminatan yang terstruktur dan berbasis komunitas. Setiap study club dirancang untuk memperdalam keahlian spesifik di bidang informatika.
+

+
+
+
+
πŸ’»
+
ARISE
+
  Competitive Programming
+

Program kerja ini berfokus pada peminatan competitive programming. Mahasiswa dilatih + untuk mengasah kemampuan pemecahan masalah dan algoritma melalui kompetisi pemrograman + bergengsi tingkat nasional maupun internasional.

+
+
+
πŸ› οΈ
+
Software Development
+
  Software Development
+

Berfokus pada peminatan software development. Materi yang diajarkan meliputi fundamental + dasar web, version control (GitHub), software development life cycle, Entity Relationship + Diagram, tech-stack, dan use case.

+
+
+
πŸ“Š
+
MINERVA
+
  Data Mining
+

Berfokus pada peminatan data mining. Mahasiswa akan mendalami teknik penggalian data, + analisis statistik, dan penerapannya dalam berbagai domain industri untuk menghasilkan + insight yang bernilai.

+
+
+
+
+ Bergabung dengan Study Club + Study club ini terbuka bagi seluruh mahasiswa aktif Prodi Informatika UNTAN. Pilih + peminatan yang sesuai dengan minat dan tujuan karirmu. +
+ Info Lebih Lanjut β†’ +
+
+
+ + +
+
+
+
+ Karir +

Masa Depan Lulusan Informatika

+

Lulusan Informatika UNTAN bukan hanya pencari kerja β€” mereka pencipta solusi.

+

Lulusan Prodi Informatika UNTAN diserap secara luas oleh industri teknologi, instansi pemerintah, BUMN, dan startup. Dengan bekal kompetensi digital yang kuat, karir cemerlang menanti di berbagai sektor strategis.

+
+ Bidang Karir Lainnya: +
+ IT Project Manager + Database Admin + Cloud Architect + Game Developer + Business Intelligence + IoT Engineer + Akademisi / Dosen +
+
+
+
+
+
Software Engineer
+
+ BackendFrontendMobile DevDevOps +
+
Gojek, Tokopedia, Traveloka, Startup
+
+
+
Data & AI Specialist
+
+ Data ScientistML EngineerAI + ResearcherBusiness Analyst +
+
Bank, BUMN, Fintech
+
+
+
Cybersecurity
+
+ Penetration TesterSecurity AnalystNetwork + Engineer +
+
BSSN, Kominfo, Perbankan
+
+
+
Wirausaha Digital
+
+ Founder StartupFreelancerDigital + ConsultantE-commerce +
+
Mandiri, Remote Work
+
+
+
+
+
+ + +
+
+
+ Alumni +

Kisah Sukses Alumni

+

+

Mereka adalah bukti nyata bahwa Informatika UNTAN adalah batu loncatan menuju karir gemilang β€” dari Pontianak, ke panggung dunia.
+

+
+
+
+
+
IF +
+
+
Izhan Fakhruzi
+
Informatika, Angkatan 2005
+
+
+
+
+ +
+
+
+ Dosen UM Pontianak + PhD Candidate Granada +
+

Alumni Informatika UNTAN angkatan 2005 yang membangun fondasi kuat di bidang komputasi, + melanjutkan studi magister di Marmara University melalui beasiswa TΓΌrkiye BurslarΔ±, + berkarier sebagai dosen di Universitas Muhammadiyah Pontianak, dan kini menempuh doktoral di + Universidad de Granada dengan fokus pada kecerdasan buatan untuk sistem transportasi cerdas + dan informatika kesehatan.

+
+
+
+
+
CD +
+
+
Charles Darwis Hariman
+
Informatika, Angkatan 2018
+
+
+
+
+ +
+
+
+ Software Developer + FinTech Travixy Frankfurt +
+

Alumni Informatika UNTAN dengan kemampuan kuat dalam pemrograman dan problem solving, + melanjutkan studi master di Saarland University Jerman dengan riset kecerdasan buatan + bertaraf internasional, lalu berkarier sebagai Software Developer di perusahaan FinTech + Travixy Frankfurt, mengembangkan platform pembiayaan yang menggerakkan transaksi bernilai + miliaran Euro.

+
+
+
+
+
DP +
+
+
Dona Pramana Putra
+
Informatika, Angkatan 2006
+
+
+
+
+ +
+
+
+ Product Team + AI Rudder +
+

Alumni Informatika UNTAN angkatan 2006 yang kini berkarier sebagai Product Team di AI Rudder, + berbekal pengalaman pembelajaran berbasis proyek selama kuliah, melanjutkan studi S2 di + China melalui beasiswa, serta berkontribusi dalam industri kecerdasan buatan dengan + perspektif global.

+
+
+
+
+
+ + +
+
+
+ Infrastruktur +

Infrastruktur dan Fasilitas

+

+

Fasilitas lengkap dan modern untuk mendukung proses belajar, penelitian, dan inovasi mahasiswa.
+

+
+
+
+
+
πŸ–₯️
+
8 Laboratorium
+

Lab Pemrograman, Jaringan, Multimedia, IoT, AI, Basis Data, Mobile Dev, dan Keamanan Siber β€” + ber-AC, High-Speed PC.

+
8 Lab Aktif & Berteknologi
+
+
+
☁️
+
Data Center
+

Server on-premise dengan infrastruktur cloud lokal berkapasitas tinggi untuk penelitian dan + deployment aplikasi.

+
99.9% Uptime Β· Redundant
+
+
+
πŸš€
+
IFUNTANHUB
+

Platform PaaS eksklusif mahasiswa untuk deploy aplikasi, hosting proyek, akses GPU computing, + dan kolaborasi tim.

+
Gratis Β· GPU Access
+
+
+
πŸ“š
+
E-Resources
+

Akses jurnal internasional Scopus, IEEE Xplore, ACM Digital Library, Springer, dan database + ilmiah lainnya.

+
IEEE Β· Scopus Β· ACM
+
+
+
+ Lisensi Perangkat Lunak Tersedia: +
+ Microsoft Office 365 + JetBrains IDE + Adobe Creative Cloud + GitHub Enterprise + Figma Education + MATLAB + Cisco Packet Tracer + AWS Academy +
+
+
+
+ + +
+
+
+ Kerjasama +

Mitra Strategis Informatika UNTAN

+

+

Dibangun di atas kepercayaan dan kolaborasi dengan perusahaan teknologi, instansi + pemerintah, dan lembaga pendidikan terkemuka.
+

+
+ +
Industri & Swasta
+
+
+ +
PT. Indosat Ooredoo
+
+
+ +
PT. PLN Nusantara
+
+
+ +
Instansi Pemerintah
+
+
+
Diskominfo Kalbar
+
+
+
POLDA Kalbar
+
+
+
Bappeda Sambas
+
+
+
Bappeda Sintang
+
+
+
Bappeda Bengkayang
+
+
+
BKPSDM
+
+
+
BPBD Sintang
+
+
+
BKD Pontianak
+
+
+
Disperkim Singkawang
+
+
+ +
Perguruan Tinggi & Lembaga Riset
+
+
+
UNIMAS Malaysia
+
+
+
UUM Malaysia
+
+
+
UCS Sarawak
+
+
+
UTEM Malaysia
+
+
+
IPB Indonesia
+
+
+
Polnep
+
+
+
Poltekkes Pontianak
+
+
+
+
+ + +
+
+
+ Bergabung Bersama Kami +

Mulai Perjalanan Digital Anda Bersama Kami

+

Jadilah bagian dari komunitas informatika terbaik di Kalimantan Barat. Daftarkan diri Anda sekarang dan wujudkan impian karir teknologi bersama Informatika UNTAN.

+
+ Daftar Mahasiswa Baru + πŸ’¬ Chat WhatsApp +
+
+
+
+
Informasi Kontak
+
+
+
πŸ“
+
+
Alamat
+
Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. + Pontianak Tenggara, Kota Pontianak, Kalimantan Barat 78124
+
+
+
+
βœ‰οΈ
+
+
Email
+
info@informatika.untan.ac.id
+
+
+
+
πŸ’¬
+
+
WhatsApp
+
+62 851-7165-5161
Senin – Jumat, 08.00 – 16.00 + WIB
+
+
+
+
πŸ“ž
+
+
Telepon / Fax
+
+62(561) 739637
+
+
+
+
+
+
+
+ +
@@ -1332,7 +2045,7 @@ } })(); - + \ No newline at end of file diff --git a/groups/Jellyfish.Corp/script.js b/groups/Jellyfish.Corp/script.js new file mode 100644 index 0000000..25ee30f --- /dev/null +++ b/groups/Jellyfish.Corp/script.js @@ -0,0 +1,92 @@ +// ===== SCROLL REVEAL β€” jf-* cards di dalam #assignment-body ===== +function initScrollReveal() { + const body = document.getElementById('assignment-body'); + if (!body) return; + + const targets = body.querySelectorAll( + '.jf-stat-card, .jf-stat-row-card, .jf-prestasi-card, ' + + '.jf-sc-card, .jf-karir-card, .jf-alumni-card, ' + + '.jf-infra-card, .jf-mitra-card, .jf-tl-item, .jf-kontak-item' + ); + targets.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(24px)'; + el.style.transition = 'opacity 0.55s ease, transform 0.55s ease'; + }); + + const obs = new IntersectionObserver((entries) => { + entries.forEach((entry, i) => { + if (!entry.isIntersecting) return; + setTimeout(() => { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + }, i * 70); + obs.unobserve(entry.target); + }); + }, { threshold: 0.08 }); + + targets.forEach(el => obs.observe(el)); +} + +// ===== PRESTASI FILTER β€” tab filter di dalam #assignment-body ===== +function initPrestasiFilter() { + const body = document.getElementById('assignment-body'); + if (!body) return; + + const tabs = body.querySelectorAll('.jf-tab-btn'); + const cards = body.querySelectorAll('#prestasi-grid .jf-prestasi-card'); + if (!tabs.length) return; + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + tabs.forEach(t => t.classList.remove('jf-tab-active')); + tab.classList.add('jf-tab-active'); + const filter = tab.dataset.filter; + cards.forEach(card => { + const show = filter === 'all' || card.dataset.cat === filter; + card.style.display = show ? '' : 'none'; + if (show) card.style.animation = 'jfFadeIn 0.35s ease forwards'; + }); + }); + }); +} + +// ===== ANIMATED COUNTER β€” .jf-stat-num di dalam #assignment-body ===== +function initCounters() { + const body = document.getElementById('assignment-body'); + if (!body) return; + + const obs = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (!entry.isIntersecting) return; + const el = entry.target; + const raw = el.textContent.trim(); + const num = parseFloat(raw.replace(/[^0-9.]/g, '')); + if (isNaN(num) || num === 0) return; + + const prefix = raw.match(/^[^0-9]*/)[0]; + const suffix = raw.match(/[^0-9.]*$/)[0]; + + let start = 0; + const step = 16; + const increment = num / (1400 / step); + const timer = setInterval(() => { + start = Math.min(start + increment, num); + const display = Number.isInteger(num) + ? Math.floor(start).toLocaleString('id-ID') + : start.toFixed(1); + el.textContent = prefix + display + suffix; + if (start >= num) clearInterval(timer); + }, step); + + obs.unobserve(el); + }); + }, { threshold: 0.5 }); + + body.querySelectorAll('.jf-stat-num').forEach(el => obs.observe(el)); +} + +// ===== INIT ===== +initScrollReveal(); +initPrestasiFilter(); +initCounters(); \ No newline at end of file diff --git a/groups/Jellyfish.Corp/style.css b/groups/Jellyfish.Corp/style.css index c31a92b..86834dc 100644 --- a/groups/Jellyfish.Corp/style.css +++ b/groups/Jellyfish.Corp/style.css @@ -1,47 +1,2701 @@ -:root { - --brand-navy: #003150; - --brand-yellow: #feb401; - --text-main: #1e293b; - --text-soft: #64748b; - --bg-soft: #f8fafc; - --line: #e2e8f0; +* { + font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } -* { box-sizing: border-box; } -html, body { margin: 0; padding: 0; } -body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; } -.container { width: min(1100px, 92%); margin-inline: auto; } +body { + font-family: 'Roboto Condensed', sans-serif !important; +} -.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; } -.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; } +h1, h2, h3, h4, h5, h6 { + font-family: 'Roboto Condensed', sans-serif; +} +/* ===== BASE ===== */ + html { overflow-x: clip; scroll-behavior: smooth; } -.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; } -.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); } -.hero-inner { position: relative; z-index: 1; padding: 36px 0; } -.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; } -.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; } + #nav-wrapper { + transform: translateZ(0); + -webkit-transform: translateZ(0); + backface-visibility: hidden; + } -.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; } -@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } } + @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + } + } -.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; } -.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; } -.cover img { width: 100%; height: auto; display: block; } + .skip-link { + position: absolute; top: -40px; left: 0; + background: #003150; color: white; + padding: 8px 16px; z-index: 100; transition: top 0.3s; + } + .skip-link:focus { top: 0; } + :focus-visible { outline: 3px solid #feb401; outline-offset: 2px; } -.article-body > * + * { margin-top: 1.1em; } -.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; } -.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; } -.article-body p { margin: 0 0 1em; } -.article-body ul, .article-body ol { padding-left: 1.4rem; } -.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; } -.article-body a { color: #005eb8; } -.article-body img { max-width: 100%; border-radius: 8px; } -.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } + /* ===== MEGA MENU ===== */ + .mega-panel { + opacity: 0; visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; + position: absolute; top: 100%; left: 0; right: 0; + } + .mega-panel.active { opacity: 1; visibility: visible; } -.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; } -.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; } + .mega-link-card { + display: flex; align-items: flex-start; gap: 1rem; + padding: 1rem; border-radius: 0.75rem; + border: 1px solid #e2e8f0; background: white; + transition: all 0.2s ease; + } + .mega-link-card:hover { + border-color: #3b82f6; + box-shadow: 0 4px 12px rgba(59,130,246,0.15); + transform: translateY(-2px); + } + .mega-link-icon { + width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; + display: flex; align-items: center; justify-content: center; + flex-shrink: 0; transition: all 0.2s ease; + } + .nav-menu-btn.active { background: rgba(255,255,255,0.9); color: #1e40af; } + .nav-menu-btn:hover { background: rgba(255,255,255,0.8); } + #main-nav { position: relative; } + #mega-menu-container { position: absolute; top: 100%; left: 0; right: 0; pointer-events: none; } + #mega-menu-container .mega-panel { pointer-events: auto; } + .nav-menu-item { position: relative; } + .nav-menu-item::after { content: ''; position: absolute; bottom: -12px; left: 0; right: 0; height: 12px; } -.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); } -.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; } -.footer-logo { height: 28px; width: auto; } -.footer-ornament { width: 100%; display: block; opacity: .9; } + /* ===== SEKILAS PAGE STYLES ===== */ + + /* Hero */ + .hero-section { + background: linear-gradient(135deg, #003150 0%, #005eb8 50%, #00b5e2 100%); + position: relative; overflow: hidden; + } + .hero-section::before { + content: ''; + position: absolute; inset: 0; + background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + } + + /* Stats */ + .stat-card { + background: white; border-radius: 1rem; + padding: 1.75rem 1.5rem; + box-shadow: 0 4px 24px rgba(0,0,0,0.08); + border-bottom: 4px solid transparent; + transition: all 0.3s ease; text-align: center; + } + .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.14); } + .stat-card.blue { border-color: #005eb8; } + .stat-card.yellow { border-color: #feb401; } + .stat-card.cyan { border-color: #00b5e2; } + .stat-card.green { border-color: #10b981; } + .stat-num { font-size: 2.5rem; font-weight: 900; font-family: 'Roboto Condensed', sans-serif; line-height: 1; } + .stat-num.blue { color: #005eb8; } + .stat-num.yellow { color: #feb401; } + .stat-num.cyan { color: #00b5e2; } + .stat-num.green { color: #10b981; } + + /* Section titles */ + .section-badge { + display: inline-block; + background: #feb401; color: #1e293b; + font-size: 0.65rem; font-weight: 800; + letter-spacing: 0.18em; text-transform: uppercase; + padding: 0.25rem 0.75rem; margin-bottom: 0.75rem; + } + .section-title { + font-family: 'Playfair Display', serif; + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 800; color: #0f172a; line-height: 1.15; + } + + /* Akreditasi */ + .akreditasi-badge { + background: linear-gradient(135deg, #003150, #005eb8); + border-radius: 1.25rem; padding: 2.5rem; + color: white; position: relative; overflow: hidden; + } + .akreditasi-badge::before { + content: ''; + position: absolute; top: -50%; right: -10%; + width: 250px; height: 250px; + background: rgba(254,180,1,0.15); border-radius: 50%; + } + .grade-badge { + width: 120px; height: 120px; border-radius: 50%; + background: #feb401; display: flex; flex-direction: column; + align-items: center; justify-content: center; + box-shadow: 0 8px 32px rgba(254,180,1,0.4); + } + .grade-letter { font-size: 3rem; font-weight: 900; color: #003150; line-height: 1; font-family: 'Roboto Condensed', sans-serif; } + .grade-label { font-size: 0.6rem; font-weight: 700; color: #003150; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; } + + /* Prestasi cards */ + .prestasi-card { + background: white; border-radius: 1rem; + border: 1px solid #e2e8f0; + padding: 1.5rem; transition: all 0.3s ease; + border-left: 4px solid transparent; + } + .prestasi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-left-color: #feb401; } + + /* Karir */ + .karir-chip { + display: inline-flex; align-items: center; gap: 0.4rem; + background: #f0f9ff; color: #0369a1; + border: 1px solid #bae6fd; border-radius: 2rem; + padding: 0.3rem 0.9rem; font-size: 0.8rem; font-weight: 600; + transition: all 0.2s; + } + .karir-chip:hover { background: #005eb8; color: white; border-color: #005eb8; } + + /* Fasilitas */ + .fasilitas-card { + background: white; border-radius: 1rem; + overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); + transition: all 0.3s ease; border: 1px solid #f1f5f9; + } + .fasilitas-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.14); } + .fasilitas-icon-wrap { + height: 130px; display: flex; align-items: center; justify-content: center; + } + + /* Kerjasama logos */ + .mitra-logo { + background: white; border: 1px solid #e2e8f0; border-radius: 0.75rem; + padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: center; + transition: all 0.3s; min-height: 80px; + } + .mitra-logo:hover { border-color: #005eb8; box-shadow: 0 4px 16px rgba(0,94,184,0.12); transform: scale(1.03); } + + /* Video section */ + .video-wrapper { + position: relative; padding-bottom: 56.25%; height: 0; + overflow: hidden; border-radius: 1rem; + box-shadow: 0 20px 60px rgba(0,0,0,0.25); + } + .video-wrapper iframe { + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; border: 0; + } + + /* Contact CTA */ + .cta-section { + background: linear-gradient(135deg, #003150 0%, #004a80 100%); + position: relative; overflow: hidden; + } + .cta-section::after { + content: ''; + position: absolute; bottom: 0; left: 0; right: 0; + height: 4px; background: #feb401; + } + + /* Animations */ + @keyframes fadeInUp { + from { opacity: 0; transform: translateY(24px); } + to { opacity: 1; transform: translateY(0); } + } + @keyframes pulse-ring { + 0% { transform: scale(1); opacity: 0.7; } + 100% { transform: scale(1.35); opacity: 0; } + } + + .animate-fade-in { animation: fadeInUp 0.7s ease forwards; } + .animate-fade-in-2 { animation: fadeInUp 0.7s 0.15s ease both; } + .animate-fade-in-3 { animation: fadeInUp 0.7s 0.3s ease both; } + .animate-fade-in-4 { animation: fadeInUp 0.7s 0.45s ease both; } + + .pulse-ring::before { + content: ''; position: absolute; inset: -6px; border-radius: 50%; + border: 3px solid #feb401; animation: pulse-ring 2s infinite; + } + + /* Scroll reveal */ + .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.65s ease, transform 0.65s ease; } + .reveal.visible { opacity: 1; transform: translateY(0); } + + /* Luco chatbot */ + @keyframes slideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } + @keyframes lucoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } + #luco-container { animation: slideInRight 0.5s ease-out forwards; } + #luco-btn { animation: lucoPulse 2s ease-in-out infinite; } + #luco-btn:hover { animation: none; } + + .luco-bubble-tail { + position: absolute; right: 24px; bottom: -6px; + width: 12px; height: 12px; + background: white; transform: rotate(45deg); + border-right: 1px solid #e2e8f0; + border-bottom: 1px solid #e2e8f0; + } + + /* Timeline dots */ + .timeline-item { position: relative; padding-left: 2.5rem; } + .timeline-item::before { + content: ''; position: absolute; left: 8px; top: 0.5rem; + width: 10px; height: 10px; border-radius: 50%; + background: #feb401; border: 2px solid #003150; + } + .timeline-item::after { + content: ''; position: absolute; left: 12px; top: 1.2rem; + bottom: -0.5rem; width: 2px; background: #e2e8f0; + } + .timeline-item:last-child::after { display: none; } + + /* Divider */ + .section-divider { height: 4px; background: linear-gradient(90deg, #003150, #005eb8, #00b5e2, #feb401); border: none; margin: 0; } + + /* ===== ASSIGNMENT BODY ===== */ + + /* Shell layout tambahan */ + .nav { background: #003150; padding: 1rem 0; } + .nav .brand { color: white; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; } + .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } + + .hero { position: relative; background: linear-gradient(135deg, #003150 0%, #005eb8 60%, #00b5e2 100%); min-height: 320px; display: flex; align-items: flex-end; overflow: hidden; } + .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; } + .hero-inner { position: relative; z-index: 1; padding: 2.5rem 1.5rem 3rem; } + .badge { display: inline-block; background: #feb401; color: #003150; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.25rem 0.85rem; border-radius: 2rem; margin-bottom: 0.9rem; } + .hero h1 { color: white; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; margin: 0; } + + .layout { display: grid; grid-template-columns: 1fr 280px; gap: 2.5rem; margin-top: 2.5rem; margin-bottom: 3rem; align-items: start; } + @media (max-width: 768px) { .layout { grid-template-columns: 1fr; } } + + .meta { display: flex; gap: 1.25rem; font-size: 0.8rem; color: #64748b; font-weight: 600; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.08em; } + .meta span { display: flex; align-items: center; gap: 0.35rem; } + .meta span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #feb401; } + + .cover { margin: 0 0 2rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 8px 32px rgba(0,49,80,0.15); } + .cover img { width: 100%; display: block; } + + .note { background: linear-gradient(135deg, #003150, #005eb8); color: white; border-radius: 1rem; padding: 1.5rem; position: sticky; top: 1.5rem; } + .note h3 { color: #feb401; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 0.75rem; } + .note p { font-size: 0.85rem; line-height: 1.6; margin: 0; opacity: 0.9; } + .note code { background: rgba(254,180,1,0.2); color: #feb401; padding: 0.1rem 0.4rem; border-radius: 0.3rem; font-size: 0.8rem; } + + .footer { background: #001a2e; color: white; padding: 2rem 0 0; position: relative; overflow: hidden; } + .footer-inner { display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.5rem; } + .footer-logo { height: 40px; filter: brightness(0) invert(1); opacity: 0.8; } + .footer p { margin: 0; opacity: 0.6; font-size: 0.85rem; } + .footer-ornament { width: 100%; display: block; opacity: 0.15; } + + /* ===== #assignment-body INTERNAL STYLES ===== */ + + #assignment-body { + font-family: 'Georgia', 'Times New Roman', serif; + color: #1e293b; + line-height: 1.8; + font-size: 1rem; + } + + /* Headings */ + #assignment-body h3 { + font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; + font-size: 1.35rem; + font-weight: 800; + color: #003150; + margin: 2.5rem 0 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 3px solid #feb401; + position: relative; + display: flex; + align-items: center; + gap: 0.6rem; + } + #assignment-body h3::before { + content: ''; + display: inline-block; + width: 4px; + height: 1.1em; + background: #003150; + border-radius: 2px; + flex-shrink: 0; + } + #assignment-body h3:first-child { margin-top: 0; } + + #assignment-body h4 { + font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; + font-size: 1.05rem; + font-weight: 700; + color: #005eb8; + margin: 1.75rem 0 0.4rem; + padding-left: 0.85rem; + border-left: 3px solid #00b5e2; + } + + /* Paragraphs */ + #assignment-body p { + margin: 0 0 1.1rem; + color: #334155; + } + + /* Lists */ + #assignment-body ul { + list-style: none; + padding: 0; + margin: 0 0 1.25rem; + display: flex; + flex-direction: column; + gap: 0.55rem; + } + #assignment-body ul li { + padding: 0.6rem 1rem 0.6rem 2.2rem; + background: #f8fafc; + border-radius: 0.5rem; + border-left: 3px solid #e2e8f0; + font-size: 0.95rem; + position: relative; + transition: border-color 0.2s, background 0.2s; + line-height: 1.6; + } + #assignment-body ul li:hover { + border-left-color: #feb401; + background: #fffbeb; + } + #assignment-body ul li::before { + content: 'β–Έ'; + position: absolute; + left: 0.7rem; + top: 0.6rem; + color: #feb401; + font-size: 0.85rem; + font-weight: 700; + } + + /* Tables */ + #assignment-body table { + width: 100%; + border-collapse: collapse; + margin: 0 0 1.75rem; + border-radius: 0.75rem; + overflow: hidden; + box-shadow: 0 2px 12px rgba(0,49,80,0.08); + font-size: 0.9rem; + } + #assignment-body thead tr { + background: linear-gradient(90deg, #003150, #005eb8); + color: white; + } + #assignment-body thead th { + padding: 0.85rem 1.1rem; + text-align: left; + font-family: 'Trebuchet MS', sans-serif; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + } + #assignment-body tbody tr { + border-bottom: 1px solid #e2e8f0; + transition: background 0.15s; + } + #assignment-body tbody tr:last-child { border-bottom: none; } + #assignment-body tbody tr:hover { background: #f0f7ff; } + #assignment-body tbody tr:nth-child(even) { background: #f8fafc; } + #assignment-body tbody tr:nth-child(even):hover { background: #e8f2ff; } + #assignment-body td { + padding: 0.75rem 1.1rem; + color: #334155; + vertical-align: top; + } + #assignment-body td:first-child { + font-weight: 600; + color: #003150; + } + + /* Strong */ + #assignment-body strong { + color: #003150; + font-weight: 700; + } + + /* Alumni section β€” special card look */ + #assignment-body h4 + p { + background: white; + border: 1px solid #e2e8f0; + border-radius: 0.75rem; + padding: 1rem 1.25rem; + box-shadow: 0 2px 8px rgba(0,49,80,0.06); + margin-bottom: 0.5rem; + position: relative; + } + #assignment-body h4 + p::before { + content: '"'; + position: absolute; + top: -0.3rem; + left: 1rem; + font-size: 3rem; + color: #feb401; + opacity: 0.3; + font-family: Georgia, serif; + line-height: 1; + } + + /* Scroll-reveal for #assignment-body children */ + #assignment-body .ab-reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.55s ease, transform 0.55s ease; + } + #assignment-body .ab-reveal.visible { + opacity: 1; + transform: translateY(0); + } + + /* Read-more toggle */ + .ab-readmore-btn { + display: inline-flex; + align-items: center; + gap: 0.45rem; + background: #003150; + color: white; + border: none; + border-radius: 2rem; + padding: 0.5rem 1.25rem; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + cursor: pointer; + margin-top: 0.5rem; + margin-bottom: 1.5rem; + transition: background 0.2s, transform 0.15s; + } + .ab-readmore-btn:hover { background: #005eb8; transform: scale(1.03); } + .ab-readmore-btn .arrow { transition: transform 0.25s; } + .ab-readmore-btn.open .arrow { transform: rotate(180deg); } + + .ab-collapsible { + overflow: hidden; + max-height: 0; + transition: max-height 0.45s ease; + } + .ab-collapsible.open { max-height: 3000px; } + + /* Section anchor labels */ + .ab-section-label { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: 0.65rem; + font-weight: 800; + letter-spacing: 0.18em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.25rem; + } + .ab-section-label::before { + content: ''; + display: inline-block; + width: 20px; + height: 2px; + background: #feb401; + } + + /* Highlight callout for key stat inline */ + #assignment-body .ab-callout { + display: flex; + align-items: flex-start; + gap: 1rem; + background: linear-gradient(135deg, #fffbeb, #fff7d6); + border: 1px solid #fde68a; + border-left: 4px solid #feb401; + border-radius: 0.75rem; + padding: 1rem 1.25rem; + margin: 1rem 0 1.5rem; + font-size: 0.9rem; + color: #78350f; + } + #assignment-body .ab-callout::before { + content: 'πŸ’‘'; + font-size: 1.2rem; + flex-shrink: 0; + margin-top: 0.05rem; + } + + /* Marquee */ + @keyframes marquee { + 0% { transform: translateX(100%); } + 100% { transform: translateX(-100%); } + } + + /* Progress bars */ + .prog-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } + .prog-fill { height: 100%; border-radius: 999px; transition: width 1.5s ease; } + + /* Study Club */ + .studyclub-card { + background: white; border-radius: 1rem; + border: 1px solid #e2e8f0; padding: 1.5rem; + transition: all 0.3s ease; + border-top: 4px solid transparent; + } + .studyclub-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-top-color: #feb401; } + + /* Language Toggle */ + #lang-toggle { + display: flex; align-items: center; gap: 0.4rem; + background: rgba(255,255,255,0.15); + border: 1px solid rgba(255,255,255,0.3); + color: white; font-size: 0.75rem; font-weight: 700; + letter-spacing: 0.08em; padding: 0.35rem 0.85rem; + border-radius: 2rem; cursor: pointer; + transition: all 0.2s ease; text-transform: uppercase; + } + #lang-toggle:hover { background: rgba(255,255,255,0.25); } + #lang-toggle .lang-flag { font-size: 1rem; } + + /* Bilingual: hide/show */ + [data-lang] { transition: opacity 0.2s ease; } + .lang-en [data-lang="id"] { display: none; } + .lang-id [data-lang="en"] { display: none; } + +/* ===================================================== + JELLYFISH.CORP β€” PREMIUM DESIGN v2 + ===================================================== */ + +/* ---- Base ---- */ +*, *::before, *::after { box-sizing: border-box; } +body { font-family: 'Inter', 'Segoe UI', sans-serif; color: #1e293b; background: #fff; overflow-x: hidden; } +a { text-decoration: none; } + +/* ---- CSS Custom Properties ---- */ +:root { + --navy: #003150; + --blue: #005eb8; + --sky: #00b5e2; + --gold: #feb401; + --dark: #060e1c; + --slate: #475569; + --light: #f8fafc; + --white: #ffffff; + --radius: 1.25rem; + --shadow-sm: 0 2px 12px rgba(0,0,0,.06); + --shadow-md: 0 8px 32px rgba(0,0,0,.10); + --shadow-lg: 0 20px 60px rgba(0,0,0,.16); +} + +/* ===================================================== + BADGE + ===================================================== */ +.jf-badge { + display: inline-flex; + align-items: center; + gap: .45rem; + background: var(--gold); + color: var(--navy); + font-size: .62rem; + font-weight: 800; + letter-spacing: .2em; + text-transform: uppercase; + padding: .3rem 1rem; + clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); + margin-bottom: 1rem; +} +.jf-badge-hero { + display: inline-flex; + align-items: center; + gap: .5rem; + background: rgba(254,180,1,.12); + border: 1px solid rgba(254,180,1,.35); + color: var(--gold); + font-size: .65rem; + font-weight: 700; + letter-spacing: .18em; + text-transform: uppercase; + padding: .35rem 1rem; + border-radius: 2rem; + margin-bottom: 1.5rem; + backdrop-filter: blur(6px); +} +.jf-badge-hero::before { + content: ''; + width: 6px; height: 6px; + background: var(--gold); + border-radius: 50%; + display: inline-block; + animation: pulseDot 1.8s ease infinite; +} +@keyframes pulseDot { + 0%,100% { opacity:1; transform:scale(1); } + 50% { opacity:.4; transform:scale(1.5); } +} + +/* ===================================================== + HERO LANDING β€” FULL VIEWPORT + ===================================================== */ +.jf-hero-landing { + min-height: 100vh; + background: var(--dark); + position: relative; + display: flex; + align-items: center; + overflow: hidden; +} + +/* Animated gradient mesh */ +.jf-hero-landing::before { + content: ''; + position: absolute; inset: 0; + background: + radial-gradient(ellipse 80% 60% at 20% 40%, rgba(0,94,184,.45) 0%, transparent 60%), + radial-gradient(ellipse 60% 50% at 80% 70%, rgba(0,181,226,.2) 0%, transparent 55%), + radial-gradient(ellipse 40% 40% at 60% 10%, rgba(254,180,1,.08) 0%, transparent 50%); + animation: meshMove 12s ease-in-out infinite alternate; +} +@keyframes meshMove { + from { filter: hue-rotate(0deg); } + to { filter: hue-rotate(8deg); } +} + +/* Grid overlay */ +.jf-hero-landing::after { + content: ''; + position: absolute; inset: 0; + background-image: + linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); + background-size: 60px 60px; +} + +.jf-hero-landing-inner { + position: relative; + z-index: 2; + width: 100%; + max-width: 1100px; + margin: 0 auto; + padding: 0 1.5rem; + padding-top: 6rem; + padding-bottom: 6rem; +} + +.jf-hero-landing-content { max-width: 760px; } + +.jf-hero-headline { + font-size: clamp(2.4rem, 6vw, 4.2rem); + font-weight: 900; + line-height: 1.1; + color: #ffffff; + margin-bottom: 1.5rem; + letter-spacing: -.02em; +} +.jf-hero-headline span { + background: linear-gradient(135deg, var(--gold), #ffd966); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.jf-hero-sub { + font-size: 1.05rem; + color: rgba(255,255,255,.7) !important; + line-height: 1.8; + margin-bottom: 2.5rem; + max-width: 600px; +} + +/* CTA Buttons */ +.jf-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 4rem; } +.jf-hero-cta-primary { + display: inline-flex; align-items: center; gap: .5rem; + background: var(--gold); + color: var(--navy); + font-size: .9rem; font-weight: 800; + padding: .9rem 2rem; + border-radius: .6rem; + transition: all .25s; + /* box-shadow: 0 4px 24px rgba(254,180,1,.35); */ +} +.jf-hero-cta-primary:hover { + transform: translateY(-3px); + box-shadow: 0 8px 36px rgba(254,180,1,.5); + background: #ffd133; +} +.jf-hero-cta-secondary { + display: inline-flex; align-items: center; gap: .5rem; + background: rgba(255,255,255,.08); + color: #fff; + font-size: .9rem; font-weight: 700; + padding: .9rem 2rem; + border-radius: .6rem; + border: 1px solid rgba(255,255,255,.2); + backdrop-filter: blur(8px); + transition: all .25s; +} +.jf-hero-cta-secondary:hover { + background: rgba(255,255,255,.15); + border-color: rgba(255,255,255,.4); + transform: translateY(-2px); +} + +/* Hero mini stats */ +.jf-hero-stats { + display: flex; + align-items: center; + gap: 0; + border-top: 1px solid rgba(255,255,255,.1); + padding-top: 2.5rem; + flex-wrap: wrap; +} +.jf-hs-item { text-align: center; padding: 0 2.5rem; } +.jf-hs-item:first-child { padding-left: 0; } +.jf-hs-num { + display: block; + font-size: 1.9rem; + font-weight: 900; + color: var(--gold); + line-height: 1; + margin-bottom: .3rem; + letter-spacing: -.02em; +} +.jf-hs-label { font-size: .73rem; color: rgba(255,255,255,.55); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } +.jf-hs-div { width: 1px; height: 48px; background: rgba(255,255,255,.12); } + +/* ===================================================== + SHARED SECTION STYLES + ===================================================== */ +.jf-section { padding: 6rem 0; } +.jf-section-light { background: #f4f7fb; } +.jf-section-white { background: #fff; } +.jf-section-dark { background: linear-gradient(160deg, #060e1c 0%, #0a1e35 50%, #0c2340 100%); } + +/* Section header */ +.jf-section-header { margin-bottom: 3.5rem; } +.jf-center { text-align: center; } +.jf-section-title { + font-size: clamp(1.75rem, 4vw, 2.6rem); + font-weight: 900; + color: #0c1b2e; + line-height: 1.15; + margin-bottom: .9rem; + letter-spacing: -.02em; +} +.jf-section-accent { + display: block; + width: 48px; height: 4px; + background: linear-gradient(90deg, var(--gold), var(--blue)); + border-radius: 2px; + margin: .75rem auto 1rem; +} +.jf-center .jf-section-accent { margin-left: auto; margin-right: auto; } +.jf-section-sub { + max-width: 580px; + margin: 0 auto; + font-size: .92rem; + color: var(--slate); + line-height: 1.75; +} + +/* ===================================================== + ABOUT SECTION (B) + ===================================================== */ +.jf-about-layout { + display: grid; + grid-template-columns: 1fr 380px; + gap: 4rem; + align-items: start; +} + +.jf-about-intro { + font-size: .97rem; + color: var(--slate); + line-height: 1.85; + margin-bottom: 1.75rem; +} +.jf-about-intro strong { color: var(--navy); } + +.jf-unggulan-box { + display: flex; + gap: 1rem; + align-items: flex-start; + background: linear-gradient(135deg, #fffbeb, #fff8e1); + border: 1px solid rgba(254,180,1,.3); + border-left: 4px solid var(--gold); + border-radius: .85rem; + padding: 1.1rem 1.25rem; + margin-bottom: 2rem; + font-size: .88rem; + color: #78350f; + line-height: 1.65; +} +.jf-unggulan-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; } + +/* Visi card */ +.jf-vm-card { + border-radius: var(--radius); + padding: 1.5rem; + margin-bottom: 1.25rem; +} +.jf-vm-visi { + background: linear-gradient(135deg, var(--navy), var(--blue)); + color: white; +} +.jf-vm-visi p { font-size: .88rem; color: rgba(255,255,255,.85); line-height: 1.7; } +.jf-vm-label { + font-size: .72rem; + font-weight: 800; + letter-spacing: .14em; + text-transform: uppercase; + margin-bottom: .75rem; + color: var(--gold); +} + +/* Misi list */ +.jf-misi-section { margin-top: .5rem; } +.jf-misi-label { + font-size: .72rem; + font-weight: 800; + letter-spacing: .14em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 1rem; + display: flex; + align-items: center; + gap: .5rem; +} +.jf-misi-label::after { + content: ''; + flex: 1; height: 1px; + background: linear-gradient(90deg, #e2e8f0, transparent); +} +.jf-misi-list { display: flex; flex-direction: column; gap: .75rem; } +.jf-misi-item { + display: flex; + gap: 1rem; + align-items: flex-start; + background: var(--white); + border: 1px solid #e8eef5; + border-radius: .85rem; + padding: 1rem 1.25rem; + transition: all .25s; +} +.jf-misi-item:hover { + border-color: var(--blue); + box-shadow: 0 4px 20px rgba(0,94,184,.08); + transform: translateX(4px); +} +.jf-misi-num { + width: 28px; height: 28px; flex-shrink: 0; + background: linear-gradient(135deg, var(--navy), var(--blue)); + color: var(--gold); + border-radius: .5rem; + display: flex; align-items: center; justify-content: center; + font-size: .72rem; font-weight: 900; + margin-top: .1rem; +} +.jf-misi-item strong { display: block; font-size: .88rem; font-weight: 700; color: var(--navy); margin-bottom: .25rem; } +.jf-misi-item p { font-size: .8rem; color: var(--slate); line-height: 1.65; margin: 0; } + +/* Timeline card */ +.jf-timeline-card { + background: var(--white); + border-radius: var(--radius); + padding: 2rem; + box-shadow: var(--shadow-md); + border: 1px solid #e8eef5; + position: sticky; + top: 1.5rem; + max-height: calc(100vh - 4rem); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--gold) transparent; +} +.jf-timeline-card::-webkit-scrollbar { width: 4px; } +.jf-timeline-card::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; } + +.jf-timeline-title { + font-size: .68rem; + font-weight: 800; + letter-spacing: .2em; + text-transform: uppercase; + color: #94a3b8; + padding-bottom: 1rem; + margin-bottom: 1.5rem; + border-bottom: 2px solid var(--gold); + display: flex; + align-items: center; + gap: .5rem; +} +.jf-timeline-title::before { content: 'πŸ“…'; font-size: .9rem; } + +.jf-timeline-list { display: flex; flex-direction: column; } +.jf-tl-item { + display: grid; + grid-template-columns: 40px 14px 1fr; + gap: 0 .75rem; + align-items: flex-start; + padding-bottom: 1.5rem; +} +.jf-tl-item:last-child { padding-bottom: 0; } +.jf-tl-year { + font-size: .68rem; + font-weight: 900; + color: var(--gold); + text-align: right; + padding-top: .1rem; + letter-spacing: .02em; +} +.jf-tl-dot { + width: 12px; height: 12px; + background: var(--white); + border: 3px solid var(--navy); + border-radius: 50%; + margin-top: .1rem; + position: relative; + z-index: 1; + flex-shrink: 0; + transition: all .25s; +} +.jf-tl-item:hover .jf-tl-dot { + background: var(--gold); + border-color: var(--gold); + transform: scale(1.3); +} +.jf-tl-item:not(:last-child) .jf-tl-dot::after { + content: ''; + position: absolute; + top: 9px; left: 50%; + transform: translateX(-50%); + width: 2px; + height: calc(1.5rem + 10px); + background: linear-gradient(to bottom, var(--navy), #e2e8f0); +} +.jf-tl-content strong { display: block; font-size: .83rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; } +.jf-tl-content span { font-size: .75rem; color: var(--slate); line-height: 1.55; } + +/* ===================================================== + STATS SECTION (C) + ===================================================== */ +.jf-stats-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-bottom: 1.75rem; + justify-content: center; +} +.jf-stat-card { + background: var(--white); + border-radius: var(--radius); + padding: 2rem 1.5rem; + text-align: center; + box-shadow: var(--shadow-sm); + border: 1px solid #e8eef5; + border-bottom: 4px solid transparent; + transition: all .3s ease; + position: relative; + overflow: hidden; +} +.jf-stat-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + opacity: 0; + transition: opacity .3s; +} +.jf-stat-blue::before { background: linear-gradient(90deg, var(--navy), var(--blue)); } +.jf-stat-yellow::before{ background: linear-gradient(90deg, #d97706, var(--gold)); } +.jf-stat-cyan::before { background: linear-gradient(90deg, var(--blue), var(--sky)); } +.jf-stat-green::before { background: linear-gradient(90deg, #059669, #10b981); } +.jf-stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } +.jf-stat-card:hover::before { opacity: 1; } +.jf-stat-blue { border-bottom-color: var(--blue); } +.jf-stat-yellow{ border-bottom-color: var(--gold); } +.jf-stat-cyan { border-bottom-color: var(--sky); } +.jf-stat-green { border-bottom-color: #10b981; } +.jf-stat-num { + font-size: 2.8rem; + font-weight: 900; + line-height: 1; + margin-bottom: .5rem; + letter-spacing: -.03em; +} +.jf-stat-blue .jf-stat-num { color: var(--blue); } +.jf-stat-yellow .jf-stat-num{ color: #d97706; } +.jf-stat-cyan .jf-stat-num { color: #0284c7; } +.jf-stat-green .jf-stat-num { color: #059669; } +.jf-stat-label { font-size: .82rem; font-weight: 700; color: #0c1b2e; margin-bottom: .25rem; } +.jf-stat-sub { font-size: .72rem; color: #94a3b8; } + +.jf-stats-row2 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-top: .25rem; +} +.jf-stat-row-card { + background: var(--white); + border-radius: var(--radius); + padding: 1.75rem; + box-shadow: var(--shadow-sm); + border: 1px solid #e8eef5; + transition: all .3s; +} +.jf-stat-row-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } +.jf-stat-row-label { + font-size: .68rem; + font-weight: 800; + letter-spacing: .14em; + text-transform: uppercase; + color: #94a3b8; + margin-bottom: .5rem; +} +.jf-stat-row-num { + font-size: 1.9rem; + font-weight: 900; + margin-bottom: .75rem; + letter-spacing: -.02em; +} +.jf-prog-wrap { + display: flex; + align-items: center; + gap: .65rem; + margin-bottom: .55rem; + font-size: .72rem; + color: var(--slate); +} +.jf-prog-bar { + flex: 1; height: 6px; + background: #e8eef5; + border-radius: 99px; + overflow: hidden; +} +.jf-prog-fill { height: 100%; border-radius: 99px; } +.jf-link-btn { + display: inline-flex; + align-items: center; + gap: .35rem; + margin-top: 1rem; + font-size: .76rem; font-weight: 700; + color: var(--blue); + border: 1.5px solid var(--blue); + border-radius: 2rem; + padding: .35rem 1rem; + transition: all .2s; +} +.jf-link-btn:hover { background: var(--blue); color: #fff; } + +/* ===================================================== + PENCAPAIAN (D) β€” PRESTASI FILTER + ===================================================== */ +.jf-filter-tabs { + display: flex; + gap: .5rem; + justify-content: center; + margin-bottom: 2.5rem; + flex-wrap: wrap; +} +.jf-tab-btn { + padding: .5rem 1.4rem; + border-radius: 2rem; + border: 1.5px solid #dde4ee; + background: var(--white); + font-size: .8rem; font-weight: 600; + color: var(--slate); + cursor: pointer; + transition: all .2s; +} +.jf-tab-btn:hover { border-color: var(--navy); color: var(--navy); } +.jf-tab-active { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; box-shadow: 0 4px 16px rgba(0,49,80,.25); } + +.jf-prestasi-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.jf-prestasi-card { + background: var(--white); + border: 1px solid #e8eef5; + border-radius: var(--radius); + border-left: 4px solid #dde4ee; + padding: 1.5rem; + transition: all .3s; + position: relative; + overflow: hidden; +} +.jf-prestasi-card::after { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 0; + background: linear-gradient(0deg, rgba(254,180,1,.04), transparent); + transition: height .3s; +} +.jf-prestasi-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 40px rgba(0,0,0,.1); + border-left-color: var(--gold); +} +.jf-prestasi-card:hover::after { height: 100%; } +.jf-prestasi-card h4 { + font-size: .95rem; font-weight: 700; + color: var(--navy); + margin: .7rem 0 .5rem; + line-height: 1.4; +} +.jf-prestasi-card p { font-size: .82rem; color: var(--slate); line-height: 1.65; margin-bottom: .85rem; } +.jf-prest-badge { + display: inline-block; + font-size: .62rem; font-weight: 700; + letter-spacing: .08em; text-transform: uppercase; + padding: .22rem .7rem; + border-radius: 2rem; +} +.jf-prest-nasional { background: #dbeafe; color: #1d4ed8; } +.jf-prest-internasional { background: #fce7f3; color: #be185d; } +.jf-prest-publikasi { background: #dcfce7; color: #15803d; } +.jf-prest-penghargaan { background: #fef3c7; color: #92400e; } +.jf-prest-meta { display: flex; gap: .7rem; font-size: .72rem; color: #94a3b8; flex-wrap: wrap; } + +/* ===================================================== + STUDY CLUB (E) + ===================================================== */ +.jf-sc-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + margin-bottom: 2rem; +} +.jf-sc-card { + background: var(--white); + border-radius: var(--radius); + border: 1px solid #e8eef5; + padding: 2rem; + transition: all .3s; + position: relative; + overflow: hidden; +} +.jf-sc-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 4px; + background: linear-gradient(90deg, var(--navy), var(--blue), var(--sky)); + transform: scaleX(0); + transform-origin: left; + transition: transform .35s ease; +} +.jf-sc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } +.jf-sc-card:hover::before { transform: scaleX(1); } +.jf-sc-icon { + width: 56px; height: 56px; + border-radius: 1rem; + display: flex; align-items: center; justify-content: center; + font-size: 1.6rem; + margin-bottom: 1.25rem; + transition: transform .3s; +} +.jf-sc-card:hover .jf-sc-icon { transform: scale(1.1) rotate(-5deg); } +.jf-sc-name { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin-bottom: .15rem; } +.jf-sc-alias { font-size: .75rem; color: var(--gold); font-weight: 700; margin-bottom: .85rem; } +.jf-sc-card p { font-size: .84rem; color: var(--slate); line-height: 1.7; } + +.jf-sc-cta { + background: linear-gradient(135deg, var(--navy), var(--blue)); + border-radius: var(--radius); + padding: 2rem 2.5rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + box-shadow: 0 8px 32px rgba(0,49,80,.25); + position: relative; + overflow: hidden; +} +.jf-sc-cta::before { + content: ''; + position: absolute; + right: -80px; top: -80px; + width: 200px; height: 200px; + background: rgba(254,180,1,.1); + border-radius: 50%; +} +.jf-sc-cta::after { + content: ''; + position: absolute; + right: 20px; bottom: -60px; + width: 150px; height: 150px; + background: rgba(255,255,255,.04); + border-radius: 50%; +} +.jf-sc-cta-left { position: relative; z-index: 1; } +.jf-sc-cta-left strong { + display: block; + font-size: 1.15rem; font-weight: 800; + color: var(--white); + margin-bottom: .4rem; +} +.jf-sc-cta-left span { font-size: .85rem; color: rgba(255,255,255,.7); line-height: 1.6; } +.jf-cta-button { + display: inline-flex; + align-items: center; + gap: .5rem; + background: var(--gold); + color: var(--navy); + font-size: .85rem; font-weight: 800; + padding: .85rem 1.75rem; + border-radius: .75rem; + white-space: nowrap; + transition: all .2s; + position: relative; z-index: 1; + box-shadow: 0 4px 20px rgba(254,180,1,.3); +} +.jf-cta-button:hover { background: #ffd133; transform: scale(1.04); box-shadow: 0 6px 28px rgba(254,180,1,.5); } + +/* ===================================================== + KARIR (F) + ===================================================== */ +.jf-karir-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 5rem; + align-items: center; +} +.jf-karir-headline-italic { + font-size: 1.05rem; + font-style: italic; + color: var(--navy); + font-weight: 600; + border-left: 3px solid var(--gold); + padding-left: 1rem; + margin-bottom: 1.25rem; + line-height: 1.6; +} +.jf-karir-left p { + font-size: .9rem; + color: var(--slate); + line-height: 1.8; + margin-bottom: 1rem; +} +.jf-karir-other strong { + display: block; + font-size: .68rem; font-weight: 800; + letter-spacing: .14em; text-transform: uppercase; + color: #94a3b8; + margin-bottom: .7rem; +} +.jf-chip-wrap { display: flex; flex-wrap: wrap; gap: .4rem; } +.jf-chip { + display: inline-block; + background: #f0f7ff; + color: #0369a1; + border: 1px solid #bae6fd; + border-radius: 2rem; + padding: .28rem .85rem; + font-size: .74rem; font-weight: 600; + transition: all .2s; +} +.jf-chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); } + +.jf-karir-right { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} +.jf-karir-card { + border-radius: var(--radius); + padding: 1.6rem; + color: #fff; + transition: all .3s; + position: relative; + overflow: hidden; +} +.jf-karir-card::before { + content: ''; + position: absolute; + bottom: -30px; right: -30px; + width: 100px; height: 100px; + background: rgba(255,255,255,.07); + border-radius: 50%; + transition: transform .3s; +} +.jf-karir-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.25); } +.jf-karir-card:hover::before { transform: scale(2); } +.jf-karir-navy { background: linear-gradient(135deg, #002240, var(--navy), var(--blue)); } +.jf-karir-purple { background: linear-gradient(135deg, #4c1d95, #7c3aed, #a855f7); } +.jf-karir-green { background: linear-gradient(135deg, #064e3b, #059669, #34d399); } +.jf-karir-orange { background: linear-gradient(135deg, #78350f, #d97706, #fbbf24); } +.jf-kc-title { font-size: .95rem; font-weight: 800; margin-bottom: .75rem; } +.jf-kc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; } +.jf-kc-chips span { + background: rgba(255,255,255,.18); + color: #fff; + font-size: .67rem; font-weight: 600; + padding: .18rem .6rem; + border-radius: 2rem; + border: 1px solid rgba(255,255,255,.25); +} +.jf-kc-company { font-size: .7rem; color: rgba(255,255,255,.6); margin-top: .4rem; } + +/* ===================================================== + ALUMNI (G) + ===================================================== */ +.jf-alumni-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.75rem; +} +.jf-alumni-card { + background: var(--white); + border: 1px solid #e8eef5; + border-radius: var(--radius); + padding: 1.75rem; + transition: all .3s; + position: relative; + overflow: hidden; +} +.jf-alumni-card::after { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: linear-gradient(90deg, var(--navy), var(--gold)); + transform: scaleX(0); + transform-origin: left; + transition: transform .35s; +} +.jf-alumni-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } +.jf-alumni-card:hover::after { transform: scaleX(1); } +.jf-alumni-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1.25rem; +} +.jf-alumni-avatar { + width: 48px; height: 48px; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + font-size: .82rem; font-weight: 900; + color: #fff; flex-shrink: 0; + box-shadow: 0 4px 12px rgba(0,0,0,.2); +} +.jf-alumni-name { font-size: .97rem; font-weight: 800; color: var(--navy); } +.jf-alumni-batch { font-size: .72rem; color: #94a3b8; margin-top: .15rem; } +.jf-alumni-photo-placeholder { + width: 100%; height: 150px; + background: linear-gradient(135deg, #f0f4f8, #e2e8f0); + border-radius: .85rem; + display: flex; align-items: center; justify-content: center; + margin-bottom: 1rem; + font-size: 2.5rem; + opacity: 1; + overflow: hidden; +} +.jf-alumni-roles { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; } +.jf-alumni-roles span { + background: #eff6ff; color: #1d4ed8; + font-size: .68rem; font-weight: 600; + padding: .22rem .7rem; border-radius: 2rem; +} +.jf-alumni-card p { font-size: .82rem; color: var(--slate); line-height: 1.7; margin-bottom: 1rem; } +.jf-alumni-divider { + height: 2px; + background: linear-gradient(90deg, var(--navy), var(--gold), transparent); + border-radius: 2px; +} + +/* ===================================================== + INFRASTRUKTUR (H) β€” DARK + ===================================================== */ +.jf-infra-line { + width: 56px; height: 3px; + background: linear-gradient(90deg, var(--gold), var(--sky)); + border-radius: 2px; + margin: 1rem auto 0; +} +.jf-infra-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; +} +.jf-infra-card { + border-radius: var(--radius); + padding: 2rem 1.5rem; + color: #fff; + position: relative; + overflow: hidden; + transition: transform .3s; + border: 1px solid rgba(255,255,255,.08); +} +.jf-infra-card::after { + content: ''; + position: absolute; + bottom: -40px; right: -40px; + width: 120px; height: 120px; + background: rgba(255,255,255,.06); + border-radius: 50%; + transition: transform .4s; +} +.jf-infra-card:hover { transform: translateY(-6px); } +.jf-infra-card:hover::after { transform: scale(2.2); } +.jf-infra-icon { font-size: 2.2rem; margin-bottom: 1rem; } +.jf-infra-name { font-size: 1.05rem; font-weight: 800; margin-bottom: .6rem; } +.jf-infra-card p { font-size: .8rem; opacity: .8; line-height: 1.65; margin-bottom: 1.25rem; } +.jf-infra-stat { + font-size: .7rem; opacity: .7; + border-top: 1px solid rgba(255,255,255,.15); + padding-top: .85rem; +} +.jf-infra-stat span { font-size: 1rem; font-weight: 800; opacity: 1; display: block; margin-bottom: .1rem; } + +.jf-license-bar { + border-top: 1px solid rgba(255,255,255,.08); + padding-top: 1.75rem; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .85rem; +} +.jf-lic-label { + font-size: .68rem; font-weight: 700; + color: rgba(255,255,255,.45); + text-transform: uppercase; letter-spacing: .12em; + white-space: nowrap; +} +.jf-lic-chips { display: flex; flex-wrap: wrap; gap: .4rem; } +.jf-lic-chips span { + background: rgba(255,255,255,.08); + color: rgba(255,255,255,.75); + border: 1px solid rgba(255,255,255,.12); + border-radius: 2rem; + font-size: .68rem; font-weight: 600; + padding: .22rem .8rem; + transition: all .2s; +} +.jf-lic-chips span:hover { background: rgba(255,255,255,.18); color: #fff; } + +/* ===================================================== + MITRA (I) + ===================================================== */ +.jf-mitra-group-title { + font-size: .68rem; font-weight: 800; + letter-spacing: .16em; text-transform: uppercase; + color: #94a3b8; + margin-bottom: 1rem; + padding-bottom: .5rem; + display: flex; + align-items: center; + gap: .75rem; +} +.jf-mitra-group-title::after { + content: ''; + flex: 1; height: 1px; + background: linear-gradient(90deg, var(--gold), transparent); +} +.jf-mitra-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: .85rem; + margin-bottom: 2rem; +} +.jf-mitra-grid-gov { grid-template-columns: repeat(5, 1fr); } +.jf-mitra-card { + background: var(--white); + border: 1px solid #e8eef5; + border-radius: .85rem; + padding: 1rem .75rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + min-height: 72px; + gap: .4rem; + transition: all .25s; +} +.jf-mitra-card:hover { + border-color: var(--blue); + box-shadow: 0 6px 20px rgba(0,94,184,.1); + transform: translateY(-3px); +} +.jf-mitra-logo { font-size: 1.5rem; } +.jf-mitra-name { font-size: .68rem; font-weight: 600; color: var(--slate); line-height: 1.35; } + +/* ===================================================== + LIFE AT (J) + ===================================================== */ +.jf-life-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 1.25rem; +} +.jf-life-card { + border-radius: var(--radius); + padding: 2.5rem 2rem; + color: #fff; + min-height: 200px; + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; + overflow: hidden; + transition: transform .3s; +} +.jf-life-card::before { + content: ''; + position: absolute; inset: 0; + background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 60%); +} +.jf-life-card:hover { transform: translateY(-4px); } +.jf-life-tagline { + font-size: .85rem; + font-style: italic; + color: var(--gold); + margin-bottom: 1rem; + opacity: .9; + line-height: 1.6; + position: relative; z-index: 1; +} +.jf-life-label { + font-size: 1.05rem; font-weight: 800; + margin-bottom: .45rem; + position: relative; z-index: 1; +} +.jf-life-card p { font-size: .8rem; opacity: .8; line-height: 1.55; position: relative; z-index: 1; } + +/* ===================================================== + CTA / KONTAK (K) + ===================================================== */ +.jf-cta-section { + background: linear-gradient(150deg, #060e1c 0%, #003150 45%, #0a4a7a 100%); + padding: 6rem 0; + position: relative; + overflow: hidden; +} +.jf-cta-section::before { + content: ''; + position: absolute; + top: -30%; right: -5%; + width: 600px; height: 600px; + background: radial-gradient(circle, rgba(0,94,184,.18) 0%, transparent 65%); + pointer-events: none; +} +.jf-cta-section::after { + content: ''; + position: absolute; + bottom: -20%; left: 10%; + width: 400px; height: 400px; + background: radial-gradient(circle, rgba(254,180,1,.06) 0%, transparent 65%); + pointer-events: none; +} +.jf-cta-inner { + display: grid; + grid-template-columns: 1fr 440px; + gap: 5rem; + align-items: center; + position: relative; + z-index: 1; +} +.jf-cta-left .jf-badge { + background: rgba(254,180,1,.12); + color: var(--gold); + border: 1px solid rgba(254,180,1,.3); + clip-path: none; + border-radius: 2rem; +} +.jf-cta-title { + font-size: clamp(2rem, 4vw, 2.8rem); + font-weight: 900; + color: #fff; + line-height: 1.15; + margin-bottom: 1.15rem; + letter-spacing: -.02em; +} +.jf-cta-highlight { color: var(--gold); } +.jf-cta-left p { + font-size: .92rem; + color: rgba(255,255,255,.65); + line-height: 1.8; + margin-bottom: 2.25rem; + max-width: 480px; +} +.jf-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; } +.jf-btn-yellow { + display: inline-flex; align-items: center; gap: .5rem; + background: var(--gold); + color: var(--navy); + font-size: .88rem; font-weight: 800; + padding: .9rem 2rem; + border-radius: .75rem; + transition: all .25s; + box-shadow: 0 4px 24px rgba(254,180,1,.3); +} +.jf-btn-yellow:hover { background: #ffd133; transform: translateY(-3px); box-shadow: 0 8px 36px rgba(254,180,1,.45); } +.jf-btn-green { + display: inline-flex; align-items: center; gap: .5rem; + background: #22c55e; + color: #fff; + font-size: .88rem; font-weight: 800; + padding: .9rem 2rem; + border-radius: .75rem; + transition: all .25s; +} +.jf-btn-green:hover { background: #16a34a; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(34,197,94,.4); } + +/* Kontak card */ +.jf-kontak-card { + background: rgba(255,255,255,.07); + border: 1px solid rgba(255,255,255,.12); + border-radius: var(--radius); + padding: 2.25rem; + backdrop-filter: blur(16px); +} +.jf-kontak-title { + font-size: .72rem; font-weight: 800; + color: #fff; + letter-spacing: .16em; text-transform: uppercase; + margin-bottom: 1.75rem; + padding-bottom: .85rem; + border-bottom: 1px solid rgba(255,255,255,.12); + display: flex; + align-items: center; + gap: .5rem; +} +.jf-kontak-title::before { content: 'πŸ“¬'; font-size: 1rem; } +.jf-kontak-list { display: flex; flex-direction: column; gap: 1.25rem; } +.jf-kontak-item { display: flex; align-items: flex-start; gap: 1rem; } +.jf-kontak-icon { + width: 38px; height: 38px; + background: rgba(255,255,255,.1); + border-radius: .65rem; + display: flex; align-items: center; justify-content: center; + font-size: 1rem; flex-shrink: 0; + border: 1px solid rgba(255,255,255,.1); +} +.jf-kontak-label { + font-size: .65rem; font-weight: 700; + letter-spacing: .12em; text-transform: uppercase; + color: rgba(255,255,255,.45); + margin-bottom: .3rem; +} +.jf-kontak-val { font-size: .84rem; color: rgba(255,255,255,.88); line-height: 1.55; } +.jf-kontak-val small { color: rgba(255,255,255,.5); font-size: .72rem; } + +/* ===================================================== + ANIMATIONS + ===================================================== */ +@keyframes jfFadeUp { + from { opacity: 0; transform: translateY(28px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes jfFadeIn { + from { opacity: 0; } + to { opacity: 1; } +} +@keyframes jfSlideRight { + from { opacity: 0; transform: translateX(-20px); } + to { opacity: 1; transform: translateX(0); } +} + +/* ===================================================== + RESPONSIVE + ===================================================== */ +@media (max-width: 1200px) { + .jf-infra-grid { grid-template-columns: repeat(2, 1fr); } + .jf-mitra-grid { grid-template-columns: repeat(3, 1fr); } + .jf-mitra-grid-gov { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 1024px) { + .jf-about-layout { grid-template-columns: 1fr; } + .jf-timeline-card { position: static; max-height: none; } + .jf-stats-grid { grid-template-columns: repeat(2, 1fr); } + .jf-karir-layout { grid-template-columns: 1fr; gap: 3rem; } + .jf-cta-inner { grid-template-columns: 1fr; gap: 3rem; } + .jf-life-grid { grid-template-columns: 1fr 1fr; } + .jf-life-card.jf-life-big { grid-column: span 2; } +} +@media (max-width: 768px) { + .jf-hero-headline { font-size: 2.2rem; } + .jf-section { padding: 4rem 0; } + .jf-prestasi-grid { grid-template-columns: 1fr; } + .jf-sc-grid { grid-template-columns: 1fr; } + .jf-alumni-grid { grid-template-columns: 1fr; } + .jf-stats-row2 { grid-template-columns: 1fr; } + .jf-karir-right { grid-template-columns: 1fr; } + .jf-life-grid { grid-template-columns: 1fr; } + .jf-life-card.jf-life-big { grid-column: span 1; } + .jf-sc-cta { flex-direction: column; align-items: flex-start; } + .jf-mitra-grid, .jf-mitra-grid-gov { grid-template-columns: repeat(2, 1fr); } + .jf-hero-stats { flex-direction: column; align-items: flex-start; gap: 1rem; } + .jf-hs-div { display: none; } + .jf-hs-item { padding: 0; } + .jf-cta-title { font-size: 1.9rem; } +} + +/* ===================================================== + WHITE TEXT FIXES β€” Dark Background Sections + ===================================================== */ + + + +/* Visi card (navy gradient) */ +.jf-vm-visi, +.jf-vm-visi * { color: white !important; } +.jf-vm-visi .jf-vm-label { color: #feb401 !important; } + +/* Infra cards */ +.jf-infra-card, +.jf-infra-card * { color: white !important; } +.jf-infra-stat { opacity: 1 !important; color: rgba(255,255,255,.85) !important; } +.jf-infra-stat span { color: white !important; font-weight: 800; } + +/* Karir cards */ +.jf-karir-card, +.jf-karir-card * { color: white !important; } +.jf-kc-company { color: rgba(255,255,255,.65) !important; } + +/* Study Club CTA */ +.jf-sc-cta .jf-sc-cta-left strong, +.jf-sc-cta .jf-sc-cta-left span { color: white !important; } +.jf-sc-cta .jf-cta-button { color: #003150 !important; } + +/* Life cards */ +.jf-life-card, +.jf-life-card * { color: white !important; } +.jf-life-tagline { color: #feb401 !important; } +.jf-life-card p { color: rgba(255,255,255,.82) !important; } + +/* Dark section title/sub */ +.jf-section-dark .jf-section-title { color: white !important; } +.jf-section-dark .jf-section-sub { color: rgba(255,255,255,.7) !important; } + +/* CTA section */ +.jf-cta-section .jf-cta-title, +.jf-cta-section .jf-cta-left p, +.jf-cta-section .jf-kontak-val, +.jf-cta-section .jf-kontak-title { color: white !important; } +.jf-cta-highlight { color: #feb401 !important; } +.jf-cta-section .jf-cta-left p { color: rgba(255,255,255,.7) !important; } +.jf-cta-section .jf-kontak-label { color: rgba(255,255,255,.5) !important; } +.jf-cta-section .jf-kontak-val small { color: rgba(255,255,255,.5) !important; } + +/* License bar (dark section) */ +.jf-lic-label { color: rgba(255,255,255,.55) !important; } +.jf-lic-chips span { color: rgba(255,255,255,.8) !important; } + +/* Timeline title dots (ensure visibility) */ +.jf-timeline-title { color: #64748b; } +.jf-tl-year { color: #feb401; } +.jf-tl-content strong { color: #003150; } +.jf-tl-content span { color: #475569; } + +/* ---- Reset & Base ---- */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +body { font-family: 'Inter', 'Segoe UI', sans-serif; color: #1e293b; background: #fff; } +img { max-width: 100%; display: block; } +a { text-decoration: none; } + +/* ---- Badge ---- */ +.jf-badge { + display: inline-block; + background: #feb401; + color: #003150; + font-size: 0.62rem; + font-weight: 800; + letter-spacing: 0.18em; + text-transform: uppercase; + padding: 0.28rem 0.85rem; + border-radius: 0; + margin-bottom: 0.85rem; +} + +/* ===================================================== + HERO SECTION + ===================================================== */ +.jf-hero { + background: #fff; + padding: 3.5rem 0 4rem; + border-bottom: 1px solid #e2e8f0; +} +.jf-hero-inner { + display: grid; + grid-template-columns: 1fr 360px; + gap: 3.5rem; + align-items: start; +} +.jf-hero-left h1 { + font-size: clamp(1.6rem, 3.5vw, 2.4rem); + font-weight: 800; + color: #0f172a; + line-height: 1.2; + margin-bottom: 1.25rem; +} +.jf-hero-left p { + font-size: 0.95rem; + color: #475569; + line-height: 1.75; + margin-bottom: 0.85rem; +} +.jf-hero-visi { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-top: 1.75rem; +} +.jf-visi-card { + display: flex; + align-items: flex-start; + gap: 1rem; + background: #f8fafc; + border-left: 4px solid #003150; + border-radius: 0 0.75rem 0.75rem 0; + padding: 0.9rem 1.1rem; +} +.jf-visi-icon { + font-size: 1.3rem; + flex-shrink: 0; + margin-top: 0.1rem; +} +.jf-visi-label { + font-size: 0.7rem; + font-weight: 800; + letter-spacing: 0.14em; + text-transform: uppercase; + color: #003150; + margin-bottom: 0.3rem; +} +.jf-visi-text { + font-size: 0.875rem; + color: #475569; + line-height: 1.6; +} + +/* Timeline card (hero right) */ +.jf-timeline-card { + background: #fff; + border: 1px solid #e2e8f0; + border-radius: 1.25rem; + padding: 1.75rem; + box-shadow: 0 4px 24px rgba(0,49,80,0.08); + position: sticky; + top: 1.5rem; +} +.jf-timeline-title { + font-size: 0.7rem; + font-weight: 800; + letter-spacing: 0.18em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid #feb401; +} +.jf-timeline-list { + display: flex; + flex-direction: column; + gap: 0; +} +.jf-tl-item { + display: grid; + grid-template-columns: 44px 16px 1fr; + gap: 0 0.75rem; + align-items: flex-start; + padding-bottom: 1.4rem; + position: relative; +} +.jf-tl-item:last-child { padding-bottom: 0; } +.jf-tl-year { + font-size: 0.72rem; + font-weight: 800; + color: #feb401; + padding-top: 0.1rem; + text-align: right; +} +.jf-tl-dot { + width: 12px; + height: 12px; + background: #003150; + border: 3px solid #feb401; + border-radius: 50%; + margin-top: 0.15rem; + position: relative; + z-index: 1; + flex-shrink: 0; +} +.jf-tl-item:not(:last-child) .jf-tl-dot::after { + content: ''; + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + width: 2px; + height: calc(1.4rem + 12px); + background: #e2e8f0; +} +.jf-tl-content strong { + display: block; + font-size: 0.85rem; + font-weight: 700; + color: #0f172a; + margin-bottom: 0.2rem; +} +.jf-tl-content span { + font-size: 0.78rem; + color: #64748b; + line-height: 1.5; +} + +/* ===================================================== + SHARED SECTION STYLES + ===================================================== */ +.jf-section { + padding: 5rem 0; +} +.jf-section-light { background: #f8fafc; } +.jf-section-white { background: #ffffff; } +.jf-section-dark { background: #0a1628; } + +.jf-section-header { margin-bottom: 2.75rem; } +.jf-center { text-align: center; } +.jf-section-title { + font-size: clamp(1.6rem, 3.5vw, 2.2rem); + font-weight: 800; + color: #0f172a; + line-height: 1.2; + margin-bottom: 0.85rem; +} +.jf-section-sub { + max-width: 600px; + margin: 0 auto; + font-size: 0.9rem; + color: #64748b; + line-height: 1.7; +} + +/* ===================================================== + STATS SECTION + ===================================================== */ +.jf-stats-grid { + display: grid; + grid-template-columns: repeat(, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; + justify-content: center; +} +.jf-stat-card { + background: #fff; + border-radius: 1rem; + padding: 1.75rem 1.25rem; + text-align: center; + box-shadow: 0 2px 16px rgba(0,0,0,0.06); + border-bottom: 4px solid transparent; + transition: transform 0.25s, box-shadow 0.25s; +} +.jf-stat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.12); } +.jf-stat-blue { border-color: #005eb8; } +.jf-stat-yellow{ border-color: #feb401; } +.jf-stat-cyan { border-color: #00b5e2; } +.jf-stat-green { border-color: #10b981; } +.jf-stat-num { + font-size: 2.4rem; + font-weight: 900; + line-height: 1; + margin-bottom: 0.4rem; +} +.jf-stat-blue .jf-stat-num { color: #005eb8; } +.jf-stat-yellow .jf-stat-num{ color: #feb401; } +.jf-stat-cyan .jf-stat-num { color: #00b5e2; } +.jf-stat-green .jf-stat-num { color: #10b981; } +.jf-stat-label { + font-size: 0.8rem; + font-weight: 700; + color: #1e293b; + margin-bottom: 0.2rem; +} +.jf-stat-sub { font-size: 0.72rem; color: #94a3b8; } + +/* Stats row 2 */ +.jf-stats-row2 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.jf-stat-row-card { + background: #fff; + border-radius: 1rem; + padding: 1.5rem; + box-shadow: 0 2px 12px rgba(0,0,0,0.06); + border: 1px solid #e2e8f0; +} +.jf-stat-row-label { + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.4rem; +} +.jf-stat-row-num { + font-size: 1.7rem; + font-weight: 900; + color: #005eb8; + margin-bottom: 1rem; +} +.jf-prog-wrap { + display: flex; + align-items: center; + gap: 0.65rem; + margin-bottom: 0.5rem; + font-size: 0.72rem; + color: #64748b; +} +.jf-prog-bar { + flex: 1; + height: 6px; + background: #e2e8f0; + border-radius: 999px; + overflow: hidden; +} +.jf-prog-fill { + height: 100%; + border-radius: 999px; +} +.jf-link-btn { + display: inline-block; + margin-top: 0.85rem; + font-size: 0.78rem; + font-weight: 700; + color: #005eb8; + border: 1.5px solid #005eb8; + border-radius: 2rem; + padding: 0.35rem 1rem; + transition: all 0.2s; +} +.jf-link-btn:hover { background: #005eb8; color: #fff; } + +/* ===================================================== + PENCAPAIAN / PRESTASI + ===================================================== */ +.jf-filter-tabs { + display: flex; + gap: 0.5rem; + justify-content: center; + margin-bottom: 2rem; + flex-wrap: wrap; +} +.jf-tab-btn { + padding: 0.45rem 1.2rem; + border-radius: 2rem; + border: 1.5px solid #e2e8f0; + background: #fff; + font-size: 0.8rem; + font-weight: 600; + color: #475569; + cursor: pointer; + transition: all 0.2s; +} +.jf-tab-btn:hover { border-color: #003150; color: #003150; } +.jf-tab-active { background: #003150 !important; color: #fff !important; border-color: #003150 !important; } + +.jf-prestasi-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; +} +.jf-prestasi-card { + background: #fff; + border: 1px solid #e2e8f0; + border-left: 4px solid #e2e8f0; + border-radius: 0 1rem 1rem 0; + padding: 1.5rem; + transition: all 0.25s; +} +.jf-prestasi-card:hover { + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0,0,0,0.09); + border-left-color: #feb401; +} +.jf-prestasi-card h4 { + font-size: 0.95rem; + font-weight: 700; + color: #0f172a; + margin: 0.6rem 0 0.5rem; +} +.jf-prestasi-card p { + font-size: 0.83rem; + color: #475569; + line-height: 1.6; + margin-bottom: 0.75rem; +} +.jf-prest-badge { + display: inline-block; + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: 0.2rem 0.65rem; + border-radius: 2rem; +} +.jf-prest-nasional { background: #dbeafe; color: #1d4ed8; } +.jf-prest-internasional{ background: #fce7f3; color: #be185d; } +.jf-prest-publikasi { background: #dcfce7; color: #15803d; } +.jf-prest-penghargaan { background: #fef3c7; color: #92400e; } +.jf-prest-meta { + display: flex; + gap: 0.75rem; + font-size: 0.73rem; + color: #94a3b8; +} + +/* ===================================================== + STUDY CLUB + ===================================================== */ +.jf-sc-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; +} +.jf-sc-card { + background: #fff; + border: 1px solid #e2e8f0; + border-top: 4px solid transparent; + border-radius: 0 0 1rem 1rem; + padding: 1.75rem 1.5rem; + transition: all 0.25s; +} +.jf-sc-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 32px rgba(0,0,0,0.09); + border-top-color: #feb401; +} +.jf-sc-icon { + width: 52px; + height: 52px; + border-radius: 0.85rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + margin-bottom: 1rem; +} +.jf-sc-name { + font-size: 1rem; + font-weight: 700; + color: #0f172a; + margin-bottom: 0.15rem; +} +.jf-sc-alias { + font-size: 0.75rem; + color: #feb401; + font-weight: 700; + margin-bottom: 0.75rem; +} +.jf-sc-card p { + font-size: 0.85rem; + color: #475569; + line-height: 1.65; +} + +/* Study club CTA banner */ +.jf-sc-cta { + background: #feb401; + border-radius: 1rem; + padding: 1.5rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; +} +.jf-sc-cta-left strong { + display: block; + font-size: 1rem; + font-weight: 800; + color: #003150; + margin-bottom: 0.3rem; +} +.jf-sc-cta-left span { + font-size: 0.83rem; + color: #003150; + opacity: 0.85; +} +.jf-cta-button { + display: inline-block; + background: #3fa4e3; + color: #fff; + font-size: 0.8rem; + font-weight: 700; + padding: 0.65rem 1.5rem; + border-radius: 0.5rem; + white-space: nowrap; + transition: background 0.2s, transform 0.15s; +} +.jf-cta-button:hover { background: #005eb8; transform: scale(1.03); } + +/* ===================================================== + KARIR / PROSPEK + ===================================================== */ +.jf-karir-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} +.jf-karir-left .jf-section-title { margin-bottom: 1rem; } +.jf-karir-left p { + font-size: 0.9rem; + color: #475569; + line-height: 1.75; + margin-bottom: 1.25rem; +} +.jf-karir-stat { + display: flex; + flex-direction: column; + gap: 0.65rem; + margin-bottom: 1.5rem; +} +.jf-ks-item { + display: flex; + align-items: center; + gap: 0.75rem; + background: #f8fafc; + border-radius: 0.5rem; + padding: 0.65rem 1rem; + border-left: 3px solid #feb401; +} +.jf-ks-num { + font-size: 1.3rem; + font-weight: 900; + color: #005eb8; + flex-shrink: 0; + min-width: 2.5rem; +} +.jf-ks-label { font-size: 0.83rem; color: #475569; line-height: 1.4; } +.jf-karir-other strong { + display: block; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.6rem; +} +.jf-chip-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; } +.jf-chip { + display: inline-block; + background: #f0f9ff; + color: #0369a1; + border: 1px solid #bae6fd; + border-radius: 2rem; + padding: 0.25rem 0.8rem; + font-size: 0.75rem; + font-weight: 600; + transition: all 0.2s; +} +.jf-chip:hover { background: #005eb8; color: #fff; border-color: #005eb8; } + +/* Karir cards (right grid) */ +.jf-karir-right { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} +.jf-karir-card { + border-radius: 1rem; + padding: 1.5rem; + color: #fff; + transition: transform 0.25s, box-shadow 0.25s; +} +.jf-karir-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); } +.jf-karir-navy { background: linear-gradient(135deg, #003150, #005eb8); } +.jf-karir-purple{ background: linear-gradient(135deg, #7c3aed, #a855f7); } +.jf-karir-green { background: linear-gradient(135deg, #059669, #10b981); } +.jf-karir-orange{ background: linear-gradient(135deg, #d97706, #f59e0b); } +.jf-kc-title { + font-size: 1rem; + font-weight: 800; + margin-bottom: 0.85rem; +} +.jf-kc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } +.jf-kc-chips span { + background: rgba(255,255,255,0.2); + color: #fff; + font-size: 0.7rem; + font-weight: 600; + padding: 0.2rem 0.65rem; + border-radius: 2rem; + border: 1px solid rgba(255,255,255,0.3); +} + +/* ===================================================== + ALUMNI SECTION + ===================================================== */ +.jf-alumni-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} +.jf-alumni-card { + background: #fff; + border: 1px solid #e2e8f0; + border-radius: 1.25rem; + padding: 1.5rem; + transition: all 0.25s; +} +.jf-alumni-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 36px rgba(0,0,0,0.1); +} +.jf-alumni-header { + display: flex; + align-items: center; + gap: 0.85rem; + margin-bottom: 1rem; +} +.jf-alumni-avatar { + width: 44px; + height: 44px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; + font-weight: 800; + color: #fff; + flex-shrink: 0; +} +.jf-alumni-name { + font-size: 0.95rem; + font-weight: 700; + color: #005eb8; +} +.jf-alumni-batch { + font-size: 0.72rem; + color: #94a3b8; + margin-top: 0.1rem; +} +.jf-alumni-photo-placeholder { + width: 100%; + height: 140px; + background: #f1f5f9; + border-radius: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.85rem; + overflow: hidden; +} +.jf-alumni-photo-inner { font-size: 2.5rem; opacity: 1; } +.jf-alumni-roles { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-bottom: 0.75rem; +} +.jf-alumni-roles span { + background: #eff6ff; + color: #1d4ed8; + font-size: 0.68rem; + font-weight: 600; + padding: 0.2rem 0.65rem; + border-radius: 2rem; +} +.jf-alumni-card p { + font-size: 0.82rem; + color: #475569; + line-height: 1.65; + margin-bottom: 0.85rem; +} +.jf-alumni-divider { + height: 2px; + background: linear-gradient(90deg, #003150, #feb401, transparent); + border-radius: 1px; +} + +/* ===================================================== + INFRASTRUKTUR (DARK SECTION) + ===================================================== */ +.jf-infra-line { + width: 60px; + height: 3px; + background: #feb401; + margin: 0.85rem auto 0; +} +.jf-infra-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.25rem; + margin-bottom: 2rem; +} +.jf-infra-card { + border-radius: 1rem; + padding: 1.75rem 1.25rem; + color: #fff; + transition: transform 0.25s; +} +.jf-infra-card:hover { transform: translateY(-4px); } +.jf-infra-icon { font-size: 2rem; margin-bottom: 0.85rem; } +.jf-infra-name { + font-size: 1rem; + font-weight: 800; + margin-bottom: 0.65rem; +} +.jf-infra-card p { + font-size: 0.8rem; + opacity: 0.85; + line-height: 1.6; + margin-bottom: 1rem; +} +.jf-infra-stat { + font-size: 0.72rem; + opacity: 0.75; + border-top: 1px solid rgba(255,255,255,0.2); + padding-top: 0.75rem; +} +.jf-infra-stat span { + font-size: 1rem; + font-weight: 800; + opacity: 1; + display: block; +} + +/* License bar */ +.jf-license-bar { + border-top: 1px solid rgba(255,255,255,0.1); + padding-top: 1.5rem; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.75rem; +} +.jf-lic-label { + font-size: 0.72rem; + font-weight: 700; + color: rgba(255,255,255,0.55); + text-transform: uppercase; + letter-spacing: 0.1em; + white-space: nowrap; +} +.jf-lic-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } +.jf-lic-chips span { + background: rgba(255,255,255,0.1); + color: rgba(255,255,255,0.8); + border: 1px solid rgba(255,255,255,0.15); + border-radius: 2rem; + font-size: 0.7rem; + font-weight: 600; + padding: 0.2rem 0.75rem; + transition: all 0.2s; +} +.jf-lic-chips span:hover { + background: rgba(255,255,255,0.2); + color: #fff; +} + +/* ===================================================== + MITRA SECTION + ===================================================== */ +.jf-mitra-group-title { + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; + color: #64748b; + margin-bottom: 0.85rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid #feb401; + display: inline-block; +} +.jf-mitra-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 0.75rem; + margin-bottom: 1.75rem; +} +.jf-mitra-grid-gov { + grid-template-columns: repeat(5, 1fr); +} +.jf-mitra-card { + background: #fff; + border: 1px solid #e2e8f0; + border-radius: 0.75rem; + padding: 1rem 0.75rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + min-height: 70px; + transition: all 0.25s; + gap: 0.4rem; +} +.jf-mitra-card:hover { + border-color: #005eb8; + box-shadow: 0 4px 16px rgba(0,94,184,0.1); + transform: scale(1.03); +} +.jf-mitra-logo { font-size: 1.4rem; } +.jf-mitra-name { font-size: 0.7rem; font-weight: 600; color: #475569; line-height: 1.3; } + +/* ===================================================== + LIFE AT INFORMATIKA + ===================================================== */ +.jf-life-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 1.25rem; +} +.jf-life-card { + border-radius: 1.25rem; + padding: 2rem 1.5rem; + color: #fff; + min-height: 180px; + display: flex; + flex-direction: column; + justify-content: flex-end; + transition: transform 0.25s; +} +.jf-life-card:hover { transform: translateY(-3px); } +.jf-life-label { + font-size: 1rem; + font-weight: 800; + margin-bottom: 0.5rem; +} +.jf-life-card p { + font-size: 0.8rem; + opacity: 0.85; + line-height: 1.5; +} + +/* ===================================================== + CTA / KONTAK SECTION + ===================================================== */ +.jf-cta-section { + background: linear-gradient(135deg, #0a1628 0%, #003150 60%, #004a7c 100%); + padding: 5rem 0; + position: relative; + overflow: hidden; +} +.jf-cta-section::before { + content: ''; + position: absolute; + top: -60%; + right: -10%; + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(0,90,184,0.15) 0%, transparent 70%); + pointer-events: none; +} +.jf-cta-inner { + display: grid; + grid-template-columns: 1fr 420px; + gap: 4rem; + align-items: center; +} +.jf-cta-left .jf-badge { background: rgba(254,180,1,0.15); color: #feb401; border: 1px solid rgba(254,180,1,0.3); } +.jf-cta-title { + font-size: clamp(1.8rem, 3.5vw, 2.6rem); + font-weight: 800; + color: #fff; + line-height: 1.2; + margin-bottom: 1rem; +} +.jf-cta-highlight { color: #feb401; } +.jf-cta-left p { + font-size: 0.9rem; + color: rgba(255,255,255,0.7); + line-height: 1.75; + margin-bottom: 2rem; +} +.jf-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; } +.jf-btn-yellow { + display: inline-block; + background: #feb401; + color: #003150; + font-size: 0.85rem; + font-weight: 800; + padding: 0.8rem 1.75rem; + border-radius: 0.5rem; + transition: all 0.2s; +} +.jf-btn-yellow:hover { background: #ffc933; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(254,180,1,0.4); } +.jf-btn-green { + display: inline-block; + background: #22c55e; + color: #fff; + font-size: 0.85rem; + font-weight: 800; + padding: 0.8rem 1.75rem; + border-radius: 0.5rem; + transition: all 0.2s; +} +.jf-btn-green:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34,197,94,0.4); } + +/* Contact card */ +.jf-kontak-card { + background: rgba(255,255,255,0.08); + border: 1px solid rgba(255,255,255,0.15); + border-radius: 1.25rem; + padding: 2rem; + backdrop-filter: blur(10px); +} +.jf-kontak-title { + font-size: 0.85rem; + font-weight: 800; + color: #fff; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid rgba(255,255,255,0.15); +} +.jf-kontak-list { display: flex; flex-direction: column; gap: 1.1rem; } +.jf-kontak-item { display: flex; align-items: flex-start; gap: 0.9rem; } +.jf-kontak-icon { + width: 36px; + height: 36px; + background: rgba(255,255,255,0.1); + border-radius: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; + flex-shrink: 0; +} +.jf-kontak-label { + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(255,255,255,0.5); + margin-bottom: 0.25rem; +} +.jf-kontak-val { + font-size: 0.82rem; + color: rgba(255,255,255,0.9); + line-height: 1.5; +} +.jf-kontak-val small { color: rgba(255,255,255,0.5); font-size: 0.72rem; } + +/* ===================================================== + RESPONSIVE + ===================================================== */ +@media (max-width: 1024px) { + .jf-hero-inner { grid-template-columns: 1fr; } + .jf-timeline-card { position: static; } + .jf-stats-grid { grid-template-columns: repeat(2, 1fr); } + .jf-infra-grid { grid-template-columns: repeat(2, 1fr); } + .jf-karir-layout { grid-template-columns: 1fr; gap: 2.5rem; } + .jf-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; } + .jf-mitra-grid { grid-template-columns: repeat(3, 1fr); } + .jf-mitra-grid-gov { grid-template-columns: repeat(3, 1fr); } + .jf-life-grid { grid-template-columns: 1fr 1fr; } + .jf-life-card.jf-life-big { grid-column: span 2; } +} +@media (max-width: 768px) { + .jf-section { padding: 3.5rem 0; } + .jf-prestasi-grid { grid-template-columns: 1fr; } + .jf-sc-grid { grid-template-columns: 1fr; } + .jf-alumni-grid { grid-template-columns: 1fr; } + .jf-stats-row2 { grid-template-columns: 1fr; } + .jf-karir-right { grid-template-columns: 1fr; } + .jf-life-grid { grid-template-columns: 1fr; } + .jf-life-card.jf-life-big { grid-column: span 1; } + .jf-sc-cta { flex-direction: column; align-items: flex-start; } + .jf-mitra-grid { grid-template-columns: repeat(2, 1fr); } + .jf-mitra-grid-gov { grid-template-columns: repeat(2, 1fr); } +} \ No newline at end of file