/* =====================================================================
   RESET - Tarayıcılar arası tutarlılık için sade, modern sıfırlama
   ===================================================================== */

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

* {
  margin: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
}

/* Yatay taşma güvenlik önlemi: bir bileşende beklenmedik bir genişlik
   sorunu olsa bile sayfa genelinde yatay kaydırmayı engeller.
   NOT: "overflow-x: hidden" tek başına bazı mobil tarayıcılarda
   "position: sticky" olan header ile çakışıp header'ın kayması/zıplaması
   gibi görsel sorunlara yol açabiliyor (overflow-x sabitlenince overflow-y
   de örtük biçimde "auto" sayılır ve body kendi kaydırma kutusuna
   dönüşür). "overflow-x: clip" ise modern tarayıcılarda aynı taşma
   korumasını, kaydırma kutusu OLUŞTURMADAN sağlar ve sticky ile çakışmaz.
   Eski tarayıcılar "clip" değerini tanımadığı için ilk satırı (hidden)
   olduğu gibi kullanmaya devam eder; modern tarayıcılar ikinci (clip)
   satırı uygular. */
html, body { overflow-x: hidden; max-width: 100%; }
html, body { overflow-x: clip; }

/* Flexbox/Grid içindeki input, textarea gibi elemanlar varsayılan olarak
   içeriği kadar minimum genişlik ister (min-width:auto) ve bu da uzun bir
   metin/URL içeren input'ların konteynerini taşırmasına yol açar. Bunu
   proje genelinde baştan engelliyoruz. */
input, textarea, select {
  min-width: 0;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

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

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

ul, ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 600;
}

/* Klavye ile gezinen kullanıcılar için görünür odak (focus) halkası.
   Fare kullanıcılarını rahatsız etmemek için :focus-visible kullanılır. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent);
  color: #fff;
}