/* =========================================
   1. GLOBAL & DESKTOP STYLES (Varsayılan)
   ========================================= */

/* Ana Kapsayıcı (Avatar + Yazı) - Sadece profil sayfası için */
/* Masaüstünde yan yana durmalarını sağlar */
.profile-info-section .profile-user-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
}

/* Avatar container'ına sol boşluk ekle (geniş çerçeveler için) */
.profile-info-section .profile-user-header > div:first-child {
    padding-left: 50px !important;
    margin-left: 0 !important;
}

/* Avatar Kapsayıcısı */
/* Bu kutu referans noktasıdır (Anchor) */
.avatar-wrap {
    position: relative !important; /* İçindekiler buna göre hizalanır */
    display: block !important;
    flex-shrink: 0 !important;     /* Asla sıkışmaz */
    
    /* Boyutlar PHP'den inline style ile gelir - CSS override etmemeli */
    /* min-width ve min-height sadece fallback için */
    min-width: 100px;
    min-height: 100px;
    
    /* Inline style'ı override etmemek için width/height tanımlamıyoruz */
    /* max-width ve max-height de yok, inline style'ın çalışması için */
    
    /* Masaüstü Boşlukları */
    margin-right: 40px !important;
    padding: 0 !important;
    
    /* Temizlik */
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important; /* KARE kalmalı, içindeki yuvarlak olacak */
    overflow: visible !important; /* Çerçeve dışarı taşabilsin */
    z-index: 10 !important; /* Kartın üstünde kalması için */
}

/* Profil sayfası için özel - çerçeve kartın üstünde */
.profile-info-section {
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

.profile-info-section .avatar-wrap {
    z-index: 10 !important; /* Kartın üstünde */
}

.profile-info-section .avatar-frame {
    z-index: 20 !important; /* En üstte, kartın üstünde */
}


/* İç Daire (Sadece resmi keser) */
.avatar-inner {
    position: absolute !important;
    /* Merkezleme - wrapper'ın tam ortasında */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    width: 100% !important;
    height: 100% !important;
    
    border-radius: 50% !important; /* Tam Daire */
    overflow: hidden !important;   /* Resmi kırp */
    z-index: 1 !important;
    
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Kullanıcı Resmi */
.avatar-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Placeholder (İsim baş harfi) */
.avatar-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--accent-primary, #10b981) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Çerçeve (Frame) - Dış süslemeler için optimize edilmiş */
/* 1600x1600 gibi büyük görseller için: transparent padding dahil tüm görseli göster */
.avatar-frame {
    position: absolute !important;
    
    /* Tam Ortala - Üst kısım kesilmemesi için biraz yukarı kaydır */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Boyutlandırma - Büyük görseller (1600x1600) için daha büyük boyut */
    /* Transparent padding dahil tüm görseli göstermek için 180-200% gerekebilir */
    width: 200% !important;
    height: 200% !important;
    
    z-index: 10 !important; /* En üstte */
    pointer-events: none !important; /* Tıklamayı engelleme */
    object-fit: contain !important; /* Görselin tamamını göster, bozma - transparent padding dahil */
    
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

/* Profil sayfası için özel - çerçeve kartın üstünde */
.profile-info-section .avatar-frame {
    z-index: 20 !important; /* Kartın üstünde kalması için */
}

/* Dashboard specific - remove background square */
.dashboard-welcome-section {
    overflow: visible !important; /* Çerçeve kartın dışına çıkabilsin */
}

.dashboard-welcome-section .avatar-wrap {
    background: transparent !important;
    box-shadow: none !important;
    margin-right: 0 !important; /* Dashboard'da margin-right yok */
    overflow: visible !important; /* Çerçeve dışarı taşabilsin */
}

.dashboard-welcome-section .avatar-inner {
    background: transparent !important;
}

/* Admin Panel Preview - Özel stiller */
.admin-section .avatar-wrap {
    margin-right: 0 !important; /* Admin panelinde margin-right yok */
    overflow: visible !important; /* Çerçeve dışarı taşabilsin */
}

.admin-section .avatar-frame {
    width: 200% !important;
    height: 200% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* =========================================
   2. MOBILE RESPONSIVE - TEK TEMİZ BLOK
   ========================================= */
@media (max-width: 992px) {

  /* Header dikey + ortalı */
  .profile-info-section .profile-user-header{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 20px !important;
  }

  /* renderAvatar() dış wrapper'ı ortalasın */
  .profile-info-section .profile-user-header > div:first-child{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important;
    text-align: center !important;
    padding-left: 0 !important; /* Mobilde sol padding'i kaldır */
    margin-left: 0 !important;
  }

  /* Avatar kutusu: çerçeve görünsün diye kare + visible */
  .profile-info-section .avatar-wrap{
    position: relative !important;
    margin: 0 auto 20px auto !important;

    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;

    border-radius: 0 !important;     /* frame için kare */
    overflow: visible !important;     /* frame dışarı taşsın */
    display: block !important;
  }

  /* ✅ İç daire: kutuyu tamamen kaplasın (kayma biter) */
  .profile-info-section .avatar-wrap .avatar-inner{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    top: 0 !important;
    left: 0 !important;
    transform: none !important;

    border-radius: 50% !important;
    overflow: hidden !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .profile-info-section .avatar-wrap .avatar-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Frame mobilde aktif + üstte */
  .profile-info-section .avatar-wrap .avatar-frame{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 200% !important;        /* Desktop ile aynı boyut - büyük görseller için */
    height: 200% !important;

    z-index: 20 !important;
    pointer-events: none !important;
    object-fit: contain !important; /* Transparent padding dahil tüm görseli göster */

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* Yazı kısmı ortalı */
  .profile-info-section .profile-user-header > div:not(:first-child){
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
}