Perangkat Daerah

.accordion{ width:100%; font-family:Arial,sans-serif; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.1); } /* ITEM */ .acc-item{ margin-bottom:8px; border-radius:8px; overflow:hidden; border:1px solid #ddd; } /* HEADER */ .acc-header{ background:#1565c0; color:#fff; padding:12px 15px; cursor:pointer; font-weight:bold; display:flex; justify-content:space-between; align-items:center; } .acc-header:hover{ background:#0d47a1; } /* CONTENT */ .acc-content{ max-height: 0; overflow: hidden; padding: 0 15px; background:#f1f3f4; font-size:14px; line-height:1.6; color:#333; transition: all 0.3s ease; } /* STRIPING */ .acc-item.active .acc-content{ max-height: 2000px; padding:15px; } /* ICON */ .icon{ transition:.3s; } .active .icon{ transform:rotate(90deg); } /* ICON SOSMED */ .acc-content img{ width:26px; margin-right:6px; vertical-align:middle; } .kel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:10px; } .kel-card{ background:#ffffff; padding:12px; border-radius:10px; border:1px solid #ddd; font-size:13px; line-height:1.5; transition:.2s; } .kel-card:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,0.08); } .kel-card img{ width:22px; margin-right:5px; } .icon-sosmed a { display: inline-block; margin: 8px; font-size: 48px; color: #555; transition: 0.3s; } .icon-sosmed a:hover { transform: scale(1.2); } /* Warna hover sesuai brand */ .icon-sosmed a.web:hover { color: #3498db; } .icon-sosmed a.fb:hover { color: #1877f2; } .icon-sosmed a.ig:hover { color: #e1306c; } .icon-sosmed a.yt:hover { color: #ff0000; } .wa { font-size: 28px; color: #555; transition: 0.3s; } .wa:hover { color: #25D366; /* warna khas WhatsApp */ transform: scale(1.2); } document.addEventListener("DOMContentLoaded", function(){ const headers = document.querySelectorAll(".acc-header"); headers.forEach(header => { header.addEventListener("click", function(){ const item = this.parentElement; item.classList.toggle("active"); }); }); });