{"id":505,"date":"2025-07-29T10:16:40","date_gmt":"2025-07-29T10:16:40","guid":{"rendered":"https:\/\/tekniksipil.uin-malang.ac.id\/?page_id=505"},"modified":"2026-08-11T15:12:56","modified_gmt":"2026-08-11T15:12:56","slug":"laboratorium","status":"publish","type":"page","link":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/laboratorium\/","title":{"rendered":"Laboratorium"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"505\" class=\"elementor elementor-505\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47b0d93 e-flex e-con-boxed e-con e-parent\" data-id=\"47b0d93\" 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-196f507 elementor-widget elementor-widget-text-editor\" data-id=\"196f507\" 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 Laboratorium -->\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 LAYOUT PROYEK KONSTRUKSI *\/\n.lab-menu-container {\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 auto;\n    padding: 20px 0;\n    background: transparent;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n\/* GRID KOLOM PILAR PROYEK (RESPONSIF 3 KOLOM) *\/\n.lab-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n    width: 100%;\n}\n\n\/* KARTU MENU BERGAYA PILAR GEDUNG KONSTRUKSI (ORANGE EMAS) *\/\n.lab-card {\n    text-decoration: none !important;\n    background: linear-gradient(180deg, #ff914d 0%, #f3a640 60%, #d4af37 100%) !important;\n    border: 2px solid #e07d3a;\n    border-top: 6px solid #ffd700; \/* Mahkota\/Kepala Pilar *\/\n    border-radius: 14px;\n    padding: 28px 20px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    gap: 16px;\n    min-height: 180px;\n    cursor: pointer;\n    user-select: none;\n    box-shadow: 0 8px 20px rgba(255, 145, 77, 0.25);\n    position: relative;\n    overflow: hidden;\n    \n    \/* TRANSISI HOVER & KLIK *\/\n    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;\n}\n\n\/* STRIP PATTERN SAFETY HAZARD PROYEK DI BAGIAN BAWAH KARTU *\/\n.lab-card::before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 5px;\n    background: repeating-linear-gradient(\n        -45deg,\n        #ffd700,\n        #ffd700 10px,\n        #111111 10px,\n        #111111 20px\n    );\n    opacity: 0.8;\n}\n\n\/* EFEK KILAU \/ SHIMMER SAAT HOVER *\/\n.lab-card::after {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: -50%;\n    width: 200%;\n    height: 200%;\n    background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n    transform: rotate(30deg);\n    transition: all 0.6s ease;\n    opacity: 0;\n}\n\n.lab-card:hover::after {\n    opacity: 1;\n    transform: rotate(30deg) translate(20%, 20%);\n}\n\n.lab-card:hover {\n    transform: translateY(-6px) scale(1.02);\n    box-shadow: 0 14px 28px rgba(255, 145, 77, 0.45);\n    border-color: #ffffff;\n}\n\n\/* EFEK ANIMASI KLIK *\/\n.lab-card:active,\n.lab-card.is-active {\n    transform: scale(0.97) !important;\n    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.6) !important;\n    border-color: #ffffff !important;\n}\n\n\/* BINGKAI IKON KEPALA PILAR *\/\n.lab-icon-box {\n    width: 52px;\n    height: 52px;\n    border-radius: 12px;\n    background: rgba(255, 255, 255, 0.25);\n    border: 1.5px solid rgba(255, 255, 255, 0.6);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);\n    transition: transform 0.3s ease, background-color 0.3s ease;\n}\n\n.lab-card:hover .lab-icon-box {\n    transform: scale(1.12) rotate(4deg);\n    background: rgba(255, 255, 255, 0.4);\n}\n\n.lab-icon-box i {\n    font-size: 24px;\n    color: #ffffff;\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n\/* TEKS JUDUL LABORATORIUM *\/\n.lab-title {\n    font-size: 16px;\n    font-weight: 800;\n    color: #ffffff !important;\n    letter-spacing: 0.3px;\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    line-height: 1.35;\n}\n\n\/* RESPONSIVE LAYAR TABLET DAN HP *\/\n@media (max-width: 900px) {\n    .lab-grid {\n        grid-template-columns: repeat(2, 1fr);\n        gap: 16px;\n    }\n}\n\n@media (max-width: 600px) {\n    .lab-grid {\n        grid-template-columns: 1fr;\n        gap: 14px;\n    }\n    .lab-card {\n        padding: 18px 16px;\n        min-height: 100px;\n        flex-direction: row;\n        justify-content: flex-start;\n        text-align: left;\n    }\n    .lab-title {\n        font-size: 15px;\n    }\n}\n<\/style>\n\n<div class=\"lab-menu-container\">\n    \n    <!-- GRID PILAR LABORATORIUM (6 LABORATORIUM DENGAN LINK REVISI) -->\n    <div class=\"lab-grid\">\n        \n        <!-- LAB 1: STRUKTUR (MAKRO & MIKRO) -->\n        <a href=\"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/lab-struktur-bangunan\/\" target=\"_blank\" class=\"lab-card\">\n            <div class=\"lab-icon-box\">\n                <i class=\"fa-solid fa-cubes-stacked\"><\/i>\n            <\/div>\n            <div class=\"lab-title\">Laboratorium Struktur (Makro &#038; Mikro)<\/div>\n        <\/a>\n\n        <!-- LAB 2: GEOTEKNIK -->\n        <a href=\"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/lab-material-bangunan-2\/\" target=\"_blank\" class=\"lab-card\">\n            <div class=\"lab-icon-box\">\n                <i class=\"fa-solid fa-mountain\"><\/i>\n            <\/div>\n            <div class=\"lab-title\">Laboratorium Geoteknik<\/div>\n        <\/a>\n\n        <!-- LAB 3: JALAN DAN TRANSPORTASI -->\n        <a href=\"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/lab-mekanika-fluida\/\" target=\"_blank\" class=\"lab-card\">\n            <div class=\"lab-icon-box\">\n                <i class=\"fa-solid fa-road\"><\/i>\n            <\/div>\n            <div class=\"lab-title\">Laboratorium Jalan Dan Transportasi<\/div>\n        <\/a>\n\n        <!-- LAB 4: MEKANIKA FLUIDA -->\n        <a href=\"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/lab-transportasi-dan-jalan\/\" target=\"_blank\" class=\"lab-card\">\n            <div class=\"lab-icon-box\">\n                <i class=\"fa-solid fa-water\"><\/i>\n            <\/div>\n            <div class=\"lab-title\">Laboratorium Mekanika Fluida<\/div>\n        <\/a>\n\n        <!-- LAB 5: KOMPUTASI -->\n        <a href=\"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/laboratorium-komputasi\/\" target=\"_blank\" class=\"lab-card\">\n            <div class=\"lab-icon-box\">\n                <i class=\"fa-solid fa-laptop-code\"><\/i>\n            <\/div>\n            <div class=\"lab-title\">Laboratorium Komputasi<\/div>\n        <\/a>\n\n        <!-- LAB 6: PERANCANGAN DAN MANAJEMEN KONSTRUKSI -->\n        <a href=\"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/laboratorium-perancangan-dan-manajemen-konstruksi\/\" target=\"_blank\" class=\"lab-card\">\n            <div class=\"lab-icon-box\">\n                <i class=\"fa-solid fa-helmet-safety\"><\/i>\n            <\/div>\n            <div class=\"lab-title\">Laboratorium Perancangan Dan Manajemen Konstruksi<\/div>\n        <\/a>\n\n    <\/div>\n\n<\/div>\n\n<!-- JAVASCRIPT EFEK KLIK INTERAKTIF -->\n<script>\n(function() {\n    function initLabMenu() {\n        const cards = document.querySelectorAll(\".lab-card\");\n\n        cards.forEach(card => {\n            card.addEventListener(\"click\", function() {\n                this.classList.add(\"is-active\");\n                setTimeout(() => {\n                    this.classList.remove(\"is-active\");\n                }, 250);\n            });\n        });\n    }\n\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initLabMenu);\n    } else {\n        initLabMenu();\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>Laboratorium Struktur (Makro &#038; Mikro) Laboratorium Geoteknik Laboratorium Jalan Dan Transportasi Laboratorium Mekanika Fluida Laboratorium Komputasi Laboratorium Perancangan Dan Manajemen Konstruksi<\/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-505","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/wp-json\/wp\/v2\/pages\/505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/wp-json\/wp\/v2\/comments?post=505"}],"version-history":[{"count":10,"href":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/wp-json\/wp\/v2\/pages\/505\/revisions"}],"predecessor-version":[{"id":1382,"href":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/wp-json\/wp\/v2\/pages\/505\/revisions\/1382"}],"wp:attachment":[{"href":"https:\/\/tekniksipil.uin-malang.ac.id\/tr\/wp-json\/wp\/v2\/media?parent=505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}