/* ========================================================= BAMBU4D UI POLISH & MOBILE RESPONSIVE PATCH Aman ditambahkan di akhir . Tidak mengubah logic PHP. ========================================================= */ :root{ --b4d-polish-green:var(--b4d-setting-color,#39ff88); --b4d-polish-green-2:var(--b4d-setting-color-2,#00b84f); --b4d-polish-bg:var(--b4d-setting-bg,#020804); --b4d-polish-line:rgba(57,255,136,.16); --b4d-polish-text:#ecfff3; --b4d-polish-muted:#b8d8c0; } 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(57,255,136,.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; } .b4d-logo-text small{ margin-top:3px; font-size:.68em; font-weight:800; opacity:.82; letter-spacing:.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media(max-width:480px){ .b4d-logo-text strong{font-size:.95em;} .b4d-logo-text small{font-size:.62em;} }