/* ==========================================================================
   SAYFA 08 — How We Work (EN)   ·   hw- katmani

   Paylasilan desenler KOPYALANMAZ, YUKLENIR:
     hp-close / hp-close__box / hp-close__note  -> anasayfa.css
     fb-close / fb-close__actions               -> for-businesses-en.css
   Burada yalniz bu sayfaya ait olanlar tanimli.

   DIKKAT — .hp-sys__head KULLANILMADI: o sinif anasayfa.css'te degil
   consumer-projects-en.css'te yasiyor (arandi ve orada bulundu). Tek bir
   baslik ugruna baska bir SAYFANIN css'ini yuklemek yanlis olurdu.

   ACIK/KOYU RITMI (kural: "acik agirlik, pes pese koyu yok"):
     hw-hero  koyu gradient  ->  hw-rail  acik  ->  hp-close acik bolum,
     icindeki .hp-close__box koyu (--eco-gradient-deep). Iki koyu yuzey
     arasinda her zaman acik bir bolum var.
   Hero gradienti kardes sayfalardan (tp-/ts-/cp-/cf-hero) birebir alindi;
   yeni bir gecis UYDURULMADI.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · ACILIS
   -------------------------------------------------------------------------- */
.hw-hero {
  background: linear-gradient(135deg, #0D2B2E 0%, #1a3a2a 60%, #2d4a3e 100%);
  padding-block: calc(var(--eco-space-40) + var(--eco-space-8)) var(--eco-space-20);
}
.hw-hero__title {
  margin: 0;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-display-2xl);
  line-height: var(--eco-lineheight-display-2xl);
  letter-spacing: var(--eco-letterspacing-display-2xl);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-on-brand-strong);
}
.hw-hero__lede {
  margin: var(--eco-space-4) 0 0;
  max-width: 48rem;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-on-dark);
}

/* --------------------------------------------------------------------------
   02 · DORT ADIM — yatay snap carousel ("ray")

   Kurucu istegi: apple.com/macbook-neo'da "Smooth operator." bolumunun
   ALTINDAKI yan yana carousel. Onceki sticky-split tasarim begenilmedi ve
   kaldirildi (indeks + scroll-spy betigi dahil).

   APPLE'DA OLCULEN (basliktan sonraki ILK snap kabi, y=19553):
     kap   : overflow-x scroll, scroll-snap-type "x mandatory",
             scroll-padding-inline-start calc(50% - 0.5*min(1260px, 87.5%))
             -> kartlar ICERIK KOLONUNA hizalaniyor
     iz    : display grid, gap 20px, padding 0 90px (mobilde 0 24.375px)
     kart  : scroll-snap-align start, border-radius 0 (yuvarlaklik KARTTA
             degil, ustteki MEDYA panelinde), masaustu 696x583 / mobil 260x478
     medya ustte, metin ALTINDA ve sola hizali; sag altta iki dairesel pedal.

   BIZDEKI FARK — kart genisligi EsIT: Apple'in kart genisligi degisken
   (696/372/696) cunku ikinci kart dikey bir grafik tasiyor. Bizim dort
   fotografin dordu de 3:2 yatay; degisken genislik icerikten degil suslemeden
   gelirdi. Asimetri rayin kendisinden geliyor (kartlar sag kenardan tasiyor).
   -------------------------------------------------------------------------- */
.hw-rail { background: var(--eco-surface-page); padding-block: var(--eco-space-24); }

/* Kenar payi = viewport kenarindan ICERIK KOLONUNUN kenarina olan mesafe.
   1440'ta (1440-1200+80)/2 = 160px, yani kart tam kolon hizasinda baslar.
   Ayni aritmetik technical-restoration'da da kullanildi. */
.hw-rail__kap {
  --hw-kenar: calc((100vw - min(var(--container-max), 100vw) + 2 * var(--container-px)) / 2);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--hw-kenar);
  /* Cubuk gizlenir; kaydirma pedallar, tekerlek, surukleme ve klavye ile. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hw-rail__kap::-webkit-scrollbar { display: none; }
.hw-rail__kap:focus-visible { outline: var(--eco-borderwidth-thick) solid var(--eco-text-link); outline-offset: 4px; }

.hw-rail__set {
  list-style: none;
  margin: 0;
  padding-inline: var(--hw-kenar);
  display: flex;
  gap: var(--eco-space-5);          /* Apple'da olculen 20px */
  align-items: start;
}

.hw-card {
  flex: 0 0 auto;
  width: clamp(15rem, 72vw, 20rem);
  scroll-snap-align: start;
}
/* Yuvarlaklik KARTTA degil medyada — Apple'da da kartin radius'u 0. */
.hw-card__media {
  margin: 0;
  border-radius: var(--eco-radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--eco-surface-subtle);
}
.hw-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hw-card__body { padding-top: var(--eco-space-5); }
.hw-card__n {
  margin: 0 0 var(--eco-space-2);
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-md);
  line-height: var(--eco-lineheight-label-md);
  letter-spacing: var(--eco-letterspacing-label-md);
  color: var(--eco-label-text);
  font-variant-numeric: tabular-nums;
}
.hw-card__name {
  margin: 0;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-sm);
  line-height: var(--eco-lineheight-display-sm);
  letter-spacing: var(--eco-letterspacing-display-sm);
  color: var(--eco-text-primary);
}
.hw-card__desc {
  margin: var(--eco-space-4) 0 0;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-secondary);
}

/* PEDALLAR — Apple'da sag altta. Gorsel dil bizim: token yuzeyler, gölge yok. */
.hw-rail__alt { display: flex; justify-content: flex-end; margin-top: var(--eco-space-8); }
.hw-pedal {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--eco-space-12); height: var(--eco-space-12);
  margin-left: var(--eco-space-3);
  border: 0;
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-subtle);
  color: var(--eco-text-primary);
  cursor: pointer;
  transition: background-color var(--duration, .3s) var(--ease, ease),
              opacity var(--duration, .3s) var(--ease, ease);
}
.hw-pedal:hover { background: var(--eco-surface-wash-strong); }
.hw-pedal:focus-visible { outline: var(--eco-borderwidth-thick) solid var(--eco-text-link); outline-offset: 3px; }
.hw-pedal[disabled] { opacity: .35; cursor: default; }
.hw-pedal[disabled]:hover { background: var(--eco-surface-subtle); }

@media (min-width: 900px) {
  /* ~1.85 kart gorunur: 605 + 20 + kalan 495 = 1120 (kolon genisligi).
     Sonraki kartin kenardan TASMASI rayin okunur oldugunu sezdirir. */
  .hw-card { width: clamp(24rem, 42vw, 34rem); }
}

/* --------------------------------------------------------------------------
   DAR EKRAN
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hw-hero { padding-block: calc(var(--eco-space-32) + var(--eco-space-6)) var(--eco-space-16); }
  /* YALNIZ punto degisir. "lineheightmobile-*" diye bir token YOK (arandi);
     taban satir yuksekligi yuzde oldugu icin punto kuculunce kendiliginden
     olceklenir. Kardes sayfalar da boyle yapiyor. */
  .hw-hero__title { font-size: var(--eco-fontsizemobile-display-2xl); }
  .hw-rail { padding-block: var(--eco-space-16); }
  .hw-card__name { font-size: var(--eco-fontsizemobile-display-sm); }
  .hw-card__desc { font-size: var(--eco-fontsize-body); line-height: var(--eco-lineheight-body); letter-spacing: var(--eco-letterspacing-body); }
}

/* --------------------------------------------------------------------------
   AZALTILMIS HAREKET — ezecegi kurallardan SONRA gelmeli.
   Indeks bir DURUM gostergesi, animasyon degil; yalnizca gecisi kapatiyoruz,
   aktif adim isareti aynen kaliyor.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Pedal basinca yumusak kaydirma yapilmaz — betik bu tercihi okuyup
     behavior:'auto' kullanir; burada yalniz gecisler susturulur. */
  .hw-pedal { transition: none; }
}