/* =========================================================
   JANGKRIK4D - stylesheet
   ========================================================= */

:root{
  --navy:       #16325c;
  --navy-dark:  #0e2242;
  --navy-soft:  #1e4176;
  --cyan:       #1a9ad7;
  --cyan-dark:  #1580b5;
  --gold:       #f2a917;
  --ink:        #22303f;
  --ink-soft:   #5a6b7c;
  --line:       #dde5ee;
  --paper:      #ffffff;
  --mist:       #f2f6fb;

  --wrap:   1180px;
  --gutter: 20px;

  --font-head: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.25;
  margin:0;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--navy-dark); padding:12px 20px;
  font-family:var(--font-head); font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

[id]{ scroll-margin-top:96px; }

/* ---------- judul seksi ---------- */

.sectionhead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:3px solid var(--line);
  position:relative;
}
.sectionhead::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:110px; height:3px; background:var(--cyan);
}
.sectionhead h2{
  font-size:23px; color:var(--navy);
  text-transform:uppercase; letter-spacing:.02em;
}
.sectionhead__link{
  font-size:13.5px; font-weight:600; color:var(--cyan-dark);
  text-decoration:none;
}
.sectionhead__link:hover{ text-decoration:underline; }

.section{ padding-block:52px; }
.section--mist{ background:var(--mist); }

/* ---------- tombol ---------- */

.btn{
  display:inline-block;
  font-family:var(--font-head); font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer;
  padding:11px 24px; border:2px solid transparent; border-radius:4px;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--gold{ background:var(--gold); color:var(--navy-dark); }
.btn--gold:hover{ background:#dd9a0d; }
.btn--cyan{ background:var(--cyan); color:#fff; }
.btn--cyan:hover{ background:var(--cyan-dark); }
.btn--ghost{ border-color:rgba(255,255,255,.65); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--navy); }
.btn--outline{ border-color:var(--navy); color:var(--navy); }
.btn--outline:hover{ background:var(--navy); color:#fff; }
.btn--block{ display:block; width:100%; text-align:center; }

/* =========================================================
   BILAH ATAS
   ========================================================= */

.topbar{
  background:var(--navy-dark);
  color:#c3d2e6;
  font-size:12.5px;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:36px; flex-wrap:wrap;
}
.topbar a{ color:#e3ebf5; text-decoration:none; }
.topbar a:hover{ color:var(--gold); }
.topbar__contact{ display:flex; gap:20px; flex-wrap:wrap; margin:0; }
.topbar__social{ display:flex; gap:14px; list-style:none; margin:0; padding:0; }
.topbar__social svg{ display:block; }

@media (max-width:720px){
  .topbar__contact span:last-child{ display:none; }
}

/* =========================================================
   KEPALA SITUS
   ========================================================= */

.masthead{ background:var(--navy); color:#fff; }
.masthead__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-block:16px;
}

.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:#fff; }
.brand img{ width:54px; height:54px; }
.brand__text strong{
  display:block; font-family:var(--font-head); font-size:21px; font-weight:700;
  letter-spacing:.03em; line-height:1.15;
}
.brand__text span{
  display:block; font-size:11.5px; color:#b9cbe4;
  letter-spacing:.06em; text-transform:uppercase;
}

.masthead__aside{ display:flex; align-items:center; gap:16px; }
.masthead__hotline{ text-align:right; font-size:12.5px; color:#b9cbe4; }
.masthead__hotline strong{
  display:block; font-family:var(--font-head); font-size:17px; color:#fff;
}

.navtoggle{
  display:none; align-items:center; gap:9px;
  background:none; border:1px solid rgba(255,255,255,.4); border-radius:4px;
  color:#fff; font-family:var(--font-head); font-size:13px; font-weight:600;
  padding:9px 14px; cursor:pointer;
}
.navtoggle__bars{ position:relative; width:17px; height:2px; background:#fff; }
.navtoggle__bars::before,.navtoggle__bars::after{
  content:""; position:absolute; left:0; width:17px; height:2px; background:#fff;
}
.navtoggle__bars::before{ top:-5px; }
.navtoggle__bars::after{ top:5px; }

/* =========================================================
   MENU UTAMA
   ========================================================= */

.mainnav{ background:var(--navy-soft); position:sticky; top:0; z-index:60; }
.mainnav__list{
  display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0;
}
.mainnav__list > li > a{
  display:block; padding:13px 16px;
  font-family:var(--font-head); font-size:13.5px; font-weight:600;
  color:#e6eef8; text-decoration:none;
  border-bottom:3px solid transparent;
  transition:background-color .16s ease, border-color .16s ease;
}
.mainnav__list > li > a:hover{ background:rgba(0,0,0,.18); }
.mainnav__list > li > a[aria-current]{
  background:rgba(0,0,0,.22); border-bottom-color:var(--gold);
}
.mainnav__list .is-cta a{ background:var(--gold); color:var(--navy-dark); }
.mainnav__list .is-cta a:hover{ background:#dd9a0d; }

@media (max-width:960px){
  .navtoggle{ display:inline-flex; }
  .masthead__hotline{ display:none; }
  .mainnav{ position:static; }
  .mainnav__list{ display:none; flex-direction:column; }
  .mainnav__list.is-open{ display:flex; }
  .mainnav__list > li > a{ border-bottom:1px solid rgba(255,255,255,.12); }
}

/* =========================================================
   HERO CAROUSEL
   ========================================================= */

.hero{ position:relative; background:var(--navy-dark); }
.hero__viewport{ position:relative; }
.hero__slide{
  display:none; position:relative;
  min-height:400px;
}
.hero__slide.is-active{ display:block; }
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(14,34,66,.93) 0%, rgba(14,34,66,.78) 50%, rgba(14,34,66,.45) 100%);
}
.hero__content{
  position:relative; color:#fff;
  padding-block:70px; max-width:640px;
  min-height:400px; display:flex; flex-direction:column; justify-content:center;
}
.hero__tag{
  display:inline-block; align-self:flex-start;
  background:var(--cyan); color:#fff;
  font-family:var(--font-head); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:6px 13px; border-radius:3px; margin-bottom:16px;
}
.hero__content h1,.hero__content h2{
  font-size:clamp(25px, 3.4vw, 38px); margin-bottom:14px;
}
.hero__content p{ color:#d3e0f0; font-size:16px; margin-bottom:22px; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hero__dots{
  position:absolute; left:0; right:0; bottom:20px; z-index:5;
  display:flex; justify-content:center; gap:9px;
}
.hero__dots button{
  width:32px; height:4px; padding:0; border:0; border-radius:2px;
  background:rgba(255,255,255,.45); cursor:pointer;
}
.hero__dots button[aria-selected="true"]{ background:var(--gold); }

.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border:0; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.hero__arrow:hover{ background:rgba(255,255,255,.32); }
.hero__arrow--prev{ left:16px; }
.hero__arrow--next{ right:16px; }

@media (max-width:760px){
  .hero__arrow{ display:none; }
  .hero__content{ padding-block:52px; min-height:340px; }
  .hero__slide{ min-height:340px; }
}

/* =========================================================
   STATISTIK
   ========================================================= */

.stats{ background:var(--cyan); color:#fff; }
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:26px; gap:18px;
}
.stat{ text-align:center; padding-inline:12px; border-left:1px solid rgba(255,255,255,.28); }
.stat:first-child{ border-left:0; }
.stat__num{
  font-family:var(--font-head); font-size:31px; font-weight:700;
  line-height:1.1; margin:0 0 3px;
}
.stat__label{ margin:0; font-size:13px; color:#e4f4fd; line-height:1.4; }

@media (max-width:760px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ border-left:0; }
}

/* =========================================================
   KARTU BERITA
   ========================================================= */

.newsgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.newscard{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.newscard:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(22,50,92,.14); }
.newscard__media{ display:block; overflow:hidden; background:var(--mist); }
.newscard__media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .45s ease;
}
.newscard:hover .newscard__media img{ transform:scale(1.05); }
.newscard__body{ padding:16px 18px 20px; flex:1 1 auto; display:flex; flex-direction:column; }
.newscard__cat{
  display:inline-block; align-self:flex-start;
  background:var(--mist); color:var(--cyan-dark);
  font-family:var(--font-head); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  padding:4px 9px; border-radius:3px; margin-bottom:10px;
}
.newscard__title{
  font-size:16.5px; line-height:1.4; margin-bottom:9px;
}
.newscard__title a{ text-decoration:none; color:var(--navy); }
.newscard__title a:hover{ color:var(--cyan-dark); }
.newscard__excerpt{ font-size:14px; color:var(--ink-soft); margin-bottom:12px; }
.newscard__meta{
  margin:auto 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-soft);
  display:flex; gap:14px; flex-wrap:wrap;
}

@media (max-width:900px){ .newsgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .newsgrid{ grid-template-columns:1fr; } }

/* =========================================================
   KARTU PROGRAM BANTUAN
   ========================================================= */

.bansos{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.bansoscard{
  position:relative; border-radius:6px; overflow:hidden;
  min-height:250px; display:flex; align-items:flex-end;
  text-decoration:none; color:#fff;
}
.bansoscard img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.bansoscard:hover img{ transform:scale(1.06); }
.bansoscard__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,34,66,.94) 12%, rgba(14,34,66,.35) 70%, rgba(14,34,66,.15) 100%);
}
.bansoscard__body{ position:relative; padding:20px; }
.bansoscard__body h3{ font-size:18px; margin-bottom:7px; }
.bansoscard__body p{ font-size:13.5px; color:#d6e3f3; margin:0; }
.bansoscard__amount{
  display:inline-block; margin-top:12px;
  background:var(--gold); color:var(--navy-dark);
  font-family:var(--font-head); font-size:13px; font-weight:700;
  padding:5px 12px; border-radius:3px;
}

@media (max-width:900px){ .bansos{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .bansos{ grid-template-columns:1fr; } }

/* =========================================================
   GRID LAYANAN BERIKON
   ========================================================= */

.svcgroup{ margin-bottom:34px; }
.svcgroup:last-child{ margin-bottom:0; }
.svcgroup__title{
  font-family:var(--font-head); font-size:15px; font-weight:700;
  color:var(--navy); text-transform:uppercase; letter-spacing:.05em;
  margin:0 0 16px; padding-left:12px; border-left:4px solid var(--cyan);
}
.svcgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.svccard{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:20px 18px; text-decoration:none; display:block;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.svccard:hover{ border-color:var(--cyan); box-shadow:0 8px 20px rgba(22,50,92,.1); }
.svccard__icon{
  width:44px; height:44px; border-radius:50%;
  background:var(--mist); color:var(--cyan-dark);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:13px;
}
.svccard h3{ font-size:15px; color:var(--navy); margin-bottom:6px; }
.svccard p{ font-size:13px; color:var(--ink-soft); margin:0; }

@media (max-width:980px){ .svcgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svcgrid{ grid-template-columns:1fr; } }

/* =========================================================
   GALERI
   ========================================================= */

.gallerygrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallerygrid a{ display:block; border-radius:5px; overflow:hidden; background:var(--mist); }
.gallerygrid img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .4s ease, opacity .2s ease;
}
.gallerygrid a:hover img{ transform:scale(1.07); opacity:.9; }

@media (max-width:820px){ .gallerygrid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   AJAKAN DONASI
   ========================================================= */

.donateband{
  background:var(--navy); color:#fff;
  background-image:linear-gradient(120deg, var(--navy) 0%, var(--navy-soft) 100%);
}
.donateband__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap; padding-block:38px;
}
.donateband h2{ font-size:24px; margin-bottom:7px; }
.donateband p{ margin:0; color:#cfdcee; max-width:56ch; font-size:14.5px; }
.donateband__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================
   TAUTAN TERKAIT
   ========================================================= */

.linkgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.linkgrid a{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:16px; text-decoration:none; color:var(--navy);
  font-family:var(--font-head); font-size:13.5px; font-weight:600;
  transition:border-color .18s ease, background-color .18s ease;
}
.linkgrid a:hover{ border-color:var(--cyan); background:var(--mist); }
.linkgrid svg{ flex:0 0 auto; color:var(--cyan-dark); }

@media (max-width:900px){ .linkgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .linkgrid{ grid-template-columns:1fr; } }

/* =========================================================
   FOOTER
   ========================================================= */

.sitefooter{ background:var(--navy-dark); color:#a9bcd4; font-size:14px; }
.sitefooter__grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:32px; padding-block:44px 34px;
}
.sitefooter a{ color:#d6e2f0; text-decoration:none; }
.sitefooter a:hover{ color:var(--gold); }
.sitefooter__head{
  font-family:var(--font-head); font-size:14px; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:.07em;
  margin:0 0 15px; padding-bottom:9px; border-bottom:2px solid var(--cyan);
  display:inline-block;
}
.sitefooter__brand img{ width:52px; height:52px; margin-bottom:13px; }
.sitefooter__brand strong{
  display:block; font-family:var(--font-head); font-size:17px; color:#fff; margin-bottom:9px;
}
.sitefooter address{ font-style:normal; line-height:1.75; font-size:13.5px; }
.sitefooter__col ul{ list-style:none; margin:0; padding:0; }
.sitefooter__col li{ margin-bottom:8px; }

.footsocial{ list-style:none; display:flex; gap:9px; margin:0; padding:0; }
.footsocial a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:5px;
  background:rgba(255,255,255,.09); color:#d6e2f0;
  transition:background-color .18s ease;
}
.footsocial a:hover{ background:var(--cyan); color:#fff; }

.sitefooter__hours{ margin-top:14px; font-size:13px; line-height:1.7; }

.sitefooter__bottom{ border-top:1px solid rgba(255,255,255,.12); }
.sitefooter__bottom-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding-block:16px;
  font-size:12.5px; color:#8ea4c0;
}
.sitefooter__bottom-inner p{ margin:0; }
.sitefooter__bottom-inner ul{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }

@media (max-width:900px){
  .sitefooter__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .sitefooter__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   HALAMAN DALAM - KEPALA
   ========================================================= */

.pagehead{
  background:var(--navy);
  background-image:linear-gradient(115deg, var(--navy-dark) 0%, var(--navy-soft) 100%);
  color:#fff; padding-block:30px 34px;
}
.pagehead h1{ font-size:clamp(23px, 3vw, 32px); margin:0; }
.pagehead__lead{ margin:10px 0 0; color:#cbdaee; max-width:70ch; font-size:15px; }

.breadcrumb{ font-size:12.5px; margin-bottom:12px; }
.breadcrumb ol{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  margin:0; padding:0;
}
.breadcrumb li::after{ content:"›"; margin-left:7px; color:#7f97b8; }
.breadcrumb li:last-child::after{ content:none; }
.breadcrumb a{ color:#c3d3e8; text-decoration:none; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb [aria-current]{ color:var(--gold); }

/* =========================================================
   TATA LETAK ISI
   ========================================================= */

.layout{
  display:grid; grid-template-columns:minmax(0,7.4fr) minmax(0,3fr);
  gap:38px; align-items:start;
}
.layout--wide{ grid-template-columns:1fr; }

@media (max-width:900px){ .layout{ grid-template-columns:1fr; } }

.prose{ max-width:75ch; }
.prose > *:first-child{ margin-top:0; }
.prose p{ color:#3c4b5c; }
.prose h2{
  font-size:21px; color:var(--navy); margin:36px 0 13px;
  padding-left:12px; border-left:4px solid var(--cyan);
}
.prose h3{ font-size:16.5px; color:var(--navy); margin:26px 0 9px; }
.prose ul,.prose ol{ color:#3c4b5c; margin:0 0 1.1em; padding-left:22px; }
.prose li{ margin-bottom:7px; }
.prose a:not(.btn){ color:var(--cyan-dark); }
.prose figure{ margin:26px 0; }
.prose figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; }
.prose figcaption{
  margin-top:9px; font-size:12.5px; color:var(--ink-soft);
  padding-left:11px; border-left:3px solid var(--cyan);
}
.prose blockquote{
  margin:26px 0; padding:16px 20px;
  background:var(--mist); border-left:4px solid var(--cyan);
  border-radius:0 6px 6px 0; font-size:16px; color:var(--navy);
}
.prose blockquote cite{
  display:block; margin-top:9px; font-style:normal;
  font-family:var(--font-head); font-size:13px; color:var(--ink-soft);
}
.lead{ font-size:16.5px; color:var(--navy) !important; }

/* ---------- sidebar ---------- */

.sidebar{ display:grid; gap:18px; }
.sidebox{
  border:1px solid var(--line); border-radius:6px; background:#fff; padding:20px;
}
.sidebox--navy{ background:var(--navy); border-color:var(--navy); color:#fff; }
.sidebox--navy p{ color:#cbdaee; }
.sidebox--mist{ background:var(--mist); }
.sidebox__head{
  font-family:var(--font-head); font-size:13.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; margin:0 0 12px;
  color:inherit;
}
.sidebox p{ font-size:13.5px; color:var(--ink-soft); }
.sidebox ul{ list-style:none; margin:0; padding:0; font-size:14px; }
.sidebox li{ border-top:1px solid var(--line); }
.sidebox li:first-child{ border-top:0; }
.sidebox li a{
  display:block; padding:9px 0; text-decoration:none; color:var(--navy);
  transition:color .16s ease, padding-left .16s ease;
}
.sidebox li a:hover{ color:var(--cyan-dark); padding-left:5px; }
.sidebox .btn{ margin-top:8px; }

/* =========================================================
   TABEL FAKTA
   ========================================================= */

.facts{ margin:0; border-top:1px solid var(--line); }
.facts div{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:14px; padding:12px 0; border-bottom:1px solid var(--line);
}
.facts dt{ font-family:var(--font-head); font-size:13.5px; font-weight:600; color:var(--navy); }
.facts dd{ margin:0; font-size:14px; color:#3c4b5c; }

@media (max-width:560px){ .facts div{ grid-template-columns:1fr; gap:3px; } }

/* =========================================================
   DAFTAR DOKUMEN
   ========================================================= */

.docs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.docs li{ border-bottom:1px solid var(--line); }
.docs__row{
  display:grid; grid-template-columns:52px 1fr auto;
  align-items:center; gap:14px; padding:14px 4px;
}
.docs__ico{
  width:40px; height:40px; border-radius:6px;
  background:var(--mist); color:var(--cyan-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:11px; font-weight:700;
}
.docs__name{ font-size:14.5px; color:var(--navy); font-weight:600; }
.docs__meta{ font-size:12.5px; color:var(--ink-soft); }

@media (max-width:560px){
  .docs__row{ grid-template-columns:40px 1fr; }
  .docs__meta{ grid-column:2; }
}

/* =========================================================
   ARSIP BERITA
   ========================================================= */

.archive{ display:grid; gap:0; border-top:1px solid var(--line); }
.entry{
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:22px; align-items:start;
  padding-block:22px; border-bottom:1px solid var(--line);
}
.entry__media{ display:block; overflow:hidden; border-radius:6px; background:var(--mist); }
.entry__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .4s ease; }
.entry__media:hover img{ transform:scale(1.05); }
.entry__title{ font-size:18px; margin:8px 0 8px; }
.entry__title a{ text-decoration:none; color:var(--navy); }
.entry__title a:hover{ color:var(--cyan-dark); }
.entry__excerpt{ font-size:14px; color:var(--ink-soft); margin:0 0 10px; }
.entry__meta{ font-size:12.5px; color:var(--ink-soft); display:flex; gap:14px; flex-wrap:wrap; margin:0; }

@media (max-width:640px){ .entry{ grid-template-columns:1fr; } }

/* =========================================================
   ARTIKEL
   ========================================================= */

.article__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:13px; color:var(--ink-soft); margin-bottom:20px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.article__figure{ margin:0 0 26px; }
.article__figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; }
.article__figure figcaption{
  margin-top:9px; font-size:12.5px; color:var(--ink-soft);
  padding-left:11px; border-left:3px solid var(--cyan);
}
.article__foot{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.backlink{
  font-family:var(--font-head); font-size:13.5px; font-weight:600;
  color:var(--cyan-dark); text-decoration:none;
}
.backlink:hover{ text-decoration:underline; }

/* =========================================================
   KOTAK INFO / LANGKAH
   ========================================================= */

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tiles--2{ grid-template-columns:repeat(2,1fr); }
.tile{
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:20px;
}
.tile__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--cyan); color:#fff;
  font-family:var(--font-head); font-size:14px; font-weight:700;
  margin-bottom:11px;
}
.tile h3{ font-size:15.5px; color:var(--navy); margin-bottom:7px; }
.tile p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
.tile__role{
  display:block; font-family:var(--font-head); font-size:12px; font-weight:600;
  color:var(--cyan-dark); text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px;
}

@media (max-width:860px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tiles,.tiles--2{ grid-template-columns:1fr; } }

/* =========================================================
   FORMULIR
   ========================================================= */

.form{ display:grid; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:6px; }
.field label{ font-family:var(--font-head); font-size:13px; font-weight:600; color:var(--navy); }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:14.5px;
  padding:11px 13px; border:1px solid var(--line); border-radius:5px;
  background:#fff; color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px rgba(26,154,215,.16);
}
.field textarea{ min-height:140px; resize:vertical; }
.field__hint{ font-size:12.5px; color:var(--ink-soft); margin:0; }

@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }

/* =========================================================
   NOMINAL DONASI
   ========================================================= */

.amounts{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:16px; }
.amount{
  font-family:var(--font-head); font-size:14.5px; font-weight:600;
  padding:13px 8px; border:2px solid var(--line); border-radius:5px;
  background:#fff; color:var(--navy); cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.amount:hover{ border-color:var(--cyan); }
.amount.is-active{ border-color:var(--cyan); background:var(--cyan); color:#fff; }

@media (max-width:560px){ .amounts{ grid-template-columns:1fr 1fr; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}