/* ══════════════════════════════════════════════════════════════════
   21-profile.css — PROFİL BANNER'I & OYUNCU KARTI      2026-07-25

   İki iş yapar:
     1) Başkasının profil kartını (#pp-card) gerçek bir profil sayfası
        gibi kurar: üstte banner şeridi, banner'a taşan avatar, altında
        kimlik satırı. Eskiden kart düz bir listeydi ve üstteki renk
        şeridi sadece soluk bir gradyandı.
     2) Banner tema seçicisinin (profile-banner.js) görünümü.

   20-console.css'ten SONRA yüklenir — malzeme jetonlarını (--pf-hair,
   --pf-sh*, --pf-r*) oradan devralır.
════════════════════════════════════════════════════════════════════ */

/* ── 1. OYUNCU KARTI (başkasının profili) ─────────────────────────── */

/* Kart artık kendi iç boşluğunu bölümlere bırakıyor: banner kenardan
   kenara akmalı, bu yüzden üst padding sıfırlanıp banner'a devrediliyor. */
#pp-card{
  padding:0 0 1rem !important;
  gap:0 !important;
  overflow:hidden !important;      /* banner köşeleri karta uysun */
  overflow-y:auto !important;
}
/* Eski soluk vurgu şeridi artık gerçek banner tarafından karşılanıyor */
#pp-card::before{ display:none !important; }

.pp-banner{
  position:relative;
  height:118px;
  flex-shrink:0;
  background:linear-gradient(135deg,#141d33,#0a1020);
  background-size:cover;
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* Alt kenarda karta doğru erime — avatar bu karanlığın üstüne oturur */
.pp-banner::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,14,0) 34%, rgba(var(--surf-rgb),.96) 100%);
}

/* Kimlik satırı: YALNIZ AVATAR banner'a taşar.
   Önce tüm satır yukarı çekilmişti (margin-top:-38px) ama o zaman isim
   ve fraksiyon satırı da banner'ın üstüne biniyor, banner'ın alt kenar
   çizgisi yazının ortasından geçiyordu. Şimdi satır banner'ın altında
   başlıyor, sadece avatar yukarı taşıyor. */
.pp-head{
  margin-top:.7rem !important;
  padding:0 1.2rem;
  align-items:flex-start !important;
  z-index:2;
}
.pp-av{ margin-top:-52px !important; }
/* Halka rengi: önce oyuncunun ÇERÇEVESİ (--ppframe, badges.js verir),
   yoksa fraksiyon vurgusu. Eskiden doğrudan --ppacc yazılıydı ve
   !important olduğu için seçili çerçevenin rengi kartta hiç görünmüyordu. */
.pp-av{
  width:80px !important; height:80px !important;
  font-size:1.6rem !important;
  box-shadow:0 0 0 4px var(--surf), 0 0 0 6px var(--ppframe, var(--ppacc, var(--accent))),
             0 10px 26px rgba(0,0,0,.55) !important;
}
.pp-hinfo{ padding-bottom:.25rem; }
.pp-name{ font-size:1.2rem !important; }

/* Kapat düğmesi banner'ın sağ üstüne taşınır — kimlik satırını sıkıştırmasın */
#pp-card .am-close{
  position:absolute !important;
  top:12px; right:12px;
  z-index:3;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--pf-r1, 8px);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(5,7,14,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; cursor:pointer;
  transition:background .18s var(--pf-ease), transform .18s var(--pf-spring);
}
#pp-card .am-close:hover{
  background:rgba(255,77,103,.55);
  transform:rotate(90deg);
}

/* Banner'a taşan satırın altındaki bölümler karta geri hizalanır */
#pp-card .pp-chips,
#pp-card .pp-bio,
#pp-card .pp-sec-title,
#pp-card .pp-badges,
#pp-card .pp-arts,
#pp-card .pp-foot,
#pp-card .pp-idbox{
  margin-left:1.2rem;
  margin-right:1.2rem;
}
#pp-card .pp-chips{ margin-top:.9rem; }

.pp-bio{
  margin-top:.75rem;
  padding:.6rem .75rem;
  border-radius:var(--pf-r2, 12px);
  border:1px solid var(--pf-hair, rgba(255,255,255,.08));
  border-left:2px solid var(--ppacc, var(--accent));
  background:rgba(var(--surf2-rgb),.55);
  color:var(--txt);
  font-size:.76rem;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}

#pp-card .pp-foot{ margin-top:1rem; }


/* ── 2. BANNER TEMA SEÇİCİ ────────────────────────────────────────── */

#pfb-modal{
  position:fixed; inset:0; z-index:9600;
  background:radial-gradient(120% 90% at 50% 50%, rgba(var(--bg-rgb),.68), rgba(var(--bg-rgb),.9));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
  animation:pfb-fade .2s var(--pf-ease, ease) both;
}
@keyframes pfb-fade{ from{opacity:0} to{opacity:1} }

#pfb-card{
  width:520px; max-width:calc(100vw - 2rem); max-height:84vh; overflow-y:auto;
  padding:1.15rem 1.25rem 1.3rem;
  background:linear-gradient(155deg, rgba(var(--surf2-rgb),.97), rgba(var(--surf-rgb),1));
  border:1px solid var(--pf-hair, rgba(255,255,255,.08));
  border-radius:var(--pf-r4, 20px);
  box-shadow:var(--pf-sh3, 0 36px 96px rgba(0,0,0,.7));
  animation:pfb-in .3s var(--pf-ease, ease) both;
}
@keyframes pfb-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to  { opacity:1; transform:none; }
}

.pfb-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.pfb-title{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--txt);
}
.pfb-close{
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--pf-r1, 8px);
  border:1px solid var(--pf-hair, rgba(255,255,255,.08));
  background:rgba(var(--surf2-rgb),.7);
  color:var(--muted); cursor:pointer;
  transition:color .18s, background .18s, transform .18s var(--pf-spring, ease);
}
.pfb-close:hover{ color:var(--txt); background:rgba(255,77,103,.16); transform:rotate(90deg); }

.pfb-desc{
  margin:.35rem 0 .9rem;
  font-size:.72rem; color:var(--muted); line-height:1.5;
}

.pfb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:.6rem;
}
.pfb-cell{
  display:flex; flex-direction:column; gap:.4rem;
  padding:.4rem;
  border-radius:var(--pf-r2, 12px);
  border:1px solid var(--pf-hair, rgba(255,255,255,.08));
  background:rgba(var(--surf2-rgb),.45);
  cursor:pointer; text-align:left;
  transition:border-color .18s var(--pf-ease, ease),
             transform .18s var(--pf-ease, ease),
             box-shadow .18s var(--pf-ease, ease);
}
.pfb-cell:hover{
  border-color:rgba(var(--accent-rgb),.45);
  transform:translateY(-2px);
  box-shadow:var(--pf-sh1, 0 6px 18px rgba(0,0,0,.35));
}
.pfb-cell.sel{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.35), var(--pf-sh1, 0 6px 18px rgba(0,0,0,.35));
}
.pfb-sw{
  height:54px;
  border-radius:var(--pf-r1, 8px);
  background-size:cover;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(0,0,0,.35);
}
.pfb-name{
  display:flex; align-items:center; gap:.35rem;
  font-size:.68rem; font-weight:700; color:var(--txt);
  letter-spacing:.01em;
}
.pfb-vip{
  font-family:var(--font-mono); font-size:.5rem; font-weight:800;
  letter-spacing:.08em;
  padding:.08rem .28rem; border-radius:4px;
  background:linear-gradient(135deg,#f5c542,#d59a1e); color:#3a2606;
}
.pfb-cell.locked .pfb-sw{ filter:grayscale(.72) brightness(.62); }
.pfb-cell.locked .pfb-name{ color:var(--muted); }
.pfb-cell.locked:hover{ border-color:rgba(245,197,66,.45); }

/* Fotoğraf banner'ı hücresi (v4.4): boşken "yükle" kutusu gibi durur */
.pfb-cell.pfb-photo .pfb-sw{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(255,255,255,.22);
}
.pfb-cell.pfb-photo .pfb-plus{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; opacity:.75; color:var(--txt);
}
.pfb-cell.pfb-photo:hover .pfb-sw{ border-color:rgba(var(--accent-rgb),.6); }

/* ── 3. KENDİ PROFİL HERO'M — kimlik satırı ───────────────────────
   Sorun: isim, ünvan, fraksiyon etiketi, seviye, seri ve Bits hepsi
   avatarın yanında aynı ağırlıkta duruyordu; hangisinin ne olduğu
   okunmuyordu. Şimdi net bir sıra var:
     1) İSİM (en büyük)  2) ünvan (küçük, vurgu renginde)
     3) tek satır kompakt haplar: [TAG] · Lv · seri · Bits            */

.pc-head-col{
  gap:.28rem !important;
  padding-bottom:.5rem !important;
}
#pc-username-display{
  font-size:1.32rem !important;
  font-weight:800 !important;
  line-height:1.15 !important;
}
.pc-hero-title{
  font-size:.58rem !important;
  letter-spacing:.14em !important;
  opacity:.85;
}
#pc-head-chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.3rem !important;
  margin-top:.12rem;
}

/* Kompakt yatay hap — .pp-chip'in (dikey istatistik kutusu) yerine */
.pc-hchip{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.16rem .4rem;
  border-radius:999px;
  border:1px solid var(--pf-hair, rgba(255,255,255,.08));
  background:rgba(var(--surf-rgb),.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.6rem;
  line-height:1;
  color:var(--muted);
  white-space:nowrap;
}
.pc-hchip svg{ width:.82em; height:.82em; flex-shrink:0; }
.pc-hchip b{
  color:var(--txt);
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.pc-hchip-lbl{
  font-size:.54rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  opacity:.75;
}
/* Fraksiyon hapı: rengi fraksiyonun, etiketi köşeli parantezsiz mono */
.pc-hchip-fac b{
  color:inherit;
  letter-spacing:.06em;
}
.pc-hchip-fac{
  background:rgba(var(--surf-rgb),.82);
}

/* Hero düğmeleri alta hizalanır ki isim satırıyla çakışmasın */
.pc-hero-actions{ align-items:flex-end !important; padding-bottom:.5rem !important; }

/* ── 4. ŞABLONLARIM: üzerinde çalışılan kaydın işareti ──────────── */
.ts-editing{
  align-self:center;
  padding:.14rem .4rem;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.5);
  background:rgba(var(--accent-rgb),.14);
  color:var(--accent-text);
  font-family:var(--font-mono);
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Hero'daki "Hikaye At" düğmesi VIP'e özel — altın kenarla ayrışır */
.pc-hero-btn.story{
  border-color:rgba(245,197,66,.45) !important;
  color:#f5c542 !important;
}
.pc-hero-btn.story:hover{
  border-color:#f5c542 !important;
  box-shadow:0 4px 16px rgba(245,197,66,.28) !important;
}

@media (max-width: 700px){
  .pp-banner{ height:88px; }
  .pp-head{ margin-top:-32px !important; padding:0 .9rem; }
  .pp-av{ width:68px !important; height:68px !important; }
  #pp-card .pp-chips, #pp-card .pp-bio, #pp-card .pp-sec-title,
  #pp-card .pp-badges, #pp-card .pp-arts, #pp-card .pp-foot,
  #pp-card .pp-idbox{ margin-left:.9rem; margin-right:.9rem; }
  .pfb-grid{ grid-template-columns:repeat(auto-fill, minmax(116px, 1fr)); }
}