*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:radial-gradient(circle at top left,#e6f3ff 0,#f8fbff 34%,#eef5ff 100%);color:var(--ink);min-height:100vh}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}h1,h2,h3,p{overflow-wrap:anywhere}h2,h3{letter-spacing:-.02em}.topbar{position:fixed;top:0;left:0;right:0;width:100%;z-index:2147483000;min-height:var(--topbar-height);background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(var(--page-padding-desktop),calc((100vw - var(--app-max-width))/2 + var(--page-padding-desktop)))}.brand{display:flex;gap:10px;align-items:center;font-weight:950;letter-spacing:.4px;min-width:0}.brand img{height:42px;width:auto;max-width:138px;object-fit:contain;border-radius:12px}.brand span{font-size:18px;white-space:nowrap}.brand b{color:var(--brand)}nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}nav a{padding:9px 12px;border-radius:14px;color:var(--brand-dark);font-weight:850;transition:.18s}nav a:hover{background:var(--soft)}.page{width:min(100%,var(--app-max-width));margin:auto;padding:var(--page-padding-desktop)}.footer{text-align:center;color:var(--muted);padding:26px 12px}.card{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--card-padding);margin-bottom:var(--grid-gap);min-width:0}.hero{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;align-items:center;overflow:hidden}.hero h1{font-size:clamp(30px,5vw,54px);line-height:1.02;margin:12px 0}.hero p{color:var(--muted);font-size:17px;line-height:1.55}.hero img{width:100%;border-radius:var(--radius-lg);box-shadow:0 20px 50px rgba(18,111,232,.12);background:#fff;object-fit:contain}.btn,button{min-height:var(--button-height);border:0;background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;border-radius:16px;padding:12px 16px;font-weight:950;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 8px 22px rgba(18,111,232,.2);transition:.18s;line-height:1.1;text-align:center;white-space:nowrap}.btn:hover,button:hover{transform:translateY(-1px);filter:saturate(1.08)}.btn.alt{background:#fff;color:var(--brand-dark);border:1px solid var(--line);box-shadow:none}.btn.danger,.btn.mini.danger{background:linear-gradient(135deg,#991b1b,var(--danger))}.btn.ok,.btn.mini.ok{background:linear-gradient(135deg,#047857,var(--success))}.wa{background:linear-gradient(135deg,#128c4a,#25D366)}.mini{min-height:36px;padding:8px 12px;font-size:13px;border-radius:13px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}.product{overflow:hidden;padding:0;display:flex;flex-direction:column;border-radius:var(--radius-lg)}.product img{width:100%;height:var(--product-image-height);object-fit:cover;background:linear-gradient(135deg,#eef6ff,#fff)}.product .body{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}.product h3{margin:2px 0 0;font-size:18px;line-height:1.2}.product .btn{margin-top:auto}.price{font-weight:950;color:var(--brand);font-size:21px}.muted{color:var(--muted);line-height:1.45}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--soft);color:var(--brand-dark);font-size:12px;font-weight:950;width:max-content;max-width:100%}.badge.ok{background:#dcfce7;color:#067647}.badge.warn{background:#fff7cc;color:#92400e}.badge.bad{background:#fee2e2;color:#991b1b}.form{max-width:640px;margin:auto}.form label,label{display:block;font-weight:900;margin:12px 0 6px}.input,input,select,textarea{width:100%;min-height:var(--input-height);padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:15px;outline:none;transition:.15s;color:var(--ink)}input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(18,111,232,.1)}textarea{min-height:105px;resize:vertical}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.stat{padding:18px;border-radius:22px;background:linear-gradient(135deg,#fff,#eef6ff);border:1px solid var(--line);box-shadow:var(--shadow-soft);font-weight:950;min-height:112px;display:flex;flex-direction:column;justify-content:space-between}.stat b{display:block;font-size:30px;margin-top:8px;color:var(--brand)}.sidebar-layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);gap:var(--grid-gap);align-items:start}.side{position:sticky;top:calc(var(--topbar-height) + 14px);align-self:start;padding:12px}.side a{display:flex;align-items:center;gap:8px;padding:12px;border-radius:16px;font-weight:950;color:var(--brand-dark);margin:3px 0}.side a:hover{background:var(--soft)}.tablewrap{overflow:auto}.tablewrap h2,.tablewrap h3{margin-top:0}table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:18px;overflow:hidden;min-width:720px}th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle}th{background:var(--soft);color:var(--brand-dark);font-size:12px;text-transform:uppercase;letter-spacing:.04em}tr:last-child td{border-bottom:0}.wallet{background:linear-gradient(135deg,var(--brand-dark),var(--brand) 70%,var(--brand-2));color:#fff;border-radius:28px;padding:24px;box-shadow:var(--shadow);margin-bottom:var(--grid-gap);overflow:hidden;position:relative}.wallet:after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12)}.wallet .saldo{font-size:clamp(28px,5vw,40px);font-weight:950;margin:8px 0}.sharebox{word-break:break-all;background:#f6faff;border:1px dashed var(--brand);padding:13px;border-radius:16px;font-weight:850;color:var(--brand-dark)}.profile{display:flex;gap:14px;align-items:center;position:relative;z-index:1}.profile img{width:74px;height:74px;border-radius:22px;object-fit:cover;background:#fff;border:1px solid rgba(255,255,255,.7)}#toast{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;background:rgba(3,12,32,.035);backdrop-filter:blur(1.5px);pointer-events:none;padding:14px}.toast-watermark .wm-card{width:min(255px,76vw);min-height:92px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(239,247,255,.64));border:1px solid rgba(255,255,255,.58);box-shadow:0 14px 36px rgba(6,31,85,.16),inset 0 1px 0 rgba(255,255,255,.65);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:14px 16px;transform:translateY(6px) scale(.98);opacity:0;animation:wmPop .24s ease forwards;position:relative;overflow:hidden}.toast-watermark .wm-card:before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 28% 18%,rgba(77,163,255,.13),transparent 30%),radial-gradient(circle at 75% 82%,rgba(18,111,232,.08),transparent 32%);pointer-events:none}.toast-watermark .wm-logo{position:relative;width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:950;box-shadow:0 8px 20px rgba(18,111,232,.22)}.toast-watermark.error .wm-logo{background:linear-gradient(135deg,#991b1b,var(--danger));box-shadow:0 8px 20px rgba(239,68,68,.2)}.toast-watermark.warning .wm-logo{background:linear-gradient(135deg,#92400e,var(--warning));box-shadow:0 8px 20px rgba(245,158,11,.2)}.toast-watermark.loading .wm-logo{background:linear-gradient(135deg,var(--brand-dark),var(--brand-2))}.toast-watermark .wm-title{position:relative;font-size:15px;line-height:1.25;font-weight:950;color:var(--brand-dark);letter-spacing:-.02em}.toast-watermark .wm-sub{display:none}.wm-spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.42);border-top-color:#fff;display:block;animation:wmSpin .75s linear infinite}.is-loading{opacity:.78;filter:saturate(.9)}@keyframes wmPop{to{transform:translateY(0) scale(1);opacity:1}}@keyframes wmSpin{to{transform:rotate(360deg)}}.calc{position:sticky;top:calc(var(--topbar-height) + 18px)}.empty{padding:18px;border:1px dashed var(--line);border-radius:18px;background:var(--soft-2);color:var(--muted);font-weight:850}.catalog-head{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 14px}.catalog-head h2{margin:0}@media(max-width:960px){.topbar{padding:10px var(--page-padding-tablet)}.page{padding:var(--page-padding-tablet)}.hero,.sidebar-layout,.grid2{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.side{position:relative;top:0;display:flex;overflow-x:auto;gap:8px;scrollbar-width:thin;margin-bottom:4px;border-radius:20px}.side a{white-space:nowrap;background:#fff;border:1px solid var(--line);margin:0}.brand img{height:36px}.brand span{font-size:15px}.calc{position:relative;top:0}}@media(max-width:560px){body{background:#f5f9ff}.topbar{padding:10px var(--page-padding-mobile);gap:8px}.brand span{display:none}nav{gap:6px}nav a{font-size:12px;padding:8px 9px}.page{padding:var(--page-padding-mobile)}.grid{grid-template-columns:1fr}.row .btn,.row button{flex:1}.hero{gap:12px}.hero h1{font-size:30px}.hero p{font-size:15px}.wallet{padding:18px;border-radius:22px}.wallet .saldo{font-size:27px}.card{border-radius:20px;margin-bottom:12px}.product .body{padding:14px}.product img{height:var(--product-image-height-mobile)}.btn,button{width:100%;padding:12px 14px}.mini{width:auto;white-space:normal}.tablewrap{padding:var(--card-padding-mobile);overflow:visible}table{min-width:0;border:0;background:transparent}thead,tbody,tr,td,th{display:block}tr:first-child{display:none}tr{background:#fff;border:1px solid var(--line);border-radius:16px;margin:10px 0;padding:8px;box-shadow:var(--shadow-soft)}td{border:0;padding:7px 8px;font-size:13px}td:before{content:attr(data-label);display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:950;margin-bottom:2px;letter-spacing:.04em}.tablewrap .row{gap:6px}.tablewrap .btn{width:auto}.form{max-width:100%}.grid2 form,.grid2{gap:12px}}
/* =========================================================
MEMBER PAGE UNIFORM LAYOUT + MOBILE BOTTOM NAV
Khusus halaman /member/ agar ukuran layout dan UI seragam.
========================================================= */
.member-page .page{padding-bottom:var(--page-padding-desktop)}
.member-page .sidebar-layout{grid-template-columns:var(--sidebar-width) minmax(0,1fr);gap:var(--grid-gap)}
.member-page .member-main{min-width:0;display:flex;flex-direction:column;gap:var(--grid-gap)}
.member-page .member-main>.card,.member-page .member-main>.wallet,.member-page .member-main>.grid,.member-page .member-main>.grid2{margin-bottom:0}
.member-page .card h2:first-child,.member-page .card h3:first-child{margin-top:0}
.member-page .member-nav{display:flex;flex-direction:column;gap:6px;margin-bottom:0}
.member-page .member-nav a{min-height:48px;margin:0;border:1px solid transparent}
.member-page .member-nav a.active{background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;box-shadow:0 10px 24px rgba(18,111,232,.18)}
.member-page .member-nav a span{width:24px;text-align:center;flex:0 0 24px}
.member-page .member-nav a b{font-size:14px;line-height:1.15}
.member-page .wallet{min-height:142px;display:flex;flex-direction:column;justify-content:center}
.member-page .grid2{align-items:stretch}
.member-page .grid2>.card{height:100%;margin-bottom:0}
.member-page form button{margin-top:12px}
@media(max-width:960px){
.member-page .sidebar-layout{grid-template-columns:1fr}
.member-page .side.member-nav{position:relative;top:auto;display:flex;flex-direction:row;overflow-x:auto;gap:8px;padding:10px;border-radius:20px;margin-bottom:0}
.member-page .side.member-nav a{white-space:nowrap;background:#fff;border:1px solid var(--line);margin:0;min-width:max-content}
.member-page .side.member-nav a.active{background:linear-gradient(135deg,var(--brand-dark),var(--brand));border-color:transparent;color:#fff}
}
@media(max-width:560px){
.member-page{padding-bottom:86px}
.member-page .page{padding-bottom:18px}
.member-page .sidebar-layout{display:block}
.member-page .member-main{gap:12px}
.member-page .side.member-nav{position:fixed;left:10px;right:10px;bottom:10px;top:auto;z-index:80;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:7px;border-radius:22px;background:rgba(255,255,255,.92);border:1px solid rgba(219,232,255,.9);box-shadow:0 16px 44px rgba(7,39,99,.22);backdrop-filter:blur(16px);overflow:visible;margin:0}
.member-page .side.member-nav a{min-width:0;min-height:58px;width:100%;padding:7px 4px;border-radius:17px;background:transparent;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;box-shadow:none}
.member-page .side.member-nav a.active{background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;box-shadow:0 8px 18px rgba(18,111,232,.22)}
.member-page .side.member-nav a span{width:auto;flex:0 0 auto;font-size:19px;line-height:1}
.member-page .side.member-nav a b{font-size:10.5px;line-height:1.05;white-space:normal;max-width:54px;overflow:hidden;text-overflow:ellipsis}
.member-page .wallet{min-height:118px;margin-bottom:0}
.member-page .grid2{grid-template-columns:1fr}
}
/* =========================================================
FIX MEMBER MOBILE ICON ONLY BOTTOM NAV
- Desktop/tablet: sidebar member tetap tampil normal.
- Mobile halaman /member/: menu sidebar pindah ke bawah.
- Mobile: hanya ikon yang tampil, teks disembunyikan.
========================================================= */
.member-page .member-mobile-only{display:none!important}
@media(max-width:820px){
body.member-page{padding-bottom:82px!important}
body.member-page .topbar nav{display:none!important}
body.member-page .page{padding-bottom:16px!important}
body.member-page .sidebar-layout{display:block!important;grid-template-columns:1fr!important}
body.member-page .side.member-nav{
position:fixed!important;
left:10px!important;
right:10px!important;
bottom:10px!important;
top:auto!important;
z-index:999!important;
display:grid!important;
grid-template-columns:repeat(6,1fr)!important;
gap:5px!important;
width:auto!important;
max-width:none!important;
margin:0!important;
padding:7px!important;
border-radius:22px!important;
background:rgba(255,255,255,.94)!important;
border:1px solid rgba(219,232,255,.95)!important;
box-shadow:0 16px 44px rgba(7,39,99,.24)!important;
backdrop-filter:blur(16px)!important;
overflow:visible!important;
}
body.member-page .side.member-nav .member-mobile-only{display:flex!important}
body.member-page .side.member-nav a{
min-width:0!important;
width:100%!important;
min-height:52px!important;
height:52px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:17px!important;
background:transparent!important;
color:var(--muted)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
box-shadow:none!important;
}
body.member-page .side.member-nav a.active{
background:linear-gradient(135deg,var(--brand-dark),var(--brand))!important;
color:#fff!important;
box-shadow:0 8px 18px rgba(18,111,232,.22)!important;
}
body.member-page .side.member-nav a .nav-ico,
body.member-page .side.member-nav a span{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
flex:0 0 auto!important;
font-size:22px!important;
line-height:1!important;
}
body.member-page .side.member-nav a b{display:none!important}
}
/* =========================================================
FINAL FIX: MEMBER MENU -> BOTTOM NAV ICON ONLY ON MOBILE
Tidak bergantung pada class body, jadi tetap bekerja walau route/URL berubah.
========================================================= */
@media (max-width: 960px), (hover: none) and (pointer: coarse) {
body:has(.member-nav){padding-bottom:88px!important;}
body:has(.member-nav) .topbar nav{display:none!important;}
.sidebar-layout:has(.member-nav){display:block!important;grid-template-columns:1fr!important;}
.side.card.member-nav,
.side.member-nav,
.member-nav{
position:fixed!important;
left:10px!important;
right:10px!important;
bottom:10px!important;
top:auto!important;
z-index:2147483000!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:6px!important;
width:auto!important;
max-width:none!important;
height:64px!important;
margin:0!important;
padding:7px!important;
border-radius:24px!important;
background:rgba(255,255,255,.96)!important;
border:1px solid rgba(203,224,255,.98)!important;
box-shadow:0 16px 44px rgba(7,39,99,.26)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
overflow:visible!important;
}
.side.member-nav a,
.member-nav a{
min-width:0!important;
width:100%!important;
min-height:0!important;
height:50px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:18px!important;
background:transparent!important;
color:var(--muted)!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:0!important;
white-space:normal!important;
text-align:center!important;
box-shadow:none!important;
}
.side.member-nav a.active,
.member-nav a.active{
background:linear-gradient(135deg,var(--brand-dark),var(--brand))!important;
color:#fff!important;
box-shadow:0 8px 18px rgba(18,111,232,.22)!important;
}
.side.member-nav a .nav-ico,
.member-nav a .nav-ico,
.side.member-nav a span,
.member-nav a span{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
flex:0 0 auto!important;
font-size:23px!important;
line-height:1!important;
}
.side.member-nav a b,
.member-nav a b{display:none!important;}
.side.member-nav a[aria-label="Katalog"],
.member-nav a[aria-label="Katalog"]{display:none!important;}
.side.member-nav .member-mobile-only,
.member-nav .member-mobile-only{display:flex!important;}
}
/* =========================================================
100% FIX MEMBER MOBILE: menu member pindah jadi bottom-nav icon-only
Berlaku untuk semua halaman /member/ sampai lebar tablet/mobile.
========================================================= */
.member-page .member-mobile-only{display:none!important;}
@media (max-width:1024px){
html body.member-page{padding-bottom:92px!important;}
body.member-page .topbar nav{display:none!important;}
body.member-page main.page{padding-bottom:20px!important;}
body.member-page .sidebar-layout{display:block!important;grid-template-columns:1fr!important;}
body.member-page .side.card.member-nav,
body.member-page .side.member-nav,
body.member-page .member-nav{
position:fixed!important;
left:12px!important;
right:12px!important;
bottom:12px!important;
top:auto!important;
z-index:2147483647!important;
width:auto!important;
max-width:none!important;
height:66px!important;
min-height:66px!important;
margin:0!important;
padding:7px!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:6px!important;
overflow:visible!important;
border-radius:24px!important;
background:rgba(255,255,255,.96)!important;
border:1px solid rgba(203,224,255,.98)!important;
box-shadow:0 18px 48px rgba(7,39,99,.28)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
}
body.member-page .member-nav a{
width:100%!important;
min-width:0!important;
height:52px!important;
min-height:52px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:18px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:0!important;
background:transparent!important;
color:var(--muted)!important;
box-shadow:none!important;
font-size:0!important;
line-height:1!important;
white-space:normal!important;
}
body.member-page .member-nav a.active{
background:linear-gradient(135deg,var(--brand-dark),var(--brand))!important;
color:#fff!important;
box-shadow:0 8px 18px rgba(18,111,232,.24)!important;
}
body.member-page .member-nav a .nav-ico,
body.member-page .member-nav a span{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
flex:0 0 auto!important;
font-size:24px!important;
line-height:1!important;
}
body.member-page .member-nav a b{display:none!important;}
body.member-page .member-nav a[aria-label="Katalog"],
body.member-page .member-nav a[aria-label="Logout"],
body.member-page .member-nav .member-mobile-only{display:none!important;}
}
@media (max-width:420px){
body.member-page .side.card.member-nav,
body.member-page .side.member-nav,
body.member-page .member-nav{left:8px!important;right:8px!important;bottom:8px!important;height:62px!important;min-height:62px!important;border-radius:22px!important;}
body.member-page .member-nav a{height:48px!important;min-height:48px!important;border-radius:16px!important;}
}
/* =========================================================
FINAL SLIM GLOSSY MEMBER BOTTOM NAV
Khusus halaman /member/ pada mobile/tablet: lebih tipis, presisi, transparan glossy.
========================================================= */
@media (max-width:1024px){
html body.member-page{padding-bottom:72px!important;}
body.member-page .topbar nav{display:none!important;}
body.member-page .sidebar-layout{display:block!important;grid-template-columns:1fr!important;}
body.member-page .side.card.member-nav,
body.member-page .side.member-nav,
body.member-page .member-nav{
position:fixed!important;
left:14px!important;
right:14px!important;
bottom:10px!important;
top:auto!important;
z-index:2147483647!important;
width:auto!important;
max-width:none!important;
height:54px!important;
min-height:54px!important;
margin:0!important;
padding:5px 7px!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:7px!important;
overflow:visible!important;
border-radius:19px!important;
background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(239,247,255,.62))!important;
border:1px solid rgba(196,218,255,.68)!important;
box-shadow:0 10px 30px rgba(7,39,99,.20), inset 0 1px 0 rgba(255,255,255,.88)!important;
backdrop-filter:blur(18px) saturate(155%)!important;
-webkit-backdrop-filter:blur(18px) saturate(155%)!important;
}
body.member-page .member-nav::before{
content:""!important;
position:absolute!important;
left:12px!important;
right:12px!important;
top:4px!important;
height:14px!important;
border-radius:999px!important;
background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,0))!important;
pointer-events:none!important;
}
body.member-page .member-nav a{
width:100%!important;
min-width:0!important;
height:44px!important;
min-height:44px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:15px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:0!important;
background:rgba(255,255,255,.18)!important;
color:var(--muted)!important;
box-shadow:none!important;
font-size:0!important;
line-height:1!important;
white-space:normal!important;
}
body.member-page .member-nav a.active{
background:linear-gradient(135deg,rgba(13,55,127,.96),rgba(18,111,232,.94))!important;
color:#fff!important;
box-shadow:0 7px 16px rgba(18,111,232,.24), inset 0 1px 0 rgba(255,255,255,.18)!important;
}
body.member-page .member-nav a .nav-ico,
body.member-page .member-nav a span{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
flex:0 0 auto!important;
font-size:21px!important;
line-height:1!important;
}
body.member-page .member-nav a b{display:none!important;}
body.member-page .member-nav a[aria-label="Katalog"],
body.member-page .member-nav a[aria-label="Logout"],
body.member-page .member-nav .member-mobile-only{display:none!important;}
}
@media (max-width:420px){
html body.member-page{padding-bottom:66px!important;}
body.member-page .side.card.member-nav,
body.member-page .side.member-nav,
body.member-page .member-nav{
left:10px!important;
right:10px!important;
bottom:8px!important;
height:50px!important;
min-height:50px!important;
padding:5px 6px!important;
gap:6px!important;
border-radius:18px!important;
}
body.member-page .member-nav a{height:40px!important;min-height:40px!important;border-radius:14px!important;}
body.member-page .member-nav a .nav-ico,
body.member-page .member-nav a span{font-size:20px!important;}
}
/* FINAL UPDATE 2026-05-11: member mobile bottom-nav prettier, slimmer, glossy, icon-only */
.member-page .member-nav svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1024px){
body.member-page{padding-bottom:74px!important}
body.member-page .topbar nav{display:none!important}
body.member-page .sidebar-layout{display:block!important;grid-template-columns:1fr!important}
body.member-page .side.card.member-nav,body.member-page .side.member-nav,body.member-page .member-nav{position:fixed!important;left:14px!important;right:14px!important;bottom:10px!important;top:auto!important;z-index:2147483647!important;width:auto!important;height:56px!important;min-height:56px!important;margin:0!important;padding:6px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;overflow:visible!important;border-radius:21px!important;background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(239,247,255,.54))!important;border:1px solid rgba(190,215,255,.58)!important;box-shadow:0 12px 34px rgba(8,39,99,.18),inset 0 1px 0 rgba(255,255,255,.82)!important;backdrop-filter:blur(20px) saturate(160%)!important;-webkit-backdrop-filter:blur(20px) saturate(160%)!important}
body.member-page .member-nav:before{content:""!important;position:absolute!important;left:14px!important;right:14px!important;top:5px!important;height:13px!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0))!important;pointer-events:none!important}
body.member-page .member-nav a{width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0!important;border:0!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;background:rgba(255,255,255,.08)!important;color:#64748b!important;box-shadow:none!important;font-size:0!important;line-height:1!important;transform:none!important;transition:background .18s ease,color .18s ease,box-shadow .18s ease!important}
body.member-page .member-nav a.active{background:linear-gradient(180deg,rgba(18,111,232,.16),rgba(18,111,232,.09))!important;color:#126fe8!important;box-shadow:inset 0 0 0 1px rgba(18,111,232,.16),0 5px 12px rgba(18,111,232,.10)!important}
body.member-page .member-nav a:active{background:rgba(18,111,232,.11)!important;box-shadow:inset 0 0 0 1px rgba(18,111,232,.12)!important}
body.member-page .member-nav a .nav-ico,body.member-page .member-nav a span{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;flex:0 0 auto!important;font-size:0!important;line-height:1!important}
body.member-page .member-nav svg{width:23px!important;height:23px!important;stroke-width:1.85!important;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))!important}
body.member-page .member-nav a.active svg{stroke-width:2!important}
body.member-page .member-nav a b{display:none!important}
body.member-page .member-nav a[aria-label="Katalog"],body.member-page .member-nav a[aria-label="Logout"],body.member-page .member-nav .member-mobile-only{display:none!important}
}
@media(max-width:420px){body.member-page{padding-bottom:68px!important}body.member-page .side.card.member-nav,body.member-page .side.member-nav,body.member-page .member-nav{left:10px!important;right:10px!important;bottom:8px!important;height:52px!important;min-height:52px!important;padding:5px 6px!important;gap:6px!important;border-radius:19px!important}body.member-page .member-nav a{height:42px!important;min-height:42px!important;border-radius:15px!important}body.member-page .member-nav svg{width:22px!important;height:22px!important}}
/* FINAL UPDATE: member navbar natural, no garis pada nama, logout polos profesional */
html body.member-page header.topbar nav.member-top-actions,
html body header.topbar nav.member-top-actions{
display:flex!important;
visibility:visible!important;
opacity:1!important;
align-items:center!important;
justify-content:flex-end!important;
gap:9px!important;
flex:1 1 auto!important;
min-width:0!important;
max-width:60vw!important;
overflow:visible!important;
}
html body header.topbar nav.member-top-actions .member-top-name{
display:inline-flex!important;
align-items:center!important;
visibility:visible!important;
opacity:1!important;
max-width:calc(60vw - 46px)!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
font-size:14px!important;
font-weight:700!important;
letter-spacing:0!important;
color:#183153!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
border-radius:0!important;
padding:0!important;
margin:0!important;
line-height:38px!important;
text-decoration:none!important;
}
html body header.topbar nav.member-top-actions .member-logout-icon{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
width:38px!important;
height:38px!important;
min-width:38px!important;
padding:0!important;
margin:0!important;
border-radius:12px!important;
color:#183153!important;
background:rgba(255,255,255,.72)!important;
background-image:none!important;
border:1px solid rgba(24,49,83,.10)!important;
outline:0!important;
box-shadow:none!important;
font-size:0!important;
line-height:1!important;
text-indent:0!important;
text-decoration:none!important;
transform:none!important;
transition:background .16s ease,color .16s ease,border-color .16s ease!important;
}
html body header.topbar nav.member-top-actions .member-logout-icon:hover,
html body header.topbar nav.member-top-actions .member-logout-icon:focus{
background:rgba(241,245,249,.95)!important;
background-image:none!important;
color:#0f172a!important;
border-color:rgba(24,49,83,.16)!important;
box-shadow:none!important;
transform:none!important;
}
html body header.topbar nav.member-top-actions .member-logout-icon:active{
background:rgba(226,232,240,.95)!important;
background-image:none!important;
box-shadow:none!important;
transform:none!important;
}
html body header.topbar nav.member-top-actions .member-logout-icon svg{
display:block!important;
width:20px!important;
height:20px!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:2!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
@media(max-width:1024px){
html body.member-page .topbar nav.member-top-actions,
html body .topbar nav.member-top-actions{display:flex!important;max-width:62vw!important;gap:8px!important}
html body header.topbar nav.member-top-actions .member-top-name{font-size:13.5px!important;line-height:36px!important;max-width:calc(62vw - 43px)!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html body header.topbar nav.member-top-actions .member-logout-icon{width:36px!important;height:36px!important;min-width:36px!important;border-radius:11px!important;background:rgba(255,255,255,.72)!important;background-image:none!important;box-shadow:none!important}
html body header.topbar nav.member-top-actions .member-logout-icon svg{width:19px!important;height:19px!important}
}
@media(max-width:420px){
html body.member-page .topbar nav.member-top-actions,
html body .topbar nav.member-top-actions{max-width:64vw!important;gap:7px!important}
html body header.topbar nav.member-top-actions .member-top-name{font-size:13px!important;line-height:34px!important;max-width:calc(64vw - 40px)!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html body header.topbar nav.member-top-actions .member-logout-icon{width:34px!important;height:34px!important;min-width:34px!important;border-radius:10px!important;background:rgba(255,255,255,.72)!important;background-image:none!important;box-shadow:none!important}
html body header.topbar nav.member-top-actions .member-logout-icon svg{width:18px!important;height:18px!important}
}
/* 20260511 bottom-nav mobile sync fallback - only member pages */
@media(max-width:1024px){
html body.member-page{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;overflow-x:hidden!important}
html body.member-page .topbar nav:not(.member-top-actions){display:none!important}
html body.member-page .side.card.member-nav,html body.member-page .side.member-nav,html body.member-page .member-nav{position:fixed!important;left:24px!important;right:24px!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;top:auto!important;z-index:2147483647!important;width:auto!important;height:72px!important;min-height:72px!important;margin:0!important;padding:7px 10px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:center!important;gap:8px!important;overflow:visible!important;border-radius:28px!important;background:rgba(255,255,255,.82)!important;background-image:none!important;border:1px solid rgba(205,224,255,.92)!important;box-shadow:0 12px 34px rgba(12,42,92,.18),inset 0 1px 0 rgba(255,255,255,.95)!important;backdrop-filter:blur(22px) saturate(170%)!important;-webkit-backdrop-filter:blur(22px) saturate(170%)!important}
html body.member-page .member-nav a{width:100%!important;min-width:0!important;height:58px!important;min-height:58px!important;margin:0!important;padding:0!important;border:0!important;border-radius:22px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;background:transparent!important;color:#667789!important;box-shadow:none!important;text-decoration:none!important;font-size:0!important;line-height:1!important}
html body.member-page .member-nav a.active{background:linear-gradient(135deg,#07307d 0%,#126fe8 100%)!important;color:#fff!important;box-shadow:0 11px 22px rgba(18,111,232,.28),inset 0 1px 0 rgba(255,255,255,.25)!important}
html body.member-page .member-nav a .nav-ico,html body.member-page .member-nav a span{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;font-size:0!important;color:inherit!important}
html body.member-page .member-nav a b{display:none!important}
html body.member-page .member-nav svg{width:26px!important;height:26px!important;stroke:currentColor!important;stroke-width:2.15!important;fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body.member-page .member-nav a[aria-label="Katalog"],html body.member-page .member-nav a[aria-label="Logout"],html body.member-page .member-nav .member-mobile-only{display:none!important}
}
@media(max-width:480px){html body.member-page .side.card.member-nav,html body.member-page .side.member-nav,html body.member-page .member-nav{left:24px!important;right:24px!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;height:70px!important;min-height:70px!important;padding:7px 10px!important;border-radius:27px!important}html body.member-page .member-nav a{height:56px!important;min-height:56px!important;border-radius:21px!important}}
/* 20260511 CLEAR GLOSSY BOTTOM-NAV MOBILE MEMBER - hanya bottom-nav member */
@media (max-width:1024px){
html body.member-page{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;overflow-x:hidden!important;}
html body.member-page .side.card.member-nav,
html body.member-page .side.member-nav,
html body.member-page .member-nav{
position:fixed!important;
left:24px!important;right:24px!important;
bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;top:auto!important;
height:64px!important;min-height:64px!important;width:auto!important;max-width:none!important;
margin:0!important;padding:6px 8px!important;
display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:center!important;gap:8px!important;
border-radius:24px!important;
overflow:hidden!important;isolation:isolate!important;
background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(244,249,255,.48))!important;
border:1px solid rgba(203,224,255,.78)!important;
box-shadow:0 10px 26px rgba(12,42,92,.12), inset 0 1px 0 rgba(255,255,255,.90)!important;
backdrop-filter:blur(20px) saturate(165%)!important;
-webkit-backdrop-filter:blur(20px) saturate(165%)!important;
transform:none!important;float:none!important;
}
html body.member-page .member-nav:before,
html body.member-page .member-nav:after,
html body.member-page .member-nav a:before,
html body.member-page .member-nav a:after,
html body.member-page .member-nav .nav-ico:before,
html body.member-page .member-nav .nav-ico:after{
content:none!important;display:none!important;background:none!important;box-shadow:none!important;border:0!important;
}
html body.member-page .member-nav a{
width:100%!important;min-width:0!important;max-width:none!important;
height:52px!important;min-height:52px!important;
margin:0!important;padding:0!important;border:0!important;outline:0!important;
border-radius:18px!important;
display:flex!important;align-items:center!important;justify-content:center!important;
background:rgba(255,255,255,.06)!important;background-image:none!important;
color:#667789!important;box-shadow:none!important;text-decoration:none!important;
font-size:0!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;
transform:none!important;filter:none!important;
transition:background .18s ease,color .18s ease,box-shadow .18s ease!important;
}
html body.member-page .member-nav a.active,
html body.member-page .member-nav a:focus,
html body.member-page .member-nav a:active{
background:linear-gradient(180deg,rgba(18,111,232,.20),rgba(18,111,232,.10))!important;
color:#0d5fd5!important;
box-shadow:inset 0 0 0 1px rgba(18,111,232,.18), inset 0 1px 0 rgba(255,255,255,.56), 0 4px 10px rgba(18,111,232,.08)!important;
transform:none!important;
}
html body.member-page .member-nav a .nav-ico,
html body.member-page .member-nav a span{
display:flex!important;align-items:center!important;justify-content:center!important;
width:100%!important;height:100%!important;min-width:0!important;margin:0!important;padding:0!important;
background:transparent!important;border:0!important;box-shadow:none!important;color:inherit!important;
font-size:0!important;line-height:1!important;overflow:hidden!important;
}
html body.member-page .member-nav a b{display:none!important;font-size:0!important;width:0!important;height:0!important;overflow:hidden!important;}
html body.member-page .member-nav svg{
width:24px!important;height:24px!important;display:block!important;
stroke:currentColor!important;fill:none!important;stroke-width:2!important;
stroke-linecap:round!important;stroke-linejoin:round!important;
filter:none!important;
}
html body.member-page .member-nav a.active svg{stroke-width:2.05!important;filter:none!important;}
html body.member-page .member-nav a[aria-label="Katalog"],
html body.member-page .member-nav a[aria-label="Logout"],
html body.member-page .member-nav .member-mobile-only{display:none!important;}
}
@media (max-width:480px){
html body.member-page{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;}
html body.member-page .side.card.member-nav,
html body.member-page .side.member-nav,
html body.member-page .member-nav{
left:24px!important;right:24px!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
height:62px!important;min-height:62px!important;padding:6px 8px!important;border-radius:23px!important;gap:8px!important;
}
html body.member-page .member-nav a{height:50px!important;min-height:50px!important;border-radius:18px!important;}
html body.member-page .member-nav svg{width:23px!important;height:23px!important;}
}
@media (max-width:380px){
html body.member-page .side.card.member-nav,
html body.member-page .side.member-nav,
html body.member-page .member-nav{left:18px!important;right:18px!important;height:60px!important;min-height:60px!important;border-radius:22px!important;}
html body.member-page .member-nav a{height:48px!important;min-height:48px!important;border-radius:17px!important;}
}
/* =========================================================
FINAL OVERRIDE 2026-05-11 - MEMBER MOBILE BOTTOM NAV AKURAT
- Rapat menempel di bawah layar mobile
- Konten diberi jarak aman agar tidak tertutup bottom-nav
- Tombol aktif hanya garis tipis/glossy, tidak bold
========================================================= */
@media (max-width:1024px){
html body.member-page{
--member-bottom-nav-height:64px;
--member-bottom-safe:env(safe-area-inset-bottom,0px);
padding-bottom:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe) + 22px)!important;
overflow-x:hidden!important;
}
html body.member-page main.page{
padding-bottom:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe) + 18px)!important;
}
html body.member-page .member-main,
html body.member-page .sidebar-layout,
html body.member-page .grid,
html body.member-page .grid2{
margin-bottom:0!important;
}
html body.member-page .topbar nav:not(.member-top-actions){display:none!important;}
html body.member-page .sidebar-layout{display:block!important;grid-template-columns:1fr!important;}
html body.member-page .side.card.member-nav,
html body.member-page .side.member-nav,
html body.member-page .member-nav{
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
top:auto!important;
z-index:2147483647!important;
width:100%!important;
max-width:none!important;
height:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe))!important;
min-height:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe))!important;
margin:0!important;
padding:7px 14px calc(7px + var(--member-bottom-safe)) 14px!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
align-items:center!important;
gap:8px!important;
border-radius:22px 22px 0 0!important;
background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(243,248,255,.70))!important;
border:0!important;
border-top:1px solid rgba(203,224,255,.86)!important;
box-shadow:0 -10px 28px rgba(7,39,99,.12), inset 0 1px 0 rgba(255,255,255,.95)!important;
backdrop-filter:blur(22px) saturate(170%)!important;
-webkit-backdrop-filter:blur(22px) saturate(170%)!important;
overflow:hidden!important;
isolation:isolate!important;
transform:none!important;
float:none!important;
}
html body.member-page .member-nav:before,
html body.member-page .member-nav:after,
html body.member-page .member-nav a:before,
html body.member-page .member-nav a:after,
html body.member-page .member-nav .nav-ico:before,
html body.member-page .member-nav .nav-ico:after{
content:none!important;
display:none!important;
}
html body.member-page .member-nav a{
position:relative!important;
z-index:1!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
height:50px!important;
min-height:50px!important;
margin:0!important;
padding:0!important;
border:1px solid transparent!important;
outline:0!important;
border-radius:18px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:0!important;
background:rgba(255,255,255,.10)!important;
background-image:none!important;
color:#64748b!important;
box-shadow:none!important;
text-decoration:none!important;
font-size:0!important;
line-height:1!important;
white-space:nowrap!important;
overflow:hidden!important;
transform:none!important;
filter:none!important;
transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
html body.member-page .member-nav a.active,
html body.member-page .member-nav a:focus,
html body.member-page .member-nav a:active{
background:linear-gradient(180deg,rgba(18,111,232,.115),rgba(18,111,232,.055))!important;
color:#126fe8!important;
border-color:rgba(18,111,232,.26)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 4px 11px rgba(18,111,232,.08)!important;
transform:none!important;
}
html body.member-page .member-nav a .nav-ico,
html body.member-page .member-nav a span{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
min-width:0!important;
margin:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
color:inherit!important;
font-size:0!important;
line-height:1!important;
overflow:hidden!important;
}
html body.member-page .member-nav a b{display:none!important;font-size:0!important;width:0!important;height:0!important;overflow:hidden!important;}
html body.member-page .member-nav svg{
width:23px!important;
height:23px!important;
display:block!important;
stroke:currentColor!important;
fill:none!important;
stroke-width:1.95!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
filter:none!important;
}
html body.member-page .member-nav a.active svg{stroke-width:2.05!important;filter:none!important;}
html body.member-page .member-nav a[aria-label="Katalog"],
html body.member-page .member-nav a[aria-label="Logout"],
html body.member-page .member-nav .member-mobile-only{display:none!important;}
}
@media (max-width:480px){
html body.member-page{--member-bottom-nav-height:60px;padding-bottom:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe) + 20px)!important;}
html body.member-page main.page{padding-bottom:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe) + 16px)!important;}
html body.member-page .side.card.member-nav,
html body.member-page .side.member-nav,
html body.member-page .member-nav{
height:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe))!important;
min-height:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe))!important;
padding:6px 12px calc(6px + var(--member-bottom-safe)) 12px!important;
gap:7px!important;
border-radius:20px 20px 0 0!important;
}
html body.member-page .member-nav a{height:48px!important;min-height:48px!important;border-radius:16px!important;}
html body.member-page .member-nav svg{width:22px!important;height:22px!important;}
}
@media (max-width:380px){
html body.member-page .side.card.member-nav,
html body.member-page .side.member-nav,
html body.member-page .member-nav{padding-left:10px!important;padding-right:10px!important;gap:6px!important;}
html body.member-page .member-nav a{height:46px!important;min-height:46px!important;border-radius:15px!important;}
html body.member-page .member-nav svg{width:21px!important;height:21px!important;}
}
/* =========================================================
FINAL MEMBER MOBILE UI REFRESH 2026-05-11
Rapikan semua isi halaman member mobile: spacing, card, tombol,
produk, form, table, wallet, dan bottom-nav aman tidak menutup konten.
========================================================= */
@media (max-width:1024px){
html body.member-page{
--member-bottom-nav-height:62px;
--member-bottom-safe:env(safe-area-inset-bottom,0px);
background:linear-gradient(180deg,#f3f8ff 0%,#f8fbff 44%,#eef6ff 100%)!important;
color:#152238!important;
padding-bottom:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe) + 34px + var(--vv-bottom,0px))!important;
overflow-x:hidden!important;
}
html body.member-page main.page{
width:100%!important;
max-width:720px!important;
padding:14px 14px calc(var(--member-bottom-nav-height) + var(--member-bottom-safe) + 34px + var(--vv-bottom,0px))!important;
margin:0 auto!important;
}
html body.member-page .topbar{
min-height:58px!important;
padding:8px 14px!important;
border-bottom:1px solid rgba(206,224,245,.72)!important;
background:rgba(255,255,255,.86)!important;
box-shadow:0 8px 24px rgba(18,45,90,.06)!important;
}
html body.member-page .brand{gap:8px!important;min-width:0!important;}
html body.member-page .brand img{height:34px!important;max-width:112px!important;border-radius:10px!important;}
html body.member-page .brand span{display:none!important;}
html body.member-page header.topbar nav.member-top-actions{
display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;max-width:66vw!important;flex:1 1 auto!important;
}
html body.member-page header.topbar nav.member-top-actions .member-top-name{
display:block!important;max-width:calc(66vw - 44px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
font-size:13px!important;font-weight:800!important;color:#1e3354!important;line-height:32px!important;background:transparent!important;border:0!important;padding:0!important;
}
html body.member-page header.topbar nav.member-top-actions .member-logout-icon{
width:34px!important;height:34px!important;min-width:34px!important;border-radius:12px!important;
background:rgba(255,255,255,.78)!important;border:1px solid rgba(24,49,83,.10)!important;color:#1e3354!important;box-shadow:0 6px 14px rgba(18,45,90,.06)!important;
}
html body.member-page .sidebar-layout{display:block!important;grid-template-columns:1fr!important;gap:0!important;}
html body.member-page .member-main{display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important;min-width:0!important;}
html body.member-page .card,
html body.member-page .wallet,
html body.member-page .product,
html body.member-page .stat{
border-radius:22px!important;
border:1px solid rgba(205,224,245,.82)!important;
box-shadow:0 12px 32px rgba(17,48,92,.08)!important;
margin-bottom:12px!important;
}
html body.member-page .card{
padding:15px!important;
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(249,252,255,.92))!important;
}
html body.member-page .card h2,
html body.member-page .card h3{margin:0 0 12px!important;font-size:18px!important;line-height:1.2!important;color:#142a4b!important;letter-spacing:-.025em!important;}
html body.member-page .wallet{
min-height:128px!important;
padding:18px!important;
background:radial-gradient(circle at 85% 6%,rgba(255,255,255,.24),transparent 30%),linear-gradient(135deg,#082c70 0%,#126fe8 72%,#58a6ff 100%)!important;
overflow:hidden!important;
}
html body.member-page .wallet .profile{gap:11px!important;align-items:center!important;}
html body.member-page .wallet .profile img{width:56px!important;height:56px!important;border-radius:18px!important;}
html body.member-page .wallet .profile b{font-size:15px!important;line-height:1.15!important;}
html body.member-page .wallet .profile div div{font-size:12px!important;opacity:.88!important;margin-top:2px!important;}
html body.member-page .wallet .saldo{font-size:28px!important;line-height:1.05!important;margin:10px 0 5px!important;letter-spacing:-.04em!important;}
html body.member-page .sharebox{
font-size:12.5px!important;line-height:1.45!important;padding:12px!important;border-radius:16px!important;background:#f5f9ff!important;border-color:rgba(18,111,232,.34)!important;
}
html body.member-page .row{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;align-items:stretch!important;}
html body.member-page .btn,
html body.member-page button{
width:100%!important;min-height:44px!important;border-radius:15px!important;padding:11px 14px!important;font-size:14px!important;font-weight:900!important;box-shadow:0 10px 22px rgba(18,111,232,.16)!important;
}
html body.member-page .btn.mini{min-height:42px!important;font-size:13px!important;white-space:normal!important;}
html body.member-page input,
html body.member-page select,
html body.member-page textarea{
min-height:46px!important;border-radius:15px!important;font-size:14px!important;padding:12px 13px!important;background:#fff!important;border:1px solid rgba(197,215,238,.95)!important;
}
html body.member-page textarea{min-height:96px!important;}
html body.member-page label{font-size:13px!important;margin:11px 0 6px!important;color:#203757!important;}
html body.member-page .grid,
html body.member-page .grid2{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;}
html body.member-page .product{padding:0!important;overflow:hidden!important;background:#fff!important;}
html body.member-page .product img{height:178px!important;object-fit:cover!important;background:#eef6ff!important;}
html body.member-page .product .body{padding:14px!important;gap:8px!important;}
html body.member-page .product h3{font-size:17px!important;margin:0!important;line-height:1.22!important;}
html body.member-page .price{font-size:20px!important;letter-spacing:-.03em!important;}
html body.member-page .muted{font-size:13px!important;line-height:1.42!important;margin:0!important;}
html body.member-page .badge{font-size:11.5px!important;padding:6px 9px!important;border-radius:999px!important;}
html body.member-page .member-form{max-width:none!important;width:100%!important;margin:0 0 12px!important;}
html body.member-page .tablewrap{overflow:visible!important;padding:15px!important;}
html body.member-page table{min-width:0!important;width:100%!important;border:0!important;background:transparent!important;border-radius:0!important;}
html body.member-page table tr:first-child{display:none!important;}
html body.member-page table tr{
display:block!important;margin:0 0 11px!important;padding:12px!important;border:1px solid rgba(205,224,245,.86)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 20px rgba(17,48,92,.055)!important;
}
html body.member-page table td{
display:grid!important;grid-template-columns:106px minmax(0,1fr)!important;gap:8px!important;align-items:start!important;border:0!important;padding:7px 0!important;font-size:13px!important;line-height:1.35!important;word-break:break-word!important;
}
html body.member-page table td:before{content:attr(data-label);font-weight:900!important;color:#60748f!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.03em!important;}
html body.member-page .footer{display:none!important;}
html body.member-page .side.card.member-nav,
html body.member-page .side.member-nav,
html body.member-page .member-nav{
position:fixed!important;left:0!important;right:0!important;bottom:calc(var(--vv-bottom,0px))!important;top:auto!important;z-index:2147483647!important;
width:100%!important;max-width:none!important;height:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe))!important;min-height:calc(var(--member-bottom-nav-height) + var(--member-bottom-safe))!important;
margin:0!important;padding:6px 14px calc(6px + var(--member-bottom-safe)) 14px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:center!important;gap:8px!important;
border-radius:20px 20px 0 0!important;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(245,250,255,.78))!important;border:0!important;border-top:1px solid rgba(203,224,255,.88)!important;
box-shadow:0 -12px 30px rgba(7,39,99,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;backdrop-filter:blur(22px) saturate(170%)!important;-webkit-backdrop-filter:blur(22px) saturate(170%)!important;overflow:hidden!important;isolation:isolate!important;
}
html body.member-page .member-nav:before,
html body.member-page .member-nav:after,
html body.member-page .member-nav a:before,
html body.member-page .member-nav a:after{content:none!important;display:none!important;}
html body.member-page .member-nav a{height:50px!important;min-height:50px!important;border-radius:17px!important;border:1px solid transparent!important;background:transparent!important;color:#667789!important;box-shadow:none!important;font-size:0!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;overflow:hidden!important;}
html body.member-page .member-nav a.active,
html body.member-page .member-nav a:focus,
html body.member-page .member-nav a:active{background:linear-gradient(180deg,rgba(18,111,232,.12),rgba(18,111,232,.055))!important;color:#1167df!important;border-color:rgba(18,111,232,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 4px 12px rgba(18,111,232,.07)!important;}
html body.member-page .member-nav a .nav-ico,
html body.member-page .member-nav a span{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;font-size:0!important;color:inherit!important;background:transparent!important;border:0!important;box-shadow:none!important;}
html body.member-page .member-nav a b{display:none!important;}
html body.member-page .member-nav svg{width:22px!important;height:22px!important;stroke:currentColor!important;fill:none!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
html body.member-page .member-nav a[aria-label="Katalog"],
html body.member-page .member-nav a[aria-label="Logout"],
html body.member-page .member-nav .member-mobile-only{display:none!important;}
}
@media (max-width:380px){
html body.member-page main.page{padding-left:11px!important;padding-right:11px!important;}
html body.member-page .card{padding:13px!important;}
html body.member-page .product img{height:158px!important;}
html body.member-page .member-nav{padding-left:10px!important;padding-right:10px!important;gap:6px!important;}
html body.member-page table td{grid-template-columns:92px minmax(0,1fr)!important;}
}
/* LOGIN / REGISTER / PROFILE REFRESH 2026-05-11 */
.auth-wrap{min-height:calc(100vh - var(--topbar-height) - 90px);display:flex;align-items:center;justify-content:center;padding:18px 0}.auth-card{width:min(100%,760px);margin:0 auto;padding:28px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,252,255,.9));box-shadow:0 22px 60px rgba(12,42,92,.14);border:1px solid rgba(205,224,255,.9)}.auth-card h2{margin:0 0 6px;text-align:center;font-size:clamp(26px,4vw,36px)}.auth-card .muted{text-align:center;margin:0 0 18px}.auth-card form{display:flex;flex-direction:column}.auth-card .btn,.auth-card button{width:100%}.auth-card .btn.alt{margin-top:10px}.register-card{width:min(100%,920px)}.smart-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.smart-form .form-grid .full{grid-column:1/-1}.smart-form label{font-size:13px;color:#183153}.smart-form input,.smart-form select,.smart-form textarea{background:rgba(255,255,255,.94);border-color:rgba(203,224,255,.98);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.smart-form textarea{min-height:92px}.profile-card{max-width:920px}.profile-summary{margin:14px 0 4px;padding:13px 14px;border-radius:18px;background:linear-gradient(180deg,#f7fbff,#eef6ff);border:1px dashed rgba(18,111,232,.35);color:#183153;display:flex;gap:8px;flex-wrap:wrap}.profile-summary b{font-weight:950}.profile-summary span{color:#516274}.wallet .profile small{display:block;margin-top:3px;max-width:540px;opacity:.86;line-height:1.35}
@media(max-width:700px){.auth-wrap{min-height:calc(100vh - var(--topbar-height) - 70px);padding:8px 0;align-items:center}.auth-card{padding:20px 16px;border-radius:24px}.smart-form .form-grid{grid-template-columns:1fr;gap:6px}.auth-card h2{text-align:center}.auth-card .muted{font-size:14px}.profile-summary{display:block}.wallet .profile small{font-size:11.5px;max-height:32px;overflow:hidden}}
/* NAVBAR UNIFORM SLIM + LOGO FIX + SOFT LOGIN/LOGOUT TOUCH 2026-05-11 */
:root{--topbar-height:58px!important;}
.topbar{
min-height:58px!important;height:auto!important;padding:8px max(var(--page-padding-desktop),calc((100vw - var(--app-max-width))/2 + var(--page-padding-desktop)))!important;
display:flex!important;align-items:center!important;gap:10px!important;background:rgba(255,255,255,.88)!important;border-bottom:1px solid rgba(206,224,245,.76)!important;box-shadow:0 8px 24px rgba(18,45,90,.055)!important;backdrop-filter:blur(18px) saturate(155%)!important;-webkit-backdrop-filter:blur(18px) saturate(155%)!important;overflow:visible!important;
}
.brand{height:42px!important;display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;overflow:visible!important;}
.brand img{height:38px!important;width:auto!important;max-width:132px!important;object-fit:contain!important;object-position:center!important;border-radius:10px!important;display:block!important;flex:0 0 auto!important;clip-path:none!important;overflow:visible!important;}
.brand span{font-size:16px!important;line-height:1!important;font-weight:950!important;max-width:190px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.topbar nav{min-height:42px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;flex-wrap:nowrap!important;overflow:visible!important;}
.topbar nav a,.topbar .btn,.topbar button{min-height:38px!important;height:38px!important;padding:0 12px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:13px!important;font-weight:850!important;line-height:1!important;box-shadow:none!important;transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease!important;}
.topbar nav a:hover,.topbar nav a:focus,.topbar nav a:active,.topbar .btn:hover,.topbar .btn:focus,.topbar .btn:active,.topbar button:hover,.topbar button:focus,.topbar button:active{background:rgba(18,111,232,.085)!important;color:#0b55bd!important;box-shadow:inset 0 0 0 1px rgba(18,111,232,.10)!important;transform:none!important;filter:none!important;}
.topbar nav a[href*="login"],.topbar nav a[href*="logout"],.member-logout-icon{background:rgba(18,111,232,.055)!important;border:1px solid rgba(18,111,232,.10)!important;color:#183153!important;}
.topbar nav a[href*="login"]:hover,.topbar nav a[href*="login"]:active,.topbar nav a[href*="logout"]:hover,.topbar nav a[href*="logout"]:active,.member-logout-icon:hover,.member-logout-icon:active{background:rgba(18,111,232,.13)!important;color:#0b55bd!important;border-color:rgba(18,111,232,.16)!important;}
@media(max-width:960px){.topbar{min-height:56px!important;padding:7px var(--page-padding-tablet)!important}.brand{height:40px!important}.brand img{height:36px!important;max-width:124px!important}.brand span{font-size:14px!important}.topbar nav a,.topbar .btn,.topbar button{height:36px!important;min-height:36px!important;padding:0 10px!important;font-size:12.5px!important}}
@media(max-width:560px){.topbar{min-height:54px!important;padding:7px var(--page-padding-mobile)!important;gap:7px!important}.brand{height:38px!important;max-width:44vw!important}.brand img{height:34px!important;max-width:112px!important}.brand span{display:none!important}.topbar nav{gap:5px!important;min-height:38px!important;flex:1 1 auto!important}.topbar nav a,.topbar .btn,.topbar button{height:34px!important;min-height:34px!important;padding:0 9px!important;font-size:12px!important;border-radius:999px!important}}
/* REGISTER ADDRESS DROPDOWN tidy mobile spacing */
.register-card .smart-form select:disabled{background:#f3f7fc!important;color:#93a4b8!important;}
.register-card .smart-form .form-grid{align-items:start!important;}
.register-card .smart-form label{margin-top:8px!important;}
@media(max-width:700px){.register-card{width:100%!important}.register-card .smart-form .form-grid{gap:4px!important}.register-card .smart-form input,.register-card .smart-form select,.register-card .smart-form textarea{min-height:45px!important;border-radius:14px!important}.auth-wrap{justify-content:center!important;align-items:center!important}}
/* =========================================================
FINAL GLOBAL NAVBAR LOCK 2026-05-11
Navbar login / dashboard / member dibuat 100% seragam dan slim.
========================================================= */
:root{--topbar-height:58px!important;--nav-logo-h:38px!important;--nav-btn-h:38px!important;}
html body .topbar,
html body.member-page .topbar{
position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:2147483000!important;box-sizing:border-box!important;
min-height:58px!important;height:58px!important;max-height:58px!important;
padding:8px max(var(--page-padding-desktop),calc((100vw - var(--app-max-width))/2 + var(--page-padding-desktop)))!important;
display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
background:rgba(255,255,255,.90)!important;border-bottom:1px solid rgba(205,224,255,.86)!important;
box-shadow:0 8px 22px rgba(18,45,90,.055)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
overflow:visible!important;
}
html body .brand,
html body.member-page .brand{
height:42px!important;min-height:42px!important;max-height:42px!important;display:flex!important;align-items:center!important;gap:9px!important;
min-width:0!important;max-width:52vw!important;overflow:visible!important;flex:0 1 auto!important;
}
html body .brand img,
html body.member-page .brand img{
height:38px!important;min-height:38px!important;max-height:38px!important;width:auto!important;max-width:132px!important;
object-fit:contain!important;object-position:center!important;border-radius:10px!important;display:block!important;flex:0 0 auto!important;
clip-path:none!important;overflow:visible!important;padding:0!important;margin:0!important;
}
html body .brand span,
html body.member-page .brand span{font-size:16px!important;line-height:1!important;font-weight:950!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
html body .topbar nav,
html body.member-page .topbar nav,
html body.member-page header.topbar nav.member-top-actions{
height:42px!important;min-height:42px!important;max-height:42px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
gap:7px!important;flex:1 1 auto!important;flex-wrap:nowrap!important;overflow:visible!important;max-width:none!important;margin:0!important;padding:0!important;
}
html body .topbar nav a,
html body .topbar .btn,
html body .topbar button,
html body.member-page header.topbar nav.member-top-actions .member-logout-icon{
height:38px!important;min-height:38px!important;max-height:38px!important;min-width:38px!important;box-sizing:border-box!important;
padding:0 12px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
font-size:13px!important;font-weight:850!important;line-height:1!important;white-space:nowrap!important;margin:0!important;
transform:none!important;filter:none!important;box-shadow:none!important;text-decoration:none!important;
}
html body.member-page header.topbar nav.member-top-actions .member-top-name{
height:38px!important;min-height:38px!important;max-height:38px!important;line-height:38px!important;padding:0!important;margin:0!important;
display:block!important;max-width:calc(100vw - 192px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
font-size:13px!important;font-weight:800!important;color:#183153!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;
}
html body.member-page header.topbar nav.member-top-actions .member-logout-icon{
width:38px!important;padding:0!important;background:rgba(18,111,232,.055)!important;border:1px solid rgba(18,111,232,.10)!important;color:#183153!important;
}
html body.member-page header.topbar nav.member-top-actions .member-logout-icon svg{width:19px!important;height:19px!important;display:block!important;stroke:currentColor!important;fill:none!important;}
html body .topbar nav a[href*="login"],
html body .topbar nav a[href*="logout"],
html body.member-page header.topbar nav.member-top-actions .member-logout-icon{background:rgba(18,111,232,.055)!important;border:1px solid rgba(18,111,232,.10)!important;color:#183153!important;}
html body .topbar nav a:hover,
html body .topbar nav a:focus,
html body .topbar nav a:active,
html body .topbar .btn:hover,
html body .topbar .btn:focus,
html body .topbar .btn:active,
html body.member-page header.topbar nav.member-top-actions .member-logout-icon:hover,
html body.member-page header.topbar nav.member-top-actions .member-logout-icon:focus,
html body.member-page header.topbar nav.member-top-actions .member-logout-icon:active{
background:rgba(18,111,232,.105)!important;color:#0b55bd!important;border-color:rgba(18,111,232,.14)!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)!important;transform:none!important;filter:none!important;
}
@media(max-width:960px){
:root{--topbar-height:56px!important;}
html body .topbar,html body.member-page .topbar{height:56px!important;min-height:56px!important;max-height:56px!important;padding:7px var(--page-padding-tablet)!important;gap:8px!important;}
html body .brand,html body.member-page .brand{height:40px!important;min-height:40px!important;max-height:40px!important;}
html body .brand img,html body.member-page .brand img{height:36px!important;min-height:36px!important;max-height:36px!important;max-width:124px!important;}
html body .brand span,html body.member-page .brand span{font-size:14px!important;}
html body .topbar nav,html body.member-page .topbar nav,html body.member-page header.topbar nav.member-top-actions{height:40px!important;min-height:40px!important;max-height:40px!important;gap:6px!important;}
html body .topbar nav a,html body .topbar .btn,html body .topbar button,html body.member-page header.topbar nav.member-top-actions .member-logout-icon{height:36px!important;min-height:36px!important;max-height:36px!important;min-width:36px!important;padding:0 10px!important;font-size:12.5px!important;}
html body.member-page header.topbar nav.member-top-actions .member-top-name{height:36px!important;min-height:36px!important;max-height:36px!important;line-height:36px!important;font-size:12.5px!important;max-width:calc(100vw - 178px)!important;}
html body.member-page header.topbar nav.member-top-actions .member-logout-icon{width:36px!important;padding:0!important;}
html body.member-page header.topbar nav.member-top-actions .member-logout-icon svg{width:18px!important;height:18px!important;}
}
@media(max-width:560px){
:root{--topbar-height:54px!important;}
html body .topbar,html body.member-page .topbar{height:54px!important;min-height:54px!important;max-height:54px!important;padding:7px var(--page-padding-mobile)!important;gap:7px!important;}
html body .brand,html body.member-page .brand{height:38px!important;min-height:38px!important;max-height:38px!important;max-width:44vw!important;gap:7px!important;}
html body .brand img,html body.member-page .brand img{height:34px!important;min-height:34px!important;max-height:34px!important;max-width:112px!important;border-radius:9px!important;}
html body .brand span,html body.member-page .brand span{display:none!important;}
html body .topbar nav,html body.member-page .topbar nav,html body.member-page header.topbar nav.member-top-actions{height:38px!important;min-height:38px!important;max-height:38px!important;gap:5px!important;}
html body .topbar nav a,html body .topbar .btn,html body .topbar button,html body.member-page header.topbar nav.member-top-actions .member-logout-icon{height:34px!important;min-height:34px!important;max-height:34px!important;min-width:34px!important;padding:0 9px!important;font-size:12px!important;border-radius:999px!important;}
html body.member-page header.topbar nav.member-top-actions .member-top-name{height:34px!important;min-height:34px!important;max-height:34px!important;line-height:34px!important;font-size:12px!important;max-width:calc(100vw - 158px)!important;}
html body.member-page header.topbar nav.member-top-actions .member-logout-icon{width:34px!important;padding:0!important;}
html body.member-page header.topbar nav.member-top-actions .member-logout-icon svg{width:18px!important;height:18px!important;}
}
/* 2026-05-11 mobile logo full + no zoom overflow fallback */
html,body{max-width:100%!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;}
@media(max-width:768px){
.topbar{overflow:visible!important;}
.brand{overflow:visible!important;flex-shrink:0!important;}
.brand img{width:auto!important;height:auto!important;max-height:34px!important;max-width:112px!important;object-fit:contain!important;object-position:center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;clip:auto!important;clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important;transform:none!important;padding:0!important;margin:0!important;}
}
@media(max-width:430px){.brand img{max-height:32px!important;max-width:104px!important;}}
@media(max-width:360px){.brand img{max-height:30px!important;max-width:96px!important;}}
/* 2026-05-11 FINAL MEMBER MOBILE BOTTOM-NAV FIX
Saat keyboard/input aktif, bottom-nav member tidak ikut naik/berubah posisi.
Posisi dikunci fixed menempel bawah viewport perangkat mobile. */
@media(max-width:768px){
html,body{height:auto!important;min-height:100%!important;}
html body.member-page{
--vv-bottom:0px!important;
--member-keyboard-offset:0px!important;
padding-bottom:calc(var(--member-bottom-nav-height,62px) + env(safe-area-inset-bottom,0px) + 26px)!important;
overflow-x:hidden!important;
}
html body.member-page main.page{
padding-bottom:calc(var(--member-bottom-nav-height,62px) + env(safe-area-inset-bottom,0px) + 22px)!important;
}
html body.member-page .side.card.member-nav,
html body.member-page .side.member-nav,
html body.member-page .member-nav{
position:fixed!important;
left:0!important;right:0!important;top:auto!important;bottom:0!important;
transform:none!important;translate:0 0!important;
margin:0!important;
z-index:2147483647!important;
will-change:auto!important;
-webkit-transform:translateZ(0)!important;
transform:translateZ(0)!important;
overscroll-behavior:contain!important;
}
html body.member-page:has(input:focus) .member-nav,
html body.member-page:has(textarea:focus) .member-nav,
html body.member-page:has(select:focus) .member-nav,
html body.member-page.member-keyboard-active .member-nav{
bottom:0!important;top:auto!important;transform:translateZ(0)!important;translate:0 0!important;
}
}
/* 2026-05-11 FINAL NAVBAR FIXED SCROLL LOCK
Navbar dikunci fixed di atas layar, tidak ikut bergeser/berjarak saat halaman di-scroll. */
:root{--topbar-fixed-height:58px!important;}
html body{padding-top:var(--topbar-fixed-height)!important;}
html body .topbar,
html body.member-page .topbar,
html body header.topbar,
html body.member-page header.topbar{
position:fixed!important;
top:0!important;left:0!important;right:0!important;
width:100%!important;max-width:100%!important;
z-index:2147483000!important;
margin:0!important;
transform:none!important;
will-change:auto!important;
}
html body .page,
html body.member-page .page{scroll-margin-top:calc(var(--topbar-fixed-height) + 12px)!important;}
@media(max-width:960px){
:root{--topbar-fixed-height:56px!important;}
html body{padding-top:var(--topbar-fixed-height)!important;}
}
@media(max-width:560px){
:root{--topbar-fixed-height:54px!important;}
html body{padding-top:var(--topbar-fixed-height)!important;}
}