/* ============================================================
   SHELL BERSAMA — topbar, pita biru halaman, footer
   Dipakai form.html dan cek-status.html agar selaras dengan beranda.
   Berdiri sendiri (tidak butuh tokens.css) supaya aman dipakai
   berdampingan dengan style.css milik form.
   ============================================================ */
:root {
  --sh-900: #0B2545; --sh-700: #134074; --sh-500: #1E5AAE; --sh-300: #5C8FD6;
  --sh-100: #E8F0FB; --sh-gold: #C8A951; --sh-ink: #0F172A; --sh-ink5: #64748B; --sh-line: #E2E8F0;
}
.wrap { width: 100%; margin: 0 auto; padding: 0 20px; max-width: 1120px; }
.wrap.w-form { max-width: 800px; }
.wrap.w-status { max-width: 720px; }

/* ---------- TOPBAR ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1000; width: 100%;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--sh-line);
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; color: inherit; }
.brand img { height: 42px; width: auto; flex-shrink: 0; }
.brand-text { line-height: 1.25; min-width: 0; }
.brand-text strong { display: block; font-size: 14px; font-weight: 800; color: var(--sh-900); }
.brand-text span { display: block; font-size: 11.5px; color: var(--sh-ink5); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: 14px; font-weight: 600; color: #334155; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; text-decoration: none; transition: background .15s, color .15s;
}
.nav a:hover { background: var(--sh-100); color: var(--sh-700); }
.nav a[aria-current="page"] { background: var(--sh-100); color: var(--sh-700); }
.nav a.nav-cta { background: var(--sh-700); color: #fff; margin-left: 8px; padding: 9px 18px; border-radius: 10px; }
.nav a.nav-cta:hover { background: var(--sh-900); color: #fff; }

/* ---------- PITA BIRU HALAMAN ---------- */
.page-band {
  position: relative; overflow: hidden; width: 100%; color: #fff;
  background:
    radial-gradient(800px 320px at 88% -30%, rgba(92,143,214,.45), transparent 60%),
    radial-gradient(520px 260px at 0% 120%, rgba(200,169,81,.20), transparent 60%),
    linear-gradient(160deg, var(--sh-900) 0%, var(--sh-700) 100%);
  border-bottom: 3px solid var(--sh-gold);
}
.page-band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background-image: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 22px);
}
.page-band .wrap { position: relative; z-index: 1; padding-top: 34px; padding-bottom: 104px; }
.band-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #F3DFA3; background: rgba(200,169,81,.14); border: 1px solid rgba(200,169,81,.35);
  padding: 5px 13px; border-radius: 999px;
}
.page-band h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 8px; }
.page-band p.band-sub { font-size: 15.5px; line-height: 1.65; color: #CFE0F7; max-width: 560px; }

/* strip progres form: menempel di bawah topbar */
.progress-strip { position: sticky; top: 68px; z-index: 999; width: 100%; background: var(--sh-900); color: #B9D0F0; }
.progress-strip .bp-text { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; padding: 9px 0 8px; }
.progress-strip .bp-text strong { color: #fff; font-size: 13.5px; font-weight: 700; }
.bp-bar { height: 4px; background: rgba(255,255,255,.16); overflow: hidden; }
.bp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #E8C96A, var(--sh-gold)); transition: width .35s cubic-bezier(.2,.8,.2,1); }

/* ---------- FOOTER ---------- */
.site-footer { width: 100%; margin-top: 64px; background: var(--sh-900); color: #A9C2E4; font-size: 13px; text-align: left; border-top: 0; padding: 0; line-height: 1.7; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.site-footer strong { color: #fff; font-weight: 600; }
.site-footer .foot-brand { display: flex; align-items: center; gap: 12px; }
.site-footer .foot-brand img { height: 36px; background: #fff; border-radius: 8px; padding: 3px 6px; }

@media (max-width: 640px) {
  .topbar-in { height: 60px; }
  .brand img { height: 36px; }
  .brand-text strong { font-size: 12px; }
  .brand-text span { font-size: 10.5px; }
  .nav { display: none; }
  .progress-strip { top: 60px; }
  .page-band .wrap { padding-top: 26px; padding-bottom: 88px; }
  .page-band p.band-sub { font-size: 14.5px; }
}

/* tombol kembali di pita biru: ukuran disamakan dengan pil .band-eyebrow */
.band-back {
  position: relative; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
}
.band-back::after { content: ''; position: absolute; inset: -8px -6px; } /* area tap tetap lega */
.band-back:hover { background: rgba(255,255,255,.2); }
.band-back:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; }
.page-band .band-back + .band-eyebrow { display: flex; width: fit-content; }