/* =====================================================
   vip.css - halaman VIP (2026-10-22). Dimuat setelah app.css & app-produk.css.
   Keputusan pemilik 2026-10-22: komponen halaman utama (z-card, z-btn, z-head, kolom 620px, banner gaya hero Beranda);
   halaman DIKUNCI GELAP (tidak ikut lampu); palet EMAS + UNGU: emas = identitas VIP (chip, ikon, POPULER, nama paket,
   garis kartu/durasi terpilih, pola latar), tombol tetap ungu seperti aplikasi, harga tetap warna uang (cyan).
   ===================================================== */
.vipz { --vip-gold: #E2B95A; --vip-gold-2: #F2D27A; --vip-gold-3: #B8862B; --vip-line: rgba(226,185,90,.22); }
/* pola wajik latar: bagian cyan diganti emas, ungu tetap (revisi pemilik 2026-10-22) */
html:not([data-tema="terang"]) body.app.vipz { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 2 L34 18 L18 34 L2 18 Z' fill='none' stroke='rgba(144,105,233,0.07)' stroke-width='1'/%3E%3Cpath d='M18 8 L28 18 L18 28 L8 18 Z' fill='none' stroke='rgba(226,185,90,0.08)' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(226,185,90,0.2)'/%3E%3C/svg%3E"); }

/* ---------- banner ---------- */
/* rasio asli gambar (1785x881). JANGAN pakai min-height bersama aspect-ratio: tinggi minimum ikut memaksa LEBAR (temuan
   2026-10-22: banner 397px di kolom 351px, tombol CEK VIP terpotong). Revisi pemilik 2026-10-22: rasio landscape di SEMUA lebar (tinggi tetap 200px di HP membuat banner kotak). */
/* revisi pemilik 2026-10-22 malam: tanpa garis tepi & sudut, lebar memenuhi sisi layar (margin negatif = padding 12px .z-wrap) */
.vipz .vip-hero { position: relative; margin: 0 -12px 16px; aspect-ratio: 1785 / 881; overflow: hidden;
  display: flex; align-items: flex-end; background: #111113; box-shadow: 0 4px 20px rgba(0,0,0,.45); }
.vipz .vip-hero .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; filter: brightness(.8); }
.vipz .vip-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, #09090B 4%, rgba(9,9,11,.45) 45%, transparent 75%), linear-gradient(90deg, rgba(9,9,11,.45) 0%, transparent 55%); }
.vipz .vip-hero .hero-content { position: relative; z-index: 2; width: 100%; padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 6px; }
.vipz .vip-eyebrow { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 10px; border-radius: 99px;
  font: 700 11px "Plus Jakarta Sans", sans-serif; color: var(--vip-gold-2); background: rgba(226,185,90,.16); border: 1px solid rgba(242,210,122,.6); }
.vipz .vip-eyebrow i { font-size: 10px; }
.vipz .vip-desc { margin: 0; font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.86); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vipz .vip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vipz .vip-chips { display: flex; flex-wrap: wrap; gap: 4px 11px; font: 700 11px "Plus Jakarta Sans", sans-serif; color: #f4f4f5; }
.vipz .vip-chips i { font-size: 10px; color: var(--vip-gold); }

/* ---------- pemberitahuan, VIP saya, judul ---------- */
.vipz .vip-load { margin: 0 0 12px; text-align: center; }
.vipz .vip-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 14px; }
.vipz .vip-note p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--z-text2); }
.vipz .vip-sub { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 15px; color: var(--z-text); }
.vipz .vip-mine { padding: 12px 14px; margin-bottom: 16px; border-color: var(--vip-line); }
.vipz .mine-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.08); }
.vipz .mine-row:first-child { border-top: 0; padding-top: 0; }
.vipz .mine-row b { display: block; font-size: 13.5px; color: var(--vip-gold-2); }
.vipz .mine-row small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--z-text3); }
.vipz .mine-state { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; color: #4ade80; background: rgba(74,222,128,.12); }
.vipz .mine-state.wait { color: #fff; background: #6d4bc9; }
/* subjudul tepat di bawah teks "Pilihan Paket" (revisi pemilik 2026-10-22 malam); h2 tanpa margin bawaan browser (20px atas & bawah) */
.vipz #pkgSection .app-head { margin: 0 0 14px; }
.vipz .vip-head-txt { min-width: 0; }
.vipz #pkgHead { margin: 0; line-height: 1.15; }
.vipz .vip-pkg-sub { margin: 2px 0 0; }
.vipz .app-ico { background: rgba(226,185,90,.14); }

/* ---------- kartu paket ---------- */
.vipz .vip-pkgs { display: grid; gap: 14px; margin-bottom: 16px; }
/* kotak kartu 3D "timbul tebal" (pilihan A pemilik 2026-10-22): kilau atas + tepi bawah emas gelap. Isi kartu tidak ikut 3D. */
.vipz .pkg-card { position: relative; padding: 14px; margin-bottom: 6px; border-radius: 16px; border: 1px solid rgba(226,185,90,.35);
  background: linear-gradient(165deg, #22201b 0%, #141416 48%, #0d0d0f 100%);
  box-shadow: inset 0 1px 0 rgba(255,232,180,.22), inset 0 -2px 0 rgba(0,0,0,.45), 0 6px 0 #3a2c12, 0 7px 0 rgba(226,185,90,.35), 0 14px 26px rgba(0,0,0,.6); }
.vipz .pkg-card.has-selection { border-color: var(--vip-gold);
  box-shadow: inset 0 1px 0 rgba(255,232,180,.3), inset 0 -2px 0 rgba(0,0,0,.45), 0 6px 0 #5a4217, 0 7px 0 var(--vip-gold), 0 14px 30px rgba(226,185,90,.18); }
.vipz .pkg-card-badge { position: absolute; top: -9px; right: 14px; padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: #1a1206; background: linear-gradient(90deg, var(--vip-gold-2), var(--vip-gold-3)); box-shadow: 0 2px 8px rgba(226,185,90,.3); }
.vipz .pkg-card-top { display: flex; align-items: flex-start; gap: 12px; }
.vipz .pkg-card-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 16px;
  color: var(--vip-gold-2); background: rgba(226,185,90,.12); border: 1px solid rgba(226,185,90,.3); }
.vipz .pkg-card-info { min-width: 0; }
.vipz .pkg-card-name { font: 700 15px/1.25 "Plus Jakarta Sans", sans-serif; letter-spacing: .3px; color: var(--vip-gold-2); }
.vipz .pkg-card-desc { list-style: none; margin: 5px 0 0; padding: 0; display: grid; gap: 3px; }
.vipz .pkg-card-desc li { position: relative; padding-left: 13px; font-size: 12px; line-height: 1.45; color: var(--z-text2); }
.vipz .pkg-card-desc li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--vip-gold); }
/* garis pemisah: bentuk garis halaman utama (.z-line, app.css) tapi warna EMAS gradasi, pengganti garis putus-putus (revisi pemilik 2026-10-22 malam) */
.vipz .pkg-duration-group { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 14px; }
.vipz .pkg-duration-group::before, .vipz .vip-sum-row.total::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; opacity: .9;
  background: linear-gradient(90deg, transparent, var(--vip-gold-3) 18%, var(--vip-gold-2) 50%, var(--vip-gold-3) 82%, transparent); }
.vipz .pkg-duration-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 7px 4px; border-radius: 12px; cursor: pointer;
  font: inherit; background: transparent; border: 1px solid rgba(255,255,255,.12); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vipz .pdb-label { font-size: 11px; font-weight: 700; color: var(--z-text2); }
.vipz .pdb-price { font-size: 13px; font-weight: 800; color: var(--z-money); white-space: nowrap; }
.vipz .pkg-duration-btn.selected { border-color: var(--vip-gold); background: rgba(226,185,90,.1); box-shadow: 0 0 0 1px var(--vip-gold); }
.vipz .pkg-duration-btn.selected .pdb-label { color: var(--vip-gold-2); }
.vipz .pkg-duration-btn:disabled { opacity: .42; cursor: not-allowed; }
.vipz .pkg-duration-btn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.vipz .pkg-block-note { margin: 8px 0 0; font-size: 11.5px; color: var(--z-text3); }

/* ---------- ringkasan & bayar ---------- */
.vipz .vip-sum { padding: 12px 14px; margin-bottom: 14px; border-color: var(--vip-line); }
.vipz .vip-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; }
.vipz .vip-sum-row .lbl { color: var(--z-text2); }
.vipz .vip-sum-row .val { font-weight: 700; color: var(--z-text); text-align: right; }
.vipz .vip-sum-row.total { position: relative; margin-top: 4px; padding-top: 11px; }
.vipz .vip-sum-row.total .lbl { font-weight: 800; color: var(--z-text); }
.vipz .vip-sum-row.total .val { font-size: 15px; font-weight: 800; color: var(--z-money); }
/* tombol bayar: gradasi 180deg hitam ke ungu, tanpa ikon panah (pemilik 2026-10-22 malam) */
.vipz .vip-pay { display: flex; width: 100%; min-height: 46px; font-size: 14px; }
.vipz #btnPay, .vipz .vip-go { background: linear-gradient(180deg, #120d1c 0%, #5b3ba8 100%); border: 1px solid rgba(144,105,233,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #2a1a4d, 0 6px 16px rgba(0,0,0,.45); }
.vipz .vip-pay[disabled] { opacity: .5; cursor: not-allowed; }
/* popup konfirmasi (lembar .prod-sheet halaman App): garis total emas, catatan perpanjang/naik paket (2026-10-22) */
.vipz .vip-sheet { border-color: var(--vip-line); }
.vipz .vip-sheet .sheet-rows .tot { border-top: 0; position: relative; padding-top: 10px; }
.vipz .vip-sheet .sheet-rows .tot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; opacity: .9;
  background: linear-gradient(90deg, transparent, var(--vip-gold-3) 18%, var(--vip-gold-2) 50%, var(--vip-gold-3) 82%, transparent); }
.vipz .vip-sheet .sheet-rows b { white-space: normal; text-align: right; }
.vipz .vip-sheet-note { margin: 0; padding: 9px 11px; border-radius: 10px; font-size: 12px; line-height: 1.45; color: var(--z-text2);
  background: rgba(226,185,90,.08); border: 1px solid var(--vip-line); }
.vipz .mine-row small .sisa { color: var(--vip-gold-2); font-weight: 700; }
.vipz .vip-pay[hidden] { display: none; }
.vipz .vip-msg { min-height: 1.3em; margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--z-text2); }
.vipz .vip-msg.err { color: #f87171; }
.vipz .vip-msg.ok { color: #4ade80; }
.vipz .vip-terms { margin: 10px 0 0; text-align: center; }
.vipz .vip-terms a { color: var(--vip-gold-2); font-weight: 700; }
/* layar sempit: rasio tetap landscape (revisi pemilik 2026-10-22: banner jangan kotak), teks dirapatkan supaya muat */
@media (max-width: 380px) { .vipz .vip-hero .hero-content { padding: 9px 11px 10px; gap: 4px; } .vipz .vip-desc { font-size: 11px; line-height: 1.35; } }

/* 2026-10-23 Fase 6 CR-021: tombol Coba lagi saat gagal memuat paket */
.vipz .vip-load .coba-lagi { display: flex; margin: 8px auto 0; }