/* ============================================================================
   ILAN HIZLI BAKIS PENCERESI

   Liste sayfasinda karta ya da "i" rozetine tiklayinca acilan sekmeli pencere
   (Hakan, 08.08). Amac: musteri ilana bakmak icin yeni sekme acmasin, sayfadan
   kopmasin; bilgi yayvan degil DIKINE dursun.

   Bootstrap modal KULLANILMADI, bilincli: sayfadaki mevcut modallarla
   (addCommentModal, itemInfoModal, satici soru modallari) ayni yigini
   paylasinca kapatma/odak davranisi birbirine giriyor. Kendi kabugu daha
   ongorulebilir ve Bootstrap surumune bagli degil.

   ---------------------------------------------------------------------------
   SABIT KABUK (Hakan, 08.08: "bu popup'i surekli kucultmemen lazim, boyut
   ayni kalmali" / "cok bos alan kaldi gene")

   Pencere 1040x700 SABIT. Onceki surumde yukseklik icerige gore degisiyordu:
   ilandan ilana zipliyor, e-pinde bos alan kaliyordu. Sabit kabukta kural
   sudur: kart her zaman 340x400, kalan alani sag sutundaki bilgi izgarasi
   doldurur. Bilgi azsa onizleme bloklari devreye girer, cok ise sekmeye
   taşinir. Boylece pencere hicbir yuzeyde ve hicbir sekmede oynamaz.
   Olculdu: onizleme bloklari oncesi ilanda 290px bos alan vardi, sonra 11-38px.

   ---------------------------------------------------------------------------
   TOKEN ESLEMESI

   Asagidaki --pmq* degiskenleri duzen kurallarinin TEK renk kaynagi. Acik tema
   icin yapilan tek sey ayni token'lari body.light altinda yeniden tanimlamak;
   hicbir duzen kurali tekrarlanmiyor.

   Vurgu renkleri bilincli olarak --darkGreen / --darkBlue'dan ALINMIYOR: site
   bu ikisini acik temada birbiriyle yer degistiriyor (koyuda yesil/lacivert,
   acikta lacivert/yesil), fiyat acik temada lacivert cikardi.
   ========================================================================== */

.pmQuickView {
    /* Panel zemini bilincli olarak sitenin kart zemininden (#20212b) bir tik
       ACIK: pencere tam ekrani kaplayan koyu bir ortunun uzerinde duruyor ve
       daha koyu bir govde "kuyu" gibi gorunuyordu (Hakan: "bu arka plani
       daha da acalim, cok koyu duruyor"). Kart cercevesi (--pmqKartZemin)
       koyu kaldi ki urun gorseli one ciksin. */
    --pmqZemin: #1b1c25;
    --pmqYuzey: #262835;
    /* KOYU TEMADA AYRISMA ACIK TEMADAN FAZLA OLMALI.
       Olculdu: blok/panel kontrast orani koyuda 1.12, acikta 1.09 — yani
       SAYISAL olarak esittiler, ama koyu tema gozle yassi okunuyordu. Sebep
       algisal: dusuk parlaklikta goz kucuk parlaklik farklarini cok daha kotu
       ayirt ediyor, ayni oran koyu zeminde daha az "ayri kutu" hissi veriyor.
       O yuzden blok yuzeyi ve kenari koyu temada bilincli olarak acildi. */
    --pmqYuzey2: #333648;
    --pmqYuzey3: #40445c;
    --pmqKenar: #454962;
    --pmqKenar2: #545974;
    --pmqMetin: #e8e9f0;
    --pmqSonuk: #8b90ad;
    --pmqVurgu: #ffffff;
    --pmqGovdeMetin: #c9cbd8;
    --pmqIndigo: #4a4fd1;
    --pmqNane: #35c77b;
    --pmqNaneParlak: #57e19a;
    --pmqAltin: #e9b949;
    --pmqRozetMetin: #7bedaf;
    --pmqGuvenceMetin: #b6e8cd;
    --pmqKartZemin: #0d0e15;
    --pmqGrafik: #2fa968;
    --pmqGrafikRef: #6e73e8;
    --pmqGrafikAlan: rgba(47, 169, 104, .28);
    --pmqOrtu: rgba(0, 0, 0, .6);
}

/* Grafik renkleri iki zeminde de dataviz dogrulayicisindan gecirildi:
   koyu #2FA968 / #6E73E8, acik #1F8F52 / #4A4FD1 — alti kontrol de PASS. */
body.light .pmQuickView {
    --pmqZemin: #eef0f5;
    --pmqYuzey: #ffffff;
    --pmqYuzey2: #f4f5f9;
    --pmqYuzey3: #e8eaf1;
    --pmqKenar: #dfe1ea;
    --pmqKenar2: #c6c9d8;
    --pmqMetin: #1b1d28;
    --pmqSonuk: #666c86;
    --pmqVurgu: #262a63;
    --pmqGovdeMetin: #3d4152;
    --pmqIndigo: #3d42bd;
    --pmqNane: #1f8f52;
    --pmqNaneParlak: #1f8f52;
    --pmqAltin: #9a7314;
    --pmqRozetMetin: #0f5c34;
    --pmqGuvenceMetin: #15633a;
    --pmqKartZemin: #f7f8fb;
    --pmqGrafik: #1f8f52;
    --pmqGrafikRef: #4a4fd1;
    --pmqGrafikAlan: rgba(31, 143, 82, .16);
    --pmqOrtu: rgba(255, 255, 255, .82);
}

/* ============================ kabuk ============================ */

.pmQuickViewOverlay {
    position: fixed;
    inset: 0;
    z-index: 1060; /* Bootstrap modal (1055) uzerinde */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Pencerenin olcusu sabit ve ekrana siginca kaydirma ICERIDE kaliyor.
       Burada da acik olsaydi iki ayri kaydirma cubugu olurdu. */
    overflow: hidden;
    background: rgba(0, 0, 0, .72);
    -webkit-overflow-scrolling: touch;
}

.pmQuickViewOverlay.acik {display: flex;}

/* ----------------------------------------------------------------------------
   SEPET CEKMECESI PENCERENIN USTUNDE

   Sepete ekleyince sagdan acilan #basketCanvas bir Bootstrap offcanvas'i;
   varsayilan yigini 1045, pencere ise 1060. Cekmece pencerenin ALTINDA kaliyor
   ve musteri "Sepete Git" adimina gecemiyordu.

   Kural body.pmQuickViewAcik'a bagli: sinifi yalnizca pencere acilirken
   pm-quick-view.js koyuyor, kapaninca kaldiriyor. Boylece sitenin geri
   kalaninda (sepet sayfasi, odeme, mobil menu) offcanvas yigini hic
   degismiyor; degistirseydik baska yerlerde ustte kalmasi gereken katmanlarin
   onune gecebilirdi.

   Ortu de pencerenin ustunde: sepet acikken etkin katman odur, pencerenin
   sonuklesmesi dogru davranis.
   -------------------------------------------------------------------------- */
body.pmQuickViewAcik .offcanvas {z-index: 1075;}
body.pmQuickViewAcik .offcanvas-backdrop {z-index: 1070;}

/* GIRIS MODALI DA USTTE.
   Misafir Goldbar'da "Sepete Ekle" deyince #authModal aciliyor; Bootstrap
   modal yigini 1055, pencere 1060. Modal pencerenin ALTINDA kaliyor ve
   elementFromPoint modalin ortasinda pencereyi donduruyordu, yani modal
   gercekten tiklanamiyordu; musteri once pencereyi kapatmak zorundaydi.

   Sepet cekmecesinin de USTUNDE: cekmece acikken giris modali tetiklenirse
   (sepette "devam et" akisi) yine en ustte kalmali. */
body.pmQuickViewAcik .modal {z-index: 1085;}
body.pmQuickViewAcik .modal-backdrop {z-index: 1080;}

/* ONAY KUTUSU (SweetAlert) HEPSINDEN USTTE.

   GB "Hemen Sat" penceresinde dugmeye basinca cikan "Onayliyor musunuz?"
   kutusu bir SweetAlert; varsayilan yigini 1060. Pencere acikken Bootstrap
   modallari 1085'e cikarildigi icin onay kutusu zorunlu-alan modalinin
   ALTINDA kaliyordu; musteri onayi goremiyor, ancak modali kapatinca
   fark ediyordu (Deha, 11.08). Onay kutusu her zaman etkin son katmandir,
   yigindaki her seyin (pencere 1060 < cekmece 1075 < modal 1085) ustunde
   olmali. */
body.pmQuickViewAcik .swal2-container {z-index: 1090;}

.pmQuickViewDialog {
    width: min(1040px, calc(100vw - 40px));
    height: min(700px, calc(100vh - 40px));
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

/* min-height:0 zinciri sart: flex cocuklari varsayilan olarak icerik boyundan
   kuculmez, bu olmadan govde tasar ve alt serit ekran disinda kalir. */
.pmQuickView {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--pmqYuzey);
    border: 1px solid var(--pmqKenar2);
    border-radius: 18px;
    overflow: hidden;
    color: var(--pmqMetin);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
}

/* Yukleniyor durumu ayni olcude: kabuk acilirken zıplamasin. */
.pmQuickViewLoading {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--cardBackground);
    border: 1px solid var(--borderColor);
    border-radius: 18px;
    color: var(--textColor);
    font-size: 14px;
}

.pmQuickViewLoading i {font-size: 20px;}

/* ============================ ust serit ============================ */

.pmqUst {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--pmqKenar);
    background: var(--pmqYuzey2);
    flex: 0 0 auto;
}

.pmqBaslik {min-width: 0; flex: 1 1 auto;}

.pmqBaslik h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--pmqMetin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmqMeta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 11.5px;
    color: var(--pmqSonuk);
}

.pmqMeta strong {color: var(--pmqMetin); font-variant-numeric: tabular-nums;}

/* Tam sayfa cikisi once sonuk gri bir baglantiydi, fark edilmiyordu. Adresi
   paylasmak, yeni sekmede acmak ve arama motoru icin onemli bir cikis. */
.pmqTamSayfa {
    /* inline-flex + line-height 1: metin dugmede ortali. Olcu YAZI KADAR
       (Hakan, 10.08 "tam sayfada ac butonu yazi kadar olmali"): dolgu ve
       punto kucultuldu, dugme metnin cercevesi kadar yer kaplar. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    font-size: 11px;
    color: var(--pmqSonuk);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--pmqKenar2);
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
    align-self: center;
}
.pmqTamSayfa:hover {border-color: var(--pmqIndigo); color: var(--pmqIndigo);}

/* PAYLASIM: kartin altindaki bos sol sutun alani (Hakan, 10.08 "Whatsapp da
   paylas, Link olarak paylas gibi butonlar eklenmeli"). Ayni pill dili,
   tiklama hedefi tam sayfa dugmesinden biraz genis. */
.pmqPaylas {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.pmqPaylasBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--pmqSonuk);
    background: transparent;
    border: 1px solid var(--pmqKenar2);
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.pmqPaylasBtn:hover {border-color: var(--pmqIndigo); color: var(--pmqIndigo);}

/* WhatsApp'in kendi yesili yalniz simgede: dugme dili tek kalir, marka
   yine taninir. */
.pmqPaylasBtn.wa i {color: #25d366; font-size: 14px;}

/* Kopyalama geri bildirimi (bkz. pm-quick-view.js): kisa sureligine
   "Kopyalandi" yazar, cerceve yesillenir. */
.pmqPaylasBtn.kopyalandi {border-color: #22a06b; color: #22a06b;}

/* SUNUCU AYRI KUTUDA: once gri meta satirinda kucuk puntoyla duruyordu ve
   secilemiyordu (Hakan, 08.08 "server cok belirsiz"). Ilan pazarinda sunucu
   satin alma karari icin belirleyici bir alan. */
.pmqKunye {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--pmqKenar2);
    border-radius: 9px;
    background: var(--pmqYuzey);
}

.pmqKunye .k {
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--pmqSonuk);
    text-transform: uppercase;
}

.pmqKunye .v {font-size: 14px; font-weight: 800; color: var(--pmqMetin);}

.pmQuickViewClose {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--pmqKenar2);
    background: var(--pmqYuzey);
    color: var(--pmqSonuk);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.pmQuickViewClose:hover {color: var(--pmqMetin); border-color: var(--pmqIndigo);}

/* ============================ sekme cubugu ============================
   Overflow YOK: dugmeler alani esit paylasir, hepsi tek bakista gorunur.
   Sira KANONIK ve dort yuzeyde de ayni (Hakan, 08.08: "soldan saga siralama
   hepsinde ayni olsun"); sirayi sablondaki $pmSekmeSirasi dizisi belirliyor. */

.pmqSekmeler {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--pmqKenar);
    background: var(--pmqYuzey2);
}

.pmqSekmeler button {
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    border-right: 1px solid var(--pmqKenar);
    background: transparent;
    color: var(--pmqSonuk);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 9px 8px;
    cursor: pointer;
    position: relative;
}

.pmqSekmeler button:last-child {border-right: 0;}
.pmqSekmeler button:hover,
.pmqSekmeler button[aria-selected="true"] {color: var(--pmqVurgu);}

.pmqSekmeler button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    border-bottom: 2px solid var(--pmqIndigo);
}

.pmqRozet {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    background: var(--pmqYuzey3);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--pmqMetin);
}

/* ============================ govde ============================ */

.pmqGovde {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pmqPanel {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.pmqPanel.aktif {display: flex;}

/* --- ana panel: kart + bilgi --- */

/* Zemin KABUKLA AYNI, daha koyu degil.
   Onceden --pmqZemin (kabuktan bir ton koyu) kullaniliyordu; icerik alani
   doldurmadiginda kalan bosluk cevresinden koyu bir slab gibi ayrisip
   "delik" izlenimi veriyordu (Hakan: "arkadaki siyahtan dolayi cok bos
   duruyor"). Ayni yuzeyde kalan bosluk nefes payi gibi okunuyor. Kart kendi
   koyu zeminini (--pmqKartZemin) korudugu icin nesne olarak yine ayrisiyor. */
.pmqMedya {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: var(--pmqYuzey);
}

.pmqGorselKutu {
    position: relative;
    flex: 0 0 auto;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Standart kart: HER yuzeyde 340x400. Hakan, 08.08: "mantikta 4 ilanin gorseli
   de ayni boyutlar olmasi lazim ... standart bir kart'a hepsinin oturmasi
   gerekiyor". Olculdu: 135 gercek urun gorselinin tamami 4:5 ve bu kutuda %94
   doluluk veriyor, hicbiri buyutulmuyor. */
.pmqCerceve {
    position: relative;
    width: 340px;
    height: 400px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--pmqKenar);
    background: var(--pmqKartZemin);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmqCerceve img {width: 100%; height: 100%; object-fit: contain; display: block;}

/* Item karti oyun ici kart estetigi: acik temada da kendi koyu zeminini korur,
   sitedeki davranisin aynisi. */
.pmqCerceve.pmqKartCerceve {border: 0; background: transparent; align-items: flex-start;}

.pmqItemKap {width: 100%; display: flex; align-items: flex-start; justify-content: center;}

/* Toplu ilan galerisi PENCEREDE kartin ALTINDA yatay durur. Bilesenin kendi
   konumu (dikey, kartin sag ortasi) item kartinin istatistiklerinin ustune
   biniyordu (Hakan, 10.08 "iconlar resmin icindeki bilgileri kapatiyor").
   Takas davranisi ayni; yalnizca konum pencereye ozel. */
.pmqGorselKutu {flex-direction: column; gap: 8px;}
.pmqGorselKutu .galleryItemList {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 340px;
    background: var(--pmqYuzey2);
    border: 1px solid var(--pmqKenar);
}
.pmqGorselKutu .galleryItemList img {cursor: pointer;}

/* Gercek item kartlari 153-493px arasi degisiyor (14 kart olculdu, 2'si 400'u
   asiyor). 400'u asani JS orantili kucultuyor; transform kullaniliyor ki kartin
   ic yerlesimi bozulmasin. */
.pmqItemOlcek {transform-origin: top center;}

.pmqBuyutec {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--pmqKenar2);
    background: var(--pmqOrtu);
    color: var(--pmqMetin);
    font-size: 13px;
    cursor: pointer;
    z-index: 2;
    /* <a> satir ici akisla dizildigi icin buyutec simgesi dairenin sol
       ustune kaciyordu (Hakan, 10.08 "gorsel buyutme iconu kaymis"). */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.pmqBilgi {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    /* Kart dikeyde ORTALI duruyor; bilgi sutunu da ortalanınca ikisi gorsel
       olarak eslesiyor ve artan yer altta tek bir bosluk yigini olarak degil,
       ustte/altta esit nefes payi olarak dagiliyor. Icerik tastiginda "safe"
       ust hizalamaya dusuyor, yoksa basligi kirpardi. Desteklemeyen tarayici
       ilk satiri okuyup ust hizali kaliyor. */
    align-content: start;
    align-content: safe center;
    /* visible: alarm paneli basligin altina ACILIYOR; hidden panelin kirpardi.
       Sutun ici tasma zaten olcumle denetleniyor (yatay tasma testi). */
    overflow: visible;
}

.pmqBilgi > .pmqTamSatir {grid-column: 1 / -1;}

/* --- baslik blogu ---
   Ust seritteki baslik tek satira sikisip kesiliyor; burada tam adiyla ve
   kategorisiyle duruyor. Mockup'ta da bilgi sutununun ilk blogu buydu. */

.pmqAdBlok {display: flex; align-items: flex-start; gap: 10px; min-width: 0;}
.pmqAdSol {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px;}

/* Zil + kalp: baslik satirinin sagi. Liste bilesenleri mutlak konumla gelir;
   burada akista, kendi kutulariyla dururlar. Alarm paneli sarmalin altina
   acilir. */
.pmqAdIkonlar {flex: 0 0 auto; display: flex; gap: 6px; position: relative; z-index: 5;}
.pmqAdIkonlar .productListFavButton {position: static;}
.pmqAdIkonlar .productNotifyWrapper {position: relative;}
.pmqAdIkonlar .productNotifyButton {position: static; width: 30px; height: 30px;}
/* Panel genisligi bilesende %80: konum atasi 30px'lik zil sarmali olunca
   panel 24px kaliyor ve icerik stilsiz sacilmis gibi gorunuyordu. Pencerede
   sabit genislik + duz zemin. */
.pmqAdIkonlar .productNotifyPanel {
    width: 280px;
    right: 0;
    left: auto;
    top: 38px;
    bottom: auto;
    background: var(--pmqYuzey2);
    border-color: var(--pmqKenar2);
    backdrop-filter: none;
}

.pmqAd {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--pmqMetin);
    /* Iki satirdan uzun ad sutunu tasirdi. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pmqAltAd {font-size: 12px; color: var(--pmqSonuk);}

/* --- sayac blogu (ilan / skin) ---
   Alt cubukta dugmelerin arasinda sikisiyordu; kendi blogunda hem okunur hem
   de sag sutunu dolduruyor. */

.pmqSayacBlok {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 11px;
    border: 1px solid var(--pmqKenar);
    border-radius: 10px;
    background: var(--pmqYuzey2);
    font-variant-numeric: tabular-nums;
}

.pmqSayacBlok .k {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmqSonuk);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pmqSayacBlok .k i {color: var(--pmqNane);}
.pmqSayacBlok .countdownArea, .pmqSayacBlok .counterArea {margin: 0;}

/* Sayacin kendi koyu hap zemini pencerede kaldirilir: "saatin arkasindaki
   siyah butun bilgileri bastiriyor" (Hakan, 10.08). Rakamlar kutunun kendi
   zemininde, metin renginde durur. */
.pmqSayacBlok .counterItem {background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0;}
/* Asil siyah hap .counterWrapper(.detail): #111117 dolgu + koyu cerceve. */
.pmqSayacBlok .counterWrapper,
.pmqSayacBlok .counterWrapper.detail {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
}
.pmqSayacBlok .counterItem .counterIcon {display: none;} /* ustteki saat simgesi zaten var */
.pmqSayacBlok .counterNumber {color: var(--pmqMetin); font-weight: 800;}
.pmqSayacBlok .counterNumberInfo {color: var(--pmqSonuk);}

/* --- Goldbar satici kutusu ---
   Mockup'ta bu blok tek satir degil, saticilari listeleyen bir kutu. Tek
   satira indirince sag sutunun ucte biri bosta kaliyordu. */

.pmqSaticiKutu {
    border: 1px solid var(--pmqKenar);
    border-radius: 11px;
    background: var(--pmqYuzey2);
    padding: 9px 11px;
}

.pmqSaticiSatir {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--pmqGovdeMetin);
    margin-bottom: 5px;
}

.pmqSaticiSatir:last-child {margin-bottom: 0;}
.pmqSaticiSatir .ad {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.pmqSaticiSatir .stok {flex: 0 0 auto; font-weight: 700; color: var(--pmqMetin); font-variant-numeric: tabular-nums;}

.pmqAvatarMini {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pmqYuzey3);
    object-fit: cover;
}

/* --- satici seridi ---
   Onceki surumde satici sag sutunda bir KART'ti ve pencerenin ucte birini
   yiyordu (Hakan: "satici kismini koyduk cok sacma yer kapliyor"). Ayni bilgi
   tek satirda: kimlik, puan, aktif ilan, basarili islem, profile git. */

.pmqSatici {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--pmqKenar);
    border-radius: 11px;
    background: var(--pmqYuzey2);
}

.pmqSatici .pmqAvatar {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pmqYuzey3);
    object-fit: cover;
}

.pmqSaticiSag {min-width: 0; flex: 1 1 auto;}

.pmqSaticiAd {
    font-size: 13px;
    font-weight: 700;
    color: var(--pmqMetin);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pmqSaticiAd a {color: inherit; text-decoration: none;}
.pmqSaticiAd a:hover {color: var(--pmqIndigo);}

/* Magaza adi kullanildiginda gercek kimlik satin alma oncesi de erisilebilir
   kalsin (mesafeli satis sozlesmesi geregi). */
.pmqSaticiGercek {font-size: 10.5px; color: var(--pmqSonuk);}

.pmqSaticiSatir2 {
    font-size: 11.5px;
    color: var(--pmqSonuk);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pmqSaticiSatir2 b {color: var(--pmqMetin); font-variant-numeric: tabular-nums;}

.pmqSaticiGit {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pmqMetin);
    border: 1px solid var(--pmqKenar2);
    border-radius: 8px;
    padding: 5px 10px;
    background: var(--pmqYuzey);
    text-decoration: none;
    white-space: nowrap;
}

.pmqSaticiGit:hover {border-color: var(--pmqIndigo); color: var(--pmqIndigo);}

.pmqYildiz {color: var(--pmqAltin); letter-spacing: -1px; font-size: 11px;}

.pmqTumSaticilar {
    display: inline-block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pmqSonuk);
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.pmqTumSaticilar:hover {color: var(--pmqMetin);}

/* Online/Offline durumu: SATICI PROFILI dugmesinin yanindaki belirgin kutu
   (Hakan, 10.08). Yesil dolgulu Online, sonuk Offline. */
.pmqDurumKutu {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.pmqDurumKutu.acik {background: rgba(53, 199, 123, .16); border: 1px solid rgba(53, 199, 123, .5); color: var(--pmqRozetMetin);}
.pmqDurumKutu.kapali {background: var(--pmqYuzey); border: 1px solid var(--pmqKenar2); color: var(--pmqSonuk);}

.pmqCanli {font-size: 10.5px; font-weight: 700;}
.pmqCanli.acik {color: var(--pmqNane);}
.pmqCanli.kapali {color: var(--pmqSonuk);}

/* --- cipler --- */

.pmqCipler {display: flex; flex-wrap: wrap; gap: 7px;}

.pmqCip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid var(--pmqKenar);
    border-radius: 9px;
    background: var(--pmqYuzey2);
    min-width: 88px;
    /* Satiri kenardan kenara doldur: cip sirasi ustteki kutuyla ayni
       genislige oturur (Hakan, 10.08 "bilgi kutulari ustteki kutu ile
       esitlenebilir"). */
    flex: 1 1 auto;
}

.pmqCip .k {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pmqSonuk);
}

.pmqCip .v {
    font-size: 13px;
    font-weight: 700;
    color: var(--pmqMetin);
    font-variant-numeric: tabular-nums;
}

/* --- float (CS-skin) --- */

.pmqFloat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    border: 1px solid var(--pmqKenar);
    border-radius: 11px;
    background: var(--pmqYuzey2);
}

.pmqFloatUst {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--pmqSonuk);
}

.pmqFloatDeger {
    font-size: 14px;
    font-weight: 800;
    color: var(--pmqMetin);
    font-variant-numeric: tabular-nums;
}

.pmqFloatCubuk {
    position: relative;
    height: 8px;
    border-radius: 5px;
    overflow: hidden;
    background: linear-gradient(90deg, #4ade80 0 7%, #a3e635 7% 15%, #facc15 15% 38%, #fb923c 38% 45%, #ef4444 45% 100%);
}

.pmqFloatImlec {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}

/* --- stickerlar / susler --- */

.pmqStickerler {display: flex; gap: 8px; flex-wrap: wrap;}

.pmqStk {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 5px;
    border: 1px solid var(--pmqKenar);
    border-radius: 10px;
    background: var(--pmqYuzey2);
    font-size: 11.5px;
    color: var(--pmqGovdeMetin);
}

.pmqStk img {width: 34px; height: 26px; object-fit: contain;}

/* ---- onizleme bloklari ----
   Sag sutun kartla ayni yuksekligi doldursun diye, sekmelerde zaten var olan
   bilginin kisa hali burada duruyor. "Onizleme + sekmede tamami" kalibi:
   musteri tiklamadan fikir sahibi oluyor, kart oynamiyor, bos alan kalmiyor. */

.pmqOnizleme {
    border: 1px solid var(--pmqKenar);
    border-radius: 11px;
    background: var(--pmqYuzey2);
    padding: 9px 11px;
}

.pmqOnizlemeBas {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.pmqOnizlemeBas .ad {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pmqSonuk);
}

.pmqOnizlemeBas button {
    font-size: 11px;
    font-weight: 700;
    color: var(--pmqSonuk);
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}

.pmqOnizlemeBas button:hover {color: var(--pmqMetin);}

.pmqMiniSoru {display: flex; gap: 8px; margin-bottom: 6px; font-size: 12px;}
.pmqMiniSoru:last-child {margin-bottom: 0;}

.pmqMiniSoru .kim {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pmqYuzey3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--pmqSonuk);
}

.pmqMiniSoru.sat .kim {background: rgba(74, 79, 209, .3); color: #c3c6ff;}

.pmqMiniSoru .mtn {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--pmqGovdeMetin);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Yedek onizlemenin metin ozeti: uc satirdan sonra kesiliyor, tamami kendi
   sekmesinde. Sabit yuksekligi olmayan bir metin bloguna izin verilirse kart
   yine oynamaya baslar. */
.pmqOzetMetin {
    font-size: 12px;
    line-height: 1.5;
    color: var(--pmqGovdeMetin);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Guvence maddesi: avatar dairesi degil, simge + metin. Onceki surumde
   .pmqMiniSoru yeniden kullanilmisti ve bos daireler bozuk avatar gibi
   gorunuyordu. */
.pmqMadde {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--pmqGovdeMetin);
    margin-bottom: 6px;
}

.pmqMadde:last-child {margin-bottom: 0;}
.pmqMadde i {color: var(--pmqNane); width: 15px; text-align: center;}

.pmqMiniPuan {display: flex; align-items: center; gap: 10px;}

.pmqMiniPuan .buyuk {
    font-size: 24px;
    font-weight: 900;
    color: var(--pmqMetin);
    font-variant-numeric: tabular-nums;
}

.pmqMiniPuan .sag {font-size: 11.5px; color: var(--pmqSonuk);}

.pmqKivilcim {display: block; width: 100%; height: 44px;}
.pmqKivilcim .c {fill: none; stroke: var(--pmqGrafik); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.pmqKivilcim .a {fill: var(--pmqGrafikAlan);}
.pmqKivilcim .son {fill: var(--pmqGrafik); stroke: var(--pmqYuzey2); stroke-width: 2;}

.pmqKivilcimAlt {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--pmqSonuk);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.pmqKivilcimAlt b {color: var(--pmqMetin);}

.pmqEnUcuzSatir {display: flex; align-items: center; gap: 9px; font-size: 12px;}

.pmqEnUcuzSatir .ad {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pmqGovdeMetin);
}

.pmqEnUcuzSatir .f {font-weight: 800; color: var(--pmqNaneParlak); font-variant-numeric: tabular-nums;}

.pmqGuvence {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid rgba(53, 199, 123, .4);
    border-radius: 10px;
    background: rgba(53, 199, 123, .09);
    font-size: 12.5px;
    color: var(--pmqGuvenceMetin);
}

.pmqGuvence i {color: var(--pmqNane); font-size: 15px;}
.pmqGuvence a {color: inherit; text-decoration: underline;}

/* --- urun degistirme seridi --- */

.pmqSeritKap {position: relative; flex: 0 0 auto;}

.pmqSeritKap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--pmqYuzey));
}

.pmqSerit {
    border-top: 1px solid var(--pmqKenar);
    padding: 8px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    background: var(--pmqYuzey);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pmqSerit::-webkit-scrollbar {display: none;}

/* Surukleyerek kaydirma icin: baglanti/gorselin yerli suruklemesi ve metin
   secimi, pointer dizisini kesip suruklemeyi olduruyordu. */
.pmqSerit {user-select: none;}
.pmqSerit a, .pmqSerit img {-webkit-user-drag: none;}

.pmqSeritOge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border: 1px solid var(--pmqKenar);
    border-radius: 9px;
    background: var(--pmqYuzey2);
    font-size: 11.5px;
    color: var(--pmqGovdeMetin);
    white-space: nowrap;
    text-decoration: none;
}

.pmqSeritOge:hover {border-color: var(--pmqIndigo); color: var(--pmqMetin);}
.pmqSeritOge.secili {border-color: var(--pmqIndigo); background: rgba(74, 79, 209, .16);}
.pmqSeritOge img {width: 22px; height: 22px; object-fit: contain;}
.pmqSeritFiyat {color: var(--pmqNaneParlak); font-weight: 700; font-variant-numeric: tabular-nums;}

/* ============================ sekme icerigi ============================ */

.pmqSekmeIcerik {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    font-size: 13.5px;
    color: var(--pmqGovdeMetin);
    scrollbar-width: thin;
    scrollbar-color: var(--pmqKenar2) transparent;
}

.pmqSekmeIcerik::-webkit-scrollbar {width: 6px;}
.pmqSekmeIcerik::-webkit-scrollbar-thumb {background: var(--pmqKenar2); border-radius: 3px;}

.pmqSekmeIcerik h4 {margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--pmqMetin);}
.pmqSekmeIcerik p {margin: 0 0 10px;}
.pmqSekmeIcerik ul, .pmqSekmeIcerik ol {margin: 0 0 12px; padding-left: 20px;}
.pmqSekmeIcerik li {margin-bottom: 7px;}
.pmqSekmeIcerik img {max-width: 100%; height: auto;}
.pmqSekmeIcerik a {color: var(--pmqMetin);}

/* Tedarikci/editor HTML'i genis tablo basabiliyor; sayfayi yatay kaydirmasin. */
.pmqSekmeIcerik table {
    width: 100%;
    max-width: 100% !important;
    border-collapse: collapse;
    margin: 10px 0;
}

.pmqSekmeIcerik table th,
.pmqSekmeIcerik table td {
    border: 1px solid var(--pmqKenar);
    padding: 6px 8px;
    vertical-align: top;
}

.pmqBosDurum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed var(--pmqKenar2);
    border-radius: 11px;
    color: var(--pmqSonuk);
    font-size: 13px;
}

/* ---- satis gecmisi grafigi ----
   Form: zaman icinde fiyat -> cizgi + alan. Tek seri oldugu icin lejant kutusu
   yok, isim baslikta; referans cizgisi dogrudan etiketli. */

.pmqGrafikKap {
    border: 1px solid var(--pmqKenar);
    border-radius: 12px;
    background: var(--pmqYuzey2);
    padding: 14px 14px 8px;
    margin-bottom: 14px;
}

.pmqGrafikUst {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;}

.pmqOzetKutu {
    flex: 1 1 110px;
    padding: 8px 11px;
    border: 1px solid var(--pmqKenar);
    border-radius: 10px;
    background: var(--pmqYuzey);
}

.pmqOzetKutu .k {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pmqSonuk);
}

.pmqOzetKutu .v {
    font-size: 16px;
    font-weight: 800;
    color: var(--pmqMetin);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

.pmqOzetKutu.vurgu .v {color: var(--pmqGrafik);}

.pmqGrafikSarmal {position: relative;}
.pmqGrafik {width: 100%; display: block;}
.pmqGrafik .izgara {stroke: var(--pmqKenar); stroke-width: 1;}
.pmqGrafik .eksenYazi {fill: var(--pmqSonuk); font-size: 10px; font-variant-numeric: tabular-nums;}
.pmqGrafik .cizgi {fill: none; stroke: var(--pmqGrafik); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.pmqGrafik .nokta {fill: var(--pmqGrafik); stroke: var(--pmqYuzey2); stroke-width: 2;}
.pmqGrafik .refCizgi {stroke: var(--pmqGrafikRef); stroke-width: 2; stroke-dasharray: 5 4;}

/* Referans etiketi noktalarla cakisiyordu; arkasina kendi zemin cipini koyup
   tarafi ilk uc noktaya gore seciyoruz (mockup'ta olculdu: 0 cakisma). */
.pmqGrafik .refEtiket rect {fill: var(--pmqYuzey2); stroke: var(--pmqGrafikRef); stroke-width: 1; opacity: .95;}
.pmqGrafik .refEtiket text {fill: var(--pmqGrafikRef); font-size: 10px; font-weight: 700;}
.pmqGrafik .vurguNokta {fill: none; stroke: var(--pmqGrafik); stroke-width: 2;}
.pmqGrafik .hedef {fill: transparent; cursor: crosshair;}
.pmqGrafik .imlecCizgi {stroke: var(--pmqKenar2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0;}

.pmqGrafikIpucu {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    background: var(--pmqZemin);
    border: 1px solid var(--pmqKenar2);
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 11.5px;
    color: var(--pmqMetin);
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

.pmqGrafikIpucu .t {color: var(--pmqSonuk); font-size: 10px;}
.pmqGrafikIpucu .f {font-weight: 800; font-variant-numeric: tabular-nums;}
.pmqGrafikNot {font-size: 11.5px; color: var(--pmqSonuk); margin: 8px 0 0;}

/* Satis gecmisi bos durumu: sadece tire dolu tablo "bozuk mu" hissi veriyordu.
   Sonuk bir egri + net bir cumle, durumu anlatiyor. */
.pmqBosGrafik {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px dashed var(--pmqKenar2);
    border-radius: 12px;
    margin-bottom: 14px;
}

.pmqBosCizim {flex: 0 0 200px; height: 60px; opacity: .35;}
.pmqBosCizim line {stroke: var(--pmqKenar2); stroke-width: 1.5;}
.pmqBosCizim polyline {fill: none; stroke: var(--pmqSonuk); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round;}
.pmqBosMetin {display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--pmqSonuk);}
.pmqBosMetin b {color: var(--pmqMetin); font-size: 13.5px;}

.pmqTablo {width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 12px;}
.pmqTablo th, .pmqTablo td {border: 1px solid var(--pmqKenar); padding: 7px 11px; text-align: left;}
.pmqTablo th {
    background: var(--pmqYuzey2);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pmqSonuk);
}
.pmqTablo td.s {text-align: right; font-variant-numeric: tabular-nums;}

/* --- diger saticilar ---
   Fiyat sutunu saga yaslanir ve tabular rakam kullanir: bu sekmenin isi fiyat
   karsilastirmak, rakamlar alt alta hizalanmazsa is gormez. */

.pmqDigerSatici {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--pmqKenar);
    border-radius: 11px;
    background: var(--pmqYuzey2);
    margin-bottom: 8px;
    text-decoration: none;
}

.pmqDigerSatici:hover {border-color: var(--pmqIndigo);}
.pmqDigerSatici.buIlan {border-color: var(--pmqIndigo);}
.pmqDigerSatici > div:first-child {flex: 1 1 auto; min-width: 0;}
.pmqDigerSatici .ad {font-size: 13px; font-weight: 700; color: var(--pmqMetin);}
.pmqDigerSatici .durum {font-size: 10.5px; color: var(--pmqSonuk);}
.pmqDigerSatici .fiyat {
    min-width: 96px;
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    color: var(--pmqNaneParlak);
    font-variant-numeric: tabular-nums;
}

.pmqEnUcuz {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(53, 199, 123, .16);
    border: 1px solid rgba(53, 199, 123, .45);
    font-size: 9.5px;
    font-weight: 800;
    color: var(--pmqRozetMetin);
    letter-spacing: .06em;
    white-space: nowrap;
}

.pmqBuIlanRozet {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(74, 79, 209, .18);
    border: 1px solid rgba(74, 79, 209, .5);
    font-size: 9.5px;
    font-weight: 800;
    color: var(--pmqMetin);
    letter-spacing: .06em;
    white-space: nowrap;
}

/* --- degerlendirme ozeti --- */

.pmqPuanOzet {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    border: 1px solid var(--pmqKenar);
    border-radius: 12px;
    background: var(--pmqYuzey2);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.pmqPuanSol {display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 120px;}

.pmqPuanBuyuk {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: var(--pmqMetin);
    font-variant-numeric: tabular-nums;
}

.pmqPuanAdet {font-size: 11.5px; color: var(--pmqSonuk);}

.pmqPuanDagilim {flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: 4px;}

.pmqPuanSatir {display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--pmqSonuk);}
.pmqPuanSatir .k {flex: 0 0 34px; text-align: right; font-variant-numeric: tabular-nums;}
.pmqPuanSatir .k i {color: var(--pmqAltin); font-size: 9px;}
.pmqPuanSatir .v {flex: 0 0 30px; font-variant-numeric: tabular-nums; color: var(--pmqMetin);}

.pmqPuanSatir .cubuk {
    flex: 1 1 auto;
    height: 7px;
    border-radius: 4px;
    background: var(--pmqYuzey);
    overflow: hidden;
}

.pmqPuanSatir .cubuk span {display: block; height: 100%; background: var(--pmqAltin); border-radius: 4px;}

.pmqYanit {
    margin-top: 6px;
    padding: 6px 9px;
    border-left: 2px solid var(--pmqIndigo);
    border-radius: 0 8px 8px 0;
    background: rgba(74, 79, 209, .1);
    font-size: 12px;
}

/* --- soru & cevap / degerlendirmeler --- */

.pmqSoru {display: flex; gap: 9px; margin-bottom: 10px;}

.pmqSoru .kim {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pmqYuzey3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--pmqSonuk);
}

.pmqSoru .balon {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--pmqKenar);
    border-radius: 10px;
    background: var(--pmqYuzey2);
    padding: 8px 11px;
}

.pmqSoru .balon .ust {display: flex; gap: 10px; font-size: 10.5px; color: var(--pmqSonuk); margin-bottom: 3px;}
.pmqSoru.satici .balon {background: rgba(74, 79, 209, .12); border-color: rgba(74, 79, 209, .4);}

.pmqSoruYaz {display: flex; gap: 8px; margin-top: 12px;}

.pmqSoruYaz input {
    flex: 1 1 auto;
    height: 36px;
    border: 1px solid var(--pmqKenar2);
    border-radius: 9px;
    background: var(--pmqYuzey);
    color: var(--pmqMetin);
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
}

.pmqSoruYaz button {
    border: 0;
    border-radius: 9px;
    background: var(--pmqIndigo);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 0 16px;
    cursor: pointer;
}

/* ============================ alt aksiyon cubugu ============================
   Hakan, 08.08: "solda fiyat, sagda giris yapilmamissa giris yap - giris
   yapildiysa sepete ekle ... bunlar normal yazidan bir buyuk fontta olmali,
   musteri orayi farkedebilmeli."

   Cubuk SUNUCUDA basiliyor, JS ile tasinmiyor: onceki tasima yontemi
   x-product-detail'in render edilmesine bagliydi ve her duzen degisikliginde
   kiriliyordu. Adet girisi ve butonlar ayni #productDetail sarmalinin icinde
   duruyor, cunku basketControl/requireBasket adedi
   $('#productDetail').find('.productNavigateInput') ile okuyor. */

.pmqAlt {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-top: 1px solid var(--pmqKenar);
    background: var(--pmqYuzey2);
}

.pmqFiyatlar {display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto;}

.pmqFiyat {
    font-size: 26px;
    font-weight: 900;
    color: var(--pmqNaneParlak);
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pmqEskiFiyat {
    font-size: 15px;
    font-weight: 800;
    color: #f0503e;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.pmqSatFiyat {
    font-size: 17px;
    font-weight: 800;
    color: var(--pmqAltin);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.pmqSatFiyat small {
    display: block;
    font-size: 8.5px;
    letter-spacing: .08em;
    color: var(--pmqSonuk);
}

.pmqAksiyonlar {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* Sitenin newButton'u pencerede de aynen kullaniliyor: tiklama davranisi,
   sepet akisi ve dogrulamalari zaten calisiyor. Sadece cubuga oturmasi icin
   olcusu sabitleniyor. */
.pmqAksiyonlar .newButton {
    width: auto;
    min-width: 0;
    font-size: 14px;
    padding: 10px 16px;
    margin: 0;
}

.pmqAksiyonlar .newButton.large {font-size: 14px;}
.pmqAksiyonlar > div {display: flex; align-items: center; gap: 8px;}

/* Adet secici cubuga sigsin. */
.pmqAdet {flex: 0 0 auto;}
.pmqAdet .productNavigate, .pmqAdet .basketNavigate {margin: 0;}

/* Yakinda: gorunur ama tiklanamaz. Hakan, 08.08: "buton olsun yakinda diye
   yazariz sonra gercekten acariz". */
.pmqYakinda {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--pmqKenar2);
    border-radius: 10px;
    background: var(--pmqYuzey3);
    color: var(--pmqMetin);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 15px;
    opacity: .65;
    cursor: not-allowed;
}

.pmqYakindaEtiket {
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(233, 185, 73, .18);
    border: 1px solid rgba(233, 185, 73, .5);
    font-size: 9px;
    font-weight: 800;
    color: var(--pmqAltin);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pmqUyari {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid var(--pmqKenar2);
    border-radius: 10px;
    background: var(--pmqYuzey);
    font-size: 12.5px;
    color: var(--pmqSonuk);
}

.pmqSayac {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--pmqKenar);
    border-radius: 10px;
    background: var(--pmqYuzey);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pmqSayac i {color: var(--pmqNane);}

/* Bilesen varliklari (stil/betik) icin gorunmez taşiyici. */
.pmQuickViewAssets {display: none;}

/* ============================================================================
   YUKLEME ISKELETI

   Bos koyu kutu + "Yukleniyor" mobilde tam ekrani kaplayip "sayfa mi degisti,
   kirildi mi" hissi veriyordu (Hakan, 10.08). Iskelet pencerenin kendi
   yerlesimini soluk bloklarla ilk kareden gosteriyor.
   ========================================================================== */

.pmqIskeletGovde {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--pmqYuzey);
}

.pmqIskeletKart {
    flex: 0 0 auto;
    width: 340px;
    max-width: 45%;
    height: 400px;
    max-height: 100%;
    border-radius: 12px;
    background: var(--pmqYuzey2);
}

.pmqIskeletSutun {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pmqIskeletCubuk {
    height: 16px;
    width: 70%;
    border-radius: 8px;
    background: var(--pmqYuzey2);
}

.pmqIskeletCubuk.b {height: 22px; width: 45%;}
.pmqIskeletCubuk.s {flex: 1 1 0; height: 14px; margin: 12px 10px;}
.pmqIskeletCubuk.o {height: 56px; width: 100%; border-radius: 11px;}
.pmqIskeletCubuk.f {height: 26px; width: 120px;}
.pmqIskeletCubuk.d {height: 38px; width: 200px; border-radius: 10px;}

@media (prefers-reduced-motion: no-preference) {
    .pmqIskelet .pmqIskeletCubuk,
    .pmqIskelet .pmqIskeletKart {
        animation: pmqIskeletNabiz 1.1s ease-in-out infinite alternate;
    }

    @keyframes pmqIskeletNabiz {
        from {opacity: .55;}
        to {opacity: 1;}
    }
}

@media (max-width: 860px) {
    .pmqIskeletGovde {flex-direction: column;}
    .pmqIskeletKart {width: 100%; max-width: 300px; height: 340px; margin: 0 auto;}
}

/* ============================================================================
   MOBIL

   Masaustundeki "her sey tek ekranda" kurali telefonda gecerli degil: 390px
   genislikte kart + bilgi yan yana durmuyor. Orada kural sudur:
     - kart ustte, bilgi altta, tek sutun
     - govde kayar (telefonda beklenen davranis)
     - alt aksiyon seridi HER ZAMAN gorunur, kaymaz
     - sekmeler yatay kayar, cubugu gizli
   ========================================================================== */

@media (max-width: 860px) {
    .pmQuickViewOverlay {padding: 0; align-items: stretch;}

    .pmQuickViewDialog {width: 100%; height: 100%;}

    .pmQuickView {border-radius: 0; border-left: 0; border-right: 0;}

    .pmqUst {padding: 10px 12px; gap: 10px;}
    .pmqBaslik h2 {font-size: 14px; white-space: normal;}
    .pmqMeta {font-size: 11px; gap: 8px;}
    .pmqKunye {padding: 3px 8px;}
    .pmqKunye .v {font-size: 12px;}

    /* Sekmeler telefonda alani esit paylasamaz: yatay kayar, cubuk gizli. */
    .pmqSekmeler {overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;}
    .pmqSekmeler::-webkit-scrollbar {display: none;}
    .pmqSekmeler button {flex: 0 0 auto; padding: 10px 14px;}

    /* Govde tek sutun ve kayar. */
    .pmqPanel.aktif {overflow-y: auto;}
    .pmqMedya {flex-direction: column; flex: 0 0 auto;}
    .pmqGorselKutu {width: 100%; padding: 12px;}
    .pmqCerceve {width: 100%; max-width: 300px; height: 340px; margin: 0 auto;}

    .pmqBilgi {grid-template-columns: 1fr; padding: 12px; overflow: visible;}
    .pmqBilgi > * {grid-column: 1 / -1;}

    .pmqCip {flex: 1 1 calc(50% - 4px); min-width: 0;}
    .pmqSatici {flex-wrap: wrap;}
    .pmqSaticiGit {margin-left: 42px;}

    /* Alt serit sabit: telefonda satin alma her zaman elin altinda. */
    .pmqAlt {flex-wrap: wrap; gap: 10px; padding: 10px 12px;}
    .pmqFiyatlar {width: 100%;}
    .pmqAlt .pmqFiyat {font-size: 24px;}
    .pmqAksiyonlar {width: 100%; justify-content: stretch;}
    .pmqAksiyonlar .newButton {flex: 1 1 auto; justify-content: center; text-align: center;}
    .pmqUyari {width: 100%;}

    .pmqSekmeIcerik {padding: 12px;}
    .pmqOzetKutu {flex: 1 1 calc(50% - 3px);}
    .pmqBosGrafik {flex-direction: column; align-items: flex-start;}
    .pmqBosCizim {flex: 0 0 auto; width: 100%;}
}

@media (prefers-reduced-motion: no-preference) {
    .pmqSekmeler button,
    .pmQuickViewClose,
    .pmqDigerSatici,
    .pmqSeritOge {transition: background-color .14s ease, color .14s ease, border-color .14s ease;}
}

/* ============================================================================
   LISTE KARTINDAKI "i" DUGMESI

   Kartin sag ustundeki zil/kalp satirinda, onlarla AYNI olcu ve bicimde durur
   (.productListFavButton.relative ile ayni 30px daire). Ilk surumde kapaga
   mutlak konumlu rozet olarak konmustu; KO/Rise kartlarinda item simgesi de
   sol ustte oldugu icin tam ustune biniyordu (Hakan, 08.08). Akis icinde
   durunca hicbir seyi ortmuyor ve komsu dugmelerle hizali kaliyor.
   ========================================================================== */

.pmQuickBadge {
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    background: rgba(32, 33, 43, 0.6);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    color: #ffffff;
    font-size: 14px;
    z-index: 2;
}

body.light .pmQuickBadge {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(3px);
    color: var(--textColor);
}

.pmQuickBadge:hover {background: #343891; color: #ffffff;}

/* Kapagin SAG UST kosesindeki hal (Hakan, 10.08). Zil/kalp satiri mobilde
   item kartinin ortasina denk gelip bilgilerin ustune biniyordu; sag ust
   kose tum kart turlerinde bos. z-index 4: galeri/sticker sutunu (3) ile
   cakisirsa dugme ustte kalir, tiklanabilirligi kaybolmaz. */
.pmQuickBadgeUst {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
}

/* Goldbar karti: "i" dugmesi kart govdesinde, kalp dugmesinin solunda durur
   (bkz. product-list bileseninde $qvGb notu). gbListFavWrapper negatif ust
   kaydirmayla kapagin uzerine biniyor; ikinci bir sarmali kalbin soluna almak
   icin sag bosluk veriyoruz. */
.gbListFavWrapper:has(.pmQuickBadgeGb) {right: 70px;}
.pmQuickBadgeGb {position: relative;}

/* ============================================================================
   TAKSIT TABLOSU

   Ayni kurallar ilan detay sayfasinin kendi <style> blogunda da duruyor.
   Buraya kopyalandi cunku pencere LISTE sayfasinda aciliyor ve o sayfa detay
   sayfasinin stillerini yuklemiyordu; tablo bicimsiz gorunuyordu. PayTR'nin
   dondurdugu isaretleme sabit sinif adlari kullaniyor (.taksit-*), secicileri
   biz belirlemiyoruz.
   ========================================================================== */

#paytr_taksit_tablosu {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.taksit-tablosu-wrapper {
    width: 100%;
    padding: 11px;
    cursor: default;
    position: relative;
    text-align: center;
    display: inline-block;
    border: 1px solid var(--pmqKenar);
    border-radius: 12px;
    background: var(--pmqYuzey2);
}

.taksit-tablosu-wrapper:before {
    content: "";
    width: 100%;
    height: 2px;
    background: var(--pmqKenar);
    position: absolute;
    top: 28px;
    left: 0;
}

.taksit-logo {
    display: inline-flex;
    padding: 5px 15px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    border: 2px solid var(--pmqKenar);
}

.taksit-logo img {max-height: 25px;}

.taksit-baslik {width: 100%; position: relative; display: flex; margin-bottom: 5px;}

.taksit-tutari-text {flex: 1; font-size: 12px; color: var(--pmqSonuk); font-weight: 800;}

.taksit-tutar-wrapper {
    display: flex;
    align-items: center;
    background: var(--pmqYuzey);
    border: 1px solid var(--pmqKenar);
}

.taksit-tutar-wrapper:hover {background-color: var(--pmqYuzey3);}

.taksit-tutari {
    flex: 1;
    padding: 6px 0;
    font-size: 12px;
    color: var(--pmqGovdeMetin);
    position: relative;
    font-variant-numeric: tabular-nums;
}

.taksit-tutar-wrapper .taksit-tutari:nth-child(2) {font-weight: 700; color: var(--pmqMetin);}

.taksit-tutar-wrapper .taksit-tutari:nth-child(2):before {
    content: "";
    width: 2px;
    height: 100%;
    background: var(--pmqKenar);
    position: absolute;
    top: 0;
    left: -1px;
}

.taksit-tutari-bold {font-weight: bold;}

/* Axess ve Combo tablolari PayTR yanitinda geliyor ama Oyuneks'te bu iki
   programla taksit yapilmiyor; gosterilirse musteriye yanlis bilgi olur. */
.taksit-tablosu-wrapper:has(img[src*="axess.png"]),
.taksit-tablosu-wrapper:has(img[src*="combo.png"]) {display: none !important;}

@media (max-width: 860px) {
    #paytr_taksit_tablosu {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 480px) {
    #paytr_taksit_tablosu {grid-template-columns: 1fr;}
}