/* ==========================================================================
   UĞUR AVTO — public sayt
   Bütün rəng, ölçü, radius, kölgə və hərəkət tokenləri brand.css-dən gəlir.
   Burada yalnız semantik adlar verilir və komponentlər qurulur. Mobile-first.

   Sıra:
     0. Semantik tokenlər        6. Kartlar və qiymət
     1. Reset / baza             7. Kataloq (filtr, toolbar, çiplər, səhifələmə)
     2. Layout primitivləri      8. Detal səhifəsi
     3. Tipoqrafiya              9. Məzmun səhifələri (haqqımızda, əlaqə, status)
     4. Düymələr və formalar    10. Footer
     5. Header və hero          11. Köməkçilər · 12. Responsiv · 13. Tünd rejim
   ========================================================================== */

/* ---------- 0. Semantik tokenlər (brand.css → səhifə rolu) ---------- */
:root {
  color-scheme: light dark;

  --bg: var(--n-0);
  --bg-soft: var(--n-25);
  --surface: var(--n-50);
  --surface-2: var(--n-100);
  --card-bg: var(--n-0);

  --ink: var(--brand-ink);
  --ink-2: var(--n-700);
  --muted: var(--n-500);
  --muted-2: var(--n-400);

  --line: var(--n-200);
  --line-strong: var(--n-300);

  --gold: var(--brand-gold);
  --gold-deep: var(--brand-gold-deep);
  --gold-soft: var(--brand-gold-soft);

  /* Tünd səthlər (hero, CTA, footer) — hər rejimdə eyni qalır */
  --dark: var(--brand-ink);
  --dark-2: var(--n-900);
  --dark-surface: var(--n-800);
  --on-dark: var(--n-0);
  --on-dark-2: color-mix(in srgb, var(--n-0) 70%, transparent);
  --on-dark-3: color-mix(in srgb, var(--n-0) 46%, transparent);
  --dark-line: color-mix(in srgb, var(--n-0) 12%, transparent);
  --dark-field: color-mix(in srgb, var(--n-0) 6%, var(--dark));
  --scrim: color-mix(in srgb, var(--brand-ink) 62%, transparent);
  --glass: color-mix(in srgb, var(--bg) 92%, transparent);

  --lh-display: 1.05;
  --ls-display: -0.02em;
}

/* ---------- 1. Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.nav-open, body.drawer-open { overflow: hidden; }

.site-main { flex: 1 0 auto; }

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }
dd { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
i { font-style: normal; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

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

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 200;
  padding: var(--s2) var(--s4);
  background: var(--ink);
  color: var(--bg);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
}
.skip-link:focus { top: 0; }

/* ---------- 2. Layout primitivləri ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s16); }
.section--tight { padding-block: var(--s8); }
.section--tint { background: var(--surface); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s8);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.section__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.section__more { display: flex; justify-content: center; margin-top: var(--s10); }

.grid { display: grid; gap: var(--s5); }
.grid--cards { grid-template-columns: 1fr; }

.stack { display: grid; gap: var(--s2); }

.rule { display: block; width: 48px; height: 2px; background: var(--line-strong); margin-bottom: var(--s5); }
.rule--gold { background: var(--gold); }

/* ---------- 3. Tipoqrafiya ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--gold); flex: none; }
.eyebrow--light { color: var(--on-dark-2); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base);
}
.link-arrow .ico { transition: transform var(--t-base); }
.link-arrow:hover { border-bottom-color: var(--ink); }
.link-arrow:hover .ico { transform: translateX(3px); }
.link-arrow--light { color: var(--on-dark); }
.link-arrow--light:hover { border-bottom-color: var(--gold); }

.muted { color: var(--muted); }

.ico {
  width: 1.15em; height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -0.2em;
  fill: none;
}

/* Qiymət — kartın ən səsli elementi */
.price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price__value { font-size: var(--fs-xl); font-weight: 800; }
.price__cur { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); letter-spacing: 0; }
.price--xl .price__value { font-size: var(--fs-3xl); letter-spacing: var(--ls-display); }
.price--xl .price__cur { font-size: var(--fs-md); }

/* ---------- 4. Düymələr və formalar ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bg);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 46px;
  padding: 0 var(--s5);
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }

.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--bg); --btn-bd: var(--ink); }
.btn--primary:hover { --btn-bg: var(--ink-2); --btn-bd: var(--ink-2); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bd: var(--ink); }

.btn--light { --btn-bg: var(--on-dark); --btn-fg: var(--dark); --btn-bd: var(--on-dark); }
.btn--light:hover { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: var(--dark); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: color-mix(in srgb, var(--n-0) 32%, transparent); }
.btn--outline-light:hover { --btn-bd: var(--on-dark); }

.btn--sm { min-height: 38px; padding-inline: var(--s4); font-size: var(--fs-xs); }
.btn--lg { min-height: 54px; padding-inline: var(--s8); font-size: var(--fs-base); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background var(--t-base);
}
.icon-btn:hover { background: var(--surface); }
.icon-btn .ico { width: 22px; height: 22px; }

/* Nişanlar */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.7em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-2);
}
.tag--gold { background: var(--gold); border-color: var(--gold); color: var(--brand-ink); }
.tag--sold { background: var(--surface-2); border-color: var(--surface-2); color: var(--muted); }

.ribbon {
  position: absolute;
  top: var(--s3); left: 0;
  padding: 0.4em 0.8em 0.4em 0.9em;
  background: var(--gold);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.swatch {
  display: inline-block;
  width: 0.85em; height: 0.85em;
  flex: none;
  border-radius: 50%;
  background: var(--swatch, var(--n-300));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-ink) 18%, transparent);
  vertical-align: -0.08em;
  margin-right: 0.35em;
}

/* Formalar */
.field { display: grid; gap: var(--s2); min-width: 0; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend {
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.field--range legend { margin-bottom: var(--s2); }
.range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); }
.range__sep { color: var(--muted-2); font-size: var(--fs-sm); }

select,
input[type="number"], input[type="text"], input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-base);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer; }
select:disabled { color: var(--muted); background-color: var(--surface); cursor: not-allowed; }
select:focus-visible, input:focus-visible { border-color: var(--gold); box-shadow: var(--focus); border-radius: var(--r-sm); }
input::placeholder { color: var(--muted-2); }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Select oxu — currentColor ilə çəkilir, rəng koduna ehtiyac yoxdur */
.select { position: relative; display: block; min-width: 0; color: var(--muted); }
.select::after {
  content: "";
  position: absolute;
  right: 0.95rem; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.select > select { display: block; }
.select--bare > select {
  width: auto;
  border-color: transparent;
  background: transparent;
  min-height: 36px;
  padding-left: var(--s2);
  padding-right: 1.8rem;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.select--bare::after { right: 0.6rem; }
.select--bare > select:hover { border-color: var(--line-strong); }

.check {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ink); }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base);
}
.site-header.is-scrolled, body.nav-open .site-header { border-bottom-color: var(--line); }

.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--header-h);
}
.site-header__logo { font-size: 1rem; }
.site-header__tools { display: flex; align-items: center; gap: var(--s1); }

.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Mobil: tam hündürlüklü panel */
.nav {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  padding: var(--s4) var(--gutter) var(--s8);
  background: var(--bg);
  overflow-y: auto;
}
.nav.is-open { display: flex; }
.nav__list { display: grid; }
.nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.nav__link:hover, .nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.nav__cta { display: grid; gap: var(--s2); margin-top: var(--s8); }
.nav__cta .btn { min-height: 50px; font-size: var(--fs-sm); }

/* JS yoxdursa: menyu düyməsiz, sətir kimi görünür */
.no-js .nav-toggle { display: none; }
.no-js .nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: 0; }
.no-js .nav__list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.no-js .nav__link { padding: var(--s2); border: 0; font-size: var(--fs-sm); }
.no-js .nav__cta { margin: 0; grid-auto-flow: column; }

@media (min-width: 900px) {
  .nav-toggle, .site-header__phone { display: none; }
  .site-header__tools { display: none; }
  .nav {
    position: static;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s6);
    padding: 0;
    background: transparent;
    overflow: visible;
  }
  .nav__list { display: flex; gap: var(--s1); margin-inline: auto; }
  .nav__link {
    position: relative;
    padding: var(--s2) var(--s3);
    border: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0;
  }
  .nav__link.is-active { font-weight: 700; }
  .nav__link.is-active::after {
    position: absolute;
    left: var(--s3); right: var(--s3); bottom: 0;
    width: auto; height: 2px;
    border-radius: 0;
  }
  .nav__cta { display: flex; margin: 0; gap: var(--s2); }
  .nav__cta .btn { min-height: 38px; font-size: var(--fs-xs); }
  .nav__cta-secondary { display: none; }
}
@media (min-width: 1100px) { .nav__cta-secondary { display: inline-flex; } }

/* ---------- 5b. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dark);
  color: var(--on-dark);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dark) 55%, transparent) 0%, color-mix(in srgb, var(--dark) 88%, transparent) 55%, var(--dark) 100%);
}
.hero--plain {
  background-image: url("../images/hero-pattern.svg");
  background-repeat: no-repeat;
  background-position: right -80px bottom -160px;
  background-size: 620px;
}

.hero__in {
  position: relative;
  display: grid;
  padding-block: var(--s12) var(--s10);
}
.hero__copy { max-width: 640px; }
.hero__title {
  font-size: var(--fs-3xl); /* 320px-də uzun söz sığsın; ≥640 → 4xl */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--on-dark);
  max-width: 24ch;
}
.hero__lead {
  margin-top: var(--s5);
  max-width: 46ch;
  font-size: var(--fs-md);
  color: var(--on-dark-2);
}

/* Kompakt axtarış zolağı: hairline ilə bölünmüş hücrələr */
.hero__search {
  display: grid;
  gap: 1px;
  margin-top: var(--s8);
  background: var(--dark-line);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hero__field { display: grid; gap: 2px; min-width: 0; padding: var(--s3) var(--s4); background: var(--dark-field); }
.hero__field label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.hero__field input, .hero__field select {
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--on-dark);
  font-weight: 700;
  font-size: var(--fs-md);
}
.hero__field input::placeholder { color: var(--on-dark-3); font-weight: 600; }
.hero__field input:focus-visible, .hero__field select:focus-visible { box-shadow: none; outline: 2px solid var(--gold); outline-offset: 4px; }
.select--dark { color: var(--on-dark-3); }
.select--dark::after { right: 0.2rem; }
.select--dark > select { padding-right: 1.4rem; }
.hero__field select option { color: var(--brand-ink); background: var(--n-0); }
.hero__submit { border-radius: 0; min-height: 56px; width: 100%; font-size: var(--fs-sm); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s10);
  margin-top: var(--s10);
  padding-top: var(--s6);
  border-top: 1px solid var(--dark-line);
}
.hero__stats dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.hero__stats dd {
  margin-top: var(--s1);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.hero__stats small { font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark-2); letter-spacing: 0; margin-left: 0.2em; }

.hero__spot {
  display: none;
  position: absolute;
  right: var(--gutter); bottom: var(--s6);
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-sm);
  background: var(--scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--on-dark);
  font-size: var(--fs-sm);
  transition: border-color var(--t-base);
}
.hero__spot:hover { border-color: var(--gold); }
.hero__spot-name { font-weight: 700; }
.hero__spot-name em { font-style: normal; font-weight: 500; color: var(--on-dark-2); }
.hero__spot-price { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .hero__title { font-size: var(--fs-4xl); }
  .hero__title-line { display: block; }
}
@media (min-width: 768px) {
  .hero__search { grid-template-columns: 1fr 1fr 1fr auto; }
  .hero__submit { width: auto; height: 100%; padding-inline: var(--s6); }
}
@media (min-width: 1024px) {
  .hero__in { min-height: clamp(560px, 78vh, 760px); align-content: center; padding-block: var(--s16); }
  .hero__media img { object-position: center; }
  .hero__media::after {
    background:
      linear-gradient(90deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 92%, transparent) 38%, color-mix(in srgb, var(--dark) 55%, transparent) 62%, color-mix(in srgb, var(--dark) 18%, transparent) 100%),
      linear-gradient(0deg, var(--dark) 0%, transparent 28%);
  }
  .hero--plain { background-position: right -40px center; background-size: 760px; }
  .hero__spot { display: inline-flex; }
}

/* ---------- 6. Kartlar ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.card:focus-within { border-color: var(--gold); box-shadow: var(--focus); }

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.card:hover .card__media img { transform: scale(1.02); }
.card--sold .card__media img { filter: grayscale(1); opacity: 0.8; }
.card__sold {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s2) var(--s4);
  background: var(--scrim);
  color: var(--on-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.card__body { display: flex; flex-direction: column; gap: var(--s2); flex: 1; padding: var(--s4) var(--s4) var(--s5); }
.card__title { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; line-height: var(--lh-snug); }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__title a:focus-visible { box-shadow: none; }
.card__title span { font-weight: 600; color: var(--ink-2); }
.card--sold .card__title { color: var(--ink-2); }

.card__meta { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.card__meta > span { display: inline-flex; align-items: center; white-space: nowrap; }
.card__meta > span + span::before {
  content: "";
  display: inline-block;
  width: 1px; height: 0.85em;
  margin-inline: var(--s2);
  background: var(--line-strong);
}
.card__meta--soft { font-size: var(--fs-xs); color: var(--muted-2); }

.card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: auto;
  padding-top: var(--s4);
}
.card--sold .price { color: var(--muted); }
.card__cta {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.card:hover .card__cta { background: var(--ink); border-color: var(--ink); color: var(--bg); }

@media (min-width: 560px) { .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .grid--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 7. Kataloq ---------- */
.page-head { padding-block: var(--s10) var(--s2); }
.page-head--compact { padding-block: var(--s5) 0; }
.page-head__title { font-size: var(--fs-3xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.page-head__lead { margin-top: var(--s4); max-width: 46rem; color: var(--muted); font-size: var(--fs-md); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s6); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.page-head__row .page-head__title { font-size: var(--fs-2xl); }
.page-head__count { font-size: var(--fs-sm); color: var(--muted); }
.page-head__count b { color: var(--ink); font-weight: 800; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

.catalog { display: grid; gap: var(--s6); align-items: start; }
.catalog__main { min-width: 0; }

/* Filtr paneli: <details>. Mobil (JS) — drawer; desktop — sabit sidebar */
.filters__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.filters__summary::-webkit-details-marker { display: none; }
.filters__summary-label { display: inline-flex; align-items: center; gap: var(--s2); }
.filters__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding-inline: 6px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.filters__panel { padding-top: var(--s4); }
.filters__head { display: none; }
.filters__title { font-size: var(--fs-lg); }
.filters__form { display: grid; }

.fgroup { border-top: 1px solid var(--line); }
.fgroup__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fgroup__summary::-webkit-details-marker { display: none; }
.fgroup__summary .ico { color: var(--muted); transform: rotate(90deg); transition: transform var(--t-base); }
.fgroup[open] .fgroup__summary .ico { transform: rotate(-90deg); }
.fgroup__body { display: grid; gap: var(--s4); padding-bottom: var(--s5); }

.filters__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--s2);
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.filters__actions .btn { flex: 1; }

/* Mobil drawer (JS var, ekran dar): panel tam ekran açılır */
.filters.is-drawer[open] .filters__panel {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) var(--s4);
  background: var(--bg);
  overflow-y: auto;
}
.filters.is-drawer[open] .filters__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  margin-bottom: var(--s2);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.filters.is-drawer[open] .filters__form { flex: 1; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.toolbar__count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.toolbar__count b { color: var(--ink); font-weight: 800; }
.toolbar__sort { display: flex; align-items: center; gap: var(--s1); }
.toolbar__sort label { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.js [data-hide-when-js] { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 32px;
  padding: 0 0.85em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card-bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color var(--t-base), color var(--t-base);
}
.chip--x .ico { width: 0.9em; height: 0.9em; color: var(--muted); }
.chip--x:hover { border-color: var(--ink); color: var(--ink); }
.chip--clear { border-style: dashed; color: var(--muted); }
.chip--clear:hover { color: var(--ink); border-color: var(--ink); }

@media (min-width: 1024px) {
  .catalog { grid-template-columns: 264px minmax(0, 1fr); gap: var(--s12); }
  .catalog__side {
    position: sticky;
    top: calc(var(--header-h) + var(--s5));
    max-height: calc(100dvh - var(--header-h) - var(--s8));
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: var(--s1);
  }
  .filters__summary { display: none; }
  .filters__panel { padding-top: 0; }
  .filters__actions { position: static; }
}

/* Boş vəziyyət */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
  padding: var(--s16) var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.empty__ico { width: 48px; height: 48px; color: var(--muted-2); }
.empty__title { font-size: var(--fs-lg); }
.empty__text { max-width: 36rem; color: var(--muted); font-size: var(--fs-sm); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s3); }

/* Səhifələmə */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s12);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.pager__list { order: 3; display: flex; justify-content: center; gap: var(--s1); width: 100%; }
.pager__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 40px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  transition: border-color var(--t-base);
}
.pager__btn:hover { border-color: var(--ink); }
.pager__btn.is-disabled { opacity: 0.35; pointer-events: none; }
.pager__ico-prev { transform: rotate(180deg); }
.pager__num {
  display: inline-grid;
  place-items: center;
  min-width: 40px; height: 40px;
  padding-inline: var(--s2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-base), color var(--t-base);
}
.pager__num:hover { background: var(--surface); color: var(--ink); }
.pager__num.is-current { background: var(--ink); color: var(--bg); }
.pager__gap { display: grid; place-items: center; min-width: 24px; color: var(--muted-2); }
@media (min-width: 640px) {
  .pager { flex-wrap: nowrap; }
  .pager__list { order: 0; width: auto; }
}

/* ---------- 8. Detal səhifəsi ---------- */
.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4) var(--s8);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}
.detail-head__main { min-width: 0; }
.detail-head__badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.detail-head__badges:empty { display: none; }
.detail-head__title { font-size: var(--fs-3xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); overflow-wrap: anywhere; }
.detail-head__title span { font-weight: 600; color: var(--ink-2); }
.detail-head__sub { display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--s3); color: var(--muted); font-size: var(--fs-base); }
.detail-head__sub > span + span::before {
  content: "";
  display: inline-block;
  width: 1px; height: 0.85em;
  margin-inline: var(--s3);
  background: var(--line-strong);
  vertical-align: -0.08em;
}

.detail { display: grid; gap: var(--s10); align-items: start; }
.detail__main { display: grid; gap: var(--s10); min-width: 0; }

/* Qalereya */
.gallery { display: grid; gap: var(--s3); border-radius: var(--r-md); }
.gallery:focus-visible { outline-offset: 4px; }
.gallery__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.gallery__main { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-base); }
.gallery__main.is-switching { opacity: 0.4; }
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--n-0);
  color: var(--brand-ink);
  box-shadow: var(--sh-md);
  transition: transform var(--t-fast), background var(--t-base);
}
.gallery__nav:hover { background: var(--gold); }
.gallery__nav:active { transform: translateY(-50%) scale(0.96); }
.gallery__nav--prev { left: var(--s3); }
.gallery__nav--prev .ico { transform: rotate(180deg); }
.gallery__nav--next { right: var(--s3); }
.gallery__counter {
  position: absolute;
  right: var(--s3); bottom: var(--s3);
  padding: 0.35em 0.75em;
  border-radius: var(--r-xs);
  background: var(--scrim);
  color: var(--on-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
}
.gallery__sold {
  position: absolute;
  top: var(--s4); left: 0;
  padding: 0.45em 1em;
  background: var(--scrim);
  color: var(--on-dark);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.gallery__thumbs {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--s1);
  scrollbar-width: thin;
}
.gallery__thumb {
  flex: 0 0 auto;
  width: 88px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  opacity: 0.6;
  scroll-snap-align: start;
  transition: opacity var(--t-base), border-color var(--t-base);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { opacity: 1; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Məzmun blokları — qutu yox, hairline və qızıl tire */
.block { padding-top: var(--s6); border-top: 1px solid var(--line); }
.block__title { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); font-size: var(--fs-lg); letter-spacing: -0.01em; }
.block__title::before { content: ""; width: 20px; height: 2px; background: var(--gold); flex: none; }

.specs { display: grid; grid-template-columns: 1fr; }
.specs__row {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.specs__row dt { color: var(--muted); font-weight: 500; }
.specs__row dd { display: flex; align-items: center; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

.detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) 0; font-size: var(--fs-xs); color: var(--muted); }
.detail__meta > span + span::before, .detail__meta > .detail__meta-link::before {
  content: "";
  display: inline-block;
  width: 1px; height: 0.85em;
  margin-inline: var(--s3);
  background: var(--line-strong);
  vertical-align: -0.08em;
}
.detail__meta-link { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 700; color: var(--ink-2); }
.detail__meta-link:hover { color: var(--ink); }

/* Sticky qiymət / əlaqə paneli */
.buybox {
  display: grid;
  gap: var(--s5);
  padding: var(--s6);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-md);
  background: var(--card-bg);
}
.buybox__label { margin-bottom: var(--s2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.buybox__note { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
.buybox__turbo { justify-self: start; }

.keyfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); border-top: 1px solid var(--line); }
.keyfacts > div { display: grid; gap: 2px; min-width: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.keyfacts dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.keyfacts dd { display: flex; align-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.trust { display: grid; gap: var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.trust li { display: flex; align-items: center; gap: 0.6em; }
.trust .ico { color: var(--gold-deep); }

/* Mobil yapışan zəng paneli */
.callbar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s3) var(--gutter) max(var(--s3), env(safe-area-inset-bottom));
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.callbar__actions { display: flex; gap: var(--s2); }
.callbar .btn { min-height: 44px; padding-inline: var(--s4); }

@media (max-width: 479.98px) { .callbar__hide-xs { display: none; } }
@media (min-width: 640px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s10); }
}
@media (min-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 1fr) 372px; gap: var(--s16); }
  .detail__side { position: sticky; top: calc(var(--header-h) + var(--s5)); }
  .detail-head__price, .callbar { display: none; }
}
@media (max-width: 1023.98px) { .buybox__price-group { display: none; } }

/* ---------- 9. Məzmun səhifələri ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__item { padding: var(--s6) var(--s4); }
.stats__item + .stats__item { border-left: 1px solid var(--line); }
.stats__item dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stats__item dd { margin-top: var(--s2); font-size: var(--fs-3xl); font-weight: 800; letter-spacing: var(--ls-display); line-height: 1; font-variant-numeric: tabular-nums; }
.stats__item span { display: block; margin-top: var(--s1); font-size: var(--fs-sm); color: var(--muted); }

.prose-grid { display: grid; gap: var(--s10); align-items: start; }
.prose { max-width: 64ch; }
.prose h2 { font-size: var(--fs-xl); letter-spacing: -0.015em; margin-block: var(--s8) var(--s4); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--s4); color: var(--ink-2); font-size: var(--fs-md); }
.prose p:last-child { margin-bottom: 0; }
.prose--desc { max-width: none; }
.prose--desc p { font-size: var(--fs-base); overflow-wrap: anywhere; }

.checklist { display: grid; gap: var(--s3); }
.checklist li { display: flex; align-items: flex-start; gap: var(--s3); font-weight: 600; color: var(--ink-2); }
.checklist .ico { color: var(--gold-deep); margin-top: 0.2em; }

.side-card { padding: var(--s8); border-radius: var(--r-md); background: var(--dark); color: var(--on-dark); }
.side-card__title { font-size: var(--fs-xl); color: var(--on-dark); letter-spacing: -0.015em; }
.side-card__text { margin-block: var(--s3) var(--s6); font-size: var(--fs-sm); color: var(--on-dark-2); }
.side-card__more { justify-self: start; margin-top: var(--s3); }

.features { display: grid; gap: 0; border-top: 1px solid var(--line); }
.feature { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.feature__num { display: block; margin-bottom: var(--s4); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.08em; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.feature h3 { font-size: var(--fs-lg); margin-bottom: var(--s2); letter-spacing: -0.01em; }
.feature p { color: var(--muted); font-size: var(--fs-sm); }

.cta-band { background: var(--dark); color: var(--on-dark); }
.cta-band__in { display: flex; flex-direction: column; gap: var(--s8); padding-block: var(--s16); }
.cta-band__title { color: var(--on-dark); font-size: var(--fs-2xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.cta-band__text { margin-top: var(--s3); color: var(--on-dark-2); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.contact-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.contact-card {
  display: grid;
  gap: var(--s1);
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-bg);
  color: var(--ink);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.contact-card__ico { width: 28px; height: 28px; margin-bottom: var(--s4); color: var(--ink); }
.contact-card__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.contact-card__value { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.contact-card__hint { font-size: var(--fs-sm); color: var(--muted); }

.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.step { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.step__num { display: block; margin-bottom: var(--s4); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.08em; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--s2); letter-spacing: -0.01em; }
.step p { font-size: var(--fs-sm); color: var(--muted); }

.status-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s4);
  padding-block: var(--s24);
}
.status-page__code {
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.status-page__rule { width: 48px; height: 2px; background: var(--gold); }
.status-page__title { font-size: var(--fs-3xl); letter-spacing: var(--ls-display); }
.status-page__text { max-width: 36rem; color: var(--muted); }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s3); }
.status-page__meta { margin-top: var(--s4); font-size: var(--fs-xs); color: var(--muted); }

@media (min-width: 640px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .cta-band__in { flex-direction: row; align-items: center; justify-content: space-between; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s10); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s10); }
}
@media (min-width: 900px) {
  .prose-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s20); }
}
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 10. Footer ---------- */
.site-footer {
  margin-top: auto;
  background: var(--dark);
  color: var(--on-dark-2);
  border-top: 1px solid var(--gold);
}
.site-footer__grid { display: grid; gap: var(--s10); padding-block: var(--s16) var(--s12); }
.site-footer__tagline { margin-top: var(--s5); max-width: 34rem; font-size: var(--fs-sm); }
.site-footer__title {
  margin-bottom: var(--s4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.site-footer__col { display: grid; gap: var(--s3); align-content: start; justify-items: start; font-size: var(--fs-sm); }
.site-footer__col a, .site-footer__col p { display: inline-flex; align-items: center; gap: 0.6em; color: var(--on-dark-2); transition: color var(--t-base); }
.site-footer__col a:hover { color: var(--on-dark); }
.site-footer__col .ico { color: var(--on-dark-3); }
.site-footer__text { display: block; max-width: 30rem; }
.site-footer__muted { color: var(--on-dark-3); }
.socials { display: flex; gap: var(--s2); margin-top: var(--s2); }
.socials__link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--dark-line);
  border-radius: var(--r-sm);
  color: var(--on-dark);
  transition: border-color var(--t-base);
}
.socials__link:hover { border-color: var(--gold); }
.socials__link .ico { width: 18px; height: 18px; color: var(--on-dark); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: var(--s5);
  border-top: 1px solid var(--dark-line);
  font-size: var(--fs-xs);
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 0.8fr 1.2fr; gap: var(--s12); } }

/* ---------- 11. Köməkçilər ---------- */
.js .img-lazy { opacity: 0; transition: opacity var(--t-slow); }
.js .img-lazy.is-loaded { opacity: 1; }

/* Skrollda yumşaq görünmə — yalnız IntersectionObserver varsa (html.io) */
.io .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow), transform var(--t-slow); }
.io .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 12. Responsiv ---------- */
@media (min-width: 768px) {
  .section { padding-block: var(--s20); }
  .section--tight { padding-block: var(--s10); }
  .section__title { font-size: var(--fs-3xl); }
}

@media (prefers-reduced-motion: reduce) {
  .io .reveal { opacity: 1; transform: none; }
  .card:hover, .contact-card:hover { transform: none; }
  .card:hover .card__media img { transform: none; }
}

/* ---------- 13. Tünd rejim — çevrilmiş deyil, düşünülmüş ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--n-900);
    --bg-soft: var(--n-900);
    --surface: var(--n-800);
    --surface-2: var(--n-700);
    --card-bg: var(--n-800);
    --ink: var(--n-50);
    --ink-2: var(--n-300);
    --muted: var(--n-400);
    --muted-2: var(--n-500);
    --line: var(--n-800);
    --line-strong: var(--n-700);
    --gold-deep: var(--brand-gold);
    --dark-2: var(--brand-ink);
    --glass: color-mix(in srgb, var(--n-900) 90%, transparent);
  }

  /* Loqo: tünd fonda U və yazı ağ, ox qızıl qalır */
  .logo { --logo-ink: var(--n-0); --logo-word: var(--n-0); }

  .card { border-color: var(--n-700); }
  .card:hover { border-color: var(--n-600); }
  .buybox, .contact-card, .chip { border-color: var(--n-700); }
  .card__cta { border-color: var(--n-600); }
  .section--tint { background: var(--n-900); box-shadow: inset 0 1px 0 var(--n-800), inset 0 -1px 0 var(--n-800); }
  .tag--sold { background: var(--n-700); border-color: var(--n-700); color: var(--n-300); }
  .status-page__code { color: var(--n-800); }
  .gallery__nav { background: var(--n-50); }
  .swatch { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--n-0) 22%, transparent); }
  select:disabled { background-color: var(--n-800); }
  .site-header.is-scrolled, body.nav-open .site-header { border-bottom-color: var(--n-800); }
}