/* ===================================================== TEMA BERANDA "DESAIN 9" (disetujui pemilik 2026-10-11) - mode gelap & terang Revisi 2026-10-11 (masukan pemilik dari HP): foto di kartu VIP dihapus (warna kotor) -> gradasi bersih; kaca dibuat terlihat (bola 3D di belakang kartu saldo); gaya timbul (neumorphism) dibuat nyata di tombol kecil. Hanya berlaku saat beranda tampil (body.beranda, dipasang home.js) dan saat memuat beranda (html.pra-beranda, dipasang tema-awal.js). Login, halaman nonton, Studio TIDAK tersentuh. Garis --hairline (terkunci) tetap. Ringan di HP: bola 3D = gradasi biasa (tanpa filter blur); kaca buram hanya di header & kartu saldo. ===================================================== */ /* ---------- Token: MODE GELAP ---------- */ body.beranda, html.pra-beranda body { --t-bg: #0e0a1f; --t-bg-grad: linear-gradient(165deg, #1a1236 0%, #0e0a1f 45%, #0b1022 100%); --t-text: #f2eeff; --t-sub: #a9a3c2; --t-muted: #8c86a6; --t-accent: #c9b6ff; --t-greet: #b9a3ff; --t-header-bg: rgba(14, 10, 31, 0.72); /* timbul (neumorphism) */ --t-neu-bg: #1a1436; --t-neu: -3px -3px 8px rgba(255, 255, 255, 0.07), 5px 5px 12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08); --t-neu-press: inset 3px 3px 7px rgba(0, 0, 0, 0.65), inset -2px -2px 6px rgba(255, 255, 255, 0.06); --t-inset-bg: #120d27; --t-inset: inset 3px 3px 8px rgba(0, 0, 0, 0.65), inset -3px -3px 8px rgba(255, 255, 255, 0.05); /* kaca */ --t-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)); --t-glass-border: rgba(255, 255, 255, 0.2); --t-glass-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28), 0 18px 36px rgba(0, 0, 0, 0.45); --t-tile-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)); --t-tile-border: rgba(255, 255, 255, 0.18); --t-tile-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), 4px 4px 10px rgba(0, 0, 0, 0.45); /* tombol ungu 3D */ --t-cta-edge: #2e0f80; --t-cta-glow: rgba(98, 41, 238, 0.5); /* kartu VIP */ --t-promo-bg: linear-gradient(120deg, #3a1aa8 0%, #6b25c9 50%, #b02a8e 100%); --t-promo-edge: #1e0a5c; --t-promo-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); --t-stats-num: #99f9ff; --t-join-bg: linear-gradient(135deg, #2b2b2b, #0a0a0a); --t-join-color: #ffffff; --t-join-border: rgba(255, 255, 255, 0.16); --t-join-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 0 #000000, 0 6px 12px rgba(0, 0, 0, 0.45); /* kartu talent */ --t-live-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)); --t-live-border: rgba(255, 255, 255, 0.3); --t-live-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 0 0 2px #8b5cff, 0 12px 26px rgba(139, 92, 255, 0.4); --t-off-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); --t-off-border: rgba(255, 255, 255, 0.13); --t-off-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14), 6px 6px 14px rgba(0, 0, 0, 0.45); --t-off-filter: grayscale(0.7) brightness(0.7); --t-off-opacity: 1; --t-badge-off-bg: rgba(11, 8, 22, 0.65); --t-badge-off-color: #c7c1de; --t-viewers-bg: rgba(11, 8, 22, 0.6); --t-price-bg: linear-gradient(180deg, #8460ff, #6229ee); --t-price-color: #ffffff; --t-price-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #2e0f80, 0 6px 12px rgba(0, 0, 0, 0.4); --t-status-live: #c9b6ff; --t-status-paid: #4ade80; --t-status-off: #8c86a6; --t-footer-text: #8c86a6; --t-footer-strong: #f2eeff; --t-state-bg: rgba(255, 255, 255, 0.05); /* bola 3D: kilau + badan; diletakkan di belakang kartu saldo supaya kaca terlihat */ --t-orbs: radial-gradient(circle at 35% 30%, rgba(233, 221, 255, 0.85) 0, rgba(233, 221, 255, 0) 30%) right 26px top 96px / 112px 112px no-repeat, radial-gradient(circle closest-side, #a27bff 0%, #6229ee 55%, #2a0c78 88%, #16063f 97%, rgba(22, 6, 63, 0) 100%) right 26px top 96px / 112px 112px no-repeat, radial-gradient(circle at 35% 30%, rgba(255, 224, 239, 0.85) 0, rgba(255, 224, 239, 0) 30%) left 34px top 104px / 92px 92px no-repeat, radial-gradient(circle closest-side, #ff7ab8 0%, #c0247a 60%, #5e0f3d 97%, rgba(94, 15, 61, 0) 100%) left 34px top 104px / 92px 92px no-repeat, radial-gradient(circle at 35% 30%, rgba(224, 251, 255, 0.85) 0, rgba(224, 251, 255, 0) 30%) right 6px top 470px / 64px 64px no-repeat, radial-gradient(circle closest-side, #6fd6f5 0%, #1f7fb0 60%, #0b3550 97%, rgba(11, 53, 80, 0) 100%) right 6px top 470px / 64px 64px no-repeat, radial-gradient(circle at 35% 30%, rgba(233, 221, 255, 0.8) 0, rgba(233, 221, 255, 0) 30%) left -54px top 820px / 130px 130px no-repeat, radial-gradient(circle closest-side, #a27bff 0%, #5b2cc9 55%, #1e0a5c 97%, rgba(30, 10, 92, 0) 100%) left -54px top 820px / 130px 130px no-repeat, radial-gradient(circle at 35% 30%, rgba(255, 224, 239, 0.8) 0, rgba(255, 224, 239, 0) 30%) right -40px top 1180px / 110px 110px no-repeat, radial-gradient(circle closest-side, #ff7ab8 0%, #b02a8e 60%, #4a0d3a 97%, rgba(74, 14, 58, 0) 100%) right -40px top 1180px / 110px 110px no-repeat; } /* ---------- Token: MODE TERANG ---------- */ html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { --t-bg: #ece6fb; --t-bg-grad: linear-gradient(165deg, #f4ecfe 0%, #ebe4fb 45%, #e2ecfb 100%); --t-text: #161926; --t-sub: #4e5266; --t-muted: #6b6f84; --t-accent: #6229ee; --t-greet: #6229ee; --t-header-bg: rgba(244, 236, 254, 0.72); --t-neu-bg: #eee8fc; --t-neu: -4px -4px 10px rgba(255, 255, 255, 0.95), 5px 5px 12px rgba(118, 92, 190, 0.3); --t-neu-press: inset 3px 3px 7px rgba(118, 92, 190, 0.3), inset -3px -3px 7px rgba(255, 255, 255, 0.95); --t-inset-bg: #e8e1f9; --t-inset: inset 3px 3px 7px rgba(118, 92, 190, 0.26), inset -3px -3px 7px rgba(255, 255, 255, 0.95); --t-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)); --t-glass-border: rgba(255, 255, 255, 0.85); --t-glass-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -10px 20px rgba(98, 41, 238, 0.06), 0 18px 36px rgba(98, 41, 238, 0.18); --t-tile-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18)); --t-tile-border: rgba(255, 255, 255, 0.9); --t-tile-shadow: inset 0 1px 1px #ffffff, -3px -3px 8px rgba(255, 255, 255, 0.7), 4px 4px 10px rgba(118, 92, 190, 0.22); --t-cta-edge: #3e14a8; --t-cta-glow: rgba(98, 41, 238, 0.38); --t-promo-bg: linear-gradient(120deg, #5b2bea 0%, #8b3cf0 48%, #e04fa8 100%); --t-promo-edge: #3e14a8; --t-promo-shadow: 0 14px 28px rgba(140, 60, 220, 0.38); --t-stats-num: #fff3c4; --t-join-bg: linear-gradient(180deg, #ffffff, #eee6ff); --t-join-color: #4a1dc2; --t-join-border: rgba(255, 255, 255, 0.9); --t-join-shadow: inset 0 1px 0 #ffffff, 0 3px 0 rgba(40, 10, 110, 0.5), 0 6px 12px rgba(0, 0, 0, 0.2); --t-live-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55)); --t-live-border: #ffffff; --t-live-shadow: inset 0 1px 1px #ffffff, 0 0 0 2px #9267fe, 0 12px 24px rgba(98, 41, 238, 0.28); --t-off-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)); --t-off-border: rgba(255, 255, 255, 0.9); --t-off-shadow: inset 0 1px 1px #ffffff, -4px -4px 10px rgba(255, 255, 255, 0.6), 6px 6px 14px rgba(118, 92, 190, 0.2); --t-off-filter: saturate(0.35) brightness(0.95); --t-off-opacity: 0.88; --t-badge-off-bg: rgba(255, 255, 255, 0.88); --t-badge-off-color: #4e5266; --t-viewers-bg: rgba(22, 25, 38, 0.5); --t-price-bg: linear-gradient(180deg, #ffffff, #eee6ff); --t-price-color: #6229ee; --t-price-shadow: 0 3px 0 rgba(62, 20, 168, 0.35), 0 6px 12px rgba(22, 25, 38, 0.25); --t-status-live: #6229ee; --t-status-paid: #15803d; --t-status-off: #6b6f84; --t-footer-text: #6b6f84; --t-footer-strong: #161926; --t-state-bg: rgba(255, 255, 255, 0.6); --t-orbs: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 30%) right 26px top 96px / 112px 112px no-repeat, radial-gradient(circle closest-side, #e6d8ff 0%, #a27bff 40%, #6229ee 80%, #3e14a8 97%, rgba(62, 20, 168, 0) 100%) right 26px top 96px / 112px 112px no-repeat, radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 30%) left 34px top 104px / 92px 92px no-repeat, radial-gradient(circle closest-side, #ffe0ef 0%, #ff94c6 50%, #e0457b 97%, rgba(224, 69, 123, 0) 100%) left 34px top 104px / 92px 92px no-repeat, radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 30%) right 6px top 470px / 64px 64px no-repeat, radial-gradient(circle closest-side, #d6f8ff 0%, #74d8f5 50%, #2a8fc0 97%, rgba(42, 143, 192, 0) 100%) right 6px top 470px / 64px 64px no-repeat, radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 30%) left -54px top 820px / 130px 130px no-repeat, radial-gradient(circle closest-side, #e6d8ff 0%, #b08cff 45%, #6e3bf2 82%, #4517b8 97%, rgba(69, 23, 184, 0) 100%) left -54px top 820px / 130px 130px no-repeat, radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 30%) right -40px top 1180px / 110px 110px no-repeat, radial-gradient(circle closest-side, #ffe0ef 0%, #ffa3cf 50%, #d9468a 97%, rgba(217, 70, 138, 0) 100%) right -40px top 1180px / 110px 110px no-repeat; } /* ---------- Latar + bola 3D ---------- */ body.beranda, html.pra-beranda body { position: relative; color: var(--t-text); background-color: var(--t-bg); background-image: var(--t-bg-grad); background-attachment: scroll; } body.beranda::before, html.pra-beranda body::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--t-orbs); } body.beranda .container, html.pra-beranda .container { position: relative; z-index: 1; } /* ---------- Header (kaca) ---------- */ body.beranda .header, html.pra-beranda .header { background-color: var(--t-header-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); } /* kerangka "memuat" sebelum beranda tampil */ html.pra-beranda .skeleton, html.pra-beranda .sk-card { background: var(--t-neu-bg); border-color: transparent; } body.beranda .member-avatar { border: 2px solid var(--t-neu-bg); background: var(--t-neu-bg); box-shadow: var(--t-neu); } body.beranda .member-greeting { color: var(--t-greet); font-weight: 700; } body.beranda .member-name { color: var(--t-text); } /* tombol kecil header = timbul */ body.beranda .mact-btn { border: 0; border-radius: 12px; color: var(--t-text); background: var(--t-neu-bg); box-shadow: var(--t-neu); } body.beranda .mact-btn:hover { background: var(--t-neu-bg); } body.beranda .mact-btn:active { transform: none; box-shadow: var(--t-neu-press); } /* tombol menu = ungu 3D */ body.beranda #menuBtn { color: #ffffff; background: linear-gradient(180deg, #8460ff 0%, #6229ee 65%, #5520d8 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--t-cta-edge), 0 6px 14px var(--t-cta-glow); } body.beranda #menuBtn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 1px 0 var(--t-cta-edge); } /* Tombol ganti tema: ikon matahari saat gelap, bulan saat terang */ #temaBtn .tema-terang, html[data-tema="terang"] #temaBtn .tema-gelap { display: none; } html[data-tema="terang"] #temaBtn .tema-terang { display: block; } /* ---------- Kartu saldo + menu cepat (kaca di atas bola 3D) ---------- */ body.beranda .saldo-menu-card { background: var(--t-glass-bg); border: 1.5px solid var(--t-glass-border); box-shadow: var(--t-glass-shadow); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); } body.beranda .saldo-menu-card::before, body.beranda .promo-card::before { display: none; } body.beranda .saldo-icon-box { border: 0; background: var(--t-neu-bg); box-shadow: var(--t-neu); } body.beranda .saldo-label { color: var(--t-sub); } body.beranda .saldo-label b { color: var(--t-accent); } body.beranda .saldo-value { background: none; -webkit-text-fill-color: currentColor; color: var(--t-text); } body.beranda .saldo-topup-btn { color: #ffffff; border: 0; text-shadow: none; background: linear-gradient(180deg, #8460ff 0%, #6229ee 60%, #5520d8 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 4px 0 var(--t-cta-edge), 0 10px 18px var(--t-cta-glow); } body.beranda .saldo-topup-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 1px 0 var(--t-cta-edge), 0 4px 8px var(--t-cta-glow); } /* 3 menu = kaca bening di atas bola 3D (+ bayangan timbul tipis) */ body.beranda .menu-panel { gap: 8px; padding: 6px 10px 10px; } body.beranda .menu-panel > * { background: var(--t-tile-bg); border: 1px solid var(--t-tile-border); box-shadow: var(--t-tile-shadow); } body.beranda .menu-panel > *::before { display: none; } body.beranda .menu-panel > *:hover { box-shadow: var(--t-tile-shadow); border-color: #9267fe; } body.beranda .menu-panel > *:active { transform: none; box-shadow: var(--t-neu-press); } body.beranda .menu-panel p { color: var(--t-text); } /* ---------- Kartu VIP: tanpa foto, gradasi bersih + kilau + bola emas ---------- */ body.beranda .promo-card { border-radius: 12px; background: var(--t-promo-bg); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 4px 0 var(--t-promo-edge), var(--t-promo-shadow); } body.beranda .promo-bg { display: none; } /* lapisan gelap lama -> kilau kaca miring (kiri atas) + bola emas kecil (kanan atas) */ body.beranda .promo-overlay { background: radial-gradient(circle at 35% 30%, #ffffff 0, rgba(255, 255, 255, 0) 30%) right -12px top -14px / 54px 54px no-repeat, radial-gradient(circle closest-side, #fff1c2 0%, #f5b83d 55%, #b8720c 96%, rgba(184, 114, 12, 0) 100%) right -12px top -14px / 54px 54px no-repeat, linear-gradient(165deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 32%); } body.beranda .promo-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent); } body.beranda .promo-desc { text-shadow: none; } body.beranda .promo-card .secure-ticker { background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; } body.beranda .promo-card .tx-stat-num { color: var(--t-stats-num); } body.beranda .promo-card .tx-stat-label { color: rgba(255, 255, 255, 0.85); } body.beranda .promo-card .tx-stat-divider { background: rgba(255, 255, 255, 0.32); } body.beranda .promo-watch-btn { color: var(--t-join-color); background: var(--t-join-bg); border: 1px solid var(--t-join-border); box-shadow: var(--t-join-shadow); text-shadow: none; } body.beranda .promo-watch-btn svg { color: #f5b83d; } body.beranda .promo-watch-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.35); } body.beranda .promo-platform-box { border: 1.5px dashed rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); } body.beranda .promo-platform-text { color: #ffffff; } /* ---------- Filter (timbul) + cari (cekung) ---------- */ body.beranda .select-wrap select { border: 0; color: var(--t-text); background: var(--t-neu-bg); box-shadow: var(--t-neu); } body.beranda .select-wrap select:hover, body.beranda .select-wrap select:focus { box-shadow: var(--t-neu), 0 0 0 2px rgba(146, 103, 254, 0.45); } body.beranda .select-wrap .ico { color: var(--t-accent); } body.beranda .search input { border: 0; color: var(--t-text); background: var(--t-inset-bg); box-shadow: var(--t-inset); } body.beranda .search input:focus { box-shadow: var(--t-inset), 0 0 0 2px rgba(146, 103, 254, 0.45); } body.beranda .search input::placeholder { color: var(--t-muted); } body.beranda .search > .ico, body.beranda .search .clear { color: var(--t-muted); } /* ---------- Judul Daftar Talent ---------- */ body.beranda #talentSection { padding-top: 14px; background: var(--hairline) top / 100% 1px no-repeat; } body.beranda .section-head { border-bottom: 0; padding-bottom: 0; } body.beranda .section-head::after { display: none; } body.beranda .section-title { color: var(--t-text); } body.beranda .sec-icon { border: 0; background: var(--t-neu-bg); box-shadow: var(--t-neu); } body.beranda .refresh-btn { border: 0; color: var(--t-accent); background: var(--t-neu-bg); box-shadow: var(--t-neu); } body.beranda .refresh-btn .ico { color: var(--t-accent); } body.beranda .refresh-btn:active { transform: none; box-shadow: var(--t-neu-press); } /* ---------- Kartu talent: nama di BAWAH foto (desain 9) ---------- */ body.beranda .grid { gap: 10px; } body.beranda .card { padding: 5px; border-radius: 18px; background: var(--t-off-bg); border: 1px solid var(--t-off-border); box-shadow: var(--t-off-shadow); } body.beranda .card.live { background: var(--t-live-bg); border-color: var(--t-live-border); box-shadow: var(--t-live-shadow); } body.beranda .card .thumb { aspect-ratio: 4 / 5; border-radius: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); } body.beranda .card .thumb::after { display: none; } /* kilau tipis di atas foto (kesan kaca) */ body.beranda .card .thumb::before { height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)); } body.beranda .card.offline .thumb img, body.beranda .card.offline .thumb .ph { filter: var(--t-off-filter); opacity: var(--t-off-opacity); } body.beranda .meta { position: static; padding: 8px 4px 2px; pointer-events: auto; } body.beranda .meta-name { color: var(--t-text); text-shadow: none; text-transform: none; font-family: var(--sans); font-size: 12.9px; font-weight: 800; letter-spacing: 0; } body.beranda .meta-status { text-shadow: none; font-size: 11px; color: var(--t-status-off); } body.beranda .card.live .meta-status { color: var(--t-status-live); } body.beranda .meta-status.active, body.beranda .card.live .meta-status.active { color: var(--t-status-paid); } body.beranda .badge-live { background: linear-gradient(180deg, #ff5c93, #e0247a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 #8a1246, 0 4px 10px rgba(255, 61, 127, 0.45); } body.beranda .badge-off { background: var(--t-badge-off-bg); color: var(--t-badge-off-color); border: 0; } body.beranda .badge-viewers { background: var(--t-viewers-bg); } body.beranda .badge-price:not(.free) { top: auto; bottom: 8px; transform: translateX(-50%); color: var(--t-price-color); background: var(--t-price-bg); border: 0; box-shadow: var(--t-price-shadow); font-family: var(--sans); font-weight: 800; } body.beranda .badge-price.free { top: auto; bottom: 8px; transform: translateX(-50%); } body.beranda .sk-card { border-color: var(--t-off-border); background: var(--t-off-bg); } body.beranda .sk-thumb { aspect-ratio: 4 / 5; } /* ---------- Pesan / keadaan kosong ---------- */ body.beranda .state { background: var(--t-state-bg); border-color: rgba(146, 103, 254, 0.4); color: var(--t-text); } body.beranda .state p { color: var(--t-muted); } body.beranda .notice { color: var(--t-sub); } /* ---------- Footer ---------- */ body.beranda .footer { background: transparent; } body.beranda .footer::before { background: var(--hairline); height: 1px; } body.beranda .footer__text { color: var(--t-footer-text); } body.beranda .footer__text strong { color: var(--t-footer-strong); } /* Browser tanpa backdrop-filter: kaca lebih padat supaya teks tetap terbaca */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-tema="terang"] body.beranda .saldo-menu-card { background: rgba(255, 255, 255, 0.92); } body.beranda .saldo-menu-card { background: rgba(26, 18, 48, 0.95); } } /* ===================================================== POPUP beranda (menu, Isi Saldo, bayar, riwayat, talent offline) + toast Gelap = warna lama dirapikan ke 9 Gelap; terang = permukaan putih. Tombol utama ungu 3D sama dengan TOPUP SALDO di kedua mode. ===================================================== */ body.beranda .sheet { background: #150f29; border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 -10px 40px rgba(0, 0, 0, 0.5); } body.beranda .sheet::before { display: none; } body.beranda .modal .btn-primary, body.beranda .modal .btn-cta { color: #ffffff; border: 0; text-shadow: none; background: linear-gradient(135deg, #6229ee, #9267fe); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 var(--t-cta-edge), 0 8px 16px var(--t-cta-glow); } body.beranda .modal .btn-primary:active, body.beranda .modal .btn-cta:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 var(--t-cta-edge); } /* --- mode terang: token dasar didefinisikan ulang di dalam popup --- */ html[data-tema="terang"] body.beranda .modal, html[data-tema="terang"] body.beranda .toast { --text-primary: #161926; --text-secondary: #4e5266; --text-muted: #6b6f84; --text2: #4e5266; --text3: #6b6f84; --bg-surface: #f6f2fd; --bg-surface-elevated: #f1eafe; --border-subtle: rgba(98, 41, 238, 0.14); --border-medium: rgba(98, 41, 238, 0.28); --brand-primary-soft: #6229ee; --primary-light: #6229ee; --cyan: #0e7490; --warning: #b45309; color: #161926; } html[data-tema="terang"] body.beranda .modal { background: rgba(40, 24, 90, 0.35); } html[data-tema="terang"] body.beranda .sheet { background: #ffffff; border-color: rgba(98, 41, 238, 0.12); box-shadow: inset 0 1px 0 #ffffff, 0 -10px 40px rgba(62, 20, 168, 0.22); } html[data-tema="terang"] body.beranda .sheet-head h2 { color: #161926; } html[data-tema="terang"] body.beranda .modal .icon-btn.boxed { color: #161926; background: #f6f2fd; border: 1px solid rgba(98, 41, 238, 0.18); } html[data-tema="terang"] body.beranda .modal .btn-secondary { color: #4a1dc2; background: linear-gradient(180deg, #ffffff, #f1eafe); border: 1px solid rgba(98, 41, 238, 0.28); box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 rgba(98, 41, 238, 0.25); text-shadow: none; } html[data-tema="terang"] body.beranda .fee-note { background: #f6f2fd; border-color: rgba(98, 41, 238, 0.35); color: #4e5266; } html[data-tema="terang"] body.beranda .fee-note b { color: #161926; } html[data-tema="terang"] body.beranda .topup-grid button { color: #3e14a8; text-shadow: none; border: 1px solid rgba(146, 103, 254, 0.35); background: linear-gradient(180deg, #ffffff, #efe9fc); box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 rgba(98, 41, 238, 0.35), 0 6px 10px rgba(98, 41, 238, 0.12); } html[data-tema="terang"] body.beranda .topup-grid button:hover { border-color: #9267fe; } html[data-tema="terang"] body.beranda .topup-grid button:active { transform: translateY(2px); border-color: #9267fe; box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 rgba(98, 41, 238, 0.35); } html[data-tema="terang"] body.beranda .secure-section.pay-protect { background: #f6f2fd; border-color: rgba(98, 41, 238, 0.2); } html[data-tema="terang"] body.beranda .pay-protect .secure-ticker { background: #ffffff; border-color: rgba(98, 41, 238, 0.16); } html[data-tema="terang"] body.beranda .pay-protect .tx-stat-divider { background: rgba(98, 41, 238, 0.2); } html[data-tema="terang"] body.beranda .pay-lines .pay-total { border-top-color: rgba(98, 41, 238, 0.2); } html[data-tema="terang"] body.beranda .pay-lines .pay-total dd { color: #161926; } html[data-tema="terang"] body.beranda .offline-name { color: #6229ee; } html[data-tema="terang"] body.beranda .badge-off-inline { background: #f1eafe; color: #4e5266; } html[data-tema="terang"] body.beranda .modal .msg.ok, html[data-tema="terang"] body.beranda .modal .h-ico.plus, html[data-tema="terang"] body.beranda .modal .amt.plus { color: #15803d; } html[data-tema="terang"] body.beranda .modal .msg.warn { color: #b45309; } html[data-tema="terang"] body.beranda .modal .msg.err { color: #be123c; } html[data-tema="terang"] body.beranda .menu-list button:hover, html[data-tema="terang"] body.beranda .menu-list a:hover { background: #f6f2fd; } html[data-tema="terang"] body.beranda .toast { color: #161926; background: #ffffff; border: 1px solid rgba(98, 41, 238, 0.3); box-shadow: 0 18px 50px rgba(62, 20, 168, 0.25); } /* ===================================================== REVISI "LEBIH TENANG" 2026-10-11 (masukan pemilik): bola 3D & pendar dihapus, hierarki tombol (hanya TOPUP yang ungu 3D), huruf tebal dikurangi, kartu VIP tanpa dekorasi & gradasi ungu saja, kartu offline lebih ringan. Aturan di bawah sengaja MENIMPA aturan di atas. ===================================================== */ body.beranda, html.pra-beranda body { --t-bg-grad: linear-gradient(180deg, #120d26 0%, #0e0a1f 50%, #0c0d1e 100%); --t-promo-bg: linear-gradient(120deg, #3a1aa8 0%, #5523c4 60%, #6b2bd6 100%); --t-off-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --t-live-shadow: 0 0 0 2px #8b5cff, 0 8px 18px rgba(139, 92, 255, 0.25); } html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { --t-bg-grad: linear-gradient(180deg, #f5f0fe 0%, #efeafc 50%, #eceefb 100%); --t-promo-bg: linear-gradient(120deg, #5b2bea 0%, #6d35ee 60%, #8048f2 100%); --t-off-border: rgba(255, 255, 255, 0.95); --t-off-shadow: 0 2px 8px rgba(98, 41, 238, 0.07); --t-live-shadow: 0 0 0 2px #9267fe, 0 8px 18px rgba(98, 41, 238, 0.18); } /* latar tenang: tanpa bola & pendar */ body.beranda::before, html.pra-beranda body::before { display: none; } /* 3 menu: permukaan lembut (bukan kaca berwarna) */ body.beranda .menu-panel > * { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } html[data-tema="terang"] body.beranda .menu-panel > * { background: rgba(255, 255, 255, 0.75); border-color: #ffffff; box-shadow: 0 2px 6px rgba(98, 41, 238, 0.06); } body.beranda .menu-panel > *:hover { box-shadow: none; } body.beranda .menu-panel p { font-weight: 600; } /* hierarki: tombol menu netral seperti tombol header lain */ body.beranda #menuBtn { color: var(--t-text); background: var(--t-neu-bg); box-shadow: var(--t-neu); } body.beranda #menuBtn:active { transform: none; box-shadow: var(--t-neu-press); } /* hierarki: Muat Ulang = tombol teks biasa */ body.beranda .refresh-btn { background: transparent; box-shadow: none; padding: 0 6px; font-family: var(--sans); text-transform: none; font-size: 12px; font-weight: 600; letter-spacing: 0; } body.beranda .refresh-btn:active { box-shadow: none; opacity: 0.7; } /* hierarki: JOIN NOW = tombol sekunder (garis putih, tanpa 3D) */ body.beranda .promo-watch-btn { color: #ffffff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: none; } body.beranda .promo-watch-btn:active { transform: none; opacity: 0.8; box-shadow: none; } /* kartu VIP: tanpa bola emas & kilau */ body.beranda .promo-overlay { background: none; } body.beranda .promo-card { box-shadow: 0 8px 20px rgba(62, 20, 168, 0.25); border-color: rgba(255, 255, 255, 0.25); } body.beranda .promo-card::after { display: none; } body.beranda .promo-desc { font-weight: 500; } body.beranda .promo-card .secure-ticker { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); box-shadow: none; } body.beranda .promo-card .tx-stat-num { color: #ffffff; } body.beranda .promo-platform-box { border-color: rgba(255, 255, 255, 0.4); background: transparent; } body.beranda .promo-platform-text { font-weight: 500; } /* kartu talent: huruf lebih ringan, kilau foto dihapus */ body.beranda .meta-name { font-weight: 700; } body.beranda .meta-status { font-weight: 500; } body.beranda .card .thumb::before { display: none; } body.beranda .card .thumb { box-shadow: none; } /* Latar "awan pastel" (referensi pemilik 2026-10-11): lavender + pink + biru muda menyatu lembut */ body.beranda, html.pra-beranda body { --t-bg-grad: radial-gradient(70% 38% at 15% 12%, rgba(98, 41, 238, 0.28), rgba(98, 41, 238, 0) 70%), radial-gradient(60% 34% at 90% 28%, rgba(192, 38, 211, 0.16), rgba(192, 38, 211, 0) 70%), radial-gradient(70% 38% at 10% 62%, rgba(59, 91, 219, 0.18), rgba(59, 91, 219, 0) 70%), radial-gradient(65% 36% at 88% 88%, rgba(150, 60, 220, 0.2), rgba(150, 60, 220, 0) 70%), linear-gradient(180deg, #120d26 0%, #0e0a1f 50%, #0c0d1e 100%); } html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { --t-bg-grad: radial-gradient(70% 38% at 15% 12%, rgba(196, 178, 252, 0.75), rgba(196, 178, 252, 0) 70%), radial-gradient(60% 34% at 90% 28%, rgba(250, 196, 238, 0.7), rgba(250, 196, 238, 0) 70%), radial-gradient(70% 38% at 10% 62%, rgba(190, 208, 252, 0.7), rgba(190, 208, 252, 0) 70%), radial-gradient(65% 36% at 88% 88%, rgba(248, 200, 238, 0.65), rgba(248, 200, 238, 0) 70%), linear-gradient(180deg, #f3eefd 0%, #f7f0fc 50%, #eef0fc 100%); } /* home.css memasang background-size 36px (motif wajik lama) -> gradasi ikut terpotong jadi kotak-kotak; kembalikan ke satu bidang penuh */ body.beranda, html.pra-beranda body { background-size: 100% 100%; background-repeat: no-repeat; min-height: 100vh; } /* Motif wajik asli pemilik dipertahankan (2026-10-11), warnanya disesuaikan ke palet pastel. Lapisan 1 = motif (ulang tiap 36px), lapisan 2-6 = awan pastel (satu bidang penuh). */ body.beranda, html.pra-beranda body { --t-pattern: 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, 201,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.08)' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(0,249,255,0.18)'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='rgba(144, 105, 201,0.28)'/%3E%3Ccircle cx='36' cy='0' r='1.2' fill='rgba(144, 105, 201,0.28)'/%3E%3Ccircle cx='0' cy='36' r='1.2' fill='rgba(144, 105, 201,0.28)'/%3E%3Ccircle cx='36' cy='36' r='1.2' fill='rgba(144, 105, 201,0.28)'/%3E%3C/svg%3E"); } html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { --t-pattern: 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(146, 103, 254,0.16)' stroke-width='1'/%3E%3Cpath d='M18 8 L28 18 L18 28 L8 18 Z' fill='none' stroke='rgba(236, 120, 200,0.12)' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='1.2' fill='rgba(236, 120, 200,0.3)'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='rgba(146, 103, 254,0.35)'/%3E%3Ccircle cx='36' cy='0' r='1.2' fill='rgba(146, 103, 254,0.35)'/%3E%3Ccircle cx='0' cy='36' r='1.2' fill='rgba(146, 103, 254,0.35)'/%3E%3Ccircle cx='36' cy='36' r='1.2' fill='rgba(146, 103, 254,0.35)'/%3E%3C/svg%3E"); } body.beranda, html.pra-beranda body { background-image: var(--t-pattern), var(--t-bg-grad); background-size: 36px 36px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } /* ===================================================== KARTU VIP "KACA + MAHKOTA" (percobaan 2026-10-11, referensi pemilik) Kartu kaca terang/gelap, kata VIP berwarna, mahkota kaca di kanan atas. JOIN NOW sengaja lebih muda dari TOPUP SALDO supaya TOPUP tetap tombol utama. ===================================================== */ .promo-crown, .promo-arrow { display: none; } body.beranda { --v-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); --v-border: rgba(255, 255, 255, 0.16); --v-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px rgba(0, 0, 0, 0.4); --v-title: #ffffff; --v-vip: linear-gradient(90deg, #b49bff, #f0a8ff); --v-tag: #ffffff; --v-by: #a9a3c2; --v-desc: #b9b3d2; --v-stats-bg: rgba(255, 255, 255, 0.06); --v-stats-border: rgba(255, 255, 255, 0.14); --v-num: #c9b6ff; --v-label: #8c86a6; --v-div: rgba(255, 255, 255, 0.14); --v-join-bg: linear-gradient(135deg, #7c5cff, #a98bff); --v-join-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px rgba(124, 92, 255, 0.35); --v-plat-border: rgba(255, 255, 255, 0.22); --v-plat-text: #a9a3c2; } html[data-tema="terang"] body.beranda { --v-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(243, 236, 255, 0.5)); --v-border: rgba(255, 255, 255, 0.95); --v-shadow: inset 0 1px 0 #ffffff, 0 10px 26px rgba(98, 41, 238, 0.14); --v-title: #1b1640; --v-vip: linear-gradient(90deg, #6229ee, #b06cff); --v-tag: #161926; --v-by: #6b6f84; --v-desc: #4e5266; --v-stats-bg: rgba(255, 255, 255, 0.65); --v-stats-border: #ffffff; --v-num: #3e14a8; --v-label: #6b6f84; --v-div: rgba(98, 41, 238, 0.15); --v-join-bg: linear-gradient(135deg, #8b6cff, #b49bff); --v-join-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 14px rgba(124, 92, 255, 0.3); --v-plat-border: rgba(98, 41, 238, 0.28); --v-plat-text: #6b6f84; } body.beranda .promo-card { background: var(--v-bg); border: 1px solid var(--v-border); box-shadow: var(--v-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body.beranda .promo-crown { display: block; position: absolute; z-index: 1; top: 4px; right: 6px; width: 86px; height: auto; pointer-events: none; } body.beranda .promo-top, body.beranda .promo-title { padding-right: 78px; } body.beranda .promo-desc { max-width: 78%; color: var(--v-desc); font-weight: 500; font-size: 10.5px; } body.beranda .promo-tag { color: var(--v-tag); } body.beranda .promo-dot, body.beranda .promo-source { color: var(--v-by); } body.beranda .promo-title { color: var(--v-title); font-size: 16px; font-weight: 800; letter-spacing: 0.01em; } body.beranda .promo-vip { background: var(--v-vip); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.beranda .promo-card .secure-ticker { background: var(--v-stats-bg); border: 1px solid var(--v-stats-border); box-shadow: none; } body.beranda .promo-card .tx-stat-num { color: var(--v-num); font-size: 11px; } body.beranda .promo-card .tx-stat-label { color: var(--v-label); font-size: 7.5px; } body.beranda .promo-card .tx-stat-divider { background: var(--v-div); } body.beranda .promo-watch-btn { color: #ffffff; border: 0; background: var(--v-join-bg); box-shadow: var(--v-join-shadow); font-size: 12px; letter-spacing: 0.04em; padding: 9px 14px; } body.beranda .promo-watch-btn svg { width: 12px; height: 12px; color: #ffffff; } body.beranda .promo-arrow { display: inline; margin-left: 4px; font-size: 15px; line-height: 1; } body.beranda .promo-watch-btn:active { transform: translateY(1px); opacity: 0.9; } body.beranda .promo-platform-box { border: 1.5px dashed var(--v-plat-border); background: transparent; } body.beranda .promo-platform-text { color: var(--v-plat-text); font-weight: 500; } @media (max-width: 359px) { body.beranda .promo-crown { width: 66px; } body.beranda .promo-top, body.beranda .promo-title { padding-right: 58px; } } @media (min-width: 1024px) { body.beranda .promo-crown { width: 120px; } body.beranda .promo-title { font-size: 22px; } body.beranda .promo-top, body.beranda .promo-title { padding-right: 110px; } } /* Ikon VIP (Noto Emoji, gambar di server sendiri) menggantikan emoji teks - tampil sama di semua HP */ .promo-card .tx-stat-icon img { display: block; width: 16px; height: 16px; object-fit: contain; } @media (min-width: 1024px) { .promo-card .tx-stat-icon img { width: 22px; height: 22px; } } /* Kartu VIP revisi 2 (2026-10-11, mockup pemilik): lavender transparan + garis putih tipis, mahkota lebih besar, JOIN NOW ungu pekat (tindakan utama kartu). */ body.beranda { --v-bg: linear-gradient(135deg, rgba(180, 150, 255, 0.16), rgba(120, 80, 230, 0.06)); --v-border: rgba(255, 255, 255, 0.22); } html[data-tema="terang"] body.beranda { --v-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(226, 212, 255, 0.55)); --v-border: rgba(255, 255, 255, 0.95); } body.beranda .promo-crown { top: -6px; right: -4px; width: 104px; } body.beranda .promo-top, body.beranda .promo-title { padding-right: 92px; } body.beranda .promo-desc { max-width: 72%; } body.beranda .promo-watch-btn { background: linear-gradient(180deg, #7a45ff 0%, #6229ee 60%, #5520d8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 0 #3e14a8, 0 6px 14px rgba(98, 41, 238, 0.4); } @media (max-width: 359px) { body.beranda .promo-crown { width: 80px; } body.beranda .promo-top, body.beranda .promo-title { padding-right: 70px; } } @media (min-width: 1024px) { body.beranda .promo-crown { width: 140px; } body.beranda .promo-top, body.beranda .promo-title { padding-right: 128px; } } /* ===================================================== TOMBOL LILAC 3D (2026-10-11, permintaan pemilik): bukan ungu mengkilap lagi. Gradasi lilac 180deg + tepi bawah tebal (3D), teks ungu tua supaya terbaca. Berlaku: TOPUP SALDO, JOIN NOW, tombol utama di popup beranda. ===================================================== */ body.beranda { --lilac-bg: linear-gradient(180deg, #e4d8ff 0%, #c9b3ff 55%, #b39bfa 100%); --lilac-text: #2e1470; --lilac-edge: #8a6fd6; --lilac-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 4px 0 var(--lilac-edge), 0 8px 16px rgba(98, 41, 238, 0.22); --lilac-press: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 var(--lilac-edge), 0 3px 6px rgba(98, 41, 238, 0.2); } body.beranda .saldo-topup-btn, body.beranda .promo-watch-btn, body.beranda .modal .btn-primary, body.beranda .modal .btn-cta { color: var(--lilac-text); background: var(--lilac-bg); border: 0; text-shadow: none; box-shadow: var(--lilac-shadow); } body.beranda .saldo-topup-btn:active, body.beranda .promo-watch-btn:active, body.beranda .modal .btn-primary:active, body.beranda .modal .btn-cta:active { transform: translateY(3px); opacity: 1; box-shadow: var(--lilac-press); } body.beranda .promo-watch-btn svg { color: #f5b83d; filter: drop-shadow(0 1px 0 rgba(46, 20, 112, 0.35)); } /* mahkota PNG/WebP asli pemilik: rasio 6:5 */ body.beranda .promo-crown { width: 104px; height: auto; top: -8px; right: -6px; } /* ===================================================== LATAR GAMBAR AWAN (2026-10-11, pilihan pemilik) - mode terang Gambar diam di belakang (layer fixed, aman di iPhone; bukan background-attachment:fixed), kartu yang bergerak saat scroll. Motif wajik dipindah ke footer (pilihan B). Mode gelap: tetap gradasi sampai pemilik memberi versi malam. ===================================================== */ html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { background-color: #e9e4fb; background-image: none; } html[data-tema="terang"] body.beranda::before, html[data-tema="terang"].pra-beranda body::before { display: block; content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #e9e4fb url("../img/latar-awan-lembut.webp") center / cover no-repeat; } /* motif wajik hanya di footer (kedua mode), memudar dari atas */ body.beranda, html.pra-beranda body { background-image: var(--t-bg-grad); background-size: 100% 100%; background-repeat: no-repeat; } html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { background-image: none; } body.beranda .footer { position: relative; z-index: 1; padding-top: 22px; } body.beranda .footer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--t-pattern) 0 0 / 36px 36px repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, #000 70%); } html[data-tema="terang"] body.beranda .footer { background: rgba(255, 255, 255, 0.35); } /* 2026-10-11: di HP, bilah alamat browser menyusut/muncul saat scroll -> tinggi layar berubah -> latar ikut melar (terlihat "bergerak"). Kunci tinggi ke tinggi layar terbesar (lvh) + lapisan GPU sendiri. */ html[data-tema="terang"] body.beranda::before, html[data-tema="terang"].pra-beranda body::before { inset: auto; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; transform: translateZ(0); will-change: transform; } /* LATAR GAMBAR MALAM (2026-10-11, mode gelap) - pasangan latar-awan.webp, susunan gelembung serupa. Aturan mode terang di atas (html[data-tema=terang]) lebih spesifik, jadi tetap memakai latar-awan. */ body.beranda, html.pra-beranda body { background-color: #0e0a1f; background-image: none; } body.beranda::before, html.pra-beranda body::before { display: block; content: ""; position: fixed; inset: auto; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; transform: translateZ(0); will-change: transform; background: #07060b; } /* Mode gelap = gradasi hitam elegan, tanpa gambar (2026-10-11, keputusan pemilik; latar-malam.webp dihapus). Hitam pekat + sedikit cahaya ungu redup di atas & grafit di bawah supaya tidak datar. */ body.beranda, html.pra-beranda body { background-color: #07060b; } body.beranda::before, html.pra-beranda body::before { background: radial-gradient(120% 55% at 50% -10%, rgba(98, 41, 238, 0.16), rgba(98, 41, 238, 0) 60%), radial-gradient(90% 45% at 100% 100%, rgba(60, 56, 80, 0.28), rgba(60, 56, 80, 0) 70%), linear-gradient(180deg, #0d0b14 0%, #08070c 45%, #050407 100%); } /* ===================================================== RAPI-AKHIR 2026-10-11 (5 permintaan pemilik) ===================================================== */ /* (0) Mode gelap: motif wajik asli di atas gradasi hitam elegan */ body.beranda::before, html.pra-beranda body::before { background: var(--t-pattern) 0 0 / 36px 36px repeat, radial-gradient(120% 55% at 50% -10%, rgba(98, 41, 238, 0.16), rgba(98, 41, 238, 0) 60%), radial-gradient(90% 45% at 100% 100%, rgba(60, 56, 80, 0.28), rgba(60, 56, 80, 0) 70%), linear-gradient(180deg, #0d0b14 0%, #08070c 45%, #050407 100%); } html[data-tema="terang"] body.beranda::before, html[data-tema="terang"].pra-beranda body::before { background: #e9e4fb url("../img/latar-awan-lembut.webp") center / cover no-repeat; } /* motif di footer tidak perlu lagi di mode gelap (sudah di seluruh latar) */ body.beranda .footer::after { display: none; } html[data-tema="terang"] body.beranda .footer::after { display: block; } /* (1) Tombol tema di menu: ikon + teks sesuai mode */ #temaBtn .tema-terang { display: none; } html[data-tema="terang"] #temaBtn .tema-gelap { display: none; } html[data-tema="terang"] #temaBtn i.tema-terang { display: inline-flex; } html[data-tema="terang"] #temaBtn span.tema-terang { display: inline; } /* (2) Filter "Semua" & kolom cari: satu gaya kaca yang sama, tinggi sama */ body.beranda .toolbar { gap: 8px; align-items: stretch; } body.beranda .select-wrap select, body.beranda .search input { height: 44px; border-radius: 14px; font-size: 14px; font-weight: 500; color: var(--t-text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } body.beranda .select-wrap select { font-weight: 600; padding-left: 14px; } html[data-tema="terang"] body.beranda .select-wrap select, html[data-tema="terang"] body.beranda .search input { background: rgba(255, 255, 255, 0.62); border-color: rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 0 #ffffff, 0 4px 12px rgba(98, 41, 238, 0.08); } body.beranda .select-wrap select:focus, body.beranda .search input:focus, body.beranda .select-wrap select:hover { border-color: #9267fe; box-shadow: 0 0 0 3px rgba(146, 103, 254, 0.2); } body.beranda .search > .ico, body.beranda .select-wrap .ico { color: var(--t-accent); } /* (3) Kartu talent: lencana kecil & rapi, bingkai tipis, foto penuh */ body.beranda .card { padding: 4px; border-radius: 16px; border-width: 1px; } body.beranda .card.live { box-shadow: 0 0 0 1.5px #8b5cff, 0 8px 18px rgba(139, 92, 255, 0.22); } html[data-tema="terang"] body.beranda .card.live { box-shadow: 0 0 0 1.5px #9267fe, 0 8px 18px rgba(98, 41, 238, 0.16); } body.beranda .card .thumb { border-radius: 12px; } body.beranda .badge { height: 18px; padding: 0 7px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; gap: 3px; } body.beranda .badge-live, body.beranda .badge-off { top: 6px; left: 6px; } body.beranda .badge-viewers { top: 6px; right: 6px; background: rgba(10, 8, 18, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } body.beranda .badge-live { background: #ff3d7f; box-shadow: none; } body.beranda .badge-live .dot { width: 5px; height: 5px; } body.beranda .badge .ico { width: 10px; height: 10px; } body.beranda .badge-price:not(.free), body.beranda .badge-price.free { height: 24px; padding: 0 10px; font-size: 11px; bottom: 7px; } body.beranda .meta { padding: 7px 4px 3px; } body.beranda .meta-name { font-size: 12.5px; gap: 3px; } body.beranda .meta-status { font-size: 10.5px; margin-top: 1px; } /* (5) Kartu VIP tanpa mahkota: teks kembali selebar kartu */ body.beranda .promo-top, body.beranda .promo-title { padding-right: 0; } body.beranda .promo-desc { max-width: none; } @media (max-width: 359px), (min-width: 1024px) { body.beranda .promo-top, body.beranda .promo-title { padding-right: 0; } } /* ikon kaca pembesar & tombol hapus harus di atas kotak isian berefek kaca (yang membuat lapisan sendiri) */ body.beranda .search > .ico, body.beranda .search .clear { z-index: 2; } /* ===================================================== IKON FONT AWESOME + SPACING + ISI KARTU (2026-10-11) Ikon menggantikan SVG di beranda & popup (login tidak diubah). Kotak .ico tetap 18px supaya tata letak lama tidak bergeser; ukuran huruf ikon per tempat. ===================================================== */ i.ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 15px; line-height: 1; } .mact-btn i.ico { font-size: 16px; } .saldo-topup-btn i.ico { width: 12.9px; height: 12.9px; font-size: 11px; } .promo-watch-btn i.ico { width: 12px; height: 12px; font-size: 11px; color: #f5b83d; } .select-wrap i.ico { width: 14px; height: 14px; font-size: 11px; } .search > i.ico { width: 15px; height: 15px; font-size: 12.9px; } .refresh-btn i.ico { width: 12.9px; height: 12.9px; font-size: 11px; } .icon-btn i.ico { font-size: 16px; } .menu-list i.ico { font-size: 15px; } .badge i.ico { width: 10px; height: 10px; font-size: 8.5px; } .badge-price i.ico { width: 11px; height: 11px; font-size: 9px; } /* ---------- Spacing: jarak seragam 12px antar blok, 8px antar tombol kecil ---------- */ body.beranda .member-actions { gap: 8px; } body.beranda .header.member-card { padding: 8px 0 10px; gap: 10px; } body.beranda .saldo-menu-card { margin-top: 12px; } body.beranda .saldo-wrap { padding: 10px 12px; gap: 10px; } body.beranda .menu-panel { gap: 8px; padding: 10px 12px 12px; } body.beranda .promo-card { margin-top: 12px; padding: 12px 12px 14px; } body.beranda .promo-content { gap: 8px; } body.beranda .promo-bottom { gap: 8px; margin-top: 2px; } body.beranda .toolbar { margin-top: 12px; } body.beranda #talentSection { margin-top: 16px; padding-top: 16px; } body.beranda .section-head { margin-bottom: 12px; } body.beranda .grid { gap: 10px; } /* ---------- Isi kartu talent: semua elemen sejajar inset 6px ---------- */ body.beranda .card { padding: 5px; } body.beranda .badge-live, body.beranda .badge-off { top: 6px; left: 6px; } body.beranda .badge-viewers { top: 6px; right: 6px; } /* harga: pojok kiri bawah foto, sejajar lencana LIVE (tidak lagi di tengah menutupi wajah) */ body.beranda .badge-price:not(.free), body.beranda .badge-price.free { left: 6px; right: auto; bottom: 6px; top: auto; transform: none; height: 22px; padding: 0 8px; font-size: 10.5px; } body.beranda .meta { padding: 8px 3px 3px; } body.beranda .meta-name { line-height: 1.2; } body.beranda .meta-status { margin-top: 2px; line-height: 1.2; } /* ===================================================== REVISI 2026-10-11 (masukan pemilik dari HP) ===================================================== */ /* Kartu VIP: ukuran, tata letak & jarak KEMBALI ke nilai asli home.css (.promo-card app); tema hanya warna */ body.beranda .promo-card { margin-top: 10px; padding: 10px; border-radius: 12px; } body.beranda .promo-content { gap: 5px; } body.beranda .promo-title { font-size: 12.9px; font-weight: 800; letter-spacing: 0; } body.beranda .promo-desc { font-size: 9.5px; font-weight: 600; max-width: none; } body.beranda .promo-card .tx-stats { padding: 6px 4px; gap: 1px; } body.beranda .promo-card .tx-stat-num { font-size: 10.5px; } body.beranda .promo-card .tx-stat-label { font-size: 7px; } body.beranda .promo-card .tx-stat-divider { height: 20px; } .promo-card .tx-stat-icon img { width: 12.9px; height: 12.9px; } body.beranda .promo-bottom { gap: 6px; margin-top: 0; } body.beranda .promo-watch-btn { font-size: 10px; padding: 7px 12px; letter-spacing: 0.02em; } body.beranda .promo-watch-btn i.ico { width: 10px; height: 10px; font-size: 9px; } body.beranda .promo-arrow { font-size: 12px; margin-left: 3px; } body.beranda .promo-platform-box { padding: 7px 10px; } body.beranda .promo-platform-text { font-size: 8.7px; } @media (min-width: 1024px) { body.beranda .promo-card { padding: 16px; } body.beranda .promo-content { gap: 9px; } body.beranda .promo-title { font-size: 20px; } body.beranda .promo-desc { font-size: 12px; } body.beranda .promo-card .tx-stat-num { font-size: 12px; } body.beranda .promo-card .tx-stat-label { font-size: 8.5px; } .promo-card .tx-stat-icon img { width: 18px; height: 18px; } body.beranda .promo-watch-btn { font-size: 12px; } body.beranda .promo-platform-text { font-size: 10.5px; } } /* Muat Ulang kembali berbentuk tombol (kapsul timbul) */ body.beranda .refresh-btn { height: 34px; padding: 0 12px; border-radius: 999px; background: var(--t-neu-bg); box-shadow: var(--t-neu); border: 0; font-family: var(--serif); text-transform: uppercase; font-size: 11.5px; font-weight: 600; letter-spacing: 0.4px; } body.beranda .refresh-btn:active { opacity: 1; box-shadow: var(--t-neu-press); } /* Payment Protection (popup Isi Saldo): lencana 100% & judul ikut warna tema */ body.beranda .pay-protect .secure-badge { border-color: rgba(146, 103, 254, 0.35); } body.beranda .pay-protect .secure-badge-status { background: var(--lilac-bg); color: var(--lilac-text); } body.beranda .pay-protect .secure-badge-status img { filter: none; opacity: 0.85; } body.beranda .pay-protect .secure-badge-label { color: var(--t-accent); } body.beranda .pay-protect .secure-title { color: var(--t-accent); letter-spacing: 0.5px; } html[data-tema="terang"] body.beranda .pay-protect .secure-sub { color: #4e5266; } .pay-protect .tx-stat-icon img { display: block; width: 18px; height: 18px; object-fit: contain; } /* ===================================================== 2026-10-11: bingkai pelangi tipis kartu talent + kotak 3D (menu cepat & info VIP) ===================================================== */ body.beranda { --card-solid: #15121f; --tile3d-bg: linear-gradient(180deg, #221c36 0%, #171329 100%); --tile3d-edge: #0b0914; } html[data-tema="terang"] body.beranda { --card-solid: #f8f5ff; --tile3d-bg: linear-gradient(180deg, #ffffff 0%, #efe9fd 100%); --tile3d-edge: #cbbcf4; } /* Kartu talent: garis 1.5px gradasi ungu -> magenta -> cyan (warna identitas) */ body.beranda .card, body.beranda .card.live { border: 1.5px solid transparent; background: linear-gradient(var(--card-solid), var(--card-solid)) padding-box, linear-gradient(145deg, #9069c9, #e8189a 55%, #22d3ee) border-box; } body.beranda .card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); } html[data-tema="terang"] body.beranda .card { box-shadow: 0 4px 12px rgba(98, 41, 238, 0.1); } /* yang LIVE tetap paling menonjol: sedikit cahaya ungu */ body.beranda .card.live { box-shadow: 0 6px 18px rgba(232, 24, 154, 0.25); } /* 3 kotak menu cepat (Private Talent, Video Asupan, Web Store): 3D timbul + ditekan turun */ body.beranda .menu-panel > * { border: 1px solid rgba(255, 255, 255, 0.12); background: var(--tile3d-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 0 var(--tile3d-edge), 0 7px 12px rgba(0, 0, 0, 0.28); transition: transform 90ms ease, box-shadow 90ms ease; } html[data-tema="terang"] body.beranda .menu-panel > * { border-color: #ffffff; box-shadow: inset 0 1px 0 #ffffff, 0 4px 0 var(--tile3d-edge), 0 7px 12px rgba(98, 41, 238, 0.12); } body.beranda .menu-panel > *:hover { border-color: #9267fe; } body.beranda .menu-panel > *:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 0 var(--tile3d-edge); } body.beranda .menu-panel { padding-bottom: 14px; } /* Kotak info VIP (Video / Aplikasi / Lainnya): panel 3D timbul */ body.beranda .promo-card .secure-ticker { border: 1px solid rgba(255, 255, 255, 0.14); background: var(--tile3d-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 0 var(--tile3d-edge), 0 6px 10px rgba(0, 0, 0, 0.25); margin-bottom: 3px; } html[data-tema="terang"] body.beranda .promo-card .secure-ticker { border-color: #ffffff; box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 var(--tile3d-edge), 0 6px 10px rgba(98, 41, 238, 0.1); } /* Audit F2 (2026-10-11): pink LIVE digelapkan supaya teks putih 9.5px terbaca (kontras >= 4.5:1) */ body.beranda .badge-live { background: #d6185c; } /* Selubung tipis di atas latar awan (mode terang, 2026-10-11): sedikit lebih tebal di tengah tempat kartu, tipis di pinggir supaya awan tetap terlihat. Varian A = gambar asli, B = gambar sedikit buram (blur ditanam di file, bukan backdrop-filter, supaya ringan di HP). Pemilik memilih B -> latar-awan-lembut.webp. */ html[data-tema="terang"] body.beranda::before, html[data-tema="terang"].pra-beranda body::before { background: radial-gradient(85% 65% at 50% 45%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12) 100%), #e9e4fb url("../img/latar-awan-lembut.webp") center / cover no-repeat; } /* ===================================================== KACA 3D (2026-10-11, referensi "3D Glassmorphism" pemilik) - hanya kartu saldo & kartu VIP 1) cahaya dalam (inner glow) 2) tepi berkilau warna-warni (iridescent) 3) bayangan jatuh lembut. Tepi dibuat dengan ::after + mask supaya isi kaca tetap transparan. Tanpa blur tambahan (blur tetap hanya header & kartu saldo) supaya ringan di HP. ===================================================== */ body.beranda { --kaca-tepi: linear-gradient(135deg, rgba(201, 182, 255, 0.95), rgba(255, 140, 214, 0.75) 35%, rgba(120, 210, 255, 0.75) 65%, rgba(201, 182, 255, 0.95)); --kaca-glow: inset 0 0 22px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3); --kaca-drop: 0 20px 40px rgba(0, 0, 0, 0.35); } html[data-tema="terang"] body.beranda { --kaca-tepi: linear-gradient(135deg, rgba(146, 103, 254, 0.85), rgba(255, 120, 200, 0.7) 35%, rgba(90, 190, 255, 0.7) 65%, rgba(146, 103, 254, 0.85)); --kaca-glow: inset 0 0 22px rgba(255, 255, 255, 0.85), inset 0 1px 0 #ffffff; --kaca-drop: 0 20px 40px rgba(98, 41, 238, 0.18); } body.beranda .saldo-menu-card, body.beranda .promo-card { position: relative; border-color: transparent; box-shadow: var(--kaca-glow), var(--kaca-drop); } body.beranda .saldo-menu-card::after, body.beranda .promo-card::after { display: block; content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px; background: var(--kaca-tepi); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ===================================================== DESAIN v5 BERANDA (2026-10-13, disetujui pemilik lewat mockup "FINAL A v5" + aturan v5) lilac = dasar & tombol utama, cyan = uang/VIP, magenta = LIVE saja. Kaca untuk wadah (header, kartu saldo, footer); yang bisa diklik bertepi 3D lilac. Kartu talent: latar padat TANPA blur (ringan di HP murah) + bingkai pelangi teknik lama (aman di WebView). Lapisan ini menimpa aturan di atas; ikon Flaticon lama tetap. ===================================================== */ body.beranda, html.pra-beranda body { --v5-text: #F4F0FF; --v5-muted: #B7B0D0; --v5-strong: #FFFFFF; --v5-accent: #D5C2F5; --v5-ok: #5FD6A2; --v5-glass: linear-gradient(160deg, rgba(40, 28, 74, 0.58), rgba(18, 12, 38, 0.66)); --v5-border: rgba(255, 255, 255, 0.14); --v5-hi: rgba(255, 255, 255, 0.12); --v5-s1: 0 4px 12px rgba(0, 0, 0, 0.32); --v5-key-bg: linear-gradient(180deg, #2A2144 0%, #1C1632 100%); --v5-key-border: rgba(144, 105, 201, 0.55); --v5-key-edge: #4A3478; --v5-card: #1A1430; --t-text: var(--v5-text); --t-sub: var(--v5-muted); --t-muted: var(--v5-muted); --t-accent: var(--v5-accent); --t-greet: var(--v5-accent); --t-status-live: var(--v5-accent); --t-status-paid: var(--v5-ok); --t-status-off: var(--v5-muted); --t-footer-text: var(--v5-muted); --t-footer-strong: var(--v5-strong); --lilac-bg: linear-gradient(180deg, #A786DC 0%, #9069C9 50%, #7550B0 100%); --lilac-text: #FFFFFF; --lilac-edge: #5A3D8C; --lilac-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 0 var(--lilac-edge), 0 10px 20px rgba(144, 105, 201, 0.3); --lilac-press: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 var(--lilac-edge), 0 3px 6px rgba(144, 105, 201, 0.2); } html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { --v5-text: #1B1730; --v5-muted: #4A4562; --v5-strong: #1B1730; --v5-accent: #4F2E94; --v5-ok: #0E5F38; --v5-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.36)); --v5-border: rgba(255, 255, 255, 0.8); --v5-hi: rgba(255, 255, 255, 0.9); --v5-s1: 0 4px 12px rgba(30, 16, 70, 0.12); --v5-key-bg: linear-gradient(180deg, #FFFFFF 0%, #F1ECFD 100%); --v5-key-border: #D8CBF5; --v5-key-edge: #B9A2EE; --v5-card: #F4F0FD; } /* ---------- Latar gambar aurora (layer diam) ---------- */ body.beranda, html.pra-beranda body { background-color: #0E0A1B; background-image: none; } body.beranda::before, html.pra-beranda body::before { background: #0E0A1B url("../img/latar-aurora-gelap.webp") center / cover no-repeat; } html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { background-color: #B9A6F0; } html[data-tema="terang"] body.beranda::before, html[data-tema="terang"].pra-beranda body::before { background: #B9A6F0 url("../img/latar-aurora-terang.webp") center / cover no-repeat; } body.beranda .footer::after, html[data-tema="terang"] body.beranda .footer::after { display: none; } /* ---------- Wadah kaca: header, kartu saldo, footer ---------- */ body.beranda .header.member-card, body.beranda .saldo-menu-card, body.beranda .footer { background: var(--v5-glass); border: 1px solid var(--v5-border); border-radius: 20px; box-shadow: inset 0 1px 0 var(--v5-hi), var(--v5-s1); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); } body.beranda .header.member-card { padding: 6px 6px 6px 8px; margin-top: 8px; } body.beranda .saldo-menu-card::after, body.beranda .promo-card::after { display: none; } body.beranda .footer { margin: 16px 0 12px; padding: 12px; } html[data-tema="terang"] body.beranda .footer { background: var(--v5-glass); } body.beranda .member-greeting { color: var(--v5-accent); font-size: 12px; font-weight: 700; } body.beranda .member-name { color: var(--v5-strong); } body.beranda .saldo-label { color: var(--v5-muted); font-size: 11px; } body.beranda .saldo-value { color: var(--v5-strong); } body.beranda .footer__text { color: var(--v5-muted); font-size: 11px; } html[data-tema="terang"] body.beranda .footer__text { color: #2E2840; } body.beranda .footer__text strong { color: var(--v5-strong); } /* ---------- Bisa diklik: tepi 3D lilac ---------- */ body.beranda .mact-btn, body.beranda .menu-panel > *, body.beranda .select-wrap select, body.beranda .search input, body.beranda .refresh-btn { background: var(--v5-key-bg); border: 1px solid var(--v5-key-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 0 var(--v5-key-edge), 0 6px 14px rgba(0, 0, 0, 0.12); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-tema="terang"] body.beranda .mact-btn, html[data-tema="terang"] body.beranda .menu-panel > *, html[data-tema="terang"] body.beranda .select-wrap select, html[data-tema="terang"] body.beranda .search input, html[data-tema="terang"] body.beranda .refresh-btn { background: var(--v5-key-bg); border-color: var(--v5-key-border); box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 0 var(--v5-key-edge), 0 6px 14px rgba(98, 41, 238, 0.14); } body.beranda .mact-btn:active, body.beranda .menu-panel > *:active, body.beranda .refresh-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--v5-key-edge); } body.beranda .mact-btn { width: 44px; height: 44px; border-radius: 14px; } /* Menu = tombol utama */ body.beranda #menuBtn { color: #FFFFFF; background: var(--lilac-bg); border-color: rgba(255, 255, 255, 0.2); box-shadow: var(--lilac-shadow); } body.beranda .menu-panel > * { border-radius: 14px; color: var(--v5-text); } body.beranda .select-wrap select, body.beranda .search input { height: 44px; color: var(--v5-text); } body.beranda .select-wrap select:focus, body.beranda .search input:focus { border-color: #9069C9; box-shadow: 0 0 0 3px rgba(144, 105, 201, 0.3); } body.beranda .refresh-btn { height: 44px; padding: 0 16px; border-radius: 999px; color: var(--v5-accent); } body.beranda .saldo-icon-box { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--v5-border); box-shadow: none; } html[data-tema="terang"] body.beranda .saldo-icon-box { background: rgba(255, 255, 255, 0.6); } /* ---------- Judul daftar talent ---------- */ body.beranda .section-title { color: var(--v5-strong); } body.beranda .sec-icon { background: none; box-shadow: none; border: 0; } body.beranda #talentSection { margin-top: 12px; } /* ---------- Kartu VIP (gradasi lebih gelap supaya teks putih terbaca; tanpa foto latar) ---------- */ body.beranda .promo-card { background: linear-gradient(125deg, #4E318F 0%, #6A48B8 60%, #4A5BC0 100%); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 20px; box-shadow: 0 10px 24px rgba(30, 16, 70, 0.3); padding: 12px; } body.beranda .promo-card .promo-bg, body.beranda .promo-card .promo-overlay { display: none; } body.beranda .promo-content { gap: 8px; } body.beranda .promo-title { font-size: 16px; color: #FFFFFF; } body.beranda .promo-vip { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; margin-left: 4px; border-radius: 999px; background: #67E8F9; color: #08404D; -webkit-text-fill-color: #08404D; font-size: 12px; letter-spacing: 0.06em; } body.beranda .promo-desc { font-size: 12px; color: #FFFFFF; line-height: 1.45; } body.beranda .promo-tag, body.beranda .promo-source { color: #FFFFFF; font-size: 10px; } body.beranda .promo-dot { color: rgba(255, 255, 255, 0.85); font-size: 10px; } body.beranda .promo-card .secure-ticker, html[data-tema="terang"] body.beranda .promo-card .secure-ticker { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: none; border-radius: 14px; margin-bottom: 0; } body.beranda .promo-card .tx-stats { padding: 8px; gap: 8px; } body.beranda .promo-card .tx-stat-num { font-size: 11px; color: #A5F3FC; } body.beranda .promo-card .tx-stat-label { font-size: 10px; color: #FFFFFF; white-space: normal; line-height: 1.3; text-transform: none; letter-spacing: 0; } body.beranda .promo-card .tx-stat-icon i { color: #67E8F9; font-size: 12px; } body.beranda .promo-card .tx-stat-divider { height: auto; align-self: stretch; background: rgba(255, 255, 255, 0.24); } body.beranda .promo-bottom { gap: 8px; align-items: stretch; } body.beranda .promo-watch-btn { min-height: 44px; padding: 0 16px; border-radius: 14px; font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; color: #08404D; background: linear-gradient(180deg, #E6FCFF, #67E8F9); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 0 #2A9DB3; } body.beranda .promo-watch-btn i.ico, body.beranda .promo-watch-btn svg { color: #08404D; filter: none; } body.beranda .promo-platform-box { min-height: 44px; box-sizing: border-box; padding: 6px 10px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, 0.5); background: transparent; } body.beranda .promo-platform-text { font-size: 10px; color: #FFFFFF; } /* ---------- Kartu talent: padat tanpa blur + bingkai pelangi tipis ---------- */ body.beranda { --card-solid: var(--v5-card); } body.beranda .card, body.beranda .card.live { -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 20px; padding: 6px; } body.beranda .card .thumb { border-radius: 14px; } body.beranda .card { box-shadow: var(--v5-s1); } body.beranda .card.live { box-shadow: 0 6px 18px rgba(232, 24, 154, 0.25); } body.beranda .badge { height: 20px; padding: 0 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; } body.beranda .badge-live { background: #C026D3; color: #FFFFFF; } body.beranda .badge-off { background: rgba(10, 8, 20, 0.66); color: #E4DEF5; } html[data-tema="terang"] body.beranda .badge-off { background: rgba(255, 255, 255, 0.9); color: #4A4562; } body.beranda .badge-price:not(.free) { height: 22px; font-size: 11px; font-weight: 800; color: #0B5566; background: #E6FCFF; border: 1px solid #67E8F9; box-shadow: none; } body.beranda .badge-price:not(.free) i.ico { color: #0B5566; } body.beranda .meta-name { font-size: 14px; color: var(--v5-strong); } body.beranda .meta-status { font-size: 11px; } /* area sentuh minimal 44px (audit v5) */ body.beranda .saldo-topup-btn { min-height: 44px; padding: 0 14px; border-radius: 14px; } /* ---------- Penyelarasan ke mockup FINAL A v5 (2026-10-13, pemilik menemukan 5 beda setelah deploy) ---------- Waktu penerapan pertama hanya warna & kontras yang dicocokkan; huruf, ukuran ikon, kepala kartu VIP dan isi kartu talent belum. Nilai di bawah diambil langsung dari generator mockup. */ body.beranda .member-name { font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: 0; } body.beranda .saldo-value { font-family: var(--sans); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } body.beranda .saldo-icon-box { width: 40px; height: 40px; border-radius: 14px; } body.beranda .saldo-icon-box img { width: 22px; height: 22px; } body.beranda .menu-panel > * { min-height: 62px; gap: 6px; } body.beranda .menu-panel .cvr, body.beranda .menu-panel .cvr img { width: 26px; height: 26px; } body.beranda .menu-panel p { font-family: var(--serif); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--v5-text); } /* Kepala kartu VIP: logo + judul + lencana VIP di kanan, tanpa baris "ZONAASUPAN69 By Babyflo69" */ body.beranda .promo-content { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; } body.beranda .promo-content > * { grid-column: 1 / -1; } body.beranda .promo-top { grid-column: 1; grid-row: 1; padding-right: 0; } body.beranda .promo-tag, body.beranda .promo-dot, body.beranda .promo-source { display: none; } body.beranda .promo-logo { width: 20px; height: 20px; border-radius: 6px; } body.beranda .promo-title { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; padding-right: 0; font-size: 16px; } body.beranda .promo-vip { margin-left: auto; } /* Isi kartu talent: gradasi seperti kaca di mockup, tetap padat (bingkai pelangi teknik padding-box butuh isi padat) */ body.beranda .card, body.beranda .card.live { background: linear-gradient(160deg, #1F1740, #120C26) padding-box, linear-gradient(145deg, #9069c9, #e8189a 55%, #22d3ee) border-box; } html[data-tema="terang"] body.beranda .card, html[data-tema="terang"] body.beranda .card.live { background: linear-gradient(160deg, #ECE5FB, #DCCFF6) padding-box, linear-gradient(145deg, #9069c9, #e8189a 55%, #22d3ee) border-box; } /* layar sempit (320px): saldo besar tidak boleh memotong tombol TOPUP */ @media (max-width: 359px) { body.beranda .saldo-value { font-size: 16px; } } body.beranda .section-title { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: 0.04em; gap: 8px; } body.beranda .sec-icon, body.beranda .sec-icon img { width: 22px; height: 22px; } /* warna status kartu mode terang mengikuti mockup (aturan terang lama sempat menang, kontras 3.4) */ html[data-tema="terang"] body.beranda { --t-status-off: #4A4562; --t-status-live: #4F2E94; --t-status-paid: #0E5F38; } /* Latar (2026-10-13, pilihan pemilik): terang kembali ke gambar awan lembut, gelap = gradasi gelap dengan sentuhan lilac/magenta/cyan; konsep kaca v5 tetap. Gambar aurora tidak dipakai lagi. */ body.beranda::before, html.pra-beranda body::before { background: radial-gradient(120% 55% at 10% 0%, rgba(144, 105, 201, 0.38), rgba(144, 105, 201, 0) 60%), radial-gradient(80% 45% at 100% 30%, rgba(103, 232, 249, 0.1), rgba(103, 232, 249, 0) 60%), radial-gradient(100% 50% at 90% 100%, rgba(192, 38, 211, 0.2), rgba(192, 38, 211, 0) 60%), linear-gradient(180deg, #160F2C 0%, #0E0A1B 55%, #130A24 100%); } html[data-tema="terang"] body.beranda, html[data-tema="terang"].pra-beranda body { background-color: #e9e4fb; } html[data-tema="terang"] body.beranda::before, html[data-tema="terang"].pra-beranda body::before { background: radial-gradient(85% 65% at 50% 45%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12) 100%), #e9e4fb url("../img/latar-awan-lembut.webp") center / cover no-repeat; } /* HP selebar 360 (layar pemilik): ukuran mockup 390 dikecilkan sebanding (~0.92) supaya tidak terasa sesak */ @media (max-width: 389px) { body.beranda .member-name { font-size: 12.9px; } body.beranda .saldo-value { font-size: 18px; } body.beranda .saldo-icon-box { width: 36px; height: 36px; } body.beranda .saldo-icon-box img { width: 20px; height: 20px; } body.beranda .menu-panel > * { min-height: 56px; gap: 4px; } body.beranda .menu-panel .cvr, body.beranda .menu-panel .cvr img { width: 24px; height: 24px; } body.beranda .menu-panel p { font-size: 10px; letter-spacing: 0.05em; } body.beranda .promo-title { font-size: 15px; } body.beranda .section-title { font-size: 18px; } body.beranda .sec-icon, body.beranda .sec-icon img { width: 20px; height: 20px; } } @media (max-width: 339px) { body.beranda .saldo-value { font-size: 16px; } } @media (max-width: 389px) { /* "Lagi live sekarang" terpotong di kartu selebar 360 */ body.beranda .meta-status { font-size: 10px; } } /* Kartu VIP pakai gambar latar pilihan pemilik (2026-10-13). Blur ditanam di file (ringan di HP); selubung ungu transparan di atasnya supaya teks putih tetap terbaca (diukur >= 4.5). */ body.beranda .promo-card { background: linear-gradient(125deg, rgba(58, 34, 112, 0.5) 0%, rgba(92, 60, 168, 0.36) 60%, rgba(56, 70, 160, 0.5) 100%), #4E318F url("../img/latar-vip-gelap.webp") center / cover no-repeat; } html[data-tema="terang"] body.beranda .promo-card { background: linear-gradient(125deg, rgba(58, 34, 112, 0.5) 0%, rgba(92, 60, 168, 0.36) 60%, rgba(56, 70, 160, 0.5) 100%), #4E318F url("../img/latar-vip-gelap.webp") center / cover no-repeat; } /* kotak ajakan download berada di atas bagian gambar yang paling terang: alas gelap tipis */ body.beranda .promo-platform-box { background: rgba(20, 10, 45, 0.35); } /* 2026-10-13: pemilik minta gambar VIP terlihat jelas; gambar terang terlalu pucat untuk teks putih, (dikoreksi di bawah: mode terang kembali ke latar-vip-terang dengan teks gelap) */ html[data-tema="terang"] body.beranda .promo-card { box-shadow: 0 10px 24px rgba(30, 16, 70, 0.3); } /* 2026-10-13 (koreksi pemilik): mode terang tetap memakai gambar terang. Gambar pucat -> teks kartu VIP dibuat gelap supaya gambar tetap terlihat jelas dan teks terbaca. */ html[data-tema="terang"] body.beranda .promo-card { background: linear-gradient(125deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12)), #E9E0FB url("../img/latar-vip-terang.webp") center / cover no-repeat; border-color: rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 24px rgba(98, 41, 238, 0.18); } html[data-tema="terang"] body.beranda .promo-title, html[data-tema="terang"] body.beranda .promo-desc { color: #1B1730; text-shadow: none; } html[data-tema="terang"] body.beranda .promo-card .secure-ticker { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.9); } html[data-tema="terang"] body.beranda .promo-card .tx-stat-num { color: #4F2E94; } html[data-tema="terang"] body.beranda .promo-card .tx-stat-label { color: #1B1730; } html[data-tema="terang"] body.beranda .promo-card .tx-stat-icon i { color: #6E8BFF; } html[data-tema="terang"] body.beranda .promo-card .tx-stat-divider { background: rgba(79, 46, 148, 0.25); } html[data-tema="terang"] body.beranda .promo-platform-box { background: rgba(255, 255, 255, 0.45); border-color: rgba(79, 46, 148, 0.45); } html[data-tema="terang"] body.beranda .promo-platform-text { color: #1B1730; } /* 2026-10-13 (pemilik: tombol header, TOPUP, JOIN NOW terlihat gendut di HP 360): tinggi 40 + kaki 3D tipis. 40px masih di atas batas nyaman sentuh Android (sekitar 7 mm). */ @media (max-width: 389px) { body.beranda .mact-btn { width: 40px; height: 40px; border-radius: 12px; } body.beranda .mact-btn img { width: 21px; height: 21px; } body.beranda .mact-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 var(--v5-key-edge), 0 4px 10px rgba(0, 0, 0, 0.12); } html[data-tema="terang"] body.beranda .mact-btn { box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 0 var(--v5-key-edge), 0 4px 10px rgba(98, 41, 238, 0.12); } body.beranda #menuBtn, body.beranda .saldo-topup-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 var(--lilac-edge), 0 6px 14px rgba(144, 105, 201, 0.25); } body.beranda .saldo-topup-btn { min-height: 40px; padding: 0 12px; font-size: 12px; border-radius: 12px; } body.beranda .promo-watch-btn { min-height: 40px; padding: 0 14px; font-size: 12px; border-radius: 12px; box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 0 #2A9DB3; } } @media (max-width: 389px) { /* JOIN NOW tidak ikut melar setinggi kotak download di sebelahnya */ body.beranda .promo-watch-btn { align-self: center; height: 40px; } } /* 2026-10-13 (pemilik): footer - garis tipis lama di tepi atas menabrak sudut bulat kaca; mockup v5 tanpa garis */ body.beranda .footer::before { display: none; } body.beranda .footer { padding: 10px 12px; } /* 2026-10-13 (pemilik, contoh no.3 + bingkai pelangi): kartu VIP mode terang paling menonjol - bingkai pelangi 2px (teknik mask ::after, isi tetap transparan) + cahaya lilac. Ikon & teks baru. */ html[data-tema="terang"] body.beranda .promo-card { border-color: transparent; box-shadow: 0 0 0 4px rgba(144, 105, 201, 0.2), 0 14px 30px rgba(98, 41, 238, 0.22); } html[data-tema="terang"] body.beranda .promo-card::after { display: block; padding: 2px; background: linear-gradient(145deg, #9069c9, #e8189a 55%, #22d3ee); } html[data-tema="terang"] body.beranda .promo-title { color: #4F2E94; } body.beranda .promo-logo { width: 24px; height: 24px; border-radius: 0; object-fit: contain; } /* kotak ajakan sekarang

(bukan tautan): buang margin bawaan paragraf */ body.beranda .promo-platform-box { margin: 0; display: flex; align-items: center; } /* 2026-10-13 (pemilik): label statistik VIP tetap 1 baris; cahaya kartu VIP dibuat halus; kotak ajakan setinggi tombol JOIN NOW */ body.beranda .promo-card .tx-stats { gap: 6px; padding: 8px 6px; } body.beranda .promo-card .tx-stat-item { gap: 4px; min-width: 0; } body.beranda .promo-card .tx-stat-label { white-space: nowrap; } body.beranda .promo-card .tx-stat-icon i { font-size: 11px; } html[data-tema="terang"] body.beranda .promo-card { box-shadow: 0 0 0 2px rgba(144, 105, 201, 0.12), 0 10px 22px rgba(98, 41, 238, 0.16); } body.beranda .promo-bottom { align-items: center; } body.beranda .promo-platform-box { min-height: 0; height: 44px; padding: 2px 10px; } body.beranda .promo-platform-text { line-height: 1.25; } @media (max-width: 389px) { body.beranda .promo-platform-box { height: 40px; padding: 2px 8px; } } /* HP sangat sempit (320): ikon statistik disembunyikan supaya label tetap 1 baris; kotak ajakan boleh lebih tinggi */ @media (max-width: 339px) { body.beranda .promo-card .tx-stat-icon { display: none; } body.beranda .promo-platform-box { height: auto; min-height: 40px; } } /* 2026-10-13 (pemilik): MUAT ULANG seukuran tombol lain (40) & lebih ringkas; badge OFFLINE sedikit lebih kecil */ body.beranda .refresh-btn { height: 40px; min-height: 0; padding: 0 14px; font-size: 11px; gap: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 var(--v5-key-edge), 0 4px 10px rgba(0, 0, 0, 0.12); } html[data-tema="terang"] body.beranda .refresh-btn { box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 0 var(--v5-key-edge), 0 4px 10px rgba(98, 41, 238, 0.12); } body.beranda .refresh-btn i.ico { font-size: 10px; } body.beranda .badge-off { height: 18px; padding: 0 6px; font-size: 10px; letter-spacing: 0.02em; } /* ===================================================== DESAIN v5 LOGIN / DAFTAR (2026-10-16, disetujui pemilik): layar login ikut beranda v5 supaya tidak terasa pindah situs setelah masuk. Kelas body.masuk dipasang home.js (showAuth) dan html.pra-masuk oleh tema-awal.js (sebelum JS jalan, tanpa kedipan). Nilai disalin dari lapisan v5 beranda di atas. Hanya tampilan; alur login/daftar tidak berubah. Kartu Payment Protection di popup Isi Saldo TIDAK ikut (pemilik hanya minta login). ===================================================== */ body.masuk, html.pra-masuk body { --v5-text: #F4F0FF; --v5-muted: #B7B0D0; --v5-strong: #FFFFFF; --v5-accent: #D5C2F5; --v5-glass: linear-gradient(160deg, rgba(40, 28, 74, 0.58), rgba(18, 12, 38, 0.66)); --v5-border: rgba(255, 255, 255, 0.14); --v5-hi: rgba(255, 255, 255, 0.12); --v5-s1: 0 4px 12px rgba(0, 0, 0, 0.32); --v5-key-bg: linear-gradient(180deg, #2A2144 0%, #1C1632 100%); --v5-key-border: rgba(144, 105, 201, 0.55); --v5-key-edge: #4A3478; --v5-field-bg: #1A1430; --v5-cyan-text: #A5F3FC; --v5-priv-bg: rgba(110, 139, 255, 0.12); --v5-priv-border: rgba(143, 165, 255, 0.7); --v5-priv-text: #C7D2FF; color: var(--v5-text); background-color: #0E0A1B; background-image: none; } html[data-tema="terang"] body.masuk, html[data-tema="terang"].pra-masuk body { --v5-text: #1B1730; --v5-muted: #4A4562; --v5-strong: #1B1730; --v5-accent: #4F2E94; --v5-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.36)); --v5-border: rgba(255, 255, 255, 0.8); --v5-hi: rgba(255, 255, 255, 0.9); --v5-s1: 0 4px 12px rgba(30, 16, 70, 0.12); --v5-key-bg: linear-gradient(180deg, #FFFFFF 0%, #F1ECFD 100%); --v5-key-border: #D8CBF5; --v5-key-edge: #B9A2EE; --v5-field-bg: #FFFFFF; --v5-cyan-text: #0B5566; --v5-priv-bg: #EEF1FF; --v5-priv-border: #8FA5FF; --v5-priv-text: #2F3FA8; background-color: #B9A6F0; } /* Latar aurora (layer diam, fixed: halaman login pendek, gambar tidak melar) */ body.masuk::before, html.pra-masuk body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #0E0A1B url("../img/latar-aurora-gelap.webp") center / cover no-repeat; } html[data-tema="terang"] body.masuk::before, html[data-tema="terang"].pra-masuk body::before { background: #B9A6F0 url("../img/latar-aurora-terang.webp") center / cover no-repeat; } body.masuk .container, html.pra-masuk .container, body.masuk .footer { position: relative; z-index: 1; } /* Header kaca */ body.masuk .header.member-card { margin-top: 8px; padding: 6px 6px 6px 8px; border-radius: 20px; background: var(--v5-glass); border: 1px solid var(--v5-border); box-shadow: inset 0 1px 0 var(--v5-hi), var(--v5-s1); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); } body.masuk .member-greeting { color: var(--v5-accent); font-weight: 700; } body.masuk .member-name { color: var(--v5-strong); } body.masuk .mact-btn { width: 44px; height: 44px; border-radius: 14px; color: var(--v5-text); background: var(--v5-key-bg); border: 1px solid var(--v5-key-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 0 var(--v5-key-edge), 0 6px 14px rgba(0, 0, 0, 0.12); } html[data-tema="terang"] body.masuk .mact-btn { box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 0 var(--v5-key-edge), 0 6px 14px rgba(98, 41, 238, 0.14); } body.masuk .mact-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--v5-key-edge); } /* Banner: sudut membulat seperti kartu v5 */ body.masuk .auth-banner { border-radius: 20px; } /* Teks berjalan: bingkai pelangi berputar TETAP (pemilik 2026-10-16), isi mengikuti tema */ body.masuk .info-bar { background: linear-gradient(var(--v5-field-bg), var(--v5-field-bg)) padding-box, linear-gradient(90deg, #9069c9, #e8189a, #22d3ee, #e8189a, #9069c9) border-box; background-size: 100% 100%, 200% 100%; box-shadow: var(--v5-s1); } body.masuk .info-track span { color: var(--v5-text); font-size: 12px; } /* Kartu login & Protection: kaca */ body.masuk #authSection .panel, body.masuk #authSection .secure-section { background: var(--v5-glass); border: 1px solid var(--v5-border); border-radius: 20px; box-shadow: inset 0 1px 0 var(--v5-hi), var(--v5-s1); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); } /* Garis pelangi menyala di tepi atas kartu login: TETAP (pemilik 2026-10-16) - aturan lama home.css dipakai */ body.masuk #authSection .tabs { border-bottom-color: var(--v5-border); } html[data-tema="terang"] body.masuk #authSection .tabs { border-bottom-color: #D8CBF5; } body.masuk #authSection .tabs button { color: var(--v5-muted); font-size: 14px; } body.masuk #authSection .tabs button.active { color: var(--v5-strong); } /* garis bawah tab aktif: pelangi lama dipakai (pemilik 2026-10-16) */ body.masuk #authSection label { color: var(--v5-accent); } /* Kolom isian: tepi 3D lilac */ body.masuk #authSection .field { color: var(--v5-text); background: var(--v5-field-bg); border: 1px solid var(--v5-key-border); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 0 var(--v5-key-edge); } body.masuk #authSection .field:focus { border-color: #9069C9; box-shadow: 0 0 0 3px rgba(144, 105, 201, 0.3), 0 3px 0 var(--v5-key-edge); } body.masuk #authSection .field::placeholder { color: var(--v5-muted); opacity: 1; } body.masuk .fld-ico { color: var(--v5-accent); background: rgba(144, 105, 201, 0.14); border: 1px solid var(--v5-key-border); } body.masuk #authSection .pw-toggle { color: var(--v5-muted); } /* Tombol utama: lilac 3D (sama dengan tombol Menu beranda v5) */ body.masuk #authSection .btn-primary { color: #FFFFFF; text-shadow: none; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(180deg, #A786DC 0%, #9069C9 50%, #7550B0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 0 #5A3D8C, 0 10px 20px rgba(144, 105, 201, 0.3); } body.masuk #authSection .btn-primary:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #5A3D8C, 0 3px 6px rgba(144, 105, 201, 0.2); } /* Catatan privasi (2026-10-16, pemilik minta ganti warna): cyan = uang di v5 -> periwinkle (warna centang/aman) */ body.masuk #authSection .privacy-note { color: var(--v5-priv-text); background: var(--v5-priv-bg); border: 1.5px dashed var(--v5-priv-border); } body.masuk .terms { color: var(--v5-muted); } body.masuk .terms b { color: var(--v5-text); } html[data-tema="terang"] body.masuk .msg.ok { color: #0E5F38; } html[data-tema="terang"] body.masuk .msg.warn { color: #8A5300; } html[data-tema="terang"] body.masuk .msg.err { color: #B4123A; } html[data-tema="terang"] body.masuk .notice { color: #4A3300; background: #FFF4DB; } html[data-tema="terang"] body.masuk .notice.err { color: #8A0F2E; background: #FFE4EA; } /* Kartu Protection */ body.masuk #authSection .secure-title { color: var(--v5-strong); } body.masuk #authSection .secure-sub { color: var(--v5-muted); } body.masuk #authSection .secure-badge { border-color: var(--v5-key-border); } body.masuk #authSection .secure-badge-label { color: var(--v5-accent); } body.masuk #authSection .secure-ticker { background: rgba(144, 105, 201, 0.1); border-color: var(--v5-border); } html[data-tema="terang"] body.masuk #authSection .secure-ticker { background: rgba(255, 255, 255, 0.55); border-color: #E2D8F7; } body.masuk #authSection .tx-stat-num { color: var(--v5-cyan-text); } body.masuk #authSection .tx-stat-label { color: var(--v5-muted); } body.masuk #authSection .tx-stat-divider { background: var(--v5-border); } html[data-tema="terang"] body.masuk #authSection .tx-stat-divider { background: #D8CBF5; } /* Footer kaca */ body.masuk .footer { margin: 16px auto 12px; padding: 12px; border-radius: 20px; max-width: min(480px, calc(100% - 20px)); /* selebar kolom login di laptop */ background: var(--v5-glass); border: 1px solid var(--v5-border); box-shadow: inset 0 1px 0 var(--v5-hi), var(--v5-s1); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); } /* garis pelangi tepi atas footer TETAP (pemilik 2026-10-16), dipendekkan supaya tidak keluar dari sudut bulat */ body.masuk .footer::before { left: 14%; right: 14%; top: -1px; height: 2.5px; border-radius: 3px; } body.masuk .contact-label { color: var(--v5-muted); } body.masuk .contact-item { color: var(--v5-text); background: var(--v5-key-bg); border: 1px solid var(--v5-key-border); } body.masuk .footer__text { color: var(--v5-muted); } body.masuk .footer__text strong { color: var(--v5-strong); }