/* ============================================================
   CORPORATE FOREST PROJECTS — sayfaya ozel katman
   Kalip consumer-projects sayfasindan devralindi (kurucu: "o sayfayi
   template olarak kullan"), ama consumer-projects-en.css YUKLENMIYOR:
   sinif onegi cf-, kurallar burada kendi kopyasinda. Iki sayfa boylece
   birbirine baglanmiyor; birinde yapilan bir ayar otekini bozmuyor.
   Bilesenlerin kendisi paylasilan anasayfa.css (hp-*) ve
   for-businesses-en.css (fb-*) icinde durur ve BURADAN DEGISTIRILMEZ.
   ============================================================ */

/* 01 · ACILIS — kompakt koyu kart, fotografsiz.
   Bant SABIT oldugu icin ust dolgu onu temizlemek zorunda; olcek
   space-40 (160px) ile bittiginden toplanarak buyutuldu: 160+32 = 192. */
.cf-hero {
  /* Zemin gradienti kardes sayfayla ayni ham deger (token degil): kurucunun
     verdigi kurumsal koyu yesil. Bilincli sapma, orada da boyle. */
  background: linear-gradient(135deg, #0D2B2E 0%, #1a3a2a 60%, #2d4a3e 100%);
  padding-block: calc(var(--eco-space-40) + var(--eco-space-8)) var(--eco-space-20);
}
.cf-hero__title {
  margin: 0;
  max-width: none;
  font-family: var(--eco-fontfamily-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(--eco-text-on-brand-strong);
}
.cf-hero__lede {
  margin: var(--eco-space-4) 0 0;
  max-width: 48rem;
  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);
}
.cf-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--eco-space-4);
  margin-top: var(--eco-space-6);
}
.cf-hero__proof { margin-top: var(--eco-space-8); }
.cf-hero__proof-label {
  margin: 0 0 var(--eco-space-4);
  font-size: var(--eco-fontsize-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  letter-spacing: var(--eco-letterspacing-body-sm);
  /* Koyu zeminde SOLUK metin icin tokenimiz yok; kardes sayfadaki deger. */
  color: rgba(255, 255, 255, .62);
}
.cf-hero__proof .hp-hero__strip { margin-top: 0; }

/* 02 · CAM KARTLAR — acilisin icinde: solda uzun kart, sagda iki kisa. */
.cf-bento {
  margin-top: var(--eco-space-20);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--eco-space-4);
}
.cf-bento__head {
  grid-column: 1 / -1;
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-glass-border);
  padding-top: var(--eco-space-10);
  margin: 0 0 var(--eco-space-6);
  font-size: var(--eco-fontsize-h2);
  line-height: var(--eco-lineheight-h2);
  letter-spacing: var(--eco-letterspacing-h2);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-on-brand-strong);
}
/* Dolgu .12: duz koyu zeminde .07 yeterince ayrismiyor (kardes sayfada
   olculdu: .07 -> 1.231, .12 -> 1.456 ayrisma). KENARLIK YOK (kurucu). */
.cf-tile {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 11rem;
  padding: var(--eco-space-4);
  border-radius: var(--eco-radius-lg);
  background: rgba(255, 255, 255, .12);
  border: 0;
  backdrop-filter: blur(var(--eco-glass-blur));
  -webkit-backdrop-filter: blur(var(--eco-glass-blur));
  /* Tek jest, tek bitis ani: kart ve icindeki her sey .5s ayni egride. */
  transition: background-color .5s var(--ease-out), translate .5s var(--ease-out);
}
.cf-tile:hover { background-color: rgba(255, 255, 255, .16); translate: 0 -3px; }
.cf-tile__ui {
  flex: 1 1 auto; min-height: 9.5rem;
  margin: 0 0 var(--eco-space-5);
  overflow: hidden;
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-dark-deep);
}
.cf-tile--tall { grid-row: span 2; min-height: 23rem; }
.cf-tile--tall .cf-tile__ui { min-height: 0; }
.cf-tile__title, .cf-tile__desc { padding-inline: var(--eco-space-2); }
.cf-tile__desc { padding-bottom: var(--eco-space-2); }
.cf-tile__title {
  margin: 0;
  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(--eco-text-on-brand-strong);
}
.cf-tile__desc {
  margin: var(--eco-space-3) 0 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);
}

/* ============================================================
   SENARYO SAHNELERI — iskelet kardes sayfayla ayni: somut bir sahne
   oynar, ondan bir TOHUM ayrilir, yolu kateder ve ucunda AGAC KENDINI
   CIZER. Degisen yalniz "eylem" kismi, cunku senaryolar kurumsal:
     csr      surdurulebilirlik raporu, cubuklar yukselir -> tohum -> agac
     ekip     ekip halkasi dolar, kisiler belirir        -> tohum -> agac
     program  dikim alanlari tek tek dolar               -> tohum -> agac
   SUREKLI DONER — duraklatma kurali yok (kurucu karari).
   ============================================================ */
.cf-scene {
  --cf-sure: 6.5s;
  --cf-ray: rgba(255, 255, 255, .16);
  --cf-pasif: rgba(255, 255, 255, .30);
  height: 100%;
  display: grid;
  gap: var(--eco-space-4);
  padding: var(--eco-space-5);
}
.cf-scene--v { grid-template-rows: auto auto auto; align-content: center; justify-items: center; }
/* Ray BELIRLI olmali: minmax(0,auto) ile maketin yuzdesi belirsiz boyuta
   cozulup min-content'e iniyor (kardes sayfada olculdu: maket 20px'e
   dusmustu). 11rem belirli ust sinir verir, minmax(0,...) daralmaya izin. */
.cf-scene--h { grid-template-columns: minmax(0, 11rem) auto auto; justify-content: center; align-items: center; }
.cf-scene__act { position: relative; min-width: 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.cf-scene--h .cf-scene__act { height: 100%; }

/* -- yol + tohum -- */
.cf-scene__link { position: relative; }
.cf-scene--v .cf-scene__link { width: var(--eco-borderwidth-thick); height: var(--eco-space-16); }
.cf-scene--h .cf-scene__link { width: var(--eco-space-16); height: var(--eco-borderwidth-thick); }
.cf-scene__link::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--eco-radius-full); background: var(--cf-ray);
}
/* YESIL IZ: tohum gectikce dolar ve dongu sonuna kadar kalir — eylemle
   agaci baglayan tek gorsel ipucu bu. */
.cf-scene__link::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--eco-radius-full); background: var(--eco-surface-brand);
}
.cf-scene--v .cf-scene__link::after { transform-origin: top; animation: cf-iz-v var(--cf-sure) ease-in-out infinite backwards; }
.cf-scene--h .cf-scene__link::after { transform-origin: left; animation: cf-iz-h var(--cf-sure) ease-in-out infinite backwards; }
.cf-seed {
  position: absolute; width: var(--eco-space-3); height: var(--eco-space-3);
  border-radius: var(--eco-radius-full); background: var(--eco-surface-brand); opacity: 0;
}
.cf-scene--v .cf-seed { left: 50%; margin-left: calc(var(--eco-space-3) / -2); animation: cf-tohum-v var(--cf-sure) ease-in-out infinite backwards; }
.cf-scene--h .cf-seed { top: 50%; margin-top: calc(var(--eco-space-3) / -2); animation: cf-tohum-h var(--cf-sure) ease-in-out infinite backwards; }

/* -- agac: kendini cizer -- */
.cf-scene__grow { position: relative; display: grid; place-items: end center; }
/* YUVARLAK UCLAR (kurucu karari): Tabler kaynagi round tasir ama depo
   inline gomerken niteligi atiyor ve .eco-icon bunlari vermiyor —
   paylasilan dosyaya dokunmadan sahne ikonlarina burada veriliyor. */
.cf-scene .eco-icon { stroke-linecap: round; stroke-linejoin: round; }
.cf-tree { color: var(--eco-surface-brand); overflow: visible; }
.cf-scene--v .cf-tree { width: 5.5rem; height: 5.5rem; }
.cf-scene--h .cf-tree { width: 3.5rem; height: 3.5rem; }
.cf-tree path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cf-ciz var(--cf-sure) ease-out infinite backwards; }
.cf-tree path:nth-child(2) { animation-delay: .22s; }
.cf-tree path:nth-child(3) { animation-delay: .46s; }
.cf-tree path:nth-child(4) { animation-delay: .54s; }
.cf-ground {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; height: var(--eco-borderwidth-hairline);
  background: rgba(255, 255, 255, .22); border-radius: var(--eco-radius-full);
}

/* -- 1 · SURDURULEBILIRLIK: rapor sayfasi + yukselen cubuklar -- */
.cf-sheet {
  position: relative; width: min(100%, 9rem); aspect-ratio: 5 / 6; max-height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: var(--eco-space-3);
  padding: var(--eco-space-4);
  border-radius: var(--eco-radius-sm);
  border: var(--eco-borderwidth-hairline) solid var(--cf-pasif);
}
.cf-scene--h .cf-sheet { height: 100%; width: auto; }
.cf-sheet__hd { height: var(--eco-space-2); width: 56%; border-radius: var(--eco-radius-full); background: var(--cf-ray); }
.cf-bars { display: flex; align-items: flex-end; gap: var(--eco-space-2); height: 42%; }
.cf-bars i {
  flex: 1 1 0; height: 20%; border-radius: 2px 2px 0 0;
  background: var(--eco-surface-brand);
  animation: cf-cubuk var(--cf-sure) ease-in-out infinite backwards;
}
.cf-bars i:nth-child(2) { animation-delay: .10s; }
.cf-bars i:nth-child(3) { animation-delay: .20s; }
.cf-bars i:nth-child(4) { animation-delay: .30s; }
.cf-line {
  height: var(--eco-space-2); border-radius: var(--eco-radius-full);
  background: var(--cf-ray); animation: cf-satir var(--cf-sure) ease-in-out infinite backwards;
}
.cf-line:nth-of-type(2) { animation-delay: .18s; }

/* -- 2 · CALISANLAR: ekip halkasi + beliren kisiler -- */
.cf-crew {
  position: relative; width: min(100%, 11rem); aspect-ratio: 8 / 5; max-height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--eco-space-3); padding: var(--eco-space-3);
  border-radius: var(--eco-radius-sm);
  border: var(--eco-borderwidth-hairline) solid var(--cf-pasif);
}
.cf-scene--h .cf-crew { height: 100%; width: auto; }
.cf-ring {
  width: var(--eco-space-10); height: var(--eco-space-10);
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-thick) solid var(--cf-ray);
  animation: cf-halka var(--cf-sure) ease-in-out infinite;
}
.cf-who { display: flex; gap: var(--eco-space-2); }
.cf-who i {
  width: var(--eco-space-3); height: var(--eco-space-3);
  border-radius: var(--eco-radius-full); background: var(--cf-pasif);
  animation: cf-kisi var(--cf-sure) ease-in-out infinite backwards;
}
.cf-who i:nth-child(2) { animation-delay: .16s; }
.cf-who i:nth-child(3) { animation-delay: .32s; }
.cf-crew .cf-line { width: 62%; }

/* -- 3 · UZUN VADE: dikim alanlari tek tek dolar --
   OLCULDU: izgara 176x176, tek kare 84x84, bulundugu alan 520x216 —
   uc maket icinde EN UZUNU buydu (ekip 112, rapor 173) ve dort kare
   marka yesiline donunce sayfada baskin duruyordu (kurucu).
   11rem -> 8rem: tek kare ~60px, kapladigi alan yaklasik yariya iner. */
.cf-plots {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--eco-space-2);
  width: min(100%, 8rem); aspect-ratio: 1 / 1; max-height: 100%;
}
.cf-plot {
  border-radius: 3px;
  border: var(--eco-borderwidth-hairline) solid var(--cf-pasif);
  background: transparent;
  animation: cf-alan var(--cf-sure) ease-in-out infinite backwards;
}
.cf-plot:nth-child(2) { animation-delay: .14s; }
.cf-plot:nth-child(3) { animation-delay: .28s; }
.cf-plot:nth-child(4) { animation-delay: .42s; }

/* ZAMANLAMA (6.5s): sahne 0-32 · tohum 34-58 · agac 56-82 · tutar 82-100 */
@keyframes cf-cubuk { 0%, 6% { height: 20% } 28%, 100% { height: 100% } }
@keyframes cf-satir { 0%, 8% { width: 40% } 28%, 100% { width: 96% } }
@keyframes cf-halka { 0%, 6% { border-color: rgba(255, 255, 255, .16) } 22%, 100% { border-color: var(--eco-surface-brand) } }
@keyframes cf-kisi  { 0%, 6% { background: rgba(255, 255, 255, .30); transform: scale(.7) } 24%, 100% { background: var(--eco-surface-brand); transform: scale(1) } }
@keyframes cf-alan  { 0%, 6% { background: transparent; border-color: rgba(255, 255, 255, .30) } 26%, 100% { background: var(--eco-surface-brand); border-color: var(--eco-surface-brand) } }
@keyframes cf-tohum-v { 0%, 32% { top: 0; opacity: 0 } 36% { opacity: 1 } 54% { top: calc(100% - var(--eco-space-3)); opacity: 1 } 58%, 100% { opacity: 0 } }
@keyframes cf-tohum-h { 0%, 32% { left: 0; opacity: 0 } 36% { opacity: 1 } 54% { left: calc(100% - var(--eco-space-3)); opacity: 1 } 58%, 100% { opacity: 0 } }
@keyframes cf-iz-v { 0%, 32% { transform: scaleY(0) } 54%, 100% { transform: scaleY(1) } }
@keyframes cf-iz-h { 0%, 32% { transform: scaleX(0) } 54%, 100% { transform: scaleX(1) } }
@keyframes cf-ciz  { 0%, 56% { stroke-dashoffset: 1 } 80%, 100% { stroke-dashoffset: 0 } }

/* 03 · SAHADA UYGULAMA — fb-method basligi burada IKI paragraf tasiyor
   (brief: govde + destek metni); paylasilan kural yalniz h2 icin kurgulu. */
/* Genislik biraz azaldi (kurucu) ama IKI SATIR kalmali. Burada sarma kipi
   `auto` — yani kapanis metnindeki gibi basamakli degil, genislik gercek
   bir ayar. TARANDI 1440: 620px ve alti 3 satir, 640-760 bandi 2 satir.
   736 iken satirlar [733, 527] ile dengesizdi; 43rem = 688px bandin
   ortasinda, ucurumdan 48px uzak ve satirlar [665, 594] ile dengeli. */
.cf-method__lede { margin: var(--eco-space-4) 0 0; max-width: 43rem; }

/* 04 · NATURE PROFILE MAKETI — mevcut hp-ui maketleri (os/pass/ai)
   baska urunler icin kurgulanmis; kamuya acik profili anlatan yok.
   Olculer hp-ui ailesiyle ayni dili konusuyor: ince cizgiler, marka
   yesili yalniz VURGU olarak, koyu zeminde ikon/yuzey rengi olarak. */
.cf-ui--profil {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--eco-space-3); padding: var(--eco-space-4);
}
.cf-profil__hd { display: flex; align-items: center; gap: var(--eco-space-3); }
.cf-profil__av {
  flex: none; width: var(--eco-space-8); height: var(--eco-space-8);
  border-radius: var(--eco-radius-full);
  background: color-mix(in srgb, var(--eco-surface-brand) 55%, transparent);
}
.cf-profil__ad { flex: 1 1 auto; height: var(--eco-space-2); border-radius: var(--eco-radius-full); background: rgba(255, 255, 255, .22); }
.cf-profil__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--eco-space-2); }
.cf-profil__grid i { height: var(--eco-space-8); border-radius: var(--eco-radius-sm); background: rgba(255, 255, 255, .12); }
.cf-profil__grid i:nth-child(1) { background: rgba(255, 255, 255, .22); }

/* 01 · LOGO SERIDI SABIT SIRA — marquee DEGIL.
   OLCULDU: kurucunun verdigi dort markalik set 438px; 1440px ekranda
   iki tekrar YAN YANA goruluyor ve donen izde ilk logo kenardan
   kesiliyordu ("hneider Electric"). Marka listesini uzatmak icerigi
   degistirmek olurdu; onun yerine serit durduruldu: tek set, sola
   hizali, kopya set (aria-hidden) duzenden cikarildi.
   Marka sayisi ileride artarsa bu iki kurali kaldirmak yeterli. */

/* 04 · IKI ADIM KARTI ESIT DURSUN.
   Paylasilan kural (anasayfa.css:1797, >=900px) dinlenme halinde ILK
   karta flex-grow 2.2 veriyor; uc kartli duzenlerde bilincli. Burada
   iki kart var ve OLCULDU: NatureOS 730px / Nature Profile 354px.
   .hp-step__media mutlak konumlu ve left:280px oldugu icin dar kartta
   makete yalniz 54x312 kaliyordu — maket degil SATIR ORANI kusurluydu.
   Yalnizca DINLENME hali eziliyor; hover/odakta buyume paylasilan
   etkilesimdir ve korunuyor. Ozgullugu kasitli yuksek: ezdigi kural
   (0,5,0), bu (0,6,0). */
@media (min-width: 900px) {
  .cf-follow .hp-steps__row:not(:hover):not(:focus-within) > .hp-step:first-child { flex-grow: 1; }
}

@media (max-width: 900px) {
  .cf-hero { padding-block: calc(var(--eco-space-32) + var(--eco-space-6)) var(--eco-space-16); }
  .cf-hero__title { font-size: var(--eco-fontsizemobile-display-2xl); }
  .cf-bento { grid-template-columns: minmax(0, 1fr); }
  .cf-tile--tall { grid-row: auto; min-height: 0; padding: var(--eco-space-4); }
  /* ORAN DEGIL REM: tek kolon bandinda aspect-ratio kutuyu genislikle
     buyutur ve kart icerigin cok otesine uzar (kardes sayfada olculdu:
     899px'te 626px bos alan). Yukseklik bant boyunca sabit. */
  .cf-tile__ui { height: 10rem; flex: none; min-height: 0; }
  .cf-tile--tall .cf-tile__ui { height: 24rem; }
  /* Maket YUKSEKLIK gudumluyken genisligi patliyor; bu bantta genislik
     gudumlu olmali (kardes sayfada 113px'lik sabit binme olculmustu). */
  .cf-scene--h .cf-crew,
  .cf-scene--h .cf-sheet { height: auto; width: min(100%, 11rem); max-height: 100%; }
  .cf-scene { padding: var(--eco-space-4); gap: var(--eco-space-3); }
  .cf-scene--v .cf-tree { width: 4.5rem; height: 4.5rem; }
}

/* AZALTILMIS HAREKET — ezecegi kurallardan SONRA gelmeli, yoksa esit
   ozgullukte sonraki kazanir ve override olu kalir (kardes sayfada bu
   hata bir kez yasandi). ::after DE kapsanmali: yesil iz orada. */
@media (prefers-reduced-motion: reduce) {
  .cf-scene *, .cf-scene *::before, .cf-scene *::after { animation: none !important; }
  .cf-tree path { stroke-dashoffset: 0; }
  .cf-bars i { height: 100%; }
  .cf-line { width: 96%; }
  .cf-ring { border-color: var(--eco-surface-brand); }
  .cf-who i { background: var(--eco-surface-brand); transform: scale(1); }
  .cf-plot { background: var(--eco-surface-brand); border-color: var(--eco-surface-brand); }
  .cf-seed { opacity: 0; }
  .cf-scene__link::after { transform: none; }
  .cf-tile { transition: none; }
  .cf-tile:hover { translate: none; }
}