/* HedefLot ortak marka görünümü */
.brand.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  text-decoration: none;
}

.brand.brand-logo .brand-logo-image {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  object-fit: cover;
}

.brand.brand-logo .brand-logo-name {
  display: inline-block;
  color: inherit;
  white-space: nowrap;
}

.brand.brand-logo .brand-logo-name span {
  color: #2563eb;
}

/* Header yapıları sayfadan sayfaya farklı olsa da marka bloğu aynı
   hizada kalır. Eski sayfalardaki ek margin ve flex kuralları logonun
   ikonuyla yazısını ayırmamalıdır. */
.simple-header .brand,
.site-header .brand,
.auth-page .brand,
.maintenance-public .brand {
  align-self: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  vertical-align: middle;
}

.site-footer .brand.brand-logo { color: #f8fafc; }
.site-footer .brand.brand-logo .brand-logo-name span { color: #60a5fa; }

/* Henüz eski marka HTML'ini kullanan giriş gerektiren ekranlar için
   geriye dönük görünüm desteği. Ortak hesap menüsü bu dosyayı yükler. */
.brand.brand-dark:not(.brand-logo) {
  display: inline-block;
  position: relative;
  height: 38px;
  padding: 0 0 0 48px !important;
  color: #0f172a !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 38px !important;
  white-space: nowrap;
  text-decoration: none;
}

/* Eski "Hedef<span>Lot</span>" yapısında iki kelimeyi gerçek HTML
   elemanlarıyla renklendiririz; gradient, "Hedef" kelimesinin ortasına
   renk geçişi yapabildiği için kullanılmaz. */
.brand.brand-dark:not(.brand-logo) > span {
  display: inline !important;
  color: #2563eb !important;
}

/* Eski sayfalardaki metin içinde bulunan \"◉\" işareti eski logo
   simgesidir. Yeni ikon zaten ::before ile üretildiğinden ikinci kez
   gösterilmemelidir. */
.brand.brand-dark:not(.brand-logo) > .brand-mark {
  display: none !important;
}

.brand.brand-dark:not(.brand-logo)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  background: url('../images/hedeflot-mark-256.png') center / cover no-repeat;
  margin: 0 !important;
}

.brand.brand-dark:not(.brand-logo)::after {
  content: none !important;
}

body.dark-theme .brand.brand-logo,
.dark-theme .brand.brand-logo {
  color: #f8fafc;
}

/* Dashboard teması html köküne eklenir; tüm kullanıcı ve yönetici
   sayfalarında marka yazısının koyu zeminde kaybolmaması için. */
html.hedeflot-dark-theme .brand.brand-logo { color: #f8fafc; }
html.hedeflot-dark-theme .brand.brand-logo .brand-logo-name span { color: #60a5fa; }

body.dark-theme .brand.brand-dark:not(.brand-logo)::after,
.dark-theme .brand.brand-dark:not(.brand-logo)::after {
  content: none !important;
}

body.dark-theme .brand.brand-dark:not(.brand-logo),
.dark-theme .brand.brand-dark:not(.brand-logo),
html.hedeflot-dark-theme .brand.brand-dark:not(.brand-logo) {
  color: #f8fafc !important;
}

body.dark-theme .brand.brand-dark:not(.brand-logo) > span,
.dark-theme .brand.brand-dark:not(.brand-logo) > span,
html.hedeflot-dark-theme .brand.brand-dark:not(.brand-logo) > span {
  color: #60a5fa !important;
}

@media (max-width: 640px) {
  .brand.brand-logo { gap: 8px; font-size: 20px; }
  .brand.brand-logo .brand-logo-image { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  .brand.brand-dark:not(.brand-logo) { height: 32px; padding-left: 40px !important; font-size: 20px !important; line-height: 32px !important; }
  .brand.brand-dark:not(.brand-logo)::before { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
}