:root{
  --black:#0b0b0c; --coal:#17171a; --red:#d71920; --red-text:#c8102e;
  --white:#fff; --grey:#f1f1f2; --line:#d9d9dc; --muted:#5b5b63; --danger:#b3261e;
  --head:'Barlow Condensed',Impact,sans-serif; --body:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--black);font:17px/1.6 var(--body)}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.05;margin:0 0 .5em}
h1{font-size:2.4rem} h2{font-size:2.2rem;font-style:italic;text-transform:uppercase;margin-top:1.2em}
h3{font-size:1.4rem}
a{color:var(--red-text)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
[hidden]{display:none!important}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between;padding:.7rem clamp(1rem,4vw,3rem);background:var(--black);color:#fff;border-bottom:3px solid var(--red)}
.brand{display:flex;align-items:center;gap:.6rem;font:800 1.5rem var(--head);font-style:italic;text-transform:uppercase;color:#fff;text-decoration:none}
.mark{width:1.2rem;height:1.2rem;background:var(--red);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.top nav{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}
.top nav a{color:#e9e9ec;text-decoration:none;font-weight:500}
.top nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px}

/* tombol miring ala esports */
.btn{display:inline-block;background:var(--red);color:#fff;font:600 1rem var(--body);border:0;padding:.6rem 1.3rem;cursor:pointer;text-decoration:none;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.btn:hover{background:#ef2830}
.btn.small{padding:.3rem 1.1rem;font-size:.95rem}
.btn.big{padding:.85rem 2.2rem;font-size:1.1rem}
.btn.ghost{background:var(--black);color:#fff}
.btn.ghost-light{background:#fff;color:var(--black)}
.btn.ghost-light:hover{background:var(--grey)}
.top .btn{color:#fff}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--black);color:#fff;padding:clamp(4rem,12vw,9rem) clamp(1rem,4vw,3rem)}
.hero::before{content:"";position:absolute;top:0;right:-8%;width:46%;height:100%;background:var(--red);transform:skewX(-14deg)}
.hero::after{content:"";position:absolute;top:0;right:30%;width:3%;height:100%;background:#fff;transform:skewX(-14deg);opacity:.9}
.hero-in{position:relative;z-index:1;max-width:62rem;margin:0 auto}
.hero .school{margin:0 0 .6rem;color:#ffb3b6;font-weight:600}
.hero h1{font-size:clamp(3.2rem,11vw,8rem);font-style:italic;text-transform:uppercase;max-width:11ch;margin-bottom:.2em}
.hero .lead{font-size:1.3rem;max-width:30ch;margin:0 0 1.8rem}
.cta{display:flex;flex-wrap:wrap;gap:1rem}

.band{display:flex;flex-wrap:wrap;justify-content:center;background:var(--red);color:#fff}
.band div{flex:1 1 10rem;text-align:center;padding:1.1rem 1rem;border-right:1px solid rgba(255,255,255,.35)}
.band div:last-child{border-right:0}
.band strong{display:block;font:800 2.8rem var(--head);line-height:1}
.band span{font-weight:500}

/* bagian halaman */
.block{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,3rem)}
.block .in{max-width:66rem;margin:0 auto}
.block h2{margin-top:0}
.block.light{background:var(--white)}
.block.dark{background:var(--black);color:#fff}
.block.dark h2{color:#fff}
.block.dark h2::after,.block.light h2::after{content:"";display:block;width:4rem;height:5px;background:var(--red);margin-top:.35rem}
.prose{max-width:62ch;font-size:1.1rem}
.sub{color:var(--muted);margin:.1rem 0 .6rem}
.dark .sub{color:#b9b9c0}
.empty{color:var(--muted)}
.dark .empty{color:#b9b9c0}

/* divisi */
.div-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem;margin-top:1.5rem}
.div-card{display:block;background:var(--coal);border-left:6px solid var(--red);padding:1.1rem 1.3rem;color:#fff;text-decoration:none}
.div-card:hover{background:#222226}
.div-card h3{margin:0;font-size:1.7rem;text-transform:uppercase}
.div-card span{color:#c9c9cf}

/* prestasi */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem;margin-top:1.5rem}
.ach{background:var(--grey);border-bottom:5px solid var(--black);padding:1.1rem 1.3rem}
.ach-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.ach-year{font:800 1.3rem var(--head)}
.ach-result{background:var(--red);color:#fff;font-weight:600;font-size:.9rem;padding:.1rem .7rem;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.ach h3{margin-bottom:.1em}
.ach p{margin:.3rem 0}

/* anggota */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 1rem}
.tab{background:transparent;color:#fff;border:2px solid #555;font:600 .95rem var(--body);padding:.35rem 1.1rem;cursor:pointer}
.tab:hover{border-color:#fff}
.tab.on{background:var(--red);border-color:var(--red)}
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.member{background:var(--coal);border-top:5px solid var(--red);padding:1.1rem 1.3rem}
.member .div-tag{margin:0;color:#ff8a8f;font-weight:600;font-size:.9rem}
.member h3{font-size:2.1rem;font-style:italic;text-transform:uppercase;margin:.1em 0 0}
.member .real{margin:0 0 .5rem;color:#c9c9cf}
.member .bio{margin:0;color:#e4e4e8;font-size:.97rem}

/* form, admin, login, profil */
.wrap{max-width:62rem;margin:0 auto;padding:1.5rem clamp(1rem,4vw,2rem) 2rem}
.narrow{max-width:36rem;margin:0 auto;padding:2rem clamp(1rem,4vw,2rem) 3rem}
.wrap h1,.narrow h1{font-size:2.8rem;font-style:italic;text-transform:uppercase}
.wrap h2,.narrow h2{font-size:1.7rem;margin-top:1.4em}
.wrap h2::after,.narrow h2::after{display:none}
.form{display:grid;gap:.9rem;margin:1rem 0 1.5rem}
.form label{display:grid;gap:.25rem;font-weight:500}
.form input,.form textarea,.form select{font:inherit;padding:.6rem .7rem;border:2px solid #9b9ba3;background:#fff;color:var(--black);width:100%}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--red);outline:none}
.form input:disabled{background:var(--grey);color:var(--muted)}
.form .check{display:flex;gap:.5rem;align-items:center}
.form .check input{width:auto}
.row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-end}
.row>label{flex:1 1 12rem}
.panel{background:var(--grey);border-left:6px solid var(--red);padding:1.2rem 1.4rem}
.panel h2{margin-top:0}

.flash{margin:1rem clamp(1rem,4vw,3rem);padding:.7rem 1rem;border-left:6px solid #1b7f3b;background:#e3f4e8}
.flash.err{border-color:var(--danger);background:#fbe4e2}
.narrow .flash,.wrap .flash{margin-left:0;margin-right:0}

.stats{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0 1.5rem}
.stat{background:var(--black);color:#fff;padding:1rem 1.5rem;min-width:9.5rem;border-bottom:5px solid var(--red)}
.stat strong{display:block;font:800 2.6rem var(--head);line-height:1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}
.card{background:var(--grey);border-left:6px solid var(--red);padding:1rem 1.2rem;color:var(--black);text-decoration:none}
.card:hover{background:#e6e6e8}
.card h3{margin-bottom:.2em}
.card p{margin:0;color:var(--muted)}

.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--black);color:#fff;font-weight:600}
.actions{display:flex;gap:.9rem;align-items:center;white-space:nowrap}
.actions form{margin:0}
button.link{background:none;border:0;font:inherit;color:var(--red-text);text-decoration:underline;cursor:pointer;padding:0}
button.danger{color:var(--danger)}

.foot{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;padding:1.5rem clamp(1rem,4vw,3rem);background:var(--black);color:#c9c9cf;border-top:3px solid var(--red)}
.foot a{color:#fff}

@media (max-width:40rem){
  .hero::before{width:60%;right:-25%}
  .hero::after{display:none}
  .band div{border-right:0;border-bottom:1px solid rgba(255,255,255,.35)}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.members{grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.member{display:flex;gap:1rem;align-items:flex-start}
.member .info{flex:1;min-width:0}
.member .ph{flex:none;width:6.5rem;height:8.5rem;object-fit:cover;background:#2a2a2e}
.member .ph.none{display:grid;place-items:center;font:800 3.2rem var(--head);color:var(--red)}

/* kartu anggota lebih pendek */
.members{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),20rem))}
.member{padding:.8rem 1rem;gap:.9rem}
.member .ph{width:5rem;height:6.5rem}
.member .ph.none{font-size:2.4rem}
.member h3{font-size:1.7rem}
.member .bio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* panel divisi */
.block.wide .in{max-width:84rem}
.div-row{display:flex;margin-top:1.5rem;overflow-x:auto;padding-bottom:.5rem}
.div-panel{position:relative;isolation:isolate;flex:1 0 12rem;height:26rem;margin-left:-1.2rem;padding:1.2rem 1.8rem 1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-decoration:none;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.div-panel:first-child{margin-left:0}
.div-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(160deg,#3a0c10,#0b0b0c 70%);background-size:cover;background-position:center}
.div-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.2),rgba(11,11,12,.85))}
.div-panel:hover .div-bg{filter:brightness(1.2)}
.div-body{margin:auto 0;display:flex;flex-direction:column;gap:.25rem}
.div-body strong{font:800 2rem var(--head);font-style:italic;text-transform:uppercase;line-height:1}
.div-body small{color:#e4e4e8;font-size:.85rem}
.div-body em{font-style:normal;color:#ff8a8f;font-weight:600}
.div-btn{border:2px solid var(--red);background:rgba(11,11,12,.55);padding:.35rem 1.2rem;font-weight:600}
.div-panel:hover .div-btn,.div-panel:focus-visible .div-btn{background:var(--red)}
.div-panel:focus-visible{outline:none}
.div-panel:focus-visible .div-btn{outline:3px solid #fff}

/* hero dua kolom dengan leaderboard di area merah */
.hero-in{max-width:80rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:2rem;align-items:center}
.hero h1{font-size:clamp(3rem,8vw,6.5rem)}
.hero::before{left:calc(50% + 3rem);right:auto;width:100%}
.hero::after{left:calc(50% + 6rem);right:auto;width:2.5rem}

.board{background:var(--black);border-top:6px solid #fff;padding:1.1rem 1.2rem 1rem}
.tour{margin-bottom:.9rem;padding-bottom:.8rem;border-bottom:2px solid var(--red)}
.tour-name{margin:0;font:800 1.7rem var(--head);font-style:italic;text-transform:uppercase;line-height:1.05}
.tour-date{margin:.25rem 0 0;color:#c9c9cf;font-size:.92rem}
.board .board-title{font-size:1.2rem;font-style:normal;text-transform:none;margin:0 0 .6rem;color:#fff}
.board-empty{margin:0;color:#c9c9cf}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rank-row{display:grid;grid-template-columns:1.6rem 2.6rem minmax(0,1fr) auto;gap:.6rem;align-items:center;background:var(--coal);padding:.45rem .6rem;border-left:4px solid #444}
.rank-row.r1{border-left-color:var(--red)}
.pos{font:800 1.4rem var(--head);text-align:center}
.rank-row .av{width:2.6rem;height:3.2rem;object-fit:cover;background:#2a2a2e;display:grid;place-items:center;font:800 1.4rem var(--head);color:var(--red)}
.who strong{display:block;font:800 1.25rem var(--head);font-style:italic;text-transform:uppercase;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{display:block;color:#b9b9c0;font-size:.8rem;line-height:1.3}
.pts{text-align:right}
.pts strong{display:block;font:800 1.8rem var(--head);line-height:1}
.pts small{color:#ff8a8f;font-size:.75rem}
.board-note{margin:.7rem 0 0;color:#9a9aa3;font-size:.78rem;line-height:1.4}

@media (max-width:64rem){
  .hero-in{grid-template-columns:1fr}
  .hero::before,.hero::after{display:none}
  .board{border-top-color:var(--red)}
}

#anggota .in{max-width:84rem}

.brand .logo{height:2.3rem;width:auto;display:block}

.hero{isolation:isolate}
.hero-slides{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-slides::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.7) 60%,rgba(11,11,12,.45) 100%)}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1);transition:opacity 1.4s ease,transform 9s ease-out}
.slide.on{opacity:1;transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){.slide{transition:none}.slide.on{transform:none}}

/* lapisan gelap lebih tipis, gambar terlihat jelas */
.hero-slides::after{background:linear-gradient(90deg,rgba(11,11,12,.6) 0%,rgba(11,11,12,.4) 60%,rgba(11,11,12,.2) 100%)}

/* tulisan tetap terbaca di atas gambar */
.hero-text h1,.hero-text .lead,.hero-text .school{text-shadow:0 2px 14px rgba(0,0,0,.65)}

/* jarak hero dengan header lebih rapat */
.hero{padding-top:clamp(1.5rem,4vw,1.5rem);padding-bottom:clamp(2rem,5vw,3.5rem)}

/* tentang tim menyamping */
.about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.about-visual{background:var(--black);aspect-ratio:4/3;border-bottom:6px solid var(--red);clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.about-visual img{display:block;width:100%;height:100%;object-fit:cover}
.about-visual.is-logo{display:grid;place-items:center}
.about-visual.is-logo img{width:55%;height:auto;object-fit:contain}
@media (max-width:48rem){.about{grid-template-columns:1fr}.about-visual{aspect-ratio:16/9}}

/* bar sponsor */
.sponsors{background:var(--grey);border-top:1px solid var(--line)}
.sponsors h2{font-size:1.5rem;text-align:center;margin:0 0 1.4rem}
.sp-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:center}
.sp-row img{display:block;height:5.5rem;width:auto;max-width:10rem;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.sp-row img:hover{filter:none;opacity:1}

/* tab divisi pada leaderboard */
.btabs{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .6rem}
.btab{background:transparent;color:#fff;border:1px solid #555;font:600 .8rem var(--body);padding:.2rem .7rem;cursor:pointer}
.btab:hover{border-color:#fff}
.btab.on{background:var(--red);border-color:var(--red)}

/* kartu cadangan di Tim berangkat */
.member.reserve{border-top-color:#777}
.member.reserve .div-tag{color:#b9b9c0}

/* kartu yang bisa diklik */
.member{position:relative}
.plink{color:inherit;text-decoration:none}
.plink::after{content:"";position:absolute;inset:0}
.plink:focus-visible{outline:none}
.plink:focus-visible::after{outline:3px solid var(--red);outline-offset:-3px}
.member:hover h3 .plink{color:#ff8a8f}
.plink-r{color:inherit;text-decoration:none}
.plink-r:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}

/* halaman profil player */
.pp-hero{background:var(--black);color:#fff;padding:2.5rem clamp(1rem,4vw,3rem);border-bottom:6px solid var(--red)}
.pp-in{max-width:66rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;align-items:center}
.pp-photo{flex:none;width:12rem;height:15rem;object-fit:cover;background:#2a2a2e;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.pp-photo.none{display:grid;place-items:center;font:800 6rem var(--head);color:var(--red)}
.pp-info{flex:1 1 18rem}
.pp-info .div-tag{margin:0;color:#ff8a8f;font-weight:600}
.pp-info h1{font-size:clamp(3rem,8vw,5.5rem);font-style:italic;text-transform:uppercase;margin:.05em 0 0}
.pp-info .real{margin:0 0 .6rem;color:#c9c9cf;font-size:1.1rem}
.pp-bio{max-width:60ch;color:#e4e4e8}
.res{display:inline-block;padding:.05rem .7rem;font-weight:600;font-size:.9rem;color:#fff}
.res.win{background:#1b7f3b}
.res.draw{background:#6b6b73}
.res.loss{background:var(--danger)}

/* inventaris */
tr.late td{background:#fbe4e2}
.late-tag{color:var(--danger);font-weight:600}

.pill{display:inline-block;padding:.05rem .7rem;font-weight:600;font-size:.9rem;color:#fff}
.pill.ok{background:#1b7f3b}
.pill.muted{background:#6b6b73}
.pill.bad{background:var(--danger)}
.pill.wait{background:#b26a00}
.rd{display:inline-block;margin-right:.9rem;white-space:nowrap}