/* shared.css — dipakai bareng index.html & admin.html */
body{margin:0;background:#0d090d;color:#fff;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:flex;justify-content:center;min-height:100vh}
button{font-family:inherit}
.wrap{padding:40px 20px;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1280px;box-sizing:border-box}
.head{text-align:center;margin-bottom:20px;display:flex;flex-direction:column;align-items:center;width:100%}
h1{font-size:42px;font-weight:900;color:#ff2a5f;margin:0 0 8px;letter-spacing:-.5px;text-shadow:0 0 20px rgba(255,42,95,.3)}
.sub{color:#a1a1aa;font-size:15px;margin:0 0 20px}
.badge{background:#181115;border:1px solid #2d1820;padding:8px 20px;border-radius:9999px;font-size:15px;font-weight:600;color:#e4e4e7}
.badge span{color:#ff2a5f;font-weight:800}
:focus-visible{outline:2px solid #ff8c00;outline-offset:2px}

/* peta kursi */
#seating-wrapper{width:100%;overflow-x:auto;padding-bottom:20px;box-sizing:border-box;-webkit-overflow-scrolling:touch}
#stage-container{width:max-content;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.stage{width:100%;background:linear-gradient(180deg,#380816,#17040a);border:1px solid #881337;border-bottom:none;border-radius:12px 12px 0 0;padding:14px 0;text-align:center;box-shadow:0 -4px 20px rgba(136,19,55,.3);box-sizing:border-box;color:#ff2a5f;font-weight:900;letter-spacing:5px;font-size:15px}
.arena{display:flex;align-items:flex-start;gap:38px;width:100%;box-sizing:border-box;position:relative}
.arena::before{content:'';position:absolute;top:0;left:38px;right:38px;border-top:1px solid #881337;box-shadow:0 2px 14px rgba(136,19,55,.45)}
.catwalk{width:38px;height:318px;background:#17040a;border:1px solid #881337;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 6px 15px rgba(136,19,55,.25);display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;color:#ff2a5f;font-size:11px;font-weight:800;letter-spacing:3px;box-sizing:border-box;flex-shrink:0;user-select:none}
#chart{display:flex;gap:20px;margin-top:15px}
.seat-block{display:flex;flex-direction:column;gap:6px}
.block-1,.block-3{align-items:flex-end}.block-2,.block-4{align-items:flex-start}
.seat-row{display:flex;gap:5px;height:48px;align-items:center}
.seat{width:38px;height:46px;border-radius:6px;border:1px solid #3d0815;background:#1e050c;color:#f43f5e;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:700;padding:0;cursor:pointer;transition:.2s;flex-shrink:0}
.seat:hover{transform:translateY(-2px) scale(1.05);border-color:#ff2a5f;box-shadow:0 4px 12px rgba(255,42,95,.3);z-index:5}
.seat.visited{background:#ff8c00;border-color:#ffaa00;color:#000;font-weight:900;box-shadow:0 0 12px rgba(255,140,0,.5)}
.seat-count{font-size:11px;font-weight:900;margin-top:3px;background:#000;color:#fff;border-radius:99px;padding:1px 5px;line-height:1}

/* modal & lightbox */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);z-index:100;justify-content:center;align-items:center;padding:15px;box-sizing:border-box}
.overlay.open{display:flex}
.modal{background:#140d11;border:1px solid #3d222e;border-radius:16px;width:100%;max-width:440px;padding:24px;position:relative;box-sizing:border-box}
.x{position:absolute;top:16px;right:16px;background:none;border:none;color:#a1a1aa;font-size:22px;cursor:pointer}
.seat-badge{background:#ff8c00;color:#000;padding:3px 8px;border-radius:6px;font-weight:800;font-size:14px}
.hist{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto;margin-top:16px}
.hi{background:#1d1318;padding:12px 14px;border-radius:8px;border-left:4px solid #ff8c00}
.hi b{font-size:15px}.hd{font-size:13px;color:#ff2a5f;margin-top:2px}
.hn{font-size:13px;color:#a1a1aa;margin-top:4px;font-style:italic}
.ht{font-size:12px;color:#34d399;margin-top:4px;font-weight:600}
.hi img{display:block;max-width:100%;max-height:160px;border-radius:8px;margin-top:8px;cursor:zoom-in}
.empty{color:#9a9aa4;font-size:14px;text-align:center;padding:16px 0}
#lb-img{max-width:100%;max-height:90vh;border-radius:12px;box-shadow:0 0 30px rgba(0,0,0,.6)}
#lightbox{cursor:zoom-out;z-index:200}

/* animasi saat modal / lightbox dibuka */
@keyframes fade{from{opacity:0}}
@keyframes pop-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
.overlay.open{animation:fade .18s ease-out}
.overlay.open>.modal,#lightbox.open>img{animation:pop-in .22s cubic-bezier(.2,.8,.2,1)}
.seat:active{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){.overlay.open,.overlay.open>.modal,#lightbox.open>img{animation:none}}

/* popover hover (hanya perangkat dengan mouse) */
#pop{position:fixed;z-index:90;display:none;width:240px;box-sizing:border-box;pointer-events:none;background:#140d11;border:1px solid #3d222e;border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:13px}
#pop.on{display:block}
.pop-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:#e4e4e7;font-weight:600}
.pop-i{padding:8px 0;border-top:1px solid #24151d}
.pop-i b{font-size:14px}
.pop-m{margin-top:6px;color:#9a9aa4;font-size:11px}
@media(hover:none){#pop{display:none!important}}

@media(max-width:768px){
h1{font-size:28px}.sub{font-size:13px}.wrap{padding:20px 12px}
.seat{width:32px;height:38px;font-size:10px}.seat-row{height:40px;gap:4px}
#chart{gap:12px;margin-top:10px}
.catwalk{width:30px;height:260px;font-size:9px;letter-spacing:2px}
.arena::before{left:30px;right:30px}
.stage{font-size:12px;letter-spacing:3px}}

/* animasi tutup */
@keyframes fade-out{to{opacity:0}}
@keyframes pop-out{to{opacity:0;transform:translateY(8px) scale(.97)}}
.overlay.closing{animation:fade-out .15s ease-in forwards}
.overlay.closing>.modal,#lightbox.closing>img{animation:pop-out .15s ease-in forwards}
@media(prefers-reduced-motion:reduce){.overlay.closing,.overlay.closing>.modal,#lightbox.closing>img{animation:none}}

/* statistik, filter, legenda, grafik setlist */
.seat.dim{opacity:.25}
#stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;width:100%;margin-bottom:16px}
.stat{display:flex;flex-direction:column;justify-content:center;background:#181115;border:1px solid #2d1820;border-radius:12px;padding:12px 14px;text-align:center}
.sv{font-size:22px;font-weight:900;color:#ff8c00;line-height:1.15;overflow-wrap:anywhere}
.sv.sm{font-size:17px}
.sl{font-size:12px;color:#a1a1aa;margin-top:2px}
.ss{font-size:11px;color:#ff2a5f;font-weight:700;margin-top:2px}
#filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:16px}
#filters select,#filters input,#gallery-bar select,#tl-q,#ev-bar select{flex:1 1 150px;width:auto;min-width:0;max-width:100%;background:#181115;color:#fff;border:1px solid #2d1820;border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;color-scheme:dark}
#flt-info:empty{display:none}
#flt-info{flex-basis:100%;text-align:center;font-size:12px;color:#34d399;font-weight:600}
.btn-s{background:#181115;color:#e4e4e7;border:1px solid #3d222e;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer}
.btn-s:hover{border-color:#ff2a5f;color:#ff2a5f}
.btn-s:disabled{opacity:.4;cursor:default;border-color:#3d222e;color:#e4e4e7}
#legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;font-size:12px;color:#a1a1aa;margin:4px 0 24px}
.lg{display:inline-flex;align-items:center;gap:5px}
.lg i{width:14px;height:14px;border-radius:4px;border:1px solid}
.sec{font-size:18px;color:#ff2a5f;margin:28px 0 12px;width:100%;text-align:left}
#sl-chart{width:100%;display:flex;flex-direction:column;gap:4px}
.sl-row{display:grid;grid-template-columns:minmax(90px,220px) 1fr 44px;gap:10px;align-items:center;background:none;border:1px solid transparent;border-radius:8px;padding:6px 8px;color:#e4e4e7;font-size:13px;text-align:left;cursor:pointer}
.sl-row:hover,.sl-row.on{border-color:#ff2a5f;background:#181115}
.sl-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-bar{height:10px;background:#1e050c;border-radius:99px;overflow:hidden}
.sl-bar i{display:block;height:100%;background:linear-gradient(90deg,#c96a00,#ffd23f);border-radius:99px}
.sl-c{font-weight:800;color:#ff8c00;text-align:right}

/* peta lebih realistis: label baris, garis lorong, cahaya panggung */
#stage-container{position:relative;isolation:isolate}
#stage-container::before{content:'';position:absolute;z-index:-1;top:40px;left:8%;right:8%;height:220px;background:radial-gradient(ellipse at 50% 0,rgba(255,42,95,.2),transparent 70%);pointer-events:none}
.stage{text-shadow:0 0 14px rgba(255,42,95,.6)}
.seat-block{position:relative}
.seat-block+.seat-block::before{content:'';position:absolute;left:-10px;top:0;bottom:0;border-left:1px dashed #2d1820}
.row-labels{display:flex;flex-direction:column;gap:6px;width:18px;flex-shrink:0}
.row-labels .seat-row{justify-content:center;color:#9a9aa4;font-size:12px;font-weight:800}

/* animasi masuk & skeleton */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes shimmer{to{background-position:-200% 0}}
.intro .seat-row{animation:rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--r) * 45ms)}
.sk{background:linear-gradient(90deg,#181115 25%,#2a1a22 50%,#181115 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:12px}
.stat.sk{min-height:72px;border-color:transparent}
@media(prefers-reduced-motion:reduce){.intro .seat-row,.sk{animation:none}}

/* tab, kalender, galeri */
[hidden]{display:none!important}
#view-main,#view-gal,#view-tl,#view-ev{width:100%;display:flex;flex-direction:column;align-items:center}
.tabbar{display:flex;gap:8px;margin:0 0 16px}
.tab{padding:9px 22px;border-radius:9999px;border:1px solid #332128;background:#1a1014;color:#a1a1aa;font-size:14px;font-weight:600;cursor:pointer;transition:.25s}
.tab:hover{border-color:#ff2a5f;color:#fff}
.tab.on{background:#881337;border-color:#f43f5e;color:#fff;box-shadow:0 0 15px rgba(244,63,94,.3)}
#cal-nav{display:flex;gap:12px;align-items:center;width:100%;margin-bottom:10px;color:#e4e4e7}
#cal{width:100%;overflow-x:auto;padding-bottom:8px}
.cal-m,.cal-g{min-width:700px}
.cal-m{position:relative;height:18px;font-size:12px;color:#9a9aa4}
.cal-m span{position:absolute;top:0}
.cal-g{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);grid-template-columns:repeat(var(--w),minmax(0,1fr));gap:3px}
.cd{aspect-ratio:1;background:#2a0f18;border-radius:3px}
.cd.e{background:none}
.cd.on1{background:#c96a00}.cd.on2{background:#ff8c00}.cd.on3{background:#ffd23f}
#gallery-bar{display:flex;gap:10px;align-items:center;margin-bottom:12px;width:100%}
#g-info{font-size:12px;color:#34d399;font-weight:600}
#gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;width:100%}
.gi{margin:0;background:#181115;border:1px solid #2d1820;border-radius:12px;overflow:hidden}
.gi img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;cursor:zoom-in}
.gi figcaption{padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px;color:#a1a1aa}
.gi b{color:#fff;font-size:13px}
@media(max-width:768px){.seat-block+.seat-block::before{left:-7px}}

/* cakupan kursi */
#cover{width:100%;margin:0 0 16px;background:#181115;border:1px solid #2d1820;border-radius:12px;padding:12px 16px;box-sizing:border-box}
.cov-t{display:flex;justify-content:space-between;color:#e4e4e7}
.cov-t span{color:#ff8c00;font-weight:900}
.cov-bar{height:10px;background:#1e050c;border-radius:99px;overflow:hidden;margin:8px 0}
.cov-bar i{display:block;height:100%;background:linear-gradient(90deg,#c96a00,#ffd23f);border-radius:99px;transition:width .6s}
.cov-s{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#a1a1aa}
.seat.seen{opacity:.3}
.seat.want{border-color:#34d399;color:#34d399;box-shadow:0 0 10px rgba(52,211,153,.45)}

/* riwayat (timeline) */
#timeline{width:100%;max-width:760px}
.tl-mh{color:#ff2a5f;font-size:15px;margin:22px 0 8px;position:sticky;top:0;background:#0d090d;padding:6px 0;z-index:2}
.tl-i{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:start;background:#181115;border:1px solid #2d1820;border-left:4px solid #ff8c00;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.tl-d{text-align:center;line-height:1.15}
.tl-d b{font-size:22px;display:block}
.tl-d span{font-size:11px;color:#a1a1aa}
.tl-b b{font-size:15px}
.tl-s{border:none;cursor:pointer;font-family:inherit}

/* pencarian riwayat & grafik per bulan */
#tl-bar{display:flex;gap:10px;align-items:center;width:100%;max-width:760px;margin-bottom:4px}
#tl-info{font-size:12px;color:#34d399;font-weight:600;white-space:nowrap}
#mchart,#rchart{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;width:100%}
.mc{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.mc-n{font-size:12px;font-weight:800;color:#ff8c00;min-height:16px}
.mc-b{width:100%;max-width:56px;height:120px;display:flex;align-items:flex-end;background:#1e050c;border-radius:6px;overflow:hidden}
.mc-b i{display:block;width:100%;background:linear-gradient(0deg,#c96a00,#ffd23f);border-radius:6px 6px 0 0}
.mc-l{font-size:12px;color:#9a9aa4}

#rchart{grid-template-columns:repeat(10,1fr)}
#rsum{width:100%;font-size:13px;color:#a1a1aa;margin-top:10px;text-align:center}
.share{margin-top:10px;font-size:12px;padding:6px 10px}

/* sorot cahaya mengikuti kursor di peta */
#stage-container::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:var(--sp,0);transition:opacity .3s;mix-blend-mode:screen;background:radial-gradient(circle 170px at var(--mx,50%) var(--my,50%),rgba(255,190,110,.22),transparent 70%)}

/* kartu terakhir nonton */
#last{width:100%}
.last-c{display:flex;align-items:center;gap:16px;background:linear-gradient(100deg,rgba(255,42,95,.18),rgba(255,140,0,.08));border:1px solid #3d222e;border-radius:14px;padding:14px 18px;margin-bottom:16px;width:100%;box-sizing:border-box}
.last-c img,.last-s{width:64px;height:64px;border-radius:12px;object-fit:cover;flex-shrink:0}
.last-c img{cursor:zoom-in}
.last-s{display:flex;align-items:center;justify-content:center;background:#1e050c;color:#ffd23f;font-weight:900;font-size:18px}
.last-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:13px;color:#a1a1aa}
.last-b b{color:#fff;font-size:18px}
.last-l{color:#ff2a5f;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.last-a{font-size:22px;font-weight:900;color:#ff8c00;text-align:right}
@media(max-width:600px){.last-c{flex-wrap:wrap}.last-a{width:100%;text-align:left;font-size:18px}}

/* galeri polaroid */
#gallery{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px 22px;padding:10px 6px}
.gi{position:relative;overflow:visible;background:#f5efe6;border:none;border-radius:4px;padding:10px 10px 0;box-shadow:0 8px 22px rgba(0,0,0,.55);transform:rotate(var(--rot,0deg));transition:transform .25s,box-shadow .25s}
.gi:nth-child(3n+1){--rot:-2.2deg}.gi:nth-child(3n+2){--rot:1.6deg}.gi:nth-child(3n){--rot:-.8deg}
.gi:hover{transform:rotate(0) scale(1.05) translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.7);z-index:3}
.gi::before{content:'';position:absolute;top:-9px;left:50%;width:64px;height:18px;background:rgba(255,220,150,.5);transform:translateX(-50%) rotate(-3deg)}
.gi img{aspect-ratio:1;border-radius:2px}
.gi figcaption{color:#5a4a50;font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;text-align:center;align-items:center;padding:10px 4px 14px}
.gi b{color:#2a1a1f;font-size:16px}
@media(prefers-reduced-motion:reduce){.gi{transition:none}}

/* timeline bergaris waktu */
#timeline{position:relative;padding-left:34px}
#timeline::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:linear-gradient(#ff2a5f,#3d222e)}
.tl-yh{font-size:30px;font-weight:900;background:linear-gradient(90deg,#ff2a5f,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent;margin:24px 0 0;width:max-content}
.tl-mh::before{content:'';position:absolute;left:-29px;top:50%;width:10px;height:10px;border:2px solid #ff2a5f;border-radius:50%;background:#0d090d;transform:translateY(-50%)}
.tl-i{position:relative;border-left:1px solid #2d1820}
.tl-i::before{content:'';position:absolute;left:-28px;top:18px;width:12px;height:12px;border-radius:50%;background:#ff8c00;box-shadow:0 0 0 4px #0d090d}
.tl-i.ms::before{left:-31px;top:15px;width:18px;height:18px;background:#ffd23f;box-shadow:0 0 0 4px #0d090d,0 0 18px #ffd23f}
.tl-i.ms{border-color:#6b4a12;background:linear-gradient(100deg,rgba(255,210,63,.1),#181115 60%)}
.tl-star{color:#ffd23f;font-size:12px;font-weight:800;margin-top:2px}

/* pencarian & timeline: lebar sama, tepi sejajar dengan kartu; ikon kaca pembesar */
#tl-bar,#timeline{box-sizing:border-box;width:100%;max-width:760px}
#tl-bar{padding-left:34px}
#tl-q{padding-left:38px;background-repeat:no-repeat;background-position:12px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239a9aa4' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
#tl-q:focus{border-color:#ff2a5f;outline:none}

/* tab tiket & event */
#view-ev{max-width:860px;margin:0 auto}
.lot-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;width:100%;margin-bottom:14px}
#lot,#ev-list{width:100%}
.lot-r{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;font-size:13px;color:#e4e4e7;padding:6px 8px}
.lot-n{font-size:12px;color:#a1a1aa;margin:8px}
#ev-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;margin-bottom:12px}
#ev-info{font-size:12px;color:#34d399;font-weight:600}
.ev-i{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:start;background:#181115;border:1px solid #2d1820;border-left:4px solid #ff2a5f;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.chip{font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;border:1px solid;white-space:nowrap}
.chip.ok{color:#34d399;border-color:#1c6b4f}.chip.no{color:#a1a1aa;border-color:#3d222e}
.chip.win{color:#ffd23f;border-color:#6b4a12}.chip.lose{color:#f87171;border-color:#6b2b2b}

/* tab Tiket & Event: kartu kategori, peringkat member, seri yang bisa dibuka */
#ev-cats{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:10px;width:100%;margin-bottom:16px}
.ev-c{display:flex;flex-direction:column;align-items:center;gap:2px;background:#181115;border:1px solid #2d1820;border-radius:12px;padding:12px 10px;color:#e4e4e7;cursor:pointer;font-family:inherit;transition:.2s}
.ev-c b{font-size:24px;color:#ff8c00;font-weight:900}
.ev-c span{font-size:13px;font-weight:700;text-align:center}
.ev-c small{font-size:11px;color:#a1a1aa}
.ev-c:hover{border-color:#ff2a5f}
.ev-c.on{border-color:#ff2a5f;background:linear-gradient(160deg,rgba(255,42,95,.22),#181115)}
.sec2{font-size:15px;color:#ff2a5f;margin:18px 0 8px;width:100%}
#ev-up,#ev-rank{width:100%}
.rk{display:grid;grid-template-columns:24px minmax(110px,190px) 1fr 64px;gap:10px;align-items:center;width:100%;background:none;border:1px solid transparent;border-radius:8px;padding:6px 8px;color:#e4e4e7;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.rk:hover,.rk.on{border-color:#ff2a5f;background:#181115}
.rn{color:#9a9aa4;font-weight:800;text-align:center}
.rm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc{font-weight:800;color:#ff8c00;text-align:right}
.ev-g{background:#181115;border:1px solid #2d1820;border-left:4px solid #ff2a5f;border-radius:10px;margin-bottom:8px}
.ev-g summary{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:start;padding:10px 12px;cursor:pointer;list-style:none}
.ev-g summary::-webkit-details-marker{display:none}
.ev-g[open]{border-color:#ff2a5f}
.mchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mchip{background:#24151d;border-radius:99px;padding:2px 9px;font-size:11px;color:#e4e4e7}
.ev-d{border-top:1px solid #24151d;padding:6px 12px 10px 80px}
.ev-t{display:grid;grid-template-columns:150px 1fr auto;gap:10px;font-size:12px;color:#a1a1aa;padding:4px 0;align-items:center}
.chip.soon{color:#93c5fd;border-color:#1e3a5f}
#ev-more{margin:8px auto 0;display:block}
#ev-more[hidden]{display:none}
@media(max-width:600px){.ev-d{padding-left:12px}.ev-t{grid-template-columns:1fr auto}.ev-t span:nth-child(2){grid-column:1;grid-row:2}.rk{grid-template-columns:22px minmax(80px,130px) 1fr 56px}}

.stat.main{border-color:#ff2a5f;background:linear-gradient(160deg,rgba(255,42,95,.22),#181115)}
.stat.main .sv{font-size:28px;color:#ffd23f}
#ev-rank .btn-s{margin:6px 0 0 8px}
#ev-bar{margin-top:4px}
@media(max-width:600px){#ev-cats{grid-template-columns:repeat(2,1fr)}}

/* animasi tab & isi tab (item/bar hanya beranimasi saat tab dibuka, lewat kelas .enter) */
@keyframes tabin{from{opacity:0;transform:translate(var(--tabx,0),8px)}}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes growy{from{transform:scaleY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.3)}}
#view-main,#view-gal,#view-tl,#view-ev{animation:tabin .28s ease-out}
.enter .tl-i,.enter .gi,.enter .ev-g,.enter .ev-c,.shown .sl-row,.shown .rk{animation:rise .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
.shown .sl-bar i{transform-origin:left;animation:growx .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms + .15s)}
.shown .mc-b i{transform-origin:bottom;animation:growy .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 40ms + .15s)}
.shown .cd.on1,.shown .cd.on2,.shown .cd.on3{animation:pop .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 20ms + .3s)}
/* buka-tutup halus untuk detail seri (browser yang belum mendukung ::details-content langsung membuka tanpa transisi) */
.ev-g{interpolate-size:allow-keywords}
.ev-g::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
.ev-g[open]::details-content{block-size:auto}
.ev-g[open] .ev-d{animation:fade .25s ease-out}
@media(prefers-reduced-motion:reduce){
#view-main,#view-gal,#view-tl,#view-ev,.enter .tl-i,.enter .gi,.enter .ev-g,.enter .ev-c,.enter .sl-row,.enter .rk,.enter .sl-bar i,.enter .mc-b i,.enter .cd.on1,.enter .cd.on2,.enter .cd.on3,.ev-g[open] .ev-d{animation:none}
.ev-g::details-content{transition:none}}

/* grafik & kalender yang bisa diklik untuk memfilter peta */
.hint{font-size:12px;font-weight:500;color:#9a9aa4;margin-left:2px}
.mc[role=button],.cd[role=button]{cursor:pointer}
.mc[role=button]:hover .mc-b,.mc.on .mc-b{outline:2px solid #ff2a5f;outline-offset:1px}
.mc.on .mc-l{color:#ff2a5f;font-weight:800}
.cd[role=button]:hover,.cd.sel{box-shadow:0 0 0 2px #ff2a5f;position:relative;z-index:1}

/* gerak saat nilai grafik berubah + umpan balik klik */
.sl-bar i{transition:width .55s cubic-bezier(.2,.8,.2,1)}
.mc-b i{transition:height .55s cubic-bezier(.2,.8,.2,1)}
.mc-b,.cd[role=button],.sl-row,.rk,.btn-s{transition:transform .15s,box-shadow .15s,border-color .2s,background .2s}
.mc[role=button]:active .mc-b{transform:scale(.96)}
.cd[role=button]:active{transform:scale(.7)}
.sl-row:active,.rk:active,.ev-c:active{transform:scale(.98)}
.tab:active,.btn-s:active{transform:scale(.96)}
@keyframes seatflash{0%{transform:scale(1.22);box-shadow:0 0 0 0 rgba(255,210,63,.8)}100%{transform:scale(1);box-shadow:0 0 0 16px rgba(255,210,63,0)}}
.flash .seat.visited{animation:seatflash .8s ease-out .35s}
@media(prefers-reduced-motion:reduce){.sl-bar i,.mc-b i{transition:none}.flash .seat.visited{animation:none}
.mc[role=button]:active .mc-b,.cd[role=button]:active,.sl-row:active,.rk:active,.ev-c:active,.tab:active,.btn-s:active{transform:none}}

/* animasi klik & perubahan data */
@keyframes seatpop{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.12)}100%{transform:none;opacity:1}}
@keyframes selpulse{0%{box-shadow:0 0 0 0 rgba(255,42,95,.55)}100%{box-shadow:0 0 0 12px rgba(255,42,95,0)}}
.refresh .seat.visited{animation:seatpop .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--r,0) * 28ms)}
.mc.on .mc-b,.rk.on,.sl-row.on,.ev-c.on,.cd.sel{animation:selpulse .6s ease-out}
.mc[role=button]:active,.sl-row:active,.rk:active,.ev-c:active,.tab:active{transform:scale(.97)}
.cd[role=button]:active{transform:scale(.8)}
.mc,.rk,.sl-row,.ev-c,.tab,.cd{transition:transform .15s,border-color .2s,background .2s}
@media(prefers-reduced-motion:reduce){.refresh .seat.visited,.mc.on .mc-b,.rk.on,.sl-row.on,.ev-c.on,.cd.sel{animation:none}.mc:active,.sl-row:active,.rk:active,.ev-c:active,.tab:active,.cd[role=button]:active{transform:none}}

/* perapian tampilan */
*{scrollbar-width:thin;scrollbar-color:#3d222e #140d11}
html{scroll-padding-top:76px}
.tabbar{position:sticky;top:0;z-index:30;padding:10px 14px;margin:0 0 16px;background:rgba(13,9,13,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:0 0 16px 16px;flex-wrap:wrap;justify-content:center}
.tl-mh{top:62px}
#view-main .sec,#view-ev .sec{padding-top:20px;border-top:1px solid #1d1318}
#view-ev>.sec:first-child{border-top:none;padding-top:0}
.sv,.sl-c,.rc,.mc-n,.cov-t span,.ss{font-variant-numeric:tabular-nums}
h1,.sec,.sec2{text-wrap:balance}
#cal{padding-bottom:10px}

/* hubungan riwayat-tiket, lotre per setlist, cincin persen, footer, hitung mundur */
.lt{font-size:12px;color:#ffd23f;margin-top:4px;font-weight:600}
.ls-r{display:grid;grid-template-columns:minmax(110px,200px) 1fr minmax(140px,auto);gap:10px;align-items:center;font-size:13px;padding:4px 0;color:#e4e4e7}
.ls-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-b{height:10px;background:#3a1018;border-radius:99px;overflow:hidden}
.ls-b i{display:block;height:100%;background:linear-gradient(90deg,#c96a00,#ffd23f);border-radius:99px}
.ls-c{color:#a1a1aa;text-align:right;font-size:12px}
.ring{position:relative;width:88px;height:88px;margin:0 auto 6px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.2}
.rb{stroke:#2a0f18}
.rf{stroke:#ffd23f;stroke-linecap:round;stroke-dasharray:var(--p) 100}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;color:#ffd23f}
@keyframes ringfill{from{stroke-dasharray:0 100}}
.shown .rf{animation:ringfill 1.1s cubic-bezier(.2,.8,.2,1) both}
.foot{margin-top:32px;font-size:12px;color:#9a9aa4;text-align:center}
.foot:empty{display:none}
.cd-live{color:#93c5fd;font-weight:700}
@media(max-width:600px){.ls-r{grid-template-columns:1fr auto}.ls-b{grid-column:1/-1;grid-row:2}}

/* penanda tab meluncur & pil filter aktif & percikan */
.tab{position:relative;z-index:1}
.tab.on{background:transparent;border-color:transparent;box-shadow:none}
.tab-ind{position:absolute;left:0;top:0;box-sizing:border-box;border-radius:9999px;background:#881337;border:1px solid #f43f5e;box-shadow:0 0 15px rgba(244,63,94,.3);transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
#fbar{position:fixed;left:50%;bottom:18px;z-index:40;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:9px 10px 9px 16px;border-radius:99px;background:rgba(24,17,21,.94);border:1px solid #ff2a5f;box-shadow:0 8px 28px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;color:#e4e4e7;transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s}
#fbar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#fbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fbar button{background:#be123c;color:#fff;border:none;border-radius:99px;padding:6px 14px;font-weight:700;cursor:pointer;font-size:12px}
.sparkle{position:fixed;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;z-index:95}
@media(prefers-reduced-motion:reduce){.shown .rf,.shown .sl-bar i,.shown .mc-b i,.shown .cd.on1,.shown .cd.on2,.shown .cd.on3,.shown .sl-row,.shown .rk{animation:none}.tab-ind,#fbar{transition:none}}

/* alur OFC -> General: tahap mengalir berurutan */
.shown .lot-r.fl{animation:rise .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * .55s)}
.shown .lot-r.fl .sl-bar i{transform-origin:left;animation:growx .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * .55s + .15s)}
.lot-r.fl b{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.shown .lot-r.fl,.shown .lot-r.fl .sl-bar i{animation:none}}

/* zoom peta di HP, cerita otomatis */
#seating-wrapper{touch-action:pan-x pan-y}
#zoomctl{display:none;gap:8px;justify-content:center;margin:0 0 8px;width:100%}
@media(max-width:768px){#zoomctl{display:flex}}
#story{width:100%;box-sizing:border-box;margin:0 0 16px;padding:12px 16px;font-size:15px;line-height:1.65;color:#d4d4d8;border-left:3px solid #ff2a5f;background:linear-gradient(90deg,rgba(255,42,95,.09),transparent);border-radius:0 12px 12px 0}
#story:empty{display:none}
#story b{color:#ff8c00}

/* keterangan yang bisa dibuka */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin-left:6px;vertical-align:middle;background:none;border:1px solid #3d222e;border-radius:50%;color:#a1a1aa;font-size:12px;line-height:1;cursor:pointer;font-family:inherit}
.info-btn:hover,.info-btn[aria-expanded=true]{color:#ff2a5f;border-color:#ff2a5f}
.hint{margin-left:6px}
.lot-notes{margin:10px 0 0;width:100%}
.lot-notes summary{cursor:pointer;color:#9a9aa4;font-size:12px;font-weight:600;list-style:none}
.lot-notes summary::-webkit-details-marker{display:none}
.lot-notes summary:hover{color:#ff2a5f}
.lot-notes[open] summary{margin-bottom:6px}

/* jumlah tiket VC & MnG diblur di halaman publik */
.blur-n{display:inline-block;filter:blur(5px);user-select:none;pointer-events:none}

/* ===== penghalusan & animasi tambahan (index + admin) ===== */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes tabout{to{opacity:0;transform:translate(calc(var(--tabx,0px) * -.5),-4px)}}
@keyframes popin{from{opacity:0;transform:translateY(4px) scale(.96)}}
html{scroll-behavior:smooth}
.head h1{animation:drop .7s var(--ease) both}
.head .sub{animation:drop .7s var(--ease) .08s both}
.head .badge{animation:drop .7s var(--ease) .16s both}
.tabbar{transition:box-shadow .3s}
.tabbar.stuck{box-shadow:0 10px 28px rgba(0,0,0,.5)}
.leave{animation:tabout .12s ease-in both}
#pop.on{animation:popin .16s var(--ease)}
.btn-s,.btn,.todo-c,.tt-y,.tab,.info-btn{transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .2s}
.btn-s:active,.btn:active,.todo-c:active,.tt-y:active{transform:scale(.96)}
.stat:not(.sk),.tt-c,.ev-c,.last-c{transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,background .25s}
.stat:not(.sk):hover,.tt-c:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.ev-g,.tl-i{transition:border-color .25s,background .25s,transform .25s var(--ease)}
.ev-g:hover,.tl-i:hover{transform:translateX(3px)}
.gi img,.hi img,.last-c img{animation:fade .5s ease-out}
.enter #story,.enter .last-c,.enter #cover,.enter #filters,.enter #stats .stat{animation:rise .55s var(--ease) both}
.enter #stats .stat:nth-child(2){animation-delay:60ms}
.enter #stats .stat:nth-child(3){animation-delay:120ms}
.enter #stats .stat:nth-child(4){animation-delay:180ms}
.enter #stats .stat:nth-child(5){animation-delay:240ms}
.enter #stats .stat:nth-child(6){animation-delay:300ms}
.enter #stats .stat:nth-child(7){animation-delay:360ms}
.enter #stats .stat:nth-child(8){animation-delay:420ms}
.enter #cover{animation-delay:.24s}
.enter #filters{animation-delay:.3s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}