/* ==========================================================================
   MASTER PLAN (EN) — sayfa katmani
   Yukleme sirasi: tokens -> style.css -> BU DOSYA -> footer-eds.css
   Tasarim dili bu oturumda kurulan desenlerden: koyu fotograf + perde,
   acik yesil gradient (nature-intelligence'in .ni-kart--yesil ikilisi),
   label rolu (Montserrat semibold, label-sm, buyuk harf), Tabler ikon
   sozlesmesi (stroke token'dan gelir, markup'ta YAZILMAZ).
   ========================================================================== */

/* ---------- HERO ---------- */
.mp-hero {
  position: relative;
  min-height: 100svh;
  --mp-k: 0; --mp-k1: 0; --mp-k2: 0;
  background: var(--eco-surface-dark-sunken);
}
/* Koreografi GORULSUN diye sahne yapiskan. Ilk denemede hero kaydikca icerik
   de yukari kaciyordu: 360px'te iki katman da ekranin ustunde kaliyor, "alttan
   gelen govde" hic izlenmiyordu (karede goruldu). Simdi hero'ya fazladan
   kaydirma payi veriliyor, sahne 100svh'de cakili kalirken kilit siliniyor ve
   govde yukseliyor; hareket bitince hero birakiyor.
   Pay YALNIZ .js-kaydir ile gelir — script yoksa hero tek ekran kalir ve iki
   katman da normal akista gorunur.
   overflow:hidden SAHNEDE durmali: .mp-hero'da kalsaydi sticky'yi sessizce
   oldururdu (tasma gizleyen ata, yapiskan torunu kirar). */
.mp-hero.js-kaydir { min-height: 185svh; }
.mp-hero__sahne {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center;
  isolation: isolate; overflow: hidden;
  /* OLCULDU: fotografin ust seridi x=60..1380 boyunca TAM BEYAZ (#FFFFFF,
     L=1.000). Bu yuzden gokyuzunu duz beyazla uzatmak dikis birakmiyor —
     gradient gerekmiyor. */
  background: #FFFFFF;
}
/* Gokyuzu bandi: fotograf asagi iniyor, ustte kalan bosluk sahnenin beyazi.
   Gerekce OLCULDU: header altindan ufka kadar parlak alan en dar sutunda
   yalnizca 255px'ti; kilit + baslik 332px yer istiyor, bu yuzden baslik
   daglara biniyordu. Bant o alani ~500px'e cikariyor.
   object-position: top — fotografin KENDI beyaz gokyuzu kutunun tepesine
   otursun ki ustteki duz beyazla birlesme yeri gorunmesin. */
.mp-hero { --mp-gok: clamp(170px, 27vh, 280px); }
.mp-hero__bg { position: absolute; inset: var(--mp-gok) 0 0 0; z-index: 0; margin: 0; }
.mp-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  /* Yavas zoom: hareket bir sey ANLATMALI — ufka dogru acilma hissi. */
  animation: mpZoom 24s ease-out forwards;
}
.mp-hero__perde {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* OLCULDU (ham kare): ust %30 L=0.999, kilit bandi L=0.619, alt yari
     L=0.05 ve altinda. Koyu tipografi ust yarida 11-17:1 veriyor, altta
     1.1-1.7:1 ile okunmuyor. Bu yuzden perde KARARTMIYOR: ustte hafif beyaz
     bir yikama ile gokyuzunu sakinlestirip koyu metni oraya oturtuyoruz. */
  background: linear-gradient(to bottom, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 64%);
}
/* Yedek yol icin ayri bir perde ARTIK YOK. Beyaz gok bandi gelmeden once
   govde, hareket azaltilmis yolda koyu ormana dusup 3.61:1 veriyordu ve o
   yola ozel bir yikama gerekiyordu. Bant sorunu yapisal olarak cozdu:
   OLCULDU, perde olmadan 1440'ta 13.26:1, 390'da 11.47:1. Fazladan yikama
   artik yalnizca fotografi sisliyordu, kaldirildi. */

.mp-hero__ic { text-align: center; align-self: start;
  position: relative; z-index: 2; width: 100%;
  /* Icerik gorselin PARLAK ust bandinda kalmali (alt yari L=0.05, koyu metin
     orada okunmuyor). Header yuksekligi + bir tutam nefes: ilk denemede yalniz
     --header-h vardi ve kilit menunun dibine yapismisti. */
  padding-top: calc(var(--header-h) + var(--mp-gok) * .62);
}
/* ---------- 2030 KILIDI ----------
   Kalip: apple.com/environment hero'su (kurucu). OLCULDU: oradaki "2030"
   metin degil, tek bir inline SVG kilidi (658x212) ve sifirlarin yerinde
   kalici geri-donusum oku duruyor. ZAMANLI DONUSUM ORADA YOK — 20 saniye
   boyunca 40 ornek alindi, tek degisim 0.5sn'deki giris cizimi; yavas
   kaydirmada imza hic degismedi. Kurucu istedigi icin donusumu BIZ ekliyoruz.
   IKONLAR BIZIM: Apple'in cizimleri kopyalanmadi, Tabler outline kullanildi.
   PUNTO: merdiven 88px'de (display-3xl) bitiyor, dev kilide yetmiyor. Akiskan
   clamp tekniginin evde emsali var (ecodrone-apple.css) ama o dosya token
   oncesi; teknigi alip olcuyu kendi token'larimizla yaziyoruz. */
.mp-yil {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0 0 var(--eco-space-8);
  font-size: clamp(72px, 13vw, 168px);
  line-height: 1;
}
.mp-yil__rakam {
  /* Kurucu karari: rakamlar yuvarlak hatli Quicksand ile — ikonlar da
     yuvarlak, ayni dili konussunlar. Sayfaya ozel, sistem token'i DEGIL;
     head'deki Google Fonts linkinden geliyor. */
  font-family: 'Quicksand', var(--font-serif);
  font-weight: var(--eco-fontweight-medium);
  letter-spacing: -.045em;
  color: var(--eco-text-primary);
}
.mp-yil__yuva {
  position: relative; display: inline-block;
  /* OLCULDU: ikon murekkebi 24 birimlik kutuyu doldurmuyor — cember/geri-donusum
     20.2/24, bu yuzden yuva rakamdan BUYUK olmali ki murekkep rakamla ayni boya
     gelsin. .844em, rakamlarin 119.3px'lik murekkep yuksekligine denk duser.
     Negatif marj yuvanin kendi ic bosluguna karsilik: olculen murekkep arasi
     17px'ti ve bunun 3.4px'i flex gap, ~10px'i yuva ici bosluktu — yani gap'i
     kismak tek basina ise yaramazdi. */
  width: .844em; height: .844em;
  /* OLCULDU (sutun profili, 5 aday): baslangictaki 17px kurucuya fazlaydi.
     -.033em 6.5px'e dusuruyordu — degmiyor ama optik olarak fazla siki.
     -.024em murekkepten murekkebe 8.5 / 14.5 / 8.5 veriyor: yarisi kadar
     siki, net ayrik. Ortadaki 14.5, "3"un kendi sol yan bosluguyla sisiyor;
     droplet dogasi geregi dar oldugu icin onda ~18px'e cikiyor, dogrusu bu. */
  margin-inline: -.024em;
  /* OLCULDU: murekkep ust kenarlari 43/39/45/39 — ikonlar rakamlardan ~4.5px
     YUKARIDA kaliyordu. Ikonlar 24 birimlik kutularinda dikey ortali, rakamlar
     ise yazi tipi metriklerine gore satir kutusunda biraz asagida oturuyor.
     Slot kadarini asagi aliyor; relative oldugu icin yerlesimi etkilemez. */
  top: .027em;
}
/* "3"un iki yani esit degil: olculen bosluklar 8.5 / 14.5 / 8.5 — yani rakamin
   SOLUNDA 14.5px, SAGINDA 8.5px var ve rakam saga itilmis gibi durup sagdaki
   ikona yaklasiyor (kurucu fark etti). Yalnizca son yuvanin sol marji
   gevsetiliyor; diger araliklar oldugu gibi kaliyor. */
.mp-yil__yuva:last-child { margin-left: -.005em; }
.mp-yil__ikon {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  /* Rakamlarla ayni renk (kurucu karari) — kilitte yesil kalmiyor. */
  color: var(--eco-text-primary);
  /* DOKUMANTE SAPMA: --eco-borderwidth-icon 24px'lik ikonlar icindir; burada
     ikon 168px'lik bir display kilidinin parcasi ve token oraninda cizgi sac
     teli gibi kalirdi. Deger viewBox biriminde ve CSS'te duruyor (markup'ta
     DEGIL). 2.6'dan 2.2'ye inildi: gorsel cizgi 14.9px -> 13.0px. */
  stroke-width: 2.2;
  --ik: 1;
  opacity: 0; transform: scale(calc(var(--ik) * .9)) rotate(-10deg);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.mp-yil__ikon.aktif { opacity: 1; transform: scale(var(--ik)); }
/* refresh'in murekkebi otekilerden kisa (16/24, otekiler 18/24). Buyutuluyor;
   OLCEKLEME CIZGIYI DE BUYUTTUGU icin stroke asagi cekilerek telafi ediliyor,
   yoksa bu ikon otekilerden kalin gorunurdu. */
.mp-yil__ikon[data-ikon="refresh"] { --ik: 1.125; stroke-width: 1.956; }

.mp-hero__etiket {
  margin: 0 0 var(--eco-space-5);
  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-brand-primary);
}
.mp-hero__baslik {
  margin: 0 auto; max-width: 15ch;
  font-family: var(--font-serif); font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-xl);
  line-height: var(--eco-lineheight-display-xl);
  letter-spacing: var(--eco-letterspacing-display-xl);
  color: var(--eco-text-primary);
}
.mp-hero__govde {
  /* Punto bir basamak yukari. body ailesi body-xl'de (20px) BITIYOR — body-2xl
     diye bir token yok — o yuzden bir ust kademe h3 (24px). max-width 58ch'ten
     48ch'e cekildi: ch punto ile buyudugu icin ayni fiziksel satir uzunlugu
     korunuyor, istenen metnin buyumesiydi satirin uzamasi degil. */
  margin: var(--eco-space-6) auto 0; max-width: 48ch;
  font-size: var(--eco-fontsize-h3);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  color: var(--eco-text-secondary);
}
/* Giris: kademeli yukselme. Son hali .revealed ile gelir (main.js gozlemcisi). */
.mp-giris { opacity: 0; transform: translateY(22px); }
.reveal-up.revealed .mp-giris,
.mp-giris.revealed {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

/* ---------- ADIMLAR ---------- */
/* ---------- UC KART ----------
   Kalip OLCULDU: apple.com/environment, ul.card-set.caption-tile-set.
   Izgara 1260px / 3 x 406.66px, sutun araligi 20px; kart 407x580 (oran .702),
   kose 28px, dolgu 0, gorsel tam tasma; kart ici metin 28px/600
   rgb(245,245,247); kart ALTINDA 17px/600 aciklama.
   IKI BILINCLI SAPMA: (1) 28px kose merdivenimizde yok -> --eco-radius-lg 20px;
   (2) 28px punto token'i yok -> h3 (24px); kartimiz 386.67px ile zaten dar.
   Aralik 20px ise --eco-space-5 ile birebir tutuyor.
   NOT: Apple'in dev yesil glifleri GORSELE GOMULU (svg sorgusu bos dondu);
   bizimkiler gercek Tabler ikonlari. */
.mp-kartlar { padding-block: var(--eco-space-24); background: var(--eco-surface-page); }
.mp-kartlar__baslik {
  /* 20ch'te "Better restoration, step by / step." diye bolunup yetim bir
     "step." birakiyordu. Daha dar olcu + balance ile dogal duraga boluniyor. */
  margin: 0 auto var(--eco-space-16); max-width: 18ch; text-align: center;
  text-wrap: balance;
  font-family: var(--font-serif); font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-lg);
  line-height: var(--eco-lineheight-display-lg);
  letter-spacing: var(--eco-letterspacing-display-lg);
  color: var(--eco-text-primary);
}
.mp-kartlar__set {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eco-space-5);
}
.mp-kart {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 407 / 580;
  padding: var(--eco-space-10);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-dark);
}
.mp-kart--koyu  { background: var(--eco-surface-dark-sunken); }
/* KART 2'YE OZEL EK KARARTMA. Bu fotografin en parlak bolgesi (acik bej bot)
   tam glifin altinda; dikey perdeden sonra bile en kotu nokta 2.55'te kaldi.
   Kirpimla cozulemiyor: yedi yatay konum olculdu, en iyisi 2.89, hicbiri
   3:1'e ulasmiyor — bot ve cakil o kadar genis bir alan kapliyor.
   OLCULDU/HESAPLANDI: en parlak nokta L=0.145'ten 0.116'ya inmeli, bu da
   ~%10 ek karartma. Ayni mudahale kartin tonunu iki koyu komsusuna da
   yaklastiriyor — iki sorunun tek caresi. Dairesel DEGIL, duzgun katman. */
.mp-kart--koyu .mp-kart__perde::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .12);
}
/* HESAPLANDI: #07190F (kart2) ile #102A1B bakista ayrismiyordu — Apple'in
   ucluSUNDE fotograf / neredeyse siyah / BELIRGIN yesil diye net bir aralik
   var. #377A36 denendi ama #EEEEEE ile 4.47:1, esigin hemen altinda; dark-raised
   #183B27 hem 10.48:1 hem #07190F'ten ~4.6 kat parlak. */
/* UCUNCU KART RENK ALANI (kurucu): Apple'in ucluSUNDE de iki kart gorselle,
   biri duz renkle kuruluyor — mavi fotograf / neredeyse siyah fotograf /
   yesil renk. Ucuncuyu gradient yapmak ayrica kalp glifinin parlak bir kola
   denk gelme sorununu da kokunden kaldiriyor; fotograf yok, parlak leke yok.
   HESAPLANDI: en acik uc #224A33 basligla 8.64:1, glifle 4.82:1; en koyu uc
   #07190F 14.8 ve 7.7 — gradientin her noktasi guvenli. */
.mp-kart--yesil {
  background: linear-gradient(160deg,
    var(--eco-surface-dark-overlay) 0%,
    var(--eco-surface-dark) 46%,
    var(--eco-surface-dark-sunken) 100%);
}
.mp-kart__gorsel { position: absolute; inset: 0; z-index: -2; margin: 0; }
.mp-kart__gorsel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Uclu SET olarak okunsun: iki saha karesi sicak/turuncu, kart1 ise soguk
     yesil sis. Hafif doygunluk dusumu + guclu perde ikisini ayni sakinlige
     cekiyor. Apple'in kartlarinda da fotograflar epey karartilmis. */
  filter: saturate(.82);
}
/* Kart 2 kirpimi: yeni gorsel icin yatay sweep sonrasi belirlenecek. */
.mp-kart__perde {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.30) 56%, rgba(0,0,0,.64) 100%);
}
/* UC KARTIN DA arkasinda artik fotograf var (kurucu: "operasyondan sahadan").
   OLCULDU (kart1, perdesiz): ikonun altindaki en parlak nokta L=0.281 ve
   #88C426 ile yalnizca 1.51:1 veriyordu — cizgi siste fiilen kayboluyordu. Dogrusal perde
   alta agirlikli oldugu icin ikonun durdugu %38 bandini neredeyse hic
   karartmiyor. Golge kullanilamaz (ev kurali), fotografi degistirmek de
   gereksiz; bu yuzden YALNIZ ikonun arkasina yumusak bir radyal koyuluk
   ekleniyor: kenarlar ve fotografin havasi korunuyor. */
.mp-kart__perde,
.mp-kart--foto .mp-kart__perde {
  /* Ikon arkasindaki RADYAL KALDIRILDI (kurucu: fotografin uzerinde dairesel
     bir leke gibi okunuyordu). Yerine DIKEY ve duzgun bir karartma: gokyuzunden
     zemine dogal golgelenme gibi okunur, disk imzasi yok.
     GEREKCE OLCULDU: radyal cikinca glif kontrasti kart1'de 4.43 -> 1.55,
     kart2'de 3.25 -> 1.17'ye dustu — secilen iki fotografin EN PARLAK bolgesi
     tam glifin oturdugu yer (ham ikon bandi L=0.419 ve 0.449). */
  background: linear-gradient(to bottom,
    rgba(0,0,0,.40) 0%, rgba(0,0,0,.62) 30%,
    rgba(0,0,0,.60) 56%, rgba(0,0,0,.78) 100%);
}
.mp-kart__ikon {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: 54%; aspect-ratio: 1; height: auto;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
  /* DOKUMANTE SAPMA: --eco-borderwidth-icon 24px'lik ikonlar icin; glif burada
     ~209px ve token oraninda cizgi hantal kalirdi. Deger viewBox biriminde. */
  stroke-width: 1.1;
  color: var(--eco-brand-primary);
}
/* CIZILME: depodaki idiom (bkz. consumer-projects .cp-tree) — pathLength="1"
   her yolu 1 birime normalize eder, boylece uzunluk tahmin etmeden
   stroke-dashoffset 1->0 surulur. Tetik AYRI BIR SCRIPT DEGIL: kart zaten
   .reveal-up tasiyor, cizim .revealed gelince basliyor.
   FAIL-OPEN: varsayilan dashoffset 0, yani cizilmis. Tersi olsaydi script
   calismadiginda ikonlar gorunmez kalirdi. */
.mp-kart__ikon { --mp-ciz-sure: 4.5s; }
.mp-kart__ikon path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal-up.revealed .mp-kart__ikon path {
  /* SUREKLI DONER (kurucu). Tempo consumer-projects .cp-tree kalibindan:
     kisa "cizilmemis" bekleme -> cizim -> uzun "cizili" bekleme. Boylece ikon
     dongunun cogunda duruyor, arada bir yeniden ciziliyor. */
  animation: mp-ciz var(--mp-ciz-sure) var(--ease-out) infinite backwards;
}
.reveal-up.revealed .mp-kart__ikon path:nth-child(2) { animation-delay: .09s; }
.reveal-up.revealed .mp-kart__ikon path:nth-child(3) { animation-delay: .18s; }
.reveal-up.revealed .mp-kart__ikon path:nth-child(4) { animation-delay: .25s; }
.reveal-up.revealed .mp-kart__ikon path:nth-child(5) { animation-delay: .31s; }
/* KAYBOLMA TEK PARCA. Once yalniz yol basina gecikme vardi; dongu basa
   sardiginda her yol KENDI gecikmesine gore ayri anda dashoffset 1'e
   sicriyordu — bazi parcalar gidip bazilari kaliyordu (kurucu fark etti).
   Cozum: kademe cizimde kalsin, ama glifin TAMAMI tek parca halinde
   solsun; sifirlama o gorunmezlik penceresinde olunca sicrama goze
   carpmiyor. Pencere (%88-%100 + %0-%12 = ~0.9sn) en buyuk yol
   gecikmesinden (.31sn) genis, yani her sifirlama icine dusuyor. */
.reveal-up.revealed .mp-kart__ikon {
  animation: mp-ikon-sol var(--mp-ciz-sure) linear infinite;
}
@keyframes mp-ikon-sol {
  0%, 12%   { opacity: 0 }
  22%, 80%  { opacity: 1 }
  88%, 100% { opacity: 0 }
}
@keyframes mp-ciz { 0%, 8% { stroke-dashoffset: 1 } 46%, 100% { stroke-dashoffset: 0 } }

.mp-kart__baslik {
  position: relative; margin: 0; text-align: center;
  font-family: var(--eco-fontfamily-sans);
  font-weight: var(--eco-fontweight-semibold);
  /* OLCULDU: 30px ve 34px AYNI sekilde sariyor (kart1/kart2 tek satir,
     kart3 iki satir), yani buyuk olan bedava geliyor — kurucu buyuk istedi. */
  font-size: var(--eco-fontsize-display-sm);
  line-height: var(--eco-lineheight-display-sm);
  letter-spacing: var(--eco-letterspacing-display-sm);
  color: var(--eco-text-on-dark);
}
.mp-kart__alt {
  margin: var(--eco-space-5) 0 0;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}

.mp-yon { padding-block: 0 var(--eco-space-24); background: var(--eco-surface-page); }
/* Pano da IKI sutun: metin solda, gorsel sagda. Tek sutunda panonun sag
   yarisi bos yesil kaliyordu (karede goruldu). */
.mp-yon__pano {
  position: relative; overflow: hidden;
  border-radius: var(--eco-radius-lg);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: var(--eco-space-16); align-items: center;
  padding: var(--eco-space-16);
  /* Renkler uydurulmadi: nature-intelligence'taki .ni-kart--yesil ikilisi. */
  background: linear-gradient(140deg, #CFE8BC 0%, #E9F5DF 64%);
}
.mp-yon__baslik {
  margin: 0; max-width: 20ch;
  font-family: var(--font-serif); font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-md);
  line-height: var(--eco-lineheight-display-md);
  letter-spacing: var(--eco-letterspacing-display-md);
  color: var(--eco-text-primary);
}
.mp-yon__govde {
  margin: var(--eco-space-6) 0 0; max-width: 60ch;
  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);
}
.mp-yon__not {
  margin: var(--eco-space-8) 0 0;
  display: inline-flex; align-items: center; gap: var(--eco-space-2);
  padding: var(--eco-space-2) var(--eco-space-4);
  border-radius: var(--eco-radius-full);
  background: var(--eco-surface-base);
  font-family: var(--eco-fontfamily-label);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-text-primary);
}
.mp-yon__nokta {
  width: 8px; height: 8px; border-radius: var(--eco-radius-full);
  background: var(--eco-brand-primary); flex: none;
}

/* CTA'da IKI aksiyon: footer-eds.css yalnizca `.ef-cta .btn { margin-top }`
   veriyor. (0,3,0) ZORUNLU — esit ozgullukte kalirsa SIRA karar verir ve
   sarmalayici 32 + buton 32 = 64px olur. */
.ef-cta__aksiyonlar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--eco-space-5);
  margin-top: var(--eco-space-8);
}
.ef-cta .ef-cta__aksiyonlar .btn { margin-top: 0; }

.mp-yon__gorsel {
  border-radius: var(--eco-radius-md); overflow: hidden;
  aspect-ratio: 4 / 3;
}
.mp-yon__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* KAYDIRMA: kilit bulaniklasip silinirken gövde metni alttan yukselir.
   Apple'in kendi hero'su bunu YAPMIYOR (olculdu: scroll 0->1300 boyunca
   opaklik 1, filter none, transform birim) — kurucu istedi, biz ekliyoruz.
   GUVENLI VARSAYILAN: asagidaki kurallar yalnizca .js-kaydir varken geceri;
   script calismazsa ya da hareket azaltilmissa ikisi de tam gorunur. */
.mp-hero.js-kaydir .mp-hero__ic > .container { display: grid; }
.mp-hero.js-kaydir .mp-hero__kat1,
.mp-hero.js-kaydir .mp-hero__kat2 { grid-area: 1 / 1; }
.mp-hero.js-kaydir .mp-hero__kat2 { align-self: center; }

/* IKI AYRI RAMPA. Ilk denemede ikisi de tek --mp-k ile suruluyordu; k=0.5'te
   kilit %50, govde %50 oluyor ve ikisi AYNI banda dustugu icin metin metnin
   ustune biniyordu (karede goruldu: silinen basligin hayaleti ile yukselen
   paragraf okunmaz bir karisim yapti). Rampalar artik ayrik: kilit 0->.45
   arasinda gider, govde .55'ten sonra gelir. Aradaki bosluk bir es — ekranda
   yalnizca fotograf kalir. */
.mp-hero.js-kaydir .mp-hero__kat1 {
  opacity: calc(1 - var(--mp-k1));
  filter: blur(calc(var(--mp-k1) * 16px));
  transform: translateY(calc(var(--mp-k1) * -46px)) scale(calc(1 - var(--mp-k1) * .06));
  will-change: opacity, filter, transform;
}
.mp-hero.js-kaydir .mp-hero__kat2 {
  opacity: var(--mp-k2);
  transform: translateY(calc((1 - var(--mp-k2)) * 56px));
  will-change: opacity, transform;
}

@keyframes mpZoom { from { transform: scale(1); } to { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .mp-hero__bg img { animation: none; }
  .mp-giris { opacity: 1; transform: none; }
  .mp-kart__ikon, .mp-kart__ikon path { animation: none !important; }
  .mp-kart__ikon { opacity: 1; }
  .mp-kart__ikon path { stroke-dashoffset: 0; }
}
@media (max-width: 900px) {
  .mp-hero__baslik { font-size: var(--eco-fontsizemobile-display-xl); }
  .mp-yil { margin-bottom: var(--eco-space-6); }
  .mp-hero__govde  { font-size: var(--eco-fontsize-body-xl); line-height: var(--eco-lineheight-body-xl); }
  .mp-kartlar { padding-block: var(--eco-space-16); }
  .mp-kartlar__baslik { font-size: var(--eco-fontsizemobile-display-lg); margin-bottom: var(--eco-space-10); }
  .mp-kartlar__set { grid-template-columns: 1fr; gap: var(--eco-space-8); }
  .mp-yon { padding-block: 0 var(--eco-space-16); }
  .mp-yon__pano { grid-template-columns: 1fr; gap: var(--eco-space-8); padding: var(--eco-space-8) var(--eco-space-6); }
  .mp-yon__gorsel { aspect-ratio: 16 / 10; }
  .mp-yon__baslik { font-size: var(--eco-fontsizemobile-display-md); }
}