:root{--p:#E31330;--p-d:#7f1d1d;--bg:#f1f3f5;--s:#e9ecef;--tx:#0f172a;--tx-m:#64748b;--w:#ffffff;--f:'Plus Jakarta Sans',sans-serif;--grad:linear-gradient(178deg,#ffe9f2 0%,#a3b8e3 100%);--h-h:64px;--max-w:600px;--w-reg:400;--w-med:600;--w-bold:700;--w-ext:800;--top-bar-h:44px;--header-h:64px;--fs-10:0.625rem;--fs-11:0.6875rem;--fs-12:0.75rem;--fs-14:0.875rem;--fs-16:1rem;--fs-20:1.25rem;--fs-24:1.5rem;--fs-34:2.125rem;--sp-2:0.125rem;--sp-4:0.25rem;--sp-5:0.3125rem;--sp-6:0.375rem;--sp-8:0.5rem;--sp-10:0.625rem;--sp-12:0.75rem;--sp-14:0.875rem;--sp-16:1rem;--sp-18:1.125rem;--sp-20:1.25rem;--sp-24:1.5rem;--sp-30:1.875rem;--sp-32:2rem;--sp-40:2.5rem;--sp-60:3.75rem;--sp-80:5rem;--r-s:3px;--r-m:6px;--r-l:12px;--r-xl:22px;--r-full:9999px;--sh-apple:0 20px 40px rgba(0,0,0,0.06);--sh-soft:0 10px 30px rgba(0,0,0,0.1);--sh-sm:0 2px 5px rgba(0,0,0,0.05);--blur:blur(4px)}
*{box-sizing:border-box;margin:0;padding:0;font-family:var(--f);-webkit-tap-highlight-color:transparent}
html{min-height:100%;height:auto;overflow-y:scroll;scrollbar-gutter:stable;font-size:16px}
body{min-height:100%;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;padding:0 0 var(--sp-24);height:auto;width:100%;position:relative;font-weight:var(--w-reg)}
body.menu-open{overflow:hidden;height:100vh}
#splash{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;transition:0.6s cubic-bezier(0.8,0,0.2,1)}
#splash .splash-logo{width:90%;max-width:200px;position:relative;overflow:hidden;will-change:transform;animation:breathing 3s ease-in-out infinite}
#splash .splash-logo svg,.brand svg{width:100%;height:auto;display:block;aspect-ratio:1906/482}
#splash .splash-logo::after{content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,0.3),transparent);transform:skewX(-25deg);animation:shimmer 2s infinite}
@keyframes breathing{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes shimmer{100%{left:150%}}
#splash.hide{opacity:0;visibility:hidden;transform:scale(1.05)}
.top-bar{width:100%;max-width:var(--max-w);margin:0 auto;display:flex;justify-content:center;background:var(--bg)}
.top-bar-inner{width:100%;padding:var(--sp-12) var(--sp-24);display:flex;justify-content:space-between;align-items:center}
.back-lupa{display:flex;align-items:center;gap:var(--sp-4);text-decoration:none;color:var(--tx);font-size:var(--fs-11);font-weight:var(--w-bold)}
.back-lupa span{font-size:var(--fs-10);background-color:#000;padding:var(--sp-4) var(--sp-8) var(--sp-5);color:var(--w);border-radius:var(--r-s)}
.user-identity{text-decoration:none;font-weight:var(--w-bold);color:var(--tx);font-size:var(--fs-12);text-transform:capitalize}
.app-con{max-width:var(--max-w);margin:0 auto;background:var(--w);min-height:100vh;box-shadow:var(--sh-apple);border:1px solid var(--s);position:relative;overflow:visible}
#main-header{position:sticky;top:0;z-index:1001;width:100%;max-width:var(--max-w);margin:0 auto;background:var(--w);border-bottom:1px solid var(--s)}
.main-header-inner{width:100%;height:var(--header-h);display:flex;justify-content:space-between;align-items:center;padding:0 var(--sp-24)}
.brand{display:flex;align-items:center;text-decoration:none;transition:0.2s;height:100%;max-width:150px}
.brand svg{width:100%;height:auto}
.brand:active{opacity:0.7;transform:scale(0.98)}
.menu-btn{background:rgba(15,23,42,0.05);color:var(--tx);padding:var(--sp-10) var(--sp-14);border-radius:var(--r-m);font-size:var(--fs-11);font-weight:var(--w-ext);display:flex;align-items:center;gap:var(--sp-8);border:none;cursor:pointer;text-transform:uppercase}
.menu-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.4);z-index:1100;opacity:0;visibility:hidden;transition:0.3s;backdrop-filter:var(--blur)}
.menu-overlay.open{opacity:1;visibility:visible}
.side-nav{position:fixed;top:0;right:0;bottom:0;width:80%;max-width:320px;background:var(--w);z-index:1200;padding:var(--sp-32);transform:translateX(100%);transition:0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;gap:var(--sp-10);box-shadow:var(--sh-soft)}
.menu-overlay.open .side-nav{transform:translateX(0)}
.side-nav-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-20)}
.side-nav .brand{max-width:150px}
.close-btn{background:none;border:none;cursor:pointer;color:var(--tx);padding:0;display:flex;align-items:center}
.nav-link{font-size:var(--fs-20);font-weight:var(--w-ext);text-decoration:none;color:var(--tx);padding:var(--sp-14) 0;border-bottom:1px solid var(--s);display:flex;flex-direction:column}
.nav-link span{color:var(--p);font-size:var(--fs-10);text-transform:uppercase;margin-bottom:var(--sp-2)}

.v-footer{padding:var(--sp-60) var(--sp-20) var(--sp-80);background:var(--w);border-top:1px solid var(--s);text-align:center;display:flex;flex-direction:column;gap:var(--sp-40)}
.v-footer-brand{display:flex;flex-direction:column;align-items:center;gap:var(--sp-40)}
.v-logo{background:#000;color:var(--w);padding:var(--sp-5) var(--sp-18);border-radius:var(--r-m);display:inline-flex;align-items:center;justify-content:center;transition:transform 0.2s;text-decoration:none}
.v-logo:active{transform:scale(0.95)}
.v-logo .logo-svg{width:80px;height:24px;fill:currentColor;display:block}
.v-social{display:flex;justify-content:center;gap:var(--sp-12)}
.v-social-link{width:44px;height:44px;background:var(--bg);color:var(--tx-m);border-radius:var(--r-l);display:flex;align-items:center;justify-content:center;transition:all 0.2s;border:1px solid var(--s)}
.v-social-link svg{width:20px;height:20px;fill:currentColor;display:block}
.v-social-link:active{background:#000;color:var(--w);border-color:#000;transform:translateY(-2px)}
.footer-menu-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-10) var(--sp-16);max-width:450px;margin:0 auto;padding:0;list-style:none}
.footer-menu-list .menu-item a{font-size:var(--fs-11);font-weight:var(--w-bold);color:var(--tx-m);text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;padding:var(--sp-4) 0;display:block}
.footer-menu-list .menu-item a:active{color:#000}
.v-footer-copy{border-top:1px solid var(--s);padding-top:var(--sp-30);max-width:100%;margin:0 auto}
.v-footer-copy p{font-size:var(--fs-11);color:#94a3b8;line-height:1.6;margin:0}
.v-footer-copy b{color:var(--tx);font-weight:var(--w-ext);letter-spacing:0.5px;margin-bottom:var(--sp-2);display:block}

.v-footer-tagline { font-size: var(--fs-12); color: var(--tx-m); font-weight: var(--w-med); margin: calc(var(--sp-10) * -1) 0 0; }
.v-footer-copy p:last-child { max-width: 400px; margin: var(--sp-10) auto 0; font-size: var(--fs-10); opacity: 0.7; font-style: italic; }