/* ==========================================================================
   UĞUR AVTO — brend əsası
   Public sayt (site.css) və admin panel (admin.css) EYNİ tokenlərdən qidalanır.
   Rəng/ölçü dəyişikliyi YALNIZ burada edilir.
   ========================================================================== */

:root {
  /* ---------- Brend ---------- */
  --brand-ink: #0b0d10;      /* əsas tünd — mətn, düymələr, sidebar */
  --brand-gold: #c9a227;     /* uğur/qızıl — vurğu, loqo qövsü */
  --brand-gold-soft: #f6efdc;
  --brand-gold-deep: #a5811b;

  /* ---------- Neytral şkala ---------- */
  --n-0: #ffffff;
  --n-25: #fbfbfc;
  --n-50: #f6f7f9;
  --n-100: #eef0f3;
  --n-200: #e2e5ea;
  --n-300: #cbd0d8;
  --n-400: #9aa2ae;
  --n-500: #6c7480;
  --n-600: #4b525c;
  --n-700: #343a43;
  --n-800: #1f242b;
  --n-900: #12161b;

  /* ---------- Status ---------- */
  --ok: #17803d;
  --ok-soft: #e7f6ec;
  --warn: #a96a06;
  --warn-soft: #fdf3e2;
  --err: #c02626;
  --err-soft: #fdeceb;
  --info: #1d4ed8;
  --info-soft: #eaf0fe;

  /* ---------- Tipoqrafiya ---------- */
  --font-sans: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-num: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: clamp(2.25rem, 5vw, 3.5rem);
  --fs-4xl: clamp(2.75rem, 7vw, 4.75rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;

  /* ---------- Boşluq (4px şkala) ---------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  /* ---------- Forma ---------- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- Kölgə (yumşaq, çox qatlı) ---------- */
  --sh-xs: 0 1px 2px rgba(11, 13, 16, 0.05);
  --sh-sm: 0 1px 3px rgba(11, 13, 16, 0.07), 0 1px 2px rgba(11, 13, 16, 0.04);
  --sh-md: 0 4px 12px rgba(11, 13, 16, 0.07), 0 2px 4px rgba(11, 13, 16, 0.04);
  --sh-lg: 0 14px 32px rgba(11, 13, 16, 0.10), 0 4px 10px rgba(11, 13, 16, 0.05);
  --sh-xl: 0 28px 60px rgba(11, 13, 16, 0.14), 0 8px 18px rgba(11, 13, 16, 0.06);

  /* ---------- Hərəkət (zərif, qısa) ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 120ms var(--ease);
  --t-base: 180ms var(--ease);
  --t-slow: 280ms var(--ease);

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-wide: 1440px;
  --gutter: 1rem;
  --header-h: 68px;
  --focus: 0 0 0 3px rgba(201, 162, 39, 0.45);
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; }
}

/* ==========================================================================
   Loqo — hər iki tərəfdə eyni komponent (_Logo.cshtml partial-ı ilə işləyir)
   Nişan: "U" + qalxan ox. U rəngi fona görə dəyişir, ox HƏMİŞƏ qızıl qalır.
   ========================================================================== */

.logo {
  --logo-ink: var(--brand-ink);
  --logo-word: var(--brand-ink);

  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.logo__mark {
  flex: none;
  width: 2.1em;
  height: 2.1em;
  display: block;
  overflow: visible;
}

.logo__u { stroke: var(--logo-ink); }
.logo__arrow { stroke: var(--brand-gold); }

.logo__word {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.06em;
  letter-spacing: 0.055em;
  color: var(--logo-word);
}

.logo__word b { font-weight: 800; }
.logo__word i { font-style: normal; color: var(--brand-gold); }

/* Tünd fon üçün — U ağ olur, ox qızıl qalır */
.logo--on-dark {
  --logo-ink: #ffffff;
  --logo-word: #ffffff;
}

/* ==========================================================================
   Ortaq köməkçilər
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-xs);
}

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