{"id":582,"date":"2025-11-26T16:24:59","date_gmt":"2025-11-26T09:24:59","guid":{"rendered":"https:\/\/iptar.ac.id\/?page_id=582"},"modified":"2026-09-08T12:13:03","modified_gmt":"2026-09-08T05:13:03","slug":"upt-perpustakaan","status":"publish","type":"page","link":"https:\/\/iptar.ac.id\/index.php\/upt-perpustakaan\/","title":{"rendered":"UPT PERPUSTAKAAN"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"582\" class=\"elementor elementor-582\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e3ebf6 e-flex e-con-boxed e-con e-parent\" data-id=\"3e3ebf6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34d33e4 elementor-widget elementor-widget-html\" data-id=\"34d33e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     UPT PERPUSTAKAAN IPTAR\n     FULL WIDTH ELEMENTOR\n     HTML + CSS + JAVASCRIPT\n========================================================= -->\n\n<section id=\"perpus-iptar\">\n\n    <div class=\"perpus-bg perpus-bg-one\"><\/div>\n    <div class=\"perpus-bg perpus-bg-two\"><\/div>\n    <div class=\"perpus-pattern\"><\/div>\n\n    <div class=\"perpus-container\">\n\n\n        <!-- =====================================================\n             DATA UPT PERPUSTAKAAN\n             CUKUP EDIT BAGIAN INI\n        ====================================================== -->\n\n        <script>\n\n        const DATA_PERPUS = {\n\n            \/* =================================================\n               IDENTITAS\n            ================================================= *\/\n\n            singkatan:\n            \"UPT PERPUSTAKAAN\",\n\n            nama:\n            \"Unit Pelaksana Teknis Perpustakaan\",\n\n            tagline:\n            \"Literacy \u2022 Knowledge \u2022 Research \u2022 Digital Library\",\n\n\n            \/* =================================================\n               PENGELOLA\n            ================================================= *\/\n\n            pengelola: {\n\n                nama:\n                \"Ananda Suci Lestari, S.S.I\",\n\n                jabatan:\n                \"Pengelola UPT Perpustakaan\",\n\n                foto:\n                \"https:\/\/iptar.ac.id\/wp-content\/uploads\/2026\/09\/IMG_4034-scaled.jpg\"\n\n            },\n\n\n            \/* =================================================\n               DESKRIPSI\n            ================================================= *\/\n\n            deskripsi: `\n\n                <strong>Unit Pelaksana Teknis Perpustakaan IPTAR<\/strong>\n                merupakan unit layanan akademik yang menyediakan\n                sumber informasi, referensi, koleksi ilmiah, serta\n                fasilitas pembelajaran untuk mendukung pelaksanaan\n                pendidikan, penelitian, dan pengabdian kepada masyarakat\n                di lingkungan Institut Pendidikan dan Teknologi\n                'Aisyiyah Riau.\n\n                <br><br>\n\n                UPT Perpustakaan mendukung peningkatan budaya literasi\n                melalui penyediaan koleksi cetak dan digital, pelayanan\n                peminjaman, layanan referensi, akses sumber ilmiah,\n                repository institusi, serta ruang belajar yang nyaman\n                bagi mahasiswa, dosen, dan sivitas akademika.\n\n            `,\n\n\n            \/* =================================================\n               INFORMASI LAYANAN\n\n               Silakan sesuaikan dengan kondisi perpustakaan.\n            ================================================= *\/\n\n            informasi: {\n\n                jam:\n                \"Silakan isi jam layanan perpustakaan\",\n\n                lokasi:\n                \"Kampus Institut Pendidikan dan Teknologi 'Aisyiyah Riau\",\n\n                keanggotaan:\n                \"Mahasiswa, Dosen dan Tenaga Kependidikan IPTAR\"\n\n            },\n\n\n            \/* =================================================\n               LAYANAN PERPUSTAKAAN\n            ================================================= *\/\n\n            layanan: [\n\n                {\n                    icon:\n                    \"circulation\",\n\n                    kategori:\n                    \"Sirkulasi\",\n\n                    nama:\n                    \"Peminjaman & Pengembalian\",\n\n                    deskripsi:\n                    \"Layanan peminjaman, pengembalian dan perpanjangan koleksi perpustakaan bagi anggota.\"\n                },\n\n                {\n                    icon:\n                    \"reference\",\n\n                    kategori:\n                    \"Referensi\",\n\n                    nama:\n                    \"Layanan Referensi\",\n\n                    deskripsi:\n                    \"Membantu pengguna memperoleh buku, referensi dan sumber informasi yang sesuai dengan kebutuhan akademik.\"\n                },\n\n                {\n                    icon:\n                    \"digital\",\n\n                    kategori:\n                    \"Digital\",\n\n                    nama:\n                    \"Perpustakaan Digital\",\n\n                    deskripsi:\n                    \"Akses terhadap koleksi digital, e-book, jurnal elektronik dan sumber pembelajaran berbasis digital.\"\n                },\n\n                {\n                    icon:\n                    \"repository\",\n\n                    kategori:\n                    \"Karya Ilmiah\",\n\n                    nama:\n                    \"Repository Institusi\",\n\n                    deskripsi:\n                    \"Penyimpanan dan akses karya ilmiah, laporan penelitian serta dokumen akademik institusi.\"\n                },\n\n                {\n                    icon:\n                    \"literacy\",\n\n                    kategori:\n                    \"Literasi\",\n\n                    nama:\n                    \"Literasi Informasi\",\n\n                    deskripsi:\n                    \"Mendukung kemampuan sivitas akademika dalam mencari, menilai dan menggunakan informasi secara tepat.\"\n                },\n\n                {\n                    icon:\n                    \"reading\",\n\n                    kategori:\n                    \"Fasilitas\",\n\n                    nama:\n                    \"Ruang Baca & Belajar\",\n\n                    deskripsi:\n                    \"Fasilitas ruang baca dan belajar untuk mendukung kegiatan akademik secara nyaman dan kondusif.\"\n                }\n\n            ],\n\n\n            \/* =================================================\n               KOLEKSI & FASILITAS\n            ================================================= *\/\n\n            koleksi: [\n\n                {\n                    icon: \"book\",\n                    nama: \"Buku Teks\",\n                    deskripsi:\n                    \"Koleksi buku yang mendukung mata kuliah dan bidang keilmuan program studi.\"\n                },\n\n                {\n                    icon: \"journal\",\n                    nama: \"Jurnal & Referensi\",\n                    deskripsi:\n                    \"Jurnal, prosiding, buku referensi dan sumber ilmiah pendukung penelitian.\"\n                },\n\n                {\n                    icon: \"research\",\n                    nama: \"Karya Ilmiah\",\n                    deskripsi:\n                    \"Koleksi penelitian, laporan akademik dan karya ilmiah sivitas akademika.\"\n                },\n\n                {\n                    icon: \"ebook\",\n                    nama: \"Koleksi Digital\",\n                    deskripsi:\n                    \"E-book, dokumen elektronik dan sumber belajar digital.\"\n                }\n\n            ],\n\n\n            \/* =================================================\n               AKSES DIGITAL\n\n               Ganti URL sesuai layanan asli.\n            ================================================= *\/\n\n            akses: [\n\n                {\n                    icon:\n                    \"search\",\n\n                    nama:\n                    \"OPAC\",\n\n                    keterangan:\n                    \"Pencarian koleksi perpustakaan\",\n\n                    url:\n                    \"#\"\n                },\n\n                {\n                    icon:\n                    \"repository\",\n\n                    nama:\n                    \"Repository IPTAR\",\n\n                    keterangan:\n                    \"Karya ilmiah dan dokumen akademik\",\n\n                    url:\n                    \"#\"\n                },\n\n                {\n                    icon:\n                    \"journal\",\n\n                    nama:\n                    \"E-Journal\",\n\n                    keterangan:\n                    \"Akses sumber jurnal ilmiah\",\n\n                    url:\n                    \"#\"\n                },\n\n                {\n                    icon:\n                    \"ebook\",\n\n                    nama:\n                    \"E-Book\",\n\n                    keterangan:\n                    \"Akses koleksi buku digital\",\n\n                    url:\n                    \"#\"\n                }\n\n            ],\n\n\n            \/* =================================================\n               DOKUMEN PERPUSTAKAAN\n            ================================================= *\/\n\n            dokumen: [\n\n                {\n                    nama:\n                    \"Pedoman Pengelolaan Perpustakaan\",\n\n                    kategori:\n                    \"Pedoman\",\n\n                    tahun:\n                    \"2026\",\n\n                    cover:\n                    \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_1&sz=w800\",\n\n                    fileId:\n                    \"GANTI_ID_FILE_1\"\n                },\n\n                {\n                    nama:\n                    \"Tata Tertib Perpustakaan\",\n\n                    kategori:\n                    \"Tata Tertib\",\n\n                    tahun:\n                    \"2026\",\n\n                    cover:\n                    \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_2&sz=w800\",\n\n                    fileId:\n                    \"GANTI_ID_FILE_2\"\n                },\n\n                {\n                    nama:\n                    \"SOP Peminjaman dan Pengembalian Buku\",\n\n                    kategori:\n                    \"SOP\",\n\n                    tahun:\n                    \"2026\",\n\n                    cover:\n                    \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_3&sz=w800\",\n\n                    fileId:\n                    \"GANTI_ID_FILE_3\"\n                },\n\n                {\n                    nama:\n                    \"SOP Pelayanan Perpustakaan\",\n\n                    kategori:\n                    \"SOP\",\n\n                    tahun:\n                    \"2026\",\n\n                    cover:\n                    \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_4&sz=w800\",\n\n                    fileId:\n                    \"GANTI_ID_FILE_4\"\n                },\n\n                {\n                    nama:\n                    \"Formulir Usulan Buku\",\n\n                    kategori:\n                    \"Formulir\",\n\n                    tahun:\n                    \"2026\",\n\n                    cover:\n                    \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_5&sz=w800\",\n\n                    fileId:\n                    \"GANTI_ID_FILE_5\"\n                },\n\n                {\n                    nama:\n                    \"Formulir Bebas Pustaka\",\n\n                    kategori:\n                    \"Formulir\",\n\n                    tahun:\n                    \"2026\",\n\n                    cover:\n                    \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_6&sz=w800\",\n\n                    fileId:\n                    \"GANTI_ID_FILE_6\"\n                },\n\n                {\n                    nama:\n                    \"Program Kerja UPT Perpustakaan\",\n\n                    kategori:\n                    \"Program Kerja\",\n\n                    tahun:\n                    \"2026\",\n\n                    cover:\n                    \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_7&sz=w800\",\n\n                    fileId:\n                    \"GANTI_ID_FILE_7\"\n                },\n\n                {\n                    nama:\n                    \"Laporan Pengelolaan Perpustakaan\",\n\n                    kategori:\n                    \"Laporan\",\n\n                    tahun:\n                    \"2026\",\n\n                    cover:\n                    \"https:\/\/drive.google.com\/thumbnail?id=GANTI_ID_COVER_8&sz=w800\",\n\n                    fileId:\n                    \"GANTI_ID_FILE_8\"\n                }\n\n            ]\n\n        };\n\n        <\/script>\n\n\n\n        <!-- =====================================================\n             HERO\n        ====================================================== -->\n\n        <section class=\"perpus-hero\">\n\n\n            <!-- PENGELOLA -->\n\n            <div class=\"perpus-manager\">\n\n\n                <div class=\"perpus-manager-label\">\n                    PENGELOLA PERPUSTAKAAN\n                <\/div>\n\n\n                <div class=\"perpus-photo-wrap\">\n\n                    <div class=\"perpus-photo-decoration\"><\/div>\n\n\n                    <div class=\"perpus-photo\">\n\n                        <div class=\"perpus-photo-fallback\">\n                            PERPUS\n                        <\/div>\n\n                        <img decoding=\"async\"\n                            id=\"perpusManagerPhoto\"\n                            src=\"\"\n                            alt=\"Pengelola UPT Perpustakaan IPTAR\"\n                            loading=\"lazy\"\n                        >\n\n                    <\/div>\n\n\n                    <div class=\"perpus-manager-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-2\n                                     a4 4 0 0 0-4-4H8\n                                     a4 4 0 0 0-4 4v2\">\n                            <\/path>\n\n                            <circle\n                                cx=\"12\"\n                                cy=\"7\"\n                                r=\"4\">\n                            <\/circle>\n\n                        <\/svg>\n\n                        Pengelola UPT\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"perpus-manager-info\">\n\n                    <span>\n                        UNIT PELAKSANA TEKNIS\n                    <\/span>\n\n                    <h3 id=\"perpusManagerName\"><\/h3>\n\n                    <p id=\"perpusManagerPosition\"><\/p>\n\n                <\/div>\n\n\n            <\/div>\n\n\n\n            <!-- INFORMASI -->\n\n            <div class=\"perpus-info\">\n\n\n                <div class=\"perpus-badge\">\n\n                    <span>\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=\"M4 19.5A2.5 2.5 0 0 1\n                                     6.5 17H20\">\n                            <\/path>\n\n                            <path d=\"M6.5 2H20v20H6.5\n                                     A2.5 2.5 0 0 1 4 19.5\n                                     v-15A2.5 2.5 0 0 1 6.5 2z\">\n                            <\/path>\n\n                        <\/svg>\n\n                    <\/span>\n\n                    PUSAT LITERASI IPTAR\n\n                <\/div>\n\n\n                <div\n                    id=\"perpusTagline\"\n                    class=\"perpus-kicker\">\n                <\/div>\n\n\n                <h1>\n\n                    <span id=\"perpusShortName\">\n                        UPT PERPUSTAKAAN\n                    <\/span>\n\n                    <small>\n                        IPTAR\n                    <\/small>\n\n                <\/h1>\n\n\n                <h2 id=\"perpusName\"><\/h2>\n\n\n                <div class=\"perpus-title-line\">\n\n                    <span><\/span>\n                    <i><\/i>\n                    <span><\/span>\n\n                <\/div>\n\n\n                <div\n                    id=\"perpusDescription\"\n                    class=\"perpus-description\">\n                <\/div>\n\n\n\n                <!-- VALUES -->\n\n                <div class=\"perpus-values\">\n\n\n                    <div class=\"perpus-value\">\n\n                        <div class=\"perpus-value-icon\">\n\n                            <svg\n                                width=\"19\"\n                                height=\"19\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"none\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"2\">\n\n                                <path d=\"M4 19.5A2.5 2.5 0 0 1\n                                         6.5 17H20\">\n                                <\/path>\n\n                                <path d=\"M6.5 2H20v20H6.5\n                                         A2.5 2.5 0 0 1 4 19.5v-15\n                                         A2.5 2.5 0 0 1 6.5 2z\">\n                                <\/path>\n\n                            <\/svg>\n\n                        <\/div>\n\n                        <div>\n                            <strong>Koleksi<\/strong>\n                            <span>Referensi akademik<\/span>\n                        <\/div>\n\n                    <\/div>\n\n\n\n                    <div class=\"perpus-value\">\n\n                        <div class=\"perpus-value-icon yellow\">\n\n                            <svg\n                                width=\"19\"\n                                height=\"19\"\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                        <\/div>\n\n                        <div>\n                            <strong>Informasi<\/strong>\n                            <span>Mudah ditemukan<\/span>\n                        <\/div>\n\n                    <\/div>\n\n\n\n                    <div class=\"perpus-value\">\n\n                        <div class=\"perpus-value-icon orange\">\n\n                            <svg\n                                width=\"19\"\n                                height=\"19\"\n                                viewBox=\"0 0 24 24\"\n                                fill=\"none\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"2\">\n\n                                <circle\n                                    cx=\"12\"\n                                    cy=\"12\"\n                                    r=\"10\">\n                                <\/circle>\n\n                                <path d=\"M2 12h20\"><\/path>\n\n                                <path d=\"M12 2\n                                         a15 15 0 0 1 4 10\n                                         15 15 0 0 1-4 10\n                                         15 15 0 0 1-4-10\n                                         15 15 0 0 1 4-10z\">\n                                <\/path>\n\n                            <\/svg>\n\n                        <\/div>\n\n                        <div>\n                            <strong>Digital<\/strong>\n                            <span>Akses sumber elektronik<\/span>\n                        <\/div>\n\n                    <\/div>\n\n\n                <\/div>\n\n            <\/div>\n\n        <\/section>\n\n\n\n        <!-- =====================================================\n             LAYANAN\n        ====================================================== -->\n\n        <section class=\"perpus-service-section\">\n\n\n            <div class=\"perpus-section-heading\">\n\n                <div class=\"perpus-section-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                        <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"2\"><\/rect>\n                        <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"2\"><\/rect>\n                        <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"2\"><\/rect>\n                        <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"2\"><\/rect>\n\n                    <\/svg>\n\n                <\/div>\n\n\n                <div>\n\n                    <span>\n                        PELAYANAN PERPUSTAKAAN\n                    <\/span>\n\n                    <h2>\n                        Layanan UPT Perpustakaan\n                    <\/h2>\n\n                    <p>\n                        Layanan informasi dan sumber belajar\n                        bagi sivitas akademika IPTAR.\n                    <\/p>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div\n                id=\"perpusServiceGrid\"\n                class=\"perpus-service-grid\">\n            <\/div>\n\n\n        <\/section>\n\n\n\n        <!-- =====================================================\n             COLLECTION\n        ====================================================== -->\n\n        <section class=\"perpus-collection-section\">\n\n\n            <div class=\"perpus-collection-intro\">\n\n                <span>\n                    SUMBER INFORMASI\n                <\/span>\n\n                <h2>\n                    Koleksi Perpustakaan\n                <\/h2>\n\n                <p>\n                    Berbagai sumber informasi untuk mendukung\n                    pembelajaran, penelitian dan pengembangan\n                    keilmuan sivitas akademika.\n                <\/p>\n\n            <\/div>\n\n\n            <div\n                class=\"perpus-collection-grid\"\n                id=\"perpusCollectionGrid\">\n            <\/div>\n\n\n        <\/section>\n\n\n\n        <!-- =====================================================\n             DIGITAL ACCESS\n        ====================================================== -->\n\n        <section class=\"perpus-digital-section\">\n\n\n            <div class=\"perpus-digital-header\">\n\n\n                <div>\n\n                    <span>\n                        DIGITAL LIBRARY\n                    <\/span>\n\n                    <h2>\n                        Akses Cepat Perpustakaan\n                    <\/h2>\n\n                    <p>\n                        Temukan koleksi, repository,\n                        jurnal dan sumber digital melalui\n                        layanan perpustakaan IPTAR.\n                    <\/p>\n\n                <\/div>\n\n\n                <div class=\"perpus-digital-symbol\">\n\n                    <svg\n                        width=\"31\"\n                        height=\"31\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.8\">\n\n                        <circle\n                            cx=\"12\"\n                            cy=\"12\"\n                            r=\"10\">\n                        <\/circle>\n\n                        <path d=\"M2 12h20\"><\/path>\n\n                        <path d=\"M12 2\n                                 a15 15 0 0 1 4 10\n                                 15 15 0 0 1-4 10\n                                 15 15 0 0 1-4-10\n                                 15 15 0 0 1 4-10z\">\n                        <\/path>\n\n                    <\/svg>\n\n                <\/div>\n\n            <\/div>\n\n\n            <div\n                class=\"perpus-digital-grid\"\n                id=\"perpusDigitalGrid\">\n            <\/div>\n\n\n        <\/section>\n\n\n\n        <!-- =====================================================\n             INFO LAYANAN\n        ====================================================== -->\n\n        <section class=\"perpus-info-section\">\n\n\n            <div class=\"perpus-info-card\">\n\n                <div class=\"perpus-info-icon\">\n\n                    <svg\n                        width=\"25\"\n                        height=\"25\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\">\n\n                        <circle\n                            cx=\"12\"\n                            cy=\"12\"\n                            r=\"10\">\n                        <\/circle>\n\n                        <polyline\n                            points=\"12 6 12 12 16 14\">\n                        <\/polyline>\n\n                    <\/svg>\n\n                <\/div>\n\n                <div>\n\n                    <span>\n                        JAM PELAYANAN\n                    <\/span>\n\n                    <strong id=\"perpusJam\"><\/strong>\n\n                <\/div>\n\n            <\/div>\n\n\n\n            <div class=\"perpus-info-card\">\n\n                <div class=\"perpus-info-icon yellow\">\n\n                    <svg\n                        width=\"25\"\n                        height=\"25\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\">\n\n                        <path d=\"M21 10\n                                 c0 7-9 12-9 12S3 17 3 10\n                                 a9 9 0 1 1 18 0z\">\n                        <\/path>\n\n                        <circle\n                            cx=\"12\"\n                            cy=\"10\"\n                            r=\"3\">\n                        <\/circle>\n\n                    <\/svg>\n\n                <\/div>\n\n                <div>\n\n                    <span>\n                        LOKASI\n                    <\/span>\n\n                    <strong id=\"perpusLokasi\"><\/strong>\n\n                <\/div>\n\n            <\/div>\n\n\n\n            <div class=\"perpus-info-card\">\n\n                <div class=\"perpus-info-icon orange\">\n\n                    <svg\n                        width=\"25\"\n                        height=\"25\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\">\n\n                        <path d=\"M16 21v-2\n                                 a4 4 0 0 0-4-4H6\n                                 a4 4 0 0 0-4 4v2\">\n                        <\/path>\n\n                        <circle\n                            cx=\"9\"\n                            cy=\"7\"\n                            r=\"4\">\n                        <\/circle>\n\n                        <path d=\"M22 21v-2\n                                 a4 4 0 0 0-3-3.87\">\n                        <\/path>\n\n                    <\/svg>\n\n                <\/div>\n\n                <div>\n\n                    <span>\n                        ANGGOTA\n                    <\/span>\n\n                    <strong id=\"perpusMember\"><\/strong>\n\n                <\/div>\n\n            <\/div>\n\n\n        <\/section>\n\n\n\n        <!-- =====================================================\n             MESSAGE\n        ====================================================== -->\n\n        <section class=\"perpus-message\">\n\n\n            <div class=\"perpus-message-icon\">\n\n                <svg\n                    width=\"31\"\n                    height=\"31\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.8\">\n\n                    <path d=\"M4 19.5A2.5 2.5 0 0 1\n                             6.5 17H20\">\n                    <\/path>\n\n                    <path d=\"M6.5 2H20v20H6.5\n                             A2.5 2.5 0 0 1 4 19.5v-15\n                             A2.5 2.5 0 0 1 6.5 2z\">\n                    <\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <div>\n\n                <span>\n                    LITERASI UNTUK MASA DEPAN\n                <\/span>\n\n                <h2>\n                    Membaca, Belajar, Meneliti dan Berkarya\n                <\/h2>\n\n                <p>\n                    Perpustakaan IPTAR menjadi ruang untuk\n                    menemukan informasi, mengembangkan pengetahuan\n                    dan mendukung budaya akademik yang berkelanjutan.\n                <\/p>\n\n            <\/div>\n\n\n        <\/section>\n\n\n\n        <!-- =====================================================\n             DOCUMENT\n        ====================================================== -->\n\n        <section class=\"perpus-documents\">\n\n\n            <div class=\"perpus-document-header\">\n\n\n                <div class=\"perpus-section-heading perpus-document-heading\">\n\n                    <div class=\"perpus-section-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>\n                            PUSAT DOKUMENTASI\n                        <\/span>\n\n                        <h2>\n                            Dokumen UPT Perpustakaan\n                        <\/h2>\n\n                        <p>\n                            Pedoman, SOP, tata tertib,\n                            formulir dan dokumen perpustakaan.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <div class=\"perpus-doc-count\">\n\n                    <strong id=\"perpusDocCount\">\n                        0\n                    <\/strong>\n\n                    <span>\n                        Dokumen\n                    <\/span>\n\n                <\/div>\n\n\n            <\/div>\n\n\n\n            <!-- SEARCH -->\n\n            <div class=\"perpus-toolbar\">\n\n\n                <div class=\"perpus-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                        id=\"perpusSearch\"\n                        type=\"text\"\n                        placeholder=\"Cari pedoman, SOP, formulir...\"\n                        autocomplete=\"off\"\n                    >\n\n                <\/div>\n\n\n                <button\n                    id=\"perpusReset\"\n                    type=\"button\"\n                    class=\"perpus-reset\">\n\n                    Reset\n\n                <\/button>\n\n\n            <\/div>\n\n\n            <div\n                id=\"perpusDocumentGrid\"\n                class=\"perpus-document-grid\">\n            <\/div>\n\n\n            <div\n                id=\"perpusEmpty\"\n                class=\"perpus-empty\">\n\n                <h3>\n                    Dokumen tidak ditemukan\n                <\/h3>\n\n                <p>\n                    Gunakan kata kunci pencarian lainnya.\n                <\/p>\n\n            <\/div>\n\n\n        <\/section>\n\n\n    <\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   ROOT\n========================================================= *\/\n\n#perpus-iptar {\n\n    --green:#079447;\n    --green-dark:#04783c;\n    --green-deep:#064e3b;\n\n    --green-light:#e8f8ee;\n\n    --yellow:#facc15;\n    --yellow-light:#fff8ce;\n\n    --orange:#f59e0b;\n    --orange-light:#fff0dc;\n\n    --text:#173a2c;\n    --muted:#687a70;\n    --border:#e1ece5;\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    color:var(--text);\n\n    font-family:\n        \"Segoe UI\",\n        -apple-system,\n        BlinkMacSystemFont,\n        Roboto,\n        Arial,\n        sans-serif;\n\n    background:\n        radial-gradient(\n            circle at 2% 5%,\n            rgba(250,204,21,.16),\n            transparent 22%\n        ),\n        radial-gradient(\n            circle at 98% 45%,\n            rgba(245,158,11,.10),\n            transparent 23%\n        ),\n        linear-gradient(\n            180deg,\n            #f3fff7 0%,\n            #ffffff 42%,\n            #fafffb 100%\n        );\n}\n\n\n#perpus-iptar *,\n#perpus-iptar *::before,\n#perpus-iptar *::after {\n    box-sizing:border-box;\n}\n\n\n\n\/* =========================================================\n   CONTAINER\n========================================================= *\/\n\n.perpus-container {\n\n    width:100%;\n    max-width:1500px;\n\n    margin:0 auto;\n\n    padding-left:clamp(20px,5vw,75px);\n    padding-right:clamp(20px,5vw,75px);\n\n    position:relative;\n\n    z-index:5;\n}\n\n\n\n\/* BACKGROUND *\/\n\n.perpus-bg {\n\n    position:absolute;\n\n    border-radius:50%;\n}\n\n\n.perpus-bg-one {\n\n    width:380px;\n    height:380px;\n\n    right:-180px;\n    top:-190px;\n\n    border:\n        78px solid\n        rgba(7,148,71,.04);\n}\n\n\n.perpus-bg-two {\n\n    width:300px;\n    height:300px;\n\n    left:-150px;\n    bottom:100px;\n\n    border:\n        60px solid\n        rgba(245,158,11,.05);\n}\n\n\n.perpus-pattern {\n\n    position:absolute;\n\n    left:2%;\n    top:320px;\n\n    width:145px;\n    height:145px;\n\n    opacity:.12;\n\n    background-image:\n        radial-gradient(\n            #079447 2px,\n            transparent 2px\n        );\n\n    background-size:16px 16px;\n}\n\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n.perpus-hero {\n\n    position:relative;\n\n    display:grid;\n\n    grid-template-columns:\n        280px minmax(0,1fr);\n\n    align-items:center;\n\n    gap:clamp(40px,5vw,75px);\n\n    padding:\n        44px\n        clamp(35px,5vw,70px);\n\n    margin-bottom:60px;\n\n    overflow:hidden;\n\n    border:\n        1px solid\n        rgba(7,148,71,.11);\n\n    border-radius:30px;\n\n    background:\n        linear-gradient(\n            130deg,\n            rgba(255,255,255,.98),\n            rgba(239,252,245,.96)\n        );\n\n    box-shadow:\n        0 20px 60px\n        rgba(25,78,50,.08);\n}\n\n\n.perpus-hero::before {\n\n    content:\"\";\n\n    position:absolute;\n\n    width:300px;\n    height:300px;\n\n    right:-110px;\n    top:-160px;\n\n    border-radius:50%;\n\n    background:\n        rgba(250,204,21,.11);\n}\n\n\n\n\/* =========================================================\n   MANAGER\n========================================================= *\/\n\n.perpus-manager {\n\n    position:relative;\n\n    z-index:3;\n\n    text-align:center;\n}\n\n\n.perpus-manager-label {\n\n    display:inline-block;\n\n    margin-bottom:15px;\n\n    color:var(--orange);\n\n    font-size:8px;\n\n    font-weight:850;\n\n    letter-spacing:1.2px;\n}\n\n\n.perpus-photo-wrap {\n\n    position:relative;\n\n    width:235px;\n\n    margin:0 auto;\n}\n\n\n.perpus-photo-decoration {\n\n    position:absolute;\n\n    left:-12px;\n    top:28px;\n\n    width:200px;\n    height:205px;\n\n    border-radius:36px;\n\n    transform:rotate(-7deg);\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--yellow),\n            var(--orange)\n        );\n}\n\n\n.perpus-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:6px solid #fff;\n\n    border-radius:32px;\n\n    background:var(--green-light);\n\n    box-shadow:\n        0 20px 45px\n        rgba(26,74,49,.18);\n}\n\n\n.perpus-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    object-position:center top;\n}\n\n\n.perpus-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    color:#fff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--green),\n            var(--green-dark)\n        );\n\n    font-size:22px;\n\n    font-weight:900;\n}\n\n\n.perpus-manager-badge {\n\n    position:relative;\n\n    z-index:4;\n\n    width:max-content;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:6px;\n\n    margin:-17px auto 0;\n\n    padding:9px 17px;\n\n    border-radius:100px;\n\n    color:#fff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--green),\n            var(--green-dark)\n        );\n\n    box-shadow:\n        0 8px 20px\n        rgba(7,148,71,.24);\n\n    font-size:10px;\n\n    font-weight:750;\n}\n\n\n.perpus-manager-info {\n\n    margin-top:18px;\n}\n\n\n.perpus-manager-info span {\n\n    display:block;\n\n    color:#89968f;\n\n    font-size:8px;\n\n    font-weight:850;\n\n    letter-spacing:1px;\n}\n\n\n.perpus-manager-info h3 {\n\n    margin:3px 0;\n\n    color:#173b2d;\n\n    font-size:17px;\n\n    font-weight:820;\n}\n\n\n.perpus-manager-info p {\n\n    margin:0;\n\n    color:var(--green);\n\n    font-size:9.5px;\n\n    font-weight:700;\n}\n\n\n\n\/* =========================================================\n   INFO\n========================================================= *\/\n\n.perpus-info {\n\n    position:relative;\n\n    z-index:3;\n}\n\n\n.perpus-badge {\n\n    display:inline-flex;\n\n    align-items:center;\n\n    gap:7px;\n\n    padding:7px 13px;\n\n    margin-bottom:12px;\n\n    border-radius:100px;\n\n    color:var(--green);\n\n    background:var(--green-light);\n\n    font-size:9.5px;\n\n    font-weight:850;\n\n    letter-spacing:1.2px;\n}\n\n\n.perpus-badge > span {\n\n    width:27px;\n    height:27px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:50%;\n\n    background:#fff;\n}\n\n\n.perpus-kicker {\n\n    margin-bottom:5px;\n\n    color:var(--orange);\n\n    font-size:10px;\n\n    font-weight:850;\n\n    text-transform:uppercase;\n\n    letter-spacing:1px;\n}\n\n\n.perpus-info h1 {\n\n    margin:0 0 7px;\n\n    color:var(--green);\n\n    font-size:clamp(38px,5vw,61px);\n\n    line-height:1;\n\n    letter-spacing:-2px;\n\n    font-weight:900;\n}\n\n\n.perpus-info h1 small {\n\n    color:var(--orange);\n\n    font-size:.46em;\n}\n\n\n.perpus-info > h2 {\n\n    max-width:900px;\n\n    margin:0 0 13px;\n\n    color:#183c2e;\n\n    font-size:clamp(21px,2vw,29px);\n\n    line-height:1.3;\n\n    font-weight:800;\n}\n\n\n.perpus-title-line {\n\n    display:flex;\n\n    align-items:center;\n\n    gap:6px;\n\n    margin-bottom:18px;\n}\n\n\n.perpus-title-line span {\n\n    width:28px;\n    height:3px;\n\n    display:block;\n\n    border-radius:10px;\n\n    background:var(--green);\n}\n\n\n.perpus-title-line i {\n\n    width:7px;\n    height:7px;\n\n    border-radius:50%;\n\n    background:var(--yellow);\n}\n\n\n.perpus-description {\n\n    max-width:900px;\n\n    color:var(--muted);\n\n    font-size:14px;\n\n    line-height:1.8;\n}\n\n\n.perpus-description strong {\n\n    color:var(--green-dark);\n}\n\n\n\n\/* VALUES *\/\n\n.perpus-values {\n\n    display:flex;\n\n    flex-wrap:wrap;\n\n    gap:10px;\n\n    margin-top:22px;\n}\n\n\n.perpus-value {\n\n    min-width:165px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:9px;\n\n    padding:9px 12px;\n\n    border:\n        1px solid\n        rgba(7,148,71,.08);\n\n    border-radius:13px;\n\n    background:\n        rgba(255,255,255,.82);\n}\n\n\n.perpus-value-icon {\n\n    width:35px;\n    height:35px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:10px;\n\n    color:var(--green);\n\n    background:var(--green-light);\n}\n\n\n.perpus-value-icon.yellow {\n\n    color:#a87b00;\n\n    background:var(--yellow-light);\n}\n\n\n.perpus-value-icon.orange {\n\n    color:#c56600;\n\n    background:var(--orange-light);\n}\n\n\n.perpus-value strong {\n\n    display:block;\n\n    color:#29483b;\n\n    font-size:10px;\n\n    font-weight:800;\n}\n\n\n.perpus-value div > span {\n\n    display:block;\n\n    color:#89968f;\n\n    font-size:8.5px;\n}\n\n\n\n\/* =========================================================\n   SECTION HEADING\n========================================================= *\/\n\n.perpus-service-section {\n\n    margin-bottom:55px;\n}\n\n\n.perpus-section-heading {\n\n    display:flex;\n\n    align-items:center;\n\n    gap:13px;\n\n    margin-bottom:25px;\n\n    padding-bottom:17px;\n\n    border-bottom:\n        1px solid\n        var(--border);\n}\n\n\n.perpus-section-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:15px;\n\n    color:#fff;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--green),\n            var(--green-dark)\n        );\n\n    box-shadow:\n        0 8px 20px\n        rgba(7,148,71,.20);\n}\n\n\n.perpus-section-heading span {\n\n    display:block;\n\n    margin-bottom:2px;\n\n    color:#89968f;\n\n    font-size:8.5px;\n\n    font-weight:800;\n\n    letter-spacing:1.2px;\n}\n\n\n.perpus-section-heading h2 {\n\n    margin:0 0 3px;\n\n    color:#173a2c;\n\n    font-size:24px;\n\n    font-weight:820;\n}\n\n\n.perpus-section-heading p {\n\n    margin:0;\n\n    color:var(--muted);\n\n    font-size:11.5px;\n}\n\n\n\n\/* =========================================================\n   SERVICES\n========================================================= *\/\n\n.perpus-service-grid {\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(3,minmax(0,1fr));\n\n    gap:17px;\n}\n\n\n.perpus-service-card {\n\n    position:relative;\n\n    min-height:180px;\n\n    padding:22px;\n\n    overflow:hidden;\n\n    border:\n        1px solid\n        var(--border);\n\n    border-radius:19px;\n\n    background:#fff;\n\n    box-shadow:\n        0 9px 28px\n        rgba(26,72,49,.05);\n\n    transition:.3s;\n}\n\n\n.perpus-service-card::before {\n\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n    top:0;\n\n    width:100%;\n    height:4px;\n\n    opacity:0;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--green),\n            #add33c,\n            var(--yellow),\n            var(--orange)\n        );\n\n    transition:.3s;\n}\n\n\n.perpus-service-card:hover {\n\n    transform:translateY(-6px);\n\n    border-color:\n        rgba(7,148,71,.22);\n\n    box-shadow:\n        0 18px 40px\n        rgba(25,75,50,.10);\n}\n\n\n.perpus-service-card:hover::before {\n\n    opacity:1;\n}\n\n\n.perpus-service-icon {\n\n    width:48px;\n    height:48px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    margin-bottom:15px;\n\n    border-radius:14px;\n\n    color:var(--green);\n\n    background:var(--green-light);\n}\n\n\n.perpus-service-card:nth-child(3n+2)\n.perpus-service-icon {\n\n    color:#a77900;\n\n    background:var(--yellow-light);\n}\n\n\n.perpus-service-card:nth-child(3n)\n.perpus-service-icon {\n\n    color:#c56600;\n\n    background:var(--orange-light);\n}\n\n\n.perpus-service-category {\n\n    display:block;\n\n    margin-bottom:5px;\n\n    color:var(--orange);\n\n    font-size:7.5px;\n\n    font-weight:850;\n\n    text-transform:uppercase;\n\n    letter-spacing:.8px;\n}\n\n\n.perpus-service-card h3 {\n\n    margin:0 0 7px;\n\n    color:#183b2e;\n\n    font-size:14px;\n\n    font-weight:800;\n}\n\n\n.perpus-service-card p {\n\n    margin:0;\n\n    color:var(--muted);\n\n    font-size:11px;\n\n    line-height:1.7;\n}\n\n\n\n\/* =========================================================\n   COLLECTION\n========================================================= *\/\n\n.perpus-collection-section {\n\n    display:grid;\n\n    grid-template-columns:\n        280px minmax(0,1fr);\n\n    gap:25px;\n\n    margin-bottom:55px;\n\n    padding:30px;\n\n    border:\n        1px solid\n        var(--border);\n\n    border-radius:24px;\n\n    background:#fff;\n\n    box-shadow:\n        0 12px 35px\n        rgba(25,73,49,.055);\n}\n\n\n.perpus-collection-intro span {\n\n    display:block;\n\n    color:var(--orange);\n\n    font-size:8px;\n\n    font-weight:850;\n\n    letter-spacing:1.2px;\n}\n\n\n.perpus-collection-intro h2 {\n\n    margin:4px 0 7px;\n\n    color:#173a2c;\n\n    font-size:22px;\n\n    font-weight:820;\n}\n\n\n.perpus-collection-intro p {\n\n    margin:0;\n\n    color:var(--muted);\n\n    font-size:10.5px;\n\n    line-height:1.7;\n}\n\n\n.perpus-collection-grid {\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(4,minmax(0,1fr));\n\n    gap:10px;\n}\n\n\n.perpus-collection-card {\n\n    padding:17px;\n\n    border-radius:16px;\n\n    background:\n        linear-gradient(\n            135deg,\n            #f3fff7,\n            #fff\n        );\n\n    border:\n        1px solid\n        var(--border);\n}\n\n\n.perpus-collection-icon {\n\n    width:39px;\n    height:39px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    margin-bottom:11px;\n\n    border-radius:12px;\n\n    color:var(--green);\n\n    background:var(--green-light);\n}\n\n\n.perpus-collection-card:nth-child(even)\n.perpus-collection-icon {\n\n    color:#a66e00;\n\n    background:var(--yellow-light);\n}\n\n\n.perpus-collection-card strong {\n\n    display:block;\n\n    margin-bottom:4px;\n\n    color:#183b2e;\n\n    font-size:10px;\n}\n\n\n.perpus-collection-card p {\n\n    margin:0;\n\n    color:var(--muted);\n\n    font-size:8.5px;\n\n    line-height:1.5;\n}\n\n\n\n\/* =========================================================\n   DIGITAL\n========================================================= *\/\n\n.perpus-digital-section {\n\n    position:relative;\n\n    margin-bottom:55px;\n\n    padding:clamp(25px,4vw,35px);\n\n    overflow:hidden;\n\n    border-radius:25px;\n\n    color:#fff;\n\n    background:\n        linear-gradient(\n            120deg,\n            #046d37,\n            #079447 60%,\n            #20a85c\n        );\n\n    box-shadow:\n        0 18px 45px\n        rgba(7,130,65,.18);\n}\n\n\n.perpus-digital-section::after {\n\n    content:\"\";\n\n    position:absolute;\n\n    width:280px;\n    height:280px;\n\n    right:-100px;\n    top:-170px;\n\n    border-radius:50%;\n\n    background:\n        rgba(250,204,21,.13);\n}\n\n\n.perpus-digital-header {\n\n    position:relative;\n\n    z-index:2;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    gap:20px;\n\n    margin-bottom:22px;\n}\n\n\n.perpus-digital-header span {\n\n    display:block;\n\n    color:#ffe274;\n\n    font-size:8px;\n\n    font-weight:850;\n\n    letter-spacing:1.3px;\n}\n\n\n.perpus-digital-header h2 {\n\n    margin:3px 0 5px;\n\n    color:#fff;\n\n    font-size:23px;\n\n    font-weight:820;\n}\n\n\n.perpus-digital-header p {\n\n    max-width:700px;\n\n    margin:0;\n\n    color:\n        rgba(255,255,255,.75);\n\n    font-size:11px;\n\n    line-height:1.6;\n}\n\n\n.perpus-digital-symbol {\n\n    width:57px;\n    height:57px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    flex-shrink:0;\n\n    border-radius:18px;\n\n    background:\n        rgba(255,255,255,.12);\n}\n\n\n.perpus-digital-grid {\n\n    position:relative;\n\n    z-index:2;\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(4,minmax(0,1fr));\n\n    gap:10px;\n}\n\n\n.perpus-digital-card {\n\n    display:flex;\n\n    align-items:center;\n\n    gap:11px;\n\n    min-height:74px;\n\n    padding:12px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.14);\n\n    border-radius:15px;\n\n    color:#fff !important;\n\n    text-decoration:none !important;\n\n    background:\n        rgba(255,255,255,.09);\n\n    transition:.25s;\n}\n\n\n.perpus-digital-card:hover {\n\n    transform:translateY(-4px);\n\n    background:\n        rgba(255,255,255,.16);\n}\n\n\n.perpus-digital-card-icon {\n\n    width:40px;\n    height:40px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    flex-shrink:0;\n\n    border-radius:12px;\n\n    color:#405500;\n\n    background:var(--yellow);\n}\n\n\n.perpus-digital-card strong {\n\n    display:block;\n\n    color:#fff;\n\n    font-size:10px;\n}\n\n\n.perpus-digital-card span {\n\n    display:block;\n\n    margin-top:2px;\n\n    color:\n        rgba(255,255,255,.68);\n\n    font-size:8px;\n}\n\n\n\n\/* =========================================================\n   SERVICE INFO\n========================================================= *\/\n\n.perpus-info-section {\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(3,minmax(0,1fr));\n\n    gap:13px;\n\n    margin-bottom:55px;\n}\n\n\n.perpus-info-card {\n\n    display:flex;\n\n    align-items:center;\n\n    gap:12px;\n\n    padding:17px;\n\n    border:\n        1px solid\n        var(--border);\n\n    border-radius:16px;\n\n    background:#fff;\n}\n\n\n.perpus-info-icon {\n\n    width:46px;\n    height:46px;\n\n    flex-shrink:0;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:14px;\n\n    color:var(--green);\n\n    background:var(--green-light);\n}\n\n\n.perpus-info-icon.yellow {\n\n    color:#a87b00;\n\n    background:var(--yellow-light);\n}\n\n\n.perpus-info-icon.orange {\n\n    color:#c56600;\n\n    background:var(--orange-light);\n}\n\n\n.perpus-info-card span {\n\n    display:block;\n\n    margin-bottom:3px;\n\n    color:#8b9991;\n\n    font-size:7.5px;\n\n    font-weight:850;\n\n    letter-spacing:.8px;\n}\n\n\n.perpus-info-card strong {\n\n    display:block;\n\n    color:#29483b;\n\n    font-size:10.5px;\n\n    line-height:1.45;\n}\n\n\n\n\/* =========================================================\n   MESSAGE\n========================================================= *\/\n\n.perpus-message {\n\n    display:grid;\n\n    grid-template-columns:\n        auto minmax(0,1fr);\n\n    align-items:center;\n\n    gap:18px;\n\n    margin-bottom:55px;\n\n    padding:26px 30px;\n\n    border-radius:22px;\n\n    border:\n        1px solid\n        rgba(245,158,11,.18);\n\n    background:\n        linear-gradient(\n            135deg,\n            #fffdf4,\n            #fff7dc\n        );\n}\n\n\n.perpus-message-icon {\n\n    width:59px;\n    height:59px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:18px;\n\n    color:#a96d00;\n\n    background:var(--yellow);\n}\n\n\n.perpus-message span {\n\n    display:block;\n\n    color:#b47400;\n\n    font-size:8px;\n\n    font-weight:850;\n\n    letter-spacing:1.2px;\n}\n\n\n.perpus-message h2 {\n\n    margin:3px 0 5px;\n\n    color:#4d4421;\n\n    font-size:20px;\n}\n\n\n.perpus-message p {\n\n    max-width:850px;\n\n    margin:0;\n\n    color:#786e48;\n\n    font-size:10.5px;\n\n    line-height:1.65;\n}\n\n\n\n\/* =========================================================\n   DOCUMENTS\n========================================================= *\/\n\n.perpus-documents {\n\n    padding:clamp(24px,4vw,38px);\n\n    border:\n        1px solid\n        rgba(7,148,71,.09);\n\n    border-radius:27px;\n\n    background:\n        rgba(255,255,255,.92);\n\n    box-shadow:\n        0 15px 45px\n        rgba(25,73,49,.06);\n}\n\n\n.perpus-document-header {\n\n    display:flex;\n\n    align-items:center;\n    justify-content:space-between;\n\n    gap:20px;\n\n    margin-bottom:24px;\n}\n\n\n.perpus-document-heading {\n\n    flex:1;\n\n    margin:0;\n}\n\n\n.perpus-doc-count {\n\n    display:flex;\n\n    align-items:center;\n\n    gap:7px;\n\n    padding:7px 13px;\n\n    border:\n        1px solid\n        var(--border);\n\n    border-radius:100px;\n\n    color:#77867e;\n\n    background:#fff;\n\n    font-size:10px;\n\n    font-weight:700;\n}\n\n\n.perpus-doc-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:50%;\n\n    color:#715500;\n\n    background:var(--yellow);\n}\n\n\n\n\/* SEARCH *\/\n\n.perpus-toolbar {\n\n    display:flex;\n\n    align-items:center;\n\n    gap:9px;\n\n    margin-bottom:25px;\n}\n\n\n.perpus-search {\n\n    width:100%;\n    max-width:530px;\n\n    height:46px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:9px;\n\n    padding:0 15px;\n\n    border:\n        1px solid\n        var(--border);\n\n    border-radius:13px;\n\n    color:#89978f;\n\n    background:#fff;\n}\n\n\n.perpus-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.perpus-search input {\n\n    width:100%;\n    height:100%;\n\n    padding:0 !important;\n\n    border:none !important;\n    outline:none !important;\n    box-shadow:none !important;\n\n    background:transparent !important;\n\n    color:#334b40;\n\n    font-size:12px;\n}\n\n\n.perpus-reset {\n\n    height:46px;\n\n    padding:0 18px;\n\n    border:\n        1px solid\n        var(--border);\n\n    border-radius:13px;\n\n    color:#697970;\n\n    background:#fff;\n\n    cursor:pointer;\n\n    font-size:11px;\n\n    font-weight:750;\n}\n\n\n.perpus-reset:hover {\n\n    color:#fff;\n\n    border-color:var(--orange);\n\n    background:var(--orange);\n}\n\n\n\n\/* DOCUMENT GRID *\/\n\n.perpus-document-grid {\n\n    display:grid;\n\n    grid-template-columns:\n        repeat(4,minmax(0,1fr));\n\n    gap:19px;\n}\n\n\n.perpus-doc-card {\n\n    display:flex;\n\n    flex-direction:column;\n\n    overflow:hidden;\n\n    border:\n        1px solid\n        #e4ede7;\n\n    border-radius:19px;\n\n    background:#fff;\n\n    transition:.3s;\n}\n\n\n.perpus-doc-card:hover {\n\n    transform:translateY(-7px);\n\n    border-color:\n        rgba(7,148,71,.22);\n\n    box-shadow:\n        0 18px 40px\n        rgba(26,75,50,.10);\n}\n\n\n.perpus-doc-cover {\n\n    position:relative;\n\n    aspect-ratio:4 \/ 3;\n\n    overflow:hidden;\n\n    background:\n        linear-gradient(\n            135deg,\n            #e7f8ed,\n            #fff8cf\n        );\n}\n\n\n.perpus-doc-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:.5s;\n}\n\n\n.perpus-doc-card:hover\n.perpus-doc-cover img {\n\n    transform:scale(1.05);\n}\n\n\n.perpus-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    color:var(--green);\n}\n\n\n.perpus-cover-fallback strong {\n\n    font-size:21px;\n\n    font-weight:900;\n}\n\n\n.perpus-cover-fallback span {\n\n    font-size:8px;\n\n    font-weight:800;\n\n    letter-spacing:1px;\n}\n\n\n.perpus-doc-body {\n\n    flex:1;\n\n    display:flex;\n\n    flex-direction:column;\n\n    padding:18px;\n}\n\n\n.perpus-doc-category {\n\n    align-self:flex-start;\n\n    margin-bottom:8px;\n\n    padding:4px 8px;\n\n    border-radius:100px;\n\n    color:#057842;\n\n    background:var(--green-light);\n\n    font-size:7px;\n\n    font-weight:850;\n\n    text-transform:uppercase;\n}\n\n\n.perpus-doc-body h3 {\n\n    min-height:43px;\n\n    margin:0 0 9px;\n\n    color:#183b2e;\n\n    font-size:13px;\n\n    line-height:1.45;\n\n    font-weight:780;\n}\n\n\n.perpus-doc-meta {\n\n    display:flex;\n\n    gap:7px;\n\n    margin-bottom:15px;\n\n    color:#89968f;\n\n    font-size:8.5px;\n}\n\n\n.perpus-doc-actions {\n\n    display:grid;\n\n    grid-template-columns:\n        1fr 1fr;\n\n    gap:7px;\n\n    margin-top:auto;\n}\n\n\n.perpus-doc-btn {\n\n    min-height:37px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    border-radius:10px;\n\n    text-decoration:none !important;\n\n    font-size:9px;\n\n    font-weight:750;\n}\n\n\n.perpus-view {\n\n    color:var(--green) !important;\n\n    background:#effaf3;\n\n    border:\n        1px solid\n        #dcebe2;\n}\n\n\n.perpus-view:hover {\n\n    color:#fff !important;\n\n    background:var(--green);\n}\n\n\n.perpus-download {\n\n    color:#fff !important;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--green),\n            var(--green-dark)\n        );\n}\n\n\n.perpus-download:hover {\n\n    color:#fff !important;\n\n    background:\n        linear-gradient(\n            135deg,\n            var(--orange),\n            #e97b0b\n        );\n}\n\n\n.perpus-empty {\n\n    display:none;\n\n    padding:50px 20px;\n\n    text-align:center;\n}\n\n\n.perpus-empty h3 {\n\n    margin:0 0 5px;\n\n    color:#29483b;\n}\n\n\n.perpus-empty p {\n\n    margin:0;\n\n    color:var(--muted);\n\n    font-size:11px;\n}\n\n\n\n\/* =========================================================\n   RESPONSIVE\n========================================================= *\/\n\n@media(max-width:1150px) {\n\n    .perpus-document-grid {\n        grid-template-columns:\n            repeat(3,minmax(0,1fr));\n    }\n\n\n    .perpus-collection-grid {\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n    }\n\n}\n\n\n@media(max-width:900px) {\n\n    .perpus-hero {\n\n        grid-template-columns:\n            220px minmax(0,1fr);\n\n        gap:30px;\n\n        padding:35px 28px;\n    }\n\n\n    .perpus-photo-wrap {\n        width:195px;\n    }\n\n\n    .perpus-photo {\n        width:180px;\n        height:220px;\n    }\n\n\n    .perpus-photo-decoration {\n        width:168px;\n        height:180px;\n    }\n\n\n    .perpus-service-grid {\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n    }\n\n\n    .perpus-collection-section {\n\n        grid-template-columns:1fr;\n    }\n\n\n    .perpus-digital-grid {\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n    }\n\n}\n\n\n@media(max-width:700px) {\n\n    .perpus-hero {\n\n        grid-template-columns:1fr;\n\n        text-align:center;\n    }\n\n\n    .perpus-photo-wrap {\n        width:205px;\n    }\n\n\n    .perpus-photo {\n        width:185px;\n        height:225px;\n    }\n\n\n    .perpus-photo-decoration {\n        width:175px;\n        height:180px;\n    }\n\n\n    .perpus-badge {\n        margin-left:auto;\n        margin-right:auto;\n    }\n\n\n    .perpus-title-line {\n        justify-content:center;\n    }\n\n\n    .perpus-values {\n\n        display:grid;\n\n        grid-template-columns:\n            1fr 1fr;\n\n        text-align:left;\n    }\n\n\n    .perpus-info-section {\n\n        grid-template-columns:1fr;\n    }\n\n}\n\n\n@media(max-width:650px) {\n\n    #perpus-iptar {\n\n        padding:42px 0 60px;\n    }\n\n\n    .perpus-container {\n\n        padding-left:15px;\n        padding-right:15px;\n    }\n\n\n    .perpus-hero {\n\n        padding:28px 19px;\n\n        border-radius:23px;\n\n        margin-bottom:48px;\n    }\n\n\n    .perpus-description {\n\n        font-size:13px;\n    }\n\n\n    .perpus-service-grid {\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        gap:10px;\n    }\n\n\n    .perpus-service-card {\n\n        min-height:175px;\n\n        padding:16px;\n    }\n\n\n    .perpus-service-card h3 {\n\n        font-size:12px;\n    }\n\n\n    .perpus-service-card p {\n\n        font-size:9.5px;\n    }\n\n\n    .perpus-collection-section {\n\n        padding:20px;\n    }\n\n\n    .perpus-digital-grid {\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n    }\n\n\n    .perpus-message {\n\n        grid-template-columns:1fr;\n\n        padding:22px;\n    }\n\n\n    .perpus-document-header {\n\n        align-items:flex-start;\n    }\n\n\n    .perpus-doc-count {\n\n        display:none;\n    }\n\n\n    .perpus-document-grid {\n\n        grid-template-columns:\n            repeat(2,minmax(0,1fr));\n\n        gap:10px;\n    }\n\n\n    .perpus-doc-body {\n\n        padding:12px;\n    }\n\n\n    .perpus-doc-body h3 {\n\n        min-height:38px;\n\n        font-size:11px;\n    }\n\n\n    .perpus-doc-btn {\n\n        min-height:34px;\n\n        font-size:8px;\n    }\n\n}\n\n\n@media(max-width:390px) {\n\n    .perpus-service-grid,\n    .perpus-document-grid,\n    .perpus-values,\n    .perpus-collection-grid,\n    .perpus-digital-grid {\n\n        grid-template-columns:1fr;\n    }\n\n\n    .perpus-doc-body h3 {\n\n        min-height:auto;\n\n        font-size:13px;\n    }\n\n}\n\n\n\/* ELEMENTOR *\/\n\n#perpus-iptar a {\n    box-shadow:none;\n}\n\n\n#perpus-iptar button,\n#perpus-iptar input {\n    font-family:inherit;\n}\n\n<\/style>\n\n\n\n<script>\n\n(function(){\n\n\"use strict\";\n\n\nconst root =\n    document.getElementById(\n        \"perpus-iptar\"\n    );\n\n\nif(!root) return;\n\n\nconst data =\n    DATA_PERPUS;\n\n\n\n\/* =========================================================\n   ESCAPE\n========================================================= *\/\n\nfunction escapeHTML(value){\n\n    return String(value || \"\")\n        .replace(\/&\/g,\"&amp;\")\n        .replace(\/<\/g,\"&lt;\")\n        .replace(\/>\/g,\"&gt;\")\n        .replace(\/\"\/g,\"&quot;\")\n        .replace(\/'\/g,\"&#039;\");\n\n}\n\n\n\n\/* =========================================================\n   BASIC DATA\n========================================================= *\/\n\nconst photo =\n    root.querySelector(\n        \"#perpusManagerPhoto\"\n    );\n\n\nconst fallback =\n    root.querySelector(\n        \".perpus-photo-fallback\"\n    );\n\n\nphoto.src =\n    data.pengelola.foto;\n\n\nroot.querySelector(\n    \"#perpusManagerName\"\n).textContent =\n    data.pengelola.nama;\n\n\nroot.querySelector(\n    \"#perpusManagerPosition\"\n).textContent =\n    data.pengelola.jabatan;\n\n\nroot.querySelector(\n    \"#perpusShortName\"\n).textContent =\n    data.singkatan;\n\n\nroot.querySelector(\n    \"#perpusName\"\n).textContent =\n    data.nama;\n\n\nroot.querySelector(\n    \"#perpusTagline\"\n).textContent =\n    data.tagline;\n\n\nroot.querySelector(\n    \"#perpusDescription\"\n).innerHTML =\n    data.deskripsi;\n\n\nroot.querySelector(\n    \"#perpusJam\"\n).textContent =\n    data.informasi.jam;\n\n\nroot.querySelector(\n    \"#perpusLokasi\"\n).textContent =\n    data.informasi.lokasi;\n\n\nroot.querySelector(\n    \"#perpusMember\"\n).textContent =\n    data.informasi.keanggotaan;\n\n\n\nphoto.addEventListener(\n    \"load\",\n    function(){\n\n        fallback.style.display =\n            \"none\";\n\n    }\n);\n\n\nphoto.addEventListener(\n    \"error\",\n    function(){\n\n        photo.style.display =\n            \"none\";\n\n        fallback.style.display =\n            \"flex\";\n\n    }\n);\n\n\n\n\/* =========================================================\n   ICONS\n========================================================= *\/\n\nfunction serviceIcon(type){\n\n    const icons = {\n\n        circulation:`\n            <svg width=\"24\" height=\"24\"\n                 viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path>\n                <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path>\n\n            <\/svg>\n        `,\n\n        reference:`\n            <svg width=\"24\" height=\"24\"\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                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n\n            <\/svg>\n        `,\n\n        digital:`\n            <svg width=\"24\" height=\"24\"\n                 viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                <path d=\"M2 12h20\"><\/path>\n                <path d=\"M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10z\"><\/path>\n\n            <\/svg>\n        `,\n\n        repository:`\n            <svg width=\"24\" height=\"24\"\n                 viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"><\/ellipse>\n                <path d=\"M3 5v7c0 1.7 4 3 9 3s9-1.3 9-3V5\"><\/path>\n                <path d=\"M3 12v7c0 1.7 4 3 9 3s9-1.3 9-3v-7\"><\/path>\n\n            <\/svg>\n        `,\n\n        literacy:`\n            <svg width=\"24\" height=\"24\"\n                 viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <path d=\"M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z\"><\/path>\n                <path d=\"M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z\"><\/path>\n\n            <\/svg>\n        `,\n\n        reading:`\n            <svg width=\"24\" height=\"24\"\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-4H8a4 4 0 0 0-4 4v2\"><\/path>\n                <circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle>\n\n            <\/svg>\n        `\n\n    };\n\n\n    return icons[type] || icons.reference;\n\n}\n\n\n\n\/* SERVICES *\/\n\nconst serviceGrid =\n    root.querySelector(\n        \"#perpusServiceGrid\"\n    );\n\n\ndata.layanan.forEach(\n    function(item){\n\n        const card =\n            document.createElement(\n                \"article\"\n            );\n\n\n        card.className =\n            \"perpus-service-card\";\n\n\n        card.innerHTML = `\n\n            <div class=\"perpus-service-icon\">\n                ${serviceIcon(item.icon)}\n            <\/div>\n\n            <span class=\"perpus-service-category\">\n                ${escapeHTML(item.kategori)}\n            <\/span>\n\n            <h3>\n                ${escapeHTML(item.nama)}\n            <\/h3>\n\n            <p>\n                ${escapeHTML(item.deskripsi)}\n            <\/p>\n\n        `;\n\n\n        serviceGrid.appendChild(card);\n\n    }\n);\n\n\n\n\/* =========================================================\n   COLLECTION\n========================================================= *\/\n\nfunction simpleIcon(type){\n\n    const icons = {\n\n        book:`\n            <svg width=\"21\" height=\"21\"\n                 viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path>\n                <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path>\n\n            <\/svg>\n        `,\n\n        journal:`\n            <svg width=\"21\" height=\"21\"\n                 viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <path d=\"M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11v14a2 2 0 0 0 2 2z\"><\/path>\n                <line x1=\"7\" y1=\"8\" x2=\"13\" y2=\"8\"><\/line>\n                <line x1=\"7\" y1=\"12\" x2=\"13\" y2=\"12\"><\/line>\n\n            <\/svg>\n        `,\n\n        research:`\n            <svg width=\"21\" height=\"21\"\n                 viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n                <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n\n            <\/svg>\n        `,\n\n        ebook:`\n            <svg width=\"21\" height=\"21\"\n                 viewBox=\"0 0 24 24\"\n                 fill=\"none\"\n                 stroke=\"currentColor\"\n                 stroke-width=\"2\">\n\n                <rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\n                <line x1=\"8\" y1=\"22\" x2=\"16\" y2=\"22\"><\/line>\n                <line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"><\/line>\n\n            <\/svg>\n        `\n\n    };\n\n\n    return icons[type] || icons.book;\n\n}\n\n\nconst collectionGrid =\n    root.querySelector(\n        \"#perpusCollectionGrid\"\n    );\n\n\ndata.koleksi.forEach(\n    function(item){\n\n        const card =\n            document.createElement(\"article\");\n\n\n        card.className =\n            \"perpus-collection-card\";\n\n\n        card.innerHTML = `\n\n            <div class=\"perpus-collection-icon\">\n                ${simpleIcon(item.icon)}\n            <\/div>\n\n            <strong>\n                ${escapeHTML(item.nama)}\n            <\/strong>\n\n            <p>\n                ${escapeHTML(item.deskripsi)}\n            <\/p>\n\n        `;\n\n\n        collectionGrid.appendChild(card);\n\n    }\n);\n\n\n\n\/* =========================================================\n   DIGITAL\n========================================================= *\/\n\nfunction digitalIcon(type){\n\n    if(type === \"search\"){\n\n        return `\n            <svg width=\"20\" height=\"20\"\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                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n\n            <\/svg>\n        `;\n\n    }\n\n\n    return simpleIcon(type);\n\n}\n\n\nconst digitalGrid =\n    root.querySelector(\n        \"#perpusDigitalGrid\"\n    );\n\n\ndata.akses.forEach(\n    function(item){\n\n        const link =\n            document.createElement(\"a\");\n\n\n        link.className =\n            \"perpus-digital-card\";\n\n\n        link.href =\n            item.url;\n\n\n        link.target =\n            \"_blank\";\n\n\n        link.rel =\n            \"noopener noreferrer\";\n\n\n        link.innerHTML = `\n\n            <div class=\"perpus-digital-card-icon\">\n\n                ${digitalIcon(item.icon)}\n\n            <\/div>\n\n            <div>\n\n                <strong>\n                    ${escapeHTML(item.nama)}\n                <\/strong>\n\n                <span>\n                    ${escapeHTML(item.keterangan)}\n                <\/span>\n\n            <\/div>\n\n        `;\n\n\n        digitalGrid.appendChild(link);\n\n    }\n);\n\n\n\n\/* =========================================================\n   GOOGLE DRIVE\n========================================================= *\/\n\nfunction previewDrive(fileId){\n\n    return (\n        \"https:\/\/drive.google.com\/file\/d\/\" +\n        fileId +\n        \"\/view\"\n    );\n\n}\n\n\nfunction downloadDrive(fileId){\n\n    return (\n        \"https:\/\/drive.google.com\/uc?export=download&id=\" +\n        fileId\n    );\n\n}\n\n\n\n\/* =========================================================\n   DOCUMENTS\n========================================================= *\/\n\nconst documentGrid =\n    root.querySelector(\n        \"#perpusDocumentGrid\"\n    );\n\n\nconst count =\n    root.querySelector(\n        \"#perpusDocCount\"\n    );\n\n\nconst search =\n    root.querySelector(\n        \"#perpusSearch\"\n    );\n\n\nconst reset =\n    root.querySelector(\n        \"#perpusReset\"\n    );\n\n\nconst empty =\n    root.querySelector(\n        \"#perpusEmpty\"\n    );\n\n\nfunction renderDocuments(list){\n\n    documentGrid.innerHTML = \"\";\n\n\n    count.textContent =\n        list.length;\n\n\n    if(list.length === 0){\n\n        empty.style.display =\n            \"block\";\n\n        return;\n\n    }\n\n\n    empty.style.display =\n        \"none\";\n\n\n    list.forEach(\n        function(doc){\n\n            const card =\n                document.createElement(\n                    \"article\"\n                );\n\n\n            card.className =\n                \"perpus-doc-card\";\n\n\n            card.innerHTML = `\n\n                <div class=\"perpus-doc-cover\">\n\n                    <div class=\"perpus-cover-fallback\">\n\n                        <strong>\n                            PERPUSTAKAAN\n                        <\/strong>\n\n                        <span>\n                            DOKUMEN IPTAR\n                        <\/span>\n\n                    <\/div>\n\n                    <img decoding=\"async\"\n                        src=\"${escapeHTML(doc.cover)}\"\n                        alt=\"${escapeHTML(doc.nama)}\"\n                        loading=\"lazy\"\n                    >\n\n                <\/div>\n\n\n                <div class=\"perpus-doc-body\">\n\n                    <span class=\"perpus-doc-category\">\n\n                        ${escapeHTML(\n                            doc.kategori\n                        )}\n\n                    <\/span>\n\n\n                    <h3>\n\n                        ${escapeHTML(\n                            doc.nama\n                        )}\n\n                    <\/h3>\n\n\n                    <div class=\"perpus-doc-meta\">\n\n                        <span>\n                            ${escapeHTML(\n                                doc.tahun\n                            )}\n                        <\/span>\n\n                        <span>\u2022<\/span>\n\n                        <span>\n                            Dokumen\n                        <\/span>\n\n                    <\/div>\n\n\n                    <div class=\"perpus-doc-actions\">\n\n                        <a\n                            href=\"${previewDrive(doc.fileId)}\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            class=\"perpus-doc-btn perpus-view\">\n\n                            Lihat\n\n                        <\/a>\n\n\n                        <a\n                            href=\"${downloadDrive(doc.fileId)}\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            class=\"perpus-doc-btn perpus-download\">\n\n                            Download\n\n                        <\/a>\n\n                    <\/div>\n\n                <\/div>\n\n            `;\n\n\n            const image =\n                card.querySelector(\n                    \".perpus-doc-cover img\"\n                );\n\n\n            image.addEventListener(\n                \"error\",\n                function(){\n\n                    image.style.display =\n                        \"none\";\n\n                }\n            );\n\n\n            documentGrid.appendChild(card);\n\n        }\n    );\n\n}\n\n\n\n\/* SEARCH *\/\n\nsearch.addEventListener(\n    \"input\",\n    function(){\n\n        const keyword =\n            this.value\n                .toLowerCase()\n                .trim();\n\n\n        const filtered =\n            data.dokumen.filter(\n                function(doc){\n\n                    return (\n                        doc.nama +\n                        \" \" +\n                        doc.kategori +\n                        \" \" +\n                        doc.tahun\n                    )\n                    .toLowerCase()\n                    .includes(keyword);\n\n                }\n            );\n\n\n        renderDocuments(filtered);\n\n    }\n);\n\n\n\n\/* RESET *\/\n\nreset.addEventListener(\n    \"click\",\n    function(){\n\n        search.value = \"\";\n\n        renderDocuments(\n            data.dokumen\n        );\n\n        search.focus();\n\n    }\n);\n\n\n\n\/* INITIAL *\/\n\nrenderDocuments(\n    data.dokumen\n);\n\n\n})();\n\n<\/script>\n\n<\/section>\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>PENGELOLA PERPUSTAKAAN PERPUS Pengelola UPT UNIT PELAKSANA TEKNIS PUSAT LITERASI IPTAR UPT PERPUSTAKAAN IPTAR Koleksi Referensi akademik Informasi Mudah ditemukan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"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":"","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-582","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/582","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=582"}],"version-history":[{"count":7,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/582\/revisions"}],"predecessor-version":[{"id":1333,"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/582\/revisions\/1333"}],"wp:attachment":[{"href":"https:\/\/iptar.ac.id\/index.php\/wp-json\/wp\/v2\/media?parent=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}