{"id":6385,"date":"2026-09-07T14:47:55","date_gmt":"2026-09-07T07:47:55","guid":{"rendered":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/?page_id=6385"},"modified":"2026-10-19T14:41:41","modified_gmt":"2026-10-19T07:41:41","slug":"khdtkpban","status":"publish","type":"page","link":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/","title":{"rendered":"khdtkpban"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6385\" class=\"elementor elementor-6385\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-496cf0b e-flex e-con-boxed e-con e-parent\" data-id=\"496cf0b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d55add4 e-con-full e-flex e-con e-child\" data-id=\"d55add4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b3e548d elementor-widget elementor-widget-html\" data-id=\"b3e548d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- KHDTK Hero - Teks Putih, Tanpa Background -->\r\n<style>\r\n    \/* ---- Reset & Base ---- *\/\r\n    .khdtk-hero * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .khdtk-hero {\r\n        font-family: 'Poppins', sans-serif;\r\n        width: 100%;\r\n        max-width: 1140px;\r\n        margin: 0 auto;\r\n        padding: 0 16px;\r\n    }\r\n\r\n    \/* ---- Card \/ Container (tanpa background) ---- *\/\r\n    .khdtk-card {\r\n        position: relative;\r\n        background: transparent;\r\n        padding: 40px 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n    }\r\n\r\n    \/* ---- Label ---- *\/\r\n    .khdtk-label {\r\n        font-size: 12px;\r\n        font-weight: 500;\r\n        letter-spacing: 1.5px;\r\n        text-transform: uppercase;\r\n        color: #ffffff; \/* putih *\/\r\n        margin-bottom: 12px;\r\n        border-left: 3px solid #7bc6a4;\r\n        padding-left: 16px;\r\n        opacity: 0.85;\r\n    }\r\n\r\n    \/* ---- Title ---- *\/\r\n    .khdtk-title {\r\n        font-size: 18px;\r\n        font-weight: 700;\r\n        line-height: 1.1;\r\n        margin-bottom: 4px;\r\n        color: #ffffff; \/* putih *\/\r\n        letter-spacing: -0.5px;\r\n    }\r\n    .khdtk-title span {\r\n        display: block;\r\n        font-weight: 300;\r\n        font-size: 18px;\r\n        color: #ffffff; \/* putih *\/\r\n        letter-spacing: 1px;\r\n        opacity: 0.95;\r\n    }\r\n\r\n    \/* ---- Subtitle ---- *\/\r\n    .khdtk-subtitle {\r\n        font-size: 16px;\r\n        font-weight: 400;\r\n        color: #ffffff; \/* putih *\/\r\n        margin-top: 8px;\r\n        margin-bottom: 16px;\r\n        letter-spacing: 0.3px;\r\n        opacity: 0.95;\r\n    }\r\n\r\n    \/* ---- Description ---- *\/\r\n    .khdtk-desc {\r\n        font-size: 15px;\r\n        font-weight: 300;\r\n        line-height: 1.7;\r\n        color: #ffffff; \/* putih *\/\r\n        max-width: 780px;\r\n        opacity: 0.85;\r\n    }\r\n\r\n    \/* ============================================================ *\/\r\n    \/*              RESPONSIVE : TABLET & MOBILE                     *\/\r\n    \/* ============================================================ *\/\r\n\r\n    @media (max-width: 992px) {\r\n        .khdtk-card {\r\n            padding: 30px 0;\r\n        }\r\n        .khdtk-title {\r\n            font-size: 44px;\r\n        }\r\n        .khdtk-title span {\r\n            font-size: 36px;\r\n        }\r\n        .khdtk-subtitle {\r\n            font-size: 19px;\r\n        }\r\n        .khdtk-desc {\r\n            font-size: 15px;\r\n            max-width: 100%;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .khdtk-card {\r\n            padding: 24px 0;\r\n        }\r\n        .khdtk-title {\r\n            font-size: 36px;\r\n        }\r\n        .khdtk-title span {\r\n            font-size: 28px;\r\n        }\r\n        .khdtk-subtitle {\r\n            font-size: 17px;\r\n        }\r\n        .khdtk-desc {\r\n            font-size: 14px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .khdtk-card {\r\n            padding: 18px 0;\r\n        }\r\n        .khdtk-label {\r\n            font-size: 11px;\r\n            padding-left: 12px;\r\n            margin-bottom: 10px;\r\n        }\r\n        .khdtk-title {\r\n            font-size: 28px;\r\n            letter-spacing: 0;\r\n        }\r\n        .khdtk-title span {\r\n            font-size: 22px;\r\n        }\r\n        .khdtk-subtitle {\r\n            font-size: 15px;\r\n            margin-top: 4px;\r\n            margin-bottom: 12px;\r\n        }\r\n        .khdtk-desc {\r\n            font-size: 13px;\r\n            line-height: 1.6;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 360px) {\r\n        .khdtk-card {\r\n            padding: 12px 0;\r\n        }\r\n        .khdtk-title {\r\n            font-size: 24px;\r\n        }\r\n        .khdtk-title span {\r\n            font-size: 18px;\r\n        }\r\n        .khdtk-subtitle {\r\n            font-size: 13px;\r\n        }\r\n        .khdtk-desc {\r\n            font-size: 12px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- ====== KHDTK HERO (Teks Putih) ====== -->\r\n<div class=\"khdtk-hero\">\r\n    <div class=\"khdtk-card\">\r\n\r\n        <div class=\"khdtk-label\">Kawasan Hutan Dengan Tujuan Khusus<\/div>\r\n\r\n        <div class=\"khdtk-title\">\r\n            KHDTK\r\n            <span>PONDOK BULUH DAN AEK NAULI<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"khdtk-subtitle\">\r\n            Ruang Pembelajaran, Pengembangan Kompetensi, dan Pemberdayaan Masyarakat\r\n        <\/div>\r\n\r\n        <div class=\"khdtk-desc\">\r\n            KHDTK Pondok Buluh dan Aek Nauli merupakan kawasan hutan pendidikan yang dikelola oleh Balai P2SDM Wilayah I untuk mendukung kegiatan Pelatihan, Penelitian, Pengembangan Kompetensi, dan Pemberdayaan Masyarakat.\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1e2f6c8 e-con-full e-flex e-con e-child\" data-id=\"1e2f6c8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74fb8d3 elementor-widget elementor-widget-html\" data-id=\"74fb8d3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================\r\n     TOMBOL POPUP PETA KHDTK + LIGHTBOX ZOOM\r\n     Desain Resmi & Modern | Kementerian Kehutanan\r\n     Font: Poppins (utama) + Inter (fallback)\r\n     Responsive: Mobile, Tablet, Desktop\r\n     ============================================ -->\r\n\r\n<style>\r\n    \/* ---------- RESET & BASE ---------- *\/\r\n    .khdtk-map-wrapper * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .khdtk-map-wrapper {\r\n        font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        display: inline-block;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* ---------- TOMBOL UTAMA ---------- *\/\r\n    .btn-map-popup {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 12px;\r\n        padding: 16px 36px;\r\n        background: linear-gradient(145deg, #1a5c3a, #0f4028);\r\n        color: #ffffff;\r\n        font-family: 'Poppins', 'Inter', sans-serif;\r\n        font-size: 1.05rem;\r\n        font-weight: 600;\r\n        letter-spacing: 0.02em;\r\n        border: none;\r\n        border-radius: 12px;\r\n        cursor: pointer;\r\n        box-shadow: 0 8px 28px rgba(26, 92, 58, 0.35), 0 2px 8px rgba(0, 0, 0, 0.08);\r\n        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n        position: relative;\r\n        overflow: hidden;\r\n        width: auto;\r\n        min-width: 220px;\r\n        text-decoration: none;\r\n        user-select: none;\r\n    }\r\n\r\n    .btn-map-popup::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background: linear-gradient(145deg, #1e6e45, #0f4028);\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    .btn-map-popup:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 14px 40px rgba(26, 92, 58, 0.45), 0 4px 12px rgba(0, 0, 0, 0.12);\r\n    }\r\n\r\n    .btn-map-popup:hover::before {\r\n        opacity: 1;\r\n    }\r\n\r\n    .btn-map-popup:active {\r\n        transform: translateY(0px);\r\n        box-shadow: 0 4px 16px rgba(26, 92, 58, 0.30);\r\n    }\r\n\r\n    .btn-map-popup .btn-icon {\r\n        position: relative;\r\n        z-index: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.3rem;\r\n        line-height: 1;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .btn-map-popup .btn-text {\r\n        position: relative;\r\n        z-index: 1;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .btn-map-popup .btn-arrow {\r\n        position: relative;\r\n        z-index: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.1rem;\r\n        transition: transform 0.3s ease;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .btn-map-popup:hover .btn-arrow {\r\n        transform: translateX(4px);\r\n    }\r\n\r\n    \/* ---------- OVERLAY MODAL PETA ---------- *\/\r\n    .map-modal-overlay {\r\n        display: none;\r\n        position: fixed;\r\n        inset: 0;\r\n        z-index: 999999;\r\n        background: rgba(10, 30, 20, 0.72);\r\n        backdrop-filter: blur(6px);\r\n        -webkit-backdrop-filter: blur(6px);\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 20px;\r\n        animation: overlayFade 0.35s ease;\r\n    }\r\n\r\n    .map-modal-overlay.active {\r\n        display: flex;\r\n    }\r\n\r\n    @keyframes overlayFade {\r\n        0% {\r\n            opacity: 0;\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    \/* ---------- MODAL KONTEN ---------- *\/\r\n    .map-modal-content {\r\n        background: #ffffff;\r\n        border-radius: 24px;\r\n        max-width: 1120px;\r\n        width: 100%;\r\n        max-height: 92vh;\r\n        overflow: hidden;\r\n        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.15);\r\n        animation: modalSlideUp 0.40s cubic-bezier(0.22, 1, 0.36, 1);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    @keyframes modalSlideUp {\r\n        0% {\r\n            opacity: 0;\r\n            transform: translateY(40px) scale(0.97);\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n            transform: translateY(0) scale(1);\r\n        }\r\n    }\r\n\r\n    \/* ---------- HEADER MODAL ---------- *\/\r\n    .map-modal-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 22px 32px 18px 32px;\r\n        border-bottom: 2px solid #eef3f0;\r\n        flex-shrink: 0;\r\n        background: #fafffc;\r\n    }\r\n\r\n    .map-modal-header .header-left {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n    }\r\n\r\n    .map-modal-header .header-icon {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 44px;\r\n        height: 44px;\r\n        background: linear-gradient(145deg, #1a5c3a, #0f4028);\r\n        border-radius: 12px;\r\n        color: #fff;\r\n        font-size: 1.3rem;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .map-modal-header h2 {\r\n        font-family: 'Poppins', 'Inter', sans-serif;\r\n        font-size: 1.35rem;\r\n        font-weight: 600;\r\n        color: #0f2b1d;\r\n        letter-spacing: -0.01em;\r\n        margin: 0;\r\n        line-height: 1.3;\r\n    }\r\n\r\n    .map-modal-header .header-sub {\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 400;\r\n        color: #5f7a6b;\r\n        letter-spacing: 0.03em;\r\n        text-transform: uppercase;\r\n        display: block;\r\n        margin-top: 1px;\r\n    }\r\n\r\n    .map-modal-header .close-btn {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 44px;\r\n        height: 44px;\r\n        border: none;\r\n        background: #f0f5f2;\r\n        border-radius: 50%;\r\n        font-size: 1.6rem;\r\n        line-height: 1;\r\n        color: #2d4a3a;\r\n        cursor: pointer;\r\n        transition: all 0.25s ease;\r\n        flex-shrink: 0;\r\n        font-family: 'Inter', sans-serif;\r\n    }\r\n\r\n    .map-modal-header .close-btn:hover {\r\n        background: #e8eee9;\r\n        transform: rotate(90deg);\r\n        color: #0f2b1d;\r\n    }\r\n\r\n    .map-modal-header .close-btn:active {\r\n        transform: rotate(90deg) scale(0.92);\r\n    }\r\n\r\n    \/* ---------- BODY MODAL ---------- *\/\r\n    .map-modal-body {\r\n        padding: 28px 32px 32px 32px;\r\n        overflow-y: auto;\r\n        flex: 1;\r\n        background: #fafcfa;\r\n    }\r\n\r\n    .map-grid {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 28px;\r\n    }\r\n\r\n    \/* ---------- KARTU PETA ---------- *\/\r\n    .map-card {\r\n        background: #ffffff;\r\n        border-radius: 18px;\r\n        overflow: hidden;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);\r\n        border: 1px solid #e9efeC;\r\n        transition: box-shadow 0.25s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .map-card:hover {\r\n        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);\r\n    }\r\n\r\n    .map-card .card-header {\r\n        padding: 16px 20px 12px 20px;\r\n        border-bottom: 1px solid #f0f5f2;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        background: #fafffc;\r\n    }\r\n\r\n    .map-card .card-header .pin-icon {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 32px;\r\n        height: 32px;\r\n        background: #e8f0eb;\r\n        border-radius: 50%;\r\n        color: #1a5c3a;\r\n        font-size: 0.9rem;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .map-card .card-header h3 {\r\n        font-family: 'Poppins', 'Inter', sans-serif;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        color: #0f2b1d;\r\n        margin: 0;\r\n        line-height: 1.3;\r\n        letter-spacing: -0.01em;\r\n    }\r\n\r\n    .map-card .card-header .badge {\r\n        margin-left: auto;\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.6rem;\r\n        font-weight: 500;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.05em;\r\n        color: #1a5c3a;\r\n        background: #e2eee7;\r\n        padding: 3px 12px;\r\n        border-radius: 20px;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    \/* ---------- GAMBAR DENGAN ZOOM (klik) ---------- *\/\r\n    .map-card .card-image-wrap {\r\n        position: relative;\r\n        padding: 12px 12px 8px 12px;\r\n        background: #f8fbf9;\r\n        flex: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        min-height: 200px;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .map-card .card-image-wrap img {\r\n        width: 100%;\r\n        height: auto;\r\n        max-height: 380px;\r\n        object-fit: contain;\r\n        border-radius: 12px;\r\n        display: block;\r\n        background: #ffffff;\r\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\r\n        transition: transform 0.3s ease;\r\n        pointer-events: none; \/* biar event click di-wrap *\/\r\n    }\r\n\r\n    .map-card .card-image-wrap:hover img {\r\n        transform: scale(1.02);\r\n    }\r\n\r\n    .map-card .card-image-wrap .zoom-hint {\r\n        position: absolute;\r\n        bottom: 18px;\r\n        right: 18px;\r\n        background: rgba(0, 0, 0, 0.55);\r\n        backdrop-filter: blur(4px);\r\n        -webkit-backdrop-filter: blur(4px);\r\n        color: #fff;\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.65rem;\r\n        padding: 4px 12px;\r\n        border-radius: 20px;\r\n        letter-spacing: 0.04em;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        pointer-events: none;\r\n        border: 1px solid rgba(255, 255, 255, 0.15);\r\n    }\r\n\r\n    .map-card .card-image-wrap:hover .zoom-hint {\r\n        opacity: 1;\r\n    }\r\n\r\n    .map-card .card-footer {\r\n        padding: 10px 20px 16px 20px;\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.7rem;\r\n        color: #5f7a6b;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        border-top: 1px solid #f0f5f2;\r\n        background: #fafffc;\r\n    }\r\n\r\n    .map-card .card-footer .foot-dot {\r\n        display: inline-block;\r\n        width: 5px;\r\n        height: 5px;\r\n        background: #40916c;\r\n        border-radius: 50%;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    \/* ---------- LIGHTBOX ZOOM GAMBAR ---------- *\/\r\n    .image-lightbox {\r\n        display: none;\r\n        position: fixed;\r\n        inset: 0;\r\n        z-index: 9999999;\r\n        background: rgba(0, 0, 0, 0.85);\r\n        backdrop-filter: blur(10px);\r\n        -webkit-backdrop-filter: blur(10px);\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 40px;\r\n        animation: lightboxFade 0.3s ease;\r\n        cursor: zoom-out;\r\n    }\r\n\r\n    .image-lightbox.active {\r\n        display: flex;\r\n    }\r\n\r\n    @keyframes lightboxFade {\r\n        0% {\r\n            opacity: 0;\r\n        }\r\n        100% {\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    .image-lightbox .lightbox-inner {\r\n        max-width: 90vw;\r\n        max-height: 90vh;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: default;\r\n        position: relative;\r\n    }\r\n\r\n    .image-lightbox .lightbox-inner img {\r\n        width: auto;\r\n        height: auto;\r\n        max-width: 100%;\r\n        max-height: 90vh;\r\n        object-fit: contain;\r\n        border-radius: 12px;\r\n        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\r\n        transition: transform 0.25s ease;\r\n        transform: scale(0.95);\r\n        animation: zoomIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;\r\n    }\r\n\r\n    @keyframes zoomIn {\r\n        0% {\r\n            transform: scale(0.92);\r\n            opacity: 0;\r\n        }\r\n        100% {\r\n            transform: scale(1);\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    .image-lightbox .lightbox-close {\r\n        position: absolute;\r\n        top: -20px;\r\n        right: -20px;\r\n        width: 48px;\r\n        height: 48px;\r\n        background: rgba(255, 255, 255, 0.15);\r\n        backdrop-filter: blur(8px);\r\n        -webkit-backdrop-filter: blur(8px);\r\n        border: 1px solid rgba(255, 255, 255, 0.25);\r\n        border-radius: 50%;\r\n        color: #fff;\r\n        font-size: 1.8rem;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: all 0.25s ease;\r\n        font-family: 'Inter', sans-serif;\r\n    }\r\n\r\n    .image-lightbox .lightbox-close:hover {\r\n        background: rgba(255, 255, 255, 0.25);\r\n        transform: rotate(90deg);\r\n    }\r\n\r\n    \/* ---------- RESPONSIVE ---------- *\/\r\n\r\n    \/* Tablet *\/\r\n    @media (max-width: 992px) {\r\n        .map-modal-content {\r\n            max-width: 96%;\r\n            max-height: 94vh;\r\n        }\r\n\r\n        .map-modal-header {\r\n            padding: 18px 24px 14px 24px;\r\n        }\r\n\r\n        .map-modal-header h2 {\r\n            font-size: 1.15rem;\r\n        }\r\n\r\n        .map-modal-body {\r\n            padding: 22px 24px 26px 24px;\r\n        }\r\n\r\n        .map-grid {\r\n            gap: 22px;\r\n        }\r\n\r\n        .map-card .card-image-wrap img {\r\n            max-height: 300px;\r\n        }\r\n\r\n        .btn-map-popup {\r\n            padding: 14px 28px;\r\n            font-size: 0.95rem;\r\n            min-width: 180px;\r\n        }\r\n\r\n        .btn-map-popup .btn-icon {\r\n            font-size: 1.15rem;\r\n        }\r\n\r\n        .image-lightbox {\r\n            padding: 30px;\r\n        }\r\n\r\n        .image-lightbox .lightbox-close {\r\n            top: -10px;\r\n            right: -10px;\r\n            width: 44px;\r\n            height: 44px;\r\n            font-size: 1.5rem;\r\n        }\r\n    }\r\n\r\n    \/* Mobile *\/\r\n    @media (max-width: 640px) {\r\n        .map-modal-overlay {\r\n            padding: 12px;\r\n            align-items: flex-end;\r\n        }\r\n\r\n        .map-modal-content {\r\n            max-width: 100%;\r\n            max-height: 96vh;\r\n            border-radius: 20px 20px 0 0;\r\n            animation: modalSlideUpMobile 0.40s cubic-bezier(0.22, 1, 0.36, 1);\r\n        }\r\n\r\n        @keyframes modalSlideUpMobile {\r\n            0% {\r\n                opacity: 0;\r\n                transform: translateY(60px) scale(0.96);\r\n            }\r\n            100% {\r\n                opacity: 1;\r\n                transform: translateY(0) scale(1);\r\n            }\r\n        }\r\n\r\n        .map-modal-header {\r\n            padding: 16px 18px 12px 18px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .map-modal-header .header-left {\r\n            gap: 10px;\r\n            flex: 1;\r\n            min-width: 0;\r\n        }\r\n\r\n        .map-modal-header .header-icon {\r\n            width: 36px;\r\n            height: 36px;\r\n            font-size: 1.0rem;\r\n            border-radius: 10px;\r\n        }\r\n\r\n        .map-modal-header h2 {\r\n            font-size: 1.0rem;\r\n        }\r\n\r\n        .map-modal-header .header-sub {\r\n            font-size: 0.6rem;\r\n        }\r\n\r\n        .map-modal-header .close-btn {\r\n            width: 36px;\r\n            height: 36px;\r\n            font-size: 1.3rem;\r\n        }\r\n\r\n        .map-modal-body {\r\n            padding: 16px 16px 20px 16px;\r\n        }\r\n\r\n        .map-grid {\r\n            grid-template-columns: 1fr;\r\n            gap: 18px;\r\n        }\r\n\r\n        .map-card .card-header {\r\n            padding: 12px 16px 10px 16px;\r\n        }\r\n\r\n        .map-card .card-header h3 {\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        .map-card .card-header .pin-icon {\r\n            width: 28px;\r\n            height: 28px;\r\n            font-size: 0.75rem;\r\n        }\r\n\r\n        .map-card .card-header .badge {\r\n            font-size: 0.5rem;\r\n            padding: 2px 10px;\r\n        }\r\n\r\n        .map-card .card-image-wrap {\r\n            padding: 8px 8px 4px 8px;\r\n            min-height: 140px;\r\n        }\r\n\r\n        .map-card .card-image-wrap img {\r\n            max-height: 220px;\r\n            border-radius: 10px;\r\n        }\r\n\r\n        .map-card .card-image-wrap .zoom-hint {\r\n            font-size: 0.55rem;\r\n            bottom: 12px;\r\n            right: 12px;\r\n            padding: 3px 10px;\r\n        }\r\n\r\n        .map-card .card-footer {\r\n            padding: 8px 16px 12px 16px;\r\n            font-size: 0.6rem;\r\n        }\r\n\r\n        .btn-map-popup {\r\n            padding: 12px 22px;\r\n            font-size: 0.88rem;\r\n            min-width: 160px;\r\n            gap: 10px;\r\n            border-radius: 10px;\r\n            width: 100%;\r\n            justify-content: center;\r\n        }\r\n\r\n        .btn-map-popup .btn-icon {\r\n            font-size: 1.05rem;\r\n        }\r\n\r\n        .btn-map-popup .btn-arrow {\r\n            font-size: 0.95rem;\r\n        }\r\n\r\n        .btn-map-popup .btn-text {\r\n            white-space: normal;\r\n        }\r\n\r\n        .image-lightbox {\r\n            padding: 20px;\r\n        }\r\n\r\n        .image-lightbox .lightbox-close {\r\n            top: 10px;\r\n            right: 10px;\r\n            width: 40px;\r\n            height: 40px;\r\n            font-size: 1.3rem;\r\n            background: rgba(0, 0, 0, 0.5);\r\n        }\r\n    }\r\n\r\n    \/* Mobile kecil *\/\r\n    @media (max-width: 400px) {\r\n        .map-modal-header h2 {\r\n            font-size: 0.85rem;\r\n        }\r\n        .map-modal-header .header-sub {\r\n            font-size: 0.5rem;\r\n        }\r\n        .map-card .card-header h3 {\r\n            font-size: 0.8rem;\r\n        }\r\n        .map-card .card-image-wrap img {\r\n            max-height: 160px;\r\n        }\r\n        .btn-map-popup {\r\n            padding: 10px 16px;\r\n            font-size: 0.8rem;\r\n            min-width: 130px;\r\n            gap: 8px;\r\n        }\r\n        .btn-map-popup .btn-icon {\r\n            font-size: 0.9rem;\r\n        }\r\n    }\r\n\r\n    \/* ---------- SCROLLBAR ---------- *\/\r\n    .map-modal-body::-webkit-scrollbar {\r\n        width: 6px;\r\n    }\r\n\r\n    .map-modal-body::-webkit-scrollbar-track {\r\n        background: #eef3f0;\r\n        border-radius: 10px;\r\n    }\r\n\r\n    .map-modal-body::-webkit-scrollbar-thumb {\r\n        background: #b6cdc0;\r\n        border-radius: 10px;\r\n    }\r\n\r\n    .map-modal-body::-webkit-scrollbar-thumb:hover {\r\n        background: #8fb0a0;\r\n    }\r\n<\/style>\r\n\r\n<!-- ============================================\r\n     HTML STRUKTUR\r\n     ============================================ -->\r\n<div class=\"khdtk-map-wrapper\">\r\n\r\n    <!-- TOMBOL -->\r\n    <button id=\"btnOpenMapModal\" class=\"btn-map-popup\" aria-haspopup=\"dialog\" aria-expanded=\"false\">\r\n        <span class=\"btn-icon\" aria-hidden=\"true\">\ud83d\uddfa\ufe0f<\/span>\r\n        <span class=\"btn-text\">Lihat Peta KHDTK<\/span>\r\n        <span class=\"btn-arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n    <\/button>\r\n\r\n    <!-- MODAL PETA -->\r\n    <div id=\"mapModalOverlay\" class=\"map-modal-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">\r\n        <div class=\"map-modal-content\">\r\n\r\n            <!-- HEADER -->\r\n            <div class=\"map-modal-header\">\r\n                <div class=\"header-left\">\r\n                    <span class=\"header-icon\" aria-hidden=\"true\">\ud83c\udf32<\/span>\r\n                    <div>\r\n                        <h2 id=\"modalTitle\">Peta Kawasan KHDTK<\/h2>\r\n                        <span class=\"header-sub\">Kementerian Kehutanan \u2014 Balai P2SDM Wilayah I<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                <button id=\"btnCloseModal\" class=\"close-btn\" aria-label=\"Tutup popup peta\">\r\n                    \u2715\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- BODY -->\r\n            <div class=\"map-modal-body\">\r\n                <div class=\"map-grid\">\r\n\r\n                    <!-- KARTU 1: AEK NAULI -->\r\n                    <div class=\"map-card\">\r\n                        <div class=\"card-header\">\r\n                            <span class=\"pin-icon\" aria-hidden=\"true\">\ud83d\udccd<\/span>\r\n                            <h3>KHDTK AEK NAULI<\/h3>\r\n                            <span class=\"badge\">Kawasan Hutan<\/span>\r\n                        <\/div>\r\n                        <div class=\"card-image-wrap\" data-lightbox-trigger>\r\n                            <img decoding=\"async\"\r\n                            src=\"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-content\/uploads\/2026\/09\/PETA-AEK-NAULI-Large.webp\"\r\n                            alt=\"Peta KHDTK AEK NAULI - Kawasan Hutan Pendidikan dan Latihan\"\r\n                            loading=\"lazy\"\r\n                            \/>\r\n                            <span class=\"zoom-hint\">\ud83d\udd0d Klik untuk perbesar<\/span>\r\n                        <\/div>\r\n                        <div class=\"card-footer\">\r\n                            <span class=\"foot-dot\" aria-hidden=\"true\"><\/span>\r\n                            KHDTK AEK NAULI \u2014 Sumatera Utara\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- KARTU 2: PONDOK BULUH -->\r\n                    <div class=\"map-card\">\r\n                        <div class=\"card-header\">\r\n                            <span class=\"pin-icon\" aria-hidden=\"true\">\ud83d\udccd<\/span>\r\n                            <h3>KHDTK PONDOK BULUH<\/h3>\r\n                            <span class=\"badge\">Kawasan Hutan<\/span>\r\n                        <\/div>\r\n                        <div class=\"card-image-wrap\" data-lightbox-trigger>\r\n                            <img decoding=\"async\"\r\n                            src=\"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-content\/uploads\/2026\/09\/peta-Pondok-buluh-Large.webp\"\r\n                            alt=\"Peta KHDTK PONDOK BULUH - Kawasan Hutan Pendidikan dan Latihan\"\r\n                            loading=\"lazy\"\r\n                            \/>\r\n                            <span class=\"zoom-hint\">\ud83d\udd0d Klik untuk perbesar<\/span>\r\n                        <\/div>\r\n                        <div class=\"card-footer\">\r\n                            <span class=\"foot-dot\" aria-hidden=\"true\"><\/span>\r\n                            KHDTK PONDOK BULUH \u2014 Sumatera Utara\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- LIGHTBOX ZOOM GAMBAR -->\r\n    <div id=\"imageLightbox\" class=\"image-lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Perbesaran peta\">\r\n        <div class=\"lightbox-inner\">\r\n            <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Peta diperbesar\" \/>\r\n            <button id=\"lightboxClose\" class=\"lightbox-close\" aria-label=\"Tutup perbesaran\">\u2715<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- ============================================\r\n     JAVASCRIPT\r\n     ============================================ -->\r\n<script>\r\n    (function() {\r\n        'use strict';\r\n\r\n        \/\/ --- DOM refs modal peta ---\r\n        const overlay = document.getElementById('mapModalOverlay');\r\n        const openBtn = document.getElementById('btnOpenMapModal');\r\n        const closeBtn = document.getElementById('btnCloseModal');\r\n\r\n        \/\/ --- DOM refs lightbox gambar ---\r\n        const lightbox = document.getElementById('imageLightbox');\r\n        const lightboxImg = document.getElementById('lightboxImg');\r\n        const lightboxClose = document.getElementById('lightboxClose');\r\n\r\n        \/\/ --- Fungsi buka\/tutup modal peta ---\r\n        function openModal() {\r\n            overlay.classList.add('active');\r\n            document.body.style.overflow = 'hidden';\r\n            openBtn.setAttribute('aria-expanded', 'true');\r\n            setTimeout(function() {\r\n                closeBtn.focus();\r\n            }, 100);\r\n        }\r\n\r\n        function closeModal() {\r\n            overlay.classList.remove('active');\r\n            document.body.style.overflow = '';\r\n            openBtn.setAttribute('aria-expanded', 'false');\r\n            openBtn.focus();\r\n        }\r\n\r\n        \/\/ --- Event modal peta ---\r\n        openBtn.addEventListener('click', openModal);\r\n        closeBtn.addEventListener('click', closeModal);\r\n        overlay.addEventListener('click', function(e) {\r\n            if (e.target === overlay) closeModal();\r\n        });\r\n        document.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Escape' && overlay.classList.contains('active')) closeModal();\r\n        });\r\n\r\n        \/\/ --- Lightbox gambar (zoom) ---\r\n        function openLightbox(src, alt) {\r\n            lightboxImg.src = src;\r\n            lightboxImg.alt = alt || 'Peta diperbesar';\r\n            lightbox.classList.add('active');\r\n            document.body.style.overflow = 'hidden';\r\n            \/\/ fokus ke tombol close\r\n            setTimeout(function() {\r\n                lightboxClose.focus();\r\n            }, 100);\r\n        }\r\n\r\n        function closeLightbox() {\r\n            lightbox.classList.remove('active');\r\n            document.body.style.overflow = '';\r\n            \/\/ kembalikan fokus ke elemen trigger (kartu)\r\n            const triggers = document.querySelectorAll('[data-lightbox-trigger]');\r\n            \/\/ cari yang terakhir difokuskan? kita kembalikan ke modal saja agar tidak bingung\r\n            \/\/ lebih baik fokus ke modal overlay\r\n            if (overlay.classList.contains('active')) {\r\n                overlay.focus();\r\n            }\r\n        }\r\n\r\n        \/\/ Event klik pada trigger (card-image-wrap)\r\n        document.querySelectorAll('[data-lightbox-trigger]').forEach(function(wrap) {\r\n            wrap.addEventListener('click', function(e) {\r\n                \/\/ ambil gambar di dalam wrap\r\n                const img = this.querySelector('img');\r\n                if (img) {\r\n                    const src = img.getAttribute('src');\r\n                    const alt = img.getAttribute('alt') || 'Peta';\r\n                    openLightbox(src, alt);\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Tutup lightbox dengan tombol close\r\n        lightboxClose.addEventListener('click', function(e) {\r\n            e.stopPropagation();\r\n            closeLightbox();\r\n        });\r\n\r\n        \/\/ Tutup lightbox dengan klik di luar gambar (overlay)\r\n        lightbox.addEventListener('click', function(e) {\r\n            if (e.target === lightbox) {\r\n                closeLightbox();\r\n            }\r\n        });\r\n\r\n        \/\/ Tutup lightbox dengan ESC\r\n        document.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Escape' && lightbox.classList.contains('active')) {\r\n                closeLightbox();\r\n            }\r\n        });\r\n\r\n        \/\/ Trap focus di lightbox\r\n        lightbox.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Tab') {\r\n                const focusable = lightbox.querySelectorAll('button, [href]');\r\n                if (focusable.length === 0) return;\r\n                const first = focusable[0];\r\n                const last = focusable[focusable.length - 1];\r\n\r\n                if (e.shiftKey && document.activeElement === first) {\r\n                    e.preventDefault();\r\n                    last.focus();\r\n                } else if (!e.shiftKey && document.activeElement === last) {\r\n                    e.preventDefault();\r\n                    first.focus();\r\n                }\r\n            }\r\n        });\r\n\r\n        \/\/ --- Trap focus di modal peta (aksesibilitas) ---\r\n        overlay.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Tab') {\r\n                const focusable = overlay.querySelectorAll(\r\n                    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n                );\r\n                if (focusable.length === 0) return;\r\n                const first = focusable[0];\r\n                const last = focusable[focusable.length - 1];\r\n\r\n                if (e.shiftKey && document.activeElement === first) {\r\n                    e.preventDefault();\r\n                    last.focus();\r\n                } else if (!e.shiftKey && document.activeElement === last) {\r\n                    e.preventDefault();\r\n                    first.focus();\r\n                }\r\n            }\r\n        });\r\n\r\n        console.log('\u2705 Tombol Popup Peta + Lightbox Zoom siap digunakan.');\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<div class=\"elementor-element elementor-element-1d7b3bb e-flex e-con-boxed e-con e-parent\" data-id=\"1d7b3bb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a972215 e-con-full e-flex e-con e-child\" data-id=\"a972215\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<h2 data-interaction-id=\"2b50703\" class=\"e-2b50703-d915edf e-heading-base\">KHDTK<\/h2>\n\t\t\t\t\t<h2 data-interaction-id=\"d7088b5\" class=\"e-d7088b5-fc1ba83 e-heading-base\">PONDOK BULUH<\/h2>\n\t\t\t\t\t<button class=\"e-f6cbe7d-fea9f6c e-button-base\" data-interaction-id=\"f6cbe7d\">\n\t\tLihat Profile\n\t<\/button>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-27d3740 e-con-full e-flex e-con e-child\" data-id=\"27d3740\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<h2 data-interaction-id=\"3f6e27a\" class=\"e-3f6e27a-c9fc0d0 e-heading-base\">KHDTK<\/h2>\n\t\t\t\t\t<h2 data-interaction-id=\"15cc372\" class=\"e-15cc372-74355f0 e-heading-base\">AEK NAULI<\/h2>\n\t\t\t\t\t<button class=\"e-e761fe5-8909a2b e-button-base\" data-interaction-id=\"e761fe5\">\n\t\tLihat Profile\n\t<\/button>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-79d38c7 e-flex e-con-boxed e-con e-parent\" data-id=\"79d38c7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c0a4c72 e-con-full e-flex e-con e-child\" data-id=\"c0a4c72\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<h2 data-interaction-id=\"8073cdd\" class=\"e-8073cdd-a6f09ed e-heading-base\">Dokumentasi dan Pelaporan KHDTK<\/h2>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd46211 e-n-tabs-mobile elementor-widget elementor-widget-n-tabs\" data-id=\"dd46211\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"nested-tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-tabs\" data-widget-number=\"232022545\" aria-label=\"Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.\">\n\t\t\t<div class=\"e-n-tabs-heading\" role=\"tablist\">\n\t\t\t\t\t<button id=\"e-n-tab-title-2320225451\" data-tab-title-id=\"e-n-tab-title-2320225451\" class=\"e-n-tab-title\" aria-selected=\"true\" data-tab-index=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-n-tab-content-2320225451\" style=\"--n-tabs-title-order: 1;\">\n\t\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\" icon_documents_alt\"><\/i>\t\t\t<i aria-hidden=\"true\" class=\" icon_documents_alt\"><\/i>\t\t<\/span>\n\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tLaporan Pengelolaan\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-2320225452\" data-tab-title-id=\"e-n-tab-title-2320225452\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-2320225452\" style=\"--n-tabs-title-order: 2;\">\n\t\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"fas fa-leaf\"><\/i>\t\t\t<i aria-hidden=\"true\" class=\"fas fa-leaf\"><\/i>\t\t<\/span>\n\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tRencana Pengelolaan\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-2320225453\" data-tab-title-id=\"e-n-tab-title-2320225453\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-2320225453\" style=\"--n-tabs-title-order: 3;\">\n\t\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"fas fa-tree\"><\/i>\t\t\t<i aria-hidden=\"true\" class=\"fas fa-tree\"><\/i>\t\t<\/span>\n\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tSOP Pengelolaan\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-2320225454\" data-tab-title-id=\"e-n-tab-title-2320225454\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"4\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-2320225454\" style=\"--n-tabs-title-order: 4;\">\n\t\t\t\t\t<span class=\"e-n-tab-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"icon icon-hammer\"><\/i>\t\t\t<i aria-hidden=\"true\" class=\"icon icon-hammer\"><\/i>\t\t<\/span>\n\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tSurat Keputusan\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t<div class=\"e-n-tabs-content\">\n\t\t\t\t<div id=\"e-n-tab-content-2320225451\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-2320225451\" data-tab-index=\"1\" style=\"--n-tabs-title-order: 1;\" class=\"e-active elementor-element elementor-element-222a50d e-con-full e-flex e-con e-child\" data-id=\"222a50d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-71c2d0f e-flex e-con-boxed e-con e-child\" data-id=\"71c2d0f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<h2 data-interaction-id=\"4d4dd22\" class=\"e-4d4dd22-67b04f2 e-heading-base\">Laporan Pengelolaan KHDTK<\/h2>\n\t\t\t\t<div class=\"elementor-element elementor-element-34d4eff elementor-widget elementor-widget-text-editor\" data-id=\"34d4eff\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Laporan Pengelolaan KHDTK Hutan Diklat disusun untuk memberikan informasi dan bahan monitoring serta evaluasi mengenai pelaksanaan pengelolaan KHDTK selama tahun berjalan, guna mendukung peningkatan pelayanan pendidikan dan pelatihan kehutanan serta kualitas sumber daya manusia kehutanan.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-36353a4 elementor-widget elementor-widget-shortcode\" data-id=\"36353a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n    <div class=\"lkhdtk-wrap\"\n         data-ajax=\"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-admin\/admin-ajax.php\"\n         data-nonce=\"3886d4def3\"\n         data-can-add=\"0\"\n         data-can-delete=\"0\"\n         data-logged=\"0\">\n\n        <!-- Toolbar -->\n        <div class=\"lkhdtk-toolbar\">\n            <div class=\"lkhdtk-search\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                    <path d=\"M20 20L17 17\" stroke=\"#002E08\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n                <\/svg>\n                <input type=\"text\" id=\"lkhdtk-search-input\" placeholder=\"Cari nama dokumen...\">\n            <\/div>\n\n                    <\/div>\n\n        <!-- Counter -->\n        <div class=\"lkhdtk-count\">\n            Menampilkan <strong id=\"lkhdtk-visible-count\">4<\/strong>\n            dari 4 dokumen\n        <\/div>\n\n        <!-- List wrapper (untuk fade indicator) -->\n        <div class=\"lkhdtk-list-wrap\" id=\"lkhdtk-list-wrap\">\n            <div class=\"lkhdtk-list\" id=\"lkhdtk-list\">\n                                                            <div class=\"lkhdtk-item\"\n                             data-id=\"lkhdtk_2026s1\"\n                             data-link=\"https:\/\/drive.google.com\/file\/d\/1zQkDVWWhusMQAfeDBNd9mWwXvIbCBP7M\/view?usp=sharing\"\n                             data-nama=\"LAPORAN PENGELOLAAN KHDTK 2026 SEMESTER 1\"\n                             data-nama-lower=\"laporan pengelolaan khdtk 2026 semester 1\"\n                             data-tanggal=\"1782806400\">\n\n                            <div class=\"lkhdtk-item-icon\">\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M14 2H6C5.45 2 5 2.45 5 3V21C5 21.55 5.45 22 6 22H18C18.55 22 19 21.55 19 21V7L14 2Z\"\n                                          stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M14 2V7H19\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M9 13H15M9 17H13\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/div>\n\n                            <div class=\"lkhdtk-item-body\">\n                                <button type=\"button\" class=\"lkhdtk-item-title lkhdtk-open-pdf\">\n                                    LAPORAN PENGELOLAAN KHDTK 2026 SEMESTER 1                                <\/button>\n                                <div class=\"lkhdtk-item-meta\">\n                                                                            <span>30 Juni 2026<\/span>\n                                                                                                                <span class=\"lkhdtk-sep\">\u2022<\/span>\n                                                                                                                <span>oleh Admin<\/span>\n                                                                    <\/div>\n                            <\/div>\n\n                            <div class=\"lkhdtk-item-actions\">\n                                <button type=\"button\"\n                                        class=\"lkhdtk-icon-btn lkhdtk-btn-open lkhdtk-open-pdf\"\n                                        title=\"Lihat dokumen\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z\"\n                                              stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                    <\/svg>\n                                <\/button>\n\n                                                            <\/div>\n                        <\/div>\n                                            <div class=\"lkhdtk-item\"\n                             data-id=\"lkhdtk_2025\"\n                             data-link=\"https:\/\/drive.google.com\/file\/d\/1TZA4JXmQcdlgmDqgaMVD3hZelh1cf31G\/view?usp=sharing\"\n                             data-nama=\"LAPORAN PENGELOLAAN KHDTK 2025\"\n                             data-nama-lower=\"laporan pengelolaan khdtk 2025\"\n                             data-tanggal=\"1768464000\">\n\n                            <div class=\"lkhdtk-item-icon\">\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M14 2H6C5.45 2 5 2.45 5 3V21C5 21.55 5.45 22 6 22H18C18.55 22 19 21.55 19 21V7L14 2Z\"\n                                          stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M14 2V7H19\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M9 13H15M9 17H13\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/div>\n\n                            <div class=\"lkhdtk-item-body\">\n                                <button type=\"button\" class=\"lkhdtk-item-title lkhdtk-open-pdf\">\n                                    LAPORAN PENGELOLAAN KHDTK 2025                                <\/button>\n                                <div class=\"lkhdtk-item-meta\">\n                                                                            <span>15 Januari 2026<\/span>\n                                                                                                                <span class=\"lkhdtk-sep\">\u2022<\/span>\n                                                                                                                <span>oleh Admin<\/span>\n                                                                    <\/div>\n                            <\/div>\n\n                            <div class=\"lkhdtk-item-actions\">\n                                <button type=\"button\"\n                                        class=\"lkhdtk-icon-btn lkhdtk-btn-open lkhdtk-open-pdf\"\n                                        title=\"Lihat dokumen\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z\"\n                                              stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                    <\/svg>\n                                <\/button>\n\n                                                            <\/div>\n                        <\/div>\n                                            <div class=\"lkhdtk-item\"\n                             data-id=\"lkhdtk_2024\"\n                             data-link=\"https:\/\/drive.google.com\/file\/d\/1zS5-3pSJ_NU6zyo8M7jn1YTL3iLdDzxq\/view?usp=sharing\"\n                             data-nama=\"LAPORAN PENGELOLAAN KHDTK 2024\"\n                             data-nama-lower=\"laporan pengelolaan khdtk 2024\"\n                             data-tanggal=\"1736928000\">\n\n                            <div class=\"lkhdtk-item-icon\">\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M14 2H6C5.45 2 5 2.45 5 3V21C5 21.55 5.45 22 6 22H18C18.55 22 19 21.55 19 21V7L14 2Z\"\n                                          stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M14 2V7H19\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M9 13H15M9 17H13\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/div>\n\n                            <div class=\"lkhdtk-item-body\">\n                                <button type=\"button\" class=\"lkhdtk-item-title lkhdtk-open-pdf\">\n                                    LAPORAN PENGELOLAAN KHDTK 2024                                <\/button>\n                                <div class=\"lkhdtk-item-meta\">\n                                                                            <span>15 Januari 2025<\/span>\n                                                                                                                <span class=\"lkhdtk-sep\">\u2022<\/span>\n                                                                                                                <span>oleh Admin<\/span>\n                                                                    <\/div>\n                            <\/div>\n\n                            <div class=\"lkhdtk-item-actions\">\n                                <button type=\"button\"\n                                        class=\"lkhdtk-icon-btn lkhdtk-btn-open lkhdtk-open-pdf\"\n                                        title=\"Lihat dokumen\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z\"\n                                              stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                    <\/svg>\n                                <\/button>\n\n                                                            <\/div>\n                        <\/div>\n                                            <div class=\"lkhdtk-item\"\n                             data-id=\"lkhdtk_2021\"\n                             data-link=\"https:\/\/drive.google.com\/file\/d\/1g-vA3ARGKsdpHB9thx53EMqEp_10kZir\/view?usp=sharing\"\n                             data-nama=\"LAPORAN PENGELOLAAN KHDTK 2021\"\n                             data-nama-lower=\"laporan pengelolaan khdtk 2021\"\n                             data-tanggal=\"1642233600\">\n\n                            <div class=\"lkhdtk-item-icon\">\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M14 2H6C5.45 2 5 2.45 5 3V21C5 21.55 5.45 22 6 22H18C18.55 22 19 21.55 19 21V7L14 2Z\"\n                                          stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M14 2V7H19\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M9 13H15M9 17H13\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/div>\n\n                            <div class=\"lkhdtk-item-body\">\n                                <button type=\"button\" class=\"lkhdtk-item-title lkhdtk-open-pdf\">\n                                    LAPORAN PENGELOLAAN KHDTK 2021                                <\/button>\n                                <div class=\"lkhdtk-item-meta\">\n                                                                            <span>15 Januari 2022<\/span>\n                                                                                                                <span class=\"lkhdtk-sep\">\u2022<\/span>\n                                                                                                                <span>oleh Admin<\/span>\n                                                                    <\/div>\n                            <\/div>\n\n                            <div class=\"lkhdtk-item-actions\">\n                                <button type=\"button\"\n                                        class=\"lkhdtk-icon-btn lkhdtk-btn-open lkhdtk-open-pdf\"\n                                        title=\"Lihat dokumen\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z\"\n                                              stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                    <\/svg>\n                                <\/button>\n\n                                                            <\/div>\n                        <\/div>\n                                                <\/div>\n        <\/div>\n\n        <div class=\"lkhdtk-empty lkhdtk-empty-search\" id=\"lkhdtk-empty-search\" style=\"display:none;\">\n            Tidak ada dokumen yang cocok dengan pencarian.\n        <\/div>\n    <\/div>\n\n        <div class=\"lkhdtk-modal-overlay\" id=\"lkhdtk-pdf-modal\">\n        <div class=\"lkhdtk-modal lkhdtk-modal-lg\">\n            <div class=\"lkhdtk-modal-header\">\n                <h3 id=\"lkhdtk-pdf-title\">Preview Dokumen<\/h3>\n                <button type=\"button\" class=\"lkhdtk-modal-close\" id=\"lkhdtk-pdf-close\" aria-label=\"Tutup\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M6 6L18 18M6 18L18 6\" stroke=\"#002E08\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n            <div class=\"lkhdtk-modal-body lkhdtk-pdf-body\" id=\"lkhdtk-pdf-body\">\n                <div class=\"lkhdtk-pdf-loading\">Memuat dokumen...<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n        \n        \n    <style>\n        \/* ================== GLOBAL ================== *\/\n        .lkhdtk-wrap,\n        .lkhdtk-modal-overlay,\n        .lkhdtk-modal { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }\n\n        .lkhdtk-wrap *,\n        .lkhdtk-modal-overlay * { box-sizing: border-box; }\n\n        .lkhdtk-wrap {\n            background: #ffffff;\n            border-radius: 20px;\n            padding: 24px;\n            border: 1px solid rgba(0, 46, 8, 0.06);\n            box-shadow: 0 10px 40px rgba(0, 46, 8, 0.06);\n        }\n\n        \/* ================== TOOLBAR ================== *\/\n        .lkhdtk-toolbar {\n            display: flex;\n            gap: 12px;\n            margin-bottom: 16px;\n            flex-wrap: wrap;\n        }\n\n        .lkhdtk-search {\n            flex: 1;\n            min-width: 200px;\n            position: relative;\n        }\n        .lkhdtk-search svg {\n            position: absolute;\n            left: 16px;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 18px; height: 18px;\n            opacity: 0.5;\n            pointer-events: none;\n            transition: opacity 0.25s ease;\n        }\n        .lkhdtk-search input {\n            width: 100%;\n            padding: 13px 16px 13px 46px;\n            font-size: 14px;\n            font-family: inherit;\n            color: #002E08;\n            background: #ffffff;\n            border: 1.5px solid #e4ebe5;\n            border-radius: 12px;\n            outline: none;\n            transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\n        }\n        .lkhdtk-search input::placeholder { color: #a8b5aa; }\n        .lkhdtk-search input:focus {\n            border-color: #002E08;\n            background: #fbfffb;\n            box-shadow: 0 0 0 4px rgba(0, 46, 8, 0.08);\n        }\n        .lkhdtk-search:focus-within svg { opacity: 1; }\n\n        .lkhdtk-btn-add {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 13px 20px;\n            font-family: inherit;\n            font-size: 14px;\n            font-weight: 600;\n            color: #ffffff;\n            background: #002E08;\n            border: none;\n            border-radius: 12px;\n            cursor: pointer;\n            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),\n                        background 0.3s ease,\n                        box-shadow 0.3s ease;\n            box-shadow: 0 6px 16px rgba(0, 46, 8, 0.22);\n            white-space: nowrap;\n        }\n        .lkhdtk-btn-add:hover {\n            background: #004A0D;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 24px rgba(0, 46, 8, 0.32);\n        }\n        .lkhdtk-btn-add:active { transform: translateY(0); }\n        .lkhdtk-btn-add svg { width: 16px; height: 16px; }\n\n        \/* ================== COUNT ================== *\/\n        .lkhdtk-count {\n            font-size: 13px;\n            color: #6b7a6d;\n            margin-bottom: 16px;\n        }\n        .lkhdtk-count strong { color: #002E08; font-weight: 600; }\n\n        \/* ================== LIST WRAPPER \u2014 untuk fade indicator ================== *\/\n        .lkhdtk-list-wrap {\n            position: relative;\n            border-radius: 14px;\n        }\n\n        \/* Fade ATAS \u2014 muncul hanya saat user scroll ke bawah *\/\n        .lkhdtk-list-wrap::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 60px;\n            background: linear-gradient(\n                to bottom,\n                #ffffff 0%,\n                rgba(255, 255, 255, 0.85) 30%,\n                rgba(255, 255, 255, 0) 100%\n            );\n            pointer-events: none;\n            z-index: 2;\n            opacity: 0;\n            transition: opacity 0.35s ease;\n            border-radius: 14px 14px 0 0;\n        }\n\n        \/* Fade BAWAH \u2014 muncul saat masih ada item di bawah *\/\n        .lkhdtk-list-wrap::after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            height: 60px;\n            background: linear-gradient(\n                to top,\n                #ffffff 0%,\n                rgba(255, 255, 255, 0.85) 30%,\n                rgba(255, 255, 255, 0) 100%\n            );\n            pointer-events: none;\n            z-index: 2;\n            opacity: 1;\n            transition: opacity 0.35s ease;\n            border-radius: 0 0 14px 14px;\n        }\n\n        \/* Kontrol visibilitas fade via class dari JS *\/\n        .lkhdtk-list-wrap.at-top::before    { opacity: 0; }\n        .lkhdtk-list-wrap:not(.at-top)::before { opacity: 1; }\n\n        .lkhdtk-list-wrap.at-bottom::after  { opacity: 0; }\n        .lkhdtk-list-wrap:not(.at-bottom)::after { opacity: 1; }\n\n        \/* Kalau list tidak bisa scroll (sedikit item), sembunyikan kedua fade *\/\n        .lkhdtk-list-wrap.no-scroll::before,\n        .lkhdtk-list-wrap.no-scroll::after {\n            opacity: 0;\n        }\n\n        \/* ================== LIST ================== *\/\n        .lkhdtk-list {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n            max-height: 340px;\n            overflow-y: auto;\n            overflow-x: hidden;\n            padding-right: 8px;\n            scroll-behavior: smooth;\n            -webkit-overflow-scrolling: touch;\n        }\n\n        \/* Scrollbar kustom *\/\n        .lkhdtk-list::-webkit-scrollbar {\n            width: 6px;\n        }\n        .lkhdtk-list::-webkit-scrollbar-track {\n            background: #f0f5f1;\n            border-radius: 10px;\n        }\n        .lkhdtk-list::-webkit-scrollbar-thumb {\n            background: #c4d9cb;\n            border-radius: 10px;\n            transition: background 0.2s ease;\n        }\n        .lkhdtk-list::-webkit-scrollbar-thumb:hover {\n            background: #9bb8a5;\n        }\n\n        \/* Firefox scrollbar *\/\n        .lkhdtk-list {\n            scrollbar-width: thin;\n            scrollbar-color: #c4d9cb #f0f5f1;\n        }\n\n        \/* === Item === *\/\n        .lkhdtk-item {\n            display: flex;\n            align-items: center;\n            gap: 14px;\n            padding: 14px 16px;\n            background: #ffffff;\n            border: 1px solid #edf2ee;\n            border-radius: 14px;\n            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n            flex-shrink: 0;\n        }\n\n        .lkhdtk-item:hover {\n            border-color: rgba(0, 46, 8, 0.18);\n            background: #f0f9f2;\n            transform: translateY(-2px);\n            box-shadow: 0 8px 20px rgba(0, 46, 8, 0.06);\n        }\n\n        .lkhdtk-item-icon {\n            flex-shrink: 0;\n            width: 44px;\n            height: 44px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: rgba(0, 46, 8, 0.06);\n            border-radius: 12px;\n            transition: background 0.25s ease;\n        }\n        .lkhdtk-item:hover .lkhdtk-item-icon {\n            background: rgba(0, 46, 8, 0.09);\n        }\n        .lkhdtk-item-icon svg { width: 22px; height: 22px; }\n\n        .lkhdtk-item-body {\n            flex: 1;\n            min-width: 0;\n        }\n\n        \/* Reset button default (fix hover pink) *\/\n        .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title {\n            all: unset;\n            display: block;\n            width: 100%;\n            text-align: left;\n            font-family: inherit;\n            font-size: 15px;\n            font-weight: 600;\n            line-height: 1.4;\n            color: #002E08;\n            cursor: pointer;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            transition: color 0.2s ease;\n            -webkit-tap-highlight-color: transparent;\n        }\n\n        .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title:hover {\n            color: #004A0D;\n            text-decoration: underline;\n            text-decoration-color: rgba(0, 46, 8, 0.4);\n            text-underline-offset: 3px;\n        }\n\n        .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title:focus-visible {\n            outline: 2px solid rgba(0, 46, 8, 0.4);\n            outline-offset: 2px;\n            border-radius: 4px;\n        }\n\n        .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title:active,\n        .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title:visited {\n            background: transparent;\n            color: #002E08;\n        }\n\n        .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title::selection {\n            background: rgba(0, 46, 8, 0.15);\n            color: #002E08;\n        }\n        .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title::-moz-selection {\n            background: rgba(0, 46, 8, 0.15);\n            color: #002E08;\n        }\n\n        .lkhdtk-item-meta {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            flex-wrap: wrap;\n            font-size: 12px;\n            color: #6b7a6d;\n            transition: color 0.25s ease;\n        }\n        .lkhdtk-item:hover .lkhdtk-item-meta {\n            color: #4a5a4c;\n        }\n        .lkhdtk-sep { opacity: 0.5; }\n\n        .lkhdtk-item-actions {\n            display: flex;\n            gap: 6px;\n            flex-shrink: 0;\n        }\n\n        .lkhdtk-icon-btn {\n            width: 38px;\n            height: 38px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            background: #ffffff;\n            border: 1.5px solid #e4ebe5;\n            border-radius: 10px;\n            cursor: pointer;\n            transition: all 0.25s ease;\n            text-decoration: none;\n            padding: 0;\n        }\n        .lkhdtk-icon-btn:hover {\n            border-color: #002E08;\n            background: #fbfffb;\n            transform: translateY(-1px);\n        }\n        .lkhdtk-icon-btn svg { width: 16px; height: 16px; }\n\n        .lkhdtk-btn-delete:hover {\n            border-color: #dc2626;\n            background: rgba(220, 38, 38, 0.06);\n        }\n\n        .lkhdtk-empty {\n            padding: 40px 20px;\n            text-align: center;\n            color: #6b7a6d;\n            font-size: 14px;\n            background: #fbfffb;\n            border-radius: 14px;\n            border: 1px dashed #dfe8e1;\n        }\n        .lkhdtk-empty-search { margin-top: 12px; }\n\n        \/* ================== MODALS ================== *\/\n        .lkhdtk-modal-overlay {\n            position: fixed;\n            inset: 0;\n            background: rgba(0, 46, 8, 0.55);\n            backdrop-filter: blur(4px);\n            -webkit-backdrop-filter: blur(4px);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 20px;\n            z-index: 999999;\n            opacity: 0;\n            visibility: hidden;\n            transition: opacity 0.3s ease, visibility 0.3s ease;\n        }\n        .lkhdtk-modal-overlay.lkhdtk-show {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        .lkhdtk-modal {\n            background: #ffffff;\n            border-radius: 20px;\n            padding: 26px;\n            width: 100%;\n            max-width: 460px;\n            box-shadow: 0 24px 60px rgba(0, 46, 8, 0.25);\n            transform: translateY(20px) scale(0.96);\n            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n        }\n        .lkhdtk-modal-overlay.lkhdtk-show .lkhdtk-modal {\n            transform: translateY(0) scale(1);\n        }\n\n        .lkhdtk-modal-sm {\n            max-width: 380px;\n            text-align: center;\n        }\n\n        .lkhdtk-modal-lg {\n            max-width: 1000px;\n            width: 90%;\n            padding: 0;\n            display: flex;\n            flex-direction: column;\n            height: 85vh;\n            overflow: hidden;\n        }\n        .lkhdtk-modal-lg .lkhdtk-modal-header {\n            padding: 16px 22px;\n            border-bottom: 1px solid #edf2ee;\n            background: #ffffff;\n            border-radius: 20px 20px 0 0;\n            flex-shrink: 0;\n        }\n\n        .lkhdtk-modal-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 12px;\n            margin-bottom: 20px;\n        }\n        .lkhdtk-modal-lg .lkhdtk-modal-header { margin-bottom: 0; }\n\n        .lkhdtk-modal-header h3 {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n            color: #002E08;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .lkhdtk-modal-close {\n            width: 36px;\n            height: 36px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            background: rgba(0, 46, 8, 0.06);\n            border: none;\n            border-radius: 10px;\n            cursor: pointer;\n            transition: background 0.2s ease;\n            flex-shrink: 0;\n            padding: 0;\n        }\n        .lkhdtk-modal-close:hover { background: rgba(0, 46, 8, 0.12); }\n        .lkhdtk-modal-close svg { width: 18px; height: 18px; }\n\n        .lkhdtk-modal-icon-warn {\n            width: 64px; height: 64px;\n            margin: 0 auto 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: rgba(220, 38, 38, 0.08);\n            border-radius: 50%;\n        }\n        .lkhdtk-modal-icon-warn svg { width: 32px; height: 32px; }\n        .lkhdtk-modal-sm h3 {\n            margin: 0 0 8px;\n            font-size: 19px;\n            font-weight: 600;\n            color: #002E08;\n        }\n        .lkhdtk-modal-sm p {\n            margin: 0 0 20px;\n            font-size: 14px;\n            color: #6b7a6d;\n            line-height: 1.5;\n        }\n        .lkhdtk-modal-sm p strong { color: #002E08; }\n\n        \/* ================== FORM ================== *\/\n        .lkhdtk-field { margin-bottom: 16px; }\n        .lkhdtk-field label {\n            display: block;\n            font-size: 13px;\n            font-weight: 500;\n            color: #002E08;\n            margin-bottom: 6px;\n        }\n        .lkhdtk-field input {\n            width: 100%;\n            padding: 13px 16px;\n            font-size: 14px;\n            font-family: inherit;\n            color: #002E08;\n            background: #ffffff;\n            border: 1.5px solid #e4ebe5;\n            border-radius: 12px;\n            outline: none;\n            transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\n        }\n        .lkhdtk-field input::placeholder { color: #a8b5aa; }\n        .lkhdtk-field input:focus {\n            border-color: #002E08;\n            background: #fbfffb;\n            box-shadow: 0 0 0 4px rgba(0, 46, 8, 0.08);\n        }\n        .lkhdtk-field small {\n            display: block;\n            margin-top: 6px;\n            font-size: 12px;\n            color: #6b7a6d;\n        }\n\n        .lkhdtk-form-msg {\n            display: none;\n            padding: 10px 14px;\n            border-radius: 10px;\n            font-size: 13px;\n            margin-bottom: 12px;\n        }\n        .lkhdtk-form-msg.lkhdtk-error {\n            display: block;\n            background: rgba(220, 38, 38, 0.08);\n            color: #b91c1c;\n            border: 1px solid rgba(220, 38, 38, 0.2);\n        }\n        .lkhdtk-form-msg.lkhdtk-success {\n            display: block;\n            background: rgba(34, 197, 94, 0.1);\n            color: #166534;\n            border: 1px solid rgba(34, 197, 94, 0.25);\n        }\n\n        \/* ================== PDF BODY ================== *\/\n        .lkhdtk-pdf-body {\n            flex: 1;\n            background: #f4f7f5;\n            border-radius: 0 0 20px 20px;\n            overflow: hidden;\n        }\n        .lkhdtk-pdf-body iframe {\n            width: 100%;\n            height: 100%;\n            border: none;\n            display: block;\n        }\n        .lkhdtk-pdf-loading {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            font-size: 15px;\n            color: #002E08;\n        }\n\n        \/* ================== BUTTONS ================== *\/\n        .lkhdtk-modal-actions {\n            display: flex;\n            gap: 10px;\n            margin-top: 20px;\n        }\n        .lkhdtk-btn {\n            flex: 1;\n            padding: 12px 18px;\n            font-family: inherit;\n            font-size: 14px;\n            font-weight: 600;\n            border: none;\n            border-radius: 12px;\n            cursor: pointer;\n            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n        }\n        .lkhdtk-btn-cancel {\n            background: #f3f4f6;\n            color: #4a5a4c;\n        }\n        .lkhdtk-btn-cancel:hover { background: #e5e7eb; }\n\n        .lkhdtk-btn-submit {\n            background: #002E08;\n            color: #ffffff;\n            box-shadow: 0 6px 16px rgba(0, 46, 8, 0.25);\n        }\n        .lkhdtk-btn-submit:hover:not(:disabled) {\n            background: #004A0D;\n            transform: translateY(-1px);\n            box-shadow: 0 10px 22px rgba(0, 46, 8, 0.35);\n        }\n        .lkhdtk-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }\n\n        .lkhdtk-btn-danger {\n            background: #dc2626;\n            color: #ffffff;\n            box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);\n        }\n        .lkhdtk-btn-danger:hover {\n            background: #b91c1c;\n            transform: translateY(-1px);\n            box-shadow: 0 10px 22px rgba(220, 38, 38, 0.4);\n        }\n\n        \/* ================== RESPONSIVE \u2014 TABLET (\u2264 1024px) ================== *\/\n        @media (max-width: 1024px) {\n            .lkhdtk-wrap { padding: 22px; }\n\n            \/* Tablet: 4 item lebih rapat, tinggi sedikit turun *\/\n            .lkhdtk-list { max-height: 320px; }\n\n            \/* Fade sedikit lebih pendek *\/\n            .lkhdtk-list-wrap::before,\n            .lkhdtk-list-wrap::after { height: 50px; }\n\n            .lkhdtk-item { padding: 13px 15px; gap: 12px; }\n            .lkhdtk-item-icon { width: 42px; height: 42px; }\n            .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title { font-size: 14.5px; }\n        }\n\n        \/* ================== RESPONSIVE \u2014 MOBILE (\u2264 640px) ================== *\/\n        @media (max-width: 640px) {\n            .lkhdtk-wrap { padding: 18px; border-radius: 16px; }\n\n            .lkhdtk-toolbar { flex-direction: column; }\n            .lkhdtk-btn-add { width: 100%; justify-content: center; }\n\n            \/* Mobile: 4 item lebih rapat lagi *\/\n            .lkhdtk-list { max-height: 300px; padding-right: 6px; }\n\n            \/* Fade lebih pendek *\/\n            .lkhdtk-list-wrap::before,\n            .lkhdtk-list-wrap::after { height: 40px; }\n\n            .lkhdtk-item { padding: 12px; gap: 10px; border-radius: 12px; }\n            .lkhdtk-item-icon { width: 38px; height: 38px; border-radius: 10px; }\n            .lkhdtk-item-icon svg { width: 18px; height: 18px; }\n            .lkhdtk-icon-btn { width: 34px; height: 34px; }\n\n            .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title { font-size: 14px; }\n\n            .lkhdtk-modal { padding: 22px; }\n            .lkhdtk-modal-lg { width: 96%; height: 88vh; padding: 0; }\n        }\n\n        \/* ================== RESPONSIVE \u2014 MOBILE KECIL (\u2264 400px) ================== *\/\n        @media (max-width: 400px) {\n            .lkhdtk-wrap { padding: 16px; }\n\n            .lkhdtk-list { max-height: 280px; }\n\n            .lkhdtk-list-wrap::before,\n            .lkhdtk-list-wrap::after { height: 36px; }\n\n            .lkhdtk-item { padding: 10px; gap: 8px; }\n            .lkhdtk-item-icon { width: 34px; height: 34px; }\n            .lkhdtk-item-icon svg { width: 16px; height: 16px; }\n            .lkhdtk-icon-btn { width: 30px; height: 30px; }\n            .lkhdtk-icon-btn svg { width: 14px; height: 14px; }\n\n            .lkhdtk-wrap .lkhdtk-item .lkhdtk-item-title { font-size: 13px; }\n            .lkhdtk-item-meta { font-size: 11px; }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            .lkhdtk-item, .lkhdtk-modal, .lkhdtk-icon-btn,\n            .lkhdtk-btn-add, .lkhdtk-btn, .lkhdtk-list-wrap::before,\n            .lkhdtk-list-wrap::after {\n                transition: none !important;\n                transform: none !important;\n            }\n        }\n    <\/style>\n\n    <script>\n    (function () {\n        'use strict';\n\n        var wrap = document.querySelector('.lkhdtk-wrap');\n        if (!wrap) return;\n\n        var AJAX       = wrap.dataset.ajax;\n        var NONCE      = wrap.dataset.nonce;\n        var CAN_ADD    = wrap.dataset.canAdd === '1';\n        var CAN_DELETE = wrap.dataset.canDelete === '1';\n        var LOGGED     = wrap.dataset.logged === '1';\n\n        var list         = document.getElementById('lkhdtk-list');\n        var listWrap     = document.getElementById('lkhdtk-list-wrap');\n        var visibleCount = document.getElementById('lkhdtk-visible-count');\n        var emptySearch  = document.getElementById('lkhdtk-empty-search');\n        var searchInput  = document.getElementById('lkhdtk-search-input');\n\n        \/* ============ HELPERS ============ *\/\n        function escapeHtml(str) {\n            return String(str == null ? '' : str).replace(\/[&<>\"']\/g, function (c) {\n                return { '&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;' }[c];\n            });\n        }\n        function openOverlay(el) {\n            if (!el) return;\n            el.classList.add('lkhdtk-show');\n            document.body.style.overflow = 'hidden';\n        }\n        function closeOverlay(el) {\n            if (!el) return;\n            el.classList.remove('lkhdtk-show');\n            document.body.style.overflow = '';\n        }\n        function showMsg(el, text, type) {\n            if (!el) return;\n            el.className = 'lkhdtk-form-msg lkhdtk-' + type;\n            el.textContent = text;\n        }\n        function clearMsg(el) {\n            if (!el) return;\n            el.className = 'lkhdtk-form-msg';\n            el.textContent = '';\n        }\n        function getEmbedUrl(url) {\n            var m = url.match(\/\\\/file\\\/d\\\/([a-zA-Z0-9_-]+)\/);\n            if (m && m[1]) return 'https:\/\/drive.google.com\/file\/d\/' + m[1] + '\/preview';\n            var m2 = url.match(\/[?&]id=([a-zA-Z0-9_-]+)\/);\n            if (m2 && m2[1]) return 'https:\/\/drive.google.com\/file\/d\/' + m2[1] + '\/preview';\n            return url;\n        }\n\n        \/* ============ FADE INDICATOR ============ *\/\n        function updateFadeIndicator() {\n            if (!list || !listWrap) return;\n\n            var scrollTop    = list.scrollTop;\n            var scrollHeight = list.scrollHeight;\n            var clientHeight = list.clientHeight;\n            var tolerance    = 2; \/\/ buffer supaya tidak flicker\n\n            \/\/ Kalau tidak bisa scroll (konten <= container), matikan fade\n            if (scrollHeight <= clientHeight + tolerance) {\n                listWrap.classList.add('no-scroll');\n                listWrap.classList.remove('at-top', 'at-bottom');\n                return;\n            }\n            listWrap.classList.remove('no-scroll');\n\n            \/\/ Deteksi posisi\n            if (scrollTop <= tolerance) {\n                listWrap.classList.add('at-top');\n            } else {\n                listWrap.classList.remove('at-top');\n            }\n\n            if (scrollTop + clientHeight >= scrollHeight - tolerance) {\n                listWrap.classList.add('at-bottom');\n            } else {\n                listWrap.classList.remove('at-bottom');\n            }\n        }\n\n        if (list) {\n            list.addEventListener('scroll', updateFadeIndicator, { passive: true });\n        }\n        window.addEventListener('resize', updateFadeIndicator);\n        window.addEventListener('orientationchange', updateFadeIndicator);\n\n        \/* ============ SEARCH ============ *\/\n        function applySearch() {\n            var q = (searchInput ? searchInput.value : '').toLowerCase().trim();\n            var items = list ? list.querySelectorAll('.lkhdtk-item') : [];\n            var visible = 0;\n\n            items.forEach(function (item) {\n                var nama = (item.dataset.namaLower || '').toLowerCase();\n                var match = q === '' || nama.indexOf(q) !== -1;\n                item.style.display = match ? '' : 'none';\n                if (match) visible++;\n            });\n\n            if (visibleCount) visibleCount.textContent = visible;\n            if (emptySearch) {\n                emptySearch.style.display = (visible === 0 && q !== '') ? 'block' : 'none';\n            }\n\n            \/\/ Update fade setelah filter (jumlah item berubah)\n            if (list) list.scrollTop = 0;\n            updateFadeIndicator();\n        }\n        if (searchInput) searchInput.addEventListener('input', applySearch);\n\n        \/* ============ PDF MODAL ============ *\/\n        var pdfModal = document.getElementById('lkhdtk-pdf-modal');\n        var pdfBody  = document.getElementById('lkhdtk-pdf-body');\n        var pdfTitle = document.getElementById('lkhdtk-pdf-title');\n        var pdfClose = document.getElementById('lkhdtk-pdf-close');\n\n        function openPdf(url, title) {\n            if (!pdfModal || !pdfBody) return;\n            if (pdfTitle) pdfTitle.textContent = title || 'Preview Dokumen';\n            pdfBody.innerHTML = '<div class=\"lkhdtk-pdf-loading\">Memuat dokumen...<\/div>';\n            openOverlay(pdfModal);\n\n            var embed = getEmbedUrl(url);\n            setTimeout(function () {\n                var iframe = document.createElement('iframe');\n                iframe.src = embed;\n                iframe.title = title || 'Preview Dokumen';\n                iframe.setAttribute('allow', 'autoplay');\n                iframe.setAttribute('loading', 'lazy');\n                pdfBody.innerHTML = '';\n                pdfBody.appendChild(iframe);\n            }, 150);\n        }\n        function closePdf() {\n            closeOverlay(pdfModal);\n            setTimeout(function () {\n                if (pdfBody) pdfBody.innerHTML = '<div class=\"lkhdtk-pdf-loading\">Memuat dokumen...<\/div>';\n            }, 300);\n        }\n        if (pdfClose) pdfClose.addEventListener('click', closePdf);\n\n        \/* ============ ADD MODAL ============ *\/\n        var addModal   = document.getElementById('lkhdtk-add-modal');\n        var btnAdd     = document.getElementById('lkhdtk-btn-add');\n        var addClose   = document.getElementById('lkhdtk-add-close');\n        var addCancel  = document.getElementById('lkhdtk-add-cancel');\n        var addForm    = document.getElementById('lkhdtk-add-form');\n        var inputNama  = document.getElementById('lkhdtk-input-nama');\n        var inputLink  = document.getElementById('lkhdtk-input-link');\n        var addMsg     = document.getElementById('lkhdtk-add-msg');\n        var addSubmit  = document.getElementById('lkhdtk-add-submit');\n        var addBtnText = addSubmit ? addSubmit.querySelector('.lkhdtk-btn-text')    : null;\n        var addBtnLoad = addSubmit ? addSubmit.querySelector('.lkhdtk-btn-loading') : null;\n\n        if (btnAdd) {\n            btnAdd.addEventListener('click', function () {\n                clearMsg(addMsg);\n                if (addForm) addForm.reset();\n                openOverlay(addModal);\n                setTimeout(function () { if (inputNama) inputNama.focus(); }, 200);\n            });\n        }\n        if (addClose)  addClose.addEventListener('click',  function () { closeOverlay(addModal); });\n        if (addCancel) addCancel.addEventListener('click', function () { closeOverlay(addModal); });\n\n        if (addForm) {\n            addForm.addEventListener('submit', function (e) {\n                e.preventDefault();\n                clearMsg(addMsg);\n\n                var nama = inputNama.value.trim();\n                var link = inputLink.value.trim();\n                if (!nama || !link) {\n                    showMsg(addMsg, 'Nama dan link wajib diisi.', 'error');\n                    return;\n                }\n\n                if (addSubmit) addSubmit.disabled = true;\n                if (addBtnText) addBtnText.style.display = 'none';\n                if (addBtnLoad) addBtnLoad.style.display = 'inline';\n\n                var fd = new FormData();\n                fd.append('action', 'lkhdtk_add');\n                fd.append('nonce', NONCE);\n                fd.append('nama', nama);\n                fd.append('link', link);\n\n                fetch(AJAX, { method: 'POST', credentials: 'same-origin', body: fd })\n                    .then(function (r) { return r.json(); })\n                    .then(function (res) {\n                        if (addSubmit) addSubmit.disabled = false;\n                        if (addBtnText) addBtnText.style.display = 'inline';\n                        if (addBtnLoad) addBtnLoad.style.display = 'none';\n\n                        if (!res || !res.success) {\n                            var m = (res && res.data && res.data.message) || 'Gagal menyimpan.';\n                            showMsg(addMsg, m, 'error');\n                            return;\n                        }\n\n                        var d = res.data;\n                        var newNode = buildItem(d);\n\n                        if (list) {\n                            list.insertBefore(newNode, list.firstChild);\n                            list.scrollTop = 0;\n                        }\n\n                        var emptyInitial = list.querySelector('.lkhdtk-empty-initial');\n                        if (emptyInitial) emptyInitial.remove();\n\n                        applySearch();\n\n                        showMsg(addMsg, 'Laporan berhasil ditambahkan.', 'success');\n                        setTimeout(function () {\n                            closeOverlay(addModal);\n                            clearMsg(addMsg);\n                        }, 900);\n                    })\n                    .catch(function () {\n                        if (addSubmit) addSubmit.disabled = false;\n                        if (addBtnText) addBtnText.style.display = 'inline';\n                        if (addBtnLoad) addBtnLoad.style.display = 'none';\n                        showMsg(addMsg, 'Terjadi kesalahan koneksi.', 'error');\n                    });\n            });\n        }\n\n        function buildItem(d) {\n            var div = document.createElement('div');\n            div.className = 'lkhdtk-item';\n            div.dataset.id        = d.id;\n            div.dataset.link      = d.link;\n            div.dataset.nama      = d.nama;\n            div.dataset.namaLower = String(d.nama || '').toLowerCase();\n\n            var deleteBtnHtml = '';\n            if (CAN_DELETE) {\n                deleteBtnHtml =\n                    '<button type=\"button\" class=\"lkhdtk-icon-btn lkhdtk-btn-delete\"' +\n                    ' data-id=\"' + escapeHtml(d.id) + '\"' +\n                    ' data-nama=\"' + escapeHtml(d.nama) + '\"' +\n                    ' title=\"Hapus dokumen\">' +\n                        '<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n                            '<path d=\"M4 7H20\" stroke=\"#dc2626\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>' +\n                            '<path d=\"M10 11V17M14 11V17\" stroke=\"#dc2626\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>' +\n                            '<path d=\"M6 7L7 20C7 20.55 7.45 21 8 21H16C16.55 21 17 20.55 17 20L18 7\" stroke=\"#dc2626\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/>' +\n                            '<path d=\"M9 7V4C9 3.45 9.45 3 10 3H14C14.55 3 15 3.45 15 4V7\" stroke=\"#dc2626\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/>' +\n                        '<\/svg>' +\n                    '<\/button>';\n            }\n\n            var metaHtml = '';\n            if (d.tanggal_display) {\n                metaHtml += '<span>' + escapeHtml(d.tanggal_display) + '<\/span>';\n            }\n            if (d.tanggal_display && d.oleh) {\n                metaHtml += '<span class=\"lkhdtk-sep\">\u2022<\/span>';\n            }\n            if (d.oleh) {\n                metaHtml += '<span>oleh ' + escapeHtml(d.oleh) + '<\/span>';\n            }\n\n            div.innerHTML =\n                '<div class=\"lkhdtk-item-icon\">' +\n                    '<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n                        '<path d=\"M14 2H6C5.45 2 5 2.45 5 3V21C5 21.55 5.45 22 6 22H18C18.55 22 19 21.55 19 21V7L14 2Z\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>' +\n                        '<path d=\"M14 2V7H19\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>' +\n                        '<path d=\"M9 13H15M9 17H13\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>' +\n                    '<\/svg>' +\n                '<\/div>' +\n                '<div class=\"lkhdtk-item-body\">' +\n                    '<button type=\"button\" class=\"lkhdtk-item-title lkhdtk-open-pdf\">' + escapeHtml(d.nama) + '<\/button>' +\n                    '<div class=\"lkhdtk-item-meta\">' + metaHtml + '<\/div>' +\n                '<\/div>' +\n                '<div class=\"lkhdtk-item-actions\">' +\n                    '<button type=\"button\" class=\"lkhdtk-icon-btn lkhdtk-btn-open lkhdtk-open-pdf\" title=\"Lihat dokumen\">' +\n                        '<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n                            '<path d=\"M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>' +\n                            '<circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>' +\n                        '<\/svg>' +\n                    '<\/button>' +\n                    deleteBtnHtml +\n                '<\/div>';\n\n            return div;\n        }\n\n        \/* ============ DELETE MODAL ============ *\/\n        var delModal   = document.getElementById('lkhdtk-delete-modal');\n        var delName    = document.getElementById('lkhdtk-delete-name');\n        var delCancel  = document.getElementById('lkhdtk-delete-cancel');\n        var delConfirm = document.getElementById('lkhdtk-delete-confirm');\n        var delMsg     = document.getElementById('lkhdtk-delete-msg');\n        var currentDelId = null;\n\n        function openDeleteModal(id, nama) {\n            currentDelId = id;\n            if (delName) delName.innerHTML = 'Anda yakin akan menghapus dokumen <strong>' + escapeHtml(nama) + '<\/strong>?';\n            clearMsg(delMsg);\n            openOverlay(delModal);\n        }\n\n        if (delCancel) delCancel.addEventListener('click', function () { closeOverlay(delModal); });\n\n        if (delConfirm) {\n            delConfirm.addEventListener('click', function () {\n                if (!currentDelId) return;\n                clearMsg(delMsg);\n                delConfirm.disabled = true;\n                var orig = delConfirm.textContent;\n                delConfirm.textContent = 'Menghapus...';\n\n                var fd = new FormData();\n                fd.append('action', 'lkhdtk_delete');\n                fd.append('nonce', NONCE);\n                fd.append('id', currentDelId);\n\n                fetch(AJAX, { method: 'POST', credentials: 'same-origin', body: fd })\n                    .then(function (r) { return r.json(); })\n                    .then(function (res) {\n                        delConfirm.disabled = false;\n                        delConfirm.textContent = orig;\n\n                        if (!res || !res.success) {\n                            var m = (res && res.data && res.data.message) || 'Gagal menghapus.';\n                            showMsg(delMsg, m, 'error');\n                            return;\n                        }\n\n                        var item = list ? list.querySelector('.lkhdtk-item[data-id=\"' + currentDelId + '\"]') : null;\n                        if (item) {\n                            item.style.transition = 'all 0.3s ease';\n                            item.style.opacity = '0';\n                            item.style.transform = 'translateX(-20px)';\n                            setTimeout(function () {\n                                item.remove();\n                                applySearch();\n                                closeOverlay(delModal);\n                            }, 300);\n                        } else {\n                            closeOverlay(delModal);\n                        }\n                        currentDelId = null;\n                    })\n                    .catch(function () {\n                        delConfirm.disabled = false;\n                        delConfirm.textContent = orig;\n                        showMsg(delMsg, 'Terjadi kesalahan koneksi.', 'error');\n                    });\n            });\n        }\n\n        \/* ============ EVENT DELEGATION ============ *\/\n        document.addEventListener('click', function (e) {\n            if (e.target.classList && e.target.classList.contains('lkhdtk-modal-overlay')) {\n                closeOverlay(e.target);\n                if (e.target === pdfModal) {\n                    setTimeout(function () {\n                        if (pdfBody) pdfBody.innerHTML = '<div class=\"lkhdtk-pdf-loading\">Memuat dokumen...<\/div>';\n                    }, 300);\n                }\n                return;\n            }\n\n            var delBtn = e.target.closest && e.target.closest('.lkhdtk-btn-delete');\n            if (delBtn) {\n                e.preventDefault();\n                e.stopPropagation();\n                openDeleteModal(delBtn.dataset.id, delBtn.dataset.nama);\n                return;\n            }\n\n            var openBtn = e.target.closest && e.target.closest('.lkhdtk-open-pdf');\n            if (openBtn) {\n                e.preventDefault();\n                e.stopPropagation();\n                var item = openBtn.closest('.lkhdtk-item');\n                if (!item) return;\n                openPdf(item.dataset.link, item.dataset.nama);\n                return;\n            }\n        });\n\n        document.addEventListener('keydown', function (e) {\n            if (e.key === 'Escape') {\n                closeOverlay(pdfModal);\n                closeOverlay(addModal);\n                closeOverlay(delModal);\n            }\n        });\n\n        \/* ============ INIT ============ *\/\n        \/\/ Update fade setelah semua elemen siap\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', updateFadeIndicator);\n        } else {\n            updateFadeIndicator();\n        }\n        \/\/ Update lagi setelah gambar\/font selesai load (tinggi mungkin berubah)\n        window.addEventListener('load', updateFadeIndicator);\n\n    })();\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-2320225452\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-2320225452\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-5587704 e-con-full e-flex e-con e-child\" data-id=\"5587704\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-2320225453\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-2320225453\" data-tab-index=\"3\" style=\"--n-tabs-title-order: 3;\" class=\" elementor-element elementor-element-8532043 e-con-full e-flex e-con e-child\" data-id=\"8532043\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-2320225454\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-2320225454\" data-tab-index=\"4\" style=\"--n-tabs-title-order: 4;\" class=\" elementor-element elementor-element-b162c19 e-con-full e-flex e-con e-child\" data-id=\"b162c19\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-596cd20 elementor-widget elementor-widget-shortcode\" data-id=\"596cd20\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n    <div class=\"skkhdtk-wrap\"\n         data-ajax=\"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-admin\/admin-ajax.php\"\n         data-nonce=\"9f27deec5c\"\n         data-can-add=\"0\"\n         data-can-delete=\"0\"\n         data-logged=\"0\">\n\n        <!-- Toolbar -->\n        <div class=\"skkhdtk-toolbar\">\n            <div class=\"skkhdtk-search\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                    <path d=\"M20 20L17 17\" stroke=\"#002E08\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n                <\/svg>\n                <input type=\"text\" id=\"skkhdtk-search-input\" placeholder=\"Cari nomor SK atau nama SK...\">\n            <\/div>\n\n            <div class=\"skkhdtk-filter\">\n                <svg class=\"skkhdtk-filter-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M4 6H20M7 12H17M10 18H14\" stroke=\"#002E08\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>\n                <\/svg>\n                <select id=\"skkhdtk-filter-khdtk\">\n                    <option value=\"\">Semua KHDTK<\/option>\n                                            <option value=\"pondok_buluh\">KHDTK Pondok Buluh<\/option>\n                                            <option value=\"aek_nauli\">KHDTK Aek Nauli<\/option>\n                                    <\/select>\n            <\/div>\n\n                    <\/div>\n\n        <!-- Counter -->\n        <div class=\"skkhdtk-count\">\n            Menampilkan <strong id=\"skkhdtk-visible-count\">2<\/strong>\n            dari 2 SK\n        <\/div>\n\n        <!-- List wrapper -->\n        <div class=\"skkhdtk-list-wrap\" id=\"skkhdtk-list-wrap\">\n            <div class=\"skkhdtk-list\" id=\"skkhdtk-list\">\n                                                            <div class=\"skkhdtk-item\"\n                             data-id=\"sk_khdtk_an_1\"\n                             data-link=\"https:\/\/drive.google.com\/file\/d\/1qGqyz4hVUp_2PXG_GrhR0sXrQugWYfbZ\/view?usp=sharing\"\n                             data-nama=\"SK Penetapan KHDTK Aek Nauli\"\n                             data-nama-lower=\"sk penetapan khdtk aek nauli\"\n                             data-nomor=\"SK.1030\/Menhut-VII\/KUH\/2015\"\n                             data-nomor-lower=\"sk.1030\/menhut-vii\/kuh\/2015\"\n                             data-khdtk=\"aek_nauli\"\n                             data-tanggal=\"1756972800\">\n\n                            <div class=\"skkhdtk-item-icon\">\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M14 2H6C5.45 2 5 2.45 5 3V21C5 21.55 5.45 22 6 22H18C18.55 22 19 21.55 19 21V7L14 2Z\"\n                                          stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M14 2V7H19\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M9 13H15M9 17H13\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/div>\n\n                            <div class=\"skkhdtk-item-body\">\n                                                                    <div class=\"skkhdtk-item-nomor\">\n                                        <span class=\"skkhdtk-nomor-label\">NOMOR :<\/span>\n                                        <span class=\"skkhdtk-nomor-value\">SK.1030\/Menhut-VII\/KUH\/2015<\/span>\n                                    <\/div>\n                                \n                                <button type=\"button\" class=\"skkhdtk-item-title skkhdtk-open-pdf\">\n                                    SK Penetapan KHDTK Aek Nauli                                <\/button>\n\n                                <div class=\"skkhdtk-item-meta\">\n                                    <span class=\"skkhdtk-badge skkhdtk-badge-aek_nauli\">\n                                        KHDTK Aek Nauli                                    <\/span>\n                                                                            <span class=\"skkhdtk-sep\">\u2022<\/span>\n                                        <span>Tanggal SK: 4 September 2025<\/span>\n                                                                                                                <span class=\"skkhdtk-sep\">\u2022<\/span>\n                                        <span>oleh Admin<\/span>\n                                                                    <\/div>\n                            <\/div>\n\n                            <div class=\"skkhdtk-item-actions\">\n                                <button type=\"button\"\n                                        class=\"skkhdtk-icon-btn skkhdtk-btn-open skkhdtk-open-pdf\"\n                                        title=\"Lihat SK\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z\"\n                                              stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                    <\/svg>\n                                <\/button>\n\n                                                            <\/div>\n                        <\/div>\n                                            <div class=\"skkhdtk-item\"\n                             data-id=\"sk_khdtk_pb_1\"\n                             data-link=\"https:\/\/drive.google.com\/file\/d\/1vmM1tHEA_2-rxAZET7AYAS7h_zl7sObi\/view?usp=sharing\"\n                             data-nama=\"SK Penetapan KHDTK Pondok Buluh\"\n                             data-nama-lower=\"sk penetapan khdtk pondok buluh\"\n                             data-nomor=\"541 TAHUN 2025\"\n                             data-nomor-lower=\"541 tahun 2025\"\n                             data-khdtk=\"pondok_buluh\"\n                             data-tanggal=\"1429516800\">\n\n                            <div class=\"skkhdtk-item-icon\">\n                                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M14 2H6C5.45 2 5 2.45 5 3V21C5 21.55 5.45 22 6 22H18C18.55 22 19 21.55 19 21V7L14 2Z\"\n                                          stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M14 2V7H19\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>\n                                    <path d=\"M9 13H15M9 17H13\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/div>\n\n                            <div class=\"skkhdtk-item-body\">\n                                                                    <div class=\"skkhdtk-item-nomor\">\n                                        <span class=\"skkhdtk-nomor-label\">NOMOR :<\/span>\n                                        <span class=\"skkhdtk-nomor-value\">541 TAHUN 2025<\/span>\n                                    <\/div>\n                                \n                                <button type=\"button\" class=\"skkhdtk-item-title skkhdtk-open-pdf\">\n                                    SK Penetapan KHDTK Pondok Buluh                                <\/button>\n\n                                <div class=\"skkhdtk-item-meta\">\n                                    <span class=\"skkhdtk-badge skkhdtk-badge-pondok_buluh\">\n                                        KHDTK Pondok Buluh                                    <\/span>\n                                                                            <span class=\"skkhdtk-sep\">\u2022<\/span>\n                                        <span>Tanggal SK: 20 April 2015<\/span>\n                                                                                                                <span class=\"skkhdtk-sep\">\u2022<\/span>\n                                        <span>oleh Admin<\/span>\n                                                                    <\/div>\n                            <\/div>\n\n                            <div class=\"skkhdtk-item-actions\">\n                                <button type=\"button\"\n                                        class=\"skkhdtk-icon-btn skkhdtk-btn-open skkhdtk-open-pdf\"\n                                        title=\"Lihat SK\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                        <path d=\"M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z\"\n                                              stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>\n                                    <\/svg>\n                                <\/button>\n\n                                                            <\/div>\n                        <\/div>\n                                                <\/div>\n        <\/div>\n\n        <div class=\"skkhdtk-empty skkhdtk-empty-search\" id=\"skkhdtk-empty-search\" style=\"display:none;\">\n            Tidak ada SK yang cocok dengan pencarian \/ filter.\n        <\/div>\n    <\/div>\n\n        <div class=\"skkhdtk-modal-overlay\" id=\"skkhdtk-pdf-modal\">\n        <div class=\"skkhdtk-modal skkhdtk-modal-lg\">\n            <div class=\"skkhdtk-modal-header\">\n                <h3 id=\"skkhdtk-pdf-title\">Preview SK<\/h3>\n                <button type=\"button\" class=\"skkhdtk-modal-close\" id=\"skkhdtk-pdf-close\" aria-label=\"Tutup\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M6 6L18 18M6 18L18 6\" stroke=\"#002E08\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n            <div class=\"skkhdtk-modal-body skkhdtk-pdf-body\" id=\"skkhdtk-pdf-body\">\n                <div class=\"skkhdtk-pdf-loading\">Memuat dokumen...<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n        \n        \n    <style>\n        \/* ================== GLOBAL ================== *\/\n        .skkhdtk-wrap,\n        .skkhdtk-modal-overlay,\n        .skkhdtk-modal { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }\n\n        .skkhdtk-wrap *,\n        .skkhdtk-modal-overlay * { box-sizing: border-box; }\n\n        .skkhdtk-wrap {\n            background: #ffffff;\n            border-radius: 20px;\n            padding: 24px;\n            border: 1px solid rgba(0, 46, 8, 0.06);\n            box-shadow: 0 10px 40px rgba(0, 46, 8, 0.06);\n        }\n\n        \/* ================== TOOLBAR ================== *\/\n        .skkhdtk-toolbar {\n            display: flex;\n            gap: 12px;\n            margin-bottom: 16px;\n            flex-wrap: wrap;\n        }\n\n        .skkhdtk-search {\n            flex: 1;\n            min-width: 180px;\n            position: relative;\n        }\n        .skkhdtk-search svg {\n            position: absolute;\n            left: 16px;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 18px; height: 18px;\n            opacity: 0.5;\n            pointer-events: none;\n            transition: opacity 0.25s ease;\n        }\n        .skkhdtk-search input {\n            width: 100%;\n            padding: 13px 16px 13px 46px;\n            font-size: 14px;\n            font-family: inherit;\n            color: #002E08;\n            background: #ffffff;\n            border: 1.5px solid #e4ebe5;\n            border-radius: 12px;\n            outline: none;\n            transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\n        }\n        .skkhdtk-search input::placeholder { color: #a8b5aa; }\n        .skkhdtk-search input:focus {\n            border-color: #002E08;\n            background: #fbfffb;\n            box-shadow: 0 0 0 4px rgba(0, 46, 8, 0.08);\n        }\n        .skkhdtk-search:focus-within svg { opacity: 1; }\n\n        .skkhdtk-filter {\n            position: relative;\n            display: inline-flex;\n            align-items: center;\n            min-width: 180px;\n        }\n        .skkhdtk-filter-icon {\n            position: absolute;\n            left: 14px;\n            width: 16px;\n            height: 16px;\n            opacity: 0.5;\n            pointer-events: none;\n            z-index: 2;\n        }\n        .skkhdtk-filter select {\n            width: 100%;\n            appearance: none;\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            padding: 13px 40px 13px 40px;\n            font-size: 14px;\n            font-family: inherit;\n            font-weight: 500;\n            color: #002E08;\n            background: #ffffff;\n            border: 1.5px solid #e4ebe5;\n            border-radius: 12px;\n            outline: none;\n            cursor: pointer;\n            transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\n            background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23002E08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n            background-repeat: no-repeat;\n            background-position: right 12px center;\n            background-size: 18px;\n        }\n        .skkhdtk-filter select:focus {\n            border-color: #002E08;\n            background-color: #fbfffb;\n            box-shadow: 0 0 0 4px rgba(0, 46, 8, 0.08);\n        }\n\n        .skkhdtk-btn-add {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 13px 20px;\n            font-family: inherit;\n            font-size: 14px;\n            font-weight: 600;\n            color: #ffffff;\n            background: #002E08;\n            border: none;\n            border-radius: 12px;\n            cursor: pointer;\n            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),\n                        background 0.3s ease,\n                        box-shadow 0.3s ease;\n            box-shadow: 0 6px 16px rgba(0, 46, 8, 0.22);\n            white-space: nowrap;\n        }\n        .skkhdtk-btn-add:hover {\n            background: #004A0D;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 24px rgba(0, 46, 8, 0.32);\n        }\n        .skkhdtk-btn-add:active { transform: translateY(0); }\n        .skkhdtk-btn-add svg { width: 16px; height: 16px; }\n\n        \/* ================== COUNT ================== *\/\n        .skkhdtk-count {\n            font-size: 13px;\n            color: #6b7a6d;\n            margin-bottom: 16px;\n        }\n        .skkhdtk-count strong { color: #002E08; font-weight: 600; }\n\n        \/* ================== LIST WRAPPER \u2014 fade indicator ================== *\/\n        .skkhdtk-list-wrap {\n            position: relative;\n            border-radius: 14px;\n        }\n\n        .skkhdtk-list-wrap::before {\n            content: '';\n            position: absolute;\n            top: 0; left: 0; right: 0;\n            height: 60px;\n            background: linear-gradient(to bottom,\n                #ffffff 0%,\n                rgba(255, 255, 255, 0.85) 30%,\n                rgba(255, 255, 255, 0) 100%);\n            pointer-events: none;\n            z-index: 2;\n            opacity: 0;\n            transition: opacity 0.35s ease;\n            border-radius: 14px 14px 0 0;\n        }\n\n        .skkhdtk-list-wrap::after {\n            content: '';\n            position: absolute;\n            bottom: 0; left: 0; right: 0;\n            height: 60px;\n            background: linear-gradient(to top,\n                #ffffff 0%,\n                rgba(255, 255, 255, 0.85) 30%,\n                rgba(255, 255, 255, 0) 100%);\n            pointer-events: none;\n            z-index: 2;\n            opacity: 1;\n            transition: opacity 0.35s ease;\n            border-radius: 0 0 14px 14px;\n        }\n\n        .skkhdtk-list-wrap.at-top::before { opacity: 0; }\n        .skkhdtk-list-wrap:not(.at-top)::before { opacity: 1; }\n\n        .skkhdtk-list-wrap.at-bottom::after { opacity: 0; }\n        .skkhdtk-list-wrap:not(.at-bottom)::after { opacity: 1; }\n\n        .skkhdtk-list-wrap.no-scroll::before,\n        .skkhdtk-list-wrap.no-scroll::after { opacity: 0; }\n\n        \/* ================== LIST ================== *\/\n        .skkhdtk-list {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n            max-height: 400px;\n            overflow-y: auto;\n            overflow-x: hidden;\n            padding-right: 8px;\n            scroll-behavior: smooth;\n            -webkit-overflow-scrolling: touch;\n        }\n\n        .skkhdtk-list::-webkit-scrollbar { width: 6px; }\n        .skkhdtk-list::-webkit-scrollbar-track {\n            background: #f0f5f1;\n            border-radius: 10px;\n        }\n        .skkhdtk-list::-webkit-scrollbar-thumb {\n            background: #c4d9cb;\n            border-radius: 10px;\n            transition: background 0.2s ease;\n        }\n        .skkhdtk-list::-webkit-scrollbar-thumb:hover {\n            background: #9bb8a5;\n        }\n        .skkhdtk-list {\n            scrollbar-width: thin;\n            scrollbar-color: #c4d9cb #f0f5f1;\n        }\n\n        \/* === Item === *\/\n        .skkhdtk-item {\n            display: flex;\n            align-items: flex-start;\n            gap: 14px;\n            padding: 14px 16px;\n            background: #ffffff;\n            border: 1px solid #edf2ee;\n            border-radius: 14px;\n            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n            flex-shrink: 0;\n        }\n\n        .skkhdtk-item:hover {\n            border-color: rgba(0, 46, 8, 0.18);\n            background: #f0f9f2;\n            transform: translateY(-2px);\n            box-shadow: 0 8px 20px rgba(0, 46, 8, 0.06);\n        }\n\n        .skkhdtk-item-icon {\n            flex-shrink: 0;\n            width: 44px;\n            height: 44px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: rgba(0, 46, 8, 0.06);\n            border-radius: 12px;\n            transition: background 0.25s ease;\n            margin-top: 2px;\n        }\n        .skkhdtk-item:hover .skkhdtk-item-icon {\n            background: rgba(0, 46, 8, 0.09);\n        }\n        .skkhdtk-item-icon svg { width: 22px; height: 22px; }\n\n        .skkhdtk-item-body {\n            flex: 1;\n            min-width: 0;\n        }\n\n        \/* === Nomor SK \u2014 di atas judul === *\/\n        .skkhdtk-item-nomor {\n            display: flex;\n            align-items: baseline;\n            gap: 6px;\n            margin-bottom: 4px;\n            font-size: 12.5px;\n            line-height: 1.4;\n            flex-wrap: wrap;\n        }\n        .skkhdtk-nomor-label {\n            font-weight: 600;\n            color: #4a5a4c;\n            letter-spacing: 0.3px;\n        }\n        .skkhdtk-nomor-value {\n            font-weight: 700;\n            color: #002E08;\n            letter-spacing: 0.2px;\n            word-break: break-word;\n        }\n\n        \/* Reset button default *\/\n        .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title {\n            all: unset;\n            display: block;\n            width: 100%;\n            text-align: left;\n            font-family: inherit;\n            font-size: 15px;\n            font-weight: 600;\n            line-height: 1.4;\n            color: #002E08;\n            cursor: pointer;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            transition: color 0.2s ease;\n            -webkit-tap-highlight-color: transparent;\n        }\n        .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title:hover {\n            color: #004A0D;\n            text-decoration: underline;\n            text-decoration-color: rgba(0, 46, 8, 0.4);\n            text-underline-offset: 3px;\n        }\n        .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title:focus-visible {\n            outline: 2px solid rgba(0, 46, 8, 0.4);\n            outline-offset: 2px;\n            border-radius: 4px;\n        }\n        .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title:active,\n        .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title:visited {\n            background: transparent;\n            color: #002E08;\n        }\n        .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title::selection {\n            background: rgba(0, 46, 8, 0.15);\n            color: #002E08;\n        }\n        .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title::-moz-selection {\n            background: rgba(0, 46, 8, 0.15);\n            color: #002E08;\n        }\n\n        \/* === Meta dengan badge KHDTK === *\/\n        .skkhdtk-item-meta {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            flex-wrap: wrap;\n            font-size: 12px;\n            color: #6b7a6d;\n            transition: color 0.25s ease;\n            margin-top: 6px;\n        }\n        .skkhdtk-item:hover .skkhdtk-item-meta { color: #4a5a4c; }\n        .skkhdtk-sep { opacity: 0.5; }\n\n        \/* Badge KHDTK *\/\n        .skkhdtk-badge {\n            display: inline-flex;\n            align-items: center;\n            padding: 3px 10px;\n            border-radius: 6px;\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 0.2px;\n            white-space: nowrap;\n            line-height: 1.4;\n        }\n        .skkhdtk-badge-pondok_buluh {\n            background: rgba(0, 46, 8, 0.1);\n            color: #002E08;\n            border: 1px solid rgba(0, 46, 8, 0.15);\n        }\n        .skkhdtk-badge-aek_nauli {\n            background: rgba(44, 125, 160, 0.12);\n            color: #1e5a7a;\n            border: 1px solid rgba(44, 125, 160, 0.2);\n        }\n\n        .skkhdtk-item-actions {\n            display: flex;\n            gap: 6px;\n            flex-shrink: 0;\n            margin-top: 2px;\n        }\n\n        .skkhdtk-icon-btn {\n            width: 38px;\n            height: 38px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            background: #ffffff;\n            border: 1.5px solid #e4ebe5;\n            border-radius: 10px;\n            cursor: pointer;\n            transition: all 0.25s ease;\n            text-decoration: none;\n            padding: 0;\n        }\n        .skkhdtk-icon-btn:hover {\n            border-color: #002E08;\n            background: #fbfffb;\n            transform: translateY(-1px);\n        }\n        .skkhdtk-icon-btn svg { width: 16px; height: 16px; }\n\n        .skkhdtk-btn-delete:hover {\n            border-color: #dc2626;\n            background: rgba(220, 38, 38, 0.06);\n        }\n\n        .skkhdtk-empty {\n            padding: 40px 20px;\n            text-align: center;\n            color: #6b7a6d;\n            font-size: 14px;\n            background: #fbfffb;\n            border-radius: 14px;\n            border: 1px dashed #dfe8e1;\n        }\n        .skkhdtk-empty-search { margin-top: 12px; }\n\n        \/* ================== MODALS ================== *\/\n        .skkhdtk-modal-overlay {\n            position: fixed;\n            inset: 0;\n            background: rgba(0, 46, 8, 0.55);\n            backdrop-filter: blur(4px);\n            -webkit-backdrop-filter: blur(4px);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 20px;\n            z-index: 999999;\n            opacity: 0;\n            visibility: hidden;\n            transition: opacity 0.3s ease, visibility 0.3s ease;\n        }\n        .skkhdtk-modal-overlay.skkhdtk-show {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        .skkhdtk-modal {\n            background: #ffffff;\n            border-radius: 20px;\n            padding: 26px;\n            width: 100%;\n            max-width: 460px;\n            box-shadow: 0 24px 60px rgba(0, 46, 8, 0.25);\n            transform: translateY(20px) scale(0.96);\n            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n            max-height: 90vh;\n            overflow-y: auto;\n        }\n        .skkhdtk-modal-overlay.skkhdtk-show .skkhdtk-modal {\n            transform: translateY(0) scale(1);\n        }\n\n        .skkhdtk-modal-sm {\n            max-width: 380px;\n            text-align: center;\n        }\n\n        .skkhdtk-modal-lg {\n            max-width: 1000px;\n            width: 90%;\n            padding: 0;\n            display: flex;\n            flex-direction: column;\n            height: 85vh;\n            overflow: hidden;\n        }\n        .skkhdtk-modal-lg .skkhdtk-modal-header {\n            padding: 16px 22px;\n            border-bottom: 1px solid #edf2ee;\n            background: #ffffff;\n            border-radius: 20px 20px 0 0;\n            flex-shrink: 0;\n        }\n\n        .skkhdtk-modal-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 12px;\n            margin-bottom: 20px;\n        }\n        .skkhdtk-modal-lg .skkhdtk-modal-header { margin-bottom: 0; }\n\n        .skkhdtk-modal-header h3 {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n            color: #002E08;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .skkhdtk-modal-close {\n            width: 36px;\n            height: 36px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            background: rgba(0, 46, 8, 0.06);\n            border: none;\n            border-radius: 10px;\n            cursor: pointer;\n            transition: background 0.2s ease;\n            flex-shrink: 0;\n            padding: 0;\n        }\n        .skkhdtk-modal-close:hover { background: rgba(0, 46, 8, 0.12); }\n        .skkhdtk-modal-close svg { width: 18px; height: 18px; }\n\n        .skkhdtk-modal-icon-warn {\n            width: 64px; height: 64px;\n            margin: 0 auto 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: rgba(220, 38, 38, 0.08);\n            border-radius: 50%;\n        }\n        .skkhdtk-modal-icon-warn svg { width: 32px; height: 32px; }\n        .skkhdtk-modal-sm h3 {\n            margin: 0 0 8px;\n            font-size: 19px;\n            font-weight: 600;\n            color: #002E08;\n        }\n        .skkhdtk-modal-sm p {\n            margin: 0 0 20px;\n            font-size: 14px;\n            color: #6b7a6d;\n            line-height: 1.5;\n        }\n        .skkhdtk-modal-sm p strong { color: #002E08; }\n\n        \/* ================== FORM ================== *\/\n        .skkhdtk-field { margin-bottom: 16px; }\n        .skkhdtk-field label {\n            display: block;\n            font-size: 13px;\n            font-weight: 500;\n            color: #002E08;\n            margin-bottom: 6px;\n        }\n        .skkhdtk-field input,\n        .skkhdtk-field select {\n            width: 100%;\n            padding: 13px 16px;\n            font-size: 14px;\n            font-family: inherit;\n            color: #002E08;\n            background: #ffffff;\n            border: 1.5px solid #e4ebe5;\n            border-radius: 12px;\n            outline: none;\n            transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\n        }\n        .skkhdtk-field input::placeholder { color: #a8b5aa; }\n        .skkhdtk-field input:focus,\n        .skkhdtk-field select:focus {\n            border-color: #002E08;\n            background: #fbfffb;\n            box-shadow: 0 0 0 4px rgba(0, 46, 8, 0.08);\n        }\n\n        \/* Date input custom style *\/\n        .skkhdtk-field input[type=\"date\"] {\n            cursor: pointer;\n            color: #002E08;\n            font-family: inherit;\n        }\n        .skkhdtk-field input[type=\"date\"]::-webkit-calendar-picker-indicator {\n            cursor: pointer;\n            opacity: 0.6;\n            filter: hue-rotate(80deg) saturate(0.5);\n            transition: opacity 0.2s ease;\n        }\n        .skkhdtk-field input[type=\"date\"]::-webkit-calendar-picker-indicator:hover {\n            opacity: 1;\n        }\n\n        \/* Select dengan custom arrow *\/\n        .skkhdtk-select-wrap {\n            position: relative;\n        }\n        .skkhdtk-select-wrap select {\n            appearance: none;\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            padding-right: 44px;\n            cursor: pointer;\n        }\n        .skkhdtk-select-arrow {\n            position: absolute;\n            right: 14px;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 18px;\n            height: 18px;\n            pointer-events: none;\n            opacity: 0.6;\n        }\n\n        .skkhdtk-field small {\n            display: block;\n            margin-top: 6px;\n            font-size: 12px;\n            color: #6b7a6d;\n        }\n\n        .skkhdtk-form-msg {\n            display: none;\n            padding: 10px 14px;\n            border-radius: 10px;\n            font-size: 13px;\n            margin-bottom: 12px;\n        }\n        .skkhdtk-form-msg.skkhdtk-error {\n            display: block;\n            background: rgba(220, 38, 38, 0.08);\n            color: #b91c1c;\n            border: 1px solid rgba(220, 38, 38, 0.2);\n        }\n        .skkhdtk-form-msg.skkhdtk-success {\n            display: block;\n            background: rgba(34, 197, 94, 0.1);\n            color: #166534;\n            border: 1px solid rgba(34, 197, 94, 0.25);\n        }\n\n        \/* ================== PDF BODY ================== *\/\n        .skkhdtk-pdf-body {\n            flex: 1;\n            background: #f4f7f5;\n            border-radius: 0 0 20px 20px;\n            overflow: hidden;\n        }\n        .skkhdtk-pdf-body iframe {\n            width: 100%;\n            height: 100%;\n            border: none;\n            display: block;\n        }\n        .skkhdtk-pdf-loading {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            font-size: 15px;\n            color: #002E08;\n        }\n\n        \/* ================== BUTTONS ================== *\/\n        .skkhdtk-modal-actions {\n            display: flex;\n            gap: 10px;\n            margin-top: 20px;\n        }\n        .skkhdtk-btn {\n            flex: 1;\n            padding: 12px 18px;\n            font-family: inherit;\n            font-size: 14px;\n            font-weight: 600;\n            border: none;\n            border-radius: 12px;\n            cursor: pointer;\n            transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n        }\n        .skkhdtk-btn-cancel {\n            background: #f3f4f6;\n            color: #4a5a4c;\n        }\n        .skkhdtk-btn-cancel:hover { background: #e5e7eb; }\n\n        .skkhdtk-btn-submit {\n            background: #002E08;\n            color: #ffffff;\n            box-shadow: 0 6px 16px rgba(0, 46, 8, 0.25);\n        }\n        .skkhdtk-btn-submit:hover:not(:disabled) {\n            background: #004A0D;\n            transform: translateY(-1px);\n            box-shadow: 0 10px 22px rgba(0, 46, 8, 0.35);\n        }\n        .skkhdtk-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }\n\n        .skkhdtk-btn-danger {\n            background: #dc2626;\n            color: #ffffff;\n            box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);\n        }\n        .skkhdtk-btn-danger:hover {\n            background: #b91c1c;\n            transform: translateY(-1px);\n            box-shadow: 0 10px 22px rgba(220, 38, 38, 0.4);\n        }\n\n        \/* ================== RESPONSIVE \u2014 TABLET ================== *\/\n        @media (max-width: 1024px) {\n            .skkhdtk-wrap { padding: 22px; }\n            .skkhdtk-list { max-height: 380px; }\n            .skkhdtk-list-wrap::before,\n            .skkhdtk-list-wrap::after { height: 50px; }\n            .skkhdtk-item { padding: 13px 15px; gap: 12px; }\n            .skkhdtk-item-icon { width: 42px; height: 42px; }\n            .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title { font-size: 14.5px; }\n            .skkhdtk-item-nomor { font-size: 12px; }\n        }\n\n        \/* ================== RESPONSIVE \u2014 MOBILE ================== *\/\n        @media (max-width: 640px) {\n            .skkhdtk-wrap { padding: 18px; border-radius: 16px; }\n\n            .skkhdtk-toolbar { flex-direction: column; }\n            .skkhdtk-search,\n            .skkhdtk-filter { width: 100%; min-width: 100%; }\n            .skkhdtk-btn-add { width: 100%; justify-content: center; }\n\n            .skkhdtk-list { max-height: 360px; padding-right: 6px; }\n            .skkhdtk-list-wrap::before,\n            .skkhdtk-list-wrap::after { height: 40px; }\n\n            .skkhdtk-item { padding: 12px; gap: 10px; border-radius: 12px; align-items: flex-start; }\n            .skkhdtk-item-icon { width: 38px; height: 38px; border-radius: 10px; }\n            .skkhdtk-item-icon svg { width: 18px; height: 18px; }\n            .skkhdtk-icon-btn { width: 34px; height: 34px; }\n            .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title { font-size: 14px; }\n            .skkhdtk-badge { font-size: 10px; padding: 2px 8px; }\n            .skkhdtk-item-nomor { font-size: 11.5px; }\n\n            .skkhdtk-modal { padding: 22px; }\n            .skkhdtk-modal-lg { width: 96%; height: 88vh; padding: 0; }\n        }\n\n        \/* ================== RESPONSIVE \u2014 MOBILE KECIL ================== *\/\n        @media (max-width: 400px) {\n            .skkhdtk-wrap { padding: 16px; }\n            .skkhdtk-list { max-height: 340px; }\n            .skkhdtk-list-wrap::before,\n            .skkhdtk-list-wrap::after { height: 36px; }\n\n            .skkhdtk-item { padding: 10px; gap: 8px; }\n            .skkhdtk-item-icon { width: 34px; height: 34px; }\n            .skkhdtk-item-icon svg { width: 16px; height: 16px; }\n            .skkhdtk-icon-btn { width: 30px; height: 30px; }\n            .skkhdtk-icon-btn svg { width: 14px; height: 14px; }\n            .skkhdtk-wrap .skkhdtk-item .skkhdtk-item-title { font-size: 13px; }\n            .skkhdtk-item-meta { font-size: 11px; }\n            .skkhdtk-item-nomor { font-size: 11px; }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            .skkhdtk-item, .skkhdtk-modal, .skkhdtk-icon-btn,\n            .skkhdtk-btn-add, .skkhdtk-btn, .skkhdtk-list-wrap::before,\n            .skkhdtk-list-wrap::after {\n                transition: none !important;\n                transform: none !important;\n            }\n        }\n    <\/style>\n\n    <script>\n    (function () {\n        'use strict';\n\n        var wrap = document.querySelector('.skkhdtk-wrap');\n        if (!wrap) return;\n\n        var AJAX       = wrap.dataset.ajax;\n        var NONCE      = wrap.dataset.nonce;\n        var CAN_ADD    = wrap.dataset.canAdd === '1';\n        var CAN_DELETE = wrap.dataset.canDelete === '1';\n        var LOGGED     = wrap.dataset.logged === '1';\n\n        var list         = document.getElementById('skkhdtk-list');\n        var listWrap     = document.getElementById('skkhdtk-list-wrap');\n        var visibleCount = document.getElementById('skkhdtk-visible-count');\n        var emptySearch  = document.getElementById('skkhdtk-empty-search');\n        var searchInput  = document.getElementById('skkhdtk-search-input');\n        var filterSelect = document.getElementById('skkhdtk-filter-khdtk');\n\n        var KHDTK_LABELS = {\n            'pondok_buluh': 'KHDTK Pondok Buluh',\n            'aek_nauli':    'KHDTK Aek Nauli'\n        };\n\n        \/* ============ HELPERS ============ *\/\n        function escapeHtml(str) {\n            return String(str == null ? '' : str).replace(\/[&<>\"']\/g, function (c) {\n                return { '&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;' }[c];\n            });\n        }\n        function openOverlay(el) {\n            if (!el) return;\n            el.classList.add('skkhdtk-show');\n            document.body.style.overflow = 'hidden';\n        }\n        function closeOverlay(el) {\n            if (!el) return;\n            el.classList.remove('skkhdtk-show');\n            document.body.style.overflow = '';\n        }\n        function showMsg(el, text, type) {\n            if (!el) return;\n            el.className = 'skkhdtk-form-msg skkhdtk-' + type;\n            el.textContent = text;\n        }\n        function clearMsg(el) {\n            if (!el) return;\n            el.className = 'skkhdtk-form-msg';\n            el.textContent = '';\n        }\n        function getEmbedUrl(url) {\n            var m = url.match(\/\\\/file\\\/d\\\/([a-zA-Z0-9_-]+)\/);\n            if (m && m[1]) return 'https:\/\/drive.google.com\/file\/d\/' + m[1] + '\/preview';\n            var m2 = url.match(\/[?&]id=([a-zA-Z0-9_-]+)\/);\n            if (m2 && m2[1]) return 'https:\/\/drive.google.com\/file\/d\/' + m2[1] + '\/preview';\n            return url;\n        }\n\n        \/* ============ FADE INDICATOR ============ *\/\n        function updateFadeIndicator() {\n            if (!list || !listWrap) return;\n\n            var scrollTop    = list.scrollTop;\n            var scrollHeight = list.scrollHeight;\n            var clientHeight = list.clientHeight;\n            var tolerance    = 2;\n\n            if (scrollHeight <= clientHeight + tolerance) {\n                listWrap.classList.add('no-scroll');\n                listWrap.classList.remove('at-top', 'at-bottom');\n                return;\n            }\n            listWrap.classList.remove('no-scroll');\n\n            if (scrollTop <= tolerance) {\n                listWrap.classList.add('at-top');\n            } else {\n                listWrap.classList.remove('at-top');\n            }\n\n            if (scrollTop + clientHeight >= scrollHeight - tolerance) {\n                listWrap.classList.add('at-bottom');\n            } else {\n                listWrap.classList.remove('at-bottom');\n            }\n        }\n\n        if (list) {\n            list.addEventListener('scroll', updateFadeIndicator, { passive: true });\n        }\n        window.addEventListener('resize', updateFadeIndicator);\n        window.addEventListener('orientationchange', updateFadeIndicator);\n\n        \/* ============ SEARCH + FILTER ============ *\/\n        function applyFilters() {\n            var q       = (searchInput ? searchInput.value : '').toLowerCase().trim();\n            var khdtk   = (filterSelect ? filterSelect.value : '').trim();\n            var items   = list ? list.querySelectorAll('.skkhdtk-item') : [];\n            var visible = 0;\n\n            items.forEach(function (item) {\n                var nama        = (item.dataset.namaLower  || '').toLowerCase();\n                var nomor       = (item.dataset.nomorLower || '').toLowerCase();\n                var itemKhdtk   = (item.dataset.khdtk || '');\n\n                \/* Pencarian mencakup nama SK DAN nomor SK *\/\n                var matchQ      = q === '' || nama.indexOf(q) !== -1 || nomor.indexOf(q) !== -1;\n                var matchKhdtk  = khdtk === '' || itemKhdtk === khdtk;\n                var match       = matchQ && matchKhdtk;\n\n                item.style.display = match ? '' : 'none';\n                if (match) visible++;\n            });\n\n            if (visibleCount) visibleCount.textContent = visible;\n\n            var hasFilter = (q !== '' || khdtk !== '');\n            if (emptySearch) {\n                emptySearch.style.display = (visible === 0 && hasFilter) ? 'block' : 'none';\n            }\n\n            if (list) list.scrollTop = 0;\n            updateFadeIndicator();\n        }\n\n        if (searchInput)  searchInput.addEventListener('input',  applyFilters);\n        if (filterSelect) filterSelect.addEventListener('change', applyFilters);\n\n        \/* ============ PDF MODAL ============ *\/\n        var pdfModal = document.getElementById('skkhdtk-pdf-modal');\n        var pdfBody  = document.getElementById('skkhdtk-pdf-body');\n        var pdfTitle = document.getElementById('skkhdtk-pdf-title');\n        var pdfClose = document.getElementById('skkhdtk-pdf-close');\n\n        function openPdf(url, title) {\n            if (!pdfModal || !pdfBody) return;\n            if (pdfTitle) pdfTitle.textContent = title || 'Preview SK';\n            pdfBody.innerHTML = '<div class=\"skkhdtk-pdf-loading\">Memuat dokumen...<\/div>';\n            openOverlay(pdfModal);\n\n            var embed = getEmbedUrl(url);\n            setTimeout(function () {\n                var iframe = document.createElement('iframe');\n                iframe.src = embed;\n                iframe.title = title || 'Preview SK';\n                iframe.setAttribute('allow', 'autoplay');\n                iframe.setAttribute('loading', 'lazy');\n                pdfBody.innerHTML = '';\n                pdfBody.appendChild(iframe);\n            }, 150);\n        }\n        function closePdf() {\n            closeOverlay(pdfModal);\n            setTimeout(function () {\n                if (pdfBody) pdfBody.innerHTML = '<div class=\"skkhdtk-pdf-loading\">Memuat dokumen...<\/div>';\n            }, 300);\n        }\n        if (pdfClose) pdfClose.addEventListener('click', closePdf);\n\n        \/* ============ ADD MODAL ============ *\/\n        var addModal       = document.getElementById('skkhdtk-add-modal');\n        var btnAdd         = document.getElementById('skkhdtk-btn-add');\n        var addClose       = document.getElementById('skkhdtk-add-close');\n        var addCancel      = document.getElementById('skkhdtk-add-cancel');\n        var addForm        = document.getElementById('skkhdtk-add-form');\n        var inputNomorSk   = document.getElementById('skkhdtk-input-nomor-sk');\n        var inputNama      = document.getElementById('skkhdtk-input-nama');\n        var inputLink      = document.getElementById('skkhdtk-input-link');\n        var inputKhdtk     = document.getElementById('skkhdtk-input-khdtk');\n        var inputTanggalSk = document.getElementById('skkhdtk-input-tanggal-sk');\n        var addMsg         = document.getElementById('skkhdtk-add-msg');\n        var addSubmit      = document.getElementById('skkhdtk-add-submit');\n        var addBtnText     = addSubmit ? addSubmit.querySelector('.skkhdtk-btn-text')    : null;\n        var addBtnLoad     = addSubmit ? addSubmit.querySelector('.skkhdtk-btn-loading') : null;\n\n        if (btnAdd) {\n            btnAdd.addEventListener('click', function () {\n                clearMsg(addMsg);\n                if (addForm) addForm.reset();\n\n                if (inputTanggalSk && !inputTanggalSk.value) {\n                    var today = new Date();\n                    var yyyy  = today.getFullYear();\n                    var mm    = String(today.getMonth() + 1).padStart(2, '0');\n                    var dd    = String(today.getDate()).padStart(2, '0');\n                    inputTanggalSk.value = yyyy + '-' + mm + '-' + dd;\n                }\n\n                openOverlay(addModal);\n                setTimeout(function () { if (inputKhdtk) inputKhdtk.focus(); }, 200);\n            });\n        }\n        if (addClose)  addClose.addEventListener('click',  function () { closeOverlay(addModal); });\n        if (addCancel) addCancel.addEventListener('click', function () { closeOverlay(addModal); });\n\n        if (addForm) {\n            addForm.addEventListener('submit', function (e) {\n                e.preventDefault();\n                clearMsg(addMsg);\n\n                var nomor_sk   = inputNomorSk   ? inputNomorSk.value.trim()   : '';\n                var nama       = inputNama      ? inputNama.value.trim()       : '';\n                var link       = inputLink      ? inputLink.value.trim()       : '';\n                var khdtk      = inputKhdtk     ? inputKhdtk.value             : '';\n                var tanggal_sk = inputTanggalSk ? inputTanggalSk.value         : '';\n\n                if (!nomor_sk || !nama || !link || !khdtk || !tanggal_sk) {\n                    showMsg(addMsg, 'Semua field wajib diisi.', 'error');\n                    return;\n                }\n\n                if (addSubmit) addSubmit.disabled = true;\n                if (addBtnText) addBtnText.style.display = 'none';\n                if (addBtnLoad) addBtnLoad.style.display = 'inline';\n\n                var fd = new FormData();\n                fd.append('action', 'sk_khdtk_add');\n                fd.append('nonce', NONCE);\n                fd.append('nomor_sk', nomor_sk);\n                fd.append('nama', nama);\n                fd.append('link', link);\n                fd.append('khdtk', khdtk);\n                fd.append('tanggal_sk', tanggal_sk);\n\n                fetch(AJAX, { method: 'POST', credentials: 'same-origin', body: fd })\n                    .then(function (r) { return r.json(); })\n                    .then(function (res) {\n                        if (addSubmit) addSubmit.disabled = false;\n                        if (addBtnText) addBtnText.style.display = 'inline';\n                        if (addBtnLoad) addBtnLoad.style.display = 'none';\n\n                        if (!res || !res.success) {\n                            var m = (res && res.data && res.data.message) || 'Gagal menyimpan.';\n                            showMsg(addMsg, m, 'error');\n                            return;\n                        }\n\n                        var d = res.data;\n                        var newNode = buildItem(d);\n                        insertByTanggal(newNode, d.tanggal_sk);\n\n                        var emptyInitial = list.querySelector('.skkhdtk-empty-initial');\n                        if (emptyInitial) emptyInitial.remove();\n\n                        applyFilters();\n\n                        showMsg(addMsg, 'SK berhasil ditambahkan.', 'success');\n                        setTimeout(function () {\n                            closeOverlay(addModal);\n                            clearMsg(addMsg);\n                        }, 900);\n                    })\n                    .catch(function () {\n                        if (addSubmit) addSubmit.disabled = false;\n                        if (addBtnText) addBtnText.style.display = 'inline';\n                        if (addBtnLoad) addBtnLoad.style.display = 'none';\n                        showMsg(addMsg, 'Terjadi kesalahan koneksi.', 'error');\n                    });\n            });\n        }\n\n        function insertByTanggal(node, tanggal_sk) {\n            if (!list) return;\n            var newTs = tanggal_sk ? Math.floor(new Date(tanggal_sk).getTime() \/ 1000) : 0;\n            var siblings = list.querySelectorAll('.skkhdtk-item');\n            var inserted = false;\n\n            for (var i = 0; i < siblings.length; i++) {\n                var ts = parseInt(siblings[i].dataset.tanggal || '0', 10) || 0;\n                if (newTs > ts) {\n                    list.insertBefore(node, siblings[i]);\n                    inserted = true;\n                    break;\n                }\n            }\n            if (!inserted) list.appendChild(node);\n        }\n\n        function buildItem(d) {\n            var div = document.createElement('div');\n            div.className = 'skkhdtk-item';\n            div.dataset.id         = d.id;\n            div.dataset.link       = d.link;\n            div.dataset.nama       = d.nama;\n            div.dataset.namaLower  = String(d.nama || '').toLowerCase();\n            div.dataset.nomor      = d.nomor_sk || '';\n            div.dataset.nomorLower = String(d.nomor_sk || '').toLowerCase();\n            div.dataset.khdtk      = d.khdtk || '';\n\n            var ts = 0;\n            if (d.tanggal_sk) {\n                ts = Math.floor(new Date(d.tanggal_sk).getTime() \/ 1000);\n                if (isNaN(ts)) ts = 0;\n            }\n            div.dataset.tanggal = ts;\n\n            var deleteBtnHtml = '';\n            if (CAN_DELETE) {\n                deleteBtnHtml =\n                    '<button type=\"button\" class=\"skkhdtk-icon-btn skkhdtk-btn-delete\"' +\n                    ' data-id=\"' + escapeHtml(d.id) + '\"' +\n                    ' data-nama=\"' + escapeHtml(d.nama) + '\"' +\n                    ' title=\"Hapus SK\">' +\n                        '<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n                            '<path d=\"M4 7H20\" stroke=\"#dc2626\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>' +\n                            '<path d=\"M10 11V17M14 11V17\" stroke=\"#dc2626\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/>' +\n                            '<path d=\"M6 7L7 20C7 20.55 7.45 21 8 21H16C16.55 21 17 20.55 17 20L18 7\" stroke=\"#dc2626\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/>' +\n                            '<path d=\"M9 7V4C9 3.45 9.45 3 10 3H14C14.55 3 15 3.45 15 4V7\" stroke=\"#dc2626\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/>' +\n                        '<\/svg>' +\n                    '<\/button>';\n            }\n\n            var nomorHtml = '';\n            if (d.nomor_sk) {\n                nomorHtml =\n                    '<div class=\"skkhdtk-item-nomor\">' +\n                        '<span class=\"skkhdtk-nomor-label\">NOMOR :<\/span>' +\n                        '<span class=\"skkhdtk-nomor-value\">' + escapeHtml(d.nomor_sk) + '<\/span>' +\n                    '<\/div>';\n            }\n\n            var metaHtml = '';\n            var khdtkLabel = KHDTK_LABELS[d.khdtk] || 'KHDTK';\n            metaHtml += '<span class=\"skkhdtk-badge skkhdtk-badge-' + escapeHtml(d.khdtk) + '\">' + escapeHtml(khdtkLabel) + '<\/span>';\n\n            if (d.tanggal_display) {\n                metaHtml += '<span class=\"skkhdtk-sep\">\u2022<\/span>';\n                metaHtml += '<span>Tanggal SK: ' + escapeHtml(d.tanggal_display) + '<\/span>';\n            }\n            if (d.oleh) {\n                metaHtml += '<span class=\"skkhdtk-sep\">\u2022<\/span>';\n                metaHtml += '<span>oleh ' + escapeHtml(d.oleh) + '<\/span>';\n            }\n\n            div.innerHTML =\n                '<div class=\"skkhdtk-item-icon\">' +\n                    '<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n                        '<path d=\"M14 2H6C5.45 2 5 2.45 5 3V21C5 21.55 5.45 22 6 22H18C18.55 22 19 21.55 19 21V7L14 2Z\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>' +\n                        '<path d=\"M14 2V7H19\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/>' +\n                        '<path d=\"M9 13H15M9 17H13\" stroke=\"#002E08\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>' +\n                    '<\/svg>' +\n                '<\/div>' +\n                '<div class=\"skkhdtk-item-body\">' +\n                    nomorHtml +\n                    '<button type=\"button\" class=\"skkhdtk-item-title skkhdtk-open-pdf\">' + escapeHtml(d.nama) + '<\/button>' +\n                    '<div class=\"skkhdtk-item-meta\">' + metaHtml + '<\/div>' +\n                '<\/div>' +\n                '<div class=\"skkhdtk-item-actions\">' +\n                    '<button type=\"button\" class=\"skkhdtk-icon-btn skkhdtk-btn-open skkhdtk-open-pdf\" title=\"Lihat SK\">' +\n                        '<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n                            '<path d=\"M2 12C2 12 5 5 12 5C19 5 22 12 22 12C22 12 19 19 12 19C5 19 2 12 2 12Z\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>' +\n                            '<circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"#002E08\" stroke-width=\"1.8\"\/>' +\n                        '<\/svg>' +\n                    '<\/button>' +\n                    deleteBtnHtml +\n                '<\/div>';\n\n            return div;\n        }\n\n        \/* ============ DELETE MODAL ============ *\/\n        var delModal   = document.getElementById('skkhdtk-delete-modal');\n        var delName    = document.getElementById('skkhdtk-delete-name');\n        var delCancel  = document.getElementById('skkhdtk-delete-cancel');\n        var delConfirm = document.getElementById('skkhdtk-delete-confirm');\n        var delMsg     = document.getElementById('skkhdtk-delete-msg');\n        var currentDelId = null;\n\n        function openDeleteModal(id, nama) {\n            currentDelId = id;\n            if (delName) delName.innerHTML = 'Anda yakin akan menghapus <strong>' + escapeHtml(nama) + '<\/strong>?';\n            clearMsg(delMsg);\n            openOverlay(delModal);\n        }\n\n        if (delCancel) delCancel.addEventListener('click', function () { closeOverlay(delModal); });\n\n        if (delConfirm) {\n            delConfirm.addEventListener('click', function () {\n                if (!currentDelId) return;\n                clearMsg(delMsg);\n                delConfirm.disabled = true;\n                var orig = delConfirm.textContent;\n                delConfirm.textContent = 'Menghapus...';\n\n                var fd = new FormData();\n                fd.append('action', 'sk_khdtk_delete');\n                fd.append('nonce', NONCE);\n                fd.append('id', currentDelId);\n\n                fetch(AJAX, { method: 'POST', credentials: 'same-origin', body: fd })\n                    .then(function (r) { return r.json(); })\n                    .then(function (res) {\n                        delConfirm.disabled = false;\n                        delConfirm.textContent = orig;\n\n                        if (!res || !res.success) {\n                            var m = (res && res.data && res.data.message) || 'Gagal menghapus.';\n                            showMsg(delMsg, m, 'error');\n                            return;\n                        }\n\n                        var item = list ? list.querySelector('.skkhdtk-item[data-id=\"' + currentDelId + '\"]') : null;\n                        if (item) {\n                            item.style.transition = 'all 0.3s ease';\n                            item.style.opacity = '0';\n                            item.style.transform = 'translateX(-20px)';\n                            setTimeout(function () {\n                                item.remove();\n                                applyFilters();\n                                closeOverlay(delModal);\n                            }, 300);\n                        } else {\n                            closeOverlay(delModal);\n                        }\n                        currentDelId = null;\n                    })\n                    .catch(function () {\n                        delConfirm.disabled = false;\n                        delConfirm.textContent = orig;\n                        showMsg(delMsg, 'Terjadi kesalahan koneksi.', 'error');\n                    });\n            });\n        }\n\n        \/* ============ EVENT DELEGATION ============ *\/\n        document.addEventListener('click', function (e) {\n            if (e.target.classList && e.target.classList.contains('skkhdtk-modal-overlay')) {\n                closeOverlay(e.target);\n                if (e.target === pdfModal) {\n                    setTimeout(function () {\n                        if (pdfBody) pdfBody.innerHTML = '<div class=\"skkhdtk-pdf-loading\">Memuat dokumen...<\/div>';\n                    }, 300);\n                }\n                return;\n            }\n\n            var delBtn = e.target.closest && e.target.closest('.skkhdtk-btn-delete');\n            if (delBtn) {\n                e.preventDefault();\n                e.stopPropagation();\n                openDeleteModal(delBtn.dataset.id, delBtn.dataset.nama);\n                return;\n            }\n\n            var openBtn = e.target.closest && e.target.closest('.skkhdtk-open-pdf');\n            if (openBtn) {\n                e.preventDefault();\n                e.stopPropagation();\n                var item = openBtn.closest('.skkhdtk-item');\n                if (!item) return;\n                openPdf(item.dataset.link, item.dataset.nama);\n                return;\n            }\n        });\n\n        document.addEventListener('keydown', function (e) {\n            if (e.key === 'Escape') {\n                closeOverlay(pdfModal);\n                closeOverlay(addModal);\n                closeOverlay(delModal);\n            }\n        });\n\n        \/* ============ INIT ============ *\/\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', updateFadeIndicator);\n        } else {\n            updateFadeIndicator();\n        }\n        window.addEventListener('load', updateFadeIndicator);\n\n    })();\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\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<div class=\"elementor-element elementor-element-1aeb622 e-flex e-con-boxed e-con e-parent\" data-id=\"1aeb622\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ea99cd elementor-widget elementor-widget-html\" data-id=\"1ea99cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================\r\n     CARD DEMPLOT \u2013 KHDTK HUTAN DIKLAT PONDOK BULUH\r\n     Balai P2SDM Wilayah I \u2013 Kementerian Kehutanan\r\n     Layout: 3 kolom (judul + 2 card) di baris 1,\r\n              4 card di baris 2.\r\n     Interaksi: Klik untuk expand, klik lagi untuk collapse.\r\n     Default: Card 1 (Persemaian) terbuka.\r\n     ============================================ -->\r\n\r\n<style>\r\n    \/* ---------- GOOGLE FONTS ---------- *\/\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');\r\n\r\n    \/* ---------- RESET & BASE ---------- *\/\r\n    .demplot-wrapper * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .demplot-wrapper {\r\n        font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        width: 100%;\r\n        max-width: 1280px;\r\n        margin: 0 auto;\r\n        padding: 24px 20px;\r\n        background: transparent;\r\n        border-radius: 24px;\r\n        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    \/* ---------- GRID UTAMA dengan dense ---------- *\/\r\n    .demplot-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(4, 1fr);\r\n        gap: 18px;\r\n        width: 100%;\r\n        grid-auto-flow: dense; \/* \ud83d\udd25 Kunci: mengisi celah kosong *\/\r\n    }\r\n\r\n    \/* ---------- CARD ---------- *\/\r\n    .demplot-card {\r\n        position: relative;\r\n        border-radius: 18px;\r\n        overflow: hidden;\r\n        background-size: cover;\r\n        background-position: center;\r\n        background-color: #002E08; \/* fallback *\/\r\n        min-height: 200px;\r\n        height: 240px;\r\n        cursor: pointer;\r\n        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\r\n        display: flex;\r\n        align-items: flex-end;\r\n        \/* Overlay gradient #002E08 yang lebih kuat *\/\r\n        background-blend-mode: overlay;\r\n        background-color: rgba(0, 46, 8, 0.25);\r\n    }\r\n\r\n    \/* Gradient overlay dengan warna #002E08 yang lebih pekat *\/\r\n    .demplot-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background: linear-gradient(to top, #002E08 0%, rgba(0, 46, 8, 0.4) 55%, rgba(0, 46, 8, 0.1) 100%);\r\n        border-radius: 18px;\r\n        pointer-events: none;\r\n        transition: opacity 0.5s ease;\r\n    }\r\n\r\n    \/* Saat expand, gradient tetap kuat *\/\r\n    .demplot-card.expanded::after {\r\n        background: linear-gradient(to top, #002E08 0%, rgba(0, 46, 8, 0.6) 65%, rgba(0, 46, 8, 0.2) 100%);\r\n    }\r\n\r\n    \/* ---------- KONTEN CARD ---------- *\/\r\n    .demplot-card .card-content {\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 18px 20px 20px 20px;\r\n        width: 100%;\r\n        color: #ffffff;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: flex-end;\r\n        height: 100%;\r\n        transition: padding 0.4s ease;\r\n    }\r\n\r\n    \/* Judul *\/\r\n    .demplot-card .card-title {\r\n        font-family: 'Poppins', 'Inter', sans-serif;\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        letter-spacing: 0.02em;\r\n        line-height: 1.3;\r\n        margin-bottom: 2px;\r\n        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* Deskripsi singkat (2 baris) *\/\r\n    .demplot-card .card-excerpt {\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 400;\r\n        line-height: 1.5;\r\n        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n        transition: opacity 0.3s ease, max-height 0.3s ease;\r\n        max-height: 3em;\r\n        opacity: 1;\r\n    }\r\n\r\n    \/* Deskripsi lengkap (muncul saat expand) *\/\r\n    .demplot-card .card-full-text {\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.82rem;\r\n        line-height: 1.6;\r\n        opacity: 0;\r\n        max-height: 0;\r\n        overflow: hidden;\r\n        transition: opacity 0.5s ease, max-height 0.6s ease, margin 0.4s ease;\r\n        margin-top: 0;\r\n        color: #f0f7f2;\r\n        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);\r\n        pointer-events: none;\r\n    }\r\n\r\n    .demplot-card.expanded .card-full-text {\r\n        opacity: 1;\r\n        max-height: 400px;\r\n        margin-top: 10px;\r\n        pointer-events: auto;\r\n    }\r\n\r\n    \/* Saat expand, sembunyikan excerpt *\/\r\n    .demplot-card.expanded .card-excerpt {\r\n        opacity: 0;\r\n        max-height: 0;\r\n        margin-bottom: 0;\r\n        transition: opacity 0.3s ease, max-height 0.3s ease;\r\n    }\r\n\r\n    \/* ---------- CARD EXPAND (perubahan ukuran) ---------- *\/\r\n    .demplot-card.expanded {\r\n        transform: scale(1.04);\r\n        box-shadow: 0 16px 48px rgba(0, 46, 8, 0.3);\r\n        z-index: 10;\r\n        height: auto;\r\n        min-height: 260px;\r\n        grid-column: span 2; \/* melebar 2 kolom *\/\r\n        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);\r\n    }\r\n\r\n    \/* ---------- CARD KHUSUS UNTUK JUDUL (TRANSPARAN) ---------- *\/\r\n    .demplot-title-card {\r\n        background: transparent !important;\r\n        background-image: none !important;\r\n        cursor: default;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-align: center;\r\n        min-height: 200px;\r\n        height: 240px;\r\n        border-radius: 18px;\r\n        box-shadow: none;\r\n        border: none;\r\n        grid-column: span 1; \/* tetap 1 kolom *\/\r\n    }\r\n\r\n    .demplot-title-card .title-content {\r\n        color: #002E08;\r\n        font-family: 'Poppins', 'Inter', sans-serif;\r\n        font-weight: 700;\r\n        font-size: 1.8rem;\r\n        letter-spacing: 0.04em;\r\n        line-height: 1.2;\r\n        padding: 20px;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: transparent;\r\n        border: 2px none rgba(0, 46, 8, 0.15);\r\n        border-radius: 18px;\r\n        transition: border-color 0.3s ease;\r\n    }\r\n\r\n    .demplot-title-card .title-content span {\r\n        display: block;\r\n        font-size: 0.8rem;\r\n        font-weight: 400;\r\n        opacity: 0.7;\r\n        margin-top: 6px;\r\n        letter-spacing: 0.06em;\r\n        color: #002E08;\r\n    }\r\n\r\n    \/* ---------- RESPONSIVE ---------- *\/\r\n\r\n    \/* Tablet (\u2264 992px) *\/\r\n    @media (max-width: 992px) {\r\n        .demplot-grid {\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 16px;\r\n        }\r\n        .demplot-card {\r\n            height: 200px;\r\n            min-height: 180px;\r\n        }\r\n        .demplot-title-card {\r\n            height: 200px;\r\n            min-height: 180px;\r\n        }\r\n        .demplot-title-card .title-content {\r\n            font-size: 1.4rem;\r\n            border-width: 2px;\r\n        }\r\n        .demplot-card .card-title {\r\n            font-size: 1rem;\r\n        }\r\n        .demplot-card .card-excerpt {\r\n            font-size: 0.8rem;\r\n        }\r\n        .demplot-card .card-full-text {\r\n            font-size: 0.75rem;\r\n        }\r\n        .demplot-card.expanded {\r\n            grid-column: span 2;\r\n            height: auto;\r\n            min-height: 220px;\r\n        }\r\n    }\r\n\r\n    \/* Mobile (\u2264 640px) *\/\r\n    @media (max-width: 640px) {\r\n        .demplot-wrapper {\r\n            padding: 12px 8px;\r\n        }\r\n        .demplot-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 12px;\r\n        }\r\n        .demplot-card {\r\n            height: 170px;\r\n            min-height: 150px;\r\n        }\r\n        .demplot-title-card {\r\n            height: 170px;\r\n            min-height: 150px;\r\n            grid-column: span 2; \/* judul full lebar *\/\r\n        }\r\n        .demplot-title-card .title-content {\r\n            font-size: 1.2rem;\r\n            padding: 14px;\r\n            border-width: 2px;\r\n        }\r\n        .demplot-title-card .title-content span {\r\n            font-size: 0.7rem;\r\n        }\r\n        .demplot-card .card-title {\r\n            font-size: 0.85rem;\r\n        }\r\n        .demplot-card .card-excerpt {\r\n            font-size: 0.7rem;\r\n            -webkit-line-clamp: 2;\r\n        }\r\n        .demplot-card .card-full-text {\r\n            font-size: 0.7rem;\r\n        }\r\n        .demplot-card .card-content {\r\n            padding: 14px 16px 16px 16px;\r\n        }\r\n        .demplot-card.expanded {\r\n            grid-column: span 2;\r\n            height: auto;\r\n            min-height: 200px;\r\n        }\r\n    }\r\n\r\n    \/* Mobile kecil (\u2264 400px) *\/\r\n    @media (max-width: 400px) {\r\n        .demplot-grid {\r\n            gap: 10px;\r\n        }\r\n        .demplot-card {\r\n            height: 150px;\r\n            min-height: 130px;\r\n        }\r\n        .demplot-title-card {\r\n            height: 150px;\r\n            min-height: 130px;\r\n        }\r\n        .demplot-title-card .title-content {\r\n            font-size: 1rem;\r\n        }\r\n        .demplot-card .card-title {\r\n            font-size: 0.8rem;\r\n        }\r\n        .demplot-card .card-excerpt {\r\n            font-size: 0.65rem;\r\n        }\r\n        .demplot-card .card-full-text {\r\n            font-size: 0.65rem;\r\n        }\r\n    }\r\n\r\n    \/* ---------- SCROLLBAR ---------- *\/\r\n    .demplot-wrapper::-webkit-scrollbar {\r\n        width: 6px;\r\n    }\r\n    .demplot-wrapper::-webkit-scrollbar-track {\r\n        background: #eef3f0;\r\n        border-radius: 10px;\r\n    }\r\n    .demplot-wrapper::-webkit-scrollbar-thumb {\r\n        background: #b6cdc0;\r\n        border-radius: 10px;\r\n    }\r\n<\/style>\r\n\r\n<!-- ============================================\r\n     HTML STRUKTUR\r\n     ============================================ -->\r\n<div class=\"demplot-wrapper\">\r\n    <div class=\"demplot-grid\">\r\n\r\n        <!-- ===== JUDUL (TRANSPARAN, TEKS #002E08) ===== -->\r\n        <div class=\"demplot-title-card\">\r\n            <div class=\"title-content\">\r\n                PENGELOLAAN DEMPLOT\r\n                <span>KHDTK Hutan Diklat<\/span>\r\n                                <span>(6 Unit)<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ===== CARD 1: Demplot Persemaian (expanded default) ===== -->\r\n        <div class=\"demplot-card expanded\" style=\"background-image: url('https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-13-224951.png');\">\r\n            <div class=\"card-content\">\r\n                <div class=\"card-title\">Demplot Persemaian<\/div>\r\n                <div class=\"card-excerpt\">Demplot persemaian mendukung kegiatan praktik diklat sekaligus pembibitan tanaman lokal.<\/div>\r\n                <div class=\"card-full-text\">Demplot persemaian mendukung kegiatan praktik diklat sekaligus pembibitan tanaman lokal. Persemaian juga menjadi tempat penampungan bibit untuk kegiatan pemberdayaan masyarakat di sekitar KHDTK Hutan Diklat Pondok Buluh.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ===== CARD 2: Demplot MPTS ===== -->\r\n        <div class=\"demplot-card\" style=\"background-image: url('https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-13-224934.png');\">\r\n            <div class=\"card-content\">\r\n                <div class=\"card-title\">Demplot MPTS<\/div>\r\n                <div class=\"card-excerpt\">Demplot MPTS menjadi sarana praktik budidaya pohon serbaguna yang menghasilkan kayu, buah, daun, maupun pakan.<\/div>\r\n                <div class=\"card-full-text\">Demplot MPTS menjadi sarana praktik budidaya pohon serbaguna yang menghasilkan kayu, buah, daun, maupun pakan. Jenis tanaman dipilih berdasarkan kesesuaian lokasi dan nilai ekonomi, tanpa harus menebang pohonnya.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ===== CARD 3: Demplot Arboretum ===== -->\r\n        <div class=\"demplot-card\" style=\"background-image: url('https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-content\/uploads\/2024\/07\/IMG-20240621-WA0009.jpg');\">\r\n            <div class=\"card-content\">\r\n                <div class=\"card-title\">Demplot Arboretum<\/div>\r\n                <div class=\"card-excerpt\">Arboretum menjadi sarana pembelajaran dan praktik berbagai jenis diklat, khususnya pengenalan jenis pohon.<\/div>\r\n                <div class=\"card-full-text\">Arboretum menjadi sarana pembelajaran dan praktik berbagai jenis diklat, khususnya pengenalan jenis pohon. Peserta dapat mengenal dan mengamati berbagai koleksi pohon secara langsung.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ===== CARD 4: Demplot Tanaman Obat ===== -->\r\n        <div class=\"demplot-card\" style=\"background-image: url('https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-content\/uploads\/2024\/07\/demplot-tanaman-obat-1.jpg');\">\r\n            <div class=\"card-content\">\r\n                <div class=\"card-title\">Demplot Tanaman Obat<\/div>\r\n                <div class=\"card-excerpt\">Demplot tanaman obat menampilkan berbagai jenis tanaman obat yang terdapat di kawasan hutan.<\/div>\r\n                <div class=\"card-full-text\">Demplot tanaman obat menampilkan berbagai jenis tanaman obat yang terdapat di kawasan hutan. Selain sebagai sumber informasi, demplot ini juga dimanfaatkan sebagai sarana praktik lapang kegiatan diklat.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ===== CARD 5: Demplot Agroforestry ===== -->\r\n        <div class=\"demplot-card\" style=\"background-image: url('https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-content\/uploads\/2024\/07\/Agroforestry.jpg');\">\r\n            <div class=\"card-content\">\r\n                <div class=\"card-title\">Demplot Agroforestry<\/div>\r\n                <div class=\"card-excerpt\">Demplot agroforestry menjadi sarana praktik pengelolaan hutan dengan mengombinasikan tanaman kehutanan dan tanaman pertanian.<\/div>\r\n                <div class=\"card-full-text\">Demplot agroforestry menjadi sarana praktik pengelolaan hutan dengan mengombinasikan tanaman kehutanan dan tanaman pertanian. Konsep ini diharapkan dapat meningkatkan produktivitas kawasan sekaligus memberikan nilai tambah bagi masyarakat.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ===== CARD 6: Demplot Lebah Madu ===== -->\r\n        <div class=\"demplot-card\" style=\"background-image: url('https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/wp-content\/uploads\/2024\/07\/Demplot-Lebah-Madu.jpg');\">\r\n            <div class=\"card-content\">\r\n                <div class=\"card-title\">Demplot Lebah Madu<\/div>\r\n                <div class=\"card-excerpt\">Demplot lebah madu menjadi sarana praktik budidaya lebah dalam kegiatan pelatihan lingkungan hidup dan kehutanan.<\/div>\r\n                <div class=\"card-full-text\">Demplot lebah madu menjadi sarana praktik budidaya lebah dalam kegiatan pelatihan lingkungan hidup dan kehutanan. Demplot seluas 1 hektare ini dilengkapi stup lebah dan tanaman pakan untuk mendukung peningkatan pengetahuan serta kesejahteraan masyarakat.<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- ============================================\r\n     JAVASCRIPT \u2013 KLIK UNTUK EXPAND \/ COLLAPSE\r\n     ============================================ -->\r\n<script>\r\n    (function() {\r\n        'use strict';\r\n\r\n        const cards = document.querySelectorAll('.demplot-card:not(.demplot-title-card)');\r\n\r\n        cards.forEach(function(card) {\r\n            card.addEventListener('click', function(e) {\r\n                \/\/ Jika card ini sedang expand, collapse\r\n                if (this.classList.contains('expanded')) {\r\n                    this.classList.remove('expanded');\r\n                    return;\r\n                }\r\n\r\n                \/\/ Tutup semua card yang sedang expand (hanya satu yang boleh terbuka)\r\n                document.querySelectorAll('.demplot-card.expanded').forEach(function(expanded) {\r\n                    expanded.classList.remove('expanded');\r\n                });\r\n\r\n                \/\/ Lalu expand card yang diklik\r\n                this.classList.add('expanded');\r\n\r\n                \/\/ Scroll agar card terlihat (opsional)\r\n                this.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n            });\r\n        });\r\n\r\n        console.log('\u2705 Demplot cards dengan dense grid, judul baru, dan card pertama terbuka.');\r\n\r\n    })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b04731 e-flex e-con-boxed e-con e-parent\" data-id=\"7b04731\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-056b767 e-flex e-con-boxed e-con e-parent\" data-id=\"056b767\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-119c53b e-con-full e-flex e-con e-child\" data-id=\"119c53b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a31a80 elementor-widget elementor-widget-html\" data-id=\"5a31a80\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================\r\n     GALERI VIDEO \u2013 KHDTK HUTAN DIKLAT PONDOK BULUH\r\n     Balai P2SDM Wilayah I \u2013 Kementerian Kehutanan\r\n     Font: Poppins + Inter\r\n     Playlist: 3 video terlihat, sisanya scroll\r\n     ============================================ -->\r\n\r\n<style>\r\n    \/* ---------- GOOGLE FONTS ---------- *\/\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');\r\n\r\n    \/* ---------- RESET & BASE ---------- *\/\r\n    .video-gallery-wrapper * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .video-gallery-wrapper {\r\n        font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        width: 100%;\r\n        max-width: 1280px;\r\n        margin: 0 auto;\r\n        padding: 30px 24px;\r\n        background: transparent;\r\n        border-radius: 24px;\r\n        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    \/* ---------- HEADER ---------- *\/\r\n    .gallery-header {\r\n        display: flex;\r\n        align-items: flex-end;\r\n        justify-content: space-between;\r\n        flex-wrap: wrap;\r\n        margin-bottom: 28px;\r\n        border-bottom: 2px solid #e8eee9;\r\n        padding-bottom: 16px;\r\n    }\r\n\r\n    .gallery-header .header-left {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 2px;\r\n    }\r\n\r\n    .gallery-header .header-left h2 {\r\n        font-family: 'Poppins', 'Inter', sans-serif;\r\n        font-size: 1.8rem;\r\n        font-weight: 700;\r\n        color: #002E08;\r\n        letter-spacing: 0.02em;\r\n        line-height: 1.2;\r\n    }\r\n\r\n    .gallery-header .header-left .subtitle {\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.9rem;\r\n        font-weight: 400;\r\n        color: #5f7a6b;\r\n        letter-spacing: 0.04em;\r\n    }\r\n\r\n    .gallery-header .header-right {\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.85rem;\r\n        color: #5f7a6b;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        background: #eef3f0;\r\n        padding: 6px 16px;\r\n        border-radius: 30px;\r\n    }\r\n\r\n    .gallery-header .header-right .count {\r\n        font-weight: 600;\r\n        color: #002E08;\r\n    }\r\n\r\n    \/* ---------- KONTEN UTAMA (2 KOLOM) ---------- *\/\r\n    .gallery-content {\r\n        display: grid;\r\n        grid-template-columns: 1.6fr 1fr;\r\n        gap: 28px;\r\n        align-items: start;\r\n    }\r\n\r\n    \/* ---------- PLAYER UTAMA ---------- *\/\r\n    .main-player {\r\n        background: #ffffff;\r\n        border-radius: 18px;\r\n        overflow: hidden;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\r\n        border: 1px solid #e9efeC;\r\n        position: relative;\r\n    }\r\n\r\n    .main-player .video-wrapper {\r\n        position: relative;\r\n        padding-bottom: 56.25%; \/* 16:9 *\/\r\n        height: 0;\r\n        overflow: hidden;\r\n        background: #0a1f12;\r\n    }\r\n\r\n    .main-player .video-wrapper iframe {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        border: none;\r\n    }\r\n\r\n    .main-player .video-info {\r\n        padding: 18px 22px 20px 22px;\r\n        background: #ffffff;\r\n    }\r\n\r\n    .main-player .video-info .video-title {\r\n        font-family: 'Poppins', 'Inter', sans-serif;\r\n        font-size: 1.15rem;\r\n        font-weight: 600;\r\n        color: #0f2b1d;\r\n        line-height: 1.4;\r\n        margin-bottom: 4px;\r\n    }\r\n\r\n    .main-player .video-info .video-meta {\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.8rem;\r\n        color: #5f7a6b;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n    }\r\n\r\n    .main-player .video-info .video-meta .dot {\r\n        display: inline-block;\r\n        width: 4px;\r\n        height: 4px;\r\n        background: #b6cdc0;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    \/* ---------- DAFTAR PUTAR (DENGAN SCROLL) ---------- *\/\r\n    .playlist-side {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n        max-height: 420px; \/* cukup untuk 3 video + sedikit ruang *\/\r\n        overflow-y: auto;\r\n        padding-right: 4px;\r\n        scroll-behavior: smooth;\r\n    }\r\n\r\n    \/* Scrollbar kustom untuk playlist *\/\r\n    .playlist-side::-webkit-scrollbar {\r\n        width: 5px;\r\n    }\r\n    .playlist-side::-webkit-scrollbar-track {\r\n        background: #eef3f0;\r\n        border-radius: 10px;\r\n    }\r\n    .playlist-side::-webkit-scrollbar-thumb {\r\n        background: #b6cdc0;\r\n        border-radius: 10px;\r\n    }\r\n    .playlist-side::-webkit-scrollbar-thumb:hover {\r\n        background: #8fb0a0;\r\n    }\r\n\r\n    .playlist-item {\r\n        display: flex;\r\n        gap: 14px;\r\n        background: #ffffff;\r\n        border-radius: 14px;\r\n        padding: 10px 12px 10px 10px;\r\n        cursor: pointer;\r\n        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);\r\n        border: 2px solid transparent;\r\n        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);\r\n        align-items: center;\r\n        flex-shrink: 0; \/* agar tidak mengecil saat discroll *\/\r\n    }\r\n\r\n    .playlist-item:hover {\r\n        border-color: #c6ddd2;\r\n        transform: translateX(4px);\r\n        box-shadow: 0 4px 16px rgba(0, 46, 8, 0.08);\r\n    }\r\n\r\n    .playlist-item.active {\r\n        border-color: #002E08;\r\n        background: #f3f8f5;\r\n        box-shadow: 0 4px 16px rgba(0, 46, 8, 0.10);\r\n    }\r\n\r\n    .playlist-item .thumb {\r\n        flex-shrink: 0;\r\n        width: 120px;\r\n        height: 68px;\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n        background: #0a1f12;\r\n        position: relative;\r\n    }\r\n\r\n    .playlist-item .thumb img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        display: block;\r\n    }\r\n\r\n    .playlist-item .thumb .play-icon {\r\n        position: absolute;\r\n        inset: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: rgba(0, 0, 0, 0.35);\r\n        color: #fff;\r\n        font-size: 1.6rem;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n\r\n    .playlist-item:hover .thumb .play-icon {\r\n        opacity: 1;\r\n    }\r\n\r\n    .playlist-item .item-info {\r\n        flex: 1;\r\n        min-width: 0;\r\n    }\r\n\r\n    .playlist-item .item-info .item-title {\r\n        font-family: 'Poppins', 'Inter', sans-serif;\r\n        font-size: 0.9rem;\r\n        font-weight: 500;\r\n        color: #0f2b1d;\r\n        line-height: 1.3;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .playlist-item .item-info .item-duration {\r\n        font-family: 'Inter', 'Poppins', sans-serif;\r\n        font-size: 0.75rem;\r\n        color: #7a9586;\r\n        margin-top: 2px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .playlist-item .item-info .item-duration .badge {\r\n        background: #e8eee9;\r\n        padding: 1px 10px;\r\n        border-radius: 20px;\r\n        font-size: 0.65rem;\r\n        color: #002E08;\r\n        font-weight: 500;\r\n    }\r\n\r\n    \/* ---------- RESPONSIVE ---------- *\/\r\n\r\n    \/* Tablet (\u2264 992px) *\/\r\n    @media (max-width: 992px) {\r\n        .video-gallery-wrapper {\r\n            padding: 20px 16px;\r\n        }\r\n        .gallery-content {\r\n            grid-template-columns: 1fr;\r\n            gap: 24px;\r\n        }\r\n        .playlist-side {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 12px;\r\n            max-height: none; \/* di tablet, tampilkan semua dalam grid 2 kolom tanpa scroll *\/\r\n            overflow-y: visible;\r\n        }\r\n        .playlist-item .thumb {\r\n            width: 100px;\r\n            height: 60px;\r\n        }\r\n        .gallery-header .header-left h2 {\r\n            font-size: 1.5rem;\r\n        }\r\n        .main-player .video-info .video-title {\r\n            font-size: 1rem;\r\n        }\r\n    }\r\n\r\n    \/* Mobile (\u2264 640px) *\/\r\n    @media (max-width: 640px) {\r\n        .video-gallery-wrapper {\r\n            padding: 14px 10px;\r\n            border-radius: 16px;\r\n        }\r\n        .gallery-header {\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n            gap: 8px;\r\n            padding-bottom: 12px;\r\n            margin-bottom: 18px;\r\n        }\r\n        .gallery-header .header-left h2 {\r\n            font-size: 1.3rem;\r\n        }\r\n        .gallery-header .header-left .subtitle {\r\n            font-size: 0.8rem;\r\n        }\r\n        .gallery-header .header-right {\r\n            font-size: 0.75rem;\r\n            padding: 4px 12px;\r\n        }\r\n        .gallery-content {\r\n            gap: 18px;\r\n        }\r\n        .playlist-side {\r\n            grid-template-columns: 1fr;\r\n            gap: 10px;\r\n            max-height: 400px; \/* di mobile, batasi tinggi agar scroll *\/\r\n            overflow-y: auto;\r\n        }\r\n        .playlist-item {\r\n            padding: 8px 10px 8px 8px;\r\n            gap: 10px;\r\n        }\r\n        .playlist-item .thumb {\r\n            width: 90px;\r\n            height: 54px;\r\n        }\r\n        .playlist-item .item-info .item-title {\r\n            font-size: 0.8rem;\r\n        }\r\n        .playlist-item .item-info .item-duration {\r\n            font-size: 0.7rem;\r\n        }\r\n        .main-player .video-info {\r\n            padding: 14px 16px 16px 16px;\r\n        }\r\n        .main-player .video-info .video-title {\r\n            font-size: 0.95rem;\r\n        }\r\n        .main-player .video-info .video-meta {\r\n            font-size: 0.7rem;\r\n            flex-wrap: wrap;\r\n        }\r\n        .playlist-item .thumb .play-icon {\r\n            opacity: 0.7;\r\n            font-size: 1.2rem;\r\n        }\r\n    }\r\n\r\n    \/* Mobile kecil (\u2264 400px) *\/\r\n    @media (max-width: 400px) {\r\n        .gallery-header .header-left h2 {\r\n            font-size: 1.1rem;\r\n        }\r\n        .playlist-item .thumb {\r\n            width: 70px;\r\n            height: 44px;\r\n        }\r\n        .playlist-item .item-info .item-title {\r\n            font-size: 0.75rem;\r\n        }\r\n        .main-player .video-info .video-title {\r\n            font-size: 0.85rem;\r\n        }\r\n    }\r\n\r\n    \/* ---------- SCROLLBAR UTAMA ---------- *\/\r\n    .video-gallery-wrapper::-webkit-scrollbar {\r\n        width: 6px;\r\n    }\r\n    .video-gallery-wrapper::-webkit-scrollbar-track {\r\n        background: #eef3f0;\r\n        border-radius: 10px;\r\n    }\r\n    .video-gallery-wrapper::-webkit-scrollbar-thumb {\r\n        background: #b6cdc0;\r\n        border-radius: 10px;\r\n    }\r\n<\/style>\r\n\r\n<!-- ============================================\r\n     HTML STRUKTUR\r\n     ============================================ -->\r\n<div class=\"video-gallery-wrapper\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"gallery-header\">\r\n        <div class=\"header-left\">\r\n            <h2>Galeri Video<\/h2>\r\n            <span class=\"subtitle\">Kenali KHDTK melalui dokumentasi video<\/span>\r\n        <\/div>\r\n        <div class=\"header-right\">\r\n            <span class=\"count\" id=\"videoCount\">9<\/span> Video\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- KONTEN -->\r\n    <div class=\"gallery-content\">\r\n\r\n        <!-- PLAYER UTAMA -->\r\n        <div class=\"main-player\">\r\n            <div class=\"video-wrapper\">\r\n                <iframe\r\n                id=\"mainVideo\"\r\n                src=\"https:\/\/www.youtube.com\/embed\/F7Q7qqGcoiA?si=w-Er1SyYgFPSwpuX&autoplay=0&rel=0\"\r\n                title=\"Video Player\"\r\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n                allowfullscreen\r\n                loading=\"lazy\">\r\n            <\/iframe>\r\n        <\/div>\r\n        <div class=\"video-info\">\r\n            <div class=\"video-title\" id=\"currentTitle\">Sejarah dan Fungsi KHDTK Hutan Diklat<\/div>\r\n            <div class=\"video-meta\">\r\n                <span id=\"currentDuration\">5:32<\/span>\r\n                <span class=\"dot\"><\/span>\r\n                <span>KHDTK Hutan Diklat Pondok Buluh<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- PLAYLIST SAMPING (dengan scroll) -->\r\n    <div class=\"playlist-side\" id=\"playlistContainer\">\r\n        <!-- Item akan di-generate oleh JavaScript -->\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<!-- ============================================\r\n     JAVASCRIPT \u2013 DATA PLAYLIST & INTERAKSI\r\n     ============================================ -->\r\n<script>\r\n    (function() {\r\n        'use strict';\r\n\r\n        \/\/ ---------- DATA VIDEO ----------\r\n        const videos = [{\r\n            id: 'F7Q7qqGcoiA',\r\n            title: 'Sejarah dan Fungsi KHDTK Hutan Diklat',\r\n            duration: '5:32',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/F7Q7qqGcoiA\/mqdefault.jpg'\r\n        }, {\r\n            id: '7hFEZy-ifKw',\r\n            title: 'Jelajah KHDTK Hutan Diklat Pondok Buluh',\r\n            duration: '2:45',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/7hFEZy-ifKw\/mqdefault.jpg'\r\n        }, {\r\n            id: 'xD8eChiv-ww',\r\n            title: 'Aneka ragam Satwa di KHDTK Pondok Buluh 1',\r\n            duration: '4:12',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/xD8eChiv-ww\/mqdefault.jpg'\r\n        }, {\r\n            id: 'mmIUgMZW5OU',\r\n            title: 'Aneka ragam Satwa di KHDTK Pondok Buluh 2',\r\n            duration: '5:20',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/mmIUgMZW5OU\/mqdefault.jpg'\r\n        }, {\r\n            id: 'ROnTpB10694',\r\n            title: 'Aneka ragam Satwa di KHDTK Pondok Buluh 3',\r\n            duration: '4:30',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/ROnTpB10694\/mqdefault.jpg'\r\n        }, {\r\n            id: 'cfEwUoCOF-I',\r\n            title: 'Aneka ragam Satwa di KHDTK Pondok Buluh 4',\r\n            duration: '3:15',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/cfEwUoCOF-I\/mqdefault.jpg'\r\n        }, {\r\n            id: 'RLAdqDomc3Y',\r\n            title: 'Aneka ragam Satwa di KHDTK Pondok Buluh 5',\r\n            duration: '4:02',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/RLAdqDomc3Y\/mqdefault.jpg'\r\n        }, {\r\n            id: 'vPOdZqhuJ_0',\r\n            title: 'Aneka ragam Satwa di KHDTK Pondok Buluh 6',\r\n            duration: '3:48',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/vPOdZqhuJ_0\/mqdefault.jpg'\r\n        }, {\r\n            id: 'SYpKT-SSE2A',\r\n            title: 'Aneka ragam Satwa di KHDTK Pondok Buluh 7',\r\n            duration: '6:10',\r\n            thumbnail: 'https:\/\/img.youtube.com\/vi\/SYpKT-SSE2A\/mqdefault.jpg'\r\n        }];\r\n\r\n        \/\/ ---------- DOM REFS ----------\r\n        const playlistContainer = document.getElementById('playlistContainer');\r\n        const mainIframe = document.getElementById('mainVideo');\r\n        const currentTitle = document.getElementById('currentTitle');\r\n        const currentDuration = document.getElementById('currentDuration');\r\n        const videoCount = document.getElementById('videoCount');\r\n\r\n        \/\/ Update jumlah video\r\n        videoCount.textContent = videos.length;\r\n\r\n        \/\/ ---------- RENDER PLAYLIST ----------\r\n        function renderPlaylist(activeId) {\r\n            playlistContainer.innerHTML = '';\r\n            videos.forEach(function(video, index) {\r\n                const item = document.createElement('div');\r\n                item.className = 'playlist-item' + (video.id === activeId ? ' active' : '');\r\n                item.dataset.index = index;\r\n\r\n                item.innerHTML = `\r\n                    <div class=\"thumb\">\r\n                        <img decoding=\"async\" src=\"${video.thumbnail}\" alt=\"${video.title}\" loading=\"lazy\">\r\n                        <span class=\"play-icon\">\u25b6<\/span>\r\n                    <\/div>\r\n                    <div class=\"item-info\">\r\n                        <div class=\"item-title\">${video.title}<\/div>\r\n                        <div class=\"item-duration\">\r\n                            <span>${video.duration}<\/span>\r\n                            <span class=\"badge\">KHDTK<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n\r\n                item.addEventListener('click', function() {\r\n                    playVideo(video.id, video.title, video.duration);\r\n                });\r\n\r\n                playlistContainer.appendChild(item);\r\n            });\r\n        }\r\n\r\n        \/\/ ---------- FUNGSI PUTAR VIDEO ----------\r\n        function playVideo(videoId, title, duration) {\r\n            \/\/ Update iframe\r\n            mainIframe.src = `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1&rel=0`;\r\n\r\n            \/\/ Update info\r\n            currentTitle.textContent = title;\r\n            currentDuration.textContent = duration;\r\n\r\n            \/\/ Update active state di playlist\r\n            document.querySelectorAll('.playlist-item').forEach(function(item) {\r\n                item.classList.remove('active');\r\n            });\r\n            const items = document.querySelectorAll('.playlist-item');\r\n            const index = videos.findIndex(v => v.id === videoId);\r\n            if (index !== -1 && items[index]) {\r\n                items[index].classList.add('active');\r\n                \/\/ Scroll item aktif ke tengah area playlist (agar terlihat)\r\n                items[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n            }\r\n        }\r\n\r\n        \/\/ ---------- INITIAL RENDER ----------\r\n        renderPlaylist('F7Q7qqGcoiA');\r\n\r\n        console.log('\u2705 Galeri Video KHDTK siap digunakan. Total ' + videos.length + ' video.');\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kawasan Hutan Dengan Tujuan Khusus KHDTK PONDOK BULUH DAN AEK NAULI Ruang Pembelajaran, Pengembangan Kompetensi, dan Pemberdayaan Masyarakat KHDTK Pondok Buluh dan Aek Nauli merupakan kawasan hutan pendidikan yang dikelola oleh Balai P2SDM Wilayah I untuk mendukung kegiatan Pelatihan, Penelitian, Pengembangan Kompetensi, dan Pemberdayaan Masyarakat. \ud83d\uddfa\ufe0f Lihat Peta KHDTK \u2192 \ud83c\udf32 Peta Kawasan KHDTK Kementerian [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6385","page","type-page","status-publish","hentry","jsn-master"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.2.1 (Yoast SEO v28.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>khdtkpban - Balai P2SDM Wilyah I<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"khdtkpban\" \/>\n<meta property=\"og:description\" content=\"Kawasan Hutan Dengan Tujuan Khusus KHDTK PONDOK BULUH DAN AEK NAULI Ruang Pembelajaran, Pengembangan Kompetensi, dan Pemberdayaan Masyarakat KHDTK Pondok Buluh dan Aek Nauli merupakan kawasan hutan pendidikan yang dikelola oleh Balai P2SDM Wilayah I untuk mendukung kegiatan Pelatihan, Penelitian, Pengembangan Kompetensi, dan Pemberdayaan Masyarakat. \ud83d\uddfa\ufe0f Lihat Peta KHDTK \u2192 \ud83c\udf32 Peta Kawasan KHDTK Kementerian [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/\" \/>\n<meta property=\"og:site_name\" content=\"Balai P2SDM Wilyah I\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-19T07:41:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/index.php\\\/khdtkpban\\\/\",\"url\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/index.php\\\/khdtkpban\\\/\",\"name\":\"khdtkpban - Balai P2SDM Wilyah I\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/#website\"},\"datePublished\":\"2026-09-07T07:47:55+00:00\",\"dateModified\":\"2026-10-19T07:41:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/index.php\\\/khdtkpban\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/index.php\\\/khdtkpban\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/index.php\\\/khdtkpban\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"khdtkpban\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/#website\",\"url\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/\",\"name\":\"Balai P2SDM Wilyah I\",\"description\":\"Balai Pelatihan dan Penyuluhan SDM Wilayah 1 Kementerian Kehutanan\",\"publisher\":{\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/#organization\",\"name\":\"Balai P2SDM Wilyah I\",\"url\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bdlhkpematangsiantar.bp2sdm.menlhk.go.id\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Logo-Kementerian-Lingkungan-Hidup-dan-Kehutanan-KLHK-PNG-1080p-FileVector69-1.png\",\"contentUrl\":\"https:\\\/\\\/bdlhkpematangsiantar.bp2sdm.menlhk.go.id\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Logo-Kementerian-Lingkungan-Hidup-dan-Kehutanan-KLHK-PNG-1080p-FileVector69-1.png\",\"width\":1080,\"height\":1080,\"caption\":\"Balai P2SDM Wilyah I\"},\"image\":{\"@id\":\"https:\\\/\\\/sdmhutsiantar.bp2sdm.kehutanan.go.id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"khdtkpban - Balai P2SDM Wilyah I","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/","og_locale":"id_ID","og_type":"article","og_title":"khdtkpban","og_description":"Kawasan Hutan Dengan Tujuan Khusus KHDTK PONDOK BULUH DAN AEK NAULI Ruang Pembelajaran, Pengembangan Kompetensi, dan Pemberdayaan Masyarakat KHDTK Pondok Buluh dan Aek Nauli merupakan kawasan hutan pendidikan yang dikelola oleh Balai P2SDM Wilayah I untuk mendukung kegiatan Pelatihan, Penelitian, Pengembangan Kompetensi, dan Pemberdayaan Masyarakat. \ud83d\uddfa\ufe0f Lihat Peta KHDTK \u2192 \ud83c\udf32 Peta Kawasan KHDTK Kementerian [&hellip;]","og_url":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/","og_site_name":"Balai P2SDM Wilyah I","article_modified_time":"2026-10-19T07:41:41+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"7 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/","url":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/","name":"khdtkpban - Balai P2SDM Wilyah I","isPartOf":{"@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/#website"},"datePublished":"2026-09-07T07:47:55+00:00","dateModified":"2026-10-19T07:41:41+00:00","breadcrumb":{"@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/khdtkpban\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/"},{"@type":"ListItem","position":2,"name":"khdtkpban"}]},{"@type":"WebSite","@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/#website","url":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/","name":"Balai P2SDM Wilyah I","description":"Balai Pelatihan dan Penyuluhan SDM Wilayah 1 Kementerian Kehutanan","publisher":{"@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/#organization","name":"Balai P2SDM Wilyah I","url":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/#\/schema\/logo\/image\/","url":"https:\/\/bdlhkpematangsiantar.bp2sdm.menlhk.go.id\/wp-content\/uploads\/2023\/03\/Logo-Kementerian-Lingkungan-Hidup-dan-Kehutanan-KLHK-PNG-1080p-FileVector69-1.png","contentUrl":"https:\/\/bdlhkpematangsiantar.bp2sdm.menlhk.go.id\/wp-content\/uploads\/2023\/03\/Logo-Kementerian-Lingkungan-Hidup-dan-Kehutanan-KLHK-PNG-1080p-FileVector69-1.png","width":1080,"height":1080,"caption":"Balai P2SDM Wilyah I"},"image":{"@id":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/wp-json\/wp\/v2\/pages\/6385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/wp-json\/wp\/v2\/comments?post=6385"}],"version-history":[{"count":177,"href":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/wp-json\/wp\/v2\/pages\/6385\/revisions"}],"predecessor-version":[{"id":6727,"href":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/wp-json\/wp\/v2\/pages\/6385\/revisions\/6727"}],"wp:attachment":[{"href":"https:\/\/sdmhutsiantar.bp2sdm.kehutanan.go.id\/index.php\/wp-json\/wp\/v2\/media?parent=6385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}