/* ============================================================
   COMPONENTS — Grid, kartu berita, kartu galeri, program pokok,
   halaman artikel, lightbox, tombol ke atas
   ============================================================ */

/* ---------- Grid ---------- */
.grid{display:grid; gap:20px;}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.grid.c4{grid-template-columns:repeat(4,1fr);}
.grid.c5{grid-template-columns:repeat(5,1fr);}

/* ---------- Kartu berita ---------- */
.card{background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:#d8d6d3;}
.thumb{aspect-ratio:16/10; width:100%; object-fit:cover; background:var(--soft2); transition:transform .35s ease;}
.card:hover img.thumb{transform:scale(1.045);}
.thumb-ph{aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff;}
.card-body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.meta{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink2); flex-wrap:wrap;}
.chip{background:var(--green-soft); color:var(--green-dark); font-weight:600; font-size:12px; padding:2px 10px; border-radius:999px;}
.card h3{font-size:16.5px; line-height:1.35;}
.card h3 a{color:var(--ink); transition:color .15s ease;}
.card h3 a:hover{color:var(--green-dark);}
.card p.excerpt{color:var(--ink2); font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

/* ---------- Kartu galeri ---------- */
.gcard{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; background:var(--soft2); transition:box-shadow .22s ease, transform .22s ease;}
.gcard:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.gcard img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.gcard:hover img{transform:scale(1.05);}
.gcard .gph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:38px; color:#fff;}
.gcard .cap{position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; font-size:13.5px; font-weight:500; line-height:1.35;}

/* ---------- 10 Program Pokok ---------- */
.prog{background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; gap:12px; align-items:flex-start; transition:box-shadow .2s ease, transform .2s ease;}
.prog:hover{box-shadow:var(--shadow-sm); transform:translateY(-2px);}
.prog .num{width:30px; height:30px; border-radius:50%; background:var(--green-soft); color:var(--green-dark); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none;}
.prog span{font-size:14.5px; font-weight:500; padding-top:3px;}

/* ---------- Halaman detail berita ---------- */
.article{max-width:720px; margin:0 auto; padding:48px 24px 64px;}
.article .back{font-size:14.5px; font-weight:600;}
.article h1{font-size:30px; line-height:1.25; margin:14px 0 10px; letter-spacing:-.4px;}
.article .meta{margin-bottom:22px;}
.article .aimg{border-radius:12px; margin-bottom:24px; width:100%;}
.article .content p{margin-bottom:16px; font-size:16.5px; line-height:1.7;}
/* Daftar di dalam isi berita: penanda ikut di dalam kolom teks, sejajar paragraf */
.article .content ul,.article .content ol{margin:0 0 16px; padding-left:26px;}
.article .content li{margin:6px 0; font-size:16.5px; line-height:1.7;}

/* ---------- Lightbox galeri ---------- */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.82); display:flex; align-items:center; justify-content:center; z-index:100; padding:24px; flex-direction:column; gap:12px; opacity:0; transition:opacity .22s ease;}
.lightbox.show{opacity:1;}
.lightbox img{max-width:min(920px,100%); max-height:80vh; border-radius:8px; transform:scale(.6); transition:transform .3s cubic-bezier(.2,.8,.3,1);}
.lightbox.show img{transform:scale(1);}
.lightbox .lcap{color:#fff; font-size:15px; text-align:center; max-width:720px;}
.lightbox .lclose{position:absolute; top:16px; right:20px; background:rgba(255,255,255,.15); color:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:18px; transition:background .15s ease;}
.lightbox .lclose:hover{background:rgba(255,255,255,.28);}

/* ---------- Tombol kembali ke atas ---------- */
.to-top{position:fixed; right:20px; bottom:20px; width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff; border:none; font-size:18px; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, background .15s ease; z-index:90; box-shadow:0 4px 14px rgba(0,0,0,.18);}
.to-top:hover{background:var(--green-dark);}
.to-top.show{opacity:1; pointer-events:auto; transform:none;}

/* ---------- Responsif ---------- */
@media (max-width:900px){
  .grid.c3,.grid.c4,.grid.c5{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .grid.c3,.grid.c4,.grid.c5{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .card,.gcard,.prog,.card:hover,.gcard:hover,.prog:hover{transform:none; transition:none;}
  .thumb,.gcard img{transition:none;}
  .card:hover img.thumb,.gcard:hover img{transform:none;}
  .lightbox,.lightbox img{transition:none;}
}

/* ---------- Slider galeri beranda (bergerak ke kiri) ---------- */
.marquee{overflow:hidden; position:relative;}
/* Gradasi lembut di tepi kiri/kanan supaya perpindahan terasa halus */
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:56px; z-index:2; pointer-events:none;}
.marquee::before{left:0; background:linear-gradient(90deg,var(--soft),transparent);}
.marquee::after{right:0; background:linear-gradient(270deg,var(--soft),transparent);}
.marquee .track{display:flex; gap:20px; width:max-content; animation:mqSlide 36s linear infinite;}
.marquee:hover .track{animation-play-state:paused;} /* berhenti saat disorot */
.marquee .gcard{width:280px; flex:none;}
@keyframes mqSlide{from{transform:translateX(0);} to{transform:translateX(calc(-50% - 10px));}}

/* ---------- Halaman profil ---------- */
.profil-banner{border-radius:12px; width:100%; max-height:380px; object-fit:cover; margin-bottom:28px; box-shadow:var(--shadow-sm);}
.profil-text p{margin-bottom:14px; max-width:760px; font-size:16px; line-height:1.75;}
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.vm-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:26px;}
.vm-card h3{color:var(--green-dark); margin-bottom:10px; font-size:19px;}
.vm-card p{font-size:15.5px; line-height:1.7;}
.vm-card ul{padding-left:18px;}
.vm-card li{margin-bottom:8px; font-size:15px; line-height:1.6;}
@media (max-width:700px){
  .vm-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .marquee .track{animation:none; flex-wrap:wrap;}
}

/* Isi berita hasil editor format (bisa berisi elemen div/font) */
.article .content div{margin:0 0 14px;}

/* ---------- Filter kategori (halaman berita) ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.filter-chip{border:1px solid var(--border); background:#fff; color:var(--ink2); font:inherit; font-size:13.5px; font-weight:600; padding:7px 16px; border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.filter-chip:hover{border-color:var(--green); color:var(--green-dark);}
.filter-chip.aktif{background:var(--green); border-color:var(--green); color:#fff;}

/* ---------- Paginasi (berita & galeri) ---------- */
.pager{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:34px;}
.pager-btn{min-width:38px; height:38px; padding:0 13px; border:1px solid var(--border); background:#fff; color:var(--ink); font:inherit; font-size:14px; font-weight:600; border-radius:10px; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.pager-btn:hover{border-color:var(--green); color:var(--green-dark);}
.pager-btn.aktif{background:var(--green); border-color:var(--green); color:#fff; cursor:default;}
.pager-dots{color:var(--ink2); padding:0 2px;}