.header-user-name {
    display: flex; /* Elemanları yan yana hizalar */
    align-items: center; /* Dikey hizalamayı sağlar */
}

.profile-picture {
    width: 40px; /* Profil resmi genişliği */
    height: 40px; /* Profil resmi yüksekliği */
    border-radius: 50%; /* Profil resmi yuvarlatılmış köşeler */
    overflow: hidden; /* İçeriğin sınırlar içinde kalmasını sağlar */
    margin-right: 5px; /* Baş harf alanı ile arasındaki boşluk */
    display: flex; /* Elemanları yan yana hizalar */
    align-items: center; /* Dikeyde ortalamayı sağlar */
    justify-content: center; /* Yatayda ortalamayı sağlar */
    position: relative; /* Göreceli pozisyonlandırma */
}

.profile-picture img {
    position: absolute; /* Mutlak pozisyonlandırma */
    top: 50%; /* Üst kenara hizalama */
    left: 50%; /* Sol kenara hizalama */
    transform: translate(-50%, -50%); /* Merkezden konumlandırma */
    width: 100%; /* Resmin genişliği */
    height: 100%; /* Resmin yüksekliği */
    object-fit: cover; /* Resmi kutunun içine sığdırır */
    border: 3px solid #fff; /* Kenarlık */
    border-radius: 50%; /* Yuvarlatılmış köşeler */
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.2); /* Gölge */
    box-sizing: content-box; /* Kutu modelini kenarlık dahil olarak ayarlar */
}


.initials {
    display: flex; /* Elemanları yan yana hizalar */
    justify-content: center; /* Yatay hizalamayı sağlar */
    align-items: center; /* Dikey hizalamayı sağlar */
    width: 40px; /* Baş harf alanı genişliği */
    height: 40px; /* Baş harf alanı yüksekliği */
    font-size: 18px; /* Baş harf boyutu */
    font-weight: bold; /* Kalın yazı */
    color: #ffffff; /* Yazı rengi */
    background-color: #fa2964; /* Arkaplan rengi */
    border-radius: 50%; /* Yuvarlatılmış köşeler */
}

.header-user-name span {
    flex: 1; /* Otomatik genişlik ayarlar, geri kalan alanı doldurur */
    text-align: center; /* Metni yatayda ortalar */
}