body { font-family: system-ui, Arial, sans-serif; margin:0; background:#f6f7fb; color:#111; }
.wrap { max-width: 980px; margin: 0 auto; padding: 18px; }
.card { background:#fff; border:1px solid #e7e7ef; border-radius:14px; padding:16px; box-shadow: 0 3px 12px rgba(0,0,0,.04); margin-bottom:14px; }
.header .judul{ margin: 6px 0 0; font-size: 26px; }
.lembaga{ color:#444; margin-top:4px; }
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; background:#eef2ff; border:1px solid #e2e8ff; font-size:13px; }
.muted{ color:#666; font-size: 13px; }
.note{ font-size: 13px; color:#555; line-height:1.45; }
.hr{ height:1px; background:#eee; margin:14px 0; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width: 760px){ .grid2{ grid-template-columns: 1fr; } }

.progress{ height: 12px; background:#eef0f6; border-radius:999px; overflow:hidden; }
.progress > div{ height:100%; width:0%; background:#3b82f6; transition: width .6s; }

.baris{ display:flex; justify-content:space-between; gap:10px; margin:8px 0; }
.pill{ display:inline-block; padding:6px 10px; border:1px solid #e7e7ef; border-radius:999px; font-size:13px; background:#fafafa; }

.nominal-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px; }
@media (max-width: 650px){ .nominal-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.nominal{ border:1px solid #e7e7ef; border-radius:12px; padding:12px; cursor:pointer; user-select:none; }
.nominal.aktif{ border-color:#3b82f6; outline: 3px solid rgba(59,130,246,.15); }
.nominal b{ font-size:16px; display:block; }
.nominal span{ font-size:13px; color:#666; }

input[type="number"], input[type="text"], select{
  width:100%; padding:10px 12px; border:1px solid #d7d7e2; border-radius:10px; font-size:15px; box-sizing:border-box;
  margin-top:6px;
}
select{ width:auto; margin-top:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; border:1px solid #d7d7e2;
  background:#111; color:#fff; cursor:pointer; text-decoration:none;
}
.btn.secondary{ background:#fff; color:#111; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn2{
  font-size: 13px; padding:8px 10px; border-radius:10px; border:1px solid #d7d7e2; background:#fff; cursor:pointer; text-decoration:none; color:#111;
  display:inline-flex; align-items:center; justify-content:center;
}

.step{ display:none; }
.step.aktif{ display:block; }

.subcard{ background:#fafafa; border:1px solid #e7e7ef; border-radius:14px; padding:12px; }

.notif{
  position: sticky; top: 10px; z-index: 20;
  background:#111; color:#fff; padding:10px 12px; border-radius:12px;
  opacity:0; transform: translateY(-6px);
  transition: opacity .6s, transform .6s;
  margin-bottom:14px;
}
.notif.tampil{ opacity:1; transform: translateY(0); }

.footer{ text-align:center; margin-top: 20px; }

/* =======================
   TAB DONASI / LAPORAN
======================= */
/* =======================
   TAB DONASI / LAPORAN
======================= */
.tabs {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}

.tab {
  flex: 1;
  padding: 12px;
  border-radius: 999px; /* biar mirip badge */
  border: 1px solid #e7e7ef;
  background: #f5f5f5;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.tab:hover {
  background: #e9e9e9;
}

.tab.aktif {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}




.kontak-wa{
  display:flex;
  align-items:center;
  gap:14px;

  width:100%;
  box-sizing:border-box;

  background:#fff;
  border:2px solid #4ade80;
  border-radius:18px;
  padding:14px 16px;
  text-decoration:none;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}



.wa-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#22c55e;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.wa-icon img{
  width:32px;
  height:32px;
  display:block;
}


.wa-text{
  flex:1;
  min-width:0;               /* PENTING: biar flex boleh mengecil */
}

.wa-title{
  font-weight:600;
  font-size:16px;
  color:#111;
}

.wa-number{
  font-weight:700;
  font-size:18px;
  color:#16a34a;
  margin-top:2px;

  word-break: break-word;    /* kalau kepanjangan, pecah baris */
}

.wa-desc{
  font-size:13px;
  color:#666;
  margin-top:2px;
  word-break: break-word;
}

.wa-arrow{
  font-size:26px;
  color:#666;
  flex-shrink:0;
}

.judul-kontak{
  font-weight:700;
  font-size:16px;
  margin:18px 0 10px;
  text-align:center;
  color:#111;
}

.kontak-wa-wrap{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}


@media (max-width: 700px){
  .kontak-wa-wrap{
    grid-template-columns: 1fr;
  }
}

.kode-unik-besar{
  font-size:22px;
  font-weight:800;
  color:#111;
}
.total-besar{
  font-size:22px;
  font-weight:900;
  color:#16a34a;
}

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:999;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.modal.show{ display:flex; }
.modal-box{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}