.asset-logo {
  --asset-logo-size: 30px;
  width: var(--asset-logo-size);
  height: var(--asset-logo-size);
  flex: 0 0 var(--asset-logo-size);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  font-size: calc(var(--asset-logo-size) * .38);
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
}

.asset-logo--xs { --asset-logo-size: 20px; }
.asset-logo--sm { --asset-logo-size: 26px; }
.asset-logo--md { --asset-logo-size: 30px; }
.asset-logo--lg { --asset-logo-size: 38px; border-radius: 11px; }

.asset-logo img {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  box-sizing: border-box;
}

/* BIST/endeks webp şeffaf inset: çerçeveyi doldur, kırpma yalnızca dış kutuda */
.asset-logo--bist img,
.asset-logo--index img {
  padding: 0;
  object-fit: cover;
  transform: scale(1.143);
}

.asset-logo-fallback {
  display: none;
}

.asset-logo:not(:has(img)) .asset-logo-fallback,
.asset-logo.is-fallback .asset-logo-fallback {
  display: inline;
}

.asset-logo:not(:has(img)),
.asset-logo.is-fallback {
  background: var(--brand-soft, var(--active-bg));
}

.asset-logo--crypto:not(:has(img)),
.asset-logo--crypto.is-fallback {
  color: #f59e0b;
}

.asset-logo--index:not(:has(img)),
.asset-logo--index.is-fallback {
  color: #3b82f6;
}

.asset-logo--fx:not(:has(img)),
.asset-logo--fx.is-fallback {
  color: #2563eb;
}