/* ==========================================================================
   For Businesses (EN) — sayfaya OZEL kurallar.

   Bilesenlerin buyuk cogunlugu anasayfa.css'ten gelir: hp-hero ve hero ic
   parcalari
   (__proof + __strip: marka hapi ve sonsuz akan logo seridi; __problem: cam
   kart kabugu), hp-work + hp-folder (klasor kartlari), hp-steps + hp-step +
   hp-ui (animasyonlu arayuz mock'lari), hp-close, hp-link, hp-h2,
   hp-desc, eco-icon, hp-page, reveal-up.

   ENVANTER SAYILARAK GUNCELLENDI, tahminle degil: bant kaldirilinca listede
   kalan logo bandi sinifi ile sayfada hic kullanilmayan iki yardimci sinif
   cikarildi, fiilen kullanilanlar eklendi. (Sayim: her sinif icin HTML'de
   gecis adedi.)
   Kopyalamak yerine PAYLASIYORUZ: ana sayfa, ecoDrone ve bu sayfa ayni
   tasarim dilini konussun.

   IKI FAZLI SAHNE KULLANILMIYOR — kurucu istegi: scrollda blurlanip dev
   metin gelmesi bu sayfada yok. Hero duz bir bolum, bolum 02'nin basligi
   kartlarin ustunde gorunur bir h2. main.js sahneye querySelector ile
   baglandigi icin sinif olmayinca hic baglanmiyor; paylasilan JS'e
   dokunulmadi.

   IKON KURALI: elle SVG cizilmedi. Tum ikonlar assets/icons/ altindaki
   vendored Tabler v3.46.0 outline dosyalarindan OLDUGU GIBI alindi.

   LINK POLITIKASI — kurucu karari: brief'teki gelecek IA adresleri
   (/en/request-a-demo/, /en/technology/ecodrone/, /en/tree-planting/,
   /en/technology/natureos/, /en/how-we-work/, /en/case-studies/) AYNEN
   yazildi. Bu sayfalar acilana kadar link denetimi onlari kirik gosterecek;
   bu BILINCLI bir tercih, kaza degil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · HERO — sahne icinde, ecoDrone EN ile ayni dizilim
   -------------------------------------------------------------------------- */

/* Hero kadraji — SAYFAYA OZEL KURAL YOK, taban davranis gecerli.
   Onceki surumde scale(1) + hafif suzulme vardi; TEK gerekcesi fotograftaki
   iki drone'un 1.18 buyutmede kadrajdan disari itilmesiydi. Kurucu istegiyle
   fotograf drone'suz bir ORMAN goruntusune (sisli kozalakli orman) gecti:
   sayfa hem fidan dikimi hem tohum ekimi anlatiyor, tek yontemi imleyen bir
   gorsel dogru degildi. Kadrajdan cikacak bir ozne kalmadigi icin sayfaya
   ozel sapma KALDIRILDI — anasayfa.css'teki scale(1.18) + hp-drift aynen
   uygulaniyor. Kullanilmayan fb-hero-suzul keyframe'i de silindi. */

/* KENDI HERO IZGARAM KALDIRILDI — paylasilan .hp-hero__inner kullaniliyor.
   OLCULEN kusur: sayfaya ozel kapta width:100% yoktu; hero bir flex kabi
   oldugu icin container %100 yerine ICERIGINE gore buzulup ortalaniyordu.
   Sonuc: kap sol 312 / genislik 816, baslik sol 352 — ana sayfada kap sol
   120 / 1200, baslik sol 160. Yani blok iki yanda 192px iceride kaliyordu.
   Paylasilan sinifa gecince izgara alanlari ("copy problem" / "proof
   problem"), padding ve kirilma noktalari da kendiliginden geliyor. */

/* METIN BLOGU DIKEYDE ORTALANIYOR — paylasilan izgara `grid-template-rows:
   1fr auto` + `align-items: end` ile calisiyor, yani kopya sutunu ust satirin
   DIBINE yaslaniyor. Hero'daki "31+ million" hapi kalkinca alt satir 104 ->
   52px'e indi, ust satir 564 -> 616px'e buyudu ve bu 52px'in tamami blogu
   asagi itti. OLCULEN: metin sutununun merkezi hero merkezinden 102px asagida
   (hap dururken 50px idi; ana sayfa kontrolunde de 50px).
   Sabit bir piksel kaydirmasi yerine hizalamayi duzeltiyoruz: blok kendi
   satirinda ortalanir, boylece alt satir ileride yine degisse de yerinde
   kalir. Yalniz izgaranin kurulduğu >=900px'te gecerli. */
@media (min-width: 900px) {
  /* Kurucu "biraz daha asagi" dedi. Yalniz align-self:center blogu hero'nun
     TAM ortasina koymuyor: hero ic dolgusu asimetrik (ust 112px / alt 40px),
     bu yuzden ust satirin ortasi hero merkezinin 30px YUKARISINA dusuyor
     (OLCULEN: blok merkezi 420, hero merkezi 450).
     Ortalanmis bir izgara ogesinde margin, kalan bosluğu asimetrik boldugu
     icin blogu margin'in YARISI kadar kaydirir: 64px -> 32px asagi, yani
     merkez ~452 = hero merkezi. Sihirli piksel degil, token. */
  .fb-hero .hp-hero__col {
    align-self: center;
    margin-top: var(--eco-space-16);
  }
}

/* Vaka karti ana sayfanin problem kutusuyla AYNI cam kabuk. Tek eklenen,
   kutunun cizgisinden sonra gelen baglanti satiri. Cam butcesi korunuyor:
   sayfada 2 cam katman var (ikincil buton + bu kart), EDS siniri 2-3. */
/* KART TAMAMEN TIKLANABILIR — kurucu istegi: "Read the Story" kalksin,
   hoverda sag ustte ok belirsin, karta hover efekti gelsin.
   <aside> yerine <a>: referansta da kartin kendisi bir baglanti.
   aria-labelledby KALDIRILDI; linkin adi "Case Study" olurdu ve hedefi
   anlatmazdi, yerine acik bir aria-label yazildi.
   Hover dolgusu sistemin kendi cam hover'i (ikincil butonla ayni token).
   GOLGE YOK — proje kurali. */
.fb-case {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: background-color .24s var(--ease-out), border-color .24s var(--ease-out),
              transform .24s var(--ease-out);
}
.fb-case:hover,
.fb-case:focus-visible {
  background: var(--eco-glass-bg-hover);
  /* Kurucu "cok baskin border sevmiyorum" dedi: hover kenari yumusatildi.
     Taban cam kenari .17; hover .34 ile iki katiydi, .24'e cekildi —
     durum degisimi hala gorunur ama one cikmiyor. */
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-2px);
}
/* Metin oku ezmesin: govdeye sag dolgu. Ok 20px kenarda ve 20px genis,
   etiket satiri kartin sagina kadar uzaniyordu. */
.fb-case .hp-hero__problem-body { padding-right: var(--eco-space-8); }
/* Ok: vendored Tabler arrow-right (YATAY). Yukari-saga bakan ok kurucuya
   "baska siteye gidiyor" hissi verdigi icin degistirildi.
   Elle cizilmedi; mask + currentColor
   kalibi .hp-folder__ok ile ayni. Dinlenme halinde gizli. */
.fb-case__ok {
  position: absolute;
  top: var(--eco-space-5);
  right: var(--eco-space-5);
  width: var(--eco-space-5);
  height: var(--eco-space-5);
  background-color: var(--eco-text-on-dark);
  -webkit-mask: url('../assets/icons/arrow-right.svg') no-repeat center / contain;
          mask: url('../assets/icons/arrow-right.svg') no-repeat center / contain;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.fb-case:hover .fb-case__ok,
.fb-case:focus-visible .fb-case__ok { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fb-case, .fb-case__ok { transition: none; }
  .fb-case:hover, .fb-case:focus-visible { transform: none; }
  .fb-case__ok { transform: none; }
}

/* VAKA KARTININ IC DUZENI — referans: kora.framer.media hero sag alt karti.
   OLCULDU (1440): kart 450x218, solda 153x198 gorsel, sagda 267x198 panel.
   Panel ici sira: etiket -> aciklama cumlesi -> ayirici -> rakam ve HEMEN
   YANINDA ne oldugu. Rakam 30px/600, yanindaki aciklama 13px/600 ve iki
   satira sariyor; aralarinda 11px. Etiket ile cumle arasi 9px, cumle ile
   rakam satiri arasi 40px, panel ic dolgusu 20px.

   BILEREK AYRILDIGIMIZ YER: referansta etiket KOYU BIR HAP icinde. Kurucu
   "kartin tasarimini degistirme, ana sayfayla uyumsuz hale getirme" dedigi
   icin hap ALINMADI; yalnizca SIRALAMA/KONUMLANDIRMA alindi, etiket bizim
   mevcut eyebrow gorunumunde kaldi. Cam kabuk, radius ve 7rem 3/4 gorsel
   paylasilan .hp-hero__problem'den geliyor, degismedi. */
.fb-case__ozet {
  margin: var(--eco-space-2) 0 0;
  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);
}
/* Rakamin YANINDAKI aciklama: kalan genisligi alir ve kendi icinde sarar,
   rakami asagi itmez (min-width:0 olmadan flex ogesi sarmayi reddediyor). */
.fb-case__ne {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--eco-fontsize-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  letter-spacing: var(--eco-letterspacing-body-sm);
  color: var(--eco-color-neutral-300);
}
/* Marka logosu gorselin UZERINDE — ana sayfadaki .hp-chain__logo deseninin
   aynisi (tek renk cizim, brightness(0) invert(1) ile beyaza cevriliyor).
   Boyu orada 40px; buradaki gorsel 112px genisliginde oldugu icin 24px.
   Konumlandirma icin figure'e relative gerekiyor: PAYLASILAN kurala
   dokunmadan sayfaya ozel ezme. */
.fb-case .hp-hero__problem-media { position: relative; }
/* Rakam ve aciklamasi DIKEYDE ORTALANIR — kurucu "yaninda durmali" dedi.
   Paylasilan kuralda align-items: baseline var; taban cizgisi hizalamasi
   kucuk metni OLCULEN 34px asagi itiyordu. Ustten hizalayinca da rakam
   59px, metin 43px oldugu icin metin SAG USTTE kaliyordu: dikey orta
   farki 1440'ta -8px, 390'da +10px. Ortalayinca fark sifira iner ve metin
   gercekten rakamin YANINDA durur. */
.fb-case .hp-hero__problem-value { align-items: center; }
@media (max-width: 399px) {
  .fb-case__ne { flex-basis: 100%; }
}

/* Rakam bir kademe KUCULTULDU — kurucu "cok buyuk oldu" dedi.
   Paylasilan kural metric-lg (40px, mobil 30px) veriyor; merdivende bir alt
   kademe metric (32px, mobil 28px). Ham piksel yazilmadi, token kademesi
   kullanildi; referanstaki 30px ile de ayni civarda.
   Mobil ezmesi AYRI bir media blogunda: mevcut 767px blogunun icine capa
   atmak yerine bagimsiz yazmak daha guvenli. */
.fb-case .hp-hero__problem-num {
  font-size: var(--eco-fontsize-metric);
  line-height: var(--eco-lineheight-metric);
  letter-spacing: var(--eco-letterspacing-metric);
}
@media (max-width: 767px) {
  .fb-case .hp-hero__problem-num { font-size: var(--eco-fontsizemobile-metric); }
}
/* OZGULLUK DUZELTMESI: paylasilan .hp-hero__problem-media img kurali
   (0,1,1) tek sinifli .fb-case__logo secicimi (0,1,0) yeniyordu; height:100%
   ve object-fit:cover kazandigi icin logo OLCULEN 87x149 ile gorselin
   tamamini kapliyordu (24px olmaliydi). Konumlandirma dogruydu, yalniz
   boyut eziliyordu. Secici uc parcaya cikarildi. */
.fb-case .hp-hero__problem-media .fb-case__logo {
  position: absolute;
  left: 50%;
  bottom: var(--eco-space-5);
  z-index: 2;
  width: auto;
  max-width: 78%;
  height: var(--eco-space-6);
  object-fit: contain;
  transform: translateX(-50%);
  filter: brightness(0) invert(1);
}

/* CAM KARTIN BLUR’U — sayfaya ozel ezme KALDIRILDI, cunku sebebi kalmadi.
   Blur’u olduren sey, sahnenin canli sinifiyla hero’ya eklenen will-change
   idi (olculmustu: etki %0.1; will-change notr birakilinca %96.3). Sahne bu
   sayfadan cikarilinca o kural hic eslesmiyor, ustelik fotograf artik
   hero’nun KARDESI degil COCUGU — yani kartin backdrop kokunde zaten
   fotograf var. NOT: ana sayfada sahne durdugu icin ORADAKI ayni kusur
   SURUYOR, karar kurucuda. */

/* --------------------------------------------------------------------------
   02 · IS BIRLIGI MODELLERI
   hp-work + hp-folder oldugu gibi kullaniliyor; tek eklenen, kartlarin
   altindaki etiket satiri.
   -------------------------------------------------------------------------- */
.fb-work__lead { max-width: 46rem; margin: var(--eco-space-5) 0 0; }

/* USTE SABITLEME GERI ALINDI — kurucunun bildirdigi CAKISMA bundandi.
   OLCULEN: hover'da on yuz 96px asagi kayiyor, uzerindeki rakam da onunla
   kayiyor; govde uste sabitlenince rakam metnin USTUNE biniyordu (baslikla
   11px, aciklamayla 36px ortusme; 1024/900'de baslikla 42px). Ana sayfada
   govde ALTTA oldugu icin ayni hover'da hic ortusme yok. Ust dolguyu
   buyuterek cozmek islemiyor: rakamin hover'daki alt kenarini temizlemek
   ~147px ister ve icerik karta sigmaz. Paylasilan davranisa donuldu.

   SATIR AYIRMA KALDIRILDI — kurucu referans olarak ana sayfayi gosterdi:
   "bottom aligned bak orda ona gore yap".
   OLCULDU (son metin satirinin kart dibine uzakligi): ana sayfada 1440,
   1200, 1024, 960, 900 ve 390'da UC KARTTA DA 39px, sapma 0. Bizde ayrilan
   yer yuzunden 90/64/90px cikiyordu; kutu dibe yasliydi ama metin kutunun
   USTUNDE kalip altinda 54/28/54px bos birakiyordu — dibe yasli
   GORUNMUYORDU.
   Ayrica ana sayfa BASLIKLARI HIZALAMIYOR: sapma 25-31px. Yer ayirmak,
   referansin bilerek cozmedigi bir sorunu cozuyordu ve bedeli o bosluktu.
   Referans davranisa donuldu: metin dibe yaslanir, basliklar metin
   uzunluguna gore dusar. */

/* SOLID DOLGU ACIK — kurucu istegi: bu sayfadaki surumde yesil degil beyaz.
   --on-dolgu tek basina yetmez: on yuz, sekme ve sekmenin ::after kivrimi
   ayni degiskeni okur (onlar kendiliginden beyazlar), ama baslik, aciklama,
   rakam ve ok --eco-text-on-dark ile BEYAZ; dolgu beyazlayinca gorunmez
   olurlardi. Dorduncu de koyuya cevriliyor.
   Aciklamadaki opacity: .72 KALDIRILDI: EDS "opacity ile soluklastirma yok"
   diyor; yerine token rengi kullaniliyor. */
/* KAYDIRMA YARIYA INDIRILDI — bildirilen CAKISMANIN cozumu.
   Hover'da on yuz asagi kayiyor, uzerindeki rakam da onunla kayiyor ve
   metnin ustune biniyordu. Paylasilan deger 96px; brief'in kart metni bu
   bilesenin tasarlandigindan uzun oldugu icin govde yuksek kaliyor ve
   rakamin inecegi bosluk yetmiyor.
   OLCULEN SUPURME (yukseklik x kaydirma): 96px ile temizlemek 672px'lik
   kart ister; 48px ile 544px yetiyor. Kartlari %30 uzatmaktansa hareketi
   yariya indirmek secildi — hareket hala gorunur.
   Media query DISINDA: mobilde de gecerli olmali. */
#ways-to-partner .hp-folder { --kaydir: 48px; }
#ways-to-partner .hp-folder { --on-dolgu: var(--eco-surface-base); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #ways-to-partner .hp-folder { --on-dolgu: var(--eco-surface-base); }
}
#ways-to-partner .hp-folder__title { color: var(--eco-text-primary); }
#ways-to-partner .hp-folder__desc  { color: var(--eco-text-secondary); opacity: 1; }
#ways-to-partner .hp-folder__n     { color: var(--eco-text-primary); }
#ways-to-partner .hp-folder__ok    { color: var(--eco-text-primary); }

/* Uste sabitlemenin BEDELI ve odemesi. OLCULEN: govde artik kartin altini
   900px'te 57px tasiyordu (1024'te -1 ile sinirda, 1440'ta -107 rahat) ve
   .hp-folder__pocket overflow:hidden oldugu icin metin KIRPILIYORDU.
   aspect-ratio'yu banda gore degistirmek breakpoint'te boy sicramasi
   yaratiyordu; min-height ise yalniz dar bantta devreye girip genis
   ekranda kendiliginden atil kalir (1440'ta aspect zaten 518px veriyor).
   Yalniz 3 sutunlu bant hedefleniyor: mobil (4/5) ve tek sutun etkilenmez. */
@media (min-width: 900px) {
  /* width:100% ZORUNLU. min-height oran-kaynakli yuksekligi gecince
     aspect-ratio bu kez GENISLIGI YUKSEKLIKTEN turetiyor: 464 x 0.7 = 325px
     ve kart 1fr'lik sutununu tasiriyordu (olculen: ebeveyni 900'de 59px,
     960'ta 41px asiyor; sayfa 900'de 23px, 960'ta 3px yatay kayiyordu).
     Kontrol grubu: ana sayfa ve ecoDrone ayni bantta temiz, yani kusur
     paylasilan bilesende degil bu kuraldaydi. Genislige artik sutun karar
     verir, oran yalniz taban yuksekligi verir. */
  /* 29rem -> 30rem: genislik sutuna baglaninca kartlar daraldi (960'ta
     325 -> 284px), aciklamalar bir satir daha sardi ve icerik 464px'i 7px
     asip kirpiliyordu. 480px, olculen en kotu duruma 16px pay birakir. */
  /* Kaydirma 48px'e inince 1440 ve 900'un ikisi de bu yukseklikte temiz
     cikti (olculdu). Kart 518 -> 544px; onceki deger yetmiyordu. */
  #ways-to-partner .hp-folder { min-height: 34rem; width: 100%; }
}

/* --------------------------------------------------------------------------
   03 · YONTEM KARTLARI — "The right method for the land."

   Iki yontem esit agirlikta sunuluyor (brief ikisini de alternatif olarak
   veriyor), bu yuzden BILEREK esit boyutta iki kart: burada "gercek boy
   farki" kurali uygulanmadi, cunku boy farki hiyerarsi ima eder ve brief'te
   yontemler arasinda hiyerarsi yok. Agirlik farki yerine her kart kendi
   ikonunu, kendi zemin tonunu ve kendi fotografini tasiyor.

   RADIUS MERDIVENI: dis kutu 20px, ic gorsel 12px.
   -------------------------------------------------------------------------- */
.fb-method { background: var(--eco-surface-base); padding-block: var(--eco-space-24); }
.fb-method__head { max-width: 46rem; margin-bottom: var(--eco-space-12); }
/* YIGIN — referans stackedcard.framer.website, tarayicida OLCULDU:
   . dinlenme merdiveni: arkadaki her kart scale 1 - 0.06i, translateY
     +%6.5 x i (SAHNE YUKSEKLIGININ orani; 820px'de 37.1px, 1440'ta 39px
     olcuuldu -> sabit piksel DEGIL, oransal). Opaklik hep 1, solma yok.
   . cikis: ondeki kart sabit olcekle yukari, sahne yuksekliginin %155'i.
   . butce: gecis basina 90vh; pist = 90vh x (adet-1) + 100vh.
   . sahne: referansta max 1000px; yukseklik min(600px, (100vw-48px) x 0.74).
   . <=820px: referans efekti KAPATIYOR, duz listeye donuyor.
   BILEREK AYRILDIGIMIZ YERLER: (1) SAHNE GENISLIGI referansin 1000px'i DEGIL,
   sitenin kendi icerik kutusu. Referansin olcusunu birebir almak kartlari
   1440'ta sol 220'ye koyuyordu, oysa ustteki ve alttaki butun bolumler sol
   160 / 1120 genislikte — kart "icerde", komsulari "disarda" duruyordu.
   Site genelinde TEK bir icerik genisligi olmali; referans bu kurali ezemez.
   (2) radius bizim merdivende 20px (referans 28px);
   ve surus JS'in kart kart inline transform yazmasi yerine tek bir --fb-p
   degiskeni + CSS hesabi (ana sayfadaki sahne ile ayni kalip). */
.fb-stack {
  --sahne-yuk: min(600px, calc((100vw - 3rem) * 0.74));
  position: relative;
  height: calc(90vh * (var(--adet) - 1) + 100vh);
  /* BASLIK-KART ARALIGI: sabitleme pisti 100vh, kart ondan kisa; ortalaninca
     kartin USTUNDE (100vh - kart)/2 kadar olu alan kaliyordu — 1440'ta
     OLCULEN 150px, dolayisiyla baslik-kart araligi 196px goruluyordu, komsu
     bolumlerde (ornegin is birligi modelleri) ise 48px. Pisti tam o kadar
     yukari cekiyoruz. Negatif margin kutunun OLCUSUNU degistirmedigi icin
     --fb-p surusu (offsetHeight ve getBoundingClientRect().top uzerinden)
     aynen dogru kalir; transform ile cekseydik surus kayardi. */
  margin-top: calc((var(--sahne-yuk) - 100vh) / 2);
  /* ALT TARAF da ayni olu alani tasiyor: pistin son 100vh karesinde kart
     ortalandigi icin ALTINDA da (100vh - kart)/2 bosluk kaliyordu. Ustte
     kapatip altta birakmistim; OLCULEN: kart alti -> sonraki bolum basligi
     366px, oysa 02->03 sinirinda 192px. Simdi alt da kapali, iki sinir da
     96+96 = 192px. Kutu olcusu degismedigi icin --fb-p surusu etkilenmez;
     kaydirma bittiginde sonraki bolum tam kartin alt kenarindan basliyor. */
  margin-bottom: calc((var(--sahne-yuk) - 100vh) / 2);
}
.fb-stack__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding-inline: var(--container-px);
}
.fb-stack__sahne {
  position: relative;
  width: 100%;
  /* Sabit sayi YAZMA: genislik sitenin kabindan turetiliyor, boylece komsu
     bolumlerle sol/sag kenarlar her genislikte birebir ayni kaliyor. */
  max-width: calc(var(--container-max) - 2 * var(--container-px));
  margin-inline: auto;
  height: var(--sahne-yuk);
}
.fb-stack__kart {
  --basamak: max(0, calc(var(--i) - var(--fb-p, 0)));
  --cikis:   max(0, calc(var(--fb-p, 0) - var(--i)));
  position: absolute;
  inset: 0;
  z-index: calc(10 - var(--i));
  display: grid;
  /* 50/50. Referansta (stackedcard.framer.website) olctugum bolunme esit
     DEGILDI ve onu birebir kopyalamistim; kurucu "gorselin genisligi daha az
     gibi" diyerek fark etti — hakliydi, 1440'ta gorsel sutunu 54px dardi.
     Referanstan BILEREK ayriliyoruz.
     Yuzde yerine minmax(0,1fr): esit boler, ileride araya bosluk eklenirse
     tasma yapmaz ve uzun bir kelime metin sutununu payinin otesine itemez. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--eco-radius-lg);
  background: var(--kart-zemin, var(--eco-surface-page));
  transform-origin: 50% 50%;
  will-change: transform;
  transform: perspective(900px)
             translateY(calc(6.5% * var(--basamak) - 155% * var(--cikis)))
             scale(calc(1 - 0.06 * var(--basamak)));
}
/* Kartin cevresinde CIZGI YOK (kurucu istegi) ve golge de yasak; dolayisiyla
   kartin sayfadan ve arkadaki karttan ayrismasi yalnizca ZEMIN TONUYLA
   saglaniyor — referans da her karta ayri bir renk veriyor. Arkadaki kart
   olcek 0.94 + %6.5 asagi kaydigi icin altta ~21px'lik bir seritle gorunuyor;
   ton farki o seridi okunur kiliyor. */
.fb-stack__kart:nth-child(1) { --kart-zemin: var(--eco-surface-page); }
.fb-stack__kart:nth-child(2) { --kart-zemin: var(--eco-surface-subtle); }

.fb-stack__metin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--eco-space-12);
  overflow: hidden;
}
.fb-stack__gorsel { position: relative; margin: 0; overflow: hidden; background: var(--eco-surface-subtle); }
.fb-stack__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* GORSEL SECIMI kart kenarini da belirliyor: kart beyaz sayfada ve cevresinde
   cizgi yok, dolayisiyla fotografin ust serisi beyaza patlarsa kartin sag
   kenari ve kose yuvarlamasi GORUNMEZ oluyor. Ilk denedigim kare (e659de59)
   tam bunu yapiyordu — 476x600 kirpimda ust ucte ikisi beyaz gokyuzu. Yerine
   gecen kare alacakaranlikta cekilmis, koyu; hem drone iri okunuyor hem kart
   kenari duruyor. Yeni gorsel koyarken bu esigi gozden kacirmayin. */


/* Ikon 64px -> 40px: kurucu "ikon cok buyuk durmus, sevmedim" dedi. Onceki
   notumda EDS kart ikonu icin 56-86px araligi yaziyordu; bu BILEREK yapilan
   bir sapmadir (EDS baglantisi su an dogrulanamiyor, kurucu talimati esas
   alindi). Baslik 34px'e cikarken ikonun kucultulmesi kart icindeki sirayi
   da duzeltiyor: artik once baslik okunuyor. Marka yesili ACIK ZEMINDE YAZI
   olarak yasak; burada ikon cizgisi, metin degil — yine de guvenli tarafta
   kalmak icin okunan yesil (#377A36) kullaniliyor. */
.fb-card__icon {
  width: var(--eco-space-10);
  height: var(--eco-space-10);
  margin: 0 0 var(--eco-space-5);
  color: var(--eco-brand-secondary);
  stroke-width: 1.5;
}
.fb-card__title {
  margin: 0;
  font-size: var(--eco-fontsize-display-sm);
  line-height: var(--eco-lineheight-display-sm);
  letter-spacing: var(--eco-letterspacing-display-sm);
  /* Bolum basligi .hp-h2 display-md (40px) ve medium; kart basligi bir kademe
     altinda (34px) kaliyor ki hiyerarsi bozulmasin. Agirligi da sistemin
     display olculerinde kullandigi medium'a cekiyoruz. */
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-primary);
}
.fb-card__desc {
  margin: var(--eco-space-3) 0 0;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-secondary);
}

/* Meta satirlari: etiket + deger. Ayirici cizgi listeyi govdeden ayirir. */
/* KUNYE — onceki duzen her etiketi kendi satirina alip degerini ALTINA
   koyuyordu (3 x 2 = 6 satir, ustelik uygulamalar pill olarak), kart icinde
   blok blok duruyordu. Simdi her kunye TEK satir: etiket solda, deger
   saginda ve butun degerler ortak sutunda hizali. Hizalamayi sutun yaptigi
   icin iki nokta ust uste gereksiz. dl/dt/dd anlamli isaretleme. */
.fb-spec {
  margin: var(--eco-space-6) 0 0;
  padding-top: var(--eco-space-5);
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--eco-space-3) var(--eco-space-6);
}
.fb-spec__k {
  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-muted);
}
.fb-spec__d {
  margin: 0;
  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-primary);
}
/* Kart ici link en alta yapissin ki iki kartin oklari ayni cizgide dursun */
/* Link ONCEDEN margin-top:auto ile kartin dibine itiliyordu; kartlar hicbir
   zaman yan yana gelmedigi icin (yigin) CTA'lari hizalamanin bir kazanci
   yok, buna karsilik kunye bittikten sonra OLCULEN ~158px'lik bos alan
   biriktiriyordu. Simdi link icerik grubuyla birlikte dikeyde ortalaniyor. */
.fb-card__foot { margin: 0; padding-top: var(--eco-space-6); }

/* --------------------------------------------------------------------------
   04 · TAKIP — hp-sys/hp-steps yeniden kullaniliyor.
   Bolum ACIK zeminde, kartlar koyu: "pes pese koyu yok" kurali bolum
   duzeyinde tutuluyor, koyu yuzey yalniz kart olcegi kadar.
   -------------------------------------------------------------------------- */
/* BASLIK -> LEDE: lede onceden head'in KARDESIYDI, bu yuzden araya kendi
   20px'i degil head'in margin-bottom'u (48px) giriyordu (bitisik kardes
   marginleri cakisir, buyuk olan kazanir). Kurucu "bu degeri baslik ve alt
   metinlerde kullanmiyorsun" dedi; olculen degerler: hero 24px, kapanis
   16px, .hp-desc bileseninin kendi degeri 20px. Lede artik head'in ICINDE,
   dolayisiyla 20px geciyor; head'in 48px'i de basligi degil BLOGU ayiriyor. */
.fb-follow__head {
  max-width: none;               /* paylasilan .hp-sys__head 46rem'i kaldir */
  display: grid;
  grid-template-columns: minmax(0, 46rem) 1fr;
  align-items: end;
  gap: var(--eco-space-6) var(--eco-space-10);
}
.fb-follow__intro { min-width: 0; }
.fb-follow__lead { max-width: none; margin: var(--eco-space-5) 0 0; }
/* Buton container'in SAG kenarina yaslanir: sol/sag kenarlar site
   genelinde tek cizgide kalmali (kurucu kurali). */
.fb-follow__action { margin: 0; justify-self: end; }
@media (max-width: 767px) {
  .fb-follow__head { grid-template-columns: minmax(0, 1fr); }
  /* Tek sutuna dusunce buton SAGDA kalmamali: metin solda baslarken tek basina
     saga kacan buton kazara konmus gibi duruyor. Metinle ayni sol cizgi. */
  .fb-follow__action { justify-self: start; }
}
/* --------------------------------------------------------------------------
   05 · KAPANIS
   ecoDrone EN'deki kapanisla ayni yukseklik ve ayni iki eylem duzeni.
   -------------------------------------------------------------------------- */
/* 64px -> 96px: bolum sinirlari site genelinde esit olmali. OLCULEN:
   02->03 = 192px (96+96); burasi 64 oldugu icin 04->05 kisa kaliyordu. */
/* ALT DA 96: paylasilan `.hp-close` alta 80px veriyor (anasayfa.css:1677);
   ust 96 olunca kart kendi seridinde ORTALANMIYORDU. OLCULEN 1440 ve 1200:
   ust 96 / alt 80 = 16px asimetri, iki fb-close sayfasinda da ayni.
   Kartin KENDI dolgusu zaten esitti (48/48; optik mürekkep 52/49),
   kusur kartin icinde degil seridindeydi. Boylece bolum sinirlari
   her yerde 96: 02->03 = 192px (96+96), kart da 96/96 ortada. */
.fb-close { padding-block: var(--eco-space-24); }
.fb-close .hp-close__box { padding: var(--eco-space-12) var(--eco-space-10); }
.fb-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);
}
/* KAPANIS LEDE'SI IKI SATIR — paylasilan `.hp-close__box p` 44ch (440px)
   veriyor ve metin bu genislikte UC satira sariyor, ucuncude yalniz iki
   kelime kaliyordu. OLCULDU: metnin tek satirdaki dogal genisligi 917px;
   sup urme sonucu 28rem hala 3 satir, 30rem ve uzeri 2 satir (1440..767).
   Esikteki 30rem'i degil 34rem'i seciyoruz ki metin ya da font birazcik
   degisince tekrar 3 satira dusmesin. balance satir sayisini degistirmiyor,
   iki satiri DENGELIYOR: yoksa ilk satir 544px, ikincisi ~373px kalirdi. */
.fb-close .hp-close__box p {
  margin-top: var(--eco-space-4);
  max-width: 34rem;
  text-wrap: balance;
}
.fb-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--eco-space-4);
  margin-top: var(--eco-space-6);
}
.fb-close .hp-close__box .btn { margin-top: 0; }
/* --------------------------------------------------------------------------
   VAKA BUTONU — animatedbuttons.framer.website
   Tarayicida OLCULDU, goz karariyla taklit edilmedi:
     . dinlenme: beyaz hap 281x84 (r42), solda metin, sagda 52x52 koyu daire
       (r26), icinde 16px ok.
     . hover: daire GENISLIYOR — genislik 52 -> 265px, sol kenari 793 -> 588,
       yani saga sabit kalip sola aciliyor ve hapin icini ~8px icerden
       dolduruyor. Icerik sola kayiyor (603 -> 404) ve hap tarafindan
       KIRPILIYOR (overflow hidden). Ok ortalaniyor.
     . zamanlama: %50'si ~102ms, %90'i ~169ms, ~240ms'de oturuyor; sonda
       268 -> 265 gibi 3px'lik minik bir yay salinimi var.
   BU YUZDEN width + saga sabitleme animasyonu kullaniyorum (transform: scaleX
   DEGIL): scaleX hapin kose yaricapini ezip yumurtaya cevirirdi, referans ise
   gercekten genislik degistiriyor.
   BILEREK AYRILDIGIMIZ YERLER:
     (1) GOLGE YOK — referansta yumusak golge var, bizim sistemde --shadow-*
         hepsi none.
     (2) Ok UZATILMIYOR — referansta ok 16 -> 41px'e uzuyor; bizde Tabler
         ikonu oldugu gibi kullanilir, yatay olcekleme cizgi kalinligini
         bozardi. Ok yalnizca ortalaniyor.
     (3) Renkler bizim token'lardan: beyaz hap + koyu daire (#102A1B), cunku
         kapanis kutusu koyu yesil; referansin siyah/beyazi degil.
   -------------------------------------------------------------------------- */
/* Bolgeyi saran kutu. Ustteki YATAY AYRAC eski seritten devralindi: serit
   kalkti ama kapanis kutusunun kompozisyonundaki cizgi kalsin istedik, bu
   yuzden ayni margin/padding/ton buraya tasindi. */
.fb-close__case {
  margin-top: var(--eco-space-8);
  /* OLCULDU: ayrac -> buton 25px, buton -> kartin alt kenari 48px idi; 23px'lik
     esitsizlik goze batiyordu. Kutunun alt dolgusu (48px) ust dolgusuyla
     simetrik oldugu icin ONU kisaltmak kutunun kendi dengesini bozardi, bu
     yuzden bolgenin ust dolgusunu 48'e cikariyoruz: 48 / 48. */
  padding-top: var(--eco-space-12);
  border-top: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .17);
  text-align: center;
}
.fb-case-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--eco-space-5);
  max-width: 100%;
  /* Daire MUTLAK konumlu (top:12 + 48 + 12 = 72px ister). Hapin boyu akis
     icerigiyle 50px'te kaliyordu, dolayisiyla daire hapin disina tasip
     overflow:hidden ile KIRPILIYORDU (dinlenmede alti kesik, hover'da sol
     ustte beyaz hilal). Hapa o alani veriyoruz. Referans orani 52/84=0.62,
     bizimki 48/72=0.67 — ayni aile. */
  min-height: calc(var(--eco-space-12) + 2 * var(--eco-space-3));
  /* Sagda daire kadar yer ayrilmazsa metin dairenin ALTINA giriyor. */
  /* Sag dolgu = daire (48) + dairenin sag bosluğu (12) + metinle arasi (20).
     Onceki deger 64px'ti ve metinle daire arasi yalnizca 4px kaliyordu. */
  padding: var(--eco-space-3) calc(var(--eco-space-12) + var(--eco-space-8)) var(--eco-space-3) var(--eco-space-6);
  border-radius: var(--eco-radius-full);
  background: var(--eco-button-white-fill);
  color: var(--eco-button-white-text);
  text-decoration: none;
  overflow: hidden;          /* referanstaki kirpma: icerik sola kayip kayboluyor */
  isolation: isolate;
}
.fb-case-btn__ic {
  display: inline-flex;
  align-items: center;
  gap: var(--eco-space-4);
  min-width: 0;
  transition: transform .22s var(--ease-out);
}
.fb-case-btn__logo {
  height: var(--eco-space-6);
  width: auto;
  max-width: 7.5rem;
  object-fit: contain;
  /* Hap BEYAZ: logo ters cevrilmez, kendi koyu halinde kalir. */
}
.fb-case-btn__sep {
  flex: none;
  width: var(--eco-borderwidth-hairline);
  height: var(--eco-space-6);
  background: var(--eco-border-line);
}
.fb-case-btn__t {
  min-width: 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-primary);
  white-space: normal;
}
.fb-case-btn__ok {
  position: absolute;
  top: var(--eco-space-3);
  right: var(--eco-space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--eco-space-12);
  height: var(--eco-space-12);
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-dark);
  color: var(--eco-text-on-dark);
  /* Referansta daire hover'da YALNIZ yana degil dikeyde de buyuyor:
     52x52 -> 265x66, yani kenar boslugu 16px'ten 9px'e iniyor (84'luk hapta).
     Bizde 72'lik hapta 12px -> 8px. Bu yuzden yukseklik/top/right de gecise
     dahil: "zoom in olup alanin tamamini kaplama" hissi bundan geliyor. */
  transition: width .22s var(--ease-out), height .22s var(--ease-out),
              top .22s var(--ease-out), right .22s var(--ease-out);
}
.fb-case-btn__ok .eco-icon { width: var(--eco-space-5); height: var(--eco-space-5); }
.fb-case-btn:hover .fb-case-btn__ok,
.fb-case-btn:focus-visible .fb-case-btn__ok {
  top: var(--eco-space-2);
  right: var(--eco-space-2);
  width: calc(100% - 2 * var(--eco-space-2));
  height: calc(100% - 2 * var(--eco-space-2));
}
.fb-case-btn:hover .fb-case-btn__ic,
.fb-case-btn:focus-visible .fb-case-btn__ic {
  transform: translateX(-110%);
}
@media (prefers-reduced-motion: reduce) {
  .fb-case-btn__ic, .fb-case-btn__ok { transition: none; }
}
/* KIRILIM NOKTASI OLCULDU (metin sutunu / satir sayisi):
     900px -> 469px / 1 satir      600px -> 235px / 2 satir
     767px -> 389px / 2 satir      560px -> 198px / 3 satir   <- hala calisiyor
     520px -> 161px / 4 satir      480px -> 123px / 4 satir   <- bozuluyor
     430px ->  73px / 9 satir      360px ->   3px / 11 satir  <- comuyor
   Yani tek sira 560px'e kadar saglam; asagisinda logo+ayrac+daire sabit yer
   kapladigi icin metne ince bir serit kaliyor. Esik bu yuzden 560/559. */
@media (max-width: 767px) {
  /* Kutu hala GENIS ve ALCAK (626x75 .. 435x101): hap gorunumu korunur,
     radius'a dokunmuyoruz. */
  .fb-case-btn {
    padding-left: var(--eco-space-4);
    padding-right: calc(var(--eco-space-12) + var(--eco-space-5));
    gap: var(--eco-space-4);
  }
  /* min-width:0 olmadan flex cocugu kendi sutununu tasiyip dairenin ALTINA
     giriyordu (olculen ortusme: -23px). */
  .fb-case-btn__t { white-space: normal; text-align: left; min-width: 0; }
  /* Iki-uc satirlik kutuda daire sag UST kosede asili kalmasin. */
  .fb-case-btn__ok { top: 50%; transform: translateY(-50%); }
}

/* <=559px: tek sira fiziksel olarak sigmiyor -> DIKEY YIGMA. Kutu artik
   kareye yaklastigi icin radius:full cember cizerdi; radius merdivenindeki
   kutu degerine (20px) dusuyoruz. Ok akisa donuyor ve genisleme animasyonu
   kapaniyor: akistaki bir ogeyi genisletmek yigili duzende anlamsiz. */
@media (max-width: 559px) {
  .fb-case-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--eco-space-4);
    min-height: 0;
    padding: var(--eco-space-5);
    border-radius: var(--eco-radius-lg);
    text-align: left;
  }
  .fb-case-btn__ic { flex-direction: column; align-items: flex-start; gap: var(--eco-space-3); }
  .fb-case-btn__sep { display: none; }
  .fb-case-btn__ok {
    position: static;
    transform: none;
    width: var(--eco-space-12);
    height: var(--eco-space-12);
  }
  .fb-case-btn:hover .fb-case-btn__ok,
  .fb-case-btn:focus-visible .fb-case-btn__ok {
    top: auto;
    right: auto;
    width: var(--eco-space-12);
    height: var(--eco-space-12);
  }
  .fb-case-btn:hover .fb-case-btn__ic,
  .fb-case-btn:focus-visible .fb-case-btn__ic { transform: none; }
}

/* --------------------------------------------------------------------------
   Genislik kademeleri
   -------------------------------------------------------------------------- */
/* <=820px ve azaltilmis harekette: referansin yaptigi gibi efekt KAPANIR,
   kartlar duz bir listeye doner (metin ustte, gorsel altta tam genislik). */
/* Sabitleme ve kaydirma HER IKI durumda da kapanir: dar ekran ve
   azaltilmis hareket. Kartlar dikey listeye doner, oran korunur. */
@media (max-width: 819px), (prefers-reduced-motion: reduce) {
  .fb-stack { height: auto; margin: 0; }
  .fb-stack__pin { position: static; height: auto; display: block; }
  .fb-stack__sahne { height: auto; display: grid; gap: var(--eco-space-6); }
  .fb-stack__kart { position: static; transform: none; min-height: 32rem; }
}

/* TEK SUTUNA DUSME YALNIZ DAR EKRANDA. Ikisini tek sorguda birlestirmistim;
   OLCULEN sonuc: 1440'ta azaltilmis harekette kart 1358x1389'a sisiyordu,
   cunku genislik siniri da kalkiyordu. Masaustunde oran korunmali, yalnizca
   kaydirma kapanmali. */
@media (max-width: 819px) {
  .fb-stack__sahne { max-width: none; }
  .fb-stack__kart { grid-template-columns: 1fr; min-height: 0; }
  .fb-stack__gorsel { aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
  .fb-method { padding-block: var(--eco-space-16); }
  .fb-stack__metin { padding: var(--eco-space-6); }
  .fb-card__title {
    font-size: var(--eco-fontsizemobile-display-sm, var(--eco-fontsize-h2));
    line-height: var(--eco-lineheightmobile-display-sm, var(--eco-lineheight-h2));
    letter-spacing: var(--eco-letterspacingmobile-display-sm, var(--eco-letterspacing-h2));
  }
  .fb-spec { gap: var(--eco-space-3) var(--eco-space-5); }
}

@media (max-width: 900px) {
  .fb-close .hp-close__box { padding-inline: var(--eco-space-6); }
  .fb-close .hp-close__box h2 { font-size: var(--eco-fontsizemobile-display-sm); }
}