{"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-06-30T07:22:19","modified_gmt":"2026-06-30T07:22:19","slug":"beranda","status":"publish","type":"page","link":"https:\/\/quansel.com\/staging\/?page_id=814&lang=id","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    <!-- TOP BAR: Blok Biru dengan Elemen SVG Vektor -->\r\n    <div class=\"q-topbar\">\r\n        <!-- SVG Vektor elastis -->\r\n        <svg viewBox=\"0 0 1400 100\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\">\r\n            <text x=\"0\" y=\"80\" \r\n                  font-family=\"'Space Grotesk', sans-serif\" \r\n                  font-weight=\"700\" \r\n                  fill=\"#ffffff\" \r\n                  font-size=\"82\" \r\n                  textLength=\"1400\" \r\n                  lengthAdjust=\"spacing\">KONSULTAN HUKUM KORPORASI<\/text>\r\n        <\/svg>\r\n    <\/div>\r\n\r\n    <!-- AREA GAMBAR (Menyesuaikan sisa layar PC) -->\r\n    <div class=\"q-image-area\" style=\"background-image: url('https:\/\/quansel.com\/staging\/wp-content\/uploads\/2025\/02\/Tim-1_11zon-scaled.jpg');\">\r\n        \r\n        <!-- KOTAK KIRI BAWAH -->\r\n        <div class=\"q-box-left\">\r\n            Fokus Pada Solusi. Berbasis Presisi Hukum.\r\n        <\/div>\r\n\r\n        <!-- KOTAK KANAN BAWAH -->\r\n        <div class=\"q-box-right\">\r\n            <h2>Mendampingi Langkah Strategis Bisnis Anda.<\/h2>\r\n            <a href=\"#\" class=\"q-hero-btn\">\r\n                Konsultasi <span>\u27f6<\/span>\r\n            <\/a>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    \/* Import Font Resmi *\/\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@500;600&family=Space+Grotesk:wght@600;700&family=Work+Sans:wght@500;600&display=swap');\r\n\r\n    \/* Reset Ketat Elementor\/Global *\/\r\n    .q-hero-container, .q-hero-container * {\r\n        box-sizing: border-box;\r\n        margin: 0;\r\n        padding: 0;\r\n        border-radius: 0 !important;\r\n        font-style: normal !important;\r\n    }\r\n\r\n    .q-hero-container {\r\n        width: 100%;\r\n        height: 100vh; \/* Kita pakai 100vh karena headernya transparan\/menimpa ke bawah *\/\r\n        display: flex;\r\n        flex-direction: column;\r\n        background-color: #0573e3; \r\n        overflow: hidden; \r\n    }\r\n\r\n    \/* 1. TOP BAR *\/\r\n    .q-topbar {\r\n        background-color: #0573e3;\r\n        \/* KUNCI: PADDING ATAS DIBESARKAN AGAR MENGHINDAR DARI HEADER ELEMENTOR *\/\r\n        padding-top: 120px; \r\n        padding-bottom: 15px;\r\n        padding-left: 0;\r\n        padding-right: 0;\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        flex-shrink: 0; \r\n    }\r\n\r\n    \/* Mengatur kontainer SVG agar elastis *\/\r\n    .q-topbar svg {\r\n        display: block;\r\n        width: 100%;\r\n        height: auto;\r\n    }\r\n\r\n    \/* 2. AREA GAMBAR *\/\r\n    .q-image-area {\r\n        flex: 1; \r\n        width: 100%;\r\n        background-position: center 20%; \r\n        background-size: cover;\r\n        background-repeat: no-repeat;\r\n        position: relative;\r\n    }\r\n\r\n    \/* 3. KOTAK KIRI BAWAH *\/\r\n    .q-box-left {\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        background-color: #eaf3fc !important; \r\n        padding: 12px 20px;\r\n        font-family: 'IBM Plex Mono', monospace;\r\n        font-size: 11px;\r\n        color: #54565a;\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        border-right: 3px solid #0573e3;\r\n        max-width: 320px;\r\n        z-index: 10;\r\n    }\r\n\r\n    \/* 4. KOTAK KANAN BAWAH *\/\r\n    .q-box-right {\r\n        position: absolute;\r\n        bottom: 0; \r\n        right: 5vw;\r\n        background-color: #ffffff !important; \r\n        padding: 30px;\r\n        width: 90%;\r\n        max-width: 320px;\r\n        z-index: 10;\r\n        border-top: 3px solid #0573e3; \r\n    }\r\n\r\n    .q-box-right h2 {\r\n        font-family: 'Work Sans', sans-serif;\r\n        font-size: 1.4rem;\r\n        color: #000000;\r\n        line-height: 1.25;\r\n        margin-bottom: 20px;\r\n        font-weight: 500;\r\n        letter-spacing: -0.01em;\r\n    }\r\n\r\n    \/* 5. TOMBOL CTA *\/\r\n    .q-hero-btn {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        background-color: #0573e3 !important;\r\n        color: #ffffff !important;\r\n        font-family: 'IBM Plex Mono', monospace;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        text-decoration: none;\r\n        padding: 15px 20px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        transition: background-color 0.3s;\r\n    }\r\n\r\n    .q-hero-btn:hover { background-color: #54565a !important; }\r\n    \r\n    .q-hero-btn span {\r\n        color: #6cffba; \r\n        font-size: 16px;\r\n        transition: transform 0.3s;\r\n    }\r\n    \r\n    .q-hero-btn:hover span { transform: translateX(5px); }\r\n\r\n    \/* Responsivitas Mobile *\/\r\n    @media (max-width: 768px) {\r\n        .q-hero-container { height: auto; min-height: 100vh; }\r\n        .q-topbar { padding-top: 100px; padding-left: 20px; padding-right: 20px; } \/* Jarak aman di HP *\/\r\n        \/* Matikan SVG melar di mobile agar font-size normal saat dibaca di layar HP *\/\r\n        .q-topbar svg { height: auto; preserveAspectRatio: xMidYMid meet; }\r\n        .q-topbar text { font-size: 55px; textLength: 100%; } \r\n        .q-image-area { min-height: 50vh; }\r\n        .q-box-left { display: none; }\r\n        .q-box-right { position: relative; right: 0; max-width: 100%; }\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-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-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=\"\/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\">\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; \/* KUNCI: Lebar artikel yang ngintip *\/\r\n}\r\n\r\n.qs-news * { border-radius: 0 !important; font-style: normal !important; }\r\n\r\n.qs-news { background: var(--blue); padding: 80px 0; overflow: hidden; position: relative; }\r\n\r\n\/* DEKORASI LINGKARAN HIJAU BLUR *\/\r\n.qs-news::before {\r\n    content: \"\"; position: absolute; width: 700px; height: 700px; right: -280px; top: -280px;\r\n    border-radius: 50% !important; background: radial-gradient(circle, var(--green), transparent 70%); opacity: .08;\r\n}\r\n\r\n\/* HEADER SECTION *\/\r\n.qs-news-head { width: min(1400px, 92vw); margin: auto; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }\r\n.qs-label { display: block; font-family: 'IBM Plex Mono', monospace; color: var(--green); font-size: 12px; letter-spacing: 2px; margin-bottom: 15px; font-weight: 600;}\r\n.qs-news h2 { font-family: 'Space Grotesk', sans-serif; color: white; font-size: 3rem; font-weight: 700; line-height: 1; }\r\n.qs-view { font-family: 'IBM Plex Mono'; text-decoration: none; color: white; font-size: 13px; transition: .35s; border-bottom: 1px solid white; padding-bottom: 5px; }\r\n.qs-view:hover { color: var(--green); border-color: var(--green); }\r\n\r\n\/* ========================================== *\/\r\n\/* WADAH & REL SLIDER (THE MAGIC SAUCE)       *\/\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\/* Garis loading indikator yang berdenyut kaku *\/\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\/* Teks Loading gaya IBM Plex Mono *\/\r\n.qs-loading-text {\r\n    font-family: 'IBM Plex Mono', monospace;\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\/* Animasi Denyut Clean *\/\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; \/* KUNCI: Menempatkan kartu kecil di tengah secara vertikal *\/\r\n    height: 600px; \/* Menahan tinggi maksimal area *\/\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: 440px; \/* KUNCI: Tinggi kartu ngintip dibuat lebih pendek *\/\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); \/* Efek membesar untuk lebar & tinggi *\/\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: 600px; \/* KUNCI: Melebar dan meninggi maksimal saat aktif *\/\r\n    cursor: default;\r\n}\r\n\/* FOTO & ZOOM EFEK *\/\r\n.qs-card img {\r\n    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease;\r\n}\r\n.qs-card:hover img { transform: scale(1.05); }\r\n\r\n\/* OVERLAY WARNA (Biru untuk aktif, Gelap untuk ngintip) *\/\r\n.qs-overlay-blue, .qs-overlay-dark {\r\n    position: absolute; inset: 0; transition: opacity 0.8s ease;\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; \/* Sembunyi secara default *\/\r\n}\r\n.qs-overlay-dark {\r\n    background: rgba(0, 0, 0, 0.6);\r\n    opacity: 1; \/* Muncul di kartu ngintip *\/\r\n}\r\n\r\n\/* Switch Overlay saat aktif *\/\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                                *\/\r\n\/* ========================================== *\/\r\n\r\n\/* Teks Ngintip (Preview) *\/\r\n.qs-preview-content {\r\n    position: absolute; left: 35px; right: 35px; bottom: 40px; color: white;\r\n    transition: opacity 0.4s ease;\r\n}\r\n.qs-preview-content span { display: block; font-family: 'IBM Plex Mono'; font-size: 11px; color: var(--green); margin-bottom: 12px; letter-spacing: 2px; }\r\n.qs-preview-content h4 { font-family: 'Space Grotesk'; font-size: 1.6rem; line-height: 1.2; }\r\n\r\n\/* Teks Utama (Aktif) *\/\r\n.qs-main-content {\r\n    position: absolute; left: 6vw; bottom: 8vh; max-width: 650px; color: white;\r\n    opacity: 0; pointer-events: none; transform: translateY(20px);\r\n    transition: all 0.6s ease;\r\n}\r\n.qs-main-content .qs-category { font-family: 'IBM Plex Mono'; font-size: 12px; color: var(--green); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; }\r\n.qs-main-content h3 { font-family: 'Space Grotesk'; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.1; margin-bottom: 25px; }\r\n.qs-main-content p { font-family: 'Work Sans'; font-size: 1.1rem; line-height: 1.6; opacity: .9; margin-bottom: 35px; max-width: 550px;}\r\n.qs-main-content a { color: white; text-decoration: none; font-family: 'IBM Plex Mono'; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; transition: .35s; border-bottom: 1px solid var(--green); padding-bottom: 5px; }\r\n.qs-main-content a:hover { color: var(--green); }\r\n\r\n\/* Switch Teks saat aktif *\/\r\n.qs-card.active .qs-preview-content { opacity: 0; pointer-events: none; }\r\n.qs-card.active .qs-main-content { opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0.4s; }\r\n\r\n\r\n\/* ========================================== *\/\r\n\/* PANAH ARSITEKTURAL (DIAM DI TEMPAT)        *\/\r\n\/* ========================================== *\/\r\n.qs-arrow {\r\n    position: absolute; top: 50%; transform: translateY(-50%); z-index: 50; \r\n    width: 55px; height: 55px; border: 1px solid rgba(255, 255, 255, 0.5); \r\n    background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; \r\n    transition: all 0.4s ease;\r\n}\r\n.qs-arrow:hover { background: white; border-color: white; }\r\n.qs-arrow svg { width: 22px; height: 22px; stroke: white; stroke-width: 1.5; fill: none; transition: all 0.3s ease; }\r\n.qs-arrow:hover svg { stroke: var(--blue); transform: translateX(3px); }\r\n\r\n\/* Posisi Panah (Masuk ke dalam area layar) *\/\r\n.qs-prev { left: 2vw; }\r\n.qs-next { right: 2vw; }\r\n\r\n\r\n\/* ========================================== *\/\r\n\/* PROGRESS BAR BAWAH                         *\/\r\n\/* ========================================== *\/\r\n.qs-progress { width: min(1400px, 92vw); margin: 40px auto 0; height: 2px; background: rgba(255,255,255,.2); }\r\n.qs-progress-bar { width: 25%; height: 100%; background: var(--green); transition: width 0.6s cubic-bezier(0.25, 1, 0.4, 1); }\r\n\r\n\/* RESPONSIVE MOBILE *\/\r\n@media (max-width: 768px) {\r\n    :root { --peek-width: 0px; \/* Hilangkan efek ngintip di HP karena layar sempit *\/ }\r\n    .qs-slider-track { transform: translateX(calc(var(--curr-idx) * -100%)); }\r\n    .qs-card { width: 100%; height: 500px; }\r\n    .qs-card.active { width: 100%; }\r\n    .qs-main-content { left: 25px; bottom: 40px; right: 25px; }\r\n    .qs-main-content h3 { font-size: 2rem; }\r\n    .qs-arrow { width: 45px; height: 45px; }\r\n    .qs-prev { left: 15px; } .qs-next { right: 15px; }\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    fetch('https:\/\/quansel.com\/wp-json\/wp\/v2\/posts?_embed&per_page=4')\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 = '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                \/\/ Rakit HTML untuk setiap kartu\r\n                cardsHTML += `\r\n                    <div class=\"qs-card ${activeClass}\">\r\n                        <img decoding=\"async\" src=\"${imgUrl}\">\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=\"qs-category\">${categoryName}<\/div>\r\n                            <h3>${post.title.rendered}<\/h3>\r\n                            <p>${cleanExcerpt}<\/p>\r\n                            <a href=\"${post.link}\">Baca Artikel \u2192<\/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            track.innerHTML = '<p style=\"color:white; padding:20px;\">Gagal memuat artikel.<\/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-f822362 elementor-section-boxed 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-sticky\">\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-text-track\">\r\n                <div class=\"q-about-step active\" data-index=\"0\">\r\n                    <h2>Mitra Terpercaya.<\/h2>\r\n                    <p>Quansel hadir sebagai mitra terpercaya dalam menangani urusan hukum bisnis Anda secara presisi dan strategis.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"q-about-step future\" data-index=\"1\">\r\n                    <h2>Keahlian Komprehensif.<\/h2>\r\n                    <p>Tim ahli kami yang terkemuka siap memberikan layanan hukum berkualitas untuk mendukung dan mengamankan kesuksesan korporasi Anda.<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"q-about-step future\" data-index=\"2\">\r\n                    <h2>Fokus & Kepatuhan.<\/h2>\r\n                    <p>Fokuslah mencapai tujuan dengan lebih efisien, sementara tim kami memastikan Anda mematuhi seluruh regulasi yang berlaku secara mutlak.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"q-about-visual-col\">\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\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\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\/* 1. WRAPPER UTAMA *\/\r\n.q-about-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 350vh; \/* Lebih tinggi untuk durasi scroll lebih lama *\/\r\n    background-color: #ffffff;\r\n}\r\n\r\n\/* 2. STICKY CONTAINER *\/\r\n.q-about-sticky {\r\n    position: sticky;\r\n    top: 50%; \/* Pusat vertikal *\/\r\n    transform: translateY(-50%); \/* Offset agar benar-benar di tengah *\/\r\n    width: 100%;\r\n    height: 80vh;\r\n    display: flex;\r\n    align-items: center;\r\n    z-index: 10; \/* Pastikan di atas elemen lain *\/\r\n}\r\n\r\n\/* 3. SISI KIRI (TEKS) *\/\r\n.q-about-text-col {\r\n    width: 50%;\r\n    padding-left: 8vw;\r\n    padding-right: 4vw;\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: 40px;\r\n    display: block;\r\n}\r\n\r\n.q-about-text-track {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 280px; \r\n    overflow: hidden; \/* Penting untuk menyembunyikan teks yang keluar *\/\r\n}\r\n\r\n\/* Teks Transisi *\/\r\n.q-about-step {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    width: 100%;\r\n    transform: translateY(-50%);\r\n    transition: all 0.8s cubic-bezier(0.25, 1, 0.4, 1);\r\n    pointer-events: none;\r\n    opacity: 0.15; \/* Default opacity untuk yang tidak aktif *\/\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(2rem, 3.5vw, 3.5rem);\r\n    font-weight: 700;\r\n    line-height: 1.1;\r\n    margin-bottom: 20px;\r\n    letter-spacing: -0.02em;\r\n    transition: all 0.6s ease;\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.1rem;\r\n    line-height: 1.6;\r\n    max-width: 480px;\r\n    transition: all 0.6s ease;\r\n}\r\n\r\n\/* State Animasi Teks - ACTIVE (yang sedang dilihat) *\/\r\n.q-about-step.active {\r\n    opacity: 1;\r\n    transform: translateY(-50%) scale(1);\r\n    filter: blur(0);\r\n    z-index: 3;\r\n}\r\n\r\n.q-about-step.active h2 {\r\n    transform: translateY(0);\r\n}\r\n\r\n.q-about-step.active p {\r\n    transform: translateY(0);\r\n}\r\n\r\n\/* State PAST (sudah dilewati) - blur di atas *\/\r\n.q-about-step.past {\r\n    opacity: 0.2;\r\n    transform: translateY(-150%) scale(0.95);\r\n    filter: blur(4px);\r\n    z-index: 1;\r\n}\r\n\r\n.q-about-step.past h2 {\r\n    transform: translateY(-10px);\r\n}\r\n\r\n\/* State FUTURE (belum dicapai) - blur di bawah *\/\r\n.q-about-step.future {\r\n    opacity: 0.2;\r\n    transform: translateY(50%) scale(0.95);\r\n    filter: blur(4px);\r\n    z-index: 2;\r\n}\r\n\r\n.q-about-step.future h2 {\r\n    transform: translateY(10px);\r\n}\r\n\r\n\/* 4. SISI KANAN (LOGO) *\/\r\n.q-about-visual-col {\r\n    width: 50%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\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}\r\n\r\n.q-about-logo {\r\n    width: 100%;\r\n    height: auto;\r\n    object-fit: contain;\r\n    transform: translateX(100vw);\r\n    opacity: 0;\r\n    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s 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.2s;\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-sticky {\r\n        flex-direction: column-reverse;\r\n        justify-content: center;\r\n        height: 100vh;\r\n        top: 50%;\r\n    }\r\n    .q-about-text-col, .q-about-visual-col { width: 100%; }\r\n    .q-about-text-col { padding: 0 5vw; text-align: center; }\r\n    .q-about-step p { margin: 0 auto; }\r\n    .q-logo-box { width: 180px; height: 180px; margin-bottom: 40px; }\r\n    .q-about-text-track { height: 320px; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const section = document.getElementById('q-about-section');\r\n    const steps = document.querySelectorAll('.q-about-step');\r\n    const logo = document.querySelector('.q-about-logo');\r\n    const totalSteps = steps.length;\r\n    \r\n    let currentProgress = 0;\r\n    let targetProgress = 0;\r\n    let isScrolling = false;\r\n    let scrollTimeout;\r\n\r\n    \/\/ 1. Munculkan Logo saat masuk layar\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                setTimeout(() => {\r\n                    logo.classList.add('entered');\r\n                }, 300);\r\n            }\r\n        });\r\n    }, { threshold: 0.2 });\r\n    \r\n    observer.observe(section);\r\n\r\n    \/\/ 2. Smooth Scroll Handler dengan requestAnimationFrame\r\n    function updateScroll() {\r\n        const rect = section.getBoundingClientRect();\r\n        const viewportHeight = window.innerHeight;\r\n        \r\n        \/\/ Hitung berapa banyak section yang sudah ter-scroll\r\n        const scrollableHeight = rect.height - viewportHeight;\r\n        let progress = -rect.top \/ scrollableHeight;\r\n        \r\n        \/\/ Clamp progress antara 0 dan 1\r\n        progress = Math.max(0, Math.min(1, progress));\r\n        \r\n        \/\/ Smooth interpolation (lerp) untuk pergerakan yang halus\r\n        currentProgress += (progress - currentProgress) * 0.1;\r\n        \r\n        \/\/ Tentukan index aktif berdasarkan progress\r\n        const activeIndex = Math.floor(currentProgress * (totalSteps - 0.01));\r\n        const clampedIndex = Math.min(activeIndex, totalSteps - 1);\r\n        \r\n        \/\/ Update classes\r\n        steps.forEach((step, index) => {\r\n            step.classList.remove('active', 'past', 'future');\r\n            \r\n            if (index === clampedIndex) {\r\n                step.classList.add('active');\r\n            } else if (index < clampedIndex) {\r\n                step.classList.add('past');\r\n            } else {\r\n                step.classList.add('future');\r\n            }\r\n        });\r\n        \r\n        \/\/ Lanjutkan animasi jika masih ada perbedaan\r\n        if (Math.abs(progress - currentProgress) > 0.001) {\r\n            requestAnimationFrame(updateScroll);\r\n        }\r\n    }\r\n\r\n    \/\/ Throttled scroll event\r\n    let ticking = false;\r\n    window.addEventListener('scroll', () => {\r\n        if (!ticking) {\r\n            window.requestAnimationFrame(() => {\r\n                updateScroll();\r\n                ticking = false;\r\n            });\r\n            ticking = true;\r\n        }\r\n    }, { passive: true });\r\n\r\n    \/\/ Trigger sekali di awal\r\n    updateScroll();\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<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KONSULTAN HUKUM KORPORASI Fokus Pada Solusi. Berbasis Presisi Hukum. Mendampingi Langkah Strategis Bisnis Anda. Konsultasi \u27f6 Hukum Korporasi Litigasi Kekayaan Intelektual Pertanahan Ketenagakerjaan Hukum Korporasi Litigasi Kekayaan Intelektual Pertanahan Ketenagakerjaan WAWASAN TERBARU Artikel &#038; Berita Lihat Semua \u2192 MEMUAT ARTIKEL&#8230; TENTANG QUANSEL Mitra Terpercaya. Quansel hadir sebagai mitra terpercaya dalam menangani urusan hukum bisnis Anda [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-814","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/quansel.com\/staging\/index.php?rest_route=\/wp\/v2\/pages\/814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quansel.com\/staging\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quansel.com\/staging\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quansel.com\/staging\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quansel.com\/staging\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=814"}],"version-history":[{"count":139,"href":"https:\/\/quansel.com\/staging\/index.php?rest_route=\/wp\/v2\/pages\/814\/revisions"}],"predecessor-version":[{"id":1310,"href":"https:\/\/quansel.com\/staging\/index.php?rest_route=\/wp\/v2\/pages\/814\/revisions\/1310"}],"wp:attachment":[{"href":"https:\/\/quansel.com\/staging\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}