/* ============================================================
   SP · SOSYAL PANEL  ("Diğer Hesaplarım" bölümü)
   ============================================================
   Panel görseli: assets/ui/sosyal-panel.png — 1630x418, ŞEFFAF zemin.
   Üzerine mutlak konumlu KARE yuvalar, panelin ARKASINDA bir portre,
   ve portreye tıklayınca açılan bir KARAKTER SEÇİCİ.

   Katman sırası:
     0 portre · 1 panel görseli · 2 yuvalar · 3 portre düğmesi
   ============================================================ */

.sp{
  margin-top:clamp(30px,4.4vh,54px);
  /* v15: panel görseli 1710x569 (şablondan, kırpma YOK — tuvaller aynı).
     Ölçüler programatik: 7 kare yuva + tam daire portre deliği.
     .sp 980px iken ~1.74x piksel yoğunluğu — retina'da net. */
  width:min(100%,980px);
  margin-left:auto;margin-right:auto;
}

/* en altta nefes payı */
#hesaplar{padding-bottom:clamp(48px,7vh,96px)}
#hesaplar .sp{margin-bottom:0}

/* Panel kutusu: görselin kendi oranı (1710/569) — birebir olmalı,
   yoksa tarayıcı paneli ezer ve bulanıklaştırır. */
.sp__ic{
  position:relative;
  width:100%;
  aspect-ratio:1710 / 569;
}

/* ── panel görseli: portrenin ÜSTÜNDE (z-index 1) ──────────── */
.sp__zemin{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:1;
  user-select:none;-webkit-user-drag:none;
  image-rendering:-webkit-optimize-contrast;
}

/* ── portre: panelin ARKASINDA (z-index 0) ─────────────────── */
.sp__portre{
  position:absolute;
  border-radius:50%;
  object-fit:cover;
  /* portre görselleri 308x560 dikey — yüz üstte kalmalı, ortadan
     kırpınca kafa kesiliyordu. %38 üst bölgeye odaklar. */
  object-position:center 32%;
  display:block;
  z-index:0;
  pointer-events:none;
}

/* ── sosyal yuvalar: çerçeve alanı, en üstte (z-index 2) ─────
   Panel PNG'sinde yuva içleri ŞEFFAF. Arkada z-index:1 panel görseli
   var ama yuva deliğinde o da şeffaf → sayfanın kendi zemini (açık
   temada bej) sızıyordu, "kirli beyaz kutu" görüntüsünün sebebi bu.
   Çözüm: yuvanın TAMAMINI kaplayan koyu zemin (::before). İkon üstte. */
.sp__yuva{
  position:absolute;
  display:grid;place-items:center;
  text-decoration:none;
  background:transparent;
  z-index:2;
  border-radius:2px;
}
/* yuvanın tamamını kaplayan koyu zemin — kenarda 1px bile sızma yok.
   DİKKAT: tema değişkeni (--void-3) AÇIK temada BEJ'e dönüyor ve
   kutular "kirli beyaz" görünüyordu. Bu yüzden SABİT koyu renk —
   panel görselinin kendi zemin rengiyle (koyu lacivert) aynı ailede,
   tema ne olursa olsun değişmez. */
.sp__yuva::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:2px;
  background:radial-gradient(circle at 50% 34%, #0e1721 0%, #070c12 100%);
  z-index:0;
}
/* İkon: inline stille boyut verilir (yuvanın kendi karesine göre). */
.sp__yuva img{
  position:relative;
  z-index:1;
  object-fit:contain;
  display:block;
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
a.sp__yuva{cursor:var(--imlec-hedef)}
a.sp__yuva:hover img{
  transform:scale(1.08);
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gold) 55%,transparent));
}
a.sp__yuva:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sp__yuva--bos{cursor:not-allowed}
.sp__yuva--bos:hover img{transform:none;filter:none}

/* ── portre değiştirme düğmesi (z-index 3) ─────────────────── */
.sp__portreBtn{
  position:absolute;
  border-radius:50%;
  background:none;border:0;padding:0;
  cursor:var(--imlec-hedef);
  z-index:3;
  display:grid;place-items:center;
}
.sp__portreBtn span{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:color-mix(in srgb,var(--void) 74%,transparent);
  backdrop-filter:blur(2px);
  border-radius:50%;
  width:100%;height:100%;
  display:grid;place-items:center;
  opacity:0;transition:opacity .3s var(--ease);
}
.sp__portreBtn:hover span,
.sp__portreBtn:focus-visible span{opacity:1}
.sp__portreBtn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ============================================================
   SZ · KARAKTER SEÇİCİ (LoL "Kimliğini Kişiselleştir" karşılığı)
   ============================================================ */
.sz{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center}
.sz[hidden]{display:none!important}
.sz__arka{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(5,8,13,.76),rgba(5,8,13,.94));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.sz__kutu{
  position:relative;z-index:1;
  width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  overflow-y:auto;
  padding:clamp(20px,3vw,32px);
  border:1px solid color-mix(in srgb,var(--gold) 42%,transparent);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--gold) 6%,transparent),transparent 24%),
    var(--panel-solid);
  box-shadow:0 30px 90px rgba(0,0,0,.62);
  scrollbar-width:thin;
}
.sz__kapat{
  position:absolute;top:10px;right:12px;width:32px;height:32px;
  display:grid;place-items:center;font-size:20px;line-height:1;
  color:var(--muted);background:none;border:1px solid transparent;border-radius:2px;
  cursor:var(--imlec-hedef);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.sz__kapat:hover{
  color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent);
  background:color-mix(in srgb,var(--gold) 8%,transparent);
}
.sz__baslik{
  margin:0 0 4px;font-family:var(--font-display);
  font-size:clamp(17px,1.9vw,22px);font-weight:600;letter-spacing:.02em;color:var(--ink);
}
.sz__alt{
  margin:0 0 18px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.sz__ara{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.sz__girdi{
  flex:1;min-width:200px;padding:11px 13px;
  background:color-mix(in srgb,var(--void) 70%,transparent);
  border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-mono);font-size:12px;cursor:text;
}
.sz__girdi::placeholder{color:var(--muted-2)}
.sz__girdi:focus{outline:none;border-color:color-mix(in srgb,var(--gold) 60%,transparent)}
.sz__uygula{
  padding:11px 20px;background:none;border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);
  color:var(--gold-hi);font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;cursor:var(--imlec-hedef);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.sz__uygula:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:var(--gold)}

.sz__izgara{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  gap:clamp(7px,1vw,12px);
}
.sz__simge{
  padding:0;background:none;border:1px solid var(--line-soft);
  cursor:var(--imlec-hedef);aspect-ratio:1;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.sz__simge img{width:100%;height:100%;object-fit:cover;display:block}
.sz__simge:hover{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.sz__simge:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sz__hata{color:var(--govde-2,var(--muted));font-size:13px;margin:0}

body.sz-acik{overflow:hidden}

/* ── dar ekran ─────────────────────────────────────────────── */
@media (max-width:640px){
  .sp{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .sp__yuva img,.sz__simge{transition:none}
}