/* ==========================================================================
   Request a Demo (EN) — sayfa katmani
   BOLUM 01 kalibi monday.com/sales/contact-us (kurucu): ikiye bolunmus
   bolum, solda kenardan kenara renkli panel, sagda beyaz zeminde form.
   Referans tarayicida OLCULDU: alan yuksekligi 46px, 1px kenarlik, 6px
   yaricap (bizim merdivende en yakin basamak sm=8), hap buton ortali,
   yasal metin butonun altinda, formun KENDI karti yok.
   Form JotForm gomusu degil, sayfada kuruldu (kurucu istegi).
   Font AILELERINE dokunulmadi: Avenir lisans karari acik.
   ========================================================================== */

.rd-hero {
  /* minmax(0,1fr): duz 1fr'in alt siniri AUTO, yani sutun kendi
     icerigininkinden dar olamiyordu — 1024'te yarilar 632/392'ye kayiyor,
     390'da serit (width:max-content) sayfayi 2741px'e cikariyordu
     (olculdu). */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  /* TEK EKRAN (kurucu): altindaki bolumler kalkti, bolum sayfanin
     tamami. Iki yarinin dolgusu da bu yuzden esnek degil sabit. */
  min-height: 100svh;
  /* Iki sutunun da yan dolgusu: tek kaynak. */
  --rd-yan: clamp(var(--eco-space-8), 5vw, var(--eco-space-16));
  background: var(--eco-surface-base);
}
/* SOL panel kenardan kenara. Icerik sitenin kap hizasina oturuyor:
   50vw'nin icinde kabin sol kenari neredeyse oradan basliyor. */
/* ACIK GRADYAN (kurucu): sitenin acik hero gradyani — our story,
   careers ve contact'in acilis gradyaniyla ayni uc durak.
   YAN DOLGULAR ESIT: once sol kenar kabin hizasina (1440'ta 120px),
   sag kenar 48px'e ayarliydi ve asimetri goze batiyordu. Iki sutun da
   ayni --rd-yan degerini kullaniyor; kurucu bu sayfada kenarlara
   yaklasmaya izin verdi. */
.rd-hero__sol {
  background: linear-gradient(135deg, #F7F7F7 0%, #E9F5DF 60%, #CFE8BC 100%);
  padding-block: calc(var(--header-h) + var(--eco-space-16)) var(--eco-space-16);
  padding-inline: var(--rd-yan);
  display: flex; align-items: center;
}
/* Sol icerik SAGDAKI FORMLA ayni genislikte ve ayni bosluklarla
   (kurucu): ikisi de 25rem ve kendi yarisinin ortasinda, yani 1440'ta
   iki yanda da 160px. Once sutun dolgusuyla hizalaniyordu ve metin
   kenara yapismis gorunuyordu. */
.rd-hero__sol-ic { width: 100%; max-width: 25rem; margin-inline: auto; min-width: 0; }
.rd-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-primary);
}
.rd-hero__govde {
  margin: var(--eco-space-5) 0 0;
  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-secondary);
}
/* Etiket yine LABEL (kurucu): Montserrat, buyuk harf. Rengi govdeyle
   ayni kaliyor — o istek geri alinmadi. */
/* Sol sutunda bloklar ince bir cizgiyle ayriliyor: cizgi ustteki blogun
   degil, baslayan blogun ustunde — bosluk cizginin iki yaninda esit. */
.rd-etiket {
  margin: var(--eco-space-8) 0 var(--eco-space-5);
  padding-top: var(--eco-space-8);
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  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: var(--eco-text-secondary);
}
.rd-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--eco-space-3); }
.rd-liste li {
  display: flex; align-items: flex-start; gap: var(--eco-space-3);
  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-secondary);
}
/* Tabler check, birebir; kalinlik markup'ta degil tokenden. */
.rd-tik {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: .22em;
  stroke-width: var(--eco-borderwidth-icon);
  color: var(--eco-brand-secondary);
}
/* Form basligi ve altindaki satir — referanstaki gibi ortali. Satir
   soldan TASINDI, cogaltilmadi. */
.rd-form__ust { text-align: center; margin-bottom: var(--eco-space-8); }
.rd-form__baslik {
  margin: 0;
  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-primary);
}
.rd-form__alt {
  margin: var(--eco-space-2) 0 0;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-secondary);
}

/* Marka seridi panelin dibinde. Ikiz set, %50 kayma; aralik SETIN icinde
   ve sete alt dolgu var — aralik izde olsaydi %50 bir set arti yarim
   aralik olur, dongu her turda kayardi. Panel acik oldugu icin logolar
   SIYAHA cevrilip soluklastiriliyor. */
.rd-serit {
  margin-top: var(--eco-space-8);
  padding-top: var(--eco-space-8);
  border-top: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  overflow: hidden;
}
.rd-serit__iz { display: flex; width: max-content; animation: rd-serit-kay 46s linear infinite; }
.rd-serit__set {
  list-style: none; margin: 0; padding: 0 var(--eco-space-10) 0 0;
  display: flex; align-items: center; gap: var(--eco-space-10);
}
.rd-serit__set img {
  display: block; height: auto; max-height: var(--eco-space-7); max-width: 84px;
  object-fit: contain;
  filter: brightness(0); opacity: .5;
  transition: opacity var(--duration) var(--ease-out);
}
.rd-serit__set li:hover img { opacity: .8; }
@keyframes rd-serit-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rd-serit__iz { animation: none; } }

/* SAG yari: beyaz, form ortada. Referansta form 386px; bizde 25rem. */
.rd-hero__sag {
  display: flex; align-items: center; justify-content: center;
  padding-block: calc(var(--header-h) + var(--eco-space-16)) var(--eco-space-16);
  padding-inline: var(--rd-yan);
}
.rd-form { width: 100%; max-width: 25rem; }

/* --------------------------------------------------------------------------
   FORM
   Kart yok (referansta da yok). YUZEN ETIKET bu kod tabaninin kendi kalibi:
   input'ta placeholder=" " (TEK BOSLUK) var ve :placeholder-shown ile etiket
   asagi/yukari gidiyor. O tek boslugu kirpan bir arac butun etiketleri
   input'un uzerine cokertir (CLAUDE.md'de yazili tuzak).
   NOT: referansta etiket yok, yer tutucu var; yuzen etiket kurucunun daha
   once yazili olarak istedigi davranis ve yazmaya baslayinca etiketi
   kaybetmedigi icin korundu.
   -------------------------------------------------------------------------- */
.rd-form__kutu { display: grid; gap: var(--eco-space-5); }
/* Bot tuzagi (honeypot): gercek kullanici gormez, klavye ve ekran okuyucu
   ulasmaz (aria-hidden + tabindex=-1). Doluysa sunucu gonderimi sessizce
   yutar (app/api/forms/quote/route.js). px degerleri tasarim degil, ekran
   disina itme — token karsiligi yok. */
.rd-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* --rd-alan-h: etiketin dinlenme konumu KUTUYA degil ALANIN kendi
   yuksekligine baglaniyor. top:50% iken yardim metni olan alanlarda kutu
   uzuyor ve etiket alanin ortasi yerine dibine kayiyordu (olculdu:
   telefonda kutu 76px, etiket 38px'te, alanin ortasi 23px). */
/* Ad ve soyad yan yana. Sutun araligi `inherit` ile formun kendi satir
   araligini aliyor, boylece kisa pencere bantlarinda da esit kaliyor. */
.rd-alan-ciftli {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: inherit;
}

.rd-alan { position: relative; --rd-alan-h: 46px; }
.rd-alan__girdi {
  /* Referansta alan 46px; dolgu buna gore (olculdu: space-3 ile 52px
     cikiyordu). */
  width: 100%; display: block; min-height: var(--rd-alan-h);
  padding: var(--eco-space-2) var(--eco-space-4);
  border-radius: var(--eco-radius-sm);
  border: var(--eco-borderwidth-hairline) solid var(--eco-border-line);
  background: var(--eco-surface-base);
  font-family: inherit;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-primary);
  transition: border-color var(--duration) var(--ease-out),
              background-color var(--duration) var(--ease-out);
}
/* Hover ve odak ayni kenarlik rengini kullanir (kurucu). Ikisi de
   dinlenme halinden 2px koyu kenarlikla ayrildigi icin odak gostergesi
   gorunur kaliyor; aralarindaki fark yuzey renginde. */
.rd-alan__girdi:hover { border-color: var(--eco-button-white-border-hover); border-width: var(--eco-borderwidth-thick); background: var(--eco-surface-page); }
.rd-alan__girdi:hover ~ .rd-alan__etiket { background: var(--eco-surface-page); }
.rd-alan__girdi:focus { outline: none; border-color: var(--eco-button-white-border-hover); border-width: var(--eco-borderwidth-thick); background: var(--eco-surface-base); }
.rd-alan__girdi:focus ~ .rd-alan__etiket { background: var(--eco-surface-base); }
.rd-alan__girdi:focus ~ .rd-alan__etiket { color: var(--eco-text-primary); }
/* Mesaj kutusunun yuksekligi `rows`tan gelseydi icerik kutusuna gore
   hesaplanir, hover'da kenarlik 1px->2px olunca kutu 2px buyuyup formu
   oynatirdi (olculdu). Diger alanlarda bu olmuyor cunku onlarin alt
   yukseklik siniri kenarligi iceriyor. Burada yukseklik sabitleniyor. */
.rd-alan--mesaj .rd-alan__girdi { resize: vertical; height: 7.5rem; }
.rd-alan__etiket {
  position: absolute; left: var(--eco-space-3);
  top: calc(var(--rd-alan-h) / 2); transform: translateY(-50%);
  padding-inline: var(--eco-space-2);
  background: var(--eco-surface-base);
  pointer-events: none;
  font-size: var(--eco-fontsize-body);
  line-height: var(--eco-lineheight-body);
  letter-spacing: var(--eco-letterspacing-body);
  color: var(--eco-text-muted);
  transition: top var(--duration) var(--ease-out), font-size var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out);
}
.rd-alan__girdi:focus ~ .rd-alan__etiket,
.rd-alan__girdi:not(:placeholder-shown) ~ .rd-alan__etiket {
  top: 0; transform: translateY(-50%);
  font-size: var(--eco-fontsize-label-md);
  line-height: 1;
}
/* Cok satirli alanda etiket dikeyde ortalanamaz: ilk satira oturur. */
/* Mesaj alaninda kutunun icini placeholder tutuyor; etiket bos ve
   dokunulmamisken gorunmez, odaklaninca ya da yazi girilince ustte
   belirir. Gorunmezlik `opacity` ile — `visibility` etiketi erisilebilirlik
   agacindan da dusururdu. */
.rd-alan--mesaj .rd-alan__etiket {
  top: 0; transform: translateY(-50%);
  font-size: var(--eco-fontsize-label-md); line-height: 1;
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
}
.rd-alan--mesaj .rd-alan__girdi:focus ~ .rd-alan__etiket,
.rd-alan--mesaj .rd-alan__girdi:not(:placeholder-shown) ~ .rd-alan__etiket {
  opacity: 1;
}
/* Gercek placeholder metni yalniz mesaj alaninda var; durgun halde
   gorunur, tiklayinca birakir (reponun kendi deyimi, style.css
   `.contact-form__input::placeholder`). Diger alanlardaki tek bosluk
   yuzen etiketin kancasi, gorunur bir metin degil. */
.rd-alan--mesaj .rd-alan__girdi::placeholder { color: var(--eco-text-muted); opacity: 1; }
.rd-alan--mesaj .rd-alan__girdi:focus::placeholder { color: transparent; }

/* Telefon alani: solda silinemeyen '+' isareti, sagda tanınan ulkenin
   bayragi. '+' artik girdinin DEGERINDE degil — bu yuzden silinemiyor ve
   solgun gosterilebiliyor; gonderilen degere betik basina ekliyor.
   Isaret, yuzen etiketle ayni anda (odakta ya da doluyken) gorunur. */
.rd-alan[data-alan="telefon"] .rd-alan__girdi {
  padding-left: var(--eco-space-6); padding-right: var(--eco-space-10);
}
.rd-alan__arti {
  position: absolute; left: var(--eco-space-4);
  top: calc(var(--rd-alan-h) / 2); transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--eco-fontsize-body);
  line-height: 1;
  color: var(--eco-text-primary);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
}
.rd-alan__girdi:focus ~ .rd-alan__arti,
.rd-alan__girdi:not(:placeholder-shown) ~ .rd-alan__arti { opacity: .5; }
.rd-alan__bayrak {
  position: absolute; right: var(--eco-space-4);
  top: calc(var(--rd-alan-h) / 2); transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--eco-fontsize-body-xl);
  line-height: 1;
}

/* Zorunlu alan isareti. Etiketin rengini aliyor; zorunlulugu ekran
   okuyuculara `required` zaten tasidigi icin isaret aria-hidden. */
.rd-alan__yildiz { color: var(--eco-danger-text); }
.rd-alan__yardim,
.rd-alan__hata {
  margin: var(--eco-space-2) 0 0;
  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-muted);
}
.rd-alan__hata { color: var(--eco-danger-text); }
.rd-alan[data-gecersiz] .rd-alan__girdi { border-color: var(--eco-danger-text); }
/* Buton ve yasal metin ORTALI, referanstaki gibi; gizlilik satiri butonun
   ALTINDA. */
.rd-gonder { justify-self: center; }
.rd-gonder[disabled] { opacity: .72; cursor: progress; }
.rd-gizlilik {
  margin: 0; text-align: center;
  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-muted);
}
.rd-gizlilik a { color: var(--eco-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.rd-form__durum[hidden] { display: none; }

/* ONAY — gonderim basarili olunca formun yerini alir. `[hidden]` display
   belirten her kurala yenilir, bu yuzden ikisi de ayrica kapatiliyor
   (.rd-form__kutu grid, .rd-onay da grid). */
.rd-form__kutu[hidden], .rd-onay[hidden] { display: none; }
.rd-onay {
  display: grid; justify-items: center; text-align: center;
  gap: var(--eco-space-5);
  outline: none;
}
.rd-onay__ikon {
  width: var(--eco-space-16); height: var(--eco-space-16);
  stroke-width: var(--eco-borderwidth-icon);
  color: var(--eco-icon-accent);
}
.rd-onay__baslik {
  margin: 0;
  font-family: var(--eco-fontfamily-sans); font-weight: var(--eco-fontweight-medium);
  font-size: var(--eco-fontsize-h2);
  line-height: var(--eco-lineheight-h2);
  letter-spacing: var(--eco-letterspacing-h2);
  color: var(--eco-text-primary);
  text-wrap: balance;   /* tek kelimelik ikinci satir birakmasin */
}
.rd-onay__govde {
  margin: 0;
  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-secondary);
}
.rd-onay .btn { margin-top: var(--eco-space-3); }

/* Ikon cizilerek gelir: pathLength="1" her yolu 1 birime normalize eder,
   boylece uzunluk olcmeden dashoffset 1->0 surulur (depodaki idiom, bkz.
   master-plan .mp-kart__ikon). FAIL-OPEN: varsayilan dashoffset 0, yani
   animasyon hic kosmazsa ikon CIZILI durur. */
.rd-onay__ikon path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes rd-ciz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rd-belir { from { opacity: 0; transform: translateY(var(--eco-space-2)); } to { opacity: 1; transform: none; } }
.rd-onay--acik .rd-onay__halka { animation: rd-ciz .55s var(--ease-out) backwards; }
.rd-onay--acik .rd-onay__tik { animation: rd-ciz .35s var(--ease-out) .45s backwards; }
.rd-onay--acik > :not(.rd-onay__ikon) { animation: rd-belir .5s var(--ease-out) .5s backwards; }
@media (prefers-reduced-motion: reduce) {
  .rd-onay--acik .rd-onay__halka,
  .rd-onay--acik .rd-onay__tik,
  .rd-onay--acik > :not(.rd-onay__ikon) { animation: none; }
}
/* Gonderim hatasi artik kart degil, Send Request'in ALTINDA bir hata
   satiri (kurucu) — alan hatalariyla ayni dil: kirmizi, kucuk, cercevesiz.
   Tekrar deneme butonu yok; kullanici butona yeniden basar. */
.rd-form__durum {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: var(--eco-fontsize-body-sm);
  line-height: var(--eco-lineheight-body-sm);
  letter-spacing: var(--eco-letterspacing-body-sm);
  color: var(--eco-danger-text);
}

/* Kisa masaustu pencereleri: yuksekligi sag sutun belirliyor ve form
   basligiyla birlikte dokunulmamis hali ~860px tutuyor (olculdu). Sinir bu
   yuzden icerigin gercek yuksekligine gore iki kademe: 850'nin altinda dikey
   ritim, 790'in altinda ayrica alan araliklari kisilir. 1366x768 ilk surumde
   760 sinirinin disinda kaliyordu. */
@media (min-width: 901px) and (max-height: 850px) {
  .rd-hero__sol,
  .rd-hero__sag { padding-block: calc(var(--header-h) + var(--eco-space-5)) var(--eco-space-5); }
  .rd-etiket { margin-top: var(--eco-space-6); padding-top: var(--eco-space-6); }
  .rd-serit { margin-top: var(--eco-space-6); padding-top: var(--eco-space-6); }
  .rd-form__ust { margin-bottom: var(--eco-space-4); }
  .rd-form__kutu { gap: var(--eco-space-4); }
}

@media (min-width: 901px) and (max-height: 790px) {
  .rd-form__kutu { gap: var(--eco-space-3); }
}

@media (max-width: 900px) {
  .rd-hero { grid-template-columns: minmax(0, 1fr); }
  .rd-hero__sol {
    padding: calc(var(--header-h) + var(--eco-space-12)) var(--container-px) var(--eco-space-12);
  }
  .rd-hero__sol-ic { max-width: none; }
  .rd-hero__baslik { font-size: var(--eco-fontsizemobile-display-xl); }
  .rd-hero__sag { padding: var(--eco-space-12) var(--container-px); }
  .rd-form { max-width: none; }
}

/* ============================================================================
   FOOTER — ust dolgu, panelin yan boslugu kadar (kurucu; contact ile ayni).
   Paylasilan footer 80px ust dolgu veriyor, panelin raylara olan yan
   mesafesi ise --container-px. Ikisi esitleniyor.
   Footer'in kendi rayi kendi UST DOLGUSU kadar yukari tasiyor
   (footer-eds.css: top: calc(var(--eco-space-20) * -1)). Dolgu kisilinca
   bu tasma fazla kalir ve bandin disina cikar; tasma da ayni tokene
   baglaniyor. Paylasilan dosya DEGISMIYOR, bu katmanda eziliyor.
   ========================================================================= */
.footer.ef { padding-top: var(--container-px); }
.footer.ef .ef__raylar::before,
.footer.ef .ef__raylar::after { top: calc(var(--container-px) * -1); }