/* Ortak başvuru sayfası kalıbı (IS-258): component/nx/landing_hero.php, landing_benefits.php, landing_closing.php.
   %1,99 kampanya sayfasının (css/nx/campaign199.css) ölçülmüş düzeni genelleştirildi; oradaki her düzeltme burada aynı
   değerle durur. Sayfa ana sayfanın kalıbındadır: üst bölüm .nx-hero, avantajlar .section-heading + .solution-card, form
   .contact-section + .cf-card + .cf-field kurallarını nx.css'ten alır. Burada yalnız ana sayfada karşılığı olmayan
   parçalar var: ilk ekrandaki form kartının yeri, üst başlık (ve yanındaki ortak marka logosu), form ipucu, avantaj
   kartı notu, bilgi şeridi, kapanış fotoğrafı ve telefondaki sabit alt düğme.

   Kapsayıcı: <main class="nx ld <sayfa sınıfı>">. Sayfaya özgü ince ayar sayfanın kendi CSS'inde, bu değişkenlerle:
     --ld-hero-position         ilk ekran görselinin object-position'ı (≥1151 ve varsayılan)
     --ld-hero-position-narrow  901–1150: görsel bölümün %92'sine genişler, konu metnin altına girer; kaydırarak ayır
     --ld-hero-position-tablet  601–900: görsel 300–400px yükseklikte kesilir; konunun kalacağı dikey pencere
     --ld-closing-position      kapanış fotoğrafının object-position'ı
   Varsayılanlar IS-118 kompozisyonuna göre (konu görselin yatay %30–56'sında, sağ taraf yalnız bulanık mekân). */

/* .nx-btn ve başlık kırmızısı --nx-red ister; nx.css onu yalnız .nx-hero içinde tanımlıyor, kapanıştaki düğme dışarıda */
.nx.ld{--nx-red:#e8231a}

/* ---------- 1. İlk ekran ----------
   "contact-section" yalnız form alanlarının görünümü için; onun bölüm boşluğu ve üst çizgisi burada sıfırlanır,
   ana sayfa üst bölümünün boşluğu (≤900: 14px, ≤600: 10px) geri verilir. */
.nx .ld-hero{padding:0;border-top:0}

/* Ana sayfada ilk ekranın yüksekliği sabittir (nx-ek.css, .nx-stage). Burada form kartı da sığmalı: kısa ekranda
   (ör. 1366×768) sabit yükseklik formu keserdi; aynı formül en az yükseklik olur, içerik uzarsa bölüm uzar. */
@media(min-width:901px){
  .nx .ld-hero .nx-stage{height:auto;min-height:clamp(450px,calc(100svh - var(--nx-ust,105px) - var(--nx-logos,94px)),820px)}
}
.nx .ld-hero .nx-bg{object-position:var(--ld-hero-position,62% 50%)}
/* Ana sayfanın soldan beyaz geçişi (nx.css .nx-slide::after) %68'e kadar sürer; kalıbın sahnesinde konu ekranın
   ~%30–56'sında, o geçiş onu soldurur. Geçiş metin sütununun bittiği yerde (~%40) biter; alt ve üst geçiş aynı.
   ≤1150'de görsel bölümün %92'sine genişler ve konu metnin arkasına girer; orada ana sayfanın geçişi kalır, yazı okunsun. */
@media(min-width:1151px){
  .nx .ld-hero .nx-slide::after{background:linear-gradient(90deg,#fff 0%,#fff 20%,#fffffff0 27%,#ffffffa6 33%,#ffffff40 38%,#fff0 42%),linear-gradient(0deg,#fff 0%,#fffffff2 9%,#fff0 26%),linear-gradient(180deg,#ffffffd9 0%,#fff0 16%)}
}

/* Metin solda, form sağda (ana sayfadaki yüzen kartın yeri). Metin sütunu 560px ile sınırlı: görselin konusu
   metinle form arasında kalsın. */
.nx .ld-hero .ld-hero-copy{
  display:grid;align-content:center;
  grid-template-columns:minmax(0,1fr) minmax(0,430px);
  grid-template-rows:1fr repeat(4,auto) 1fr;
  column-gap:clamp(32px,5vw,96px);
  height:auto;min-height:100%;padding-block:clamp(24px,4vh,44px);
}
.nx .ld-hero-copy>:not(.ld-form){grid-column:1;max-width:560px}
.nx .ld-kicker{grid-row:2}
.nx .ld-hero-copy .nx-title{grid-row:3}
.nx .ld-hero-copy .nx-lead{grid-row:4;max-width:500px}
.nx .ld-hero-copy .nx-note{grid-row:5}
.nx .ld-hero .ld-form{grid-column:2;grid-row:1/-1;align-self:center}

/* Ana sayfanın "İşletmeler ne diyor?" üst başlığı (.reviews .section-kicker) ile aynı. Ortak marka logosu varsa
   (banka sayfaları) yazının solunda, yazının satır yüksekliğine yakın boyda durur. */
.nx .ld-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:clamp(10px,1.6vh,16px);color:var(--red);font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase}
.nx .ld-kicker-logo{display:block;width:auto;height:26px;max-width:160px;object-fit:contain}

/* Form kartı: ana sayfa iletişim formu (.cf-card). Fotoğrafın üstünde durduğu için gölgesi daha belirgin. */
.nx .ld-form{padding:clamp(24px,2.4vw,34px);box-shadow:0 1px 0 #0000000a,0 36px 80px -24px #1f1f2052;scroll-margin-top:24px}
.nx .ld-form-title{margin-bottom:4px;font-size:clamp(22px,1.8vw,26px);font-weight:500;letter-spacing:-.035em;line-height:1.15;color:#141516;text-wrap:balance}
/* 29px: alanın yazısının başladığı yer (ölçüldü: form kartının sol kenarından 29px). Alan hatası (.cf-field-error,
   nx-ek.css) aynı girintiyi kullanır; üçü de aynı x'ten başlasın diye değer burada tutulur. */
.nx .ld-field-hint{margin:4px 0 0 29px;font-size:12px;line-height:1.4;color:#6d7073}
/* Telefon hatalıyken ipucu gizlenir: hata metni zaten rakam kuralını söylüyor, ikisi aynı şeyi iki kez yazardı.
   IS-119 hata satırını alanın hemen arkasına ekler (label → .cf-field-error → ipucu); hata kalkınca satır silinir,
   seçici tutmaz ve ipucu geri gelir. display:none ekran okuyucudan da saklar, aria-describedby'a dokunulmaz. */
.nx .ld-form .cf-field.is-invalid+.cf-field-error+.ld-field-hint{display:none}
/* Onay satırı parmakla rahat işaretlensin: satır 44px, kutu 20px */
.nx .ld-form label.consent{min-height:44px}
.nx .ld-form .consent input{flex:0 0 20px;width:20px;height:20px;margin:0}
/* Onay hatası, onay metninin başladığı yerden (kutu 20px + aralık = 29px) başlar; nx-ek.css onu sıfırdan başlatıyordu */
.nx .ld-form .consent+.cf-field-error{margin-left:29px}
/* Ana sayfa formundaki düğme; burada sayfanın tek işi olduğu için kart genişliğinde */
.nx .ld-form .cf-submit{align-self:stretch;justify-self:stretch;min-height:56px;justify-content:space-between;font-size:15px}
.nx .ld-form .cf-submit:focus-visible,.nx.ld a:focus-visible{outline:3px solid #141516;outline-offset:3px}

/* İsteğe bağlı telefon satırı (form.call): başvuru formunun gölgesinde kalan, düğmenin altında sessiz bir satır.
   Düğme kartın tek vurgusu kalsın diye yazı gri, yalnız numara koyu ve altı çizili (bağlantı olduğu belli olsun).
   Bağlantının dokunma alanı 44px (telefonda parmakla rahat basılsın). */
.nx .ld-call{margin:6px 0 0;text-align:center;font-size:14px;line-height:1.4;color:#6d7073}
.nx .ld-call a{display:inline-block;padding:10px 2px;font-weight:600;color:#141516;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.nx .ld-call a:hover{text-decoration-thickness:2px}

/* ---------- 2. Avantaj kartları ---------- */
.nx .ld-benefit>div{display:grid;gap:0}
.nx .ld-benefit h3{text-wrap:balance}
.nx .ld-benefit-note{margin-top:6px;font-size:14px;color:#7c7e80}
/* Görselsiz kart: fotoğrafın yerini kart zemini alır, yazı üstten başlar (telefonda koyu fotoğraf kartı kuralları
   aşağıda geri alınır) */
.nx .ld-benefit--plain{display:flex;align-items:flex-end;min-height:180px;background:var(--paper,#f5f5f5);border:1px solid var(--line)}

/* Bilgi şeridi: ana sayfa yüzen kartının (.nx-float) simge kutusu + ince çerçeveli şerit */
.nx .ld-strip{display:flex;align-items:center;gap:18px;margin-top:22px;padding:16px 24px 16px 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.nx .ld-strip-icon{flex:0 0 46px;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#fdecea}
.nx .ld-strip-icon svg{width:24px;height:24px;fill:none;stroke:var(--nx-red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx .ld-strip p{flex:1;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.02em;line-height:1.3}
.nx .ld-strip p span{color:var(--nx-red)}
.nx .ld-strip .text-link{min-height:44px;white-space:nowrap}

/* ---------- 3. Kapanış ---------- */
.nx .ld-closing{padding-top:0}
.nx .ld-closing-lead{margin-top:14px;max-width:520px;font-size:15px;line-height:1.7;color:#7c7e80}
.nx .ld-closing-photo{margin:0;border-radius:16px;overflow:hidden;background:#f5f5f5}
.nx .ld-closing-photo img{display:block;width:100%;height:clamp(280px,32vw,460px);object-fit:cover;object-position:var(--ld-closing-position,50% 45%)}

/* Telefondaki sabit alt düğme: yalnız dar ekranda ve form ekranda değilken (is-visible, component/nx/landing_closing.php).
   z-index çerez bandının (40) ve WhatsApp düğmesinin (30) altında; sağdaki boşluk WhatsApp düğmesinin yeridir. */
.nx .ld-sticky{display:none}

@media(max-width:1279px){
  /* Bu genişlikte site başlığı sabittir (70px); form onun altında kalmasın */
  .nx .ld-form{scroll-margin-top:86px}
}
@media(max-width:1150px){
  .nx .ld-hero .ld-hero-copy{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
}
/* Görsel burada bölümün %92'sine genişler ve konu metnin altına girer: görsel kaydırılır, açıklama daraltılır
   (konu ile açıklama ayrık kalsın) */
@media(min-width:901px) and (max-width:1150px){
  .nx .ld-hero .nx-bg{object-position:var(--ld-hero-position-narrow,15% 50%)}
  .nx .ld-hero-copy .nx-lead{max-width:380px}
}
@media(max-width:900px){
  .nx .ld-hero{padding-top:14px}
  /* Ana sayfadaki gibi görsel üstte kart, altında başlık; form başlığın hemen altında */
  .nx .ld-hero .ld-hero-copy{display:flex;flex-direction:column;align-content:normal;min-height:0;padding-block:24px 6px}
  .nx .ld-hero-copy>:not(.ld-form){max-width:none}
  /* align-self: iki sütunlu düzenin ortalaması tek sütunda formu içeriği kadar daraltırdı */
  .nx .ld-hero .ld-form{order:4;align-self:stretch;margin-top:22px}
  .nx .ld-hero-copy .nx-note{order:5}
  .nx .ld-sticky{position:fixed;left:max(20px,env(safe-area-inset-left));right:calc(max(20px,env(safe-area-inset-right)) + 72px);bottom:max(20px,env(safe-area-inset-bottom));z-index:29;display:flex;justify-content:space-between;min-height:58px;border-radius:99px;box-shadow:0 14px 30px -12px #ec342fb3;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s}
  .nx .ld-sticky.is-visible{opacity:1;visibility:visible;transform:none}
  /* Çerez bandı açıkken düğme bandın arkasında kalır; ekran okuyucu ve klavye için de kapatılır */
  body:has(.cookie-alert:not(.hidden)) .nx .ld-sticky{display:none}
}
/* Tablet (601–900): görsel tam genişlikte olduğu için ~480px yer kaplıyor, form ilk ekranın altına düşüyordu (768'de
   form y 792). Görselin yüksekliği genişliğe oranlı ama 400px'te kesilir; object-position dikey, konunun kesilmeden
   kalacağı pencereyi seçer. Yazı ve form arasındaki boşluklar da bu aralıkta sıkılaşır; telefon (≤600) ve masaüstü
   (≥901) değişmez. */
@media(min-width:601px) and (max-width:900px){
  .nx .ld-hero .nx-bg{aspect-ratio:auto;height:clamp(300px,52vw,400px);object-position:var(--ld-hero-position-tablet,50% 38%)}
  .nx .ld-hero .ld-hero-copy{padding-block:18px 4px}
  .nx .ld-kicker{margin-bottom:8px}
  .nx .ld-hero .ld-form{margin-top:16px}
  /* Sabit düğme 641px'e yayılıp içeriği örtüyordu; telefondaki hap boyuna yakın tutulur, sağdaki WhatsApp'a yer kalır */
  .nx .ld-sticky{right:auto;width:min(420px,calc(100vw - 112px))}
}
@media(max-width:600px){
  .nx .ld-hero{padding-top:10px}
  .nx .ld-kicker{font-size:11px;letter-spacing:2.2px}
  .nx .ld-kicker-logo{height:22px}
  .nx .ld-form{padding:22px 18px 20px}
  /* Ana sayfanın telefondaki çözüm kartı yazıyı fotoğrafın üstüne koyar ve sağda oynat düğmesine yer bırakır;
     burada oynat düğmesi yok */
  .nx .ld-benefit>div{right:18px}
  .nx .ld-benefit-note{color:#ffffffcc}
  /* Görselsiz kart koyu fotoğraf kartı olmaz: zemin açık, yazı akışta, karartma ve kırmızı çizgi yok */
  .nx .ld-benefit--plain{aspect-ratio:auto;min-height:0;padding:20px 18px;background:var(--paper,#f5f5f5);color:var(--ink);box-shadow:none}
  .nx .ld-benefit--plain::after{content:none}
  .nx .ld-benefit--plain>div{position:static}
  .nx .ld-benefit--plain>div>span{color:#888}
  .nx .ld-benefit--plain .ld-benefit-note{color:#7c7e80}
  .nx .ld-strip{flex-wrap:wrap;gap:12px 14px;padding:14px}
  .nx .ld-strip p{flex:1 1 180px;font-size:17px}
  .nx .ld-strip .text-link{width:100%;justify-content:space-between}
  .nx .ld-closing .section-heading .nx-btn{width:100%;justify-content:space-between}
  /* 54px ve 16px: WhatsApp düğmesinin bu genişlikteki ölçüsü (css/nx/whatsapp.css) */
  .nx .ld-sticky{left:16px;right:82px;bottom:max(16px,env(safe-area-inset-bottom));min-height:54px}
}
@media(prefers-reduced-motion:reduce){
  .nx .ld-sticky{transition:none}
}