/* ============================================================
   OMERTA · ÜRETİLMİŞ GÖRSEL ENTEGRASYONU (page-assets.css)
   profile / rankings / messages / dashboard sayfalarına yüklenir.
   Amaç: rank_badge, avatar ve ui_decor asset'lerini mevcut
   page-social.css kurallarını BOZMADAN, ek sınıflarla sahneye
   koymak. Portre avatarlar kare kırpım (cover + üstten hizalı),
   tüm görseller webp + lazy + TR alt. Bu dosya yalnızca yeni
   `.pa-*` sınıfları tanımlar; mevcut sınıfları override etmez.
   ============================================================ */

/* ---- Ortak görsel temeli -------------------------------- */
.pa-img { display: block; }

/* Portre avatar kare kırpım: yüz üstte kalsın */
.pa-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ============================================================
   PROFİL — büyük avatar + ui_frame_profile köşe süsü
   ============================================================ */
.pa-portrait {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 16px;
}
.pa-portrait__img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-a35);
  background: radial-gradient(circle at 30% 22%, #2a2419, var(--surface-deep));
  box-shadow: var(--glow-gold);
}
/* ui_frame_profile — köşe süsü olarak, hafif taşımayla (abartma) */
.pa-portrait__frame {
  position: absolute;
  inset: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  pointer-events: none;
  opacity: .85;
}

/* Rütbe rozeti — profil rozet satırında */
.pa-rank-badge {
  width: 40px;
  height: 40px;
  flex: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55));
}

/* Başarım madalyaları — rank_badge görselleri */
.pa-ach-medal {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* ============================================================
   RANKINGS — mini rütbe rozetleri (rütbe kolonu)
   ============================================================ */
.pa-rank-mini {
  width: 26px;
  height: 26px;
  flex: none;
  vertical-align: middle;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}

/* ============================================================
   MESSAGES — konuşma listesi / thread / balon avatarları
   Mevcut .conv-avatar kutusunu bozmadan içine görsel yerleştirir.
   ============================================================ */
.pa-conv-avatar-img,
.pa-thread-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: var(--r-round);
  object-fit: cover;
  object-position: top center;
}

/* Karşı taraf balonunun yanındaki küçük avatar */
.pa-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  max-width: 78%;
}
.pa-msg-row--them { align-self: flex-start; }
.pa-msg-row--me { align-self: flex-end; }
.pa-msg-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-round);
  border: 1px solid var(--gold-a28);
  object-fit: cover;
  object-position: top center;
  background: radial-gradient(circle at 30% 25%, #2a2419, var(--surface-deep));
}
/* Satır içindeki balon dış boşluğu sıfırlansın (align-self gerekmez) */
.pa-msg-row .msg-bubble { max-width: 100%; align-self: auto; }

/* ============================================================
   DASHBOARD — karşılama alanı rütbe rozeti
   ============================================================ */
.pa-greeting-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pa-greeting-badge {
  width: 56px;
  height: 56px;
  flex: none;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .55));
}
@media (max-width: 640px) {
  .pa-greeting-badge { width: 46px; height: 46px; }
}