/* ============================================================
   MOBİL OTO LASTİK — base.css
   Sıfırlama, tasarım jetonları (design tokens), tipografi tabanı
   ============================================================ */

/* ---- 1. Sıfırlama ---------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4, p,
figure, blockquote,
ul, ol, dl, dd { margin: 0; }

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

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

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

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

summary::-webkit-details-marker { display: none; }

address { font-style: normal; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ---- 2. Tasarım jetonları -------------------------------- */
:root {
  /* Renkler — asfalt / otoyol levhası / tepe lambası paleti */
  --asfalt:      #0A0E17;   /* gece asfaltı — ana zemin           */
  --asfalt-2:    #121826;   /* yükseltilmiş yüzeyler              */
  --asfalt-3:    #1B2436;   /* kenarlık ve ayraçlar               */
  --otoyol:      #0F3A8F;   /* otoyol levha mavisi — plakalar     */
  --otoyol-derin:#0A2A6B;   /* levha gölgesi                      */
  --beacon:      #FF7A1A;   /* kehribar tepe lambası — tek aksiyon rengi */
  --beacon-dim:  #C25A0C;
  --hivis:       #DCEE4A;   /* reflektif yelek sarısı — güvenlik  */
  --sheet:       #F4F7FF;   /* reflektif beyaz — ana metin        */
  --slate:       #8C99B5;   /* ikincil metin                      */
  --wa:          #25D366;   /* WhatsApp marka rengi (tek kullanım)*/

  /* Tipografi */
  --font-levha: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-govde: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-mikro: 0.75rem;
  --fs-kucuk: 0.875rem;
  --fs-govde: 1rem;
  --fs-lead:  1.0625rem;
  --fs-h3:    1.1875rem;
  --fs-h2:    1.75rem;
  --fs-dev:   2.25rem;

  /* Boşluk ölçeği */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Yapı */
  --wrap: 1140px;
  --wrap-dar: 760px;
  --radius: 10px;
  --radius-lg: 16px;
  --kenar: 1px solid var(--asfalt-3);
  --dock-h: 68px;
}


/* ---- 3. Gövde ve tipografi taban ------------------------- */
body {
  background-color: var(--asfalt);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(15, 58, 143, 0.28) 0%, transparent 60%);
  background-repeat: no-repeat;
  color: var(--sheet);
  font-family: var(--font-govde);
  font-size: var(--fs-govde);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}

strong, b { font-weight: 600; }

::selection {
  background: var(--beacon);
  color: var(--asfalt);
}


/* ---- 4. Ortak tipografi sınıfları ------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  color: var(--beacon);
  font-family: var(--font-levha);
  font-size: var(--fs-kucuk);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.eyebrow--hivis { color: var(--hivis); }

.h2 {
  max-width: 20ch;
  margin-bottom: var(--sp-4);
  font-family: var(--font-levha);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.lead {
  max-width: 62ch;
  margin-bottom: var(--sp-6);
  color: var(--slate);
  font-size: var(--fs-lead);
}

.note {
  max-width: 62ch;
  margin-top: var(--sp-5);
  color: var(--slate);
  font-size: var(--fs-kucuk);
}


/* ---- 5. Erişilebilirlik ---------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--beacon);
  color: var(--asfalt);
  font-weight: 600;
  transition: top 0.18s ease;
}

.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--hivis);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ---- 6. Hareket tercihi ---------------------------------- */
@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;
  }
}