/* =====================================================================
   PEKSIMIDA UPI 2026 · v3
   VIBE: dinamis · kekinian · gradasi menyala · pastel-neon
   FIX v3: kontras WCAG AA, pisah per tangkai tegas, live panel,
           4 venue (Sekretariat dihapus dari venue lomba),
           marquee dihapus (masalah keterbacaan).
===================================================================== */

:root{
  /* ==== FONDASI ==== */
  --paper:        #FFFDF9;
  --cream:        #FFF6E8;
  --ivory:        #FDF5EA;
  --line:         #EADFCB;
  --line-strong:  #DBC8A7;

  /* ==== NEON (aksen) ==== */
  --hot-magenta:    #E9297D;
  --electric-purple:#7A3EE8;
  --sky-cyan:       #2FB8E0;
  --lime-glow:      #86D019;
  --sunset-orange:  #EF6A2E;

  /* ==== PEKSIMIDA UPI ==== */
  --maroon:       #6B1815;
  --maroon-deep:  #4A0F0D;
  --maroon-glow:  #A02D28;
  --gold:         #C89020;
  --gold-bright:  #E8B14A;
  --gold-soft:    #FBE8B8;

  /* ==== FERMATA ==== */
  --fermata-purple: #6B2E88;
  --fermata-deep:   #1D0F26;
  --fermata-mag:    #B12E7A;

  /* ==== TEXT (kontras AA di atas paper) ==== */
  --ink:          #1A0F1F;   /* WCAG AAA */
  --ink-soft:     #2E1F35;   /* AAA */
  --muted:        #5A4A5F;   /* AA 7:1 vs paper */
  --muted-strong: #4A3B50;   /* AAA */

  /* ==== GRADIENT (kontras aman) ==== */
  --grad-primary:   linear-gradient(135deg, #E9297D 0%, #7A3EE8 55%, #2FB8E0 100%);
  --grad-sunset:    linear-gradient(135deg, #E8B14A 0%, #EF6A2E 55%, #E9297D 100%);
  --grad-royal:     linear-gradient(135deg, #6B1815 0%, #B12E7A 55%, #7A3EE8 100%);
  --grad-gold:      linear-gradient(135deg, #E8B14A 0%, #C89020 100%);
  --grad-cardTint:  linear-gradient(140deg, rgba(233,41,125,.05) 0%, rgba(122,62,232,.05) 100%);

  /* Radius */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px;
  --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-3xl: 48px;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 2px 8px rgba(107,24,21,.05);
  --sh-md: 0 8px 24px rgba(107,24,21,.08);
  --sh-lg: 0 16px 48px rgba(107,24,21,.10);
  --sh-xl: 0 24px 64px rgba(122,62,232,.14);
  --sh-neon-pink:   0 12px 32px rgba(233,41,125,.30);
  --sh-neon-purple: 0 12px 32px rgba(122,62,232,.30);
  --sh-neon-gold:   0 12px 32px rgba(200,144,32,.24);

  --gap: 20px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 180ms;
  --dur: 260ms;
  --dur-slow: 420ms;

  --f-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============== RESET ============== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:16px; line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,button,select,textarea{font-family:inherit}

.skip-link{position:absolute; top:-100px; left:12px; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:var(--r-sm); z-index:999}
.skip-link:focus{top:12px}

/* ============== BG DECOR — halus, tidak ganggu keterbacaan ============== */
.bg-decor{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blob{
  position:absolute; border-radius:50%;
  filter:blur(120px);
  animation:blobMove 25s ease-in-out infinite;
}
.blob-1{
  width:520px; height:520px; top:-160px; right:-160px;
  background:radial-gradient(circle, var(--hot-magenta) 0, transparent 70%);
  opacity:.14;
}
.blob-2{
  width:640px; height:640px; top:40%; left:-280px;
  background:radial-gradient(circle, var(--electric-purple) 0, transparent 70%);
  opacity:.12; animation-delay:-8s;
}
.blob-3{
  width:480px; height:480px; bottom:15%; right:-100px;
  background:radial-gradient(circle, var(--sky-cyan) 0, transparent 70%);
  opacity:.10; animation-delay:-16s;
}
@keyframes blobMove{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-20px) scale(1.05)}
}

.section{position:relative}

/* ============== NAV ============== */
.site-nav{
  position:sticky; top:0; z-index:50;
  padding:12px 20px;
  backdrop-filter:saturate(1.6) blur(20px);
  -webkit-backdrop-filter:saturate(1.6) blur(20px);
  background:rgba(255,253,249,.82);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-nav.is-scrolled{border-bottom-color:var(--line); background:rgba(255,253,249,.94)}
.nav-inner{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); transition:transform var(--dur) var(--ease)}
.brand:hover{transform:translateY(-1px)}
.brand-mark{
  width:42px; height:42px;
  display:grid; place-items:center;
  background:var(--grad-primary);
  color:#fff;
  border-radius:14px;
  box-shadow:var(--sh-neon-pink);
  flex-shrink:0;
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-line-1{
  font-weight:800; font-size:15px; letter-spacing:-.01em;
  color:var(--maroon);
}
.brand-line-2{font-size:11.5px; color:var(--muted-strong); font-weight:600}

.nav-pills{
  display:flex; align-items:center; gap:2px;
  padding:4px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-sm);
}
.nav-pills .pill{
  padding:8px 14px; font-size:13px; font-weight:700;
  color:var(--ink-soft);
  border-radius:var(--r-pill);
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.nav-pills .pill:hover{background:var(--gold-soft); color:var(--maroon)}
.nav-pills .pill.is-active{background:var(--maroon); color:#fff}

.nav-right{display:flex; align-items:center; gap:10px}
.live-clock{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:var(--maroon);
  color:#fff;
  border-radius:var(--r-pill);
  font-family:var(--f-mono); font-weight:600; font-size:13px;
  box-shadow:var(--sh-md);
}
.live-clock.is-live{
  background:var(--grad-primary);
  box-shadow:var(--sh-neon-pink);
}
.lc-dot{
  width:8px; height:8px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:livePulse 2s ease-out infinite;
}
.live-clock.is-live .lc-dot{background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.8)}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}
  70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.lc-tz{opacity:.7; font-size:10px; font-weight:700; letter-spacing:.06em}

.nav-toggle{
  display:none; width:42px; height:42px;
  align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:var(--paper); border:1px solid var(--line); padding:0;
}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); margin:2.5px 0; border-radius:2px; transition:all var(--dur) var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none; flex-direction:column; padding:12px 8px 8px; gap:2px}
.mobile-menu a{padding:14px 16px; border-radius:var(--r-md); font-weight:700; color:var(--ink); transition:background var(--dur) var(--ease)}
.mobile-menu a:hover,.mobile-menu a:focus{background:var(--gold-soft); color:var(--maroon)}

/* ============== SECTION HEAD ============== */
main{position:relative; z-index:1}
.section{max-width:1280px; margin:0 auto; padding:88px 24px}
.section-head{max-width:760px; margin:0 0 44px}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--maroon);
  padding:7px 14px;
  background:var(--gold-soft);
  border-radius:var(--r-pill);
  margin-bottom:20px;
}
.eyebrow-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--hot-magenta);
  box-shadow:0 0 12px rgba(233,41,125,.6);
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.4); opacity:.65}}

.h-display{
  font-size:clamp(36px, 6vw, 68px);
  font-weight:800; letter-spacing:-.025em; line-height:1.02;
  margin:0 0 16px;
  color:var(--ink);
}
.h-display em{
  font-style:normal;
  font-weight:800;
  color:inherit;
}
.h-med{font-size:clamp(24px, 3vw, 34px); font-weight:800; letter-spacing:-.02em; margin:0 0 24px; color:var(--ink)}
.section-sub{
  font-size:clamp(15px, 1.4vw, 18px);
  color:var(--muted-strong); line-height:1.55; margin:0; max-width:640px;
}
.section-sub strong{color:var(--maroon); font-weight:800}
.section-sub-head{margin:64px 0 24px}

/* ============== HERO ============== */
.hero{
  max-width:1180px; margin:0 auto;
  padding:56px 24px 32px;
  position:relative;
}
.hero-inner{
  display:flex; flex-direction:column; align-items:flex-start; gap:28px;
}
.hero-display{
  font-size:clamp(44px, 8vw, 108px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  margin:8px 0 0;
  color:var(--ink);
  max-width:100%;
}
.hero-lead{
  font-size:clamp(17px, 1.6vw, 22px);
  color:var(--ink-soft);
  line-height:1.55; margin:0; max-width:640px;
  font-weight:500;
}

/* ============== LIVE PANEL ============== */
.live-panel{
  width:100%;
  background:linear-gradient(160deg, #fff 0%, #FFF9EE 100%);
  border:1px solid var(--line);
  border-radius:var(--r-2xl);
  box-shadow:var(--sh-lg);
  padding:24px;
  position:relative; overflow:hidden;
  margin-top:8px;
}
.live-panel::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:var(--grad-primary);
}
.lp-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:18px; flex-wrap:wrap;
}
.lp-status{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:var(--maroon);
  color:#fff;
  border-radius:var(--r-pill);
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.lp-status.is-live{
  background:var(--grad-primary);
  box-shadow:var(--sh-neon-pink);
}
.lp-status.is-break{background:var(--gold); color:var(--maroon-deep)}
.lp-status.is-idle{background:var(--muted-strong)}
.lp-status.is-done{background:var(--fermata-purple)}
.lp-status-dot{
  width:8px; height:8px; border-radius:50%; background:#fff;
}
.lp-status.is-live .lp-status-dot{
  animation:livePulseW 1.4s ease-out infinite;
}
@keyframes livePulseW{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}
  70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.lp-meta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; color:var(--ink-soft); font-weight:700;
}
.lp-sep{color:var(--muted); font-weight:400}
.lp-clock{font-family:var(--f-mono); font-weight:600; color:var(--maroon); font-size:14px}

.lp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.lp-item{
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:6px;
  transition:all var(--dur) var(--ease);
}
.lp-item.is-live{
  background:linear-gradient(160deg, #FFF6E8 0%, #FFEDCC 100%);
  border-color:var(--gold);
  box-shadow:var(--sh-neon-gold);
}
.lp-venue{
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--maroon);
}
.lp-tangkai{
  font-family:var(--f-sans); font-size:13px; color:var(--muted-strong);
}
.lp-name{
  font-size:16px; font-weight:800; letter-spacing:-.01em;
  color:var(--ink); line-height:1.3;
  min-height:20px;
}
.lp-name-idle{
  color:var(--muted); font-weight:500; font-size:14px;
}
.lp-time{
  font-family:var(--f-mono); font-size:11px; font-weight:600;
  color:var(--maroon); margin-top:2px;
}
.lp-num{
  display:inline-block;
  font-family:var(--f-mono); font-size:10px; font-weight:700;
  padding:2px 7px; margin-right:6px;
  background:var(--grad-primary); color:#fff;
  border-radius:var(--r-xs);
}
.lp-item.is-live .lp-num{background:var(--maroon)}

.lp-foot{
  display:flex; align-items:center; gap:8px;
  margin-top:16px; padding-top:16px;
  border-top:1px dashed var(--line);
  font-size:12px; color:var(--muted-strong); line-height:1.5;
}
.lp-foot strong{color:var(--maroon)}

/* ============== HERO CTA ============== */
.hero-cta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; font-size:15px; font-weight:700;
  border-radius:var(--r-pill);
  transition:all var(--dur) var(--ease);
  border:1px solid transparent; will-change:transform;
}
.btn-primary{
  background:var(--grad-primary);
  color:#fff;
  box-shadow:var(--sh-neon-pink);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 50px rgba(233,41,125,.45)}
.btn-primary svg{transition:transform var(--dur) var(--ease)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{
  background:#fff; border-color:var(--line-strong);
  color:var(--ink);
}
.btn-ghost:hover{
  background:var(--gold-soft); border-color:var(--gold); color:var(--maroon);
  transform:translateY(-3px);
}

/* ============== BENTO JADWAL ============== */
.bento-jadwal{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:var(--gap);
}
.bento{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-2xl);
  padding:32px;
  transition:all var(--dur) var(--ease);
  position:relative; overflow:hidden;
  color:inherit; text-decoration:none;
  display:block;
  cursor:pointer;
}
.bento:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--gold)}
.bento:focus-visible{outline:2px solid var(--hot-magenta); outline-offset:3px}
.bento-arrow{
  position:absolute; top:24px; right:24px;
  width:36px; height:36px;
  display:grid; place-items:center;
  background:var(--paper);
  border-radius:50%;
  font-size:18px; font-weight:700;
  color:var(--maroon);
  transition:all var(--dur) var(--ease);
  opacity:0; transform:translateX(-6px);
}
.bento:hover .bento-arrow{opacity:1; transform:translateX(0)}
.bento.featured .bento-arrow{background:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(6px)}
.bento.featured{
  background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color:#fff; border-color:transparent;
}
.bento.featured::after{
  content:''; position:absolute; top:-40px; right:-40px;
  width:200px; height:200px;
  background:radial-gradient(circle, var(--hot-magenta) 0, transparent 60%);
  opacity:.5; border-radius:50%; filter:blur(30px);
}
.b-tag{
  display:inline-block;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px;
  border-radius:var(--r-pill);
  background:var(--gold-soft); color:var(--maroon);
  margin-bottom:18px;
}
.b-tag-neon{background:var(--grad-primary); color:#fff; box-shadow:var(--sh-neon-pink)}
.b-date{font-family:var(--f-sans); font-size:18px; color:var(--muted-strong); margin-bottom:8px}
.bento.featured .b-date{color:var(--gold-bright)}
.b-title{
  font-size:clamp(22px, 2.4vw, 30px);
  font-weight:800; letter-spacing:-.02em; margin:0 0 20px; line-height:1.18;
}
.b-list{list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1}
.b-list li{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-soft)}
.bento.featured .b-list li{color:#fff}
.b-list li strong{color:var(--maroon); font-weight:800}
.bento.featured .b-list li strong{color:var(--gold-bright)}
.b-list .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0}
.bento.featured .b-list .dot{background:var(--gold-bright); box-shadow:0 0 8px rgba(232,177,74,.7)}
.b-tangkai{display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1}
.chip{
  padding:6px 12px; font-size:13px; font-weight:700;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); color:var(--ink);
}
.bento.featured .chip{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(4px)}

/* ============== VENUE ============== */
.masonry-venue{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--gap)}
.venue-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-2xl); padding:26px;
  transition:all var(--dur) var(--ease);
  display:flex; flex-direction:column; gap:14px;
  position:relative; overflow:hidden;
  color:inherit; text-decoration:none;
  cursor:pointer;
}
.venue-card:hover{transform:translateY(-6px); box-shadow:var(--sh-xl); border-color:var(--electric-purple)}
.venue-card:focus-visible{outline:2px solid var(--hot-magenta); outline-offset:3px}
.venue-card.featured{
  grid-column:span 2;
  background:linear-gradient(135deg, var(--maroon) 0%, #451450 60%, var(--fermata-purple) 100%);
  color:#fff; border-color:transparent;
  min-height:340px;
}
.venue-visual{
  height:180px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--maroon) 0%, var(--fermata-purple) 100%);
  position:relative; overflow:hidden;
  display:grid; place-items:center;
}
.venue-card.featured .venue-visual{
  height:220px;
  background:linear-gradient(135deg, var(--hot-magenta) 0%, var(--electric-purple) 100%);
}
.venue-visual img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:transform var(--dur-slow) var(--ease);
}
.venue-card:hover .venue-visual img{transform:scale(1.06)}
.venue-visual.no-img::after{
  content:'';
  position:absolute; inset:0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.65'><path d='M3 21h18M4 21V10l8-6 8 6v11M9 21v-6h6v6'/></svg>") center/56px no-repeat;
}
.venue-tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill); background:var(--gold-soft); color:var(--maroon)}
.venue-card.featured .venue-tag{background:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(6px)}
.venue-title{font-size:19px; font-weight:800; letter-spacing:-.01em; margin:0; line-height:1.25; color:var(--ink)}
.venue-card.featured .venue-title{color:#fff; font-size:26px}
.venue-desc{font-size:14px; color:var(--muted-strong); margin:0; line-height:1.55}
.venue-card.featured .venue-desc{color:rgba(255,255,255,.82)}
.venue-slots{display:flex; flex-direction:column; gap:8px; margin-top:auto}
.venue-slot{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--cream); border-radius:var(--r-md);
  font-size:13px; border:1px solid var(--line); color:var(--ink);
}
.venue-card.featured .venue-slot{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(6px)}
.venue-slot .day{
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  padding:3px 8px;
  background:var(--maroon); color:#fff;
  border-radius:var(--r-xs);
}
.venue-card.featured .venue-slot .day{background:var(--gold-bright); color:var(--maroon-deep)}
.venue-map{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; font-size:13px; font-weight:700;
  border-radius:var(--r-pill);
  border:1px solid var(--line-strong); color:var(--ink);
  align-self:flex-start;
  transition:all var(--dur) var(--ease);
  background:#fff;
}
.venue-map:hover{background:var(--grad-primary); color:#fff; border-color:transparent; box-shadow:var(--sh-neon-pink)}
.venue-card.featured .venue-map{color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.1); backdrop-filter:blur(6px)}
.venue-card.featured .venue-map:hover{background:#fff; color:var(--maroon)}

/* ============== PESERTA — TEGAS PISAH PER TANGKAI ============== */
.peserta-toolbar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:32px}
.filter-pills{display:flex; gap:8px; flex-wrap:wrap}
.filter-pills button{
  padding:9px 16px; font-size:13px; font-weight:700;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); color:var(--ink);
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.filter-pills button:hover{background:var(--gold-soft); color:var(--maroon); border-color:var(--gold)}
.filter-pills button.is-active{
  background:var(--maroon); color:#fff; border-color:transparent;
}
.filter-pills button .count{margin-left:6px; font-family:var(--f-mono); font-size:11px; opacity:.75}
.filter-pills button.is-active .count{opacity:.85}

.search-box{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px;
  background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  min-width:260px; flex:1; max-width:360px;
  transition:all var(--dur) var(--ease);
}
.search-box:focus-within{border-color:var(--hot-magenta); box-shadow:0 0 0 4px rgba(233,41,125,.14)}
.search-box svg{color:var(--muted-strong); flex-shrink:0}
.search-box input{border:0; outline:0; background:transparent; font-size:14px; flex:1; min-width:0; color:var(--ink)}
.search-box input::placeholder{color:var(--muted)}

.peserta-groups{display:flex; flex-direction:column; gap:56px}
.peserta-group{scroll-margin-top:96px}
.pg-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:20px; padding-bottom:14px;
  border-bottom:2px solid var(--maroon);
  flex-wrap:wrap;
}
.pg-title{
  font-family:var(--f-sans); font-size:clamp(26px, 3vw, 38px);
  color:var(--maroon); margin:0;
  line-height:1.1;
}
.pg-meta{
  display:inline-flex; align-items:center; gap:14px;
  font-size:13px; color:var(--muted-strong); font-weight:600;
}
.pg-count{
  font-family:var(--f-mono);
  padding:4px 10px;
  background:var(--maroon); color:#fff;
  border-radius:var(--r-pill);
  font-weight:700; font-size:12px;
}
.pg-venue{color:var(--maroon); font-weight:700}
.pg-day{
  padding:3px 10px;
  background:var(--gold-soft); color:var(--maroon);
  border-radius:var(--r-pill);
  font-family:var(--f-mono); font-weight:700; font-size:11px;
  letter-spacing:.04em;
}

.peserta-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px}
.peserta-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:20px;
  cursor:pointer; transition:all var(--dur) var(--ease);
  position:relative; display:flex; flex-direction:column; gap:6px; overflow:hidden;
}
.peserta-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-primary);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.peserta-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--electric-purple)}
.peserta-card:hover::before{transform:scaleX(1)}
.peserta-card:focus-visible{outline:2px solid var(--hot-magenta); outline-offset:3px}
.peserta-card.now{
  background:linear-gradient(160deg, #fff 0%, var(--gold-soft) 100%);
  border-color:var(--gold);
  box-shadow:var(--sh-neon-gold);
}
.peserta-card.now::before{transform:scaleX(1); background:var(--grad-sunset)}
.peserta-card.now::after{
  content:'TAMPIL SEKARANG';
  position:absolute; top:12px; right:12px;
  font-size:9px; font-weight:800; letter-spacing:.14em;
  padding:5px 10px;
  background:var(--maroon); color:#fff;
  border-radius:var(--r-pill);
  animation:pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge{0%,100%{transform:scale(1)} 50%{transform:scale(1.05)}}
.pc-num{
  font-family:var(--f-sans); font-size:52px; font-weight:400; line-height:1;
  color:var(--maroon);
  margin-bottom:4px;
}
.pc-name{
  font-size:17px; font-weight:800;
  letter-spacing:-.015em; line-height:1.3;
  color:var(--ink);
}
.pc-pt{font-size:13px; color:var(--muted-strong); line-height:1.4; font-weight:500}
.pc-meta{
  display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--line);
  font-size:12px; color:var(--ink-soft); flex-wrap:wrap;
}
.pc-meta .time{font-family:var(--f-mono); font-weight:700; color:var(--maroon)}
.pc-meta .est{
  font-size:10px; padding:2px 7px;
  background:var(--gold-soft); color:var(--maroon);
  border-radius:var(--r-pill);
  font-weight:700; letter-spacing:.04em;
}
.peserta-empty{text-align:center; padding:60px 20px; color:var(--muted-strong); font-size:15px}

/* ============== WITHDREW STATE (mengundurkan diri) ============== */
.peserta-card.withdrew{
  opacity:.86;
  filter:grayscale(.35);
}
.peserta-card.withdrew .pc-photo img{ filter:grayscale(1) brightness(.9); }
.peserta-card.withdrew .pc-num{ color:var(--muted-strong); text-shadow:none; }
.peserta-card.withdrew:hover{ opacity:1; filter:none; }
.peserta-card.withdrew:hover .pc-photo img{ filter:grayscale(.5); }
.withdrew-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  background:linear-gradient(135deg, #B00020 0%, #7A0F1A 100%);
  color:#fff;
  border-radius:var(--r-pill);
  font-size:10.5px; font-weight:800; letter-spacing:.09em;
  box-shadow:0 4px 12px rgba(176,0,32,.25);
}
.withdrew-badge::before{
  content:''; width:6px; height:6px; border-radius:50%; background:#fff;
}

/* Modal detail — badge withdrew besar */
.mb-withdrew{
  margin:6px 0 14px;
  padding:10px 14px;
  background:linear-gradient(135deg, #B00020 0%, #7A0F1A 100%);
  color:#fff;
  border-radius:var(--r-md);
  font-size:12px; font-weight:800; letter-spacing:.12em;
  text-align:center;
  box-shadow:0 6px 18px rgba(176,0,32,.28);
}

/* Rundown slot: withdrew */
.rd-slot.is-withdrew{
  background:rgba(176,0,32,.06);
  border:1px dashed rgba(176,0,32,.35);
}
.rd-slot.is-withdrew .rd-time{
  background:linear-gradient(135deg, #B00020 0%, #7A0F1A 100%);
  color:#fff;
  font-weight:800;
}
.rd-slot.is-withdrew .rd-name{ color:var(--muted-strong); text-decoration:line-through; text-decoration-color:rgba(176,0,32,.5); }
.rd-slot.is-withdrew .rd-name .withdrew-inline{
  display:inline-block; margin-left:6px;
  font-size:10px; font-weight:800; letter-spacing:.08em;
  color:#B00020;
  text-decoration:none;
}
.rd-slot.is-withdrew .rd-pt{ color:var(--muted); }

/* ============== RUNDOWN ============== */
.rundown-toggle{
  display:inline-flex;
  padding:5px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-pill);
  margin-bottom:24px; box-shadow:var(--sh-sm);
}
.rd-btn{
  padding:10px 22px; font-size:14px; font-weight:700;
  border-radius:var(--r-pill); color:var(--ink);
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.rd-btn:hover{background:var(--gold-soft); color:var(--maroon)}
.rd-btn.active{background:var(--maroon); color:#fff}
.rundown-scroll{
  overflow-x:auto; padding-bottom:8px;
  margin:0 -24px; padding-left:24px; padding-right:24px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.rundown-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px; min-width:100%;
}
.rd-col{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:20px;
  min-width:280px; scroll-snap-align:start;
  position:relative; overflow:hidden;
}
.rd-col::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-primary);
}
.rd-col-head{padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:12px}
.rd-col-tag{
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px;
  background:var(--gold-soft); color:var(--maroon);
  border-radius:var(--r-pill);
  display:inline-block; margin-bottom:10px;
}
.rd-col-title{font-size:16px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px; color:var(--ink)}
.rd-col-venue{font-size:12px; color:var(--muted-strong); font-weight:500}
.rd-slots{display:flex; flex-direction:column; gap:8px}
.rd-slot{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--r-md);
  transition:background var(--dur) var(--ease);
}
.rd-slot:hover{background:var(--gold-soft)}
.rd-time{
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  color:var(--maroon);
  min-width:80px; padding:5px 8px;
  background:var(--gold-soft); border-radius:var(--r-xs);
  text-align:center; flex-shrink:0;
}
.rd-info{flex:1; min-width:0}
.rd-name{font-size:13px; font-weight:700; line-height:1.3; color:var(--ink)}
.rd-pt{font-size:11px; color:var(--muted-strong); margin-top:2px}
.rd-slot.is-break{background:var(--cream); border:1px dashed var(--line-strong)}
.rd-slot.is-break .rd-name{color:var(--muted-strong); font-weight:600}
.rd-slot.is-intro .rd-name{color:var(--ink-soft); font-weight:600}
.rd-slot.is-now{
  background:var(--grad-primary); color:#fff;
  box-shadow:var(--sh-neon-pink);
}
.rd-slot.is-now .rd-time{background:rgba(255,255,255,.24); color:#fff; backdrop-filter:blur(4px)}
.rd-slot.is-now .rd-name{color:#fff}
.rd-slot.is-now .rd-pt{color:rgba(255,255,255,.9)}

.rd-note{
  margin-top:16px; padding:14px 18px;
  background:var(--gold-soft); border:1px solid var(--gold);
  border-radius:var(--r-lg);
  font-size:13px; color:var(--maroon-deep); line-height:1.55;
  display:flex; align-items:flex-start; gap:10px;
}
.rd-note strong{color:var(--maroon)}

/* ============== LAGU ============== */
.lagu-filters{margin-bottom:24px}
.lagu-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px}
.lagu-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:24px;
  transition:all var(--dur) var(--ease);
}
.lagu-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--gold)}
.lc-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.lc-cat{font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--maroon)}
.lc-tag{font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill)}
.lc-tag.wajib{background:var(--maroon); color:#fff}
.lc-tag.pilihan{background:var(--gold-soft); color:var(--maroon)}
.lc-songs{display:flex; flex-direction:column; gap:10px}
.lc-song{padding:12px 16px; background:var(--cream); border-radius:var(--r-md); font-size:14px}
.lc-song .title{
  font-family:var(--f-sans); font-size:18px; color:var(--ink);
  display:block; margin-bottom:2px; line-height:1.3;
}
.lc-song .writer{color:var(--muted-strong); font-size:12px; font-weight:500}

/* ============== RUBRIK ============== */
.rubrik-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap)}
.rubrik-card{
  padding:28px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-2xl);
  transition:all var(--dur) var(--ease);
  position:relative;
}
.rubrik-card:hover{transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--electric-purple)}
.rubrik-card.featured{
  background:linear-gradient(135deg, var(--maroon) 0%, var(--fermata-purple) 60%, var(--electric-purple) 100%);
  color:#fff; border-color:transparent;
  box-shadow:var(--sh-neon-purple);
}
.rk-num{
  font-family:var(--f-sans); font-size:48px; line-height:1; margin-bottom:12px;
  color:var(--maroon-glow);
}
.rubrik-card.featured .rk-num{color:var(--gold-bright)}
.rubrik-card h4{font-size:20px; font-weight:800; letter-spacing:-.01em; margin:0 0 12px; line-height:1.2; color:var(--ink)}
.rubrik-card.featured h4{color:#fff}
.rk-sub{font-size:12px; font-weight:500; color:var(--muted-strong); letter-spacing:0}
.rubrik-card.featured .rk-sub{color:rgba(255,255,255,.75)}
.rk-bar{height:8px; background:var(--gold-soft); border-radius:var(--r-pill); overflow:hidden; margin-bottom:8px}
.rubrik-card.featured .rk-bar{background:rgba(255,255,255,.15)}
.rk-fill{
  height:100%; width:var(--w);
  background:var(--grad-primary);
  border-radius:var(--r-pill);
  animation:fillbar 1.5s var(--ease) both;
}
.rubrik-card.featured .rk-fill{background:var(--grad-gold)}
@keyframes fillbar{from{width:0} to{width:var(--w)}}
.rk-w{font-family:var(--f-mono); font-size:14px; font-weight:700; color:var(--maroon); margin-bottom:14px}
.rubrik-card.featured .rk-w{color:var(--gold-bright)}
.rubrik-card p{font-size:13px; color:var(--muted-strong); line-height:1.55; margin:0}
.rubrik-card.featured p{color:rgba(255,255,255,.85)}

/* ============== KOORDINATOR (tanpa avatar, tanpa nama juri) ============== */
.koord-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--gap)}
.koord-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:26px;
  transition:all var(--dur) var(--ease);
  position:relative; overflow:hidden;
  color:inherit; text-decoration:none;
  display:block; cursor:pointer;
}
.koord-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--gold)}
.koord-card:focus-visible{outline:2px solid var(--hot-magenta); outline-offset:3px}
.kc-arrow{
  position:absolute; top:24px; right:24px;
  width:32px; height:32px;
  display:grid; place-items:center;
  background:var(--gold-soft); color:var(--maroon);
  border-radius:50%;
  font-size:16px; font-weight:700;
  transition:all var(--dur) var(--ease);
  opacity:0; transform:translateX(-6px);
}
.koord-card:hover .kc-arrow{opacity:1; transform:translateX(0)}
.koord-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-sunset);
}
.kc-tangkai{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--maroon-glow); margin-bottom:14px;
}
.kc-role-label{
  font-family:var(--f-sans); font-size:16px; color:var(--muted-strong);
  margin-bottom:6px;
}
.kc-name{
  font-size:20px; font-weight:800; letter-spacing:-.015em;
  color:var(--ink); line-height:1.3;
}

.pimpinan-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--gap)}
.pim-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:22px;
  transition:all var(--dur) var(--ease);
}
.pim-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--gold)}
.pim-role{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--maroon); margin-bottom:6px}
.pim-name{font-size:16px; font-weight:800; color:var(--ink); line-height:1.3}

/* ============== TIMELINE ============== */
.timeline{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--gap)}
.tl-step{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:28px;
  transition:all var(--dur) var(--ease);
  position:relative; overflow:hidden;
}
.tl-step:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--electric-purple)}
.tl-step::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-primary);
}
.tl-num{
  font-family:var(--f-sans); font-size:52px; line-height:1; margin-bottom:8px;
  color:var(--maroon-glow);
}
.tl-step h4{font-size:19px; font-weight:800; letter-spacing:-.01em; margin:0 0 14px; color:var(--ink)}
.tl-step ul{margin:0; padding-left:20px}
.tl-step li{color:var(--ink-soft); line-height:1.6; margin-bottom:6px; font-size:14px}
.tl-step strong{color:var(--maroon); font-weight:800}
.tl-step code{font-family:var(--f-mono); font-size:12px; padding:2px 6px; background:var(--gold-soft); border-radius:var(--r-xs); color:var(--maroon-deep); font-weight:600}

/* ============== FAQ ============== */
.faq-toolbar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:32px}
.faq-list{display:flex; flex-direction:column; gap:10px}
.faq-item{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.faq-item.is-open{border-color:var(--hot-magenta)}
.faq-btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px;
  text-align:left;
  font-size:15px; font-weight:700; letter-spacing:-.005em;
  color:var(--ink);
  transition:background var(--dur) var(--ease);
}
.faq-btn:hover{background:var(--gold-soft)}
.faq-ic{
  width:24px; height:24px; color:var(--hot-magenta);
  transition:transform var(--dur) var(--ease); flex-shrink:0;
}
.faq-item.is-open .faq-ic{transform:rotate(180deg)}
.faq-panel{max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease)}
.faq-item.is-open .faq-panel{max-height:800px}
.faq-answer{padding:0 24px 22px; color:var(--ink-soft); line-height:1.7; font-size:14.5px}
.faq-cat{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-pill);
  background:var(--gold-soft); color:var(--maroon);
  margin-right:10px;
}

/* ============== KONTAK ============== */
.kontak-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--gap)}
.kontak-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:24px;
  transition:all var(--dur) var(--ease);
}
.kontak-card:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--gold)}
.kontak-card h4{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--maroon); margin:0 0 10px}
.kontak-name{font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:0 0 4px; line-height:1.3}
.kontak-role{font-size:13px; color:var(--muted-strong); margin:0; font-weight:500}
.kontak-link{
  grid-column:span 2;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--grad-royal);
  color:#fff;
  border-radius:var(--r-xl); padding:26px;
  transition:all var(--dur) var(--ease);
  box-shadow:var(--sh-neon-purple);
  position:relative; overflow:hidden;
}
.kontak-link::before{
  content:''; position:absolute; top:-20%; right:-10%;
  width:200px; height:200px;
  background:radial-gradient(circle, var(--gold-bright) 0, transparent 60%);
  opacity:.32;
}
.kontak-link:hover{transform:translateY(-6px); box-shadow:0 30px 80px rgba(122,62,232,.32)}
.kontak-link h4{font-size:18px; font-weight:800; margin:0 0 4px; letter-spacing:-.01em}
.kontak-link p{font-size:14px; margin:0; opacity:.88}
.kontak-link .arr{font-size:30px; font-weight:300; position:relative; z-index:1}
.kontak-link-fermata{
  background:linear-gradient(135deg, var(--fermata-deep) 0%, var(--fermata-purple) 100%);
}

/* ============== FOOTER ============== */
.site-footer{
  background:linear-gradient(180deg, var(--fermata-deep) 0%, #120818 100%);
  color:#fff;
  border-radius:var(--r-3xl) var(--r-3xl) 0 0;
  margin-top:40px;
  padding:64px 24px 32px;
  position:relative; z-index:1; overflow:hidden;
}
.site-footer::before{
  content:''; position:absolute; top:-100px; left:20%;
  width:300px; height:300px;
  background:radial-gradient(circle, var(--hot-magenta) 0, transparent 65%);
  opacity:.22; filter:blur(30px);
}
.site-footer::after{
  content:''; position:absolute; bottom:-80px; right:15%;
  width:280px; height:280px;
  background:radial-gradient(circle, var(--electric-purple) 0, transparent 65%);
  opacity:.26; filter:blur(30px);
}
.foot-inner{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.14);
  position:relative;
}
.foot-title{
  font-family:var(--f-sans); font-size:clamp(30px, 4vw, 48px);
  line-height:1.1; margin-bottom:8px;
  background:linear-gradient(135deg, var(--gold-bright) 0%, var(--hot-magenta) 60%, var(--sky-cyan) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.foot-sub{font-size:14px; color:rgba(255,255,255,.78)}
.foot-meta p{margin:0 0 8px; font-size:14px; color:rgba(255,255,255,.9)}
.foot-meta .muted{color:rgba(255,255,255,.55); font-size:13px}
.foot-line{
  max-width:1280px; margin:0 auto;
  padding-top:24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:13px; color:rgba(255,255,255,.7); flex-wrap:wrap;
  position:relative;
}
.foot-line strong{color:var(--gold-bright); font-weight:700}
.foot-tagline a{color:rgba(255,255,255,.9); font-weight:700; text-decoration:none; transition:color var(--dur) var(--ease)}
.foot-tagline a:hover{color:var(--gold-bright)}
.foot-tagline em{
  font-family:var(--f-sans); font-size:17px;
  background:linear-gradient(135deg, var(--hot-magenta) 0%, var(--electric-purple) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ============== MODAL ============== */
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(29,15,38,.72); backdrop-filter:blur(6px); animation:fadeIn var(--dur) var(--ease)}
.modal-panel{
  position:relative;
  background:#fff;
  border-radius:var(--r-2xl);
  padding:36px;
  max-width:480px; width:100%;
  max-height:85vh; overflow-y:auto;
  box-shadow:var(--sh-xl);
  animation:modalIn var(--dur-slow) var(--ease);
  border:1px solid var(--line);
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes modalIn{from{transform:translateY(20px) scale(.96); opacity:0} to{transform:translateY(0) scale(1); opacity:1}}
.modal-close{
  position:absolute; top:14px; right:14px;
  width:42px; height:42px; border-radius:50%;
  background:var(--gold-soft); font-size:26px; line-height:1; color:var(--maroon);
  display:grid; place-items:center;
  transition:all var(--dur) var(--ease);
}
.modal-close:hover{background:var(--maroon); color:#fff}
.modal-body .mb-tangkai{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--maroon); margin-bottom:10px}
.modal-body .mb-num{
  font-family:var(--f-sans); font-size:64px; line-height:1; margin-bottom:6px;
  color:var(--maroon-glow);
}
.modal-body .mb-name{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; line-height:1.2; color:var(--ink)}
.modal-body .mb-pt{font-size:15px; color:var(--muted-strong); margin:0 0 20px; font-weight:500}
.modal-body .mb-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.modal-body .mb-row .k{font-size:11px; color:var(--muted-strong); text-transform:uppercase; letter-spacing:.1em; font-weight:700}
.modal-body .mb-row .v{font-size:14px; font-weight:700; color:var(--ink); text-align:right}
.modal-body .mb-est{
  margin-top:14px; padding:12px 14px;
  background:var(--gold-soft); border:1px solid var(--gold);
  border-radius:var(--r-md);
  font-size:12.5px; color:var(--maroon-deep); line-height:1.5;
}
.modal-body .mb-est strong{color:var(--maroon)}

/* ============== FERMATA AI CARD ============== */
.ai-card{
  position:relative; display:block;
  background:linear-gradient(135deg, var(--fermata-deep) 0%, #2A1440 50%, var(--fermata-purple) 100%);
  border-radius:var(--r-3xl);
  padding:56px 40px;
  overflow:hidden;
  box-shadow:var(--sh-xl);
  color:#fff;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.ai-card:hover{transform:translateY(-4px); box-shadow:0 30px 80px rgba(122,62,232,.4)}
.ai-card:focus-visible{outline:2px solid var(--hot-magenta); outline-offset:4px}
.ai-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(500px 300px at 20% 10%, rgba(233,41,125,.28) 0, transparent 60%),
    radial-gradient(500px 300px at 80% 90%, rgba(122,62,232,.35) 0, transparent 60%),
    radial-gradient(400px 200px at 50% 50%, rgba(47,184,224,.15) 0, transparent 60%);
  pointer-events:none;
}
.ai-inner{
  position:relative; z-index:1;
  max-width:640px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ai-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 14px;
  background:rgba(255,255,255,.1);
  color:#fff;
  border-radius:var(--r-pill);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
}
.ai-eyebrow .eyebrow-dot{background:#22C55E; box-shadow:0 0 12px #22C55E}
.ai-title{
  font-size:clamp(32px, 5vw, 56px);
  font-weight:800; letter-spacing:-.025em; line-height:1.05;
  margin:8px 0 0;
  color:#fff;
}
.ai-title em{
  font-family:var(--f-sans); font-weight:400;
  background:linear-gradient(135deg, var(--hot-magenta) 0%, var(--sky-cyan) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:0;
}
.ai-desc{
  font-size:clamp(15px, 1.4vw, 17px);
  color:rgba(255,255,255,.85);
  line-height:1.6; margin:8px 0 12px;
  max-width:540px;
}
.ai-wa-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px;
  font-size:16px; font-weight:800; letter-spacing:-.005em;
  color:#fff;
  background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-radius:var(--r-pill);
  transition:all var(--dur) var(--ease);
  box-shadow:0 12px 32px rgba(37,211,102,.4);
}
.ai-wa-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(37,211,102,.55);
}
.ai-num{
  font-family:var(--f-mono); font-size:12px;
  color:rgba(255,255,255,.55);
  margin:8px 0 0;
  letter-spacing:.04em;
}

/* ============== GALERI DOKUMENTASI (masonry columns · cross-browser) ============== */
.galeri-grid{
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 14px;
     -moz-column-gap: 14px;
          column-gap: 14px;
}
.galeri-item{
  display:block;
  /* Safari/iOS still needs -webkit- prefix for column break */
  -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
          page-break-inside: avoid;
          break-inside: avoid;
  margin: 0 0 14px;
  border-radius:16px;
  overflow:hidden;
  background:var(--cream);
  border:1px solid var(--line);
  cursor:zoom-in;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  padding:0;
  width:100%;
  position:relative;
  /* Trigger own layer supaya Safari tidak split kolom */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.galeri-item img{
  width:100%;
  height:auto;
  display:block;
  transition: transform 500ms var(--ease);
  background:var(--cream);
}
/* Reserve space via CSS variable dari inline style (--ar) — mencegah collapse saat lazy-load */
.galeri-item[style*="--ar"] img{
  aspect-ratio: var(--ar, 1);
  width: 100%;
  height: auto;
}
.galeri-item:hover, .galeri-item:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -12px rgba(122,62,232,.35);
  border-color: var(--hot-magenta);
  outline: none;
}
.galeri-item:hover img{ transform: scale(1.03); }
@media (max-width: 900px){
  .galeri-grid{ -webkit-column-count:2; -moz-column-count:2; column-count:2; }
}
@media (max-width: 520px){
  .galeri-grid{ -webkit-column-count:1; -moz-column-count:1; column-count:1; }
}

/* ============== DOKUMENTASI PER-ITEM (slot foto) ============== */
.doc-slot{
  margin:12px 0 0;
  display:block;
}
.doc-strip{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.doc-thumb{
  position:relative;
  width:88px;
  height:88px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  cursor:zoom-in;
  padding:0;
  background:#0d0713;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display:block;
  flex:0 0 auto;
}
.doc-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.doc-thumb:hover, .doc-thumb:focus-visible{
  transform:translateY(-2px);
  border-color:var(--hot-magenta);
  box-shadow:0 8px 24px -8px rgba(215, 25, 155, .55);
}
.tl-step .doc-thumb{border-color:rgba(29,15,38,.15)}

/* ============== LIGHTBOX ============== */
.doc-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(6,2,12,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease);
  backdrop-filter:blur(8px);
}
.doc-lightbox.is-open{opacity:1; pointer-events:auto}
.dl-stage{
  position:relative;
  max-width:min(96vw, 1200px);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.dl-img-wrap{
  position:relative;
  max-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dl-img{
  max-width:96vw;
  max-height:78vh;
  border-radius:12px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  display:block;
}
.dl-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px; height:48px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dl-btn:hover{background:rgba(255,255,255,.22); transform:translateY(-50%) scale(1.06)}
.dl-prev{left:-64px}
.dl-next{right:-64px}
.dl-close{
  position:absolute;
  top:-56px; right:0;
  width:44px; height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  backdrop-filter:blur(6px);
}
.dl-close:hover{background:rgba(255,255,255,.22)}

/* ============== RESPONSIVE ============== */
@media (max-width: 1100px){
  .nav-pills{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-menu.is-open{display:flex}
}
@media (max-width: 900px){
  .bento-jadwal{grid-template-columns:1fr}
  .masonry-venue{grid-template-columns:1fr 1fr}
  .venue-card.featured{grid-column:span 2; min-height:260px}
  .rubrik-grid{grid-template-columns:1fr 1fr}
  .foot-inner{grid-template-columns:1fr; gap:24px}
  .kontak-link{grid-column:span 1}
}
@media (max-width: 640px){
  .section{padding:64px 20px}
  .site-nav{padding:10px 14px}
  .brand-mark{width:38px; height:38px}
  .brand-line-1{font-size:14px}
  .brand-line-2{font-size:10.5px}
  .live-clock{padding:7px 12px; font-size:12px}
  .lc-tz{display:none}
  .hero{padding:32px 20px 16px}
  .hero-display{font-size:clamp(38px, 12vw, 60px)}
  .hero-lead{font-size:16px}
  .ai-card{padding:40px 24px; border-radius:var(--r-2xl)}
  .ai-wa-btn{padding:14px 22px; font-size:15px}
  .btn{padding:12px 18px; font-size:14px}
  .section-head{margin-bottom:32px}
  .h-display{font-size:clamp(30px, 8vw, 44px)}
  .bento{padding:24px}
  .masonry-venue{grid-template-columns:1fr}
  .venue-card.featured{grid-column:span 1}
  .rubrik-grid{grid-template-columns:1fr}
  .peserta-toolbar,.faq-toolbar{flex-direction:column; align-items:stretch}
  .search-box{max-width:100%}
  .peserta-grid{grid-template-columns:1fr}
  .lagu-cards{grid-template-columns:1fr}
  .koord-grid,.pimpinan-grid,.timeline,.kontak-grid{grid-template-columns:1fr}
  .foot-line{font-size:12px}
  .rundown-cols{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%}
  .modal-panel{padding:28px 22px}
  .modal-body .mb-name{font-size:22px}
  .live-panel{padding:20px}
  .lp-head{flex-direction:column; align-items:flex-start; gap:10px}
  .lp-grid{grid-template-columns:1fr}
  .pg-head{flex-direction:column; align-items:flex-start; gap:10px}
  .doc-thumb{width:64px; height:64px}
  .doc-slot{padding:8px 10px; gap:8px}
  .doc-slot-label{font-size:10px; letter-spacing:.06em}
  .dl-prev{left:8px}
  .dl-next{right:8px}
  .dl-btn{width:42px; height:42px}
  .dl-close{top:-52px; width:40px; height:40px; font-size:20px}
}
@media (max-width: 400px){
  .nav-inner{gap:8px}
  .brand-text{display:none}
  .live-clock{padding:6px 10px; font-size:11px}
}

@media (prefers-reduced-motion: reduce){
  .blob,.eyebrow-dot,.peserta-card.now::after,.lc-dot,.lp-status-dot{animation:none !important}
}

/* Focus states for keyboard */
*:focus-visible{outline:2px solid var(--hot-magenta); outline-offset:2px; border-radius:4px}
button:focus-visible,a:focus-visible{outline-offset:3px}

/* =============================================================
   CROSS-BROWSER SAFETY NET
   ============================================================= */

/* iOS Safari: sticky-hover fix — kalau device tidak punya hover
   fisik, hilangkan semua hover-effect supaya tidak stuck. */
@media (hover: none){
  .peserta-card:hover,
  .venue-card:hover,
  .koord-card:hover,
  .pim-card:hover,
  .tl-step:hover,
  .bento:hover,
  .lagu-card:hover,
  .rubrik-card:hover,
  .rd-slot:hover,
  .btn:hover,
  .filter-pills button:hover,
  .nav-pills .pill:hover,
  .rd-btn:hover,
  .venue-map:hover,
  .brand:hover,
  .kontak-link:hover,
  .doc-thumb:hover,
  .galeri-item:hover,
  .ai-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .venue-card:hover .venue-visual img,
  .galeri-item:hover img,
  .peserta-card:hover .pc-photo img { transform: none !important; }
}

/* iOS: prevent viewport zoom on input focus */
input, textarea, select { font-size: 16px; }

/* iOS: smooth scroll momentum */
.rundown-scroll,
.admin-docs-grid { -webkit-overflow-scrolling: touch; }

/* iOS: fix 100vh (address bar), tapi hanya untuk elemen yang butuh full-height */
@supports (-webkit-touch-callout: none) {
  .modal, .admin-modal { min-height: -webkit-fill-available; }
}

/* Safari: gradient text — safety fallback kalau background-clip fail */
@supports not (background-clip: text) {
  .h-display em,
  .foot-title,
  .foot-tagline em,
  .brand-line-1,
  .ai-title em { color: var(--maroon) !important; -webkit-text-fill-color: currentColor !important; }
}

/* Old Edge / Firefox: aspect-ratio fallback via padding-hack utk galeri */
@supports not (aspect-ratio: 1) {
  .galeri-item[style*="--ar"]{ position:relative; }
  .galeri-item[style*="--ar"] img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
}

/* Firefox: menu button reset */
button::-moz-focus-inner { border:0; padding:0; }

/* All browsers: prevent horizontal overflow */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }