/* Header, tab bar HP & penyesuaian ringan supaya halaman Ban Appeal sama dengan situs utama (../assets/site.css).
   Dimuat setelah store.css + bans.css. */
:root { --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nav-h: 64px; }
body { background: var(--bg) radial-gradient(1000px 460px at 85% -140px, rgba(217, 180, 90, .09), transparent 70%) no-repeat; }
body::before { display: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.nav { backdrop-filter: none; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav__inner { height: var(--nav-h); gap: 20px; }
.brand img { width: 26px; height: 39px; }
.brand__name { font-size: 17px; }
.brand__sub { font-size: 10.5px; font-weight: 700; }
.nav__links { align-items: center; gap: 2px; }
.nav__links a { padding: 8px 12px; border-radius: 8px; transition: color .15s, background-color .15s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.nav__links .btn { margin-left: 8px; color: #1a1408; }
.btn--gold, .btn--gold:hover { box-shadow: none; }
.card { box-shadow: none; }
.tabbar { display: none; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--text); }

@media (max-width: 760px) {
  :root { --nav-h: 56px; --tabbar-h: 62px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .nav__links { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 4px 6px env(safe-area-inset-bottom); background: rgba(15, 19, 28, .97); border-top: 1px solid var(--line);
  }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; height: 54px; border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
  .tabbar a:active { background: var(--surface-2); }
  .tabbar a[aria-current="page"] { color: var(--gold); }
  .tabbar .ico { width: 22px; height: 22px; }
  .toast { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
  .footer { margin-top: 48px; padding-bottom: 24px; }
  .hero--bans { padding-top: 32px; }
  /* sub-menu halaman ini: geser ke samping, tidak menumpuk */
  .bans-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bans-tabs::-webkit-scrollbar { display: none; }
  .bans-tabs .tab { flex: none; }
  .input { font-size: 16px; }
}