{"id":728,"date":"2026-03-03T16:26:30","date_gmt":"2026-03-03T16:26:30","guid":{"rendered":"https:\/\/sendangwarih.or.id\/?page_id=728"},"modified":"2026-03-03T17:55:30","modified_gmt":"2026-03-03T17:55:30","slug":"sendangwarih-mangir","status":"publish","type":"page","link":"https:\/\/sendangwarih.or.id\/","title":{"rendered":"Sendangwarih Mangir"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n PAMSIMAS Sendang Warih | Air Bersih Bantul<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <style>\r\n \/* --- RESET & VARIABEL TEMA --- *\/\r\n :root {\r\n --primary: #3b82f6; \/* Bright Blue *\/\r\n --primary-light: #60a5fa;\r\n --primary-dark: #2563eb;\r\n --secondary: #e0f2fe;\r\n --dark: #0f172a;\r\n --gray-text: #475569;\r\n --gray-light: #f1f5f9;\r\n --white: #ffffff;\r\n \r\n --radius-md: 12px;\r\n --radius-lg: 24px;\r\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);\r\n --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n --transition: all 0.3s ease;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; -webkit-tap-highlight-color: transparent; }\r\n html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }\r\n \r\n \/* SOFT BLUE LIGHT BACKGROUND EFFECT *\/\r\n body { \r\n background: radial-gradient(circle at top left, #e0f2fe 0%, #ffffff 40%, #f0fdf4 100%);\r\n color: var(--dark); \r\n line-height: 1.6; \r\n overflow-x: hidden;\r\n width: 100%;\r\n }\r\n \r\n a { text-decoration: none; color: inherit; transition: var(--transition); }\r\n ul { list-style: none; }\r\n img { max-width: 100%; height: auto; display: block; }\r\n\r\n .section { padding: 80px 5%; max-width: 1200px; margin: 0 auto; }\r\n .section-title { text-align: center; font-size: 2.2rem; font-weight: 800; color: var(--dark); margin-bottom: 15px; letter-spacing: -0.03em; }\r\n .section-subtitle { text-align: center; color: var(--gray-text); max-width: 600px; margin: 0 auto 50px; font-size: 1.1rem; }\r\n\r\n \/* --- MODERN HEADER MELAYANG --- *\/\r\n .navbar {\r\n position: fixed; top: 20px; left: 5%; right: 5%;\r\n background: rgba(255, 255, 255, 0.8); \r\n backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding: 15px 30px; z-index: 1000; \r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);\r\n }\r\n .logo { font-size: 1.3rem; font-weight: 800; color: var(--dark); display: flex; align-items: center; gap: 10px; }\r\n .logo i { color: var(--primary); font-size: 1.5rem; }\r\n \r\n .nav-links { display: flex; gap: 30px; align-items: center; }\r\n .nav-link { font-weight: 600; color: var(--gray-text); font-size: 0.95rem; }\r\n .nav-link:hover, .nav-link.active { color: var(--primary); }\r\n .btn-login-nav { background: var(--primary); color: var(--white) !important; padding: 10px 24px; border-radius: 50px; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }\r\n .btn-login-nav:hover { background: var(--primary-dark); transform: translateY(-2px); }\r\n \r\n \/* MENU TOGGLE BUG FIX: Warna biru tua *\/\r\n .menu-toggle { display: none; font-size: 1.5rem; background: none; border: none; cursor: pointer; color: var(--primary-dark); }\r\n\r\n \/* --- HERO SECTION --- *\/\r\n .hero { display: flex; align-items: center; justify-content: space-between; min-height: 100vh; padding: 150px 5% 80px; max-width: 1300px; margin: 0 auto; position: relative; }\r\n .hero-left { flex: 1; max-width: 50%; padding-right: 40px; z-index: 10; }\r\n\r\n .hero-label {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background-color: var(--secondary); color: var(--primary-dark);\r\n font-size: 0.85rem; font-weight: 700; padding: 8px 16px; border-radius: 50px;\r\n margin-bottom: 25px; text-transform: uppercase; letter-spacing: 0.5px;\r\n border: 1px solid var(--primary-light); box-shadow: 0 2px 10px rgba(59, 130, 246, 0.1);\r\n }\r\n\r\n \/* FIX BUG TYPING TEXT: Mengunci tinggi judul agar paragraf bawah tidak melompat *\/\r\n .hero-title-box {\r\n min-height: 130px; \/* Sesuaikan angka ini agar cukup menampung 2-3 baris teks *\/\r\n margin-bottom: 15px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n }\r\n\r\n .hero h1 { font-size: 4.2rem; font-weight: 800; line-height: 1.2; color: var(--dark); letter-spacing: -0.03em; margin: 0;}\r\n .hero p { font-size: 1.15rem; color: var(--gray-text); margin-bottom: 40px; line-height: 1.7; max-width: 480px; }\r\n \r\n \/* Efek Ngetik CSS *\/\r\n .typing-container { \r\n background: linear-gradient(90deg, #3b82f6, #06b6d4);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n display: inline; \r\n }\r\n .cursor { display: inline-block; width: 4px; background-color: var(--primary); margin-left: 2px; animation: blink 0.7s infinite; height: 1em; vertical-align: text-bottom; }\r\n @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\r\n\r\n \/* Button Group Hero *\/\r\n .btn-group { display: flex; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; }\r\n \r\n .join-btn {\r\n background-color: var(--primary); color: white; border: 2px solid var(--primary);\r\n padding: 16px 32px; font-size: 1rem; font-weight: 600; border-radius: 50px;\r\n cursor: pointer; transition: var(--transition); box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);\r\n display: inline-flex; align-items: center; justify-content: center; gap: 10px;\r\n }\r\n .join-btn:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 15px 25px rgba(59, 130, 246, 0.3); }\r\n \r\n .btn-outline { background-color: transparent; color: var(--primary); box-shadow: none; }\r\n .btn-outline:hover { background-color: var(--primary); color: white; }\r\n\r\n \/* Stats Box *\/\r\n .stats-container { display: flex; gap: 20px; }\r\n .stat-card {\r\n border: 1px solid var(--primary-light); padding: 20px 30px; border-radius: 20px;\r\n display: flex; flex-direction: column; align-items: center; min-width: 160px;\r\n background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(5px);\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: var(--transition);\r\n }\r\n .stat-card:hover { transform: translateY(-5px); border-color: var(--primary); }\r\n .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary); line-height: 1; }\r\n .stat-label { color: var(--gray-text); font-size: 0.9rem; margin-top: 8px; font-weight: 600; }\r\n\r\n \/* Kolom Gambar Kanan *\/\r\n .hero-right { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; height: 600px; }\r\n .image-stack { position: relative; width: 100%; height: 100%; max-width: 500px; }\r\n .img-frame { position: absolute; background: white; padding: 12px; border-radius: 30px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); transition: transform 0.4s ease; }\r\n .img-frame:hover { transform: scale(1.03) translateY(-10px); z-index: 10; }\r\n .img-frame img { border-radius: 20px; width: 100%; height: 100%; object-fit: cover; }\r\n .img-1 { top: 0; left: 0; width: 260px; height: 300px; z-index: 2; }\r\n .img-2 { top: 140px; right: 0; width: 260px; height: 360px; z-index: 3; }\r\n .img-3 { bottom: 0; left: 40px; width: 220px; height: 280px; z-index: 4; }\r\n .deco-xxx { position: absolute; bottom: -80px; right: 60px; font-size: 8rem; font-weight: 800; color: #f59e0b; transform: rotate(-5deg); pointer-events: none; line-height: 0.8; opacity: 0.9; z-index: 1; font-family: 'Comic Sans MS', cursive, sans-serif; }\r\n\r\n \/* --- TICKER ANIMATION --- *\/\r\n .ticker-wrap { width: 100%; overflow: hidden; background-color: var(--white); padding: 25px 0; border-bottom: 1px solid var(--gray-light); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 15px; }\r\n .ticker { display: flex; width: max-content; }\r\n .ticker-left { animation: ticker-slide-left 40s linear infinite; }\r\n .ticker-right { animation: ticker-slide-right 40s linear infinite; }\r\n .ticker-item { display: flex; align-items: center; gap: 10px; padding: 0 40px; font-weight: 700; color: var(--gray-text); font-size: 1.1rem; white-space: nowrap; }\r\n .ticker-item i { color: var(--primary); font-size: 1.3rem; }\r\n @keyframes ticker-slide-left { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }\r\n @keyframes ticker-slide-right { 0% { transform: translate3d(-50%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }\r\n\r\n \/* --- FASILITAS --- *\/\r\n .grid-fasilitas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }\r\n .card-fasilitas { background: var(--white); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-light); transition: var(--transition); text-align: left; display: flex; flex-direction: column; align-items: flex-start; }\r\n .card-fasilitas:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--secondary); }\r\n .icon-box { background-color: var(--secondary); color: var(--primary); width: 60px; height: 60px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 25px; }\r\n .card-fasilitas h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; color: var(--dark); }\r\n .card-fasilitas p { color: var(--gray-text); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }\r\n .card-link { font-weight: 700; color: var(--primary); font-size: 0.9rem; display: flex; align-items: center; gap: 5px; }\r\n .card-link:hover { color: var(--primary-dark); }\r\n\r\n \/* --- KEGIATAN --- *\/\r\n .grid-kegiatan { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }\r\n .kegiatan-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); border: 1px solid var(--gray-light); }\r\n .kegiatan-card:hover { box-shadow: var(--shadow-md); }\r\n .kegiatan-img-wrapper { width: 100%; height: 240px; overflow: hidden; }\r\n .kegiatan-img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }\r\n .kegiatan-card:hover .kegiatan-img { transform: scale(1.05); }\r\n .kegiatan-body { padding: 30px; }\r\n .kegiatan-body h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: var(--dark); }\r\n .kegiatan-body p { color: var(--gray-text); font-size: 0.95rem; line-height: 1.6; }\r\n\r\n \/* --- GALERI --- *\/\r\n .galeri-wrapper { width: 100%; overflow: hidden; padding: 20px 0; margin-top: 30px; }\r\n .galeri-track { display: flex; width: max-content; gap: 15px; animation: galeri-scroll 25s linear infinite; }\r\n .galeri-wrapper:hover .galeri-track { animation-play-state: paused; }\r\n .galeri-item { width: 200px; height: 200px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); cursor: pointer; flex-shrink: 0; overflow: hidden; }\r\n .galeri-img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }\r\n .galeri-item:hover .galeri-img { transform: scale(1.1); }\r\n @keyframes galeri-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\r\n\r\n \/* --- TENTANG KAMI --- *\/\r\n #tentang { background-color: var(--white); border-top: 1px solid var(--gray-light); }\r\n .about-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }\r\n .about-text h2 { text-align: left; margin-bottom: 20px; }\r\n .about-p { color: var(--gray-text); line-height: 1.8; margin-bottom: 20px; font-size: 1rem; text-align: justify; }\r\n .about-highlight { background-color: var(--gray-light); padding: 30px; border-radius: var(--radius-lg); border-left: 4px solid var(--primary); font-weight: 500; color: var(--dark); }\r\n\r\n \/* --- FOOTER (BUG FIX: FULL WIDTH) --- *\/\r\n footer { \r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); \r\n color: #94a3b8; \r\n padding: 80px 0 40px; \/* Padding sisi kiri kanan dinolkan agar full *\/\r\n position: relative; \r\n padding-bottom: 100px; \r\n width: 100%;\r\n margin: 0;\r\n left: 0;\r\n right: 0;\r\n overflow: hidden;\r\n }\r\n footer::before { content: \"\"; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: linear-gradient(90deg, var(--primary) 0%, #38bdf8 50%, #818cf8 100%); }\r\n .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; max-width: 1200px; margin: 0 auto 50px; padding: 0 5%; }\r\n .footer-logo { font-size: 1.8rem; color: var(--white); font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }\r\n .footer-logo i { color: #38bdf8; }\r\n .footer-col p { line-height: 1.8; margin-bottom: 25px; }\r\n .social-links { display: flex; gap: 15px; }\r\n .social-links a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05); display: flex; justify-content: center; align-items: center; color: var(--white); transition: var(--transition); }\r\n .social-links a:hover { background: var(--primary); transform: translateY(-3px); }\r\n .footer-col h4 { color: var(--white); font-size: 1.2rem; margin-bottom: 25px; font-weight: 700; position: relative; padding-bottom: 10px; }\r\n .footer-col h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--primary); border-radius: 2px; }\r\n .footer-links li { margin-bottom: 15px; }\r\n .footer-links a { display: inline-block; transition: var(--transition); }\r\n .footer-links a:hover { color: #38bdf8; transform: translateX(5px); }\r\n .contact-info li { display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-start; }\r\n .contact-info i { color: #38bdf8; font-size: 1.2rem; margin-top: 4px; }\r\n \r\n .footer-bottom-container { padding: 0 5%; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; }\r\n .footer-bottom { text-align: center; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }\r\n\r\n \/* --- MOBILE BOTTOM NAVIGATION --- *\/\r\n .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); box-shadow: 0 -5px 20px rgba(0,0,0,0.05); z-index: 1000; border-top: 1px solid var(--gray-light); padding: 12px 15px 18px; justify-content: space-around; align-items: center; }\r\n .bottom-nav-item { display: flex; flex-direction: column; align-items: center; color: var(--gray-text); font-size: 0.75rem; font-weight: 600; gap: 4px; transition: var(--transition); }\r\n .bottom-nav-item i { font-size: 1.3rem; transition: transform 0.2s; }\r\n .bottom-nav-item.active { color: var(--primary); }\r\n .bottom-nav-item.active i { transform: translateY(-3px); }\r\n\r\n \/* --- RESPONSIVE MEDIA QUERIES --- *\/\r\n @media (max-width: 1024px) {\r\n html { font-size: 15px; }\r\n .hero-right { display: none; } \r\n .hero { justify-content: center; padding-top: 160px; }\r\n .hero-left { max-width: 100%; padding-right: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }\r\n .hero-title-box { align-items: center; min-height: 100px; }\r\n .hero h1 { font-size: 3.5rem; }\r\n .hero p { text-align: center; }\r\n .stats-container { justify-content: center; }\r\n .about-wrapper { grid-template-columns: 1fr; gap: 30px; }\r\n .footer-grid { grid-template-columns: 1fr 1fr; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .section { padding: 60px 5%; }\r\n .navbar { top: 10px; left: 10px; right: 10px; padding: 15px 20px; }\r\n .menu-toggle { display: block; }\r\n .nav-links { position: absolute; top: 110%; left: 0; right: 0; background: rgba(255,255,255,0.98); flex-direction: column; padding: 30px; box-shadow: var(--shadow-md); gap: 20px; border-radius: 20px; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: var(--transition); }\r\n .nav-links.active { opacity: 1; transform: translateY(0); pointer-events: auto; }\r\n .nav-link { width: 100%; text-align: center; padding: 10px; font-size: 1.1rem; }\r\n .btn-login-nav { width: 100%; text-align: center; }\r\n \r\n .hero { padding: 140px 5% 80px; min-height: auto; }\r\n .hero-left { margin-bottom: 20px; }\r\n \r\n .hero-title-box { min-height: 110px; }\r\n \r\n .btn-group { flex-direction: column; width: 100%; }\r\n .join-btn { width: 100%; justify-content: center; margin-bottom: 0; }\r\n \r\n .stats-container { justify-content: center; flex-wrap: wrap; }\r\n .grid-kegiatan { grid-template-columns: 1fr; }\r\n .footer-grid { grid-template-columns: 1fr; gap: 40px; }\r\n .footer-bottom { flex-direction: column; gap: 15px; }\r\n .mobile-bottom-nav { display: flex; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <nav class=\"navbar\">\r\n <div class=\"logo\"><i class=\"fa-solid fa-droplet\"><\/i> Sendang Warih<\/div>\r\n \r\n <button class=\"menu-toggle\" id=\"mobile-menu-btn\" aria-label=\"Open Menu\"><i class=\"fa-solid fa-bars\"><\/i><\/button>\r\n\r\n <ul class=\"nav-links\" id=\"nav-menu\">\r\n <li><a href=\"#beranda\" class=\"nav-link active\">Beranda<\/a><\/li>\r\n <li><a href=\"#fasilitas\" class=\"nav-link\">Fasilitas<\/a><\/li>\r\n <li><a href=\"#kegiatan\" class=\"nav-link\">Kegiatan<\/a><\/li>\r\n <li><a href=\"#tentang\" class=\"nav-link\">Tentang<\/a><\/li>\r\n <li><a href=\"https:\/\/sendangwarih.or.id\/user\/Admin\" class=\"nav-link btn-login-nav\">Login Admin<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <section id=\"beranda\" class=\"hero\">\r\n <div class=\"hero-left\">\r\n <div class=\"hero-label\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i> PAMSIMAS SYSTEM\r\n <\/div>\r\n \r\n <div class=\"hero-title-box\">\r\n <h1>Air Bersih untuk<br>\r\n <span class=\"typing-container\" id=\"typing-text\" style=\"color: var(--primary);\"><\/span><span class=\"cursor\"><\/span>\r\n <\/h1>\r\n <\/div>\r\n \r\n <p>Akses Layanan Cepat, Mudah & Transparan. Sistem air minum & sanitasi berbasis masyarakat yang mandiri, sehat, dan berkelanjutan untuk warga Kalurahan Sendangsari.<\/p>\r\n \r\n <div class=\"btn-group\">\r\n <a href=\"https:\/\/sendangwarih.or.id\/user\/Pengguna\/tagihansemuapengguna\" class=\"join-btn\">Cek Tagihan Air <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <a href=\"https:\/\/sendangwarih.or.id\/user\" class=\"join-btn btn-outline\">Login <i class=\"fa-solid fa-user-shield\"><\/i><\/a>\r\n <\/div>\r\n \r\n <div class=\"stats-container\">\r\n <div class=\"stat-card\">\r\n <span class=\"stat-number\">340+<\/span>\r\n <span class=\"stat-label\">Pelanggan Aktif<\/span>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <span class=\"stat-number\">24\/7<\/span>\r\n <span class=\"stat-label\">Akses Air Bersih<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"hero-right\">\r\n <div class=\"image-stack\">\r\n <div class=\"img-frame img-1\">\r\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1064162\/pexels-photo-1064162.jpeg\" alt=\"Sumber Air Bersih Pamsimas\">\r\n <\/div>\r\n <div class=\"img-frame img-2\">\r\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/2745258\/pexels-photo-2745258.jpeg\" alt=\"Perawatan Saluran\">\r\n <\/div>\r\n <div class=\"img-frame img-3\">\r\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/719396\/pexels-photo-719396.jpeg\" alt=\"Pertemuan Warga\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"deco-xxx\">xxx<\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"ticker-wrap\">\r\n <div class=\"ticker ticker-left\">\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-check-circle\"><\/i> Dikelola Mandiri oleh Warga<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-faucet-drip\"><\/i> Kualitas Air Terjamin Sehat<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-screwdriver-wrench\"><\/i> Perawatan Saluran Berkala<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-heart-pulse\"><\/i> Mendukung Kesehatan Keluarga<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-handshake-angle\"><\/i> Pelayanan Cepat & Tanggap<\/div>\r\n \r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-check-circle\"><\/i> Dikelola Mandiri oleh Warga<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-faucet-drip\"><\/i> Kualitas Air Terjamin Sehat<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-screwdriver-wrench\"><\/i> Perawatan Saluran Berkala<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-heart-pulse\"><\/i> Mendukung Kesehatan Keluarga<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-handshake-angle\"><\/i> Pelayanan Cepat & Tanggap<\/div>\r\n <\/div>\r\n \r\n <div class=\"ticker ticker-right\">\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-tint\"><\/i> Air Bersih Tersedia 24 Jam<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-users\"><\/i> Dikelola Secara Transparan<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-leaf\"><\/i> Ramah Lingkungan<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-hand-holding-water\"><\/i> Berbasis Masyarakat<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-shield-alt\"><\/i> Aman dan Layak Konsumsi<\/div>\r\n \r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-tint\"><\/i> Air Bersih Tersedia 24 Jam<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-users\"><\/i> Dikelola Secara Transparan<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-leaf\"><\/i> Ramah Lingkungan<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-hand-holding-water\"><\/i> Berbasis Masyarakat<\/div>\r\n <div class=\"ticker-item\"><i class=\"fa-solid fa-shield-alt\"><\/i> Aman dan Layak Konsumsi<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <section id=\"fasilitas\" class=\"section\">\r\n <h2 class=\"section-title\">Fasilitas Layanan<\/h2>\r\n <p class=\"section-subtitle\">Akses kemudahan layanan air bersih dalam satu pintu untuk seluruh pelanggan.<\/p>\r\n \r\n <div class=\"grid-fasilitas\">\r\n <div class=\"card-fasilitas\">\r\n <div class=\"icon-box\"><i class=\"fa-solid fa-file-signature\"><\/i><\/div>\r\n <h3>Pasang Baru<\/h3>\r\n <p>Formulir online mudah untuk pengajuan sambungan pipa air bersih baru ke rumah atau lokasi Anda.<\/p>\r\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=6282136006831&text=Halo%20Admin%20Pamsimas%2CSaya%20mau%20pasang%20saluran%20air%20baru!Terimakasih.\" class=\"card-link\">Ajukan Pemasangan <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <div class=\"card-fasilitas\">\r\n <div class=\"icon-box\"><i class=\"fa-solid fa-bullhorn\"><\/i><\/div>\r\n <h3>Lapor Gangguan<\/h3>\r\n <p>Layanan aduan cepat jika terjadi kebocoran pipa, air mati, atau masalah kualitas air di area Anda.<\/p>\r\n <a href=\"https:\/\/api.whatsapp.com\/send?phone=6282136006831&text=Halo%20Admin%20Pamsimas%2C%20Saya%20Ingin%20Lapor%20Gangguan!\" class=\"card-link\">Buat Laporan <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <div id=\"login\" class=\"card-fasilitas\" style=\"border-color: var(--secondary);\">\r\n <div class=\"icon-box\"><i class=\"fa-solid fa-user-gear\"><\/i><\/div>\r\n <h3>Portal Anggota<\/h3>\r\n <p>Akses khusus login bagi Pengguna, Petugas lapangan, dan Admin untuk pengelolaan data.<\/p>\r\n <a href=\"https:\/\/sendangwarih.or.id\/user\/\" class=\"card-link\">Masuk Portal <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"kegiatan\" class=\"section\" style=\"background-color: var(--gray-light); max-width: 100%;\">\r\n <div style=\"max-width: 1200px; margin: 0 auto;\">\r\n <h2 class=\"section-title\">Kegiatan & Perawatan<\/h2>\r\n <p class=\"section-subtitle\">Dokumentasi upaya kami menjaga kelancaran distribusi air bersih ke rumah warga.<\/p>\r\n \r\n <div class=\"grid-kegiatan\">\r\n <div class=\"kegiatan-card\">\r\n <div class=\"kegiatan-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.39-768x432.jpeg\" alt=\"Pertemuan Rutin PAMSIMAS\" class=\"kegiatan-img\">\r\n <\/div>\r\n <div class=\"kegiatan-body\">\r\n <h3>Pertemuan Rutin Warga<\/h3>\r\n <p>Musyawarah pengurus Pamsimas Sendangwarih setiap 3 bulan sekali bersama warga dan tokoh masyarakat untuk transparansi.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"kegiatan-card\">\r\n <div class=\"kegiatan-img-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.41-1-768x363.jpeg\" alt=\"Perbaikan Saluran Air\" class=\"kegiatan-img\">\r\n <\/div>\r\n <div class=\"kegiatan-body\">\r\n <h3>Maintenace Saluran Berkala<\/h3>\r\n <p>Tim teknis rutin melakukan pengecekan debit air, kebersihan sumber, dan perbaikan jaringan pipa jika diperlukan.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"galeri-wrapper\">\r\n <div class=\"galeri-track\">\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.39-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.40-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.40-1-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.40-2-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.42-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.15.35-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n \r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.39-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.40-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.40-1-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.40-2-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.42-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <div class=\"galeri-item\"><img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.15.35-150x150.jpeg\" alt=\"Galeri\" class=\"galeri-img\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"tentang\" class=\"section\">\r\n <div class=\"about-wrapper\">\r\n <div class=\"about-text\">\r\n <h2 class=\"section-title\">Tentang PAMSIMAS Sendang Warih<\/h2>\r\n <p class=\"about-p\"><strong>PAMSIMAS (Penyediaan Air Minum dan Sanitasi Berbasis Masyarakat) \"Sendang Warih\"<\/strong> adalah unit pengelola sarana air minum dan sanitasi yang beroperasi di Kalurahan Sendangsari, Kapanewon Pajangan, Kabupaten Bantul, DIY.<\/p>\r\n <p class=\"about-highlight\">Dikelola secara mandiri oleh Badan Pengelola Sarana Air Minum dan Sanitasi (BP-SPAMS), organisasi ini adalah wujud nyata kemandirian masyarakat dalam memenuhi kebutuhan dasar air bersih yang layak.<\/p>\r\n <\/div>\r\n <div class=\"about-img-box\">\r\n <img decoding=\"async\" src=\"https:\/\/sendangwarih.or.id\/wp-content\/uploads\/2025\/11\/WhatsApp-Image-2025-11-06-at-14.17.41-1-768x363.jpeg\" alt=\"Kemandirian Pamsimas\" style=\"border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%;\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-col\">\r\n <div class=\"footer-logo\"><i class=\"fa-solid fa-droplet\"><\/i> Sendang Warih<\/div>\r\n <p>Unit pengelola air minum mandiri kebanggaan warga Sendangsari, Pajangan, Bantul. Mewujudkan masyarakat sehat melalui penyediaan air bersih yang layak dan berkelanjutan.<\/p>\r\n <div class=\"social-links\">\r\n <a href=\"#\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Menu Cepat<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#beranda\">Beranda Utama<\/a><\/li>\r\n <li><a href=\"#fasilitas\">Pasang Baru Air<\/a><\/li>\r\n <li><a href=\"#kegiatan\">Dokumentasi Kegiatan<\/a><\/li>\r\n <li><a href=\"#tentang\">Sejarah Pamsimas<\/a><\/li>\r\n <li><a href=\"https:\/\/sendangwarih.or.id\/user\/Admin\">Login Pengurus<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Hubungi Kami<\/h4>\r\n <ul class=\"contact-info\">\r\n <li><i class=\"fa-solid fa-location-dot\"><\/i> <span>Kalurahan Sendangsari, Kapanewon Pajangan, Kab. Bantul, DIY<\/span><\/li>\r\n <li><i class=\"fa-solid fa-phone\"><\/i> <span>+62 812 3456 7890<\/span><\/li>\r\n <li><i class=\"fa-solid fa-envelope\"><\/i> <span>admin@sendangwarih.or.id<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom-container\">\r\n <div class=\"footer-bottom\">\r\n <div>© 2026 Pamsimas Sendangwarih. Hak Cipta Dilindungi.<\/div>\r\n <div>Dikelola secara mandiri oleh BP-SPAMS<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <div class=\"mobile-bottom-nav\">\r\n <a href=\"#beranda\" class=\"bottom-nav-item active\">\r\n <i class=\"fa-solid fa-house\"><\/i>\r\n Beranda\r\n <\/a>\r\n <a href=\"#fasilitas\" class=\"bottom-nav-item\">\r\n <i class=\"fa-solid fa-list-check\"><\/i>\r\n Layanan\r\n <\/a>\r\n <a href=\"https:\/\/sendangwarih.or.id\/user\/Pengguna\/tagihansemuapengguna\" class=\"bottom-nav-item\">\r\n <i class=\"fa-solid fa-file-invoice-dollar\"><\/i>\r\n Tagihan\r\n <\/a>\r\n <a href=\"https:\/\/sendangwarih.or.id\/user\/\" class=\"bottom-nav-item\">\r\n <i class=\"fa-solid fa-user\"><\/i>\r\n Login\r\n <\/a>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ 1. Script Hamburger Menu HP\r\n const menuBtn = document.getElementById('mobile-menu-btn');\r\n const navMenu = document.getElementById('nav-menu');\r\n const navMenuLinks = document.querySelectorAll('.nav-link');\r\n\r\n menuBtn.addEventListener('click', () => {\r\n navMenu.classList.toggle('active');\r\n const icon = menuBtn.querySelector('i');\r\n icon.classList.toggle('fa-bars');\r\n icon.classList.toggle('fa-xmark');\r\n });\r\n\r\n navMenuLinks.forEach(link => {\r\n link.addEventListener('click', () => {\r\n if (window.innerWidth <= 768) {\r\n navMenu.classList.remove('active');\r\n const icon = menuBtn.querySelector('i');\r\n icon.classList.add('fa-bars');\r\n icon.classList.remove('fa-xmark');\r\n }\r\n });\r\n });\r\n\r\n \/\/ 2. Script Efek Ngetik di Hero (Bug Fixed)\r\n const textArray = [\"Kesejahteraan\", \"Keluarga Sehat\", \"Masa Depan\"];\r\n const typingDelay = 100;\r\n const erasingDelay = 60;\r\n const newTextDelay = 2500;\r\n let textArrayIndex = 0;\r\n let charIndex = 0;\r\n const typedTextSpan = document.getElementById(\"typing-text\");\r\n\r\n function type() {\r\n if (charIndex < textArray[textArrayIndex].length) {\r\n typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);\r\n charIndex++;\r\n setTimeout(type, typingDelay);\r\n } else {\r\n setTimeout(erase, newTextDelay);\r\n }\r\n }\r\n\r\n function erase() {\r\n if (charIndex > 0) {\r\n typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);\r\n charIndex--;\r\n setTimeout(erase, erasingDelay);\r\n } else {\r\n textArrayIndex++;\r\n if (textArrayIndex >= textArray.length) textArrayIndex = 0;\r\n setTimeout(type, typingDelay + 500);\r\n }\r\n }\r\n\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n if(textArray.length) setTimeout(type, 1000);\r\n });\r\n\r\n \/\/ 3. Active Link on Scroll untuk Main Menu & Mobile Bottom Nav\r\n window.addEventListener('scroll', () => {\r\n let current = '';\r\n const sections = document.querySelectorAll('section, nav');\r\n sections.forEach(section => {\r\n const sectionTop = section.offsetTop;\r\n if (pageYOffset >= sectionTop - 150) {\r\n current = section.getAttribute('id');\r\n }\r\n });\r\n\r\n navMenuLinks.forEach(link => {\r\n link.classList.remove('active');\r\n if (link.getAttribute('href').includes(current)) {\r\n link.classList.add('active');\r\n }\r\n });\r\n \r\n const bottomNavItems = document.querySelectorAll('.bottom-nav-item');\r\n bottomNavItems.forEach(item => {\r\n item.classList.remove('active');\r\n if (item.getAttribute('href').includes(current)) {\r\n item.classList.add('active');\r\n }\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PAMSIMAS Sendang Warih | Air Bersih Bantul Sendang Warih Beranda Fasilitas Kegiatan Tentang Login Admin PAMSIMAS SYSTEM Air Bersih untuk Akses Layanan Cepat, Mudah & Transparan. Sistem air minum & sanitasi berbasis masyarakat yang mandiri, sehat, dan berkelanjutan untuk warga Kalurahan Sendangsari. Cek Tagihan Air Login 340+ Pelanggan Aktif 24\/7 Akses Air Bersih xxx Dikelola […]<\/p>\n","protected":false},"author":1,"featured_media":611,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-728","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=\/wp\/v2\/pages\/728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=728"}],"version-history":[{"count":28,"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=\/wp\/v2\/pages\/728\/revisions"}],"predecessor-version":[{"id":759,"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=\/wp\/v2\/pages\/728\/revisions\/759"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=\/wp\/v2\/media\/611"}],"wp:attachment":[{"href":"https:\/\/sendangwarih.or.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}