/* Learning With Badri — paket & pembayaran Premium (dipakai di Beranda dan halaman Premium) */
.pm { display: grid; gap: var(--space-8); }
.pm-status { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pm-perks { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .pm-perks { grid-template-columns: 1fr 1fr; } }
.pm-perks li { display: flex; gap: var(--space-2); align-items: flex-start; }
.pm-plans { display: grid; gap: var(--gap-card-grid); }
@media (min-width: 768px) { .pm-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pm-plan { display: grid; gap: var(--space-3); align-content: start; position: relative; }
.pm-plan.is-best { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.pm-tag { position: absolute; top: calc(-1 * var(--space-3)); right: var(--space-4); }
.pm-price { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: 1; }
.pm-per { color: var(--color-text-tertiary); font-size: var(--text-sm); }
.pm-save { color: var(--color-success); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.pm-pay { display: grid; gap: var(--space-4); }
.pm-pay-grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .pm-pay-grid { grid-template-columns: 320px 1fr; align-items: start; } }
.pm-qris-col { max-width: 320px; width: 100%; }
.pm-qris { display: block; width: 100%; border-radius: var(--radius-lg); background: #fff; padding: var(--space-3); }
.pm-qris img { width: 100%; height: auto; display: block; }
.pm-qris-missing { padding: var(--space-6); text-align: center; color: #111; font-size: var(--text-sm); }
.pm-steps { display: grid; gap: var(--space-3); counter-reset: s; }
.pm-steps li { display: grid; gap: var(--space-1); padding-left: var(--space-8); position: relative; }
.pm-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pm-amount { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-bold); }
.pm-code { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: 0.1em; }
.btn--wa { background: #25d366; color: #fff; border-color: #25d366; }
.btn--wa:hover { filter: brightness(1.05); }
.pm-orders { display: grid; gap: var(--space-2); }
.pm-order { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); }