/* ============================================================ ZETHER.ID — DESIGN SYSTEM A clean, neutral dark identity. Brand orange is the one "hot" accent used for CTAs and notifications; price figures use a dedicated red so they always stand out from ordinary UI. Secondary blue/purple tints are muted and only used to tell game categories/status apart. Plain, readable sans-serif type throughout — no terminal/monospace styling. ============================================================ */ /* --- 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 — light, white-card surface + navy ink + brand blue. Ditiru dari nuansa lapakgaming: dasar terang, kartu putih dengan shadow lembut, biru sebagai warna utama. Oranye masih dipakai sebagai aksen sekunder untuk badge promo/"HOT" saja. */ --bg: #EEF2FA; --bg-raised: rgba(46, 116, 251, 0.05); --surface: #FFFFFF; --paper: #16213D; --paper-dim: rgba(22, 33, 61, 0.62); --paper-faint: rgba(22, 33, 61, 0.06); --line: rgba(22, 33, 61, 0.10); --signal: #2E74FB; --signal-ink: #FFFFFF; --signal-dim: rgba(46, 116, 251, 0.14); --moss: #6B7280; --ok: #22C55E; --warn: #FF4D6D; /* Dedicated price color — always red, independent of the brand accent. */ --price: #E5342E; --price-dim: rgba(229, 52, 46, 0.10); /* Secondary muted accents — used only to tell game categories/status apart (banners, badges). Kept low-saturation on purpose, never used for primary CTAs or notifications. */ --electric: #4E7FD1; --electric-dim: rgba(78, 127, 209, 0.12); --violet: #8D74C9; --violet-dim: rgba(141, 116, 201, 0.12); /* Brand blue — dipakai di wordmark loading screen & card game sebagai bagian rebranding ke identitas Zether.Id. Sama dengan --signal supaya biru konsisten jadi satu-satunya warna utama. */ --brand-blue: #2E74FB; --brand-blue-ink: #FFFFFF; --brand-blue-dim: rgba(46, 116, 251, 0.12); /* Type */ --font-display: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; --header-height: 68px; --nav-height: 64px; --shadow-sm: 0 2px 10px rgba(22, 33, 61, 0.07); --shadow-md: 0 10px 30px rgba(22, 33, 61, 0.09); --shadow-lg: 0 20px 46px rgba(22, 33, 61, 0.13); } 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)); /* Latar flat, tanpa pattern grid/glow — dijaga tetap tenang di layar kecil dan menghormati prefers-reduced-motion. */ 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(46, 116, 251,0.10) 0%, transparent 55%), radial-gradient(circle at 50% 100%, rgba(78, 127, 209,0.06) 0%, transparent 70%); pointer-events: none; } #loading-screen.loader-hide { opacity: 0; transform: scale(1.04); filter: blur(6px); pointer-events: none; } /* Loading screen sekarang dipusatkan pada logo asli Zether.Id (badge "V/N" oranye) — bukan ikon generik. Badge dibungkus ring progres melingkar yang menyapu searah jarum jam, dengan logo sedikit "bernapas" (pulse) supaya terasa hidup tanpa ramai. */ @keyframes coreFadeIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .loader-badge { position: relative; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; animation: coreFadeIn 0.6s ease both; } /* Ring SVG yang menyapu mengelilingi logo, warna signature Zether.Id */ .loader-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spinCW 1.6s linear infinite; filter: drop-shadow(0 0 6px rgba(46, 116, 251, 0.35)); } .loader-badge-ring-track { fill: none; stroke: var(--paper-faint); stroke-width: 3; } .loader-badge-ring-sweep { fill: none; stroke: var(--brand-blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 255; transform-origin: 60px 60px; } @keyframes spinCW { to { transform: rotate(360deg); } } /* Logo Zether.Id (badge V/N) di tengah ring — dibuat lingkaran ASLI dari SVG (bukan kotak yang dipotong pakai clip-path), jadi tepinya benar-benar mulus menyatu dengan ring di luarnya, tanpa sisa sudut kotak. */ .loader-brand-mark { position: relative; width: 68px; height: 68px; border-radius: 50%; box-shadow: var(--shadow-md); opacity: 0; animation: brandReveal 0.85s cubic-bezier(.34,1.56,.64,1) 0.15s both, brandPulse 1.8s ease-in-out 1s infinite; } /* Logo hilang dulu (kecil, blur, berputar sedikit) lalu "pop" muncul dengan sedikit overshoot supaya terasa hidup, bukan sekadar fade. */ @keyframes brandReveal { 0% { opacity: 0; transform: scale(0.25) rotate(-30deg); filter: blur(9px); } 55% { opacity: 1; transform: scale(1.18) rotate(5deg); filter: blur(0); } 75% { transform: scale(0.94) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } @keyframes brandPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* Kilatan cahaya (shockwave) yang meledak sesaat logo muncul */ .loader-badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(46, 116, 251, 0.55) 0%, transparent 70%); opacity: 0; pointer-events: none; animation: badgeFlash 0.85s ease-out 0.15s both; } @keyframes badgeFlash { 0% { opacity: 0; transform: scale(0.3); } 35% { opacity: 0.9; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.9); } } .loader-brand-v { animation: strokeGlow 1.8s ease-in-out 1s infinite; } .loader-brand-n1 { animation: strokeGlow 1.8s ease-in-out 1.12s infinite; } .loader-brand-n2 { animation: strokeGlow 1.8s ease-in-out 1.24s infinite; } @keyframes strokeGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } } /* 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(--brand-blue); } @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(255, 255, 255, 0.88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px rgba(22, 33, 61, 0.06); 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; flex-shrink: 0; } /* ✅ BARU: tombol hamburger (☰) buka drawer menu, posisi di header atas sebelah logo -- gaya UniPin. */ .hamburger-btn { background: var(--bg-raised); border: 1.5px solid var(--line); color: var(--paper); font-size: 1.05rem; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; flex-shrink: 0; transition: background 0.18s ease, border-color 0.18s ease; } .hamburger-btn:hover { background: var(--signal-dim); border-color: var(--signal); } /* ✅ 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); /* ✅ FIX (visual): box-shadow dipindah ke .side-drawer.open saja. Kalau // ditaruh di sini (state tertutup), shadow-nya tetap ikut ter-render di // sisi kanan drawer walau drawer sudah digeser keluar layar lewat // translateX(-100%) — hasilnya bocor jadi strip gelap blur di tepi kiri // layar meskipun drawer kelihatan "tertutup". */ box-shadow: none; z-index: 2001; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease; overflow-y: auto; } .side-drawer.open { transform: translateX(0); box-shadow: 12px 0 32px rgba(0,0,0,0.4); } .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(--brand-blue); } /* ✅ BARU: ".id" di header — dibuat warna gelap (senada dgn "Ze"), bukan putih, karena background header di sini terang (putih/blur). Kalau suatu saat header dipakai di atas background gelap, ganti jadi putih. */ .brand-tld { color: var(--paper); } /* Side drawer background-nya gelap (var(--bg, #0B0E17)), jadi ".id" di situ dibuat putih supaya kebaca -- bukan ikut warna gelap kayak di header. */ .side-drawer .brand-tld { color: #FFFFFF; } .brand-mark { flex-shrink: 0; border-radius: 22%; } .header-actions { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; justify-content: flex-end; } /* --- 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: block; } .account-section-divider { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--paper-dim); } .account-section-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .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: var(--price); 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 PROMO BANNER --- */ .login-promo-banner { display: flex; align-items: center; gap: 10px; background: var(--signal-dim); border: 1px solid var(--signal); border-radius: 6px; padding: 10px 12px; margin: 12px 0 0; font-family: var(--font-body); font-size: 0.8rem; color: var(--paper); text-align: left; } .login-promo-banner i { color: var(--signal); font-size: 1rem; flex-shrink: 0; } .login-promo-banner strong { color: var(--signal); } /* --- 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 --- ✅ ROMBAK: dulu box-nya kecil banget (110px, baru lebar pas fokus) -- karena tombol login di header sudah lama dipindah ke tab "Akun" (lihat komentar di HTML soal .account-menu[hidden]), ruang di sisi kanan header sebenarnya nganggur. Sekarang search box diisi ke seluruh ruang yang ada (flex: 1 dari .header-actions), ikon pindah ke kiri gaya search bar app pada umumnya, dan ada glow halus pas difokus. */ .search-box-header { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; } .search-box-header input { width: 100%; background: var(--bg-raised); border: 1.5px solid var(--line); padding: 9px 14px 9px 34px; border-radius: 10px; color: var(--paper); font-family: var(--font-body); font-size: 0.85rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .search-box-header input:focus { outline: none; border-color: var(--signal); background: var(--surface, #fff); box-shadow: 0 0 0 3px var(--signal-dim, rgba(46, 116, 251, 0.12)); } .search-box-header i { position: absolute; left: 12px; color: var(--moss); font-size: 0.8rem; pointer-events: none; transition: color 0.2s ease; } .search-box-header:focus-within i { color: var(--signal); } #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(46, 116, 251, 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(46, 116, 251, 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(46, 116, 251, 0.22); } 50% { box-shadow: 0 0 0 10px rgba(46, 116, 251, 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); } .close-btn:active { transform: rotate(90deg) scale(0.88); } /* --- 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; } /* ✅ BARU: widget captcha Cloudflare Turnstile di form login email (lihat #login-turnstile-widget di index.html) */ .cf-turnstile { display: flex; justify-content: center; margin: 4px 0 14px; } /* ✅ 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; } /* --- LOGIN & DAFTAR (halaman penuh, page-login / page-register) --- */ /* Tombol mata (👁) di dalam field password untuk toggle tampil/sembunyi. */ .input-icon-wrap.has-toggle input { padding-right: 40px; } .input-toggle-visibility { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--moss); font-size: 0.85rem; cursor: pointer; border-radius: 4px; transition: color 0.2s ease; } .input-toggle-visibility:hover { color: var(--signal); } /* Baris "Lupa password?" rata kanan di bawah field password login. */ .auth-extra-row { display: flex; justify-content: flex-end; margin: -8px 0 16px; } .link-btn { background: none; border: none; padding: 0; color: var(--signal); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .link-btn:hover { text-decoration: underline; } .link-btn:disabled { opacity: 0.6; cursor: not-allowed; text-decoration: none; } /* Pemisah "atau" antara form email/password dan tombol Google. */ .auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--moss); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Baris "Belum ada akun? Daftar" / "Sudah punya akun? Masuk" di bawah kartu. */ .auth-switch { text-align: center; margin-top: 16px; font-size: 0.82rem; color: var(--paper-dim); } .auth-switch a { color: var(--signal); font-weight: 600; text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } /* --- 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; } /* --- RATING POPUP --- */ /* ✅ FITUR BARU: popup rating (⭐ + ulasan opsional) yang muncul otomatis begitu pesanan berhasil dikirim ke admin -- lihat openRatingModal() di script.js & netlify/functions/submit-rating.js. Pola markup/CSS-nya sengaja disamakan dengan modal lain (.modal-overlay + .modal-content) di atas supaya konsisten. */ .rating-stars { display: flex; justify-content: center; gap: 8px; margin: 18px 0 6px; } .rating-star { background: none; border: none; padding: 4px; font-size: 2rem; line-height: 1; color: var(--paper-faint); cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; } .rating-star:hover, .rating-star.hovered { transform: scale(1.12); } .rating-star.filled, .rating-star.hovered { color: var(--signal); } .rating-review-input { width: 100%; min-height: 76px; resize: vertical; margin: 10px 0 18px; padding: 12px 14px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; color: var(--paper); font-family: var(--font-body, inherit); font-size: 0.88rem; box-sizing: border-box; } .rating-review-input:focus { outline: none; border-color: var(--signal); } .rating-review-input::placeholder { color: var(--moss); } .btn-rating-solid { background: var(--signal); color: var(--signal-ink); } .btn-skip-rating { display: block; width: 100%; margin-top: 10px; background: none; border: none; padding: 10px; color: var(--paper-dim); font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: color 0.15s ease; } .btn-skip-rating:hover { color: var(--paper); text-decoration: underline; } @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(46, 116, 251, 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(46, 116, 251, 0.25); } 50% { box-shadow: 0 0 0 14px rgba(46, 116, 251, 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; } /* ✅ FITUR BARU: popup "Toko Sedang Tutup" (jam operasional otomatis). Memakai ulang .maintenance-overlay/.maintenance-box supaya tampilannya konsisten dengan popup maintenance -- cuma beda ikon, judul, dan baris info jam buka tambahan di bawah pesan. */ .store-hours-info { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.8rem !important; color: var(--signal) !important; font-weight: 600; } /* --- 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(46, 116, 251, 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(46, 116, 251, 0.16); border: 1px solid rgba(46, 116, 251, 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: 14px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .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 ilustrasi banner orisinal (digambar sendiri lewat kode/PIL, bukan diambil dari internet) — /assets/banners/*.png. Tiap file sudah membawa gradasi warna sinyal + tekstur circuit + ikon geometris besar (kado promo, balok, gem, kristal, perisai, api) sesuai tema slide masing-masing, jadi background-color di sini cuma fallback kalau gambar gagal load. */ .slide-banner-a { background: #EAF0FF url("assets/banners/banner-vionix.png") center / cover no-repeat; } .slide-banner-b { background: #E6EFFF url("assets/banners/banner-roblox.png") center / cover no-repeat; } .slide-banner-c { background: #E8F5EE url("assets/banners/banner-ml.png") center / cover no-repeat; } .slide-banner-d { background: #F1EBFF url("assets/banners/banner-genshin.png") center / cover no-repeat; } .slide-banner-e { background: #FFF0E6 url("assets/banners/banner-pubg.png") center / cover no-repeat; } .slide-banner-f { background: #FFEBE8 url("assets/banners/banner-ff.png") center / cover no-repeat; } /* Overlay gelap tipis di bawah supaya badge & judul tetap kontras di atas ilustrasi, menggantikan tekstur ::before/::after lama (sudah dibakar langsung ke dalam gambar PNG). */ .slide-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255,255,255,0.72) 0%, transparent 58%); 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 1px 8px rgba(255,255,255,0.6); } .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(242, 242, 240,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); } .back-btn:active { transform: scale(0.9); } /* --- 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(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); transition: all 0.2s ease; } .game-card:hover { border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(46, 116, 251, 0.18); } .game-card:active { transform: scale(0.96); transition: transform 0.1s ease; } .game-img-wrapper { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--surface); padding: 10px; } /* Ubin ikon orisinal pengganti artwork game — 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. Satu treatment flat memakai warna brand (oranye) untuk semua ubin; genre tetap kebeda lewat glyph ikon & label nama game di bawahnya, bukan lewat warna atau efek glow. */ .game-icon-tile { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; background: var(--brand-blue-dim); border-radius: 10px; transition: transform 0.35s, background 0.35s; } .game-icon-tile i { position: relative; z-index: 1; font-size: 2.35rem; color: var(--brand-blue); } .game-card:hover .game-icon-tile { transform: scale(1.06); background: var(--brand-blue); } .game-card:hover .game-icon-tile i { color: #fff; } .game-info { padding: 9px 6px 11px; text-align: center; } .game-info h3 { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: -0.1px; color: var(--paper); } .badge-populer { position: absolute; top: 6px; right: 6px; background: var(--brand-blue); /* ✅ FIX KONTRAS: putih di atas biru di badge kecil (0.58rem) makin parah gagalnya karena ukuran teks makin kecil. brand-blue-ink tembus AA. */ color: var(--brand-blue-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(46, 116, 251, 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(--brand-blue-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(--brand-blue); 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(--price); font-weight: 700; margin-top: 5px; } .package-item:hover, .package-item.selected { border-color: var(--signal); background: var(--signal-dim); } .package-item:active { transform: scale(0.96); transition: transform 0.1s ease; } /* --- 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(--brand-blue-dim); border: 1px solid var(--brand-blue); color: var(--brand-blue); 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(--price); } /* --- 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); } /* Teks sukses hijau di bawah input User ID — muncul saat username game berhasil diverifikasi lewat cek-username.js (nickname asli ditampilkan supaya pembeli bisa konfirmasi sendiri sebelum lanjut bayar). */ .field-success { display: block; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); margin-top: 0; color: var(--ok); 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-success.show { max-height: 40px; opacity: 1; transform: translateY(0); margin-top: 7px; } .form-group.is-verifying .input-icon-wrap input { border-color: var(--moss); } /* ✅ Varian untuk status "belum terverifikasi otomatis" (apigames/sistem gagal cek, tapi customer tetap diizinkan lanjut ke pembayaran -- lihat setUsernameUnverified() di script.js). Sengaja pakai warna beda (kuning peringatan) dari .field-success (hijau) supaya tidak keliru dikira "sudah pasti valid" -- ini cuma "belum tahu, akan dicek manual admin". */ .field-success.unverified-warning { color: var(--signal); } /* 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(46, 116, 251, 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(46, 116, 251, 0.4); background: rgba(46, 116, 251, 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(78, 127, 209, 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(46, 116, 251, 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); } /* ✅ Nickname hasil cek-username, ditampilkan di page-payment (bukan lagi di page-id). Sengaja pakai warna redup/desaturated, BUKAN hijau terang atau neon glow -- cuma info konfirmasi ringan, bukan elemen yang harus mencolok. */ .summary-item.summary-username .label { color: var(--moss); } .summary-item.summary-username .value { color: #8FA98C; font-weight: 600; } .summary-item.summary-username .label i { color: #8FA98C; } .text-price { color: var(--price); } .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(--brand-blue-dim); border: 1px solid var(--brand-blue); color: var(--brand-blue); 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; /* ✅ RAPIKAN VISUAL (v2): sebelumnya row (judul kiri, harga+badge+refund numpuk di kolom kanan sempit) -- itu yang bikin kartu kelihatan gede & sesak. Sekarang jadi column: judul di atas, lalu SATU baris penuh di bawahnya buat harga+badge+refund, jadi lega dan gak numpuk. */ display: flex; flex-direction: column; gap: 8px; /* ✅ FITUR BARU: kartu riwayat sekarang bisa dipencet (buka detail) */ cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .history-card:hover, .history-card:focus-visible { border-color: var(--signal); transform: translateY(-1px); outline: none; } .history-details { min-width: 0; } .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; } /* ✅ RAPIKAN VISUAL (v2): .history-meta sekarang jadi baris penuh di bawah judul -- harga & badge sejajar horizontal, catatan refund (kalau ada) wrap ke barisnya sendiri di bawah keduanya lewat flex-basis:100%, bukan numpuk vertikal di kolom sempit kanan seperti sebelumnya. */ .history-meta { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; text-align: left; } .history-price { font-weight: 700; color: var(--price); font-family: var(--font-body); white-space: nowrap; } .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; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } /* ✅ 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(78, 127, 209, 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(46, 116, 251, 0.35); } .history-status-tag.dibatalkan { color: var(--warn); border-color: rgba(255, 77, 109, 0.35); } /* ✅ FITUR BARU: catatan batas waktu pengajuan refund (5 jam sejak SELESAI) */ .history-refund-note { /* flex-basis:100% di dalam .history-meta (flex row) maksa elemen ini pindah ke barisnya sendiri di bawah harga+badge, bukan ikut sejajar memanjangin baris pertama. */ flex-basis: 100%; font-size: 0.72rem; color: var(--paper-dim); text-align: left; line-height: 1.35; } .history-refund-note.expired { color: var(--warn); } /* ✅ FITUR BARU: banner "pesanan tertunda" di page-payment saat dibuka ulang dari Riwayat -- lihat reopenPendingPayment() di script.js. */ .reopened-order-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--signal-dim); border: 1px solid var(--signal); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; font-family: var(--font-body); color: var(--paper); } .reopened-order-banner i { color: var(--signal); margin-top: 2px; flex-shrink: 0; } .reopened-order-banner p { font-size: 0.82rem; line-height: 1.4; margin: 0; } .reopened-order-banner .reopened-order-sub { color: var(--paper-dim); font-size: 0.76rem; margin-top: 4px; } /* ✅ FITUR BARU: halaman khusus QRIS (page-qris) -- lihat showQrisPaymentPage() di script.js. */ .qris-page-status { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .qris-page-status i { color: var(--ok); font-size: 1.5rem; margin-top: 2px; flex-shrink: 0; } .qris-page-status-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--paper); margin: 0; } .qris-page-status-sub { font-family: var(--font-body); font-size: 0.8rem; color: var(--paper-dim); margin: 3px 0 0; } .qris-page-countdown { display: flex; align-items: center; gap: 8px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 14px 0 4px; font-family: var(--font-body); font-size: 0.78rem; color: var(--paper-dim); line-height: 1.4; } .qris-page-countdown i { color: var(--warn); flex-shrink: 0; } .qris-page-countdown strong { color: var(--paper); font-family: var(--font-display); } /* ✅ Warna berubah ke merah/peringatan begitu sisa waktu di bawah 5 menit -- class "urgent" ditoggle dari updateQrisCountdown() di script.js. */ .qris-page-countdown.urgent { border-color: var(--warn); background: rgba(255, 77, 109, 0.08); } .qris-page-countdown.urgent strong { color: var(--warn); } .btn-qris-back-home { background: var(--bg-raised) !important; color: var(--paper) !important; border: 1px solid var(--line) !important; margin-top: 8px; } .btn-qris-back-home:hover { background: var(--line) !important; } /* ✅ FITUR BARU: tombol "Lanjutkan Pembayaran" di tiap kartu Riwayat -- lihat buildHistoryContinueButton() di script.js. Aktif hanya kalau status pesanan masih "Menunggu Pembayaran"; disabled (abu-abu, tidak bisa dipencet) kalau sudah Selesai/Refund/Dibatalkan. */ .btn-continue-payment { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--signal-dim); color: var(--signal); border: 1px solid var(--signal); border-radius: 6px; padding: 8px 10px; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: all 0.18s ease; } .btn-continue-payment:hover { background: var(--signal); color: var(--signal-ink); } .btn-continue-payment:disabled { background: transparent; color: var(--moss); border-color: var(--line); cursor: not-allowed; opacity: 0.7; } .btn-continue-payment:disabled:hover { background: transparent; color: var(--moss); } /* ✅ FITUR BARU: modal detail riwayat -- lihat openHistoryDetail() di script.js */ .history-detail-content { text-align: left; } .history-detail-item-title { font-family: var(--font-display); font-size: 0.95rem; color: var(--paper); margin: 4px 0 14px; text-align: center; } .history-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; } .history-detail-row:last-of-type { border-bottom: none; } .hd-label { display: flex; align-items: center; gap: 7px; color: var(--paper-dim); flex-shrink: 0; } .hd-value { color: var(--paper); font-weight: 600; text-align: right; font-family: var(--font-body); } .hd-value.price { color: var(--price); } .history-detail-row .history-status-tag { margin-top: 0; } .btn-refund-request { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--signal); color: var(--signal-ink); border: none; border-radius: 8px; padding: 13px 16px; margin-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; cursor: pointer; box-shadow: var(--shadow-md); transition: all 0.2s ease; } .btn-refund-request:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-refund-request:active { transform: translateY(0); } .history-detail-refund-note { margin-top: 10px; font-size: 0.72rem; color: var(--paper-dim); text-align: center; } .history-detail-refund-note.expired { color: var(--warn); } /* --- 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; } } /* --- WIDGET CHATBOT CS --- */ /* ✅ REVISI TOTAL: sebelumnya .cs-chat-window diberi `display: flex` tanpa penjaga untuk atribut [hidden] -- akibatnya walau JS (closeChat()) sudah benar men-set win.hidden = true, CSS tetap memaksa window tampil karena rule author dengan `display` eksplisit selalu menang atas UA stylesheet `[hidden]{display:none}`. Ini akar masalah "tombol keluar tidak berfungsi & chatbot menutupi layar". Sekarang [hidden] ditegaskan lagi di sini supaya SELALU menang, dan ukuran/posisi dikunci jadi bubble kecil pojok kanan-bawah (menggantikan chat WA admin), bukan modal di tengah layar. */ .cs-chat-overlay { position: fixed; inset: 0; /* Transparan -- bukan modal gelap yang menutupi seluruh layar. Overlay ini cuma dipakai sebagai area klik-di-luar-untuk-tutup, konten di baliknya tetap kelihatan jelas, sesuai fungsi aslinya: menggantikan chat WA yang muncul sebagai bubble, bukan popup penuh layar. */ background: transparent; z-index: 2400; } .cs-chat-overlay[hidden] { display: none; } .cs-chat-window { position: fixed; right: 16px; bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom, 0px)); /* Ukuran dikunci mirip widget chat CS pada umumnya -- cukup besar untuk nyaman dibaca, tapi TIDAK menutupi sebagian besar layar. */ width: min(340px, calc(100vw - 24px)); height: min(460px, calc(100vh - 190px)); max-height: 70vh; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); z-index: 2401; display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: csChatIn 0.25s cubic-bezier(.2,.8,.2,1) both; } /* ✅ Penjaga eksplisit -- pastikan atribut hidden SELALU menang, apa pun perubahan style lain di file ini nantinya. Ini yang membuat tombol Keluar (X) & klik-di-luar benar-benar menutup widget. */ .cs-chat-window[hidden] { display: none; animation: none; } /* Animasi keluar halus (dipicu lewat class .closing dari script.js sebelum atribut hidden dipasang) -- widget "menyusut" kembali ke arah tombol bubble pojoknya, bukan hilang mendadak. */ .cs-chat-window.closing { animation: csChatOut 0.18s ease both; } @keyframes csChatIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes csChatOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.92) translateY(10px); } } @media (max-width: 480px) { .cs-chat-window { /* Tetap menggantung dari pojok kanan bawah -- TIDAK melebar penuh kiri-kanan layar seperti sebelumnya (itu yang membuatnya terasa seperti modal di tengah). */ right: 8px; left: auto; width: min(88vw, 320px); bottom: calc(var(--nav-height) + 8px + env(safe-area-inset-bottom, 0px)); height: min(60vh, 480px); max-height: 60vh; } } .cs-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-raised); flex-shrink: 0; } .cs-chat-header-info { display: flex; align-items: center; gap: 10px; } .cs-chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--signal-dim); color: var(--signal); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .cs-chat-title { font-family: var(--font-display); font-size: 0.9rem; color: var(--paper); margin: 0; } .cs-chat-subtitle { font-size: 0.68rem; color: var(--paper-dim); margin: 2px 0 0; display: flex; align-items: center; gap: 5px; } .cs-chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok, #3DDC84); display: inline-block; } .cs-chat-close { background: transparent; border: none; color: var(--paper-dim); font-size: 1rem; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; } .cs-chat-close:hover { background: var(--bg-raised); color: var(--paper); } .cs-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .cs-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .cs-msg.bot { align-self: flex-start; background: var(--bg-raised); border: 1px solid var(--line); color: var(--paper); border-bottom-left-radius: 4px; } .cs-msg.customer { align-self: flex-end; background: var(--signal); color: var(--signal-ink); border-bottom-right-radius: 4px; } .cs-msg.system { align-self: center; background: transparent; color: var(--paper-dim); font-size: 0.68rem; text-align: center; padding: 4px 10px; } .cs-msg.typing { display: flex; align-items: center; gap: 4px; padding: 11px 14px; } .cs-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--paper-dim); display: inline-block; animation: csTypingBounce 1s infinite ease-in-out; } .cs-msg.typing span:nth-child(2) { animation-delay: 0.15s; } .cs-msg.typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes csTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } .cs-chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; flex-shrink: 0; } .cs-chat-quick-btn { background: var(--bg-raised); border: 1px solid var(--line); color: var(--paper); font-family: var(--font-body); font-size: 0.68rem; padding: 6px 11px; border-radius: 14px; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; } .cs-chat-quick-btn:hover { border-color: var(--signal); background: var(--signal-dim); } .cs-chat-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-raised); flex-shrink: 0; } .cs-chat-input-row input { flex: 1; background: var(--surface); border: 1px solid var(--line); color: var(--paper); font-family: var(--font-body); font-size: 0.8rem; padding: 9px 12px; border-radius: 20px; outline: none; } .cs-chat-input-row input:focus { border-color: var(--signal); } .cs-chat-input-row button { width: 36px; height: 36px; border-radius: 50%; background: var(--signal); color: var(--signal-ink); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 0.85rem; } .cs-chat-input-row button:disabled { opacity: 0.5; cursor: not-allowed; } /* ✅ FITUR BARU: tombol lampiran foto/video + bubble pratinjaunya */ .cs-chat-attach-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--paper-dim); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 0.85rem; transition: all 0.15s ease; } .cs-chat-attach-btn:hover:not(:disabled) { color: var(--signal); border-color: var(--signal); } .cs-chat-attach-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cs-msg-media { padding: 8px; max-width: 72%; } .cs-msg-media img, .cs-msg-media video { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; } .cs-msg-media-caption { margin-top: 6px; font-size: 0.78rem; line-height: 1.4; padding: 0 2px; } .cs-msg-media-status { display: block; margin-top: 4px; font-size: 0.65rem; opacity: 0.8; text-align: right; padding: 0 2px; } /* --- 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(255, 255, 255, 0.88); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(22, 33, 61, 0.07); 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); } /* ✅ BARU: PP (foto profil Google) di tombol "Akun" bottom-nav, gantiin ikon fa-user generik begitu user login. Perilaku klik tombolnya sendiri tidak berubah -- ini murni ganti ikon jadi foto. */ #nav-account-avatar { display: none; position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--line); transition: width 0.25s cubic-bezier(.34,1.56,.64,1), height 0.25s cubic-bezier(.34,1.56,.64,1), border-color 0.25s ease, box-shadow 0.25s ease; } .nav-item.has-avatar #nav-account-icon { display: none; } .nav-item.has-avatar #nav-account-avatar { display: block; } .nav-item.has-avatar.active #nav-account-avatar { width: 36px; height: 36px; border-color: #2E74FB; box-shadow: 0 3px 8px rgba(46, 116, 251, 0.4); } /* 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, #6C9CFF, #2E74FB); color: #fff; box-shadow: 0 3px 8px rgba(46, 116, 251, 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) { .game-grid { gap: 8px; } }