/* Kart stilleri çocuk bileşenden geliyor. Bir bileşenin styles.css'i
   yalnızca başka bir bileşenin styles.css'inden @import edilirse
   derlemeye giriyor — elle kopyalamak yerine bu yol kullanılıyor. */
/* Imported from: ../GoogleReviewCard/styles.css */
/* ═══════════════════════════════════════════════════════════════
   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_swuxUdLfKY .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_swuxUdLfKY .grev-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

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

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .grev-kimlik {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .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_swuxUdLfKY .grev-kaynak {
  flex: none;
  font-size: 20px;
  line-height: 0;
  display: var(--gr-rozet-display, inline-block);
}

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

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

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .grev-yildiz { color: #FBBC05; }
.cc_vf4ft4MdSc_swuxUdLfKY .grev-yildiz--bos { color: var(--color-border); }

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .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_swuxUdLfKY .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_swuxUdLfKY .grev-devam:hover { color: var(--color-accent-dark); }

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .grev-fotolar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

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

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

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .grev { padding: 18px; gap: 11px; }
  .cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .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_swuxUdLfKY .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_swuxUdLfKY .grevm-gorsel {
  position: relative;
  flex: none;
  width: 560px;
  height: 560px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .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_swuxUdLfKY .grevm-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

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

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .grevm-ok--onceki { left: 8px; }
.cc_vf4ft4MdSc_swuxUdLfKY .grevm-ok--sonraki { right: 8px; }
.cc_vf4ft4MdSc_swuxUdLfKY .grevm-ok:hover:not(:disabled) { background: rgba(0, 0, 0, 0.85); }
.cc_vf4ft4MdSc_swuxUdLfKY .grevm-ok:disabled { opacity: 0.2; cursor: default; }

.cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .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_swuxUdLfKY .grevm-kapat:hover { background: var(--color-surface-alt); }

.cc_vf4ft4MdSc_swuxUdLfKY .grevm-ok:focus-visible, .cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .grevm { padding: 0; align-items: stretch; }

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

  .cc_vf4ft4MdSc_swuxUdLfKY .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_swuxUdLfKY .grevm-yorum {
    max-height: none;
    overflow: visible;
    padding: 20px;
  }

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

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

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

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

/* End import: ../GoogleReviewCard/styles.css */

/* Zemin artık ENUM değil COLOR prop'undan geliyor (MCP #14).
   Prop boşsa temanın kendi zeminine düşüyor. */
.cc_vf4ft4MdSc_swuxUdLfKY .grevs {
  width: 100%;
  padding: 28px clamp(16px, 4vw, 48px);
  box-sizing: border-box;
  background: var(--gr-bg, var(--color-bg));
}

/* Diğer bölümlerle aynı genişlik sınırı (kategori / ürün / güven şeridi). */
.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ic {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-etiket {
  margin: 0 0 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ─── Puan özeti ─── */

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ozet {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ozet-logo { font-size: 22px; line-height: 0; flex: none; }

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ozet-puan {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--gr-metin, var(--color-text-primary));
  font-variant-numeric: tabular-nums;
}

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ozet-yildizlar { display: inline-flex; gap: 2px; font-size: 17px; line-height: 0; }
.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ozet-yildiz { color: #FBBC05; } /* Google'ın yıldız sarısı — marka rengi */

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ozet-adet {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ozet-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Şerit / ızgara ───
   Tek DOM, geçiş CSS'te. Mobil kuralı 1023px'te kesiliyor, masaüstü
   1024px'te başlıyor: iki kırılım birbirini ezmiyor, karışık kullanım
   (masaüstü ızgara + mobil şerit) çalışıyor. */

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-goruntu { position: relative; }

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-serit {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  /* SNAP YOK — fare ile sürüklerken bırakılan yerde kalsın.
     `proximity` bile bırakınca şeridi en yakın karta çekiyordu ve
     serbest sürükleme hissi kayboluyordu. Ok butonları zaten
     `scrollBy` ile çalışıyor, hizalamayı snap'e bırakmıyoruz. */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 4px;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-serit::-webkit-scrollbar { display: none; }

/* Tren: varsayılanda görünmez sarmalayıcı — grid ve scroll-slider
   modları kartları şeridin doğrudan çocuğu gibi görür. */
.cc_vf4ft4MdSc_swuxUdLfKY .grevs-tren { display: contents; }

/* Tren (WAAPI marquee) modu: şerit kaydırmaz, tren compositor'da
   transformla akar — ana thread meşgulken bile pürüzsüz. Kart yüzdeleri
   çözülsün diye tren şerit genişliğini alır; içerik taşar ve akar. */
.cc_vf4ft4MdSc_swuxUdLfKY .grevs--tren .grevs-serit { overflow: hidden; }
.cc_vf4ft4MdSc_swuxUdLfKY .grevs--tren .grevs-tren {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  will-change: transform;
}
.cc_vf4ft4MdSc_swuxUdLfKY .grevs-serit:active { cursor: grabbing; }

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-serit img { -webkit-user-drag: none; }

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-oge {
  display: flex;
  flex: 0 0 calc((100% - 16px * 0.25) / 1.15);
}

/* IkasComponentRenderer çocuğu `display: contents` bir div'e sarıyor;
   kartın kendi genişliği %100 olduğu için sarmalayıcının da esnemesi gerekiyor. */
.cc_vf4ft4MdSc_swuxUdLfKY .grevs-oge > * { display: flex; width: 100%; }

@media (min-width: 640px) {
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs-oge { flex: 0 0 calc((100% - 16px) / 2.15); }
}

@media (min-width: 1024px) {
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs { padding: 36px clamp(16px, 4vw, 48px); }
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs-oge { flex: 0 0 calc((100% - 16px * 2.25) / 3.25); }
}

/* Izgara: yukarıdaki flex/overflow kurallarını EZİYOR, bu yüzden sonra geliyor. */
@media (max-width: 1023px) {
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs--m-grid .grevs-serit {
    display: grid;
    grid-template-columns: repeat(var(--gr-m-cols, 1), minmax(0, 1fr));
    overflow-x: visible;
    cursor: default;
    padding-bottom: 0;
  }
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs--m-grid .grevs-oge { flex: initial; }
}

@media (min-width: 1024px) {
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs--d-grid .grevs-serit {
    display: grid;
    grid-template-columns: repeat(var(--gr-d-cols, 3), minmax(0, 1fr));
    overflow-x: visible;
    cursor: default;
    padding-bottom: 0;
  }
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs--d-grid .grevs-oge { flex: initial; }
}

/* ─── Oklar ─── */

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
  cursor: pointer;
  z-index: 2;
}

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ok--onceki { left: -20px; }
.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ok--sonraki { right: -20px; }
.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ok[aria-hidden="true"] { opacity: 0; pointer-events: none; }

.cc_vf4ft4MdSc_swuxUdLfKY .grevs-ok:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
}

@media (min-width: 768px) {
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs--d-slider .grevs-ok { display: flex; }
}

@media (prefers-reduced-motion: no-preference) {
  .cc_vf4ft4MdSc_swuxUdLfKY .grevs-ok { transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease; }
}