/* ================================================================
   topbar.css — baris identitas + perkakas
   Kiri : lambang, nama aplikasi, alamat kantor
   Kanan: pencarian, pemilih warna, login, statistik, info situs
   ================================================================ */
.topbar{background:var(--soft);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}

/* ---------- kiri: identitas ---------- */
.tb-brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
/* Revisi 22: lingkaran gradasi + inisial "DP" diganti lambang kabupaten,
   gaya seragam semua titik logo: tanpa bidang latar, drop-shadow tegas. */
.tb-brand .emblem{width:44px;height:44px;font-size:0;
  background:none;box-shadow:none;border-radius:0}
.tb-brand .emblem img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 3px 7px rgba(11,32,58,.35))}
.tb-name{min-width:0;line-height:1.28}
.tb-name b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.012em}
.tb-name span{display:block;font-size:12px;color:var(--ink2)}
.tb-name .addr{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink3);margin-top:1px}
.tb-name .addr svg{width:12px;height:12px;flex:none}

/* ---------- kanan: perkakas ---------- */
.tb-tools{display:flex;align-items:center;gap:8px}

.tb-search{position:relative;display:flex;align-items:center}
.tb-search svg{position:absolute;left:12px;width:16px;height:16px;color:var(--ink3);pointer-events:none;transition:color .2s ease,transform .25s var(--ease)}
.tb-search:focus-within svg{color:var(--accent);transform:scale(1.08)}
.tb-search input{width:220px;height:38px;padding:0 13px 0 34px;border:1px solid var(--line);border-radius:19px;
  background:#fff;font-size:13.5px;transition:width .45s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,box-shadow .2s ease}
.tb-search input::placeholder{color:var(--ink3)}
.tb-search input:focus{outline:none;width:280px;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft)}

/* tombol perkakas: pil future-fashion, kembaran .pbtn di panel kiri */
.tb-btn{position:relative;z-index:0;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;
  border:1.5px solid var(--accent-line);border-radius:19px;background:rgba(255,255,255,.86);
  font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--accent-strong);
  white-space:nowrap;overflow:hidden;
  transition:color .25s ease,border-color .25s ease,transform .2s var(--ease),box-shadow .25s ease}
/* lapisan warna menggeser masuk dari kiri, sama persis dengan .pbtn */
.tb-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateX(-101%);transition:transform .3s cubic-bezier(.6,0,.2,1)}
.tb-btn svg{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.tb-btn:hover{color:#fff;border-color:var(--accent);transform:translateY(-1px);
  box-shadow:var(--shadow-1),0 8px 18px var(--accent-shadow)}
.tb-btn:hover::before{transform:translateX(0)}
.tb-btn:hover svg{transform:scale(1.08)}
.tb-btn.icon-only{width:38px;padding:0;justify-content:center}
/* tombol perkakas kini IKON SAJA: label teks disembunyikan permanen,
   nama tombol pindah ke title + aria-label (tooltip bawaan browser) */
.tb-btn:not(.login) .lbl{display:none}
.tb-btn:not(.login){padding:0 13px;gap:7px}
.tb-btn.login{position:relative;z-index:0;overflow:hidden;background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:700;padding:0 18px;box-shadow:0 6px 16px var(--accent-shadow)}
/* lapisan warna menggeser dari kiri - mekanik future-fashion */
.tb-btn.login::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-strong);
  transform:translateX(-101%);transition:transform .3s cubic-bezier(.6,0,.2,1)}
.tb-btn.login:hover{border-color:var(--accent-strong);color:#fff}
.tb-btn.login:hover::before{transform:translateX(0)}

/* ---------- dropdown warna ---------- */
.tb-menu{position:relative}
.swatch{width:17px;height:17px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.caret{width:11px;height:11px;transition:transform .22s ease}
.tb-menu[data-open="true"] .caret{transform:rotate(180deg)}

.tb-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:248px;padding:10px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.65);border-radius:16px;box-shadow:var(--shadow-2);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s var(--ease),visibility .2s}
.tb-pop::before{content:"";position:absolute;top:-5px;right:26px;width:10px;height:10px;
  background:rgba(255,255,255,.82);border-left:1px solid rgba(255,255,255,.65);border-top:1px solid rgba(255,255,255,.65);
  transform:rotate(45deg)}
.tb-menu[data-open="true"] .tb-pop{opacity:1;visibility:visible;transform:none}
.tb-pop h4{grid-column:1/-1;font-family:var(--font-mono);font-size:9px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ink3);padding:4px 8px 8px}
/* opsi tema: ubin vertikal dalam grid 3 kolom */
.theme-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;
  padding:10px 6px 8px;border-radius:12px;font-size:10.5px;font-weight:600;line-height:1.25;
  text-align:center;color:var(--ink2);transition:background .18s ease,color .18s ease}
.theme-opt:hover{background:var(--soft);color:var(--ink)}
/* swatch: badge kotak beradius (bukan dot bulat) */
.theme-opt .dot{width:40px;height:26px;border-radius:8px;flex:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),0 3px 8px rgba(20,36,58,.16);
  transition:box-shadow .18s ease}
/* centang tampil di tengah badge tema aktif */
.theme-opt .tick{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:14px;height:14px;
  opacity:0;color:#fff;filter:drop-shadow(0 1px 2px rgba(11,22,38,.5));transition:opacity .18s ease}
.theme-opt[aria-checked="true"] .tick{opacity:1}
.theme-opt[aria-checked="true"]{background:var(--accent-soft);color:var(--accent-strong)}
.theme-opt[aria-checked="true"] .dot{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),
  0 0 0 2px var(--accent),0 3px 8px rgba(20,36,58,.16)}

/* ---------- responsif ---------- */
@media (max-width:1180px){
  .tb-search input{width:180px}
  .tb-search input:focus{width:230px}
  .tb-btn .lbl{display:none}
  .tb-btn{padding:0 12px}
  .tb-btn.login{padding:0 14px}
}
@media (max-width:980px){
  .topbar .wrap{min-height:0;padding-block:14px;gap:14px}
  .tb-brand{margin-right:0;width:100%}
  .tb-tools{width:100%;flex-wrap:wrap}
  .tb-search{flex:1 1 200px}
  .tb-search input,.tb-search input:focus{width:100%}
}
@media (max-width:640px){
  .tb-name .addr{display:none}
  .tb-btn.login .lbl{display:inline}
}

/* ---------- menu akun (pengguna sudah login) ---------- */
.tb-akun{position:relative;z-index:60}
.tb-akun-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:236px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-2);
  padding:8px;display:flex;flex-direction:column;gap:2px}
.tb-akun-menu[hidden]{display:none}
.tb-akun-info{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.tb-akun-info b{display:block;font-size:13.5px;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-akun-info span{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-akun-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;
  border-radius:11px;font:inherit;font-size:13px;font-weight:600;color:var(--ink2);
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease}
.tb-akun-item:hover,.tb-akun-item:focus-visible{background:var(--accent-soft);color:var(--accent-strong)}
.tb-akun-keluar{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.tb-akun-keluar .tb-akun-item{color:#b3261e}
.tb-akun-keluar .tb-akun-item:hover,.tb-akun-keluar .tb-akun-item:focus-visible{background:#fdecea;color:#8c1d18}
@media (max-width:1180px){
  .tb-akun-menu{min-width:210px}
}