/* =============================================================================
   HOME — Anasayfaya özel bölümler
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Hero
   Hazır slider bileşeni kullanılmaz; katmanlar ve tipografi elle kurulur.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

/* Arka plan katmanları — her koleksiyon için bir görsel */
.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  /* Aktif olan görsel yavaşça büyür — durağan fotoğrafa hareket katar */
  transform: scale(1.02);
  transition: transform 7s linear;
}
.hero__slide.is-active img { transform: scale(1.1); }

/* Okunabilirlik katmanı — soldan sağa ve alttan yukarı iki yönlü */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(20,16,14,0.92) 0%, rgba(20,16,14,0.66) 42%, rgba(20,16,14,0.18) 78%),
    linear-gradient(to top, rgba(20,16,14,0.75) 0%, rgba(20,16,14,0) 45%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

/* --- Hero tipografi --- */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-kicker);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rose-soft);
}
.hero__kicker::before { content: ''; width: 48px; height: 1px; background: var(--rose); }

.hero__title {
  max-width: 16ch;
  margin-bottom: var(--sp-6);
  color: var(--white);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.hero__title em { font-style: italic; color: var(--rose-soft); }

.hero__lead {
  max-width: 46ch;
  margin-bottom: var(--sp-8);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--fs-lead);
  font-weight: 300;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* --- Hero alt şerit: kaydırma ipucu + koleksiyon seçici --- */
.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Koleksiyon seçici — hero arka planını değiştirir */
.hero-tabs { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); }
.hero-tab {
  position: relative;
  padding: 0 0 var(--sp-4);
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.46);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.hero-tab:hover, .hero-tab.is-active { color: var(--white); }

.hero-tab__num {
  display: block;
  margin-bottom: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--rose);
}
.hero-tab__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  white-space: nowrap;
}

/* Aktif sekmenin altındaki ilerleme çizgisi — otomatik geçişi görselleştirir */
.hero-tab__bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.hero-tab__bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-tab.is-active .hero-tab__bar::after {
  animation: hero-tab-fill var(--hero-interval, 7s) linear forwards;
}
@keyframes hero-tab-fill { to { transform: scaleX(1); } }

/* -----------------------------------------------------------------------------
   2. Tanıtım bölümü — görsel + metin + istatistik
   -------------------------------------------------------------------------- */
.intro__media { position: relative; }

/* Görselin üstüne taşan kuruluş yılı rozeti */
.intro__badge {
  position: absolute;
  right: clamp(-1rem, -1vw, 0rem);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2vw, 1.85rem) clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  text-align: center;
}
.intro__badge-year {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.intro__badge-label {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* İmza satırı — kurumsal sözün altına */
.intro__signature {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--rose-deep);
  line-height: 1.35;
}

/* -----------------------------------------------------------------------------
   3. Koleksiyon vitrin — asimetrik ızgara
   İlk kart iki satır yüksekliğinde; sağda 2×2 düzeninde dört kart. Toplam beş
   kart, kompozisyona hiyerarşi kazandırır.
   -------------------------------------------------------------------------- */
.showcase {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(190px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  min-height: 78vh;
}
.showcase > :first-child { grid-row: span 3; }   /* büyük kart üç satır kaplar */
.showcase .product-card { height: 100%; }
.showcase .product-card__media { position: absolute; inset: 0; }

/* Vitrin — tablet: büyük kart üstte tam genişlik, diğer üçü altta */
@media (max-width: 991.98px) {
  .showcase {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    min-height: 0;
  }
  .showcase > :first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .showcase .product-card:not(:first-child) { aspect-ratio: 3 / 4; }
}

/* Vitrin — mobil: tek sütun */
@media (max-width: 575.98px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase > :first-child { aspect-ratio: 4 / 3; }
  .showcase .product-card:not(:first-child) { aspect-ratio: 16 / 10; }
}

/* -----------------------------------------------------------------------------
   4. Süreç adımları
   -------------------------------------------------------------------------- */
.process { counter-reset: step; }
.process__item {
  position: relative;
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.process__item:hover { border-top-color: var(--rose); }
.process__item:hover .chip-num { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--white); }
.process__num { margin-bottom: var(--sp-5); }
.process__title { margin-bottom: var(--sp-3); font-size: var(--fs-h3); }
.process__text { margin: 0; color: var(--ink-400); font-size: var(--fs-sm); }

/* -----------------------------------------------------------------------------
   5. Rakamlar şeridi (koyu zemin)
   -------------------------------------------------------------------------- */
.figures { position: relative; overflow: hidden; }
.figures__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.13;
}
.figures__media img { width: 100%; height: 100%; object-fit: cover; }
.figures .shell { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   6. Neden biz — ikonlu özellik ızgarası
   -------------------------------------------------------------------------- */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); }

/* -----------------------------------------------------------------------------
   7. Kumaş şeridi — tek satırda dört sütunlu dikey rotatör
   Adlar tek satırda yan yana durur; üç saniyede bir hepsi aynı anda tek
   adımda yukarıdan aşağıya döner. Yan yana duran sütun sayısı ekran
   genişliğine göre 4'ten 1'e iner — fazla sütunlar CSS ile gizlenir.
   -------------------------------------------------------------------------- */
.fabric-strip {
  /* Satır yüksekliği hem pencereyi hem her öğeyi belirler; JS öteleme
     hesabını bu değere göre yapar, bu yüzden ikisi eşit olmak zorundadır. */
  --strip-line: clamp(2.6rem, 2.1rem + 1.5vw, 3.75rem);
  --strip-cols: 4;

  padding-block: clamp(2.5rem, 4vw, 4.5rem);
  border-block: 1px solid var(--line);
}

/* Rotatör solda, başlık ve kontroller sağda */
.strip__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
}

/* --- Sağ sütun: başlık ve kontroller --- */
.strip__aside { text-align: right; }

.strip__kicker {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.strip__lead {
  margin: 0 0 var(--sp-6);
  max-width: 26ch;
  margin-left: auto;          /* sağa yaslı sütunda satır sonu düzgün kalsın */
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

.strip__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
}

.strip__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.strip__arrow:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* Adım sayacı */
.strip__count {
  margin: 0 var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.strip__count [data-rotator-index] { color: var(--rose-deep); }
.strip__count-sep { opacity: 0.4; margin-inline: 3px; }

/* --- Sol sütun: pencere + konum rayı --- */
.strip__viewport { display: block; }

/* Sütunlar tek satırda; her biri kendi dikey penceresidir */
.strip__rotator {
  display: grid;
  grid-template-columns: repeat(var(--strip-cols), minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: stretch;
}

/* Tek satır yüksekliğinde pencere — taşan adlar kırpılır */
.strip__col {
  height: var(--strip-line);
  overflow: hidden;
  border-left: 1px solid var(--line);
  padding-left: clamp(0.85rem, 1.5vw, 1.35rem);
}
.strip__col:first-child { border-left-color: var(--rose-deep); }

/* Konum göstergesi — görünen adların listenin neresinde olduğunu gösterir */
.strip__rail {
  position: relative;
  height: 2px;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.strip__thumb {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 40%;
  border-radius: var(--r-pill);
  background: var(--rose-deep);
  transition: left 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
              width var(--dur) var(--ease);
}

.strip__list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Saat tıkırtısı hissi: kısa ve kararlı bir adım, ardından bekleme */
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.strip__list li {
  display: flex;
  align-items: center;
  height: var(--strip-line);
  margin: 0;
  font-family: var(--font-display);
  /* Dört ad yan yana sığmalı: "Saten Çeşitleri" gibi uzun adlar ölçüyü belirler */
  font-size: clamp(1.05rem, 0.75rem + 0.95vw, 1.85rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--ink);
}

/* --- Yan yana sütun sayısı: 4 → 3 → 2 → 1 ---
   Sütun sayısı azalınca fazla sütunlar gizlenir; JS görünen sütun sayısını
   ölçerek ray göstergesinin genişliğini buna göre ayarlar. */
@media (max-width: 1199.98px) {
  .fabric-strip { --strip-cols: 3; }
  .strip__col:nth-child(n + 4) { display: none; }
}

@media (max-width: 767.98px) {
  /* Tek sütuna iner: liste üstte, başlık ve kontroller altta */
  .fabric-strip { --strip-cols: 2; }
  .strip__col:nth-child(n + 3) { display: none; }

  .strip__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .strip__aside { text-align: left; }
  .strip__lead { margin-bottom: var(--sp-5); margin-left: 0; max-width: none; }
  .strip__controls { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
  .fabric-strip { --strip-cols: 1; }
  .strip__col:nth-child(n + 2) { display: none; }
  .strip__arrow { width: 42px; height: 42px; }
}

/*
  Tam ad listesi — doğru sırada.
  Varsayılan olarak yalnızca ekran okuyuculara açıktır; rotatörün DOM'unda
  döngü için kopyalar bulunduğundan, görünür yedek olarak bu liste kullanılır.
*/
.strip__names {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  list-style: none;
}

/*
  Hareket azaltma tercihi: dönme ve kontroller tamamen kapanır, adların
  tamamı doğru sırada tek seferde listelenir. JS de zamanlayıcıyı başlatmaz.
*/
@media (prefers-reduced-motion: reduce) {
  .strip__viewport,
  .strip__controls { display: none; }

  .strip__inner { grid-template-columns: minmax(0, 1fr); }
  .strip__aside { text-align: left; }
  .strip__lead { margin-bottom: var(--sp-5); margin-left: 0; }

  .strip__names {
    position: static;
    width: auto; height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) clamp(1rem, 2.5vw, 2.25rem);
  }
  .strip__names li {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
    color: var(--ink);
  }
}