/* ==========================================================================
   STMACH Robotics - products.css
   .cat-card  : makine kategorileri (6 adet)
   .product-card : populer urunler - TEK ve AYNI markup (foreach ile uretilir)
   .cat-tabs  : kategori bazli populer urun sekmeleri
   Kart kartina farkli sinif/inline style YOK.
   ========================================================================== */

/* ------------------------------------------- KATEGORI SERIDI (TEK SATIR)

   Izgara yerine yatay serit. Kategori sayisi 11'e ciktiginda uc satirlik
   izgara sayfayi asagi itiyor ve hepsi ayni anda gorunmedigi icin zaten
   kaydirma gerekiyordu; serit bunu tek satirda ve kasitli yapar.

   Kaydirma NATIF: JavaScript kapaliyken de parmakla, trackpad'le ve klavyeyle
   (serit odaklanabilir) calisir. Dugmeler ve ilerleme cizgisi main.js
   tarafindan acilir - suslemedir, isleve sart degildir. */

/* Serit sayfa kapsayicisinin DISINDA: kartlar ekran kenarina kadar akar ve
   devam ettiklerini gosterir. Hizayi --rail-pad saglar (main.css token). */
.cat-rail { margin-block-start: var(--space-6); }

.cat-rail__viewport { position: relative; }

/* Sondaki kartin kesildigi kenarda yumusak gecis - "devami var" isareti. */
.cat-rail__viewport::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: clamp(24px, 6vw, 88px);
  background: linear-gradient(to left, var(--bg-page), transparent);
  pointer-events: none;
}
[dir="rtl"] .cat-rail__viewport::after {
  background: linear-gradient(to right, var(--bg-page), transparent);
}

.cat-rail__track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-2) var(--rail-pad);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline-start: var(--rail-pad);
  /* Serit kendi kaydirma cubugunu gostermez; konum ilerleme cizgisinde. */
  scrollbar-width: none;
}
.cat-rail__track::-webkit-scrollbar { display: none; }
.cat-rail__track:focus-visible { outline: 2px solid var(--st-orange); outline-offset: 4px; }

.cat-rail__item {
  flex: 0 0 clamp(212px, 22vw, 288px);
  scroll-snap-align: start;
}
/* Urun kartlari daha genis: baslik, teknik satirlar ve "Incele" alt alta
   duruyor; kategori karti gibi dar olunca baslik uc satira kiriliyordu. */
.cat-rail__item--urun { flex-basis: clamp(248px, 26vw, 320px); }
/* Kartlar seritte esit boyda: govde farkli uzunlukta olsa da alt kenar hizali. */
.cat-rail__item--urun > .product-card { block-size: 100%; }

/* Baslikta kumanda + "tumu" bagi. */
.cat-rail__head-actions { display: flex; align-items: center; gap: var(--space-3); }
.cat-rail__nav { display: flex; gap: var(--space-2); }
.cat-rail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid var(--st-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.cat-rail__btn:hover:not(:disabled) {
  background: var(--st-slate-dark);
  border-color: var(--st-slate-dark);
  color: var(--st-white);
}
/* Uca gelindiginde dugme sonmez, soluklasir: yeri korunur, serit zipllamaz. */
.cat-rail__btn:disabled { opacity: .35; cursor: default; }
.cat-rail__btn .icon { inline-size: 18px; block-size: 18px; }
[dir="rtl"] .cat-rail__btn .icon { transform: scaleX(-1); }

.cat-rail__progress {
  block-size: 2px;
  margin-block-start: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--st-line);
  overflow: hidden;
}
.cat-rail__progress-bar {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--st-orange);
  transition: transform var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .cat-rail__track { scroll-behavior: auto; }
  .cat-rail__progress-bar { transition: none; }
}

/* ------------------------------------------------------ KATEGORI KARTLARI */
.cat-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-ink);
  color: var(--text-on-ink);
  isolation: isolate;
}
/* Seritte kartlar DIKEY: yatay bir sirada portre kartlar hem daha cok
   kategoriyi ayni anda gosterir hem serit hissini kuvvetlendirir. */
.cat-card__media { aspect-ratio: 3 / 4; }
.cat-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.cat-card:hover .cat-card__media img { transform: scale(1.05); }

.cat-card:focus-visible { outline: 2px solid var(--st-orange); outline-offset: 3px; }

/* PERDE AYRI KATMANDA.
   Gradyan daha once .cat-card__body'nin uzerindeydi; o kutu icerigi kadar
   (~90 px) yuksek oldugu icin gecis basligin hizasinda daha saydamdi ve
   BEYAZ zeminli bir gorselde (boyama robotu fotografi) baslik okunmuyordu.
   Perde artik kartin alt %62'sini kaplar; yazinin bulundugu alt seritte
   ortu %85'e cikar - beyaz metin en kotu durumda 6.9:1 verir. */
.cat-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 62%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--st-slate-dark) 30%, transparent) 40%,
    color-mix(in srgb, var(--st-slate-dark) 72%, transparent) 68%,
    color-mix(in srgb, var(--st-slate-dark) 95%, transparent) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.cat-card__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-5);
  z-index: 1;   /* perdenin uzerinde */
}
.cat-card__title {
  margin: 0;
  color: var(--st-white);
  font-size: var(--fs-h4);
}
.cat-card__meta {
  display: block;
  margin-block-start: var(--space-1);
  /* Global --text-muted-ink (%70 beyaz) DEGIL: kart zemini gorsele gore
     degisiyor ve beyaz zeminli bir fotografta (boyama robotu) bu satir
     12 px'te 4.25:1'de kaliyordu. %85 ile en kotu durumda 5.4:1. */
  color: color-mix(in srgb, var(--st-white) 85%, transparent);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.cat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  color: var(--st-orange-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.cat-card:hover .cat-card__cta .icon { transform: translateX(4px); }
.cat-card__cta .icon { transition: transform var(--dur) var(--ease); }

/* ---------------------------------------------------------- SEKME BANDI

   BANT SARAR, KAYDIRMAZ. Yatay kaydirmada 11 kategoriden dordu hic
   gorunmuyordu (1440 px'de 6 tam, 1 yarim, 4 gizli) ve kenardaki solma
   "devami var" demeye yetmiyordu. Artik alt satira sariyor; en fazla iki
   satir gosterilip kalani "+N daha" ile aciliyor - kategori sayisi artinca
   bolum asagi dogru buyumuyor. */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
  padding-block: var(--space-1) var(--space-3);
}

/* Sekmeler ust kabin sarma akisina katilsin diye; "+N daha" boylece son
   satirin sonunda durur ve tablist icinde sekme olmayan oge bulunmaz. */
.cat-tabs__list { display: contents; }

.cat-tabs__btn[hidden] { display: none; }

/* "+N daha" - sekme gibi hap ama kesikli cerceve: secilebilir bir kategori
   olmadigi bakmadan anlasilsin. */
.cat-tabs__more {
  flex: none;
  padding: var(--space-2) var(--space-5);
  border: 1px dashed var(--st-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat-tabs__more:hover { border-color: var(--st-orange); color: var(--st-orange-text); }
.cat-tabs__btn {
  flex: none;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-pill);
  background: var(--st-white);
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.cat-tabs__btn:hover { border-color: var(--st-orange); color: var(--st-orange-text); }
/* Secili sekme de beyaz yazi tasidigi icin CTA tonunu kullanir. */
.cat-tabs__btn[aria-selected="true"] {
  background: var(--st-orange-cta);
  border-color: var(--st-orange-cta);
  color: var(--st-white);
}

.cat-panel[hidden] { display: none; }
/* Sekme bandi zaten kendi alt boslugunu tasiyor; serit ustunde ikinci bir
   buyuk bosluk gerekmez. */
.cat-panel .cat-rail { margin-block-start: var(--space-3); }

/* ---------------------------------------------------------- URUN KARTLARI */
.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--st-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.product-card:hover {
  border-color: var(--st-orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card__media {
  aspect-ratio: 4 / 3;
  background: var(--st-paper);
}
.product-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-3);
  padding: var(--space-5);
}

/* Kart basina 1, en fazla 2 etiket */
.product-card__tag {
  align-self: flex-start;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--st-orange-soft);
  color: var(--st-orange-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
}

.product-card__title {
  margin: 0;
  font-size: var(--fs-h4);
}
.product-card__title a:hover { color: var(--st-orange-text); }

/* Teknik veri - susleme altinda kaybolmaz */
.product-card__spec {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--st-line);
  font-size: var(--fs-xs);
}
.product-card__spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.product-card__spec-key { color: var(--text-muted); }
.product-card__spec-val {
  color: var(--text-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.product-card__foot { margin-block-start: auto; padding-block-start: var(--space-3); }