{"id":709,"date":"2025-09-15T13:15:54","date_gmt":"2025-09-15T13:15:54","guid":{"rendered":"https:\/\/tekniksipil.uin-malang.ac.id\/?page_id=709"},"modified":"2026-08-11T15:28:50","modified_gmt":"2026-08-11T15:28:50","slug":"himpunan-mahasiswa-prodi-teknik-sipil-hmpts","status":"publish","type":"page","link":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/himpunan-mahasiswa-prodi-teknik-sipil-hmpts\/","title":{"rendered":"Himpunan Mahasiswa Prodi Teknik Sipil (HMPTS)"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"709\" class=\"elementor elementor-709\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-795dfc7 e-flex e-con-boxed e-con e-parent\" data-id=\"795dfc7\" 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-dd26e55 elementor-widget elementor-widget-text-editor\" data-id=\"dd26e55\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<!-- Load Font Awesome 6 untuk Ikon Jabatan -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<style>\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n\/* CONTAINER UTAMA LEBAR PENUH *\/\n.hmpts-org-container {\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 auto;\n    padding: 25px 10px;\n    background: transparent;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 20px;\n}\n\n\/* BANNER JUDUL UTAMA *\/\n.hmpts-title-banner {\n    width: 100% !important;\n    background: linear-gradient(135deg, #ff914d 0%, #d4af37 100%) !important;\n    border: 1.5px solid #e07d3a;\n    border-radius: 14px;\n    padding: 16px 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    box-shadow: 0 4px 18px rgba(255, 145, 77, 0.3);\n    text-align: center;\n}\n\n.hmpts-title-banner .banner-text h2 {\n    font-size: 20px;\n    font-weight: 900;\n    color: #ffffff !important;\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.hmpts-title-banner .banner-text h3 {\n    font-size: 14px;\n    font-weight: 700;\n    color: #fff7ed !important;\n    margin-top: 3px;\n}\n\n.hmpts-title-banner .title-icon-box {\n    width: 44px;\n    height: 44px;\n    background: rgba(255, 255, 255, 0.25);\n    border: 1px solid rgba(255, 255, 255, 0.5);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.hmpts-title-banner .title-icon-box i {\n    font-size: 22px;\n    color: #ffffff;\n}\n\n\/* TREE CHART BAGAN STRUKTUR ORGANISASI *\/\n.hmpts-tree {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    position: relative;\n}\n\n\/* ANIMASI KOTAK JABATAN (CARD ANIMATION) *\/\n.hmpts-card {\n    background: linear-gradient(135deg, #ff914d 0%, #f3a640 50%, #d4af37 100%) !important;\n    border: 1.5px solid #e07d3a;\n    border-radius: 12px;\n    padding: 12px 18px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    color: #ffffff !important;\n    box-shadow: 0 4px 12px rgba(255, 145, 77, 0.25);\n    cursor: pointer;\n    user-select: none;\n    z-index: 3;\n    position: relative;\n    animation: cardPulseGlow 3s infinite alternate ease-in-out;\n    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease;\n}\n\n@keyframes cardPulseGlow {\n    0% {\n        box-shadow: 0 4px 12px rgba(255, 145, 77, 0.3);\n        border-color: #e07d3a;\n    }\n    100% {\n        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);\n        border-color: #ffffff;\n    }\n}\n\n.hmpts-card:hover {\n    transform: translateY(-4px) scale(1.03);\n    box-shadow: 0 8px 24px rgba(255, 145, 77, 0.5) !important;\n    border-color: #ffffff !important;\n}\n\n.card-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    background: rgba(255, 255, 255, 0.25);\n    border: 1px solid rgba(255, 255, 255, 0.4);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.card-icon i {\n    font-size: 16px;\n    color: #ffffff;\n}\n\n.card-title {\n    font-size: 14px;\n    font-weight: 800;\n    letter-spacing: 0.3px;\n    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n    line-height: 1.2;\n}\n\n\/* ========================================== *\/\n\/* PERBAIKAN SYSTEM GARIS BERSAMBUNG SEMBURAN CAHAYA *\/\n\/* ========================================== *\/\n\n\/* GARIS VERTIKAL AKSI ALUR *\/\n.line-v {\n    width: 3px;\n    height: 30px;\n    background: #e07d3a;\n    position: relative;\n    overflow: hidden;\n    z-index: 1;\n}\n\n.line-v::after {\n    content: '';\n    position: absolute;\n    top: -100%;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(180deg, transparent, #ffffff, #ffd700, transparent);\n    animation: flowDown 1.8s infinite linear;\n}\n\n@keyframes flowDown {\n    0% { top: -100%; }\n    100% { top: 100%; }\n}\n\n\/* WADAH TINGKATAN SEKRETARIS & BENDAHARA *\/\n.hmpts-sec-wrapper {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.hmpts-row-two {\n    display: flex;\n    justify-content: center;\n    gap: 160px; \/* Jarak agar terhubung simetris ke kanan-kiri *\/\n    position: relative;\n    width: 100%;\n    z-index: 3;\n}\n\n\/* GARIS HORIZONTAL BENDAHARA & SEKRETARIS *\/\n.line-h-sub {\n    width: 210px;\n    height: 3px;\n    background: #e07d3a;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    overflow: hidden;\n    z-index: 2;\n}\n\n.line-h-sub::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -50%;\n    width: 50%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, #ffffff, #ffd700, transparent);\n    animation: flowRight 2s infinite linear;\n}\n\n\/* GARIS TENGAH UTAMA YANG DITEMBUS DARI WAKETUM KE DIVISI *\/\n.main-spine-line {\n    width: 3px;\n    height: 100%;\n    background: #e07d3a;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 1;\n    overflow: hidden;\n}\n\n.main-spine-line::after {\n    content: '';\n    position: absolute;\n    top: -100%;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(180deg, transparent, #ffffff, #ffd700, transparent);\n    animation: flowDown 1.8s infinite linear;\n}\n\n\/* WADAH 5 DIVISI *\/\n.hmpts-level-wrapper {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n}\n\n\/* GARIS CABANG HORIZONTAL 5 DIVISI *\/\n.hmpts-horizontal-branch {\n    width: 82%;\n    height: 3px;\n    background: #e07d3a;\n    position: relative;\n    overflow: hidden;\n    z-index: 2;\n}\n\n.hmpts-horizontal-branch::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -50%;\n    width: 50%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, #ffffff, #ffd700, transparent);\n    animation: flowRight 2.2s infinite linear;\n}\n\n@keyframes flowRight {\n    0% { left: -50%; }\n    100% { left: 100%; }\n}\n\n\/* BARIS 5 KOLOM DIVISI SEJAJAR *\/\n.hmpts-level-row {\n    display: flex;\n    justify-content: space-around;\n    align-items: flex-start;\n    width: 100%;\n    position: relative;\n    z-index: 3;\n}\n\n.hmpts-col-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex: 1;\n    max-width: 170px;\n    position: relative;\n}\n\n\/* GARIS TURUNAN PADA SETIAP DIVISI *\/\n.hmpts-col-item .line-v-drop {\n    width: 3px;\n    height: 25px;\n    background: #e07d3a;\n    position: relative;\n    overflow: hidden;\n}\n\n.hmpts-col-item .line-v-drop::after {\n    content: '';\n    position: absolute;\n    top: -100%;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(180deg, transparent, #ffffff, #ffd700, transparent);\n    animation: flowDown 1.8s infinite linear;\n    animation-delay: 0.3s;\n}\n\n\/* RESPONSIVE LAYAR HP *\/\n@media (max-width: 850px) {\n    .hmpts-title-banner h2 { font-size: 16px; }\n    .hmpts-title-banner h3 { font-size: 12px; }\n    .hmpts-horizontal-branch { display: none; }\n    .main-spine-line { display: none; }\n    .line-h-sub { display: none; }\n    .hmpts-row-two {\n        flex-direction: column;\n        align-items: center;\n        gap: 14px;\n    }\n    .hmpts-level-row {\n        flex-direction: column;\n        align-items: center;\n        gap: 14px;\n    }\n    .hmpts-col-item { width: 100%; max-width: 100%; }\n    .hmpts-col-item .line-v-drop { display: none; }\n    .card-title { font-size: 13px; }\n}\n<\/style>\n\n<div class=\"hmpts-org-container\">\n\n    <!-- BANNER JUDUL ORGANISASI HMPTS -->\n    <div class=\"hmpts-title-banner\">\n        <div class=\"title-icon-box\">\n            <i class=\"fa-solid fa-users-gear\"><\/i>\n        <\/div>\n        <div class=\"banner-text\">\n            <h2>STRUKTUR ORGANISASI HMPTS<\/h2>\n            <h3>Himpunan Mahasiswa Prodi Teknik Sipil UIN Maulana Malik Ibrahim Malang<\/h3>\n        <\/div>\n    <\/div>\n\n    <!-- BAGAN STRUKTUR ORGANISASI HMPTS -->\n    <div class=\"hmpts-tree\">\n        \n        <!-- LEVEL 1: KETUA HIMPUNAN (KAHIMA) -->\n        <div class=\"hmpts-card\">\n            <div class=\"card-icon\">\n                <i class=\"fa-solid fa-user-tie\"><\/i>\n            <\/div>\n            <div class=\"card-title\">Ketua Himpunan (Kahima)<\/div>\n        <\/div>\n\n        <!-- GARIS MENGALIR KE WAKIL KETUA -->\n        <div class=\"line-v\"><\/div>\n\n        <!-- LEVEL 2: WAKIL KETUA HIMPUNAN (WAKETUM HIMA) -->\n        <div class=\"hmpts-card\">\n            <div class=\"card-icon\">\n                <i class=\"fa-solid fa-user-shield\"><\/i>\n            <\/div>\n            <div class=\"card-title\">Wakil Ketua Himpunan (Waketum Hima)<\/div>\n        <\/div>\n\n        <!-- GARIS MENGALIR KANAN KIRI BENDAHARA & SEKRETARIS -->\n        <div class=\"line-v\"><\/div>\n\n        <div class=\"hmpts-sec-wrapper\">\n            <!-- GARIS TENGAH UTAMA BERSAMBUNG KE BANYAK DIVISI -->\n            <div class=\"main-spine-line\"><\/div>\n            <!-- GARIS HORIZONTAL HUBUNG BENDAHARA & SEKRETARIS -->\n            <div class=\"line-h-sub\"><\/div>\n\n            <!-- LEVEL 3: BENDAHARA & SEKRETARIS SEJAJAR -->\n            <div class=\"hmpts-row-two\">\n                <div class=\"hmpts-card\">\n                    <div class=\"card-icon\">\n                        <i class=\"fa-solid fa-wallet\"><\/i>\n                    <\/div>\n                    <div class=\"card-title\">Bendahara Himpunan<\/div>\n                <\/div>\n\n                <div class=\"hmpts-card\">\n                    <div class=\"card-icon\">\n                        <i class=\"fa-solid fa-file-pen\"><\/i>\n                    <\/div>\n                    <div class=\"card-title\">Sekretaris Himpunan<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- GARIS MENGALIR LANJUTAN KE 5 DIVISI -->\n        <div class=\"line-v\" style=\"height: 35px;\"><\/div>\n\n        <!-- WADAH TINGKATAN DIVISI -->\n        <div class=\"hmpts-level-wrapper\">\n            \n            <!-- GARIS CABANG HORIZONTAL 5 DIVISI -->\n            <div class=\"hmpts-horizontal-branch\"><\/div>\n\n            <!-- LEVEL 4: BARIS 5 DIVISI SEJAJAR -->\n            <div class=\"hmpts-level-row\">\n                \n                <!-- DIVISI 1: KOMINFO -->\n                <div class=\"hmpts-col-item\">\n                    <div class=\"line-v-drop\"><\/div>\n                    <div class=\"hmpts-card\">\n                        <div class=\"card-icon\">\n                            <i class=\"fa-solid fa-bullhorn\"><\/i>\n                        <\/div>\n                        <div class=\"card-title\">Divisi Kominfo<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- DIVISI 2: PSDM -->\n                <div class=\"hmpts-col-item\">\n                    <div class=\"line-v-drop\"><\/div>\n                    <div class=\"hmpts-card\">\n                        <div class=\"card-icon\">\n                            <i class=\"fa-solid fa-user-gear\"><\/i>\n                        <\/div>\n                        <div class=\"card-title\">Divisi PSDM<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- DIVISI 3: HUMAS -->\n                <div class=\"hmpts-col-item\">\n                    <div class=\"line-v-drop\"><\/div>\n                    <div class=\"hmpts-card\">\n                        <div class=\"card-icon\">\n                            <i class=\"fa-solid fa-handshake\"><\/i>\n                        <\/div>\n                        <div class=\"card-title\">Divisi Humas<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- DIVISI 4: MINBAK -->\n                <div class=\"hmpts-col-item\">\n                    <div class=\"line-v-drop\"><\/div>\n                    <div class=\"hmpts-card\">\n                        <div class=\"card-icon\">\n                            <i class=\"fa-solid fa-trophy\"><\/i>\n                        <\/div>\n                        <div class=\"card-title\">Divisi Minbak<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- DIVISI 5: INTERNAL -->\n                <div class=\"hmpts-col-item\">\n                    <div class=\"line-v-drop\"><\/div>\n                    <div class=\"hmpts-card\">\n                        <div class=\"card-icon\">\n                            <i class=\"fa-solid fa-people-roof\"><\/i>\n                        <\/div>\n                        <div class=\"card-title\">Divisi Internal<\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<!-- JAVASCRIPT EFEK KLIK INTERAKTIF -->\n<script>\n(function() {\n    function initHmptsCards() {\n        const cards = document.querySelectorAll(\".hmpts-card\");\n\n        cards.forEach(card => {\n            card.addEventListener(\"click\", function() {\n                cards.forEach(c => c.style.transform = \"scale(1)\");\n                this.style.transform = \"scale(1.06)\";\n                setTimeout(() => {\n                    this.style.transform = \"\";\n                }, 300);\n            });\n        });\n    }\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initHmptsCards);\n    } else {\n        initHmptsCards();\n    }\n})();\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea7c944 elementor-widget elementor-widget-text-editor\" data-id=\"ea7c944\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<!-- Load Font Awesome 6 untuk Ikon Konstruksi & Visi Misi -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<style>\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n\/* CONTAINER UTAMA VIRTUAL PROYEK KONSTRUKSI *\/\n.vision-mission-container {\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 auto;\n    padding: 30px 15px;\n    background: radial-gradient(circle at center, rgba(30, 20, 12, 0.92) 0%, rgba(12, 8, 4, 0.98) 100%) !important;\n    border: 2px solid #ff914d;\n    border-radius: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 30px;\n    box-shadow: 0 12px 35px rgba(255, 145, 77, 0.25), inset 0 0 25px rgba(255, 145, 77, 0.1);\n    backdrop-filter: blur(10px);\n    overflow: hidden;\n    position: relative;\n}\n\n\/* PATTERN SAFTEY HAZARD KUNING HITAM ATAS & BAWAH *\/\n.vision-mission-container::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 6px;\n    background: repeating-linear-gradient(\n        -45deg,\n        #ff914d,\n        #ff914d 15px,\n        #111111 15px,\n        #111111 30px\n    );\n}\n\n\/* BANNER HEADLINE UTAMA *\/\n.vm-header-banner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    padding: 14px 20px;\n    background: linear-gradient(135deg, #ff914d 0%, #d4af37 100%);\n    border-radius: 12px;\n    color: #ffffff;\n    box-shadow: 0 4px 18px rgba(255, 145, 77, 0.3);\n    text-align: center;\n}\n\n.vm-header-banner h2 {\n    font-size: 20px;\n    font-weight: 900;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n\n.vm-header-icon {\n    width: 42px;\n    height: 42px;\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.25);\n    border: 1px solid rgba(255, 255, 255, 0.4);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 20px;\n}\n\n\/* ========================================== *\/\n\/* KARTU VISI (DESAIN FONDASI DENGAN ANIMASI) *\/\n\/* ========================================== *\/\n.visi-card {\n    background: rgba(255, 145, 77, 0.08) !important;\n    border: 2px solid #ff914d;\n    border-left: 8px solid #ffd700;\n    border-radius: 14px;\n    padding: 24px;\n    position: relative;\n    overflow: hidden;\n    transition: all 0.4s ease;\n    animation: visiGlowPulse 4s infinite alternate ease-in-out;\n}\n\n@keyframes visiGlowPulse {\n    0% { box-shadow: 0 4px 15px rgba(255, 145, 77, 0.2); }\n    100% { box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4); }\n}\n\n.visi-card:hover {\n    transform: translateY(-3px);\n    background: rgba(255, 145, 77, 0.14) !important;\n    border-color: #ffd700;\n}\n\n.section-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 5px 14px;\n    background: #ff914d;\n    color: #000000;\n    font-size: 13px;\n    font-weight: 900;\n    text-transform: uppercase;\n    letter-spacing: 1.5px;\n    border-radius: 20px;\n    margin-bottom: 14px;\n    box-shadow: 0 2px 8px rgba(255, 145, 77, 0.4);\n}\n\n.visi-text {\n    font-size: 17px;\n    font-weight: 700;\n    color: #ffffff;\n    line-height: 1.6;\n    letter-spacing: 0.3px;\n    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n}\n\n\/* ========================================== *\/\n\/* MISION LIST (DESAIN PILAR STRUKTUR 5 POIN) *\/\n\/* ========================================== *\/\n.misi-section {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.misi-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n}\n\n\/* POIN KARTU MISI *\/\n.misi-item-card {\n    background: linear-gradient(135deg, rgba(40, 28, 18, 0.9) 0%, rgba(20, 14, 8, 0.95) 100%);\n    border: 1.5px solid #e07d3a;\n    border-radius: 12px;\n    padding: 16px 20px;\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    position: relative;\n    overflow: hidden;\n    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;\n    cursor: pointer;\n}\n\n.misi-item-card:hover {\n    transform: translateX(8px);\n    border-color: #ffd700;\n    box-shadow: 0 6px 20px rgba(255, 145, 77, 0.35);\n    background: linear-gradient(135deg, rgba(55, 38, 22, 0.95) 0%, rgba(30, 20, 10, 0.98) 100%);\n}\n\n\/* NOMOR URUT DENGAN AKSEN PROYEK *\/\n.misi-number {\n    width: 38px;\n    height: 38px;\n    border-radius: 10px;\n    background: linear-gradient(135deg, #ff914d 0%, #d4af37 100%);\n    color: #000000;\n    font-size: 16px;\n    font-weight: 900;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 3px 10px rgba(255, 145, 77, 0.4);\n    border: 1px solid #ffffff;\n}\n\n.misi-content {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.misi-text {\n    font-size: 15px;\n    font-weight: 600;\n    color: #f3f3f3;\n    line-height: 1.55;\n    letter-spacing: 0.2px;\n}\n\n\/* CAHAYA PENGELASAN \/ WELDING SPARK DI KARTU MISI SAAT HOVER *\/\n.misi-item-card::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.25), transparent);\n    transition: left 0.6s ease;\n}\n\n.misi-item-card:hover::after {\n    left: 100%;\n}\n\n\/* RESPONSIVE LAYAR HP *\/\n@media (max-width: 600px) {\n    .vm-header-banner h2 { font-size: 16px; }\n    .visi-text { font-size: 15px; }\n    .misi-text { font-size: 13.5px; }\n    .misi-number { width: 32px; height: 32px; font-size: 14px; }\n    .misi-item-card { padding: 14px 16px; gap: 12px; }\n}\n<\/style>\n\n<div class=\"vision-mission-container\">\n\n    <!-- BANNER HEADLINE HASIL PERANCANGAN -->\n    <div class=\"vm-header-banner\">\n        <div class=\"vm-header-icon\">\n            <i class=\"fa-solid fa-compass-drafting\"><\/i>\n        <\/div>\n        <h2>VISI &#038; MISI HMPTS UIN MALANG<\/h2>\n    <\/div>\n\n    <!-- BLOK VISI -->\n    <div class=\"visi-card\">\n        <div class=\"section-tag\">\n            <i class=\"fa-solid fa-eye\"><\/i> VISI\n        <\/div>\n        <p class=\"visi-text\">\n            Mewujudkan Himpunan Mahasiswa Teknik Sipil yang menjadi pusat pengembangan kompetensi, inovasi, dan jiwa kepemimpinan.\n        <\/p>\n    <\/div>\n\n    <!-- BLOK MISI -->\n    <div class=\"misi-section\">\n        <div class=\"section-tag\" style=\"background: #d4af37; width: fit-content;\">\n            <i class=\"fa-solid fa-bullseye\"><\/i> MISI\n        <\/div>\n\n        <div class=\"misi-grid\">\n            \n            <!-- MISI 1 -->\n            <div class=\"misi-item-card\">\n                <div class=\"misi-number\">01<\/div>\n                <div class=\"misi-content\">\n                    <p class=\"misi-text\">\n                        Meningkatkan kualitas akademik mahasiswa melalui program mentoring, bimbingan tugas akhir, dan pertukaran pelajar.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <!-- MISI 2 -->\n            <div class=\"misi-item-card\">\n                <div class=\"misi-number\">02<\/div>\n                <div class=\"misi-content\">\n                    <p class=\"misi-text\">\n                        Mengembangkan minat dan bakat mahasiswa melalui berbagai kegiatan bimbingan, seperti kompetisi desain, seminar teknologi terbaru, dan studi banding.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <!-- MISI 3 -->\n            <div class=\"misi-item-card\">\n                <div class=\"misi-number\">03<\/div>\n                <div class=\"misi-content\">\n                    <p class=\"misi-text\">\n                        Membangun jejaring kerjasama dengan industri, pemerintah, dan lembaga swadaya masyarakat untuk mendukung pengembangan karir mahasiswa.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <!-- MISI 4 -->\n            <div class=\"misi-item-card\">\n                <div class=\"misi-number\">04<\/div>\n                <div class=\"misi-content\">\n                    <p class=\"misi-text\">\n                        Mengadakan kegiatan pengabdian masyarakat yang berdampak langsung pada peningkatan kualitas hidup masyarakat.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <!-- MISI 5 -->\n            <div class=\"misi-item-card\">\n                <div class=\"misi-number\">05<\/div>\n                <div class=\"misi-content\">\n                    <p class=\"misi-text\">\n                        Menciptakan lingkungan organisasi yang kondusif, demokratis, dan transparan.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<!-- JAVASCRIPT EFEK INTERAKTIF KLIK -->\n<script>\n(function() {\n    function initVisiMisi() {\n        const cards = document.querySelectorAll(\".misi-item-card\");\n\n        cards.forEach(card => {\n            card.addEventListener(\"click\", function() {\n                this.style.transform = \"scale(0.98)\";\n                setTimeout(() => {\n                    this.style.transform = \"\";\n                }, 200);\n            });\n        });\n    }\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initVisiMisi);\n    } else {\n        initVisiMisi();\n    }\n})();\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>STRUKTUR ORGANISASI HMPTS Himpunan Mahasiswa Prodi Teknik Sipil UIN Maulana Malik Ibrahim Malang Ketua Himpunan (Kahima) Wakil Ketua Himpunan (Waketum Hima) Bendahara Himpunan Sekretaris Himpunan Divisi Kominfo Divisi PSDM Divisi Humas Divisi Minbak Divisi Internal VISI &#038; MISI HMPTS UIN MALANG VISI Mewujudkan Himpunan Mahasiswa Teknik Sipil yang menjadi pusat pengembangan kompetensi, inovasi, dan jiwa [&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-709","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/pages\/709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/comments?post=709"}],"version-history":[{"count":7,"href":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/pages\/709\/revisions"}],"predecessor-version":[{"id":1395,"href":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/pages\/709\/revisions\/1395"}],"wp:attachment":[{"href":"https:\/\/tekniksipil.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/media?parent=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}