/* ==========================================================================
   REFERANS LOGO ŞERİDİ — anasayfa, Google yorum bandının hemen altı
   (15.10.2026)

   Sahip: "google yorum slider altına yeni bir şerit aç tek ince çok kalın
   olmayacak bir şerit olsun pc de de mobilde de tek şerit olacak ...
   yorum gibi sağdan sola akacak ... sayfa açıldığı gibi slide çalışmayacak
   müşteri aşağı kaydırınca onu gördüğü an çalışacak".

   İşaretleme: template-parts/referans-serit.php
   Başlatma / durdurma: assets/js/main.js · referansSeridi()

   Yorum bandının (yorumlar.css) dili: aynı zemin, aynı kenar solması, aynı
   "Google'da gör" hapı, aynı transform akışı ve DÖNGÜ SIÇRAMASI düzeltmesi.
   Fark: TEK sıra, kart yerine ~88 px'lik logo kartçıkları; ray sayfa kabının içinde.
   ========================================================================== */

/* Yorum bandına BİTİŞİK — iki ayrı levha gibi değil, bandın alt katı gibi.
   Bandın 60 px alt boşluğu kalkar, alt çizgisi ikisinin arasındaki saç teli
   olur; boşluk şeridin altına geçer. (home.css'teki `.wpt-hero + .wpt-yorumlar`
   kuralının aynı mantığı.) `:has` desteklemeyen tarayıcıda yalnız arada
   60 px boşluk kalır — bozulma yok. */
.wpt-yorumlar:has(+ .wpt-refserit){ margin-bottom:0 }

.wpt-refserit{
  position:relative;
  margin:0 0 60px;
  padding:20px 0 22px;
  background:var(--wpt-surface);
  border-bottom:1px solid var(--wpt-line);
}
/* Yorum bandı basılmadıysa (süzgeçle kapatılırsa) şerit kendi başına durur. */
.wpt-refserit:not(.wpt-yorumlar + .wpt-refserit){ margin-top:60px; border-top:1px solid var(--wpt-line) }

/* --- Başlık satırı ---
   `.wpt-sechead` sınıfı bilerek kullanılıyor: yorum bandının "Google'da gör"
   hapı (`.wpt-sechead .wpt-say`, main.css) ve onun Arapça aynalaması (rtl.css)
   olduğu gibi gelsin, iki düğme ayrışmasın. Bölüm başlığının amber imza
   çizgisi ve büyük H2 ise ince şeride göre kısılıyor. */
.wpt-refserit .wpt-sechead{
  align-items:center; flex-wrap:nowrap; gap:14px 20px;
  padding-bottom:0; margin-bottom:14px;
}
.wpt-refserit .wpt-sechead::after{ content:none }
.wpt-refserit .wpt-sechead .wpt-tick{ margin-bottom:5px }
.wpt-refserit .wpt-sechead h2{
  font-size:clamp(17px, 1.5vw, 20px); line-height:1.25;
  letter-spacing:var(--wpt-track-m);
}
/* Düğme kabı: durdur + "Tüm referanslar" (yorum bandının `.wpt-yorum-akt` çifti) */
.wpt-refserit-akt{ flex:0 0 auto; display:flex; align-items:center; gap:8px }

/* --- Ray: taşan şerit + kenar solması ---
   ⚠ MASKE YOK (13.10.2026 yorum bandı notu: `mask-image` hareket eden geniş
   katmanı her karede ayrı yüzeye çizdiriyor, alt şerit takılıyordu).
   Kenar solması zeminle aynı renkte iki sabit üst katman. Yön simetrik,
   o yüzden RTL üreteci çevirmesin (rtl:ignore).
   ⚠ RAY SAYFA KABININ İÇİNDE (15.10.2026 sahip: "fullwidth olmasın").
   Solma kabın iki kenarında sabit ve dar: akış ilk logoyu kabın başında
   (başlığın hizasında) başlatıyor (main.js), geniş solma ilk logoyu
   yutardı. */
.wpt-refserit-ray{
  position:relative;
  overflow:hidden; contain:paint;
  padding-block:2px;   /* kartçık gölgesi kırpılmasın */
}
/*rtl:begin:ignore*/
.wpt-refserit-ray::before,
.wpt-refserit-ray::after{
  content:""; position:absolute; top:0; bottom:0; z-index:2;
  width:clamp(16px, 4%, 44px);
  pointer-events:none;
}
.wpt-refserit-ray::before{ left:0;  background:linear-gradient(90deg, var(--wpt-surface), transparent) }
.wpt-refserit-ray::after { right:0; background:linear-gradient(270deg, var(--wpt-surface), transparent) }
/*rtl:end:ignore*/

/* --- Akış ---
   ⚠ DÖNGÜ SIÇRAMASI (yorum bandı 05.10.2026 düzeltmesinin aynısı): akış =
   liste + kopya; aradaki boşluk iki yarının ARASINDA. Sondaki bir boşluk
   kadar dolgu iki yarıyı eşitler, -%50 tam kopyanın başına düşer.
   Mantıksal özellik: RTL'de (+%50) de doğru taraf. */
.wpt-refserit-akis{
  --wpt-refserit-ara:12px;
  display:flex; gap:var(--wpt-refserit-ara); width:max-content;
  padding-inline-end:var(--wpt-refserit-ara);
  will-change:transform; backface-visibility:hidden;
}
.wpt-refserit-liste{
  display:flex; gap:var(--wpt-refserit-ara);
  margin:0; padding:0; list-style:none;
}

/* SAYFA AÇILINCA DURUR. Akış ancak şerit görüldüğü an başlar (main.js
   `.is-akiyor`); ilk görülen, sahibin "en iyiler en önde" dediği yemek
   grubudur. Ekran dışına çıkınca durur, dönünce kaldığı yerden sürer
   (`.is-ekran-disi`, yorum bandındaki düzen). `.is-durdu` = düğme.
   Süre genişlikten hesaplanıp main.js'te yazılır (~38 px/sn, yorum bandıyla
   yakın); buradaki değer yalnız yedek. */
.js .wpt-refserit-akis{
  animation:wpt-refserit-akis 170s linear infinite;
  animation-play-state:paused;
}
.js .wpt-refserit-ray.is-akiyor .wpt-refserit-akis{ animation-play-state:running }
.js .wpt-refserit-ray.is-durdu .wpt-refserit-akis,
.js .wpt-refserit-ray.is-ekran-disi .wpt-refserit-akis{ animation-play-state:paused }

/* ⚠ YÖN: Türkçede sağdan sola (yorum bandının üst şeridi `is-sol` gibi).
   Arapçada aynalanır — liste sağdan başlar, akış sola değil sağa; yorum
   bandı da rtl.css ile öyle dönüyor. Animasyonlar BURADA iki yönlü yazıldı ve
   üreteçten saklandı (rtl:ignore): rtl.css yeniden üretilirse ikinci kez
   çevrilmesin (@keyframes parça yazılamaz — bkz. RTL notu). */
/*rtl:begin:ignore*/
@keyframes wpt-refserit-akis{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-50%,0,0) }
}
@keyframes wpt-refserit-akis-rtl{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(50%,0,0) }
}
.js[dir="rtl"] .wpt-refserit-akis{ animation-name:wpt-refserit-akis-rtl }
/*rtl:end:ignore*/

/* --- Logo kartçığı ---
   İki temada da BEYAZ: logoların çoğu koyu mürekkeple, bir kısmı beyaz
   zeminli JPG/PNG olarak çizilmiş — kartçık beyaz değilse beyaz dikdörtgen
   yama gibi kalıyor. Logolar renkli (referans sayfasıyla aynı): şeridin işi
   markayı TANITMAK, gri ton Gloria Jean's'ı da Mado'yu da aynı griye
   çeviriyordu. Dokunmatikte hover olmadığı için "gri, üstüne gelince renkli"
   telefonda hiç renk göstermeyecekti. */
.wpt-refserit-kart{
  --wpt-refserit-h:43px;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  height:88px; min-width:124px; padding-inline:22px;
  background:#FFFFFF;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-sm);
  box-shadow:0 1px 2px rgba(10,24,38,.04);
}
.wpt-refserit-kart img{
  display:block;
  width:auto; height:var(--wpt-refserit-h); max-width:230px;
  object-fit:contain;
}
/* BOY KOVASI (referans-serit.php · $wpt_rs_kova): kare amblem büyük, uzun
   yazı logosu alçak — görsel ağırlık eşitlenir.
   15.10.2026 sahip iki kez: "biraz daha büyük yap" — kartçık 58 → 72 → 88 px,
   kovalar 43/34/28/23 → 54/43/35/29 → 66/53/43/36 px (türevler turet.py ile
   her seferinde yeni boya üretildi). */
.wpt-refserit-kart.is-o1{ --wpt-refserit-h:66px }   /* kare amblem: yazısı küçük, bir kademe büyük */
.wpt-refserit-kart.is-o2{ --wpt-refserit-h:53px }
.wpt-refserit-kart.is-o3{ --wpt-refserit-h:43px }
.wpt-refserit-kart.is-o4{ --wpt-refserit-h:36px }

/* Beyaz çizilmiş logolar (Köfteci Ramiz, Bursa Kebap Evi, Limak, Silesia,
   EN-SA) marka lacivertinde kartçık — referans sayfasındaki `.is-koyu`. */
.wpt-refserit-kart.is-koyu{ background:var(--wpt-koyu); border-color:var(--wpt-koyu) }

/* Koyu tema: beyaz kartçık kalır ama parlaklığı bir tık kısılır — dizi
   hâlinde on beyaz dikdörtgen koyu sayfada göz alıyordu. Saydamlık kartçığın
   TAMAMINA (logo dahil) uygulanır, beyaz zeminli logo dosyası ayrışmaz.
   Koyu kartçık zemine karışmasın diye çizgisi açılır. Üç durum da yazılı
   (sistem, açık seçimi, koyu seçimi) — _tokens.css deseni. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wpt-refserit-kart{ opacity:.9; box-shadow:none }
  :root:not([data-theme="light"]) .wpt-refserit-kart.is-koyu{ opacity:1; border-color:var(--wpt-line-2) }
}
:root[data-theme="dark"] .wpt-refserit-kart{ opacity:.9; box-shadow:none }
:root[data-theme="dark"] .wpt-refserit-kart.is-koyu{ opacity:1; border-color:var(--wpt-line-2) }

/* --- Durdur / sürdür (WCAG 2.2.2) ---
   Başlık satırında, "Tüm referanslar" hapının yanında küçük yuvarlak düğme;
   hapla aynı çizgi, zemin ve hover ışığı. Fareyle durma YOK (yorum bandı
   29.09 sahip kararı). `hidden` + `display` çakışmasın diye açıkça yazıldı. */
.wpt-refserit-dur{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:40px; height:40px; padding:0;   /* hapla aynı boy (ölçüldü: 41 px) */
  border:1px solid var(--wpt-line); border-radius:50%;
  background:var(--wpt-surface); color:var(--wpt-ink-2);
  cursor:pointer; font:inherit;
  transition:color var(--wpt-gecis), border-color var(--wpt-gecis), box-shadow var(--wpt-gecis);
}
.wpt-refserit-dur[hidden]{ display:none }
.wpt-refserit-dur:hover{ color:var(--wpt-brand); border-color:transparent; box-shadow:var(--wpt-parilti) }
.wpt-refserit-dur:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }
.wpt-refserit-dur .is-oynat,
.wpt-refserit-dur.is-durdu .is-dur{ display:none }
.wpt-refserit-dur.is-durdu .is-oynat{ display:block }

/* --- Telefon: yine TEK sıra, kartçık ve logo bir kademe küçük --- */
@media (max-width:560px){
  .wpt-refserit{ margin-bottom:44px; padding:16px 0 18px }
  .wpt-refserit:not(.wpt-yorumlar + .wpt-refserit){ margin-top:44px }
  .wpt-refserit .wpt-sechead{ gap:10px; margin-bottom:12px }
  .wpt-refserit .wpt-sechead h2{ font-size:16px }
  .wpt-refserit .wpt-sechead .wpt-say{ padding:8px 12px; gap:5px }
  .wpt-refserit-akt{ gap:6px }
  .wpt-refserit-akis{ --wpt-refserit-ara:10px }
  .wpt-refserit-kart{ height:70px; min-width:100px; padding-inline:16px }
  .wpt-refserit-kart img{ max-width:180px }
  .wpt-refserit-kart.is-o1{ --wpt-refserit-h:54px }
  .wpt-refserit-kart.is-o2{ --wpt-refserit-h:43px }
  .wpt-refserit-kart.is-o3{ --wpt-refserit-h:36px }
  .wpt-refserit-kart.is-o4{ --wpt-refserit-h:30px }
  .wpt-refserit-dur{ width:38px; height:38px }
}

/* --- Betik yoksa ya da hareket azaltılmışsa ---
   Akış hiç kurulmaz; kopya gizlenir, şerit elle yatay kaydırılır. İçerik
   kaybolmaz, yalnızca kendiliğinden hareket etmez (yorum bandıyla aynı).
   Baş dolgusu = içerik sütununun başı (solma ile aynı hesap; dolgu yüzdesi
   rayın genişliğine göre çözülür): ilk logo başlığın hizasında, solmasız. */
html:not(.js) .wpt-refserit-ray{ overflow-x:auto }
html:not(.js) .wpt-refserit-akis{ padding-inline:0 }   /* ray kabın içinde: ilk logo zaten başlık hizasında */
html:not(.js) .wpt-refserit-liste[aria-hidden]{ display:none }
@media (prefers-reduced-motion: reduce){
  .wpt-refserit-ray{ overflow-x:auto }
  .wpt-refserit-akis{   /* animasyon tamamen kapanmalı */
    animation:none !important;
    padding-inline:0;
  }
  .wpt-refserit-liste[aria-hidden]{ display:none }
  .wpt-refserit-dur{ display:none !important }   /* durduracak hareket yok */
}

@media print{
  .wpt-refserit{ display:none }
}