/* =====================================================================
   landing.fitnessonerileri.com

   BELİRTEÇLER stiller.css'ten TÜRETİLDİ, yeniden karar verilmedi.
   Palet dönerse iki satır döner: --marka-macenta ve --marka-mavi.
   ⚠ macenta GEÇİCİ (D11: logo repoda yok). Uygulamayla aynı geçici
   değer kullanıldı ki renk döndüğünde iki yüzey birlikte dönsün.

   KARANLIK TEK MOD. `color-scheme: light dark` DEĞİL: uygulama
   karanlık doğuyor, tercihle değil. Aydınlık cihazda tarayıcının
   yerli denetimleri açığa çevirmesi melez bir sayfa üretirdi.
   ===================================================================== */

/* -------- font --------
   Figtree, DEĞİŞKEN eksen (wght 300-900). İki ağırlık için iki dosya
   yerine tek dosya; toplam 30 KB. Kaynak: @fontsource-variable/figtree
   5.3.0, SIL Open Font License 1.1 (lisans metni fontlar/LICENSE.txt).
   unicode-range değerleri paketin kendi CSS'inden alındı, uydurulmadı.
   Türkçe ğ ş İ latin-ext dosyasında, ı latin dosyasında.
   Yedek yüz KALDIRILDI: gerçek font geldi, ölçülmemiş size-adjust
   tahmini taşımaya gerek kalmadı. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fontlar/figtree-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fontlar/figtree-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  color-scheme: dark;

  --marka-mavi:    #0976bb;
  --marka-macenta: #e5399b;   /* ⚠ GEÇİCİ — D11 */

  --zemin:       #14161a;
  --yuzey:       #1c1f25;
  --yuzey-ust:   #252931;
  --cizgi:       #2f343d;

  --metin:       #e8e6e1;
  --metin-orta:  #a3a7ae;
  --metin-soluk: #818791;

  --sen:         var(--marka-macenta);
  --sen-cizgi:   color-mix(in srgb, var(--marka-macenta) 75%, var(--zemin));
  --sen-sonuk:   color-mix(in srgb, var(--marka-macenta) 30%, var(--zemin));
  --sen-uzeri:   color-mix(in srgb, var(--marka-macenta) 15%, #000);

  --ikincil:       color-mix(in srgb, var(--marka-mavi) 62%, #fff);
  --ikincil-cizgi: var(--marka-mavi);

  --kanit:       color-mix(in srgb, var(--marka-mavi) 45%, var(--metin-orta));
  --kanit-sonuk: color-mix(in srgb, var(--marka-mavi) 22%, var(--zemin));

  --uyari:       #d97a5c;

  --govde: 'Figtree', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --veri:  'Azeret Mono', ui-monospace, 'SF Mono', monospace;

  --bo1: 4px;  --bo2: 8px;  --bo3: 12px; --bo4: 16px;
  --bo5: 24px; --bo6: 32px; --bo7: 48px;

  --yuvarlak: 10px;
  --yuvarlak-buy: 14px;

  --olcu: 34rem;   /* satır uzunluğu 80 karakterin altında kalsın */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--govde);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2 { margin: 0; font-weight: 600; }
p { margin: 0; }

/* Dokunma gecikmesi. ⚠ body zaten tap-highlight'ı söndürüyor; geri
   bildirim :active ile geri veriliyor, yoksa sayfa ÖLÜ hissettirir. */
button, input, label, summary, a { touch-action: manipulation; }

:focus-visible {
  outline: 2px solid var(--sen);
  outline-offset: 2px;
  border-radius: var(--bo1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------- iskelet */

.sayfa {
  max-width: var(--olcu);
  margin: 0 auto;
  padding: var(--bo7) var(--bo4);
  padding-top: max(var(--bo7), calc(env(safe-area-inset-top) + var(--bo6)));
  padding-left:  max(var(--bo4), env(safe-area-inset-left));
  padding-right: max(var(--bo4), env(safe-area-inset-right));
}

/* ---------------------------------------------------------- kahraman */

.baslik {
  font-size: clamp(30px, 8.5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.03em;   /* başlık sıkılaşır */
  margin-bottom: var(--bo4);
}

.alt-satir {
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;         /* alt satır rahatlar */
  color: var(--metin-orta);
  margin-bottom: var(--bo5);
}

/* ---------------------------------------------------------- form
   İKİ ÇOCUK AYNI IZGARA GÖZÜNDE. Yükseklik ikisinin büyüğüne göre
   baştan ayrılıyor; başarıya geçerken sayfa ZIPLAMIYOR. */

.kayit {
  display: grid;
  scroll-margin-top: var(--bo5);
}
.kayit > .govde,
.kayit > .basari {
  grid-area: 1 / 1;
  transition: opacity 260ms ease;
}
.kayit > .basari {
  opacity: 0;
  pointer-events: none;
  align-self: center;
}
.kayit.bitti > .govde { opacity: 0; pointer-events: none; }
.kayit.bitti > .basari { opacity: 1; pointer-events: auto; }

.alan-etiket {
  display: block;
  font-size: 13px;
  color: var(--metin-soluk);
  margin-bottom: var(--bo2);
}

.alan-sar { position: relative; }

.alan {
  width: 100%;
  min-height: 48px;
  padding: var(--bo3) 44px var(--bo3) var(--bo4);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  color: var(--metin);
  font-family: inherit;
  font-size: 16px;  /* 16'nın altı iOS'ta yakınlaştırma tetikliyor */
}
.alan::placeholder { color: var(--metin-soluk); }
.alan:focus { outline: none; border-color: var(--metin-soluk); }

.alan-ikon {
  position: absolute;
  right: var(--bo4);
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--uyari);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

/* Hata: kenarlık + ikon + metin. Üçü birden, çünkü tek başına renk
   renk körü kullanıcıyı dışarıda bırakır. Kırmızı YOK (palet). */
.alan-sar.hatali .alan { border-color: var(--uyari); }
.alan-sar.hatali .alan-ikon { opacity: 1; }
.alan-sar.hatali { animation: sarsil 320ms ease; }

@keyframes sarsil {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* Rıza: satırın TAMAMI dokunulabilir, kutu değil. */
.riza {
  display: flex;
  gap: var(--bo3);
  align-items: flex-start;
  min-height: 48px;
  padding: var(--bo3) 0;
  margin-top: var(--bo3);
  font-size: 14px;
  line-height: 1.45;
  color: var(--metin-orta);
  cursor: pointer;
}
.riza input {
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--sen);
}
.riza.eksik { color: var(--metin); }

.dugme {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: var(--bo4);
  margin-top: var(--bo2);
  background: var(--sen);
  color: var(--sen-uzeri);
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: var(--yuvarlak);
  cursor: pointer;
}
.dugme:active { transform: translateY(1px); }
.dugme[disabled] { cursor: default; }

.dugme .yazi { transition: opacity 140ms ease; }
.dugme.calisiyor .yazi { opacity: 0; }

.firildak {
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, var(--sen-uzeri) 30%, transparent);
  border-top-color: var(--sen-uzeri);
  border-radius: 50%;
  opacity: 0;
}
.dugme.calisiyor .firildak {
  opacity: 1;
  animation: don 700ms linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

.durum {
  min-height: 20px;
  margin-top: var(--bo2);
  font-size: 14px;
  color: var(--metin-soluk);
}
.durum:empty { min-height: 0; margin-top: 0; }

.soz {
  margin-top: var(--bo3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--metin-soluk);
}

.tuzak {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.basari {
  display: flex;
  gap: var(--bo3);
  align-items: flex-start;
  padding: var(--bo5) var(--bo4);
  background: var(--yuzey);
  border: 1px solid var(--sen-sonuk);
  border-radius: var(--yuvarlak-buy);
}
.basari svg { flex: none; width: 20px; height: 20px; color: var(--sen); margin-top: 2px; }
.basari p { font-size: 15px; line-height: 1.5; }

/* ---------------------------------------------------------- argümanlar */

.arguman {
  padding-top: var(--bo5);
  border-top: 1px solid var(--cizgi);
  margin-top: var(--bo7);
}
.arguman h2 {
  font-size: 21px;
  letter-spacing: -0.015em;
  margin-bottom: var(--bo3);
}
/* Ekran görüntüsü, sayfanın kendi içeriğinden AYRIŞMALI.
   Uygulamanın zemini sayfayla neredeyse aynı renk; tek bir soluk
   kenarlık görseli sayfanın içine akıtıyor ve ekrandaki başlık
   sayfa başlığı sanılıyor. Çözüm: görseli bir yüzeyin içine oturt,
   içeride boşluk bırak. Boşluk "bu bir alıntıdır" der. */
.ekran-cerceve {
  margin-top: var(--bo5);
  padding: var(--bo3);
  background: var(--yuzey-ust);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-buy);
}
.ekran {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--yuvarlak);
}

.arguman p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--metin-orta);
}

/* ---------------------------------------------------------- kapanış */

.kapanis { padding-top: var(--bo5); border-top: 1px solid var(--cizgi); margin-top: var(--bo7); }
.sosyal {
  font-size: 14px;
  line-height: 1.5;
  color: var(--metin-soluk);
  margin: 0 0 var(--bo6);
}

.dip { margin-top: var(--bo6); font-size: 13px; line-height: 1.6; color: var(--metin-soluk); }

.dip details { margin-top: 0; }
.dip summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;   /* tek başına kalan bağlantı ortada durur */
  color: var(--ikincil);
  cursor: pointer;
}
/* Açılan metin okunacak, ortalanmaz. */
.dip details[open] p { text-align: left; }
.dip details p { margin-top: var(--bo3); }
.dip details p + p { margin-top: var(--bo3); }

@media (max-width: 379px) {
  .sayfa { padding-left: var(--bo3); padding-right: var(--bo3); }
}

/* Turnstile. interaction-only modunda widget çoğu zaman boş; yalnız
   doğrulama gerekince görünür. Boşken yer kaplamasın, göründüğünde
   düğmeyle aynı ritimde dursun. */
.turnstile { margin-top: var(--bo2); }
.turnstile:empty { margin-top: 0; }