@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&display=swap";:root{--dark-bg:#030712;--klasik-primary:#090611;--klasik-accent:#60a5fa;--merah-primary:#9f1239;--merah-accent:#f43f5e;--text-main:#f8fafc;--text-muted:#94a3b8;--glass-bg:#ffffff08;--glass-border:#ffffff14;--glass-blur:24px;--ease-layout:cubic-bezier(.87, 0, .13, 1);--ease-elastic:cubic-bezier(.34, 1.56, .64, 1);--dur-fast:.3s;--dur-layout:.7s;--notice-h:56px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background-color:var(--dark-bg);width:100%;height:100%;color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Outfit,sans-serif;overflow:hidden}.orb{filter:blur(90px);pointer-events:none;z-index:0;will-change:transform;border-radius:50%;animation:15s ease-in-out infinite alternate orb-float;position:absolute}.orb-1{background:#1e3a8a59;width:45vw;height:45vw;top:-15vw;left:-10vw}.orb-2{background:#9f123940;width:40vw;height:40vw;animation-delay:-5s;bottom:-10vw;right:-5vw}.orb-3{background:#60a5fa1a;width:35vw;height:35vw;animation-delay:-10s;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes orb-float{0%{transform:translate(0)scale(1)}to{transform:translate(6vw,6vw)scale(1.1)}}.particles{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.particle{will-change:transform, opacity;border-radius:50%;animation:linear infinite float-up;position:absolute;bottom:-20px}@keyframes float-up{0%{opacity:0;transform:translateY(0)scale(.8)}10%{opacity:1}90%{opacity:.8}to{opacity:0;transform:translateY(-110vh)scale(1.5)}}.dev-notice{width:100%;height:var(--notice-h);z-index:100;-webkit-backdrop-filter:blur(var(--glass-blur));animation:slide-down var(--dur-layout) var(--ease-layout);background:#fbbf241f;border-bottom:1px solid #fbbf2433;justify-content:center;align-items:center;display:flex;position:absolute;top:0}.dev-notice-inner{align-items:center;gap:12px;width:100%;max-width:1000px;padding:0 24px;display:flex}.dev-notice-icon{font-size:1.2rem}.dev-notice-text{color:#fde68a;flex:1;font-size:.85rem;line-height:1.4}.dev-notice-text strong{color:#fbbf24}.dev-notice-close{color:#fde68a;cursor:pointer;background:0 0;border:none;padding:4px;font-size:1.4rem;line-height:1;transition:transform .2s,color .2s}.dev-notice-close:hover{color:#fff;transform:scale(1.2)}@keyframes slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.topbar{z-index:90;pointer-events:none;width:100%;transition:top var(--dur-layout) var(--ease-layout);justify-content:center;padding:24px;display:flex;position:absolute;top:0}.topbar-offset{top:var(--notice-h)}.topbar-pill{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);letter-spacing:.15em;text-transform:uppercase;color:#fffc;animation:fade-in-up .8s var(--ease-layout) .3s both;border-radius:99px;align-items:center;gap:12px;padding:10px 28px;font-size:.8rem;font-weight:700;display:flex;box-shadow:0 8px 32px #0000004d}.topbar-heart{width:16px;height:16px;fill:var(--merah-accent);filter:drop-shadow(0 0 6px var(--merah-accent));animation:1.8s infinite pulse-heart}@keyframes pulse-heart{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#root{flex-direction:column;display:flex}.scene-desktop{z-index:10;flex:1;display:flex;position:relative;overflow:hidden}.scene-mobile{display:none}.panel{color:var(--text-main);transition:clip-path var(--dur-layout) var(--ease-layout), filter var(--dur-layout) ease;will-change:clip-path;justify-content:center;align-items:center;text-decoration:none;display:flex;position:absolute;top:0;bottom:0;overflow:hidden}.panel-dark{z-index:2;background:radial-gradient(circle at 25% 50%, var(--klasik-primary) 0%, #020617 70%);clip-path:polygon(0 0,57% 0,43% 100%,0 100%);width:100%;left:0}.panel-dark:after{content:"";pointer-events:none;background-image:linear-gradient(#ffffff04 1px,#0000 1px),linear-gradient(90deg,#ffffff04 1px,#0000 1px);background-size:60px 60px;position:absolute;inset:0}.panel-red{z-index:1;background:radial-gradient(circle at 75% 50%, var(--merah-primary) 0%, #2e0611 70%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);width:100%;right:0}.panel-red:after{content:"";pointer-events:none;background:repeating-linear-gradient(-45deg,#0000,#0000 30px,#ffffff04 30px 31px);position:absolute;inset:0}.scene-desktop:has(.panel-dark:hover) .panel-dark{clip-path:polygon(0 0,75% 0,61% 100%,0 100%)}.scene-desktop:has(.panel-dark:hover) .panel-red{filter:brightness(.3)saturate(.5)}.scene-desktop:has(.panel-dark:hover) .divider{opacity:.1;left:68%}.scene-desktop:has(.panel-dark:hover) .vs-badge{opacity:0;transform:translate(-50%,-50%)scale(.6)}.scene-desktop:has(.panel-dark:hover) .content-dark{left:32%;transform:translate(-50%,-50%)scale(1.05)}.scene-desktop:has(.panel-dark:hover) .content-red{opacity:.4;left:82%;transform:translate(-50%,-50%)scale(.95)}.scene-desktop:has(.panel-red:hover) .panel-dark{clip-path:polygon(0 0,39% 0,25% 100%,0 100%);filter:brightness(.3)saturate(.5)}.scene-desktop:has(.panel-red:hover) .divider{opacity:.1;left:32%}.scene-desktop:has(.panel-red:hover) .vs-badge{opacity:0;transform:translate(-50%,-50%)scale(.6)}.scene-desktop:has(.panel-red:hover) .content-dark{opacity:.4;left:18%;transform:translate(-50%,-50%)scale(.95)}.scene-desktop:has(.panel-red:hover) .content-red{left:68%;transform:translate(-50%,-50%)scale(1.05)}.scene-desktop:has(.panel:hover)~.hint{opacity:0;transform:translate(-50%,15px)}.divider{z-index:15;pointer-events:none;width:2px;height:120%;transition:left var(--dur-layout) var(--ease-layout), opacity .5s;background:linear-gradient(#0000,#ffffffb3,#0000);position:absolute;top:-10%;left:50%;transform:translate(-50%)skew(-11deg);box-shadow:0 0 25px #ffffff80}.vs-badge{z-index:20;pointer-events:none;transition:opacity .5s, transform var(--dur-layout) var(--ease-layout);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vs-ring-outer{border:1px dashed #fff6;border-radius:50%;width:110px;height:110px;animation:12s linear infinite spin-slow;position:absolute}.vs-ring-inner{-webkit-backdrop-filter:blur(12px);background:#05081099;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:76px;height:76px;display:flex;box-shadow:0 10px 40px #000c,inset 0 0 20px #ffffff0d}.vs-text{letter-spacing:.08em;background:linear-gradient(135deg,#fff,#94a3b8);color:#0000;-webkit-background-clip:text;font-size:1.4rem;font-weight:900}@keyframes spin-slow{to{transform:rotate(360deg)}}.panel-content{text-align:center;width:clamp(250px,34vw,380px);transition:transform var(--dur-layout) var(--ease-layout), left var(--dur-layout) var(--ease-layout), opacity var(--dur-layout);z-index:10;flex-direction:column;align-items:center;gap:20px;display:flex;position:absolute;top:46%;transform:translate(-50%,-50%)}.content-dark{left:24%}.content-red{left:76%}.label-badge{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.25em;text-transform:uppercase;animation:fade-in-up var(--dur-layout) var(--ease-layout) .1s both;border-radius:99px;align-items:center;gap:10px;padding:6px 18px;font-size:.75rem;font-weight:700;display:inline-flex}.badge-dot{border-radius:50%;width:6px;height:6px;animation:2s infinite pulse-dot}.badge-dot-dark{background:var(--klasik-accent);box-shadow:0 0 12px var(--klasik-accent)}.badge-dot-red{background:var(--merah-accent);box-shadow:0 0 12px var(--merah-accent)}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}.panel-title{letter-spacing:-.02em;text-transform:uppercase;animation:slide-up-fade var(--dur-layout) var(--ease-layout) .2s both;font-size:clamp(2.4rem,4.5vw,4rem);font-weight:900;line-height:1.05}.panel-dark .panel-title,.card-dark .panel-title{background:linear-gradient(135deg,#fff 0%,#93c5fd 100%);color:#0000;text-shadow:0 15px 40px #60a5fa33;-webkit-background-clip:text}.panel-red .panel-title,.card-red .panel-title{background:linear-gradient(135deg,#fff 0%,#fda4af 100%);color:#0000;text-shadow:0 15px 40px #f43f5e33;-webkit-background-clip:text}.panel-desc{color:var(--text-muted);max-width:320px;animation:slide-up-fade var(--dur-layout) var(--ease-layout) .3s both;font-size:.95rem;font-weight:400;line-height:1.6}@keyframes slide-up-fade{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.cta-btn{color:#fff;text-transform:uppercase;letter-spacing:.15em;cursor:pointer;transition:all .4s var(--ease-layout);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:slide-up-fade var(--dur-layout) var(--ease-layout) .4s both;background:#ffffff08;border:1px solid #ffffff26;border-radius:99px;align-items:center;gap:12px;margin-top:10px;padding:16px 36px;font-family:inherit;font-size:.85rem;font-weight:700;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.cta-arrow{transition:transform .4s var(--ease-layout);font-size:1.2rem;line-height:0}.cta-btn:hover{color:#000;background:#fff;border-color:#fff;transform:translateY(-6px)}.panel-dark:hover .cta-btn,.card-dark:hover .cta-btn{box-shadow:0 15px 35px #60a5fa4d}.panel-red:hover .cta-btn,.card-red:hover .cta-btn{box-shadow:0 15px 35px #f43f5e4d}.cta-btn:hover .cta-arrow{transform:translate(8px)}.hint{z-index:30;color:#ffffff4d;letter-spacing:.15em;text-transform:uppercase;pointer-events:none;align-items:center;gap:12px;font-size:.75rem;font-weight:600;transition:opacity .5s,transform .5s;animation:1.5s 1s both fade-in-up;display:flex;position:absolute;bottom:110px;left:50%;transform:translate(-50%)}.hint-dot{background:currentColor;border-radius:50%;width:4px;height:4px}.hint-mobile-text{display:none}.hint-desktop-text{display:block}.vote-bar{-webkit-backdrop-filter:blur(28px);z-index:100;transition:all var(--dur-layout) var(--ease-layout);background:#0a0f19a6;border:1px solid #ffffff1a;border-radius:99px;align-items:center;gap:16px;width:max-content;padding:8px;display:flex;position:absolute;bottom:32px;left:50%;transform:translate(-50%);box-shadow:0 25px 50px #0009,inset 0 1px 1px #ffffff26}.vote-bar--voted{background:#0a0f19d9;border-color:#ffffff0d;border-radius:28px;justify-content:space-between;width:90%;max-width:640px;padding:16px 24px}.vote-loading{gap:6px;padding:14px 28px;display:flex}.vote-loading-dot{background:#fff;border-radius:50%;width:8px;height:8px;animation:1.4s infinite both blink}.vote-loading-dot:nth-child(2){animation-delay:.2s}.vote-loading-dot:nth-child(3){animation-delay:.4s}.vote-btn{text-transform:uppercase;letter-spacing:.1em;cursor:pointer;color:#fff;transition:all .4s var(--ease-layout);border:none;border-radius:99px;align-items:center;gap:10px;padding:12px 28px;font-family:inherit;font-size:.85rem;font-weight:700;display:flex}.vote-btn-dark{background:linear-gradient(135deg,#1e3a8a,#3b82f6);border:1px solid #3b82f680;box-shadow:0 8px 25px #3b82f64d}.vote-btn-dark:hover{border-color:#60a5fa;transform:translateY(-4px)scale(1.02);box-shadow:0 15px 35px #3b82f680}.vote-btn-red{background:linear-gradient(135deg,#9f1239,#f43f5e);border:1px solid #f43f5e80;box-shadow:0 8px 25px #f43f5e4d}.vote-btn-red:hover{border-color:#fb7185;transform:translateY(-4px)scale(1.02);box-shadow:0 15px 35px #f43f5e80}.vote-icon{font-size:1.1rem;line-height:0}.vote-center{flex-direction:column;align-items:center;padding:0 16px;display:flex}.vote-label{color:#64748b;letter-spacing:.25em;font-size:.75rem;font-weight:900}.vote-live-count{color:#e2e8f0;margin-top:4px;font-size:.95rem;font-weight:700}.vote-result-side{opacity:0;flex-direction:column;flex:1;gap:6px;animation:.8s .3s forwards fade-in;display:flex}.vote-result-dark{text-align:left;align-items:flex-start}.vote-result-red{text-align:right;align-items:flex-end}.vote-result-name{color:var(--text-muted);text-transform:uppercase;letter-spacing:.15em;font-size:.85rem;font-weight:700}.vote-result-count{letter-spacing:-.02em;font-size:2.2rem;font-weight:900;line-height:1}.vote-result-dark .vote-result-count{color:var(--klasik-accent)}.vote-result-red .vote-result-count{color:var(--merah-accent)}.is-winner .vote-result-count{text-shadow:0 0 25px}.vote-result-check{color:#4ade80;animation:pop-in .6s var(--ease-layout);background:#4ade8026;border:1px solid #4ade804d;border-radius:6px;margin-top:6px;padding:4px 10px;font-size:.75rem;font-weight:700}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes fade-in{to{opacity:1}}.vote-result-center{opacity:0;flex-direction:column;flex:2.5;align-items:center;gap:14px;padding:0 24px;animation:.8s .1s forwards fade-in;display:flex}.vote-progress-track{background:#ffffff0f;border-radius:99px;width:100%;height:16px;display:flex;overflow:hidden;box-shadow:inset 0 2px 8px #0006}.vote-progress-dark{height:100%;transition:width 1.2s var(--ease-layout);background:linear-gradient(90deg,#1e3a8a,#3b82f6);position:relative;overflow:hidden}.vote-progress-dark:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);animation:3s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}.vote-progress-red{height:100%;transition:width 1.2s var(--ease-layout);background:linear-gradient(90deg,#f43f5e,#9f1239);position:relative;overflow:hidden}.vote-progress-red:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);animation:3s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes shimmer{to{transform:translate(100%)}}.vote-pct-labels{color:#fff;justify-content:space-between;align-items:center;width:100%;font-size:.95rem;font-weight:700;display:flex}.vote-total{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;background:#ffffff0d;border-radius:99px;padding:4px 12px;font-size:.8rem;font-weight:600}@media (width<=1024px){.scene-desktop{display:none}.scene-mobile{flex:1;display:block;position:relative;overflow:hidden auto}.card{justify-content:center;align-items:center;padding:60px 24px;display:flex;position:relative}.card-dark{background:radial-gradient(circle at 50% 30%, var(--klasik-primary) 0%, #020617 100%);padding-top:180px;padding-bottom:80px}.card-dark:after{content:"";pointer-events:none;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.card-red{background:radial-gradient(circle at 50% 70%, var(--merah-primary) 0%, #2e0611 100%);padding-top:80px;padding-bottom:220px}.card-red:after{content:"";pointer-events:none;background:repeating-linear-gradient(-45deg,#0000,#0000 20px,#ffffff05 20px 21px);position:absolute;inset:0}.card-content{z-index:2;text-align:center;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:400px;display:flex;position:relative}.mobile-vs{z-index:20;width:100%;height:0;position:relative}.mobile-vs-line{background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:2px;position:absolute;top:0;left:0;transform:translateY(-50%)}.mobile-vs-pill{-webkit-backdrop-filter:blur(8px);letter-spacing:.1em;z-index:2;background:#050810f2;border:1px solid #fff3;border-radius:99px;padding:6px 20px;font-weight:900;position:absolute;top:0;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 30px #0009}.hint{bottom:170px}.hint-mobile-text{display:block}.hint-desktop-text{display:none}.vote-bar{border-radius:20px;flex-wrap:wrap;justify-content:center;gap:8px;width:90%;max-width:400px;padding:12px;bottom:16px}.vote-btn{justify-content:center;width:100%;padding:12px 16px;font-size:.85rem}.vote-center{border-bottom:1px solid #ffffff14;order:-1;width:100%;padding-bottom:6px}.vote-bar--voted{border-radius:24px;flex-direction:column;align-items:stretch;gap:12px;padding:16px}.vote-result-side{flex-direction:row;justify-content:space-between;align-items:center;gap:6px}.vote-result-dark{flex-direction:row-reverse}.vote-result-center{gap:8px;padding:4px 0}.vote-result-count{font-size:1.4rem}.vote-result-name{letter-spacing:.05em;font-size:.7rem}.vote-result-check{padding:2px 6px;font-size:.65rem}.vote-pct-labels{margin-top:0;font-size:.8rem}.vote-total{padding:2px 8px;font-size:.7rem}}@media (width<=480px){.panel-title{font-size:2.2rem}.panel-desc{font-size:.9rem}.topbar{padding:12px}.topbar-pill{padding:8px 14px;font-size:.6rem}.vote-btn{font-size:.8rem}}