/* ===== سەردێڕ (Header) ===== */
.topbar{
  position:fixed;
  top:16px;
  left:0;
  right:0;
  margin:0 auto;
  width:calc(100% - 32px);
  max-width:420px;
  background:var(--card);
  border-radius:22px;
  box-shadow:0 4px 22px rgba(44,64,51,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  z-index:50;
  font-family:"UniSIRWAN Ping", 'Noto Kufi Arabic', system-ui, sans-serif;
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
}

.topbar .brand{
  display:flex;
  align-items:center;
  gap:9px;
}

.topbar .logo{
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--leaf);
  display:grid;
  place-items:center;
  flex:none;
}

.topbar .logo svg{
  width:20px;
  height:20px;
  fill:#fff;
}

.topbar .brand-name{
  font-family:"MahanBrand", 'Noto Kufi Arabic', system-ui, sans-serif;
  font-size:24px;
  font-weight:400;
  color:var(--leaf);
  letter-spacing:3px;
  line-height:1;
  padding-top:2px;
}

/* دوگمەکانی سەردێڕ */
.hdr-btn{
  border:none;
  background:transparent;
  color:var(--bark);
  width:40px;
  height:40px;
  border-radius:13px;
  display:grid;
  place-items:center;
  cursor:pointer;
  flex:none;
  transition:background .25s ease;
}
.hdr-btn:active{background:rgba(44,64,51,.08)}
.hdr-btn svg{width:24px;height:24px}
.hdr-btn:focus-visible{outline:2px solid var(--bark);outline-offset:-2px}

.profile-btn .avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--leaf);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:700;
}