{"id":751,"date":"2026-07-30T05:33:28","date_gmt":"2026-07-30T05:33:28","guid":{"rendered":"https:\/\/teknik.uin-malang.ac.id\/?page_id=751"},"modified":"2026-08-03T13:21:55","modified_gmt":"2026-08-03T13:21:55","slug":"akademik","status":"publish","type":"page","link":"https:\/\/teknik.uin-malang.ac.id\/ar\/akademik\/","title":{"rendered":"Akademik"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"751\" class=\"elementor elementor-751\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70ce74e e-flex e-con-boxed e-con e-parent\" data-id=\"70ce74e\" 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-353f52d elementor-widget elementor-widget-text-editor\" data-id=\"353f52d\" 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 Relevan -->\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', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n\/* SECTION UTAMA: BACKGROUND BIRU TUA KEEMASAN *\/\n.academic-menu-section {\n    width: 100%;\n    padding: 70px 20px;\n    background: radial-gradient(circle at 50% 30%, #172554 0%, #0f172a 60%, #030712 100%);\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n\/* Akses Cahaya & Partikel Emas di Background *\/\n.academic-menu-section::before {\n    content: \"\";\n    position: absolute;\n    width: 650px;\n    height: 650px;\n    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0) 70%);\n    top: -200px;\n    left: -150px;\n    pointer-events: none;\n}\n\n.academic-menu-section::after {\n    content: \"\";\n    position: absolute;\n    width: 650px;\n    height: 650px;\n    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0) 70%);\n    bottom: -200px;\n    right: -150px;\n    pointer-events: none;\n}\n\n\/* CONTAINER UTAMA MENU *\/\n.academic-menu-container {\n    max-width: 950px;\n    width: 100%;\n    position: relative;\n    z-index: 2;\n}\n\n\/* JUDUL SECTION *\/\n.academic-header-title {\n    text-align: center;\n    font-size: 30px;\n    font-weight: 700;\n    background: linear-gradient(135deg, #ffffff 40%, #f3e0aa 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    margin-bottom: 8px;\n    letter-spacing: 0.5px;\n}\n\n.academic-header-line {\n    width: 75px;\n    height: 4px;\n    background: linear-gradient(90deg, #d4af37, #f3e0aa);\n    margin: 0 auto 40px;\n    border-radius: 10px;\n}\n\n\/* LIST MENU BERBENTUK GRID CARD *\/\n.academic-menu-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n}\n\n\/* ITEM KARTU MENU (BASE STYLE) *\/\n.academic-menu-item {\n    border-radius: 18px;\n    padding: 22px 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-decoration: none;\n    color: #ffffff;\n    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);\n    border: 1px solid rgba(255, 255, 255, 0.18);\n    position: relative;\n    overflow: hidden;\n    cursor: pointer;\n    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n}\n\n.academic-menu-item:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 18px 35px rgba(212, 175, 55, 0.35);\n    border-color: #d4af37;\n}\n\n\/* WARNA BERBEDA & ELEGAN UNTUK SETIAP KOTAK MENU *\/\n.card-1 { background: linear-gradient(135deg, #0d9488 0%, #115e59 100%); } \/* Teal *\/\n.card-2 { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); } \/* Royal Blue *\/\n.card-3 { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); } \/* Purple *\/\n.card-4 { background: linear-gradient(135deg, #059669 0%, #065f46 100%); } \/* Emerald *\/\n.card-5 { background: linear-gradient(135deg, #b45309 0%, #78350f 100%); } \/* Amber Gold *\/\n.card-6 { background: linear-gradient(135deg, #db2777 0%, #9d174d 100%); } \/* Rose Gold *\/\n.card-7 { background: linear-gradient(135deg, #0284c7 0%, #075985 100%); } \/* Ocean Blue *\/\n.card-8 { background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); } \/* Indigo *\/\n.card-9 { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); } \/* Slate Dark *\/\n\n\/* ===================================================\n   ANIMASI UNIK SAAT DIKLIK (:active) PADA SETIAP MENU\n   =================================================== *\/\n\n\/* 1. Program Studi: Pulse & Scale *\/\n.card-1:active { animation: animPulse 0.4s ease forwards; }\n@keyframes animPulse {\n    0% { transform: scale(0.92); }\n    50% { transform: scale(1.1); box-shadow: 0 0 35px #0d9488; }\n    100% { transform: scale(1); }\n}\n\n\/* 2. SDM: Flip Tilt Perspective *\/\n.card-2:active { animation: animFlip 0.4s ease forwards; }\n@keyframes animFlip {\n    0% { transform: perspective(400px) rotateX(0deg); }\n    50% { transform: perspective(400px) rotateX(-20deg) scale(1.05); }\n    100% { transform: perspective(400px) rotateX(0deg); }\n}\n\n\/* 3. Kerjasama: Rubber Band Shake *\/\n.card-3:active { animation: animRubber 0.4s ease forwards; }\n@keyframes animRubber {\n    0% { transform: scale(1); }\n    30% { transform: scaleX(1.15) scaleY(0.85); }\n    60% { transform: scaleX(0.85) scaleY(1.15); }\n    100% { transform: scale(1); }\n}\n\n\/* 4. Publikasi: Bounce Up *\/\n.card-4:active { animation: animBounce 0.4s ease forwards; }\n@keyframes animBounce {\n    0% { transform: translateY(0); }\n    40% { transform: translateY(-15px) scale(1.05); }\n    100% { transform: translateY(0); }\n}\n\n\/* 5. Pendaftaran Online: Glow Flash Burst *\/\n.card-5:active { animation: animGlow 0.4s ease forwards; }\n@keyframes animGlow {\n    0% { transform: scale(0.95); }\n    50% { transform: scale(1.08); box-shadow: 0 0 45px #f59e0b; }\n    100% { transform: scale(1); }\n}\n\n\/* 6. Achievement Center: Rotate Wobble *\/\n.card-6:active { animation: animWobble 0.4s ease forwards; }\n@keyframes animWobble {\n    0% { transform: rotate(0deg); }\n    25% { transform: rotate(-8deg) scale(1.05); }\n    75% { transform: rotate(8deg) scale(1.05); }\n    100% { transform: rotate(0deg); }\n}\n\n\/* 7. Kurikulum: Slide Push Right *\/\n.card-7:active { animation: animSlide 0.4s ease forwards; }\n@keyframes animSlide {\n    0% { transform: translateX(0); }\n    50% { transform: translateX(12px) scale(1.03); }\n    100% { transform: translateX(0); }\n}\n\n\/* 8. Mata Kuliah: Shimmer Glitch *\/\n.card-8:active { animation: animGlitch 0.4s ease forwards; }\n@keyframes animGlitch {\n    0% { transform: translate(0); }\n    20% { transform: translate(-5px, 5px); }\n    60% { transform: translate(5px, -5px); }\n    100% { transform: translate(0); }\n}\n\n\/* 9. Dokumen Akademik: Pop-In Elastic *\/\n.card-9:active { animation: animElastic 0.4s ease forwards; }\n@keyframes animElastic {\n    0% { transform: scale(0.8); }\n    70% { transform: scale(1.12); }\n    100% { transform: scale(1); }\n}\n\n\/* KONTEN KIRI & IKON *\/\n.item-left-content {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n}\n\n.item-icon-box {\n    width: 44px;\n    height: 44px;\n    background: rgba(255, 255, 255, 0.18);\n    backdrop-filter: blur(5px);\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    transition: background 0.3s ease, transform 0.3s ease;\n}\n\n.academic-menu-item:hover .item-icon-box {\n    background: #d4af37;\n    transform: scale(1.1);\n}\n\n.item-icon-box i {\n    font-size: 18px;\n    color: #ffffff;\n    transition: color 0.3s ease;\n}\n\n.academic-menu-item:hover .item-icon-box i {\n    color: #0b132b;\n}\n\n\/* TEKS TITLE *\/\n.item-title {\n    font-size: 16px;\n    font-weight: 700;\n    color: #ffffff;\n    letter-spacing: 0.3px;\n    text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n\n\/* PANAH KANAN *\/\n.item-arrow {\n    font-size: 12px;\n    color: rgba(255, 255, 255, 0.8);\n    transition: transform 0.3s ease, color 0.3s ease;\n}\n\n.academic-menu-item:hover .item-arrow {\n    transform: translateX(4px);\n    color: #f3e0aa;\n}\n\n\/* RESPONSIVE DESIGN *\/\n@media (max-width: 900px) {\n    .academic-menu-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 576px) {\n    .academic-menu-grid {\n        grid-template-columns: 1fr;\n    }\n    .academic-menu-item {\n        padding: 18px 16px;\n    }\n    .item-title {\n        font-size: 15px;\n    }\n}\n<\/style>\n\n<section class=\"academic-menu-section\">\n    <div class=\"academic-menu-container\">\n        \n        <h2 class=\"academic-header-title\">Layanan Akademik &#038; Teknik<\/h2>\n        <div class=\"academic-header-line\"><\/div>\n\n        <div class=\"academic-menu-grid\">\n            \n            <!-- 1. Program Studi (Animasi: Pulse & Scale) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/program-studi\/\" target=\"_blank\" class=\"academic-menu-item card-1\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-graduation-cap\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">Program Studi<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n            <!-- 2. SDM (Animasi: Flip Perspective) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/sdm\/\" target=\"_blank\" class=\"academic-menu-item card-2\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-users-gear\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">SDM<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n            <!-- 3. Kerjasama (Animasi: Rubber Band) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/kerjasama\/\" target=\"_blank\" class=\"academic-menu-item card-3\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-handshake\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">Kerjasama<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n            <!-- 4. Publikasi (Animasi: Bounce Up) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/publikasi\/\" target=\"_blank\" class=\"academic-menu-item card-4\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-book-bookmark\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">Publikasi<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n            <!-- 5. Pendaftaran Online (Animasi: Glow Burst) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/pendaftaran-online\/\" target=\"_blank\" class=\"academic-menu-item card-5\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-laptop-code\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">Pendaftaran Online<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n            <!-- 6. Achievement Center (Animasi: Rotate Wobble) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/achievement-center\/\" target=\"_blank\" class=\"academic-menu-item card-6\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-trophy\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">Achievement Center<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n            <!-- 7. Kurikulum (Animasi: Slide Push Right) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/kurikulum\/\" target=\"_blank\" class=\"academic-menu-item card-7\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-layer-group\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">Kurikulum<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n            <!-- 8. Mata Kuliah (Animasi: Shimmer Glitch) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/mata-kuliah-2\/\" target=\"_blank\" class=\"academic-menu-item card-8\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-list-check\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">Mata Kuliah<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n            <!-- 9. Dokumen Akademik (Animasi: Pop Elastic) -->\n            <a href=\"https:\/\/teknik.uin-malang.ac.id\/ar\/dokumen-akademik-2\/\" target=\"_blank\" class=\"academic-menu-item card-9\">\n                <div class=\"item-left-content\">\n                    <div class=\"item-icon-box\">\n                        <i class=\"fa-solid fa-file-shield\"><\/i>\n                    <\/div>\n                    <span class=\"item-title\">Dokumen Akademik<\/span>\n                <\/div>\n                <i class=\"fa-solid fa-play item-arrow\"><\/i>\n            <\/a>\n\n        <\/div>\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>Layanan Akademik &#038; Teknik Program Studi SDM Kerjasama Publikasi Pendaftaran Online Achievement Center Kurikulum Mata Kuliah Dokumen Akademik<\/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-751","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/pages\/751","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=751"}],"version-history":[{"count":4,"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/pages\/751\/revisions"}],"predecessor-version":[{"id":1252,"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/pages\/751\/revisions\/1252"}],"wp:attachment":[{"href":"https:\/\/teknik.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/media?parent=751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}