{"id":2378,"date":"2025-05-15T03:52:39","date_gmt":"2025-05-15T03:52:39","guid":{"rendered":"https:\/\/bp3curug.id\/?page_id=2378"},"modified":"2025-09-15T04:05:13","modified_gmt":"2025-09-15T04:05:13","slug":"layanan-informasi","status":"publish","type":"page","link":"http:\/\/bp3curug.id\/?page_id=2378","title":{"rendered":"LAYANAN INFORMASI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2378\" class=\"elementor elementor-2378\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e42a37 e-con-full e-flex e-con e-parent\" data-id=\"7e42a37\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-612cc34 e-flex e-con-boxed e-con e-parent\" data-id=\"612cc34\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6279dd elementor-widget elementor-widget-html\" data-id=\"c6279dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ===========================================\r\nLAYANAN INFORMASI \u2013 Full HTML\/CSS\/JS (Copy-Paste Ready)\r\nFunctionality: Fade-in, Modal Preview, tombol \"Buka Halaman\"\r\nSources verified from bp3curug.id Layanan Informasi page\r\n=========================================== -->\r\n<div id=\"li-section\" style=\"font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; color:#1f2937; padding:20px; background:#f6f7fb;\">\r\n\r\n  <style>\r\n    :root {\r\n      --blue: #2E438C;\r\n      --card-bg: #fff;\r\n      --muted: #6b7280;\r\n    }\r\n    .li-wrapper { max-width:1100px; margin:0 auto; }\r\n\r\n    .li-header {\r\n      background: var(--blue); color: #fff;\r\n      padding: 24px; border-radius: 10px;\r\n      box-shadow: 0 16px 32px rgba(46,67,140,0.15);\r\n      margin-bottom: 18px;\r\n    }\r\n    .li-header h1 { margin:0; font-size:26px; font-weight:700; }\r\n    .li-header p { margin-top:6px; font-size:15px; font-weight:300; opacity:.9; }\r\n\r\n    .li-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(260px,1fr));\r\n      gap:16px;\r\n    }\r\n\r\n    .li-card {\r\n      background: var(--card-bg);\r\n      padding:20px;\r\n      border-radius:12px;\r\n      border:1px solid rgba(15,23,42,0.06);\r\n      box-shadow: 0 4px 14px rgba(0,0,0,0.04);\r\n      text-align:center;\r\n      transform: translateY(20px);\r\n      opacity: 0;\r\n      transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;\r\n    }\r\n    .li-card.visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n    .li-card:hover {\r\n      box-shadow: 0 14px 28px rgba(0,0,0,0.08);\r\n      transform: translateY(-6px);\r\n    }\r\n\r\n    .li-icon {\r\n      font-size:40px;\r\n      color: var(--blue);\r\n      margin-bottom:10px;\r\n    }\r\n    .li-title {\r\n      font-size:17px; font-weight:600; margin:8px 0; color:#0f172a;\r\n    }\r\n\r\n    .li-actions { margin-top:12px; }\r\n    .btn {\r\n      display: inline-block;\r\n      padding:8px 16px;\r\n      font-size:14px; font-weight:600;\r\n      border-radius:8px;\r\n      text-decoration:none;\r\n      transition: background .3s ease, transform .2s ease;\r\n      cursor:pointer;\r\n      margin:0 4px;\r\n    }\r\n    .btn-primary {\r\n      background: var(--blue); color:#fff; border:none;\r\n    }\r\n    .btn-ghost {\r\n      background: #fff; color: var(--blue);\r\n      border:1px solid rgba(46,67,140,0.3);\r\n      box-shadow:0 4px 10px rgba(0,0,0,0.05);\r\n    }\r\n    .btn:hover {\r\n      transform: scale(1.03);\r\n    }\r\n\r\n    .card-meta { display:none; }\r\n\r\n    \/* Modal *\/\r\n    .modal-wrap {\r\n      position: fixed;\r\n      inset:0;\r\n      background:rgba(0,0,0,0.5);\r\n      display:flex; justify-content:center; align-items:center;\r\n      padding:20px;\r\n      visibility:hidden; opacity:0;\r\n      transition: opacity .2s ease;\r\n      z-index:9999;\r\n    }\r\n    .modal-wrap.active {\r\n      visibility:visible; opacity:1;\r\n    }\r\n    .modal {\r\n      background:#fff;\r\n      border-radius:10px;\r\n      width:100%; max-width:600px;\r\n      overflow-y:auto;\r\n      box-shadow: 0 24px 48px rgba(0,0,0,0.12);\r\n      transform: translateY(8px);\r\n      transition: transform .2s ease;\r\n    }\r\n    .modal-wrap.active .modal {\r\n      transform: translateY(0);\r\n    }\r\n    .modal-header, .modal-footer {\r\n      padding:12px 16px;\r\n      border-bottom:1px solid #edf2f7;\r\n    }\r\n    .modal-footer { border-top:1px solid #edf2f7; text-align:right; }\r\n    .modal-body {\r\n      padding:16px;\r\n      max-height:400px; overflow-y:auto;\r\n      font-size:14px; color:#334155;\r\n    }\r\n    .close-btn {\r\n      background:#fff; border:1px solid #cbd5e1; padding:6px 10px;\r\n      font-weight:600; border-radius:6px; cursor:pointer;\r\n    }\r\n\r\n    .no-js .li-card { opacity:1 !important; transform:none !important; }\r\n\r\n  <\/style>\r\n\r\n  <div class=\"li-wrapper\">\r\n    <header class=\"li-header\">\r\n      <h1>LAYANAN INFORMASI<\/h1>\r\n      <p>Panduan layanan publik PPID BP3 Curug \u2014 klik \u201cDetail\u201d untuk membuka halaman, atau \u201cPratinjau\u201d untuk ringkasannya.<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"li-grid\">\r\n      <!-- Maklumat Pelayanan -->\r\n      <div class=\"li-card\" data-key=\"maklumat\">\r\n        <div class=\"li-icon\">\ud83d\udc64<\/div>\r\n        <div class=\"li-title\">Maklumat Pelayanan<\/div>\r\n        <div class=\"li-actions\">\r\n          <a class=\"btn btn-primary\" href=\"https:\/\/drive.google.com\/file\/d\/1TjpkP-VCr7tpE4GtfV7oTxv2tHoD69ff\/view?usp=drive_link&amp;mc=maklumat-pelayanan\" target=\"_blank\" rel=\"noopener\">Detail<\/a>\r\n          <button class=\"btn btn-ghost btn-preview\" data-key=\"maklumat\">Pratinjau<\/button>\r\n        <\/div>\r\n        <div class=\"card-meta\">\r\n          <p>Pernyataan bahwa BP3 Curug menyelenggarakan pelayanan sesuai dengan standar pelayanan yang telah ditetapkan.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Jadwal Operasional -->\r\n      <div class=\"li-card\" data-key=\"jadwal\">\r\n        <div class=\"li-icon\">\ud83d\udcd6<\/div>\r\n        <div class=\"li-title\">Jadwal Operasional<\/div>\r\n        <div class=\"li-actions\">\r\n          <a class=\"btn btn-primary\" href=\"https:\/\/drive.google.com\/file\/d\/1XOByQxDKdAaUj1gXVk5HrxzOgd1jrAeh\/view?usp=drive_link&amp;mc=jadwal-operasional\" target=\"_blank\" rel=\"noopener\">Detail<\/a>\r\n          <button class=\"btn btn-ghost btn-preview\" data-key=\"jadwal\">Pratinjau<\/button>\r\n        <\/div>\r\n        <div class=\"card-meta\">\r\n          <p>PPID BP3 Curug beroperasi sesuai dengan jadwal operasional yang berlaku.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Tata Cara Permohonan Informasi Publik -->\r\n      <div class=\"li-card\" data-key=\"permohonan\">\r\n        <div class=\"li-icon\">\ud83d\udccb<\/div>\r\n        <div class=\"li-title\">Tata Cara Permohonan Informasi Publik<\/div>\r\n        <div class=\"li-actions\">\r\n          <a class=\"btn btn-primary\" href=\"https:\/\/bp3curug.id\/?page_id=2335&amp;mc=permohonan-informasi-publik\" target=\"_blank\" rel=\"noopener\">Detail<\/a>\r\n          <button class=\"btn btn-ghost btn-preview\" data-key=\"permohonan\">Pratinjau<\/button>\r\n        <\/div>\r\n        <div class=\"card-meta\">\r\n          <p>1. Mengisi formulir\r\n                2. Bukti permohonan\r\n                3. Proses informasi\r\n                4. Pemberian informasi\r\n<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Tata Cara Pengajuan Keberatan -->\r\n      <div class=\"li-card\" data-key=\"keberatan\">\r\n        <div class=\"li-icon\">1\ufe0f\u20e3<\/div>\r\n        <div class=\"li-title\">Tata Cara Pengajuan Keberatan Informasi<\/div>\r\n        <div class=\"li-actions\">\r\n          <a class=\"btn btn-primary\" href=\"https:\/\/bp3curug.id\/?page_id=2445&amp;mc=tata-cara-keberatan\" target=\"_blank\" rel=\"noopener\">Detail<\/a>\r\n          <button class=\"btn btn-ghost btn-preview\" data-key=\"keberatan\">Pratinjau<\/button>\r\n        <\/div>\r\n        <div class=\"card-meta\">\r\n          <p>Informasi cara resmi mengajukan keberatan atas permohonan informasi yang ditolak\/tidak ditanggapi.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Tata Penyelesaian Sengketa -->\r\n      <div class=\"li-card\" data-key=\"sengketa\">\r\n        <div class=\"li-icon\">\ud83d\udcb0<\/div>\r\n        <div class=\"li-title\">Tata Cara Permohonan Penyelesaian Sengketa ke Komisi Informasi<\/div>\r\n        <div class=\"li-actions\">\r\n          <a class=\"btn btn-primary\" href=\"https:\/\/bp3curug.id\/?page_id=2458&amp;mc=permohonan-sengketa\" target=\"_blank\" rel=\"noopener\">Detail<\/a>\r\n          <button class=\"btn btn-ghost btn-preview\" data-key=\"sengketa\">Pratinjau<\/button>\r\n        <\/div>\r\n        <div class=\"card-meta\">\r\n          <p>Prosedur pengajuan sengketa informasi ke Komisi Informasi apabila keberatan tetap tidak dipenuhi.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div> <!-- end grid -->\r\n\r\n  <\/div> <!-- end wrapper -->\r\n\r\n  <!-- Modal for preview -->\r\n  <div class=\"modal-wrap\" role=\"dialog\" aria-modal=\"true\" aria-hidden=\"true\">\r\n    <div class=\"modal\">\r\n      <div class=\"modal-header\">\r\n        <strong class=\"modal-title\">Pratinjau<\/strong>\r\n        <button class=\"close-btn\" aria-label=\"Close Preview\">Tutup<\/button>\r\n      <\/div>\r\n      <div class=\"modal-body\"><\/div>\r\n      <div class=\"modal-footer\">\r\n        <a href=\"#\" class=\"btn btn-primary btn-modal-link\" target=\"_blank\" rel=\"noopener\">Buka Halaman<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    document.documentElement.classList.remove('no-js');\r\n    const cards = document.querySelectorAll('.li-card');\r\n    if('IntersectionObserver' in window){\r\n      const io = new IntersectionObserver((entries, obs)=>{\r\n        entries.forEach(e=>{\r\n          if(e.isIntersecting){ e.target.classList.add('visible'); obs.unobserve(e.target);}\r\n        });\r\n      }, { threshold: .2 });\r\n      cards.forEach(c=> io.observe(c));\r\n    } else {\r\n      cards.forEach(c=> c.classList.add('visible'));\r\n    }\r\n\r\n    const modalWrap = document.querySelector('.modal-wrap');\r\n    const modalBody = modalWrap.querySelector('.modal-body');\r\n    const modalLink = modalWrap.querySelector('.btn-modal-link');\r\n    const modalTitle = modalWrap.querySelector('.modal-title');\r\n    let lastFocus = null;\r\n\r\n    document.querySelectorAll('.btn-preview').forEach(btn=>{\r\n      btn.addEventListener('click', ()=>{\r\n        const key = btn.getAttribute('data-key');\r\n        const card = document.querySelector(`.li-card[data-key=\"${key}\"]`);\r\n        if(!card) return;\r\n        lastFocus = btn;\r\n        modalTitle.textContent = card.querySelector('.li-title').textContent;\r\n        modalBody.innerHTML = card.querySelector('.card-meta').innerHTML;\r\n        modalLink.href = card.querySelector('.btn-primary').href;\r\n        modalWrap.classList.add('active');\r\n        modalWrap.setAttribute('aria-hidden','false');\r\n        modalWrap.querySelector('.close-btn').focus();\r\n      });\r\n    });\r\n\r\n    modalWrap.addEventListener('click', e=>{\r\n      if(e.target === modalWrap) closeModal();\r\n    });\r\n    modalWrap.querySelector('.close-btn').addEventListener('click', closeModal);\r\n    document.addEventListener('keydown', e=>{\r\n      if(e.key === 'Escape' && modalWrap.classList.contains('active')) closeModal();\r\n    });\r\n    function closeModal(){\r\n      modalWrap.classList.remove('active');\r\n      modalWrap.setAttribute('aria-hidden','true');\r\n      if(lastFocus) lastFocus.focus();\r\n    }\r\n  <\/script>\r\n\r\n  <noscript>\r\n    <style>.li-card{ opacity:1 !important; transform:none !important; }<\/style>\r\n    <div style=\"margin-top:12px;color:#6b7280;font-size:13px;\">\r\n      (JavaScript mati \u2014 tombol \u201cPratinjau\u201d tidak aktif, gunakan \u201cDetail\u201d untuk melihat konten.)\r\n    <\/div>\r\n  <\/noscript>\r\n\r\n<\/div>\r\n\t\t\t\t<\/div>\n\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>LAYANAN INFORMASI Panduan layanan publik PPID BP3 Curug \u2014 klik \u201cDetail\u201d untuk membuka halaman, atau \u201cPratinjau\u201d untuk ringkasannya. \ud83d\udc64 Maklumat Pelayanan Detail Pratinjau Pernyataan bahwa BP3 Curug menyelenggarakan pelayanan sesuai dengan standar pelayanan yang telah ditetapkan. \ud83d\udcd6 Jadwal Operasional Detail Pratinjau PPID BP3 Curug beroperasi sesuai dengan jadwal operasional yang berlaku. \ud83d\udccb Tata Cara Permohonan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2378","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"http:\/\/bp3curug.id\/index.php?rest_route=\/wp\/v2\/pages\/2378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bp3curug.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/bp3curug.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/bp3curug.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bp3curug.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2378"}],"version-history":[{"count":37,"href":"http:\/\/bp3curug.id\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions"}],"predecessor-version":[{"id":3860,"href":"http:\/\/bp3curug.id\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions\/3860"}],"wp:attachment":[{"href":"http:\/\/bp3curug.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}