/* ==========================================================================
   GOOGLE YORUM BANDI

   İki şerit ters yönde akıyor. Akış `transform` ile yapılıyor — `left` ya da
   `margin` animasyonu her karede yeniden yerleşim tetikler ve uzun listede
   gözle görülür takılma yapar.

   Kesintisizlik: her şeridin içeriği iki kez basılıyor ve animasyon tam
   -%50'de başa dönüyor. İkinci kopya işaretlemede `aria-hidden`.
   ========================================================================== */

.wpt-yorumlar{
  position:relative;
  margin:60px 0;
  padding:44px 0 48px;
  background:var(--wpt-surface);
  border-block:1px solid var(--wpt-line);
  overflow:hidden;
}

.wpt-yorum-ray{
  display:flex; flex-direction:column; gap:16px;
  margin-top:28px;
  /* Kenarlar solar: şeritler kapsayıcıdan taşıyor, sert kesim
     "içerik kırpıldı" gibi okunuyordu. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.wpt-yorum-serit{ overflow:hidden }
.wpt-yorum-akis{
  display:flex; gap:14px; width:max-content;
  will-change:transform;
}
.wpt-yorum-kopya{ display:flex; gap:14px }

.wpt-yorum-serit.is-sol .wpt-yorum-akis{ animation:wpt-yorum-sol 68s linear infinite }
.wpt-yorum-serit.is-sag .wpt-yorum-akis{ animation:wpt-yorum-sag 74s linear infinite }

/* Fare şeridin üstündeyken durur — okumaya çalışan kişinin altından kaçmasın. */
.wpt-yorum-ray:hover .wpt-yorum-akis{ animation-play-state:paused }

@keyframes wpt-yorum-sol{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-50%,0,0) }
}
@keyframes wpt-yorum-sag{
  from{ transform:translate3d(-50%,0,0) }
  to  { transform:translate3d(0,0,0) }
}

/* --- Kart --- */
.wpt-yorum-kart{
  flex:0 0 auto;
  display:flex; flex-direction:column; gap:11px;
  width:330px; padding:20px 22px;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  background:var(--wpt-grad-kagit);
  box-shadow:var(--wpt-golge-sm);
}
.wpt-yorum-kart header{ display:flex; align-items:center; gap:12px }

.wpt-yorum-avatar{
  flex:0 0 auto; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--wpt-grad-marka); color:var(--wpt-btn-ink);
  font-size:17px; font-weight:700; line-height:1;
  box-shadow:0 3px 10px -3px rgba(4,80,160,.5);
}
.wpt-yorum-kim{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.wpt-yorum-kim b{
  font-size:14.5px; font-weight:700; color:var(--wpt-ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wpt-yorum-kim small{
  display:flex; align-items:center; gap:5px;
  font-size:var(--wpt-fs-xs); color:var(--wpt-ink-3);
}

/* Yıldız amber — imza rengiyle aynı; Google'ın sarısı taklit edilmiyor. */
.wpt-yorum-yildiz{ display:flex; gap:2px; color:var(--wpt-amber) }

.wpt-yorum-kart p{
  margin:0;
  font-size:var(--wpt-fs-sm); line-height:1.62; color:var(--wpt-ink-2);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

@media (max-width:560px){
  .wpt-yorumlar{ margin:44px 0; padding:32px 0 36px }
  .wpt-yorum-kart{ width:270px; padding:17px 18px }
}

/* Hareket azaltılmışsa akış durur ve şeritler normal kaydırılır:
   içerik kaybolmaz, yalnızca kendiliğinden hareket etmez. */
@media (prefers-reduced-motion: reduce){
  .wpt-yorum-serit{ overflow-x:auto }
  .wpt-yorum-akis{ animation:none !important }   /* animasyon tamamen kapanmalı */
  .wpt-yorum-kopya{ display:none }
}