/* ===== XSERIES Home v2 — layout ala athlos.com, komponen & bentuk = Home v1 =====
Warna v1: hitam #000, permukaan s1–s4, cyan #00FFEF (primer), live #FF3047.
Merah XS-3 #FF2222 hanya untuk eyebrow & pernyataan besar. */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Dharma Gothic E"; src: url("../fonts/DharmaGothicE-Bold.otf") format("opentype"); font-weight: 100 900; font-display: swap; }
:root {
--pri: #00FFEF; --gold: #FFC730; --bg: #000;
--s1: #17171B; --s2: #1F1F23; --s3: #2A2A2F; --s4: #38383E;
--ink: #fff; --mut: #9A9AA3; --live: #FF3047; --ln: rgba(255,255,255,.1);
--red: #FF2222;
--line: var(--ln); --dim: var(--mut); --cyan: var(--pri);
--gut: 40px;
--dh: "Dharma Gothic E", Impact, sans-serif;
--display: var(--dh);
--wide: "Archivo", Inter, sans-serif;
--body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
--mono: var(--body);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
/* ---------- komponen dasar v1: kartu chamfer + cincin tipis ---------- */
.ring, .ring-l { position: relative; }
.ring::after, .ring-l::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--ln); clip-path: var(--ring); }
.ring-l::after { clip-path: var(--ring-l); }
/* ---------- type ---------- */
.mono { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.dim { color: var(--dim); }
.red { color: var(--red); }
.center { text-align: center; }
.eyebrow { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eyebrow.ink, .display-s.ink { color: #000; }
.display, .display-s, .mega, .hero-title, h3, h4 { font-family: var(--dh); text-transform: uppercase; }
.display { font-size: clamp(52px, 6.8vw, 108px); font-weight: 700; line-height: .88; letter-spacing: .005em; }
.display-s { font-size: clamp(38px, 3.8vw, 60px); font-weight: 700; line-height: .92; letter-spacing: .005em; }
.mega { font-size: clamp(96px, 16vw, 260px); font-weight: 700; line-height: .82; letter-spacing: .005em; }
.lede { font-size: 18px; color: var(--dim); max-width: 520px; }
h3 { font-size: 30px; font-weight: 700; line-height: .95; letter-spacing: .01em; }
h4 { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
/* tag = jajar genjang v1 */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 10px; font: 700 11.5px/1 var(--body); letter-spacing: 0; text-transform: none; background: var(--s3); color: #D6D6D6; clip-path: polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); }
.tag-live { background: var(--live); color: #fff; }
/* ---------- buttons (v1) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; font: 700 18px/1 var(--dh); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; border-radius: 0; clip-path: var(--chamf-s); transition: background .2s, color .2s; }
.btn-pri { background: var(--pri); color: #000; }
.btn-pri:hover { background: #fff; }
.btn-line { background: transparent; color: #CFCFD4; }
.btn-line::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(255,255,255,.28); clip-path: var(--chamf-o); transition: background .2s; }
.btn-line:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn-line:hover::after { background: rgba(255,255,255,.6); }
.btn-frost { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-frost::after { display: none; }
.btn-frost:hover { background: rgba(255,255,255,.24); }
.btn-live { background: var(--live); color: #fff; }
.btn-live:hover { background: #e0213a; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 16px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 24px; }
.icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; clip-path: var(--chamf-s); background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s; font: 600 16px/1 var(--body); }
.icon-btn:hover { background: rgba(255,255,255,.24); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row-nav .icon-btn { background: var(--s2); backdrop-filter: none; }
.row-nav .icon-btn:hover { background: var(--s3); }
/* tautan "lihat semua" = gaya .ld-more v1 */
.more { display: inline-flex; gap: 8px; align-items: center; font: 700 12.5px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--pri); margin-top: 32px; }
.more span { transition: transform .2s; }
.more:hover { color: var(--ink); }
.more:hover span { transform: translateX(4px); }
.more.center { display: flex; justify-content: center; }
/* ---------- live bar ---------- */
[data-show] { display: none; }
body[data-state="pre"] [data-show~="pre"],
body[data-state="near"] [data-show~="near"],
body[data-state="live"] [data-show~="live"],
body[data-state="between"] [data-show~="between"] { display: block; }
body[data-state="pre"] .livebar[data-show="pre"],
body[data-state="near"] .livebar[data-show="near"],
body[data-state="live"] .livebar[data-show="live"],
body[data-state="between"] .livebar[data-show="between"] { display: flex; }
.livebar { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 40px; background: var(--live); color: #fff; align-items: center; justify-content: center; gap: 18px; padding: 0 var(--gut); font-size: 14px; }
.livebar .lb-score { display: flex; align-items: center; gap: 8px; font-family: var(--dh); font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: .02em; }
.livebar .lb-score img { width: 22px; height: 22px; }
.livebar b { font-size: 22px; padding: 0 4px; }
.livebar .lb-cta { position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; font: 700 15px/1 var(--dh); text-transform: uppercase; background: rgba(0,0,0,.25); clip-path: var(--chamf-s); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; animation: pulse 1.4s ease-in-out infinite; }
.eyebrow .live-dot { background: var(--live); }
@keyframes pulse { 50% { opacity: .25; } }
.nav { top: 0; }
body[data-state="live"] .nav { top: 40px; }
.livebar .lb-score i { font-style: normal; opacity: .6; padding: 0 2px; }
.live-dot.is-still { animation: none; }
/* ---------- nav (dua grup melayang) ---------- */
.nav { position: fixed; z-index: 50; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px; pointer-events: none; transition: top .2s; }
.nav-group { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.nav-logo { height: 40px; padding: 0 14px; display: flex; align-items: center; clip-path: var(--chamf-s); background: rgba(0,0,0,.38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-logo img { height: 22px; width: auto; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; font: 600 13px/1 var(--body); clip-path: var(--chamf-s); background: rgba(0,0,0,.38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, color .2s; }
.nav-links a:hover { background: rgba(255,255,255,.18); }
.nav-links a.is-current { color: #000; background: var(--pri); }
.icon-yt svg { width: 20px; }
.nav-burger { display: none; }
.menu-sheet { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.96); backdrop-filter: blur(20px); padding: 96px 24px 32px; display: flex; flex-direction: column; justify-content: space-between; }
.menu-sheet[hidden] { display: none; }
.menu-sheet nav { display: flex; flex-direction: column; }
.menu-sheet nav a { font-family: var(--dh); font-weight: 700; text-transform: uppercase; font-size: 52px; line-height: 1; padding: 6px 0; border-bottom: 1px solid var(--line); }
/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 82%, #000 100%); }
.hero-copy { position: relative; padding: 0 var(--gut); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 8px; }
.hero-lede { max-width: 420px; font-size: 18px; line-height: 1.4; }
.hero-title { position: relative; font-size: 17vw; font-weight: 700; line-height: .8; letter-spacing: .005em; padding: 0 var(--gut) 2.2vw; white-space: nowrap; width: 100%; overflow: hidden; }
/* ---------- page wrapper & section spacing ---------- */
.page { padding: 0 var(--gut); }
.page > section { padding-top: 160px; }
.center-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.row-head > div:first-child { display: flex; flex-direction: column; gap: 18px; }
.row-note { font-size: 18px; color: var(--dim); max-width: 300px; text-align: right; }
.row-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.row-foot .more { margin-top: 0; }
/* ---------- xBall: kipas X-Card (kartu fisik v1) ---------- */
.xball { text-align: center; }
.xball .more { justify-content: center; }
.xball .lede { margin: 0 auto; }
.card-fan { position: relative; height: 310px; width: 480px; margin: 0 auto 48px; }
.xk-c{--c:var(--pri);--tex:url(../img/cards/tex-gold.webp);border-radius:10px;overflow:hidden;align-items:center;padding:0;background:#040404 var(--tex) center/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.7),0 16px 28px -12px rgba(0,0,0,.95);container-type:inline-size;position:relative;aspect-ratio:5/7;display:flex;flex-direction:column;text-align:center}
.xk-c.pres{--c:var(--gold);--tex:url(../img/cards/tex-cyan.webp)}
.xk-c::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 66% 56% at 50% 52%,rgba(0,0,0,.88) 0,rgba(0,0,0,.6) 55%,rgba(0,0,0,.08) 100%)}
.xk-c>*{position:relative;z-index:1}
.xk-c>.xk-fr{position:absolute;inset:6cqi;z-index:1;--l:12cqi;--t:1.3cqi;--g:linear-gradient(var(--c),var(--c));background:var(--g) 0 0/var(--l) var(--t),var(--g) 0 0/var(--t) var(--l),var(--g) 100% 0/var(--l) var(--t),var(--g) 100% 0/var(--t) var(--l),var(--g) 0 100%/var(--l) var(--t),var(--g) 0 100%/var(--t) var(--l),var(--g) 100% 100%/var(--l) var(--t),var(--g) 100% 100%/var(--t) var(--l);background-repeat:no-repeat;filter:drop-shadow(0 0 1.2cqi color-mix(in srgb,var(--c) 70%,transparent))}
.xk-c .xk-t{margin:15cqi 0 0;font:700 14cqi/.9 var(--dh);text-transform:uppercase;color:var(--c);white-space:nowrap;letter-spacing:.015em;text-shadow:0 0 5cqi color-mix(in srgb,var(--c) 45%,transparent),0 .5cqi 0 rgba(0,0,0,.7)}
.xk-art{margin:3cqi 0}
.xk-ic{width:54cqi;fill:var(--c);filter:drop-shadow(0 0 3.5cqi color-mix(in srgb,var(--c) 40%,transparent))}
.xk-ic .st{fill:none;stroke:var(--c);stroke-width:3.2;stroke-linecap:round}
.xk-ic .rg{stroke:#020202;stroke-width:2.6;paint-order:stroke}
.xk-ic .ko{fill:#020202}
.xk-ic .xk-it{font:700 17px/1 var(--dh);letter-spacing:.02em}
.xk-c .xk-x{margin:0;padding:0 10cqi;font:500 5.3cqi/1.42 var(--body);color:#fff;text-align:center;min-height:calc(5.3cqi*1.42*4);text-shadow:0 1px 3px #000}
.xk-lg{width:23cqi;margin:5cqi 0 10cqi;filter:drop-shadow(0 0 2cqi rgba(0,255,239,.35))}
.xk-c>.xk-gls{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.13) 46%,rgba(255,255,255,.04) 54%,transparent 66%) 70% 0/260% 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.07),transparent 22%)}
.card-fan .xk-c { position: absolute; left: 50%; top: 14px; width: 200px; margin-left: -100px; transform-origin: 50% 120%; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s; }
.card-fan .f1 { transform: rotate(-14deg) translateX(-44px); filter: brightness(.8); }
.card-fan .f3 { transform: rotate(14deg) translateX(44px); filter: brightness(.8); }
.card-fan .f2 { z-index: 2; }
.card-fan:hover .f1 { transform: rotate(-22deg) translateX(-84px); filter: none; }
.card-fan:hover .f3 { transform: rotate(22deg) translateX(84px); filter: none; }
.card-fan:hover .f2 { transform: translateY(-14px); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; text-align: left; }
.step { display: flex; flex-direction: column; gap: 14px; }
.step-n { font-family: var(--dh); font-size: 40px; line-height: 1; color: var(--red); }
.step img { width: 100%; aspect-ratio: 4/3; object-fit: cover; clip-path: var(--chamf-l); }
.step h3 { color: var(--ink); margin-top: 6px; }
.step p { color: var(--dim); max-width: 380px; }
.step-table .table { margin-top: 0; }
/* ---------- tables: baris = kartu kecil chamfer (v1) ---------- */
.table { display: flex; flex-direction: column; gap: 4px; }
.tr { position: relative; display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; align-items: center; padding: 14px 18px; font-size: 15px; background: var(--s1); clip-path: var(--chamf); }
.tr.th { background: none; clip-path: none; font: 600 11px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); padding-top: 8px; padding-bottom: 8px; }
.interlude .tr:not(.th) { background: var(--s2); }
.step-table .tr span:first-child { font-family: var(--dh); font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: .02em; color: var(--pri); }
.step-table .tr.th span:first-child { font: 600 11px/1 var(--body); letter-spacing: .05em; color: var(--dim); }
/* ---------- teams ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.team { display: flex; flex-direction: column; gap: 4px; }
.team-art { position: relative; aspect-ratio: 3/4; overflow: hidden; clip-path: var(--chamf-l); background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--t2) 45%, transparent) 0%, transparent 60%), linear-gradient(160deg, var(--t1), #000 120%); display: grid; place-items: center; margin-bottom: 12px; }
.team-art::before { content: ""; position: absolute; inset: 0; background: url("../img/grain.png"); opacity: .18; mix-blend-mode: overlay; pointer-events: none; }
.team-art::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(255,255,255,.14); clip-path: var(--ring-l); }
.team-art img { width: 62%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.team:hover .team-art img { transform: scale(1.06) rotate(-2deg); }
.crowns { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; z-index: 2; }
.crowns i { width: 26px; height: 20px; background: var(--gold); -webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
.code { font: 700 12px/1.4 var(--body); letter-spacing: .06em; color: var(--pri); text-transform: uppercase; }
.cap { color: var(--dim); font-size: 12px; }
/* ---------- interlude (results-card pattern) ---------- */
.interlude .panel { position: relative; background: var(--s1); clip-path: var(--chamf-l); padding: 36px; }
.interlude .panel::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--ln); clip-path: var(--ring-l); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.panel-head > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.panel-mark { height: 46px; width: auto; opacity: .9; }
.panel-body.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.big-line { font-family: var(--dh); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 52px); line-height: .95; max-width: 520px; }
.panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.countdown { display: flex; gap: 6px; }
.countdown div { background: var(--s2); clip-path: var(--chamf); padding: 10px 12px 12px; min-width: 78px; text-align: center; }
.countdown b { display: block; font-family: var(--dh); font-weight: 700; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pri); }
.countdown span { font: 600 11px/1 var(--body); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.games .tr { grid-template-columns: 130px 1fr 170px 70px 110px; }
.games .tr > a { justify-self: end; }
.mu { display: flex; align-items: center; gap: 10px; font-family: var(--dh); font-weight: 700; text-transform: uppercase; font-size: 24px; letter-spacing: .02em; }
.mu img { width: 28px; height: 28px; }
.mu i { font-style: normal; font: 600 12px/1 var(--body); color: var(--dim); }
.mu.dim { color: var(--dim); }
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 16px 0 32px; }
.sb-team { display: flex; align-items: center; gap: 16px; font-family: var(--dh); font-weight: 700; text-transform: uppercase; font-size: 40px; }
.sb-team:last-child { flex-direction: row-reverse; text-align: right; }
.sb-team img { width: 72px; height: 72px; }
.sb-score { display: flex; align-items: center; gap: 16px; font-family: var(--dh); font-weight: 700; font-size: 150px; line-height: .9; }
.sb-score i { font-style: normal; color: var(--live); font-size: 96px; }
.interlude .moments .tr { grid-template-columns: 110px 1fr 60px; }
/* form "Keep me posted": kotak chamfer + cincin (v1) */
.notify { display: flex; flex-direction: column; gap: 10px; }
.notify-row { position: relative; display: flex; gap: 6px; background: var(--s2); clip-path: var(--chamf); padding: 6px; }
.notify-row::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(255,255,255,.16); clip-path: var(--ring); transition: background .2s; }
.notify-row:focus-within::after { background: rgba(0,255,239,.7); }
.notify-row input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0 12px; font-size: 16px; }
.notify-row input::placeholder { color: var(--dim); }
/* ---------- players (champions carousel, kartu pemain v1) ---------- */
.row-nav { display: flex; gap: 6px; }
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 4px var(--gut) 8px; scroll-padding: 0 var(--gut); }
.rail::-webkit-scrollbar { display: none; }
/* kartu pemain = kartu "throne" asli Home v1 (css/throne.css), ukuran ikut lebar kartu (cqw, basis 232px) */
.pcard { flex: 0 0 calc((100% - 3 * 16px) / 4.3); scroll-snap-align: start; container-type: inline-size; position: relative; display: block; aspect-ratio: 4/5; color: #fff; transition: transform .25s ease; }
.pcard:hover { transform: translateY(-3px); }
.pcard::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 6; background: linear-gradient(118deg, transparent 28%, rgba(255,255,255,.16) 38%, rgba(255,255,255,.04) 44%, transparent 52%), linear-gradient(118deg, transparent 62%, rgba(255,255,255,.07) 68%, transparent 72%); background-size: 220% 100%; background-position: 35% 0; transition: background-position .5s ease; }
.pcard:hover::after { background-position: 0 0; }
.xt { --cy: #3ED8D0; --rd: #EC2A32; }
.xt-f { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; isolation: isolate; background: #000 url(../img/players/throne/plate.webp) 50% 0/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.xt-f::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(60% 42% at 50% 30%, rgba(255,255,255,.95), rgba(255,120,120,.35) 55%, transparent 75%); }
.xt-f::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; z-index: 2; pointer-events: none; background: radial-gradient(48% 62% at 50% 72%, rgba(0,0,0,.55), transparent); }
.xt-p { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 30%; }
.xt-i { position: absolute; z-index: 3; left: 5.6cqw; top: 4.74cqw; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--cy); filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent)); }
.xt-i b { font: 400 12.93cqw/.9 Rye, Georgia, serif; }
.xt-i i { width: 9.48cqw; height: 6.47cqw; background: currentColor; -webkit-mask: url(../img/xseries-mark.webp) center/contain no-repeat; mask: url(../img/xseries-mark.webp) center/contain no-repeat; }
.xt-i2 { left: auto; top: auto; right: 5.6cqw; bottom: 4.74cqw; color: var(--rd); rotate: 180deg; opacity: .9; }
.xt-n { position: absolute; z-index: 3; left: 3.45cqw; right: 3.45cqw; bottom: 3.88cqw; display: flex; flex-direction: column; align-items: center; text-align: center; }
.xt-n b { display: inline-block; white-space: nowrap; font: 700 17.24cqw/.8 var(--dh); text-transform: uppercase; letter-spacing: .005em; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.xt-n small { margin-top: 1.3cqw; font: 700 4.74cqw/1 var(--dh); text-transform: uppercase; letter-spacing: .03em; }
.xt-n img { display: block; width: 44.8cqw; height: auto; margin-top: .86cqw; }
.xt-n em { margin-top: 1.3cqw; font: italic 800 2.8cqw/1 var(--body); letter-spacing: .04em; }
.xt.nx .xt-f { background-color: #0b0b0d; }
.xt.nx .xt-i2 { display: none; }
.xt.nx .xt-q { position: absolute; z-index: 3; left: 0; right: 0; top: 29%; text-align: center; font: 700 41.4cqw/1 var(--dh); color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.45); }
.xt.nx .xt-n { bottom: 24cqw; }
.xt.nx .xt-n b { font-size: 14.66cqw; }
.xt.nx .xt-n small { font: 600 4.74cqw/1 var(--body); text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.7); margin-top: 2.2cqw; }
.xt .tc-go { position: absolute; z-index: 4; left: 5.17cqw; right: 5.17cqw; bottom: 5.17cqw; height: 40px; display: grid; place-items: center; clip-path: var(--chamf-s); background: var(--pri); color: #000; font: 700 18px/1 var(--dh); text-transform: uppercase; }
.xt:focus-visible { outline: none; }
.xt:focus-visible .xt-f { outline: 2px solid var(--cy); outline-offset: 2px; }
.xt.on .xt-p { animation: xt-rv 1.5s cubic-bezier(.2,.7,.2,1) both, xt-push 8s 1.2s linear both; }
.xt.on .xt-f::before { animation: xt-fx 1.5s ease-out both; }
.xt.on .xt-i b { animation: xt-fl 1.3s steps(1) both; }
.xt.on .xt-n { animation: xt-nm 1.5s cubic-bezier(.2,.7,.2,1) both; }
.xt.nx.on .xt-q { animation: xt-fl 1.3s steps(1) both; }
@keyframes xt-rv { 0%, 30% { opacity: 0 } 42% { opacity: 1; filter: brightness(2.2) saturate(.3) } 64%, 100% { opacity: 1; filter: none } }
@keyframes xt-push { from { scale: 1 } to { scale: 1.05 } }
@keyframes xt-fx { 0%, 30% { opacity: 0 } 42% { opacity: .9 } 100% { opacity: 0 } }
@keyframes xt-fl { 0% { opacity: 1 } 10% { opacity: .15 } 16% { opacity: 1 } 26% { opacity: .25 } 32% { opacity: 1 } 44% { opacity: .4 } 50%, 100% { opacity: 1 } }
@keyframes xt-nm { 0%, 48% { opacity: 0; transform: scale(1.22); filter: blur(5px) } 72%, 100% { opacity: 1; transform: none; filter: none } }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard::after { transition: none; } .pcard:hover { transform: none; } .xt.on .xt-p, .xt.on .xt-f::before, .xt.on .xt-i b, .xt.on .xt-n, .xt.nx.on .xt-q { animation: none; } }
/* ---------- journey (pinned / stacking story) ---------- */
.journey .center-head { margin-bottom: 64px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.chapter { position: sticky; top: calc(96px + var(--i) * 28px); height: min(78vh, 720px); overflow: hidden; clip-path: var(--chamf-l); display: flex; align-items: flex-end; background: var(--s1); }
.chapter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.9) 100%); z-index: 1; }
.chapter::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(255,255,255,.14); clip-path: var(--ring-l); }
.ch-copy { position: relative; z-index: 2; padding: 40px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta link" "title link" "text link"; gap: 10px 40px; width: 100%; align-items: end; }
.ch-copy .mono { grid-area: meta; color: var(--ink); }
.ch-copy h3 { grid-area: title; font-size: clamp(72px, 10vw, 168px); font-weight: 700; letter-spacing: .005em; line-height: .82; }
.ch-copy p:not(.mono) { grid-area: text; max-width: 520px; font-size: 18px; color: rgba(255,255,255,.82); }
.ch-copy .more { grid-area: link; margin: 0; height: 40px; padding: 0 18px; font: 700 18px/1 var(--dh); letter-spacing: .01em; color: #fff; background: rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); clip-path: var(--chamf-s); }
.ch-copy .more:hover { background: rgba(255,255,255,.24); }
.chapter-now h3 { color: var(--pri); }
/* ---------- video & news ---------- */
.news { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
.feature { position: relative; overflow: hidden; clip-path: var(--chamf-l); aspect-ratio: 16/11; display: flex; align-items: flex-end; }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.feature:hover img { transform: scale(1.03); }
.feature::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.9)); }
.feature::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(255,255,255,.14); clip-path: var(--ring-l); }
.play { position: absolute; z-index: 2; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 84px; height: 84px; clip-path: var(--chamf-l); background: var(--pri); display: grid; place-items: center; transition: background .2s; }
.feature:hover .play { background: #fff; }
.play svg { width: 30px; fill: #000; margin-left: 4px; }
.feature-copy { position: relative; z-index: 2; padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.feature-copy h3 { font-size: clamp(34px, 3.4vw, 52px); max-width: 560px; }
.news-list { display: flex; flex-direction: column; gap: 6px; }
.news-list h2 { margin-bottom: 16px; }
.ni { position: relative; display: grid; grid-template-columns: 116px 1fr; gap: 18px; padding: 10px; align-items: center; background: var(--s1); clip-path: var(--chamf); transition: background .2s; }
.ni::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--ln); clip-path: var(--ring); }
.ni:hover { background: var(--s2); }
.ni img { width: 116px; aspect-ratio: 1; object-fit: cover; clip-path: var(--chamf-s); }
.ni > div { display: flex; flex-direction: column; gap: 8px; }
.ni-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ni:hover h4 { color: var(--pri); }
/* ---------- GOS family (red BTS card pattern) ---------- */
.family { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.family-card { position: relative; background: var(--red); clip-path: var(--chamf-l); padding: 40px; display: flex; flex-direction: column; gap: 20px; min-height: 420px; }
.family-card .display-s { font-size: clamp(52px, 5.6vw, 92px); font-weight: 700; line-height: .86; }
.family-links { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.fam { position: relative; display: flex; align-items: center; gap: 12px; background: #000; clip-path: var(--chamf); padding: 12px 18px 12px 12px; font: 600 14px/1.2 var(--body); transition: background .2s; }
.fam:hover { background: var(--s2); }
.fam img { height: 34px; width: auto; }
.family-photo { position: relative; overflow: hidden; clip-path: var(--chamf-l); }
.family-photo img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- partners: logo di kartu kecil ---------- */
.partners .display { margin-bottom: 56px; }
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.logo-grid img { height: 140px; width: 100%; object-fit: contain; padding: 44px 36px; background: var(--s1); clip-path: var(--chamf); filter: grayscale(1) brightness(1.6); opacity: .8; transition: opacity .2s, filter .2s, background .2s; }
.logo-grid img:hover { filter: none; opacity: 1; background-color: var(--s2); }
/* ---------- keep me posted ---------- */
.kmp { text-align: center; padding-bottom: 160px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.notify-xl { width: min(620px, 100%); align-items: center; }
.notify-xl .notify-row { width: 100%; }
.notify-xl .notify-row input { font-size: 18px; }
.notify-xl .btn { height: 48px; padding: 0 22px; font-size: 20px; }
.seg { display: inline-flex; gap: 4px; background: var(--s1); clip-path: var(--chamf); padding: 4px; }
.seg button { height: 32px; padding: 0 14px; font: 600 13px/1 var(--body); clip-path: var(--chamf-s); color: var(--dim); }
.seg button.on { background: var(--s3); color: var(--ink); }
/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 64px var(--gut) 32px; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.foot-logo { height: 34px; width: auto; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-cols div { display: flex; flex-direction: column; gap: 10px; }
.foot-cols .mono { font-size: 11px; margin-bottom: 4px; color: var(--dim); }
.foot-cols a { font-size: 15px; }
.foot-cols a:hover { color: var(--pri); }
.foot-legal { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--dim); font-size: 11px; padding-top: 32px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 12px; }
.foot-legal span:last-child { display: flex; gap: 20px; }
/* ---------- prototype state toggle ---------- */
.proto { position: fixed; z-index: 70; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 4px; background: rgba(23,23,27,.92); clip-path: var(--chamf); padding: 5px; backdrop-filter: blur(14px); }
.proto .mono { font-size: 10px; color: var(--pri); padding: 0 8px; }
.proto button { height: 30px; padding: 0 10px; font: 600 12px/1 var(--body); clip-path: var(--chamf-s); color: var(--dim); }
.proto button.on { background: var(--pri); color: #000; }
/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .live-dot { animation: none; } html { scroll-behavior: auto; } }
/* ================= responsive ================= */
@media (max-width: 1180px) {
.nav-links a { padding: 0 8px; font-size: 11.5px; }
.games .tr { grid-template-columns: 110px 1fr 150px 56px 100px; }
}
@media (max-width: 1024px) {
:root { --gut: 24px; }
.nav-links, .nav-right .icon-btn:not(.nav-burger) { display: none; }
.nav-burger { display: grid; }
.page > section { padding-top: 120px; }
.steps { grid-template-columns: 1fr 1fr; }
.step-table { grid-column: 1 / -1; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.pcard { flex-basis: calc((100% - 2 * 16px) / 2.6); }
.news { grid-template-columns: 1fr; }
.games .tr { grid-template-columns: 1fr auto; grid-template-areas: "g btn" "mu btn" "k btn"; gap: 6px 16px; }
.games .tr > :nth-child(1) { grid-area: g; color: var(--red); font-size: 13px; }
.games .tr > :nth-child(2) { grid-area: mu; }
.games .tr > :nth-child(3) { grid-area: k; color: var(--dim); font-size: 13px; }
.games .tr > :nth-child(4) { display: none; }
.games .tr > :nth-child(5) { grid-area: btn; }
.games .tr.th { display: none; }
.panel-head { flex-direction: column; align-items: flex-start; }
.logo-grid { grid-template-columns: repeat(3, 1fr); }
.foot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
:root { --gut: 16px; }
.nav { padding: 12px; }
.nav-logo img { height: 18px; }
.nav-right .btn { font-size: 16px; padding: 0 12px; }
.hero { min-height: 560px; }
.hero-copy { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.hero-lede { font-size: 16px; }
.hero-title { font-size: 28vw; white-space: normal; line-height: .82; padding-bottom: 16px; }
.page > section { padding-top: 96px; }
.row-head { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
.row-note { text-align: left; }
.card-fan { width: 100%; height: 250px; margin-bottom: 16px; }
.card-fan .xk-c { width: 156px; margin-left: -78px; }
.card-fan .f1 { transform: rotate(-12deg) translateX(-34px); }
.card-fan .f3 { transform: rotate(12deg) translateX(34px); }
.steps { grid-template-columns: 1fr; margin-top: 48px; }
.tr { padding: 12px 14px; font-size: 14px; }
.team-grid { gap: 10px; }
.team h3 { font-size: 24px; }
.row-foot { flex-direction: column; align-items: stretch; }
.row-foot .btn { width: 100%; }
.interlude .panel { padding: 22px 18px; }
.countdown { width: 100%; }
.countdown div { flex: 1; min-width: 0; padding: 10px 4px; }
.countdown b { font-size: 42px; }
.panel-body.split { grid-template-columns: 1fr; }
.notify-row { flex-direction: column; }
.notify-row input { padding: 12px; }
.panel-foot .btn { width: 100%; }
.mu { font-size: 20px; gap: 6px; flex-wrap: wrap; }
.mu img { width: 22px; height: 22px; }
.scoreboard { gap: 10px; }
.sb-team { flex-direction: column !important; font-size: 20px; text-align: center !important; gap: 8px; }
.sb-team img { width: 48px; height: 48px; }
.sb-score { font-size: 88px; gap: 8px; }
.sb-score i { font-size: 56px; }
.pcard { flex-basis: 72%; }
.row-nav { display: none; }
.chapter { height: 74vh; top: calc(72px + var(--i) * 18px); }
.ch-copy { padding: 22px; grid-template-columns: 1fr; grid-template-areas: "meta" "title" "text" "link"; }
.ch-copy .mono { font-size: 11px; }
.ch-copy p:not(.mono) { font-size: 16px; }
.ch-copy .more { justify-self: start; margin-top: 8px; }
.ni { grid-template-columns: 84px 1fr; gap: 14px; }
.ni img { width: 84px; }
.ni h4 { font-size: 21px; }
.feature { aspect-ratio: 4/5; }
.feature-copy { padding: 20px; }
.play { width: 64px; height: 64px; }
.family { grid-template-columns: 1fr; }
.family-card { padding: 26px; min-height: 0; }
.family-photo { aspect-ratio: 4/3; }
.logo-grid { grid-template-columns: repeat(2, 1fr); }
.logo-grid img { height: 104px; padding: 30px 24px; }
.kmp { padding-bottom: 100px; gap: 32px; }
.foot-cols { grid-template-columns: 1fr 1fr; }
.proto { left: 8px; right: 8px; bottom: 8px; overflow-x: auto; }
.proto .mono { display: none; }
.livebar { gap: 10px; font-size: 12px; padding: 0 10px; justify-content: space-between; }
.livebar > .mono, .livebar .lb-q { display: none; }
.livebar .lb-score { font-size: 16px; gap: 5px; }
.livebar .lb-score img { width: 18px; height: 18px; }
}
:root {
/* Bentuk komponen = Home v1: potongan diagonal kiri-atas & kanan-bawah, sudut lain siku membulat */
--cc: 10px; --cc-s: 6px; --cc-l: 16px; --cr: 3px; --ck: 2.2px; --crs: 1.5px; --cks: 1.1px; --sk: 5px;
--chamf: shape(from calc(var(--cc) + var(--cr)) 0,line to calc(100% - var(--cr)) 0,curve to 100% var(--cr) with 100% 0,line to 100% calc(100% - var(--cc) - var(--ck)),curve to calc(100% - var(--ck)) calc(100% - var(--cc) + var(--ck)) with 100% calc(100% - var(--cc)),line to calc(100% - var(--cc) + var(--ck)) calc(100% - var(--ck)),curve to calc(100% - var(--cc) - var(--cr)) 100% with calc(100% - var(--cc)) 100%,line to var(--cr) 100%,curve to 0 calc(100% - var(--cr)) with 0 100%,line to 0 calc(var(--cc) + var(--ck)),curve to var(--ck) calc(var(--cc) - var(--ck)) with 0 var(--cc),line to calc(var(--cc) - var(--ck)) var(--ck),curve to calc(var(--cc) + var(--cr)) 0 with var(--cc) 0,close);
--chamf-l: shape(from calc(var(--cc-l) + var(--cr)) 0,line to calc(100% - var(--cr)) 0,curve to 100% var(--cr) with 100% 0,line to 100% calc(100% - var(--cc-l) - var(--ck)),curve to calc(100% - var(--ck)) calc(100% - var(--cc-l) + var(--ck)) with 100% calc(100% - var(--cc-l)),line to calc(100% - var(--cc-l) + var(--ck)) calc(100% - var(--ck)),curve to calc(100% - var(--cc-l) - var(--cr)) 100% with calc(100% - var(--cc-l)) 100%,line to var(--cr) 100%,curve to 0 calc(100% - var(--cr)) with 0 100%,line to 0 calc(var(--cc-l) + var(--ck)),curve to var(--ck) calc(var(--cc-l) - var(--ck)) with 0 var(--cc-l),line to calc(var(--cc-l) - var(--ck)) var(--ck),curve to calc(var(--cc-l) + var(--cr)) 0 with var(--cc-l) 0,close);
--chamf-s: shape(from calc(0px + var(--cc-s) + var(--crs)) 0px,line to calc(100% - 0px - var(--crs)) 0px,curve to calc(100% - 0px) calc(0px + var(--crs)) with calc(100% - 0px) 0px,line to calc(100% - 0px) calc(100% - 0px - var(--cc-s) - var(--cks)),curve to calc(100% - 0px - var(--cks)) calc(100% - 0px - var(--cc-s) + var(--cks)) with calc(100% - 0px) calc(100% - 0px - var(--cc-s)),line to calc(100% - 0px - var(--cc-s) + var(--cks)) calc(100% - 0px - var(--cks)),curve to calc(100% - 0px - var(--cc-s) - var(--crs)) calc(100% - 0px) with calc(100% - 0px - var(--cc-s)) calc(100% - 0px),line to calc(0px + var(--crs)) calc(100% - 0px),curve to 0px calc(100% - 0px - var(--crs)) with 0px calc(100% - 0px),line to 0px calc(0px + var(--cc-s) + var(--cks)),curve to calc(0px + var(--cks)) calc(0px + var(--cc-s) - var(--cks)) with 0px calc(0px + var(--cc-s)),line to calc(0px + var(--cc-s) - var(--cks)) calc(0px + var(--cks)),curve to calc(0px + var(--cc-s) + var(--crs)) 0px with calc(0px + var(--cc-s)) 0px,close);
--chamf-o: shape(evenodd from calc(0px + var(--cc-s) + var(--crs)) 0px,line to calc(100% - 0px - var(--crs)) 0px,curve to calc(100% - 0px) calc(0px + var(--crs)) with calc(100% - 0px) 0px,line to calc(100% - 0px) calc(100% - 0px - var(--cc-s) - var(--cks)),curve to calc(100% - 0px - var(--cks)) calc(100% - 0px - var(--cc-s) + var(--cks)) with calc(100% - 0px) calc(100% - 0px - var(--cc-s)),line to calc(100% - 0px - var(--cc-s) + var(--cks)) calc(100% - 0px - var(--cks)),curve to calc(100% - 0px - var(--cc-s) - var(--crs)) calc(100% - 0px) with calc(100% - 0px - var(--cc-s)) calc(100% - 0px),line to calc(0px + var(--crs)) calc(100% - 0px),curve to 0px calc(100% - 0px - var(--crs)) with 0px calc(100% - 0px),line to 0px calc(0px + var(--cc-s) + var(--cks)),curve to calc(0px + var(--cks)) calc(0px + var(--cc-s) - var(--cks)) with 0px calc(0px + var(--cc-s)),line to calc(0px + var(--cc-s) - var(--cks)) calc(0px + var(--cks)),curve to calc(0px + var(--cc-s) + var(--crs)) 0px with calc(0px + var(--cc-s)) 0px,close,move to calc(1px + calc(var(--cc-s) - .59px) + calc(var(--crs) - .41px)) 1px,line to calc(100% - 1px - calc(var(--crs) - 1px)) 1px,curve to calc(100% - 1px) calc(1px + calc(var(--crs) - 1px)) with calc(100% - 1px) 1px,line to calc(100% - 1px) calc(100% - 1px - calc(var(--cc-s) - .59px) - calc(var(--cks) - .29px)),curve to calc(100% - 1px - calc(var(--cks) - .29px)) calc(100% - 1px - calc(var(--cc-s) - .59px) + calc(var(--cks) - .29px)) with calc(100% - 1px) calc(100% - 1px - calc(var(--cc-s) - .59px)),line to calc(100% - 1px - calc(var(--cc-s) - .59px) + calc(var(--cks) - .29px)) calc(100% - 1px - calc(var(--cks) - .29px)),curve to calc(100% - 1px - calc(var(--cc-s) - .59px) - calc(var(--crs) - .41px)) calc(100% - 1px) with calc(100% - 1px - calc(var(--cc-s) - .59px)) calc(100% - 1px),line to calc(1px + calc(var(--crs) - 1px)) calc(100% - 1px),curve to 1px calc(100% - 1px - calc(var(--crs) - 1px)) with 1px calc(100% - 1px),line to 1px calc(1px + calc(var(--cc-s) - .59px) + calc(var(--cks) - .29px)),curve to calc(1px + calc(var(--cks) - .29px)) calc(1px + calc(var(--cc-s) - .59px) - calc(var(--cks) - .29px)) with 1px calc(1px + calc(var(--cc-s) - .59px)),line to calc(1px + calc(var(--cc-s) - .59px) - calc(var(--cks) - .29px)) calc(1px + calc(var(--cks) - .29px)),curve to calc(1px + calc(var(--cc-s) - .59px) + calc(var(--crs) - .41px)) 1px with calc(1px + calc(var(--cc-s) - .59px)) 1px,close);
--ring: shape(evenodd from calc(0px + var(--cc) + var(--cr)) 0px,line to calc(100% - 0px - var(--cr)) 0px,curve to calc(100% - 0px) calc(0px + var(--cr)) with calc(100% - 0px) 0px,line to calc(100% - 0px) calc(100% - 0px - var(--cc) - var(--ck)),curve to calc(100% - 0px - var(--ck)) calc(100% - 0px - var(--cc) + var(--ck)) with calc(100% - 0px) calc(100% - 0px - var(--cc)),line to calc(100% - 0px - var(--cc) + var(--ck)) calc(100% - 0px - var(--ck)),curve to calc(100% - 0px - var(--cc) - var(--cr)) calc(100% - 0px) with calc(100% - 0px - var(--cc)) calc(100% - 0px),line to calc(0px + var(--cr)) calc(100% - 0px),curve to 0px calc(100% - 0px - var(--cr)) with 0px calc(100% - 0px),line to 0px calc(0px + var(--cc) + var(--ck)),curve to calc(0px + var(--ck)) calc(0px + var(--cc) - var(--ck)) with 0px calc(0px + var(--cc)),line to calc(0px + var(--cc) - var(--ck)) calc(0px + var(--ck)),curve to calc(0px + var(--cc) + var(--cr)) 0px with calc(0px + var(--cc)) 0px,close,move to calc(.5px + calc(var(--cc) - .29px) + calc(var(--cr) - .21px)) .5px,line to calc(100% - .5px - calc(var(--cr) - .5px)) .5px,curve to calc(100% - .5px) calc(.5px + calc(var(--cr) - .5px)) with calc(100% - .5px) .5px,line to calc(100% - .5px) calc(100% - .5px - calc(var(--cc) - .29px) - calc(var(--ck) - .15px)),curve to calc(100% - .5px - calc(var(--ck) - .15px)) calc(100% - .5px - calc(var(--cc) - .29px) + calc(var(--ck) - .15px)) with calc(100% - .5px) calc(100% - .5px - calc(var(--cc) - .29px)),line to calc(100% - .5px - calc(var(--cc) - .29px) + calc(var(--ck) - .15px)) calc(100% - .5px - calc(var(--ck) - .15px)),curve to calc(100% - .5px - calc(var(--cc) - .29px) - calc(var(--cr) - .21px)) calc(100% - .5px) with calc(100% - .5px - calc(var(--cc) - .29px)) calc(100% - .5px),line to calc(.5px + calc(var(--cr) - .5px)) calc(100% - .5px),curve to .5px calc(100% - .5px - calc(var(--cr) - .5px)) with .5px calc(100% - .5px),line to .5px calc(.5px + calc(var(--cc) - .29px) + calc(var(--ck) - .15px)),curve to calc(.5px + calc(var(--ck) - .15px)) calc(.5px + calc(var(--cc) - .29px) - calc(var(--ck) - .15px)) with .5px calc(.5px + calc(var(--cc) - .29px)),line to calc(.5px + calc(var(--cc) - .29px) - calc(var(--ck) - .15px)) calc(.5px + calc(var(--ck) - .15px)),curve to calc(.5px + calc(var(--cc) - .29px) + calc(var(--cr) - .21px)) .5px with calc(.5px + calc(var(--cc) - .29px)) .5px,close);
--ring-l: shape(evenodd from calc(0px + var(--cc-l) + var(--cr)) 0px,line to calc(100% - 0px - var(--cr)) 0px,curve to calc(100% - 0px) calc(0px + var(--cr)) with calc(100% - 0px) 0px,line to calc(100% - 0px) calc(100% - 0px - var(--cc-l) - var(--ck)),curve to calc(100% - 0px - var(--ck)) calc(100% - 0px - var(--cc-l) + var(--ck)) with calc(100% - 0px) calc(100% - 0px - var(--cc-l)),line to calc(100% - 0px - var(--cc-l) + var(--ck)) calc(100% - 0px - var(--ck)),curve to calc(100% - 0px - var(--cc-l) - var(--cr)) calc(100% - 0px) with calc(100% - 0px - var(--cc-l)) calc(100% - 0px),line to calc(0px + var(--cr)) calc(100% - 0px),curve to 0px calc(100% - 0px - var(--cr)) with 0px calc(100% - 0px),line to 0px calc(0px + var(--cc-l) + var(--ck)),curve to calc(0px + var(--ck)) calc(0px + var(--cc-l) - var(--ck)) with 0px calc(0px + var(--cc-l)),line to calc(0px + var(--cc-l) - var(--ck)) calc(0px + var(--ck)),curve to calc(0px + var(--cc-l) + var(--cr)) 0px with calc(0px + var(--cc-l)) 0px,close,move to calc(.5px + calc(var(--cc-l) - .29px) + calc(var(--cr) - .21px)) .5px,line to calc(100% - .5px - calc(var(--cr) - .5px)) .5px,curve to calc(100% - .5px) calc(.5px + calc(var(--cr) - .5px)) with calc(100% - .5px) .5px,line to calc(100% - .5px) calc(100% - .5px - calc(var(--cc-l) - .29px) - calc(var(--ck) - .15px)),curve to calc(100% - .5px - calc(var(--ck) - .15px)) calc(100% - .5px - calc(var(--cc-l) - .29px) + calc(var(--ck) - .15px)) with calc(100% - .5px) calc(100% - .5px - calc(var(--cc-l) - .29px)),line to calc(100% - .5px - calc(var(--cc-l) - .29px) + calc(var(--ck) - .15px)) calc(100% - .5px - calc(var(--ck) - .15px)),curve to calc(100% - .5px - calc(var(--cc-l) - .29px) - calc(var(--cr) - .21px)) calc(100% - .5px) with calc(100% - .5px - calc(var(--cc-l) - .29px)) calc(100% - .5px),line to calc(.5px + calc(var(--cr) - .5px)) calc(100% - .5px),curve to .5px calc(100% - .5px - calc(var(--cr) - .5px)) with .5px calc(100% - .5px),line to .5px calc(.5px + calc(var(--cc-l) - .29px) + calc(var(--ck) - .15px)),curve to calc(.5px + calc(var(--ck) - .15px)) calc(.5px + calc(var(--cc-l) - .29px) - calc(var(--ck) - .15px)) with .5px calc(.5px + calc(var(--cc-l) - .29px)),line to calc(.5px + calc(var(--cc-l) - .29px) - calc(var(--ck) - .15px)) calc(.5px + calc(var(--ck) - .15px)),curve to calc(.5px + calc(var(--cc-l) - .29px) + calc(var(--cr) - .21px)) .5px with calc(.5px + calc(var(--cc-l) - .29px)) .5px,close);
--pl-bg: radial-gradient(90% 90% at 18% 10%,#FF3A2E 0%,rgba(236,30,40,.85) 35%,rgba(236,30,40,0) 75%),radial-gradient(90% 90% at 90% 100%,#2CC2B5 0%,rgba(36,170,160,.8) 35%,rgba(36,170,160,0) 78%),#4A1820;
}
@media (max-width: 640px) { :root { --cc-l: 13px; } }
/* ================= HERO: opsi key visual XSERIES (prototipe, ?hero=0|a|b|c|d) =================
DNA dari KV & feed IG XS-3: hitam pekat, cahaya teal dari kiri + merah dari kanan, lockup X cyan + badge "3" merah,
condensed miring, bahasa kartu remi (rank + X), kerumunan pemain. */
.hero-media { position: absolute; inset: 0; }
.hero-grade, .hero-beams, .hv-b, .hv-c, .hero-idx, .lockup { display: none; }
.hero-id { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
body:not([data-hero="0"]) .lockup { display: inline-flex; }
.lockup { align-items: stretch; gap: 7px; height: 34px; }
.lockup img { height: 100%; width: auto; padding: 3px 0; }
.lockup b { display: grid; place-items: center; min-width: 30px; padding: 2px 7px 0; background: var(--red); color: #fff; font: 700 32px/1 var(--dh); clip-path: var(--chamf-s); }
.hero-copy, .hero-title { z-index: 3; }
/* cahaya panggung: berkas teal dari kiri atas, merah dari kanan atas, pantulan lantai (blur, tanpa tepi keras) */
.hero-beams { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.hero-beams i { position: absolute; display: block; }
.bm-t, .bm-r { top: -35%; width: 75%; height: 150%; filter: blur(28px); -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent); }
.bm-t { left: -30%; background: repeating-conic-gradient(from 120deg at 50% 22%, rgba(0,255,239,0) 0deg, rgba(0,255,239,.62) 5deg, rgba(0,255,239,0) 11deg, rgba(0,255,239,0) 19deg); }
.bm-r { right: -30%; background: repeating-conic-gradient(from 135deg at 50% 22%, rgba(255,40,40,0) 0deg, rgba(255,40,40,.66) 5deg, rgba(255,40,40,0) 11deg, rgba(255,40,40,0) 19deg); }
.bm-f { inset: auto 0 0; height: 55%; background: radial-gradient(45% 70% at 12% 100%, rgba(0,255,239,.32), transparent 70%), radial-gradient(45% 70% at 88% 100%, rgba(255,34,34,.38), transparent 70%); }
/* indeks kartu remi di sudut: hero = kartu As */
.hero-idx { position: absolute; z-index: 4; left: var(--gut); top: 100px; flex-direction: column; align-items: center; gap: 5px; color: var(--pri); filter: drop-shadow(0 0 14px rgba(0,255,239,.6)); pointer-events: none; }
.hero-idx b { font: 400 64px/.86 Rye, Georgia, serif; }
.hero-idx i { width: 44px; height: 30px; background: currentColor; -webkit-mask: url(../img/hero-x.svg) center/contain no-repeat; mask: url(../img/hero-x.svg) center/contain no-repeat; }
.hero-idx2 { left: auto; top: 100px; right: var(--gut); color: var(--red); rotate: 180deg; filter: drop-shadow(0 0 14px rgba(255,34,34,.65)); }
body[data-hero="a"] .hero-idx, body[data-hero="b"] .hero-idx, body[data-hero="d"] .hero-idx { display: flex; }
/* A · Split light: showreel hitam-putih, diwarnai teal kiri / merah kanan seperti KV tiket */
body[data-hero="a"] .hero-video { filter: grayscale(1) contrast(1.3) brightness(.78); }
body[data-hero="a"] .hero-grade { display: block; position: absolute; inset: 0; mix-blend-mode: color; background: linear-gradient(90deg, #00F0E2 0%, #13B9B0 26%, #3a3a3a 50%, #E3161F 74%, #FF2626 100%); }
body[data-hero="a"] .hero-beams, body[data-hero="b"] .hero-beams, body[data-hero="c"] .hero-beams { display: block; }
/* B · The squad: kerumunan pemain di depan wordmark raksasa */
body[data-hero="b"] .hero-video, body[data-hero="c"] .hero-video { display: none; }
body[data-hero="b"] .hv-b { display: block; position: absolute; inset: 0; }
.hb-word { position: absolute; left: 50%; top: 92px; width: 94vw; transform: translateX(-50%); opacity: .16; }
.hb-squad { position: absolute; left: 50%; bottom: 0; height: 90%; width: auto; max-width: none; transform: translateX(-50%); -webkit-mask: linear-gradient(to bottom, #000 52%, transparent 86%); mask: linear-gradient(to bottom, #000 52%, transparent 86%); }
body[data-hero="b"] .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 55%, rgba(0,0,0,.8) 84%, #000 100%); }
/* C · Ace reveal: satu kartu reveal throne besar, dua kartu di belakang */
body[data-hero="c"] .hv-c { display: block; position: absolute; z-index: 4; left: 50%; top: 92px; --ch: min(calc(100svh - 270px), 600px); width: calc(var(--ch) * .8); height: var(--ch); transform: translateX(-50%); pointer-events: none; }
.hc-card { position: absolute; inset: 0; display: block; container-type: inline-size; color: #fff; border-radius: 8px; box-shadow: 0 50px 90px rgba(0,0,0,.75), 0 0 70px rgba(255,40,40,.22), 0 0 0 1px rgba(255,255,255,.08); }
.hc-back { position: absolute; top: 8%; width: 82%; aspect-ratio: 4/5; border-radius: 8px; background: #000 center/cover no-repeat; filter: brightness(.38) saturate(.8) blur(1.5px); box-shadow: 0 30px 60px rgba(0,0,0,.7); transition: background-image .4s; }
.hc-l { left: -46%; rotate: -9deg; }
.hc-r { right: -46%; rotate: 9deg; }
body[data-hero="c"] .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.25) 70%, #000 100%); }
/* D · X window: showreel di dalam X raksasa, bayangan cyan/merah bergeser (glitch) */
body[data-hero="d"] .hero-media, body[data-hero="d"] .hero-grade { inset: auto; left: 50%; top: 96px; height: calc(100% - 96px - 17vw * .8 - 2.2vw - 40px); aspect-ratio: 43.8/29.4; transform: translateX(-50%); }
body[data-hero="d"] .hero-media { z-index: 2; -webkit-mask: url(../img/hero-x.svg) center/contain no-repeat; mask: url(../img/hero-x.svg) center/contain no-repeat; }
body[data-hero="d"] .hero-video { filter: contrast(1.1) saturate(1.1); }
body[data-hero="d"] .hero-grade { display: block; position: absolute; z-index: 1; filter: drop-shadow(0 0 40px rgba(0,255,239,.28)); }
body[data-hero="d"] .hero-grade::before, body[data-hero="d"] .hero-grade::after { content: ""; position: absolute; inset: 0; -webkit-mask: url(../img/hero-x.svg) center/contain no-repeat; mask: url(../img/hero-x.svg) center/contain no-repeat; }
body[data-hero="d"] .hero-grade::before { background: var(--pri); translate: -12px -5px; animation: xg-a 6s steps(1) infinite; }
body[data-hero="d"] .hero-grade::after { background: var(--red); translate: 12px 5px; animation: xg-b 6s steps(1) infinite; }
@keyframes xg-a { 0%, 88%, 100% { translate: -12px -5px } 90% { translate: -26px 2px } 93% { translate: -6px -9px } 96% { translate: -18px -3px } }
@keyframes xg-b { 0%, 88%, 100% { translate: 12px 5px } 90% { translate: 24px -3px } 93% { translate: 5px 9px } 96% { translate: 18px 2px } }
body[data-hero="d"] .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,0) 60%, #000 100%); }
@media (prefers-reduced-motion: reduce) { body[data-hero="d"] .hero-grade::before, body[data-hero="d"] .hero-grade::after { animation: none; } }
/* toggle opsi hero: kiri bawah */
.proto-hero { right: auto; left: 18px; }
@media (max-width: 1024px) {
.proto-hero { bottom: 70px; }
}
@media (max-width: 640px) {
.proto-hero { left: 8px; right: 8px; bottom: 56px; }
.lockup { height: 26px; }
.lockup b { font-size: 24px; min-width: 24px; }
.hero-idx { top: 80px; left: 16px; }
.hero-idx b { font-size: 44px; }
.hero-idx i { width: 30px; height: 20px; }
.hero-idx2 { right: 16px; left: auto; }
.hb-word { top: 84px; }
.hb-squad { height: 62%; bottom: 22%; }
body[data-hero="c"] .hv-c { top: 84px; --ch: min(46svh, 400px); }
body[data-hero="c"] .hero { height: auto; padding-top: calc(84px + min(46svh, 400px) + 14px); }
.hc-l { left: -30%; } .hc-r { right: -30%; }
body[data-hero="d"] .hero-media, body[data-hero="d"] .hero-grade { top: 120px; height: auto; width: 92vw; }
}
/* Lede stays readable over the key visual; toggles fade so the title shows */
body:not([data-hero="0"]) .hero-lede { padding: 14px 18px; background: rgba(0,0,0,.58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); clip-path: var(--chamf-s); }
.proto { opacity: .5; transition: opacity .2s; }
.proto:hover, .proto:focus-within { opacity: 1; }
/* E · Squad + light: showreel split-light (A) sebagai panggung, kerumunan pemain (B) di depan.
Video digelapkan + halo hitam di belakang pemain supaya wajah tetap jadi fokus; papan nama bawaan foto di-fade. */
body[data-hero="e"] .hero-video { filter: grayscale(1) contrast(1.25) brightness(.5); }
body[data-hero="e"] .hero-grade { display: block; position: absolute; inset: 0; mix-blend-mode: color; background: linear-gradient(90deg, #00F0E2 0%, #13B9B0 26%, #3a3a3a 50%, #E3161F 74%, #FF2626 100%); }
body[data-hero="e"] .hero-beams, body[data-hero="e"] .hero-idx { display: block; }
body[data-hero="e"] .hero-idx { display: flex; }
body[data-hero="e"] .hv-b { display: block; position: absolute; inset: 0; }
body[data-hero="e"] .hb-word { display: none; }
body[data-hero="e"] .hv-b::before { content: ""; position: absolute; left: 50%; bottom: 0; width: min(1200px, 96vw); height: 100%; transform: translateX(-50%); background: radial-gradient(46% 52% at 50% 56%, rgba(0,0,0,.82), rgba(0,0,0,.45) 62%, transparent 82%); }
body[data-hero="e"] .hb-squad { height: 82%; bottom: 3%; filter: drop-shadow(-12px 0 26px rgba(0,255,239,.4)) drop-shadow(12px 0 26px rgba(255,34,34,.42)); -webkit-mask: linear-gradient(to bottom, #000 46%, transparent 75%); mask: linear-gradient(to bottom, #000 46%, transparent 75%); }
body[data-hero="e"] .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 52%, rgba(0,0,0,.82) 82%, #000 100%); }
@media (max-width: 640px) {
body[data-hero="e"] .hb-squad { height: 58%; bottom: 25%; }
body[data-hero="e"] .hv-b::before { height: 80%; bottom: 20%; }
}
/* E: baris copy pindah ke bawah judul (di atas hitam) supaya tidak menutup wajah pemain */
body[data-hero="e"] .hero-title { order: 1; padding-bottom: 1.4vw; }
body[data-hero="e"] .hero-copy { order: 2; align-items: center; margin: 0 0 28px; }
body[data-hero="e"] .hero-id { flex-direction: row; align-items: center; gap: 18px; }
body[data-hero="e"] .hero-lede { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; clip-path: none; max-width: 460px; color: rgba(255,255,255,.78); }
body[data-hero="e"] .hb-squad { bottom: 14%; }
body[data-hero="e"] .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 44%, rgba(0,0,0,.85) 74%, #000 88%); }
@media (max-width: 640px) {
body[data-hero="e"] .hero-id { flex-direction: column; align-items: flex-start; gap: 10px; }
body[data-hero="e"] .hero-copy { align-items: flex-start; margin-bottom: 64px; }
body[data-hero="e"] .hb-squad { bottom: 36%; }
}
/* E: kepala tidak terpotong nav; sisi kanan foto (terpotong keras di sumber) di-fade kiri-kanan */
body[data-hero="e"] .hb-squad { height: 72%; bottom: 14%; filter: none;
-webkit-mask: linear-gradient(to bottom, #000 50%, transparent 80%), linear-gradient(90deg, transparent 0, #000 9%, #000 89%, transparent 100%); -webkit-mask-composite: source-in;
mask: linear-gradient(to bottom, #000 50%, transparent 80%), linear-gradient(90deg, transparent 0, #000 9%, #000 89%, transparent 100%); mask-composite: intersect; }
@media (max-width: 640px) { body[data-hero="e"] .hb-squad { height: 50%; bottom: 36%; } }
/* E (rev): squad lebih kecil, utuh di atas judul; fade selesai sebelum judul, sisi kiri-kanan lebih lembut */
body[data-hero="e"] .hb-squad { height: 52%; bottom: 36%;
-webkit-mask: linear-gradient(to bottom, #000 58%, transparent 80%), linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in;
mask: linear-gradient(to bottom, #000 58%, transparent 80%), linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
body[data-hero="e"] .hv-b::before { background: radial-gradient(30% 36% at 50% 34%, rgba(0,0,0,.8), rgba(0,0,0,.4) 60%, transparent 85%); }
@media (max-width: 640px) { body[data-hero="e"] .hb-squad { height: 40%; bottom: 44%; } }
body[data-hero="e"] .hero-video { filter: grayscale(1) contrast(1.2) brightness(.4); }
body[data-hero="e"] .hv-b::before { background: radial-gradient(36% 46% at 50% 34%, rgba(0,0,0,.85), rgba(0,0,0,.45) 60%, transparent 88%); }
/* Announcement bar selalu ada (40px): geser elemen hero yang menempel di atas */
.hero-idx, .hero-idx2 { top: 140px; }
body[data-hero="c"] .hv-c { top: 132px; }
body[data-hero="d"] .hero-media, body[data-hero="d"] .hero-grade { top: 136px; height: calc(100% - 136px - 17vw * .8 - 2.2vw - 40px); }
@media (max-width: 640px) {
.hero-idx, .hero-idx2 { top: 120px; }
.hb-word { top: 124px; }
body[data-hero="c"] .hv-c { top: 124px; }
body[data-hero="c"] .hero { padding-top: calc(124px + min(46svh, 400px) + 14px); }
.livebar .lb-cd { display: none; }
}
.livebar .lb-short { display: none; }
.livebar .lb-score, .livebar .lb-cta { white-space: nowrap; }
@media (max-width: 640px) {
.livebar .lb-long { display: none; }
.livebar .lb-short { display: inline; }
.livebar .lb-score { min-width: 0; overflow: hidden; }
.livebar .lb-cta { flex: none; font-size: 14px; padding: 0 10px; }
}
.menu-sheet { padding-top: 136px; }
/* Hero E: logo + deskripsi di atas judul, judul besar turun sampai bawah hero */
body[data-hero="e"] .hero-copy { order: 1; margin: 0 0 1.6vw; }
body[data-hero="e"] .hero-title { order: 2; padding-bottom: 0; margin-bottom: -.035em; }
@media (max-width: 640px) {
body[data-hero="e"] .hero-copy { margin-bottom: 16px; }
}
/* ---------- Ikon panah (SVG, pengganti simbol teks ↗ → ← ↓) ---------- */
.ic { display: inline-block; flex: none; width: .95em; height: .95em; margin-left: .38em; vertical-align: -.1em; background: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.icon-btn .ic { margin: 0; width: 18px; height: 18px; }
.ic-ne { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M6 18 17 7M8.5 6H18v9.5'/%3E%3C/svg%3E"); }
.ic-r { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-l { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M20 12H5M10.5 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ic-d { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M12 4v15M6 13.5l6 6 6-6'/%3E%3C/svg%3E"); }
.btn .ic, .more .ic { margin-left: -2px; }
.btn .ic { width: .8em; height: .8em; }
.livebar .lb-cta .ic { width: .8em; height: .8em; margin-left: .3em; }
/* Font body: Schibsted Grotesk (padanan gratis RJ Schema, ref. buildaustralia.com; 13 Nov), huruf besar semua */
body, input, button, textarea, select { text-transform: uppercase; letter-spacing: .02em; }
input::placeholder { text-transform: uppercase; }
/* Hero: logo + tagline dihapus, deskripsi saja di kanan atas judul */
body[data-hero="e"] .hero-copy { justify-content: flex-end; }
/* ---------- Kartu tim (sama dengan Homepage v2): logo jadi bintang kartu, nama di dasar ---------- */
.tms4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tm-c { --tc: var(--pri); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 3/4; padding: 56px 0 72px; clip-path: var(--chamf-l); overflow: hidden; isolation: isolate;
background: radial-gradient(70% 50% at 50% 40%, color-mix(in srgb, var(--tc) 50%, transparent), transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--tc) 26%, #0D0D10), #0D0D10 85%); }
.tm-c::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--ln); clip-path: var(--ring-l); transition: background .2s; }
.tm-c:hover::after { background: color-mix(in srgb, var(--tc) 75%, transparent); }
.tm-wm { position: absolute; z-index: -1; left: 0; top: calc(50% - 8px); width: 100%; max-width: none; aspect-ratio: 1; object-fit: contain; transform: translateY(-50%); opacity: .1; pointer-events: none; }
.tm-lg { width: 58%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 28px color-mix(in srgb, var(--tc) 70%, transparent)) drop-shadow(0 12px 22px rgba(0,0,0,.6)); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.tm-c:hover .tm-lg { transform: scale(1.05) rotate(-3deg); }
.tm-ft { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 16px 12px 26px; }
.tm-n { max-width: 100%; color: #fff; font: 700 34px/.88 var(--dh); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-ch, .tm-ru { --sk: 6px; position: absolute; z-index: 3; left: 16px; top: 14px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 12px; font: 700 12px/1 var(--body); letter-spacing: 0;
clip-path: polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); }
.tm-ch { background: var(--gold); color: #000; }
.tm-ru { background: rgba(0,0,0,.6); color: #E4E4E8; }
.tm-ch .ic { margin: 0; width: 11px; height: 11px; }
.tm-go { position: absolute; z-index: 3; right: 12px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; opacity: .8; transition: background .2s, opacity .2s; }
.tm-go .ic { margin: 0; width: 15px; height: 15px; }
.tm-c:hover .tm-go { background: var(--tc); opacity: 1; }
.ic-chev { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E"); }
.ic-trophy { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h3v3a4 4 0 0 1-4 4h-.3A5 5 0 0 1 13 14.9V18h3v3H8v-3h3v-3.1A5 5 0 0 1 8.3 12H8a4 4 0 0 1-4-4V5h3V3Zm0 4H6v1a2 2 0 0 0 1 1.7V7Zm10 0v2.7A2 2 0 0 0 18 8V7h-1Z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .tm-lg { transition: none; } }
@media (max-width: 1024px) { .tms4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
.tms4 { gap: 8px; }
.tm-c { padding: 42px 0 46px; }
.tm-lg { width: 64%; }
.tm-wm { top: calc(50% - 2px); }
.tm-ft { padding: 12px 9px 15px; }
.tm-n { font-size: 22px; }
.tm-ch, .tm-ru { left: 8px; top: 8px; font-size: 11px; padding: 0 8px; height: 20px; }
.tm-go { right: 8px; top: 8px; width: 24px; height: 24px; }
}
/* Masa: tombol dan baris aksi yang ikut state (data-show bisa berisi beberapa masa) */
body[data-state="pre"] :is(.btn, .hero-skip, .hero-meta)[data-show~="pre"],
body[data-state="near"] :is(.btn, .hero-skip, .hero-meta)[data-show~="near"],
body[data-state="live"] :is(.btn, .hero-skip, .hero-meta)[data-show~="live"],
body[data-state="between"] :is(.btn, .hero-skip, .hero-meta)[data-show~="between"] { display: inline-flex; }
body[data-state="pre"] .hero-acts[data-show~="pre"],
body[data-state="near"] .hero-acts[data-show~="near"],
body[data-state="live"] .hero-acts[data-show~="live"],
body[data-state="between"] .hero-acts[data-show~="between"] { display: flex; }
.sheet-acts { display: flex; flex-direction: column; gap: 10px; }
/* Hero: meta edisi + kalimat + aksi, di kanan atas judul */
.hero-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 460px; }
.hero-meta { align-items: center; gap: 10px; color: #fff; }
.hero-meta i { width: 4px; height: 4px; background: var(--pri); transform: rotate(45deg); }
.hero-meta .live-dot { background: var(--live); }
body[data-hero="e"] .hero-info .hero-lede { max-width: none; }
.hero-lede b { color: var(--gold); font-weight: 700; }
.hero-acts { flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.hero-skip { align-items: center; font: 700 12.5px/1 var(--body); letter-spacing: .04em; color: var(--pri); }
.hero-skip:hover { color: #fff; }
.hero-skip .ic { width: .85em; height: .85em; }
@media (max-width: 1024px) { .nav-shop { display: none; } }
@media (max-width: 640px) {
.hero-info { gap: 12px; max-width: none; }
.hero-meta { font-size: 11px; gap: 8px; }
.hero-acts .btn { height: 40px; }
}
.hero-meta { white-space: nowrap; }
@media (max-width: 640px) { .hm-city { display: none; } }
/* Feature video ikut masa: tetap flex */
body[data-state="pre"] .feature[data-show~="pre"],
body[data-state="near"] .feature[data-show~="near"],
body[data-state="live"] .feature[data-show~="live"],
body[data-state="between"] .feature[data-show~="between"] { display: flex; }
.feature-copy .tag { margin-right: 8px; }
/* xBall hari-H: kartu aktif */
body[data-state="live"] .xb-now[data-show~="live"] { display: flex; }
.xb-now { position: relative; align-items: center; gap: 18px; margin: 0 0 56px; padding: 16px 22px; background: color-mix(in srgb, var(--gold) 10%, var(--s1)); clip-path: var(--chamf-l); }
.xb-now::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--gold) 55%, transparent); clip-path: var(--ring-l); }
.xb-card { font: 700 30px/1 var(--dh); color: var(--gold); text-transform: uppercase; }
.xb-what { flex: 1; color: #E4E4E8; }
.xb-left { color: var(--gold); }
.step-table .tr .tag { display: none; }
body[data-state="live"] .step-table .tr.is-on { grid-template-columns: 1fr 1.6fr auto; background: color-mix(in srgb, var(--gold) 14%, var(--s1)); }
body[data-state="live"] .step-table .tr.is-on span:first-child { color: var(--gold); }
body[data-state="live"] .step-table .tr.is-on .tag { display: inline-flex; }
/* Tim: Ace dan King */
.tm-c { padding-bottom: 96px; }
.tm-ft { flex-direction: column; align-items: center; gap: 10px; }
.tm-ak { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font: 600 12px/1 var(--body); color: #D6D6DB; }
.tm-ak > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tm-ak i { display: grid; place-items: center; width: 18px; height: 18px; font: 400 12px/1 Rye, Georgia, serif; font-style: normal; color: #000; background: color-mix(in srgb, var(--tc) 70%, #fff); clip-path: var(--chamf-s); }
.row-note b { color: var(--gold); font-weight: 700; }
/* Info edisi hari-H: jadwal per hari */
.day-h { margin: 32px 0 10px; color: #fff; }
.interlude [data-show~="live"] .games .tag { justify-self: start; }
/* Pemain: top skor (hari-H) dan penghargaan (antar-edisi) */
.leaders { margin: 0 0 40px; }
.leaders .eyebrow { margin-bottom: 14px; }
.lead-t .tr { grid-template-columns: 40px 1.2fr 1fr 70px; }
.lead-t b { font: 700 24px/1 var(--dh); text-transform: uppercase; }
.lead-t .mu { display: inline-flex; align-items: center; gap: 10px; }
.lead-t .mu img { width: 26px; height: 26px; }
.lt-g { justify-self: end; font: 700 28px/1 var(--dh); color: var(--pri); }
.lead-note { margin-top: 10px; }
.awards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aw { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--s1); clip-path: var(--chamf); }
.aw b { font: 700 34px/.95 var(--dh); text-transform: uppercase; color: var(--gold); }
@media (max-width: 1024px) { .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
.xb-now { flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; margin-bottom: 36px; }
.xb-what { flex-basis: 100%; order: 3; font-size: 14px; }
.xb-card { font-size: 24px; }
.xb-left { margin-left: auto; }
.tm-c { padding-bottom: 62px; }
.tm-ft { gap: 6px; }
.tm-ak { flex-direction: column; gap: 4px; font-size: 10px; }
.tm-ak i { width: 14px; height: 14px; font-size: 9px; }
.lead-t .tr { grid-template-columns: 24px 1fr 44px; }
.lead-t .tr > :nth-child(3) { display: none; }
.lead-t b { font-size: 20px; }
.aw { padding: 14px; }
.aw b { font-size: 26px; }
}
.feature[data-show] { display: none; }
.xb-now { text-align: left; }
.tag { text-transform: uppercase; }
/* Mobile: moments table — beri ruang ke kolom moment */
@media (max-width: 640px) {
.interlude .moments .tr { grid-template-columns: 64px 1fr 40px; gap: 12px; }
.interlude .moments .tr.th { display: none; }
.interlude .moments .tr > :nth-child(2) { font-size: 13px; line-height: 1.4; }
.games .mu { flex-wrap: wrap; row-gap: 4px; }
}
/* Hero E: kerumunan pemain dihapus — cukup video + grade warna + beams */
body[data-hero="e"] .hv-b { display: none; }
/* Nav links: Dharma Gothic, sama dengan tombol */
.nav-links a { font: 700 19px/1 var(--dh); text-transform: uppercase; letter-spacing: .02em; padding: 0 14px; }
@media (max-width: 1439px) { .nav-links a { font-size: 17px; padding: 0 10px; } }
/* Hero E: blok info di tengah layar (desktop/tablet); HP tetap rata kiri */
@media (min-width: 641px) {
body[data-hero="e"] .hero-copy { justify-content: center; }
body[data-hero="e"] .hero-info { align-items: center; text-align: center; max-width: 620px; }
body[data-hero="e"] .hero-acts { justify-content: center; }
}
/* Hero E, lebih kalem: tanpa berkas cahaya. Video hitam-putih, tint tosca/merah hanya di tepi,
tengah tetap netral; vignette + grain halus supaya terasa sinematik, bukan neon */
body[data-hero="e"] .hero-beams { display: none; }
body[data-hero="e"] .hero-video { filter: grayscale(1) contrast(1.15) brightness(.55); }
body[data-hero="e"] .hero-grade { opacity: .7; background: linear-gradient(90deg, #00CFC4 0%, rgba(0,207,196,.35) 22%, #444 42%, #444 58%, rgba(214,24,30,.35) 78%, #D6181E 100%); }
body[data-hero="e"] .hero-grade::after { content: ""; position: absolute; inset: 0; mix-blend-mode: normal; background: url("../img/grain.png"); opacity: .1; }
body[data-hero="e"] .hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.6) 100%); }
/* Hero E: video berwarna (bukan hitam-putih). Tint tosca/merah hanya di tepi, tengah warna asli */
body[data-hero="e"] .hero-video { filter: saturate(.9) contrast(1.08) brightness(.62); }
body[data-hero="e"] .hero-grade { opacity: .55; mix-blend-mode: color; background: linear-gradient(90deg, #00CFC4 0%, rgba(0,207,196,0) 30%, rgba(214,24,30,0) 70%, #D6181E 100%); }
/* Hero E: video lebih terang; gelap hanya di bawah (untuk judul) dan tipis di belakang blok info */
body[data-hero="e"] .hero-video { filter: saturate(1) contrast(1.05) brightness(.88); }
body[data-hero="e"] .hero-media::after { background: radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.4) 100%); }
body[data-hero="e"] .hero-shade { background:
radial-gradient(38% 22% at 50% 62%, rgba(0,0,0,.45), transparent 100%),
linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 46%, rgba(0,0,0,.7) 72%, #000 90%); }
/* Hero E: judul besar persis di bawah navbar, blok info turun ke bawah layar */
body[data-hero="e"] .hero { justify-content: space-between; }
body[data-hero="e"] .hero-title { order: 1; margin: 76px 0 0; padding-bottom: 0; }
body[data-state="live"][data-hero="e"] .hero-title { margin-top: 116px; }
body[data-hero="e"] .hero-copy { order: 2; margin: 0 0 40px; }
body[data-hero="e"] .hero-shade { background:
linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 28%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 58%, rgba(0,0,0,.75) 85%, rgba(0,0,0,.9) 100%); }
/* indeks kartu remi pindah ke sudut bawah supaya tidak menabrak judul */
body[data-hero="e"] .hero-idx { top: auto; bottom: 40px; }
body[data-hero="e"] .hero-idx2 { top: auto; bottom: 40px; }
@media (max-width: 640px) {
body[data-hero="e"] .hero-title { margin-top: 72px; }
body[data-state="live"][data-hero="e"] .hero-title { margin-top: 112px; }
body[data-hero="e"] .hero-copy { margin-bottom: 28px; }
body[data-hero="e"] .hero-idx, body[data-hero="e"] .hero-idx2 { display: none; }
}
/* Hero E: margin kiri-kanan judul & blok info = padding navbar (18px; 12px di HP) */
body[data-hero="e"] .hero-title, body[data-hero="e"] .hero-copy { padding-left: 18px; padding-right: 18px; }
body[data-hero="e"] .hero-idx { left: 18px; } body[data-hero="e"] .hero-idx2 { left: auto; right: 18px; }
@media (max-width: 640px) {
body[data-hero="e"] .hero-title, body[data-hero="e"] .hero-copy { padding-left: 12px; padding-right: 12px; }
}
/* Body ala loveandmoney.com: grotesk tebal, uppercase, spasi huruf normal */
body { font-weight: 600; }
body, input, button, textarea, select { letter-spacing: 0; }
/* Hero: info cukup headline (tanpa baris tanggal/venue XSERIES-3), headline diperbesar */
body[data-hero="e"] .hero-info .hero-lede { font-size: clamp(22px, 2.6vw, 38px); line-height: 1.15; font-weight: 700; color: #fff; max-width: 900px; text-wrap: balance; }
body[data-hero="e"] .hero-info { gap: 22px; max-width: 960px !important; }
@media (max-width: 640px) { body[data-hero="e"] .hero-info .hero-lede { font-size: 22px; } }
/* Toggle State (alat prototipe): kalem, tidak menyaingi desain. Aktif = abu terang, bukan cyan */
.proto { background: rgba(14,14,17,.72); padding: 3px; opacity: .45; }
.proto .mono { color: rgba(255,255,255,.4); font-size: 9.5px; }
.proto button { height: 26px; padding: 0 9px; font-size: 11px; color: rgba(255,255,255,.45); }
.proto button:hover { color: #fff; }
.proto button.on { background: rgba(255,255,255,.12); color: #fff; }
/* Headline hero pakai Dharma Gothic (lebih sempit, jadi ukurannya dinaikkan) */
body[data-hero="e"] .hero-info .hero-lede { font-family: var(--dh); font-weight: 700; font-size: clamp(34px, 3.6vw, 56px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
@media (max-width: 640px) { body[data-hero="e"] .hero-info .hero-lede { font-size: 34px; } }
/* Judul hero: teal → merah saja (tanpa warna lain), diisi tekstur urat listrik X-card. Urat ikut warna gradasi (multiply), dasar huruf diredupkan sedikit (abu #a8a8a8) supaya urat menyala */
body[data-hero="e"] .hero-title .w { display: inline-block; transform: skewX(-12deg); transform-origin: 0 var(--base, 80%); background: linear-gradient(90deg in oklab, #00FFEF 0%, #00FFEF 18%, #007A7E 44%, #8E0E14 56%, #FF2222 82%, #FF2222 100%) no-repeat, url(../img/cards/tex-mono.webp) 0 0 / 420px auto repeat, linear-gradient(#a8a8a8, #a8a8a8); background-blend-mode: multiply, screen, normal; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* Navbar: logo di tengah (menu kiri, aksi kanan). HP: burger kiri, logo tengah, tombol utama kanan */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 12px; }
.nav-left { justify-self: start; }
.nav-right { grid-column: 3; justify-self: end; }
.nav-logo { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); pointer-events: auto; }
/* Logo tengah butuh ruang: di bawah 1240px menu pindah ke burger */
@media (max-width: 1239px) {
.nav-links { display: none; }
.nav-burger { display: grid; }
}
@media (max-width: 640px) {
.nav-logo { top: 12px; padding: 0 10px; }
.nav-logo img { height: 16px; }
}
/* HP: label tombol utama dipendekkan supaya tidak menabrak logo */
@media (max-width: 480px) { .nav-x { display: none; } }
.nav-logo { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; clip-path: none; }
.btn .nav-x { margin-left: -4px; }
/* Hero E v2: judul besar di dasar hero, headline + tombol di tengah-tengah hero */
body[data-hero="e"] .hero { justify-content: flex-end; }
body[data-hero="e"] .hero-title { order: 2; margin: 0 0 calc(18px - var(--drop, 0px)); }
body[data-state="live"][data-hero="e"] .hero-title { margin-top: 0; }
body[data-hero="e"] .hero-copy { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; justify-content: center; }
body[data-state="live"][data-hero="e"] .hero-copy { top: calc(50% + 20px); }
body[data-hero="e"] .hero-shade { background:
radial-gradient(60% 34% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 100%),
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%); }
body[data-hero="e"] .hero-idx, body[data-hero="e"] .hero-idx2 { top: 96px; bottom: auto; }
body[data-state="live"][data-hero="e"] .hero-idx, body[data-state="live"][data-hero="e"] .hero-idx2 { top: 136px; }
@media (max-width: 640px) {
body[data-hero="e"] .hero-title { margin: 0 0 calc(12px - var(--drop, 0px)); }
body[data-hero="e"] .hero-copy { margin: 0; }
body[data-hero="e"] .hero-info { align-items: center; text-align: center; }
body[data-hero="e"] .hero-acts { justify-content: center; }
}
/* ---------- 12 Nov: deck 6 kartu di bawah "Futsal with a twist" (sama dengan homepage v2) ----------
Menggantikan langkah 01/02/03. Dua grup: 3 X-Card + 3 President Card. Gaya flip & peragaan di bawah = salinan css/xk-play.css homepage v2. */
.xball .xk-deck.xk-6.xbh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:64px;text-align:center}
.xbh .xk-grp{min-width:0}
.xbh .xk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:4px 0 10px}
.xbh .xk-c{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
@media (max-width:900px){
.xball .xk-deck.xk-6.xbh{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:40px}
.xbh .xk-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:168px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-right:calc(var(--gut) * -1);padding-right:var(--gut)}
.xbh .xk-row::-webkit-scrollbar{display:none}
.xbh .xk-fl{scroll-snap-align:start}
}
/* xBall: kartu cukup judul + satu baris; aturannya diperagakan oleh animasi kecil di kartu (12 Nov, "jangan kebanyakan text").
Kartu bergiliran main sendiri saat terlihat; hover, fokus atau tap memainkan kartu itu. Teks aturan lengkap tetap ada untuk pembaca layar. */
.xbh .xk-c{cursor:pointer;-webkit-tap-highlight-color:transparent}
.xbh .xk-c:focus-visible{outline:2px solid #fff;outline-offset:3px}
.xbh .xk-c .xk-x{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.xbh .xk-c .xk-art{position:relative;display:grid;place-items:center;width:78cqi;height:60cqi;margin:5cqi 0 2cqi;flex:none}
.xbh .xk-c .xk-ic{width:48cqi;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.xbh .xk-c.is-play .xk-ic{opacity:0;transform:scale(.8)}
.xbh .xk-cap{margin:auto 0 0;padding:0 7cqi;font:800 10.5cqi/1 var(--dh);text-transform:uppercase;letter-spacing:.02em;color:#fff;text-shadow:0 1px 3px #000}
.xbh .xk-c .xk-lg{margin:4cqi 0 9cqi}
/* jenis kartu di dalam kartu (pengganti label grup di atas deck) */
.xbh .xk-ty{margin:11.5cqi 0 0;font:800 7.4cqi/1 var(--dh);text-transform:uppercase;letter-spacing:.12em;color:#fff;opacity:.72}
.xbh .xk-c .xk-t{margin-top:2.4cqi}
.xbh .xk-c .xk-art{margin-top:3cqi}
/* panggung demo */
.xp{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.xk-c.is-play .xp{opacity:1;transition-delay:.12s}
.xp-b{position:absolute;inset:0 0 auto;height:16%;display:grid;place-items:center}
.xp-b b{grid-area:1/1;font:800 10cqi/1 var(--dh);letter-spacing:.04em;text-transform:uppercase;color:#fff;white-space:nowrap}
.xp-b .z{opacity:0;color:var(--c);text-shadow:0 0 3cqi color-mix(in srgb,var(--c) 60%,transparent)}
.xp-f{position:absolute;inset:22% 0 0;border:.55cqi solid rgba(255,255,255,.3);border-radius:2.4cqi;
background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 50% 0/.55cqi 100% no-repeat,radial-gradient(circle at 50% 50%,transparent 6.5cqi,rgba(255,255,255,.3) 6.8cqi,transparent 7.3cqi),rgba(0,0,0,.55)}
.xp-f::before,.xp-f::after{content:"";position:absolute;top:36%;height:28%;width:2.2cqi;border:.55cqi solid rgba(255,255,255,.45)}
.xp-f::before{left:-2.4cqi;border-right:0}
.xp-f::after{right:-2.4cqi;border-left:0}
.xp-f i{position:absolute;left:var(--x);top:var(--y);width:7cqi;height:7cqi;margin:-3.5cqi 0 0 -3.5cqi;border-radius:50%}
.xp-f .xm-us{background:var(--c);box-shadow:0 0 2.6cqi color-mix(in srgb,var(--c) 65%,transparent)}
.xp-f .xm-op{background:rgba(255,255,255,.62)}
.xp-f .xm-v{background:var(--gold);box-shadow:0 0 0 .8cqi rgba(0,0,0,.6),0 0 4cqi var(--gold)}
.xp-f .xm-sub{background:transparent;box-shadow:inset 0 0 0 1.1cqi var(--c),0 0 2.6cqi color-mix(in srgb,var(--c) 50%,transparent);opacity:0}
.xp-f .xm-nw{opacity:0}
.xp-f .xm-nw::after{content:"";position:absolute;inset:-2.4cqi;border-radius:50%;border:.6cqi solid var(--c);opacity:0}
.xp-f .xm-ball{position:absolute;left:42%;top:38%;width:4cqi;height:4cqi;margin:-2cqi 0 0 -2cqi;border-radius:50%;background:#fff;box-shadow:0 0 2cqi #fff;opacity:0}
.xp-pop{position:absolute;right:1cqi;top:16%;padding:1.6cqi 3cqi;border-radius:1.6cqi;background:var(--c);color:#000;font:800 11cqi/1 var(--dh);letter-spacing:.02em;opacity:0;transform:scale(.4) rotate(-8deg);box-shadow:0 0 5cqi color-mix(in srgb,var(--c) 70%,transparent)}
.xp-pop.gd{background:var(--gold);box-shadow:0 0 5cqi color-mix(in srgb,var(--gold) 70%,transparent)}
/* jam (The Last Breath) */
.xp-clk{position:absolute;inset:22% 4% 0;display:grid;place-items:center;border:.55cqi solid rgba(255,255,255,.3);border-radius:3cqi;background:rgba(0,0,0,.6)}
.xp-clk small{position:absolute;left:4cqi;top:3cqi;font:800 6cqi/1 var(--dh);color:rgba(255,255,255,.6)}
.xp-clk b{font:800 19cqi/1 var(--dh);font-variant-numeric:tabular-nums;letter-spacing:.03em;color:rgba(255,255,255,.55);transition:color .3s,text-shadow .3s}
.xp-clk.on b{color:var(--c);text-shadow:0 0 5cqi color-mix(in srgb,var(--c) 65%,transparent)}
/* nomor punggung (The Chosen Ones) */
.xp-sh{position:absolute;inset:22% 0 0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:2cqi;place-items:center}
.xp-sh span{position:relative;display:grid;place-items:center;width:13cqi;height:13cqi;padding-top:1.6cqi;background:var(--c);color:#000;font:800 6cqi/1 var(--dh);
clip-path:polygon(30% 0,38% 6%,62% 6%,70% 0,100% 18%,90% 40%,80% 34%,80% 100%,20% 100%,20% 34%,10% 40%,0 18%)}
.xp-sh .xm-k{z-index:1}
/* animasi: hanya jalan saat kartu .is-play (dipasang ulang tiap putaran) */
.is-play .xp-b .a{animation:xpA 3.4s both}
.is-play .xp-b .z{animation:xpZ 3.4s both}
@keyframes xpA{0%,48%{opacity:1;transform:none}56%,100%{opacity:0;transform:translateY(-30%)}}
@keyframes xpZ{0%,50%{opacity:0;transform:scale(1.6)}60%,100%{opacity:1;transform:none}}
.is-play .xp-pop{animation:xpPop 3.4s both}
@keyframes xpPop{0%,50%{opacity:0;transform:scale(.4) rotate(-8deg)}58%{opacity:1;transform:scale(1.15) rotate(-8deg)}64%,100%{opacity:1;transform:scale(1) rotate(-8deg)}}
/* Golden Boy: rompi emas menembak, gol dihitung dua */
.is-play .xp-f .xm-ball{animation:xpBall 3.4s both}
@keyframes xpBall{0%,14%{opacity:0;left:42%;top:38%}18%{opacity:1;left:42%;top:38%}46%{opacity:1;left:101%;top:50%}52%,100%{opacity:0;left:101%;top:50%}}
.is-play .xp-f.gb::after{animation:xpNet 3.4s both}
@keyframes xpNet{0%,44%{border-color:rgba(255,255,255,.45);box-shadow:none}50%,70%{border-color:var(--gold);box-shadow:0 0 4cqi var(--gold)}100%{border-color:rgba(255,255,255,.45);box-shadow:none}}
/* X-Man: pemain ke-6 masuk */
.is-play .xp-f .xm-nw{animation:xpIn 3.4s both}
.is-play .xp-f .xm-nw::after{animation:xpRing 3.4s both}
@keyframes xpIn{0%,26%{opacity:0;transform:scale(0)}38%{opacity:1;transform:scale(1.35)}46%,100%{opacity:1;transform:none}}
@keyframes xpRing{0%,34%{opacity:0;transform:scale(.6)}40%{opacity:1}60%,100%{opacity:0;transform:scale(1.9)}}
/* Reset All Player: starter keluar ke bangku, cadangan masuk */
.is-play .xp-f .xm-st{animation:xpOut 3.4s both}
.is-play .xp-f .xm-sub{animation:xpSub 3.4s both}
@keyframes xpOut{0%,14%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(160%)}}
@keyframes xpSub{0%,32%{opacity:0;transform:translateY(160%)}50%,100%{opacity:1;transform:none}}
/* Royal Rumble: dua pemain lapangan tiap tim keluar, sisanya melebar */
.is-play .xp-f .xm-x{animation:xpGone 3.4s both}
.is-play .xp-f .xm-mv{animation:xpMv 3.4s both}
@keyframes xpGone{0%,14%{opacity:1;transform:none}32%,100%{opacity:0;transform:scale(0)}}
@keyframes xpMv{0%,28%{left:var(--x);top:var(--y)}50%,100%{left:var(--x2);top:var(--y2)}}
/* The Chosen Ones: 5 nomor gugur, satu dipilih fans */
.is-play .xp-sh .xm-x{animation:xpDim 3.4s both}
.is-play .xp-sh .xm-k{animation:xpPick 3.4s both}
@keyframes xpDim{0%,16%{opacity:1;filter:none}36%,100%{opacity:.16;filter:grayscale(1)}}
@keyframes xpPick{0%,50%{transform:none;filter:none}60%{transform:scale(1.3)}68%,100%{transform:scale(1.18);filter:drop-shadow(0 0 2.4cqi #fff)}}
@media (prefers-reduced-motion:reduce){ .xk-c.is-play .xp *,.xk-c.is-play .xp *::after,.xk-c.is-play .xp-f::after{animation-duration:1ms!important} .xbh .xk-c .xk-ic{transition:none} }
/* jarak antar kartu sama semua, termasuk antara X-Card terakhir dan President Card pertama */
.xk-deck.xk-6.xbh{column-gap:12px}
.xbh .xk-row{gap:12px}
/* ---------- 12 Nov: kartu dibalik (flip) ----------
.xk-fl = sel grid (tidak berputar, jadi hover stabil) > .xk-in (berputar) > .xk-f (muka depan, artikel asli) + .xk-bk (muka belakang) */
.xbh .xk-fl{perspective:1100px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xbh .xk-in{position:relative;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,.75,.25,1)}
.xbh .xk-fl.is-flip .xk-in{transform:rotateY(180deg)}
.xbh .xk-in>.xk-c{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.xbh .xk-in>.xk-f{transform:none}
.xbh .xk-in>.xk-bk{position:absolute;inset:0;aspect-ratio:auto;transform:rotateY(180deg)}
/* tekstur tetap beda arah per kartu (dulu lewat :nth-child pada kartu) */
.xbh .xk-fl:nth-child(1) .xk-c{background-position:center;background-size:cover}
.xbh .xk-fl:nth-child(2) .xk-c{background-position:right bottom;background-size:130% auto}
.xbh .xk-fl:nth-child(3) .xk-c{background-position:left top;background-size:125% auto}
/* muka belakang: lebih gelap supaya teks aturan terbaca */
.xbh .xk-bk::before{background:radial-gradient(ellipse 90% 80% at 50% 55%,rgba(0,0,0,.92) 0,rgba(0,0,0,.82) 60%,rgba(0,0,0,.45) 100%)}
.xbh .xk-bk .xk-ty{margin-top:11cqi}
.xbh .xk-bk .xk-t{margin-top:2.4cqi;font-size:11.5cqi}
.xbh .xk-bk .xk-art{width:80cqi;height:52cqi;margin:4cqi 0 0}
.xbh .xk-bk .xk-d{margin:4cqi 0 0;padding:0 9cqi;font:500 6.8cqi/1.36 var(--body);color:#fff;text-align:center;text-wrap:pretty;text-shadow:0 1px 3px #000}
/* fokus keyboard tetap terlihat setelah kartu berbalik */
.xbh .xk-fl:has(.xk-f:focus-visible) .xk-bk{outline:2px solid #fff;outline-offset:3px}
/* peragaan mulai setelah kartu selesai berbalik */
.xbh .xk-bk.is-play .xp *,.xbh .xk-bk.is-play .xp *::after,.xbh .xk-bk.is-play .xp-f::after{animation-delay:.35s}
@container (max-width:720px){ .xbh .xk-fl{scroll-snap-align:start} .xbh .xk-bk .xk-d{font-size:7.4cqi} }
@media (prefers-reduced-motion:reduce){ .xbh .xk-in{transition:none} }
/* 12 Nov ("tulisan disini kegedean"): teks aturan di muka belakang dikecilkan, ilustrasi sedikit dipendekkan */
.xbh .xk-bk .xk-art{height:46cqi;margin:3cqi 0 0}
.xbh .xk-bk .xk-d{margin:4cqi 0 0;padding:0 10cqi;font-size:5.6cqi;line-height:1.38}
@container (max-width:720px){ .xbh .xk-bk .xk-d{font-size:6.2cqi;padding:0 9cqi} }
/* 12 Nov ("spacing2nya mepet2 banget"): muka belakang diberi napas: judul & papan dikecilkan, jarak antarblok seragam ±5cqi */
.xbh .xk-bk .xk-ty{margin-top:12cqi}
.xbh .xk-bk .xk-t{margin-top:2cqi;font-size:9.6cqi}
.xbh .xk-bk .xk-art{width:72cqi;height:44cqi;margin:6cqi 0 0}
.xbh .xk-bk .xp-b b{font-size:8.4cqi}
.xbh .xk-bk .xp-f,.xbh .xk-bk .xp-sh{inset:26% 0 0}
.xbh .xk-bk .xp-clk{inset:26% 4% 0}
.xbh .xk-bk .xk-d{margin:6cqi 0 0;padding:0 11cqi;font-size:5.4cqi;line-height:1.42}
@container (max-width:720px){ .xbh .xk-bk .xk-d{font-size:6cqi;padding:0 10cqi} }
/* ===== 13 Nov · X-Card slider coverflow ("xcardnya ngeslide sperti ini") =====
kartu tengah besar; kiri/kanan makin kecil + gelap; loop. Lihat js/xk-play.js */
.xball .xk-deck.xk-cf{display:block;margin-top:56px;--cw:300px}
.xk-cf .xk-tr{position:relative;height:calc(var(--cw) * 1.4 + 24px);margin-inline:calc(var(--gut) * -1);overflow-x:clip;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .45s cubic-bezier(.2,.7,.2,1);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.xk-cf .xk-tr.is-drag{transition:none;cursor:grabbing}
.xk-cf .xk-fl{position:absolute;left:50%;top:12px;width:var(--cw);margin-left:calc(var(--cw) / -2);transform-origin:50% 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .45s}
.xk-cf .xk-fl::after{content:"";position:absolute;inset:0;z-index:3;border-radius:10px;background:#000;opacity:var(--dim,0);pointer-events:none;transition:opacity .45s}
.xk-cf .xk-fl::before{content:"";position:absolute;inset:6% -8% -4%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--pri) 38%,transparent),transparent);filter:blur(18px);opacity:0;transition:opacity .5s}
.xk-cf .xk-fl:has(.pres)::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 34%,transparent),transparent)}
.xk-cf .xk-fl.is-on::before{opacity:1}
.xk-cf .xk-fl.is-hid{opacity:0;pointer-events:none}
.xk-cf .xk-fl:not(.is-on) .xk-c{cursor:pointer}
.xk-cf .xk-img,.xk-cf img{-webkit-user-drag:none}
.cf-ui{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:22px}
.cf-ui .cf-btn{width:44px;height:44px;color:#fff;cursor:pointer}
.cf-ui .cf-btn:hover{background:rgba(255,255,255,.24)}
.cf-ui .cf-btn .ic{margin:0;width:16px;height:16px}
.cf-meta{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:120px}
.cf-ty{font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--pri)}
.xk-cf:has(.is-on .pres) .cf-ty{color:var(--gold)}
.cf-n{font:700 22px/1 var(--dh);letter-spacing:.06em;color:rgba(255,255,255,.7)}
@media (max-width:900px){ .xball .xk-deck.xk-cf{--cw:250px;margin-top:40px} }
@media (max-width:640px){ .xball .xk-deck.xk-cf{--cw:210px} .xk-cf .xk-tr{-webkit-mask:none;mask:none} }
/* ===== 13 Nov · lapangan XSERIES interaktif di bawah kartu (js/xcourt.js) =====
lantai biru tua bertegel + cahaya panggung biru/ungu, garis krem, logo X SERIES, gawang putih, papan LED */
.xc{--A:var(--pri);--B:var(--red);--rx:57deg;--rz:-24deg;--fw:760px;--fh:380px;max-width:1240px;margin:104px auto 0;text-align:left}
.xc-stage{position:relative;height:600px;margin-top:16px;overflow-x:clip;perspective:1700px;perspective-origin:50% 22%;background:radial-gradient(56% 62% at 50% 58%,rgba(46,64,210,.26),rgba(110,40,200,.1) 55%,transparent 75%)}
.xc-world{position:absolute;left:50%;top:55%;width:0;height:0;transform-style:preserve-3d}
.xc-floor{position:absolute;left:calc(var(--fw) / -2);top:calc(var(--fh) / -2);width:var(--fw);height:var(--fh);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateZ(var(--rz))}
.xc-apron{position:absolute;inset:-9% -5.5%;transform:translateZ(-1px);background:radial-gradient(70% 80% at 50% 50%,#111847,#070a1f 80%);box-shadow:0 0 0 1px rgba(120,140,255,.18),0 0 140px 30px rgba(70,60,255,.22)}
.xc-turf{position:absolute;inset:0;background:
radial-gradient(44% 72% at 20% 44%,rgba(70,104,255,.46),transparent 72%),
radial-gradient(42% 72% at 82% 56%,rgba(156,70,255,.42),transparent 72%),
radial-gradient(28% 46% at 50% 50%,rgba(170,195,255,.14),transparent 76%),
repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2.5%),
repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5%),
#0d1438}
.xc-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xc-ln *{fill:none;stroke:#EFE2B4;stroke-width:2;vector-effect:non-scaling-stroke;opacity:.92}
.xc-ln .dt{stroke-width:6;stroke-linecap:round}
.xc-logo{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:866/407;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);-webkit-mask:url(../img/xseries-logo-stack.webp) center/contain no-repeat;mask:url(../img/xseries-logo-stack.webp) center/contain no-repeat}
/* papan LED berdiri di sisi jauh */
.xc-led{position:absolute;left:-4%;right:-4%;bottom:109%;height:26px;overflow:hidden;transform-origin:50% 100%;transform:rotateX(-90deg);background:#04050e;box-shadow:inset 0 0 0 1px rgba(0,255,239,.25),0 0 30px rgba(0,255,239,.18)}
.xc-led i{display:block;width:max-content;font:700 17px/26px var(--dh);font-style:normal;letter-spacing:.12em;color:var(--pri);text-shadow:0 0 8px rgba(0,255,239,.7);animation:xcled 26s linear infinite}
@keyframes xcled{to{transform:translateX(-50%)}}
/* gawang berdiri di garis gawang (tinggi 2 m, lebar 3 m) */
.xc-goal{position:absolute;top:42.5%;height:15%;width:calc(var(--fh) * .1);transform-origin:0 50%;transform:rotateY(-90deg)}
.xc-goal.l{left:0}
.xc-goal.r{left:100%}
.xc-gf{position:absolute;inset:0;border:4px solid #fff;border-left:0;box-shadow:0 0 14px rgba(255,255,255,.45)}
.xc-net{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 1px,transparent 1px 6px),repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 1px,transparent 1px 6px)}
/* lintasan bola */
.xc-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.xc-path polyline{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:7 6;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s}
.xc-path.on polyline{opacity:.8;animation:xcdash 1s linear infinite}
@keyframes xcdash{to{stroke-dashoffset:-13}}
/* token berdiri menghadap kamera (billboard): putaran lantai dibalik */
.xc-p,.xc-ball,.xc-mk3,.xc-ring{position:absolute;width:0;height:0;transform-style:preserve-3d;transition:left .9s cubic-bezier(.3,.7,.25,1),top .9s cubic-bezier(.3,.7,.25,1)}
.xc-pin{position:absolute;left:0;bottom:0;transform-origin:0 100%;transform:rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)) translateX(-50%);transition:opacity .4s}
.xc-p{--tc:var(--A);--ti:#00201e}
.xc-p.b{--tc:var(--B);--ti:#fff}
.xc-p .xc-pin{width:30px;height:44px}
.xc-p .xc-pin b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tc);color:var(--ti);font:800 12.5px/1 var(--body);box-shadow:0 0 0 2px rgba(5,8,30,.75),0 0 18px color-mix(in srgb,var(--tc) 55%,transparent);transition:background .4s,color .4s,box-shadow .4s}
.xc-p .xc-pin::after{content:"";position:absolute;left:50%;top:30px;width:2px;height:14px;margin-left:-1px;background:linear-gradient(var(--tc),color-mix(in srgb,var(--tc) 10%,transparent))}
.xc-sh{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:2px solid color-mix(in srgb,var(--tc,#fff) 75%,transparent);background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);transition:opacity .4s}
.xc-p.out .xc-pin,.xc-p.out .xc-sh{opacity:0}
.xc-p.gold{--tc:var(--gold);--ti:#2a1c00}
.xc-p.gold .xc-pin b{box-shadow:0 0 0 2px #fff,0 0 26px 4px rgba(255,199,48,.85);animation:xcgold 1.4s ease-in-out infinite}
@keyframes xcgold{50%{box-shadow:0 0 0 2px #fff,0 0 10px 1px rgba(255,199,48,.5)}}
.xc-p.sub .xc-pin b{background:rgba(5,8,30,.85);color:var(--tc);box-shadow:inset 0 0 0 2px var(--tc),0 0 14px color-mix(in srgb,var(--tc) 45%,transparent)}
.xc-p.pick .xc-pin b{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--gold),0 0 26px var(--gold)}
/* bola */
.xc-ball{--tc:#fff}
.xc-ball .xc-sh{left:-7px;top:-7px;width:14px;height:14px;border:0}
.xc-ball .xc-pin{width:14px;height:14px}
.xc-ball .xc-pin i{display:block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cfd6ff 60%,#7d86c9);box-shadow:0 0 12px rgba(255,255,255,.8)}
.xc-ball.out .xc-pin,.xc-ball.out .xc-sh{opacity:0}
/* penanda kejadian: cincin di lantai + ikon melayang */
.xc-ring{--rc:#fff;transition:none}
.xc-ring.t-a{--rc:var(--A)} .xc-ring.t-b{--rc:var(--B)} .xc-ring.t-ref{--rc:var(--gold)}
.xc-ring::before,.xc-ring::after{content:"";position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;border:2px solid var(--rc);opacity:0}
.xc-ring.on::before{animation:xcring 1.8s ease-out .2s 2}
.xc-ring.on::after{animation:xcring 1.8s ease-out .8s 2}
@keyframes xcring{0%{transform:scale(.25);opacity:1}100%{transform:scale(1.5);opacity:0}}
.xc-mk3{transition:none}
.xc-mk3 .xc-pin{display:grid;place-items:center;width:34px;height:34px;transform:rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)) translate(-50%,-58px);background:rgba(6,9,32,.9);clip-path:var(--chamf-s);color:#fff;animation:xcpop .5s cubic-bezier(.2,.9,.3,1.3)}
.xc-mk3 .xc-pin svg{width:18px;height:18px}
.xc-mk3.ev-goal .xc-pin,.xc-mk3.ev-card .xc-pin{background:#fff;color:#05081e}
@keyframes xcpop{from{opacity:0}}
/* papan skor + kilat nama kartu (2D, di atas lapangan) */
.xc-sb{position:absolute;z-index:2;left:50%;top:6px;display:flex;align-items:center;gap:14px;transform:translateX(-50%);padding:8px 12px;background:rgba(4,6,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);clip-path:var(--chamf-s);white-space:nowrap}
.xc-tm{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--body);text-transform:uppercase;letter-spacing:.04em}
.xc-tm img{width:28px;height:28px;object-fit:contain}
.xc-tm.a b{color:var(--A)} .xc-tm.b b{color:var(--B)}
.xc-sc{display:grid;grid-template-columns:auto 14px auto;align-items:center;justify-items:center;min-width:96px;font:700 36px/1 var(--dh)}
.xc-sc i{width:10px;height:2px;background:rgba(255,255,255,.5)}
.xc-clk{grid-column:1/-1;margin-top:3px;font:600 11px/1 var(--body);letter-spacing:.06em;color:rgba(255,255,255,.6)}
.xc-flash{position:absolute;z-index:2;left:0;right:0;top:34%;text-align:center;font:700 clamp(54px,7vw,104px)/1 var(--dh);text-transform:uppercase;pointer-events:none;opacity:0;color:#fff}
.xc-flash.t-a{color:var(--A)} .xc-flash.t-b{color:var(--B)} .xc-flash.t-ref{color:var(--gold)}
.xc-flash.on{animation:xcflash 2.2s cubic-bezier(.2,.8,.2,1) both;text-shadow:0 0 30px currentColor,0 6px 0 rgba(0,0,0,.5)}
@keyframes xcflash{0%{opacity:0;transform:scale(.7)}14%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
/* teks + garis waktu */
.xc-ft{position:relative;margin-top:4px}
.xc-cap{display:flex;gap:16px;align-items:baseline;min-height:2.8em;margin:0 0 18px;font:500 18px/1.4 var(--body);text-transform:none;letter-spacing:0;line-height:1.4;color:#fff;text-wrap:pretty}
.xc-t{flex:none;min-width:84px;font:700 13px/1 var(--body);letter-spacing:.06em;color:var(--pri)}
.xc-tl{display:flex;align-items:center;gap:16px}
.xc-play{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;clip-path:var(--chamf-s);background:#fff;cursor:pointer}
.xc-play i{width:12px;height:14px;border-left:4px solid #05081e;border-right:4px solid #05081e}
.xc-play.paused i{width:0;height:0;border:0;border-left:13px solid #05081e;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.xc-bar{position:relative;flex:1;height:26px}
.xc-qs{position:absolute;inset:0;display:grid;grid-template-columns:10fr 10fr 10fr 10fr 3fr}
.xc-qs span{padding:0 8px;border-left:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);font:600 11px/26px var(--body);letter-spacing:.06em;color:rgba(255,255,255,.55)}
.xc-qs .x{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 3px,transparent 3px 7px)}
.xc-win{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--pri) 26%,transparent);box-shadow:inset 0 2px 0 var(--pri);transition:left .5s,width .5s}
.xc-tks i{position:absolute;top:5px;bottom:5px;width:3px;margin-left:-1.5px;background:rgba(255,255,255,.7)}
.xc-tks i.on{background:#fff;box-shadow:0 0 8px #fff}
.xc-tks i.hid{display:none}
.xc-ph{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--pri);box-shadow:0 0 10px var(--pri);transition:left .6s cubic-bezier(.3,.7,.25,1)}
.xc-mks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 0 60px}
.xc-mk{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border:0;clip-path:var(--chamf-s);background:rgba(255,255,255,.06);color:#fff;text-align:left;cursor:pointer;transition:background .2s}
.xc-mk:hover{background:rgba(255,255,255,.12)}
.xc-mk.on{background:rgba(255,255,255,.95);color:#05081e}
.xc-mk.hid{display:none}
.xc-mi{display:grid;place-items:center;width:28px;height:28px;flex:none;background:rgba(0,0,0,.35);clip-path:var(--chamf-s)}
.xc-mk.on .xc-mi{background:#05081e;color:#fff}
.xc-mi svg{width:16px;height:16px}
.xc-mk span{display:flex;flex-direction:column;gap:3px;min-width:0}
.xc-mk b{font:700 12px/1 var(--body);letter-spacing:.05em}
.xc-mk small{font:500 13px/1.15 var(--body);text-transform:none;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xc-mk:focus-visible,.xc-play:focus-visible,.cf-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1100px){ .xc{--fw:640px;--fh:320px} .xc-stage{height:520px} }
@media (max-width:900px){ .xc{margin-top:72px} .xc-mks{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0} .xc-cap{font-size:16px} }
/* HP: lapangan diputar tegak (panjang ke atas) supaya lebar layar terpakai */
@media (max-width:640px){
.xc{--rx:46deg;--rz:-90deg;--fw:520px;--fh:260px;margin-top:64px}
.xc-stage{height:590px;margin-inline:calc(var(--gut) * -1);perspective:1200px;perspective-origin:50% 30%}
.xc-world{top:52%}
.xc-sb{top:0;gap:8px;padding:7px 9px}
.xc-tm b{display:none}
.xc-tm img{width:26px;height:26px}
.xc-sc{font-size:30px;min-width:80px}
.xc-flash{top:30%}
.xc-cap{flex-direction:column;gap:6px}
.xc-p .xc-pin{width:26px;height:38px}
.xc-p .xc-pin b{width:26px;height:26px;font-size:11px}
.xc-p .xc-pin::after{top:26px;height:12px}
.xc-sh{left:-13px;top:-13px;width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){ .xc-led i,.xc-path.on polyline,.xc-p.gold .xc-pin b,.xc-ring.on::before,.xc-ring.on::after{animation:none} .xk-cf .xk-fl{transition:none} }
/* ===== 13 Nov · lapangan tampak lurus seperti referensi (bukan diagonal); judul + filter dihapus =====
papan skor gaya siaran: Home kiri, jam + skor tengah, Away kanan; lapangan punya tebal di sisi depan */
.xc{--rx:52deg;--rz:0deg;--fw:880px;--fh:440px;margin-top:88px}
.xc-stage{height:600px;margin-top:0;perspective:1500px;perspective-origin:50% 0%;background:radial-gradient(60% 56% at 50% 64%,rgba(46,64,210,.24),rgba(110,40,200,.1) 55%,transparent 76%)}
.xc-world{top:60%}
.xc-ex{position:absolute;z-index:2;left:0;top:14px}
.xc-sb{position:relative;left:auto;top:auto;transform:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:32px;max-width:760px;margin:0 auto;padding:6px 0 20px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;clip-path:none;border-bottom:1px solid rgba(255,255,255,.14)}
.xc-tm{gap:12px;text-transform:none;letter-spacing:0}
.xc-tm.b{justify-content:flex-end;text-align:right}
.xc-tm>span{display:flex;flex-direction:column;gap:5px}
.xc-tm small{font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.xc-tm b{font:700 clamp(22px,2.4vw,34px)/.9 var(--dh);text-transform:uppercase}
.xc-tm img{width:44px;height:44px}
.xc-sc{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.xc-clk-w{display:flex;align-items:center;gap:6px;font:600 13px/1 var(--body);letter-spacing:.05em;color:rgba(255,255,255,.75)}
.xc-clk-w svg{width:14px;height:14px}
.xc-clk{grid-column:auto;margin:0;font:inherit;color:inherit}
.xc-n{display:grid;grid-template-columns:auto 24px auto;align-items:center;justify-items:center;font:700 58px/.9 var(--dh)}
.xc-n i{width:1px;height:40px;background:rgba(255,255,255,.3)}
/* tebal lapangan di sisi depan (menggantung ke bawah) */
.xc-edge{position:absolute;left:-5.5%;right:-5.5%;top:109%;height:26px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(#1a2160,#070a1f);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.xc-led{height:30px}
.xc-led i{font-size:19px;line-height:30px}
.xc-flash{top:44%}
@media (max-width:1100px){ .xc{--fw:700px;--fh:350px} .xc-stage{height:520px} }
@media (max-width:900px){ .xc-sb{gap:18px} .xc-n{font-size:46px} .xc-tm img{width:34px;height:34px} }
/* HP: tetap lurus, panjang lapangan ke atas supaya selebar layar terpakai */
@media (max-width:640px){
.xc{--rx:44deg;--rz:-90deg;--fw:520px;--fh:260px;margin-top:64px}
.xc-stage{height:600px}
.xc-world{top:53%}
.xc-ex{top:auto;bottom:6px;left:0}
.xc-sb{gap:10px;padding:0 0 14px}
.xc-tm b{display:block;font-size:18px}
.xc-tm img{width:28px;height:28px}
.xc-tm{gap:8px}
.xc-n{font-size:40px;grid-template-columns:auto 16px auto}
.xc-n i{height:28px}
.xc-edge{display:none}
}
/* ===== 13 Nov · kartu + lapangan above the fold (atas-bawah); judul 1 baris; papan skor ringkas =====
kartu diperkecil, panah kartu menempel di kiri-kanan kartu tengah, lapangan lebih rendah */
.xball .center-head{gap:14px}
.xball .center-head .display{white-space:nowrap;font-size:clamp(40px,6vw,96px)}
.xball .center-head .lede{max-width:none}
.xb-play{margin-top:24px}
.xb-play .xk-deck.xk-cf{position:relative;margin-top:0;--cw:190px}
.xb-play .cf-ui{position:absolute;z-index:20;left:50%;top:calc(var(--cw) * .7 + 12px);width:calc(var(--cw) + 150px);margin:0;transform:translate(-50%,-50%);justify-content:space-between;pointer-events:none}
.xb-play .cf-ui .cf-btn{pointer-events:auto;background:rgba(10,12,30,.82)}
.xb-play .cf-meta{display:none}
.xb-play .xc{margin:6px auto 0;--fw:720px;--fh:340px;--rx:58deg}
.xb-play .xc-stage{height:330px;perspective:1600px}
.xb-play .xc-world{top:58%}
.xb-play .xc-cap{min-height:0;margin-bottom:12px;font-size:16px}
/* papan skor: satu pil kecil di atas lapangan, bukan satu baris lebar */
.xc-sb{position:absolute;z-index:2;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:none;margin:0;padding:8px 14px;border:0;white-space:nowrap;background:rgba(4,6,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);clip-path:var(--chamf-s)}
.xc-tm{display:flex;align-items:center;gap:8px}
.xc-tm b{font:700 20px/1 var(--dh);text-transform:uppercase}
.xc-tm img{width:26px;height:26px}
.xc-n{grid-template-columns:auto 14px auto;font:700 30px/1 var(--dh)}
.xc-n i{height:20px}
.xc-clk-w{padding-left:12px;border-left:1px solid rgba(255,255,255,.18);font-size:12px}
.xc-sb .xc-ex{position:static;padding-left:12px;border-left:1px solid rgba(255,255,255,.18);font:500 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}
@media (max-width:1100px){ .xb-play .xc{--fw:620px;--fh:300px} .xb-play .xc-stage{height:300px} }
@media (max-width:900px){ .xball .center-head .lede{max-width:620px} .xb-play .xk-deck.xk-cf{--cw:180px} }
@media (max-width:640px){
.xball .center-head .display{font-size:11vw}
.xb-play .xk-deck.xk-cf{--cw:150px}
.xb-play .cf-ui{width:calc(var(--cw) + 110px)}
.xb-play .cf-ui .cf-btn{width:38px;height:38px}
.xb-play .xc{--rx:44deg;--rz:-90deg;--fw:400px;--fh:200px}
.xb-play .xc-stage{height:440px}
.xb-play .xc-world{top:55%}
.xc-sb{gap:8px;padding:7px 10px}
.xc-tm b,.xc-sb .xc-ex{display:none}
.xc-n{font-size:26px}
}
/* ===== 13 Nov · "terlalu crowded": 3 kartu saja, panah di luar kartu, tanpa papan LED,
papan skor cuma logo + skor + jam, timeline bar diganti baris momen saja ===== */
.xb-play{margin-top:28px}
.xb-play .cf-ui{width:calc(var(--cw) * 2.72 + 130px)}
.xb-play .cf-ui .cf-btn{background:rgba(255,255,255,.08)}
.xb-play .xc{margin-top:28px}
.xb-play .xc-led{display:none}
.xb-play .xc-stage{height:300px}
.xb-play .xc-world{top:52%}
.xc-tm b{display:none}
.xc-sb{gap:14px;padding:8px 16px}
.xb-play .xc-ft{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 16px;max-width:900px;margin:8px auto 0}
.xb-play .xc-cap{grid-column:1/-1;justify-content:center;align-items:center;gap:12px;margin:0 0 4px;text-align:center}
.xb-play .xc-t{font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.xb-play .xc-tl{display:block}
.xb-play .xc-bar{display:none}
.xb-play .xc-mks{margin:0}
@media (max-width:1100px){ .xb-play .xc-stage{height:280px} }
@media (max-width:640px){
.xb-play .cf-ui{width:min(calc(var(--cw) * 2.72 + 60px),100%)}
.xb-play .xc-stage{height:420px}
.xb-play .xc-world{top:52%}
.xb-play .xc-ft{grid-template-columns:minmax(0,1fr)}
.xb-play .xc-cap{flex-direction:column;gap:6px}
.xb-play .xc-tl{display:none}
}
/* ===== 13 Nov · baris momen ("penting ga?") diringkas jadi titik langkah di samping tombol play.
Lapangan tetap jalan sendiri; caption yang menjelaskan. Titik = loncat ke momen ===== */
.xb-play .xc-ft{display:flex;flex-direction:column;align-items:center;gap:14px}
.xb-play .xc-cap{margin:0}
.xb-play .xc-ctl{display:flex;align-items:center;gap:14px}
.xb-play .xc-play{width:34px;height:34px;background:rgba(255,255,255,.1)}
.xb-play .xc-play i{width:9px;height:11px;border-left-width:3px;border-right-width:3px;border-color:#fff}
.xb-play .xc-play.paused i{border:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.xb-play .xc-mks{display:flex;gap:2px;margin:0}
.xb-play .xc-mk{width:26px;height:26px;padding:0;justify-content:center;background:none;clip-path:none}
.xb-play .xc-mk>*{display:none}
.xb-play .xc-mk::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .2s,width .3s}
.xb-play .xc-mk:hover::before{background:rgba(255,255,255,.6)}
.xb-play .xc-mk.on::before{width:22px;border-radius:4px;background:var(--pri)}
@media (max-width:640px){ .xb-play .xc-tl{display:block} }
/* ===== 13 Nov · lede xBall dipendekkan, 2 baris seimbang ===== */
.xball .center-head .lede{max-width:560px;text-wrap:balance}
/* ===== 13 Nov · eyebrow dihapus: label status panel jadi tag saja, judul tabel jadi putih ===== */
.p-tags{display:flex;gap:8px;flex-wrap:wrap}
.lt-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.lt-title .live-dot{background:var(--live)}
/* ===== 13 Nov · slider: kartu sebelah menumpuk di belakang kartu tengah (continuity), 5 kartu, selebar layar ===== */
.xb-play .xk-deck.xk-cf{--cw:200px}
.xb-play .xk-cf .xk-tr{margin-inline:calc(var(--gut) * -1);-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.xb-play .cf-ui{width:calc(var(--cw) * 3.46 + 130px)}
.xk-cf .xk-fl:not(.is-on){box-shadow:-18px 0 30px rgba(0,0,0,.55),18px 0 30px rgba(0,0,0,.55)}
.xb-play .xc{margin-top:16px}
@media (max-width:640px){
.xb-play .xk-deck.xk-cf{--cw:150px}
.xb-play .cf-ui{width:min(calc(var(--cw) * 2.6 + 60px),100%)}
}
/* logo tim di pil skor jangan menyusut (HP sempat 1px) */
.xc-tm img{flex:none}
.xc-tm{flex:none}
/* ===== 13 Nov · judul hero PLAY DIFFERENT: putih polos, tegak (tanpa miring, tanpa gradasi/tekstur) ===== */
body[data-hero="e"] .hero-title .w { transform: none; background: none; color: #fff; -webkit-text-fill-color: #fff; }
/* ===== 13 Nov · bawah lapangan "terlalu texty & crowded": label Example match dibuang,
caption satu baris kecil, play jadi ikon polos tanpa kotak, titik lebih kecil ===== */
.xb-play .xc-t{display:none}
.xb-play .xc-ft{gap:6px;margin-top:4px}
.xb-play .xc-cap{font-size:15px;font-weight:400;color:rgba(255,255,255,.72)}
.xb-play .xc-ctl{gap:4px}
.xb-play .xc-play{width:26px;height:26px;background:none;clip-path:none;opacity:.55;transition:opacity .2s}
.xb-play .xc-play:hover{opacity:1}
.xb-play .xc-play i{width:7px;height:9px;border-left-width:2px;border-right-width:2px}
.xb-play .xc-play.paused i{border-left-width:8px;border-top-width:5px;border-bottom-width:5px;margin-left:2px}
.xb-play .xc-mk{width:18px;height:22px}
.xb-play .xc-mk::before{width:6px;height:6px}
.xb-play .xc-mk.on::before{width:16px;border-radius:3px}
/* ===== 13 Nov · kartu slider dikecilkan sedikit ===== */
.xb-play .xk-deck.xk-cf{--cw:166px}
@media (max-width:640px){ .xb-play .xk-deck.xk-cf{--cw:130px} }
/* ===== 13 Nov · papan skor ulang: gaya scorebug siaran, simetris, jam di tengah
[logo LYN][4] [Q3 05:00] [2][NOV logo]; garis warna tim di bawah, angka skor dalam kotak ===== */
.xc-sb{display:flex;align-items:stretch;gap:0;height:40px;padding:0;background:rgba(5,7,24,.86)}
.xc-sb .xc-tm{display:flex;align-items:center;gap:8px;padding:0 12px;box-shadow:inset 0 -2px var(--A)}
.xc-sb .xc-tm.b{box-shadow:inset 0 -2px var(--B)}
.xc-sb .xc-tm b{display:block;font:700 19px/1 var(--dh);letter-spacing:.05em;color:#fff}
.xc-sb .xc-tm img{width:24px;height:24px}
.xc-s{display:grid;place-items:center;min-width:40px;padding:0 6px;font:700 26px/1 var(--dh);color:#fff;font-variant-numeric:tabular-nums}
.xc-s.a{background:color-mix(in srgb,var(--A) 22%,transparent)}
.xc-s.b{background:color-mix(in srgb,var(--B) 26%,transparent)}
.xc-s.up{animation:xc-up .7s cubic-bezier(.2,.7,.2,1)}
@keyframes xc-up{0%{color:var(--gold);transform:scale(1.35)}100%{color:#fff;transform:none}}
.xc-sb .xc-clk-w{display:flex;align-items:center;padding:0 14px;border:0;font:600 12px/1 var(--body);letter-spacing:.06em;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:640px){
.xc-sb{height:36px}
.xc-sb .xc-tm{padding:0 9px;gap:6px}
.xc-sb .xc-tm b{display:block;font-size:16px}
.xc-sb .xc-tm img{width:20px;height:20px}
.xc-s{min-width:32px;font-size:22px}
.xc-sb .xc-clk-w{padding:0 10px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){ .xc-s.up{animation:none} }
.xc-s.a{box-shadow:inset 0 -2px var(--A)} .xc-s.b{box-shadow:inset 0 -2px var(--B)}
/* ===== 13 Nov · kartu slider berjajar (tidak bertumpuk) + Laws of the Game jadi tombol sekunder ===== */
.xb-play .cf-ui{width:calc(var(--cw) * 4.28 + 140px)}
@media (max-width:640px){ .xb-play .cf-ui{width:100%} }
.xb-foot{display:flex;justify-content:center;margin-top:28px}
/* ===== 13 Nov · caption tidak menimpa sisi tebal lapangan (xc-edge keluar ~16px di bawah stage) ===== */
.xb-play .xc-ft{margin-top:26px}
/* ===== 13 Nov · h2 diperkecil (semua section) ===== */
.display{font-size:clamp(30px,3.6vw,56px)}
.family-card .display-s{font-size:clamp(30px,3.6vw,56px)}
.xball .center-head .display{font-size:clamp(32px,3.6vw,56px)}
@media (max-width:640px){ .xball .center-head .display{font-size:8vw} }
/* ===== 13 Nov · suasana arena XSERIES di sekitar lapangan (tipis, tidak ramai) =====
tribun penonton berbaris di belakang lapangan + papan LED tipis di sisi jauh + dua sorot lampu atap */
.xb-play .xc-stage{isolation:isolate}
.xb-play .xc-stage::before{content:"";position:absolute;z-index:-1;left:4%;right:4%;top:-30px;bottom:-6px;pointer-events:none;
background:
radial-gradient(circle,rgba(255,84,96,.62) 0 1.2px,transparent 1.8px) 0 0/11px 9px,
radial-gradient(circle,rgba(0,255,239,.5) 0 1.1px,transparent 1.7px) 5px 4px/13px 9px,
radial-gradient(circle,rgba(220,226,255,.55) 0 1px,transparent 1.6px) 2px 3px/7px 9px,
repeating-linear-gradient(180deg,rgba(120,140,255,.12) 0 1px,transparent 1px 9px);
-webkit-mask:radial-gradient(closest-side at 50% 56%,transparent 50%,#000 72%,rgba(0,0,0,.6) 86%,transparent 100%);
mask:radial-gradient(closest-side at 50% 56%,transparent 50%,#000 72%,rgba(0,0,0,.6) 86%,transparent 100%);
opacity:.34}
.xb-play .xc-stage::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:-40px;bottom:0;pointer-events:none;
background:radial-gradient(22% 70% at 24% 0,rgba(170,190,255,.11),transparent 72%),radial-gradient(22% 70% at 76% 0,rgba(170,190,255,.11),transparent 72%);-webkit-mask:linear-gradient(transparent,#000 45%);mask:linear-gradient(transparent,#000 45%)}
.xb-play .xc-led{display:none} /* papan LED dihapus: terlalu ramai */
@media (max-width:640px){ .xb-play .xc-stage::before{left:0;right:0} }
.xb-play .xc-sb{top:-14px}
/* ===== 13 Nov · jarak kartu ↔ lapangan dilonggarkan ===== */
.xb-play .xc{margin-top:46px}
@media (max-width:640px){ .xb-play .xc{margin-top:34px} }
/* ===== 13 Nov · lapangan lebih realistis (mengikuti foto lapangan XSERIES) =====
lantai ubin modular biru gelap + pantulan lampu, garis tepi emas, garis lain putih, kotak penalti persegi, logo besar */
.xb-play .xc-turf{background:
radial-gradient(3.2% 34% at 27% 20%,rgba(170,195,255,.22),transparent 70%),
radial-gradient(3.2% 34% at 47% 18%,rgba(170,195,255,.18),transparent 70%),
radial-gradient(3.2% 34% at 64% 20%,rgba(170,195,255,.2),transparent 70%),
radial-gradient(3.2% 34% at 82% 22%,rgba(150,220,255,.16),transparent 70%),
radial-gradient(60% 90% at 50% 30%,rgba(78,74,230,.5),transparent 75%),
radial-gradient(40% 60% at 12% 80%,rgba(130,60,220,.22),transparent 72%),
repeating-linear-gradient(90deg,rgba(0,0,0,.26) 0 1px,transparent 1px 1.25%),
repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 2.5%),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 1.25%),
linear-gradient(#202a7a,#141a52 60%,#10143e)}
.xb-play .xc-apron{background:
repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1px,transparent 1px 9px),
repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 9px),
linear-gradient(#141a55,#0b0f33);box-shadow:0 0 0 1px rgba(120,140,255,.12),0 0 120px 24px rgba(70,60,255,.18)}
.xb-play .xc-ln *{stroke:rgba(255,255,255,.82);stroke-width:1.6}
.xb-play .xc-ln .sd{stroke:#E8B84A;stroke-width:2}
.xb-play .xc-ln .dt{stroke:rgba(255,255,255,.8);stroke-width:5}
.xb-play .xc-logo{width:30%;background:rgba(255,255,255,.86)}
/* ===== 13 Nov · bentuk lapangan mengikuti potongan XSERIES (sudut kiri-atas & kanan-bawah terpotong miring) =====
potongan cukup kecil supaya tidak memotong garis lapangan */
.xb-play .xc-apron{clip-path:polygon(3% 0,97% 0,100% 7%,100% 93%,97% 100%,3% 100%,0 93%,0 7%)}
.xb-play .xc-edge{left:-2.17%;right:-2.17%}
/* sisi tebal ikut di potongan miring kanan-bawah (dari titik 97%/100% ke 100%/93% alas) */
.xb-play .xc-floor::after{content:"";position:absolute;left:calc(var(--fw) * 1.0217);top:calc(var(--fh) * 1.09);width:hypot(calc(var(--fw) * .0333),calc(var(--fh) * .0826));height:26px;transform-origin:0 0;transform:rotateZ(atan2(calc(var(--fh) * -.0826),calc(var(--fw) * .0333))) rotateX(-90deg);background:linear-gradient(#141a55,#070a1f);pointer-events:none}
/* sisi tebal di potongan kiri-bawah (dari 0%/93% ke 3%/100% alas) */
.xb-play .xc-floor::before{content:"";position:absolute;left:calc(var(--fw) * -.055);top:calc(var(--fh) * 1.0074);width:hypot(calc(var(--fw) * .0333),calc(var(--fh) * .0826));height:26px;transform-origin:0 0;transform:rotateZ(atan2(calc(var(--fh) * .0826),calc(var(--fw) * .0333))) rotateX(-90deg);background:linear-gradient(#141a55,#070a1f);pointer-events:none}
@media (max-width:640px){ .xb-play .xc-floor::after,.xb-play .xc-floor::before{display:none} }
/* ===== 13 Nov · rasa stadion lebih terasa: mangkuk tribun (baris melingkar + lorong tangga + penonton) selebar layar, lampu atap ===== */
.xb-play .xc-stage::before{display:none}
.xb-play .xc{position:relative;isolation:isolate}
.xb-play .xc::before{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw);width:100vw;top:-80px;height:500px;pointer-events:none;
background:
repeating-conic-gradient(from 0deg at 50% 50%,rgba(0,0,0,.55) 0 .6deg,transparent .6deg 12deg),
repeating-radial-gradient(64% 46% at 50% 50%,transparent 0 15px,rgba(150,170,255,.13) 15px 16px),
radial-gradient(circle,rgba(255,84,96,.75) 0 1.3px,transparent 1.9px) 0 0/11px 8px,
radial-gradient(circle,rgba(0,255,239,.6) 0 1.2px,transparent 1.8px) 5px 4px/13px 8px,
radial-gradient(circle,rgba(225,230,255,.65) 0 1.1px,transparent 1.7px) 2px 2px/7px 8px,
radial-gradient(64% 70% at 50% 50%,rgba(34,40,120,.55),rgba(14,16,48,.4) 70%,transparent);
-webkit-mask:radial-gradient(54% 74% at 50% 50%,transparent 34%,#000 54%,rgba(0,0,0,.55) 72%,transparent 96%),linear-gradient(transparent,#000 26%,#000 60%,transparent 84%);
-webkit-mask-composite:source-in;
mask:radial-gradient(54% 74% at 50% 50%,transparent 34%,#000 54%,rgba(0,0,0,.55) 72%,transparent 96%) intersect,linear-gradient(transparent,#000 26%,#000 60%,transparent 84%);
opacity:.34}
/* rangka lampu atap: deretan titik lampu kecil + pendar */
.xb-play .xc::after{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw);width:100vw;top:-64px;height:120px;pointer-events:none;
background:
radial-gradient(circle at 14% 30px,#fff 0 1.5px,rgba(170,200,255,.3) 2.5px,transparent 14px),
radial-gradient(circle at 26% 22px,#fff 0 1.5px,rgba(170,200,255,.3) 2.5px,transparent 14px),
radial-gradient(circle at 74% 22px,#fff 0 1.5px,rgba(170,200,255,.3) 2.5px,transparent 14px),
radial-gradient(circle at 86% 30px,#fff 0 1.5px,rgba(170,200,255,.3) 2.5px,transparent 14px),
radial-gradient(circle at 6% 40px,rgba(255,255,255,.8) 0 1.2px,rgba(255,90,110,.28) 2.5px,transparent 12px),
radial-gradient(circle at 94% 40px,rgba(255,255,255,.8) 0 1.2px,rgba(255,90,110,.28) 2.5px,transparent 12px);
opacity:.55}
@media (max-width:640px){ .xb-play .xc::before{top:-60px;height:560px} .xb-play .xc::after{display:none} }
/* ===== 13 Nov · penanda pemain lebih keren: badge potongan XSERIES + angka jersey Dharma Gothic =====
glow pindah ke filter di .xc-pin karena clip-path memotong box-shadow */
.xb-play .xc-p .xc-pin{width:30px;height:46px;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tc) 55%,transparent)) drop-shadow(0 3px 3px rgba(0,0,0,.55))}
.xb-play .xc-p .xc-pin b{--cc-s:7px;--crs:1px;--cks:1px;position:relative;width:30px;height:32px;padding-top:2px;border-radius:0;clip-path:var(--chamf-s);
background:linear-gradient(170deg,color-mix(in srgb,var(--tc) 55%,#fff) 0,var(--tc) 42%,color-mix(in srgb,var(--tc) 72%,#000) 100%);
color:var(--ti);font:700 22px/1 var(--dh);letter-spacing:0;box-shadow:none}
.xb-play .xc-p .xc-pin b::before{content:"";position:absolute;inset:0;clip-path:var(--chamf-o);background:rgba(255,255,255,.55);pointer-events:none}
.xb-play .xc-p .xc-pin::after{top:32px;height:14px}
.xb-play .xc-p.sub .xc-pin b{background:rgba(5,8,30,.9);color:var(--tc)}
.xb-play .xc-p.sub .xc-pin b::before{background:var(--tc)}
.xb-play .xc-p.gold .xc-pin{filter:drop-shadow(0 0 10px rgba(255,199,48,.9)) drop-shadow(0 3px 3px rgba(0,0,0,.55))}
.xb-play .xc-p.gold .xc-pin b{box-shadow:none;animation:none}
.xb-play .xc-p.gold .xc-pin b::before{background:#fff}
.xb-play .xc-p.pick .xc-pin{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px var(--gold))}
.xb-play .xc-p.pick .xc-pin b{box-shadow:none}
.xb-play .xc-sh{border-width:1.5px}
@media (max-width:640px){
.xb-play .xc-p .xc-pin{width:26px;height:40px}
.xb-play .xc-p .xc-pin b{--cc-s:6px;width:26px;height:28px;font-size:19px}
.xb-play .xc-p .xc-pin::after{top:28px;height:12px}
}
/* ===== 13 Nov · hero memudar ke hitam di bagian bawah, menyambung mulus ke section 2 ===== */
body[data-hero="e"] .hero-shade { background:
radial-gradient(60% 34% at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 100%),
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 56%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.9) 92%, #000 100%); }
/* ===== 13 Nov · headline hero benar-benar di tengah ruang kosong (antara bawah navbar dan atas judul besar),
bukan di tengah layar — sebelumnya jarak atas ±2x jarak bawah ===== */
body[data-hero="e"] .hero-copy { position: relative; top: auto; transform: none; order: 1; flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding-top: 76px; padding-bottom: 8px; }
body[data-state="live"][data-hero="e"] .hero-copy { top: auto; padding-top: 116px; }
@media (max-width: 640px) {
body[data-hero="e"] .hero-copy { padding-top: 64px; }
body[data-state="live"][data-hero="e"] .hero-copy { padding-top: 104px; }
}
/* ===== 13 Nov · identitas key visual XSERIES: lampu sorot sisi kiri cyan, sisi kanan merah, menembus kabut =====
sama seperti KV lineup/tiket XSERIES-3; kebetulan cocok dengan tim kiri (LYN, cyan) dan tim kanan (NOV, merah) */
.xb-play .xc::after{top:-70px;height:640px;opacity:1;
background:
conic-gradient(from 113deg at 8% 0,transparent 0deg,rgba(0,255,239,.12) 4deg,rgba(0,255,239,.22) 8deg,rgba(0,255,239,.12) 12deg,transparent 16deg),
conic-gradient(from 140deg at 22% 0,transparent 0deg,rgba(0,255,239,.1) 3deg,rgba(0,255,239,.17) 5deg,rgba(0,255,239,.1) 7deg,transparent 10deg),
conic-gradient(from 231deg at 92% 0,transparent 0deg,rgba(255,40,52,.12) 4deg,rgba(255,40,52,.22) 8deg,rgba(255,40,52,.12) 12deg,transparent 16deg),
conic-gradient(from 210deg at 78% 0,transparent 0deg,rgba(255,40,52,.1) 3deg,rgba(255,40,52,.17) 5deg,rgba(255,40,52,.1) 7deg,transparent 10deg),
radial-gradient(24% 30% at 12% 52%,rgba(0,255,239,.1),transparent 72%),
radial-gradient(24% 30% at 88% 52%,rgba(255,40,52,.1),transparent 72%);
-webkit-mask:linear-gradient(transparent,#000 9%,#000 52%,transparent 82%);mask:linear-gradient(transparent,#000 9%,#000 52%,transparent 82%)}
/* lantai lapangan ikut terkena sorot: pendar cyan di sisi kiri, merah di sisi kanan */
.xb-play .xc-turf{background:
radial-gradient(22% 70% at 4% 50%,rgba(0,255,239,.16),transparent 75%),
radial-gradient(22% 70% at 96% 50%,rgba(255,40,60,.16),transparent 75%),
radial-gradient(3.2% 34% at 27% 20%,rgba(170,195,255,.22),transparent 70%),
radial-gradient(3.2% 34% at 47% 18%,rgba(170,195,255,.18),transparent 70%),
radial-gradient(3.2% 34% at 64% 20%,rgba(170,195,255,.2),transparent 70%),
radial-gradient(3.2% 34% at 82% 22%,rgba(150,220,255,.16),transparent 70%),
radial-gradient(60% 90% at 50% 30%,rgba(78,74,230,.5),transparent 75%),
repeating-linear-gradient(90deg,rgba(0,0,0,.26) 0 1px,transparent 1px 1.25%),
repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 2.5%),
repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 1.25%),
linear-gradient(#202a7a,#141a52 60%,#10143e)}
@media (max-width:640px){ .xb-play .xc::after{display:block;top:-50px;height:560px} }
/* ===== 13 Nov · X-Card ganti desain: identitas key visual XSERIES =====
bentuk potongan miring brand (kiri-atas & kanan-bawah), panggung gelap + sorot lampu dari atas & kabut bawah
seperti KV, logo X besar samar di belakang ikon, indeks sudut ala kartu remi (X kiri-atas, X terbalik kanan-bawah),
judul putih miring seperti judul hero. X-Card = cyan, President Card = merah (dua warna KV). */
.xball .xk-c{--c:var(--pri);--cg:0,255,239;--cut:polygon(11% 0,100% 0,100% 92.14%,89% 100%,0 100%,0 7.86%);
border-radius:0;clip-path:var(--cut);box-shadow:none;
background:
url(../img/grain.png) 0 0/180px auto,
conic-gradient(from 160deg at 50% -6%,transparent 0deg,rgba(var(--cg),.16) 14deg,rgba(var(--cg),.28) 20deg,rgba(var(--cg),.16) 26deg,transparent 40deg),
radial-gradient(90% 34% at 50% 104%,rgba(var(--cg),.34),transparent 70%),
radial-gradient(70% 50% at 50% 46%,#0c0e15,#030407 80%);
background-blend-mode:soft-light,normal,normal,normal}
.xball .xk-c.pres{--c:var(--red);--cg:255,40,52}
.xball .xbh .xk-fl .xk-c{background-size:180px auto,auto,auto,auto;background-position:0 0,0 0,0 0,0 0}
/* tidak ada lagi gelap tengah bertekstur marmer; ganti logo X samar besar di belakang ikon */
.xball .xk-c::before{border-radius:0;inset:22% 8% 30%;background:rgba(var(--cg),.07);-webkit-mask:url(../img/hero-x.svg) center/contain no-repeat;mask:url(../img/hero-x.svg) center/contain no-repeat}
/* garis tepi tipis mengikuti potongan miring */
.xball .xk-c>.xk-fr{inset:0;background:linear-gradient(165deg,rgba(var(--cg),.95),rgba(255,255,255,.14) 38%,rgba(255,255,255,.08) 62%,rgba(var(--cg),.7));filter:none;
clip-path:polygon(evenodd,11% 0,100% 0,100% 92.14%,89% 100%,0 100%,0 7.86%,11% 0,
calc(11% + .8px) 1.5px,calc(100% - 1.5px) 1.5px,calc(100% - 1.5px) calc(92.14% - .8px),calc(89% - .8px) calc(100% - 1.5px),1.5px calc(100% - 1.5px),1.5px calc(7.86% + .8px),calc(11% + .8px) 1.5px)}
/* indeks sudut ala kartu remi */
.xball .xk-c>.xk-gls::before,.xball .xk-c>.xk-gls::after{content:"";position:absolute;width:10cqi;height:7cqi;background:var(--c);-webkit-mask:url(../img/hero-x.svg) center/contain no-repeat;mask:url(../img/hero-x.svg) center/contain no-repeat;filter:drop-shadow(0 0 1.5cqi rgba(var(--cg),.7))}
.xball .xk-c>.xk-gls::before{left:7cqi;top:12cqi}
.xball .xk-c>.xk-gls::after{right:7cqi;bottom:12cqi;rotate:180deg}
/* tipografi */
.xball .xbh .xk-ty{color:var(--c);opacity:1;text-shadow:0 0 3cqi rgba(var(--cg),.5)}
.xball .xk-c .xk-t{color:#fff;transform:skewX(-8deg);text-shadow:0 0 4cqi rgba(var(--cg),.45),0 .5cqi 0 rgba(0,0,0,.7)}
.xball .xk-ic{fill:var(--c);filter:drop-shadow(0 0 4cqi rgba(var(--cg),.5))}
.xball .xk-ic .st{stroke:var(--c)}
.xball .xbh .xk-cap{transform:skewX(-8deg)}
.xball .xk-lg{filter:drop-shadow(0 0 2cqi rgba(var(--cg),.35))}
.xball .xk-c>.xk-gls{border-radius:0}
/* muka belakang ikut gelap, tapi tetap ada sorot & bentuk yang sama */
.xball .xbh .xk-bk::before{inset:0;-webkit-mask:none;mask:none;background:radial-gradient(ellipse 90% 80% at 50% 55%,rgba(0,0,0,.7),rgba(0,0,0,.35) 70%,transparent)}
/* slider: redup & cahaya belakang mengikuti bentuk dan warna kartu */
.xball .xk-cf .xk-fl::after{border-radius:0;clip-path:polygon(11% 0,100% 0,100% 92.14%,89% 100%,0 100%,0 7.86%)}
.xball .xk-cf .xk-fl:has(.pres)::before{background:radial-gradient(closest-side,rgba(255,40,52,.34),transparent)}
.xball .xk-cf .xk-fl:not(.is-on){box-shadow:none}
.xball .xk-cf:has(.is-on .pres) .cf-ty{color:var(--red)}
/* ===== 13 Nov · lebar konten dibatasi 1200px untuk semua section di bawah hero (layar besar tidak terlalu melebar) =====
rel geser horizontal tetap mentok ke tepi layar, tapi kartu pertamanya sejajar dengan tepi konten */
.page > section { max-width: 1200px; margin-inline: auto; }
.page .rail { --ri: max(var(--gut), calc(50vw - 600px)); margin-inline: calc(50% - 50vw); padding-inline: var(--ri); scroll-padding-inline: var(--ri); }
/* ===== 13 Nov · Empat Tim: subtext dihapus, tombol pindah ke kanan (link "See the teams" di sebelah kirinya) ===== */
.tm-foot { justify-content: flex-end; gap: 28px; }
/* ===== 13 Nov · kartu pemain jadi grid tanpa scroll =====
12 kartu tampil rapi: 6 kolom x 2 baris di desktop, 4 x 3 di tablet, 2 kolom (8 kartu) di ponsel; sisanya lewat "See all players" */
.pc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pc-grid .pcard { flex: none; width: auto; }
.pc-grid .pcard:nth-child(n+13) { display: none; }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pc-grid .pcard:nth-child(n+9) { display: none; } }
/* ===== 13 Nov · tombol Empat Tim pindah ke kanan judul ===== */
.row-head .tm-foot { margin-top: 0; flex: none; }
/* ===== 13 Nov · Hero: identitas key visual XSERIES lebih terasa =====
1) sorot lampu panggung dari atas: cyan dari kiri, merah dari kanan (sama dengan KV & section xBall)
2) logo X besar terbelah dua warna (cyan | merah) samar di belakang kalimat
3) judul PLAY DIFFERENT diberi pinggiran split cyan kiri / merah kanan */
.hero-kv { display: none; }
body[data-hero="e"] .hero-kv { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
body[data-hero="e"] .hero-kv::after { content: ""; position: absolute; inset: 0;
background:
conic-gradient(from 118deg at 4% -4%, transparent 0deg, rgba(0,255,239,.16) 5deg, rgba(0,255,239,.34) 9deg, rgba(0,255,239,.16) 13deg, transparent 18deg),
conic-gradient(from 146deg at 20% -4%, transparent 0deg, rgba(0,255,239,.12) 3deg, rgba(0,255,239,.24) 6deg, rgba(0,255,239,.12) 9deg, transparent 12deg),
conic-gradient(from 224deg at 96% -4%, transparent 0deg, rgba(255,40,52,.16) 5deg, rgba(255,40,52,.34) 9deg, rgba(255,40,52,.16) 13deg, transparent 18deg),
conic-gradient(from 202deg at 80% -4%, transparent 0deg, rgba(255,40,52,.12) 3deg, rgba(255,40,52,.24) 6deg, rgba(255,40,52,.12) 9deg, transparent 12deg);
-webkit-mask: linear-gradient(#000 0, #000 34%, transparent 74%); mask: linear-gradient(#000 0, #000 34%, transparent 74%); }
body[data-hero="e"] .hero-kv::before { content: ""; position: absolute; left: 50%;
top: calc(38px + 50% - 6.8vw); height: calc((100% - 76px - 13.6vw) * .84); aspect-ratio: 43.8 / 29.4; transform: translate(-50%, -50%);
background: linear-gradient(90deg, #00FFEF 0 50%, #FF2232 50% 100%);
-webkit-mask: url(../img/hero-x.svg) center / contain no-repeat; mask: url(../img/hero-x.svg) center / contain no-repeat; opacity: .2; }
body[data-hero="e"] .hero-title span { text-shadow: -.018em 0 0 rgba(0,255,239,.85), .018em 0 0 rgba(255,34,40,.85); }
@media (max-width: 640px) {
body[data-hero="e"] .hero-kv::before { top: 36%; height: auto; width: 92vw; }
body[data-hero="e"] .hero-kv::after { background-size: 100% 70%; background-repeat: no-repeat; }
}
/* X dibuat lebih halus: memudar ke bawah, tidak jadi blok warna; split judul lebih tipis */
body[data-hero="e"] .hero-kv::before { opacity: .16;
-webkit-mask: url(../img/hero-x.svg) center / contain no-repeat, linear-gradient(#000 20%, rgba(0,0,0,.35) 60%, transparent 96%); -webkit-mask-composite: source-in;
mask: url(../img/hero-x.svg) center / contain no-repeat, linear-gradient(#000 20%, rgba(0,0,0,.35) 60%, transparent 96%); mask-composite: intersect; }
body[data-hero="e"] .hero-title span { text-shadow: -.011em 0 0 rgba(0,255,239,.75), .011em 0 0 rgba(255,34,40,.75); }
/* ===== 13 Nov · Hero: logo X di tengah dihapus; lampu dibuat lebih nyata =====
berkas lampu diburamkan (volumetrik, tanpa tepi tajam), ada pendar di sumber lampu,
dan cahaya cyan/merah jatuh lembut ke ruangan, bukan berupa bidang warna yang ditempel */
body[data-hero="e"] .hero-kv::before { opacity: 1; top: -10%; left: -10%; right: -10%; bottom: 0; height: auto; width: auto; aspect-ratio: auto; transform: none;
filter: blur(30px);
background:
radial-gradient(9% 14% at 13% 2%, rgba(170,255,250,.42), transparent 70%),
radial-gradient(9% 14% at 87% 2%, rgba(255,170,170,.38), transparent 70%),
radial-gradient(42% 58% at 4% 8%, rgba(0,255,239,.2), transparent 72%),
radial-gradient(42% 58% at 96% 8%, rgba(255,40,52,.2), transparent 72%); }
body[data-hero="e"] .hero-kv::after { inset: -6% -6% 0; filter: blur(14px);
background:
conic-gradient(from 132deg at 14% 0, transparent 0deg, rgba(0,255,239,.05) 6deg, rgba(0,255,239,.17) 13deg, rgba(0,255,239,.05) 20deg, transparent 27deg),
conic-gradient(from 152deg at 22% 0, transparent 0deg, rgba(0,255,239,.04) 4deg, rgba(0,255,239,.11) 8deg, rgba(0,255,239,.04) 12deg, transparent 16deg),
conic-gradient(from 201deg at 86% 0, transparent 0deg, rgba(255,40,52,.05) 6deg, rgba(255,40,52,.17) 13deg, rgba(255,40,52,.05) 20deg, transparent 27deg),
conic-gradient(from 192deg at 78% 0, transparent 0deg, rgba(255,40,52,.04) 4deg, rgba(255,40,52,.11) 8deg, rgba(255,40,52,.04) 12deg, transparent 16deg);
-webkit-mask: linear-gradient(#000 0, rgba(0,0,0,.8) 30%, transparent 72%); mask: linear-gradient(#000 0, rgba(0,0,0,.8) 30%, transparent 72%); }
@media (max-width: 640px) {
body[data-hero="e"] .hero-kv::before { top: -10%; width: auto; height: auto; }
}
/* split cyan/merah di judul PLAY DIFFERENT dihapus (terlalu ramai) */
body[data-hero="e"] .hero-title span { text-shadow: none; }
/* ===== 13 Nov · Jadwal (masa dekat event) pakai layout kartu hasil =====
atas: label + pill, judul besar, info venue, tab hari | kanan: countdown + Two-Day Pass
bawah: kartu tabel per hari, baris bergaris tipis, jam kick-off besar rata kanan; seluruh baris = link tiket GOERS */
.sch-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 24px; }
.sch-id { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sch-id .display { margin: 2px 0 0; }
.sch-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border: 1px solid rgba(0,255,239,.45); border-radius: 99px; color: var(--pri); font-size: 11px; letter-spacing: .08em; }
.sch-tabs { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sch-tab { height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: #CFCFD4; font: 600 13px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sch-tab:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.sch-tab.is-on { background: #fff; border-color: #fff; color: #000; }
.sch-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
.sch-side .countdown div { min-width: 64px; padding: 8px 10px 10px; }
.sch-side .countdown b { font-size: 40px; }
.sch-side .countdown span { font-size: 10px; }
.sch-card { position: relative; background: var(--s1); clip-path: var(--chamf-l); }
.sch-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ln); clip-path: var(--ring-l); }
.sch-hd { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 30px 40px 18px; }
.sch-hd h3 { font: 700 36px/.9 var(--dh); text-transform: uppercase; letter-spacing: .005em; }
.sch-hd p { display: flex; align-items: center; gap: 14px; }
.sch-ok { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; background: rgba(0,255,239,.12); color: var(--pri); font: 600 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.sch-th, .sch-row { display: grid; grid-template-columns: 64px 1fr 180px 120px 110px; align-items: center; gap: 16px; padding: 0 40px; }
.sch-th { padding-bottom: 12px; border-bottom: 1px solid var(--ln); font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.sch-th span:nth-child(4) { text-align: right; }
.sch-row { min-height: 84px; border-bottom: 1px solid var(--ln); transition: background .2s; }
.sch-row:last-child { border-bottom: 0; }
.sch-row:hover { background: rgba(255,255,255,.035); }
.sch-no { font: 500 22px/1 var(--body); color: #CFCFD4; font-variant-numeric: tabular-nums; }
.sch-mu { display: flex; align-items: center; gap: 12px; font: 700 28px/1 var(--dh); text-transform: uppercase; letter-spacing: .02em; min-width: 0; }
.sch-mu img { width: 34px; height: 34px; }
.sch-mu i { font: 600 12px/1 var(--body); font-style: normal; color: var(--dim); }
.sch-mu.dim { color: var(--dim); }
.sch-g { font: 600 13px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.sch-t { font: 700 34px/1 var(--dh); text-align: right; font-variant-numeric: tabular-nums; }
.sch-go { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1 var(--dh); text-transform: uppercase; color: var(--pri); }
.sch-go .ic { width: .8em; height: .8em; }
.sch-row:hover .sch-go { color: #fff; }
@media (max-width: 900px) {
.sch-top { flex-direction: column; align-items: stretch; }
.sch-side { align-items: stretch; }
.sch-side .countdown div { flex: 1; min-width: 0; }
.sch-th, .sch-row { grid-template-columns: 40px 1fr auto; padding: 0 20px; }
.sch-th span:nth-child(3), .sch-th span:nth-child(5), .sch-row .sch-go { display: none; }
.sch-th span:nth-child(4) { text-align: right; }
.sch-row { grid-template-areas: "no mu t" "no g t"; row-gap: 6px; padding-top: 16px; padding-bottom: 16px; min-height: 0; }
.sch-no { grid-area: no; } .sch-mu { grid-area: mu; } .sch-g { grid-area: g; } .sch-t { grid-area: t; }
.sch-hd { padding: 22px 20px 14px; }
.sch-hd h3 { font-size: 28px; }
}
@media (max-width: 640px) {
.sch-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sch-tab { flex: none; height: 36px; padding: 0 14px; font-size: 12px; }
.sch-mu { font-size: 20px; gap: 8px; flex-wrap: wrap; }
.sch-mu img { width: 24px; height: 24px; }
.sch-t { font-size: 26px; }
.sch-no { font-size: 18px; }
.sch-hd p .mono { display: none; }
}
/* ===== 13 Nov · Berita dirapikan: judul + tombol "All news" di atas (seperti section lain),
lalu video unggulan kiri dan 4 berita kanan dengan tinggi yang sama ===== */
.news { display: block; }
.news-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: stretch; }
.news-grid .feature { aspect-ratio: auto; min-height: 100%; }
.news-grid .news-list { display: grid; grid-template-rows: repeat(4, 1fr); gap: 8px; }
.news-grid .ni { height: 100%; }
@media (max-width: 1100px) { .news-grid { grid-template-columns: 1fr; } .news-grid .feature { aspect-ratio: 16/10; } }
@media (max-width: 640px) { .news-grid .feature { aspect-ratio: 4/5; } }
/* tab "All games": keempat laga dalam satu kartu, hari tertulis di kolom Game */
.sch-g em { display: block; margin-bottom: 6px; font-style: normal; color: #fff; }
@media (max-width: 900px) { .sch-g em { display: inline; margin: 0 6px 0 0; } }
/* GOS family: tinggi baris ikut kartu merah, bukan tinggi asli foto portrait */
.family { align-items: stretch; }
.family-card { min-height: 340px; }
.family-photo { min-height: 340px; }
.family-photo img { position: absolute; inset: 0; object-position: center 52%; }
@media (max-width: 640px) { .family-card, .family-photo { min-height: 0; } .family-photo { aspect-ratio: 4/3; } }
/* ===== 13 Nov · lapangan: nomor jadi figur pemain kecil berdiri di lapangan, nomor punggung di badge atas kepala ===== */
.xb-play .xc-p .xc-pin{display:flex;flex-direction:column;align-items:center;gap:2px;width:24px;height:auto;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tc) 40%,transparent)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.xb-play .xc-p .xc-pin::after{display:none}
.xb-play .xc-p .xc-pin b{--cc-s:5px;width:22px;height:19px;padding-top:1px;font-size:15px;flex:none}
.xc-fig{display:block;width:23px;height:46px;flex:none;overflow:visible;transition:opacity .4s}
.xc-fig .sk{fill:var(--sk)} .xc-fig .hr{fill:var(--hr)}
.xc-fig .sh,.xc-fig .so{fill:var(--tc);transition:fill .4s}
.xc-fig .sd{fill:rgba(0,0,0,.24)}
.xc-fig .st{fill:#14161f} .xc-fig .bt{fill:#0b0c10}
.xc-p.b .xc-fig .st{fill:#f2f2f4}
.xc-fig.gk .sh{fill:#C6F25A}
.xc-p.gold .xc-fig.gk .sh{fill:var(--tc)}
.xb-play .xc-p.sub .xc-fig{opacity:.38}
.xb-play .xc-sh{left:-13px;top:-13px;width:26px;height:26px}
@media (max-width:640px){
.xb-play .xc-p .xc-pin{width:20px;height:auto}
.xb-play .xc-p .xc-pin b{--cc-s:4px;width:18px;height:16px;font-size:12.5px}
.xc-fig{width:15px;height:30px}
.xb-play .xc-sh{left:-10px;top:-10px;width:20px;height:20px}
}
/* ===== 13 Nov · hero poster ala VNL: kata raksasa + pemain di depan huruf + bar info ===== */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero.hero-vnl { grid-template-columns: 100%; }
.hero.hero-vnl { display: grid; grid-template-rows: 1fr auto; height: 100svh; min-height: 680px; background: #E2241D; justify-content: stretch; }
.hv-stage { position: relative; min-height: 0; padding: 84px var(--gut) 0; overflow: hidden; }
.hv-word { display: block; width: 100%; height: 100%; overflow: visible; }
.hv-word text { font: 700 300px/1 var(--dh); fill: #EFE8DD; text-transform: uppercase; }
.hv-cast { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hv-p { position: absolute; bottom: 0; height: 60%; width: auto; filter: drop-shadow(0 18px 28px rgba(60,0,0,.45)); }
/* cutout-nya terpotong di sisi foto (lengan/kaki): pemain dibuat bust besar yang dipotong bar bawah, saling menumpuk, jadi potongannya tak terlihat */
.hv-p1 { z-index: 2; left: 9%; translate: -50% 55%; height: 118%; }
.hv-p2 { z-index: 4; left: 29%; translate: -50% 54%; height: 112%; }
.hv-p3 { z-index: 5; left: 52%; translate: -50% 48%; height: 128%; }
.hv-p4 { z-index: 4; left: 72%; translate: -50% 54%; height: 112%; }
.hv-p5 { z-index: 3; left: 91%; translate: -50% 61%; height: 118%; }
.hv-bar { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px var(--gut) 26px; background: #0b0b0c; }
.hv-id { display: flex; align-items: center; gap: 16px; }
.hv-id img { height: 30px; width: auto; }
.hv-meta { font: 700 clamp(18px, 1.5vw, 24px)/1 var(--dh); text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.hero-vnl .hv-meta[data-show], .hero-vnl .hv-acts[data-show] { display: none; }
body[data-state="pre"] .hero-vnl [data-show~="pre"], body[data-state="near"] .hero-vnl [data-show~="near"],
body[data-state="live"] .hero-vnl [data-show~="live"], body[data-state="between"] .hero-vnl [data-show~="between"] { display: block; }
body[data-state="pre"] .hv-acts[data-show~="pre"], body[data-state="near"] .hv-acts[data-show~="near"],
body[data-state="live"] .hv-acts[data-show~="live"], body[data-state="between"] .hv-acts[data-show~="between"] { display: flex; }
.hv-acts { justify-content: flex-end; gap: 10px; }
@media (max-width: 1024px) {
.hv-bar { grid-template-columns: 1fr auto; }
/* meta tetap tampil di panel */
}
@media (max-width: 640px) {
.hero.hero-vnl { height: auto; min-height: 0; grid-template-rows: auto auto; }
.hv-stage { height: 76svh; min-height: 520px; padding-top: 76px; }
.hv-words { height: 64%; }
.hv-p2, .hv-p4 { display: none; }
.hv-p1 { left: 12%; height: 96%; translate: -50% 60%; }
.hv-p5 { left: 88%; height: 96%; translate: -50% 62%; }
.hv-p3 { left: 50%; height: 104%; translate: -50% 46%; }
.hv-bar { grid-template-columns: 1fr; gap: 16px; padding: 20px var(--gut) 24px; }
.hv-acts { justify-content: stretch; }
.hv-acts .btn { flex: 1; }
}
/* ===== 13 Nov · latar hero ala KV XSERIES-3: arena gelap, sorot cyan kiri / merah kanan ===== */
.hero.hero-vnl { background: #07090c; }
.hv-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hv-bg i { position: absolute; display: block; }
.hv-arena { inset: -4%; background: url(../img/photos/arena.webp) center 30%/cover; filter: grayscale(1) blur(5px) contrast(1.2) brightness(.62); }
.hv-grade { inset: 0; mix-blend-mode: color; background: linear-gradient(90deg, #00E5D8 0%, #0FB3AA 30%, #4a4a4a 50%, #D9161E 70%, #FF2323 100%); }
.hv-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,6,9,.78) 0%, rgba(4,6,9,.2) 34%, rgba(4,6,9,0) 60%, rgba(4,6,9,.55) 100%); }
.hv-bm { z-index: 2; top: -30%; width: 70%; height: 150%; mix-blend-mode: screen; filter: blur(22px); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.hv-bm-l { left: -24%; background: repeating-conic-gradient(from 115deg at 50% 20%, rgba(0,255,239,0) 0deg, rgba(0,255,239,.55) 4deg, rgba(0,255,239,0) 9deg, rgba(0,255,239,0) 17deg); }
.hv-bm-r { right: -24%; background: repeating-conic-gradient(from 140deg at 50% 20%, rgba(255,38,38,0) 0deg, rgba(255,38,38,.6) 4deg, rgba(255,38,38,0) 9deg, rgba(255,38,38,0) 17deg); }
.hv-haze { z-index: 2; inset: auto 0 0; height: 70%; mix-blend-mode: screen; background: radial-gradient(40% 60% at 8% 100%, rgba(0,255,239,.38), transparent 72%), radial-gradient(40% 60% at 92% 100%, rgba(255,34,34,.42), transparent 72%), radial-gradient(30% 40% at 50% 100%, rgba(255,255,255,.08), transparent 70%); }
.hv-word { position: relative; z-index: 1; }
.hv-word text { fill: url(#hvfill); }
.hv-cast { z-index: 3; }
.hv-p1, .hv-p2 { filter: drop-shadow(-10px 0 22px rgba(0,255,239,.35)) drop-shadow(0 18px 28px rgba(0,0,0,.55)); }
.hv-p4, .hv-p5 { filter: drop-shadow(10px 0 22px rgba(255,40,40,.4)) drop-shadow(0 18px 28px rgba(0,0,0,.55)); }
.hv-p3 { filter: drop-shadow(0 0 30px rgba(0,0,0,.6)); }
/* ===== 13 Nov · navbar: sembunyi saat scroll ke bawah, muncul lagi saat scroll ke atas ===== */
.nav { transition: top .2s, translate .35s cubic-bezier(.2,.7,.2,1); }
.nav.is-hidden { translate: 0 calc(-100% - 48px); }
.nav.is-hidden .nav-logo { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
/* foto HD interior Indonesia Arena (FIBA WC 2023 · Diegodlh, CC BY-SA 4.0, Wikimedia Commons), tanpa blur, di-grade cyan kiri / merah kanan */
.hv-arena { inset: 0; background: url(../img/photos/arena-ia.webp) center 18%/cover; filter: contrast(1.15) brightness(.64); }
.hv-bm { filter: blur(10px); }
@media (max-width: 820px) { .hv-arena { background-image: url(../img/photos/arena-ia-m.webp); background-position: 50% 10%; } }
/* teks besar = PLAY DIFFERENT satu baris, ditarik selebar panggung; kepala pemain menutup sedikit bagian bawahnya */
.hv-words { position: relative; z-index: 1; height: 54%; }
.hv-words .hv-word { height: 100%; }
@media (max-width: 640px) { .hv-words { height: 44%; } .hv-arena { background-position: 50% 0; filter: contrast(1.15) brightness(.5); } }
/* ===== 13 Nov · hero full 100vh, panel menempel di bawah (sudut atas terpotong), section 2 menimpa hero + parallax ===== */
.hero.hero-vnl { position: sticky; top: 0; z-index: 0; grid-template-rows: 100%; height: 100svh; min-height: 640px; overflow: hidden; }
.hero.hero-vnl .hv-stage { height: 100%; }
/* teks besar: tinggi dibatasi supaya tidak terlalu ditarik ke bawah (maks ±1,6x proporsi asli) */
.hero-vnl .hv-words { height: min(54%, calc((100vw - 2 * var(--gut)) * .23)); margin-top: clamp(0px, 3vh, 40px); }
.hv-bar { --k: 40px; position: absolute; z-index: 6; left: 50%; bottom: 0; translate: -50% 0; width: max-content; max-width: calc(100% - 2 * var(--gut));
display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 76px 32px;
background: linear-gradient(90deg, #00FFEF, rgba(255,255,255,.35) 50%, #FF2828);
clip-path: polygon(0 100%, 0 var(--k), var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%); }
.hv-bar::before { content: ""; position: absolute; inset: 1.5px 1.5px 0; pointer-events: none; background: var(--bg);
clip-path: polygon(0 100%, 0 calc(var(--k) - 1px), calc(var(--k) - 1px) 0, calc(100% - var(--k) + 1px) 0, 100% calc(var(--k) - 1px), 100% 100%); }
.hv-bar > * { position: relative; z-index: 1; }
.hv-bar .hv-meta { font: 700 clamp(34px, 3.5vw, 60px)/.92 var(--dh); text-transform: uppercase; text-align: center; text-wrap: balance; }
.hv-bar .hv-acts { justify-content: center; }
.page { position: relative; z-index: 2; background: var(--bg); }
/* parallax: lapisan belakang bergerak paling lambat, pemain paling cepat (--hv-y = scrollY, diisi JS) */
.hv-bg { translate: 0 calc(var(--hv-y, 0px) * -.08); }
.hero-vnl .hv-words { translate: 0 calc(var(--hv-y, 0px) * -.2); }
.hv-cast { will-change: translate; }
.hv-cast { translate: 0 calc(var(--hv-y, 0px) * -.36); }
/* panel tidak ikut parallax: tetap menempel di bawah, section 2 (warna sama) naik menutupinya → tidak ada celah */
.hero-vnl .hv-bar { translate: -50% 0; }
@media (max-width: 640px) {
.hero.hero-vnl { height: 100svh; min-height: 600px; }
.hero.hero-vnl .hv-stage { height: 100%; min-height: 0; }
.hero-vnl .hv-words { height: min(44%, calc((100vw - 2 * var(--gut)) * .5)); margin-top: 9vh; }
.hv-bar { --k: 22px; left: 0; right: 0; width: auto; max-width: none; padding: 26px 20px 20px; gap: 14px; }
.hero-vnl .hv-bar { translate: none; }
.hv-bar .hv-meta { font-size: 36px; }
.hv-bar .hv-acts { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hv-bg, .hero-vnl .hv-words, .hv-cast { translate: none; } .hero-vnl .hv-bar { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) and (max-width: 640px) { .hero-vnl .hv-bar { translate: none; } }
/* 13 Nov · "Play different" miring (tidak ada file italic Dharma → skew) */
.hero-vnl .hv-words .hv-word { transform: skewX(-9deg); transform-origin: 50% 50%; }
/* 13 Nov · performa: lapisan parallax jadi layer GPU sendiri (tidak digambar ulang tiap frame),
beam tanpa filter blur (lembutnya dari gradien), hero berhenti dirender saat sudah tertutup */
.hv-bg { will-change: translate; isolation: isolate; }
.hero-vnl .hv-words { will-change: translate; }
.hv-bm { filter: none; }
.hv-bm-l { background: repeating-conic-gradient(from 115deg at 50% 20%, rgba(0,255,239,0) 0deg, rgba(0,255,239,.18) 2.5deg, rgba(0,255,239,.42) 4.5deg, rgba(0,255,239,.18) 6.5deg, rgba(0,255,239,0) 10deg, rgba(0,255,239,0) 17deg); }
.hv-bm-r { background: repeating-conic-gradient(from 140deg at 50% 20%, rgba(255,38,38,0) 0deg, rgba(255,38,38,.2) 2.5deg, rgba(255,38,38,.46) 4.5deg, rgba(255,38,38,.2) 6.5deg, rgba(255,38,38,0) 10deg, rgba(255,38,38,0) 17deg); }
.hero-vnl.is-covered .hv-stage, .hero-vnl.is-covered .hv-bar { visibility: hidden; }
/* "Play different" metal: krom (gradien vertikal + horizon gelap) + pantulan cyan/merah di ujung */
.hv-word .hv-tint { fill: url(#hvtint); mix-blend-mode: normal; }
/* ===== 13 Nov · background hero lebih tenang: stadion tetap ada tapi di-blur (efek depth of field, sudah di-blur di file, bukan CSS filter), lebih gelap, sorot lampu diredam ===== */
.hv-arena { background-image: url(../img/photos/arena-ia-soft.webp?v=2); filter: contrast(1.05) brightness(.6) saturate(.9); }
@media (max-width: 820px) { .hv-arena { background-image: url(../img/photos/arena-ia-m-soft.webp?v=2); } }
@media (max-width: 640px) { .hv-arena { filter: contrast(1.05) brightness(.42) saturate(.85); } }
.hv-grade { opacity: .8; }
.hv-bm { opacity: .45; }
.hv-haze { opacity: .75; }
/* vignette: tepi & area di belakang judul lebih gelap supaya teks metal dan pemain lebih menonjol */
.hv-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: radial-gradient(120% 90% at 50% 55%, rgba(4,6,9,0) 40%, rgba(4,6,9,.55) 100%), linear-gradient(180deg, rgba(4,6,9,.6) 0%, rgba(4,6,9,.3) 28%, rgba(4,6,9,0) 52%); }
/* 13 Nov · judul tidak terlalu ditarik ke bawah: maks ±1,15x proporsi asli (sebelumnya 1,45x) */
@media (min-width: 641px) { .hero-vnl .hv-words { height: min(46%, calc((100vw - 2 * var(--gut)) * .185)); margin-top: clamp(0px, 6vh, 72px); } }
/* 13 Nov · metal = tekstur logam brushed halus (tanpa batas tegas, tanpa efek timbul) */
.hv-word text:not(.hv-tint) { fill: url(#hvtex); }
/* ===== 13 Nov · Empat Tim kembali selebar tepi halaman (full-bleed margin), section lain tetap 1200px ===== */
.page > section.teams { max-width: none; }
/* ===== 13 Nov · lapangan lebih simpel: lantai hitam polos seperti kartu, garis tepi & garis lapangan
mengikuti warna kartu yang aktif (X-Card = cyan, President Card = merah). Tanpa ubin, pantulan lampu, garis emas. ===== */
.xb-play .xc{--lc:0,255,239}
.xball:has(.xk-cf .xk-fl.is-on .pres) .xb-play .xc{--lc:255,40,52}
.xb-play .xc-stage{background:none}
.xb-play .xc-turf{background:radial-gradient(70% 70% at 50% 50%,#0c0e15,#05060a 85%)}
.xb-play .xc-apron{background:#030407;box-shadow:0 0 0 1px rgba(var(--lc),.4),0 0 120px 10px rgba(var(--lc),.07)}
.xb-play .xc-edge,.xb-play .xc-floor::before,.xb-play .xc-floor::after{background:linear-gradient(#0b0d13,#020305)}
.xb-play .xc-ln *{stroke:rgba(var(--lc),.7);stroke-width:1.5}
.xb-play .xc-ln .sd{stroke:rgb(var(--lc));stroke-width:2}
.xb-play .xc-ln .dt{stroke:rgba(var(--lc),.7);stroke-width:5}
.xb-play .xc-logo{background:rgba(255,255,255,.1)}
/* ===== 13 Nov · Jadwal: judul rata tengah, countdown jadi eyebrow kecil di atas judul,
tab hari + Two-Day Pass satu baris di tengah ===== */
.sched .sch-top { flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 32px; text-align: center; }
.sched .sch-top .display { margin: 4px 0 0; }
.sch-cd { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.sch-cd .sch-cd-l { font: 600 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sched .sch-cd div { display: flex; align-items: baseline; gap: 4px; min-width: 0; padding: 0; background: none; clip-path: none; }
.sched .sch-cd b { display: inline; font: 700 26px/1 var(--dh); color: var(--pri); }
.sched .sch-cd span:not(.sch-cd-l) { font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.sch-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sch-bar .sch-tabs { margin-top: 0; }
.sch-bar .btn { height: 40px; }
@media (max-width: 640px) {
.sched .sch-cd { width: auto; gap: 10px; }
.sched .sch-cd div { flex: none; }
.sched .sch-cd b { font-size: 22px; }
.sch-cd .sch-cd-l { display: none; }
.sch-bar { flex-direction: column; align-items: stretch; width: 100%; }
.sch-bar .sch-tabs { justify-content: center; }
}
/* ===== 13 Nov · countdown eyebrow dibungkus bentuk (strip potongan miring ala papan skor), tidak lagi teks lepas ===== */
.sched .sch-cd { align-items: stretch; gap: 0; height: 46px; background: var(--s2); clip-path: var(--chamf-s); }
.sched .sch-cd .sch-cd-l { display: flex; align-items: center; padding: 0 16px 0 18px; background: rgba(0,255,239,.12); color: var(--pri); font-size: 11px; }
.sched .sch-cd div { align-items: baseline; align-self: center; gap: 4px; padding: 0 14px; border-left: 1px solid rgba(255,255,255,.1); }
.sched .sch-cd .sch-cd-l + div { border-left: 0; }
.sched .sch-cd div:last-child { padding-right: 18px; }
.sched .sch-cd b { font-size: 26px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.sched .sch-cd { height: 42px; gap: 0; }
.sched .sch-cd div { padding: 0 11px; }
.sched .sch-cd div:first-of-type { padding-left: 16px; }
.sched .sch-cd div:last-child { padding-right: 16px; }
}
/* ===== 13 Nov · strip countdown diperkecil supaya tetap terasa eyebrow ===== */
.sched .sch-cd { height: 32px; --cc-s: 8px; }
.sched .sch-cd .sch-cd-l { padding: 0 12px 0 14px; font-size: 10px; letter-spacing: .1em; }
.sched .sch-cd div { gap: 3px; padding: 0 10px; }
.sched .sch-cd div:last-child { padding-right: 14px; }
.sched .sch-cd b { font-size: 18px; }
.sched .sch-cd span:not(.sch-cd-l) { font-size: 9px; }
@media (max-width: 640px) {
.sched .sch-cd { height: 30px; }
.sched .sch-cd .sch-cd-l { display: none; }
.sched .sch-cd div { padding: 0 9px; }
.sched .sch-cd div:first-of-type { padding-left: 14px; }
.sched .sch-cd div:last-child { padding-right: 14px; }
}
/* ===== 13 Nov · Jadwal: tab gaya garis bawah + jumlah laga di badge miring (sama dengan home-ui/index.html) ===== */
.sch-bar .sch-tabs { gap: 28px; }
.sched .sch-tab, .sched .sch-tab:hover, .sched .sch-tab.is-on { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--mut); font: 500 16px/1 var(--body); letter-spacing: 0; text-transform: none; }
.sched .sch-tab:hover { color: #fff; }
.sched .sch-tab.is-on { color: var(--pri); border-bottom-color: var(--pri); }
.sch-tab em { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; background: var(--s2); color: var(--mut); font: 600 13px/1 var(--body); font-style: normal; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.sch-tab.is-on em { background: rgba(0,255,239,.16); color: var(--pri); }
@media (max-width: 640px) { .sch-bar .sch-tabs { gap: 20px; } .sched .sch-tab { font-size: 14px; height: 36px; flex: none; } }
/* ===== 13 Nov · Pass di bawah tabel jadwal (poster tiket resmi XSERIES-3; disalin dari hero-pitch.css v432–v460) ===== */
.evp-hd { display: flex; align-items: center; gap: 16px; margin: 40px 0 4px; font: 600 14px/1.4 var(--body); color: #D6D6DC; text-align: center; white-space: nowrap; }
.evp-hd::before, .evp-hd::after { content: ""; flex: 1 1 0; min-width: 20px; height: 1px; background: rgba(255,255,255,.12); }
.evp-row { display: flex; gap: 14px; margin-top: 14px; }
.evp { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; display: flex; align-items: center; min-height: 160px; padding: 22px 0 8px 24px; color: #fff; }
.evp[hidden] { display: none; }
.evp::before, .evp-fr { content: ""; position: absolute; left: 0; right: 0; top: 14px; bottom: 0; --c: 14px; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c))); }
.evp::before { z-index: -2; background: linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 45%,transparent) 35%,color-mix(in srgb,var(--pc) 30%,transparent) 70%,color-mix(in srgb,var(--pc) 70%,transparent)); }
.evp-fr { z-index: -1; inset: 15px 1px 1px 1px; --c: 13.6px; transition: filter .15s; background:
radial-gradient(70% 120% at 0 100%,color-mix(in srgb,var(--pc) 30%,transparent),transparent 65%),
radial-gradient(50% 90% at 100% 40%,color-mix(in srgb,var(--pc) 22%,transparent),transparent 70%),
linear-gradient(90deg,color-mix(in srgb,var(--pc) 10%,#050506),#050506 40%); }
.evp::after { content: ""; position: absolute; left: 0; top: 2px; width: 76px; height: 32px; background: var(--pc); clip-path: polygon(0 12px,7px 0,calc(100% - 7px) 0,100% 12.5px,calc(100% - 12px) 100%,0 100%); }
.evp:hover .evp-fr { filter: brightness(1.35); }
.evp-tx { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-top: 8px; }
.evp-tx > b { display: block; font: 700 36px/.86 var(--dh); text-transform: uppercase; letter-spacing: .005em; color: #fff; -webkit-text-stroke: .8px #fff; transform: skewX(-10deg); transform-origin: left bottom; white-space: nowrap; }
.evp-tg { margin-top: 4px; margin-left: -2px; padding: 3px 8px 1px 6px; background: var(--pc); color: #000; font: 700 19px/1 var(--dh); -webkit-text-stroke: .5px #000; text-transform: uppercase; transform: skewX(-10deg); }
.evp-g { margin-top: 6px; font: 600 12.5px/1.2 var(--body); color: #E6E6EA; }
.evp-pr { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; font: 600 12px/1 var(--body); color: #B4B4BC; }
.evp-pr b { font: 700 22px/1 var(--dh); color: #fff; }
.evp-tk { position: absolute; top: 24px; right: 14px; height: calc(100% - 34px); width: auto; aspect-ratio: 430/268; max-width: 48%; object-fit: contain; object-position: right center; mix-blend-mode: screen; pointer-events: none;
-webkit-mask: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent); -webkit-mask-composite: source-in;
mask: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent); mask-composite: intersect; }
@media (max-width: 1280px) { .evp-tx > b { font-size: 32px; } }
@media (max-width: 1280px) and (min-width: 641px) { .evp-tk { max-width: 44%; } }
@media (max-width: 900px) and (min-width: 641px) { .evp-row { flex-wrap: wrap; } .evp { flex-basis: calc(50% - 7px); } }
@media (max-width: 640px) {
.evp-hd { gap: 10px; font-size: 12.5px; white-space: normal; }
.evp-hd::before, .evp-hd::after { min-width: 36px; }
.evp-row { flex-direction: column; gap: 8px; }
.evp { min-height: 128px; padding-left: 18px; }
.evp-tk { top: 22px; right: 10px; height: calc(100% - 30px); max-width: 50%; }
}
.evp-hd, .evp-g, .evp-pr { text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) { .sch-hd { flex-wrap: wrap; row-gap: 8px; } .sch-hd p { flex-wrap: wrap; gap: 8px 14px; } }
/* lokasi kini hanya ada di tabel, jadi di ponsel tetap tampil: baris sendiri di bawah judul kartu */
@media (max-width: 640px) { .sch-hd p { display: contents; } .sch-hd p .mono { display: block; order: 3; flex-basis: 100%; font-size: 11px; } }
/* ===== 13 Nov · tombol Tickets di tabel jadwal = tombol sekunder (btn-line), ikut menyala saat baris di-hover ===== */
.sch-go.btn { gap: 6px; color: #CFCFD4; font: 700 16px/1 var(--dh); }
.sch-row:hover .sch-go.btn { background: rgba(255,255,255,.08); color: #fff; }
.sch-row:hover .sch-go.btn::after { background: rgba(255,255,255,.6); }
/* ===== 13 Nov · kartu pemain kembali jadi carousel: rel mentok ke tepi layar, kartu pertama sejajar konten, panah kiri/kanan di kanan judul ===== */
.pc-rail .pcard { flex: 0 0 calc((min(100vw - 2 * var(--gut), 1200px) - 4 * 16px) / 5.3); }
.rail-arrows { display: flex; gap: 8px; }
.rail-btn.btn { width: 40px; padding: 0; }
@media (max-width: 1100px) { .pc-rail .pcard { flex-basis: calc((100vw - 2 * var(--gut) - 2 * 16px) / 3.3); } }
@media (max-width: 640px) { .pc-rail .pcard { flex-basis: 62%; } .rail-arrows { display: none; } }
/* ===== 13 Nov · section pemain ikut full width seperti Empat Tim: judul dan kartu pertama mulai dari tepi gutter ===== */
.page > section.players { max-width: none; }
.page .players .rail { --ri: var(--gut); }
.pc-rail .pcard { flex-basis: calc((100vw - 2 * var(--gut) - 5 * 16px) / 6.3); }
@media (max-width: 1100px) { .pc-rail .pcard { flex-basis: calc((100vw - 2 * var(--gut) - 2 * 16px) / 3.3); } }
@media (max-width: 640px) { .pc-rail .pcard { flex-basis: 62%; } }
/* ===== 13 Nov · kartu pemain diperbesar: ±4,5 kartu terlihat di desktop ===== */
.pc-rail .pcard { flex-basis: calc((100vw - 2 * var(--gut) - 4 * 16px) / 4.5); }
@media (max-width: 1100px) { .pc-rail .pcard { flex-basis: calc((100vw - 2 * var(--gut) - 2 * 16px) / 2.6); } }
@media (max-width: 640px) { .pc-rail .pcard { flex-basis: 74%; } }
/* ===== 13 Nov · tabel jadwal lebih ringkas + logo placeholder untuk tim yang belum ditentukan ===== */
.sch-hd { padding: 22px 32px 14px; }
.sch-hd h3 { font-size: 28px; }
.sch-ok { height: 24px; font-size: 11px; }
.sch-th, .sch-row { grid-template-columns: 40px 1fr 160px 90px 100px; gap: 16px; padding: 0 32px; }
.sch-th { padding-top: 0; padding-bottom: 10px; font-size: 10px; }
.sch-row { min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
.sch-no { font-size: 16px; color: var(--mut); }
.sch-mu { gap: 10px; font-size: 22px; }
.sch-mu img, .tm-ph { width: 26px; height: 26px; flex: none; }
.sch-mu i { font-size: 11px; }
.sch-g { font-size: 11px; }
.sch-g em { margin-bottom: 4px; }
.sch-t { font-size: 26px; }
.sch-go.btn { height: 30px; padding: 0 12px; font-size: 14px; }
/* placeholder logo: lencana bulat kosong bergaris putus-putus dengan tanda tanya */
.tm-ph { display: inline-grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(255,255,255,.28); background: var(--s2); }
.tm-ph::before { content: "?"; font: 600 12px/1 var(--body); color: var(--mut); }
@media (max-width: 900px) {
.sch-th, .sch-row { grid-template-columns: 28px 1fr auto; padding: 0 20px; }
.sch-row { padding-top: 12px; padding-bottom: 12px; row-gap: 4px; }
.sch-mu { font-size: 18px; gap: 8px; }
.sch-mu img, .tm-ph { width: 22px; height: 22px; }
.sch-t { font-size: 22px; }
.sch-hd { padding: 18px 20px 12px; }
.sch-hd h3 { font-size: 24px; }
}
@media (max-width: 640px) { .sch-mu { font-size: 17px; gap: 6px; flex-wrap: nowrap; } .sch-mu img, .tm-ph { width: 20px; height: 20px; } .tm-ph::before { font-size: 10px; } }
/* ===== 13 Nov · kartu xBall diperbesar ===== */
.xb-play .xk-deck.xk-cf { --cw: 220px; }
@media (max-width: 1100px) { .xb-play .xk-deck.xk-cf { --cw: 184px; } }
@media (max-width: 640px) { .xb-play .xk-deck.xk-cf { --cw: 150px; } }
/* ===== 13 Nov · jadwal tidak terlalu lebar + countdown jadi tab yang menempel di atas panel jadwal ===== */
.sched { max-width: 1040px; margin-inline: auto; }
.sch-cdtab { position: relative; z-index: 2; display: flex; justify-content: flex-end; margin-bottom: -1px; }
.sched .sch-cdtab .sch-cd { height: 40px; background: var(--s1); --cc-s: 10px;
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.sched .sch-cdtab .sch-cd .sch-cd-l { display: flex; padding: 0 14px 0 20px; font-size: 10px; background: rgba(0,255,239,.1); }
.sched .sch-cdtab .sch-cd div { padding: 0 12px; }
.sched .sch-cdtab .sch-cd div:last-child { padding-right: 18px; }
.sched .sch-cdtab .sch-cd b { font-size: 20px; }
.sched .sch-cdtab .sch-cd span:not(.sch-cd-l) { font-size: 10px; }
/* panel jadwal: sudut kanan atas rata supaya tab menyatu */
@media (max-width: 640px) {
.sch-cdtab { justify-content: stretch; }
.sched .sch-cdtab .sch-cd { width: 100%; justify-content: space-between; height: 38px; }
.sched .sch-cdtab .sch-cd .sch-cd-l { display: none; }
.sched .sch-cdtab .sch-cd div:first-of-type { padding-left: 18px; }
}
/* ===== 13 Nov · headline "Legends. Cards. Chaos." diperbesar ===== */
.hv-bar .hv-meta { font-size: clamp(48px, 5.4vw, 96px); line-height: .88; }
@media (max-width: 640px) { .hv-bar .hv-meta { font-size: 46px; } }
/* 13 Nov · headline sedikit dikecilkan (kalimat lebih panjang) */
.hv-bar .hv-meta { font-size: clamp(40px, 4.4vw, 76px); }
@media (max-width: 640px) { .hv-bar .hv-meta { font-size: 38px; } }
/* 13 Nov · headline dikecilkan lagi */
.hv-bar .hv-meta { font-size: clamp(34px, 3.7vw, 64px); }
@media (max-width: 640px) { .hv-bar .hv-meta { font-size: 34px; } }
/* 13 Nov · Schedule (near event): latar band satu tingkat di atas hitam */
body[data-state="near"] #interlude { position: relative; isolation: isolate; padding-bottom: 120px; }
body[data-state="near"] #interlude::before { content: ""; position: absolute; z-index: -1; top: 60px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: #0D0D10; }
@media (max-width: 640px) {
body[data-state="near"] #interlude { padding-bottom: 72px; }
body[data-state="near"] #interlude::before { top: 24px; }
}
/* 13 Nov · Schedule: latar garis lapangan futsal (cyan) dalam perspektif, video dilepas.
Posisi & perspective-origin dalam px supaya lapangan tidak bergeser saat tinggi band berubah (ganti tab hari). */
body[data-state="near"] #interlude::before { background: #08090C; }
.sch-bgv { position: absolute; z-index: -1; top: 60px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; pointer-events: none; perspective: 1000px; perspective-origin: 50% 482px; }
.sch-bgv::before { content: ""; position: absolute; left: 50%; top: -39px; width: 2000px; height: 1000px; margin-left: -1000px;
background: url(../img/court-lines.svg) center/contain no-repeat; opacity: .9;
filter: drop-shadow(0 0 6px rgba(0,255,239,.7)) drop-shadow(0 0 18px rgba(0,255,239,.35));
transform: rotateX(52deg); transform-origin: 50% 40%;
-webkit-mask: radial-gradient(70% 70% at 50% 45%, #000 45%, transparent 100%); mask: radial-gradient(70% 70% at 50% 45%, #000 45%, transparent 100%); }
/* Garis lapangan hanya tampil di sisi kiri-kanan kolom konten (1200px) supaya tidak menabrak tab, tabel, teks & pass */
.sch-bgv { --cw: 600px;
/* + pudar vertikal dalam px: garis tepi bawah tidak pernah tampil, jadi semua tab (All / Sat / Sun) terlihat sama */
-webkit-mask: linear-gradient(180deg, #000 520px, transparent 740px), linear-gradient(90deg, #000 0, #000 calc(50% - var(--cw) - 40px), rgba(0,0,0,.06) calc(50% - var(--cw) + 40px), rgba(0,0,0,.06) calc(50% + var(--cw) - 40px), #000 calc(50% + var(--cw) + 40px), #000 100%); -webkit-mask-composite: source-in;
mask: linear-gradient(180deg, #000 520px, transparent 740px), linear-gradient(90deg, #000 0, #000 calc(50% - var(--cw) - 40px), rgba(0,0,0,.06) calc(50% - var(--cw) + 40px), rgba(0,0,0,.06) calc(50% + var(--cw) - 40px), #000 calc(50% + var(--cw) + 40px), #000 100%); mask-composite: intersect; }
@media (max-width: 1280px) { .sch-bgv { --cw: calc(50vw - var(--gut)); } }
@media (max-width: 640px) {
.sch-bgv { top: 24px; perspective-origin: 50% 565px; }
.sch-bgv::before { width: 1100px; height: 550px; margin-left: -550px; top: 23px; }
}
/* ===== 13 Nov · margin grid disamakan: semua section (kecuali hero) = kontainer 1200px di tengah ===== */
.page > section.teams, .page > section.players { max-width: 1200px; }
.page .players .rail { --ri: max(var(--gut), calc(50vw - 600px)); }
.pc-rail .pcard { flex-basis: calc((min(100vw - 2 * var(--gut), 1200px) - 4 * 16px) / 4.5); }
@media (max-width: 1100px) { .pc-rail .pcard { flex-basis: calc((100vw - 2 * var(--gut) - 2 * 16px) / 2.6); } }
@media (max-width: 640px) { .pc-rail .pcard { flex-basis: 74%; } }
.sched { max-width: none; }
/* 13 Nov · Players: grid (bukan carousel) di kontainer 1200 — 4 kolom x 3 baris, kartu besar; sisanya lewat "See all players" */
.pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pc-grid .pcard:nth-child(n+13) { display: none; }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pc-grid .pcard:nth-child(n+9) { display: none; } }
/* 13 Nov · grid pemain 5 kolom x 2 baris (10 kartu) */
.pc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pc-grid .pcard:nth-child(n+11) { display: none; }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pc-grid .pcard:nth-child(n+10) { display: none; } }
@media (max-width: 640px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-grid .pcard:nth-child(n+9) { display: none; } }
/* ===== 13 Nov · Loading awal: animasi logo XSERIES =====
0–.8s X cyan tergambar (garis) lalu terisi, di tengah layar
.8–1.4s X bergeser ke posisi lockup, huruf S-E-R-I-E-S muncul berurutan dari balik X
bar progres cyan berjalan; selesai (min 2,3s / setelah load) → tirai naik */
html.xl-lock, html.xl-lock body { overflow: hidden; }
.xl { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #000; clip-path: inset(0 0 0 0); transition: clip-path .8s cubic-bezier(.76,0,.24,1); }
.xl::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 50%, rgba(0,255,239,.12), transparent 70%); opacity: 0; animation: xl-glow 1.2s .5s ease-out forwards; }
.xl-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; transition: transform .8s cubic-bezier(.76,0,.24,1), opacity .5s ease; }
.xl-logo { width: min(420px, 70vw); height: auto; overflow: visible; }
.xl-x { fill: #00FFEF; fill-opacity: 0; stroke: #00FFEF; stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1;
transform: translateX(66.75px) scale(1.35); transform-box: fill-box; transform-origin: center;
animation: xl-draw .75s .1s cubic-bezier(.65,0,.35,1) forwards, xl-fill .3s .7s ease-out forwards, xl-slide .65s .85s cubic-bezier(.76,0,.24,1) forwards; }
.xl-word path { fill: #fff; opacity: 0; transform: translateX(-14px); animation: xl-letter .45s calc(1.32s + var(--i) * .06s) cubic-bezier(.22,1,.36,1) forwards; }
.xl.xl-out { clip-path: inset(0 0 100% 0); }
.xl.xl-out .xl-in { transform: translateY(-40px); opacity: 0; }
@keyframes xl-draw { to { stroke-dashoffset: 0; } }
@keyframes xl-fill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes xl-slide { to { transform: translateX(0) scale(1); } }
@keyframes xl-letter { to { opacity: 1; transform: none; } }
@keyframes xl-fade { to { opacity: 1; } }
@keyframes xl-glow { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
.xl, .xl-in { transition: opacity .4s ease; }
.xl.xl-out { clip-path: none; opacity: 0; }
.xl-x, .xl-word path, .xl::before { animation: none; opacity: 1; fill-opacity: 1; stroke-width: 0; transform: none; }
}
/* 13 Nov · Subtext di bawah judul tiap section */
.sec-sub { font: 400 18px/1.45 var(--body); color: var(--dim); max-width: 560px; margin: 0; text-wrap: balance; text-transform: none; letter-spacing: normal; }
.center-head .sec-sub, .sched .sch-top .sec-sub { margin-inline: auto; }
.row-head > div:first-child { gap: 12px; }
.center-head:has(.sec-sub) { gap: 14px; }
.sched .sch-top .sec-sub { margin-top: -4px; margin-bottom: 12px; }
.family-card .sec-sub { color: rgba(255,255,255,.85); max-width: 420px; }
.partners .part-head { margin-bottom: 56px; }
.partners .part-head .display { margin-bottom: 0; }
@media (max-width: 640px) { .sec-sub { font-size: 16px; } }
/* Subtext ikut warna judulnya */
.sec-sub, .family-card .sec-sub { color: var(--ink); }
.red + .sec-sub { color: var(--red); }
.ink + .sec-sub, .family-card .ink + .sec-sub { color: #000; }
/* 13 Nov · Kartu tim gaya jersey: garis diagonal warna tim (memudar ke bawah) + grain + strip warna di atas nama */
.tm-c { background-image: url(../img/grain.png), radial-gradient(70% 50% at 50% 40%, color-mix(in srgb, var(--tc) 50%, transparent), transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--tc) 26%, #0D0D10), #0D0D10 85%); }
.tm-c::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: repeating-linear-gradient(-55deg, color-mix(in srgb, var(--tc) 22%, transparent) 0 14px, transparent 14px 34px);
-webkit-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 85%); mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 85%); }
.tm-ft { padding-top: 22px; }
.tm-ft::before { content: ""; position: absolute; left: 50%; top: 0; width: 44px; height: 4px; margin-left: -22px; background: var(--tc); transform: skewX(-20deg); }
@media (max-width: 640px) {
.tm-c::before { background: repeating-linear-gradient(-55deg, color-mix(in srgb, var(--tc) 22%, transparent) 0 9px, transparent 9px 22px); }
.tm-ft { padding-top: 16px; }
.tm-ft::before { width: 30px; height: 3px; margin-left: -15px; }
}
/* 13 Nov · Partner ala referensi: tanpa kartu, logo putih polos, grid 4 kolom yang lega, baris terakhir di tengah */
.partners .logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 80px 0; max-width: 1120px; margin: 56px auto 96px; }
/* 13 Nov · satu baris, jarak antar logo dirapatkan */
.partners .logo-grid { flex-wrap: nowrap; align-items: center; gap: 72px; }
.partners .logo-grid img { flex: 0 0 25%; height: 34px; width: auto; max-width: 25%; padding: 0 40px; object-fit: contain; background: none; clip-path: none;
filter: brightness(0) invert(1); opacity: 1; transition: opacity .2s; }
.partners .logo-grid img:hover { filter: brightness(0) invert(1); opacity: .7; background: none; }
.partners .logo-grid img[alt="NIVEA MEN"] { height: 52px; }
.partners .logo-grid img[alt="TikTok"] { height: 26px; }
.partners .logo-grid img[alt="Ortuseight"] { height: 60px; margin-block: -13px; }
@media (max-width: 640px) {
.partners .logo-grid { gap: 48px 0; margin: 8px auto 56px; }
.partners .logo-grid img { flex-basis: 50%; max-width: 50%; height: 28px; padding: 0 20px; }
.partners .logo-grid img[alt="NIVEA MEN"] { height: 44px; }
.partners .logo-grid img[alt="TikTok"] { height: 22px; }
.partners .logo-grid img[alt="Ortuseight"] { height: 50px; margin-block: -11px; }
}
/* 13 Nov · lokasi & harga pindah ke dalam tabel: venue di bawah jam, harga di tombol Tickets */
.sch-hd { padding-bottom: 14px; }
.sch-th, .sch-row { grid-template-columns: 40px 1fr 150px 120px 136px; }
.sch-th span:nth-child(5) { text-align: right; }
.sch-v { display: block; margin-top: 5px; font: 600 10px/1.1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.sch-go.btn b { font: inherit; color: var(--pri); }
.sch-row:hover .sch-go.btn b { color: #fff; }
@media (max-width: 900px) {
.sch-row { grid-template-areas: "no mu t" "no g go"; }
.sch-row .sch-go { display: inline-flex; grid-area: go; height: 26px; padding: 0 10px; font-size: 13px; }
.sch-v { font-size: 9px; margin-top: 4px; }
}
.partners .logo-grid img { flex: none; max-width: none; padding: 0; }
@media (max-width: 640px) {
.partners .logo-grid { flex-wrap: wrap; gap: 28px 36px; }
.partners .logo-grid img { flex: none; max-width: none; padding: 0; }
}
/* 13 Nov · nomor laga pakai Dharma Gothic */
.sch-no { font: 700 26px/1 var(--dh); color: var(--mut); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sch-no { font-size: 22px; } }
/* ponsel: kolom kanan diramping supaya nama tim tidak terjepit (venue 2 baris, tombol cuma harga) */
@media (max-width: 640px) {
.sch-v { white-space: normal; max-width: 64px; margin-left: auto; line-height: 1.15; }
.sch-gl { display: none; }
.sch-row .sch-go { padding: 0 9px; }
}
@media (max-width: 640px) {
.sch-row { grid-template-areas: "no mu mu" "no g t" "no g go"; row-gap: 6px; }
.sch-mu { margin-bottom: 4px; }
.sch-v { white-space: nowrap; max-width: none; }
.sch-g { align-self: start; padding-top: 4px; }
}
@media (max-width: 900px) { .sch-th, .sch-row { grid-template-columns: 28px 1fr auto; } }
/* 13 Nov · footer compact ala referensi: semua di tengah, logo IP kecil, 3 kolom pendek, legal kecil, wordmark raksasa terpotong di bawah */
.foot.foot-c { display: flex; flex-direction: column; align-items: center; gap: 0; border-top: 0; padding: 120px var(--gut) 0; overflow: hidden; text-align: center; }
.foot-ips { display: flex; align-items: center; justify-content: center; gap: 56px; margin-bottom: 56px; }
.foot-ips img { height: 40px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .9; transition: opacity .2s; }
.foot-ips a:hover img { opacity: .6; }
.foot-c .foot-cols { display: grid; grid-template-columns: repeat(3, 170px); gap: 0 56px; justify-content: center; }
.foot-c .foot-cols div { align-items: center; gap: 6px; }
.foot-c .foot-cols p { font: 500 13px/1.2 var(--body); color: var(--dim); margin-bottom: 6px; }
.foot-c .foot-cols a { font: 500 14px/1.3 var(--body); color: var(--ink); }
.foot-c .foot-cols a:hover { color: var(--pri); }
.foot-c .foot-legal { display: block; margin: 40px 0 0; padding: 0; border: 0; font: 500 11px/1.7 var(--body); letter-spacing: .04em; color: var(--ink); opacity: .8; }
.foot-word { margin: 48px 0 -.2em; font: 700 min(30vw, 440px)/.8 var(--dh); color: var(--red); letter-spacing: -.005em; white-space: nowrap; pointer-events: none; user-select: none; }
@media (max-width: 640px) {
.foot.foot-c { padding-top: 80px; }
.foot-ips { gap: 32px; margin-bottom: 40px; }
.foot-ips img { height: 30px; }
.foot-c .foot-cols { grid-template-columns: repeat(3, auto); gap: 0 28px; }
.foot-c .foot-legal { font-size: 10px; }
.foot-word { font-size: 33vw; margin-top: 36px; }
}
.foot.foot-c { padding-top: 48px; }
.foot-c .foot-legal a:hover { color: var(--pri); }
@media (max-width: 640px) { .foot.foot-c { padding-top: 32px; } }
/* 13 Nov · eyebrow di atas setiap headline: chip transparan + logo X kecil (opsi C2).
Ikut warna judul: cyan di judul putih, merah di judul merah, hitam di kartu merah Family. */
.eb { display: flex; align-items: center; gap: 8px; width: max-content; height: 28px; margin: 0 0 4px; padding: 0 12px 0 10px;
font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--pri); background: rgba(0,255,239,.12); clip-path: var(--chamf-s); }
.eb::before { content: ""; flex: none; width: 13px; height: 9px; background: currentColor;
-webkit-mask: url(../img/hero-x.svg) center/contain no-repeat; mask: url(../img/hero-x.svg) center/contain no-repeat; }
.center-head .eb, .kmp .eb, .sched .sch-top .eb { margin-inline: auto; }
.partners .eb, .kmp .eb { color: var(--red); background: rgba(255,34,34,.14); }
.family-card .eb { color: #000; background: rgba(0,0,0,.14); }
@media (max-width: 640px) { .eb { height: 26px; font-size: 10px; } }
/* eyebrow versi outline: tanpa isi, garis tipis bersudut potong (pakai bentuk outline yang sama dengan tombol btn-line) */
.eb, .partners .eb, .kmp .eb, .family-card .eb { position: relative; background: none; }
.eb::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: currentColor; opacity: .55; clip-path: var(--chamf-o); }
/* eyebrow tanpa wrapper: cuma logo X + teks, tanpa kotak/garis */
.eb, .partners .eb, .kmp .eb, .family-card .eb { height: auto; padding: 0; clip-path: none; margin-bottom: 6px; }
.eb::after { content: none; }
/* eyebrow pakai Dharma Gothic */
.eb { font: 700 20px/1 var(--dh); letter-spacing: .03em; gap: 8px; }
.eb::before { width: 15px; height: 10px; margin-top: -1px; }
@media (max-width: 640px) { .eb { font-size: 18px; } }
/* eyebrow pakai Ethnocentric (file sudah ada di fonts/) — huruf lebar, jadi ukurannya kecil */
@font-face { font-family: "Ethnocentric"; src: url(../fonts/Ethnocentric-Regular.otf) format("opentype"); font-weight: 400; font-display: swap; }
.eb { font: 400 12px/1 "Ethnocentric", var(--dh); letter-spacing: .06em; gap: 10px; }
.eb::before { width: 14px; height: 10px; margin-top: 0; }
@media (max-width: 640px) { .eb { font-size: 10px; gap: 8px; } .eb::before { width: 12px; height: 8px; } }