/* ==========================================================
   DESPINA MOTORS · base.css
   Değişkenler, sıfırlama, tipografi, temel öğeler
   ========================================================== */

:root{
  /* --- Antrasit skalası --- */
  --ink:        #0e1013;
  --anthracite: #14171c;
  --anth-2:     #1b1f26;
  --anth-3:     #232830;
  --anth-4:     #2e343d;
  --line:       #333a44;

  /* --- Gold skalası --- */
  --gold:       #c9a227;
  --gold-2:     #e0be51;
  --gold-soft:  #f0dc9c;
  --gold-deep:  #8a6f14;
  --gold-line:  rgba(201,162,39,.24);
  --gold-glow:  rgba(201,162,39,.14);

  /* --- Metin --- */
  --text:       #e9ebee;
  --text-2:     #aab0b9;
  --text-3:     #7b828d;
  --white:      #ffffff;

  /* --- Tipografi --- */
  --f-head: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* --- Ölçüler --- */
  --wrap: 1280px;
  --gut: 28px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --header-h: 78px;

  /* --- Hareket --- */
  --e: cubic-bezier(.22,.61,.36,1);
  --e-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .25s var(--e);
  --t: .45s var(--e);
  --t-slow: .8s var(--e-out);

  /* --- Gölge --- */
  --sh-1: 0 2px 12px rgba(0,0,0,.30);
  --sh-2: 0 14px 44px rgba(0,0,0,.45);
  --sh-gold: 0 10px 34px rgba(201,162,39,.20);
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
 html{
   width:100%; max-width:100%;
   -webkit-text-size-adjust:100%; scroll-behavior:smooth;
   overflow-x:hidden;
 }
body{
  width:100%; max-width:100%;
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
iframe{ border:0; display:block; }

::selection{ background:var(--gold); color:var(--ink); }

/* Kaydırma çubuğu */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--anthracite); }
::-webkit-scrollbar-thumb{ background:var(--anth-4); border-radius:20px; border:2px solid var(--anthracite); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-deep); }

/* ---------------- Tipografi ---------------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0 0 .5em;
  color:var(--white);
}
h1{ font-size:clamp(2.5rem, 6vw, 4.6rem); font-weight:700; }
h2{ font-size:clamp(1.9rem, 3.6vw, 3.05rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); }
h4{ font-size:1.05rem; letter-spacing:.01em; }

h1 em,h2 em,h3 em{
  font-style:normal;
  color:var(--gold);
  position:relative;
}
h2 em::after{
  content:'';
  position:absolute; left:0; right:0; bottom:.06em;
  height:2px;
  background:linear-gradient(90deg, var(--gold), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--e-out) .25s;
}
.is-in h2 em::after{ transform:scaleX(1); }

strong{ font-weight:600; color:var(--white); }

/* Ön başlık etiketi */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-head);
  font-size:.7rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
}
.eyebrow::before{
  content:''; width:34px; height:1px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.eyebrow--center::after{
  content:''; width:34px; height:1px;
  background:linear-gradient(90deg, var(--gold), var(--gold-deep));
}

.lead{
  font-size:clamp(1.02rem, 1.35vw, 1.18rem);
  color:var(--text-2);
  line-height:1.85;
  font-weight:300;
}
.muted{ color:var(--text-3); }

/* İkon temel */
.ico{ width:20px; height:20px; flex:0 0 auto; }

/* Erişilebilirlik */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold); color:var(--ink); padding:10px 18px;
}
.skip-link:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

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