/* ============================================================================
   aj-paymethods.css — bola-bola logo di payment-methods.html.

   Dulu tiap metode satu gambar PNG utuh (qris.png, e-wallet.png, va.png,
   cc.png): bola putih berisi logo di atas latar abu-abu yang ikut tertanam di
   gambarnya, sehingga di mode gelap tampil sebagai lempeng terang. Sekarang
   tiap bola dibangun sendiri dengan HTML/CSS, dan logonya di
   assets/images/aj/pay/ — berkas yang sama dengan orbit di beranda, ditambah
   bca.svg, bni.svg & bri-horizontal.svg (Wikimedia Commons; bri.svg milik
   orbit versi tegak "BANK BRI", gambar lamanya versi mendatar),
   shopeepay-full.svg (shopeepay.co.id; shopeepay.svg milik orbit cuma ikon
   tas Shopee), danamon.svg (danamon.co.id, tanpa baris "A member of MUFG"),
   maybank.svg (maybank.com), serta muamalat.png & bnc.png (logo resmi
   bankmuamalat.co.id & bankneocommerce.co.id lewat Wikimedia Commons; dua
   bank ini tidak punya SVG yang bisa diambil).

   Isi tiap kartu mengikuti kanal di GET /wallet/payment-channels. QRIS dan
   kartu masih persis gambar lamanya: pusat (--x, --y) dan diameter (--d) tiap
   bola diukur dari PNG-nya, dalam persen, dan wadahnya (.ajp-set) memakai
   rasio gambar itu lewat --ratio. E-wallet dan VA meneruskan zig-zag yang
   sama dengan isi baru: e-wallet tinggal tiga bola dalam wadah yang lebih
   pendek, VA sebelas bola dalam wadah yang lebih panjang dengan bola sedikit lebih
   kecil. Kotak logonya (--w, --h) dalam persen diameter bola; logonya
   dimuatkan ke kotak itu tanpa gepeng (object-fit: contain).

   Bolanya tetap putih di kedua tema, sama dengan keping orbit beranda: logo
   metode pembayaran dirancang untuk latar terang.
   ========================================================================== */

/* Kartu tiap metode. aj-dark-theme.css memetakan .bg-secondary ke warna kanvas
   — sama persis dengan latar halaman — jadi di mode gelap keempat kartunya
   lenyap. Di sini kartunya naik ke warna permukaan dengan garis tipis dan wash
   biru yang sama dengan kartu fitur beranda (aj-polish.css, bagian 5).
   Selektornya tiga kelas supaya menang atas !important milik .bg-secondary. */
.uc-dark .ajp-method.bg-secondary {
    background-color: rgb(var(--color-surface)) !important;
    background-image: linear-gradient(180deg, rgba(120, 170, 255, 0.07) 0%, rgba(120, 170, 255, 0) 55%);
    box-shadow: inset 0 0 0 1px var(--aj-line);
}

.ajp-set {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ratio);
    container-type: inline-size;
}

.ajp-ball {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(var(--d) * 1%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
    transform: translate(-50%, -50%);
    /* Bayangan gambar lamanya: cincin ~10% hitam tepat di tepi bola, memudar
       sejauh ~7% diameter dan sedikit jatuh ke bawah. Satuannya cqi milik
       .ajp-set, jadi ikut mengecil bersama bolanya. */
    box-shadow: 0 calc(var(--d) * 0.018cqi) calc(var(--d) * 0.075cqi) rgba(0, 0, 0, 0.16);
}

.uc-dark .ajp-ball {
    box-shadow: 0 calc(var(--d) * 0.018cqi) calc(var(--d) * 0.075cqi) rgba(0, 0, 0, 0.55);
}

.ajp-logo {
    position: absolute;
    inset: 0;
    width: calc(var(--w) * 1%);
    height: calc(var(--h) * 1%);
    margin: auto;
    object-fit: contain;
}