/* ============================================================
   reset.css — CSS Variables, Reset, Base Typography
   ============================================================ */

:root {
  /* ===== HAM RENK PALETİ ===== */
  --cream:       #EED9A4;
  --cream-light: #F5EDD5;
  --cream-dark:  #E0C888;
  --navy:        #1A2B6B;
  --navy-deep:   #0F1A4A;
  --red:         #9E2A2B;
  --text-muted:  #5C4A36;
  --muted-on-navy: rgba(238, 217, 164, 0.65);

  /* ===== SEMANTİK RENK SİSTEMİ ===== */
  /* Marka */
  --color-brand:        var(--navy);
  --color-accent:       var(--red);

  /* Yüzeyler */
  --surface-base:       var(--cream);
  --surface-card:       var(--cream-light);
  --surface-inverse:    var(--navy);
  --surface-inverse-deep: var(--navy-deep);

  /* Metin */
  --text-primary:       var(--navy);
  --text-secondary:     var(--text-muted);
  --text-on-inverse:    var(--cream);
  --text-on-inverse-muted: var(--muted-on-navy);

  /* Etkileşim */
  --interactive-hover:  var(--red);
  --interactive-focus:  var(--red);

  /* Sınırlar */
  --border-subtle:       rgba(26, 43, 107, 0.12);
  --border-medium:       rgba(26, 43, 107, 0.2);
  --border-strong:       rgba(26, 43, 107, 0.35);
  --border-on-inverse:   rgba(238, 217, 164, 0.18);
  --border-on-inverse-strong: rgba(238, 217, 164, 0.5);

  /* ===== TİPOGRAFİ ===== */
  --font-display: 'Libre Baskerville', serif;
  --font-ui:      'Inter', sans-serif;

  /* Tipografi ölçeği — 9-12px aralığındaki kalabalığı 3 boyuta indirir */
  --text-xs:   0.7rem;     /* 11.2px — etiketler, eyebrow, footer, küçük UI */
  --text-sm:   0.85rem;    /* 13.6px — buton, secondary, küçük açıklamalar */
  --text-md:   1rem;       /* 16px   — body */
  --text-lg:   1.125rem;   /* 18px   — büyük gövde */
  --text-xl:   1.5rem;     /* 24px   — kart başlıkları */
  --text-2xl:  2rem;       /* 32px   — bölüm başlıkları */
  --text-3xl:  3rem;       /* 48px+  — hero/kahraman başlıklar */

  /* ===== LAYOUT ===== */
  --header-height: 130px;
  --section-px: 2.5rem;
  --section-py: 6rem;
  --section-py-sm: 4rem;   /* sıkı section'lar için */

  /* ===== HOVER ÖLÇEĞİ ===== */
  --hover-lift-sm: -2px;
  --hover-lift:    -4px;
  --hover-lift-lg: -6px;

  /* ===== GEÇİŞLER ===== */
  --ease-door:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

body {
  background-color: var(--cream);
  color: var(--navy);
  font-family: var(--font-display);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

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

input, textarea, select {
  font: inherit;
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --section-px: 1.5rem;
    --section-py: 4rem;
  }
}

/* ===== ERİŞİLEBİLİRLİK — KLAVYE FOCUS HALKASI ===== */
/* Klavye ile gezenler için görünür focus state. Mouse ile tıklamada
   aktive olmaz (:focus-visible sayesinde). Form alanları kendi
   stilini kullandığı için onları hariç tutuyoruz. */
*:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ===== SKIP TO CONTENT — ekran okuyucu erişilebilirliği ===== */
/* Default: ekran dışında. Klavyeyle Tab → görünür hale gelir. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 1rem;
  z-index: 1000;
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding: 0.85rem 1.25rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 2px solid var(--color-accent);
  transition: top 0.2s var(--ease-smooth);
}

.skip-link:focus {
  top: 1rem;
}