/* Komponen harga bersama (kartu jenis harga + kartu paket prangko) — dipakai landing (web/index.html).
   Gaya sama dengan halaman Prangko (web/user/index.html) yang masih memakai salinan lama di <style>-nya;
   pindahkan halaman itu ke file ini bila sesi pengubahnya sudah selesai. */
.pl-card { border-radius: 1.8rem; background: var(--color-base-100); border: 2px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
.pl-best { border: 2px solid #e0457b; box-shadow: 0 22px 44px -28px #e0457b; }
.pl-sticker { position: absolute; z-index: 10; top: -.85rem; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap;
  padding: .3rem .8rem; border-radius: 999px; background: #d4ff3f; color: #160a1d; border: 2px solid #160a1d; box-shadow: 3px 3px 0 #160a1d;
  font-weight: 800; font-size: .75rem; letter-spacing: .04em; }
.pl-per { background: color-mix(in oklab, #e0457b 12%, var(--color-base-100)); color: var(--color-base-content); border: 1px solid color-mix(in oklab, #e0457b 30%, transparent); }
.pl-per b { color: #e0457b; }
[data-theme="galeri-malam"] .pl-per b { color: #ff7aa8; }
.tier-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 10px 22px -12px currentColor; }
.tier-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tier-ok { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; flex: none; background: color-mix(in oklab, #16a34a 18%, transparent); color: #16a34a; font-size: 11px; font-weight: 900; }
.pkg-bonus { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap;
  background: color-mix(in oklab, #e0457b 14%, transparent); color: #c2185b; }
[data-theme$="malam"] .pkg-bonus { color: #ff9ec4; }
.pkg-bonus-off { background: color-mix(in oklab, var(--color-base-content) 7%, transparent); color: inherit; opacity: .75; }
a.pkg-link { display: block; height: 100%; color: inherit; text-decoration: none; }
a.pkg-link:hover .pl-card, a.pkg-link:focus-visible .pl-card { border-color: #e0457b; } /* PANDUAN-UI §1 */
[data-theme="galeri-malam"] a.pkg-link:hover .pl-card, [data-theme="galeri-malam"] a.pkg-link:focus-visible .pl-card { border-color: #ff5c97; }
/* mode terang: putih hangat agak transparan (tidak silau, PANDUAN-UI §2) */
[data-theme="galeri"] .pl-card { background: rgba(255, 251, 247, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-color: rgba(224, 69, 123, .14); box-shadow: 0 18px 40px -30px rgba(120, 50, 60, .45); }
[data-theme="galeri"] .pl-best { border-color: #e0457b; }
[data-theme="galeri"] .pl-per { background: rgba(255, 233, 241, .9); }
.pkg-card:has(input:checked) .pl-card { border: 2px solid #e0457b; box-shadow: 0 22px 44px -28px #e0457b; }