{"id":7,"date":"2026-07-15T00:52:50","date_gmt":"2026-07-15T00:52:50","guid":{"rendered":"https:\/\/ppdb.hidayatunnajah.com\/?page_id=7"},"modified":"2026-07-15T01:29:15","modified_gmt":"2026-07-15T01:29:15","slug":"ppdb","status":"publish","type":"page","link":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/","title":{"rendered":"PPDB"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Pratinjau Halaman Web Dinamis - Langkah 2 (Keterangan dan Tautan Teks)<\/title>\r\n <!-- Memuat font Google Lexend yang modern dan premium -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Lexend', sans-serif;\r\n background-color: #f9fafb; \/* Abu-abu terang untuk latar belakang *\/\r\n color: #1e293b;\r\n }\r\n\r\n \/* ==========================================\r\n LANGKAH 1: CSS HEADER (LOGO & TEKS DI TENGAH ATAS SECARA PRESISI)\r\n ========================================== *\/\r\n .custom-header-container {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center; \/* Memastikan konten berada di tengah secara horizontal *\/\r\n align-items: center; \/* Memastikan konten sejajar di tengah secara vertikal *\/\r\n padding: 20px 0; \/* Spacing vertikal yang ideal di bagian atas *\/\r\n background-color: #ffffff; \r\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03); \r\n border-bottom: 1px solid #eaeef2;\r\n position: relative;\r\n z-index: 100; \/* Memastikan selalu berada di lapisan paling atas *\/\r\n }\r\n\r\n .header-logo-wrapper {\r\n display: flex;\r\n flex-direction: column; \r\n align-items: center; \/* Menyelaraskan logo dan teks sejajar di tengah *\/\r\n justify-content: center;\r\n gap: 12px; \r\n text-decoration: none; \r\n cursor: pointer;\r\n width: 100%;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n text-align: center; \/* Menyelaraskan teks paragraf di tengah *\/\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .header-logo-wrapper:hover {\r\n transform: translateY(-1px); \r\n }\r\n\r\n .header-logo-img {\r\n height: 3cm; \/* Ukuran tinggi presisi 3 cm *\/\r\n width: 3cm; \/* Ukuran lebar presisi 3 cm *\/\r\n object-fit: contain; \/* Menjaga proporsi logo asli agar tidak terpotong *\/\r\n background-color: transparent; \/* Latar belakang transparan agar menyatu dengan header *\/\r\n border: none; \r\n box-shadow: none; \r\n box-sizing: border-box;\r\n display: block;\r\n margin: 0 auto; \/* Menjamin posisi gambar tepat di tengah *\/\r\n }\r\n\r\n .header-logo-text {\r\n font-family: 'Lexend', sans-serif;\r\n font-size: 14px; \/* Tetap konsisten 14px *\/\r\n font-weight: 800; \r\n color: #1e293b; \r\n letter-spacing: -0.3px; \r\n text-align: center; \/* Memastikan nama web berpusat di tengah *\/\r\n margin: 0;\r\n padding: 0;\r\n line-height: 1.25; \r\n white-space: pre-wrap; \r\n word-break: break-word; \r\n }\r\n\r\n \/* ==========================================\r\n LANGKAH 2: CSS BAGIAN JENJANG (FONT UKURAN 12PX & MENDUKUNG TEKS PANJANG)\r\n ========================================== *\/\r\n .custom-content-section {\r\n max-width: 680px; \r\n margin: 24px auto; \r\n padding: 0 16px;\r\n }\r\n\r\n .section-title-wrapper {\r\n text-align: center;\r\n margin-bottom: 20px; \r\n }\r\n\r\n .section-title {\r\n font-size: 12px; \/* Tetap konsisten 12px *\/\r\n font-weight: 800;\r\n color: #0f172a;\r\n margin: 0 0 4px 0;\r\n letter-spacing: -0.2px;\r\n text-transform: uppercase; \r\n }\r\n\r\n .section-subtitle {\r\n font-size: 12px; \/* Tetap konsisten 12px *\/\r\n color: #64748b;\r\n max-width: 500px;\r\n margin: 0 auto;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Wadah Dropdown *\/\r\n .dropdown-container {\r\n max-width: 400px;\r\n margin: 0 auto 20px auto; \r\n position: relative;\r\n }\r\n\r\n .dropdown-label {\r\n display: block;\r\n font-size: 12px; \/* Tetap konsisten 12px *\/\r\n font-weight: 700;\r\n color: #475569;\r\n margin-bottom: 6px;\r\n text-align: left;\r\n }\r\n\r\n \/* Pengaturan Dropdown Select *\/\r\n .custom-select {\r\n width: 100%;\r\n padding: 10px 14px; \r\n font-family: 'Lexend', sans-serif;\r\n font-size: 12px; \/* Tetap konsisten 12px *\/\r\n font-weight: 600;\r\n color: #1e293b;\r\n background-color: #ffffff;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n outline: none;\r\n transition: all 0.2s ease;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n \/* Ikon panah dropdown berwarna hijau (#10b981) *\/\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-position: right 14px center;\r\n background-size: 12px;\r\n padding-right: 36px; \r\n }\r\n\r\n .custom-select:focus {\r\n border-color: #10b981; \r\n box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\r\n }\r\n\r\n .custom-select:hover {\r\n border-color: #cbd5e1;\r\n }\r\n\r\n \/* Pengaturan Kartu Detail Utama *\/\r\n .detail-card {\r\n background-color: #ffffff;\r\n border-radius: 14px; \r\n padding: 24px; \r\n box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);\r\n border: 1px solid #f1f5f9;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px; \r\n position: relative;\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateY(10px);\r\n transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .detail-card.show {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .detail-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px; \r\n background: linear-gradient(90deg, #10b981, #34d399); \/* Gradasi hijau elegan di bagian atas kartu *\/\r\n }\r\n\r\n .detail-title {\r\n font-size: 12px; \/* Tetap konsisten 12px *\/\r\n font-weight: 800;\r\n color: #0f172a;\r\n margin: 0 0 4px 0;\r\n line-height: 1.3;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* Blok untuk setiap keterangan dan tautan *\/\r\n .sub-item-block {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px; \r\n }\r\n\r\n .detail-desc {\r\n font-size: 12px; \/* Tetap konsisten 12px *\/\r\n color: #475569;\r\n line-height: 1.6;\r\n margin: 0;\r\n white-space: pre-wrap; \r\n cursor: pointer;\r\n padding: 12px 40px 12px 14px; \r\n background-color: #f8fafc;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 10px;\r\n transition: all 0.2s ease;\r\n position: relative;\r\n user-select: text; \/* Memudahkan seleksi teks jika diperlukan *\/\r\n \/* Pencegahan luapan teks panjang *\/\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n overflow-wrap: break-word;\r\n }\r\n\r\n \/* Gaya tautan di dalam teks keterangan agar mutlak menerima klik *\/\r\n .detail-desc a {\r\n color: #10b981; \r\n text-decoration: underline;\r\n font-weight: 600;\r\n word-break: break-all;\r\n pointer-events: auto !important; \/* Memastikan interaksi klik selalu aktif *\/\r\n position: relative;\r\n z-index: 5;\r\n }\r\n\r\n .detail-desc a:hover {\r\n color: #059669; \r\n }\r\n\r\n \/* Efek hover pada teks keterangan *\/\r\n .detail-desc:hover {\r\n background-color: #f1f5f9;\r\n border-color: #cbd5e1;\r\n color: #0f172a;\r\n }\r\n\r\n \/* Ikon panah ke bawah di sebelah kanan keterangan *\/\r\n .detail-desc::after {\r\n content: '';\r\n position: absolute;\r\n right: 14px;\r\n top: 50%;\r\n width: 14px;\r\n height: 14px;\r\n transform: translateY(-50%) rotate(0deg);\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n \/* Tampilan saat keterangan aktif setelah diklik *\/\r\n .detail-desc.active {\r\n border-color: #10b981;\r\n background-color: #ecfdf5; \r\n color: #047857; \r\n }\r\n\r\n .detail-desc.active::after {\r\n transform: translateY(-50%) rotate(180deg);\r\n \/* Ikon panah ke atas berwarna hijau *\/\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n .link-reveal-container {\r\n max-height: 0;\r\n overflow: hidden;\r\n opacity: 0;\r\n transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.25s ease;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* Batas tinggi maks dinamis agar teks panjang & video tidak terpotong *\/\r\n .link-reveal-container.active {\r\n max-height: 600px; \r\n opacity: 1;\r\n margin-top: 8px;\r\n }\r\n\r\n \/* ==========================================\r\n GAYA BANNER FORMULIR (PREMIUM & CALL-TO-ACTION - RAMPING TANPA URL TEXT)\r\n ========================================== *\/\r\n .form-banner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);\r\n border: 1.5px solid #bbf7d0;\r\n border-radius: 12px;\r\n padding: 14px 16px;\r\n gap: 16px;\r\n transition: all 0.25s ease;\r\n box-sizing: border-box;\r\n width: 100%;\r\n }\r\n\r\n .form-banner:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 16px rgba(16, 185, 129, 0.1);\r\n border-color: #86efac;\r\n }\r\n\r\n .form-banner-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n flex: 1;\r\n min-width: 0; \r\n }\r\n\r\n .form-banner-icon {\r\n background-color: #10b981;\r\n color: #ffffff;\r\n padding: 8px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);\r\n }\r\n\r\n .form-banner-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n .form-banner-details {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n min-width: 0;\r\n }\r\n\r\n .form-banner-tag {\r\n font-size: 9px;\r\n font-weight: 800;\r\n color: #047857;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n }\r\n\r\n .form-banner-title {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: #14532d;\r\n margin: 0;\r\n line-height: 1.3;\r\n }\r\n\r\n .form-banner-btn {\r\n background-color: #10b981;\r\n color: #ffffff !important;\r\n text-decoration: none !important;\r\n font-size: 11px;\r\n font-weight: 700;\r\n padding: 8px 14px;\r\n border-radius: 8px;\r\n white-space: nowrap;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: all 0.2s ease;\r\n box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);\r\n flex-shrink: 0;\r\n }\r\n\r\n .form-banner-btn:hover {\r\n background-color: #059669;\r\n transform: scale(1.03);\r\n box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);\r\n }\r\n\r\n \/* ==========================================\r\n GAYA BANNER WHATSAPP KHUSUS (HIJAU KHAS WHATSAPP & IKON RESMI)\r\n ========================================== *\/\r\n .whatsapp-banner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: linear-gradient(135deg, #e8faf0 0%, #d1f7e1 100%);\r\n border: 1.5px solid #a7f3d0;\r\n border-radius: 12px;\r\n padding: 14px 16px;\r\n gap: 16px;\r\n transition: all 0.25s ease;\r\n box-sizing: border-box;\r\n width: 100%;\r\n }\r\n\r\n .whatsapp-banner:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 16px rgba(37, 211, 102, 0.15);\r\n border-color: #6ee7b7;\r\n }\r\n\r\n .whatsapp-banner-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .whatsapp-banner-icon {\r\n background-color: #25D366; \/* Warna Hijau Resmi WhatsApp *\/\r\n color: #ffffff;\r\n padding: 8px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);\r\n }\r\n\r\n .whatsapp-banner-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: #ffffff;\r\n }\r\n\r\n .whatsapp-banner-details {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n min-width: 0;\r\n }\r\n\r\n .whatsapp-banner-tag {\r\n font-size: 9px;\r\n font-weight: 800;\r\n color: #047857;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n }\r\n\r\n .whatsapp-banner-title {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: #064e3b;\r\n margin: 0;\r\n line-height: 1.3;\r\n }\r\n\r\n .whatsapp-banner-btn {\r\n background-color: #25D366; \/* Tombol Hijau WhatsApp *\/\r\n color: #ffffff !important;\r\n text-decoration: none !important;\r\n font-size: 11px;\r\n font-weight: 700;\r\n padding: 8px 14px;\r\n border-radius: 8px;\r\n white-space: nowrap;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: all 0.2s ease;\r\n box-shadow: 0 2px 4px rgba(37, 211, 102, 0.2);\r\n flex-shrink: 0;\r\n }\r\n\r\n .whatsapp-banner-btn:hover {\r\n background-color: #128C7E; \/* Hijau WhatsApp Lebih Tua *\/\r\n transform: scale(1.03);\r\n box-shadow: 0 4px 8px rgba(18, 140, 126, 0.3);\r\n }\r\n\r\n \/* ==========================================\r\n GAYA WADAH PEMUTAR VIDEO EMBED RESPONSIF (16:9 ASPECT RATIO)\r\n ========================================== *\/\r\n .video-banner-container {\r\n width: 100%;\r\n background-color: #ffffff;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 12px;\r\n padding: 12px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .video-wrapper {\r\n position: relative;\r\n width: 100%;\r\n padding-bottom: 56.25%; \/* Rasio Aspek Video 16:9 *\/\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 8px;\r\n background-color: #000000;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .video-wrapper iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n }\r\n\r\n \/* ==========================================\r\n BARU: GAYA WADAH PETA EMBED RESPONSIF (GOOGLE MAPS)\r\n ========================================== *\/\r\n .map-banner-container {\r\n width: 100%;\r\n background-color: #ffffff;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 12px;\r\n padding: 12px;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .map-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 320px; \/* Tinggi peta yang ideal untuk keterbacaan yang baik *\/\r\n overflow: hidden;\r\n border-radius: 8px;\r\n background-color: #f1f5f9;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .map-wrapper iframe {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n }\r\n\r\n \/* Pengaturan Gaya Informasi Teks Biasa (Bukan URL) *\/\r\n .detail-plain-text {\r\n display: inline-flex;\r\n align-items: center;\r\n color: #475569; \r\n font-size: 12px; \/* Tetap konsisten 12px *\/\r\n font-weight: 600;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n overflow-wrap: break-word;\r\n padding: 8px 12px;\r\n background-color: #f1f5f9;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 8px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* Pesan Status Loading dan Error *\/\r\n .status-message {\r\n text-align: center;\r\n padding: 28px;\r\n background-color: #ffffff;\r\n border-radius: 12px;\r\n border: 1px dashed #cbd5e1;\r\n color: #64748b;\r\n font-size: 12px; \/* Tetap konsisten 12px *\/\r\n }\r\n\r\n \/* Responsif untuk HP \/ Perangkat Seluler *\/\r\n @media (max-width: 768px) {\r\n .custom-header-container {\r\n padding: 16px 0;\r\n }\r\n .header-logo-wrapper {\r\n gap: 6px;\r\n }\r\n .header-logo-img {\r\n height: 2.5cm; \/* Sedikit disesuaikan di mobile agar tetap responsif *\/\r\n width: 2.5cm;\r\n }\r\n .header-logo-text {\r\n font-size: 14px; \/* Tetap konsisten 14px *\/\r\n }\r\n .custom-content-section {\r\n margin: 16px auto;\r\n }\r\n .section-title {\r\n font-size: 12px; \r\n }\r\n .detail-card {\r\n padding: 18px;\r\n border-radius: 12px;\r\n }\r\n .detail-desc {\r\n padding: 10px 36px 10px 12px;\r\n font-size: 12px; \r\n }\r\n .form-banner, .whatsapp-banner {\r\n flex-direction: column;\r\n align-items: stretch;\r\n padding: 12px;\r\n gap: 12px;\r\n }\r\n .form-banner-btn, .whatsapp-banner-btn {\r\n width: 100%;\r\n justify-content: center;\r\n padding: 10px;\r\n font-size: 12px;\r\n }\r\n .video-banner-container, .map-banner-container {\r\n padding: 8px;\r\n }\r\n .map-wrapper {\r\n height: 240px; \/* Ketinggian peta sedikit dikurangi pada mobile agar pas di layar *\/\r\n }\r\n .link-reveal-container.active {\r\n max-height: 800px; \r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- =======================================================================\r\n LANGKAH 1: HTML HEADER\r\n ======================================================================= -->\r\n <div class=\"custom-header-container\">\r\n <div class=\"header-logo-wrapper\">\r\n <img decoding=\"async\" id=\"dynamic-logo\" src=\"https:\/\/placehold.co\/120x120\/f3f4f6\/9ca3af?text=Logo\" alt=\"Logo Website\" class=\"header-logo-img\">\r\n <span id=\"dynamic-text\" class=\"header-logo-text\">Sedang memuat nama website...<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <!-- =======================================================================\r\n LANGKAH 2: HTML BAGIAN KONTEN JENJANG (KLIK KETERANGAN UNTUK TAMPILKAN KONTEN)\r\n ======================================================================= -->\r\n <section class=\"custom-content-section\">\r\n <div class=\"section-title-wrapper\">\r\n <h2 class=\"section-title\">Pilihan Jenjang Pendidikan<\/h2>\r\n <p class=\"section-subtitle\">Silakan pilih jenjang pendidikan di bawah ini untuk melihat detail program dan informasi pendaftaran selanjutnya.<\/p>\r\n <\/div>\r\n\r\n <!-- Wadah Dropdown -->\r\n <div class=\"dropdown-container\">\r\n <label for=\"jenjang-select\" class=\"dropdown-label\">Pilihan Jenjang Pendidikan<\/label>\r\n <select id=\"jenjang-select\" class=\"custom-select\">\r\n <option value=\"\">-- Sedang memuat daftar... --<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <!-- Wadah Kartu Detail Utama -->\r\n <div id=\"detail-card-container\">\r\n <div class=\"status-message\" id=\"jenjang-status\">\r\n Menunggu pilihan jenjang...\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n <!-- =======================================================================\r\n JAVASCRIPT INTEGRASI DATA (MENGHUBUNGKAN GOOGLE SHEETS KE WEBSITE)\r\n ====================================================================== -->\r\n <script>\r\n const headerCsvUrl = \"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vQZNaSg4XTFNRFCASraz2FoP7XZ2ia1P2etkBCQ_GtyGOes-sivIV51oO1nBlYK231SCUbGbl9LA5KV\/pub?gid=0&single=true&output=csv\";\r\n const jenjangCsvUrl = \"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vQZNaSg4XTFNRFCASraz2FoP7XZ2ia1P2etkBCQ_GtyGOes-sivIV51oO1nBlYK231SCUbGbl9LA5KV\/pub?gid=1826651814&single=true&output=csv\";\r\n\r\n \/\/ Wadah menyimpan data jenjang unik setelah digabungkan\r\n let listJenjangData = [];\r\n\r\n \/\/ --- DETEKSI DAN UBAH RAW URL DI DALAM TEKS MENJADI LINK AKTIF ---\r\n function linkify(text) {\r\n if (!text) return \"\";\r\n const urlRegex = \/(\\b(https?|ftp):\\\/\\\/[-A-Z0-9+&@#\\\/%?=~_|!:,.;]*[-A-Z0-9+&@#%=~_|])\/ig;\r\n return text.replace(urlRegex, function(url) {\r\n \/\/ Memberikan kelas inline-link agar dapat ditargetkan dengan mudah di event listener\r\n return `<a href=\"${url}\" target=\"_blank\" class=\"inline-link\">${url}<\/a>`;\r\n });\r\n }\r\n\r\n \/\/ --- PEMBERSIH SPASI UNICODE KHUSUS (U+2002, U+200B, DLL) ---\r\n function sanitizeText(text) {\r\n if (!text) return \"\";\r\n \/\/ Mengubah spasi khusus seperti En Space (U+2002), Zero-width Space (U+200B), dsb menjadi spasi standar\r\n return text.replace(\/[\\u2000-\\u200F\\u2020-\\u202F\\u205F\\u3000\\uFEFF]\/g, ' ');\r\n }\r\n\r\n \/\/ --- PARSER CSV STANDAR (MENDUKUNG MULTI-BARIS DAN TANDA KUTIP) ---\r\n function parseFullCSV(text) {\r\n let lines = [];\r\n let row = [\"\"];\r\n let inQuotes = false;\r\n \r\n for (let i = 0; i < text.length; i++) {\r\n let char = text[i];\r\n let nextChar = text[i+1];\r\n \r\n if (char === '\"') {\r\n if (inQuotes && nextChar === '\"') {\r\n row[row.length - 1] += '\"'; \r\n i++;\r\n } else {\r\n inQuotes = !inQuotes; \r\n }\r\n } else if (char === ',' && !inQuotes) {\r\n row.push(''); \r\n } else if ((char === '\\r' || char === '\\n') && !inQuotes) {\r\n if (char === '\\r' && nextChar === '\\n') {\r\n i++;\r\n }\r\n lines.push(row);\r\n row = [\"\"]; \r\n } else {\r\n row[row.length - 1] += char; \r\n }\r\n }\r\n if (row.length > 1 || row[0] !== '') {\r\n lines.push(row);\r\n }\r\n return lines;\r\n }\r\n\r\n \/\/ --- CONVERTER LINK GOOGLE DRIVE ---\r\n function convertToDirectDriveLink(url) {\r\n if (!url) return url;\r\n const match = url.match(\/\\\/d\\\/([a-zA-Z0-9_-]+)\/) || url.match(\/id=([a-zA-Z0-9_-]+)\/);\r\n if (match && match[1]) {\r\n return `https:\/\/drive.google.com\/thumbnail?id=${match[1]}&sz=800`;\r\n }\r\n return url; \r\n }\r\n\r\n \/\/ ==========================================\r\n \/\/ PROSES 1: AMBIL DATA HEADER (LANGKAH 1)\r\n \/\/ ==========================================\r\n fetch(headerCsvUrl)\r\n .then(response => response.text())\r\n .then(data => {\r\n const parsedData = parseFullCSV(data);\r\n if (parsedData.length > 1) {\r\n const headers = parsedData[0];\r\n const values = parsedData[1];\r\n \r\n let logoUrl = '';\r\n let namaWeb = '';\r\n \r\n values.forEach((val, idx) => {\r\n if (val.startsWith('http:\/\/') || val.startsWith('https:\/\/')) {\r\n logoUrl = val;\r\n } else if (val !== '') {\r\n const colHeader = headers[idx] ? headers[idx].toLowerCase() : '';\r\n if (!namaWeb || colHeader.includes('nama') || colHeader.includes('name') || colHeader.includes('title')) {\r\n namaWeb = val;\r\n }\r\n }\r\n });\r\n\r\n if (!namaWeb) {\r\n for (let val of values) {\r\n if (val && !val.startsWith('http')) {\r\n namaWeb = val;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n logoUrl = convertToDirectDriveLink(logoUrl);\r\n const logoImg = document.getElementById('dynamic-logo');\r\n const textSpan = document.getElementById('dynamic-text');\r\n\r\n logoImg.onerror = function() {\r\n this.src = \"https:\/\/placehold.co\/120x120\/fee2e2\/ef4444?text=Akses+Dibatasi\";\r\n textSpan.innerHTML = namaWeb + \"<br><span style='font-size:10px; color:#ef4444; font-weight:normal; display:block; margin-top:4px;'>Ubah hak akses file logo di Google Drive Anda menjadi 'Siapa saja yang memiliki link' (Publik)<\/span>\";\r\n };\r\n\r\n if (logoUrl) {\r\n logoImg.src = logoUrl;\r\n logoImg.style.display = 'block';\r\n } else {\r\n logoImg.style.display = 'none'; \r\n }\r\n \r\n if (namaWeb) {\r\n textSpan.textContent = namaWeb;\r\n }\r\n }\r\n })\r\n .catch(err => console.error(\"Gagal memuat header:\", err));\r\n\r\n\r\n \/\/ ==========================================\r\n \/\/ PROSES 2: AMBIL DATA DAN GABUNGKAN JENJANG (LANGKAH 2)\r\n \/\/ ==========================================\r\n fetch(jenjangCsvUrl)\r\n .then(response => response.text())\r\n .then(data => {\r\n const parsedData = parseFullCSV(data);\r\n const selectElement = document.getElementById('jenjang-select');\r\n \r\n if (parsedData.length > 1) {\r\n const headers = parsedData[0].map(h => h.trim().toLowerCase());\r\n \r\n const jenjangIdx = headers.findIndex(h => h.includes('jenjang') || h.includes('level') || h.includes('kelas'));\r\n const keteranganIdx = headers.findIndex(h => h.includes('keterangan') || h.includes('deskripsi') || h.includes('desc'));\r\n const linkIdx = headers.findIndex(h => h.includes('link') || h.includes('url') || h.includes('tautan'));\r\n\r\n const rawList = [];\r\n for (let i = 1; i < parsedData.length; i++) {\r\n const row = parsedData[i];\r\n if (row.length < 2 || (jenjangIdx !== -1 && !row[jenjangIdx])) continue;\r\n\r\n const jenjang = jenjangIdx !== -1 ? row[jenjangIdx].trim() : `Jenjang Ke-${i}`;\r\n const keterangan = keteranganIdx !== -1 ? row[keteranganIdx].trim() : '';\r\n const link = linkIdx !== -1 ? row[linkIdx].trim() : '';\r\n\r\n \/\/ Lakukan sanitasi data langsung sejak awal dibaca dari CSV\r\n const sanitizedKeterangan = sanitizeText(keterangan);\r\n const sanitizedLink = sanitizeText(link);\r\n\r\n rawList.push({ \r\n jenjang: sanitizeText(jenjang), \r\n keterangan: sanitizedKeterangan, \r\n link: sanitizedLink \r\n });\r\n }\r\n\r\n \/\/ --- LOGIKA GROUPING ---\r\n const groupedData = {};\r\n rawList.forEach(item => {\r\n const key = item.jenjang.toLowerCase();\r\n if (!groupedData[key]) {\r\n groupedData[key] = {\r\n namaJenjang: item.jenjang,\r\n subItems: [] \r\n };\r\n }\r\n \r\n const isDuplicate = groupedData[key].subItems.some(sub => sub.keterangan === item.keterangan && sub.link === item.link);\r\n if (!isDuplicate) {\r\n groupedData[key].subItems.push({\r\n keterangan: item.keterangan,\r\n link: item.link\r\n });\r\n }\r\n });\r\n\r\n listJenjangData = Object.keys(groupedData).map((key, index) => {\r\n const group = groupedData[key];\r\n return {\r\n id: index,\r\n jenjang: group.namaJenjang,\r\n subItems: group.subItems\r\n };\r\n });\r\n\r\n selectElement.innerHTML = '';\r\n\r\n if (listJenjangData.length > 0) {\r\n const placeholderOpt = document.createElement('option');\r\n placeholderOpt.value = \"\";\r\n placeholderOpt.innerText = \"Silakan Pilih Jenjang...\";\r\n selectElement.appendChild(placeholderOpt);\r\n\r\n listJenjangData.forEach(item => {\r\n const option = document.createElement('option');\r\n option.value = item.id;\r\n option.innerText = item.jenjang;\r\n selectElement.appendChild(option);\r\n });\r\n\r\n document.getElementById('detail-card-container').innerHTML = `\r\n <div class=\"status-message\">\r\n <svg style=\"width: 32px; height: 32px; margin: 0 auto 8px auto; color: #10b981; display: block;\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122\"><\/path>\r\n <\/svg>\r\n Silakan pilih salah satu jenjang pendidikan di atas untuk melihat detail lengkap. (Klik teks keterangan untuk melihat detail pendaftaran)\r\n <\/div>\r\n `;\r\n\r\n selectElement.addEventListener('change', (e) => {\r\n const selectedId = e.target.value;\r\n updateDetailCard(selectedId);\r\n });\r\n\r\n } else {\r\n selectElement.innerHTML = '<option value=\"\">Data kosong di dalam CSV<\/option>';\r\n }\r\n } else {\r\n selectElement.innerHTML = '<option value=\"\">Format CSV tidak valid<\/option>';\r\n }\r\n })\r\n .catch(error => {\r\n console.error(\"Gagal memuat data jenjang:\", error);\r\n document.getElementById('detail-card-container').innerHTML = `\r\n <div class=\"status-message\" style=\"color: #ef4444; border-color: #fecaca;\">\r\n Gagal memuat data dari spreadsheet. Pastikan tautan CSV telah dipublikasikan dengan benar.\r\n <\/div>\r\n `;\r\n });\r\n\r\n \/\/ --- FUNGSI MERENDER KARTU DETAIL BARU ---\r\n function updateDetailCard(id) {\r\n const container = document.getElementById('detail-card-container');\r\n \r\n if (id === \"\") {\r\n container.innerHTML = `\r\n <div class=\"status-message\">\r\n Silakan pilih salah satu jenjang pendidikan di atas untuk melihat detail lengkap.\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n const item = listJenjangData.find(d => d.id == id);\r\n \r\n if (item) {\r\n let subItemsHtml = '';\r\n \r\n item.subItems.forEach((sub, idx) => {\r\n let revealBlockHtml = '';\r\n if (sub.link && sub.link !== '' && sub.link !== '#') {\r\n \/\/ Deteksi tipe konten di kolom Link\r\n const isIframe = sub.link.trim().toLowerCase().startsWith('<iframe') || sub.link.trim().toLowerCase().includes('<iframe');\r\n const isUrl = sub.link.startsWith('http:\/\/') || sub.link.startsWith('https:\/\/');\r\n\r\n if (isIframe) {\r\n \/\/ Ekstrak URL dari atribut src di dalam tag iframe\r\n let iframeSrc = '';\r\n const srcMatch = sub.link.match(\/src=[\"']([^\"']+)[\"']\/i);\r\n if (srcMatch && srcMatch[1]) {\r\n iframeSrc = srcMatch[1];\r\n } else {\r\n iframeSrc = sub.link; \/\/ fallback jika regex gagal\r\n }\r\n\r\n \/\/ Bedakan apakah ini iframe peta Google Maps atau video\r\n const isMap = iframeSrc.includes('google.com\/maps') || iframeSrc.includes('maps.google.com');\r\n\r\n if (isMap) {\r\n \/\/ Render wadah Google Maps responsif yang bersih\r\n revealBlockHtml = `\r\n <div class=\"link-reveal-container\" id=\"reveal-container-${idx}\">\r\n <div class=\"map-banner-container\">\r\n <div class=\"map-wrapper\">\r\n <iframe src=\"${iframeSrc}\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n } else {\r\n \/\/ Render pemutar video responsif premium tanpa tajuk teks\r\n revealBlockHtml = `\r\n <div class=\"link-reveal-container\" id=\"reveal-container-${idx}\">\r\n <div class=\"video-banner-container\">\r\n <div class=\"video-wrapper\">\r\n <iframe src=\"${iframeSrc}\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n } else if (isUrl) {\r\n \/\/ Deteksi jika link merupakan layanan WhatsApp (wa.me atau api.whatsapp)\r\n const isWhatsapp = sub.link.includes('wa.me') || sub.link.includes('whatsapp.com');\r\n\r\n if (isWhatsapp) {\r\n \/\/ Render banner WhatsApp\r\n revealBlockHtml = `\r\n <div class=\"link-reveal-container\" id=\"reveal-container-${idx}\">\r\n <div class=\"whatsapp-banner\">\r\n <div class=\"whatsapp-banner-left\">\r\n <div class=\"whatsapp-banner-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M12.004 2c-5.518 0-9.996 4.477-9.996 9.995 0 1.763.459 3.483 1.332 5.008L2 22l5.127-1.345a9.92 9.92 0 004.877 1.28c5.517 0 9.996-4.477 9.996-9.995C22 6.477 17.521 2 12.004 2zm6.604 14.18c-.272.766-1.36 1.417-1.892 1.49-.496.068-1.12.096-1.802-.12a10.834 10.834 0 01-3.692-2.31 11.233 11.233 0 01-2.55-3.328c-.3-.52-.323-.9-.052-1.246.243-.31.54-.72.81-1.08.196-.26.29-.44.425-.71.135-.27.068-.51-.034-.71l-.81-1.954c-.266-.64-.53-.54-.725-.55a4.4 4.4 0 00-.518-.01c-.347 0-.913.13-1.393.65-.48.52-1.83 1.785-1.83 4.354s1.865 5.05 2.12 5.39c.257.34 3.67 5.6 8.892 7.56 1.242.467 2.213.746 2.97.986 1.228.39 2.347.336 3.23.204 1.012-.15 2.12-.865 2.42-1.66.3-1.36.3-1.638.21-1.74-.09-.102-.33-.163-.69-.344z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"whatsapp-banner-details\">\r\n <span class=\"whatsapp-banner-tag\">Hubungi Kami<\/span>\r\n <h4 class=\"whatsapp-banner-title\">Layanan Chat WhatsApp<\/h4>\r\n <\/div>\r\n <\/div>\r\n <a href=\"${sub.link}\" target=\"_blank\" class=\"whatsapp-banner-btn\">\r\n Tanya Jawab WA\r\n <svg style=\"width:14px; height:14px;\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n } else {\r\n \/\/ Render banner formulir pendaftaran online\r\n revealBlockHtml = `\r\n <div class=\"link-reveal-container\" id=\"reveal-container-${idx}\">\r\n <div class=\"form-banner\">\r\n <div class=\"form-banner-left\">\r\n <div class=\"form-banner-icon\">\r\n <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"form-banner-details\">\r\n <span class=\"form-banner-tag\">Tautan Resmi<\/span>\r\n <h4 class=\"form-banner-title\">Formulir Pendaftaran Online<\/h4>\r\n <\/div>\r\n <\/div>\r\n <a href=\"${sub.link}\" target=\"_blank\" class=\"form-banner-btn\">\r\n Isi Formulir\r\n <svg style=\"width:14px; height:14px;\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3\"><\/path>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n } else {\r\n revealBlockHtml = `\r\n <div class=\"link-reveal-container\" id=\"reveal-container-${idx}\">\r\n <div class=\"detail-plain-text\">\r\n <svg style=\"width:14px; height:14px; margin-right:6px; color: #10b981; display: inline-block; vertical-align: middle;\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\r\n <\/svg>\r\n <span style=\"vertical-align: middle;\">${sub.link}<\/span>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n } else {\r\n revealBlockHtml = `\r\n <div class=\"link-reveal-container\" id=\"reveal-container-${idx}\">\r\n <div class=\"detail-plain-text\" style=\"color: #94a3b8; font-style: italic; background-color: #f8fafc; border-style: dashed;\">\r\n Informasi tambahan tidak tersedia.\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n subItemsHtml += `\r\n <div class=\"sub-item-block\">\r\n <p class=\"detail-desc\" data-idx=\"${idx}\">${linkify(sub.keterangan) || 'Tidak ada keterangan tambahan.'}<\/p>\r\n ${revealBlockHtml}\r\n <\/div>\r\n `;\r\n });\r\n\r\n container.innerHTML = `\r\n <div id=\"active-detail-card\" class=\"detail-card\">\r\n <div>\r\n <h3 class=\"detail-title\">${item.jenjang}<\/h3>\r\n <\/div>\r\n \r\n ${subItemsHtml}\r\n <\/div>\r\n `;\r\n\r\n \/\/ Menjalankan animasi transisi halus\r\n setTimeout(() => {\r\n const activeCard = document.getElementById('active-detail-card');\r\n if (activeCard) {\r\n activeCard.classList.add('show');\r\n }\r\n }, 50);\r\n }\r\n }\r\n\r\n \/\/ =======================================================================\r\n \/\/ EVENT DELEGATION (NATIVE LINK HANDLING)\r\n \/\/ =======================================================================\r\n document.getElementById('detail-card-container').addEventListener('click', function(event) {\r\n const anchor = event.target.closest('a');\r\n if (anchor) {\r\n event.stopPropagation();\r\n return; \r\n }\r\n\r\n const descEl = event.target.closest('.detail-desc');\r\n if (descEl) {\r\n const idx = descEl.getAttribute('data-idx');\r\n const revealContainer = document.getElementById(`reveal-container-${idx}`);\r\n \r\n if (revealContainer) {\r\n const isExpanded = revealContainer.classList.toggle('active');\r\n descEl.classList.toggle('active');\r\n }\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pratinjau Halaman Web Dinamis – Langkah 2 (Keterangan dan Tautan Teks) Sedang memuat nama website… Pilihan Jenjang Pendidikan Silakan pilih jenjang pendidikan di bawah ini untuk melihat detail program dan informasi pendaftaran selanjutnya. Pilihan Jenjang Pendidikan — Sedang memuat daftar… — Menunggu pilihan jenjang…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":17,"href":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/wp-json\/wp\/v2\/pages\/7\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/ppdb.hidayatunnajah.com\/ppdb\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}