/* ============================================================
   TECHNICAL RESTORATION SERVICES — sayfaya ozel katman
   Kalip corporate-forest-projects'ten devralindi; sinif onegi ts- ve
   kurallar bu dosyada kendi kopyasinda. Kardes sayfalarin CSS'i
   YUKLENMIYOR: yuklenseydi uc sayfa birbirine baglanir, birinde
   yapilan bir ayar otekileri bozardi.
   Bilesenlerin kendisi paylasilan anasayfa.css (hp-*) ve
   for-businesses-en.css (fb-*) icinde durur, BURADAN DEGISTIRILMEZ.
   ============================================================ */

/* 01 · ACILIS — kompakt koyu kart, fotografsiz.
   Bant SABIT oldugu icin ust dolgu onu temizlemek zorunda; token
   olcegi space-40 (160px) ile bittiginden toplanarak buyutuldu. */
.ts-hero {
  background: linear-gradient(135deg, #0D2B2E 0%, #1a3a2a 60%, #2d4a3e 100%);
  /* ALT DOLGU 0: saha karti artik bu bolumun icinde ve bolumu o bitiriyor.
     Eski 80px'lik alt dolgu pistin margin-top'una tasindi, boylece bento ile
     kart arasindaki ritim AYNI kaldi; degisen tek sey kartin arkasinin artik
     beyaz degil bu gradyan olmasi. */
  padding-block: calc(var(--eco-space-40) + var(--eco-space-8)) 0;
}
.ts-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);
}
.ts-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);
}
/* Logo seridi: 1.1 marquee — iki ozdes set, sabit hizli, sonsuz.
   Kurucu: "bu sayfada da hero'ya marka logolari, scroll olsun, random olabilir."
   Kardes sayfadan FARKLI siralama: iki sayfa birebir ayni gorunmesin. */
.ts-hero__proof { margin-top: var(--eco-space-8); }
.ts-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);
}
.ts-hero__proof .hp-hero__strip { margin-top: 0; }
.ts-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--eco-space-4); margin-top: var(--eco-space-6);
}

/* 02 · CAM KARTLAR — acilisin icinde: solda uzun kart, sagda iki kisa.
   Logo seridi olmadigi icin bento dogrudan butonlardan sonra gelir;
   ust bosluk kardes sayfayla ayni ritimde (space-20). */
.ts-bento {
  margin-top: var(--eco-space-20);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--eco-space-4);
}
.ts-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 (kardes sayfalarda olculdu: .07 duz koyu zeminde yeterince
   ayrismiyor). KENARLIK YOK — kurucu karari. */
.ts-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));
  transition: background-color .5s var(--ease-out), translate .5s var(--ease-out);
}
.ts-tile:hover { background-color: rgba(255, 255, 255, .16); translate: 0 -3px; }
.ts-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);
}
.ts-tile--tall { grid-row: span 2; min-height: 23rem; }
.ts-tile--tall .ts-tile__ui { min-height: 0; }
.ts-tile__title, .ts-tile__desc { padding-inline: var(--eco-space-2); }
.ts-tile__desc { padding-bottom: var(--eco-space-2); }
.ts-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);
}
.ts-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 — KURUCU KARARI (2026-09-23): "planning to
   monitoring kapsaminda hepsini bir agaca donusturmek mantikli
   olmayabilir; icerigi anlayip ona gore tasarla."
   Tohum->agac zinciri UCUNDEN DE KALDIRILDI. Her sahne kendi isini
   anlatir ve kendi icinde tamamlanir:
     etut    arazi taranir, etut noktalari belirir, ucus rotasi
             cizilir, ardindan dikim yogunlugu izgarasi dolar
     tohum   peletler sirayla kaplanir, sonra tepsiden birakilir
     izleme  hava goruntusu uzerinde tarama gecer, gectigi hucreler
             okunur, yandaki olcum gostergesi dolar
   SUREKLI DONER — duraklatma kurali yok (kurucu karari).
   Hareket dili: ambient katman, yavas ve sakin (MOTION_INTENSITY 5-6).
   ============================================================ */
.ts-scene {
  --ts-sure: 7s;
  --ts-ray: rgba(255, 255, 255, .16);
  --ts-pasif: rgba(255, 255, 255, .30);
  height: 100%;
  display: grid;
  place-items: center;
  gap: var(--eco-space-3);
  padding: var(--eco-space-5);
}
.ts-scene .eco-icon { stroke-linecap: round; stroke-linejoin: round; }

/* -- 1 · ETUT: arazi + noktalar + rota + yogunluk izgarasi -- */
.ts-map {
  position: relative; width: min(100%, 13rem); aspect-ratio: 4 / 3; max-height: 100%;
  border-radius: var(--eco-radius-sm);
  border: var(--eco-borderwidth-hairline) solid var(--ts-pasif);
  overflow: hidden;
}
.ts-map::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 14px, var(--ts-ray) 14px 15px);
  opacity: .6;
}
.ts-map__rota {
  position: absolute; left: 10%; right: 10%; top: 46%;
  height: var(--eco-borderwidth-thick); border-radius: var(--eco-radius-full);
  background: var(--eco-surface-brand); transform-origin: left center;
  animation: ts-rota var(--ts-sure) ease-in-out infinite backwards;
}
/* Cocuk sirasi: 1 rota, 2-5 noktalar, 6 izgara. :nth-of-type kullanilmaz —
   rota da <span> oldugu icin tip sirasinda birinci o olurdu. */
.ts-pin {
  position: absolute; width: var(--eco-space-3); height: var(--eco-space-3);
  border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-thick) solid var(--ts-pasif);
  background: transparent;
  animation: ts-nokta var(--ts-sure) ease-in-out infinite backwards;
}
.ts-pin:nth-child(2) { left: 16%; top: 20%; }
.ts-pin:nth-child(3) { left: 56%; top: 28%; animation-delay: .16s; }
.ts-pin:nth-child(4) { left: 28%; top: 70%; animation-delay: .32s; }
.ts-pin:nth-child(5) { left: 70%; top: 76%; animation-delay: .48s; }
/* Yogunluk izgarasi: rota cizildikten SONRA dolar (plan tamamlanir). */
.ts-grid {
  position: absolute; left: 12%; right: 12%; bottom: 8%;
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px;
}
.ts-grid i {
  aspect-ratio: 1 / 1; border-radius: 1px; background: var(--ts-ray);
  animation: ts-hucre var(--ts-sure) ease-in-out infinite backwards;
}
.ts-grid i:nth-child(2) { animation-delay: .05s; }
.ts-grid i:nth-child(3) { animation-delay: .10s; }
.ts-grid i:nth-child(4) { animation-delay: .15s; }
.ts-grid i:nth-child(5) { animation-delay: .20s; }
.ts-grid i:nth-child(6) { animation-delay: .25s; }
.ts-grid i:nth-child(7) { animation-delay: .30s; }
.ts-grid i:nth-child(8) { animation-delay: .35s; }
.ts-grid i:nth-child(9) { animation-delay: .40s; }

/* -- 2 · TOHUM: peletler kaplanir, sonra birakilir -- */
.ts-tray {
  position: relative; width: min(100%, 12rem); aspect-ratio: 8 / 5; max-height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: var(--eco-space-3);
  padding: var(--eco-space-3);
  border-radius: var(--eco-radius-sm);
  border: var(--eco-borderwidth-hairline) solid var(--ts-pasif);
}
.ts-pellets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--eco-space-2);
  width: 58%; margin-inline: auto; }
.ts-pellets i {
  aspect-ratio: 1 / 1; border-radius: var(--eco-radius-full);
  border: var(--eco-borderwidth-hairline) solid var(--ts-pasif);
  background: transparent;
  animation: ts-pelet var(--ts-sure) ease-in-out infinite backwards;
}
.ts-pellets i:nth-child(2) { animation-delay: .08s; }
.ts-pellets i:nth-child(3) { animation-delay: .16s; }
.ts-pellets i:nth-child(4) { animation-delay: .24s; }
.ts-pellets i:nth-child(5) { animation-delay: .32s; }
.ts-pellets i:nth-child(6) { animation-delay: .40s; }
.ts-tray .ts-line { width: 70%; margin-inline: auto; }
.ts-line {
  height: var(--eco-space-2); border-radius: var(--eco-radius-full);
  background: var(--ts-ray); animation: ts-satir var(--ts-sure) ease-in-out infinite backwards;
}
/* Birakma: peletler hazir olunca birkac tohum tepsinin altina duser. */
.ts-drop { display: flex; gap: var(--eco-space-4); height: var(--eco-space-8); }
.ts-drop i {
  width: var(--eco-space-2); height: var(--eco-space-2); align-self: flex-start;
  border-radius: var(--eco-radius-full); background: var(--eco-surface-brand); opacity: 0;
  animation: ts-dus var(--ts-sure) ease-in infinite backwards;
}
.ts-drop i:nth-child(2) { animation-delay: .12s; }
.ts-drop i:nth-child(3) { animation-delay: .24s; }

/* -- 3 · IZLEME: tarama gecer, hucreler okunur, olcum dolar -- */
.ts-scan {
  position: relative; width: min(100%, 12rem); aspect-ratio: 8 / 5; max-height: 100%;
  border-radius: var(--eco-radius-sm);
  border: var(--eco-borderwidth-hairline) solid var(--ts-pasif);
  overflow: hidden; padding: var(--eco-space-3);
  display: grid; align-content: center; gap: var(--eco-space-3);
}
.ts-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.ts-cells i {
  aspect-ratio: 1 / 1; border-radius: 1px; background: var(--ts-ray);
  animation: ts-hucre var(--ts-sure) ease-in-out infinite backwards;
}
.ts-cells i:nth-child(2)  { animation-delay: .06s; }
.ts-cells i:nth-child(3)  { animation-delay: .12s; }
.ts-cells i:nth-child(4)  { animation-delay: .18s; }
.ts-cells i:nth-child(5)  { animation-delay: .24s; }
.ts-cells i:nth-child(6)  { animation-delay: .30s; }
.ts-cells i:nth-child(7)  { animation-delay: .09s; }
.ts-cells i:nth-child(8)  { animation-delay: .15s; }
.ts-cells i:nth-child(9)  { animation-delay: .21s; }
.ts-cells i:nth-child(10) { animation-delay: .27s; }
.ts-cells i:nth-child(11) { animation-delay: .33s; }
.ts-cells i:nth-child(12) { animation-delay: .39s; }
/* Hucreler AYNI tona varmamali: onikisi birden tam tonda dolunca izgara
   veri degil KATI BIR YESIL BLOK okunuyor — kurucu baskinlik konusunda iki
   kez itiraz etti (kareler kaldi, pelet ve cubuk onceden duzeltildi).
   Bitis yogunlugu hucreden hucreye degisir: bitki ortusu indeksi gibi.
   Ton farki keyframe icinde degiskenle DEGIL, hucre bazinda opaklikla
   veriliyor — var() bir keyframe'de sessizce cozulmeyebilir, opaklik
   olculebilir ve garanti. */
.ts-cells i:nth-child(2), .ts-cells i:nth-child(5),
.ts-cells i:nth-child(8), .ts-cells i:nth-child(11) { opacity: .46; }
.ts-cells i:nth-child(3), .ts-cells i:nth-child(7),
.ts-cells i:nth-child(10) { opacity: .26; }
.ts-sweep {
  position: absolute; top: 0; bottom: 0; width: var(--eco-borderwidth-thick);
  background: var(--eco-surface-brand); opacity: .9;
  animation: ts-tara var(--ts-sure) ease-in-out infinite backwards;
}
.ts-read { height: var(--eco-space-2); border-radius: var(--eco-radius-full); background: var(--ts-ray); overflow: hidden; }
.ts-read i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--eco-surface-brand);
  animation: ts-oku var(--ts-sure) ease-in-out infinite backwards;
}

/* ZAMANLAMA (7s): eylem 0-46 · tamamlanma 46-70 · tutar 70-100 */
@keyframes ts-nokta { 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 ts-rota  { 0%, 28% { transform: scaleX(0) } 50%, 100% { transform: scaleX(1) } }
@keyframes ts-hucre { 0%, 50% { background: rgba(255, 255, 255, .16) } 70%, 100% { background: color-mix(in srgb, var(--eco-surface-brand) 70%, transparent) } }
@keyframes ts-pelet { 0%, 6% { background: transparent; border-color: rgba(255, 255, 255, .30) } 40%, 100% { background: var(--eco-surface-brand); border-color: var(--eco-surface-brand) } }
@keyframes ts-dus   { 0%, 46% { transform: translateY(0); opacity: 0 } 52% { opacity: 1 } 74% { transform: translateY(var(--eco-space-6)); opacity: 1 } 80%, 100% { transform: translateY(var(--eco-space-6)); opacity: 0 } }
@keyframes ts-tara  { 0%, 4% { left: 4% } 46%, 100% { left: 92% } }
@keyframes ts-oku   { 0%, 10% { width: 0 } 60%, 100% { width: 86% } }
@keyframes ts-satir { 0%, 8% { width: 36% } 40%, 100% { width: 92% } }

/* 03 · SAHA UZMANLIGI — Apple "Smooth operator" deseninin OLCULEN karsiligi.
   Kurucu: "bunun tamamen aynisini yap". Apple sayfasi headless tarayicida
   surulup olculdu; KOD KOPYALANMADI (zaten clip-path + kutu boyutuyla kurulu):
     · bolum 1726px / 900px ekran = 1.92 ekran boyu
     · medya kutusu 1440x849 = ekran yuksekliginin %94'u, SABIT boyut
     · clip-path: inset(6.25% round 40px) -> inset(0%); yaricap insete BAGLI
     · ic gorsel 1296 -> 1440 (%11.1) = scale 0.90 -> 1.00
     · PIN YOK: sticky tanimli ama sinif adi sticky-false; kutu akip gider
       (olculdu: ust 52px'te kalan adim 0/41)
     · metin kutuya 308px SABIT ofsetle kilitli -> kutunun %36.3'u; blok
       yuksekligiyle birlikte merkezi tam %50
     · metin opakligi bastan sona 1.00 — hicbir asamada solmuyor
     · scrim ::after siyah ama opacity 0 (Apple gorselin kendi koyulugunu
       yeterli buluyor)
   BIZDEKI IKI BILINCLI SAPMA:
     · yaricap: Apple 40px; bizim merdivende o deger YOK, --eco-radius-lg (20px).
       Token uydurulmaz.
     · scrim KORUNDU ama KADEMELI ve SIYAH (kurucu karari). Fotografimiz
       parlak bir yamac; metin bandinda scrimsiz kontrast OLCULDU (p95):
       masaustu 2.50:1, mobil 2.29:1 — yani scrim sifirdan baslatilamaz.
       Beyaz metnin esigi tutturmasi icin gereken SIYAH alfa (p95):
         alt metin 18px, 4.5:1 -> masaustu 0.275 / mobil 0.31
         baslik   88px, 3.0:1 -> masaustu 0.09  / mobil 0.135
       Baglayici kisit BASLIK DEGIL ALT METIN. Taban bu esigin hemen
       ustunde sabitlenir, kademeli katman uzerine biner. */
/* .ts-field (beyaz zeminli ayri bolum) KALDIRILDI: kart artik .ts-hero'nun
   icinde ve arkasinda o bolumun gradyani devam ediyor (kurucu karari). */
/* SABIT YUKSEKLIK YOK. Apple'in bolumu 1.92 ekran ama o yuksekligin buyuk
   kismini medyanin ARDINDAN gelen galeri blogu dolduruyor (agac dokumunde
   1440x623). Pin olmadigi icin ekstra pist yuksekligine gerek yok: animasyon
   kutu ekrandan gecerken kendiliginden tamamlanir. 192svh verildiginde
   kutunun (94svh) ardinda ~882px BOS ALAN kaliyordu (kareye bakildi). */
/* margin-top, hero'nun eski alt dolgusunun karsiligi (olculdu: bento alti
   1474, kart ustu 1554 — arada 80px vardi ve hepsi hero dolgusuydu). */
.ts-field__pist { position: relative; margin-top: var(--eco-space-20); }

/* Kutu SABIT boyutlu; buyuyen sey clip-path ile icerideki gorsel. */
.ts-field__kutu {
  position: relative;
  width: 100vw; margin-inline: calc(50% - 50vw);
  height: 94svh;
  overflow: hidden;
  background: var(--eco-surface-dark-sunken);
  /* Inset ve yaricap TEK ifadede ve birbirine bagli — Apple'da da oyle.
     Degiskensiz halde --ts-a = 1 => inset(0) = tam genislik (R11 son hal). */
  /* BASLANGIC GENISLIGI = BOLUM KABI (kurucu: "sag sol boslugu ust alt
     kartlarla esit olsun"). Apple'in sabit %6.25'i 1440'ta her yandan 90px
     birakiyor, yani 1260px — bizim kap 1120px oldugu icin kart komsularindan
     GENIS basliyordu. Kenar payi artik yuzdeyle degil KABIN kendi
     aritmetigiyle turetilir, boylece her genislikte kartlarla hizali baslar:
       1440 -> 160px pay, gorunen 1120   (kap 1200 - 2x40)
       1024 ->  40px pay, gorunen  944
        390 ->  20px pay, gorunen  350
     Dikey pay Apple'daki gibi %6.25'te kalir; ikisi birlikte sifira gidip
     tam ekrana acilir. */
  --ts-kenar: calc((100vw - min(var(--container-max), 100vw) + 2 * var(--container-px)) / 2);
  clip-path: inset(calc(6.25% * (1 - var(--ts-a, 1)))
                   calc(var(--ts-kenar) * (1 - var(--ts-a, 1)))
                   round calc(var(--eco-radius-lg) * (1 - var(--ts-a, 1))));
}
.ts-field__media {
  position: absolute; inset: 0; margin: 0;
  transform: scale(calc(0.90 + 0.10 * var(--ts-a, 1)));
  will-change: transform;
}
.ts-field__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* SCRIM IKI PARCA:
     taban (bu kural)  — her zaman acik, metni okunur tutan EN AZ karartma
     ::after           — scroll'la 0'dan 1'e acilan kademeli koyulasma
   RENK SIYAH, yesil degil. Eskiden rgba(7,25,15) kullaniliyordu; o deger
   --eco-surface-dark-sunken'in ta kendisi, yani scrim bolumun zemin rengiydi
   ve gorsel arka plana KARISIYORDU (kurucu: "arkaplan rengine yakin oldu ...
   biraz da belirgin dursun gorsel istiyorum").
   MIKTAR: eski dip deger .80, tepe .74 idi (iki katman birlesik) — cok agirdi.
   Yeni birlesik degerler: tepe .15, metin bandi .36 -> .49, dip .47. */
.ts-field__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .10)   0%,
    rgba(0, 0, 0, .30)  28%,
    rgba(0, 0, 0, .36)  62%,
    rgba(0, 0, 0, .28) 100%);
}
/* Degiskensiz halde --ts-k = 1 => tamamen acik, yani EN OKUNUR hal.
   Hareket azaltilmis veya betik hic baglanmamissa bolum boyle durur (R11). */
.ts-field__scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .06)   0%,
    rgba(0, 0, 0, .16)  30%,
    rgba(0, 0, 0, .20)  62%,
    rgba(0, 0, 0, .26) 100%);
  opacity: var(--ts-k, 1);
  will-change: opacity;
}

/* Metin blogu kutunun %36.3'unden baslar (Apple: 308/849) ve kutuyla
   birlikte akar; kendi basina hicbir hareketi yok. */
.ts-field__kilit {
  position: absolute; left: 0; right: 0; top: 36.3%;
  display: grid; justify-items: center; text-align: center;
  gap: var(--eco-space-6);
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--container-px);
}
.ts-field__title {
  margin: 0; max-width: 18ch;
  font-family: var(--eco-fontfamily-sans);
  font-size: var(--eco-fontsize-display-3xl);
  line-height: var(--eco-lineheight-display-3xl);
  letter-spacing: var(--eco-letterspacing-display-3xl);
  font-weight: var(--eco-fontweight-medium);
  color: var(--eco-text-on-brand-strong);
  text-wrap: balance;
}
/* PUNTO body-lg (18px) -> body-xl (20px). 88px'lik basligin yaninda 18px
   cok kucuk kaliyordu (kurucu). body-xl merdivendeki BIR SONRAKI basamak ve
   uc esi de tanimli (20px / 155% / -0.0279em) — token uydurulmadi.
   DIKKAT: punto buyuyunce kilit de uzuyor; kutu overflow:hidden oldugu icin
   kesilme her olcude yeniden olculdu. */
.ts-field__lede {
  margin: 0; max-width: 58ch;
  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-on-dark);
}

/* -- cam kartlar: metnin altinda, Apple'da olmayan ama bizde var olan parca.
      Kurucu "uygun sekilde pozisyonla" dedi; lockup'in en altina, ayni
      ortali kolona girerler. -- */
/* Kilit izgarasinin araligi 24px; kurucu alt metinle kartlarin "cok yakin"
   durdugunu soyledi. Fark YALNIZ bu kenarda acilir (baslik-alt metin araligi
   degismez): 24 + 24 = 48px. Kisa ekranlarda dikey butce dar oldugu icin
   asagida kademeli olarak kisilir. */
.ts-field__alt { display: grid; gap: var(--eco-space-4); width: 100%; margin-top: var(--eco-space-6); }
@media (min-width: 900px) {
  .ts-field__alt { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.ts-field__kart {
  max-width: none;
  padding: var(--eco-space-5) var(--eco-space-6);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-glass-bg);
  backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
  border: var(--eco-borderwidth-thick) solid var(--eco-glass-border);
}
.ts-field__kart-metin {
  margin: 0; display: flex; align-items: flex-start; gap: var(--eco-space-4);
  text-align: start;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-on-dark);
}
.ts-field__kart-ikon { flex: 0 0 auto; margin-top: .15em; }
/* .ts-field__ogm-logo KALDIRILDI: OGM logosu elimizde yok ve yuva bos
   duruyordu; kurucu yerine ikon istedi. Kart artik birinci kartla ayni
   kalibi kullaniyor (.ts-field__kart-ikon). */
@media (prefers-reduced-transparency: reduce) {
  .ts-field__kart { background: var(--eco-glass-fallback); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 900px) {
  .ts-field__title { font-size: var(--eco-fontsizemobile-display-3xl); }
  /* top 30% -> 27%: eklenen 16px marj kutunun dibinde 24px kesilme
     yaratiyordu (OLCULDU 390x844: marjsiz taban 8px, marjli 24px).
     %3 = 24px, yani hem marjin payi hem tabandaki 8px kapanir. */
  .ts-field__kilit { gap: var(--eco-space-5); top: 27%; }
  .ts-field__alt { margin-top: var(--eco-space-4); }
}

/* DESTEK METNI SERIDI — kurucu karari: destek metinleri govdeyle ayni
   paragrafa KARISMAZ, kendi kutusunda durur.
   Model: ecodrone sayfasindaki .ed-band (o dosya burada yuklenmiyor,
   kurallar bu katmana kopyalandi; olculer birebir ayni dili konusur). */
.ts-band {
  margin: var(--eco-space-8) 0 0;
  display: grid; gap: var(--eco-space-5);
  padding: var(--eco-space-6) var(--eco-space-8);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface-subtle);
}
.ts-band--acik { background: var(--eco-surface-page); margin-top: var(--eco-space-10); }
.ts-band .hp-desc { margin: 0; max-width: 52ch; }
.ts-band__text { display: flex; align-items: flex-start; gap: var(--eco-space-4); }
.ts-band__icon { flex: 0 0 auto; margin-top: .15em; color: var(--eco-icon-muted); }
.ts-band__actions { display: flex; flex-wrap: wrap; gap: var(--eco-space-3); }

/* 04 · CIKTILAR */
.ts-out__lede { margin: var(--eco-space-4) 0 0; max-width: none; }
/* SAHA KAYDI MAKETI — mevcut hp-ui maketleri baska urunler icin
   kurgulanmis; saha kaydini anlatan yok. */
.ts-ui--kayit { display: flex; flex-direction: column; justify-content: center; gap: var(--eco-space-3); padding: var(--eco-space-4); }
.ts-kayit__hd { display: flex; align-items: center; gap: var(--eco-space-3); }
.ts-kayit__et { flex: none; width: var(--eco-space-6); height: var(--eco-space-6); border-radius: var(--eco-radius-sm); background: color-mix(in srgb, var(--eco-surface-brand) 55%, transparent); }
.ts-kayit__ad { flex: 1 1 auto; height: var(--eco-space-2); border-radius: var(--eco-radius-full); background: rgba(255, 255, 255, .22); }
.ts-kayit__satir { display: flex; align-items: center; gap: var(--eco-space-3); }
.ts-kayit__satir i { flex: none; width: var(--eco-space-3); height: var(--eco-space-3); border-radius: 2px; background: rgba(255, 255, 255, .30); }
.ts-kayit__satir b { flex: 1 1 auto; height: var(--eco-space-2); border-radius: var(--eco-radius-full); background: rgba(255, 255, 255, .12); }

@media (min-width: 900px) {
  .ts-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--eco-space-10); }
  /* Paylasilan kural (anasayfa.css:1797) dinlenme halinde ILK karta
     flex-grow 2.2 veriyor; uc kartli duzenler icin bilincli. Burada iki
     kart var ve kardes sayfada OLCULDU: dar kartin mutlak konumlu
     maketine 54px kaliyordu. Yalniz DINLENME hali eziliyor, hover'daki
     buyume paylasilan etkilesimdir ve korunuyor. */
  .ts-out .hp-steps__row:not(:hover):not(:focus-within) > .hp-step:first-child { flex-grow: 1; }
}

@media (max-width: 900px) {
  /* ALT DOLGU 0 — taban kuraldaki gibi. Taban sifirlanip bu override
     unutulunca 900px altinda kartin altinda 64px'lik gradyan seridi
     kaliyordu ve bolum kartla bitmiyordu (olculdu: 768 ve 390'da fark tam
     64px = --eco-space-16). */
  .ts-hero { padding-block: calc(var(--eco-space-32) + var(--eco-space-6)) 0; }
  .ts-hero__title { font-size: var(--eco-fontsizemobile-display-2xl); }
  .ts-bento { grid-template-columns: minmax(0, 1fr); }
  .ts-tile--tall { grid-row: auto; min-height: 0; padding: var(--eco-space-4); }
  /* ORAN DEGIL REM: tek kolon bandinda aspect-ratio kutuyu genislikle
     buyutur (kardes sayfada 899px'te 626px bos alan olculmustu). */
  .ts-tile__ui { height: 10rem; flex: none; min-height: 0; }
  .ts-tile--tall .ts-tile__ui { height: 24rem; }
  .ts-scene { padding: var(--eco-space-4); gap: var(--eco-space-3); }
  .ts-field__title { max-width: none; }
  /* Kolaj mobilde daha kucuk ve kenarlara yakin durur. */
  /* Mobil dikeyde merkez gorselin yaninda YALNIZ ~105px koridor var
     (olculdu: 390x844 -> 105px, 360x780 -> 97px); sutunlar zorunlu dar. */
  .ts-band { padding: var(--eco-space-5) var(--eco-space-5); }
}

/* KISA EKRAN (<=760px yukseklik). Karo YUKSEKLIGI vw'den geliyordu; kisa ve
   genis ekranda (1920x600) dikey butce yetmiyor, 3/4 dikey karo tasiyor.
   OLCULDU: 768/900x600-760'ta 1-5 / 2-3 / 4-5, 1920x600-660'ta 2-3 / 4-5.
   Cozum: bu aralikta karolar svh ile olculur, genislik aspect-ratio'dan gelir.
   Blok MOBIL BLOGUN ARDINA konur — ayni ozgullukte sonraki kazanir; onunde
   dururken max-width:900px kurallari bunu eziyordu. Dikey telefonlar
   (780-932px) bu bloga girmez, olculen degerleriyle kalir. */
@media (max-height: 760px) {
  /* Kisa ekranda dikey bant daraliyor (olculdu: 1440x600 -> 468px,
     932x430 -> 314px); sutun daraltilir, ust hiza asagi alinir. */
  /* SUTUN GENISLIGI YUKSEKLIGE BAGLI. 12vw iken genis-ve-kisa ekranda
     sutun pinden tasiyordu — OLCULDU: 1920x700'de karo3 pin dibinden
     +113px, 1440x600'de +42px. Karo yuksekligi genisligin sabit kati
     oldugu icin (sol sutun = 2.417w + 32), sigmasi gereken yer YUKSEKLIK
     iken olcu GENISLIKTEN geliyordu; 1024x600 ve 1280x720'nin gecmesi
     tasarim degil, vw'lerinin kucuk olmasiydi. svh'ye baglaninca sutun
     dar banda kendiliginden uyuyor. */

  /* BASLIK AKISTAN CIKAR. Dolguyu kisinca (40px) baslik YAPISKAN BANDIN
     ALTINDA kaliyordu — OLCULDU: 1440x600/1024x600/900x700'de -24px,
     932x430/844x390'da -40px, 667x375'te -32px. Bandi temizleyen 96/80
     dolgusunu geri acmak MUMKUN DEGIL: dip payi olculdu, ≤760'ta 24px,
     ≤560'ta 16px; +48px dolgu kartlari yeniden kestirirdi.
     Akistan cikarinca hem bandin altindan kurtuluyor hem de izgaradan bir
     satir + bir aralik kadar BUTCE BOSALTIYOR. */

  /* Kisa pinde scale(0.46) ile acilan merkez gorselin UST KENARI baslik
     bandina giriyor; basligin alt uzantilari (g, p, y) gorselin acik
     gokyuzune dusuyor. OLCULDU (p=0, ortusme / baslik en kotu kontrast):
     844x390 21px / 2.20:1 - 1440x600 ve 1024x600 26px / 1.93:1 -
     600x400 4px / 2.32:1. Ortusmesi 0 olan olculerde kontrast tekduze
     18.18:1; baglanti birebir. Baslik altinda 12px bosluk birakan
     baslangic olcegi olculdu, en siki durum 844x390'da 0.292; 0.28
     hepsini karsilar. Uzun ekranlar 0.46 ile kalir. */

  /* DIKEY SIGMA. Kisa pinde son metin durumu tasiyor ve pin overflow:hidden
     oldugu icin cam kutularin ALTI KESILIYORDU. OLCULEN kesilme: 1440x600 ve
     1024x600 44px, 844x390 107px, 600x400 145px. Butce dokumu, en buyuk
     kalemin kartlarin DIKEY YIGILMASI oldugunu gosterdi: iki sutun kurali
     min-width:900px'e bagli oldugu icin yatay telefonda kartlar alt alta
     geciyor ve 214-240px tutuyor. Kisa ekranda yan yana alininca tek basina
     844x390'daki tasmanin tamami geri kazaniliyor; ust dolgu ve aralik da
     kisilir. 900x700 / 390x844 / 1440x900 zaten 0px tasma ile olculdu. */
  /* Kisa ekranda kartlar kutudan ZATEN tasiyor (olculdu, marjsiz:
     1440x600 55px, 932x430 141px). Nefes payi burada EKLENMEZ. */
  .ts-field__alt { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-top: 0; }
  /* Alt metnin 20px'e cikmasi bu bantta kesilmeyi BUYUTUYORDU (olculdu:
     568x320'de 162 -> 198px, 1440x600'de 55 -> 60px). Dikey butcesi olmayan
     ekranlarda punto body-lg'de kalir; buyume yalnizca yer olan yerlerde. */
  .ts-field__lede {
    font-size: var(--eco-fontsize-body-lg);
    line-height: var(--eco-lineheight-body-lg);
    letter-spacing: var(--eco-letterspacing-body-lg);
  }
}

/* COK KISA EKRAN (yatay telefon, <=560px yukseklik). 1 ve 2 numarali karolarin
   top degeri yuzde oldugu icin burada yine baslik bandina dusuyor (OLCULDU:
   844x390'da 1 ve 2, 600x400'de 1; baslik bandi 80-144). Yeniden konumlandirma
   cikmaz: 1'i basligin altina itince 5'e, 5'i itince 4'e giriyor — 400px dikey
   alanda bes karo + baslik bandi + alta sabitli karolar sigmiyor. Kolaj
   aria-hidden SUSTUR; bu bantta carpisan iki karo gizlenir, 3-4-5 kalir.
   600px ve ustu beste bes olculdu ve temiz, oraya dokunulmaz. */
@media (max-height: 560px) {
  /* Sol sutun uc karoyla en uzunu; cok kisa ekranda ortadaki dusurulur. */

  /* Baslik akistan cikip sabit top'a oturunca sutunlar onun ALT KENARINA
     giriyordu (OLCULDU: 568x320'de karo1 ve karo4, 68x14px). Sutun ust
     hizasi basligin altina indirilir. */

  /* DIKEY SIGMA, IKINCI KADEME. Gercek cihaz olculeriyle olculdu (p=0.8,
     kesilen kart yuksekligi): 932x430 (14 Pro Max yatay) 134px, 568x320
     (SE1 yatay) 160px, 667x375 18px, 812x375 6px, 600x400 80px.
     932x430 ogreticiydi: 900px'i gectigi icin MOBIL BLOGA GIRMIYOR ve
     430px yuksekliginde MASAUSTU 48px puntoyu aliyor, metin 3 yerine 5
     satira cikiyor. Yani kisiti YUKSEKLIK olan bir sey GENISLIGE
     baglanmis. Punto burada yukseklige gore kisilir; dolgu ve aralik da
     daraltilir. 600-760px yuksekligindeki kisa masaustu pencereleri 0px
     kesilme ile olculdu, onlara DOKUNULMAZ. */
  .ts-field__kart { padding: var(--eco-space-3) var(--eco-space-4); }
  .ts-field__alt { margin-top: 0; }
}

/* KILIT SIGMIYORSA KUTU UZAR — dar ve kisa ekranlar.
   Kilit, 94svh'lik SABIT yukseklikli kutuda MUTLAK konumlu duruyordu; kutu
   overflow:hidden oldugu icin sigmayan her sey KESILIYORDU. Olculen kesilme
   (bugunun degisikliklerinden ONCEKI hal, yani sorun yeni degil):
     360x780  130px      320x690  360px      390x844   34px
     1440x600  20px      932x430 116px
   `top` yuzdesiyle oynamak cozmuyor: 360x780'de %15'te bile 45px kaliyordu,
   cunku baslik + alt metin + iki cam kart o kutuya hicbir konumda sigmiyor.
   Bu yuzden kisit tersine cevrildi: yukseklik icerikten turer.
     - kutu: height yerine min-height, icerik uzunsa BUYUR
     - kilit: akisa doner (position: static), grid ile DIKEY ORTALANIR
   Medya ve scrim mutlak konumlu oldugu icin akisa girmez, kutu ne kadar
   uzarsa o kadar kaplarlar. MASAUSTU (genis + uzun) BU BLOGA GIRMEZ,
   Apple duzeni oldugu gibi kalir. */
/* ORTALAMA DEGIL, USTTEN SVH DOLGUSU. Once align-content:center denendi ve
   kesilmeyi cozdu ama BASLIGI OKUNMAZ YAPTI: kilit kutunun %27'sinden %3'une
   cikinca baslik fotografin GOKYUZU bandina dustu ve kontrast 4.56 -> 2.78'e
   indi (390x844; 360'ta 2.57, 320'de 2.67 — hepsi 3.0 esiginin altinda).
   object-position ile fotografi kaydirmak COZUM DEGIL: kutu dikey, fotograf
   yatay oldugu icin cover olcegi YUKSEKLIKTEN suruyor (olculdu: kutu 793px,
   gorsel 2400x1600, img kutusu 793px) — dikeyde hic pay yok, bes ayri deger
   birebir ayni kontrasti verdi. Yani fotografin gokyuzu HER ZAMAN kutunun
   tepesinde. Cozum metni asagida, koyu bantta tutmak; kutu da icerik icin
   buyudugu icin kesilme olmuyor. Olculen (kontrast / kesilme):
     18svh 3.03/0   22svh 3.24/0   26svh 3.38/0   30svh 3.52/0  (en dar: 320x690)
   26svh secildi: her olcude >=3.38:1 pay birakiyor ve metni eski %27
   kompozisyonuna yakin tutuyor. */
@media (max-width: 900px), (max-height: 760px) {
  .ts-field__kutu { height: auto; min-height: 94svh; display: grid; align-content: start; }
  /* static DEGIL relative: akistaki konumlanmamis icerik, mutlak konumlu
     .ts-field__media ve .ts-field__scrim'in ALTINDA boyaniyordu — baslik ve
     alt metin goruntunun arkasinda kaliyordu (DOM "gorunur" diyordu, pikseller
     yoktu; elementFromPoint basligin ortasinda gorseli donduruyordu). Cam
     kartlar etkilenmiyordu cunku backdrop-filter onlara kendi yigin baglamini
     verip ust katmana tasiyor. inset:auto sart: taban kural absolute oldugu
     icin top/left/right degerleri relative'de KAYDIRMA olarak uygulanirdi. */
  .ts-field__kilit { position: relative; z-index: 1; inset: auto; padding-block: 26svh var(--eco-space-12); }
}

/* 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) {
  .ts-scene *, .ts-scene *::before, .ts-scene *::after { animation: none !important; }
  /* Hareket yoksa her sahne TAMAMLANMIS halinde durur. */
  .ts-map__rota { transform: scaleX(1); }
  .ts-pin, .ts-pellets i { background: var(--eco-surface-brand); border-color: var(--eco-surface-brand); }
  .ts-grid i, .ts-cells i { background: color-mix(in srgb, var(--eco-surface-brand) 70%, transparent); }
  .ts-sweep { left: 92%; }
  .ts-read i { width: 86%; }
  .ts-drop i { opacity: 0; }
  .ts-line { width: 92%; }
  .ts-tile { transition: none; }
  .ts-tile:hover { translate: none; }
}

/* A short viewport can also be a narrow portrait phone. Keep readable cards. */
@media (max-width: 599px) {
  .ts-field__alt { grid-template-columns: minmax(0, 1fr); }
  .ts-field__kart { padding: var(--eco-space-5); }
  .ts-field__kart-metin { display: block; overflow-wrap: anywhere; }
  .ts-field__kart-ikon { display: block; margin: 0 0 var(--eco-space-3); }
}