/* ===================================================================
   TEMA: PINFORGE — Lacivert kabuk, ateş turuncusu aksiyon
   Önek: pf-   ·   epin/theme.css üzerine yüklenir.

   TASARIM İLKELERİ (analizden çıkarılan kurallar)
   İ1  İki zemin ailesi: KABUK lacivert (header/footer/menü/tabbar),
       İÇERİK nötr koyu gri (kart/panel). Sayfa laciverttir; kartlar
       laciverdin üstünde ayrı bir malzeme gibi durur.
   İ2  Turuncu YALNIZCA aksiyondur (satın al, tümü, aktif konum).
       Mavi yalnızca kontroldür (ok, sayfalama, halka, seçim).
       Renk ikisi arasında asla takas edilmez.
   İ3  Kabuk yuvarlak, içerik keskin: çerçeveleyen her şey hap
       (100px+), içerideki her şey 4–15px.
   İ4  Yoğunluk bir özelliktir: taban 13px, ürün adı 13/600.
   İ5  Bölüm başlığı bir "vitrin barı"dır: hap gövde + oyun sekmeleri
       + arka banner + sağda turuncu "Tümü". Sitenin imza bileşeni.
   İ6  Dolu turuncu buton metni AA geçmeli: kimlik rengi #FF6000
       kenar/parıltıda kalır, zemin #C2521F'e iner (beyazla 4.6:1).
   =================================================================== */

/* ===================================================================
   1. TOKENLAR
   =================================================================== */
:root {
  /* — boşluk (4px tabanlı) — */
  --pf-1: 4px;  --pf-2: 8px;  --pf-3: 12px; --pf-4: 16px;
  --pf-5: 20px; --pf-6: 24px; --pf-8: 32px; --pf-10: 40px; --pf-12: 48px;

  /* — yarıçap (İ3) — */
  --pf-r-btn:  5px;
  --pf-r-kart: 15px;
  --pf-r-panel: 8px;
  --pf-r-sm:   6px;
  --pf-r-hap:  100px;

  /* — tipografi — */
  --pf-font: "Poppins", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* İKİ kapsayıcı genişliği (referans ölçümü):
     kabuk (header/footer) geniş, İÇERİK dar durur. Tek genişlik kullanmak
     sayfanın oranını bozuyordu — içerik sütunu fazla yayılıyordu. */
  --pf-kap: 1376px;          /* header · footer */
  --pf-kap-icerik: 1152px;   /* ana sayfa blokları · sayfa gövdeleri */

  /* Geçiş süreleri (referans: .1s / .15s / .3s) */
  --pf-hiz: 150ms;
  --pf-hiz-hizli: 100ms;
  --pf-hiz-yavas: 300ms;
  --pf-egri: cubic-bezier(.455, .03, .515, .955);
}

/* ---- Koyu mod (temanın asıl kimliği) ---- */
[data-bs-theme="dark"] {
  /* kabuk — lacivert aile */
  --pf-kabuk:       #0F1434;   /* header ana bant, sayfa zemini, tabbar */
  --pf-kabuk-ust:   #262B48;   /* üst yardımcı şerit, güven kutusu */
  --pf-kabuk-dip:   #0D0F28;   /* footer dibi */
  --pf-kabuk-oyuk:  #080E28;   /* arama kutusu — banttan daha koyu */
  --pf-kabuk-cizgi: #2A3157;

  /* içerik — nötr koyu aile */
  --pf-bg:        #0F1434;
  --pf-yuzey-1:   #1C1E26;     /* kart / yatay satır */
  --pf-yuzey-2:   #212630;     /* panel / yorum */
  --pf-yuzey-3:   #15161B;     /* derin kart (ürün kartı gövdesi) */
  --pf-hap-bg:    #34364F;     /* vitrin barı hapı */
  --pf-cizgi:     #323948;
  --pf-cizgi-2:   #3E4657;

  --pf-metin:     #FFFFFF;
  --pf-metin-2:   #DDDDDD;
  --pf-metin-3:   #A3A9B5;     /* sönük — kart üstünde 6.1:1 */

  /* aksiyon — ateş ailesi (İ2) */
  --pf-ates:      #FF6000;     /* kimlik: parıltı, kenar, ikon, büyük metin */
  --pf-ates-2:    #EA6932;     /* ikincil dolgu (büyük metin) */
  --pf-ates-3:    #DF5929;     /* "Tümü" hapı — ölçümdeki üçüncü ton */
  --pf-ates-dolu: #C2521F;     /* küçük beyaz metin taşıyan dolgu (İ6) */
  --pf-ates-rgb:  255, 96, 0;

  /* kontrol — mavi ailesi */
  --pf-mavi:      #3D7DC8;
  --pf-mavi-2:    #5B9AE0;
  --pf-mavi-rgb:  61, 125, 200;

  --pf-indigo:    #3D5AFE;     /* indirim şeridi */
  --pf-basari:    #4ED0CA;
  --pf-uyari:     #E4AC50;
  --pf-tehlike:   #FD4949;
  --pf-yildiz:    #F69F29;

  --pf-sh-1: 0 2px 8px rgba(0, 0, 0, .30);
  --pf-sh-2: 0 6px 20px rgba(0, 0, 0, .38);
  --pf-sh-3: 0 16px 44px rgba(0, 0, 0, .50);
  --pf-sh-ates: 0 4px 15px rgba(var(--pf-ates-rgb), .25);
}

/* ---- Açık mod ---- */
[data-bs-theme="light"] {
  --pf-kabuk:       #14205B;
  --pf-kabuk-ust:   #1B2A6E;
  --pf-kabuk-dip:   #101A4A;
  --pf-kabuk-oyuk:  #0B1440;
  --pf-kabuk-cizgi: #2D3C82;

  --pf-bg:        #F1F3F8;
  --pf-yuzey-1:   #FFFFFF;
  --pf-yuzey-2:   #FFFFFF;
  --pf-yuzey-3:   #FFFFFF;
  --pf-hap-bg:    #E4E8F2;
  --pf-cizgi:     #D9DEE9;
  --pf-cizgi-2:   #C2CAD9;

  --pf-metin:     #12151C;
  --pf-metin-2:   #333A47;
  --pf-metin-3:   #5C6470;

  /* Beyaz zeminde turuncu metin okunmuyor; kimlik tonu koyulaşır. */
  --pf-ates:      #C2521F;
  --pf-ates-2:    #B8481A;
  --pf-ates-3:    #B8481A;
  --pf-ates-dolu: #C2521F;
  --pf-ates-rgb:  194, 82, 31;

  --pf-mavi:      #1F5FA8;
  --pf-mavi-2:    #17508F;
  --pf-mavi-rgb:  31, 95, 168;

  --pf-indigo:    #2E44D0;
  --pf-basari:    #157C77;
  --pf-uyari:     #8A6208;
  --pf-tehlike:   #C62828;
  --pf-yildiz:    #B4720A;

  --pf-sh-1: 0 1px 3px rgba(16, 24, 40, .08);
  --pf-sh-2: 0 6px 20px rgba(16, 24, 40, .10);
  --pf-sh-3: 0 16px 44px rgba(16, 24, 40, .16);
  --pf-sh-ates: 0 4px 15px rgba(var(--pf-ates-rgb), .20);
}

:root { --pf-odak: 0 0 0 3px rgba(var(--pf-mavi-rgb), .45); }


/* ===================================================================
   1b. UYUMLULUK ALIAS'LARI
   Taşınan katman (aşağıda) PINHUB'ın değişken adlarını kullanıyor.
   Burada onlar PINFORGE tokenlarına bağlanır: taşınan sayfalar tek
   satır CSS değiştirmeden PinForge paletini giyer.
   =================================================================== */
:root {
  --pf-r-card:  var(--pf-r-panel);
  --pf-r-lg:    12px;
  --pf-r-pill:  var(--pf-r-hap);
  --pf-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --pf-hiz-kart: 160ms;
}
[data-bs-theme="dark"], [data-bs-theme="light"] {
  --pf-cizgi-guclu:  var(--pf-cizgi-2);
  --pf-primary:      var(--pf-ates);
  --pf-primary-rgb:  var(--pf-ates-rgb);
  --pf-primary-dolu: var(--pf-ates-dolu);
  --pf-primary-2:    var(--pf-mavi);
  --pf-sh-odak:      var(--pf-odak);
}

/* ===================================================================
   2. TAŞINAN KATMAN — PINHUB sayfa CSS'i (pf- olarak yeniden adlandırıldı)
   Buradaki kurallar İŞLEV katmanıdır: çekiliş, ürün detay, sepet, ödeme,
   mağaza, cüzdan gibi olgun sayfaların düzenini taşır. Aşağıdaki
   TASARIM katmanı sonra geldiği için çakışan her kuralda o kazanır.
   =================================================================== */
/* ===================================================================
   MENÜ VURGULARI — Çekilişler · Yayıncılar · Bakiye Yükle
   Denetimde referansın menüsü düz çıktı; vurgu PINFORGE'ın kendi kararı.
   Renk tek başına anlam taşımasın diye her vurgu ikon + rozet/nokta
   ile çift kodlanır.
   =================================================================== */

/* Kategori barındaki oyun görselleri (denetim: h-menu-mobile-ico) */
.pf-katbar-ikon {
  width: 18px; height: 18px; border-radius: 4px; object-fit: cover;
  margin-right: 6px; vertical-align: -4px;
}
.pf-katbar-linkler a > i { margin-right: 5px; font-size: 13px; }

/* --- Çekilişler: altın vurgu + aktif çekiliş sayısı --- */
.pf-katbar-cekilis { color: var(--pf-gold) !important; position: relative; }
.pf-katbar-cekilis:hover { border-bottom-color: var(--pf-gold) !important; }
.pf-katbar-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px;
  border-radius: var(--pf-r-pill); font-style: normal;
  font: 800 10px/1 var(--pf-font); color: #241800; background: var(--pf-gold);
}

/* --- Yayıncılar: canlı yayın varsa nabız noktası --- */
.pf-katbar-yayin.canli { color: var(--pf-metin) !important; }
.pf-nabiz {
  display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: var(--pf-danger); vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(240, 80, 60, .55);
  animation: pfNabiz 1.8s ease-out infinite;
}
.pf-nabiz-sag { margin-left: auto; margin-right: 0; }
@keyframes pfNabiz {
  0%   { box-shadow: 0 0 0 0 rgba(240, 80, 60, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(240, 80, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 80, 60, 0); }
}

/* --- Bakiye Yükle: dolu çip (barın en güçlü çağrısı) --- */
.pf-katbar-vurgu {
  align-self: center; height: 26px; padding: 0 10px;
  border-radius: var(--pf-r-btn); border-bottom: 0 !important;
  color: #fff !important; background: var(--pf-primary-dolu);
  font-weight: 700 !important;
}
.pf-katbar-vurgu:hover { filter: brightness(1.1); border-bottom: 0 !important; }
.pf-katbar-vurgu > i { margin-right: 4px; }

/* --- Çekmece karşılıkları --- */
.pf-cekmece-cekilis { color: var(--pf-gold) !important; }
.pf-cekmece-cekilis i { color: var(--pf-gold) !important; }
.pf-cekmece-cekilis .pf-katbar-rozet { margin-left: auto; }
.pf-cekmece-yukle { color: var(--pf-primary-2) !important; font-weight: 700 !important; }
.pf-cekmece-yukle i { color: var(--pf-primary-2) !important; }

@media (prefers-reduced-motion: reduce) { .pf-nabiz { animation: none; } }

/* ===================================================================
   ÇEKİLİŞ BLOĞU — vurgulu düzen
   İlk çekiliş geniş "manşet" kart, kalanlar yanında dikey yığın.
   =================================================================== */
.pf-cekilis-bolum { margin-top: var(--pf-6); }
.pf-cekilis-vurgu {
  display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: var(--pf-3);
}
.pf-cekilis-yan { display: grid; gap: var(--pf-3); align-content: start; }

/* --- Manşet çekiliş --- */
.pf-cekilis-mansethel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden; min-height: 260px;
  border: 1px solid var(--pf-gold); border-radius: var(--pf-r-card);
  background:
    radial-gradient(600px 220px at 12% 0%, rgba(224, 168, 59, .18), transparent 65%),
    var(--pf-yuzey-1);
}
.pf-manset-gorsel { position: relative; overflow: hidden; background: var(--pf-yuzey-2); }
.pf-manset-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-manset-gorsel > i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 54px; color: rgba(224, 168, 59, .45);
}
.pf-manset-govde {
  display: flex; flex-direction: column; gap: var(--pf-2);
  padding: var(--pf-5); min-width: 0;
}
.pf-manset-etiket {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 3px 9px; border-radius: var(--pf-r-pill);
  font: 800 10px/1.6 var(--pf-font); letter-spacing: .08em; text-transform: uppercase;
  color: #241800; background: var(--pf-gold);
}
.pf-manset-govde h3 {
  margin: 0; font-size: 20px; font-weight: 750; line-height: 1.25; letter-spacing: -.01em;
}
.pf-manset-odul {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: var(--pf-r-btn);
  background: rgba(224, 168, 59, .1); border: 1px dashed rgba(224, 168, 59, .45);
}
.pf-manset-odul i { font-size: 17px; color: var(--pf-gold); flex: 0 0 auto; }
.pf-manset-odul small {
  display: block; font: 800 9px/1.4 var(--pf-font); letter-spacing: .09em;
  text-transform: uppercase; color: var(--pf-metin-3);
}
.pf-manset-odul b { display: block; font-size: 14px; font-weight: 700; color: var(--pf-metin); }

/* Geri sayım: 4 haneli sayaç kutuları */
.pf-geri-sayim { display: flex; gap: 6px; }
.pf-geri-kutu {
  flex: 0 0 auto; min-width: 46px; padding: 6px 4px; text-align: center;
  border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
}
.pf-geri-kutu b {
  display: block; font: 750 17px/1.1 var(--pf-mono); color: var(--pf-metin);
  font-variant-numeric: tabular-nums;
}
.pf-geri-kutu small {
  display: block; margin-top: 2px;
  font: 600 9px/1 var(--pf-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--pf-metin-3);
}

.pf-manset-alt {
  display: flex; align-items: center; gap: var(--pf-3); margin-top: auto; flex-wrap: wrap;
}
.pf-manset-katilan { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pf-metin-2); }
.pf-manset-katilan i { color: var(--pf-metin-3); }
.pf-btn-altin {
  background: var(--pf-gold); color: #241800; font-weight: 750;
}
.pf-btn-altin:hover { filter: brightness(1.08); color: #241800; }

/* --- Yan (küçük) çekiliş satırları --- */
.pf-cekilis-mini {
  display: flex; align-items: center; gap: var(--pf-3); padding: var(--pf-3);
  text-decoration: none; color: var(--pf-metin);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  transition: border-color var(--pf-hiz-kart) ease-out, transform var(--pf-hiz-kart) ease-out;
}
.pf-cekilis-mini:hover { border-color: var(--pf-gold); transform: translateY(-2px); color: var(--pf-metin); }
.pf-mini-gorsel {
  position: relative; flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden;
  display: grid; place-items: center; border-radius: var(--pf-r-btn); font-size: 22px;
  color: rgba(224, 168, 59, .5); background: var(--pf-yuzey-2);
}
.pf-mini-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-mini-govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf-mini-govde b {
  font-size: 13px; font-weight: 650; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-mini-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--pf-metin-3); }
.pf-mini-sure { color: var(--pf-gold); font-weight: 700; }

@media (max-width: 991.98px) {
  .pf-cekilis-vurgu { grid-template-columns: 1fr; }
  .pf-cekilis-yan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .pf-cekilis-mansethel { grid-template-columns: 1fr; min-height: 0; }
  .pf-manset-gorsel { aspect-ratio: 16 / 8; }
  .pf-manset-govde { padding: var(--pf-4); }
  .pf-manset-govde h3 { font-size: 16px; }
  .pf-katbar-vurgu { height: 24px; }
}
@media (max-width: 575.98px) {
  .pf-cekilis-yan { grid-template-columns: 1fr; }
  .pf-geri-kutu { min-width: 42px; }
  .pf-geri-kutu b { font-size: 15px; }
}

/* ===================================================================
   DETAY SAYFALARI — ürün detay + ilan detay ortak iskeleti
   Sol %58 içerik / sağ %42 yapışkan satın alma paneli
   =================================================================== */
.pf-sayfa { padding-top: var(--pf-4); padding-bottom: var(--pf-12); }

/* --- Breadcrumb --- */
.pf-ekmek {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: var(--pf-4); font-size: 11px;
}
.pf-ekmek a { color: var(--pf-metin-3); text-decoration: none; }
.pf-ekmek a:hover { color: var(--pf-primary-2); }
.pf-ekmek i { font-size: 9px; color: var(--pf-cizgi-guclu); }
.pf-ekmek span { color: var(--pf-metin-2); }

/* --- Uyarı kutusu --- */
.pf-uyari {
  display: flex; align-items: center; gap: 9px; margin-bottom: var(--pf-4);
  padding: 11px var(--pf-4); border-radius: var(--pf-r-card); font-size: 13px;
}
.pf-uyari.hata {
  color: var(--pf-danger); background: rgba(207, 58, 38, .1);
  border: 1px solid rgba(207, 58, 38, .32);
}
.pf-uyari i { font-size: 16px; flex: 0 0 auto; }

/* --- Teslim edilen kodlar --- */
.pf-kod-kutu {
  display: grid; gap: var(--pf-2); margin-bottom: var(--pf-4); padding: var(--pf-4);
  border-radius: var(--pf-r-card);
  background: rgba(95, 209, 106, .07); border: 1px solid rgba(95, 209, 106, .3);
}
.pf-kod-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-kod-bas i { font-size: 17px; color: var(--pf-success); }
.pf-kod-bas b { font-size: 14px; }
.pf-kod-bas span { font-size: 12px; color: var(--pf-metin-2); }
.pf-kod {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-1); color: var(--pf-metin);
  transition: border-color var(--pf-hiz) ease-out;
}
.pf-kod code {
  font: 700 14px/1.4 var(--pf-mono); letter-spacing: .05em; color: inherit;
  word-break: break-all;
}
.pf-kod i { flex: 0 0 auto; color: var(--pf-metin-3); }
.pf-kod:hover { border-color: var(--pf-primary); }
.pf-kod.kopyalandi { border-color: var(--pf-success); color: var(--pf-success); }
.pf-kod.kopyalandi i::before { content: "\f26e"; }   /* check */

/* --- İki sütun --- */
.pf-detay-duzen {
  display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: var(--pf-5); align-items: start;
}
.pf-detay-sol { display: grid; gap: var(--pf-4); min-width: 0; }

.pf-detay-gorsel {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  background: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-detay-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Galeri şeridi */
.pf-galeri { display: flex; gap: var(--pf-2); overflow-x: auto; scrollbar-width: none; }
.pf-galeri::-webkit-scrollbar { display: none; }
.pf-galeri-oge {
  position: relative; flex: 0 0 auto; width: 64px; height: 64px; padding: 0;
  overflow: hidden; cursor: pointer;
  background: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  transition: border-color var(--pf-hiz) ease-out;
}
.pf-galeri-oge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-galeri-oge:hover { border-color: var(--pf-cizgi-guclu); }
.pf-galeri-oge.aktif { border-color: var(--pf-primary); box-shadow: 0 0 0 1px var(--pf-primary); }

/* ===================================================================
   SEKMELER
   =================================================================== */
.pf-sekme {
  overflow: hidden; background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-sekme-bar {
  display: flex; overflow-x: auto; scrollbar-width: none;
  background: var(--pf-yuzey-2); border-bottom: 1px solid var(--pf-cizgi);
}
.pf-sekme-bar::-webkit-scrollbar { display: none; }
.pf-sekme-bar button {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; background: none;
  white-space: nowrap; font: 650 13px/1 var(--pf-font); color: var(--pf-metin-3);
  transition: color var(--pf-hiz) ease-out, border-color var(--pf-hiz) ease-out;
}
.pf-sekme-bar button:hover { color: var(--pf-metin); }
.pf-sekme-bar button.aktif { color: var(--pf-primary-2); border-bottom-color: var(--pf-primary); }
.pf-sekme-bar button:focus-visible { outline: 0; box-shadow: inset var(--pf-sh-odak); }
.pf-sekme-govde { padding: var(--pf-5); font-size: 13px; line-height: 1.7; }
.pf-sekme-govde > p { margin: 0; }
.pf-sonuk { color: var(--pf-metin-3); }

/* Numaralı adım listesi */
.pf-adim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pf-3); }
.pf-adim-liste li { display: flex; gap: 11px; align-items: flex-start; }
.pf-adim-liste li > span {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 11px/1 var(--pf-font); color: #fff; background: var(--pf-primary-dolu);
}
.pf-adim-liste li > div { flex: 1 1 auto; min-width: 0; }

.pf-madde { margin: var(--pf-3) 0 0; padding-left: 18px; display: grid; gap: 7px; }
.pf-madde li { color: var(--pf-metin-2); }

/* Değerlendirme satırı */
.pf-yorum-satir {
  display: flex; gap: 11px; padding: var(--pf-3) 0;
  border-bottom: 1px solid var(--pf-cizgi);
}
.pf-yorum-satir:first-child { padding-top: 0; }
.pf-yorum-satir:last-child { padding-bottom: 0; border-bottom: 0; }
.pf-yorum-satir > div { flex: 1 1 auto; min-width: 0; }
.pf-yorum-ad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px;
}
.pf-yorum-ad b { font-size: 13px; }
.pf-yorum-ad time { margin-left: auto; font-size: 11px; color: var(--pf-metin-3); }
.pf-yorum-satir p { margin: 0; font-size: 13px; color: var(--pf-metin-2); }

/* Soru / cevap */
.pf-soru { padding: var(--pf-3) 0; border-bottom: 1px solid var(--pf-cizgi); }
.pf-soru:first-child { padding-top: 0; }
.pf-soru:last-child { padding-bottom: 0; border-bottom: 0; }
.pf-soru-satir { display: flex; gap: 10px; align-items: flex-start; }
.pf-soru-satir + .pf-soru-satir { margin-top: var(--pf-3); padding-left: var(--pf-5); }
.pf-soru-satir b { display: block; font-size: 12px; margin-bottom: 3px; }
.pf-soru-satir p { margin: 0; font-size: 13px; color: var(--pf-metin-2); }
.pf-soru-etiket {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--pf-r-btn);
  display: grid; place-items: center; font: 800 11px/1 var(--pf-font);
}
.pf-soru-etiket.soru  { color: var(--pf-metin-2); background: var(--pf-yuzey-3); }
.pf-soru-etiket.cevap { color: #fff; background: var(--pf-primary-dolu); }
.pf-soru-satir.cevap b i { color: var(--pf-primary-2); font-size: 11px; }

/* ===================================================================
   S.S.S AKORDİYON
   =================================================================== */
.pf-sss > h2 { margin: 0 0 var(--pf-3); font-size: 17px; font-weight: 700; }
.pf-sss-oge {
  margin-bottom: var(--pf-2); overflow: hidden;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-sss-oge > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 11px var(--pf-4);
  font: 650 13px/1.45 var(--pf-font);
}
.pf-sss-oge > summary::-webkit-details-marker { display: none; }
.pf-sss-oge > summary:focus-visible { outline: 0; box-shadow: inset var(--pf-sh-odak); }
.pf-sss-oge > summary i {
  flex: 0 0 auto; color: var(--pf-metin-3); transition: transform 160ms ease-out;
}
.pf-sss-oge[open] > summary { color: var(--pf-primary-2); }
.pf-sss-oge[open] > summary i { transform: rotate(180deg); }
.pf-sss-oge > p {
  margin: 0; padding: 0 var(--pf-4) var(--pf-4);
  font-size: 13px; line-height: 1.7; color: var(--pf-metin-2);
}

/* ===================================================================
   YAPIŞKAN SATIN ALMA PANELİ
   =================================================================== */
.pf-satinal {
  position: sticky; top: 60px;
  display: flex; flex-direction: column; gap: var(--pf-3);
  padding: var(--pf-4);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-satinal-kat {
  font: 600 10px/1.3 var(--pf-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--pf-metin-3);
}
.pf-satinal h1 {
  margin: -6px 0 0; font-size: 19px; font-weight: 750; line-height: 1.3; letter-spacing: -.01em;
}
.pf-satinal-meta {
  display: flex; flex-wrap: wrap; gap: var(--pf-3);
  font-size: 11px; color: var(--pf-metin-3);
}
.pf-satinal-meta i { margin-right: 3px; }

.pf-satinal-fiyat {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
  padding-bottom: var(--pf-3); border-bottom: 1px solid var(--pf-cizgi);
}
.pf-satinal-fiyat b {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pf-satinal-fiyat s { font-size: 13px; color: var(--pf-metin-3); }

.pf-satinal-stok {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: var(--pf-r-btn); font-size: 12px;
}
.pf-satinal-stok i { font-size: 15px; flex: 0 0 auto; }
.pf-satinal-stok.var { color: var(--pf-success); background: rgba(95, 209, 106, .1); }
.pf-satinal-stok.yok { color: var(--pf-danger); background: rgba(240, 80, 60, .1); }
.pf-satinal-stok span { color: var(--pf-metin-2); }
.pf-satinal-stok b { color: inherit; }

.pf-alan-etiket {
  display: block; font: 600 10px/1.3 var(--pf-font);
  letter-spacing: .07em; text-transform: uppercase; color: var(--pf-metin-3);
}

/* Paket çipleri */
.pf-paket { display: grid; gap: 7px; }
/* İç kaydırma kaldırıldı: panel içinde ikinci bir kaydırma alanı,
   sayfa kaydırmasıyla çakışıp kullanımı zorlaştırıyordu. Fazla paketler
   "daha fazla" butonuyla açılır. */
.pf-paket-izgara {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr));
}
.pf-paket-daha {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; min-height: 32px; margin-top: 6px; cursor: pointer;
  border: 1px dashed var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background: transparent; color: var(--pf-metin-3); font: 600 11px/1 var(--pf-font);
  transition: border-color var(--pf-hiz) ease-out, color var(--pf-hiz) ease-out;
}
.pf-paket-daha:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
.pf-paket-daha:focus-visible { outline: 0; box-shadow: var(--pf-sh-odak); }
.pf-paket-cip.pf-gizli { display: none; }
.pf-paket-cip {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 9px;
  text-decoration: none; color: var(--pf-metin);
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-btn);
  transition: border-color var(--pf-hiz) ease-out, background var(--pf-hiz) ease-out;
}
.pf-paket-cip:hover { border-color: var(--pf-primary); color: var(--pf-metin); }
.pf-paket-cip.secili {
  border-color: var(--pf-primary); background: rgba(var(--pf-primary-rgb), .12);
}
.pf-paket-cip b {
  font-size: 11px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-paket-cip span { font-size: 12px; font-weight: 750; color: var(--pf-primary-2); }

/* Adet + toplam */
.pf-satinal-form { display: grid; gap: var(--pf-2); }
.pf-adet-satir {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pf-3);
  margin-bottom: var(--pf-1);
}
.pf-adet {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn); overflow: hidden;
}
.pf-adet button {
  width: 36px; height: 40px; border: 0; cursor: pointer;
  font-size: 16px; color: var(--pf-metin); background: var(--pf-yuzey-2);
}
.pf-adet button:hover { color: var(--pf-primary); }
.pf-adet input {
  width: 54px; height: 40px; border: 0; outline: none; text-align: center;
  background: var(--pf-yuzey-1); color: var(--pf-metin);
  font: 750 14px/1 var(--pf-mono); -moz-appearance: textfield;
}
.pf-adet input::-webkit-outer-spin-button,
.pf-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-toplam { text-align: right; }
.pf-toplam small { display: block; font-size: 10px; color: var(--pf-metin-3); }
.pf-toplam b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }

.pf-girdi {
  width: 100%; height: 38px; padding: 0 11px;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn); outline: none;
  background: var(--pf-yuzey-2); color: var(--pf-metin); font-size: 13px;
}
.pf-girdi:focus { border-color: var(--pf-primary); box-shadow: var(--pf-sh-odak); }

.pf-favori-form { margin: 0; }
.pf-favori {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 var(--pf-font); color: var(--pf-metin-3);
}
.pf-favori:hover, .pf-favori.dolu { color: var(--pf-danger); }
.pf-favori:focus-visible { outline: 0; box-shadow: var(--pf-sh-odak); }

.pf-guvence {
  list-style: none; margin: 0; padding: var(--pf-3) 0 0;
  display: grid; gap: 7px; border-top: 1px solid var(--pf-cizgi);
}
.pf-guvence li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pf-metin-2); }
.pf-guvence i { flex: 0 0 auto; font-size: 14px; color: var(--pf-primary); }

/* --- İlan detay: satıcı kartı --- */
.pf-satici-kart {
  display: flex; align-items: center; gap: 10px; padding: 9px;
  text-decoration: none; color: var(--pf-metin);
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-btn);
  transition: border-color var(--pf-hiz) ease-out;
}
.pf-satici-kart:hover { border-color: var(--pf-primary); color: var(--pf-metin); }
.pf-satici-logo {
  position: relative; flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--pf-yuzey-3); color: var(--pf-metin-3); font-size: 16px;
}
.pf-satici-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.pf-satici-durum {
  position: absolute; right: -1px; bottom: -1px; z-index: 2;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pf-metin-3); border: 2px solid var(--pf-yuzey-2);
}
.pf-satici-durum.acik { background: var(--pf-success); }
.pf-satici-bilgi { flex: 1 1 auto; min-width: 0; }
.pf-satici-bilgi b {
  display: flex; align-items: center; gap: 4px; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-satici-bilgi b i { color: var(--pf-primary); font-size: 12px; }
.pf-satici-alt { display: block; font-size: 11px; color: var(--pf-metin-3); }
.pf-satici-alt i { color: var(--pf-warning); }
.pf-satici-ok { flex: 0 0 auto; font-size: 12px; color: var(--pf-metin-3); }

.pf-koruma-panel { margin: 0; }

.pf-bos-mini { padding: var(--pf-5) var(--pf-3); }
.pf-bos-mini i { font-size: 28px; }
.pf-bos-mini b { font-size: 13px; }
.pf-bos-mini p { font-size: 12px; }

/* --- Duyarlılık --- */
@media (max-width: 991.98px) {
  .pf-detay-duzen { grid-template-columns: 1fr; gap: var(--pf-4); }
  .pf-satinal { position: static; }
  /* Mobilde ürün görseli baskın olmalı: 16:10 kutuda kare görsel 208px'e
     düşüyordu. Kare kutu görseli tam genişlikte gösterir. */
  .pf-detay-gorsel { aspect-ratio: 1 / 1; }
}
@media (max-width: 575.98px) {
  .pf-sayfa { padding-bottom: var(--pf-8); }
  .pf-satinal { padding: var(--pf-3); }
  .pf-satinal h1 { font-size: 16px; }
  .pf-satinal-fiyat b { font-size: 23px; }
  .pf-sekme-govde { padding: var(--pf-4); }
  .pf-sekme-bar button { padding: 0 12px; font-size: 12px; }
  .pf-adet-satir { flex-wrap: wrap; }
  .pf-toplam { text-align: left; }
  .pf-paket-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================
   LİSTE SAYFALARI — ilanlar · magazalar
   Sol yapışkan filtre paneli + sağda araç çubuğu ve ızgara
   =================================================================== */
.pf-liste-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--pf-4); margin-bottom: var(--pf-3);
}
.pf-liste-bas h1 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.pf-liste-bas p { margin: 3px 0 0; font-size: 12px; color: var(--pf-metin-3); }
.pf-filtre-ac { display: none; }

.pf-liste-duzen {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--pf-4); align-items: start; margin-top: var(--pf-4);
}
.pf-liste-sonuc { min-width: 0; }

/* --- Filtre paneli --- */
.pf-filtre {
  position: sticky; top: 60px;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); overflow: hidden;
}
.pf-filtre form { display: grid; }
.pf-filtre-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px var(--pf-4); border-bottom: 1px solid var(--pf-cizgi);
  background: var(--pf-yuzey-2); font: 700 13px/1 var(--pf-font);
}
.pf-filtre-bas i { color: var(--pf-primary); margin-right: 5px; }
.pf-filtre-kapat {
  display: none; width: 30px; height: 30px; place-items: center;
  border: 0; border-radius: var(--pf-r-btn); cursor: pointer;
  background: transparent; color: var(--pf-metin-2); font-size: 14px;
}
.pf-filtre-grup {
  display: grid; gap: 5px; padding: var(--pf-3) var(--pf-4);
  border-bottom: 1px solid var(--pf-cizgi);
}
.pf-radyo, .pf-onay {
  display: flex; align-items: center; gap: 8px; min-height: 30px;
  cursor: pointer; font-size: 12.5px; color: var(--pf-metin-2);
  border-radius: var(--pf-r-btn); padding: 2px 4px;
  transition: color var(--pf-hiz) ease-out, background var(--pf-hiz) ease-out;
}
.pf-radyo input, .pf-onay input { accent-color: var(--pf-primary); margin: 0; flex: 0 0 auto; }
.pf-radyo:hover, .pf-onay:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }
.pf-radyo.secili, .pf-onay.secili { color: var(--pf-metin); font-weight: 600; }

.pf-ikili { display: flex; align-items: center; gap: 6px; }
.pf-ikili .pf-girdi { min-width: 0; }
.pf-ikili > span { color: var(--pf-metin-3); flex: 0 0 auto; }
.pf-hizli-cip { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.pf-hizli-cip button {
  padding: 4px 9px; border-radius: var(--pf-r-pill); cursor: pointer;
  border: 1px solid var(--pf-cizgi); background: var(--pf-yuzey-2);
  font: 600 11px/1 var(--pf-font); color: var(--pf-metin-2);
}
.pf-hizli-cip button:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
.pf-hizli-cip button.secili { color: #fff; background: var(--pf-primary-dolu); border-color: var(--pf-primary-dolu); }

.pf-filtre-alt { display: grid; gap: 8px; padding: var(--pf-3) var(--pf-4); justify-items: center; }
.pf-filtre-temizle { font: 600 12px/1 var(--pf-font); color: var(--pf-metin-3); text-decoration: none; }
.pf-filtre-temizle:hover { color: var(--pf-danger); text-decoration: underline; }

.pf-filtre-perde {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(0, 0, 0, .55); opacity: 0;
  transition: opacity 240ms cubic-bezier(.32, .72, 0, 1);
}
.pf-filtre-perde.acik { opacity: 1; }

/* --- Araç çubuğu (aktif filtreler + sıralama) --- */
.pf-arac-cubugu {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-3);
  margin-bottom: var(--pf-3); padding: 9px var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-sonuc-sayi { font-size: 12px; color: var(--pf-metin-3); }
.pf-aktif-filtre { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pf-filtre-cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--pf-r-pill); text-decoration: none;
  font: 600 11px/1.4 var(--pf-font);
  color: var(--pf-primary-2); background: rgba(var(--pf-primary-rgb), .12);
  border: 1px solid rgba(var(--pf-primary-rgb), .3);
}
.pf-filtre-cip:hover { color: #fff; background: var(--pf-primary-dolu); border-color: var(--pf-primary-dolu); }
.pf-filtre-cip i { font-size: 9px; }
.pf-filtre-cip.temizle {
  color: var(--pf-metin-3); background: transparent; border-color: var(--pf-cizgi);
}
.pf-filtre-cip.temizle:hover { color: var(--pf-danger); background: transparent; border-color: var(--pf-danger); }

.pf-sirala { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.pf-sirala .pf-alan-etiket { margin: 0; }
.pf-sec {
  height: 34px; padding: 0 28px 0 10px; cursor: pointer;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-2); color: var(--pf-metin); font: 600 12px/1 var(--pf-font);
}
.pf-sec:focus { outline: 0; border-color: var(--pf-primary); box-shadow: var(--pf-sh-odak); }

.pf-ara-alan { position: relative; flex: 1 1 220px; min-width: 0; display: flex; align-items: center; }
.pf-ara-alan i { position: absolute; left: 10px; font-size: 13px; color: var(--pf-metin-3); pointer-events: none; }
.pf-ara-alan .pf-girdi { padding-left: 30px; height: 34px; }

/* --- Sayfalama --- */
.pf-sayfalama {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 5px; margin-top: var(--pf-6);
}
.pf-sayfalama a {
  min-width: 34px; height: 34px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  font: 600 12px/1 var(--pf-font); color: var(--pf-metin); text-decoration: none;
  transition: border-color var(--pf-hiz) ease-out, background var(--pf-hiz) ease-out;
}
.pf-sayfalama a:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
.pf-sayfalama a.aktif {
  color: #fff; background: var(--pf-primary-dolu); border-color: var(--pf-primary-dolu);
}
.pf-sayfa-bosluk { color: var(--pf-metin-3); padding: 0 2px; }

/* --- Mağaza dizini ek parçaları --- */
.pf-mag-dizin .pf-mag { position: relative; }
.pf-mag-rozetler {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  padding: 0 var(--pf-3); margin-top: 5px;
}
.pf-mag-git {
  display: block; margin: var(--pf-3) var(--pf-3) 0; padding: 7px;
  border-top: 1px solid var(--pf-cizgi); text-align: center;
  font: 600 12px/1.3 var(--pf-font); color: var(--pf-primary-2);
}
.pf-podyum-rozet {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--pf-r-pill);
  font: 800 10px/1.5 var(--pf-font); color: #241800; background: var(--pf-gold);
}
.pf-mag.podyum-1 { border-color: var(--pf-gold); }
.pf-mag.podyum-2 { border-color: #A9B4C2; }
.pf-mag.podyum-2 .pf-podyum-rozet { background: #A9B4C2; }
.pf-mag.podyum-3 { border-color: #C08457; }
.pf-mag.podyum-3 .pf-podyum-rozet { background: #C08457; color: #fff; }

/* ===================================================================
   CÜZDAN / BAKİYE YÜKLE
   =================================================================== */
.pf-cuzdan-bas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-4);
  margin-bottom: var(--pf-4);
}
.pf-cuzdan-kart {
  flex: 0 0 auto; min-width: 220px; padding: var(--pf-4) var(--pf-5);
  border-radius: var(--pf-r-card);
  background:
    radial-gradient(400px 160px at 100% 0%, rgba(var(--pf-primary-rgb), .22), transparent 70%),
    var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
}
.pf-cuzdan-etiket {
  display: flex; align-items: center; gap: 6px;
  font: 600 10px/1.4 var(--pf-font); letter-spacing: .07em; text-transform: uppercase;
  color: var(--pf-metin-3);
}
.pf-cuzdan-kart b {
  display: block; margin-top: 4px; font-size: 28px; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pf-cuzdan-not { min-width: 0; }
.pf-cuzdan-not h1 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.015em; }
.pf-cuzdan-not p { margin: 3px 0 0; font-size: 12px; color: var(--pf-metin-3); }

.pf-cuzdan-sekme .pf-sekme-bar button i { margin-right: 5px; }

/* Adım göstergesi */
.pf-adimlar {
  display: flex; gap: var(--pf-2); list-style: none; margin: 0 0 var(--pf-4); padding: 0;
}
.pf-adimlar li {
  flex: 1 1 0; display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  font: 600 12px/1 var(--pf-font); color: var(--pf-metin-3); background: var(--pf-yuzey-2);
}
.pf-adimlar li span {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font: 800 10px/1 var(--pf-font);
  color: var(--pf-metin-3); background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
}
.pf-adimlar li.aktif { color: var(--pf-metin); border-color: var(--pf-primary); }
.pf-adimlar li.aktif span {
  color: #fff; background: var(--pf-primary-dolu); border-color: var(--pf-primary-dolu);
}

.pf-adim { display: grid; gap: 7px; }
.pf-tutar-izgara {
  display: grid; gap: 7px; margin-bottom: var(--pf-2);
  grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
}
.pf-tutar {
  min-height: 44px; cursor: pointer; border-radius: var(--pf-r-btn);
  border: 1px solid var(--pf-cizgi); background: var(--pf-yuzey-2);
  color: var(--pf-metin); font: 750 14px/1 var(--pf-font);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--pf-hiz) ease-out, background var(--pf-hiz) ease-out, color var(--pf-hiz) ease-out;
}
.pf-tutar:hover { border-color: var(--pf-primary); color: var(--pf-primary); }
.pf-tutar.aktif { color: #fff; background: var(--pf-primary-dolu); border-color: var(--pf-primary-dolu); }

.pf-tutar-girdi {
  display: flex; align-items: center; overflow: hidden;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
}
.pf-tutar-girdi:focus-within { border-color: var(--pf-primary); box-shadow: var(--pf-sh-odak); }
.pf-tutar-girdi input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 12px;
  border: 0; outline: none; background: var(--pf-yuzey-2); color: var(--pf-metin);
  font: 750 16px/1 var(--pf-mono);
}
.pf-tutar-girdi > span {
  flex: 0 0 auto; width: 44px; height: 46px; display: grid; place-items: center;
  font: 750 15px/1 var(--pf-font); color: var(--pf-metin-3);
  background: var(--pf-yuzey-3); border-left: 1px solid var(--pf-cizgi);
}
.pf-ipucu { display: block; font-size: 11px; color: var(--pf-metin-3); }

.pf-ozet-satir {
  margin-bottom: var(--pf-3); font-size: 12px; color: var(--pf-metin-3);
}
.pf-ozet-satir b { color: var(--pf-metin); font-size: 14px; }
.pf-baglanti-btn {
  margin-left: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 var(--pf-font); color: var(--pf-primary-2); text-decoration: underline;
}

.pf-yontem-liste { display: grid; gap: 7px; }
.pf-yontem {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-2); color: var(--pf-metin);
  transition: border-color var(--pf-hiz) ease-out, background var(--pf-hiz) ease-out;
}
.pf-yontem:hover { border-color: var(--pf-primary); background: var(--pf-yuzey-1); }
.pf-yontem.onerilen { border-color: rgba(var(--pf-primary-rgb), .45); }
.pf-yontem-ikon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--pf-r-btn);
  display: grid; place-items: center; font-size: 17px;
  color: var(--pf-primary); background: rgba(var(--pf-primary-rgb), .12);
}
.pf-yontem-metin { flex: 1 1 auto; min-width: 0; }
.pf-yontem-metin b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.pf-yontem-metin b em { font-style: normal; }
.pf-yontem-metin small { display: block; font-size: 11px; color: var(--pf-metin-3); }
.pf-yontem-ok { flex: 0 0 auto; color: var(--pf-metin-3); }

/* Havale hesapları */
.pf-hesap {
  display: grid; gap: 6px; margin-bottom: var(--pf-2); padding: 11px 12px;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn); background: var(--pf-yuzey-2);
}
.pf-hesap-ust { font-size: 11px; color: var(--pf-metin-3); }
.pf-hesap-no {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 10px; cursor: pointer; text-align: left;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-1); color: var(--pf-metin);
}
.pf-hesap-no code {
  font: 700 13px/1.4 var(--pf-mono); letter-spacing: .03em; color: inherit; word-break: break-all;
}
.pf-hesap-no i { flex: 0 0 auto; color: var(--pf-metin-3); }
.pf-hesap-no:hover { border-color: var(--pf-primary); }
.pf-hesap-no.kopyalandi { border-color: var(--pf-success); color: var(--pf-success); }
.pf-hesap-no.kopyalandi i::before { content: "\f26e"; }

/* Tablo */
.pf-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pf-tablo th {
  padding: 7px 6px; text-align: left; border-bottom: 1px solid var(--pf-cizgi);
  font: 600 10px/1.4 var(--pf-font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--pf-metin-3);
}
.pf-tablo td { padding: 10px 6px; border-bottom: 1px solid var(--pf-cizgi); }
.pf-tablo tr:last-child td { border-bottom: 0; }
.pf-tablo .sag { text-align: right; }
.pf-durum {
  display: inline-block; padding: 2px 8px; border-radius: var(--pf-r-pill);
  font: 700 11px/1.5 var(--pf-font);
}
.pf-durum.ok    { color: var(--pf-success); background: rgba(95, 209, 106, .13); }
.pf-durum.bekle { color: var(--pf-warning); background: rgba(240, 180, 41, .13); }
.pf-durum.hata  { color: var(--pf-danger);  background: rgba(240, 80, 60, .13); }

/* Güven kartları + akış */
.pf-guven-izgara {
  display: grid; gap: var(--pf-2); margin-top: var(--pf-4);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.pf-guven-kart {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-guven-kart > i {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--pf-r-btn);
  display: grid; place-items: center; font-size: 15px;
  color: var(--pf-primary); background: rgba(var(--pf-primary-rgb), .12);
}
.pf-guven-kart b { display: block; font-size: 12.5px; font-weight: 650; }
.pf-guven-kart span { display: block; font-size: 11px; color: var(--pf-metin-3); }

.pf-panel {
  margin-top: var(--pf-4); overflow: hidden;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-panel-bas {
  display: flex; align-items: center; gap: 7px;
  padding: 10px var(--pf-4); border-bottom: 1px solid var(--pf-cizgi);
  background: var(--pf-yuzey-2); font: 700 12px/1 var(--pf-font);
}
.pf-panel-bas i { color: var(--pf-primary); }
.pf-panel-govde { padding: var(--pf-4); }
.pf-akis-liste { display: grid; }
.pf-akis-satir {
  display: flex; align-items: center; gap: 9px;
  padding: 9px var(--pf-4); border-top: 1px solid var(--pf-cizgi); font-size: 12.5px;
}
.pf-akis-satir:first-child { border-top: 0; }
.pf-akis-satir b { flex: 1 1 auto; min-width: 0; font-weight: 650; }
.pf-akis-satir em {
  font-style: normal; font-weight: 750; color: var(--pf-success);
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
   DUYARLILIK — liste + cüzdan
   =================================================================== */
@media (max-width: 991.98px) {
  .pf-liste-duzen { grid-template-columns: 1fr; }
  .pf-filtre-ac { display: inline-flex; }

  /* Filtre paneli alttan açılan çekmeceye döner */
  .pf-filtre {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1060;
    max-height: 86vh; overflow-y: auto;
    border-radius: var(--pf-r-lg) var(--pf-r-lg) 0 0;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(.32, .72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pf-filtre.acik { transform: none; }
  .pf-filtre-bas { position: sticky; top: 0; z-index: 2; }
  .pf-filtre-kapat { display: grid; }
  .pf-filtre-alt {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--pf-yuzey-1); border-top: 1px solid var(--pf-cizgi);
  }
}

@media (max-width: 767.98px) {
  .pf-liste-bas h1 { font-size: 18px; }
  .pf-arac-cubugu { gap: var(--pf-2); }
  .pf-sirala { margin-left: 0; width: 100%; }
  .pf-sirala .pf-sec { flex: 1 1 auto; }
  .pf-cuzdan-bas { gap: var(--pf-3); }
  .pf-cuzdan-kart { flex: 1 1 100%; min-width: 0; }
  .pf-cuzdan-kart b { font-size: 24px; }
}

@media (max-width: 575.98px) {
  .pf-mag-dizin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-mag-git { display: none; }
  .pf-adimlar li { padding: 7px 8px; font-size: 11px; }
  .pf-tutar-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-tablo { font-size: 12px; }
}

/* -------------------------------------------------------------------
   Detay ana görseli: kırpma yok
   İlan ve ürün görselleri kullanıcı yüklemesi olduğu için oranları
   değişken (16:9'dan 9:16'ya). "cover" görselin bir kısmını kesiyordu;
   "contain" ile tamamı görünür, oluşan boşluğu aynı görselin bulanık
   kopyası doldurur (letterbox çubukları boş kalmasın).
   ------------------------------------------------------------------- */
.pf-gorsel-tam > img:not(.pf-gorsel-fon) {
  object-fit: contain;
  z-index: 1;
}
.pf-gorsel-fon {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(22px) saturate(1.2);
  transform: scale(1.15);          /* blur kenar sızıntısını gizler */
  opacity: .45;
  pointer-events: none;
}
[data-bs-theme="light"] .pf-gorsel-fon { opacity: .3; }
/* Rozet çerçevesi bulanık fonun üstünde kalmalı */
.pf-gorsel-tam .pf-rozet-cerceve { z-index: 2; }

/* ===================================================================
   KATEGORİ (oyun) SAYFASI
   Üstte oyun kimliği (banner + logo + sayaçlar), altında filtre + ızgara
   =================================================================== */
.pf-oyun-bas {
  position: relative; overflow: hidden; margin-bottom: var(--pf-4);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-oyun-banner {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .28; filter: saturate(1.1);
}
.pf-oyun-bas.bannerli::after {
  /* Banner üstündeki metin her görselde okunur kalsın */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--pf-yuzey-1) 12%,
              color-mix(in srgb, var(--pf-yuzey-1) 72%, transparent) 55%,
              color-mix(in srgb, var(--pf-yuzey-1) 40%, transparent));
}
.pf-oyun-bas-ic {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-4);
  padding: var(--pf-4) var(--pf-5);
}
.pf-oyun-logo {
  position: relative; flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden;
  display: grid; place-items: center; border-radius: var(--pf-r-card); font-size: 26px;
  color: var(--pf-primary); background: rgba(var(--pf-primary-rgb), .14);
  border: 1px solid var(--pf-cizgi);
}
.pf-oyun-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-oyun-metin { flex: 1 1 240px; min-width: 0; }
.pf-oyun-metin h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pf-oyun-metin p { margin: 4px 0 0; font-size: 12px; color: var(--pf-metin-2); }
.pf-oyun-sayac { display: flex; gap: var(--pf-2); flex: 0 0 auto; }
.pf-oyun-sayac > span {
  min-width: 74px; padding: 8px 10px; text-align: center;
  border-radius: var(--pf-r-btn);
  background: color-mix(in srgb, var(--pf-yuzey-2) 82%, transparent);
  border: 1px solid var(--pf-cizgi);
}
.pf-oyun-sayac b {
  display: block; font: 800 17px/1.1 var(--pf-font);
  font-variant-numeric: tabular-nums; color: var(--pf-metin);
}
.pf-oyun-sayac small {
  display: block; margin-top: 2px;
  font: 600 10px/1 var(--pf-font); letter-spacing: .05em; text-transform: uppercase;
  color: var(--pf-metin-3);
}

.pf-liste-baslik { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

/* --- SEO metni (katlanır) --- */
.pf-seo {
  margin-top: var(--pf-6); padding: var(--pf-4) var(--pf-5);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-seo > h2 { margin: 0 0 var(--pf-2); font-size: 15px; font-weight: 700; }
.pf-seo-metin {
  position: relative; max-height: 108px; overflow: hidden;
  font-size: 13px; line-height: 1.75; color: var(--pf-metin-2);
}
.pf-seo-metin::after {
  /* Kesilen metnin bittiği yer belli olsun */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(transparent, var(--pf-yuzey-1));
  pointer-events: none;
}
.pf-seo-metin.acik { max-height: none; }
.pf-seo-metin.acik::after { display: none; }
.pf-seo .pf-baglanti-btn { margin: var(--pf-2) 0 0; }

@media (max-width: 767.98px) {
  .pf-oyun-bas-ic { padding: var(--pf-3) var(--pf-4); gap: var(--pf-3); }
  .pf-oyun-logo { width: 52px; height: 52px; font-size: 22px; }
  .pf-oyun-metin h1 { font-size: 19px; }
  .pf-oyun-sayac { width: 100%; }
  .pf-oyun-sayac > span { flex: 1 1 0; min-width: 0; }
  .pf-oyun-bas.bannerli::after {
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--pf-yuzey-1) 55%, transparent),
                var(--pf-yuzey-1) 85%);
  }
}

/* PINFORGE kendi alt tab barını (pf-tabbar) basıyor; ortak katmanın
   mobil navigasyonu da görünürse mobilde iki alt bar üst üste geliyordu. */
body[data-tema="pinforge"] .em-bottomnav { display: none !important; }

/* ===================================================================
   SEPET
   Sol %65 satırlar · sağ %35 yapışkan özet · mobilde alt sabit çubuk
   =================================================================== */
.pf-sepet-duzen {
  display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  gap: var(--pf-4); align-items: start;
}
.pf-sepet-sol { min-width: 0; display: grid; gap: var(--pf-2); }

.pf-sepet-satir {
  display: grid; align-items: center; gap: var(--pf-3);
  grid-template-columns: 72px minmax(0, 1fr) auto auto 34px;
  padding: var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  transition: border-color var(--pf-hiz) ease-out;
}
.pf-sepet-satir:hover { border-color: var(--pf-cizgi-guclu); }
.pf-sepet-gorsel {
  position: relative; display: block; width: 72px; height: 60px; overflow: hidden;
  border-radius: var(--pf-r-btn); background: var(--pf-yuzey-2);
}
/* Sepette ürünün tamamı görünsün — kırpma yok */
.pf-sepet-gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.pf-sepet-bilgi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-sepet-ad {
  font: 650 13px/1.35 var(--pf-font); color: var(--pf-metin); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-sepet-ad:hover { color: var(--pf-primary-2); }
.pf-sepet-meta { font-size: 11px; color: var(--pf-metin-3); }
.pf-sepet-meta em { font-style: normal; }
.pf-stok-var { color: var(--pf-success); }
.pf-stok-manuel { color: var(--pf-warning); }

.pf-sepet-adet {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn); overflow: hidden;
}
.pf-sepet-adet button {
  width: 30px; height: 34px; border: 0; cursor: pointer;
  font-size: 15px; color: var(--pf-metin); background: var(--pf-yuzey-2);
}
.pf-sepet-adet button:hover { color: var(--pf-primary); }
.pf-sepet-adet input {
  width: 44px; height: 34px; border: 0; outline: none; text-align: center;
  background: var(--pf-yuzey-1); color: var(--pf-metin);
  font: 700 13px/1 var(--pf-mono); -moz-appearance: textfield;
}
.pf-sepet-adet input::-webkit-outer-spin-button,
.pf-sepet-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pf-sepet-tutar {
  min-width: 88px; text-align: right; font-size: 14px; font-weight: 750;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pf-sepet-sil {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn); cursor: pointer;
  background: transparent; color: var(--pf-metin-3); font-size: 13px;
  transition: color var(--pf-hiz) ease-out, border-color var(--pf-hiz) ease-out;
}
.pf-sepet-sil:hover { color: var(--pf-danger); border-color: var(--pf-danger); }

.pf-sepet-arac {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pf-3); margin-top: var(--pf-2);
}
/* Adet değişti ama kaydedilmedi — buton dikkat çeksin */
.pf-degisti {
  border-color: var(--pf-warning) !important; color: var(--pf-warning) !important;
}

/* --- Sipariş özeti --- */
.pf-ozet {
  position: sticky; top: 60px; overflow: hidden;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-ozet-bas {
  display: flex; align-items: center; gap: 7px;
  padding: 11px var(--pf-4); border-bottom: 1px solid var(--pf-cizgi);
  background: var(--pf-yuzey-2); font: 700 13px/1 var(--pf-font);
}
.pf-ozet-bas i { color: var(--pf-primary); }
.pf-ozet-govde { display: grid; gap: var(--pf-3); padding: var(--pf-4); }

.pf-ozet-kalem {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pf-3);
  font-size: 12.5px; color: var(--pf-metin-2);
}
.pf-ozet-kalem b { color: var(--pf-metin); font-variant-numeric: tabular-nums; }
.pf-ozet-kalem.indirim, .pf-ozet-kalem.indirim b { color: var(--pf-success); }

.pf-kupon-form { display: grid; gap: 5px; }
.pf-kupon-satir { display: flex; gap: 6px; }
.pf-kupon-satir .pf-girdi { text-transform: uppercase; letter-spacing: .04em; }
.pf-kupon-satir .pf-btn { flex: 0 0 auto; }
.pf-kupon-aktif {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 11px; border-radius: var(--pf-r-btn);
  background: rgba(95, 209, 106, .1); border: 1px solid rgba(95, 209, 106, .3);
  font-size: 12px; color: var(--pf-success);
}
.pf-kupon-aktif button {
  width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: var(--pf-r-btn); cursor: pointer;
  background: transparent; color: var(--pf-success); font-size: 11px;
}
.pf-kupon-aktif button:hover { background: rgba(95, 209, 106, .18); }

.pf-ozet-toplam {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pf-3);
  padding-top: var(--pf-3); border-top: 1px solid var(--pf-cizgi);
  font: 600 13px/1 var(--pf-font);
}
.pf-ozet-toplam b {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.pf-ozet-bakiye {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; border-radius: var(--pf-r-btn); font-size: 12px;
}
.pf-ozet-bakiye i { font-size: 14px; flex: 0 0 auto; margin-top: 1px; }
.pf-ozet-bakiye.yeterli  { color: var(--pf-success); background: rgba(95, 209, 106, .1); }
.pf-ozet-bakiye.yetersiz { color: var(--pf-warning); background: rgba(240, 180, 41, .1); }
.pf-ozet-bakiye span { color: var(--pf-metin-2); }
.pf-ozet-bakiye b { color: var(--pf-metin); font-variant-numeric: tabular-nums; }

/* --- Mobil sabit özet çubuğu --- */
.pf-sepet-mobil {
  display: none; position: fixed; left: 0; right: 0; z-index: 1035;
  bottom: calc(64px + env(safe-area-inset-bottom));   /* tab barın üstünde */
  align-items: center; justify-content: space-between; gap: var(--pf-3);
  padding: 10px var(--pf-4);
  background: color-mix(in srgb, var(--pf-yuzey-1) 94%, transparent);
  border-top: 1px solid var(--pf-cizgi);
}
@supports (backdrop-filter: blur(12px)) { .pf-sepet-mobil { backdrop-filter: blur(12px); } }
@supports not (backdrop-filter: blur(12px)) { .pf-sepet-mobil { background: var(--pf-yuzey-1); } }
.pf-sepet-mobil > span { display: flex; flex-direction: column; }
.pf-sepet-mobil small { font-size: 10px; color: var(--pf-metin-3); }
.pf-sepet-mobil b {
  font-size: 18px; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
   FOOTER
   =================================================================== */
.pf-footer {
  margin-top: var(--pf-12);
  background: var(--pf-yuzey-1); border-top: 1px solid var(--pf-cizgi);
  padding-top: var(--pf-8);
}
.pf-footer-marka { max-width: 340px; margin-bottom: var(--pf-6); }
.pf-footer-logo { display: inline-flex; align-items: center; text-decoration: none; }
.pf-footer-logo b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--pf-metin); }
.pf-footer-marka p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--pf-metin-2); }
.pf-footer-sosyal { display: flex; gap: 7px; margin-top: var(--pf-3); }
.pf-footer-sosyal a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  color: var(--pf-metin-2); font-size: 15px; text-decoration: none;
  transition: color var(--pf-hiz) ease-out, border-color var(--pf-hiz) ease-out;
}
.pf-footer-sosyal a:hover { color: var(--pf-primary); border-color: var(--pf-primary); }

.pf-footer-izgara {
  display: grid; gap: var(--pf-5);
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  padding-bottom: var(--pf-6);
}
.pf-footer-sutun > summary {
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between;
  font: 700 11px/1 var(--pf-font); letter-spacing: .07em; text-transform: uppercase;
  color: var(--pf-metin); margin-bottom: var(--pf-3);
}
.pf-footer-sutun > summary::-webkit-details-marker { display: none; }
.pf-footer-sutun > summary i { display: none; }
.pf-footer-sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-footer-sutun a {
  font-size: 12.5px; color: var(--pf-metin-2); text-decoration: none;
  transition: color var(--pf-hiz) ease-out;
}
.pf-footer-sutun a:hover { color: var(--pf-primary-2); }
.pf-footer-kunye dl { margin: 0; display: grid; gap: 8px; }
.pf-footer-kunye dt {
  font: 600 10px/1.3 var(--pf-font); letter-spacing: .05em; text-transform: uppercase;
  color: var(--pf-metin-3);
}
.pf-footer-kunye dd { margin: 1px 0 0; font-size: 12px; color: var(--pf-metin-2); }

.pf-footer-guven {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--pf-5); padding: var(--pf-4) 0;
  border-top: 1px solid var(--pf-cizgi); border-bottom: 1px solid var(--pf-cizgi);
  font: 600 11.5px/1 var(--pf-font); color: var(--pf-metin-2);
}
.pf-footer-guven span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-footer-guven i { font-size: 14px; color: var(--pf-primary); }

.pf-footer-alt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pf-3); padding: var(--pf-4) 0;
  font-size: 11.5px; color: var(--pf-metin-3);
}
.pf-footer-odeme { display: inline-flex; gap: 10px; font-size: 16px; }
.pf-footer-imza { opacity: .75; }

/* ===================================================================
   DUYARLILIK — sepet + footer
   =================================================================== */
@media (max-width: 991.98px) {
  .pf-sepet-duzen { grid-template-columns: 1fr; }
  .pf-ozet { position: static; }
}

@media (max-width: 767.98px) {
  /* Özet altta sabit çubuğa iner; paneldeki buton gizlenmez ama
     kullanıcı listeyi kaydırırken toplam hep görünür kalır. */
  .pf-sepet-mobil { display: flex; }
  .pf-sepet-duzen { padding-bottom: 76px; }

  /* Üçüncü sütun `auto`: içeriğinin en genişine göre büyür. Önce 34px
     sabitti (sil düğmesine göre) ama aynı sütundaki tutar "1.234,56 ₺"
     34 piksele sığmayıp hücreden taşıyordu. */
  .pf-sepet-satir {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    row-gap: var(--pf-2);
  }
  .pf-sepet-gorsel { width: 60px; height: 52px; }
  .pf-sepet-adet { grid-column: 2; grid-row: 2; justify-self: start; }
  .pf-sepet-tutar {
    grid-column: 3; grid-row: 2;
    justify-self: end; white-space: nowrap;
  }
  .pf-sepet-sil { grid-column: 3; grid-row: 1; justify-self: end; }

  /* Footer sütunları akordiyona döner */
  .pf-footer-izgara { grid-template-columns: 1fr; gap: 0; }
  .pf-footer-sutun { border-bottom: 1px solid var(--pf-cizgi); }
  .pf-footer-sutun > summary {
    cursor: pointer; user-select: none; min-height: 44px; margin: 0; padding: 12px 0;
  }
  .pf-footer-sutun > summary i {
    display: block; font-size: 12px; color: var(--pf-metin-3);
    transition: transform 160ms ease-out;
  }
  .pf-footer-sutun[open] > summary i { transform: rotate(180deg); }
  .pf-footer-sutun ul, .pf-footer-kunye dl { padding-bottom: var(--pf-4); }
  .pf-footer-guven { gap: var(--pf-3); justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .pf-footer-alt { justify-content: center; text-align: center; }
}

@media (max-width: 575.98px) {
  .pf-sepet-adet button { width: 34px; height: 36px; }
  .pf-sepet-adet input { width: 40px; height: 36px; }
  .pf-ozet-toplam b { font-size: 19px; }
}

/* Kapalı modül uyarısı (yalnızca yönetici görür) */
.pf-modul-uyari {
  background: rgba(240, 180, 41, .12);
  border-bottom: 1px solid rgba(240, 180, 41, .35);
  font-size: 12px;
}
.pf-modul-uyari .pf-kap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 8px; padding-bottom: 8px;
}
.pf-modul-uyari i { color: var(--pf-warning); font-size: 14px; flex: 0 0 auto; }
.pf-modul-uyari span { flex: 1 1 auto; min-width: 0; color: var(--pf-metin-2); }
.pf-modul-uyari a {
  flex: 0 0 auto; padding: 3px 9px; border-radius: var(--pf-r-btn);
  font-weight: 700; text-decoration: none;
  color: var(--pf-warning); border: 1px solid rgba(240, 180, 41, .45);
}
.pf-modul-uyari a:hover { color: #241800; background: var(--pf-warning); }

/* Havale hesabındaki banka logosu (banka.bank sütunu logo yolunu tutar) */
.pf-banka-logo {
  height: 16px; width: auto; max-width: 60px; object-fit: contain;
  vertical-align: -3px; margin-right: 2px;
}

/* ===================================================================
   ROZET — DAR KART DAVRANIŞI
   Kart görseli ızgarada 144–162px'e kadar iniyor; alt köşelerdeki iki
   rozetin metni (42px) + ikon + dolgu yarım yuvaya (≈65px) sığmayıp
   "EDİ… / An…" gibi okunamaz hâle geliyordu. Dar kartta alt rozetler
   yalnız ikona düşer; anlam aria-label ve title ile korunur.
   =================================================================== */
.pf-urun-gorsel { container-type: inline-size; }

@container (max-width: 230px) {
  .pf-yuva-sol-alt .pf-rozet > span,
  .pf-yuva-sag-alt .pf-rozet > span { display: none; }
  .pf-yuva-sol-alt .pf-rozet,
  .pf-yuva-sag-alt .pf-rozet { padding: 4px; gap: 0; }
  .pf-yuva-sol-alt .pf-rozet i,
  .pf-yuva-sag-alt .pf-rozet i { font-size: 12px; }
  /* İkona düşen rozet dar yuvaya sığdığı için yarım genişlik sınırı gerekmez */
  .pf-yuva-sol-alt, .pf-yuva-sag-alt { max-width: none; }
}

/* Container query desteklenmeyen tarayıcılarda güvenli yedek:
   ızgara kartı her hâlükârda dar olduğu için aynı davranış uygulanır. */
@supports not (container-type: inline-size) {
  .pf-urun-izgara .pf-yuva-sol-alt .pf-rozet > span,
  .pf-urun-izgara .pf-yuva-sag-alt .pf-rozet > span { display: none; }
  .pf-urun-izgara .pf-yuva-sol-alt .pf-rozet,
  .pf-urun-izgara .pf-yuva-sag-alt .pf-rozet { padding: 4px; gap: 0; }
}

/* ===================================================================
   DETAY GÖRSELİ (ürün + ilan) — SABİT kutu + kırpma

   İki denemeden sonra son hâli:
   1) Kutu 1/1 sabitti, görsel `contain` idi → 16:9 görselde 193px boşluk.
   2) Kutu görselin oranını aldı → boşluk bitti ama galeriden başka bir
      görsele geçince kutu boyu değişiyordu (316px ↔ 442px), sayfa zıplıyordu.
   3) Şimdi: kutu SABİT oranlı, görsel `cover` ile kırpılıyor.
      Ne boşluk kalıyor ne de kutu boy değiştiriyor — inovapin'in yaptığı da bu.
      Kırpılan kısım kaybolmasın diye görsele tıklayınca tam hâli açılır.
   =================================================================== */
/* inovapin modeli: kutu SABİT oranlı, görsel `contain` ile tam görünür,
   arta kalan alanı düz gri değil KOYU GRADYAN dolduruyor. Boşluk böylece
   "eksik alan" gibi değil, çerçeve gibi okunuyor. Üstte başlık ve sayaç
   hapları, altta eylem şeridi var. */
.pf-detay-gorsel.pf-gorsel-tam {
  aspect-ratio: 4 / 3;             /* her görselde aynı kutu — boy değişmez */
  /* max-width YOK: 560px'e kisitliyken sol sutun 704px oldugu icin sagda
     144px olu alan kaliyordu. inovapin'de de galeri sutunun tamamini kaplar. */
  width: 100%;
  min-height: 0;
  display: block;
  cursor: zoom-in;
  background: linear-gradient(126deg, #2c2f36 0%, #121212 100%);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
[data-bs-theme="light"] .pf-detay-gorsel.pf-gorsel-tam {
  background: linear-gradient(126deg, #e9ecf1 0%, #cdd3dd 100%);
}
.pf-gorsel-tam > img:not(.pf-gorsel-fon) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;             /* kırpma yok, görselin tamamı görünür */
}
/* Gradyan zemin bulanık kopyanın işini görüyor; ikisi birden gürültü olurdu. */
.pf-gorsel-tam .pf-gorsel-fon { display: none; }

/* Başlık ve sayaç hapları (inovapin: .ilan-gallery-title / .slide-counter) */
.pf-gorsel-etiket, .pf-gorsel-sayac {
  position: absolute; top: 10px; z-index: 3;
  height: 22px; padding: 0 10px;
  display: inline-flex; align-items: center;
  background: rgba(51, 55, 75, .77);
  border: 1px solid rgba(140, 148, 180, .55);
  border-radius: var(--pf-r-pill);
  font-size: 12px; font-weight: 600; color: #e6e8ee;
  backdrop-filter: blur(4px);
}
.pf-gorsel-etiket {
  left: 10px; max-width: calc(100% - 78px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-gorsel-sayac { right: 10px; justify-content: center; font-variant-numeric: tabular-nums; }

/* Alt eylem şeridi (inovapin: .ilan-action-buttons) */
.pf-gorsel-eylem {
  display: flex; align-items: stretch;
  /* Görsel kutusuyla aynı genişlikte — ikisi de sütunu doldurur. */
  width: 100%;
  background: linear-gradient(126deg, #2c2f36 0%, #121212 100%);
  border: 1px solid var(--pf-cizgi); border-top: 0;
  border-radius: 0 0 var(--pf-r-card) var(--pf-r-card);
  overflow: hidden;
}
[data-bs-theme="light"] .pf-gorsel-eylem {
  background: linear-gradient(126deg, #e9ecf1 0%, #cdd3dd 100%);
}
.pf-gorsel-eylem > * { flex: 1 1 0; min-width: 0; }
.pf-gorsel-eylem button, .pf-gorsel-eylem .pf-gorsel-eylem-btn {
  width: 100%; height: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--pf-metin-2);
  transition: color var(--pf-hiz), background var(--pf-hiz);
}
.pf-gorsel-eylem button:hover, .pf-gorsel-eylem .pf-gorsel-eylem-btn:hover {
  color: var(--pf-metin); background: rgba(255, 255, 255, .06);
}
[data-bs-theme="light"] .pf-gorsel-eylem button:hover { background: rgba(0, 0, 0, .05); }
.pf-gorsel-eylem > * + * { border-left: 1px solid var(--pf-cizgi); }
.pf-gorsel-eylem .dolu { color: var(--pf-danger); }

/* Paylaş menüsü */
.pf-paylas { position: relative; }
.pf-paylas-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20;
  min-width: 170px; padding: 4px;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-btn); box-shadow: var(--pf-sh-2);
}
.pf-paylas-menu[hidden] { display: none; }
.pf-paylas-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--pf-r-btn);
  font-size: 13px; color: var(--pf-metin-2);
}
.pf-paylas-menu a:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }

/* Tam görsel için büyütme katmanı (JS ile eklenir) */
.pf-buyut {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pf-5);
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
}
.pf-buyut img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--pf-r-card);
}
.pf-buyut-kapat {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 0; border-radius: 50%; font-size: 18px; cursor: pointer;
}
.pf-buyut-kapat:hover { background: rgba(255, 255, 255, .22); }
/* Kırpıldığını ve büyütülebileceğini belli eden küçük ipucu */
.pf-gorsel-tam::after {
  content: '\F1BC';                /* bi-zoom-in */
  font-family: 'bootstrap-icons'; font-size: 14px;
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff; border-radius: 50%;
  opacity: 0; transition: opacity var(--pf-hiz);
  pointer-events: none;
}
.pf-gorsel-tam:hover::after { opacity: 1; }

@media (max-width: 991.98px) {
  .pf-detay-gorsel.pf-gorsel-tam,
  .pf-gorsel-eylem { max-width: none; }
  /* dar ekranda daha az dikey yer kaplasin */
  .pf-detay-gorsel.pf-gorsel-tam { aspect-ratio: 16 / 10; }
}

/* ===================================================================
   POPÜLER OYUNLAR — 2:3 poster ızgarası
   (cyber-epin'in poster kartı PINFORGE diline uyarlandı)
   =================================================================== */
.pf-poster-bolum { margin-top: var(--pf-6); }
.pf-poster-izgara {
  display: grid; gap: var(--pf-3);
  grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
}
.pf-poster { display: block; text-decoration: none; color: var(--pf-metin); }
.pf-poster-gorsel {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 2 / 3; border-radius: var(--pf-r-card);
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  font-size: 28px; color: var(--pf-primary);
  transition: border-color var(--pf-hiz-kart) ease-out,
              transform var(--pf-hiz-kart) ease-out,
              box-shadow var(--pf-hiz-kart) ease-out;
}
.pf-poster-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .pf-poster:hover .pf-poster-gorsel {
    border-color: var(--pf-primary); transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(var(--pf-primary-rgb), .28);
  }
}
/* Hover'da üstten geçen parlama */
.pf-poster-parlak {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .55s ease;
}
@media (hover: hover) { .pf-poster:hover .pf-poster-parlak { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .pf-poster-parlak { display: none; } }
.pf-poster-adet {
  position: absolute; left: 6px; bottom: 6px; z-index: 3;
  padding: 2px 7px; border-radius: var(--pf-r-pill);
  font: 700 10px/1.5 var(--pf-font); color: #fff;
  background: rgba(0, 0, 0, .68);
}
.pf-poster-ad {
  display: block; margin-top: 7px; text-align: center;
  font: 650 12px/1.35 var(--pf-font);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===================================================================
   ÜRÜN DETAY — üç sütun (görsel · künye · satın alma)
   Görsel kutusu sınırlanınca sol sütunun kalanı boş kalıyordu; başlık ve
   künye o boşluğa taşındı, sekmeler alta tam genişliğe alındı.
   =================================================================== */
/* Üç sütunlu düzen YALNIZCA ürün detayına aittir (.uc değiştiricisi).
   İlan detayı iki sütunlu temel düzeni kullanmaya devam eder; sınıf adına
   göre koşulsuz uygulanınca ilan sayfasının sol sütunu 380px'e sıkışıyordu. */
.pf-detay-duzen.uc {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr) minmax(0, 330px);
  align-items: start;
}
.pf-detay-duzen.uc .pf-detay-gorsel { max-width: none; max-height: none; }

.pf-detay-orta { min-width: 0; display: flex; flex-direction: column; gap: var(--pf-3); }
.pf-detay-orta h1 {
  margin: -4px 0 0; font-size: 24px; font-weight: 750;
  letter-spacing: -.02em; line-height: 1.25;
}
.pf-detay-ozet { margin: 0; font-size: 13px; line-height: 1.7; color: var(--pf-metin-2); }
.pf-detay-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; color: var(--pf-metin-3);
}
.pf-detay-meta b { color: var(--pf-metin); font-size: 13px; }
.pf-detay-meta .pf-yildiz { font-size: 12px; }

.pf-kunye-izgara {
  display: grid; gap: var(--pf-2);
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
}
.pf-kunye {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-kunye > i {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--pf-r-btn);
  display: grid; place-items: center; font-size: 15px;
  color: var(--pf-primary); background: rgba(var(--pf-primary-rgb), .12);
}
.pf-kunye > div { min-width: 0; }
.pf-kunye small {
  display: block; font: 600 10px/1.3 var(--pf-font);
  letter-spacing: .06em; text-transform: uppercase; color: var(--pf-metin-3);
}
.pf-kunye b {
  display: block; font-size: 12.5px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-detay-atla {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  font: 600 12px/1 var(--pf-font); color: var(--pf-primary-2); text-decoration: none;
}
.pf-detay-atla:hover { text-decoration: underline; }

/* Sağ panel artık başlık taşımıyor — sadece fiyat/işlem */
.pf-detay-duzen .pf-satinal { gap: var(--pf-3); }
.pf-detay-duzen .pf-satinal-fiyat { padding-bottom: var(--pf-3); }

/* Sekme bloğu düzenin içinde yaşar; varsayılan olarak tüm sütunları kaplar
   (geniş ekranda aşağıdaki grid-area kuralı bunu ezip panelin yanına çeker). */
.pf-detay-alt {
  grid-column: 1 / -1;
  margin-top: var(--pf-4); display: grid; gap: var(--pf-4);
}

@media (max-width: 1199.98px) {
  /* Künye sütunu daralınca satın alma panelini alta al */
  .pf-detay-duzen.uc { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .pf-detay-duzen.uc .pf-satinal { grid-column: 1 / -1; position: static; }
}
@media (max-width: 767.98px) {
  .pf-detay-duzen.uc { grid-template-columns: 1fr; }
  .pf-detay-orta h1 { font-size: 19px; }
  .pf-kunye-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-poster-izgara { grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr)); gap: var(--pf-2); }
}

/* ===================================================================
   YATAY KAYDIRMA ÇUBUKLARI GİZLENİR
   Şeritler zaten sürükleyerek/dokunarak kaydırılıyor; görünen çubuk
   tasarımı bölüyordu. Kaydırma işlevi korunur, yalnızca çubuk gizlenir.
   (Canlı akış şeridi "hareketi azalt" tercihinde otomatik kaymayı
   bırakıp kaydırılabilir hâle geçtiği için çubuk orada da çıkıyordu.)
   =================================================================== */
.pf-akis-pencere,
.pf-guven-serit,
.pf-footer-guven,
.pf-story-serit,
.pf-oyun-serit,
.pf-galeri,
.pf-sekme-bar,
.pf-katbar-linkler,
.pf-mag-serit,
.pf-poster-izgara {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* eski Edge */
}
.pf-akis-pencere::-webkit-scrollbar,
.pf-guven-serit::-webkit-scrollbar,
.pf-footer-guven::-webkit-scrollbar,
.pf-story-serit::-webkit-scrollbar,
.pf-oyun-serit::-webkit-scrollbar,
.pf-galeri::-webkit-scrollbar,
.pf-sekme-bar::-webkit-scrollbar,
.pf-katbar-linkler::-webkit-scrollbar,
.pf-mag-serit::-webkit-scrollbar,
.pf-poster-izgara::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ===================================================================
   ÜRÜN DETAY — sağ panel yüksek kalınca oluşan boşluk
   Satın alma paneli görsel+künyeden uzun olduğunda satır onun boyuna
   uzuyor ve solda kocaman boşluk kalıyordu. Sekmeler o boşluğa çekilir;
   panel iki satır boyunca sağda durur.
   =================================================================== */
@media (min-width: 1200px) {
  .pf-detay-duzen.uc {
    grid-template-areas:
      "gorsel orta  panel"
      "alt    alt   panel";
    grid-template-rows: auto 1fr;
  }
  .pf-detay-duzen.uc .pf-detay-gorsel { grid-area: gorsel; }
  .pf-detay-duzen.uc .pf-detay-orta   { grid-area: orta; }
  .pf-detay-duzen.uc .pf-satinal      { grid-area: panel; }
  .pf-detay-duzen.uc .pf-detay-alt {
    grid-area: alt; margin-top: 0;
    /* Satır boşluğu grid gap'ten geliyor, ek üst boşluk gerekmez */
  }
}

/* Katalog üstündeki oyun şeridi — seçili çip vurgulanır */
.pf-katalog-serit { margin-bottom: var(--pf-4); }
.pf-oyun-cip.secili {
  border-color: var(--pf-primary);
  background: rgba(var(--pf-primary-rgb), .12);
}
.pf-oyun-cip.secili .pf-oyun-cip-ad { color: var(--pf-primary-2); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   ÇEKİLİŞLER — liste sayfası
   Kart ölçüleri inovapin.com/cekilisler'den alındı: 284px kart, 10px
   boşluk, 85px düzenleyen şeridi, 4 kutulu geri sayım.
   ═══════════════════════════════════════════════════════════════════ */

.pf-cekilis-sayfa { padding-block: var(--pf-6) var(--pf-10); }

.pf-cek-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-3); flex-wrap: wrap; margin-bottom: var(--pf-5);
}
.pf-cek-h1 {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: var(--pf-2);
}
.pf-cek-h1 > i { color: var(--pf-gold); }

/* ── Filtre barı ─────────────────────────────────────────────────────── */
.pf-cek-filtre {
  display: grid; gap: var(--pf-3); margin-bottom: var(--pf-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); padding: var(--pf-4);
}
.pf-cek-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-cek-f label {
  font-size: 12px; font-weight: 600; color: var(--pf-metin-2);
}
.pf-cek-f input, .pf-cek-f select {
  width: 100%; min-width: 0; height: 38px; padding: 0 10px;
  background: var(--pf-yuzey-2); color: var(--pf-metin);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  font: inherit; font-size: 13px;
}
.pf-cek-f input:focus, .pf-cek-f select:focus {
  outline: 0; border-color: var(--pf-primary); box-shadow: var(--pf-sh-odak);
}
.pf-cek-f-btn { display: flex; flex-direction: column; gap: 6px; }
.pf-cek-f-btn .pf-btn { height: 38px; justify-content: center; }
.pf-cek-temizle {
  font-size: 12px; color: var(--pf-metin-3); text-align: center;
}
.pf-cek-temizle:hover { color: var(--pf-metin); }

/* ── Kart ızgarası ───────────────────────────────────────────────────── */
.pf-cek-liste {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.pf-cek {
  display: flex; flex-direction: column;
  background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  overflow: hidden;
  transition: border-color var(--pf-hiz), transform var(--pf-hiz-kart),
              box-shadow var(--pf-hiz-kart);
}
.pf-cek:hover {
  border-color: var(--pf-cizgi-guclu);
  transform: translateY(-3px);
  box-shadow: var(--pf-sh-2);
}
.pf-cek.bitti { opacity: .82; }

/* 1 — düzenleyen şeridi */
.pf-cek-sahip-alan { position: relative; height: 85px; flex: 0 0 auto; }
.pf-cek-sahip-bg {
  position: absolute; inset: 0;
  background: var(--pf-yuzey-3) center / cover no-repeat;
}
/* Arka plan görseli üstündeki metin her görselde okunur kalsın */
.pf-cek-sahip-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.78) 100%);
}
.pf-cek-sahip {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-2); padding: 0 10px 10px;
}
.pf-cek-sahip-kisi { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-cek-sahip-kisi img, .pf-cek-sahip-harf {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--pf-r-btn); object-fit: cover;
  border: 1px solid rgba(255,255,255,.28);
}
.pf-cek-sahip-harf {
  display: grid; place-items: center;
  background: var(--pf-primary-dolu); color: #fff;
  font-size: 15px; font-weight: 700;
}
.pf-cek-sahip-ad { min-width: 0; line-height: 1.25; }
.pf-cek-sahip-ad b {
  display: block; font-size: 13px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-cek-sahip-ad small { font-size: 11px; color: rgba(255,255,255,.75); }

.pf-cek-rozet {
  flex: 0 0 auto; padding: 3px 8px; border-radius: var(--pf-r-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.pf-cek-rozet.ucretsiz { background: var(--pf-success); color: #04150c; }
.pf-cek-rozet.biletli  { background: var(--pf-gold);    color: #241a00; }

/* 2 — başlık */
.pf-cek-govde { padding: 10px; flex: 1 1 auto; display: flex; flex-direction: column; }
.pf-cek-baslik {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; line-height: 1.35;
  text-align: center; min-height: 38px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* 3 — üç sayı */
.pf-cek-sayilar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; margin-bottom: 10px;
}
.pf-cek-sayi {
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-btn); padding: 6px 4px; text-align: center;
  min-width: 0;
}
.pf-cek-sayi span {
  display: block; font-size: 11px; color: var(--pf-metin-3); line-height: 1.3;
}
.pf-cek-sayi b {
  display: block; font-size: 13px; font-weight: 700; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 4 — ödül şeridi */
.pf-cek-oduller {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 6px;
  scrollbar-width: thin;
}
.pf-cek-oduller::-webkit-scrollbar { height: 4px; }
.pf-cek-oduller::-webkit-scrollbar-thumb {
  background: var(--pf-cizgi-guclu); border-radius: 4px;
}
.pf-cek-odul {
  flex: 0 0 76px; width: 76px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pf-cek-odul-adet {
  font-size: 10px; font-weight: 700; color: var(--pf-primary);
}
.pf-cek-odul img, .pf-cek-odul-bakiye {
  width: 56px; height: 56px; border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  object-fit: contain;
}
.pf-cek-odul-bakiye {
  display: grid; place-items: center;
  font-size: 22px; color: var(--pf-gold);
}
.pf-cek-odul-ad {
  font-size: 10px; color: var(--pf-metin-2); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* 5 — geri sayım */
.pf-cek-sayac { padding: 0 10px 10px; }
.pf-cek-timer {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
}
.pf-cek-timer > div {
  background: var(--pf-bg); border: 1px solid var(--pf-primary);
  border-radius: var(--pf-r-btn); padding: 5px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0;
}
.pf-cek-timer b {
  font-size: 16px; font-weight: 800; font-family: var(--pf-mono);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pf-cek-timer span { font-size: 10px; color: var(--pf-metin-3); }
.pf-cek-doldu, .pf-cek-sonuc {
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-btn); padding: 9px 8px;
  font-size: 12px; text-align: center; color: var(--pf-metin-2);
}
.pf-cek-sonuc > i { color: var(--pf-gold); margin-right: 4px; }

/* 6 — eylem */
.pf-cek-eylem {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 10px;
}
.pf-cek-eylem .pf-btn { flex: 1 1 auto; justify-content: center; }
.pf-cek-katildim {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--pf-success);
  display: inline-flex; align-items: center; gap: 4px;
}

@media (max-width: 560px) {
  .pf-cek-liste { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .pf-cek-h1 { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   YAYINCILAR
   Düzen inovapin.com/yayincilar'dan: 216px filtre sütunu + kart ızgarası.
   Kart arka planı yayıncı görseli, üstünde koyu perde ve yuvarlak avatar.
   ═══════════════════════════════════════════════════════════════════ */

.pf-yayinci-sayfa { padding-block: var(--pf-6) var(--pf-10); }

.pf-yy-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-3); flex-wrap: wrap; margin-bottom: var(--pf-5);
}
.pf-yy-h1 {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: var(--pf-2);
}
.pf-yy-h1 > i { color: var(--pf-primary); }

.pf-yy-duzen {
  display: grid; gap: var(--pf-5);
  grid-template-columns: 216px minmax(0, 1fr);
  align-items: start;
}

/* ── Filtre sütunu ───────────────────────────────────────────────────── */
.pf-yy-filtre {
  display: flex; flex-direction: column; gap: var(--pf-3);
  position: sticky; top: var(--pf-4);
}
.pf-yy-kutu {
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); padding: var(--pf-4);
}
.pf-yy-kutu-baslik {
  font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.pf-yy-ara { position: relative; }
.pf-yy-ara > i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--pf-metin-3); pointer-events: none;
}
.pf-yy-ara input {
  width: 100%; min-width: 0; height: 36px; padding: 0 10px 0 30px;
  background: var(--pf-yuzey-2); color: var(--pf-metin);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  font: inherit; font-size: 13px;
}
.pf-yy-ara input:focus {
  outline: 0; border-color: var(--pf-primary); box-shadow: var(--pf-sh-odak);
}

.pf-yy-secim {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 8px; border-radius: var(--pf-r-btn);
  font-size: 13px; color: var(--pf-metin-2); min-width: 0;
  transition: background var(--pf-hiz), color var(--pf-hiz);
}
.pf-yy-secim + .pf-yy-secim { margin-top: 2px; }
.pf-yy-secim > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.pf-yy-secim > b {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  background: var(--pf-yuzey-3); color: var(--pf-metin-3);
  border-radius: var(--pf-r-pill); padding: 1px 7px;
}
.pf-yy-secim:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }
.pf-yy-secim.aktif { background: var(--pf-primary-dolu); color: #fff; }
.pf-yy-secim.aktif > b { background: rgba(255,255,255,.22); color: #fff; }

.pf-yy-temizle {
  font-size: 12px; color: var(--pf-metin-3); text-align: center; padding: 4px;
}
.pf-yy-temizle:hover { color: var(--pf-danger); }

/* ── Oynatıcı ────────────────────────────────────────────────────────── */
.pf-yy-oynatici-alan { margin-bottom: var(--pf-6); }
.pf-yy-oynatici {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #000; border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); overflow: hidden;
}
.pf-yy-oynatici iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.pf-yy-oynatici-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-3); flex-wrap: wrap; margin-top: var(--pf-3);
}
.pf-yy-oynatici-kisi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-yy-oynatici-kisi img, .pf-yy-oynatici-kisi .pf-yy-harf {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--pf-primary);
}
.pf-yy-oynatici-kisi b { display: block; font-size: 15px; font-weight: 700; }
.pf-yy-oynatici-kisi small { font-size: 12px; color: var(--pf-metin-3); }

.pf-yy-sayi { font-size: 12px; color: var(--pf-metin-3); }

/* ── Yayıncı kartı ───────────────────────────────────────────────────── */
.pf-yy-liste {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}
.pf-yy {
  position: relative; display: block;
  aspect-ratio: 141 / 200;          /* inovapin kart oranı */
  border-radius: var(--pf-r-card); overflow: hidden;
  border: 1px solid var(--pf-cizgi);
  transition: transform var(--pf-hiz-kart), border-color var(--pf-hiz),
              box-shadow var(--pf-hiz-kart);
}
.pf-yy:hover {
  transform: translateY(-3px);
  border-color: var(--pf-primary);
  box-shadow: var(--pf-sh-2);
}
.pf-yy.secili { border-color: var(--pf-primary); box-shadow: var(--pf-sh-odak); }

/* Arka plan kutunun DIŞINA taşmaz: ne scale() ne negatif inset kullanılır.
   İkisi de kartı programatik olarak kaydırılabilir hâle getiriyordu
   (overflow:hidden görüntüyü kırpar ama scrollLeft yine de hareket eder).
   Bulanıklığın kenarda bıraktığı soluk hâle, kutunun kendi zemin rengiyle
   aynı olduğu için görünmüyor. */
.pf-yy-bg {
  position: absolute; inset: 0;
  background: var(--pf-yuzey-3) center / cover no-repeat;
  filter: blur(6px) saturate(1.1);
}
.pf-yy-perde {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px;
  background: rgba(0, 0, 0, .6);
  text-align: center;
}
.pf-yy-avatar {
  width: 60px; height: 60px; flex: 0 0 60px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.35);
}
.pf-yy-harf {
  display: grid; place-items: center;
  background: var(--pf-primary-dolu); color: #fff;
  font-size: 24px; font-weight: 700;
}
.pf-yy-ad {
  font-size: 12px; font-weight: 600; color: #fff; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-yy-kupon {
  font-family: var(--pf-mono); font-size: 10px; font-weight: 700;
  background: var(--pf-gold); color: #241a00;
  border-radius: var(--pf-r-pill); padding: 1px 7px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Platform rozeti — inovapin'deki "CANLI" etiketiyle aynı konumda.
   Gerçek yayın durumu Twitch/Kick API'si gerektirdiği için burada
   platform gösteriliyor; uydurma "canlı" bilgisi basılmıyor. */
.pf-yy-plat {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: var(--pf-r-btn);
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px);
  max-width: calc(100% - 16px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-yy-plat.twitch  { background: #9146ff; }
.pf-yy-plat.kick    { background: #53fc18; color: #06230b; }
.pf-yy-plat.youtube { background: #ff0033; }

@media (max-width: 992px) {
  .pf-yy-duzen { grid-template-columns: minmax(0, 1fr); }
  .pf-yy-filtre { position: static; }
  /* Dar ekranda filtreler yatay şeride döner, dikey yer kaplamasın */
  .pf-yy-filtre { flex-direction: row; flex-wrap: wrap; }
  .pf-yy-kutu { flex: 1 1 220px; min-width: 0; }
}
@media (max-width: 560px) {
  .pf-yy-liste { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .pf-yy-h1 { font-size: 19px; }
  .pf-yy-filtre { flex-direction: column; }
}

/* Çekiliş kartında listeden katılım formu — buton gibi davranmalı */
.pf-cek-form { flex: 1 1 auto; min-width: 0; margin: 0; }
.pf-cek-form .pf-btn { width: 100%; justify-content: center; }

/* ── İzlerken bağış (klasgame modeli) ──────────────────────────────────
   Yayını izlerken sayfadan ayrılmadan bakiyeden bağış. Kartla ödeme için
   ayrı sayfa var; buradaki akış anında sonuçlanır.  */
.pf-yy-bagis {
  margin-top: var(--pf-3);
  padding: var(--pf-4);
  background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-yy-bagis-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--pf-3); flex-wrap: wrap; margin-bottom: var(--pf-3);
}
.pf-yy-bagis-bas b { font-size: 14px; font-weight: 700; }
.pf-yy-bagis-bas b > i { color: var(--pf-danger); margin-right: 5px; }
.pf-yy-bagis-bas small { font-size: 12px; color: var(--pf-metin-3); }

.pf-yy-bagis-hizli { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--pf-3); }
.pf-yy-tutar {
  padding: 6px 12px; border-radius: var(--pf-r-pill);
  background: var(--pf-yuzey-2); color: var(--pf-metin-2);
  border: 1px solid var(--pf-cizgi); cursor: pointer;
  font: 700 12px/1 var(--pf-font);
  transition: background var(--pf-hiz), color var(--pf-hiz), border-color var(--pf-hiz);
}
.pf-yy-tutar:hover { color: var(--pf-metin); border-color: var(--pf-cizgi-guclu); }
.pf-yy-tutar.aktif {
  background: var(--pf-primary-dolu); color: #fff; border-color: var(--pf-primary-dolu);
}

.pf-yy-bagis-satir {
  display: grid; gap: var(--pf-2);
  grid-template-columns: 120px minmax(0, 1fr) auto;
}
.pf-yy-bagis-satir input {
  width: 100%; min-width: 0; height: 40px; padding: 0 12px;
  background: var(--pf-yuzey-2); color: var(--pf-metin);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  font: inherit; font-size: 13px;
}
.pf-yy-bagis-satir input:focus {
  outline: 0; border-color: var(--pf-primary); box-shadow: var(--pf-sh-odak);
}
.pf-yy-bagis-satir .pf-btn { height: 40px; white-space: nowrap; }
.pf-yy-bagis-not { margin-top: 8px; font-size: 11px; color: var(--pf-metin-3); }

.pf-yy-bagis-giris {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: var(--pf-3); padding: 12px;
  background: var(--pf-yuzey-1); border: 1px dashed var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  font-size: 13px; font-weight: 600; color: var(--pf-metin-2);
}
.pf-yy-bagis-giris:hover { color: var(--pf-primary); border-color: var(--pf-primary); }

@media (max-width: 640px) {
  .pf-yy-bagis-satir { grid-template-columns: 1fr; }
}


/* ── Üye rozetleri (kullanıcı adı yanında satır içi) ──────────────────
   Ürün rozetlerinden ayrı: onlar görsel üzerinde durur ve zemini hep
   koyudur, sabit renk kullanabilirler. Bunlar sayfa zemininde durur ve
   zemin açık/koyu modda değişir — bu yüzden her mod için ayrı, AA
   kontrastı geçen çiftler tanımlanıyor. */
.em-uye-rozetler {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
  vertical-align: middle; margin-left: 5px;
}
.em-uye-rozet {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  font: 700 11px/1.55 var(--pf-font, inherit); white-space: nowrap;
  cursor: help;
}
.em-uye-rozet i { font-size: 11px; line-height: 1; }
.em-uye-rozet b { font-weight: 700; }

/* Koyu mod — yumuşak */
.em-uye-rozet.s-soft.r-primary { color: #8FBEFF; background: rgba(47, 127, 245, .18); }
.em-uye-rozet.s-soft.r-success { color: #8FE39A; background: rgba(95, 209, 106, .18); }
.em-uye-rozet.s-soft.r-warning { color: #F5CE72; background: rgba(240, 180, 41, .18); }
.em-uye-rozet.s-soft.r-danger  { color: #F79484; background: rgba(240, 80, 60, .18); }
.em-uye-rozet.s-soft.r-gold    { color: #EFCB87; background: rgba(224, 168, 59, .18); }
.em-uye-rozet.s-soft.r-notr    { color: #C3CAD4; background: rgba(255, 255, 255, .09); }

/* Açık modda aynı renkler 2:1'e düşüyordu; koyultuluyor. */
[data-bs-theme="light"] .em-uye-rozet.s-soft.r-primary { color: #14509C; background: rgba(33, 102, 219, .12); }
[data-bs-theme="light"] .em-uye-rozet.s-soft.r-success { color: #186024; background: rgba(35, 122, 45, .12); }
[data-bs-theme="light"] .em-uye-rozet.s-soft.r-warning { color: #7A5200; background: rgba(240, 180, 41, .18); }
[data-bs-theme="light"] .em-uye-rozet.s-soft.r-danger  { color: #A32A19; background: rgba(207, 58, 38, .12); }
[data-bs-theme="light"] .em-uye-rozet.s-soft.r-gold    { color: #7A5310; background: rgba(224, 168, 59, .18); }
[data-bs-theme="light"] .em-uye-rozet.s-soft.r-notr    { color: #414A57; background: rgba(0, 0, 0, .07); }

/* Dolu — kendi zeminini taşır, iki modda da aynı kalır */
.em-uye-rozet.s-solid.r-primary { color: #fff;    background: #2166DB; }
.em-uye-rozet.s-solid.r-success { color: #fff;    background: #237A2D; }
.em-uye-rozet.s-solid.r-warning { color: #241800; background: #F0B429; }
.em-uye-rozet.s-solid.r-danger  { color: #fff;    background: #CF3A26; }
.em-uye-rozet.s-solid.r-gold    { color: #241800; background: #E0A83B; }
.em-uye-rozet.s-solid.r-notr    { color: #fff;    background: #4A5462; }

.em-uye-rozet.s-outline { background: transparent; border: 1px solid currentColor; }
.em-uye-rozet.s-outline.r-primary { color: #5C9BFF; }
.em-uye-rozet.s-outline.r-success { color: #5FD16A; }
.em-uye-rozet.s-outline.r-warning { color: #F0B429; }
.em-uye-rozet.s-outline.r-danger  { color: #F0503C; }
.em-uye-rozet.s-outline.r-gold    { color: #E0A83B; }
.em-uye-rozet.s-outline.r-notr    { color: var(--pf-metin-2); }
[data-bs-theme="light"] .em-uye-rozet.s-outline.r-primary { color: #14509C; }
[data-bs-theme="light"] .em-uye-rozet.s-outline.r-success { color: #186024; }
[data-bs-theme="light"] .em-uye-rozet.s-outline.r-warning { color: #7A5200; }
[data-bs-theme="light"] .em-uye-rozet.s-outline.r-danger  { color: #A32A19; }
[data-bs-theme="light"] .em-uye-rozet.s-outline.r-gold    { color: #7A5310; }

/* Dar ekranda rozetler kullanıcı adını ikinci satıra itmesin */
@media (max-width: 480px) {
  .em-uye-rozet b { display: none; }
  .em-uye-rozet   { padding: 2px 5px; }
}

/* ── Az kalan stok çubuğu (ürün detayı) ───────────────────────────────
   Stok kritik eşiğin altına düştüğünde görünür. Aciliyet iletir ama
   yanıp sönmez: sürekli hareket eden öğe okumayı zorlaştırır ve
   prefers-reduced-motion kullanıcıları için sorun olur. */
.pf-stok-bar {
  margin: var(--pf-2) 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(240, 80, 60, .32);
  border-radius: var(--pf-r-kart, 12px);
  background: rgba(240, 80, 60, .07);
}
.pf-stok-bar-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 7px;
}
.pf-stok-bar-ust span {
  font: 700 13px/1.4 var(--pf-font); color: var(--pf-danger, #F0503C);
  display: inline-flex; align-items: center; gap: 6px;
}
.pf-stok-bar-ust b { font-weight: 800; }
.pf-stok-bar-ust small { font-size: 11px; color: var(--pf-metin-2); }

.pf-stok-bar-ray {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--pf-yuzey-3, rgba(255, 255, 255, .08));
}
.pf-stok-bar-ray > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #F0503C, #F0B429);
  transition: width .4s ease;
}

/* Açık modda kırmızı zemin daha soluk kalıyordu; metin kontrastı korunuyor */
[data-bs-theme="light"] .pf-stok-bar      { background: rgba(207, 58, 38, .06); border-color: rgba(207, 58, 38, .28); }
[data-bs-theme="light"] .pf-stok-bar-ust span { color: #A32A19; }
[data-bs-theme="light"] .pf-stok-bar-ray  { background: rgba(0, 0, 0, .08); }

@media (prefers-reduced-motion: reduce) {
  .pf-stok-bar-ray > span { transition: none; }
}

/* ══ HESABIM (genel bakış) ═══════════════════════════════════════════
   Ortak hesap menüsü (.em-acc-side) tema dışından geliyor; onun kendi
   stili var, burada yalnızca pinforge ızgarasına yerleştiriliyor. */
.pf-hesap-duzen {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--pf-4); align-items: start;
}
.pf-hesap-menu-ac { display: none; margin-bottom: var(--pf-3); }
.pf-hesap-govde { min-width: 0; }

/* --- Karşılama --- */
.pf-hesap-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pf-4); padding: var(--pf-4);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-hesap-hero-sol { display: flex; align-items: center; gap: var(--pf-3); min-width: 0; }
.pf-hesap-avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pf-primary); color: #fff;
  font: 800 21px/1 var(--pf-font);
}
.pf-hesap-selam { font-size: 12px; color: var(--pf-metin-3); }
.pf-hesap-hero h1 {
  margin: 1px 0 3px; font: 800 20px/1.2 var(--pf-font); color: var(--pf-metin);
  overflow-wrap: anywhere;
}
.pf-hesap-cuzdan {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 11px 15px; border-radius: var(--pf-r-card);
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
}
.pf-hesap-cuzdan > span { font-size: 11px; color: var(--pf-metin-3); }
.pf-hesap-cuzdan > b { font: 800 22px/1.1 var(--pf-font); color: var(--pf-metin); }
.pf-hesap-cuzdan .pf-btn { margin-top: 5px; }

/* --- Eksik doğrulama şeridi --- */
.pf-hesap-eksik {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-3);
  margin-top: var(--pf-3); padding: 12px var(--pf-4);
  border: 1px solid rgba(240, 180, 41, .34); border-radius: var(--pf-r-card);
  background: rgba(240, 180, 41, .08);
}
.pf-hesap-eksik > i { font-size: 20px; color: #F0B429; }
.pf-hesap-eksik b { display: block; font: 700 13px/1.4 var(--pf-font); color: var(--pf-metin); }
.pf-hesap-eksik span { font-size: 12px; color: var(--pf-metin-2); }
.pf-hesap-eksik-btn { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
[data-bs-theme="light"] .pf-hesap-eksik { background: rgba(240, 180, 41, .12); }
[data-bs-theme="light"] .pf-hesap-eksik > i { color: #8A5D00; }

/* --- Özet kartları --- */
.pf-hesap-ozet {
  display: grid; gap: var(--pf-3); margin-top: var(--pf-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pf-ozet-kart {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--pf-4); text-decoration: none;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  transition: border-color .15s, transform .15s;
}
a.pf-ozet-kart:hover { border-color: var(--pf-primary); transform: translateY(-2px); }
.pf-ozet-kart.vurgu { border-style: dashed; border-color: var(--pf-primary); }
.pf-ozet-kart > b {
  font: 800 21px/1.15 var(--pf-font); color: var(--pf-metin);
  overflow-wrap: anywhere;
}
.pf-ozet-kart > span:last-child { font-size: 12px; color: var(--pf-metin-3); }
.pf-ozet-ikon {
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 5px;
  display: grid; place-items: center; font-size: 16px;
}
.pf-ozet-ikon.mavi    { color: #7FB4FF; background: rgba(47, 127, 245, .16); }
.pf-ozet-ikon.yesil   { color: #8FE39A; background: rgba(95, 209, 106, .16); }
.pf-ozet-ikon.kirmizi { color: #F79484; background: rgba(240, 80, 60, .16); }
.pf-ozet-ikon.mor     { color: #C7A2FF; background: rgba(150, 100, 255, .16); }
.pf-ozet-ikon.turuncu { color: #F5CE72; background: rgba(240, 180, 41, .16); }
[data-bs-theme="light"] .pf-ozet-ikon.mavi    { color: #14509C; background: rgba(33, 102, 219, .11); }
[data-bs-theme="light"] .pf-ozet-ikon.yesil   { color: #186024; background: rgba(35, 122, 45, .11); }
[data-bs-theme="light"] .pf-ozet-ikon.kirmizi { color: #A32A19; background: rgba(207, 58, 38, .11); }
[data-bs-theme="light"] .pf-ozet-ikon.mor     { color: #4B2A9E; background: rgba(120, 70, 220, .11); }
[data-bs-theme="light"] .pf-ozet-ikon.turuncu { color: #7A5200; background: rgba(240, 180, 41, .17); }

/* --- Alt bölüm --- */
.pf-hesap-alt { display: grid; gap: 0; }
.pf-panel-link {
  margin-left: auto; font: 600 11px/1 var(--pf-font);
  color: var(--pf-primary-2, var(--pf-primary)); text-decoration: none;
}
.pf-panel-link:hover { text-decoration: underline; }

.pf-hesap-siparisler { display: grid; }
.pf-hesap-siparis {
  display: flex; align-items: center; gap: var(--pf-3);
  padding: 11px var(--pf-4); border-top: 1px solid var(--pf-cizgi);
}
.pf-hesap-siparis:first-child { border-top: 0; }
.pf-hesap-siparis-ad { flex: 1 1 auto; min-width: 0; }
.pf-hesap-siparis-ad b {
  display: block; font: 600 13px/1.35 var(--pf-font); color: var(--pf-metin);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-hesap-siparis-ad time { font-size: 11px; color: var(--pf-metin-3); }
.pf-hesap-siparis em { font: 800 13px/1 var(--pf-font); color: var(--pf-metin); font-style: normal; }

.pf-hesap-dogrulama { display: grid; }
.pf-dogrulama-satir {
  display: flex; align-items: center; gap: var(--pf-3);
  padding: 11px var(--pf-4); border-top: 1px solid var(--pf-cizgi);
}
.pf-dogrulama-satir:first-child { border-top: 0; }
.pf-dogrulama-satir > i { font-size: 17px; color: var(--pf-metin-3); }
.pf-dogrulama-satir.tamam > i { color: var(--pf-success, #5FD16A); }
.pf-dogrulama-satir > div { flex: 1 1 auto; min-width: 0; }
.pf-dogrulama-satir b { display: block; font: 600 13px/1.35 var(--pf-font); color: var(--pf-metin); }
.pf-dogrulama-satir span { font-size: 11.5px; color: var(--pf-metin-3); }
[data-bs-theme="light"] .pf-dogrulama-satir.tamam > i { color: #186024; }

.pf-hesap-kisayol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--pf-cizgi);
}
.pf-hesap-kisayol a {
  display: flex; align-items: center; gap: 8px;
  padding: 13px var(--pf-4); background: var(--pf-yuzey-1);
  font: 600 12.5px/1.3 var(--pf-font); color: var(--pf-metin); text-decoration: none;
}
.pf-hesap-kisayol a:hover { background: var(--pf-yuzey-2); color: var(--pf-primary); }
.pf-hesap-kisayol i { font-size: 15px; color: var(--pf-primary); }

@media (max-width: 991.98px) {
  .pf-hesap-duzen { grid-template-columns: minmax(0, 1fr); }
  .pf-hesap-menu-ac { display: inline-flex; }
}
@media (max-width: 575.98px) {
  .pf-hesap-hero { flex-direction: column; align-items: stretch; }
  .pf-hesap-cuzdan { align-items: stretch; }
  .pf-hesap-eksik-btn { margin-left: 0; width: 100%; }
  .pf-hesap-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-ozet-kart > b { font-size: 18px; }
}

/* Çok dar ekranda sipariş satırı: ürün adı + durum rozeti + fiyat aynı
   satıra sığmıyordu (rozet ve fiyat kısalamıyor, satır 10px taşıyordu).
   Rozet ve fiyat alt satıra iniyor. */
@media (max-width: 400px) {
  .pf-hesap-siparis { flex-wrap: wrap; gap: 6px var(--pf-2); }
  .pf-hesap-siparis-ad { flex: 1 1 100%; }
  .pf-hesap-siparis em { margin-left: auto; }
}

/* ── Değerlendirme yıldızı seçici (siparişlerim) ──────────────────────
   Radio'lar ters sırada yazılıyor (5→1) ve satır row-reverse ile
   çevriliyor: CSS'te "sonraki kardeş" seçicisi olduğu için, üzerine
   gelinen yıldızın SOLUNDAKİLERİ doldurmanın tek yolu bu. */
.em-yildiz-sec { display: inline-flex; flex-direction: row-reverse;
                 justify-content: flex-end; gap: 2px; margin-bottom: 6px; }
.em-yildiz-sec input { position: absolute; opacity: 0; width: 0; height: 0; }
.em-yildiz-sec label {
  cursor: pointer; font-size: 17px; line-height: 1; color: #6b7280;
  transition: color .12s; padding: 1px;
}
.em-yildiz-sec label:hover,
.em-yildiz-sec label:hover ~ label,
.em-yildiz-sec input:checked ~ label { color: #E0A83B; }
/* Klavye kullanıcısı hangi yıldızda olduğunu görsün */
.em-yildiz-sec input:focus-visible + label { outline: 2px solid var(--pf-primary, #2f7ff5); outline-offset: 2px; border-radius: 3px; }

.em-yildiz-goster { color: #E0A83B; font-size: 11px; letter-spacing: .5px; margin-right: 5px; }

/* ══ HESAP KABUĞU — pinforge uyarlaması ════════════════════════════════
   siparislerim.php, profilim.php, satici/*.php ve diğer hesap sayfaları
   ortak `hesap_ac()` kabuğunu ve `em-acc-*` sınıflarını kullanıyor.
   Her sayfaya ayrı pinforge şablonu yazmak yerine kabuğu bir kez
   uyarlıyoruz: 12'den fazla sayfa aynı anda pinforge görünümüne geçiyor
   ve yeni bir hesap sayfası eklendiğinde ek iş çıkmıyor.

   Kurallar `body[data-tema="pinforge"]` altında; diğer temalar kendi
   görünümünü korur. */

body[data-tema="pinforge"] .em-acc-wrap {
  max-width: 1240px; margin-inline: auto;
  padding: var(--pf-5) var(--pf-4) var(--pf-8);
}
body[data-tema="pinforge"] .em-acc-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--pf-4); align-items: start;
}
body[data-tema="pinforge"] .em-acc-main { min-width: 0; }

body[data-tema="pinforge"] .em-acc-pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-3); flex-wrap: wrap; margin-bottom: var(--pf-4);
  padding-bottom: var(--pf-3); border-bottom: 1px solid var(--pf-cizgi);
}
body[data-tema="pinforge"] .em-acc-pagehead h4 {
  margin: 0; font: 800 20px/1.25 var(--pf-font); color: var(--pf-metin);
}

/* --- Sol menü --- */
body[data-tema="pinforge"] .em-acc-side {
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); overflow: hidden;
  position: sticky; top: 76px;
}
body[data-tema="pinforge"] .em-acc-user {
  display: flex; align-items: center; gap: 10px;
  padding: var(--pf-3) var(--pf-4);
  background: var(--pf-yuzey-2); border-bottom: 1px solid var(--pf-cizgi);
}
body[data-tema="pinforge"] .em-acc-user img {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
body[data-tema="pinforge"] .em-acc-user .fw-bold {
  font: 700 13px/1.3 var(--pf-font); color: var(--pf-metin);
}
body[data-tema="pinforge"] .em-acc-balance {
  display: flex; align-items: center; gap: 4px;
  font: 700 12px/1.3 var(--pf-font); color: var(--pf-primary-2, var(--pf-primary));
}

body[data-tema="pinforge"] .em-acc-group {
  padding: 11px var(--pf-4) 5px;
  font: 700 10px/1 var(--pf-font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pf-metin-3);
}
body[data-tema="pinforge"] .em-acc-nav { display: grid; }
body[data-tema="pinforge"] .em-acc-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px var(--pf-4); min-height: 40px;
  font: 600 12.5px/1.3 var(--pf-font); color: var(--pf-metin-2);
  text-decoration: none; border-left: 2px solid transparent;
  transition: background var(--pf-hiz, .15s) ease-out, color var(--pf-hiz, .15s) ease-out;
}
body[data-tema="pinforge"] .em-acc-nav a i { font-size: 14px; width: 16px; flex: 0 0 auto; }
body[data-tema="pinforge"] .em-acc-nav a:hover {
  background: var(--pf-yuzey-2); color: var(--pf-metin);
}
body[data-tema="pinforge"] .em-acc-nav a.active {
  background: var(--pf-yuzey-2); color: var(--pf-primary-2, var(--pf-primary));
  border-left-color: var(--pf-primary);
}
/* Bekleyen iş sayacı — menü öğesinin sağında */
body[data-tema="pinforge"] .em-acc-nav a .badge,
body[data-tema="pinforge"] .em-acc-nav a em {
  margin-left: auto; font: 700 10px/1 var(--pf-font);
  padding: 3px 6px; border-radius: 999px;
  background: #CF3A26; color: #fff; font-style: normal;
}
/* Seçiciler `.em-acc-nav a` üzerinden yazılıyor: taban temanın kuralı
   `.em-acc-nav a.em-acc-cta.em-acc-cta-2` (0,3,1) idi ve buradaki
   `body[data-tema] .em-acc-cta-2` (0,2,1) onu yenemiyordu. Sonuç,
   "Yayıncı Ol" düğmesinin pinforge altın metniyle taban temanın MAVİ
   çerçevesini birlikte taşıması ve arka planının hiç uygulanmamasıydı
   — `color` yalnızca `!important` taşıdığı için geçiyordu.
   `border` da açıkça sıfırlanıyor ki taban çerçevesi sızmasın. */
body[data-tema="pinforge"] .em-acc-nav a.em-acc-cta,
body[data-tema="pinforge"] .em-acc-nav a.em-acc-pending {
  margin: 5px var(--pf-3) 8px; border-radius: var(--pf-r-btn);
  background: color-mix(in srgb, var(--pf-primary) 14%, transparent);
  color: var(--pf-primary-2, var(--pf-primary));
  border: 0; justify-content: center;
}
body[data-tema="pinforge"] .em-acc-nav a.em-acc-cta.em-acc-cta-2 {
  background: color-mix(in srgb, #E0A83B 16%, transparent);
  color: #EFCB87; border: 0;
}
body[data-tema="pinforge"] .em-acc-nav a.em-acc-cta:hover {
  background: color-mix(in srgb, var(--pf-primary) 22%, transparent);
}
body[data-tema="pinforge"] .em-acc-nav a.em-acc-cta.em-acc-cta-2:hover {
  background: color-mix(in srgb, #E0A83B 26%, transparent);
}
body[data-tema="pinforge"] .em-acc-logout { color: #F0503C !important; }
body[data-tema="pinforge"] .em-acc-logout:hover {
  background: color-mix(in srgb, #F0503C 12%, transparent) !important;
}
/* Açık temada altın metin beyaz üstünde okunmuyor; koyulaştırılıyor.
   Seçici yukarıdakiyle aynı düzeye çekildi, `!important` gerekmiyor. */
[data-bs-theme="light"] body[data-tema="pinforge"] .em-acc-nav a.em-acc-cta.em-acc-cta-2 { color: #7A5310; }

/* --- İçerik: paylaşılan Bootstrap sınıflarını pinforge'a çevir --- */
body[data-tema="pinforge"] .em-acc-main .em-card {
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); color: var(--pf-metin);
}
body[data-tema="pinforge"] .em-acc-main .nav-pills { gap: 6px; border-bottom: 0; }
body[data-tema="pinforge"] .em-acc-main .nav-pills .nav-link {
  padding: 7px 13px; border-radius: var(--pf-r-pill);
  font: 700 12.5px/1.3 var(--pf-font); color: var(--pf-metin-2);
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
}
body[data-tema="pinforge"] .em-acc-main .nav-pills .nav-link.active {
  background: var(--pf-primary); border-color: var(--pf-primary); color: #fff;
}
/* background-color (kısayol DEĞİL): `background` kısayolu select'in
   ok simgesini (background-image) siliyordu. */
body[data-tema="pinforge"] .em-acc-main .form-control,
body[data-tema="pinforge"] .em-acc-main .form-select {
  background-color: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  color: var(--pf-metin); border-radius: var(--pf-r-btn);
}
body[data-tema="pinforge"] .em-acc-main .form-control:focus,
body[data-tema="pinforge"] .em-acc-main .form-select:focus {
  border-color: var(--pf-primary); box-shadow: none;
  outline: 2px solid color-mix(in srgb, var(--pf-primary) 40%, transparent); outline-offset: -1px;
}
body[data-tema="pinforge"] .em-acc-main .table { color: var(--pf-metin); }
body[data-tema="pinforge"] .em-acc-main .table > :not(caption) > * > * {
  background: transparent; border-color: var(--pf-cizgi); color: inherit;
}
body[data-tema="pinforge"] .em-acc-main .btn-em {
  background: var(--pf-primary); border-color: var(--pf-primary); color: #fff;
  border-radius: var(--pf-r-btn); font-weight: 700;
}
body[data-tema="pinforge"] .em-acc-main .btn-em:hover { filter: brightness(1.08); }
body[data-tema="pinforge"] .em-acc-main .em-code-box {
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-btn); color: var(--pf-metin);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 8px 11px; word-break: break-all;
}
/* Klasik sayfalama: pinforge düğme diliyle */
body[data-tema="pinforge"] .em-acc-main .pagination { gap: 4px; }
body[data-tema="pinforge"] .em-acc-main .page-link {
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  color: var(--pf-metin-2); border-radius: var(--pf-r-btn);
  font: 600 12.5px/1 var(--pf-font); padding: 8px 12px;
}
body[data-tema="pinforge"] .em-acc-main .page-item.active .page-link {
  background: var(--pf-primary); border-color: var(--pf-primary); color: #fff;
}
body[data-tema="pinforge"] .em-acc-main .page-item.disabled .page-link { opacity: .45; }

@media (max-width: 991.98px) {
  body[data-tema="pinforge"] .em-acc-layout { grid-template-columns: minmax(0, 1fr); }

  /* Burada `position: static` yazıyordu. Taban temanın çekmece kuralını
     (fixed + left:-300px) yalnızca KISMEN iptal ediyordu: width:280px,
     height:100vh ve left:-300px olduğu gibi kalıyordu. Sonuç, sayfa
     akışında duran 280px genişliğinde ekran boyu bir blok — içerik
     aşağı itiliyor, "Menü" düğmesi ile kapatma çarpısı hiçbir işe
     yaramıyordu (ikisi de zaten bağlıydı, sadece CSS karşılığı yoktu).
     Çekmece davranışına dönüldü. */
  body[data-tema="pinforge"] .em-acc-side {
    position: fixed; z-index: 1055; top: 0; left: -300px;
    width: 280px; max-width: 86vw;
    height: 100vh; height: 100dvh;   /* mobil tarayıcı çubuğu için dvh */
    border-radius: 0; border-block: 0; border-inline-start: 0;
    overflow-y: auto; overscroll-behavior: contain;
    transition: left .25s ease-out;
  }
  body[data-tema="pinforge"] .em-acc-side.open {
    left: 0; box-shadow: 0 0 60px rgba(0, 0, 0, .55);
  }
  /* Menüyü açan düğme pinforge diliyle: hesap.php'den gelen Bootstrap
     `btn-outline-secondary` tema içinde yabancı duruyordu. */
  body[data-tema="pinforge"] .em-acc-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; margin-bottom: var(--pf-3);
    font: 700 12.5px/1.3 var(--pf-font);
    color: var(--pf-metin); background: var(--pf-yuzey-1);
    border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  }
  body[data-tema="pinforge"] .em-acc-close {
    margin-left: auto; padding: 4px 6px; line-height: 1;
    color: var(--pf-metin-3); background: transparent; border: 0;
  }
  body[data-tema="pinforge"] .em-acc-close:hover { color: var(--pf-metin); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-tema="pinforge"] .em-acc-side { transition: none; }
}

/* ══ TOAST BİLDİRİMİ ═════════════════════════════════════════════════
   Sunucudan gelen flash mesajları ve sayfa yenilemesiz işlem sonuçları
   burada gösteriliyor. Sayfanın üstüne eklenen alert kutusu içeriği
   aşağı itiyordu; toast düzeni bozmuyor.

   Cam efekti (backdrop-filter) desteklenmeyen tarayıcıda düz yüzeye
   düşülüyor — okunabilirlik efekte bağlı değil. */
.em-toast-kap {
  position: fixed; top: 74px; right: 14px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;   /* boş alan altındaki sayfayı engellemesin */
}
.em-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 13px;
  border-radius: var(--pf-r-card, 12px);
  border: 1px solid var(--pf-cizgi);
  background: color-mix(in srgb, var(--pf-yuzey-1) 86%, transparent);
  box-shadow: var(--pf-sh-2, 0 4px 14px rgba(0, 0, 0, .28));
  color: var(--pf-metin);
  font: 600 13px/1.45 var(--pf-font);
  opacity: 0; transform: translateX(14px);
  transition: opacity 200ms ease-out, transform 200ms cubic-bezier(.32, .72, 0, 1);
}
@supports (backdrop-filter: blur(14px)) {
  .em-toast { backdrop-filter: blur(14px) saturate(140%); }
}
@supports not (backdrop-filter: blur(14px)) {
  .em-toast { background: var(--pf-yuzey-1); }
}
.em-toast.acik      { opacity: 1; transform: none; }
.em-toast.kapaniyor { opacity: 0; transform: translateX(14px); }

.em-toast-ikon  { flex: 0 0 auto; font-size: 16px; line-height: 1.3; }
.em-toast-metin { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.em-toast-kapat {
  flex: 0 0 auto; width: 24px; height: 24px; margin: -2px -2px 0 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--pf-metin-3); font-size: 11px;
}
.em-toast-kapat:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }

/* Tür renkleri yalnızca ikonda ve sol şeritte; metin her zaman ana
   metin rengi kalıyor — renkli metin cam zeminde okunabilirliği düşürür. */
.em-toast-ok    { border-left: 3px solid #5FD16A; }
.em-toast-hata  { border-left: 3px solid #F0503C; }
.em-toast-uyari { border-left: 3px solid #F0B429; }
.em-toast-bilgi { border-left: 3px solid var(--pf-primary); }
.em-toast-ok    .em-toast-ikon { color: #8FE39A; }
.em-toast-hata  .em-toast-ikon { color: #F79484; }
.em-toast-uyari .em-toast-ikon { color: #F5CE72; }
.em-toast-bilgi .em-toast-ikon { color: #8FBEFF; }

[data-bs-theme="light"] .em-toast-ok    .em-toast-ikon { color: #186024; }
[data-bs-theme="light"] .em-toast-hata  .em-toast-ikon { color: #A32A19; }
[data-bs-theme="light"] .em-toast-uyari .em-toast-ikon { color: #7A5200; }
[data-bs-theme="light"] .em-toast-bilgi .em-toast-ikon { color: #14509C; }

/* İşlem süren düğme */
.em-bekliyor { opacity: .65; cursor: progress; }

@media (max-width: 575.98px) {
  /* Mobilde alttan: başparmak oradayken bildirim de orada olsun,
     üstteki bildirim çubuğunun altında kalmasın. */
  .em-toast-kap {
    top: auto; bottom: calc(68px + env(safe-area-inset-bottom));
    left: 14px; right: 14px; width: auto;
  }
  .em-toast { transform: translateY(14px); }
  .em-toast.kapaniyor { transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .em-toast { transition: opacity 120ms linear; transform: none; }
  .em-toast.acik, .em-toast.kapaniyor { transform: none; }
}

/* ══ FORM BİLEŞENLERİ ════════════════════════════════════════════════ */

/* --- Şifre göster/gizle --- */
.em-sifre-sar { position: relative; display: block; }
.em-sifre-sar > input { padding-right: 42px !important; width: 100%; }
.em-sifre-goz {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--pf-metin-3); font-size: 14px;
}
.em-sifre-goz:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }
.em-sifre-goz:focus-visible {
  outline: 2px solid var(--pf-primary); outline-offset: -2px;
}

/* --- Sürükle-bırak yükleme --- */
.em-birak {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 20px 16px; cursor: pointer; text-align: center;
  border: 2px dashed var(--pf-cizgi-guclu, var(--pf-cizgi));
  border-radius: var(--pf-r-card, 12px);
  background: var(--pf-yuzey-2);
  color: var(--pf-metin-2);
  transition: border-color .15s, background .15s;
}
.em-birak:hover  { border-color: var(--pf-primary); }
.em-birak:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: 2px; }
.em-birak.uzerinde {
  border-color: var(--pf-primary);
  background: color-mix(in srgb, var(--pf-primary) 10%, var(--pf-yuzey-2));
}
.em-birak.dolu { border-style: solid; }
.em-birak > i { font-size: 22px; color: var(--pf-primary); }
.em-birak > b { font: 700 13px/1.4 var(--pf-font); color: var(--pf-metin); }
.em-birak > small { font-size: 11.5px; color: var(--pf-metin-3); }

/* Gerçek input gizli ama erişilebilir kalıyor: display:none olsaydı
   klavyeyle odaklanamaz ve form doğrulama mesajı görünmezdi. */
.em-birak-girdi {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.em-birak-liste {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  margin-top: 8px; max-width: 100%;
}
.em-birak-oge {
  font: 600 11px/1.5 var(--pf-font);
  padding: 3px 8px; border-radius: 999px;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  color: var(--pf-metin-2); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Yerel select: görünümü düzelt, davranışı koru --------------------
   Özel dropdown bileşeni YAPILMADI. Ön yüzdeki seçim kutularında 4-6
   seçenek var; özel bileşen görsel süsten ibaret kalır ve mobilde
   işletim sisteminin seçicisini, klavye gezinmesini, ekran okuyucu
   desteğini kaybettirir. Sorun görünümdü — o düzeltildi. */
body[data-tema="pinforge"] select:not([multiple]),
body[data-tema="pinforge"] .form-select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background-color: var(--pf-yuzey-2); color: var(--pf-metin);
  font: 600 13px/1.4 var(--pf-font); cursor: pointer;
  /* Ok simgesi gömülü SVG: dış istek yok, renk currentColor ile uyumlu */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238C93A0'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}
body[data-tema="pinforge"] select:not([multiple]):hover { border-color: var(--pf-cizgi-guclu); }
body[data-tema="pinforge"] select:not([multiple]):focus-visible {
  outline: 2px solid var(--pf-primary); outline-offset: -1px; border-color: var(--pf-primary);
}
/* Açılan liste işletim sistemine ait; en azından renkleri uyumlu olsun */
body[data-tema="pinforge"] select option {
  background: var(--pf-yuzey-1); color: var(--pf-metin);
}

/* Kategori logoları: mega menü ve mobil çekmecede genel kumanda ikonu
   yerine oyunun kendi logosu. Kare kutuda, kırpılmadan. */
.pf-mega-logo, .pf-cekmece-logo {
  width: 18px; height: 18px; flex: 0 0 auto;
  object-fit: contain; border-radius: 4px;
}
.pf-cekmece-logo { margin-right: 9px; vertical-align: -4px; }

/* "Daha Fazla Yükle" — sayfalamanın üstünde, onun yerine değil */
.pf-daha-sar {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin: var(--pf-5) 0 var(--pf-3);
}
.pf-daha-bilgi { font-size: 12px; color: var(--pf-metin-3); }

/* ── Bülten aboneliği (alt bilgi) ────────────────────────────────────── */
.pf-bulten { margin-top: var(--pf-4); max-width: 340px; }
.pf-bulten-etiket {
  display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
  font: 700 12.5px/1.3 var(--pf-font); color: var(--pf-metin);
}
.pf-bulten-etiket i { color: var(--pf-primary); font-size: 14px; }
.pf-bulten-satir { display: flex; gap: 6px; }
.pf-bulten-satir input {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 11px;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-2); color: var(--pf-metin);
  font: 400 13px/1 var(--pf-font);
}
.pf-bulten-satir input:focus {
  outline: 2px solid var(--pf-primary); outline-offset: -1px; border-color: var(--pf-primary);
}
.pf-bulten-satir .pf-btn { flex: 0 0 auto; height: 38px; }
.pf-bulten-not {
  display: block; margin-top: 6px; font-size: 11px; line-height: 1.5;
  color: var(--pf-metin-3);
}
@media (max-width: 575.98px) {
  .pf-bulten { max-width: none; }
}

/* ══ S.S.S. SAYFASI ══════════════════════════════════════════════════
   Düz Bootstrap accordion yerine: üstte arama, solda konu filtresi,
   sağda <details> kartları. <details> seçildi çünkü JS olmadan da
   açılıp kapanıyor ve klavye desteği tarayıcıdan geliyor. */
.pf-sss-bas { text-align: center; margin-bottom: var(--pf-5); }
.pf-sss-bas h1 { font: 800 26px/1.25 var(--pf-font); color: var(--pf-metin); margin: 0 0 6px; }
.pf-sss-bas p  { font-size: 13.5px; color: var(--pf-metin-2); margin: 0 0 var(--pf-4); }

.pf-sss-ara {
  position: relative; max-width: 480px; margin: 0 auto;
  display: flex; align-items: center;
}
.pf-sss-ara > i:first-child {
  position: absolute; left: 13px; color: var(--pf-metin-3); font-size: 14px; pointer-events: none;
}
.pf-sss-ara input {
  width: 100%; height: 44px; padding: 0 40px;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-pill);
  background: var(--pf-yuzey-1); color: var(--pf-metin);
  font: 400 14px/1 var(--pf-font);
}
.pf-sss-ara input:focus {
  outline: 2px solid var(--pf-primary); outline-offset: -1px; border-color: var(--pf-primary);
}
/* Tarayıcının kendi temizleme çarpısı ikimizinkiyle üst üste biniyordu */
.pf-sss-ara input::-webkit-search-cancel-button { display: none; }
.pf-sss-temizle {
  position: absolute; right: 8px; width: 28px; height: 28px;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--pf-yuzey-3, var(--pf-yuzey-2));
  color: var(--pf-metin-2); font-size: 10px;
}
.pf-sss-temizle:hover { color: var(--pf-metin); }

.pf-sss-duzen {
  display: grid; grid-template-columns: 218px minmax(0, 1fr);
  gap: var(--pf-4); align-items: start;
}
.pf-sss-yan {
  position: sticky; top: 76px;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); overflow: hidden;
}
.pf-sss-yan-bas {
  padding: 10px var(--pf-4); border-bottom: 1px solid var(--pf-cizgi);
  background: var(--pf-yuzey-2); font: 700 11px/1 var(--pf-font);
  letter-spacing: .06em; text-transform: uppercase; color: var(--pf-metin-3);
}
.pf-sss-gruplar { display: grid; }
.pf-sss-gruplar button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px var(--pf-4); min-height: 40px;
  border: 0; border-left: 2px solid transparent; background: transparent;
  color: var(--pf-metin-2); font: 600 12.5px/1.3 var(--pf-font);
  text-align: left; cursor: pointer;
}
.pf-sss-gruplar button:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }
.pf-sss-gruplar button.aktif {
  background: var(--pf-yuzey-2); color: var(--pf-primary-2, var(--pf-primary));
  border-left-color: var(--pf-primary);
}
.pf-sss-gruplar em {
  font-style: normal; font-size: 11px; color: var(--pf-metin-3);
  background: var(--pf-yuzey-3, var(--pf-yuzey-2));
  padding: 1px 7px; border-radius: 999px;
}

.pf-sss-govde { min-width: 0; }
.pf-sss-sayi { font-size: 12px; color: var(--pf-metin-3); margin: 0 0 var(--pf-2); }
.pf-sss-liste { display: grid; gap: 8px; }

.pf-sss-oge {
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); overflow: hidden;
  transition: border-color .15s;
}
.pf-sss-oge[open] { border-color: var(--pf-cizgi-guclu); }
.pf-sss-oge summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pf-3);
  padding: 14px var(--pf-4); cursor: pointer; list-style: none;
  font: 650 14px/1.45 var(--pf-font); color: var(--pf-metin);
}
.pf-sss-oge summary::-webkit-details-marker { display: none; }
.pf-sss-oge summary:hover { color: var(--pf-primary-2, var(--pf-primary)); }
.pf-sss-oge summary:focus-visible { outline: 2px solid var(--pf-primary); outline-offset: -2px; }
.pf-sss-oge summary > i {
  flex: 0 0 auto; font-size: 12px; color: var(--pf-metin-3);
  transition: transform 180ms ease-out;
}
.pf-sss-oge[open] summary > i { transform: rotate(180deg); }
.pf-sss-cevap {
  padding: 0 var(--pf-4) 15px; font-size: 13.5px; line-height: 1.65;
  color: var(--pf-metin-2);
}

.pf-sss-bos {
  text-align: center; padding: var(--pf-6) var(--pf-4);
  border: 1px dashed var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-sss-bos i { font-size: 26px; color: var(--pf-metin-3); }
.pf-sss-bos b { display: block; margin: 9px 0 4px; font-size: 14px; color: var(--pf-metin); }
.pf-sss-bos p { font-size: 12.5px; color: var(--pf-metin-3); margin: 0 0 var(--pf-3); }

.pf-sss-yardim {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-3); flex-wrap: wrap; margin-top: var(--pf-5);
  padding: var(--pf-4);
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-sss-yardim b { display: block; font: 700 14px/1.4 var(--pf-font); color: var(--pf-metin); }
.pf-sss-yardim span { font-size: 12.5px; color: var(--pf-metin-3); }

@media (max-width: 767.98px) {
  .pf-sss-duzen { grid-template-columns: minmax(0, 1fr); }
  /* Konu filtresi mobilde yatay kaydırılan şerit olur */
  .pf-sss-yan { position: static; }
  .pf-sss-gruplar {
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; scrollbar-width: thin;
  }
  .pf-sss-gruplar button {
    border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap;
  }
  .pf-sss-gruplar button.aktif { border-left: 0; border-bottom-color: var(--pf-primary); }
  .pf-sss-yardim { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-sss-oge summary > i { transition: none; }
}

/* Kategori sayfasındaki SSS bölümü — /sss ile aynı kart dilini kullanır */
.pf-sss-bolum { margin-top: var(--pf-5); }
.pf-sss-bolum h2 {
  font: 800 17px/1.3 var(--pf-font); color: var(--pf-metin);
  margin: 0 0 var(--pf-3);
}
.pf-sss-bolum .pf-baglanti-btn { margin-top: var(--pf-3); }

/* ── Destek ekleri (panodan yapıştırma) ─────────────────────────────── */
.em-destek-ekler { display: flex; flex-wrap: wrap; gap: 8px; }
.em-destek-ekler a {
  display: block; width: 96px; height: 72px; overflow: hidden;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-2);
}
.em-destek-ekler img { width: 100%; height: 100%; object-fit: cover; }
.em-destek-ekler a:hover { border-color: var(--pf-primary); }

.em-destek-ek-satir {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px;
}
.em-destek-ek-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 11px; border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-pill);
  background: var(--pf-yuzey-2); color: var(--pf-metin-2);
  font: 600 12px/1.4 var(--pf-font);
}
.em-destek-ek-btn:hover { border-color: var(--pf-primary); color: var(--pf-metin); }
.em-destek-ek-ipucu { font-size: 11.5px; color: var(--pf-metin-3); }

.em-destek-ek-onizleme { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.em-destek-ek-oge {
  width: 72px; height: 56px; overflow: hidden;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-2); display: grid; place-items: center;
  color: var(--pf-metin-3);
}
.em-destek-ek-oge img { width: 100%; height: 100%; object-fit: cover; }

/* Eki kaldır düğmesi — ek anında yüklendiği için geri alma yolu şart.
   Kutunun sağ üstünde, hover/odakta belirir; dokunmatikte her zaman
   görünür (hover yok). */
.em-destek-ek-oge { position: relative; }
.em-destek-ek-sil {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 5px;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 10px; cursor: pointer;
  opacity: 0; transition: opacity .14s ease-out, background .14s ease-out;
}
.em-destek-ek-oge:hover .em-destek-ek-sil,
.em-destek-ek-sil:focus-visible { opacity: 1; }
.em-destek-ek-sil:hover { background: var(--pf-hata, #dc2626); }
.em-destek-ek-sil:disabled { opacity: .45; cursor: default; }
@media (hover: none) { .em-destek-ek-sil { opacity: 1; } }
.em-destek-ek-oge.yukleniyor { border-style: dashed; }

/* Mesaj kutusuna görsel sürüklenirken */
.em-surukleniyor {
  outline: 2px dashed var(--pf-primary) !important; outline-offset: -2px;
}

/* ── CANLI yayın rozeti (yayıncı kartı) ──────────────────────────────
   Durum cron ile güncellenir; sayfa açılırken API çağrılmaz. */
.pf-yy-canli {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 5px;
  background: #E01B24; color: #fff;
  font: 800 10px/1.4 var(--pf-font); letter-spacing: .04em;
}
.pf-yy-canli em {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: pf-canli-nabiz 1.8s ease-in-out infinite;
}
.pf-yy-canli b {
  font-weight: 700; padding-left: 5px; margin-left: 1px;
  border-left: 1px solid rgba(255, 255, 255, .45);
}
@keyframes pf-canli-nabiz {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
/* Nabız animasyonu dikkat çekmek için var; hareket hassasiyeti olan
   kullanıcıda sabit kalır — rozet yine görünür, bilgi kaybolmaz. */
@media (prefers-reduced-motion: reduce) {
  .pf-yy-canli em { animation: none; }
}

/* ── Sayfa yükleme çubuğu ─────────────────────────────────────────────
   Gerçek ilerleme ölçülemiyor (tarayıcı vermez); sahte yüzde göstermek
   yerine belirsiz ilerleme kullanılıyor. */
.em-yukleme {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 3000;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg,
    transparent, var(--pf-primary), var(--pf-primary-2, var(--pf-primary)), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  transition: opacity 150ms ease-out;
}
.em-yukleme.aktif {
  opacity: 1;
  animation: em-yukleme-kay 900ms linear infinite;
}
.em-yukleme.bitti { opacity: 0; }
@keyframes em-yukleme-kay {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}
/* Hareket hassasiyeti: çubuk sabit ve dolu görünür, yine de "bekleniyor"
   bilgisini verir. */
@media (prefers-reduced-motion: reduce) {
  .em-yukleme.aktif {
    animation: none; background: var(--pf-primary); background-size: 100% 100%;
  }
}

/* Kopyalanan öğe kısa süre vurgulanır (toast'a ek görsel onay) */
.em-kopyalandi {
  outline: 2px solid var(--pf-success, #5FD16A); outline-offset: 2px;
  border-radius: var(--pf-r-btn);
}

/* ══ KİMLİK SAYFALARI — bölünmüş ekran ═══════════════════════════════
   giris-yap, uyelik-olustur, sifremi-unuttum ve sifre-sifirla aynı
   `em-auth-*` kabuğunu kullanıyor. Dört sayfaya ayrı pinforge şablonu
   yazmak yerine kabuk bir kez biçimlendiriliyor.

   Sol sütun ::before ile üretiliyor — HTML'e dokunulmadığı için diğer
   temalar etkilenmiyor ve JS kapalıyken de aynı görünüyor. */
body[data-tema="pinforge"] .em-auth-wrap {
  max-width: 940px; margin: var(--pf-6) auto var(--pf-8);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 0; align-items: stretch;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-lg, 16px); overflow: hidden;
}

body[data-tema="pinforge"] .em-auth-card {
  background: transparent; border: 0; border-radius: 0;
  padding: var(--pf-6) var(--pf-5);
  display: flex; flex-direction: column; justify-content: center;
}
body[data-tema="pinforge"] .em-auth-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px;
  background: color-mix(in srgb, var(--pf-primary) 16%, transparent);
  color: var(--pf-primary-2, var(--pf-primary));
}
/* Glif kutuda tam merkeze: bi ikonlarının satır yüksekliği (1.5) ve
   ::before'daki -.125em vertical-align kaydırması optik kaymaya yol
   açıyordu — metrikler sıfırlanır. Aynı sorun soldaki tanıtım panelinin
   ikonunda da vardı. */
body[data-tema="pinforge"] .em-auth-icon i,
body[data-tema="pinforge"] .pf-auth-ikon i { line-height: 1; display: block; }
body[data-tema="pinforge"] .em-auth-icon i::before,
body[data-tema="pinforge"] .pf-auth-ikon i::before { vertical-align: 0; display: block; }
body[data-tema="pinforge"] .em-auth-card .form-control {
  background-color: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  color: var(--pf-metin); border-radius: var(--pf-r-btn); min-height: 42px;
}
body[data-tema="pinforge"] .em-auth-card .form-control:focus {
  border-color: var(--pf-primary); box-shadow: none;
  outline: 2px solid color-mix(in srgb, var(--pf-primary) 40%, transparent); outline-offset: -1px;
}
body[data-tema="pinforge"] .em-auth-card .btn-em {
  background: var(--pf-primary); border-color: var(--pf-primary); color: #fff;
  border-radius: var(--pf-r-btn); min-height: 44px; font-weight: 700;
}
body[data-tema="pinforge"] .em-auth-card .btn-em:hover { filter: brightness(1.08); }
body[data-tema="pinforge"] .em-auth-card .btn-outline-secondary {
  border-color: var(--pf-cizgi); color: var(--pf-metin);
  border-radius: var(--pf-r-btn); min-height: 44px;
}
body[data-tema="pinforge"] .em-auth-card .btn-outline-secondary:hover {
  background: var(--pf-yuzey-2); border-color: var(--pf-cizgi-guclu); color: var(--pf-metin);
}
body[data-tema="pinforge"] .em-auth-card hr { border-color: var(--pf-cizgi); opacity: 1; }
body[data-tema="pinforge"] .em-auth-card a { color: var(--pf-primary-2, var(--pf-primary)); }

/* Tek sütuna düşerken tanıtım paneli gizlenir: dar ekranda formun
   üstünde yer kaplaması kaydırma ekliyor, katkısı yok. */
/* Sol panel 992px altında 274 piksele sıkışıp okunmaz hale geliyordu;
   o genişlikte tamamen gizleniyor. */
@media (max-width: 991.98px) {
  body[data-tema="pinforge"] .em-auth-wrap {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px; margin: var(--pf-4) auto var(--pf-6);
  }
  .pf-auth-yan { display: none; }
  body[data-tema="pinforge"] .em-auth-card { padding: var(--pf-5) var(--pf-4); }
}

/* ── Kimlik sayfası sol tanıtım paneli ───────────────────────────────
   Önceden CSS ::before ile üretilen üç satır metindi; geniş ekranda
   500 pikselin çoğu boş kalıyordu. Artık gerçek içerik: marka, güven
   maddeleri ve sitenin kendi rakamları (parca/auth-yan.php). */
.pf-auth-yan {
  display: flex; flex-direction: column; gap: var(--pf-5);
  /* Dikey hizalama `start`: içerik üstte toplanır. Varsayılan `stretch`
     ile liste esneyip maddeler arası boşluk açılıyordu. */
  justify-content: flex-start;
  padding: var(--pf-6) var(--pf-5);
  background:
    radial-gradient(130% 100% at 8% 4%,
      color-mix(in srgb, var(--pf-primary) 30%, transparent) 0%, transparent 58%),
    var(--pf-yuzey-2);
  border-right: 1px solid var(--pf-cizgi);
}
.pf-auth-bas { display: grid; gap: 8px; }
.pf-auth-marka { display: flex; align-items: center; }
.pf-auth-marka img { max-height: 30px; width: auto; }
.pf-auth-marka b { font: 800 19px/1 var(--pf-font); color: var(--pf-metin); }
.pf-auth-slogan {
  margin: 0; max-width: 34ch;
  font-size: 13px; line-height: 1.6; color: var(--pf-metin-2);
}

/* Liste marka bloğunun hemen altında durur.
   Önce `margin-block: auto` ile kalan alanda ortalanıyordu; kayıt formu
   uzun olduğu için marka ile liste arasında 240 piksellik bir boşluk
   açılıyor ve panel kopuk görünüyordu. Artık içerik üstte toplu duruyor,
   boşluk aşağıda tek parça kalıyor — gradyanın olduğu yer.
   Doldurmak için sahte madde EKLENMİYOR: olmayan bir özelliği vaat
   etmek olurdu. */
.pf-auth-madde {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
}
/* İkon iki satırlık metnin ortasına hizalanır; flex-start iken başlık
   satırının yanında asılı kalıp aşağı taşıyordu. */
.pf-auth-madde li { display: flex; align-items: center; gap: 12px; }
.pf-auth-ikon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
  background: color-mix(in srgb, var(--pf-primary) 18%, transparent);
  color: var(--pf-primary-2, var(--pf-primary));
}
/* Bootstrap Icons glifleri `vertical-align: -.125em` taşır. Kutunun
   ortasına yerleştirilen ikon bu yüzden ~2 piksel aşağı kayıyor ve
   dördü yan yana bakınca yamuk duruyordu. Satır kutusunu tamamen
   devre dışı bırakıp glifi gerçekten ortalıyoruz. */
.pf-auth-ikon i { display: block; line-height: 1; }
.pf-auth-ikon i::before { display: block; vertical-align: 0; line-height: 1; }
.pf-auth-madde b {
  display: block; font: 700 13.5px/1.4 var(--pf-font); color: var(--pf-metin);
}
/* `div` şart: seçici sadece `.pf-auth-madde span` iken ikon sarmalayıcısı
   da bir <span> olduğu için o kurala yakalanıyordu. (0,2,0) özgüllük
   `.pf-auth-ikon`ın (0,1,0) kurallarını eziyor, display:grid düşüyor ve
   glif 34 piksellik kutunun sol üst köşesine yapışıyordu — ikonların
   yamuk görünmesinin sebebi buydu. */
.pf-auth-madde div span {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 1.55; color: var(--pf-metin-2);
}

[data-bs-theme="light"] .pf-auth-yan {
  background:
    radial-gradient(130% 100% at 8% 4%,
      color-mix(in srgb, var(--pf-primary) 14%, transparent) 0%, transparent 58%),
    var(--pf-yuzey-2);
}

/* Dar ekranda tanıtım paneli gizlenir. Bu kural dosyanın SONUNDA:
   yukarıdaki `.pf-auth-yan { display: flex }` ile aynı özgüllükte
   olduğu için sonra gelmesi gerekiyor. Panel formun üstünde 380-460
   piksel yer kaplayıp kullanıcıyı kaydırmaya zorluyordu. */
@media (max-width: 991.98px) {
  .pf-auth-yan { display: none; }
}

/* ══ HESAP SAYFALARI — İÇERİK BİLEŞENLERİ ════════════════════════════
   Kabuk (menü + düzen) daha önce pinforge'a alınmıştı; içerik hâlâ
   Bootstrap görünümündeydi. Bu blok profilim, siparişlerim, destek ve
   satıcı panelinin tamamını kapsar — her sayfaya ayrı şablon yazmak
   yerine ortak sınıflar bir kez çevriliyor. */

/* --- Kart ve başlıklar --- */
body[data-tema="pinforge"] .em-acc-main .em-card {
  padding: var(--pf-4);
  box-shadow: none;
}
body[data-tema="pinforge"] .em-acc-main .em-card h5,
body[data-tema="pinforge"] .em-acc-main .em-card h6 {
  font: 700 15px/1.35 var(--pf-font); color: var(--pf-metin);
  display: flex; align-items: center; gap: 7px;
}
body[data-tema="pinforge"] .em-acc-main .em-card h5 i,
body[data-tema="pinforge"] .em-acc-main .em-card h6 i { color: var(--pf-primary); font-size: 15px; }
/* Bootstrap'in gradient metin sınıfı pinforge'da okunmuyordu */
body[data-tema="pinforge"] .em-acc-main .text-gradient {
  color: var(--pf-primary) !important;
  background: none !important; -webkit-text-fill-color: currentColor;
}
body[data-tema="pinforge"] .em-acc-main hr { border-color: var(--pf-cizgi); opacity: 1; }
body[data-tema="pinforge"] .em-acc-main .text-body-secondary { color: var(--pf-metin-2) !important; }

/* --- Uyarı kutuları: Bootstrap alert → pinforge şeridi --- */
body[data-tema="pinforge"] .em-acc-main .alert {
  border: 1px solid var(--pf-cizgi); border-left-width: 3px;
  border-radius: var(--pf-r-card); padding: 11px 13px;
  font: 500 13px/1.55 var(--pf-font);
  background: var(--pf-yuzey-2); color: var(--pf-metin);
}
body[data-tema="pinforge"] .em-acc-main .alert-success { border-left-color: #5FD16A; }
body[data-tema="pinforge"] .em-acc-main .alert-danger  { border-left-color: #F0503C; }
body[data-tema="pinforge"] .em-acc-main .alert-warning { border-left-color: #F0B429; }
body[data-tema="pinforge"] .em-acc-main .alert-info    { border-left-color: var(--pf-primary); }

/* --- Rozetler --- */
body[data-tema="pinforge"] .em-acc-main .badge {
  font: 700 10.5px/1.5 var(--pf-font); padding: 3px 8px; border-radius: 999px;
}
body[data-tema="pinforge"] .em-acc-main .badge.bg-success   { background: rgba(95, 209, 106, .2) !important; color: #8FE39A; }
body[data-tema="pinforge"] .em-acc-main .badge.bg-danger    { background: rgba(240, 80, 60, .2) !important;  color: #F79484; }
body[data-tema="pinforge"] .em-acc-main .badge.bg-warning   { background: rgba(240, 180, 41, .2) !important; color: #F5CE72; }
body[data-tema="pinforge"] .em-acc-main .badge.bg-secondary { background: rgba(140, 147, 160, .2) !important; color: #C3CAD4; }
body[data-tema="pinforge"] .em-acc-main .badge.bg-primary   { background: rgba(47, 127, 245, .2) !important;  color: #8FBEFF; }
[data-bs-theme="light"] body[data-tema="pinforge"] .em-acc-main .badge.bg-success   { color: #186024; }
[data-bs-theme="light"] body[data-tema="pinforge"] .em-acc-main .badge.bg-danger    { color: #A32A19; }
[data-bs-theme="light"] body[data-tema="pinforge"] .em-acc-main .badge.bg-warning   { color: #7A5200; }
[data-bs-theme="light"] body[data-tema="pinforge"] .em-acc-main .badge.bg-secondary { color: #414A57; }
[data-bs-theme="light"] body[data-tema="pinforge"] .em-acc-main .badge.bg-primary   { color: #14509C; }

/* --- Form alanları --- */
body[data-tema="pinforge"] .em-acc-main .form-label {
  font: 600 12px/1.3 var(--pf-font); color: var(--pf-metin-2); margin-bottom: 5px;
}
body[data-tema="pinforge"] .em-acc-main .form-control,
body[data-tema="pinforge"] .em-acc-main .form-select { min-height: 40px; font-size: 13.5px; }
body[data-tema="pinforge"] .em-acc-main .form-control::placeholder { color: var(--pf-metin-3); }
body[data-tema="pinforge"] .em-acc-main .form-check-input {
  background-color: var(--pf-yuzey-2); border-color: var(--pf-cizgi-guclu);
}
body[data-tema="pinforge"] .em-acc-main .form-check-input:checked {
  background-color: var(--pf-primary); border-color: var(--pf-primary);
}
body[data-tema="pinforge"] .em-acc-main .form-check-label { font-size: 13px; color: var(--pf-metin-2); }

/* --- Düğmeler --- */
body[data-tema="pinforge"] .em-acc-main .btn {
  border-radius: var(--pf-r-btn); font: 700 13px/1.3 var(--pf-font); min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
body[data-tema="pinforge"] .em-acc-main .btn-sm { min-height: 32px; font-size: 12px; padding: 4px 11px; }
body[data-tema="pinforge"] .em-acc-main .btn-outline-primary,
body[data-tema="pinforge"] .em-acc-main .btn-outline-secondary {
  border-color: var(--pf-cizgi); color: var(--pf-metin);
  background: transparent;
}
body[data-tema="pinforge"] .em-acc-main .btn-outline-primary:hover,
body[data-tema="pinforge"] .em-acc-main .btn-outline-secondary:hover {
  background: var(--pf-yuzey-2); border-color: var(--pf-cizgi-guclu); color: var(--pf-metin);
}
body[data-tema="pinforge"] .em-acc-main .btn-outline-danger {
  border-color: color-mix(in srgb, #F0503C 50%, transparent); color: #F79484; background: transparent;
}
body[data-tema="pinforge"] .em-acc-main .btn-outline-danger:hover { background: rgba(240, 80, 60, .14); color: #F79484; }
body[data-tema="pinforge"] .em-acc-main .btn-warning { background: #F0B429; border-color: #F0B429; color: #241800; }
body[data-tema="pinforge"] .em-acc-main .btn-danger  { background: #CF3A26; border-color: #CF3A26; color: #fff; }
body[data-tema="pinforge"] .em-acc-main .btn-light   {
  background: var(--pf-yuzey-2); border-color: var(--pf-cizgi); color: var(--pf-metin);
}

/* --- Tablolar --- */
body[data-tema="pinforge"] .em-acc-main .table { font-size: 13px; margin-bottom: 0; }
body[data-tema="pinforge"] .em-acc-main .table thead th {
  font: 700 11px/1.3 var(--pf-font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--pf-metin-3); border-bottom: 1px solid var(--pf-cizgi); padding: 9px 10px;
}
body[data-tema="pinforge"] .em-acc-main .table tbody td { padding: 11px 10px; vertical-align: middle; }
body[data-tema="pinforge"] .em-acc-main .table tbody tr:hover > * { background: var(--pf-yuzey-2); }
body[data-tema="pinforge"] .em-acc-main .table-responsive {
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card); overflow: auto;
}

/* --- Bildirim listesi --- */
body[data-tema="pinforge"] .em-acc-main .em-bildirim {
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); padding: 12px 14px; color: var(--pf-metin);
}
body[data-tema="pinforge"] .em-acc-main .em-bildirim.yeni {
  border-left: 3px solid var(--pf-primary);
  background: color-mix(in srgb, var(--pf-primary) 8%, var(--pf-yuzey-2));
}
body[data-tema="pinforge"] .em-acc-main .em-bildirim-ic {
  background: color-mix(in srgb, var(--pf-primary) 16%, transparent);
  color: var(--pf-primary-2, var(--pf-primary)); border-radius: 10px;
}
body[data-tema="pinforge"] .em-acc-main .em-bildirim-baslik {
  font: 700 13.5px/1.4 var(--pf-font); color: var(--pf-metin);
}
body[data-tema="pinforge"] .em-acc-main .em-bildirim-mesaj { font-size: 12.5px; color: var(--pf-metin-2); }
body[data-tema="pinforge"] .em-acc-main .em-bildirim-tarih { font-size: 11px; color: var(--pf-metin-3); }

/* --- Boş durum --- */
body[data-tema="pinforge"] .em-acc-main .text-center.py-5,
body[data-tema="pinforge"] .em-acc-main .em-bos {
  color: var(--pf-metin-3);
}

/* =====================================================================
   ÜST ÇUBUK: BİLDİRİM ZİLİ
   ---------------------------------------------------------------------
   Bildirimler yalnızca hesap menüsünün içinde bir satırdı; kullanıcı ne
   geldiğini görmek için sayfa değiştirmek zorundaydı. Zil artık son 6
   kaydı açılır listede gösteriyor.
   ===================================================================== */
body[data-tema="pinforge"] .pf-zil-sar { position: relative; }

body[data-tema="pinforge"] .pf-zil-menu {
  width: min(340px, calc(100vw - 24px));
  padding: 0;
  background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  box-shadow: var(--pf-sh-3);
  overflow: hidden;
}

body[data-tema="pinforge"] .pf-zil-bas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pf-3);
  padding: 10px var(--pf-4);
  border-bottom: 1px solid var(--pf-cizgi);
  font: 700 13px/1.2 var(--pf-font); color: var(--pf-metin);
}
body[data-tema="pinforge"] .pf-zil-tumu {
  border: 0; background: none; padding: 0;
  font: 600 11.5px/1.2 var(--pf-font); color: var(--pf-primary-2);
  cursor: pointer;
}
body[data-tema="pinforge"] .pf-zil-tumu:hover { text-decoration: underline; }
body[data-tema="pinforge"] .pf-zil-tumu:disabled { opacity: .5; cursor: default; }

body[data-tema="pinforge"] .pf-zil-liste {
  list-style: none; margin: 0; padding: 0;
  max-height: 340px; overflow-y: auto;
}
body[data-tema="pinforge"] .pf-zil-liste a {
  display: grid; gap: 2px;
  padding: 10px var(--pf-4);
  border-bottom: 1px solid var(--pf-cizgi);
  text-decoration: none; color: inherit;
}
body[data-tema="pinforge"] .pf-zil-liste li:last-child a { border-bottom: 0; }
body[data-tema="pinforge"] .pf-zil-liste a:hover { background: var(--pf-yuzey-2); }
body[data-tema="pinforge"] .pf-zil-liste b    { font: 600 12.5px/1.35 var(--pf-font); color: var(--pf-metin); }
body[data-tema="pinforge"] .pf-zil-liste span { font-size: 11.5px; color: var(--pf-metin-2); }
body[data-tema="pinforge"] .pf-zil-liste time { font-size: 10.5px; color: var(--pf-metin-3); }

/* Okunmamış: sol kenarda ince marka şeridi. Nokta yerine şerit, çünkü
   satır zaten dar ve nokta metni sağa itiyordu. */
body[data-tema="pinforge"] .pf-zil-liste a.yeni {
  border-left: 3px solid var(--pf-primary);
  padding-left: calc(var(--pf-4) - 3px);
  background: rgba(var(--pf-primary-rgb), .05);
}

body[data-tema="pinforge"] .pf-zil-bos {
  margin: 0; padding: var(--pf-5) var(--pf-4);
  text-align: center; font-size: 12.5px; color: var(--pf-metin-3);
}
body[data-tema="pinforge"] .pf-zil-alt {
  display: block; padding: 9px var(--pf-4);
  border-top: 1px solid var(--pf-cizgi);
  background: var(--pf-yuzey-2);
  text-align: center; text-decoration: none;
  font: 600 12px/1.2 var(--pf-font); color: var(--pf-primary-2);
}
body[data-tema="pinforge"] .pf-zil-alt:hover { background: var(--pf-yuzey-3); }

/* Zil ve mesaj rozetleri ikonun köşesine otursun; taban katman 4px
   veriyor ama pinforge ikon düğmesi daha küçük.

   Zemin --pf-danger DEĞİL: koyu moddaki #F0503C beyaz metinle 3.55:1
   veriyor, rozetin içindeki rakam 10 piksel ve kalın da olsa AA'nın
   altında kalıyor. Uyarı kırmızısı kimliği korunup ton koyulaştırıldı
   (#C62D1B → 5.54:1); açık modun #CF3A26'sı zaten 4.90:1 geçiyor. */
body[data-tema="pinforge"] {
  --pf-rozet-zemin: #C62D1B;
}
[data-bs-theme="light"] body[data-tema="pinforge"] {
  --pf-rozet-zemin: var(--pf-danger);
}
body[data-tema="pinforge"] .pf-ikon-btn .em-icon-badge {
  top: 1px; right: 1px;
  background: var(--pf-rozet-zemin); color: #fff;
  box-shadow: 0 0 0 2px var(--pf-bg);
}

/* =====================================================================
   MESAJLARIM — alıcı ↔ satıcı yazışması
   ===================================================================== */
body[data-tema="pinforge"] .em-msj-avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--pf-r-pill);
  display: grid; place-items: center;
  background: var(--pf-yuzey-3); color: var(--pf-metin);
  font: 700 13px/1 var(--pf-font);
}

/* --- Konuşma listesi --- */
body[data-tema="pinforge"] .em-msj-liste { list-style: none; margin: 0; padding: 0; }
body[data-tema="pinforge"] .em-msj-liste > li + li { border-top: 1px solid var(--pf-cizgi); }
body[data-tema="pinforge"] .em-msj-liste a {
  display: flex; align-items: center; gap: var(--pf-3);
  padding: 12px var(--pf-4);
  text-decoration: none; color: inherit;
}
body[data-tema="pinforge"] .em-msj-liste a:hover { background: var(--pf-yuzey-2); }
body[data-tema="pinforge"] .em-msj-liste a.okunmamis { background: rgba(var(--pf-primary-rgb), .06); }

body[data-tema="pinforge"] .em-msj-oge-metin { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
body[data-tema="pinforge"] .em-msj-oge-metin b { font: 600 13px/1.3 var(--pf-font); color: var(--pf-metin); }
/* Özet tek satırda kalsın; uzun mesaj satır yüksekliğini bozuyordu. */
body[data-tema="pinforge"] .em-msj-oge-metin small {
  font-size: 12px; color: var(--pf-metin-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body[data-tema="pinforge"] .em-msj-oge-sag {
  flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; position: relative;
}
body[data-tema="pinforge"] .em-msj-oge-sag time { font-size: 10.5px; color: var(--pf-metin-3); }
body[data-tema="pinforge"] .em-msj-rol {
  font: 600 10px/1 var(--pf-font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--pf-metin-3);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-pill);
  padding: 2px 7px;
}
body[data-tema="pinforge"] .em-msj-oge-sag .em-icon-badge {
  position: static; background: var(--pf-primary-dolu);
}

/* --- Konuşma detayı --- */
body[data-tema="pinforge"] .em-msj-bas {
  display: flex; align-items: center; gap: var(--pf-3);
  padding-bottom: var(--pf-3);
  border-bottom: 1px solid var(--pf-cizgi);
  margin-bottom: var(--pf-3);
}
body[data-tema="pinforge"] .em-msj-bas-metin { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
body[data-tema="pinforge"] .em-msj-bas-metin b { font: 700 14px/1.3 var(--pf-font); color: var(--pf-metin); }
body[data-tema="pinforge"] .em-msj-bas-metin small { font-size: 11.5px; color: var(--pf-metin-2); }

body[data-tema="pinforge"] .em-msj-akis {
  display: grid; gap: var(--pf-2);
  max-height: 52vh; overflow-y: auto;
  padding: var(--pf-1) 2px var(--pf-3);
}
body[data-tema="pinforge"] .em-msj-satir { display: flex; }
body[data-tema="pinforge"] .em-msj-satir.benim { justify-content: flex-end; }

body[data-tema="pinforge"] .em-msj-balon {
  max-width: min(78%, 520px);
  padding: 8px 12px;
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  background: var(--pf-yuzey-2);
}
/* Kendi mesajı marka renginde, karşı taraf nötr yüzeyde. İki tarafı da
   renklendirmek kimin yazdığı ayrımını zorlaştırıyordu. */
body[data-tema="pinforge"] .em-msj-satir.benim .em-msj-balon {
  background: var(--pf-primary-dolu); border-color: transparent;
}
body[data-tema="pinforge"] .em-msj-balon p {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--pf-metin);
  overflow-wrap: anywhere;                 /* boşluksuz uzun kod taşmasın */
}
body[data-tema="pinforge"] .em-msj-satir.benim .em-msj-balon p { color: #fff; }
body[data-tema="pinforge"] .em-msj-balon time {
  display: block; margin-top: 3px; font-size: 10.5px; color: var(--pf-metin-3);
}
/* .78 alfa mavi zeminde 3.84:1 veriyordu; 10.5 piksellik zaman damgası
   "büyük metin" sayılmadığı için AA eşiği 4.5. .90 → 4.59:1. */
body[data-tema="pinforge"] .em-msj-satir.benim .em-msj-balon time { color: rgba(255, 255, 255, .90); }

body[data-tema="pinforge"] .em-msj-yaz {
  display: flex; align-items: flex-end; gap: var(--pf-2);
  padding-top: var(--pf-3); border-top: 1px solid var(--pf-cizgi);
}
body[data-tema="pinforge"] .em-msj-yaz textarea {
  flex: 1 1 auto; min-width: 0; resize: vertical;
  padding: 9px 12px;
  background: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
  color: var(--pf-metin); font: 400 13px/1.5 var(--pf-font);
}
body[data-tema="pinforge"] .em-msj-yaz textarea:focus {
  outline: none; border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px rgba(var(--pf-primary-rgb), .18);
}
body[data-tema="pinforge"] .em-msj-ipucu {
  margin: var(--pf-2) 0 0; font-size: 11.5px; color: var(--pf-metin-3);
}
body[data-tema="pinforge"] .em-msj-ipucu i { color: var(--pf-warning); }

body[data-tema="pinforge"] .em-bos-ikon { font-size: 34px; color: var(--pf-metin-3); }

@media (max-width: 575.98px) {
  /* Dar ekranda rol etiketi satırı iki kata çıkarıyor; sayı ve tarih yeter. */
  body[data-tema="pinforge"] .em-msj-rol { display: none; }
  body[data-tema="pinforge"] .em-msj-balon { max-width: 88%; }
  body[data-tema="pinforge"] .em-msj-akis { max-height: 60vh; }
}

/* Konuşma başlığındaki sipariş bağlantısı: küçük ama tıklanabilir
   olduğu belli olmalı, yoksa kullanıcı düz metin sanıyor. */
body[data-tema="pinforge"] .em-msj-sip {
  color: var(--pf-primary-2); text-decoration: none; font-weight: 600;
  white-space: nowrap;
}
body[data-tema="pinforge"] .em-msj-sip:hover { text-decoration: underline; }
body[data-tema="pinforge"] .em-msj-sip i { font-size: .85em; opacity: .75; }

/* Satıcıya özel mesaj düğmesi — satın alma formuyla favori arasında. */
body[data-tema="pinforge"] .pf-satici-mesaj { display: block; margin-top: var(--pf-2); }

/* =====================================================================
   BAKİYE YÜKLEME — ÖDEME YÖNTEMİ IZGARASI
   ---------------------------------------------------------------------
   Yöntemler tam genişlik dikey liste olarak diziliyordu. 7 yöntemde şerit
   ekranı aşıyor ve kullanıcı kaydırmadan seçeneklerin tamamını göremiyor,
   "kripto da varmış" ancak aşağı inince anlaşılıyordu. Izgara hepsini tek
   ekrana sığdırır; başlıklar kart/kripto ayrımını taşır.
   ===================================================================== */
body[data-tema="pinforge"] .pf-yontem-grup {
  display: flex; align-items: center; gap: 6px;
  margin: var(--pf-4) 0 var(--pf-2);
  font: 600 11.5px/1 var(--pf-font);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--pf-metin-3);
}
body[data-tema="pinforge"] .pf-yontem-grup:first-of-type { margin-top: var(--pf-3); }
body[data-tema="pinforge"] .pf-yontem-grup i { font-size: 13px; }

body[data-tema="pinforge"] .pf-yontem-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

/* Izgara içindeki kart: eski satır düzeninin (ikon | metin | ok) yerine
   dikey yığın. Sağdaki chevron kaldırıldı — ızgarada yön göstermiyor,
   sadece yer kaplıyordu. */
body[data-tema="pinforge"] .pf-yontem-izgara .pf-yontem {
  position: relative;
  display: grid; gap: 2px; align-content: start;
  width: 100%;
  padding: 12px 12px 32px;
  text-align: left;
  background: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  color: var(--pf-metin);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
body[data-tema="pinforge"] .pf-yontem-izgara .pf-yontem:hover {
  border-color: var(--pf-primary); background: var(--pf-yuzey-3);
}
body[data-tema="pinforge"] .pf-yontem-izgara .pf-yontem:active { transform: translateY(1px); }
body[data-tema="pinforge"] .pf-yontem-izgara .pf-yontem:focus-visible {
  outline: none; box-shadow: var(--pf-sh-odak);
}
/* Önerilen yöntem marka çerçevesiyle ayrışır; ilk bakışta oraya gidilsin. */
body[data-tema="pinforge"] .pf-yontem-izgara .pf-yontem.onerilen {
  border-color: var(--pf-primary);
  background: rgba(var(--pf-primary-rgb), .07);
}

/* display:block YAZMAYIN. Taban kural (.pf-yontem-ikon) ikona 38×38'lik
   bir kutu + `display:grid; place-items:center` veriyor; block'a çevirmek
   kutuyu bırakıp ORTALAMAYI öldürüyor ve glif sol üst köşeye yapışıyor —
   ikonlar yamuk görünüyordu. Izgarada kutu sola hizalansın diye
   `margin-right:auto` kullanılıyor, display'e dokunulmuyor. */
body[data-tema="pinforge"] .pf-yontem-izgara .pf-yontem-ikon {
  margin: 0 auto 6px 0;
  font-size: 18px; color: var(--pf-primary-2);
}
/* Bootstrap Icons glifleri vertical-align: -.125em taşıyor; kutunun
   ortasına yerleşen ikon ~2 piksel aşağı kayıyordu. */
body[data-tema="pinforge"] .pf-yontem-ikon i { display: block; line-height: 1; }
body[data-tema="pinforge"] .pf-yontem-ikon i::before { display: block; vertical-align: 0; line-height: 1; }
/* Logo yüklenmişse ikon kutusunun içine sığsın. */
body[data-tema="pinforge"] .pf-yontem-ikon img {
  max-width: 24px; max-height: 24px; width: auto; height: auto; object-fit: contain;
}
body[data-tema="pinforge"] .pf-yontem-izgara .pf-yontem b {
  font: 700 13px/1.3 var(--pf-font); color: var(--pf-metin);
}
body[data-tema="pinforge"] .pf-yontem-izgara .pf-yontem small {
  font-size: 11.5px; line-height: 1.45; color: var(--pf-metin-2);
}

/* Komisyon / "Önerilen" rozeti kartın alt köşesinde: ad ve açıklama
   satırlarını itmesin, kartlar aynı yükseklikte kalsın. */
body[data-tema="pinforge"] .pf-yontem-rozet {
  position: absolute; left: 12px; bottom: 10px;
  font-style: normal; font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--pf-r-pill);
  color: var(--pf-metin-3); border: 1px solid var(--pf-cizgi);
}
body[data-tema="pinforge"] .pf-yontem-rozet.onerilen {
  color: #fff; background: var(--pf-primary-dolu); border-color: transparent;
}

@media (max-width: 420px) {
  body[data-tema="pinforge"] .pf-yontem-izgara {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* Satın alma onay kutuları — Mesafeli Sözleşmeler Yönetmeliği gereği
   sipariş öncesi işaretlenmesi zorunlu. */
body[data-tema="pinforge"] .em-onay-kutular { display: grid; gap: 8px; margin: var(--pf-3) 0; }
body[data-tema="pinforge"] .em-onay {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; line-height: 1.5; color: var(--pf-metin-2); cursor: pointer;
}
body[data-tema="pinforge"] .em-onay input {
  flex: 0 0 auto; margin-top: 2px; width: 15px; height: 15px;
  accent-color: var(--pf-primary); cursor: pointer;
}
body[data-tema="pinforge"] .em-onay b { color: var(--pf-metin); font-weight: 600; }
body[data-tema="pinforge"] .em-onay a { color: var(--pf-primary-2); }

/* =====================================================================
   SEPET — BAKİYE YETMEDİĞİNDE ÖDEME SEÇİMİ
   ---------------------------------------------------------------------
   Eskiden yalnızca "Bakiye Yükle" bağlantısı vardı; müşteri ayrı sayfaya
   gidip para yükleyip sepete dönmek zorundaydı. Artık yöntem burada
   seçiliyor.
   ===================================================================== */
body[data-tema="pinforge"] .pf-eksik-satir {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 0; margin-top: var(--pf-2);
  border-top: 1px dashed var(--pf-cizgi);
  font-size: 13px; color: var(--pf-metin-2);
}
body[data-tema="pinforge"] .pf-eksik-satir b { font-size: 17px; color: var(--pf-metin); }
body[data-tema="pinforge"] .pf-eksik-not {
  margin: 0 0 var(--pf-3); font-size: 11.5px; line-height: 1.5; color: var(--pf-metin-3);
}

body[data-tema="pinforge"] .pf-odeme-sec { display: grid; gap: 8px; margin-bottom: var(--pf-3); }
body[data-tema="pinforge"] .pf-odeme-oge { display: block; cursor: pointer; }
/* Radyo düğmesi görsel olarak gizli ama klavyeyle erişilebilir kalıyor;
   seçili durum kutunun kendisinde gösteriliyor. */
body[data-tema="pinforge"] .pf-odeme-oge input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
body[data-tema="pinforge"] .pf-odeme-kutu {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
  transition: border-color .12s ease, background .12s ease;
}
body[data-tema="pinforge"] .pf-odeme-oge input:checked + .pf-odeme-kutu {
  border-color: var(--pf-primary); background: rgba(var(--pf-primary-rgb), .08);
}
body[data-tema="pinforge"] .pf-odeme-oge input:focus-visible + .pf-odeme-kutu {
  box-shadow: var(--pf-sh-odak);
}
body[data-tema="pinforge"] .pf-odeme-kutu i   { font-size: 18px; color: var(--pf-primary-2); }
/* Logo yüklenmişse ikonun yerini alır; yükseklik sabit ki satır zıplamasın. */
body[data-tema="pinforge"] .pf-odeme-kutu img { height: 20px; width: auto; max-width: 76px; object-fit: contain; }
body[data-tema="pinforge"] .pf-odeme-kutu b   { flex: 1 1 auto; font: 600 13px/1.3 var(--pf-font); color: var(--pf-metin); }
body[data-tema="pinforge"] .pf-odeme-kutu em  { font-style: normal; font-size: 11px; color: var(--pf-metin-3); }

body[data-tema="pinforge"] .pf-bakiye-alt { display: block; margin-top: var(--pf-2); text-align: center; font-size: 12px; }

/* =====================================================================
   ÖDEME PENCERESİ
   ---------------------------------------------------------------------
   Ödeme sayfasına yönlendirmek yerine sepetin üstünde açılıyor: müşteri
   sepetinden ayrılmıyor ve iptal ederse sepeti yerinde kalıyor.

   Masaüstü : ortalanmış diyalog (800px)
   Mobil    : aşağıdan gelen, parmakla kapatılabilen tam ekran sayfa
   ===================================================================== */
body[data-tema="pinforge"] .pf-odeme-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
body[data-tema="pinforge"] .pf-odeme-perde {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .2s ease;
}
body[data-tema="pinforge"] .pf-odeme-modal.acik .pf-odeme-perde { opacity: 1; }

body[data-tema="pinforge"] .pf-odeme-panel {
  position: relative;
  display: flex; flex-direction: column;
  width: 800px; max-width: 92vw;
  max-height: 90vh;
  background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-lg);
  box-shadow: var(--pf-sh-3);
  overflow: hidden;
  /* Açılış: hafifçe aşağıdan yukarı. */
  transform: translateY(12px); opacity: 0;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1), opacity .22s ease;
}
body[data-tema="pinforge"] .pf-odeme-modal.acik .pf-odeme-panel {
  transform: translateY(0); opacity: 1;
}

/* Sürükleme tutamacı yalnızca mobilde görünür. */
body[data-tema="pinforge"] .pf-odeme-tutamac { display: none; }

body[data-tema="pinforge"] .pf-odeme-bas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pf-3);
  padding: 12px var(--pf-4);
  border-bottom: 1px solid var(--pf-cizgi);
  flex-shrink: 0;
}
body[data-tema="pinforge"] .pf-odeme-bas b { font: 700 14px/1.2 var(--pf-font); color: var(--pf-metin); }
body[data-tema="pinforge"] .pf-odeme-kapat {
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--pf-r-btn);
  color: var(--pf-metin-2); font-size: 14px; cursor: pointer;
}
body[data-tema="pinforge"] .pf-odeme-kapat:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }

body[data-tema="pinforge"] .pf-odeme-govde {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* Ödeme sağlayıcısının sayfası; yükseklik içeriğe göre değil sabit
   veriliyor çünkü çapraz alan adı yüzünden içeriği ölçemiyoruz. */
body[data-tema="pinforge"] .pf-odeme-govde iframe {
  display: block; width: 100%; height: 68vh; min-height: 420px; border: 0;
}

body[data-tema="pinforge"] .pf-odeme-yukleniyor {
  display: grid; place-items: center; gap: var(--pf-3);
  padding: var(--pf-8) var(--pf-4); text-align: center;
}
body[data-tema="pinforge"] .pf-odeme-yukleniyor p {
  margin: 0; font-size: 13px; color: var(--pf-metin-2);
}
body[data-tema="pinforge"] .pf-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--pf-cizgi);
  border-top-color: var(--pf-primary);
  animation: pfDon .7s linear infinite;
}
@keyframes pfDon { to { transform: rotate(360deg); } }
/* Hareket hassasiyetinde dönme durur; metin yine bilgi veriyor. */
@media (prefers-reduced-motion: reduce) {
  body[data-tema="pinforge"] .pf-spinner { animation: none; }
  body[data-tema="pinforge"] .pf-odeme-panel { transition: none; }
}

/* ---- Mobil: alt sayfa ---- */
@media (max-width: 767.98px) {
  body[data-tema="pinforge"] .pf-odeme-modal { align-items: flex-end; }
  body[data-tema="pinforge"] .pf-odeme-panel {
    width: 100vw; max-width: 100vw;
    height: 92dvh; max-height: 92dvh;
    border-radius: var(--pf-r-lg) var(--pf-r-lg) 0 0;
    border-bottom: 0;
    transform: translateY(100%);
  }
  body[data-tema="pinforge"] .pf-odeme-modal.acik .pf-odeme-panel { transform: translateY(0); }
  /* Sürüklenirken geçiş kapanır, parmağı birebir takip etsin. */
  body[data-tema="pinforge"] .pf-odeme-panel.suruklenen { transition: none; }

  body[data-tema="pinforge"] .pf-odeme-tutamac {
    display: grid; place-items: center;
    width: 100%; padding: 12px 0 6px;
    background: none; border: 0; cursor: grab;
    touch-action: none; flex-shrink: 0;
  }
  body[data-tema="pinforge"] .pf-odeme-tutamac::before {
    content: ''; display: block;
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--pf-cizgi-guclu);
  }
  body[data-tema="pinforge"] .pf-odeme-govde iframe { height: 100%; min-height: 0; }
}

/* =====================================================================
   ÖDEME (CHECKOUT) SAYFASI
   ---------------------------------------------------------------------
   Ödeme seçenekleri sepetin kenar çubuğundaydı; sepet hem ürün düzenleme
   hem ödeme ekranı olmaya çalışıyor, ikisi de sıkışıyordu. Artık ayrı
   sayfa: solda yöntemler, sağda yapışkan özet.
   ===================================================================== */
body[data-tema="pinforge"] .pf-odeme-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--pf-4);
  align-items: start;
}
body[data-tema="pinforge"] .pf-odeme-duzen .pf-ozet { position: sticky; top: var(--pf-4); }

/* --- Ödeme yolu (radyo grubu) --- */
body[data-tema="pinforge"] .pf-odeme-yollar { display: grid; gap: 0; }

body[data-tema="pinforge"] .pf-odeme-yol { display: block; cursor: pointer; }
body[data-tema="pinforge"] .pf-odeme-yol input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
body[data-tema="pinforge"] .pf-odeme-yol-bas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--pf-cizgi);
}
/* İlk yolun üst çizgisi olmasın; panel başlığıyla çakışıyor. */
body[data-tema="pinforge"] .pf-odeme-yol:first-of-type .pf-odeme-yol-bas { border-top: 0; padding-top: 4px; }

body[data-tema="pinforge"] .pf-odeme-yol-bas i { font-size: 17px; color: var(--pf-metin-3); }
body[data-tema="pinforge"] .pf-odeme-yol input:checked + .pf-odeme-yol-bas i { color: var(--pf-primary); }
body[data-tema="pinforge"] .pf-odeme-yol-bas b { font: 650 14px/1.3 var(--pf-font); color: var(--pf-metin); }
body[data-tema="pinforge"] .pf-odeme-yol-bas em {
  flex: 1 1 100%; margin-left: 27px;
  font-style: normal; font-size: 11.5px; color: var(--pf-metin-3);
}
body[data-tema="pinforge"] .pf-odeme-yol input:focus-visible + .pf-odeme-yol-bas {
  outline: 2px solid var(--pf-primary); outline-offset: 2px; border-radius: var(--pf-r-btn);
}

/* Seçili yolun gövdesi; girintili ki hangi yola ait olduğu belli olsun. */
body[data-tema="pinforge"] .pf-odeme-yol-govde {
  padding: 0 0 var(--pf-4) 27px;
}

body[data-tema="pinforge"] .pf-cuzdan-satir {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin-bottom: var(--pf-2);
  background: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
  font-size: 12.5px; color: var(--pf-metin-2);
}
body[data-tema="pinforge"] .pf-cuzdan-satir b { font-size: 14px; color: var(--pf-metin); }

body[data-tema="pinforge"] .pf-odeme-not {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: var(--pf-3);
  font-size: 11.5px; line-height: 1.5; color: var(--pf-metin-2);
}
body[data-tema="pinforge"] .pf-odeme-not i { flex: 0 0 auto; margin-top: 1px; color: var(--pf-primary-2); }
body[data-tema="pinforge"] .pf-odeme-not.ok i { color: var(--pf-success); }

/* Sağlayıcı kartları — inovapin'deki gibi yan yana, logo + komisyon. */
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-odeme-sec {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-odeme-kutu {
  flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px; min-height: 96px;
}
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-odeme-kutu img { height: 22px; max-width: 84px; }
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-odeme-kutu i   { font-size: 20px; }
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-odeme-kutu b   { flex: 0 0 auto; font-size: 12.5px; }
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-odeme-kutu em  {
  margin-top: auto; padding: 2px 7px;
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-pill);
  font-size: 10.5px; color: var(--pf-metin-3);
}

/* --- Havale / Papara hesap kartları ---
   Ödeme ekranında iki hesap yan yana sığıyor; tek sütunda alt alta
   dizilince blok gereksiz uzuyor ve "Alışverişi Tamamla" ekrandan
   çıkıyordu. Dar ekranda tek sütuna düşer. */
body[data-tema="pinforge"] .pf-hesap-baslik {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pf-metin-3);
}
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-hesap {
  margin-bottom: 0;
}
body[data-tema="pinforge"] .pf-hesap-baslik + .pf-hesap,
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-hesap ~ .pf-hesap {
  margin-top: 8px;
}
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-hesap-ust {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 11.5px; color: var(--pf-metin-2);
}
/* Logo satır yüksekliğine oturur; sınıfsız <img> doğal boyutunda
   basılıp kartı eziyordu. */
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-hesap-ust .pf-banka-logo {
  height: 15px; max-width: 66px; vertical-align: middle; margin: 0;
}
body[data-tema="pinforge"] .pf-odeme-yol-govde .pf-hesap-no code { font-size: 12px; }

/* --- Sağ özet --- */
body[data-tema="pinforge"] .pf-ozet-kupon {
  margin: var(--pf-2) 0 var(--pf-3);
  padding-bottom: var(--pf-3);
  border-bottom: 1px solid var(--pf-cizgi);
  font-size: 11.5px; line-height: 1.5; color: var(--pf-metin-3);
}
body[data-tema="pinforge"] .pf-ozet-kupon a { color: var(--pf-primary-2); }

@media (max-width: 991.98px) {
  body[data-tema="pinforge"] .pf-odeme-duzen { grid-template-columns: minmax(0, 1fr); }
  body[data-tema="pinforge"] .pf-odeme-duzen .pf-ozet { position: static; }
}
@media (max-width: 575.98px) {
  body[data-tema="pinforge"] .pf-odeme-yol-govde { padding-left: 0; }
  body[data-tema="pinforge"] .pf-odeme-yol-bas em { margin-left: 0; }
}

/* =====================================================================
   BLOG SAYFALARI — liste (blog) + yazı (oku)
   Ana sayfa haber kartı (.pf-blog) dilini tam sayfaya taşır.
   ===================================================================== */

/* Liste sayfasında kartlar biraz daha geniş ve özet metinli */
.pf-blog-sayfa { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.pf-blog-ozet {
  font-size: 12px; line-height: 1.55; color: var(--pf-metin-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Yazı düzeni: sol makale, sağ diğer yazılar --- */
.pf-makale-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--pf-4); align-items: start;
}
.pf-makale {
  overflow: hidden;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-makale-kapak { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--pf-yuzey-2); }
.pf-makale-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-makale-govde { padding: var(--pf-4); }
.pf-makale-govde h1 {
  margin: 0 0 var(--pf-2); font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.3;
}
.pf-makale-meta {
  display: flex; flex-wrap: wrap; gap: var(--pf-3);
  margin-bottom: var(--pf-3); padding-bottom: var(--pf-3);
  border-bottom: 1px solid var(--pf-cizgi);
  font-size: 12px; color: var(--pf-metin-3);
}
.pf-makale-icerik { font-size: 14px; line-height: 1.8; color: var(--pf-metin); white-space: pre-line; }

/* --- Yorumlar --- */
.pf-yorum-kutu {
  margin-top: var(--pf-4); padding: var(--pf-4);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-yorum-kutu h2 { margin: 0 0 var(--pf-3); font-size: 15px; font-weight: 700; }
.pf-yorum-form { display: flex; flex-direction: column; gap: var(--pf-2); margin-bottom: var(--pf-4); }
.pf-yorum-form .pf-btn { align-self: flex-start; }
.pf-yorum-giris {
  margin-bottom: var(--pf-3); padding: var(--pf-3);
  background: var(--pf-yuzey-2); border-radius: 10px;
  font-size: 13px; color: var(--pf-metin-2);
}
.pf-yorum-giris a { color: var(--pf-primary-2); font-weight: 600; }
.pf-yorum-yok { margin: 0; font-size: 13px; color: var(--pf-metin-3); }
.pf-yorum-satir {
  display: flex; gap: var(--pf-3);
  padding: var(--pf-3) 0; border-bottom: 1px solid var(--pf-cizgi);
}
.pf-yorum-satir:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-yorum-satir > i { font-size: 26px; color: var(--pf-metin-3); flex: 0 0 auto; }
.pf-yorum-satir b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.pf-yorum-satir p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pf-metin-2); overflow-wrap: anywhere; }

/* --- Sağ sütun: diğer yazılar --- */
.pf-yan-kutu {
  padding: var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-yan-kutu h3 { margin: 0 0 var(--pf-2); font-size: 13.5px; font-weight: 700; }
.pf-yan-yazi {
  display: flex; gap: var(--pf-2); align-items: flex-start;
  padding: var(--pf-2) 0; border-bottom: 1px solid var(--pf-cizgi);
  text-decoration: none; color: var(--pf-metin);
}
.pf-yan-yazi:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-yan-yazi:hover b { color: var(--pf-primary-2); }
.pf-yan-yazi img { width: 84px; height: 54px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.pf-yan-yazi b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.pf-yan-yazi small { font-size: 11px; color: var(--pf-metin-3); }

@media (max-width: 991.98px) {
  .pf-makale-duzen { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   İLETİŞİM SAYFASI + GENEL FORM DİLİ
   ===================================================================== */
.pf-form { display: flex; flex-direction: column; gap: var(--pf-3); }
.pf-alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* .pf-ikili genel kullanımda satır içi çift; form içinde iki eşit sütun olur */
.pf-form .pf-ikili {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-3); align-items: start;
}
.pf-form textarea.pf-girdi { height: auto; resize: vertical; line-height: 1.6; padding-top: 9px; }

.pf-iletisim-duzen {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--pf-4); align-items: start;
}
.pf-iletisim-form {
  padding: var(--pf-4);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-iletisim-metin { margin: 0 0 var(--pf-3); font-size: 12.5px; line-height: 1.6; color: var(--pf-metin-2); }
.pf-iletisim-satir {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 13px;
  border-bottom: 1px solid var(--pf-cizgi);
}
.pf-iletisim-satir:last-of-type { border-bottom: 0; }
.pf-iletisim-satir i { color: var(--pf-primary-2); flex: 0 0 auto; }
.pf-iletisim-satir span { overflow-wrap: anywhere; }
.pf-iletisim-sosyal { display: flex; gap: 8px; margin-top: var(--pf-3); }
.pf-iletisim-sosyal a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--pf-cizgi); border-radius: 10px;
  color: var(--pf-metin-2); text-decoration: none; font-size: 15px;
  transition: border-color var(--pf-hiz-kart) ease-out, color var(--pf-hiz-kart) ease-out;
}
.pf-iletisim-sosyal a:hover { border-color: var(--pf-primary); color: var(--pf-primary-2); }
.pf-iletisim-sss {
  margin-top: var(--pf-3); padding: var(--pf-2) var(--pf-3);
  background: var(--pf-yuzey-2); border-radius: 10px;
  font-size: 12px; color: var(--pf-metin-2);
}
.pf-iletisim-sss a { color: var(--pf-primary-2); font-weight: 600; }

@media (max-width: 991.98px) {
  .pf-iletisim-duzen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .pf-form .pf-ikili { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   TEKİL MAĞAZA SAYFASI (satıcı vitrini)
   ===================================================================== */
.pf-magaza-hero {
  overflow: hidden; margin-bottom: var(--pf-4);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-magaza-banner {
  height: 150px;
  background: linear-gradient(120deg, var(--pf-yuzey-2), var(--pf-yuzey-3));
  background-size: cover; background-position: center;
}
.pf-magaza-bas {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pf-3);
  padding: 0 var(--pf-4) var(--pf-3);
}
/* Kapağın üzerine yalnızca logo taşar; ad ve rozetler kapağın altında kalır
   (satır negatif margin alınca dar ekranda ad kapak görselinin üstüne biniyordu). */
.pf-magaza-logo { margin-top: -34px; }
.pf-magaza-logo {
  display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
  width: 84px; height: 84px; font-size: 30px; color: var(--pf-metin-3);
  background: var(--pf-yuzey-2); border: 3px solid var(--pf-yuzey-1); border-radius: 20px;
}
.pf-magaza-logo img { width: 100%; height: 100%; object-fit: cover; }
.pf-magaza-kimlik { flex: 1 1 260px; min-width: 0; }
.pf-magaza-ad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-magaza-ad h1 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.pf-magaza-ozet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 4px; font-size: 12px; color: var(--pf-metin-2);
}
.pf-magaza-ozet .pf-mag-puan { color: var(--pf-warning); font-weight: 650; }
.pf-magaza-ozet .bi-circle-fill { font-size: 7px; }
.pf-magaza-ozet .pf-cevrimici { color: var(--pf-success); }
.pf-magaza-eylem { display: flex; gap: 8px; align-items: center; }
.pf-magaza-eylem .pf-btn.takipte { color: var(--pf-danger); border-color: var(--pf-danger); }
.pf-magaza-eylem .pf-btn.takipte:hover { background: var(--pf-danger); color: #fff; }

/* Guven paneli + performans */
.pf-magaza-guven-duzen {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--pf-3); align-items: start; padding: 0 var(--pf-4) var(--pf-3);
}
.pf-guven-kutu { border: 1px solid var(--pf-cizgi); border-radius: 12px; background: var(--pf-yuzey-2); }
.pf-guven-kutu summary {
  display: flex; align-items: center; gap: var(--pf-3);
  padding: var(--pf-3); cursor: pointer; list-style: none;
}
.pf-guven-kutu summary::-webkit-details-marker { display: none; }
.pf-guven-kutu summary > .bi-chevron-down { margin-left: auto; color: var(--pf-metin-3); transition: transform .15s; }
.pf-guven-kutu[open] summary > .bi-chevron-down { transform: rotate(180deg); }
.pf-guven-puan {
  display: grid; place-items: center; grid-auto-flow: column; align-items: baseline;
  min-width: 58px; height: 58px; border-radius: 14px;
  background: var(--pf-primary-dolu); color: #fff;
}
.pf-guven-puan b { font-size: 20px; font-weight: 800; }
.pf-guven-puan em { font-style: normal; font-size: 11px; opacity: .8; }
.pf-guven-puan.yeni {
  /* Tek ikonlu varyant: sayı+/10 için kullanılan baseline hizası ikonu
     yamultuyordu; ikon tam ortalanır. */
  grid-auto-flow: row; align-items: center;
  width: 58px; background: var(--pf-yuzey-3); color: var(--pf-warning); font-size: 22px;
}
.pf-guven-puan.yeni i { display: block; line-height: 1; }
.pf-guven-metin { display: flex; flex-direction: column; min-width: 0; }
.pf-guven-metin b { font-size: 13.5px; }
.pf-guven-metin small { font-size: 11.5px; color: var(--pf-metin-3); }
.pf-guven-detay { padding: 0 var(--pf-3) var(--pf-3); font-size: 12.5px; }
.pf-guven-detay > div {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px dashed var(--pf-cizgi);
}
.pf-guven-detay > div > span { flex: 1 1 auto; min-width: 0; }
.pf-guven-detay > div > b { font-weight: 600; color: var(--pf-metin-3); }
.pf-guven-detay .ok i { color: var(--pf-success); }
.pf-guven-detay .no i { color: var(--pf-metin-3); }
.pf-guven-detay .bos i { color: var(--pf-warning); }
.pf-guven-toplam {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--pf-2); font-weight: 650;
}
.pf-perf-izgara {
  display: grid; gap: var(--pf-2);
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.pf-perf {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--pf-2); text-align: center;
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi); border-radius: 12px;
}
.pf-perf i { font-size: 16px; color: var(--pf-primary-2); }
.pf-perf b { font-size: 14px; font-weight: 700; }
.pf-perf span { font-size: 10.5px; color: var(--pf-metin-3); }

/* Unvan ilerlemesi */
.pf-unvan { padding: 0 var(--pf-4) var(--pf-4); }
.pf-unvan-bas {
  display: flex; justify-content: space-between; gap: var(--pf-2);
  margin-bottom: 5px; font-size: 12px; color: var(--pf-metin-2);
}
.pf-unvan-bar { height: 7px; border-radius: 999px; background: var(--pf-yuzey-3); overflow: hidden; }
.pf-unvan-bar span { display: block; height: 100%; border-radius: 999px; }

/* Sekmeler */
.pf-magaza-sekmeler {
  display: flex; gap: 6px; margin-bottom: var(--pf-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.pf-magaza-sekmeler a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--pf-cizgi); background: var(--pf-yuzey-1);
  color: var(--pf-metin-2); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color var(--pf-hiz-kart) ease-out, color var(--pf-hiz-kart) ease-out;
}
.pf-magaza-sekmeler a:hover { border-color: var(--pf-primary); color: var(--pf-primary-2); }
.pf-magaza-sekmeler a.aktif { background: var(--pf-primary-dolu); border-color: transparent; color: #fff; }
.pf-magaza-sekmeler em {
  font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Magaza ici filtre */
.pf-magaza-filtre { flex-wrap: wrap; align-items: flex-end; }
.pf-magaza-filtre .pf-alan { flex: 1 1 150px; }
.pf-mf-son { flex: 1 1 190px; gap: 8px; }
.pf-mf-butonlar { display: flex; gap: 6px; }
.pf-mf-butonlar .pf-btn { flex: 1 1 auto; }
.pf-sonuc-sayi { margin: 0 0 var(--pf-2); font-size: 12.5px; color: var(--pf-metin-3); }

/* Basarimlar */
.pf-basarim-izgara {
  display: grid; gap: var(--pf-3);
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}
.pf-basarim {
  display: flex; align-items: center; gap: var(--pf-3);
  padding: var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-basarim-ikon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 12px; font-size: 19px;
}
.pf-basarim b { display: block; font-size: 13px; }
.pf-basarim small { font-size: 11.5px; color: var(--pf-metin-3); }
.pf-basarim-hedef { margin-top: var(--pf-3); }
.pf-basarim-hedef p { margin: 0 0 var(--pf-2); font-size: 12.5px; color: var(--pf-metin-2); }

/* Degerlendirmeler */
.pf-degerlendirme-liste { display: flex; flex-direction: column; gap: var(--pf-2); }
.pf-degerlendirme {
  padding: var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-degerlendirme header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-degerlendirme header img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pf-degerlendirme header b { font-size: 12.5px; }
.pf-yildizlar { color: var(--pf-warning); font-size: 12px; }
.pf-degerlendirme header time { margin-left: auto; font-size: 11px; color: var(--pf-metin-3); }
.pf-degerlendirme p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--pf-metin-2); }
.pf-degerlendirme-foto { max-height: 120px; border-radius: 10px; margin-top: 6px; }
.pf-satici-cevap {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--pf-yuzey-2); font-size: 12.5px; color: var(--pf-metin-2);
}

/* Hakkinda */
.pf-hakkinda-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--pf-3); align-items: start;
}
.pf-hakkinda-metin { margin: 0; font-size: 13px; line-height: 1.7; color: var(--pf-metin-2); white-space: pre-line; }
.pf-hakkinda-mesaj { margin-top: var(--pf-3); }
.pf-guvence-uyari {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: var(--pf-3); padding: var(--pf-2) var(--pf-3);
  border: 1px solid color-mix(in srgb, var(--pf-warning) 40%, transparent);
  background: color-mix(in srgb, var(--pf-warning) 10%, transparent);
  border-radius: 10px; font-size: 11.5px; line-height: 1.55; color: var(--pf-metin-2);
}
.pf-guvence-uyari i { color: var(--pf-warning); flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 991.98px) {
  .pf-magaza-guven-duzen { grid-template-columns: minmax(0, 1fr); }
  .pf-hakkinda-duzen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .pf-magaza-banner { height: 110px; }
  .pf-magaza-logo { width: 68px; height: 68px; }
  .pf-magaza-eylem { width: 100%; }
  .pf-magaza-eylem form { flex: 1 1 auto; }
  .pf-magaza-eylem form .pf-btn { width: 100%; }
}

/* Arama sonuclari: pazar ilanlarina kopru */
.pf-arama-ilan { color: var(--pf-primary-2); font-weight: 600; text-decoration: none; }
.pf-arama-ilan:hover { text-decoration: underline; }

/* Sepette pazar ilani bolum basligi */
.pf-sepet-bolum-bas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: var(--pf-3) 0 var(--pf-2); font-size: 13px; font-weight: 700;
}
.pf-sepet-bolum-bas i { color: var(--pf-primary-2); }
.pf-sepet-bolum-bas small { font-weight: 500; font-size: 11px; color: var(--pf-metin-3); }

/* Kupon kapsam notu (pazar ilanlari kapsam disi) */
.pf-kupon-kapsam {
  display: flex; gap: 6px; align-items: flex-start;
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--pf-metin-3);
}
.pf-kupon-kapsam i { color: var(--pf-primary-2); flex: 0 0 auto; margin-top: 1px; }

/* =====================================================================
   YAYINCILAR — canli serit + indirim rozet eki
   ===================================================================== */
.pf-yy-nokta {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pf-danger); flex: 0 0 auto;
  animation: pfCanliNabiz 1.6s ease-in-out infinite;
}
@keyframes pfCanliNabiz {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-danger) 45%, transparent); }
  55%      { box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) { .pf-yy-nokta { animation: none; } }

.pf-yy-canli-serit {
  display: flex; align-items: center; gap: var(--pf-3);
  margin-bottom: var(--pf-3); padding: var(--pf-2) var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
.pf-yy-canli-serit-bas {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: 12.5px; font-weight: 700; color: var(--pf-danger);
  text-transform: uppercase; letter-spacing: .03em;
}
.pf-yy-canli-serit-kaydir {
  display: flex; gap: var(--pf-2); min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; padding: 2px;
}
.pf-yy-canli-oge {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  color: var(--pf-metin); text-decoration: none; font-size: 12.5px; font-weight: 600;
  transition: border-color var(--pf-hiz-kart) ease-out;
}
.pf-yy-canli-oge:hover { border-color: var(--pf-danger); color: var(--pf-metin); }
.pf-yy-canli-oge img,
.pf-yy-canli-oge .pf-yy-harf {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--pf-danger); font-size: 13px;
  display: grid; place-items: center;
}
.pf-yy-canli-oge-ad { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-yy-canli-oge small { color: var(--pf-metin-3); font-size: 11px; }

/* Kupon rozetindeki indirim yuzdesi */
.pf-yy-kupon em {
  font-style: normal; font-weight: 800; margin-left: 4px;
  color: var(--pf-success);
}

/* Misafir odeme kutusu */
.pf-misafir-kutu {
  margin-bottom: var(--pf-3); padding: var(--pf-3);
  background: color-mix(in srgb, var(--pf-primary) 7%, var(--pf-yuzey-2));
  border: 1px solid color-mix(in srgb, var(--pf-primary) 30%, transparent);
  border-radius: 12px;
}
.pf-misafir-bas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--pf-3); font-size: 13px;
}
.pf-misafir-bas i { color: var(--pf-primary-2); font-size: 16px; }
.pf-misafir-bas b { font-weight: 700; }
.pf-misafir-bas span { flex-basis: 100%; font-size: 12px; color: var(--pf-metin-2); }
.pf-misafir-giris { margin-top: var(--pf-2); font-size: 12px; color: var(--pf-metin-3); }
.pf-misafir-giris a { color: var(--pf-primary-2); font-weight: 600; }

/* =====================================================================
   SOZLESME SAYFASI
   ===================================================================== */
.pf-sozlesme-duzen {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--pf-4); align-items: start;
}
.pf-sozlesme-yan { position: sticky; top: 84px; }
.pf-sozlesme-liste { display: grid; gap: 2px; }
.pf-sozlesme-liste a {
  padding: 8px 10px; border-radius: 9px;
  font-size: 13px; color: var(--pf-metin-2); text-decoration: none;
  transition: background var(--pf-hiz-kart) ease-out, color var(--pf-hiz-kart) ease-out;
}
.pf-sozlesme-liste a:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }
.pf-sozlesme-liste a.aktif { background: var(--pf-primary-dolu); color: #fff; font-weight: 600; }
.pf-sozlesme-icerik-kutu {
  padding: var(--pf-5, 28px) var(--pf-4);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
}
.pf-sozlesme-icerik-kutu h1 { margin: 0 0 6px; font-size: 21px; font-weight: 750; letter-spacing: -.02em; }
.pf-sozlesme-tarih { margin-bottom: var(--pf-4); font-size: 12px; color: var(--pf-metin-3); }
.pf-sozlesme-metin { font-size: 13.5px; line-height: 1.8; color: var(--pf-metin-2); overflow-wrap: anywhere; }
.pf-sozlesme-metin h1, .pf-sozlesme-metin h2, .pf-sozlesme-metin h3 {
  margin: 1.4em 0 .5em; color: var(--pf-metin); font-weight: 700;
}
.pf-sozlesme-metin h2 { font-size: 16px; }
.pf-sozlesme-metin h3 { font-size: 14px; }
.pf-sozlesme-metin a { color: var(--pf-primary-2); }
@media (max-width: 991.98px) {
  .pf-sozlesme-duzen { grid-template-columns: minmax(0, 1fr); }
  .pf-sozlesme-yan { position: static; }
}

/* =====================================================================
   GENEL em-* UYUM KATMANI
   PINFORGE view'i olmayan sayfalar (magaza-ac, yayinci-ol, fatura,
   odeme-bildir, bagis, bulten, belge, view) varsayilan em-* isaretlemesiyle
   gelir. Bu katman o bilesenleri PINFORGE token'larina baglar; sayfa sayfa
   view yazilana kadar gorsel dil kopmaz.
   ===================================================================== */
body[data-tema="pinforge"] .em-card {
  background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  box-shadow: none;
}
body[data-tema="pinforge"] .btn-em {
  background: var(--pf-primary-dolu);
  border: 0; border-radius: var(--pf-r-btn);
  color: #fff; font-weight: 600;
}
body[data-tema="pinforge"] .btn-em:hover { filter: brightness(1.08); color: #fff; }
body[data-tema="pinforge"] .form-control,
body[data-tema="pinforge"] .form-select {
  background-color: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi);
  color: var(--pf-metin);
  border-radius: var(--pf-r-btn);
}
body[data-tema="pinforge"] .form-control:focus,
body[data-tema="pinforge"] .form-select:focus {
  background-color: var(--pf-yuzey-2);
  border-color: var(--pf-primary);
  color: var(--pf-metin);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-primary) 22%, transparent);
}
body[data-tema="pinforge"] .form-control::placeholder { color: var(--pf-metin-3); }
body[data-tema="pinforge"] .em-hero {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pf-primary) 22%, var(--pf-yuzey-1)),
    var(--pf-yuzey-1));
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
}
body[data-tema="pinforge"] .text-gradient {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--pf-primary-2);
}
body[data-tema="pinforge"] .list-group-item {
  background: transparent; color: var(--pf-metin-2);
}
body[data-tema="pinforge"] .alert {
  border-radius: 12px; border: 1px solid var(--pf-cizgi);
  background: var(--pf-yuzey-2); color: var(--pf-metin-2);
}
body[data-tema="pinforge"] .alert-info    { border-color: color-mix(in srgb, var(--pf-primary) 35%, transparent); }
body[data-tema="pinforge"] .alert-warning { border-color: color-mix(in srgb, var(--pf-warning) 40%, transparent); }
body[data-tema="pinforge"] .alert-danger  { border-color: color-mix(in srgb, var(--pf-danger) 40%, transparent); }
body[data-tema="pinforge"] .alert-success { border-color: color-mix(in srgb, var(--pf-success) 40%, transparent); }

/* =====================================================================
   YAYINCI PROFIL / DESTEK SAYFASI  (/yayinci/{slug})
   ===================================================================== */
.pf-yp-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--pf-4); align-items: start;
}
.pf-yp-oynatici { position: relative; margin-bottom: var(--pf-3); }

.pf-yp-kimlik {
  display: flex; align-items: center; gap: var(--pf-3); flex-wrap: wrap;
  padding: var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-card);
  margin-bottom: var(--pf-3);
}
.pf-yp-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid var(--pf-primary);
  display: grid; place-items: center; font-size: 24px;
}
.pf-yp-kimlik-metin { flex: 1 1 200px; min-width: 0; }
.pf-yp-kimlik-metin h1 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.pf-yp-meta {
  display: flex; flex-wrap: wrap; gap: var(--pf-3);
  margin-top: 4px; font-size: 12.5px; color: var(--pf-metin-2);
}
.pf-yp-meta .bi-heart-fill { color: var(--pf-danger); }
.pf-yp-kupon {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--pf-success) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--pf-success) 55%, transparent);
  color: var(--pf-metin); font-size: 13px; font-weight: 700; letter-spacing: .03em;
}
.pf-yp-kupon em { font-style: normal; color: var(--pf-success); }
.pf-yp-kupon:hover { border-style: solid; }
.pf-yp-tanitim { margin: 0; font-size: 13px; line-height: 1.7; color: var(--pf-metin-2); white-space: pre-line; }

.pf-yp-alt-izgara {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--pf-3); margin-top: var(--pf-3);
}
.pf-yp-bos { margin: 0; font-size: 12.5px; color: var(--pf-metin-3); }
.pf-yp-bagis-satir {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--pf-cizgi); font-size: 12.5px;
}
.pf-yp-bagis-satir:last-child { border-bottom: 0; }
.pf-yp-bagis-tutar {
  flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--pf-primary) 14%, transparent);
  color: var(--pf-primary-2); font-weight: 750; font-size: 12px;
}
.pf-yp-bagis-kim { flex: 1 1 auto; min-width: 0; }
.pf-yp-bagis-kim small { display: block; color: var(--pf-metin-3); overflow-wrap: anywhere; }
.pf-yp-bagis-satir time { flex: 0 0 auto; font-size: 11px; color: var(--pf-metin-3); }

.pf-yp-lider {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--pf-cizgi); font-size: 13px;
}
.pf-yp-lider:last-child { border-bottom: 0; }
.pf-yp-lider b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-yp-lider em { font-style: normal; font-weight: 700; color: var(--pf-metin-2); }
.pf-yp-lider-sira {
  display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%; font-size: 11px; font-weight: 800;
  background: var(--pf-yuzey-3); color: var(--pf-metin-2);
}
.pf-yp-lider-sira.s1 { background: #f5c344; color: #201803; }
.pf-yp-lider-sira.s2 { background: #c8ccd4; color: #23262b; }
.pf-yp-lider-sira.s3 { background: #d29a6b; color: #2b1a0c; }

.pf-yp-form { position: sticky; top: 84px; }
.pf-yp-form-kutu h3 { margin-bottom: var(--pf-3); }
.pf-yp-sekmeler {
  display: flex; gap: 6px; margin-bottom: var(--pf-3);
  padding: 4px; background: var(--pf-yuzey-2); border-radius: 12px;
}
.pf-yp-sekmeler button {
  flex: 1 1 auto; padding: 8px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--pf-metin-2);
  font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.pf-yp-sekmeler button.aktif { background: var(--pf-primary-dolu); color: #fff; }
.pf-yp-kanallar { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-yp-ssl {
  margin: 4px 0 0; text-align: center;
  font-size: 11.5px; color: var(--pf-metin-3);
}

@media (max-width: 991.98px) {
  .pf-yp-duzen { grid-template-columns: minmax(0, 1fr); }
  .pf-yp-form { position: static; }
  .pf-yp-alt-izgara { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   YAYINCILAR — "Su An Yayinda" kutu duzeni (eski cip seridinin yerine)
   ===================================================================== */
.pf-yy-canli-bolum { margin-bottom: var(--pf-4); }
.pf-yy-canli-bolum .pf-bolum-baslik h2 {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--pf-danger);
}
.pf-yy-canli-izgara {
  display: grid; gap: var(--pf-3);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.pf-yy-canli-kart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pf-yuzey-1);
  border: 1px solid color-mix(in srgb, var(--pf-danger) 35%, var(--pf-cizgi));
  border-radius: var(--pf-r-card);
  text-decoration: none; color: var(--pf-metin);
  transition: border-color var(--pf-hiz-kart) ease-out, transform var(--pf-hiz-kart) ease-out;
}
.pf-yy-canli-kart:hover { border-color: var(--pf-danger); transform: translateY(-2px); color: var(--pf-metin); }

/* Onizleme alani: yayinci gorseli bulanik fon + oynat ikonu */
.pf-yy-canli-onizleme {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: center;
  background: var(--pf-yuzey-2);
  background-size: cover; background-position: center;
}
.pf-yy-canli-onizleme::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, #000 45%, transparent);
  backdrop-filter: blur(6px);
}
.pf-yy-canli-oynat {
  position: relative; font-size: 34px; color: #fff; opacity: .85;
  transition: transform var(--pf-hiz-kart) ease-out, opacity var(--pf-hiz-kart) ease-out;
}
.pf-yy-canli-kart:hover .pf-yy-canli-oynat { transform: scale(1.12); opacity: 1; }
.pf-yy-canli-rozet {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 7px;
  background: var(--pf-danger); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
}
.pf-yy-canli-rozet em {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: pfCanliNabiz 1.6s ease-in-out infinite;
}
.pf-yy-canli-izleyici {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 7px;
  background: color-mix(in srgb, #000 65%, transparent);
  color: #fff; font-size: 11px; font-weight: 650;
}

/* Alt bilgi: avatar + ad + yayin basligi + platform */
.pf-yy-canli-alt {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
}
.pf-yy-canli-alt img,
.pf-yy-canli-alt .pf-yy-harf {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid var(--pf-danger);
  display: grid; place-items: center; font-size: 14px;
}
.pf-yy-canli-metin { flex: 1 1 auto; min-width: 0; }
.pf-yy-canli-metin b {
  display: block; font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-yy-canli-metin small {
  display: block; font-size: 11px; color: var(--pf-metin-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-yy-canli-plat { flex: 0 0 auto; font-size: 16px; color: var(--pf-metin-3); }
.pf-yy-canli-plat.twitch  { color: #a970ff; }
.pf-yy-canli-plat.kick    { color: #53fc18; }
.pf-yy-canli-plat.youtube { color: #ff4d4d; }

/* Yayinci karti: kaplayan profil baglantisi + izle dugmesi */
.pf-yy { position: relative; }
.pf-yy-kapla { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pf-yy-izle {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; font-size: 18px; text-decoration: none;
  background: color-mix(in srgb, #000 60%, transparent);
  color: #fff; opacity: 0; transform: translateY(4px);
  transition: opacity var(--pf-hiz-kart) ease-out, transform var(--pf-hiz-kart) ease-out, background var(--pf-hiz-kart) ease-out;
}
.pf-yy:hover .pf-yy-izle, .pf-yy-izle:focus-visible { opacity: 1; transform: none; }
.pf-yy-izle:hover { background: var(--pf-primary-dolu); color: #fff; }
@media (hover: none) { .pf-yy-izle { opacity: 1; transform: none; } }
.pf-yy-profil-ad { text-decoration: none; color: var(--pf-metin); }
.pf-yy-profil-ad:hover b { color: var(--pf-primary-2); }
.pf-yy-oynatici-eylem { display: flex; gap: 8px; flex-wrap: wrap; }

/* ETBIS rozeti (footer yasal kunye) */
.pf-footer-etbis {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 7px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--pf-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-success) 35%, transparent);
  color: var(--pf-metin-2); font-size: 11.5px; font-weight: 600; text-decoration: none;
}
.pf-footer-etbis i { color: var(--pf-success); }
.pf-footer-etbis:hover { border-color: var(--pf-success); color: var(--pf-metin); }


/* ===================================================================
   3. TASARIM KATMANI — TABAN — ortak katmanı (em-*) PINFORGE paletine bağla
   =================================================================== */
body[data-tema="pinforge"] {
  --em-bg: var(--pf-bg);
  --em-bg-soft: var(--pf-yuzey-2);
  --em-bg-card: var(--pf-yuzey-1);
  --em-border: var(--pf-cizgi);
  --em-text: var(--pf-metin-2);
  --em-text-muted: var(--pf-metin-3);
  --em-primary: var(--pf-ates);
  --em-primary-rgb: var(--pf-ates-rgb);
  --em-primary-2: var(--pf-ates-2);
  --em-radius: var(--pf-r-panel);

  /* Bileşen tokenları — kütüphaneyi PinForge'a uyduran ince ayar.
     Genel tokenlar burada yanlış anlam taşıyor: hap barın zemini
     "yumuşak zemin" değil kendine ait bir ton (#34364F) ve "Tümü"
     butonu ana vurgudan (#FF6000) bir tık koyu (#DF5929). */
  --em-bolum-bas-bg:  var(--pf-hap-bg);
  --em-bolum-tumu-bg: var(--pf-ates-3);

  background: var(--pf-bg);
  color: var(--pf-metin-2);
  font-family: var(--pf-font);
  font-size: 13px;                       /* İ4 */
  line-height: 1.55;
  padding-bottom: 0;
}
body[data-tema="pinforge"] main { min-height: 40vh; }

/* Taban bağlantı/başlık dili.
   :where() ile SIFIR özgüllük: aksi hâlde `body[data-tema] a` (0,1,2)
   bileşen kurallarını (.pf-urun-ad → 0,1,0) eziyor ve her bağlantı
   gövde rengine düşüyordu. Bu kurallar yalnızca varsayılan olmalı,
   hiçbir bileşeni ezmemeli. */
:where(body[data-tema="pinforge"]) :where(a) { color: inherit; text-decoration: none; }
:where(body[data-tema="pinforge"]) :where(h1, h2, h3, h4) {
  color: var(--pf-metin); font-weight: 600;
}

body[data-tema="pinforge"] :focus-visible {
  outline: none;
  box-shadow: var(--pf-odak);
  border-radius: var(--pf-r-btn);
}

/* Ortak katmanın dolu butonları turuncuya sabitlenir (İ6). */
body[data-tema="pinforge"] .btn-em,
body[data-tema="pinforge"] .btn-primary {
  background: var(--pf-ates-dolu);
  border-color: var(--pf-ates-dolu);
  color: #fff;
}
body[data-tema="pinforge"] .btn-em:hover,
body[data-tema="pinforge"] .btn-primary:hover {
  background: var(--pf-ates-2);
  border-color: var(--pf-ates-2);
  color: #fff;
}

.pf-kap {
  width: 100%;
  max-width: var(--pf-kap);
  margin-inline: auto;
  padding-inline: var(--pf-4);
}
@media (max-width: 640px) { .pf-kap { padding-inline: var(--pf-3); } }

/* İçerik kapsayıcısı DAR: index.php blokları ve sayfa gövdeleri 1152'ye
   oturur, header/footer 1376'da kalır. */
body[data-tema="pinforge"] > main > .container,
body[data-tema="pinforge"] .container,
body[data-tema="pinforge"] main .pf-kap {
  max-width: var(--pf-kap-icerik);
  /* Bootstrap'in 12px gutter'ı 1152'yi 1128'e düşürüyordu; ölçüm 1152'nin
     tamamının içerik olduğunu gösteriyor. Dar ekranda nefes geri gelir. */
  padding-inline: 0;
}
@media (max-width: 1200px) {
  body[data-tema="pinforge"] > main > .container,
  body[data-tema="pinforge"] .container,
  body[data-tema="pinforge"] main .pf-kap { padding-inline: var(--pf-3); }
}
/* Kabuk parçaları (header · sticky · footer · modül uyarısı) geniş kalır */
.pf-yardimci-ic, .pf-bar-ic, .pf-katbar-ic, .pf-sticky-ic,
.pf-modul-uyari .pf-kap,
.pf-footer .pf-kap, .pf-footer-guven-ic, .pf-footer-bulten-ic, .pf-footer-kolonlar,
.pf-footer-dip-ic {
  max-width: var(--pf-kap);
}

/* ===================================================================
   3. BUTONLAR (İ3: hap kabuk, keskin içerik)
   =================================================================== */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--pf-2);
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--pf-r-btn);
  font-size: 13px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  transition: background var(--pf-hiz), border-color var(--pf-hiz),
              transform var(--pf-hiz), box-shadow var(--pf-hiz);
  white-space: nowrap;
}
.pf-btn:active { transform: translateY(1px); }

.pf-btn-birincil {
  background: var(--pf-ates-dolu);
  border-color: var(--pf-ates);
  color: #fff;
  box-shadow: var(--pf-sh-ates);
}
.pf-btn-birincil:hover { background: var(--pf-ates-2); color: #fff; }

/* Hap buton — sitenin "primary" dili: yuvarlak + alttan turuncu parıltı */
.pf-btn-hap {
  border-radius: var(--pf-r-hap);
  padding: 10px 20px;
  background: var(--pf-kabuk-ust)
              radial-gradient(70% 90% at 50% 115%,
                rgba(var(--pf-ates-rgb), .95) 0%,
                rgba(var(--pf-ates-rgb), .55) 22%,
                rgba(var(--pf-ates-rgb), 0) 62%);
  border-color: var(--pf-kabuk-cizgi);
  color: #fff;
  box-shadow: var(--pf-sh-ates), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.pf-btn-hap:hover { border-color: var(--pf-ates); color: #fff; }

.pf-btn-ikincil {
  background: var(--pf-yuzey-2);
  border-color: var(--pf-cizgi-2);
  color: var(--pf-metin);
}
.pf-btn-ikincil:hover { border-color: var(--pf-mavi); color: var(--pf-metin); }

.pf-btn-hayalet {
  background: transparent;
  border-color: var(--pf-kabuk-cizgi);
  color: var(--pf-metin);
}
.pf-btn-hayalet:hover { border-color: var(--pf-ates); color: #fff; }

.pf-btn-blok { width: 100%; }
.pf-btn-kucuk { padding: 6px 12px; font-size: 12px; }
.pf-btn-buyuk { padding: 12px 22px; font-size: 15px; }
.pf-btn[disabled], .pf-btn.pasif { opacity: .5; pointer-events: none; }

/* ===================================================================
   4. HEADER — Katman 0 / 1 / 2 (hepsi lacivert kabuk)
   =================================================================== */

/* ---- Katman -1: duyuru bandı (header'ın üstünde, tam genişlik) ---- */
.pf-duyuru {
  background: var(--pf-kabuk-dip);
  border-bottom: 1px solid var(--pf-kabuk-cizgi);
  font-size: 12px; color: var(--pf-metin-2);
}
.pf-duyuru-ic {
  display: flex; align-items: center; justify-content: center; gap: var(--pf-2);
  min-height: 38px; flex-wrap: wrap; text-align: center;
}
.pf-duyuru-ic b { color: #fff; font-weight: 700; }
.pf-duyuru-ic > i { font-size: 14px; flex: 0 0 auto; }
.pf-duyuru-ic span { color: var(--pf-metin-3); }

/* Tip → renk. Kampanya bandı marka turuncusunu taşır. */
.pf-duyuru-kampanya {
  background: linear-gradient(90deg,
    rgba(var(--pf-ates-rgb), .30), rgba(var(--pf-ates-rgb), .12) 60%, transparent);
  border-bottom-color: rgba(var(--pf-ates-rgb), .45);
}
.pf-duyuru-kampanya > .pf-kap > i { color: var(--pf-ates); }
.pf-duyuru-uyari {
  background: rgba(228, 172, 80, .14);
  border-bottom-color: rgba(228, 172, 80, .38);
}
.pf-duyuru-uyari > .pf-kap > i { color: var(--pf-uyari); }
.pf-duyuru-bilgi > .pf-kap > i { color: var(--pf-mavi-2); }

/* BANNER kipi — tam genişlik ince görsel şerit (~2000×89).
   Yükseklik görselin oranından gelir; sabitlemek dar ekranda kırpardı. */
.pf-duyuru-banner {
  background: var(--pf-kabuk-dip);
  border-bottom: 0;
  line-height: 0;                       /* satır içi boşluk şeridi büyütmesin */
}
.pf-duyuru-banner img,
.pf-duyuru-banner a {
  display: block; width: 100%;
}
.pf-duyuru-banner img { height: auto; object-fit: cover; }

@media (max-width: 640px) {
  .pf-duyuru-ic span { display: none; }   /* dar ekranda yalnız başlık kalır */
}

/* ---- Katman 0: yardımcı şerit ---- */
.pf-yardimci {
  background: var(--pf-kabuk-ust);
  color: var(--pf-metin-2);
  font-size: 12px;
}
.pf-yardimci-ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-4);
  min-height: 47px;                      /* ölçüm: 47px */
}
.pf-yardimci-sol { display: flex; align-items: center; gap: var(--pf-5); flex-wrap: wrap; }
.pf-yardimci-sol a {
  color: var(--pf-metin-2); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.pf-yardimci-sol a:hover { color: #fff; }
/* İlk bağlantı (yayıncı başvurusu) sitedeki gibi turuncu vurgulu */
.pf-yardimci-sol a.pf-vurgu { color: var(--pf-ates); }
.pf-yardimci-sol a.pf-vurgu:hover { color: var(--pf-ates-2); }

.pf-yardimci-sag { display: flex; align-items: center; gap: var(--pf-3); }
.pf-yardimci-sag .pf-sosyal { display: flex; gap: var(--pf-2); }
.pf-yardimci-sag .pf-sosyal a {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .07);
  color: var(--pf-metin-2);
  transition: background var(--pf-hiz), color var(--pf-hiz);
}
.pf-yardimci-sag .pf-sosyal a:hover { background: var(--pf-ates-dolu); color: #fff; }
.pf-ayrac { width: 1px; height: 16px; background: var(--pf-kabuk-cizgi); }
.pf-dil { display: inline-flex; align-items: center; gap: 5px; color: var(--pf-metin-3); }
.pf-mod-btn {
  background: none; border: 0; padding: 4px;
  color: var(--pf-metin-2); cursor: pointer; line-height: 1;
}
.pf-mod-btn:hover { color: var(--pf-ates); }

@media (max-width: 991px) { .pf-yardimci-sol { display: none; } }

/* ---- Katman 1: ana bar ---- */
/* Üst şeritle ana bar arasında turuncu saç teli — referans detayı */
.pf-bar { background: var(--pf-kabuk); border-top: 1px solid var(--pf-ates-2); }
.pf-bar-ic {
  display: flex; align-items: center; gap: var(--pf-6);
  min-height: 79px;                      /* ölçüm: 79px */
  padding-block: 10px 5px;               /* ölçüm: 10px 0 5px */
}
.pf-menu-btn {
  display: none;
  background: none; border: 0; color: #fff; font-size: 22px;
  padding: 4px 6px; cursor: pointer;
}
/* Logo alanı referansta 151×48. Görsel yüklenmemiş sitede metin logo
   basılıyor ve 99×29'a düşüp barın dengesini bozuyordu; metin de aynı
   hacmi tutacak şekilde büyütüldü. */
.pf-logo {
  display: flex; align-items: center; flex: 0 0 auto;
  min-width: 151px; min-height: 48px;
}
.pf-logo img { height: 48px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.pf-logo-ad {
  font-size: 25px; font-weight: 700; color: #fff;
  letter-spacing: -.6px; line-height: 1.1;
}
.pf-logo-ad em { color: var(--pf-ates); font-style: normal; }

@media (max-width: 991px) {
  /* Mobilde logo iki satıra taşmasın; arama zaten alt satıra iniyor */
  .pf-logo { min-width: 0; min-height: 0; }
  .pf-logo img { height: 34px; }
  .pf-logo-ad { font-size: 19px; }
}

/* Arama — hap biçimli oyuk, büyüteç İÇERİDE sağda.
   Ayrı bir "Ara" butonu YOK: alanın kendisi tek bir eylem gibi okunur
   (ölçüm: .search-box r:100px, input zemini #080E28, ikon sağda). */
/* Arama SABİT genişlikte ve logonun hemen sağında durur; bara yayılmaz.
   (ölçüm: 500x42, x=202'de başlıyor, sağ küme x=1278'de — arada boşluk var.)
   `margin-right:auto` sağ kümeyi bara yaslar. */
.pf-ara { position: relative; flex: 0 1 500px; max-width: 500px; margin-right: auto; }
.pf-ara input {
  width: 100%;
  background: var(--pf-kabuk-oyuk);
  border: 2px solid transparent;
  border-radius: var(--pf-r-hap);
  color: #fff;
  padding: 11px 55px 9px 18px;           /* ölçüm */
  font-size: 12px;
  line-height: 1.6;
  transition: border-color var(--pf-hiz);
}
.pf-ara input::placeholder { color: #6B7392; }
.pf-ara input:focus { outline: none; border-color: var(--pf-ates); box-shadow: none; }
.pf-ara-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: #6B7392; font-size: 15px; cursor: pointer;
  display: grid; place-items: center;
}
.pf-ara-btn:hover { color: var(--pf-ates); }
.pf-ara-panel { left: 0; right: 0; top: calc(100% + 6px); }

.pf-eylem { display: flex; align-items: center; gap: var(--pf-2); margin-left: auto; }
.pf-ikon-btn {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--pf-kabuk-cizgi);
  color: #fff; font-size: 17px; cursor: pointer;
  transition: background var(--pf-hiz), border-color var(--pf-hiz);
}
.pf-ikon-btn:hover { background: rgba(var(--pf-ates-rgb), .18); border-color: var(--pf-ates); color: #fff; }
.pf-ikon-btn .em-icon-badge,
.pf-ikon-btn em {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: var(--pf-ates-dolu); color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  display: grid; place-items: center;
  border: 2px solid var(--pf-kabuk);
}
.pf-ikon-btn em[hidden] { display: none; }

/* Bakiye — cüzdan hapı */
.pf-bakiye {
  display: inline-flex; align-items: center; gap: var(--pf-2);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--pf-kabuk-cizgi);
  border-radius: var(--pf-r-hap);
  padding: 5px 6px 5px 14px;
  color: #fff;
}
.pf-bakiye:hover { border-color: var(--pf-ates); color: #fff; }
.pf-bakiye-metin { display: flex; flex-direction: column; line-height: 1.15; }
.pf-bakiye-metin small { font-size: 10px; color: var(--pf-metin-3); }
.pf-bakiye-metin b { font-size: 13px; font-weight: 700; }
.pf-bakiye-arti {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pf-ates-dolu); color: #fff; font-size: 13px;
}

.pf-uye {
  display: inline-flex; align-items: center; gap: var(--pf-2);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--pf-kabuk-cizgi);
  border-radius: var(--pf-r-hap);
  padding: 4px 12px 4px 4px;
  color: #fff; cursor: pointer;
}
.pf-uye:hover { border-color: var(--pf-ates); }
.pf-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pf-ates-dolu); color: #fff;
  font-weight: 700; font-size: 13px; flex: 0 0 auto;
}
.pf-uye-ad { font-size: 12px; font-weight: 600; }
.pf-uye-ok { font-size: 10px; color: var(--pf-metin-3); }

body[data-tema="pinforge"] .dropdown-menu {
  background: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-panel);
  box-shadow: var(--pf-sh-2);
  padding: 6px;
}
body[data-tema="pinforge"] .dropdown-item {
  color: var(--pf-metin-2); border-radius: var(--pf-r-sm);
  display: flex; align-items: center; gap: var(--pf-2);
  padding: 8px 10px; font-size: 13px;
}
body[data-tema="pinforge"] .dropdown-item:hover {
  background: rgba(var(--pf-ates-rgb), .14); color: #fff;
}
body[data-tema="pinforge"] .dropdown-divider { border-color: var(--pf-cizgi); }

/* Bildirim zili listesi */
.pf-zil-menu { width: 320px; max-width: 92vw; }
.pf-zil-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 10px; border-bottom: 1px solid var(--pf-cizgi);
}
.pf-zil-bas b { color: var(--pf-metin); font-size: 13px; }
.pf-zil-tumu {
  background: none; border: 0; color: var(--pf-mavi-2);
  font-size: 11px; font-weight: 600; cursor: pointer; padding: 0;
}
.pf-zil-liste { list-style: none; margin: 0; padding: 6px 0 0; max-height: 300px; overflow-y: auto; }
.pf-zil-liste a {
  display: block; padding: 8px 10px; border-radius: var(--pf-r-sm);
  border-left: 3px solid transparent;
}
.pf-zil-liste a:hover { background: rgba(255, 255, 255, .05); }
.pf-zil-liste a.yeni { border-left-color: var(--pf-ates); }
.pf-zil-liste b { display: block; font-size: 12px; color: var(--pf-metin); }
.pf-zil-liste span { display: block; font-size: 11px; color: var(--pf-metin-3); }
.pf-zil-liste time { font-size: 10px; color: var(--pf-metin-3); }
.pf-zil-bos { padding: 18px 10px; text-align: center; color: var(--pf-metin-3); font-size: 12px; margin: 0; }
.pf-zil-alt {
  display: block; text-align: center; padding: 8px;
  border-top: 1px solid var(--pf-cizgi); margin-top: 6px;
  font-size: 12px; font-weight: 600; color: var(--pf-mavi-2);
}

/* ---- Katman 2: oyun sekmesi barı (mega menü) ----
   Sekmeler düz metin DEĞİL, eşit genişlikte panel segmentleridir:
   her biri #262B48 zeminli, aralarındaki 2px lacivert kenarlık ayraç
   görevi görür (ölçüm: trigger::before bg #262B48, border 2px #0F1434).
   Bant 60px, segment 52px. */
.pf-katbar { background: var(--pf-kabuk); }
/* Segmentler EŞİT genişlikte olmalı. Flex ile denendi ama işe yaramıyor:
   en uzun sekme kendi min-içerik genişliğine takılıyor, artan pay tek bir
   öğeye (mega menü sarmalayıcısı) kalıyor ve o 168px'e düşüyordu.
   Grid'in `1fr` sütunları bu payı koşulsuz eşitler. */
.pf-katbar-ic {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: stretch; gap: 0; min-height: 60px; padding-block: 4px;
}

.pf-navsekme {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px;
  color: #fff; font-size: 14px; font-weight: 500;
  /* Referans ölçümü (pindirim LI): bg transparent, border 0 — segmentler
     bar zemininde SERBEST durur. Önceki kabuk-ust zemin + 2px kabuk çerçeve
     her segmenti ayrı bir kutuya çeviriyordu; bar "yedi düğme" gibi
     okunuyordu, referansta tek parça bir şerittir. */
  background: none;
  border: 0;
  border-radius: var(--pf-r-sm);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--pf-hiz), color var(--pf-hiz);
}
.pf-navsekme:hover, .pf-navsekme[aria-expanded="true"] {
  /* Referans hover: nötr açılma (#313541 dengi), turuncu boyama değil */
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
/* Mega menü tetiği de bir segmenttir; sarmalayıcısı aynı payı almalı */
.pf-mega-sar { flex: 1 1 0; min-width: 0; }
.pf-mega-sar > .pf-navsekme { width: 100%; }

.pf-navsekme img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.pf-navsekme i.bi { font-size: 15px; flex: 0 0 auto; }
.pf-navsekme-vurgu { color: var(--pf-ates); font-weight: 600; }
.pf-navsekme-vurgu:hover { color: #fff; }

/* 1200px altı overflow-x:auto kuralı KALDIRILDI: kaydırma kapsayıcısı
   içindeki absolute mega paneli kırpıyordu — 992–1200px pencerede menü
   "açılıyor ama görünmüyor"du. Kural 9-segment döneminden kalmaydı;
   grid 1fr yedi segmenti her genişlikte kendiliğinden sığdırır. */

.pf-nav-rozet {
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; background: var(--pf-ates-dolu); color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  display: inline-grid; place-items: center;
}
.pf-nabiz {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pf-tehlike); display: inline-block;
  box-shadow: 0 0 0 0 rgba(253, 73, 73, .7);
  animation: pfNabiz 1.8s infinite;
}
@keyframes pfNabiz {
  70%  { box-shadow: 0 0 0 7px rgba(253, 73, 73, 0); }
  100% { box-shadow: 0 0 0 0 rgba(253, 73, 73, 0); }
}

/* Mega menü paneli */
.pf-mega-sar { position: relative; display: flex; }
.pf-mega {
  position: absolute; z-index: 60; top: 100%; left: 0;
  width: min(920px, calc(100vw - 32px));
  display: grid; grid-template-columns: 230px 1fr 220px;
  background: var(--pf-yuzey-2);
  border: 1px solid var(--pf-cizgi);
  border-radius: 0 0 var(--pf-r-panel) var(--pf-r-panel);
  box-shadow: var(--pf-sh-3);
  /* visibility ŞART: display:grid yazar kuralı [hidden]'ın UA display:none
     kuralını ezdiği için panel "gizliyken" bile çiziliyordu — görünürlük
     fiilen yalnız opacity'ye, opacity de yalnız JS'in rAF içinde eklediği
     sınıfa bağlıydı. rAF kısılan ortamda (pil tasarrufu, arka plan sekmesi)
     menü hiç açılmıyordu. visibility hem gerçek gizleme hem de görünmez
     panelin fare olaylarını yutmasını engelleme görevi görür. */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--pf-hiz), transform var(--pf-hiz),
              visibility 0s var(--pf-hiz);
  overflow: hidden;
}
/* Açılma İKİ yoldan: JS sınıfı (hover-intent + klavye) VE saf CSS :hover.
   CSS yolu emniyet kemeri — script herhangi bir sebeple ölmüş olsa da
   menü fareye cevap verir. */
/* :hover/:focus-within açılış yolları kaldırıldı: panel JS portalıyla
   body altında açılıyor; yerinde açan CSS yolu portalla yarışıyordu. */
.pf-mega.acik {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.pf-mega-sol { background: var(--pf-yuzey-3); padding: var(--pf-2); }
.pf-mega-grup {
  width: 100%;
  display: flex; align-items: center; gap: var(--pf-2);
  padding: 9px 10px; border: 0; border-radius: var(--pf-r-sm);
  background: none; color: var(--pf-metin-2);
  font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.pf-mega-grup span { flex: 1 1 auto; }
.pf-mega-grup > i.bi:last-child { font-size: 10px; color: var(--pf-metin-3); }
.pf-mega-grup img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.pf-mega-grup.aktif, .pf-mega-grup:hover {
  background: rgba(var(--pf-ates-rgb), .14); color: #fff;
}
.pf-mega-orta { padding: var(--pf-3); }
.pf-mega-panel { display: none; grid-template-columns: repeat(3, 1fr); gap: var(--pf-1); }
.pf-mega-panel.aktif { display: grid; }
.pf-mega-oyun {
  display: flex; align-items: center; gap: var(--pf-2);
  padding: 7px 9px; border-radius: var(--pf-r-sm);
  color: var(--pf-metin-2); font-size: 12.5px;
}
.pf-mega-oyun:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pf-mega-gorsel {
  width: 26px; height: 26px; border-radius: 5px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  background: var(--pf-yuzey-3);
}
.pf-mega-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.pf-mega-sag {
  padding: var(--pf-4);
  background: linear-gradient(160deg, rgba(var(--pf-ates-rgb), .16), transparent 70%),
              var(--pf-yuzey-3);
  display: flex; flex-direction: column; gap: var(--pf-2);
}
.pf-mega-etiket {
  align-self: flex-start;
  background: var(--pf-ates-dolu); color: #fff;
  border-radius: var(--pf-r-hap);
  padding: 3px 10px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.pf-mega-sag b { color: var(--pf-metin); font-size: 14px; }
.pf-mega-sag p { color: var(--pf-metin-3); font-size: 12px; margin: 0 0 auto; }

@media (max-width: 1100px) { .pf-mega { grid-template-columns: 200px 1fr; } .pf-mega-sag { display: none; } }
@media (max-width: 991px) { .pf-katbar { display: none; } }

/* ---- Sticky mini bar (yarı saydam, analiz: rgba(15,20,52,.63)) ---- */
.pf-sticky {
  position: fixed; z-index: 70; inset: 0 0 auto 0;
  background: rgba(15, 20, 52, .72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pf-kabuk-cizgi);
  transform: translateY(-100%);
  transition: transform 220ms ease;
}
[data-bs-theme="light"] .pf-sticky { background: rgba(20, 32, 91, .90); }
.pf-sticky.acik { transform: none; }
.pf-sticky-ic { display: flex; align-items: center; gap: var(--pf-3); min-height: 50px; }
.pf-sticky-logo img { height: 26px; display: block; }
.pf-sticky-logo b { color: #fff; font-size: 15px; }
.pf-sticky-ara { position: relative; flex: 1 1 auto; max-width: 420px; }
.pf-sticky-ara input {
  width: 100%; background: var(--pf-kabuk-oyuk);
  border: 1px solid var(--pf-kabuk-cizgi); border-radius: var(--pf-r-btn);
  color: #fff; padding: 7px 12px 7px 32px; font-size: 12px;
}
.pf-sticky-ara i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #6B7392; }
.pf-sticky-sag { display: flex; align-items: center; gap: var(--pf-2); margin-left: auto; }
.pf-sticky-sag .pf-ikon-btn { width: 34px; height: 34px; font-size: 15px; }
.pf-sticky-bakiye {
  background: rgba(255, 255, 255, .08); border-radius: var(--pf-r-hap);
  padding: 5px 12px; color: #fff; font-size: 12px; font-weight: 700;
}
@media (max-width: 640px) { .pf-sticky-ara { display: none; } }

/* ===================================================================
   5. VİTRİN BARI — temanın imza bileşeni (İ5)
   Hap gövde · yıldız · oyun sekmeleri · arka banner · turuncu "Tümü"
   =================================================================== */
.pf-vitrin-bar {
  position: relative;
  display: flex; align-items: center; gap: var(--pf-3);
  min-height: 60px;
  padding: 6px 6px 6px 18px;
  margin-bottom: var(--pf-3);
  background: var(--pf-hap-bg);
  border-radius: var(--pf-r-hap);
  overflow: hidden;
}
/* BANNERLI varyant — ölçüm: 66px, şeffaf zemin, görsel bara yayılır.
   Sekmeli varyanttan farkı: dolu hap zemini yok, 6px daha yüksek. */
.pf-vitrin-bar.bannerli {
  background: transparent;
  min-height: 66px;
  gap: var(--pf-2);
}
.pf-vitrin-bar.bannerli .pf-vitrin-bas h2 { font-size: 16px; }

/* Arka banner görseli — sağa hizalı, sola doğru sönümlenir */
.pf-vitrin-banner {
  position: absolute; inset: 0 0 0 auto; width: 72%;
  object-fit: cover; opacity: .55;
  border-radius: var(--pf-r-hap);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
          mask-image: linear-gradient(90deg, transparent, #000 40%);
  pointer-events: none;
}
.pf-vitrin-bas {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--pf-2);
  flex: 0 0 auto;
}
.pf-vitrin-bas i.bi {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--pf-ates-rgb), .18);
  color: var(--pf-ates); font-size: 15px;
}
.pf-vitrin-bas h2 {
  margin: 0; font-size: 15px; font-weight: 700; color: #fff;
  white-space: nowrap;
}
.pf-vitrin-bas p { margin: 0; font-size: 11px; color: var(--pf-metin-3); white-space: nowrap; }

/* Oyun sekmeleri — vitrin barının içindeki AJAX'sız sekme şeridi */
.pf-vitrin-sekmeler {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--pf-1);
  flex: 1 1 auto; overflow-x: auto; scrollbar-width: none;
}
.pf-vitrin-sekmeler::-webkit-scrollbar { display: none; }
.pf-vitrin-sekme {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .22);
  border: 2px solid transparent;
  cursor: pointer; overflow: hidden;
  transition: border-color var(--pf-hiz), transform var(--pf-hiz);
}
.pf-vitrin-sekme img { width: 100%; height: 100%; object-fit: cover; }
.pf-vitrin-sekme:hover { transform: translateY(-2px); }
.pf-vitrin-sekme.aktif { border-color: var(--pf-ates); }

/* "Tümü" hapı — ölçüm: 94x45, #DF5929, r100, pad 0 20px, 14/500, gap 6 */
.pf-vitrin-tumu {
  position: relative; z-index: 1;
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 45px; padding: 0 20px;
  background: var(--pf-ates-3); color: #fff;
  border-radius: var(--pf-r-hap);
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--pf-hiz) ease-out;
}
.pf-vitrin-tumu:hover { background: var(--pf-ates-2); color: #fff; }
.pf-vitrin-tumu i { font-size: 11px; }

@media (max-width: 767px) {
  .pf-vitrin-bar { padding-left: 12px; border-radius: var(--pf-r-panel); min-height: 52px; }
  .pf-vitrin-bas p { display: none; }
  .pf-vitrin-bas h2 { font-size: 14px; }
  .pf-vitrin-tumu { padding: 8px 12px; border-radius: var(--pf-r-btn); }
  .pf-vitrin-sekme { width: 36px; height: 36px; }
}

/* Sade bölüm başlığı — vitrin barı gerekmeyen yerlerde */
.pf-bolum-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--pf-3); margin-bottom: var(--pf-3);
}
.pf-bolum-bas h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--pf-metin);
  display: flex; align-items: center; gap: var(--pf-2);
}
.pf-bolum-bas h2::before {
  content: ""; width: 4px; height: 20px; border-radius: 2px;
  background: var(--pf-ates); flex: 0 0 auto;
}
.pf-bolum-bas p { margin: 2px 0 0 12px; font-size: 12px; color: var(--pf-metin-3); }
.pf-bolum-link {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: var(--pf-ates-dolu); color: #fff;
  border-radius: var(--pf-r-hap); padding: 8px 16px;
  font-size: 12px; font-weight: 700;
}
.pf-bolum-link:hover { background: var(--pf-ates-2); color: #fff; }

.pf-bolum { margin-bottom: var(--pf-8); }

/* ===================================================================
   6. ÜRÜN KARTI (ızgara) — analiz: r15, derin zemin, hover bindirme
   =================================================================== */
/* Ölçüm: 1152 = 6 × 179 + 5 × 16 → 6 kolon, gap 16 */
.pf-izgara {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--pf-4);
}
@media (max-width: 1200px) { .pf-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .pf-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pf-2); } }

/* Künye (referans ölçümü): 179x281 · r15 · zemin #15161B · KENARLIK YOK ·
   gölge 0 2px 8px rgba(0,0,0,.12) · geçiş box-shadow .15s ease-out.
   Görsel 179x215 (1:1.2) r12 12 0 0 · gövde pad 5px 8px r0 0 15 15. */
.pf-urun {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--pf-yuzey-3);
  border-radius: var(--pf-r-kart);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  overflow: hidden;
  transition: box-shadow .15s ease-out, transform .15s ease-out;
}
.pf-urun:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
[data-bs-theme="light"] .pf-urun { border: 1px solid var(--pf-cizgi); }

.pf-urun-gorsel {
  display: block; position: relative;
  aspect-ratio: 179 / 215;                 /* kare değil, hafif dikey */
  background: var(--pf-yuzey-1);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.pf-urun-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.pf-urun-govde {
  display: flex; flex-direction: column; gap: var(--pf-1);
  padding: 5px 8px;                      /* ölçüm: alt dolgu da 5px */
  border-radius: 0 0 var(--pf-r-kart) var(--pf-r-kart);
}
.pf-urun-ad {
  font-size: 13px; font-weight: 600; color: var(--pf-metin); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.pf-urun-ad:hover { color: var(--pf-ates); }

/* Alt blok: solda kesinti çipi, sağda fiyat yığını */
.pf-urun-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: auto;
}
.pf-urun-kesinti {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 6px; border-radius: var(--pf-r-btn);
  background: rgba(var(--pf-ates-rgb), .16);
  color: var(--pf-ates);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.pf-urun-fiyat {
  display: flex; flex-direction: column; align-items: flex-end;
  margin-left: auto; line-height: 1.2;
}
.pf-urun-fiyat s { font-size: 12px; font-weight: 300; color: #7D7D7D; }
.pf-urun-fiyat b { font-size: 14px; font-weight: 700; color: var(--pf-metin); }
[data-bs-theme="light"] .pf-urun-fiyat s { color: var(--pf-metin-3); }

/* Yıldız satırı (yorum bloklarında da kullanılır) */
.pf-urun-yildiz {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--pf-metin-3);
}
.pf-urun-yildiz i { color: var(--pf-yildiz); font-size: 10px; }

/* Üst etiket (kategori / mağaza adı) — ilan kartı ve sepet satırı kullanır */
.pf-urun-kat {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--pf-metin-3);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Dolu eylem butonu — ilan kartı ve sepet gibi kartın altında eylem
   gerektiren yerlerde. Katalog ürün kartında KULLANILMAZ (eylem hover'da). */
.pf-urun-btn {
  display: block; text-align: center;
  margin: var(--pf-2) 8px 8px;
  background: var(--pf-ates-dolu); color: #fff;
  border-radius: var(--pf-r-btn);
  padding: 8px; font-size: 12px; font-weight: 700;
  transition: background .15s ease-out;
}
.pf-urun-btn:hover { background: var(--pf-ates-2); color: #fff; }

/* Kazanç çipi — yatay satır ve detay sayfalarında kullanılır */
.pf-kazanc {
  font-size: 10px; font-weight: 700;
  color: var(--pf-basari);
  background: rgba(78, 208, 202, .12);
  border-radius: var(--pf-r-btn); padding: 1px 6px;
}
[data-bs-theme="light"] .pf-kazanc { background: rgba(21, 124, 119, .12); }

/* İndirim rozeti — analiz: indigo, kartın sol üstünde */
.pf-indirim {
  position: absolute; z-index: 2; top: 0; left: 10px;
  background: var(--pf-indigo); color: #fff;
  border-radius: 0 0 var(--pf-r-sm) var(--pf-r-sm);
  padding: 3px 8px; font-size: 11px; font-weight: 600;
}
.pf-urun.tukendi .pf-urun-gorsel img { filter: grayscale(1); opacity: .5; }
.pf-tukendi-etiket {
  position: absolute; inset: auto 0 0 0;
  background: rgba(0, 0, 0, .72); color: #fff;
  text-align: center; padding: 4px; font-size: 11px; font-weight: 600;
}

/* Hover bindirmesi — YALNIZCA görsel alanını kaplar (gövdeye inmez), böylece
   ad ve fiyat hover sırasında da okunur kalır. Zemin: 206° çift katmanlı
   yumuşak gradyan (referans), düz koyu blok değil. */
.pf-urun-hover {
  position: absolute; z-index: 3;
  top: 0; left: 0; right: 0; bottom: auto;
  aspect-ratio: 179 / 215;
  border-radius: 12px 12px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 6px; padding: var(--pf-2); text-align: center;
  background: linear-gradient(206deg, rgba(0, 0, 0, .25), rgba(112, 112, 112, .5));
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease-out, visibility .15s ease-out;
}
.pf-urun:hover .pf-urun-hover,
.pf-urun:focus-within .pf-urun-hover { opacity: 1; visibility: visible; }
.pf-urun-hover-meta { font-size: 11px; font-weight: 600; color: #fff; }
/* Turuncu hap eylem — referans: bg #FF6000, r50, 12px */
.pf-urun-hover-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pf-ates); color: #fff;
  border-radius: 50px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; line-height: 1.3;
}
/* Dokunmatikte hover yok; kart zaten baştan sona tıklanabilir */
@media (hover: none) { .pf-urun-hover { display: none; } }

/* ---- Yatay ürün satırı — kategori/liste sayfalarının ana dili.
   Künye (referans): satır 1152×112 · r8 · #1C1E26 · 1px #323948 · pad 8
   görsel 75×94 r 0 0 15 15 · ad 16/600 · sağ blok 360 · şerit 84×18 ---- */
.pf-satir-liste { display: flex; flex-direction: column; gap: var(--pf-2); }
.pf-satir {
  position: relative;
  display: flex; align-items: center; gap: var(--pf-2);
  min-height: 112px;
  background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-panel);
  padding: var(--pf-2);
  transition: border-color var(--pf-hiz) ease-out;
}
.pf-satir:hover { border-color: var(--pf-ates); }

/* Görsel dar ve dikey: e-pin kapakları kare değil */
.pf-satir-gorsel {
  width: 75px; height: 94px; flex: 0 0 auto;
  border-radius: 0 0 var(--pf-r-kart) var(--pf-r-kart);
  background: var(--pf-yuzey-3); overflow: hidden;
}
.pf-satir-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.pf-satir-bilgi {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding-inline: var(--pf-2);
}
.pf-satir-ad { font-size: 16px; font-weight: 600; color: var(--pf-metin); line-height: 1.3; }
.pf-satir-ad:hover { color: var(--pf-ates); }
.pf-satir-meta {
  display: flex; align-items: center; gap: var(--pf-3); flex-wrap: wrap;
  font-size: 12px; color: var(--pf-metin-3);
}
.pf-satir-meta i { font-size: 11px; }

/* Sağ blok sabit genişlikte: fiyatlar satırdan satıra aynı hizada dursun,
   göz aşağı inerken kayması karşılaştırmayı zorlaştırıyordu. */
.pf-satir-sag {
  flex: 0 0 auto; width: 360px;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--pf-4);
}
.pf-satir-fiyat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.pf-satir-fiyat b { font-size: 18px; font-weight: 700; color: var(--pf-metin); }
.pf-satir-fiyat s { font-size: 12px; font-weight: 300; color: #7D7D7D; }
[data-bs-theme="light"] .pf-satir-fiyat s { color: var(--pf-metin-3); }

/* İndirim şeridi satırın üstünden sarkar (84×18, indigo) */
.pf-satir .pf-indirim {
  left: auto; right: 16px; top: -1px;
  min-width: 84px; text-align: center;
  border-radius: 0 0 6px 6px;
  font-size: 12px; font-weight: 600;
}

@media (max-width: 900px) {
  .pf-satir-sag { width: auto; }
}

@media (max-width: 640px) {
  .pf-satir { flex-wrap: wrap; }
  .pf-satir-gorsel { width: 64px; height: 64px; }
  .pf-satir-sag { width: 100%; justify-content: space-between; }
}

/* Rozet çerçevesi (ortak Rozet motoru) */
.pf-rozet-cerceve { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pf-yuva { position: absolute; display: flex; gap: 4px; }
.pf-yuva-sol-ust { top: 6px; left: 6px; }
.pf-yuva-sag-ust { top: 6px; right: 6px; }
.pf-yuva-sol-alt { bottom: 6px; left: 6px; }
.pf-yuva-sag-alt { bottom: 6px; right: 6px; }
.pf-yuva-orta { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pf-rozet {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: var(--pf-r-btn);
  font-size: 10px; font-weight: 700; line-height: 1;
  background: var(--pf-rz); color: #fff;
  border: 1px solid transparent;
}
.pf-rozet i { font-size: 10px; }

/* Renk sözlüğü — panel: primary/success/warning/danger/gold/notr.
   Zeminler beyaz metinle AA geçecek tonda seçildi. */
.pf-r-primary { --pf-rz: var(--pf-ates-dolu); --pf-rz-parlak: var(--pf-ates); }
.pf-r-danger  { --pf-rz: #C62828; --pf-rz-parlak: #FF6B6B; }
.pf-r-success { --pf-rz: #157C77; --pf-rz-parlak: #4ED0CA; }
.pf-r-warning { --pf-rz: #8A6208; --pf-rz-parlak: #E4AC50; }
.pf-r-gold    { --pf-rz: #8F6717; --pf-rz-parlak: #E0A83B; }
.pf-r-notr    { --pf-rz: #1F242E; --pf-rz-parlak: #A3A9B5; }

/* Stil sözlüğü — panel: solid/soft/outline/dot/kaplama */
.pf-rozet-solid { background: var(--pf-rz); }
.pf-rozet-soft {
  background: color-mix(in srgb, var(--pf-rz) 30%, rgba(0, 0, 0, .70));
  color: var(--pf-rz-parlak);
}
.pf-rozet-outline {
  background: rgba(0, 0, 0, .62);
  border-color: var(--pf-rz-parlak);
  color: var(--pf-rz-parlak);
}
.pf-rozet-dot {
  width: 12px; height: 12px; padding: 0; border-radius: 50%;
  background: var(--pf-rz); overflow: hidden;
}
.pf-rozet-dot i, .pf-rozet-dot span { display: none; }
/* Tam kaplama — "tükendi" tipi: yuvayı değil görselin tamamını kaplar.
   Orta yuva bu yüzden noktasal değil, tüm alana yayılmış bir katmandır. */
.pf-yuva-orta {
  inset: 0; left: 0; top: 0; transform: none;
  align-items: center; justify-content: center;
}
.pf-rozet-kaplama {
  width: 100%; height: 100%;
  justify-content: center;
  border-radius: 0;
  background: color-mix(in srgb, var(--pf-rz) 45%, rgba(0, 0, 0, .78));
  font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
}

/* ===================================================================
   7. STORY ŞERİDİ
   =================================================================== */
/* Oyun logosu ÇİPİ — daire avatar değil (ölçüm: 74x50, r12, 2px halka,
   iç logo r10 · #4E557F zemin · 5px iç boşluk). Logolar zaten wordmark
   olduğu için altına ad yazılmaz; ad erişilebilirlik için title/sr-only. */
.pf-story-bolum { margin: var(--pf-4) 0; }
.pf-story-serit {
  display: flex; gap: var(--pf-2);
  overflow-x: auto; padding-bottom: var(--pf-2);
  scrollbar-width: none;
}
.pf-story-serit::-webkit-scrollbar { display: none; }
.pf-story {
  flex: 0 0 auto;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: block;
}
/* Kap: 89x50, köşeleri keser — içindeki gradyan taşar, buradan kırpılır */
.pf-story-halka {
  position: relative; display: block;
  width: 89px; height: 50px;
  border-radius: 12px; overflow: hidden;
  transition: transform var(--pf-hiz);
}
.pf-story:hover .pf-story-halka { transform: translateY(-2px); }

/* Halka + gradyan tek öğede.
   Kaynak sitede gradyan 232x213'lük MUTLAK konumlu bir kutu; kırpılsa da
   yerleşim kutusu duruyor ve dar ekranda belgeyi 71px genişletiyordu.
   Aynı görüntü, ekstra kutu olmadan: halka `border`, gradyan ise
   background-size/position ile aynı dilime oturtuluyor. */
/* Halka. Gradyan zemin yalnızca görsel gelmediğinde/şeffafken görünür;
   kapak görseli çipi doldurduğu için normalde onun altında kalır. */
.pf-story-ic {
  position: relative; display: block;
  width: 100%; height: 100%;
  border: 2px solid var(--pf-mavi);
  border-radius: 12px;
  overflow: hidden;
  background-image: linear-gradient(196deg, #494C5C 65%, var(--pf-ates));
  background-size: 232px 213px;
  background-position: -15px -61px;
  background-repeat: no-repeat;
}
.pf-story.goruldu .pf-story-ic { border-color: var(--pf-cizgi-2); }
[data-bs-theme="light"] .pf-story-ic {
  background-image: linear-gradient(196deg, #C9CEDC 65%, var(--pf-ates));
}

/* Görsel çipi doldurur.
   Referans burada `object-fit:contain` + `mix-blend-mode:overlay` kullanıyor;
   çünkü oradaki görseller şeffaf zeminli WORDMARK logolar. Bizim kategori
   görsellerimiz koyu oyun KAPAKLARI — aynı karışım onları zeminle birleştirip
   okunmaz hâle getiriyordu (çipler boş kutu gibi görünüyordu).
   Kapak sanatının doğru karşılığı: kırp ve doldur. */
.pf-story-logo {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  border-radius: 10px;
  object-fit: cover;
  background: var(--pf-yuzey-3);
  transition: transform var(--pf-hiz-yavas) ease-out;
}
.pf-story:hover .pf-story-logo { transform: scale(1.06); }
.pf-story-logo-bos {
  display: grid; place-items: center;
  background: var(--pf-yuzey-3);
  color: var(--pf-metin-3); font-size: 18px;
}
/* Ad görsel olarak gizlenir, ekran okuyucuda kalır */
.pf-story-ad {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Tam ekran görüntüleyici */
.pf-story-goruntu {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(8, 10, 24, .96);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity 180ms;
}
.pf-story-goruntu.acik { opacity: 1; }
.pf-story-ilerleme { display: flex; gap: 4px; padding: 12px 14px 6px; }
.pf-story-cubuk { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.pf-story-cubuk i { display: block; height: 100%; width: 0; background: #fff; }
.pf-story-cubuk.gecti i { width: 100%; }
@keyframes pfStoryDol { from { width: 0; } to { width: 100%; } }
.pf-story-kapat {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 0; color: #fff; cursor: pointer;
}
.pf-story-sahne { position: relative; flex: 1 1 auto; display: grid; place-items: center; padding: var(--pf-3); }
.pf-story-gez { position: absolute; top: 0; bottom: 0; width: 34%; background: none; border: 0; cursor: pointer; }
.pf-story-gez.sol { left: 0; } .pf-story-gez.sag { right: 0; }
.pf-story-kare {
  margin: 0; max-width: 420px; width: 100%;
  border-radius: var(--pf-r-kart); overflow: hidden;
  background: var(--pf-yuzey-2);
}
.pf-story-kare img { width: 100%; display: block; }
.pf-story-alt { padding: var(--pf-3); display: flex; flex-direction: column; gap: var(--pf-2); }
.pf-story-alt b { color: #fff; font-size: 14px; }

/* ===================================================================
   8. HERO — büyük slider + dikey nokta kartları (analiz: slider-card-dots)
   =================================================================== */
/* Boşluğu sahne veriyor (üstten 48px); hero'nun kendi kenar boşluğu
   bölümü 402 yerine 438'e çıkarıyordu. */
.pf-hero { margin: 0; }
/* Ölçüm: slider 1152x402 içinde r20, üstten 48px nefes */
.pf-slider {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pf-yuzey-2);
  aspect-ratio: 1152 / 354;
}
.pf-slayt {
  position: absolute; inset: 0;
  display: block; opacity: 0; visibility: hidden;
  transition: opacity 420ms ease;
}
.pf-slayt.aktif { opacity: 1; visibility: visible; }
.pf-slayt img { width: 100%; height: 100%; object-fit: cover; }
.pf-slayt-metin {
  position: absolute; inset: auto 0 0 0;
  padding: var(--pf-6) var(--pf-5) var(--pf-4);
  background: linear-gradient(transparent, rgba(15, 20, 52, .92));
  display: flex; flex-direction: column; gap: 2px;
}
.pf-slayt-metin b { color: #fff; font-size: 20px; font-weight: 700; }
.pf-slayt-metin span { color: var(--pf-metin-2); font-size: 13px; }
@media (max-width: 640px) {
  .pf-slider { aspect-ratio: 16 / 10; }
  .pf-slayt-metin b { font-size: 15px; }
}

/* Slider okları — analiz: mavi daire */
.pf-slider-ok {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pf-mavi); border: 0; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  opacity: .85;
}
.pf-slider-ok:hover { opacity: 1; }
.pf-slider-ok.sol { left: 12px; } .pf-slider-ok.sag { right: 12px; }

/* Slider gezinme şeridi — soyut noktalar değil, LOGO kartları.
   (ölçüm: 14 öğe, her biri 77x104, yalnız görsel; metin yok.)
   Kullanıcı hangi kampanyaya gideceğini nokta sayarak değil logodan görür. */
.pf-slider-kartlar {
  display: flex; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.pf-slider-kartlar::-webkit-scrollbar { display: none; }
/* Aktif göstergesi ÜSTTE ve nötr beyaz (%13) — turuncu alt çizgi değil */
.pf-slider-kart {
  flex: 0 0 auto; width: 77px; height: 104px;
  display: grid; place-items: center;
  padding: var(--pf-2);
  background: none; border: 0;
  border-top: 2px solid transparent;
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--pf-hiz) ease-out, border-color var(--pf-hiz) ease-out,
              background var(--pf-hiz) ease-out;
}
.pf-slider-kart:hover { opacity: .85; background: rgba(255, 255, 255, .04); }
.pf-slider-kart.aktif {
  opacity: 1;
  border-top-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .06);
}
.pf-slider-kart img { max-width: 100%; max-height: 64px; object-fit: contain; }
/* Görseli olmayan kampanyada başlık yedeğe düşer */
.pf-slider-kart span {
  font-size: 10.5px; font-weight: 600; color: var(--pf-metin-2);
  text-align: center; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-slider-kart img + span { display: none; }

/* Slider bölümü — tam genişlik dekoratif sahne, alt köşeler 30px.
   Blok index.php'de .container içinde basıldığı için kapsayıcıdan
   taşırılır. 100vw yerine calc(50% - 50vw): kaydırma çubuğu genişliği
   hesaba katılmadığında sağda 15px'lik yatay taşma oluşuyordu. */
.pf-slider-sahne {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: 48px calc(50vw - 50%) 0;        /* ölçüm: üstten 48px nefes */
  border-radius: 0 0 30px 30px;
  overflow: hidden;
  background: var(--pf-kabuk-dip);
  transition: background-image .5s ease-in-out;
}
/* Taşırma sağda ince bir kaydırma yaratmasın; clip sticky'yi bozmaz
   (hidden bozardı — ürün detayındaki yapışkan satın alma paneli var). */
body[data-tema="pinforge"] main { overflow-x: clip; }
.pf-slider-sahne-fon {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .35; pointer-events: none;
}
.pf-slider-sahne > .pf-kap { position: relative; }

/* Fırsat banner satırı */
.pf-banner-satir { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pf-3); }
@media (max-width: 991px) { .pf-banner-satir { grid-template-columns: repeat(2, 1fr); } }
.pf-banner {
  position: relative; display: block;
  border-radius: var(--pf-r-panel); overflow: hidden;
  aspect-ratio: 16 / 7; background: var(--pf-yuzey-2);
}
.pf-banner img { width: 100%; height: 100%; object-fit: cover; }
.pf-banner span {
  position: absolute; inset: auto 0 0 0; padding: var(--pf-3) var(--pf-2) var(--pf-2);
  background: linear-gradient(transparent, rgba(15, 20, 52, .9));
  color: #fff; font-size: 12px; font-weight: 600;
}

/* Güven şeridi */
.pf-guven {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pf-3);
  margin: var(--pf-4) 0;
}
@media (max-width: 767px) { .pf-guven { grid-template-columns: repeat(2, 1fr); } }
.pf-guven-oge {
  display: flex; align-items: center; gap: var(--pf-2);
  background: var(--pf-kabuk-ust);
  border-radius: 33px;                    /* analiz: footer güven kutusu */
  padding: 12px 18px;
  font-size: 12px; font-weight: 600; color: var(--pf-metin-2);
}
.pf-guven-oge i { color: var(--pf-ates); font-size: 20px; flex: 0 0 auto; }

/* ===================================================================
   9. ŞERİTLER — kategori, mağaza, yayıncı, marka, yorum, canlı akış
   =================================================================== */
/* Yatay şeritler — ORTAK KURAL.
   `overflow-x:auto` tek başına yetmiyor: dar ekranda şeridin içeriği belgenin
   kaydırma genişliğini büyütüyor (375 → 446) ve position:fixed olan tab bar,
   sticky bar, çerez bandı hepsi o genişliğe uzuyordu. `contain:paint` şeridi
   kendi kutusuna hapsedip bunu keser; kutu içi kaydırma aynen çalışır. */
.pf-serit, .pf-story-serit, .pf-slider-kartlar, .pf-vitrin-sekmeler, .pf-katbar-ic {
  contain: paint;
}

.pf-serit {
  display: flex; gap: var(--pf-3);
  overflow-x: auto; padding-bottom: var(--pf-2);
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.pf-serit > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Kategori / oyun kartı — dikey poster */
.pf-oyun-izgara {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pf-3);
}
@media (max-width: 991px) { .pf-oyun-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-oyun-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pf-2); } }
/* =====================================================================
   OYUN KARTLARI (PUBG / LOL / Wolfteam / Steam …)

   YENİLENDİ. Eskisi düz kenarlıklı bir kutuydu; hover yalnızca 3px
   yukarı kaydırıp kenarlığı turuncuya çeviriyordu — 2019 hissi tam da
   buradan geliyordu. Şimdi üç katman:
     1. GRADIENT KENARLIK — hover'da kartı saran ince renk halkası.
        border-image yerine ::before + iki katmanlı arka plan (padding-box
        / border-box) kullanılıyor: köşe yarıçapı bozulmuyor.
     2. SCALE — kapak görseli hafifçe büyür, kart yerinde kalır. Kartı
        büyütmek ızgarada komşuları kaydırıyor gibi görünüyordu.
     3. SHINE — hover'da bir kez soldan sağa geçen ışık süpürmesi.

   NOT: Burası müşteri tarafı teması; panelin "sıfır gradient" kuralı
   burada geçerli DEĞİL. Hareketi kapatanlar için tamamı devre dışı.
   ===================================================================== */
.pf-oyun {
  position: relative; display: block; isolation: isolate;
  border-radius: var(--pf-r-kart); overflow: hidden;
  background: var(--pf-yuzey-3);
  border: 1px solid var(--pf-cizgi);
  transition: transform var(--pf-hiz), border-color var(--pf-hiz),
              box-shadow var(--pf-hiz);
}
/* Gradient halka — kenarlığın üstünde durur, yalnız hover'da görünür. */
.pf-oyun::before {
  content: ''; position: absolute; inset: -1px; z-index: 2;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--pf-ates), #ffb347 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--pf-hiz) ease-out; pointer-events: none;
}
.pf-oyun:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
}
.pf-oyun:hover::before { opacity: 1; }
.pf-oyun:focus-visible { outline: 2px solid var(--pf-ates); outline-offset: 3px; }

/* Kapak yakınlaşması */
.pf-oyun-kapak img { transition: transform 420ms cubic-bezier(.2, .7, .3, 1); }
.pf-oyun:hover .pf-oyun-kapak img { transform: scale(1.07); }

/* Işık süpürmesi */
.pf-oyun::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -55%; width: 40%;
  z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.pf-oyun:hover::after { animation: pfParilti .7s ease-out; }
@keyframes pfParilti {
  from { left: -55%; opacity: 1; }
  to   { left: 120%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-oyun, .pf-oyun-kapak img { transition: none; }
  .pf-oyun:hover { transform: none; }
  .pf-oyun:hover .pf-oyun-kapak img { transform: none; }
  .pf-oyun:hover::after { animation: none; }
}
/* Kapak bir <span>; kartın kendisi block olduğu için display verilmezse
   inline kalır ve aspect-ratio yok sayılır (ızgara 22px'e çöküyordu). */
.pf-oyun-kapak { display: block; aspect-ratio: 3 / 4; background: var(--pf-yuzey-1); }
.pf-oyun-kapak img { width: 100%; height: 100%; object-fit: cover; }
.pf-oyun-ad {
  position: absolute; inset: auto 0 0 0;
  padding: var(--pf-5) var(--pf-2) var(--pf-2);
  background: linear-gradient(transparent, rgba(0, 0, 0, .88));
  color: #fff; font-size: 12px; font-weight: 600; text-align: center;
}

/* Yayıncı kartı — ölçüm: 218x152, r12, gölge 0 7px 7px rgba(0,0,0,.18) */
.pf-yayinci {
  position: relative; width: 218px; height: 152px;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 7px 7px rgba(0, 0, 0, .18);
  transition: transform var(--pf-hiz) ease-out;
}
.pf-yayinci:hover { transform: translateY(-2px); }
.pf-yayinci img { width: 100%; height: 100%; object-fit: cover; }
.pf-yayinci-kutu {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .58);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px; padding: var(--pf-2);
}
.pf-yayinci-kutu b { color: #fff; font-size: 12.5px; }
.pf-yayinci-kutu span { color: var(--pf-metin-3); font-size: 11px; }
.pf-yayinci-canli {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pf-tehlike); color: #fff;
  border-radius: var(--pf-r-btn); padding: 2px 7px;
  font-size: 10px; font-weight: 700;
}

/* Mağaza rozeti */
.pf-magaza {
  width: 210px;
  display: flex; align-items: center; gap: var(--pf-2);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-panel); padding: var(--pf-2);
}
.pf-magaza:hover { border-color: var(--pf-ates); }
.pf-magaza-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--pf-yuzey-3);
}
.pf-magaza b { display: block; font-size: 12.5px; color: var(--pf-metin); }
.pf-magaza span { font-size: 11px; color: var(--pf-metin-3); }
.pf-magaza i.bi-patch-check-fill { color: var(--pf-mavi-2); }

/* Marka logosu */
.pf-marka {
  width: 130px; height: 60px;
  display: grid; place-items: center;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-panel); padding: var(--pf-2);
}
.pf-marka img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .82; }
.pf-marka:hover img { opacity: 1; }

/* Yorum kartı */
.pf-yorum {
  width: 300px;
  background: var(--pf-yuzey-2); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-sm); padding: var(--pf-3);
  display: flex; flex-direction: column; gap: var(--pf-2);
}
.pf-yorum-bas { display: flex; align-items: center; gap: var(--pf-2); }
.pf-yorum-bas b { font-size: 12.5px; color: var(--pf-metin); }
.pf-yorum-bas time { font-size: 11px; color: var(--pf-metin-3); margin-left: auto; }
.pf-yorum p { margin: 0; font-size: 12.5px; color: var(--pf-metin-2); }
.pf-yildizlar i { color: var(--pf-yildiz); font-size: 11px; }
.pf-yildizlar i.bos { color: var(--pf-cizgi-2); }

/* Canlı satış akışı — kayan bant */
.pf-canli {
  background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-hap);
  padding: var(--pf-2) var(--pf-4);
  overflow: hidden; position: relative;
  display: flex; align-items: center; gap: var(--pf-3);
}
.pf-canli-etiket {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--pf-ates); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.pf-canli-ray { flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pf-canli-akis { display: flex; gap: var(--pf-6); width: max-content; animation: pfKay 38s linear infinite; }
.pf-canli:hover .pf-canli-akis { animation-play-state: paused; }
@keyframes pfKay { to { transform: translateX(-50%); } }
.pf-canli-oge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pf-metin-3); white-space: nowrap; }
.pf-canli-oge b { color: var(--pf-metin-2); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pf-canli-akis { animation: none; } }

/* Çekiliş kartı */
.pf-cekilis {
  width: 260px;
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-kart); overflow: hidden;
  display: flex; flex-direction: column;
}
.pf-cekilis-gorsel { aspect-ratio: 16 / 9; background: var(--pf-yuzey-3); }
.pf-cekilis-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.pf-cekilis-govde { padding: var(--pf-3); display: flex; flex-direction: column; gap: var(--pf-2); flex: 1 1 auto; }
.pf-cekilis-govde b { font-size: 13px; color: var(--pf-metin); }
.pf-sayac { display: flex; gap: var(--pf-1); }
.pf-sayac span {
  background: var(--pf-yuzey-3); border-radius: var(--pf-r-btn);
  padding: 4px 7px; font-size: 12px; font-weight: 700; color: var(--pf-ates);
  font-variant-numeric: tabular-nums;
}

/* Blog kartı */
.pf-blog-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pf-3); }
@media (max-width: 991px) { .pf-blog-izgara { grid-template-columns: repeat(2, 1fr); } }
.pf-blog {
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-panel); overflow: hidden;
  display: flex; flex-direction: column;
}
.pf-blog:hover { border-color: var(--pf-ates); }
.pf-blog-kapak { aspect-ratio: 16 / 9; background: var(--pf-yuzey-3); }
.pf-blog-kapak img { width: 100%; height: 100%; object-fit: cover; }
.pf-blog-govde { padding: var(--pf-3); display: flex; flex-direction: column; gap: 4px; }
.pf-blog-govde b { font-size: 13px; color: var(--pf-metin); }
.pf-blog-govde time { font-size: 11px; color: var(--pf-metin-3); }

/* Sosyal takip banner'ı — ölçüm: h67, r100, pad 0 20px, 12/700,
   gölge 0 0 10px #000 */
.pf-sosyal-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-3); flex-wrap: wrap;
  min-height: 67px; padding: 0 20px;
  background: linear-gradient(90deg, rgba(var(--pf-ates-rgb), .22), var(--pf-yuzey-1));
  border-radius: var(--pf-r-hap);
  box-shadow: 0 0 10px rgba(0, 0, 0, .55);
  font-size: 12px; font-weight: 700;
}
.pf-sosyal-banner b { color: var(--pf-metin); font-size: 14px; }
.pf-sosyal-banner span { color: var(--pf-metin-3); font-size: 12px; }

/* SEO metin bloğu */
.pf-seo {
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-panel); padding: var(--pf-4);
  font-size: 12.5px; color: var(--pf-metin-3); line-height: 1.7;
  margin: var(--pf-6) 0;
}
.pf-seo h2, .pf-seo h3 { font-size: 14px; color: var(--pf-metin-2); }

/* ===================================================================
   10. FOOTER — güven hapları → link kolonları → dip bant
   =================================================================== */
.pf-footer { margin-top: var(--pf-10); }

.pf-footer-guven { background: var(--pf-kabuk-dip); padding: var(--pf-6) 0; }
.pf-footer-guven-ic { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pf-3); }
@media (max-width: 767px) { .pf-footer-guven-ic { grid-template-columns: repeat(2, 1fr); } }
.pf-footer-kutu {
  background: var(--pf-kabuk-ust);
  border-radius: 33px;
  padding: var(--pf-5) var(--pf-4);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.pf-footer-kutu i { font-size: 26px; color: var(--pf-ates); }
.pf-footer-kutu b { color: #fff; font-size: 13px; }
.pf-footer-kutu span { color: var(--pf-metin-3); font-size: 11.5px; }

.pf-footer-bulten { background: var(--pf-kabuk-ust); padding: var(--pf-6) 0; }
.pf-footer-bulten-ic {
  display: flex; align-items: center; justify-content: center;
  gap: var(--pf-4); flex-wrap: wrap; text-align: center;
}
.pf-footer-bulten h2 { margin: 0; font-size: 24px; font-weight: 700; color: #fff; }
.pf-footer-bulten form { display: flex; gap: var(--pf-2); flex-wrap: wrap; justify-content: center; }
.pf-footer-bulten input {
  background: var(--pf-kabuk-oyuk); border: 1px solid var(--pf-kabuk-cizgi);
  border-radius: var(--pf-r-btn); color: #fff;
  padding: 10px 14px; font-size: 13px; min-width: 260px;
}
.pf-footer-bulten input::placeholder { color: #6B7392; }

.pf-footer-ana { background: var(--pf-kabuk-dip); padding: var(--pf-8) 0; }
.pf-footer-kolonlar {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--pf-5);
}
@media (max-width: 991px) { .pf-footer-kolonlar { grid-template-columns: repeat(2, 1fr); } }
.pf-footer-kolon h3 {
  font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 var(--pf-3);
}
.pf-footer-kolon a, .pf-footer-kolon p {
  display: block; font-size: 12px; color: var(--pf-metin-3);
  margin: 0 0 5px; line-height: 1.6;
}
.pf-footer-kolon a:hover { color: var(--pf-ates); }
.pf-footer-marka { display: flex; flex-direction: column; gap: var(--pf-3); }
.pf-footer-marka img { height: 38px; width: auto; align-self: flex-start; }
.pf-footer-sosyal { display: flex; gap: var(--pf-2); }
.pf-footer-sosyal a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pf-kabuk-ust); color: var(--pf-metin-2); font-size: 15px;
}
.pf-footer-sosyal a:hover { background: var(--pf-ates-dolu); color: #fff; }

.pf-footer-dip { background: var(--pf-kabuk-dip); border-top: 1px solid var(--pf-kabuk-cizgi); padding: var(--pf-5) 0; }
.pf-footer-dip-ic { display: flex; flex-direction: column; align-items: center; gap: var(--pf-3); text-align: center; }
.pf-odeme-logolar { display: flex; gap: var(--pf-3); flex-wrap: wrap; justify-content: center; align-items: center; }
.pf-odeme-logolar img { height: 26px; width: auto; opacity: .8; }
.pf-footer-dip p { margin: 0; font-size: 11.5px; color: var(--pf-metin-3); }
.pf-footer-dip .pf-telif { font-weight: 600; color: var(--pf-metin-2); }

/* ===================================================================
   11. YÜZEN KISAYOL MENÜSÜ (sağ kenar) + MOBİL TAB BAR
   =================================================================== */
/* Yüzen kısayol — ölçüm: 92x468, r 40 0 0 40, pad 24px 0 24px 5px,
   gap 25px, turuncu kenar + turuncu saçaklı gölge; öğe 86x64, 14/500 */
.pf-kisayol {
  /* BANT ortalaması: top:50% + translateY(-50%) kısa pencerede rayın üst
     yarısını header'ın sağ ucuna (+Bakiye Yükle) bindiriyordu. Şimdi ray
     [258px, alt kenar] bandının içinde otomatik marjla ortalanıyor —
     hep görünür, ama üst sınırı header'ın altı: hiçbir pencere boyunda
     yukarı taşamaz. 258 = yardımcı şerit + ana bar + kategori barı payı. */
  position: fixed; z-index: 55; right: 0;
  top: 258px; bottom: 0;
  margin-block: auto;
  height: fit-content;
  width: 92px;
  display: flex; flex-direction: column; gap: 25px;
  background: var(--pf-kabuk);
  border: 1px solid var(--pf-ates); border-right: 0;
  border-radius: 40px 0 0 40px;
  padding: 24px 0 24px 5px;
  box-shadow: 5px 1px 40px 2px rgba(var(--pf-ates-rgb), .55);
}
.pf-kisayol a {
  width: 86px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 1px 4px;
  color: #fff; font-size: 14px; font-weight: 500; text-align: center;
  transition: color var(--pf-hiz);
}
.pf-kisayol a:hover { color: var(--pf-ates); }
.pf-kisayol i { font-size: 26px; color: var(--pf-ates); }
.pf-kisayol span { font-size: 12px; line-height: 1.2; }
@media (max-width: 1400px) { .pf-kisayol { display: none; } }

.pf-tabbar {
  position: fixed; z-index: 60; inset: auto 0 0 0;
  display: none; align-items: stretch;
  background: var(--pf-kabuk);
  border-top: 1px solid var(--pf-kabuk-cizgi);
  border-radius: 30px 30px 0 0;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}
.pf-tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px; color: var(--pf-metin-3); font-size: 10px;
}
.pf-tab i { font-size: 19px; }
.pf-tab.aktif { color: var(--pf-ates); }
.pf-tab-ikon { position: relative; }
.pf-tab-ikon em {
  position: absolute; top: -4px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--pf-ates-dolu); color: #fff;
  font-size: 9px; font-weight: 700; font-style: normal;
  display: grid; place-items: center;
}
.pf-tab-ikon em[hidden] { display: none; }

@media (max-width: 991px) {
  .pf-tabbar { display: flex; }
  body[data-tema="pinforge"] { padding-bottom: 74px; }
  .pf-menu-btn { display: block; }
  .pf-bar-ic { flex-wrap: wrap; min-height: 0; padding-block: var(--pf-2); gap: var(--pf-2); }
  .pf-ara { order: 10; flex: 1 0 100%; max-width: none; }
  /* Bakiye tutarı mobilde de görünür — yalnız kullanıcı adı gizlenir.
     Tutar gizlenince sağ üstte anlamsız bir "+" kalıyordu; müşteri
     bakiyesini görmek için sayfa açmak zorundaydı. */
  .pf-uye-ad { display: none; }
  .pf-bakiye { padding: 4px 10px; }
  .pf-bakiye-metin b { font-size: 12px; }

  /* İki satırda kalsın: [menü · logo · eylemler] + [arama].
     "Giriş Yap" hayalet butonu üçüncü satıra taşırıyordu; girişe hem
     çekmeceden hem alt tab bar'dan ulaşıldığı için mobilde düşürülür. */
  .pf-eylem .pf-btn-hayalet { display: none; }
  .pf-eylem .pf-btn { padding: 8px 12px; font-size: 12px; }
  .pf-yardimci-ic { min-height: 34px; }
}

/* ===================================================================
   12. MOBİL ÇEKMECE
   =================================================================== */
.pf-cekmece-perde {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity 220ms;
}
.pf-cekmece-perde.acik { opacity: 1; }
.pf-cekmece {
  position: fixed; inset: 0 auto 0 0; z-index: 1091;
  width: min(320px, 86vw);
  background: var(--pf-kabuk);
  border-right: 1px solid var(--pf-kabuk-cizgi);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 240ms ease;
  overflow-y: auto;
}
.pf-cekmece.acik { transform: none; }
.pf-cekmece-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pf-3) var(--pf-4);
  border-bottom: 1px solid var(--pf-kabuk-cizgi);
  color: #fff; font-weight: 700;
}
.pf-cekmece-bas button { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.pf-cekmece-uye {
  display: flex; align-items: center; gap: var(--pf-3);
  padding: var(--pf-3) var(--pf-4);
  border-bottom: 1px solid var(--pf-kabuk-cizgi);
}
.pf-cekmece-uye b { display: block; color: #fff; font-size: 13px; }
.pf-cekmece-uye small { color: var(--pf-ates); font-size: 11px; font-weight: 600; }
.pf-cekmece-giris { display: flex; flex-direction: column; gap: var(--pf-2); padding: var(--pf-3) var(--pf-4); }
.pf-cekmece-menu { display: flex; flex-direction: column; padding: var(--pf-2) var(--pf-2) var(--pf-6); }
.pf-cekmece-baslik {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--pf-metin-3); padding: var(--pf-4) var(--pf-2) var(--pf-1);
}
.pf-cekmece-menu a {
  display: flex; align-items: center; gap: var(--pf-2);
  padding: 10px var(--pf-2); border-radius: var(--pf-r-sm);
  color: var(--pf-metin-2); font-size: 13px;
}
.pf-cekmece-menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pf-cekmece-menu a i.bi { width: 20px; text-align: center; color: var(--pf-metin-3); }
.pf-cekmece-menu a img { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; }
.pf-cekmece-vurgu { color: var(--pf-ates) !important; font-weight: 600; }
.pf-cekmece-vurgu i.bi { color: var(--pf-ates) !important; }

/* ===================================================================
   13. YÖNETİCİ UYARI ŞERİDİ
   =================================================================== */
.pf-modul-uyari {
  background: rgba(228, 172, 80, .14);
  border-bottom: 1px solid rgba(228, 172, 80, .35);
  color: var(--pf-uyari); font-size: 12px;
}
.pf-modul-uyari .pf-kap { display: flex; align-items: center; gap: var(--pf-2); padding-block: var(--pf-2); }
.pf-modul-uyari a { margin-left: auto; font-weight: 700; text-decoration: underline; }

/* ===================================================================
   14. BOŞ DURUM
   =================================================================== */
.pf-bos {
  text-align: center; padding: var(--pf-12) var(--pf-4);
  color: var(--pf-metin-3);
  background: var(--pf-yuzey-1); border: 1px dashed var(--pf-cizgi);
  border-radius: var(--pf-r-panel);
}
.pf-bos i { font-size: 34px; color: var(--pf-cizgi-2); display: block; margin-bottom: var(--pf-2); }
.pf-bos b { display: block; color: var(--pf-metin-2); font-size: 14px; margin-bottom: 4px; }

/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  body[data-tema="pinforge"] * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ===================================================================
   4. KÖPRÜ KATMANI
   Taşınan sayfaların kullandığı ama PINFORGE tasarım katmanında
   karşılığı yeniden yazılmamış bileşenler. PINHUB'ın 1–14. bölümlerinden
   alındı; renkleri alias'lar üzerinden PinForge paletine bağlı.
   =================================================================== */
.pf-btn-cerceve { background: transparent; color: var(--pf-primary); border: 1px solid var(--pf-primary);
}
.pf-btn-cerceve:hover { background: var(--pf-primary-dolu); color: #fff;
}
.pf-bolum-metin { min-width: 0;
}
.pf-urun-izgara {
  display: grid; gap: var(--pf-3);
  grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr));
}
.pf-izgara-oge { min-width: 0;
}
.pf-gizli { display: none;
}
.pf-urun-meta { font-size: 11px; color: var(--pf-metin-3);
}
.pf-urun-kazanc {
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: var(--pf-r-pill);
  background: color-mix(in srgb, var(--pf-success) 18%, transparent);
  color: var(--pf-success);
  white-space: nowrap;
}
[data-bs-theme="light"] .pf-urun-kazanc {
  background: color-mix(in srgb, var(--pf-success) 15%, #fff);
  color: #12693C;
}
.pf-satici { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--pf-metin-3);
}
.pf-satici-nokta {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--pf-metin-3);
}
.pf-satici-nokta.acik { background: var(--pf-success); box-shadow: 0 0 0 2px rgba(95, 209, 106, .2);
}
.pf-satici-ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-satici b { flex: 0 0 auto; color: var(--pf-warning); font-weight: 700;
}
.pf-satici b i { font-size: 9px; margin-right: 2px;
}
.pf-daha {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 38px; margin-top: var(--pf-3);
  border: 1px solid var(--pf-cizgi); border-radius: var(--pf-r-btn); cursor: pointer;
  background: var(--pf-yuzey-1); color: var(--pf-metin-2); font: 600 12px/1 var(--pf-font);
}
.pf-daha:hover { border-color: var(--pf-primary); color: var(--pf-primary);
}
.pf-guven-serit {
  display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap;
  gap: var(--pf-3); margin-top: var(--pf-3); padding: var(--pf-3) var(--pf-4);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  font: 600 12px/1 var(--pf-font); color: var(--pf-metin-2);
}
.pf-guven-serit span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.pf-guven-serit i { font-size: 15px; color: var(--pf-primary);
}
/* Şeridin KENDİSİ: bu kural yoktu — çipler tek tek stilliydi ama
   kapsayıcı display:block kaldığı için 92px'lik çipler alt alta
   yığılıyordu (tum-oyunlar'da 627px'lik dikey sütun). */
.pf-oyun-serit {
  display: flex; gap: var(--pf-2); overflow-x: auto;
  /* Çip hover'da yukarı kalkıyor; üst pay yoksa kırpılır */
  padding-top: 4px; padding-bottom: var(--pf-2);
  scroll-snap-type: x mandatory;
  contain: paint;   /* yatay şerit belge genişliğini esnetmesin */
}
.pf-oyun-cip {
  scroll-snap-align: start; flex: 0 0 auto; width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: var(--pf-3) var(--pf-2); text-decoration: none; color: var(--pf-metin);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card);
  transition: border-color var(--pf-hiz) ease-out, transform var(--pf-hiz) ease-out;
}
.pf-oyun-cip:hover { border-color: var(--pf-primary); transform: translateY(-2px); color: var(--pf-metin);
}
.pf-oyun-cip-gorsel {
  position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 19px;
  color: var(--pf-primary); background: rgba(var(--pf-primary-rgb), .1);
}
.pf-oyun-cip-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pf-sayac {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--pf-r-btn);
  background: rgba(var(--pf-primary-rgb), .12); border: 1px solid rgba(var(--pf-primary-rgb), .3);
  font: 700 13px/1 var(--pf-mono); color: var(--pf-primary-2);
}
.pf-koruma {
  display: flex; align-items: center; gap: 10px; margin-bottom: var(--pf-3);
  padding: 10px var(--pf-4); border-radius: var(--pf-r-card);
  background: rgba(95, 209, 106, .08); border: 1px solid rgba(95, 209, 106, .28);
  font-size: 12px; color: var(--pf-metin-2);
}
.pf-koruma i { font-size: 17px; color: var(--pf-success); flex: 0 0 auto;
}
.pf-koruma b { color: var(--pf-metin);
}
.pf-mag-izgara {
  display: grid; gap: var(--pf-3);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.pf-mag {
  position: relative; display: block; padding-bottom: var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-card); overflow: hidden;
  text-decoration: none; color: var(--pf-metin);
  transition: border-color var(--pf-hiz-kart) ease-out, transform var(--pf-hiz-kart) ease-out;
}
.pf-mag:hover { border-color: var(--pf-primary); transform: translateY(-2px); color: var(--pf-metin);
}
.pf-mag-kapak {
  position: relative; display: block; aspect-ratio: 16 / 6; overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--pf-primary-rgb), .35), var(--pf-yuzey-3));
}
.pf-mag-kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pf-mag-logo {
  position: relative; display: grid; place-items: center;
  width: 48px; height: 48px; margin: -24px auto 7px; border-radius: 50%; overflow: hidden;
  background: var(--pf-yuzey-2); border: 2px solid var(--pf-yuzey-1);
  color: var(--pf-metin-3); font-size: 18px;
}
.pf-mag-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pf-mag-ad {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 var(--pf-3); font: 700 13px/1.3 var(--pf-font); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-mag-ad i { color: var(--pf-primary); font-size: 12px;
}
.pf-mag-sayilar {
  display: flex; align-items: center; justify-content: center; gap: var(--pf-3);
  margin-top: 7px; font-size: 10px; color: var(--pf-metin-3);
}
.pf-mag-sayilar b { display: block; font-size: 13px; font-weight: 750; color: var(--pf-metin);
}
.pf-mag-puan { color: var(--pf-warning); font-weight: 700; font-size: 12px;
}
.pf-blog-gorsel {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: center; font-size: 24px;
  color: var(--pf-metin-3); background: var(--pf-yuzey-2);
}
.pf-blog-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pf-dogrulandi {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--pf-success);
}
.pf-yildiz { flex: 0 0 auto; font-size: 10px; color: var(--pf-warning); letter-spacing: .04em;
}
.pf-urun-izgara { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}
.pf-urun-izgara { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
}
.pf-urun-izgara { grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr));
}
.pf-urun-izgara { grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr));
}
.pf-urun-izgara { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--pf-2);
}
.pf-guven-serit { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap;
}
.pf-urun-izgara { grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pf-mag-izgara, .pf-yayin-izgara { grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- PinForge'a özel köprü düzeltmeleri --- */

/* Taşınan sayfalar .pf-urun-izgara, ana sayfa blokları .pf-izgara kullanıyor;
   ikisi de aynı ızgara olsun ki kart genişlikleri sayfadan sayfaya oynamasın. */
.pf-urun-izgara {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--pf-3);
}
@media (max-width: 1200px) { .pf-urun-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .pf-urun-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pf-2); } }

/* Geri sayım kutuları (fırsat + çekiliş bloklarında) */
.pf-sayac { display: inline-flex; align-items: center; gap: var(--pf-1); }
.pf-sayac > span {
  min-width: 26px; text-align: center;
  background: rgba(0, 0, 0, .28); border-radius: var(--pf-r-btn);
  padding: 4px 6px; font-size: 12px; font-weight: 700; color: var(--pf-ates);
  font-variant-numeric: tabular-nums;
}
[data-bs-theme="light"] .pf-sayac > span { background: var(--pf-hap-bg); }

/* Doğrulanmış alım etiketi */
.pf-dogrulandi {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--pf-basari);
}

/* Alıcı koruma şeridi */
.pf-koruma {
  display: flex; align-items: center; gap: var(--pf-2);
  background: color-mix(in srgb, var(--pf-basari) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-basari) 34%, transparent);
  border-radius: var(--pf-r-hap);
  padding: var(--pf-2) var(--pf-4);
  font-size: 12px; color: var(--pf-metin-2);
  margin-bottom: var(--pf-3);
}
.pf-koruma i { color: var(--pf-basari); font-size: 16px; }

/* Blog kart görseli — taşınan blog.php bu adı kullanıyor */
.pf-blog-gorsel { display: block; aspect-ratio: 16 / 9; background: var(--pf-yuzey-3); overflow: hidden; }
.pf-blog-gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* İletişim kanalı kartı */
.pf-iletisim-kanal {
  display: flex; align-items: center; gap: var(--pf-3);
  background: var(--pf-yuzey-1); border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-panel); padding: var(--pf-3);
}
.pf-iletisim-kanal i { font-size: 20px; color: var(--pf-ates); }

/* Onay etiketi (ödeme adımları) */
.pf-onay-etiket {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--pf-basari) 16%, transparent);
  color: var(--pf-basari); border-radius: var(--pf-r-hap);
  padding: 3px 10px; font-size: 11px; font-weight: 700;
}

/* Yan sütunlar — makale, ödeme, yayıncı profili */
.pf-makale-yan, .pf-odeme-sol, .pf-yp-sol, .pf-yy-icerik { min-width: 0; }

/* Tehlike butonu — mağaza sayfasındaki yıkıcı eylemler (PINHUB'da atlanan
   bölümden gelen tek gerçek boşluk). */
.pf-btn-tehlike {
  background: var(--pf-tehlike);
  border-color: var(--pf-tehlike);
  color: #fff;
}
.pf-btn-tehlike:hover { background: #B71C1C; border-color: #B71C1C; color: #fff; }

/* ===================================================================
   5. ANA SAYFA KAPANIŞ BLOKLARI — sosyal takip + SEO metni
   =================================================================== */

/* Sosyal takip banner'ı: tam hap, solda kimlik, sağda eylem */
.pf-sosyal-banner-metin {
  display: flex; align-items: center; gap: var(--pf-3); min-width: 0;
}
.pf-sosyal-banner-metin > i.bi {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--pf-ates-dolu); color: #fff; font-size: 19px;
}
.pf-sosyal-banner-metin > span { display: flex; flex-direction: column; min-width: 0; }
.pf-sosyal-banner-metin b { color: var(--pf-metin); font-size: 14px; }
.pf-sosyal-banner-metin b + span { color: var(--pf-metin-3); font-size: 12px; }
.pf-sosyal-banner-eylem { display: flex; align-items: center; gap: var(--pf-2); flex: 0 0 auto; }
/* Banner lacivert değil kart zemininde durduğu için ikon butonu da uyum sağlar */
.pf-sosyal-banner .pf-ikon-btn {
  background: var(--pf-yuzey-2); border-color: var(--pf-cizgi); color: var(--pf-metin-2);
}
.pf-sosyal-banner .pf-ikon-btn:hover { border-color: var(--pf-ates); color: var(--pf-metin); }

@media (max-width: 640px) {
  .pf-sosyal-banner {
    border-radius: var(--pf-r-panel);
    padding: var(--pf-3);
    flex-direction: column; align-items: stretch;
  }
  .pf-sosyal-banner-eylem { justify-content: flex-end; }
}

/* SEO metni — sayfanın en altı, düşük kontrastlı okuma bloğu */
.pf-seo {
  background: var(--pf-yuzey-1);
  border: 1px solid var(--pf-cizgi);
  border-radius: 8px;
  padding: 16px;
  margin: 0;
}
.pf-seo h2 {
  margin: 0 0 var(--pf-2);
  font-size: 15px; font-weight: 700; color: var(--pf-metin-2);
}
.pf-seo h2::before { content: none; }
.pf-seo p {
  margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--pf-metin-3);
}
.pf-seo-baglar {
  display: flex; flex-wrap: wrap; gap: var(--pf-2);
  margin-top: var(--pf-4);
  padding-top: var(--pf-3);
  border-top: 1px solid var(--pf-cizgi);
}
.pf-seo-baglar a {
  background: var(--pf-yuzey-3);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-hap);
  padding: 5px 12px;
  font-size: 11.5px; font-weight: 600; color: var(--pf-metin-3);
}
.pf-seo-baglar a:hover { border-color: var(--pf-ates); color: var(--pf-metin); }

/* Alt/kardeş kategori çip şeridi — kategori sayfası.
   Ölçüm: kap #15161B · r12 · pad 16 · gap 16; çip r5, aktif turuncu. */
.pf-kat-cipler {
  display: flex; flex-wrap: wrap; gap: var(--pf-4);
  padding: var(--pf-4);
  margin-bottom: var(--pf-4);
  background: var(--pf-yuzey-3);
  border-radius: var(--pf-r-lg, 12px);
}
.pf-kat-cip {
  display: inline-flex; align-items: center; gap: var(--pf-2);
  min-height: 41px; padding: 0 var(--pf-4);
  border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-1);
  color: var(--pf-metin-2);
  font-size: 13px; font-weight: 500;
  transition: background var(--pf-hiz) ease-out, color var(--pf-hiz) ease-out;
}
.pf-kat-cip:hover { background: var(--pf-yuzey-2); color: var(--pf-metin); }
.pf-kat-cip img { width: 22px; height: 22px; object-fit: contain; }
.pf-kat-cip i { font-size: 15px; }
/* Aktif çip marka turuncusu — hangi kategoride olduğun tereddütsüz okunmalı */
.pf-kat-cip.aktif { background: var(--pf-ates); color: #fff; font-weight: 600; }
.pf-kat-cip.aktif:hover { background: var(--pf-ates-2); color: #fff; }

@media (max-width: 640px) {
  .pf-kat-cipler { gap: var(--pf-2); padding: var(--pf-3); }
  .pf-kat-cip { min-height: 36px; padding: 0 var(--pf-3); font-size: 12px; }
}

/* Ortalama ürün puanı — başlık altı */
.pf-detay-puan {
  display: flex; align-items: center; gap: var(--pf-2);
  margin-top: var(--pf-1); font-size: 12px;
}
.pf-detay-puan b { font-size: 15px; color: var(--pf-metin); }
.pf-detay-puan a { color: var(--pf-metin-3); text-decoration: underline; }
.pf-detay-puan a:hover { color: var(--pf-ates); }

/* Fiyat dökümü — "Kazancımı gör" açılır paneli */
.pf-fiyat-dokum {
  margin-top: var(--pf-2);
  border: 1px solid var(--pf-cizgi);
  border-radius: var(--pf-r-btn);
  background: var(--pf-yuzey-2);
  overflow: hidden;
}
.pf-fiyat-dokum > summary {
  display: flex; align-items: center; gap: var(--pf-2);
  padding: var(--pf-2) var(--pf-3);
  cursor: pointer; list-style: none;
  font-size: 12px; color: var(--pf-metin-2);
}
.pf-fiyat-dokum > summary::-webkit-details-marker { display: none; }
.pf-fiyat-dokum > summary b { margin-left: auto; color: var(--pf-basari); font-size: 13px; }
.pf-fiyat-dokum > summary i { color: var(--pf-metin-3); font-size: 11px; transition: transform var(--pf-hiz); }
.pf-fiyat-dokum[open] > summary i { transform: rotate(180deg); }
.pf-fiyat-dokum > summary:hover { background: var(--pf-yuzey-3); }

.pf-dokum-govde { padding: var(--pf-2) var(--pf-3) var(--pf-3); border-top: 1px solid var(--pf-cizgi); }
.pf-dokum-satir {
  display: flex; justify-content: space-between; gap: var(--pf-3);
  padding: 4px 0; font-size: 12px; color: var(--pf-metin-3);
}
.pf-dokum-satir span:last-child { color: var(--pf-metin-2); font-variant-numeric: tabular-nums; }
.pf-dokum-artı { color: var(--pf-basari) !important; font-weight: 600; }
.pf-dokum-toplam {
  margin-top: var(--pf-1); padding-top: var(--pf-2);
  border-top: 1px solid var(--pf-cizgi);
  font-weight: 600; color: var(--pf-metin);
}

/* ===================================================================
   KATEGORİ DEĞERLENDİRMELERİ
   Ölçüm: başlık 1024×56 · #212630 · r6 ; kart 1024×79 · r6 · pad 12
   =================================================================== */
.pf-kyorum-bolum { margin-top: var(--pf-6); }

.pf-kyorum-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pf-4); flex-wrap: wrap;
  min-height: 56px; padding: var(--pf-3) var(--pf-4);
  background: var(--pf-yuzey-2);
  border-radius: var(--pf-r-sm);
  margin-bottom: var(--pf-2);
}
/* Başlık metni sarmalayıcısı: flex içinde uzun başlık taşmasın */
.pf-kyorum-bas-sol { min-width: 0; }
.pf-kyorum-bas h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--pf-metin); }
.pf-kyorum-bas p  { margin: 0; font-size: 12px; color: var(--pf-metin-3); }
.pf-kyorum-puan { display: flex; align-items: center; gap: var(--pf-2); font-size: 12px; color: var(--pf-metin-3); }
.pf-kyorum-puan b { font-size: 18px; color: var(--pf-metin); }

.pf-kyorum-liste { display: flex; flex-direction: column; gap: var(--pf-2); }
.pf-kyorum {
  display: flex; align-items: flex-start; gap: var(--pf-3);
  padding: var(--pf-3);
  background: var(--pf-yuzey-2);
  border-radius: var(--pf-r-sm);
}
.pf-kyorum .pf-avatar { flex: 0 0 auto; }
.pf-kyorum-govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-kyorum-ust {
  display: flex; align-items: center; gap: var(--pf-2); flex-wrap: wrap;
  font-size: 12px; color: var(--pf-metin-3);
}
.pf-kyorum-ust b { color: var(--pf-metin); font-size: 12.5px; }
.pf-kyorum-ust time { margin-left: auto; font-size: 11px; }
.pf-kyorum p { margin: 0; font-size: 12.5px; color: var(--pf-metin-2); line-height: 1.6; }
.pf-kyorum-urun {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--pf-metin-3);
}

@media (max-width: 640px) {
  .pf-kyorum-ust time { margin-left: 0; width: 100%; }
}

/* Paylaş butonu — ürün görselinin sağ üstünde */
.pf-paylas-btn {
  position: absolute; z-index: 3; top: var(--pf-3); right: var(--pf-3);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: 15px; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--pf-hiz) ease-out, transform var(--pf-hiz) ease-out;
}
.pf-paylas-btn:hover { background: var(--pf-ates-dolu); transform: translateY(-1px); }
/* Kopyalandı geri bildirimi — tıklayıp "bir şey olmadı" hissi kalmasın */
.pf-paylas-btn.kopyalandi { background: var(--pf-basari); color: #06251f; }
.pf-paylas-btn.kopyalandi i::before { content: "\f26e"; }   /* bi-check-lg */

/* Mega tetik odak halkası: tarayıcı varsayılanı (kalın beyaz halka)
   tıklamadan sonra asılı kalıp segmenti "seçili kutu" gibi gösteriyordu.
   Fare odağında halka yok; klavye odağı ince tema halkası alır. */
.pf-navsekme:focus { outline: 0; }
.pf-navsekme:focus-visible {
  outline: 2px solid var(--pf-ates);
  outline-offset: -2px;
}

/* Katbar stacking garantisi: mega panel (z60) kendisinden SONRA gelen ve
   kendi stacking context'ini kuran bloklarin (or. contain:paint'li story
   seridi) altinda kalamasin. */
.pf-katbar { position: relative; z-index: 65; }