/* ====== Modul tambahan: slider, popup, pegawai, FAQ, album, bagikan ====== */

/* ---------- slider beranda ---------- */
.slider{ position:relative; border-radius:18px; overflow:hidden; margin-bottom:2rem;
  box-shadow:var(--shadow-card); background:var(--surface-alt); }
.slider .slide{ display:none; }
.slider .slide-aktif{ display:block; animation:slide-masuk .5s ease; }
@keyframes slide-masuk{ from{ opacity:.4; } to{ opacity:1; } }
.slider img{ width:100%; aspect-ratio:21/9; object-fit:cover; }
.slider-judul{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.4rem .9rem;
  background:linear-gradient(to top, rgba(8,61,48,.86), rgba(8,61,48,0));
  color:#fff; font-weight:700; font-size:1.05rem; }
.slider-nav{ position:absolute; top:50%; transform:translateY(-50%); border:none; cursor:pointer;
  width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.86);
  color:var(--hijau-800); font-size:1.5rem; line-height:1; display:flex;
  align-items:center; justify-content:center; }
.slider-nav:hover{ background:#fff; }
.slider-mundur{ left:.8rem; } .slider-maju{ right:.8rem; }
.slider-titik{ position:absolute; bottom:.6rem; left:0; right:0; display:flex;
  gap:.4rem; justify-content:center; }
.slider-titik button{ width:9px; height:9px; padding:0; border-radius:999px; border:none;
  background:rgba(255,255,255,.55); cursor:pointer; }
.slider-titik .titik-aktif{ background:#fff; width:22px; }
@media (max-width:640px){ .slider img{ aspect-ratio:4/3; } .slider-nav{ width:36px; height:36px; } }

/* ---------- popup pengumuman ---------- */
.popup-lapis{ position:fixed; inset:0; z-index:80; background:rgba(8,61,48,.62);
  display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.popup-lapis[hidden]{ display:none; }
.popup-kotak{ position:relative; background:#fff; border-radius:16px; overflow:hidden;
  max-width:520px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.3); animation:popup-masuk .28s ease; }
@keyframes popup-masuk{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.popup-kotak img{ width:100%; height:auto; }
.popup-tutup{ position:absolute; top:.5rem; right:.5rem; z-index:2; width:38px; height:38px;
  border-radius:999px; border:none; cursor:pointer; background:rgba(255,255,255,.92);
  color:var(--ink-900); font-size:1.6rem; line-height:1; }
.popup-tutup:hover{ background:#fff; }
.popup-jangan{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem;
  font-size:.86rem; color:var(--ink-600); background:var(--surface-alt); }

/* ---------- data pegawai ---------- */
.pegawai-grid{ display:grid; gap:1.1rem; margin-bottom:2.2rem;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); }
.pegawai-kartu{ padding:0; overflow:hidden; text-align:center; }
.pegawai-foto{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--hijau-50); }
.pegawai-foto-kosong{ display:flex; align-items:center; justify-content:center; color:var(--hijau-500); }
.pegawai-foto-kosong .ic{ width:52px; height:52px; }
.pegawai-isi{ padding:.85rem .8rem 1.1rem; display:flex; flex-direction:column; gap:.2rem; }
.pegawai-isi strong{ font-size:.98rem; color:var(--ink-900); }
.pegawai-jabatan{ font-size:.86rem; color:var(--hijau-700); font-weight:600; }
.pegawai-nip{ color:var(--ink-400); font-size:.78rem; }

/* ---------- FAQ ---------- */
.faq-item{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  margin-bottom:.7rem; box-shadow:var(--shadow-card); overflow:hidden; }
.faq-item summary{ cursor:pointer; padding:1rem 1.2rem; font-weight:600; color:var(--ink-900);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--hijau-700); }
.faq-panah{ transition:transform .2s ease; color:var(--hijau-600); }
.faq-item[open] .faq-panah{ transform:rotate(180deg); }
.faq-jawab{ padding:0 1.2rem 1.1rem; color:var(--ink-600); font-size:.97rem; }

/* ---------- album galeri ---------- */
.album-grid{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  margin-bottom:2.4rem; }
.album-kartu{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.album-kartu .post-cover{ aspect-ratio:4/3; }
.album-lencana{ position:absolute; top:.6rem; left:.6rem; background:rgba(8,61,48,.85); color:#fff;
  font-size:.72rem; font-weight:600; padding:.22rem .6rem; border-radius:999px; }
.album-bungkus{ position:relative; }
.album-cover-btn{ border:none; padding:0; background:none; cursor:zoom-in; width:100%; }
.video-bingkai{ position:relative; padding-top:56.25%; border-radius:16px; overflow:hidden;
  margin-bottom:1.4rem; background:#000; }
.video-bingkai iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- tombol bagikan ---------- */
.bagikan{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--border); }
.bagikan-label{ font-size:.9rem; color:var(--ink-600); font-weight:600; }
.bagikan-btn{ font-family:var(--font); font-size:.86rem; font-weight:600; cursor:pointer;
  padding:.42rem .9rem; border-radius:999px; border:1px solid var(--hijau-100);
  background:var(--hijau-50); color:var(--hijau-800); }
.bagikan-btn:hover{ background:var(--hijau-100); color:var(--hijau-800); }
.bagikan-kabar{ font-size:.84rem; color:var(--hijau-700); font-weight:600; }
.bagikan-kabar[hidden]{ display:none; }