/* ==========================================================================
   Temel — sıfırlama, tipografik ölçek, yerleşim iskeleti
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--kagit);
  color: var(--metin);
  font-family: var(--f-govde);
  font-size: var(--o-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---- Başlıklar ----
   Display yüzü dar genişlikte ve sıkı tracking ile kullanılır; sayfanın
   karakteri buradan gelir. Gövde metni asla display yüzüyle dizilmez. */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-stretch: 84%;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--o-4xl); font-weight: 700; }
h2 { font-size: var(--o-3xl); font-weight: 700; }
h3 { font-size: var(--o-xl);  font-weight: 600; font-stretch: 90%; line-height: 1.2; }
h4 { font-size: var(--o-base); font-weight: 600; font-stretch: 92%; line-height: 1.3; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- Erişilebilirlik zemini ---- */
:focus-visible {
  outline: 2px solid var(--kase);
  outline-offset: 3px;
  border-radius: 2px;
}
.z-murekkep :focus-visible,
.z-dip :focus-visible,
.ust :focus-visible,
.hero :focus-visible,
.alt :focus-visible { outline-color: var(--onay-parlak); }

.gizli-baglanti {
  position: absolute; left: -9999px; top: 0;
  background: var(--kase); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 100;
  font-weight: 600;
}
.gizli-baglanti:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Yerleşim iskeleti ---- */
.kap {
  width: 100%;
  max-width: var(--kap);
  margin-inline: auto;
  padding-inline: var(--bosluk);
}
.kap-dar { max-width: var(--kap-dar); }

.bolum { padding-block: var(--bolum-y); }

/* Zemin varyantları. Tek yerde tanımlanır ki .bolum ile çakışmasın. */
.z-kagit    { background: var(--kagit); }
.z-kagit-2  { background: var(--kagit-ara); }
.z-murekkep { background: var(--murekkep); color: var(--metin-ters); }
.z-dip      { background: var(--murekkep-alt); color: var(--metin-ters); }

.z-murekkep h1, .z-murekkep h2, .z-murekkep h3, .z-murekkep h4,
.z-dip h1, .z-dip h2, .z-dip h3, .z-dip h4 { color: var(--metin-ters); }

/* ---- Ortak tipografik parçalar ---- */

/* Bölüm etiketi — mono, form alanı gibi okunur */
.etiket {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--o-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kase);
  margin-bottom: 0.9rem;
}
.z-murekkep .etiket, .z-dip .etiket { color: var(--kase-parlak); }

.bolum-basi { max-width: 62ch; margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.bolum-basi p {
  margin-top: 1.1rem;
  font-size: var(--o-lg);
  color: var(--metin-ikincil);
  line-height: 1.6;
}
.z-murekkep .bolum-basi p, .z-dip .bolum-basi p { color: var(--metin-ters-ikincil); }

.giris { font-size: var(--o-lg); color: var(--metin-ikincil); line-height: 1.6; }

/* ---- Düğmeler ---- */
.dugme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--f-govde);
  font-size: var(--o-base);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--yaricap);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis);
}
.dugme:hover { transform: translateY(-1px); }
.dugme:active { transform: translateY(0); }

.dugme-birincil { background: var(--kase); color: #fff; }
.dugme-birincil:hover { background: #372AA8; }

.dugme-ikincil {
  background: transparent;
  border-color: var(--cizgi-koyu);
  color: var(--metin);
}
.dugme-ikincil:hover { border-color: var(--kase); color: var(--kase); }

.hero .dugme-ikincil,
.z-murekkep .dugme-ikincil,
.z-dip .dugme-ikincil {
  border-color: rgba(251, 249, 244, 0.28);
  color: var(--metin-ters);
}
.hero .dugme-ikincil:hover,
.z-murekkep .dugme-ikincil:hover,
.z-dip .dugme-ikincil:hover {
  border-color: var(--metin-ters);
  color: var(--metin-ters);
}

.dugme-buyuk { padding: 1.05rem 1.9rem; font-size: var(--o-lg); }

/* ---- Hareket ----
   Sayfanın tek gösterisi hero'daki onay zinciri. Hareket kısıtlıysa
   her şey son hâlinde, animasyonsuz görünür. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}