{"id":1032,"date":"2025-04-09T13:01:47","date_gmt":"2025-04-09T13:01:47","guid":{"rendered":"https:\/\/staging.humi.co.id\/dev\/?page_id=1032"},"modified":"2025-11-10T06:39:51","modified_gmt":"2025-11-10T06:39:51","slug":"career","status":"publish","type":"page","link":"https:\/\/humi.co.id\/id\/career\/","title":{"rendered":"Karir"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1032\" class=\"elementor elementor-1032\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5b14e2a7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5b14e2a7\" data-element_type=\"section\" data-settings=\"{&quot;shape_divider_bottom&quot;:&quot;tilt&quot;,&quot;background_background&quot;:&quot;gradient&quot;,&quot;profecient_parallax_effects_y_css_unit&quot;:&quot;px&quot;,&quot;profecient_parallax_effects_y_start_responsive&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:40,&quot;sizes&quot;:&quot;&quot;},&quot;profecient_background_motion_effects_toggle&quot;:0,&quot;profecient_parallax_effects_y_start_responsive_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;profecient_parallax_effects_y_start_responsive_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;profecient_parallax_effects_y_end_responsive&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:&quot;&quot;},&quot;profecient_parallax_effects_y_end_responsive_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;profecient_parallax_effects_y_end_responsive_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;profecient_parallax_effects_y_animation_viewport&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;profecient_parallax_effects_y_relative_animation_viewport&quot;:&quot;element&quot;,&quot;profecient_mouse_effects_toggle&quot;:0}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1000 100\" preserveaspectratio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M0,6V0h1000v100L0,6z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e88c28a\" data-id=\"e88c28a\" data-element_type=\"column\" data-settings=\"{&quot;profecient_background_motion_effects_toggle&quot;:0,&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-14f0611 elementor-widget elementor-widget-heading\" data-id=\"14f0611\" data-element_type=\"widget\" data-settings=\"{&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u00b7 Karier \u00b7<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ae793c elementor-widget elementor-widget-jkit_animated_text\" data-id=\"1ae793c\" data-element_type=\"widget\" data-settings=\"{&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\" data-widget_type=\"jkit_animated_text.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"jeg-elementor-kit jkit-animated-text jeg_module___69f353793ee88\"  data-style=\"none\"><h2 class=\"animated-text\"><span class=\"normal-text style-color\"><\/span><span class=\"dynamic-wrapper style-gradient\"><span class=\"dynamic-text\">Saatnya Membangun Industri Maritim<\/span><\/span><span class=\"normal-text style-color\"><\/span><\/h2><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86a30d1 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"86a30d1\" data-element_type=\"widget\" data-settings=\"{&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"67\" data-end=\"347\">Kami menyadari pentingnya sumber daya manusia, oleh karena itu kami senantiasa mencari talenta-talenta unggul untuk bekerja sama dalam mencapai tujuan perusahaan untuk menjadi pemain kelas dunia di sektor maritim dan berkontribusi terhadap pengembangan industri maritim Indonesia.<\/p><p data-start=\"349\" data-end=\"489\">Kami menerapkan proses seleksi dengan kualifikasi dan kompetensi yang telah ditentukan dan setara antara wanita dan pria.<\/p><p data-start=\"491\" data-end=\"532\">Jelajahi tujuan karirmu dan bergabunglah bersama kami.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-8896ca2 e-flex e-con-boxed e-con e-parent\" data-id=\"8896ca2\" data-element_type=\"container\" data-settings=\"{&quot;profecient_background_motion_effects_toggle&quot;:0,&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-ddf63da e-con-full e-flex e-con e-child\" data-id=\"ddf63da\" data-element_type=\"container\" data-settings=\"{&quot;profecient_background_motion_effects_toggle&quot;:0,&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-527303f elementor-widget elementor-widget-shortcode\" data-id=\"527303f\" data-element_type=\"widget\" data-settings=\"{&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        \n<!-- HUMI Career Portal - Complete Widget (Standalone) -->\n<div id=\"humi-career-portal-standalone\" style=\"max-width: 1400px; margin: 0 auto; padding: 0 2rem;\">\n\n    <!-- Header Section -->\n    <div style=\"text-align: center; margin-bottom: 3rem; padding: 3rem 2rem; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 20px; border: 1px solid rgba(59, 130, 246, 0.2);\">\n        <h2 style=\"font-size: 2.25rem; font-weight: 800; color: #1e3a8a; margin: 0 0 1rem; line-height: 1.2;\">\n            Karir di PT Humpuss Maritim Internasional Tbk\n        <\/h2>\n        <p style=\"font-size: 1.1rem; color: #64748b; max-width: 900px; margin: 0 auto; line-height: 1.7;\">\n            Jelajahi peluang karier bersama PT Humpuss Maritim Internasional Tbk dan ambil bagian dalam membangun industri maritim. Kami mencari individu yang bersemangat dan siap untuk berkembang, berinovasi, dan memimpin dalam lingkungan yang dinamis.\n        <\/p>\n    <\/div>\n\n    <!-- Search Section -->\n    <div style=\"background: white; border-radius: 20px; padding: 3.5rem 4rem; box-shadow: 0 20px 60px rgba(30, 58, 138, 0.15); border: 1px solid rgba(30, 58, 138, 0.1); margin-bottom: 3rem;\">\n        <div style=\"display: flex; align-items: flex-end; gap: 2rem; flex-wrap: wrap;\">\n            <!-- Search Input -->\n            <div style=\"flex: 1; min-width: 280px;\">\n                <label style=\"font-weight: 600; color: #1e3a8a; margin-bottom: 0.75rem; font-size: 0.95rem; display: block;\">\n                    Temukan Pekerjaan\n                <\/label>\n                <input type=\"text\"\n                       id=\"humi-search-input\"\n                       placeholder=\"Jabatan, kata kunci, atau perusahaan\"\n                       style=\"border: 1px solid #cbd5e1; padding: 0.875rem 1rem; border-radius: 8px; font-size: 0.95rem; background: white; width: 100%; height: 48px; transition: all 0.3s ease;\"\n                       onfocus=\"this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)'\"\n                       onblur=\"this.style.borderColor='#cbd5e1'; this.style.boxShadow='none'\">\n            <\/div>\n\n            <!-- Location Select -->\n            <div style=\"flex: 0 0 auto; width: 200px;\">\n                <label style=\"font-weight: 600; color: #1e3a8a; margin-bottom: 0.75rem; font-size: 0.95rem; display: block;\">\n                    Lokasi\n                <\/label>\n                <select id=\"humi-location-select\"\n                        style=\"border: 1px solid #cbd5e1; padding: 0.875rem 1rem; border-radius: 8px; font-size: 0.95rem; background: white; cursor: pointer; width: 100%; height: 48px; transition: all 0.3s ease;\"\n                        onfocus=\"this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)'\"\n                        onblur=\"this.style.borderColor='#cbd5e1'; this.style.boxShadow='none'\">\n                    <option value=\"\">All cities<\/option>\n                <\/select>\n            <\/div>\n\n            <!-- Department Select -->\n            <div style=\"flex: 0 0 auto; width: 220px;\">\n                <label style=\"font-weight: 600; color: #1e3a8a; margin-bottom: 0.75rem; font-size: 0.95rem; display: block;\">\n                    Departemen\n                <\/label>\n                <select id=\"humi-department-select\"\n                        style=\"border: 1px solid #cbd5e1; padding: 0.875rem 1rem; border-radius: 8px; font-size: 0.95rem; background: white; cursor: pointer; width: 100%; height: 48px; transition: all 0.3s ease;\"\n                        onfocus=\"this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)'\"\n                        onblur=\"this.style.borderColor='#cbd5e1'; this.style.boxShadow='none'\">\n                    <option value=\"\">All Departments<\/option>\n                <\/select>\n            <\/div>\n\n            <!-- Search Button -->\n            <div style=\"flex: 0 0 auto;\">\n                <button id=\"humi-search-btn\"\n                        style=\"background: #3b82f6; border: none; padding: 0.875rem 2.5rem; font-weight: 600; border-radius: 8px; color: white; font-size: 0.95rem; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); height: 48px; white-space: nowrap; cursor: pointer; transition: all 0.3s ease;\"\n                        onmouseover=\"this.style.background='#2563eb'; this.style.boxShadow='0 4px 12px rgba(59, 130, 246, 0.4)'\"\n                        onmouseout=\"this.style.background='#3b82f6'; this.style.boxShadow='0 2px 8px rgba(59, 130, 246, 0.3)'\">\n                    Cari\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Results Header -->\n    <div style=\"margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center;\">\n        <h2 style=\"font-size: 1.75rem; font-weight: 700; color: #1e3a8a; margin: 0;\">\n            Available Positions\n        <\/h2>\n        <p id=\"humi-results-count\" style=\"color: #64748b; margin: 0; font-size: 0.95rem;\">\n            Loading...\n        <\/p>\n    <\/div>\n\n    <!-- Job List Container -->\n    <div id=\"humi-job-list\"><\/div>\n\n    <!-- Pagination -->\n    <div id=\"humi-pagination\" style=\"margin-top: 3rem; text-align: center;\"><\/div>\n<\/div>\n\n<!-- Popup Modal -->\n<div id=\"humi-popup-overlay\" style=\"display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 9999; align-items: center; justify-content: center;\">\n    <div id=\"humi-popup-container\" style=\"background: white; border-radius: 16px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\">\n        <!-- Close Button -->\n        <button id=\"humi-popup-close\" style=\"position: absolute; top: 1rem; right: 1rem; background: #ef4444; color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 10;\"\n                onmouseover=\"this.style.background='#dc2626'; this.style.transform='rotate(90deg)'\"\n                onmouseout=\"this.style.background='#ef4444'; this.style.transform='rotate(0)'\">\n            \u00d7\n        <\/button>\n\n        <!-- Popup Header -->\n        <div style=\"background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; padding: 2rem; border-radius: 16px 16px 0 0;\">\n            <h3 id=\"humi-popup-title\" style=\"margin: 0; font-size: 1.5rem; font-weight: 700;\">Loading...<\/h3>\n        <\/div>\n\n        <!-- Popup Body -->\n        <div style=\"padding: 2rem;\">\n            <div id=\"humi-popup-image-container\"><\/div>\n            <div id=\"humi-popup-content\" style=\"color: #334155; line-height: 1.7; font-size: 1rem;\"><\/div>\n        <\/div>\n\n        <!-- Popup Footer -->\n        <div style=\"padding: 0 2rem 2rem; display: flex; gap: 1rem; justify-content: flex-end;\">\n            <button id=\"humi-popup-close-btn\" style=\"background: #64748b; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s;\"\n                    onmouseover=\"this.style.background='#475569'\"\n                    onmouseout=\"this.style.background='#64748b'\">\n                Menutup\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n@keyframes scaleIn {\n    from {\n        opacity: 0;\n        transform: scale(0.9);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n#humi-popup-overlay {\n    animation: fadeIn 0.3s ease;\n}\n\n#humi-popup-container {\n    animation: scaleIn 0.3s ease;\n}\n\n@media (max-width: 768px) {\n    #humi-career-portal-standalone {\n        padding: 0 1rem !important;\n    }\n    \n    #humi-career-portal-standalone > div:nth-child(2) {\n        padding: 2rem 1.5rem !important;\n    }\n\n    #humi-career-portal-standalone > div:nth-child(2) > div {\n        flex-direction: column !important;\n    }\n\n    #humi-career-portal-standalone > div:nth-child(2) > div > div {\n        width: 100% !important;\n        flex: 1 !important;\n    }\n\n    #humi-popup-container {\n        width: 95% !important;\n        margin: 1rem;\n    }\n}\n<\/style>\n\n<script>\n(function() {\n    const API_URL = 'https:\/\/application.humi.biz.id\/api\/jobs.php';\n    const POPUP_API_URL = 'https:\/\/application.humi.biz.id\/api\/popup.php';\n    const DETAIL_URL = 'https:\/\/application.humi.biz.id\/vacancy\/detail.php';\n    const PER_PAGE = parseInt('3');\n\n    let allJobs = [];\n    let filteredJobs = [];\n    let currentPage = 1;\n    let currentLang = 'en';\n\n    \/\/ Fetch and show popup\n    async function fetchPopup() {\n        try {\n            const response = await fetch(`${POPUP_API_URL}?lang=${currentLang}`);\n            const data = await response.json();\n\n            if (data.success && data.data.enabled) {\n                const popup = data.data;\n\n                \/\/ Check if popup was already shown\n                const storageKey = 'humi_popup_shown';\n                const showFrequency = popup.show_frequency;\n                const now = new Date().getTime();\n\n                let shouldShow = true;\n                const lastShown = localStorage.getItem(storageKey);\n\n                if (lastShown) {\n                    const lastShownTime = parseInt(lastShown);\n                    const dayInMs = 24 * 60 * 60 * 1000;\n                    const weekInMs = 7 * dayInMs;\n\n                    if (showFrequency === 'once') {\n                        shouldShow = false;\n                    } else if (showFrequency === 'per_day' && (now - lastShownTime) < dayInMs) {\n                        shouldShow = false;\n                    } else if (showFrequency === 'per_week' && (now - lastShownTime) < weekInMs) {\n                        shouldShow = false;\n                    } else if (showFrequency === 'per_session' && sessionStorage.getItem(storageKey)) {\n                        shouldShow = false;\n                    }\n                }\n\n                if (shouldShow) {\n                    showPopup(popup);\n                    localStorage.setItem(storageKey, now.toString());\n                    sessionStorage.setItem(storageKey, 'true');\n                }\n            }\n        } catch (error) {\n            console.error('Error fetching popup:', error);\n        }\n    }\n\n    \/\/ Show popup\n    function showPopup(popup) {\n        document.getElementById('humi-popup-title').textContent = popup.title;\n        document.getElementById('humi-popup-content').innerHTML = popup.content.replace(\/\\n\/g, '<br>');\n\n        \/\/ Add image if exists\n        if (popup.image_url) {\n            const imgContainer = document.getElementById('humi-popup-image-container');\n            imgContainer.innerHTML = `<img decoding=\"async\" src=\"${popup.image_url}\" alt=\"${popup.title}\" style=\"width: 100%; border-radius: 8px; margin-bottom: 1.5rem;\">`;\n        }\n\n        const overlay = document.getElementById('humi-popup-overlay');\n        overlay.style.display = 'flex';\n\n        \/\/ Auto close\n        if (popup.auto_close_seconds > 0) {\n            setTimeout(() => {\n                closePopup();\n            }, popup.auto_close_seconds * 1000);\n        }\n    }\n\n    \/\/ Close popup\n    function closePopup() {\n        const overlay = document.getElementById('humi-popup-overlay');\n        overlay.style.display = 'none';\n    }\n\n    \/\/ Event listeners for popup\n    document.getElementById('humi-popup-close').addEventListener('click', closePopup);\n    document.getElementById('humi-popup-close-btn').addEventListener('click', closePopup);\n    document.getElementById('humi-popup-overlay').addEventListener('click', function(e) {\n        if (e.target === this) closePopup();\n    });\n    \n    \/\/ Fetch jobs from API\n    async function fetchJobs() {\n        try {\n            const response = await fetch(`${API_URL}?limit=100`);\n            const data = await response.json();\n            \n            if (data.success) {\n                allJobs = data.data.jobs;\n                filteredJobs = allJobs;\n                \n                \/\/ Populate filters\n                populateFilters();\n                \n                \/\/ Render jobs\n                renderJobs();\n            }\n        } catch (error) {\n            console.error('Error fetching jobs:', error);\n            document.getElementById('humi-job-list').innerHTML = \n                '<div style=\"text-align: center; padding: 3rem; color: #64748b;\">Error loading jobs. Please try again later.<\/div>';\n        }\n    }\n    \n    \/\/ Populate location and department filters\n    function populateFilters() {\n        const locations = [...new Set(allJobs.map(j => j.location))].sort();\n        const departments = [...new Set(allJobs.map(j => j.department))].sort();\n        \n        const locationSelect = document.getElementById('humi-location-select');\n        const departmentSelect = document.getElementById('humi-department-select');\n        \n        locations.forEach(loc => {\n            const option = document.createElement('option');\n            option.value = loc;\n            option.textContent = loc;\n            locationSelect.appendChild(option);\n        });\n        \n        departments.forEach(dept => {\n            const option = document.createElement('option');\n            option.value = dept;\n            option.textContent = dept;\n            departmentSelect.appendChild(option);\n        });\n    }\n    \n    \/\/ Filter jobs\n    function filterJobs() {\n        const search = document.getElementById('humi-search-input').value.toLowerCase();\n        const location = document.getElementById('humi-location-select').value;\n        const department = document.getElementById('humi-department-select').value;\n\n        filteredJobs = allJobs.filter(job => {\n            const matchSearch = !search ||\n                (job.title && job.title.toLowerCase().includes(search)) ||\n                (job.title_en && job.title_en.toLowerCase().includes(search)) ||\n                (job.title_id && job.title_id.toLowerCase().includes(search)) ||\n                (job.department && job.department.toLowerCase().includes(search));\n\n            const matchLocation = !location || job.location === location;\n            const matchDepartment = !department || job.department === department;\n\n            return matchSearch && matchLocation && matchDepartment;\n        });\n\n        currentPage = 1;\n        renderJobs();\n    }\n    \n    \/\/ Render jobs\n    function renderJobs() {\n        const container = document.getElementById('humi-job-list');\n        const start = (currentPage - 1) * PER_PAGE;\n        const end = start + PER_PAGE;\n        const pageJobs = filteredJobs.slice(start, end);\n        \n        \/\/ Update results count\n        const total = filteredJobs.length;\n        const showing = Math.min(end, total);\n        document.getElementById('humi-results-count').textContent = \n            `Showing ${start + 1}-${showing} of ${total} jobs`;\n        \n        \/\/ Render job cards\n        if (pageJobs.length === 0) {\n            container.innerHTML = `\n                <div style=\"text-align: center; padding: 3rem;\">\n                    <i class=\"fas fa-search\" style=\"font-size: 3rem; color: #cbd5e1; margin-bottom: 1rem;\"><\/i>\n                    <h4 style=\"color: #64748b; margin-bottom: 0.5rem;\">No jobs found matching your criteria.<\/h4>\n                    <p style=\"color: #94a3b8;\">Try adjusting your search filters or browse all available positions.<\/p>\n                <\/div>\n            `;\n        } else {\n            container.innerHTML = pageJobs.map(job => `\n                <div style=\"background: white; border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.75rem 2rem; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; cursor: pointer;\"\n                     onmouseover=\"this.style.borderColor='#1e3a8a'; this.style.boxShadow='0 8px 16px rgba(30, 58, 138, 0.15)'; this.style.transform='translateY(-2px)'\"\n                     onmouseout=\"this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'; this.style.transform='translateY(0)'\"\n                     onclick=\"window.open('${DETAIL_URL}?id=${job.slug || job.id}', '_blank')\">>\n                    <div style=\"flex: 1;\">\n                        <h5 style=\"margin: 0 0 0.75rem 0; font-size: 1.25rem; font-weight: 600; color: #1e3a8a;\">\n                            ${job.title || job.title_en || job.title_id || 'Position Available'}\n                        <\/h5>\n                        <div style=\"display: flex; gap: 2rem; color: #64748b; font-size: 0.95rem; align-items: center; flex-wrap: wrap;\">\n                            <span style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                                <i class=\"fas fa-map-marker-alt\" style=\"color: #3b82f6;\"><\/i>\n                                ${job.location || 'Location TBD'}\n                            <\/span>\n                            <span style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                                <i class=\"fas fa-building\" style=\"color: #3b82f6;\"><\/i>\n                                ${job.department || 'Department TBD'}\n                            <\/span>\n                            <span style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                                <i class=\"fas fa-clock\" style=\"color: #3b82f6;\"><\/i>\n                                ${job.employment_type ? job.employment_type.replace('_', ' ') : 'Full-time'}\n                            <\/span>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <a href=\"${DETAIL_URL}?id=${job.slug || job.id}\"\n                           target=\"_blank\"\n                           rel=\"noopener noreferrer\"\n                           style=\"background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); border: none; padding: 0.75rem 2.5rem; font-weight: 600; border-radius: 8px; color: white; min-width: 120px; box-shadow: 0 4px 6px rgba(30, 58, 138, 0.2); text-decoration: none; display: inline-block; transition: all 0.3s ease;\"\n                           onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 12px rgba(30, 58, 138, 0.3)'\"\n                           onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 6px rgba(30, 58, 138, 0.2)'\"\n                           onclick=\"event.stopPropagation()\">\n                            View Details\n                        <\/a>\n                    <\/div>\n                <\/div>\n            `).join('');\n        }\n        \n        \/\/ Render pagination\n        renderPagination();\n    }\n    \n    \/\/ Render pagination\n    function renderPagination() {\n        const totalPages = Math.ceil(filteredJobs.length \/ PER_PAGE);\n        const container = document.getElementById('humi-pagination');\n\n        if (totalPages <= 1) {\n            container.innerHTML = '';\n            return;\n        }\n\n        let html = '<div style=\"display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap;\">';\n\n        \/\/ Previous button\n        if (currentPage > 1) {\n            html += `<button onclick=\"humiGoToPage(${currentPage - 1})\" style=\"padding: 0.75rem 1.25rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 600; font-size: 0.9rem;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">\u2190 Previous<\/button>`;\n        }\n\n        \/\/ Page numbers\n        const maxVisible = 7;\n        let startPage = Math.max(1, currentPage - Math.floor(maxVisible \/ 2));\n        let endPage = Math.min(totalPages, startPage + maxVisible - 1);\n\n        if (endPage - startPage < maxVisible - 1) {\n            startPage = Math.max(1, endPage - maxVisible + 1);\n        }\n\n        \/\/ First page\n        if (startPage > 1) {\n            html += `<button onclick=\"humiGoToPage(1)\" style=\"padding: 0.75rem 1rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; min-width: 44px; font-weight: 600;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">1<\/button>`;\n            if (startPage > 2) {\n                html += `<span style=\"padding: 0.75rem 0.5rem; color: #64748b; font-weight: 600;\">...<\/span>`;\n            }\n        }\n\n        \/\/ Page numbers\n        for (let i = startPage; i <= endPage; i++) {\n            if (i === currentPage) {\n                html += `<button style=\"padding: 0.75rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 8px; font-weight: 600; min-width: 44px; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\">${i}<\/button>`;\n            } else {\n                html += `<button onclick=\"humiGoToPage(${i})\" style=\"padding: 0.75rem 1rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; min-width: 44px; font-weight: 600;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">${i}<\/button>`;\n            }\n        }\n\n        \/\/ Last page\n        if (endPage < totalPages) {\n            if (endPage < totalPages - 1) {\n                html += `<span style=\"padding: 0.75rem 0.5rem; color: #64748b; font-weight: 600;\">...<\/span>`;\n            }\n            html += `<button onclick=\"humiGoToPage(${totalPages})\" style=\"padding: 0.75rem 1rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; min-width: 44px; font-weight: 600;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">${totalPages}<\/button>`;\n        }\n\n        \/\/ Next button\n        if (currentPage < totalPages) {\n            html += `<button onclick=\"humiGoToPage(${currentPage + 1})\" style=\"padding: 0.75rem 1.25rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 600; font-size: 0.9rem;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">Next \u2192<\/button>`;\n        }\n\n        html += '<\/div>';\n        container.innerHTML = html;\n    }\n    \n    \/\/ Go to page\n    window.humiGoToPage = function(page) {\n        currentPage = page;\n        renderJobs();\n        document.getElementById('humi-career-portal-standalone').scrollIntoView({ behavior: 'smooth' });\n    };\n    \n    \/\/ Event listeners\n    document.getElementById('humi-search-btn').addEventListener('click', filterJobs);\n    document.getElementById('humi-search-input').addEventListener('keyup', function(e) {\n        if (e.key === 'Enter') filterJobs();\n    });\n    document.getElementById('humi-location-select').addEventListener('change', filterJobs);\n    document.getElementById('humi-department-select').addEventListener('change', filterJobs);\n\n    \/\/ Initialize\n    fetchJobs();\n\n    \/\/ Show popup after 2 seconds\n    setTimeout(() => {\n        fetchPopup();\n    }, 2000);\n})();\n<\/script>\n\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df66d2c elementor-widget elementor-widget-html\" data-id=\"df66d2c\" data-element_type=\"widget\" data-settings=\"{&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"humi-life-section\" style=\"max-width: 1400px; margin: 0 auto; padding: 5rem 2rem; background: linear-gradient(180deg, #f8f9fa 0%, #e8f0fe 100%); position: relative; overflow: hidden;\">\r\n\r\n    <!-- Decorative Background Pattern -->\r\n    <div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; background-image: url('data:image\/svg+xml,%3Csvg width=\\\"60\\\" height=\"\\\"60\\\"\" viewbox=\"\\\"0\" 0 60 xmlns =\"\\\"http:\/\/www.w3.org\/2000\/svg\\\"%3E%3Cg\" fill=\"\\\"none\\\"\" fill-rule=\"\\\"evenodd\\\"%3E%3Cg\" fill-opacity=\"\\\"1\\\"%3E%3Cpath\" d=\"\\\"M36\" 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30v0h-2v4h-4v2h4v4h2v6h4v4h-4zm6 34v-4h4v4h0v2h4v4h2v-4h4v-2h6zm6 4v0h4v4h0v2h4v4h2v6h4v4h6z\\\" %3e%3c g%3e%3csvg%3e');pointer-events:none;\"><\/div>\r\n\r\n    <div style=\"position: relative; z-index: 1;\">\r\n        <!-- Section Header -->\r\n        <div style=\"text-align: center; margin-bottom: 3rem;\">\r\n            <div style=\"display: inline-block; background: linear-gradient(135deg, #1e3a8a, #3b82f6); padding: 0.5rem 1.5rem; border-radius: 50px; margin-bottom: 1rem;\">\r\n                <span style=\"color: white; font-weight: 600; font-size: 0.9rem; letter-spacing: 1px;\">NEWS & UPDATES<\/span>\r\n            <\/div>\r\n            <h2 style=\"font-size: 2.75rem; font-weight: 800; color: #1e3a8a; margin-bottom: 1rem; line-height: 1.2;\">\r\n                Life at <span style=\"background: linear-gradient(to right, #1e3a8a, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\">HUMI Tbk<\/span>\r\n            <\/h2>\r\n            <p style=\"font-size: 1.15rem; color: #64748b; max-width: 800px; margin: 0 auto; line-height: 1.7;\">\r\n                At PT Humpuss Maritim Internasional Tbk, our professional commitment extends beyond day-to-day responsibilities. We are driven by a mission to create a positive impact empowering our people while contributing to the well-being of the communities around us.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <!-- News Cards Grid -->\r\n        <div id=\"humi-news-grid\" style=\"display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 2rem; margin-bottom: 3rem;\">\r\n            <!-- Loading state -->\r\n            <div style=\"grid-column: 1 \/ -1; text-align: center; padding: 3rem;\">\r\n                <div style=\"display: inline-block; width: 50px; height: 50px; border: 4px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite;\"><\/div>\r\n                <p style=\"margin-top: 1rem; color: #64748b;\">Loading news...<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Pagination -->\r\n        <div id=\"humi-news-pagination\" style=\"margin-top: 3rem; text-align: center;\"><\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Font Awesome for icons -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n@keyframes spin {\r\n    to { transform: rotate(360deg); }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    #humi-life-section {\r\n        padding: 3rem 1.5rem !important;\r\n    }\r\n\r\n    #humi-life-section h2 {\r\n        font-size: 2rem !important;\r\n    }\r\n\r\n    #humi-news-grid {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 1.5rem !important;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n    const WP_API_URL = 'https:\/\/humi.co.id\/wp-json\/wp\/v2\/posts';\r\n    const WP_CATEGORIES_URL = 'https:\/\/humi.co.id\/wp-json\/wp\/v2\/categories';\r\n    const PER_PAGE = 6;\r\n    const TARGET_CATEGORY = 'Life at HUMI'; \/\/ Category to filter by\r\n\r\n    let allPosts = [];\r\n    let currentPage = 1;\r\n    let totalPages = 1;\r\n    let lifeAtHumiCategoryId = null;\r\n\r\n    \/\/ Fetch categories to find the ID for \"Life at HUMI\"\r\n    async function fetchCategories() {\r\n        try {\r\n            const response = await fetch(WP_CATEGORIES_URL);\r\n            if (!response.ok) {\r\n                throw new Error(`HTTP error! status: ${response.status}`);\r\n            }\r\n            \r\n            const categories = await response.json();\r\n            \r\n            \/\/ Find the category ID for \"Life at HUMI\"\r\n            const lifeAtHumiCategory = categories.find(cat => cat.name === TARGET_CATEGORY);\r\n            \r\n            if (lifeAtHumiCategory) {\r\n                lifeAtHumiCategoryId = lifeAtHumiCategory.id;\r\n                console.log(`Found category \"${TARGET_CATEGORY}\" with ID: ${lifeAtHumiCategoryId}`);\r\n                \/\/ Now that we have the category ID, fetch posts\r\n                fetchPosts();\r\n            } else {\r\n                console.error(`Category \"${TARGET_CATEGORY}\" not found`);\r\n                document.getElementById('humi-news-grid').innerHTML =\r\n                    `<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 3rem; color: #64748b;\">Category \"${TARGET_CATEGORY}\" not found.<\/div>`;\r\n            }\r\n        } catch (error) {\r\n            console.error('Error fetching categories:', error);\r\n            document.getElementById('humi-news-grid').innerHTML =\r\n                '<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 3rem; color: #64748b;\">Error loading categories. Please try again later.<\/div>';\r\n        }\r\n    }\r\n\r\n    \/\/ Fetch posts from WordPress API\r\n    async function fetchPosts() {\r\n        try {\r\n            \/\/ If we don't have the category ID yet, fetch categories first\r\n            if (lifeAtHumiCategoryId === null) {\r\n                fetchCategories();\r\n                return;\r\n            }\r\n\r\n            \/\/ Include category filter in the API request\r\n            const url = `${WP_API_URL}?page=${currentPage}&per_page=${PER_PAGE}&_embed=true&orderby=date&order=desc&categories=${lifeAtHumiCategoryId}`;\r\n            const response = await fetch(url);\r\n\r\n            if (!response.ok) {\r\n                throw new Error(`HTTP error! status: ${response.status}`);\r\n            }\r\n\r\n            \/\/ Get total pages from headers\r\n            totalPages = parseInt(response.headers.get('X-WP-TotalPages')) || 1;\r\n\r\n            const posts = await response.json();\r\n            allPosts = posts.map(processPost);\r\n\r\n            renderPosts();\r\n            renderPagination();\r\n        } catch (error) {\r\n            console.error('Error fetching posts:', error);\r\n            document.getElementById('humi-news-grid').innerHTML =\r\n                '<div style=\"grid-column: 1 \/ -1; text-align: center; padding: 3rem; color: #64748b;\">Error loading news. Please try again later.<\/div>';\r\n        }\r\n    }\r\n\r\n    \/\/ Process WordPress post data\r\n    function processPost(post) {\r\n        \/\/ Extract featured image\r\n        let featuredImage = 'https:\/\/humi.co.id\/wp-content\/uploads\/2025\/10\/HC2-768x512.jpeg';\r\n        let featuredImageAlt = 'HUMI News';\r\n\r\n        if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\r\n            const media = post._embedded['wp:featuredmedia'][0];\r\n\r\n            if (media.media_details && media.media_details.sizes) {\r\n                if (media.media_details.sizes.medium_large) {\r\n                    featuredImage = media.media_details.sizes.medium_large.source_url;\r\n                } else if (media.media_details.sizes.medium) {\r\n                    featuredImage = media.media_details.sizes.medium.source_url;\r\n                } else if (media.source_url) {\r\n                    featuredImage = media.source_url;\r\n                }\r\n            }\r\n\r\n            featuredImageAlt = media.alt_text || post.title.rendered || 'HUMI News';\r\n        }\r\n\r\n        \/\/ Extract excerpt\r\n        let excerpt = post.excerpt.rendered || '';\r\n        excerpt = excerpt.replace(\/<[^>]*>\/g, ''); \/\/ Strip HTML tags\r\n        excerpt = excerpt.replace(\/&[^;]+;\/g, ' '); \/\/ Remove HTML entities\r\n        if (excerpt.length > 150) {\r\n            excerpt = excerpt.substring(0, 150) + '...';\r\n        }\r\n\r\n        \/\/ Extract author\r\n        let author = 'HUMI';\r\n        if (post._embedded && post._embedded.author && post._embedded.author[0]) {\r\n            author = post._embedded.author[0].name;\r\n        }\r\n\r\n        \/\/ Extract categories\r\n        let categories = [];\r\n        if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0]) {\r\n            categories = post._embedded['wp:term'][0].map(term => term.name);\r\n        }\r\n\r\n        \/\/ Calculate reading time\r\n        const content = post.content.rendered || '';\r\n        const wordCount = content.replace(\/<[^>]*>\/g, '').split(\/\\s+\/).length;\r\n        const readingTime = Math.max(1, Math.ceil(wordCount \/ 200));\r\n\r\n        \/\/ Format date\r\n        const date = new Date(post.date);\r\n        const dateFormatted = date.toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' });\r\n\r\n        return {\r\n            id: post.id,\r\n            title: post.title.rendered.replace(\/&[^;]+;\/g, ' '),\r\n            excerpt: excerpt,\r\n            link: post.link,\r\n            date: dateFormatted,\r\n            featuredImage: featuredImage,\r\n            featuredImageAlt: featuredImageAlt,\r\n            author: author,\r\n            categories: categories,\r\n            readingTime: readingTime\r\n        };\r\n    }\r\n\r\n    \/\/ Render posts\r\n    function renderPosts() {\r\n        const container = document.getElementById('humi-news-grid');\r\n\r\n        if (allPosts.length === 0) {\r\n            container.innerHTML = `\r\n                <div style=\"grid-column: 1 \/ -1; text-align: center; padding: 3rem;\">\r\n                    <i class=\"fas fa-newspaper\" style=\"font-size: 3rem; color: #cbd5e1; margin-bottom: 1rem;\"><\/i>\r\n                    <h4 style=\"color: #64748b; margin-bottom: 0.5rem;\">No news available in the \"Life at HUMI Tbk\" category at the moment.<\/h4>\r\n                    <p style=\"color: #94a3b8;\">Check back later for updates.<\/p>\r\n                <\/div>\r\n            `;\r\n            return;\r\n        }\r\n\r\n        container.innerHTML = allPosts.map(post => `\r\n            <article style=\"background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(30, 58, 138, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; display: flex; flex-direction: column; height: 100%;\"\r\n                     onmouseover=\"this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 40px rgba(30, 58, 138, 0.2)'\"\r\n                     onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(30, 58, 138, 0.1)'\"\r\n                     onclick=\"window.open('${post.link}', '_blank')\">\r\n\r\n                <!-- Featured Image -->\r\n                <div style=\"position: relative; width: 100%; height: 240px; overflow: hidden; background: #e2e8f0;\">\r\n                    <img decoding=\"async\" src=\"${post.featuredImage}\"\r\n                         alt=\"${post.featuredImageAlt}\"\r\n                         style=\"width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;\"\r\n                         onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                         onmouseout=\"this.style.transform='scale(1)'\">\r\n\r\n                    <!-- Category Badge -->\r\n                    ${post.categories.length > 0 ? `\r\n                    <div style=\"position: absolute; top: 1rem; left: 1rem;\">\r\n                        <span style=\"background: linear-gradient(135deg, #1e3a8a, #3b82f6); color: white; padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3);\">\r\n                            ${post.categories[0]}\r\n                        <\/span>\r\n                    <\/div>\r\n                    ` : ''}\r\n\r\n                    <!-- Reading Time Badge -->\r\n                    <div style=\"position: absolute; bottom: 1rem; right: 1rem;\">\r\n                        <span style=\"background: rgba(255, 255, 255, 0.95); color: #1e3a8a; padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\">\r\n                            <i class=\"fas fa-clock\" style=\"margin-right: 0.3rem;\"><\/i>${post.readingTime} min read\r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Card Content -->\r\n                <div style=\"padding: 1.5rem; flex: 1; display: flex; flex-direction: column;\">\r\n                    <!-- Date and Author -->\r\n                    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; color: #64748b; font-size: 0.85rem;\">\r\n                        <span style=\"display: flex; align-items: center; gap: 0.4rem;\">\r\n                            <i class=\"fas fa-calendar-alt\" style=\"color: #3b82f6;\"><\/i>\r\n                            ${post.date}\r\n                        <\/span>\r\n                        <span style=\"color: #cbd5e1;\">\u2022<\/span>\r\n                        <span style=\"display: flex; align-items: center; gap: 0.4rem;\">\r\n                            <i class=\"fas fa-user\" style=\"color: #3b82f6;\"><\/i>\r\n                            ${post.author}\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <!-- Title -->\r\n                    <h3 style=\"font-size: 1.25rem; font-weight: 700; color: #1e3a8a; margin: 0 0 0.75rem 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\">\r\n                        ${post.title}\r\n                    <\/h3>\r\n\r\n                    <!-- Excerpt -->\r\n                    <p style=\"color: #64748b; font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.5rem 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;\">\r\n                        ${post.excerpt}\r\n                    <\/p>\r\n\r\n                    <!-- Read More Link -->\r\n                    <a href=\"${post.link}\"\r\n                       target=\"_blank\"\r\n                       style=\"display: inline-flex; align-items: center; gap: 0.5rem; color: #3b82f6; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.3s ease;\"\r\n                       onmouseover=\"this.style.gap='0.75rem'; this.style.color='#1e3a8a'\"\r\n                       onmouseout=\"this.style.gap='0.5rem'; this.style.color='#3b82f6'\"\r\n                       onclick=\"event.stopPropagation()\">\r\n                        Read More\r\n                        <i class=\"fas fa-arrow-right\" style=\"transition: transform 0.3s ease;\"><\/i>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/article>\r\n        `).join('');\r\n    }\r\n\r\n    \/\/ Render pagination\r\n    function renderPagination() {\r\n        const container = document.getElementById('humi-news-pagination');\r\n\r\n        if (totalPages <= 1) {\r\n            container.innerHTML = '';\r\n            return;\r\n        }\r\n\r\n        let html = '<div style=\"display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap;\">';\r\n\r\n        \/\/ Previous button\r\n        if (currentPage > 1) {\r\n            html += `<button onclick=\"humiNewsGoToPage(${currentPage - 1})\" style=\"padding: 0.75rem 1.25rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 600; font-size: 0.9rem;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">\u2190 Previous<\/button>`;\r\n        }\r\n\r\n        \/\/ Page numbers with smart ellipsis\r\n        const maxVisible = 7;\r\n        let startPage = Math.max(1, currentPage - Math.floor(maxVisible \/ 2));\r\n        let endPage = Math.min(totalPages, startPage + maxVisible - 1);\r\n\r\n        if (endPage - startPage < maxVisible - 1) {\r\n            startPage = Math.max(1, endPage - maxVisible + 1);\r\n        }\r\n\r\n        \/\/ First page\r\n        if (startPage > 1) {\r\n            html += `<button onclick=\"humiNewsGoToPage(1)\" style=\"padding: 0.75rem 1rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; min-width: 44px; font-weight: 600;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">1<\/button>`;\r\n            if (startPage > 2) {\r\n                html += `<span style=\"padding: 0.75rem 0.5rem; color: #64748b; font-weight: 600;\">...<\/span>`;\r\n            }\r\n        }\r\n\r\n        \/\/ Page numbers\r\n        for (let i = startPage; i <= endPage; i++) {\r\n            if (i === currentPage) {\r\n                html += `<button style=\"padding: 0.75rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 8px; font-weight: 600; min-width: 44px; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\">${i}<\/button>`;\r\n            } else {\r\n                html += `<button onclick=\"humiNewsGoToPage(${i})\" style=\"padding: 0.75rem 1rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; min-width: 44px; font-weight: 600;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">${i}<\/button>`;\r\n            }\r\n        }\r\n\r\n        \/\/ Last page\r\n        if (endPage < totalPages) {\r\n            if (endPage < totalPages - 1) {\r\n                html += `<span style=\"padding: 0.75rem 0.5rem; color: #64748b; font-weight: 600;\">...<\/span>`;\r\n            }\r\n            html += `<button onclick=\"humiNewsGoToPage(${totalPages})\" style=\"padding: 0.75rem 1rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; min-width: 44px; font-weight: 600;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">${totalPages}<\/button>`;\r\n        }\r\n\r\n        \/\/ Next button\r\n        if (currentPage < totalPages) {\r\n            html += `<button onclick=\"humiNewsGoToPage(${currentPage + 1})\" style=\"padding: 0.75rem 1.25rem; border: 1px solid #cbd5e1; background: white; color: #1e3a8a; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 600; font-size: 0.9rem;\" onmouseover=\"this.style.background='#f1f5f9'; this.style.borderColor='#3b82f6'; this.style.color='#1e3a8a'\" onmouseout=\"this.style.background='white'; this.style.borderColor='#cbd5e1'; this.style.color='#1e3a8a'\">Next \u2192<\/button>`;\r\n        }\r\n\r\n        html += '<\/div>';\r\n        container.innerHTML = html;\r\n    }\r\n\r\n    \/\/ Go to page\r\n    window.humiNewsGoToPage = function(page) {\r\n        currentPage = page;\r\n        fetchPosts();\r\n        document.getElementById('humi-life-section').scrollIntoView({ behavior: 'smooth' });\r\n    };\r\n\r\n    \/\/ Initialize - fetch categories first to get the \"Life at HUMI\" category ID\r\n    fetchCategories();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e95f8b7 elementor-widget elementor-widget-html\" data-id=\"e95f8b7\" data-element_type=\"widget\" data-settings=\"{&quot;profecient_parallax_effects_toggle&quot;:0,&quot;profecient_mouse_effects_toggle&quot;:0}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.particles-js-canvas-el {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left:0;\n}\n<\/style>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/particles.js\/2.0.0\/particles.min.js\"><\/script> \n\n<script>\ndocument.querySelectorAll('.particles-js').forEach((el, index) => {\n  const id = `particles-js-${index}`;\n  el.setAttribute('id', id);\n\n  particlesJS(id, {\n    particles: {\n      number: { value: 40, density: { enable: true, value_area: 1000 } },\n      color: { value: \"#0030cf\" },\n      shape: {\n        type: \"circle\",\n        stroke: { width: 0, color: \"#0030cf\" },\n        polygon: { nb_sides: 4 },\n        image: { src: \"img\/github.svg\", width: 100, height: 100 }\n      },\n      opacity: {\n        value: 0.2,\n        random: false,\n        anim: { enable: false, speed: 0.2, opacity_min: 0.01, sync: false }\n      },\n      size: {\n        value: 3,\n        random: true,\n        anim: { enable: false, speed: 40, size_min: 0.1, sync: false }\n      },\n      line_linked: {\n        enable: true,\n        distance: 150,\n        color: \"#0030cf\",\n        opacity: 0.18,\n        width: 1\n      },\n      move: {\n        enable: true,\n        speed: 3,\n        direction: \"none\",\n        random: true,\n        straight: false,\n        out_mode: \"out\",\n        bounce: false,\n        attract: { enable: false, rotateX: 600, rotateY: 1200 }\n      }\n    },\n    interactivity: {\n      detect_on: \"canvas\",\n      events: {\n        onhover: { enable: false, mode: \"repulse\" },\n        onclick: { enable: true, mode: \"push\" },\n        resize: true\n      },\n      modes: {\n        grab: { distance: 400, line_linked: { opacity: 1 } },\n        bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },\n        repulse: { distance: 200, duration: 0.4 },\n        push: { particles_nb: 4 },\n        remove: { particles_nb: 2 }\n      }\n    },\n    retina_detect: true\n  });\n});\n\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u00b7 Career \u00b7 It&#039;s Time to Build the Maritime Industry We recognize the importance of human resources, which is why we consistently seek outstanding talents to work together in achieving the company\u2019s goal of becoming a world-class player in the maritime sector and contributing to the development of Indonesia\u2019s maritime industry. Our selection process is [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1032","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/humi.co.id\/id\/wp-json\/wp\/v2\/pages\/1032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/humi.co.id\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/humi.co.id\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/humi.co.id\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/humi.co.id\/id\/wp-json\/wp\/v2\/comments?post=1032"}],"version-history":[{"count":186,"href":"https:\/\/humi.co.id\/id\/wp-json\/wp\/v2\/pages\/1032\/revisions"}],"predecessor-version":[{"id":8754,"href":"https:\/\/humi.co.id\/id\/wp-json\/wp\/v2\/pages\/1032\/revisions\/8754"}],"wp:attachment":[{"href":"https:\/\/humi.co.id\/id\/wp-json\/wp\/v2\/media?parent=1032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}