/* =================================================================== LiveJepang · gaya bersama Dipakai index.html (jadwal) dan hasil.html (hasil). Warna aksen dipilih lewat class di : .p-jadwal / .p-hasil =================================================================== */ :root{ --night:#080B10; --slab:#121822; --slab2:#0D131B; --edge:rgba(255,255,255,.07); --edge2:rgba(255,255,255,.13); --chalk:#EDF2F8; --fog:#8492A6; --fog2:#7A8798; --flood:#FFC24B; --flood2:#FF7A45; --turf:#22D07A; --flare:#FF4757; --r:14px; --aksen:var(--flood); } body.p-hasil{--aksen:var(--turf);} *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;} body{background:var(--night);color:var(--chalk);font-family:'Manrope',system-ui,sans-serif; min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;} body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 120% 60% at 50% -10%,rgba(255,194,75,.10),transparent 60%), radial-gradient(ellipse 90% 50% at 50% 110%,rgba(34,208,122,.06),transparent 60%);} body.p-hasil::before{ background: radial-gradient(ellipse 120% 60% at 50% -10%,rgba(34,208,122,.09),transparent 60%), radial-gradient(ellipse 90% 50% at 50% 110%,rgba(255,194,75,.05),transparent 60%);} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.014) 3px 4px);} .wrap{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:0 16px 90px;} .disp{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118,'wght' 800; text-transform:uppercase;letter-spacing:-.01em;line-height:.95;} /* ---------- LATAR ---------- */ .bg-foto{position:fixed;inset:0;z-index:0;pointer-events:none; background:url('bg.jpg') center top/cover no-repeat; opacity:.30;filter:blur(2px) saturate(.9);} .bg-tirai{position:fixed;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg, rgba(8,11,16,.55) 0%, rgba(8,11,16,.80) 30%, rgba(8,11,16,.94) 58%, #080B10 78%);} @media (max-width:620px){.bg-foto{opacity:.24;}} /* ---------- HEADER ---------- */ header{position:sticky;top:0;z-index:60;background:rgba(8,11,16,.82); backdrop-filter:blur(18px);border-bottom:1px solid var(--edge);} .hd{display:flex;align-items:center;gap:10px;max-width:620px;margin:0 auto;padding:12px 16px;} .brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit;} .brand .mark{width:34px;height:34px;flex-shrink:0;display:block;} .brand .bw{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112,'wght' 800; font-size:1.22rem;letter-spacing:-.025em;white-space:nowrap;line-height:1;} .brand .bw i{font-style:normal;color:var(--flare);} .chip{flex-shrink:0;font-size:.55rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--fog2);border:1px solid var(--edge2);border-radius:6px;padding:4px 8px;} .bet{flex-shrink:0;text-decoration:none;display:inline-flex;align-items:center;gap:5px; padding:9px 14px;border-radius:10px; background:linear-gradient(135deg,var(--turf),#12A15C);color:#03150C; font-weight:800;font-size:.78rem;letter-spacing:.04em; box-shadow:0 0 0 1px rgba(34,208,122,.4),0 6px 20px rgba(34,208,122,.22);transition:.18s;} .bet:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(34,208,122,.7),0 10px 26px rgba(34,208,122,.35);} @media (max-width:380px){.brand .bw{font-size:1.05rem}.brand .mark{width:30px;height:30px}.chip{display:none}} /* ---------- HERO ---------- */ .hero{padding:30px 0 18px;border-bottom:1px solid var(--edge);} .hero h1{font-size:clamp(2rem,9vw,3.1rem);} .hero h1 em{font-style:normal;display:block;color:var(--aksen);} .hero p{margin-top:10px;font-size:.84rem;color:var(--fog);max-width:36ch;line-height:1.5;} .pulse{display:inline-flex;align-items:center;gap:7px;margin-top:14px; padding:5px 12px 5px 10px;border-radius:99px; border:1px solid rgba(255,71,87,.35);background:rgba(255,71,87,.1);color:#FF8A94; font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;} .pulse .d{width:7px;height:7px;border-radius:50%;background:var(--flare);animation:ping 1.3s ease-out infinite;} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,71,87,.6)}70%{box-shadow:0 0 0 8px rgba(255,71,87,0)}100%{box-shadow:0 0 0 0 rgba(255,71,87,0)}} .pulse.off{border-color:var(--edge2);background:rgba(255,255,255,.03);color:var(--fog);} .pulse.off .d{background:var(--fog2);animation:none;} /* ---------- SWITCH JADWAL / HASIL ---------- */ .swi{display:flex;gap:4px;margin:20px 0 0;padding:4px; border:1px solid var(--edge);border-radius:12px;background:var(--slab2);} .swi a{flex:1;text-align:center;text-decoration:none;padding:10px 6px;border-radius:9px; color:var(--fog);font-size:.8rem;font-weight:700;transition:.18s;} .swi a:hover{color:var(--chalk);} .swi a.on{background:var(--chalk);color:#080B10;} /* ---------- PILIH CABANG ---------- */ .cab{display:flex;gap:6px;margin:14px 0 0;} .cab button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:11px 8px;border-radius:11px;cursor:pointer;font-family:inherit; border:1px solid var(--edge2);background:var(--slab2);color:var(--fog); font-size:.82rem;font-weight:700;transition:.16s;} .cab button:hover{color:var(--chalk);border-color:var(--fog);} .cab button.on{border-color:var(--aksen);color:var(--aksen);background:rgba(255,255,255,.04);} .cab button .ic{font-size:1rem;} /* ---------- RAIL LIGA ---------- */ .rail-k{display:flex;align-items:center;gap:10px;margin:22px 0 10px;} .rail-k span{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase; color:var(--fog2);font-weight:800;white-space:nowrap;} .rail-k i{flex:1;height:1px;background:var(--edge);} .rail{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px; scrollbar-width:none;-webkit-overflow-scrolling:touch;} .rail::-webkit-scrollbar{display:none;} .pill{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:9px 14px; border-radius:99px;cursor:pointer;border:1px solid var(--edge2);background:var(--slab2); color:var(--fog);font-family:inherit;font-size:.78rem;font-weight:700; white-space:nowrap;transition:.16s;} .pill:hover{border-color:var(--fog);color:var(--chalk);} .pill.on{background:var(--chalk);border-color:var(--chalk);color:#080B10;} .pill .fl{font-size:.9rem;} /* ---------- PEMISAH TANGGAL ---------- */ .day{position:sticky;top:61px;z-index:20;display:flex;align-items:center;gap:12px; margin:26px 0 12px;padding:8px 0; background:linear-gradient(180deg,var(--night) 70%,transparent);} .day .n{font-family:'DM Mono',monospace;font-size:1.6rem;color:var(--aksen);line-height:1;} .day .t{flex:1;min-width:0;} .day .t b{display:block;font-size:.82rem;font-weight:800;} .day .t i{display:block;font-style:normal;font-size:.64rem;color:var(--fog2); letter-spacing:.14em;text-transform:uppercase;margin-top:2px;} .day .c{font-size:.62rem;color:var(--fog2);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;} /* ---------- BARIS LAGA ---------- */ .row{position:relative;display:flex;margin-bottom:10px;border:1px solid var(--edge); border-radius:var(--r);background:var(--slab);overflow:hidden;animation:up .4s ease both;} @keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--edge2);} .row.s-soon::before{background:linear-gradient(180deg,var(--flood),var(--flood2));} .row.s-done::before{background:var(--turf);} .row.s-live::before{background:var(--flare);animation:bl 1.1s ease-in-out infinite;} @keyframes bl{0%,100%{opacity:1}50%{opacity:.35}} .clock{flex-shrink:0;width:88px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:3px;padding:16px 8px; border-right:1px dashed var(--edge2);background:rgba(0,0,0,.22);} .clock .hh{font-family:'DM Mono',monospace;font-size:1.22rem;font-weight:500; color:var(--aksen);line-height:1;text-align:center;} .clock .agg{font-family:'DM Mono',monospace;font-size:1.32rem;font-weight:500; color:var(--chalk);line-height:1;letter-spacing:-.02em;} .clock .zz{font-size:.55rem;letter-spacing:.14em;color:var(--fog2);font-weight:700;text-align:center;} .row.s-live .clock .hh{color:var(--flare);font-size:.95rem;} .row.s-live .clock .agg{color:var(--flare);} .fix{flex:1;min-width:0;padding:12px 14px 13px;} .fix-top{display:flex;align-items:center;gap:7px;margin-bottom:10px;} .fix-top .fl{font-size:.8rem;flex-shrink:0;} /* Logo liga dialasi keping putih supaya logo berwarna gelap tetap kebaca di atas latar hitam. Bendera emoji tidak memakai keping ini. */ .fl.kep{display:inline-grid;place-items:center;width:20px;height:20px;flex-shrink:0; border-radius:5px;background:rgba(255,255,255,.92);} .fl.kep img{width:15px;height:15px;object-fit:contain;display:block;} .pill .fl.kep{width:22px;height:22px;margin-left:-4px;} .pill .fl.kep img{width:16px;height:16px;} .pill.on .fl.kep{background:rgba(0,0,0,.06);} .fix-top .lg{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fog); font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tag{margin-left:auto;flex-shrink:0;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase; font-weight:800;padding:3px 8px;border-radius:5px;border:1px solid var(--edge2);color:var(--fog2);} .tag.soon{border-color:rgba(255,194,75,.4);color:var(--flood);background:rgba(255,194,75,.08);} .tag.done{border-color:rgba(34,208,122,.35);color:var(--turf);background:rgba(34,208,122,.08);} .tag.live{border-color:rgba(255,71,87,.45);color:#FF8A94;background:rgba(255,71,87,.1); animation:bl 1.1s ease-in-out infinite;} .bo{flex-shrink:0;font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.06em; color:var(--fog2);border:1px solid var(--edge2);border-radius:4px;padding:2px 5px;} .tm{display:flex;align-items:center;gap:9px;} .tm img{width:22px;height:22px;object-fit:contain;flex-shrink:0;border-radius:5px;} .tm .nm{flex:1;min-width:0;font-size:.9rem;font-weight:700;line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tm .pc{flex-shrink:0;font-family:'DM Mono',monospace;font-size:.82rem;font-weight:500;color:var(--fog);} .tm.fav .pc{color:var(--flood);} .tm.fav .nm{color:#fff;} .tm.duo{padding:6px 0;} .tm.duo+.tm.duo{border-top:1px solid var(--edge);} .tm .sc{flex-shrink:0;font-family:'DM Mono',monospace;font-size:1.1rem;font-weight:500; color:var(--fog);min-width:18px;text-align:right;} .tm .ck{flex-shrink:0;font-size:.7rem;color:var(--turf);width:10px;} .tm.lead .nm,.tm.win .nm{color:#fff;} .tm.lead .sc{color:var(--flare);} .tm.win .sc{color:var(--turf);} .tm.lose{opacity:.48;} .mtr{height:4px;border-radius:99px;background:rgba(255,255,255,.05);margin:6px 0 9px;overflow:hidden;} .mtr i{display:block;height:100%;border-radius:99px;background:rgba(255,255,255,.18); animation:grow .7s cubic-bezier(.2,.8,.2,1) both;} .mtr.fav i{background:linear-gradient(90deg,var(--flood),var(--flood2)); box-shadow:0 0 12px rgba(255,194,75,.4);} @keyframes grow{from{width:0}} .pred{display:flex;align-items:center;gap:6px;margin-top:2px;padding-top:9px; border-top:1px solid var(--edge);font-size:.6rem;color:var(--fog2);} /* ---------- STATUS ---------- */ .msg{text-align:center;padding:46px 16px;color:var(--fog);} .msg .big{font-size:2rem;margin-bottom:12px;opacity:.5;} .msg p{font-size:.86rem;line-height:1.6;max-width:34ch;margin:0 auto;} .msg button{margin-top:16px;padding:10px 20px;border-radius:10px;cursor:pointer; font-family:inherit;font-weight:800;font-size:.76rem;letter-spacing:.06em; border:1px solid var(--edge2);background:transparent;color:var(--chalk);transition:.18s;} .msg button:hover{border-color:var(--aksen);color:var(--aksen);} .sk{height:88px;border-radius:var(--r);border:1px solid var(--edge);margin-bottom:10px; background:linear-gradient(100deg,var(--slab) 30%,rgba(255,255,255,.045) 50%,var(--slab) 70%); background-size:250% 100%;animation:sh 1.3s linear infinite;} @keyframes sh{from{background-position:180% 0}to{background-position:-80% 0}} /* ---------- AKSESIBILITAS ---------- */ :where(a,button):focus-visible{outline:2px solid var(--aksen);outline-offset:2px;border-radius:8px;} @media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}