/* ==========================================================================
   Contact (EN) — sayfa katmani
   Sayfa sifirdan kuruldu (kurucu). Yeni sayfalarla ayni dil: token olcegi,
   golge yok, yaricap merdiveni, --eco-* degiskenleri.
   Font AILELERINE dokunulmadi: Avenir lisans karari hala acik.
   ========================================================================== */

/* ---------- 01 HERO ----------
   TEK EKRAN (kurucu). Header sabit ve hero'nun uzerine biniyor, o yuzden
   ust dolgu --header-h'yi iceriyor. Icerik yukseklige gore esnek degil,
   sabit tokenlarla diziliyor; tasma olmasin diye 900px altinda ve kisa
   ekranlarda min-height birakiliyor. */
.ct-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Tek ekrandan biraz UZUN: yatay sinir cizgisi ilk ekranda gorunmesin
     diye (kurucu). Fazlalik asagida bos bir bant olarak duruyor, icerik
     hala ekranin ortasina yakin. */
  /* Tek ekrandan var(--eco-space-20) kadar UZUN: yatay sinir cizgisi ilk
     ekranda gorunmesin diye (kurucu). Fazlalik ALT DOLGUDA, boylece
     icerik kutusu hala ilk ekran kadar ve icerik ekranin ortasinda
     kaliyor — fazlalik yalniz cizgiyi katlamanin altina itiyor. */
  min-height: calc(100svh + var(--eco-space-20));
  display: flex; align-items: center;
  /* Alt dolgu SIFIR: hero footer ile birlesik (kurucu). Aradaki nefesi
     footer'in kendi 80px ust dolgusu veriyor — .ef-cta kalibindaki ayni
     kurgu. */
  /* Dolgular DEGISKENDE: raylar da ayni degiskenlerden konumlaniyor,
     boylece bir medya sorgusunda dolgu degisince ray kendiliginden
     takip ediyor. Onceki halde dolgu degisip ray sabit kalinca cizgiler
     bolumun dibine varamiyor, arada kesik bir bosluk olusuyordu. */
  --ct-ust: calc(var(--header-h) + var(--eco-space-16));
  --ct-alt: var(--eco-space-20);
  padding-block: var(--ct-ust) var(--ct-alt);
  /* Sayfa dumduz FOOTER RENGI (kurucu): gradyan olmayinca iki yuzey
     arasinda gecis diye bir sey kalmiyor. */
  background: var(--eco-surface-dark);
}
/* Kapsayici hero YUKSEKLIGINE esniyor: raylar container'in kutusundan
   olculdugu icin, container yalniz kendi icerigi kadar uzun oldugunda
   cizgiler sadece orta bantta gorunuyordu (olculdu: y=200 ve 500'de
   cizgi var, y=70 ve 900'de yok). Esneyince raylar bolumun tepesinden
   dibine uzaniyor; icerik de container'in icinde ortalanmaya devam
   ediyor. */
.ct-hero > .container {
  width: 100%; position: relative; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
}
/* Dikey raylar footer'daki .ef__raylar ile AYNI kalip ve ayni ton; tek
   fark nereye uzandiklari: burada container'in ust dolgusunu da asip
   bolumun tepesine, yani header'in altina kadar cikiyorlar. Footer kendi
   rayini oradan devam ettirdigi icin cizgi header'dan sayfa sonuna kadar
   kesintisiz. */
/* Alt kenarlik: iki rayi, footer'in BASLADIGI yerde birlestiren yatay
   cizgi (kurucu). .ct-raylar container'in kutusuyla ayni oldugu ve
   hero'nun alt dolgusu sifir oldugu icin bu kenarlik tam hero/footer
   sinirina, raydan raya duser. */
/* Ray kutusu container'in degil BOLUMUN kenarlarina uzaniyor: ust ve alt
   dolgular kadar tasiyor. Yatay cizgi de bu kutunun alt kenarligi, yani
   tam bolumun dibinde = footer'in basladigi yerde, ve dikey raylarla uc
   uca. */
.ct-raylar {
  position: absolute; left: 0; right: 0;
  top: calc(var(--ct-ust) * -1); bottom: calc(var(--ct-alt) * -1);
  pointer-events: none;
  border-bottom: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .12);
}
.ct-raylar::before,
.ct-raylar::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: var(--eco-borderwidth-hairline);
  background: rgba(255, 255, 255, .12);
}
.ct-raylar::before { left: 0; }
.ct-raylar::after  { right: 0; }
/* Araliklar tek bir gap ile verilmiyor: baslik blogu ile kartlar arasi
   48px kalirken, kartlar ile serit arasi KARTLARIN KENDI aralgi kadar
   (16px) olmali (kurucu). */
.ct-hero__ic {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
}
.ct-kartlar { margin-top: var(--eco-space-12); }
.ct-serit  { margin-top: var(--eco-space-4); }
.ct-hero__ust { max-width: 46rem; margin: 0 auto; text-align: center; }
.ct-hero__baslik {
  margin: 0; text-wrap: balance;
  font-family: var(--eco-fontfamily-sans); font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-display-xl);
  line-height: var(--eco-lineheight-display-xl);
  letter-spacing: var(--eco-letterspacing-display-xl);
  color: var(--eco-text-on-brand-strong);
}
.ct-hero__govde {
  /* Tek satir (kurucu): 52ch'lik tavan bu cumleyi ikiye boluyordu. */
  margin: var(--eco-space-4) auto 0; max-width: none;
  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);
}

/* ---------- UC KART ----------
   apple.com/business "Take the next step." kurgusu: bir soru, bir cumle,
   tek eylem. KENARLIKSIZ cam (kurucu) — koyu fotograf uzerinde durdugu
   icin --eco-glass-* ailesinin tasarlandigi zemin bu. Golge yok;
   ayrisma yalniz camin kendisinden geliyor. */
.ct-kartlar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eco-space-4); align-items: stretch;
}
.ct-kart {
  /* Kartin TAMAMI tiklanabilir (kurucu): eylemin ::after'i karti kapliyor,
     yani fazladan bir <a> sarmalayici ya da ikinci bir baglanti yok —
     erisilebilirlik acisindan hala tek bag. */
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--eco-space-8);
  border-radius: var(--eco-radius-lg);
  border: 0;
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
  transition: background-color var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.ct-kart:hover { background: rgba(255, 255, 255, .16); transform: translateY(-3px); }
.ct-kart__baslik {
  margin: 0; text-wrap: balance;
  font-family: var(--eco-fontfamily-sans); font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h3);
  line-height: var(--eco-lineheight-h3);
  letter-spacing: var(--eco-letterspacing-h3);
  color: var(--eco-text-on-brand-strong);
}
/* Alt bosluk GOVDEDE: eylemin margin-top'u auto, izgarada kartlar esneyince
   butonlari dibe itiyor; tek sutuna inince kart kendi boyunda kalip auto
   sifir oluyor ve buton metne yapisiyordu (390'da olculdu). */
.ct-kart__govde {
  margin: var(--eco-space-3) 0 var(--eco-space-6);
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-on-dark);
}
.ct-kart__eylem {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--eco-space-2);
}
.ct-kart__eylem::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
/* Ok yalniz siteden CIKAN bagda (NatureOS). Tabler arrow-up-right,
   birebir; stroke-width markup'ta degil, tokenden. */
.ct-ok {
  width: 1.1em; height: 1.1em; flex-shrink: 0;
  stroke-width: var(--eco-borderwidth-icon);
  transition: transform var(--duration) var(--ease-out);
}
.ct-kart__eylem:hover .ct-ok,
.ct-kart__eylem:focus-visible .ct-ok { transform: translate(2px, -2px); }

/* ---------- ILETISIM SERIDI (hero icinde) ---------- */
/* Serit kartlarla AYNI cam, tam genislikte tek kart: ayrik bir
   cizginin altinda havada durmak yerine kendi yuzeyinde oturuyor
   (kurucu). Kenarlik yok, golge yok; ici dikey sac cizgisiyle ikiye
   ayriliyor. */
.ct-serit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--eco-space-10);
  padding: var(--eco-space-8);
  border-radius: var(--eco-radius-lg);
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--eco-glass-blur)) saturate(140%);
}
.ct-serit__blok + .ct-serit__blok {
  padding-left: var(--eco-space-10);
  border-left: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .18);
}
/* Ikonlar metinle ayni optik agirlikta: 20px kutu, kalinlik tokenden. */
/* Ikonlar DOLU (kurucu): Tabler'in filled surumu, cizgi degil fill ile
   boyaniyor — stroke-width'in burada karsiligi yok. */
.ct-ikon {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: currentColor;
  color: var(--eco-brand-primary);
}
.ct-blok__etiket {
  margin: 0 0 var(--eco-space-4);
  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: rgba(255, 255, 255, .72);
}
.ct-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--eco-space-3); }
.ct-liste a {
  display: inline-flex; align-items: center; gap: var(--eco-space-3);
  text-decoration: none;
  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-brand-strong);
}
/* Telefon numarasi Montserrat (kurucu): sistemde rakamlarin ailesi
   --eco-fontfamily-num, o da Montserrat. */
.ct-liste a[href^="tel:"] span { font-family: var(--eco-fontfamily-num); }
.ct-liste a span {
  border-bottom: var(--eco-borderwidth-hairline) solid transparent;
  transition: border-color var(--duration) var(--ease-out);
}
.ct-liste a:hover span, .ct-liste a:focus-visible span { border-bottom-color: currentColor; }
.ct-ofisler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eco-space-6); }
.ct-ofis { display: flex; align-items: flex-start; gap: var(--eco-space-3); }
.ct-ofis .ct-ikon { margin-top: .15em; }
.ct-ofis__ad {
  margin: 0; display: flex; align-items: center; gap: var(--eco-space-2);
  font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-on-brand-strong);
}
.ct-ofis__rozet {
  padding: 2px var(--eco-space-2);
  border-radius: var(--eco-radius-full);
  background: rgba(255, 255, 255, .16);
  font-family: var(--eco-fontfamily-label); font-weight: var(--eco-fontweight-semibold);
  font-size: var(--eco-fontsize-label-xs);
  line-height: var(--eco-lineheight-label-xs);
  letter-spacing: var(--eco-letterspacing-label-xs);
  text-transform: uppercase;
  color: var(--eco-text-on-brand-strong);
}
.ct-ofis__adres {
  margin: var(--eco-space-2) 0 0; max-width: 34ch;
  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: 901px) and (max-height: 880px) {
  .ct-hero { --ct-ust: calc(var(--header-h) + var(--eco-space-10)); }
  .ct-kartlar { margin-top: var(--eco-space-8); }
  .ct-kart { padding: var(--eco-space-6); }
  .ct-serit { padding: var(--eco-space-6); gap: var(--eco-space-8); }
  .ct-serit__blok + .ct-serit__blok { padding-left: var(--eco-space-8); }
  .ct-liste { gap: var(--eco-space-2); }
  .ct-ofisler { gap: var(--eco-space-5); }
}
/* 720px yuksekligindeki pencere hala 4px tasiyordu (olculdu): dolgu bir
   basamak daha kisiliyor. */
@media (min-width: 901px) and (max-height: 740px) {
  .ct-hero { --ct-ust: calc(var(--header-h) + var(--eco-space-8)); }
  .ct-kartlar { margin-top: var(--eco-space-6); }
}
@media (max-width: 900px) {
  /* Tek ekran sarti dusuyor: kartlar alt alta inince 100svh'ye sigmaz. */
  /* Alt dolgu dar ekranda da SIFIR: nefesi footer'in kendi ust dolgusu
     veriyor ve yatay cizgi boylece her olcude sinira dusuyor. */
  .ct-hero { min-height: 0; --ct-ust: calc(var(--header-h) + var(--eco-space-16)); --ct-alt: var(--eco-space-16); }
  .ct-kartlar { margin-top: var(--eco-space-10); }
  .ct-hero__baslik { font-size: var(--eco-fontsizemobile-display-xl); }
  .ct-kartlar { grid-template-columns: 1fr; }
  .ct-kart__baslik { font-size: var(--eco-fontsizemobile-h3); }
  .ct-ofisler { grid-template-columns: 1fr; gap: var(--eco-space-6); }
  /* Serit 1100'de degil 900'de kiriliyor: 1024x768'de ust uste binince
     hero 83px tasiyordu (olculdu), yan yana kalinca tek ekrana sigiyor. */
  .ct-serit { grid-template-columns: 1fr; gap: var(--eco-space-8); padding: var(--eco-space-6); }
  .ct-serit__blok + .ct-serit__blok {
    padding-left: 0; padding-top: var(--eco-space-8);
    border-left: 0; border-top: var(--eco-borderwidth-hairline) solid rgba(255, 255, 255, .18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ct-kart, .ct-ok { transition: none; }
  .ct-kart:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   FOOTER ILE ESIT NEFES
   Footer panelinin raylara uzakligi --container-px (1440'ta 40px), ama
   ustteki yatay cizgiye uzakligi 80px'ti — olculdu, dort kenardan ucu 40,
   biri 80. Ust dolgu da ayni tokene baglandi, boylece her genislikte esit
   kalir (390'da 20, 1440'ta 40).
   Kurali SAYFA KATMANINDA tutuyoruz: bu fark butun sayfalarda var ama
   yalniz burada GORUNUYOR, cunku yatay cizgiyi sadece bu sayfa ciziyor.
   Paylasilan footer-eds.css'e dokunulmadi; (0,2,0) ozgulluk sart, cunku
   footer-eds.css bu sayfada da en son yukleniyor ve esitlikte o kazanir. */
.footer.ef { padding-top: var(--container-px); }
/* Footer'in kendi rayi kendi UST DOLGUSU kadar yukari tasiyor
   (footer-eds.css: top: calc(var(--eco-space-20) * -1) = -80px). Dolgu
   40'a inince bu 40px fazla kaliyor ve hero'nun rayiyla UST USTE
   biniyordu: iki kez %12 beyaz, birlesik parlaklik 0.0484 yerine 0.0900
   (olculdu) — kurucunun gordugu "fazladan kisa cizgi" buydu. Tasma da
   ayni tokene baglandi. */
.footer.ef .ef__raylar::before,
.footer.ef .ef__raylar::after { top: calc(var(--container-px) * -1); }