{"id":2379,"date":"2021-08-08T16:42:45","date_gmt":"2021-08-08T16:42:45","guid":{"rendered":"https:\/\/pn-simpangtigaredelong.go.id\/newpnstr\/?page_id=2379"},"modified":"2026-10-02T02:15:57","modified_gmt":"2026-10-01T19:15:57","slug":"beranda","status":"publish","type":"page","link":"https:\/\/pn-simpangtigaredelong.go.id\/","title":{"rendered":"Beranda"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2379\" class=\"elementor elementor-2379\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82d2391 e-con-full e-flex e-con e-parent\" data-id=\"82d2391\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2484bb5 elementor-widget elementor-widget-html\" data-id=\"2484bb5\" 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<style>\r\n\/* =========================================================\r\n   PN SIMPANG TIGA REDELONG\r\n   HERO SLIDER\r\n   FULL WIDTH\r\n   ========================================================= *\/\r\n\r\n.pn-hero-slider {\r\n    position: relative;\r\n    width: 100vw;\r\n    max-width: 100vw;\r\n\r\n    margin-left: calc(50% - 50vw);\r\n    margin-right: calc(50% - 50vw);\r\n\r\n    height: 560px;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #9A2109;\r\n\r\n    isolation: isolate;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SLIDE\r\n   ========================================================= *\/\r\n\r\n.pn-hero-slide {\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    opacity: 0;\r\n    visibility: hidden;\r\n\r\n    transition:\r\n        opacity .8s ease,\r\n        visibility .8s ease;\r\n\r\n    background-size: cover;\r\n    background-position: center center;\r\n\r\n    z-index: 1;\r\n}\r\n\r\n\r\n.pn-hero-slide.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n\r\n    z-index: 2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND IMAGE\r\n   ========================================================= *\/\r\n\r\n.pn-hero-slide::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    background-image:\r\n        var(--pn-hero-image);\r\n\r\n    background-size: cover;\r\n    background-position: center;\r\n\r\n    transform: scale(1.02);\r\n\r\n    transition:\r\n        transform 8s ease;\r\n\r\n    z-index: -2;\r\n}\r\n\r\n\r\n.pn-hero-slide.active::before {\r\n\r\n    transform: scale(1.07);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   OVERLAY\r\n   ========================================================= *\/\r\n\r\n.pn-hero-slide::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(65, 10, 4, .88) 0%,\r\n            rgba(90, 12, 5, .72) 35%,\r\n            rgba(100, 15, 6, .38) 68%,\r\n            rgba(60, 8, 3, .18) 100%\r\n        );\r\n\r\n    z-index: -1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n   ========================================================= *\/\r\n\r\n.pn-hero-content {\r\n\r\n    position: relative;\r\n\r\n    z-index: 5;\r\n\r\n    width:\r\n        min(1240px, calc(100% - 60px));\r\n\r\n    height: 100%;\r\n\r\n    margin: 0 auto;\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    justify-content: center;\r\n\r\n    align-items: flex-start;\r\n\r\n    padding-bottom: 35px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LABEL\r\n   ========================================================= *\/\r\n\r\n.pn-hero-label {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    margin-bottom: 16px;\r\n\r\n    padding: 8px 15px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(242,210,138,.65);\r\n\r\n    border-radius: 30px;\r\n\r\n    background:\r\n        rgba(0,0,0,.18);\r\n\r\n    color:\r\n        #F2D28A;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    font-size: 12px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n    text-transform: uppercase;\r\n\r\n    backdrop-filter:\r\n        blur(5px);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(5px);\r\n}\r\n\r\n\r\n.pn-hero-label::before {\r\n\r\n    content: \"\";\r\n\r\n    width: 7px;\r\n    height: 7px;\r\n\r\n    flex: 0 0 7px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        #F2D28A;\r\n\r\n    box-shadow:\r\n        0 0 10px\r\n        rgba(242,210,138,.8);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n   ========================================================= *\/\r\n\r\n.pn-hero-title {\r\n\r\n    max-width: 720px;\r\n\r\n    margin:\r\n        0 0 17px 0;\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    font-size:\r\n        clamp(36px, 4.2vw, 62px);\r\n\r\n    font-weight:\r\n        800;\r\n\r\n    line-height:\r\n        1.08;\r\n\r\n    letter-spacing:\r\n        -1.2px;\r\n\r\n    text-shadow:\r\n        0 3px 18px\r\n        rgba(0,0,0,.35);\r\n}\r\n\r\n\r\n.pn-hero-title span {\r\n\r\n    color:\r\n        #F2D28A;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n   ========================================================= *\/\r\n\r\n.pn-hero-description {\r\n\r\n    max-width: 650px;\r\n\r\n    margin:\r\n        0 0 28px 0;\r\n\r\n    color:\r\n        rgba(255,255,255,.90);\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    font-size:\r\n        17px;\r\n\r\n    font-weight:\r\n        400;\r\n\r\n    line-height:\r\n        1.7;\r\n\r\n    text-shadow:\r\n        0 2px 8px\r\n        rgba(0,0,0,.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUTTON\r\n   ========================================================= *\/\r\n\r\n.pn-hero-button {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 10px;\r\n\r\n    min-height:\r\n        46px;\r\n\r\n    padding:\r\n        0 22px;\r\n\r\n    border:\r\n        1px solid #9A2109;\r\n\r\n    border-radius:\r\n        5px;\r\n\r\n    background:\r\n        #9A2109;\r\n\r\n    color:\r\n        #ffffff !important;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    font-size:\r\n        13px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n    letter-spacing:\r\n        .3px;\r\n\r\n    text-decoration:\r\n        none !important;\r\n\r\n    box-shadow:\r\n        0 7px 20px\r\n        rgba(0,0,0,.20);\r\n\r\n    transition:\r\n        background .25s ease,\r\n        transform .25s ease,\r\n        box-shadow .25s ease;\r\n}\r\n\r\n\r\n.pn-hero-button::after {\r\n\r\n    content:\r\n        \"\u2192\";\r\n\r\n    font-size:\r\n        17px;\r\n\r\n    line-height:\r\n        1;\r\n\r\n    transition:\r\n        transform .25s ease;\r\n}\r\n\r\n\r\n.pn-hero-button:hover {\r\n\r\n    background:\r\n        #7D1B08;\r\n\r\n    color:\r\n        #ffffff !important;\r\n\r\n    transform:\r\n        translateY(-2px);\r\n\r\n    box-shadow:\r\n        0 10px 25px\r\n        rgba(0,0,0,.28);\r\n}\r\n\r\n\r\n.pn-hero-button:hover::after {\r\n\r\n    transform:\r\n        translateX(4px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO NAVIGATION\r\n   ========================================================= *\/\r\n\r\n.pn-hero-navigation {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 30;\r\n\r\n    left: 50%;\r\n\r\n    bottom: 20px;\r\n\r\n    transform:\r\n        translateX(-50%);\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 10px;\r\n\r\n    height: 36px;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARROW BUTTON\r\n   ========================================================= *\/\r\n\r\n.pn-hero-arrow {\r\n\r\n    position: relative;\r\n\r\n    display: flex !important;\r\n\r\n    align-items: center !important;\r\n\r\n    justify-content: center !important;\r\n\r\n    width: 36px !important;\r\n    height: 36px !important;\r\n\r\n    min-width: 36px !important;\r\n    min-height: 36px !important;\r\n\r\n    max-width: 36px !important;\r\n    max-height: 36px !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.42) !important;\r\n\r\n    border-radius:\r\n        50% !important;\r\n\r\n    background:\r\n        rgba(25,10,7,.48) !important;\r\n\r\n    color:\r\n        transparent !important;\r\n\r\n    font-size:\r\n        0 !important;\r\n\r\n    line-height:\r\n        0 !important;\r\n\r\n    box-shadow:\r\n        none !important;\r\n\r\n    outline:\r\n        none !important;\r\n\r\n    cursor:\r\n        pointer;\r\n\r\n    backdrop-filter:\r\n        blur(5px);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(5px);\r\n\r\n    transition:\r\n        background .25s ease,\r\n        border-color .25s ease,\r\n        transform .25s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT ARROW\r\n   ========================================================= *\/\r\n\r\n.pn-hero-prev::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 50%;\r\n    left: 50%;\r\n\r\n    width: 8px;\r\n    height: 8px;\r\n\r\n    border-left:\r\n        2px solid #ffffff;\r\n\r\n    border-bottom:\r\n        2px solid #ffffff;\r\n\r\n    transform:\r\n        translate(-35%, -50%)\r\n        rotate(45deg);\r\n\r\n    box-sizing:\r\n        border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RIGHT ARROW\r\n   ========================================================= *\/\r\n\r\n.pn-hero-next::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 50%;\r\n    left: 50%;\r\n\r\n    width: 8px;\r\n    height: 8px;\r\n\r\n    border-top:\r\n        2px solid #ffffff;\r\n\r\n    border-right:\r\n        2px solid #ffffff;\r\n\r\n    transform:\r\n        translate(-65%, -50%)\r\n        rotate(45deg);\r\n\r\n    box-sizing:\r\n        border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARROW HOVER\r\n   ========================================================= *\/\r\n\r\n.pn-hero-arrow:hover {\r\n\r\n    background:\r\n        #9A2109 !important;\r\n\r\n    border-color:\r\n        #9A2109 !important;\r\n\r\n    transform:\r\n        scale(1.08);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DOT CONTAINER\r\n   ========================================================= *\/\r\n\r\n.pn-hero-indicators {\r\n\r\n    position: static !important;\r\n\r\n    display: flex !important;\r\n\r\n    align-items: center !important;\r\n\r\n    justify-content: center !important;\r\n\r\n    width: auto !important;\r\n\r\n    height: 36px !important;\r\n\r\n    margin: 0 !important;\r\n\r\n    padding: 0 !important;\r\n\r\n    gap: 7px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DOT\r\n   ========================================================= *\/\r\n\r\n.pn-dot {\r\n\r\n    display: block;\r\n\r\n    width: 6px;\r\n    height: 6px;\r\n\r\n    flex:\r\n        0 0 auto;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        rgba(255,255,255,.48);\r\n\r\n    transition:\r\n        width .35s ease,\r\n        background .35s ease;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ACTIVE DOT\r\n   ========================================================= *\/\r\n\r\n.pn-dot.active {\r\n\r\n    width: 25px;\r\n\r\n    border-radius:\r\n        20px;\r\n\r\n    background:\r\n        #F2D28A;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SLIDE CONTENT ANIMATION\r\n   ========================================================= *\/\r\n\r\n.pn-hero-slide .pn-hero-content {\r\n\r\n    opacity: 0;\r\n\r\n    transform:\r\n        translateY(18px);\r\n\r\n    transition:\r\n        opacity .7s ease .15s,\r\n        transform .7s ease .15s;\r\n}\r\n\r\n\r\n.pn-hero-slide.active .pn-hero-content {\r\n\r\n    opacity: 1;\r\n\r\n    transform:\r\n        translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n    .pn-hero-slider {\r\n\r\n        height:\r\n            520px;\r\n    }\r\n\r\n\r\n    .pn-hero-content {\r\n\r\n        width:\r\n            calc(100% - 50px);\r\n    }\r\n\r\n\r\n    .pn-hero-title {\r\n\r\n        max-width:\r\n            650px;\r\n\r\n        font-size:\r\n            clamp(34px, 5vw, 52px);\r\n    }\r\n\r\n\r\n    .pn-hero-description {\r\n\r\n        max-width:\r\n            580px;\r\n\r\n        font-size:\r\n            16px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .pn-hero-slider {\r\n\r\n        height:\r\n            510px;\r\n    }\r\n\r\n\r\n    .pn-hero-slide::after {\r\n\r\n        background:\r\n            linear-gradient(\r\n                90deg,\r\n                rgba(55,8,4,.88) 0%,\r\n                rgba(80,10,4,.65) 55%,\r\n                rgba(70,8,4,.38) 100%\r\n            );\r\n    }\r\n\r\n\r\n    .pn-hero-content {\r\n\r\n        width:\r\n            calc(100% - 36px);\r\n\r\n        justify-content:\r\n            center;\r\n\r\n        padding-bottom:\r\n            25px;\r\n    }\r\n\r\n\r\n    .pn-hero-label {\r\n\r\n        margin-bottom:\r\n            13px;\r\n\r\n        padding:\r\n            7px 12px;\r\n\r\n        font-size:\r\n            10px;\r\n\r\n        letter-spacing:\r\n            1.2px;\r\n    }\r\n\r\n\r\n    .pn-hero-title {\r\n\r\n        max-width:\r\n            100%;\r\n\r\n        margin-bottom:\r\n            14px;\r\n\r\n        font-size:\r\n            35px;\r\n\r\n        line-height:\r\n            1.1;\r\n\r\n        letter-spacing:\r\n            -.6px;\r\n    }\r\n\r\n\r\n    .pn-hero-description {\r\n\r\n        max-width:\r\n            100%;\r\n\r\n        margin-bottom:\r\n            22px;\r\n\r\n        font-size:\r\n            14px;\r\n\r\n        line-height:\r\n            1.6;\r\n    }\r\n\r\n\r\n    .pn-hero-button {\r\n\r\n        min-height:\r\n            43px;\r\n\r\n        padding:\r\n            0 18px;\r\n\r\n        font-size:\r\n            12px;\r\n    }\r\n\r\n\r\n    \/* MOBILE NAVIGATION *\/\r\n\r\n    .pn-hero-navigation {\r\n\r\n        bottom:\r\n            14px;\r\n\r\n        gap:\r\n            8px;\r\n\r\n        height:\r\n            32px;\r\n    }\r\n\r\n\r\n    .pn-hero-arrow {\r\n\r\n        width:\r\n            32px !important;\r\n\r\n        height:\r\n            32px !important;\r\n\r\n        min-width:\r\n            32px !important;\r\n\r\n        min-height:\r\n            32px !important;\r\n\r\n        max-width:\r\n            32px !important;\r\n\r\n        max-height:\r\n            32px !important;\r\n    }\r\n\r\n\r\n    .pn-hero-prev::before,\r\n    .pn-hero-next::before {\r\n\r\n        width:\r\n            7px;\r\n\r\n        height:\r\n            7px;\r\n    }\r\n\r\n\r\n    .pn-hero-indicators {\r\n\r\n        height:\r\n            32px !important;\r\n\r\n        gap:\r\n            5px;\r\n    }\r\n\r\n\r\n    .pn-dot {\r\n\r\n        width:\r\n            5px;\r\n\r\n        height:\r\n            5px;\r\n    }\r\n\r\n\r\n    .pn-dot.active {\r\n\r\n        width:\r\n            19px;\r\n    }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL PHONE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .pn-hero-slider {\r\n\r\n        height:\r\n            490px;\r\n    }\r\n\r\n\r\n    .pn-hero-title {\r\n\r\n        font-size:\r\n            31px;\r\n    }\r\n\r\n\r\n    .pn-hero-description {\r\n\r\n        font-size:\r\n            13px;\r\n    }\r\n\r\n\r\n    .pn-hero-navigation {\r\n\r\n        bottom:\r\n            12px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n\r\n<!-- =======================================================\r\n     HERO SLIDER\r\n     ======================================================= -->\r\n\r\n<div\r\n    class=\"pn-hero-slider\"\r\n    id=\"pnHeroSlider\">\r\n\r\n\r\n    <!-- ===================================================\r\n         SLIDE 1\r\n         SELAMAT DATANG\r\n         =================================================== -->\r\n\r\n    <div\r\n        class=\"pn-hero-slide active\"\r\n        style=\"--pn-hero-image:url('https:\/\/pn-simpangtigaredelong.go.id\/wp-content\/uploads\/2026\/09\/FOTO-GEDUNG-KANTOR-TERBARU.png');\">\r\n\r\n        <div class=\"pn-hero-content\">\r\n\r\n            <div class=\"pn-hero-label\">\r\n                Pengadilan Negeri Simpang Tiga Redelong\r\n            <\/div>\r\n\r\n\r\n            <h1 class=\"pn-hero-title\">\r\n\r\n                Selamat Datang di\r\n\r\n                <span>\r\n                    Pengadilan Negeri\r\n                <\/span>\r\n\r\n                Simpang Tiga Redelong\r\n\r\n            <\/h1>\r\n\r\n\r\n            <p class=\"pn-hero-description\">\r\n\r\n                Website resmi Pengadilan Negeri Simpang Tiga\r\n                Redelong sebagai media informasi dan pelayanan\r\n                publik yang mudah, transparan, dan akuntabel.\r\n\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/pn-simpangtigaredelong.go.id\/?p=7048\"\r\n                class=\"pn-hero-button\">\r\n\r\n                Profil Pengadilan\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===================================================\r\n         SLIDE 2\r\n         PELAYANAN PUBLIK\r\n         =================================================== -->\r\n\r\n    <div\r\n        class=\"pn-hero-slide\"\r\n        style=\"--pn-hero-image:url('https:\/\/pn-simpangtigaredelong.go.id\/wp-content\/uploads\/2026\/09\/FOTO-GEDUNG-KANTOR-TERBARU.png');\">\r\n\r\n        <div class=\"pn-hero-content\">\r\n\r\n            <div class=\"pn-hero-label\">\r\n                Pelayanan Publik\r\n            <\/div>\r\n\r\n\r\n            <h2 class=\"pn-hero-title\">\r\n\r\n                Pelayanan Publik\r\n\r\n                <span>\r\n                    Mudah, Cepat & Transparan\r\n                <\/span>\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p class=\"pn-hero-description\">\r\n\r\n                Dapatkan informasi dan akses berbagai layanan\r\n                Pengadilan Negeri Simpang Tiga Redelong secara\r\n                lebih mudah melalui layanan publik.\r\n\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/pn-simpangtigaredelong.go.id\/?page_id=1363\"\r\n                class=\"pn-hero-button\">\r\n\r\n                Lihat Pelayanan\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===================================================\r\n         SLIDE 3\r\n         e-COURT\r\n         =================================================== -->\r\n\r\n    <div\r\n        class=\"pn-hero-slide\"\r\n        style=\"--pn-hero-image:url('https:\/\/pn-simpangtigaredelong.go.id\/wp-content\/uploads\/2026\/09\/FOTO-GEDUNG-KANTOR-TERBARU.png');\">\r\n\r\n        <div class=\"pn-hero-content\">\r\n\r\n            <div class=\"pn-hero-label\">\r\n                Layanan Digital\r\n            <\/div>\r\n\r\n\r\n            <h2 class=\"pn-hero-title\">\r\n\r\n                Berperkara Lebih\r\n\r\n                <span>\r\n                    Mudah dengan e-Court\r\n                <\/span>\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p class=\"pn-hero-description\">\r\n\r\n                Manfaatkan layanan e-Court Mahkamah Agung\r\n                untuk mendukung proses administrasi perkara\r\n                secara elektronik.\r\n\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/ecourt.mahkamahagung.go.id\/\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                class=\"pn-hero-button\">\r\n\r\n                Buka e-Court\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===================================================\r\n         SLIDE 4\r\n         SIPP\r\n         =================================================== -->\r\n\r\n    <div\r\n        class=\"pn-hero-slide\"\r\n        style=\"--pn-hero-image:url('https:\/\/pn-simpangtigaredelong.go.id\/wp-content\/uploads\/2026\/09\/FOTO-GEDUNG-KANTOR-TERBARU.png');\">\r\n\r\n        <div class=\"pn-hero-content\">\r\n\r\n            <div class=\"pn-hero-label\">\r\n                Penelusuran Perkara\r\n            <\/div>\r\n\r\n\r\n            <h2 class=\"pn-hero-title\">\r\n\r\n                Pantau Perkara\r\n\r\n                <span>\r\n                    Secara Online\r\n                <\/span>\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p class=\"pn-hero-description\">\r\n\r\n                Gunakan Sistem Informasi Penelusuran Perkara\r\n                untuk memperoleh informasi perkembangan perkara\r\n                secara cepat dan mudah.\r\n\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/sipp.pn-simpangtigaredelong.go.id\/\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                class=\"pn-hero-button\">\r\n\r\n                Telusuri Perkara\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===================================================\r\n         SLIDE 5\r\n         JADWAL SIDANG\r\n         =================================================== -->\r\n\r\n    <div\r\n        class=\"pn-hero-slide\"\r\n        style=\"--pn-hero-image:url('https:\/\/pn-simpangtigaredelong.go.id\/wp-content\/uploads\/2026\/09\/FOTO-GEDUNG-KANTOR-TERBARU.png');\">\r\n\r\n        <div class=\"pn-hero-content\">\r\n\r\n            <div class=\"pn-hero-label\">\r\n                Informasi Persidangan\r\n            <\/div>\r\n\r\n\r\n            <h2 class=\"pn-hero-title\">\r\n\r\n                Ketahui\r\n\r\n                <span>\r\n                    Jadwal Sidang\r\n                <\/span>\r\n\r\n                Anda\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p class=\"pn-hero-description\">\r\n\r\n                Akses informasi jadwal persidangan Pengadilan\r\n                Negeri Simpang Tiga Redelong melalui layanan\r\n                penelusuran perkara.\r\n\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/sipp.pn-simpangtigaredelong.go.id\/list_jadwal_sidang\/search\/\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                class=\"pn-hero-button\">\r\n\r\n                Lihat Jadwal Sidang\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===================================================\r\n         SLIDE 6\r\n         INFORMASI PUBLIK\r\n         =================================================== -->\r\n\r\n    <div\r\n        class=\"pn-hero-slide\"\r\n        style=\"--pn-hero-image:url('https:\/\/pn-simpangtigaredelong.go.id\/wp-content\/uploads\/2026\/09\/FOTO-GEDUNG-KANTOR-TERBARU.png');\">\r\n\r\n        <div class=\"pn-hero-content\">\r\n\r\n            <div class=\"pn-hero-label\">\r\n                Transparansi & Informasi\r\n            <\/div>\r\n\r\n\r\n            <h2 class=\"pn-hero-title\">\r\n\r\n                Informasi Publik &\r\n\r\n                <span>\r\n                    Pengaduan\r\n                <\/span>\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p class=\"pn-hero-description\">\r\n\r\n                Pengadilan berkomitmen memberikan akses informasi\r\n                publik dan menyediakan kanal pengaduan bagi\r\n                masyarakat.\r\n\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/pn-simpangtigaredelong.go.id\/?page_id=1443\"\r\n                class=\"pn-hero-button\">\r\n\r\n                Informasi Publik\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===================================================\r\n         SLIDE 7\r\n         REFORMASI BIROKRASI\r\n         =================================================== -->\r\n\r\n    <div\r\n        class=\"pn-hero-slide\"\r\n        style=\"--pn-hero-image:url('https:\/\/pn-simpangtigaredelong.go.id\/wp-content\/uploads\/2026\/09\/FOTO-GEDUNG-KANTOR-TERBARU.png');\">\r\n\r\n        <div class=\"pn-hero-content\">\r\n\r\n            <div class=\"pn-hero-label\">\r\n                Integritas & Reformasi Birokrasi\r\n            <\/div>\r\n\r\n\r\n            <h2 class=\"pn-hero-title\">\r\n\r\n                Mewujudkan Peradilan\r\n\r\n                <span>\r\n                    Berintegritas\r\n                <\/span>\r\n\r\n            <\/h2>\r\n\r\n\r\n            <p class=\"pn-hero-description\">\r\n\r\n                Mendorong pelayanan peradilan yang transparan,\r\n                akuntabel, berintegritas, dan berorientasi pada\r\n                kebutuhan masyarakat.\r\n\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/pn-simpangtigaredelong.go.id\/?page_id=1529\"\r\n                class=\"pn-hero-button\">\r\n\r\n                Reformasi Birokrasi\r\n\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ===================================================\r\n         NAVIGATION\r\n         =================================================== -->\r\n\r\n    <div class=\"pn-hero-navigation\">\r\n\r\n\r\n        <!-- PREVIOUS -->\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"pn-hero-arrow pn-hero-prev\"\r\n            aria-label=\"Slide sebelumnya\">\r\n        <\/button>\r\n\r\n\r\n        <!-- DOTS -->\r\n\r\n        <div\r\n            class=\"pn-hero-indicators\"\r\n            aria-hidden=\"true\">\r\n\r\n            <span class=\"pn-dot active\"><\/span>\r\n\r\n            <span class=\"pn-dot\"><\/span>\r\n\r\n            <span class=\"pn-dot\"><\/span>\r\n\r\n            <span class=\"pn-dot\"><\/span>\r\n\r\n            <span class=\"pn-dot\"><\/span>\r\n\r\n            <span class=\"pn-dot\"><\/span>\r\n\r\n            <span class=\"pn-dot\"><\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- NEXT -->\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"pn-hero-arrow pn-hero-next\"\r\n            aria-label=\"Slide berikutnya\">\r\n        <\/button>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n    \"use strict\";\r\n\r\n\r\n    \/* =====================================================\r\n       INITIALIZATION\r\n       ===================================================== *\/\r\n\r\n    function initPNHero() {\r\n\r\n        const slider =\r\n            document.getElementById(\r\n                \"pnHeroSlider\"\r\n            );\r\n\r\n        if (!slider) return;\r\n\r\n\r\n        const slides =\r\n            slider.querySelectorAll(\r\n                \".pn-hero-slide\"\r\n            );\r\n\r\n\r\n        const dots =\r\n            slider.querySelectorAll(\r\n                \".pn-dot\"\r\n            );\r\n\r\n\r\n        const prevButton =\r\n            slider.querySelector(\r\n                \".pn-hero-prev\"\r\n            );\r\n\r\n\r\n        const nextButton =\r\n            slider.querySelector(\r\n                \".pn-hero-next\"\r\n            );\r\n\r\n\r\n        if (!slides.length) return;\r\n\r\n\r\n        let currentSlide = 0;\r\n\r\n        let autoplay = null;\r\n\r\n        const interval = 7000;\r\n\r\n\r\n        \/* =================================================\r\n           SHOW SLIDE\r\n           ================================================= *\/\r\n\r\n        function showSlide(index) {\r\n\r\n            if (\r\n                index < 0\r\n            ) {\r\n\r\n                index =\r\n                    slides.length - 1;\r\n\r\n            }\r\n\r\n\r\n            if (\r\n                index >= slides.length\r\n            ) {\r\n\r\n                index = 0;\r\n\r\n            }\r\n\r\n\r\n            slides.forEach(\r\n                function (slide, i) {\r\n\r\n                    slide.classList.toggle(\r\n                        \"active\",\r\n                        i === index\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n\r\n            dots.forEach(\r\n                function (dot, i) {\r\n\r\n                    dot.classList.toggle(\r\n                        \"active\",\r\n                        i === index\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n\r\n            currentSlide = index;\r\n\r\n        }\r\n\r\n\r\n        \/* =================================================\r\n           NEXT\r\n           ================================================= *\/\r\n\r\n        function nextSlide() {\r\n\r\n            showSlide(\r\n                currentSlide + 1\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/* =================================================\r\n           PREVIOUS\r\n           ================================================= *\/\r\n\r\n        function previousSlide() {\r\n\r\n            showSlide(\r\n                currentSlide - 1\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/* =================================================\r\n           START AUTOPLAY\r\n           ================================================= *\/\r\n\r\n        function startAutoplay() {\r\n\r\n            stopAutoplay();\r\n\r\n\r\n            autoplay =\r\n                setInterval(\r\n                    nextSlide,\r\n                    interval\r\n                );\r\n\r\n        }\r\n\r\n\r\n        \/* =================================================\r\n           STOP AUTOPLAY\r\n           ================================================= *\/\r\n\r\n        function stopAutoplay() {\r\n\r\n            if (autoplay) {\r\n\r\n                clearInterval(\r\n                    autoplay\r\n                );\r\n\r\n                autoplay = null;\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        \/* =================================================\r\n           RESTART AUTOPLAY\r\n           ================================================= *\/\r\n\r\n        function restartAutoplay() {\r\n\r\n            stopAutoplay();\r\n\r\n            startAutoplay();\r\n\r\n        }\r\n\r\n\r\n        \/* =================================================\r\n           NEXT BUTTON\r\n           ================================================= *\/\r\n\r\n        if (nextButton) {\r\n\r\n            nextButton.addEventListener(\r\n                \"click\",\r\n                function (event) {\r\n\r\n                    event.preventDefault();\r\n\r\n                    nextSlide();\r\n\r\n                    restartAutoplay();\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/* =================================================\r\n           PREVIOUS BUTTON\r\n           ================================================= *\/\r\n\r\n        if (prevButton) {\r\n\r\n            prevButton.addEventListener(\r\n                \"click\",\r\n                function (event) {\r\n\r\n                    event.preventDefault();\r\n\r\n                    previousSlide();\r\n\r\n                    restartAutoplay();\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/* =================================================\r\n           PAUSE ON HOVER\r\n           ================================================= *\/\r\n\r\n        slider.addEventListener(\r\n            \"mouseenter\",\r\n            function () {\r\n\r\n                stopAutoplay();\r\n\r\n            }\r\n        );\r\n\r\n\r\n        slider.addEventListener(\r\n            \"mouseleave\",\r\n            function () {\r\n\r\n                startAutoplay();\r\n\r\n            }\r\n        );\r\n\r\n\r\n        \/* =================================================\r\n           TOUCH \/ SWIPE\r\n           ================================================= *\/\r\n\r\n        let touchStartX = 0;\r\n\r\n        let touchEndX = 0;\r\n\r\n\r\n        slider.addEventListener(\r\n            \"touchstart\",\r\n            function (event) {\r\n\r\n                touchStartX =\r\n                    event.changedTouches[0]\r\n                        .screenX;\r\n\r\n                stopAutoplay();\r\n\r\n            },\r\n            {\r\n                passive: true\r\n            }\r\n        );\r\n\r\n\r\n        slider.addEventListener(\r\n            \"touchend\",\r\n            function (event) {\r\n\r\n                touchEndX =\r\n                    event.changedTouches[0]\r\n                        .screenX;\r\n\r\n\r\n                const distance =\r\n                    touchEndX -\r\n                    touchStartX;\r\n\r\n\r\n                if (\r\n                    Math.abs(distance) > 50\r\n                ) {\r\n\r\n                    if (\r\n                        distance < 0\r\n                    ) {\r\n\r\n                        nextSlide();\r\n\r\n                    } else {\r\n\r\n                        previousSlide();\r\n\r\n                    }\r\n\r\n                }\r\n\r\n\r\n                startAutoplay();\r\n\r\n            },\r\n            {\r\n                passive: true\r\n            }\r\n        );\r\n\r\n\r\n        \/* =================================================\r\n           INITIAL\r\n           ================================================= *\/\r\n\r\n        showSlide(0);\r\n\r\n        startAutoplay();\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       DOM READY\r\n       ===================================================== *\/\r\n\r\n    if (\r\n        document.readyState ===\r\n        \"loading\"\r\n    ) {\r\n\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initPNHero\r\n        );\r\n\r\n    } else {\r\n\r\n        initPNHero();\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       ELEMENTOR COMPATIBILITY\r\n       ===================================================== *\/\r\n\r\n    if (\r\n        window.jQuery &&\r\n        window.elementorFrontend\r\n    ) {\r\n\r\n        jQuery(window).on(\r\n            \"elementor\/frontend\/init\",\r\n            function () {\r\n\r\n                setTimeout(\r\n                    initPNHero,\r\n                    300\r\n                );\r\n\r\n            }\r\n        );\r\n\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<\/div>\n\t\t<div class=\"elementor-element elementor-element-6822e9d e-con-full e-flex e-con e-parent\" data-id=\"6822e9d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d93256f elementor-widget elementor-widget-html\" data-id=\"d93256f\" 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<style>\n\n\/* =========================================================\n   PN SIMPANG TIGA REDELONG\n   AKSES LAYANAN PENGADILAN\n   MODERN \u2022 CLEAN \u2022 PREMIUM\n   ========================================================= *\/\n\n.pn-services {\n\n    --pn-red: #9A2109;\n    --pn-red-dark: #741806;\n    --pn-red-light: #B9361A;\n\n    --pn-gold: #D8A84E;\n    --pn-gold-light: #F2D28A;\n\n    --pn-text: #202020;\n    --pn-muted: #777777;\n\n    --pn-border: #E8E5E2;\n\n    --pn-bg: #FAF9F7;\n    --pn-white: #FFFFFF;\n\n    width: 100% !important;\n    max-width: 100% !important;\n\n    margin: 0 !important;\n\n    padding: 58px 30px 64px !important;\n\n    background:\n        linear-gradient(\n            180deg,\n            #FFFFFF 0%,\n            #FAF9F7 100%\n        );\n\n    font-family:\n        -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        Roboto,\n        Arial,\n        sans-serif;\n\n    box-sizing: border-box;\n\n}\n\n\n\/* =========================================================\n   INNER WIDTH\n   ========================================================= *\/\n\n.pn-services-inner {\n\n    width: 100%;\n\n    max-width: 1240px;\n\n    margin: 0 auto;\n\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.pn-services-header {\n\n    width: 100%;\n\n    margin: 0 auto 34px;\n\n    text-align: center;\n\n}\n\n\n\/* =========================================================\n   EYEBROW\n   ========================================================= *\/\n\n.pn-services-eyebrow {\n\n    display: inline-flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    gap: 9px;\n\n    margin: 0 0 10px;\n\n    color: var(--pn-red);\n\n    font-size: 11px;\n\n    line-height: 1;\n\n    font-weight: 800;\n\n    letter-spacing: 2.2px;\n\n    text-transform: uppercase;\n\n}\n\n\n.pn-services-eyebrow::before,\n.pn-services-eyebrow::after {\n\n    content: \"\";\n\n    width: 20px;\n\n    height: 1px;\n\n    background:\n        rgba(154,33,9,.35);\n\n}\n\n\n\/* =========================================================\n   TITLE\n   ========================================================= *\/\n\n.pn-services-title {\n\n    margin: 0;\n\n    padding: 0;\n\n    color: var(--pn-text);\n\n    font-size: 30px;\n\n    line-height: 1.2;\n\n    font-weight: 750;\n\n    letter-spacing: -.7px;\n\n}\n\n\n.pn-services-title span {\n\n    color: var(--pn-red);\n\n}\n\n\n\/* =========================================================\n   GOLD \/ RED LINE\n   ========================================================= *\/\n\n.pn-services-line {\n\n    position: relative;\n\n    display: block;\n\n    width: 54px;\n\n    height: 3px;\n\n    margin: 13px auto 12px;\n\n    background:\n        var(--pn-red);\n\n    border-radius: 10px;\n\n}\n\n\n.pn-services-line::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    right: -10px;\n\n    top: 0;\n\n    width: 7px;\n\n    height: 3px;\n\n    border-radius: 10px;\n\n    background:\n        var(--pn-gold);\n\n}\n\n\n\/* =========================================================\n   DESCRIPTION\n   ========================================================= *\/\n\n.pn-services-description {\n\n    max-width: 620px;\n\n    margin: 0 auto;\n\n    color: var(--pn-muted);\n\n    font-size: 13px;\n\n    line-height: 1.7;\n\n    font-weight: 400;\n\n}\n\n\n\/* =========================================================\n   DESKTOP GRID\n   ========================================================= *\/\n\n.pn-services-grid {\n\n    width: 100%;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(5, minmax(0, 1fr));\n\n    gap: 14px;\n\n}\n\n\n\/* =========================================================\n   SERVICE CARD\n   ========================================================= *\/\n\n.pn-service {\n\n    position: relative;\n\n    display: flex;\n\n    align-items: center;\n\n    width: 100%;\n\n    min-width: 0;\n\n    min-height: 94px;\n\n    padding: 15px;\n\n    background:\n        var(--pn-white);\n\n    border:\n        1px solid var(--pn-border);\n\n    border-radius: 13px;\n\n    text-decoration: none !important;\n\n    color: var(--pn-text) !important;\n\n    overflow: hidden;\n\n    box-sizing: border-box;\n\n    box-shadow:\n        0 2px 7px rgba(25,20,15,.035);\n\n    transition:\n        transform .28s ease,\n        box-shadow .28s ease,\n        border-color .28s ease,\n        background .28s ease;\n\n}\n\n\n\/* =========================================================\n   TOP ACCENT\n   ========================================================= *\/\n\n.pn-service::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    left: 0;\n\n    top: 0;\n\n    width: 100%;\n\n    height: 3px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--pn-red),\n            var(--pn-red-light),\n            var(--pn-gold)\n        );\n\n    transform:\n        scaleX(0);\n\n    transform-origin:\n        left center;\n\n    transition:\n        transform .3s ease;\n\n}\n\n\n\/* =========================================================\n   DECORATIVE CIRCLE\n   ========================================================= *\/\n\n.pn-service::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    width: 100px;\n\n    height: 100px;\n\n    right: -55px;\n\n    bottom: -55px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(154,33,9,.045);\n\n    transition:\n        width .35s ease,\n        height .35s ease,\n        background .35s ease;\n\n}\n\n\n\/* =========================================================\n   HOVER\n   ========================================================= *\/\n\n.pn-service:hover {\n\n    transform:\n        translateY(-5px);\n\n    border-color:\n        rgba(154,33,9,.22);\n\n    background:\n        #FFFFFF;\n\n    box-shadow:\n        0 14px 32px\n        rgba(40,20,10,.10);\n\n    color:\n        var(--pn-text) !important;\n\n}\n\n\n.pn-service:hover::before {\n\n    transform:\n        scaleX(1);\n\n}\n\n\n.pn-service:hover::after {\n\n    width: 135px;\n\n    height: 135px;\n\n    background:\n        rgba(154,33,9,.065);\n\n}\n\n\n\/* =========================================================\n   NUMBER\n   ========================================================= *\/\n\n.pn-service-number {\n\n    position: absolute;\n\n    top: 9px;\n\n    right: 11px;\n\n    z-index: 4;\n\n    color:\n        #D5D0CC;\n\n    font-size: 8px;\n\n    line-height: 1;\n\n    font-weight: 800;\n\n    letter-spacing: .5px;\n\n    transition:\n        color .25s ease;\n\n}\n\n\n.pn-service:hover .pn-service-number {\n\n    color:\n        rgba(154,33,9,.45);\n\n}\n\n\n\/* =========================================================\n   ICON\n   ========================================================= *\/\n\n.pn-service-icon {\n\n    position: relative;\n\n    z-index: 3;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    flex:\n        0 0 47px;\n\n    width: 47px;\n\n    height: 47px;\n\n    margin-right: 13px;\n\n    border:\n        1px solid\n        rgba(154,33,9,.13);\n\n    border-radius: 12px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #FFF8F5,\n            #FBEFEA\n        );\n\n    color:\n        var(--pn-red);\n\n    box-sizing: border-box;\n\n    transition:\n        background .28s ease,\n        color .28s ease,\n        border-color .28s ease,\n        transform .28s ease,\n        box-shadow .28s ease;\n\n}\n\n\n.pn-service-icon svg {\n\n    display: block;\n\n    width: 22px;\n\n    height: 22px;\n\n    fill: none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:\n        1.7;\n\n    stroke-linecap:\n        round;\n\n    stroke-linejoin:\n        round;\n\n}\n\n\n.pn-service:hover .pn-service-icon {\n\n    color:\n        #FFFFFF;\n\n    background:\n        var(--pn-red);\n\n    border-color:\n        var(--pn-red);\n\n    transform:\n        scale(1.07);\n\n    box-shadow:\n        0 6px 15px\n        rgba(154,33,9,.20);\n\n}\n\n\n\/* =========================================================\n   CONTENT\n   ========================================================= *\/\n\n.pn-service-content {\n\n    position: relative;\n\n    z-index: 3;\n\n    flex: 1;\n\n    min-width: 0;\n\n    padding-right: 4px;\n\n}\n\n\n\/* =========================================================\n   TITLE\n   ========================================================= *\/\n\n.pn-service-title {\n\n    display: block;\n\n    margin: 0;\n\n    color:\n        var(--pn-text);\n\n    font-size:\n        13px;\n\n    line-height:\n        1.3;\n\n    font-weight:\n        750;\n\n    white-space:\n        nowrap;\n\n    overflow:\n        hidden;\n\n    text-overflow:\n        ellipsis;\n\n    transition:\n        color .25s ease;\n\n}\n\n\n.pn-service:hover .pn-service-title {\n\n    color:\n        var(--pn-red);\n\n}\n\n\n\/* =========================================================\n   SUBTITLE\n   ========================================================= *\/\n\n.pn-service-subtitle {\n\n    display: block;\n\n    margin:\n        4px 0 0;\n\n    color:\n        #858585;\n\n    font-size:\n        9.5px;\n\n    line-height:\n        1.35;\n\n    font-weight:\n        400;\n\n}\n\n\n\/* =========================================================\n   ARROW\n   ========================================================= *\/\n\n.pn-service-arrow {\n\n    position: relative;\n\n    z-index: 4;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    flex:\n        0 0 25px;\n\n    width: 25px;\n\n    height: 25px;\n\n    margin-left: 5px;\n\n    border-radius: 50%;\n\n    color:\n        #B5B0AD;\n\n    font-size: 0;\n\n    transition:\n        background .25s ease,\n        color .25s ease,\n        transform .25s ease;\n\n}\n\n\n.pn-service-arrow::before {\n\n    content: \"\";\n\n    width: 6px;\n\n    height: 6px;\n\n    border-top:\n        1.7px solid currentColor;\n\n    border-right:\n        1.7px solid currentColor;\n\n    transform:\n        rotate(45deg);\n\n}\n\n\n.pn-service:hover .pn-service-arrow {\n\n    color:\n        #FFFFFF;\n\n    background:\n        var(--pn-red);\n\n    transform:\n        translateX(2px);\n\n}\n\n\n\/* =========================================================\n   FOCUS ACCESSIBILITY\n   ========================================================= *\/\n\n.pn-service:focus-visible {\n\n    outline:\n        3px solid\n        rgba(154,33,9,.20);\n\n    outline-offset:\n        3px;\n\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 1100px) {\n\n    .pn-services {\n\n        padding:\n            50px 25px 56px !important;\n\n    }\n\n\n    .pn-services-grid {\n\n        grid-template-columns:\n            repeat(3, minmax(0, 1fr));\n\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   HORIZONTAL SWIPE\n   \u00b13 CARD\n   ========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .pn-services {\n\n        padding:\n            42px 16px 48px !important;\n\n    }\n\n\n    .pn-services-header {\n\n        margin-bottom:\n            25px;\n\n    }\n\n\n    .pn-services-eyebrow {\n\n        font-size:\n            9px;\n\n        letter-spacing:\n            1.8px;\n\n    }\n\n\n    .pn-services-title {\n\n        font-size:\n            24px;\n\n        letter-spacing:\n            -.4px;\n\n    }\n\n\n    .pn-services-description {\n\n        padding:\n            0 10px;\n\n        font-size:\n            11.5px;\n\n    }\n\n\n    \/* =====================================================\n       HORIZONTAL CAROUSEL\n       ===================================================== *\/\n\n    .pn-services-grid {\n\n        position:\n            relative;\n\n        display:\n            flex !important;\n\n        flex-direction:\n            row !important;\n\n        flex-wrap:\n            nowrap !important;\n\n        align-items:\n            stretch;\n\n        gap:\n            9px !important;\n\n        width:\n            100% !important;\n\n        overflow-x:\n            auto !important;\n\n        overflow-y:\n            hidden !important;\n\n        padding:\n            3px 2px 12px !important;\n\n        margin:\n            0 !important;\n\n        scroll-behavior:\n            smooth;\n\n        -webkit-overflow-scrolling:\n            touch;\n\n        scrollbar-width:\n            thin;\n\n        scrollbar-color:\n            rgba(154,33,9,.35)\n            transparent;\n\n        overscroll-behavior-x:\n            contain;\n\n        touch-action:\n            pan-x;\n\n    }\n\n\n    \/* =====================================================\n       CARD MOBILE\n       3 CARD TERLIHAT\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service {\n\n        flex:\n            0 0 calc((100vw - 50px) \/ 3) !important;\n\n        width:\n            calc((100vw - 50px) \/ 3) !important;\n\n        min-width:\n            calc((100vw - 50px) \/ 3) !important;\n\n        max-width:\n            calc((100vw - 50px) \/ 3) !important;\n\n        min-height:\n            76px;\n\n        padding:\n            10px 9px;\n\n        border-radius:\n            11px;\n\n    }\n\n\n    \/* =====================================================\n       ICON MOBILE\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-icon {\n\n        flex:\n            0 0 34px;\n\n        width:\n            34px;\n\n        height:\n            34px;\n\n        margin-right:\n            7px;\n\n        border-radius:\n            8px;\n\n    }\n\n\n    .pn-services-grid .pn-service-icon svg {\n\n        width:\n            17px;\n\n        height:\n            17px;\n\n    }\n\n\n    \/* =====================================================\n       CONTENT MOBILE\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-content {\n\n        padding-right:\n            0;\n\n    }\n\n\n    \/* =====================================================\n       TITLE MOBILE\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-title {\n\n        font-size:\n            10.5px;\n\n        line-height:\n            1.25;\n\n    }\n\n\n    \/* =====================================================\n       SUBTITLE MOBILE\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-subtitle {\n\n        margin-top:\n            2px;\n\n        font-size:\n            7.5px;\n\n        line-height:\n            1.25;\n\n        white-space:\n            nowrap;\n\n        overflow:\n            hidden;\n\n        text-overflow:\n            ellipsis;\n\n    }\n\n\n    \/* =====================================================\n       CARD ARROW DISEMBUNYIKAN\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-arrow {\n\n        display:\n            none;\n\n    }\n\n\n    \/* =====================================================\n       NUMBER MOBILE\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-number {\n\n        top:\n            6px;\n\n        right:\n            7px;\n\n        font-size:\n            6.5px;\n\n    }\n\n\n    \/* =====================================================\n       SCROLLBAR\n       ===================================================== *\/\n\n    .pn-services-grid::-webkit-scrollbar {\n\n        height:\n            3px;\n\n    }\n\n\n    .pn-services-grid::-webkit-scrollbar-track {\n\n        background:\n            rgba(0,0,0,.035);\n\n        border-radius:\n            10px;\n\n    }\n\n\n    .pn-services-grid::-webkit-scrollbar-thumb {\n\n        background:\n            rgba(154,33,9,.35);\n\n        border-radius:\n            10px;\n\n    }\n\n\n    \/* =====================================================\n       INDIKATOR GESER\n       ===================================================== *\/\n\n    .pn-services-grid::after {\n\n        content:\n            \"\u2192\";\n\n        position:\n            sticky;\n\n        right:\n            4px;\n\n        top:\n            50%;\n\n        flex:\n            0 0 28px;\n\n        width:\n            28px;\n\n        height:\n            28px;\n\n        margin:\n            auto 0;\n\n        display:\n            flex;\n\n        align-items:\n            center;\n\n        justify-content:\n            center;\n\n        color:\n            #FFFFFF;\n\n        background:\n            rgba(154,33,9,.88);\n\n        border:\n            2px solid\n            rgba(255,255,255,.85);\n\n        border-radius:\n            50%;\n\n        box-shadow:\n            0 4px 12px\n            rgba(0,0,0,.16);\n\n        font-size:\n            15px;\n\n        font-weight:\n            700;\n\n        line-height:\n            1;\n\n        pointer-events:\n            none;\n\n        z-index:\n            10;\n\n    }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width: 480px) {\n\n    .pn-services {\n\n        padding:\n            36px 12px 42px !important;\n\n    }\n\n\n    .pn-services-grid {\n\n        gap:\n            8px !important;\n\n    }\n\n\n    \/* =====================================================\n       CARD LEBIH KOMPAK\n       TETAP \u00b13 CARD\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service {\n\n        flex:\n            0 0 calc((100vw - 42px) \/ 3) !important;\n\n        width:\n            calc((100vw - 42px) \/ 3) !important;\n\n        min-width:\n            calc((100vw - 42px) \/ 3) !important;\n\n        max-width:\n            calc((100vw - 42px) \/ 3) !important;\n\n        min-height:\n            70px;\n\n        padding:\n            8px;\n\n        border-radius:\n            10px;\n\n    }\n\n\n    \/* =====================================================\n       ICON\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-icon {\n\n        flex:\n            0 0 31px;\n\n        width:\n            31px;\n\n        height:\n            31px;\n\n        margin-right:\n            6px;\n\n        border-radius:\n            7px;\n\n    }\n\n\n    .pn-services-grid .pn-service-icon svg {\n\n        width:\n            15px;\n\n        height:\n            15px;\n\n    }\n\n\n    \/* =====================================================\n       TITLE\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-title {\n\n        font-size:\n            9.5px;\n\n    }\n\n\n    \/* =====================================================\n       SUBTITLE DI HP KECIL DISEMBUNYIKAN\n       ===================================================== *\/\n\n    .pn-services-grid .pn-service-subtitle {\n\n        display:\n            none;\n\n    }\n\n\n    \/* =====================================================\n       INDIKATOR GESER LEBIH KECIL\n       ===================================================== *\/\n\n    .pn-services-grid::after {\n\n        width:\n            26px;\n\n        height:\n            26px;\n\n        flex-basis:\n            26px;\n\n        font-size:\n            14px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   FULL WIDTH\n   ========================================================= *\/\n\n.pn-services {\n\n    width:\n        100vw !important;\n\n    max-width:\n        100vw !important;\n\n    margin-left:\n        calc(50% - 50vw) !important;\n\n    margin-right:\n        calc(50% - 50vw) !important;\n\n    position:\n        relative;\n\n    left:\n        auto;\n\n    right:\n        auto;\n\n    box-sizing:\n        border-box !important;\n\n}\n\n\n\/* =========================================================\n   INNER CONTENT\n   ========================================================= *\/\n\n.pn-services-inner {\n\n    width:\n        100% !important;\n\n    max-width:\n        1240px;\n\n    margin-left:\n        auto !important;\n\n    margin-right:\n        auto !important;\n\n}\n\n\n\/* =========================================================\n   DESKTOP BESAR\n   ========================================================= *\/\n\n@media (min-width: 1400px) {\n\n    .pn-services-inner {\n\n        max-width:\n            1320px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   LAPTOP\n   ========================================================= *\/\n\n@media (min-width: 1200px) and (max-width: 1399px) {\n\n    .pn-services-inner {\n\n        max-width:\n            1180px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 1199px) {\n\n    .pn-services {\n\n        padding-left:\n            25px !important;\n\n        padding-right:\n            25px !important;\n\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE FULL WIDTH\n   ========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .pn-services {\n\n        width:\n            100vw !important;\n\n        max-width:\n            100vw !important;\n\n        margin-left:\n            calc(50% - 50vw) !important;\n\n        margin-right:\n            calc(50% - 50vw) !important;\n\n        padding-left:\n            16px !important;\n\n        padding-right:\n            16px !important;\n\n    }\n\n\n    .pn-services-inner {\n\n        width:\n            100% !important;\n\n        max-width:\n            100% !important;\n\n    }\n\n}\n\n\n\/* =========================================================\n   ELEMENTOR OVERRIDE\n   ========================================================= *\/\n\n.elementor-widget:has(.pn-services) {\n\n    width:\n        100% !important;\n\n    max-width:\n        100% !important;\n\n}\n\n\n.elementor-widget-container:has(.pn-services) {\n\n    width:\n        100% !important;\n\n    max-width:\n        100% !important;\n\n    padding-left:\n        0 !important;\n\n    padding-right:\n        0 !important;\n\n}\n\n\n.elementor-element:has(.pn-services) {\n\n    max-width:\n        100% !important;\n\n}\n\n\n\/* =========================================================\n   BOX SIZING\n   ========================================================= *\/\n\n.pn-services,\n.pn-services-inner,\n.pn-services-grid {\n\n    box-sizing:\n        border-box !important;\n\n}\n\n\n\/* =========================================================\n   PREVENT BODY HORIZONTAL SCROLL\n   ========================================================= *\/\n\nhtml,\nbody {\n\n    overflow-x:\n        hidden !important;\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     AKSES LAYANAN PENGADILAN\n     ========================================================= -->\n\n<section class=\"pn-services\">\n\n    <div class=\"pn-services-inner\">\n\n\n        <!-- =================================================\n             HEADER\n             ================================================= -->\n\n        <div class=\"pn-services-header\">\n\n            <div class=\"pn-services-eyebrow\">\n                Layanan Digital\n            <\/div>\n\n\n            <h2 class=\"pn-services-title\">\n\n                Akses Layanan\n                <span>Pengadilan<\/span>\n\n            <\/h2>\n\n\n            <span class=\"pn-services-line\"><\/span>\n\n\n            <p class=\"pn-services-description\">\n\n                Akses cepat menuju berbagai layanan dan sistem\n                informasi Pengadilan Negeri Simpang Tiga Redelong.\n\n            <\/p>\n\n        <\/div>\n\n\n        <!-- =================================================\n             SERVICE GRID\n             ================================================= -->\n\n        <div class=\"pn-services-grid\">\n\n\n            <!-- 01 E-COURT -->\n\n            <a\n                href=\"https:\/\/ecourt.mahkamahagung.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka layanan e-Court\">\n\n                <span class=\"pn-service-number\">\n                    01\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <path d=\"M24 8v29\"\/>\n                        <path d=\"M9 14h30\"\/>\n                        <path d=\"M13 14L7 26h12z\"\/>\n                        <path d=\"M35 14l-6 12h12z\"\/>\n                        <path d=\"M17 37h14\"\/>\n                        <path d=\"M13 41h22\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        e-Court\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Layanan Peradilan Elektronik\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 02 E-BERPadu -->\n\n            <a\n                href=\"https:\/\/eberpadu.mahkamahagung.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka layanan e-Berpadu\">\n\n                <span class=\"pn-service-number\">\n                    02\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <rect\n                            x=\"9\"\n                            y=\"7\"\n                            width=\"30\"\n                            height=\"34\"\n                            rx=\"3\"\/>\n\n                        <path d=\"M15 15h18\"\/>\n                        <path d=\"M15 22h18\"\/>\n                        <path d=\"M15 29h11\"\/>\n                        <path d=\"M15 36h7\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        e-Berpadu\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Berkas Pidana Terpadu\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 03 ERATERANG -->\n\n            <a\n                href=\"https:\/\/new.badilum.mahkamahagung.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka layanan eRaterang\">\n\n                <span class=\"pn-service-number\">\n                    03\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <rect\n                            x=\"9\"\n                            y=\"6\"\n                            width=\"28\"\n                            height=\"36\"\n                            rx=\"3\"\/>\n\n                        <path d=\"M15 14h16\"\/>\n                        <path d=\"M15 21h16\"\/>\n                        <path d=\"M15 28h10\"\/>\n                        <path d=\"M15 35h7\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        eRaterang\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Surat Keterangan Elektronik\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 04 SIPP -->\n\n            <a\n                href=\"https:\/\/sipp.pn-simpangtigaredelong.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka SIPP\">\n\n                <span class=\"pn-service-number\">\n                    04\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <rect\n                            x=\"9\"\n                            y=\"8\"\n                            width=\"30\"\n                            height=\"32\"\n                            rx=\"4\"\/>\n\n                        <path d=\"M16 5v7\"\/>\n                        <path d=\"M32 5v7\"\/>\n                        <path d=\"M9 18h30\"\/>\n                        <path d=\"M16 24h5\"\/>\n                        <path d=\"M27 24h5\"\/>\n                        <path d=\"M16 31h5\"\/>\n                        <path d=\"M27 31h5\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        SIPP\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Informasi Perkara\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 05 DIREKTORI PUTUSAN -->\n\n            <a\n                href=\"https:\/\/putusan3.mahkamahagung.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka Direktori Putusan\">\n\n                <span class=\"pn-service-number\">\n                    05\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <path d=\"M5 40h38\"\/>\n                        <path d=\"M9 40V18\"\/>\n                        <path d=\"M17 40V18\"\/>\n                        <path d=\"M31 40V18\"\/>\n                        <path d=\"M39 40V18\"\/>\n                        <path d=\"M5 18h38\"\/>\n                        <path d=\"M7 18L24 8l17 10\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        Direktori Putusan\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Publikasi Putusan Pengadilan\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 06 SISUPER -->\n\n            <a\n                href=\"https:\/\/new.badilum.mahkamahagung.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka SISUPER\">\n\n                <span class=\"pn-service-number\">\n                    06\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <rect\n                            x=\"8\"\n                            y=\"7\"\n                            width=\"25\"\n                            height=\"34\"\n                            rx=\"3\"\/>\n\n                        <path d=\"M14 15h13\"\/>\n                        <path d=\"M14 21h13\"\/>\n                        <path d=\"M14 27h8\"\/>\n\n                        <circle\n                            cx=\"34\"\n                            cy=\"33\"\n                            r=\"7\"\/>\n\n                        <path d=\"M39 38l5 5\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        SISUPER\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Survei Pelayanan Elektronik\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 07 JDIH -->\n\n            <a\n                href=\"https:\/\/jdih.mahkamahagung.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka JDIH\">\n\n                <span class=\"pn-service-number\">\n                    07\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <path d=\"M9 8h22v32H9z\"\/>\n                        <path d=\"M14 14h12\"\/>\n                        <path d=\"M14 20h12\"\/>\n                        <path d=\"M14 26h8\"\/>\n\n                        <circle\n                            cx=\"35\"\n                            cy=\"33\"\n                            r=\"6\"\/>\n\n                        <path d=\"M39 37l5 5\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        JDIH\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Dokumentasi &amp; Informasi Hukum\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 08 LPSE -->\n\n            <a\n                href=\"https:\/\/epandu.mahkamahagung.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka LPSE\">\n\n                <span class=\"pn-service-number\">\n                    08\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <rect\n                            x=\"7\"\n                            y=\"9\"\n                            width=\"34\"\n                            height=\"28\"\n                            rx=\"3\"\/>\n\n                        <path d=\"M7 17h34\"\/>\n                        <path d=\"M13 24h8\"\/>\n                        <path d=\"M13 30h15\"\/>\n                        <path d=\"M32 24h4\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        LPSE\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Layanan Pengadaan Elektronik\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 09 SIWAS -->\n\n            <a\n                href=\"https:\/\/siwas.mahkamahagung.go.id\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Buka SIWAS\">\n\n                <span class=\"pn-service-number\">\n                    09\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <circle\n                            cx=\"24\"\n                            cy=\"24\"\n                            r=\"16\"\/>\n\n                        <path d=\"M24 14v11\"\/>\n                        <path d=\"M24 32v1\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        SIWAS\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Sistem Informasi Pengawasan\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n            <!-- 10 JADWAL SIDANG -->\n\n            <a\n                href=\"https:\/\/sipp.pn-simpangtigaredelong.go.id\/list_jadwal_sidang\/search\/\"\n                class=\"pn-service\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                aria-label=\"Lihat Jadwal Sidang\">\n\n                <span class=\"pn-service-number\">\n                    10\n                <\/span>\n\n                <span class=\"pn-service-icon\">\n\n                    <svg viewBox=\"0 0 48 48\">\n\n                        <rect\n                            x=\"8\"\n                            y=\"9\"\n                            width=\"32\"\n                            height=\"31\"\n                            rx=\"4\"\/>\n\n                        <path d=\"M15 5v8\"\/>\n                        <path d=\"M33 5v8\"\/>\n                        <path d=\"M8 18h32\"\/>\n                        <path d=\"M15 25h5\"\/>\n                        <path d=\"M25 25h5\"\/>\n                        <path d=\"M15 32h5\"\/>\n                        <path d=\"M25 32h5\"\/>\n\n                    <\/svg>\n\n                <\/span>\n\n                <span class=\"pn-service-content\">\n\n                    <span class=\"pn-service-title\">\n                        Jadwal Sidang\n                    <\/span>\n\n                    <span class=\"pn-service-subtitle\">\n                        Informasi Jadwal Persidangan\n                    <\/span>\n\n                <\/span>\n\n                <span\n                    class=\"pn-service-arrow\"\n                    aria-hidden=\"true\">\n                <\/span>\n\n            <\/a>\n\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d1e68ea e-flex e-con-boxed e-con e-parent\" data-id=\"d1e68ea\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0727402 e-con-full e-flex e-con e-child\" data-id=\"0727402\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-cdc146b e-con-full e-flex e-con e-child\" data-id=\"cdc146b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-00edf3d elementor-widget elementor-widget-html\" data-id=\"00edf3d\" 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<style>\n\n\/* =========================================================\n   PN SIMPANG TIGA REDELONG\n   BERITA + PENGUMUMAN\n   iOS GLASS STYLE\n   + PROFESSIONAL SKELETON LOADING\n   ========================================================= *\/\n\n.pn-info {\n\n    --pn-red: #9A2109;\n    --pn-red-dark: #7C1A08;\n    --pn-red-soft: rgba(154,33,9,.08);\n    --pn-red-border: rgba(154,33,9,.18);\n\n    --pn-text: #1d1d1f;\n    --pn-text-soft: #6e6e73;\n\n    --pn-glass: rgba(255,255,255,.66);\n    --pn-glass-hover: rgba(255,255,255,.80);\n\n    --pn-border: rgba(255,255,255,.78);\n\n    --pn-shadow:\n        0 8px 30px rgba(0,0,0,.055),\n        inset 0 1px 0 rgba(255,255,255,.80);\n\n    --pn-shadow-hover:\n        0 14px 38px rgba(0,0,0,.09),\n        inset 0 1px 0 rgba(255,255,255,.90);\n\n    width: 100%;\n\n    position: relative;\n\n    color: var(--pn-text);\n\n    font-family:\n        -apple-system,\n        BlinkMacSystemFont,\n        \"SF Pro Display\",\n        \"SF Pro Text\",\n        \"Segoe UI\",\n        Roboto,\n        Helvetica,\n        Arial,\n        sans-serif;\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n   ========================================================= *\/\n\n.pn-info::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: -70px;\n    bottom: -70px;\n\n    left: -50vw;\n    right: -50vw;\n\n    z-index: -2;\n\n    background:\n\n        radial-gradient(\n            circle at 8% 10%,\n            rgba(154,33,9,.075),\n            transparent 26%\n        ),\n\n        radial-gradient(\n            circle at 92% 85%,\n            rgba(154,33,9,.055),\n            transparent 27%\n        ),\n\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.98),\n            rgba(250,247,245,.98)\n        );\n\n    pointer-events: none;\n}\n\n\n\/* =========================================================\n   SUBTLE TEXTURE\n   ========================================================= *\/\n\n.pn-info::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: -70px;\n    bottom: -70px;\n\n    left: -50vw;\n    right: -50vw;\n\n    z-index: -1;\n\n    opacity: .30;\n\n    background-image:\n\n        radial-gradient(\n            rgba(154,33,9,.10) .7px,\n            transparent .7px\n        );\n\n    background-size: 18px 18px;\n\n    mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            black 15%,\n            black 85%,\n            transparent\n        );\n\n    -webkit-mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            black 15%,\n            black 85%,\n            transparent\n        );\n\n    pointer-events: none;\n}\n\n\n\/* =========================================================\n   CONTAINER\n   ========================================================= *\/\n\n.pn-info-container {\n\n    width: 100%;\n\n    margin: 0 auto;\n}\n\n\n\/* =========================================================\n   SECTION\n   ========================================================= *\/\n\n.pn-section {\n\n    width: 100%;\n\n    margin-bottom: 42px;\n}\n\n\n\/* =========================================================\n   SECTION HEADER\n   ========================================================= *\/\n\n.pn-section-title {\n\n    display: flex;\n\n    align-items: flex-end;\n\n    justify-content: space-between;\n\n    gap: 20px;\n\n    margin-bottom: 18px;\n}\n\n\n.pn-section-title-left {\n\n    min-width: 0;\n}\n\n\n.pn-section-title h3 {\n\n    margin: 0;\n\n    font-size: 25px;\n\n    line-height: 1.15;\n\n    font-weight: 700;\n\n    letter-spacing: -.45px;\n\n    color: var(--pn-text);\n}\n\n\n.pn-section-title h3::before {\n\n    content: \"\";\n\n    display: inline-block;\n\n    width: 5px;\n    height: 21px;\n\n    margin-right: 10px;\n\n    vertical-align: -2px;\n\n    background: var(--pn-red);\n\n    border-radius: 99px;\n}\n\n\n.pn-section-subtitle {\n\n    margin-top: 6px;\n\n    margin-left: 15px;\n\n    font-size: 13px;\n\n    line-height: 1.5;\n\n    color: var(--pn-text-soft);\n\n    letter-spacing: -.05px;\n}\n\n\n.pn-section-title > a {\n\n    flex-shrink: 0;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 5px;\n\n    padding: 7px 12px;\n\n    border: 1px solid var(--pn-red-border);\n\n    border-radius: 999px;\n\n    background: rgba(255,255,255,.48);\n\n    color: var(--pn-red) !important;\n\n    text-decoration: none !important;\n\n    font-size: 11px;\n\n    line-height: 1;\n\n    font-weight: 600;\n\n    letter-spacing: -.05px;\n\n    backdrop-filter: blur(12px);\n\n    -webkit-backdrop-filter: blur(12px);\n\n    transition:\n        background .22s ease,\n        color .22s ease,\n        border-color .22s ease,\n        transform .22s ease;\n}\n\n\n.pn-section-title > a:hover {\n\n    background: var(--pn-red);\n\n    border-color: var(--pn-red);\n\n    color: #fff !important;\n\n    transform: translateY(-1px);\n}\n\n\n\/* =========================================================\n   BERITA GRID\n   ========================================================= *\/\n\n.pn-news-grid {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 16px;\n}\n\n\n\/* =========================================================\n   NEWS CARD\n   ========================================================= *\/\n\n.pn-news-card {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        42% minmax(0,58%);\n\n    min-height: 178px;\n\n    overflow: hidden;\n\n    background: var(--pn-glass);\n\n    border: 1px solid var(--pn-border);\n\n    border-radius: 17px;\n\n    box-shadow: var(--pn-shadow);\n\n    backdrop-filter:\n        blur(20px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(20px)\n        saturate(120%);\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease,\n        background .25s ease,\n        border-color .25s ease;\n}\n\n\n.pn-news-card:hover {\n\n    transform: translateY(-4px);\n\n    background: var(--pn-glass-hover);\n\n    border-color:\n        rgba(255,255,255,.95);\n\n    box-shadow:\n        var(--pn-shadow-hover);\n}\n\n\n\/* =========================================================\n   NEWS TERBARU\n   ========================================================= *\/\n\n.pn-news-card.is-latest {\n\n    border-left:\n        3px solid var(--pn-red);\n}\n\n\n\/* =========================================================\n   BADGE TERBARU\n   ========================================================= *\/\n\n.pn-latest-badge {\n\n    position: absolute;\n\n    top: 10px;\n    left: 10px;\n\n    z-index: 5;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 5px;\n\n    padding: 5px 8px;\n\n    border-radius: 999px;\n\n    background:\n        rgba(154,33,9,.92);\n\n    color: #fff;\n\n    font-size: 9px;\n\n    line-height: 1;\n\n    font-weight: 700;\n\n    letter-spacing: .25px;\n\n    box-shadow:\n        0 4px 12px rgba(154,33,9,.20);\n\n    backdrop-filter:\n        blur(10px);\n\n    -webkit-backdrop-filter:\n        blur(10px);\n}\n\n\n.pn-latest-badge::before {\n\n    content: \"\";\n\n    width: 5px;\n    height: 5px;\n\n    border-radius: 50%;\n\n    background: #fff;\n\n    box-shadow:\n        0 0 0 3px rgba(255,255,255,.20);\n}\n\n\n\/* =========================================================\n   NEWS IMAGE\n   ========================================================= *\/\n\n.pn-news-image {\n\n    position: relative;\n\n    width: 100%;\n    height: 100%;\n\n    min-height: 178px;\n\n    overflow: hidden;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(154,33,9,.10),\n            rgba(255,255,255,.75)\n        );\n}\n\n\n.pn-news-image::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(0,0,0,.03),\n            transparent 60%\n        );\n\n    pointer-events: none;\n}\n\n\n.pn-news-image img {\n\n    width: 100%;\n    height: 100%;\n\n    min-height: 178px;\n\n    display: block;\n\n    object-fit: cover;\n\n    transition:\n        transform .45s cubic-bezier(.22,.61,.36,1);\n}\n\n\n.pn-news-card:hover\n.pn-news-image img {\n\n    transform:\n        scale(1.045);\n}\n\n\n.pn-news-no-image {\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    height: 100%;\n\n    min-height: 178px;\n\n    padding: 20px;\n\n    color: var(--pn-red);\n\n    background:\n\n        radial-gradient(\n            circle at 30% 20%,\n            rgba(154,33,9,.12),\n            transparent 45%\n        ),\n\n        linear-gradient(\n            135deg,\n            #f8f5f3,\n            #eee9e6\n        );\n\n    font-size: 11px;\n\n    font-weight: 600;\n\n    text-align: center;\n}\n\n\n\/* =========================================================\n   NEWS CONTENT\n   ========================================================= *\/\n\n.pn-news-content {\n\n    display: flex;\n\n    flex-direction: column;\n\n    justify-content: center;\n\n    min-width: 0;\n\n    padding:\n        17px 17px 16px 16px;\n}\n\n\n\/* =========================================================\n   NEWS DATE\n   ========================================================= *\/\n\n.pn-news-date {\n\n    margin-bottom: 7px;\n\n    color: var(--pn-red);\n\n    font-size: 10px;\n\n    line-height: 1.2;\n\n    font-weight: 600;\n\n    letter-spacing: .15px;\n\n    text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   NEWS TITLE\n   ========================================================= *\/\n\n.pn-news-title {\n\n    display: -webkit-box;\n\n    overflow: hidden;\n\n    margin: 0 0 7px;\n\n    color: var(--pn-text);\n\n    font-size: 14px;\n\n    line-height: 1.38;\n\n    font-weight: 650;\n\n    letter-spacing: -.15px;\n\n    -webkit-line-clamp: 3;\n\n    -webkit-box-orient: vertical;\n}\n\n\n.pn-news-title a {\n\n    color: inherit !important;\n\n    text-decoration: none !important;\n}\n\n\n.pn-news-title a:hover {\n\n    color: var(--pn-red) !important;\n}\n\n\n\/* =========================================================\n   NEWS EXCERPT\n   ========================================================= *\/\n\n.pn-news-excerpt {\n\n    display: -webkit-box;\n\n    overflow: hidden;\n\n    margin: 0;\n\n    color: var(--pn-text-soft);\n\n    font-size: 11px;\n\n    line-height: 1.55;\n\n    font-weight: 400;\n\n    letter-spacing: -.05px;\n\n    -webkit-line-clamp: 2;\n\n    -webkit-box-orient: vertical;\n}\n\n\n\/* =========================================================\n   PENGUMUMAN LIST\n   ========================================================= *\/\n\n.pn-announcement-list {\n\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 9px;\n}\n\n\n\/* =========================================================\n   ANNOUNCEMENT ITEM\n   ========================================================= *\/\n\n.pn-announcement-item {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        58px minmax(0,1fr) 24px;\n\n    align-items: center;\n\n    gap: 14px;\n\n    padding:\n        12px 14px;\n\n    background:\n        rgba(255,255,255,.60);\n\n    border:\n        1px solid var(--pn-border);\n\n    border-radius: 14px;\n\n    box-shadow:\n        0 6px 22px rgba(0,0,0,.045),\n        inset 0 1px 0 rgba(255,255,255,.72);\n\n    backdrop-filter:\n        blur(18px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(18px)\n        saturate(120%);\n\n    transition:\n        transform .22s ease,\n        background .22s ease,\n        box-shadow .22s ease,\n        border-color .22s ease;\n}\n\n\n.pn-announcement-item:hover {\n\n    transform:\n        translateX(3px);\n\n    background:\n        rgba(255,255,255,.78);\n\n    box-shadow:\n        0 9px 26px rgba(0,0,0,.065),\n        inset 0 1px 0 rgba(255,255,255,.88);\n}\n\n\n\/* =========================================================\n   ANNOUNCEMENT TERBARU\n   ========================================================= *\/\n\n.pn-announcement-item.is-latest {\n\n    border-left:\n        3px solid var(--pn-red);\n\n    background:\n        rgba(154,33,9,.065);\n}\n\n\n.pn-announcement-item.is-latest:hover {\n\n    background:\n        rgba(154,33,9,.095);\n}\n\n\n\/* =========================================================\n   DATE BOX\n   ========================================================= *\/\n\n.pn-announcement-date {\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 58px;\n\n    min-height: 48px;\n\n    border-radius: 11px;\n\n    background:\n        rgba(255,255,255,.72);\n\n    border:\n        1px solid rgba(154,33,9,.10);\n\n    box-shadow:\n        inset 0 1px 0 rgba(255,255,255,.9);\n}\n\n\n.pn-announcement-date-day {\n\n    color: var(--pn-red);\n\n    font-size: 17px;\n\n    line-height: 1;\n\n    font-weight: 700;\n\n    letter-spacing: -.5px;\n}\n\n\n.pn-announcement-date-month {\n\n    margin-top: 4px;\n\n    color: var(--pn-text-soft);\n\n    font-size: 8px;\n\n    line-height: 1;\n\n    font-weight: 600;\n\n    letter-spacing: .45px;\n\n    text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   ANNOUNCEMENT CONTENT\n   ========================================================= *\/\n\n.pn-announcement-content {\n\n    min-width: 0;\n}\n\n\n.pn-announcement-title {\n\n    display: -webkit-box;\n\n    overflow: hidden;\n\n    margin: 0 0 4px;\n\n    color: var(--pn-text);\n\n    font-size: 12px;\n\n    line-height: 1.4;\n\n    font-weight: 650;\n\n    letter-spacing: -.08px;\n\n    -webkit-line-clamp: 2;\n\n    -webkit-box-orient: vertical;\n}\n\n\n.pn-announcement-title a {\n\n    color: inherit !important;\n\n    text-decoration: none !important;\n}\n\n\n.pn-announcement-title a:hover {\n\n    color: var(--pn-red) !important;\n}\n\n\n.pn-announcement-meta {\n\n    color: var(--pn-text-soft);\n\n    font-size: 9px;\n\n    line-height: 1.4;\n}\n\n\n\/* =========================================================\n   ARROW\n   ========================================================= *\/\n\n.pn-announcement-arrow {\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 24px;\n    height: 24px;\n\n    border-radius: 50%;\n\n    color: var(--pn-red);\n\n    background:\n        rgba(154,33,9,.07);\n\n    font-size: 15px;\n\n    line-height: 1;\n\n    transition:\n        background .22s ease,\n        color .22s ease,\n        transform .22s ease;\n}\n\n\n.pn-announcement-item:hover\n.pn-announcement-arrow {\n\n    background:\n        var(--pn-red);\n\n    color: #fff;\n\n    transform:\n        translateX(2px);\n}\n\n\n\/* =========================================================\n   PROFESSIONAL SKELETON LOADING\n   ========================================================= *\/\n\n\/* ---------- NEWS ---------- *\/\n\n.pn-news-skeleton {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        42% minmax(0,58%);\n\n    min-height: 178px;\n\n    overflow: hidden;\n\n    background:\n        rgba(255,255,255,.66);\n\n    border:\n        1px solid var(--pn-border);\n\n    border-radius: 17px;\n\n    box-shadow:\n        var(--pn-shadow);\n\n    backdrop-filter:\n        blur(20px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(20px)\n        saturate(120%);\n}\n\n\n.pn-skeleton-image {\n\n    position: relative;\n\n    min-height: 178px;\n\n    overflow: hidden;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(154,33,9,.07),\n            rgba(255,255,255,.70)\n        );\n}\n\n\n.pn-skeleton-content {\n\n    display: flex;\n\n    flex-direction: column;\n\n    justify-content: center;\n\n    padding:\n        17px 17px 16px 16px;\n}\n\n\n.pn-skeleton-date {\n\n    position: relative;\n\n    width: 75px;\n\n    height: 8px;\n\n    margin-bottom: 12px;\n\n    overflow: hidden;\n\n    border-radius: 99px;\n\n    background:\n        rgba(154,33,9,.13);\n}\n\n\n.pn-skeleton-line {\n\n    position: relative;\n\n    height: 10px;\n\n    margin-bottom: 8px;\n\n    overflow: hidden;\n\n    border-radius: 99px;\n\n    background:\n        rgba(0,0,0,.075);\n}\n\n\n.pn-skeleton-line.long {\n\n    width: 92%;\n}\n\n\n.pn-skeleton-line.medium {\n\n    width: 76%;\n}\n\n\n.pn-skeleton-line.short {\n\n    width: 48%;\n}\n\n\n.pn-skeleton-excerpt {\n\n    margin-top: 6px;\n}\n\n\n.pn-skeleton-excerpt\n.pn-skeleton-line {\n\n    height: 7px;\n\n    margin-bottom: 6px;\n\n    background:\n        rgba(0,0,0,.055);\n}\n\n\n\/* ---------- ANNOUNCEMENT ---------- *\/\n\n.pn-announcement-skeleton {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        58px minmax(0,1fr) 24px;\n\n    align-items: center;\n\n    gap: 14px;\n\n    min-height: 72px;\n\n    padding:\n        12px 14px;\n\n    overflow: hidden;\n\n    background:\n        rgba(255,255,255,.60);\n\n    border:\n        1px solid var(--pn-border);\n\n    border-radius: 14px;\n\n    box-shadow:\n        0 6px 22px rgba(0,0,0,.045),\n        inset 0 1px 0 rgba(255,255,255,.72);\n\n    backdrop-filter:\n        blur(18px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(18px)\n        saturate(120%);\n}\n\n\n.pn-skeleton-date-box {\n\n    position: relative;\n\n    width: 58px;\n    height: 48px;\n\n    overflow: hidden;\n\n    border-radius: 11px;\n\n    background:\n        rgba(154,33,9,.075);\n}\n\n\n.pn-skeleton-announcement-content {\n\n    min-width: 0;\n}\n\n\n.pn-skeleton-arrow {\n\n    width: 24px;\n    height: 24px;\n\n    border-radius: 50%;\n\n    background:\n        rgba(154,33,9,.08);\n}\n\n\n\/* =========================================================\n   SHIMMER\n   ========================================================= *\/\n\n.pn-skeleton-image::after,\n.pn-skeleton-line::after,\n.pn-skeleton-date::after,\n.pn-skeleton-date-box::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent 0%,\n            rgba(255,255,255,.72) 50%,\n            transparent 100%\n        );\n\n    transform:\n        translateX(-100%);\n\n    animation:\n        pn-skeleton-shimmer\n        1.35s\n        ease-in-out\n        infinite;\n}\n\n\n@keyframes pn-skeleton-shimmer {\n\n    0% {\n\n        transform:\n            translateX(-100%);\n    }\n\n    100% {\n\n        transform:\n            translateX(100%);\n    }\n}\n\n\n\/* =========================================================\n   LOADING STATUS\n   ========================================================= *\/\n\n.pn-skeleton-status {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 6px;\n\n    margin-top: 3px;\n\n    color:\n        var(--pn-text-soft);\n\n    font-size: 8px;\n\n    line-height: 1;\n}\n\n\n.pn-skeleton-status-dot {\n\n    width: 5px;\n    height: 5px;\n\n    border-radius: 50%;\n\n    background:\n        var(--pn-red);\n\n    animation:\n        pn-skeleton-pulse\n        1.2s\n        ease-in-out\n        infinite;\n}\n\n\n@keyframes pn-skeleton-pulse {\n\n    0%,\n    100% {\n\n        opacity: .25;\n\n        transform:\n            scale(.8);\n    }\n\n    50% {\n\n        opacity: 1;\n\n        transform:\n            scale(1);\n    }\n}\n\n\n\/* =========================================================\n   EMPTY\n   ========================================================= *\/\n\n.pn-empty {\n\n    padding: 25px;\n\n    text-align: center;\n\n    color:\n        var(--pn-text-soft);\n\n    font-size: 12px;\n\n    background:\n        rgba(255,255,255,.45);\n\n    border:\n        1px solid rgba(255,255,255,.65);\n\n    border-radius: 14px;\n}\n\n\n\/* =========================================================\n   RESPONSIVE TABLET\n   ========================================================= *\/\n\n@media (max-width: 900px) {\n\n    .pn-news-grid {\n\n        grid-template-columns:\n            repeat(2, minmax(0,1fr));\n    }\n\n\n    .pn-news-card,\n    .pn-news-skeleton {\n\n        grid-template-columns:\n            40% minmax(0,60%);\n    }\n\n\n    .pn-news-content,\n    .pn-skeleton-content {\n\n        padding: 14px;\n    }\n\n\n    .pn-news-title {\n\n        font-size: 13px;\n    }\n}\n\n\n\/* =========================================================\n   RESPONSIVE MOBILE\n   ========================================================= *\/\n\n@media (max-width: 650px) {\n\n    .pn-section {\n\n        margin-bottom: 32px;\n    }\n\n\n    .pn-section-title {\n\n        align-items: flex-start;\n    }\n\n\n    .pn-section-title h3 {\n\n        font-size: 21px;\n    }\n\n\n    .pn-section-subtitle {\n\n        margin-left: 15px;\n\n        font-size: 12px;\n    }\n\n\n    .pn-section-title > a {\n\n        font-size: 10px;\n\n        padding:\n            7px 9px;\n    }\n\n\n    .pn-news-grid {\n\n        grid-template-columns:\n            1fr;\n\n        gap: 12px;\n    }\n\n\n    .pn-news-card,\n    .pn-news-skeleton {\n\n        grid-template-columns:\n            40% minmax(0,60%);\n\n        min-height: 155px;\n\n        border-radius: 15px;\n    }\n\n\n    .pn-news-image,\n    .pn-news-image img,\n    .pn-news-no-image,\n    .pn-skeleton-image {\n\n        min-height: 155px;\n    }\n\n\n    .pn-news-content,\n    .pn-skeleton-content {\n\n        padding:\n            13px 13px 13px 14px;\n    }\n\n\n    .pn-news-date {\n\n        font-size: 9px;\n\n        margin-bottom: 5px;\n    }\n\n\n    .pn-news-title {\n\n        font-size: 12px;\n\n        line-height: 1.35;\n    }\n\n\n    .pn-news-excerpt {\n\n        font-size: 10px;\n    }\n\n\n    .pn-announcement-item,\n    .pn-announcement-skeleton {\n\n        grid-template-columns:\n            50px minmax(0,1fr) 22px;\n\n        gap: 10px;\n\n        padding:\n            10px 11px;\n\n        border-radius: 13px;\n    }\n\n\n    .pn-announcement-date {\n\n        width: 50px;\n\n        min-height: 45px;\n    }\n\n\n    .pn-announcement-date-day {\n\n        font-size: 15px;\n    }\n\n\n    .pn-announcement-title {\n\n        font-size: 11px;\n    }\n\n\n    .pn-skeleton-date-box {\n\n        width: 50px;\n\n        height: 45px;\n    }\n}\n\n\n\/* =========================================================\n   REDUCE MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .pn-news-card,\n    .pn-news-image img,\n    .pn-announcement-item,\n    .pn-announcement-arrow,\n    .pn-section-title > a,\n    .pn-skeleton-image::after,\n    .pn-skeleton-line::after,\n    .pn-skeleton-date::after,\n    .pn-skeleton-date-box::after,\n    .pn-skeleton-status-dot {\n\n        transition: none !important;\n\n        animation: none !important;\n    }\n}\n\n\n\/* =========================================================\n   FALLBACK BACKDROP\n   ========================================================= *\/\n\n@supports not (\n    backdrop-filter: blur(10px)\n) {\n\n    .pn-news-card,\n    .pn-announcement-item,\n    .pn-section-title > a,\n    .pn-news-skeleton,\n    .pn-announcement-skeleton {\n\n        background:\n            rgba(255,255,255,.92);\n    }\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     WRAPPER UTAMA\n     ========================================================= -->\n\n<div class=\"pn-info\">\n\n<div class=\"pn-info-container\">\n\n\n<!-- =========================================================\n     SECTION 01 \u2014 BERITA\n     ========================================================= -->\n\n<section class=\"pn-section\">\n\n    <div class=\"pn-section-title\">\n\n        <div class=\"pn-section-title-left\">\n\n            <h3>\n                Berita\n            <\/h3>\n\n            <div class=\"pn-section-subtitle\">\n                Berita terbaru Pengadilan Negeri Simpang Tiga Redelong\n            <\/div>\n\n        <\/div>\n\n        <a\n            href=\"\/category\/berita\/\"\n            aria-label=\"Lihat semua berita\"\n        >\n            Semua Berita\n            <span>\u2192<\/span>\n        <\/a>\n\n    <\/div>\n\n\n    <div\n        id=\"pn-news-grid\"\n        class=\"pn-news-grid\"\n    >\n\n        <!-- =================================================\n             PROFESSIONAL SKELETON\n             ================================================= -->\n\n        <article class=\"pn-news-skeleton\">\n\n            <div class=\"pn-skeleton-image\"><\/div>\n\n            <div class=\"pn-skeleton-content\">\n\n                <div class=\"pn-skeleton-date\"><\/div>\n\n                <div class=\"pn-skeleton-line long\"><\/div>\n\n                <div class=\"pn-skeleton-line medium\"><\/div>\n\n                <div class=\"pn-skeleton-line short\"><\/div>\n\n                <div class=\"pn-skeleton-excerpt\">\n\n                    <div class=\"pn-skeleton-line medium\"><\/div>\n\n                    <div class=\"pn-skeleton-line short\"><\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n        <article class=\"pn-news-skeleton\">\n\n            <div class=\"pn-skeleton-image\"><\/div>\n\n            <div class=\"pn-skeleton-content\">\n\n                <div class=\"pn-skeleton-date\"><\/div>\n\n                <div class=\"pn-skeleton-line medium\"><\/div>\n\n                <div class=\"pn-skeleton-line long\"><\/div>\n\n                <div class=\"pn-skeleton-line short\"><\/div>\n\n                <div class=\"pn-skeleton-excerpt\">\n\n                    <div class=\"pn-skeleton-line long\"><\/div>\n\n                    <div class=\"pn-skeleton-line short\"><\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n    <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     SECTION 02 \u2014 PENGUMUMAN\n     ========================================================= -->\n\n<section class=\"pn-section\">\n\n    <div class=\"pn-section-title\">\n\n        <div class=\"pn-section-title-left\">\n\n            <h3>\n                Pengumuman\n            <\/h3>\n\n            <div class=\"pn-section-subtitle\">\n                Informasi dan pengumuman terbaru\n            <\/div>\n\n        <\/div>\n\n        <a\n            href=\"#\"\n            aria-label=\"Lihat semua pengumuman\"\n        >\n            Semua Pengumuman\n            <span>\u2192<\/span>\n        <\/a>\n\n    <\/div>\n\n\n    <div\n        id=\"pn-announcement-list\"\n        class=\"pn-announcement-list\"\n    >\n\n        <!-- =================================================\n             PROFESSIONAL SKELETON\n             ================================================= -->\n\n        <div class=\"pn-announcement-skeleton\">\n\n            <div class=\"pn-skeleton-date-box\"><\/div>\n\n            <div class=\"pn-skeleton-announcement-content\">\n\n                <div class=\"pn-skeleton-line long\"><\/div>\n\n                <div class=\"pn-skeleton-line medium\"><\/div>\n\n                <div class=\"pn-skeleton-line short\"><\/div>\n\n            <\/div>\n\n            <div class=\"pn-skeleton-arrow\"><\/div>\n\n        <\/div>\n\n\n        <div class=\"pn-announcement-skeleton\">\n\n            <div class=\"pn-skeleton-date-box\"><\/div>\n\n            <div class=\"pn-skeleton-announcement-content\">\n\n                <div class=\"pn-skeleton-line medium\"><\/div>\n\n                <div class=\"pn-skeleton-line long\"><\/div>\n\n                <div class=\"pn-skeleton-line short\"><\/div>\n\n            <\/div>\n\n            <div class=\"pn-skeleton-arrow\"><\/div>\n\n        <\/div>\n\n\n        <div class=\"pn-announcement-skeleton\">\n\n            <div class=\"pn-skeleton-date-box\"><\/div>\n\n            <div class=\"pn-skeleton-announcement-content\">\n\n                <div class=\"pn-skeleton-line long\"><\/div>\n\n                <div class=\"pn-skeleton-line medium\"><\/div>\n\n                <div class=\"pn-skeleton-line short\"><\/div>\n\n            <\/div>\n\n            <div class=\"pn-skeleton-arrow\"><\/div>\n\n        <\/div>\n\n\n        <div class=\"pn-announcement-skeleton\">\n\n            <div class=\"pn-skeleton-date-box\"><\/div>\n\n            <div class=\"pn-skeleton-announcement-content\">\n\n                <div class=\"pn-skeleton-line medium\"><\/div>\n\n                <div class=\"pn-skeleton-line long\"><\/div>\n\n                <div class=\"pn-skeleton-line short\"><\/div>\n\n            <\/div>\n\n            <div class=\"pn-skeleton-arrow\"><\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<\/div>\n<\/div>\n\n\n\n<script>\n\n\/* =========================================================\n   PN SIMPANG TIGA REDELONG\n   WORDPRESS REST API\n   OPTIMIZED HOMEPAGE LOADING\n   ========================================================= *\/\n\n\n\/* =========================================================\n   KONFIGURASI\n   ========================================================= *\/\n\nconst PN_API =\n    window.location.origin +\n    \"\/wp-json\/wp\/v2\/\";\n\n\nconst PN_BERITA_ID =\n    70;\n\n\nconst PN_PENGUMUMAN_SLUG =\n    \"pengumuman\";\n\n\nconst PN_BERITA_COUNT =\n    6;\n\n\nconst PN_PENGUMUMAN_COUNT =\n    5;\n\n\n\/* =========================================================\n   CACHE\n   ========================================================= *\/\n\nconst PN_CACHE_TTL =\n    5 * 60 * 1000;\n\n\nconst PN_CATEGORY_CACHE_TTL =\n    24 * 60 * 60 * 1000;\n\n\nconst PN_NEWS_CACHE_KEY =\n    \"pn_home_news_v2\";\n\n\nconst PN_ANNOUNCEMENT_CACHE_KEY =\n    \"pn_home_announcements_v2\";\n\n\nconst PN_CATEGORY_CACHE_KEY =\n    \"pn_home_pengumuman_category_v2\";\n\n\n\/* =========================================================\n   CACHE HELPER\n   ========================================================= *\/\n\nfunction pnGetCache(key, ttl) {\n\n    try {\n\n        const raw =\n            sessionStorage.getItem(key);\n\n\n        if (!raw) {\n\n            return null;\n\n        }\n\n\n        const cached =\n            JSON.parse(raw);\n\n\n        if (\n            !cached ||\n            !cached.time ||\n            !Array.isArray(cached.data)\n        ) {\n\n            sessionStorage.removeItem(key);\n\n            return null;\n\n        }\n\n\n        if (\n            Date.now() -\n            cached.time >\n            ttl\n        ) {\n\n            sessionStorage.removeItem(key);\n\n            return null;\n\n        }\n\n\n        return cached.data;\n\n    }\n\n    catch (error) {\n\n        return null;\n\n    }\n\n}\n\n\nfunction pnSetCache(key, data) {\n\n    try {\n\n        sessionStorage.setItem(\n\n            key,\n\n            JSON.stringify({\n\n                time:\n                    Date.now(),\n\n                data:\n                    data\n\n            })\n\n        );\n\n    }\n\n    catch (error) {\n\n        \/* cache gagal tidak mengganggu website *\/\n\n    }\n\n}\n\n\n\/* =========================================================\n   ESCAPE HTML\n   ========================================================= *\/\n\nfunction pnEscapeHTML(text) {\n\n    const div =\n        document.createElement(\"div\");\n\n\n    div.textContent =\n        text || \"\";\n\n\n    return div.innerHTML;\n\n}\n\n\n\/* =========================================================\n   STRIP HTML\n   ========================================================= *\/\n\nfunction pnStripHTML(html) {\n\n    const div =\n        document.createElement(\"div\");\n\n\n    div.innerHTML =\n        html || \"\";\n\n\n    return (\n        div.textContent ||\n        div.innerText ||\n        \"\"\n    );\n\n}\n\n\n\/* =========================================================\n   EXCERPT\n   ========================================================= *\/\n\nfunction pnExcerpt(\n    html,\n    length = 125\n) {\n\n    const text =\n        pnStripHTML(html)\n        .replace(\/\\s+\/g, \" \")\n        .trim();\n\n\n    if (\n        text.length <= length\n    ) {\n\n        return text;\n\n    }\n\n\n    return (\n        text\n            .substring(0, length)\n            .trim() +\n        \"...\"\n    );\n\n}\n\n\n\/* =========================================================\n   FORMAT DATE\n   ========================================================= *\/\n\nfunction pnFormatDate(\n    dateString\n) {\n\n    const date =\n        new Date(\n            dateString\n        );\n\n\n    return date.toLocaleDateString(\n\n        \"id-ID\",\n\n        {\n\n            day:\n                \"2-digit\",\n\n            month:\n                \"short\",\n\n            year:\n                \"numeric\"\n\n        }\n\n    );\n\n}\n\n\n\/* =========================================================\n   DAY\n   ========================================================= *\/\n\nfunction pnDay(\n    dateString\n) {\n\n    const date =\n        new Date(\n            dateString\n        );\n\n\n    return date.toLocaleDateString(\n\n        \"id-ID\",\n\n        {\n\n            day:\n                \"2-digit\"\n\n        }\n\n    );\n\n}\n\n\n\/* =========================================================\n   MONTH\n   ========================================================= *\/\n\nfunction pnMonth(\n    dateString\n) {\n\n    const date =\n        new Date(\n            dateString\n        );\n\n\n    return date.toLocaleDateString(\n\n        \"id-ID\",\n\n        {\n\n            month:\n                \"short\"\n\n        }\n\n    );\n\n}\n\n\n\/* =========================================================\n   BERITA \u2014 RENDER\n   ========================================================= *\/\n\nfunction pnRenderNews(\n    posts\n) {\n\n    const container =\n        document.getElementById(\n            \"pn-news-grid\"\n        );\n\n\n    if (\n        !container\n    ) {\n\n        return;\n\n    }\n\n\n    if (\n        !posts ||\n        !posts.length\n    ) {\n\n        container.innerHTML =\n\n            `<div class=\"pn-empty\">\n\n                Belum ada berita.\n\n            <\/div>`;\n\n        return;\n\n    }\n\n\n    container.innerHTML =\n\n        posts.map(\n\n            (\n                post,\n                index\n            ) => {\n\n                let image = \"\";\n\n\n                \/*\n                 * Featured image\n                 *\n                 * Prioritas:\n                 * 1. medium_large\n                 * 2. large\n                 * 3. source_url\n                 *\/\n\n                if (\n\n                    post._embedded &&\n\n                    post._embedded[\n                        \"wp:featuredmedia\"\n                    ] &&\n\n                    post._embedded[\n                        \"wp:featuredmedia\"\n                    ][0]\n\n                ) {\n\n                    const media =\n                        post._embedded[\n                            \"wp:featuredmedia\"\n                        ][0];\n\n\n                    image =\n\n                        (\n\n                            media.media_details &&\n\n                            media.media_details.sizes &&\n\n                            media.media_details.sizes\n                                .medium_large &&\n\n                            media.media_details.sizes\n                                .medium_large\n                                .source_url\n\n                        )\n\n                        ||\n\n                        (\n\n                            media.media_details &&\n\n                            media.media_details.sizes &&\n\n                            media.media_details.sizes\n                                .large &&\n\n                            media.media_details.sizes\n                                .large\n                                .source_url\n\n                        )\n\n                        ||\n\n                        media.source_url\n\n                        ||\n\n                        \"\";\n\n                }\n\n\n                const latest =\n                    index === 0;\n\n\n                const title =\n\n                    post.title &&\n\n                    post.title.rendered\n\n                        ? post.title.rendered\n\n                        : \"Berita\";\n\n\n                const excerpt =\n\n                    pnExcerpt(\n\n                        post.excerpt\n                            ? post.excerpt.rendered\n                            : \"\",\n\n                        120\n\n                    );\n\n\n                return `\n\n                    <article\n                        class=\"\n                            pn-news-card\n                            ${latest ? \"is-latest\" : \"\"}\n                        \"\n                    >\n\n                        ${\n                            latest\n\n                                ? `\n\n                                    <span\n                                        class=\"pn-latest-badge\"\n                                    >\n                                        TERBARU\n                                    <\/span>\n\n                                  `\n\n                                : \"\"\n                        }\n\n\n                        <div\n                            class=\"pn-news-image\"\n                        >\n\n                            ${\n                                image\n\n                                    ? `\n\n                                        <img\n\n                                            src=\"${pnEscapeHTML(\n                                                image\n                                            )}\"\n\n                                            alt=\"${pnEscapeHTML(\n                                                pnStripHTML(\n                                                    title\n                                                )\n                                            )}\"\n\n                                            loading=\"${\n                                                index === 0\n                                                    ? \"eager\"\n                                                    : \"lazy\"\n                                            }\"\n\n                                            decoding=\"async\"\n\n                                            ${\n                                                index === 0\n\n                                                    ? 'fetchpriority=\"high\"'\n\n                                                    : \"\"\n                                            }\n\n                                        >\n\n                                      `\n\n                                    : `\n\n                                        <div\n                                            class=\"pn-news-no-image\"\n                                        >\n\n                                            Pengadilan Negeri\n                                            Simpang Tiga Redelong\n\n                                        <\/div>\n\n                                      `\n                            }\n\n                        <\/div>\n\n\n                        <div\n                            class=\"pn-news-content\"\n                        >\n\n                            <div\n                                class=\"pn-news-date\"\n                            >\n\n                                ${pnFormatDate(\n                                    post.date\n                                )}\n\n                            <\/div>\n\n\n                            <h4\n                                class=\"pn-news-title\"\n                            >\n\n                                <a\n                                    href=\"${pnEscapeHTML(\n                                        post.link\n                                    )}\"\n                                >\n\n                                    ${title}\n\n                                <\/a>\n\n                            <\/h4>\n\n\n                            <p\n                                class=\"pn-news-excerpt\"\n                            >\n\n                                ${pnEscapeHTML(\n                                    excerpt\n                                )}\n\n                            <\/p>\n\n                        <\/div>\n\n                    <\/article>\n\n                `;\n\n            }\n\n        ).join(\"\");\n\n}\n\n\n\/* =========================================================\n   BERITA \u2014 LOAD API\n   ========================================================= *\/\n\nasync function pnLoadNews() {\n\n    const container =\n        document.getElementById(\n            \"pn-news-grid\"\n        );\n\n\n    \/*\n     * Cache ditampilkan terlebih dahulu.\n     *\/\n\n    const cachedNews =\n        pnGetCache(\n\n            PN_NEWS_CACHE_KEY,\n\n            PN_CACHE_TTL\n\n        );\n\n\n    if (\n        cachedNews\n    ) {\n\n        pnRenderNews(\n            cachedNews\n        );\n\n    }\n\n\n    try {\n\n        const url =\n\n            PN_API +\n\n            \"posts\" +\n\n            \"?categories=\" +\n            PN_BERITA_ID +\n\n            \"&per_page=\" +\n            PN_BERITA_COUNT +\n\n            \"&orderby=date\" +\n\n            \"&order=desc\" +\n\n            \"&_embed=1\";\n\n\n        const response =\n            await fetch(\n\n                url,\n\n                {\n\n                    method:\n                        \"GET\",\n\n                    credentials:\n                        \"same-origin\"\n\n                }\n\n            );\n\n\n        if (\n            !response.ok\n        ) {\n\n            throw new Error(\n                \"Gagal mengambil berita\"\n            );\n\n        }\n\n\n        const posts =\n            await response.json();\n\n\n        pnSetCache(\n\n            PN_NEWS_CACHE_KEY,\n\n            posts\n\n        );\n\n\n        pnRenderNews(\n            posts\n        );\n\n\n    }\n\n    catch (error) {\n\n        console.error(\n            \"PN Berita:\",\n            error\n        );\n\n\n        if (\n            !cachedNews\n        ) {\n\n            container.innerHTML =\n\n                `<div class=\"pn-empty\">\n\n                    Berita belum dapat dimuat.\n\n                <\/div>`;\n\n        }\n\n    }\n\n}\n\n\n\/* =========================================================\n   CARI CATEGORY PENGUMUMAN\n   ========================================================= *\/\n\nasync function pnGetAnnouncementCategory() {\n\n    const cachedCategory =\n        pnGetCache(\n\n            PN_CATEGORY_CACHE_KEY,\n\n            PN_CATEGORY_CACHE_TTL\n\n        );\n\n\n    if (\n\n        cachedCategory &&\n\n        cachedCategory.length &&\n\n        cachedCategory[0].id\n\n    ) {\n\n        return cachedCategory[0].id;\n\n    }\n\n\n    const url =\n\n        PN_API +\n\n        \"categories\" +\n\n        \"?slug=\" +\n\n        encodeURIComponent(\n            PN_PENGUMUMAN_SLUG\n        ) +\n\n        \"&per_page=1\";\n\n\n    const response =\n        await fetch(\n\n            url,\n\n            {\n\n                method:\n                    \"GET\",\n\n                credentials:\n                    \"same-origin\"\n\n            }\n\n        );\n\n\n    if (\n        !response.ok\n    ) {\n\n        throw new Error(\n            \"Kategori pengumuman tidak ditemukan\"\n        );\n\n    }\n\n\n    const categories =\n        await response.json();\n\n\n    if (\n        !categories.length\n    ) {\n\n        throw new Error(\n            \"Kategori pengumuman kosong\"\n        );\n\n    }\n\n\n    pnSetCache(\n\n        PN_CATEGORY_CACHE_KEY,\n\n        categories\n\n    );\n\n\n    return categories[0].id;\n\n}\n\n\n\/* =========================================================\n   PENGUMUMAN \u2014 RENDER\n   ========================================================= *\/\n\nfunction pnRenderAnnouncements(\n    posts\n) {\n\n    const container =\n        document.getElementById(\n            \"pn-announcement-list\"\n        );\n\n\n    if (\n        !container\n    ) {\n\n        return;\n\n    }\n\n\n    if (\n        !posts ||\n        !posts.length\n    ) {\n\n        container.innerHTML =\n\n            `<div class=\"pn-empty\">\n\n                Belum ada pengumuman.\n\n            <\/div>`;\n\n        return;\n\n    }\n\n\n    container.innerHTML =\n\n        posts.map(\n\n            (\n                post,\n                index\n            ) => {\n\n                const latest =\n                    index === 0;\n\n\n                const title =\n\n                    post.title &&\n\n                    post.title.rendered\n\n                        ? post.title.rendered\n\n                        : \"Pengumuman\";\n\n\n                return `\n\n                    <article\n                        class=\"\n                            pn-announcement-item\n                            ${latest ? \"is-latest\" : \"\"}\n                        \"\n                    >\n\n                        <div\n                            class=\"pn-announcement-date\"\n                        >\n\n                            <div\n                                class=\"pn-announcement-date-day\"\n                            >\n\n                                ${pnDay(\n                                    post.date\n                                )}\n\n                            <\/div>\n\n\n                            <div\n                                class=\"pn-announcement-date-month\"\n                            >\n\n                                ${pnMonth(\n                                    post.date\n                                )}\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div\n                            class=\"pn-announcement-content\"\n                        >\n\n                            <h4\n                                class=\"pn-announcement-title\"\n                            >\n\n                                <a\n                                    href=\"${pnEscapeHTML(\n                                        post.link\n                                    )}\"\n                                >\n\n                                    ${title}\n\n                                <\/a>\n\n                            <\/h4>\n\n\n                            <div\n                                class=\"pn-announcement-meta\"\n                            >\n\n                                ${\n                                    latest\n\n                                        ? \"Pengumuman terbaru\"\n\n                                        : \"Informasi Pengadilan Negeri Simpang Tiga Redelong\"\n                                }\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div\n                            class=\"pn-announcement-arrow\"\n                        >\n\n                            \u2192\n\n                        <\/div>\n\n                    <\/article>\n\n                `;\n\n            }\n\n        ).join(\"\");\n\n}\n\n\n\/* =========================================================\n   PENGUMUMAN \u2014 LOAD API\n   ========================================================= *\/\n\nasync function pnLoadAnnouncements() {\n\n    const container =\n        document.getElementById(\n            \"pn-announcement-list\"\n        );\n\n\n    \/*\n     * Cache ditampilkan langsung.\n     *\/\n\n    const cachedAnnouncements =\n        pnGetCache(\n\n            PN_ANNOUNCEMENT_CACHE_KEY,\n\n            PN_CACHE_TTL\n\n        );\n\n\n    if (\n        cachedAnnouncements\n    ) {\n\n        pnRenderAnnouncements(\n            cachedAnnouncements\n        );\n\n    }\n\n\n    try {\n\n        \/*\n         * Cari category ID.\n         *\/\n\n        const categoryID =\n            await pnGetAnnouncementCategory();\n\n\n        \/*\n         * Ambil data pengumuman.\n         *\/\n\n        const url =\n\n            PN_API +\n\n            \"posts\" +\n\n            \"?categories=\" +\n            categoryID +\n\n            \"&per_page=\" +\n            PN_PENGUMUMAN_COUNT +\n\n            \"&orderby=date\" +\n\n            \"&order=desc\" +\n\n            \"&_fields=id,date,link,title\";\n\n\n        const response =\n            await fetch(\n\n                url,\n\n                {\n\n                    method:\n                        \"GET\",\n\n                    credentials:\n                        \"same-origin\"\n\n                }\n\n            );\n\n\n        if (\n            !response.ok\n        ) {\n\n            throw new Error(\n                \"Gagal mengambil pengumuman\"\n            );\n\n        }\n\n\n        const posts =\n            await response.json();\n\n\n        pnSetCache(\n\n            PN_ANNOUNCEMENT_CACHE_KEY,\n\n            posts\n\n        );\n\n\n        pnRenderAnnouncements(\n            posts\n        );\n\n\n    }\n\n    catch (error) {\n\n        console.error(\n            \"PN Pengumuman:\",\n            error\n        );\n\n\n        if (\n            !cachedAnnouncements\n        ) {\n\n            container.innerHTML =\n\n                `<div class=\"pn-empty\">\n\n                    Pengumuman belum dapat dimuat.\n\n                <\/div>`;\n\n        }\n\n    }\n\n}\n\n\n\/* =========================================================\n   JALANKAN\n   ========================================================= *\/\n\ndocument.addEventListener(\n\n    \"DOMContentLoaded\",\n\n    function () {\n\n        \/*\n         * Berita dan Pengumuman berjalan\n         * secara bersamaan.\n         *\/\n\n        Promise.allSettled([\n\n            pnLoadNews(),\n\n            pnLoadAnnouncements()\n\n        ]);\n\n    }\n\n);\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d67b80 elementor-widget elementor-widget-html\" data-id=\"2d67b80\" 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<style>\n\n\/* =========================================================\n   PN SIMPANG TIGA REDELONG\n   RSS INFORMATION\n   iOS GLASS \/ PROFESSIONAL SKELETON LOADING\n   ========================================================= *\/\n\n#pn-rss {\n\n    --pn-red: #9A2109;\n    --pn-red-dark: #7C1A08;\n    --pn-red-soft: rgba(154,33,9,.08);\n    --pn-red-border: rgba(154,33,9,.18);\n\n    --pn-text: #1d1d1f;\n    --pn-text-soft: #6e6e73;\n\n    --pn-glass: rgba(255,255,255,.66);\n    --pn-glass-hover: rgba(255,255,255,.80);\n\n    --pn-border: rgba(255,255,255,.78);\n\n    --pn-shadow:\n        0 8px 30px rgba(0,0,0,.055),\n        inset 0 1px 0 rgba(255,255,255,.80);\n\n    --pn-shadow-hover:\n        0 14px 38px rgba(0,0,0,.09),\n        inset 0 1px 0 rgba(255,255,255,.90);\n\n    width: 100%;\n\n    position: relative;\n\n    color: var(--pn-text);\n\n    font-family:\n        -apple-system,\n        BlinkMacSystemFont,\n        \"SF Pro Display\",\n        \"SF Pro Text\",\n        \"Segoe UI\",\n        Roboto,\n        Helvetica,\n        Arial,\n        sans-serif;\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n\n}\n\n\n\/* =========================================================\n   BACKGROUND\n   ========================================================= *\/\n\n#pn-rss::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: -70px;\n    bottom: -70px;\n\n    left: -50vw;\n    right: -50vw;\n\n    z-index: -2;\n\n    background:\n\n        radial-gradient(\n            circle at 8% 10%,\n            rgba(154,33,9,.075),\n            transparent 26%\n        ),\n\n        radial-gradient(\n            circle at 92% 85%,\n            rgba(154,33,9,.055),\n            transparent 27%\n        ),\n\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.98),\n            rgba(250,247,245,.98)\n        );\n\n    pointer-events: none;\n\n}\n\n\n\/* =========================================================\n   SUBTLE DOT TEXTURE\n   ========================================================= *\/\n\n#pn-rss::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: -70px;\n    bottom: -70px;\n\n    left: -50vw;\n    right: -50vw;\n\n    z-index: -1;\n\n    opacity: .30;\n\n    background-image:\n\n        radial-gradient(\n            rgba(154,33,9,.10) .7px,\n            transparent .7px\n        );\n\n    background-size: 18px 18px;\n\n    mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            black 15%,\n            black 85%,\n            transparent\n        );\n\n    -webkit-mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            black 15%,\n            black 85%,\n            transparent\n        );\n\n    pointer-events: none;\n\n}\n\n\n\/* =========================================================\n   CONTAINER\n   ========================================================= *\/\n\n#pn-rss .pn-rss-container {\n\n    width: 100%;\n    margin: 0 auto;\n\n}\n\n\n\/* =========================================================\n   SECTION\n   ========================================================= *\/\n\n#pn-rss .pn-rss-section {\n\n    width: 100%;\n\n    margin-bottom: 34px;\n\n}\n\n\n\/* =========================================================\n   SECTION HEADER\n   ========================================================= *\/\n\n#pn-rss .pn-rss-section-header {\n\n    display: flex;\n\n    align-items: flex-end;\n\n    justify-content: space-between;\n\n    gap: 20px;\n\n    margin-bottom: 15px;\n\n}\n\n\n#pn-rss .pn-rss-section-title {\n\n    margin: 0;\n\n    font-size: 21px;\n\n    line-height: 1.15;\n\n    font-weight: 700;\n\n    letter-spacing: -.40px;\n\n    color: var(--pn-text);\n\n}\n\n\n\/* RED BAR *\/\n\n#pn-rss .pn-rss-section-title::before {\n\n    content: \"\";\n\n    display: inline-block;\n\n    width: 5px;\n    height: 20px;\n\n    margin-right: 10px;\n\n    vertical-align: -3px;\n\n    background: var(--pn-red);\n\n    border-radius: 99px;\n\n}\n\n\n#pn-rss .pn-rss-section-subtitle {\n\n    margin-top: 5px;\n\n    margin-left: 15px;\n\n    font-size: 11px;\n\n    line-height: 1.45;\n\n    color: var(--pn-text-soft);\n\n}\n\n\n\/* =========================================================\n   GRID\n   ========================================================= *\/\n\n#pn-rss .pn-rss-grid {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0,1fr));\n\n    gap: 12px;\n\n}\n\n\n\/* =========================================================\n   CARD\n   ========================================================= *\/\n\n#pn-rss .pn-rss-card {\n\n    position: relative;\n\n    min-width: 0;\n\n    overflow: hidden;\n\n    background: var(--pn-glass);\n\n    border: 1px solid var(--pn-border);\n\n    border-radius: 15px;\n\n    box-shadow: var(--pn-shadow);\n\n    backdrop-filter:\n        blur(20px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(20px)\n        saturate(120%);\n\n    transition:\n\n        transform .25s ease,\n        box-shadow .25s ease,\n        background .25s ease;\n\n}\n\n\n#pn-rss .pn-rss-card:hover {\n\n    transform: translateY(-3px);\n\n    background: var(--pn-glass-hover);\n\n    box-shadow: var(--pn-shadow-hover);\n\n}\n\n\n\/* =========================================================\n   CARD HEADER\n   ========================================================= *\/\n\n#pn-rss .pn-rss-card-header {\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    gap: 10px;\n\n    padding: 12px 13px 9px;\n\n    border-bottom:\n        1px solid rgba(0,0,0,.055);\n\n}\n\n\n#pn-rss .pn-rss-card-title {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 7px;\n\n    min-width: 0;\n\n    margin: 0;\n\n    font-size: 12px;\n\n    line-height: 1.3;\n\n    font-weight: 650;\n\n    color: var(--pn-text);\n\n}\n\n\n#pn-rss .pn-rss-card-icon {\n\n    flex-shrink: 0;\n\n    width: 23px;\n    height: 23px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 7px;\n\n    background:\n        var(--pn-red-soft);\n\n    font-size: 12px;\n\n}\n\n\n\/* BADGE *\/\n\n#pn-rss .pn-rss-badge {\n\n    flex-shrink: 0;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    padding: 4px 7px;\n\n    border-radius: 999px;\n\n    background:\n        var(--pn-red-soft);\n\n    color:\n        var(--pn-red);\n\n    font-size: 7px;\n\n    line-height: 1;\n\n    font-weight: 700;\n\n    letter-spacing: .30px;\n\n}\n\n\n\/* =========================================================\n   ITEMS\n   ========================================================= *\/\n\n#pn-rss .pn-rss-items {\n\n    display: flex;\n\n    flex-direction: column;\n\n    padding: 0 13px;\n\n}\n\n\n#pn-rss .pn-rss-item {\n\n    display: block;\n\n    padding: 9px 0;\n\n    border-bottom:\n        1px solid rgba(0,0,0,.055);\n\n    color: inherit;\n\n    text-decoration: none;\n\n    transition:\n        padding-left .20s ease;\n\n}\n\n\n#pn-rss .pn-rss-item:last-child {\n\n    border-bottom: 0;\n\n}\n\n\n#pn-rss .pn-rss-item:hover {\n\n    padding-left: 3px;\n\n}\n\n\n\/* =========================================================\n   ITEM TITLE\n   ========================================================= *\/\n\n#pn-rss .pn-rss-item-title {\n\n    display: -webkit-box;\n\n    overflow: hidden;\n\n    margin: 0 0 4px;\n\n    color: var(--pn-text);\n\n    font-size: 11px;\n\n    line-height: 1.40;\n\n    font-weight: 650;\n\n    letter-spacing: -.05px;\n\n    -webkit-line-clamp: 2;\n\n    -webkit-box-orient: vertical;\n\n}\n\n\n#pn-rss .pn-rss-item:hover\n.pn-rss-item-title {\n\n    color: var(--pn-red);\n\n}\n\n\n\/* =========================================================\n   META\n   ========================================================= *\/\n\n#pn-rss .pn-rss-meta {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 6px;\n\n    color: var(--pn-text-soft);\n\n    font-size: 8px;\n\n    line-height: 1.3;\n\n}\n\n\n#pn-rss .pn-rss-dot {\n\n    width: 3px;\n    height: 3px;\n\n    flex-shrink: 0;\n\n    border-radius: 50%;\n\n    background:\n        var(--pn-red);\n\n}\n\n\n\/* =========================================================\n   MORE\n   ========================================================= *\/\n\n#pn-rss .pn-rss-more {\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 4px;\n\n    margin:\n        0 13px 11px;\n\n    color:\n        var(--pn-red);\n\n    font-size: 9px;\n\n    line-height: 1;\n\n    font-weight: 600;\n\n    text-decoration: none;\n\n}\n\n\n#pn-rss .pn-rss-more:hover {\n\n    text-decoration: underline;\n\n}\n\n\n\/* =========================================================\n   SKELETON\n   ========================================================= *\/\n\n#pn-rss .pn-rss-skeleton {\n\n    padding: 0 13px;\n\n}\n\n\n#pn-rss .pn-rss-skeleton-item {\n\n    padding: 9px 0;\n\n    border-bottom:\n        1px solid rgba(0,0,0,.055);\n\n}\n\n\n#pn-rss .pn-rss-skeleton-item:last-child {\n\n    border-bottom: 0;\n\n}\n\n\n#pn-rss .pn-rss-skeleton-line {\n\n    height: 8px;\n\n    border-radius: 99px;\n\n    margin-bottom: 7px;\n\n    background:\n\n        linear-gradient(\n            90deg,\n            rgba(220,220,220,.38),\n            rgba(255,255,255,.80),\n            rgba(220,220,220,.38)\n        );\n\n    background-size: 220% 100%;\n\n    animation:\n        pn-rss-skeleton 1.35s ease-in-out infinite;\n\n}\n\n\n#pn-rss .pn-rss-skeleton-line.long {\n\n    width: 88%;\n\n}\n\n\n#pn-rss .pn-rss-skeleton-line.medium {\n\n    width: 68%;\n\n}\n\n\n#pn-rss .pn-rss-skeleton-line.short {\n\n    width: 42%;\n\n    height: 5px;\n\n    margin-bottom: 0;\n\n}\n\n\n@keyframes pn-rss-skeleton {\n\n    0% {\n\n        background-position:\n            200% 0;\n\n    }\n\n    100% {\n\n        background-position:\n            -20% 0;\n\n    }\n\n}\n\n\n\/* =========================================================\n   LOADING CARD STATUS\n   ========================================================= *\/\n\n#pn-rss .pn-rss-loading-status {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 6px;\n\n    margin:\n        0 13px 10px;\n\n    color:\n        var(--pn-text-soft);\n\n    font-size: 8px;\n\n}\n\n\n#pn-rss .pn-rss-loading-dot {\n\n    width: 5px;\n    height: 5px;\n\n    border-radius: 50%;\n\n    background:\n        var(--pn-red);\n\n    animation:\n        pn-rss-pulse 1.2s ease-in-out infinite;\n\n}\n\n\n@keyframes pn-rss-pulse {\n\n    0%,\n    100% {\n\n        opacity: .25;\n\n        transform: scale(.8);\n\n    }\n\n    50% {\n\n        opacity: 1;\n\n        transform: scale(1);\n\n    }\n\n}\n\n\n\/* =========================================================\n   ERROR\n   ========================================================= *\/\n\n#pn-rss .pn-rss-error {\n\n    padding: 14px;\n\n    border:\n        1px solid var(--pn-red-border);\n\n    border-radius: 13px;\n\n    background:\n        rgba(154,33,9,.045);\n\n    color:\n        var(--pn-red);\n\n    font-size: 10px;\n\n    line-height: 1.5;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 650px) {\n\n    #pn-rss .pn-rss-section {\n\n        margin-bottom: 27px;\n\n    }\n\n\n    #pn-rss .pn-rss-section-title {\n\n        font-size: 19px;\n\n    }\n\n\n    #pn-rss .pn-rss-section-subtitle {\n\n        font-size: 10px;\n\n    }\n\n\n    #pn-rss .pn-rss-grid {\n\n        grid-template-columns: 1fr;\n\n        gap: 9px;\n\n    }\n\n\n    #pn-rss .pn-rss-card {\n\n        border-radius: 14px;\n\n    }\n\n\n    #pn-rss .pn-rss-card-header {\n\n        padding:\n            11px 12px 8px;\n\n    }\n\n\n    #pn-rss .pn-rss-items,\n    #pn-rss .pn-rss-skeleton {\n\n        padding:\n            0 12px;\n\n    }\n\n\n    #pn-rss .pn-rss-item,\n    #pn-rss .pn-rss-skeleton-item {\n\n        padding:\n            8px 0;\n\n    }\n\n\n    #pn-rss .pn-rss-more {\n\n        margin:\n            0 12px 10px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width: 420px) {\n\n    #pn-rss .pn-rss-section-title {\n\n        font-size: 18px;\n\n    }\n\n\n    #pn-rss .pn-rss-section-title::before {\n\n        width: 4px;\n\n        height: 18px;\n\n        margin-right: 8px;\n\n    }\n\n\n    #pn-rss .pn-rss-section-subtitle {\n\n        margin-left: 12px;\n\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media (\n    prefers-reduced-motion: reduce\n) {\n\n    #pn-rss * {\n\n        animation: none !important;\n\n        transition: none !important;\n\n    }\n\n}\n\n\n\/* =========================================================\n   FALLBACK\n   ========================================================= *\/\n\n@supports not (\n    backdrop-filter: blur(10px)\n) {\n\n    #pn-rss .pn-rss-card {\n\n        background:\n            rgba(255,255,255,.92);\n\n    }\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     RSS\n     ========================================================= -->\n\n<div id=\"pn-rss\">\n\n    <div class=\"pn-rss-container\">\n\n        <div id=\"pn-rss-content\">\n\n            <!-- Skeleton akan dibuat oleh JS -->\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n\n(function () {\n\n    \"use strict\";\n\n\n    \/* =====================================================\n       API\n       ===================================================== *\/\n\n    const API =\n        window.location.origin +\n        \"\/wp-json\/pn\/v1\/rss\";\n\n\n    \/* =====================================================\n       CACHE\n       ===================================================== *\/\n\n    const CACHE_KEY =\n        \"pn_redelong_rss_v2\";\n\n\n    const CACHE_TTL =\n        10 * 60 * 1000;\n\n\n    \/* =====================================================\n       ELEMENT\n       ===================================================== *\/\n\n    const root =\n        document.getElementById(\n            \"pn-rss\"\n        );\n\n\n    const content =\n        document.getElementById(\n            \"pn-rss-content\"\n        );\n\n\n    if (\n        !root ||\n        !content\n    ) {\n\n        return;\n\n    }\n\n\n    \/* =====================================================\n       GROUP\n       ===================================================== *\/\n\n    const groups = [\n\n        {\n\n            title:\n                \"RSS Mahkamah Agung\",\n\n            subtitle:\n                \"Informasi Mahkamah Agung Republik Indonesia\",\n\n            sources: [\n                \"ma-news\",\n                \"ma-announcement\"\n            ]\n\n        },\n\n\n        {\n\n            title:\n                \"RSS Direktorat Jenderal Badan Peradilan Umum\",\n\n            subtitle:\n                \"Informasi Direktorat Jenderal Badan Peradilan Umum\",\n\n            sources: [\n                \"badilum-news\",\n                \"badilum-announcement\"\n            ]\n\n        },\n\n\n        {\n\n            title:\n                \"RSS Pengadilan Tinggi Banda Aceh\",\n\n            subtitle:\n                \"Informasi Pengadilan Tinggi Banda Aceh\",\n\n            sources: [\n                \"pt-news\",\n                \"pt-announcement\"\n            ]\n\n        }\n\n    ];\n\n\n    \/* =====================================================\n       SOURCE CONFIG\n       ===================================================== *\/\n\n    const sourceConfig = {\n\n        \"ma-news\": {\n\n            title:\n                \"Berita Mahkamah Agung\",\n\n            icon:\n                \"\ud83d\udcf0\",\n\n            badge:\n                \"BERITA\"\n\n        },\n\n\n        \"ma-announcement\": {\n\n            title:\n                \"Pengumuman Mahkamah Agung\",\n\n            icon:\n                \"\ud83d\udce2\",\n\n            badge:\n                \"PENGUMUMAN\"\n\n        },\n\n\n        \"badilum-news\": {\n\n            title:\n                \"Berita \/ Kegiatan Badilum\",\n\n            icon:\n                \"\ud83d\udcf0\",\n\n            badge:\n                \"KEGIATAN\"\n\n        },\n\n\n        \"badilum-announcement\": {\n\n            title:\n                \"Pengumuman Badilum\",\n\n            icon:\n                \"\ud83d\udce2\",\n\n            badge:\n                \"PENGUMUMAN\"\n\n        },\n\n\n        \"pt-news\": {\n\n            title:\n                \"Berita PT Banda Aceh\",\n\n            icon:\n                \"\ud83d\udcf0\",\n\n            badge:\n                \"BERITA\"\n\n        },\n\n\n        \"pt-announcement\": {\n\n            title:\n                \"Pengumuman PT Banda Aceh\",\n\n            icon:\n                \"\ud83d\udce2\",\n\n            badge:\n                \"PENGUMUMAN\"\n\n        }\n\n    };\n\n\n    \/* =====================================================\n       ESCAPE\n       ===================================================== *\/\n\n    function escapeHTML(\n        value\n    ) {\n\n        const div =\n            document.createElement(\n                \"div\"\n            );\n\n\n        div.textContent =\n            value || \"\";\n\n\n        return div.innerHTML;\n\n    }\n\n\n    \/* =====================================================\n       SKELETON CARD\n       ===================================================== *\/\n\n    function skeletonCard(\n        sourceKey\n    ) {\n\n        const config =\n            sourceConfig[\n                sourceKey\n            ];\n\n\n        return `\n\n            <article\n                class=\"pn-rss-card\"\n            >\n\n                <div\n                    class=\"pn-rss-card-header\"\n                >\n\n                    <h3\n                        class=\"pn-rss-card-title\"\n                    >\n\n                        <span\n                            class=\"pn-rss-card-icon\"\n                        >\n                            ${config.icon}\n                        <\/span>\n\n                        ${config.title}\n\n                    <\/h3>\n\n\n                    <span\n                        class=\"pn-rss-badge\"\n                    >\n                        ${config.badge}\n                    <\/span>\n\n                <\/div>\n\n\n                <div\n                    class=\"pn-rss-skeleton\"\n                >\n\n                    <div\n                        class=\"pn-rss-skeleton-item\"\n                    >\n\n                        <div\n                            class=\"pn-rss-skeleton-line long\"\n                        ><\/div>\n\n                        <div\n                            class=\"pn-rss-skeleton-line medium\"\n                        ><\/div>\n\n                        <div\n                            class=\"pn-rss-skeleton-line short\"\n                        ><\/div>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"pn-rss-skeleton-item\"\n                    >\n\n                        <div\n                            class=\"pn-rss-skeleton-line medium\"\n                        ><\/div>\n\n                        <div\n                            class=\"pn-rss-skeleton-line long\"\n                        ><\/div>\n\n                        <div\n                            class=\"pn-rss-skeleton-line short\"\n                        ><\/div>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"pn-rss-skeleton-item\"\n                    >\n\n                        <div\n                            class=\"pn-rss-skeleton-line long\"\n                        ><\/div>\n\n                        <div\n                            class=\"pn-rss-skeleton-line medium\"\n                        ><\/div>\n\n                        <div\n                            class=\"pn-rss-skeleton-line short\"\n                        ><\/div>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"pn-rss-skeleton-item\"\n                    >\n\n                        <div\n                            class=\"pn-rss-skeleton-line medium\"\n                        ><\/div>\n\n                        <div\n                            class=\"pn-rss-skeleton-line long\"\n                        ><\/div>\n\n                        <div\n                            class=\"pn-rss-skeleton-line short\"\n                        ><\/div>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div\n                    class=\"pn-rss-loading-status\"\n                >\n\n                    <span\n                        class=\"pn-rss-loading-dot\"\n                    ><\/span>\n\n                    Mengambil informasi terbaru...\n\n                <\/div>\n\n            <\/article>\n\n        `;\n\n    }\n\n\n    \/* =====================================================\n       SKELETON GROUP\n       ===================================================== *\/\n\n    function renderSkeleton() {\n\n        let html = \"\";\n\n\n        groups.forEach(\n            function (\n                group\n            ) {\n\n                html += `\n\n                    <section\n                        class=\"pn-rss-section\"\n                    >\n\n                        <div\n                            class=\"pn-rss-section-header\"\n                        >\n\n                            <div>\n\n                                <h2\n                                    class=\"pn-rss-section-title\"\n                                >\n                                    ${group.title}\n                                <\/h2>\n\n\n                                <div\n                                    class=\"pn-rss-section-subtitle\"\n                                >\n                                    ${group.subtitle}\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div\n                            class=\"pn-rss-grid\"\n                        >\n\n                            ${skeletonCard(\n                                group.sources[0]\n                            )}\n\n                            ${skeletonCard(\n                                group.sources[1]\n                            )}\n\n                        <\/div>\n\n                    <\/section>\n\n                `;\n\n            }\n        );\n\n\n        content.innerHTML =\n            html;\n\n    }\n\n\n    \/* =====================================================\n       CACHE GET\n       ===================================================== *\/\n\n    function getCache() {\n\n        try {\n\n            const raw =\n                sessionStorage.getItem(\n                    CACHE_KEY\n                );\n\n\n            if (!raw) {\n\n                return null;\n\n            }\n\n\n            const cache =\n                JSON.parse(\n                    raw\n                );\n\n\n            if (\n                !cache ||\n                !cache.time ||\n                !cache.data\n            ) {\n\n                return null;\n\n            }\n\n\n            if (\n                Date.now() -\n                cache.time >\n                CACHE_TTL\n            ) {\n\n                sessionStorage.removeItem(\n                    CACHE_KEY\n                );\n\n                return null;\n\n            }\n\n\n            return cache.data;\n\n        }\n\n        catch (\n            error\n        ) {\n\n            return null;\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       CACHE SET\n       ===================================================== *\/\n\n    function setCache(\n        data\n    ) {\n\n        try {\n\n            sessionStorage.setItem(\n\n                CACHE_KEY,\n\n                JSON.stringify({\n\n                    time:\n                        Date.now(),\n\n                    data:\n                        data\n\n                })\n\n            );\n\n        }\n\n        catch (\n            error\n        ) {}\n\n    }\n\n\n    \/* =====================================================\n       RENDER CARD\n       ===================================================== *\/\n\n    function renderCard(\n        sourceKey,\n        source\n    ) {\n\n        const config =\n            sourceConfig[\n                sourceKey\n            ];\n\n\n        const items =\n            source &&\n            Array.isArray(\n                source.items\n            )\n                ? source.items.slice(\n                    0,\n                    4\n                )\n                : [];\n\n\n        let html = `\n\n            <article\n                class=\"pn-rss-card\"\n            >\n\n                <div\n                    class=\"pn-rss-card-header\"\n                >\n\n                    <h3\n                        class=\"pn-rss-card-title\"\n                    >\n\n                        <span\n                            class=\"pn-rss-card-icon\"\n                        >\n                            ${config.icon}\n                        <\/span>\n\n                        ${escapeHTML(\n                            config.title\n                        )}\n\n                    <\/h3>\n\n\n                    <span\n                        class=\"pn-rss-badge\"\n                    >\n                        ${config.badge}\n                    <\/span>\n\n                <\/div>\n\n\n                <div\n                    class=\"pn-rss-items\"\n                >\n\n        `;\n\n\n        if (\n            !items.length\n        ) {\n\n            html += `\n\n                <div\n                    class=\"pn-rss-empty\"\n                >\n                    Belum ada informasi.\n                <\/div>\n\n            `;\n\n        }\n\n\n        else {\n\n            items.forEach(\n                function (\n                    item\n                ) {\n\n                    html += `\n\n                        <a\n                            class=\"pn-rss-item\"\n                            href=\"${escapeHTML(\n                                item.link ||\n                                \"#\"\n                            )}\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                        >\n\n                            <div\n                                class=\"pn-rss-item-title\"\n                            >\n                                ${escapeHTML(\n                                    item.title ||\n                                    \"Informasi\"\n                                )}\n                            <\/div>\n\n\n                            <div\n                                class=\"pn-rss-meta\"\n                            >\n\n                                <span>\n                                    ${escapeHTML(\n                                        item.date_display ||\n                                        \"\"\n                                    )}\n                                <\/span>\n\n\n                                <span\n                                    class=\"pn-rss-dot\"\n                                ><\/span>\n\n\n                                <span>\n                                    Baca selengkapnya\n                                <\/span>\n\n                            <\/div>\n\n                        <\/a>\n\n                    `;\n\n                }\n            );\n\n        }\n\n\n        html += `\n\n                <\/div>\n\n\n                <a\n                    class=\"pn-rss-more\"\n                    href=\"${escapeHTML(\n                        source &&\n                        source.more\n                            ? source.more\n                            : \"#\"\n                    )}\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n\n                    Lihat semua\n                    <span>\u2192<\/span>\n\n                <\/a>\n\n\n            <\/article>\n\n        `;\n\n\n        return html;\n\n    }\n\n\n    \/* =====================================================\n       RENDER GROUP\n       ===================================================== *\/\n\n    function renderGroup(\n        group,\n        data\n    ) {\n\n        let html = `\n\n            <section\n                class=\"pn-rss-section\"\n            >\n\n                <div\n                    class=\"pn-rss-section-header\"\n                >\n\n                    <div>\n\n                        <h2\n                            class=\"pn-rss-section-title\"\n                        >\n                            ${escapeHTML(\n                                group.title\n                            )}\n                        <\/h2>\n\n\n                        <div\n                            class=\"pn-rss-section-subtitle\"\n                        >\n                            ${escapeHTML(\n                                group.subtitle\n                            )}\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div\n                    class=\"pn-rss-grid\"\n                >\n\n        `;\n\n\n        group.sources.forEach(\n            function (\n                sourceKey\n            ) {\n\n                html +=\n                    renderCard(\n\n                        sourceKey,\n\n                        data.sources[\n                            sourceKey\n                        ]\n\n                    );\n\n            }\n        );\n\n\n        html += `\n\n                <\/div>\n\n            <\/section>\n\n        `;\n\n\n        return html;\n\n    }\n\n\n    \/* =====================================================\n       RENDER ALL\n       ===================================================== *\/\n\n    function render(\n        data\n    ) {\n\n        if (\n            !data ||\n            !data.sources\n        ) {\n\n            content.innerHTML = `\n\n                <div\n                    class=\"pn-rss-error\"\n                >\n\n                    RSS belum dapat dimuat.\n                    Silakan coba kembali beberapa saat lagi.\n\n                <\/div>\n\n            `;\n\n            return;\n\n        }\n\n\n        let html = \"\";\n\n\n        groups.forEach(\n            function (\n                group\n            ) {\n\n                html +=\n                    renderGroup(\n                        group,\n                        data\n                    );\n\n            }\n        );\n\n\n        content.innerHTML =\n            html;\n\n    }\n\n\n    \/* =====================================================\n       LOAD RSS\n       ===================================================== *\/\n\n    async function loadRSS() {\n\n        \/*\n         * Tampilkan skeleton\n         * terlebih dahulu.\n         *\/\n\n        renderSkeleton();\n\n\n        \/*\n         * Kalau ada cache,\n         * tampilkan segera.\n         *\/\n\n        const cached =\n            getCache();\n\n\n        if (cached) {\n\n            render(\n                cached\n            );\n\n        }\n\n\n        try {\n\n            const response =\n                await fetch(\n\n                    API +\n                    \"?_=\" +\n                    Date.now(),\n\n                    {\n\n                        method:\n                            \"GET\",\n\n                        cache:\n                            \"no-store\",\n\n                        credentials:\n                            \"same-origin\",\n\n                        headers: {\n\n                            \"Accept\":\n                                \"application\/json\"\n\n                        }\n\n                    }\n\n                );\n\n\n            if (\n                !response.ok\n            ) {\n\n                throw new Error(\n                    \"HTTP \" +\n                    response.status\n                );\n\n            }\n\n\n            const data =\n                await response.json();\n\n\n            if (\n                !data ||\n                !data.success\n            ) {\n\n                throw new Error(\n                    \"RSS API tidak mengembalikan data valid.\"\n                );\n\n            }\n\n\n            setCache(\n                data\n            );\n\n\n            render(\n                data\n            );\n\n        }\n\n\n        catch (\n            error\n        ) {\n\n            console.error(\n                \"PN RSS Error:\",\n                error\n            );\n\n\n            \/*\n             * Kalau cache sudah tampil,\n             * jangan diganti error.\n             *\/\n\n            if (!cached) {\n\n                content.innerHTML = `\n\n                    <div\n                        class=\"pn-rss-error\"\n                    >\n\n                        RSS sedang tidak dapat\n                        mengambil data terbaru.\n                        Silakan muat ulang halaman.\n\n                    <\/div>\n\n                `;\n\n            }\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       INITIAL LOAD\n       ===================================================== *\/\n\n    if (\n        document.readyState ===\n        \"loading\"\n    ) {\n\n        document.addEventListener(\n\n            \"DOMContentLoaded\",\n\n            loadRSS,\n\n            {\n                once: true\n            }\n\n        );\n\n    }\n\n    else {\n\n        loadRSS();\n\n    }\n\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a62014d elementor-widget elementor-widget-html\" data-id=\"a62014d\" 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<style>\n\/* =========================================================\n   PN SIMPANG TIGA REDELONG\n   JADWAL SIDANG\n   iOS GLASS STYLE\n   SCROLLABLE SCHEDULE\n   ========================================================= *\/\n\n.pn-schedule {\n\n    --pn-red: #9A2109;\n    --pn-red-dark: #7C1A08;\n    --pn-red-soft: rgba(154,33,9,.075);\n    --pn-red-border: rgba(154,33,9,.16);\n\n    --pn-green: #16834B;\n    --pn-green-soft: rgba(22,131,75,.075);\n    --pn-green-border: rgba(22,131,75,.16);\n\n    --pn-text: #1d1d1f;\n    --pn-text-soft: #6e6e73;\n    --pn-text-light: #86868b;\n\n    --pn-glass: rgba(255,255,255,.64);\n    --pn-glass-hover: rgba(255,255,255,.80);\n\n    --pn-shadow:\n        0 8px 30px rgba(0,0,0,.055),\n        inset 0 1px 0 rgba(255,255,255,.82);\n\n    --pn-shadow-hover:\n        0 14px 38px rgba(0,0,0,.085),\n        inset 0 1px 0 rgba(255,255,255,.92);\n\n    width:100%;\n    position:relative;\n    color:var(--pn-text);\n\n    font-family:\n        -apple-system,\n        BlinkMacSystemFont,\n        \"SF Pro Display\",\n        \"SF Pro Text\",\n        \"Segoe UI\",\n        Roboto,\n        Helvetica,\n        Arial,\n        sans-serif;\n\n    -webkit-font-smoothing:antialiased;\n    -moz-osx-font-smoothing:grayscale;\n}\n\n\n\/* =========================================================\n   BACKGROUND\n   ========================================================= *\/\n\n.pn-schedule::before {\n\n    content:\"\";\n\n    position:absolute;\n\n    top:-70px;\n    bottom:-70px;\n\n    left:-50vw;\n    right:-50vw;\n\n    z-index:-2;\n\n    background:\n        radial-gradient(\n            circle at 8% 10%,\n            rgba(154,33,9,.065),\n            transparent 25%\n        ),\n\n        radial-gradient(\n            circle at 92% 85%,\n            rgba(22,131,75,.035),\n            transparent 24%\n        ),\n\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.98),\n            rgba(250,247,245,.98)\n        );\n\n    pointer-events:none;\n}\n\n\n.pn-schedule::after {\n\n    content:\"\";\n\n    position:absolute;\n\n    top:-70px;\n    bottom:-70px;\n\n    left:-50vw;\n    right:-50vw;\n\n    z-index:-1;\n\n    opacity:.25;\n\n    background-image:\n        radial-gradient(\n            rgba(154,33,9,.08) .7px,\n            transparent .7px\n        );\n\n    background-size:18px 18px;\n\n    mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            black 15%,\n            black 85%,\n            transparent\n        );\n\n    -webkit-mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            black 15%,\n            black 85%,\n            transparent\n        );\n\n    pointer-events:none;\n}\n\n\n\/* =========================================================\n   CONTAINER\n   ========================================================= *\/\n\n.pn-schedule-container {\n\n    width:100%;\n    margin:0 auto;\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.pn-schedule-header {\n\n    display:flex;\n    align-items:flex-end;\n    justify-content:space-between;\n\n    gap:20px;\n\n    margin-bottom:18px;\n}\n\n\n.pn-schedule-title-wrap {\n    min-width:0;\n}\n\n\n.pn-schedule-title {\n\n    margin:0;\n\n    font-size:25px;\n    line-height:1.15;\n\n    font-weight:700;\n    letter-spacing:-.5px;\n\n    color:var(--pn-text);\n}\n\n\n.pn-schedule-title::before {\n\n    content:\"\";\n\n    display:inline-block;\n\n    width:5px;\n    height:21px;\n\n    margin-right:10px;\n\n    vertical-align:-2px;\n\n    background:var(--pn-red);\n\n    border-radius:99px;\n}\n\n\n.pn-schedule-subtitle {\n\n    margin-top:6px;\n    margin-left:15px;\n\n    color:var(--pn-text-soft);\n\n    font-size:13px;\n    line-height:1.5;\n\n    letter-spacing:-.05px;\n}\n\n\n\/* =========================================================\n   SEARCH\n   ========================================================= *\/\n\n.pn-schedule-search {\n\n    display:flex;\n    align-items:center;\n\n    gap:8px;\n\n    margin-bottom:13px;\n    padding:10px;\n\n    background:rgba(255,255,255,.57);\n\n    border:1px solid rgba(255,255,255,.82);\n\n    border-radius:16px;\n\n    box-shadow:var(--pn-shadow);\n\n    backdrop-filter:blur(20px) saturate(120%);\n    -webkit-backdrop-filter:blur(20px) saturate(120%);\n}\n\n\n.pn-schedule-date {\n\n    flex:1;\n    min-width:170px;\n\n    padding:10px 12px;\n\n    border:1px solid rgba(154,33,9,.13);\n\n    border-radius:10px;\n\n    background:rgba(255,255,255,.78);\n\n    color:var(--pn-text);\n\n    font-family:inherit;\n\n    font-size:12px;\n    font-weight:600;\n\n    outline:none;\n\n    transition:\n        border-color .2s ease,\n        box-shadow .2s ease,\n        background .2s ease;\n}\n\n\n.pn-schedule-date:focus {\n\n    border-color:rgba(154,33,9,.38);\n\n    background:rgba(255,255,255,.94);\n\n    box-shadow:\n        0 0 0 3px rgba(154,33,9,.065);\n}\n\n\n.pn-schedule-search-button,\n.pn-schedule-today {\n\n    display:inline-flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:6px;\n\n    padding:10px 14px;\n\n    border-radius:10px;\n\n    font-family:inherit;\n\n    font-size:11px;\n    font-weight:650;\n\n    cursor:pointer;\n\n    transition:\n        background .2s ease,\n        color .2s ease,\n        border-color .2s ease,\n        transform .2s ease;\n}\n\n\n.pn-schedule-search-button {\n\n    border:0;\n\n    background:var(--pn-red);\n\n    color:#fff;\n\n    box-shadow:\n        0 5px 14px rgba(154,33,9,.15);\n}\n\n\n.pn-schedule-search-button:hover {\n\n    background:var(--pn-red-dark);\n\n    transform:translateY(-1px);\n\n    box-shadow:\n        0 8px 18px rgba(154,33,9,.19);\n}\n\n\n.pn-schedule-today {\n\n    border:1px solid rgba(154,33,9,.15);\n\n    background:rgba(255,255,255,.60);\n\n    color:var(--pn-red);\n}\n\n\n.pn-schedule-today:hover {\n\n    background:var(--pn-red);\n\n    border-color:var(--pn-red);\n\n    color:#fff;\n}\n\n\n\/* =========================================================\n   DATE SUMMARY\n   ========================================================= *\/\n\n.pn-schedule-summary {\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    gap:15px;\n\n    margin:4px 2px 12px;\n}\n\n\n.pn-schedule-selected {\n\n    display:flex;\n\n    align-items:center;\n\n    gap:9px;\n}\n\n\n.pn-schedule-calendar-icon {\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    width:34px;\n    height:34px;\n\n    border-radius:10px;\n\n    background:rgba(154,33,9,.075);\n\n    border:1px solid rgba(154,33,9,.10);\n\n    color:var(--pn-red);\n\n    font-size:15px;\n}\n\n\n.pn-schedule-selected-date {\n\n    color:var(--pn-text-soft);\n\n    font-size:10px;\n    line-height:1.4;\n}\n\n\n.pn-schedule-selected-date strong {\n\n    display:block;\n\n    margin-top:1px;\n\n    color:var(--pn-text);\n\n    font-size:13px;\n    font-weight:650;\n}\n\n\n.pn-schedule-total {\n\n    color:var(--pn-text-soft);\n\n    font-size:10px;\n}\n\n\n.pn-schedule-total strong {\n\n    color:var(--pn-text);\n\n    font-weight:700;\n}\n\n\n\/* =========================================================\n   FILTER\n   ========================================================= *\/\n\n.pn-schedule-filter {\n\n    display:flex;\n\n    align-items:center;\n\n    gap:5px;\n\n    margin-bottom:12px;\n\n    padding:4px;\n\n    width:fit-content;\n    max-width:100%;\n\n    background:rgba(255,255,255,.55);\n\n    border:1px solid rgba(255,255,255,.80);\n\n    border-radius:999px;\n\n    box-shadow:\n        0 5px 18px rgba(0,0,0,.035);\n\n    backdrop-filter:blur(16px);\n    -webkit-backdrop-filter:blur(16px);\n}\n\n\n.pn-schedule-filter-btn {\n\n    display:inline-flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:5px;\n\n    padding:7px 12px;\n\n    border:0;\n\n    border-radius:999px;\n\n    background:transparent;\n\n    color:var(--pn-text-soft);\n\n    font-family:inherit;\n\n    font-size:10px;\n    font-weight:650;\n\n    cursor:pointer;\n\n    transition:\n        background .2s ease,\n        color .2s ease,\n        box-shadow .2s ease;\n}\n\n\n.pn-schedule-filter-btn:hover {\n    color:var(--pn-text);\n}\n\n\n.pn-schedule-filter-btn.active {\n\n    background:var(--pn-red);\n\n    color:#fff;\n\n    box-shadow:\n        0 4px 10px rgba(154,33,9,.16);\n}\n\n\n.pn-schedule-filter-btn.pidana.active {\n    background:var(--pn-red);\n}\n\n\n.pn-schedule-filter-btn.perdata.active {\n    background:var(--pn-green);\n}\n\n\n.pn-filter-dot {\n\n    width:5px;\n    height:5px;\n\n    border-radius:50%;\n}\n\n\n.pn-filter-dot.red {\n    background:var(--pn-red);\n}\n\n\n.pn-filter-dot.green {\n    background:var(--pn-green);\n}\n\n\n.pn-schedule-filter-btn.active .pn-filter-dot {\n    background:rgba(255,255,255,.95);\n}\n\n\n\/* =========================================================\n   LIST JADWAL\n   ========================================================= *\/\n\n.pn-schedule-list {\n\n    display:flex;\n\n    flex-direction:column;\n\n    gap:9px;\n\n    \/*\n     * RESPONSIVE HEIGHT:\n     * Jika jadwal sedikit \/ kosong, box mengikuti isi.\n     * Jika jadwal banyak, box dibatasi maksimal 430px\n     * dan isi di dalamnya dapat di-scroll.\n     *\/\n    height:auto;\n\n    min-height:0;\n\n    max-height:430px;\n\n    overflow-y:auto;\n\n    overflow-x:hidden;\n\n    padding-right:6px;\n\n    box-sizing:border-box;\n\n    scroll-behavior:smooth;\n\n    -webkit-overflow-scrolling:touch;\n\n    \/*\n     * Firefox scrollbar\n     *\/\n    scrollbar-width:thin;\n\n    scrollbar-color:\n        rgba(154,33,9,.28)\n        rgba(0,0,0,.035);\n}\n\n\n\/* =========================================================\n   SCROLLBAR\n   ========================================================= *\/\n\n.pn-schedule-list::-webkit-scrollbar {\n    width:6px;\n}\n\n\n.pn-schedule-list::-webkit-scrollbar-track {\n\n    background:rgba(0,0,0,.035);\n\n    border-radius:99px;\n}\n\n\n.pn-schedule-list::-webkit-scrollbar-thumb {\n\n    background:rgba(154,33,9,.28);\n\n    border-radius:99px;\n\n    transition:background .2s ease;\n}\n\n\n.pn-schedule-list::-webkit-scrollbar-thumb:hover {\n\n    background:rgba(154,33,9,.50);\n}\n\n\n\/* =========================================================\n   SCHEDULE CARD\n   ========================================================= *\/\n\n.pn-schedule-card {\n\n    position:relative;\n\n    display:grid;\n\n    grid-template-columns:1fr auto;\n\n    align-items:center;\n\n    gap:15px;\n\n    padding:13px 14px 13px 17px;\n\n    background:var(--pn-glass);\n\n    border:1px solid var(--pn-border);\n\n    border-radius:15px;\n\n    box-shadow:var(--pn-shadow);\n\n    backdrop-filter:blur(20px) saturate(120%);\n    -webkit-backdrop-filter:blur(20px) saturate(120%);\n\n    overflow:hidden;\n\n    flex:0 0 auto;\n\n    transition:\n        transform .23s ease,\n        background .23s ease,\n        box-shadow .23s ease;\n}\n\n\n.pn-schedule-card:hover {\n\n    transform:translateY(-2px);\n\n    background:var(--pn-glass-hover);\n\n    box-shadow:var(--pn-shadow-hover);\n}\n\n\n\/* =========================================================\n   ACCENT\n   ========================================================= *\/\n\n.pn-schedule-card::before {\n\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n\n    top:11px;\n    bottom:11px;\n\n    width:3px;\n\n    border-radius:0 5px 5px 0;\n\n    background:var(--pn-red);\n}\n\n\n.pn-schedule-card.perdata::before {\n    background:var(--pn-green);\n}\n\n\n\/* =========================================================\n   MAIN\n   ========================================================= *\/\n\n.pn-schedule-main {\n    min-width:0;\n}\n\n\n\/* =========================================================\n   TYPE\n   ========================================================= *\/\n\n.pn-schedule-type {\n\n    display:inline-flex;\n\n    align-items:center;\n\n    gap:5px;\n\n    margin-bottom:5px;\n\n    padding:4px 7px;\n\n    border-radius:999px;\n\n    font-size:8px;\n\n    line-height:1;\n\n    font-weight:700;\n\n    letter-spacing:.3px;\n}\n\n\n.pn-schedule-type::before {\n\n    content:\"\";\n\n    width:5px;\n    height:5px;\n\n    border-radius:50%;\n}\n\n\n.pn-schedule-type.pidana {\n\n    color:var(--pn-red);\n\n    background:var(--pn-red-soft);\n\n    border:1px solid var(--pn-red-border);\n}\n\n\n.pn-schedule-type.pidana::before {\n    background:var(--pn-red);\n}\n\n\n.pn-schedule-type.perdata {\n\n    color:var(--pn-green);\n\n    background:var(--pn-green-soft);\n\n    border:1px solid var(--pn-green-border);\n}\n\n\n.pn-schedule-type.perdata::before {\n    background:var(--pn-green);\n}\n\n\n\/* =========================================================\n   CASE NUMBER\n   ========================================================= *\/\n\n.pn-schedule-number {\n\n    margin:0;\n\n    color:var(--pn-text);\n\n    font-size:13px;\n\n    line-height:1.4;\n\n    font-weight:650;\n\n    letter-spacing:-.12px;\n\n    word-break:break-word;\n}\n\n\n.pn-schedule-number a {\n\n    color:inherit !important;\n\n    text-decoration:none !important;\n}\n\n\n.pn-schedule-number a:hover {\n\n    color:var(--pn-red) !important;\n}\n\n\n\/* =========================================================\n   META\n   ========================================================= *\/\n\n.pn-schedule-meta {\n\n    display:flex;\n\n    align-items:center;\n\n    flex-wrap:wrap;\n\n    gap:6px;\n\n    margin-top:8px;\n}\n\n\n.pn-schedule-meta-item {\n\n    display:inline-flex;\n\n    align-items:center;\n\n    gap:5px;\n\n    max-width:100%;\n\n    padding:5px 7px;\n\n    border-radius:7px;\n\n    background:rgba(0,0,0,.025);\n\n    color:var(--pn-text-soft);\n\n    font-size:9px;\n\n    line-height:1.3;\n}\n\n\n.pn-schedule-meta-icon {\n\n    flex:0 0 auto;\n\n    color:var(--pn-text-light);\n\n    font-size:9px;\n}\n\n\n.pn-schedule-meta-text {\n\n    overflow:hidden;\n\n    text-overflow:ellipsis;\n\n    white-space:nowrap;\n}\n\n\n\/* =========================================================\n   DETAIL\n   ========================================================= *\/\n\n.pn-schedule-detail {\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:flex-end;\n}\n\n\n.pn-schedule-detail a {\n\n    display:inline-flex;\n\n    align-items:center;\n\n    gap:5px;\n\n    padding:7px 9px;\n\n    border:1px solid rgba(154,33,9,.13);\n\n    border-radius:8px;\n\n    background:rgba(255,255,255,.45);\n\n    color:var(--pn-red) !important;\n\n    text-decoration:none !important;\n\n    font-size:9px;\n\n    font-weight:650;\n\n    white-space:nowrap;\n\n    transition:\n        background .2s ease,\n        color .2s ease,\n        transform .2s ease;\n}\n\n\n.pn-schedule-card.perdata .pn-schedule-detail a {\n\n    color:var(--pn-green) !important;\n\n    border-color:rgba(22,131,75,.13);\n}\n\n\n.pn-schedule-detail a:hover {\n\n    background:var(--pn-red);\n\n    color:#fff !important;\n\n    transform:translateX(2px);\n}\n\n\n.pn-schedule-card.perdata\n.pn-schedule-detail a:hover {\n\n    background:var(--pn-green);\n}\n\n\n\/* =========================================================\n   SIPP LINK\n   ========================================================= *\/\n\n.pn-schedule-more {\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    margin-top:12px;\n}\n\n\n.pn-schedule-more a {\n\n    display:inline-flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:7px;\n\n    padding:9px 14px;\n\n    border:1px solid rgba(154,33,9,.16);\n\n    border-radius:999px;\n\n    background:rgba(255,255,255,.58);\n\n    color:var(--pn-red) !important;\n\n    text-decoration:none !important;\n\n    font-size:10px;\n\n    font-weight:650;\n\n    box-shadow:\n        0 5px 18px rgba(0,0,0,.035);\n\n    backdrop-filter:blur(12px);\n\n    -webkit-backdrop-filter:blur(12px);\n\n    transition:\n        background .2s ease,\n        color .2s ease,\n        transform .2s ease;\n}\n\n\n.pn-schedule-more a:hover {\n\n    background:var(--pn-red);\n\n    color:#fff !important;\n\n    transform:translateY(-1px);\n}\n\n\n\/* =========================================================\n   EMPTY\n   ========================================================= *\/\n\n.pn-schedule-empty {\n\n    display:flex;\n\n    flex-direction:column;\n\n    align-items:center;\n    justify-content:center;\n\n    min-height:120px;\n\n    height:auto;\n\n    padding:25px 15px;\n\n    box-sizing:border-box;\n\n    text-align:center;\n\n    background:rgba(255,255,255,.42);\n\n    border:1px dashed rgba(0,0,0,.08);\n\n    border-radius:14px;\n\n    flex:0 0 auto;\n}\n\n\n.pn-schedule-empty-icon {\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    width:38px;\n    height:38px;\n\n    margin-bottom:8px;\n\n    border-radius:11px;\n\n    background:rgba(0,0,0,.035);\n\n    color:var(--pn-text-light);\n\n    font-size:16px;\n}\n\n\n.pn-schedule-empty-title {\n\n    color:var(--pn-text);\n\n    font-size:11px;\n\n    font-weight:650;\n}\n\n\n.pn-schedule-empty-text {\n\n    margin-top:4px;\n\n    color:var(--pn-text-soft);\n\n    font-size:9px;\n}\n\n\n\/* =========================================================\n   LOADING\n   ========================================================= *\/\n\n.pn-schedule-loading {\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    min-height:120px;\n\n    color:var(--pn-text-soft);\n\n    font-size:10px;\n\n    flex:0 0 auto;\n}\n\n\n.pn-schedule-spinner {\n\n    width:14px;\n    height:14px;\n\n    margin-left:8px;\n\n    border:2px solid rgba(154,33,9,.13);\n\n    border-top-color:var(--pn-red);\n\n    border-radius:50%;\n\n    animation:\n        pnScheduleSpin .7s linear infinite;\n}\n\n\n@keyframes pnScheduleSpin {\n\n    to {\n        transform:rotate(360deg);\n    }\n\n}\n\n\n\/* =========================================================\n   ERROR\n   ========================================================= *\/\n\n.pn-schedule-error {\n\n    padding:18px;\n\n    text-align:center;\n\n    color:var(--pn-red);\n\n    background:rgba(154,33,9,.05);\n\n    border:1px solid rgba(154,33,9,.12);\n\n    border-radius:13px;\n\n    font-size:10px;\n\n    flex:0 0 auto;\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width:650px) {\n\n    .pn-schedule-title {\n        font-size:21px;\n    }\n\n\n    .pn-schedule-subtitle {\n        font-size:12px;\n    }\n\n\n    .pn-schedule-search {\n        flex-wrap:wrap;\n    }\n\n\n    .pn-schedule-date {\n\n        flex:1 1 100%;\n\n        width:100%;\n    }\n\n\n    .pn-schedule-search-button,\n    .pn-schedule-today {\n\n        flex:1;\n    }\n\n\n    .pn-schedule-summary {\n\n        align-items:flex-start;\n\n        flex-direction:column;\n\n        gap:8px;\n    }\n\n\n    .pn-schedule-filter {\n        width:100%;\n    }\n\n\n    .pn-schedule-filter-btn {\n        flex:1;\n    }\n\n\n    \/*\n     * Mobile:\n     * mengikuti isi jika jadwal sedikit\/kosong,\n     * maksimal 390px jika jadwal banyak.\n     *\/\n    .pn-schedule-list {\n\n        height:auto;\n\n        min-height:0;\n\n        max-height:390px;\n\n        overflow-y:auto;\n\n        overflow-x:hidden;\n\n        padding-right:5px;\n\n        box-sizing:border-box;\n    }\n\n\n    .pn-schedule-card {\n\n        grid-template-columns:1fr;\n\n        gap:8px;\n\n        padding:12px 12px 12px 15px;\n    }\n\n\n    .pn-schedule-detail {\n\n        justify-content:flex-start;\n    }\n\n\n    .pn-schedule-detail a {\n\n        padding:7px 10px;\n    }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width:400px) {\n\n    .pn-schedule-filter-btn {\n\n        padding:7px 7px;\n\n        font-size:9px;\n    }\n\n\n    .pn-schedule-number {\n        font-size:12px;\n    }\n\n\n    .pn-schedule-meta-item {\n        font-size:8px;\n    }\n\n\n    .pn-schedule-list {\n\n        height:auto;\n\n        min-height:0;\n\n        max-height:360px;\n\n        box-sizing:border-box;\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCE MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n    .pn-schedule-card,\n    .pn-schedule-detail a,\n    .pn-schedule-search-button,\n    .pn-schedule-spinner {\n\n        transition:none !important;\n\n        animation:none !important;\n    }\n\n}\n\n\n\/* =========================================================\n   BACKDROP FALLBACK\n   ========================================================= *\/\n\n@supports not (backdrop-filter:blur(10px)) {\n\n    .pn-schedule-search,\n    .pn-schedule-filter,\n    .pn-schedule-card {\n\n        background:rgba(255,255,255,.94);\n    }\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     JADWAL SIDANG\n     ========================================================= -->\n\n<div class=\"pn-schedule\">\n\n    <div class=\"pn-schedule-container\">\n\n\n        <!-- HEADER -->\n\n        <div class=\"pn-schedule-header\">\n\n            <div class=\"pn-schedule-title-wrap\">\n\n                <h3 class=\"pn-schedule-title\">\n                    Jadwal Sidang\n                <\/h3>\n\n                <div class=\"pn-schedule-subtitle\">\n                    Jadwal persidangan Pengadilan Negeri\n                    Simpang Tiga Redelong\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- SEARCH TANGGAL -->\n\n        <div class=\"pn-schedule-search\">\n\n            <input\n                type=\"date\"\n                id=\"pn-schedule-date\"\n                class=\"pn-schedule-date\"\n                aria-label=\"Pilih tanggal sidang\"\n            >\n\n            <button\n                type=\"button\"\n                id=\"pn-schedule-search\"\n                class=\"pn-schedule-search-button\"\n            >\n                <span>\u2315<\/span>\n                Cari Jadwal\n            <\/button>\n\n            <button\n                type=\"button\"\n                id=\"pn-schedule-today\"\n                class=\"pn-schedule-today\"\n            >\n                Hari Ini\n            <\/button>\n\n        <\/div>\n\n\n        <!-- TANGGAL TERPILIH -->\n\n        <div class=\"pn-schedule-summary\">\n\n            <div class=\"pn-schedule-selected\">\n\n                <div class=\"pn-schedule-calendar-icon\">\n                    \u25a3\n                <\/div>\n\n                <div\n                    id=\"pn-schedule-selected-date\"\n                    class=\"pn-schedule-selected-date\"\n                >\n                    Memuat tanggal...\n                <\/div>\n\n            <\/div>\n\n            <div\n                id=\"pn-schedule-total\"\n                class=\"pn-schedule-total\"\n            >\n                Memuat jadwal...\n            <\/div>\n\n        <\/div>\n\n\n        <!-- FILTER -->\n\n        <div\n            class=\"pn-schedule-filter\"\n            role=\"tablist\"\n            aria-label=\"Filter jenis perkara\"\n        >\n\n            <button\n                type=\"button\"\n                class=\"pn-schedule-filter-btn active\"\n                data-filter=\"all\"\n            >\n                Semua\n            <\/button>\n\n            <button\n                type=\"button\"\n                class=\"pn-schedule-filter-btn\"\n                data-filter=\"pidana\"\n            >\n                <span class=\"pn-filter-dot red\"><\/span>\n                Pidana\n            <\/button>\n\n            <button\n                type=\"button\"\n                class=\"pn-schedule-filter-btn\"\n                data-filter=\"perdata\"\n            >\n                <span class=\"pn-filter-dot green\"><\/span>\n                Perdata\n            <\/button>\n\n        <\/div>\n\n\n        <!-- =================================================\n             LIST JADWAL\n             =================================================\n\n             PENTING:\n             Tidak lagi dibatasi 5 item.\n\n             Semua data dari API akan dimasukkan ke\n             dalam area ini.\n\n             CSS membatasi area maksimal 430px dan\n             melakukan scrolling hanya jika diperlukan.\n        -->\n\n        <div\n            id=\"pn-schedule-list\"\n            class=\"pn-schedule-list\"\n        >\n\n            <div class=\"pn-schedule-loading\">\n\n                Memuat jadwal\n\n                <span class=\"pn-schedule-spinner\"><\/span>\n\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =================================================\n             LINK SIPP\n             ================================================= -->\n\n        <div\n            id=\"pn-schedule-more\"\n            class=\"pn-schedule-more\"\n            style=\"display:flex;\"\n        >\n\n            <a\n                href=\"https:\/\/sipp.pn-simpangtigaredelong.go.id\/list_jadwal_sidang\"\n                target=\"_blank\"\n                rel=\"noopener\"\n            >\n\n                Lihat Jadwal Sidang di SIPP\n\n                <span>\u2197<\/span>\n\n            <\/a>\n\n        <\/div>\n\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n\n\/* =========================================================\n   PN SIMPANG TIGA REDELONG\n   JADWAL SIDANG\n   ========================================================= *\/\n\n\n\/* =========================================================\n   01. KONFIGURASI API\n   ========================================================= *\/\n\nconst PN_JADWAL_API =\n    \"\/api\/jadwal_api.php\";\n\n\nconst PN_DETAIL_API =\n    \"\/api\/detil_sidang.php\";\n\n\nconst PN_SIPP_URL =\n    \"https:\/\/sipp.pn-simpangtigaredelong.go.id\/list_jadwal_sidang\";\n\n\n\/*\n * Tidak ada lagi batas 5 jadwal.\n *\n * Semua data dari API ditampilkan.\n *\n * Scroll dilakukan oleh:\n * .pn-schedule-list\n *\/\n\n\n\/* =========================================================\n   02. ELEMENT\n   ========================================================= *\/\n\nconst pnScheduleDate =\n    document.getElementById(\n        \"pn-schedule-date\"\n    );\n\n\nconst pnScheduleSearch =\n    document.getElementById(\n        \"pn-schedule-search\"\n    );\n\n\nconst pnScheduleToday =\n    document.getElementById(\n        \"pn-schedule-today\"\n    );\n\n\nconst pnScheduleList =\n    document.getElementById(\n        \"pn-schedule-list\"\n    );\n\n\nconst pnScheduleSelectedDate =\n    document.getElementById(\n        \"pn-schedule-selected-date\"\n    );\n\n\nconst pnScheduleTotal =\n    document.getElementById(\n        \"pn-schedule-total\"\n    );\n\n\nconst pnScheduleMore =\n    document.getElementById(\n        \"pn-schedule-more\"\n    );\n\n\nconst pnFilterButtons =\n    document.querySelectorAll(\n        \".pn-schedule-filter-btn\"\n    );\n\n\n\/* =========================================================\n   03. STATE\n   ========================================================= *\/\n\nlet pnScheduleData = [];\n\nlet pnCurrentFilter =\n    \"all\";\n\n\n\/* =========================================================\n   04. LOCAL DATE\n   ========================================================= *\/\n\nfunction pnGetLocalDate() {\n\n    const now =\n        new Date();\n\n    const year =\n        now.getFullYear();\n\n    const month =\n        String(\n            now.getMonth() + 1\n        ).padStart(\n            2,\n            \"0\"\n        );\n\n    const day =\n        String(\n            now.getDate()\n        ).padStart(\n            2,\n            \"0\"\n        );\n\n    return (\n        year +\n        \"-\" +\n        month +\n        \"-\" +\n        day\n    );\n}\n\n\n\/* =========================================================\n   05. DISPLAY DATE\n   ========================================================= *\/\n\nfunction pnFormatDisplayDate(value) {\n\n    const parts =\n        value.split(\"-\");\n\n    if (\n        parts.length !== 3\n    ) {\n\n        return value;\n\n    }\n\n    const date =\n        new Date(\n            Number(parts[0]),\n            Number(parts[1]) - 1,\n            Number(parts[2])\n        );\n\n    return date.toLocaleDateString(\n        \"id-ID\",\n        {\n            weekday:\"long\",\n            day:\"numeric\",\n            month:\"long\",\n            year:\"numeric\"\n        }\n    );\n}\n\n\n\/* =========================================================\n   06. ESCAPE HTML\n   ========================================================= *\/\n\nfunction pnEscape(value) {\n\n    const div =\n        document.createElement(\n            \"div\"\n        );\n\n    div.textContent =\n        value || \"\";\n\n    return div.innerHTML;\n}\n\n\n\/* =========================================================\n   07. DETEKSI JENIS PERKARA\n   ========================================================= *\/\n\nfunction pnGetCaseType(nomor) {\n\n    const value =\n        String(\n            nomor || \"\"\n        ).toLowerCase();\n\n\n    if (\n\n        value.includes(\"\/pid.\")\n\n        ||\n\n        value.includes(\"pid.\")\n\n    ) {\n\n        return \"pidana\";\n\n    }\n\n\n    if (\n\n        value.includes(\"\/pdt.\")\n\n        ||\n\n        value.includes(\"pdt.\")\n\n    ) {\n\n        return \"perdata\";\n\n    }\n\n\n    return \"lainnya\";\n}\n\n\n\/* =========================================================\n   08. EMPTY STATE\n   ========================================================= *\/\n\nfunction pnEmptyState(filter) {\n\n    let text =\n        \"Tidak terdapat jadwal sidang\";\n\n\n    if (\n        filter === \"pidana\"\n    ) {\n\n        text =\n            \"Tidak terdapat jadwal sidang pidana\";\n\n    }\n\n\n    if (\n        filter === \"perdata\"\n    ) {\n\n        text =\n            \"Tidak terdapat jadwal sidang perdata\";\n\n    }\n\n\n    return `\n\n        <div class=\"pn-schedule-empty\">\n\n            <div class=\"pn-schedule-empty-icon\">\n                \u25cb\n            <\/div>\n\n            <div class=\"pn-schedule-empty-title\">\n                ${text}\n            <\/div>\n\n            <div class=\"pn-schedule-empty-text\">\n                Silakan pilih tanggal lainnya\n                untuk melihat jadwal persidangan.\n            <\/div>\n\n        <\/div>\n\n    `;\n}\n\n\n\/* =========================================================\n   09. LOADING\n   ========================================================= *\/\n\nfunction pnLoadingState() {\n\n    return `\n\n        <div class=\"pn-schedule-loading\">\n\n            Memuat jadwal\n\n            <span class=\"pn-schedule-spinner\"><\/span>\n\n        <\/div>\n\n    `;\n}\n\n\n\/* =========================================================\n   10. RENDER CARD\n   ========================================================= *\/\n\nfunction pnRenderCard(item) {\n\n    const nomor =\n        item.nomor ||\n        \"-\";\n\n\n    const type =\n        pnGetCaseType(\n            nomor\n        );\n\n\n    const ruang =\n        item.ruang ||\n        \"Ruang sidang\";\n\n\n    const agenda =\n        item.agenda ||\n        \"Agenda sidang\";\n\n\n    let detailURL =\n        \"#\";\n\n\n    if (\n        item.id\n    ) {\n\n        detailURL =\n            PN_DETAIL_API +\n            \"?id=\" +\n            encodeURIComponent(\n                item.id\n            );\n\n    }\n\n\n    const label =\n        type === \"pidana\"\n            ? \"PIDANA\"\n            : type === \"perdata\"\n                ? \"PERDATA\"\n                : \"SIDANG\";\n\n\n    return `\n\n        <article\n            class=\"\n                pn-schedule-card\n                ${type}\n            \"\n        >\n\n            <div class=\"pn-schedule-main\">\n\n                <!-- JENIS -->\n\n                <div\n                    class=\"\n                        pn-schedule-type\n                        ${type}\n                    \"\n                >\n\n                    ${label}\n\n                <\/div>\n\n\n                <!-- NOMOR PERKARA -->\n\n                <h4\n                    class=\"pn-schedule-number\"\n                >\n\n                    <a\n                        href=\"${pnEscape(\n                            detailURL\n                        )}\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                    >\n\n                        ${pnEscape(\n                            nomor\n                        )}\n\n                    <\/a>\n\n                <\/h4>\n\n\n                <!-- META -->\n\n                <div\n                    class=\"pn-schedule-meta\"\n                >\n\n                    <div\n                        class=\"pn-schedule-meta-item\"\n                    >\n\n                        <span\n                            class=\"\n                                pn-schedule-meta-icon\n                            \"\n                        >\n                            \u25c9\n                        <\/span>\n\n                        <span\n                            class=\"\n                                pn-schedule-meta-text\n                            \"\n                            title=\"${pnEscape(\n                                agenda\n                            )}\"\n                        >\n\n                            ${pnEscape(\n                                agenda\n                            )}\n\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div\n                        class=\"pn-schedule-meta-item\"\n                    >\n\n                        <span\n                            class=\"\n                                pn-schedule-meta-icon\n                            \"\n                        >\n                            \u2302\n                        <\/span>\n\n                        <span\n                            class=\"\n                                pn-schedule-meta-text\n                            \"\n                            title=\"${pnEscape(\n                                ruang\n                            )}\"\n                        >\n\n                            ${pnEscape(\n                                ruang\n                            )}\n\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- DETAIL -->\n\n            <div\n                class=\"pn-schedule-detail\"\n            >\n\n                <a\n                    href=\"${pnEscape(\n                        detailURL\n                    )}\"\n                    target=\"_blank\"\n                    rel=\"noopener\"\n                >\n\n                    Detail\n\n                    <span>\n                        \u2192\n                    <\/span>\n\n                <\/a>\n\n            <\/div>\n\n        <\/article>\n\n    `;\n}\n\n\n\/* =========================================================\n   11. RENDER LIST\n   ========================================================= *\/\n\nfunction pnRenderSchedule() {\n\n    let filtered =\n        pnScheduleData;\n\n\n    \/* -----------------------------------------\n       FILTER\n       ----------------------------------------- *\/\n\n    if (\n        pnCurrentFilter !==\n        \"all\"\n    ) {\n\n        filtered =\n            pnScheduleData.filter(\n                function(item) {\n\n                    return (\n                        pnGetCaseType(\n                            item.nomor\n                        ) ===\n                        pnCurrentFilter\n                    );\n\n                }\n            );\n\n    }\n\n\n    \/* -----------------------------------------\n       TOTAL\n       ----------------------------------------- *\/\n\n    pnScheduleTotal.innerHTML =\n\n        \"<strong>\" +\n        filtered.length +\n        \"<\/strong> jadwal ditemukan\";\n\n\n    \/* -----------------------------------------\n       EMPTY\n       ----------------------------------------- *\/\n\n    if (\n        !filtered.length\n    ) {\n\n        pnScheduleList.innerHTML =\n            pnEmptyState(\n                pnCurrentFilter\n            );\n\n        return;\n\n    }\n\n\n    \/* =================================================\n       PENTING\n       =================================================\n\n       KODE LAMA:\n\n       filtered.slice(0, 5)\n\n       SUDAH DIHAPUS.\n\n       Sekarang SEMUA jadwal ditampilkan.\n\n       Pembatas jumlah visual dilakukan oleh\n       CSS height:430px pada .pn-schedule-list.\n\n       Jadi:\n       - Data tetap lengkap\n       - Box tetap\n       - User tinggal scroll\n       ================================================= *\/\n\n\n    pnScheduleList.innerHTML =\n\n        filtered.map(\n            function(item) {\n\n                return pnRenderCard(\n                    item\n                );\n\n            }\n        ).join(\"\");\n\n\n    \/*\n     * Setiap kali filter berubah,\n     * kembalikan scroll ke atas.\n     *\/\n\n    pnScheduleList.scrollTop = 0;\n\n}\n\n\n\/* =========================================================\n   12. LOAD API\n   ========================================================= *\/\n\nasync function pnLoadSchedule(\n    tanggal\n) {\n\n    pnScheduleSelectedDate.innerHTML = `\n\n        Jadwal untuk\n\n        <strong>\n            ${pnEscape(\n                pnFormatDisplayDate(\n                    tanggal\n                )\n            )}\n        <\/strong>\n\n    `;\n\n\n    pnScheduleTotal.textContent =\n        \"Memuat jadwal...\";\n\n\n    pnScheduleList.innerHTML =\n        pnLoadingState();\n\n\n    try {\n\n        \/* -----------------------------------------\n           API URL\n           ----------------------------------------- *\/\n\n        const url =\n            PN_JADWAL_API +\n            \"?tanggal=\" +\n            encodeURIComponent(\n                tanggal\n            );\n\n\n        \/* -----------------------------------------\n           REQUEST\n           ----------------------------------------- *\/\n\n        const response =\n            await fetch(\n                url,\n                {\n                    method:\"GET\",\n                    cache:\"no-store\"\n                }\n            );\n\n\n        if (\n            !response.ok\n        ) {\n\n            throw new Error(\n                \"HTTP \" +\n                response.status\n            );\n\n        }\n\n\n        const result =\n            await response.json();\n\n\n        \/* -----------------------------------------\n           VALIDASI\n           ----------------------------------------- *\/\n\n        if (\n            result.status !==\n            \"success\"\n        ) {\n\n            throw new Error(\n                result.message ||\n                \"API error\"\n            );\n\n        }\n\n\n        \/* -----------------------------------------\n           DATA\n           ----------------------------------------- *\/\n\n        pnScheduleData =\n            Array.isArray(\n                result.data\n            )\n                ? result.data\n                : [];\n\n\n        \/* -----------------------------------------\n           RESET FILTER\n           ----------------------------------------- *\/\n\n        pnCurrentFilter =\n            \"all\";\n\n\n        pnFilterButtons.forEach(\n            function(button) {\n\n                button.classList.remove(\n                    \"active\"\n                );\n\n\n                if (\n                    button.dataset.filter ===\n                    \"all\"\n                ) {\n\n                    button.classList.add(\n                        \"active\"\n                    );\n\n                }\n\n            }\n        );\n\n\n        \/* -----------------------------------------\n           RENDER\n           ----------------------------------------- *\/\n\n        pnRenderSchedule();\n\n    }\n\n\n    catch (error) {\n\n        console.error(\n            \"PN Jadwal Sidang:\",\n            error\n        );\n\n\n        pnScheduleData =\n            [];\n\n\n        pnScheduleList.innerHTML = `\n\n            <div class=\"pn-schedule-error\">\n\n                Jadwal sidang tidak dapat\n                dimuat saat ini.\n\n            <\/div>\n\n        `;\n\n\n        pnScheduleTotal.textContent =\n            \"Gagal memuat jadwal\";\n\n    }\n\n}\n\n\n\/* =========================================================\n   13. FILTER BUTTON\n   ========================================================= *\/\n\npnFilterButtons.forEach(\n    function(button) {\n\n        button.addEventListener(\n            \"click\",\n            function() {\n\n                \/* -----------------------------\n                   Update active\n                   ----------------------------- *\/\n\n                pnFilterButtons.forEach(\n                    function(item) {\n\n                        item.classList.remove(\n                            \"active\"\n                        );\n\n                    }\n                );\n\n\n                button.classList.add(\n                    \"active\"\n                );\n\n\n                \/* -----------------------------\n                   Set filter\n                   ----------------------------- *\/\n\n                pnCurrentFilter =\n                    button.dataset.filter;\n\n\n                \/* -----------------------------\n                   Render\n                   ----------------------------- *\/\n\n                pnRenderSchedule();\n\n            }\n        );\n\n    }\n);\n\n\n\/* =========================================================\n   14. SEARCH\n   ========================================================= *\/\n\npnScheduleSearch.addEventListener(\n    \"click\",\n    function() {\n\n        const tanggal =\n            pnScheduleDate.value;\n\n\n        if (\n            !tanggal\n        ) {\n\n            pnScheduleDate.focus();\n\n            return;\n\n        }\n\n\n        pnLoadSchedule(\n            tanggal\n        );\n\n    }\n);\n\n\n\/* =========================================================\n   15. DATE CHANGE\n   ========================================================= *\/\n\npnScheduleDate.addEventListener(\n    \"change\",\n    function() {\n\n        if (\n            pnScheduleDate.value\n        ) {\n\n            pnLoadSchedule(\n                pnScheduleDate.value\n            );\n\n        }\n\n    }\n);\n\n\n\/* =========================================================\n   16. TODAY\n   ========================================================= *\/\n\npnScheduleToday.addEventListener(\n    \"click\",\n    function() {\n\n        const today =\n            pnGetLocalDate();\n\n\n        pnScheduleDate.value =\n            today;\n\n\n        pnLoadSchedule(\n            today\n        );\n\n    }\n);\n\n\n\/* =========================================================\n   17. INITIAL LOAD\n   ========================================================= *\/\n\n(function() {\n\n    const today =\n        pnGetLocalDate();\n\n\n    pnScheduleDate.value =\n        today;\n\n\n    pnLoadSchedule(\n        today\n    );\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b3f9d8 elementor-widget elementor-widget-html\" data-id=\"2b3f9d8\" 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<!-- =========================================================\n     PN SIMPANG TIGA REDELONG\n     VIDEO & YOUTUBE CHANNEL\n     iOS \/ macOS GLASS STYLE\n========================================================= -->\n\n<section class=\"pn-youtube-section\">\n\n  <div class=\"pn-youtube-card\">\n\n    <!-- HEADER -->\n    <div class=\"pn-youtube-header\">\n\n      <div class=\"pn-youtube-icon\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8Z\"\/>\n          <path class=\"pn-play\" d=\"M9.6 8.2v7.6L16 12 9.6 8.2Z\"\/>\n        <\/svg>\n      <\/div>\n\n      <div class=\"pn-youtube-heading\">\n        <div class=\"pn-youtube-title\">\n          YouTube Pengadilan Negeri Simpang Tiga Redelong\n        <\/div>\n\n        <div class=\"pn-youtube-subtitle\">\n          Saksikan profil, kegiatan, inovasi, dan informasi Pengadilan Negeri Simpang Tiga Redelong.\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n\n    <!-- VIDEO GRID -->\n    <div class=\"pn-youtube-grid\">\n\n      <!-- VIDEO 1 -->\n      <article class=\"pn-video-item\">\n\n        <div class=\"pn-video-frame\">\n          <iframe\n            src=\"https:\/\/www.youtube.com\/embed\/Xs-H0oob3bo\"\n            title=\"Profil Pengadilan Negeri Simpang Tiga Redelong\"\n            loading=\"lazy\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowfullscreen>\n          <\/iframe>\n        <\/div>\n\n        <div class=\"pn-video-info\">\n          <div class=\"pn-video-label\">VIDEO PROFIL<\/div>\n\n          <h3>\n            Profil Pengadilan Negeri Simpang Tiga Redelong\n          <\/h3>\n\n          <p>\n            Mengenal lebih dekat Pengadilan Negeri Simpang Tiga Redelong,\n            pelayanan, lingkungan kerja, dan komitmen dalam memberikan\n            pelayanan kepada masyarakat.\n          <\/p>\n        <\/div>\n\n      <\/article>\n\n\n      <!-- VIDEO 2 -->\n      <article class=\"pn-video-item\">\n\n        <div class=\"pn-video-frame\">\n          <iframe\n            src=\"https:\/\/www.youtube.com\/embed\/koPPJ3S0gu8\"\n            title=\"Pembangunan Zona Integritas Pengadilan Negeri Simpang Tiga Redelong\"\n            loading=\"lazy\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowfullscreen>\n          <\/iframe>\n        <\/div>\n\n        <div class=\"pn-video-info\">\n          <div class=\"pn-video-label\">ZONA INTEGRITAS<\/div>\n\n          <h3>\n            Pembangunan Zona Integritas\n          <\/h3>\n\n          <p>\n            Komitmen Pengadilan Negeri Simpang Tiga Redelong dalam membangun\n            satuan kerja yang berintegritas, transparan, dan berorientasi\n            pada peningkatan kualitas pelayanan publik.\n          <\/p>\n        <\/div>\n\n      <\/article>\n\n\n      <!-- VIDEO 3 -->\n      <article class=\"pn-video-item\">\n\n        <div class=\"pn-video-frame\">\n          <iframe\n            src=\"https:\/\/www.youtube.com\/embed\/l_0M9_Enh-w\"\n            title=\"Pengadilan Negeri Simpang Tiga Redelong - Publikasi Ditjen Badilum\"\n            loading=\"lazy\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n            allowfullscreen>\n          <\/iframe>\n        <\/div>\n\n        <div class=\"pn-video-info\">\n          <div class=\"pn-video-label\">PUBLIKASI DITJEN BADILUM<\/div>\n\n          <h3>\n            PN Simpang Tiga Redelong di Kanal Ditjen Badilum\n          <\/h3>\n\n          <p>\n            Saksikan publikasi Pengadilan Negeri Simpang Tiga Redelong\n            melalui kanal YouTube Direktorat Jenderal Badan Peradilan Umum.\n          <\/p>\n        <\/div>\n\n      <\/article>\n\n    <\/div>\n\n\n    <!-- CHANNEL CTA -->\n    <div class=\"pn-youtube-footer\">\n\n      <div class=\"pn-youtube-footer-text\">\n        <strong>Ikuti Channel YouTube Kami<\/strong>\n        <span>\n          Dapatkan informasi terbaru seputar kegiatan dan pelayanan\n          Pengadilan Negeri Simpang Tiga Redelong.\n        <\/span>\n      <\/div>\n\n      <a\n        class=\"pn-youtube-button\"\n        href=\"https:\/\/youtube.com\/@pengadilannegerisimpangtig354\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8Z\"\/>\n          <path class=\"pn-play\" d=\"M9.6 8.2v7.6L16 12 9.6 8.2Z\"\/>\n        <\/svg>\n\n        <span>Kunjungi Channel<\/span>\n\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n.pn-youtube-section {\n  width: 100%;\n  box-sizing: border-box;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"SF Pro Display\",\n    \"SF Pro Text\",\n    \"Segoe UI\",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n}\n\n\n\/* =========================================================\n   MAIN CARD\n========================================================= *\/\n\n.pn-youtube-card {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n\n  padding: 18px;\n\n  border-radius: 20px;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(255,255,255,.88),\n      rgba(248,248,250,.70)\n    );\n\n  border: 1px solid rgba(255,255,255,.9);\n\n  box-shadow:\n    0 10px 30px rgba(0,0,0,.07),\n    inset 0 1px 0 rgba(255,255,255,.8);\n\n  overflow: hidden;\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.pn-youtube-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  margin-bottom: 16px;\n}\n\n\n.pn-youtube-icon {\n  width: 42px;\n  height: 42px;\n\n  flex: 0 0 42px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 13px;\n\n  background: #9A2109;\n\n  box-shadow:\n    0 6px 15px rgba(154,33,9,.22);\n}\n\n\n.pn-youtube-icon svg {\n  width: 22px;\n  height: 22px;\n\n  fill: #fff;\n}\n\n\n.pn-youtube-icon .pn-play {\n  fill: #9A2109;\n}\n\n\n.pn-youtube-title {\n  color: #171717;\n\n  font-size: 17px;\n  line-height: 1.25;\n\n  font-weight: 700;\n\n  letter-spacing: -.2px;\n}\n\n\n.pn-youtube-subtitle {\n  margin-top: 3px;\n\n  color: #777;\n\n  font-size: 12px;\n  line-height: 1.45;\n}\n\n\n\/* =========================================================\n   VIDEO GRID\n========================================================= *\/\n\n.pn-youtube-grid {\n  display: grid;\n\n  grid-template-columns:\n    repeat(3, minmax(0, 1fr));\n\n  gap: 14px;\n}\n\n\n\/* =========================================================\n   VIDEO ITEM\n========================================================= *\/\n\n.pn-video-item {\n  min-width: 0;\n\n  overflow: hidden;\n\n  border-radius: 15px;\n\n  background: rgba(255,255,255,.75);\n\n  border: 1px solid rgba(0,0,0,.055);\n\n  box-shadow:\n    0 5px 18px rgba(0,0,0,.045);\n\n  transition:\n    transform .25s ease,\n    box-shadow .25s ease;\n}\n\n\n.pn-video-item:hover {\n  transform: translateY(-2px);\n\n  box-shadow:\n    0 9px 24px rgba(0,0,0,.08);\n}\n\n\n\/* =========================================================\n   VIDEO FRAME\n========================================================= *\/\n\n.pn-video-frame {\n  position: relative;\n\n  width: 100%;\n\n  aspect-ratio: 16 \/ 9;\n\n  overflow: hidden;\n\n  background: #111;\n}\n\n\n.pn-video-frame iframe {\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n}\n\n\n\/* =========================================================\n   VIDEO INFO\n========================================================= *\/\n\n.pn-video-info {\n  padding: 11px 12px 13px;\n}\n\n\n.pn-video-label {\n  display: inline-flex;\n  align-items: center;\n\n  padding: 4px 7px;\n\n  margin-bottom: 7px;\n\n  border-radius: 6px;\n\n  background: rgba(154,33,9,.08);\n\n  color: #9A2109;\n\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: .55px;\n}\n\n\n.pn-video-info h3 {\n  margin: 0;\n\n  color: #202020;\n\n  font-size: 13px;\n  line-height: 1.35;\n\n  font-weight: 700;\n\n  letter-spacing: -.1px;\n}\n\n\n.pn-video-info p {\n  margin: 6px 0 0;\n\n  color: #777;\n\n  font-size: 10.5px;\n  line-height: 1.45;\n}\n\n\n\/* =========================================================\n   FOOTER \/ CHANNEL CTA\n========================================================= *\/\n\n.pn-youtube-footer {\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  gap: 15px;\n\n  margin-top: 15px;\n\n  padding: 12px 13px;\n\n  border-radius: 13px;\n\n  background:\n    rgba(154,33,9,.045);\n\n  border:\n    1px solid rgba(154,33,9,.08);\n}\n\n\n.pn-youtube-footer-text {\n  display: flex;\n  flex-direction: column;\n\n  min-width: 0;\n}\n\n\n.pn-youtube-footer-text strong {\n  color: #252525;\n\n  font-size: 12px;\n  line-height: 1.3;\n}\n\n\n.pn-youtube-footer-text span {\n  margin-top: 2px;\n\n  color: #777;\n\n  font-size: 10px;\n  line-height: 1.4;\n}\n\n\n\/* =========================================================\n   BUTTON\n========================================================= *\/\n\n.pn-youtube-button {\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  gap: 7px;\n\n  flex: 0 0 auto;\n\n  padding: 9px 13px;\n\n  border-radius: 10px;\n\n  background: #9A2109;\n\n  color: #fff !important;\n\n  text-decoration: none !important;\n\n  font-size: 10.5px;\n\n  font-weight: 700;\n\n  box-shadow:\n    0 5px 13px rgba(154,33,9,.20);\n\n  transition:\n    transform .2s ease,\n    box-shadow .2s ease,\n    background .2s ease;\n}\n\n\n.pn-youtube-button:hover {\n  background: #7f1b08;\n\n  color: #fff !important;\n\n  transform: translateY(-1px);\n\n  box-shadow:\n    0 7px 16px rgba(154,33,9,.25);\n}\n\n\n.pn-youtube-button svg {\n  width: 15px;\n  height: 15px;\n\n  fill: #fff;\n}\n\n\n.pn-youtube-button .pn-play {\n  fill: #9A2109;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .pn-youtube-grid {\n    grid-template-columns:\n      repeat(2, minmax(0, 1fr));\n  }\n\n  .pn-video-item:last-child {\n    grid-column: 1 \/ -1;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .pn-youtube-card {\n    padding: 13px;\n\n    border-radius: 17px;\n  }\n\n\n  .pn-youtube-header {\n    gap: 9px;\n\n    margin-bottom: 12px;\n  }\n\n\n  .pn-youtube-icon {\n    width: 36px;\n    height: 36px;\n\n    flex-basis: 36px;\n\n    border-radius: 11px;\n  }\n\n\n  .pn-youtube-icon svg {\n    width: 19px;\n    height: 19px;\n  }\n\n\n  .pn-youtube-title {\n    font-size: 14px;\n  }\n\n\n  .pn-youtube-subtitle {\n    font-size: 10px;\n  }\n\n\n  .pn-youtube-grid {\n    grid-template-columns: 1fr;\n\n    gap: 11px;\n  }\n\n\n  .pn-video-item:last-child {\n    grid-column: auto;\n  }\n\n\n  .pn-video-info {\n    padding: 10px 11px 12px;\n  }\n\n\n  .pn-video-info h3 {\n    font-size: 12px;\n  }\n\n\n  .pn-video-info p {\n    font-size: 10px;\n  }\n\n\n  .pn-youtube-footer {\n    flex-direction: column;\n\n    align-items: stretch;\n\n    gap: 10px;\n\n    padding: 11px;\n  }\n\n\n  .pn-youtube-button {\n    width: 100%;\n\n    box-sizing: border-box;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 380px) {\n\n  .pn-youtube-card {\n    padding: 11px;\n  }\n\n\n  .pn-youtube-title {\n    font-size: 13px;\n  }\n\n\n  .pn-youtube-subtitle {\n    font-size: 9.5px;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-74ab79a e-con-full e-flex e-con e-child\" data-id=\"74ab79a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-1563c22 e-con-full e-flex e-con e-child\" data-id=\"1563c22\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-deab45a elementor-widget elementor-widget-html\" data-id=\"deab45a\" 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<!-- =========================================================\r\n     SIDEBAR 02 \u2014 PENCARIAN\r\n     iOS GLASS \/ COMPACT SEARCH\r\n     WORDPRESS NATIVE SEARCH\r\n     ========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-search {\r\n\r\n    --pn-red: #9A2109;\r\n    --pn-red-dark: #7C1A08;\r\n\r\n    --pn-text: #1d1d1f;\r\n    --pn-text-soft: #6e6e73;\r\n\r\n    width: 100%;\r\n\r\n    font-family:\r\n        -apple-system,\r\n        BlinkMacSystemFont,\r\n        \"SF Pro Display\",\r\n        \"SF Pro Text\",\r\n        \"Segoe UI\",\r\n        Roboto,\r\n        Helvetica,\r\n        Arial,\r\n        sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GLASS CARD\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-search-card {\r\n\r\n    width: 100%;\r\n\r\n    box-sizing: border-box;\r\n\r\n    padding: 15px;\r\n\r\n    border-radius: 16px;\r\n\r\n    border: 1px solid rgba(255,255,255,.78);\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255,255,255,.82),\r\n            rgba(255,255,255,.60)\r\n        );\r\n\r\n    box-shadow:\r\n        0 6px 22px rgba(0,0,0,.045);\r\n\r\n    backdrop-filter:\r\n        blur(18px)\r\n        saturate(120%);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(18px)\r\n        saturate(120%);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-search-header {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 9px;\r\n\r\n    margin-bottom: 11px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ICON\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-search-icon {\r\n\r\n    width: 31px;\r\n    height: 31px;\r\n\r\n    flex: 0 0 31px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 9px;\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n.pn-sidebar-search-icon svg {\r\n\r\n    width: 16px;\r\n    height: 16px;\r\n\r\n    display: block;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.8;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-search-title {\r\n\r\n    margin: 0;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.25;\r\n}\r\n\r\n\r\n.pn-sidebar-search-subtitle {\r\n\r\n    margin-top: 2px;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH BAR\r\n   ========================================================= *\/\r\n\r\n.pn-search-form {\r\n\r\n    width: 100%;\r\n\r\n    height: 40px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    box-sizing: border-box;\r\n\r\n    padding: 3px;\r\n\r\n    gap: 3px;\r\n\r\n    border-radius: 11px;\r\n\r\n    background:\r\n        rgba(255,255,255,.72);\r\n\r\n    border:\r\n        1px solid rgba(0,0,0,.065);\r\n\r\n    box-shadow:\r\n        inset 0 1px 1px rgba(255,255,255,.8);\r\n\r\n    transition:\r\n        border-color .2s ease,\r\n        box-shadow .2s ease,\r\n        background .2s ease;\r\n}\r\n\r\n\r\n.pn-search-form:focus-within {\r\n\r\n    background:\r\n        rgba(255,255,255,.92);\r\n\r\n    border-color:\r\n        rgba(154,33,9,.20);\r\n\r\n    box-shadow:\r\n        0 0 0 3px rgba(154,33,9,.055);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INPUT\r\n   ========================================================= *\/\r\n\r\n.pn-search-input {\r\n\r\n    flex: 1;\r\n\r\n    width: 100%;\r\n\r\n    min-width: 0;\r\n\r\n    height: 32px;\r\n\r\n    padding:\r\n        0 9px;\r\n\r\n    margin: 0;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border: 0 !important;\r\n\r\n    outline: none !important;\r\n\r\n    background:\r\n        transparent !important;\r\n\r\n    box-shadow:\r\n        none !important;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-family:\r\n        inherit;\r\n\r\n    font-size: 11px;\r\n\r\n    font-weight: 400;\r\n\r\n    line-height: 32px;\r\n\r\n    appearance: none;\r\n\r\n    -webkit-appearance: none;\r\n}\r\n\r\n\r\n\/* Placeholder *\/\r\n\r\n.pn-search-input::placeholder {\r\n\r\n    color:\r\n        #8a8a8f;\r\n\r\n    opacity: 1;\r\n}\r\n\r\n\r\n\/* Hilangkan icon search bawaan browser *\/\r\n\r\n.pn-search-input::-webkit-search-decoration,\r\n.pn-search-input::-webkit-search-cancel-button,\r\n.pn-search-input::-webkit-search-results-button,\r\n.pn-search-input::-webkit-search-results-decoration {\r\n\r\n    -webkit-appearance: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH BUTTON\r\n   ========================================================= *\/\r\n\r\n.pn-search-button {\r\n\r\n    width: 32px;\r\n    height: 32px;\r\n\r\n    flex: 0 0 32px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    margin: 0;\r\n\r\n    padding: 0;\r\n\r\n    border: 0 !important;\r\n\r\n    border-radius: 8px;\r\n\r\n    background:\r\n        var(--pn-red) !important;\r\n\r\n    color:\r\n        #ffffff !important;\r\n\r\n    cursor: pointer;\r\n\r\n    box-shadow:\r\n        none;\r\n\r\n    transition:\r\n        background .2s ease,\r\n        transform .15s ease,\r\n        box-shadow .2s ease;\r\n}\r\n\r\n\r\n.pn-search-button:hover {\r\n\r\n    background:\r\n        var(--pn-red-dark) !important;\r\n\r\n    transform:\r\n        translateY(-1px);\r\n\r\n    box-shadow:\r\n        0 4px 10px\r\n        rgba(154,33,9,.18);\r\n}\r\n\r\n\r\n.pn-search-button:active {\r\n\r\n    transform:\r\n        scale(.96);\r\n}\r\n\r\n\r\n.pn-search-button:focus {\r\n\r\n    outline: none !important;\r\n}\r\n\r\n\r\n.pn-search-button:focus-visible {\r\n\r\n    outline:\r\n        2px solid\r\n        rgba(154,33,9,.22) !important;\r\n\r\n    outline-offset: 2px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUTTON ICON\r\n   ========================================================= *\/\r\n\r\n.pn-search-button svg {\r\n\r\n    width: 15px;\r\n    height: 15px;\r\n\r\n    display: block;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.9;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INFO\r\n   ========================================================= *\/\r\n\r\n.pn-search-info {\r\n\r\n    margin-top: 7px;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 8.5px;\r\n\r\n    line-height: 1.35;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .pn-sidebar-search-card {\r\n\r\n        padding: 14px;\r\n\r\n        border-radius: 15px;\r\n    }\r\n\r\n    .pn-search-form {\r\n\r\n        height: 39px;\r\n    }\r\n\r\n    .pn-search-input {\r\n\r\n        font-size: 11px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     SEARCH CONTENT\r\n     ========================================================= -->\r\n\r\n<div class=\"pn-sidebar-search\">\r\n\r\n    <div class=\"pn-sidebar-search-card\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-sidebar-search-header\">\r\n\r\n\r\n            <!-- ICON -->\r\n\r\n            <div class=\"pn-sidebar-search-icon\">\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n\r\n                    <circle\r\n                        cx=\"10.8\"\r\n                        cy=\"10.8\"\r\n                        r=\"6.3\"\r\n                    ><\/circle>\r\n\r\n                    <path\r\n                        d=\"M16 16l5 5\"\r\n                    ><\/path>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- TEXT -->\r\n\r\n            <div>\r\n\r\n                <div class=\"pn-sidebar-search-title\">\r\n                    Pencarian\r\n                <\/div>\r\n\r\n                <div class=\"pn-sidebar-search-subtitle\">\r\n                    Cari informasi di website\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             WORDPRESS SEARCH FORM\r\n             ================================================= -->\r\n\r\n        <form\r\n            class=\"pn-search-form\"\r\n            action=\"\/\"\r\n            method=\"get\"\r\n            role=\"search\"\r\n        >\r\n\r\n\r\n            <!-- INPUT -->\r\n\r\n            <input\r\n                class=\"pn-search-input\"\r\n                type=\"search\"\r\n                name=\"s\"\r\n                placeholder=\"Cari berita, halaman, dokumen...\"\r\n                aria-label=\"Cari di website\"\r\n                autocomplete=\"off\"\r\n            >\r\n\r\n\r\n            <!-- BUTTON -->\r\n\r\n            <button\r\n                class=\"pn-search-button\"\r\n                type=\"submit\"\r\n                aria-label=\"Cari\"\r\n                title=\"Cari\"\r\n            >\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n\r\n                    <circle\r\n                        cx=\"10.8\"\r\n                        cy=\"10.8\"\r\n                        r=\"6.3\"\r\n                    ><\/circle>\r\n\r\n                    <path\r\n                        d=\"M16 16l5 5\"\r\n                    ><\/path>\r\n\r\n                <\/svg>\r\n\r\n            <\/button>\r\n\r\n\r\n        <\/form>\r\n\r\n\r\n        <!-- =================================================\r\n             DESCRIPTION\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-search-info\">\r\n\r\n            Cari berita, halaman, dan informasi lainnya.\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n    \"use strict\";\r\n\r\n    const form =\r\n        document.querySelector(\r\n            \".pn-search-form\"\r\n        );\r\n\r\n    const input =\r\n        document.querySelector(\r\n            \".pn-search-input\"\r\n        );\r\n\r\n\r\n    if (!form || !input) {\r\n        return;\r\n    }\r\n\r\n\r\n    \/*\r\n     * Mencegah pencarian kosong\r\n     *\/\r\n\r\n    form.addEventListener(\r\n        \"submit\",\r\n        function (event) {\r\n\r\n            const keyword =\r\n                input.value.trim();\r\n\r\n\r\n            if (!keyword) {\r\n\r\n                event.preventDefault();\r\n\r\n                input.focus();\r\n\r\n                return;\r\n            }\r\n\r\n\r\n            \/*\r\n             * Rapikan spasi\r\n             *\/\r\n\r\n            input.value =\r\n                keyword.replace(\r\n                    \/\\s+\/g,\r\n                    \" \"\r\n                );\r\n\r\n        }\r\n    );\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<\/div>\n\t\t<div class=\"elementor-element elementor-element-b094369 e-con-full e-flex e-con e-child\" data-id=\"b094369\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-408d72a elementor-widget elementor-widget-html\" data-id=\"408d72a\" 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<!-- =========================================================\n     PN SIMPANG TIGA REDELONG \u2014 LANGUAGE CARD\n     WIDGET 1 \/ HEADER + CARD\n     ========================================================= -->\n\n<div class=\"pn-language-card\">\n\n    <div class=\"pn-language-header\">\n\n        <div class=\"pn-language-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n                <path d=\"M3 12h18\"><\/path>\n                <path d=\"M12 3c2.4 2.5 3.6 5.5 3.6 9s-1.2 6.5-3.6 9\"><\/path>\n                <path d=\"M12 3c-2.4 2.5-3.6 5.5-3.6 9s1.2 6.5 3.6 9\"><\/path>\n            <\/svg>\n        <\/div>\n\n        <div class=\"pn-language-title-wrap\">\n            <div class=\"pn-language-title\">\n                Pilih Bahasa\n            <\/div>\n\n            <div class=\"pn-language-subtitle\">\n                Choose Language\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<style>\n\n\/* =========================================================\n   ROOT\n   ========================================================= *\/\n\n.pn-language-card {\n    --pn-red: #9A2109;\n    --pn-red-dark: #7C1A08;\n    --pn-text: #1d1d1f;\n    --pn-text-soft: #6e6e73;\n\n    width: 100%;\n    min-height: 118px;\n\n    box-sizing: border-box;\n\n    padding: 15px;\n\n    border-radius: 16px;\n\n    border: 1px solid rgba(255,255,255,.78);\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.82),\n            rgba(255,255,255,.60)\n        );\n\n    box-shadow:\n        0 6px 22px rgba(0,0,0,.045);\n\n    backdrop-filter:\n        blur(18px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(18px)\n        saturate(120%);\n\n    font-family:\n        -apple-system,\n        BlinkMacSystemFont,\n        \"SF Pro Display\",\n        \"SF Pro Text\",\n        \"Segoe UI\",\n        Roboto,\n        Helvetica,\n        Arial,\n        sans-serif;\n\n    position: relative;\n\n    overflow: visible;\n\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.pn-language-header {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 9px;\n\n    margin-bottom: 12px;\n\n}\n\n\n\/* =========================================================\n   ICON\n   ========================================================= *\/\n\n.pn-language-icon {\n\n    width: 31px;\n    height: 31px;\n\n    flex: 0 0 31px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 9px;\n\n    background: rgba(154,33,9,.08);\n\n    color: var(--pn-red);\n\n}\n\n\n.pn-language-icon svg {\n\n    width: 17px;\n    height: 17px;\n\n    display: block;\n\n    fill: none;\n\n    stroke: currentColor;\n\n    stroke-width: 1.7;\n\n    stroke-linecap: round;\n\n    stroke-linejoin: round;\n\n}\n\n\n\/* =========================================================\n   TITLE\n   ========================================================= *\/\n\n.pn-language-title-wrap {\n\n    min-width: 0;\n\n}\n\n\n.pn-language-title {\n\n    color: var(--pn-text);\n\n    font-size: 13px;\n\n    font-weight: 700;\n\n    line-height: 1.25;\n\n    letter-spacing: -.1px;\n\n}\n\n\n.pn-language-subtitle {\n\n    margin-top: 2px;\n\n    color: var(--pn-text-soft);\n\n    font-size: 9px;\n\n    line-height: 1.3;\n\n    letter-spacing: .05px;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .pn-language-card {\n\n        min-height: 118px;\n\n        padding: 14px;\n\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfa7f53 elementor-absolute elementor-widget elementor-widget-wp-widget-gtranslate\" data-id=\"cfa7f53\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"wp-widget-gtranslate.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gtranslate_wrapper\" id=\"gt-wrapper-85268269\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-585bf32 e-con-full e-flex e-con e-child\" data-id=\"585bf32\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a35e51e elementor-widget elementor-widget-html\" data-id=\"a35e51e\" 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<!-- =========================================================\r\n     SIDEBAR 03 \u2014 JAM KERJA PENGADILAN & PTSP\r\n     STYLE: iOS GLASS\r\n     ========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours {\r\n\r\n    --pn-red: #9A2109;\r\n    --pn-red-dark: #7C1A08;\r\n\r\n    --pn-text: #1d1d1f;\r\n    --pn-text-soft: #6e6e73;\r\n\r\n    --pn-border: rgba(255,255,255,.78);\r\n\r\n    --pn-shadow:\r\n        0 8px 25px rgba(0,0,0,.055);\r\n\r\n    --pn-shadow-hover:\r\n        0 12px 30px rgba(0,0,0,.08);\r\n\r\n    width: 100%;\r\n\r\n    font-family:\r\n        -apple-system,\r\n        BlinkMacSystemFont,\r\n        \"SF Pro Display\",\r\n        \"SF Pro Text\",\r\n        \"Segoe UI\",\r\n        Roboto,\r\n        Helvetica,\r\n        Arial,\r\n        sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GLASS CARD\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-card {\r\n\r\n    width: 100%;\r\n\r\n    padding: 17px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border-radius: 17px;\r\n\r\n    border:\r\n        1px solid var(--pn-border);\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(255,255,255,.76),\r\n            rgba(255,255,255,.55)\r\n        );\r\n\r\n    box-shadow:\r\n        var(--pn-shadow);\r\n\r\n    backdrop-filter:\r\n        blur(20px)\r\n        saturate(120%);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(20px)\r\n        saturate(120%);\r\n\r\n    transition:\r\n        background .25s ease,\r\n        box-shadow .25s ease;\r\n}\r\n\r\n\r\n.pn-sidebar-hours-card:hover {\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(255,255,255,.84),\r\n            rgba(255,255,255,.66)\r\n        );\r\n\r\n    box-shadow:\r\n        var(--pn-shadow-hover);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-header {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    margin-bottom: 14px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ICON\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-icon {\r\n\r\n    width: 34px;\r\n    height: 34px;\r\n\r\n    flex: 0 0 34px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    border:\r\n        1px solid rgba(154,33,9,.10);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n.pn-sidebar-hours-icon svg {\r\n\r\n    width: 18px;\r\n    height: 18px;\r\n\r\n    display: block;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.7;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-title {\r\n\r\n    margin: 0;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n.pn-sidebar-hours-subtitle {\r\n\r\n    margin: 2px 0 0;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 11px;\r\n\r\n    line-height: 1.4;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-section {\r\n\r\n    margin-top: 12px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION TITLE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-section-title {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 7px;\r\n\r\n    margin-bottom: 6px;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 11px;\r\n\r\n    font-weight: 700;\r\n}\r\n\r\n\r\n.pn-sidebar-hours-section-title::before {\r\n\r\n    content: \"\";\r\n\r\n    width: 4px;\r\n\r\n    height: 13px;\r\n\r\n    border-radius: 4px;\r\n\r\n    background:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DAY ROW\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-row {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: space-between;\r\n\r\n    gap: 10px;\r\n\r\n    min-height: 36px;\r\n\r\n    padding:\r\n        6px 10px;\r\n\r\n    margin-bottom: 4px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border-radius: 10px;\r\n\r\n    border:\r\n        1px solid rgba(0,0,0,.055);\r\n\r\n    background:\r\n        rgba(255,255,255,.48);\r\n\r\n    transition:\r\n        background .2s ease,\r\n        border-color .2s ease;\r\n}\r\n\r\n\r\n.pn-sidebar-hours-row:hover {\r\n\r\n    background:\r\n        rgba(255,255,255,.70);\r\n\r\n    border-color:\r\n        rgba(154,33,9,.10);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DAY NAME\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-day {\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 10.5px;\r\n\r\n    font-weight: 600;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TIME\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-time {\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 9.5px;\r\n\r\n    font-weight: 500;\r\n\r\n    text-align: right;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLOSED ROW\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-row.closed {\r\n\r\n    background:\r\n        rgba(0,0,0,.025);\r\n\r\n    border-color:\r\n        rgba(0,0,0,.045);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLOSED BADGE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-closed {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 5px;\r\n\r\n    padding:\r\n        4px 8px;\r\n\r\n    border-radius: 8px;\r\n\r\n    background:\r\n        rgba(0,0,0,.045);\r\n\r\n    color:\r\n        #6e6e73;\r\n\r\n    font-size: 8.5px;\r\n\r\n    font-weight: 700;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   OPEN BADGE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-open {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 5px;\r\n\r\n    padding:\r\n        4px 8px;\r\n\r\n    border-radius: 8px;\r\n\r\n    background:\r\n        rgba(154,33,9,.07);\r\n\r\n    color:\r\n        var(--pn-red);\r\n\r\n    font-size: 8.5px;\r\n\r\n    font-weight: 700;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATUS DOT\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-dot {\r\n\r\n    width: 5px;\r\n    height: 5px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        currentColor;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NOTE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-hours-note {\r\n\r\n    display: flex;\r\n\r\n    align-items: flex-start;\r\n\r\n    gap: 7px;\r\n\r\n    margin-top: 10px;\r\n\r\n    padding: 9px;\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        rgba(154,33,9,.045);\r\n\r\n    border:\r\n        1px solid rgba(154,33,9,.08);\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 8.5px;\r\n\r\n    line-height: 1.45;\r\n}\r\n\r\n\r\n.pn-sidebar-hours-note-icon {\r\n\r\n    flex: 0 0 auto;\r\n\r\n    color:\r\n        var(--pn-red);\r\n\r\n    font-size: 11px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .pn-sidebar-hours-card {\r\n\r\n        padding: 15px;\r\n\r\n        border-radius: 15px;\r\n    }\r\n\r\n    .pn-sidebar-hours-title {\r\n\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pn-sidebar-hours-subtitle {\r\n\r\n        font-size: 10px;\r\n    }\r\n\r\n    .pn-sidebar-hours-row {\r\n\r\n        min-height: 35px;\r\n\r\n        padding:\r\n            6px 9px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     CONTENT\r\n     ========================================================= -->\r\n\r\n<div class=\"pn-sidebar-hours\">\r\n\r\n    <div class=\"pn-sidebar-hours-card\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-sidebar-hours-header\">\r\n\r\n            <div class=\"pn-sidebar-hours-icon\">\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n\r\n                    <!-- Calendar -->\r\n\r\n                    <rect\r\n                        x=\"3\"\r\n                        y=\"4.5\"\r\n                        width=\"18\"\r\n                        height=\"16\"\r\n                        rx=\"2.5\"\r\n                    ><\/rect>\r\n\r\n                    <!-- Calendar top -->\r\n\r\n                    <path\r\n                        d=\"M7 2.5v4\"\r\n                    ><\/path>\r\n\r\n                    <path\r\n                        d=\"M17 2.5v4\"\r\n                    ><\/path>\r\n\r\n                    <!-- Divider -->\r\n\r\n                    <path\r\n                        d=\"M3 9h18\"\r\n                    ><\/path>\r\n\r\n                    <!-- Clock -->\r\n\r\n                    <circle\r\n                        cx=\"16.5\"\r\n                        cy=\"15\"\r\n                        r=\"3.2\"\r\n                    ><\/circle>\r\n\r\n                    <path\r\n                        d=\"M16.5 13.5v1.8l1.2.8\"\r\n                    ><\/path>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n                <div class=\"pn-sidebar-hours-title\">\r\n                    Jam Kerja\r\n                <\/div>\r\n\r\n                <div class=\"pn-sidebar-hours-subtitle\">\r\n                    Pengadilan &amp; PTSP\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             JAM KERJA PENGADILAN\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-sidebar-hours-section\">\r\n\r\n            <div class=\"pn-sidebar-hours-section-title\">\r\n                Jam Kerja Pengadilan\r\n            <\/div>\r\n\r\n\r\n            <!-- SENIN - KAMIS -->\r\n\r\n            <div class=\"pn-sidebar-hours-row\">\r\n\r\n                <span class=\"pn-sidebar-hours-day\">\r\n                    Senin \u2013 Kamis\r\n                <\/span>\r\n\r\n                <span class=\"pn-sidebar-hours-time\">\r\n                    08.00 \u2013 16.30\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- JUMAT -->\r\n\r\n            <div class=\"pn-sidebar-hours-row\">\r\n\r\n                <span class=\"pn-sidebar-hours-day\">\r\n                    Jumat\r\n                <\/span>\r\n\r\n                <span class=\"pn-sidebar-hours-time\">\r\n                    08.00 \u2013 17.00\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- SABTU - MINGGU -->\r\n\r\n            <div class=\"pn-sidebar-hours-row closed\">\r\n\r\n                <span class=\"pn-sidebar-hours-day\">\r\n                    Sabtu \u2013 Minggu\r\n                <\/span>\r\n\r\n                <span class=\"pn-sidebar-hours-closed\">\r\n\r\n                    <span class=\"pn-sidebar-hours-dot\"><\/span>\r\n\r\n                    LIBUR\r\n\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             PELAYANAN PTSP\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-sidebar-hours-section\">\r\n\r\n            <div class=\"pn-sidebar-hours-section-title\">\r\n                Pelayanan PTSP\r\n            <\/div>\r\n\r\n\r\n            <!-- SENIN - KAMIS -->\r\n\r\n            <div class=\"pn-sidebar-hours-row\">\r\n\r\n                <span class=\"pn-sidebar-hours-day\">\r\n                    Senin \u2013 Kamis\r\n                <\/span>\r\n\r\n                <span class=\"pn-sidebar-hours-time\">\r\n                    08.00 \u2013 16.00\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- JUMAT -->\r\n\r\n            <div class=\"pn-sidebar-hours-row\">\r\n\r\n                <span class=\"pn-sidebar-hours-day\">\r\n                    Jumat\r\n                <\/span>\r\n\r\n                <span class=\"pn-sidebar-hours-time\">\r\n                    08.00 \u2013 16.30\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- SABTU - MINGGU -->\r\n\r\n            <div class=\"pn-sidebar-hours-row closed\">\r\n\r\n                <span class=\"pn-sidebar-hours-day\">\r\n                    Sabtu \u2013 Minggu\r\n                <\/span>\r\n\r\n                <span class=\"pn-sidebar-hours-closed\">\r\n\r\n                    <span class=\"pn-sidebar-hours-dot\"><\/span>\r\n\r\n                    LIBUR\r\n\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             NOTE\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-sidebar-hours-note\">\r\n\r\n            <span class=\"pn-sidebar-hours-note-icon\">\r\n                \u24d8\r\n            <\/span>\r\n\r\n            <span>\r\n                Jam kerja dapat menyesuaikan dengan\r\n                ketentuan hari libur nasional dan\r\n                kebijakan kedinasan.\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-100aeaa e-con-full e-flex e-con e-child\" data-id=\"100aeaa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4954b7a elementor-widget elementor-widget-html\" data-id=\"4954b7a\" 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<!-- =========================================================\r\n     SIDEBAR 04 \u2014 INDEKS PELAYANAN PUBLIK\r\n     STYLE  : iOS GLASS\r\n     SOURCE : WORDPRESS REST API\r\n     DISPLAY: 2 POSTING TERBARU\r\n     ========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-indeks {\r\n\r\n    --pn-red: #9A2109;\r\n    --pn-red-dark: #7C1A08;\r\n\r\n    --pn-text: #1d1d1f;\r\n    --pn-text-soft: #6e6e73;\r\n\r\n    --pn-border: rgba(255,255,255,.78);\r\n    --pn-red-border: rgba(154,33,9,.18);\r\n\r\n    --pn-shadow:\r\n        0 8px 25px rgba(0,0,0,.055);\r\n\r\n    --pn-shadow-hover:\r\n        0 12px 30px rgba(0,0,0,.08);\r\n\r\n    width: 100%;\r\n\r\n    font-family:\r\n        -apple-system,\r\n        BlinkMacSystemFont,\r\n        \"SF Pro Display\",\r\n        \"SF Pro Text\",\r\n        \"Segoe UI\",\r\n        Roboto,\r\n        Helvetica,\r\n        Arial,\r\n        sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GLASS CARD\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-indeks-card {\r\n\r\n    width: 100%;\r\n\r\n    padding: 17px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border-radius: 17px;\r\n\r\n    border:\r\n        1px solid var(--pn-border);\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(255,255,255,.76),\r\n            rgba(255,255,255,.55)\r\n        );\r\n\r\n    box-shadow:\r\n        var(--pn-shadow);\r\n\r\n    backdrop-filter:\r\n        blur(20px)\r\n        saturate(120%);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(20px)\r\n        saturate(120%);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-indeks-header {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    margin-bottom: 14px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ICON\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-indeks-icon {\r\n\r\n    width: 34px;\r\n    height: 34px;\r\n\r\n    flex: 0 0 34px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    border:\r\n        1px solid rgba(154,33,9,.10);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n.pn-sidebar-indeks-icon svg {\r\n\r\n    width: 18px;\r\n    height: 18px;\r\n\r\n    display: block;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.7;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-indeks-title {\r\n\r\n    margin: 0;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SUBTITLE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-indeks-subtitle {\r\n\r\n    margin: 2px 0 0;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 11px;\r\n\r\n    line-height: 1.4;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SLIDER WRAPPER\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-slider {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 14px;\r\n\r\n    background:\r\n        #eeeeef;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SLIDE\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-slide {\r\n\r\n    position: relative;\r\n\r\n    display: none;\r\n\r\n    width: 100%;\r\n\r\n    text-decoration: none !important;\r\n\r\n    color: inherit;\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 14px;\r\n}\r\n\r\n\r\n.pn-indeks-slide.active {\r\n\r\n    display: block;\r\n\r\n    animation:\r\n        pnIndeksFade .35s ease;\r\n}\r\n\r\n\r\n@keyframes pnIndeksFade {\r\n\r\n    from {\r\n\r\n        opacity: 0;\r\n\r\n        transform:\r\n            translateX(8px);\r\n    }\r\n\r\n    to {\r\n\r\n        opacity: 1;\r\n\r\n        transform:\r\n            translateX(0);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-image {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    aspect-ratio: 16 \/ 9;\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        #eeeeef;\r\n}\r\n\r\n\r\n.pn-indeks-image img {\r\n\r\n    width: 100%;\r\n\r\n    height: 100%;\r\n\r\n    display: block;\r\n\r\n    object-fit: cover;\r\n\r\n    transition:\r\n        transform .45s ease;\r\n}\r\n\r\n\r\n.pn-indeks-slide:hover\r\n.pn-indeks-image img {\r\n\r\n    transform:\r\n        scale(1.035);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   IMAGE OVERLAY\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-image::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    background:\r\n        linear-gradient(\r\n            to top,\r\n            rgba(0,0,0,.70),\r\n            rgba(0,0,0,.18) 58%,\r\n            rgba(0,0,0,0)\r\n        );\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-content {\r\n\r\n    position: absolute;\r\n\r\n    left: 0;\r\n\r\n    right: 0;\r\n\r\n    bottom: 0;\r\n\r\n    z-index: 2;\r\n\r\n    padding:\r\n        16px 14px 13px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CATEGORY LABEL\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-label {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    margin-bottom: 7px;\r\n\r\n    padding:\r\n        4px 7px;\r\n\r\n    border-radius: 7px;\r\n\r\n    background:\r\n        rgba(154,33,9,.92);\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1;\r\n\r\n    letter-spacing: .15px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-post-title {\r\n\r\n    margin: 0;\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.35;\r\n\r\n    display: -webkit-box;\r\n\r\n    -webkit-box-orient: vertical;\r\n\r\n    -webkit-line-clamp: 2;\r\n\r\n    overflow: hidden;\r\n\r\n    text-shadow:\r\n        0 1px 4px rgba(0,0,0,.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DATE\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-date {\r\n\r\n    margin-top: 6px;\r\n\r\n    color:\r\n        rgba(255,255,255,.82);\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NAVIGATION\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-navigation {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 5px;\r\n\r\n    margin-top: 10px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DOT\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-dot {\r\n\r\n    width: 6px;\r\n\r\n    height: 6px;\r\n\r\n    padding: 0;\r\n\r\n    border: none;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        rgba(154,33,9,.20);\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        all .2s ease;\r\n}\r\n\r\n\r\n.pn-indeks-dot.active {\r\n\r\n    width: 17px;\r\n\r\n    border-radius: 5px;\r\n\r\n    background:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOADING\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-loading {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    aspect-ratio: 16 \/ 9;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 10px;\r\n\r\n    background:\r\n        rgba(255,255,255,.45);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ERROR\r\n   ========================================================= *\/\r\n\r\n.pn-indeks-error {\r\n\r\n    display: none;\r\n\r\n    padding:\r\n        18px 10px;\r\n\r\n    text-align: center;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 10px;\r\n\r\n    line-height: 1.5;\r\n}\r\n\r\n\r\n.pn-indeks-error.show {\r\n\r\n    display: block;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .pn-sidebar-indeks-card {\r\n\r\n        padding: 15px;\r\n\r\n        border-radius: 15px;\r\n    }\r\n\r\n    .pn-sidebar-indeks-title {\r\n\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pn-sidebar-indeks-subtitle {\r\n\r\n        font-size: 10px;\r\n    }\r\n\r\n    .pn-indeks-post-title {\r\n\r\n        font-size: 12px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     CONTENT\r\n     ========================================================= -->\r\n\r\n<div\r\n    class=\"pn-sidebar-indeks\"\r\n    id=\"pn-sidebar-indeks\"\r\n>\r\n\r\n    <div class=\"pn-sidebar-indeks-card\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-sidebar-indeks-header\">\r\n\r\n\r\n            <!-- DOCUMENT \/ SERVICE ICON -->\r\n\r\n            <div class=\"pn-sidebar-indeks-icon\">\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n\r\n                    <rect\r\n                        x=\"4\"\r\n                        y=\"3\"\r\n                        width=\"16\"\r\n                        height=\"18\"\r\n                        rx=\"2\"\r\n                    ><\/rect>\r\n\r\n                    <path\r\n                        d=\"M8 8h8\"\r\n                    ><\/path>\r\n\r\n                    <path\r\n                        d=\"M8 12h8\"\r\n                    ><\/path>\r\n\r\n                    <path\r\n                        d=\"M8 16h5\"\r\n                    ><\/path>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- TITLE -->\r\n\r\n            <div>\r\n\r\n                <div class=\"pn-sidebar-indeks-title\">\r\n                    Indeks Pelayanan Publik\r\n                <\/div>\r\n\r\n                <div class=\"pn-sidebar-indeks-subtitle\">\r\n                    Informasi dan capaian pelayanan\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             SLIDER\r\n             ================================================= -->\r\n\r\n        <div\r\n            class=\"pn-indeks-slider\"\r\n            id=\"pn-indeks-slider\"\r\n        >\r\n\r\n            <div class=\"pn-indeks-loading\">\r\n                Memuat informasi...\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             DOT NAVIGATION\r\n             ================================================= -->\r\n\r\n        <div\r\n            class=\"pn-indeks-navigation\"\r\n            id=\"pn-indeks-navigation\"\r\n        ><\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             ERROR\r\n             ================================================= -->\r\n\r\n        <div\r\n            class=\"pn-indeks-error\"\r\n            id=\"pn-indeks-error\"\r\n        >\r\n            Belum ada informasi Indeks Pelayanan Publik.\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n    \"use strict\";\r\n\r\n\r\n    \/* =====================================================\r\n       CONFIGURATION\r\n       ===================================================== *\/\r\n\r\n    \/*\r\n     * SLUG KATEGORI WORDPRESS\r\n     *\r\n     * Pastikan slug kategori:\r\n     *\r\n     * indeks-pelayanan-publik\r\n     *\/\r\n\r\n    const PN_CATEGORY_SLUG =\r\n        \"indeks-pelayanan-publik\";\r\n\r\n\r\n    \/*\r\n     * JUMLAH POSTING\r\n     *\r\n     * SELALU 2\r\n     *\/\r\n\r\n    const PN_POST_COUNT = 2;\r\n\r\n\r\n    \/*\r\n     * WAKTU PERPINDAHAN SLIDE\r\n     *\r\n     * 5 DETIK\r\n     *\/\r\n\r\n    const PN_SLIDE_INTERVAL = 5000;\r\n\r\n\r\n    \/*\r\n     * WORDPRESS REST API\r\n     *\/\r\n\r\n    const PN_API =\r\n        window.location.origin +\r\n        \"\/wp-json\/wp\/v2\/\";\r\n\r\n\r\n    \/* =====================================================\r\n       ELEMENTS\r\n       ===================================================== *\/\r\n\r\n    const slider =\r\n        document.getElementById(\r\n            \"pn-indeks-slider\"\r\n        );\r\n\r\n\r\n    const navigation =\r\n        document.getElementById(\r\n            \"pn-indeks-navigation\"\r\n        );\r\n\r\n\r\n    const errorBox =\r\n        document.getElementById(\r\n            \"pn-indeks-error\"\r\n        );\r\n\r\n\r\n    if (\r\n        !slider ||\r\n        !navigation\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       STATE\r\n       ===================================================== *\/\r\n\r\n    let posts = [];\r\n\r\n    let currentSlide = 0;\r\n\r\n    let sliderTimer = null;\r\n\r\n\r\n    \/* =====================================================\r\n       ESCAPE HTML\r\n       ===================================================== *\/\r\n\r\n    function escapeHTML(value) {\r\n\r\n        const div =\r\n            document.createElement(\r\n                \"div\"\r\n            );\r\n\r\n\r\n        div.textContent =\r\n            value || \"\";\r\n\r\n\r\n        return div.innerHTML;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       FORMAT DATE\r\n       ===================================================== *\/\r\n\r\n    function formatDate(dateString) {\r\n\r\n        const date =\r\n            new Date(dateString);\r\n\r\n\r\n        return date.toLocaleDateString(\r\n            \"id-ID\",\r\n            {\r\n                day: \"numeric\",\r\n                month: \"long\",\r\n                year: \"numeric\"\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       GET FEATURED IMAGE\r\n       ===================================================== *\/\r\n\r\n    function getFeaturedImage(post) {\r\n\r\n        try {\r\n\r\n            const media =\r\n                post._embedded &&\r\n                post._embedded[\r\n                    \"wp:featuredmedia\"\r\n                ] &&\r\n                post._embedded[\r\n                    \"wp:featuredmedia\"\r\n                ][0];\r\n\r\n\r\n            if (\r\n                media &&\r\n                media.source_url\r\n            ) {\r\n\r\n                return media.source_url;\r\n\r\n            }\r\n\r\n        } catch (error) {\r\n\r\n            console.warn(\r\n                \"Featured image tidak ditemukan.\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * FALLBACK\r\n         *\/\r\n\r\n        return (\r\n            \"https:\/\/placehold.co\/\"\r\n            +\r\n            \"1200x675\/\"\r\n            +\r\n            \"9A2109\/\"\r\n            +\r\n            \"ffffff\"\r\n            +\r\n            \"?text=Indeks+Pelayanan+Publik\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       GET CATEGORY ID\r\n       ===================================================== *\/\r\n\r\n    async function getCategoryID() {\r\n\r\n        const url =\r\n            PN_API\r\n            +\r\n            \"categories\"\r\n            +\r\n            \"?slug=\"\r\n            +\r\n            encodeURIComponent(\r\n                PN_CATEGORY_SLUG\r\n            );\r\n\r\n\r\n        const response =\r\n            await fetch(url);\r\n\r\n\r\n        if (\r\n            !response.ok\r\n        ) {\r\n\r\n            throw new Error(\r\n                \"Gagal mengambil kategori.\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        const categories =\r\n            await response.json();\r\n\r\n\r\n        if (\r\n            !categories.length\r\n        ) {\r\n\r\n            throw new Error(\r\n                \"Kategori tidak ditemukan.\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        return categories[0].id;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       GET POSTS\r\n       ===================================================== *\/\r\n\r\n    async function getPosts(\r\n        categoryID\r\n    ) {\r\n\r\n        const url =\r\n            PN_API\r\n            +\r\n            \"posts\"\r\n            +\r\n            \"?categories=\"\r\n            +\r\n            categoryID\r\n            +\r\n            \"&per_page=\"\r\n            +\r\n            PN_POST_COUNT\r\n            +\r\n            \"&orderby=date\"\r\n            +\r\n            \"&order=desc\"\r\n            +\r\n            \"&_embed=1\";\r\n\r\n\r\n        const response =\r\n            await fetch(url);\r\n\r\n\r\n        if (\r\n            !response.ok\r\n        ) {\r\n\r\n            throw new Error(\r\n                \"Gagal mengambil posting.\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        return await response.json();\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       RENDER SLIDES\r\n       ===================================================== *\/\r\n\r\n    function renderSlides() {\r\n\r\n        if (\r\n            !posts.length\r\n        ) {\r\n\r\n            slider.innerHTML = \"\";\r\n\r\n            errorBox.classList.add(\r\n                \"show\"\r\n            );\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        errorBox.classList.remove(\r\n            \"show\"\r\n        );\r\n\r\n\r\n        slider.innerHTML =\r\n            posts.map(\r\n                function (\r\n                    post,\r\n                    index\r\n                ) {\r\n\r\n                    const title =\r\n                        post.title &&\r\n                        post.title.rendered\r\n                            ? post.title.rendered\r\n                            : \"Tanpa Judul\";\r\n\r\n\r\n                    const image =\r\n                        getFeaturedImage(\r\n                            post\r\n                        );\r\n\r\n\r\n                    const date =\r\n                        formatDate(\r\n                            post.date\r\n                        );\r\n\r\n\r\n                    return `\r\n\r\n                        <a\r\n                            href=\"${escapeHTML(\r\n                                post.link\r\n                            )}\"\r\n                            class=\"\r\n                                pn-indeks-slide\r\n                                ${\r\n                                    index === 0\r\n                                        ? \"active\"\r\n                                        : \"\"\r\n                                }\r\n                            \"\r\n                            aria-label=\"${escapeHTML(\r\n                                title\r\n                            )}\"\r\n                        >\r\n\r\n                            <div\r\n                                class=\"pn-indeks-image\"\r\n                            >\r\n\r\n                                <img decoding=\"async\"\r\n                                    src=\"${escapeHTML(\r\n                                        image\r\n                                    )}\"\r\n                                    alt=\"${escapeHTML(\r\n                                        title\r\n                                    )}\"\r\n                                    loading=\"${\r\n                                        index === 0\r\n                                            ? \"eager\"\r\n                                            : \"lazy\"\r\n                                    }\"\r\n                                >\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div\r\n                                class=\"pn-indeks-content\"\r\n                            >\r\n\r\n                                <span\r\n                                    class=\"pn-indeks-label\"\r\n                                >\r\n                                    INDEKS PELAYANAN PUBLIK\r\n                                <\/span>\r\n\r\n\r\n                                <h4\r\n                                    class=\"pn-indeks-post-title\"\r\n                                >\r\n                                    ${title}\r\n                                <\/h4>\r\n\r\n\r\n                                <div\r\n                                    class=\"pn-indeks-date\"\r\n                                >\r\n                                    ${date}\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/a>\r\n\r\n                    `;\r\n\r\n                }\r\n            ).join(\"\");\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       RENDER DOTS\r\n       ===================================================== *\/\r\n\r\n    function renderNavigation() {\r\n\r\n        if (\r\n            posts.length <= 1\r\n        ) {\r\n\r\n            navigation.innerHTML =\r\n                \"\";\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        navigation.innerHTML =\r\n            posts.map(\r\n                function (\r\n                    post,\r\n                    index\r\n                ) {\r\n\r\n                    return `\r\n\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"\r\n                                pn-indeks-dot\r\n                                ${\r\n                                    index === 0\r\n                                        ? \"active\"\r\n                                        : \"\"\r\n                                }\r\n                            \"\r\n                            data-slide=\"${index}\"\r\n                            aria-label=\"\r\n                                Tampilkan posting ${\r\n                                    index + 1\r\n                                }\r\n                            \"\r\n                        ><\/button>\r\n\r\n                    `;\r\n\r\n                }\r\n            ).join(\"\");\r\n\r\n\r\n        navigation\r\n            .querySelectorAll(\r\n                \".pn-indeks-dot\"\r\n            )\r\n            .forEach(\r\n                function (dot) {\r\n\r\n                    dot.addEventListener(\r\n                        \"click\",\r\n                        function () {\r\n\r\n                            const index =\r\n                                parseInt(\r\n                                    dot.dataset.slide,\r\n                                    10\r\n                                );\r\n\r\n\r\n                            showSlide(index);\r\n\r\n                            restartSlider();\r\n\r\n                        }\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       SHOW SLIDE\r\n       ===================================================== *\/\r\n\r\n    function showSlide(index) {\r\n\r\n        const slides =\r\n            slider.querySelectorAll(\r\n                \".pn-indeks-slide\"\r\n            );\r\n\r\n\r\n        const dots =\r\n            navigation.querySelectorAll(\r\n                \".pn-indeks-dot\"\r\n            );\r\n\r\n\r\n        if (\r\n            !slides.length\r\n        ) {\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        currentSlide =\r\n            (\r\n                index +\r\n                slides.length\r\n            )\r\n            %\r\n            slides.length;\r\n\r\n\r\n        slides.forEach(\r\n            function (\r\n                slide,\r\n                slideIndex\r\n            ) {\r\n\r\n                slide.classList.toggle(\r\n                    \"active\",\r\n                    slideIndex === currentSlide\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        dots.forEach(\r\n            function (\r\n                dot,\r\n                dotIndex\r\n            ) {\r\n\r\n                dot.classList.toggle(\r\n                    \"active\",\r\n                    dotIndex === currentSlide\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       START AUTO SLIDER\r\n       ===================================================== *\/\r\n\r\n    function startSlider() {\r\n\r\n        \/*\r\n         * Tidak perlu auto slider jika\r\n         * posting kurang dari 2.\r\n         *\/\r\n\r\n        if (\r\n            posts.length <= 1\r\n        ) {\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        sliderTimer =\r\n            setInterval(\r\n                function () {\r\n\r\n                    showSlide(\r\n                        currentSlide + 1\r\n                    );\r\n\r\n                },\r\n                PN_SLIDE_INTERVAL\r\n            );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       RESTART SLIDER\r\n       ===================================================== *\/\r\n\r\n    function restartSlider() {\r\n\r\n        if (\r\n            sliderTimer\r\n        ) {\r\n\r\n            clearInterval(\r\n                sliderTimer\r\n            );\r\n\r\n        }\r\n\r\n\r\n        startSlider();\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       PAUSE SAAT MOUSE DI ATAS SLIDER\r\n       ===================================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"mouseenter\",\r\n        function () {\r\n\r\n            if (\r\n                sliderTimer\r\n            ) {\r\n\r\n                clearInterval(\r\n                    sliderTimer\r\n                );\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       LANJUTKAN SAAT MOUSE KELUAR\r\n       ===================================================== *\/\r\n\r\n    slider.addEventListener(\r\n        \"mouseleave\",\r\n        function () {\r\n\r\n            restartSlider();\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       INITIALIZE\r\n       ===================================================== *\/\r\n\r\n    async function init() {\r\n\r\n        try {\r\n\r\n            \/*\r\n             * Ambil ID kategori\r\n             *\/\r\n\r\n            const categoryID =\r\n                await getCategoryID();\r\n\r\n\r\n            \/*\r\n             * Ambil 2 posting terbaru\r\n             *\/\r\n\r\n            posts =\r\n                await getPosts(\r\n                    categoryID\r\n                );\r\n\r\n\r\n            \/*\r\n             * Render\r\n             *\/\r\n\r\n            renderSlides();\r\n\r\n            renderNavigation();\r\n\r\n\r\n            \/*\r\n             * Mulai slider\r\n             *\/\r\n\r\n            startSlider();\r\n\r\n\r\n        } catch (error) {\r\n\r\n            console.error(\r\n                \"PN Indeks Pelayanan Publik:\",\r\n                error\r\n            );\r\n\r\n\r\n            slider.innerHTML =\r\n                \"\";\r\n\r\n\r\n            errorBox.textContent =\r\n                \"Data Indeks Pelayanan Publik belum dapat dimuat.\";\r\n\r\n\r\n            errorBox.classList.add(\r\n                \"show\"\r\n            );\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       START\r\n       ===================================================== *\/\r\n\r\n    init();\r\n\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<\/div>\n\t\t<div class=\"elementor-element elementor-element-28e1de7 e-con-full e-flex e-con e-child\" data-id=\"28e1de7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b770ad elementor-widget elementor-widget-html\" data-id=\"5b770ad\" 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<!-- =========================================================\n     SIDEBAR 05 \u2014 PROFIL UNGGULAN\n     STYLE  : iOS GLASS\n     SOURCE : WORDPRESS REST API\n     DISPLAY: 2 POSTING TERBARU\n     CATEGORY: PROFIL UNGGULAN\n     FEATURE IMAGE: 4:5 \u2014 LEBIH PANJANG\n     ========================================================= -->\n\n<style>\n\n\/* =========================================================\n   ROOT\n   ========================================================= *\/\n\n.pn-sidebar-profil {\n\n    --pn-red: #9A2109;\n    --pn-red-dark: #7C1A08;\n\n    --pn-text: #1d1d1f;\n    --pn-text-soft: #6e6e73;\n\n    --pn-border: rgba(255,255,255,.78);\n\n    --pn-shadow:\n        0 8px 25px rgba(0,0,0,.055);\n\n    width: 100%;\n\n    font-family:\n        -apple-system,\n        BlinkMacSystemFont,\n        \"SF Pro Display\",\n        \"SF Pro Text\",\n        \"Segoe UI\",\n        Roboto,\n        Helvetica,\n        Arial,\n        sans-serif;\n\n}\n\n\n\/* =========================================================\n   GLASS CARD\n   ========================================================= *\/\n\n.pn-sidebar-profil-card {\n\n    width: 100%;\n\n    padding: 17px;\n\n    box-sizing: border-box;\n\n    border-radius: 17px;\n\n    border:\n        1px solid var(--pn-border);\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.76),\n            rgba(255,255,255,.55)\n        );\n\n    box-shadow:\n        var(--pn-shadow);\n\n    backdrop-filter:\n        blur(20px)\n        saturate(120%);\n\n    -webkit-backdrop-filter:\n        blur(20px)\n        saturate(120%);\n\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.pn-sidebar-profil-header {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 10px;\n\n    margin-bottom: 14px;\n\n}\n\n\n\/* =========================================================\n   ICON\n   ========================================================= *\/\n\n.pn-sidebar-profil-icon {\n\n    width: 34px;\n\n    height: 34px;\n\n    flex: 0 0 34px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    border-radius: 10px;\n\n    background:\n        rgba(154,33,9,.08);\n\n    border:\n        1px solid rgba(154,33,9,.10);\n\n    color:\n        var(--pn-red);\n\n}\n\n\n.pn-sidebar-profil-icon svg {\n\n    width: 18px;\n\n    height: 18px;\n\n    display: block;\n\n    fill: none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:\n        1.7;\n\n    stroke-linecap:\n        round;\n\n    stroke-linejoin:\n        round;\n\n}\n\n\n\/* =========================================================\n   TITLE\n   ========================================================= *\/\n\n.pn-sidebar-profil-title {\n\n    margin: 0;\n\n    color:\n        var(--pn-text);\n\n    font-size:\n        14px;\n\n    font-weight:\n        700;\n\n    line-height:\n        1.3;\n\n}\n\n\n\/* =========================================================\n   SUBTITLE\n   ========================================================= *\/\n\n.pn-sidebar-profil-subtitle {\n\n    margin:\n        2px 0 0;\n\n    color:\n        var(--pn-text-soft);\n\n    font-size:\n        11px;\n\n    line-height:\n        1.4;\n\n}\n\n\n\/* =========================================================\n   SLIDER\n   ========================================================= *\/\n\n.pn-profil-slider {\n\n    position:\n        relative;\n\n    width:\n        100%;\n\n    overflow:\n        hidden;\n\n    border-radius:\n        14px;\n\n    background:\n        #eeeeef;\n\n}\n\n\n\/* =========================================================\n   SLIDE\n   ========================================================= *\/\n\n.pn-profil-slide {\n\n    position:\n        relative;\n\n    display:\n        none;\n\n    width:\n        100%;\n\n    text-decoration:\n        none !important;\n\n    color:\n        inherit;\n\n    overflow:\n        hidden;\n\n    border-radius:\n        14px;\n\n}\n\n\n.pn-profil-slide.active {\n\n    display:\n        block;\n\n    animation:\n        pnProfilFade .35s ease;\n\n}\n\n\n\/* =========================================================\n   SLIDE ANIMATION\n   ========================================================= *\/\n\n@keyframes pnProfilFade {\n\n    from {\n\n        opacity:\n            0;\n\n        transform:\n            translateX(8px);\n\n    }\n\n    to {\n\n        opacity:\n            1;\n\n        transform:\n            translateX(0);\n\n    }\n\n}\n\n\n\/* =========================================================\n   FEATURE IMAGE\n   LEBIH PANJANG \u2014 4:5\n   ========================================================= *\/\n\n.pn-profil-image {\n\n    position:\n        relative;\n\n    width:\n        100%;\n\n    \/*\n     * Sebelumnya 4:3.\n     * Sekarang 4:5 agar gambar lebih tinggi\n     * dan objek pada foto terlihat lebih jelas.\n     *\/\n\n    aspect-ratio:\n        4 \/ 5;\n\n    overflow:\n        hidden;\n\n    border-radius:\n        14px;\n\n    background:\n        #eeeeef;\n\n}\n\n\n\/* =========================================================\n   IMAGE\n   ========================================================= *\/\n\n.pn-profil-image img {\n\n    width:\n        100%;\n\n    height:\n        100%;\n\n    display:\n        block;\n\n    object-fit:\n        cover;\n\n    object-position:\n        center center;\n\n    transition:\n        transform .45s ease;\n\n}\n\n\n\/* =========================================================\n   IMAGE HOVER\n   ========================================================= *\/\n\n.pn-profil-slide:hover\n.pn-profil-image img {\n\n    transform:\n        scale(1.035);\n\n}\n\n\n\/* =========================================================\n   IMAGE OVERLAY\n   ========================================================= *\/\n\n.pn-profil-image::after {\n\n    content:\n        \"\";\n\n    position:\n        absolute;\n\n    inset:\n        0;\n\n    background:\n        linear-gradient(\n            to top,\n            rgba(0,0,0,.72),\n            rgba(0,0,0,.18) 60%,\n            rgba(0,0,0,0)\n        );\n\n    pointer-events:\n        none;\n\n}\n\n\n\/* =========================================================\n   CONTENT\n   ========================================================= *\/\n\n.pn-profil-content {\n\n    position:\n        absolute;\n\n    left:\n        0;\n\n    right:\n        0;\n\n    bottom:\n        0;\n\n    z-index:\n        2;\n\n    padding:\n        16px 14px 13px;\n\n}\n\n\n\/* =========================================================\n   LABEL\n   ========================================================= *\/\n\n.pn-profil-label {\n\n    display:\n        inline-flex;\n\n    align-items:\n        center;\n\n    margin-bottom:\n        7px;\n\n    padding:\n        4px 7px;\n\n    border-radius:\n        7px;\n\n    background:\n        rgba(154,33,9,.92);\n\n    color:\n        #ffffff;\n\n    font-size:\n        8px;\n\n    font-weight:\n        700;\n\n    line-height:\n        1;\n\n    letter-spacing:\n        .15px;\n\n}\n\n\n\/* =========================================================\n   POST TITLE\n   ========================================================= *\/\n\n.pn-profil-post-title {\n\n    margin:\n        0;\n\n    color:\n        #ffffff;\n\n    font-size:\n        13px;\n\n    font-weight:\n        700;\n\n    line-height:\n        1.35;\n\n    display:\n        -webkit-box;\n\n    -webkit-box-orient:\n        vertical;\n\n    -webkit-line-clamp:\n        2;\n\n    overflow:\n        hidden;\n\n    text-shadow:\n        0 1px 4px rgba(0,0,0,.25);\n\n}\n\n\n\/* =========================================================\n   DATE\n   ========================================================= *\/\n\n.pn-profil-date {\n\n    margin-top:\n        6px;\n\n    color:\n        rgba(255,255,255,.82);\n\n    font-size:\n        9px;\n\n    line-height:\n        1.3;\n\n}\n\n\n\/* =========================================================\n   DOT NAVIGATION\n   ========================================================= *\/\n\n.pn-profil-navigation {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    gap:\n        5px;\n\n    margin-top:\n        10px;\n\n}\n\n\n.pn-profil-dot {\n\n    width:\n        6px;\n\n    height:\n        6px;\n\n    padding:\n        0;\n\n    border:\n        none;\n\n    border-radius:\n        50%;\n\n    background:\n        rgba(154,33,9,.20);\n\n    cursor:\n        pointer;\n\n    transition:\n        all .2s ease;\n\n}\n\n\n.pn-profil-dot.active {\n\n    width:\n        17px;\n\n    border-radius:\n        5px;\n\n    background:\n        var(--pn-red);\n\n}\n\n\n\/* =========================================================\n   LOADING\n   ========================================================= *\/\n\n.pn-profil-loading {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    \/*\n     * Samakan dengan feature image 4:5\n     *\/\n\n    aspect-ratio:\n        4 \/ 5;\n\n    color:\n        var(--pn-text-soft);\n\n    font-size:\n        10px;\n\n    background:\n        rgba(255,255,255,.45);\n\n}\n\n\n\/* =========================================================\n   ERROR\n   ========================================================= *\/\n\n.pn-profil-error {\n\n    display:\n        none;\n\n    padding:\n        18px 10px;\n\n    text-align:\n        center;\n\n    color:\n        var(--pn-text-soft);\n\n    font-size:\n        10px;\n\n    line-height:\n        1.5;\n\n}\n\n\n.pn-profil-error.show {\n\n    display:\n        block;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 480px) {\n\n    .pn-sidebar-profil-card {\n\n        padding:\n            15px;\n\n        border-radius:\n            15px;\n\n    }\n\n\n    .pn-sidebar-profil-title {\n\n        font-size:\n            13px;\n\n    }\n\n\n    .pn-sidebar-profil-subtitle {\n\n        font-size:\n            10px;\n\n    }\n\n\n    \/*\n     * Tetap 4:5 pada mobile agar foto\n     * tetap terlihat lebih panjang.\n     *\/\n\n    .pn-profil-image {\n\n        aspect-ratio:\n            4 \/ 5;\n\n    }\n\n\n    .pn-profil-loading {\n\n        aspect-ratio:\n            4 \/ 5;\n\n    }\n\n\n    .pn-profil-post-title {\n\n        font-size:\n            12px;\n\n    }\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     CONTENT\n     ========================================================= -->\n\n<div\n    class=\"pn-sidebar-profil\"\n    id=\"pn-sidebar-profil\"\n>\n\n    <div class=\"pn-sidebar-profil-card\">\n\n\n        <!-- =================================================\n             HEADER\n             ================================================= -->\n\n        <div class=\"pn-sidebar-profil-header\">\n\n\n            <!-- PROFILE ICON -->\n\n            <div class=\"pn-sidebar-profil-icon\">\n\n                <svg\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n\n                    <!-- Kepala -->\n\n                    <circle\n                        cx=\"12\"\n                        cy=\"8\"\n                        r=\"3\"\n                    ><\/circle>\n\n\n                    <!-- Bahu \/ badan -->\n\n                    <path\n                        d=\"M5 21c.6-4.2 3.1-6.5 7-6.5s6.4 2.3 7 6.5\"\n                    ><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <!-- TITLE -->\n\n            <div>\n\n                <div class=\"pn-sidebar-profil-title\">\n                    Profil Unggulan\n                <\/div>\n\n                <div class=\"pn-sidebar-profil-subtitle\">\n                    Informasi dan profil unggulan\n                <\/div>\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- =================================================\n             SLIDER\n             ================================================= -->\n\n        <div\n            class=\"pn-profil-slider\"\n            id=\"pn-profil-slider\"\n        >\n\n            <div class=\"pn-profil-loading\">\n                Memuat profil...\n            <\/div>\n\n        <\/div>\n\n\n        <!-- =================================================\n             DOT NAVIGATION\n             ================================================= -->\n\n        <div\n            class=\"pn-profil-navigation\"\n            id=\"pn-profil-navigation\"\n        ><\/div>\n\n\n        <!-- =================================================\n             ERROR\n             ================================================= -->\n\n        <div\n            class=\"pn-profil-error\"\n            id=\"pn-profil-error\"\n        >\n            Belum ada posting Profil Unggulan.\n        <\/div>\n\n\n    <\/div>\n\n<\/div>\n\n\n<script>\n\n(function () {\n\n    \"use strict\";\n\n\n    \/* =====================================================\n       CONFIGURATION\n       ===================================================== *\/\n\n    \/*\n     * SLUG KATEGORI\n     *\n     * Pastikan slug kategori WordPress:\n     *\n     * profil-unggulan\n     *\/\n\n    const PN_CATEGORY_SLUG =\n        \"profil-unggulan\";\n\n\n    \/*\n     * HANYA 2 POSTING TERBARU\n     *\/\n\n    const PN_POST_COUNT =\n        2;\n\n\n    \/*\n     * PERPINDAHAN SLIDER\n     *\n     * 5 DETIK\n     *\/\n\n    const PN_SLIDE_INTERVAL =\n        5000;\n\n\n    \/*\n     * WORDPRESS REST API\n     *\/\n\n    const PN_API =\n        window.location.origin +\n        \"\/wp-json\/wp\/v2\/\";\n\n\n    \/* =====================================================\n       ELEMENT\n       ===================================================== *\/\n\n    const slider =\n        document.getElementById(\n            \"pn-profil-slider\"\n        );\n\n\n    const navigation =\n        document.getElementById(\n            \"pn-profil-navigation\"\n        );\n\n\n    const errorBox =\n        document.getElementById(\n            \"pn-profil-error\"\n        );\n\n\n    if (\n        !slider ||\n        !navigation\n    ) {\n\n        return;\n\n    }\n\n\n    \/* =====================================================\n       STATE\n       ===================================================== *\/\n\n    let posts = [];\n\n    let currentSlide = 0;\n\n    let sliderTimer = null;\n\n\n    \/* =====================================================\n       ESCAPE HTML\n       ===================================================== *\/\n\n    function escapeHTML(value) {\n\n        const div =\n            document.createElement(\n                \"div\"\n            );\n\n\n        div.textContent =\n            value || \"\";\n\n\n        return div.innerHTML;\n\n    }\n\n\n    \/* =====================================================\n       FORMAT DATE\n       ===================================================== *\/\n\n    function formatDate(dateString) {\n\n        const date =\n            new Date(dateString);\n\n\n        return date.toLocaleDateString(\n            \"id-ID\",\n            {\n                day:\n                    \"numeric\",\n\n                month:\n                    \"long\",\n\n                year:\n                    \"numeric\"\n            }\n        );\n\n    }\n\n\n    \/* =====================================================\n       FEATURED IMAGE\n       ===================================================== *\/\n\n    function getFeaturedImage(post) {\n\n        try {\n\n            const media =\n                post._embedded &&\n                post._embedded[\n                    \"wp:featuredmedia\"\n                ] &&\n                post._embedded[\n                    \"wp:featuredmedia\"\n                ][0];\n\n\n            if (\n                media &&\n                media.source_url\n            ) {\n\n                return media.source_url;\n\n            }\n\n        } catch (error) {\n\n            console.warn(\n                \"Featured image tidak ditemukan.\"\n            );\n\n        }\n\n\n        \/*\n         * FALLBACK IMAGE\n         *\/\n\n        return (\n            \"https:\/\/placehold.co\/\"\n            +\n            \"1200x1500\/\"\n            +\n            \"9A2109\/\"\n            +\n            \"ffffff\"\n            +\n            \"?text=Profil+Unggulan\"\n        );\n\n    }\n\n\n    \/* =====================================================\n       GET CATEGORY ID\n       ===================================================== *\/\n\n    async function getCategoryID() {\n\n        const url =\n            PN_API\n            +\n            \"categories\"\n            +\n            \"?slug=\"\n            +\n            encodeURIComponent(\n                PN_CATEGORY_SLUG\n            );\n\n\n        const response =\n            await fetch(url);\n\n\n        if (\n            !response.ok\n        ) {\n\n            throw new Error(\n                \"Gagal mengambil kategori Profil Unggulan.\"\n            );\n\n        }\n\n\n        const categories =\n            await response.json();\n\n\n        if (\n            !categories.length\n        ) {\n\n            throw new Error(\n                \"Kategori Profil Unggulan tidak ditemukan.\"\n            );\n\n        }\n\n\n        return categories[0].id;\n\n    }\n\n\n    \/* =====================================================\n       GET POSTS\n       ===================================================== *\/\n\n    async function getPosts(\n        categoryID\n    ) {\n\n        const url =\n            PN_API\n            +\n            \"posts\"\n            +\n            \"?categories=\"\n            +\n            categoryID\n            +\n            \"&per_page=\"\n            +\n            PN_POST_COUNT\n            +\n            \"&orderby=date\"\n            +\n            \"&order=desc\"\n            +\n            \"&_embed=1\";\n\n\n        const response =\n            await fetch(url);\n\n\n        if (\n            !response.ok\n        ) {\n\n            throw new Error(\n                \"Gagal mengambil posting Profil Unggulan.\"\n            );\n\n        }\n\n\n        return await response.json();\n\n    }\n\n\n    \/* =====================================================\n       RENDER SLIDES\n       ===================================================== *\/\n\n    function renderSlides() {\n\n        if (\n            !posts.length\n        ) {\n\n            slider.innerHTML =\n                \"\";\n\n            errorBox.classList.add(\n                \"show\"\n            );\n\n            return;\n\n        }\n\n\n        errorBox.classList.remove(\n            \"show\"\n        );\n\n\n        slider.innerHTML =\n            posts.map(\n                function (\n                    post,\n                    index\n                ) {\n\n                    const title =\n                        post.title &&\n                        post.title.rendered\n                            ? post.title.rendered\n                            : \"Tanpa Judul\";\n\n\n                    const image =\n                        getFeaturedImage(\n                            post\n                        );\n\n\n                    const date =\n                        formatDate(\n                            post.date\n                        );\n\n\n                    return `\n\n                        <a\n                            href=\"${escapeHTML(\n                                post.link\n                            )}\"\n                            class=\"\n                                pn-profil-slide\n                                ${\n                                    index === 0\n                                        ? \"active\"\n                                        : \"\"\n                                }\n                            \"\n                            aria-label=\"${escapeHTML(\n                                title\n                            )}\"\n                        >\n\n                            <div\n                                class=\"pn-profil-image\"\n                            >\n\n                                <img decoding=\"async\"\n                                    src=\"${escapeHTML(\n                                        image\n                                    )}\"\n                                    alt=\"${escapeHTML(\n                                        title\n                                    )}\"\n                                    loading=\"${\n                                        index === 0\n                                            ? \"eager\"\n                                            : \"lazy\"\n                                    }\"\n                                >\n\n                            <\/div>\n\n\n                            <div\n                                class=\"pn-profil-content\"\n                            >\n\n                                <span\n                                    class=\"pn-profil-label\"\n                                >\n                                    PROFIL UNGGULAN\n                                <\/span>\n\n\n                                <h4\n                                    class=\"pn-profil-post-title\"\n                                >\n                                    ${title}\n                                <\/h4>\n\n\n                                <div\n                                    class=\"pn-profil-date\"\n                                >\n                                    ${date}\n                                <\/div>\n\n                            <\/div>\n\n                        <\/a>\n\n                    `;\n\n                }\n            ).join(\"\");\n\n    }\n\n\n    \/* =====================================================\n       RENDER DOT NAVIGATION\n       ===================================================== *\/\n\n    function renderNavigation() {\n\n        if (\n            posts.length <= 1\n        ) {\n\n            navigation.innerHTML =\n                \"\";\n\n            return;\n\n        }\n\n\n        navigation.innerHTML =\n            posts.map(\n                function (\n                    post,\n                    index\n                ) {\n\n                    return `\n\n                        <button\n                            type=\"button\"\n                            class=\"\n                                pn-profil-dot\n                                ${\n                                    index === 0\n                                        ? \"active\"\n                                        : \"\"\n                                }\n                            \"\n                            data-slide=\"${index}\"\n                            aria-label=\"\n                                Tampilkan profil ${\n                                    index + 1\n                                }\n                            \"\n                        ><\/button>\n\n                    `;\n\n                }\n            ).join(\"\");\n\n\n        navigation\n            .querySelectorAll(\n                \".pn-profil-dot\"\n            )\n            .forEach(\n                function (dot) {\n\n                    dot.addEventListener(\n                        \"click\",\n                        function () {\n\n                            const index =\n                                parseInt(\n                                    dot.dataset.slide,\n                                    10\n                                );\n\n\n                            showSlide(index);\n\n                            restartSlider();\n\n                        }\n                    );\n\n                }\n            );\n\n    }\n\n\n    \/* =====================================================\n       SHOW SLIDE\n       ===================================================== *\/\n\n    function showSlide(index) {\n\n        const slides =\n            slider.querySelectorAll(\n                \".pn-profil-slide\"\n            );\n\n\n        const dots =\n            navigation.querySelectorAll(\n                \".pn-profil-dot\"\n            );\n\n\n        if (\n            !slides.length\n        ) {\n\n            return;\n\n        }\n\n\n        currentSlide =\n            (\n                index +\n                slides.length\n            )\n            %\n            slides.length;\n\n\n        slides.forEach(\n            function (\n                slide,\n                slideIndex\n            ) {\n\n                slide.classList.toggle(\n                    \"active\",\n                    slideIndex === currentSlide\n                );\n\n            }\n        );\n\n\n        dots.forEach(\n            function (\n                dot,\n                dotIndex\n            ) {\n\n                dot.classList.toggle(\n                    \"active\",\n                    dotIndex === currentSlide\n                );\n\n            }\n        );\n\n    }\n\n\n    \/* =====================================================\n       START SLIDER\n       ===================================================== *\/\n\n    function startSlider() {\n\n        if (\n            posts.length <= 1\n        ) {\n\n            return;\n\n        }\n\n\n        sliderTimer =\n            setInterval(\n                function () {\n\n                    showSlide(\n                        currentSlide + 1\n                    );\n\n                },\n                PN_SLIDE_INTERVAL\n            );\n\n    }\n\n\n    \/* =====================================================\n       RESTART SLIDER\n       ===================================================== *\/\n\n    function restartSlider() {\n\n        if (\n            sliderTimer\n        ) {\n\n            clearInterval(\n                sliderTimer\n            );\n\n        }\n\n\n        startSlider();\n\n    }\n\n\n    \/* =====================================================\n       PAUSE ON HOVER\n       ===================================================== *\/\n\n    slider.addEventListener(\n        \"mouseenter\",\n        function () {\n\n            if (\n                sliderTimer\n            ) {\n\n                clearInterval(\n                    sliderTimer\n                );\n\n            }\n\n        }\n    );\n\n\n    \/* =====================================================\n       RESUME ON MOUSE LEAVE\n       ===================================================== *\/\n\n    slider.addEventListener(\n        \"mouseleave\",\n        function () {\n\n            restartSlider();\n\n        }\n    );\n\n\n    \/* =====================================================\n       INITIALIZE\n       ===================================================== *\/\n\n    async function init() {\n\n        try {\n\n            \/*\n             * 1. Cari ID kategori\n             *\/\n\n            const categoryID =\n                await getCategoryID();\n\n\n            \/*\n             * 2. Ambil 2 posting terbaru\n             *\/\n\n            posts =\n                await getPosts(\n                    categoryID\n                );\n\n\n            \/*\n             * 3. Tampilkan slider\n             *\/\n\n            renderSlides();\n\n\n            \/*\n             * 4. Tampilkan dot\n             *\/\n\n            renderNavigation();\n\n\n            \/*\n             * 5. Jalankan auto slider\n             *\/\n\n            startSlider();\n\n        }\n        catch (error) {\n\n            console.error(\n                \"PN Profil Unggulan:\",\n                error\n            );\n\n\n            slider.innerHTML =\n                \"\";\n\n\n            errorBox.textContent =\n                \"Data Profil Unggulan belum dapat dimuat.\";\n\n\n            errorBox.classList.add(\n                \"show\"\n            );\n\n        }\n\n    }\n\n\n    \/* =====================================================\n       RUN\n       ===================================================== *\/\n\n    init();\n\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b1f2402 e-con-full e-flex e-con e-child\" data-id=\"b1f2402\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11d2d25 elementor-widget elementor-widget-html\" data-id=\"11d2d25\" 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<!-- =========================================================\r\n     SIDEBAR 06 \u2014 TAUTAN WEBSITE\r\n     STYLE  : iOS GLASS\r\n     JUMLAH : 3 TAUTAN\r\n     \r\n     01. MAHKAMAH AGUNG RI\r\n     02. DIREKTORAT JENDERAL BADAN PERADILAN UMUM\r\n     03. PENGADILAN TINGGI BANDA ACEH\r\n     ========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-tautan {\r\n\r\n    --pn-red: #9A2109;\r\n    --pn-red-dark: #7C1A08;\r\n\r\n    --pn-text: #1d1d1f;\r\n    --pn-text-soft: #6e6e73;\r\n\r\n    --pn-border: rgba(255,255,255,.78);\r\n\r\n    --pn-shadow:\r\n        0 8px 25px rgba(0,0,0,.055);\r\n\r\n    width: 100%;\r\n\r\n    font-family:\r\n        -apple-system,\r\n        BlinkMacSystemFont,\r\n        \"SF Pro Display\",\r\n        \"SF Pro Text\",\r\n        \"Segoe UI\",\r\n        Roboto,\r\n        Helvetica,\r\n        Arial,\r\n        sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GLASS CARD\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-tautan-card {\r\n\r\n    width: 100%;\r\n\r\n    padding: 17px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border-radius: 17px;\r\n\r\n    border:\r\n        1px solid var(--pn-border);\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(255,255,255,.76),\r\n            rgba(255,255,255,.55)\r\n        );\r\n\r\n    box-shadow:\r\n        var(--pn-shadow);\r\n\r\n    backdrop-filter:\r\n        blur(20px)\r\n        saturate(120%);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(20px)\r\n        saturate(120%);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-tautan-header {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    margin-bottom: 14px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER ICON\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-tautan-icon {\r\n\r\n    width: 34px;\r\n    height: 34px;\r\n\r\n    flex: 0 0 34px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    border:\r\n        1px solid rgba(154,33,9,.10);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n.pn-sidebar-tautan-icon svg {\r\n\r\n    width: 18px;\r\n    height: 18px;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.7;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n   ========================================================= *\/\r\n\r\n.pn-sidebar-tautan-title {\r\n\r\n    margin: 0;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n.pn-sidebar-tautan-subtitle {\r\n\r\n    margin: 2px 0 0;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 11px;\r\n\r\n    line-height: 1.4;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LINK LIST\r\n   ========================================================= *\/\r\n\r\n.pn-tautan-list {\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    gap: 7px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LINK ITEM\r\n   ========================================================= *\/\r\n\r\n.pn-tautan-link {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    width: 100%;\r\n\r\n    min-height: 48px;\r\n\r\n    padding:\r\n        8px 9px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border-radius: 12px;\r\n\r\n    text-decoration: none !important;\r\n\r\n    background:\r\n        rgba(255,255,255,.48);\r\n\r\n    border:\r\n        1px solid rgba(0,0,0,.045);\r\n\r\n    transition:\r\n        background .2s ease,\r\n        border-color .2s ease,\r\n        transform .2s ease;\r\n}\r\n\r\n\r\n.pn-tautan-link:hover {\r\n\r\n    background:\r\n        rgba(255,255,255,.82);\r\n\r\n    border-color:\r\n        rgba(154,33,9,.16);\r\n\r\n    transform:\r\n        translateX(2px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LINK ICON\r\n   ========================================================= *\/\r\n\r\n.pn-tautan-link-icon {\r\n\r\n    width: 31px;\r\n    height: 31px;\r\n\r\n    flex: 0 0 31px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    border-radius: 9px;\r\n\r\n    background:\r\n        rgba(154,33,9,.075);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n.pn-tautan-link-icon svg {\r\n\r\n    width: 16px;\r\n    height: 16px;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.7;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TEXT\r\n   ========================================================= *\/\r\n\r\n.pn-tautan-link-content {\r\n\r\n    min-width: 0;\r\n\r\n    flex: 1;\r\n}\r\n\r\n\r\n.pn-tautan-link-name {\r\n\r\n    display: block;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 11px;\r\n\r\n    font-weight: 650;\r\n\r\n    line-height: 1.35;\r\n}\r\n\r\n\r\n.pn-tautan-link-url {\r\n\r\n    display: block;\r\n\r\n    margin-top: 2px;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 8px;\r\n\r\n    line-height: 1.3;\r\n\r\n    white-space: nowrap;\r\n\r\n    overflow: hidden;\r\n\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARROW\r\n   ========================================================= *\/\r\n\r\n.pn-tautan-arrow {\r\n\r\n    width: 22px;\r\n    height: 22px;\r\n\r\n    flex: 0 0 22px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    color:\r\n        rgba(29,29,31,.38);\r\n\r\n    transition:\r\n        color .2s ease,\r\n        transform .2s ease;\r\n}\r\n\r\n\r\n.pn-tautan-arrow svg {\r\n\r\n    width: 14px;\r\n    height: 14px;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.8;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n.pn-tautan-link:hover\r\n.pn-tautan-arrow {\r\n\r\n    color:\r\n        var(--pn-red);\r\n\r\n    transform:\r\n        translateX(2px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FOOTER NOTE\r\n   ========================================================= *\/\r\n\r\n.pn-tautan-note {\r\n\r\n    margin-top: 11px;\r\n\r\n    padding:\r\n        9px 10px;\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        rgba(154,33,9,.045);\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.5;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .pn-sidebar-tautan-card {\r\n\r\n        padding: 15px;\r\n\r\n        border-radius: 15px;\r\n    }\r\n\r\n    .pn-sidebar-tautan-title {\r\n\r\n        font-size: 13px;\r\n    }\r\n\r\n    .pn-sidebar-tautan-subtitle {\r\n\r\n        font-size: 10px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     CONTENT\r\n     ========================================================= -->\r\n\r\n<div class=\"pn-sidebar-tautan\">\r\n\r\n    <div class=\"pn-sidebar-tautan-card\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-sidebar-tautan-header\">\r\n\r\n            <div class=\"pn-sidebar-tautan-icon\">\r\n\r\n                <!-- LINK ICON -->\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n\r\n                    <path\r\n                        d=\"M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1\"\r\n                    ><\/path>\r\n\r\n                    <path\r\n                        d=\"M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1\"\r\n                    ><\/path>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n                <div class=\"pn-sidebar-tautan-title\">\r\n                    Tautan Website\r\n                <\/div>\r\n\r\n                <div class=\"pn-sidebar-tautan-subtitle\">\r\n                    Situs resmi lembaga peradilan\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             LINK LIST\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-tautan-list\">\r\n\r\n\r\n            <!-- =================================================\r\n                 01 \u2014 MAHKAMAH AGUNG RI\r\n                 ================================================= -->\r\n\r\n            <a\r\n                class=\"pn-tautan-link\"\r\n                href=\"https:\/\/www.mahkamahagung.go.id\/id\/\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n            >\r\n\r\n                <div class=\"pn-tautan-link-icon\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <path\r\n                            d=\"M3 21h18\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M5 21V9l7-5 7 5v12\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M8 21v-8h8v8\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M9 9h6\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-tautan-link-content\">\r\n\r\n                    <span class=\"pn-tautan-link-name\">\r\n                        Mahkamah Agung Republik Indonesia\r\n                    <\/span>\r\n\r\n                    <span class=\"pn-tautan-link-url\">\r\n                        mahkamahagung.go.id\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-tautan-arrow\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <path\r\n                            d=\"M9 18l6-6-6-6\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n            <\/a>\r\n\r\n\r\n            <!-- =================================================\r\n                 02 \u2014 DIREKTORAT JENDERAL BADAN PERADILAN UMUM\r\n                 ================================================= -->\r\n\r\n            <a\r\n                class=\"pn-tautan-link\"\r\n                href=\"https:\/\/badilum.mahkamahagung.go.id\/\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n            >\r\n\r\n                <div class=\"pn-tautan-link-icon\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <rect\r\n                            x=\"3\"\r\n                            y=\"4\"\r\n                            width=\"18\"\r\n                            height=\"16\"\r\n                            rx=\"2\"\r\n                        ><\/rect>\r\n\r\n                        <path\r\n                            d=\"M7 8h10\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M7 12h10\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M7 16h6\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-tautan-link-content\">\r\n\r\n                    <span class=\"pn-tautan-link-name\">\r\n                        Direktorat Jenderal Badan Peradilan Umum\r\n                    <\/span>\r\n\r\n                    <span class=\"pn-tautan-link-url\">\r\n                        badilum.mahkamahagung.go.id\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-tautan-arrow\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <path\r\n                            d=\"M9 18l6-6-6-6\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n            <\/a>\r\n\r\n\r\n            <!-- =================================================\r\n                 03 \u2014 PENGADILAN TINGGI BANDA ACEH\r\n                 ================================================= -->\r\n\r\n            <a\r\n                class=\"pn-tautan-link\"\r\n                href=\"https:\/\/www.pt-nad.go.id\/\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n            >\r\n\r\n                <div class=\"pn-tautan-link-icon\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <path\r\n                            d=\"M3 21h18\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M5 21V9l7-5 7 5v12\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M8 21v-8h8v8\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M9 9h6\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-tautan-link-content\">\r\n\r\n                    <span class=\"pn-tautan-link-name\">\r\n                        Pengadilan Tinggi Banda Aceh\r\n                    <\/span>\r\n\r\n                    <span class=\"pn-tautan-link-url\">\r\n                        pt-nad.go.id\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-tautan-arrow\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <path\r\n                            d=\"M9 18l6-6-6-6\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n            <\/a>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             NOTE\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-tautan-note\">\r\n\r\n            Tautan resmi lingkungan Mahkamah Agung\r\n            dan peradilan umum.\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c342ff1 e-con-full e-flex e-con e-child\" data-id=\"c342ff1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83e9fb9 elementor-widget elementor-widget-html\" data-id=\"83e9fb9\" 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<!-- =========================================================\r\n     SIDEBAR 07 \u2014 MEDIA SOSIAL\r\n     INSTAGRAM + YOUTUBE\r\n     iOS GLASS STYLE\r\n     ICON SYSTEM SERAGAM DENGAN SIDEBAR\r\n     ========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n   ========================================================= *\/\r\n\r\n.pn-social {\r\n\r\n    --pn-red: #9A2109;\r\n    --pn-red-dark: #7C1A08;\r\n\r\n    --pn-text: #1d1d1f;\r\n    --pn-text-soft: #6e6e73;\r\n\r\n    width: 100%;\r\n\r\n    font-family:\r\n        -apple-system,\r\n        BlinkMacSystemFont,\r\n        \"SF Pro Display\",\r\n        \"SF Pro Text\",\r\n        \"Segoe UI\",\r\n        Roboto,\r\n        Helvetica,\r\n        Arial,\r\n        sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD\r\n   ========================================================= *\/\r\n\r\n.pn-social-card {\r\n\r\n    width: 100%;\r\n\r\n    box-sizing: border-box;\r\n\r\n    padding: 15px;\r\n\r\n    border-radius: 16px;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.78);\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255,255,255,.84),\r\n            rgba(255,255,255,.62)\r\n        );\r\n\r\n    box-shadow:\r\n        0 6px 22px rgba(0,0,0,.045);\r\n\r\n    backdrop-filter:\r\n        blur(18px)\r\n        saturate(120%);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(18px)\r\n        saturate(120%);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n   ========================================================= *\/\r\n\r\n.pn-social-header {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 9px;\r\n\r\n    margin-bottom: 12px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER ICON\r\n   SERAGAM DENGAN BLOCK SIDEBAR LAIN\r\n   ========================================================= *\/\r\n\r\n.pn-social-header-icon {\r\n\r\n    width: 31px;\r\n    height: 31px;\r\n\r\n    flex: 0 0 31px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 9px;\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n.pn-social-header-icon svg {\r\n\r\n    width: 17px;\r\n    height: 17px;\r\n\r\n    display: block;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.8;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n   ========================================================= *\/\r\n\r\n.pn-social-title {\r\n\r\n    margin: 0;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.25;\r\n}\r\n\r\n\r\n.pn-social-subtitle {\r\n\r\n    margin-top: 2px;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SOCIAL LIST\r\n   ========================================================= *\/\r\n\r\n.pn-social-list {\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    gap: 8px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SOCIAL ITEM\r\n   ========================================================= *\/\r\n\r\n.pn-social-item {\r\n\r\n    position: relative;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    min-height: 54px;\r\n\r\n    padding: 8px 10px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border-radius: 13px;\r\n\r\n    text-decoration: none !important;\r\n\r\n    color:\r\n        var(--pn-text) !important;\r\n\r\n    background:\r\n        rgba(255,255,255,.58);\r\n\r\n    border:\r\n        1px solid rgba(0,0,0,.055);\r\n\r\n    transition:\r\n        transform .2s ease,\r\n        background .2s ease,\r\n        border-color .2s ease,\r\n        box-shadow .2s ease;\r\n}\r\n\r\n\r\n.pn-social-item:hover {\r\n\r\n    transform:\r\n        translateY(-1px);\r\n\r\n    background:\r\n        rgba(255,255,255,.88);\r\n\r\n    border-color:\r\n        rgba(154,33,9,.16);\r\n\r\n    box-shadow:\r\n        0 6px 16px rgba(0,0,0,.06);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SOCIAL ICON BOX\r\n   SERAGAM DENGAN ICON BLOCK LAIN\r\n   ========================================================= *\/\r\n\r\n.pn-social-item-icon {\r\n\r\n    width: 31px;\r\n    height: 31px;\r\n\r\n    flex: 0 0 31px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 9px;\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEMUA ICON SOCIAL\r\n   MENGGUNAKAN STYLE OUTLINE YANG SAMA\r\n   ========================================================= *\/\r\n\r\n.pn-social-item-icon svg {\r\n\r\n    width: 16px;\r\n    height: 16px;\r\n\r\n    display: block;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.8;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INSTAGRAM\r\n   ========================================================= *\/\r\n\r\n.pn-social-item.instagram\r\n.pn-social-item-icon {\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   YOUTUBE\r\n   ========================================================= *\/\r\n\r\n.pn-social-item.youtube\r\n.pn-social-item-icon {\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TEXT\r\n   ========================================================= *\/\r\n\r\n.pn-social-item-content {\r\n\r\n    min-width: 0;\r\n\r\n    flex: 1;\r\n}\r\n\r\n\r\n.pn-social-item-name {\r\n\r\n    display: block;\r\n\r\n    margin: 0;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 11px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n.pn-social-item-handle {\r\n\r\n    display: block;\r\n\r\n    margin-top: 2px;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.25;\r\n\r\n    white-space: nowrap;\r\n\r\n    overflow: hidden;\r\n\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARROW\r\n   ========================================================= *\/\r\n\r\n.pn-social-arrow {\r\n\r\n    width: 25px;\r\n    height: 25px;\r\n\r\n    flex: 0 0 25px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    color:\r\n        #8a8a8f;\r\n}\r\n\r\n\r\n.pn-social-arrow svg {\r\n\r\n    width: 14px;\r\n    height: 14px;\r\n\r\n    display: block;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.8;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FOOTNOTE\r\n   ========================================================= *\/\r\n\r\n.pn-social-note {\r\n\r\n    margin-top: 9px;\r\n\r\n    color:\r\n        #8a8a8f;\r\n\r\n    font-size: 8.5px;\r\n\r\n    line-height: 1.35;\r\n\r\n    text-align: center;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .pn-social-card {\r\n\r\n        padding: 14px;\r\n\r\n        border-radius: 15px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     CONTENT\r\n     ========================================================= -->\r\n\r\n<div class=\"pn-social\">\r\n\r\n    <div class=\"pn-social-card\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-social-header\">\r\n\r\n            <div class=\"pn-social-header-icon\">\r\n\r\n                <!-- Ikon share \/ social -->\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n\r\n                    <circle\r\n                        cx=\"18\"\r\n                        cy=\"5\"\r\n                        r=\"2.5\"\r\n                    ><\/circle>\r\n\r\n                    <circle\r\n                        cx=\"6\"\r\n                        cy=\"12\"\r\n                        r=\"2.5\"\r\n                    ><\/circle>\r\n\r\n                    <circle\r\n                        cx=\"18\"\r\n                        cy=\"19\"\r\n                        r=\"2.5\"\r\n                    ><\/circle>\r\n\r\n                    <path\r\n                        d=\"M8.2 10.8l7.5-4.3\"\r\n                    ><\/path>\r\n\r\n                    <path\r\n                        d=\"M8.2 13.2l7.5 4.3\"\r\n                    ><\/path>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n                <div class=\"pn-social-title\">\r\n                    Media Sosial\r\n                <\/div>\r\n\r\n                <div class=\"pn-social-subtitle\">\r\n                    Ikuti informasi dan kegiatan kami\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             SOCIAL LIST\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-social-list\">\r\n\r\n\r\n            <!-- =================================================\r\n                 INSTAGRAM\r\n                 GANTI HREF DENGAN URL RESMI\r\n                 ================================================= -->\r\n\r\n            <a\r\n                class=\"pn-social-item instagram\"\r\n                href=\"#\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                aria-label=\"Instagram PN Simpang Tiga Redelong\"\r\n            >\r\n\r\n                <div class=\"pn-social-item-icon\">\r\n\r\n                    <!-- Instagram Outline -->\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <rect\r\n                            x=\"3.5\"\r\n                            y=\"3.5\"\r\n                            width=\"17\"\r\n                            height=\"17\"\r\n                            rx=\"4.5\"\r\n                        ><\/rect>\r\n\r\n                        <circle\r\n                            cx=\"12\"\r\n                            cy=\"12\"\r\n                            r=\"4\"\r\n                        ><\/circle>\r\n\r\n                        <circle\r\n                            cx=\"17.3\"\r\n                            cy=\"6.8\"\r\n                            r=\"1\"\r\n                            fill=\"currentColor\"\r\n                            stroke=\"none\"\r\n                        ><\/circle>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-social-item-content\">\r\n\r\n                    <span class=\"pn-social-item-name\">\r\n                        Instagram\r\n                    <\/span>\r\n\r\n                    <span class=\"pn-social-item-handle\">\r\n                        PN Simpang Tiga Redelong\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-social-arrow\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <path\r\n                            d=\"M9 18l6-6-6-6\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n            <\/a>\r\n\r\n\r\n            <!-- =================================================\r\n                 YOUTUBE\r\n                 GANTI HREF DENGAN URL RESMI\r\n                 ================================================= -->\r\n\r\n            <a\r\n                class=\"pn-social-item youtube\"\r\n                href=\"#\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                aria-label=\"YouTube PN Simpang Tiga Redelong\"\r\n            >\r\n\r\n                <div class=\"pn-social-item-icon\">\r\n\r\n                    <!-- YouTube Outline -->\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <path\r\n                            d=\"M21.2 7.2a2.5 2.5 0 0 0-1.7-1.7C18 5 12 5 12 5s-6 0-7.5.5A2.5 2.5 0 0 0 2.8 7.2 26 26 0 0 0 2.5 12c0 1.7.1 3.4.3 4.8a2.5 2.5 0 0 0 1.7 1.7c1.5.5 7.5.5 7.5.5s6 0 7.5-.5a2.5 2.5 0 0 0 1.7-1.7c.2-1.4.3-3.1.3-4.8s-.1-3.4-.3-4.8Z\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M10 9.2l5 2.8-5 2.8V9.2Z\"\r\n                            fill=\"currentColor\"\r\n                            stroke=\"none\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-social-item-content\">\r\n\r\n                    <span class=\"pn-social-item-name\">\r\n                        YouTube\r\n                    <\/span>\r\n\r\n                    <span class=\"pn-social-item-handle\">\r\n                        PN Simpang Tiga Redelong\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pn-social-arrow\">\r\n\r\n                    <svg\r\n                        viewBox=\"0 0 24 24\"\r\n                        aria-hidden=\"true\"\r\n                    >\r\n\r\n                        <path\r\n                            d=\"M9 18l6-6-6-6\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n            <\/a>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             FOOTNOTE\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-social-note\">\r\n            Kanal resmi untuk informasi dan dokumentasi kegiatan.\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0144d35 e-con-full e-flex e-con e-child\" data-id=\"0144d35\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f566e6 elementor-widget elementor-widget-html\" data-id=\"1f566e6\" 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<!-- =========================================================\r\n     SIDEBAR 08 \u2014 STATISTIK PENGUNJUNG\r\n     iOS GLASS STYLE\r\n     ========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n   ========================================================= *\/\r\n\r\n.pn-visitor {\r\n\r\n    --pn-red: #9A2109;\r\n    --pn-red-dark: #7C1A08;\r\n\r\n    --pn-text: #1d1d1f;\r\n    --pn-text-soft: #6e6e73;\r\n\r\n    width: 100%;\r\n\r\n    font-family:\r\n        -apple-system,\r\n        BlinkMacSystemFont,\r\n        \"SF Pro Display\",\r\n        \"SF Pro Text\",\r\n        \"Segoe UI\",\r\n        Roboto,\r\n        Helvetica,\r\n        Arial,\r\n        sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD UTAMA\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-card {\r\n\r\n    width: 100%;\r\n\r\n    box-sizing: border-box;\r\n\r\n    padding: 15px;\r\n\r\n    border-radius: 16px;\r\n\r\n    border:\r\n        1px solid rgba(255,255,255,.80);\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255,255,255,.86),\r\n            rgba(255,255,255,.63)\r\n        );\r\n\r\n    box-shadow:\r\n        0 7px 24px rgba(0,0,0,.045);\r\n\r\n    backdrop-filter:\r\n        blur(20px)\r\n        saturate(120%);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(20px)\r\n        saturate(120%);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-header {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 9px;\r\n\r\n    margin-bottom: 13px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER ICON\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-header-icon {\r\n\r\n    width: 31px;\r\n    height: 31px;\r\n\r\n    flex: 0 0 31px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 9px;\r\n\r\n    background:\r\n        rgba(154,33,9,.08);\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n.pn-visitor-header-icon svg {\r\n\r\n    width: 17px;\r\n    height: 17px;\r\n\r\n    display: block;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.7;\r\n\r\n    stroke-linecap: round;\r\n\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER TEXT\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-title {\r\n\r\n    margin: 0;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.25;\r\n}\r\n\r\n\r\n.pn-visitor-subtitle {\r\n\r\n    margin-top: 2px;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-grid {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        repeat(2, minmax(0,1fr));\r\n\r\n    gap: 7px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MINI CARD\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-mini {\r\n\r\n    min-width: 0;\r\n\r\n    padding:\r\n        10px 9px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border-radius: 12px;\r\n\r\n    background:\r\n        rgba(255,255,255,.62);\r\n\r\n    border:\r\n        1px solid rgba(0,0,0,.055);\r\n\r\n    transition:\r\n        transform .2s ease,\r\n        background .2s ease,\r\n        border-color .2s ease;\r\n}\r\n\r\n\r\n.pn-visitor-mini:hover {\r\n\r\n    transform:\r\n        translateY(-1px);\r\n\r\n    background:\r\n        rgba(255,255,255,.88);\r\n\r\n    border-color:\r\n        rgba(154,33,9,.13);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LABEL\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-label {\r\n\r\n    display: block;\r\n\r\n    margin-bottom: 4px;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 600;\r\n\r\n    line-height: 1.2;\r\n\r\n    text-transform: uppercase;\r\n\r\n    letter-spacing: .35px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NUMBER\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-number {\r\n\r\n    display: block;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 18px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.1;\r\n\r\n    letter-spacing: -.35px;\r\n}\r\n\r\n\r\n\/* Hari Ini *\/\r\n\r\n.pn-visitor-mini.today {\r\n\r\n    border-color:\r\n        rgba(154,33,9,.14);\r\n}\r\n\r\n\r\n.pn-visitor-mini.today\r\n.pn-visitor-number {\r\n\r\n    color:\r\n        var(--pn-red);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BULAN\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-month {\r\n\r\n    grid-column:\r\n        1 \/ -1;\r\n\r\n    position: relative;\r\n\r\n    overflow: hidden;\r\n\r\n    padding:\r\n        11px 12px;\r\n\r\n    border-radius: 13px;\r\n\r\n    background:\r\n        rgba(255,255,255,.68);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(154,33,9,.10);\r\n\r\n    transition:\r\n        transform .2s ease,\r\n        background .2s ease;\r\n}\r\n\r\n\r\n.pn-visitor-month:hover {\r\n\r\n    transform:\r\n        translateY(-1px);\r\n\r\n    background:\r\n        rgba(255,255,255,.90);\r\n}\r\n\r\n\r\n\/* Month decorative *\/\r\n\r\n.pn-visitor-month::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 65px;\r\n    height: 65px;\r\n\r\n    right: -25px;\r\n    top: -30px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        rgba(154,33,9,.045);\r\n}\r\n\r\n\r\n\/* Month title *\/\r\n\r\n.pn-visitor-month-title {\r\n\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 600;\r\n\r\n    text-transform: uppercase;\r\n\r\n    letter-spacing: .35px;\r\n}\r\n\r\n\r\n\/* Month content *\/\r\n\r\n.pn-visitor-month-content {\r\n\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n\r\n    align-items: baseline;\r\n\r\n    gap: 5px;\r\n\r\n    margin-top: 3px;\r\n}\r\n\r\n\r\n.pn-visitor-month-number {\r\n\r\n    color:\r\n        var(--pn-red);\r\n\r\n    font-size: 20px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.1;\r\n\r\n    letter-spacing: -.4px;\r\n}\r\n\r\n\r\n.pn-visitor-month-unit {\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 8px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TAHUN\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-year {\r\n\r\n    grid-column:\r\n        1 \/ -1;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: space-between;\r\n\r\n    gap: 10px;\r\n\r\n    padding:\r\n        10px 12px;\r\n\r\n    box-sizing: border-box;\r\n\r\n    border-radius: 12px;\r\n\r\n    background:\r\n        rgba(255,255,255,.55);\r\n\r\n    border:\r\n        1px solid rgba(0,0,0,.05);\r\n}\r\n\r\n\r\n.pn-visitor-year-left {\r\n\r\n    min-width: 0;\r\n}\r\n\r\n\r\n.pn-visitor-year-title {\r\n\r\n    display: block;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 600;\r\n\r\n    text-transform: uppercase;\r\n\r\n    letter-spacing: .35px;\r\n}\r\n\r\n\r\n.pn-visitor-year-name {\r\n\r\n    display: block;\r\n\r\n    margin-top: 2px;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 11px;\r\n\r\n    font-weight: 700;\r\n}\r\n\r\n\r\n.pn-visitor-year-right {\r\n\r\n    text-align: right;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n.pn-visitor-year-number {\r\n\r\n    display: block;\r\n\r\n    color:\r\n        var(--pn-text);\r\n\r\n    font-size: 16px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.1;\r\n}\r\n\r\n\r\n.pn-visitor-year-unit {\r\n\r\n    display: block;\r\n\r\n    margin-top: 2px;\r\n\r\n    color:\r\n        var(--pn-text-soft);\r\n\r\n    font-size: 7.5px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOTAL\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-total {\r\n\r\n    grid-column:\r\n        1 \/ -1;\r\n\r\n    position: relative;\r\n\r\n    overflow: hidden;\r\n\r\n    padding:\r\n        12px;\r\n\r\n    border-radius: 14px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #9A2109,\r\n            #7C1A08\r\n        );\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    box-shadow:\r\n        0 7px 18px\r\n        rgba(154,33,9,.16);\r\n}\r\n\r\n\r\n\/* Decorative circle *\/\r\n\r\n.pn-visitor-total::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 100px;\r\n    height: 100px;\r\n\r\n    right: -45px;\r\n    top: -55px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        rgba(255,255,255,.07);\r\n}\r\n\r\n\r\n.pn-visitor-total::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 55px;\r\n    height: 55px;\r\n\r\n    left: -28px;\r\n    bottom: -32px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        rgba(255,255,255,.05);\r\n}\r\n\r\n\r\n\/* Total label *\/\r\n\r\n.pn-visitor-total-label {\r\n\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    display: block;\r\n\r\n    color:\r\n        rgba(255,255,255,.72);\r\n\r\n    font-size: 8px;\r\n\r\n    font-weight: 600;\r\n\r\n    text-transform: uppercase;\r\n\r\n    letter-spacing: .4px;\r\n}\r\n\r\n\r\n\/* Total number *\/\r\n\r\n.pn-visitor-total-number {\r\n\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    display: block;\r\n\r\n    margin-top: 3px;\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    font-size: 24px;\r\n\r\n    font-weight: 700;\r\n\r\n    line-height: 1.05;\r\n\r\n    letter-spacing: -.5px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FOOTER\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-footer {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 6px;\r\n\r\n    margin-top: 9px;\r\n\r\n    color:\r\n        #8a8a8f;\r\n\r\n    font-size: 8px;\r\n\r\n    line-height: 1.3;\r\n}\r\n\r\n\r\n\/* Status *\/\r\n\r\n.pn-visitor-status {\r\n\r\n    width: 5px;\r\n    height: 5px;\r\n\r\n    flex: 0 0 5px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        #34C759;\r\n\r\n    box-shadow:\r\n        0 0 0 3px\r\n        rgba(52,199,89,.10);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOADING\r\n   ========================================================= *\/\r\n\r\n.pn-visitor-loading {\r\n\r\n    display: inline-block;\r\n\r\n    color:\r\n        #999;\r\n\r\n    animation:\r\n        pnVisitorPulse\r\n        1.2s ease\r\n        infinite;\r\n}\r\n\r\n\r\n@keyframes pnVisitorPulse {\r\n\r\n    0% {\r\n        opacity: .35;\r\n    }\r\n\r\n    50% {\r\n        opacity: 1;\r\n    }\r\n\r\n    100% {\r\n        opacity: .35;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   ========================================================= *\/\r\n\r\n@media (max-width: 480px) {\r\n\r\n    .pn-visitor-card {\r\n\r\n        padding: 14px;\r\n\r\n        border-radius: 15px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     HTML\r\n     ========================================================= -->\r\n\r\n<div\r\n    class=\"pn-visitor\"\r\n    id=\"pn-visitor-widget\"\r\n>\r\n\r\n    <div class=\"pn-visitor-card\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n             ================================================= -->\r\n\r\n        <div class=\"pn-visitor-header\">\r\n\r\n            <div\r\n                class=\"pn-visitor-header-icon\"\r\n            >\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n\r\n                    <path\r\n                        d=\"M4 19V5\"\r\n                    ><\/path>\r\n\r\n                    <path\r\n                        d=\"M4 19h17\"\r\n                    ><\/path>\r\n\r\n                    <path\r\n                        d=\"M7 15l4-4 3 2 5-6\"\r\n                    ><\/path>\r\n\r\n                    <path\r\n                        d=\"M16 7h3v3\"\r\n                    ><\/path>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div>\r\n\r\n                <div\r\n                    class=\"pn-visitor-title\"\r\n                >\r\n                    Statistik Pengunjung\r\n                <\/div>\r\n\r\n                <div\r\n                    class=\"pn-visitor-subtitle\"\r\n                >\r\n                    Statistik kunjungan website\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             STATISTIK\r\n             ================================================= -->\r\n\r\n        <div\r\n            class=\"pn-visitor-grid\"\r\n        >\r\n\r\n\r\n            <!-- =================================================\r\n                 HARI INI\r\n                 ================================================= -->\r\n\r\n            <div\r\n                class=\"pn-visitor-mini today\"\r\n            >\r\n\r\n                <span\r\n                    class=\"pn-visitor-label\"\r\n                >\r\n                    Hari Ini\r\n                <\/span>\r\n\r\n                <span\r\n                    class=\"pn-visitor-number\"\r\n                    id=\"pn-visitors-today\"\r\n                >\r\n\r\n                    <span\r\n                        class=\"pn-visitor-loading\"\r\n                    >\r\n                        ...\r\n                    <\/span>\r\n\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 KEMARIN\r\n                 ================================================= -->\r\n\r\n            <div\r\n                class=\"pn-visitor-mini\"\r\n            >\r\n\r\n                <span\r\n                    class=\"pn-visitor-label\"\r\n                >\r\n                    Kemarin\r\n                <\/span>\r\n\r\n                <span\r\n                    class=\"pn-visitor-number\"\r\n                    id=\"pn-visitors-yesterday\"\r\n                >\r\n\r\n                    <span\r\n                        class=\"pn-visitor-loading\"\r\n                    >\r\n                        ...\r\n                    <\/span>\r\n\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 BULAN INI\r\n                 ================================================= -->\r\n\r\n            <div\r\n                class=\"pn-visitor-month\"\r\n            >\r\n\r\n                <div\r\n                    class=\"pn-visitor-month-title\"\r\n                    id=\"pn-visitors-month-title\"\r\n                >\r\n                    Bulan Ini\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"pn-visitor-month-content\"\r\n                >\r\n\r\n                    <span\r\n                        class=\"pn-visitor-month-number\"\r\n                        id=\"pn-visitors-month\"\r\n                    >\r\n\r\n                        <span\r\n                            class=\"pn-visitor-loading\"\r\n                        >\r\n                            ...\r\n                        <\/span>\r\n\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"pn-visitor-month-unit\"\r\n                    >\r\n                        pengunjung\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 TAHUN\r\n                 ================================================= -->\r\n\r\n            <div\r\n                class=\"pn-visitor-year\"\r\n            >\r\n\r\n                <div\r\n                    class=\"pn-visitor-year-left\"\r\n                >\r\n\r\n                    <span\r\n                        class=\"pn-visitor-year-title\"\r\n                    >\r\n                        Tahun\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"pn-visitor-year-name\"\r\n                        id=\"pn-visitors-year-name\"\r\n                    >\r\n                        -\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"pn-visitor-year-right\"\r\n                >\r\n\r\n                    <span\r\n                        class=\"pn-visitor-year-number\"\r\n                        id=\"pn-visitors-year\"\r\n                    >\r\n\r\n                        <span\r\n                            class=\"pn-visitor-loading\"\r\n                        >\r\n                            ...\r\n                        <\/span>\r\n\r\n                    <\/span>\r\n\r\n                    <span\r\n                        class=\"pn-visitor-year-unit\"\r\n                    >\r\n                        pengunjung\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 TOTAL\r\n                 ================================================= -->\r\n\r\n            <div\r\n                class=\"pn-visitor-total\"\r\n            >\r\n\r\n                <span\r\n                    class=\"pn-visitor-total-label\"\r\n                >\r\n                    Total Pengunjung\r\n                <\/span>\r\n\r\n\r\n                <span\r\n                    class=\"pn-visitor-total-number\"\r\n                    id=\"pn-visitors-total\"\r\n                >\r\n\r\n                    <span\r\n                        class=\"pn-visitor-loading\"\r\n                    >\r\n                        ...\r\n                    <\/span>\r\n\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             FOOTER\r\n             ================================================= -->\r\n\r\n        <div\r\n            class=\"pn-visitor-footer\"\r\n        >\r\n\r\n            <span\r\n                class=\"pn-visitor-status\"\r\n            ><\/span>\r\n\r\n            Statistik aktif\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n\/* =========================================================\r\n   PN STR \u2014 VISITOR STATISTICS\r\n   ========================================================= *\/\r\n\r\n(function () {\r\n\r\n    \"use strict\";\r\n\r\n\r\n    \/* =====================================================\r\n       ELEMENT\r\n       ===================================================== *\/\r\n\r\n    const today =\r\n        document.getElementById(\r\n            \"pn-visitors-today\"\r\n        );\r\n\r\n\r\n    const yesterday =\r\n        document.getElementById(\r\n            \"pn-visitors-yesterday\"\r\n        );\r\n\r\n\r\n    const month =\r\n        document.getElementById(\r\n            \"pn-visitors-month\"\r\n        );\r\n\r\n\r\n    const monthTitle =\r\n        document.getElementById(\r\n            \"pn-visitors-month-title\"\r\n        );\r\n\r\n\r\n    const year =\r\n        document.getElementById(\r\n            \"pn-visitors-year\"\r\n        );\r\n\r\n\r\n    const yearName =\r\n        document.getElementById(\r\n            \"pn-visitors-year-name\"\r\n        );\r\n\r\n\r\n    const total =\r\n        document.getElementById(\r\n            \"pn-visitors-total\"\r\n        );\r\n\r\n\r\n    if (\r\n        !today ||\r\n        !yesterday ||\r\n        !month ||\r\n        !monthTitle ||\r\n        !year ||\r\n        !yearName ||\r\n        !total\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       API\r\n       ===================================================== *\/\r\n\r\n    const api =\r\n        window.location.origin +\r\n        \"\/wp-json\/pn\/v1\/visitor-stats\";\r\n\r\n\r\n    \/* =====================================================\r\n       FORMAT ANGKA INDONESIA\r\n       ===================================================== *\/\r\n\r\n    function formatNumber(\r\n        value\r\n    ) {\r\n\r\n        return Number(\r\n            value || 0\r\n        ).toLocaleString(\r\n            \"id-ID\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       AMBIL DATA\r\n       ===================================================== *\/\r\n\r\n    fetch(\r\n        api,\r\n        {\r\n            method: \"GET\",\r\n            cache: \"no-store\",\r\n            credentials: \"same-origin\"\r\n        }\r\n    )\r\n\r\n    .then(\r\n        function (response) {\r\n\r\n            if (!response.ok) {\r\n\r\n                throw new Error(\r\n                    \"API statistik gagal\"\r\n                );\r\n\r\n            }\r\n\r\n            return response.json();\r\n\r\n        }\r\n    )\r\n\r\n    .then(\r\n        function (data) {\r\n\r\n\r\n            if (\r\n                !data ||\r\n                data.status !== \"success\"\r\n            ) {\r\n\r\n                throw new Error(\r\n                    \"Data statistik tidak valid\"\r\n                );\r\n\r\n            }\r\n\r\n\r\n            \/* =============================================\r\n               HARI INI\r\n               ============================================= *\/\r\n\r\n            today.textContent =\r\n                formatNumber(\r\n                    data.today\r\n                );\r\n\r\n\r\n            \/* =============================================\r\n               KEMARIN\r\n               ============================================= *\/\r\n\r\n            yesterday.textContent =\r\n                formatNumber(\r\n                    data.yesterday\r\n                );\r\n\r\n\r\n            \/* =============================================\r\n               BULAN\r\n               ============================================= *\/\r\n\r\n            month.textContent =\r\n                formatNumber(\r\n                    data.month\r\n                );\r\n\r\n\r\n            monthTitle.textContent =\r\n                String(\r\n                    data.month_name || \"Bulan Ini\"\r\n                ).toUpperCase();\r\n\r\n\r\n            \/* =============================================\r\n               TAHUN\r\n               ============================================= *\/\r\n\r\n            year.textContent =\r\n                formatNumber(\r\n                    data.year\r\n                );\r\n\r\n\r\n            yearName.textContent =\r\n                data.year_name || \"-\";\r\n\r\n\r\n            \/* =============================================\r\n               TOTAL\r\n               ============================================= *\/\r\n\r\n            total.textContent =\r\n                formatNumber(\r\n                    data.total\r\n                );\r\n\r\n        }\r\n    )\r\n\r\n    .catch(\r\n        function (error) {\r\n\r\n            console.error(\r\n                \"PN Visitor:\",\r\n                error\r\n            );\r\n\r\n\r\n            \/*\r\n             * Jika API bermasalah,\r\n             * jangan membuat layout berantakan.\r\n             *\/\r\n\r\n            today.textContent = \"0\";\r\n\r\n            yesterday.textContent = \"0\";\r\n\r\n            month.textContent = \"0\";\r\n\r\n            year.textContent = \"0\";\r\n\r\n            total.textContent = \"0\";\r\n\r\n        }\r\n    );\r\n\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<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pengadilan Negeri Simpang Tiga Redelong Selamat Datang di Pengadilan Negeri Simpang Tiga Redelong Website resmi Pengadilan Negeri Simpang Tiga Redelong sebagai media informasi dan pelayanan publik yang mudah, transparan, dan akuntabel. Profil Pengadilan Pelayanan Publik Pelayanan Publik Mudah, Cepat &#038; Transparan Dapatkan informasi dan akses berbagai layanan Pengadilan Negeri Simpang Tiga Redelong secara lebih mudah [&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-2379","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pn-simpangtigaredelong.go.id\/wp-json\/wp\/v2\/pages\/2379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pn-simpangtigaredelong.go.id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pn-simpangtigaredelong.go.id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pn-simpangtigaredelong.go.id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pn-simpangtigaredelong.go.id\/wp-json\/wp\/v2\/comments?post=2379"}],"version-history":[{"count":0,"href":"https:\/\/pn-simpangtigaredelong.go.id\/wp-json\/wp\/v2\/pages\/2379\/revisions"}],"wp:attachment":[{"href":"https:\/\/pn-simpangtigaredelong.go.id\/wp-json\/wp\/v2\/media?parent=2379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}