/* Generated by server/scripts/build-css.js from wm-catalog.css, wm-product.css — edit those, then rebuild. */
/* ---- wm-catalog.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — katalog ve kategori sayfası
   Referans mağazanın katalog iskeleti: görselli kategori başlığı,
   filtre çubuğu (arama + sıralama + sonuç sayacı), sol filtre rayı,
   kart ızgarası. wm-tokens.css + wm-store.css üzerine kurulur.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Kırıntı ══════════════════════════════════════════════════ */
.wm-crumb{
  max-width: var(--wm-max); margin: 0 auto; padding: 18px var(--wm-gut) 0;
  font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; color: var(--wm-g-dim);
}
.wm-crumb a{ color: var(--wm-g); text-decoration: none; }
.wm-crumb a:hover{ color: var(--wm-y); }

/* ═══ Kategori başlığı ═════════════════════════════════════════ */
/* Görsel + açıklama + ürün sayısı. Referans mağazadaki kategori
   başlığının karşılığı; görsel yoksa sadece metin kalır. */
.wm-chead{ position: relative; overflow: hidden; border-bottom: 1px solid var(--wm-line); }
.wm-chead__bg{
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(620px 320px at 88% 20%, rgba(255,199,0,.08), transparent 62%), var(--wm-k);
}
.wm-chead__in{
  position: relative; z-index: 1;
  max-width: var(--wm-max); margin: 0 auto; padding: 26px var(--wm-gut) 30px;
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.wm-chead__art{
  flex: none; width: 96px; height: 96px; overflow: hidden;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
  display: grid; place-items: center; color: var(--wm-g-dim);
}
.wm-chead__art img{ width: 100%; height: 100%; object-fit: cover; }
.wm-chead__art .glyph-ph{ width: 34px; height: 34px; }
.wm-chead__copy{ flex: 1 1 320px; min-width: 0; }
.wm-chead h1{
  margin: 0; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d2); line-height: 1; letter-spacing: var(--wm-track-d);
  text-transform: uppercase; color: var(--wm-w);
}
.wm-chead h1 em{ font-style: normal; color: var(--wm-y); }
.wm-chead p{ margin: 10px 0 0; color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.6; max-width: 68ch; }
/* Ürün sayısı plaketi kaldırıldı: başlıkta "27 products", iki parmak
   aşağıda araç çubuğunda "27 results" yazıyordu ve filtre uygulanınca
   yalnız biri değişiyordu. Canlı olanı araç çubuğunda kalır. */

/* ═══ Kategori satırı ══════════════════════════════════════════ */
/* Kategorinin TEK yaşadığı yer. Önce görselli kutu duvarı ("Pick your
   game") hem de sol raydaki liste aynı işi yapıyordu; kutular kategori
   seçilince kayboluyor, ray ise telefonda düğmenin arkasında. Bu satır
   her iki durumda da burada: hem içeri giriş hem geri çıkış yolu.
   Tek satır, taşarsa yatay kayar — sayfa asla yana taşmaz. */
.wm-chead__cats{
  flex: 1 0 100%; min-width: 0; margin-top: 20px;
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 3px; scrollbar-width: none; -ms-overflow-style: none;
}
.wm-chead__cats::-webkit-scrollbar{ display: none; }
.wm-chead__cats a{
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 34px; padding: 0 15px;
  background: transparent; color: var(--wm-g); text-decoration: none;
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
  font-family: var(--wm-body); font-size: var(--wm-t4); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; white-space: nowrap;
  transition: background var(--wm-fast), color var(--wm-fast), border-color var(--wm-fast);
}
.wm-chead__cats a:hover{ color: var(--wm-w); border-color: var(--wm-line-2); }
/* Seçili kategori: hapların içinde dolgulu zemini olan tek eleman —
   fark gri tonlamada da okunur. Renk tek başına anlam taşımaz; durumu
   aria-current da bildirir ve başlık zaten kategorinin adını yazar. */
.wm-chead__cats a[aria-current="true"]{
  background: var(--wm-k-raise-2); border-color: var(--wm-y-line); color: var(--wm-y);
}

/* ═══ Öne çıkan kampanya ═══════════════════════════════════════ */
.wm-promo{
  display: flex; align-items: center; gap: 0; overflow: hidden;
  max-width: var(--wm-max); margin: 20px auto 0;
  margin-inline: auto; width: calc(100% - 2 * var(--wm-gut));
  background: linear-gradient(120deg, var(--wm-k-raise), var(--wm-k-sink));
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r);
  text-decoration: none; color: var(--wm-w);
  transition: border-color var(--wm-fast);
}
.wm-promo:hover{ border-color: var(--wm-y-line); }
.wm-promo__tag{
  flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 16px;
  background: var(--wm-y); color: var(--wm-on-y);
  font-size: var(--wm-t5); font-weight: 900; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-promo__shot{
  flex: none; width: 86px; height: 86px; overflow: hidden;
  border-right: 1px solid var(--wm-line); background: var(--wm-k-sink);
  display: grid; place-items: center; color: var(--wm-g-dim);
}
.wm-promo__shot img{ width: 100%; height: 100%; object-fit: cover; }
.wm-promo__shot .glyph-ph{ width: 28px; height: 28px; }
.wm-promo__body{ padding: 14px 18px; min-width: 0; }
.wm-promo__game{
  font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; color: var(--wm-g-dim);
}
.wm-promo__name{
  display: block; margin-top: 4px; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d3); letter-spacing: var(--wm-track-d); text-transform: uppercase; line-height: 1;
}
.wm-promo__price{ margin-left: auto; display: flex; align-items: baseline; gap: 10px; padding: 0 18px; flex: none; }
.wm-promo__price b{
  font-family: var(--wm-display); font-weight: 400; font-size: 26px;
  letter-spacing: .01em; color: var(--wm-y);
}
.wm-promo__price s{ color: var(--wm-g-dim); font-size: var(--wm-t3); }
.wm-promo__cta{
  flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 20px;
  border-left: 1px solid var(--wm-line);
  font-size: var(--wm-t5); font-weight: 900; letter-spacing: var(--wm-track-m);
  text-transform: uppercase; color: var(--wm-y);
}

/* ═══ Filtre çubuğu ════════════════════════════════════════════ */
/* Sonuç sayısı her zaman görünür: filtre uygulayan biri kaç ürün
   kaldığını görmeden bir sonraki filtreye geçmemeli. */
.wm-fbar{ border-bottom: 1px solid var(--wm-line); background: var(--wm-k-band); }
.wm-fbar__in{
  max-width: var(--wm-max); margin: 0 auto; padding: 12px var(--wm-gut);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wm-fbar__cell{
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  background: var(--wm-k-raise); color: var(--wm-g); cursor: pointer;
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
  font-family: var(--wm-body); font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
  transition: background var(--wm-fast), color var(--wm-fast), border-color var(--wm-fast);
}
.wm-fbar__cell:hover{ color: var(--wm-w); border-color: var(--wm-line-2); }
.wm-fbar__cell[aria-pressed="true"]{
  background: var(--wm-y-soft); color: var(--wm-y); border-color: var(--wm-y-line-2);
}
.wm-fbar__search{
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px;
  flex: 1 1 240px; min-width: 200px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
}
.wm-fbar__search svg{ width: 14px; height: 14px; color: var(--wm-g-dim); flex: none; }
.wm-fbar__search input{
  flex: 1; min-width: 0; background: none; border: 0; color: var(--wm-w);
  font-family: var(--wm-body); font-size: var(--wm-t3);
}
.wm-fbar__search input:focus{ outline: 0; }
.wm-fbar__search input::placeholder{ color: var(--wm-g-dim); }
/* wm-premium.css'in genel form alanı kuralları (48px yükseklik, dolgu,
   gömülü zemin + iç gölge, odak halkası) hapın içinde ikinci bir kutu
   çiziyordu. Hap tek yüzey; odak durumunu hapın kenarı taşır. */
.wm-fbar .wm-fbar__search input{
  min-height: 0; height: 100%; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.wm-fbar .wm-fbar__search input:focus{ box-shadow: none; }
.wm-fbar__search:focus-within{ border-color: var(--wm-y-line-2); }
.wm-fbar__search:focus-within svg{ color: var(--wm-y); }
.wm-fbar select{
  min-height: 0; height: 36px; padding: 0 16px 0 0;
  background-color: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--wm-w); cursor: pointer;
  font-family: var(--wm-body); font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
  /* Koyu temada kaybolan tarayıcı oku yerine küçük bir ok */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wm-g) 50%),
    linear-gradient(135deg, var(--wm-g) 50%, transparent 50%);
  background-position: calc(100% - 5px) 55%, 100% 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.wm-fbar select:focus{ box-shadow: none; }
.wm-fbar select option{ background: var(--wm-k-raise); color: var(--wm-w); }
.wm-fbar__count{
  margin-left: auto; cursor: default; color: var(--wm-w);
  background: none; border-color: transparent;
}
.wm-fbar__count:hover{ border-color: transparent; }
.wm-fbar__count b{ color: var(--wm-y); font-family: var(--wm-display); font-weight: 400; font-size: 16px; }
/* Kapalı panelin arkasında kaç filtre açık — rakam düğmenin üzerinde
   durur ki daraltılmış bir katalog filtresizmiş gibi görünmesin.
   Dolgu yok: ızgaranın yanındaki tek sarı leke bile fazla. */
.wm-fbar__cell--filters b{
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 2px; border-radius: var(--wm-r-pill);
  background: var(--wm-y-soft); border: 1px solid var(--wm-y-line); color: var(--wm-y);
  font-family: var(--wm-body); font-size: var(--wm-t5); font-weight: 900; letter-spacing: 0;
}
.wm-fbar__cell--filters[aria-expanded="true"]{ color: var(--wm-w); border-color: var(--wm-line-3); }

/* ═══ Gövde: ızgara (+ istendiğinde filtre sütunu) ═════════════ */
/* Varsayılan tek sütun. Ürünler sayfanın kendisidir; güç filtreleri
   Filters düğmesiyle çağrılır ve geniş ekranda ızgaranın solunda bir
   sütun olarak açılır (hiçbir şeyin üstünü örtmez). */
.wm-cwrap{
  max-width: var(--wm-max); margin: 0 auto; padding: 0 var(--wm-gut);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px;
}
.wm-rail-side{
  padding: 24px 0 40px; align-self: start;
  position: sticky; top: 78px; max-height: calc(100vh - 90px); overflow-y: auto;
  scrollbar-width: thin;
}
.wm-rail-side__grp{
  margin-bottom: 12px; padding: 14px 16px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
}
.wm-rail-side h4{
  margin: 0 0 10px; font-size: var(--wm-t5); font-weight: 900;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; color: var(--wm-y);
}
.wm-rail-side__grp button{
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 7px 9px; border-radius: var(--wm-r-s);
  font-family: var(--wm-body); font-size: var(--wm-t3); font-weight: 700; color: var(--wm-g);
  transition: background var(--wm-fast), color var(--wm-fast);
}
.wm-rail-side__grp button:hover{ color: var(--wm-w); background: rgba(255,255,255,.04); }
.wm-rail-side__grp button span{ color: var(--wm-g-dim); font-size: var(--wm-t5); font-weight: 800; }
/* Seçili filtre: dört grup yan yana dolgulu sarı olunca ekranda dört
   birincil düğme gibi duruyordu. Dolgu yerine yükseltilmiş zemin +
   sol sarı işaret + sarı etiket; durum aria-pressed ile de okunur,
   yani anlamı taşıyan tek şey renk değil. */
.wm-rail-side__grp button[aria-pressed="true"]{
  position: relative; background: var(--wm-k-raise-2); color: var(--wm-y); font-weight: 800;
}
.wm-rail-side__grp button[aria-pressed="true"]::before{
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 2px; border-radius: 2px; background: var(--wm-y);
}
.wm-rail-side__grp button[aria-pressed="true"] span{ color: var(--wm-y); opacity: .72; }
.wm-rail__clear{
  width: 100%; padding: 12px 0; cursor: pointer;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  color: var(--wm-w);
  font-family: var(--wm-body); font-size: var(--wm-t5); font-weight: 900;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-rail__clear:hover{ border-color: var(--wm-y-line); color: var(--wm-y); }

.wm-cbody{ padding: 24px 0 48px; min-width: 0; }

.wm-empty{
  padding: 60px 24px; text-align: center; color: var(--wm-g);
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
}
.wm-empty h3{
  margin: 0 0 8px; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d3); letter-spacing: var(--wm-track-d); text-transform: uppercase; color: var(--wm-w);
}
.wm-sentinel{ height: 40px; }

/* ═══ Mobil filtre paneli ══════════════════════════════════════ */
@media (max-width: 940px){
  .wm-rail-side{
    position: fixed; inset: auto 0 0 0; z-index: 46; max-height: 80vh;
    background: var(--wm-k); border-top: 1px solid var(--wm-y-line);
    border-radius: var(--wm-r-l) var(--wm-r-l) 0 0;
    padding: 16px var(--wm-gut) 24px; overflow-y: auto;
    transform: translateY(101%); transition: transform var(--wm-med);
  }
  .wm-rail-side[data-open="1"]{ transform: none; }
  .wm-rail__close{
    display: block; width: 100%; margin-bottom: 14px; padding: 13px 0; cursor: pointer;
    background: var(--wm-y); color: var(--wm-on-y); border: 0; border-radius: var(--wm-r-s);
    font-family: var(--wm-body); font-size: var(--wm-t5); font-weight: 900;
    letter-spacing: var(--wm-track-m); text-transform: uppercase;
  }
}
/* Tablette arama kutusunun 240px'lik taban genişliği sonuç sayısını tek
   başına ikinci bir satıra itiyordu. Kutu biraz kısalınca beş öğe de
   aynı satırda kalıyor — araç çubuğu tek satır olduğu için tek satır. */
@media (max-width: 940px){
  .wm-fbar__search{ flex: 1 1 160px; min-width: 140px; }
  .wm-fbar__cell{ padding: 0 12px; }
  .wm-fbar__search{ padding: 0 12px; }
  .wm-fbar__in{ gap: 8px; }
  /* Sayaç bir kutu değil, bir cümle: çerçevesi zaten yok, dolgusu da
     gereksiz. Kalkınca beş öğe tablette tek satıra sığıyor. */
  .wm-fbar__count{ padding-inline: 0; }
}

@media (min-width: 941px){
  /* Panel kapalıyken sütun hiç çizilmez; açılınca ızgara 232px'lik bir
     sütun açar. Düğme her genişlikte görünür — masaüstünde de filtreler
     artık çağrıldığında gelir. */
  .wm-cwrap[data-filters="1"]{ grid-template-columns: 232px minmax(0, 1fr); }
  .wm-cwrap[data-filters="0"] .wm-rail-side{ display: none; }
  .wm-rail__close{ display: none; }
}

@media (max-width: 700px){
  .wm-promo{ flex-wrap: wrap; }
  .wm-promo__tag{ width: 100%; padding: 9px 16px; }
  .wm-promo__price{ margin-left: 0; padding: 0 18px 14px; }
  .wm-promo__cta{ border-left: 0; border-top: 1px solid var(--wm-line); width: 100%; padding: 13px 18px; }
  .wm-fbar__count{ margin-left: 0; }
  /* Telefonda başlık bloğu biraz sıkılır: ekranın yarısı ürün görmeden
     geçmesin. Cümle ve kategori satırı olduğu gibi kalır. */
  .wm-chead__in{ padding-block: 20px 22px; }
  .wm-chead__cats{ margin-top: 16px; }
}

/* ---- wm-product.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — ürün sayfası
   Referans mağazanın ürün iskeleti: solda galeri + durum şeridi +
   sekmeli içerik, sağda yapışkan satın alma kutusu, altta ilgili
   ürünler ve mobilde sabit satın alma çubuğu.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Hidrasyon öncesi sunucu gövdesi ══════════════════════════ */
/* server/routes/seo.js, JS çalıştırmayan istemciler için #productRoot içine
   aynı içeriğin ham HTML'ini basar; product.js yüklenene kadar ekranda o
   durur (ve /api/products düşerse kalıcı olarak o kalır). Kullandığı
   .section/.container/.breadcrumbs sınıfları wm-page.css'te tanımlı ve bu
   sayfa onu yüklemiyor: metin tam kanama, bağlantılar altı çizili, başlık
   gövde fontunda karışık büyük/küçük harf kalıyordu. Ölçüler .wm-pd ve
   .wm-crumb ile aynı, böylece hidrasyon sıçrama yaratmaz.
   Seçiciler `>` ile sınırlı: .pd-rich-desc içindeki başlıklar wm-extra.css'e
   ait, bu kurallar oraya karışmaz. */
#productRoot > .section > .container{
  max-width: var(--wm-max); margin: 0 auto;
  padding: 18px var(--wm-gut) 40px;
}
#productRoot > .section > .container > .breadcrumbs{
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m);
  text-transform: uppercase; color: var(--wm-g-dim);
}
#productRoot > .section > .container > .breadcrumbs a{ color: var(--wm-g); text-decoration: none; }
#productRoot > .section > .container > .breadcrumbs a:hover{ color: var(--wm-y); }
#productRoot > .section > .container > h1{
  margin: 16px 0 12px; color: var(--wm-w); line-height: 1.04;
  font-family: var(--wm-display); font-weight: 400; font-size: var(--wm-d2);
  letter-spacing: var(--wm-track-d); text-transform: uppercase;
}
#productRoot > .section > .container > p{
  margin: 0 0 13px; max-width: 74ch;
  color: var(--wm-g); font-size: var(--wm-t3); line-height: 1.7;
}
#productRoot > .section > .container > p strong{ color: var(--wm-w); font-weight: 800; }
#productRoot > .section > .container > p a{ color: var(--wm-y); text-underline-offset: 3px; }
#productRoot > .section > .container > .pd-rich-desc{ margin-top: 18px; }

.wm-pd{
  max-width: var(--wm-max); margin: 0 auto;
  padding: 20px var(--wm-gut) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 28px; align-items: start;
}
.wm-pd__left{ min-width: 0; }

/* ═══ Galeri ═══════════════════════════════════════════════════ */
.wm-gal{
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
}
.wm-gal__media{ position: absolute; inset: 0; display: grid; place-items: center; color: var(--wm-g-dim); }
.wm-gal__media img{ width: 100%; height: 100%; object-fit: cover; }
.wm-gal__media .glyph-ph{ width: 76px; height: 76px; opacity: .4; }
.wm-gal__flag{
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: rgba(8,8,10,.86); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-xs);
  padding: 6px 10px; font-size: 8.5px; font-weight: 900;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-gal__ghost{
  position: absolute; left: 18px; bottom: 12px; z-index: 1; pointer-events: none;
  font-family: var(--wm-display); font-weight: 400; font-size: 52px;
  letter-spacing: -.01em; text-transform: uppercase; color: rgba(255,255,255,.05);
}

.wm-gal__thumbs{ display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.pd-thumb{
  width: 74px; height: 54px; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  display: grid; place-items: center; color: var(--wm-g-dim);
  transition: border-color var(--wm-fast);
}
.pd-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.pd-thumb .glyph-ph{ width: 22px; height: 22px; }
.pd-thumb:hover{ border-color: var(--wm-line-2); }
.pd-thumb.active{ border-color: var(--wm-y); box-shadow: var(--wm-ring-y); }

/* ═══ Durum şeridi ═════════════════════════════════════════════ */
/* Fixed 2×2 rather than auto-fit: with four facts an auto grid lands on
   3+1 at common widths and leaves a visibly empty cell. */
.wm-strip{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 16px; background: var(--wm-line);
  border: 1px solid var(--wm-line); border-radius: var(--wm-r); overflow: hidden;
}
.wm-strip > div{ padding: 13px 16px; background: var(--wm-k-raise); }
.wm-strip s{
  display: block; text-decoration: none; color: var(--wm-g-dim); margin-bottom: 3px;
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-strip b{ font-size: var(--wm-t3); font-weight: 800; color: var(--wm-w); }

/* ═══ Başlık bloğu ═════════════════════════════════════════════ */
.wm-pd__info{ margin-top: 26px; }
.wm-pd__info h1{
  margin: 9px 0 0; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d2); letter-spacing: var(--wm-track-d); text-transform: uppercase;
  line-height: 1; color: var(--wm-w);
}
.wm-pd__info p{ margin: 14px 0 0; color: var(--wm-g); font-size: var(--wm-t1); line-height: 1.7; max-width: 74ch; }
.wm-pd__rating{ margin-top: 11px; color: var(--wm-g); font-size: var(--wm-t3); }
.wm-pd__rating span{ color: var(--wm-y); letter-spacing: .06em; }

/* ═══ Sekmeler ═════════════════════════════════════════════════ */
.wm-tabs{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; }
.wm-tabs .tab-btn{
  height: 38px; padding: 0 16px; cursor: pointer;
  background: var(--wm-k-raise); color: var(--wm-g);
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
  font-family: var(--wm-body); font-size: var(--wm-t3); font-weight: 700;
  letter-spacing: .005em;
  transition: background var(--wm-fast), color var(--wm-fast), border-color var(--wm-fast);
}
.wm-tabs .tab-btn:hover{ color: var(--wm-w); border-color: var(--wm-line-2); }
/* Açık sekme: sekme sırası tekrar eden bir bileşen, bu yüzden dolgu
   sarıyı almaz — o bütçe sayfanın tek birincil eylemine ("buy now")
   ait. Yükseltilmiş zemin + sarı kenarlık + sarı etiket; durum ayrıca
   aria-selected ile okunur. */
.wm-tabs .tab-btn.active{
  background: var(--wm-k-raise-2); color: var(--wm-y); border-color: var(--wm-y-line-2); font-weight: 800;
}

.wm-panel{
  display: none; margin-top: 18px; padding: 22px 24px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
  color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.8;
}
.wm-panel.active{ display: block; }
.wm-panel > :first-child{ margin-top: 0; }
.wm-panel > :last-child{ margin-bottom: 0; }
/* Uzun açıklama yoksa sekme iki düz paragraf gösterir. Zengin metin
   (.pd-rich-desc) ürün ve rehber sayfalarında ortak: wm-extra.css. */
.wm-panel > p{ margin: 0 0 14px; }

.wm-facts{ display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0; margin: 0; }
.wm-facts dt{
  padding: 14px 0 11px; border-bottom: 1px solid var(--wm-line); color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-facts dd{ margin: 0; padding: 11px 0; border-bottom: 1px solid var(--wm-line); color: var(--wm-w); font-size: var(--wm-t3); }
.wm-facts :is(dt, dd):first-of-type{ padding-top: 0; }
.wm-facts dt:first-of-type{ padding-top: 3px; }
.wm-facts :is(dt, dd):last-of-type{ border-bottom: 0; padding-bottom: 0; }

/* .wm-steplist paylaşılan bir bileşendir; tanımı wm-extra.css içinde.
   Altındaki rehber düğmesi listeye yapışmasın. */
.wm-panel .wm-steplist + .wm-btn{ margin-top: 18px; }


/* ═══ Satın alma kutusu ════════════════════════════════════════ */
/* Yapışkan: ziyaretçi sekmeleri okurken fiyat ve buton ekranda kalır. */
.wm-buy{
  position: sticky; top: 78px; overflow: hidden;
  background: linear-gradient(var(--wm-k-raise), var(--wm-k-sink));
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r);
  box-shadow: var(--wm-sh-card);
}
.wm-buy__head{ padding: 16px; border-bottom: 1px solid var(--wm-line); }
.wm-buy__head h2{
  margin: 5px 0 0; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d3); letter-spacing: var(--wm-track-d); text-transform: uppercase;
  line-height: 1; color: var(--wm-w);
}
.wm-buy__price{ padding: 15px 16px; border-bottom: 1px solid var(--wm-line); }
.wm-buy__price > div{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.wm-buy__price b{
  font-family: var(--wm-display); font-weight: 400; font-size: 34px;
  letter-spacing: .01em; color: var(--wm-y); line-height: 1;
}
.wm-buy__price s{ color: var(--wm-g-dim); font-size: var(--wm-t3); }
.wm-buy__price s:empty{ display: none; }
.wm-buy__badge{
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--wm-y); color: var(--wm-on-y);
  padding: 4px 9px; border-radius: var(--wm-r-pill);
  font-size: var(--wm-t5); font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.wm-buy__badge--flash{ background: var(--wm-w); color: var(--wm-k); }
.wm-buy__badge .wm-ico{ width: 11px; height: 11px; stroke-width: 2.4; }

/* Kampanya notu: ad + kazanç solda, geri sayım sağda. Geri sayım
   .wm-buy__price b'nin dev fiyat stilini ALMAZ (eskiden 34px'e
   büyüyüp kendi satırına düşüyordu); rakam genişliği sabit. */
.pd-sale-note{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--wm-y-soft); border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-s);
  color: var(--wm-w); font-size: var(--wm-t3); line-height: 1.4;
}
.pd-sale-note__ico{ display: grid; place-items: center; color: var(--wm-y); }
.pd-sale-note__ico .wm-ico{ width: 15px; height: 15px; }
.pd-sale-note__txt{ flex: 1 1 auto; min-width: 0; font-weight: 700; }
.pd-sale-note__end{ display: inline-flex; align-items: baseline; gap: 7px; margin-left: auto; white-space: nowrap; }
.pd-sale-note__lab{
  color: var(--wm-g);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-buy__price .pd-sale-cd{
  display: inline; margin: 0; color: var(--wm-y);
  font-family: var(--wm-body); font-size: var(--wm-t2); font-weight: 800; line-height: 1;
  font-variation-settings: normal; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

.wm-buy__lab{ padding: 13px 16px 0; }

/* ── Plan satırları ───────────────────────────────────────────── */
.wm-plans{ display: block; padding: 10px 12px 4px; }
.wm-plan{
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-bottom: 7px; padding: 11px 13px; cursor: pointer;
  background: var(--wm-k-sink); color: var(--wm-w);
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  font-family: var(--wm-body);
  transition: border-color var(--wm-fast), background var(--wm-fast), color var(--wm-fast);
}
.wm-plan:hover{ border-color: var(--wm-line-2); }
.wm-plan__rd{
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--wm-line-2); border-radius: 50%;
}
.wm-plan__b{ min-width: 0; }
.wm-plan__b b{ display: block; font-size: var(--wm-t2); font-weight: 800; }
.wm-plan__b s{
  display: block; margin-top: 2px; text-decoration: none; color: var(--wm-g);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-plan__p{
  margin-left: auto; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d4); letter-spacing: .01em;
}
/* Seçili plan: plan listesi tekrar eden bir bileşen, üstelik hemen
   altında sayfanın tek birincil eylemi ("buy now") duruyor. İki dolgu
   sarı yan yana olunca hangisinin düğme olduğu okunmuyordu. Seçim
   artık dolu sarı radyo + sarı kenarlık + halka ile söyleniyor —
   stokta olmayan seçili planın zaten kullandığı dil. */
.wm-plan.active{
  background: var(--wm-k-raise-2); color: var(--wm-w);
  border-color: var(--wm-y-line-2); box-shadow: var(--wm-ring);
}
.wm-plan.active .wm-plan__rd{ background: var(--wm-y); border-color: var(--wm-y); box-shadow: inset 0 0 0 3px var(--wm-k-raise-2); }
.wm-plan.active .wm-plan__p{ color: var(--wm-y); }
/* Sold-out plans stay readable: they are the price anchor for the range.
   No opacity: a translucent selected row turned the yellow into a muddy
   olive. Muted text + dashed radio instead; selected = ring, not fill. */
.wm-plan--out{ background: var(--wm-k-sink); color: var(--wm-g); }
.wm-plan--out .wm-plan__rd{ border-style: dashed; }
.wm-plan--out .wm-plan__p{ color: var(--wm-g); }
.wm-plan.active.wm-plan--out{
  background: var(--wm-k-raise-2); color: var(--wm-w);
  border-color: var(--wm-y-line-2); box-shadow: var(--wm-ring);
}
.wm-plan.active.wm-plan--out .wm-plan__rd{
  background: var(--wm-y); border: 1px solid var(--wm-y); box-shadow: inset 0 0 0 3px var(--wm-k-raise-2);
}
.wm-plan.active.wm-plan--out .wm-plan__b s{ color: var(--wm-g); opacity: 1; }
.wm-plan.active.wm-plan--out .wm-plan__p{ color: var(--wm-w); }

.wm-qty{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 16px 14px;
}
.wm-qty__ctl{ display: flex; border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-pill); overflow: hidden; }
.wm-qty__ctl button{
  width: 34px; height: 34px; background: var(--wm-k-sink); border: 0; cursor: pointer;
  color: var(--wm-g); font-size: var(--wm-t1);
}
.wm-qty__ctl button:hover:not(:disabled){ color: var(--wm-y); }
.wm-qty__ctl button:disabled{ color: var(--wm-g-dim); cursor: not-allowed; }
/* input[type=text] genel kuralı (wm-premium.css: min-height 48px, iç gölge)
   bu alanı hapın dışına taşırıyordu; özgüllük onu burada geçer. */
.wm-qty__ctl input[type="text"]{
  width: 42px; height: 34px; min-height: 0; padding: 0; text-align: center;
  background: var(--wm-k-sink); color: var(--wm-w);
  border: 0; border-radius: 0; box-shadow: none;
  font-family: var(--wm-body); font-size: var(--wm-t3); font-weight: 800;
}
.wm-qty__ctl input[type="text"]:focus{ box-shadow: none; }
.wm-qty__stock{ margin-left: auto; }

.wm-total{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 14px 16px; margin: 0 12px 12px;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
}
.wm-total b{
  font-family: var(--wm-display); font-weight: 400; font-size: 30px;
  letter-spacing: .01em; color: var(--wm-y); line-height: 1;
}

.wm-buy__acts{ padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.wm-buy__acts .wm-btn{ width: 100%; height: 50px; }
.wm-buy__row{ display: grid; grid-template-columns: minmax(0, 1fr) 50px; gap: 8px; }
.wm-buy__row .wm-btn{ height: 44px; }
.wm-buy__wish{
  height: 44px; cursor: pointer; display: grid; place-items: center;
  background: var(--wm-k-sink); color: var(--wm-g);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  transition: color var(--wm-fast), border-color var(--wm-fast);
}
.wm-buy__wish svg{ width: 18px; height: 18px; }
.wm-buy__wish:hover, .wm-buy__wish[aria-pressed="true"]{ color: var(--wm-y); border-color: var(--wm-y-line); }

.wm-trust{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--wm-line); border-top: 1px solid var(--wm-line); }
.wm-trust > div{ padding: 12px; background: var(--wm-k-raise); text-align: center; }
.wm-trust s{
  display: block; text-decoration: none; color: var(--wm-g-dim); margin-bottom: 2px;
  font-size: 8.5px; font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-trust b{ font-size: var(--wm-t4); font-weight: 800; color: var(--wm-w); }
.wm-buy__pay{ padding: 12px 16px; border-top: 1px solid var(--wm-line); text-align: center; }

/* ── Back-in-stock form ───────────────────────────────────────── */
/* Markup comes from renderStockNotify() in data.js. On a sold-out plan the
   card drops quantity, total and Buy now (product.js toggles .wm-buy--out)
   and this form takes their place — the one useful action left. */
.wm-buy--out .wm-qty,
.wm-buy--out .wm-total,
.wm-buy--out #pdBuyNow{ display: none; }

.notify-stock{
  margin: 4px 12px 12px; padding: 14px;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  box-shadow: var(--wm-edge-soft);
}
.notify-stock-title{
  display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px;
  color: var(--wm-w); font-size: var(--wm-t3); font-weight: 800; line-height: 1.4;
}
.notify-stock-title .wm-ico{ width: 16px; height: 16px; margin-top: 1px; color: var(--wm-y); }
.notify-stock-row{ display: flex; gap: 8px; flex-wrap: wrap; }
/* Genel input/.btn kuralları (wm-premium.css) 48px alan + 36px düğme
   veriyordu; iki öğe aynı hizada 44px. */
.notify-stock .notify-stock-email{
  flex: 1 1 140px; min-width: 0; height: 44px; min-height: 0; padding: 0 13px;
  background: var(--wm-k); color: var(--wm-w);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  font-family: var(--wm-body); font-size: var(--wm-t3);
}
.notify-stock .notify-stock-email::placeholder{ color: var(--wm-g-dim); }
.notify-stock .notify-stock-btn{
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; cursor: pointer;
  background: var(--wm-y); color: var(--wm-on-y);
  border: 1px solid var(--wm-y-hi); border-radius: var(--wm-r-s); box-shadow: var(--wm-sh-y);
  /* Ürün tükenmişse "buy now" devre dışı (gri) kalır, yani ekranın tek
     birincil eylemi budur — dolgu sarıyı hak ediyor. */
  font-family: var(--wm-display); font-size: 13.5px; font-weight: 800;
  font-variation-settings: "wdth" 106, "wght" 800;
  letter-spacing: .012em; text-transform: uppercase;
  transition: background var(--wm-fast), box-shadow var(--wm-fast);
}
.notify-stock .notify-stock-btn:hover{ background: var(--wm-y-hi); box-shadow: var(--wm-sh-y-hi); }
.notify-stock .notify-stock-btn:disabled{
  background: var(--wm-k-raise-2); color: var(--wm-g-dim);
  border-color: var(--wm-line); box-shadow: none; cursor: not-allowed;
}
.notify-stock-done{
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--wm-ok-soft); border-color: var(--wm-ok-line);
  color: var(--wm-w); font-size: var(--wm-t3); line-height: 1.55;
}
.notify-stock-done .wm-ico{ width: 18px; height: 18px; color: var(--wm-ok); }
.notify-stock-done p{ margin: 0; min-width: 0; overflow-wrap: anywhere; }
.notify-stock-done b{ color: var(--wm-w); font-weight: 800; }
.notify-stock-waiting{
  display: flex; align-items: center; gap: 8px; margin-top: 11px;
  color: var(--wm-g); font-size: var(--wm-t3);
}
.notify-stock-waiting .wm-ico{ width: 15px; height: 15px; }

/* ═══ Mobil sabit satın alma çubuğu ════════════════════════════ */
.wm-mobar{
  position: fixed; inset: auto 0 0 0; z-index: 42; display: none;
  align-items: center; gap: 14px;
  padding: 11px var(--wm-gut) calc(11px + env(safe-area-inset-bottom, 0px));
  background: var(--wm-k); border-top: 1px solid var(--wm-y-line);
  box-shadow: var(--wm-edge);
}
.wm-mobar__info b{
  display: block; font-family: var(--wm-display); font-weight: 400; font-size: 24px;
  letter-spacing: .01em; color: var(--wm-y); line-height: 1;
}
.wm-mobar__info s{
  display: block; margin-top: 3px; text-decoration: none; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-mobar .wm-btn{ margin-left: auto; height: 46px; padding: 0 26px; }
/* Çubuk açıkken sağ alttaki canlı destek başlatıcısı (chat.js, 58px) çubuğun
   Buy now düğmesini örtüyordu. Satış kartıyla (wm-extra.css) aynı çözüm:
   ikisi de çubuğun üstüne çıkar. Çubuk yüksekliği ≈ 69px + 13px boşluk. */
@media (max-width: 940px){
  /* Çubuk belirince başlatıcı sıçramasın, kayarak yer değiştirsin. chat.js
     kendi geçiş listesini sonradan enjekte ettiği için seçici bir kademe özgül. */
  body .wm-chat-fab{ transition: background var(--wm-fast), box-shadow var(--wm-fast), transform var(--wm-fast), bottom var(--wm-med); }
  body:has(.wm-mobar:not([hidden])) .wm-chat-fab{ bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  body:has(.wm-mobar:not([hidden])) .wm-chat-panel{
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 200px);
  }
  body:has(.wm-mobar:not([hidden])) .wm-chat-teaser{ bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══ Birlikte alınanlar ═══════════════════════════════════════ */
.wm-fbt{
  margin-top: 26px; padding: 22px 24px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
}
.wm-fbt__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.wm-fbt__head h3{
  margin: 0; font-family: var(--wm-display); font-weight: 400; font-size: var(--wm-d3);
  letter-spacing: var(--wm-track-d); text-transform: uppercase; color: var(--wm-w);
}
.wm-fbt__deal{
  background: var(--wm-y); color: var(--wm-on-y); padding: 5px 11px; border-radius: var(--wm-r-pill);
  font-size: var(--wm-t5); font-weight: 900; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-fbt__row{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.wm-fbt__items{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.wm-fbt__item{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--wm-w); min-width: 0; }
.wm-fbt__shot{
  width: 62px; height: 62px; flex: none; overflow: hidden;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  display: grid; place-items: center; color: var(--wm-g-dim);
}
.wm-fbt__shot img{ width: 100%; height: 100%; object-fit: cover; }
.wm-fbt__shot .glyph-ph{ width: 24px; height: 24px; }
.wm-fbt__body{ min-width: 0; }
.wm-fbt__body b{ display: block; font-size: var(--wm-t2); font-weight: 800; }
.wm-fbt__body s{ display: block; text-decoration: none; color: var(--wm-g); font-size: var(--wm-t3); margin-top: 2px; }
.wm-fbt__plus{ color: var(--wm-g-dim); font-size: 20px; font-weight: 800; }
.wm-fbt__buy{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.wm-fbt__price b{
  font-family: var(--wm-display); font-weight: 400; font-size: 26px;
  letter-spacing: .01em; color: var(--wm-y);
}
.wm-fbt__price s{ color: var(--wm-g-dim); font-size: var(--wm-t3); margin-left: 8px; }
.wm-fbt__note{ margin: 15px 0 0; color: var(--wm-g); font-size: var(--wm-t3); }
/* Sepete göre durum (product.js): ürün sepette → paket teklifi; ikisi de
   sepette → paket tamam. Sepetteki ürün yazı + onay ikonuyla işaretlenir,
   renk tek başına anlam taşımaz. */
.wm-fbt{ transition: border-color var(--wm-fast); }
.wm-fbt[data-state="offer"]{ border-color: var(--wm-y-line); box-shadow: var(--wm-ring-in); }
.wm-fbt__held{
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  color: var(--wm-ok); font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-fbt__held svg{ width: 12px; height: 12px; flex: none; }
.wm-fbt__item.is-held .wm-fbt__shot{ border-color: var(--wm-ok-line); }
.wm-fbt__buy .wm-btn{ text-decoration: none; }

/* ═══ Son bakılanlar ═══════════════════════════════════════════ */
.wm-rv{ margin-top: 40px; }
.wm-rv__head{ display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.wm-rv__head h3{
  margin: 0; font-family: var(--wm-display); font-weight: 400; font-size: var(--wm-d3);
  letter-spacing: var(--wm-track-d); text-transform: uppercase; color: var(--wm-w);
}
.wm-rv__clear{
  margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--wm-g-dim);
  font-family: var(--wm-body); font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-rv__clear:hover{ color: var(--wm-y); }
.wm-rv__rail{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wm-gap); }
.wm-rv__tile{
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  text-decoration: none; color: var(--wm-w); min-width: 0;
  transition: border-color var(--wm-fast);
}
.wm-rv__tile:hover{ border-color: var(--wm-y-line); }
.wm-rv__shot{
  width: 38px; height: 38px; flex: none; overflow: hidden;
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-xs);
  display: grid; place-items: center; color: var(--wm-g-dim);
}
.wm-rv__shot img{ width: 100%; height: 100%; object-fit: cover; }
.wm-rv__shot .glyph-ph{ width: 18px; height: 18px; }
.wm-rv__body{ min-width: 0; }
.wm-rv__cat{
  display: block; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-rv__name{
  display: block; font-size: var(--wm-t3); font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wm-rv__price{
  margin-left: auto; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-t1); color: var(--wm-y);
}
/* Tükenmiş ürün fiyat gibi sarı durmasın: nötr mikro etiket. */
.wm-rv__tile .wm-rv__price--out{
  flex: none; color: var(--wm-g); white-space: nowrap;
  font-family: var(--wm-body); font-size: var(--wm-t5); font-weight: 800;
  font-variation-settings: normal; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}

/* ═══ Yorumlar ═════════════════════════════════════════════════ */
/* Gerçek satın alma yorumları (/api/reviews). Sahte yorum yok — liste
   boşsa bölüm bunu açıkça söyler. */
.rv-summary{ display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--wm-line); }
.rv-summary-score{ text-align: center; flex: none; }
.rv-big{ font-family: var(--wm-display); font-weight: 400; font-size: 50px; color: var(--wm-y); line-height: 1; }
.rv-stars{ color: var(--wm-y); letter-spacing: .1em; margin-top: 5px; }
.rv-count{ color: var(--wm-g-dim); font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase; margin-top: 5px; }
.rv-bars{ flex: 1; min-width: 220px; }
.rv-bar-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rv-bar-label{ width: 26px; color: var(--wm-g); font-size: var(--wm-t5); font-weight: 800; }
.rv-bar-track{ flex: 1; height: 6px; background: var(--wm-k-raise-2); border-radius: var(--wm-r-pill); overflow: hidden; }
.rv-bar-fill{ height: 100%; background: var(--wm-y); border-radius: inherit; }
.rv-bar-n{ width: 26px; text-align: right; color: var(--wm-g); font-size: var(--wm-t5); font-weight: 800; font-variant-numeric: tabular-nums; }

.rv-list{ margin-top: 20px; }
.rv-item{ display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--wm-line); }
.rv-item:last-child{ border-bottom: 0; }
/* Sarı bütçesi: her yorumda dolu sarı daire listeyi boğuyordu. */
.rv-avatar{
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-pill);
  font-family: var(--wm-display); font-weight: 400; font-size: var(--wm-t1);
}
/* İsimsiz yorum: harf yerine nötr kişi simgesi — metin karakteri ikon yerine
   kullanılmıyor (data.js wmIcon). */
.rv-avatar--anon .wm-ico{ width: 18px; height: 18px; }
.rv-body{ min-width: 0; }
.rv-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--wm-w); }
.rv-verified{
  display: inline-flex; align-items: center; gap: 4px; color: var(--wm-ok);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.rv-verified__ico{ width: 12px; height: 12px; flex: none; }
.rv-item-stars{ color: var(--wm-y); letter-spacing: .09em; margin-top: 3px; }
.rv-text{ margin: 8px 0 0; color: var(--wm-g); font-size: var(--wm-t3); line-height: 1.7; }
.rv-date{ margin-top: 7px; color: var(--wm-g); font-size: var(--wm-t4); }
.rv-empty{ margin: 0; color: var(--wm-g); padding: 4px 0; }

.rv-cta{
  margin-top: 20px; padding: 15px 17px; color: var(--wm-g); font-size: var(--wm-t3);
  background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
}
.rv-cta b{ color: var(--wm-w); }
.rv-cta a{ color: var(--wm-y); text-underline-offset: 3px; }
.rv-form{ margin-top: 22px; padding: 18px 20px; background: var(--wm-k-sink); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s); }
.rv-form h4{
  margin: 0 0 10px; color: var(--wm-w); font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d4); letter-spacing: var(--wm-track-d); text-transform: uppercase;
}
/* Seçilen puan renkten bağımsız okunur: içi dolu ★ / boş ☆ ve yanında "4 / 5". */
.rv-star-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px -4px; }
.rv-star-val{ color: var(--wm-g); font-size: var(--wm-t3); font-weight: 800; font-variant-numeric: tabular-nums; }
.rv-star-input{ display: flex; gap: 2px; margin: 0; }
.rv-star{
  width: 34px; height: 36px; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: var(--wm-r-s);
  color: var(--wm-g-dim); font-size: var(--wm-d3); line-height: 1;
  transition: color var(--wm-fast), transform var(--wm-fast);
}
.rv-star:hover{ transform: translateY(-1px); }
.rv-star.on{ color: var(--wm-y); }
.rv-form .rv-name{
  display: block; margin-bottom: 7px; color: var(--wm-w);
  font-size: var(--wm-t3); font-weight: 700; letter-spacing: 0; text-transform: none;
}
.rv-name small{ color: var(--wm-g); font-weight: 500; font-size: inherit; }
.rv-form input[type="text"]{
  display: block; width: 100%; max-width: 360px; margin-bottom: 12px; padding: 11px 14px;
  background: var(--wm-k); color: var(--wm-w);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  font-family: var(--wm-body); font-size: var(--wm-t3);
}
.rv-form textarea{
  display: block; width: 100%; padding: 12px 14px; min-height: 96px;
  background: var(--wm-k); color: var(--wm-w);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  font-family: var(--wm-body); font-size: var(--wm-t3); resize: vertical;
}
.rv-err{
  margin-top: 12px; padding: 10px 12px;
  background: var(--wm-bad-soft); border: 1px solid var(--wm-bad-line); border-radius: var(--wm-r-s);
  color: var(--wm-bad); font-size: var(--wm-t3);
}
/* Yorum gönder: bu sayfanın birincil eylemi satın almak, bu yüzden
   form dolgu sarıyı almaz — sarı çizgili ikincil ses yeterli ve eylem
   olduğu gibi duruyor. (Seçici .rv-form .btn olduğu için formdaki her
   düğmeyi boyuyordu; artık ses kısık.) */
.rv-form .btn{
  display: inline-flex; align-items: center; justify-content: center; margin-top: 13px;
  height: 42px; padding: 0 20px; cursor: pointer;
  background: var(--wm-k-sink); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-s);
  font-family: var(--wm-body); font-size: var(--wm-t3); font-weight: 700;
  letter-spacing: .005em; text-transform: none;
}
.rv-form .btn:hover{ background: var(--wm-y-soft); border-color: var(--wm-y-line-2); }
.rv-form .btn:disabled{ background: var(--wm-k-raise-2); color: var(--wm-g-dim); border-color: var(--wm-line); box-shadow: none; cursor: not-allowed; }

/* ═══ Responsive ═══════════════════════════════════════════════ */
@media (max-width: 1080px){
  .wm-pd{ grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
  .wm-rv__rail{ grid-template-columns: repeat(2, 1fr); }
}
/* 4 ilgili ürün 3 sütunlu ızgarada 3+1 dizilip tek kartı yetim
   bırakıyordu; bu aralıkta tek temiz sıra gösterilir. */
@media (min-width: 701px) and (max-width: 980px){
  #relatedGrid > :nth-child(4){ display: none; }
}
@media (max-width: 940px){
  /* DESIGN.md §7: the buy card drops right below the gallery — not below
     every tab and the bundle strip — and the sticky bar takes over.
     The left column dissolves into the page grid so its blocks can be
     ordered around the card: gallery, title, buy card, facts, tabs. */
  .wm-pd{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wm-pd__left{ display: contents; }
  .wm-gal{ order: 1; }
  .wm-gal__thumbs{ order: 2; }
  .wm-pd__info{ order: 3; }
  .wm-buy{ order: 4; position: static; margin-top: 22px; }
  .wm-strip{ order: 5; margin-top: 22px; }
  .wm-tabs{ order: 6; }
  .wm-pd .tab-panel{ order: 7; }
  #fbtHost{ order: 8; }
  /* The h1 sits right above the card on this layout; no second title. */
  .wm-buy__head{ display: none; }
  .wm-mobar{ display: flex; }
  .wm-foot{ padding-bottom: 80px; }
}
@media (max-width: 560px){
  .wm-rv__rail{ grid-template-columns: 1fr; }
  .wm-facts{ grid-template-columns: 1fr; }
  .wm-facts dt{ border-bottom: 0; padding-bottom: 0; }
  .wm-fbt{ padding: 18px 16px; }
  /* İki ürün alt alta; artı işareti görsellerin ekseninde, düğme tam genişlik. */
  .wm-fbt__items{ flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .wm-fbt__plus{ width: 62px; text-align: center; line-height: 1; }
  .wm-fbt__buy{ width: 100%; margin-left: 0; gap: 12px; }
  .wm-fbt__buy .wm-btn{ flex: 1 1 auto; }
  .wm-panel{ padding: 18px 16px; }
  /* Four pills wrapped onto two rows with one orphan; one scrollable row
     instead. Padding keeps the active ring inside the clip. */
  .wm-tabs{
    flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    margin-inline: calc(var(--wm-gut) * -1); padding: 3px var(--wm-gut);
    scrollbar-width: none;
  }
  .wm-tabs::-webkit-scrollbar{ display: none; }
  .wm-tabs .tab-btn{ flex: none; padding: 0 14px; }
  /* Puan ve dağılım yan yana sığsın; alt alta boş bir sütun bırakıyordu. */
  .rv-summary{ gap: 20px; }
  .rv-bars{ min-width: 170px; }
}