/* ==========================================================================
   Ana sayfa — ecording Design System (stable · içerik V2.1)

   Bağlayan katmanlar (EDS MCP):
     içerik      addendum §6 "Ana sayfa akışı" · §7 metin uzunlukları · §8 CTA
                 (ana yön demo, ikincil "şirketler için seçenekler", her bölümün
                 altına buton yok) · §11 kanıt sınırları
     kurallar    gölge yok, tek çizgi · tek cam filmi · tek gradient · tek nötr
                 rampa · Montserrat adlandırır ve tüm sayılar · font-size ile
                 letter-spacing birlikte · focus 2px opak · 4.5:1
     taste       §1 imza desenler · §2 bölüm kompozisyonları · R3 genişleyen
                 paneller · R4 KPI satırı · R5b bento · R9 görsel→bölüm erimesi

   Radius merdiveni (kurucu kararı):
     kutu 20px · iç içe kutuda iç 12px · form input 8px · basılan pill
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ortak parçalar
   -------------------------------------------------------------------------- */
.hp-kicker {
  display: block;
  margin: 0 0 var(--eco-space-4);
  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);
  text-transform: uppercase;
  color: var(--eco-label-text);
}
.hp-kicker--on-dark { color: var(--eco-text-on-dark); }

.hp-h2 {
  margin: 0;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-md);
  line-height: var(--eco-lineheight-display-md);
  letter-spacing: var(--eco-letterspacing-display-md);
  color: var(--eco-text-primary);
  text-wrap: balance;
}
.hp-h2--on-dark { color: var(--eco-text-on-brand-strong); }

.hp-desc {
  margin: var(--eco-space-5) 0 0;
  max-width: 54ch;
  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);
}
.hp-desc--on-dark { color: var(--eco-text-on-dark); }

.hp-note {
  margin: var(--eco-space-4) 0 0;
  max-width: 76ch;
  font-size: var(--eco-fontsize-caption);
  line-height: var(--eco-lineheight-caption);
  letter-spacing: var(--eco-letterspacing-caption);
  color: var(--eco-text-muted);
}
.hp-note--on-dark { color: var(--eco-color-neutral-400); }

/* Üçüncül bağlantı — altçizgi + kendi oku */
/* Tertiary metin linki — ok sagdan sola takas + altcizgi silinip dolma.

   Hem GIRISTE hem CIKISTA animasyon var ve iki yon de ILERI oynar. Bu CSS ile
   yapilamiyor: gecisler tek taban duruma doner (geri sarma), keyframe'in `both`
   dolgusundan cikilamaz (zipliyor — olculdu). Bu yuzden hareketi js/main.js
   surucusu Web Animations API ile veriyor.

   SMOOTH icin kural: yalniz transform/opacity animasyonlanir. Onceki surum
   margin animasyonluyordu, o her karede layout hesaplatip takiliyordu.
   Oklar bu yuzden MUTLAK konumlu (yer kaplamaz), metin transform ile kayar,
   altcizgi scaleX ile silinir.

   Genislik sabit: padding-right sag oka yer ayirir; hover'da metin o kadar
   saga kayar, sol ok bosalan yere oturur. Layout kaymaz.

   JS yoksa (is-canli sinifi eklenmez): sade hover nudge'i kalir.

   DIKKAT: PAYLASILAN bilesen — TR ve EN ana sayfalari da kullaniyor. */
.hp-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-right: calc(1.05em + var(--eco-space-1));
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-link);
  text-decoration: none;
  transition: color .2s var(--ease-out);
}
.hp-link__t {
  position: relative;
  display: inline-block;
  will-change: transform;
}
/* Altcizgi KENDI elemani ve .hp-link'in cocugu — span'in ::after'i degil.
   Sebep: span metinle birlikte kayiyor ve yalniz metin genisligindeydi;
   cizginin OKUN altini da kapsamasi ve kaymamasi gerekiyor.
   left/right 0 -> padding-right'taki ok alanini da kapsar. */
.hp-link__u {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.12em;              /* metne yakin: onceki -.24em cok acikti */
  height: var(--eco-borderwidth-underline);
  background: currentColor;
  transform-origin: left center;
  pointer-events: none;
}
/* Oklar MUTLAK: akisa girmez, layout tetiklemez */
.hp-link::before,
.hp-link::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1.05em;
  height: 1.05em;
  margin-top: -.525em;
  background-color: currentColor;
  -webkit-mask: url('../assets/icons/arrow-right.svg') no-repeat center / contain;
          mask: url('../assets/icons/arrow-right.svg') no-repeat center / contain;
}
.hp-link::after  { right: 0; opacity: 1; }
.hp-link::before { left: 0;  opacity: 0; }

.hp-link:hover,
.hp-link:focus-visible { color: var(--eco-text-link-hover); }

/* JS baglanmadiysa eski sade davranis */
.hp-link:not(.is-canli)::after { transition: transform .2s var(--ease-out); }
.hp-link:not(.is-canli):hover::after { transform: translateX(3px); }

.hp-link--on-dark { color: var(--eco-text-on-dark); }
.hp-link--on-dark:hover,
.hp-link--on-dark:focus-visible { color: var(--eco-text-on-brand-strong); }

/* Etiket dizisi — kart başına en fazla üç (içerik §7) */
.hp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eco-space-2);
  margin: var(--eco-space-5) 0 0;
  padding: 0;
  list-style: none;
}
.hp-tags li {
  padding: var(--eco-control-pill-py-sm) var(--eco-control-pill-px-sm);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  border-radius: var(--eco-radius-full);
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-text-secondary);
}
.hp-tags--on-dark li {
  border-color: color-mix(in srgb, var(--eco-text-on-brand-strong) 12%, transparent);
  color: var(--eco-text-on-dark);
}

/* Focus asla kaldırılmaz */
.hp-page :is(a, button, summary, [tabindex]):focus-visible {
  outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
  outline-offset: var(--eco-borderwidth-hairline);
}

/* --------------------------------------------------------------------------
   1a · HERO SAHNESİ — sabit arka plan, iki fazlı scroll.

   Uzun bir sahne (.hp-stage) içinde sticky bir çerçeve (.hp-stage__pin).
   Arka plan çerçevede durduğu için scroll boyunca SABİT görünür; sahne
   bitince sticky kendiliğinden çözülür ve arka plan büyük sözle birlikte
   yukarı kayıp gider. `position: fixed` yerine sticky seçildi: bitişte
   kendiliğinden bırakması istenen son adımın ta kendisi, ayrıca
   background-attachment: fixed mobilde güvenilmez.

   Ölçüldü: body'de overflow-x:hidden varken de sticky tutuyor (pin top
   dört kaydırma noktasında da 0). Paylaşılan style.css'e dokunulmadı.

   İlerleme JS'ten iki değişkenle gelir:
     --hp-p  faz A (söz yukarı kayar + silinir, arka plan blurlanır/kararır)
     --hp-q  faz B (büyük söz belirir)
   -------------------------------------------------------------------------- */
/* Sahnenin TAMAMI is-live'a bağlı: sabitleme, yükseklik ve iki fazın üst üste
   binmesi yalnız JS bağlandığında devreye girer. Üst üste binme ancak biri
   scrub'la silinirken anlamlı; JS yoksa ikisi de opak kalır ve dev cümle
   hero'nun üstüne biner. JS'siz hâlde pin düz bir blok, söz de hero'nun
   altında normal bir bölüm olur — azaltılmış hareket dalıyla aynı davranış. */
.hp-stage { position: relative; }
.hp-stage__pin {
  overflow: hidden;
  isolation: isolate;
  background: var(--eco-surface-dark-sunken);
}
.hp-stage--live { height: 280svh; }
.hp-stage--live .hp-stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  /* minmax(0,1fr): `1fr`in alt siniri icerigin min-content'idir, yani
     BOLUNEMEYEN tek bir kelime sutunu ekrandan genis yapabilir. Hero ve
     buyuk soz AYNI hucrede durdugu icin bu, hero'yu da birlikte genisletip
     pin'in overflow'una kirptiriyordu (olculdu: 390px ekranda sutun 510px,
     hero'nun sagindan 120px kesiliyordu — TR'de, cunku oradaki en uzun
     kelime 470px'ti). Alt siniri sifirlamak bunu yapisal olarak imkansiz
     kilar; kelime secimi artik duzeni bozamaz. */
  grid-template-columns: minmax(0, 1fr);
}
.hp-stage--live .hp-stage__pin > .hp-hero,
.hp-stage--live .hp-stage__pin > .hp-stage__statement { grid-area: 1 / 1; min-width: 0; }
/* JS yoksa söz kendi bölümü gibi nefes alsın */
.hp-stage:not(.hp-stage--live) .hp-stage__statement {
  background: var(--eco-surface-dark);
  padding-block: var(--eco-space-24);
}

/* Arka planın blur ve karartması — ikisi de ilerlemeye bağlı */
.hp-stage .hp-hero__media img {
  filter: blur(calc(var(--hp-p, 0) * 14px));
  will-change: filter;
}
.hp-stage__dim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--eco-surface-dark-sunken);
  opacity: calc(var(--hp-p, 0) * 0.42);
}

/* Faz A: yukarı kayar ve kendinden önce silinir */
/* is-live: JS bağlanmadıysa scrub stilleri hiç uygulanmaz ve sayfa düz
   hero + söz olarak açılır (aksi hâlde --hp-q hiç yazılmadığı için büyük söz
   görünmez kalırdı). */
.hp-stage--live .hp-hero {
  transform: translate3d(0, calc(var(--hp-p, 0) * -16vh), 0);
  opacity: calc(1 - var(--hp-p, 0) * 1.35);
  will-change: transform, opacity;
}

/* Kelime kelime blurdan netleşme.

   Her kelimenin kendi ilerlemesi var: sahnenin --hp-q'sundan kelime sırasına
   (--i) göre kaydırılmış bir dilim. Zamanlayıcı yok — kaydırdıkça kelimeler
   sırayla netleşiyor, geri kaydırınca geri sarıyor, yani akışla aynı yönde
   çalışıyor.

     --gecikme  kelimeler arası kayma
     --sure     bir kelimenin netleşme aralığı
   Son kelime --gecikme*4 + --sure = 0,88'de tamamlanır. */
.hp-word {
  --gecikme: 0.12;
  --sure: 0.40;
  --w: clamp(0, calc((var(--hp-q, 1) - var(--i) * var(--gecikme)) / var(--sure)), 1);
  display: inline-block;
  opacity: var(--w);
  filter: blur(calc((1 - var(--w)) * 14px));
  transform: translate3d(0, calc((1 - var(--w)) * 0.14em), 0);
}

/* Faz B: büyük söz */
.hp-stage__statement {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  text-align: center;
  pointer-events: none;
}
.hp-stage--live .hp-stage__statement { will-change: transform, opacity; }
/* Tam ekran bir an: ölçeğin en büyüğü (display-3xl, 88px) bu iş için küçük
   kalıyor. Ham piksel yazmak yerine TOKEN ÇARPILIYOR — ölçek hâlâ kaynak,
   değer ondan türetiliyor. Satır yüksekliği bu boyutta sıkışır, biraz açıldı. */
.hp-statement__big {
  margin: 0;
  max-width: 14ch;
  margin-inline: auto;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: calc(var(--eco-fontsize-display-3xl) * 2);
  line-height: 1.02;
  letter-spacing: var(--eco-letterspacing-display-3xl);
  color: var(--eco-text-on-brand-strong);
}

/* --------------------------------------------------------------------------
   1 · HERO — tek karede üç iş.
   Kare 005: gün batımında beş drone silüeti; silüetler üst üçte birde durur.

     sol          söz: başlık, tanım, iki eylem
     sol alt      kanıt: markalarla ekilen tohum + akan marka şeridi
     sağ          problem: dünyadaki orman kaybı

   Sayaç bandı ve marka şeridi ayrı bölüm değildir. Tohum rakamı markaların
   kendi operasyonlarından geldiği için logoların başlığıdır ve onlarla aynı
   köşede durur; orman kaybı ise karşı köşede, çünkü o bir başarı değil bir
   problem — ikisi aynı bantta yan yana dizilirse ikisi de sayaç gibi okunur.
   -------------------------------------------------------------------------- */
/* Sahne içinde hero, medyanın KARDEŞİ ve aynı gözde ondan sonra boyanıyor.
   Kendi opak arka planı kalırsa fotoğrafı tamamen örter (scroll 0'da fotoğraf
   kaybolup ancak hero saydamlaşınca "beliriyordu" — sebebi buydu).
   Koyu taban zaten .hp-stage__pin'de. */
.hp-stage--live .hp-hero { min-height: 0; height: 100%; }
.hp-stage .hp-hero { background: transparent; }
.hp-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  /* stretch: iç kap hero yüksekliğini kaplasın — söz bloğunun ortalanacağı
     boşluk ancak böyle oluşuyor (flex-end'de kap içeriği kadar yüksekti) */
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--eco-surface-dark-sunken);
}
/* Kendi kendini klipler: görsel scale(1.18) ile 1700px'e çıkıyor ve üst
   elemanın overflow durumuna güvenmek kırılgan — azaltılmış hareket dalında
   pin overflow:visible olunca tam 130px yatay taşma yapmıştı. */
.hp-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* Alt kenardan büyütme: drone silüetleri üst üçte bire çıkar, metnin oturduğu
     alt bant boşalır. Reduced motion'da da bu kadraj kalır. */
  transform: scale(1.18);
  transform-origin: 50% 100%;
  animation: hp-drift 34s ease-in-out infinite alternate;
}
@keyframes hp-drift { from { transform: scale(1.18); } to { transform: scale(1.24); } }

/* Okunurluk perdesi — tek katman, tek eksen.

   Eğri smootherstep: iki ucunda da türevi sıfır, bu yüzden ne başladığı ne
   bittiği yerde kenar bırakır; %2,5 aralıkla örneklendiği için arada da kırık
   yok. Ölçüldü: düz zemin üstünde en büyük ikinci fark 1,0 — yani ±1 seviyelik
   nicemleme tabanı, görünür bant yok. (Kasıtlı kırıklı bir kontrol gradyanı
   aynı ölçümde 52,5 veriyor.)

   Önceki sürümdeki ikinci (soldan sağa) katman kaldırıldı: %70'te sert bitiyor
   ve fotoğrafın üstünde dikey bir kenar bırakıyordu.

   Güç, eşiği geçen en hafif ayarda tutuldu: başlığın en kötü noktası 4,80:1
   (eşik 4,5:1), eşiğin altında kalan alan %0. Daha hafifi yazıyı düşürüyor. */
.hp-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Tek düz renk, tek opaklık — gradyan değil.

     Gradyan kademeliydi (altta ~%90, üstte ~0) ama blur scroll'la açılırken
     rampası kendini belli ediyordu. Düz renkte bantlanacak bir rampa yok.

     %58 ölçerek seçildi: her bölgede 4,5:1 eşiğini geçen EN HAFİF değer.
     Bağlayıcı kısıt en alttaki kanıt hapı (düz %50'de 3,9'a düşüyordu).
     Gün batımı da kaybolmadı — üst bandın parlaklığı gradyandakinden
     (70) biraz daha yüksek: 74. */
  background: var(--eco-surface-dark-sunken);
  opacity: 0.58;
}
.hp-hero__inner {
  width: 100%;
  min-width: 0;
  display: grid;
  /* Sütun açıkça minmax(0,1fr): şerit width:max-content taşıyor ve serbest
     bırakılırsa ızgara sütununu kendi genişliğine (~5300px) büyütüyor.
     overflow:hidden bunu ekranda gizler, içerik sessizce kırpılırdı. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--eco-space-8);
  padding-block: calc(var(--header-h) + var(--eco-space-12)) var(--eco-space-10);
}
.hp-hero__col,
.hp-hero__problem,
.hp-hero__proof { min-width: 0; }
.hp-hero__col { width: min(100%, 40rem); }
.hp-hero__title {
  margin: 0;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-2xl);
  line-height: var(--eco-lineheight-display-2xl);
  letter-spacing: var(--eco-letterspacing-display-2xl);
  color: var(--eco-text-on-brand-strong);
}
.hp-hero__lede {
  margin: var(--eco-space-6) 0 0;
  max-width: 46ch;
  font-size: var(--eco-fontsize-body-xl);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  color: var(--eco-text-on-dark);
}
/* İki eylem: marka yüzeyli birincil + cam ikincil. Cam yalnız burada ve
   koyu zeminde — arkasında bulanıklaştıracak bir fotoğraf var. */
.hp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eco-space-4);
  margin-top: var(--eco-space-8);
}

/* --- Sağ alt: problem kutusu ---------------------------------------------
   Kora'nın hero'sundaki sağ alt kart gibi bir kutu, ama koyu fotoğrafın
   üstünde: EDS'in cam filmi. Sayfadaki ikinci ve son cam katman (ilki
   ikincil buton) — kural sayfa başına 2-3 diyor.

   Radius merdiveni: dış kutu 20px, içindeki görsel 12px.

   İkon yok: EDS ikon seti hiçbir asset adresinden servis edilmiyor ve sistem
   elle SVG yapıştırmayı yasaklıyor. Canlılık bunun yerine hareketten geliyor:
   rakam sayıyor, çizgi kendini çiziyor. Çizgiye oran anlamı YÜKLENMEDİ —
   543'ü bir yüzdeye çevirmek kaynağı olmayan bir istatistik uydurmak olurdu. */
.hp-hero__problem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--eco-space-5);
  align-items: center;
  padding: var(--eco-space-5);
  border-radius: var(--eco-radius-lg);
  /* Ton 01/02/03 kartlariyla ayni (kurucu): notr siyah %22 + blur(24px).
     --eco-glass-bg beyaz %7'ydi; fotograf uzerinde neredeyse hic tutmuyor,
     kart sadece saydam goruniyordu. Ayni sayfada tek cam tonu. */
  background: rgba(0, 0, 0, .22);
  border: var(--eco-borderwidth-hairline) solid var(--eco-glass-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hp-hero__problem { background: var(--eco-glass-fallback); }
}
.hp-hero__problem-media {
  margin: 0;
  width: 7rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-dark-deep);
}
.hp-hero__problem-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-hero__problem-label {
  margin: 0;
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-text-on-dark);
}
.hp-hero__problem-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--eco-space-2);
  margin: var(--eco-space-2) 0 0;
}
.hp-hero__problem-num {
  font-family: var(--eco-fontfamily-num);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-metric-lg);
  line-height: var(--eco-lineheight-metric-lg);
  letter-spacing: var(--eco-letterspacing-metric-lg);
  color: var(--eco-text-on-brand-strong);
  font-variant-numeric: tabular-nums;   /* sayarken kutu zıplamasın */
}
.hp-hero__problem-unit {
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  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);
}
.hp-hero__problem-desc {
  margin: var(--eco-space-1) 0 0;
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-text-on-dark);
}
/* Kendini çizen çizgi — süs değil, kutuya hareket veren tek öğe */
.hp-hero__problem-rule {
  display: block;
  position: relative;
  height: var(--eco-borderwidth-thick);
  margin: var(--eco-space-4) 0 var(--eco-space-3);
  border-radius: var(--eco-radius-full);
  background: var(--eco-glass-border);
  overflow: hidden;
}
.hp-hero__problem-rule::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--eco-text-on-dark);
  animation: hp-rule 1.8s cubic-bezier(.22, .8, .26, 1) .25s forwards;
}
@keyframes hp-rule { to { width: 100%; } }
.hp-hero__problem-src {
  margin: 0;
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-text-on-dark);
  opacity: .72;
}

/* --- Sol alt: marka kanıtı ----------------------------------------------- */
.hp-hero__proof { width: min(100%, 44rem); }
/* Tohum rakamı — dönen kenar ışıklı hap.
   Teknik NaturePass kartındaki canlı etiketten geliyor, ama orada iç dolgu
   OPAK olduğu için ışık 1px'e iniyor. Burada zemin fotoğraf: opak dolgu
   hero'da yüzen mat bir hap gibi dururdu. Onun yerine halka mask-composite
   ile yalnız kenarda çiziliyor, hapın içi saydam kalıyor.

   İçi bilerek cam DEĞİL: EDS sayfa başına 2-3 cam katman diyor ve hero'da
   zaten iki tane var (ikincil buton + problem kutusu). Dolgusuz hap hem
   sayıyı üçe çıkarmıyor hem ışığı öne alıyor.

   Açı animasyonu @property ile kayıtlı. Desteklenmeyen tarayıcıda var(--hp-beam)
   geçersiz olur, background tümden düşer ve geriye düz hairline kalır — kırık
   değil, sade bir hap. */
@property --hp-beam {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hp-hero__proof-line {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* İki parça da aynı kademede olduğu için tek cümle gibi okunur; boşluk da
     kelime arası kadar. Çizgi butonla aynı kalınlıkta: 2px. */
  gap: var(--eco-space-1) var(--eco-space-2);
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: var(--eco-space-4) var(--eco-space-5);
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-thick) solid var(--eco-glass-border);
}
.hp-hero__proof-line::before {
  content: '';
  position: absolute;
  inset: calc(var(--eco-borderwidth-thick) * -1);
  border-radius: inherit;
  padding: var(--eco-borderwidth-thick);
  background: conic-gradient(from var(--hp-beam),
    transparent 0deg 302deg,
    var(--eco-brand-primary) 348deg,
    transparent 360deg);
  /* Maske bir renk değil, opaklık şablonu: anahtar kelime hem daha doğru
     hem EDS ham renk denetimini yanlış yere takmıyor */
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
          mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: hp-beam 5.5s linear infinite;
  pointer-events: none;
}
@keyframes hp-beam { to { --hp-beam: 360deg; } }
/* Rakam ve etiket aynı kademe: Montserrat, büyük harf, label-lg.
   Farklı boyutta olduklarında hapın dikey padding'i iki tarafta eşit
   durmuyordu — ayrım artık boyuttan değil renkten geliyor. */
.hp-hero__proof-value,
.hp-hero__proof-label {
  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);
  text-transform: uppercase;
}
/* Kurucu kararı: rakam marka yeşiliyle ayrışıyor. EDS bu yeşili yazı rengi
   olarak yasaklıyor, gerekçesi BEYAZDA 2,11:1 olması — zemin koyu olduğu için
   o gerekçe burada geçmiyor, kontrast ölçülerek doğrulandı. Sistemin "okunan
   yeşili" (--eco-brand-secondary) ise bu zeminde ~3,3:1 ile eşiğin altında
   kalıyor, yani kuralın önerdiği alternatif burada çalışmıyor. */
.hp-hero__proof-value { color: var(--eco-brand-primary); }
.hp-hero__proof-label { color: var(--eco-text-on-dark); }
/* Etiket, kartin "Dunyada kaybedilen orman" etiketiyle ayni olcude (kurucu):
   label-md (12) -> label-sm (11). Mobil override'i yok, iki kirilimda da gecerli. */
.hp-anasayfa .hp-hero__proof-label {
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
}

/* Marka şeridi — hero'nun sol alt köşesinde sonsuz akar (1.1).
   EDS'teki logolar tek renk çizimdir; koyu fotoğrafın üstünde kaybolmasınlar
   diye filtreyle beyaza çevrilir. Marka rengi değiştirilmez — zaten tek renkli
   olan çizimin kutbu çevrilir, hepsi aynı beyaza iner.
   Akreditasyon logoları buraya girmez; onların yeri ayrı bir bölüm. */
.hp-hero__strip {
  margin-top: var(--eco-space-6);
  overflow: hidden;
  /* Iki uc de solar (kurucu). Tek tarafli maskede logolar sol kenarda
     sert kesiliyordu: "sola yaklasanlar bir anda kayboluyor". Pay iki
     tarafta esit — yuzde degil token, cunku serit genisligi kirilimla
     degisiyor ve oransal pay masaustunde gereksiz buyuyordu. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, black var(--eco-space-12),
    black calc(100% - var(--eco-space-12)), transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0, black var(--eco-space-12),
    black calc(100% - var(--eco-space-12)), transparent 100%);
}
.hp-hero__track {
  display: flex;
  width: max-content;
  animation: hp-marquee 48s linear infinite;
}
.hp-hero__strip:hover .hp-hero__track,
.hp-hero__strip:focus-within .hp-hero__track { animation-play-state: paused; }
.hp-hero__set {
  display: flex;
  align-items: center;
  gap: var(--eco-space-12);
  margin: 0;
  padding: 0 var(--eco-space-12) 0 0;
  list-style: none;
}
.hp-hero__set li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;          /* logolar farklı oranlarda: ortak optik kutu */
  flex: none;
}
.hp-hero__set img {
  max-height: 100%;
  max-width: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .5;
  transition: opacity .2s ease;
}
.hp-hero__set li:hover img { opacity: .8; }


/* --------------------------------------------------------------------------
   2 · AKREDİTASYON ŞERİDİ — açık, sessiz; logolar iddia taşımaz
   -------------------------------------------------------------------------- */
.hp-trust { background: var(--eco-surface-base); padding-block: var(--eco-space-10); }
.hp-trust__inner { display: grid; gap: var(--eco-space-6); align-items: center; }
.hp-trust__label {
  margin: 0;
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-text-muted);
}
.hp-trust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eco-space-8) var(--eco-space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Logolar farklı oranlarda: sabit yükseklik yerine ortak optik kutu */
.hp-trust__logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}
.hp-trust__logos img {
  max-height: 100%;
  max-width: 128px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .82;
  transition: opacity .2s ease;
}
.hp-trust__logos li:hover img { opacity: 1; }


/* --------------------------------------------------------------------------
   3 · ÇALIŞMA SEÇENEKLERİ — yatay akordeon (R3).
   Etkin panel genişler, diğerleri başlık + etiketle durur. Mobilde hepsi açık.
   -------------------------------------------------------------------------- */
.hp-work { background: var(--eco-surface-page); padding-block: var(--eco-space-24); }
.hp-work__head { max-width: 46rem; margin-bottom: var(--eco-space-12); }
.hp-work__rail { display: grid; gap: var(--eco-space-4); }

/* Klasor kartlari — referans: cards-folder.framer.website
   Olculen davranis: kartin ON YUZU (sekme + numara) hover'da 100px ASAGI
   kayiyor, arkadaki gorsel 30px YUKARI gidiyor (ters parallaks), ~280ms
   yavaslayarak. Baslik ve aciklama YERINDE kalir — sadece on yuz kayar. */
.hp-folder {
  display: block;   /* anasayfada kart bir <a>: satir ici varsayilan kutuyu bozar */
  /* Gorsel seridi kartin %40'i. Deger CEBE gore hesaplanir, cep de alt paydan
     12px kisa oldugu icin %41 yazilir -> kart uzerinde tam %40 eder. */
  --on-ust  : 41%;
  --sekme-h : var(--eco-space-8);    /* referansta 32px */
  --sekme-w : 54%;                   /* 150/280 */
  /* Kayma miktari, numaranin gorunur kalmasiyla dengeli secildi:
     metinler bir kademe buyuyunce govde 104 -> 140px oldu; 128px kaymada
     panelin gorunen yuksekligi 150px'e inip numara basligin uzerine biniyordu
     (-11px). 96px'te panel 182px kalir, numara kuculmus haliyle sigar. */
  --kaydir  : var(--eco-space-24);
  --kivrim  : var(--eco-radius-md);

  /* KLASOR YUZEYI — dolu <-> cam gecisi buradan yapilir:
     CAM  : rgba(16, 42, 27, 0.80) + --on-blur dolu
     DOLU : var(--eco-surface-dark) + --on-blur: none
     0.80 olculen esik: daha saydami 2. kartta (gun batimi) metni dusuruyor. */
  --on-dolgu : var(--eco-surface-dark);
  --on-blur  : none;
  /* Cam denendi, geri alindi: kayan elemanda backdrop-filter her karede
     arkaplani yeniden ornekledigi icin hover hareketi puruzsuz olmuyor.
     Cam istenirse: rgba(16, 42, 27, 0.80) + saturate(1.8) blur(20px) */
  --yan     : var(--eco-space-3);    /* on yuzun kart kenarindan icerisi */

  position: relative;
  /* 7/10: numara TAM BOYUNDA kalabilsin diye kart uzatildi.
     Olculen kisit: numaranin alti panel ustunden +42px, govde 140px; hover'da
     gorunen panel 182px oldugu icin pay sifira iniyordu. 7/10'da gorunen panel
     ~203px olur, ~21px pay kalir. Gorsel serit oransal: %40 degismez. */
  aspect-ratio: 7 / 10;
  border-radius: var(--eco-radius-lg);
  overflow: hidden;
  background: var(--eco-surface-subtle);
  isolation: isolate;
}

.hp-folder__media { position: absolute; inset: 0; overflow: hidden; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hp-folder { --on-dolgu: var(--eco-surface-dark); }
}

/* Gorsel kutudan --eco-space-8 kadar UZUN: hover'da o kadar yukari kayiyor,
   yoksa medya kutusunun altinda bos serit kalip kartin alt kosesinden sizyor. */
.hp-folder__media img {
  width: 100%;
  height: calc(100% + var(--eco-space-8));
  object-fit: cover;
  display: block;
  transition: transform .28s var(--ease-out);
}
.hp-folder:hover .hp-folder__media img,
.hp-folder:focus-visible .hp-folder__media img {
  transform: translateY(calc(var(--eco-space-8) * -1));
}

/* On yuz: kayan katman. Alttan --kaydir kadar uzun ki kayinca alt kenar bosalmasin. */
/* Cep: renk kutusunu sol/sag/ALT'tan iceri alir ve kayarken kirpar.
   Referansta da kutu kartin alt kenarina yapisik degil. */
.hp-folder__pocket {
  position: absolute;
  inset: 0 var(--yan) var(--yan);
  overflow: hidden;
  border-radius: 0 0 var(--eco-radius-md) var(--eco-radius-md);
}

.hp-folder__front {
  position: absolute;
  left: 0; right: 0;
  top: var(--on-ust);
  bottom: calc(var(--kaydir) * -1);
  background: var(--on-dolgu);
  -webkit-backdrop-filter: var(--on-blur);
  backdrop-filter: var(--on-blur);
  border-radius: 0 var(--eco-radius-md) 0 0;
  transition: transform .28s var(--ease-out);
}
.hp-folder:hover .hp-folder__front,
.hp-folder:focus-visible .hp-folder__front { transform: translateY(var(--kaydir)); }

/* Yay hissi — referanstan kare kare olculdu: hedefi %9.5 asip geri oturuyor,
   kalici yerlesme 860ms. Duz yavaslama bu "sekme"yi vermiyor.
   linear() desteklenmeyen tarayicida ustteki .28s ease-out gecerli kalir;
   custom property icine konsa gecersiz deger sessizce `ease`e duserdi,
   o yuzden @supports ile korunuyor. */
@supports (transition-timing-function: linear(0, 1)) {
  .hp-folder__front,
  .hp-folder__media img {
    transition-duration: 0.86s;
    transition-timing-function: linear(0 0%, 0.0715 4.2%, 0.1921 8.3%, 0.381 12.5%, 0.578 16.7%, 0.7485 20.8%, 0.8865 25%, 0.9853 29.2%, 1.0502 33.3%, 1.0837 37.5%, 1.0945 41.7%, 1.0894 45.8%, 1.0754 50%, 1.0573 54.2%, 1.0391 58.3%, 1.0228 62.5%, 1.01 66.7%, 1.0008 70.8%, 0.9949 75%, 0.9919 79.2%, 0.9911 83.3%, 0.9916 87.5%, 0.993 91.7%, 0.9947 95.8%, 1 100%);
  }
}

/* Sekme: on yuzun ustunde duran blok. Sagindaki icbukey kivrim ::after ile. */
.hp-folder__tab {
  position: absolute;
  left: 0; top: calc(var(--sekme-h) * -1);
  width: var(--sekme-w); height: var(--sekme-h);
  background: var(--on-dolgu);
  -webkit-backdrop-filter: var(--on-blur);
  backdrop-filter: var(--on-blur);
  border-radius: var(--eco-radius-md) var(--eco-radius-md) 0 0;
}
.hp-folder__tab::after {
  content: '';
  position: absolute;
  left: 100%; bottom: 0;
  width: var(--kivrim); height: var(--kivrim);
  background: var(--on-dolgu);
  -webkit-backdrop-filter: var(--on-blur);
  backdrop-filter: var(--on-blur);
  -webkit-mask: radial-gradient(circle at 100% 0, transparent calc(var(--kivrim) - 1px), #000 var(--kivrim));
  mask: radial-gradient(circle at 100% 0, transparent calc(var(--kivrim) - 1px), #000 var(--kivrim));
}

/* Numara on yuzle birlikte kayar */
.hp-folder__n {
  position: absolute;
  top: calc(var(--sekme-h) * -1 + var(--eco-space-5));
  left: var(--eco-space-5);
  font-family: var(--eco-fontfamily-num);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-lg);
  line-height: var(--eco-lineheight-display-lg);
  /* Rakam: Montserrat'ta tracking yok. display-* basliklar icin oldugundan
     token sifirlanamaz, burada kullanim yerinde sifirlaniyor. */
  letter-spacing: 0;
  color: var(--eco-text-on-dark);
}

/* Ok — .hp-link kalibiyla ayni: metin glifi, elle SVG yok.
   Hedef sayfalar eklenince <a> ile baglanacak. */
.hp-folder__ok {
  position: absolute;
  top: var(--eco-space-5);
  right: var(--eco-space-5);
  font-size: var(--eco-fontsize-body-lg);
  line-height: 1;
  color: var(--eco-text-on-dark);
  transition: transform .28s var(--ease-out);
}
.hp-folder__ok::before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask: url('../assets/icons/arrow-right.svg') no-repeat center / contain;
          mask: url('../assets/icons/arrow-right.svg') no-repeat center / contain;
}
.hp-folder:hover .hp-folder__ok { transform: translateX(3px); }

/* Govde SABIT: referansta da baslik hover'da yerinden oynamiyor */
.hp-folder__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--eco-space-6);
  z-index: 1;
}
.hp-folder__title {
  margin: 0;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-body-xl);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  color: var(--eco-text-on-dark);
  text-wrap: balance;
}
.hp-folder__desc {
  margin: var(--eco-space-2) 0 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-on-dark);
  opacity: .72;
}

/* KLASOR KARTI — CAM VARYANTI (kurucu, anasayfa).
   Taban kart duruyor: for-businesses'teki #ways-to-partner onu acik renkli
   bir varyantla kullaniyor ve hover'da kayan on yuze guveniyor, bu yuzden
   degisiklik VARYANTA kilitli.
   Neler degisiyor:
   1) On yuz CAM. Opaklik .80, dosyanin basindaki olculmus esik: daha
      saydami 2. kartta (gun batimi) metni dusuruyor.
   2) On yuz KAYMIYOR ve yuksekligini ICERIGI veriyor. Taban kartta cam
      bir kez denenip geri alinmisti, cunku kayan elemanda backdrop-filter
      her karede arkaplani yeniden ornekleyip hareketi purüzlendiriyor —
      kayma kalkinca engel de kalkti.
   3) Numara ve ok, sekmenin icinden alinip BASLIGIN USTUNE tek satira
      geldi; sekme artik bos bir siluet, klasor bicimini o tasiyor. */
/* Cam DEGISKENDEN veriliyor: sekme ve sekmenin ::after kivrimi de ayni
   --on-dolgu/--on-blur ciftini kullaniyor, dogrudan .hp-folder__front'a
   yazilsaydi klasorun ust siluetiyle govdesi farkli yuzeyler olurdu
   (olculdu: sekme tam opak #102A1B kalmisti). */
.hp-folder--cam {
  /* Ton, our-story'deki .ab-pano__k kartlarindan (kurucu): notr siyah
     %22 + blur(10px). Oradaki gerekce de aynisiydi — beyaz cam fotografa
     gomuluyor, koyu ton buzlu cam etkisini koruyup arkayi bulanik
     birakiyor. */
  --on-dolgu : rgba(0, 0, 0, .22);
  --on-blur  : blur(24px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hp-folder--cam { --on-dolgu: var(--eco-surface-dark); }
}
/* Sekme bu varyantta YOK (kurucu): klasor cikintisi kalkti, panel duz bir
   kart. Taban karttaki ust-sol koseyi sekme ortuyordu, bu yuzden orada
   yarıcap verilmemisti; burada iki ust kose de yuvarlaniyor. */
.hp-folder--cam .hp-folder__front {
  top: auto; bottom: 0; transition: none;
  border-radius: var(--eco-radius-md) var(--eco-radius-md) 0 0;
}
.hp-folder--cam:hover .hp-folder__front,
.hp-folder--cam:focus-visible .hp-folder__front { transform: none; }
.hp-folder--cam .hp-folder__body {
  position: static;
  padding: var(--eco-space-6);
}
.hp-folder--cam .hp-folder__ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--eco-space-4);
  margin-bottom: var(--eco-space-3);
}
.hp-folder--cam .hp-folder__n,
.hp-folder--cam .hp-folder__ok { position: static; }

/* --------------------------------------------------------------------------
   4 · UYGULAMA ÖRNEKLERİ — sonsuz yatay şerit (1.1).
   Marka görselleri örnek uygulamadır; iş birliği/kampanya iddiası taşımaz.
   -------------------------------------------------------------------------- */
/* Ust padding olcerek secildi: yayin ust kartlari bolum kenarinda
   kesiliyordu (96px'te 4 kart, en fazla 77px). Kesilmeyi sifirlayan
   deger 176px; token merdiveni 160px'te (space-40) bitiyor ve orada
   hala 1 kart 13px kesiliyor. Ham piksel yerine tokenden turetildi. */
.hp-apps {
  background: var(--eco-surface-base);
  padding-block: calc(var(--eco-space-40) + var(--eco-space-4)) var(--eco-space-20);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   TURKCE ANASAYFA — yatay marka serigi.
   EN anasayfada bu bolum once yay carousel'i, sonra .hp-chain oldu
   (yay bileseni: docs/components/arc-carousel.md), ama Turkce
   sayfa hala bu markup'i kullaniyor. Kurallar oradan silinince TR'deki
   gorseller stilsiz kalip tam genislikte alt alta diziliyordu. TR cevrilene
   kadar bu kurallar durur.
   -------------------------------------------------------------------------- */
.hp-apps__head { display: grid; gap: var(--eco-space-4); margin-bottom: var(--eco-space-12); }
.hp-apps__strip {
  margin-top: var(--eco-space-4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
          mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.hp-apps__track {
  display: flex;
  width: max-content;
  animation: hp-marquee 64s linear infinite;
}
.hp-apps__strip:hover .hp-apps__track,
.hp-apps__strip:focus-within .hp-apps__track { animation-play-state: paused; }
.hp-apps__set { display: flex; gap: var(--eco-space-4); padding-right: var(--eco-space-4); }
.hp-apps__item {
  flex: none;
  width: 22rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-subtle);
}
.hp-apps__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-apps__item--portrait { width: 15rem; aspect-ratio: 3 / 4; }

@keyframes hp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   4b · MARKA İŞ BİRLİĞİ ÖRNEĞİ — anlatım kuralları §6 akış maddesi 3.
   Kanıt iddianın yanında durur: mekanizma + gerçek hikâyeye bağlantı.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5 · YÖNTEM — asimetrik ikili: biri koyu, biri açık; farklı yükseklikte
   -------------------------------------------------------------------------- */
.hp-method { background: var(--eco-surface-page); padding-block: var(--eco-space-4) var(--eco-space-24); }
.hp-method__head { max-width: 42rem; margin-bottom: var(--eco-space-12); }
.hp-method__grid { display: grid; gap: var(--eco-space-6); align-items: start; }

.hp-card {
  display: flex;
  flex-direction: column;
  padding: var(--eco-space-8);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-base);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.hp-card--dark {
  background: var(--eco-surface-dark);
  border-color: color-mix(in srgb, var(--eco-text-on-brand-strong) 12%, transparent);
}
/* İç içe kutu: dış 20px, iç 12px */
.hp-card__media {
  order: -1;
  margin-bottom: var(--eco-space-8);
  overflow: hidden;
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-subtle);
}
.hp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-card--tall .hp-card__media { aspect-ratio: 4 / 3; }
.hp-card--short .hp-card__media { aspect-ratio: 16 / 10; }
.hp-card__title {
  margin: 0;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h2);
  line-height: var(--eco-lineheight-h2);
  letter-spacing: var(--eco-letterspacing-h2);
  color: var(--eco-text-primary);
  text-wrap: balance;
}
.hp-card--dark .hp-card__title { color: var(--eco-text-on-brand-strong); }
.hp-card__desc {
  margin: var(--eco-space-4) 0 var(--eco-space-6);
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}
.hp-card--dark .hp-card__desc { color: var(--eco-text-on-dark); }
.hp-card__foot { margin-top: auto; }

/* --------------------------------------------------------------------------
   6 · İZLEME — kare koyu banda eriyor (R9); içerik geçiş bandının altında
   -------------------------------------------------------------------------- */
.hp-watch { background: var(--eco-surface-dark); }
.hp-watch__media {
  position: relative;
  height: clamp(320px, 42vw, 560px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%);
}
.hp-watch__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hp-watch__body { padding-block: var(--eco-space-4) var(--eco-space-24); }
.hp-watch__grid { display: grid; gap: var(--eco-space-10); align-items: start; }
.hp-watch__aside {
  overflow: hidden;
  border-radius: var(--eco-radius-lg);
  border: var(--eco-borderwidth-hairline) solid color-mix(in srgb, var(--eco-text-on-brand-strong) 12%, transparent);
  background: var(--eco-surface-dark-raised);
}
.hp-watch__aside img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.hp-watch__caption {
  margin: 0;
  padding: var(--eco-space-4) var(--eco-space-5);
  font-size: var(--eco-fontsize-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  letter-spacing: var(--eco-letterspacing-body-sm);
  color: var(--eco-text-on-dark);
}


/* ==========================================================================
   VAKA CALISMALARI — zincir carousel (.hp-chain)

   Referans olculdu (testimonialchain.framer.website @1440x900):
     merkez kart 811x586 · ic foto paneli 312x554
     yan kademeler 131x382 -> 81x247 -> 48x158
     hepsi y=431'de dikey ortali, merkez viewport ortasinda
     adim ~2.6s · gecis ~1.2s · genislikler hedefe ALTTAN yaklasiyor -> ease-out
   Yandakiler merkezin olceklenmis kopyasi DEGIL (merkez yatay kart, yanlar
   dikey serit, en-boy oranlari farkli) -> her kademenin kendi olcusu var.

   Arka plan: referansta hazir bulanik PNG. Bizde gorsel slayta gore degistigi
   icin aktif gorselin kopyasi filter: blur() ile bulaniklasir.
   backdrop-filter DEGIL — donusturulmus ata backdrop-root'u kirar.

   Golge YOK: style.css'te --shadow-xs..lg dorttu de 'none', anasayfa.css'te
   hic box-shadow yok. Ayrisma bulanik zemin + hairline ile saglanir.
   Yaricap referansta 42.8px; EDS merdiveni --eco-radius-lg (20px) ile bitiyor.
   ========================================================================== */
.hp-chain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--eco-space-24);
  background: var(--eco-surface-page);
}
.hp-chain__bg { position: absolute; inset: calc(var(--eco-space-16) * -1); z-index: -1; }
.hp-chain__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(64px) saturate(1.25);
  opacity: .5;
  transition: opacity .6s var(--ease-out);
}
.hp-chain__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--eco-surface-page), transparent 28%,
                              transparent 72%, var(--eco-surface-page));
}
.hp-chain__head { text-align: center; max-width: 56ch; margin-inline: auto; }
.hp-chain__head .hp-desc { margin-inline: auto; }
.hp-chain__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--eco-space-4) var(--eco-space-8);
  margin-top: var(--eco-space-6);
}

.hp-chain__stage { position: relative; height: 38rem; margin-top: var(--eco-space-12); }
.hp-chain__track { list-style: none; margin: 0; padding: 0; }
/* JS yalniz su dort ucunu yazar: olcu, yatay kayma, gorunurluk */
.hp-chain__item {
  position: absolute;
  top: 50%; left: 50%;
  --w: 8.2rem; --h: 23.9rem; --x: 0rem; --o: 1;
  width: var(--w); height: var(--h);
  transform: translate(-50%, -50%) translateX(var(--x));
  opacity: var(--o);
  transition: width 1.2s var(--ease-out), height 1.2s var(--ease-out),
              transform 1.2s var(--ease-out), opacity 1.2s var(--ease-out);
}
.hp-chain__card {
  position: relative;
  display: flex; align-items: stretch;
  width: 100%; height: 100%;
  /* Gorselin karta payi: referansta olculdu -- ic panel 312x554, kart 811x586,
     yani ust/alt (586-554)/2 = 16 ve sag 1126-1110 = 16 -> --eco-space-4.
     Yan kartlarda da ayni pay kalir; orada gorsel kalin beyaz cerceveli durur. */
  padding: var(--eco-space-4);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-base);
  overflow: hidden;
}
/* Metin kart buyurken YENIDEN SARMAMALI. Referans olculdu: oradaki metin
   genisligi 0 ile 367 arasinda gidip geliyor, hicbir ARA degere ugramiyor --
   yani akista degil, sabit genislikte duruyor ve yalnizca opacity ile
   beliriyor. Bizde govde flex ile genisleyip daraldigi icin satirlar tek tek
   yeniden diziliyordu ("pitir pitir"). Cozum: akistan cikar, genisligi sabitle.
   467px = 811 (kart) - 32 (kart paylari) - 312 (medya). */
.hp-chain__body {
  position: absolute;
  z-index: 1;                    /* metin gorselin USTUNDE: kesilmesin */
  top: var(--eco-space-4);
  bottom: var(--eco-space-4);
  left: var(--eco-space-4);
  width: 29.19rem;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: var(--eco-space-4) var(--eco-space-6);
  opacity: 1;
  /* Govde artik blok halinde solmuyor; ic ogeler tek tek giriyor (asagida). */
  transition: opacity .25s var(--ease-out);
}
.hp-chain__item[data-aktif="hayir"] .hp-chain__body {
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out);   /* cikarken hizli, gecikmesiz */
}
/* Yan kartlar tiklanabilir: tiklayinca ortaya gelirler */
.hp-chain__item[data-aktif="hayir"] { cursor: pointer; }
/* Referans yeniden olculdu: yan kartlarda cerceve 8px, merkez kartin gorsel
   payi 16px. Yani ana karta dokunmadan yalniz yanlar yariya iner.
   Kart olculeri: 1. kademe 148x399, 2. kademe 97x263 (her biri ~0.66'si). */
.hp-chain__item[data-aktif="hayir"] .hp-chain__card { padding: var(--eco-space-2); }
.hp-chain__item[data-kademe="2"] .hp-chain__card { border-radius: var(--eco-radius-md); }
.hp-chain__item[data-kademe="2"] .hp-chain__media { border-radius: var(--eco-radius-sm); }
/* Kart ortaya gelip buyurken sol sutun tek tek girer: ease-in, 90ms aralikla.
   Sonuncusu (~0.96s) kart yerine oturmadan (~1.05s) hemen once tamamlanir.
   `both` sayesinde gecikme boyunca baslangic durumunda (gorunmez) beklerler. */
@keyframes hp-chain-gir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.hp-chain__item[data-aktif="evet"] .hp-chain__body > * {
  animation: hp-chain-gir .5s ease-in both;
}
.hp-chain__item[data-aktif="evet"] .hp-chain__body > *:nth-child(1) { animation-delay: .10s; }
.hp-chain__item[data-aktif="evet"] .hp-chain__body > *:nth-child(2) { animation-delay: .19s; }
.hp-chain__item[data-aktif="evet"] .hp-chain__body > *:nth-child(3) { animation-delay: .28s; }
.hp-chain__item[data-aktif="evet"] .hp-chain__body > *:nth-child(4) { animation-delay: .37s; }
.hp-chain__item[data-aktif="evet"] .hp-chain__body > *:nth-child(5) { animation-delay: .46s; }

.hp-chain__eyebrow {
  margin: 0;
  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);
  text-transform: uppercase;
  color: var(--eco-text-secondary);
  white-space: nowrap;
}
.hp-chain__metric { display: flex; align-items: baseline; gap: var(--eco-space-2); margin: var(--eco-space-4) 0 0; }
.hp-chain__num {
  font-family: var(--eco-fontfamily-num);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-metric-xl);
  line-height: var(--eco-lineheight-metric-xl);
  letter-spacing: 0;              /* Montserrat rakamda tracking yok */
  color: var(--eco-text-primary);
}
.hp-chain__unit { font-size: var(--eco-fontsize-h5); color: var(--eco-text-secondary); }
/* Karti dolduran asil oge alinti: referansta 32px olculdu, ladder'da en
   yakin kademe h2 (30px, lh %122 — referansin %124'u ile ayni yerde). */
.hp-chain__quote {
  margin: var(--eco-space-5) 0 0;
  font-size: var(--eco-fontsize-h2);
  line-height: var(--eco-lineheight-h2);
  letter-spacing: var(--eco-letterspacing-h2);
  color: var(--eco-text-primary);
  text-wrap: pretty;
}
.hp-chain__by {
  margin: var(--eco-space-4) 0 0;
  padding-left: var(--eco-space-3);
  border-left: var(--eco-borderwidth-thick) solid var(--eco-border-line);
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  color: var(--eco-text-secondary);
}
.hp-chain__body .hp-link { margin-top: var(--eco-space-6); }
/* Medya AKISTA DEGIL: flex cocugu oldugunda kart buyurken yatayda kayiyor ve
   mutlak konumlu metnin ustune biniyordu (olculdu: 93 karede cakisma, en kotu
   -467px). Mutlak konumda `inset` padding kutusuna gore cozuldugu icin
   8/16px cerceveler aynen korunur. */
.hp-chain__media {
  position: absolute;
  z-index: 0;
  inset: var(--eco-space-2);
  overflow: hidden;
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-subtle);
}
/* Aktif kartta gorsel saga yaslanmis 312px panel; pasifte karti doldurur */
.hp-chain__item[data-aktif="evet"] .hp-chain__media {
  inset: var(--eco-space-4) var(--eco-space-4) var(--eco-space-4) auto;
  width: 19.5rem;
}
.hp-chain__media img:not(.hp-chain__logo) { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Marka logosu gorselin uzerinde. Referans olculdu: panel 312x554, logo 131x41,
   alttan 29px, yatayda ortali, arkasinda kutu yok -- okunurlugu alttan yukari
   koyu gradient sagliyor. Logolar tek renk cizim; hero seridindeki ev
   recetesiyle beyaza cevrilir. Yan kartlarda logo YOK (referansta da yok). */
.hp-chain__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(11, 33, 21, .62), rgba(11, 33, 21, 0));
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.hp-chain__logo {
  position: absolute;
  left: 50%;
  bottom: var(--eco-space-7);
  z-index: 2;
  width: auto;
  max-width: 80%;
  height: var(--eco-space-10);
  object-fit: contain;
  transform: translateX(-50%);
  filter: brightness(0) invert(1);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.hp-chain__item[data-aktif="evet"] .hp-chain__media::after,
.hp-chain__item[data-aktif="evet"] .hp-chain__logo { opacity: 1; }

.hp-chain__dots {
  display: flex; justify-content: center; align-items: center;
  gap: var(--eco-space-2);
  margin-top: var(--eco-space-10);
}
.hp-chain__dot {
  position: relative;
  width: var(--eco-space-2); height: var(--eco-space-2);
  padding: 0; border: 0;
  border-radius: var(--eco-radius-full);
  background: var(--eco-border-line);
  overflow: hidden;
  cursor: pointer;
  transition: width .5s var(--ease-out), background-color .5s var(--ease-out);
}
/* Aktif kapsul bos baslar, sure boyunca dolar (ilerleme JS'te rAF ile yazilir,
   toolsRotator'daki .tool-item__progress ile ayni kalip). */
/* Dolan cubugun ONDEKI ucu da yuvarlak (kurucu: "hep"). Ray'in kendi
   yarıcapi ve overflow'u yalniz SOL ucu kirpiyordu; dolgunun sag ucu
   kare kaliyordu (olculdu: dolgu yarıcapi 0). */
.hp-chain__dot i {
  display: block; width: 0; height: 100%;
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-brand-strong);
}
.hp-chain__dot[aria-current="true"] { width: var(--eco-space-10); }
.hp-chain__dot:focus-visible {
  outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
  outline-offset: 1px;
}


/* --------------------------------------------------------------------------
   7 · SİSTEMLER — bento (R5b): farklı boyutta hücreler, iç içe radius
   -------------------------------------------------------------------------- */
.hp-sys { background: var(--eco-surface-base); padding-block: var(--eco-space-24); }
.hp-sys__head { max-width: 46rem; margin-bottom: var(--eco-space-12); }
/* Hücreler satır yüksekliğine esnemez, içeriğine göre boylanır — bento ritmi
   tam da eşit olmayan yüksekliklerden gelir */
.hp-bento { display: grid; gap: var(--eco-space-4); align-items: start; }
.hp-cell {
  display: flex;
  flex-direction: column;
  padding: var(--eco-space-8);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-base);
}
.hp-cell--tint { background: var(--eco-surface-page); }
.hp-cell__media {
  margin: 0 0 var(--eco-space-6);
  overflow: hidden;
  border-radius: var(--eco-radius-md);   /* iç içe: dış 20 / iç 12 */
  background: var(--eco-surface-subtle);
}
.hp-cell__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
/* Dar hücrede kare daha uzun, geniş kapanış hücresinde bant gibi */
.hp-cell--tint .hp-cell__media img { aspect-ratio: 4 / 3; }
.hp-cell--band .hp-cell__media img { aspect-ratio: 21 / 9; }
.hp-cell__name {
  margin: 0;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h4);
  line-height: var(--eco-lineheight-h4);
  letter-spacing: var(--eco-letterspacing-h4);
  color: var(--eco-text-primary);
}
.hp-cell__lead {
  margin: var(--eco-space-3) 0 0;
  font-weight: var(--eco-fontweight-medium);
  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-primary);
}
.hp-cell__desc {
  margin: var(--eco-space-3) 0 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}
.hp-cell__foot { margin-top: auto; padding-top: var(--eco-space-6); }

/* --------------------------------------------------------------------------
   ADIM PANELLERI — referans: stepscard.framer.website
   Olculen: dis kabuk 1136x400 rgb(39,39,39) r20 pad10 gap10; paneller
   rgb(26,26,26) r20 h380 pad20, aktif 540px / pasif 278px; genisleme %99'a
   200ms, yerlesme 334ms, asma yalniz %1.5 -> YAY YOK, duz yavaslama.
   Gorsel her panelde durur (opacity 1), panelin solundan 280px iceride;
   dar panelde kirpilir, panel genisleyince ortaya cikar — fade yok.
   Sapma: referansta numara neon yesil; bizde marka yesili yalniz buton
   yuzeyidir, metin rengi olarak kullanilmaz -> koyu zemin metin rengi.
   .hp-cell / .hp-bento kurallari TR sayfasi icin DURUYOR, silinmedi.
   -------------------------------------------------------------------------- */
.hp-steps {
  display: grid;
  gap: var(--eco-space-3);
  padding: var(--eco-space-3);
  margin-top: var(--eco-space-10);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-dark-raised);
}

.hp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: var(--eco-space-5);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-dark);
  overflow: hidden;
  cursor: pointer;
}
/* Hover'da KOYULASIR. Onceki hal dark-raised idi; o da kabugun rengi
   oldugu icin hover edilen kart kabukla ayni tona dusup karisiyordu. */
.hp-step:hover, .hp-step:focus-within { background: var(--eco-surface-dark-deep); }

.hp-step__n {
  position: absolute;
  top: var(--eco-space-5);
  left: var(--eco-space-5);
  font-family: var(--eco-fontfamily-num);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-label-lg);
  line-height: var(--eco-lineheight-label-lg);
  letter-spacing: 0;
  color: var(--eco-text-on-dark);
  opacity: .6;
}

/* Taban (mobil): hover yok, akordeon yok -> gorsel akista, ustte.
   Mutlak konum yalniz >=900px'te; oncesinde 326px'lik panelde 256px soldan
   baslayan gorsel kirpilip anlamsiz bir dilime donuyordu. */
.hp-step__media {
  margin: 0 0 var(--eco-space-5);
  aspect-ratio: 16 / 9;
  border-radius: var(--eco-radius-md);
  overflow: hidden;
  background: var(--eco-surface-dark-deep);
}
.hp-step__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hp-step__body { position: relative; z-index: 1; }
.hp-step__name {
  margin: 0;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-body-xl);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  color: var(--eco-text-on-dark);
}
.hp-step__desc {
  margin: var(--eco-space-2) 0 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-on-dark);
  opacity: .72;
}
/* Ok — .hp-folder__ok ile ayni kalip: metin glifi, elle SVG yok.
   Hedef sayfalar hazir olunca <a> ile baglanacak. */
/* Ok AKISTA, metnin altinda: mutlak sag-ustteyken medyanin kosesine
   biniyordu. Daire isaret + hover'da dolma, kartin tiklanabilirligini anlatir. */
.hp-step__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--eco-space-8);
  height: var(--eco-space-8);
  margin-top: var(--eco-space-4);
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .28);
  font-size: var(--eco-fontsize-body-lg);
  line-height: 1;
  color: var(--eco-text-on-dark);
  text-decoration: none;
  transition: transform .28s var(--ease-out), background-color .28s var(--ease-out),
              border-color .28s var(--ease-out), color .28s var(--ease-out);
}
.hp-step__ok::before {
  content: '';
  display: block;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: url('../assets/icons/arrow-right.svg') no-repeat center / contain;
          mask: url('../assets/icons/arrow-right.svg') no-repeat center / contain;
}
.hp-step:hover .hp-step__ok,
.hp-step:focus-within .hp-step__ok {
  transform: translateX(3px);
  background: var(--eco-surface-brand);
  border-color: var(--eco-surface-brand);
  color: var(--eco-text-on-brand);
}

/* Ucluden ayri, tam genislikte destek karti — numarasiz (4. adim degil) */
.hp-steps__row { display: grid; gap: var(--eco-space-3); }
.hp-step--wide { min-height: 0; justify-content: flex-start; }

/* --- Panel ici mini arayuz gosterimleri (NatureOS / NaturePass) ---
   Fotograf yerine div+CSS; ikon yok, elle SVG yok. Marka yesili yalniz
   YUZEY olarak kullanilir. Animasyon panel aktif degilken duraklatilir,
   hareketi-azalt'ta tamamen kapanir. */
.hp-step__media--ui { background: var(--eco-surface-dark-deep); }
.hp-ui { width:100%; height:100%; display:flex; flex-direction:column;
  gap: var(--eco-space-3); padding: var(--eco-space-4); }
.hp-ui__head { display:flex; align-items:center; gap: var(--eco-space-2); }
.hp-ui__dot { width: var(--eco-space-2); height: var(--eco-space-2);
  border-radius: var(--eco-radius-full); background: var(--eco-surface-brand);
  animation: hp-ui-nabiz 2s ease-in-out infinite; }
.hp-ui__title { height: var(--eco-space-2); flex:1 1 auto; max-width:60%;
  border-radius: var(--eco-radius-full); background: rgba(255,255,255,.22); }
.hp-ui__chart { flex:1 1 auto; display:flex; align-items:flex-end;
  gap: var(--eco-space-2); min-height:0; }
.hp-ui__chart i { flex:1 1 0; border-radius: var(--eco-radius-sm) var(--eco-radius-sm) 0 0;
  background: rgba(255,255,255,.18); transform-origin: bottom;
  animation: hp-ui-cubuk 2.8s ease-in-out infinite; }
.hp-ui__chart i:nth-child(1) { height:42%; animation-delay:0s; }
.hp-ui__chart i:nth-child(2) { height:66%; animation-delay:.18s; }
.hp-ui__chart i:nth-child(3) { height:30%; animation-delay:.36s; }
.hp-ui__chart i:nth-child(4) { height:82%; background: var(--eco-surface-brand); animation-delay:.54s; }
.hp-ui__chart i:nth-child(5) { height:54%; animation-delay:.72s; }
.hp-ui__rows { display:grid; gap: var(--eco-space-2); }
.hp-ui__rows span { height: var(--eco-space-2); border-radius: var(--eco-radius-full);
  background: rgba(255,255,255,.14); animation: hp-ui-satir 2.8s ease-in-out infinite; }
.hp-ui__rows span:nth-child(1) { animation-delay:.2s; }
.hp-ui__rows span:nth-child(2) { animation-delay:.5s; }
.hp-ui__rows span:nth-child(3) { animation-delay:.8s; }

.hp-ui--pass { position:relative; justify-content:center; align-items:center; }
.hp-ui__code { display:grid; grid-template-columns:repeat(3,1fr);
  gap: var(--eco-space-2); width:68%; aspect-ratio:1/1; }
.hp-ui__code i { border-radius: var(--eco-radius-sm); background: rgba(255,255,255,.18);
  animation: hp-ui-kare 3s ease-in-out infinite; }
.hp-ui__code i:nth-child(1) { animation-delay:0s; }
.hp-ui__code i:nth-child(3) { animation-delay:.25s; }
.hp-ui__code i:nth-child(5) { animation-delay:.5s; background: var(--eco-surface-brand); }
.hp-ui__code i:nth-child(7) { animation-delay:.75s; }
.hp-ui__code i:nth-child(9) { animation-delay:1s; }
.hp-ui__scan { position:absolute; left:12%; right:12%;
  height: var(--eco-borderwidth-thick); border-radius: var(--eco-radius-full);
  background: var(--eco-surface-brand); opacity:.8;
  animation: hp-ui-tarama 3s ease-in-out infinite; }
.hp-ui__chip { position:absolute; bottom: var(--eco-space-4); width:42%;
  height: var(--eco-space-4); border-radius: var(--eco-radius-full);
  background: rgba(255,255,255,.16); animation: hp-ui-cip 3s ease-in-out infinite; }


/* ecoDrone: tohum eken drone. Ayni dil -- div+CSS, ikon/SVG yok, marka
   yesili yalniz YUZEY. Psodo-eleman animasyonu YOK; duraklatma ve
   hareketi-azalt `.hp-ui *` ile calistigi icin hareket eden her sey
   gercek eleman olmali.
   Grafik cubugu gibi gorunmemesi icin filizler ince SAP (sabit dar
   genislik, tam yuvarlak uc), degisken yukseklikli genis cubuk degil. */
.hp-ui--drone { justify-content: space-between; }
.hp-ui__sky { position: relative; flex: 1 1 auto; min-height: 0; }

/* Silueti yatay cizgi olmaktan cikaran sey dikeylik: ustte pervane
   acikligi, altinda asili govde. */
.hp-ui__drone {
  position: absolute;
  top: 12%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--eco-space-1);
  width: 30%;
  animation: hp-ui-ucus 4s ease-in-out infinite;
}
.hp-ui__drone i:nth-child(1) {
  width: 100%;
  height: var(--eco-borderwidth-thick);
  border-radius: var(--eco-radius-full);
  background: rgba(255, 255, 255, .6);
  animation: hp-ui-pervane .5s ease-in-out infinite;
}
.hp-ui__drone i:nth-child(2) {
  width: 42%;
  height: var(--eco-space-2);
  border-radius: var(--eco-radius-sm);
  background: rgba(255, 255, 255, .65);
}

/* Tohumun belirdigi an, dronun o noktadan gectigi ana denk getirildi:
   ucus 0->%45 arasinda ease-in-out, merkez %15'ten %85'e gidiyor;
   0.45s -> ~%25, 0.90s -> ~%50, 1.35s -> ~%75. */
.hp-ui__seed {
  position: absolute;
  width: var(--eco-space-2);
  height: var(--eco-space-2);
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-brand);
  opacity: 0;
  animation: hp-ui-tohum 4s ease-in infinite;
}
.hp-ui__seed:nth-of-type(1) { left: 20%; animation-delay: 0s; }
.hp-ui__seed:nth-of-type(2) { left: 50%; animation-delay: .90s; }
.hp-ui__seed:nth-of-type(3) { left: 75%; animation-delay: 1.35s; }

/* Saha: yer cizgisi + tohum indikce yukselen saplar */
.hp-ui__field {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 38%;
  min-height: 0;
  padding-bottom: var(--eco-space-1);
  border-bottom: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .2);
}
.hp-ui__field i {
  width: var(--eco-space-1);
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-brand);
  transform-origin: bottom;
  animation: hp-ui-filiz 4s ease-out infinite;
}
.hp-ui__field i:nth-child(1) { height: 42%; opacity: .5;  animation-delay: 1.00s; }
.hp-ui__field i:nth-child(2) { height: 72%; opacity: .8;  animation-delay: 1.20s; }
.hp-ui__field i:nth-child(3) { height: 100%; opacity: 1;  animation-delay: 2.10s; }
.hp-ui__field i:nth-child(4) { height: 64%; opacity: .75; animation-delay: 2.55s; }
.hp-ui__field i:nth-child(5) { height: 36%; opacity: .45; animation-delay: 2.80s; }


/* Nature Intelligence: radar nabzi. Digerlerinden AYRI bir hareket imzasi --
   cubuk (NatureOS) ya da izgara (NaturePass) degil, merkezden yayilan
   halkalar. Izleme/algilama anlatisina oturur. */
.hp-ui--ai { justify-content: center; align-items: center; }
.hp-ui__radar {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  aspect-ratio: 1 / 1;
}
.hp-ui__radar i {
  position: absolute;
  inset: 0;
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-thick) solid var(--eco-surface-brand);
  opacity: 0;
  animation: hp-ui-dalga 3.2s ease-out infinite;
}
.hp-ui__radar i:nth-child(2) { animation-delay: 1.07s; }
.hp-ui__radar i:nth-child(3) { animation-delay: 2.13s; }
.hp-ui__radar span {
  width: var(--eco-space-3);
  height: var(--eco-space-3);
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-brand);
  animation: hp-ui-nabiz 2s ease-in-out infinite;
}

/* Duraklatma element kurallarindan SONRA gelmeli: yukaridaki her kuralda
   `animation:` KISAYOLU var ve kisayol play-state'i running'e sifirliyor;
   esit ozgullukte sonra gelen kazandigi icin erken yazilan pause eziliyordu. */
.hp-step .hp-ui * { animation-play-state: paused; }
.hp-step:hover .hp-ui *,
.hp-step:focus-within .hp-ui * { animation-play-state: running; }
/* Dinlenmede ACIK duran kartlar donuk kalmamali: akordeonun varsayilan
   olarak actigi ilk kart ve hep tam genislikteki genis kart oynar. */
.hp-steps__row:not(:hover):not(:focus-within) > .hp-step:first-child .hp-ui * { animation-play-state: running; }
.hp-step--wide .hp-ui * { animation-play-state: running; }

@keyframes hp-ui-nabiz { 0%,100% { opacity:.45 } 50% { opacity:1 } }
@keyframes hp-ui-cubuk { 0%,100% { transform: scaleY(.55) } 45% { transform: scaleY(1) } }
@keyframes hp-ui-satir { 0%,100% { width:55% } 50% { width:92% } }
@keyframes hp-ui-kare  { 0%,100% { opacity:.25 } 40% { opacity:1 } }
@keyframes hp-ui-tarama{ 0% { top:16%; opacity:0 } 15% { opacity:.85 } 85% { opacity:.85 } 100% { top:84%; opacity:0 } }
@keyframes hp-ui-cip   { 0%,55% { opacity:0; transform: translateY(var(--eco-space-2)) } 70%,100% { opacity:1; transform:none } }
@keyframes hp-ui-ucus    { 0% { transform: translateX(0) } 45%,55% { transform: translateX(233%) } 100% { transform: translateX(0) } }
@keyframes hp-ui-pervane { 0%,100% { transform: scaleX(1) } 50% { transform: scaleX(.55) } }
@keyframes hp-ui-tohum   { 0% { top:22%; opacity:0 } 4% { top:24%; opacity:.95 } 30% { top:80%; opacity:.95 } 36%,100% { top:84%; opacity:0 } }
@keyframes hp-ui-filiz   { 0% { transform: scaleY(.06) } 6%,100% { transform: scaleY(1) } }
@keyframes hp-ui-dalga   { 0% { transform: scale(.16); opacity:0 } 14% { opacity:.8 } 100% { transform: scale(1); opacity:0 } }

/* --------------------------------------------------------------------------
   8 · ETKİ — KPI satırı (R4): büyük rakam Montserrat, birim Avenir,
   + işareti okunan yeşilde üst-simge, aralarda saç teli çizgi
   -------------------------------------------------------------------------- */
.hp-impact { background: var(--eco-surface-page); padding-block: var(--eco-space-24); }
.hp-impact__head {
  display: grid;
  /* stretch DEGIL: izgara cocuklari varsayilan olarak satiri kapliyor ve
     buton genisledikce uzuyordu (kurucu: butonlar/etiketler asla boyle
     kullanilmaz). Basliga etkisi yok, blok zaten kendi satirinda. */
  justify-items: start;
  gap: var(--eco-space-4);
  margin-bottom: var(--eco-space-12);
}
.hp-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.hp-kpi {
  padding: var(--eco-space-8) var(--eco-space-5) var(--eco-space-8) 0;
  border-bottom: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.hp-kpi:nth-child(even) {
  padding-left: var(--eco-space-5);
  border-left: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.hp-kpi__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--eco-space-2); margin: 0; }
.hp-kpi__num {
  font-family: var(--eco-fontfamily-num);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-metric-xl);
  line-height: var(--eco-lineheight-metric-xl);
  letter-spacing: var(--eco-letterspacing-metric-xl);
  color: var(--eco-text-primary);
}
/* Metrik artisi: boyut (.5em) ve renk (--eco-label-text) korunur, konum
   rakamin SAG USTU. Onceki halde top:.18em artiyi 4.32px asagi itiyordu ve
   arti rakam yuksekliginin %31'inde kaliyordu -- ust-simge gibi okunmuyordu. */
.hp-kpi__num sup,
.hp-chain__num sup {
  position: relative;
  top: 0;
  margin-left: .04em;
  font-size: .5em;
  line-height: 1;                /* kendi kutusundaki tepe boslugu kalksin */
  vertical-align: top;
  color: var(--eco-label-text);
}
.hp-kpi__unit {
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h5);
  line-height: var(--eco-lineheight-h5);
  letter-spacing: var(--eco-letterspacing-h5);
  color: var(--eco-text-secondary);
}
.hp-kpi__label {
  margin: var(--eco-space-3) 0 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}
.hp-impact__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eco-space-4) var(--eco-space-8);
  margin-top: var(--eco-space-8);
}

/* --------------------------------------------------------------------------
   9 · HİKÂYE — editoryal split; isim hikâyesi öne çıkan satır olarak
   -------------------------------------------------------------------------- */
.hp-story { background: var(--eco-surface-base); padding-block: var(--eco-space-24); }
.hp-story__grid { display: grid; gap: var(--eco-space-12); align-items: center; }
.hp-story__media { margin: 0; overflow: hidden; border-radius: var(--eco-radius-lg); background: var(--eco-surface-subtle); }
.hp-story__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.hp-story__lead {
  margin: var(--eco-space-6) 0 0;
  max-width: 34ch;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h4);
  line-height: var(--eco-lineheight-h4);
  letter-spacing: var(--eco-letterspacing-h4);
  color: var(--eco-text-primary);
}

/* --------------------------------------------------------------------------
   10 · KAPANIŞ — sistemin tek gradient'i; beyaz buton (sayfanın tek
   birincil butonu hero'da)
   -------------------------------------------------------------------------- */
/* ALT 80 -> 96: kart kendi boslugunda ortalanmiyordu. OLCULEN 1440:
   home EN  ust 96 / alt 80  (onceki bolum hp-impact ile zemin AYNI,
                              o yuzden bosluklar birlesiyor)
   home TR  ust 96 / alt 80  (ustteki 96 beyaz hp-story dolgusundan)
   ecodrone ust 160 / alt 80 (ayrica .ed-close ust dolgusu sifirlandi)
   Ustler zaten 96 oldugu icin alti 96 yapmak ucunu de simetrige getirir.
   .fb-close iki tarafi da ezdigi icin o iki sayfa bu kuraldan etkilenmez. */
.hp-close { background: var(--eco-surface-page); padding-block: 0 var(--eco-space-24); }
/* ZEMIN FARKLIYSA serit kenari GORUNUR ve kartin kendi ust dolgusu gerekir;
   zemin AYNIYSA bosluklar birlesir ve ustu onceki bolumun dolgusu verir.
   OLCULDU 1440: home EN ve ecodrone ayni zemin -> ust 0 dogru (96/96).
   home TR ise beyaz hp-story ile komsu; ust 0 iken kart gri seridin
   tepesine YAPISIYORDU (0/96). Bu sayfa degistiriciyi tasir. */
.hp-close--serit { padding-top: var(--eco-space-24); }
.hp-close__box {
  border-radius: var(--eco-radius-lg);
  background: var(--eco-gradient-deep);
  padding: var(--eco-space-20) var(--eco-space-10);
  text-align: center;
}
.hp-close__box h2 {
  max-width: 22ch;
  margin: 0 auto;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-md);
  line-height: var(--eco-lineheight-display-md);
  letter-spacing: var(--eco-letterspacing-display-md);
  color: var(--eco-text-on-brand-strong);
  text-wrap: balance;
}
.hp-close__box p {
  max-width: 44ch;
  margin: var(--eco-space-5) auto 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-on-dark);
}
.hp-close__box .btn { margin-top: var(--eco-space-8); }
.hp-close__note {
  margin: var(--eco-space-5) auto 0;
  max-width: 44ch;
  font-size: var(--eco-fontsize-caption);
  line-height: var(--eco-lineheight-caption);
  letter-spacing: var(--eco-letterspacing-caption);
  color: var(--eco-color-neutral-400);
}

/* --------------------------------------------------------------------------
   Masaüstü
   -------------------------------------------------------------------------- */

/* .eco-icon — EDS aynasi (css/ecording-components.css). Anasayfalar
   components.css'i linklemedigi icin ikon sozlesmesi burada tekrarlanir:
   kalinlik markup'ta degil burada. EDS'te degisirse burasi da degismeli. */
.eco-icon {
  width: 1.15em;
  height: 1.15em;
  stroke-width: var(--eco-borderwidth-icon);
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: currentColor;
}
.eco-icon--sm { width: 16px; height: 16px; }
.eco-icon--md { width: 20px; height: 20px; }
.eco-icon--lg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   IKONLAR — Tabler Icons (outline), assets/icons altinda vendor'landi.
   Kalinlik ve renk .eco-icon'dan gelir; markup'ta stroke/fill/boyut YOK.
   Marka yesili (#88C426) ikonda kullanilmaz: koyu zeminde metin rengi,
   acik zeminde --eco-icon-accent (#377A36) mirasa birakilir.
   -------------------------------------------------------------------------- */
.hp-step__icon {
  display: block;
  margin: 0 0 var(--eco-space-3);
  color: var(--eco-text-on-dark);
  /* Dinlenmede geri cekilir, hover'da basligin yanina cikar */
  opacity: .72;
  transition: opacity .28s var(--ease-out);
}
.hp-step:hover .hp-step__icon,
.hp-step:focus-within .hp-step__icon { opacity: 1; }

/* Acik zemin: EDS'in ikon aksani (brand-dark), marka yesili degil */
.hp-kpi__icon {
  display: block;
  margin: 0 0 var(--eco-space-3);
  color: var(--eco-icon-accent);
}

/* Hero'daki tohum satiri baseline hizali; ikon ortalanir */

@media (min-width: 900px) {
  .hp-trust__inner { grid-template-columns: auto 1fr; gap: var(--eco-space-12); }

  /* Klasor kartlari: esit uc sutun (referansta da 3 esit kart) */
  .hp-work__rail:has(.hp-folder) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--eco-space-4); }

  /* Yatay akordeon. flex-grow 1.94 ile olculen oran 1.80 cikti (icerigin
     min-content genisligi dar paneli sisiriyor) -> 2.2'ye cekildi. */
  .hp-steps__row { display: flex; gap: var(--eco-space-3); }
  .hp-steps__row > .hp-step {
    flex: 1 1 0;
    justify-content: flex-end;
    min-height: 22rem;
    transition: flex-grow .33s var(--ease-out);
  }
  /* Yay: klasor kartlarindan olculen egri (0.86s, %9.5 asma). linear()
     desteklenmezse ustteki .33s yavaslama gecerli kalir. */
  @supports (transition-timing-function: linear(0, 1)) {
    .hp-steps__row > .hp-step {
      transition-property: flex-grow, background-color;
      transition-duration: 0.86s, 0.28s;
      transition-timing-function: linear(0 0%, 0.0715 4.2%, 0.1921 8.3%, 0.381 12.5%, 0.578 16.7%, 0.7485 20.8%, 0.8865 25%, 0.9853 29.2%, 1.0502 33.3%, 1.0837 37.5%, 1.0945 41.7%, 1.0894 45.8%, 1.0754 50%, 1.0573 54.2%, 1.0391 58.3%, 1.0228 62.5%, 1.01 66.7%, 1.0008 70.8%, 0.9949 75%, 0.9919 79.2%, 0.9911 83.3%, 0.9916 87.5%, 0.993 91.7%, 0.9947 95.8%, 1 100%), var(--ease-out);
    }
  }

  .hp-steps__row > .hp-step:hover,
  .hp-steps__row > .hp-step:focus-within { flex-grow: 2.2; }
  .hp-steps__row:not(:hover):not(:focus-within) > .hp-step:first-child { flex-grow: 2.2; }

  /* Gorsel panelin solundan sabit uzaklikta; dar panelde tamamen disarida
     kalmali. 16rem'de 6px'lik bir dilim siziyordu -> 17.5rem. */
  /* Govde gorselin SOLUNDA kalmali; tam genislikteyken metin gorselin
     altina giriyordu. Dar panelin ic genisligi ~14.2rem, bu sinir orada
     baglayici degil. */
  .hp-step__body { max-width: 15.5rem; }

  /* Numaranin biraktigi yer: ikon sol uste gecer (govde alta yaslandigi
     icin bu kose bos). Genis kart .hp-steps__row disinda -- onun ikonu
     govdede kalir, cunku orada ust kose basligin. */
  .hp-steps__row .hp-step__icon {
    position: absolute;
    top: var(--eco-space-5);
    left: var(--eco-space-5);
    margin: 0;
    opacity: .78;
  }

  /* Genis kart: gorsel sag tarafta, metin soluna sigar */
  .hp-step--wide { min-height: 11rem; }
  .hp-step--wide .hp-step__body { max-width: 60%; }
  .hp-step--wide .hp-step__media { left: auto; width: 26%; }

  /* Sabit width+aspect-ratio verilince panel esnerken sag/alt bosluk
     ustten buyuyordu (ust 20px, sag ~35px, alt ~33px). Dort kenardan
     esit inset: her yanda --eco-space-5. */
  .hp-step__media {
    position: absolute;
    top: var(--eco-space-5);
    right: var(--eco-space-5);
    bottom: var(--eco-space-5);
    left: 17.5rem;
    width: auto;
    margin: 0;
    aspect-ratio: auto;
  }

  .hp-method__grid { grid-template-columns: 7fr 5fr; gap: var(--eco-space-6); }
  .hp-watch__grid { grid-template-columns: 7fr 5fr; gap: var(--eco-space-16); }
  .hp-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-cell--wide { grid-column: span 2; }
  .hp-cell--full { grid-column: 1 / -1; }   /* satırı kapatan bant hücre */
  /* Hero: üst satır söz | problem, alt satır marka kanıtı.
     Problem sağ sütunda ve eylemlerle aynı hizada durur; kanıt bandı altta
     sol sütunda kalır, şerit sağa doğru solarak biter. */
  .hp-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    /* Sağ sütun iki satıra yayılır: problem kutusunun altı, soldaki logo
       şeridinin altıyla aynı çizgide biter. */
    grid-template-areas:
      "copy    problem"
      "proof   problem";
    grid-template-rows: 1fr auto;
    align-items: end;
    column-gap: var(--eco-space-16);
    row-gap: var(--eco-space-20);
  }
  /* Söz bloğu satırın dibine yaslanır — ortalandığında üste fazla yakın
     duruyordu; altında yalnız satır boşluğu kadar mesafe kalıyor */
  .hp-hero__col     { grid-area: copy; align-self: end; }
  .hp-hero__problem { grid-area: problem; justify-self: end; align-self: end; }
  .hp-hero__proof   { grid-area: proof; }
  /* Gösterge sayısına uyum sağlar: EN'de 3, TR'de 4 gösterge var */
  /* Baslik satiri: solda baslik, saginda buton. `:has(a)` ile kapili --
     TR'nin ayni sinifi butonsuz kullanmaya devam ediyor, o etkilenmez.
     Mobilde taban grid kaldigi icin alt alta yigilir. */
  .hp-impact__head:has(a) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eco-space-8);
  }
  .hp-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .hp-kpi { border-bottom: 0; }
  .hp-kpi + .hp-kpi {
    padding-left: var(--eco-space-6);
    border-left: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  }
  .hp-story__grid { grid-template-columns: 5fr 6fr; gap: var(--eco-space-20); }
  .hp-close__box { padding: var(--eco-space-24) var(--eco-space-16); }
}

/* --------------------------------------------------------------------------
   Mobil — tipografi EDS'in mobil kademelerine iner
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Dar ekranda ZINCIR KURULMAZ: 390px'de merkez kart bile sigmiyor.
     Kartlar tam genislikte, yatay kaydirmali seride durur. */
  .hp-chain__stage { height: auto; }
  .hp-chain__track {
    display: flex; gap: var(--eco-space-4);
    overflow-x: auto; padding-inline: var(--eco-space-6);
    scroll-snap-type: x mandatory;
  }
  .hp-chain__item {
    position: static; transform: none; opacity: 1;
    flex: 0 0 85%; width: auto; height: auto;
    scroll-snap-align: center;
  }
  .hp-chain__card { flex-direction: column-reverse; height: auto; }
  .hp-chain__item[data-aktif="hayir"] .hp-chain__body { flex: 1 1 auto; padding: var(--eco-space-6); opacity: 1; }
  /* Mobilde kartlar alt alta: govde mutlak konumdan cikip akisa doner */
  .hp-chain__body { position: static; width: auto; padding: var(--eco-space-6); }
  /* Mobilde medya akista: mutlak konum ve sabit genislik geri alinir,
     yoksa aktif kart 299 yerine 346px olup sirayi bozuyor. */
  .hp-chain__media,
  .hp-chain__item[data-aktif="evet"] .hp-chain__media {
    position: relative; inset: auto; width: auto; margin: 0;
  }
  .hp-chain__media { flex: 0 0 auto; aspect-ratio: 4 / 3; }
  /* Dar ekranda alinti kademe iner: 30px, 299px'lik kartta 11 satira
     yayilip karti 980px'e cikariyordu. Mobil olcekte lineheight/letterspacing
     token ailesi YOK, bu yuzden yalniz font-size ezilir (dosyadaki diger
     mobil kurallarla ayni kalip). */
  .hp-chain__quote { font-size: var(--eco-fontsizemobile-h2); }
  .hp-chain__num { font-size: var(--eco-fontsizemobile-metric-xl); }
  /* Mobilde kartlar yan yana esit sirada durur: aktif olan 16px, digerleri
     8px cerceve alinca tutarsiz goruniyordu. Hepsi ayni paya doner. */
  .hp-chain__item[data-aktif="hayir"] .hp-chain__card { padding: var(--eco-space-4); }
  /* Mobilde kartlar esit sirada -> logo hepsinde gorunur */
  .hp-chain__media::after, .hp-chain__logo { opacity: 1; }
  .hp-chain__logo { height: var(--eco-space-8); bottom: var(--eco-space-5); }
  .hp-chain__dots { display: none; }
  .hp-stage--live { height: 240svh; }
  .hp-statement__big { font-size: calc(var(--eco-fontsizemobile-display-3xl) * 2); max-width: 11ch; }
  /* Hero mobilde üç bloğu da taşır: yükseklik ekrana zorlanmaz, içerik belirler */
  .hp-hero { min-height: auto; }
  .hp-hero__media img { object-position: 60% 45%; }
  .hp-hero__inner {
    gap: var(--eco-space-12);
    padding-block: calc(var(--header-h) + var(--eco-space-12)) var(--eco-space-12);
  }
  .hp-hero__title { font-size: var(--eco-fontsizemobile-display-2xl); }
  .hp-hero__lede { margin-top: var(--eco-space-5); }
  .hp-hero__problem-media { width: 5.5rem; }
  .hp-hero__problem-num { font-size: var(--eco-fontsizemobile-metric-lg); }
  /* Bolum basligi mobilde bir kademe iner (masaustu display-md -> mobil md). */
  .hp-h2 { font-size: var(--eco-fontsizemobile-display-md); }
  /* Mobilde hover yok: klasor dinlenme konumunda kalir, gorsel seridi gorunur */
  .hp-folder { aspect-ratio: 4 / 5; }
  .hp-folder__n { font-size: var(--eco-fontsizemobile-display-lg); }
  /* Mobilde hover yok: mini arayuzler kendiliginden oynasin */
  .hp-step .hp-ui * { animation-play-state: running; }
  .hp-folder__title { font-size: var(--eco-fontsizemobile-h3); }
  /* Marka şeridi dar ekranda küçülür: 52px kutu mobilde ekranın yarısını kaplıyordu */
  /* İçerik dar ekranda iki satıra sarıyor; sarmalı kutu artık hap değil,
     radius merdivenindeki kutu değerine iner */
  .hp-hero__proof-line {
    border-radius: var(--eco-radius-lg);
    padding: var(--eco-space-3) var(--eco-space-4);
    font-size: var(--eco-fontsize-label-md);
  }
  .hp-hero__set { gap: var(--eco-space-8); }
  .hp-hero__set li { height: 24px; }
  .hp-hero__set img { max-width: 72px; }
  .hp-hero__strip { margin-top: var(--eco-space-4); }
  .hp-card { padding: var(--eco-space-6); }
  .hp-card__title { font-size: var(--eco-fontsizemobile-h2); }
  .hp-cell { padding: var(--eco-space-6); }
  .hp-kpi__num { font-size: var(--eco-fontsizemobile-metric-xl); }
  /* Üç gösterge dar ekranda tek sütuna iner; dördüncü varsa 2×2 kalır */
  .hp-kpis:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
  .hp-kpis:has(> :nth-child(3):last-child) .hp-kpi:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
  /* TR serigi dar ekranda kuculur */
  .hp-apps__item { width: 16rem; }
  .hp-apps__item--portrait { width: 11rem; }

    .hp-story__lead { font-size: var(--eco-fontsizemobile-h4); }
  .hp-close__box { padding: var(--eco-space-12) var(--eco-space-6); }
  .hp-close__box h2 { font-size: var(--eco-fontsizemobile-display-md); }
  .hp-work, .hp-apps, .hp-sys, .hp-impact, .hp-story { padding-block: var(--eco-space-16); }
  /* Kapanis de mobilde 64: komsu bolumler 64'e inince alt 96 kalinca
     390px'te ust 64 / alt 96 oluyordu (masaustunu duzeltirken olusan kusur). */
  .hp-close { padding-bottom: var(--eco-space-16); }
  .hp-close--serit { padding-top: var(--eco-space-16); }
  .hp-method { padding-block: var(--eco-space-2) var(--eco-space-16); }
  .hp-watch__body { padding-bottom: var(--eco-space-16); }
}

/* --------------------------------------------------------------------------
   Kullanıcı tercihleri
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Sahne çözülür: pin yok, scrub yok. Büyük söz kaybolmaz — hero'nun
     altında normal bir bölüm olarak akar, içerik eşitliği korunur. */
  /* Not: bu dalda JS 'hp-stage--live' sınıfını hiç eklemiyor, dolayısıyla
     sahnenin sabitleme/yükseklik kuralları zaten devreye girmiyor. Burada
     ayrıca geri almaya gerek yok — taban kurallar düz akışı veriyor. */
  .hp-stage .hp-hero { height: auto; min-height: 100svh; transform: none; opacity: 1; }
  .hp-stage .hp-hero__media img { filter: none; }
  .hp-stage__dim { display: none; }
  .hp-word { opacity: 1; filter: none; transform: none; }
  .hp-stage__statement {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: var(--eco-surface-dark);
    padding-block: var(--eco-space-24);
  }
  .hp-hero__media img { animation: none; }
  .hp-hero__problem-rule::after { animation: none; width: 100%; }
  .hp-hero__problem-ok { animation: none; }
  .hp-hero__proof-line::before { display: none; }   /* ışık gider, hairline kalır */
  .hp-hero__track { animation: none; }
  .hp-hero__strip { overflow-x: auto; }          /* akış durunca elle kaydırılır */
  .hp-apps__track { animation: none; }
  .hp-apps__strip { overflow-x: auto; }
  .hp-ui * { animation: none !important; }
  .hp-chain__item, .hp-chain__body, .hp-chain__dot,
  .hp-chain__logo, .hp-chain__media::after { transition: none; }
  .hp-chain__body > * { animation: none !important; }
  .hp-step__ok { transition: none; }
  .hp-step,
  .hp-folder__front, .hp-folder__media img, .hp-folder__ok, .hp-folder__n {
    transition: none;
    transition-duration: 0s;
  }
  /* Link: surucu azaltilmis harekette hic animasyon baslatmaz; CSS tarafinda
     da nudge kapatilir, ok dinlenme halinde kalir. */
  .hp-link:not(.is-canli)::after { transition: none; }
  .hp-link:not(.is-canli):hover::after { transform: none; }
  .hp-panel, .hp-panel__desc { transition: none; }
}


/* --------------------------------------------------------------------------
   TR ANASAYFA ICIN KORUNAN KART KURALLARI
   index.html (TR) hala .hp-panel markup'ini kullaniyor ve bu dosyayi
   yukluyor. EN'de klasor kartlarina gecildi; bu kurallar TR cevrilene
   kadar KALIR. Silinirse TR'deki bolum stilsiz doker.
   -------------------------------------------------------------------------- */
.hp-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Etiketler spesifikasyonla birlikte kalktı; kapalı kartta numara ile başlık
     arasında boşluk kalmasın diye kutu kısaldı */
  min-height: 14rem;
  padding: var(--eco-space-8);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-base);
  overflow: hidden;
  transition: flex-grow .55s cubic-bezier(.22, .8, .26, 1), background-color .3s ease;
}
/* Numara üstte durur, içerik tabana yaslanır — paneller aynı ritmi tutar */
.hp-panel__n {
  position: absolute;
  top: var(--eco-space-8);
  left: var(--eco-space-8);
  font-family: var(--eco-fontfamily-num);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-num-sm);
  line-height: var(--eco-lineheight-num-sm);
  letter-spacing: var(--eco-letterspacing-num-sm);
  color: var(--eco-label-text);
}
.hp-panel__title {
  margin: var(--eco-space-3) 0 0;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h3);
  line-height: var(--eco-lineheight-h3);
  letter-spacing: var(--eco-letterspacing-h3);
  color: var(--eco-text-primary);
  text-wrap: balance;
}
.hp-panel__desc {
  margin: var(--eco-space-4) 0 0;
  max-width: 42ch;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}

@media (min-width: 900px) {
  /* Genişleyen paneller: etkin olan büyür, diğerleri daralır */
  .hp-work__rail:has(.hp-panel) { display: flex; gap: var(--eco-space-4); }
  .hp-panel { flex: 1 1 0; min-width: 0; }
  .hp-panel:hover, .hp-panel:focus-within { flex-grow: 2.2; background: var(--eco-surface-base); }
  .hp-work__rail:not(:hover):not(:focus-within) .hp-panel:first-child { flex-grow: 2.2; }
  .hp-panel__desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.22, .8, .26, 1), opacity .35s ease, margin .5s ease;
    margin-top: 0;
  }
  .hp-panel:hover .hp-panel__desc,
  .hp-panel:focus-within .hp-panel__desc,
  .hp-work__rail:not(:hover):not(:focus-within) .hp-panel:first-child .hp-panel__desc {
    max-height: 12rem;
    opacity: 1;
    margin-top: var(--eco-space-4);
  }
}

@media (max-width: 767px) {
  .hp-panel__n { position: static; display: block; margin-bottom: var(--eco-space-2); }
  .hp-panel { min-height: 0; padding: var(--eco-space-6); }
  .hp-panel__title { font-size: var(--eco-fontsizemobile-h3); }
}

/* ============================================================================
   ANASAYFA TIPOGRAFIK OLCEGI (kurucu): hero basligi 60. Bolum basliklari
   48 denendi, 40'ta birakildi — yani .hp-h2 kendi temel olceginde.
   SAYFAYA KANCALI: .hp-hero__title'i for-businesses, ecodrone ve TR
   anasayfa da kullaniyor; onlar kendi siralarina gelene kadar 72'de
   kaliyor. Kanca yalniz en/index.html'in sarmalayicisinda.
   ========================================================================= */
.hp-anasayfa .hp-hero__title {
  font-size: var(--eco-fontsize-display-xl);
  line-height: var(--eco-lineheight-display-xl);
  letter-spacing: var(--eco-letterspacing-display-xl);
}
/* Hikayeler bolumunun zemini bir ton koyu (kurucu denemesi). Yine sayfaya
   kancali: .hp-chain'i impact, consumer-projects ve naturepass de
   kullaniyor. */
.hp-anasayfa .hp-chain { background: var(--eco-surface-subtle); }

/* Hero'da baslik ve lede AYNI olcude, ikisi de IKI satir (kurucu).
   Olculen esikler (1440, iki dilde): baslik iki satirda kalmak icin TR'de
   en az 500px, EN'de 470px ister; lede ikisinde de 520px'ten itibaren iki
   satira iner — eski 46ch degeri 512px veriyordu, sekiz piksel eksikti ve
   TR'de de EN'de de uc satir oluyordu. 560px ikisini de iki satirda tutar
   ve esigin uzerinde pay birakir. */
.hp-anasayfa .hp-hero__title,
.hp-anasayfa .hp-hero__lede { max-width: 560px; }

/* Metin blogu hero'nun DIKEY ORTASINDA — for-businesses'taki .fb-hero ile
   ayni davranis (kurucu: "anasayfadaki biraz asagida duruyor").
   Paylasilan izgara `align-items: end` kullaniyor, yani blok ust satirin
   DIBINE yasliyor ve merkezi hero merkezinin 78px ALTINA dusuyordu
   (olculdu). align-self:center tek basina yetmiyor: hero'nun ic dolgusu
   asimetrik (ust 112 / alt 40) ve alt satirda tohum hapi + logo seridi var,
   bu yuzden ortalanmis blok bu kez 56px YUKARI kaciyor. Ortalanmis bir
   izgara ogesinde margin kalan boslugu asimetrik boldugu icin blogu
   marjin YARISI kadar kaydirir: 112px -> 56px asagi, merkez farki 0.
   Olculen: for-businesses +2px, anasayfa 0px. Sihirli piksel degil, token.
   Yalniz izgaranin kuruldugu >=900px'te gecerli. */
@media (min-width: 900px) {
  .hp-anasayfa .hp-hero__col {
    align-self: center;
    margin-top: calc(var(--eco-space-24) + var(--eco-space-4));
  }
}

/* Kayip kartinda rakam "543M" tek metrik parca, birim ayri: "543M hectares".
   "M" rakamin KENDI kutusuna giremez — sayac (main.js, [data-count]) her
   karede textContent'i bastan yazip harfi silerdi. Bu yuzden rakam ve sonek
   bir sarmalayicida; aralarinda bosluk yok, birimle aralarinda satirin
   kendi boslugu var. Harf araligi 0: Montserrat'ta rakamlar icin tracking
   yok, token metrik basliklar icin tanimli (ayni karar .hp-folder__n'de).
   Kart sinifllari for-businesses, sirketler-icin-ecodrone ve impact'te de
   kullaniliyor, bu yuzden kural anasayfaya kancali. */
.hp-anasayfa .hp-hero__problem-metrik { display: inline-flex; align-items: baseline; }
.hp-anasayfa .hp-hero__problem-num,
.hp-anasayfa .hp-hero__problem-sonek { letter-spacing: 0; }
.hp-anasayfa .hp-hero__problem-sonek {
  font-family: var(--eco-fontfamily-num);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-metric-lg);
  line-height: var(--eco-lineheight-metric-lg);
  color: var(--eco-text-on-brand-strong);
}

/* KPI ikonlari: impact sayfasinin hero seridindeki (.impact-serit) yerlesim
   — ikon metnin ustunde degil, SAG UST kosesinde ve punto olcegine bagli
   boyda. O serit zaten bu .hp-kpi recetesinden turetilmisti; simdi
   yerlesimi geri aliniyor. Mobil yol degismiyor: ikon ustte, 24px.
   .eco-icon'un `non-scaling-stroke`u burada kapatiliyor — acik olsaydi
   cizgi 40px'lik ikonda 1.5px kalip sacak gibi gorunurdu; seritte de
   .eco-icon kullanilmiyor (orada sozlesme elle tekrarlanmis). */
@media (min-width: 901px) {
  .hp-anasayfa .hp-kpi {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "deger ikon" "etiket ikon";
    align-items: center;
    column-gap: var(--eco-space-5);
  }
  .hp-anasayfa .hp-kpi__value { grid-area: deger; }
  .hp-anasayfa .hp-kpi__label { grid-area: etiket; }
  .hp-anasayfa .hp-kpi__icon {
    grid-area: ikon; align-self: start; justify-self: end;
    margin: 0;
    height: var(--eco-fontsize-metric-lg); width: auto; aspect-ratio: 1;
    vector-effect: none;
  }
}
/* Mobilde ikisi de bir kademe iner — ustteki @media (max-width: 767px)
   blogundaki kalibin aynisi, bir kademe asagidan. */
@media (max-width: 767px) {
  .hp-anasayfa .hp-hero__title { font-size: var(--eco-fontsizemobile-display-xl); }
}

/* Sonek rakamla AYNI kademede kalir. Kademe mobilde duser; bu blok dosyanin
   sonunda cunku anasayfa kurali da ayni ozgullukte ve ondan once gelirse
   eziliyor — "543" 30px'e inerken "M" 40px'te kaliyordu (olculdu). */
@media (max-width: 767px) {
  .hp-anasayfa .hp-hero__problem-sonek { font-size: var(--eco-fontsizemobile-metric-lg); }
}

/* ============================================================================
   MOBIL HERO EYLEMLERI — kora.framer.media'nin mobil kalibi (kurucu).
   Orada satir tek: dolu bir hap + yaninda cerceve­siz "metin + ok". Bizde iki
   cerceveli buton alt alta diziliyordu ve bant iki kat yer kapliyordu.
   Olculdu (390px, icerik 350px): iki buton yan yana TR'de 392px tutuyor,
   sigmiyor. Ikinci eylem Kora'daki gibi cerceve ve dolgudan cikinca
   (-44px yan dolgu, -4px kenarlik) satir sigiyor; ok, .hp-folder__ok ile
   ayni maske — sayfaya yeni varlik girmiyor.
   ========================================================================= */
@media (max-width: 767px) {
  .hp-anasayfa .hp-hero__actions {
    /* nowrap DEGIL: 320px'te satir sigmiyor ve esnek ogeler sikisip
       ikinci etiketi kirpiyordu (olculdu: icerik 141, kutu 132). Sarmaya
       izin verip ogelerin kuculmesini kapatiyoruz — 360px'ten itibaren tek
       satir, altinda iki satir, hicbir yerde kirpik yok. */
    flex-wrap: wrap;
    gap: var(--eco-space-5);
    margin-top: var(--eco-space-5);
  }
  .hp-anasayfa .hp-hero__actions > * { flex: 0 0 auto; }
}

/* ============================================================================
   MOBIL HERO SIRASI — kora.framer.media'nin mobil kalibi (kurucu).
   Kora'da olculen sira (390px): baslik -> lede -> eylem satiri -> kanit
   satiri (avatarlar + kisa cumle) -> logolar; istatistik karti hero'nun
   ICINDE DEGIL, altindaki bolumde duruyor (orada y=540'ta ayri bir blok).
   Bizde kart mesaj ile kanitin ARASINA giriyordu; ilk ekranda dort blok
   ust uste yigiliyor ve boguyordu. Izgara sirasi Kora'ninkine cevriliyor:
   kart en sona, kanittan sonra. Markup degismiyor — masaustunde kart hala
   sag sutunda, burada yalniz mobil sira.
   ========================================================================= */
@media (max-width: 767px) {
  .hp-anasayfa .hp-hero__inner {
    grid-template-areas:
      "copy"
      "proof"
      "problem";
  }
  .hp-anasayfa .hp-hero__col     { grid-area: copy; }
  .hp-anasayfa .hp-hero__proof   { grid-area: proof; }
  .hp-anasayfa .hp-hero__problem { grid-area: problem; }
}

/* ============================================================================
   KAYIP KARTININ IC YERLESIMI — Kora'nin hero kartiyla ayni (kurucu).
   Oradaki olculen kurgu: solda dikey gorsel, sagda rozet -> aciklama ->
   EN ALTTA buyuk metrik ("New Case Study" / iki satir metin / %47).
   Bizde metrik en ustteydi; sira markup'ta degisti, burada yalniz etiket
   rozete donuyor ve metrik alta yasliyor.
   ========================================================================= */
.hp-anasayfa .hp-hero__problem { align-items: stretch; }
.hp-anasayfa .hp-hero__problem-media {
  aspect-ratio: auto;
  height: auto;
  align-self: stretch;
}
/* KOYU ZEMIN KIRMIZISI — EDS'te YOK, turetildi.
   Paletin tamami tarandi: kirmizi yalniz danger.text (#B9433C) ve
   danger.border (#FFB7AE). Birincisi bu kartta 2,48:1 kaliyor (okunmuyor),
   ikincisi pembeye kaciyor — kurucu ikisini de reddetti, kirmizi istedi.
   Deger EDS'in danger tonundan turetildi: renk acisi AYNI (3,4deg),
   doygunluk %51 -> %90, aciklik %48 -> %58. Kartin olculen zemininde
   (46,49,39) kontrast 3,52:1 — ikon metin olmadigi icin esik 3:1.
   EDS'e token olarak girmesi tasarim ekibinin karari; girerse bu
   degisken silinip yerine o token yazilmali. */
.hp-anasayfa { --hp-kirmizi-koyu-zemin: #F43E34; }

/* AZALIS OKU — kaldirilan progress cizgisinin yerini aliyor (kurucu).
   Ikon assets/icons/arrow-down.svg ile birebir ayni (Tabler v3.46.0);
   cizgi kalinligi .eco-icon'dan geliyor, markup'ta yazili degil.
   Hareket: durup dusup geri donen kisa bir vurgu — rakamin azaldigini
   anlatan tek oge. Azaltilmis hareket tercihinde duruyor (asagida). */
.hp-anasayfa .hp-hero__problem-ok {
  width: 1.5em;
  height: 1.5em;
  align-self: center;
  color: var(--hp-kirmizi-koyu-zemin);
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: hp-ok-dus 2.6s var(--ease-out) infinite;
}
@keyframes hp-ok-dus {
  0%, 55%, 100% { transform: translateY(0); }
  22%           { transform: translateY(32%); }
}
/* Kaynagin ustundeki ince ayirici (kurucu). Kendi satirini kaplamali:
   ustteki `align-items: flex-start` olmasa icerik genisligine buzulurdu. */
.hp-anasayfa .hp-hero__problem-src {
  align-self: stretch;
  margin-top: var(--eco-space-3);
  padding-top: var(--eco-space-3);
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-glass-border);
}
.hp-anasayfa .hp-hero__problem-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eco-space-2);
}
.hp-anasayfa .hp-hero__problem-label {
  padding: var(--eco-space-1) var(--eco-space-3);
  border-radius: var(--eco-radius-full);
  background: rgba(0, 0, 0, .28);
}
.hp-anasayfa .hp-hero__problem-desc { margin: 0; }
.hp-anasayfa .hp-hero__problem-value { margin: var(--eco-space-1) 0 0; }

/* ============================================================================
   MOBILDE KART SADELESIR VE EKRANA GIRER.
   Sahne hero'yu 100svh'ye sabitliyor; pin kaydirilmadigi icin ekranin
   altinda kalan her sey ERISILEMEZ oluyor (olculdu: kart 245px asagida,
   hic gorunmuyor). Kora'da icerik sabit arka planin UZERINDE kaydigi icin
   taşan kisim okunabiliyor — bizde oyle degil. Bu yuzden karti kurucunun
   dedigi gibi sadelestiriyoruz (gorsel + etiket + 543M) ve bloklar arasi
   ritmi sikiyoruz; kart boylece ekranin alt kenarinda KESIK ama gorunur
   kaliyor, Kora'daki gibi.
   ========================================================================= */
@media (max-width: 767px) {
  .hp-anasayfa .hp-hero__inner {
    gap: var(--eco-space-5);
    /* Alt dolgu yan dolguyla ayni (20px): kartin kenarlara ve asagiya olan
       mesafesi esitleniyor (kurucu). Ust dolguda header'dan sonra nefes payi. */
    padding-block: calc(var(--header-h) + var(--eco-space-12)) var(--eco-space-8);
    min-height: 100vh;
    min-height: 100svh;
    /* Bos pay SOZ satirinda birikir: soz ustte kalir, kanit ve kart dibe
       oturur. Icerik ekrandan uzunsa 1fr kendi icerigine iner, bozulmaz. */
    grid-template-rows: 1fr auto auto;
  }
  .hp-anasayfa .hp-hero__col { align-self: start; }
  /* 3) Serit mobilde daha hizli (kurucu). Masaustu 48s'de kaliyor. */
  .hp-anasayfa .hp-hero__track { animation-duration: 36s; }
}

/* --------------------------------------------------------------------------
   MOBILDE SAHNE: Kora modeli — arka plan sabit, ICERIK normal akar.

   Pin'li kurgu (sticky cerceve + 100svh + overflow) hero'nun ekrana sigmayan
   kismini ERISILMEZ yapiyordu: kart ekranin 307px altinda kaliyor, scroll
   onu yukari tasimak yerine sahneyi ilerletip hero'yu silip blurluyordu.
   Kurucu: "kartin alt kismini goremiyorum, scroll yapar yapmaz blurlanip
   kayboluyor". Korada olculen davranis: arka plan yerinde durur, baslik ve
   kart normal hizla yukari kayar.

   Katmanlar (media/shade/dim) akista yer kaplamasin diye sticky + negatif
   alt pay: 100svh yer kaplar, ayni kadar geri ceker, net etki sifir.
   Pin'in `overflow: hidden`i kaydirma kapsayicisi yarattigi icin sticky'yi
   oldururdu; `clip` kapsayici yaratmadan kirpar.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hp-anasayfa .hp-stage--live { height: auto; }
  .hp-anasayfa .hp-stage--live .hp-stage__pin {
    position: static;
    height: auto;
    display: flow-root;
    overflow: clip;
  }
  .hp-anasayfa .hp-stage .hp-hero__media,
  .hp-anasayfa .hp-stage .hp-hero__shade,
  .hp-anasayfa .hp-stage .hp-stage__dim {
    position: sticky;
    inset: auto;
    top: 0;
    /* TASIRMA — Kora'da olculen yaklasim (sabit bolum 994px / ekran 664px,
       karartma katmani `inset: 0 0 -584px`). Katmani ekranla tam esitlemek
       her seferinde bir kosede acik veriyordu: once svh (adres cubugu
       gizlenince ekran buyuyor), sonra lvh (alt guvenli alan). Tasan kisim
       ekranin disinda kalir, hicbir durumda bosluk kalmaz. */
    --tasma: 160px;
    height: calc(100vh + var(--tasma));
    height: calc(100lvh + var(--tasma));
    margin-bottom: calc(-100vh - var(--tasma));
    margin-bottom: calc(-100lvh - var(--tasma));
  }
  /* Gorsel BUGUNKU kadrajinda kalir. Kutuyla birlikte buyurse object-fit:cover
     her seyi %24 olcekler, drone belirgin buyurdu — istenmeyen tasarim
     degisikligi. Gorselin altinda kalan serit fotografin KENDI alt kenar
     renginden doldurulur (olculdu: solda 241,181,84 — sagda 182,128,66), uzerine
     golge ve karartma ayni sekilde biniyor, ek yeri gorunmuyor.
     Hero fotografi degisirse bu iki renk yeniden olculmeli. */
  .hp-anasayfa .hp-stage .hp-hero__media {
    background: linear-gradient(90deg,
      rgb(241, 181, 84), rgb(205, 147, 72) 50%, rgb(182, 128, 66));
  }
  .hp-anasayfa .hp-stage .hp-hero__media img {
    height: 100vh;
    height: 100lvh;
  }
  /* Hero kendi akisinda kayip gider; scrub ile ayrica kaydirilmaz/silinmez */
  .hp-anasayfa .hp-stage--live .hp-hero {
    height: auto;
    min-height: auto;
    transform: none;
    opacity: 1;
  }
  /* Buyuk soz hero bittikten SONRA gelir ve kendi suresince ekranda tutunur */
  .hp-anasayfa .hp-stage--live .hp-stage__statement {
    position: sticky;
    top: 0;
    height: 100svh;
  }
  .hp-anasayfa .hp-stage--live .hp-stage__pin::after {
    content: '';
    display: block;
    height: 70svh;   /* sozun ekranda tutundugu sure */
  }
}