{"id":21,"date":"2025-11-10T18:21:54","date_gmt":"2025-11-10T11:21:54","guid":{"rendered":"https:\/\/iptar.ac.id\/?page_id=21"},"modified":"2026-09-10T15:56:54","modified_gmt":"2026-09-10T08:56:54","slug":"lppm","status":"publish","type":"page","link":"https:\/\/iptar.ac.id\/index.php\/lppm\/","title":{"rendered":"LPPM"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21\" class=\"elementor elementor-21\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e295f8 e-con-full e-flex e-con e-parent\" data-id=\"1e295f8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d2a4c51 elementor-widget elementor-widget-html\" data-id=\"d2a4c51\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     HALAMAN LPPM IPTAR\n     FULL WIDTH + NUANSA IPTAR\n     HTML + CSS + JAVASCRIPT\n     ELEMENTOR HTML WIDGET\n========================================================= -->\n\n<section id=\"lppm-iptar\">\n\n    <!-- DEKORASI BACKGROUND -->\n    <div class=\"lppm-bg-circle lppm-circle-one\"><\/div>\n    <div class=\"lppm-bg-circle lppm-circle-two\"><\/div>\n    <div class=\"lppm-bg-dots\"><\/div>\n\n\n    <div class=\"lppm-container\">\n\n\n        <!-- =====================================================\n             DATA LPPM\n             EDIT BAGIAN INI SAJA\n        ====================================================== -->\n\n        <script>\n\n            const DATA_LPPM = {\n\n                \/* =================================================\n                   FOTO KETUA LPPM\n\n                   Bisa gunakan URL Media WordPress:\n\n                   https:\/\/iptar.ac.id\/wp-content\/uploads\/2026\/08\/foto.jpg\n\n                   ATAU Google Drive:\n\n                   https:\/\/drive.google.com\/thumbnail?id=ID_FILE&sz=w1000\n                ================================================= *\/\n\n                foto:\n                \"https:\/\/iptar.ac.id\/wp-content\/uploads\/2026\/09\/Pekon-1.png\",\n\n\n                \/* =================================================\n                   DATA KETUA\n                ================================================= *\/\n\n                ketua:\n                \"Annisa Rahmadhani,M.Pd.\",\n\n                jabatan:\n                \"Ketua LPPM\",\n\n\n                \/* =================================================\n                   NAMA LEMBAGA\n                ================================================= *\/\n\n                singkatan:\n                \"LPPM\",\n\n                nama:\n                \"Lembaga Penelitian dan Pengabdian kepada Masyarakat\",\n\n\n                \/* =================================================\n                   DESKRIPSI\n                ================================================= *\/\n\n                deskripsi: `\n                    <strong>Lembaga Penelitian dan Pengabdian kepada Masyarakat (LPPM)<\/strong>\n                    merupakan lembaga di lingkungan Institut Pendidikan dan\n                    Teknologi 'Aisyiyah Riau (IPTAR) yang berperan dalam\n                    mengembangkan, mengoordinasikan, dan memfasilitasi kegiatan\n                    penelitian serta pengabdian kepada masyarakat sebagai bagian\n                    dari pelaksanaan Caturdharma Perguruan Tinggi.\n                `,\n\n\n                \/* =================================================\n                   DAFTAR DOKUMEN\n\n                   nama   = Nama dokumen\n                   cover  = URL cover \/ thumbnail Google Drive\n                   fileId = ID file Google Drive\n                   tahun  = Tahun dokumen\n                   kategori = kategori dokumen\n                ================================================= *\/\n\n                dokumen: [\n\n                    {\n                        nama: \"Renstra LPPM\",\n                        kategori: \"Renstra\",\n                        tahun: \"2025\",\n                        cover: \"https:\/\/drive.google.com\/file\/d\/1oNEcPJphVA9ZTLS-k_mMWBF1s2sEeggW\/view?usp=drive_link =GANTI_ID_COVER_1&sz=w800\",\n                        fileId: \"\"\n                    },\n                    {\n                        nama: \"Renop LPPM\",\n                        kategori: \"Renop\",\n                        tahun: \"2025\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_2&sz=w800\",\n                        fileId: \"https:\/\/drive.google.com\/file\/d\/1mMW2qMbTvS79p3jvK6KGUepCscX9vwF5\/view?usp=drive_link\"\n                    },\n\n                    {\n                        nama: \"Pedoman Penelitian\",\n                        kategori: \"Pedoman\",\n                        tahun: \"2025\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_3&sz=w800\",\n                        fileId: \"GANTI_ID_FILE_3\"\n                    },\n\n                    {\n                        nama: \"Pedoman Pengabdian kepada Masyarakat\",\n                        kategori: \"Pedoman\",\n                        tahun: \"2025\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_4&sz=w800\",\n                        fileId: \"GANTI_ID_FILE_4\"\n                    },\n\n                    {\n                        nama: \"Panduan Hibah Penelitian\",\n                        kategori: \"Panduan\",\n                        tahun: \"2026\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_5&sz=w800\",\n                        fileId: \"GANTI_ID_FILE_5\"\n                    },\n\n                    {\n                        nama: \"Panduan Hibah Pengabdian\",\n                        kategori: \"Panduan\",\n                        tahun: \"2026\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_6&sz=w800\",\n                        fileId: \"GANTI_ID_FILE_6\"\n                    },\n\n                    {\n                        nama: \"SOP Penelitian\",\n                        kategori: \"SOP\",\n                        tahun: \"2025\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_7&sz=w800\",\n                        fileId: \"GANTI_ID_FILE_7\"\n                    },\n\n                    {\n                        nama: \"SOP Pengabdian kepada Masyarakat\",\n                        kategori: \"SOP\",\n                        tahun: \"2025\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_8&sz=w800\",\n                        fileId: \"GANTI_ID_FILE_8\"\n                    },\n\n                    {\n                        nama: \"Formulir Penelitian\",\n                        kategori: \"Formulir\",\n                        tahun: \"2025\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_9&sz=w800\",\n                        fileId: \"GANTI_ID_FILE_9\"\n                    },\n\n                    {\n                        nama: \"Formulir Pengabdian\",\n                        kategori: \"Formulir\",\n                        tahun: \"2025\",\n                        cover: \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_10&sz=w800\",\n                        fileId: \"GANTI_ID_FILE_10\"\n                    }\n\n                ]\n\n            };\n\n        <\/script>\n\n\n\n        <!-- =====================================================\n             PROFIL LPPM\n        ====================================================== -->\n\n        <section class=\"lppm-header\">\n\n\n            <!-- ==============================\n                 FOTO KETUA\n            =============================== -->\n\n            <div class=\"lppm-profile\">\n\n                <div class=\"lppm-photo-wrap\">\n\n                    <div class=\"lppm-photo-decoration\"><\/div>\n\n\n                    <div class=\"lppm-photo\">\n\n                        <img decoding=\"async\"\n                            id=\"lppmFoto\"\n                            src=\"\"\n                            alt=\"Ketua LPPM IPTAR\"\n                            loading=\"lazy\"\n                        >\n\n                        <div class=\"lppm-photo-fallback\">\n                            LPPM\n                        <\/div>\n\n                    <\/div>\n\n\n                    <div class=\"lppm-chair-badge\">\n\n                        <svg\n                            width=\"15\"\n                            height=\"15\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\">\n\n                            <path d=\"M20 21v-2a4 4 0 0 0-4-4H8\n                                     a4 4 0 0 0-4 4v2\">\n                            <\/path>\n\n                            <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n\n                        <\/svg>\n\n                        <span id=\"lppmJabatan\">\n                            Ketua LPPM\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"lppm-chair-name\">\n\n                    <span>\n                        Ketua Lembaga\n                    <\/span>\n\n                    <h3 id=\"lppmKetua\">\n                        Nama Ketua LPPM\n                    <\/h3>\n\n                <\/div>\n\n            <\/div>\n\n\n\n            <!-- ==============================\n                 INFORMASI LPPM\n            =============================== -->\n\n            <div class=\"lppm-info\">\n\n\n                <div class=\"lppm-label\">\n\n                    <span class=\"lppm-label-icon\">\n\n                        <svg\n                            width=\"16\"\n                            height=\"16\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\">\n\n                            <path d=\"M3 21h18\"><\/path>\n                            <path d=\"M5 21V10\"><\/path>\n                            <path d=\"M19 21V10\"><\/path>\n                            <path d=\"M9 21V10\"><\/path>\n                            <path d=\"M15 21V10\"><\/path>\n                            <path d=\"M2 10l10-7 10 7\"><\/path>\n\n                        <\/svg>\n\n                    <\/span>\n\n                    LEMBAGA IPTAR\n\n                <\/div>\n\n\n                <div class=\"lppm-kicker\">\n                    Penelitian \u2022 Inovasi \u2022 Pengabdian\n                <\/div>\n\n\n                <h1>\n\n                    <span id=\"lppmSingkatan\">\n                        LPPM\n                    <\/span>\n\n                    <small>\n                        IPTAR\n                    <\/small>\n\n                <\/h1>\n\n\n                <h2 id=\"lppmNamaLembaga\"><\/h2>\n\n\n                <div class=\"lppm-title-line\">\n\n                    <span><\/span>\n                    <i><\/i>\n                    <span><\/span>\n\n                <\/div>\n\n\n                <div\n                    class=\"lppm-description\"\n                    id=\"lppmDeskripsi\">\n                <\/div>\n\n\n                <!-- PILAR -->\n\n                <div class=\"lppm-pillars\">\n\n\n                    <div class=\"lppm-pillar\">\n\n                        <span class=\"lppm-pillar-icon\">\n\n                            <svg\n                                width=\"18\"\n                                height=\"18\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"none\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"2\">\n\n                                <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n\n                                <line\n                                    x1=\"21\"\n                                    y1=\"21\"\n                                    x2=\"16.65\"\n                                    y2=\"16.65\">\n                                <\/line>\n\n                            <\/svg>\n\n                        <\/span>\n\n                        <div>\n\n                            <strong>\n                                Penelitian\n                            <\/strong>\n\n                            <span>\n                                Riset & inovasi\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n\n                    <div class=\"lppm-pillar\">\n\n                        <span class=\"lppm-pillar-icon yellow\">\n\n                            <svg\n                                width=\"18\"\n                                height=\"18\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"none\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"2\">\n\n                                <path d=\"M12 2v20\"><\/path>\n                                <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H6\"><\/path>\n\n                            <\/svg>\n\n                        <\/span>\n\n                        <div>\n\n                            <strong>\n                                Hibah\n                            <\/strong>\n\n                            <span>\n                                Pendanaan kegiatan\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n\n\n                    <div class=\"lppm-pillar\">\n\n                        <span class=\"lppm-pillar-icon orange\">\n\n                            <svg\n                                width=\"18\"\n                                height=\"18\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"none\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"2\">\n\n                                <path d=\"M16 21v-2a4 4 0 0 0-4-4H5\n                                         a4 4 0 0 0-4 4v2\">\n                                <\/path>\n\n                                <circle cx=\"8.5\" cy=\"7\" r=\"4\"><\/circle>\n\n                                <path d=\"M20 8v6\"><\/path>\n                                <path d=\"M23 11h-6\"><\/path>\n\n                            <\/svg>\n\n                        <\/span>\n\n                        <div>\n\n                            <strong>\n                                Pengabdian\n                            <\/strong>\n\n                            <span>\n                                Dampak masyarakat\n                            <\/span>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/div>\n\n        <\/section>\n\n\n\n        <!-- =====================================================\n             DOKUMEN LPPM\n        ====================================================== -->\n\n        <section class=\"lppm-documents\">\n\n\n            <!-- HEADER -->\n\n            <div class=\"lppm-document-header\">\n\n\n                <div class=\"lppm-document-header-left\">\n\n                    <div class=\"lppm-document-icon\">\n\n                        <svg\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"2\">\n\n                            <path d=\"M14 2H6\n                                     a2 2 0 0 0-2 2v16\n                                     a2 2 0 0 0 2 2h12\n                                     a2 2 0 0 0 2-2V8z\">\n                            <\/path>\n\n                            <polyline\n                                points=\"14 2 14 8 20 8\">\n                            <\/polyline>\n\n                            <line\n                                x1=\"16\"\n                                y1=\"13\"\n                                x2=\"8\"\n                                y2=\"13\">\n                            <\/line>\n\n                            <line\n                                x1=\"16\"\n                                y1=\"17\"\n                                x2=\"8\"\n                                y2=\"17\">\n                            <\/line>\n\n                        <\/svg>\n\n                    <\/div>\n\n\n                    <div>\n\n                        <span class=\"lppm-document-small\">\n                            PUSAT DOKUMENTASI\n                        <\/span>\n\n                        <h2>\n                            Dokumen LPPM\n                        <\/h2>\n\n                        <p>\n                            Dokumen, pedoman, panduan, SOP dan\n                            formulir resmi LPPM IPTAR.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n\n\n                <!-- JUMLAH -->\n\n                <div class=\"lppm-count\">\n\n                    <strong id=\"jumlahLppm\">\n                        0\n                    <\/strong>\n\n                    <span>\n                        Dokumen\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n\n            <!-- =================================================\n                 TOOLBAR\n            ================================================== -->\n\n            <div class=\"lppm-toolbar\">\n\n\n                <div class=\"lppm-search\">\n\n                    <svg\n                        width=\"18\"\n                        height=\"18\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\">\n\n                        <circle\n                            cx=\"11\"\n                            cy=\"11\"\n                            r=\"8\">\n                        <\/circle>\n\n                        <line\n                            x1=\"21\"\n                            y1=\"21\"\n                            x2=\"16.65\"\n                            y2=\"16.65\">\n                        <\/line>\n\n                    <\/svg>\n\n\n                    <input\n                        type=\"text\"\n                        id=\"lppmSearch\"\n                        placeholder=\"Cari dokumen LPPM...\"\n                        autocomplete=\"off\"\n                    >\n\n                <\/div>\n\n\n                <button\n                    type=\"button\"\n                    id=\"resetSearch\"\n                    class=\"lppm-reset\">\n\n                    Reset\n\n                <\/button>\n\n            <\/div>\n\n\n\n            <!-- =================================================\n                 GRID\n            ================================================== -->\n\n            <div\n                class=\"lppm-grid\"\n                id=\"lppmGrid\">\n            <\/div>\n\n\n\n            <!-- =================================================\n                 EMPTY\n            ================================================== -->\n\n            <div\n                class=\"lppm-empty\"\n                id=\"lppmEmpty\">\n\n                <div class=\"lppm-empty-icon\">\n\n                    <svg\n                        width=\"32\"\n                        height=\"32\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.7\">\n\n                        <circle\n                            cx=\"11\"\n                            cy=\"11\"\n                            r=\"8\">\n                        <\/circle>\n\n                        <line\n                            x1=\"21\"\n                            y1=\"21\"\n                            x2=\"16.65\"\n                            y2=\"16.65\">\n                        <\/line>\n\n                    <\/svg>\n\n                <\/div>\n\n                <h3>\n                    Dokumen tidak ditemukan\n                <\/h3>\n\n                <p>\n                    Coba gunakan kata kunci pencarian yang berbeda.\n                <\/p>\n\n            <\/div>\n\n        <\/section>\n\n    <\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   ROOT - FULL WIDTH ELEMENTOR\n========================================================= *\/\n\n#lppm-iptar {\n\n    --lppm-green: #079447;\n    --lppm-green-dark: #04783c;\n    --lppm-green-deep: #064e3b;\n\n    --lppm-green-light: #e9f8ef;\n\n    --lppm-yellow: #facc15;\n    --lppm-yellow-light: #fff8cc;\n\n    --lppm-orange: #f59e0b;\n    --lppm-orange-light: #fff0dc;\n\n    --lppm-text: #173a2c;\n    --lppm-muted: #687a70;\n    --lppm-border: #e1ebe5;\n\n\n    \/*\n    =========================================\n    FULL WIDTH BREAKOUT ELEMENTOR\n    =========================================\n    *\/\n\n    width: 100vw;\n    max-width: 100vw;\n\n    margin-left: calc(50% - 50vw);\n    margin-right: calc(50% - 50vw);\n\n    position: relative;\n\n    overflow: hidden;\n\n    padding: 68px 0 85px;\n\n    font-family:\n        \"Segoe UI\",\n        -apple-system,\n        BlinkMacSystemFont,\n        Roboto,\n        Arial,\n        sans-serif;\n\n    color: var(--lppm-text);\n\n    background:\n\n        radial-gradient(\n            circle at 2% 5%,\n            rgba(250,204,21,.15),\n            transparent 21%\n        ),\n\n        radial-gradient(\n            circle at 97% 45%,\n            rgba(245,158,11,.10),\n            transparent 22%\n        ),\n\n        linear-gradient(\n            180deg,\n            #f4fff8 0%,\n            #ffffff 43%,\n            #f9fffb 100%\n        );\n\n}\n\n\n#lppm-iptar *,\n#lppm-iptar *::before,\n#lppm-iptar *::after {\n\n    box-sizing: border-box;\n\n}\n\n\n\n\/* =========================================================\n   CONTAINER\n========================================================= *\/\n\n.lppm-container {\n\n    width: 100%;\n\n    max-width: 1500px;\n\n    margin: 0 auto;\n\n    padding-left:\n        clamp(20px,5vw,75px);\n\n    padding-right:\n        clamp(20px,5vw,75px);\n\n    position: relative;\n\n    z-index: 5;\n\n}\n\n\n\n\/* =========================================================\n   BACKGROUND\n========================================================= *\/\n\n.lppm-bg-circle {\n\n    position: absolute;\n\n    border-radius: 50%;\n\n    pointer-events: none;\n\n}\n\n\n.lppm-circle-one {\n\n    width: 380px;\n    height: 380px;\n\n    top: -190px;\n    right: -170px;\n\n    border:\n        78px solid\n        rgba(7,148,71,.04);\n\n}\n\n\n.lppm-circle-two {\n\n    width: 290px;\n    height: 290px;\n\n    bottom: 120px;\n    left: -150px;\n\n    border:\n        60px solid\n        rgba(245,158,11,.05);\n\n}\n\n\n.lppm-bg-dots {\n\n    position: absolute;\n\n    top: 330px;\n    left: 2.5%;\n\n    width: 140px;\n    height: 140px;\n\n    opacity: .12;\n\n    background-image:\n        radial-gradient(\n            #079447 2px,\n            transparent 2px\n        );\n\n    background-size:\n        16px 16px;\n\n}\n\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.lppm-header {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        275px\n        minmax(0,1fr);\n\n    align-items: center;\n\n    gap:\n        clamp(\n            38px,\n            5vw,\n            75px\n        );\n\n    padding:\n        46px\n        clamp(35px,5vw,70px);\n\n    margin-bottom:\n        70px;\n\n    overflow: hidden;\n\n    border-radius:\n        30px;\n\n    border:\n        1px solid\n        rgba(7,148,71,.11);\n\n    background:\n\n        linear-gradient(\n            130deg,\n            rgba(255,255,255,.98) 0%,\n            rgba(239,252,245,.96) 100%\n        );\n\n    box-shadow:\n        0 20px 60px\n        rgba(25,78,50,.08);\n\n}\n\n\n\/* ORNAMEN HEADER *\/\n\n.lppm-header::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    width: 280px;\n    height: 280px;\n\n    border-radius: 50%;\n\n    right: -100px;\n    top: -150px;\n\n    background:\n        rgba(250,204,21,.11);\n\n}\n\n\n.lppm-header::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    width: 190px;\n    height: 190px;\n\n    border-radius: 50%;\n\n    right: 20%;\n\n    bottom: -135px;\n\n    border:\n        40px solid\n        rgba(7,148,71,.04);\n\n}\n\n\n\n\/* =========================================================\n   PROFILE\n========================================================= *\/\n\n.lppm-profile {\n\n    position: relative;\n\n    z-index: 3;\n\n    text-align: center;\n\n}\n\n\n.lppm-photo-wrap {\n\n    position: relative;\n\n    width: 235px;\n\n    margin: 0 auto;\n\n}\n\n\n.lppm-photo-decoration {\n\n    position: absolute;\n\n    left: -13px;\n    top: 28px;\n\n    width: 200px;\n    height: 205px;\n\n    border-radius: 36px;\n\n    transform:\n        rotate(-7deg);\n\n    background:\n\n        linear-gradient(\n            135deg,\n            #facc15,\n            #f59e0b\n        );\n\n    opacity: .85;\n\n}\n\n\n\n\/* FOTO BESAR *\/\n\n.lppm-photo {\n\n    position: relative;\n\n    z-index: 2;\n\n    width: 215px;\n    height: 255px;\n\n    margin-left: 10px;\n\n    overflow: hidden;\n\n    border-radius:\n        32px;\n\n    border:\n        6px solid #ffffff;\n\n    background:\n        #dff4e7;\n\n    box-shadow:\n        0 20px 45px\n        rgba(26,74,49,.18);\n\n}\n\n\n.lppm-photo img {\n\n    position: relative;\n\n    z-index: 2;\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n\n    object-position:\n        center top;\n\n}\n\n\n.lppm-photo-fallback {\n\n    position: absolute;\n\n    inset: 0;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    background:\n\n        linear-gradient(\n            135deg,\n            #079447,\n            #04783c\n        );\n\n    color: #ffffff;\n\n    font-size: 24px;\n\n    font-weight: 900;\n\n    letter-spacing: 1px;\n\n}\n\n\n\n\/* BADGE *\/\n\n.lppm-chair-badge {\n\n    position: relative;\n\n    z-index: 4;\n\n    width: max-content;\n\n    max-width: 90%;\n\n    margin:\n        -17px auto 0;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    gap: 6px;\n\n    padding:\n        9px 17px;\n\n    border-radius:\n        100px;\n\n    color: #ffffff;\n\n    background:\n\n        linear-gradient(\n            135deg,\n            #079447,\n            #04783c\n        );\n\n    box-shadow:\n        0 8px 20px\n        rgba(7,148,71,.25);\n\n    font-size:\n        10.5px;\n\n    font-weight:\n        750;\n\n}\n\n\n.lppm-chair-name {\n\n    margin-top: 18px;\n\n}\n\n\n.lppm-chair-name span {\n\n    display: block;\n\n    margin-bottom: 2px;\n\n    color:\n        #89968f;\n\n    font-size: 9px;\n\n    font-weight: 750;\n\n    text-transform:\n        uppercase;\n\n    letter-spacing:\n        1px;\n\n}\n\n\n.lppm-chair-name h3 {\n\n    margin: 0;\n\n    color:\n        #183d2e;\n\n    font-size:\n        16px;\n\n    line-height:\n        1.4;\n\n    font-weight:\n        800;\n\n}\n\n\n\n\/* =========================================================\n   INFO\n========================================================= *\/\n\n.lppm-info {\n\n    position: relative;\n\n    z-index: 3;\n\n}\n\n\n\n\/* LABEL *\/\n\n.lppm-label {\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 7px;\n\n    padding:\n        7px 13px;\n\n    margin-bottom:\n        12px;\n\n    border-radius:\n        100px;\n\n    color:\n        var(--lppm-green);\n\n    background:\n        var(--lppm-green-light);\n\n    font-size:\n        9.5px;\n\n    font-weight:\n        850;\n\n    letter-spacing:\n        1.3px;\n\n}\n\n\n.lppm-label-icon {\n\n    width: 25px;\n    height: 25px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    background:\n        #ffffff;\n\n}\n\n\n.lppm-kicker {\n\n    margin-bottom:\n        5px;\n\n    color:\n        var(--lppm-orange);\n\n    font-size:\n        10px;\n\n    font-weight:\n        850;\n\n    text-transform:\n        uppercase;\n\n    letter-spacing:\n        1px;\n\n}\n\n\n\n\/* LPPM TITLE *\/\n\n.lppm-info h1 {\n\n    margin:\n        0 0 7px;\n\n    color:\n        var(--lppm-green);\n\n    font-size:\n        clamp(\n            40px,\n            5vw,\n            62px\n        );\n\n    line-height:\n        1;\n\n    letter-spacing:\n        -2px;\n\n    font-weight:\n        900;\n\n}\n\n\n.lppm-info h1 small {\n\n    color:\n        var(--lppm-orange);\n\n    font-size:\n        .48em;\n\n    letter-spacing:\n        -.5px;\n\n}\n\n\n\n\/* NAMA LEMBAGA *\/\n\n.lppm-info > h2 {\n\n    max-width:\n        850px;\n\n    margin:\n        0 0 13px;\n\n    color:\n        #183c2e;\n\n    font-size:\n        clamp(\n            20px,\n            2vw,\n            28px\n        );\n\n    line-height:\n        1.35;\n\n    font-weight:\n        780;\n\n}\n\n\n\n\/* LINE *\/\n\n.lppm-title-line {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 6px;\n\n    margin-bottom:\n        18px;\n\n}\n\n\n.lppm-title-line span {\n\n    display: block;\n\n    width: 29px;\n    height: 3px;\n\n    border-radius: 10px;\n\n    background:\n        var(--lppm-green);\n\n}\n\n\n.lppm-title-line i {\n\n    display: block;\n\n    width: 7px;\n    height: 7px;\n\n    border-radius: 50%;\n\n    background:\n        var(--lppm-yellow);\n\n}\n\n\n\n\/* DESCRIPTION *\/\n\n.lppm-description {\n\n    max-width:\n        900px;\n\n    color:\n        var(--lppm-muted);\n\n    font-size:\n        14px;\n\n    line-height:\n        1.85;\n\n}\n\n\n.lppm-description strong {\n\n    color:\n        var(--lppm-green-dark);\n\n}\n\n\n\n\/* =========================================================\n   PILLARS\n========================================================= *\/\n\n.lppm-pillars {\n\n    display: flex;\n\n    align-items: center;\n\n    flex-wrap: wrap;\n\n    gap: 10px;\n\n    margin-top:\n        23px;\n\n}\n\n\n.lppm-pillar {\n\n    min-width:\n        155px;\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 9px;\n\n    padding:\n        9px 12px;\n\n    border-radius:\n        13px;\n\n    border:\n        1px solid\n        rgba(7,148,71,.08);\n\n    background:\n        rgba(255,255,255,.8);\n\n}\n\n\n.lppm-pillar-icon {\n\n    width: 34px;\n    height: 34px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    flex-shrink: 0;\n\n    border-radius:\n        10px;\n\n    color:\n        var(--lppm-green);\n\n    background:\n        var(--lppm-green-light);\n\n}\n\n\n.lppm-pillar-icon.yellow {\n\n    color:\n        #a77800;\n\n    background:\n        var(--lppm-yellow-light);\n\n}\n\n\n.lppm-pillar-icon.orange {\n\n    color:\n        #c76800;\n\n    background:\n        var(--lppm-orange-light);\n\n}\n\n\n.lppm-pillar strong {\n\n    display: block;\n\n    color:\n        #29483b;\n\n    font-size:\n        10px;\n\n    font-weight:\n        800;\n\n}\n\n\n.lppm-pillar div > span {\n\n    display: block;\n\n    color:\n        #89968f;\n\n    font-size:\n        8.5px;\n\n}\n\n\n\n\/* =========================================================\n   DOCUMENT SECTION\n========================================================= *\/\n\n.lppm-documents {\n\n    width: 100%;\n\n}\n\n\n\n\/* HEADER *\/\n\n.lppm-document-header {\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    gap: 25px;\n\n    margin-bottom:\n        25px;\n\n    padding-bottom:\n        18px;\n\n    border-bottom:\n        1px solid\n        var(--lppm-border);\n\n}\n\n\n.lppm-document-header-left {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 14px;\n\n}\n\n\n.lppm-document-icon {\n\n    width: 50px;\n    height: 50px;\n\n    flex-shrink: 0;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius:\n        15px;\n\n    color:\n        #ffffff;\n\n    background:\n\n        linear-gradient(\n            135deg,\n            #079447,\n            #04783c\n        );\n\n    box-shadow:\n        0 8px 20px\n        rgba(7,148,71,.20);\n\n}\n\n\n.lppm-document-small {\n\n    display: block;\n\n    margin-bottom:\n        2px;\n\n    color:\n        #8b9891;\n\n    font-size:\n        9px;\n\n    font-weight:\n        800;\n\n    letter-spacing:\n        1.3px;\n\n}\n\n\n.lppm-document-header h2 {\n\n    margin:\n        0 0 3px;\n\n    color:\n        #173a2c;\n\n    font-size:\n        25px;\n\n    line-height:\n        1.3;\n\n    font-weight:\n        820;\n\n}\n\n\n.lppm-document-header p {\n\n    margin: 0;\n\n    color:\n        var(--lppm-muted);\n\n    font-size:\n        12px;\n\n}\n\n\n\n\/* COUNT *\/\n\n.lppm-count {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 7px;\n\n    flex-shrink: 0;\n\n    padding:\n        7px 13px;\n\n    border-radius:\n        100px;\n\n    border:\n        1px solid\n        var(--lppm-border);\n\n    background:\n        #ffffff;\n\n    color:\n        #728178;\n\n    font-size:\n        11px;\n\n    font-weight:\n        700;\n\n}\n\n\n.lppm-count strong {\n\n    width: 28px;\n    height: 28px;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    border-radius:\n        50%;\n\n    background:\n        var(--lppm-yellow);\n\n    color:\n        #725500;\n\n    font-size:\n        13px;\n\n    font-weight:\n        900;\n\n}\n\n\n\n\/* =========================================================\n   SEARCH\n========================================================= *\/\n\n.lppm-toolbar {\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 9px;\n\n    margin-bottom:\n        27px;\n\n}\n\n\n.lppm-search {\n\n    width: 100%;\n\n    max-width:\n        480px;\n\n    height:\n        46px;\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 9px;\n\n    padding:\n        0 15px;\n\n    border:\n        1px solid\n        var(--lppm-border);\n\n    border-radius:\n        13px;\n\n    color:\n        #899890;\n\n    background:\n        #ffffff;\n\n    transition:\n        .25s ease;\n\n}\n\n\n.lppm-search:focus-within {\n\n    border-color:\n        rgba(7,148,71,.45);\n\n    box-shadow:\n        0 0 0 4px\n        rgba(7,148,71,.07);\n\n}\n\n\n.lppm-search input {\n\n    width: 100%;\n    height: 100%;\n\n    padding: 0 !important;\n\n    border:\n        none !important;\n\n    outline:\n        none !important;\n\n    box-shadow:\n        none !important;\n\n    background:\n        transparent !important;\n\n    color:\n        #334b40;\n\n    font-family:\n        inherit;\n\n    font-size:\n        12.5px;\n\n}\n\n\n.lppm-search input::placeholder {\n\n    color:\n        #99a69f;\n\n}\n\n\n\n\/* RESET *\/\n\n.lppm-reset {\n\n    height:\n        46px;\n\n    padding:\n        0 18px;\n\n    border:\n        1px solid\n        #e2ebe6;\n\n    border-radius:\n        13px;\n\n    background:\n        #ffffff;\n\n    color:\n        #66766e;\n\n    cursor:\n        pointer;\n\n    font-family:\n        inherit;\n\n    font-size:\n        11.5px;\n\n    font-weight:\n        750;\n\n    transition:\n        .25s ease;\n\n}\n\n\n.lppm-reset:hover {\n\n    border-color:\n        var(--lppm-orange);\n\n    background:\n        var(--lppm-orange);\n\n    color:\n        #ffffff;\n\n}\n\n\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n.lppm-grid {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(4,minmax(0,1fr));\n\n    gap:\n        20px;\n\n}\n\n\n\n\/* =========================================================\n   CARD\n========================================================= *\/\n\n.lppm-card {\n\n    position: relative;\n\n    display: flex;\n\n    flex-direction: column;\n\n    overflow: hidden;\n\n    border:\n        1px solid\n        #e5eee8;\n\n    border-radius:\n        20px;\n\n    background:\n        #ffffff;\n\n    box-shadow:\n        0 9px 30px\n        rgba(25,75,48,.055);\n\n    transition:\n        transform .35s ease,\n        box-shadow .35s ease,\n        border-color .35s ease;\n\n}\n\n\n.lppm-card::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n    left: 0;\n\n    z-index: 8;\n\n    width: 100%;\n    height: 4px;\n\n    opacity: 0;\n\n    background:\n\n        linear-gradient(\n            90deg,\n            #079447,\n            #acd33c,\n            #facc15,\n            #f59e0b\n        );\n\n    transition:\n        opacity .3s ease;\n\n}\n\n\n.lppm-card:hover {\n\n    transform:\n        translateY(-7px);\n\n    border-color:\n        rgba(7,148,71,.22);\n\n    box-shadow:\n        0 20px 45px\n        rgba(24,78,50,.11);\n\n}\n\n\n.lppm-card:hover::before {\n\n    opacity: 1;\n\n}\n\n\n\n\/* =========================================================\n   COVER\n========================================================= *\/\n\n.lppm-cover {\n\n    position: relative;\n\n    width: 100%;\n\n    aspect-ratio:\n        4 \/ 3;\n\n    overflow: hidden;\n\n    background:\n\n        linear-gradient(\n            135deg,\n            #e6f7ec,\n            #fff8cb\n        );\n\n}\n\n\n.lppm-cover img {\n\n    position: relative;\n\n    z-index: 2;\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n\n    transition:\n        transform .5s ease;\n\n}\n\n\n.lppm-card:hover\n.lppm-cover img {\n\n    transform:\n        scale(1.055);\n\n}\n\n\n\n\/* FALLBACK *\/\n\n.lppm-cover-fallback {\n\n    position: absolute;\n\n    inset: 0;\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 5px;\n\n    color:\n        var(--lppm-green);\n\n    text-align:\n        center;\n\n}\n\n\n.lppm-cover-fallback strong {\n\n    font-size:\n        22px;\n\n    font-weight:\n        900;\n\n}\n\n\n.lppm-cover-fallback span {\n\n    font-size:\n        9px;\n\n    font-weight:\n        700;\n\n    letter-spacing:\n        1px;\n\n}\n\n\n\n\/* BADGE *\/\n\n.lppm-badge {\n\n    position: absolute;\n\n    top: 11px;\n    left: 11px;\n\n    z-index: 5;\n\n    padding:\n        5px 9px;\n\n    border-radius:\n        100px;\n\n    background:\n        rgba(255,255,255,.92);\n\n    backdrop-filter:\n        blur(8px);\n\n    color:\n        var(--lppm-green);\n\n    font-size:\n        8px;\n\n    font-weight:\n        850;\n\n    text-transform:\n        uppercase;\n\n    letter-spacing:\n        .6px;\n\n    box-shadow:\n        0 5px 15px\n        rgba(0,0,0,.05);\n\n}\n\n\n\n\/* =========================================================\n   CARD BODY\n========================================================= *\/\n\n.lppm-card-body {\n\n    flex:\n        1;\n\n    display:\n        flex;\n\n    flex-direction:\n        column;\n\n    padding:\n        18px 18px 19px;\n\n}\n\n\n.lppm-card-category {\n\n    align-self:\n        flex-start;\n\n    margin-bottom:\n        8px;\n\n    padding:\n        4px 8px;\n\n    border-radius:\n        100px;\n\n    color:\n        #057841;\n\n    background:\n        #e6f8ed;\n\n    font-size:\n        7.5px;\n\n    font-weight:\n        850;\n\n    text-transform:\n        uppercase;\n\n    letter-spacing:\n        .7px;\n\n}\n\n\n.lppm-card-body h3 {\n\n    min-height:\n        44px;\n\n    margin:\n        0 0 10px;\n\n    color:\n        #183a2d;\n\n    font-size:\n        14px;\n\n    line-height:\n        1.45;\n\n    font-weight:\n        780;\n\n    display:\n        -webkit-box;\n\n    -webkit-line-clamp:\n        2;\n\n    -webkit-box-orient:\n        vertical;\n\n    overflow:\n        hidden;\n\n}\n\n\n\n\/* META *\/\n\n.lppm-card-meta {\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    gap:\n        7px;\n\n    margin-bottom:\n        15px;\n\n    color:\n        #87958d;\n\n    font-size:\n        9px;\n\n}\n\n\n.lppm-card-meta i {\n\n    width:\n        4px;\n\n    height:\n        4px;\n\n    display:\n        block;\n\n    border-radius:\n        50%;\n\n    background:\n        #ccd7d1;\n\n}\n\n\n\n\/* =========================================================\n   BUTTON\n========================================================= *\/\n\n.lppm-actions {\n\n    display:\n        grid;\n\n    grid-template-columns:\n        1fr 1fr;\n\n    gap:\n        7px;\n\n    margin-top:\n        auto;\n\n}\n\n\n.lppm-btn {\n\n    min-height:\n        38px;\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    gap:\n        5px;\n\n    border-radius:\n        10px;\n\n    text-decoration:\n        none !important;\n\n    font-size:\n        9.5px;\n\n    font-weight:\n        750;\n\n    transition:\n        .25s ease;\n\n}\n\n\n\n\/* LIHAT *\/\n\n.lppm-view {\n\n    border:\n        1px solid\n        #dcebe2;\n\n    background:\n        #effaf3;\n\n    color:\n        var(--lppm-green) !important;\n\n}\n\n\n.lppm-view:hover {\n\n    border-color:\n        var(--lppm-green);\n\n    background:\n        var(--lppm-green);\n\n    color:\n        #ffffff !important;\n\n}\n\n\n\n\/* DOWNLOAD *\/\n\n.lppm-download {\n\n    border:\n        1px solid\n        transparent;\n\n    background:\n\n        linear-gradient(\n            135deg,\n            #079447,\n            #05763d\n        );\n\n    color:\n        #ffffff !important;\n\n    box-shadow:\n        0 6px 15px\n        rgba(7,148,71,.14);\n\n}\n\n\n.lppm-download:hover {\n\n    background:\n\n        linear-gradient(\n            135deg,\n            #f5a10b,\n            #ec800d\n        );\n\n    color:\n        #ffffff !important;\n\n    transform:\n        translateY(-2px);\n\n}\n\n\n\n\/* =========================================================\n   EMPTY\n========================================================= *\/\n\n.lppm-empty {\n\n    display: none;\n\n    padding:\n        65px 20px;\n\n    text-align:\n        center;\n\n    border:\n        1px dashed\n        #d7e7dd;\n\n    border-radius:\n        22px;\n\n    background:\n        rgba(255,255,255,.7);\n\n}\n\n\n.lppm-empty-icon {\n\n    width:\n        64px;\n\n    height:\n        64px;\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    margin:\n        0 auto 13px;\n\n    border-radius:\n        50%;\n\n    color:\n        var(--lppm-green);\n\n    background:\n        var(--lppm-green-light);\n\n}\n\n\n.lppm-empty h3 {\n\n    margin:\n        0 0 6px;\n\n    color:\n        #29483a;\n\n    font-size:\n        17px;\n\n}\n\n\n.lppm-empty p {\n\n    margin:\n        0;\n\n    color:\n        var(--lppm-muted);\n\n    font-size:\n        12px;\n\n}\n\n\n\n\/* =========================================================\n   LAPTOP\n========================================================= *\/\n\n@media(max-width:1200px) {\n\n    .lppm-grid {\n\n        grid-template-columns:\n            repeat(3,minmax(0,1fr));\n\n    }\n\n}\n\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:850px) {\n\n    .lppm-header {\n\n        grid-template-columns:\n            220px minmax(0,1fr);\n\n        gap:\n            30px;\n\n        padding:\n            35px 28px;\n\n    }\n\n\n    .lppm-photo-wrap {\n\n        width:\n            195px;\n\n    }\n\n\n    .lppm-photo {\n\n        width:\n            180px;\n\n        height:\n            220px;\n\n    }\n\n\n    .lppm-photo-decoration {\n\n        width:\n            168px;\n\n        height:\n            180px;\n\n    }\n\n\n    .lppm-info h1 {\n\n        font-size:\n            42px;\n\n    }\n\n\n    .lppm-pillars {\n\n        display:\n            grid;\n\n        grid-template-columns:\n            repeat(2,1fr);\n\n    }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:650px) {\n\n    #lppm-iptar {\n\n        padding:\n            42px 0 60px;\n\n    }\n\n\n    .lppm-container {\n\n        padding-left:\n            15px;\n\n        padding-right:\n            15px;\n\n    }\n\n\n    .lppm-header {\n\n        grid-template-columns:\n            1fr;\n\n        gap:\n            30px;\n\n        padding:\n            30px 19px;\n\n        margin-bottom:\n            52px;\n\n        border-radius:\n            23px;\n\n        text-align:\n            center;\n\n    }\n\n\n    \/* FOTO TETAP BESAR *\/\n\n    .lppm-photo-wrap {\n\n        width:\n            205px;\n\n    }\n\n\n    .lppm-photo {\n\n        width:\n            185px;\n\n        height:\n            225px;\n\n    }\n\n\n    .lppm-photo-decoration {\n\n        width:\n            175px;\n\n        height:\n            180px;\n\n    }\n\n\n    .lppm-label {\n\n        margin-left:\n            auto;\n\n        margin-right:\n            auto;\n\n    }\n\n\n    .lppm-title-line {\n\n        justify-content:\n            center;\n\n    }\n\n\n    .lppm-description {\n\n        font-size:\n            13px;\n\n        line-height:\n            1.75;\n\n    }\n\n\n    .lppm-pillars {\n\n        grid-template-columns:\n            1fr 1fr;\n\n        text-align:\n            left;\n\n    }\n\n\n    \/* DOCUMENT HEADER *\/\n\n    .lppm-document-header {\n\n        align-items:\n            flex-start;\n\n    }\n\n\n    .lppm-document-header h2 {\n\n        font-size:\n            20px;\n\n    }\n\n\n    .lppm-document-header p {\n\n        font-size:\n            11px;\n\n    }\n\n\n    .lppm-count {\n\n        display:\n            none;\n\n    }\n\n\n    \/* TOOLBAR *\/\n\n    .lppm-search {\n\n        max-width:\n            none;\n\n    }\n\n\n    \/* 2 KOLOM HP *\/\n\n    .lppm-grid {\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        gap:\n            10px;\n\n    }\n\n\n    .lppm-card {\n\n        border-radius:\n            15px;\n\n    }\n\n\n    .lppm-card-body {\n\n        padding:\n            13px 11px 13px;\n\n    }\n\n\n    .lppm-card-body h3 {\n\n        min-height:\n            38px;\n\n        font-size:\n            11.5px;\n\n    }\n\n\n    .lppm-card-category {\n\n        font-size:\n            6.8px;\n\n    }\n\n\n    .lppm-btn {\n\n        min-height:\n            34px;\n\n        font-size:\n            8px;\n\n    }\n\n}\n\n\n\n\/* =========================================================\n   HP KECIL\n========================================================= *\/\n\n@media(max-width:390px) {\n\n    .lppm-grid {\n\n        grid-template-columns:\n            1fr;\n\n        gap:\n            15px;\n\n    }\n\n\n    .lppm-card-body h3 {\n\n        min-height:\n            auto;\n\n        font-size:\n            14px;\n\n    }\n\n\n    .lppm-btn {\n\n        font-size:\n            10px;\n\n    }\n\n}\n\n\n\n\/* =========================================================\n   ELEMENTOR OVERRIDE\n========================================================= *\/\n\n#lppm-iptar a {\n\n    box-shadow:\n        none;\n\n}\n\n\n#lppm-iptar button {\n\n    font-family:\n        inherit;\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function () {\n\n    \"use strict\";\n\n\n    \/* =====================================================\n       ROOT\n    ====================================================== *\/\n\n    const root =\n        document.getElementById(\n            \"lppm-iptar\"\n        );\n\n\n    if (!root) return;\n\n\n\n    \/* =====================================================\n       ELEMENT\n    ====================================================== *\/\n\n    const foto =\n        root.querySelector(\n            \"#lppmFoto\"\n        );\n\n\n    const fallbackFoto =\n        root.querySelector(\n            \".lppm-photo-fallback\"\n        );\n\n\n    const ketua =\n        root.querySelector(\n            \"#lppmKetua\"\n        );\n\n\n    const jabatan =\n        root.querySelector(\n            \"#lppmJabatan\"\n        );\n\n\n    const singkatan =\n        root.querySelector(\n            \"#lppmSingkatan\"\n        );\n\n\n    const namaLembaga =\n        root.querySelector(\n            \"#lppmNamaLembaga\"\n        );\n\n\n    const deskripsi =\n        root.querySelector(\n            \"#lppmDeskripsi\"\n        );\n\n\n    const grid =\n        root.querySelector(\n            \"#lppmGrid\"\n        );\n\n\n    const jumlah =\n        root.querySelector(\n            \"#jumlahLppm\"\n        );\n\n\n    const search =\n        root.querySelector(\n            \"#lppmSearch\"\n        );\n\n\n    const reset =\n        root.querySelector(\n            \"#resetSearch\"\n        );\n\n\n    const empty =\n        root.querySelector(\n            \"#lppmEmpty\"\n        );\n\n\n\n    \/* =====================================================\n       DATA\n    ====================================================== *\/\n\n    const data =\n        DATA_LPPM;\n\n\n\n    \/* =====================================================\n       PROFIL\n    ====================================================== *\/\n\n    foto.src =\n        data.foto;\n\n\n    ketua.textContent =\n        data.ketua;\n\n\n    jabatan.textContent =\n        data.jabatan;\n\n\n    singkatan.textContent =\n        data.singkatan;\n\n\n    namaLembaga.textContent =\n        data.nama;\n\n\n    deskripsi.innerHTML =\n        data.deskripsi;\n\n\n\n    \/* =====================================================\n       FOTO ERROR\n    ====================================================== *\/\n\n    foto.addEventListener(\n\n        \"load\",\n\n        function () {\n\n            fallbackFoto.style.display =\n                \"none\";\n\n        }\n\n    );\n\n\n    foto.addEventListener(\n\n        \"error\",\n\n        function () {\n\n            foto.style.display =\n                \"none\";\n\n\n            fallbackFoto.style.display =\n                \"flex\";\n\n        }\n\n    );\n\n\n\n    \/* =====================================================\n       GOOGLE DRIVE\n    ====================================================== *\/\n\n    function getDrivePreview(\n        fileId\n    ) {\n\n        return (\n            \"https:\/\/drive.google.com\/file\/d\/\" +\n            fileId +\n            \"\/view\"\n        );\n\n    }\n\n\n\n    function getDriveDownload(\n        fileId\n    ) {\n\n        return (\n            \"https:\/\/drive.google.com\/uc?export=download&id=\" +\n            fileId\n        );\n\n    }\n\n\n\n    \/* =====================================================\n       ESCAPE HTML\n    ====================================================== *\/\n\n    function escapeHTML(value) {\n\n        return String(\n            value || \"\"\n        )\n\n        .replace(\n            \/&\/g,\n            \"&amp;\"\n        )\n\n        .replace(\n            \/<\/g,\n            \"&lt;\"\n        )\n\n        .replace(\n            \/>\/g,\n            \"&gt;\"\n        )\n\n        .replace(\n            \/\"\/g,\n            \"&quot;\"\n        )\n\n        .replace(\n            \/'\/g,\n            \"&#039;\"\n        );\n\n    }\n\n\n\n    \/* =====================================================\n       RENDER DOCUMENTS\n    ====================================================== *\/\n\n    function renderDocuments(\n        list\n    ) {\n\n        grid.innerHTML =\n            \"\";\n\n\n        jumlah.textContent =\n            list.length;\n\n\n\n        if (\n            list.length === 0\n        ) {\n\n            empty.style.display =\n                \"block\";\n\n            return;\n\n        }\n\n\n        empty.style.display =\n            \"none\";\n\n\n\n        list.forEach(\n\n            function (doc) {\n\n\n                const preview =\n                    getDrivePreview(\n                        doc.fileId\n                    );\n\n\n                const download =\n                    getDriveDownload(\n                        doc.fileId\n                    );\n\n\n                const card =\n                    document.createElement(\n                        \"article\"\n                    );\n\n\n                card.className =\n                    \"lppm-card\";\n\n\n                card.innerHTML = `\n\n                    <!-- COVER -->\n\n                    <div class=\"lppm-cover\">\n\n                        <div class=\"lppm-cover-fallback\">\n\n                            <strong>\n                                LPPM\n                            <\/strong>\n\n                            <span>\n                                DOKUMEN IPTAR\n                            <\/span>\n\n                        <\/div>\n\n\n                        <img\n                            src=\"${escapeHTML(doc.cover)}\"\n                            alt=\"${escapeHTML(doc.nama)}\"\n                            loading=\"lazy\"\n                            decoding=\"async\"\n                        >\n\n\n                        <span class=\"lppm-badge\">\n                            LPPM IPTAR\n                        <\/span>\n\n                    <\/div>\n\n\n                    <!-- BODY -->\n\n                    <div class=\"lppm-card-body\">\n\n\n                        <span class=\"lppm-card-category\">\n\n                            ${escapeHTML(\n                                doc.kategori ||\n                                \"Dokumen\"\n                            )}\n\n                        <\/span>\n\n\n                        <h3>\n\n                            ${escapeHTML(\n                                doc.nama\n                            )}\n\n                        <\/h3>\n\n\n                        <div class=\"lppm-card-meta\">\n\n                            <span>\n\n                                ${escapeHTML(\n                                    doc.tahun ||\n                                    \"IPTAR\"\n                                )}\n\n                            <\/span>\n\n\n                            <i><\/i>\n\n\n                            <span>\n                                Dokumen\n                            <\/span>\n\n                        <\/div>\n\n\n                        <div class=\"lppm-actions\">\n\n\n                            <!-- LIHAT -->\n\n                            <a\n                                href=\"${preview}\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                class=\"lppm-btn lppm-view\">\n\n                                <svg\n                                    width=\"14\"\n                                    height=\"14\"\n                                    viewBox=\"0 0 24 24\"\n                                    fill=\"none\"\n                                    stroke=\"currentColor\"\n                                    stroke-width=\"2\">\n\n                                    <path d=\"M1 12s4-8 11-8\n                                             11 8 11 8\n                                             -4 8-11 8\n                                             S1 12 1 12z\">\n                                    <\/path>\n\n                                    <circle\n                                        cx=\"12\"\n                                        cy=\"12\"\n                                        r=\"3\">\n                                    <\/circle>\n\n                                <\/svg>\n\n                                Lihat\n\n                            <\/a>\n\n\n\n                            <!-- DOWNLOAD -->\n\n                            <a\n                                href=\"${download}\"\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                class=\"lppm-btn lppm-download\">\n\n                                <svg\n                                    width=\"14\"\n                                    height=\"14\"\n                                    viewBox=\"0 0 24 24\"\n                                    fill=\"none\"\n                                    stroke=\"currentColor\"\n                                    stroke-width=\"2\">\n\n                                    <path d=\"M21 15v4\n                                             a2 2 0 0 1-2 2H5\n                                             a2 2 0 0 1-2-2v-4\">\n                                    <\/path>\n\n                                    <polyline\n                                        points=\"7 10 12 15 17 10\">\n                                    <\/polyline>\n\n                                    <line\n                                        x1=\"12\"\n                                        y1=\"15\"\n                                        x2=\"12\"\n                                        y2=\"3\">\n                                    <\/line>\n\n                                <\/svg>\n\n                                Download\n\n                            <\/a>\n\n                        <\/div>\n\n                    <\/div>\n\n                `;\n\n\n                \/* COVER ERROR *\/\n\n                const image =\n                    card.querySelector(\n                        \".lppm-cover img\"\n                    );\n\n\n                image.addEventListener(\n\n                    \"error\",\n\n                    function () {\n\n                        image.style.display =\n                            \"none\";\n\n                    }\n\n                );\n\n\n                grid.appendChild(\n                    card\n                );\n\n            }\n\n        );\n\n    }\n\n\n\n    \/* =====================================================\n       SEARCH\n    ====================================================== *\/\n\n    search.addEventListener(\n\n        \"input\",\n\n        function () {\n\n\n            const keyword =\n                this.value\n                    .toLowerCase()\n                    .trim();\n\n\n            const filtered =\n                data.dokumen.filter(\n\n                    function (doc) {\n\n                        const searchText =\n                            (\n                                doc.nama +\n                                \" \" +\n                                (doc.kategori || \"\") +\n                                \" \" +\n                                (doc.tahun || \"\")\n                            )\n                            .toLowerCase();\n\n\n                        return searchText\n                            .includes(\n                                keyword\n                            );\n\n                    }\n\n                );\n\n\n            renderDocuments(\n                filtered\n            );\n\n        }\n\n    );\n\n\n\n    \/* =====================================================\n       RESET\n    ====================================================== *\/\n\n    reset.addEventListener(\n\n        \"click\",\n\n        function () {\n\n            search.value =\n                \"\";\n\n\n            renderDocuments(\n                data.dokumen\n            );\n\n\n            search.focus();\n\n        }\n\n    );\n\n\n\n    \/* =====================================================\n       START\n    ====================================================== *\/\n\n    renderDocuments(\n        data.dokumen\n    );\n\n\n})();\n\n<\/script>\n\n<\/section>\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>LPPM Ketua LPPM Ketua Lembaga Nama Ketua LPPM LEMBAGA IPTAR Penelitian \u2022 Inovasi \u2022 Pengabdian LPPM IPTAR Penelitian Riset &#038; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":35,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":1343,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions\/1343"}],"wp:attachment":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}