/* ============================================
   BASE — değişkenler, reset, tipografi
   Tüm tema renkleri burada. Değiştirmek için sadece :root altındaki değişkenleri düzenlemen yeterli.
   ============================================ */

:root {
  /* Marka renkleri — logodan: Kırmızı + Mavi + Beyaz (canlı tonlar) */
  --renk-birincil: #1565c0;           /* Logo mavisi — kurumsal */
  --renk-birincil-koyu: #0d47a1;
  --renk-birincil-acik: #1976d2;
  --renk-vurgu: #d32f2f;              /* Logo kırmızısı — CTA */
  --renk-vurgu-koyu: #b71c1c;
  --renk-vurgu-acik: #e53935;

  /* Pastel tonlar — bölüm arka planları, hover state'leri, vurgu kutuları
     SPRINT 1 NOTU: Renkler önceki "yumuşak ama doygun" değerlerinden daha
     nötr/açık tonlara çekildi. Maksat: pastel zemini hâlâ marka hissi taşısın
     ama "2017 corporate" doygunluğunu kaybetsin. Modern (Stripe/Linear) sitelerde
     pastel zemin yerine nötr slate tonları tercih ediliyor. */
  --pastel-mavi: #f1f7fd;             /* eski #eaf3fb — daha açık */
  --pastel-mavi-koyu: #e2edf7;        /* eski #d6e7f5 */
  --pastel-pembe: #fdf4f5;            /* eski #fdebec — daha açık */
  --pastel-pembe-koyu: #f9e0e3;       /* eski #f9d6d8 */
  --pastel-krem: #f7f5f0;             /* sıcak krem — beyaz bölümlerden gözle ayrışsın (eski #fafaf8 ≈ beyazdı) */
  --pastel-yesil: #eff8f1;            /* eski #e8f5e9 */
  --pastel-mor: #f5f1fa;              /* eski #f0ebf7 */
  --pastel-toprak: #f8f4ef;           /* eski #f6efe7 */

  /* Nötr renkler — daha sıcak beyaz */
  --renk-yazi: #1a2332;
  --renk-yazi-acik: #4a5568;
  --renk-yazi-soluk: #64748b;         /* eski #718096 — slate-500, AA için ≥4.5:1 */
  --renk-arka: #ffffff;               /* eski #fdfcfa — saf beyaz; nötr pastel'lerle uyumlu */
  --renk-arka-yumusak: var(--pastel-mavi);
  --renk-arka-koyu: #0c1e3a;          /* Lacivert footer */
  --renk-cizgi: #e6ecf3;              /* Hafif mavimsi-soğuk gri çizgi */
  --renk-cizgi-koyu: #cdd6e3;

  /* Durum renkleri — marka kırmızısından (--renk-vurgu) ayrışsın diye hata biraz daha koyu */
  --renk-basari: #16a34a;
  --renk-uyari: #f59e0b;
  --renk-hata: #991b1b;
  --renk-whatsapp: #25d366;
  --renk-whatsapp-koyu: #1ebe57;      /* hover — magic-hex yerine token */
  --renk-instagram-bas: #f09433;
  --renk-instagram-son: #bc1888;
  --renk-telefon: #2563eb;

  /* Tipografi */
  --yazi-aile-baslik: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --yazi-aile-govde: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --yazi-xs: 0.75rem;
  --yazi-sm: 0.875rem;
  --yazi-base: 1rem;
  --yazi-lg: 1.125rem;
  --yazi-xl: 1.25rem;
  --yazi-2xl: 1.5rem;
  --yazi-3xl: 1.875rem;
  --yazi-4xl: 2.25rem;
  --yazi-5xl: 3rem;
  --yazi-6xl: 3.75rem;

  /* Boşluk sistemi (4px tabanlı) */
  --bosluk-1: 0.25rem;
  --bosluk-2: 0.5rem;
  --bosluk-3: 0.75rem;
  --bosluk-4: 1rem;
  --bosluk-5: 1.25rem;
  --bosluk-6: 1.5rem;
  --bosluk-8: 2rem;
  --bosluk-10: 2.5rem;
  --bosluk-12: 3rem;
  --bosluk-16: 4rem;
  --bosluk-20: 5rem;
  --bosluk-24: 6rem;

  /* Yuvarlatma */
  --yuvarlak-sm: 4px;
  --yuvarlak: 8px;
  --yuvarlak-md: 12px;
  --yuvarlak-lg: 16px;
  --yuvarlak-xl: 24px;
  --yuvarlak-tam: 9999px;

  /* Gölgeler — saf siyah yerine mavimsi ton (daha şık) */
  --golge-sm: 0 1px 2px 0 rgb(21 30 60 / 0.05);
  --golge: 0 4px 12px -2px rgb(21 30 60 / 0.08), 0 2px 4px -2px rgb(21 30 60 / 0.04);
  --golge-md: 0 10px 25px -5px rgb(21 30 60 / 0.10), 0 4px 8px -4px rgb(21 30 60 / 0.05);
  --golge-lg: 0 20px 40px -10px rgb(21 30 60 / 0.15), 0 8px 16px -6px rgb(21 30 60 / 0.08);
  --golge-xl: 0 30px 60px -15px rgb(21 30 60 / 0.22);
  --golge-renk: 0 8px 24px -8px rgb(21 101 192 / 0.25);  /* mavi tinted */
  /* Tek kanon kart-hover gölgesi — eskiden 13 yerde elle 'rgb(15 23 42)' kopyalanıyordu */
  --golge-kart-hover: 0 4px 8px -2px rgb(21 30 60 / 0.07), 0 8px 16px -4px rgb(21 30 60 / 0.05);

  /* Geçişler — SPRINT 4: easing sabitleri.
     Varsayılan `ease` yerine cubic-bezier (Material/iOS standard) ile daha "modern" his.
     - standard: çoğu UI geçişi (hover, focus, fade) — natural deceleration
     - spring: dinamik feedback (button tap, popup açılış) — hafif overshoot hissi
     - decelerate: girişler (page in, drawer open) — yavaşlayarak yerleşme
     - accelerate: çıkışlar (kapanış, dismiss) — hızlanarak gitme */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

  --gecis-hizli: 150ms var(--easing-standard);
  --gecis: 250ms var(--easing-standard);
  --gecis-yavas: 400ms var(--easing-standard);

  /* Konteyner */
  --konteyner-genislik: 1200px;
  --konteyner-yatay-bosluk: var(--bosluk-6);
}
@media (max-width: 640px) {
  :root { --konteyner-yatay-bosluk: var(--bosluk-4); }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* HTML5 [hidden] attribute — UA kuralı (display:none) düşük specificity'li olduğu
   için herhangi bir class-based display rule onu ezebiliyor (örn. .karti a {display:flex}
   data-modul ile hide edilen <a>'yı görünür kılar). !important ile garantiye alıyoruz —
   bu davranış HTML spec'inin de niyetidir, tarayıcılar !important koymuyor ama biz koyuyoruz. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Mobilde her dokunmada çıkan tarayıcı varsayılanı gri/mavi flaş'ı kapat —
     tasarlanmış :active geri bildirimleri (butonlar, çipler, nokta vb.) görünür kalsın. */
  -webkit-tap-highlight-color: transparent;
  /* Sticky header (96px) + küçük nefes payı; mobilde 80px + 12px */
  scroll-padding-top: 108px;
}
@media (max-width: 960px) {
  html { scroll-padding-top: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Tüm motion'ı azalt — accessibility & "iOS Reduce Motion" desteği */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--yazi-aile-govde);
  font-size: var(--yazi-base);
  line-height: 1.6;
  color: var(--renk-yazi);
  background-color: var(--renk-arka);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--renk-birincil);
  text-decoration: none;
  transition: color var(--gecis-hizli);
}
a:hover { color: var(--renk-birincil-koyu); }

ul, ol { list-style: none; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--yazi-aile-baslik);
  font-weight: 700;
  line-height: 1.2;
  color: var(--renk-yazi);
  letter-spacing: -0.02em;            /* Modern başlık hissi — sıkışıklığı azaltır */
}

h1 { font-size: clamp(var(--yazi-3xl), 5vw, var(--yazi-5xl)); letter-spacing: -0.02em; }
h2 { font-size: clamp(var(--yazi-2xl), 4vw, var(--yazi-4xl)); letter-spacing: -0.018em; }
h3 { font-size: clamp(var(--yazi-xl), 3vw, var(--yazi-2xl)); letter-spacing: -0.015em; }
h4 { font-size: var(--yazi-xl); letter-spacing: -0.01em; }
h5 { font-size: var(--yazi-lg); letter-spacing: -0.005em; }

p { margin-bottom: var(--bosluk-4); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--renk-vurgu); color: white; }

/* Konteyner */
.kapsayici {
  width: 100%;
  max-width: var(--konteyner-genislik);
  margin-inline: auto;
  padding-inline: var(--konteyner-yatay-bosluk);
}

.kapsayici-dar { max-width: 800px; }
.kapsayici-genis { max-width: 1400px; }

/* Bölüm */
.bolum {
  padding-block: clamp(var(--bosluk-16), 8vw, var(--bosluk-24));
}
@media (max-width: 520px) {
  .bolum { padding-block: var(--bosluk-12); }
}

.bolum-yumusak {
  background-color: var(--pastel-mavi);
}
.bolum-krem {
  background-color: var(--pastel-krem);
}
.bolum-pembe {
  background-color: var(--pastel-pembe);
}
.bolum-mor {
  background-color: var(--pastel-mor);
}
.bolum-koyu {
  background-color: var(--renk-arka-koyu);
  color: var(--renk-arka);
  /* Koyu zeminde metin token'larını yeniden eşle — içerideki bileşenler
     (kart metni, lead, soluk metin) otomatik doğru kontrast alsın. */
  --renk-yazi: #ffffff;
  --renk-yazi-acik: rgba(255, 255, 255, 0.82);
  --renk-yazi-soluk: rgba(255, 255, 255, 0.62);
}
.bolum-koyu h1, .bolum-koyu h2, .bolum-koyu h3,
.bolum-koyu h4, .bolum-koyu h5, .bolum-koyu h6 { color: #ffffff; }

/* Pastel renklerin ince üst kenarı (geçiş daha yumuşak) */
.bolum-yumusak, .bolum-krem, .bolum-pembe, .bolum-mor {
  position: relative;
}

.bolum-baslik {
  text-align: center;
  margin-bottom: var(--bosluk-12);
}
.bolum-baslik h2 { margin-bottom: var(--bosluk-3); }
.bolum-baslik p {
  font-size: var(--yazi-lg);
  color: var(--renk-yazi-acik);
  max-width: 700px;
  margin-inline: auto;
}
/* Mobilde başlık-altı boşluğu kıs — bölüm padding'i 48px'e inerken
   başlık bloğu 48px'lik masaüstü boşluğunu korumasın (dikey yoğunluk). */
@media (max-width: 520px) {
  .bolum-baslik { margin-bottom: var(--bosluk-8); }
  .bolum-baslik h2 { margin-bottom: var(--bosluk-2); }
}

/* Yardımcı sınıflar */
.gizli { display: none !important; }
.gorunmez { visibility: hidden; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.metin-merkez { text-align: center; }
.metin-vurgu { color: var(--renk-vurgu); }
.metin-birincil { color: var(--renk-birincil); }

/* Giriş paragrafı (lead) — bolum-içi başlık altı açıklayıcı metin için */
.metin-girisi {
  color: var(--renk-yazi-acik);
  /* Gövde/lead mobilde hafif küçülsün (başlıklar zaten clamp'li; ölçek tutarlı kalsın) */
  font-size: clamp(var(--yazi-base), 0.6vw + 0.95rem, var(--yazi-lg));
  line-height: 1.55;          /* büyük metin → daha sıkı satır arası */
  max-width: 68ch;            /* okuma ölçüsü — uzun satırları kelepçele (~60-75ch ideal) */
  margin-block: var(--bosluk-5);
}

/* Okuma ölçüsü yardımcı sınıfı — uzun gövde/lead bloklarına uygula.
   Merkezli kullanımda .metin-merkez ile birlikte ortalanır. */
.metin-olcu { max-width: 68ch; }
.metin-merkez > .metin-olcu, .metin-olcu.metin-merkez { margin-inline: auto; }

/* Çok satırlı (pre-line) içerik — inline 'white-space:pre-line' yerine yardımcı sınıf */
.metin-satirli { white-space: pre-line; }

/* Focus-visible (klavye erişilebilirliği)
   İki-tonlu halka: koyu dış OUTLINE + beyaz iç box-shadow. Eski tek-kırmızı outline,
   kırmızı CTA (--renk-vurgu) zemininde kırmızı-üstüne-kırmızı kalıp kayboluyordu (WCAG 2.4.7).
   Dış halkayı OUTLINE ile çiziyoruz: outline, overflow:hidden atalarda KIRPILMAZ (box-shadow
   kırpılır) — kart içindeki linklerde halka kesilmesin. Beyaz iç box-shadow ayrım verir.
   Koyu outline kırmızı/mavi/beyaz zeminlerde, beyaz iç halka da koyu (footer) zeminde taşır. */
:focus-visible {
  outline: 2px solid var(--renk-yazi);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #ffffff;
  border-radius: var(--yuvarlak-sm);
}

/* Skip-link — klavye kullanıcıları için "içeriğe atla" */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--bosluk-3);
  z-index: 10000;
  padding: var(--bosluk-3) var(--bosluk-5);
  background: var(--renk-birincil);
  color: #ffffff;
  font-weight: 600;
  border-radius: var(--yuvarlak);
  text-decoration: none;
  transition: top var(--gecis-hizli);
}
.skip-link:focus {
  top: var(--bosluk-3);
  color: #ffffff;
}

/* SPRINT 4: Sayfa girişi — main fade-up 220ms.
   prefers-reduced-motion için global *:animation-duration override kuralı zaten
   bu animasyonu otomatik olarak 0.01ms'ye düşürür → erişilebilirlik korunur.
   Sticky header etkilenmesin diye sadece main hedeflenir. */
@keyframes sayfa-giris {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
main {
  animation: sayfa-giris 220ms var(--easing-decelerate) both;
}