/* ═══════════════════════════════════════════════════════════════
   Google yorum kartı

   Renkler ve satır sınırı ÜST BÖLÜMDEN özel özellikle iniyor:
     --gr-kart-bg  kart zemini      (COLOR prop)
     --gr-metin    ana metin rengi  (COLOR prop)
     --gr-rozet    Google rozeti görünürlüğü (1 / 0)
   Bunlar CSS kapsamasını aşmanın tek yolu: `.cc_<id>` öneki yüzünden üst
   bölümün sınıfı buradan hedeflenemiyor, özel özellikler ise kalıtımla iner.
   ═══════════════════════════════════════════════════════════════ */

.cc_vf4ft4MdSc_G2KAxL81mQ .grev {
  display: flex;
  flex-direction: column;
  /* Ölçüldü: kartlar flex satırında `stretch` olduğu için EN UZUN kart
     60'ının da boyunu belirliyor. Ortanca doğal yükseklik 239px iken kart
     337px'e çıkıyordu. Dolgu, aralık ve fotoğraf boyu bu yüzden kısıldı. */
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px;
  background: var(--gr-kart-bg, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

/* ─── Üst satır: kişi + kaynak ─── */

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-kisi {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-alt);
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-avatar--harf {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-accent-dark);
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-kimlik {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-ad {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gr-metin, var(--color-text-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-meta {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rozet bölüm genelinde kapatılabiliyor */
.cc_vf4ft4MdSc_G2KAxL81mQ .grev-kaynak {
  flex: none;
  font-size: 20px;
  line-height: 0;
  display: var(--gr-rozet-display, inline-block);
}

/* ─── Yıldız + tarih ─── */

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-puan {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-yildizlar {
  display: inline-flex;
  gap: 2px;
  font-size: 15px;
  line-height: 0;
}

/* Google'ın yıldız sarısı — marka rengi olduğu için tema değişkeni değil */
.cc_vf4ft4MdSc_G2KAxL81mQ .grev-yildiz { color: #FBBC05; }
.cc_vf4ft4MdSc_G2KAxL81mQ .grev-yildiz--bos { color: var(--color-border); }

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-tarih {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ─── Metin ───
   Kırpma artık SATIR değil KARAKTER bazlı ve JS'te yapılıyor
   (`textLimit` prop'u). `-webkit-line-clamp` kaldırıldı: metni gizliyordu
   ama "Devamını gör" bağlantısını da birlikte gizliyordu. */

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-metin {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-secondary);
  /* Metne 3 satırlık ALT SINIR: kartlar flex `stretch` ile en uzun kartın
     boyuna çekildiği için kısa yorumlarda kartın DİBİNDE 150px'e varan ölü
     boşluk kalıyordu. Alt sınır o boşluğu metnin altına, yani içeriğin
     yanına taşıyor; kartlar arası fark yalnızca fotoğraf satırı kadar. */
  min-height: calc(14px * 1.55 * 3);
}

/* "Devamını gör" — metnin akışında, ayrı satır değil */
.cc_vf4ft4MdSc_G2KAxL81mQ .grev-devam {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-devam:hover { color: var(--color-accent-dark); }

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-devam:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ─── Yorum fotoğrafları ─── */

/* Fotoğraflar METNİN HEMEN ALTINDA duruyor.
   Önce `margin-top: auto` vardı — kartlar eşit yükseklikte esnediği için
   fotoğrafı kartın dibine itiyordu ve kısa yorumlarda metinle fotoğraf
   arasında kocaman bir boşluk kalıyordu (ölçüldü: 355px kartta ~150px).
   Artık boşluk kartın ALTINDA toplanıyor, metnin içinde değil. */
.cc_vf4ft4MdSc_G2KAxL81mQ .grev-fotolar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-foto-btn {
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
  border-radius: 8px;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-foto-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grev-foto {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-surface-alt);
}

@media (min-width: 640px) {
  .cc_vf4ft4MdSc_G2KAxL81mQ .grev { padding: 18px; gap: 11px; }
  .cc_vf4ft4MdSc_G2KAxL81mQ .grev-foto { width: 60px; height: 60px; }
}


/* ═══════════════════════════════════════════════════════════════
   FOTOĞRAF MODALI

   Ölçüler Loox ve Okendo'nun CANLI CDN dosyalarından alındı:
     · Okendo (media-modal.cebe2529.css)
         .oke-modal-content        max-width: 1000px
         .oke-mediaGallery-slider  600×600 sabit, background #000
         .oke-mediaGallery-review  flex: 1 0 0; padding: 32px; overflow: auto
         .oke-media-image          object-fit: contain
         oklar                     50×50, left/right 4px, rgba(0,0,0,.6), r4px
     · Loox (post/quickview inline CSS)
         perde                     rgba(0, 0, 0, 0.7)
         kapat                     16px kenar boşluğu, 24px ikon, r8px
         mobil kırılım             620px → dikey yığın, görsel 75vw–135vw

   Köşe yarıçapı ölçülen yedi widget'ta 0–10px arasında (Okendo 0, Trustindex 4,
   Trustpilot 5, Loox 8, Yotpo 10). Üst sınır olan 10px seçildi — temanın 16px'lik
   kartlarına en yakın olan, ölçüm aralığının dışına da çıkmayan değer.
   ═══════════════════════════════════════════════════════════════ */

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm {
  position: fixed;
  inset: 0;
  /* Temanın katman ölçeğine uyuyor: en yüksek mevcut katman 1000
     (sepet çekmecesi ve sticky header), diğer modallar 100. Lightbox
     hepsinin üstünde olmalı ama ölçeğin dışına çıkmamalı.
     Önce 2147483000 yazmıştım — widget'ların kullandığı değer bu ama
     bu temada anlamsız bir sıçrama. */
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
  overflow-y: auto;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-kutu {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1000px;
  background: var(--color-bg);
  border-radius: 10px;
  overflow: hidden;
  cursor: default;
}

/* ─── Sol: sabit boyutlu görsel kutusu ───
   Kutu SABİT, görsel `contain` ile içine oturuyor: dikey de yatay da
   kare de aynı kutuda, kırpılmadan. Artan yer siyah letterbox. */

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-gorsel {
  position: relative;
  flex: none;
  width: 560px;
  height: 560px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ─── Sağ: yorum, bağımsız kaydırılır ─── */

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-yorum {
  /* Taban genişlik, `auto` DEĞİL. Amazon `.media-popover` metin panelini
     `flex: 1 1 359px` ile tanımlıyor: sütun okunmaz genişliğe düşemiyor.
     `auto` bıraksaydım modal genişliği ileride değişince metin ezilirdi. */
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  max-height: 560px;
  overflow-y: auto;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-metin {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ─── Oklar + sayaç ─── */

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 22px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  /* Daire: Amazon (50×50), Trendyol (40×40), Yotpo, Trustindex hepsi `50%`.
     Köşeli olan yalnızca Trustpilot (40×48) — azınlıkta kaldı. */
  border-radius: 50%;
  cursor: pointer;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ok--onceki { left: 8px; }
.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ok--sonraki { right: 8px; }
.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ok:hover:not(:disabled) { background: rgba(0, 0, 0, 0.85); }
.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ok:disabled { opacity: 0.2; cursor: default; }

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-sayac {
  /* Sol üst — Trustpilot `.photo-counts` (left:16px; top:16px) ile aynı.
     Alt-orta denenmişti ama ölçülen yedi widget'ın hiçbirinde öyle değil. */
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ─── Kapat ─── */

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-kapat {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 20px;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  z-index: 3;
}

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-kapat:hover { background: var(--color-surface-alt); }

.cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ok:focus-visible, .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-kapat:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Mobil: dikey yığın, tam ekran ───
   Loox 620px'te kırıyor; bu temanın diğer kırılımlarıyla uyum için 768px.
   Görsel yüksekliği vw'ye bağlı — dikey fotoğraflarda da makul kalıyor. */

@media (max-width: 767px) {
  .cc_vf4ft4MdSc_G2KAxL81mQ .grevm { padding: 0; align-items: stretch; }

  .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-kutu {
    flex-direction: column;
    max-width: none;
    min-height: 100%;
    border-radius: 0;
  }

  .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-gorsel {
    width: 100%;
    height: auto;
    min-height: 72vw;
    max-height: 110vw;
  }

  /* Modalın tamamı tek parça kayar; metnin ayrı kaydırma kutusu olmaz. */
  .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-yorum {
    max-height: none;
    overflow: visible;
    padding: 20px;
  }

  .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-kapat {
    top: 10px;
    right: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-color: transparent;
  }

  .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-kapat:hover { background: rgba(0, 0, 0, 0.7); }

  .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ok { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: no-preference) {
  .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-ok, .cc_vf4ft4MdSc_G2KAxL81mQ .grevm-kapat { transition: background-color 150ms ease; }
}