*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(135deg,#b5e3f5,#9ce3ff);margin:0}
a{color:#0b69ff;text-decoration:none}
header{background:#0078d7;color:#fff;text-align:center;padding:14px}
.container{max-width:1100px;margin:16px auto;padding:0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.12);padding:12px;text-align:center}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:none;background:#00a884;color:#fff;font-weight:600;cursor:pointer}
.btn.secondary{background:#667085}
.btn.warn{background:#ff6b6b}
.avatar{width:88px;height:88px;border-radius:14px;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.headerbar{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.pill{background:#ffffffcc;padding:6px 10px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.leader{background:#fff;padding:12px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.12);margin-top:20px}
.price{font-weight:700;margin:6px 0}
.badge{display:inline-block;background:#eef1ff;color:#2536eb;border:1px solid #cdd4ff;border-radius:8px;padding:3px 8px;font-size:12px}
.btn {
  background: #ff4b4b;       /* warna merah tua luar */
  border: none;
  border-radius: 30px;
  padding: 5px;
  display: inline-block;
}

.btn .pill {
  background: #ffdada;       /* merah muda bagian dalam */
  color: #000;               /* teks hitam */
  border-radius: 25px;
  padding: 6px 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.btn .pill img,
.btn .pill svg {
  width: 20px;
  height: 20px;
}