Alur & Format Pengajuan Surat Mahasiswa<\/title><\/p>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n \/* === RESET & GLOBAL STYLES === *\/\n * {\n box-sizing: border-box;\n }\n body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n background: linear-gradient(135deg, #e0f2fe, #f1f5f9);\n color: #334155;\n padding-bottom: 50px;\n }<\/p>\n<p> \/* === CONTAINER STYLES === *\/\n .wrapper {\n max-width: 900px;\n margin: auto;\n padding: 40px 20px;\n }<\/p>\n<p> h1 {\n text-align: center;\n margin-bottom: 40px;\n color: #0f172a;\n font-size: 28px;\n }<\/p>\n<p> \/* === TIMELINE STYLES === *\/\n .timeline {\n position: relative;\n margin-left: 20px;\n border-left: 3px solid #3b82f6;\n padding-left: 20px;\n }\n .item {\n position: relative;\n margin-bottom: 30px;\n background: white;\n padding: 18px 20px;\n border-radius: 15px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.08);\n transition: transform 0.3s ease;\n }\n .item:hover {\n transform: translateY(-5px);\n }\n .item::before {\n content: '';\n position: absolute;\n left: -33px;\n top: 20px;\n width: 16px;\n height: 16px;\n background: #3b82f6;\n border-radius: 50%;\n }\n .icon {\n font-size: 22px;\n margin-right: 10px;\n }\n .text {\n font-size: 15px;\n line-height: 1.6;\n }\n .highlight {\n font-weight: 600;\n color: #1e3a8a;\n }<\/p>\n<p> \/* === BUTTON STYLES === *\/\n .actions {\n text-align: center;\n margin-top: 40px;\n margin-bottom: 60px;\n }\n .btn {\n display: inline-block;\n margin: 10px;\n padding: 12px 24px;\n border-radius: 10px;\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n transition: background 0.2s ease;\n }\n .primary {\n background: #3b82f6;\n color: white;\n }\n .primary:hover {\n background: #2563eb;\n }\n .wa {\n background: #22c55e;\n color: white;\n }\n .wa:hover {\n background: #16a34a;\n }<\/p>\n<p> \/* === GRID \/ FORMAT SURAT STYLES === *\/\n .section-header {\n text-align: center;\n padding: 20px 15px;\n background: white;\n border-radius: 15px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n font-size: 22px;\n font-weight: 600;\n color: #1e293b;\n margin-bottom: 30px;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n gap: 20px;\n }\n .card {\n background: white;\n border-radius: 18px;\n padding: 25px 15px;\n text-align: center;\n text-decoration: none;\n color: #334155;\n box-shadow: 0 6px 15px rgba(0,0,0,0.08);\n transition: all 0.25s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.12);\n color: #3b82f6;\n }\n .card .icon-doc {\n font-size: 40px;\n margin-bottom: 15px;\n }\n .card .title {\n font-size: 14px;\n font-weight: 500;\n line-height: 1.4;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"wrapper\">\n<h1>\ud83d\udcd1 Alur Pengajuan Surat Mahasiswa<\/h1>\n<div class=\"timeline\">\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\ud83c\udf10<\/span> Silakan mengakses <span class=\"highlight\">Website Fakultas Agama Islam (FAI UMPR)<\/span> untuk memulai pengajuan surat.<\/div>\n<\/p><\/div>\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\u2b07\ufe0f<\/span> Unduh format surat yang tersedia, kemudian isi dengan data diri dan keperluan secara lengkap dan benar.<\/div>\n<\/p><\/div>\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\ud83d\udcdd<\/span> Selanjutnya, ajukan surat melalui <span class=\"highlight\">Laman Pengajuan Judul<\/span> sesuai prosedur yang telah ditentukan.<\/div>\n<\/p><\/div>\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\ud83d\udcf1<\/span> Mohon melakukan konfirmasi kepada admin melalui WhatsApp di nomor <span class=\"highlight\">0813-4557-2078<\/span>.<\/div>\n<\/p><\/div>\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\ud83d\udce4<\/span> Surat akan dikirimkan dalam bentuk softfile. Apabila memerlukan hardfile, mahasiswa dipersilakan untuk mengambil langsung ke fakultas.<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"actions\">\n <a class=\"btn primary\" href=\"#\">\ud83c\udf10 Masuk Website<\/a><br \/>\n <a class=\"btn wa\" href=\"https:\/\/wa.me\/6281345572078\" target=\"_blank\" rel=\"noopener\">\ud83d\udcac Hubungi Admin<\/a>\n <\/div>\n<div class=\"section-header\">\n<p><!DOCTYPE html><br \/>\n<html lang=\"id\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n <title>Laman Pengajuan Surat Mahasiswa – Premium Edition<\/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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n \/* Warna Palette Sesuai Gambar (Soft & Clean) *\/\n --bg-top-bar: #cdeae1; \/* Hijau Mint khas Mockup *\/\n --bg-page: #f6f9f7; \/* Abu-abu kehijauan super soft untuk background *\/\n --bg-card: #ffffff; \/* Putih bersih untuk kartu *\/\n --text-main: #1e293b; \/* Slate dark untuk teks utama *\/\n --text-muted: #64748b; \/* Teks sekunder *\/<\/p>\n<p> \/* Warna Tombol Soft Pastel *\/\n --btn-blue-bg: #9ec9efff; \/* Biru pastel untuk unduh template *\/\n --btn-green-bg: #9be2aeff; \/* Hijau pastel untuk ajukan surat *\/\n --btn-text: #1c352d; \/* Teks gelap senada untuk tombol *\/<\/p>\n<p> \/* Efek Transisi & Bayangan Premium *\/\n --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);\n --shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 8px 15px -6px rgba(0, 0, 0, 0.05);\n --radius-lg: 16px;\n --radius-md: 8px;\n }<\/p>\n<p> * {\n box-sizing: border-box;\n transition: all 0.2s ease-in-out;\n }<\/p>\n<p> body {\n font-family: 'Plus Jakarta Sans', system-ui, sans-serif;\n background-color: var(--bg-page);\n color: var(--text-main);\n margin: 0;\n padding: 0;\n -webkit-font-smoothing: antialiased;\n }<\/p>\n<p> \/* --- HEADER & NAVIGATION --- *\/\n .top-bar {\n background-color: var(--bg-top-bar);\n padding: 18px 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid rgba(0,0,0,0.04);\n }<\/p>\n<p> .logo-area {\n display: flex;\n align-items: center;\n gap: 14px;\n }<\/p>\n<p> .logo-box {\n background: rgba(255, 255, 255, 0.7);\n padding: 8px;\n border-radius: var(--radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--shadow-sm);\n }<\/p>\n<p> .main-title {\n font-size: 1.35rem;\n font-weight: 700;\n color: #2c4a3f;\n margin: 0;\n letter-spacing: -0.3px;\n }<\/p>\n<p> .user-profile {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n font-size: 0.95rem;\n color: #2c4a3f;\n cursor: pointer;\n }<\/p>\n<p> \/* --- MAIN LAYOUT --- *\/\n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 35px 40px;\n }<\/p>\n<p> \/* Sub-Header & Search Bar *\/\n .action-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 35px;\n gap: 30px;\n }<\/p>\n<p> .instruction-text {\n color: var(--text-muted);\n font-size: 1.05rem;\n margin: 0;\n font-weight: 500;\n line-height: 1.5;\n }<\/p>\n<p> .search-box {\n display: flex;\n align-items: center;\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: var(--radius-md);\n padding: 10px 16px;\n width: 340px;\n box-shadow: var(--shadow-sm);\n }<\/p>\n<p> .search-box:focus-within {\n border-color: #a3cbd6;\n box-shadow: 0 0 0 3px rgba(163, 203, 214, 0.2);\n }<\/p>\n<p> .search-input {\n border: none;\n outline: none;\n font-family: inherit;\n font-size: 0.95rem;\n width: 100%;\n margin-left: 10px;\n color: var(--text-main);\n }<\/p>\n<p> \/* --- THE CARD GRID --- *\/\n .surat-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n }<\/p>\n<p> .surat-card {\n background-color: var(--bg-card);\n border-radius: var(--radius-lg);\n padding: 26px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: 170px;\n box-shadow: var(--shadow-md);\n border: 1px solid rgba(0,0,0,0.01);\n }<\/p>\n<p> .surat-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.08);\n }<\/p>\n<p> .card-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--text-main);\n margin: 0 0 24px 0;\n line-height: 1.4;\n letter-spacing: -0.2px;\n }<\/p>\n<p> \/* Tombol Aksi *\/\n .card-buttons {\n display: flex;\n gap: 10px;\n }<\/p>\n<p> .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 12px;\n font-size: 0.85rem;\n font-weight: 600;\n border-radius: var(--radius-md);\n text-decoration: none;\n color: var(--btn-text);\n flex: 1;\n text-align: center;\n }<\/p>\n<p> .btn-template {\n background-color: var(--btn-blue-bg);\n }<\/p>\n<p> .btn-template:hover {\n background-color: #8bbce7;\n }<\/p>\n<p> .btn-gform {\n background-color: var(--btn-green-bg);\n }<\/p>\n<p> .btn-gform:hover {\n background-color: #87d29b;\n }<\/p>\n<p> \/* State ketika hasil pencarian kosong *\/\n .no-results {\n grid-column: 1 \/ -1;\n text-align: center;\n padding: 40px;\n color: var(--text-muted);\n font-weight: 500;\n display: none;\n }<\/p>\n<p> \/* --- RESPONSIVE LAYOUT (MENYESUAIKAN SCREEN) --- *\/\n @media (max-width: 1200px) {\n .surat-grid { grid-template-columns: repeat(3, 1fr); }\n }<\/p>\n<p> @media (max-width: 900px) {\n .surat-grid { grid-template-columns: repeat(2, 1fr); }\n .action-bar { flex-direction: column; align-items: flex-start; }\n .search-box { width: 100%; }\n }<\/p>\n<p> @media (max-width: 600px) {\n .top-bar { padding: 15px 20px; flex-direction: column; gap: 10px; align-items: flex-start; }\n .container { padding: 20px; }\n .surat-grid { grid-template-columns: 1fr; }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"top-bar\">\n<div class=\"logo-area\">\n<div class=\"logo-box\">\n <svg width=\"28\" height=\"28\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#2c4a3f\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c0 2 2 3 6 3s6-1 6-3v-5\"\/><\/svg>\n <\/div>\n<h1 class=\"main-title\">LAYANAN PENGAJUAN SURAT<\/h1>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Izin Penelitian<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/1bRkk8yA7QZFie5EGVdTY-VkuG-4pDJS-\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/forms.gle\/sFwSBwUvX2Ap8h5s8\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Izin Observasi<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/10UzdRkXAmQj7CPg5Erv7IIREgoA6VGys\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/forms.gle\/h7Ca9kgzwB6UXnFh6\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Validator<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/1BzfleyRZ4RjYn0TWu2MEQlqBigLRnLkJ\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/forms.gle\/WufprLEbdKKGQn157\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Wawancara<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Narasumber<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Surat Tugas<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Peminjaman Ruangan<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Peminjaman Peralatan<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Kerja Sama<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Seminar\/Kegiatan<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Izin Kegiatan Mahasiswa<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Cuti Kuliah<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Aktif Kuliah<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/forms.gle\/qWRJbG3DKdNGrd5Z6\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Seminar Proposal<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/1ic8SPdadVm3YvoWQc0zYSwkgkPd7fXyb\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Sidang Skripsi<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/142IkDffE-bWkCnQ46Kt2iArwuxqvLczs\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"no-results\" id=\"noResults\">Surat yang Anda cari tidak ditemukan.<\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n const searchInput = document.getElementById('searchInput');\n const cards = document.querySelectorAll('.surat-card');\n const noResults = document.getElementById('noResults');<\/p>\n<p> searchInput.addEventListener('input', function(e) {\n const text = e.target.value.toLowerCase().trim();\n let hasData = false;<\/p>\n<p> cards.forEach(card => {\n const title = card.querySelector('.card-title').innerText.toLowerCase();\n if (title.includes(text)) {\n card.style.display = 'flex';\n hasData = true;\n } else {\n card.style.display = 'none';\n }\n });<\/p>\n<p> if (hasData) {\n noResults.style.display = 'none';\n } else {\n noResults.style.display = 'block';\n }\n });\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>","protected":false},"excerpt":{"rendered":"<p>Alur & Format Pengajuan Surat Mahasiswa \ud83d\udcd1 Alur Pengajuan Surat Mahasiswa \ud83c\udf10 Silakan mengakses Website Fakultas Agama Islam (FAI UMPR) untuk memulai pengajuan surat. \u2b07\ufe0f Unduh format surat yang tersedia, kemudian isi dengan data diri dan keperluan secara lengkap dan benar. \ud83d\udcdd Selanjutnya, ajukan surat melalui Laman Pengajuan Judul sesuai prosedur yang telah ditentukan. \ud83d\udcf1 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2566","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/pages\/2566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/comments?post=2566"}],"version-history":[{"count":5,"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/pages\/2566\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/pages\/2566\/revisions\/3332"}],"wp:attachment":[{"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/media?parent=2566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2566,"date":"2025-08-04T11:54:55","date_gmt":"2025-08-04T04:54:55","guid":{"rendered":"https:\/\/fai.umpr.ac.id\/?page_id=2566"},"modified":"2026-06-08T14:18:06","modified_gmt":"2026-06-08T07:18:06","slug":"pengajuansurat","status":"publish","type":"page","link":"https:\/\/fai.umpr.ac.id\/id\/pengajuansurat\/","title":{"rendered":"Pengajuan Surat"},"content":{"rendered":"

\n
\n
\n
\n
\n Alur & Format Pengajuan Surat Mahasiswa<\/title><\/p>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n \/* === RESET & GLOBAL STYLES === *\/\n * {\n box-sizing: border-box;\n }\n body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n background: linear-gradient(135deg, #e0f2fe, #f1f5f9);\n color: #334155;\n padding-bottom: 50px;\n }<\/p>\n<p> \/* === CONTAINER STYLES === *\/\n .wrapper {\n max-width: 900px;\n margin: auto;\n padding: 40px 20px;\n }<\/p>\n<p> h1 {\n text-align: center;\n margin-bottom: 40px;\n color: #0f172a;\n font-size: 28px;\n }<\/p>\n<p> \/* === TIMELINE STYLES === *\/\n .timeline {\n position: relative;\n margin-left: 20px;\n border-left: 3px solid #3b82f6;\n padding-left: 20px;\n }\n .item {\n position: relative;\n margin-bottom: 30px;\n background: white;\n padding: 18px 20px;\n border-radius: 15px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.08);\n transition: transform 0.3s ease;\n }\n .item:hover {\n transform: translateY(-5px);\n }\n .item::before {\n content: '';\n position: absolute;\n left: -33px;\n top: 20px;\n width: 16px;\n height: 16px;\n background: #3b82f6;\n border-radius: 50%;\n }\n .icon {\n font-size: 22px;\n margin-right: 10px;\n }\n .text {\n font-size: 15px;\n line-height: 1.6;\n }\n .highlight {\n font-weight: 600;\n color: #1e3a8a;\n }<\/p>\n<p> \/* === BUTTON STYLES === *\/\n .actions {\n text-align: center;\n margin-top: 40px;\n margin-bottom: 60px;\n }\n .btn {\n display: inline-block;\n margin: 10px;\n padding: 12px 24px;\n border-radius: 10px;\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n transition: background 0.2s ease;\n }\n .primary {\n background: #3b82f6;\n color: white;\n }\n .primary:hover {\n background: #2563eb;\n }\n .wa {\n background: #22c55e;\n color: white;\n }\n .wa:hover {\n background: #16a34a;\n }<\/p>\n<p> \/* === GRID \/ FORMAT SURAT STYLES === *\/\n .section-header {\n text-align: center;\n padding: 20px 15px;\n background: white;\n border-radius: 15px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n font-size: 22px;\n font-weight: 600;\n color: #1e293b;\n margin-bottom: 30px;\n }\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n gap: 20px;\n }\n .card {\n background: white;\n border-radius: 18px;\n padding: 25px 15px;\n text-align: center;\n text-decoration: none;\n color: #334155;\n box-shadow: 0 6px 15px rgba(0,0,0,0.08);\n transition: all 0.25s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.12);\n color: #3b82f6;\n }\n .card .icon-doc {\n font-size: 40px;\n margin-bottom: 15px;\n }\n .card .title {\n font-size: 14px;\n font-weight: 500;\n line-height: 1.4;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"wrapper\">\n<h1>\ud83d\udcd1 Alur Pengajuan Surat Mahasiswa<\/h1>\n<div class=\"timeline\">\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\ud83c\udf10<\/span> Silakan mengakses <span class=\"highlight\">Website Fakultas Agama Islam (FAI UMPR)<\/span> untuk memulai pengajuan surat.<\/div>\n<\/p><\/div>\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\u2b07\ufe0f<\/span> Unduh format surat yang tersedia, kemudian isi dengan data diri dan keperluan secara lengkap dan benar.<\/div>\n<\/p><\/div>\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\ud83d\udcdd<\/span> Selanjutnya, ajukan surat melalui <span class=\"highlight\">Laman Pengajuan Judul<\/span> sesuai prosedur yang telah ditentukan.<\/div>\n<\/p><\/div>\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\ud83d\udcf1<\/span> Mohon melakukan konfirmasi kepada admin melalui WhatsApp di nomor <span class=\"highlight\">0813-4557-2078<\/span>.<\/div>\n<\/p><\/div>\n<div class=\"item\">\n<div class=\"text\"><span class=\"icon\">\ud83d\udce4<\/span> Surat akan dikirimkan dalam bentuk softfile. Apabila memerlukan hardfile, mahasiswa dipersilakan untuk mengambil langsung ke fakultas.<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"actions\">\n <a class=\"btn primary\" href=\"#\">\ud83c\udf10 Masuk Website<\/a><br \/>\n <a class=\"btn wa\" href=\"https:\/\/wa.me\/6281345572078\" target=\"_blank\" rel=\"noopener\">\ud83d\udcac Hubungi Admin<\/a>\n <\/div>\n<div class=\"section-header\">\n<p><!DOCTYPE html><br \/>\n<html lang=\"id\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n <title>Laman Pengajuan Surat Mahasiswa – Premium Edition<\/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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n \/* Warna Palette Sesuai Gambar (Soft & Clean) *\/\n --bg-top-bar: #cdeae1; \/* Hijau Mint khas Mockup *\/\n --bg-page: #f6f9f7; \/* Abu-abu kehijauan super soft untuk background *\/\n --bg-card: #ffffff; \/* Putih bersih untuk kartu *\/\n --text-main: #1e293b; \/* Slate dark untuk teks utama *\/\n --text-muted: #64748b; \/* Teks sekunder *\/<\/p>\n<p> \/* Warna Tombol Soft Pastel *\/\n --btn-blue-bg: #9ec9efff; \/* Biru pastel untuk unduh template *\/\n --btn-green-bg: #9be2aeff; \/* Hijau pastel untuk ajukan surat *\/\n --btn-text: #1c352d; \/* Teks gelap senada untuk tombol *\/<\/p>\n<p> \/* Efek Transisi & Bayangan Premium *\/\n --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);\n --shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 8px 15px -6px rgba(0, 0, 0, 0.05);\n --radius-lg: 16px;\n --radius-md: 8px;\n }<\/p>\n<p> * {\n box-sizing: border-box;\n transition: all 0.2s ease-in-out;\n }<\/p>\n<p> body {\n font-family: 'Plus Jakarta Sans', system-ui, sans-serif;\n background-color: var(--bg-page);\n color: var(--text-main);\n margin: 0;\n padding: 0;\n -webkit-font-smoothing: antialiased;\n }<\/p>\n<p> \/* --- HEADER & NAVIGATION --- *\/\n .top-bar {\n background-color: var(--bg-top-bar);\n padding: 18px 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid rgba(0,0,0,0.04);\n }<\/p>\n<p> .logo-area {\n display: flex;\n align-items: center;\n gap: 14px;\n }<\/p>\n<p> .logo-box {\n background: rgba(255, 255, 255, 0.7);\n padding: 8px;\n border-radius: var(--radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--shadow-sm);\n }<\/p>\n<p> .main-title {\n font-size: 1.35rem;\n font-weight: 700;\n color: #2c4a3f;\n margin: 0;\n letter-spacing: -0.3px;\n }<\/p>\n<p> .user-profile {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n font-size: 0.95rem;\n color: #2c4a3f;\n cursor: pointer;\n }<\/p>\n<p> \/* --- MAIN LAYOUT --- *\/\n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 35px 40px;\n }<\/p>\n<p> \/* Sub-Header & Search Bar *\/\n .action-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 35px;\n gap: 30px;\n }<\/p>\n<p> .instruction-text {\n color: var(--text-muted);\n font-size: 1.05rem;\n margin: 0;\n font-weight: 500;\n line-height: 1.5;\n }<\/p>\n<p> .search-box {\n display: flex;\n align-items: center;\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: var(--radius-md);\n padding: 10px 16px;\n width: 340px;\n box-shadow: var(--shadow-sm);\n }<\/p>\n<p> .search-box:focus-within {\n border-color: #a3cbd6;\n box-shadow: 0 0 0 3px rgba(163, 203, 214, 0.2);\n }<\/p>\n<p> .search-input {\n border: none;\n outline: none;\n font-family: inherit;\n font-size: 0.95rem;\n width: 100%;\n margin-left: 10px;\n color: var(--text-main);\n }<\/p>\n<p> \/* --- THE CARD GRID --- *\/\n .surat-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n }<\/p>\n<p> .surat-card {\n background-color: var(--bg-card);\n border-radius: var(--radius-lg);\n padding: 26px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: 170px;\n box-shadow: var(--shadow-md);\n border: 1px solid rgba(0,0,0,0.01);\n }<\/p>\n<p> .surat-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.08);\n }<\/p>\n<p> .card-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: var(--text-main);\n margin: 0 0 24px 0;\n line-height: 1.4;\n letter-spacing: -0.2px;\n }<\/p>\n<p> \/* Tombol Aksi *\/\n .card-buttons {\n display: flex;\n gap: 10px;\n }<\/p>\n<p> .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 12px;\n font-size: 0.85rem;\n font-weight: 600;\n border-radius: var(--radius-md);\n text-decoration: none;\n color: var(--btn-text);\n flex: 1;\n text-align: center;\n }<\/p>\n<p> .btn-template {\n background-color: var(--btn-blue-bg);\n }<\/p>\n<p> .btn-template:hover {\n background-color: #8bbce7;\n }<\/p>\n<p> .btn-gform {\n background-color: var(--btn-green-bg);\n }<\/p>\n<p> .btn-gform:hover {\n background-color: #87d29b;\n }<\/p>\n<p> \/* State ketika hasil pencarian kosong *\/\n .no-results {\n grid-column: 1 \/ -1;\n text-align: center;\n padding: 40px;\n color: var(--text-muted);\n font-weight: 500;\n display: none;\n }<\/p>\n<p> \/* --- RESPONSIVE LAYOUT (MENYESUAIKAN SCREEN) --- *\/\n @media (max-width: 1200px) {\n .surat-grid { grid-template-columns: repeat(3, 1fr); }\n }<\/p>\n<p> @media (max-width: 900px) {\n .surat-grid { grid-template-columns: repeat(2, 1fr); }\n .action-bar { flex-direction: column; align-items: flex-start; }\n .search-box { width: 100%; }\n }<\/p>\n<p> @media (max-width: 600px) {\n .top-bar { padding: 15px 20px; flex-direction: column; gap: 10px; align-items: flex-start; }\n .container { padding: 20px; }\n .surat-grid { grid-template-columns: 1fr; }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"top-bar\">\n<div class=\"logo-area\">\n<div class=\"logo-box\">\n <svg width=\"28\" height=\"28\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#2c4a3f\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c0 2 2 3 6 3s6-1 6-3v-5\"\/><\/svg>\n <\/div>\n<h1 class=\"main-title\">LAYANAN PENGAJUAN SURAT<\/h1>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Izin Penelitian<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/1bRkk8yA7QZFie5EGVdTY-VkuG-4pDJS-\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/forms.gle\/sFwSBwUvX2Ap8h5s8\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Izin Observasi<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/10UzdRkXAmQj7CPg5Erv7IIREgoA6VGys\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/forms.gle\/h7Ca9kgzwB6UXnFh6\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Validator<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/1BzfleyRZ4RjYn0TWu2MEQlqBigLRnLkJ\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/forms.gle\/WufprLEbdKKGQn157\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Wawancara<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Narasumber<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Surat Tugas<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Peminjaman Ruangan<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Peminjaman Peralatan<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Kerja Sama<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Seminar\/Kegiatan<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Izin Kegiatan Mahasiswa<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Cuti Kuliah<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Aktif Kuliah<\/h3>\n<div class=\"card-buttons\">\n <a href=\"\/id\/Link Drive\/\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"https:\/\/forms.gle\/qWRJbG3DKdNGrd5Z6\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Seminar Proposal<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/1ic8SPdadVm3YvoWQc0zYSwkgkPd7fXyb\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"surat-card\">\n<h3 class=\"card-title\">Surat Permohonan Sidang Skripsi<\/h3>\n<div class=\"card-buttons\">\n <a href=\"https:\/\/docs.google.com\/document\/d\/142IkDffE-bWkCnQ46Kt2iArwuxqvLczs\/edit?usp=drive_link\" target=\"_blank\" class=\"btn btn-template\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Unduh Template<br \/>\n <\/a><br \/>\n <a href=\"\/id\/Link GForm Di Sini\/\" target=\"_blank\" class=\"btn btn-gform\"><br \/>\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg> Ajukan Surat<br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div class=\"no-results\" id=\"noResults\">Surat yang Anda cari tidak ditemukan.<\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n const searchInput = document.getElementById('searchInput');\n const cards = document.querySelectorAll('.surat-card');\n const noResults = document.getElementById('noResults');<\/p>\n<p> searchInput.addEventListener('input', function(e) {\n const text = e.target.value.toLowerCase().trim();\n let hasData = false;<\/p>\n<p> cards.forEach(card => {\n const title = card.querySelector('.card-title').innerText.toLowerCase();\n if (title.includes(text)) {\n card.style.display = 'flex';\n hasData = true;\n } else {\n card.style.display = 'none';\n }\n });<\/p>\n<p> if (hasData) {\n noResults.style.display = 'none';\n } else {\n noResults.style.display = 'block';\n }\n });\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>","protected":false},"excerpt":{"rendered":"<p>Alur & Format Pengajuan Surat Mahasiswa \ud83d\udcd1 Alur Pengajuan Surat Mahasiswa \ud83c\udf10 Silakan mengakses Website Fakultas Agama Islam (FAI UMPR) untuk memulai pengajuan surat. \u2b07\ufe0f Unduh format surat yang tersedia, kemudian isi dengan data diri dan keperluan secara lengkap dan benar. \ud83d\udcdd Selanjutnya, ajukan surat melalui Laman Pengajuan Judul sesuai prosedur yang telah ditentukan. \ud83d\udcf1 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2566","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/pages\/2566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/comments?post=2566"}],"version-history":[{"count":5,"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/pages\/2566\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/pages\/2566\/revisions\/3332"}],"wp:attachment":[{"href":"https:\/\/fai.umpr.ac.id\/id\/wp-json\/wp\/v2\/media?parent=2566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}