/* booth-mncu — neo brutalism light + ghost — ponytail ultra */
:root{--bg:#FAFAFA;--card:#ffffff;--line:#111;--txt:#111;--muted:#6b7280;--acc:#FF4D8D;--acc2:#0038FF;--neo-yellow:#FACC15;--neo-pink:#FF4D8D;--neo-blue:#0038FF;--neo-green:#22C55E;--neo-orange:#FF5500}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--txt);font:14px/1.5 'Space Grotesk',ui-sans,system-ui,sans-serif}
h1{font-size:28px;line-height:1.15;margin:8px 0}h2{font-size:22px;margin:0}
.muted{color:var(--muted)}.center{text-align:center}
.view{min-height:100dvh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}[hidden]{display:none!important}
.view:not([hidden]){animation:viewIn .35s cubic-bezier(0.16,1,0.3,1)}@keyframes viewIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.view:not([hidden]) .neo-grid{animation:gridIn .35s ease}@keyframes gridIn{from{transform:translateY(6px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.view:not([hidden]),.view:not([hidden]) .neo-grid{animation:none}}
.view-gate{overflow:visible}
/* grid + ghost base */
.neo-grid{position:absolute;inset:0;opacity:.04;pointer-events:none;background-image:linear-gradient(#111 1px,transparent 1px),linear-gradient(90deg,#111 1px,transparent 1px);background-size:20px 20px}
/* ghost */
#ghost{--ghost:#FF4D8D}
#ghost.ghost-base{position:absolute;scale:.45;opacity:.85;pointer-events:none;z-index:1;transition:left 1.2s ease,top 1.2s ease,transform .25s ease;will-change:left,top,transform}
#ghost.ghost-base.facing-right{scale:-.45 .45}
#ghost.landing-ghost{position:absolute;scale:.45;opacity:.85;pointer-events:none;z-index:1;transition:left 1.2s ease,top 1.2s ease,transform .25s ease;will-change:left,top,transform}
#ghost.landing-ghost.facing-right{scale:-.45 .45}
#red{animation:upNDown infinite .5s;position:relative;width:140px;height:140px;display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(14,1fr);grid-template-areas:"a1 a2 a3 a4 a5 top0 top0 top0 top0 a10 a11 a12 a13 a14" "b1 b2 b3 top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14" "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14" "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14" "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14" "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5" "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18"}
@keyframes upNDown{0%,49%{transform:translateY(0)}50%,100%{transform:translateY(-10px)}}
#top0,#top1,#top2,#top3,#top4,#st0,#st1,#st2,#st3,#st4,#st5{background:var(--ghost)}
#top0{grid-area:top0}#top1{grid-area:top1}#top2{grid-area:top2}#top3{grid-area:top3}#top4{grid-area:top4}
#st0{grid-area:st0}#st1{grid-area:st1}#st2{grid-area:st2}#st3{grid-area:st3}#st4{grid-area:st4}#st5{grid-area:st5}
#an1{grid-area:an1;animation:flicker0 infinite .5s}#an18{grid-area:an18;animation:flicker0 infinite .5s}
#an2{grid-area:an2;animation:flicker1 infinite .5s}#an17{grid-area:an17;animation:flicker1 infinite .5s}
#an3{grid-area:an3;animation:flicker1 infinite .5s}#an16{grid-area:an16;animation:flicker1 infinite .5s}
#an4{grid-area:an4;animation:flicker1 infinite .5s}#an15{grid-area:an15;animation:flicker1 infinite .5s}
#an6{grid-area:an6;animation:flicker0 infinite .5s}#an12{grid-area:an12;animation:flicker0 infinite .5s}
#an7{grid-area:an7;animation:flicker0 infinite .5s}#an13{grid-area:an13;animation:flicker0 infinite .5s}
#an9{grid-area:an9;animation:flicker1 infinite .5s}#an10{grid-area:an10;animation:flicker1 infinite .5s}
#an8{grid-area:an8;animation:flicker0 infinite .5s}#an11{grid-area:an11;animation:flicker0 infinite .5s}
@keyframes flicker0{0%,49%{background:var(--ghost)}50%,100%{background:transparent}}
@keyframes flicker1{0%,49%{background:transparent}50%,100%{background:var(--ghost)}}
#eye{width:40px;height:50px;position:absolute;top:30px;left:10px}#eye::before{content:"";background:#fff;width:20px;height:50px;transform:translateX(10px);display:block;position:absolute}#eye::after{content:"";background:#fff;width:40px;height:30px;transform:translateY(10px);display:block;position:absolute}
#eye1{width:40px;height:50px;position:absolute;top:30px;right:30px}#eye1::before{content:"";background:#fff;width:20px;height:50px;transform:translateX(10px);display:block;position:absolute}#eye1::after{content:"";background:#fff;width:40px;height:30px;transform:translateY(10px);display:block;position:absolute}
#pupil{width:20px;height:20px;background:#0038FF;position:absolute;top:50px;left:10px;z-index:1;animation:eyesMovement infinite 3s}
#pupil1{width:20px;height:20px;background:#0038FF;position:absolute;top:50px;right:50px;z-index:1;animation:eyesMovement infinite 3s}
@keyframes eyesMovement{0%,49%{transform:translateX(0)}50%,99%{transform:translateX(10px)}100%{transform:translateX(0)}}
#shadow{background:#000;width:140px;height:140px;position:absolute;border-radius:50%;transform:rotateX(80deg);filter:blur(20px);top:80%;animation:shadowMovement infinite .5s}
@keyframes shadowMovement{0%,49%{opacity:.5}50%,100%{opacity:.2}}
/* loader */
#loader{position:fixed;inset:0;z-index:9999;background:#FAFAFA;display:grid;place-items:center;transition:opacity .4s ease,visibility .4s ease}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
#ghost-loader{position:relative;scale:.8}
#red-loader{animation:upNDown infinite .5s;position:relative;width:140px;height:140px;display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(14,1fr);grid-template-areas:"a1 a2 a3 a4 a5 top0 top0 top0 top0 a10 a11 a12 a13 a14" "b1 b2 b3 top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14" "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14" "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14" "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14" "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5" "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18"}
#top0-loader,#top1-loader,#top2-loader,#top3-loader,#top4-loader,#st0-loader,#st1-loader,#st2-loader,#st3-loader,#st4-loader,#st5-loader{background:blue}
#top0-loader{grid-area:top0}#top1-loader{grid-area:top1}#top2-loader{grid-area:top2}#top3-loader{grid-area:top3}#top4-loader{grid-area:top4}
#st0-loader{grid-area:st0}#st1-loader{grid-area:st1}#st2-loader{grid-area:st2}#st3-loader{grid-area:st3}#st4-loader{grid-area:st4}#st5-loader{grid-area:st5}
#an1-loader{grid-area:an1;animation:flicker0-loader infinite .5s}#an18-loader{grid-area:an18;animation:flicker0-loader infinite .5s}
#an2-loader{grid-area:an2;animation:flicker1-loader infinite .5s}#an17-loader{grid-area:an17;animation:flicker1-loader infinite .5s}
#an3-loader{grid-area:an3;animation:flicker1-loader infinite .5s}#an16-loader{grid-area:an16;animation:flicker1-loader infinite .5s}
#an4-loader{grid-area:an4;animation:flicker1-loader infinite .5s}#an15-loader{grid-area:an15;animation:flicker1-loader infinite .5s}
#an6-loader{grid-area:an6;animation:flicker0-loader infinite .5s}#an12-loader{grid-area:an12;animation:flicker0-loader infinite .5s}
#an7-loader{grid-area:an7;animation:flicker0-loader infinite .5s}#an13-loader{grid-area:an13;animation:flicker0-loader infinite .5s}
#an9-loader{grid-area:an9;animation:flicker1-loader infinite .5s}#an10-loader{grid-area:an10;animation:flicker1-loader infinite .5s}
#an8-loader{grid-area:an8;animation:flicker0-loader infinite .5s}#an11-loader{grid-area:an11;animation:flicker0-loader infinite .5s}
#an5-loader{grid-area:an5;animation:flicker1-loader infinite .5s}
#an14-loader{grid-area:an14;animation:flicker1-loader infinite .5s}
@keyframes flicker0-loader{0%,49%{background:blue}50%,100%{background:transparent}}
@keyframes flicker1-loader{0%,49%{background:transparent}50%,100%{background:blue}}
#eye-loader,#eye1-loader{width:40px;height:50px;position:absolute;top:30px}
#eye-loader{left:20px}#eye1-loader{right:20px}
#eye-loader::before,#eye1-loader::before{content:"";background:blue;width:20px;height:50px;transform:translateX(10px);display:block;position:absolute}
#eye-loader::after,#eye1-loader::after{content:"";background:blue;width:40px;height:30px;transform:translateY(10px);display:block;position:absolute}
#pupil-loader,#pupil1-loader{width:20px;height:20px;background:#fcc78b;position:absolute;top:50px;z-index:1}
#pupil-loader{left:30px}#pupil1-loader{right:30px}
#mouthstart-loader,#mouthend-loader{width:10px;height:10px;background:#fcc78b;position:absolute;z-index:1;top:100px}
#mouth1-loader,#mouth2-loader,#mouth3-loader,#mouth4-loader,#mouth5-loader{width:20px;height:10px;background:#fcc78b;position:absolute;z-index:1;top:100px}
#mouthstart-loader{left:10px}#mouthend-loader{left:120px}
#mouth1-loader{top:90px;left:20px}#mouth2-loader{left:40px}#mouth3-loader{top:90px;left:60px}#mouth4-loader{left:80px}#mouth5-loader{top:90px;left:100px}
#shadow-loader{background:#000;width:140px;height:140px;position:absolute;border-radius:50%;transform:rotateX(80deg);filter:blur(20px);top:80%;animation:shadowMovement infinite .5s}
/* neo */
.neo-card{position:relative;z-index:2;background:#fff;border:3px solid #111;box-shadow:8px 8px 0 #111;transition:all .15s ease}
.neo-card:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 #111}
.neo-btn{border:3px solid #111;box-shadow:4px 4px 0 #111;transition:all .1s ease;font-family:'JetBrains Mono',monospace;font-weight:700;background:#fff;color:#111;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.neo-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.neo-btn:active{transform:translate(4px,4px);box-shadow:none}
.neo-btn:disabled{opacity:.45;pointer-events:none}
.neo-btn-primary{background:var(--neo-yellow);padding:16px 28px;font-size:15px;min-width:220px}
@media(max-width:640px){.neo-btn-primary{padding:14px 22px;font-size:14px;min-width:180px}}
.neo-btn-primary .icon{width:20px;height:20px}
.neo-btn-dark{background:#111;color:#fff}
.icon{width:16px;height:16px;flex:none;stroke-width:1.9}
.icon-sm{width:14px;height:14px}
/* landing — margin atasan */
.view-gate{background:#FAFAFA;min-height:100dvh;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
@media(min-width:768px){.view-gate{padding:24px;gap:16px;min-height:100dvh}}
.view-gate .neo-landing-card{margin-top:8px}
.landing-grid{position:absolute;inset:0;opacity:.04;pointer-events:none;background-image:linear-gradient(#111 1px,transparent 1px),linear-gradient(90deg,#111 1px,transparent 1px);background-size:20px 20px}
.marco-head{position:relative;z-index:2;text-align:center;margin-bottom:8px;width:100%;max-width:1152px;margin-left:auto;margin-right:auto;overflow:visible}
.marco-headline{font-family:'Oswald',sans-serif;font-size:clamp(96px,11vw,216px);line-height:.82;letter-spacing:-.04em;text-transform:uppercase;font-weight:700;color:#111;position:relative;display:inline-block;max-width:100%;overflow:visible}
@media(max-width:768px){.marco-headline{font-size:clamp(72px,20vw,110px)}}
.marco-headline .glitch-outline{-webkit-text-stroke:2.5px #111;paint-order:stroke fill}
@media(min-width:768px){.marco-headline .glitch-outline{-webkit-text-stroke-width:3.5px!important}}
/* glitch akurat — copy web-jualan 100% */
.brutal-headline{line-height:.9;letter-spacing:-.03em;overflow:visible!important}
@keyframes glitch{0%,92.9%,100%{clip-path:inset(0 0 100% 0);transform:none}93%{clip-path:inset(0 0 55% 0);transform:translate(-4px,1px)}95%{clip-path:inset(30% 0 30% 0);transform:translate(4px,-1px)}97%{clip-path:inset(60% 0 0 0);transform:translate(-3px,2px)}}
.glitch-text{position:relative;display:inline-block;line-height:.9}
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;inset:0;background:#FAFAFA;line-height:.9}
.glitch-text::before{color:#FF4D8D;animation:glitch 6s infinite steps(1);z-index:-1}
.glitch-text::after{color:#0038FF;animation:glitch 6s infinite steps(1);animation-delay:.1s;z-index:-2}
.brutal-headline .glitch-text{color:#111}
.glitch-outline{line-height:.9}
.cake-word{display:inline-block;animation:cakeColor 6s infinite steps(1)}
@keyframes cakeColor{0%,92.9%{color:#111}93%{color:#FF4D8D}95%{color:#22C55E}97%{color:#FACC15}100%{color:#111}}
.topi-hat{position:absolute!important;left:74%!important;top:-.32em!important;transform:translateX(-50%) rotate(-6deg)!important;width:0.565em!important;height:auto;pointer-events:none;z-index:10!important;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.15))}
@media(max-width:640px){.brutal-headline .glitch-outline{-webkit-text-stroke-width:2px!important}.topi-hat{top:-.28em!important;width:0.6em!important;left:72%!important}}
#heroHeadline{overflow:visible!important}
#ghost+.marco-head{margin-top:0}
.neo-landing-card{max-width:520px;width:100%;padding:28px;text-align:center;margin-top:6px}
.neo-title{font-family:'Oswald',sans-serif;font-size:32px;line-height:.92;letter-spacing:-.03em;text-transform:uppercase;color:#111;margin:12px 0 8px}
.neo-desc{font-family:'JetBrains Mono',monospace;font-size:12px;color:#374151;line-height:1.6;margin:0}
.neo-hint{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6b7280;margin-top:12px}
.msg{margin-top:12px;padding:10px 12px;background:#FF4D8D;color:#fff;border:3px solid #111;box-shadow:3px 3px 0 #111;font-family:'JetBrains Mono',monospace;font-size:12px;text-align:left}
/* frames — atasan biar tidak terlalu bawah */
.view-frames{background:#FAFAFA;align-items:start;justify-items:center;padding-top:36px}
@media(min-width:768px){.view-frames{padding-top:48px}}
.wrap{max-width:860px;width:100%;position:relative;z-index:2}
.top{margin-bottom:16px}
.top h2{font-family:'Oswald',sans-serif;font-size:90px;text-transform:uppercase;letter-spacing:-.02em;text-align:center}
.top p{font-family:'JetBrains Mono',monospace;font-size:12px;color:#6b7280}
.grid{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:16px;margin:16px 0;align-items:start}
@media(max-width:640px){.grid{grid-template-columns:1fr;justify-items:center}}
.frame-card{padding:12px;cursor:pointer;text-align:left;width:fit-content;max-width:100%;display:flex;flex-direction:column;align-items:center;margin:0 auto}
.frame-card .card-img-wrap{background:#FAFAFA;border:3px solid #111;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px;max-width:100%}
.frame-card .card-img-wrap img{width:100%;height:100%;object-fit:contain;background:transparent;border:none;display:block}
.frame-card b{display:block;margin-top:10px;font-family:'Oswald',sans-serif;font-size:16px;text-transform:uppercase}
.frame-card span{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6b7280}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px}
.chip{padding:8px 16px;font-size:12px}
.chip.active{background:#111;color:#fff}
.size-badge{display:inline-block;margin-top:6px;border:2px solid #111;padding:2px 8px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;background:var(--neo-yellow);color:#111}
/* booth */
.view-booth{background:#FAFAFA}
.booth-layout{width:min(1120px,100%);position:relative;z-index:2}
.booth-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.booth-head h2{font-family:'Oswald',sans-serif;font-size:22px;text-transform:uppercase}
.stage{width:100%;display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
@media(max-width:860px){.stage{grid-template-columns:1fr}}
.frame-preview-wrap{display:grid;gap:12px}
.frame-preview{position:relative;background:#fff;border:3px solid #111;box-shadow:8px 8px 0 #111;overflow:hidden;display:grid;place-items:center;max-width:100%;margin:0 auto}
.frame-preview .slot-layer,.frame-preview .frame-preview-img{width:100%;height:100%}
.frame-preview-bg{position:absolute;inset:0;display:grid;place-items:center;color:#6b7280;font-family:'JetBrains Mono',monospace;font-size:12px}
.slot-layer{position:absolute;inset:0;width:100%;height:100%}
.slot{position:absolute;overflow:hidden;background:#f3f4f6;display:grid;place-items:center;border:1px dashed #111}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.slot.empty{background:repeating-linear-gradient(45deg,#fff,#fff 8px,#f3f4f6 8px,#f3f4f6 16px)}
.slot.empty span{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6b7280;text-align:center}
.slot.filled{border:1px solid #111}
.slot.active{outline:3px solid var(--neo-yellow);outline-offset:2px}
.frame-preview-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:3}
.camera-panel{display:grid;gap:12px}
.video-wrap{position:relative;width:100%;background:#111;border:3px solid #111;box-shadow:8px 8px 0 #111;overflow:hidden}
video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.countdown{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.42);font-size:86px;font-weight:800;color:#fff;z-index:2;font-family:'Oswald',sans-serif}
.flash{position:absolute;inset:0;background:#fff;animation:flash .28s ease;z-index:2}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.badge{position:absolute;top:12px;left:12px;z-index:2;background:#111;color:#fff;border:2px solid #fff;font-family:'JetBrains Mono',monospace;padding:6px 10px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:6px;box-shadow:3px 3px 0 #111}
.badge .dot-mini{width:8px;height:8px;background:var(--neo-yellow);border:1px solid #fff}
.progress{display:flex;gap:6px;align-items:center}
.dot{width:10px;height:10px;background:#fff;border:2px solid #111}
.dot.done{background:var(--neo-pink);border-color:#111}.dot.active{background:var(--neo-yellow);border-color:#111;box-shadow:0 0 0 3px #111}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs img{width:56px;height:42px;object-fit:cover;border:2px solid #111}
/* result */
.view-result{background:#FAFAFA}
.result-layout{width:min(1100px,100%);display:grid;grid-template-columns:200px 1fr 200px;gap:18px;align-items:center;position:relative;z-index:2}
@media(max-width:900px){.result-layout{grid-template-columns:1fr;gap:14px}}
.result-side{display:grid;gap:10px;align-content:center}
.result-center{display:grid;place-items:center;gap:12px}
.result{max-width:380px;width:100%;border:3px solid #111;box-shadow:8px 8px 0 #111;background:#fff;display:block}
.result-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6b7280;text-align:center}
.qr-box{display:grid;gap:8px;justify-items:center;background:#fff;border:3px solid #111;box-shadow:5px 5px 0 #111;padding:10px}
.qr-box #qr-canvas{width:150px;height:150px;display:grid;place-items:center;background:#fff}
.qr-box #qr-canvas canvas,.qr-box #qr-canvas img{width:150px!important;height:150px!important;display:block}
.qr-msg{margin:0;font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.4;text-align:center;color:#555}
.mobile-block{display:none}
@media(max-width:768px){
  .mobile-block{position:fixed;inset:0;z-index:9999;background:#FAFAFA;display:grid;place-items:center;padding:24px;text-align:center}
  .mobile-card{background:#fff;border:3px solid #111;box-shadow:8px 8px 0 #111;padding:28px;max-width:360px;width:100%}
  .mobile-card h2{font-family:'Oswald',sans-serif;font-size:28px;text-transform:uppercase}
  .mobile-card p{font-family:'JetBrains Mono',monospace;font-size:12px;color:#374151;margin-top:8px}
}