/* ============================================================
   SATICI PROFİLİ (mağaza vitrini) — /satici/{id}, /satis, /skin
   Handoff: tasarim-uygulama/handoff_satici_profili (07.09.2026)

   Ana yapısal karar: kimlik bilgisi iki yerde (üst şerit + sol kimlik
   kutusu) tekrar ediyordu; sol kolon KALDIRILDI, her şey tek profil
   başlığında toplandı, içerik kapsayıcının tam genişliğine yayıldı.
   Ön ek "sp" (satıcı profili). Kapsam DIŞI: ilan/skin kartı
   (x-product-list) — kart kuralları dosyanın sonunda AYNEN korunur.
   ============================================================ */

/* ---- tokenlar: koyu varsayılan, body.light eşlemesi README'den ---- */
.spVitrin{
  --spKart:#20212B;--spKart2:#272834;--spKenar:#333444;--spKenar2:#4E4F5C;
  --spMetin:#EDEEF2;--spMetin2:#C8C9D8;--spSonuk:#ABACB5;--spSonuk2:#8B8C99;
  --spNane:#80F1B1;--spNaneHover:#A8F6CE;--spNaneUstu:#181820;
  --spNaneZemin:rgba(128,241,177,.12);--spNaneKenar:rgba(128,241,177,.30);
  --spNaneCizgi:rgba(128,241,177,.28);--spNaneSayacZemin:rgba(128,241,177,.16);
  --spKirmizi:#E0553F;--spKartGolge:none;
  --spKapakSonum:linear-gradient(to bottom,rgba(32,33,43,0) 40%,rgba(32,33,43,.85) 100%);
}
body.light .spVitrin{
  --spKart:#FFFFFF;--spKart2:#F5F4EE;--spKenar:#E3E1D9;--spKenar2:#C7C5BC;
  --spMetin:#1F1E1D;--spMetin2:#1F1E1D;--spSonuk:#6B6A65;--spSonuk2:#5F5E58;
  --spNane:#137E4C;--spNaneHover:#1A9A5E;--spNaneUstu:#FFFFFF;
  --spNaneZemin:rgba(19,126,76,.08);--spNaneKenar:rgba(19,126,76,.30);
  --spNaneCizgi:rgba(19,126,76,.28);--spNaneSayacZemin:rgba(19,126,76,.12);
  --spKartGolge:0 1px 2px rgba(31,30,29,.05);
  --spKapakSonum:linear-gradient(to bottom,rgba(255,255,255,0) 40%,rgba(255,255,255,.85) 100%);
}
.spVitrin{color:var(--spMetin2)}
.spVitrin .container>*+*{margin-top:24px}

/* ---- profil başlığı ---- */
.spProfil{position:relative;background:var(--spKart);border:1px solid var(--spKenar);border-radius:16px;
  overflow:hidden;box-shadow:var(--spKartGolge)}
.spKapak{height:150px;position:relative;background:var(--spKart2)}
.spKapak img{width:100%;height:100%;object-fit:cover;display:block}
.spKapak::after{content:"";position:absolute;inset:0;background:var(--spKapakSonum)}
/* Kimlik satırı kapağa -44px biner; kapak yoksa (Hakan 01.08: renkli bant kalksın) blok hiç
   çizilmez, satır kartın kendi zemininde 22px üstten başlar. */
.spKimlik{display:flex;align-items:flex-end;gap:20px;padding:0 24px 22px;margin-top:-44px;position:relative}
.spProfil.kapaksiz .spKimlik{margin-top:0;padding-top:22px}
.spAvatar{position:relative;flex:none;order:1}
.spAvatarIc{width:104px;height:104px;border-radius:22px;overflow:hidden;border:4px solid var(--spKart);background:var(--spKart2)}
.spAvatarIc img{width:100%;height:100%;object-fit:cover;display:block}
.spTip{position:absolute;right:-6px;bottom:-6px;width:36px;height:36px;border-radius:999px;background:var(--spKart);
  border:2px solid var(--spKenar);display:flex;align-items:center;justify-content:center}
.spTip img{width:24px;height:24px;display:block}
.spAdBlok{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding-bottom:2px;order:2}
.spAdSatir{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spAd{margin:0;font-size:26px;font-weight:800;letter-spacing:-.6px;color:var(--spMetin);line-height:1.1}
.spMeta{font-size:12px;color:var(--spSonuk2)}
.spRozetler{display:flex;gap:6px;flex-wrap:wrap}
.spRozet{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.3px;white-space:nowrap;background:var(--spNaneZemin);border:1px solid var(--spNaneKenar);color:var(--spNane)}
.spRozet svg{width:11px;height:11px;flex:none}
.spRozet.sessiz{background:var(--spKart2);border-color:var(--spKenar);color:var(--spSonuk)}

/* düğmeler */
.spBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:10px;
  font:inherit;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--spKart);border:1px solid var(--spKenar2);color:var(--spSonuk);transition:background .16s,border-color .16s,filter .16s}
.spBtn:hover{background:var(--spKart2);border-color:var(--spNane);color:var(--spSonuk)}
.spBtn.ana{background:var(--spNane);border-color:var(--spNane);color:var(--spNaneUstu)}
.spBtn.ana:hover{filter:brightness(1.08);color:var(--spNaneUstu)}
.spBtn.ikon{width:42px;padding:0;flex:none}
.spBtn svg{width:15px;height:15px;flex:none}
.spBtn i{font-size:13px}
.spBtn span{display:inline-flex;align-items:center;gap:8px}
.spPaylas{order:3}
.spTakip{order:4;margin-left:-10px}
/* favoriteAction sınıfı değiştirmez, içeriği değiştirir: takipte iken (fa-ban) düğme çerçeveli hâle döner. */
.spTakip.ana:has(.fa-ban){background:var(--spKart);border-color:var(--spKenar2);color:var(--spSonuk)}
.spTakip.ana:has(.fa-ban):hover{background:var(--spKart2);border-color:var(--spNane);filter:none}

/* istatistik satırı */
.spSayilar{display:flex;align-items:center;gap:10px;padding:0 24px 22px}
.spKutular{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.spKutu{display:flex;flex-direction:column;gap:3px;padding:12px 16px;background:var(--spKart2);border:1px solid var(--spKenar);
  border-radius:10px;min-width:128px}
.spKutu span{font-size:9.5px;font-weight:800;letter-spacing:.9px;color:var(--spSonuk2);text-transform:uppercase}
.spKutu b{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--spMetin);font-variant-numeric:tabular-nums;line-height:1.15}
.spKutu b.arti{color:var(--spNane)}
.spKutu b.eksi{color:var(--spKirmizi)}
.spKutu .kisa{display:none}
.spBosluk{flex:1}
.spDurum{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:var(--spKart2);border:1px solid var(--spKenar)}
.spDurum .nk{width:8px;height:8px;border-radius:50%;background:var(--spSonuk2);flex:none}
.spDurum b{font-size:12px;font-weight:700;color:var(--spSonuk)}
.spDurum.acik .nk{background:var(--spNane);animation:spYanip 1.6s ease-in-out infinite}
.spDurum.acik b{color:var(--spNane)}
@keyframes spYanip{0%,100%{opacity:1}50%{opacity:.4}}

/* paylaş geri bildirimi */
.spToast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:1090;
  background:var(--spKart);border:1px solid var(--spKenar2);color:var(--spMetin);font-size:12.5px;font-weight:700;
  padding:10px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .2s,transform .2s}
.spToast.goster{opacity:1;transform:translate(-50%,0)}

/* ---- sekmeler (tam sayfa yükler; tıklamada spinner satici-vitrin-sekme'de) ---- */
.spSekmeler{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--spKenar);padding:0 2px;overflow-x:auto;scrollbar-width:none}
.spSekmeler::-webkit-scrollbar{display:none}
.spSekme{flex:none;display:flex;align-items:center;gap:8px;padding:12px 2px 13px;font-size:13.5px;font-weight:700;color:var(--spSonuk);
  border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none;transition:color .16s;margin-bottom:-1px}
.spSekme:hover{color:var(--spMetin2)}
.spSekme.aktif,.spSekme.aktif:hover{color:var(--spNane);border-bottom-color:var(--spNane)}
.spSekme i{font-style:normal;font-size:11px;font-weight:800;padding:1px 7px;border-radius:6px;background:var(--spKart2);color:var(--spSonuk)}
.spSekme.aktif i{background:var(--spNaneSayacZemin);color:var(--spNane)}
.spSekme .fa-spin{font-size:11px;padding:0;background:none}

/* ---- bölüm başlığı: başlık + açıklama → nane çizgi → Hepsini Gör › ---- */
.spBolum+.spBolum{margin-top:24px}
.spBas{display:flex;align-items:center;gap:14px;padding:0 2px 2px;margin-bottom:16px}
.spBasIc{display:flex;align-items:baseline;gap:12px;min-width:0}
.spBas h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--spMetin);white-space:nowrap;line-height:1.2}
.spBas p{margin:0;font-size:12px;color:var(--spSonuk2)}
.spCizgi{flex:1;height:1px;background:var(--spNaneCizgi)}
.spHepsi{flex:none;font-size:12.5px;font-weight:700;color:var(--spNane);white-space:nowrap;text-decoration:none}
.spHepsi:hover{color:var(--spNaneHover)}

/* ---- boş durum (panel dili korunur, zemin bu sayfanın tokenlarıyla) ---- */
.spVitrin .pnListe{background:var(--spKart);border-color:var(--spKenar);border-radius:16px}

/* ---- mobil ≤767 ---- */
@media(max-width:767px){
  .spVitrin .container>*+*{margin-top:16px}
  .spKapak{height:96px}
  /* Kimlik ve sayı blokları tek sarmal akışa açılır: avatar + Paylaş üstte, ad/rozet/sayı/Takip/durum alt alta. */
  .spKimlik,.spSayilar{display:contents}
  .spGovde{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding:0 14px 14px;margin-top:-36px;position:relative}
  .spProfil.kapaksiz .spGovde{margin-top:0;padding-top:14px}
  .spAvatar{order:1}
  .spAvatarIc{width:84px;height:84px;border-radius:18px}
  .spTip{width:30px;height:30px;right:-5px;bottom:-5px}
  .spTip img{width:20px;height:20px}
  .spBtn.ikon.spPaylas{order:2;margin-left:auto;width:44px;height:44px;margin-bottom:8px}
  .spAdBlok{order:3;flex:0 0 100%;width:100%;gap:10px;padding:2px 0 0}
  .spAdSatir{flex-direction:column;align-items:flex-start;gap:3px}
  .spAd{font-size:22px;letter-spacing:-.5px}
  .spMeta{font-size:11.5px}
  /* rozetler tek satır yatay kayar; sağ kenar 28px sönümle "devamı var" hissi */
  .spRozetler{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .spRozetler::-webkit-scrollbar{display:none}
  .spRozet{font-size:10px;flex:none}
  .spKutular{order:4;flex:0 0 100%;width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .spKutu{padding:10px 12px;min-width:0;grid-column:span 2}
  .spKutu:nth-child(-n+2){grid-column:span 3}
  .spKutular.dortlu .spKutu{grid-column:span 3}
  .spKutu span{font-size:9px;letter-spacing:.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .spKutu b{font-size:17px;letter-spacing:-.3px}
  .spKutu .uzun{display:none}
  .spKutu .kisa{display:block}
  .spTakip{order:5;flex:0 0 100%;width:100%;height:46px;margin-left:0}
  .spBosluk{display:none}
  .spDurum{order:6;flex:0 0 100%;width:100%;justify-content:center;height:36px}
  .spSekmeler{gap:18px}
  .spSekme{height:44px;padding:0 2px;font-size:13px;gap:7px}
  .spSekme i{font-size:10.5px;padding:1px 6px}
  .spBolum+.spBolum{margin-top:16px}
  .spBas{gap:10px;margin-bottom:12px}
  .spBasIc{flex-direction:column;gap:2px}
  .spBas h2{font-size:16px;letter-spacing:-.3px;white-space:normal}
  .spBas p{font-size:11.5px}
  .spHepsi{font-size:12px}
}
@media(min-width:768px){.spGovde{display:block}}

/* ============================================================
   AŞAĞISI DEĞİŞMEDİ — eski satici-vitrin-stil'den taşınan ürün kartı,
   fiyat/sepet düğmesi ve sayfalayıcı kuralları (.pnVitrin kapsamı).
   Kart bileşeni bu işin kapsamı dışında; görünümü aynen korunur.
   ============================================================ */
.pnVitrin .productCard{background:var(--pnLine)}
.pnVitrin .productCard:after{background:var(--pnCard)}
.pnVitrin .productCard:hover{background:var(--pnGreen)}
.pnVitrin .productCard .productCardHeader{border-bottom-color:var(--pnLine)}
.pnVitrin .productCardImageWrapper:before{background:linear-gradient(to top,var(--pnCard),rgba(0,0,0,0))}
.pnVitrin .productCardTitle,.pnVitrin .productCardTitle a,.pnVitrin .productCardTitle h2{color:var(--pnInk)}
.pnVitrin .productCardSubTitle,.pnVitrin .productCardSubTitle a{color:var(--pnGreen)}
.pnVitrin .productCard .steamDiscountBadge{background:var(--pnGreen);color:var(--pnGreenInk)}
.pnVitrin .sellerButton:hover{background:var(--pnCard2)}
.pnVitrin .priceCard{color:#80f1b1;
  background:radial-gradient(rgba(10,14,20,.96) 34%,rgba(10,14,20,.86) 60%,rgba(10,14,20,.30) 100%)}
.pnVitrin .productListPrice{height:34px;background:transparent;color:var(--pnInk);
  font-size:13px;font-weight:750;border:1px solid var(--pnLine);border-right:0;
  border-radius:9px 0 0 9px}
.pnVitrin .oldPrice{background:var(--pnCard);color:var(--pnRed)}
.pnVitrin .productListButton{height:34px;padding:0 16px;font-size:16px;
  background:var(--pnGreen);color:var(--pnGreenInk);
  border:1px solid var(--pnGreen);border-radius:0 9px 9px 0}
.pnVitrin .productListButton:hover{background:var(--pnGreen);filter:brightness(1.06)}
.pnVitrin .productListButton.showBeforeText:before{color:var(--pnGreenInk)}
.pnVitrin .pagination{list-style:none;padding-left:0;display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}
.pnVitrin .pagination li{padding-left:0;margin-right:0;font-size:12.5px;font-weight:700}
.pnVitrin .pagination li a{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 10px;border-radius:9px;text-decoration:none;
  background:var(--pnCard);border:1px solid var(--pnLine);color:var(--pnInk)}
.pnVitrin .pagination li a:hover{background:var(--pnCard2);color:var(--pnInk)}
.pnVitrin .pagination li .active,.pnVitrin .pagination li .active:hover{
  background:var(--pnGreen);border-color:var(--pnGreen);color:var(--pnGreenInk)}