/* =====================================================
   app.css - kerangka aplikasi zonas69 (langkah 1, 2026-10-17)
   Desain final disetujui pemilik 2026-10-17 (purwarupa v15): tema terang "soft clay" pastel + pola wajik,
   tema gelap gaya app BukaOlshop, menu bawah 5 tombol dengan LIVE bulat bingkai pelangi di tengah.
   Dipakai halaman baru (body.app) dan beranda (body.beranda, ditimpa di atas home.css/home-tema.css).
   Tema diatur html[data-tema] (tema-awal.js), bawaan terang.
   ===================================================== */

/* ---------- ikon Uicons by Flaticon (dipangkas, lihat assets/fonts/uicons/LICENSE.txt) ---------- */
@font-face { font-family: "uicons-zona"; src: url("../fonts/uicons/uicons-zona.woff2?v=2") format("woff2"); font-display: block; }
.fi { font-family: "uicons-zona"; font-style: normal; font-weight: 400; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }
.fi::before { display: block; }
.fi-home::before { content: "\f7b8"; } .fi-play-alt::before { content: "\fa9a"; } .fi-mobile-notch::before { content: "\f952"; }
.fi-user::before { content: "\fea0"; } .fi-signal-stream::before { content: "\fc18"; } .fi-bulb::before { content: "\f304"; }
.fi-headset::before { content: "\f794"; } .fi-bell::before { content: "\f239"; } .fi-angle-small-right::before { content: "\f155"; }
.fi-angle-small-down::before { content: "\f153"; } .fi-arrow-small-left::before { content: "\f19d"; } .fi-cross-small::before { content: "\f4f6"; }
.fi-crown::before { content: "\f4f9"; } .fi-lock::before { content: "\f8d5"; } .fi-badge-check::before { content: "\f1eb"; }
.fi-eye::before { content: "\f5f8"; } .fi-search::before { content: "\fbba"; } .fi-key::before { content: "\f847"; }
.fi-sign-out-alt::before { content: "\fc0c"; } .fi-shield-check::before { content: "\fbdb"; } .fi-refresh::before { content: "\fb34"; }
.fi-copy::before { content: "\f4dd"; } .fi-check::before { content: "\f3c8"; } .fi-info::before { content: "\f80b"; }
.fi-eye-crossed::before { content: "\f5f5"; } .fi-filter::before { content: "\f67e"; }
.i3d { display: block; object-fit: contain; flex: none; }

/* ---------- token warna ---------- */
:root {
  --z-text: #eeeef5; --z-text2: #b8b8cc; --z-text3: #8a8aa6; --z-money: #67e8f9; --z-live: #C026D3; --z-accent: #a98de0;
  --z-panel: #0e0e1c; --z-border: rgba(124,92,191,.35); --z-page: #050508;
  --z-clay: 0 4px 12px rgba(0,0,0,.35); --z-clay-s: none;
  --z-rainbow: conic-gradient(from 200deg, #ff4d6d, #ffb347, #ffe66d, #4ade80, #22d3ee, #818cf8, #c084fc, #ff4d6d);
  --z-line: linear-gradient(90deg, transparent, #9069e9 18%, #22d3ee 50%, #ec4899 82%, transparent);
  --z-nav-h: 64px;
}
html[data-tema="terang"] {
  --z-text: #302343; --z-text2: #4a3d5c; --z-text3: #6a5d76; /* 2026-10-23 Fase 6: #74677f -> #6a5d76, kontras 4.38 -> 5.08 (WCAG AA) */ --z-money: #0B5566; --z-live: #9A1BAD; --z-accent: #6744a6;
  --z-panel: #fffcf9; --z-border: #fff; --z-page: #eae8ff;
  --z-clay: inset 3px 3px 0 #fff, inset -3px -3px 0 rgba(215,192,230,.28), 0 4px 0 rgba(132,101,177,.10), 0 10px 18px rgba(91,58,136,.09);
  --z-clay-s: inset 2px 2px 0 rgba(255,255,255,.92), inset -2px -2px 0 rgba(135,98,174,.12), 0 3px 0 rgba(122,88,166,.10), 0 5px 10px rgba(91,58,136,.09);
}

/* ---------- latar halaman baru (body.app) ---------- */
body.app { margin: 0; min-height: 100vh; color: var(--z-text); font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
  background-color: #050508;
  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.12)' stroke-width='1'/%3E%3Cpath d='M18 8 L28 18 L18 28 L8 18 Z' fill='none' stroke='rgba(0,249,255,0.10)' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(0,249,255,0.22)'/%3E%3C/svg%3E");
  background-size: 36px 36px; }
body.app *, body.app *::before, body.app *::after { box-sizing: border-box; }
/* atribut hidden harus selalu menang atas display:flex/grid kelas mana pun (temuan inspeksi 2026-10-17: menu Studio & konfirmasi tampil padahal hidden) */
body.app [hidden] { display: none !important; }
html[data-tema="terang"] body.app { background: transparent; }
html[data-tema="terang"] { background: #eae8ff; }
/* tema terang: latar pastel + pola wajik diredam, di lapisan tetap (tidak ikut bergulir)
   2026-10-22 Fase 2 CR-001: halaman Masuk/Daftar (body.masuk, html.pra-masuk sebelum JS) ikut latar ini, bukan aurora lagi */
html[data-tema="terang"] body.app::before, html[data-tema="terang"] body.beranda::before, html[data-tema="terang"] body.masuk::before, html[data-tema="terang"].pra-masuk body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 10% 8%, rgba(255,193,236,.8), transparent 32%), radial-gradient(ellipse at 92% 20%, rgba(154,203,255,.72), transparent 34%),
    radial-gradient(ellipse at 80% 85%, rgba(255,190,225,.8), transparent 32%), linear-gradient(145deg, #e4e6ff, #f7eaff 55%, #dbeeff); }
html[data-tema="terang"] body.app::after, html[data-tema="terang"] body.beranda::after, html[data-tema="terang"] body.masuk::after, html[data-tema="terang"].pra-masuk body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: 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(147,104,210,0.20)' stroke-width='1'/%3E%3Cpath d='M18 8 L28 18 L18 28 L8 18 Z' fill='none' stroke='rgba(236,72,153,0.16)' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(236,72,153,0.32)'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='rgba(147,104,210,0.36)'/%3E%3Ccircle cx='36' cy='0' r='1.2' fill='rgba(147,104,210,0.36)'/%3E%3Ccircle cx='0' cy='36' r='1.2' fill='rgba(147,104,210,0.36)'/%3E%3Ccircle cx='36' cy='36' r='1.2' fill='rgba(147,104,210,0.36)'/%3E%3C/svg%3E") 0 0 / 36px 36px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.2) 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.2) 100%); }
/* 2026-11-01 pemilik: judul dan tombol satu huruf di kedua tema = Plus Jakarta Sans tebal (dulu Fredoka terang / Oswald gelap) */
.z-head { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: .3px; }
html[data-tema="terang"] .z-head { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: .2px; }

/* ---------- kerangka halaman baru ---------- */
.z-wrap { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 10px 12px calc(var(--z-nav-h) + 40px + env(safe-area-inset-bottom, 0px)); }
.z-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 14px; }
.z-pagehead h1 { margin: 0; font-size: 18px; font-weight: 700; color: var(--z-text); }
.z-card { background: var(--z-panel); border: 1px solid rgba(124,92,191,.35); border-radius: 16px; box-shadow: var(--z-clay); }
html[data-tema="terang"] .z-card { background: linear-gradient(145deg, #fffcf9, #faf2fa); border: 2px solid #fff; border-radius: 20px; }
.z-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 14px; border: 1px solid #a98de0;
  font: 700 13px "Plus Jakarta Sans", sans-serif; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #8c62d9, #5b3ba8); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 #3b256b; }
html[data-tema="terang"] .z-btn { color: #38205f; border: 2px solid #f8edff; background: linear-gradient(145deg, #d9c2ff 0%, #b08bf4 48%, #9165dc 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.55), inset -2px -3px 0 rgba(91,55,153,.2), 0 4px 0 #7655b6, 0 7px 12px rgba(91,58,136,.13); }
.z-btn:active { transform: translateY(2px); }
.z-btn.ghost { background: transparent; color: var(--z-accent); box-shadow: none; }
html[data-tema="terang"] .z-btn.ghost { background: linear-gradient(145deg, #fff, #f0e5ff); border: 2px solid #fff; box-shadow: var(--z-clay-s); color: #6744a6; }
.z-back { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 14px; border-radius: 99px; text-decoration: none; font-size: 12px; font-weight: 700;
  color: var(--z-text2); border: 1px solid rgba(124,92,191,.35); background: transparent; cursor: pointer; }
html[data-tema="terang"] .z-back { color: #6744a6; background: linear-gradient(145deg, #fff, #f0e5ff); border: 2px solid #fff; box-shadow: var(--z-clay-s); }
.z-back .fi { font-size: 14px; }
.z-muted { color: var(--z-text3); font-size: 12px; line-height: 1.5; }
.z-credit { text-align: center; margin-top: 18px; font-size: 11px; }
.z-line { height: 2px; border: 0; border-radius: 2px; margin: 6px 0 18px; opacity: .9; background: var(--z-line); }

/* ---------- halaman "segera hadir" ---------- */
.z-soon { padding: 26px 18px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.z-soon .i3d { width: 64px; height: 64px; }
.z-soon h2 { margin: 0; font-size: 20px; color: var(--z-text); }
.z-soon p { margin: 0; max-width: 34ch; color: var(--z-text2); font-size: 13px; line-height: 1.55; }

/* ---------- menu bawah (agak transparan; LIVE bulat bingkai pelangi tanpa glow) ---------- */
/* z-index 45: di atas isi halaman, DI BAWAH popup .modal (50) & toast (60) beranda - popup isi saldo tidak boleh tertutup menu */
.app-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 45;
  width: calc(100% - 20px); max-width: 600px; height: var(--z-nav-h); display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: center;
  border-radius: 18px; background: rgba(14,14,28,.8); border: 1px solid rgba(124,92,191,.35); box-shadow: 0 8px 22px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
html[data-tema="terang"] .app-nav { background: rgba(255,251,255,.72); border: 2px solid #fff; border-radius: 22px;
  box-shadow: inset 3px 3px 0 #fff, 0 5px 0 #d3c1e8, 0 10px 18px rgba(91,58,136,.15); }
.app-nav a { display: grid; justify-items: center; gap: 3px; padding: 7px 0; margin: 0 3px; border-radius: 14px; text-decoration: none;
  color: var(--z-text3); font: 600 10px "Plus Jakarta Sans", sans-serif; letter-spacing: .5px; -webkit-tap-highlight-color: transparent; }
html[data-tema="terang"] .app-nav a { font-family: "Plus Jakarta Sans", sans-serif; font-size: 10.5px; color: #8a839a; }
.app-nav a .fi { font-size: 19px; }
.app-nav a[aria-current="page"]:not(.center) { color: #67e8f9; }
html[data-tema="terang"] .app-nav a[aria-current="page"]:not(.center) { color: #6744a6; background: linear-gradient(145deg, #f8f1ff, #e9dcfb);
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #d9c8ef, 0 3px 0 #c9b1e8; }
.app-nav a.center { justify-self: center; width: 60px; height: 60px; margin: -26px 0 0; padding: 0; border-radius: 50%; border: 3px solid transparent;
  align-content: center; gap: 1px; color: #f0abfc; font-size: 9px;
  background: linear-gradient(#15102a, #15102a) padding-box, var(--z-rainbow) border-box; }
html[data-tema="terang"] .app-nav a.center { color: #9A1BAD; background: linear-gradient(#fff, #fff) padding-box, var(--z-rainbow) border-box; }
.app-nav a.center .fi { font-size: 20px; }
.app-nav a.center[aria-current="page"] { background: linear-gradient(#2a1650, #2a1650) padding-box, var(--z-rainbow) border-box; }
html[data-tema="terang"] .app-nav a.center[aria-current="page"] { background: linear-gradient(#F5ECFF, #F5ECFF) padding-box, var(--z-rainbow) border-box; }
.app-nav a:focus-visible { outline: 3px solid #7049b4; outline-offset: 2px; }
/* beranda: menu bawah hanya setelah login (halaman masuk tetap seperti sekarang) */
body:not(.beranda):not(.app) .app-nav { display: none; }
body.beranda .container { padding-bottom: calc(var(--z-nav-h) + 30px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .app-nav, .app-nav * { transition: none !important; } }

/* ---------- 2026-10-21 pemilik: mode GELAP = hitam netral ----------
   Masukan pemilik malam ini: gelap terlihat kebiruan/biru dongker & keunguan. Permukaan sekarang hitam netral
   (#09090B / #111113 / #18181B, tepi putih tipis), ungu & toska hanya untuk aksen (tombol, status aktif, harga).
   Pola wajik web store tetap, diredam. Mode terang tidak berubah. */
html:not([data-tema="terang"]) {
  --z-panel: #111113; --z-page: #09090B; --z-border: rgba(144,105,233,.3); --z-text: #f4f4f5; --z-text2: #b4b4bc; --z-text3: #8a8a93;
  --z-clay: 0 2px 10px rgba(0,0,0,.5);
}
html:not([data-tema="terang"]) body.app { background-color: #09090B; 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(0,249,255,0.05)' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(0,249,255,0.12)'/%3E%3C/svg%3E"); }
html:not([data-tema="terang"]) .z-card { border-color: rgba(144,105,233,.3); } /* garis ungu tipis: batas panel jelas di latar hitam (pemilik setuju 2026-10-21) */
html:not([data-tema="terang"]) .z-back { border-color: rgba(255,255,255,.12); }
/* garis pemisah: tetap 3 warna (ungu - toska - magenta), 2px */
.z-line { height: 2px; opacity: .85; }

/* ---------- 2026-10-21 pemilik: menu bawah = menu bawah web store (babyflo69.biz.id #globalNav) ----------
   Bar kapsul, label Oswald kecil, yang aktif ungu muda + garis kecil di bawah, LIVE = bulatan ungu menonjol
   ke atas dengan cincin warna latar (tanpa bingkai pelangi). Struktur HTML dari app-nav.js tidak berubah. */
:root { --z-nav-h: 52px; }
html[data-tema] .app-nav { height: var(--z-nav-h); grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; padding: 3px; border-radius: 99px;
  background: rgba(12,12,14,.96); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 16px rgba(0,0,0,.45);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-tema] .app-nav a { position: relative; align-content: center; gap: 2px; min-height: 42px; padding: 4px 0 5px; margin: 0; border-radius: 0;
  background: none; box-shadow: none; color: #8a8a93; font: 600 9px "Plus Jakarta Sans", sans-serif; letter-spacing: .3px; }
html[data-tema] .app-nav a .fi { font-size: 18px; }
html[data-tema] .app-nav a[aria-current="page"]:not(.center) { color: #a98de0; background: none; box-shadow: none; }
html[data-tema] .app-nav a[aria-current="page"]:not(.center)::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; border-radius: 0 0 3px 3px; background: #a98de0; }
/* 2026-10-22 titik merah tab AKUN = ada notifikasi akun yang belum dibaca (app-nav.js) */
.app-nav a .nav-dot { position: absolute; top: 4px; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 0 2px #111113; pointer-events: none; }
html[data-tema="terang"] .app-nav a .nav-dot { box-shadow: 0 0 0 2px #fff; }
html[data-tema] .app-nav a.center { justify-self: stretch; width: auto; height: auto; margin: 0; padding: 0 0 5px; border: 0; border-radius: 0;
  align-content: end; color: #fff; font-size: 8px; font-weight: 700; background: none; }
html[data-tema] .app-nav a.center .fi { display: grid; place-items: center; width: 42px; height: 42px; margin: -18px auto 2px; border-radius: 50%; font-size: 20px; color: #fff;
  background: radial-gradient(circle at 35% 30%, #1a0a2a, #7c5cbf 55%, #0d0d1e); border: 2px solid rgba(144,105,233,.39);
  box-shadow: 0 0 0 3px #0c0c0e, 0 3px 9px rgba(144,105,233,.18); transition: transform .15s ease; }
html[data-tema] .app-nav a.center:active .fi { transform: scale(.93); }
/* 2026-11-04 pemilik: tombol LIVE = logo pin 69 (gambar, app-nav.js), TANPA lingkaran & tanpa garis tepi (cincin gelap di sisi pin
   ditolak pemilik, terlihat seperti garis hitam di HP), tampak melayang lewat bayangan lembut di bawah saja */
.app-nav a.center picture { display: block; transition: transform .12s; }
html[data-tema] .app-nav a.center .nav-live { display: block; width: auto; height: 46px; margin: -26px auto 1px; filter: drop-shadow(0 6px 7px rgba(0,0,0,.35)); }
html[data-tema="terang"] .app-nav a.center .nav-live { filter: drop-shadow(0 6px 7px rgba(91,58,136,.3)); }
html[data-tema] .app-nav a.center:active picture { transform: scale(.93); }
html[data-tema] .app-nav a.center[aria-current="page"] { color: #a98de0; background: none; }
html[data-tema] .app-nav a:focus-visible { outline: 2px solid #67e8f9; outline-offset: -2px; border-radius: 6px; }
html[data-tema="terang"] .app-nav { background: rgba(250,248,245,.97); border-color: rgba(124,92,191,.18); box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 0 0 1px rgba(124,92,191,.08); }
html[data-tema="terang"] .app-nav a { color: #6f6690; font-family: "Plus Jakarta Sans", sans-serif; font-size: 9px; }
html[data-tema="terang"] .app-nav a[aria-current="page"]:not(.center) { color: #6744a6; }
html[data-tema="terang"] .app-nav a[aria-current="page"]:not(.center)::before { background: #6744a6; }
html[data-tema="terang"] .app-nav a.center { color: #4a3d5c; background: none; }
html[data-tema="terang"] .app-nav a.center[aria-current="page"] { color: #6744a6; background: none; }
html[data-tema="terang"] .app-nav a.center .fi { box-shadow: 0 0 0 3px #faf8f5, 0 3px 9px rgba(144,105,233,.25); }
/* 2026-10-23 pemilik: tombol LIVE mode terang ikut tema terang (ungu pastel seperti tombol Isi Saldo terang), bukan bulatan gelap */
html[data-tema="terang"] .app-nav a.center .fi { color: #38205f; border-color: #f8edff; background: linear-gradient(145deg, #d9c2ff 0%, #b08bf4 48%, #9165dc 100%);
  box-shadow: 0 0 0 3px #faf8f5, inset 1px 1px 0 rgba(255,255,255,.55), 0 2px 0 #7655b6, 0 4px 9px rgba(91,58,136,.2); }
html[data-tema="terang"] .app-nav a:focus-visible { outline-color: #6744a6; }

/* ---------- 2026-10-22 Fase 1 UI/UX (CR-016..023, disetujui pemilik): token & komponen dasar ----------
   HANYA MENAMBAH: nilai di bawah belum dipakai halaman lama (dipasang bertahap di fase berikutnya), jadi tampilan
   halaman yang sudah ada tidak berubah (dicek dev/tests/jejak-gaya.test.js). Katalog: dev/design/komponen.html.
   Ukuran teks 12.9 (bukan 13): aturan pemilik di docs/DESIGN.md "jangan pernah memakai angka 13". */
:root {
  --z-sp1: 4px; --z-sp2: 8px; --z-sp3: 12px; --z-sp4: 16px; --z-sp5: 20px; --z-sp6: 24px;
  --z-r-sm: 10px; --z-r-md: 12px; --z-r-lg: 16px; --z-r-xl: 20px; --z-r-pill: 999px;
  --z-fs-xl: 22px; --z-fs-lg: 18px; --z-fs-md: 15px; --z-fs-base: 12.9px; --z-fs-sm: 12px; --z-fs-xs: 11px;
  --z-btn-sm: 36px; --z-btn-md: 42px; --z-btn-lg: 46px; --z-tap: 44px;
  --z-ic-sm: 16px; --z-ic-md: 20px; --z-ic-lg: 24px;
}
.fi-film::before { content: "\f67a"; }

/* tombol kecil (CR-012 "Unduh di App"/"Tonton di Video"): tampak 36px, area sentuh tetap >=44px lewat ::after tak terlihat.
   -6px dihitung dari DALAM garis tepi (1px gelap / 2px terang) -> 5/4px di luar tombol (uji 2026-10-22: -4px hanya 3/2px) */
.z-btn.sm { position: relative; min-height: var(--z-btn-sm); padding: 0 12px; border-radius: var(--z-r-md); font-size: var(--z-fs-sm); }
.z-btn.sm::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
/* tombol bahaya (batalkan / hapus): NILAI SAMA PERSIS dengan .danger lama di akun.css (tombol "Ya, keluarkan"),
   supaya tombol yang sudah ada tidak berubah; kedua tema sama merah */
.z-btn.danger, html[data-tema="terang"] .z-btn.danger { color: #fff; border-color: #ff8a8a; background: linear-gradient(180deg, #ef4444, #b91c1c); box-shadow: 0 3px 0 #7f1d1d; }
/* fokus keyboard & nonaktif seragam (rencana Fase 1 yang tertinggal, dilengkapi 2026-10-22 Fase 2).
   Nonaktif = nilai yang SUDAH dipakai akun.css & app-produk.css (opacity .6, tanpa efek tekan) supaya halaman itu tidak berubah;
   VIP tetap memakai aturannya sendiri (vip.css .vip-pay[disabled]). */
.z-btn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
html[data-tema="terang"] .z-btn:focus-visible { outline-color: #6744a6; }
.z-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* hero halaman (CR-005/006/007): pola banner VIP (vip.css) tapi aksen UNGU. VIP tetap emas di vip.css.
   Selebar layar tanpa sudut seperti VIP di KEDUA tema (revisi pemilik 2026-10-22 "style banner seperti VIP"); foto tetap gelap supaya teks putih terbaca. */
.z-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); }
html[data-tema="terang"] .z-hero { box-shadow: 0 4px 16px rgba(91,58,136,.18); }
.z-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; filter: brightness(.8); }
.z-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%); }
html[data-tema="terang"] .z-hero::after { background: linear-gradient(0deg, rgba(26,14,46,.92) 4%, rgba(26,14,46,.4) 45%, transparent 75%), linear-gradient(90deg, rgba(26,14,46,.4) 0%, transparent 55%); }
.z-hero__body { position: relative; z-index: 2; width: 100%; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.z-hero__eyebrow { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 10px; border-radius: var(--z-r-pill);
  font: 700 11px "Plus Jakarta Sans", sans-serif; color: #e4d6ff; background: rgba(144,105,233,.22); border: 1px solid rgba(196,170,255,.6); }
.z-hero__eyebrow .fi { font-size: 12px; }
h1.z-hero__eyebrow, h2.z-hero__eyebrow { margin: 0; } /* label boleh jadi judul halaman (aksesibilitas) */
.z-hero__chips { display: flex; flex-wrap: wrap; gap: 4px 11px; font: 700 11px "Plus Jakarta Sans", sans-serif; color: #f4f4f5; }
.z-hero__chips .fi, .z-hero__chips .i3d { font-size: 11px; width: 12px; height: 12px; color: #c4aaff; vertical-align: -1px; }
.z-hero__chips .i3d { display: inline-block; vertical-align: -2px; }
/* gambar yang sudah bertulisan di kiri (banner zonestream/zonaasupan): kiri & bawah digelapkan lebih kuat supaya teks kita terbaca
   (sementara, sampai pemilik punya gambar tanpa tulisan) */
.z-hero--redup::after, html[data-tema="terang"] .z-hero--redup::after {
  background: linear-gradient(0deg, #09090B 4%, rgba(9,9,11,.62) 50%, rgba(9,9,11,.3) 100%), linear-gradient(90deg, rgba(9,9,11,.82) 0%, rgba(9,9,11,.5) 55%, transparent 85%); }
.z-hero__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); }
.z-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
@media (max-width: 380px) { .z-hero__body { padding: 9px 11px 10px; gap: 4px; } .z-hero__desc { font-size: 11px; line-height: 1.35; } }
/* 2026-10-23 revisi pemilik: tombol di banner efek 3D lebih tipis (kaki 1-2px, tanpa bayangan tebal) */
.z-hero .z-btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 #3b256b; }
html[data-tema="terang"] .z-hero .z-btn { border-width: 1px; box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), 0 2px 0 #7655b6, 0 3px 6px rgba(91,58,136,.12); }
.z-hero .z-btn:active { transform: translateY(1px); }

/* ---------- 2026-10-23 pemilik: kartu sapaan "header halaman utama" di Video & App (menggantikan banner) ----------
   Nilai disalin dari kartu Beranda (diukur computed style beranda, 2 tema, 360px). Isi oleh assets/js/kepala.js. */
.z-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.z-kepala { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; margin: 0 0 12px; border-radius: 20px; font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: #161926; border: 1px solid rgba(255,255,255,.8); background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.36));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(30,16,70,.12); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); }
html:not([data-tema="terang"]) .z-kepala { color: #f4f4f5; border-color: rgba(144,105,233,.3); background: #111113; box-shadow: 0 2px 10px rgba(0,0,0,.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.zk-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid #EEE8FC; background: #EEE8FC;
  box-shadow: -4px -4px 10px rgba(255,255,255,.95), 5px 5px 12px rgba(118,92,190,.3); }
html:not([data-tema="terang"]) .zk-avatar { border-color: #1A1436; background: #1A1436; box-shadow: -3px -3px 8px rgba(255,255,255,.07), 5px 5px 12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08); }
.zk-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.zk-info { flex: 1; min-width: 0; }
.zk-sapa { font-size: 12px; font-weight: 700; line-height: 15px; letter-spacing: .2px; color: #4F2E94; }
html:not([data-tema="terang"]) .zk-sapa { color: #D5C2F5; }
.zk-nama { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.25; color: #1B1730; }
html:not([data-tema="terang"]) .zk-nama { color: #fff; }
#zkNama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zk-chip { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 99px;
  font: 800 9.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .38px; color: #6744a6; background: #fff; box-shadow: var(--z-clay-s); }
.zk-chip[hidden] { display: none; }
html:not([data-tema="terang"]) .zk-chip { color: #D4C6F5; background: rgba(255,255,255,.08); box-shadow: none; }
.zk-chip .i3d { width: 12px; height: 12px; }
.zk-aksi { flex: none; display: flex; align-items: center; gap: 8px; }
.zk-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 12px; cursor: pointer; text-decoration: none;
  border: 1px solid #D8CBF5; background: linear-gradient(#fff, #F1ECFD); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #B9A2EE, 0 4px 10px rgba(98,41,238,.12);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html:not([data-tema="terang"]) .zk-btn { border-color: rgba(255,255,255,.1); background: #18181B; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.12); }
.zk-btn:active { transform: translateY(2px); }
.zk-btn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
html[data-tema="terang"] .zk-btn:focus-visible { outline-color: #6744a6; }
.zk-btn .i3d { width: 18px; height: 18px; }
@media (max-width: 389px) { .zk-nama { font-size: 12.9px; } }

/* 2026-10-23 pemilik: keadaan kosong = ilustrasi 3D (kardus Fluent) + kalimat ramah, melayang pelan (mati bila HP minta kurangi gerak) */
.z-kosong { display: grid; justify-items: center; gap: 8px; padding: 26px 16px; text-align: center; grid-column: 1 / -1; }
.z-kosong .i3d { width: 72px; height: 72px; animation: zKosongMelayang 3.2s ease-in-out infinite; }
.z-kosong p, .z-kosong span { margin: 0; max-width: 30ch; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--z-text2); }
@keyframes zKosongMelayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .z-kosong .i3d { animation: none; } }
/* 2026-11-05 pemilik: ikon REELS menu bawah = SVG "69" (app-nav.js) seukuran ikon lain */
.app-nav a .nav-69 { display: block; width: 21px; height: 21px; }