/* ============================================
   Base — reset + tipografi temeli
   ============================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  /* Fraunces wonky glyph (& f j g) kapatma — kalitsal, tum siteye iner.
     Inter bu eksenleri yok sayar (zararsiz). */
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--c-brand); color: var(--c-cream); }

/* —— Tipografi —— */

.display, h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
  font-feature-settings: 'kern';
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

h1, .h1 {
  font-size: clamp(2.5rem, 4.2vw + 1rem, var(--fs-4xl));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1.02;
}

.display-xl {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: clamp(3rem, 6vw + 1rem, var(--fs-5xl));
  font-weight: var(--fw-semibold);
  line-height: 0.96;
  letter-spacing: -0.03em;
}

h2, .h2 {
  font-size: clamp(2rem, 3vw + 0.5rem, var(--fs-3xl));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
}

h3, .h3 {
  font-size: clamp(1.5rem, 2vw + 0.5rem, var(--fs-2xl));
  font-weight: var(--fw-semibold);
  line-height: 1.12;
}

h4, .h4 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

h5, .h5 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.kicker, .eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent-deep);
}

p {
  font-family: var(--f-body);
  line-height: var(--lh-base);
  color: var(--c-ink-soft);
}

.lead {
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink-soft);
  font-weight: var(--fw-regular);
  max-width: 56ch;
}

.editorial {
  font-family: var(--f-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-soft);
  letter-spacing: -0.012em;
}

.muted { color: var(--c-ink-mute); }
.faint { color: var(--c-ink-faint); }

strong, b { font-weight: var(--fw-semibold); color: var(--c-ink); }

/* —— em / i — Beyaz başlıklar Fraunces; em (renkli vurgu) Inter Italic 700.
   Sans-serif italic vurgu, modern SaaS kontrastı. —— */
em, i {
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* —— Layout —— */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.wrap-narrow { max-width: var(--container-narrow); }
.wrap-text   { max-width: var(--container-text); }

.section { padding: var(--s-10) 0; }
.section-sm { padding: var(--s-7) 0; }
.section-lg { padding: var(--s-12) 0; }

.bg-paper      { background: var(--c-paper); }
.bg-paper-deep { background: var(--c-paper-deep); }
.bg-marble     { background: var(--c-marble); }
.bg-night      { background: var(--c-night); color: var(--c-cream); }
.bg-night h1, .bg-night h2, .bg-night h3, .bg-night h4 { color: var(--c-cream); }
.bg-night p, .bg-night .lead { color: rgba(245, 241, 234, 0.78); }
.bg-night .kicker { color: var(--c-accent-bright); }
.bg-brand { background: var(--c-brand); color: var(--c-cream); }
.bg-brand h1, .bg-brand h2, .bg-brand h3 { color: var(--c-cream); }

@media (max-width: 768px) {
  .section    { padding: var(--s-8) 0; }
  .section-lg { padding: var(--s-9) 0; }
}