/* ==========================================================================
   OUR STORY (EN) — sayfa katmani
   Yukleme sirasi: tokens -> style.css -> BU DOSYA -> footer-eds.css
   Hero, ni-hero ORTAK SABLONUNDAN alindi (acik zemin, ortali, iki radyal
   marka yikamasi, display-2xl baslik). Olculdu: nature-intelligence ve
   case-studies heroslari ayni receteyi paylasiyor — 72px/500, #F7F7F7.
   ========================================================================== */

/* ---------- 01 HERO — consumer-projects kalibi ----------
   Kurucu tam ekran hero'dan vazgecti; consumer-projects'in acilisi ornek
   alindi. OLCULDU: koyu gradient zemin, SOLA yasli 72px/500 beyaz baslik,
   16px altinda 18px alt metin (max 48rem), ust dolgu 192px (space-40 +
   space-8) / alt 80px. Fotograf ve perde yok. */
.ab-hero {
  position: relative; isolation: isolate;
  /* ACIK gradient (kurucu: koyu istemedi). Ayni 135deg uc duraklı yapi;
     renkler sistemden: --eco-surface-page degeri + onayli acik yesil ikili
     (#E9F5DF / #CFE8BC). Ara ton uydurulmadi. */
  background: linear-gradient(135deg, #F7F7F7 0%, #E9F5DF 60%, #CFE8BC 100%);
  /* TEK EKRAN kalkti (kurucu): ekip blogu da bu gradyanin icine girdi,
     artik yukseklik icerige gore. 100svh'ye sigdirmaya calisan esnek vh
     dolgusunun anlami kalmadi, sabit tokenlar kullaniliyor.
     overflow: hidden foto seridi icin — serit kapsayicidan tasarak akiyor
     ve .ab-ekip bolumu kalkinca onun overflow'u da gitti. Burada yapiskan
     bir eleman yok, kirpma guvenli. */
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Header SABIT ve hero'nun uzerine biniyor: dolgunun --header-h kadari
     onun altinda kaliyor. OLCULDU: 128px dolgu ekranda yalnizca 64px
     bosluk birakiyordu; ayni ailedeki consumer-projects'te bu 128px.
     Dolgu artik header yuksekligini de iceriyor. */
  padding-block: calc(var(--header-h) + var(--eco-space-32)) var(--eco-space-24);
}
.ab-hero > .container { width: 100%; min-width: 0; }
.ab-hero__ic { display: block; text-align: center; }
.ab-hero__baslik {
  margin: 0; max-width: none;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-display-xl);
  line-height: var(--eco-lineheight-display-xl);
  letter-spacing: var(--eco-letterspacing-display-xl);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-primary);
}
.ab-hero__govde {
  margin: var(--eco-space-4) auto 0; max-width: 48rem;
  font-size: var(--eco-fontsize-body-xl);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  color: var(--eco-text-secondary);
}
/* consumer-projects ile ayni ritim: aksiyonlar 24px, kanit 32px asagida. */

/* ---------- 02 ACCORDING TO NATURE — BENTO ----------
   Kalip ecodrone'un "Reaching land that is hard to restore." bolumunden
   OLCULEREK alindi: --eco-radius-lg kart, tam tasan gorsel + alta demirli
   7 duraklı siyah perde, imleci izleyen spot isik (blur 60px) ve
   perspective(900px) ile ±12deg 3B egim, 86px ikon, --eco-space-5 bosluk.
   DUZEN (kurucu): solda tek uzun kart, sagda alt alta iki kart. */
/* Kartlar HERO'NUN ICINDE, koyu zeminin uzerinde — consumer-projects'in
   .cp-bento'su gibi. OLCULDU: seritten 80px asagida, ustunde hairline ayrac
   (--eco-border-line) + 40px dolgu, izgara araligi 16px. */
/* Kartlar acilis metniyle AYNI blok: 64px. Bolum kirilimi 128px
   (kartlardan ekip basligina), blok ici cift 16px (baslik-desc) —
   128 / 16 / 64 / 128 merdiveni. */
.ab-bento {
  margin-top: var(--eco-space-16);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--eco-space-4);
  align-items: stretch;
}
.ab-bento__k {
  position: relative; overflow: hidden;
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-dark-raised);
  transition: transform .4s var(--ease-out);
  --ab-ikon: 86px;
  --isik-cap: 14rem;
  --isik-1: rgba(255, 255, 255, .6);
  --isik-0: rgba(255, 255, 255, 0);
  --isik-op: .2;
}
.ab-bento.is-canli .ab-bento__k {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
/* Sol sutun: iki satiri birden kaplayan uzun kart */
.ab-bento__k--foto { min-height: 30rem; --isik-cap: 18rem; }
.ab-bento__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ab-bento__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-bento__perde {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(0,0,0,.95) 0%, rgba(0,0,0,.93) 30%, rgba(0,0,0,.84) 44%,
    rgba(0,0,0,.62) 54%, rgba(0,0,0,.34) 64%, rgba(0,0,0,.12) 74%,
    rgba(0,0,0,0) 84%);
}
/* IKONLU KART — USTTEN EK KARARTMA. ecodrone'un perdesi ALTA demirli, cunku
   oradaki ikonlar koyu goruntulerin uzerinde duruyor. Kart 2'nin fotografinda
   sol ust parlak gokyuzu ve tuy ikonu tam oraya dusuyor: OLCULDU, ikon
   kontrasti ort 2.55 / en parlakta 1.87 — 3:1'in altinda.
   Kirpim kurtarmiyor: dikey pay 65px, bes konum olculdu, en iyisi 2.79.
   Radyal disk yok (kurucu master-plan'da reddetti); ustten inen duz bir
   yikama ayni isi leke birakmadan goruyor. */
.ab-bento__k--ikonlu .ab-bento__perde::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.42) 0%, rgba(0,0,0,.26) 24%,
    rgba(0,0,0,.08) 38%, rgba(0,0,0,0) 50%);
}

.ab-bento__isik {
  position: absolute; z-index: 2;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: var(--isik-cap); height: var(--isik-cap);
  margin: calc(var(--isik-cap) / -2) 0 0 calc(var(--isik-cap) / -2);
  border-radius: var(--eco-radius-full);
  background: radial-gradient(circle, var(--isik-1), var(--isik-0) 70%);
  filter: blur(60px); opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.ab-bento.is-canli .ab-bento__k:hover .ab-bento__isik { opacity: var(--isik-op); }
.ab-bento__ic {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--eco-space-5); padding: var(--eco-space-10);
}
.ab-bento__ikon {
  width: var(--ab-ikon); height: var(--ab-ikon); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  color: var(--eco-brand-primary);
  margin-bottom: auto;
}
.ab-bento__ad { margin: 0; display: grid; gap: var(--eco-space-2); margin-bottom: auto; }
.ab-bento__ad-buyuk {
  font-family: 'Cardo', serif; font-weight: var(--eco-fontweight-regular);
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05;
  letter-spacing: -.02em; white-space: nowrap;
  color: var(--eco-text-on-brand-strong);
}
.ab-bento__ad-acimlama {
  font-family: 'Cardo', serif; font-weight: var(--eco-fontweight-regular);
  font-size: var(--eco-fontsize-body-lg); line-height: var(--eco-lineheight-body-lg);
  color: rgba(238, 238, 238, .72);
}
.ab-bento__metin {
  margin: 0; max-width: 42ch;
  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);
}
/* Kus karti — ecodrone'un fotografli kart metniyle AYNI olcu:
   .ed-bento__k--foto .ed-bento__ifade -> fontsizemobile-h1 (26px),
   line-height 1.16, letterspacing-h2, semibold. */
.ab-bento__metin--buyuk {
  max-width: 26ch;
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsizemobile-h1);
  line-height: 1.16;
  letter-spacing: var(--eco-letterspacing-h2);
}

/* KAPANIS CTA — .ef-cta paylasilan kalip ama buton sarmalayicisi
   footer-eds.css'te DEGIL, her sayfanin kendi katmaninda tanimli
   (master-plan-en.css, blog.css). Markup'i alip kurali almayinca butonlar
   arasi 20px yerine 4px kalmisti (olculdu). Blok blog.css'ten birebir. */
.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);
}
/* (0,3,0) ZORUNLU: footer-eds.css'teki `.ef-cta .btn { margin-top: 32px }`
   ile (0,2,0) esit ozgullukte kalirsa SIRA karar verir ve bu sayfada
   footer-eds.css blog.css'ten SONRA yukleniyor — yani esitlikte o kazanir.
   Olculdu: sarmalayici 32 + buton 32 = 64px, referansin (nature-intelligence)
   32px'inin tam iki kati. Fazladan bir sinif ile sira bagimsiz kazaniyor. */
.ef-cta .ef-cta__aksiyonlar .btn { margin-top: 0; }

/* ---------- 03 EKIP ----------
   Ortali giris, altinda paylasilan .gallery-marquee foto seridi (kariyer
   sayfasindaki kalip: ikiz __slide ile sonsuz dongu), sonra destek cumlesi,
   marka logolari ve iki buton. Zemin ACIK oldugu icin ikincil buton
   .btn--white — cam varyant koyu zemin icindir. */
.ab-ekip__giris { max-width: 46rem; margin: var(--eco-space-32) auto var(--eco-space-12); text-align: center; }
.ab-ekip__baslik {
  margin: 0; text-wrap: balance;
  font-family: var(--eco-fontfamily-sans); 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);
}
.ab-ekip__govde {
  margin: var(--eco-space-5) 0 0;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-secondary);
}
.ab-ekip__destek {
  max-width: 46rem; margin: var(--eco-space-16) auto 0; text-align: center;
  font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-primary);
}
.ab-ekip__logolar { margin-top: var(--eco-space-8); }
/* Serit ana sayfada KOYU zeminde yasiyor: logolar beyaza cevriliyor
   (anasayfa.css .hp-hero__set img -> brightness(0) invert(1)).
   Burada zemin acik, o yuzden ayni filtreyi siyaha ceviriyoruz;
   paylasilan dosyaya dokunmuyoruz. */
.ab-ekip__logolar .hp-hero__set img { filter: brightness(0); opacity: .5; }
.ab-ekip__logolar .hp-hero__set li:hover img { opacity: .8; }
.ab-ekip__eylem {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--eco-space-5); margin-top: var(--eco-space-12);
}

/* ---------- 04 TANINIRLIK ---------- */
/* Ust dolgu --container-px (kurucu): panonun ustteki bolume uzakligi,
   kendi sol/sag bosluguyla ayni olsun — pano zaten margin: 0
   var(--container-px) ile duruyor. */
.ab-tan { padding-block: var(--container-px) var(--eco-space-24); background: var(--eco-surface-base); }
/* PANO — impact sayfasindaki .imp-pano bileseninin aynisi (kurucu).
   Perde ve cam degerleri oradan KOPYALANMADI: impact'in kendi yorumu da
   bunlarin fotografa gore ayarlandigini soyluyor, ve bu fotograf cok farkli.
   OLCULDU (panonun satir profili, perdesiz): safak gokyuzu asagi dogru
   parlasiyor, %40-50 bandinda tepe yapiyor (ortanca 0.43-0.46, en parlak
   %2 0.50-0.57), %50'den sonra daglarla birlikte dusuyor (0.11-0.22, ama
   kar lekeleri 0.63-0.68'e sicriyor), %85'ten sonra gercekten koyu (0.03).
   Icerik: baslik %30-37, lede %40-48, kartlar %53-91 — yani LEDE tam
   fotografin en parlak bandina oturuyor. Duz bir perde ya yetmiyor ya da
   gokyuzunu komple griye boguyor; perde fotografin TERSINE gore
   sekillendirildi: ustte ve dipte hafif (oralar zaten koyu), parlak orta
   bantta agir. */
.ab-pano {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 var(--container-px);
  padding-block: var(--eco-space-16);
  border-radius: var(--eco-radius-lg);
  min-height: 720px;
  display: flex; align-items: flex-end;
}
.ab-pano > .container { width: 100%; }
.ab-pano__bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.ab-pano__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-pano__perde {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.22)   0%,   /* koyu gokyuzu tepesi — dokunmaya gerek yok */
    rgba(0,0,0,.30)  24%,
    rgba(0,0,0,.46)  42%,   /* lede bandi: fotografin en parlak yeri */
    rgba(0,0,0,.48)  54%,
    rgba(0,0,0,.38)  78%,
    rgba(0,0,0,.30) 100%);  /* koyu sirt — perde hafifleyince derinlik kaliyor */
}
.ab-pano__ic {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; gap: var(--eco-space-10);
}
.ab-pano__ust { display: flex; flex-direction: column; gap: var(--eco-space-4); }
.ab-pano__baslik {
  margin: 0;
  font-family: var(--eco-fontfamily-sans); 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-on-brand-strong);
}
.ab-pano__lede {
  margin: 0; max-width: 54ch;
  font-size: var(--eco-fontsize-body-lg);
  line-height: var(--eco-lineheight-body-lg);
  letter-spacing: var(--eco-letterspacing-body-lg);
  color: var(--eco-text-on-dark);
}
.ab-pano__kartlar { display: grid; gap: var(--eco-space-4); }
.ab-pano__k {
  /* Logo satiri SABIT yuva: B Corp dikey oldugu icin kutusu 64px, yatay
     logolarinki 80px — akan bir sutunda bu, birinci kartin basligini
     digerlerinden 16px yukari kaciriyordu. Yuva sabitlenince uc basligin
     hepsi ayni hizada basliyor, logolar yuvanin optik ortasina oturuyor. */
  display: grid; grid-template-rows: var(--eco-space-20) minmax(36.4px, auto) 1fr;
  gap: var(--eco-space-4);
  padding: var(--eco-space-6);
  border-radius: var(--eco-radius-md);
  /* Cam tonu BEYAZ degil (impact'te beyaz, cunku oradaki fotograf koyu).
     Bu fotografta kartlarin arkasina kar dusuyor; beyaz cam uzerine
     binince kart gokyuzune gomuluyor ve metin 3.54:1'e kadar iniyordu
     (KAREDE de sutlu gorunuyordu). Koyu ton buzlu cam etkisini
     koruyor — arkadaki daglar bulanik gorunmeye devam ediyor. */
  background: rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(14px);
}
.reveal-up.revealed .ab-pano__k {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out),
              background-color .3s var(--ease-out);
}
.reveal-up.revealed .ab-pano__k:nth-child(2) { transition-delay: .1s; }
.reveal-up.revealed .ab-pano__k:nth-child(3) { transition-delay: .2s; }
.reveal-up.revealed .ab-pano__k:hover {
  transform: translateY(-3px);
  background: rgba(0, 0, 0, .30);
}
/* Uc logonun ikisi SIYAH (path'lerinde fill yok, SVG varsayilani), B Corp
   ise yalniz beyaz varyantta var. Hepsi ayni filtreden geciyor:
   brightness(0) invert(1) beyazi beyaz birakir, siyahi beyaza cevirir.
   En-boy oranlari cok farkli (B Corp 57x96 dikey, digerleri 220x120), o
   yuzden dikey olana ayri tavan — basin seridinde olculen ayni tuzak. */
/* OLCULDU: tuvallerdeki doluluk birbirini tutmuyor. B Corp'un cizimi
   tuvali tam dolduruyor (57x96 icinde %100x%100); UN logolarinin cizimi
   220x120 tuvalin yalniz %42'si kadar YUKSEK (142x51 ve 182x50). Ayni
   kutuya konunca ekranda 64px'e karsi 20px murekkep cikiyordu — ucu
   yan yana durdugunda B Corp uc kat buyuk gorunuyordu. Kutular artik
   MUREKKEP yuksekligine gore: yatay olanlar 80px kutuda ~34px, B Corp
   64px kutuda 64px. Basin seridinde olculen ayni tuzak. */
.ab-pano__logo {
  height: auto; max-height: var(--eco-space-20); max-width: 160px;
  object-fit: contain; align-self: center; justify-self: start;
  filter: brightness(0) invert(1);
}
.ab-pano__logo--dikey { max-height: var(--eco-space-16); }
/* Kart adi BASLIK degil ETIKET (kurucu): logo kimligi zaten tasiyor,
   ad onun altinda minik bir Montserrat all-caps satir olarak duruyor.
   Olcek label-lg (14px): label-sm (11px) altindaki 16px aciklamadan
   kucuk kalip hiyerarsiyi ters cevirirdi. Ad satirinin izi IKI satirlik
   (14px * %130 * 2 = 36.4px) tabanda sabit: ortadaki ad iki satira
   dusunce aciklamalar birbirinden 18px kayiyordu. */
.ab-pano__ad {
  margin: 0;
  font-family: var(--eco-fontfamily-label); font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-lg);
  line-height: var(--eco-lineheight-label-lg);
  letter-spacing: var(--eco-letterspacing-label-lg);
  text-transform: uppercase;
  color: var(--eco-text-on-brand-strong);
}
.ab-pano__govde {
  margin: 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-on-dark);
}
@media (min-width: 900px) {
  .ab-pano__kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-pano__k { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .ab-pano { padding-block: var(--eco-space-8); min-height: 0; }
  .ab-pano__baslik { font-size: var(--eco-fontsizemobile-display-lg); }
}
/* BASIN SERIDI — kalip impact sayfasindaki hero'nun altindaki .impact-serit
   (kurucu): dikey sac cizgileriyle ayrilmis hucreler. Oradaki surum KOYU
   fotograf uzerinde duruyor (beyaz yazi, rgba(255,255,255,.12) cizgi);
   burasi acik zemin, cizgi --eco-border-line. Hucrede sayi/ikon yok:
   yalniz logo, seridin altinda tek satir Montserrat all-caps etiket. */
.ab-serit { margin-top: var(--eco-space-20); }
.ab-serit__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  border-bottom: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.ab-serit__oge {
  display: flex; align-items: center; justify-content: center;
  padding: var(--eco-space-10) var(--eco-space-6);
  border-left: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.ab-serit__oge:first-child { border-left: 0; }
/* OLCULDU: tuvaller cok farkli oranda — Forbes 199x50, Fortune 215x67,
   Webrazzi 220x44, CNN Turk 136x108 (neredeyse kare). Tek bir yukseklik
   vermek ise yaramiyor: ayni yukseklikte ekranda 139px'e karsi 35px
   genislik cikiyor. Her logoya kutu verilip object-fit ile icine
   oturtuluyor, kare olana ayri tavan. Kurucunun istegiyle eski basin
   seridinden bir kademe buyuk: 28 -> 40px, kare 44 -> 64px (ayni oran). */
.ab-serit__logo {
  /* min(): izler minmax(0,1fr) ile daralabiliyor ama <img> kendi
     max-width'u kadar bir min-content tabani dayatiyor — 390px'te iki
     hucre 397px tutup sayfayi 27px tasiriyordu. Tavan artik hucreye de
     bagli. */
  height: auto; max-height: var(--eco-space-10); max-width: min(150px, 100%);
  object-fit: contain;
  opacity: .62; filter: grayscale(1);
  transition: opacity var(--duration) var(--ease-out), filter var(--duration) var(--ease-out);
}
.ab-serit__logo--kare { max-height: var(--eco-space-16); max-width: 80px; }
.ab-serit__logo:hover { opacity: 1; filter: grayscale(0); }
.ab-serit__alt {
  margin: var(--eco-space-5) 0 0; text-align: center;
  font-family: var(--eco-fontfamily-label); font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  text-transform: uppercase;
  color: var(--eco-text-muted);
}

/* ---------- ODUL BANDI ----------
   Kalip impact sayfasinda footer'in hemen ustundeki .imp-akan (kurucu):
   acik yesil gradyan uzerinde yatay akan serit, ogeler nokta ile ayrilmis,
   ikinci dizi aria-hidden ikizi dongusu dikissiz yapiyor. Oradaki buyuk
   RAKAM yerine burada odul ADI var; metrik olcegi (Montserrat, 40px)
   yazida devasa duracagi icin govde olcegi kullanildi.
   Kaydirma keyframe'i impact'te head'e inline script ile enjekte ediliyor;
   burada statik CSS — ayni sey, script'siz. */
.ab-akan {
  padding: 0; overflow: hidden;
  background: linear-gradient(100deg, #E9F5DF 0%, #CFE8BC 50%, #E9F5DF 100%);
}
.ab-akan__ray {
  display: flex; white-space: nowrap;
  padding: var(--eco-space-8) 0;
  animation: ab-akan-kay 36s linear infinite;
}
.ab-akan__dizi {
  display: flex; align-items: baseline;
  gap: var(--eco-space-12); padding-right: var(--eco-space-12);
}
.ab-akan__oge { display: inline-flex; align-items: baseline; gap: var(--eco-space-2); }
.ab-akan__ad {
  font-family: var(--eco-fontfamily-sans); font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-h4);
  line-height: var(--eco-lineheight-h4);
  letter-spacing: var(--eco-letterspacing-h4);
  color: var(--eco-text-primary);
}
.ab-akan__etiket {
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}
.ab-akan__ayrac { color: var(--eco-color-neutral-400); }
@keyframes ab-akan-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ab-akan__ray { animation: none; }
}

/* ---------- 05 SONRAKI BOLUM ---------- */

/* ---------- DAR EKRAN ---------- */
@media (max-width: 900px) {
  .ab-hero__baslik { font-size: var(--eco-fontsizemobile-display-xl); }
  /* Dar ekranda 128px'lik acilis boslugu ekranin altida birini yiyor. */
  .ab-hero { padding-block: calc(var(--header-h) + var(--eco-space-20)) var(--eco-space-16); }
  .ab-ekip__giris { margin-top: var(--eco-space-16); }
  .ab-tan { padding-block: var(--container-px) var(--eco-space-16); }
  .ab-ekip__baslik { font-size: var(--eco-fontsizemobile-display-lg); max-width: 22ch; }
  .ab-serit__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-serit__oge { padding: var(--eco-space-8) var(--eco-space-4); }
  .ab-serit__oge:nth-child(odd) { border-left: 0; }
  .ab-serit__oge:nth-child(n+3) { border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line); }
  .ab-akan__ray { padding: var(--eco-space-6) 0; }
  .ab-akan__dizi { gap: var(--eco-space-8); padding-right: var(--eco-space-8); }
  .ab-akan__ad { font-size: var(--eco-fontsizemobile-h4); }
  .ab-bento { grid-template-columns: 1fr; margin-top: var(--eco-space-8); }
  .ab-bento__k--foto { min-height: 0; }
  .ab-bento__k { min-height: 0; }
  .ab-bento__ic { gap: var(--eco-space-6); padding: var(--eco-space-8) var(--eco-space-6); }
  .ab-bento__ad-buyuk { white-space: normal; font-size: clamp(34px, 9vw, 44px); }
  .ab-bento__metin { max-width: none; }
}