/* ==========================================================================
   FOOTER — EDS (ef- katmani)

   Kurucu referansi: ordina.framer.website footer'i. OLCULEN yapi:
     <footer> koyu zemin -> icinde 1200px, radius 12px BEYAZ PANEL
     panel uc satir, aralarinda 1px cizgi:
       1) marka + link kolonlari + bulten
       2) CTA basligi solda, buton sagda
       3) telif solda, sosyal ikonlar sagda

   BIZDEKI FARKLAR ve gerekceleri:
   - DIS ZEMIN KOYU DEGIL ACIK. Begenilen sey beyaz panelin kendisiydi;
     Ordina'nin koyu cercevesi bizde sayfanin son bolumuyle arka arkaya iki
     koyu bant yapardi ("acik agirlik, pes pese koyu yok").
   - CTA metni UYDURULMADI. Basligi mevcut marka satiri ("for a more livable
     world"), butonu ise sitede zaten olan "Request a Demo".
   - Bulten Ordina'daki gibi satir ici gonderim yapmiyor: mevcut JotForm
     davranisi ve markup'i korundu (CLAUDE.md: formlar JotForm'un kendi formu).
   - B Corp rozetinin yalniz BEYAZ varyanti var (bcorp-white.svg); beyaz
     panelde gorunmeyecegi icin koyu bir blogun icine alindi.
   - Radius 12px = --eco-radius-md (merdivende zaten var, denk dusuyor).
   - Cizgi rengi Ordina'nin #EDEDED'i degil, EDS'in acik yuzey cizgisi.
   ========================================================================== */
/* KOYU YESIL BANT — Ordina'da koyu mavi zemin uzerinde beyaz panel var;
   bizim yesilli karsiligi. --eco-surface-dark EDS'in varsayilan koyu bandi.
   Ritim kontrolu: bu sayfanin son bolumu ACIK (ni-bolum--sayfa), dolayisiyla
   "pes pese koyu yok" kurali cignenmiyor. */
.ef {
  position: relative;
  background: var(--eco-surface-dark);
  /* .footer sinifi split-pages.mjs footer'i bulabilsin diye duruyor (betik
     class icinde "footer" kelimesi ariyor). style.css'teki .footer kurali
     yalniz iki sey dayatiyor: padding-top (bunu asagidaki padding-block zaten
     eziyor) ve soluk bir ust cizgi — onu bilincli olarak kapatiyoruz. */
  border-top: 0;
  /* UST PADDING BURADA, CTA'da DEGIL: footer tek basina da dogru gorunmeli.
     Bosluğu CTA'nin alt padding'ine birakmak footer'i "onunde mutlaka bir
     .ef-cta olan" bilesene cevirirdi; oysa footer site genelinde sabit ve
     CTA'siz sayfalar olacak (chrome istisnasi iki sayfa: ecodrone-v2,
     en/request-a-demo). Toplam mesafe degismiyor: 0 + 80 = eskiden 80 + 0. */
  /* ALT PADDING 0: damga bandin en alt kenarina oturuyor ve son oge O.
     Onceden padding 48px'ti ve damga negatif marjla yukari cekiliyordu; bu,
     belgenin kaydirilabilir alaninda 48px'lik bir artik birakip orada body
     zeminini (#F7F7F7) gosteriyordu — "alttaki beyaz serit" buydu.
     Olculdu: footer alti 5918, belge 5966 (1440) ve 7221 / 7253 (390); fark
     her iki genislikte de alt padding'e birebir esitti. */
  padding-block: var(--eco-space-20) 0;
  /* Koyu kapsamda cizgi beyaza doner. Ayri bir koyu-kenar token'i YOK; kardes
     ecodrone-en.css de tam olarak bunu yapiyor, deger EDS'in koyu yuzey
     cizgisi (.12) ve Ordina'da olculen .1 ile ayni aile. */
  --eco-border-line: rgba(255, 255, 255, .12);
}
.ef .container { position: relative; }
/* Ordina'da begenilen SOLUK RAYLAR: icerik kolonunu cerceveleyen dikey hatlar
   + bandin altinda yatay hat. */
.ef__raylar { position: absolute; inset: 0; pointer-events: none; }
.ef__raylar::before,
.ef__raylar::after {
  content: ''; position: absolute;
  /* .container'in kutusu padding'in icinde kaldigi icin ray, footer'in kendi
     ust/alt padding'i kadar tasarak bandin gercek kenarlarina uzaniyor. */
  top: calc(var(--eco-space-20) * -1); bottom: 0;
  width: var(--eco-borderwidth-hairline); background: var(--eco-border-line);
}
.ef__raylar::before { left: 0; }
.ef__raylar::after  { right: 0; }

/* ============================================================================
   CTA BOLUMU — footer'DAN AYRI bir parca ama AYNI parca gibi gorunur.
   NEDEN AYRI: CTA metni sayfadan sayfaya degisiyor; footer'in icinde kalirsa
   her sayfa kendi footer varyantini uretir (build-chrome.mjs footer'lari
   icerik hash'ine gore grupluyor; bugun f1/f2/f3 diye uc varyant var).
   Disari alininca footer ayni dil icinde butun sayfalarda birebir ayni olur:
   DIL BASINA tek varyant. Sifira inmez — TR ve EN'in link hedefleri farkli,
   ayrica ayni dilde goreli yol derinligi (../ vs ../../) ikinci bir varyant
   uretir; rollout'ta yollar sayfa derinligine gore yazilmali.
   split-pages.mjs header sonu ile <footer> arasindaki her seyi main'e yazdigi
   icin CTA kendiliginden sayfaya ozel icerik olur.
   NEDEN AYNI GORUNUR: ayni --eco-surface-dark zemini, ayni .container
   genisligi; raylar da sinirda uc uca geliyor — CTA'nin rayi kendi UST
   padding'ini asiyor, footer'inki kendi UST padding'ini asarak yukari
   tirmaniyor, ikisinin arasinda 0px bosluk kaliyor.
   ============================================================================ */
.ef-cta {
  position: relative;
  background: var(--eco-surface-dark);
  /* ALT PADDING 0: panelin ustundeki bosluğu footer kendi ust padding'iyle
     veriyor (bkz. .ef). Burada da verilirse bosluk iki katina cikar. */
  padding-block: var(--eco-space-20) 0;
  /* .ef kapsamindan ciktigi icin koyu-zemin cizgi rengi burada tekrar veriliyor. */
  --eco-border-line: rgba(255, 255, 255, .12);
}
.ef-cta .container { position: relative; text-align: center; }
.ef-cta__raylar { position: absolute; inset: 0; pointer-events: none; }
.ef-cta__raylar::before,
.ef-cta__raylar::after {
  content: ''; position: absolute;
  top: calc(var(--eco-space-20) * -1); bottom: 0;
  width: var(--eco-borderwidth-hairline); background: var(--eco-border-line);
}
.ef-cta__raylar::before { left: 0; }
.ef-cta__raylar::after  { right: 0; }

/* CTA ICERIGI — sayfaya ozel metin, .ef-cta bolumunun icinde.
   AYRI SARMALAYICI DIV YOK: zemini bolum, ortalamayi .container veriyor. Bu
   markup 143 sayfaya daha kopyalanacak; gereksiz katman 143 kez tekrarlanir.
   ISIMLENDIRME: sinifllar ef-cta__* — ef__* footer'in kendi bloku, CTA ise
   artik footer'in DISINDA. Ikisini karistirmak rollout'u yaniltir.
   Icerik UYDURULMADI: bu sayfanin kendi CTA'si yok (son bolumu cross-link
   kartlari), o yuzden kurucunun kurali geregi ANASAYFA mesaji basildi.
   Olcek hp-close__box ile birebir ayni: display-md / body-lg / caption. */
.ef-cta__baslik {
  max-width: 22ch; margin: 0 auto;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-md);
  line-height: var(--eco-lineheight-display-md);
  letter-spacing: var(--eco-letterspacing-display-md);
  color: var(--eco-text-on-brand-strong);
  text-wrap: balance;
}
.ef-cta__metin {
  max-width: 44ch; margin: var(--eco-space-5) auto 0;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-on-dark);
}
.ef-cta .btn { margin-top: var(--eco-space-8); }
/* Kapanis CTA'sinda ayni kalip: baslik -> metin -> buton. Mobilde araliklar
   bir kademe iner (kurucu); masaustu dokunulmadan kalir. */
@media (max-width: 767px) {
  .ef-cta__metin { margin-top: var(--eco-space-3); }
  .ef-cta .btn { margin-top: var(--eco-space-5); }
}
.ef__panel {
  /* CAM PANEL. Sistemin tek cam filmi: koyu yuzey muamelesidir, ustune ACIK
     metin gider — bu yuzden panel icindeki her sey acik renge cevrildi.
     Cizgi beyaz kaliyor (bandan miras); artik geri almiyoruz.
     Sayfadaki ikinci cam katmani (digeri ni-karar__cam) — kural 2-3 diyor.
     Ic ice cam YOK: bulten alani blur tasimiyor, sadece dolgu. */
  background: var(--eco-glass-bg);
  backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
  /* CERCEVESIZ (kurucu; once request-a-demo'da denendi). Cizgi kalkti,
     panelin kutusunu cam filmi ve yarıcap tasiyor. Kenarlik SILINMIYOR,
     seffaflasiyor: 1px'lik kutu yerinde kalinca panelin olculeri ve ic
     hizalamalari bu footer'i tasiyan 71 sayfada oldugu gibi kaliyor. */
  border: var(--eco-borderwidth-hairline) solid transparent;
  /* BUYUK KUTU = lg (20px). Panel md (12px) ile kalmisti ve merdivende
     istisnaydi: kardes sayfalarda buyuk kutular lg kullaniyor
     (natureos 4 lg / 0 md, naturepass 6 lg / 1 md, ecodrone 7 lg, anasayfa 12 lg).
     Dosyadaki diger iki yaricap `full` — abone alani ve dairesel buton — onlar
     pill olmaya devam ediyor. */
  border-radius: var(--eco-radius-lg);
  padding: var(--eco-space-12) var(--eco-space-12) var(--eco-space-8);
}

/* --- 1. SATIR: marka + kolonlar + bulten --- */
.ef__ust { display: grid; gap: var(--eco-space-10); }
@media (min-width: 900px) {
  /* Sol hucre marka + bulten; sag hucre TAMAMEN link kolonlarinin.
     Ordina'da bulten kolonlarin yanindaydi ama orada yalniz IKI kisa kolon var
     (Home/Pricing/Blog/Contact). Bizde dort uzun kolon var; ayni yerlesimde
     kolon basina ~100px dusuyordu ve "Technical Restoration Services" uc satira
     boluniyordu. Referansin duzeni referansin icerigini varsayiyor. */
  /* Marka hucresi 20rem'di ama icinde yalniz 136px'lik logo + B Corp var;
     olculdu: 320px hucre, ~136px icerik. Slogan da kalkinca kalan bosluk bos
     duruyordu. 16rem'e cekilince artan 64px link kolonlarina gidiyor ve
     space-between kolon aralarini kendiliginden aciyor (60px -> ~81px). */
  .ef__ust { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--eco-space-16); }
}
/* MARKA KILIDI — logo ve B Corp YAN YANA, alt alta degil.
   Neden: slogan kalkinca rozet logonun altinda tek basina asili kaldi ("boynu
   bukuk"). Olculdu: logo 136x61, rozet 36x61 — IKISI DE TAM 61px, yani yan
   yana konunca ust ve alt kenarlari birebir hizalaniyor; aralarina ince cizgi
   girince tek ve kasitli bir marka blogu olarak okunuyor.
   align-self: start SART — marka hucresi sagdaki link kolonlari yuzunden
   190px'e geriliyor, onsuz kilit o kutunun dikey ortasina kacip yine havada
   kaliyor. */
.ef__marka {
  display: flex; flex-direction: row; align-items: center;
  align-self: start;
  gap: var(--eco-space-5);
}
.ef__logo { width: 8.5rem; height: auto; display: block; }
/* Beyaz B Corp isareti icin koyu tasiyici — koyu SVG gelirse bu blok kalkar. */
/* Koyu cam panelde beyaz B Corp isareti dogrudan durur; koyu tasiyici
   (beyaz panel doneminden kalma) artik gereksiz. */
/* Ayirici: hukuki satirdaki ile AYNI dil (hairline + --eco-border-line).
   Rozetin ::before'u oldugu icin markup'a bos bir eleman eklemiyor. */
.ef__bcorp { display: inline-flex; align-items: center; gap: var(--eco-space-5); }
.ef__bcorp::before {
  content: '';
  width: var(--eco-borderwidth-hairline);
  /* Cizgi boyu SABIT DEGIL: align-self:stretch ile .ef__bcorp'un kendi
     yuksekligine uzuyor; o da isaretlerin boyu (61px). Sabit deger yazilirsa
     logo olcusu degistiginde cizgi geride kalir. .ef__bcorp'ta align-items:
     center oldugu icin stretch'i burada tek oge icin geri aliyoruz. */
  align-self: stretch;
  background: var(--eco-border-line);
}
.ef__bcorp img { width: 2.25rem; height: auto; display: block; }

.ef__sag { display: grid; gap: var(--eco-space-10); }
.ef__kolonlar { display: grid; gap: var(--eco-space-12); }
@media (min-width: 560px)  { .ef__kolonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ESIT KOLON YANLISTI. Olculen ihtiyaclar: Technology 131px,
   For Businesses 206px, About 82px, Resources 100px — toplam 519px + 96 bosluk
   = 615px, ayrilan ise 640px. Yani genislik YETIYORDU; repeat(4, 1fr) hepsini
   136px'e esitledigi icin About fazladan yer aliyor, For Businesses ise
   "Technical Restoration Services"i uc satira boluyordu.
   max-content: her kolon kendi ihtiyacini alir, artan bosluk arada dagilir. */
@media (min-width: 1100px) {
  .ef__kolonlar { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
}
.ef__kolon h4 {
  margin: 0 0 var(--eco-space-4);
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-color-neutral-400);
}
/* Link satirlari birbirine YAKIN dursun: bunlar bir liste, tek tek ogeler
   degil. Kurucu karariyla kademe kademe sikisti: 12px -> 8px -> 4px.
   Kolon araligi (yatay) 82px'e cikmis durumda; dikeyde bu kadar sikilasinca
   her kolon tek bir blok olarak okunuyor, satirlar birbirine karismiyor.
   4px = --eco-space-1, olcekte zaten var (ham deger yazilmadi). */
.ef__kolon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--eco-space-1); }
.ef__kolon a {
  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-brand-strong);
  text-decoration: none;
  transition: color var(--duration, .3s) var(--ease, ease);
}
.ef__kolon a:hover { color: var(--eco-surface-brand); }

/* BULTEN KENDI BANDI: ustunde ve altinda cizgi, solda baslik sagda form.
   Onceki footer tasariminda da boyleydi. */
.ef__bulten { display: grid; gap: var(--eco-space-6); align-items: center; }
@media (min-width: 900px) {
  .ef__bulten { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--eco-space-12); }
}
.ef__bulten-metin { display: grid; gap: var(--eco-space-2); min-width: 0; }
.ef__bulten h4 {
  margin: 0;
  font-family: var(--eco-fontfamily-sans);
  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-on-brand-strong);
}
.ef__bulten p {
  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-on-dark);
}
/* FORM = "icinde buton olan alan". Referans (newsletter-button.framer.website)
   olculdu: gorunen kutu FORM'un kendisi — pill, icteki input seffaf/cizgisiz,
   buton kutunun icinde sagda. Bu birebir EDS'in `.eco-action-field` kurali.
   SINIF KULLANILAMADI: .eco-action-field ecording-components.css'te tanimli ama
   bu sayfa o dosyayi YUKLEMIYOR; tum bilesen kutuphanesini cagirmak .eco-header
   / .eco-footer gibi parcalari da getirip mevcut chrome ile catisirdi. Bu yuzden
   sozlesme burada birebir tekrarlandi (degerler o dosyadan alindi).
   Referanstaki golge ALINMADI: sistemde golge yok.
   Buton yalniz IKON tasiyor ve tam daire (kurucu karari): metin kaldirildi,
   erisilebilir ad aria-label'a tasindi. Bicimlendirmesi .ef__alan .btn'de. */
.ef__alan {
  /* min-width:0 SART. Grid ogesinin varsayilan min-width'i "auto", yani
     MIN-CONTENT zemini: form bir flex kutusu ve min-content'i
     4+4 padding + 8 gap + 100px nowrap buton + input'un icsel genisligi
     ~= 318px. 320'lik ekranda panel ici 232px oldugu icin grid track'i 318'e
     cikiyor, hem form hem metin blogu taşıp sayfayi yatay kaydiriyordu.
     Olculdu: track 317.797px, panel ici 232px. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--eco-space-2);
  /* Input ve butonun ORTAK olcusu. Tasarim token'i DEGIL, bu bilesene ozel bir
     geometri degiskeni (--eco-* uydurulmadi). Ikisi ayni boyda oldugu surece
     asagidaki 4px her yonde ayni bosluga donuyor. */
  --ef-kontrol: 2.5rem;
  /* Ikon olcusu de ortak: butonun yatay padding'i bu ikisinden TURETILIYOR,
     boylece kapaliyken kutu tam --ef-kontrol kadar, yani tam daire oluyor. */
  --ef-ikon: 1.25rem;
  padding: 4px;
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-hairline) solid var(--eco-glass-border);
  background: rgba(255, 255, 255, .10);   /* blur YOK: ic ice cam olmasin */
  transition: background-color var(--duration, .3s) var(--ease, ease),
              border-color var(--duration, .3s) var(--ease, ease);
}
/* ALAN HOVER'I: dolgu yukseliyor, geometri degil — EDS'in "hover dolguyu
   degistirir" kurali. Golge YOK. Deger, ustteki .10 ile ayni aileden bir ust
   kademe; koyu cam icin ara token yok, o yuzden ayni teknik surduruluyor.
   :focus-within'den ayri durur: odak halkasi --eco-border-focus ile ciziliyor,
   hover yalnizca yuzeyi isitiyor. */
.ef__alan:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28);
}
.ef__form { display: grid; gap: var(--eco-space-4); }
/* Onay kutusu GERCEK bir kapi: site-forms.js submit'te checkValidity() cagiriyor,
   dolayisiyla required checkbox JotForm penceresinin acilmasini engelliyor.
   NOT: KVKK onayi JotForm formunun ICINDE de var; bu ikinci onay bilincli bir
   tekrar, hukuk tek yerde istiyorsa kaldirilabilir. */
.ef__onay { display: flex; gap: var(--eco-space-3); align-items: flex-start; position: relative; }
/* Checkbox'a ACIK olcu sart. Olculdu: input width 232px cikiyordu, yani
   etiketin tamamini yiyip span'e 0 birakiyordu (span 18 satira bolunup
   tasiyordu). Sebep style.css'teki genel form kuralinin width'i; `flex: none`
   bunu cozmez cunku `auto` esasi input'un kendi width'ine cozuluyor. */
/* ONAY KUTUSU — daire + Tabler `check`, yumusak gecisler.
   IKON SETE EKLENDI, UYDURULMADI: assets/icons/check.svg, resmi @tabler/icons
   v3.46.0 `outline/check.svg` dosyasindan `cp` ile birebir alindi (SOURCE.md:
   "yeni ikon gerekirse ayni paketten kopyalayin, elle SVG yazmayin").
   Yuvarlak uclar ikonun kendisinden geliyor; "rounded degil" denen sey native
   checkbox'in tarayici tikiydi. stroke-width markup'a YAZILMAZ, .eco-icon verir.
   INPUT GERCEK KALIYOR: gorsel olarak gizli ama odaklanabilir ve required —
   site-forms.js submit'te checkValidity() cagiriyor, o davranis korunmali. */
.ef__onay input {
  position: absolute;
  left: 0; top: 2px;
  width: 1.125rem; height: 1.125rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ef__onay-kutu {
  flex: none;
  width: 1.125rem; height: 1.125rem;
  margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  /* Tikin rengi: marka yesili uzerine ASLA beyaz yazilmaz. */
  color: var(--eco-color-neutral-950);
  transition: background-color var(--duration, .3s) var(--ease, ease),
              border-color var(--duration, .3s) var(--ease, ease),
              transform var(--duration, .3s) var(--ease-out, ease);
}
/* OZGULLUK KUTU UZERINDEN YUKSELTILDI (0,3,0). Ikon sozlesmesi (.ef .eco-icon)
   1.15em veriyor ve o da (0,2,0); bu kural dosyada ONDAN ONCE geldigi icin
   esit ozgullukte kaybediyordu — olculdu: tik 12x12 yerine 16x18.39 ciziliyordu
   (1.15em). Kurali tasimak yerine ozgullugu yukselttik: boylece sira degisse de
   dogru kalir ve kural mantiken ait oldugu yerde, checkbox kurallarinin
   yaninda duruyor. */
.ef .ef__onay-kutu .ef__onay-tik {
  width: .75rem; height: .75rem;
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--duration, .3s) var(--ease, ease),
              transform var(--duration, .3s) var(--ease-out, ease);
}
/* HOVER: dolgu ve cizgi guclenir, geometri degismez (EDS kurali). */
.ef__onay:hover .ef__onay-kutu {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .45);
}
/* ISARETLENINCE: daire marka yesiline doner, tik buyuyerek belirir.
   Tik opakligi hafif gecikmeli — once daire dolar, sonra tik oturur; "dan"
   diye belirmesin diye (abone butonundaki metinle ayni yaklasim). */
.ef__onay input:checked + .ef__onay-kutu {
  background: var(--eco-surface-brand);
  border-color: var(--eco-surface-brand);
}
.ef__onay input:checked + .ef__onay-kutu .ef__onay-tik {
  opacity: 1;
  transform: scale(1);
  transition-delay: calc(var(--duration, .3s) / 3), calc(var(--duration, .3s) / 3);
}
/* Tiklarken dokunus geri bildirimi: daire hafifce kuculur. */
.ef__onay input:active + .ef__onay-kutu { transform: scale(.9); }
/* Klavye odagi — alanin odak halkasiyla ayni dil. */
.ef__onay input:focus-visible + .ef__onay-kutu {
  outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
  outline-offset: 2px;
}
.ef__onay-metin {
  /* flex:1 + min-width:0 SART: metin bir flex ogesi ve varsayilan
     min-width:auto min-content zemini uygular, kuculemez ve kapsayicinin
     disina tasar. Olculdu: span sag kenari 346, kapsayici (label) 276. */
  flex: 1;
  min-width: 0;
  font-size: var(--eco-fontsize-body-xs);
  line-height: var(--eco-lineheight-body-xs);
  letter-spacing: var(--eco-letterspacing-body-xs);
  color: var(--eco-color-neutral-400);
}
.ef__onay a { color: var(--eco-text-on-brand-strong); }
.ef__alan:focus-within { outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus); outline-offset: 1px; }
.ef__alan input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  /* SOL PADDING KAVISTEN BUYUK OLMALI. Olculdu: metin alanin dis kenarindan
     21px iceride basliyordu ama kose yaricapi 27.4px — yani yazi pill'in
     kavisinin icinde kaliyor ve sikisik gorunuyordu. Sag taraf kavise degil
     butona komsu oldugu icin 16px'te kaliyor. */
  padding-left: var(--eco-space-6);
  padding-right: var(--eco-space-4);
  /* BOYU BUTONLA ESITLE. style.css'teki paylasilan
     .footer__newsletter-form input kurali 10px dikey padding veriyor ve alani
     butondan (40px) uzun yapiyordu: alan 54.8px olunca buton dikeyde
     ortalanip ust/alt 6.4px birakiyor, sagda ise yalniz kabin 4px'i kaliyordu.
     Asimetriyi sihirli bir sag padding ile degil, kokunden boyu esitleyerek
     cozuyoruz. */
  height: var(--ef-kontrol);
  padding-block: 0;
  font-family: inherit;
  font-size: 16px;            /* altinda iOS sayfayi zumluyor — sozlesmenin parcasi */
  color: var(--eco-text-on-brand-strong);
}
.ef__alan input::placeholder { color: var(--eco-color-neutral-400); }
/* OTOMATIK DOLDURMA (autofill). Tarayici kendi UA stiliyle input'a acik bir
   zemin + koyu metin basiyor; koyu cam alanin ustunde bu beyaz bir blok gibi
   duruyor. Projede autofill kurali HIC yoktu, yani bu bizim CSS'imiz degil,
   tarayicinin kendi dolgusu.
   KLASIK COZUM BILEREK KULLANILMADI: yaygin numara `inset box-shadow` ile
   zemini boyamaktir; bu katmanda golge YASAK (golge-yok-tek-cizgi) ve bu
   dosyada bugune kadar hic box-shadow yok — ilkini autofill icin acmiyoruz.
   Onun yerine gecis hilesi: autofill'in background-color degisimi pratikte
   sonsuz bir sureye yayiliyor, dolayisiyla gorunur hale hic gelmiyor.
   Metin rengi ayrica -webkit-text-fill-color ile zorlanmali; autofill
   sirasinda normal `color` dikkate ALINMIYOR ve zemini bastirdigimiz icin
   tarayicinin koyu metni koyu yesil uzerinde okunmaz hale gelirdi.
   IKI KURAL AYRI YAZILDI: bir secici listesindeki TANINMAYAN pseudo-class
   kuralin TAMAMINI gecersiz kilar; :-webkit-autofill ile :autofill ayni
   listede olsaydi, birini tanimayan tarayicida ikisi birden duserdi. */
.ef__alan input:-webkit-autofill,
.ef__alan input:-webkit-autofill:hover,
.ef__alan input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--eco-text-on-brand-strong);
  caret-color: var(--eco-text-on-brand-strong);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.ef__alan input:autofill,
.ef__alan input:autofill:hover,
.ef__alan input:autofill:focus {
  -webkit-text-fill-color: var(--eco-text-on-brand-strong);
  caret-color: var(--eco-text-on-brand-strong);
  transition: background-color 600000s 0s, color 600000s 0s;
}
/* GONDER BUTONU: yalniz ikon, tam daire. Metin kalktigi icin erisilebilir ad
   markup'taki aria-label'dan geliyor — ikonun kendisi aria-hidden.
   min-width SIFIRLANMALI: .btn 44px min-width dayatiyor, aksi halde daire
   44x40 elipse donuyor. Olcu input ile ORTAK (--ef-kontrol): ikisi esit olunca
   kabin 4px padding'i her yonde ayni bosluga donuyor ve daire, pill'in sag
   yayiyla esmerkezli oturuyor. */
.ef__alan .btn {
  flex: none;
  /* GENISLIK SABIT DEGIL, ICERIK KADAR. Hover'da metin acilinca kutu kendi
     buyuyor; sabit bir hover genisligi yazsaydik TR'de "Abone Ol" gibi baska
     uzunluktaki metinler kirpilir ya da bosluk birakirdi. Kapaliyken metnin
     max-width'i 0 oldugu icin kutu min-width'e, yani tam daireye iniyor. */
  min-width: var(--ef-kontrol);
  width: auto;
  height: var(--ef-kontrol);
  /* Yatay padding TURETILMIS. .btn'in seffaf 2px kenarligi (--eco-borderwidth-thick)
     genislige EKLENIYOR: width sabitken border-box bunu yutuyordu, width:auto
     yutmuyor. Olculdu: cikarilmadan kutu 44x40, yani daire degil elips gibi.
     (40 - 20)/2 - 2 = 8  ->  8 + 20 + 8 + 2+2 = 40, tam daire. */
  padding-block: 0;
  padding-inline: calc((var(--ef-kontrol) - var(--ef-ikon)) / 2 - var(--eco-borderwidth-thick));
  /* .btn'in kendi gap'i sifirlaniyor: metin kapaliyken 4px'lik bir bosluk
     kalirdi ve daire 44px'e cikardi. Aradaki nefes metnin margin'inden. */
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  border-radius: var(--eco-radius-full);
  /* .btn'den gelen 0.2s'lik gecis eziliyor; kurucu "cok hizli olmasin,
     hareketi hissedelim" dedi -> genislik --duration-slow (.6s) + --ease-out. */
  transition: background-color var(--duration, .3s) var(--ease, ease),
              padding-inline var(--duration-slow, .6s) var(--ease-out, ease);
}
.ef__alan .btn .eco-icon { width: var(--ef-ikon); height: var(--ef-ikon); flex: none; }

/* GONDER METNI: hover'da soldan acilir. Genislik auto'ya animate edilemedigi
   icin max-width kullaniliyor; kutu da icerik kadar oldugu icin bu, butonu
   sola dogru buyutuyor (buton satirin son ogesi, input flex:1 ile daraliyor).
   GECIKME ASIMETRIK — kurucunun "dan dan gelmesin" istegi:
     girerken  -> once yer acilir, opaklik gecikmeli baslar,
     cikarken  -> gecikme yok, once yazi soner sonra kutu daralir. */
.ef__gonder-metin {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--duration-slow, .6s) var(--ease-out, ease),
              margin-left var(--duration-slow, .6s) var(--ease-out, ease),
              margin-right var(--duration-slow, .6s) var(--ease-out, ease),
              opacity var(--duration, .3s) var(--ease, ease);
}
.ef__alan .btn:hover .ef__gonder-metin,
.ef__alan .btn:focus-visible .ef__gonder-metin {
  max-width: 12rem;
  /* Acik haldeki kutu da pill: yuksekligi 40 oldugu icin yaricap 20px. Metin
     8px padding + 4px margin ile kenardan 12px iceride kaliyordu, yani yine
     kavisin icinde. Input'takiyle ayni kural: kavisi 4px as -> 8 + 16 = 24px.
     Sagdaki padding'e DOKUNULMUYOR; o, kapali haldeki tam daireyi veriyor. */
  margin-left: var(--eco-space-4);
  margin-right: var(--eco-space-2);
  opacity: 1;
  transition-delay: 0s, 0s, 0s, calc(var(--duration-slow, .6s) / 3);
}

/* --- Ayirici cizgi: EDS'in acik yuzey cizgisi --- */
/* SIMETRIK bosluk. Onceden yalniz UST marj vardi (space-10 0 0), yani her
   cizgi kendi ustunde 40px birakip altinda hic birakmiyordu: ust cizgi bultene
   1px mesafede yapisiyordu, alt cizgi ise 40px uzaktaydi. */
.ef__cizgi { height: var(--eco-borderwidth-hairline); background: var(--eco-border-line); border: 0; margin-block: var(--eco-space-10); }

/* --- 3. SATIR: telif + hukuki + sosyal --- */
.ef__alt {
  /* Ust bosluk artik cizginin alt marjindan geliyor; buraya da eklersek
     alt taraf 64px olup bu sefer ters yonde asimetri yaratirdi. */
  display: grid; gap: var(--eco-space-5);
  align-items: center;
  justify-items: center; text-align: center;   /* mobil: uc satir da ortali */
}
/* ESIK 900 DEGIL 1000. Uc sutuna gecis ile hukuki satirin tek satira sigmasi
   AYNI esikte olmali: 900'de uc sutun aciliyor ama linkler hala alt alta
   kaldigi icin satirin ortasinda dikey bir yigin olusuyordu (kare ile
   goruldu). Olculdu: hukuki satir tek satira 1000px'den itibaren siğiyor. */
@media (min-width: 1000px) {
  /* UC PARCA. Onceden telif ve hukuki linkler AYNI <p> icinde yan yanaydi,
     ikisi de sola yaslaniyordu: "All rights reserved."in hemen ardindan
     "Privacy..." geliyordu ve tek bir metin akisi gibi okunuyordu.
     1fr / auto / 1fr: iki yandaki esit oldugu icin ortadaki sutun panelin
     gercek ortasina oturur — linkler telife yapismaz. */
  .ef__alt {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-items: stretch; text-align: left;
  }
  .ef__hukuki { justify-self: center; }
  .ef__sosyal { justify-self: end; }
}
.ef__telif { margin: 0; }
.ef__hukuki {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--eco-space-2) var(--eco-space-4);
}
/* AYIRICI: <li>'nin ::before'u, yani <a>'nin DISINDA — tiklama alanina
   girmiyor, ekran okuyucuya da okunmuyor. Rengi bandin ray/cizgi rengiyle
   ayni aileden; yeni token uydurulmadi. */
.ef__hukuki li { display: flex; align-items: center; gap: var(--eco-space-4); }
.ef__hukuki li + li::before {
  content: '';
  width: var(--eco-borderwidth-hairline); height: .75rem;
  background: var(--eco-border-line);
}
.ef__telif, .ef__hukuki a {
  font-size: var(--eco-fontsize-body-xs);
  line-height: var(--eco-lineheight-body-xs);
  letter-spacing: var(--eco-letterspacing-body-xs);
  color: var(--eco-color-neutral-400);
}
.ef__hukuki a { text-decoration: none; transition: color var(--duration, .3s) var(--ease, ease); }
.ef__hukuki a:hover { color: var(--eco-text-on-brand-strong); }
/* Ikonlar artik Tabler'dan (assets/icons/brand-*.svg, resmi pakettten
   vendor'landi). Boyut ve renk .eco-icon sozlesmesinden: 20px, currentColor,
   stroke-width token'dan. Markup'ta elle stroke-width YAZILMAZ. */
.ef__sosyal { display: flex; gap: var(--eco-space-5); }
.ef__sosyal a {
  display: inline-flex; color: var(--eco-text-on-dark);
  transition: color var(--duration, .3s) var(--ease, ease);
}
.ef__sosyal a:hover { color: var(--eco-surface-brand); }

/* ============================================================================
   DAMGA — footer'in en altinda, YARIM kalan dev marka adi.
   GRADIENT BEYAZ-ALFA, sistemin koyu rampasi DEGIL. Once --eco-gradient-deep'in
   paletiyle denendi ama kurucu "yukari dogru acilan" derken rengin PARLAMASINI
   degil SOLMASINI kastediyormus: altta daha belirgin, yukari dogru kayboluyor.
   Deger dili dosyanin kendi diliyle ayni — koyu bandin uzerinde beyaz alfa
   (raylar .12, abone alani .10/.16). Koyu yuzey icin ara alfa token'i yok.
   Bu, tek-gradient kuralindan bilincli bir sapmadir; kurucunun acik istegi.
   KIRPMA ELEMANIN KENDISINDE: .ef'e overflow:hidden vermedik, yoksa raylarin
   ve baska tasan parcalarin kirpilma riski dogardi. Kutu .damga-yuk kadar
   yuksek, gerisi kendi overflow'unda kesiliyor.
   OLCU TIP SKALASINDAN DEGIL: bu tipografi degil, dekoratif bir grafik; skalanin
   en ustu display-3xl 88px ve burada ~240px gerekiyor. Akiskan clamp ile
   kapsayiciya bagli, en/boy her ekranda korunuyor.
   ERISILEBILIRLIK: marka adi zaten logoda geciyor, bu tekrar dekoratif ->
   aria-hidden + secilemez.
   ============================================================================ */
.ef__damga {
  /* NEGATIF MARJ YOK. Footer'in alt padding'i 0 oldugu icin damga zaten son
     oge olarak bandin dibine oturuyor; negatif marj belgede artik alan birakip
     beyaz serit yaratiyordu. */
  margin: var(--eco-space-12) 0 0;
  /* Harflerin gorunen ust dilimi. Kucuk harf govdeleri kabaca .28em ile taban
     cizgisi (~.80em) arasinda yasiyor.
       .56em -> kesme x-yuksekliginin TAM ORTASINDA, "ecording" okunmuyordu.
       .72em -> okunuyordu ama tabana .08em kalinca 'e' ve 'c'nin alt uclari
                kivrilmaya basliyor ve o kuyruklar siziyordu.
       .68em -> tabandan .12em uzak: govdeler okunur, uclar hic girmiyor. */
  --damga-yuk: .68em;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-medium);
  font-size: clamp(3.5rem, 20vw, 15rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  height: var(--damga-yuk);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
  /* background-clip desteklenmezse gorunmez metin olmasin: duz, soluk renk */
  /* background-clip desteklenmezse: gradientin ortalama tonu kadar duz
     beyaz-alfa (.10 ile 0 arasinin ortasi). */
  color: rgba(255, 255, 255, .05);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ef__damga {
    /* `to top` -> ilk durak ALTTA. Altta beyaz .10, yukari dogru TAMAMEN
       saydama (0) soluyor. Once .5 -> .2 denendi, kurucu "cok belirgin" dedi:
       damga bir filigran, okunan degil sezilen bir katman. */
    background-image: linear-gradient(to top,
      rgba(255, 255, 255, .10) 0%,
      rgba(255, 255, 255, 0) 100%);
    background-size: 100% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}

@media (max-width: 900px) {
  .ef { padding-block: var(--eco-space-12) 0; }
  .ef-cta { padding-block: var(--eco-space-12) 0; }
  .ef-cta__raylar::before, .ef-cta__raylar::after {
    top: calc(var(--eco-space-12) * -1); bottom: 0; }
  /* Alt padding iki kirilimda da 0; ray yalnizca UST padding'i asiyor. */
  .ef__raylar::before, .ef__raylar::after {
    top: calc(var(--eco-space-12) * -1); bottom: 0; }
  .ef__panel { padding: var(--eco-space-8) var(--eco-space-6) var(--eco-space-6); }
  .ef-cta__baslik { font-size: var(--eco-fontsizemobile-display-sm); }
  /* Damganin mobil marj override'i GEREKSIZ kaldi: negatif marj tamamen
     kalkti, alt padding iki kirilimda da 0. */
}
/* AYIRICI YALNIZ TEK SATIRDA ANLAMLI: liste sarinca ayirici yeni satirin
   basina dusup "| KVKK" diye oksuz kaliyordu. Bu yuzden tek satira sigmadigi
   her genislikte linkler alt alta ve ayirici kapali.
   Esik .ef__alt'in uc sutuna gectigi esikle AYNI (1000) — ayrilirsa aradaki
   bantta ortada dikey link yigini olusuyor. 999.98: tam 1000'de iki sorgunun
   birden gecmesini onler. */
@media (max-width: 999.98px) {
  .ef__hukuki { flex-direction: column; gap: var(--eco-space-2); }
  .ef__hukuki li + li::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ef__kolon a, .ef__sosyal a, .ef__hukuki a { transition: none; }
  /* Hover DURUMLARI korunuyor, yalnizca gecis kaldiriliyor: metin ve genislik
     animasyonsuz, aninda degisiyor. */
  .ef__alan, .ef__alan .btn, .ef__gonder-metin,
  .ef__onay-kutu, .ef__onay-tik { transition: none; }
  .ef__onay input:checked + .ef__onay-kutu .ef__onay-tik { transition-delay: 0s; }
  .ef__alan .btn:hover .ef__gonder-metin,
  .ef__alan .btn:focus-visible .ef__gonder-metin { transition-delay: 0s; }
}

/* --------------------------------------------------------------------------
   CAM GERI DUSUSU — sistemin kurali: blur yoksa "daha fazla beyaz" degil,
   KOYU YESIL dolgu (--eco-glass-fallback).
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ef__panel { background: var(--eco-glass-fallback); }
}
@media (prefers-reduced-transparency: reduce) {
  .ef__panel {
    background: var(--eco-glass-fallback);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* --------------------------------------------------------------------------
   IKON BOYAMA VE UCLAR
   Tabler'in outline dosyalari `stroke-linecap/linejoin="round"` niteliklerini
   DIS <svg> etiketinde tasiyor; biz sarmalayiciyi kendi .eco-icon'umuzla
   degistirdigimiz icin ikisi de dusuyor ve hatlar keskin ciziliyor.
   .eco-icon bunlari vermiyor (anasayfa.css ve ecording-components.css'te ayni).
   Bu yuzden burada acikca geri veriliyor.

   FILLED varyant ayri boyanir: .eco-icon `fill:none; stroke:currentColor` uygular,
   Tabler'in filled dosyalari ise `fill="currentColor"` ve stroke tasimaz —
   sinif oldugu gibi kullanilsa ikonlar GORUNMEZ olurdu.
   -------------------------------------------------------------------------- */
/* IKON SOZLESMESI BURADA TEKRARLANIYOR — footer'a KAPSANMIS olarak.
   NEDEN: .eco-icon yalnizca anasayfa.css ve ecording-components.css'te tanimli,
   eski sayfalar ise IKISINI DE yuklemiyor (olculdu: TR ve EN orneklerinde 0/0).
   Footer 143 sayfaya yayilacak ve markup'i bu sinifi 8 yerde kullaniyor; oldugu
   gibi tasinsa butun ikonlar boyutsuz ve stroke'suz cikardi.
   NEDEN DOSYA EKLEMEDIK: anasayfa.css sayfaya ozel kocaman bir dosya, site
   geneline yuklemek alakasiz kurallar ve gorsel kayma riski demek;
   ecording-components.css ise .eco-header/.eco-footer parcalarini getirip
   mevcut chrome ile catisir (bkz. yukarida .eco-action-field notu — ayni
   gerekce ile o sozlesme de burada yerel olarak tekrarlanmisti).
   Degerler kanonik kaynaktan (ecording-components.css) birebir alindi.
   OZGULLUK UYARISI: bu kural (0,2,0). Ondan daha dusuk ozgullukteki oge
   kurallari (.ef__ikon--dolu, .ef__onay-tik) bunun ALTINDA kalirdi; ikisi de
   .ef ile kapsanarak esitlendi ve asagida, bu kuraldan SONRA yaziliyor. */
.ef .eco-icon,
.ef-cta .eco-icon {
  width: 1.15em;
  height: 1.15em;
  stroke-width: var(--eco-borderwidth-icon);
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: currentColor;
  /* Tabler outline dosyalari yuvarlak uclari DIS <svg> niteliginde tasiyor;
     sarmalayiciyi kendi sinifimizla degistirdigimiz icin geri veriliyor. */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ef .eco-icon--md,
.ef-cta .eco-icon--md { width: 20px; height: 20px; }
/* OZGULLUK SIRADAN BAGIMSIZ OLMALI (0,3,0). Sozlesme (.ef .eco-icon) `fill:none`
   uyguluyor ve o da (0,2,0); bu kural da (0,2,0) kalsaydi kazanan yalnizca
   dosya sirasina bagli olurdu ve bir gun kurallar yer degistirse 5 sosyal + 1
   gonder ikonu 143 sayfada GORUNMEZ olurdu. Tikte ayni tuzak yasandi.
   Ucuncu sinif uydurma degil: dolu ikonlarin hepsi zaten `eco-icon` tasiyor.
   Tabler'in filled dosyalari fill tasir, stroke tasimaz. */
.ef .eco-icon.ef__ikon--dolu { fill: currentColor; stroke: none; }

/* Progressive mobile disclosure. Without JS all existing links remain visible. */
.ef__kolon-toggle, .ef__quick { display: none; }
.ef__kolon ul[hidden] { display: none; }
.ef__kolon-toggle:focus-visible, .ef__quick:focus-visible {
  outline: var(--eco-borderwidth-thick) solid var(--eco-border-focus);
  outline-offset: var(--eco-space-1);
}
@media (max-width: 900px) {
  .ef__kolon a, .ef__hukuki a {
    display: inline-flex; align-items: center; min-height: var(--eco-space-12);
  }
  .ef__sosyal { gap: var(--eco-space-2); flex-wrap: wrap; }
  .ef__sosyal a {
    min-width: var(--eco-space-12); min-height: var(--eco-space-12);
    align-items: center; justify-content: center;
  }
  .ef__alan { --ef-kontrol: var(--eco-space-12); }
  .ef__hukuki { gap: 0; }
}
@media (max-width: 559px) {
  .ef__kolonlar:has(.ef__kolon-toggle) { gap: 0; }
  .ef__kolon:has(.ef__kolon-toggle) { border-bottom: var(--eco-borderwidth-hairline) solid var(--eco-border-line); }
  .ef__kolon:has(.ef__kolon-toggle) h4 { margin: 0; }
  .ef__kolon-label { display: none; }
  .ef__kolon-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3);
    width: 100%; min-height: var(--eco-space-12); padding: var(--eco-space-3) 0;
    border: 0; background: transparent; color: var(--eco-text-on-brand-strong);
    font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: start; cursor: pointer;
  }
  .ef__kolon-toggle svg { flex: none; width: var(--eco-space-5); height: var(--eco-space-5); }
  .ef__kolon-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ef__kolon:has(.ef__kolon-toggle) ul { gap: 0; padding-bottom: var(--eco-space-3); }
  .ef__kolon a { width: 100%; }
  .ef__quick {
    display: flex; align-items: center; min-height: var(--eco-space-12);
    color: var(--eco-text-on-brand-strong); font-size: var(--eco-fontsize-body);
    margin-top: var(--eco-space-3); text-decoration: none;
  }
  .ef__ust, .ef__sag { gap: var(--eco-space-6); }
  .ef__cizgi { margin-block: var(--eco-space-6); }
}