{"id":774,"date":"2026-07-30T05:38:34","date_gmt":"2026-07-30T05:38:34","guid":{"rendered":"https:\/\/teknik.uin-malang.ac.id\/?page_id=774"},"modified":"2026-08-04T00:05:03","modified_gmt":"2026-08-04T00:05:03","slug":"fasilitas","status":"publish","type":"page","link":"https:\/\/teknik.uin-malang.ac.id\/ar\/fasilitas\/","title":{"rendered":"Fasilitas"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"774\" class=\"elementor elementor-774\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ede6056 e-flex e-con-boxed e-con e-parent\" data-id=\"ede6056\" 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-9d29247 elementor-widget elementor-widget-text-editor\" data-id=\"9d29247\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<!-- Load Font Awesome 6 untuk Ikon -->\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\/* SECTION CONTAINER TRANSPARAN *\/\n.grid-fasilitas-section {\n    width: 100%;\n    padding: 40px 15px;\n    background: transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n\/* CONTAINER UTAMA DENGAN GRID 3 KOLOM & 2 BARIS *\/\n.grid-fasilitas-bar {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr); \/* 3 Kolom *\/\n    grid-template-rows: repeat(2, auto);    \/* 2 Baris *\/\n    width: 100%;\n    max-width: 1000px;\n    background: linear-gradient(135deg, rgba(10, 25, 47, 0.93) 0%, rgba(16, 55, 42, 0.9) 50%, rgba(15, 23, 42, 0.93) 100%);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    \n    \/* Border Emas Mewah & Glow Hijau Surga *\/\n    border: 1.5px solid rgba(212, 175, 55, 0.5);\n    border-radius: 22px;\n    \n    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45),\n                0 0 25px rgba(16, 185, 129, 0.2),\n                inset 0 1px 1px rgba(255, 255, 255, 0.4);\n    overflow: hidden;\n    position: relative;\n}\n\n\/* ITEM MENU *\/\n.grid-fasilitas-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 24px 20px;\n    text-decoration: none;\n    color: #ffffff;\n    position: relative;\n    cursor: pointer;\n    transition: background 0.35s ease, border-color 0.35s ease;\n    \n    \/* Pembatas Garis Tipis Antar Sel Grid *\/\n    border-right: 1px solid rgba(212, 175, 55, 0.25);\n    border-bottom: 1px solid rgba(212, 175, 55, 0.25);\n}\n\n\/* Menghilangkan border kanan pada kolom ke-3 (ujung kanan) *\/\n.grid-fasilitas-item:nth-child(3n) {\n    border-right: none;\n}\n\n\/* Menghilangkan border bawah pada baris ke-2 (ujung bawah) *\/\n.grid-fasilitas-item:nth-child(n+4) {\n    border-bottom: none;\n}\n\n\/* HOVER EFFECT INTERAKTIF (HIJAU SURGA & EMAS) *\/\n.grid-fasilitas-item:hover {\n    background: linear-gradient(135deg, rgba(20, 83, 45, 0.95) 0%, rgba(13, 148, 136, 0.9) 50%, rgba(15, 23, 42, 0.95) 100%);\n    z-index: 3;\n}\n\n\/* ANIMASI ZOOM-IN DARI KECIL KE BESAR SAAT DIKLIK (:active) *\/\n.grid-fasilitas-item:active {\n    animation: zoomInGrid 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\n}\n\n@keyframes zoomInGrid {\n    0% {\n        transform: scale(0.92);\n    }\n    50% {\n        transform: scale(1.08); \/* Zoom In Membesar *\/\n        box-shadow: 0 0 35px rgba(16, 185, 129, 0.7), \n                    0 0 20px rgba(255, 255, 255, 0.9);\n        border-radius: 14px;\n        z-index: 10;\n    }\n    100% {\n        transform: scale(1.03);\n        border-radius: 14px;\n        z-index: 10;\n    }\n}\n\n\/* KONTEN KIRI: IKON + LABELS *\/\n.item-left-content {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n}\n\n\/* BINGKAI IKON RELEVAN & UNIK *\/\n.item-icon-box {\n    width: 46px;\n    height: 46px;\n    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(10, 25, 47, 0.8) 100%);\n    border: 1.2px solid rgba(212, 175, 55, 0.6);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: all 0.3s ease;\n    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);\n}\n\n.grid-fasilitas-item:hover .item-icon-box {\n    background: linear-gradient(135deg, #10b981 0%, #d4af37 100%);\n    border-color: #ffffff;\n    transform: scale(1.1) rotate(5deg);\n    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);\n}\n\n.item-icon-box i {\n    font-size: 20px;\n    color: #f3e0aa;\n    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));\n    transition: color 0.3s ease;\n}\n\n.grid-fasilitas-item:hover .item-icon-box i {\n    color: #ffffff;\n}\n\n\/* TEKS LABELS PUTIH CAHAYA SURGA *\/\n.item-title {\n    font-size: 14.5px;\n    font-weight: 700;\n    line-height: 1.35;\n    color: #ffffff;\n    letter-spacing: 0.3px;\n    transition: color 0.3s ease;\n    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5),\n                 0 2px 4px rgba(0, 0, 0, 0.8);\n}\n\n.grid-fasilitas-item:hover .item-title {\n    color: #f3e0aa;\n    text-shadow: 0 0 10px rgba(243, 224, 170, 0.8);\n}\n\n\/* PANAH SEGITIGA INDIKATOR *\/\n.item-arrow {\n    font-size: 12px;\n    color: #d4af37;\n    margin-left: 8px;\n    flex-shrink: 0;\n    transition: transform 0.3s ease, color 0.3s ease;\n    opacity: 0.85;\n}\n\n.grid-fasilitas-item:hover .item-arrow {\n    opacity: 1;\n    transform: translateX(4px);\n    color: #ffffff;\n}\n\n\/* RESPONSIVE DESIGN UNTUK TABLET & HP *\/\n@media (max-width: 820px) {\n    .grid-fasilitas-bar {\n        grid-template-columns: repeat(2, 1fr); \/* Jadi 2 kolom di tablet *\/\n    }\n    .grid-fasilitas-item {\n        border-right: 1px solid rgba(212, 175, 55, 0.25);\n        border-bottom: 1px solid rgba(212, 175, 55, 0.25);\n    }\n    .grid-fasilitas-item:nth-child(2n) {\n        border-right: none;\n    }\n}\n\n@media (max-width: 550px) {\n    .grid-fasilitas-bar {\n        grid-template-columns: 1fr; \/* Jadi 1 kolom di HP *\/\n    }\n    .grid-fasilitas-item {\n        border-right: none;\n        border-bottom: 1px solid rgba(212, 175, 55, 0.25);\n    }\n    .grid-fasilitas-item:last-child {\n        border-bottom: none;\n    }\n}\n<\/style>\n\n<section class=\"grid-fasilitas-section\">\n    <!-- PANEL GRID 3 KOLOM x 2 BARIS -->\n    <div class=\"grid-fasilitas-bar\">\n        \n        <!-- BARIS 1 - KOLOM 1: Ruang Kelas -->\n        <a href=\"#\" class=\"grid-fasilitas-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-chalkboard\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Ruang Kelas<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- BARIS 1 - KOLOM 2: Laboratorium -->\n        <a href=\"#\" class=\"grid-fasilitas-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-flask-vial\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Laboratorium<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- BARIS 1 - KOLOM 3: Studio Gambar -->\n        <a href=\"#\" class=\"grid-fasilitas-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-compass-drafting\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Studio Gambar<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- BARIS 2 - KOLOM 1: Ruang Rapat -->\n        <a href=\"#\" class=\"grid-fasilitas-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-people-group\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Ruang Rapat<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- BARIS 2 - KOLOM 2: Ruang Himpunan Program Studi -->\n        <a href=\"#\" class=\"grid-fasilitas-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-diagram-project\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Ruang Himpunan<br>Program Studi<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- BARIS 2 - KOLOM 3: Perpustakaan -->\n        <a href=\"#\" class=\"grid-fasilitas-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-book-open-reader\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Perpustakaan<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n    <\/div>\n<\/section>\t\t\t\t\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>Ruang Kelas Laboratorium Studio Gambar Ruang Rapat Ruang HimpunanProgram Studi Perpustakaan<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-774","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/pages\/774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/comments?post=774"}],"version-history":[{"count":4,"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/pages\/774\/revisions"}],"predecessor-version":[{"id":1292,"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/pages\/774\/revisions\/1292"}],"wp:attachment":[{"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/media?parent=774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}