/* =============================================================================
 *  kartu.css — SATU DESAIN KARTU UNTUK TIGA KELUARAN
 *
 *  PRATINJAU  ·  CETAK  ·  PDF   digambar dari markup yang SAMA PERSIS.
 *
 *  ---------------------------------------------------------------------------
 *  MENGAPA BERKAS INI ADA (dan mengapa v10-kartu.css / v11-kartu.css ditinggal)
 *  ---------------------------------------------------------------------------
 *  Sebelumnya pratinjau menggambar delapan kartu di dalam grid layar biasa,
 *  sementara pencetak menyusun ulang kartu ke dalam `.kartu-lembar` dengan
 *  aturan @media print tersendiri. Dua jalur, dua kumpulan aturan CSS — dan
 *  begitu salah satunya diubah, yang terlihat di layar berhenti mewakili yang
 *  keluar dari printer. Itu bukan bug yang bisa "diperbaiki"; itu akibat
 *  langsung dari punya dua sumber.
 *
 *  Di sini kartu SELALU berukuran milimeter sesungguhnya (85,6 x 54 mm).
 *  Pratinjau layar hanya MENGECILKAN lembar A4 utuh lewat transform: scale().
 *  Karena scale tidak mengubah tata letak, apa pun yang muat di pratinjau
 *  pasti muat di kertas — perbandingannya identik, bukan mirip.
 *
 *  ---------------------------------------------------------------------------
 *  SATUAN
 *  ---------------------------------------------------------------------------
 *  Seluruh ukuran di dalam kartu memakai `em` yang berakar pada --k-font,
 *  yang sendirinya dihitung dari lebar kartu. Akibatnya satu kartu bisa
 *  dirender pada ukuran berapa pun (mis. 3x untuk rasterisasi PDF) tanpa satu
 *  pun angka perlu disesuaikan.
 * ========================================================================== */

:root {
    /* Ukuran ISO/IEC 7810 ID-1. Diubah di satu tempat ini saja bila lembaga
       memakai pouch laminasi berukuran lain; mesin kapasitas A4 di
       kartu.js membaca nilai yang sama lewat getComputedStyle. */
    --k-lebar:  85.6mm;
    --k-tinggi: 54mm;

    /* Palet kartu — navy institusional + kuningan tua. Sengaja TIDAK memakai
       --c-primary-* : warna tema aplikasi boleh diganti pengguna kapan saja,
       sedangkan kartu fisik yang sudah dicetak tidak bisa ikut berubah. */
    --k-navy:    #101827;
    --k-navy-2:  #1B2B44;
    --k-navy-3:  #0A101B;
    --k-kuningan:#B0965F;
    --k-kuningan-m:#E0D2B0;
    --k-tinta:   #0B1220;
    --k-putih:   #FFFEFC;
}

/* ==========================================================================
   1. KARTU
   ========================================================================== */

.v12-kartu {
    /* --k-font mengikat SELURUH tipografi kartu ke lebarnya. 85,6mm / 26
       menghasilkan ~3,29mm (~9,3pt) sebagai basis — ukuran yang masih
       terbaca setelah dipotong dan dilaminasi. */
    --k-font: calc(var(--k-lebar) / 26);

    position: relative;
    width: var(--k-lebar);
    height: var(--k-tinggi);
    flex: none;
    display: grid;
    grid-template-columns: 1fr calc(var(--k-lebar) * 0.258);
    overflow: hidden;
    border-radius: calc(var(--k-lebar) * 0.035);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--k-font);
    line-height: 1.25;
    color: #fff;
    background: linear-gradient(152deg, var(--k-navy-2) 0%, var(--k-navy) 58%, var(--k-navy-3) 100%);
    box-sizing: border-box;
    /* Warna latar WAJIB ikut tercetak; tanpa ini sebagian peramban membuang
       seluruh gradien dan kartu keluar putih polos dengan teks putih. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.v12-kartu *, .v12-kartu *::before, .v12-kartu *::after { box-sizing: border-box; }

/* Pola geometris Islami tipis — ditanam sebagai data URI supaya kartu tidak
   pernah bergantung pada permintaan jaringan saat dialog cetak terbuka. */
.v12-kartu::before {
    content: '';
    position: absolute; inset: 0;
    opacity: .055; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='.9'%3E%3Cpath d='M20 3 L25 15 L37 20 L25 25 L20 37 L15 25 L3 20 L15 15 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: calc(var(--k-lebar) * 0.14);
}
/* Sapuan cahaya diagonal — memberi kedalaman tanpa mengganggu keterbacaan. */
.v12-kartu::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(118deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,0) 42%);
}

/* ------------------------------------------------------------- sisi kiri -- */
.v12-k-isi {
    position: relative; z-index: 2;
    padding: calc(var(--k-font) * 1.05) calc(var(--k-font) * 1.15);
    display: flex; flex-direction: column;
    min-width: 0;
}

.v12-k-kop { display: flex; align-items: center; gap: calc(var(--k-font) * .62); min-width: 0; }
.v12-k-logo {
    width:  calc(var(--k-font) * 3.35);
    height: calc(var(--k-font) * 3.35);
    flex: none;
    border-radius: calc(var(--k-font) * .78);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 .18mm rgba(224,210,176,.5);
}
.v12-k-logo img { width: 100%; height: 100%; object-fit: contain; padding: .35mm; display: block; }
.v12-k-logo span {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--k-font) * 1.55); font-weight: 800; color: var(--k-tinta);
    background: linear-gradient(140deg, #E8DCBE, #C2A360);
}
.v12-k-lembaga { min-width: 0; }
.v12-k-nama-lembaga {
    margin: 0;
    font-size: calc(var(--k-font) * .93);
    font-weight: 700; letter-spacing: .055em; text-transform: uppercase;
    line-height: 1.22; color: rgba(255,255,255,.95);
    /* Nama lembaga bisa sangat panjang. Dua baris, sisanya dipotong —
       yang dipotong di sini hanya identitas yang sudah diketahui pembaca. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.v12-k-sub {
    margin: .25mm 0 0;
    font-size: calc(var(--k-font) * .78); font-weight: 500; letter-spacing: .03em;
    color: var(--k-kuningan-m); opacity: .84;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.v12-k-garis {
    margin: calc(var(--k-font) * .72) 0 calc(var(--k-font) * .66);
    height: .38mm; border-radius: .38mm; flex: none;
    background: linear-gradient(90deg, var(--k-kuningan), var(--k-kuningan-m) 44%, rgba(224,210,176,0) 100%);
}

.v12-k-sosok { display: flex; gap: calc(var(--k-font) * .9); align-items: flex-start; min-width: 0; flex: 1; }
.v12-k-foto {
    width:  calc(var(--k-lebar) * 0.175);
    height: calc(var(--k-lebar) * 0.222);   /* rasio 3:4, standar pas foto */
    flex: none;
    border-radius: calc(var(--k-font) * .52);
    object-fit: cover; object-position: center top;
    background: #223049;
    border: .22mm solid rgba(224,210,176,.36);
}
.v12-k-foto-kosong {
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--k-font) * 2.1); color: rgba(255,255,255,.22);
}
.v12-k-teks { min-width: 0; flex: 1; padding-top: .2mm; }

.v12-k-nama {
    margin: 0 0 calc(var(--k-font) * .42);
    font-size: calc(var(--k-font) * 1.42);
    font-weight: 700; letter-spacing: -.012em; line-height: 1.16;
    color: #fff;
    /* Nama santri TIDAK boleh terpotong — kartu dengan nama separuh tidak ada
       gunanya. Ukurannya yang mengalah, lewat kelas yang dipasang penggambar
       sesuai panjang nama. Tiga baris adalah batas fisik kartu. */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.v12-k-nama.is-sm { font-size: calc(var(--k-font) * 1.2); }
.v12-k-nama.is-xs { font-size: calc(var(--k-font) * 1.02); letter-spacing: -.005em; }
.v12-k-nama.is-xxs{ font-size: calc(var(--k-font) * .9);  letter-spacing: 0; line-height: 1.2; }

.v12-k-rincian {
    margin: 0; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--k-font) * .2) calc(var(--k-font) * .55);
}
.v12-k-rincian dt {
    margin: 0; font-size: calc(var(--k-font) * .66);
    font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
    color: var(--k-kuningan);
}
.v12-k-rincian dd {
    margin: 0; font-size: calc(var(--k-font) * .92); font-weight: 600;
    color: rgba(255,255,255,.96);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.v12-k-kaki {
    display: flex; align-items: center; justify-content: space-between;
    gap: calc(var(--k-font) * .5);
    margin-top: calc(var(--k-font) * .55);
}
.v12-k-kaki-label {
    font-size: calc(var(--k-font) * .66); font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.v12-k-status {
    font-size: calc(var(--k-font) * .66); font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
    padding: calc(var(--k-font) * .16) calc(var(--k-font) * .55);
    border-radius: 99mm; white-space: nowrap;
}
.v12-k-status[data-s="aktif"]    { background: linear-gradient(135deg, #E0D2B0, #B0965F); color: var(--k-tinta); }
.v12-k-status[data-s="nonaktif"] { background: rgba(190,60,60,.28); color: #fff; box-shadow: inset 0 0 0 .18mm rgba(255,255,255,.28); }

/* ------------------------------------------------------- sisi kanan (QR) -- */
.v12-k-verifikasi {
    position: relative; z-index: 2;
    background: var(--k-putih); color: var(--k-tinta);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: calc(var(--k-font) * .3);
    padding: calc(var(--k-font) * .7) calc(var(--k-font) * .42);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.v12-k-qr {
    width:  calc(var(--k-lebar) * 0.196);
    height: calc(var(--k-lebar) * 0.196);
    display: flex; align-items: center; justify-content: center;
}
/* QR digambar sebagai <img> data-URI, bukan <canvas>: sebagian peramban
   mengosongkan canvas pada pratinjau cetak dan kartu keluar dengan kotak
   putih di tempat QR. image-rendering: pixelated menjaga modul QR tetap
   tajam saat <img> diperbesar ke ukuran milimeter. */
.v12-k-qr img {
    width: 100%; height: 100%; display: block;
    image-rendering: pixelated; image-rendering: -moz-crisp-edges;
}
.v12-k-qr-gagal {
    font-size: calc(var(--k-font) * .6); line-height: 1.3; text-align: center;
    color: #9F1239; font-weight: 600;
}
.v12-k-nis {
    font-size: calc(var(--k-font) * .8); font-weight: 800;
    letter-spacing: .05em; font-variant-numeric: tabular-nums;
    color: var(--k-tinta); text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v12-k-petunjuk {
    font-size: calc(var(--k-font) * .58); line-height: 1.2; text-align: center;
    color: rgba(11,18,32,.52); font-weight: 500;
}

/* ==========================================================================
   2. LEMBAR A4
   --------------------------------------------------------------------------
   Kolom & baris TIDAK ditulis di sini. Keduanya dihitung kartu.js dari
   ukuran kartu, margin, dan gap, lalu dipasang sebagai variabel inline pada
   elemen lembar. Itulah yang membuat kapasitas tidak pernah lagi ditebak.
   ========================================================================== */

.v12-lembar {
    --l-margin: 6mm;
    --l-gap:    3mm;
    --l-kolom:  2;
    position: relative;
    width:  210mm;
    height: 297mm;
    padding: var(--l-margin);
    background: #fff;
    display: grid;
    grid-template-columns: repeat(var(--l-kolom), var(--k-lebar));
    grid-auto-rows: var(--k-tinggi);
    gap: var(--l-gap);
    align-content: start;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.v12-lembar[data-orientasi="landscape"] { width: 297mm; height: 210mm; }

/* ------------------------------------------------------ garis bantu potong --
   Empat siku tipis di setiap sudut kartu, ditarik KELUAR kartu sehingga
   tintanya jatuh di area buangan, bukan di atas desain. Ini yang dipakai
   percetakan: memotong mengikuti perpanjangan garis, bukan mengira-ira tepi
   kartu yang berwarna gelap.                                                  */
.v12-potong .v12-sel { position: relative; }
.v12-sel::before, .v12-sel::after {
    content: '';
    position: absolute;
    pointer-events: none;
    /* Digambar dengan gradien, bukan border, supaya hanya siku-nya yang
       tampak — bukan kotak penuh yang akan terlihat seperti bingkai. */
    background-image:
        linear-gradient(to right,  var(--l-potong, #B6BCC6) 0 100%),
        linear-gradient(to bottom, var(--l-potong, #B6BCC6) 0 100%);
    background-repeat: no-repeat;
}
/* siku kiri-atas & kanan-atas */
.v12-sel::before {
    top: -1.6mm; left: -1.6mm; right: -1.6mm; height: calc(100% + 3.2mm);
    background-size: 1.3mm .1mm, .1mm 1.3mm;
    background-position: 0 1.6mm, 1.6mm 0;
}
/* siku kanan-bawah & kiri-bawah (elemen sama, posisi cermin) */
.v12-sel::after {
    top: -1.6mm; left: -1.6mm; right: -1.6mm; height: calc(100% + 3.2mm);
    background-size: 1.3mm .1mm, .1mm 1.3mm;
    background-position: 100% calc(100% - 1.6mm), calc(100% - 1.6mm) 100%;
}
.v12-lembar:not(.v12-potong) .v12-sel::before,
.v12-lembar:not(.v12-potong) .v12-sel::after { display: none; }

/* Keterangan kaki lembar — nomor halaman & cakupan. Ditaruh di dalam margin
   bawah, jadi tidak pernah merebut ruang kartu. */
.v12-lembar-kaki {
    position: absolute;
    left: var(--l-margin); right: var(--l-margin); bottom: 1.4mm;
    display: flex; justify-content: space-between; gap: 4mm;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 2.6mm; color: #94A3B8; letter-spacing: .02em;
}

/* ==========================================================================
   3. PRATINJAU DI LAYAR
   --------------------------------------------------------------------------
   Lembar tetap 210x297mm sesungguhnya; hanya dikecilkan dengan scale().
   Pembungkus diberi tinggi = tinggi asli x skala supaya ruang yang disediakan
   halaman sama dengan ruang yang benar-benar terpakai setelah pengecilan
   (transform tidak mengubah tata letak — tanpa ini akan muncul celah kosong
   sebesar sisa tinggi lembar).
   ========================================================================== */

.v12-pratinjau { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.v12-pratinjau-bingkai {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,39,.06), 0 18px 40px -22px rgba(16,24,39,.45);
    transition: box-shadow .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}
.v12-pratinjau-bingkai:hover { box-shadow: 0 1px 2px rgba(16,24,39,.07), 0 26px 56px -24px rgba(16,24,39,.55); }
.v12-pratinjau-bingkai > .v12-lembar { transform-origin: top left; }
.v12-pratinjau-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #64748B;
}
.v12-pratinjau-label i { color: var(--k-kuningan); }

/* Kartu tunggal di layar (modal "Kartu Satu Santri") — dinaikkan sedikit
   dengan scale supaya detailnya terbaca tanpa memperbesar markup. */
.v12-kartu-solo { display: flex; justify-content: center; padding: 6px 0; }
.v12-kartu-solo .v12-kartu {
    transform: scale(1.35); transform-origin: top center;
    box-shadow: 0 20px 44px -22px rgba(10,16,27,.75);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.v12-kartu-solo .v12-kartu:hover { transform: scale(1.38); }

/* Skeleton saat kartu sedang disiapkan. */
.v12-kartu-skeleton {
    width: var(--k-lebar); height: var(--k-tinggi);
    border-radius: calc(var(--k-lebar) * 0.035);
    background: linear-gradient(100deg, #E8EBF0 30%, #F4F6F9 46%, #E8EBF0 62%);
    background-size: 280% 100%;
    animation: v12-kilau 1.35s ease-in-out infinite;
}
@keyframes v12-kilau { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* ==========================================================================
   4. CETAK
   --------------------------------------------------------------------------
   Saat mencetak: sembunyikan SELURUH aplikasi, tampilkan hanya wadah cetak,
   dan batalkan pengecilan pratinjau (kartu harus kembali ke milimeter
   sesungguhnya, kalau tidak hasil potong tidak muat pouch laminasi).
   ========================================================================== */

@media print {
    @page { size: A4 portrait; margin: 0; }
    @page :first { margin: 0; }

    html, body {
        margin: 0 !important; padding: 0 !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }

    /* PERBAIKAN 24 Sep 2026 — LEMBAR KEDUA DAN SETERUSNYA TIDAK IKUT TERCETAK.

       Gejalanya: "Siapkan Kartu" menampilkan 3 lembar di pratinjau, tetapi
       dialog cetak hanya menghasilkan 1 halaman.

       Penyebabnya bukan di aturan kartu, melainkan di kerangka aplikasi.
       <body> memakai kelas utilitas "h-screen overflow-hidden flex flex-col"
       (tinggi persis satu layar, luapan dipotong, dan anaknya jadi flex item).
       Itu tepat untuk tampilan aplikasi, tapi saat mencetak, #v12-cetak menjadi
       satu-satunya flex item di dalam kolom setinggi satu layar yang luapannya
       dipotong — sehingga lembar yang tidak muat di layar pertama ikut terpotong
       dan tidak pernah sampai ke printer.

       Diverifikasi di Chrome: dengan kelas itu aktif, 3 lembar tercetak 1
       halaman; dengan pembatalan di bawah, 3 lembar tercetak 3 halaman.

       Pembatalan ini HANYA berlaku di dalam @media print, jadi tata letak
       aplikasi di layar tidak berubah sedikit pun. */
    html, body {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.v12-mode-cetak {
        display: block !important;   /* batalkan flex-col: lembar kembali mengalir normal */
    }

    body.v12-mode-cetak > *:not(#v12-cetak) { display: none !important; }

    /* PERBAIKAN 22 Sep 2026 — dibatasi ke body.v12-mode-cetak (sama seperti
       baris di atas). Sebelumnya baris ini "#v12-cetak { display:block }"
       tanpa syarat apa pun, jadi wadah ini bisa ikut tercetak kapan saja
       peramban mencetak halaman APA PUN (mis. laporan absensi lewat
       #print-container) — bukan cuma saat tombol Cetak Kartu ditekan,
       karena wadah ini tidak pernah dikosongkan setelah sesi cetak kartu
       terakhir. Dengan syarat ini, ia hanya tampil saat kartu.js benar-
       benar sedang dalam proses mencetak kartu. */
    body.v12-mode-cetak #v12-cetak {
        display: block !important; position: static !important;
        /* Jangan pernah jadi flex/grid item yang tingginya dibatasi induk. */
        height: auto !important; max-height: none !important; overflow: visible !important;
        flex: none !important; width: auto !important;
    }
    #v12-cetak .v12-pratinjau,
    #v12-cetak .v12-pratinjau-bingkai {
        display: block !important;
        gap: 0 !important; padding: 0 !important; margin: 0 !important;
        border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;
        transform: none !important; height: auto !important; width: auto !important;
    }
    #v12-cetak .v12-pratinjau-label { display: none !important; }

    /* Pembatalan scale: inilah satu-satunya perbedaan antara yang dilihat dan
       yang dicetak — dan perbedaannya justru mengembalikan ukuran sebenarnya. */
    #v12-cetak .v12-lembar {
        transform: none !important;
        margin: 0 !important;
        box-shadow: none !important; border-radius: 0 !important;
        break-after: page; page-break-after: always;
    }
    #v12-cetak .v12-lembar:last-child { break-after: auto; page-break-after: auto; }

    /* Satu kartu tidak boleh terbelah dua halaman. */
    .v12-sel, .v12-kartu { break-inside: avoid; page-break-inside: avoid; }

    /* Auto-fit v10 mengecilkan isi #print-container; kartu sudah berukuran
       pasti, jadi mesin itu harus diam di sini. */
    #v12-cetak { --v10-skala: 1 !important; zoom: 1 !important; }

    .v12-lembar-kaki { color: #9AA3AF !important; }
}

/* Wadah cetak disembunyikan sepenuhnya di layar — isinya hanya untuk printer
   dan untuk perenderan PDF di luar layar. */
#v12-cetak { display: none; }
body.v12-mode-cetak #v12-cetak { display: block; }

/* ==========================================================================
   5. PANEL KENDALI KARTU (di layar)
   ========================================================================== */

.v12-kendali {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.26);
    background:
        linear-gradient(140deg, rgba(43,108,181,.05), rgba(176,150,95,.05)),
        var(--v12-kartu-bg, #fff);
}
.dark .v12-kendali { --v12-kartu-bg: #141D2E; border-color: rgba(255,255,255,.09); }

.v12-kendali-grup { min-width: 0; }
.v12-kendali-grup > label {
    display: block; margin-bottom: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #64748B;
}
.v12-kendali-nilai {
    display: flex; align-items: baseline; gap: 6px;
    font-variant-numeric: tabular-nums;
}
.v12-kendali-nilai b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.v12-kendali-nilai small { font-size: 11px; color: #94A3B8; font-weight: 600; }

.v12-slider { width: 100%; accent-color: var(--k-kuningan); }

/* Ringkasan kapasitas — angka yang paling sering dilihat pengguna sebelum
   menekan Cetak, jadi diberi bobot visual paling besar di panel ini. */
.v12-kapasitas {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    padding: 12px 14px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(16,24,39,.94), rgba(27,43,68,.94));
    color: #fff;
}
.v12-kapasitas b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v12-kapasitas span { font-size: 11.5px; color: rgba(255,255,255,.72); }
.v12-kapasitas .v12-kap-pisah { width: 1px; height: 20px; background: rgba(255,255,255,.18); }

/* Tombol aksi kartu — micro-interaction: kilau menyapu saat disentuh. */
.v12-aksi { display: flex; flex-wrap: wrap; gap: 9px; }
.v12-btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 11px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
    border: 1px solid rgba(148,163,184,.3);
    background: #fff; color: #334155;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, border-color .24s ease;
}
.dark .v12-btn { background: #1B2B44; color: #E2E8F0; border-color: rgba(255,255,255,.12); }
.v12-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .62s cubic-bezier(.22,1,.36,1);
}
.v12-btn:hover { transform: translateY(-1.5px); box-shadow: 0 10px 22px -12px rgba(16,24,39,.5); }
.v12-btn:hover::after { transform: translateX(120%); }
.v12-btn:active { transform: translateY(0) scale(.985); }
.v12-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.v12-btn-utama {
    background: linear-gradient(135deg, var(--k-navy-2), var(--k-navy));
    color: #fff; border-color: transparent;
    box-shadow: 0 8px 20px -12px rgba(16,24,39,.8);
}
.v12-btn-emas {
    background: linear-gradient(135deg, #C9B385, var(--k-kuningan));
    color: var(--k-tinta); border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .v12-btn, .v12-btn::after, .v12-pratinjau-bingkai, .v12-kartu-solo .v12-kartu { transition: none; }
    .v12-kartu-skeleton { animation: none; }
}

/* Pilihan "Yang Terlihat Saat QR Dipindai" di menu Kartu. */
.v12-akses-opsi {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: 12px; cursor: pointer;
    border: 1px solid rgb(148 163 184 / .35); background: rgb(255 255 255 / .6); transition: border-color .2s ease, background-color .2s ease;
}
.dark .v12-akses-opsi { background: rgb(15 23 42 / .45); border-color: rgb(148 163 184 / .22); }
.v12-akses-opsi input { margin-top: 3px; accent-color: #2B6CB5; }
.v12-akses-opsi b { display: block; font-size: 13px; }
.v12-akses-opsi small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: #64748B; }
.v12-akses-opsi.is-pilih { border-color: #2B6CB5; background: rgb(43 108 181 / .07); }
.dark .v12-akses-opsi.is-pilih { border-color: #93C5FD; background: rgb(147 197 253 / .1); }
.v12-akses-opsi:focus-within { outline: 2px solid #2B6CB5; outline-offset: 2px; }