/* ----------------------------------------------------------------------
   SAHNE — hero, logo seridi ve kartlar TEK bolumde, TEK zeminde (kurucu).
   Gradient yikama en/technology/nature-intelligence.html'deki .ni-hero
   ::before'dan BIREBIR alindi; `isolation: isolate` + `z-index: -1` ikilisi
   de onunla birlikte geliyor, yoksa yikama icerigin ustune cikar.
   ZEMIN NOTR RAMPADAN (kurucu: "bu sarimsi renk yok"). Sayfanin eski bej
   tonlari (#F8F6EF / #FCFCFA) sicakti ve notr rampada karsiliklari yoktu;
   ucu de kaldirildi. Secilen deger --eco-surface-page, yani nature
   intelligence sahnesinin zemininin TA KENDISI — kopyalanan kalipla ayni.
   ---------------------------------------------------------------------- */
.cs-sahne {
  position: relative;
  isolation: isolate;
  background: var(--eco-surface-page);
  padding-block: calc(var(--eco-space-40) + var(--eco-space-8)) var(--eco-space-24);
  text-align: center;
}
.cs-sahne::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 18% 6%, rgba(136, 196, 38, .18), transparent 70%),
    radial-gradient(54rem 30rem at 88% 94%, rgba(55, 122, 54, .13), transparent 72%);
}
/* Kartlar sahnenin ortalamasini miras ALMAZ. */
.cs-vakalar { margin-top: var(--eco-space-16); text-align: left; }
@media (max-width: 900px) {
  .cs-sahne { padding-block: var(--eco-space-24) var(--eco-space-16); }
}

/* ----------------------------------------------------------------------
   HERO — ORTALANMIS (kurucu: "nature intelligence sayfasindaki gibi").
   Kalip en/technology/nature-intelligence.html'deki .ni-hero: ortalanmis
   grid, display-2xl baslik, body-xl lede, altinda buton.
   ALINMAYAN: oradaki ikon + urun adi eyebrow'u. Kurucu "baslik, desc, buton"
   dedi; oraya bir etiket koymak metin uydurmak olurdu.
   Zemin sayfanin kendi beji; ni-hero'daki radial yesil yikama KOPYALANMADI,
   o sayfaya ozel bir imza.
   ---------------------------------------------------------------------- */

.cs-hero__ic { display: grid; justify-items: center; gap: var(--eco-space-4); }
.cs-hero__baslik {
  margin: 0; max-width: 20ch;
  font-family: var(--font-sans);
  font-size: var(--eco-fontsize-display-2xl);
  line-height: var(--eco-lineheight-display-2xl);
  letter-spacing: var(--eco-letterspacing-display-2xl);
  font-weight: var(--eco-fontweight-medium);
  color: var(--text-01);
  text-wrap: balance;
}
.cs-hero__lede {
  margin: 0; max-width: 46ch;
  font-size: var(--eco-fontsize-body-xl);
  line-height: var(--eco-lineheight-body-xl);
  letter-spacing: var(--eco-letterspacing-body-xl);
  color: var(--text-02);
}
.cs-hero__eylem { margin: var(--eco-space-2) 0 0; }
@media (max-width: 900px) {
  .cs-hero { padding-block: var(--eco-space-24) var(--eco-space-12); }
  .cs-hero__baslik { font-size: var(--eco-fontsizemobile-display-2xl); }
}

/* ----------------------------------------------------------------------
   GUVEN SERIDI — kalip fintechx'teki "Trusted by…" bandi (kurucu):
   cizgi uzerinde ortalanmis pill etiket, altinda kayan logolar, altinda
   kenarlara dogru SOLAN ayirici cizgi.
   MARQUEE YENIDEN YAZILMADI: .trust__logos zaten tam olarak o kenar
   maskesini (%8/%92) ve .trust__track marquee animasyonunu tasiyor. Onlar
   PAYLASILAN style.css'te; dokunulmadi, markup oldugu gibi korundu.
   Etiket metni de UYDURULMADI: sayfanin kendi "Trusted by…" cumlesi.
   ---------------------------------------------------------------------- */
/* Artik bolum degil, sahnenin icinde bir blok: kendi zemini ve bolum
   padding'i YOK; ustundeki bosluk marjla veriliyor. */
.cs-guven { margin-top: var(--eco-space-20); }
/* Logolar paylasilan .trust__slide img'den %30 opaklik aliyor ve referansa
   gore fazla soluk kaliyordu. style.css'e DOKUNULMADI; yalnizca bu bolumun
   icinde eziliyor. */
/* OLCU: anasayfadaki .hp-hero__set recetesi — logolar IKI boyuttan birden
   sinirlanir. Paylasilan .trust__slide img yalnizca `height: 26px` veriyor ve
   genisligi serbest birakiyor; o yuzden genis kelime-logolari devlesiyordu
   (Borusan 169px) dar olanlar eziliyordu (TOGG 29px). Anasayfada olculen
   denge: max-width 84 + max-height 28 + contain -> L'Oreal 84x15,
   Bayer 28x28, Dell 49x28.
   style.css'e DOKUNULMADI; (0,2,1) ozgullukle yalnizca bu bolumde eziliyor.
   OPAKLIK: anasayfa koyu zeminde .5 kullaniyor; burasi acik zemin ve kurucu
   "daha da azalsin, baskin durmasin" dedi. */
.cs-guven .trust__slide img {
  height: auto; width: auto;
  max-height: 28px; max-width: 84px;
  object-fit: contain;
  /* OPAKLIK BURADA VERILMIYOR: kurucu "daha da azalsin, baskin durmasin"
     dedi ve istenen deger paylasilan style.css'teki tabanin kendisi (.3).
     Ayni sayiyi burada tekrarlamak degeri iki yere dagitirdi; bildirim
     kaldirildi, taban gecerli. Olcu ezmesi kaliyor, renk karari tek yerde. */
}
/* Serit kendi alt boslugunu veriyor; kart bolumunun ust padding'i ustune
   binince arada bosluk deligi olusuyordu (karede goruldu). Komsu secici —
   kart bolumunun sinifi yok, markup'a dokunmaya gerek kalmiyor. */
/* (Komsu secici kalkti: kart bolumu artik ayri bir <section> degil.) */
/* Cizgi pill'in ARKASINDAN gecer; pill zemini bolum rengiyle ayni oldugu
   icin cizgi etiketin iki yaninda kesiliyormus gibi okunur. */
.cs-guven__ust {
  position: relative; display: flex; justify-content: center;
  margin-bottom: var(--eco-space-10);
}
.cs-guven__ust::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.cs-guven__etiket {
  position: relative;
  padding: 8px 20px;
  border-radius: var(--eco-radius-full);
  /* Cip GORUNUR olmali: bolum zemini verilince ortada bir cip degil, sadece
     kesilmis bir cizgi olusuyordu (karede goruldu). Token yuzey. */
  background: var(--eco-surface-subtle);
  font-size: var(--eco-fontsize-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  letter-spacing: var(--eco-letterspacing-body-sm);
  color: var(--text-02);
  text-align: center;
}
/* Ayirici: duz border DEGIL — opaklik iki uca dogru azaliyor (referansin
   ayirt edici detayi), bu yuzden gradient bir 1px serit. */
.cs-guven__alt {
  display: block; height: var(--eco-borderwidth-hairline);
  margin-top: var(--eco-space-10);
  background: linear-gradient(to right,
    transparent 0%, var(--eco-border-line) 18%,
    var(--eco-border-line) 82%, transparent 100%);
}
@media (max-width: 900px) {
  .cs-guven { padding-block: var(--eco-space-10); }
  .cs-guven__etiket { font-size: var(--eco-fontsize-body-xs); padding: 6px 14px; }
}
/* ----------------------------------------------------------------------
   CASE STUDIES — tipografi katmani.
   Bu dosyayi YALNIZCA en/case-studies.html yukler; paylasilan css/style.css'e
   DOKUNULMADI.
   NEDEN CSS: sayfanin tipografisi neredeyse tamamen SATIR ICI yaziliydi ve
   satir ici stil media query'yi YENER. Mobil basamagi olan roller buraya
   tasindi; mobil basamagi olmayanlar satir icinde token'a cevrildi (bu kod
   tabaninda yerlesik kalip).
   Font AILESINE dokunulmadi: Avenir lisans karari bekliyor.
   ---------------------------------------------------------------------- */


/* style.css tabani 36px (h1 basamagi) veriyordu; yeni sayfalarda bolum
   basliklari display-md. Blogda ayni sinif ayni sekilde duzeltilmisti. */
.section__title {
  font-size: var(--eco-fontsize-display-md);
  line-height: var(--eco-lineheight-display-md);
  letter-spacing: var(--eco-letterspacing-display-md);
}
@media (max-width: 900px) {
  .section__title { font-size: var(--eco-fontsizemobile-display-md); }
}


/* ----------------------------------------------------------------------
   VAKA KARTLARI — yigin duzen (kurucu, adverix referansi).
   Solda etiket + baslik (ust) ve ozet (ALTA itilmis — referansin imza
   hareketi), ortada marka gorseli, sagda koyu etki paneli.
   KART LINK DEGIL: kurucu "ekstra sayfaya yonlendirmiycez" dedi; <a> degil
   <article>. Sonuc: en/case-studies/ altindaki 7 sayfa artik bu bolumden
   baglanmiyor (header'daki nav__featured linki duruyor).
   IKON SOZLESMESI burada tekrarlaniyor: .eco-icon anasayfa.css'te tanimli
   ama bu sayfa onu YUKLEMIYOR ve o paylasilan dosyaya dokunulmuyor.
   Kalinlik markup'ta degil token'da. CO2 icin gereken 'cloud' ikonu sette
   yoktu; resmi @tabler/icons paketinden OLDUGU GIBI kopyalandi (SOURCE.md
   kurali), elle cizilmedi.
   ---------------------------------------------------------------------- */
.cs-ikon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: var(--eco-borderwidth-icon);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
}
.cs-ikon--lg { width: 24px; height: 24px; }

.cs-vakalar { display: grid; gap: var(--eco-space-6); }

.cs-vaka {
  display: grid;
  grid-template-columns: 1.07fr 1fr 1fr;
  gap: var(--eco-space-6);
  padding: var(--eco-space-8);
  /* Kart zemini notr rampadan, sahneden (#F7F7F7) bir kademe KOYU (kurucu).
     Yan fayda: beyaz senaryo cipi beyaz kartta sonuklesiyordu, burada
     tekrar ayrisiyor. */
  background: var(--eco-surface-subtle);
  border-radius: var(--eco-radius-lg);
  transition: background var(--duration) var(--ease);
}
/* Hover, dinlenme renginin BIR KADEME koyusu (kurucu). Alternatifi — renk
   sabit kalip kartin hafifce yukari kalkmasi — denendi ve kareye bakildi:
   6px'lik kalkis golgesiz ve renksiz haliyle ancak iki kare yan yana
   konup aradaki bosluk olculunce fark ediliyor, yani geri bildirim gorevi
   yapmiyor. Golge ile guclendirmek bu sistemde yasak. */
.cs-vaka:hover { background: var(--eco-color-neutral-200); }

.cs-vaka__sol { display: flex; flex-direction: column; min-width: 0; }
.cs-vaka__tag {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--eco-radius-full);
  background: var(--eco-button-white-fill);
  border: var(--eco-borderwidth-hairline) solid var(--eco-button-white-border);
  font-family: var(--font-caps);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  font-weight: var(--eco-fontweight-semibold);
  text-transform: uppercase;
  color: var(--text-02);
}
.cs-vaka__baslik {
  margin: var(--eco-space-5) 0 0;
  font-family: var(--font-sans);
  font-size: var(--eco-fontsize-h3);
  line-height: var(--eco-lineheight-h3);
  letter-spacing: var(--eco-letterspacing-h3);
  font-weight: var(--eco-fontweight-medium);
  color: var(--text-01);
  text-wrap: balance;
}
.cs-vaka__ozet {
  margin: auto 0 0; padding-top: var(--eco-space-8);
  max-width: 46ch;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--text-02);
}

.cs-vaka__medya {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--eco-radius-md);
  min-height: 300px;
}
/* The image optimizer adds <source> siblings inside <picture>; use the
   photo class so the fill rule also applies to the production markup. */
.cs-vaka__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration) var(--ease);
}
.cs-vaka:hover .cs-vaka__foto { transform: scale(1.04); }
/* Marka isareti gorselin ALTINDA ve zemin fotografa gore degisiyor; ince bir
   scrim olmadan acik fotograflarda eriyor (ayni sorun eski kartlarda
   olculmustu). */
.cs-vaka__medya::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
/* Marka logosu: anasayfanin recetesi (.hp-chain__logo) burada TEKRAR
   ediliyor — o dosya (anasayfa.css) bu sayfada YUKLENMIYOR ve ona
   dokunulmuyor. Logolar tek renk cizim; fotografin uzerinde beyaza
   cevriliyor, okunurlugu alttaki scrim sagliyor.
   max-width + contain ZORUNLU: genis kelime-logolari sabit yukseklikte
   kutuyu yatayda tasirdi.
   KAYNAK assets.ecording.org/stable/logos — anasayfanin kullandigi set.
   Yazi fallback'i kalkti: uc markanin da logosu var. */
.cs-vaka__logo {
  position: absolute; left: var(--eco-space-5); bottom: var(--eco-space-5); z-index: 1;
  height: 26px; width: auto; max-width: 62%;
  object-fit: contain; object-position: left bottom;
  filter: brightness(0) invert(1); opacity: .92;
}

.cs-vaka__etki {
  display: flex; flex-direction: column;
  padding: var(--eco-space-6);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-dark);
  color: var(--eco-text-on-dark);
  --eco-border-line: rgba(255, 255, 255, .14);
}
.cs-vaka__etkiBaslik {
  margin: var(--eco-space-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--eco-fontsize-h5);
  line-height: var(--eco-lineheight-h5);
  letter-spacing: var(--eco-letterspacing-h5);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-on-brand-strong);
}
.cs-vaka__liste { list-style: none; margin: auto 0 0; padding: 0; }
.cs-vaka__metrik {
  display: grid; grid-template-columns: auto auto 1fr;
  align-items: center; gap: var(--eco-space-3);
  padding-block: var(--eco-space-4);
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
}
.cs-vaka__deger {
  font-size: var(--eco-fontsize-num-lg);
  line-height: var(--eco-lineheight-num-lg);
  font-weight: var(--eco-fontweight-semibold);
  color: var(--eco-text-on-brand-strong);
}
/* ALT SIMGE: "CO₂" tek karakter olarak 11px buyuk-harf etikette virgul gibi
   okunuyordu (karede goruldu). Veri DEGISMEDI; yalnizca alt simge gercek bir
   <sub> olarak dizildi ve kendi puntosu verildi. */
.cs-vaka__etiket sub {
  font-size: .78em;
  line-height: 0;
  vertical-align: -.15em;
  letter-spacing: 0;
}
.cs-vaka__etiket {
  justify-self: end;
  font-family: var(--font-caps);
  font-size: var(--eco-fontsize-label-sm);
  line-height: var(--eco-lineheight-label-sm);
  letter-spacing: var(--eco-letterspacing-label-sm);
  font-weight: var(--eco-fontweight-semibold);
  text-transform: uppercase;
  color: var(--eco-text-on-dark);
}

@media (max-width: 980px) {
  .cs-vaka { grid-template-columns: 1fr; gap: var(--eco-space-5); padding: var(--eco-space-6); }
  .cs-vaka__ozet { margin-top: var(--eco-space-5); padding-top: 0; }
  .cs-vaka__medya { min-height: 0; aspect-ratio: 16 / 10; }
  .cs-vaka__liste { margin-top: var(--eco-space-5); }
}