/* ========================================================= UI POLISH & MOBILE RESPONSIVE PATCH Aman ditambahkan di akhir . Tidak mengubah logic PHP. ========================================================= */ :root { --b4d-polish-primary: var(--b4d-setting-color, #009bff); --b4d-polish-primary-2: var(--b4d-setting-color-2, #0077cc); --b4d-polish-bg: var(--b4d-setting-bg, #06081a); --b4d-polish-line: rgba(0, 155, 255, 0.16); --b4d-polish-text: #eef0ff; --b4d-polish-muted: #a8abdd; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-x: hidden; } img, iframe, video, canvas, svg { max-width: 100%; } button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; } input, select, textarea, button { font: inherit; } input, select, textarea { color-scheme: dark; } .table-container, .table-box, .table-scroll, .schema-table-wrap, .all-table-wrap { -webkit-overflow-scrolling: touch; } .table-container::-webkit-scrollbar, .table-box::-webkit-scrollbar, .table-scroll::-webkit-scrollbar, .schema-table-wrap::-webkit-scrollbar, .all-table-wrap::-webkit-scrollbar { height: 8px; } .table-container::-webkit-scrollbar-thumb, .table-box::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb, .schema-table-wrap::-webkit-scrollbar-thumb, .all-table-wrap::-webkit-scrollbar-thumb { background: rgba(0, 155, 255, 0.35); border-radius: 999px; } .b4d-mobile-safe-card { overflow: hidden; } @media (max-width: 768px) { body { min-width: 0 !important; } .container, .content, .pay-wrap, .schema-page, .b4d-artikel-box, .detail-page, .result-page, .jadwal-page, .leaderboard-page { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; } .grid, .stats-box, .summary-grid, .quick-grid, .b4d-card-grid, .pasaran-grid { grid-template-columns: 1fr !important; } .filter, .filter-box form, .filter-bar, form .filter-row, .setting-grid, .form-grid { grid-template-columns: 1fr !important; width: 100% !important; } .filter input, .filter select, .filter button, .filter a, .filter-box input, .filter-box select, .filter-box button, .filter-box a, .btn, .nav-btn, .action-btn, .submit-btn, .join-btn, .close-btn { min-height: 46px; } .row { gap: 12px !important; } .card, .market-block, .section-card, .summary-card, .stat-card, .page-head, .filter-box, .table-box, .popup-box { border-radius: 18px !important; } .bottom, .action-buttons, .mobile-actions, .schema-actions, .b4d-footer-links { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .bottom .btn, .action-buttons .btn, .mobile-actions .btn, .schema-actions a, .b4d-footer-links a { width: 100% !important; justify-content: center !important; text-align: center !important; } .popup { padding: 12px !important; } .popup-box { width: min(100%, 440px) !important; max-height: calc(100vh - 28px) !important; overflow: auto !important; padding: 18px !important; } .angka-box { gap: 10px !important; flex-wrap: wrap !important; } .angka-box span { width: clamp(62px, 26vw, 82px) !important; height: clamp(62px, 26vw, 82px) !important; font-size: clamp(23px, 8vw, 32px) !important; } table { white-space: nowrap; } th, td { padding: 11px 10px !important; font-size: 13px !important; } } @media (max-width: 520px) { .title h1, .dashboard-title h2, .page-head h2, .schema-hero h1, .b4d-artikel h2 { font-size: 24px !important; line-height: 1.2 !important; } .title p, .section-head p, .page-head p, .popup-info { font-size: 14px !important; line-height: 1.55 !important; } .date, .hadiah, .result, .value, .active { word-break: break-word; } .row { flex-direction: column !important; align-items: stretch !important; } .row > div, .row > div[style*="text-align:right"] { text-align: left !important; } } /* Small brand text helper used by synced headers */ .b4d-logo-text { display: inline-flex; flex-direction: column; line-height: 1.05; min-width: 0; } .b4d-logo-text strong { font-size: 1em; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #009bff; } .b4d-logo-text small { margin-top: 3px; font-size: 0.68em; font-weight: 800; opacity: 0.82; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6b6d9e; } @media (max-width: 480px) { .b4d-logo-text strong { font-size: 0.95em; } .b4d-logo-text small { font-size: 0.62em; } }