/* Google yorumları bölümü — bütün müşteri sitelerinde AYNI.
 *
 * Şablon değişse de bu bölüm değişmiyor: aynı Google logosu, aynı amber
 * yıldızlar, aynı beyaz kart, aynı kaydırmalı ray. Sebebi tutarlılık değil
 * güven: ziyaretçi bu bileşeni Google'da gördüğü haliyle tanıyor.
 *
 * Şablona uyum yalnızca zeminden geliyor. Kart tasarımına dokunma.
 * Yeni şablona eklerken sadece --y-zemin ve --y-ink değerlerini o şablonun
 * paletine bağla. */

.yorumlar {
  --y-zemin: var(--oat-mid, #F5F0EB);
  --y-ink: var(--ink, #1A1714);
  --y-soft: var(--ink-muted, #6e6e73);

  display: flex;
  align-items: center;
  background: var(--y-zemin);
  padding: 88px 0;
}

.yorumlar .yw {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Başlık firmaya özel içerik; kart tasarımı değişmiyor, bu değişiyor. */
.yorumlar .ybas { max-width: 46ch; margin-bottom: 34px; }
.yorumlar .ybas h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--y-ink);
  text-wrap: balance;
}
.yorumlar .ybas p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--y-soft);
}

/* Yazı tipi bileşenin kendi malı, şablondan miras alınmıyor.
   Alınırsa her sitede başka bir yüzle çıkıyor: bir yerde Manrope, bir
   yerde monospace. Bölümün işi ziyaretçiye Google'da gördüğü şeyi
   hatırlatmak, o yüzden nötr sistem yazı tipi. Başlık bunun dışında:
   o firmaya ait içerik, şablonun yüzüyle yazılıyor. */
.yorumlar .ybar,
.yorumlar .yrail {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.yorumlar .ybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

/* Google rozeti: kutu beyaz kalıyor ki logo kendi zemininde dursun. */
.yorumlar .gbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d2d2d7;
  background: #fff;
  border-radius: 980px;
  padding: 7px 14px;
  font-size: 14px;
  letter-spacing: -0.016em;
  color: #1d1d1f;
}

.yorumlar .ypuan {
  font-size: 14px;
  color: var(--y-soft);
  letter-spacing: -0.014em;
}
.yorumlar .ypuan strong {
  color: var(--y-ink);
  font-weight: 600;
}

.yorumlar .yarrows {
  display: none;
  gap: 8px;
  margin-left: auto;
}
@media (min-width: 768px) {
  .yorumlar .yarrows { display: flex; }
}

.yorumlar .yb {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #d2d2d7;
  background: #fff;
  color: #1d1d1f;
  cursor: pointer;
  transition: border-color 0.18s;
}
.yorumlar .yb:hover:not(:disabled) { border-color: #1d1d1f; }
.yorumlar .yb:disabled {
  border-color: #e4e4e7;
  color: #b9b9bf;
  cursor: default;
}
.yorumlar .yb:focus-visible {
  outline: 2px solid var(--y-ink);
  outline-offset: 2px;
}

/* Yatay ray: kaydırma yerli, dokunmatik ve trackpad ek kod istemiyor. */
.yorumlar .yrail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.yorumlar .yrail::-webkit-scrollbar { display: none; }

.yorumlar .ycard {
  flex: 0 0 auto;
  width: 276px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid #d2d2d7;
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  margin: 0;
}
@media (min-width: 640px) { .yorumlar .ycard { width: 312px; } }
@media (min-width: 1024px) { .yorumlar .ycard { width: 340px; } }

.yorumlar .ystars { display: flex; gap: 2px; color: #f5a623; }

.yorumlar .ycard blockquote {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: #1d1d1f;
}

.yorumlar .ycard figcaption {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.yorumlar .ya { font-size: 15px; letter-spacing: -0.016em; color: #1d1d1f; }
.yorumlar .ym { font-size: 13px; color: #6e6e73; }

@media (prefers-reduced-motion: reduce) {
  .yorumlar .yrail { scroll-behavior: auto; }
}