{"id":279,"date":"2026-03-04T10:00:49","date_gmt":"2026-03-04T10:00:49","guid":{"rendered":"https:\/\/lpm.stikes-hi.ac.id\/?page_id=279"},"modified":"2026-04-07T07:14:21","modified_gmt":"2026-04-07T07:14:21","slug":"profil-lpm","status":"publish","type":"page","link":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/profil-lpm\/","title":{"rendered":"Profil LPM"},"content":{"rendered":"\n<style>\n    \/* Keyframes untuk animasi masuk *\/\n    @keyframes fadeInUp {\n        from { \n            opacity: 0; \n            transform: translateY(20px); \n        }\n        to { \n            opacity: 1; \n            transform: translateY(0); \n        }\n    }\n\n    \/* Animasi khusus untuk logo *\/\n    @keyframes fadeInScale {\n        from { \n            opacity: 0; \n            transform: scale(0.9); \n        }\n        to { \n            opacity: 1; \n            transform: scale(1); \n        }\n    }\n\n    .lpm-wrapper {\n        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n        color: #333;\n        max-width: 950px;\n        margin: 15px auto;\n        padding: 10px;\n    }\n\n    \/* Container Logo *\/\n    .lpm-logo-container {\n        text-align: center;\n        margin-bottom: 30px;\n        animation: fadeInScale 0.8s ease-out forwards;\n    }\n\n    .lpm-logo-container img {\n        max-width: 150px; \/* Ukuran disesuaikan agar elegan *\/\n        height: auto;\n        display: inline-block;\n    }\n\n    .lpm-hero {\n        background: linear-gradient(135deg, #1a5dab 0%, #2980b9 100%);\n        color: white;\n        padding: 25px;\n        border-radius: 10px;\n        margin-bottom: 20px;\n        box-shadow: 0 4px 15px rgba(26, 93, 171, 0.2);\n        animation: fadeInUp 0.8s ease-out forwards;\n    }\n\n    .lpm-hero h2 {\n        margin: 0;\n        font-size: 1.6rem;\n        line-height: 1.2;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n    }\n\n    .lpm-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 20px;\n    }\n\n    .lpm-card {\n        background: #ffffff;\n        border: 1px solid #eef2f7;\n        padding: 25px;\n        border-radius: 12px;\n        box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        opacity: 0;\n        animation: fadeInUp 0.8s ease-out forwards;\n    }\n\n    .lpm-card:nth-child(1) { animation-delay: 0.2s; }\n    .lpm-card:nth-child(2) { animation-delay: 0.4s; }\n\n    .lpm-card-title {\n        color: #1a5dab;\n        font-weight: 800;\n        font-size: 1.1rem;\n        margin-bottom: 12px;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n\n    .lpm-card-title::before {\n        content: \"\";\n        width: 4px;\n        height: 18px;\n        background: #1a5dab;\n        display: inline-block;\n    }\n\n    .lpm-content {\n        font-size: 0.95rem;\n        line-height: 1.6;\n        text-align: justify;\n    }\n\n    @media (max-width: 768px) {\n        .lpm-grid { grid-template-columns: 1fr; }\n        .lpm-logo-container img { max-width: 120px; }\n    }\n<\/style>\n\n<div class=\"lpm-wrapper\">\n    <div class=\"lpm-logo-container\">\n        <img decoding=\"async\" src=\"https:\/\/new.stikes-hi.ac.id\/wp-content\/uploads\/2023\/02\/Logo-Kampus.png\" alt=\"Logo STIKES HI\">\n    <\/div>\n\n    <div class=\"lpm-grid\">\n        <div class=\"lpm-card\">\n            <div class=\"lpm-card-title\">Apa Itu LPM?<\/div>\n            <div class=\"lpm-content\">\n                LPM STIKES Harapan Ibu Jambi adalah unit struktural yang bertanggung jawab penuh dalam merencanakan, melaksanakan, dan mengevaluasi sistem penjaminan mutu di seluruh tingkat institusi. LPM memastikan standar pendidikan, penelitian, dan pengabdian masyarakat berjalan sesuai regulasi nasional.\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-card\" style=\"border-top: 4px solid #f39c12;\">\n            <div class=\"lpm-card-title\" style=\"color: #d35400;\">Komitmen Budaya Mutu<\/div>\n            <div class=\"lpm-content\">\n                Kami berdedikasi untuk terus menanamkan dan mengintegrasikan nilai-nilai mutu. Bagi kami, mutu bukanlah sebuah tujuan akhir, melainkan sebuah <strong>perbaikan yang berkelanjutan<\/strong> (<em>Continuous Quality Improvement<\/em>).\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<div class=\"lpm-swipe-container animate-entrance\">\n    <div class=\"lpm-cards-wrapper\" id=\"lpmAutoScroll\">\n        <div class=\"lpm-person-card\">\n            <div class=\"card-badge\">GKM Kesmas<\/div>\n            <img decoding=\"async\" src=\"https:\/\/scholar.googleusercontent.com\/citations?view_op=view_photo&#038;user=1_5N-fMAAAAJ&#038;citpid=1\" alt=\"Eti Kurniawati\" class=\"person-photo\">\n            <div class=\"person-info\">\n                <span class=\"name\">Eti Kurniawati, SKM., M.Kes.<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-person-card\">\n            <div class=\"card-badge\">GKM Farmasi<\/div>\n            <img decoding=\"async\" src=\"https:\/\/scholar.googleusercontent.com\/citations?view_op=view_photo&#038;user=RyBrcm4AAAAJ&#038;citpid=1\" alt=\"apt. Ruri Putri Mariska\" class=\"person-photo\">\n            <div class=\"person-info\">\n                <span class=\"name\">apt. Ruri Putri Mariska, M.Pharm. Sci<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-person-card highlight\">\n            <div class=\"card-badge\">Ketua LPM 2026-2030<\/div>\n            <img decoding=\"async\" src=\"https:\/\/scholar.googleusercontent.com\/citations?view_op=view_photo&#038;user=w4cXYtUAAAAJ&#038;citpid=1\" alt=\"Ns. Basok Buhari\" class=\"person-photo\">\n            <div class=\"person-info\">\n                <span class=\"name\">Ns. Basok Buhari, M.Kep<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-person-card\">\n            <div class=\"card-badge\">Sekretaris<\/div>\n            <img decoding=\"async\" src=\"https:\/\/scholar.googleusercontent.com\/citations?view_op=view_photo&#038;user=GtXMxowAAAAJ&#038;citpid=1\" alt=\"Deny Sutrisno\" class=\"person-photo\">\n            <div class=\"person-info\">\n                <span class=\"name\">Deny Sutrisno, M.Pd<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-person-card\">\n            <div class=\"card-badge\">GKM Keperawatan<\/div>\n            <img decoding=\"async\" src=\"https:\/\/scholar.googleusercontent.com\/citations?view_op=view_photo&#038;user=QGIYzE8AAAAJ&#038;citpid=1\" alt=\"Ns. Dian Octavia\" class=\"person-photo\">\n            <div class=\"person-info\">\n                <span class=\"name\">Ns. Dian Octavia, S.Kep., MNS<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-person-card sk-card\">\n            <div class=\"sk-content\">\n                <span class=\"sk-icon\">\ud83d\udcc4<\/span>\n                <p>SK Pengangkatan LPM<\/p>\n                <a href=\"https:\/\/drive.google.com\/drive\/folders\/1D5ZV3iW8hn7fAgx1GYgHsDbdtTuIFfbj\" target=\"_blank\" class=\"lpm-btn-swipe\">Buka Dokumen<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    @keyframes entranceFadeUp {\n        from { opacity: 0; transform: translateY(20px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    .animate-entrance {\n        animation: entranceFadeUp 0.8s ease-out forwards;\n    }\n\n    .lpm-swipe-container {\n        width: 100%;\n        max-width: 850px;\n        margin: 20px auto;\n        font-family: 'Inter', system-ui, sans-serif;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .lpm-cards-wrapper {\n        display: flex;\n        gap: 16px;\n        padding: 15px 15px 30px;\n        overflow-x: auto;\n        cursor: grab;\n        scroll-behavior: auto; \n        scrollbar-width: none;\n        -ms-overflow-style: none;\n    }\n\n    .lpm-cards-wrapper::-webkit-scrollbar {\n        display: none;\n    }\n\n    .lpm-person-card {\n        flex: 0 0 200px;\n        background: #fff;\n        border-radius: 20px;\n        padding: 25px 20px;\n        border: 1px solid #e2e8f0;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.03);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        transition: transform 0.3s ease;\n        user-select: none;\n    }\n\n    .lpm-person-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 12px 25px rgba(30, 58, 138, 0.12);\n    }\n\n    .lpm-person-card.highlight {\n        background: #f0f7ff;\n        border-color: #3b82f6;\n    }\n\n    .card-badge {\n        font-size: 0.65rem; font-weight: 800;\n        background: #e2e8f0; color: #475569;\n        padding: 4px 10px; border-radius: 50px;\n        margin-bottom: 20px; text-transform: uppercase;\n    }\n    .highlight .card-badge { background: #3b82f6; color: #fff; }\n    .person-photo {\n        width: 85px; height: 85px; border-radius: 50%;\n        object-fit: cover; margin-bottom: 18px;\n        border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n    }\n    .person-info .name {\n        font-weight: 700; color: #1e293b; font-size: 0.95rem;\n        line-height: 1.4; min-height: 2.8rem;\n        display: flex; align-items: center; justify-content: center;\n    }\n    .sk-card {\n        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);\n        border: none; color: #fff; justify-content: center;\n    }\n    .sk-icon { font-size: 2.5rem; display: block; margin-bottom: 10px; }\n    .sk-content p { font-size: 0.85rem; font-weight: 600; margin-bottom: 15px; }\n    .lpm-btn-swipe {\n        display: inline-block; padding: 8px 16px;\n        background: #fff; color: #1e3a8a; text-decoration: none;\n        border-radius: 10px; font-weight: 700; font-size: 0.8rem;\n    }\n\n    @media (max-width: 480px) {\n        .lpm-person-card { flex: 0 0 180px; }\n    }\n<\/style>\n\n<script>\n    const scrollContainer = document.getElementById('lpmAutoScroll');\n    let isPaused = false;\n    let direction = 1; \n    let speed = 0.8; \n\n    function startPingPongScroll() {\n        setInterval(() => {\n            if (!isPaused) {\n                let currentScroll = scrollContainer.scrollLeft;\n                let maxScroll = scrollContainer.scrollWidth - scrollContainer.clientWidth;\n\n                if (currentScroll >= maxScroll - 1) {\n                    direction = -1;\n                } \n                else if (currentScroll <= 0) {\n                    direction = 1;\n                }\n                scrollContainer.scrollLeft += direction * speed;\n            }\n        }, 20); \n    }\n\n    scrollContainer.addEventListener('mousedown', () => isPaused = true);\n    scrollContainer.addEventListener('touchstart', () => isPaused = true);\n    \n    const resumeAction = () => {\n        setTimeout(() => { isPaused = false; }, 1000);\n    };\n\n    window.addEventListener('mouseup', resumeAction);\n    scrollContainer.addEventListener('touchend', resumeAction);\n\n    window.onload = startPingPongScroll;\n<\/script>\n\n\n\n<div class=\"lpm-org-wrapper scroll-reveal\">\n    <div class=\"lpm-content-container\">\n        <div class=\"lpm-static-header\">\n            <span class=\"icon\">\ud83d\udcca<\/span>\n            <span class=\"title\">Struktur Organisasi LPM<\/span>\n        <\/div>\n\n        <div class=\"lpm-static-content\">\n            <div class=\"org-inner-card\">\n                <div class=\"stikes-mini-chart\">\n                    \n                    <a href=\"#\" class=\"node-mini delay-1\">\n                        <span style=\"margin-right:6px;\">\ud83c\udfdb\ufe0f<\/span> Ketua STIKES HI\n                    <\/a>\n\n                    <div class=\"connector-v delay-2\"><\/div>\n\n                    <div class=\"row-mid delay-3\">\n                        <a href=\"#\" class=\"node-mini\">\n                            <span style=\"margin-right:6px;\">\ud83d\udc64<\/span> Ketua LPM\n                        <\/a>\n                        \n                        <div class=\"h-line\"><\/div>\n                        \n                        <a href=\"#\" class=\"node-mini node-sek\">\n                            <span style=\"margin-right:6px;\">\ud83d\udcdd<\/span> Sekretaris LPM\n                        <\/a>\n                    <\/div>\n\n                    <div class=\"connector-v delay-4\"><\/div>\n\n                    <a href=\"#\" class=\"node-mini delay-5\" style=\"background: linear-gradient(135deg, #475569 0%, #94a3b8 100%);\">\n                        <span style=\"margin-right:6px;\">\ud83d\udee1\ufe0f<\/span> Gugus Kendali Mutu\n                    <\/a>\n\n                    <div class=\"sk-divider delay-6\"><\/div>\n                    \n                    <a href=\"https:\/\/drive.google.com\/file\/d\/1vRGJwyLbaIHzikbCfDNlM0JKkPNu-IS5\/view?usp=drivesdk\" target=\"_blank\" class=\"lpm-btn-sk-style delay-7\">\n                        <span style=\"margin-right:8px;\">\ud83d\udcc4<\/span> SK Pengelola LPM 2026-2030\n                    <\/a>\n\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    \/* Animasi Utama: Muncul & Naik *\/\n    @keyframes revealUp {\n        0% { \n            opacity: 0; \n            transform: translateY(40px); \n        }\n        100% { \n            opacity: 1; \n            transform: translateY(0); \n        }\n    }\n\n    .lpm-org-wrapper {\n        width: 100%;\n        max-width: 700px; \n        margin: 40px auto;\n        font-family: 'Inter', system-ui, sans-serif;\n        opacity: 0; \/* Sembunyi sebelum scroll sampai *\/\n        transition: opacity 0.3s ease;\n    }\n\n    \/* Class yang akan ditambahkan oleh JavaScript saat scroll sampai *\/\n    .lpm-org-wrapper.is-visible {\n        opacity: 1;\n    }\n\n    .lpm-org-wrapper.is-visible .lpm-static-header,\n    .lpm-org-wrapper.is-visible .node-mini, \n    .lpm-org-wrapper.is-visible .connector-v, \n    .lpm-org-wrapper.is-visible .row-mid, \n    .lpm-org-wrapper.is-visible .sk-divider, \n    .lpm-org-wrapper.is-visible .lpm-btn-sk-style {\n        animation: revealUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n\n    .lpm-content-container {\n        background: #fff;\n        border: 1px solid #e2e8f0;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(30, 58, 138, 0.08);\n    }\n\n    .lpm-static-header {\n        padding: 25px 20px;\n        background: #fcfdfe;\n        border-bottom: 1px solid #f1f5f9;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n\n    .lpm-static-header .title { \n        font-weight: 800; \n        color: #1e3a8a; \n        font-size: 18px;\n    }\n\n    \/* Styling Visual Chart *\/\n    .stikes-mini-chart {\n        display: flex; flex-direction: column;\n        align-items: flex-start; padding: 40px 60px;\n    }\n\n    .node-mini {\n        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);\n        color: white !important; padding: 10px 18px;\n        border-radius: 50px; text-decoration: none !important;\n        font-size: 11px; font-weight: 700; width: 180px;\n        display: flex; align-items: center; justify-content: center;\n        opacity: 0; text-transform: uppercase;\n    }\n\n    .node-sek { background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%); }\n\n    .lpm-btn-sk-style {\n        display: inline-flex; align-items: center;\n        padding: 10px 18px; border: 1.5px solid #3b82f6;\n        border-radius: 8px; color: #3b82f6 !important;\n        text-decoration: none !important; font-size: 13px;\n        font-weight: 600; opacity: 0;\n    }\n\n    .lpm-btn-sk-style:hover { background: #3b82f6; color: #fff !important; }\n\n    .row-mid { display: flex; align-items: center; opacity: 0; width: 100%; }\n    .h-line { width: 30px; height: 2px; background: #e2e8f0; }\n    .connector-v { width: 2px; height: 25px; background: #e2e8f0; margin-left: 90px; opacity: 0; }\n    .sk-divider { width: 100%; height: 1px; background: #f1f5f9; margin: 25px 0 15px 0; opacity: 0; }\n\n    \/* Delays agar elemen muncul berurutan (Waterfall effect) *\/\n    .delay-1 { animation-delay: 0.2s !important; }\n    .delay-2 { animation-delay: 0.3s !important; }\n    .delay-3 { animation-delay: 0.4s !important; }\n    .delay-4 { animation-delay: 0.5s !important; }\n    .delay-5 { animation-delay: 0.6s !important; }\n    .delay-6 { animation-delay: 0.7s !important; }\n    .delay-7 { animation-delay: 0.8s !important; }\n\n    @media (max-width: 550px) {\n        .stikes-mini-chart { padding: 30px 20px; align-items: center; }\n        .connector-v { margin-left: 0; }\n        .row-mid { flex-direction: column; gap: 10px; }\n        .h-line { display: none; }\n    }\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const observerOptions = {\n        threshold: 0.2 \/\/ Animasi jalan saat 20% elemen masuk ke layar\n    };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('is-visible');\n                \/\/ Berhenti mengamati setelah elemen muncul (opsional)\n                observer.unobserve(entry.target);\n            }\n        });\n    }, observerOptions);\n\n    const target = document.querySelector('.scroll-reveal');\n    if (target) observer.observe(target);\n});\n<\/script>\n\n\n\n<div class=\"lpm-tugas-wrapper scroll-reveal\">\n    <div class=\"lpm-static-container\">\n        <div class=\"lpm-static-header\">\n            <div class=\"header-content\">\n                <span class=\"icon\">\ud83d\udccb<\/span>\n                <span class=\"title\">Tugas Pokok dan Fungsi<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-static-body\">\n            <div class=\"tugas-inner-card\">\n                <div class=\"content-body\">\n                    <div class=\"content-section delay-1\">\n                        <span class=\"section-label-no-h\">Tugas Pokok LPM<\/span>\n                        <p>Merencanakan, menerapkan, mengendalikan, dan mengembangkan sistem penjaminan mutu akademik serta bertanggung jawab atas peningkatan mutu secara berencana dan berkelanjutan.<\/p>\n                    <\/div>\n                    \n                    <div class=\"content-divider delay-2\"><\/div>\n\n                    <div class=\"content-section delay-3\">\n                        <span class=\"section-label-no-h\">Fungsi LPM<\/span>\n                        <ul class=\"compact-list\">\n                            <li>Perumusan kebijakan dan standar mutu akademik program studi.<\/li>\n                            <li>Pelaksanaan standar mutu sesuai manual mutu yang berlaku.<\/li>\n                            <li>Pengembangan sistem monitoring dan evaluasi (Monev) akademik.<\/li>\n                            <li>Pelaporan hasil Monev dan rekomendasi tertulis kepada Ketua.<\/li>\n                            <li>Analisis tindak lanjut hasil monitoring dan evaluasi.<\/li>\n                            <li>Pemberian rekomendasi perbaikan sasaran program studi.<\/li>\n                            <li>Pelaksanaan tugas kedinasan lain dari Ketua.<\/li>\n                        <\/ul>\n                    <\/div>\n\n                    <div class=\"delay-4\">\n                        <a href=\"https:\/\/drive.google.com\/file\/d\/1_JJPVc0-ArSVV0fGdVB791pDHNFM5qAL\/view?usp=drivesdk\" target=\"_blank\" class=\"lpm-btn-sk-otk\">\n                            <span style=\"margin-right:8px;\">\ud83d\udcc1<\/span> SK Organisasi dan Tata Kerja\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    \/* Animasi Utama *\/\n    @keyframes revealUp {\n        0% { opacity: 0; transform: translateY(30px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n\n    .lpm-tugas-wrapper {\n        width: 100%;\n        max-width: 700px;\n        margin: 30px auto;\n        font-family: 'Inter', system-ui, sans-serif;\n        \/* Perubahan di sini: Pastikan tetap tampil jika JS gagal *\/\n        opacity: 0; \n        transition: opacity 0.4s ease-out;\n    }\n\n    \/* Pemicu animasi *\/\n    .scroll-reveal.is-visible {\n        opacity: 1 !important;\n    }\n\n    .is-visible .lpm-static-header,\n    .is-visible .content-section, \n    .is-visible .content-divider, \n    .is-visible .delay-4 {\n        animation: revealUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n    }\n\n    \/* CSS Styling tetap dipertahankan *\/\n    .lpm-static-container {\n        background: #fff;\n        border: 1px solid #e2e8f0;\n        border-radius: 12px;\n        overflow: hidden;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);\n    }\n    .lpm-static-header { padding: 20px 25px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }\n    .lpm-static-header .title { font-weight: 800; color: #1e3a8a; font-size: 16px; }\n    .content-body { padding: 25px; }\n    .section-label-no-h { display: block; margin-bottom: 10px; color: #3b82f6; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }\n    .content-body p, .compact-list li { color: #475569; font-size: 0.95rem; line-height: 1.6; }\n    .compact-list { list-style: none; padding: 0; margin: 0; }\n    .compact-list li { padding-left: 20px; position: relative; margin-bottom: 10px; }\n    .compact-list li::before { content: \"\u2022\"; position: absolute; left: 0; color: #3b82f6; font-weight: bold; }\n    .content-divider { height: 1px; background: #f1f5f9; margin: 20px 0; }\n    .lpm-btn-sk-otk { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 12px 20px; border: 1.5px solid #3b82f6; border-radius: 8px; color: #3b82f6 !important; text-decoration: none !important; font-size: 13px; font-weight: 600; transition: 0.3s; }\n    .lpm-btn-sk-otk:hover { background: #3b82f6; color: #fff !important; }\n\n    \/* Delay *\/\n    .delay-1 { animation-delay: 0.1s; }\n    .delay-2 { animation-delay: 0.2s; }\n    .delay-3 { animation-delay: 0.3s; }\n    .delay-4 { animation-delay: 0.4s; }\n\n    @media (max-width: 600px) { .lpm-btn-sk-otk { width: 100%; } }\n<\/style>\n\n<script>\n(function() {\n    function initScrollReveal() {\n        const targets = document.querySelectorAll('.scroll-reveal');\n        \n        const observerOptions = {\n            threshold: 0.1, \/\/ Muncul saat 10% elemen terlihat\n            rootMargin: '0px 0px -50px 0px' \/\/ Sedikit offset agar lebih mulus\n        };\n\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('is-visible');\n                    observer.unobserve(entry.target); \n                }\n            });\n        }, observerOptions);\n\n        targets.forEach(t => observer.observe(t));\n    }\n\n    \/\/ Jalankan saat DOM siap\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initScrollReveal);\n    } else {\n        initScrollReveal();\n    }\n})();\n<\/script>\n\n\n\n<div class=\"lpm-skema-wrapper scroll-reveal\">\n    <div class=\"lpm-static-container\">\n        <div class=\"lpm-static-header\">\n            <div class=\"header-content\">\n                <span class=\"icon\">\u2699\ufe0f<\/span>\n                <span class=\"title\">Skema Penjaminan Mutu<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-static-body\">\n            <div class=\"skema-inner-card\">\n                <div class=\"skema-body\">\n                    \n                    <div class=\"spm-mini-container\">\n                        <div class=\"spm-main-box delay-1\">\n                            <div class=\"spm-title-mini\">SPM Dikti<\/div>\n                            \n                            <div class=\"spm-bar purple\">Standar Pendidikan Tinggi (Standar Dikti)<\/div>\n\n                            <div class=\"spm-middle\">\n                                <div class=\"spm-box blue-dark\">\n                                    Sistem Penjaminan Mutu Internal (SPMI)\n                                <\/div>\n\n                                <div class=\"arrow-center\">\u2794<\/div>\n\n                                <div class=\"spm-box blue-light\">\n                                    Sistem Penjaminan Mutu Eksternal (SPME)\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"connector-area\">\n                                <div class=\"double-arrow\">\u21c5<\/div>\n                                <div class=\"double-arrow\">\u21c5<\/div>\n                            <\/div>\n\n                            <div class=\"spm-bar navy\">Pangkalan Data Pendidikan Tinggi (PD Dikti)<\/div>\n                        <\/div>\n\n                        <div class=\"arrow-final delay-2\">\u2794<\/div>\n\n                        <div class=\"mutu-circle delay-3\">\n                            <div class=\"m-large\">M<\/div>\n                            <div class=\"m-text\">MUTU<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"btn-action-container delay-4\">\n                        <a href=\"https:\/\/drive.google.com\/file\/d\/1InugcbCcQpKtzI4YjjQ7dROgzStS-yAn\/view?usp=drivesdk\" target=\"_blank\" class=\"lpm-btn-outline\">\n                            <span style=\"margin-right:8px;\">\ud83d\udcd8<\/span> Kebijakan Mutu 2025\n                        <\/a>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    \/* Animasi Utama: Muncul & Naik *\/\n    @keyframes revealUp {\n        0% { \n            opacity: 0; \n            transform: translateY(40px); \n        }\n        100% { \n            opacity: 1; \n            transform: translateY(0); \n        }\n    }\n\n    .lpm-skema-wrapper {\n        width: 100%;\n        max-width: 750px;\n        margin: 30px auto;\n        font-family: 'Inter', system-ui, sans-serif;\n        opacity: 0; \/* Sembunyi awal *\/\n        transition: opacity 0.5s ease;\n    }\n\n    \/* Pemicu animasi saat scroll sampai *\/\n    .lpm-skema-wrapper.is-visible {\n        opacity: 1;\n    }\n\n    .lpm-skema-wrapper.is-visible .lpm-static-header,\n    .lpm-skema-wrapper.is-visible .spm-main-box, \n    .lpm-skema-wrapper.is-visible .arrow-final, \n    .lpm-skema-wrapper.is-visible .mutu-circle, \n    .lpm-skema-wrapper.is-visible .btn-action-container {\n        animation: revealUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n\n    .lpm-static-container {\n        background: #fff;\n        border: 1px solid #e2e8f0;\n        border-radius: 12px;\n        overflow: hidden;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);\n    }\n\n    .lpm-static-header {\n        padding: 20px 25px;\n        background: #f8fafc;\n        border-bottom: 1px solid #f1f5f9;\n    }\n\n    .lpm-static-header .title { \n        font-weight: 800; \n        color: #1e3a8a; \n        font-size: 16px; \n    }\n\n    .skema-body { padding: 40px 20px; }\n\n    \/* Diagram Styles *\/\n    .spm-mini-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 15px;\n        width: 100%;\n        margin-bottom: 25px;\n    }\n\n    .spm-main-box {\n        background-color: #d1e9ff;\n        border: 2px solid #8eb9ff;\n        border-radius: 20px;\n        padding: 20px;\n        flex: 1;\n        max-width: 500px;\n        position: relative;\n        opacity: 0;\n    }\n\n    .spm-title-mini {\n        text-align: center; font-weight: 800; color: #1e40af;\n        margin-bottom: 12px; font-size: 16px; text-transform: uppercase;\n    }\n\n    .spm-bar { text-align: center; color: white; padding: 8px; border-radius: 6px; font-size: 11px; font-weight: bold; }\n    .purple { background-color: #8b5cf6; border: 1px solid #6d28d9; }\n    .navy { background-color: #1e3a8a; border: 1px solid #0f172a; }\n\n    .spm-middle { display: flex; align-items: center; justify-content: space-between; margin: 15px 0 5px 0; gap: 10px; }\n    .spm-box { flex: 1; height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; padding: 10px; border-radius: 12px; font-size: 10px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }\n    .blue-dark { background-color: #2563eb; }\n    .blue-light { background-color: #3b82f6; }\n\n    .arrow-center { color: #f59e0b; font-size: 24px; font-weight: bold; }\n    .connector-area { display: flex; justify-content: space-around; color: #f59e0b; font-size: 20px; margin-top: -5px; font-weight: bold; }\n    .double-arrow { width: 40px; text-align: center; }\n    \n    .arrow-final { color: #f59e0b; font-size: 35px; font-weight: bold; opacity: 0; }\n\n    .mutu-circle {\n        width: 110px; height: 110px;\n        background: radial-gradient(circle, #3b82f6, #1e3a8a);\n        border-radius: 50%;\n        display: flex; flex-direction: column; align-items: center; justify-content: center;\n        color: white; border: 4px solid #fff; box-shadow: 0 4px 15px rgba(30, 58, 138, 0.2);\n        opacity: 0;\n    }\n\n    .m-large { font-size: 50px; font-weight: 900; line-height: 1; }\n    .m-text { font-size: 11px; font-weight: bold; letter-spacing: 1px; }\n\n    .btn-action-container { \n        display: flex; \n        justify-content: flex-start; \n        width: 100%; \n        margin-top: 20px; \n        opacity: 0;\n    }\n\n    .lpm-btn-outline {\n        display: inline-flex; align-items: center; justify-content: center;\n        padding: 10px 22px; border: 1.5px solid #3b82f6; border-radius: 8px;\n        color: #3b82f6 !important; text-decoration: none !important;\n        font-size: 13px; font-weight: 600; transition: 0.3s;\n    }\n    .lpm-btn-outline:hover { background: #3b82f6; color: #fff !important; transform: translateY(-2px); }\n\n    \/* Delays Waterfall *\/\n    .delay-1 { animation-delay: 0.2s !important; }\n    .delay-2 { animation-delay: 0.4s !important; }\n    .delay-3 { animation-delay: 0.6s !important; }\n    .delay-4 { animation-delay: 0.8s !important; }\n\n    @media (max-width: 650px) {\n        .spm-mini-container { flex-direction: column; padding: 10px; }\n        .arrow-final { transform: rotate(90deg); margin: 5px 0; }\n        .spm-main-box { width: 100%; }\n        .lpm-btn-outline { width: 100%; }\n        .btn-action-container { justify-content: center; }\n    }\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const observerOptions = {\n        threshold: 0.15 \n    };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('is-visible');\n                observer.unobserve(entry.target); \n            }\n        });\n    }, observerOptions);\n\n    const target = document.querySelector('.scroll-reveal');\n    if (target) observer.observe(target);\n});\n<\/script>\n\n\n\n<div class=\"news-slider-container\">\n    <div class=\"news-slider\" id=\"newsSlider\">\n        <div style=\"padding: 30px; text-align: center; width: 100%; color: #94a3b8; font-size: 12px;\">Memuat berita terbaru&#8230;<\/div>\n    <\/div>\n\n    <div class=\"slider-controls\">\n        <button class=\"nav-btn btn-visible\" onclick=\"moveSlide(-1)\" aria-label=\"Previous\">\n            <span class=\"nav-symbol\">&lt;&lt;<\/span>\n        <\/button>\n        \n        <div class=\"dots-container\" id=\"dotsContainer\"><\/div>\n        \n        <button class=\"nav-btn btn-visible\" onclick=\"moveSlide(1)\" aria-label=\"Next\">\n            <span class=\"nav-symbol\">&gt;&gt;<\/span>\n        <\/button>\n    <\/div>\n<\/div>\n\n<style>\n    .news-slider-container {\n        position: relative;\n        max-width: 700px;\n        margin: 10px auto;\n        overflow: hidden;\n        border-radius: 12px;\n        background: #fff;\n        border: 1px solid #e2e8f0;\n        font-family: 'Inter', -apple-system, sans-serif;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    }\n\n    .news-slider {\n        display: flex;\n        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n    }\n\n    .news-slide {\n        min-width: 100%;\n        display: flex;\n        flex-direction: column;\n    }\n\n    .news-slide img {\n        width: 100%;\n        height: 300px;\n        object-fit: cover;\n        background: #f1f5f9;\n    }\n\n    .news-caption {\n        padding: 20px;\n        background: #fff;\n    }\n\n    .news-caption h3 { \n        margin: 0 0 8px; \n        font-size: 16px; \n        line-height: 1.4;\n        font-weight: 700;\n        color: #1e293b;\n    }\n    \n    .news-caption p { \n        margin: 0 0 15px; \n        font-size: 13px;\n        line-height: 1.6;\n        color: #475569;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n\n    .read-more {\n        display: inline-block;\n        padding: 8px 16px;\n        background: #1e3a8a; \/* Biru Tua *\/\n        color: #fff !important;\n        text-decoration: none !important;\n        border-radius: 6px;\n        font-size: 12px;\n        font-weight: 600;\n        transition: 0.3s;\n    }\n\n    .read-more:hover {\n        background: #172554;\n        box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);\n    }\n\n    .slider-controls {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 12px 20px;\n        border-top: 1px solid #f1f5f9;\n        background: #fcfcfc;\n    }\n\n    .nav-btn.btn-visible {\n        background: #1e3a8a;\n        border: none;\n        width: 40px;\n        height: 36px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        border-radius: 8px;\n    }\n\n    .nav-symbol { color: #ffffff; font-size: 14px; font-weight: bold; }\n\n    .dots-container { display: flex; gap: 8px; }\n\n    .dot {\n        height: 8px; \n        width: 8px;\n        background-color: #cbd5e1; \n        border-radius: 50%;\n        cursor: pointer;\n        transition: 0.3s;\n    }\n\n    .dot.active { \n        background-color: #1e3a8a;\n        width: 20px; \n        border-radius: 10px; \n    }\n\n    @media (max-width: 600px) {\n        .news-slide img { height: 200px; }\n        .news-caption h3 { font-size: 14px; }\n    }\n<\/style>\n\n<script>\n    let currentSlide = 0;\n    let totalSlides = 0;\n    const slider = document.getElementById('newsSlider');\n    const dotsContainer = document.getElementById('dotsContainer');\n\n    async function fetchNews() {\n        try {\n            \/\/ UPDATED: ID kategori sekarang diubah menjadi 21\n            const apiUrl = 'https:\/\/lpm.stikes-hi.ac.id\/wp-json\/wp\/v2\/posts?categories=21&_embed&per_page=5';\n            \n            const response = await fetch(apiUrl);\n            if (!response.ok) throw new Error('Network response was not ok');\n            \n            const posts = await response.json();\n\n            if (posts && posts.length > 0) {\n                slider.innerHTML = '';\n                dotsContainer.innerHTML = '';\n                totalSlides = posts.length;\n\n                posts.forEach((post, i) => {\n                    let imageUrl = 'https:\/\/via.placeholder.com\/800x450\/f1f5f9\/64748b?text=STIKES+HI+JAMBI';\n                    \n                    try {\n                        if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n                            imageUrl = post._embedded['wp:featuredmedia'][0].source_url;\n                        } else if (post.content.rendered.includes('<img')) {\n                            const div = document.createElement('div');\n                            div.innerHTML = post.content.rendered;\n                            const firstImg = div.querySelector('img');\n                            if (firstImg) imageUrl = firstImg.src;\n                        }\n                    } catch (e) { console.error(\"Error parsing image\", e); }\n\n                    const cleanTitle = post.title.rendered\n                        .replace(\/&nbsp;\/g, ' ')\n                        .replace(\/&amp;\/g, '&#038;')\n                        .replace(\/&#8211;\/g, '-')\n                        .replace(\/&#8217;\/g, \"'\")\n                        .replace(\/&#8220;\/g, '\"')\n                        .replace(\/&#8221;\/g, '\"');\n                        \n                    const excerpt = post.excerpt.rendered.replace(\/<[^>]*>?\/gm, '').substring(0, 100) + '...';\n\n                    const slide = document.createElement('div');\n                    slide.classList.add('news-slide');\n                    slide.innerHTML = `\n                        <img decoding=\"async\" src=\"${imageUrl}\" alt=\"${cleanTitle}\" onerror=\"this.src='https:\/\/via.placeholder.com\/800x450\/f1f5f9\/64748b?text=Berita+STIKES+HI'\">\n                        <div class=\"news-caption\">\n                            <h3>${cleanTitle}<\/h3>\n                            <p>${excerpt}<\/p>\n                            <a href=\"${post.link}\" class=\"read-more\" target=\"_blank\">Baca Selengkapnya<\/a>\n                        <\/div>\n                    `;\n                    slider.appendChild(slide);\n\n                    const dot = document.createElement('span');\n                    dot.classList.add('dot');\n                    if (i === 0) dot.classList.add('active');\n                    dot.onclick = () => goToSlide(i);\n                    dotsContainer.appendChild(dot);\n                });\n            } else {\n                slider.innerHTML = '<div style=\"padding: 40px; text-align: center; width: 100%; color: #64748b;\">Belum ada berita terbaru di kategori ini.<\/div>';\n            }\n        } catch (error) {\n            console.error('Error:', error);\n            slider.innerHTML = '<div style=\"padding: 40px; text-align: center; width: 100%; color: #ef4444;\">Gagal memuat berita.<\/div>';\n        }\n    }\n\n    function updateDots() {\n        const dots = document.querySelectorAll('.dot');\n        dots.forEach((dot, i) => {\n            dot.classList.toggle('active', i === currentSlide);\n        });\n    }\n\n    function moveSlide(step) {\n        if (totalSlides === 0) return;\n        currentSlide = (currentSlide + step + totalSlides) % totalSlides;\n        slider.style.transform = `translateX(-${currentSlide * 100}%)`;\n        updateDots();\n    }\n\n    function goToSlide(index) {\n        currentSlide = index;\n        slider.style.transform = `translateX(-${currentSlide * 100}%)`;\n        updateDots();\n    }\n\n    fetchNews();\n\n    let autoSlide = setInterval(() => moveSlide(1), 7000);\n    document.querySelector('.news-slider-container').addEventListener('mouseenter', () => clearInterval(autoSlide));\n    document.querySelector('.news-slider-container').addEventListener('mouseleave', () => {\n        autoSlide = setInterval(() => moveSlide(1), 7000);\n    });\n<\/script>\n\n\n\n<div class=\"lpm-history-wrapper scroll-reveal\">\n    <div class=\"lpm-static-container\">\n        <div class=\"lpm-static-header\">\n            <div class=\"header-content\">\n                <span class=\"icon\">\ud83d\udcdc<\/span>\n                <span class=\"title\">Perkembangan Kami<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"lpm-static-body\">\n            <div class=\"history-inner-card\">\n                <div class=\"h-timeline-wrapper\">\n                    <div class=\"h-items-grid\">\n                        <div class=\"h-item delay-1\" style=\"--accent: #1e3a8a;\">\n                            <div class=\"h-header\">\n                                <div class=\"h-year\">2016<\/div>\n                                <div class=\"h-line\"><\/div>\n                            <\/div>\n                            <div class=\"h-body\">\n                                <span class=\"tag\">Pondasi<\/span>\n                                <h4>Pembuatan SOP<\/h4>\n                                <p>Inisiasi penyusunan SOP tata kelola kerja.<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"h-item delay-2\" style=\"--accent: #1e40af;\">\n                            <div class=\"h-header\">\n                                <div class=\"h-year\">2017<\/div>\n                                <div class=\"h-line\"><\/div>\n                            <\/div>\n                            <div class=\"h-body\">\n                                <span class=\"tag\">Standarisasi<\/span>\n                                <h4>Dokumen SPMI<\/h4>\n                                <p>Kebijakan, Manual, Standar, &#038; Formulir.<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"h-item delay-3\" style=\"--accent: #0284c7;\">\n                            <div class=\"h-header\">\n                                <div class=\"h-year\">2018<\/div>\n                                <div class=\"h-line\"><\/div>\n                            <\/div>\n                            <div class=\"h-body\">\n                                <span class=\"tag\">Milestone<\/span>\n                                <h4>Monev Pertama<\/h4>\n                                <p>Monitoring dan Evaluasi akademik.<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"h-item delay-4\" style=\"--accent: #059669;\">\n                            <div class=\"h-header\">\n                                <div class=\"h-year\">2019<\/div>\n                                <div class=\"h-line\"><\/div>\n                            <\/div>\n                            <div class=\"h-body\">\n                                <span class=\"tag\">Audit<\/span>\n                                <h4>AMI Pertama<\/h4>\n                                <p>Audit Mutu Internal menyeluruh.<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"h-item delay-5\" style=\"--accent: #7c3aed;\">\n                            <div class=\"h-header\">\n                                <div class=\"h-year\">2023<\/div>\n                                <div class=\"h-line\"><\/div>\n                            <\/div>\n                            <div class=\"h-body\">\n                                <span class=\"tag\">Inovasi<\/span>\n                                <h4>Aplikasi AMI<\/h4>\n                                <p>Digitalisasi proses AMI via aplikasi.<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"h-item delay-6\" style=\"--accent: #db2777;\">\n                            <div class=\"h-header\">\n                                <div class=\"h-year\">2026<\/div>\n                                <div class=\"h-line\"><\/div>\n                            <\/div>\n                            <div class=\"h-body\">\n                                <span class=\"tag\">Masa Depan<\/span>\n                                <h4>Digitalisasi Penuh<\/h4>\n                                <p>Target integrasi data digital penuh.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"lpm-jargon-inline delay-7\">\n                        <div class=\"jargon-container\">\n                            <div class=\"arrow-curve\">\n                                <div class=\"arrow-head\"><\/div>\n                            <\/div>\n                            <p class=\"jargon-text\">\n                                Tumbuhnya kapasitas perencanaan, meningkatnya akuntabilitas, transparansi &#038; efisiensi\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    \/* Animasi Utama: Muncul & Naik *\/\n    @keyframes revealUp {\n        0% { \n            opacity: 0; \n            transform: translateY(40px); \n        }\n        100% { \n            opacity: 1; \n            transform: translateY(0); \n        }\n    }\n\n    .lpm-history-wrapper {\n        width: 100%;\n        max-width: 700px;\n        margin: 30px auto;\n        font-family: 'Inter', system-ui, sans-serif;\n        opacity: 0; \/* Sembunyi awal *\/\n        transition: opacity 0.5s ease;\n    }\n\n    \/* Pemicu animasi via JS *\/\n    .lpm-history-wrapper.is-visible {\n        opacity: 1;\n    }\n\n    .lpm-history-wrapper.is-visible .lpm-static-header,\n    .lpm-history-wrapper.is-visible .h-item, \n    .lpm-history-wrapper.is-visible .lpm-jargon-inline {\n        animation: revealUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n\n    .lpm-static-container {\n        background: #fff;\n        border: 1px solid #e2e8f0;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 10px 25px rgba(30, 58, 138, 0.05);\n    }\n\n    .lpm-static-header {\n        padding: 20px 25px;\n        background: #f8fafc;\n        border-bottom: 1px solid #f1f5f9;\n    }\n\n    .lpm-static-header .title { \n        font-weight: 800; \n        color: #1e3a8a; \n        font-size: 16px; \n    }\n\n    .history-inner-card { position: relative; padding-left: 6px; }\n    .history-inner-card::before {\n        content: \"\"; position: absolute;\n        left: 0; top: 0; bottom: 0;\n        width: 6px;\n        background: linear-gradient(to bottom, #1e3a8a, #3b82f6);\n    }\n\n    .h-timeline-wrapper { padding: 30px 25px; }\n\n    .h-items-grid {\n        display: flex; flex-wrap: wrap;\n        gap: 15px; margin-bottom: 20px;\n    }\n\n    .h-item { \n        flex: 1 1 200px; display: flex; flex-direction: column; \n        opacity: 0;\n    }\n    \n    .h-header { display: flex; align-items: center; margin-bottom: 8px; }\n    .h-year {\n        font-size: 24px; font-weight: 900;\n        color: var(--accent); letter-spacing: -1px;\n        line-height: 1; margin-right: 10px;\n    }\n\n    .h-line { height: 2px; background: #f1f5f9; flex-grow: 1; }\n    .h-body {\n        padding: 12px; background: #fcfcfc; border-radius: 12px;\n        border: 1px solid #f1f5f9; height: 100%;\n    }\n\n    .tag {\n        font-size: 9px; font-weight: 800; color: var(--accent);\n        text-transform: uppercase; background: #fff;\n        padding: 1px 6px; border-radius: 4px; border: 1px solid var(--accent);\n    }\n\n    .h-body h4 { margin: 6px 0 3px; font-size: 13px; color: #1e293b; font-weight: 700; }\n    .h-body p { margin: 0; font-size: 11px; color: #64748b; line-height: 1.4; }\n\n    .lpm-jargon-inline {\n        border-top: 1px solid #f1f5f9; padding-top: 25px; opacity: 0;\n    }\n\n    .jargon-container { position: relative; padding: 30px 10px 10px; text-align: center; }\n\n    .arrow-curve {\n        position: absolute; top: 0; left: 50%; transform: translateX(-50%);\n        width: 80%; height: 40px; border-bottom: 3px solid #3b82f6;\n        border-radius: 0 0 50% 50%; opacity: 0.5;\n    }\n\n    .arrow-head {\n        position: absolute; bottom: -3.5px; right: -8px;\n        width: 0; height: 0; border-left: 14px solid #3b82f6;\n        border-top: 5px solid transparent; border-bottom: 5px solid transparent;\n        transform: rotate(-12deg);\n    }\n\n    .jargon-text {\n        font-size: 0.95rem; font-style: italic; font-weight: 600;\n        color: #1e3a8a; line-height: 1.4; position: relative; z-index: 2;\n    }\n\n    \/* Staggered Delay (Waterfall) *\/\n    .delay-1 { animation-delay: 0.1s !important; }\n    .delay-2 { animation-delay: 0.2s !important; }\n    .delay-3 { animation-delay: 0.3s !important; }\n    .delay-4 { animation-delay: 0.4s !important; }\n    .delay-5 { animation-delay: 0.5s !important; }\n    .delay-6 { animation-delay: 0.6s !important; }\n    .delay-7 { animation-delay: 0.8s !important; }\n\n    @media (max-width: 600px) {\n        .h-item { flex: 1 1 100%; }\n        .h-line { display: none; }\n        .h-timeline-wrapper { padding: 25px 15px; }\n    }\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const observerOptions = { threshold: 0.1 };\n\n    const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.classList.add('is-visible');\n                observer.unobserve(entry.target); \n            }\n        });\n    }, observerOptions);\n\n    const target = document.querySelector('.scroll-reveal');\n    if (target) observer.observe(target);\n});\n<\/script>\n\n\n\n<div class=\"lpm-button-container-small animate-entrance\">\n    <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/spme\/\" class=\"lpm-btn-sm-outline\">\n        <span class=\"icon\">\ud83c\udfc5<\/span> Akreditasi\n    <\/a>\n    \n    <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/gugus-kendali-mutu-program-studi\/\" class=\"lpm-btn-sm-outline\">\n        <span class=\"icon\">\ud83d\udee1\ufe0f<\/span> GKM Prodi\n    <\/a>\n    \n    <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/auditor-internal\/\" class=\"lpm-btn-sm-outline\">\n        <span class=\"icon\">\ud83d\udd0d<\/span> Auditor\n    <\/a>\n\n    <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/kontak-2\/\" class=\"lpm-btn-sm-outline\">\n        <span class=\"icon\">\ud83d\udcde<\/span> Kontak\n    <\/a>\n<\/div>\n\n<style>\n    \/* Animasi Muncul ke Atas *\/\n    @keyframes entranceFadeUp {\n        from { opacity: 0; transform: translateY(20px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    .animate-entrance {\n        animation: entranceFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n\n    .lpm-button-container-small {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 10px; \n        padding: 15px 0;\n        width: 100%;\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    \/* Gaya Tombol Versi Kecil *\/\n    .lpm-btn-sm-outline {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        background-color: transparent;\n        color: #0056b3 !important;\n        padding: 6px 14px;\n        text-decoration: none !important;\n        border-radius: 6px;\n        font-family: 'Inter', system-ui, sans-serif;\n        font-size: 12px;\n        font-weight: 600;\n        transition: all 0.3s ease;\n        border: 1.5px solid #0056b3;\n        box-sizing: border-box;\n        white-space: nowrap;\n    }\n\n    \/* Efek Hover *\/\n    .lpm-btn-sm-outline:hover {\n        background-color: #0056b3;\n        color: #ffffff !important;\n        transform: translateY(-3px);\n        box-shadow: 0 4px 10px rgba(0, 86, 179, 0.15);\n    }\n\n    .icon {\n        margin-right: 6px;\n        font-size: 14px;\n    }\n\n    \/* Responsif Mobile (Grid 2 Kolom) *\/\n    @media screen and (max-width: 600px) {\n        .lpm-button-container-small {\n            gap: 8px;\n        }\n        .lpm-btn-sm-outline {\n            flex: 1 1 calc(50% - 10px); \n            min-width: 120px;\n            font-size: 11px;\n            padding: 8px 5px;\n        }\n    }\n<\/style>\n\n\n\n<style>\n  \/* Keyframe Animasi Muncul *\/\n  @keyframes fadeUp {\n    from {\n      opacity: 0;\n      transform: translateY(15px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .ppepp-mini-wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    justify-content: center;\n    padding: 15px 5px;\n    font-family: 'Inter', -apple-system, sans-serif;\n  }\n\n  .ppepp-btn {\n    display: flex;\n    align-items: center;\n    padding: 6px 14px;\n    border-radius: 50px;\n    text-decoration: none !important;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    border: 1px solid transparent;\n    background: #f8f9fa;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n    \n    \/* Terapkan animasi ke tombol *\/\n    animation: fadeUp 0.5s ease-out both;\n  }\n\n  \/* Delay bergantian agar muncul satu per satu *\/\n  .btn-p1 { animation-delay: 0.1s; }\n  .btn-p2 { animation-delay: 0.2s; }\n  .btn-e  { animation-delay: 0.3s; }\n  .btn-p3 { animation-delay: 0.4s; }\n  .btn-p4 { animation-delay: 0.5s; }\n\n  .ppepp-char {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    color: #fff;\n    font-weight: 800;\n    font-size: 11px;\n    margin-right: 8px;\n    flex-shrink: 0;\n  }\n\n  .ppepp-text {\n    font-size: 13px;\n    font-weight: 600;\n    color: #444;\n    white-space: nowrap;\n  }\n\n  \/* Warna Identitas *\/\n  .btn-p1 .ppepp-char { background: #e74c3c; } .btn-p1:hover { border-color: #e74c3c; background: #fff5f5; }\n  .btn-p2 .ppepp-char { background: #3498db; } .btn-p2:hover { border-color: #3498db; background: #f0f7ff; }\n  .btn-e  .ppepp-char { background: #2ecc71; } .btn-e:hover  { border-color: #2ecc71; background: #f2fff7; }\n  .btn-p3 .ppepp-char { background: #f1c40f; } .btn-p3:hover { border-color: #f1c40f; background: #fffdf0; }\n  .btn-p4 .ppepp-char { background: #c0392b; } .btn-p4:hover { border-color: #c0392b; background: #fff5f5; }\n\n  .ppepp-btn:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 6px 12px rgba(0,0,0,0.08);\n  }\n\n  @media (max-width: 480px) {\n    .ppepp-mini-wrapper { gap: 6px; }\n    .ppepp-btn { padding: 5px 10px; }\n    .ppepp-text { font-size: 11px; }\n    .ppepp-char { width: 18px; height: 18px; font-size: 9px; margin-right: 5px; }\n  }\n<\/style>\n\n<div class=\"ppepp-mini-wrapper\">\n  <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/dokumen-mutu\/\" class=\"ppepp-btn btn-p1\">\n    <div class=\"ppepp-char\">P<\/div> <span class=\"ppepp-text\">Penetapan<\/span>\n  <\/a>\n\n  <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/pelaksanaan\/\" class=\"ppepp-btn btn-p2\">\n    <div class=\"ppepp-char\">P<\/div> <span class=\"ppepp-text\">Pelaksanaan<\/span>\n  <\/a>\n\n  <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/dokumen-monev-dan-ami\/\" class=\"ppepp-btn btn-e\">\n    <div class=\"ppepp-char\">E<\/div> <span class=\"ppepp-text\">Evaluasi<\/span>\n  <\/a>\n\n  <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/rapat-tinjauan-manajemen-dan-rencana-tindak-lanjut\/\" class=\"ppepp-btn btn-p3\">\n    <div class=\"ppepp-char\">P<\/div> <span class=\"ppepp-text\">Pengendalian<\/span>\n  <\/a>\n\n  <a href=\"https:\/\/lpm.stikes-hi.ac.id\/index.php\/benchmarking\/\" class=\"ppepp-btn btn-p4\">\n    <div class=\"ppepp-char\">P<\/div> <span class=\"ppepp-text\">Peningkatan<\/span>\n  <\/a>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apa Itu LPM? LPM STIKES Harapan Ibu Jambi adalah unit struktural yang bertanggung jawab penuh dalam merencanakan, melaksanakan, dan mengevaluasi sistem penjaminan mutu di seluruh tingkat institusi. LPM memastikan standar pendidikan, penelitian, dan pengabdian masyarakat berjalan sesuai regulasi nasional. Komitmen &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-279","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":143,"href":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/279\/revisions"}],"predecessor-version":[{"id":1881,"href":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/wp-json\/wp\/v2\/pages\/279\/revisions\/1881"}],"wp:attachment":[{"href":"https:\/\/lpm.stikes-hi.ac.id\/index.php\/wp-json\/wp\/v2\/media?parent=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}