/* ULTRA FINAL POLISH */
:root{
  --uf-gold:#ddb856;
  --uf-gold-dark:#be8f1e;
  --uf-brown:#2a1a0c;
  --uf-cream:#fffaf2;
  --uf-text:#4a3517;
  --uf-shadow:0 16px 36px rgba(67,47,19,.12);
  --uf-shadow-soft:0 8px 18px rgba(67,47,19,.08);
}

/* smoother page feel */
html{scroll-behavior:smooth}
body{
  animation:ufFadeIn .26s ease;
}
@keyframes ufFadeIn{
  from{opacity:.0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* real-feel nav icons without changing HTML structure */
.mobile-nav a .ic{
  font-family: Arial, Helvetica, sans-serif !important;
  font-size:0 !important;
  width:22px;
  height:22px;
  display:block;
  position:relative;
}
.mobile-nav a:nth-child(1) .ic::before{content:"⌂";font-size:18px;line-height:22px}
.mobile-nav a:nth-child(2) .ic::before{content:"▣";font-size:16px;line-height:22px}
.mobile-nav a:nth-child(4) .ic::before{content:"◷";font-size:17px;line-height:22px}
.mobile-nav a:nth-child(5) .ic::before{content:"◉";font-size:17px;line-height:22px}

/* premium active indicator */
.mobile-nav a{
  position:relative;
  overflow:hidden;
}
.mobile-nav a::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:6px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.60), transparent);
  opacity:0;
  transition:opacity .18s ease;
}
.mobile-nav a.active::after{
  opacity:1;
}

/* glossy deposit button */
.mobile-nav a.center{
  border:1px solid rgba(255,255,255,.14) !important;
}
.mobile-nav a.center::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.20), transparent 42%);
  pointer-events:none;
}

/* subtle card sheen */
.card,.box,.panel,.content-body,.shadow-sm,.card-body{
  position:relative;
}
.card::before,.box::before,.panel::before,.content-body::before,.shadow-sm::before,.card-body::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.22), transparent 35%);
  pointer-events:none;
}

/* stronger premium shadow on hover without layout shift */
.card:hover,.box:hover,.panel:hover{
  box-shadow:0 18px 38px rgba(67,47,19,.14) !important;
}

/* button shimmer */
.btn-primary,.btn-success,.btn-warning,.button-primary{
  position:relative;
  overflow:hidden;
}
.btn-primary::after,.btn-success::after,.btn-warning::after,.button-primary::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-40%;
  width:28%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transition:left .35s ease;
}
.btn-primary:hover::after,.btn-success:hover::after,.btn-warning:hover::after,.button-primary:hover::after{
  left:115%;
}

/* input focus polish */
.form-control:focus,input:focus,select:focus,textarea:focus{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(221,184,86,.12) !important;
}

/* topbar polish */
.icon-btn,.mcp-top-header .btn,.mcp-top-header button,.mcp-top-header a.btn{
  box-shadow:0 8px 18px rgba(255,255,255,.08) inset, 0 6px 12px rgba(67,47,19,.08) !important;
}
.user-chip{
  box-shadow:0 8px 16px rgba(67,47,19,.06) !important;
}

/* skeleton utility for future use */
.uf-skeleton{
  position:relative;
  overflow:hidden;
  background:#efe4c7 !important;
}
.uf-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:ufShimmer 1.2s infinite;
}
@keyframes ufShimmer{
  100%{transform:translateX(100%)}
}

/* ICON NAV SVG-LIKE PREMIUM */
.mobile-nav a .ic{
  width:22px;
  height:22px;
  display:block;
  position:relative;
  font-size:0 !important;
  line-height:0 !important;
}

/* HOME */
.mobile-nav a:nth-child(1) .ic::before{
  content:"";
  position:absolute;
  inset:2px;
  border:2px solid currentColor;
  border-top:none;
  border-radius:2px;
}
.mobile-nav a:nth-child(1) .ic::after{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:1px;
  height:10px;
  border-left:2px solid currentColor;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg) scale(.72);
  transform-origin:center;
}

/* DASH */
.mobile-nav a:nth-child(2) .ic::before{
  content:"";
  position:absolute;
  left:2px;
  top:3px;
  width:7px;
  height:7px;
  background:currentColor;
  border-radius:3px;
  box-shadow:
    10px 0 0 currentColor,
    0 10px 0 currentColor,
    10px 10px 0 currentColor;
}

/* HISTORY */
.mobile-nav a:nth-child(4) .ic::before{
  content:"";
  position:absolute;
  inset:2px;
  border:2px solid currentColor;
  border-radius:50%;
}
.mobile-nav a:nth-child(4) .ic::after{
  content:"";
  position:absolute;
  left:10px;
  top:5px;
  width:2px;
  height:7px;
  background:currentColor;
  transform-origin:bottom center;
  box-shadow:-4px 4px 0 0 currentColor;
  border-radius:2px;
}

/* PROFIL */
.mobile-nav a:nth-child(5) .ic::before{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:10px;
  height:10px;
  border:2px solid currentColor;
  border-radius:50%;
}
.mobile-nav a:nth-child(5) .ic::after{
  content:"";
  position:absolute;
  left:3px;
  bottom:2px;
  width:16px;
  height:8px;
  border:2px solid currentColor;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-bottom:none;
}

/* sedikit lebih premium */
.mobile-nav a.active .ic{
  transform:scale(1.05);
}
.mobile-nav a.center{
  letter-spacing:.2px;
}