{"id":1118,"date":"2026-07-03T21:57:30","date_gmt":"2026-07-03T21:57:30","guid":{"rendered":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/?page_id=1118"},"modified":"2026-07-30T09:01:59","modified_gmt":"2026-07-30T09:01:59","slug":"tata_kelola","status":"publish","type":"page","link":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/","title":{"rendered":"Tata_kelola"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nTop Bar - Follow Us & Search<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<!-- Font Awesome -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n<style>\n\n*, *::before, *::after{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\nbody{\n background:transparent;\n font-family:'Poppins', sans-serif;\n}\n\n\/* =====================================================\n TOP BAR\n===================================================== *\/\n.topbar-ti{\n display:flex;\n align-items:center;\n justify-content:space-between;\n\n width:100%;\n background:#3559DB;\n\n padding:14px 28px;\n\n position:relative;\n}\n\n\/* ===== FOLLOW US + ICONS (Font Awesome) ===== *\/\n.follow-us-box{\n display:flex;\n align-items:center;\n gap:12px;\n flex-wrap:wrap;\n}\n.follow-title{\n color:#fff;\n font-size:18px;\n font-weight:700;\n line-height:1.2;\n white-space:nowrap;\n}\n.social-icons{\n display:flex;\n align-items:center;\n gap:12px;\n flex-wrap:wrap;\n}\n.social-btn{\n width:40px;\n height:40px;\n background:#fff;\n border-radius:50%;\n display:flex;\n align-items:center;\n justify-content:center;\n text-decoration:none;\n transition:all .3s ease;\n flex-shrink:0;\n}\n.social-btn i{\n color:#3457d5;\n font-size:20px;\n}\n.social-btn:hover{\n transform:translateY(-3px);\n}\n\n\/* ===== TANGGAL + SEARCH (KANAN) ===== *\/\n.topbar-right{\n display:flex;\n align-items:center;\n gap:20px;\n}\n\n.topbar-date{\n color:#ffffff;\n font-size:22px;\n font-weight:400;\n white-space:nowrap;\n}\n\n.topbar-search-btn{\n background:none;\n border:none;\n cursor:pointer;\n padding:8px;\n display:flex;\n align-items:center;\n justify-content:center;\n}\n\n\/* =====================================================\n MOBILE\n===================================================== *\/\n@media (max-width:768px){\n\n .topbar-ti{\n flex-direction:column;\n align-items:center;\n gap:14px;\n\n padding:20px 20px 24px;\n }\n\n \/* tombol search nempel di pojok kanan atas *\/\n .topbar-search-btn{\n position:absolute;\n top:14px;\n right:14px;\n }\n\n .topbar-right{\n order:-1;\n justify-content:center;\n width:100%;\n }\n\n .topbar-date{\n font-size:12px;\n }\n\n .topbar-follow{\n order:1;\n flex-direction:column;\n gap:12px;\n }\n\n .topbar-label{\n font-size:14px;\n }\n\n \/* ===== FOLLOW US BOX (mobile) ===== *\/\n .follow-us-box{\n order:1;\n justify-content:center;\n text-align:center;\n gap:10px;\n width:100%;\n }\n .follow-title{\n width:100%;\n font-size:16px;\n }\n .social-icons{\n justify-content:center;\n width:100%;\n gap:10px;\n }\n .social-btn{\n width:38px;\n height:38px;\n }\n .social-btn i{\n font-size:18px;\n }\n\n}\n\n\/* Mobile kecil *\/\n@media (max-width:480px){\n .follow-title{\n font-size:15px;\n }\n .social-btn{\n width:34px;\n height:34px;\n }\n .social-btn i{\n font-size:16px;\n }\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"topbar-ti\">\n\n <!-- ===== FOLLOW US + ICONS ===== -->\n <div class=\"follow-us-box\">\n <div class=\"follow-title\">\n Follow Us :\n <\/div>\n <div class=\"social-icons\">\n <a href=\"https:\/\/instagram.com\/\" target=\"_blank\" class=\"social-btn\" aria-label=\"Instagram\">\n <i class=\"fab fa-instagram\"><\/i>\n <\/a>\n <a href=\"https:\/\/youtube.com\/\" target=\"_blank\" class=\"social-btn\" aria-label=\"YouTube\">\n <i class=\"fab fa-youtube\"><\/i>\n <\/a>\n <a href=\"https:\/\/wa.me\/6281234567890\" target=\"_blank\" class=\"social-btn\" aria-label=\"WhatsApp\">\n <i class=\"fab fa-whatsapp\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- ===== TANGGAL & SEARCH ===== -->\n <div class=\"topbar-right\">\n <span class=\"topbar-date\" id=\"topbar-datetime\"><\/span>\n <\/div>\n\n <!-- ===== SEARCH BUTTON ===== -->\n <button id=\"btn-search-open\" class=\"topbar-search-btn\" aria-label=\"Buka pencarian\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 20 20\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" fill=\"transparent\" stroke=\"#ffffff\" stroke-width=\"2.4\"\/>\n <line x1=\"16\" y1=\"16\" x2=\"21\" y2=\"21\" stroke=\"#ffffff\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n\n<\/div>\n\n<!-- =========================================\nSEARCH OVERLAY\n========================================= -->\n<div id=\"search-overlay\" style=\"\n display:none;\n position:fixed;\n inset:0;\n background:rgba(0,0,0,0.78);\n z-index:2147483647;\n align-items:center;\n justify-content:center;\n flex-direction:column;\n gap:28px;\n padding:20px;\n\">\n\n <!-- CLOSE BUTTON -->\n <button id=\"btn-search-close\" style=\"\n width:64px;\n height:64px;\n border:none;\n border-radius:50%;\n background:#305CDE;\n cursor:pointer;\n display:flex;\n align-items:center;\n justify-content:center;\n padding:0;\n transition:0.3s;\n \">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"none\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" stroke=\"#ffffff\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" stroke=\"#ffffff\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n\n <!-- SEARCH FORM -->\n <form id=\"search-form-overlay\" method=\"get\" style=\"\n display:flex;\n align-items:center;\n width:min(760px,92vw);\n height:72px;\n background:#ffffff;\n border-radius:14px;\n overflow:hidden;\n box-shadow:0 8px 32px rgba(0,0,0,0.18);\n \">\n <input\n id=\"search-input-overlay\"\n type=\"text\"\n name=\"s\"\n placeholder=\"Search Here...\"\n autocomplete=\"off\"\n style=\"\n flex:1;\n height:100%;\n border:none;\n outline:none;\n background:transparent;\n color:#333;\n font-size:18px;\n padding:0 28px;\n \"\n >\n <button type=\"submit\" style=\"\n width:88px;\n height:100%;\n border:none;\n background:#305CDE;\n cursor:pointer;\n display:flex;\n align-items:center;\n justify-content:center;\n flex-shrink:0;\n \">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"34\" height=\"34\" viewBox=\"0 0 24 24\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\" fill=\"transparent\" stroke=\"#ffffff\" stroke-width=\"2.8\"\/>\n <line x1=\"16\" y1=\"16\" x2=\"21\" y2=\"21\" stroke=\"#ffffff\" stroke-width=\"2.8\" stroke-linecap=\"round\"\/>\n <\/svg>\n <\/button>\n <\/form>\n\n<\/div>\n\n<!-- =========================================\nMOBILE STYLE (SEARCH OVERLAY)\n========================================= -->\n<style>\n\n@media (max-width:768px){\n\n #btn-search-close{\n width:56px !important;\n height:56px !important;\n }\n\n #btn-search-close svg{\n width:28px !important;\n height:28px !important;\n }\n\n #search-form-overlay{\n height:62px !important;\n }\n\n #search-input-overlay{\n font-size:15px !important;\n padding:0 18px !important;\n }\n\n #search-form-overlay button svg{\n width:28px !important;\n height:28px !important;\n }\n\n #search-overlay{\n align-items:flex-start !important;\n justify-content:flex-start !important;\n padding-top:100px !important;\n gap:16px !important;\n }\n\n}\n\n<\/style>\n\n<!-- =========================================\nSCRIPT: JAM BERJALAN + BUKA\/TUTUP SEARCH\n========================================= -->\n<script>\n(function () {\n\n \/* =========================================\n JAM & TANGGAL BERJALAN\n ========================================= *\/\n var dtEl = document.getElementById('topbar-datetime');\n\n var bulan = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n function updateClock(){\n var now = new Date();\n\n var tanggal = String(now.getDate()).padStart(2,'0');\n var namaBulan = bulan[now.getMonth()];\n var tahun = now.getFullYear();\n\n var jam24 = now.getHours();\n var ampm = jam24 >= 12 ? 'PM' : 'AM';\n var jam12 = jam24 % 12;\n if (jam12 === 0) jam12 = 12;\n\n var menit = String(now.getMinutes()).padStart(2,'0');\n var detik = String(now.getSeconds()).padStart(2,'0');\n\n dtEl.textContent = namaBulan + ' ' + tanggal + ', ' + tahun + ' ' + jam12 + ':' + menit + ':' + detik + ampm;\n }\n\n updateClock();\n setInterval(updateClock, 1000);\n\n \/* =========================================\n BUKA \/ TUTUP SEARCH OVERLAY\n ========================================= *\/\n var btnOpen = document.getElementById('btn-search-open');\n var btnClose = document.getElementById('btn-search-close');\n var overlay = document.getElementById('search-overlay');\n var input = document.getElementById('search-input-overlay');\n\n function openSearch() {\n overlay.style.display = 'flex';\n document.body.style.overflow = 'hidden';\n setTimeout(function () { input.focus(); }, 50);\n }\n\n function closeSearch() {\n overlay.style.display = 'none';\n document.body.style.overflow = '';\n }\n\n btnOpen.addEventListener('click', openSearch);\n btnClose.addEventListener('click', closeSearch);\n\n overlay.addEventListener('click', function (e) {\n if (e.target === overlay) closeSearch();\n });\n\n document.addEventListener('keydown', function (e) {\n if (e.key === 'Escape' && overlay.style.display === 'flex') closeSearch();\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bcaecf e-con-full e-flex e-con e-parent\" data-id=\"6bcaecf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-7707d4e e-con-full e-flex e-con e-child\" data-id=\"7707d4e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a344a87 elementor-widget elementor-widget-html\" data-id=\"a344a87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Logo Program Studi TI<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== RESET ===== *\/\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n background: transparent;\n margin: 0;\n padding: 0;\n font-family: 'Poppins', sans-serif;\n}\n\n\/* =====================================================\n WRAPPER LOGO (opsional, bisa dihapus kalau sudah\n ditempatkan dalam container header sendiri)\n===================================================== *\/\n.site-logo-ti {\n display: flex;\n align-items: center;\n padding: 14px 28px;\n}\n\n\/* ===== LOGO + TEKS ===== *\/\n.logo-block-ti {\n display: flex;\n align-items: center;\n gap: 14px;\n text-decoration: none;\n flex-shrink: 0;\n}\n\n.logo-block-ti img {\n height: 56px;\n width: auto;\n flex-shrink: 0;\n}\n\n.logo-text-ti {\n display: flex;\n flex-direction: column;\n line-height: 1.15;\n}\n\n.logo-text-ti .logo-title {\n font-size: 20px;\n font-weight: 800;\n color: #3559DB;\n letter-spacing: 0.3px;\n}\n\n.logo-text-ti .logo-subtitle {\n font-size: 20px;\n font-weight: 800;\n color: #1a1a1a;\n letter-spacing: 0.3px;\n}\n\n\/* =====================================================\n MOBILE\n===================================================== *\/\n@media (max-width: 768px) {\n\n .site-logo-ti {\n width: 100%;\n padding: 10px 16px;\n justify-content: center;\n }\n\n .logo-block-ti {\n flex-direction: column;\n text-align: center;\n }\n\n .logo-text-ti {\n align-items: center;\n }\n\n .logo-block-ti img {\n height: 42px;\n width: auto;\n }\n\n .logo-text-ti .logo-title,\n .logo-text-ti .logo-subtitle {\n font-size: 13px;\n }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"site-logo-ti\">\n <a href=\"\/ti\" class=\"logo-block-ti\">\n <img decoding=\"async\" src=\"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png\" alt=\"Logo Program Studi Teknologi Informasi\">\n <div class=\"logo-text-ti\">\n <span class=\"logo-title\">PROGRAM STUDI<\/span>\n <span class=\"logo-subtitle\">TEKNOLOGI INFORMASI<\/span>\n <\/div>\n <\/a>\n<\/div>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b25d3f1 e-flex e-con-boxed e-con e-child\" data-id=\"b25d3f1\" 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-4ff4f89 elementor-widget elementor-widget-html\" data-id=\"4ff4f89\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Menu Program Studi TI<\/title>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ===== RESET ===== *\/\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n background: transparent;\n margin: 0;\n padding: 0;\n font-family: 'Poppins', sans-serif;\n}\n\n\/* class untuk lock scroll saat menu terbuka \u2014 tanpa position fixed *\/\nhtml.no-scroll,\nbody.no-scroll {\n overflow: hidden;\n height: 100%;\n}\n\n\/* =====================================================\n WRAPPER MENU (opsional, sesuaikan dengan container\n header yang sudah ada. Default: rata kanan)\n===================================================== *\/\n.site-menu-ti {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 14px 28px;\n}\n\n\/* ===== WRAPPER MENU ===== *\/\n.menu-wrapper {\n position: relative;\n flex-shrink: 0;\n}\n\n\/* ===== HAMBURGER ===== *\/\n.menu-toggle {\n display: none;\n background: #3559DB;\n color: #fff;\n border: none;\n border-radius: 8px;\n padding: 10px 14px;\n font-size: 22px;\n cursor: pointer;\n font-family: 'Poppins', sans-serif;\n}\n\n\/* ===== MENU WRAPPER ===== *\/\n.menu-ti {\n font-family: 'Poppins', sans-serif;\n}\n\n\/* ===== UL LEVEL 1 ===== *\/\n.menu-ti > ul {\n list-style: none;\n display: flex;\n flex-wrap: nowrap;\n gap: 6px;\n align-items: center;\n padding: 0;\n margin: 0;\n}\n\n\/* ===== LI LEVEL 1 ===== *\/\n.menu-ti > ul > li {\n position: relative;\n}\n\n.menu-ti > ul > li > a.active {\n background: #032B63;\n color: #fff;\n}\n\n\/* ===== TOMBOL LEVEL 1 ===== *\/\n.menu-ti > ul > li > a {\n display: block;\n padding: 9px 16px;\n background: #3559DB;\n color: #fff;\n border-radius: 8px;\n text-decoration: none;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n transition: background 0.25s, box-shadow 0.2s;\n}\n\n.menu-ti > ul > li > a:hover,\n.menu-ti > ul > li.is-open > a {\n background: #2747bd;\n box-shadow: 0 4px 12px rgba(53,89,219,0.35);\n}\n\n\/* ===== SUBMENU BIASA ===== *\/\n.menu-ti > ul > li > ul {\n list-style: none;\n position: fixed;\n min-width: 220px;\n background: #ffffff;\n border-radius: 0 0 8px 8px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n overflow: visible;\n display: none;\n z-index: 99999;\n padding: 0;\n border-top: 3px solid #305CDE;\n}\n\n\/* ===== TRANSPARENT HOVER BRIDGE ===== *\/\n.menu-ti > ul > li > ul::before,\n.menu-ti > ul > li > .mega-menu::before {\n content: '';\n position: absolute;\n top: -10px;\n left: 0;\n width: 100%;\n height: 10px;\n background: transparent;\n}\n\n.menu-ti > ul > li.is-open > ul {\n display: block;\n}\n\n\/* ===== ITEM SUBMENU ===== *\/\n.menu-ti > ul > li > ul > li > a {\n display: block;\n padding: 12px 18px;\n color: #555;\n text-decoration: none;\n font-size: 13px;\n background: #ffffff;\n border-bottom: 1px solid #e5e5e5;\n white-space: nowrap;\n transition: background 0.2s, color 0.2s, padding-left 0.2s;\n}\n\n.menu-ti > ul > li > ul > li:last-child > a {\n border-bottom: none;\n}\n\n.menu-ti > ul > li > ul > li > a:hover {\n background: #eaeaea;\n color: #032B63;\n padding-left: 24px;\n}\n\n\/* ===== MEGA MENU ===== *\/\n.mega-menu {\n position: fixed;\n background: #ffffff;\n display: none;\n padding: 32px 36px;\n grid-template-columns: repeat(4, 1fr);\n gap: 28px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n border-radius: 0 0 8px 8px;\n z-index: 99999;\n min-width: 700px;\n border-top: 3px solid #305CDE;\n}\n\n.menu-ti > ul > li.is-open > .mega-menu {\n display: grid;\n}\n\n\/* ===== KOLOM MEGA MENU ===== *\/\n.mega-column h4 {\n color: #1f3566;\n font-size: 12px;\n font-weight: 700;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 2px solid #3559DB;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.mega-column a {\n display: block;\n text-decoration: none;\n color: #555;\n margin-bottom: 9px;\n font-size: 13px;\n transition: color 0.2s, transform 0.2s;\n}\n\n.mega-column a:hover {\n color: #032B63;\n transform: translateX(4px);\n}\n\n\/* Elemen khusus sidebar mobile \u2014 disembunyikan total di desktop\/tablet lebar *\/\n.menu-panel-header,\n.menu-panel-divider,\n.menu-close-ti,\n.menu-overlay-ti {\n display: none;\n}\n\n\/* =====================================================\n MOBILE\n===================================================== *\/\n@media (max-width: 768px) {\n\n .site-menu-ti {\n width: 100%;\n padding: 10px 16px;\n justify-content: flex-start;\n }\n\n .menu-wrapper {\n position: relative;\n z-index: 999999;\n }\n\n \/* HAMBURGER *\/\n .menu-toggle {\n display: flex !important;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n color: #ffffff;\n font-size: 26px;\n line-height: 1;\n cursor: pointer;\n position: relative;\n z-index: 999999;\n transition: transform 0.3s ease;\n }\n\n .menu-toggle:hover {\n background: transparent;\n box-shadow: none;\n }\n\n .menu-toggle.is-active {\n transform: rotate(90deg);\n display: none !important;\n }\n\n \/* OVERLAY *\/\n .menu-overlay-ti {\n display: block;\n position: fixed;\n inset: 0;\n background: rgba(10,15,40,0.55);\n backdrop-filter: blur(2px);\n z-index: 999996;\n opacity: 0;\n visibility: hidden;\n touch-action: none;\n overscroll-behavior: contain;\n transition: opacity 0.35s ease, visibility 0s linear 0.35s;\n }\n\n .menu-overlay-ti.active {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.35s ease, visibility 0s linear 0s;\n }\n\n \/* PANEL *\/\n .menu-panel-ti {\n position: fixed;\n top: 0;\n left: 0;\n width: 78%;\n max-width: 300px;\n height: 100vh;\n height: 100dvh;\n z-index: 999998;\n background: linear-gradient(165deg, #3f6bf0 0%, #3559DB 45%, #1f3566 100%);\n box-shadow: 12px 0 40px rgba(10,15,40,0.35);\n overflow: visible;\n transform: translateX(-100%);\n transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n .menu-panel-ti.active {\n transform: translateX(0);\n }\n\n \/* ===== HEADER PANEL MOBILE (logo di dalam sidebar) ===== *\/\n .menu-panel-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 14px 18px 0px;\n }\n\n .menu-panel-header .panel-logo-img {\n height: 38px;\n width: auto;\n display: block;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n .menu-panel-header .panel-logo-text {\n display: flex;\n flex-direction: column;\n line-height: 1.25;\n position: relative;\n }\n\n .menu-panel-header .panel-title {\n display: inline-block;\n font-size: 12.5px;\n font-weight: 700;\n color: #ffffff;\n letter-spacing: 0.3px;\n }\n\n .menu-panel-header .panel-subtitle {\n display: inline-block;\n font-size: 12.5px;\n font-weight: 700;\n color: #ffffff;\n letter-spacing: 0.3px;\n }\n\n \/* ===== GARIS PEMISAH ===== *\/\n .menu-panel-divider {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 10px 18px 8px;\n width: 100%;\n }\n\n .menu-panel-divider .line-thin {\n width: 100%;\n height: 1px;\n background: rgba(255, 255, 255, 0.25);\n }\n\n .menu-panel-divider .line-thick {\n width: 100%;\n height: 2px;\n background: rgba(255, 255, 255, 0.6);\n }\n\n \/* ===== TOMBOL CLOSE ===== *\/\n .menu-close-ti {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 24px;\n right: 10px;\n width: auto;\n height: auto;\n padding: 6px;\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n cursor: pointer;\n z-index: 2;\n transition: transform 0.25s ease;\n }\n\n .menu-close-ti:active {\n transform: scale(0.88);\n }\n\n .menu-close-ti svg {\n width: 22px;\n height: 22px;\n stroke: #ffffff;\n stroke-width: 3;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n \/* NAV *\/\n .menu-ti {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 4px 18px 120px;\n overflow-y: auto;\n overscroll-behavior-y: contain;\n -webkit-overflow-scrolling: touch;\n }\n\n .menu-ti > ul {\n flex-direction: column;\n align-items: stretch;\n gap: 1px;\n }\n\n .menu-ti > ul > li {\n width: 100%;\n }\n\n .menu-ti > ul > li > a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 9px 16px;\n font-size: 13px;\n font-weight: 600;\n border-radius: 12px;\n background: transparent;\n color: #fff;\n box-shadow: none;\n letter-spacing: 0.2px;\n }\n\n .menu-ti > ul > li > a:hover,\n .menu-ti > ul > li.is-open > a {\n background: rgba(255,255,255,0.14);\n box-shadow: none;\n }\n\n .menu-ti > ul > li > a.active {\n background: rgba(255,255,255,0.18);\n }\n\n .menu-ti > ul > li > a .chev-ti {\n width: 9px;\n height: 9px;\n border-right: 2px solid rgba(255,255,255,0.75);\n border-bottom: 2px solid rgba(255,255,255,0.75);\n transform: rotate(-45deg);\n transition: transform 0.3s ease;\n flex-shrink: 0;\n }\n\n .menu-ti > ul > li.is-open > a .chev-ti {\n transform: rotate(45deg);\n }\n\n .menu-ti > ul > li::after {\n content: none;\n }\n\n .menu-ti > ul > li > ul,\n .mega-menu {\n position: static !important;\n width: 100% !important;\n min-width: 100% !important;\n background: rgba(0,0,0,0.16);\n border-radius: 10px;\n box-shadow: none;\n border-top: none;\n display: block;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n margin-top: 0;\n padding: 0 !important;\n padding-left: 0 !important;\n margin-left: 0 !important;\n transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;\n }\n\n .menu-ti > ul > li.is-open > ul,\n .menu-ti > ul > li.is-open > .mega-menu {\n max-height: none;\n overflow-y: auto;\n opacity: 1;\n margin-top: 6px;\n margin-bottom: 6px;\n }\n\n .menu-ti > ul > li > ul > li > a {\n background: transparent;\n color: rgba(255,255,255,0.85);\n font-size: 12.5px;\n font-weight: 500;\n padding: 11px 16px !important;\n border-bottom: 1px solid rgba(255,255,255,0.08);\n }\n\n .menu-ti > ul > li > ul > li:last-child > a {\n border-bottom: none;\n }\n\n .menu-ti > ul > li > ul > li > a:hover {\n background: rgba(255,255,255,0.1);\n color: #fff;\n padding-left: 30px;\n }\n\n .menu-ti > ul > li.is-open > .mega-menu {\n display: block !important;\n grid-template-columns: none;\n padding: 8px 6px !important;\n }\n\n .mega-column {\n padding: 10px 10px 20px;\n }\n\n .mega-column h4 {\n color: rgba(255,255,255,0.65);\n border-bottom: 1px solid rgba(255,255,255,0.15);\n }\n\n .mega-column a {\n color: rgba(255,255,255,0.85);\n font-size: 12.5px;\n }\n\n .mega-column a:hover {\n color: #fff;\n }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"site-menu-ti\">\n\n <!-- ===== MENU ===== -->\n <div class=\"menu-wrapper\">\n\n <!-- HAMBURGER -->\n <button class=\"menu-toggle\" id=\"menuToggle\">\n <span id=\"menuToggleIcon\">\u2630<\/span>\n <\/button>\n\n <div class=\"menu-panel-ti\" id=\"menuPanelTI\">\n\n <!-- ===== HEADER PANEL MOBILE (logo, hanya tampil di sidebar HP) ===== -->\n <div class=\"menu-panel-header\">\n <img decoding=\"async\" class=\"panel-logo-img\" src=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg\" alt=\"Logo UIN Salatiga\">\n <div class=\"panel-logo-text\">\n <span class=\"panel-title\">PROGRAM STUDI<\/span>\n <span class=\"panel-subtitle\">TEKNOLOGI INFORMASI<\/span>\n <\/div>\n <\/div>\n\n <!-- ===== GARIS PEMISAH ===== -->\n <div class=\"menu-panel-divider\">\n <div class=\"line-thin\"><\/div>\n <div class=\"line-thick\"><\/div>\n <\/div>\n\n <!-- TOMBOL CLOSE -->\n <button class=\"menu-close-ti\" id=\"menuCloseTI\" aria-label=\"Tutup menu\">\n <svg viewBox=\"0 0 24 24\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" \/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" \/>\n <\/svg>\n <\/button>\n\n <nav class=\"menu-ti\" id=\"menuTI\">\n\n <ul>\n\n <li>\n <a href=\"\/ti\">Beranda<\/a>\n <\/li>\n\n <li>\n <a href=\"\/ti\/profil\">Profil<\/a>\n <\/li>\n\n <li>\n <a href=\"\/ti\/tata_kelola\" class=\"active\">Tata Kelola<\/a>\n <\/li>\n\n <li>\n <a href=\"\/ti\/dosen-pengampu\">Dosen Pengampu<\/a>\n <\/li>\n\n <li>\n <a href=\"#\">Pendidikan <span class=\"chev-ti\"><\/span><\/a>\n <ul>\n <li><a href=\"\/ti\/akreditasi\">Akreditasi<\/a><\/li>\n <li><a href=\"\/ti\/kurikulum\">Kurikulum<\/a><\/li>\n <li><a href=\"\/ti\/pedoman\">Pedoman<\/a><\/li>\n <li><a href=\"\/ti\/sebaran-matkul\">Sebaran Matkul<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Mahasiswa <span class=\"chev-ti\"><\/span><\/a>\n <ul>\n <li><a href=\"\/ti\/prestasi\">Prestasi<\/a><\/li>\n <li><a href=\"\/ti\/hmps\">HMPS<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Penelitian <span class=\"chev-ti\"><\/span><\/a>\n <ul>\n <li><a href=\"\/ti\/e-jurnal\">E-Jurnal<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Pengabdian <span class=\"chev-ti\"><\/span><\/a>\n <ul>\n <li><a href=\"\/ti\/pengabdian-dosen\">Pengabdian Dosen<\/a><\/li>\n <li><a href=\"\/ti\/pengabdian-mhs\">Pengabdian Mhs<\/a><\/li>\n <\/ul>\n <\/li>\n\n <!-- MEGA MENU -->\n <li>\n <a href=\"#\">Layanan <span class=\"chev-ti\"><\/span><\/a>\n\n <div class=\"mega-menu\">\n\n <div class=\"mega-column\">\n <h4>Layanan Mahasiswa<\/h4>\n <a href=\"\/ti\/layanan\/siakad\">SIAKAD<\/a>\n <a href=\"\/ti\/layanan\/smart\">SMART<\/a>\n <a href=\"\/ti\/layanan\/smart-mobile\">SMART Mobile<\/a>\n <a href=\"\/ti\/layanan\/e-class\">E-Class<\/a>\n <a href=\"\/ti\/layanan\/beasiswa\">Beasiswa<\/a>\n <a href=\"\/ti\/layanan\/karir-wirausaha\">Karir dan Wirausaha<\/a>\n <a href=\"\/ti\/layanan\/kesehatan\">Kesehatan<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Dosen<\/h4>\n <a href=\"\/ti\/layanan\/siakad\">SIAKAD<\/a>\n <a href=\"\/ti\/layanan\/smart\">SMART<\/a>\n <a href=\"\/ti\/layanan\/simpis\">SIMPIS<\/a>\n <a href=\"\/ti\/layanan\/siperaga\">SIPERAGA<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Tendik<\/h4>\n <a href=\"\/ti\/layanan\/simpis\">SIMPIS<\/a>\n <a href=\"\/ti\/layanan\/siperaga\">SIPERAGA<\/a>\n <\/div>\n\n <div class=\"mega-column\">\n <h4>Layanan Disabilitas<\/h4>\n <a href=\"\/ti\/layanan\/disabilitas\">Layanan Disabilitas<\/a>\n <a href=\"\/ti\/layanan\/pedoman-disabilitas\">Pedoman<\/a>\n <\/div>\n\n <\/div>\n <\/li>\n\n <li>\n <a href=\"#\">Kerjasama <span class=\"chev-ti\"><\/span><\/a>\n <ul>\n <li><a href=\"\/ti\/kerjasama-ln\">Kerjasama Luar Negeri<\/a><\/li>\n <li><a href=\"\/ti\/kerjasama-dn\">Kerjasama Dalam Negeri<\/a><\/li>\n <li><a href=\"\/ti\/industri\">Industri<\/a><\/li>\n <li><a href=\"\/ti\/asosiasi\">Asosiasi<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"#\">Survei <span class=\"chev-ti\"><\/span><\/a>\n <ul>\n <li><a href=\"\/ti\/survey-vmts\">Survey Pemahaman VMTS<\/a><\/li>\n <li><a href=\"\/ti\/survey-pelayanan\">Survey Kepuasan Pelayanan <br>Akademik<\/a><\/li>\n <\/ul>\n <\/li>\n\n <\/ul>\n\n <\/nav>\n\n <\/div>\n\n <\/div>\n\n <div class=\"menu-overlay-ti\" id=\"menuOverlayTI\"><\/div>\n\n<\/div>\n\n<script>\n(function () {\n\n \/* =========================================\n HAMBURGER TOGGLE\n ========================================= *\/\n const toggleBtn = document.getElementById('menuToggle');\n const toggleIcon = document.getElementById('menuToggleIcon');\n const menuTI = document.getElementById('menuTI');\n const menuPanelTI = document.getElementById('menuPanelTI');\n const overlayTI = document.getElementById('menuOverlayTI');\n const closeBtnTI = document.getElementById('menuCloseTI');\n\n function blockBgScroll(e) {\n if (menuTI && menuTI.contains(e.target)) return;\n e.preventDefault();\n }\n\n function setMenuOpen(willOpen) {\n\n menuPanelTI.classList.toggle('active', willOpen);\n toggleBtn.classList.toggle('is-active', willOpen);\n if (overlayTI) overlayTI.classList.toggle('active', willOpen);\n\n toggleIcon.textContent = willOpen ? '\u2715' : '\u2630';\n\n if (willOpen) {\n document.documentElement.classList.add('no-scroll');\n document.body.classList.add('no-scroll');\n document.addEventListener('touchmove', blockBgScroll, { passive: false });\n document.addEventListener('wheel', blockBgScroll, { passive: false });\n } else {\n document.documentElement.classList.remove('no-scroll');\n document.body.classList.remove('no-scroll');\n document.removeEventListener('touchmove', blockBgScroll, { passive: false });\n document.removeEventListener('wheel', blockBgScroll, { passive: false });\n }\n\n if (!willOpen) {\n items.forEach(function (li) {\n li.classList.remove('is-open');\n });\n }\n }\n\n toggleBtn.addEventListener('click', function () {\n setMenuOpen(!menuPanelTI.classList.contains('active'));\n });\n\n if (closeBtnTI) {\n closeBtnTI.addEventListener('click', function () {\n setMenuOpen(false);\n });\n }\n\n if (overlayTI) {\n overlayTI.addEventListener('click', function () {\n setMenuOpen(false);\n });\n }\n\n \/* =========================================\n DROPDOWN POSITION DESKTOP\n ========================================= *\/\n var GAP = 43;\n\n function positionDropdown(li) {\n\n if (window.innerWidth <= 768) return;\n\n var dropdown =\n li.querySelector(':scope > ul') ||\n li.querySelector(':scope > .mega-menu');\n\n if (!dropdown) return;\n\n var btn = li.querySelector(':scope > a');\n\n var btnRect = btn.getBoundingClientRect();\n\n var isMega = dropdown.classList.contains('mega-menu');\n\n var prevDisplay = dropdown.style.display;\n\n dropdown.style.visibility = 'hidden';\n\n dropdown.style.display = isMega ? 'grid' : 'block';\n\n var dropW = dropdown.offsetWidth;\n\n dropdown.style.display = prevDisplay;\n\n dropdown.style.visibility = '';\n\n dropdown.style.top = (btnRect.bottom + GAP) + 'px';\n\n if (isMega) {\n\n var left = btnRect.right - dropW;\n\n if (left < 8) left = 8;\n\n if (left + dropW > window.innerWidth - 8) {\n left = window.innerWidth - dropW - 8;\n }\n\n dropdown.style.left = left + 'px';\n\n } else {\n\n var left =\n btnRect.left +\n (btnRect.width \/ 2) -\n (dropW \/ 2);\n\n if (left < 8) left = 8;\n\n if (left + dropW > window.innerWidth - 8) {\n left = window.innerWidth - dropW - 8;\n }\n\n dropdown.style.left = left + 'px';\n }\n }\n\n \/* =========================================\n MENU ITEMS\n ========================================= *\/\n var items = document.querySelectorAll('.menu-ti > ul > li');\n\n var closeTimers = new Map();\n\n function cancelClose(li) {\n if (closeTimers.has(li)) {\n clearTimeout(closeTimers.get(li));\n closeTimers.delete(li);\n }\n }\n\n function scheduleClose(li) {\n cancelClose(li);\n var t = setTimeout(function () {\n li.classList.remove('is-open');\n closeTimers.delete(li);\n }, 250);\n closeTimers.set(li, t);\n }\n\n function closeAllExcept(li) {\n items.forEach(function (other) {\n if (other !== li) {\n cancelClose(other);\n other.classList.remove('is-open');\n }\n });\n }\n\n items.forEach(function (li) {\n\n var dropdown =\n li.querySelector(':scope > ul') ||\n li.querySelector(':scope > .mega-menu');\n\n if (!dropdown) return;\n\n li.addEventListener('mouseenter', function () {\n\n if (window.innerWidth <= 768) return;\n\n cancelClose(li);\n closeAllExcept(li);\n\n positionDropdown(li);\n\n li.classList.add('is-open');\n });\n\n li.addEventListener('mouseleave', function () {\n\n if (window.innerWidth <= 768) return;\n\n scheduleClose(li);\n });\n\n dropdown.addEventListener('mouseenter', function () {\n\n if (window.innerWidth <= 768) return;\n\n cancelClose(li);\n closeAllExcept(li);\n\n li.classList.add('is-open');\n });\n\n dropdown.addEventListener('mouseleave', function () {\n\n if (window.innerWidth <= 768) return;\n\n scheduleClose(li);\n });\n\n var link = li.querySelector(':scope > a');\n\n link.addEventListener('click', function (e) {\n\n if (window.innerWidth > 768) return;\n\n e.preventDefault();\n\n items.forEach(function (other) {\n\n if (other !== li) {\n other.classList.remove('is-open');\n }\n\n });\n\n li.classList.toggle('is-open');\n\n });\n\n });\n\n window.addEventListener('scroll', function () {\n\n var open =\n document.querySelector('.menu-ti > ul > li.is-open');\n\n if (open) positionDropdown(open);\n\n }, { passive: true });\n\n window.addEventListener('resize', function () {\n\n var open =\n document.querySelector('.menu-ti > ul > li.is-open');\n\n if (open) positionDropdown(open);\n\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-29ddf72 e-con-full e-flex e-con e-parent\" data-id=\"29ddf72\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45d5c3c elementor-widget elementor-widget-html\" data-id=\"45d5c3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===================================================================\n HALAMAN TATA KELOLA \u2014 STRUKTUR ORGANISASI PRODI TEKNOLOGI INFORMASI\n Cara edit cepat:\n 1. Cari teks di dalam tanda kutip pada elemen <div class=\"nama\">...<\/div>\n dan <div class=\"jabatan\">...<\/div>, lalu ganti sesuai data terbaru.\n 2. Untuk menambah\/menghapus kotak pada baris koordinator, cukup\n salin (copy-paste) satu blok <div class=\"card\">...<\/div> lalu ubah isinya.\n 3. Untuk foto, ganti \"https:\/\/placehold.co\/160x160\/1e3a8a\/ffffff?text=Foto\"\n pada atribut src dengan URL foto masing-masing (opsional, boleh dihapus).\n=================================================================== -->\n\n<style>\n .tk-wrap{\n --navy:#0f2557;\n --blue:#1e40af;\n --blue-light:#2563eb;\n --gold:#c9a227;\n --bg:#f4f7fc;\n --line:#c7d2e8;\n \n font-family:'Poppins','Segoe UI',Arial,sans-serif;\n background:var(--bg);\n padding:60px 20px 80px;\n border-radius:20px 20px 0 0;\n box-sizing:border-box;\n }\n .tk-wrap *{box-sizing:border-box;}\n .tk-header{\n text-align:center;\n max-width:720px;\n margin:0 auto 56px;\n }\n .tk-eyebrow{\n display:inline-block;\n font-size:13px;\n font-weight:700;\n letter-spacing:.14em;\n color:var(--gold);\n text-transform:uppercase;\n margin-bottom:10px;\n }\n .tk-title{\n font-size:34px;\n font-weight:800;\n color:var(--navy);\n margin:0 0 12px;\n line-height:1.25;\n }\n .tk-desc{\n font-size:15.5px;\n color:#5b6b8c;\n line-height:1.7;\n margin:0;\n }\n\n .tk-chart{\n max-width:1180px;\n margin:0 auto;\n display:flex;\n flex-direction:column;\n align-items:center;\n }\n\n .tk-level{\n display:flex;\n justify-content:center;\n flex-wrap:wrap;\n gap:28px;\n position:relative;\n width:100%;\n }\n\n .tk-connector{\n width:2px;\n height:34px;\n background:var(--line);\n }\n\n .tk-branch{\n position:relative;\n width:100%;\n display:flex;\n justify-content:center;\n }\n .tk-branch::before{\n content:\"\";\n position:absolute;\n top:0;\n left:50%;\n width:2px;\n height:34px;\n background:var(--line);\n transform:translateX(-50%);\n }\n .tk-branch .tk-level{\n margin-top:34px;\n }\n .tk-branch .tk-level::before{\n content:\"\";\n position:absolute;\n top:0;\n left:calc(50% - 100000px);\n right:calc(50% - 100000px);\n height:2px;\n background:transparent;\n }\n\n \/* garis horizontal penghubung antar kartu dalam satu level (di atas kartu) *\/\n .tk-level.has-hline{\n padding-top:0;\n }\n .tk-level.has-hline > .card{\n position:relative;\n }\n .tk-level.has-hline > .card::before{\n content:\"\";\n position:absolute;\n top:-34px;\n left:50%;\n width:2px;\n height:34px;\n background:var(--line);\n }\n\n .card{\n background:#ffffff;\n border:1px solid #e3e9f5;\n border-radius:16px;\n padding:22px 20px 20px;\n width:220px;\n text-align:center;\n box-shadow:0 6px 18px rgba(15,37,87,.06);\n transition:transform .2s ease, box-shadow .2s ease;\n }\n .card:hover{\n transform:translateY(-4px);\n box-shadow:0 12px 26px rgba(15,37,87,.14);\n }\n .card.top{\n width:250px;\n background:linear-gradient(160deg,var(--navy),var(--blue-light));\n border:none;\n }\n .card.top .nama{color:#fff;}\n .card.top .jabatan{color:#dbe6ff;}\n .card.top .foto{border-color:#ffffff55;}\n\n .foto{\n width:76px;\n height:76px;\n border-radius:50%;\n object-fit:cover;\n margin:0 auto 12px;\n border:3px solid var(--blue-light);\n display:block;\n }\n .card.top .foto{border-color:var(--gold);}\n\n .jabatan-tag{\n display:inline-block;\n font-size:10.5px;\n font-weight:700;\n letter-spacing:.06em;\n text-transform:uppercase;\n color:var(--blue-light);\n background:#e8eefc;\n padding:3px 10px;\n border-radius:20px;\n margin-bottom:8px;\n }\n .card.top .jabatan-tag{\n color:var(--navy);\n background:var(--gold);\n }\n\n .nama{\n font-size:16px;\n font-weight:700;\n color:var(--navy);\n margin-bottom:2px;\n line-height:1.3;\n }\n .jabatan{\n font-size:12.5px;\n color:#7686a6;\n line-height:1.4;\n }\n\n \/* baris koordinator: kontainer \"inline-flex\" supaya lebar kotak pas\n mengikuti total lebar kartu (bukan lebar penuh halaman). Dengan begitu,\n garis horizontal bisa dihitung TEPAT dari tengah kartu pertama sampai\n tengah kartu terakhir, dan garis vertikal tengah pasti nyambung ke\n kartu Sekretaris di atasnya. *\/\n .koor-group{\n position:relative;\n display:inline-flex;\n justify-content:center;\n gap:24px;\n flex-wrap:wrap;\n margin-top:48px; \/* jarak dari kartu Sekretaris ke kartu koordinator *\/\n }\n \/* garis vertikal tunggal, turun dari kartu Sekretaris ke garis horizontal *\/\n .koor-group::before{\n content:\"\";\n position:absolute;\n top:-48px;\n left:50%;\n width:2px;\n height:34px;\n background:var(--line);\n transform:translateX(-1px);\n }\n \/* garis horizontal, ujungnya PAS di tengah kartu paling kiri & paling kanan\n (setengah lebar kartu = 220px \/ 2 = 110px) *\/\n .koor-group::after{\n content:\"\";\n position:absolute;\n top:-14px;\n left:110px;\n right:110px;\n height:2px;\n background:var(--line);\n }\n .koor-group .card{position:relative;}\n \/* garis vertikal pendek dari garis horizontal turun ke tiap kartu *\/\n .koor-group .card::before{\n content:\"\";\n position:absolute;\n top:-14px;\n left:50%;\n width:2px;\n height:14px;\n background:var(--line);\n transform:translateX(-1px);\n }\n\n .row-dosen{\n width:100%;\n max-width:1180px;\n margin-top:56px;\n }\n .row-dosen-title{\n text-align:center;\n font-size:12px;\n font-weight:700;\n letter-spacing:.12em;\n text-transform:uppercase;\n color:#7686a6;\n margin-bottom:20px;\n position:relative;\n }\n .row-dosen-title::after{\n content:\"\";\n display:block;\n width:60px;\n height:3px;\n background:var(--gold);\n margin:10px auto 0;\n border-radius:3px;\n }\n .row-dosen .grid{\n display:grid;\n grid-template-columns:repeat(auto-fit,minmax(190px,1fr));\n gap:18px;\n }\n .row-dosen .card{\n width:auto;\n padding:16px 14px 14px;\n }\n .row-dosen .foto{\n width:60px;\n height:60px;\n }\n\n @media (max-width:640px){\n .tk-title{font-size:26px;}\n .card{width:170px;padding:18px 14px 16px;}\n .card.top{width:190px;}\n \/* di layar sempit kartu koordinator ditumpuk vertikal, garis\n horizontal disembunyikan supaya tidak salah posisi saat wrap *\/\n .koor-group{\n display:flex;\n flex-direction:column;\n align-items:center;\n \n }\n .koor-group::after{display:none;}\n .koor-group::before{height:48px;}\n .koor-group .card::before{display:none;}\n .koor-group .card{margin-top:0;}\n .koor-group .card:not(:first-child){margin-top:24px;}\n .koor-group .card:not(:first-child)::before{\n display:block;\n top:-24px;\n height:24px;\n }\n }\n<\/style>\n\n<div class=\"tk-wrap\">\n\n <div class=\"tk-header\">\n \n <h2 class=\"tk-title\">Struktur Organisasi<br>Program Studi Teknologi Informasi<\/h2>\n <p class=\"tk-desc\">\n Susunan pengelola Program Studi Teknologi Informasi UIN Salatiga\n dalam menjalankan fungsi pendidikan, penelitian, dan pengabdian kepada masyarakat.\n <\/p>\n <\/div>\n\n <div class=\"tk-chart\">\n\n <!-- LEVEL 1 : KETUA PROGRAM STUDI -->\n <div class=\"card top\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/07\/kaprodi.png\" alt=\"Foto Ketua Program Studi\">\n <div class=\"jabatan-tag\">Ketua Program Studi<\/div>\n <div class=\"nama\">Juwita Artanti Kusumaningtyas, M.Cs<\/div>\n <div class=\"jabatan\">Ketua Program Studi Teknologi Informasi<\/div>\n <\/div>\n\n <!-- LEVEL 2 : SEKRETARIS PROGRAM STUDI -->\n <div class=\"tk-connector\"><\/div>\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/160x160\/2563eb\/ffffff?text=Foto\" alt=\"Foto Sekretaris Program Studi\">\n <div class=\"jabatan-tag\">Sekretaris<\/div>\n <div class=\"nama\">Nama Sekretaris Prodi, M.Kom.<\/div>\n <div class=\"jabatan\">Sekretaris Program Studi Teknologi Informasi<\/div>\n <\/div>\n\n <!-- LEVEL 3 : KOORDINATOR-KOORDINATOR BIDANG -->\n <div class=\"koor-group\">\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/160x160\/2563eb\/ffffff?text=Foto\" alt=\"Foto Koordinator Akademik\">\n <div class=\"jabatan-tag\">Koordinator<\/div>\n <div class=\"nama\">Nama Dosen, M.Kom.<\/div>\n <div class=\"jabatan\">Koordinator Bidang Akademik & Kurikulum<\/div>\n <\/div>\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/160x160\/2563eb\/ffffff?text=Foto\" alt=\"Foto Koordinator Laboratorium\">\n <div class=\"jabatan-tag\">Koordinator<\/div>\n <div class=\"nama\">Nama Dosen, M.Kom.<\/div>\n <div class=\"jabatan\">Koordinator Laboratorium<\/div>\n <\/div>\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/160x160\/2563eb\/ffffff?text=Foto\" alt=\"Foto Koordinator Kemahasiswaan\">\n <div class=\"jabatan-tag\">Koordinator<\/div>\n <div class=\"nama\">Nama Dosen, M.Kom.<\/div>\n <div class=\"jabatan\">Koordinator Kemahasiswaan & Alumni<\/div>\n <\/div>\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/160x160\/2563eb\/ffffff?text=Foto\" alt=\"Foto Koordinator Kerjasama\">\n <div class=\"jabatan-tag\">Koordinator<\/div>\n <div class=\"nama\">Nama Dosen, M.Kom.<\/div>\n <div class=\"jabatan\">Koordinator Kerjasama & Publikasi<\/div>\n <\/div>\n\n <\/div>\n\n <!-- LEVEL 4 : DAFTAR DOSEN PENGAMPU -->\n <div class=\"row-dosen\">\n <div class=\"row-dosen-title\">Dosen Pengampu<\/div>\n <div class=\"grid\">\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/120x120\/94a8d6\/ffffff?text=Foto\" alt=\"Foto Dosen\">\n <div class=\"nama\">Nama Dosen 1, M.Kom.<\/div>\n <div class=\"jabatan\">Dosen Tetap<\/div>\n <\/div>\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/120x120\/94a8d6\/ffffff?text=Foto\" alt=\"Foto Dosen\">\n <div class=\"nama\">Nama Dosen 2, M.Kom.<\/div>\n <div class=\"jabatan\">Dosen Tetap<\/div>\n <\/div>\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/120x120\/94a8d6\/ffffff?text=Foto\" alt=\"Foto Dosen\">\n <div class=\"nama\">Nama Dosen 3, M.Kom.<\/div>\n <div class=\"jabatan\">Dosen Tetap<\/div>\n <\/div>\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/120x120\/94a8d6\/ffffff?text=Foto\" alt=\"Foto Dosen\">\n <div class=\"nama\">Nama Dosen 4, M.Kom.<\/div>\n <div class=\"jabatan\">Dosen Tetap<\/div>\n <\/div>\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/120x120\/94a8d6\/ffffff?text=Foto\" alt=\"Foto Dosen\">\n <div class=\"nama\">Nama Dosen 5, M.Kom.<\/div>\n <div class=\"jabatan\">Dosen Tetap<\/div>\n <\/div>\n\n <div class=\"card\">\n <img decoding=\"async\" class=\"foto\" src=\"https:\/\/placehold.co\/120x120\/94a8d6\/ffffff?text=Foto\" alt=\"Foto Dosen\">\n <div class=\"nama\">Nama Dosen 6, M.Kom.<\/div>\n <div class=\"jabatan\">Dosen Tetap<\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b2c9707 e-con-full e-flex e-con e-parent\" data-id=\"b2c9707\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f716657 elementor-widget elementor-widget-html\" data-id=\"f716657\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Footer - Fakultas Saintek UIN Salatiga<\/title>\n <style>\n \/* \u2500\u2500 reset & variabel \u2500\u2500 *\/\n :root {\n --text-main: #ffffff;\n --text-sub: #f0f0f0;\n --heading: #ffffff;\n --accent: #d9b169;\n --border: rgba(255, 255, 255, 0.10);\n }\n\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: 'Segoe UI', Roboto, Arial, sans-serif;\n background: #1a1a1a;\n color: var(--text-main);\n }\n\n \/* \u2500\u2500 footer: tanpa background hitam \u2500\u2500 *\/\n footer {\n padding: 48px 60px 36px;\n border-top: 1px solid var(--border);\n }\n\n \/* \u2500\u2500 grid utama: 4 kolom dengan jarak lebar (140px) di desktop \u2500\u2500 *\/\n .footer-grid {\n display: grid;\n grid-template-columns: 1.5fr 1.1fr 1fr 1.2fr;\n gap: 140px;\n margin: 0 auto;\n }\n\n \/* \u2500\u2500 semua kolom \u2500\u2500 *\/\n .col h4 {\n margin: 0 0 18px 0;\n font-size: 18px;\n font-weight: 700;\n color: var(--heading);\n letter-spacing: 0.3px;\n }\n\n .col ul {\n list-style: none !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n .col ul li {\n margin: 0 0 10px 0 !important;\n padding: 0 !important;\n line-height: 1.3 !important;\n }\n\n .col ul li a {\n display: inline-block;\n color: var(--text-sub);\n text-decoration: none;\n font-size: 15px;\n line-height: 1.3 !important;\n padding: 0 !important;\n margin: 0 !important;\n white-space: nowrap;\n transition: color 0.2s;\n }\n\n .col ul li a:hover {\n color: var(--accent);\n text-decoration: underline;\n }\n\n \/* \u2500\u2500 kolom brand (identitas) \u2500\u2500 *\/\n .brand-logos {\n margin-bottom: 18px;\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .brand-logos img {\n height: 60px;\n width: auto;\n display: block;\n }\n\n .brand h3 {\n margin: 0 0 4px 0;\n font-size: 17px;\n font-weight: 700;\n color: var(--heading);\n line-height: 1.4;\n }\n\n .brand .address {\n margin: 14px 0 4px;\n font-size: 14px;\n color: var(--text-sub);\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 kontak (telp, email) \u2500\u2500 *\/\n .contact-list {\n list-style: none;\n margin: 16px 0 0 0;\n padding: 0;\n }\n\n .contact-list li {\n display: flex;\n align-items: center;\n gap: 14px;\n font-size: 14px;\n color: var(--text-sub);\n margin-bottom: 10px;\n }\n\n \/* \u2500\u2500 icon box (seragam) \u2500\u2500 *\/\n .icon-box {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n position: relative;\n top: 1px;\n }\n\n .icon-box svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n \/* \u2500\u2500 media sosial \u2500\u2500 *\/\n .social-list li {\n margin-bottom: 12px !important;\n }\n\n .social-list li a {\n display: flex !important;\n align-items: center !important;\n gap: 18px !important;\n }\n\n .social-label {\n line-height: 1;\n display: inline-block;\n }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n\n \/* Tablet: konten di-tengah, lebar terbatas, grid 2 kolom seimbang *\/\n @media (max-width: 1100px) and (min-width: 701px) {\n footer {\n padding: 40px 20px 32px;\n }\n\n .footer-grid {\n max-width: 820px;\n \/* batas lebar agar tidak melebar penuh *\/\n margin: 0 auto;\n \/* tengah secara horizontal *\/\n grid-template-columns: 1fr 1fr;\n \/* dua kolom sama lebar *\/\n gap: 40px 60px;\n }\n\n \/* susunan ulang posisi kolom agar sesuai: \n baris 1: brand | menu\n baris 2: prodi | sosial *\/\n .brand {\n grid-column: 1 \/ 2;\n grid-row: 1 \/ 2;\n }\n .col-menu {\n grid-column: 2 \/ 3;\n grid-row: 1 \/ 2;\n }\n .col-prodi {\n grid-column: 1 \/ 2;\n grid-row: 2 \/ 3;\n }\n .col-sosial {\n grid-column: 2 \/ 3;\n grid-row: 2 \/ 3;\n }\n }\n\n \/* layar kecil: semua kolom tumpuk *\/\n @media (max-width: 700px) {\n footer {\n padding: 36px 24px 28px;\n }\n\n .footer-grid {\n grid-template-columns: 1fr;\n gap: 36px;\n max-width: 100%;\n margin: 0;\n }\n\n .brand,\n .col-menu,\n .col-prodi,\n .col-sosial {\n grid-column: 1 \/ 2;\n grid-row: auto;\n }\n }\n\n @media (max-width: 480px) {\n footer {\n padding: 28px 16px 20px;\n }\n\n .footer-grid {\n gap: 28px;\n }\n\n .brand-logos img {\n height: 48px;\n }\n\n .brand h3 {\n font-size: 15px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <footer>\n <div class=\"footer-grid\">\n\n <!-- Kolom 1: Brand \/ Identitas -->\n <div class=\"col brand\">\n <div class=\"brand-logos\">\n <img decoding=\"async\" src=\"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo-5-1-1024x409-1.png\" alt=\"Logo Fakultas Sains dan Teknologi UIN Salatiga\" \/>\n <\/div>\n <h3>Fakultas Sains dan Teknologi<br \/>\n Program Studi Teknologi Informasi<br \/>\n Universitas Islam Negeri Salatiga<\/h3>\n\n <p class=\"address\">\n Jalan Lingkar Salatiga Km. 02, Plutan, Sidorejo,<br \/>\n Kota Salatiga, Jawa Tengah, Indonesia 50714\n <\/p>\n\n <ul class=\"contact-list\">\n <li>\n <span class=\"icon-box\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <\/span>\n Telp. (0298) 323706\n <\/li>\n <li>\n <span class=\"icon-box\">\n <svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path d=\"M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z\"\/><\/svg>\n <\/span>\n saintek@uinsalatiga.ac.id\n <\/li>\n <\/ul>\n <\/div>\n\n <!-- Kolom 2: Menu -->\n <div class=\"col col-menu\">\n <h4>Menu<\/h4>\n <ul>\n <li><a href=\"#\">Beranda<\/a><\/li>\n <li><a href=\"#\">Profile<\/a><\/li>\n <li><a href=\"#\">Tata Kelola<\/a><\/li>\n <li><a href=\"#\">Dosen Pengampu<\/a><\/li>\n <li><a href=\"#\">Pendidikan<\/a><\/li>\n <li><a href=\"#\">Mahasiswa<\/a><\/li>\n <li><a href=\"#\">Penelitian<\/a><\/li>\n <li><a href=\"#\">Layanan<\/a><\/li>\n <li><a href=\"#\">Kerjasama<\/a><\/li>\n <li><a href=\"#\">Survei<\/a><\/li>\n <\/ul>\n <\/div>\n\n <!-- Kolom 3: Program Studi -->\n <div class=\"col col-prodi\">\n <h4>Program Studi<\/h4>\n <ul>\n <li><a href=\"#\">Sains Data<\/a><\/li>\n <li><a href=\"#\">Teknologi Informasi<\/a><\/li>\n <li><a href=\"#\">Perpustakaan dan Sains Informasi<\/a><\/li>\n <\/ul>\n <\/div>\n\n <!-- Kolom 4: Media Sosial -->\n <div class=\"col col-sosial\">\n <h4>Media Sosial<\/h4>\n <ul class=\"social-list\">\n <li>\n <a href=\"#\">\n <span class=\"icon-box\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.71.45 3.38 1.3 4.85L2.05 22l5.36-1.4a9.9 9.9 0 0 0 4.63 1.18h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.13-2.9-7C17.17 3.03 14.69 2 12.04 2zm0 18.13h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.18.83.85-3.1-.2-.32a8.2 8.2 0 0 1-1.25-4.4c0-4.55 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.55-3.71 8.31-8.21 8.31zm4.52-6.16c-.25-.12-1.47-.72-1.7-.81-.23-.08-.4-.12-.56.13-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.15.16-.25.25-.42.08-.17.04-.31-.02-.43-.06-.12-.56-1.36-.77-1.86-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.06 0 1.21.88 2.39 1 2.55.12.17 1.74 2.71 4.29 3.7.6.26 1.07.42 1.43.53.6.19 1.15.16 1.58.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.15-1.18-.06-.1-.23-.16-.48-.28z\"\/><\/svg>\n <\/span>\n <span class=\"social-label\">Whatsapp<\/span>\n <\/a>\n <\/li>\n <li>\n <a href=\"#\">\n <span class=\"icon-box\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.15-3.23 1.67-4.77 4.92-4.92 1.27-.06 1.65-.07 4.85-.07zm0-2.16c-3.26 0-3.67.01-4.95.07-4.35.2-6.78 2.62-6.98 6.98-.06 1.28-.07 1.69-.07 4.95s.01 3.67.07 4.95c.2 4.35 2.62 6.78 6.98 6.98 1.28.06 1.69.07 4.95.07s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.2-4.35-2.62-6.78-6.98-6.98-1.28-.06-1.69-.07-4.95-.07zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0z\"\/><\/svg>\n <\/span>\n <span class=\"social-label\">Instagram<\/span>\n <\/a>\n <\/li>\n <li>\n <a href=\"#\">\n <span class=\"icon-box\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M13.5 21v-8.15h2.73l.41-3.17h-3.14V7.66c0-.92.25-1.54 1.57-1.54h1.68V3.28C15.96 3.19 15.03 3.13 13.94 3.13c-2.28 0-3.84 1.39-3.84 3.94v2.6H7.36v3.17h2.74V21h3.4z\"\/><\/svg>\n <\/span>\n <span class=\"social-label\">Facebook<\/span>\n <\/a>\n <\/li>\n <li>\n <a href=\"#\">\n <span class=\"icon-box\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.95-2C18.88 4 12 4 12 4s-6.88 0-8.59.42a2.78 2.78 0 0 0-1.95 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33 2.78 2.78 0 0 0 1.95 2C5.12 19.5 12 19.5 12 19.5s6.88 0 8.59-.42a2.78 2.78 0 0 0 1.95-2 29 29 0 0 0 .46-5.33 29 29 0 0 0-.46-5.33zM9.75 15.02V8.48l5.75 3.27z\"\/><\/svg>\n <\/span>\n <span class=\"social-label\">Youtube<\/span>\n <\/a>\n <\/li>\n <\/ul>\n <\/div>\n\n <\/div>\n <!-- \/footer-grid -->\n <\/footer>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e70db9c e-flex e-con-boxed e-con e-parent\" data-id=\"e70db9c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ce9f76 elementor-position-inline-start elementor-mobile-position-inline-start elementor-view-default elementor-widget elementor-widget-icon-box\" data-id=\"9ce9f76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span class=\"elementor-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"jki jki-copyright\"><\/i>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span >\n\t\t\t\t\t\t\t2026 Program Studi Teknologi Informasi - UIN Salatiga\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Top Bar – Follow Us & Search Follow Us : Logo Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI Menu Program […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1118","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tata_kelola - Program Studi Teknologi Informasi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tata_kelola - Program Studi Teknologi Informasi\" \/>\n<meta property=\"og:description\" content=\"Top Bar – Follow Us & Search Follow Us : Logo Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI Menu Program […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/\" \/>\n<meta property=\"og:site_name\" content=\"Program Studi Teknologi Informasi\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-30T09:01:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/tata_kelola\\\/\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/tata_kelola\\\/\",\"name\":\"Tata_kelola - Program Studi Teknologi Informasi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/tata_kelola\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/tata_kelola\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\",\"datePublished\":\"2026-07-03T21:57:30+00:00\",\"dateModified\":\"2026-07-30T09:01:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/tata_kelola\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/tata_kelola\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/tata_kelola\\\/#primaryimage\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\",\"contentUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Logo_UIN_Salatiga.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/tata_kelola\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tata_kelola\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#website\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\",\"name\":\"Program Studi Teknologi Informasi\",\"description\":\"UNIVERSITAS ISLAM NEGERI SALATIGA\",\"publisher\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#organization\",\"name\":\"Program Studi Teknologi Informasi\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/05\\\/Logo_UIN_Salatiga.svg\",\"contentUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/05\\\/Logo_UIN_Salatiga.svg\",\"width\":80,\"height\":80,\"caption\":\"Program Studi Teknologi Informasi\"},\"image\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tata_kelola - Program Studi Teknologi Informasi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/","og_locale":"en_US","og_type":"article","og_title":"Tata_kelola - Program Studi Teknologi Informasi","og_description":"Top Bar – Follow Us & Search Follow Us : Logo Program Studi TI PROGRAM STUDI TEKNOLOGI INFORMASI Menu Program […]","og_url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/","og_site_name":"Program Studi Teknologi Informasi","article_modified_time":"2026-07-30T09:01:59+00:00","og_image":[{"url":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/","name":"Tata_kelola - Program Studi Teknologi Informasi","isPartOf":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#website"},"primaryImageOfPage":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/#primaryimage"},"image":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/#primaryimage"},"thumbnailUrl":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","datePublished":"2026-07-03T21:57:30+00:00","dateModified":"2026-07-30T09:01:59+00:00","breadcrumb":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/#primaryimage","url":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png","contentUrl":"https:\/\/saintek.uinsalatiga.ac.id\/wp-content\/uploads\/2026\/05\/Logo_UIN_Salatiga.png"},{"@type":"BreadcrumbList","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/tata_kelola\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/"},{"@type":"ListItem","position":2,"name":"Tata_kelola"}]},{"@type":"WebSite","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#website","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","name":"Program Studi Teknologi Informasi","description":"UNIVERSITAS ISLAM NEGERI SALATIGA","publisher":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#organization","name":"Program Studi Teknologi Informasi","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#\/schema\/logo\/image\/","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg","contentUrl":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg","width":80,"height":80,"caption":"Program Studi Teknologi Informasi"},"image":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/comments?post=1118"}],"version-history":[{"count":36,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1118\/revisions"}],"predecessor-version":[{"id":1871,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1118\/revisions\/1871"}],"wp:attachment":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/media?parent=1118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}