/* ==========================================================================
   SAYFA 07 — Tree Planting (EN)   ·   tp- katmani
   Paylasilan desenler KOPYALANMAZ, YUKLENIR: hp-* (anasayfa.css),
   fb-spec / fb-close (for-businesses-en.css). Burada yalniz bu sayfaya
   ait olanlar tanimli.
   Hero ritmi kardes ts-hero'dan alindi (ayni dolgu/olcek merdiveni).
   ========================================================================== */

.tp-hero {
  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);
}
.tp-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);
}
.tp-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);
}
.tp-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--eco-space-4); margin-top: var(--eco-space-6);
}
.tp-hero__proof { margin-top: var(--eco-space-8); }
.tp-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);
  color: rgba(255, 255, 255, .62);
}
.tp-hero__proof .hp-hero__strip { margin-top: 0; }

/* 02 · SAHAYA UYGUN YONTEM — acik yuzey (hp-sys beyaz oldugu icin burada
   surface-page kullanilir; iki acik bolum ust uste duz kalmasin). */
.tp-method { background: var(--eco-surface-page); padding-block: var(--eco-space-24); }
.tp-method__kap { display: grid; gap: var(--eco-space-12); align-items: center; }
.tp-method__metin { min-width: 0; }
.tp-method__gorsel {
  margin: 0; overflow: hidden;
  border-radius: var(--eco-radius-lg);
  aspect-ratio: 3 / 2;   /* kaynak 2400x1600 = 3:2; kirpma yok */
  background: var(--eco-surface-subtle);
}
.tp-method__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Operasyon dipnotu: govde metnine karismasin diye kutuda. */
.tp-not {
  margin: var(--eco-space-8) 0 0;
  padding: var(--eco-space-5) var(--eco-space-6);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-subtle);
}
.tp-not__metin {
  margin: 0; display: flex; align-items: flex-start; gap: 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);
  color: var(--eco-text-secondary);
}
.tp-not__ikon { flex: 0 0 auto; margin-top: .15em; color: var(--eco-icon-muted); }

/* 03-04 · TAKIP
   Baslik / aciklama / buton ALT ALTA ve ORTALI (kurucu: "boyle dengesiz
   durdu"). Onceki kurgu solda metin saginda buton seklinde iki sutundu.
   .hp-sys__head'in 46rem siniri metne tasinir; ortalama icin blogun kendisi
   genis kalmali. .hp-desc paylasilan katmanda max-width: 54ch tasiyor —
   ortalanmis bir blokta o sinir sola yaslanir, bu yuzden margin-inline: auto
   verilir. Buton ACIK zeminde: .btn--secondary cam varyanti ve sitede yalniz
   koyu hero'larda kullaniliyor; hp-sys bolumlerinde kardes sayfalarin ikisi
   de .btn--white kullaniyor. */
.tp-follow__head {
  max-width: none;
  display: grid; justify-items: center; text-align: center;
  /* Paylasilan .hp-sys__head 48px alt marj tasir (anasayfa.css); kurucu
     kaldirilmasini istedi. Paylasilan katman DEGISTIRILMEZ, burada ezilir.
     DIKKAT: bu marj ile .tp-mac'in ust marji BITISIK KARDES oldugu icin
     COKUYORDU — ikisi de 48px olunca gorunur bosluk 96 degil 48px'ti
     (olculdu). Dolayisiyla yalniz birini sifirlamak HICBIR SEY degistirmez;
     .tp-mac'in margin-top'u da kaldirildi. Ikisi birden sifir olmazsa
     max(0, 48) = 48 kalir. */
  margin-bottom: 0;
}
.tp-follow__metin { max-width: 46rem; }
.tp-follow__metin .hp-desc { margin-inline: auto; }
.tp-follow__btn { margin-top: var(--eco-space-8); }

@media (min-width: 900px) {
  .tp-method__kap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--eco-space-16); }
}

@media (max-width: 900px) {
  .tp-hero { padding-block: calc(var(--eco-space-32) + var(--eco-space-6)) var(--eco-space-16); }
  .tp-hero__title { font-size: var(--eco-fontsizemobile-display-2xl); }
}

/* --------------------------------------------------------------------------
   NatureOS sahnesi — cihaz belirir, sonra yakinlasir (kapak acilmasi YOK).
   Kurucunun referansi apple.com/macbook-neo'daki scroll animasyonu; oradaki
   uygulama canvas tabanli ve HTML'den cikarilamaz, bu yuzden tarif edilen
   AKIS kuruldu, kod taklit edilmedi.
   Sahne ACIK zeminde: sayfada zaten koyu bir hero var, 100svh'lik ikinci bir
   koyu alan "acik agirlik" kuralini bozardi. Koyu olan yalniz cihaz.
   -------------------------------------------------------------------------- */
/* CIHAZ TEK BIR GORSEL: assets/laptop-front.png. Kapak acilmasi YOK
   (kurucu karari) — sahne once GIRIS yapar, sonra YAKINLASIR.
   Gorselin ekran bolgesi SAYDAM birakilmis bir mockup; dashboard onun
   ARKASINDA durur ve delikten gorunur. */

/* Sahne kabin 1120px'ine degil EKRANA gore buyur (kurucu: "zoom in oldukca
   ekranin kenarlarina yaklasabilir"). Bunun icin pist tam genislige tasar.
   overflow-x: clip yatay kaydirma cubugunu engeller; `clip` kaydirma kutusu
   URETMEDIGI icin icerideki position: sticky calismaya devam eder —
   `hidden` yazilsaydi pin kirilirdi. */
.tp-follow { overflow-x: clip; }
/* margin-top YOK: .tp-follow__head'in alt marjiyla cokerdi ve tek basina
   birini sifirlamak gorunur bosluga etki etmezdi (bkz. .tp-follow__head). */
.tp-mac {
  position: relative;
  height: 260svh;
  width: 100vw; margin-inline: calc(50% - 50vw);
}
/* Pin viewport'un TAMAMINA gore ortalar — header dolgusu YOK (kurucu karari).
   Bir ara surumde buraya padding-top: var(--header-h) konmustu: cihazin ust
   seridinin sabit header'in altina girmesini onluyordu, ama sahneyi 32px
   asagi itip butonla cihaz arasindaki mesafeyi ayni kadar aciyordu. O dolguyu
   kurucu istemeden, kendi bulgum uzerine eklemistim; bedeli tam da sonradan
   itiraz edilen mesafe oldu.
   OLCULDU (1440x900 / 1366x768 / 1920x1080):
     dolguyla : mesafe 137 / 121 / 227px — ortusme yok
     dolgusuz : mesafe 105 /  89 / 195px — tam yakinlasmada cihazin ust
                kenarinin 15 / 20 / 0px'i header'in altinda kalir
   Ucuncu secenek (dolgusuz + cihaz kucultulmus) mesafeyi 124 / 112 / 195px'e
   cikariyor VE cihazi kuculttugu icin iki taraftan da kaybettiriyor; elendi.
   Karar: mesafe oncelikli. Ortusen serit cihaz yuksekliginin ~%2'si, header
   yari saydam, alt kenarda tasma yok (olculdu).
   Genislik tavanindaki yukseklik terimi YERINDE KALIR — alt tasmayi o onluyor. */
.tp-mac__pin {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center;
}
/* OLCULDU: gorsel 1700x1026 — en-boy 1.6569. Oran KODLANMIS kareden alinir,
   kirpma kutusundan (3803x2296 = 1.6564) DEGIL: yukseklik olceklenirken tam
   sayiya yuvarlaniyor ve iki oran ayrisiyor; kirpma orani yazilirsa gorselin
   alti/ustunde ince bir bosluk kalir.
   Genislik tavani EKRAN genisliginden turetilir: en buyuk toplam olcek 1.298
   oldugundan viewport once 1.298'e bolunur, ustune nefes payi (0.94) birakilir.
   Boylece sahne olcek uygulandiktan SONRA da ekrana sigar ve kenarlara
   yaklasir. Ilk hal de buyur: 1440'ta 992px basliyor, 1288px'e cikiyor. */
.tp-mac__sahne {
  position: relative;
  /* UCUNCU TERIM DIKEY SIGMA — bu kuralin eksikligi gercek bir kusurdu:
     genislik yalnizca viewport GENISLIGINE baglanmisti, oysa kisit dikeydi.
     Sonuc: 1366x768 ve 1440x800 gibi en yaygin dizustu yuksekliklerinde
     cihaz 802px'e ulasip ekrana sigmiyor ve ustu header'in altinda kaliyordu.
     Tavan artik header'in altinda kalan yukseklikten de turetilir: en buyuk
     olcek 1.298 ve en-boy 1.6569 oldugundan kullanilabilir yukseklik once
     1.298'e bolunur, sonra en-boy ile carpilir. --eco-space-6 (24px) ust+alt
     nefes payidir; bu degerde 1440x900 tam boyunu korur (992 -> 1288) ve
     yalnizca gercekten sigmayan kisa ekranlarda kuculur. */
  width: min(62rem,
             calc(100vw / 1.298 * 0.94),
             calc((100svh - var(--header-h, 64px) - var(--eco-space-6)) / 1.298 * 1.6569));
  aspect-ratio: 1.6569;
  /* GIRIS: asagidan yukselir ve belirir (--tp-a).
     YAKINLASMA: sonra buyur (--tp-c). Iki olcek CARPILIR.
     Iki degiskenin de CSS varsayilani 1 — betik hic baglanmazsa (azaltilmis
     hareket ya da JS yok) sahne SON halinde, girmis ve yakinlasmis durur. */
  opacity: var(--tp-a, 1);
  /* OLCEK TUM KOSELERDEN ESIT VE ES ZAMANLI BUYUR (kurucu: "sadece alttan
     olmasini istemedim"). Onceki surumde ust kenari sabitleyen bir -%17
     kaydirma vardi; butonla cihaz arasindaki mesafeyi 65px'e indiriyordu
     ama ust kenar sabit kalinca buyumenin TAMAMI asagi dogru olusuyordu.
     Kaydirma kaldirildi, origin tam merkeze alindi: dort kenar da esit
     aciliyor.

     ODUNLESME (olculdu): cihaz en buyuk halinde ekrani doldurdugu icin, en
     kucuk halinde ustunde zorunlu olarak bosluk kalir — kabaca
     kullanilabilir yuksekligin (1 - taban/tavan)/2 kati. Yani zoom ne kadar
     belirginse cihaz o kadar kucuk baslar ve mesafe o kadar acilir; 65px
     YALNIZCA asimetrik kaydirmayla mumkundu. Telafi olarak cihaz daha buyuk
     baslatildi (taban 1.10) ve zoom araligi sikistirildi (%18 buyume — kurucu istegi), boylece
     mesafe 1440x900'de 105px'te kaliyor.
     Tavan 1.298; genislik tavani onu bolen ayni degeri kullanir. */
  transform: translate3d(0, calc((1 - var(--tp-a, 1)) * 5vh), 0)
             scale(calc((0.96 + 0.04 * var(--tp-a, 1)) * (1.10 + 0.198 * var(--tp-c, 1))));
  transform-origin: center center;
  will-change: transform, opacity;
}
.tp-mac__cihaz {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
}
/* Ekran yuvasi cihazin ARKASINDA durur ve saydam delikten gorunur.
   OLCULDU (kenardan tasma doldurma ile, delik 3022x1962, doluluk %99.6):
   sol %10.281, ust %2.439, gen %79.464, yuk %85.453 — hepsi CIHAZ GORSELINE
   gore yuzde, boylece sahne olceklenirken yuva da olcekleniyor. */
.tp-mac__ekran {
  position: absolute; z-index: 0;
  left: 10.281%; top: 2.439%;
  width: 79.464%; height: 85.453%;
  overflow: hidden;
  background: var(--eco-surface-dark-deep);
}

/* --------------------------------------------------------------------------
   GECICI DASHBOARD YER TUTUCUSU
   Gercek NatureOS arayuzu DEGIL. Uydurma sayi/etiket yok — yalnizca duzen:
   yan menu, ust serit, uc karo, sutun grafik, liste. Olculer yuzdeyle
   verilir ki sahne olceklenirken arayuz de olceklensin.
   -------------------------------------------------------------------------- */
.tp-ui { display: flex; width: 100%; height: 100%; }
.tp-ui__yan {
  flex: 0 0 16%;
  display: flex; flex-direction: column; gap: 6%;
  padding: 4% 2.6%;
  background: var(--eco-surface-dark-sunken);
}
.tp-ui__marka {
  height: 8%; border-radius: var(--eco-radius-sm);
  background: var(--eco-surface-brand);
}
.tp-ui__nav {
  height: 5.5%; border-radius: var(--eco-radius-sm);
  background: rgba(255, 255, 255, .09);
}
.tp-ui__nav--acik { background: rgba(255, 255, 255, .22); }
.tp-ui__ana {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 4%;
  padding: 4% 3.4%;
}
.tp-ui__ust { display: flex; align-items: center; justify-content: space-between; }
.tp-ui__baslik {
  width: 34%; height: 12px; border-radius: var(--eco-radius-full);
  background: rgba(255, 255, 255, .30);
}
.tp-ui__hap {
  width: 14%; height: 18px; border-radius: var(--eco-radius-full);
  background: var(--eco-surface-brand);
}
.tp-ui__karolar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.tp-ui__karo {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22%;
  padding: 5% 6%;
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-dark-raised);
}
.tp-ui__karo span {
  width: 58%; height: 7px; border-radius: var(--eco-radius-full);
  background: rgba(255, 255, 255, .22);
}
.tp-ui__karo i {
  width: 74%; height: 15px; border-radius: var(--eco-radius-sm);
  background: rgba(255, 255, 255, .42);
}
.tp-ui__karo--vurgu i { background: var(--eco-surface-brand); }
.tp-ui__panel {
  flex: 1 1 auto; min-height: 0;
  padding: 5% 4%;
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-dark-raised);
}
.tp-ui__grafik {
  display: flex; align-items: flex-end; gap: 3.4%;
  width: 100%; height: 100%;
}
.tp-ui__grafik i {
  flex: 1 1 0; border-radius: var(--eco-radius-sm) var(--eco-radius-sm) 0 0;
  background: rgba(255, 255, 255, .17);
}
.tp-ui__grafik i:nth-child(1) { height: 46%; }
.tp-ui__grafik i:nth-child(2) { height: 63%; }
.tp-ui__grafik i:nth-child(3) { height: 38%; }
.tp-ui__grafik i:nth-child(4) { height: 88%; background: var(--eco-surface-brand); }
.tp-ui__grafik i:nth-child(5) { height: 54%; }
.tp-ui__grafik i:nth-child(6) { height: 71%; }
.tp-ui__grafik i:nth-child(7) { height: 43%; }
.tp-ui__satirlar { display: flex; flex-direction: column; gap: 34%; }
.tp-ui__satirlar span {
  height: 7px; border-radius: var(--eco-radius-full);
  background: rgba(255, 255, 255, .13);
}
.tp-ui__satirlar span:nth-child(2) { width: 82%; }
.tp-ui__satirlar span:nth-child(3) { width: 64%; }

@media (max-width: 900px) {
  /* OLCULDU: 390x844'te cihaz 367x221 oluyor — ekran YUKSEKLIGININ yalnizca
     %26'si (masaustunde %89). Sebep cihazin 1.657 oraninda genis-ve-basik
     olmasi; genislik zaten ekranin %94'u, dikey doluluk daha fazla
     artirilamaz. Yapilabilecek sey o seyrek ekranda gecirilen scroll yolunu
     KISALTMAK; genislik tavani ekrana bagli oldugu icin burada genislik
     override'i YOK. */
  .tp-mac { height: 170svh; }
  /* Kucuk ekranda arayuz ogeleri orantili kalsin diye ince cizgiler incelir. */
  .tp-ui__baslik { height: 7px; }
  .tp-ui__hap { height: 11px; }
  .tp-ui__karo i { height: 9px; }
  .tp-ui__karo span, .tp-ui__satirlar span { height: 4px; }
}