{"id":814,"date":"2025-02-10T15:12:22","date_gmt":"2025-02-10T15:12:22","guid":{"rendered":"https:\/\/quansel.com\/staging\/?page_id=814"},"modified":"2026-07-02T08:24:09","modified_gmt":"2026-07-02T08:24:09","slug":"beranda","status":"publish","type":"page","link":"https:\/\/quansel.com\/staging\/","title":{"rendered":"Beranda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"814\" class=\"elementor elementor-814\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-90d3157 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"90d3157\" data-element_type=\"section\" data-e-type=\"section\">\n\t\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-6ef5f06\" data-id=\"6ef5f06\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d8e3400 elementor-widget elementor-widget-html\" data-id=\"d8e3400\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"q-hero-container\">\r\n\r\n    <div class=\"q-topbar\">\r\n\r\n        <div class=\"q-hero-title\">\r\n            <span class=\"q-hero-title-text\">KONSULTAN HUKUM PROFESIONAL<\/span>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"q-image-container\">\r\n    <img decoding=\"async\" \r\n        src=\"https:\/\/quansel.com\/staging\/wp-content\/uploads\/2026\/07\/Tim-1_11zon-scaled-1.webp\" \r\n        alt=\"Tim Quansel\" \r\n        fetchpriority=\"high\" \r\n        loading=\"eager\"\r\n        class=\"q-image-area\"\r\n    >\r\n<\/div>\r\n\r\n        <div class=\"q-box-left\">\r\n            Mengutamakan Solusi. Mengedepankan Presisi Hukum.\r\n        <\/div>\r\n\r\n        <div class=\"q-box-right\">\r\n\r\n            <h2>\r\n                Mendampingi Langkah Strategis Bisnis Anda.\r\n            <\/h2>\r\n\r\n            <a href=\"\/staging\/kontak\/\" class=\"q-hero-btn\">\r\n                <span>Konsultasi<\/span>\r\n                <span>\u27f6<\/span>\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@500;600&family=Space+Grotesk:wght@700&family=Work+Sans:wght@400;500;600&display=swap');\r\n\r\n.q-hero-container,\r\n.q-hero-container * {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.q-hero-container {\r\n    width: 100%;\r\n    height: 100svh;\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    background: #0573e3;\r\n}\r\n\r\n\/* ========================= *\/\r\n\/* TOP BAR *\/\r\n\/* ========================= *\/\r\n.q-topbar {\r\n    flex-shrink: 0;\r\n    background: #0573e3;\r\n    padding-top: 110px;\r\n    padding-bottom: 14px;\r\n    overflow: hidden;\r\n}\r\n\r\n.q-hero-title {\r\n    display: block;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n}\r\n\r\n.q-hero-title-text {\r\n    display: inline-block;\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    font-weight: 700;\r\n    font-size: 5.25vw;\r\n    line-height: .88;\r\n    text-transform: uppercase;\r\n    color: #fff;\r\n    white-space: nowrap;\r\n    transform-origin: left center;\r\n}\r\n\r\n\/* ========================= *\/\r\n\/* IMAGE AREA (DIPERBAIKI) *\/\r\n\/* ========================= *\/\r\n.q-image-container {\r\n    flex: 1; \/* SANGAT PENTING: Memaksa wadah mengisi sisa layar *\/\r\n    width: 100%;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\nimg.q-image-area {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover; \/* Memaksa gambar terpotong rapi sesuai wadah *\/\r\n    \r\n    \/* GANTI ANGKA DI SINI UNTUK DEKSTOP (0% atas, 50% tengah, 100% bawah) *\/\r\n    object-position: center 33%; \r\n    \r\n    display: block;\r\n}\r\n\r\n\/* ========================= *\/\r\n\/* TEXT BOXES *\/\r\n\/* ========================= *\/\r\n.q-box-left {\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 0;\r\n    width: 330px;\r\n    max-width: 80vw;\r\n    background: #eef5fc;\r\n    padding: 16px 22px;\r\n    border-right: 4px solid #0573e3;\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    letter-spacing: .08em;\r\n    color: #54565a;\r\n}\r\n\r\n.q-box-right {\r\n    position: absolute;\r\n    right: 5vw;\r\n    bottom: 0;\r\n    width: 360px;\r\n    max-width: 90vw;\r\n    background: #fff;\r\n    padding: 34px;\r\n    border-top: 4px solid #0573e3;\r\n}\r\n\r\n.q-box-right h2 {\r\n    margin-bottom: 24px;\r\n    font-family: 'Work Sans', sans-serif;\r\n    font-size: 1.6rem;\r\n    font-weight: 500;\r\n    line-height: 1.3;\r\n    color: #111;\r\n}\r\n\r\n.q-hero-btn {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    padding: 16px 20px;\r\n    background: #0573e3;\r\n    color: #fff;\r\n    text-decoration: none;\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    letter-spacing: .08em;\r\n    transition: .3s;\r\n}\r\n\r\n.q-hero-btn:hover {\r\n    background: #6CFFBA;\r\n}\r\n\r\n.q-hero-btn span:last-child {\r\n    color: #6cffba;\r\n    font-size: 18px;\r\n}\r\n\r\n\/* ========================= *\/\r\n\/* RESPONSIVE BREAKPOINTS *\/\r\n\/* ========================= *\/\r\n@media(max-height: 760px) {\r\n    .q-box-right {\r\n        padding: 22px;\r\n    }\r\n    .q-box-right h2 {\r\n        font-size: 1.25rem;\r\n        margin-bottom: 16px;\r\n    }\r\n    .q-hero-btn {\r\n        padding: 12px 16px;\r\n    }\r\n}\r\n\r\n@media(max-width: 991px) {\r\n    .q-hero-container {\r\n        height: 100svh;\r\n    }\r\n    .q-topbar {\r\n        padding-top: 88px;\r\n        padding-bottom: 10px;\r\n    }\r\n    .q-hero-title-text {\r\n        font-size: 8vw;\r\n    }\r\n    \r\n    \/* SETTING POSISI GAMBAR UNTUK TABLET *\/\r\n    img.q-image-area {\r\n        object-position: center 20%; \r\n    }\r\n    \r\n    .q-box-left {\r\n        display: none;\r\n    }\r\n    .q-box-right {\r\n        position: relative;\r\n        right: auto;\r\n        bottom: auto;\r\n        width: 100%;\r\n        max-width: none;\r\n        padding: 26px;\r\n    }\r\n}\r\n\r\n@media(max-width: 768px) {\r\n    .q-topbar {\r\n        padding-top: 74px;\r\n    }\r\n    .q-hero-title-text {\r\n        font-size: 9vw;\r\n    }\r\n    \r\n    \/* SETTING POSISI GAMBAR UNTUK MOBILE\/HP *\/\r\n    img.q-image-area {\r\n        object-position: center 15% !important; \r\n    }\r\n    \r\n    .q-box-left {\r\n        display: none;\r\n    }\r\n    .q-box-right h2 {\r\n        font-size: 1.2rem;\r\n    }\r\n}\r\n<\/style>\r\n<script>\r\n(function(){\r\n\r\n    function fitHeroTitle(){\r\n\r\n        document.querySelectorAll('.q-hero-title').forEach(function(wrap){\r\n\r\n            var text = wrap.querySelector('.q-hero-title-text');\r\n            if(!text) return;\r\n\r\n            \/\/ reset ke kondisi natural sesuai CSS (vw based) dulu\r\n            text.style.letterSpacing = '0px';\r\n            text.style.fontSize = '';\r\n\r\n            var wrapWidth = wrap.clientWidth;\r\n            var cs = window.getComputedStyle(text);\r\n            var baseFontSize = parseFloat(cs.fontSize);\r\n\r\n            var naturalWidth = text.getBoundingClientRect().width;\r\n\r\n            \/\/ kalau teks aslinya udah lebih lebar dari container,\r\n            \/\/ kecilin font-size-nya dulu sampai muat (dengan sedikit buffer)\r\n            if(naturalWidth > wrapWidth){\r\n\r\n                var shrinkRatio = (wrapWidth \/ naturalWidth) * 0.99;\r\n                var newFontSize = baseFontSize * shrinkRatio;\r\n\r\n                text.style.fontSize = newFontSize + 'px';\r\n                naturalWidth = text.getBoundingClientRect().width;\r\n\r\n            }\r\n\r\n            var charCount = text.textContent.length;\r\n\r\n            if(naturalWidth > 0 && charCount > 1){\r\n\r\n                var diff = wrapWidth - naturalWidth;\r\n                var spacing = diff \/ (charCount - 1);\r\n\r\n                \/\/ gak boleh negatif (biar gak rapet\/numpuk)\r\n                if(spacing < 0) spacing = 0;\r\n\r\n                \/\/ gak boleh kelewat renggang\r\n                if(spacing > 14) spacing = 14;\r\n\r\n                text.style.letterSpacing = spacing + 'px';\r\n\r\n            }\r\n\r\n        });\r\n\r\n    }\r\n\r\n    window.addEventListener('load', fitHeroTitle);\r\n    window.addEventListener('resize', fitHeroTitle);\r\n\r\n    if(document.fonts && document.fonts.ready){\r\n        document.fonts.ready.then(fitHeroTitle);\r\n    }\r\n\r\n})();\r\n<\/script>\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\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-42f9b22 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"42f9b22\" data-element_type=\"section\" data-e-type=\"section\">\n\t\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-8ed341c\" data-id=\"8ed341c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-66efdf5 elementor-widget elementor-widget-html\" data-id=\"66efdf5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"ticker-banner\">\r\n    <div class=\"ticker-banner__photo\"><\/div>\r\n    <div class=\"ticker-banner__tint\"><\/div>\r\n    <div class=\"ticker-banner__scrim\"><\/div>\r\n\r\n    <div class=\"ticker-banner__ticker\">\r\n        <div class=\"ticker-banner__track\">\r\n            <span>Hukum Korporasi<\/span>\r\n            <span>Litigasi<\/span>\r\n            <span>Kekayaan Intelektual<\/span>\r\n            <span>Pertanahan<\/span>\r\n            <span>Ketenagakerjaan<\/span>\r\n\r\n            <span>Hukum Korporasi<\/span>\r\n            <span>Litigasi<\/span>\r\n            <span>Kekayaan Intelektual<\/span>\r\n            <span>Pertanahan<\/span>\r\n            <span>Ketenagakerjaan<\/span>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n    .ticker-banner{\r\n    position:relative;\r\n    height:170px;\r\n    overflow:hidden;\r\n    border-top:1px solid rgba(21,22,26,.15);\r\n    border-bottom:1px solid rgba(21,22,26,.15);\r\n}\r\n\r\n.ticker-banner__photo{\r\n    position:absolute;\r\n    inset:0;\r\n    background-image:url('https:\/\/images.unsplash.com\/photo-1745015446589-7ee6f702d8c1?auto=format&fit=crop&w=2000&q=75');\r\n    background-size:cover;\r\n    background-position:center;\r\n    filter:grayscale(1) contrast(1.1) brightness(.85);\r\n}\r\n\r\n.ticker-banner__tint{\r\n    position:absolute;\r\n    inset:0;\r\n    background:linear-gradient(115deg,#0573e3,#6cffba);\r\n    mix-blend-mode:color;\r\n    opacity:.85;\r\n}\r\n\r\n.ticker-banner__scrim{\r\n    position:absolute;\r\n    inset:0;\r\n    background:linear-gradient(\r\n        180deg,\r\n        rgba(13,14,16,.10),\r\n        rgba(13,14,16,.60)\r\n    );\r\n}\r\n\r\n.ticker-banner__ticker{\r\n    position:absolute;\r\n    inset:0;\r\n    display:flex;\r\n    align-items:center;\r\n    overflow:hidden;\r\n}\r\n\r\n.ticker-banner__track{\r\n    display:flex;\r\n    width:max-content;\r\n    gap:48px;\r\n    padding-inline:24px;\r\n    white-space:nowrap;\r\n\r\n    font-family:'IBM Plex Mono', monospace;\r\n    font-size:.8rem;\r\n    font-weight:500;\r\n    letter-spacing:.16em;\r\n    text-transform:uppercase;\r\n    color:#f7f7f7;\r\n\r\n    animation:ticker-scroll 24s linear infinite;\r\n}\r\n\r\n.ticker-banner__track span{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:48px;\r\n}\r\n\r\n.ticker-banner__track span::after{\r\n    content:\"\";\r\n}\r\n\r\n@keyframes ticker-scroll{\r\n    from{\r\n        transform:translateX(0);\r\n    }\r\n    to{\r\n        transform:translateX(-50%);\r\n    }\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n    .ticker-banner__track{\r\n        animation:none;\r\n    }\r\n}\r\n<\/style>\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\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f822362 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"f822362\" data-element_type=\"section\" data-e-type=\"section\">\n\t\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-86e284a\" data-id=\"86e284a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e2dbf2b elementor-widget elementor-widget-html\" data-id=\"e2dbf2b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"q-about-wrapper\" id=\"q-about-section\">\r\n\r\n    <div class=\"q-about-text-col\">\r\n        <div class=\"q-about-label\">TENTANG QUANSEL<\/div>\r\n\r\n        <div class=\"q-about-step\" data-index=\"0\">\r\n            <h2>Mitra Terpercaya.<\/h2>\r\n            <p>Quansel hadir sebagai mitra terpercaya dalam menangani urusan hukum bisnis secara presisi.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"q-about-step\" data-index=\"1\">\r\n            <h2>Keahlian Komprehensif.<\/h2>\r\n            <p>Tim ahli yang terkemuka siap memberikan layanan hukum berkualitas untuk mendukung dan mengamankan kesuksesan korporasi .<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"q-about-step\" data-index=\"2\">\r\n            <h2>Fokus &amp; Kepatuhan.<\/h2>\r\n            <p>Tim kami akan memastikan dan fokus terhadap mematuhi seluruh regulasi yang berlaku secara mutlak.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"q-about-visual-col\">\r\n        <div class=\"q-about-pin\" id=\"q-about-pin\">\r\n            <div class=\"q-logo-box\">\r\n                <img decoding=\"async\" src=\"https:\/\/quansel.com\/staging\/wp-content\/uploads\/2025\/01\/Logo-Blue-Green-192px.png\" alt=\"Quansel Logo\" class=\"q-about-logo\" id=\"q-about-logo\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* Reset Spesifik Area Ini *\/\r\n.q-about-wrapper, .q-about-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n\/* WRAPPER \u2014 flex row biasa, TIDAK ada height paksa \/ position khusus.\r\n   Tingginya otomatis mengikuti konten teks (yang dikasih jarak antar judul). *\/\r\n.q-about-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    display: flex;\r\n    background-color: #ffffff;\r\n    isolation: isolate;\r\n}\r\n\r\n\/* === SISI KIRI: TEKS, SCROLL NORMAL === *\/\r\n.q-about-text-col {\r\n    width: 50%;\r\n    padding: 12vh 4vw 12vh 8vw;\r\n}\r\n\r\n.q-about-label {\r\n    font-family: 'IBM Plex Mono', monospace;\r\n    font-size: 13px;\r\n    color: #0573e3;\r\n    letter-spacing: 2px;\r\n    font-weight: 600;\r\n    margin-bottom: 8vh;\r\n    display: block;\r\n}\r\n\r\n\/* Tiap judul punya jarak vertikal yang lebar, supaya space buat efek\r\n   blur-masuk \/ blur-keluar terasa pas di-scroll (mirip nsave.com) *\/\r\n.q-about-step {\r\n    padding: 13vh 0;\r\n    will-change: filter, opacity;\r\n}\r\n\r\n.q-about-step h2 {\r\n    font-family: 'Space Grotesk', sans-serif;\r\n    color: #0c1017;\r\n    font-size: clamp(1.8rem, 3.2vw, 3.2rem);\r\n    font-weight: 700;\r\n    line-height: 1.15;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 14px;\r\n    white-space: nowrap;\r\n}\r\n\r\n.q-about-step p {\r\n    font-family: 'Work Sans', sans-serif;\r\n    color: #54565a;\r\n    font-size: 1.05rem;\r\n    line-height: 1.6;\r\n    max-width: 440px;\r\n}\r\n\r\n\/* === SISI KANAN: LOGO YANG DI-PIN === *\/\r\n.q-about-visual-col {\r\n    width: 50%;\r\n    position: relative;\r\n}\r\n\r\n\/* Posisi vertikal pin dihitung & digerakkan manual lewat JS (transform),\r\n   bukan position:sticky\/fixed \u2014 supaya kebal dari ancestor Elementor\r\n   yang sering kasih transform\/overflow sendiri buat animasi mereka. *\/\r\n.q-about-pin {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    will-change: transform;\r\n}\r\n\r\n.q-logo-box {\r\n    width: 250px;\r\n    height: 250px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    overflow: visible;\r\n}\r\n\r\n.q-about-logo {\r\n    width: 100%;\r\n    height: auto;\r\n    object-fit: contain;\r\n    transform: translateX(120%);\r\n    opacity: 0;\r\n    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;\r\n}\r\n\r\n.q-about-logo.entered {\r\n    transform: translateX(0);\r\n    opacity: 1;\r\n    animation: qBreathe 8s ease-in-out infinite alternate;\r\n    animation-delay: 1.1s;\r\n}\r\n\r\n@keyframes qBreathe {\r\n    0% { transform: scale(1) translateY(0); }\r\n    100% { transform: scale(1.03) translateY(-3px); }\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n    .q-about-wrapper { flex-direction: column; }\r\n    .q-about-text-col, .q-about-visual-col { width: 100%; }\r\n    .q-about-text-col { padding: 8vh 6vw; text-align: center; }\r\n    .q-about-step { padding: 8vh 0; }\r\n    .q-about-step h2 { white-space: normal; }\r\n    .q-about-step p { margin: 0 auto; }\r\n    .q-about-visual-col { height: 50vh; }\r\n    .q-about-pin { position: relative; height: 50vh; }\r\n    .q-logo-box { width: 170px; height: 170px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n    const wrapper = document.getElementById('q-about-section');\r\n    const pin     = document.getElementById('q-about-pin');\r\n    const visualCol = pin.parentElement;\r\n    const steps   = document.querySelectorAll('.q-about-step');\r\n    const logo    = document.getElementById('q-about-logo');\r\n\r\n    const isMobile = () => window.innerWidth <= 768;\r\n    let logoTriggered = false;\r\n\r\n    function clamp(v, min, max) {\r\n        return Math.max(min, Math.min(max, v));\r\n    }\r\n\r\n    \/\/ State ter-smooth per step (blur & opacity), supaya transisinya gak nyentak\r\n    const stepState = Array.from(steps).map(() => ({\r\n        current: { blur: 4, opacity: 0.45 },\r\n        target: { blur: 4, opacity: 0.45 }\r\n    }));\r\n\r\n    let pinTarget = 0;\r\n    let pinCurrent = 0;\r\n\r\n    \/\/ Hitung TARGET tiap step berdasarkan posisi scroll saat ini (murah, dipanggil tiap event)\r\n    function measureSteps() {\r\n    const viewportCenter = window.innerHeight \/ 2;\r\n    const range = window.innerHeight * 0.75;\r\n\r\n    steps.forEach((step, i) => {\r\n        const rect = step.getBoundingClientRect();\r\n        const stepCenter = rect.top + rect.height \/ 2;\r\n        const dist = Math.abs(stepCenter - viewportCenter);\r\n        const t = clamp(dist \/ range, 0, 1);\r\n\r\n        stepState[i].target.blur = t * 2.5; \/\/ dari 4 -> 2.5, blur max dikurangin biar gak terlalu \"disabled\" keliatannya\r\n        stepState[i].target.opacity = 1 - t * 0.35; \/\/ dari 0.55 -> 0.35, opacity minimum naik dari 45% jadi 65%\r\n    });\r\n}\r\n\r\n    function measurePin() {\r\n    if (isMobile()) {\r\n        pinTarget = 0;\r\n\r\n        \/\/ cek trigger logo TETEP jalan walau mobile, pake visualCol\r\n        \/\/ (bukan kondisi pin yg sticky, karena di mobile gak ada pin behavior)\r\n        if (!logoTriggered) {\r\n            const colRect = visualCol.getBoundingClientRect();\r\n            if (colRect.top <= window.innerHeight * 0.85) {\r\n                logoTriggered = true;\r\n                logo.classList.add('entered');\r\n            }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    const colRect = visualCol.getBoundingClientRect();\r\n    const viewportHeight = window.innerHeight;\r\n    const maxTranslate = Math.max(colRect.height - viewportHeight, 0);\r\n    pinTarget = clamp(-colRect.top, 0, maxTranslate);\r\n\r\n    if (!logoTriggered && colRect.top <= viewportHeight * 0.85) {\r\n        logoTriggered = true;\r\n        logo.classList.add('entered');\r\n    }\r\n}\r\n\r\n    \/\/ Lerp tiap frame menuju target -> gerakan jadi punya \"bobot\" yang halus\r\n    function lerp(a, b, n) {\r\n        return a + (b - a) * n;\r\n    }\r\n\r\n    function renderSmoothed() {\r\n        const ease = 0.12;\r\n\r\n        steps.forEach((step, i) => {\r\n            const s = stepState[i];\r\n            s.current.blur = lerp(s.current.blur, s.target.blur, ease);\r\n            s.current.opacity = lerp(s.current.opacity, s.target.opacity, ease);\r\n            step.style.filter = `blur(${s.current.blur}px)`;\r\n            step.style.opacity = s.current.opacity;\r\n        });\r\n\r\n        if (isMobile()) {\r\n            pin.style.transform = '';\r\n        } else {\r\n            pinCurrent = lerp(pinCurrent, pinTarget, ease);\r\n            pin.style.transform = `translateY(${pinCurrent}px)`;\r\n        }\r\n    }\r\n\r\n    function measure() {\r\n        measureSteps();\r\n        measurePin();\r\n    }\r\n\r\n    function loop() {\r\n        renderSmoothed();\r\n        requestAnimationFrame(loop);\r\n    }\r\n\r\n    window.addEventListener('scroll', measure, { passive: true });\r\n    window.addEventListener('resize', measure, { passive: true });\r\n\r\n    measure();\r\n    requestAnimationFrame(loop);\r\n});\r\n<\/script>\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\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-15c3586 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"15c3586\" data-element_type=\"section\" data-e-type=\"section\">\n\t\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-fe0a84f\" data-id=\"fe0a84f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-404c0f4 elementor-widget elementor-widget-html\" data-id=\"404c0f4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;700&family=Work+Sans:wght@400;500&family=IBM+Plex+Mono:wght@500&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"qs-news\">\r\n    <div class=\"qs-news-head\">\r\n        <div>\r\n            <span class=\"qs-label\">WAWASAN TERBARU<\/span>\r\n            <h2>Artikel & Berita<\/h2>\r\n        <\/div>\r\n        <a href=\"\/staging\/artikel\/\" class=\"qs-view\">Lihat Semua \u2192<\/a>\r\n    <\/div>\r\n\r\n    <div class=\"qs-slider-container\">\r\n        \r\n        <button class=\"qs-arrow qs-prev\" aria-label=\"Artikel sebelumnya\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M15 19l-7-7 7-7\"\/><\/svg>\r\n        <\/button>\r\n\r\n        <div class=\"qs-slider-track\" id=\"qs-dynamic-track\" style=\"--curr-idx: 0;\">\r\n    <div class=\"qs-loading-box\">\r\n        <div class=\"qs-loading-indicator\"><\/div>\r\n        <span class=\"qs-loading-text\">MEMUAT ARTIKEL...<\/span>\r\n    <\/div>\r\n<\/div>\r\n\r\n        <button class=\"qs-arrow qs-next\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 5l7 7-7 7\"\/><\/svg>\r\n        <\/button>\r\n    <\/div>\r\n\r\n    <div class=\"qs-progress\">\r\n        <div class=\"qs-progress-bar\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* CSS VARIABEL & RESET *\/\r\n:root {\r\n    --blue: #0573e3;\r\n    --green: #6cffba;\r\n    --dark: #54565a;\r\n    --light: #f7f7f7;\r\n    --peek-width: 320px;\r\n}\r\n\r\n.qs-news * { \r\n    border-radius: 0 !important; \r\n    font-style: normal !important; \r\n}\r\n\r\n.qs-news { \r\n    background: var(--blue); \r\n    padding: 80px 0; \r\n    overflow: hidden; \r\n    position: relative; \r\n}\r\n\r\n\/* DEKORASI LINGKARAN HIJAU BLUR *\/\r\n.qs-news::before {\r\n    content: \"\"; \r\n    position: absolute; \r\n    width: 700px; \r\n    height: 700px; \r\n    right: -280px; \r\n    top: -280px;\r\n    border-radius: 50% !important; \r\n    background: radial-gradient(circle, var(--green), transparent 70%); \r\n    opacity: .08;\r\n    z-index: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* HEADER SECTION *\/\r\n.qs-news-head {\r\n    width: min(1400px, 92vw);\r\n    margin: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-end;\r\n    margin-bottom: 50px;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.qs-label { \r\n    display: block; \r\n    font-family: 'IBM Plex Mono', monospace !important; \r\n    color: var(--green); \r\n    font-size: 12px; \r\n    letter-spacing: 2px; \r\n    margin-bottom: 15px; \r\n    font-weight: 600;\r\n}\r\n\r\n.qs-news h2 { \r\n    font-family: 'Space Grotesk', sans-serif !important; \r\n    color: white; \r\n    font-size: 3rem; \r\n    font-weight: 700; \r\n    line-height: 1; \r\n}\r\n\r\n.qs-view { \r\n    font-family: 'IBM Plex Mono', monospace !important; \r\n    text-decoration: none; \r\n    color: white; \r\n    font-size: 13px; \r\n    transition: .35s; \r\n    border-bottom: 1px solid white; \r\n    padding-bottom: 5px; \r\n}\r\n\r\n.qs-view:hover { \r\n    color: var(--green); \r\n    border-color: var(--green); \r\n}\r\n\r\n\/* ========================================== *\/\r\n\/* WADAH & REL SLIDER                         *\/\r\n\/* ========================================== *\/\r\n.qs-slider-container {\r\n    position: relative;\r\n    width: 100%;\r\n    overflow: hidden; \r\n}\r\n\r\n\/* --- EDITORIAL LOADING BOX --- *\/\r\n.qs-loading-box {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 15px;\r\n    z-index: 10;\r\n    width: 100%;\r\n    max-width: 400px;\r\n    text-align: center;\r\n}\r\n\r\n.qs-loading-indicator {\r\n    width: 40px;\r\n    height: 2px;\r\n    background-color: var(--green);\r\n    animation: qsPulse 1.5s infinite ease-in-out;\r\n}\r\n\r\n.qs-loading-text {\r\n    font-family: 'IBM Plex Mono', monospace !important;\r\n    color: #ffffff;\r\n    font-size: 11px;\r\n    letter-spacing: 2px;\r\n    font-weight: 500;\r\n    opacity: 0.8;\r\n}\r\n\r\n@keyframes qsPulse {\r\n    0% { transform: scaleX(0.3); opacity: 0.4; }\r\n    50% { transform: scaleX(1); opacity: 1; }\r\n    100% { transform: scaleX(0.3); opacity: 0.4; }\r\n}\r\n\r\n\/* Rel yang bergeser ke kiri *\/\r\n.qs-slider-track {\r\n    display: flex;\r\n    align-items: center;\r\n    height: 750px; \/* PERBESAR: dari 600px ke 750px *\/\r\n    width: 100%;\r\n    transform: translateX(calc(var(--curr-idx) * var(--peek-width) * -1));\r\n    transition: transform 0.8s cubic-bezier(0.25, 1, 0.4, 1);\r\n}\r\n\r\n\/* KARTU ARTIKEL UMUM (Ngintip) *\/\r\n.qs-card {\r\n    width: var(--peek-width); \r\n    height: 550px; \/* PERBESAR: dari 440px ke 550px *\/\r\n    flex-shrink: 0;\r\n    position: relative;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    border-left: 1px solid rgba(255,255,255,0.1); \r\n    transition: all 0.8s cubic-bezier(0.25, 1, 0.4, 1);\r\n}\r\n\r\n\/* KARTU ARTIKEL AKTIF (Membesar) *\/\r\n.qs-card.active {\r\n    width: calc(100% - var(--peek-width)); \r\n    height: 750px; \/* PERBESAR: dari 600px ke 750px *\/\r\n    cursor: default;\r\n}\r\n\r\n\/* FOTO & ZOOM EFEK *\/\r\n.qs-card img {\r\n    position: absolute; \r\n    inset: 0; \r\n    width: 100%; \r\n    height: 100%; \r\n    object-fit: cover; \r\n    transition: transform 8s ease;\r\n}\r\n\r\n.qs-card:hover img { \r\n    transform: scale(1.05); \r\n}\r\n\r\n\/* OVERLAY WARNA *\/\r\n.qs-overlay-blue, .qs-overlay-dark {\r\n    position: absolute; \r\n    inset: 0; \r\n    transition: opacity 0.8s ease;\r\n}\r\n\r\n.qs-overlay-blue {\r\n    background: linear-gradient(90deg, rgba(5,115,227,0.95) 10%, rgba(5,115,227,0.3) 100%);\r\n    opacity: 0;\r\n}\r\n\r\n.qs-overlay-dark {\r\n    background: rgba(0, 0, 0, 0.6);\r\n    opacity: 1;\r\n}\r\n\r\n.qs-card.active .qs-overlay-blue { opacity: 1; }\r\n.qs-card.active .qs-overlay-dark { opacity: 0; }\r\n\r\n\/* ========================================== *\/\r\n\/* KONTEN TEKS - DIPERBAIKI SPACING-NYA      *\/\r\n\/* ========================================== *\/\r\n\r\n\/* Teks Ngintip (Preview) *\/\r\n.qs-preview-content {\r\n    position: absolute; \r\n    left: 30px; \r\n    right: 30px; \r\n    bottom: 50px; \/* LEBIH BAWAH *\/\r\n    color: white;\r\n    transition: opacity 0.4s ease;\r\n    z-index: 2;\r\n}\r\n\r\n.qs-preview-content span { \r\n    display: block; \r\n    font-family: 'IBM Plex Mono', monospace !important; \/* FIX: IBM Plex Mono *\/\r\n    font-size: 11px; \r\n    color: var(--green); \r\n    margin-bottom: 16px; \/* LEBIH LONGGAR *\/\r\n    letter-spacing: 2px;\r\n    font-weight: 500;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.qs-preview-content h4 { \r\n    font-family: 'Space Grotesk', sans-serif !important; \r\n    font-size: 1.75rem; \/* LEBIH BESAR *\/\r\n    line-height: 1.3; \/* LEBIH LONGGAR *\/\r\n    font-weight: 700;\r\n    margin: 0;\r\n}\r\n\r\n\/* Teks Utama (Aktif) *\/\r\n.qs-main-content {\r\n    position: absolute; \r\n    left: 8vw; \/* LEBIH KE DALAM *\/\r\n    bottom: 10vh; \/* LEBIH TINGGI *\/\r\n    max-width: 700px; \/* LEBIH LEBAR *\/\r\n    color: white;\r\n    opacity: 0; \r\n    pointer-events: none; \r\n    transform: translateY(20px);\r\n    transition: all 0.6s ease;\r\n    z-index: 2;\r\n}\r\n\r\n.qs-main-content .qs-category,\r\n.qs-main-content .q-card-meta span { \r\n    font-family: 'IBM Plex Mono', monospace !important; \/* FIX: IBM Plex Mono *\/\r\n    font-size: 12px; \r\n    color: var(--green); \r\n    text-transform: uppercase; \r\n    letter-spacing: 2.5px; \/* LEBIH LONGGAR *\/\r\n    margin-bottom: 30px; \/* LEBIH BANYAK SPACE *\/\r\n    font-weight: 500;\r\n    display: block;\r\n}\r\n\r\n.qs-main-content h3 { \r\n    font-family: 'Space Grotesk', sans-serif !important; \r\n    font-size: clamp(2.5rem, 3.5vw, 4.5rem); \/* LEBIH BESAR *\/\r\n    line-height: 1.15; \/* LEBIH LONGGAR *\/\r\n    margin-bottom: 30px; \/* LEBIH BANYAK SPACE *\/\r\n    font-weight: 700;\r\n}\r\n\r\n.qs-main-content p { \r\n    font-family: 'Work Sans', sans-serif !important; \r\n    font-size: 1.15rem; \/* LEBIH BESAR *\/\r\n    line-height: 1.75; \/* LEBIH LONGGAR *\/\r\n    opacity: .95; \r\n    margin-bottom: 40px; \/* LEBIH BANYAK SPACE *\/\r\n    max-width: 600px; \/* LEBIH LEBAR *\/\r\n    font-weight: 400;\r\n}\r\n\r\n.qs-main-content a { \r\n    color: white; \r\n    text-decoration: none; \r\n    font-family: 'IBM Plex Mono', monospace !important; \r\n    font-size: 13px; \r\n    text-transform: uppercase; \r\n    letter-spacing: 1.5px; \/* LEBIH LONGGAR *\/\r\n    transition: .35s; \r\n    border-bottom: 1px solid var(--green); \r\n    padding-bottom: 6px; \/* LEBIH BANYAK SPACE *\/\r\n    font-weight: 500;\r\n    display: inline-block;\r\n}\r\n\r\n.qs-main-content a:hover { \r\n    color: var(--green); \r\n}\r\n\r\n\/* Switch Teks saat aktif *\/\r\n.qs-card.active .qs-preview-content { \r\n    opacity: 0; \r\n    pointer-events: none; \r\n}\r\n\r\n.qs-card.active .qs-main-content { \r\n    opacity: 1; \r\n    pointer-events: auto; \r\n    transform: translateY(0); \r\n    transition-delay: 0.4s; \r\n}\r\n\r\n\/* ========================================== *\/\r\n\/* PANAH ARSITEKTURAL                         *\/\r\n\/* ========================================== *\/\r\n.qs-arrow {\r\n    position: absolute; \r\n    top: 50%; \r\n    transform: translateY(-50%); \r\n    z-index: 50; \r\n    width: 55px; \r\n    height: 55px; \r\n    border: 1px solid rgba(255, 255, 255, 0.5); \r\n    background: transparent; \r\n    cursor: pointer; \r\n    display: flex; \r\n    align-items: center; \r\n    justify-content: center; \r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.qs-arrow:hover { \r\n    background: white; \r\n    border-color: white; \r\n}\r\n\r\n.qs-arrow svg { \r\n    width: 22px; \r\n    height: 22px; \r\n    stroke: white; \r\n    stroke-width: 1.5; \r\n    fill: none; \r\n    transition: all 0.3s ease; \r\n}\r\n\r\n.qs-arrow:hover svg { \r\n    stroke: var(--blue); \r\n    transform: translateX(3px); \r\n}\r\n\r\n.qs-prev { left: 2vw; }\r\n.qs-next { right: 2vw; }\r\n\r\n\/* ========================================== *\/\r\n\/* PROGRESS BAR BAWAH                         *\/\r\n\/* ========================================== *\/\r\n.qs-progress { \r\n    width: min(1400px, 92vw); \r\n    margin: 40px auto 0; \r\n    height: 2px; \r\n    background: rgba(255,255,255,.2); \r\n}\r\n\r\n.qs-progress-bar { \r\n    width: 25%; \r\n    height: 100%; \r\n    background: var(--green); \r\n    transition: width 0.6s cubic-bezier(0.25, 1, 0.4, 1); \r\n}\r\n\r\n\/* ========================================== *\/\r\n\/* RESPONSIVE MOBILE                          *\/\r\n\/* ========================================== *\/\r\n@media (max-width: 768px) {\r\n    :root { --peek-width: 0px; }\r\n    \r\n    .qs-slider-track { \r\n        transform: translateX(calc(var(--curr-idx) * -100%));\r\n        height: auto; \/* AUTO HEIGHT UNTUK MOBILE *\/\r\n    }\r\n    \r\n    .qs-card { \r\n        width: 100%; \r\n        height: 650px; \/* TINGGI UNTUK MOBILE *\/\r\n    }\r\n    \r\n    .qs-card.active { \r\n        width: 100%; \r\n        height: 650px; \/* SAMA TINGGINYA *\/\r\n    }\r\n    \r\n    .qs-main-content { \r\n        left: 25px; \r\n        right: 25px;\r\n        bottom: 50px; \r\n        max-width: none;\r\n    }\r\n    \r\n    .qs-main-content h3 { \r\n        font-size: 2.25rem; \/* LEBIH BESAR DI MOBILE *\/\r\n        line-height: 1.2;\r\n    }\r\n    \r\n    .qs-main-content p {\r\n        font-size: 1.0625rem;\r\n        line-height: 1.65;\r\n    }\r\n    \r\n    .qs-preview-content {\r\n        left: 25px;\r\n        right: 25px;\r\n        bottom: 40px;\r\n    }\r\n    \r\n    .qs-preview-content h4 {\r\n        font-size: 1.5rem;\r\n        line-height: 1.3;\r\n    }\r\n    \r\n    .qs-arrow { \r\n        width: 45px; \r\n        height: 45px; \r\n    }\r\n    \r\n    .qs-prev { left: 15px; } \r\n    .qs-next { right: 15px; }\r\n\r\n    .qs-news-head {\r\n        flex-wrap: nowrap;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n    \r\n    .qs-news h2 {\r\n        font-size: 1.875rem;\r\n    }\r\n    \r\n    .qs-view {\r\n        font-size: 11px;\r\n        white-space: nowrap;\r\n        flex-shrink: 0;\r\n    }\r\n}\r\n\r\n\/* TABLET *\/\r\n@media (max-width: 1024px) and (min-width: 769px) {\r\n    .qs-slider-track {\r\n        height: 650px; \/* TINGGI UNTUK TABLET *\/\r\n    }\r\n    \r\n    .qs-card {\r\n        height: 500px;\r\n    }\r\n    \r\n    .qs-card.active {\r\n        height: 650px;\r\n    }\r\n    \r\n    .qs-main-content h3 {\r\n        font-size: clamp(2rem, 3.5vw, 3rem);\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const track = document.getElementById('qs-dynamic-track');\r\n    const nextBtn = document.querySelector('.qs-next');\r\n    const prevBtn = document.querySelector('.qs-prev');\r\n    const progressBar = document.querySelector('.qs-progress-bar');\r\n    \r\n    \/\/ Foto cadangan (Fallback) jika post WP tidak punya Featured Image\r\n    const fallbackImages = [\r\n        'https:\/\/images.unsplash.com\/photo-1589829085413-56de8ae18c73?q=80&w=2070&auto=format&fit=crop',\r\n        'https:\/\/images.unsplash.com\/photo-1454165804606-c3d57bc86b40?q=80&w=2070&auto=format&fit=crop',\r\n        'https:\/\/images.unsplash.com\/photo-1507679799987-c73779587ccf?q=80&w=2071&auto=format&fit=crop',\r\n        'https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop'\r\n    ];\r\n\r\n    \/\/ 1. FETCH DATA DARI WORDPRESS REST API\r\n  \/\/ Deteksi bahasa dari HTML lang attribute\r\nconst htmlLang = document.documentElement.lang || 'id';\r\nconst currentLang = htmlLang.startsWith('en') ? 'en' : 'id';\r\n\r\n\/\/ ========================================================\r\n\/\/ SESUAIKAN ANGKA DI BAWAH INI DENGAN ID KATEGORI KAMU!\r\n\/\/ ========================================================\r\nconst idKategoriIndonesia = 65; \/\/ Ganti dengan ID kategori 'artikel'\r\nconst idKategoriInggris = 76;   \/\/ Ganti dengan ID kategori 'articles'\r\n\r\n\/\/ Pilih ID kategori berdasarkan bahasa yang aktif\r\nconst categoryId = currentLang === 'en' ? idKategoriInggris : idKategoriIndonesia;\r\n\r\nconst baseUrl = window.location.origin + (window.location.pathname.includes('\/staging') ? '\/staging' : '');\r\n\r\n\/\/ Tambahkan parameter &categories= untuk filter berdasarkan bahasa\r\nfetch(`${baseUrl}\/wp-json\/wp\/v2\/posts?_embed&per_page=4&categories=${categoryId}`)\r\n    .then(response => response.json())\r\n    .then(posts => {\r\n        let cardsHTML = '';\r\n        \r\n        posts.forEach((post, index) => {\r\n            \/\/ Tentukan Gambar (Pakai dari WP, kalau kosong pakai Fallback)\r\n            let imgUrl = fallbackImages[index % fallbackImages.length];\r\n            if (post._embedded && post._embedded['wp:featuredmedia']) {\r\n                imgUrl = post._embedded['wp:featuredmedia'][0].source_url;\r\n            }\r\n\r\n            \/\/ Tentukan Kategori\r\n            let categoryName = currentLang === 'en' ? 'News' : 'Berita';\r\n            if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0].length > 0) {\r\n                categoryName = post._embedded['wp:term'][0][0].name;\r\n            }\r\n\r\n            \/\/ Bersihkan excerpt dari tag HTML bawaan WP dan batasi karakternya\r\n            let cleanExcerpt = post.excerpt.rendered.replace(\/<\\\/?[^>]+(>|$)\/g, \"\").substring(0, 110) + '...';\r\n            \r\n            \/\/ Set kartu pertama agar langsung membesar (active)\r\n            let activeClass = index === 0 ? 'active' : '';\r\n\r\n            \/\/ Text berdasarkan bahasa\r\n            const readMoreText = currentLang === 'en' ? 'Read Article \u2192' : 'Baca Artikel \u2192';\r\n\r\n            \/\/ Rakit HTML untuk setiap kartu\r\n            cardsHTML += `\r\n                <div class=\"qs-card ${activeClass}\">\r\n                    <img decoding=\"async\" src=\"${imgUrl}\" alt=\"${post.title.rendered.replace(\/<\\\/?[^>]+(>|$)\/g, \"\")}\">\r\n                    <div class=\"qs-overlay-blue\"><\/div>\r\n                    <div class=\"qs-overlay-dark\"><\/div>\r\n                    \r\n                    <div class=\"qs-preview-content\">\r\n                        <span>${categoryName.toUpperCase()}<\/span>\r\n                        <h4>${post.title.rendered}<\/h4>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"qs-main-content\">\r\n                        <div class=\"q-card-meta\">\r\n                            <span>${categoryName}<\/span>\r\n                        <\/div>\r\n                        <h3>${post.title.rendered}<\/h3>\r\n                        <p>${cleanExcerpt}<\/p>\r\n                        <a href=\"${post.link}\">${readMoreText}<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n        });\r\n\r\n        \/\/ Masukkan HTML yang sudah dirakit ke dalam track\r\n        track.innerHTML = cardsHTML;\r\n\r\n        \/\/ 2. NYALAKAN MESIN SLIDER SETELAH KARTU MUNCUL\r\n        initSlider();\r\n    })\r\n    .catch(error => {\r\n        const errorMsg = currentLang === 'en' ? 'Failed to load articles.' : 'Gagal memuat artikel.';\r\n        track.innerHTML = `<p style=\"color:white; padding:20px;\">${errorMsg}<\/p>`;\r\n        console.error('Error fetching posts:', error);\r\n    });\r\n\r\n    \/\/ FUNGSI LOGIKA SLIDER (Dipanggil setelah Fetch selesai)\r\n    function initSlider() {\r\n        const cards = document.querySelectorAll('.qs-card');\r\n        const totalCards = cards.length;\r\n        let currentIndex = 0;\r\n\r\n        function moveSlider(index) {\r\n            if (index >= totalCards) index = 0;\r\n            if (index < 0) index = totalCards - 1;\r\n            \r\n            currentIndex = index;\r\n\r\n            cards.forEach(card => card.classList.remove('active'));\r\n            cards[currentIndex].classList.add('active');\r\n            \r\n            track.style.setProperty('--curr-idx', currentIndex);\r\n            progressBar.style.width = ((currentIndex + 1) \/ totalCards) * 100 + '%';\r\n        }\r\n\r\n        \/\/ Event Listener Panah\r\n        \/\/ (Kita hapus listener lama biar gak dobel pas di-reinit)\r\n        const newNextBtn = nextBtn.cloneNode(true);\r\n        const newPrevBtn = prevBtn.cloneNode(true);\r\n        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);\r\n        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);\r\n\r\n        newNextBtn.addEventListener('click', () => moveSlider(currentIndex + 1));\r\n        newPrevBtn.addEventListener('click', () => moveSlider(currentIndex - 1));\r\n\r\n        \/\/ Event Listener Klik Kartu\r\n        cards.forEach((card, index) => {\r\n            card.addEventListener('click', () => {\r\n                if (currentIndex !== index) moveSlider(index);\r\n            });\r\n        });\r\n        \r\n        \/\/ Inisialisasi progress bar saat pertama kali load\r\n        progressBar.style.width = (1 \/ totalCards) * 100 + '%';\r\n    }\r\n});\r\n<\/script>\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\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f2d86b9 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"f2d86b9\" data-element_type=\"section\" data-e-type=\"section\">\n\t\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-92266eb\" data-id=\"92266eb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2209b70 elementor-widget elementor-widget-html\" data-id=\"2209b70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"q-team\">\r\n\r\n    <div class=\"q-team-left\">\r\n\r\n        <span class=\"q-team-label\">TIM KAMI, MITRA ANDA<\/span>\r\n\r\n        <h2 class=\"q-team-title\">\r\n            <span>KENALI<\/span>\r\n            <span class=\"green\">TIM KAMI<\/span>\r\n        <\/h2>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"q-team-right\">\r\n\r\n        <p class=\"q-team-text\">\r\n            Di balik setiap solusi hukum  terdapat tim profesional\r\n            yang siap mendengarkan, menganalisis, dan memberikan saran yang\r\n            terbaik. Kenali para ahli kami yang berkomitmen mendampingi\r\n            perjalanan bisnis Anda.\r\n        <\/p>\r\n\r\n        <a href=\"\/staging\/tentang-kami\/\" class=\"q-team-btn\">\r\n            <span>LIHAT TIM KAMI<\/span>\r\n\r\n            <svg width=\"72\" height=\"16\" viewBox=\"0 0 72 16\" fill=\"none\">\r\n                <path d=\"M0 8H68\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n                <path d=\"M61 1L68 8L61 15\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n            <\/svg>\r\n\r\n        <\/a>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\r\n:root{\r\n    --blue:#0573e3;\r\n    --green:#6cffba;\r\n    --dark:#54565a;\r\n    --light:#f7f7f7;\r\n}\r\n\r\n.q-team{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:center;\r\n    gap:7vw;\r\n    padding:8vw;\r\n    background:#fff;\r\n}\r\n\r\n.q-team-left{\r\n    width:50%;\r\n}\r\n\r\n.q-team-label{\r\n    display:block;\r\n    margin-bottom:40px;\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:14px;\r\n    font-weight:600;\r\n    letter-spacing:.18em;\r\n    text-transform:uppercase;\r\n    color:var(--blue);\r\n}\r\n\r\n.q-team-title{\r\n    margin:0;\r\n    display:flex;\r\n    flex-direction:column;\r\n    line-height:.9;\r\n    font-family:'Space Grotesk',sans-serif;\r\n    font-size:clamp(4rem,8vw,8rem);\r\n    font-weight:700;\r\n    color:#111;\r\n}\r\n\r\n.q-team-title .green{\r\n    color:var(--blue);\r\n}\r\n\r\n.q-team-right{\r\n    width:40%;\r\n}\r\n\r\n.q-team-text{\r\n    margin:0 0 60px;\r\n    font-family:'Work Sans',sans-serif;\r\n    font-size:1.08rem;\r\n    line-height:1.9;\r\n    color:var(--dark);\r\n    max-width:520px;\r\n}\r\n\r\n.q-team-btn{\r\n    width:max-content;\r\n    display:flex;\r\n    align-items:center;\r\n    gap:20px;\r\n    text-decoration:none;\r\n    color:var(--blue);\r\n    font-family:'IBM Plex Mono',monospace;\r\n    font-size:15px;\r\n    font-weight:600;\r\n    letter-spacing:.12em;\r\n    transition:.3s;\r\n}\r\n\r\n.q-team-btn svg{\r\n    transition:.3s;\r\n}\r\n\r\n.q-team-btn:hover{\r\n    color:#003b7d;\r\n}\r\n\r\n.q-team-btn:hover svg{\r\n    transform:translateX(10px);\r\n}\r\n\r\n@media(max-width:991px){\r\n\r\n.q-team{\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n    padding:80px 24px;\r\n}\r\n\r\n.q-team-left,\r\n.q-team-right{\r\n    width:100%;\r\n}\r\n\r\n.q-team-title{\r\n    font-size:clamp(3.5rem,16vw,5rem);\r\n}\r\n\r\n.q-team-text{\r\n    margin:40px 0;\r\n}\r\n\r\n}\r\n\r\n<\/style>\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KONSULTAN HUKUM PROFESIONAL Mengutamakan Solusi. Mengedepankan Presisi Hukum. Mendampingi Langkah Strategis Bisnis Anda. Konsultasi \u27f6 Hukum Korporasi Litigasi Kekayaan Intelektual Pertanahan Ketenagakerjaan Hukum Korporasi Litigasi Kekayaan Intelektual Pertanahan Ketenagakerjaan TENTANG QUANSEL Mitra Terpercaya. Quansel hadir sebagai mitra terpercaya dalam menangani urusan hukum bisnis secara presisi. Keahlian Komprehensif. Tim ahli yang terkemuka siap memberikan layanan hukum [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"slim_seo":{"title":"Quansel | Firma Hukum Profesional & Solusi Legal di Indonesia","description":"Quansel menyediakan layanan hukum bagi individu dan perusahaan. Dapatkan pendampingan hukum yang profesional bersama tim kami. Hubungi kami sekarang."},"footnotes":""},"class_list":["post-814","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/pages\/814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/comments?post=814"}],"version-history":[{"count":231,"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/pages\/814\/revisions"}],"predecessor-version":[{"id":1777,"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/pages\/814\/revisions\/1777"}],"wp:attachment":[{"href":"https:\/\/quansel.com\/staging\/wp-json\/wp\/v2\/media?parent=814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}