/* =====================================================
   kartu.css - keluarga kartu produk/video dari purwarupa app yang disepakati (FINAL v15 2026-10-17,
   https://claude.ai/artifact/X3pKwMEbnxujTzyp8AYoTV). Nilai disalin dari purwarupa (POLES 2-7 + final inspection).
   Dipakai halaman Video & bagian Beranda (2026-10-21: penyelarasan ke purwarupa setelah pemilik menemukan
   tampilan melenceng). Gambar asli (sampul video) menggantikan kotak warna contoh purwarupa.
   ===================================================== */
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }

/* kartu: bentuk sama dengan kartu talent, bingkai ungu (pelangi khusus talent) */
.pcard { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-width: 0; text-align: left; padding: 4px; border-radius: 12px; /* 2026-10-21 pemilik: lebih kotak (purwarupa 18px) */
  border: 1.5px solid transparent; cursor: pointer; font: inherit; color: inherit;
  background: linear-gradient(160deg, #1F1740, #120C26) padding-box, linear-gradient(145deg, #a98de0, #5e3fa3) border-box;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: transform .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pcard:active { transform: scale(.97); }
.pcard:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
html[data-tema="terang"] .pcard { background: linear-gradient(160deg, #FFFFFF, #F1EAFD) padding-box, linear-gradient(145deg, #c9b3f5, #9368d2) border-box;
  box-shadow: 0 4px 0 rgba(126,92,172,.14), 0 8px 14px rgba(91,58,136,.13); }
html[data-tema="terang"] .pcard:focus-visible { outline-color: #6744a6; }

.pthumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; text-align: center;
  background: radial-gradient(70% 55% at 65% 35%, rgba(192,38,211,.6), transparent 70%), linear-gradient(160deg, #2d1060, #0d0d1e); }
.pthumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plabel { position: relative; padding: 0 6px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 14px; /* 2026-11-01: tebal, huruf judul baru */ line-height: 1.1; letter-spacing: .04em; color: rgba(255,255,255,.9);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
html[data-tema="terang"] .plabel { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: .2px; }
.p-tag, .p-dur { position: absolute; z-index: 2; height: 17px; padding: 0 6px; border-radius: 6px; display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 800; letter-spacing: .03em; color: #fff; background: rgba(20,12,40,.72); }
.p-tag { top: 6px; left: 6px; }
.p-dur { top: 6px; right: 6px; font-weight: 700; }

.tmeta { display: block; padding: 7px 3px 2px; min-width: 0; }
.tname { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 12px; font-weight: 800; color: #fff; }
.tname > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; overflow-wrap: anywhere; }
.tstatus { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: #b8b8cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tstatus.paid { color: #00d4aa; }
.pprice { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 800; color: #67e8f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pprice s { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; color: #8a8aa6; }
html[data-tema="terang"] .tname { color: #302343; }
html[data-tema="terang"] .tstatus { color: #4A4562; }
html[data-tema="terang"] .tstatus.paid { color: #0E5F38; }
html[data-tema="terang"] .pprice { color: #0B5566; }
html[data-tema="terang"] .pprice s { color: #74677f; }

/* lencana RECOMEND: pita wajik gaya app BukaOlshop, kecil di pojok kiri atas gambar */
.p-rek2 { position: absolute; z-index: 2; top: 5px; left: 7px; height: 13px; display: inline-flex; align-items: center; }
.p-rek2 .badge-diamond { position: relative; width: 11px; height: 11px; border-radius: 3px; transform: rotate(45deg); z-index: 2; flex: none;
  background: linear-gradient(180deg, #7c5cbf, #c026d3); box-shadow: 1px 0 4px rgba(0,0,0,.5); }
.p-rek2 .badge-diamond::before { content: "\1F525"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 6.5px; line-height: 1; transform: rotate(-45deg); z-index: 1; }
.p-rek2 .badge-diamond::after { content: ""; position: absolute; inset: 2px; border-radius: 1px; border: 1px solid rgba(255,255,255,.5); }
.p-rek2 .badge-body { height: 100%; display: flex; align-items: center; margin-left: -5px; padding: 0 8px; font-size: 7.5px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: #fff; white-space: nowrap; background: linear-gradient(90deg, #4a18a0, #7c5cbf 40%, #c026d3 100%);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%); }
@media (prefers-reduced-motion: reduce) { .pcard { transition: none; } .pcard:active { transform: none; } }
.pcard[aria-busy="true"] { opacity: .6; cursor: progress; } /* video sedang disiapkan (putar) */
/* harga dibungkus <b> (2026-10-21) supaya bisa jadi pil di mode gelap; di mode terang tampil seperti biasa */
.pprice b { font: inherit; color: inherit; }

/* ---------- 2026-11-01 pemilik: kartu mode GELAP = BENTUK SAMA dengan mode terang (gambar, nama & harga di bawah) ----------
   Dulu (2026-10-21) gelap memakai kartu web store (judul menimpa gambar, harga dalam pil) -> dua desain berbeda. Sekarang hanya
   warnanya yang beda: permukaan hitam charcoal berlapis (2026-11-01 pemilik, dulu ungu-tinta), tepi tipis keperakan -> ungu, kilau tipis di atas. */
html:not([data-tema="terang"]) .pcard {
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%) padding-box,
              linear-gradient(175deg, #1e1e22 0%, #161618 45%, #0f0f11 100%) padding-box, /* 2026-11-01: charcoal */
              linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, rgba(169,141,224,.32)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35); } /* netral, tanpa pendar */
html:not([data-tema="terang"]) .pthumb { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html:not([data-tema="terang"]) .tname { color: #f4f0ff; }
html:not([data-tema="terang"]) .pprice s { color: #8f87a6; }
@media (max-width: 359px) { .p-tag, .p-dur { padding: 0 4px; font-size: 8.5px; } .p-tag { left: 5px; } .p-dur { right: 5px; } } /* 320px: MILIKMU tidak menempel durasi */

/* =====================================================
   2026-10-22 Promo Bundling. Header & hitung mundur = purwarupa yang disepakati; KARTU = ukuran & desain
   web store babyflo69.biz.id (permintaan pemilik 2026-10-22, nilai dari style.css web store versi HP):
   lebar 218px, padding 6px, sudut 9px, gambar 54px, nama 11px maks 2 baris, sub judul 7.5px, tombol selebar kartu
   ungu -> hitam 3D. Latar kartu mode gelap tetap hitam netral (keputusan 2026-10-21: tanpa biru dongker).
   ===================================================== */
.flash-wrap { margin: 0 0 12px; }
.flash-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.flash-label { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 15px "Plus Jakarta Sans", sans-serif; letter-spacing: .4px; color: var(--z-text, #f4f4f5); }
.flash-timer { display: inline-flex; align-items: center; gap: 3px; font: 700 12px "Plus Jakarta Sans", sans-serif; color: var(--z-text, #f4f4f5); white-space: nowrap; }
.flash-timer small { margin-right: 3px; font: 600 11px "Plus Jakarta Sans", sans-serif; color: var(--z-text3, #8a8a93); }
.flash-timer b { min-width: 26px; height: 24px; padding: 0 3px; display: grid; place-items: center; border-radius: 7px; background: #e3007a; color: #fff; /* 2026-10-23 Fase 6: #ff1293 -> #e3007a, kontras teks putih 3.65 -> 4.62 */ font-weight: 700; font-variant-numeric: tabular-nums; }
.flash-timer.habis b { background: #8a8aa6; }
.flash-scroll { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 6px 12px 4px; }
.flash-scroll::-webkit-scrollbar { display: none; }
.flash-card { position: relative; flex: none; width: 218px; display: flex; align-items: flex-start; gap: 6px; padding: 6px; border-radius: 9px; text-align: left; color: inherit;
  border: 1px solid transparent; background-image: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%), linear-gradient(175deg, #1e1e22 0%, #161618 45%, #0f0f11 100%), linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, rgba(169,141,224,.32)); /* 2026-11-01 charcoal */ /* 2026-11-01: dulu hitam datar */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px -8px rgba(0,0,0,.6);
  background-origin: border-box; background-clip: padding-box, padding-box, border-box; -webkit-tap-highlight-color: transparent; }
.flash-img { flex: none; width: 54px; height: 54px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); object-fit: cover; background: #18181B; }
.flash-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.flash-name { padding-right: 34px; font: 700 11px/1.2 "Plus Jakarta Sans", sans-serif; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flash-subtitle { margin-top: 1px; font-size: 7.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #67e8f9; }
.flash-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.flash-price { font-size: 11.5px; font-weight: 800; color: var(--z-text, #f4f4f5); }
.flash-orig { font-size: 10px; color: var(--z-text3, #8a8a93); text-decoration: line-through; }
.flash-note { display: block; margin-top: 4px; font-size: 9.5px; line-height: 1.35; color: var(--z-text3, #8a8a93); }
.flash-cta { position: relative; top: 0; display: inline-block; width: 100%; margin-top: 6px; padding: 6px 9px; border: 0; border-radius: 7px; text-align: center; text-decoration: none; cursor: pointer;
  font: 700 10.8px "Plus Jakarta Sans", sans-serif; letter-spacing: .3px; color: #fff; background: linear-gradient(180deg, rgba(127,85,220,.9), rgba(0,0,0,.9));
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.39) inset, 0 3px 0 #3d1f7a, 0 4px 8px rgba(0,0,0,.6);
  transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.flash-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 1px 0 #3d1f7a, 0 2px 4px rgba(0,0,0,.3); }
.flash-cta:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.flash-cta.off { cursor: default; background: #27272a; box-shadow: none; color: #b4b4bc; }
.flash-cta.off:active { transform: none; }
.ribbon { position: absolute; right: 3px; top: calc(-1 * var(--f)); z-index: 3; --f: .3em; --r: .9em; padding: .3em; font-size: .5rem; font-weight: 700; color: #fff;
  border: solid #ff1293; border-width: 0 0 var(--r) calc(2 * var(--f));
  background: radial-gradient(69% 100% at bottom, #ff006e 99%, #ff1293 102%) 0 0 / calc(2 * var(--f)) var(--f) no-repeat border-box; background-color: #ff1293;
  border-radius: var(--f) var(--f) 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + var(--f)) calc(100% - var(--r)), calc(2 * var(--f)) 100%, calc(2 * var(--f)) var(--f), 0 var(--f)); }
html[data-tema="terang"] .flash-card { background-image: linear-gradient(#faf8f5, #faf8f5), linear-gradient(#faf8f5, #f0ede8), linear-gradient(135deg, #7c5cbf, #a855f7, #0ea5c9); box-shadow: none; }
html[data-tema="terang"] .flash-name, html[data-tema="terang"] .flash-price { color: #302343; }
html[data-tema="terang"] .flash-subtitle { color: #6744a6; }
html[data-tema="terang"] .flash-timer b { box-shadow: 0 2px 0 #b80d6a; }
html[data-tema="terang"] .flash-label, html[data-tema="terang"] .flash-timer { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: .2px; }
/* 2026-10-23 revisi pemilik: "Beli Paket Ini" mode terang = latar tombol Isi Saldo terang (ungu pastel, teks ungu tua supaya terbaca) */
html[data-tema="terang"] .flash-cta { color: #38205f; background: linear-gradient(145deg, #d9c2ff 0%, #b08bf4 48%, #9165dc 100%);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -2px 0 rgba(91,55,153,.2), 0 3px 0 #7655b6, 0 4px 8px rgba(91,58,136,.13); }
html[data-tema="terang"] .flash-cta:active { box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), 0 1px 0 #7655b6; }
html[data-tema="terang"] .flash-cta.off { background: #ece6f6; color: #5b4f6e; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .flash-cta { transition: none; } .flash-cta:active { transform: none; } }
/* Beranda: tepi halaman 10px (bukan 12px seperti z-wrap) -> baris promo tidak boleh menembus 2px ke kanan (temuan tes isi-saldo 2026-10-22) */
body.beranda .flash-scroll { margin: 0 -10px; padding: 6px 10px 4px; }

/* 2026-10-23 Fase 6: area sentuh "Beli Paket Ini" 28px -> 44px tanpa mengubah ukuran tampak */
.flash-cta::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }

/* 2026-10-23 lencana kategori "LIVESTREAMING" (13 huruf) kelebihan 3-8px di HP 320 (diukur) -> rapatkan sedikit di layar kecil */
@media (max-width: 359px) { .p-rek2 .badge-body { padding: 0 6px 0 7px; font-size: 7px; letter-spacing: 0; } }