/* =====================================================
tema-serasi.css - 2026-11-01 pemilik: tema gelap & terang harus SATU gaya (bentuk, huruf, ukuran, sudut, jarak sama),
yang beda hanya warna. Tema gelap: "elegan, modern, mahal, kombinasi warna tidak flat".
File ini dimuat PALING AKHIR di halaman pengunjung dan HANYA mengubah tema gelap (tema terang tidak disentuh):
- permukaan berlapis: gradasi ungu-tinta + cahaya lembut di pojok kiri atas (dulu hitam polos #111)
- bingkai tipis gradasi ungu -> magenta -> cyan (dulu satu garis ungu)
- kilau tipis di tepi atas + bayangan jatuh NETRAL (2026-11-01 pemilik: tanpa glow/pendar berwarna di semua UI)
- sudut sama dengan tema terang (panel 20px)
Hapus file ini dari = tema gelap kembali seperti sebelum 1 Nov (kecuali huruf & bentuk kartu).
===================================================== */
html:not([data-tema="terang"]) {
/* 2026-11-01 pemilik: dasar semua panel = hitam charcoal (dulu ungu-tinta); ungu hanya aksen di tepi tipis */
--s-hi: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%);
--s-body: linear-gradient(175deg, #1e1e22 0%, #161618 45%, #0f0f11 100%);
--s-edge: linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 45%, rgba(169,141,224,.24));
--s-shine: inset 0 1px 0 rgba(255,255,255,.065);
--s-shadow: 0 6px 16px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35); /* netral, bukan pendar ungu */
--s-well: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
}
/* ---------- panel umum (Akun, Video, Aplikasi, Notifikasi, VIP, FAQ, Ketentuan) ---------- */
html:not([data-tema="terang"]) .z-card {
border: 1px solid transparent; border-radius: 20px;
background: var(--s-hi) padding-box, var(--s-body) padding-box, var(--s-edge) border-box;
box-shadow: var(--s-shine), var(--s-shadow);
}
/* ---------- Akun ---------- */
html:not([data-tema="terang"]) .acc-top {
border-radius: 0 0 26px 26px;
background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%), linear-gradient(175deg, #1e1e22 0%, #161618 45%, #0f0f11 100%);
}
html:not([data-tema="terang"]) .acc-top::after { display: none; }
/* 2026-11-01 pemilik: kartu Akun Ketua & Menu Lainnya = HITAM CHARCOAL elegan (bukan ungu-biru): permukaan arang berlapis,
tepi tipis keperakan, kepala kartu arang sedikit lebih terang, teks putih & abu terang (tidak pucat), aksen ungu hanya di titik & panah */
html:not([data-tema="terang"]) .acc-group {
border: 1px solid transparent; border-radius: 20px;
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,
linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 45%, rgba(169,141,224,.22)) border-box;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px -10px rgba(0,0,0,.8);
}
html:not([data-tema="terang"]) .acc-gh { color: #ececf1; background: linear-gradient(180deg, #26262b, #1d1d21); border-bottom-color: rgba(255,255,255,.08); }
html:not([data-tema="terang"]) .acc-gh::before { background: #a98de0; }
html:not([data-tema="terang"]) .acc-item b { color: #ffffff; }
html:not([data-tema="terang"]) .acc-item small { color: #b8b8c2; }
html:not([data-tema="terang"]) .acc-item .chev, html:not([data-tema="terang"]) .acc-item > .fi-angle-small-right { color: #a98de0; } /* panah semua menu sama (3 menu Menu Lainnya dulu putih) */
html:not([data-tema="terang"]) .acc-item + .acc-item::before { background: rgba(255,255,255,.08); opacity: 1; }
html:not([data-tema="terang"]) .acc-group .acc-item .ii { background: linear-gradient(150deg, #2c2c32, #1c1c20); border-color: rgba(255,255,255,.10); }
/* tiga ubin: warna berbeda seperti tema terang (ungu / pink / kuning), versi gelap yang dalam */
html:not([data-tema="terang"]) .acc-tiles > * { border: 1px solid transparent; box-shadow: var(--s-shine), var(--s-shadow); }
html:not([data-tema="terang"]) .acc-tiles > :nth-child(1) {
background: radial-gradient(120% 90% at 0% 0%, rgba(169,141,224,.30), transparent 60%) padding-box, linear-gradient(155deg, #2a1d4f, #150f27) padding-box,
linear-gradient(145deg, rgba(196,170,255,.6), rgba(144,105,233,.18)) border-box; }
html:not([data-tema="terang"]) .acc-tiles > :nth-child(2) {
background: radial-gradient(120% 90% at 0% 0%, rgba(236,72,153,.26), transparent 60%) padding-box, linear-gradient(155deg, #3a1534, #1a0d1d) padding-box,
linear-gradient(145deg, rgba(244,114,182,.55), rgba(192,38,211,.18)) border-box; }
html:not([data-tema="terang"]) .acc-tiles > :nth-child(3) {
background: radial-gradient(120% 90% at 0% 0%, rgba(251,191,36,.22), transparent 60%) padding-box, linear-gradient(155deg, #33240f, #18110b) padding-box,
linear-gradient(145deg, rgba(252,211,77,.5), rgba(217,119,6,.16)) border-box; }
/* sumur ikon: kaca tipis, bukan kotak datar */
html:not([data-tema="terang"]) .acc-tiles .ti, html:not([data-tema="terang"]) .acc-item .ii {
background: var(--s-well); border: 1px solid rgba(255,255,255,.09); box-shadow: var(--s-shine), 0 4px 10px rgba(0,0,0,.35); }
/* ---------- Beranda ---------- */
/* tombol menu (Join VIP / Pembelian / Info Live) & tombol header: permukaan berlapis, tepi 3D tetap */
html:not([data-tema="terang"]) body.beranda .menu-panel > *, html:not([data-tema="terang"]) body.beranda .mact-btn {
background: var(--s-hi), linear-gradient(180deg, #27272c 0%, #1a1a1e 100%);
border-color: rgba(255,255,255,.12);
}
/* kartu saldo & header kaca: sedikit rona ungu supaya tidak hitam datar (kaca & blur tetap) */
html:not([data-tema="terang"]) body.beranda .saldo-menu-card, html:not([data-tema="terang"]) body.beranda .header.member-card {
background-image: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%); background-color: #161618;
border-color: rgba(255,255,255,.13);
}
/* kartu talent: isi berlapis yang sama (bingkai pelangi talent tetap) */
html:not([data-tema="terang"]) body.beranda .card, html:not([data-tema="terang"]) body.beranda .card.live {
background: var(--s-hi) padding-box, linear-gradient(175deg, #1e1e22 0%, #161618 45%, #0f0f11 100%) padding-box,
linear-gradient(145deg, #9069c9, #e8189a 55%, #22d3ee) border-box;
}
/* ---------- tombol utama Isi Saldo (Beranda) & Join VIP (Akun): bentuk & kaki 3D sama dengan tema terang ---------- */
html:not([data-tema="terang"]) body.beranda .saldo-topup-btn, html:not([data-tema="terang"]) .vip-card .z-btn {
min-height: 40px; padding: 0 14px; border-radius: 14px; color: #fff; border: 1px solid rgba(214,196,255,.45);
background: linear-gradient(180deg, #8f6fdc 0%, #6a48bd 52%, #4d2f94 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 0 #331f5e, 0 7px 12px -6px rgba(0,0,0,.6);
}
html:not([data-tema="terang"]) body.beranda .saldo-topup-btn:active, html:not([data-tema="terang"]) .vip-card .z-btn:active {
transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 0 #331f5e;
}
/* "PAYMENT PROTECTION" (popup isi saldo): huruf baru lebih lebar -> jarak huruf 0 juga di tema gelap supaya satu baris di HP 320-360 */
html:not([data-tema="terang"]) body.beranda .pay-protect .secure-title { letter-spacing: 0; }
/* ---------- 2026-11-01 pemilik: tanpa glow di semua UI (kedua tema) ----------
Pendar 0 0 berwarna sudah dibuang di file asalnya; di sini bayangan berwarna yang tampak seperti pendar diganti netral. */
html:not([data-tema="terang"]) body.beranda { --t-cta-glow: rgba(0,0,0,.4); }
html[data-tema="terang"] body.beranda { --t-cta-glow: rgba(46,20,112,.16); }
html:not([data-tema="terang"]) body.beranda .card.live { box-shadow: 0 6px 14px rgba(0,0,0,.45); }
html[data-tema="terang"] body.beranda .card.live { box-shadow: 0 6px 14px rgba(46,20,112,.12); }
html:not([data-tema="terang"]) .app-nav a.center .fi { box-shadow: 0 0 0 3px #0c0c0e, 0 3px 8px rgba(0,0,0,.5); }
/* =====================================================
2026-11-01 audit pemilik (9 poin) - berlaku KEDUA tema kecuali disebut
===================================================== */
/* ---- header halaman utama (Video, Aplikasi, Informasi, Akun) = ukuran header Beranda (diukur: tinggi 52, logo 187x32, tombol 38) ---- */
.z-kepala { padding: 6px 6px 6px 8px; margin: -2px 0 12px; border-radius: 20px; }
.zk-logo { flex: 1; min-width: 0; display: block; }
.zk-logo img { display: block; width: 187px; max-width: 100%; height: auto; }
.zk-btn { box-shadow: inset 0 1px 0 #fff, 0 3px 0 #B9A2EE, 0 6px 14px rgba(98,41,238,.14); }
html:not([data-tema="terang"]) .z-kepala {
background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%), #161618;
border-color: rgba(255,255,255,.13); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
html:not([data-tema="terang"]) .zk-btn { border-color: rgba(255,255,255,.12);
background: var(--s-hi), linear-gradient(180deg, #27272c 0%, #1a1a1e 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 rgba(0,0,0,.6); }
.info-kepala { margin-top: 8px; }
/* ---- halaman dalam (Notifikasi, FAQ, Ketentuan, VIP, Panduan Talent): tombol kembali bulat ikon saja + judul ---- */
.z-pagehead.z-dalam { justify-content: flex-start; gap: 10px; margin: 6px 0 14px; }
.z-back.z-back-ikon { width: 40px; min-height: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; flex: none; }
.z-back.z-back-ikon .fi { font-size: 18px; }
.z-back.z-back-ikon::after { content: ""; position: absolute; inset: -2px; } /* area sentuh 44px */
.z-back.z-back-ikon { position: relative; }
/* ---- Akun: kartu profil tetap menempel penuh di atas seperti aslinya (pemilik 1 Nov: Akun TANPA header logo) + avatar ikon orang ---- */
.acc-ava { width: 56px; height: 56px; }
.acc-ava svg { width: 40px; height: 40px; }
html:not([data-tema="terang"]) .acc-ava { color: #e4d8ff; background: linear-gradient(150deg, #45288a, #24144f); border: 2px solid rgba(196,170,255,.55); }
html[data-tema="terang"] .acc-ava { color: #6744a6; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 2px #bca7e9; }
/* ---- kartu Status VIP = emas, ubin Bantuan = cyan (ditukar; aksen hijau-toska -> cyan) ---- */
html:not([data-tema="terang"]) .vip-card {
background: radial-gradient(120% 120% at 0% 0%, rgba(251,191,36,.24), transparent 55%), linear-gradient(155deg, #3a2a0e 0%, #1f1609 100%);
border: 1px solid rgba(252,211,77,.45); }
html[data-tema="terang"] .vip-card { background: linear-gradient(145deg, #fff3d1, #ffe2a1); border: 2px solid #fff; }
html:not([data-tema="terang"]) .acc-tiles > :nth-child(3) {
background: radial-gradient(120% 90% at 0% 0%, rgba(34,211,238,.24), transparent 60%) padding-box, linear-gradient(155deg, #0f2d38, #0a1a22) padding-box,
linear-gradient(145deg, rgba(103,232,249,.55), rgba(8,145,178,.18)) border-box; }
html[data-tema="terang"] .acc-tiles > :nth-child(3) { background: linear-gradient(145deg, #d6f6fb, #b3ecf5); }
/* ---- Beranda: Isi Saldo "+", foto talent berwarna (offline tidak hitam-putih) ---- */
body.beranda .saldo-topup-btn .topup-plus { font-size: 18px; font-weight: 800; line-height: 1; margin-top: -2px; }
html body.beranda .card.offline .thumb img, html body.beranda .card.offline .thumb .ph { filter: none; opacity: 1; }
/* ---- lencana LIVE = contoh pemilik: pil merah, titik putih + gelombang siaran, "LIVE" tebal ---- */
html body.beranda .badge.badge-live { gap: 4px; padding: 0 7px 0 6px; color: #fff; background: #e10600; border: 0; box-shadow: none; font-weight: 800; letter-spacing: .4px; }
html body.beranda .badge-live .dot { position: relative; width: 5px; height: 5px; border-radius: 50%; background: #fff; margin-right: 5px; }
html body.beranda .badge-live .dot::after { content: ""; position: absolute; left: 3px; top: -3px; width: 7px; height: 11px; border: 1.5px solid #fff; border-left-color: transparent;
border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: pbSiar 1.4s ease-in-out infinite; }
@keyframes pbSiar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* ---- lencana ONLINE (Private Talent) = contoh GIF pemilik: pil gelap, titik hijau berkedip + ONLINE ---- */
html body.beranda .badge.badge-priv-card { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px 0 6px; color: #fff; background: rgba(20,20,24,.82); border: 1px solid rgba(255,255,255,.14); }
html body.beranda .badge-priv-card .odot { width: 7px; height: 7px; border-radius: 50%; background: #22e55b; animation: pbKedip 1.6s ease-in-out infinite; }
@keyframes pbKedip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { html body.beranda .badge-live .dot::after, html body.beranda .badge-priv-card .odot { animation: none; } }
/* ---- tombol Booking minimalis: garis tipis, tanpa 3D ---- */
html body.beranda .card.private .priv-book-btn { min-height: 28px; margin-top: 6px; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .2px;
color: var(--z-accent); background: transparent; border: 1px solid currentColor; box-shadow: none; }
html body.beranda .card.private:active .priv-book-btn { transform: none; background: rgba(169,141,224,.14); }
/* ---- kotak cari: di bawah judul/teks, tepat sebelum kartu ---- */
html body.beranda #talentSection #browse { margin: 0 0 12px; }
html body.beranda.view-live #browse { margin-top: 0; }
/* ---- kartu video: durasi di KIRI atas, judul 10px, lencana status di bawah judul ---- */
.pthumb .p-dur { right: auto; left: 6px; }
#vidList .tname, body.beranda #vidRail .tname { font-size: 10px; }
.vstat { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; margin-top: 4px; }
.vbadge { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: .4px; }
.vbadge.vip { color: #fff; background: linear-gradient(180deg, #8f6fdc, #5b3ba8); }
.vbadge.free { color: #04323a; background: #67e8f9; }
.vbadge.milik { color: #fff; background: #0e7490; }
.vbadge.batal { color: #fff; background: #6b7280; }
.vharga { font-size: 11.5px; font-weight: 800; color: #67e8f9; }
.vcoret { flex-basis: 100%; font-size: 10px; font-weight: 600; color: #8f87a6; }
html[data-tema="terang"] .vharga { color: #0B5566; }
html[data-tema="terang"] .vcoret { color: #74677f; }
/* ---- halaman masuk: "Ikuti kami di" = ikon saja (nama di aria-label) ---- */
body.masuk .contact-row { justify-content: center; gap: 14px; }
body.masuk .contact-row .contact-item, body.masuk .contact-row .contact-item:hover { flex: none; width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; justify-content: center; }
body.masuk .contact-row .contact-item span { display: none; }
body.masuk .contact-row .contact-item img { width: 22px; height: 22px; }
/* ---- pemutar video: lebar kotak mengikuti video (video tegak tidak menyisakan pita gelap tebal) ---- */
.vplay-box { width: min(760px, 100%, max(320px, calc((100dvh - 230px) * var(--ar, 1.7778)))); max-width: 100%; }
.vplay-frame { margin: 0 auto; }
/* ---------- 2026-11-01 pemilik: charcoal juga untuk popup (isi saldo, booking, talent offline, riwayat) & kotak isian ---------- */
html:not([data-tema="terang"]) body.beranda .sheet { background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.05), transparent 60%), #161618; border-color: rgba(255,255,255,.12); }
html:not([data-tema="terang"]) .acc-tiles .ti, html:not([data-tema="terang"]) .acc-item .ii { background: linear-gradient(180deg, #27272c 0%, #1a1a1e 100%); }
/* ---------- 2026-11-01 pemilik: lencana tetap KAPITAL, TOMBOL pakai huruf biasa (dulu sebagian dikapitalkan otomatis) ---------- */
html body .btn, html body.beranda .refresh-btn, html body.beranda .menu-panel > *, html body.beranda .menu-panel p, html body .logout,
html body .z-btn, html body.beranda .saldo-topup-btn { text-transform: none; }
/* ---------- 2026-11-01 pemilik: layar Memuat (assets/js/memuat.js) - logo ZonaAsupan69 + garis berjalan.
Hanya tampil bila menunggu > 450 ms; TIDAK menghalangi sentuhan (pointer-events none); tanpa pendar. ---------- */
#zMemuat { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
padding: 24px; pointer-events: none; background: rgba(246, 241, 255, .92); animation: zmMasuk .18s ease-out both; }
#zMemuat[hidden] { display: none; }
html:not([data-tema="terang"]) #zMemuat { background: rgba(12, 12, 14, .92); }
#zMemuat .zm-logo { width: min(300px, 78vw); height: auto; aspect-ratio: 4096 / 1546; object-fit: contain; }
#zMemuat .zm-bar { position: relative; width: min(200px, 56vw); height: 5px; border-radius: 99px; overflow: hidden; background: rgba(144, 105, 201, .22); }
#zMemuat .zm-isi { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 99px; background: linear-gradient(90deg, #9069c9, #e0399f);
animation: zmJalan 1.1s ease-in-out infinite; }
#zMemuat .zm-teks { font: 600 14px "Plus Jakarta Sans", system-ui, sans-serif; color: #4a4562; }
html:not([data-tema="terang"]) #zMemuat .zm-teks { color: #e9e4f7; }
@keyframes zmJalan { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes zmMasuk { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #zMemuat { animation: none; } #zMemuat .zm-isi { animation: none; left: 30%; } }