/* Nazım Otomotiv
   Renkler tabeladan ve gece vitrininden: grafit tabela zemini, gümüş harfler,
   beyaz plakadaki kırmızı yazı, logodaki altın NB monogramı.
   Yazı: Krona One (tabeladaki geniş, tok harfler) + Public Sans (okunaklı gövde). */

:root {
  --night: #181B21;        /* tabela grafiti: header, hero, şasi bandı, footer */
  --silver: #E6E8EB;       /* tabeladaki gümüş harfler */
  --silver-2: #AEB4BC;     /* koyu zeminde ikincil metin */
  --plate: #FFFFFF;
  --plate-red: #C4161C;    /* yalnız "Orijinal ve yan sanayi" plakasının yazısı */
  --gold: #C9A35A;         /* NB monogramı: logo, sıradaki şasi hanesi, koyu zeminde odak */
  --alu-1: #E3E6EA;        /* şasi plakası alüminyumu */
  --alu-2: #C4C9D0;
  --wash: #F3F4F6;         /* açık bölümler */
  --ink: #181B21;
  --ink-2: #4B515A;
  --line: #D6DAE0;
  --wa: #1A7F45;           /* yalnız WhatsApp düğmeleri */
  --wa-dk: #146536;

  --f-head: "Krona One", "Arial Black", Arial, sans-serif;
  --f-body: "Public Sans", "Segoe UI", system-ui, sans-serif;

  --wrap: 1240px;
  --gut: 32px;
  --edge: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  --header-h: 76px;

  /* Hero ayarları: fotoğraf kırpımı ve yazı sütunu genişliği tek yerden */
  --hero-pos: 50% 34%;       /* masaüstü fotoğrafın odak noktası */
  --hero-pos-m: 50% 0%;      /* telefon kırpımı (hero-mobile.webp) */
  --hero-copy-w: clamp(500px, 43vw, 640px);
  --hero-fade: 26%;          /* fotoğrafın sol kenarının grafite erime genişliği */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.1875rem;          /* 19 px */
  line-height: 1.55;
  color: var(--ink);
  background: var(--plate);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
figure { margin: 0; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.site-header :focus-visible,
.hero :focus-visible,
.vin-band :focus-visible,
.site-footer :focus-visible,
.sticky-book :focus-visible,
.lightbox :focus-visible { outline-color: var(--gold); }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--plate); color: var(--ink); padding: 12px 18px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.ico { width: 22px; height: 22px; flex: none; }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px;
  border: 2px solid transparent; border-radius: 4px;
  font-family: var(--f-body); font-weight: 700; font-size: 1.1875rem; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--plate { background: var(--plate); color: var(--ink); }
.btn--plate:hover { background: var(--silver); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dk); }
.btn--line { border-color: rgba(230, 232, 235, .6); color: var(--silver); }
.btn--line:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #2C313A; }
.btn--line-dark { border-color: var(--ink); color: var(--ink); }
.btn--line-dark:hover { background: var(--ink); color: #fff; }

.text-link {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.text-link:hover { text-decoration-color: var(--gold); }

.h2 { font-family: var(--f-head); font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.18; color: var(--ink); text-wrap: balance; }
.h2--light { color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--night); color: var(--silver);
  border-bottom: 1px solid rgba(230, 232, 235, .08);
}
.site-header__in { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--silver); margin-right: auto; }
.brand__mark { width: auto; height: 48px; }
.brand__name { font-family: var(--f-head); font-size: 1.0625rem; letter-spacing: .02em; white-space: nowrap; }
.site-nav ul { display: flex; gap: 6px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  font-weight: 600; font-size: 1.0625rem; color: var(--silver); text-decoration: none;
}
.site-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold); }
.site-header__call { min-height: 48px; padding: 0 18px; font-size: 1.0625rem; }
.site-header__call .ico { width: 20px; height: 20px; }
.site-header__short { display: none; }

/* ---------- Hero: gece vitrini ---------- */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(620px, calc(100svh - var(--header-h)), 940px);
  background: var(--night); color: var(--silver);
}
.hero__photo {
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(var(--edge) + var(--hero-copy-w) - 40px);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos); }
.hero__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(24, 27, 33, .82) calc(var(--hero-fade) * .25), rgba(24, 27, 33, 0) var(--hero-fade)),
    linear-gradient(0deg, var(--night) 0%, rgba(24, 27, 33, 0) 16%);
}
.hero__copy {
  position: relative; z-index: 1;
  width: calc(var(--edge) + var(--hero-copy-w));
  padding: 64px 24px 72px var(--edge);
}
.hero__name {
  font-family: var(--f-head);
  font-size: clamp(3rem, 4.5vw, 5.25rem);
  line-height: 1.02; letter-spacing: .005em;
  color: var(--silver);
  text-shadow: 0 2px 0 #59606A, 0 3px 0 #3A3F47;   /* tabeladaki kabartma harflerin kenarı */
}
.hero__name span { display: block; }
.plate-sign {
  display: inline-block; margin-top: 24px;
  padding: 12px 18px 11px; border-radius: 3px;
  background: var(--plate); color: var(--plate-red);
  font-family: var(--f-head); font-size: clamp(.9375rem, 1.1vw, 1.1875rem); line-height: 1.2;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);
}
.hero__lead { margin-top: 26px; max-width: 30ch; font-size: clamp(1.3125rem, 1.55vw, 1.625rem); line-height: 1.35; font-weight: 500; color: #fff; }
.hero__place { margin-top: 10px; color: var(--silver-2); }
.nowrap { white-space: nowrap; }
.hero__phone {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 30px;
  min-height: 48px;
  font-family: var(--f-head); font-size: clamp(1.75rem, 2.35vw, 2.5rem); line-height: 1;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.hero__phone .ico { width: 30px; height: 30px; color: var(--gold); }
.hero__phone:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--gold); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.open-line { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 1.125rem; color: var(--silver-2); }
.open-line .dot { width: 11px; height: 11px; border-radius: 50%; background: #868C95; flex: none; }
.open-line.is-open .dot { background: #3CC273; box-shadow: 0 0 0 4px rgba(60, 194, 115, .2); }
.open-line--dark { color: var(--ink-2); }
.open-line--dark.is-open .dot { background: #1E9A52; box-shadow: 0 0 0 4px rgba(30, 154, 82, .16); }

/* ---------- Şasi bandı (imza öğe) ---------- */
.vin-band { position: relative; background: var(--night); color: var(--silver); padding: 92px 0 96px; }
.vin-band::before {   /* saçaktaki floresan: hero ile bant arasında tek ışık çizgisi */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255, 247, 230, 0), rgba(255, 247, 230, .9) 18%, rgba(255, 247, 230, .9) 82%, rgba(255, 247, 230, 0));
  box-shadow: 0 0 24px 3px rgba(255, 244, 220, .22);
}
.vin-band__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: end; margin-bottom: 44px; }
.vin-band__head p { color: var(--silver-2); font-size: 1.25rem; max-width: 46ch; }

.vin__label { display: block; margin-bottom: 12px; font-weight: 700; color: #fff; }
.vin__label span, .vin__part label span { font-weight: 400; color: var(--silver-2); }

.vin__plate {
  position: relative;
  padding: 22px 34px;
  border: 1px solid #8F96A0; border-radius: 6px;
  background: linear-gradient(180deg, var(--alu-1) 0%, #D5D9DE 55%, var(--alu-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(0, 0, 0, .08), 0 26px 50px -30px rgba(0, 0, 0, .9);
  cursor: text;
}
.vin__plate::before, .vin__plate::after {   /* perçinler */
  content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff 0, #B9BFC7 45%, #8A919B 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.vin__plate::before { left: 11px; }
.vin__plate::after { right: 11px; }
.vin__plate:focus-within { outline: 3px solid var(--gold); outline-offset: 5px; }
.vin__plate.is-error { border-color: #E5484D; outline: 3px solid #FF6B6F; outline-offset: 5px; }

.vin__input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  margin: 0; padding: 0 34px; border: 0; background: transparent;
  font-size: 16px; color: transparent; caret-color: transparent;
  opacity: 0; cursor: text;
}
.vin__cells { display: flex; gap: 20px; }
.vin__grp { display: flex; gap: 8px; flex: var(--n) 1 0; min-width: 0; }
.vin__cell {
  flex: 1 1 0; min-width: 0;
  display: grid; place-items: center;
  height: clamp(56px, 5.2vw, 80px);
  border-radius: 3px;
  background: rgba(255, 255, 255, .5);
  border-bottom: 3px solid #8E959F;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .12);
  font-family: var(--f-head); font-size: clamp(1.25rem, 2.3vw, 2.25rem); line-height: 1;
  color: var(--ink);
}
.vin__cell { position: relative; }
.vin__cell.is-zero::after {   /* sıfırı O harfinden ayırmak için ortasında nokta */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: .13em; height: .13em; margin: -.065em 0 0 -.065em; border-radius: 50%;
  background: currentColor; transform: translateY(var(--zero-y, 0));
}
.vin__cell.is-next { background: #fff; border-bottom: 4px solid var(--ink); }
.vin__cell.is-fixed { color: var(--plate-red); }

.vin__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 16px; }
.vin__status { color: #fff; }
.vin__status.is-ok::before { content: "✓"; display: inline-block; margin-right: 10px; color: #6FDC9C; font-weight: 800; }
.vin__status.is-error { color: #FF9EA0; font-weight: 700; }
.vin__count { flex: none; font-family: var(--f-head); font-size: 1.0625rem; color: var(--silver-2); }

.vin__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-top: 30px; }
.vin__part label { display: block; margin-bottom: 10px; font-weight: 700; color: #fff; }
.vin__part input {
  width: 100%; min-height: 62px; padding: 0 18px;
  border: 2px solid #fff; border-radius: 4px;
  background: #fff; color: var(--ink); font-size: 1.1875rem;
}
.vin__part input::placeholder { color: #6A707A; }
.vin__part input:focus-visible { outline-offset: 3px; }
.vin__send { min-height: 62px; padding: 0 32px; font-size: 1.25rem; }
.vin__send .ico { width: 24px; height: 24px; }
.vin__help { margin-top: 18px; color: var(--silver-2); }
.vin__help a { color: #fff; font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.vin__help a:hover { text-decoration-color: var(--gold); }

.makes { margin-top: 72px; padding-top: 36px; border-top: 1px solid rgba(230, 232, 235, .16); }
.makes__title { font-family: var(--f-body); font-weight: 700; font-size: 1.1875rem; color: var(--silver-2); }
.makes__list { display: flex; flex-wrap: wrap; gap: 10px 56px; margin-top: 12px; }
.makes__list li {
  font-family: var(--f-head); font-size: clamp(1.75rem, 3.1vw, 2.625rem); line-height: 1.25; color: #fff;
  border-bottom: 4px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.makes.has-match .makes__list li { color: #6F7680; }
.makes.has-match .makes__list li.is-match { color: #fff; border-bottom-color: var(--gold); }
.makes__more { margin-top: 16px; color: var(--silver-2); }

/* ---------- Parçalar ---------- */
.parts { background: var(--wash); padding: 96px 0 88px; }
.parts__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 44px; }
.parts__head p { font-size: 1.25rem; color: var(--ink-2); }
.parts__grid {
  --cols: 3; --gap-x: 32px;
  --col-w: calc((min(100vw, var(--wrap)) - 2 * var(--gut) - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 56px var(--gap-x);
}
.part--wide { grid-column: span 2; }
.part__photo {
  display: block; width: 100%; height: calc(var(--col-w) * 1.2);
  padding: 0; border: 0; background: #D9DCE0; overflow: hidden; cursor: zoom-in;
}
.part__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.part__text { padding-top: 20px; }
.part__name { font-family: var(--f-body); font-weight: 800; font-size: 1.4375rem; line-height: 1.25; }
.part__text p { margin-top: 6px; color: var(--ink-2); }
.part__text .part__brands { margin-top: 4px; color: var(--ink); font-weight: 700; }
.part__ask {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 14px; padding: 0 18px;
  border: 2px solid var(--ink); border-radius: 4px; background: transparent;
  font-weight: 700; font-size: 1.0625rem; cursor: pointer;
}
.part__ask:hover { background: var(--ink); color: #fff; }
.parts__links { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- Yorumlar ---------- */
.reviews { padding: 96px 0; background: #fff; }
.reviews__in { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 72px; }
.score { display: flex; align-items: baseline; margin-top: 22px; }
.score__num { font-family: var(--f-head); font-size: 6rem; line-height: 1; }
.score__of { margin-left: 10px; font-size: 1.5rem; color: var(--ink-2); }
.score__meta { margin-top: 10px; font-weight: 700; }
.stars { color: #A8761A; letter-spacing: .08em; margin-right: 6px; }
.reviews__score .text-link { margin-top: 8px; }
.reviews__quotes { display: grid; gap: 0; }
.quote { padding: 28px 0; border-top: 1px solid var(--line); }
.quote:first-child { padding-top: 0; border-top: 0; }
.quote blockquote { margin: 0; font-size: 1.25rem; line-height: 1.55; max-width: 62ch; }
.quote figcaption { margin-top: 10px; font-weight: 800; }

/* ---------- Konum ---------- */
.place { background: var(--wash); padding: 96px 0; }
.place__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.place__door { margin-top: 28px; font-family: var(--f-head); font-size: clamp(2.125rem, 3vw, 2.75rem); line-height: 1.1; white-space: nowrap; }
.place__site { margin-top: 12px; font-size: 1.375rem; font-weight: 700; }
.place__addr { color: var(--ink-2); }
.place__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hours { width: 100%; max-width: 460px; margin-top: 36px; border-collapse: collapse; }
.hours__cap { text-align: left; font-weight: 800; padding-bottom: 6px; }
.hours th, .hours td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 800; }
.hours tr.is-today th::after { content: " (bugün)"; font-weight: 400; color: var(--ink-2); }
.place .open-line { margin-top: 16px; }
.place__metro { margin-top: 26px; max-width: 40ch; }
.place__media { display: grid; gap: 22px; }
.place__front img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; }
.place__front figcaption { margin-top: 8px; font-size: 1.0625rem; color: var(--ink-2); }
.place__map iframe { display: block; width: 100%; height: 340px; border: 0; background: #E2E5E9; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--silver); padding: 64px 0 32px; }
.site-footer__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__mark { width: auto; height: 60px; }
.site-footer__name { margin-top: 14px; font-family: var(--f-head); font-size: 1.125rem; color: #fff; }
.site-footer__brand p:last-child { margin-top: 4px; color: var(--silver-2); }
.site-footer__h { font-family: var(--f-body); font-weight: 700; font-size: 1.0625rem; color: var(--silver-2); margin-bottom: 10px; }
.site-footer__col p + p { margin-top: 4px; }
.site-footer a { color: #fff; text-underline-offset: 4px; }
.site-footer .muted { color: var(--silver-2); }
.site-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  margin-top: 48px; padding-top: 22px; color: var(--silver-2); font-size: 1.0625rem;
  background: linear-gradient(rgba(230, 232, 235, .14), rgba(230, 232, 235, .14)) top center / calc(100% - 2 * var(--gut)) 1px no-repeat;
}
.site-footer__links { display: flex; gap: 24px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }

.sticky-book { display: none; }

/* ---------- Fotoğraf görüntüleyici ---------- */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(16, 18, 22, .96); color: #fff;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 82vh; object-fit: contain; }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 1.0625rem; color: var(--silver); padding-inline: 80px; }
.lightbox__btn {
  position: absolute; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .6); background: rgba(24, 27, 33, .6); color: #fff; cursor: pointer;
}
.lightbox__btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__btn:hover { background: #fff; color: var(--ink); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* ---------- Ara genişlikler ---------- */
@media (max-width: 1180px) {
  .site-nav a { padding: 0 9px; }
  .site-header__in { gap: 18px; }
}
@media (max-width: 1060px) {
  .site-nav { display: none; }
  .parts__grid { --gap-x: 24px; }
}

/* ---------- Telefon ve tablet ---------- */
@media (max-width: 899px) {
  :root { --gut: 16px; --header-h: 64px; }
  body { font-size: 1.125rem; }

  .brand { gap: 10px; }
  .brand__mark { height: 40px; }
  .brand__name { font-size: .875rem; }
  .site-header__call { padding: 0 16px; }
  .site-header__num { display: none; }
  .site-header__short { display: inline; }

  .hero { display: block; min-height: 0; }
  .hero__photo { position: relative; left: auto; width: 100%; height: min(72.9vw, 480px); }
  .hero__photo img { object-position: var(--hero-pos-m); }
  .hero__photo::after { background: linear-gradient(0deg, var(--night) 0%, rgba(24, 27, 33, 0) 22%); }
  .hero__copy { width: auto; padding: 4px var(--gut) 40px; margin-top: -10px; }
  .hero__name { font-size: clamp(2.375rem, 10.6vw, 3.75rem); }
  .plate-sign { margin-top: 16px; padding: 10px 14px 9px; font-size: .875rem; }
  .hero__lead { margin-top: 18px; font-size: 1.25rem; }
  .hero__place { margin-top: 6px; }
  .hero__phone { margin-top: 20px; font-size: clamp(1.5rem, 7vw, 2rem); gap: 12px; }
  .hero__phone .ico { width: 26px; height: 26px; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .hero__actions .btn { padding: 0 14px; }
  .hero__actions .btn--wa { grid-column: 1 / -1; order: -1; }
  .open-line { font-size: 1.0625rem; }

  .vin-band { padding: 56px 0 64px; }
  .vin-band__head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .vin-band__head p { font-size: 1.125rem; }
  .vin__plate { padding: 16px 22px; }
  .vin__plate::before { left: 6px; }
  .vin__plate::after { right: 6px; }
  .vin__input { padding: 0 22px; }
  .vin__cells { flex-wrap: wrap; gap: 8px 10px; }
  .vin__grp { gap: 5px; }
  .vin__cells { --cw: calc((100% - 7 * 5px - 10px - 1px) / 9); }
  .vin__grp--1 { flex: 0 0 calc(var(--cw) * 3 + 2 * 5px); }
  .vin__grp--2 { flex: 0 0 calc(var(--cw) * 6 + 5 * 5px); }
  .vin__grp--3 { flex: 0 0 calc(var(--cw) * 8 + 7 * 5px); }
  .vin__cell { height: 50px; font-size: 1.1875rem; border-bottom-width: 3px; }
  .vin__meta { margin-top: 12px; }
  .vin__count { display: none; }
  .vin__row { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .vin__send { width: 100%; }
  .makes { margin-top: 48px; padding-top: 28px; }
  .makes__list { gap: 4px 24px; }
  .makes__list li { font-size: clamp(1.5rem, 7vw, 2.125rem); }

  .parts { padding: 56px 0; }
  .parts__head { display: block; margin-bottom: 28px; }
  .parts__head p { margin-top: 8px; font-size: 1.125rem; }
  .parts__grid { --cols: 1; grid-template-columns: 1fr; gap: 40px; }
  .part--wide { grid-column: auto; }
  .part__photo { height: auto; aspect-ratio: 4 / 3; }
  .part__name { font-size: 1.3125rem; }
  .parts__links { margin-top: 40px; }

  .reviews { padding: 56px 0; }
  .reviews__in { grid-template-columns: 1fr; gap: 32px; }
  .score__num { font-size: 4.5rem; }
  .quote blockquote { font-size: 1.125rem; }

  .place { padding: 56px 0; }
  .place__in { grid-template-columns: 1fr; gap: 36px; }
  .place__door { white-space: normal; }
  .place__actions .btn { flex: 1 1 100%; }
  .place__map iframe { height: 300px; }

  .site-footer { padding: 48px 0 calc(28px + 80px); }
  .site-footer__in { grid-template-columns: 1fr; gap: 26px; }
  .site-footer__base { margin-top: 36px; }

  .sticky-book {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--night);
    border-top: 1px solid rgba(230, 232, 235, .14);
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .sticky-book.is-visible { transform: none; }
  .sticky-book .btn { flex: 1; min-height: 54px; font-size: 1.1875rem; }

  .lightbox__prev, .lightbox__next { top: auto; bottom: 64px; transform: none; }
  .lightbox__cap { bottom: 18px; padding-inline: 16px; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .hero__actions { grid-template-columns: repeat(3, auto); justify-content: start; }
  .hero__actions .btn--wa { grid-column: auto; order: 0; }
  .parts__grid { --cols: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
  .vin__row { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 359px) {
  .brand__name { display: none; }
  .vin__cell { height: 44px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}