<div class="profile-card">
  <div class="profile-avatar">AS</div>
  <h3 class="profile-name">Alex Morgan</h3>
  <p class="profile-title">UI/UX Designer</p>
  <div class="profile-socials">
    <a href="#">GitHub</a>
    <a href="#">Dribbble</a>
    <a href="#">LinkedIn</a>
  </div>
  <button class="btn btn-primary btn-sm">Takip Et</button>
</div>

<style>
.profile-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1rem; padding: 2rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  text-align: center;
}
.profile-avatar {
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent);
  font-size: 1.25rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.profile-name  { font-weight: 600; }
.profile-title { font-size: 0.875rem; color: var(--muted); }
.profile-socials { display: flex; gap: 1rem; font-size: 0.875rem; }
.profile-socials a { color: var(--muted); text-decoration: none; }
</style>