/* ==========================================================================
   Program Sedekah 1% — modal beranda, baris checkout, halaman dokumentasi
   Berkas terpisah; site.css tidak diubah.
   ========================================================================== */

/* ---------------- Baris sedekah di checkout ---------------- */
.sedekah-box{
  margin-top:1rem; padding:.85rem 1rem; border-radius:10px;
  background:linear-gradient(135deg, #f2f7f2, #eef4ee);
  border:1px solid #d7e4d9;
}
.sedekah-box-baris{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.sedekah-box-label{ display:flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600; color:#2c4f36; }
.sedekah-box-ikon{ font-size:1rem; }
.sedekah-box-nilai{ font-family:var(--font-mono,ui-monospace,monospace); font-weight:700; color:#2c4f36; white-space:nowrap; }
.sedekah-box-ket{ margin:.4rem 0 0; font-size:.74rem; line-height:1.45; color:#5c6b5e; }

/* ---------------- Modal sedekah ---------------- */
.sdk-overlay{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(10,20,14,.62); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:1.5rem 1rem; overflow-y:auto;
}
.sdk-overlay.tampil{ display:flex; }

.sdk-modal{
  position:relative; width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:18px; box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  animation:sdkMasuk .3s cubic-bezier(.22,.7,.3,1);
}
@keyframes sdkMasuk{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }

.sdk-tutup{
  position:absolute; top:.7rem; right:.85rem; z-index:2;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.22); color:#fff; font-size:1.5rem; line-height:1;
  display:grid; place-items:center; transition:background .2s;
}
.sdk-tutup:hover{ background:rgba(255,255,255,.38); }

/* Bagian atas: angka */
.sdk-atas{
  background:radial-gradient(120% 110% at 50% -20%, #2f5a3d, #16301f);
  color:#fff; padding:2rem 1.6rem 1.7rem; text-align:center;
  border-radius:18px 18px 0 0;
}
.sdk-eyebrow{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  color:var(--gold-500,#d4af5f); margin-bottom:.5rem;
}
.sdk-atas h3{
  margin:0 0 .7rem; font-family:var(--font-display,Georgia,serif);
  font-size:1.1rem; font-weight:600; color:rgba(255,255,255,.9);
}
.sdk-angka{
  font-family:var(--font-display,Georgia,serif); font-weight:700;
  font-size:clamp(2.1rem,7vw,2.9rem); line-height:1.05; letter-spacing:-.01em;
  background:linear-gradient(175deg,#fbeec6,#e3c377 45%,#b78f3f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.sdk-mini{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
  margin:1.3rem 0 1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.14);
}
.sdk-mini div{ display:flex; flex-direction:column; gap:.15rem; }
.sdk-mini span{ font-weight:700; font-size:.92rem; color:#fff; font-variant-numeric:tabular-nums; }
.sdk-mini small{ font-size:.66rem; color:rgba(255,255,255,.62); letter-spacing:.02em; }
.sdk-ket{ margin:0; font-size:.78rem; line-height:1.55; color:rgba(255,255,255,.76); }
.sdk-ket strong{ color:var(--gold-500,#d4af5f); }

/* Bagian bawah: artikel */
.sdk-bawah{ padding:1.3rem 1.4rem 1.5rem; }
.sdk-bawah-judul{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:#878a99; margin-bottom:.85rem;
}
.sdk-artikel-list{ display:flex; flex-direction:column; gap:.7rem; }
.sdk-artikel{
  display:flex; gap:.85rem; align-items:flex-start; text-decoration:none;
  padding:.7rem; border:1px solid #ece6da; border-radius:11px; background:#fdfcf9;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.sdk-artikel:hover{ border-color:#2c4f36; transform:translateY(-2px); box-shadow:0 6px 16px -6px rgba(0,0,0,.2); }
.sdk-artikel img{ width:62px; height:62px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.sdk-noimg{
  width:62px; height:62px; border-radius:8px; flex-shrink:0; display:grid; place-items:center;
  background:#f1f5f1; font-size:1.5rem;
}
.sdk-artikel strong{ display:block; font-size:.88rem; color:#212529; line-height:1.35; margin-bottom:.2rem; }
.sdk-artikel p{
  margin:0 0 .25rem; font-size:.76rem; line-height:1.45; color:#6b7280;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sdk-artikel small{ font-size:.68rem; color:#a0a6ad; }
.sdk-kosong{ font-size:.83rem; color:#878a99; text-align:center; padding:1.4rem 0; }

@media (max-width:520px){
  .sdk-overlay{ padding:0; align-items:flex-end; }
  .sdk-modal{ max-width:100%; max-height:92vh; border-radius:18px 18px 0 0; }
  .sdk-atas{ padding:1.7rem 1.2rem 1.4rem; }
  .sdk-mini span{ font-size:.82rem; }
  .sdk-bawah{ padding:1.1rem 1.1rem 1.6rem; }
}

/* ---------------- Halaman dokumentasi ---------------- */
.sedekah-artikel-head{ margin:1.5rem 0 1.2rem; }
.sedekah-artikel-head h1{
  font-family:var(--font-display,Georgia,serif); font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:1.25; margin:.4rem 0 .6rem;
}
.sedekah-artikel-meta{ font-size:.82rem; color:#6b7280; display:flex; gap:.5rem; flex-wrap:wrap; }
.sedekah-artikel-gambar{ width:100%; border-radius:14px; margin-bottom:1.4rem; }
.sedekah-artikel-ringkasan{
  font-size:1rem; line-height:1.65; color:#41485a; font-style:italic;
  border-left:3px solid var(--gold-500,#d4af5f); padding-left:1rem; margin-bottom:1.4rem;
}
.sedekah-artikel-isi{ font-size:.95rem; line-height:1.75; color:#333; }
.sedekah-artikel-isi img{ max-width:100%; height:auto; border-radius:10px; }
.sedekah-artikel-isi p{ margin:0 0 1rem; }

.sedekah-lainnya{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid #ece6da; }
.sedekah-lainnya h2{ font-size:1.05rem; margin:0 0 1rem; }
.sedekah-lainnya-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; }
.sedekah-lainnya-item{
  display:flex; gap:.7rem; align-items:center; text-decoration:none;
  border:1px solid #ece6da; border-radius:10px; padding:.6rem; background:#fff;
  transition:border-color .2s;
}
.sedekah-lainnya-item:hover{ border-color:#2c4f36; }
.sedekah-lainnya-item img{ width:52px; height:52px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.sedekah-lainnya-item strong{ display:block; font-size:.85rem; color:#212529; line-height:1.35; }
.sedekah-lainnya-item span{ font-size:.72rem; color:#a0a6ad; }