/* ============================================================
   Psiko — Theme Geomatika (ala AeroCheck / palet AERONET)
   Topbar + Footer seragam untuk semua halaman aplikasi semesta
   ============================================================ */
:root{
  --gold:#ffbd07;
  --navy:#013880;
  --topbar-1:#081c3f;
  --topbar-2:#0157b4;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:10px 22px; text-align:left;
  background:linear-gradient(90deg,var(--topbar-1) 0%,var(--navy) 65%,var(--topbar-2) 100%);
  color:#fff; border-bottom:2px solid var(--gold);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-logo{
  width:38px; height:38px; border-radius:8px; object-fit:contain;
  background:#fff; padding:3px; box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:opacity .2s,transform .2s; flex:0 0 auto;
}
.brand-logo:hover{opacity:.9; transform:scale(1.05)}
.brand h1{font-size:20px; font-weight:800; letter-spacing:.5px; color:#fff; line-height:1.15}
.brand h1 span{color:#ffb74d}
.brand h1 a{color:inherit; text-decoration:none}
.brand h1 a:hover{color:#fff; text-decoration:underline}
.brand .sub{font-size:11px; color:#bcd0f0; margin:0; text-align:left; max-width:none}
.top-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav-link{
  color:#fff; text-decoration:none; font-size:12.5px; font-weight:700;
  letter-spacing:.3px; padding:8px 16px; border-radius:9px;
  border:1px solid rgba(255,255,255,.3); transition:all .15s; white-space:nowrap;
}
.nav-link:hover{background:rgba(255,255,255,.14); border-color:var(--gold); color:var(--gold)}

/* ---------- footer ---------- */
.site-footer{
  background:linear-gradient(135deg,var(--navy) 0%,#014a9e 55%,var(--topbar-2) 100%);
  color:#fff; text-align:center; padding:18px 24px; margin-top:36px;
  font-size:11.5px; border-top:3px solid var(--gold);
}
.site-footer p{margin:0; color:#fff}
.site-footer .src{opacity:.85; margin-top:4px; font-size:10.5px}
.site-footer .src code{background:rgba(255,255,255,.15); padding:2px 6px; border-radius:5px; font-size:10.5px}

/* ---------- responsif ---------- */
@media (max-width:560px){
  .topbar{flex-direction:column; align-items:flex-start; gap:10px; padding:12px 16px}
  .brand{width:100%}
  .top-right{width:100%}
  .brand h1{font-size:17px}
  .nav-link{padding:7px 12px; font-size:11.5px}
}