:root{
      --bg:#777866;
      --panel:rgba(255,255,255,.06);
      --stroke:rgba(255,255,255,.10);
      --text:#f6f7fb;
      --muted:rgba(246,247,251,.72);

      --pink:#ff4fd8;
      --cyan:#36e9ff;
      --lime:#22ff9a;

      --r:18px;
      --max:1120px;
      --shadow: 0 18px 50px rgba(0,0,0,.45);
    }
    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background:
        radial-gradient(1000px 600px at 10% 10%, rgba(255,79,216,.18), transparent 55%),
        radial-gradient(900px 500px at 90% 20%, rgba(54,233,255,.16), transparent 55%),
        radial-gradient(900px 600px at 60% 110%, rgba(34,255,154,.12), transparent 55%),
        var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    .wrap{ width:min(var(--max), 100% - 32px); margin:0 auto; }
    .section{ padding:42px 0; scroll-margin-top:42px; }
    .card{
      background:var(--panel);
      border:1px solid var(--stroke);
      border-radius:var(--r);
      box-shadow:var(--shadow);
    }

    /* NAV */
    .nav{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(12px);
      background: rgba(7,8,11,.62);
      border-bottom:1px solid var(--stroke);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:12px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:800; letter-spacing:.4px;
    }
    .logo{
      width:34px; height:34px; border-radius:12px;
      border:1px solid var(--stroke);
      background:
        radial-gradient(circle at 30% 30%, rgba(255,79,216,.85), transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(54,233,255,.75), transparent 55%),
        rgba(255,255,255,.04);
    }
    .menu{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .pill{
      padding:10px 12px;
      border-radius:999px;
      border:1px solid transparent;
      color:var(--muted);
      font-weight:650;
      font-size:13px;
      transition:.15s ease;
    }
    .pill:hover{
      color:var(--text);
      border-color:var(--stroke);
      background:rgba(255,255,255,.04);
    }
    .cta{
      padding:10px 14px;
      border-radius:999px;
      border:1px solid var(--stroke);
      font-weight:800;
      white-space:nowrap;
    }

    /* art work */
    main.home{
      /* content mulai dari bawah navbar */
      padding-top: calc(var(--navH) + env(safe-area-inset-top));
      scroll-snap-type: y mandatory;
    }

    /* each banner = 1 screen (minus navbar) */
    .hero2{
      width: 100vw;
      height: calc(100vh - var(--navH) - env(safe-area-inset-top));
      position: relative;
      overflow:hidden;
      background:#000;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .hero2 picture,
    .hero2 picture img{
      width: 100%;
      height: auto;
      display: block;
    }


    /* image full cover */
    .hero2 img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: translateZ(0); /* anti-jitter Safari */
    }

    /* overlay biar nav kebaca */
    .hero2::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.08) 40%, rgba(0,0,0,.18));
      pointer-events:none;
    }

    /* Spacer kecil supaya scroll bisa lewat hero terakhir tanpa footer "nempel" */
    .after-hero2{
      height: 1px;
    }

    /* HERO */
    .hero{
      padding: 40px 0 22px;     /* lebih rapet dari 56px */
    }

    .hero-grid{
      display:grid;
      grid-template-columns: 1fr; /* 1 kolom */
      gap:16px;
    }

    .hero-left{
      grid-column: 1 / -1;
      padding: 28px;            /* bikin isi card lega */
      border-radius: 22px;      /* kalau card lo belum 22px */
      margin: 0 auto;
    }

    /* H1 khusus hero biar gak ganggu heading section lain */
    .hero-left h1{
      margin: 10px 0 10px;
      font-size: clamp(34px, 5vw, 56px);
      line-height: 1.03;
      letter-spacing: -0.8px;
    }

    /* Paragraf hero lebih enak dibaca */
    .hero-left .sub{
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.75;
      max-width: 100%;          /* INI kuncinya biar gak sempit */
      text-align: justify;
    }

    /* Meta tanggal/venue biar rapih (opsional tapi recommended) */
    .hero-meta{
      margin-top: 16px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    .hero-meta .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: rgba(0,0,0,.18);
      color: var(--muted);
      font-size: 12.5px;
    }

    .hero-meta .chip b{
      color: var(--text);
      font-weight: 900;
    }

    .hero-actions{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top:16px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--stroke);
      font-weight:800;
      background: rgba(255,255,255,.04);
      transition:.15s ease;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
    .btn.primary{
      background: #5f5c50;
      border-color: rgba(95, 92, 80, 0.8);
    }

    .hero-right{
      padding:18px;
      display:grid;
      gap:12px;
    }
    .stat{
      padding:14px;
      border-radius:16px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.03);
    }
    .stat b{ display:block; font-size:15px; }
    .stat span{ color:var(--muted); font-size:13px; }

    /* SECTION HEAD */
    .head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:12px; margin-bottom:14px;
    }
    .head h2{
      margin:0;
      font-size:22px;
      letter-spacing:-.2px;
    }
    .head p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      max-width:60ch;
      text-align: justify-content;
    }

    /* GRID */
    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:12px;
    }
    .col-7{ grid-column: span 7; }
    .col-5{ grid-column: span 5; }
    .col-6{ grid-column: span 12; }
    .col-4{ grid-column: span 4; }
    .col-12{ grid-column: span 12; }

    .pad{ padding:18px; }
    .muted{ color:var(--muted); }

    /* LINEUP cards */
    .band{
      padding:16px;
      border-radius:16px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.03);
    }
    .band .name{ font-weight:900; letter-spacing:.2px; text-align: center; }
    .band .desc{ margin-top:6px; font-size:13px; color:var(--muted); line-height:1.55; }

    /* FAQ accordion */
    .faq{
      border-radius:16px;
      border:1px solid var(--stroke);
      overflow:hidden;
      background: rgba(255,255,255,.03);
    }
    .faq button{
      width:100%;
      display:flex; justify-content:space-between; align-items:center;
      padding:14px 14px;
      background:transparent;
      color:var(--text);
      border:0;
      cursor:pointer;
      font-weight:850;
      letter-spacing:.15px;
      text-align:left;
    }
    .faq button:hover{ background: rgba(255,255,255,.04); }
    .faq .ans{
      max-height:0;
      overflow:hidden;
      transition:max-height .22s ease;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .faq .ans .in{
      padding:12px 14px 14px;
      color:var(--muted);
      line-height:1.65;
      font-size:13.5px;
    }
    .chev{
      width:10px; height:10px;
      border-right:2px solid rgba(246,247,251,.85);
      border-bottom:2px solid rgba(246,247,251,.85);
      transform: rotate(45deg);
      transition: .15s ease;
      margin-left:10px;
      flex:0 0 auto;
    }
    .faq.open .chev{ transform: rotate(-135deg); }

    /* Contact */
    .contact-actions{
      display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;
    }

    /* Sponsors */
    .logo-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:12px;
    }
    .logo-tile{
      padding:16px;
      border-radius:16px;
      border:1px dashed rgba(255,255,255,.16);
      color:rgba(246,247,251,.70);
      background: rgba(255,255,255,.02);
      display:flex; align-items:center; justify-content:center;
      min-height:72px;
      font-weight:850;
      letter-spacing:.3px;
    }

    /* Maps */
    .map{
      width:100%;
    }

    /* Footer */
    footer{
      padding:28px 0 36px;
      border-top:1px solid var(--stroke);
      background: rgba(7,8,11,.55);
    }
    .foot{
      display:flex; justify-content:space-between; gap:16px;
      flex-wrap:wrap;
      align-items:flex-start;
    }
    .foot small{ color:var(--muted); display:block; margin-top:8px; }

    /* LINE UP PHOTO GRID */
    .lineup-grid{
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .lineup-card{
      background: rgba(255,255,255,.04);
      border: 1px solid var(--stroke);
      border-radius: 18px;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .lineup-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(0,0,0,.45);
    }

    .lineup-photo{
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
    }

    .lineup-photo img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.95) contrast(1.05);
    }

    .lineup-info{
      padding: 14px;
    }

    .lineup-info .name{
      font-weight: 900;
      letter-spacing: .3px;
      margin-bottom: 6px;
      text-align: center;
    }

    .lineup-info .desc{
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
    }

    /* Responsive */
    @media (max-width: 1024px){
      .lineup-grid{
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 520px){
      .lineup-grid{
        grid-template-columns: 1fr;
      }
    }

    .lineup-cta{
      margin-top: 28px;
      display: flex;
      justify-content: center;
    }

    /* ================================
   LINE UP – FIX GRID 12 KOLOM
   ================================ */

    /* Override grid 12 kolom khusus Line Up */
    .grid.lineup-grid{
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    /* Paksa tiap card ngisi kolom bener */
    .lineup-card{
      grid-column: auto;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--stroke);
      border-radius: 18px;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .lineup-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(0,0,0,.45);
    }

    /* Foto */
    .lineup-photo{
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
    }

    .lineup-photo img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;                 /* penting biar gak ada gap */
      filter: saturate(0.95) contrast(1.05);
    }

    /* Info */
    .lineup-info{
      padding: 14px;
    }

    .lineup-info .name{
      font-weight: 900;
      letter-spacing: .3px;
      margin-bottom: 6px;
    }

    .lineup-info .desc{
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
    }

    /* ================================
      RESPONSIVE
      ================================ */
    @media (max-width: 1024px){
      .grid.lineup-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 520px){
      .grid.lineup-grid{
        grid-template-columns: 1fr;
      }
    }

    /* CTA tengah */
    .lineup-cta{
      margin-top: 28px;
      display: flex;
      justify-content: center;
    }

    /* ================================
   LINEUP NUCLEAR FIX (PASTI NGENA)
   taro PALING BAWAH CSS
   ================================ */

    #lineup .grid{
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 14px !important;
    }

/* LINEUP grid (independen, gak bentrok sama .grid 12 kolom) */
#lineup .lineup-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

#lineup .lineup-card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  overflow: hidden;
  min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}

#lineup .lineup-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

#lineup .lineup-photo{
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

#lineup .lineup-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#lineup .lineup-info{ padding: 14px; }

#lineup .lineup-info .name{
  font-weight: 900;
  letter-spacing: .3px;
  margin-bottom: 6px;
  font-size: 14px;
}

#lineup .lineup-info .desc{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* responsive */
@media (max-width: 1024px){
  #lineup .lineup-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #lineup .lineup-grid{ grid-template-columns: 1fr; }
}

/* CTA center */
#lineup .lineup-cta{
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* MAP CARD SIZE CONTROL */
.map-card{
  max-width: 760px;     /* ukuran card */
  margin: 0 auto;       /* center */
}

/* tinggi map diperkecil */
.map{
  width: 100%;
  height: 340px;        /* << INI kuncinya */
  border-radius: 14px;
}

/* ===== MAP FIX (anti jadi tiang) ===== */

/* card ukuran wajar */
#maps .map-card{
  max-width: 100%;   /* lebar card */
  margin: 0 auto;     /* center */
}

/* matiin aturan map lama */
#maps .map{
  aspect-ratio: auto !important; /* INI KUNCI: matiin 16/9 */
  width: 100% !important;
  height: 340px !important;      /* tinggi map */
  border: 0;
  border-radius: 16px;
  display: block;
}

/* tombol bawah map center */
#maps .map-actions{
  margin-top: 12px;
  display:flex;
  justify-content:center;
}

/* responsive */
@media (max-width: 768px){
  #maps .map-card{ max-width: 100%; }
  #maps .map{ height: 300px !important; }
}

/* ================================
   NAV ACTIONS
   ================================ */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Sembunyiin menu teks (desktop+mobile) biar clean */
.menu{
  display:none !important;
}

/* ================================
   BURGER
   ================================ */
.burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  padding:10px;
  transition: transform .15s ease, background .15s ease;
}

.burger:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}

.burger span{
  display:block;
  width:18px;
  height:2px;
  margin:4.5px 0;
  background: rgba(246,247,251,.92);
  border-radius:2px;
  transition: transform .22s ease, opacity .22s ease;
}

/* Burger jadi X pas drawer open */
body.drawer-open .burger span:nth-child(1){
  transform: translateY(6.5px) rotate(45deg);
}
body.drawer-open .burger span:nth-child(2){
  opacity:0;
}
body.drawer-open .burger span:nth-child(3){
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ================================
   DRAWER + OVERLAY
   ================================ */
.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 90;
}

.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(86vw, 360px);
  background: rgba(10,12,18,.94);
  border-left: 1px solid var(--stroke);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: translateX(110%);
  transition: transform .25s ease;
  z-index: 100;
  padding: 14px;
}

/* Open state */
body.drawer-open .drawer{
  transform: translateX(0);
}
body.drawer-open .drawer-overlay{
  opacity: 1;
  pointer-events: auto;
}

/* Close button floating (tanpa title) */
.drawer-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: rgba(246,247,251,.92);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left: auto;
}

/* Links */
.drawer-nav{
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 6px 10px;
}

.drawer-link{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: rgba(246,247,251,.88);
  font-weight: 850;
  background: rgba(255,255,255,.02);
}

.drawer-link:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.drawer-ticket{
  margin-top: 10px;
  display:inline-flex;
  justify-content:center;
}

/* Prevent body scroll when drawer open */
body.drawer-open{
  overflow: hidden;
}

    /* Responsive */
    @media (max-width: 920px){
      .hero-grid{ grid-template-columns: 1fr; }
      .col-7,.col-5,.col-6,.col-4{ grid-column: span 12; }
      .logo-grid{ grid-template-columns: repeat(2, 1fr); }
      .menu{ display:none; } /* kalau mau burger, gue bisa tambahin */
    }


/* =========================
   TICKET SECTION (FINAL)
   ========================= */
.ticket{
  background:#07080b;
  padding: calc(var(--navH) + 24px) 18px 140px;
  scroll-snap-align: none;
}

.ticket .wrap{
  max-width:1120px;
  margin:0 auto;
}

/* center text header */
.ticket .hero{
  text-align: center;
}

/* center form card */
.ticket .form-card{
  margin: 24px auto 0;     /* ⬅️ center horizontal */
}

.ticket .kicker{
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  opacity:.75;
}

.ticket h1{
  margin-top:6px;
  font-size:32px;
  font-weight:900;
}

.ticket .sub{
  color:rgba(246,247,251,.65);
  text-align: center;
  max-width: 520px;
  margin: 12px auto 0;
}

/* ===== Form ===== */
.form-card{ width:100%; max-width:560px; margin-top:14px; }

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:900px){
  .form-grid{ grid-template-columns:1fr; }
}

.field{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.label{
  font-weight:900;
  font-size:13px;
  color:rgba(246,247,251,.9);
}

.control{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:#f6f7fb;
  outline:none;
}

.control:focus{
  border-color:rgba(0,212,255,.45);
  box-shadow:0 0 0 4px rgba(0,212,255,.15);
}

.help{
  font-size:12px;
  color:rgba(246,247,251,.55);
}

.inline-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  font-size:12px;
  font-weight:800;
  color:rgba(246,247,251,.75);
}

/* upload */
.upload{
  border:1px dashed rgba(255,255,255,.18);
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.upload input[type="file"]{
  width:100%;
}

.upload input::-webkit-file-upload-button{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:900;
  padding:8px 12px;
  cursor:pointer;
}

/* =========================
   QRIS PAY CARD
   ========================= */
/* QRIS toggle */
.pay-card{
  max-width:560px;
  margin:12px auto 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  padding:16px;
  transition: all .25s ease;
}

/* hidden state */
.pay-card.is-hidden{
  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
  height:0;
  padding:0;
  margin:0 auto;
  overflow:hidden;
}


.pay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pay-title{ font-weight: 900; font-size: 14px; letter-spacing:.2px; }
.pay-sub{ color: rgba(246,247,251,.65); font-size: 12px; margin-top:4px; }

.pay-body{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items:start;
}

.pay-body img{
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
}

.pay-info{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 6px;
}

.pay-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px dashed rgba(255,255,255,.12);
  padding-bottom: 8px;
}

.pay-row span{ color: rgba(246,247,251,.60); font-size: 12px; }
.pay-row b{ color: rgba(246,247,251,.92); font-size: 13px; }

.pay-mini{ color: rgba(246,247,251,.55); font-size: 12px; margin-top: 4px; }

@media (max-width: 700px){
  .pay-body{ grid-template-columns: 1fr; }
  .pay-body img{ width: 100%; height: auto; aspect-ratio: 1/1; }
}

/* =========================
   LINE UP — MOBILE FIX
   tempel di CSS paling bawah
   ========================= */

/* 1) Pastikan media nggak bikin overflow */
#lineup img,
#lineup picture,
#lineup video,
.lineup img,
.lineup picture,
.lineup video{
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2) Grid lineup di mobile jadi 2 kolom (atau 1 kalau sempit banget) */
@media (max-width: 768px){

  /* target container grid lineup (pilih yg ada di project lo, tapi gue kasih banyak fallback) */
  #lineup .cards,
  #lineup .grid,
  #lineup .card-grid,
  #lineup .lineup-grid,
  .lineup .cards,
  .lineup .grid,
  .lineup .card-grid,
  .lineup-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* 3) Card jangan melebar kegedean */
  #lineup .card,
  .lineup .card,
  .lineup-card{
    width: 100%;
    max-width: 100%;
  }

  /* 4) Gambar dalam card dibikin konsisten & nggak “gede banget” */
  #lineup .card img,
  .lineup .card img,
  .lineup-card img{
    width: 100%;
    aspect-ratio: 1 / 1;   /* bikin square, enak buat lineup */
    object-fit: cover;
    border-radius: 14px;   /* opsional, kalau lo udah punya radius bisa dihapus */
  }

  /* 5) Nama band biar nggak makan tempat */
  #lineup .card h3,
  #lineup .card h4,
  #lineup .card .title,
  .lineup .card h3,
  .lineup .card h4,
  .lineup .card .title{
    font-size: 14px;
    line-height: 1.2;
  }
}

/* =========================
   LINE UP responsive fix
   ========================= */

/* pastiin grid bisa “ngecil”, gak maksa lebar */
#lineup .lineup-grid{
  display: grid;
  gap: 14px;
}

/* gambar gak bikin overflow */
#lineup .lineup-photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){

  /* dari desktop yang mungkin 4 kolom -> jadi 2 kolom */
  #lineup .lineup-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* card jangan kegedean */
  #lineup .lineup-card{
    width: 100%;
    max-width: 100%;
  }

  /* tinggi foto dibatesin biar card gak “jangkung/besar” */
  #lineup .lineup-photo{
    aspect-ratio: 1 / 1;     /* bikin kotak, rapih di mobile */
    overflow: hidden;
    border-radius: 14px;     /* kalau udah punya radius, ini aman tetep */
  }

  /* teks nama diperkecil dikit */
  #lineup .lineup-info .name{
    font-size: 14px;
    line-height: 1.2;
  }
}

/* FORCE LINEUP 2 KOLOM DI MOBILE KECIL */
@media (max-width: 768px){
  #lineup .lineup-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
}

/* HP kecil (<=420px) TETEP 2 KOLOM, cuma dipersempit */
@media (max-width: 420px){
  #lineup .lineup-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  #lineup .lineup-photo{
    aspect-ratio: 1 / 1;
  }

  #lineup .lineup-info .name{
    font-size: 13px;
  }
}

/* =========================
   UNIVERSAL SLIDER (LINEUP + ACTIVITY)
   ========================= */

.lineup-slider{
  position: relative;
  height: 80vh;
  border-radius: 22px;
  overflow: hidden;
  margin-top: 18px;
}

.lineup-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}

.lineup-slide.active{
  opacity: 1;
  z-index: 1;
}

.lineup-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

#lineup .lineup-slide img{
  object-fit: cover;
  object-position: center;
}



/* cinematic overlay */
.lineup-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.2) 50%,
    rgba(0,0,0,.4)
  );
}

.lineup-overlay{
  position: absolute;
  bottom: 10%;
  left: 8%;
  z-index: 2;
  color: white;
}

.lineup-overlay h3{
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 900;
  margin: 0;
}

/* dots */

.lineup-dots{
  position:absolute;
  bottom: 18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:3;
}

.lineup-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition: all .25s ease;
}

.lineup-dot.active{
  background:white;
  transform:scale(1.25);
}

/* mobile */

@media (max-width:768px){

  .lineup-slider{
    height:40vh;
  }

  .lineup-overlay{
    bottom:8%;
    left:6%;
  }

  .lineup-overlay h3{
    font-size: clamp(20px,6vw,28px);
  }

  .lineup-dot{
    width:8px;
    height:8px;
  }

}

@media (max-width:420px){

  .lineup-slider{
    height:30vh;
  }

  .lineup-overlay h3{
    font-size:20px;
  }

  .lineup-dot{
    width:6px;
    height:6px;
  }

}

/* =========================
   LINEUP SLIDER – MOBILE FIX
   ========================= */

@media (max-width: 768px){

  /* jangan fullscreen di HP */
  #lineup .lineup-slider{
    height: 40vh;       /* lebih proporsional */
    border-radius: 18px;
  }

  /* overlay jangan terlalu ke bawah */
  #lineup .lineup-overlay{
    bottom: 8%;
    left: 6%;
  }

  /* judul jangan segede gaban */
  #lineup .lineup-overlay h3{
    font-size: clamp(20px, 6vw, 28px);
  }

}

/* HP kecil banget */
@media (max-width: 420px){

  #lineup .lineup-slider{
    height: 30vh;
  }

  #lineup .lineup-overlay h3{
    font-size: 20px;
  }

}

/* =========================
   LINEUP DOTS
   ========================= */

#lineup .lineup-dots{
  position:absolute;
  bottom: 18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:3;
}

#lineup .lineup-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition: all .25s ease;
}

#lineup .lineup-dot.active{
  background:white;
  transform:scale(1.25);
}

/* =========================
   LINEUP DOTS – MOBILE SIZE
   ========================= */

@media (max-width: 768px){

  #lineup .lineup-dot{
    width:8px;
    height:8px;
  }

  #lineup .lineup-dots{
    gap:6px;
    bottom:14px; /* naik dikit biar gak mepet */
  }

}

@media (max-width: 420px){

  #lineup .lineup-dot{
    width:6px;
    height:6px;
  }

  #lineup .lineup-dots{
    gap:5px;
    bottom:12px;
  }

}

.countdown-section{
  text-align:center;
  padding:40px 20px;
  position:relative;
}

/* noise overlay */
.countdown-section::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.15;
  pointer-events:none;
}

#countdown{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-top:24px;
  flex-wrap:wrap;
}

#countdown div{
  background:#0e0e0e;
  padding:22px 26px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);

  font-family:'Share Tech Mono', monospace;

  box-shadow:
  inset 0 0 20px rgba(0,0,0,.6),
  0 10px 30px rgba(0,0,0,.4);
}

/* angka */
#countdown span{
  font-size:40px;
  font-weight:700;
  letter-spacing:2px;
  display:block;

  color:#f2f2f2;

  text-shadow:
  0 0 6px rgba(255,255,255,.2),
  0 0 12px rgba(255,255,255,.15);
}

/* label */
#countdown p{
  margin-top:6px;
  font-size:12px;
  letter-spacing:2px;
  color:rgba(255,255,255,.55);
}

.countdown-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity:.4;
  pointer-events:none;
}

@media (max-width:600px){

  #countdown{
    gap:10px;
  }

  #countdown div{
    padding:14px 12px;
    min-width:auto;
  }

  #countdown span{
    font-size:22px;
  }

  #countdown p{
    font-size:10px;
  }

  #countdown h2{
    font-size:25px;
  }

}

/* =========================
   SCROLL REVEAL
   ========================= */

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition: all .8s cubic-bezier(.22,.68,0,1);
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

@keyframes noiseFlash{
  0%{ filter:contrast(1); }
  20%{ filter:contrast(1.4) brightness(1.2); }
  40%{ filter:contrast(.9); }
  100%{ filter:contrast(1); }
}

.countdown-section.show{
  animation: noiseFlash .4s ease;
}