/* Punyaa Mitra — tambahan gaya khusus portal mitra */
:root { --aksen-2: #4f46e5; --ungu-tua: #6d28d9; }
.stat.utama { background: linear-gradient(135deg, var(--ungu-tua), var(--aksen-2)); }
.stat.utama b { color: #fff; }
.link-putih, .link-putih:hover { color: #fff; font-weight: 700; }
.kode-besar { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; background: var(--primary-50); color: var(--primary); padding: 2px 10px; border-radius: 8px; font-size: .85em; }
.kode, input.kode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.kode-input { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; }
.b-muted { background: var(--surface-3); color: var(--muted); }
.hide-sm { }

/* salin tautan */
.salin-baris { display: flex; gap: 8px; align-items: center; }
.salin-baris input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.bagikan { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: linear-gradient(180deg, var(--primary-50), var(--surface) 70%); }
.tautan-utama { display: flex; gap: 18px; align-items: center; }
.qr-mini { width: 132px; flex: 0 0 132px; background: #fff; border-radius: 12px; padding: 6px; border: 1px solid var(--border); }
.qr-mini svg { display: block; }

/* kartu produk */
.produk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.produk-grid:has(> :only-child) { grid-template-columns: minmax(260px, 420px); }
.produk-kartu { --warna: var(--primary); display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--warna); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); color: var(--text); }
.produk-kartu p { color: var(--text-2); margin: 0; flex: 1; font-size: 13.5px; }
.produk-kartu.pilih { text-decoration: none; transition: transform .15s, box-shadow .15s; }
.produk-kartu.pilih:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.pk-head { display: flex; gap: 12px; align-items: center; }
.pk-head > i { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; background: var(--warna); }
.pk-head > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .pk-head b { font-size: 16px; }
.pk-ikon { display: inline-flex; width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; background: var(--warna, var(--ungu-tua)); color: #fff; font-size: 13px; vertical-align: middle; flex: 0 0 auto; }
.pk-ikon.kecil { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.produk-tautan { border-left: 4px solid var(--warna); }
.produk-tautan .card-head h3 { display: flex; align-items: center; gap: 10px; }
.produk-tautan textarea { font-size: 13px; }

/* formulir daftarkan */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-grid .field.penuh { grid-column: 1 / -1; }
.hasil-daftar .mini-list b { word-break: break-all; }

/* hero publik */
.komisi-kartu { width: 100%; max-width: 360px; background: linear-gradient(160deg, var(--ungu-tua), var(--aksen-2)); color: #fff; border-radius: 24px; padding: 24px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; }
.komisi-kartu small { opacity: .85; font-weight: 600; } .komisi-kartu > b { font-size: 34px; letter-spacing: -.02em; margin-bottom: 6px; }
.kk-baris { display: flex; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.kk-baris i { width: 16px; opacity: .9; } .kk-baris em { font-style: normal; font-weight: 800; color: #fde68a; white-space: nowrap; }
.kk-cair { margin-top: 4px; text-align: center; background: #fff; color: var(--ungu-tua); border-radius: 12px; padding: 10px; font-weight: 800; }
.hitung { max-width: 820px; margin: 0 auto; }
.hitung-hasil { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 10px; }
.hitung-hasil > div { background: var(--primary-50); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; }
.hitung-hasil small { color: var(--muted); font-weight: 600; } .hitung-hasil b { font-size: 28px; color: var(--primary); letter-spacing: -.02em; }
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details, details.syarat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.faq summary, details.syarat summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 10px 0 0; color: var(--text-2); }
details.syarat { margin-bottom: 12px; padding: 10px 14px; } details.syarat .rekening { margin: 10px 0 0; font-weight: 500; }
.ref-hero { max-width: 760px; margin: 0 auto; padding: 40px 24px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ref-hero h1 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -.02em; }
.avatar.lg { width: 64px; height: 64px; font-size: 26px; }
.amount-big { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 12px; }
.cair-kartu .card-head h3 { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tautan-utama { flex-direction: column; align-items: stretch; }
  .qr-mini { align-self: center; }
  .hitung-hasil { grid-template-columns: 1fr; }
  .salin-baris { flex-wrap: wrap; } .salin-baris input { flex-basis: 100%; }
  .hide-sm { display: none; }
}