/* ==========================================================================
   ZOO.COM.TR — "Yorum Yaz" Pop-up Yenileme
   ========================================================================== */

/* ---------- 0. Float + çerçeve temizliği ---------- */
/* Tema formun her bloğunu float:left ile diziyor; temizlenmezse bazı bölümler
   0 yükseklikte kalıp boşluk ritmini bozuyor ve sticky header/footer çalışmıyor. */
#yorumYaz .YorumContIcerik *{float:none !important}

/* Tema .divYorumYaz'a 1px solid #707070 çerçeve veriyor — modalın sağ/sol
   kenarında ince koyu bir çizgi olarak görünüyordu. */
#yorumYaz .divYorumYaz,
#yorumYaz .YorumContIcerik,
#yorumYaz .modal-content-html{border:0 !important;outline:0 !important}

#yorumYaz .divYorumYaz{float:none !important;width:100% !important;padding:0 !important}
#yorumYaz .YorumContIcerik{float:none !important;width:100% !important;padding:22px 28px 0 !important}
#yorumYaz .yorumContentBottom{float:none !important;width:100% !important}
#yorumYaz .yorumContentTop,
#yorumYaz .detayYorumFormTitle,
#yorumYaz .detayYorumFormAd,
#yorumYaz .detayYorumYas,
#yorumYaz .divYorumFotografEkleme{float:none !important;width:100% !important}

/* ---------- 1. Overlay ---------- */
#yorumYaz{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:24px 16px !important;
  background:rgba(6,16,38,.55) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  animation:zooFadeIn .22s ease both;
}
@keyframes zooFadeIn{from{opacity:0}to{opacity:1}}
@keyframes zooPopIn{
  from{opacity:0;transform:translateY(20px) scale(.975)}
  to{opacity:1;transform:none}
}
/* mobil alt sayfa girişi (15. bölümdeki @media içinde kullanılıyor) */
@keyframes zooSheetIn{
  from{transform:translateY(100%)}
  to{transform:none}
}
@keyframes zooStarPop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- 2. Modal kutusu + iç kaydırma ---------- */
#yorumYaz .modal-content{
  width:100%;
  max-width:640px !important;
  margin:auto !important;
  border-radius:20px !important;
  overflow:hidden !important;
  max-height:92vh;
  box-shadow:0 32px 80px -24px rgba(0,20,60,.55);
  animation:zooPopIn .3s cubic-bezier(.2,.85,.25,1) both;
}
#yorumYaz .modal-content-html{
  max-height:92vh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  /* sabit başlık/alt bar yüksekliği kadar pay: odak veya scrollIntoView
     ile gelen alan barların arkasında kalmasın */
  scroll-padding-top:80px;
  scroll-padding-bottom:100px;
}
/* İnce, açık renkli kaydırma çubuğu — kalın varsayılan çubuk modal kenarında
   koyu bir dikey çizgi gibi duruyordu. */
#yorumYaz .modal-content-html{scrollbar-width:thin;scrollbar-color:#dbe2ec transparent}
#yorumYaz .modal-content-html::-webkit-scrollbar{width:14px;background:transparent}
#yorumYaz .modal-content-html::-webkit-scrollbar-track{background:transparent;border:0}
#yorumYaz .modal-content-html::-webkit-scrollbar-thumb{
  background:#dbe2ec !important;border-radius:99px !important;
  border:4px solid #fff !important;background-clip:padding-box !important;
}
#yorumYaz .modal-content-html::-webkit-scrollbar-thumb:hover{background:#c3cddd !important}

/* ---------- 3. Sabit başlık ---------- */
#yorumYaz .divYorumHeader{
  position:sticky;top:0;z-index:6;
  float:none !important;width:auto !important;
  margin:0 !important;
  padding:20px 60px 18px 28px !important;
  font-size:19px !important;
  font-weight:700 !important;
  letter-spacing:-.2px;
  color:#0d1b33 !important;
  background:#fff;
  border-bottom:1px solid #eef1f6 !important;
}

/* ---------- 4. Kapat butonu ---------- */
#yorumYaz .modal-close{
  position:absolute !important;
  top:15px !important;right:16px !important;
  width:34px !important;height:34px !important;
  border-radius:50% !important;
  background-color:#f1f4f9 !important;
  z-index:12 !important;
  display:flex !important;align-items:center;justify-content:center;
  /* konumu sabit: hover'da sadece zemin rengi değişir, buton oynamaz */
  transition:background-color .18s ease;
  transform:none !important;
}
#yorumYaz .modal-close:hover{background-color:#e3e9f3 !important}

/* ---------- 5. Ürün kartı ---------- */
#yorumYaz .yorumContentTop{
  display:flex !important;
  gap:16px;
  align-items:flex-start;
  background:linear-gradient(180deg,#f8fafd,#f3f6fb);
  border:1px solid #e9edf5;
  border-radius:16px;
  padding:16px !important;
}
/* tema bu sütuna `flex-basis:35%` veriyor, kolon görselden geniş kalıyordu */
#yorumYaz .yorumContentLeft{flex:0 0 160px !important;width:160px !important}
#yorumYaz .yorumUrunImg,
#yorumYaz .divYorumProductImage{width:160px !important;height:160px !important}
#yorumYaz .divYorumProductImage img,
#yorumYaz .yorumUrunImg img{
  width:160px !important;height:160px !important;object-fit:contain;
  background:#fff;border:1px solid #e9edf5;border-radius:12px;padding:8px;
}
#yorumYaz .yorumContentRight{flex:1;min-width:0}
#yorumYaz .divYorumProductName{
  font-size:15px !important;font-weight:600 !important;line-height:1.4 !important;
  color:#0d1b33 !important;margin-bottom:16px !important;
}

/* ---------- 6. Etiketler ---------- */
/* Tema "#yorumYaz .yorumBaslik .yorumLabel{font-size:17px!important}" yazdığı için
   aynı ağırlıkta değil, bir kademe yüksek seçici kullanılıyor. */
#yorumYaz .YorumContIcerik .yorumBaslik .yorumLabel,
#yorumYaz .divYorumYaz .yorumBaslik .yorumLabel,
#yorumYaz .yorumBaslik .yorumDescriptionLabel,
#yorumYaz .yorumDescriptionLabel{
  font-size:13px !important;
  font-weight:600 !important;
  color:#66738c !important;
  letter-spacing:.2px;
  margin-bottom:7px !important;
  display:block;
}

/* ---------- 7. Yıldızlar ---------- */
#yorumYaz .detayYorumFormRating{
  display:flex !important;flex-wrap:wrap;align-items:center;row-gap:4px;
  margin:0 0 12px !important;
}
#yorumYaz .detayYorumFormRating .yorumBaslik{flex:0 0 100% !important;margin:0 !important}
#yorumYaz .commentStars{
  display:flex !important;gap:4px !important;flex:0 0 auto;
  float:none !important;width:auto !important;
  margin:0 !important;padding:0 !important;list-style:none;
}
#yorumYaz .commentStars li{
  cursor:pointer;padding:3px;line-height:0;
  transition:transform .16s cubic-bezier(.2,.8,.25,1);
}
#yorumYaz .commentStars li:hover{transform:scale(1.15)}
#yorumYaz .commentStars li:active{transform:scale(.94)}
#yorumYaz .commentStars li svg{width:30px !important;height:30px !important;display:block}
#yorumYaz .commentStars li .empty path{fill:#d7dde9 !important}
#yorumYaz .commentStars li .full path{fill:#FFB020 !important}
#yorumYaz .commentStars li.zooPop{animation:zooStarPop .32s ease}

/* Hover önizlemesi — JS, ul'a data-hover="1..5" yazar */
#yorumYaz .commentStars[data-hover] li .full{display:none !important}
#yorumYaz .commentStars[data-hover] li .empty{display:inline !important}
#yorumYaz .commentStars[data-hover="1"] li:nth-child(-n+1) .full,
#yorumYaz .commentStars[data-hover="2"] li:nth-child(-n+2) .full,
#yorumYaz .commentStars[data-hover="3"] li:nth-child(-n+3) .full,
#yorumYaz .commentStars[data-hover="4"] li:nth-child(-n+4) .full,
#yorumYaz .commentStars[data-hover="5"] li:nth-child(-n+5) .full{display:block !important}

/* Puan metni (JS ekler) */
#yorumYaz .zooRateText{
  margin-left:10px;
  font-size:13px;font-weight:600;color:#FFB020;
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s ease, transform .2s ease;
}
#yorumYaz .zooRateText.on{opacity:1;transform:none}

/* ---------- 8. Boşluk ritmi ---------- */
/* Ölçüler: bölümler arası 16px · ürün kartından sonra 20px
   etiket→alan 7px · form alanları arası 12px
   NOT: temanın kendi kuralları bu <style>'dan SONRA yüklendiği için
   .divYorumYaz eklenerek özgüllük bir kademe yükseltiliyor; kaldırılırsa
   tema marjları geri gelir. */
#yorumYaz .yorumContentBottom > *,
#yorumYaz .detayYorumFormTitle,
#yorumYaz .detayYorumFormAd,
#yorumYaz .detayYorumYas,
#yorumYaz .divYorumFotografEkleme{margin:0 0 16px !important}
#yorumYaz .divYorumYaz .YorumContIcerik .yorumContentTop{margin:0 0 20px !important}

/* bölüm içi: tema her alt bloğa ve input'a ayrıca margin veriyor, sıfırlanıyor */
#yorumYaz .detayYorumFormTitle > *,
#yorumYaz .detayYorumFormAd > *,
#yorumYaz .detayYorumYas > *,
#yorumYaz .divYorumFotografEkleme > *,
#yorumYaz .customLabel{margin:0 !important}
#yorumYaz .divYorumYaz .yorumBaslik{margin:0 !important}
#yorumYaz .divYorumYaz input.textbox,
#yorumYaz .divYorumYaz textarea.textbox{margin:0 !important}
#yorumYaz .detayYorumYas .yorumBaslik,
#yorumYaz .divYorumFotografEkleme .yorumBaslik{margin:0 0 8px !important}
#yorumYaz .yorumMusetiAd{margin:0 0 12px !important}
#yorumYaz .yorumMusteriAdCheck{margin:0 0 8px !important}
#yorumYaz .yorumMusteriAdCheck:last-child{margin:0 !important}

/* ---------- 9. Form alanları ---------- */
#yorumYaz .divYorumYaz .detayYorumFormTitle{display:flex;flex-direction:column;gap:12px}
#yorumYaz .yorumDeger,#yorumYaz .yorumAciklamaT{width:100% !important;float:none !important}

#yorumYaz input.textbox[type="text"],
#yorumYaz textarea.textbox{
  width:100% !important;
  box-sizing:border-box;
  font-family:inherit !important;
  font-size:14px !important;
  color:#0d1b33 !important;
  background:#fff !important;
  border:1.5px solid #e2e7f0 !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  box-shadow:none !important;
  transition:border-color .16s ease, box-shadow .16s ease;
}
#yorumYaz textarea.textbox{min-height:120px;resize:vertical;line-height:1.5}
#yorumYaz input.textbox[type="text"]::placeholder,
#yorumYaz textarea.textbox::placeholder{color:#a3adc0}
#yorumYaz input.textbox[type="text"]:focus,
#yorumYaz textarea.textbox:focus{
  outline:none !important;
  border-color:#003790 !important;
  box-shadow:0 0 0 3px rgba(0,55,144,.12) !important;
}

/* Karakter sayacı (JS ekler) */
#yorumYaz .zooCounter{display:block;text-align:right;font-size:12px;color:#9aa5b8;margin-top:6px}
#yorumYaz .zooCounter.ok{color:#1a9e5f}

/* Müşteri adı — pasif görünümlü alan */
#yorumYaz #txtbxYorumIsim{
  background:#f4f7fb !important;
  color:#48566f !important;
  border:1.5px solid #e6ebf3 !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  font-weight:500;
}

/* ---------- 10. Checkbox (tema label::before / ::after kullanıyor) ---------- */
#yorumYaz .customLabel{display:flex !important;align-items:center;gap:9px}
#yorumYaz .customLabel label{
  font-size:13.5px !important;color:#48566f !important;line-height:1.45;
  cursor:pointer;margin:0 !important;
}
#yorumYaz .customLabel label a{color:#003790 !important;text-decoration:underline}

#yorumYaz .yorumMusteriAdCheck .customLabel{align-items:flex-start}
#yorumYaz .yorumMusteriAdCheck .customLabel label{position:relative;padding-left:30px !important;padding-top:1px}
#yorumYaz .yorumMusteriAdCheck .customLabel label::before{
  width:20px !important;height:20px !important;left:0 !important;top:0 !important;bottom:auto !important;
  border-radius:6px !important;border:1.8px solid #d3dae6 !important;background:#fff !important;
  transition:background .16s ease, border-color .16s ease;
}
/* "~" kullanılıyor, "+" değil: doğrulama hatası oluştuğunda Ticimax
   hata span'ini input ile label ARASINA ekliyor ve "+" eşleşmeyi kaybediyor
   (kutu işaretlense de dolmuyordu). */
#yorumYaz .yorumMusteriAdCheck input:checked ~ label::before{background:#003790 !important;border-color:#003790 !important}
#yorumYaz .yorumMusteriAdCheck .customLabel label::after{
  width:20px !important;height:20px !important;left:0 !important;top:0 !important;bottom:auto !important;
  border:0 !important;border-radius:6px !important;background-color:transparent !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2 6.8-7.2'/%3E%3C/svg%3E") !important;
  background-size:13px !important;background-position:center !important;background-repeat:no-repeat !important;
}

/* ---------- 11. "Tavsiye Eder Misiniz" + "Yaşınız" → pill ---------- */
/* Tavsiye bloğu tek satır: etiket solda, Evet/Hayır hemen yanında.
   width:max-content şart — tema bu bloklara width:100% verdiği için
   flex item olarak ya 0 ya da tam genişlik alıp taşıyorlar. */
#yorumYaz .detayYorumFormOneri{
  display:flex !important;align-items:center;gap:14px;flex-wrap:wrap;row-gap:0;
  margin:0 !important;
}
#yorumYaz .detayYorumFormOneri > *{flex:0 0 auto !important;width:max-content !important;max-width:100%}
#yorumYaz .detayYorumFormOneri .yorumBaslik{margin:0 !important}
#yorumYaz .detayYorumFormOneri .yorumBaslik .yorumLabel{margin-bottom:0 !important;white-space:nowrap}

#yorumYaz .detayYorumFormOneri .yorumSecenekler,
#yorumYaz .yorumYasList{display:flex !important;flex-wrap:wrap;gap:8px;margin:0 !important}

#yorumYaz .detayYorumFormOneri .formCol2,
#yorumYaz .detayYorumYasSatir{
  width:auto !important;margin:0 !important;float:none !important;
  display:inline-flex !important;align-items:center;
  border:1.5px solid #e2e7f0;border-radius:999px;
  padding:8px 16px;background:#fff;cursor:pointer;
  transition:all .16s ease;
}
#yorumYaz .detayYorumFormOneri .formCol2:hover,
#yorumYaz .detayYorumYasSatir:hover{border-color:#b6c3da;background:#f8fafd}

/* pill içindeki daire/nokta gizlenir */
#yorumYaz .detayYorumFormOneri .formCol2 label::before,
#yorumYaz .detayYorumFormOneri .formCol2 label::after,
#yorumYaz .detayYorumYasSatir label::before,
#yorumYaz .detayYorumYasSatir label::after{display:none !important}
#yorumYaz .detayYorumFormOneri .formCol2 label,
#yorumYaz .detayYorumYasSatir label{
  padding:0 !important;margin:0 !important;
  font-size:13.5px !important;font-weight:500 !important;color:#48566f !important;
  cursor:pointer;white-space:nowrap;
}
/* seçili durum — :has() + JS'in eklediği .zooOn (eski tarayıcı yedeği) */
#yorumYaz .detayYorumFormOneri .formCol2:has(input:checked),
#yorumYaz .detayYorumYasSatir:has(input:checked),
#yorumYaz .detayYorumFormOneri .formCol2.zooOn,
#yorumYaz .detayYorumYasSatir.zooOn{
  border-color:#003790;
  background:rgba(0,55,144,.06);
  box-shadow:0 0 0 3px rgba(0,55,144,.08);
}
#yorumYaz .detayYorumFormOneri .formCol2:has(input:checked) label,
#yorumYaz .detayYorumYasSatir:has(input:checked) label,
#yorumYaz .detayYorumFormOneri .formCol2.zooOn label,
#yorumYaz .detayYorumYasSatir.zooOn label{color:#003790 !important;font-weight:600 !important}

/* ---------- 12. Görsel yükleme ---------- */
#yorumYaz .yorumFotograflarRow{display:flex !important;gap:10px;flex-wrap:wrap}
#yorumYaz .yorumFotograflarDiv{flex:1 1 0;min-width:110px;position:relative}
#yorumYaz .js--image-preview{
  width:100% !important;height:auto !important;aspect-ratio:1/1;
  border:1.5px dashed #d7dde9 !important;
  border-radius:14px !important;
  background:#f8fafd !important;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;transition:border-color .16s ease, background .16s ease;
}
#yorumYaz .yorumFotograflarDiv:hover .js--image-preview{border-color:#003790 !important;background:#f2f6fd !important}
#yorumYaz .js--image-preview img{max-width:100%;max-height:100%;object-fit:cover;border-radius:12px}
#yorumYaz .upload-options{display:flex;align-items:center;gap:6px;margin-top:8px}
#yorumYaz .upload-btn{flex:1}
#yorumYaz .upload-btn label{
  display:block;text-align:center;cursor:pointer;
  font-size:12.5px !important;font-weight:600 !important;color:#003790 !important;
  background:#eef3fc !important;border:0 !important;border-radius:9px !important;
  padding:8px 6px !important;margin:0 !important;transition:background .16s ease;
}
#yorumYaz .upload-btn label:hover{background:#e0e9fa !important}
#yorumYaz .fileClear{
  flex:0 0 auto;cursor:pointer;
  font-size:0 !important;width:32px;height:32px;
  border-radius:9px !important;color:transparent !important;border:0 !important;
  background:#fdeeee url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d94848' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center/15px no-repeat !important;
  transition:background-color .16s ease;
}
#yorumYaz .fileClear:hover{background-color:#fbdcdc !important}

/* ---------- 13. Doğrulama ("Bu Alan Zorunludur") mesajları ---------- */
/* Tema mesajı flex satırının içine bastığı için etiketin yanına giriyor ve
   taşıyordu; %100 genişlik + order ile her zaman alt satıra alınıyor. */
#yorumYaz .tici-valid-error{
  flex:0 0 100% !important;
  width:100% !important;
  order:9;
  display:block;
  margin:6px 0 0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  font-size:12.5px !important;
  font-weight:500;
  color:#d94848 !important;
}
#yorumYaz .customLabel{flex-wrap:wrap}
/* Onay kutusu satırlarında tema `flex-direction:column-reverse` kullanıyor
   (mesaj DOM'da label'dan ÖNCE ekleniyor, ters yön onu alta düşürüyor).
   Bizim `order:9` bu ters yönde tam tersine çalışıp mesajı etiketin ÜSTÜNE
   atıyordu. Yönü normale sabitleyip sırayı biz veriyoruz.
   Ayrıca dikey eksende `flex:0 0 100%` yüksekliğe uygulanacağı için
   `flex`/`width` burada sıfırlanıyor. Sol boşluk yok: mesaj formdaki diğer
   "Bu Alan Zorunludur" satırlarıyla aynı hizadan başlıyor. */
#yorumYaz .yorumMusteriAdCheck .customLabel{flex-direction:column !important;gap:0 !important}
#yorumYaz .yorumMusteriAdCheck .customLabel .tici-valid-error{
  order:9;
  flex:0 0 auto !important;
  align-self:stretch;
  width:auto !important;
  margin:5px 0 0 !important;
}

/* ---------- 14. Sabit alt bar / Gönder ---------- */
#yorumYaz .yorumBtn{
  position:sticky;bottom:0;z-index:5;
  display:flex !important;align-items:center;
  float:none !important;width:auto !important;
  margin:16px -28px 0 !important;
  padding:16px 28px 18px !important;
  background:#fff;
  border-top:1px solid #eef1f6;
}
#yorumYaz #btnYorumKaydet{
  flex:1 1 auto;display:block;float:none !important;
  width:100% !important;
  background:#003790 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:15px 24px !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 12px 24px -12px rgba(0,55,144,.75);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}
#yorumYaz #btnYorumKaydet:hover{
  background:#002a70 !important;transform:translateY(-1px);
  box-shadow:0 16px 28px -12px rgba(0,55,144,.85);
}
#yorumYaz #btnYorumKaydet:active{transform:translateY(0)}

/* ---------- 15. Mobil ---------- */
@media (max-width:600px){
  /* dar ekranda "Tavsiye Eder Misiniz?" alt satıra sarabilsin */
  #yorumYaz .detayYorumFormOneri{flex-wrap:wrap;row-gap:8px}
  /* --- Alt sayfa (bottom sheet) olarak sabitleme ---
     Tema overlay'e `overflow:auto` veriyor; modal viewport'tan uzun olduğunda
     flex hizalaması taşıyor ve pop-up bazen alta yapışmayıp tuhaf bir tam
     ekrana dönüşüyordu. Hizalama yerine konum sabitleniyor: overlay zaten
     `position:fixed; top:0; bottom:0`, sheet de ona `bottom:0` ile mutlak
     bağlanıyor — içerik ne kadar uzun olursa olsun alta yapışık kalıyor.
     Yükseklik `dvh` ile veriliyor; `vh` mobil adres çubuğu gizliyken
     ölçüldüğü için sheet görünen alanın altına taşabiliyordu. */
  #yorumYaz{padding:0 !important;overflow:hidden !important}
  #yorumYaz .modal-content{
    position:absolute !important;
    left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    /* tema satır içi `width:80%` basıyor, !important şart */
    width:100% !important;max-width:100% !important;
    margin:0 !important;
    max-height:90vh;
    max-height:90dvh;
    border-radius:20px 20px 0 0 !important;
  }
  #yorumYaz .modal-content-html{max-height:90vh;max-height:90dvh}
  /* alt sayfaya yakışan giriş: aşağıdan yukarı kayma */
  #yorumYaz .modal-content{animation:zooSheetIn .28s cubic-bezier(.2,.85,.25,1) both}
  /* kenar boşlukları kısılıp içerik alanı genişletiliyor */
  #yorumYaz .YorumContIcerik{padding:14px 10px 0 !important}
  #yorumYaz .divYorumHeader{padding:14px 48px 12px 10px !important;font-size:16px !important}
  /* alt boşluk iPhone ana ekran çubuğu kadar artırılıyor (env: yoksa 0) */
  #yorumYaz .yorumBtn{
    margin:14px -10px 0 !important;
    padding:12px 10px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #yorumYaz #btnYorumKaydet{padding:13px 20px !important}
  #yorumYaz .commentStars li svg{width:32px !important;height:32px !important}
  /* ürün görseli ile başlık yan yana; görsel küçültülerek yükseklik kısılıyor */
  #yorumYaz .yorumContentTop{padding:10px !important;gap:10px}
  #yorumYaz .yorumContentLeft{flex:0 0 78px !important;width:78px !important}
  #yorumYaz .yorumUrunImg,#yorumYaz .divYorumProductImage{width:78px !important;height:78px !important}
  #yorumYaz .divYorumProductImage img,#yorumYaz .yorumUrunImg img{
    width:78px !important;height:78px !important;padding:5px;border-radius:10px;
  }
  #yorumYaz .divYorumProductName{font-size:13.5px !important;margin-bottom:10px !important}
  /* dikey boşluklar kısılıp pop-up boyu kısaltılıyor */
  #yorumYaz .yorumContentBottom > *,
  #yorumYaz .detayYorumFormTitle,
  #yorumYaz .detayYorumFormAd,
  #yorumYaz .detayYorumYas,
  #yorumYaz .divYorumFotografEkleme{margin:0 0 12px !important}
  #yorumYaz .divYorumYaz .YorumContIcerik .yorumContentTop{margin:0 0 12px !important}
  /* "Yaşınız" seçenekleri: küçültülüp tek sırada eşit paylaştırılıyor */
  #yorumYaz .yorumYasList{flex-wrap:nowrap !important;gap:4px}
  #yorumYaz .detayYorumYasSatir{
    flex:1 1 0 !important;min-width:0;justify-content:center;
    padding:7px 2px !important;
  }
  /* temanın 24px'lik satır yüksekliği pill'i gereksiz uzatıyordu */
  #yorumYaz .detayYorumYasSatir label{font-size:11px !important;line-height:1.2 !important}
  #yorumYaz textarea.textbox{min-height:88px}
  #yorumYaz .js--image-preview{aspect-ratio:1/.8}
  #yorumYaz .yorumFotograflarDiv{min-width:calc(33.333% - 7px)}
}