/* ======================= styles.css — FINAL (copy–paste) ======================= • Background image langsung di (tanpa overlay/opacity/gradient) • Tombol bulan KOTAK & konsisten (3 kolom desktop, 2 kolom mobile) • Tabel rapi; header & body sejajar (colgroup + table-layout:fixed) • SEMUA isi tabel (termasuk TURN OVER) rata TENGAH • Mobile: tabel fit 100% layar (tanpa terpotong), kolom pakai persentase • Penyesuaian font & padding bertahap untuk HP kecil • Tombol CLAIM shimmer + glow ============================================================================== */ /* THEME */ :root{ --bg:#0b0f1a; --panel:#0e0e0e; --accent:#ffd000; --text:#f5f5f5; --muted:#9aa0a6; --border:#2a2a2a; } /* BASE */ *{box-sizing:border-box} /* Hapus overlay/gradient & pakai gambar langsung */ html, body { background: none !important; } body{ background: url("https://icyvps.site/assets/img/bgrnd.webp") center / cover no-repeat fixed !important; } .wrap{max-width:1100px; margin:24px auto; padding:0 16px} /* HEADER */ .header{ background:#000; border:1px solid var(--border); border-radius:20px; padding:14px 18px; display:flex; align-items:center; gap:14px; box-shadow:0 10px 30px rgba(0,0,0,.35); } .logo{height:36px; width:auto; display:block} .header .subtitle{margin-left:auto; color:var(--muted); font-weight:600} /* BANNER 16:9 */ .banner{ margin:16px 0 18px; border:1px solid var(--border); border-radius:18px; overflow:hidden; position:relative; aspect-ratio:16/9; background:#000; } .banner-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} /* MONTH BUTTONS — kotak & konsisten */ .month-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:stretch} .month-btn{ border-radius:16px; height:72px; min-height:72px; display:flex; align-items:center; justify-content:center; padding:8px 10px; text-align:center; white-space:normal; word-break:keep-all; font-weight:800; font-size:16px; line-height:1.15; letter-spacing:.2px; background:linear-gradient(180deg,#ffe269 0%, #ffcc00 100%); color:#111; border:2px solid #f7c400; box-shadow:0 6px 0 #b48900, 0 12px 22px rgba(255,208,0,.25); text-decoration:none; transition:transform .08s ease, box-shadow .08s ease; } .month-btn:hover{transform:translateY(-2px); box-shadow:0 8px 0 #b48900,0 18px 26px rgba(255,208,0,.3)} .month-btn:active{transform:translateY(2px); box-shadow:0 3px 0 #b48900,0 8px 18px rgba(255,208,0,.2)} /* PANEL */ .panel{ background:#090909; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 16px 30px rgba(0,0,0,.35); } .panel h2{margin:0 0 6px} .panel .sub{color:var(--muted); font-size:14px} /* Judul tepat di atas tabel */ .table-title, .table-title a{ color:#fff !important; text-decoration:none; font-weight:800; letter-spacing:.2px; } /* TABLE WRAPPER */ .table-wrap{ margin-top:14px; border-radius:14px; border:1px solid #1c1c1c; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* TABLE — desktop default */ table{width:100%; min-width:920px; border-collapse:collapse; background:#0b0b0b} table.klasemen{table-layout:fixed} /* header & body sejajar */ /* Kolom via (desktop) */ .klasemen col.col-juara { width: 90px; } .klasemen col.col-hadiah { width: auto; } .klasemen col.col-user { width: 220px; } .klasemen col.col-turnover { width: 200px; } .klasemen col.col-claim { width: 150px; } th,td{ padding:12px 10px; border-bottom:1px solid #1c1c1c; white-space:nowrap; vertical-align:middle; text-align:center; /* ⬅ semua center */ } th{ background:linear-gradient(180deg,#ffe269,#ffcc00); color:#111; text-transform:uppercase; font-size:13px; letter-spacing:.6px; position:sticky; top:0; z-index:1; } td{color:#eee} tr:nth-child(even) td{background:#0f0f0f} tr:hover td{background:#141414} /* TURN OVER center: tetap rapi (digit seragam) */ .klasemen th:nth-child(4), .klasemen td:nth-child(4){ text-align: center !important; padding-left: 0; padding-right: 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* CLAIM */ .claim-col{text-align:center; white-space:nowrap} .btn-claim{ position:relative; display:inline-block; padding:10px 16px; min-width:110px; text-align:center; font-weight:900; letter-spacing:.3px; color:#111; text-decoration:none; background:linear-gradient(180deg,#fff7bf 0,#ffd000 60%,#ffcb00 100%); border:2px solid #f7c400; border-radius:999px; overflow:hidden; isolation:isolate; box-shadow:0 0 18px rgba(255,214,0,.35), 0 6px 0 #b48900, inset 0 -8px 14px rgba(180,120,0,.25); transition:transform .08s ease, box-shadow .08s ease, filter .08s ease; } .btn-claim::before{ content:""; position:absolute; inset:-40% -140% auto auto; width:60%; height:200%; background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,0) 90%); transform:rotate(20deg); animation:shine 2.2s linear infinite; mix-blend-mode:screen; pointer-events:none; } .btn-claim::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 22px 6px rgba(255,240,150,.35), 0 0 60px 10px rgba(255,230,80,.15); animation:glow 2.8s ease-in-out infinite; pointer-events:none; } .btn-claim:hover{transform:translateY(-1px); box-shadow:0 0 22px rgba(255,238,0,.6), 0 8px 0 #b48900, inset 0 -8px 14px rgba(180,120,0,.3); filter:saturate(1.05)} .btn-claim:active{transform:translateY(1px)} @keyframes shine{0%{transform:translateX(-120%) rotate(20deg);opacity:.65}100%{transform:translateX(280%) rotate(20deg);opacity:.65}} @keyframes glow{0%,100%{opacity:.65}50%{opacity:1}} /* RESPONSIVE (umum) */ @media (max-width:960px){ .banner{aspect-ratio:16/9} } @media (max-width:760px){ .month-nav{ grid-template-columns:repeat(2,1fr); } .month-btn{ height:68px; min-height:68px; font-size:15px; } .header{flex-direction:row; gap:10px} .header .subtitle{margin-left:auto} } @media (max-width:390px){ .month-btn{ height:64px; min-height:64px; font-size:14px; padding:6px 8px } } /* ===== MOBILE FIT (≤640px): tabel 100% layar, kolom pakai % ===== */ @media (max-width:640px){ .wrap{padding:0 10px} .panel{padding:12px} .table-wrap{overflow:visible} table{min-width:initial; width:100%} table.klasemen{table-layout:fixed} /* Total 100% → semua kolom utuh (tetap center) */ .klasemen col.col-juara { width:10%; } .klasemen col.col-hadiah { width:24%; } .klasemen col.col-user { width:26%; } .klasemen col.col-turnover { width:28%; } .klasemen col.col-claim { width:12%; } /* Tipografi & spacing fluid */ th,td{ padding: clamp(6px, 1.8vw, 9px) clamp(4px, 1.2vw, 8px); font-size: clamp(11px, 3.6vw, 13px); line-height:1.25; } th{ font-size: clamp(10px, 3.2vw, 12px); letter-spacing:.2px } /* Potong rapi teks panjang */ .klasemen td:nth-child(2), .klasemen td:nth-child(3){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Tombol Claim adaptif */ .btn-claim{ padding: clamp(5px, 1.1vw, 7px) clamp(8px, 2vw, 12px); font-size: clamp(10px, 3vw, 12px); min-width:unset; width:100%; } } /* ===== MICRO TUNING untuk HP kecil ===== */ /* ≤ 420px */ @media (max-width:420px){ .klasemen col.col-juara { width: 9%; } .klasemen col.col-hadiah { width: 23%; } .klasemen col.col-user { width: 25%; } .klasemen col.col-turnover { width: 33%; } .klasemen col.col-claim { width: 10%; } th, td { font-size: 11px; padding: 6px 4px; line-height:1.25; } th { font-size: 10.5px; letter-spacing:.15px; } .btn-claim{ font-size: 10.5px; padding: 5px 8px; min-width:unset; width:100%; } } /* ≤ 360px */ @media (max-width:360px){ .klasemen col.col-juara { width: 8%; } .klasemen col.col-hadiah { width: 22%; } .klasemen col.col-user { width: 25%; } .klasemen col.col-turnover { width: 35%; } .klasemen col.col-claim { width: 10%; } th, td { font-size: 10px; padding: 5px 3px; } th { font-size: 9.5px; } .btn-claim{ font-size: 10px; padding: 4px 6px; border-width:2px; } } /* ≤ 330px */ @media (max-width:330px){ .klasemen col.col-hadiah { width: 21%; } .klasemen col.col-user { width: 24%; } .klasemen col.col-turnover { width: 37%; } th, td { font-size: 9.5px; } .btn-claim{ font-size: 9.5px; padding: 4px 6px; } } /* FOOTER */ .footer{margin:26px 0 40px; color:var(--muted); text-align:center; font-size:13px}