/* ==========================================================================
   ecoDrone (EN) — sayfaya OZEL kurallar.
   Bilesenlerin buyuk cogunlugu anasayfa.css'ten gelir (hp-hero, hp-kpis,
   hp-steps + hp-ui mock'lari, hp-story, hp-tags, hp-close, hp-link, eco-icon).
   Kopyalamak yerine paylasiyoruz: iki sayfanin tasarim dili ayrismasin.

   .hp-stage BILEREK kullanilmadi: sinifi JS ekliyor ve 280svh'lik scroll
   pisti acip iki fazli hero bekliyor; bu sayfada faz B karsiligi yok.
   ========================================================================== */

.ed-hero__inner > .hp-hero__col,
.ed-hero__inner > .hp-hero__proof { grid-area: auto; }
.ed-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--eco-space-12);
  align-content: end;
  padding-block: var(--eco-space-24) var(--eco-space-16);
}
/* Match the title scale to the narrower two-column tablet hero. */
@media (min-width: 900px) and (max-width: 1199px) {
  .ed-hero__inner .hp-hero__title {
    font-size: var(--eco-fontsize-display-xl);
    line-height: var(--eco-lineheight-display-xl);
    letter-spacing: var(--eco-letterspacing-display-xl);
  }
}
.ed-hero__foot {
  margin: var(--eco-space-5) 0 0;
  font-size: var(--eco-fontsize-body-sm);
  letter-spacing: var(--eco-letterspacing-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  color: var(--eco-text-on-dark);
  opacity: .72;
}

/* Hero kadraji — SAYFAYA OZEL (anasayfa.css'e dokunmuyoruz, canli ana sayfa
   ayni dosyayi paylasiyor).

   Taban kural alt kenardan scale(1.18) buyutup hp-drift ile 1.24'e goturuyor;
   bu, ana sayfanin gun batimi fotografina gore ayarlanmisti. Bu sayfanin
   fotografinda (061 — bulutlu gokyuzu) ayni buyutme iki drone'u da kadrajin
   disina itiyordu: biri ust soldan kirpiliyor, oburu sag kenardan tasiyordu.
   Cozum baska fotograf degil, buyutmeyi birakmak. Suruklenme korunuyor —
   hero olu durmasin.

   Perde (.hp-hero__shade) 0.58'de BIRAKILDI, bilerek: olculdu, bu fotografta
   0.52 kanit hapinin etiketini 4,16:1'e dusuruyor (esik 4,5:1). Fotograf ana
   sayfaninkinden parlak, yani perde asagi inemez. */
/* SAHNEYE baglandi, .ed-hero'ya DEGIL: medya artik hero'nun icinde degil,
   .hp-stage__pin'in cocugu. Secici .ed-hero kalsaydi hic eslesmezdi ve
   anasayfa.css'teki taban scale(1.18) + hp-drift geri gelirdi, yani yukarida
   anlatilan kadraj hatasi aynen geri donerdi. Ozgulluk degismedi (0,2,1). */
.ed-stage .hp-hero__media img {
  transform: scale(1);
  animation: ed-hero-suzul 34s ease-in-out infinite alternate;
}
@keyframes ed-hero-suzul { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Bolum ritmi */
.ed-sec { padding-block: var(--eco-space-24); background: var(--eco-surface-page); }
.ed-sec--base { background: var(--eco-surface-base); }

/* Bolum 04 ACIK (kurucu istegi: ust uste koyu bolum kalmasin).
   Sira artik 02 acik -> 03 koyu -> 04 ACIK -> 05 koyu -> 06 acik. */
/* Bento bolumu — kurucu istegi: zemin en koyu ton, kartlar bir ton acik yesil.
   OLCULDU: ecording-base.css bu sayfada YUKLENMIYOR (sayfa yalniz tokens +
   style + anasayfa + ecodrone-en cekiyor). Bu yuzden oradaki .eco-dark sinifi
   burada olu kaliyor: denendi, baslik koyu zeminde 1.04:1 ile siyah kaldi.
   Ayni mekanizmayi yuklenen dosyada kuruyoruz — semantic tokenlar bolume
   YEREL olarak koyu tarafa cevriliyor. Boylece hp-h2, hp-note, hp-link,
   hp-tags ve cerceve anahtari tek yerden duzeliyor. */
.ed-sec--sunken {
  background: var(--eco-surface-dark-sunken);
  --eco-text-primary   : var(--eco-text-on-dark);
  --eco-text-secondary : var(--eco-color-neutral-300);
  --eco-text-muted     : var(--eco-color-neutral-400);
  --eco-text-link      : var(--eco-text-on-dark);
  --eco-border-line    : rgba(255, 255, 255, .12);
  color: var(--eco-text-on-dark);
}
.ed-sec__head { max-width: 46rem; margin-bottom: var(--eco-space-12); }

/* Kapasite: metin + gostergeler

   HIZA — kurucu karari: "bu metin alani ust ve alt sectionlara kiyasla sol
   sagda hizali degil, daha iceride kalmis". OLCULEN (1440): .container
   x=120..1320, komsu bolumlerin basliklari x=160'ta basliyor, bu blok ise
   61rem yuzunden x=232'de — iki yanda 72px iceride kaliyordu. Referansin
   975px sabit kabi BILEREK birakildi: sayfa hizasi referansin oninde. */
.ed-cap__metin { max-width: none; }

/* ==========================================================================
   02b · "21 futbol sahasi" — animasyonlu vektor
   Sayfanin kendi dili: SMIL yok, her sey CSS keyframe'i (anasayfadaki
   hp-ui-tarama / hp-ui-ucus / hp-ui-pervane ile ayni mantik).
   Dron glifi ELLE CIZILMEDI: assets/icons/drone.svg icindeki Tabler path'leri
   oldugu gibi gomuldu. 21 saha 7x3 izgarada; tarama bandi soldan saga gecerken
   her saha kendi x konumuna gore gecikmeyle yaniyor (delay = 7s * x/1200).
   Sayilar SVG metni DEGIL gercek metin: secilebilir, cevrilebilir, tokenlari
   miras aliyor. */
.ed-saha { margin: var(--eco-space-12) 0 0; }
.ed-saha__sahne {
  position: relative;
  overflow: hidden;
  padding: var(--eco-space-4);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-page);
}
/* Izgara SABIT KOORDINATLI SVG DEGIL: dar ekranda 7 sutun 44x27px'e eziliyordu
   (olculdu: 390px'te sahne 350x100). CSS izgarasi yeniden akiyor: 7 -> 3 sutun. */
.ed-saha__izgara {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--eco-space-3);
}
.ed-saha__kutu {
  position: relative;
  aspect-ratio: 150 / 92;
  border-radius: var(--eco-radius-sm);
  background: var(--eco-surface-base);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  /* "both": gecikmesi dolmamis kutu KENDI varsayilanini degil animasyonun 0%
     karesini gosterir. Bu olmadan ilk turda hicbir kutu sonuk baslamiyordu
     (olculdu: opaklik araligi 1.00-1.00, yani yanma hic devreye girmiyordu). */
  animation: ed-saha-yan 7s linear infinite both;
}
/* Saha cizgileri: orta cizgi + orta daire */
.ed-saha__kutu::before,
.ed-saha__kutu::after {
  content: '';
  position: absolute;
  background: none;
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.ed-saha__kutu::before { inset: 0 50% 0 50%; border-width: 0 0 0 1px; }
.ed-saha__kutu::after {
  top: 50%; left: 50%;
  width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: var(--eco-radius-full);
}
.ed-saha__kutu:nth-child(7n+1) { animation-delay: 0.50s; }
.ed-saha__kutu:nth-child(7n+2) { animation-delay: 1.50s; }
.ed-saha__kutu:nth-child(7n+3) { animation-delay: 2.50s; }
.ed-saha__kutu:nth-child(7n+4) { animation-delay: 3.50s; }
.ed-saha__kutu:nth-child(7n+5) { animation-delay: 4.50s; }
.ed-saha__kutu:nth-child(7n+6) { animation-delay: 5.50s; }
.ed-saha__kutu:nth-child(7n+7) { animation-delay: 6.50s; }
/* Yanma DOLGU ve KENAR degistirir; yalniz opaklik degistirince beyaz zeminde
   beyaz kutu gozle fark edilmiyordu (olculen yayilim tamamen tarama bandindan
   geliyordu). */
@keyframes ed-saha-yan {
  0%, 100% { background-color: var(--eco-surface-base); border-color: var(--eco-border-line); }
  3%, 16%  { background-color: rgba(136, 196, 38, .22); border-color: var(--eco-surface-brand); }
}
.ed-saha__tarama {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 14%;
  background: linear-gradient(90deg, rgba(136,196,38,0), rgba(136,196,38,.20), rgba(136,196,38,0));
  animation: ed-saha-tara 7s linear infinite;
}
@keyframes ed-saha-tara { from { transform: translateX(-100%); } to { transform: translateX(calc(100vw + 100%)); } }
.ed-saha__dron {
  position: absolute;
  top: 50%; left: 0;
  width: var(--eco-space-10);
  height: var(--eco-space-10);
  margin-top: calc(var(--eco-space-10) / -2);
  color: var(--eco-surface-brand-strong);
  animation: ed-saha-ucus 7s linear infinite;
}
.ed-saha__dron svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  animation: ed-saha-pervane 1.1s ease-in-out infinite;
}
@keyframes ed-saha-ucus { from { transform: translateX(-100%); } to { transform: translateX(calc(100vw + 100%)); } }
@keyframes ed-saha-pervane { 0%, 100% { stroke-width: 1.6; } 50% { stroke-width: 2.3; } }
@media (max-width: 809px) {
  .ed-saha__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed-saha__kutu:nth-child(3n+1) { animation-delay: 1.17s; }
  .ed-saha__kutu:nth-child(3n+2) { animation-delay: 3.50s; }
  .ed-saha__kutu:nth-child(3n+3) { animation-delay: 5.83s; }
}
/* Rakamlar animasyonun altina SIKISMISTI: dogrudan sahnenin altinda, dar
   flex satirinda duruyordu. Kendi bandina alindi — ustte ayirici cizgi, daha
   genis nefes payi, metinle ayni blok genisligi (kap hizasi). */
/* Tooltip baloncugu GOSTERGE KUTUSUNA yaslanir. Olculen kusur: tetige sola
   yasli konumlandigi icin 1440'ta "21" rakaminin USTUNU KAPATIYOR, 390'da ise
   sayfayi 73px yatay tasiriyordu. left/right 0 ile kutu sinirlarini asamaz;
   >=900px kuralindaki ortalama transform'u da ezmek ZORUNLU. */
.ed-saha__oge { position: relative; }
.ed-saha__oge .ed-tip { position: static; }
.ed-saha__oge .ed-tip__bubble {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: translate(0, var(--eco-space-1));
}
.ed-saha__oge .ed-tip__bubble::after { left: 50%; }
.ed-saha__oge .ed-tip:hover .ed-tip__bubble,
.ed-saha__oge .ed-tip:focus-within .ed-tip__bubble { transform: translate(0, 0); }

.ed-saha__veri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--eco-space-8) var(--eco-space-12);
  margin: var(--eco-space-12) 0 0;
  padding-top: var(--eco-space-8);
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.ed-saha__oge { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--eco-space-2); margin: 0; }
.ed-saha__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);
  color: var(--eco-text-primary);
}
.ed-saha__birim {
  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);
}
.ed-saha__etiket {
  flex: 1 0 100%;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}
/* Dipnot artik TOOLTIP: gorunur kucuk metin kaldirildi ama figure'un
   erisilebilir aciklamasi ekran okuyucuda KALIYOR. Projede sr-only yardimcisi
   yoktu, en kucuk hali burada tanimlandi. */
.ed-gizli-metin {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   02 · Scroll ile karakter karakter acilan metin

   Referans: text-reveal-scroll.framer.ai — TARAYICIDA OLCULDU:
     - metin KARAKTER KARAKTER span'lere bolunmus (orn. 289 span)
     - her karakterin OPAKLIGI 0.2 -> 1; renk degismiyor
     - gecis bolgesi TEK karakter: yumusak gradyan degil, ilerleyen keskin cephe
     - acilma, metnin ust kenari viewport'un ~%84'une gelince basliyor
     - toplam yol viewport'a degil METNIN YUKSEKLIGINE bagli: ~1.56 x yukseklik
       (972/608 ve 936/608 iki ayri ekran boyunda; karakter basina scroll boylece
       sabit kaliyor: 3.36 ve 3.24 px/karakter)
   Ilk taramamda "renkli oncu kenar" sandigim sey YOKMUS: beyaz olmayan iki span
   kaynak metindeki sabit vurgulu ifadeymis.

   BILEREK AYRILDIGIMIZ YER: referans tek bir 52px ifade kullaniyor; bizim
   olcegimizde o kademe yok, lead paragraf bir kademe buyutuldu.

   ERISILEBILIRLIK: sonuk hal YALNIZCA .is-hazir ile gelir ve onu JS ekler.
   Betik yoksa ya da hareket azaltmada metin TAM GUCTE kalir. */
/* Referans OLCULDU: 52px / 600 / satir 67.6px / harf -2.08px, SOLA yasli,
   975px SABIT kap iki yanda esit boslukla ORTALANMIS (1440 ve 1024'te ayni).
   Bizde en yakin olcek kademesi display-lg (48px) — 52px olcekte yok; 4px fark
   gozle ayirt edilmiyor ama sistem tutarli kaliyor. Kap ise referanstakinden
   GENIS: kurucu sayfa hizasini istedi, blok .container ile ayni genislikte.
   NOT: referans sayfasinda HIC BASLIK YOK, o metin basligin yerini tutuyor.
   Bizde de artik gorunur baslik yok — "Built to reach further." faz B'deki
   dev soze tasindi, yani bu paragraf gercekten basligin yerini tutuyor. */
.ed-reveal__p {
  margin: var(--eco-space-6) 0 0;
  color: var(--eco-text-primary);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-display-lg);
  /* Satir ve harf araligi TOKEN DEGERI DEGIL, referansin OLCULEN ORANLARI:
     referans 52px'te satir 67.6px (1.30) ve harf -2.08px (-0.04em).
     display-lg tokenlari 1.13 ve -0.0494em veriyordu; boyut tutuyordu ama
     satirlar gozle gorulur sikisik kaliyordu. */
  line-height: 1.3;
  letter-spacing: -0.04em;
}


/* Kelime butunlugu: her karakter ayri span olunca tarayici satiri KELIMENIN
   ORTASINDA bolebiliyordu (olculen sonuc: kap yuksekligi 79px'e cokmustu).
   Karakterler kelime span'i icine alindi; bolunme yalniz kelimeler arasinda.
   Referansta da bir span'in butun bir ifadeyi tuttugunu gormustuk. */
.ed-reveal__w { white-space: nowrap; }
.ed-reveal.is-hazir .ed-reveal__ch { opacity: .2; transition: opacity .12s linear; }
.ed-reveal.is-hazir .ed-reveal__ch.is-acik { opacity: 1; }

/* "Kuslardan ilham" alt blogu */
.ed-inspired {
  margin-top: var(--eco-space-8);
  padding-left: var(--eco-space-5);
  border-left: var(--eco-borderwidth-thick) solid var(--eco-surface-brand);
}
.ed-inspired h3 {
  margin: 0 0 var(--eco-space-3);
  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);
}

/* Etiket gruplari */
.ed-tagset { margin-top: var(--eco-space-8); display: grid; gap: var(--eco-space-4); }
.ed-tagset__row { display: grid; gap: var(--eco-space-2); }
.ed-tagset__key {
  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);
}
.ed-tagset .hp-tags { margin: 0; }

/* Sosyal etki basligi */
.ed-social { margin-top: var(--eco-space-12); }
.ed-social__title {
  margin: 0 0 var(--eco-space-4);
  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);
}

/* Bolum 04 kapanis bandi. Kart diliyle ayni: yuzey + radius-lg.
   Bolum 04 ACIK oldugu icin yuzey dark-raised degil surface-subtle.
   NOT: bu kural bir kez regex ile CSS silerken yanlislikla yutulmustu;
   bant kutusunu kaybedip duz metne donmustu. */
.ed-band {
  display: grid;
  gap: var(--eco-space-5);
  padding: var(--eco-space-6) var(--eco-space-8);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-subtle);
}
.ed-band .hp-desc { margin: 0; max-width: 52ch; }
/* Metin ikonla yan yana; ikon ust satira hizali (metin iki satira sariyor) */
.ed-band__text { display: flex; align-items: flex-start; gap: var(--eco-space-4); }
.ed-band__icon { flex: 0 0 auto; margin-top: .15em; color: var(--eco-icon-muted); }
/* Cam butonlar. NOT: .ed-band uzerindeki reveal-up, .revealed'da kalici bir
   transform birakiyor ve bu bir "backdrop root" acip backdrop-filter'i
   etkisizlestiriyor. Bant zemini DUZ renk oldugu icin blur'un gorsel karsiligi
   zaten yok — cam etki saydam dolgu + hairline kenardan geliyor. */
.ed-band__actions { display: flex; flex-wrap: wrap; gap: var(--eco-space-3); }
@media (min-width: 900px) {
  .ed-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--eco-space-10);
  }
}

/* Bilgi baloncugu — dipnot yerine. Tetik, metrik etiketinin yanindaki 16px
   Tabler info-circle. Acilma hover VE odakla olur (focus-within), boylece
   klavyede ve dokunmatikte de calisir; JS YOK.
   Baloncuk metrigin ustunde, ucu asagi bakan kucuk dil ile.
   Golge yok (projede --shadow-* tamamen none): ayrim koyu yuzeyden geliyor.
   Marka yesili ikon/metin rengi olarak KULLANILMAZ — notr tonlar. */
.ed-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: var(--eco-space-2); }
.ed-tip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--eco-space-6);
  height: var(--eco-space-6);
  padding: 0;
  border: 0;
  border-radius: var(--eco-radius-full);
  background: none;
  color: var(--eco-text-muted);
  cursor: pointer;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.ed-tip__btn:hover { color: var(--eco-text-primary); background: var(--eco-surface-subtle); }
.ed-tip__btn:focus-visible {
  outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
  outline-offset: 2px;
}
.ed-tip__icon { width: 1rem; height: 1rem; }
/* Tetik ETIKETTE (kurucu istegi, 2026-09-20): "Average field success rate"
   metninin sagina alindi.
   Onceki notu duzeltiyorum: tetik bir ara etiketteydi ve masaustunde satira
   sigmayip tek basina alt satira dusuyordu (oksuz ikon), bu yuzden sayi
   satirina tasinmisti. Simdi iki sey birden degisti:
   (1) gosterge izgarasi 6 sutuna gecti, alt satirdaki iki oge yariya yakin
       genisledi -> etikete cok daha fazla yer var;
   (2) "rate" ile ikon arasina   konuldu, yani satir sonu oraya DUSEMEZ.
   Oksuz ikon artik olusamaz; asagida her kirilimda olculerek dogrulandi. */
.hp-kpi__label .ed-tip { margin-left: var(--eco-space-1); }
.ed-tip__bubble {
  position: absolute;
  bottom: calc(100% + var(--eco-space-3));
  /* Taban SOLA yasli: 400px'te tetik x=55, 272px'lik baloncuk ortalaninca
     sol kenardan -69px tasip kirpiliyordu. Ortalama >=900px'te geri geliyor. */
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: min(22rem, 68vw);
  padding: var(--eco-space-3) var(--eco-space-4);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-dark);
  color: var(--eco-text-on-dark);
  font-size: var(--eco-fontsize-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  /* Eskiden "normal" idi: tooltip SAYI satirindaydi ve metrik aralgini
     devralmasin isteniyordu. Tetik etikete tasininca o gerekce curudu;
     kendi kademesinin degeri veriliyor. */
  letter-spacing: var(--eco-letterspacing-body-sm);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, var(--eco-space-1));
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
/* asagi bakan dil: dondurulmus kare, baloncukla ayni yuzey */
.ed-tip__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--eco-space-3);
  width: var(--eco-space-2);
  height: var(--eco-space-2);
  background: var(--eco-surface-dark);
  transform: translate(-50%, -50%) rotate(45deg);
}
.ed-tip:hover .ed-tip__bubble,
.ed-tip:focus-within .ed-tip__bubble {
  opacity: 1;
  transform: translate(0, 0);
}

/* Genis ekranda yer var: baloncuk tetige ortalanir, dil de ortaya gelir. */
@media (min-width: 900px) {
  .ed-tip__bubble { left: 50%; transform: translate(-50%, var(--eco-space-1)); }
  .ed-tip__bubble::after { left: 50%; }
  .ed-tip:hover .ed-tip__bubble,
  .ed-tip:focus-within .ed-tip__bubble { transform: translate(-50%, 0); }
}

/* ==========================================================================
   05 · Tohum hazirligi — bolumun TAMAMI arka plan gorseli

   Duzen bilerek SADE: onceki surumde arka planda bir fotograf, icinde ikinci
   bir fotograf karti ve bes kutu vardi; kalabalik duruyordu. Simdi tek kart
   ve cercevesiz bir sayi satiri var.

   Kart tek basina bir kutu (ic ice degil) -> 20px.
   Perde OLCULEREK secilecek; bu fotografta ust bantta parlak gokyuzu ve guclu
   turuncu yelekler var, seed dokusundan daha zorlu bir zemin.
   ========================================================================== */
.ed-seed { position: relative; overflow: hidden; background: var(--eco-surface-dark); }
.ed-seed__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ed-seed__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transform: scale(1.04);
  animation: ed-seed-suzul 44s ease-in-out infinite alternate;
}
@keyframes ed-seed-suzul { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.ed-seed__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--eco-surface-dark);
  opacity: .68;
}
.ed-seed__inner { position: relative; z-index: 2; }
.ed-seed__head { max-width: 46rem; }
.ed-seed .hp-h2 { color: var(--eco-text-on-dark); }
.ed-seed__lede {
  margin: var(--eco-space-5) 0 0;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-on-dark);
}

/* Tek kart — tek basina kutu, 20px */
.ed-seed__card {
  max-width: 46rem;
  margin: var(--eco-space-10) 0 0;
  padding: var(--eco-space-6);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-dark-raised);
}
.ed-seed__card-title {
  margin: 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-on-dark);
}
.ed-seed__card-desc {
  margin: var(--eco-space-4) 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: .78;
}

/* Sayi satiri — KUTU YOK, yalnizca ince ayirici */
.ed-seed__kpis {
  list-style: none;
  margin: var(--eco-space-12) 0 0;
  padding: var(--eco-space-8) 0 0;
  display: grid;
  gap: var(--eco-space-8);
  border-top: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .22);
}
.ed-seed__kpi-icon { color: var(--eco-text-on-dark); opacity: .72; }
.ed-seed__kpi-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--eco-space-2);
  margin: var(--eco-space-3) 0 0;
}
.ed-seed__kpi-num {
  font-family: var(--eco-fontfamily-num);
  font-weight: var(--eco-fontweight-medium);
  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-dark);
}
.ed-seed__kpi-num sup {
  position: relative;
  top: 0;
  margin-left: .04em;
  font-size: .5em;
  line-height: 1;
  vertical-align: top;
  color: var(--eco-surface-brand);
}
.ed-seed__kpi-unit {
  font-size: var(--eco-fontsize-body);
  letter-spacing: var(--eco-letterspacing-body);
  line-height: var(--eco-lineheight-body);
  color: var(--eco-text-on-dark);
  opacity: .78;
}
.ed-seed__kpi-label {
  margin: var(--eco-space-2) 0 0;
  font-size: var(--eco-fontsize-body-sm);
  letter-spacing: var(--eco-letterspacing-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  color: var(--eco-text-on-dark);
  opacity: .72;
}

@media (min-width: 900px) {
  .ed-seed__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--eco-space-10); }
}

@media (prefers-reduced-motion: reduce) {
  .ed-seed__media img { animation: none; transform: scale(1.04); }
}

/* ==========================================================================
   03 · Bento kartlar — iri ikon, tok ifade, degisken kutu boyu

   Referanstan OLCULDU: ikon 86px, ifade 40px (buyuk) / 28px w600 saf beyaz,
   kart basina 5-14 kelime, gecis 0.4s, egim +-6 derece, isik blur(60px)
   tepe opaklik .20, hairline kenar, golge YOK.
   AYRILDIGIMIZ yerler: yaricap 20px; ikon/metin notr; kendi fotograflarimiz;
   4 boy kademesi (2x2 fotograf, 2x1 genis, 1x1 kucuk) — kurucu "buyuklu
   kucuklu kutular" istedi, referansta yalniz iki boy var.
   ========================================================================== */
.ed-bento { display: grid; gap: var(--eco-space-5); margin-top: var(--eco-space-12); }

.ed-bento__k {
  position: relative;
  overflow: hidden;
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-dark-raised);
  transition: transform .4s var(--ease-out), min-height .34s var(--ease-out);
  --ed-ikon: 86px;   /* referansla birebir */
  /* Hale capi: kucuk kartta 10rem (oran ~.83), fotografta 18rem (~.6-.7).
     Sabit 18rem birakilinca kucuk karti asip duz yikamaya donusuyordu. */
  --isik-cap: 14rem;
  /* Spot isik rengi kartin YUZEYINE gore degisir */
  --isik-1: rgba(255, 255, 255, .6);
  --isik-0: rgba(255, 255, 255, 0);
  --isik-op: .2;
}
.ed-bento.is-canli .ed-bento__k {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.ed-bento__k--foto { min-height: 20rem; --isik-cap: 18rem; }

.ed-bento__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ed-bento__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Perde — kurucu istegi: fotografin TAMAMINI ortmeyelim; alta demirli, yukari
   dogru aciliyor. 2026-09-20'de kurucu istegiyle koyu-yesil rgba(11,33,21)
   yerine SIYAH: ayni alfada luminans neredeyse ayniydi, yani gorseli "kapatan"
   sey ortuculuk degil yesil tint'ti — siyah fotografin kendi renklerini birakir.
   Duraklar OLCULEREK kuruldu; opak kuyrugu belirleyen kart 3'un metni: ifade +
   destek kartin altindan ~%61 yukseklige cikiyor ve daha once orada .32 opaklik
   kalinca arkadaki pus/dag metnin ustune cikip en kotu noktayi 2.93:1'e
   dusurmustu (esik 4.5). Bu yuzden %44'e kadar >=.84 tutulur, sonra hizla acilir
   ve %84'te tamamen seffaflasir (yesil surumde %90'di).
   Olculen sonuc: metin zemini 17.3:1, ikon 13.5:1, ust %12 bandi acik.
   Kart 3'un destek satiri icerik turunda kisalirsa perde daha da acilabilir. */
.ed-bento__perde {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .95) 0%,
    rgba(0, 0, 0, .93) 30%,
    rgba(0, 0, 0, .84) 44%,
    rgba(0, 0, 0, .62) 54%,
    rgba(0, 0, 0, .34) 64%,
    rgba(0, 0, 0, .12) 74%,
    rgba(0, 0, 0, 0) 84%);
}
.ed-bento__isik {
  position: absolute; z-index: 2;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: var(--isik-cap); height: var(--isik-cap);
  margin: calc(var(--isik-cap) / -2) 0 0 calc(var(--isik-cap) / -2);
  border-radius: var(--eco-radius-full);
  background: radial-gradient(circle, var(--isik-1), var(--isik-0) 70%);
  filter: blur(60px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.ed-bento.is-canli .ed-bento__k:hover .ed-bento__isik { opacity: var(--isik-op); }

.ed-bento__ic {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  /* Ic bosluk referanstan OLCULDU: fotografli kartlarda 33px, duz kartlarda
     41px. Token karsiliklari space-8 (32) ve space-10 (40). Onceki 24px
     ikisinin de belirgin altindaydi.
     Masaustunde satirlar sabit (16rem) ve overflow gizli; en dar kartta 110px
     bos vardi, yani +8px/kenar guvenli (tavan +55). */
  padding: var(--eco-space-8);
}
.ed-bento__k--foto .ed-bento__ic { justify-content: flex-end; }
/* Genis kartlarda ikon metnin SOLUNA gecer (referanstaki duz kart kalibi) */
.ed-bento__k--yatay .ed-bento__ic {
  /* Referansta duz kartin icerigi dikeyde ORTALI; flex-start birakinca
     kartin alti bos kaliyordu. Duz kartlarda ic bosluk da daha genis (41px). */
  flex-direction: row; align-items: center; gap: var(--eco-space-6);
  padding: var(--eco-space-10);
  /* Buton sag ustte; ton kartinin icerigi dikeyde ORTALI oldugu icin metin
     tam butonun hizasina geliyordu (olculen cakisma: kart 2'de 20px). */
  padding-right: calc(var(--eco-space-10) + 2.5rem);
}

/* Ikon: .eco-icon'un non-scaling-stroke'u iptal edilir, yoksa 72px'te
   1.5px cizgi sac teli gibi kalir. Birimsiz stroke-width olcekle buyur. */
.ed-bento .ed-bento__ikon {
  width: var(--ed-ikon);
  height: var(--ed-ikon);
  flex: none;
  /* .eco-icon'un non-scaling-stroke'u iptal: yoksa 86px'te cizgi sac teli kalir.
     1.5 kullanici birimi, referansla ayni -> 86/24 x 1.5 = ~5.4px ekranda. */
  vector-effect: none;
  stroke-width: 1.5;
  /* Tabler bunlari KOK <svg>'de tasiyor; yalniz path'leri inline ederken
     dusuyordu ve uclar kut kaliyordu. */
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--eco-text-on-dark);
}
/* EDS kurali: acik yuzeyde yesil aksan; koyu yuzeyde ecording-base.css
   --eco-icon-accent'i --eco-text-on-dark'a cevirdigi icin beyaz kalir. */
/* Kurucu karari: koyu zeminde marka yesili IKON olarak kullanilir (olculen
   7.28:1, metin disi esik 3:1). Kural yalnizca burada esnetildi — #88C426
   acik zeminde YAZI olarak hala yasak (orada 2.11:1).
   --eco-icon-accent koyu zeminde okunmayan #377A36'da kaldigi icin token
   degil dogrudan marka rengi veriliyor. */
.ed-bento__k--ton .ed-bento__ikon { color: var(--eco-brand-primary); }
.ed-bento__ifade {
  margin: var(--eco-space-5) 0 0;
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-h4);
  line-height: var(--eco-lineheight-h4);
  letter-spacing: var(--eco-letterspacing-h4);
  color: var(--eco-text-on-dark);
}
.ed-bento__k--yatay .ed-bento__ifade { margin-top: 0; }
/* Buyuk fotograf kartlari kucuk ekranda da tok dursun: 80px ikonun altinda
   20px yazi dengesiz kaliyordu. Olcek mobil -> tablet -> masaustu buyur. */
.ed-bento__k--foto .ed-bento__ifade {
  font-size: var(--eco-fontsizemobile-h1);
  line-height: 1.16;
  letter-spacing: var(--eco-letterspacing-h2);
}
.ed-bento__destek {
  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-on-dark);
  opacity: .82;
}

/* Acik kartlar — kurucunun "acik agirlik, pes pese koyu yok" kurali.
   Bolum sirasi 03 -> 04 (koyu) -> 05 (koyu fotograf); bento komple koyu
   olsaydi uc gorsel koyu blok pes pese gelirdi. .hp-tags da acik zeminde
   kendi renginde okunur kaliyor (olculen 8.1:1; koyuda 1.31:1 idi). */
/* Arka yuz + ac/kapat butonu — Apple'in olculen mekanigi.
   Buton sag USTTE (Apple'da sag altta): bizde fotografli kartin metni ALTTA,
   ton kartinin icerigi dikeyde ORTALI ve saga kadar uzaniyor; sag alta
   koyunca metinle cakisiyor, pay eklemek ise metni yukari itip yeni
   ayarladigimiz gradyan kontrastini bozuyordu. */
.ed-bento__ic {
  transition: opacity .28s var(--ease-out), transform .34s var(--ease-out), visibility .34s;
}
.ed-bento__k.is-acik .ed-bento__ic { transform: translateY(-10px); }
.ed-bento__arka {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* Icerik uzadi (kart 2 ve 3'te etiket + uzun govde): bosluk 20 -> 16px */
  gap: var(--eco-space-4);
  padding: var(--eco-space-8);
  background: var(--eco-surface-dark-raised);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out), visibility .34s;
}
.ed-bento__k--yatay .ed-bento__arka { padding: var(--eco-space-10); }
.ed-bento__k.is-acik .ed-bento__arka { opacity: 1; visibility: visible; transform: none; }
.ed-bento__k.is-acik .ed-bento__ic { opacity: 0; visibility: hidden; }
.ed-bento__arka-ikon {
  width: 2.5rem; height: 2.5rem; flex: none;
  vector-effect: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--eco-text-on-dark); opacity: .55;
}
.ed-bento__detay {
  margin: 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);
}
.ed-bento__ac {
  position: absolute; z-index: 4;
  top: var(--eco-space-5); right: var(--eco-space-5);
  width: 2.5rem; height: 2.5rem; padding: 0;
  display: grid; place-items: center;
  border-radius: var(--eco-radius-full);
  /* Cerceve yok (kurucu istegi). Butonu parlak gokyuzunden ayiran tek sey
     artik bu koyu yari saydam zemin — kaldirildiktan sonra olculdu. */
  border: 0;
  background: rgba(7, 25, 15, .6);
  color: var(--eco-text-on-dark);
  cursor: pointer;
  transition: background .2s var(--ease-out);
}
.ed-bento__ac:hover { background: rgba(7, 25, 15, .82); }
/* Ikisi ayni izgara hucresinde ust uste. Onceki surumde display: none ile
   degistiriliyordu; display animasyonlanamadigi icin ikon zipliyordu. */
.ed-bento__ac-ikon {
  grid-area: 1 / 1;
  width: 20px; height: 20px; stroke-width: 2;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.ed-bento__ac-ikon--arti  { opacity: 1; transform: rotate(0deg) scale(1); }
.ed-bento__ac-ikon--kapat { opacity: 0; transform: rotate(-90deg) scale(.55); }
.ed-bento__k.is-acik .ed-bento__ac-ikon--arti  { opacity: 0; transform: rotate(90deg) scale(.55); }
.ed-bento__k.is-acik .ed-bento__ac-ikon--kapat { opacity: 1; transform: rotate(0deg) scale(1); }

/* Ton kartlari — iki gorsel + iki duz kart. Kurucu istegi uzerine yuzey
   dark-overlay'den dark'a alindi: zeminden ayrim 1.81:1 -> 1.19:1 dustu, yani
   kartlar daha az ayrisiyor (referansin kendi ayrimi da ~1.20:1).
   Kurucu istegiyle hairline kenar da KALDIRILDI: artik ton kartini zeminden
   ayiran tek sey bu 1.19:1'lik yuzey farki. Fotografli kartlarin kenarini
   gorselin kendisi ciziyor, onlar etkilenmiyor.
   Kontrastlar bu tonda daha iyi: yesil ikon 7.28:1 (onceki 4.76),
   metin 13.22:1 (onceki 8.64).
   Metin/isik koyu kart kaliplariyla ayni, ayrica ezme gerekmiyor. */
.ed-bento__k--ton {
  background: var(--eco-surface-dark);
}

/* MOBIL (<640px) — OLCULEN kusur: kart 320px'e inince kart 3'un metni
   (ikon + 3 satir baslik + 2 satir destek) kartin %89'una kadar tirmaniyordu;
   gradyan orada seffaflastigi icin en kotu kontrast 1.41:1'e dusmustu. Ayni
   metin masaustunde %61'de kaliyor — yuzdeyle tanimli TEK bir gradyan iki
   durumu birden cozemiyor.
   Cozum: karti yukselt (20 -> 26rem), ikonu kucult (86 -> 64px) ki metin bandi
   %89'dan ~%63'e insin; gradyan da ona gore, %60'a kadar >=.74 tutup %88'de
   tamamen aciliyor. Duraklar masaustuyle ayni gerekceyle SIYAH.
   Olculen sonuc: metin zemini 16-17:1, ust band acik.
   Kart 3'un destek satiri icerik turunda kisalirsa perde daha da acilabilir. */
@media (max-width: 639px) {
  .ed-bento__k--foto { min-height: 26rem; --ed-ikon: 64px; }
  /* Duz kartlar mobilde DIKEY: 350px kartta 40px padding + 64px ikon yan yana
     kalinca metne yalnizca 160px kaliyordu — "Birds carry seeds..." 5 satira
     kirildi, ikonun yaninda genis olu bosluk olustu. Referansin 41px'i 480px
     genislikteki kart icindi; ayni mutlak deger burada orantisiz agir basiyor.
     Dikey duzende metin ~286px genislige kavusuyor; padding de 32px'e iniyor. */
  .ed-bento__k--yatay .ed-bento__arka { padding: var(--eco-space-8); }
  .ed-bento__k--yatay .ed-bento__ic {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--eco-space-8);
  }
  /* Mobilde kart daha uzun ve metin daha cok satira yayiliyor: opak kuyruk
     daha yukari tasiniyor, ust yine de aciliyor. */
  .ed-bento__perde {
    background: linear-gradient(to top,
      rgba(0, 0, 0, .95) 0%,
      rgba(0, 0, 0, .94) 38%,
      rgba(0, 0, 0, .89) 52%,
      rgba(0, 0, 0, .74) 60%,
      rgba(0, 0, 0, .40) 70%,
      rgba(0, 0, 0, .12) 80%,
      rgba(0, 0, 0, 0) 88%);
  }
}

@media (min-width: 640px) {
  /* Referans izgarasi: 2 sutun, 3 esit satir, 20px aralik.
     Uzun kart 2 satir kaplar (~.96 oran), kisa kart 1 satir (~.46). */
  .ed-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(16rem, auto));
  }
  .ed-bento__k:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .ed-bento__k:nth-child(2) { grid-column: 2; grid-row: 1; }
  .ed-bento__k:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; }
  .ed-bento__k:nth-child(4) { grid-column: 1; grid-row: 3; }
  .ed-bento__k--foto { min-height: 0; }
  .ed-bento__k--foto .ed-bento__ifade {
    font-size: var(--eco-fontsize-h2);
    line-height: var(--eco-lineheight-h2);
    letter-spacing: var(--eco-letterspacing-h2);
  }
  .ed-bento__k--yatay .ed-bento__ifade {
    font-size: var(--eco-fontsize-h3);
    line-height: var(--eco-lineheight-h3);
    letter-spacing: var(--eco-letterspacing-h3);
  }
}
@media (min-width: 1000px) {
  /* Referans orani burada birebir: 3 esit satir, uzun kart 2 satir kaplar. */
  .ed-bento { grid-template-rows: repeat(3, 16rem); }
  .ed-bento__k--foto .ed-bento__ifade {
    font-size: var(--eco-fontsize-display-md);
    line-height: 1.1;
    letter-spacing: var(--eco-letterspacing-h1);
  }
  .ed-bento__k--yatay .ed-bento__ifade {
    font-size: var(--eco-fontsize-h2);
    line-height: var(--eco-lineheight-h2);
    letter-spacing: var(--eco-letterspacing-h2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ed-bento__k { transition: none; transform: none; }
  .ed-bento__isik { display: none; }
  .ed-bento__ic, .ed-bento__arka, .ed-bento__ac-ikon { transition: none; }
  .ed-bento__k.is-acik .ed-bento__ic { transform: none; }
  .ed-bento__arka { transform: none; }
}

/* ==========================================================================
   06a · Saha seridi — scroll ile kayan uc satir

   Referans: sync-scroll-slider.framer.website — TARAYICIDA OLCULDU:
     kutu 280x160 (oran 1.75), object-fit cover, radius 16px
     satir ici gap 20px, satirlar arasi 20px, satir yuksekligi 163px
     satir basi 6 / 7 / 7 gorsel; satirlar viewport'tan genis (2080px) ve
     baslangicta -320px kaydirilmis (iki yandan sarkiyor)
     hareket dogrusal, yumusatma yok (katsayilar sayfa ici betikte)

   BILEREK AYRILDIGIMIZ IKI YER (kaza degil):
   1) radius 16 -> 20px. Kurucunun kutu merdiveninde 16 diye bir kademe yok
      (8 form / 12 ic kutu / 20 kutu). 16px istenirse tek deger degisir.
   2) Zemin: referansin sayfasi rgb(5,5,5) ile neredeyse siyah; o, demo
      sayfasinin temasi. Bizde 01/03/05 zaten koyu, dorduncu bir koyu bolum
      "acik agirlik" kuralini zorlardi — serit acik yuzeyde duruyor.
   ========================================================================== */
/* Ust dolgu KISALTILDI (kurucu "fazla bosluk"). OLCULEN (1440): son gosterge
   etiketinden ilk gorsele 224px vardi — 32px li dolgusu + 96px bolum alt
   dolgusu + 96px seridin ust dolgusu. Altta ise son satirdan SSS sinirina
   yalniz 96px; yani bosluk zaten ASIMETRIKTI, serit asagi itilmisti.
   Ust dolgu 96 -> 32px: 1440'ta 224 -> 160px, 390'da 161 -> 128px.
   Serit dekoratif bir bant; komsu icerikle ayni bolum ritmine ihtiyaci yok. */
.ed-serit { overflow: hidden; background: var(--eco-surface-base); }
/* Ust dolgu IKI SINIFLA yaziliyor (.ed-sec.ed-serit): tek sinifla yazinca
   1174. satirdaki mobil kural (@media max-width:767px { .ed-sec {
   padding-block: space-16 } }) AYNI ozgullukte ve DAHA SONRA geldigi icin
   eziyordu — ustelik padding-block oldugu icin ust dolguyu da sifirliyordu.
   Olculen: 390px'te degisiklik hic uygulanmamisti (161px kaliyordu). */
.ed-sec.ed-serit { padding-top: var(--eco-space-8); }
.ed-serit__satir {
  display: flex;
  gap: 20px;
  width: max-content;
  margin-left: -320px;
  will-change: transform;
}
.ed-serit__satir + .ed-serit__satir { margin-top: 20px; }
.ed-serit__satir img {
  flex: 0 0 auto;
  width: 280px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--eco-radius-lg);
  display: block;
}
/* Referansin UC KADEMESI olculdu (kirilmalar 1200 ve 810'da):
     >=1200 : 280x160, radius 16, bosluk 20, baslangic -320
     810-1199: 240x130, radius 12, bosluk 12, baslangic -364
     <=809  : 200x110, radius 12, bosluk 12, baslangic -541
   Alt iki kademede radius 12px zaten --eco-radius-md ile birebir; sapma
   yalniz ust kademede (16 -> 20px, kutu merdiveni geregi). */
@media (max-width: 1199px) {
  .ed-serit__satir { gap: 12px; margin-left: -364px; }
  .ed-serit__satir + .ed-serit__satir { margin-top: 12px; }
  .ed-serit__satir img { width: 240px; height: 130px; border-radius: var(--eco-radius-md); }
}
@media (max-width: 809px) {
  .ed-serit__satir { margin-left: -541px; }
  .ed-serit__satir img { width: 200px; height: 110px; }
}
/* Betik hareket-azaltmada zaten erken cikiyor; transform yine de sifirlanir.
   Kendi blogumuz: dosyada bu medya sorgusundan 3 tane var, mevcut birine
   iliştirmek belirsizdi. */
@media (prefers-reduced-motion: reduce) {
  .ed-serit__satir { transform: none !important; }
  /* Hareket azaltmada metin tam gucte; karakter reveal calismaz. */
  .ed-reveal .ed-reveal__ch { opacity: 1 !important; transition: none; }
  /* Hareket azaltma: tarama durur, tum sahalar YANIK kalir. */
  .ed-saha__kutu, .ed-saha__tarama, .ed-saha__dron, .ed-saha__dron svg { animation: none; }
  .ed-saha__kutu { background-color: rgba(136, 196, 38, .22); border-color: var(--eco-surface-brand); }
  .ed-saha__tarama { opacity: 0; }
  .ed-faq__item, .ed-faq__dugme { transition: none; }
  .ed-faq__item:hover { transform: none; }
}

/* ==========================================================================
   06b · SSS — cam (glass) panel + BLURLU arka plan

   Arka plan kalibi kurucu istegiyle ANASAYFADAKI .hp-chain bolumunden alindi
   (olculdu): bg katmani inset -64px (blurun yumusak kenari bolum disinda
   kalsin), z-index -1 + isolation, img filter blur(64px) saturate(1.25),
   ustte/altta gradient ile sayfa yuzeyine eriyor.

   TEK FARK — opaklik: anasayfanin gorseli (a289) daha acik, .5 opaklikta
   bileske L=0.543 veriyor. Buradaki gorsel (104, puslu orman) daha koyu;
   ayni .5 ile L=0.404'e duserdi ve bolum sayfanin acik agirligini bozacak
   kadar kararirdi. Opaklik .38'e cekilerek bileske anasayfanınkine
   yaklastirildi. OLCULEREK secildi.

   Onceki surumdeki "acik tul + net fotograf" yaklasimi kaldirildi: artik
   fotograf zaten 64px blurlu oldugu icin koyu leke birakmiyor, tule gerek yok.

   BILEREK AYRILDIGIMIZ YERLER (cam kart, referans: sparkly-fox framer):
   1) radius 32 -> 20px (kurucunun kutu merdiveni).
   2) Tetik <details> DEGIL, button[aria-expanded] + bolge: <details>
      yuksekligi animate edilemiyor, kurucu "dan dan aciliyor" dedi.
      Yukseklik gecisi grid-template-rows 0fr -> 1fr ile.
   3) Soru 18px (body-lg): govde metninde en kucuk kademe yasak.
   ========================================================================== */
.ed-faqs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--eco-surface-page);
}
/* Kurucu istegi: blurlu fotograf arka plan KALDIRILDI, bolum ACIK tonlu.
   Cam paneli korumak icin duz beyaz zemin yerine yumusak marka yikamasi var —
   duz zeminde backdrop-filter hicbir sey kirmazdi ve kartlar siradan beyaz
   kutulara donerdi. Yesil burada YUZEY tonu olarak kullaniliyor (metin ya da
   ikon degil), dusuk alfada; kontrast asagida olculuyor. */
.ed-faqs::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 18% 6%, rgba(136, 196, 38, .18), transparent 70%),
    radial-gradient(54rem 30rem at 88% 94%, rgba(55, 122, 54, .13), transparent 72%);
}

.ed-faqs .ed-sec__head { max-width: 46rem; margin: 0 auto var(--eco-space-10); text-align: center; }

.ed-faq {
  display: grid;
  gap: var(--eco-space-3);
  max-width: 46rem;
  margin-inline: auto;
  /* OLCULEN kusur: sayfa ici betik bu listeye min-height REZERVE ediyor (bolum
     yuksekligi sabit kalsin, arka plan oynamasin diye). Grid'in varsayilan
     align-content'i STRETCH oldugu icin artan yer alti satira esit dagiliyor,
     her karta ~11.8px ekleniyordu; buton ustte kaldigindan bosluk sorunun
     ALTINDA birikiyor ve soru ortalanmamis gorunuyordu (6 x 11.8 = 71px,
     en uzun cevabin yuksekligi 71.2px — aritmetik birebir tutuyor).
     start ile rezerv altta toplaniyor: yukseklik yine sabit, soru ortali. */
  align-content: start;
}
.ed-faq__item {
  border-radius: var(--eco-radius-lg);
  background: rgba(255, 255, 255, .66);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  overflow: hidden;
}
/* Hover — kurucu "cok statik durdu" dedi. Golge YOK (projede --shadow-* tamamen
   none): ayrim camin yogunlasmasindan ve 1px yukselmeden geliyor. Yuvarlak
   dugme de hover'da doluyor, tiklanabilirlik belli olsun. */
.ed-faq__item {
  transition: background-color .24s var(--ease-out), transform .24s var(--ease-out);
}
.ed-faq__item:hover { background: rgba(255, 255, 255, .88); transform: translateY(-1px); }
.ed-faq__item:has(.ed-faq__soru:focus-visible) { background: rgba(255, 255, 255, .88); }
.ed-faq__item.is-acik { background: rgba(255, 255, 255, .92); transform: none; }
.ed-faq__dugme { transition: background-color .24s var(--ease-out), color .24s var(--ease-out); }
/* Ikon rengi KOYU: yesil dolgunun ustune beyaz ikon ~1.97:1 eder ve metin disi
   3:1 esigini gecemez (kendi kuralimiz: #88C426 koyu zeminde ikon rengi olabilir,
   ama USTUNE beyaz konmaz). Koyu ikonla ayni dolgu ~8.8:1 veriyor. */
.ed-faq__item:hover .ed-faq__dugme { background: var(--eco-surface-brand); color: var(--eco-text-primary); }
.ed-faq__soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eco-space-4);
  width: 100%;
  margin: 0;
  padding: var(--eco-space-5) var(--eco-space-6);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  color: var(--eco-text-primary);
}
.ed-faq__metin { min-width: 0; }
/* Yuvarlak dugme: bento kartlarindaki +/x kaliginin aynisi — iki ikon TEK
   izgara hucresinde ust uste, opaklik+donus ile gecis (display:none YOK). */
.ed-faq__dugme {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-base);
  color: var(--eco-text-primary);
}
.ed-faq__ikon {
  grid-area: 1 / 1;
  width: 18px; height: 18px;
  stroke-width: 2;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.ed-faq__ikon--eksi { opacity: 0; transform: rotate(-90deg); }
.ed-faq__item.is-acik .ed-faq__ikon--arti { opacity: 0; transform: rotate(90deg); }
.ed-faq__item.is-acik .ed-faq__ikon--eksi { opacity: 1; transform: rotate(0deg); }
.ed-faq__soru:focus-visible {
  outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
  outline-offset: -2px;
}
/* Yukseklik gecisi: 0fr -> 1fr. Ic sarmalayici overflow:hidden olmali,
   yoksa kapaliyken metin tasar. */
.ed-faq__kutu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease-out);
}
.ed-faq__item.is-acik .ed-faq__kutu { grid-template-rows: 1fr; }
.ed-faq__sar { overflow: hidden; }
.ed-faq__body {
  margin: 0;
  padding: 0 var(--eco-space-6) var(--eco-space-5);
  font-size: var(--eco-fontsize-body);
  letter-spacing: var(--eco-letterspacing-body);
  line-height: var(--eco-lineheight-body);
  color: var(--eco-text-secondary);
  opacity: 0;
  transition: opacity .26s var(--ease-out);
}
.ed-faq__item.is-acik .ed-faq__body { opacity: 1; transition-delay: .10s; }

/* 5 gosterge 900px'ten itibaren TEK SIRADA duruyor — paylasilan kuralin
   kendi davranisi (auto-fit / minmax(180px)). Arada 3+2 ve 6 sutunlu duzenler
   denendi; kurucu YAN YANA duran ilk hali tercih etti ve sikisikligin
   IZGARADAN degil RAKAM BOYUTUNDAN cozulmesini istedi (2026-09-21).
   Bu yuzden izgaraya hic dokunulmuyor; yalnizca rakamlar kuculuyor.
   Once bir kademe inildi (48 -> 40px); kurucu "hala sikisik" dedi, bir kademe
   daha inildi: metric-xl (48px) -> metric (32px).
   OLCUM (birimin alt satira dustugu oge sayisi / 5):
     1440 ve 1200 : 40px'te 0,  32px'te 0
     1024         : 40px'te 2,  32px'te 0   <- bu kademe burayi duzeltti
     900          : 40px'te 3,  32px'te 3   <- rakam degil BIRIM metni sinirlayici
   900px'te sutun 166px; orada kirilmayi bitirmek icin birim kademesinin de
   inmesi gerekir. Kurucu yalnizca rakamlari istedi, birime dokunulmadi.
   Kucultme .ed-kpis--kompakt ile SINIRLI: .hp-kpi__num PAYLASILAN bir sinif,
   index.html ve en/index.html de kullaniyor; anasayfa.css'e dokunmak o iki
   sayfayi da kaydirirdi.
   letterspacing metric ailesinde zaten 0, degismiyor; line-height kendi
   kademesine cekiliyor (boyut ve satir yuksekligi birlikte degisir). */
.ed-kpis--kompakt .hp-kpi__num {
  font-size: var(--eco-fontsize-metric);
  line-height: var(--eco-lineheight-metric);
}
/* Yukaridaki kuralin MEDYASI YOK, dolayisiyla paylasilan mobil kademeyi de
   eziyordu: anasayfa.css mobilde rakami 32px'e (fontsizemobile-metric-xl)
   cekiyor, benim kuralim onu 40px'te tutup rakami mobilde BUYUTUYORDU
   (olculdu: 390px'te 40px). Mobil kademe geri veriliyor — paylasilan kuralla
   ayni kirilim (767px). */
@media (max-width: 767px) {
  /* Mobilde 30px'te 1/5 ogede birim kiriliyordu, 28px'te 0/5 (olculdu). */
  .ed-kpis--kompakt .hp-kpi__num { font-size: var(--eco-fontsizemobile-metric); }
}

/* Paylasilan kural 900px'ten itibaren auto-fit / minmax(180px) istiyor; 900px'te
   kapsayici 828px ve 5 x 180 = 900px sigmadigi icin dizilis 4+1'e dusuyordu —
   yani kurucunun istemedigi "son satirda tek oge, sagi bos" durumu 900-1023
   araliginda geri geliyordu (olculdu). 5 sutun ACIKCA sabitleniyor.
   Rakam 40px'e indigi icin en uzun deger ("1,300+" = 115px) 900px'teki
   ~145px kullanilabilir sutuna rahat siginiyor. */
@media (min-width: 900px) {
  .ed-kpis--kompakt { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* MOBIL/TABLET (<900px) — paylasilan taban izgara 2 sutun; 5 oge 2+2+1
   diziliyor ve son satirin SAGI 175px bos kaliyordu. Besinci oge iki sutuna
   yayiliyor, boylece son satir da tam doluyor. Kenarliklar bozulmuyor: 5. oge
   tek sayili, yani zaten sol cizgi almiyor.
   Not: masaustu artik tek satir; bu kural yalnizca kucuk ekrani ilgilendiriyor
   ve kurucu isterse kaldirilabilir. */
@media (max-width: 899px) {
  .ed-kpis--kompakt .hp-kpi:nth-child(5) { grid-column: 1 / -1; }
}

/* Baloncuk HER GENISLIKTE gosterge kutusuna yaslanir.
   OLCULEN kusur: yukaridaki ">=900px" kurali baloncugu TETIGE ORTALIYOR;
   tetik artik etiketin sonunda oldugu ve sutunlar daraldigi icin 1024px'te
   sagdan 75px, 900px'te soldan 68px tasiyordu (kucuk ekranda da 390px'te
   sagdan 82px tasmisti). Kapsayiciyi tetikten li'ye almak tasmayi TANIM
   GEREGI imkansiz kilar: left/right 0 ile baloncuk kutu sinirlarini asamaz.
   Ortalama transform'unu ezmek ZORUNLU — yoksa >=900 kuralindaki
   translate(-50%) baloncugu yine disari kaydirir; hem gizli hem gorunur
   durum icin eziliyor.
   Sayfada tek bir .ed-tip var, bu yuzden kapsam daraltmasi guvenli. */
.ed-kpis--kompakt .hp-kpi:nth-child(5) { position: relative; }
.ed-kpis--kompakt .hp-kpi:nth-child(5) .ed-tip { position: static; }
.ed-kpis--kompakt .hp-kpi:nth-child(5) .ed-tip__bubble {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: translate(0, var(--eco-space-1));
}
.ed-kpis--kompakt .hp-kpi:nth-child(5) .ed-tip__bubble::after { left: 50%; }
.ed-kpis--kompakt .hp-kpi:nth-child(5) .ed-tip:hover .ed-tip__bubble,
.ed-kpis--kompakt .hp-kpi:nth-child(5) .ed-tip:focus-within .ed-tip__bubble {
  transform: translate(0, 0);
}

/* ==========================================================================
   04 · Kaydirmayla yigilan kart destesi (.ed-stack)

   Davranis referanstan OLCULEREK cikarildi ve SUREKLIDIR: ilerleme dogrusal,
   kademe/bekleme yok. Sol deste bir merdiven — arkadaki her kart bir kademe
   kucuk (-0.045), bir kademe asagi (+32px) ve bir kademe soluk (-0.22); z de
   bir azalir, boylece alt kenarlar dilim dilim gorunur. Sag sutun AKISTA
   duran uzun bir ray; ray yukari kayar, bloklar merkezden uzaklastikca solar.

   Sag sutun bir kutunun ICINDE DEGIL: koyu alan duz zemin, yalnizca kartlar
   yuvarlak kutu. Bu yuzden .ed-stack .container'in disinda, dogrudan
   .ed-sec'in cocugu duruyor. 100vw hilesi KULLANILMADI: dikey kaydirma
   cubugu varken yatay tasma yapiyor ve yaygin caresi olan overflow-x:hidden
   position:sticky'yi kiriyor.

   Uyarlarken bilerek AYRILDIGIMIZ yerler:
   - Golge yok: projede --shadow-* tamamen none. Derinlik yuzey tonundan.
   - Marka yesili yalniz YUZEY (etkin nokta). Metin/rakam asla yesil degil.
   - Metrik satiri yok: bu uc adim icin dogrulanmis sayi yok, uydurulmadi.
   - Ikonlar ve mini arayuzler .hp-step'ten devralindi; yeni SVG cizilmedi.

   .hp-steps'e DOKUNULMADI — onu EN ana sayfasi da kullaniyor.
   .is-live: surucu yoksa / hareket azaltilmissa / ekran darsa hicbir yigin
   stili uygulanmaz; bolum duz, okunur bir liste olarak kalir.
   ========================================================================== */
/* Zemin bolumden (.ed-sec--base) geliyor; burada ayrica boyamaya gerek yok.
   Alt bosluk kapanis metnini desteden ayirir. */
.ed-stack { margin-bottom: var(--eco-space-10); }
/* Canli modda pano 100vh ve icerigi dikeyde ortali; altinda zaten bos alan
   kaliyor. Ayrica marj eklemek bandi gereksiz asagi itiyordu. */
.ed-stack.is-live { margin-bottom: 0; }
.ed-stack__inner {
  width: min(100% - 2 * var(--eco-space-6), 68rem);
  margin-inline: auto;
  display: grid;
  gap: var(--eco-space-12);
}

/* Baslik PANONUN ICINDE ve ORTALI. Disarida birakilinca pano 100vh olup
   icerigi dikeyde ortaladigi icin baslikla kartlar arasinda ~250px olu bosluk
   kaliyordu; iceride olunca bosluk kalkiyor ve baslik adimlar boyunca ekranda
   kaliyor. Genel .ed-sec__head kuralina DOKUNULMADI — onu bolum 06 da
   kullaniyor ve o baslik sola dayali kalmali. */
.ed-stack__head { max-width: 46rem; margin-inline: auto; text-align: center; }

/* Canli DEGILKEN deste normal bir izgara. Tek sutun birakilirsa genis ekranda
   16/9 mock ~630px'e siserek bolumu eziyordu. */
.ed-stack__deck {
  display: grid;
  gap: var(--eco-space-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.ed-stack__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--eco-space-5);
  border-radius: var(--eco-radius-lg);
  /* Acik zeminden bir kademe: kart bolumden ayrissin (golge yok) */
  background: var(--eco-surface-subtle);
  overflow: hidden;
}
.ed-stack__count {
  position: absolute;
  top: var(--eco-space-5);
  right: var(--eco-space-5);
  margin: 0;
  padding: var(--eco-space-1) var(--eco-space-3);
  border-radius: var(--eco-radius-full);
  background: rgba(0, 0, 0, .06);
  font-family: var(--eco-fontfamily-num);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: 0;
  color: var(--eco-text-muted);
  opacity: .72;
}
.ed-stack__icon { color: var(--eco-icon-muted); opacity: .72; }
.ed-stack__mock {
  margin: var(--eco-space-5) 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--eco-radius-md);
  overflow: hidden;
  /* KOYU KALIYOR: icindeki .hp-ui* parcalari anasayfa.css'te tanimli ve
     en/index.html tarafindan da kullaniliyor (paylasilan bilesen; dolgular
     rgba(255,255,255,.14-.22), yani acik zeminde kaybolurlardi). Paneli koyu
     birakmak, anasayfayi etkileyecek ezmelere hic girmeden calisiyor. */
  background: var(--eco-surface-dark-deep);
}
.ed-stack__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-primary);
}
.ed-stack__tag {
  margin: var(--eco-space-2) 0 0;
  font-size: var(--eco-fontsize-body-sm);
  letter-spacing: var(--eco-letterspacing-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  color: var(--eco-text-muted);
  opacity: .72;
}

/* Sag sutun — adim rayi */
.ed-stack__track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--eco-space-16); }
.ed-stack__step { position: relative; padding-left: var(--eco-space-6); }
.ed-stack__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: var(--eco-space-2);
  height: var(--eco-space-2);
  border-radius: var(--eco-radius-full);
  background: rgba(0, 0, 0, .22);
  transition: background-color .3s var(--ease-out);
}
.ed-stack__step.is-on::before { background: var(--eco-surface-brand); }
.ed-stack__label {
  margin: 0 0 var(--eco-space-2);
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-md);
  line-height: var(--eco-lineheight-label-md);
  letter-spacing: var(--eco-letterspacing-label-md);
  text-transform: uppercase;
  color: var(--eco-text-muted);
  opacity: .6;
}
.ed-stack__title {
  margin: 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);
}
.ed-stack__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);
  opacity: .72;
}

/* --- Canli mod: yalniz genis ekran + hareket serbestken --- */
@media (min-width: 900px) {
  .ed-stack.is-live { height: calc(100vh + 1600px); }
  /* Pano ekranin TAM ORTASINDA dursun: tepeye sabitlenip tam ekran yukseklik */
  .ed-stack.is-live .ed-stack__pin {
    position: sticky;
    /* Pano ekranda ORTALI ama 100vh DEGIL: tam ekran yukseklikte icerik
       (baslik+deste ~486px) dikeyde ortalaninca altta 207px bos alan kalip
       bandi asagi itiyordu, ustte de ayni kadar bosluk oluyordu.
       Yukseklik icerige yaklastirildi, pano da top ile ekrana ortalandi. */
    height: min(100vh, 44rem);
    top: max(0px, calc((100vh - 44rem) / 2));
    display: flex;
    align-items: center;
  }
  .ed-stack.is-live .ed-stack__inner {
    width: min(100% - 2 * var(--eco-space-6), 60rem);
    grid-template-columns: minmax(0, 20rem) minmax(0, 29rem);
    grid-template-areas: "bas bas" "deste ray";
    justify-content: center;
    /* satir araligi sutun araligindan kucuk: baslik kartlara yapisik dursun */
    gap: var(--eco-space-10) var(--eco-space-16);
    align-items: center;
    padding-block: 0;
  }
  /* grid-area yalniz CANLI modda atanir: sablon yokken adlandirilmis alan
     yerlesimi bozuyor (hero'daki .hp-hero__col/copy ayni tuzakti). */
  .ed-stack.is-live .ed-stack__head { grid-area: bas; }
  .ed-stack.is-live .ed-stack__deck { grid-area: deste; }
  .ed-stack.is-live .ed-stack__view { grid-area: ray; }
  .ed-stack.is-live .ed-stack__deck { position: relative; display: block; height: 25rem; }
  .ed-stack.is-live .ed-stack__card {
    position: absolute;
    inset: 0;
    /* Icerik dikeyde ortada: ust hizada birakilinca altta ~85px olu bosluk
       kaliyor ve kart dengesiz duruyordu. Yatay hizalama SOLDA kaliyor —
       referans ortaliyor ama bu, sayfanin tipografi duzenine ters duserdi. */
    justify-content: center;
    transform-origin: 50% 0;
    will-change: transform, opacity;
  }
  /* Derinlik perdesi. Kart KUTUSU her zaman opak kalir ki arkasindakini
     tamamen kapatsin; karartmayi ustune serilen bu katman yapar.
     Onceden derinlik element opakligiyla veriliyordu: gecis sirasinda ondeki
     kart 0.89'a dusunce YARI SAYDAM oluyor ve arkadaki iki kartin basligi
     icinden okunuyordu (dinlenmede gorunmuyordu, cunku orada opaklik 1). */
  .ed-stack.is-live .ed-stack__card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--eco-surface-base);
    opacity: var(--k, 0);
  }
  /* Yalniz ondeki kartin mini arayuzu oynasin */
  .ed-stack.is-live .ed-stack__card:not(.is-on) .hp-ui * { animation-play-state: paused; }
  /* Ray penceresi: disari tasan bloklar kirpilsin */
  .ed-stack.is-live .ed-stack__view { position: relative; height: 25rem; overflow: hidden; }
  .ed-stack.is-live .ed-stack__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    will-change: transform;
  }
}

@media (min-width: 900px) {
  .ed-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; }
  .ed-tagset { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--eco-space-8); }
}

@media (max-width: 767px) {
  .ed-sec { padding-block: var(--eco-space-16); }
  .ed-hero__inner { padding-block: var(--eco-space-20) var(--eco-space-12); }
  .ed-social__title { font-size: var(--eco-fontsizemobile-h3); }
}

@media (prefers-reduced-motion: reduce) {
  .ed-faq__ikon, .ed-faq__kutu, .ed-faq__body { transition: none; }
  .ed-tip__bubble, .ed-tip__btn { transition: none; }
  /* Taban kuraldaki durdurma (.hp-hero__media img, 0,1,1) yukaridaki sayfaya
     ozel kurali (0,2,1) yenemiyor; hareket burada acikca durduruluyor. */
  .ed-stage .hp-hero__media img { animation: none; transform: scale(1); }
}

/* ==========================================================================
   07 · Kapanis CTA — sayfaya ozel yukseklik ezmesi

   Kurucu "kart cok yuksek duruyor" dedi. OLCULEN (1440): kutu 488px ama
   icerik yalnizca 224px; kalan 264px dolgu ve aralik (96+96 dolgu,
   20+32+20 margin). hp-close PAYLASILAN bir bilesen (index.html ve
   en/index.html de kullaniyor) — anasayfa.css'e dokunmak iki ana sayfayi da
   kaydirirdi, bu yuzden ezme sayfaya ozel .ed-close sinifiyla BURADA.
   Dolgu 96 -> 48px, ic ritim sikilastirildi, baslik display-md -> display-sm
   ve 30ch ile daha az satira kiriliyor. */
/* Ust bosluk: paylasilan .hp-close'un padding-block'u "0 80px" — UST dolgusu
   YOK, koyu kutu bolum sinirinda basliyor ve SSS'in tonlu zemini dogrudan
   kutuya dayaniyordu (kurucu "carpisiyor" dedi). */
/* UST 64 -> 0: ed-faqs ile bu bolumun zemini AYNI (#F7F7F7), bu yuzden
   bosluklar birlesiyor. OLCULDU: kartin ustunde 96 (faqs alt dolgusu)
   + 64 = 160px, altinda 80px vardi - iki kati. Ust dolgu sifirlaninca
   ust 96 kalir, .hp-close alti da 96 oldugu icin kart 96/96 ortalanir. */
.ed-close { padding-top: 0; }
.ed-close .hp-close__box { padding: var(--eco-space-12) var(--eco-space-10); }
/* Iki eylem YAN YANA. Paylasilan kural her .btn'e margin-top veriyor; satir
   icinde bozuk durdugu icin sifirlanip bosluk satirin gap'ine birakildi. */
.ed-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--eco-space-4);
  margin-top: var(--eco-space-6);
}
.ed-close .hp-close__box .btn { margin-top: 0; }
.ed-close .hp-close__box h2 {
  max-width: 30ch;
  font-size: var(--eco-fontsize-display-sm);
  line-height: var(--eco-lineheight-display-sm);
  letter-spacing: var(--eco-letterspacing-display-sm);
}
.ed-close .hp-close__box p { margin-top: var(--eco-space-4); }
.ed-close .hp-close__box .btn { margin-top: var(--eco-space-6); }
.ed-close .hp-close__note { margin-top: var(--eco-space-4); }
@media (max-width: 767px) {
  .ed-close .hp-close__box { padding: var(--eco-space-10) var(--eco-space-6); }
}

/* Mobile reading rhythm: one lead statement, then readable supporting copy. */
@media (max-width: 900px) {
  .ed-reveal__p {
    font-size: var(--eco-fontsize-body-xl);
    line-height: var(--eco-lineheight-body-xl);
    letter-spacing: var(--eco-letterspacing-body-xl);
    font-weight: var(--eco-fontweight-regular);
  }
  .ed-reveal__p--lead {
    font-size: var(--eco-fontsizemobile-display-sm);
    line-height: var(--eco-lineheight-display-sm);
    letter-spacing: var(--eco-letterspacing-display-sm);
    font-weight: var(--eco-fontweight-medium);
  }
  .ed-reveal__w { white-space: normal; overflow-wrap: anywhere; }
  .ed-reveal.is-hazir .ed-reveal__ch { opacity: 1; transition: none; }
}