{"id":1823,"date":"2026-07-29T05:05:05","date_gmt":"2026-07-29T05:05:05","guid":{"rendered":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/?page_id=1823"},"modified":"2026-09-16T13:09:49","modified_gmt":"2026-09-16T13:09:49","slug":"beranda","status":"publish","type":"page","link":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","title":{"rendered":"Beranda"},"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-169abbb e-con e-atomic-element e-flexbox-base e-3193a37 \" data-id=\"169abbb\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"169abbb\">\n \t\t<div class=\"elementor-element elementor-element-d1d17dd elementor-widget elementor-widget-html\" data-id=\"d1d17dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n HEADER + MENU PRODI TI\n Tempel kode ini DI DALAM widget \"Follow Us\" (di bawah kode Follow Us),\n atau di widget mana pun yang tampil di HP.\n Background header DIPAKSA PUTIH lewat .header-ti,\n jadi tidak ikut biru walau segudang dengan Follow Us.\n===================================================== -->\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\/* ===== SCOPE: semua diawali .header-ti \/ kelas-ti biar tidak bentrok tema ===== *\/\n.header-ti *, .header-ti *::before, .header-ti *::after { box-sizing: border-box; }\n\nhtml.no-scroll, body.no-scroll { overflow: hidden; height: 100%; }\n\n\/* =====================================================\n HEADER: LOGO + MENU dalam satu baris, bisa membungkus.\n Background PUTIH sendiri -> tidak ikut warna area\/top bar.\n===================================================== *\/\n.header-ti {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap; \/* menu turun ke bawah logo saat sempit *\/\n gap: 12px 20px;\n padding: 12px clamp(16px, 3vw, 40px);\n width: 100%;\n background: #ffffff; \/* <- kunci: latar putih sendiri *\/\n font-family: 'Poppins', sans-serif;\n}\n\n\/* ===== BLOK LOGO ===== *\/\n.header-ti .header-logo {\n display: flex; align-items: center; gap: 12px; flex-shrink: 0;\n}\n.header-ti .header-logo img {\n height: clamp(40px, 4vw, 56px); width: auto; display: block; object-fit: contain;\n}\n.header-ti .header-logo .logo-text { display: flex; flex-direction: column; line-height: 1.2; }\n.header-ti .header-logo .logo-top {\n font-size: clamp(12px, 1vw, 15px); font-weight: 700; color: #3559DB; letter-spacing: 0.3px;\n}\n.header-ti .header-logo .logo-bottom {\n font-size: clamp(13px, 1.1vw, 17px); font-weight: 800; color: #1f2937; letter-spacing: 0.3px;\n}\n\n\/* ===== WRAPPER MENU ===== *\/\n.header-ti .menu-wrapper { position: relative; flex-shrink: 0; }\n.header-ti .menu-ti { font-family: 'Poppins', sans-serif; }\n\n\/* ===== HAMBURGER ===== *\/\n.header-ti .menu-toggle {\n display: none;\n background: #3559DB; color: #fff; border: none; border-radius: 8px;\n padding: 8px 12px; font-size: 24px; line-height: 1; cursor: pointer;\n font-family: 'Poppins', sans-serif;\n}\n\n\/* ===== UL LEVEL 1 (boleh turun baris) ===== *\/\n.header-ti .menu-ti > ul {\n list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end;\n gap: clamp(3px, 0.4vw, 8px); align-items: center; padding: 0; margin: 0;\n}\n.header-ti .menu-ti > ul > li { position: relative; }\n.header-ti .menu-ti > ul > li > a.active { background: #032B63; color: #fff; }\n\n\/* ===== TOMBOL LEVEL 1 (mengecil otomatis) ===== *\/\n\n.header-ti .menu-ti > ul > li > a {\n display: block;\n padding: clamp(9px, 0.9vw, 14px) clamp(16px, 1.6vw, 26px); \/* diperbesar dari clamp(7px,0.8vw,11px) clamp(9px,1vw,18px) *\/\n background: #3559DB; color: #fff; border-radius: 8px; text-decoration: none;\n font-size: clamp(13px, 0.95vw, 16px); \/* diperbesar dari clamp(11px,0.8vw,14px) *\/\n font-weight: 600; white-space: nowrap;\n transition: background 0.25s, box-shadow 0.2s;\n}\n\n.header-ti .menu-ti > ul > li > a:hover,\n.header-ti .menu-ti > ul > li.is-open > a {\n background: #2747bd; box-shadow: 0 4px 12px rgba(53,89,219,0.35);\n}\n\n\/* ===== SUBMENU BIASA ===== *\/\n.header-ti .menu-ti > ul > li > ul {\n list-style: none; position: fixed; min-width: 220px; background: #ffffff;\n border-radius: 0 0 8px 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n overflow: visible; display: none; z-index: 99999; padding: 0; border-top: 3px solid #305CDE;\n}\n.header-ti .menu-ti > ul > li > ul::before,\n.header-ti .menu-ti > ul > li > .mega-menu::before {\n content: ''; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; background: transparent;\n}\n.header-ti .menu-ti > ul > li.is-open > ul { display: block; }\n.header-ti .menu-ti > ul > li > ul > li > a {\n display: block; padding: 12px 18px; color: #555; text-decoration: none; font-size: 13px;\n background: #ffffff; border-bottom: 1px solid #e5e5e5; white-space: nowrap;\n transition: background 0.2s, color 0.2s, padding-left 0.2s;\n}\n.header-ti .menu-ti > ul > li > ul > li:last-child > a { border-bottom: none; }\n.header-ti .menu-ti > ul > li > ul > li > a:hover { background: #eaeaea; color: #032B63; padding-left: 24px; }\n\n\/* ===== MEGA MENU ===== *\/\n.header-ti .mega-menu {\n position: fixed; background: #ffffff; display: none; padding: 32px 36px;\n grid-template-columns: repeat(4, 1fr); gap: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.12);\n border-radius: 0 0 8px 8px; z-index: 99999; min-width: 700px; border-top: 3px solid #305CDE;\n}\n.header-ti .menu-ti > ul > li.is-open > .mega-menu { display: grid; }\n.header-ti .mega-menu.cols-3 { grid-template-columns: repeat(3, 1fr); min-width: 560px; }\n.header-ti .mega-column h4 {\n color: #1f3566; font-size: 12px; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px;\n border-bottom: 2px solid #3559DB; text-transform: uppercase; letter-spacing: 0.5px;\n}\n.header-ti .mega-column a {\n display: block; text-decoration: none; color: #555; margin-bottom: 9px; font-size: 13px;\n transition: color 0.2s, transform 0.2s;\n}\n.header-ti .mega-column a:hover { color: #032B63; transform: translateX(4px); }\n\n\/* Elemen sidebar mobile \u2014 sembunyi di desktop *\/\n.header-ti .menu-panel-header, .header-ti .menu-panel-divider,\n.header-ti .menu-close-ti, .menu-overlay-ti { display: none; }\n\n\/* =====================================================\n BREAKPOINT HAMBURGER: 600px\n===================================================== *\/\n@media (max-width: 600px) {\n\n .header-ti { justify-content: space-between; }\n\n \/* Logo di TENGAH; hamburger dipaku pojok kiri (di bawah) *\/\n .header-ti .header-logo {\n display: flex;\n width: 100%;\n justify-content: center;\n text-align: center;\n }\n .header-ti .header-logo img { height: 40px; }\n .header-ti .header-logo .logo-text { align-items: center; }\n .header-ti .header-logo .logo-top { font-size: 12px; }\n .header-ti .header-logo .logo-bottom { font-size: 13px; }\n\n .header-ti .menu-wrapper { position: relative; z-index: 999999; }\n\n .header-ti .menu-toggle {\n display: flex !important; align-items: center; justify-content: center;\n width: 42px; height: 42px; padding: 0; background: transparent; border: none; outline: none;\n color: #fff; font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px;\n position: relative; z-index: 999999; transition: transform 0.3s ease;\n }\n .header-ti .menu-toggle.is-active { transform: rotate(90deg); display: none !important; }\n\n \/* Hamburger dipaku di pojok kiri atas layar *\/\n .header-ti .menu-wrapper {\n position: fixed;\n top: 10px;\n left: 12px;\n z-index: 999999;\n }\n \/* Beri ruang di atas header supaya isi tidak ketiban tombol *\/\n .header-ti { padding-top: 8px; position: relative; }\n\n .menu-overlay-ti {\n display: block; position: fixed; inset: 0; background: rgba(10,15,40,0.55);\n backdrop-filter: blur(2px); z-index: 999996; opacity: 0; visibility: hidden;\n touch-action: none; overscroll-behavior: contain;\n transition: opacity 0.35s ease, visibility 0s linear 0.35s;\n }\n .menu-overlay-ti.active { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s linear 0s; }\n\n .header-ti .menu-panel-ti {\n position: fixed; top: 0; left: 0; width: 78%; max-width: 300px;\n height: 100vh; height: 100dvh; 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); overflow: visible; transform: translateX(-100%);\n transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n }\n .header-ti .menu-panel-ti.active { transform: translateX(0); }\n\n .header-ti .menu-panel-header { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0px; }\n .header-ti .menu-panel-header .panel-logo-img { height: 38px; width: auto; display: block; object-fit: contain; flex-shrink: 0; }\n .header-ti .menu-panel-header .panel-logo-text { display: flex; flex-direction: column; line-height: 1.25; }\n .header-ti .menu-panel-header .panel-title,\n .header-ti .menu-panel-header .panel-subtitle { display: inline-block; font-size: 12.5px; font-weight: 700; color: #ffffff; letter-spacing: 0.3px; }\n\n .header-ti .menu-panel-divider { display: flex; flex-direction: column; gap: 4px; padding: 10px 18px 8px; width: 100%; }\n .header-ti .menu-panel-divider .line-thin { width: 100%; height: 1px; background: rgba(255,255,255,0.25); }\n .header-ti .menu-panel-divider .line-thick { width: 100%; height: 2px; background: rgba(255,255,255,0.6); }\n\n .header-ti .menu-close-ti {\n display: flex; align-items: center; justify-content: center; position: absolute;\n top: 24px; right: 10px; width: auto; height: auto; padding: 6px; background: transparent;\n border: none; border-radius: 0; box-shadow: none; cursor: pointer; z-index: 2; transition: transform 0.25s ease;\n }\n .header-ti .menu-close-ti:active { transform: scale(0.88); }\n .header-ti .menu-close-ti svg { width: 22px; height: 22px; stroke: #ffffff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }\n\n .header-ti .menu-ti {\n display: flex; flex-direction: column; width: 100%; height: 100%; padding: 4px 18px 120px;\n overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;\n }\n .header-ti .menu-ti > ul { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1px; }\n .header-ti .menu-ti > ul > li { width: 100%; }\n .header-ti .menu-ti > ul > li > a {\n width: 100%; display: flex; align-items: center; justify-content: space-between;\n padding: 11px 16px; font-size: 14px; font-weight: 600; border-radius: 12px;\n background: transparent; color: #fff; box-shadow: none; letter-spacing: 0.2px;\n }\n .header-ti .menu-ti > ul > li > a:hover,\n .header-ti .menu-ti > ul > li.is-open > a { background: rgba(255,255,255,0.14); box-shadow: none; }\n .header-ti .menu-ti > ul > li > a.active { background: rgba(255,255,255,0.18); }\n\n .header-ti .menu-ti > ul > li > a .chev-ti {\n width: 9px; height: 9px; border-right: 2px solid rgba(255,255,255,0.75);\n border-bottom: 2px solid rgba(255,255,255,0.75); transform: rotate(-45deg);\n transition: transform 0.3s ease; flex-shrink: 0;\n }\n .header-ti .menu-ti > ul > li.is-open > a .chev-ti { transform: rotate(45deg); }\n .header-ti .menu-ti > ul > li::after { content: none; }\n\n .header-ti .menu-ti > ul > li > ul,\n .header-ti .mega-menu {\n position: static !important; width: 100% !important; min-width: 100% !important;\n background: rgba(0,0,0,0.16); border-radius: 10px; box-shadow: none; border-top: none;\n display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;\n padding: 0 !important; padding-left: 0 !important; margin-left: 0 !important;\n transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;\n }\n .header-ti .menu-ti > ul > li.is-open > ul,\n .header-ti .menu-ti > ul > li.is-open > .mega-menu {\n max-height: none; overflow-y: auto; opacity: 1; margin-top: 6px; margin-bottom: 6px;\n }\n .header-ti .menu-ti > ul > li > ul > li > a {\n background: transparent; color: rgba(255,255,255,0.85); font-size: 12.5px; font-weight: 500;\n padding: 11px 16px !important; border-bottom: 1px solid rgba(255,255,255,0.08);\n }\n .header-ti .menu-ti > ul > li > ul > li:last-child > a { border-bottom: none; }\n .header-ti .menu-ti > ul > li > ul > li > a:hover { background: rgba(255,255,255,0.1); color: #fff; padding-left: 30px; }\n .header-ti .menu-ti > ul > li.is-open > .mega-menu { display: block !important; grid-template-columns: none; padding: 8px 6px !important; }\n .header-ti .mega-column { padding: 10px 10px 20px; }\n .header-ti .mega-column h4 { color: rgba(255,255,255,0.65); border-bottom: 1px solid rgba(255,255,255,0.15); }\n .header-ti .mega-column a { color: rgba(255,255,255,0.85); font-size: 12.5px; }\n .header-ti .mega-column a:hover { color: #fff; }\n}\n<\/style>\n\n<div class=\"header-ti\">\n\n <!-- ===== LOGO ===== -->\n <div class=\"header-logo\">\n <img decoding=\"async\" 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=\"logo-text\">\n <span class=\"logo-top\">PROGRAM STUDI<\/span>\n <span class=\"logo-bottom\">TEKNOLOGI INFORMASI<\/span>\n <\/div>\n <\/div>\n\n <!-- ===== MENU ===== -->\n <div class=\"menu-wrapper\">\n\n <button class=\"menu-toggle\" id=\"menuToggle\">\n <span id=\"menuToggleIcon\">☰<\/span>\n <\/button>\n\n <div class=\"menu-panel-ti\" id=\"menuPanelTI\">\n\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 <div class=\"menu-panel-divider\">\n <div class=\"line-thin\"><\/div>\n <div class=\"line-thick\"><\/div>\n <\/div>\n\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 <ul>\n <li><a href=\"\/ti\">Beranda<\/a><\/li>\n <li><a href=\"\/ti\/profil\" class=\"active\">Profil<\/a><\/li>\n\n <li>\n <a href=\"#\">Akademik <span class=\"chev-ti\"><\/span><\/a>\n <div class=\"mega-menu cols-3\">\n <div class=\"mega-column\">\n <h4>Tata Kelola<\/h4>\n <a href=\"\/ti\/tata_kelola\">Tata Kelola<\/a>\n <\/div>\n <div class=\"mega-column\">\n <h4>Dosen Pengampu<\/h4>\n <a href=\"\/ti\/dosen-pengampu\">Dosen Pengampu<\/a>\n <\/div>\n <div class=\"mega-column\">\n <h4>Mahasiswa<\/h4>\n <a href=\"\/ti\/prestasi\">Prestasi<\/a>\n <a href=\"\/ti\/hmps\">HMPS<\/a>\n <\/div>\n <\/div>\n <\/li>\n\n <li>\n <a href=\"#\">Tri Dharma <span class=\"chev-ti\"><\/span><\/a>\n <div class=\"mega-menu cols-3\">\n <div class=\"mega-column\">\n <h4>Pendidikan<\/h4>\n <a href=\"\/ti\/akreditasi\">Akreditasi<\/a>\n <a href=\"\/ti\/kurikulum\">Kurikulum<\/a>\n <a href=\"\/ti\/pedoman\">Pedoman<\/a>\n <a href=\"\/ti\/sebaran-matkul\">Sebaran Matkul<\/a>\n <\/div>\n <div class=\"mega-column\">\n <h4>Penelitian<\/h4>\n <a href=\"\/ti\/e-jurnal\">E-Jurnal<\/a>\n <\/div>\n <div class=\"mega-column\">\n <h4>Pengabdian<\/h4>\n <a href=\"\/ti\/pengabdian-dosen\">Pengabdian Dosen<\/a>\n <a href=\"\/ti\/pengabdian-mhs\">Pengabdian Mhs<\/a>\n <\/div>\n <\/div>\n <\/li>\n\n <li>\n <a href=\"#\">Layanan <span class=\"chev-ti\"><\/span><\/a>\n <div class=\"mega-menu\">\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 <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 <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 <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 <\/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 <\/ul>\n <\/nav>\n\n <\/div>\n <\/div>\n\n <div class=\"menu-overlay-ti\" id=\"menuOverlayTI\"><\/div>\n<\/div>\n\n<script>\n(function () {\n\n var BREAKPOINT = 600;\n\n var toggleBtn = document.getElementById('menuToggle');\n var toggleIcon = document.getElementById('menuToggleIcon');\n var menuTI = document.getElementById('menuTI');\n var menuPanelTI = document.getElementById('menuPanelTI');\n var overlayTI = document.getElementById('menuOverlayTI');\n var closeBtnTI = document.getElementById('menuCloseTI');\n\n if (!toggleBtn || !menuPanelTI) return;\n\n function blockBgScroll(e) {\n if (menuTI && menuTI.contains(e.target)) return;\n e.preventDefault();\n }\n\n function setMenuOpen(willOpen) {\n menuPanelTI.classList.toggle('active', willOpen);\n toggleBtn.classList.toggle('is-active', willOpen);\n if (overlayTI) overlayTI.classList.toggle('active', willOpen);\n if (toggleIcon) toggleIcon.innerHTML = willOpen ? '✕' : '☰';\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 items.forEach(function (li) { li.classList.remove('is-open'); });\n }\n }\n\n toggleBtn.addEventListener('click', function () {\n setMenuOpen(!menuPanelTI.classList.contains('active'));\n });\n if (closeBtnTI) closeBtnTI.addEventListener('click', function () { setMenuOpen(false); });\n if (overlayTI) overlayTI.addEventListener('click', function () { setMenuOpen(false); });\n\n function positionDropdown(li) {\n if (window.innerWidth <= BREAKPOINT) return;\n var dropdown = li.querySelector(':scope > ul') || li.querySelector(':scope > .mega-menu');\n if (!dropdown) return;\n var btn = li.querySelector(':scope > a');\n var btnRect = btn.getBoundingClientRect();\n var isMega = dropdown.classList.contains('mega-menu');\n var prevDisplay = dropdown.style.display;\n dropdown.style.visibility = 'hidden';\n dropdown.style.display = isMega ? 'grid' : 'block';\n var dropW = dropdown.offsetWidth;\n dropdown.style.display = prevDisplay;\n dropdown.style.visibility = '';\n dropdown.style.top = (btnRect.bottom + 8) + 'px';\n var left;\n if (isMega) { left = btnRect.right - dropW; }\n else { left = btnRect.left + (btnRect.width \/ 2) - (dropW \/ 2); }\n if (left < 8) left = 8;\n if (left + dropW > window.innerWidth - 8) left = window.innerWidth - dropW - 8;\n dropdown.style.left = left + 'px';\n }\n\n var items = document.querySelectorAll('.header-ti .menu-ti > ul > li');\n var closeTimers = new Map();\n\n function cancelClose(li) {\n if (closeTimers.has(li)) { clearTimeout(closeTimers.get(li)); closeTimers.delete(li); }\n }\n function scheduleClose(li) {\n cancelClose(li);\n var t = setTimeout(function () { li.classList.remove('is-open'); closeTimers.delete(li); }, 250);\n closeTimers.set(li, t);\n }\n function closeAllExcept(li) {\n items.forEach(function (other) {\n if (other !== li) { cancelClose(other); other.classList.remove('is-open'); }\n });\n }\n\n items.forEach(function (li) {\n var dropdown = li.querySelector(':scope > ul') || li.querySelector(':scope > .mega-menu');\n if (!dropdown) return;\n\n li.addEventListener('mouseenter', function () {\n if (window.innerWidth <= BREAKPOINT) return;\n cancelClose(li); closeAllExcept(li); positionDropdown(li); li.classList.add('is-open');\n });\n li.addEventListener('mouseleave', function () {\n if (window.innerWidth <= BREAKPOINT) return;\n scheduleClose(li);\n });\n dropdown.addEventListener('mouseenter', function () {\n if (window.innerWidth <= BREAKPOINT) return;\n cancelClose(li); closeAllExcept(li); li.classList.add('is-open');\n });\n dropdown.addEventListener('mouseleave', function () {\n if (window.innerWidth <= BREAKPOINT) return;\n scheduleClose(li);\n });\n\n var link = li.querySelector(':scope > a');\n link.addEventListener('click', function (e) {\n if (window.innerWidth > BREAKPOINT) return;\n e.preventDefault();\n items.forEach(function (other) { if (other !== li) other.classList.remove('is-open'); });\n li.classList.toggle('is-open');\n });\n });\n\n window.addEventListener('scroll', function () {\n var open = document.querySelector('.header-ti .menu-ti > ul > li.is-open');\n if (open) positionDropdown(open);\n }, { passive: true });\n\n window.addEventListener('resize', function () {\n if (window.innerWidth > BREAKPOINT && menuPanelTI.classList.contains('active')) {\n setMenuOpen(false);\n }\n var open = document.querySelector('.header-ti .menu-ti > ul > li.is-open');\n if (open) positionDropdown(open);\n });\n\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-96bea9a e-con-full e-flex e-con e-parent\" data-id=\"96bea9a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16d4bf0 elementor-widget elementor-widget-html\" data-id=\"16d4bf0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap');\n<\/style>\n\n<div class=\"ti-wrapper\">\n\n <!-- SLIDER -->\n <div class=\"ti-slider\">\n\n <div class=\"ti-slide active\" style=\"background-image: url('https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/banner3.jpg');\">\n <div class=\"ti-overlay\"><\/div>\n <div class=\"ti-content\">\n <h2>Selamat Datang di Prodi Teknologi Informasi<\/h2>\n <p>Mencetak lulusan unggul di bidang teknologi informasi yang inovatif dan berdaya saing global.<\/p>\n <a href=\"\/profil_ti\" class=\"ti-btn\">Kenali Kami<\/a>\n <\/div>\n <\/div>\n\n <div class=\"ti-slide\" style=\"background-image: url('https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/banner2.jpg');\">\n <div class=\"ti-overlay\"><\/div>\n <div class=\"ti-content\">\n <h2>Program Unggulan Teknologi Informasi<\/h2>\n <p>Kurikulum modern yang disesuaikan dengan kebutuhan industri teknologi masa kini dan masa depan.<\/p>\n <a href=\"\/pendidikan_ti\" class=\"ti-btn\">Lihat Program<\/a>\n <\/div>\n <\/div>\n\n <div class=\"ti-slide\" style=\"background-image: url('https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/banner1.jpg');\">\n <div class=\"ti-overlay\"><\/div>\n <div class=\"ti-content\">\n <h2>Penelitian & Inovasi Teknologi<\/h2>\n <p>Bergabunglah dengan komunitas riset kami dan wujudkan inovasi teknologi yang berdampak nyata.<\/p>\n <a href=\"\/penelitian_ti\" class=\"ti-btn\">Eksplorasi Riset<\/a>\n <\/div>\n <\/div>\n\n <button class=\"ti-prev\" onclick=\"changeSlide(-1)\">❮<\/button>\n <button class=\"ti-next\" onclick=\"changeSlide(1)\">❯<\/button>\n\n <div class=\"ti-dots\">\n <span class=\"ti-dot active\" onclick=\"goToSlide(0)\"><\/span>\n <span class=\"ti-dot\" onclick=\"goToSlide(1)\"><\/span>\n <span class=\"ti-dot\" onclick=\"goToSlide(2)\"><\/span>\n <\/div>\n\n <\/div>\n\n <!-- FEATURE CARDS -->\n <div class=\"ti-cards\">\n\n <div class=\"ti-card\">\n <div class=\"ti-card-top\">\n <div class=\"ti-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" width=\"38\" height=\"38\" fill=\"white\" stroke=\"white\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"\/>\n <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"\/>\n <line x1=\"9\" y1=\"7\" x2=\"15\" y2=\"7\"\/>\n <line x1=\"9\" y1=\"11\" x2=\"15\" y2=\"11\"\/>\n <\/svg>\n <\/div>\n <span class=\"ti-num\">01<\/span>\n <\/div>\n <h3>Kurikulum Modern<\/h3>\n <p>Kurikulum berbasis industri yang selalu diperbarui sesuai perkembangan teknologi terkini.<\/p>\n <\/div>\n\n <div class=\"ti-card\">\n <div class=\"ti-card-top\">\n <div class=\"ti-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"white\" stroke=\"white\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"8\" r=\"4\"\/>\n <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"\/>\n <polyline points=\"16 11 18 13 22 9\"\/>\n <\/svg>\n <\/div>\n <span class=\"ti-num\">02<\/span>\n <\/div>\n <h3>Dosen Berpengalaman<\/h3>\n <p>Diampu oleh dosen bersertifikat dan berpengalaman di bidang teknologi informasi.<\/p>\n <\/div>\n\n <div class=\"ti-card\">\n <div class=\"ti-card-top\">\n <div class=\"ti-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\" stroke=\"white\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/>\n <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/>\n <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\n <polyline points=\"7 10 10 13 17 8\"\/>\n <\/svg>\n <\/div>\n <span class=\"ti-num\">03<\/span>\n <\/div>\n <h3>Laboratorium Lengkap<\/h3>\n <p>Fasilitas laboratorium komputer dan jaringan yang modern untuk mendukung praktikum.<\/p>\n <\/div>\n\n <div class=\"ti-card\">\n <div class=\"ti-card-top\">\n <div class=\"ti-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"none\" stroke=\"white\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/>\n <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/>\n <\/svg>\n <\/div>\n <span class=\"ti-num\">04<\/span>\n <\/div>\n <h3>Kerjasama Industri<\/h3>\n <p>Kemitraan dengan berbagai perusahaan teknologi untuk mendukung magang dan karier.<\/p>\n <\/div>\n\n <\/div>\n\n<\/div>\n\n<style>\n*{\n box-sizing:border-box;\n margin:0;\n padding:0;\n}\n\n.ti-wrapper{\n font-family:'Poppins',sans-serif;\n position:relative;\n width:100%;\n}\n\n\/* SLIDER *\/\n.ti-slider{\n position:relative;\n width:100%;\n height:480px;\n overflow:hidden;\n border-radius:12px;\n}\n\n.ti-slide{\n position:absolute;\n width:100%;\n height:100%;\n background-size:cover;\n background-position:center;\n background-color:#0d47a1;\n opacity:0;\n transition:opacity 1.2s ease;\n display:flex;\n align-items:center;\n justify-content:center;\n}\n\n.ti-slide.active{\n opacity:1;\n z-index:1;\n}\n\n.ti-overlay{\n position:absolute;\n width:100%;\n height:100%;\n background:linear-gradient(\n 135deg,\n rgba(13,71,161,0.7) 0%,\n rgba(21,101,192,0.7) 100%\n );\n}\n\n.ti-content{\n position:relative;\n z-index:2;\n text-align:center;\n color:#fff;\n padding:0 40px;\n max-width:700px;\n animation:fadeUp 0.9s ease;\n margin-bottom:80px;\n}\n\n@keyframes fadeUp{\n from{\n opacity:0;\n transform:translateY(30px);\n }\n to{\n opacity:1;\n transform:translateY(0);\n }\n}\n\n.ti-content h2{\n font-size:3rem;\n font-weight:700;\n margin-bottom:14px;\n line-height:1.3;\n color:#ffffff !important;\n text-shadow:0 2px 8px rgba(0,0,0,0.3);\n}\n\n.ti-content p{\n font-size:1.2rem;\n margin-bottom:28px;\n opacity:0.92;\n line-height:1.6;\n}\n\n.ti-btn{\n display:inline-block;\n padding:13px 36px;\n background:#fff;\n color:#0d47a1;\n border-radius:40px 4px 40px 4px;\n font-weight:700;\n font-size:0.95rem;\n text-decoration:none;\n transition:all 0.3s ease;\n box-shadow:0 4px 15px rgba(0,0,0,0.2);\n width:auto;\n min-width:unset !important;\n}\n\n.ti-btn:hover{\n background:#42a5f5;\n color:#fff;\n transform:translateY(-2px);\n box-shadow:0 6px 20px rgba(0,0,0,0.25);\n border-radius:4px 40px 4px 40px;\n}\n\n.ti-prev,\n.ti-next{\n position:absolute;\n top:45%;\n transform:translateY(-50%);\n z-index:10;\n background:rgba(255,255,255,0.2) !important;\n border:2px solid rgba(255,255,255,0.5) !important;\n color:#fff !important;\n width:44px !important;\n height:44px !important;\n min-width:unset !important;\n min-height:unset !important;\n padding:0 !important;\n aspect-ratio:1\/1;\n border-radius:50% !important;\n font-size:1rem;\n cursor:pointer;\n transition:all 0.3s ease;\n line-height:44px;\n text-align:center;\n}\n\n.ti-prev{\n left:16px;\n}\n.ti-next{\n right:16px;\n}\n\n.ti-prev:hover,\n.ti-next:hover{\n background:rgba(255,255,255,0.4) !important;\n}\n\n.ti-dots{\n position:absolute;\n bottom:100px;\n width:100%;\n text-align:center;\n z-index:10;\n}\n\n.ti-dot{\n display:inline-block;\n width:10px;\n height:10px;\n background:rgba(255,255,255,0.4);\n border-radius:50%;\n margin:0 5px;\n cursor:pointer;\n transition:all 0.3s ease;\n}\n\n.ti-dot.active{\n background:#fff;\n transform:scale(1.3);\n}\n\n\/* FEATURE CARDS \u2013 Desktop (ukuran normal) *\/\n.ti-cards{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:20px;\n position:relative;\n margin-top:-80px;\n z-index:10;\n padding:0 24px 24px;\n}\n\n.ti-card{\n background:#ffffff;\n border-radius:16px 16px 16px 0;\n padding:24px 20px;\n box-shadow:0 8px 30px rgba(0,0,0,0.12);\n transition:transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.ti-card:hover{\n transform:translateY(-5px);\n box-shadow:0 12px 40px rgba(0,0,0,0.18);\n}\n\n.ti-card-top{\n display:flex;\n align-items:center;\n justify-content:space-between;\n margin-bottom:16px;\n}\n\n.ti-icon-wrap{\n width:54px;\n height:54px;\n background:#1565c0;\n border-radius:50%;\n display:flex;\n align-items:center;\n justify-content:center;\n box-shadow:0 4px 12px rgba(21,101,192,0.45);\n}\n\n.ti-icon-wrap svg{\n fill:transparent;\n stroke:white;\n width:24px !important;\n height:24px !important;\n}\n\n.ti-card:hover .ti-icon-wrap{\n animation:coinSpin 0.8s cubic-bezier(0.36,0.07,0.19,0.97) forwards;\n}\n\n@keyframes coinSpin{\n 0%{\n transform:rotateY(0deg);\n }\n 100%{\n transform:rotateY(720deg);\n }\n}\n\n.ti-num{\n font-size:2rem;\n font-weight:700;\n color:#e3eefa;\n line-height:1;\n}\n\n.ti-card h3{\n font-size:1rem;\n font-weight:700;\n color:#0d47a1;\n margin-bottom:10px;\n}\n\n.ti-card p{\n font-size:0.85rem;\n color:#555;\n line-height:1.6;\n}\n\n\/* ===== MOBILE : dua baris dua kolom, ukuran lebih kecil ===== *\/\n@media (max-width: 768px) {\n .ti-cards {\n grid-template-columns: repeat(2, 1fr); \/* 2 kolom, 2 baris *\/\n gap: 12px;\n margin-top: -20px;\n padding: 0 10px 16px;\n }\n\n .ti-card {\n padding: 14px 12px;\n border-radius: 12px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n }\n\n .ti-card-top {\n margin-bottom: 8px;\n }\n\n .ti-icon-wrap {\n width: 38px;\n height: 38px;\n }\n\n .ti-icon-wrap svg {\n width: 16px !important;\n height: 16px !important;\n }\n\n .ti-num {\n font-size: 1.3rem;\n }\n\n .ti-card h3 {\n font-size: 0.8rem;\n margin-bottom: 6px;\n }\n\n .ti-card p {\n font-size: 0.7rem;\n line-height: 1.5;\n }\n\n \/* slider tetap responsif *\/\n .ti-content {\n margin-bottom: 60px;\n }\n .ti-dots {\n bottom: 70px;\n }\n .ti-content h2 {\n font-size: 1.6rem;\n }\n .ti-content p {\n font-size: 1rem;\n }\n}\n\n\/* Untuk layar sangat kecil, tetap 2 kolom, ukuran lebih kecil lagi *\/\n@media (max-width: 480px) {\n .ti-cards {\n gap: 8px; \/* jarak antar kotak lebih kecil *\/\n padding: 0 6px 12px;\n margin-top: -10px;\n }\n\n .ti-card {\n padding: 10px 8px; \/* padding lebih kecil *\/\n border-radius: 10px;\n }\n\n .ti-icon-wrap {\n width: 30px;\n height: 30px;\n }\n\n .ti-icon-wrap svg {\n width: 14px !important;\n height: 14px !important;\n }\n\n .ti-num {\n font-size: 1rem;\n }\n\n .ti-card h3 {\n font-size: 0.7rem;\n margin-bottom: 4px;\n }\n\n .ti-card p {\n font-size: 0.6rem;\n line-height: 1.4;\n }\n\n .ti-card-top {\n margin-bottom: 4px;\n }\n}\n<\/style>\n\n<script>\nvar tiCurrent = 0;\nvar tiSlides = document.querySelectorAll('.ti-slide');\nvar tiDots = document.querySelectorAll('.ti-dot');\nvar tiAuto;\n\nfunction showSlide(n){\n tiSlides[tiCurrent].classList.remove('active');\n tiDots[tiCurrent].classList.remove('active');\n tiCurrent = (n + tiSlides.length) % tiSlides.length;\n tiSlides[tiCurrent].classList.add('active');\n tiDots[tiCurrent].classList.add('active');\n}\n\nfunction changeSlide(dir){\n resetAuto();\n showSlide(tiCurrent + dir);\n}\n\nfunction goToSlide(n){\n resetAuto();\n showSlide(n);\n}\n\nfunction resetAuto(){\n clearInterval(tiAuto);\n tiAuto = setInterval(function(){\n showSlide(tiCurrent + 1);\n }, 8000);\n}\n\ntiAuto = setInterval(function(){\n showSlide(tiCurrent + 1);\n}, 8000);\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a5e41a1 e-flex e-con-boxed e-con e-parent\" data-id=\"a5e41a1\" 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-5e8ab40 elementor-widget elementor-widget-html\" data-id=\"5e8ab40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap');\n<\/style>\n\n<div class=\"berita-wrapper\">\n\n <div class=\"breaking-bar\">\n <span class=\"breaking-label\">BERITA TERBARU<\/span>\n\n <div class=\"ticker-wrap\">\n <div class=\"ticker\" id=\"ticker\">\n Memuat berita...\n <\/div>\n <\/div>\n <\/div>\n\n\n <div class=\"berita-main\">\n\n <div class=\"berita-slider-wrap\">\n\n <div class=\"berita-slider\" id=\"beritaSlider\">\n <div class=\"bs-loading\">\n Memuat berita...\n <\/div>\n <\/div>\n\n <button class=\"bs-prev\" onclick=\"prevBerita()\">\n ❮\n <\/button>\n\n <button class=\"bs-next\" onclick=\"nextBerita()\">\n ❯\n <\/button>\n\n <\/div>\n\n\n <div class=\"trending-wrap\">\n\n <div class=\"trending-header\">\n <h3>TRENDING NOW<\/h3>\n <\/div>\n\n <div class=\"trending-list\" id=\"trendingList\">\n <div class=\"bs-loading\">\n Memuat...\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* ==============================\n RESET\n============================== *\/\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n\n\/* ==============================\n WRAPPER\n============================== *\/\n\n.berita-wrapper {\n font-family: 'Poppins', sans-serif;\n width: 100%;\n}\n\n\n\/* ==============================\n BREAKING NEWS\n============================== *\/\n\n.breaking-bar {\n display: flex;\n align-items: center;\n background: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n overflow: hidden;\n margin-bottom: 16px;\n height: 44px;\n}\n\n\n.breaking-label {\n background: #c62828;\n color: #fff;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n white-space: nowrap;\n letter-spacing: 1px;\n}\n\n\n.ticker-wrap {\n flex: 1;\n overflow: hidden;\n padding: 0 16px;\n}\n\n\n.ticker {\n white-space: nowrap;\n font-size: 0.85rem;\n color: #333;\n animation: ticker 30s linear infinite;\n}\n\n\n@keyframes ticker {\n 0% { transform: translateX(100%); }\n 100% { transform: translateX(-100%); }\n}\n\n\n\/* ==============================\n MAIN GRID\n============================== *\/\n\n.berita-main {\n display: grid;\n grid-template-columns: 1fr 340px;\n gap: 20px;\n align-items: stretch;\n}\n\n\n\/* ==============================\n SLIDER WRAPPER\n============================== *\/\n\n.berita-slider-wrap {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n background: #1a3a8f;\n}\n\n\n\/* ==============================\n SLIDER\n============================== *\/\n\n.berita-slider {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 420px;\n}\n\n\n\/* ==============================\n SLIDE\n============================== *\/\n\n.bs-slide {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n min-height: 420px;\n background: #1a3a8f;\n opacity: 0;\n transition: opacity 0.8s ease;\n cursor: pointer;\n overflow: hidden;\n}\n\n\n.bs-slide.active {\n opacity: 1;\n z-index: 1;\n}\n\n\n\/* ==============================\n IMAGE SLIDER\n============================== *\/\n\n.bs-slide-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n display: block;\n z-index: 0;\n \n \/* BAGIAN PENTING UNTUK MENGAKALI BLUR DARI CSS *\/\n image-rendering: crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n}\n\n\n\/* ==============================\n OVERLAY\n============================== *\/\n\n.bs-overlay {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 60%);\n}\n\n\n\/* ==============================\n SLIDER INFO\n============================== *\/\n\n.bs-info {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 24px;\n z-index: 2;\n color: #fff;\n}\n\n\n.bs-kategori {\n display: inline-block;\n background: #305CDE;\n color: #fff;\n font-size: 0.72rem;\n font-weight: 700;\n padding: 3px 10px;\n border-radius: 4px;\n margin-bottom: 10px;\n text-transform: uppercase;\n}\n\n\n.bs-info h2 {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1.3;\n margin-bottom: 8px;\n color: #fff;\n}\n\n\n.bs-meta {\n font-size: 0.78rem;\n opacity: 0.75;\n}\n\n\n\/* ==============================\n BUTTON\n============================== *\/\n\n.bs-prev,\n.bs-next {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n background: rgba(255,255,255,0.2) !important;\n border: 2px solid rgba(255,255,255,0.5) !important;\n color: #fff !important;\n width: 40px !important;\n height: 40px !important;\n min-width: unset !important;\n min-height: unset !important;\n padding: 0 !important;\n aspect-ratio: 1 \/ 1;\n border-radius: 50% !important;\n font-size: 0.9rem;\n cursor: pointer;\n line-height: 40px;\n text-align: center;\n}\n\n\n.bs-prev { left: 12px; }\n.bs-next { right: 12px; }\n\n\n.bs-prev:hover,\n.bs-next:hover {\n background: rgba(255,255,255,0.4) !important;\n}\n\n\n\/* ==============================\n TRENDING\n============================== *\/\n\n.trending-wrap {\n background: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 12px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n\n.trending-header {\n padding: 14px 18px;\n border-bottom: 3px solid #305CDE;\n}\n\n\n.trending-header h3 {\n font-size: 0.9rem;\n font-weight: 700;\n color: #305CDE;\n letter-spacing: 1px;\n}\n\n\n.trending-list {\n flex: 1;\n overflow-y: auto;\n max-height: 420px;\n}\n\n\n.trending-list::-webkit-scrollbar {\n width: 4px;\n}\n\n\n.trending-list::-webkit-scrollbar-track {\n background: #f0f0f0;\n}\n\n\n.trending-list::-webkit-scrollbar-thumb {\n background: #305CDE;\n border-radius: 4px;\n}\n\n\n\/* ==============================\n TRENDING ITEM\n============================== *\/\n\n.trending-item {\n display: flex;\n gap: 12px;\n padding: 12px 16px;\n border-bottom: 1px solid #f0f0f0;\n align-items: flex-start;\n cursor: pointer;\n transition: background 0.2s;\n text-decoration: none;\n}\n\n\n.trending-item:hover {\n background: #f0f4ff;\n}\n\n\n.trending-num {\n background: #305CDE;\n color: #fff;\n font-size: 0.7rem;\n font-weight: 700;\n width: 22px;\n height: 22px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n\n.trending-img {\n width: 70px;\n height: 55px;\n object-fit: cover;\n border-radius: 6px;\n flex-shrink: 0;\n image-rendering: crisp-edges; \/* Tambahan anti-blur di trending *\/\n}\n\n\n.trending-info {\n flex: 1;\n}\n\n\n.trending-cat {\n font-size: 0.68rem;\n font-weight: 600;\n color: #305CDE;\n text-transform: uppercase;\n margin-bottom: 4px;\n}\n\n\n.trending-title {\n font-size: 0.82rem;\n font-weight: 600;\n color: #222;\n line-height: 1.4;\n margin-bottom: 4px;\n}\n\n\n.trending-date {\n font-size: 0.72rem;\n color: #999;\n}\n\n\n\/* ==============================\n LOADING\n============================== *\/\n\n.bs-loading {\n padding: 40px;\n text-align: center;\n color: #888;\n font-size: 0.9rem;\n}\n\n\n\/* ==============================\n RESPONSIVE\n============================== *\/\n\n@media (max-width: 768px) {\n .berita-main {\n grid-template-columns: 1fr;\n }\n \n \/* --- PERUBAHAN BAGIAN MOBILE DIMULAI DI SINI --- *\/\n .bs-info {\n padding: 18px 16px 20px; \/* Padding disesuaikan agar tidak terlalu rapat *\/\n }\n \n .bs-info h2 {\n font-size: 1.1rem; \/* Ukuran judul dikurangi dari 1.5rem menjadi 1.1rem *\/\n line-height: 1.35;\n margin-bottom: 6px;\n }\n \n .bs-kategori {\n font-size: 0.65rem;\n padding: 2px 8px;\n margin-bottom: 6px;\n }\n \/* --- PERUBAHAN BAGIAN MOBILE SELESAI DI SINI --- *\/\n \n}\n\n<\/style>\n\n\n<script>\nlet beritaData = [];\nlet bsCurrent = 0;\nlet bsAuto;\n\nfunction parsePost(p) {\n return {\n judul: p.title?.rendered || '',\n link: p.link || '#',\n tanggal: new Date(p.date).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }),\n kategori: p._embedded?.['wp:term']?.[0]?.find(t => t.parent > 0)?.name || p._embedded?.['wp:term']?.[0]?.[0]?.name || 'Berita',\n gambar: p._embedded?.['wp:featuredmedia']?.[0]?.source_url || ''\n };\n}\n\nasync function loadBerita() {\n try {\n const formData = new FormData();\n formData.append('action', 'get_berita_ti');\n\n const res = await fetch('\/ti\/wp-admin\/admin-ajax.php', { method: 'POST', body: formData });\n const data = await res.json();\n beritaData = data;\n renderSlider();\n renderTrending();\n renderTicker();\n } catch (e) {\n document.getElementById('beritaSlider').innerHTML = '<div class=\"bs-loading\">Gagal memuat berita.<\/div>';\n console.error(e);\n }\n}\n\n\/\/ --- FUNGSI BARU UNTUK MEMBESARKAN UKURAN GAMBAR ---\nfunction getFullImageUrl(url) {\n if (!url) return '';\n \/\/ Menghapus angka ukuran di belakang nama file, misal -300x200.jpg menjadi .jpg\n return url.replace(\/(-\\d+x\\d+)\\.(jpg|jpeg|png|webp)$\/i, '.$2');\n}\n\nfunction renderSlider() {\n const slider = document.getElementById('beritaSlider');\n const top5 = beritaData.slice(0, 5);\n slider.innerHTML = '';\n\n top5.forEach((b, i) => {\n const div = document.createElement('div');\n div.className = 'bs-slide' + (i === 0 ? ' active' : '');\n\n if (b.gambar) {\n const img = document.createElement('img');\n img.className = 'bs-slide-image';\n \n \/\/ --- KUNCI PERUBAHAN DI SINI ---\n img.src = getFullImageUrl(b.gambar); \n \/\/ -------------------------------\n \n img.alt = b.judul;\n img.loading = i === 0 ? 'eager' : 'lazy';\n img.onerror = function() { this.style.display = 'none'; };\n div.appendChild(img);\n }\n\n div.onclick = function() { window.location.href = b.link; };\n div.innerHTML += `\n <div class=\"bs-overlay\"><\/div>\n <div class=\"bs-info\">\n <span class=\"bs-kategori\">${b.kategori}<\/span>\n <h2>${b.judul}<\/h2>\n <div class=\"bs-meta\">\ud83d\udcc5 ${b.tanggal}<\/div>\n <\/div>\n `;\n slider.appendChild(div);\n });\n\n bsCurrent = 0;\n clearInterval(bsAuto);\n bsAuto = setInterval(nextBerita, 6000);\n}\n\nfunction renderTrending() {\n const list = document.getElementById('trendingList');\n list.innerHTML = beritaData.map((b, i) => `\n <a class=\"trending-item\" href=\"${b.link}\">\n <div class=\"trending-num\">${i + 1}<\/div>\n ${ b.gambar \n ? `<img decoding=\"async\" class=\"trending-img\" src=\"${getFullImageUrl(b.gambar)}\" alt=\"${b.judul}\" loading=\"lazy\" onerror=\"this.style.display='none'\">` \n : `<div class=\"trending-img\" style=\"background:#e3eefa;display:flex;align-items:center;justify-content:center;font-size:1.2rem;\">\ud83d\udcf0<\/div>` \n }\n <div class=\"trending-info\">\n <div class=\"trending-cat\">${b.kategori}<\/div>\n <div class=\"trending-title\">${b.judul}<\/div>\n <div class=\"trending-date\">\ud83d\udcc5 ${b.tanggal}<\/div>\n <\/div>\n <\/a>\n `).join('');\n}\n\nfunction renderTicker() {\n document.getElementById('ticker').textContent = beritaData.slice(0, 8).map(b => `\ud83d\udccc ${b.judul}`).join(' \u2022 ');\n}\n\nfunction prevBerita() {\n clearInterval(bsAuto);\n const slides = document.querySelectorAll('.bs-slide');\n if (!slides.length) return;\n slides[bsCurrent].classList.remove('active');\n bsCurrent = (bsCurrent - 1 + slides.length) % slides.length;\n slides[bsCurrent].classList.add('active');\n bsAuto = setInterval(nextBerita, 6000);\n}\n\nfunction nextBerita() {\n const slides = document.querySelectorAll('.bs-slide');\n if (!slides.length) return;\n slides[bsCurrent].classList.remove('active');\n bsCurrent = (bsCurrent + 1) % slides.length;\n slides[bsCurrent].classList.add('active');\n}\n\nloadBerita();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4cf884d e-flex e-con-boxed e-con e-parent\" data-id=\"4cf884d\" 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-dfa3d88 elementor-widget elementor-widget-html\" data-id=\"dfa3d88\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700;800&display=swap');\n<\/style>\n\n<div class=\"ep-wrapper\">\n <div class=\"ep-header\">\n <div class=\"ep-title-wrap\">\n <h2 class=\"ep-title\">Editor's Picks<\/h2>\n <div class=\"ep-underline\"><\/div>\n <\/div>\n <div class=\"ep-nav\">\n <button class=\"ep-btn\" onclick=\"epPrev()\">❮<\/button>\n <button class=\"ep-btn\" onclick=\"epNext()\">❯<\/button>\n <\/div>\n <\/div>\n\n <div class=\"ep-track-wrap\">\n <div class=\"ep-track\" id=\"epTrack\">\n <div class=\"ep-loading\">Memuat berita...<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\n.ep-wrapper {\n font-family: 'Poppins', sans-serif;\n width: 100%;\n}\n\n\/* HEADER *\/\n.ep-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n.ep-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: #111;\n letter-spacing: 0.5px;\n margin-bottom: 6px;\n}\n.ep-underline {\n width: 40px;\n height: 3px;\n background: #305CDE;\n border-radius: 2px;\n}\n.ep-nav {\n display: flex;\n gap: 6px;\n margin-top: 2px;\n}\n.ep-btn {\n width: 34px;\n height: 34px;\n border: 1px solid #ccc;\n background: #fff;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.85rem;\n color: #555;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n padding: 0 !important;\n min-width: unset !important;\n}\n.ep-btn:hover {\n background: #111;\n color: #fff;\n border-color: #111;\n}\n\n\/* TRACK *\/\n.ep-track-wrap {\n overflow: hidden;\n width: 100%;\n}\n.ep-track {\n display: flex;\n gap: 20px;\n transition: transform 0.5s ease;\n will-change: transform;\n}\n\n\/* CARD *\/\n.ep-card {\n flex: 0 0 calc(33.333% - 14px);\n min-width: 0;\n border-radius: 10px;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n text-decoration: none;\n display: block;\n background: #111;\n box-shadow: 0 4px 14px rgba(0,0,0,0.12);\n}\n.ep-card-img-wrap {\n position: relative;\n width: 100%;\n padding-top: 66%;\n overflow: hidden;\n}\n.ep-card-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.4s ease;\n}\n.ep-card:hover .ep-card-img {\n transform: scale(1.05);\n}\n.ep-card-placeholder {\n position: absolute;\n inset: 0;\n background: #2a3a6e;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 3rem;\n}\n\n\/* Stronger, taller gradient so busy photos never wash out the title *\/\n.ep-card-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to top,\n rgba(0,0,0,0.95) 0%,\n rgba(0,0,0,0.85) 22%,\n rgba(0,0,0,0.45) 50%,\n rgba(0,0,0,0.05) 75%,\n rgba(0,0,0,0) 100%\n );\n}\n.ep-card-body {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 16px 16px 14px;\n z-index: 2;\n color: #fff;\n}\n.ep-badge {\n display: inline-block;\n background: #305CDE;\n color: #fff;\n font-size: 0.66rem;\n font-weight: 700;\n padding: 4px 10px;\n border-radius: 3px;\n margin-bottom: 10px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n}\n.ep-card-title {\n font-size: 0.95rem;\n font-weight: 800;\n line-height: 1.42;\n color: #fff;\n margin-bottom: 10px;\n text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 2px 10px rgba(0,0,0,0.6);\n \/* clamp so very long titles stay readable \/ consistent card height *\/\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.ep-card-meta {\n display: flex;\n gap: 14px;\n font-size: 0.7rem;\n color: rgba(255,255,255,0.75);\n flex-wrap: wrap;\n}\n.ep-card-meta span {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.ep-loading {\n padding: 40px;\n text-align: center;\n color: #888;\n font-size: 0.9rem;\n width: 100%;\n}\n\n@media (max-width: 768px) {\n .ep-card { flex: 0 0 calc(100% - 0px); }\n}\n@media (min-width: 480px) and (max-width: 768px) {\n .ep-card { flex: 0 0 calc(50% - 10px); }\n}\n<\/style>\n\n<script>\nvar epData = [], epCurrent = 0, epPerPage = 3;\n\n\/\/ Demo data so the design is visible even when the AJAX endpoint isn't reachable\n\/\/ (e.g. previewing outside the WordPress site). Remove this if not needed.\nvar epDemoData = [\n {\n judul: \"Mahasiswa Internasional Prodi Teknologi Informasi UIN Salatiga, Mohammed Nasser, Raih Penghargaan Best Essay di DNA Summer Course 2026\",\n link: \"#\",\n tanggal: \"20 Juli 2026\",\n kategori: \"PRESTASI MAHASISWA\",\n gambar: \"\"\n },\n {\n judul: \"Fakultas Saintek Gelar Workshop Kecerdasan Buatan untuk Mahasiswa Tingkat Akhir\",\n link: \"#\",\n tanggal: \"18 Juli 2026\",\n kategori: \"AKADEMIK\",\n gambar: \"\"\n },\n {\n judul: \"Kunjungan Delegasi Kampus Mitra dari Malaysia ke Program Studi Teknologi Informasi\",\n link: \"#\",\n tanggal: \"15 Juli 2026\",\n kategori: \"KERJASAMA\",\n gambar: \"\"\n }\n];\n\nfunction parsePost(p) {\n return {\n judul: p.title?.rendered || '',\n link: p.link || '#',\n tanggal: new Date(p.date).toLocaleDateString('id-ID', {day:'numeric', month:'long', year:'numeric'}),\n kategori: p._embedded?.['wp:term']?.[0]?.find(function(t){ return t.parent > 0; })?.name\n || p._embedded?.['wp:term']?.[0]?.[0]?.name\n || 'Berita',\n gambar: p._embedded?.['wp:featuredmedia']?.[0]?.source_url || ''\n };\n}\n\nasync function loadBerita() {\n try {\n var fd = new FormData();\n fd.append('action', 'get_berita_ti');\n var res = await fetch('\/ti\/wp-admin\/admin-ajax.php', { method: 'POST', body: fd });\n var data = await res.json();\n epData = data;\n renderCards();\n } catch(e) {\n \/\/ fallback to demo data for preview purposes\n epData = epDemoData;\n renderCards();\n console.error(e);\n }\n}\n\nfunction renderCards() {\n var track = document.getElementById('epTrack');\n track.innerHTML = '';\n epCurrent = 0;\n\n epData.forEach(function(b) {\n var card = document.createElement('a');\n card.className = 'ep-card';\n card.href = b.link;\n card.innerHTML =\n '<div class=\"ep-card-img-wrap\">' +\n (b.gambar\n ? '<img decoding=\"async\" class=\"ep-card-img\" src=\"' + b.gambar + '\" alt=\"\" onerror=\"this.outerHTML=\\'<div class=ep-card-placeholder>\ud83d\udcf0<\/div>\\'\">'\n : '<div class=\"ep-card-placeholder\">\ud83d\udcf0<\/div>'\n ) +\n '<div class=\"ep-card-overlay\"><\/div>' +\n '<div class=\"ep-card-body\">' +\n '<span class=\"ep-badge\">' + b.kategori + '<\/span>' +\n '<div class=\"ep-card-title\">' + b.judul.replace(\/<[^>]*>\/g,'') + '<\/div>' +\n '<div class=\"ep-card-meta\">' +\n '<span>🕐 ' + b.tanggal + '<\/span>' +\n '<span>💬 0<\/span>' +\n '<\/div>' +\n '<\/div>' +\n '<\/div>';\n track.appendChild(card);\n });\n\n updateTrack();\n}\n\nfunction updateTrack() {\n var track = document.getElementById('epTrack');\n var cards = track.querySelectorAll('.ep-card');\n if (!cards.length) return;\n var cardW = cards[0].offsetWidth + 20;\n track.style.transform = 'translateX(-' + (epCurrent * cardW) + 'px)';\n}\n\nfunction epNext() {\n var track = document.getElementById('epTrack');\n var total = track.querySelectorAll('.ep-card').length;\n if (epCurrent + epPerPage < total) {\n epCurrent++;\n updateTrack();\n }\n}\n\nfunction epPrev() {\n if (epCurrent > 0) {\n epCurrent--;\n updateTrack();\n }\n}\n\nwindow.addEventListener('resize', updateTrack);\nloadBerita();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5009549 e-flex e-con-boxed e-con e-parent\" data-id=\"5009549\" 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-8370d51 elementor-widget elementor-widget-html\" data-id=\"8370d51\" 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>Stats Counter - Teknologi Informasi<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@700;900&display=swap\" rel=\"stylesheet\" \/>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n \/* ============================================================\n PETUNJUK ELEMENTOR:\n 1. Tambahkan widget \"HTML\" di Elementor\n 2. Paste seluruh konten <section class=\"stats-section\">...<\/section>\n 3. CSS paste ke: Appearance > Customize > Additional CSS\n ============================================================ *\/\n\n .stats-section {\n position: relative;\n width: 100%;\n min-height: 260px;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 50px 30px;\n font-family: 'Nunito', sans-serif;\n overflow: hidden;\n }\n\n .stats-grid {\n position: relative;\n z-index: 2;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n width: 100%;\n max-width: 1100px;\n }\n\n .stat-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 0 40px;\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .stat-item:last-child {\n border-right: none;\n }\n\n \/* Blob icon shape *\/\n .stat-icon {\n width: 90px;\n height: 90px;\n background: #305CDE;\n border-radius: 60% 40% 55% 45% \/ 50% 60% 40% 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n animation: blobMorph 6s ease-in-out infinite;\n }\n\n .stat-item:nth-child(2) .stat-icon {\n animation-delay: -1.5s;\n }\n .stat-item:nth-child(3) .stat-icon {\n animation-delay: -3s;\n }\n .stat-item:nth-child(4) .stat-icon {\n animation-delay: -4.5s;\n }\n\n @keyframes blobMorph {\n 0%,\n 100% {\n border-radius: 60% 40% 55% 45% \/ 50% 60% 40% 50%;\n }\n 33% {\n border-radius: 45% 55% 40% 60% \/ 60% 40% 55% 45%;\n }\n 66% {\n border-radius: 55% 45% 60% 40% \/ 40% 55% 45% 60%;\n }\n }\n\n .stat-icon svg {\n width: 44px;\n height: 44px;\n color: #fff;\n }\n\n .stat-number {\n font-size: 64px;\n font-weight: 900;\n color: #fff;\n line-height: 1;\n margin-bottom: 6px;\n }\n\n .stat-label {\n font-size: 16px;\n font-weight: 700;\n color: rgba(255, 255, 255, 0.85);\n }\n\n \/* ============================================================\n TABLET: 2 kolom\n ============================================================ *\/\n @media (max-width: 768px) {\n .stats-grid {\n flex-wrap: wrap;\n }\n .stat-item {\n flex: 0 0 50%;\n border-right: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n padding: 20px;\n }\n .stat-number {\n font-size: 44px;\n }\n }\n\n \/* ============================================================\n MOBILE: 2 KOLOM x 2 BARIS, ukuran lebih kecil\n ============================================================ *\/\n @media (max-width: 480px) {\n .stats-section {\n padding: 24px 10px;\n min-height: auto;\n }\n\n .stats-grid {\n flex-wrap: wrap;\n gap: 0;\n align-items: stretch;\n }\n\n .stat-item {\n flex: 0 0 50%;\n min-width: 0;\n padding: 16px 10px;\n border-right: 1px solid rgba(0, 0, 0, 0.08);\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n }\n\n \/* kolom kanan (item ke-2 dan ke-4) tanpa border kanan *\/\n .stat-item:nth-child(2n) {\n border-right: none;\n }\n\n \/* baris bawah (item ke-3 dan ke-4) tanpa border bawah *\/\n .stat-item:nth-child(n+3) {\n border-bottom: none;\n }\n\n \/* Icon lebih kecil *\/\n .stat-icon {\n width: 46px;\n height: 46px;\n margin-bottom: 8px;\n animation: none;\n \/* matikan animasi biar ringan di mobile *\/\n }\n\n .stat-icon svg {\n width: 24px;\n height: 24px;\n }\n\n \/* Angka lebih kecil *\/\n .stat-number {\n font-size: 28px;\n margin-bottom: 4px;\n line-height: 1.1;\n }\n\n \/* Label lebih kecil *\/\n .stat-label {\n font-size: 11px;\n line-height: 1.3;\n white-space: normal;\n }\n\n \/* Hilangkan animasi blob di mobile agar lebih ringan *\/\n .stat-item:nth-child(2) .stat-icon,\n .stat-item:nth-child(3) .stat-icon,\n .stat-item:nth-child(4) .stat-icon {\n animation-delay: 0s;\n animation: none;\n }\n }\n\n \/* ============================================================\n MOBILE SEMPIT (sangat kecil, misal 360px) \u2014 tetap 2 kolom x 2 baris\n ============================================================ *\/\n @media (max-width: 380px) {\n .stat-icon {\n width: 40px;\n height: 40px;\n margin-bottom: 6px;\n }\n .stat-icon svg {\n width: 20px;\n height: 20px;\n }\n .stat-number {\n font-size: 22px;\n }\n .stat-label {\n font-size: 9.5px;\n }\n .stat-item {\n padding: 12px 6px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <section class=\"stats-section\">\n <div class=\"stats-grid\">\n\n <!-- Stat 1: Total Courses -->\n <div class=\"stat-item\">\n <div class=\"stat-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 19.5A2.5 2.5 0 016.5 17H20\" \/>\n <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z\" \/>\n <line x1=\"9\" y1=\"7\" x2=\"15\" y2=\"7\" \/>\n <line x1=\"9\" y1=\"11\" x2=\"15\" y2=\"11\" \/>\n <\/svg>\n <\/div>\n <div class=\"stat-number\" data-target=\"58\">0<\/div>\n <div class=\"stat-label\">+ Total Mata Kuliah<\/div>\n <\/div>\n\n <!-- Stat 2: Students -->\n <div class=\"stat-item\">\n <div class=\"stat-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\" \/>\n <circle cx=\"9\" cy=\"7\" r=\"4\" \/>\n <path d=\"M23 21v-2a4 4 0 00-3-3.87\" \/>\n <path d=\"M16 3.13a4 4 0 010 7.75\" \/>\n <\/svg>\n <\/div>\n <div class=\"stat-number\" data-target=\"217\">0<\/div>\n <div class=\"stat-label\">+ Mahasiswa Aktif<\/div>\n <\/div>\n\n <!-- Stat 3: Lecturers -->\n <div class=\"stat-item\">\n <div class=\"stat-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" \/>\n <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\" \/>\n <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\" \/>\n <path d=\"M8 10l2 2 4-4\" \/>\n <\/svg>\n <\/div>\n <div class=\"stat-number\" data-target=\"14\">0<\/div>\n <div class=\"stat-label\">+ Dosen Berpengalaman<\/div>\n <\/div>\n\n <!-- Stat 4: Awards -->\n <div class=\"stat-item\">\n <div class=\"stat-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"8\" r=\"6\" \/>\n <path d=\"M15.477 12.89L17 22l-5-3-5 3 1.523-9.11\" \/>\n <\/svg>\n <\/div>\n <div class=\"stat-number\" data-target=\"9\">0<\/div>\n <div class=\"stat-label\">+ Penghargaan Nasional<\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <script>\n function animateCounter(el) {\n const target = parseInt(el.getAttribute('data-target'));\n const duration = 2000;\n const start = performance.now();\n\n function update(now) {\n const elapsed = now - start;\n const progress = Math.min(elapsed \/ duration, 1);\n \/\/ easeOutExpo\n const ease = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);\n el.textContent = Math.floor(ease * target);\n if (progress < 1) requestAnimationFrame(update);\n else el.textContent = target;\n }\n\n requestAnimationFrame(update);\n }\n\n \/\/ Trigger saat elemen masuk viewport\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n animateCounter(entry.target);\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.3 });\n\n document.querySelectorAll('.stat-number[data-target]').forEach(el => observer.observe(el));\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<div class=\"elementor-element elementor-element-c2b67ee e-flex e-con-boxed e-con e-parent\" data-id=\"c2b67ee\" 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-7ad413c elementor-widget elementor-widget-html\" data-id=\"7ad413c\" 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>About Us - Edukation Section<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Nunito', sans-serif;\n background: #fff;\n }\n\n .about-section {\n display: block;\n max-width: 800px;\n margin: 0 auto;\n padding: clamp(28px, 6vw, 60px) clamp(16px, 4vw, 30px);\n }\n\n \/* ===== CONTENT ===== *\/\n .about-content {\n flex: 1;\n }\n\n .label-row {\n text-align: center;\n margin-bottom: 14px;\n }\n\n .label {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: clamp(12px, 2.5vw, 14px);\n font-weight: 700;\n color: #305CDE;\n letter-spacing: 2px;\n text-transform: uppercase;\n border-bottom: 2px solid #305CDE;\n padding-bottom: 6px;\n }\n\n .label svg {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n\n .about-title {\n font-size: clamp(24px, 5vw, 40px);\n font-weight: 900;\n color: #1a2340;\n line-height: 1.2;\n margin-bottom: clamp(14px, 3vw, 20px);\n text-align: center;\n }\n\n .about-title span {\n color: #305CDE;\n }\n\n .about-desc {\n font-size: clamp(13.5px, 2.2vw, 15px);\n color: #6b7280;\n line-height: 1.7;\n margin-bottom: clamp(22px, 4vw, 30px);\n }\n\n .services-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(14px, 3vw, 20px);\n margin-bottom: clamp(24px, 4vw, 32px);\n }\n\n .service-item {\n display: flex;\n align-items: flex-start;\n gap: 14px;\n }\n\n .service-icon {\n width: clamp(44px, 8vw, 52px);\n height: clamp(44px, 8vw, 52px);\n border-radius: 50%;\n background: #305CDE;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .service-icon svg {\n width: 55%;\n height: 55%;\n color: #fff;\n }\n\n .service-text h4 {\n font-size: clamp(14px, 2.6vw, 16px);\n font-weight: 800;\n color: #1a2340;\n margin-bottom: 5px;\n }\n\n .service-text p {\n font-size: clamp(12px, 2.2vw, 13px);\n color: #6b7280;\n line-height: 1.6;\n }\n\n .quote-box {\n background: #f1f4f9;\n border-radius: 14px;\n padding: clamp(16px, 3.5vw, 22px) clamp(14px, 3vw, 20px) clamp(12px, 2.5vw, 16px);\n position: relative;\n grid-column: 2;\n grid-row: 1 \/ 3;\n }\n\n .quote-box p {\n font-size: clamp(13px, 2.2vw, 14px);\n color: #4b5563;\n line-height: 1.7;\n }\n\n .quote-number {\n font-size: clamp(36px, 8vw, 52px);\n font-weight: 900;\n color: #1a3a8f;\n line-height: 1;\n text-align: right;\n margin-top: 8px;\n }\n\n .about-cta {\n display: flex;\n align-items: center;\n gap: clamp(14px, 3vw, 20px);\n flex-wrap: wrap;\n }\n\n .btn-discover {\n background: #305CDE;\n color: #fff;\n font-family: 'Nunito', sans-serif;\n font-size: clamp(12px, 2.2vw, 13px);\n font-weight: 800;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n padding: clamp(13px, 2.8vw, 16px) clamp(22px, 5vw, 30px);\n border-radius: 50px;\n text-decoration: none;\n transition: background 0.3s;\n white-space: nowrap;\n }\n\n .btn-discover:hover {\n background: #1e4abf;\n }\n\n .call-info {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .call-icon {\n width: clamp(40px, 7vw, 46px);\n height: clamp(40px, 7vw, 46px);\n border-radius: 50%;\n border: 2px solid #1a3a8f;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .call-icon svg {\n width: 20px;\n height: 20px;\n color: #1a3a8f;\n }\n\n .call-text small {\n display: block;\n font-size: clamp(11px, 2vw, 12px);\n color: #6b7280;\n font-weight: 600;\n }\n\n .call-text strong {\n font-size: clamp(14px, 2.6vw, 16px);\n font-weight: 900;\n color: #1a3a8f;\n }\n\n \/* =========================\n TABLET\n ========================= *\/\n @media (max-width: 640px) {\n .services-grid {\n display: flex;\n flex-direction: column;\n gap: clamp(16px, 4vw, 20px);\n }\n\n .service-item {\n flex-direction: column;\n text-align: center;\n gap: 10px;\n align-items: center;\n }\n\n .quote-box {\n order: 99;\n grid-column: auto;\n grid-row: auto;\n margin-top: 4px;\n text-align: center;\n }\n\n .quote-number {\n text-align: center;\n }\n }\n\n \/* =========================\n MOBILE\n ========================= *\/\n @media (max-width: 768px) {\n\n .about-content {\n text-align: center;\n }\n\n .about-cta {\n flex-direction: column;\n align-items: center;\n gap: 16px;\n }\n\n .btn-discover {\n width: 100%;\n max-width: 320px;\n text-align: center;\n }\n\n .call-info {\n justify-content: center;\n }\n\n .call-text {\n text-align: left;\n }\n }\n\n \/* =========================\n HP SANGAT SEMPIT\n ========================= *\/\n @media (max-width: 360px) {\n .about-title {\n font-size: 22px;\n }\n .service-icon {\n width: 40px;\n height: 40px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- ========================================================\n PETUNJUK ELEMENTOR:\n Gunakan widget \"HTML\" di Elementor, lalu paste\n hanya bagian <section class=\"about-section\"> ... <\/section>\n ke dalam widget tersebut.\n CSS di atas bisa dipaste ke:\n Elementor > Site Settings > Custom CSS\n ATAU di Dashboard > Appearance > Customize > Additional CSS\n ======================================================== -->\n\n <section class=\"about-section\">\n\n <div class=\"about-content\">\n\n <div class=\"label-row\">\n <div class=\"label\">\n <!-- solid single-path book icon: safe even if theme CSS forces fill on svg -->\n <svg viewBox=\"0 0 448 512\" fill=\"currentColor\">\n <path d=\"M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z\"\/>\n <\/svg>\n Tentang Prodi\n <\/div>\n <\/div>\n\n <h2 class=\"about-title\">\n Prodi Teknologi Informasi<br\/>\n <span>Mewujudkan<\/span> Inovasi Digital Berlandaskan Wasathiyah Islam.\n <\/h2>\n\n <p class=\"about-desc\">\n Program Studi Teknologi Informasi UIN Salatiga berkomitmen menghasilkan lulusan yang kompeten, inovatif, dan berdaya saing global melalui pendidikan, penelitian, dan pengabdian di bidang teknologi informasi yang berlandaskan nilai-nilai wasathiyah Islam.\n <\/p>\n\n <div class=\"services-grid\">\n\n <div class=\"service-item\">\n <div class=\"service-icon\">\n <!-- solid filled chevrons (\"<\/>\") instead of stroke polylines -->\n <svg viewBox=\"0 0 24 24\" fill=\"white\">\n <polygon points=\"9,4 3,12 9,20 11,17.5 6.7,12 11,6.5\"\/>\n <polygon points=\"15,4 21,12 15,20 13,17.5 17.3,12 13,6.5\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-text\">\n <h4>Rekayasa Perangkat Lunak<\/h4>\n <p>Mempelajari pengembangan sistem dan aplikasi berbasis teknologi terkini.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"quote-box\">\n <p>Lulusan Teknologi Informasi kami siap berkarier sebagai software engineer,\n data scientist, network engineer, dan berbagai profesi teknologi unggulan lainnya\n di industri global.<\/p>\n <div class=\"quote-number\">99<\/div>\n <\/div>\n\n <div class=\"service-item\">\n <div class=\"service-icon\">\n <!-- solid filled shapes instead of stroke rects\/paths -->\n <svg viewBox=\"0 0 24 24\" fill=\"white\">\n <rect x=\"2\" y=\"3\" width=\"6\" height=\"4\" rx=\"1\"\/>\n <rect x=\"16\" y=\"3\" width=\"6\" height=\"4\" rx=\"1\"\/>\n <rect x=\"9\" y=\"17\" width=\"6\" height=\"4\" rx=\"1\"\/>\n <rect x=\"4.25\" y=\"7\" width=\"1.5\" height=\"6\"\/>\n <rect x=\"18.25\" y=\"7\" width=\"1.5\" height=\"6\"\/>\n <rect x=\"4.25\" y=\"11.25\" width=\"15.5\" height=\"1.5\"\/>\n <rect x=\"11.25\" y=\"12.5\" width=\"1.5\" height=\"4.5\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-text\">\n <h4>Jaringan & Keamanan Siber<\/h4>\n <p>Membekali mahasiswa dengan keahlian infrastruktur dan keamanan digital.<\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"about-cta\">\n <a href=\"#\" class=\"btn-discover\">Pelajari Lebih Lanjut \u2192<\/a>\n <div class=\"call-info\">\n <div class=\"call-icon\">\n <!-- solid fill phone receiver silhouette (same safe shape used in the footer fix) -->\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <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.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/>\n <\/svg>\n <\/div>\n <div class=\"call-text\">\n <small>Hubungi Kami<\/small>\n <strong>ti@uinsalatiga.ac.id<\/strong>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\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<div class=\"elementor-element elementor-element-5cc0091 e-con-full e-flex e-con e-parent\" data-id=\"5cc0091\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa3138f elementor-widget elementor-widget-heading\" data-id=\"fa3138f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CAM<br>PUS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17b2b50 elementor-widget elementor-widget-html\" data-id=\"17b2b50\" 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<title>Hero Visi + Career Slider<\/title>\n<style>\n * { box-sizing: border-box; }\n body {\n margin: 0;\n font-family: 'Poppins', 'Segoe UI', sans-serif;\n background: #fff;\n }\n\n .hero-wrap {\n display: flex;\n width: 100%;\n min-height: 460px;\n border-radius: 40px;\n overflow: hidden;\n }\n\n \/* ===== LEFT: VISI PANEL ===== *\/\n .visi-panel {\n flex: 0 0 45%;\n background: #3b5fe3;\n color: #fff;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 50px 60px;\n }\n\n .visi-eyebrow {\n display: flex;\n align-items: center;\n gap: 14px;\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 28px;\n }\n\n .visi-eyebrow::before {\n content: '';\n display: block;\n width: 40px;\n height: 2px;\n background: #fff;\n }\n\n .visi-text {\n font-size: 22px;\n font-weight: 700;\n line-height: 1.6;\n text-align: right;\n }\n\n \/* ===== RIGHT: CAREER SLIDER ===== *\/\n .career-slider-wrap {\n position: relative;\n flex: 1;\n height: auto;\n overflow: hidden;\n }\n\n .career-slide {\n position: absolute;\n inset: 0;\n opacity: 0;\n transition: opacity .8s ease;\n pointer-events: none;\n }\n\n .career-slide.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n .career-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n .career-slide::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.15));\n pointer-events: none;\n }\n\n .career-caption {\n position: absolute;\n left: 40px;\n bottom: 40px;\n z-index: 5;\n color: #fff;\n max-width: 70%;\n text-shadow: 0 3px 12px rgba(0,0,0,.55);\n }\n\n .career-caption h2 {\n font-size: 38px;\n font-weight: 800;\n margin: 0 0 14px;\n line-height: 1.1;\n color: #fff;\n }\n\n .career-caption p {\n font-size: 16px;\n line-height: 1.8;\n margin: 0;\n color: rgba(255,255,255,.9);\n }\n\n .career-prev, .career-next {\n position: absolute;\n bottom: 35px;\n z-index: 10;\n width: 54px;\n height: 54px;\n border: none;\n border-radius: 50%;\n background: #fff;\n color: #111;\n font-size: 20px;\n cursor: pointer;\n transition: .3s;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0,0,0,.25);\n padding: 0;\n margin: 0;\n line-height: 1;\n appearance: none;\n -webkit-appearance: none;\n flex-shrink: 0;\n }\n\n .career-prev { right: 100px; }\n .career-next { right: 35px; }\n\n .career-prev:hover, .career-next:hover {\n background: #1d4ed8;\n color: #fff;\n }\n\n \/* ===== MOBILE & TABLET: dua baris (stacked) ===== *\/\n @media (max-width: 900px) {\n .hero-wrap {\n flex-direction: column;\n border-radius: 20px;\n height: auto !important;\n min-height: unset;\n overflow: visible;\n }\n .visi-panel {\n flex: none;\n width: 100%;\n padding: 48px 24px;\n }\n .visi-text {\n font-size: 16px;\n text-align: left;\n }\n .career-slider-wrap {\n flex: none;\n width: 100%;\n height: 260px;\n }\n .career-caption {\n left: 16px;\n bottom: 16px;\n max-width: 62%;\n }\n .career-caption h2 {\n font-size: 18px;\n margin-bottom: 6px;\n }\n .career-caption p {\n font-size: 11px;\n line-height: 1.5;\n }\n .career-prev, .career-next {\n width: 36px;\n height: 36px;\n font-size: 13px;\n bottom: 14px;\n top: auto;\n padding: 0;\n line-height: 1;\n appearance: none;\n -webkit-appearance: none;\n }\n .career-prev { right: 58px; }\n .career-next { right: 14px; }\n }\n\n @media (max-width: 480px) {\n .career-slider-wrap {\n height: 200px;\n }\n .career-caption h2 {\n font-size: 16px;\n }\n .career-caption p {\n font-size: 10px;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hero-wrap\">\n\n <!-- LEFT: VISI PANEL -->\n <div class=\"visi-panel\">\n <div class=\"visi-eyebrow\">VISI PROGRAM STUDI<\/div>\n <p class=\"visi-text\">\n \"Menghasilkan lulusan dengan keilmuan Teknologi Informasi berbasis riset inovatif yang mengintegrasikan kecerdasan artifisial dan etika moderasi Islam untuk keluhuran martabat kemanusiaan pada tahun 2045\"\n <\/p>\n <\/div>\n\n <!-- RIGHT: CAREER SLIDER -->\n <div class=\"career-slider-wrap\">\n\n <div class=\"career-slide active\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop\" alt=\"Software Engineer\">\n <div class=\"career-caption\">\n <h2>Software Engineer<\/h2>\n <p>Mengembangkan aplikasi, website, dan sistem digital modern berbasis rekayasa perangkat lunak.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"career-slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550751827-4bd374c3f58b?q=80&w=1200&auto=format&fit=crop\" alt=\"Cyber Security Analyst\">\n <div class=\"career-caption\">\n <h2>Cyber Security Analyst<\/h2>\n <p>Melindungi sistem dan data organisasi melalui analisis keamanan siber dan manajemen risiko digital.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"career-slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop\" alt=\"Network & Infrastructure Engineer\">\n <div class=\"career-caption\">\n <h2>Network & Infrastructure Engineer<\/h2>\n <p>Merancang, mengelola, dan mengoptimalkan infrastruktur jaringan, server, serta layanan cloud.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"career-slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1454165804606-c3d57bc86b40?q=80&w=1200&auto=format&fit=crop\" alt=\"Enterprise System Architect\">\n <div class=\"career-caption\">\n <h2>Enterprise System Architect<\/h2>\n <p>Mengintegrasikan proses bisnis dan sistem informasi untuk meningkatkan efisiensi organisasi.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"career-slide\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop\" alt=\"IoT & Cloud Developer\">\n <div class=\"career-caption\">\n <h2>IoT & Cloud Developer<\/h2>\n <p>Mengembangkan solusi Internet of Things dan komputasi awan untuk kebutuhan industri modern.<\/p>\n <\/div>\n <\/div>\n\n <button class=\"career-prev\" aria-label=\"Previous slide\">❮<\/button>\n <button class=\"career-next\" aria-label=\"Next slide\">❯<\/button>\n\n <\/div>\n\n<\/div>\n\n<script>\n const careerSlides = document.querySelectorAll('.career-slide');\n const nextBtn = document.querySelector('.career-next');\n const prevBtn = document.querySelector('.career-prev');\n let careerIndex = 0;\n\n function showCareerSlide(index) {\n careerSlides.forEach(slide => slide.classList.remove('active'));\n careerSlides[index].classList.add('active');\n }\n\n function nextCareerSlide() {\n careerIndex = (careerIndex + 1) % careerSlides.length;\n showCareerSlide(careerIndex);\n }\n\n function prevCareerSlide() {\n careerIndex = (careerIndex - 1 + careerSlides.length) % careerSlides.length;\n showCareerSlide(careerIndex);\n }\n\n nextBtn.addEventListener('click', nextCareerSlide);\n prevBtn.addEventListener('click', prevCareerSlide);\n\n setInterval(nextCareerSlide, 5000);\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-1437575 e-flex e-con-boxed e-con e-parent\" data-id=\"1437575\" 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-78d09eb elementor-widget elementor-widget-html\" data-id=\"78d09eb\" 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>Galeri Foto<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Baloo+2:wght@600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --navy:#12172e;\n --navy-soft:#2b3155;\n --blue:#3e56e0;\n --blue-dark:#2c3fb0;\n --blue-tint:#eef1ff;\n --gray:#6b7280;\n --white:#ffffff;\n --radius:18px;\n --shadow:0 18px 40px -18px rgba(18,23,46,0.35);\n }\n *{box-sizing:border-box;}\n body{\n margin:0;\n background:var(--white);\n font-family:'Inter',sans-serif;\n color:var(--navy);\n }\n .wrap{\n max-width:1180px;\n margin:0 auto;\n padding:72px 24px 96px;\n }\n\n \/* Header *\/\n .eyebrow-row{\n text-align:center;\n margin-bottom:18px;\n }\n .eyebrow{\n display:inline-flex;\n align-items:center;\n gap:10px;\n color:var(--blue);\n font-family:'Inter',sans-serif;\n font-weight:700;\n font-size:14px;\n letter-spacing:.16em;\n text-transform:uppercase;\n border-bottom:2px solid var(--blue);\n padding-bottom:6px;\n }\n .eyebrow-icon{\n display:flex;\n align-items:center;\n justify-content:center;\n width:20px;\n height:20px;\n flex-shrink:0;\n }\n .eyebrow-icon svg{\n width:100%;\n height:100%;\n display:block;\n }\n h1{\n font-family:'Baloo 2',sans-serif;\n font-weight:800;\n text-align:center;\n font-size:clamp(32px,5vw,52px);\n line-height:1.1;\n margin:0 0 14px;\n color:var(--navy);\n }\n h1 .accent{color:var(--blue);}\n .sub{\n text-align:center;\n color:var(--gray);\n font-size:15.5px;\n max-width:560px;\n margin:0 auto 52px;\n line-height:1.6;\n }\n\n \/* Filter pills (built from sheet categories) *\/\n .filters{\n display:flex;\n flex-wrap:wrap;\n justify-content:center;\n gap:10px;\n margin-bottom:44px;\n }\n .filters button{\n border:1.5px solid #e2e5f5;\n background:var(--white);\n color:var(--navy-soft);\n font-family:'Inter',sans-serif;\n font-weight:600;\n font-size:13.5px;\n padding:9px 18px;\n border-radius:999px;\n cursor:pointer;\n transition:all .18s ease;\n }\n .filters button:hover{border-color:var(--blue);color:var(--blue);}\n .filters button.active{\n background:var(--navy);\n border-color:var(--navy);\n color:var(--white);\n }\n\n \/* Photo grid \u2014 fixed 6 photos, 3 columns, with row + column gap *\/\n #masonry{\n display:grid;\n grid-template-columns:repeat(2, 1fr);\n grid-auto-rows:150px;\n gap:14px;\n }\n #masonry img{\n height:100%;\n object-fit:cover;\n }\n @media(min-width:901px){\n #masonry{\n grid-template-columns:repeat(3, 1fr);\n grid-template-rows:repeat(5, 90px);\n grid-auto-rows:unset;\n gap:22px;\n }\n #masonry figure:nth-child(1){grid-column:1; grid-row:1 \/ 3;}\n #masonry figure:nth-child(2){grid-column:1; grid-row:3 \/ 6;}\n #masonry figure:nth-child(3){grid-column:2; grid-row:1 \/ 4;}\n #masonry figure:nth-child(4){grid-column:2; grid-row:4 \/ 6;}\n #masonry figure:nth-child(5){grid-column:3; grid-row:1 \/ 3;}\n #masonry figure:nth-child(6){grid-column:3; grid-row:3 \/ 6;}\n }\n\n figure{\n margin:0;\n position:relative;\n border-radius:var(--radius);\n overflow:hidden;\n box-shadow:var(--shadow);\n background:var(--navy-soft);\n cursor:pointer;\n }\n figure img{\n width:100%;\n display:block;\n transition:transform .5s ease;\n }\n figure:hover img{transform:scale(1.06);}\n figcaption{\n position:absolute;\n inset:auto 0 0 0;\n padding:18px 16px 14px;\n background:linear-gradient(0deg, rgba(18,23,46,.92) 0%, rgba(18,23,46,0) 100%);\n color:var(--white);\n opacity:0;\n transform:translateY(8px);\n transition:all .3s ease;\n }\n figure:hover figcaption{opacity:1;transform:translateY(0);}\n figcaption .cat{\n display:inline-block;\n font-size:11px;\n font-weight:700;\n letter-spacing:.08em;\n text-transform:uppercase;\n color:#9cb0ff;\n margin-bottom:4px;\n }\n figcaption .title{\n font-family:'Inter',sans-serif;\n font-weight:600;\n font-size:14.5px;\n line-height:1.3;\n }\n\n \/* States *\/\n .state{\n text-align:center;\n padding:60px 20px;\n color:var(--gray);\n font-size:14.5px;\n }\n .state .dot{\n width:34px;height:34px;\n border-radius:50%;\n border:3px solid var(--blue-tint);\n border-top-color:var(--blue);\n margin:0 auto 16px;\n animation:spin 0.8s linear infinite;\n }\n @keyframes spin{to{transform:rotate(360deg);}}\n .retry{\n margin-top:14px;\n border:1.5px solid var(--blue);\n color:var(--blue);\n background:none;\n font-family:'Inter',sans-serif;\n font-weight:600;\n font-size:13.5px;\n padding:8px 18px;\n border-radius:999px;\n cursor:pointer;\n }\n\n \/* Lightbox preview *\/\n .lightbox{\n display:none;\n position:fixed;\n inset:0;\n background:rgba(18,23,46,.94);\n z-index:999;\n align-items:center;\n justify-content:center;\n padding:24px;\n }\n .lightbox.open{display:flex;}\n .lightbox img{\n max-width:82vw;\n max-height:78vh;\n object-fit:contain;\n border-radius:14px;\n box-shadow:0 20px 60px rgba(0,0,0,.5);\n }\n .lb-close, .lb-nav{\n box-sizing:border-box;\n padding:0;\n margin:0;\n display:flex;\n align-items:center;\n justify-content:center;\n border:none;\n border-radius:50%;\n background:rgba(255,255,255,.12);\n color:var(--white);\n cursor:pointer;\n flex-shrink:0;\n }\n .lb-close{\n position:absolute;\n top:22px; right:26px;\n width:40px;height:40px;\n font-size:20px;\n line-height:0;\n }\n .lb-nav{\n position:absolute;\n top:50%;\n transform:translateY(-50%);\n width:48px;height:48px;\n font-size:18px;\n line-height:0;\n }\n .lb-nav:hover, .lb-close:hover{background:rgba(255,255,255,.24);}\n .lb-prev{left:20px;}\n .lb-next{right:20px;}\n .lb-caption{\n position:absolute;\n bottom:64px;\n left:0; right:0;\n text-align:center;\n color:var(--white);\n font-family:'Inter',sans-serif;\n font-weight:600;\n font-size:15px;\n padding:0 60px;\n }\n .lb-counter{\n position:absolute;\n bottom:28px;\n left:0; right:0;\n text-align:center;\n color:#9cb0ff;\n font-size:12.5px;\n font-weight:600;\n letter-spacing:.05em;\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"wrap\">\n\n <div class=\"eyebrow-row\">\n <div class=\"eyebrow\">\n <span class=\"eyebrow-icon\">\n <svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path d=\"M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6H288 384h64c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-144-208zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z\"\/><\/svg>\n <\/span>\n Galeri Kami\n <\/div>\n <\/div>\n\n <h1>Momen <span class=\"accent\">Kegiatan<\/span><br>Prodi Teknologi Informasi<\/h1>\n <p class=\"sub\">Kumpulan dokumentasi kegiatan, perkuliahan, dan kebersamaan mahasiswa.<\/p>\n\n <div class=\"filters\" id=\"filters\" style=\"display:none\"><\/div>\n\n <div id=\"state\" class=\"state\">\n <div class=\"dot\"><\/div>\n Memuat galeri\u2026\n <\/div>\n\n <div class=\"masonry\" id=\"masonry\" style=\"display:none\"><\/div>\n<\/div>\n\n<div class=\"lightbox\" id=\"lightbox\">\n <button class=\"lb-close\" id=\"lbClose\" aria-label=\"Tutup\">×<\/button>\n <button class=\"lb-nav lb-prev\" id=\"lbPrev\" aria-label=\"Sebelumnya\">❮<\/button>\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"\">\n <div class=\"lb-caption\" id=\"lightboxCaption\"><\/div>\n <div class=\"lb-counter\" id=\"lightboxCounter\"><\/div>\n <button class=\"lb-nav lb-next\" id=\"lbNext\" aria-label=\"Berikutnya\">❯<\/button>\n<\/div>\n\n<script>\n\/* =========================================================\n KONFIGURASI\n Ganti nilai di bawah dengan URL Web App Apps Script kamu.\n Lihat panduan pembuatan API-nya di pesan chat.\n ========================================================= *\/\nconst API_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbyyW0pq9pt1nmKS6K__gtr_PkLaUSLEAxQZjuxN57cHRB4r8CvqVYsg3lxkJgcGQDlk\/exec\";\n\n\/* Data contoh (dipakai otomatis jika API_URL belum diisi,\n supaya kamu bisa lihat tampilannya duluan) *\/\nconst DEMO_DATA = [\n {image_url:\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?w=600\", title:\"Diskusi kelompok proyek akhir\", category:\"Perkuliahan\"},\n {image_url:\"https:\/\/images.unsplash.com\/photo-1517245386807-bb43f82c33c4?w=600\", title:\"Kuliah umum dosen tamu\", category:\"Kegiatan\"},\n {image_url:\"https:\/\/images.unsplash.com\/photo-1571260899304-425eee4c7efc?w=600\", title:\"Sesi mentoring mahasiswa baru\", category:\"Kemahasiswaan\"},\n {image_url:\"https:\/\/images.unsplash.com\/photo-1523240795612-9a054b0db644?w=600\", title:\"Presentasi tugas akhir\", category:\"Perkuliahan\"},\n {image_url:\"https:\/\/images.unsplash.com\/photo-1541339907198-e08756dedf3f?w=600\", title:\"Wisuda angkatan 2025\", category:\"Wisuda\"},\n {image_url:\"https:\/\/images.unsplash.com\/photo-1531482615713-2afd69097998?w=600\", title:\"Kunjungan industri\", category:\"Kegiatan\"},\n {image_url:\"https:\/\/images.unsplash.com\/photo-1524178232363-1fb2b075b655?w=600\", title:\"Praktikum laboratorium jaringan\", category:\"Perkuliahan\"},\n {image_url:\"https:\/\/images.unsplash.com\/photo-1543269865-cbf427effbad?w=600\", title:\"Seminar nasional teknologi\", category:\"Kegiatan\"}\n];\n\nconst stateEl = document.getElementById('state');\nconst masonryEl = document.getElementById('masonry');\nconst filtersEl = document.getElementById('filters');\nlet allItems = [];\nlet activeCat = 'Semua';\n\n\/* ---- Lightbox state & elements ---- *\/\nconst lightboxEl = document.getElementById('lightbox');\nconst lightboxImg = document.getElementById('lightboxImg');\nconst lightboxCaption = document.getElementById('lightboxCaption');\nconst lightboxCounter = document.getElementById('lightboxCounter');\nlet lbList = [];\nlet lbIndex = 0;\n\nfunction openLightbox(list, index){\n lbList = list;\n lbIndex = index;\n updateLightbox();\n lightboxEl.classList.add('open');\n}\nfunction updateLightbox(){\n const item = lbList[lbIndex];\n lightboxImg.src = item.image_url;\n lightboxImg.alt = item.title || '';\n lightboxCaption.textContent = item.title || '';\n lightboxCounter.textContent = (lbIndex + 1) + ' \/ ' + lbList.length;\n}\nfunction lbNext(){ lbIndex = (lbIndex + 1) % lbList.length; updateLightbox(); }\nfunction lbPrev(){ lbIndex = (lbIndex - 1 + lbList.length) % lbList.length; updateLightbox(); }\nfunction closeLightbox(){ lightboxEl.classList.remove('open'); }\n\ndocument.getElementById('lbNext').addEventListener('click', lbNext);\ndocument.getElementById('lbPrev').addEventListener('click', lbPrev);\ndocument.getElementById('lbClose').addEventListener('click', closeLightbox);\nlightboxEl.addEventListener('click', (e) => { if(e.target === lightboxEl) closeLightbox(); });\ndocument.addEventListener('keydown', (e) => {\n if(!lightboxEl.classList.contains('open')) return;\n if(e.key === 'Escape') closeLightbox();\n if(e.key === 'ArrowRight') lbNext();\n if(e.key === 'ArrowLeft') lbPrev();\n});\n\nasync function loadData(){\n stateEl.style.display = 'block';\n stateEl.innerHTML = '<div class=\"dot\"><\/div>Memuat galeri\u2026';\n masonryEl.style.display = 'none';\n\n if(!API_URL || API_URL.includes('GANTI_DENGAN')){\n allItems = DEMO_DATA;\n render();\n return;\n }\n\n try{\n const res = await fetch(API_URL);\n if(!res.ok) throw new Error('Gagal mengambil data (' + res.status + ')');\n const data = await res.json();\n if(!Array.isArray(data) || data.length === 0) throw new Error('Sheet kosong atau format tidak sesuai');\n allItems = data;\n render();\n }catch(err){\n stateEl.innerHTML =\n 'Tidak bisa memuat galeri: ' + err.message +\n '<br><button class=\"retry\" onclick=\"loadData()\">Coba lagi<\/button>';\n }\n}\n\nfunction render(){\n \/\/ build category filters\n const cats = ['Semua', ...new Set(allItems.map(i => i.category).filter(Boolean))];\n if(cats.length > 1){\n filtersEl.style.display = 'flex';\n filtersEl.innerHTML = cats.map(c =>\n `<button data-cat=\"${c}\" class=\"${c===activeCat?'active':''}\">${c}<\/button>`\n ).join('');\n filtersEl.querySelectorAll('button').forEach(b=>{\n b.addEventListener('click', ()=>{\n activeCat = b.dataset.cat;\n filtersEl.querySelectorAll('button').forEach(x=>x.classList.remove('active'));\n b.classList.add('active');\n renderGrid();\n });\n });\n }\n renderGrid();\n}\n\nfunction shuffleArray(arr){\n const a = arr.slice();\n for(let i = a.length - 1; i > 0; i--){\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\n\nfunction renderGrid(){\n const items = activeCat === 'Semua'\n ? allItems\n : allItems.filter(i => i.category === activeCat);\n\n if(items.length === 0){\n stateEl.style.display = 'block';\n stateEl.innerHTML = 'Belum ada foto di kategori ini.';\n masonryEl.style.display = 'none';\n return;\n }\n\n stateEl.style.display = 'none';\n masonryEl.style.display = 'grid';\n\n \/\/ acak urutan foto tiap kali halaman dimuat\/filter diganti,\n \/\/ lalu ambil 6 foto pertama untuk ditampilkan di grid utama\n const shuffled = shuffleArray(items);\n const displayItems = shuffled.slice(0, 6);\n\n masonryEl.innerHTML = displayItems.map(item => `\n <figure>\n <img decoding=\"async\" src=\"${item.image_url}\" alt=\"${item.title || ''}\" loading=\"lazy\">\n <figcaption>\n ${item.category ? `<div class=\"cat\">${item.category}<\/div>` : ''}\n <div class=\"title\">${item.title || ''}<\/div>\n <\/figcaption>\n <\/figure>\n `).join('');\n\n \/\/ klik foto -> buka lightbox, navigasi tetap bisa ke SEMUA foto (items),\n \/\/ bukan cuma 6 yang tampil\n const figures = masonryEl.querySelectorAll('figure');\n figures.forEach((fig, i) => {\n fig.addEventListener('click', () => openLightbox(items, i));\n });\n}\n\nloadData();\n<\/script>\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<div class=\"elementor-element elementor-element-3da273a e-flex e-con-boxed e-con e-parent\" data-id=\"3da273a\" 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-98cbd87 elementor-widget elementor-widget-html\" data-id=\"98cbd87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n\/* =========================\n TI BLOG SECTION ONLY\n SUPER SAFE VERSION\n========================= *\/\n\n.ti-blog-section-9821{\n padding:90px 40px;\n max-width:1200px;\n margin:auto;\n font-family:'Poppins',sans-serif;\n}\n\n\/* =========================\n HEADER\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-head{\n text-align:center;\n margin-bottom:65px;\n}\n\n.ti-blog-section-9821 .tb9821-label{\n display:inline-flex;\n align-items:center;\n gap:10px;\n color:#305CDE;\n font-size:15px;\n font-weight:700;\n letter-spacing:2px;\n text-transform:uppercase;\n margin-bottom:18px;\n border-bottom:2px solid #305CDE;\n padding-bottom:6px;\n}\n\n.ti-blog-section-9821 .tb9821-label-icon{\n font-size:20px;\n}\n\n.ti-blog-section-9821 .tb9821-title{\n font-size:clamp(36px,5vw,64px);\n line-height:1.1;\n font-weight:800;\n color:#111827;\n margin-bottom:22px;\n}\n\n.ti-blog-section-9821 .tb9821-title span{\n color:#305CDE;\n}\n\n.ti-blog-section-9821 .tb9821-sub{\n color:#6b7280;\n font-size:18px;\n line-height:1.8;\n max-width:640px;\n margin:auto;\n}\n\n\/* =========================\n GRID\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:32px;\n}\n\n\/* =========================\n CARD\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-card{\n background:#fff;\n border-radius:38px;\n padding:20px;\n box-shadow:0 8px 40px rgba(0,0,0,.07);\n transition:.3s ease;\n}\n\n.ti-blog-section-9821 .tb9821-card:hover{\n transform:translateY(-8px);\n box-shadow:0 20px 50px rgba(0,0,0,.12);\n}\n\n\/* =========================\n IMAGE\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-image-wrap{\n position:relative;\n overflow:hidden;\n border-radius:26px;\n height:200px;\n}\n\n.ti-blog-section-9821 .tb9821-image{\n width:100%;\n height:100%;\n object-fit:cover;\n display:block;\n transition:transform .4s ease;\n}\n\n.ti-blog-section-9821 .tb9821-card:hover .tb9821-image{\n transform:scale(1.04);\n}\n\n\/* =========================\n PLACEHOLDER\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-placeholder{\n width:100%;\n height:100%;\n background:linear-gradient(135deg,#dde6ff,#c5d5fa);\n display:flex;\n align-items:center;\n justify-content:center;\n}\n\n.ti-blog-section-9821 .tb9821-placeholder-icon{\n font-size:56px;\n color:#305CDE;\n}\n\n\/* =========================\n DATE BADGE\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-date{\n position:absolute;\n top:22px;\n right:-8px;\n background:#305CDE;\n color:#fff;\n font-size:14px;\n font-weight:700;\n padding:12px 22px;\n border-radius:999px 0 0 999px;\n display:flex;\n align-items:center;\n gap:8px;\n z-index:2;\n box-shadow:0 8px 24px rgba(48,92,222,.4);\n}\n\n.ti-blog-section-9821 .tb9821-date-icon{\n font-size:16px;\n}\n\n\/* =========================\n BODY\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-body{\n padding:26px 8px 10px;\n}\n\n\/* =========================\n META\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-meta{\n display:flex;\n align-items:center;\n gap:22px;\n margin-bottom:18px;\n flex-wrap:wrap;\n}\n\n.ti-blog-section-9821 .tb9821-meta-item{\n display:flex;\n align-items:center;\n gap:8px;\n color:#555;\n font-size:14px;\n font-weight:500;\n}\n\n.ti-blog-section-9821 .tb9821-meta-icon{\n color:#305CDE;\n font-size:18px;\n}\n\n\/* =========================\n TITLE\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-card-title{\n font-size:18px;\n line-height:1.55;\n font-weight:700;\n color:#111827;\n margin-bottom:12px;\n\n display:-webkit-box;\n -webkit-line-clamp:2;\n -webkit-box-orient:vertical;\n overflow:hidden;\n min-height:56px;\n}\n\n\/* =========================\n EXCERPT\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-excerpt{\n font-size:13.5px;\n line-height:1.7;\n color:#6b7280;\n margin-bottom:22px;\n\n display:-webkit-box;\n -webkit-line-clamp:3;\n -webkit-box-orient:vertical;\n overflow:hidden;\n}\n\n\/* =========================\n BUTTON\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-button{\n display:inline-flex;\n align-items:center;\n gap:10px;\n background:#305CDE;\n color:#fff;\n text-decoration:none;\n padding:14px 30px;\n border-radius:999px;\n font-size:13px;\n font-weight:700;\n letter-spacing:1.2px;\n transition:.25s ease;\n box-shadow:0 4px 18px rgba(48,92,222,.35);\n}\n\n.ti-blog-section-9821 .tb9821-button:hover{\n background:#1e47c4;\n transform:translateY(-2px);\n}\n\n.ti-blog-section-9821 .tb9821-button-icon{\n font-size:16px;\n}\n\n\/* =========================\n LOADING\n========================= *\/\n\n.ti-blog-section-9821 .tb9821-loading{\n text-align:center;\n padding:60px;\n color:#888;\n grid-column:1\/-1;\n}\n\n\/* =========================\n RESPONSIVE\n========================= *\/\n\n@media(max-width:1024px){\n \/* Tablet diubah menjadi horizontal swipe (seperti mobile) *\/\n .ti-blog-section-9821 .tb9821-grid{\n display:flex;\n grid-template-columns:none;\n gap:18px;\n overflow-x:auto;\n scroll-snap-type:x mandatory;\n -webkit-overflow-scrolling:touch;\n padding-bottom:12px;\n }\n\n .ti-blog-section-9821 .tb9821-card{\n flex:0 0 82%;\n scroll-snap-align:start;\n padding:14px;\n border-radius:26px;\n }\n\n \/* Sembunyikan scrollbar *\/\n .ti-blog-section-9821 .tb9821-grid::-webkit-scrollbar{\n height:0;\n }\n}\n\n@media(max-width:700px){\n\n .ti-blog-section-9821{\n padding:60px 20px;\n }\n\n .ti-blog-section-9821 .tb9821-image-wrap{\n height:150px;\n border-radius:18px;\n }\n\n .ti-blog-section-9821 .tb9821-date{\n top:14px;\n font-size:12px;\n padding:8px 14px;\n }\n\n .ti-blog-section-9821 .tb9821-body{\n padding:16px 4px 4px;\n }\n\n .ti-blog-section-9821 .tb9821-meta{\n gap:14px;\n margin-bottom:12px;\n }\n\n .ti-blog-section-9821 .tb9821-meta-item{\n font-size:12.5px;\n }\n\n .ti-blog-section-9821 .tb9821-card-title{\n font-size:15.5px;\n min-height:auto;\n margin-bottom:8px;\n }\n\n .ti-blog-section-9821 .tb9821-excerpt{\n font-size:12.5px;\n margin-bottom:14px;\n }\n\n .ti-blog-section-9821 .tb9821-button{\n padding:10px 20px;\n font-size:11.5px;\n letter-spacing:.8px;\n white-space:nowrap;\n }\n\n}\n\n<\/style>\n\n<div class=\"ti-blog-section-9821\">\n\n <div class=\"tb9821-head\">\n\n <div class=\"tb9821-label\">\n <span class=\"tb9821-label-icon\">\u25eb<\/span>\n News\n <\/div>\n\n <div class=\"tb9821-title\">\n Berita & <span>Artikel Terbaru<\/span>\n <\/div>\n\n <div class=\"tb9821-sub\">\n Informasi terbaru seputar teknologi, inovasi digital, dan kegiatan Program Studi Teknologi Informasi.\n <\/div>\n\n <\/div>\n\n <div class=\"tb9821-grid\" id=\"tb9821Grid\">\n\n <div class=\"tb9821-loading\">\n Memuat berita...\n <\/div>\n\n <\/div>\n\n<\/div>\n\n<script>\n(function(){\n\nconst grid = document.getElementById('tb9821Grid');\n\nfunction cleanText(str){\n return (str || '')\n .replace(\/<[^>]*>\/g,'')\n .replace(\/&\/g,'&')\n .replace(\/’\/g,\"\u2019\")\n .replace(\/–\/g,\"\u2013\")\n .replace(\/—\/g,\"\u2014\");\n}\n\nfunction createCard(post){\n\n const title = cleanText(post.judul || '');\n const link = post.link || '#';\n const image = post.gambar || '';\n const author = post.penulis || 'Admin';\n const date = post.tanggal || '-';\n\n let excerpt = cleanText(post.excerpt || '');\n\n const card = document.createElement('div');\n\n card.className = 'tb9821-card';\n\n card.innerHTML = `\n \n <div class=\"tb9821-image-wrap\">\n\n ${\n image\n ? `<img decoding=\"async\" class=\"tb9821-image\" src=\"${image}\" alt=\"\">`\n : `\n <div class=\"tb9821-placeholder\">\n <div class=\"tb9821-placeholder-icon\">\ud83d\uddbc<\/div>\n <\/div>\n `\n }\n\n <div class=\"tb9821-date\">\n <span class=\"tb9821-date-icon\">\ud83d\uddd3<\/span>\n ${date}\n <\/div>\n\n <\/div>\n\n <div class=\"tb9821-body\">\n\n <div class=\"tb9821-meta\">\n\n <div class=\"tb9821-meta-item\">\n <span class=\"tb9821-meta-icon\">\ud83d\udc64<\/span>\n By ${author}\n <\/div>\n\n <div class=\"tb9821-meta-item\">\n <span class=\"tb9821-meta-icon\">\ud83d\udcac<\/span>\n 0 Comments\n <\/div>\n\n <\/div>\n\n <div class=\"tb9821-card-title\">\n ${title}\n <\/div>\n\n ${\n excerpt\n ? `<div class=\"tb9821-excerpt\">${excerpt}<\/div>`\n : ''\n }\n\n <a class=\"tb9821-button\" href=\"${link}\">\n READ MORE\n <span class=\"tb9821-button-icon\">\u2192<\/span>\n <\/a>\n\n <\/div>\n\n `;\n\n return card;\n}\n\nasync function loadNews(){\n\n try{\n\n const fd = new FormData();\n\n fd.append('action','get_berita_ti');\n\n const response = await fetch('\/ti\/wp-admin\/admin-ajax.php',{\n method:'POST',\n body:fd\n });\n\n let data = await response.json();\n\n if(data.length && data[0].title){\n\n data = data.map(function(p){\n\n const media = (p._embedded && p._embedded['wp:featuredmedia']) || [];\n const author = (p._embedded && p._embedded['author']) || [];\n\n return{\n judul:p.title?.rendered || '',\n link:p.link || '#',\n tanggal:p.date\n ? new Date(p.date).toLocaleDateString('id-ID',{\n day:'numeric',\n month:'long',\n year:'numeric'\n })\n : '-',\n gambar:media[0]?.source_url || '',\n penulis:author[0]?.name || 'Admin',\n excerpt:p.excerpt?.rendered || ''\n };\n\n });\n\n }\n\n grid.innerHTML = '';\n\n data.slice(0,3).forEach(function(post){\n grid.appendChild(createCard(post));\n });\n\n }catch(error){\n\n grid.innerHTML = `\n <div class=\"tb9821-loading\">\n Gagal memuat berita.\n <\/div>\n `;\n\n console.log(error);\n\n }\n\n}\n\nloadNews();\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-de81aa8 e-con-full e-flex e-con e-parent\" data-id=\"de81aa8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf8e7c9 elementor-widget elementor-widget-html\" data-id=\"bf8e7c9\" 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-9df481c e-flex e-con-boxed e-con e-parent\" data-id=\"9df481c\" 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-8eb8a23 elementor-position-inline-start elementor-mobile-position-inline-start elementor-view-default elementor-widget elementor-widget-icon-box\" data-id=\"8eb8a23\" 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 : PROGRAM STUDI TEKNOLOGI INFORMASI ☰ PROGRAM STUDI TEKNOLOGI INFORMASI Beranda […]<\/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-1823","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>Beranda - 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\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beranda - Program Studi Teknologi Informasi\" \/>\n<meta property=\"og:description\" content=\"Top Bar – Follow Us & Search Follow Us : PROGRAM STUDI TEKNOLOGI INFORMASI ☰ PROGRAM STUDI TEKNOLOGI INFORMASI Beranda […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/\" \/>\n<meta property=\"og:site_name\" content=\"Program Studi Teknologi Informasi\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-16T13:09:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg\" \/>\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=\"25 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\\\/\",\"url\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\",\"name\":\"Beranda - Program Studi Teknologi Informasi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/05\\\/Logo_UIN_Salatiga.svg\",\"datePublished\":\"2026-07-29T05:05:05+00:00\",\"dateModified\":\"2026-09-16T13:09:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#primaryimage\",\"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},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/saintek.uinsalatiga.ac.id\\\/ti\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beranda\"}]},{\"@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":"Beranda - 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\/","og_locale":"en_US","og_type":"article","og_title":"Beranda - Program Studi Teknologi Informasi","og_description":"Top Bar – Follow Us & Search Follow Us : PROGRAM STUDI TEKNOLOGI INFORMASI ☰ PROGRAM STUDI TEKNOLOGI INFORMASI Beranda […]","og_url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","og_site_name":"Program Studi Teknologi Informasi","article_modified_time":"2026-09-16T13:09:49+00:00","og_image":[{"url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"25 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","url":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/","name":"Beranda - Program Studi Teknologi Informasi","isPartOf":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#website"},"primaryImageOfPage":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#primaryimage"},"image":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#primaryimage"},"thumbnailUrl":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-content\/uploads\/sites\/3\/2026\/05\/Logo_UIN_Salatiga.svg","datePublished":"2026-07-29T05:05:05+00:00","dateModified":"2026-09-16T13:09:49+00:00","breadcrumb":{"@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/saintek.uinsalatiga.ac.id\/ti\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#primaryimage","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},{"@type":"BreadcrumbList","@id":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/"},{"@type":"ListItem","position":2,"name":"Beranda"}]},{"@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\/1823","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=1823"}],"version-history":[{"count":157,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1823\/revisions"}],"predecessor-version":[{"id":2151,"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/pages\/1823\/revisions\/2151"}],"wp:attachment":[{"href":"https:\/\/saintek.uinsalatiga.ac.id\/ti\/wp-json\/wp\/v2\/media?parent=1823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}