/* ============================================================ VIONIX.TOPUP — "CIRCUIT" DESIGN SYSTEM A dark motherboard-inspired identity: every screen sits on a near-black PCB, traced with faint blue circuit lines. Signal amber stays the one "hot" accent (alerts, HOT badges, CTAs); electric blue and vortex violet carry the game-glow moments (banners, badges, status). Data stays monospace, like a diagnostic read-out. ============================================================ */ /* --- RESET & TOKENS --- */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; min-width: 0; } p, h1, h2, h3, h4, span, a, button, input { overflow-wrap: break-word; } :root { /* Color — "Circuit": void-navy board + circuit-white ink + signal amber. Not flat #000 (dead, no depth) — everything carries a faint blue undertone so the dark reads as "powered on", not off. */ --bg: #070B18; --bg-raised: rgba(96, 165, 250, 0.055); --surface: #0E1730; --paper: #EAF1FF; --paper-dim: rgba(234, 241, 255, 0.62); --paper-faint: rgba(234, 241, 255, 0.08); --line: rgba(120, 178, 255, 0.16); --signal: #FF7A29; --signal-ink: #0B0E1A; --signal-dim: rgba(255, 122, 41, 0.13); --moss: #7C8DB5; --ok: #22C55E; --warn: #FF4D6D; /* Secondary neon accents — used for game-specific glow (banners, badges) and informational blue states, never for primary CTAs. Shifted to cyan (was #3DA5FF) so it stays distinct from the brand's new blue --signal — otherwise the ROBLOX badge and the default promo badge would render as near-identical blue. */ --electric: #22D3EE; --electric-dim: rgba(34, 211, 238, 0.14); --violet: #B26BFF; --violet-dim: rgba(178, 107, 255, 0.14); /* Type */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'IBM Plex Mono', monospace; --header-height: 68px; --nav-height: 64px; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.55); } body { background-color: var(--bg); color: var(--paper); font-family: var(--font-body); overflow-x: hidden; position: relative; padding-top: calc(var(--header-height) + 18px); /* ✅ FIX (mobile): tambah env(safe-area-inset-bottom) supaya konten paling bawah tidak ketutup bottom-nav di HP dengan gesture-nav (tanpa tombol fisik). */ padding-bottom: calc(var(--nav-height) + 48px + env(safe-area-inset-bottom, 0px)); /* Papan sirkuit tipis: grid garis biru pudar + dua titik ambient glow (amber di atas, ungu di tengah) yang diam — bukan animasi — supaya tetap tenang di layar kecil dan menghormati prefers-reduced-motion. */ background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(120,178,255,0.035) 39px, rgba(120,178,255,0.035) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(120,178,255,0.02) 39px, rgba(120,178,255,0.02) 40px), radial-gradient(ellipse 900px 500px at 15% 0%, rgba(255,122,41,0.07) 0%, transparent 60%), radial-gradient(ellipse 900px 600px at 100% 30%, rgba(178,107,255,0.07) 0%, transparent 55%); background-attachment: fixed; } ::selection { background: var(--signal); color: var(--signal-ink); } /* ✅ BUG FIX: overflow-x:hidden sebelumnya cuma ada di body, bukan di html. Kalau ada elemen anak yang overflow horizontal (seperti kasus .legal-tldr-list li di atas), browser tetap bisa geser lewat elemen -nya walau body sudah overflow-x:hidden. Ditambahkan di sini sebagai jaring pengaman kedua supaya halaman tidak pernah bisa digeser ke samping walau ada bug overflow lain di kemudian hari. */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; overflow-x: hidden; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--signal); } /* --- LOADING SCREEN --- */ #loading-screen { position: fixed; inset: 0; background-color: var(--bg); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease; } /* Vignette lembut supaya pusat layar (logo + ring) jadi fokus mata, konsisten dengan nuansa "ledger" yang hangat, bukan flat gelap polos. */ #loading-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(255,122,41,0.10) 0%, transparent 55%), radial-gradient(circle at 50% 100%, rgba(34,211,238,0.06) 0%, transparent 70%); pointer-events: none; } #loading-screen.loader-hide { opacity: 0; transform: scale(1.04); filter: blur(6px); pointer-events: none; } /* Satu ring spinner sederhana + ikon statis — dulu ada grid bergerak, scan beam, halo pulsing, dual-ring counter-rotating, dan bolt yang berkedip; dipangkas jadi satu gerakan yang jelas supaya terasa presisi, bukan "ramai demi ramai". */ .loader-core { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; animation: coreFadeIn 0.6s ease both; } @keyframes coreFadeIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .loader-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--paper-faint); border-top-color: var(--signal); animation: spinCW 0.9s linear infinite; } @keyframes spinCW { to { transform: rotate(360deg); } } .loader-bolt { font-size: 1.4rem; color: var(--signal); filter: drop-shadow(0 0 4px rgba(255,122,41,0.3)); } /* Wordmark, revealed one character at a time */ .loader-logo { display: flex; font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.5px; color: var(--paper); } .lg-char { display: inline-block; opacity: 0; transform: translateY(10px); animation: charIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .lg-char.lg-accent { color: var(--signal); } @keyframes charIn { to { opacity: 1; transform: translateY(0); } } /* Live progress read-out */ .loader-progress-track { width: 220px; height: 4px; background: var(--paper-faint); border-radius: 3px; overflow: hidden; margin-top: 24px; animation: coreFadeIn 0.6s ease 0.15s both; } .loader-progress-fill { height: 100%; width: 0%; border-radius: 3px; background: var(--signal); transition: width 0.15s linear; } .loader-meta { width: 220px; display: flex; justify-content: space-between; margin-top: 11px; padding-top: 11px; /* garis putus tipis ala sobekan struk/tiket, konsisten dengan tema "ledger" */ border-top: 1px dashed var(--line); font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.3px; text-transform: uppercase; color: var(--moss); animation: coreFadeIn 0.6s ease 0.25s both; } #loader-status { transition: opacity 0.15s ease; } .loader-percent { color: var(--signal); font-weight: 600; font-variant-numeric: tabular-nums; } /* --- HEADER --- */ .glass-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: rgba(7, 11, 24, 0.86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(34,211,238,0.12), 0 8px 24px rgba(0,0,0,0.3); z-index: 1000; } .header-container { max-width: 800px; height: 100%; margin: 0 auto; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .header-left { display: flex; align-items: center; gap: 10px; } /* ✅ BARU: tombol hamburger (☰) buka drawer menu, posisi di header atas sebelah logo -- gaya UniPin. */ .hamburger-btn { background: transparent; border: none; color: var(--paper); font-size: 1.15rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; flex-shrink: 0; transition: background 0.18s ease; } .hamburger-btn:hover { background: var(--bg-raised); } /* ✅ BARU: drawer menu (side panel geser dari kiri, gaya UniPin) */ .side-drawer-overlay { position: fixed; inset: 0; background: rgba(6, 9, 18, 0.6); backdrop-filter: blur(2px); z-index: 2000; opacity: 0; transition: opacity 0.25s ease; } .side-drawer-overlay.open { opacity: 1; } .side-drawer { position: fixed; top: 0; left: 0; width: min(320px, 84vw); height: 100%; background: var(--bg, #0B0E17); border-right: 1px solid var(--line); box-shadow: 12px 0 32px rgba(0,0,0,0.4); z-index: 2001; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; } .side-drawer.open { transform: translateX(0); } .side-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .side-drawer-header .logo { display: flex; align-items: center; gap: 8px; } .side-drawer-close { background: transparent; border: none; color: var(--paper-dim); font-size: 1.1rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .side-drawer-close:hover { background: var(--bg-raised); color: var(--paper); } .side-drawer-menu { padding: 10px 8px; flex: 1; } .side-drawer-item { width: 100%; display: flex; align-items: center; gap: 12px; background: transparent; border: none; color: var(--paper); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; padding: 13px 12px; border-radius: 8px; cursor: pointer; text-align: left; } .side-drawer-item:hover { background: var(--bg-raised); } .side-drawer-item i:first-child { color: var(--signal); width: 18px; text-align: center; } .side-drawer-item span { flex: 1; } .side-drawer-caret { font-size: 0.7rem; color: var(--paper-dim); transition: transform 0.2s ease; } .side-drawer-item[aria-expanded="true"] .side-drawer-caret { transform: rotate(180deg); } .side-drawer-sub { padding: 4px 14px 14px 42px; } .side-drawer-sub-text { font-size: 0.78rem; color: var(--paper-dim); line-height: 1.5; margin-bottom: 8px; } .side-drawer-email { display: inline-flex; align-items: center; gap: 8px; color: var(--signal); font-weight: 700; font-size: 0.82rem; text-decoration: none; } .side-drawer-email:hover { text-decoration: underline; } .side-drawer-benefits { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .side-drawer-benefits li { font-size: 0.76rem; color: var(--paper-dim); display: flex; align-items: flex-start; gap: 6px; } .side-drawer-benefits li i { color: #4CAF50; margin-top: 2px; } .side-drawer-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: linear-gradient(135deg, #E8B23D, #A8790A); border: none; color: #1A1200; font-family: var(--font-body); font-size: 0.8rem; font-weight: 800; padding: 10px; border-radius: 6px; cursor: pointer; } /* ✅ BARU: label kecil buat misahin grup "Bantuan" & "Ikuti Kami" di drawer, biar nggak nyampur sama menu accordion di atasnya. */ .side-drawer-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--moss); padding: 14px 12px 4px; } /* ✅ BARU: baris ikon sosial (WhatsApp, Instagram, TikTok, Email) di drawer — bulat, konsisten sama gaya .footer-social-minimal tapi sedikit lebih besar biar gampang di-tap di HP. */ .side-drawer-social { display: flex; gap: 10px; padding: 4px 12px 6px; } .side-drawer-social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-raised); color: var(--paper-dim); font-size: 1rem; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; } .side-drawer-social a:hover { color: var(--signal); background: var(--signal-dim); } .side-drawer-social a:active { transform: scale(0.92); } /* ✅ Bagian akun/login di bagian PALING BAWAH drawer, sesuai permintaan */ .side-drawer-account { border-top: 1px solid var(--line); padding: 16px; flex-shrink: 0; } .side-drawer-login-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--signal); border: none; /* ✅ FIX KONTRAS: putih di atas oranye --signal cuma 2.6:1 (gagal WCAG AA yang minimal 4.5:1 untuk teks ukuran ini) — diganti signal-ink (nyaris hitam) yang tembus 7.4:1, konsisten sama .btn-wa & .badge-orange yang sudah benar dari awal. */ color: var(--signal-ink); font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; padding: 12px; border-radius: 6px; cursor: pointer; } .side-drawer-profile { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .side-drawer-profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--signal); background: var(--bg-raised); } .side-drawer-profile-text { min-width: 0; } .side-drawer-profile-name { font-size: 0.85rem; font-weight: 700; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-drawer-profile-email { font-size: 0.72rem; color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-drawer-account-actions { display: flex; flex-direction: column; gap: 6px; } .side-drawer-account-actions button { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--bg-raised); border: 1px solid var(--line); color: var(--paper); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; padding: 10px 12px; border-radius: 6px; cursor: pointer; text-align: left; } .side-drawer-account-actions button:hover { border-color: var(--signal); } .side-drawer-account-actions button.side-drawer-danger { color: #FF6B6B; } .side-drawer-account-actions button.side-drawer-danger:hover { border-color: #FF6B6B; background: rgba(255,77,109,0.08); } /* ✅ BUG FIX: .side-drawer-profile dan .side-drawer-account-actions di atas set display:flex langsung di class-nya, jadi menang specificity vs aturan bawaan browser [hidden]{display:none} — akibatnya waktu belum login, elemen ini tetap kelihatan walau atribut hidden sudah benar dipasang oleh HTML/JS (renderDrawerAccountSection). Override eksplisit di bawah ini mengembalikan perilaku hidden yang seharusnya. */ .side-drawer-profile[hidden], .side-drawer-account-actions[hidden], .side-drawer-login-btn[hidden] { display: none; } .logo { display: flex; align-items: center; gap: 9px; white-space: nowrap; } .brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; color: var(--paper); } .glow-orange { color: var(--signal); } .brand-mark { flex-shrink: 0; border-radius: 22%; filter: drop-shadow(0 0 3px rgba(255,122,41,0.2)); } .header-actions { display: flex; align-items: center; gap: 14px; } /* --- LOGIN TRIGGER --- */ .login-trigger-btn { position: relative; z-index: 1001; display: flex; align-items: center; justify-content: center; background: var(--bg-raised); border: 1px solid var(--line); padding: 0 14px; height: 36px; border-radius: 4px; color: var(--paper); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer; pointer-events: auto !important; transition: all 0.2s ease; } .login-trigger-btn:hover { border-color: var(--signal); background: var(--signal-dim); } #user-avatar { width: 20px; height: 20px; border-radius: 2px; object-fit: cover; margin-right: 7px; border: 1px solid var(--signal); display: none; } #user-icon { font-size: 0.85rem; color: var(--paper); margin-right: 7px; } /* --- ACCOUNT MENU / DROPDOWN --- */ .account-menu { position: relative; } .account-caret { display: none; font-size: 0.6rem; margin-left: 6px; color: var(--moss); transition: transform 0.2s ease; } .account-menu.logged-in .account-caret { display: inline-block; } .account-menu.open .account-caret { transform: rotate(180deg); } .account-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 1200; } .account-menu.open .account-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; } .account-dropdown-header { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .account-name { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-email { font-family: var(--font-body); font-size: 0.7rem; color: var(--moss); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-tier { display: inline-block; margin-top: 8px; font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; border: 1px solid var(--line); color: var(--moss); } /* ✅ REVISI: tier lama Gold/Silver/Bronze diganti status member/non-member */ .account-tier[data-tier="member"] { color: #E8B23D; border-color: rgba(232,178,61,0.4); } .account-tier[data-tier="non-member"] { color: var(--paper-dim); } /* --- HALAMAN AKUN (page-account): sub-nav + panel --- */ .account-subnav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; } .account-subnav-item { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; background: var(--bg-raised); border: 1px solid var(--line); color: var(--paper-dim); font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; padding: 8px 14px; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: all 0.18s ease; } .account-subnav-item.active, .account-subnav-item:hover { border-color: var(--signal); color: var(--paper); background: var(--signal-dim); } .account-panel { display: none; } .account-panel.active { display: block; } .account-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-bottom: 12px; } .account-card-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .account-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--signal); background: var(--bg-raised); } .account-quick-links { display: flex; flex-direction: column; gap: 8px; } .account-quick-link { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--bg-raised); border: 1px solid var(--line); color: var(--paper); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: 12px 14px; border-radius: 6px; cursor: pointer; text-align: left; transition: border-color 0.18s ease; } .account-quick-link:hover { border-color: var(--signal); } .account-hint { font-size: 0.72rem; color: var(--moss); margin-top: 10px; line-height: 1.5; } .btn-buy-membership { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #E8B23D, #A8790A); border: none; color: #1A1200; font-family: var(--font-body); font-size: 0.88rem; font-weight: 800; padding: 13px; border-radius: 6px; cursor: pointer; transition: opacity 0.18s ease; } .btn-buy-membership:hover { opacity: 0.9; } .btn-buy-membership:disabled { opacity: 0.5; cursor: not-allowed; } .tier-member-card { background: var(--surface); border: 1px solid rgba(232,178,61,0.4); border-radius: 10px; padding: 20px; text-align: center; margin-bottom: 12px; } .tier-member-badge { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #E8B23D, #A8790A); color: #1A1200; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 10px; } .tier-member-card h3 { font-family: var(--font-display); color: var(--paper); margin-bottom: 4px; } .tier-member-price { color: #E8B23D; font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; } .tier-member-benefits { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 8px; } .tier-member-benefits li { font-size: 0.82rem; color: var(--paper-dim); display: flex; align-items: flex-start; gap: 8px; } .tier-member-benefits li i { color: #4CAF50; margin-top: 2px; } .account-dropdown-item { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--warn); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: 9px 10px; border-radius: 4px; cursor: pointer; text-align: left; transition: background 0.15s ease; } .account-dropdown-item:hover { background: rgba(255,77,109,0.1); } .account-dropdown-divider { height: 1px; background: var(--line); margin: 6px 2px; } .account-dropdown-item-delete { color: var(--paper-dim); font-weight: 700; } .account-dropdown-item-delete:hover { background: rgba(240, 85, 74, 0.14); color: var(--warn); } /* --- LOGIN BENEFITS LIST --- */ .login-benefits { list-style: none; text-align: left; margin: 14px 0 18px; display: flex; flex-direction: column; gap: 8px; } .login-benefits li { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--paper-dim); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 4px; padding: 9px 11px; } .login-benefits i { color: var(--signal); font-size: 0.85rem; width: 16px; text-align: center; } /* --- SEARCH --- */ .search-box-header { position: relative; display: flex; align-items: center; } .search-box-header input { background: var(--bg-raised); border: 1px solid var(--line); padding: 8px 34px 8px 12px; border-radius: 4px; color: var(--paper); font-family: var(--font-body); font-size: 0.82rem; width: 110px; transition: all 0.2s ease; } .search-box-header input:focus { outline: none; border-color: var(--signal); width: 150px; } .search-box-header i { position: absolute; right: 11px; color: var(--moss); font-size: 0.8rem; pointer-events: none; } #game-search::placeholder { color: var(--moss); } /* --- GLASS CARD BASE --- */ .glass-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 20px; box-shadow: var(--shadow-sm); } /* --- LOGIN MODAL --- */ /* ✅ FIX: overlay sekarang selalu "flex" di DOM, buka/tutup dikendalikan lewat opacity + visibility + pointer-events (class .active) sehingga transisi buka/tutup jadi mulus (fade + scale), bukan lompatan display:none/flex. */ .modal-overlay { position: fixed; inset: 0; background: rgba(3, 5, 12, 0.62); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); z-index: 99999 !important; display: flex; justify-content: center; align-items: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } /* Fallback untuk browser/WebView lama yang belum dukung backdrop-filter, supaya tetap gelap & fokus ke modal walau tanpa efek blur */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .modal-overlay { background: rgba(3, 5, 12, 0.92); } } .modal-overlay.active, .modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; } .modal-content { width: 100%; max-width: 380px; position: relative; text-align: center; transform: translateY(14px) scale(.96); opacity: 0; transition: transform 0.32s cubic-bezier(.22,1,.36,1), opacity 0.28s ease; } .modal-overlay.active .modal-content, .modal-overlay.open .modal-content { transform: translateY(0) scale(1); opacity: 1; transition-delay: 0.03s; } .modal-content.glass-card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 122, 41, 0.08); padding: 26px 22px 22px; /* ✅ BUG FIX: modal ini sebelumnya tidak punya batas tinggi/scroll, jadi modal yang isinya panjang (mis. Hapus Akun) bisa overflow ke luar layar di HP (bagian tombol/footnote di bawah jadi tidak kelihatan dan tidak bisa di-scroll). Dibatasi tingginya & dikasih scroll internal. */ max-height: calc(100vh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-icon-badge { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--signal-dim); border: 1px solid rgba(255, 122, 41, 0.35); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--signal); animation: modalIconPulse 2.6s ease-in-out infinite; } @keyframes modalIconPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 41, 0.22); } 50% { box-shadow: 0 0 0 10px rgba(255, 122, 41, 0); } } .modal-header { display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 6px; } .modal-header h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.4px; } .text-blue { color: var(--signal); } .modal-desc { font-size: 0.84rem; color: var(--paper-dim); margin: 12px 0 18px; line-height: 1.55; } .close-btn { position: absolute; right: -4px; top: -10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 50%; color: var(--paper-dim); font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; } .close-btn:hover { color: var(--signal); border-color: var(--signal); transform: rotate(90deg); } /* --- LOGIN CONSENT & GOOGLE BUTTON --- */ .consent-box { margin: 16px 0; text-align: left; background: var(--bg-raised); padding: 13px 14px; border-radius: 8px; border: 1px solid var(--line); } .consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.78rem; line-height: 1.55; color: var(--paper-dim); cursor: pointer; } .consent-label input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--signal); flex-shrink: 0; cursor: pointer; } .consent-label a { color: var(--signal); text-decoration: none; font-weight: 600; } .consent-label a:hover { text-decoration: underline; } /* ✅ FITUR BARU: micro-feedback saat tombol Google diketuk sebelum consent dicentang — lihat initLoginModal() di script.js */ .consent-box.shake { animation: consentShake 0.45s ease; border-color: var(--signal); } @keyframes consentShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--paper); color: var(--surface); border: none; border-radius: 8px; padding: 14px 16px; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; cursor: pointer; box-shadow: var(--shadow-md); transition: all 0.2s ease; } .btn-google-icon { width: 20px; height: 20px; flex-shrink: 0; } .btn-google:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-google:active:not(:disabled) { transform: translateY(0); } .btn-google:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; box-shadow: none; } .modal-footnote { margin-top: 14px; font-size: 0.72rem; color: var(--moss); display: flex; align-items: center; justify-content: center; gap: 6px; } /* --- HAPUS AKUN MODAL --- */ .modal-icon-badge-danger { background: rgba(240, 85, 74, 0.13); border-color: rgba(240, 85, 74, 0.35); color: var(--warn); animation: none; box-shadow: none; } .delete-data-list li i.text-ok { color: var(--ok); } .delete-data-list li i.fa-circle-info { color: var(--moss); } .btn-danger-solid { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--warn); color: #250310; border: none; border-radius: 8px; padding: 14px 16px; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; cursor: pointer; box-shadow: var(--shadow-md); transition: all 0.2s ease; } .btn-danger-solid:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-danger-solid:active:not(:disabled) { transform: translateY(0); } .btn-danger-solid:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; box-shadow: none; } @media (max-width: 360px) { .modal-content.glass-card { padding: 22px 16px 18px; } } /* --- MAINTENANCE OVERLAY --- */ /* ✅ FITUR BARU: overlay full-screen yang muncul kalau admin mengaktifkan mode maintenance (lihat site_config/maintenance & bindMaintenanceMode() di script.js). z-index sengaja di atas .modal-overlay supaya menutupi apapun yang sedang terbuka. Dikendalikan lewat class .active, bukan display:none, biar transisinya halus dan konsisten dengan modal lain. */ .maintenance-overlay { position: fixed; inset: 0; z-index: 999999 !important; background: var(--bg); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .maintenance-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } .maintenance-box { text-align: center; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 40px 28px; box-shadow: var(--shadow-lg); } .maintenance-icon { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: var(--signal-dim); border: 1px solid rgba(255, 122, 41, 0.35); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--signal); animation: maintenancePulse 2.2s ease-in-out infinite; } @keyframes maintenancePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 41, 0.25); } 50% { box-shadow: 0 0 0 14px rgba(255, 122, 41, 0); } } .maintenance-box h1 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 12px; } .maintenance-box p { color: var(--paper-dim); font-size: 0.88rem; line-height: 1.6; } /* --- ANNOUNCEMENT BANNER --- */ /* ✅ FITUR BARU: banner pengumuman opsional, dikendalikan admin lewat site_config/general (announcementEnabled + announcementText). */ .announcement-banner { position: relative; z-index: 500; background: linear-gradient(90deg, var(--signal-dim), transparent 80%); border-bottom: 1px solid var(--line); color: var(--paper); font-size: 0.8rem; padding: 9px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; } .announcement-banner i { color: var(--signal); } /* 🐛 BUG FIX: atribut HTML "hidden" di elemen ini sebelumnya diabaikan karena rule .announcement-banner di atas set display:flex tanpa syarat -- author stylesheet menang atas default UA style [hidden]{display:none}, jadi bar (dan icon toa-nya) SELALU tampil walau teksnya kosong / belum ada pengumuman aktif dari admin. Rule di bawah mengembalikan perilaku [hidden] yang seharusnya, supaya bar cuma muncul saat script.js benar-benar set bannerEl.hidden = false (ada pengumuman aktif). */ .announcement-banner[hidden] { display: none; } /* --- THIRD-PARTY DISCLAIMER BANNER --- */ .disclaimer-banner { max-width: 800px; margin: 0 auto 18px; padding: 0 14px; } /* Sembunyikan banner reseller pas alur checkout (pilih paket → data akun → pembayaran) — sudah cukup ditampilkan di beranda & dijelaskan di ToS/FAQ, nggak perlu ganggu user pas lagi fokus mau bayar. */ body[data-page="page-paket"] .disclaimer-banner, body[data-page="page-id"] .disclaimer-banner, body[data-page="page-payment"] .disclaimer-banner { display: none; } .disclaimer-banner .disclaimer-inner { display: flex; align-items: flex-start; gap: 12px; background: var(--signal-dim); border: 1px solid rgba(255, 122, 41, 0.28); border-left: 3px solid var(--signal); border-radius: 6px; padding: 14px 16px; } .disclaimer-icon { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 122, 41, 0.16); border: 1px solid rgba(255, 122, 41, 0.35); } .disclaimer-banner i { color: var(--signal); font-size: 0.85rem; } .disclaimer-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: break-word; } .disclaimer-label { display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--signal); margin-bottom: 4px; } .disclaimer-banner p { font-size: 0.78rem; line-height: 1.55; color: var(--paper-dim); } .disclaimer-banner strong { color: var(--paper); } /* --- PROMO SLIDER --- */ .promo-slider { position: relative; width: 100%; height: 168px; border-radius: 8px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line); } .slider-track { display: flex; width: 200%; height: 100%; transition: transform 0.5s ease-in-out; } .slide { width: 50%; height: 100%; cursor: pointer; } .slide-banner { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; overflow: hidden; } /* Enam varian glow neon murni CSS — tiap game punya warna sinyal sendiri di atas dasar papan sirkuit gelap yang sama, nggak butuh gambar sama sekali, jadi bebas risiko hak cipta atau hosting rusak dari sumber luar. */ .slide-banner-a { background: radial-gradient(circle at 82% 15%, rgba(255,140,60,0.40) 0%, transparent 48%), radial-gradient(circle at 15% 90%, rgba(178,107,255,0.20) 0%, transparent 50%), linear-gradient(135deg, #1A0F05 0%, #070B18 80%); } .slide-banner-b { background: radial-gradient(circle at 82% 15%, rgba(34,211,238,0.38) 0%, transparent 48%), radial-gradient(circle at 15% 90%, rgba(255,122,41,0.14) 0%, transparent 50%), linear-gradient(135deg, #071224 0%, #070B18 80%); } .slide-banner-c { background: radial-gradient(circle at 82% 15%, rgba(34,197,94,0.36) 0%, transparent 48%), radial-gradient(circle at 15% 90%, rgba(34,211,238,0.14) 0%, transparent 50%), linear-gradient(135deg, #052015 0%, #070B18 80%); } .slide-banner-d { background: radial-gradient(circle at 82% 15%, rgba(178,107,255,0.40) 0%, transparent 48%), radial-gradient(circle at 15% 90%, rgba(34,211,238,0.18) 0%, transparent 50%), linear-gradient(135deg, #160729 0%, #070B18 80%); } .slide-banner-e { background: radial-gradient(circle at 82% 15%, rgba(255,77,109,0.36) 0%, transparent 48%), radial-gradient(circle at 15% 90%, rgba(178,107,255,0.16) 0%, transparent 50%), linear-gradient(135deg, #240711 0%, #070B18 80%); } .slide-banner-f { background: radial-gradient(circle at 82% 15%, rgba(240,197,80,0.36) 0%, transparent 48%), radial-gradient(circle at 15% 90%, rgba(255,122,41,0.14) 0%, transparent 50%), linear-gradient(135deg, #241C05 0%, #070B18 80%); } /* Tekstur garis sirkuit tipis menyilang, menggantikan garis kertas tiket — selaras sama identitas "Circuit" yang gelap dan bergaris trace biru. */ .slide-banner::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, rgba(234,241,255,0.05) 0 2px, transparent 2px 16px); pointer-events: none; } /* ✅ PERBAIKAN VISUAL: sebelumnya banner cuma gradient blob polos tanpa fokus mata — situs topup kelas internasional selalu punya satu elemen grafis besar di banner (karakter/ikon) supaya banner terasa seperti "hero", bukan dekorasi. Tanpa aset artwork berlisensi, dipakai bentuk geometris besar setengah-transparan pojok kanan sebagai signature grafis "Circuit" (diamond bertumpuk, bukan lingkaran generik) agar tiap slide tetap terasa dirancang, bukan cuma warna beda-beda. */ .slide-banner::after { content: ""; position: absolute; top: -30%; right: -8%; width: 62%; height: 160%; background: linear-gradient(135deg, rgba(234,241,255,0.10) 0%, transparent 55%); clip-path: polygon(60% 0%, 100% 30%, 78% 100%, 30% 78%); pointer-events: none; } /* Chip info: ramping, nempel di bawah, di atas tekstur banner */ .slide-info { position: relative; z-index: 1; padding: 0 14px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } /* Banner promo sengaja dipertahankan gelap & berwarna — satu-satunya titik "berani" di halaman yang serba tenang, jadi teksnya tetap terang di atasnya. */ .slide-info h4 { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; line-height: 1.25; color: var(--paper); text-shadow: 0 2px 12px rgba(0,0,0,0.5); } .badge-orange, .badge-blue, .badge-green, .badge-purple, .badge-red, .badge-yellow { font-size: 0.58rem; padding: 2px 7px; border-radius: 2px; font-weight: 700; letter-spacing: 0.5px; font-family: var(--font-body); text-transform: uppercase; align-self: flex-start; } .badge-orange { background: var(--signal); color: var(--signal-ink); } .badge-blue { background: var(--electric); color: #05101F; } .badge-green { background: var(--ok); color: #05200F; } .badge-purple { background: var(--violet); color: #17062B; } .badge-red { background: var(--warn); color: #250310; } .badge-yellow { background: #F0C550; color: #241C05; } .slider-dots { position: absolute; bottom: 10px; right: 12px; display: flex; gap: 5px; } .dot { width: 5px; height: 5px; background: rgba(234,241,255,0.35); border-radius: 1px; cursor: pointer; transition: all 0.2s; } .dot.active { background: var(--signal); width: 14px; } /* --- MAIN CONTAINER & SECTIONS --- */ .app-container { max-width: 600px; margin: 0 auto; padding: 0 14px; } .section-title h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px; } /* ✅ PERBAIKAN VISUAL: tanpa penanda apapun, tiap section-title terlihat sama seperti paragraf biasa yang dibesarin — nggak ada penekanan "ini awal seksi baru". Garis pendek 3px konsisten sama motif "trace" papan sirkuit di background body, jadi bukan elemen dekoratif asal tempel. */ .section-title h2::before { content: ""; width: 3px; height: 16px; background: var(--signal); border-radius: 2px; flex-shrink: 0; } .section-title p { color: var(--moss); font-size: 0.8rem; margin-top: 3px; } .text-orange { color: var(--signal); } .back-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--moss); cursor: pointer; margin-bottom: 16px; font-size: 0.85rem; transition: color 0.2s; } .back-btn:hover { color: var(--signal); } /* --- PAGE TRANSITIONS --- */ .page { display: none; opacity: 0; will-change: transform, opacity; } /* ✅ FIX (bug utama "nav tenggelam"): tanpa min-height, halaman pendek (Riwayat) bikin tinggi dokumen anjlok drastis dibanding Home. Di Chrome Android, itu memicu address bar browser muncul lagi di tengah pergantian tab -> viewport dihitung ulang -> bottom nav & elemen fixed lain terlihat "tenggelam"/geser sesaat. Dengan min-height, tinggi dokumen tetap konsisten mendekati satu layar penuh di semua tab, jadi address bar tidak perlu reflow saat pindah tab. */ .page.active { display: block; opacity: 1; min-height: calc(var(--vh, 1vh) * 100 - var(--header-height) - var(--nav-height) - 66px); } /* Default (vertical) enter/exit — used for stack-style navigation (paket, id, payment, tos, privacy) */ .page.page-enter-up { animation: pageEnterUp 0.42s cubic-bezier(.22,1,.36,1) forwards; } .page.page-exit-up { display: block; animation: pageExitUp 0.22s cubic-bezier(.4,0,1,1) forwards; } /* Directional (horizontal) tab-slide — used between the two bottom-nav tabs (Home <-> Riwayat) */ .page.tab-enter-left { animation: tabEnterLeft 0.4s cubic-bezier(.22,1,.36,1) forwards; } .page.tab-enter-right { animation: tabEnterRight 0.4s cubic-bezier(.22,1,.36,1) forwards; } .page.tab-exit-left { display: block; animation: tabExitLeft 0.22s cubic-bezier(.4,0,1,1) forwards; } .page.tab-exit-right { display: block; animation: tabExitRight 0.22s cubic-bezier(.4,0,1,1) forwards; } @keyframes pageEnterUp { 0% { opacity: 0; transform: translateY(18px) scale(.99); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pageExitUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(.99); } } @keyframes tabEnterLeft { 0% { opacity: 0; transform: translateX(28px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes tabEnterRight { 0% { opacity: 0; transform: translateX(-28px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes tabExitLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-28px); } } @keyframes tabExitRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(28px); } } /* --- GAME GRID / CARDS --- */ .game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; } .game-card { position: relative; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; transition: all 0.2s ease; } .game-card:hover { border-color: var(--signal); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,122,41,0.16); } .game-img-wrapper { width: 100%; aspect-ratio: 1.1/1; overflow: hidden; background: #0B1226; } /* Ubin ikon orisinal pengganti artwork game — pola genre (bidak catur buat MOBA, parasut buat battle royale, dst), bukan turunan karakter/logo siapa pun, jadi bebas dari risiko hak cipta sekaligus nggak butuh file gambar. */ .game-icon-tile { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 22%, rgba(255,122,41,0.16) 0%, transparent 55%), radial-gradient(circle at 80% 85%, rgba(34,211,238,0.10) 0%, transparent 55%), #0B1226; transition: transform 0.35s; } .game-icon-tile i { position: relative; z-index: 1; font-size: 1.9rem; color: var(--signal); } .game-card:hover .game-icon-tile { transform: scale(1.05); } /* ✅ PERBAIKAN VISUAL: tanpa artwork asli game, semua 21 ubin sebelumnya terlihat identik (oranye rata semua) — user butuh >1 detik buat scan game favoritnya. Dikelompokkan per genre dengan warna sinyal berbeda (pola yang sama seperti badge promo di atasnya), supaya grid langsung terasa "dipetakan", bukan generik. Genre, bukan game individual, biar tetap gampang di-maintain kalau nambah game baru. */ .game-card[data-game="ml"] .game-icon-tile, .game-card[data-game="hok"] .game-icon-tile, .game-card[data-game="wildrift"] .game-icon-tile, .game-card[data-game="aov"] .game-icon-tile, .game-card[data-game="brawl"] .game-icon-tile { background: radial-gradient(circle at 30% 22%, rgba(178,107,255,0.22) 0%, transparent 55%), radial-gradient(circle at 80% 85%, rgba(34,211,238,0.10) 0%, transparent 55%), #0B1226; } .game-card[data-game="ml"] .game-icon-tile i, .game-card[data-game="hok"] .game-icon-tile i, .game-card[data-game="wildrift"] .game-icon-tile i, .game-card[data-game="aov"] .game-icon-tile i, .game-card[data-game="brawl"] .game-icon-tile i { color: var(--violet); } .game-card[data-game="pubg"] .game-icon-tile, .game-card[data-game="ff"] .game-icon-tile, .game-card[data-game="codm"] .game-icon-tile, .game-card[data-game="breakout"] .game-icon-tile { background: radial-gradient(circle at 30% 22%, rgba(255,77,109,0.22) 0%, transparent 55%), radial-gradient(circle at 80% 85%, rgba(255,122,41,0.08) 0%, transparent 55%), #0B1226; } .game-card[data-game="pubg"] .game-icon-tile i, .game-card[data-game="ff"] .game-icon-tile i, .game-card[data-game="codm"] .game-icon-tile i, .game-card[data-game="breakout"] .game-icon-tile i { color: var(--warn); } .game-card[data-game="genshin"] .game-icon-tile, .game-card[data-game="hsr"] .game-icon-tile, .game-card[data-game="zzz"] .game-icon-tile { background: radial-gradient(circle at 30% 22%, rgba(34,211,238,0.24) 0%, transparent 55%), radial-gradient(circle at 80% 85%, rgba(178,107,255,0.10) 0%, transparent 55%), #0B1226; } .game-card[data-game="genshin"] .game-icon-tile i, .game-card[data-game="hsr"] .game-icon-tile i, .game-card[data-game="zzz"] .game-icon-tile i { color: var(--electric); } .game-card[data-game="coc"] .game-icon-tile, .game-card[data-game="cr"] .game-icon-tile, .game-card[data-game="lifeafter"] .game-icon-tile { background: radial-gradient(circle at 30% 22%, rgba(34,197,94,0.22) 0%, transparent 55%), radial-gradient(circle at 80% 85%, rgba(34,211,238,0.08) 0%, transparent 55%), #0B1226; } .game-card[data-game="coc"] .game-icon-tile i, .game-card[data-game="cr"] .game-icon-tile i, .game-card[data-game="lifeafter"] .game-icon-tile i { color: var(--ok); } .game-card[data-game="stumble"] .game-icon-tile, .game-card[data-game="eggy"] .game-icon-tile, .game-card[data-game="whiteout"] .game-icon-tile, .game-card[data-game="asphaltlegends"] .game-icon-tile, .game-card[data-game="identityv"] .game-icon-tile, .game-card[data-game="roblox"] .game-icon-tile { background: radial-gradient(circle at 30% 22%, rgba(240,197,80,0.22) 0%, transparent 55%), radial-gradient(circle at 80% 85%, rgba(255,122,41,0.10) 0%, transparent 55%), #0B1226; } .game-card[data-game="stumble"] .game-icon-tile i, .game-card[data-game="eggy"] .game-icon-tile i, .game-card[data-game="whiteout"] .game-icon-tile i, .game-card[data-game="asphaltlegends"] .game-icon-tile i, .game-card[data-game="identityv"] .game-icon-tile i, .game-card[data-game="roblox"] .game-icon-tile i { color: #F0C550; } .game-info { padding: 8px 6px; text-align: center; } .game-info h3 { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: -0.1px; } .badge-populer { position: absolute; top: 6px; right: 6px; background: var(--signal); /* ✅ FIX KONTRAS: putih di atas oranye di badge kecil (0.58rem) makin parah gagalnya karena ukuran teks makin kecil. signal-ink tembus AA. */ color: var(--signal-ink); padding: 2px 7px 2px 5px; border-radius: 2px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; z-index: 5; font-family: var(--font-body); display: inline-flex; align-items: center; gap: 3px; box-shadow: 0 2px 8px rgba(255,122,41,0.45); } /* ✅ Titik live-signal kecil di badge HOT — sinyal "lagi ramai sekarang", bukan cuma label statis. Pulsenya lembut & pendek (2s) supaya tidak mengganggu di grid dengan 6 badge sekaligus, dan otomatis nonaktif untuk pengguna yang minta reduced motion. */ .badge-populer::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--signal-ink); animation: badgePulse 2s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } @media (prefers-reduced-motion: reduce) { .badge-populer::before { animation: none; } } .empty-state { text-align: center; padding: 40px 0; color: var(--moss); } .empty-state i { font-size: 2rem; margin-bottom: 10px; opacity: 0.5; } .empty-state h3 { font-family: var(--font-display); color: var(--paper-dim); font-size: 1rem; margin-bottom: 4px; } .empty-state p { font-size: 0.82rem; line-height: 1.5; } /* --- WARNING / ALERT BOX --- */ .warning-alert-box { background: rgba(255, 77, 109, 0.08); border: 1px solid rgba(255, 77, 109, 0.32); border-radius: 6px; padding: 14px; display: flex; gap: 12px; margin-bottom: 20px; } .warning-icon-wrapper { color: var(--warn); font-size: 1.2rem; } .warning-text-content h4 { font-family: var(--font-display); color: var(--warn); font-size: 0.88rem; letter-spacing: 0.2px; margin-bottom: 4px; } .warning-text-content p { font-size: 0.8rem; color: var(--paper-dim); line-height: 1.45; } /* --- PACKAGE GRID --- */ /* Chip kategori game aktif di atas daftar nominal */ .category-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size: 0.78rem; color: var(--moss); margin-bottom: 16px; } .category-chip i { color: var(--signal); } .category-chip strong { color: var(--paper); font-weight: 600; } .package-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .package-item { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 4px; padding: 13px; cursor: pointer; transition: all 0.2s; } .pkg-icon { color: var(--signal); font-size: 0.85rem; margin-bottom: 6px; } .package-title { font-size: 0.85rem; font-weight: 600; line-height: 1.3; } .package-price { font-family: var(--font-body); font-size: 0.85rem; color: var(--signal); font-weight: 700; margin-top: 5px; } .package-item:hover, .package-item.selected { border-color: var(--signal); background: var(--signal-dim); } /* --- STRIP KONTEKS GAME/PAKET (page-id) --- */ .id-context-strip { display: flex; align-items: center; gap: 12px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; } .id-context-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--signal-dim); border: 1px solid var(--signal); color: var(--signal); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .id-context-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 0.78rem; color: var(--moss); } .id-context-text strong { font-size: 0.85rem; color: var(--paper); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .id-context-price { flex: 0 0 auto; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--signal); } /* --- FORMS --- */ .form-container { margin-top: 4px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 0.8rem; margin-bottom: 6px; color: var(--moss); text-transform: uppercase; letter-spacing: 0.4px; } .form-group input { width: 100%; background: var(--bg-raised); border: 1px solid var(--line); padding: 11px 13px; border-radius: 4px; color: var(--paper); font-family: var(--font-body); font-size: 0.95rem; } .form-group input:focus { outline: none; border-color: var(--signal); } .form-group input::placeholder { color: var(--moss); } /* Teks error merah di bawah input — muncul/hilang dengan animasi halus, dipakai untuk validasi User ID & Zone ID (lihat initValidationEngine). */ .field-error { display: block; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); margin-top: 0; color: var(--warn); font-size: 0.74rem; line-height: 1.4; transition: max-height 0.3s cubic-bezier(.22,1,.36,1), opacity 0.25s ease, transform 0.25s ease, margin-top 0.3s ease; } .field-error.show { max-height: 40px; opacity: 1; transform: translateY(0); margin-top: 7px; } .form-group.has-error .input-icon-wrap input { border-color: var(--warn); box-shadow: 0 0 0 1px rgba(255, 77, 109, 0.35); } .form-group.has-error .input-icon-wrap .input-icon { color: var(--warn); } /* Input dengan ikon menempel di dalam field — lebih jelas konteksnya dibanding ikon yang cuma nempel di label. */ .input-icon-wrap { position: relative; } .input-icon-wrap .input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--moss); font-size: 0.85rem; pointer-events: none; } .input-icon-wrap input { padding-left: 36px; } /* Catatan kecil sebelum tombol lanjut — mengingatkan user cek ID sebelum lanjut ke pembayaran, mengurangi salah input yang tidak bisa direfund. */ .form-hint { display: flex; align-items: flex-start; gap: 8px; background: rgba(255, 122, 41, 0.06); border: 1px dashed var(--signal-dim); border-radius: 4px; padding: 10px 12px; margin-bottom: 18px; font-size: 0.76rem; line-height: 1.45; color: var(--paper-dim); } .form-hint i { color: var(--signal); margin-top: 2px; font-size: 0.8rem; } /* --- ACCORDION (SYARAT & KETENTUAN) --- */ .accordion-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .accordion-item { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); overflow: hidden; transition: border-color 0.3s ease, background 0.3s ease; } .accordion-item.open { border-color: rgba(255, 122, 41, 0.4); background: rgba(255, 122, 41, 0.06); } .accordion-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: none; cursor: pointer; padding: 14px 16px; text-align: left; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--paper); -webkit-tap-highlight-color: transparent; transition: color 0.3s ease; } .accordion-header:hover { color: var(--signal); } .accordion-item.open .accordion-header { color: var(--signal); } .accordion-header span { flex: 1; } .accordion-caret { flex-shrink: 0; font-size: 0.78rem; color: var(--moss); transition: transform 0.35s cubic-bezier(.22,1,.36,1), color 0.3s ease; } .accordion-item.open .accordion-caret { transform: rotate(180deg); color: var(--signal); } /* Trik CSS grid-template-rows 0fr -> 1fr menghasilkan animasi buka/tutup tinggi konten yang mulus tanpa perlu JS menghitung scrollHeight. */ .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s cubic-bezier(.22,1,.36,1); } .accordion-item.open .accordion-panel { grid-template-rows: 1fr; } .accordion-panel-inner { overflow: hidden; min-height: 0; padding: 0 16px; font-size: 0.85rem; line-height: 1.6; color: var(--paper-dim); transition: padding 0.38s cubic-bezier(.22,1,.36,1); } .accordion-item.open .accordion-panel-inner { padding: 0 16px 16px; } .accordion-panel-inner p { margin-bottom: 12px; } .accordion-panel-inner p:last-child { margin-bottom: 0; } /* --- HALAMAN LEGAL (S&K / PRIVASI): meta, ringkasan, navigasi, ikon --- */ .legal-meta-row { display: flex; justify-content: flex-end; margin-bottom: 14px; } .legal-version-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; color: var(--moss); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px; } .legal-tldr { background: var(--electric-dim); border: 1px solid rgba(34, 211, 238, 0.32); border-left: 3px solid var(--electric); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; } .legal-tldr-title { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--paper); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .legal-tldr-title i { color: var(--electric); } .legal-tldr-list { list-style: none; display: flex; flex-direction: column; gap: 7px; } /* ✅ BUG FIX: sebelumnya li pakai display:flex, padahal isinya teks campur beberapa tag sebagai saudara (sibling) langsung. Di flexbox, SETIAP elemen anak (termasuk tiap dan tiap potongan teks di antaranya) jadi flex-item TERPISAH yang berjajar ke samping alih-alih mengalir sebagai satu kalimat — ini yang bikin layar TOS/Privasi bisa digeser ke samping (overflow horizontal) di HP. Diganti ke position:relative + padding-left supaya ikon tetap nempel kiri, tapi teks & di dalamnya mengalir normal dan wrap seperti paragraf biasa. */ .legal-tldr-list li { position: relative; padding-left: 22px; font-size: 0.8rem; line-height: 1.5; color: var(--paper-dim); } .legal-tldr-list li i { position: absolute; left: 0; top: 3px; color: var(--electric); font-size: 0.78rem; width: 14px; text-align: center; } .legal-tldr-list li strong { color: var(--paper); } .legal-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px 0; padding-bottom: 16px; border-bottom: 1px dashed var(--line); } .legal-jump-chip { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--paper-dim); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; -webkit-tap-highlight-color: transparent; } .legal-jump-chip:hover { color: var(--signal); border-color: rgba(255, 122, 41, 0.4); background: var(--signal-dim); } .legal-h-icon { color: var(--signal); font-size: 0.82rem; margin-right: 4px; width: 16px; text-align: center; } .legal-refund-box { border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-left: 3px solid var(--line); background: var(--bg-raised); } .legal-refund-box p { margin: 0; font-size: 0.82rem; line-height: 1.55; } .legal-refund-title { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .legal-refund-box.refund-ok { border-left-color: var(--ok); background: rgba(34, 197, 94, 0.07); } .legal-refund-box.refund-ok .legal-refund-title { color: var(--ok); } .legal-refund-box.refund-no { border-left-color: var(--warn); background: rgba(255, 77, 109, 0.07); } .legal-refund-box.refund-no .legal-refund-title { color: var(--warn); } .legal-refund-box.refund-info { border-left-color: var(--electric); background: var(--electric-dim); } .legal-refund-box.refund-info .legal-refund-title { color: var(--electric); } /* --- BUTTONS --- */ .btn-neon { width: 100%; padding: 13px; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; font-size: 0.9rem; font-family: var(--font-display); letter-spacing: 0.2px; color: #FFFFFF; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-orange, #btn-submit-id { background: var(--signal) !important; border: none !important; /* ✅ FIX KONTRAS: sama seperti .side-drawer-login-btn — putih di atas oranye gagal WCAG AA (2.6:1). Ini tombol CTA paling penting di alur checkout ("Lanjut ke Pembayaran"), jadi keterbacaannya krusial. */ color: var(--signal-ink) !important; } .btn-neon:hover, #btn-submit-id:hover { filter: brightness(1.08); transform: translateY(-1px); } #btn-submit-id i { transition: transform 0.2s ease; } #btn-submit-id:hover i { transform: translateX(3px); } .btn-neon.btn-wa { background: var(--signal) !important; color: var(--signal-ink) !important; margin-top: 4px; } .btn-neon.btn-wa:hover { filter: brightness(1.08); } .btn-neon.btn-wa i { font-size: 1.05rem; } .btn-neon.btn-wa:active { transform: scale(0.98); } /* --- PAYMENT SUMMARY (RECEIPT STYLE) --- */ .summary-container { position: relative; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 6px; padding: 22px 20px; overflow: hidden; } .summary-container::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--signal) 0 6px, transparent 6px 12px); border-radius: 6px 6px 0 0; } .summary-item { display: flex; justify-content: space-between; padding: 7px 0; font-size: 0.88rem; } .summary-item .label { color: var(--moss); } .summary-item .value { font-weight: 600; font-family: var(--font-body); } .text-glow-orange { color: var(--signal); } .neon-divider { border: none; border-top: 1px dashed var(--line); margin: 12px 0; } .tier-msg { font-size: 0.78rem; font-family: var(--font-body); font-weight: 600; padding: 8px 10px; border-radius: 4px; background: var(--bg-raised); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .promo-box { background: var(--bg-raised); border: 1px dashed var(--line); border-radius: 6px; padding: 12px 14px; margin: 14px 0; } .promo-label { font-size: 0.78rem; color: var(--moss); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .promo-input-row { display: flex; gap: 8px; } .promo-msg { font-size: 0.75rem; margin-top: 8px; } .promo-box p { font-family: var(--font-body); } #input-promo { flex: 1; min-width: 0; padding: 10px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-raised); color: var(--paper); outline: none; text-transform: uppercase; font-family: var(--font-body); } #input-promo:focus { border-color: var(--signal); } #input-promo:disabled { opacity: 0.5; } .btn-promo-claim { background: transparent; border: 1px solid var(--signal); color: var(--signal); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 0 18px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .btn-promo-claim:hover { background: var(--signal); color: var(--signal-ink); } .btn-promo-claim:disabled { border-color: var(--line); color: var(--moss); cursor: not-allowed; } .total-item { align-items: center; padding-top: 10px; } /* --- TICKET HEADER (page-payment) --- */ .ticket-header { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; } .ticket-header-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--signal-dim); border: 1px solid var(--signal); color: var(--signal); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } .ticket-header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ticket-game { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticket-package { font-family: var(--font-body); font-size: 0.8rem; color: var(--signal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Garis putus dengan lubang bundar di kedua tepi kartu — efek "tiket sobek" yang memisahkan header (game/paket) dari rincian ID/Zone. */ .ticket-perforation { position: relative; height: 0; border-top: 1px dashed var(--line); margin: 16px -20px 10px; } .ticket-perforation::before, .ticket-perforation::after { content: ""; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); } .ticket-perforation::before { left: -7px; } .ticket-perforation::after { right: -7px; } .label-total { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.3px; } .value-total { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--signal); } .payment-method-box { background: var(--signal-dim); border: 1px dashed var(--line); border-left: 3px solid var(--signal); border-radius: 4px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; margin: 16px 0; } .wa-icon { font-size: 1.5rem; color: var(--signal); } .payment-method-box h4 { font-family: var(--font-display); font-size: 0.9rem; } .payment-method-box p { font-size: 0.78rem; color: var(--moss); } /* ---------- QRIS & bukti transfer ---------- */ .qris-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 16px 0 12px; text-align: center; } .qris-label { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--paper); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; } .qris-label i { color: var(--signal); } .qris-img { max-width: 220px; width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #fff; padding: 8px; display: block; margin: 0 auto 12px; } .qris-fallback { font-size: 0.78rem; color: var(--warn); background: rgba(255, 77, 109, 0.08); border: 1px dashed rgba(255, 77, 109, 0.35); border-radius: 8px; padding: 10px; margin-bottom: 10px; } .qris-note { font-size: 0.76rem; color: var(--paper-dim); line-height: 1.5; } /* --- LEGAL / FAQ CONTENT (ToS, Privacy, FAQ) --- Class-based, gantiin ~90 inline style="" yang sebelumnya diulang manual di tiap

/

/ pada halaman legal — sekarang cukup 1 tempat ubah. */ .legal-card { font-size: 0.85rem; line-height: 1.6; color: var(--paper-dim); } .legal-h4 { color: var(--paper); margin-bottom: 8px; } .legal-p { margin-bottom: 12px; } .legal-signal { color: var(--signal); } /* --- TOAST --- */ .toast { visibility: hidden; position: fixed; top: -60px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 10px 20px; border-radius: 4px; z-index: 9999; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--paper); min-width: 220px; text-align: center; transition: top 0.3s ease, opacity 0.3s ease; opacity: 0; } .toast.show { visibility: visible; opacity: 1; top: 85px; } .toast.sukses { border-color: var(--ok); } .toast.gagal { border-color: var(--warn); } .toast.info { border-color: var(--signal); } /* --- HISTORY --- */ .history-list { display: flex; flex-direction: column; gap: 8px; } .history-card { background: var(--bg-raised); border: 1px solid var(--line); border-left: 2px solid var(--signal); padding: 13px 14px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } .history-details h4 { font-size: 0.92rem; font-weight: 600; } .history-details p { color: var(--moss); font-size: 0.75rem; margin-top: 2px; font-family: var(--font-body); } .history-right { text-align: right; } .history-price { font-weight: 700; color: var(--signal); font-family: var(--font-body); } .history-status-tag { font-size: 0.62rem; padding: 1px 6px; background: transparent; color: var(--moss); border: 1px solid var(--line); border-radius: 2px; display: inline-block; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; } /* ✅ FITUR BARU: warna badge status pesanan, mengikuti status yang diubah admin lewat menu admin (Menunggu Pembayaran/Selesai/Refund/Dibatalkan). */ .history-status-tag.pending { color: var(--paper-dim); border-color: var(--line); } .history-status-tag.dibayar { color: var(--electric); border-color: rgba(34, 211, 238, 0.35); } .history-status-tag.selesai { color: var(--ok); border-color: rgba(31, 138, 92, 0.35); } .history-status-tag.refund { color: var(--signal); border-color: rgba(255, 122, 41, 0.35); } .history-status-tag.dibatalkan { color: var(--warn); border-color: rgba(255, 77, 109, 0.35); } /* --- FOOTER --- */ /* ✅ FIX: margin-bawah ditambah supaya footer punya jarak aman di atas floating WhatsApp (bottom: nav-height + 16px) dan bottom-nav (fixed, height: nav-height) — tidak lagi berpotensi tumpang tindih di layar pendek. */ .site-footer { margin-top: 44px; margin-bottom: 16px; padding: 28px 0 20px; border-top: 1px solid var(--line); background-image: repeating-linear-gradient(90deg, var(--signal) 0 6px, transparent 6px 12px); background-size: 100% 2px; background-repeat: no-repeat; background-position: top; opacity: 0.96; } /* ✅ Footer disembunyikan selama alur checkout (pilih nominal -> isi ID -> pembayaran) supaya fokus user tidak pecah di tengah transaksi. Tetap tampil normal di Home, Riwayat, dan halaman legal. */ body[data-page="page-paket"] .site-footer, body[data-page="page-id"] .site-footer, body[data-page="page-payment"] .site-footer { display: none; } .footer-content { text-align: center; max-width: 420px; margin: 0 auto; padding: 0 10px; } .footer-brand { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 7px; } .footer-tagline { color: var(--moss); font-size: 0.8rem; margin-bottom: 18px; } .footer-brand-word { display: inline-block; } .footer-social-minimal { display: flex; justify-content: center; gap: 20px; margin-bottom: 18px; } .footer-social-minimal a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--paper-dim); font-size: 1rem; text-decoration: none; transition: all 0.2s ease; } .footer-social-minimal a:hover { color: var(--signal); border-color: var(--signal); transform: translateY(-2px); } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding-top: 18px; margin-bottom: 16px; border-top: 1px dashed var(--line); } .footer-legal-link { display: inline-flex; align-items: center; gap: 6px; color: var(--moss); text-decoration: none; font-size: 0.76rem; letter-spacing: 0.2px; padding: 4px 2px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .footer-legal-link i { font-size: 0.72rem; opacity: 0.8; } .footer-legal-link:hover, .footer-legal-link:focus-visible { color: var(--signal); border-bottom-color: var(--signal-dim); } .footer-legal-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line); flex-shrink: 0; } .footer-bottom-minimal { color: var(--moss); font-size: 0.72rem; line-height: 1.5; padding: 0 6px; } @media (max-width: 360px) { .footer-legal { gap: 8px; } .footer-legal-link { font-size: 0.7rem; } .site-footer { padding: 22px 0 18px; } .footer-social-minimal { gap: 14px; } } /* --- FLOATING WHATSAPP --- */ .floating-wa-wrap { position: fixed; bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom, 0px)); right: 16px; z-index: 500; display: flex; align-items: center; justify-content: flex-end; } .floating-wa { position: relative; width: 48px; height: 48px; background: #1F8A5C; color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 6px 18px rgba(31,138,92,0.35); flex-shrink: 0; text-decoration: none; transition: transform 0.2s; } .floating-wa:hover { transform: scale(1.06); } /* Bubble keterangan "CS resmi" — muncul berkala, bukan permanen, supaya tidak menutupi konten. Dikontrol lewat class .show dari script.js. */ .wa-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); background: var(--surface); border: 1px solid var(--line); color: var(--paper); font-size: 0.72rem; font-weight: 600; line-height: 1.35; padding: 8px 12px; border-radius: 10px; white-space: nowrap; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .wa-tooltip i { color: var(--ok); margin-right: 4px; } .wa-tooltip::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--surface); } .wa-tooltip.show { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 480px) { .wa-tooltip { white-space: normal; max-width: 52vw; font-size: 0.68rem; } } /* --- BOTTOM NAV --- */ /* ✅ REVISI: nav bar dikembalikan jadi bar datar biasa (nggak ada lagi lingkaran yang nongol keluar/nutupin konten di atasnya). Efek "aktif" sekarang cuma ikon yang keliatan timbul/3D (gradient + shadow embossed) sambil tetap di dalam batas tinggi bar — bukan wave/notch yang mengambang lagi. */ .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); background: rgba(7, 11, 24, 0.86); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,0.35); display: flex; justify-content: space-evenly; align-items: center; z-index: 1000; padding: 0 12px env(safe-area-inset-bottom, 0px) 12px; } .nav-item { position: relative; background: none; border: none; color: var(--moss); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; flex: 1 1 0; max-width: 160px; height: 50px; margin: 0 6px; padding: 0; border-radius: 16px; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; transition: color 0.3s ease; } .nav-item i { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 1.02rem; transition: width 0.25s cubic-bezier(.34,1.56,.64,1), height 0.25s cubic-bezier(.34,1.56,.64,1), background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; } .nav-item span { position: relative; z-index: 1; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; transition: color 0.25s ease; } .nav-item:active i { transform: scale(0.92); } .nav-item:hover { color: var(--paper-dim); } /* ikon tab aktif: badge bulat kecil dengan gradient + shadow berlapis (terang tipis di atas, gelap di bawah) supaya kesannya timbul/3D — tetap di dalam kotak tombolnya sendiri, nggak nongol keluar bar. */ .nav-item.active i { width: 36px; height: 36px; background: linear-gradient(145deg, #FF9A4D, #FF6A12); color: #fff; box-shadow: 0 3px 8px rgba(255, 122, 41, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -2px 3px rgba(0, 0, 0, 0.2); } .nav-item.active span { color: var(--signal); } /* --- FOCUS ACCESSIBILITY --- */ button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* --- REDUCED MOTION --- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --- RESPONSIVE --- */ @media (max-width: 380px) { .search-box-header input { width: 80px; } .search-box-header input:focus { width: 120px; } .game-grid { gap: 8px; } }