{"id":828,"date":"2026-07-30T06:05:02","date_gmt":"2026-07-30T06:05:02","guid":{"rendered":"https:\/\/teknik.uin-malang.ac.id\/?page_id=828"},"modified":"2026-08-03T14:05:25","modified_gmt":"2026-08-03T14:05:25","slug":"layanan","status":"publish","type":"page","link":"https:\/\/teknik.uin-malang.ac.id\/en\/layanan\/","title":{"rendered":"Layanan"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"828\" class=\"elementor elementor-828\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0602ac e-flex e-con-boxed e-con e-parent\" data-id=\"a0602ac\" 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-16f24b9 elementor-widget elementor-widget-text-editor\" data-id=\"16f24b9\" 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.ideal-menu-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 BAR UTAMA DENGAN PROPORSI KOTAK PRESISI *\/\n.ideal-unified-bar {\n    display: flex;\n    width: 100%;\n    max-width: 1200px; \/* Diperlebar agar 5 menu bernapas lega *\/\n    background: linear-gradient(135deg, rgba(10, 22, 48, 0.95) 0%, rgba(15, 32, 67, 0.92) 50%, rgba(6, 15, 36, 0.95) 100%);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1.5px solid rgba(212, 175, 55, 0.5);\n    border-radius: 20px;\n    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5),\n                0 0 25px rgba(212, 175, 55, 0.2),\n                inset 0 1px 1px rgba(255, 255, 255, 0.3);\n    overflow: hidden;\n}\n\n\/* ITEM MENU DENGAN BALANS PROPORSI SAMAN (EQUAL FLEX) *\/\n.ideal-menu-item {\n    flex: 1 1 0px; \/* Pembagian selebar 1\/5 sama rata *\/\n    min-width: 0;   \/* Mencegah overflow *\/\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 22px 16px; \/* Padding ideal presisi *\/\n    text-decoration: none;\n    color: #ffffff;\n    position: relative;\n    cursor: pointer;\n    transition: background 0.3s ease, border-color 0.3s ease;\n    border-right: 1px solid rgba(212, 175, 55, 0.25);\n}\n\n.ideal-menu-item:last-child {\n    border-right: none;\n}\n\n\/* HOVER EFFECT ELEGANT *\/\n.ideal-menu-item:hover {\n    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(212, 175, 55, 0.25) 100%);\n    z-index: 2;\n}\n\n\/* ANIMASI ZOOM-IN DARI KECIL KE BESAR SAAT DIKLIK (:active) *\/\n.ideal-menu-item:active {\n    animation: zoomIdeal 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;\n}\n\n@keyframes zoomIdeal {\n    0% {\n        transform: scale(0.92);\n    }\n    50% {\n        transform: scale(1.08);\n        box-shadow: 0 0 30px rgba(212, 175, 55, 0.8),\n                    0 0 15px rgba(255, 255, 255, 0.8);\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\/* PROPORSI KONTEN KIRI (IKON & TEKS) *\/\n.item-left-content {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0; \/* Menjaga text-wrapping yang rapi *\/\n}\n\n\/* IKON BOX PROPORSIAL *\/\n.item-icon-box {\n    width: 44px;\n    height: 44px;\n    background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, rgba(10, 22, 48, 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}\n\n.ideal-menu-item:hover .item-icon-box {\n    background: linear-gradient(135deg, #d4af37 0%, #f3e0aa 100%);\n    border-color: #ffffff;\n    transform: scale(1.08);\n}\n\n.item-icon-box i {\n    font-size: 19px;\n    color: #f3e0aa;\n    transition: color 0.3s ease;\n}\n\n.ideal-menu-item:hover .item-icon-box i {\n    color: #060f24;\n}\n\n\/* TEKS LABELS PROPORSIAL & ANTI TERPOTONG SAKIT MATA *\/\n.item-title {\n    font-size: 13.5px; \/* Ukuran font pas untuk 5 kolom *\/\n    font-weight: 700;\n    line-height: 1.35;\n    color: #ffffff;\n    letter-spacing: 0.2px;\n    transition: color 0.3s ease;\n    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),\n                 0 2px 4px rgba(0, 0, 0, 0.8);\n}\n\n.ideal-menu-item:hover .item-title {\n    color: #f3e0aa;\n}\n\n\/* PANAH SEGITIGA INDIKATOR *\/\n.item-arrow {\n    font-size: 11px;\n    color: #d4af37;\n    margin-left: 8px;\n    flex-shrink: 0;\n    transition: transform 0.3s ease, color 0.3s ease;\n    opacity: 0.8;\n}\n\n.ideal-menu-item:hover .item-arrow {\n    opacity: 1;\n    transform: translateX(4px);\n    color: #ffffff;\n}\n\n\/* RESPONSIVE AGAR PROPORSI TETAP IDEAL DI TABLET & HP *\/\n@media (max-width: 1024px) {\n    .ideal-unified-bar {\n        flex-wrap: wrap;\n    }\n    .ideal-menu-item {\n        flex: 1 1 33.33%; \/* Jadi 3 kolom di tablet *\/\n        border-bottom: 1px solid rgba(212, 175, 55, 0.2);\n    }\n}\n\n@media (max-width: 640px) {\n    .ideal-menu-item {\n        flex: 1 1 100%; \/* Jadi 1 kolom penuh di HP *\/\n        border-right: none;\n    }\n}\n<\/style>\n\n<section class=\"ideal-menu-section\">\n    <div class=\"ideal-unified-bar\">\n        \n        <!-- MENU 1: Fasilitas -->\n        <a href=\"#\" class=\"ideal-menu-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-building-user\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Fasilitas<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- MENU 2: Template Surat-Surat FT -->\n        <a href=\"#\" class=\"ideal-menu-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-file-signature\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Template<br>Surat FT<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- MENU 3: Kepuasan Layanan -->\n        <a href=\"#\" class=\"ideal-menu-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-face-smile-beam\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Kepuasan<br>Layanan<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- MENU 4: Hasil Kepuasan Layanan -->\n        <a href=\"#\" class=\"ideal-menu-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-chart-column\"><\/i>\n                <\/div>\n                <span class=\"item-title\">Hasil Kepuasan<br>Layanan<\/span>\n            <\/div>\n            <i class=\"fa-solid fa-play item-arrow\"><\/i>\n        <\/a>\n\n        <!-- MENU 5: LAPOR \u2013 FT UIN -->\n        <a href=\"#\" class=\"ideal-menu-item\">\n            <div class=\"item-left-content\">\n                <div class=\"item-icon-box\">\n                    <i class=\"fa-solid fa-bullhorn\"><\/i>\n                <\/div>\n                <span class=\"item-title\">LAPOR \u2013<br>FT UIN<\/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>Fasilitas TemplateSurat FT KepuasanLayanan Hasil KepuasanLayanan LAPOR \u2013FT UIN<\/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-828","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teknik.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/pages\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teknik.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teknik.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teknik.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teknik.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":7,"href":"https:\/\/teknik.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/pages\/828\/revisions"}],"predecessor-version":[{"id":1279,"href":"https:\/\/teknik.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/pages\/828\/revisions\/1279"}],"wp:attachment":[{"href":"https:\/\/teknik.uin-malang.ac.id\/en\/wp-json\/wp\/v2\/media?parent=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}