<!-- Single avatar -->
<div class="avatar">
  <img src="foto.jpg" alt="Ad Soyad" />
</div>

<!-- Fallback (resim yoksa) -->
<div class="avatar avatar-fallback">AS</div>

<!-- Grup -->
<div class="avatar-group">
  <div class="avatar"><img src="1.jpg" alt="" /></div>
  <div class="avatar"><img src="2.jpg" alt="" /></div>
  <div class="avatar avatar-fallback">+3</div>
</div>

<style>
.avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--surface);
  background: var(--border);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 500;
  background: var(--accent-dim); color: var(--accent);
}
.avatar-group { display: flex; }
.avatar-group .avatar { margin-left: -0.75rem; }
.avatar-group .avatar:first-child { margin-left: 0; }
</style>