/* ==========================================================================
   EVENT — GAYA ARENA / KOMPETITIF
   Hanya dimuat di event.html & event-detail.html (body class="ev-page").
   Kontras sengaja BEDA dari halaman lain (premium hijau):
   - palet: hitam hangat + oranye api + amber + emas, merah utk LIVE
   - font: Anton (display) + Barlow Condensed (label/angka) — kesan olahraga
   - bentuk: sudut tegas, strip miring, scoreboard
   ========================================================================== */
.ev-page{
  --ev-red:#ff3b30;
  --ev-orange:#ff6b1a;
  --ev-amber:#ffb020;
  --ev-gold:#ffd35c;
  --ev-line:rgba(255,255,255,.1);
  --ev-bg:#0e0c0a;
  --ev-panel:#161210;
  --ev-ink:#f7f1ea;
}
.ev-page h1,.ev-page h2,.ev-page h3,.ev-page h4{font-family:'Barlow Condensed',sans-serif;letter-spacing:.01em}

/* ─── HERO — arena ─────────────────────────────────────────── */
.ev-page .page-hero{
  background:
    radial-gradient(1000px 520px at 88% -12%,rgba(255,107,26,.30),transparent 60%),
    radial-gradient(760px 420px at 4% 115%,rgba(255,176,32,.12),transparent 55%),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 26px),
    linear-gradient(180deg,#14110d,#0d0b09);
  border-bottom:1px solid var(--ev-line);
  padding:202px 0 92px;
}
.ev-page .page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;
  background:linear-gradient(90deg,var(--ev-red),var(--ev-orange) 32%,var(--ev-amber) 68%,transparent);
}
.ev-page .page-hero .eyebrow{color:var(--ev-amber);letter-spacing:.32em}
.ev-page .page-hero .eyebrow::before{background:var(--ev-orange)}
.ev-page .page-hero h1{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.7rem,7.4vw,5.4rem);line-height:.96;letter-spacing:.012em;
  color:var(--ev-ink);
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.ev-page .page-hero h1 em,.ev-page .page-hero h1 .accent{
  font-style:normal;color:var(--ev-amber);
  text-shadow:0 0 42px rgba(255,176,32,.35);
}
.ev-page .page-hero .page-sub{color:#cfc3b4}

/* ─── SECTION HEAD ─────────────────────────────────────────── */
.ev-page .ev-sec-head{margin:6px 0 4px;position:relative}
.ev-page .ev-sec-head h2{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.03em;color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);
  display:flex;align-items:center;gap:14px;
}
.ev-page .ev-sec-head h2::before{
  content:"";width:10px;height:10px;background:var(--ev-orange);
  transform:skewX(-14deg);box-shadow:0 0 16px rgba(255,107,26,.6);
}
.ev-page .ev-sec-sub{color:#a89b8a;font-family:'Barlow Condensed';font-size:1.02rem;letter-spacing:.03em}
.ev-page .ev-empty{border:1.5px dashed rgba(255,176,32,.35);background:rgba(255,176,32,.03);border-radius:8px;color:#b5a692}

/* ─── LIVE CARD ────────────────────────────────────────────── */
.ev-page .ev-live-card{
  border:1px solid rgba(255,107,26,.45);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,107,26,.09),rgba(255,255,255,.012));
  box-shadow:0 26px 70px -34px rgba(255,107,26,.45);margin-top:6px;
}
.ev-page .ev-live-head{background:linear-gradient(90deg,rgba(255,59,48,.16),transparent);border-bottom:1px solid rgba(255,107,26,.22)}
.ev-page .ev-live-head h3{font-family:'Barlow Condensed';font-weight:700;font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase}
.ev-page .ev-sub{color:#a89b8a}
.ev-page .ev-badge-live{
  display:inline-flex;align-items:center;gap:9px;background:var(--ev-red);color:#fff;
  font-family:'Barlow Condensed';font-weight:800;font-size:.95rem;letter-spacing:.18em;
  padding:7px 16px 7px 13px;border-radius:4px;transform:skewX(-10deg);
  box-shadow:0 0 26px rgba(255,59,48,.55);
}
.ev-page .ev-badge-live > *{transform:skewX(10deg)}
.ev-page .ev-badge-live .dot{width:10px;height:10px;border-radius:50%;background:#fff;animation:evPulse 1.1s infinite}

/* ─── CARD GRID (berlangsung & akan datang) ────────────────── */
.ev-page .ev-card{
  position:relative;border:1px solid var(--ev-line);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,var(--ev-panel),rgba(255,255,255,.012));
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
  display:flex;flex-direction:column;
}
.ev-page .ev-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:linear-gradient(180deg,var(--ev-orange),transparent);
}
.ev-page .ev-card:hover{transform:translateY(-5px);border-color:rgba(255,107,26,.55);box-shadow:0 20px 46px -22px rgba(255,107,26,.4)}
.ev-page .ev-card-top{
  height:118px;position:relative;display:flex;align-items:center;padding:20px 22px;
  background:
    radial-gradient(140% 170% at 82% -20%,rgba(255,107,26,.34),transparent 60%),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 16px),
    linear-gradient(160deg,#1d1813,#100d0a);
  border-bottom:1px solid rgba(255,176,32,.14);
}
.ev-page .ev-card-top::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--ev-amber),transparent);
}
.ev-page .ev-card-top .ev-type{
  font-family:'Anton',sans-serif;font-weight:400;font-size:2rem;line-height:1;
  color:var(--ev-amber);text-transform:uppercase;letter-spacing:.02em;
  text-shadow:0 0 30px rgba(255,176,32,.35);
}
.ev-page .ev-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ev-page .ev-card-body h3{font-family:'Barlow Condensed';font-weight:700;font-size:1.32rem;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.ev-page .ev-card-date{color:#a89b8a;font-size:.86rem;display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed';letter-spacing:.04em}
.ev-page .ev-card-date svg{width:15px;height:15px;opacity:.85;color:var(--ev-amber)}
.ev-page .ev-card p.ev-desc{color:#9a8d7d;font-size:.9rem;margin:0;line-height:1.5}
.ev-page .ev-tag{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:3px;border:1px solid var(--ev-line);
  color:#b5a692;font-family:'Barlow Condensed';
}
.ev-page .ev-tag.live{color:#fff;background:var(--ev-red);border-color:var(--ev-red);box-shadow:0 0 18px rgba(255,59,48,.45)}
.ev-page .ev-tag.upcoming{color:var(--ev-amber);border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.08)}
.ev-page .ev-tag.done{color:var(--ev-gold);border-color:rgba(255,211,92,.35)}
.ev-page .ev-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed';font-size:.98rem;font-weight:700;letter-spacing:.05em;color:var(--ev-amber);text-transform:uppercase}
.ev-page .ev-btn:hover{color:#ffd080}

/* ─── ARCHIVE (scoreboard rows) ────────────────────────────── */
.ev-page .ev-arch-row{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  border:1px solid var(--ev-line);border-left:4px solid rgba(255,107,26,.55);
  border-radius:8px;padding:16px 20px;margin-top:12px;
  background:linear-gradient(90deg,rgba(255,107,26,.05),rgba(255,255,255,.012));
  transition:.3s;text-decoration:none;overflow:hidden;
}
.ev-page .ev-arch-row:hover{border-color:rgba(255,107,26,.55);background:linear-gradient(90deg,rgba(255,107,26,.12),rgba(255,255,255,.02));transform:translateX(4px)}
.ev-page .ev-arch-row .t{font-family:'Barlow Condensed';font-weight:700;font-size:1.18rem;letter-spacing:.02em;color:#fff;text-transform:uppercase}
.ev-page .ev-arch-row .d{color:#a89b8a;font-size:.84rem;margin-top:2px}
.ev-page .ev-arch-row .champ{
  color:var(--ev-gold);font-family:'Barlow Condensed';font-weight:700;font-size:1.02rem;
  letter-spacing:.04em;text-align:right;white-space:nowrap;text-transform:uppercase;
}
@media(max-width:640px){.ev-page .ev-arch-row{flex-direction:column;align-items:flex-start}.ev-page .ev-arch-row .champ{text-align:left}}

/* ─── DETAIL PAGE ──────────────────────────────────────────── */
.ev-page .ev-status{
  font-family:'Barlow Condensed';font-size:.92rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 16px;border-radius:4px;display:inline-flex;align-items:center;gap:8px;
}
.ev-page .ev-status.live{background:var(--ev-red);color:#fff;box-shadow:0 0 22px rgba(255,59,48,.5)}
.ev-page .ev-status.upcoming{color:var(--ev-amber);border:1px solid rgba(255,176,32,.45);background:rgba(255,176,32,.08)}
.ev-page .ev-status.done{color:var(--ev-gold);border:1px solid rgba(255,211,92,.4);background:rgba(255,211,92,.06)}
.ev-page .ev-desc{color:#c9bda9;font-size:1.02rem;line-height:1.75;margin:0 0 20px;white-space:pre-line}
.ev-page .ev-meta{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005));border:1px solid var(--ev-line);border-radius:6px;padding:12px 16px;border-top:2px solid var(--ev-orange)}
.ev-page .ev-meta b{display:block;font-family:'Barlow Condensed';font-size:.76rem;letter-spacing:.16em;color:var(--ev-amber);text-transform:uppercase;margin-bottom:3px;font-weight:700}
.ev-page .ev-meta span{font-family:'Barlow Condensed';font-size:1.06rem;font-weight:700;letter-spacing:.02em;color:#fff}
.ev-page .btn-ghost{border-radius:5px}
.ev-page .btn-ghost:hover{border-color:var(--ev-amber);color:var(--ev-amber)}

/* champion */
.ev-page .ev-champion{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,176,32,.5);border-radius:10px;padding:26px 30px;margin-top:34px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  background:
    radial-gradient(620px 240px at 12% -30%,rgba(255,176,32,.24),transparent 62%),
    linear-gradient(135deg,rgba(255,176,32,.08),rgba(255,107,26,.02));
}
.ev-page .ev-champion::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(255,211,92,.03) 0 2px,transparent 2px 18px);
}
.ev-page .ev-champion .cup{font-size:3rem;line-height:1;filter:drop-shadow(0 0 22px rgba(255,211,92,.55))}
.ev-page .ev-champion b{
  font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:.03em;text-transform:uppercase;color:var(--ev-gold);
}
.ev-page .ev-champion p{margin:2px 0 0;color:#b5a692;font-family:'Barlow Condensed';font-size:1rem;letter-spacing:.03em}

/* bracket */
.ev-page .ev-sec-title{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:26px;color:#fff;
  display:flex;align-items:center;gap:13px;
}
.ev-page .ev-sec-title::before{content:"";width:9px;height:9px;background:var(--ev-amber);transform:skewX(-14deg)}
.ev-page .ev-bracket-scroll{padding-bottom:12px}
.ev-page .ev-bracket{display:flex;gap:38px;min-width:780px}
.ev-page .ev-bracket .col-h{
  font-family:'Barlow Condensed';font-weight:800;font-size:.86rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ev-amber);text-align:center;margin-bottom:6px;
}
.ev-page .ev-bm{
  border:1px solid var(--ev-line);border-left:3px solid rgba(255,176,32,.4);
  border-radius:5px;background:linear-gradient(180deg,var(--ev-panel),rgba(255,255,255,.01));
  overflow:hidden;
}
.ev-page .ev-bm .slot{display:flex;align-items:center;gap:9px;padding:9px 13px;font-size:.9rem;font-family:'Barlow Condensed';letter-spacing:.02em;font-weight:600}
.ev-page .ev-bm .slot + .slot{border-top:1px solid var(--ev-line)}
.ev-page .ev-bm .slot.win{color:var(--ev-amber);font-weight:800;background:rgba(255,176,32,.09)}
.ev-page .ev-bm .slot.bye{color:#8d8171;font-style:italic}
.ev-page .ev-bm .score{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;color:#fff;font-family:'Barlow Condensed';font-size:1.02rem}
.ev-page .ev-bm .slot.win .score{color:var(--ev-gold)}
.ev-page .ev-bm.empty{opacity:.3}
.ev-page .ev-bm.final{
  border-color:rgba(255,176,32,.6);border-left:4px solid var(--ev-gold);
  box-shadow:0 0 0 1px rgba(255,176,32,.18),0 12px 40px -18px rgba(255,176,32,.5);
}

/* daftar hasil */
.ev-page .ev-match{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--ev-line);border-left:3px solid rgba(255,107,26,.5);
  border-radius:6px;padding:13px 18px;
  background:linear-gradient(90deg,rgba(255,107,26,.04),rgba(255,255,255,.01));
}
.ev-page .ev-match .round{
  flex:0 0 auto;width:70px;font-family:'Barlow Condensed';font-weight:800;
  font-size:.8rem;letter-spacing:.12em;color:var(--ev-amber);text-transform:uppercase;
}
.ev-page .ev-match .names{flex:1;display:flex;flex-direction:column;gap:3px;font-size:.94rem;font-family:'Barlow Condensed';font-weight:600;letter-spacing:.02em}
.ev-page .ev-match .names .win{color:var(--ev-gold);font-weight:800}
.ev-page .ev-match .vs{color:#8d8171;font-size:.86rem;font-weight:400}
.ev-page .ev-match .sc{font-family:'Barlow Condensed';font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.05em}

/* warm bg utk bagian alt di halaman event */
.ev-page .page-body.alt{background:linear-gradient(180deg,#12100c,#0d0b09)}
.ev-page .page-body{background:linear-gradient(180deg,#0d0b09,#100e0b)}

/* ─── SEARCH BAND ───────────────────────────────────────────── */
.ev-search-band{
  padding:34px 0 6px;margin-top:-30px;position:relative;
  background:linear-gradient(180deg,transparent,rgba(255,107,26,.035));
}
.ev-search{
  display:flex;align-items:center;gap:12px;max-width:720px;margin:0 auto;
  background:linear-gradient(180deg,#1b1612,#14100d);
  border:1px solid rgba(255,176,32,.3);border-radius:10px;
  padding:6px 8px 6px 18px;
  transition:border-color .3s,box-shadow .3s;
  box-shadow:0 18px 46px -24px rgba(0,0,0,.8);
}
.ev-search:focus-within{border-color:var(--ev-amber);box-shadow:0 0 0 3px rgba(255,176,32,.16),0 18px 46px -24px rgba(255,107,26,.5)}
.ev-search-ico{width:22px;height:22px;color:var(--ev-amber);flex:0 0 auto}
.ev-search input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;
  font-family:'Barlow Condensed';font-size:1.18rem;font-weight:600;letter-spacing:.03em;
  padding:10px 0;
}
.ev-search input::placeholder{color:#8d8171}
.ev-search input::-webkit-search-cancel-button{display:none}
.ev-search-clear{
  flex:0 0 auto;width:40px;height:40px;border-radius:6px;border:0;cursor:pointer;
  background:rgba(255,107,26,.18);color:var(--ev-amber);font-size:1.05rem;line-height:1;
  transition:background .25s;font-weight:700;
}
.ev-search-clear:hover{background:rgba(255,107,26,.4);color:#fff}
.ev-search-clear[hidden]{display:none}
.ev-noresult{
  text-align:center;color:#b5a692;font-family:'Barlow Condensed';font-size:1.05rem;
  letter-spacing:.04em;padding:26px 12px 8px;
}

/* ─── ARCHIVE THUMB ─────────────────────────────────────────── */
.ev-page .ev-arch-thumb{
  width:118px;height:74px;flex:0 0 auto;border-radius:6px;object-fit:cover;
  border:1px solid rgba(255,176,32,.3);
}
.ev-page .ev-arch-thumb.ph{
  background:repeating-linear-gradient(-45deg,rgba(255,176,32,.06) 0 6px,transparent 6px 14px),
    linear-gradient(160deg,#1d1813,#100d0a);
}
.ev-page .ev-arch-main{flex:1;min-width:0}

/* ─── GALERI DOKUMENTASI ────────────────────────────────────── */
.ev-page .ev-photos-sec{margin-top:46px}
.ev-page .ev-photos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;margin-top:4px;
}
.ev-page .ev-photo{
  position:relative;display:block;border-radius:8px;overflow:hidden;
  border:1px solid var(--ev-line);aspect-ratio:4/3;background:#000;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.ev-page .ev-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--ev-orange),transparent);
  opacity:0;transition:opacity .3s;
}
.ev-page .ev-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease),filter .5s;filter:saturate(.92)}
.ev-page .ev-photo:hover{transform:translateY(-4px);border-color:rgba(255,107,26,.55);box-shadow:0 18px 40px -20px rgba(255,107,26,.45)}
.ev-page .ev-photo:hover::after{opacity:1}
.ev-page .ev-photo:hover img{transform:scale(1.06);filter:saturate(1.08)}
@media(max-width:560px){.ev-page .ev-photos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* konsistensi scroll-lock di halaman event */
.ev-page .pv-btn{background:linear-gradient(135deg,var(--ev-orange),#e04e00);border-radius:5px}
.ev-page .pv-input:focus{border-color:var(--ev-orange);box-shadow:0 0 0 3px rgba(255,107,26,.2)}