@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --dark: #2e2d2d;
  --dark-soft: #3e3e3e;
  /* #37373a — фон панели формы в финальном призыве (rec1011001461),
     чуть светлее основного тёмного, отдельный оттенок из экспорта */
  --panel: #37373a;
  --accent: #ffdf3f;
  --white: #ffffff;
  --muted-bg: #efefef;
  --muted-text: #5f5f5f;
  /* У Tilda НЕ одна сетка на всю страницу: каждый Zero Block задаёт свою.
     Снято по координатам экспорта (left..right внутри блока) и подтверждено
     живым замером боевого сайта на 1440:
       1200 — преимущества (133..1293), рост, шаги, города, отзывы,
              заработки, «JET Ailesine», вакансия, FAQ, футер, реквизиты;
       1400 — герой (13..1413), контакты, статистика, финальный CTA.
     Поэтому по умолчанию 1200, а четыре широких блока получают
     .container--wide. Раньше здесь стояли глобальные 1400 — из-за этого
     все узкие блоки были шире оригинала. */
  --container: 1200px;
  --container-wide: 1400px;

  /* Радиусы сняты с экспорта поэлементно — одного значения на весь сайт у
     оригинала нет, и это было главной причиной «квадратности» копии:
       20px — карточки, панели, тёмные плашки (все .tn-atom карточек);
        6px — кнопки (.t-btnflex во всех блоках: шапка, города, вакансия);
        8px — иконки-плитки в карточках и кнопка внутри Zero-блока шагов;
       30px — «пилюли» Adım 1/2/3.
     Раньше всё рисовалось одним --radius: 16px, из-за чего кнопки были
     заметно круглее оригинальных, а карточки — заметно квадратнее. */
  --radius-btn: 6px;
  --radius-sm: 8px;
  --radius-pill: 30px;
  --radius: 20px;
  --gap: 24px;
  --border: #e0e0e0;
  --shadow: 0 2px 12px rgb(0 0 0 / 0.06);
  --gap-sm: 12px;
  --card-padding: 32px;
  /* внутренний отступ модульных панелей (контент на left=82 при панели left=20) */
  --panel-padding: 62px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Страховка от горизонтальной прокрутки: на странице есть элементы, которые
     в оригинале намеренно выходят за край своего блока (монетки в карточке
     преимуществ). overflow-x: clip, а не hidden — hidden на body ломает
     position: sticky у шапки, clip обрезает и не создаёт скролл-контейнер. */
  overflow-x: clip;
  font-family: 'Manrope', Arial, sans-serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.5;
}

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}
/* Блоки с сеткой 1400 в оригинале: герой, контакты, статистика, финальный CTA. */
.container--wide { width: min(100% - 32px, var(--container-wide)); }

.section { padding: 64px 0; }

.btn {
  display: inline-block;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: var(--dark);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { filter: brightness(0.95); }
.btn:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

/* Инвертированная кнопка: тёмная с белым текстом, на наведении становится
   обычной жёлтой. В оригинале так оформлены ДВЕ кнопки — «Beni Arayın» в
   шапке (#rec1015338766 .t-btnflex: color #ffffff / background #2e2d2d,
   hover — color #2e2d2d / background #ffdf3f) и «Detaylı Bilgi» в блоке
   вакансии. Запись 15 в docs/visual-gaps.md отказывалась заводить модификатор
   «ради одной кнопки» — кнопки оказалось две, и обе теряли инверсию. */
.btn--invert { background: var(--dark); color: var(--white); }
.btn--invert:hover { background: var(--accent); color: var(--dark); filter: none; }

/* Контурная кнопка — для второстепенного действия рядом с основным (вход в
   кабинет водителя в шапке при жёлтой/тёмной кнопке заявки). Рамка задана
   внутренней тенью, а не border: border добавил бы 4px к габаритам, и кнопка
   встала бы на 2px выше соседней в одном flex-ряду. */
.btn--ghost {
  background: transparent;
  color: var(--dark);
  box-shadow: inset 0 0 0 2px var(--dark);
}
.btn--ghost:hover { background: var(--dark); color: var(--white); filter: none; }

/* Насыщенность из оригинала: заголовки блоков 600, заголовки карточек 500.
   Браузерный по умолчанию для h1-h3 — 700, из-за чего жирным выглядело почти
   всё подряд и текст «кричал» сильнее оригинала. */
h1 { font-size: clamp(28px, 5vw, 56px); line-height: 1.15; margin: 0 0 24px; font-weight: 600; }
/* 46px — размер заголовков блоков в экспорте (fs=46px у всех h2-элементов
   Zero-блоков), у нас потолок стоял на 40px. */
h2 { font-size: clamp(24px, 3.5vw, 46px); line-height: 1.2; margin: 0 0 32px; font-weight: 600; }
h3 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; font-weight: 500; }
p { margin: 0 0 16px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

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

@media (max-width: 768px) {
  .section { padding: 40px 0; }
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 12px 0;
}
.header__logo img { width: 60px; height: 60px; }
/* На десктопе «Beni Arayın» стоит отдельной кнопкой справа, поэтому её копия
   внутри меню (нужная только внутри бургера) скрыта. Оригинал решает это тем же
   способом — держит для мобильного отдельный экземпляр меню целиком. */
.header__nav-cta { display: none; }
.header__nav-cab { display: none; }

/* Две кнопки в шапке при среднем экране складывались с меню в одну тесную
   строку. Кабинет — второстепенный, поэтому ужимается он, а не заявка. */
@media (max-width: 1100px) {
  .header__cab { padding-inline: 20px; }
}

/* Меню по центру шапки, как в оригинале (первый пункт начинается на x=524
   при контейнере 1400), а не прижато вправо: auto с обеих сторон. */
.header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-inline: auto;
}
.header__nav a { text-decoration: none; font-weight: 700; }
.header__nav a:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

.hero { background: var(--white); }
/* Пропорции из экспорта, а не 50/50: тёмная плашка 906px (left=20) и фото
   474px (left=946), между ними 20px — в сумме ровно 1400. При 50/50 плашка
   получалась 588px и заголовок ломался на 4 строки вместо оригинальных двух. */
/* В оригинале тёмная плашка и фото первого экрана одинаковой высоты (906x600
   и 474x600) и начинаются на одном уровне — сразу под шапкой. У нас стояло
   align-items:center, из-за чего фото уезжало выше плашки и над ней зияла
   белая полоса. stretch выравнивает обе колонки по высоте. */
.hero__inner {
  display: grid;
  grid-template-columns: 906fr 474fr;
  align-items: stretch;
  gap: 20px;
}
.hero__media { display: flex; }
.hero__media img { height: 100%; }
/* В оригинале текст первого экрана лежит на тёмной плашке #2e2d2d поверх белой секции
   (docs/visual-gaps.md, п.3) — воспроизводим это как фон+паддинг блока, а не как
   отдельный Zero Block с координатами. */
.hero__content {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 64px 56px;
}
.hero__accent { color: var(--accent); }
.hero__lead { font-size: 18px; color: rgb(255 255 255 / 0.75); margin: 0 0 32px; }
.hero__actions { display: flex; gap: var(--gap); flex-wrap: wrap; }
/* «Ara» (tel:) в оригинале — мобильный вариант кнопки: на десктопе Tilda
   уводит её за пределы артборда (top=-189, тот же приём art-direction, что
   и с картинками), и виден только «Başvuru Yap». Повторяем это медиазапросом
   вместо отрицательных координат. */
.hero__call { display: none; }
.hero__media img {
  border-radius: var(--radius);
  width: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  /* Без JS бургер не работает, поэтому меню прячется только когда JS
     реально загрузился (класс .js ставит app.js первой строкой). Без .js
     навигация остаётся обычным видимым рядом ссылок.
     САМО скрытие задано ниже, в блоке анимации панели: там вместо
     display:none используются прозрачность и высота, которые можно
     анимировать. Держать здесь ещё и display:none нельзя — он бы
     переопределялся ниже и только путал. */
  .header__inner { justify-content: space-between; }

  /* В мобильной шапке оригинала кнопки «Beni Arayın» нет — только лого и
     бургер (проверено живым замером на боевом сайте при 606px: оба
     экземпляра кнопки имеют нулевой размер и скрытого предка). Сам призыв
     не теряется: он переезжает внутрь бургер-меню. */
  .header > .container > .btn--invert { display: none; }
  .js .header__nav .header__nav-cta { display: inline-block; }
  .header > .container > .header__cab { display: none; }
  /* Без префикса .js, в отличие от строки выше: «Beni Arayın» открывает попап
     и без скрипта бесполезна, а кабинет — обычная ссылка, она обязана
     работать и при отключённом JS (тогда меню на мобильном просто видимый
     ряд ссылок, а не бургер). */
  .header__nav .header__nav-cab { display: inline-block; }

  /* Мобильный первый экран в оригинале (брейкпоинт 480): фото 460x600 на
     top=70 во всю ширину, тёмная панель 460x359 на top=426 — то есть она
     НАЕЗЖАЕТ на фото снизу примерно на 244px (53% от ширины). Текст в панели
     выровнен ПО ЛЕВОМУ краю, а не по центру. Раньше у нас фото сжималось до
     320px по центру, текст центрировался, наложения не было вовсе.
     Отрицательный margin в процентах считается от ШИРИНЫ контейнера — именно
     поэтому 53% держит пропорцию наложения на любой ширине экрана. */
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__content {
    padding: 32px 24px;
    position: relative;
    z-index: 1;
    margin-top: -53%;
  }
  .hero__actions { justify-content: flex-start; }
  .hero__call { display: inline-block; }
  .hero__media { order: -1; max-width: none; margin-inline: 0; }
  /* На мобильном высоту диктует пропорция фото, а не соседняя колонка,
     поэтому height:100% с десктопа здесь снимаем. */
  .hero__media { display: block; }
  .hero__media img { aspect-ratio: 460 / 600; height: auto; }
}

.cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: var(--muted-bg);
  /* Карточка ЗАДАЁТ свой цвет текста, а не наследует его от родителя. Иначе
     светлая карточка внутри тёмной панели (например «150.000+» в статистике
     или плашка приложения в футере) получала белый текст на светлом фоне и
     становилась нечитаемой. В оригинале у неё текст #2e2d2d — проверено
     замером живой страницы; белый только у тёмных карточек, и его ставят
     соответствующие модификаторы ниже. */
  color: var(--dark);
  border-radius: var(--radius);
  padding: var(--card-padding);
}
.card p { margin: 0; color: var(--muted-text); }
/* 24px — размер заголовка карточки в оригинале (t778__title). Базовый h3 у нас
   20px, из-за чего названия городов и вакансий выглядели мельче оригинала. */
.card h3 { font-size: 24px; line-height: 1.25; font-weight: 500; }
/* Иконка-плитка: в оригинале 70x70 со скруглением 8px (тёмный квадрат с жёлтым
   значком нарисован внутри самого SVG). У нас стояло 56x56 без скругления. */
.card__icon { display: block; margin-bottom: 16px; width: 70px; height: 70px; border-radius: var(--radius-sm); }

/* Третья карточка преимуществ («7/24 destek!») в оригинале ТЁМНАЯ:
   #rec1010527116 elem 1746449593257 -> background-color #2e2d2d, текст #ffffff.
   У нас она была светло-серой, как две другие. */
.card--dark { background: var(--dark); color: var(--white); }
.card--dark p { color: rgb(255 255 255 / 0.8); }

/* Текст карточек преимуществ в оригинале 24px и одного размера у заголовка и
   подписи (это один текстовый элемент fs=24px, не пара «жирный заголовок +
   мелкая подпись»). Внутренний отступ карточки — 30px (пилюля/иконка стоит
   на left=49 при карточке left=20). */
.cards--advant .card { padding: 30px; }
.cards--advant .card h3 { font-size: 24px; font-weight: 500; margin: 0 0 4px; }
.cards--advant .card p { font-size: 24px; line-height: 1.3; }
/* Иллюстрации карточек преимуществ сильно отличаются по пропорциям (от узких полос до
   почти квадратного мокапа телефона) — ограничиваем высоту и вписываем без обрезки,
   чтобы карточки в одном ряду не расползались по высоте. */
.card__illustration {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  margin-top: 24px;
}
.card__illustration + .card__illustration { margin-top: 12px; }

/* Карточки преимуществ в оригинале — 373x500 при сетке 1200, и внутри второй
   карточки лежит композиция из трёх картинок с привязкой к УГЛАМ, а не в
   потоке (координаты из экспорта, относительно карточки left=413 top=366):
     Frame-1948759086.webp  115x87   -> верхний правый угол (заподлицо сверху)
     Frame-1948759087.webp  119x116  -> нижний левый угол  (заподлицо снизу)
     Img_3-3B-_1_.webp      216x239  -> низ, отступ справа 28px
   Раньше мокап телефона растягивался на всю ширину карточки в потоке, а два
   бейджа не были перенесены вовсе (числились «осознанно опущенными»).
   Задаём в процентах от карточки, чтобы композиция пережила смену ширины. */
/* overflow НЕ скрываем: в оригинале монетки намеренно выходят за край карточки
   (на мобильном 480 верхняя занимает left=396..511 при карточке 10..470, нижняя
   уходит на 19px ниже её низа). Обрезка их бы срезала. */
.cards--advant .card { position: relative; }
.cards--advant .card:has(.card__badge) { min-height: 500px; }
.card__badge { position: absolute; width: 31%; height: auto; }
.card__badge--tr { top: 0; right: 0; }
.card__badge--bl { bottom: 0; left: 0; }
.card__illustration--phone {
  position: absolute;
  bottom: 0;
  right: 7.5%;
  width: 58%;
  max-height: none;
  margin: 0;
}

@media (max-width: 768px) {
  /* На мобильном в оригинале композиция сохраняется целиком, а не упрощается:
     карточка 460x320, монетки на своих углах и с тем же выходом за край,
     мокап телефона 126x138 у нижнего края — top=825 при низе карточки 963,
     то есть ВСТЫК, без отступа снизу. Раньше здесь монетки прятались, а мокап
     выкидывался в поток с отступом — из-за этого блок терял вид оригинала. */
  .cards--advant .card:has(.card__badge) { min-height: 320px; }
  .card__illustration--phone { width: 27%; right: 6.5%; }
}

.section__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.section__heading h2 { margin-bottom: 0; }
.section__badges { display: flex; gap: var(--gap-sm); flex-shrink: 0; }
.section__badges img { width: 48px; height: 48px; border-radius: 12px; }

@media (max-width: 768px) {
  .section__badges img { width: 32px; height: 32px; }
}

/* Ровно 3 карточки в ряд, как в оригинале: у блока t778 стоит
   data-blocks-per-row="3", и живой замер на боевом сайте это подтверждает —
   6 карточек лежат двумя рядами по три (y=140/140/140, 382/382/382), ширина
   карточки 360 при контейнере 1400. Автосетка auto-fit давала 4+2 и ломала
   ритм; фиксируем три колонки и разворачиваем в 2 и 1 на узких ширинах. */
.cards--cities { grid-template-columns: repeat(3, 1fr); }
.cards--cities .card { display: flex; flex-direction: column; align-items: stretch; }
/* Кнопка занимает всю ширину карточки (в оригинале 300 при карточке 360 —
   это ширина за вычетом внутренних отступов), а не ужимается по тексту. */
.cards--cities .btn { width: 100%; margin-top: auto; text-align: center; }

/* «Yakında Hizmete Açılacak» в оригинале — обычная ЖЁЛТАЯ плашка, просто не
   ссылка (в разметке это <div>, а не <a>): проверено живым замером —
   background rgb(255,223,63), тот же, что у активной «Başvuru Yap».
   Поэтому модификатор гасит только интерактивность, а не цвет: белая заливка,
   которая была здесь раньше, оригиналу не соответствовала. */
.btn--disabled { cursor: default; }
.btn--disabled:hover { filter: none; }

@media (max-width: 1100px) {
  .cards--cities { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cards--cities { grid-template-columns: 1fr; }
}

.cards--steps {
  grid-template-columns: repeat(3, 1fr);
}
.step {
  display: flex;
  flex-direction: column;
}
/* .step p наследует цвет от самой карточки (color: inherit), а не задаёт его жёстко:
   у карточек «Adım 1/2» это обычный тёмный текст (наследуется от body), у «Adım 3» —
   белый, потому что эта карточка получает тёмную плашку .step--dark (см. ниже), как
   и в оригинале, где текст шага 3 лежал на тёмной подложке #2e2d2d (docs/visual-gaps.md,
   п.5). Не хардкодь здесь конкретный цвет — сломаешь либо читаемость, либо соответствие
   оригиналу. */
.step p { color: inherit; }
/* Текст шага — 24px, как в карточках преимуществ (в экспорте у обоих блоков
   fs=24px); раньше наследовался базовый 16px. */
.step p { font-size: 24px; line-height: 1.3; }

/* Иллюстрация «Adım 2» в оригинале НЕ на всю ширину: 176x202 при карточке 373,
   прижата к правому краю с тем же отступом 30px (left=580 при карточке 413..786).
   Раньше растягивалась на всю ширину и вставала по центру. */
/* Иллюстрация шага в оригинале доходит до НИЖНЕГО края карточки: для «Adım 2»
   top=298 + высота 202 = 500 = низ карточки. У нас она останавливалась за
   32px до края (внутренний отступ карточки) и выглядела ужатой. Вытягиваем её
   за паддинг отрицательным нижним отступом — тем же приёмом, что и карта в
   «Adım 3». Ширина 47% — тоже из экспорта (176 при карточке 373). */
.step__illustration {
  display: block;
  /* 56%, а не 47%: 47% — это доля от ширины КАРТОЧКИ в оригинале (176 при 373),
     а width здесь считается от её КОНТЕНТА, то есть уже без внутренних отступов.
     176 / (373 - 2*30) = 56%. Со старым числом картинка выходила заметно мельче
     оригинальной. */
  width: 56%;
  height: auto;
  object-fit: contain;
  margin-top: auto;
  margin-left: auto;
  margin-bottom: calc(-1 * var(--card-padding));
  padding-top: 16px;
}
.step--dark {
  background: var(--dark);
  color: var(--white);
}
/* Карта в оригинале заполняет нижнюю часть тёмной карточки «встык», без внутреннего
   отступа — тянем иллюстрацию за края паддинга карточки вместо абсолютных координат.
   Выражено через --card-padding (не хардкод 32px/64px), чтобы при изменении паддинга
   .card карта осталась заподлицо с краями, а не пробила невидимую щель. */
/* Карта в «Adım 3» занимает низ карточки ЦЕЛИКОМ, встык к краям: в экспорте
   374x264 при карточке 374x500 (left совпадает с картой, 236+264 = 500 = низ
   карточки). Своя пропорция файла (289x207) даёт при ширине 374 высоту ~268 —
   то есть кроп не нужен, картинка ложится один в один. Раньше стоял
   max-height:160px + object-fit:cover, из-за чего карта обрезалась и
   наезжала на текст. */
.step--dark .step__illustration--map {
  width: calc(100% + 2 * var(--card-padding));
  /* Без max-width:none глобальное правило img { max-width: 100% } обрезало
     карту по ширине КОНТЕНТА карточки (320 вместо 384) — она переставала
     доходить до краёв и выглядела сжатой. */
  max-width: none;
  max-height: none;
  height: auto;
  object-fit: contain;
  margin: auto calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
  padding-top: 16px;
  border-radius: 0 0 var(--radius) var(--radius);
}
/* «Adım 1/2/3» — в оригинале это НАСТОЯЩИЙ текст в кнопкоподобной плашке
   90x40, скругление 30px, шрифт 18px, а не жёлтый кружок с номером из
   CSS-счётчика, как было у нас (номера как текста на странице не было вовсе).
   Цвета из экспорта: Adım 1 и Adım 2 — тёмные с белым текстом, Adım 3 —
   ЖЁЛТАЯ с тёмным текстом (она лежит на тёмной карточке). */
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 90px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
}
.step--dark .step__num { background: var(--accent); color: var(--dark); }
.step .btn { margin-top: auto; border-radius: var(--radius-sm); text-align: center; }

/* Лесенка: в оригинале три карточки выровнены по НИЖНЕМУ краю и растут по
   высоте слева направо — top/height = 226/275, 90/410, 0/500, то есть все
   заканчиваются на ~500. Раньше у нас это был обычный ряд одинаковых карточек. */
.cards--steps { align-items: end; }
.cards--steps .step:nth-child(1) { min-height: 275px; }
.cards--steps .step:nth-child(2) { min-height: 410px; }
.cards--steps .step:nth-child(3) { min-height: 500px; }

@media (max-width: 768px) {
  /* На узкой ширине карточки идут в столбик — лесенка теряет смысл и только
     оставляет пустоты, поэтому высоты сбрасываем. */
  /* ГЛАВНАЯ причина и мелкоты, и горизонтального скролла на телефоне:
     .cards--steps жёстко ставил repeat(3, 1fr) и мобильного сброса не имел.
     На 390px это три колонки по ~118px, тогда как одна пилюля «Adım 1» —
     90px плюс 60px внутренних отступов карточки. Содержимое не влезало и
     распирало страницу вширь. Шаги идут в столбик, лесенка снимается. */
  .cards--steps { grid-template-columns: 1fr; align-items: stretch; }
  /* В столбик карточка шага перестаёт быть высокой, и кнопка прилипала к
     тексту вплотную — в оригинале между ними заметный воздух. */
  .step p { margin-bottom: 24px; }
  .step .btn { margin-top: 8px; }
  .cards--steps .step:nth-child(1),
  .cards--steps .step:nth-child(2),
  .cards--steps .step:nth-child(3) { min-height: 0; }
  /* Иллюстрации шагов на десктопе занимают 47% ширины карточки; в столбик
     это превращается в марку размером с ноготь — на мобильном отдаём им
     нормальный размер. */
  /* В оригинале на мобильном иллюстрация шага занимает почти всю ширину
     карточки, а не треть — 70% всё ещё смотрелись маркой. */
  .step__illustration { width: 88%; margin-inline: auto; }
}

.contacts { display: grid; gap: var(--gap-sm); }
.contacts a { display: inline-block; padding: 10px 0; }
.contacts li { display: flex; align-items: center; gap: var(--gap-sm); }
/* Иконки контактов в оригинале 63x63 (замер живой страницы), у нас были 37x37 —
   визуально это совсем другой блок. Скругление зашито внутрь самого photo.svg,
   поэтому здесь только размер и защита от сжатия флексом. */
.contacts__icon { flex-shrink: 0; width: 63px; height: 63px; border-radius: var(--radius-sm); }

@media (max-width: 768px) {
  .contacts__icon { width: 48px; height: 48px; }
}

/* Фоновая карта Турции — лёгкая декоративная подложка (docs/visual-gaps.md, п.5).
   Кладём картинкой с loading="lazy" внутри относительно спозиционированной секции
   вместо background-image, чтобы браузер не грузил её раньше, чем нужно. */
/* Контакты — такая же панель, но светлая: #efefef, скругление 20px, на белом
   фоне страницы (а не заливка секции во всю ширину, как было). */
.contact__inner {
  position: relative;
  overflow: hidden;
  background: var(--muted-bg);
  border-radius: var(--radius);
  padding: 60px var(--panel-padding);
}
.contact__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--gap);
}
.contact__media img {
  border-radius: var(--radius);
  width: 100%;
  /* Пропорция самой фотографии — держим её в CSS, чтобы место под картинку
     резервировалось до загрузки (она lazy). При замене фото обновлять здесь. */
  aspect-ratio: 1322 / 1190;
  object-fit: cover;
}

@media (max-width: 768px) {
  .contact__inner { grid-template-columns: 1fr; }
  .contact__media { order: -1; max-width: 320px; margin-inline: auto; }
}

/* Отзывы: горизонтальная лента видео-отзывов водителей (в оригинале — Zero Block со
   ScrollBooster-драгом; здесь — обычный overflow-x: auto со scroll-snap, без JS).
   preload="none" у каждого <video> — так плеер не тянет ни байта, пока пользователь
   сам не нажмёт play (см. docs/visual-gaps.md о весе видео). */
.reviews__scroll {
  position: relative;
}
/* Без drag-скролла из оригинала и без JS-интерактивности (она — задача 9) человек на
   десктопе видит 3 видео из 9 и не понимает, что лента вообще прокручивается: колесо
   мыши крутит overflow-x только с зажатым Shift. Затухание у правого края — сигнал
   «здесь есть продолжение», не требующий ни одной строки JS. */
.reviews__scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 8px;
  width: 56px;
  background: linear-gradient(to right, rgb(255 255 255 / 0), var(--white));
  pointer-events: none;
}
.reviews__list {
  display: flex;
  gap: var(--gap-sm);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.reviews__item {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
}
.reviews__item video {
  display: block;
  width: 100%;
  aspect-ratio: 374 / 500;
  border-radius: var(--radius);
  background: var(--muted-bg);
  object-fit: cover;
}

@media (max-width: 768px) {
  .reviews__item { width: 170px; }
}

/* «Sürücülerin Gerçek Kazançları» — сам экспорт не содержит цифр отдельным текстом,
   суммы заработка впечатаны в скриншот приложения (docs/visual-gaps.md). */
.earnings__photo {
  border-radius: var(--radius);
  width: 100%;
  margin-top: 8px;
}

/* Блок статистики компании лежит на сплошной тёмной секции (в оригинале — Zero Block
   с фоном #2e2d2d почти на всю ширину артборда) — воспроизводим как модификатор секции,
   а не как вложенную плашку с координатами. */
/* МОДУЛЬНОСТЬ. В оригинале тёмные и серые блоки — не полосы во всю ширину
   экрана, а СКРУГЛЁННЫЕ ПАНЕЛИ на белом фоне страницы: у каждой записи
   data-bg-color нет (то есть фон страницы белый), а внутри лежит shape
   шириной 1400 с отступом left=20 и border-radius 20px:
     статистика     1400x809  #2e2d2d  r20
     финальный CTA  1400x640  #2e2d2d  r20
     контакты       1400x600  #efefef  r20
     футер          100%x926  #2e2d2d  r20 20 0 0 (скруглён только сверху)
   Внутренний отступ панели — 62px (контент начинается на left=82 при панели
   на left=20). Раньше это было сделано модификатором секции со сплошной
   заливкой на всю ширину — блоки сливались в одну тёмную массу, и
   модульного ритма оригинала не получалось. */
.section--dark { color: inherit; }
.section--dark > .container {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 60px var(--panel-padding);
}
/* Позиции заданы ЯВНО. После того как фото вынесли из .stats__content (нужно
   для наложения на мобильном), автоматическое размещение расставило элементы
   не так: карточки занимали только первую строку, а фото падало во вторую и
   между заголовком и фото зияла дыра во всю высоту блока.
   В оригинале: заголовок сверху слева, фото под ним, карточки справа во всю
   высоту — это и записано ниже. */
/* Раскладка из оригинала: заголовок с подзаголовком идут СВЕРХУ на всю ширину
   панели, а под ними одной строкой — фото слева и карточки справа, причём
   одинаковой высоты (в экспорте фото 680x492 на top=377; карточки занимают ту
   же полосу). Раньше карточки начинались на уровне заголовка, а фото падало
   ниже — из-за этого справа снизу оставалась пустая тёмная зона.
   Пропорция колонок 680:576 — из ширины панели 1400 за вычетом полей и зазора. */
.stats__inner {
  display: grid;
  grid-template-columns: 680fr 576fr;
  grid-template-rows: auto auto;
  gap: var(--gap);
  align-items: stretch;
}
.stats__content { grid-column: 1 / -1; grid-row: 1; }
.stats__photo { grid-column: 1; grid-row: 2; height: 100%; }
/* Карточки занимают ту же высоту, что и фотография слева: строки грида тянутся
   поровну (1fr 1fr), а сам блок растягивается по высоте строки. Раньше блок
   заканчивался выше фото, и справа снизу оставалась пустая тёмная полоса. */
.cards--stats {
  grid-column: 2;
  grid-row: 2;
  grid-template-rows: 1fr 1fr;
  align-content: stretch;
  height: 100%;
}
.stats__content .section__heading { margin-bottom: 16px; }
.stats__photo {
  border-radius: var(--radius);
  width: 100%;
  /* Отступ от заголовка даёт сам grid-gap — свой margin здесь его удваивал. */
  object-fit: cover;
}
.cards--stats {
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}
/* Числа вроде «150.000+» не переносятся по словам — без min-width: 0 грид-колонка
   1fr не сжимается меньше min-content этой строки и на узких экранах раздвигает
   контейнер (см. цифры, а не просто «карточка стала теснее» — это горизонтальный
   скролл страницы). */
.cards--stats .card { min-width: 0; }
.cards--stats b {
  display: block;
  font-size: clamp(22px, 5vw, 36px);
  margin-bottom: 8px;
  overflow-wrap: break-word;
}
/* .card по умолчанию — светлый фон (var(--muted-bg)), это ровно карточка
   «150.000+ başarıyla tamamlanan sipariş!» без модификатора. Тёмная и акцентная —
   модификаторы поверх, без параллельных классов. */
/* Статистика использует ДРУГОЙ тёмный оттенок, чем карточка преимуществ:
   в экспорте у карточек-цифр фон #3e3e3e (--dark-soft), а у «7/24 destek!» —
   #2e2d2d (--dark). Раньше оба модификатора назывались .card--dark и
   переопределяли друг друга, из-за чего тёмная карточка преимуществ
   получала оттенок статистики. */
.card--dark-soft { background: var(--dark-soft); color: var(--white); }
.card--dark-soft p { color: rgb(255 255 255 / 0.7); }
.card--accent { background: var(--accent); color: var(--dark); }
.card--accent p { color: var(--dark); }

@media (max-width: 768px) {
  .stats__inner { grid-template-columns: 1fr; }
  .cards--stats { grid-template-columns: repeat(2, 1fr); gap: var(--gap-sm); }
  .cards--stats .card { padding: 20px; }
}

/* Вакансия: в экспорте это одна карточка (заголовок вакансии + описание + кнопка),
   без отдельного заголовка секции — заголовком служит само название вакансии.
   Кнопка «Detaylı Bilgi» в оригинале была тёмной с жёлтым hover (инверсия обычной
   .btn) — не стали заводить отдельный модификатор ради одной кнопки на сайте,
   переиспользуем обычный .btn, как и везде. */
.vacancy .card .btn { margin-top: 8px; }

/* FAQ — на нативных <details>/<summary>, аккордеон работает без единой строчки JS.
   Разметка t668 в экспорте — обычный список, не Zero Block, поэтому здесь нет
   ловушки координат: порядок вопросов в DOM совпадает с визуальным. */
.faq { display: grid; gap: var(--gap-sm); }
.faq__item {
  background: var(--muted-bg);
  border-radius: var(--radius);
  padding: var(--card-padding);
}
.faq__item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
  margin: 16px 0 0;
  color: var(--muted-text);
}

@media (max-width: 768px) {
  .faq__item { padding: 20px; }
}

/* Финальный призыв, блок rec1011001461. Порядок и иерархия восстановлены по
   координатам и размерам шрифта из экспорта, а не по DOM (та же ловушка, что
   в шагах и футере):
     Kayıt Formu            top=180 left=82  46px  — заголовок всего блока;
     фото                   top=285 left=82  628x415 — СЛЕВА;
     панель формы  #37373a  top=285 left=730 629x415 — СПРАВА;
     Şimdi Katılın, Kazanın! top=335 left=770 28px  — заголовок ВНУТРИ панели.
   То есть «Şimdi Katılın, Kazanın!» — не заголовок секции (как было у нас
   раньше), а подзаголовок панели формы: он вдвое мельче «Kayıt Formu».
   Сам блок — тёмная плашка #2e2d2d 1400x640 со скруглением 20px, поверх неё
   декоративная текстура Clip_path_group_1.svg (прозрачность 0.2 уже внутри
   самого файла, поэтому накладываем как есть, без opacity в CSS). */
.cta { position: relative; }
/* Панель финального призыва обрезает декоративный фон своим скруглением —
   без overflow:hidden clip_path вылезал бы за скруглённые углы. */
.cta > .container { overflow: hidden; }
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.cta > .container { position: relative; }
/* Содержимое поднимается над декоративным фоном. Селектор по КЛАССАМ, а не по
   «прямым детям контейнера»: после того как содержимое завернули в
   .contact__body / .stats__body, правило «> *» перестало на него попадать —
   и карта Турции начала рисоваться поверх заголовка и текста. */
.cta__title,
.cta__inner,
.contact__content,
.contact__media,
.contact__body { position: relative; z-index: 1; }
.cta__title { font-size: clamp(28px, 4vw, 46px); }
.cta__subtitle { font-size: clamp(20px, 2.2vw, 28px); margin: 0 0 24px; }

.section--dark .cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--gap);
}
.cta__media {
  border-radius: var(--radius);
  width: 100%;
  height: 100%;
  aspect-ratio: 628 / 415;
  object-fit: cover;
  object-position: center top;
}
.cta__panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 32px;
}

@media (max-width: 768px) {
  .section--dark .cta__inner { grid-template-columns: 1fr; }
  /* Пропорция — родная для фотографии (1322x1190), а не десктопные 628/415.
     С десктопным кропом на телефоне от кадра оставалась узкая полоса: сначала
     object-fit срезал треть высоты, а потом панель «Kayıt Formu» наезжала
     сверху ещё на 16% ширины, и водителя было почти не видно. */
  .cta__media { max-width: 320px; margin-inline: auto; aspect-ratio: 1322 / 1190; }
  .cta__panel { padding: 24px; }
}

/* Футер: тёмная плашка на всю ширину со скруглением только сверху (в оригинале —
   Zero Block с border-radius:20px 20px 0 0), кнопки контактов — самодостаточные
   SVG-картинки без текста в HTML (текст нарисован векторными путями внутри самого
   файла — в экспорте нет ни одного <text>, только <path>), поэтому подписываем их
   через aria-label на ссылке, а не через alt на декоративной картинке.
   Карту (встроенный Yandex-iframe рядом с кнопками контактов в оригинале) сюда не
   вернули — см. docs/visual-gaps.md. */
.footer {
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 64px 0 32px;
}
/* Кнопки связи в футере: в оригинале они стоят ОДНОЙ КОЛОНКОЙ слева
   (все четыре на x=133), размер 323x90, шаг по вертикали 110px — то есть
   между ними 20px. У нас была авто-сетка в несколько колонок с зазором 12px
   и растянутыми до 268x75 картинками, отчего кнопки выглядели слипшимися и
   «не скруглёнными»: SVG со скруглением внутри сжимался по ширине контейнера.
   Ширину фиксируем по натуральной, чтобы форма кнопки не искажалась. */
.footer__contacts {
  display: grid;
  justify-items: start;
  gap: 20px;
  margin-bottom: 40px;
}
.footer__contact {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 323px;
  max-width: 100%;
  min-height: 90px;
  padding: 0 24px;
  background: #f8f8f8;
  color: var(--dark);
  border-radius: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.footer__contact:hover { background: var(--accent); }
.footer__contact img { width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0; }
/* Раньше здесь стояло display:block — оно осталось от кнопок-картинок и
   перебивало флекс у новых кнопок разметкой, из-за чего значок и текст
   вставали друг под друга. */
.footer__contacts a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-btn); }

/* Карта офиса (запись 11): единственный внешний виджет на странице, поэтому
   грузится лениво и с явными размерами, чтобы не двигать вёрстку при загрузке. */
.footer__map {
  margin-bottom: 40px;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 797px;
}
.footer__map iframe { display: block; width: 100%; height: 420px; border: 0; }

@media (max-width: 768px) {
  .footer__map iframe { height: 280px; }
}
/* Панель загрузки приложения — светлая карточка внутри тёмного футера (в оригинале
   фон #f8f8f8, почти var(--muted-bg)) — переиспользуем .card вместо параллельного
   класса; .card p уже красит текст в var(--muted-text), что и нужно на светлой
   подложке. */
.footer__app {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-bottom: var(--gap);
}
.footer__app p { margin: 0; font-weight: 700; flex-grow: 1; }
.footer__logo img { width: 72px; height: 27px; }
.footer__stores { display: flex; gap: var(--gap-sm); flex-shrink: 0; }
.footer__stores img { width: 48px; height: 48px; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  padding-top: var(--gap);
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: 14px;
  color: rgb(255 255 255 / 0.7);
}
.footer__bottom p { margin: 0; }
.footer__bottom a { text-decoration: underline; }

/* Реквизиты — отдельный светлый блок под футером (в оригинале это правда отдельная
   Zero-запись без тёмного фона, а не часть тёмной плашки), мелкий текст (но не мельче
   14px — аудитория читает это с телефона). Список «поле — значение» на <dl>/<dt>/<dd> —
   точная семантика для реквизитов, а не <ul>/<li>; сброс отступов нужен своей рукой,
   в отличие от ul/ol у dl нет общего сброса в базовых стилях. */
.legal { padding: 32px 0; font-size: 14px; color: var(--muted-text); }
.legal__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 12px;
  margin: 0;
}
.legal__list dt { margin: 0; font-weight: 700; color: var(--dark); }
.legal__list dd { margin: 0; }

@media (max-width: 768px) {
  .legal__list { grid-template-columns: 1fr; gap: 4px; }
  .legal__list dt { margin-top: 8px; }
  .legal__list dt:first-child { margin-top: 0; }
}

@media (max-width: 768px) {
  .footer__app { text-align: center; justify-content: center; }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Бургер-меню — на ≤768px .header__nav скрыт медиазапросом выше (только при
   классе .js на <html>, см. app.js), кнопка переключает .is-open, который
   показывает меню выпадающей панелью.
   ========================================================================== */
.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.header__burger:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
.header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark);
  border-radius: 1px;
  /* Полоски двигаются по своей дуге: сначала сходятся, потом поворачиваются.
     Разные задержки на превращении и на возврате — иначе крестик «схлопывался»
     рывком. cubic-bezier даёт лёгкий доводчик в конце вместо линейного стопа. */
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s,
              opacity 0.16s ease 0s;
}
/* Бургер превращается в крестик, когда меню открыто — чисто на CSS, по
   aria-expanded, без дублирования состояния в отдельном классе. */
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transition-delay: 0s; }
.header__burger[aria-expanded="true"] span:nth-child(1),
.header__burger[aria-expanded="true"] span:nth-child(3) { transition-delay: 0.08s; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .js .header__burger { display: inline-flex; }
  .header__inner { position: relative; }
  /* Панель меню переключалась через display:none/flex, а display не
     анимируется — отсюда и рывок вместо плавного открытия. Теперь панель
     всегда в потоке (display: flex), а скрыта прозрачностью, сдвигом и
     нулевой высотой, которые уже можно анимировать. visibility в переходе
     держит панель недоступной для фокуса и мыши, пока она закрыта. */
  .js .header__nav {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1px;
    padding: 0 var(--gap);
    background: var(--white);
    box-shadow: var(--shadow);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-8px);
    transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.28s ease,
                visibility 0s linear 0.28s, padding 0.28s ease;
  }
  .js .header__nav.is-open {
    max-height: 60vh;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: var(--gap-sm) var(--gap);
    border-bottom: 1px solid var(--border);
    overflow-y: auto;
    transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.28s ease,
                visibility 0s, padding 0.28s ease;
  }
}

/* ==========================================================================
   Попапы на нативном <dialog> — showModal() сам даёт top-layer, фокус-ловушку
   и блокировку скролла фона; здесь только оформление и позиционирование
   крестика закрытия.
   ========================================================================== */
.modal {
  position: fixed;
  border: 0;
  border-radius: var(--radius);
  padding: var(--card-padding);
  width: min(100% - 32px, 480px);
  max-height: min(90vh, 640px);
  overflow-y: auto;
  box-shadow: var(--shadow);
  color: var(--dark);
}
.modal::backdrop { background: rgb(0 0 0 / 0.6); }
.modal h2 { font-size: 22px; margin: 0 0 var(--gap-sm); padding-right: 32px; }
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--muted-bg);
  color: var(--dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { background: var(--border); }
.modal__close:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

/* ==========================================================================
   Формы лидогенерации — общие для двух попапов и встроенной формы
   регистрации в финальном блоке. Один набор классов на все три формы.
   ========================================================================== */
.lead-form {
  display: grid;
  gap: var(--gap-sm);
}
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  color: var(--dark);
  background: var(--white);
}
.lead-form input:focus-visible,
.lead-form select:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 1px;
}
.lead-form .btn { justify-self: start; }

/* Форма внутри тёмной панели финального призыва: в оригинале поля не белые,
   а тёмные — background #3e3e43, текст белый, рамка 1px #46464f, радиус 8px,
   высота 50px, ширина во всю панель; кнопка «Gönder» тоже во всю ширину
   (548px при панели 548px), а не короткая слева. Область ограничена
   .cta__panel сознательно: те же поля в попапах лежат на белом фоне, где
   тёмная заливка была бы уже не переносом оригинала, а отсебятиной. */
.cta__panel .lead-form input[type="text"],
.cta__panel .lead-form input[type="tel"],
.cta__panel .lead-form select {
  background: #3e3e43;
  color: var(--white);
  border: 1px solid #46464f;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 50px;
}
.cta__panel .lead-form input::placeholder { color: rgb(255 255 255 / 0.6); }
.cta__panel .lead-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.cta__panel .lead-form .btn {
  justify-self: stretch;
  width: 100%;
  border-radius: 8px;
}

/* Honeypot: скрыт визуально (за пределами экрана, без высоты и прозрачный),
   но НЕ display:none и НЕ type="hidden" — простые боты, которые заполняют
   все текстовые поля формы, всё равно найдут и заполнят это. Человек его
   никогда не видит и не заполняет: tabindex="-1" убирает его из Tab-обхода. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted-text);
  cursor: pointer;
}
.consent input { margin-top: 3px; flex-shrink: 0; }
.consent a { color: var(--dark); }

.form__success {
  background: var(--muted-bg);
  border-radius: var(--radius);
  padding: var(--card-padding);
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}
/* Фокус сюда переводится программно (см. success.focus() в app.js) — оставляем
   видимую рамку без опоры на эвристику :focus-visible, чтобы пользователь
   клавиатуры и скринридера точно видел, куда переместился фокус. */
.form__success:focus { outline: 2px solid var(--dark); outline-offset: 2px; }

/* Встроенная форма регистрации лежит на тёмной секции — переопределяем то,
   что на светлом фоне попапов задано через var(--muted-text)/var(--dark),
   иначе текст согласия и ссылка на Политику становятся нечитаемыми. */
.section--dark .consent { color: rgb(255 255 255 / 0.7); }
.section--dark .consent a { color: var(--accent); }
.section--dark .form__success { color: var(--dark); }

.lead-form-wrap { width: 100%; }

/* Визуально скрытый, но доступный для скринридеров label — используется там,
   где в оригинале подписи не было, только плейсхолдер (плейсхолдер не
   заменяет label: он пропадает при вводе и не читается частью браузеров). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .modal { padding: 24px; }
}

/* ---------------------------------------------------------------------------
   Кнопка «наверх» и анимации появления
   --------------------------------------------------------------------------- */

/* В оригинале кнопка «наверх» появляется при прокрутке в правом нижнем углу.
   В экспорте её разметки нет — Tilda вставляет её своим скриптом, поэтому
   воспроизводим поведение, а не чужой DOM: тёмный квадрат со скруглением 20px
   и белой стрелкой, как на боевом сайте. */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { background: var(--accent); color: var(--dark); }
.to-top:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

@media (max-width: 768px) {
  .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* Появление элементов при прокрутке. В оригинале это Tilda-анимации
   data-animate-style: "zoomin" на 54 элементах (карточки, иллюстрации,
   заголовки блоков — преимущества, города, шаги, статистика, контакты,
   заработки, футер) и "fadeinup" на 5. У героя и FAQ анимаций нет —
   там data-animationappear="off", поэтому и мы их не трогаем.

   Атрибут data-anim ставит САМ скрипт (app.js), а не разметка: без JS
   ни один элемент не должен оказаться спрятанным навсегда — та же логика
   деградации, что у класса .js для бургер-меню. */
[data-anim] {
  opacity: 0;
  transition: opacity var(--anim-duration, 0.7s) ease-out, transform var(--anim-duration, 0.7s) ease-out;
  will-change: opacity, transform;
}
[data-anim="zoomin"] { transform: scale(0.92); }
[data-anim="fadeinup"] { transform: translateY(40px); }
[data-anim].is-in { opacity: 1; transform: none; will-change: auto; }

/* Уважаем системную настройку «меньше движения»: содержимое показываем сразу,
   без сдвигов и масштабирования. */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim].is-in { opacity: 1; transform: none; transition: none; }
  .to-top { transition: none; }
}

/* ---------------------------------------------------------------------------
   Вакансия — карусель
   --------------------------------------------------------------------------- */
/* В оригинале это слайдер Tilda (record-type 923, .t-slds) со стрелками
   влево/вправо, показывающий три карточки. Особенность оригинала: текст всех
   трёх карточек ДОСЛОВНО одинаков — это одна вакансия, размноженная под
   слайдер. Повторяем визуально, но вторую и третью копии помечаем
   aria-hidden и убираем из таба: скринридер и клавиатура получают вакансию
   один раз, а не трижды подряд. */
.vacancy__carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-sm);
}
.vacancy__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.vacancy__track::-webkit-scrollbar { display: none; }
.vacancy__slide { scroll-snap-align: start; display: flex; flex-direction: column; }
.vacancy__slide h3 { font-size: 24px; }
.vacancy__slide p { flex: 1 1 auto; margin-bottom: var(--gap); }
.vacancy__slide .btn { align-self: flex-start; }

.vacancy__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dark);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.vacancy__arrow:hover { background: var(--accent); color: var(--dark); }
.vacancy__arrow:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
/* Стрелка на краю ленты гасится, а не исчезает — иначе соседние колонки
   грид-раскладки прыгали бы при каждом достижении края. */
.vacancy__arrow[disabled] { opacity: 0.35; cursor: default; }
.vacancy__arrow[disabled]:hover { background: var(--dark); color: var(--white); }

@media (max-width: 1100px) {
  .vacancy__track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 768px) {
  .vacancy__track { grid-auto-columns: 100%; }
  .vacancy__arrow { width: 40px; height: 40px; }
}

/* Белая плашка «Havale alındı / + 18.800 ₺» внутри первой карточки преимуществ:
   в оригинале у неё скругление 20px (elem 1746451167582), сам SVG нарисован
   с прямыми углами — скругление даёт CSS. Без него плашка выглядела квадратной.
   Второй и третьей карточек это НЕ касается: там у элементов r=0. */
.card__illustration--rounded { border-radius: var(--radius); }

/* Печатающаяся строка в карточке «7/24 destek!» (docs/visual-gaps.md, запись 2 —
   до сих пор была единственной так и не перенесённой анимацией). В оригинале это
   блок t635: data-text1="Kayıt işlemleri hakkında soru", data-speed="100",
   data-backspacing-delay="800", цвет #2e2d2d. Текст печатается поверх картинки
   строки ввода img_2_3b_2.webp, поэтому кладём его абсолютом в общий контейнер. */
.card__typed { position: relative; display: block; margin-top: 12px; }
.card__typed-text {
  position: absolute;
  top: 50%;
  left: 4%;
  transform: translateY(-50%);
  width: 74%;
  color: var(--dark);
  font-size: clamp(11px, 1.1vw, 15px);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
/* Курсор рисуем только пока идёт печать — чтобы в состоянии «выключенной
   анимации» не осталась висеть посторонняя палка. */
.card__typed-text.is-typing::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: typed-caret 1s step-end infinite;
}
@keyframes typed-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .card__typed-text.is-typing::after { animation: none; }
}

/* Кнопки связи и карта в футере стоят РЯДОМ, а не одна под другой: живой замер
   оригинала на 1440 даёт кнопки на x=133 (323px) и карту на x=493 (800px) с
   одинаковым верхом, между ними 37px. В сумме 1160 — ровно контейнер футера. */
.footer__top {
  display: grid;
  grid-template-columns: 323px minmax(0, 1fr);
  gap: 37px;
  align-items: start;
  margin-bottom: 40px;
}
.footer__top .footer__contacts,
.footer__top .footer__map { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Карта уходит под кнопки — рядом им уже не хватает ширины. */
  .footer__top { grid-template-columns: 1fr; gap: var(--gap); }
}


@media (max-width: 768px) {
  /* Панели на мобильном: отступ 62px съел бы половину ширины экрана. */
  :root { --panel-padding: 20px; }
  .section--dark > .container,
  .contact__inner { padding: 32px var(--panel-padding); }
}

/* ---------------------------------------------------------------------------
   Скругления кнопок футера, плавная прокрутка, блок приложения, реквизиты
   --------------------------------------------------------------------------- */

/* Кнопки связи и значки магазинов в футере рисовались прямыми углами: сами SVG
   нарисованы прямоугольниками, а скругление в оригинале задаёт CSS — 12px у
   кнопок связи и плашки приложения, 8px у значков магазинов. */
.footer__contacts img { border-radius: 12px; }
.footer__app { border-radius: 12px; }
.footer__stores img { border-radius: var(--radius-sm); }

/* Плавный переход по якорям из верхнего меню. scroll-padding-top нужен из-за
   липкой шапки: без него заголовок секции уезжает под неё. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Реквизиты убраны под раскрывающийся блок: юридический текст нужен на
   странице, но занимать им целый экран под футером незачем. <details> —
   нативный, работает без JS и остаётся доступным с клавиатуры. */
.legal__details summary {
  cursor: pointer;
  font-weight: 700;
  padding: 12px 0;
  list-style: none;
}
.legal__details summary::-webkit-details-marker { display: none; }
.legal__details summary::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.legal__details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.legal__details summary:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

/* Два приложения в одной плашке футера: своё (выплаты и топливные карты) и
   Yandex Pro (приём заказов). Раньше они были в разных местах страницы —
   человеку приходилось догадываться, что приложений два и они про разное.
   Теперь один блок с общим заголовком и подписью у каждого, что оно делает. */
.footer__app-title { font-weight: 700; margin: 0 0 16px; }
.footer__apps { display: grid; gap: var(--gap-sm); }
.footer__app-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: 12px 0;
}
.footer__app-item + .footer__app-item { border-top: 1px solid var(--border); }
.footer__app-name { display: flex; align-items: center; gap: var(--gap-sm); }
.footer__app-name img { width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0; }
.footer__app-name span { font-size: 14px; line-height: 1.35; }

@media (max-width: 768px) {
  .footer__app-item { justify-content: flex-start; }
}

/* НАЛОЖЕНИЕ ПАНЕЛИ НА ФОТО (мобильный) — приём оригинала.
   Прошлая попытка была неверной: фото лежало ВНУТРИ панели и потому рисуется
   поверх её фона, так что «наезжал» не фон на фото, а текст на фото.
   Теперь фото и содержимое — РАЗНЫЕ слои: фото вынесено из панели, а всё
   содержимое завёрнуто в .stats__body / .contact__body. На десктопе обёртка
   растворяется (display: contents) и раскладка остаётся прежней; на мобильном
   она становится настоящей панелью с фоном и наезжает на фото отрицательным
   отступом, перекрывая его нижнюю часть — как в оригинале. */
.stats__body,
.contact__body { display: contents; }
/* Фото контактов лежит в разметке ПЕРЕД обёрткой — так на мобильном оно
   оказывается отдельным слоем над панелью. На десктопе порядок обратный
   (текст слева, фото справа), поэтому возвращаем его вправо через order:
   grid его учитывает. */
.contact__media { order: 1; }

.stats__content { display: flex; flex-direction: column; }
.stats__photo { order: 1; }

@media (max-width: 768px) {
  /* Контейнер перестаёт быть панелью: фон и отступы уезжают на обёртку,
     иначе фото было бы обязано лежать внутри фона. */
  #stats > .container,
  .contact__inner {
    background: none;
    padding: 0;
    display: block;
  }

  /* Слой 1 — фото, во всю ширину блока. */
  .stats__photo,
  .contact__media {
    order: 0;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    position: relative;
    z-index: 0;
    border-radius: var(--radius);
  }
  .contact__media img { width: 100%; max-width: none; border-radius: var(--radius); }

  /* Слой 2 — панель поверх фото. Отрицательный отступ в процентах считается
     от ШИРИНЫ, поэтому доля перекрытия одинакова на любом экране. */
  .stats__body,
  .contact__body {
    display: block;
    position: relative;
    z-index: 1;
    margin-top: -16%;
    padding: 32px var(--panel-padding);
    border-radius: var(--radius);
  }
  .stats__body { background: var(--dark); }
  .contact__body { background: var(--muted-bg); }

  .cards--stats { margin-top: var(--gap); }

  /* Финальный призыв: фото во всю ширину, панель формы наезжает на него. */
  /* Внутренние отступы блока обнуляются: иначе сверху над фотографией и снизу
     под панелью оставались тёмные поля, а нужно, чтобы фото упиралось в верх
     блока, а панель доходила до низа. Раз отступов нет — отрицательные margin
     у детей тоже больше не нужны. */
  .cta > .container { padding: 0; }
  .cta__media {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    position: relative;
    z-index: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  /* Порядок как в оригинале: сначала фотография, под ней заголовок и панель
     формы. У нас «Kayıt Formu» стоял НАД фото, и блок начинался с текста на
     пустом тёмном поле. .cta__inner раскрывается (display: contents), чтобы
     фото и панель стали прямыми детьми колонки и их можно было упорядочить. */
  .cta > .container { display: flex; flex-direction: column; }
  /* Селектор с .section--dark обязателен: базовое правило записано как
     «.section--dark .cta__inner { display: grid }» и по специфичности бьёт
     одиночный класс независимо от порядка в файле. */
  .section--dark .cta__inner { display: contents; }
  .cta__media { order: -1; }
  .cta__title { order: 0; }
  .cta__panel { order: 1; }

  /* Заголовок и панель формы на мобильном образуют ОДНУ панель, которая
     наезжает на фото. Раньше отрицательный отступ висел на панели, а между
     ней и фото стоял заголовок — панель наезжала на ЗАГОЛОВОК и «Kayıt Formu»
     уходил под неё. Теперь наверх поднимается заголовок (он идёт сразу за
     фото), у него фон панели и скругление только сверху, а панель к нему
     подстыковывается снизу без собственного отступа. */
  .cta__title {
    position: relative;
    z-index: 1;
    margin-top: -16%;
    width: 100%;
    margin-inline: 0;
    padding: 24px var(--panel-padding) 0;
    background: var(--panel);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
  }
  /* В оригинале на мобильном подзаголовка в этой панели нет — заголовком
     служит «Kayıt Formu». */
  .cta__subtitle { display: none; }

  /* Панель формы идёт во всю ширину блока и потому закрывает фото и по бокам,
     а не только снизу. Раньше она была уже фотографии, и та выглядывала
     слева и справа — в оригинале так не бывает. */
  /* Наверх поднимается ЗАГОЛОВОК (см. выше) — он идёт сразу за фотографией.
     Панель просто стыкуется под ним, без собственного отрицательного отступа:
     с ним она наезжала на заголовок и «Kayıt Formu» пропадал под ней. */
  .cta__panel {
    position: relative;
    z-index: 1;
    margin-top: 0;
    width: 100%;
    margin-inline: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }
}



/* Сообщение об ошибке отправки. Живёт рядом с кнопкой в каждой из трёх форм,
   role="alert" — чтобы скринридер озвучил его сразу, без перевода фокуса.
   Скрыто атрибутом hidden, а не классом: без JS отправки всё равно нет. */
.form__error {
  margin: 0;
  color: #b42318;
  font-size: 14px;
  line-height: 1.4;
}
.form__error[hidden] { display: none; }
/* В тёмной панели финального призыва бордовый по тёмному нечитаем. */
.cta__panel .form__error { color: #ff9c92; }


/* Строки контактов: в оригинале это широкие ряды во всю ширину панели с
   крупной плиткой-значком и таким же крупным текстом, а не компактный список.
   Раньше строка ужималась по содержимому и выглядела мелко. */
/* Строка контакта — грид из трёх колонок: значок, подпись, значение.
   Колонка подписи одна на все строки, поэтому «Telefon:», «WhatsApp:» и
   «E-posta:» разной длины больше не разъезжаются, а номера выстраиваются
   ровно друг под другом. Раньше это был flex, и каждая строка считала
   отступы сама по себе. */
/* Колонки объявлены на СПИСКЕ, а строки раскрываются через display:contents —
   только так значок, подпись и значение выстраиваются в общие колонки. Если
   сеткой сделать каждую строку отдельно (как было), она считает ширину
   подписи по своему содержимому, и номера разъезжаются: «Telefon:»,
   «WhatsApp:» и «E-posta:» разной длины. */
.contacts {
  display: grid;
  grid-template-columns: auto max-content 1fr;
  align-items: center;
  gap: 12px 20px;
  font-size: clamp(16px, 1.6vw, 20px);
}
.contacts li { display: contents; }
.contacts__label { white-space: nowrap; }
.contacts a { font-weight: 700; }

@media (max-width: 768px) {
  .contacts li { font-size: 17px; gap: 16px; }
}

/* Плавное раскрытие вопросов (FAQ). У <details> высота содержимого нативно не
   анимируется, поэтому включаем interpolate-size и переходим по block-size:
   в браузерах, которые это умеют, вопрос раскрывается плавно, в остальных —
   как раньше, мгновенно. Никакого JS и никакой потери доступности. */
html { interpolate-size: allow-keywords; }
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
.faq__item summary { transition: color 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  .faq__item::details-content { transition: none; }
}


/* ---------------------------------------------------------------------------
   Промежуточные брейкпоинты
   ---------------------------------------------------------------------------
   У Tilda их пять (320/480/640/960/1200), у нас был один — 768. Из-за этого на
   планшете и узком ноутбуке страница перестраивалась реже оригинала: колонки
   держались до последнего и содержимое сжималось. Добавлены пороги, на которых
   раскладка реально должна меняться. Порог 768 оставлен как основной рубеж
   «десктоп/мобильный» — на нём завязана вся мобильная логика выше. */

/* 1200 — сетка перестаёт быть фиксированной, поля ужимаются.
   min-width обязателен: эти блоки дописаны НИЖЕ мобильных правил, и без
   нижней границы они перебивали их на телефоне (фото первого экрана получало
   чужую пропорцию и сжималось втрое). */
@media (min-width: 769px) and (max-width: 1200px) {
  :root { --panel-padding: 40px; }
}

/* 960 — первый экран теряет смысл в две колонки: плашке уже тесно */
@media (min-width: 769px) and (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__media { display: block; }
  .hero__media img { height: auto; aspect-ratio: 906 / 420; }
  .contact__inner { grid-template-columns: 1fr; }
  .stats__inner { grid-template-columns: 1fr; }
  :root { --panel-padding: 32px; }
}

/* 640 — карточки в один столбец везде, где их ещё оставалось две */
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .vacancy__track { grid-auto-columns: 100%; }
}

/* 480 — самые узкие телефоны: ужимаем крупный текст и отступы */
@media (max-width: 480px) {
  :root { --card-padding: 20px; }
  .cards--advant .card { padding: 20px; }
  .cards--advant .card h3,
  .cards--advant .card p,
  .step p { font-size: 19px; }
  .hero__content { padding: 24px 20px; }
}


/* «JET Ailesine Katılın» и блок вакансий в оригинале идут одним куском, а у нас
   это две соседние секции по 64px вертикальных отступов — между подзаголовком и
   карточками получалось 128px пустоты. */
#jet-ailesi { padding-bottom: 0; }
#jet-ailesi + .vacancy { padding-top: var(--gap); }

/* ---------------------------------------------------------------------------
   Страница /basvuru — выбор города и форма Яндекса
   --------------------------------------------------------------------------- */
.apply__cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: 0 0 var(--gap);
}
/* Невыбранные города — спокойные, выбранный подсвечен жёлтым. Полагаться
   только на цвет нельзя, поэтому активной кнопке скрипт ставит aria-current. */
.apply__city { background: var(--muted-bg); color: var(--dark); }
.apply__city:hover { background: #e2e2e2; filter: none; }
.apply__city.is-active { background: var(--accent); }
.apply__city.is-active:hover { background: var(--accent); }

/* Форма Яндекса приходит со своим белым фоном и скруглением, поэтому серая
   подложка вокруг читалась как «рамка в рамке» и фрейм выглядел обрезанным.
   Подложку убрали, ширину задали по той, на которую форма рассчитана
   (в сниппетах Яндекса width=600), и центрировали. */
.apply__frame {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  background: none;
}
/* Высота задана и не зависит от содержимого: форма на чужом домене, её
   реальную высоту нам не измерить (cross-origin), а без явного размера
   iframe схлопнулся бы почти в ничто. */
.apply__frame iframe {
  display: block;
  width: 100%;
  /* Высота задана и не зависит от содержимого: форма на чужом домене, её
     реальную высоту нам не измерить (cross-origin). Берём с запасом на самый
     длинный шаг анкеты, но не настолько, чтобы под формой зияла пустота. */
  height: 720px;
  border: 0;
  border-radius: var(--radius);
}
.apply__fallback { display: grid; gap: var(--gap-sm); margin-top: var(--gap-sm); }
.apply__fallback a { font-weight: 700; text-decoration: underline; }

@media (max-width: 768px) {
  .apply__frame iframe { height: 680px; }
}

/* Карточка выбора города на главной. Заменила сетку из девяти карточек:
   городов стало много, и сеткой блок разрастался на три ряда, повторяя
   «…'da Yandex GO» девять раз подряд. */
.city-picker { max-width: 640px; }
.city-picker h3 { margin-bottom: 20px; }
.city-picker__form { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.city-picker select {
  flex: 1 1 240px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  color: var(--dark);
  font: inherit;
  font-size: 17px;
}
.city-picker select:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }
.city-picker .btn { flex: 0 0 auto; }

@media (max-width: 640px) {
  /* flex:1 1 240px здесь ОБЯЗАН быть сброшен: в колонке основная ось —
     вертикальная, и 240px становятся базовой ВЫСОТОЙ, а flex-grow растягивает
     поле ещё сильнее. На телефоне выпадающий список превращался в пустой
     прямоугольник почти на пол-экрана. */
  .city-picker__form { flex-direction: column; align-items: stretch; }
  .city-picker select { flex: 0 0 auto; width: 100%; height: 56px; }
  .city-picker .btn { width: 100%; text-align: center; }
}


/* Страница /basvuru живёт одной формой, поэтому её содержимое центрируем и
   ограничиваем по ширине: в контейнере на 1200px кнопки городов растягивались
   в одну длинную строку через весь экран. */
.apply__cities { justify-content: center; max-width: 720px; margin-inline: auto; }
#apply-title, #apply-lead { text-align: center; }
#apply-lead { max-width: 640px; margin-inline: auto; }


/* Фон страницы /basvuru совпадает с фоном формы Яндекса, чтобы фрейм не
   читался отдельной вставкой с видимым швом. Тон взят светлее нашего
   --muted-bg: у формы подложка почти белая, и на #efefef она бы всё равно
   выделялась прямоугольником. */
.page-apply { background: #f5f5f5; }
.page-apply .header { background: #f5f5f5; border-bottom-color: #e6e6e6; }

/* Подпись под заголовком попапа заказа звонка. */
.modal__lead { margin: -8px 0 4px; color: var(--muted-text); font-size: 15px; }


@media (max-width: 768px) {
  /* 323px — натуральная ширина кнопки из экспорта, на телефоне она оставляла
     пустую полосу справа. В столбик кнопки идут во всю ширину блока.
     justify-items тоже обязателен: у списка стоит start, и строка грида
     сжималась по содержимому — ширина 100% считалась от неё, а не от блока. */
  .footer__contacts { justify-items: stretch; }
  .footer__contact { width: 100%; }
}


/* ---------------------------------------------------------------------------
   Правовые страницы (/kullanim-kosullari, /gizlilik-politikasi и ещё 17).
   Собираются scripts/build-legal.js, разметка — <article class="doc">.

   Класс именно .doc, а не .legal: .legal выше уже занят свёрнутым блоком
   реквизитов в подвале главной, и переиспользование имени сломало бы его.
   --------------------------------------------------------------------------- */

/* 780px — не «как у всех блоков 1200». Это сплошной текст на 50 КБ, и на
   1200px строка получается ~150 символов: глаз теряет начало следующей строки
   и читать договор становится физически трудно. 780px дают ~90 символов. */
.container--doc { width: min(100% - 32px, 780px); }

.doc { font-size: 17px; line-height: 1.65; }

/* Заголовок документа сильно меньше, чем h1 на главной (там clamp до 56px):
   у договора заголовок — служебная строка, а не рекламный экран. */
.doc h1 {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.25;
  margin: 0 0 8px;
}

/* Разделы. Глобальные h2 (46px, отступ 32px) рассчитаны на блоки лендинга и
   внутри документа выглядели бы крупнее его собственного заголовка. */
.doc h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.doc h3 { font-size: 18px; font-weight: 700; margin: 28px 0 10px; }
.doc h4 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }

/* Первый заголовок не должен отбиваться линией сразу под названием документа. */
.doc > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 28px; }

.doc p { margin: 0 0 14px; }

/* Глобально у списков сброшены маркеры (list-style: none) — на лендинге списки
   служат сеткой карточек. В договоре перечисление обязано читаться как
   перечисление, поэтому маркеры возвращаем. */
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 24px; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li { margin: 0 0 6px; }

/* Глобально a { color: inherit } — ссылка в сплошном тексте договора должна
   быть отличима, иначе адрес формы или почта теряются в абзаце. */
.doc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--muted-text); }

/* Таблицы приходят из редактора Tilda с процентными ширинами колонок под её
   ширину редактора; мы их не переносим, ширину раздаёт браузер. Обёртка со
   скроллом обязательна: в договорах есть таблицы на три колонки текста,
   которые на телефоне иначе растягивают страницу и дают горизонтальный скролл
   всему документу. */
.doc__table-wrap { overflow-x: auto; margin: 0 0 20px; }
.doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 480px;
}
.doc__table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}

/* Подвал документа: реквизиты компании. Тот же состав, что в блоке реквизитов
   на главной — правовую страницу часто открывают по прямой ссылке из договора
   или из формы в приложении, минуя главную. */
.doc-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0 48px;
  font-size: 14px;
  color: var(--muted-text);
}
.doc-footer p { margin: 0 0 4px; }
.doc-footer__company { font-weight: 700; color: var(--dark); }
.doc-footer__copy { margin-top: 16px; }
.doc-footer a { color: inherit; }

@media (max-width: 768px) {
  .doc { font-size: 16px; }
  .doc h2 { font-size: 20px; margin-top: 32px; }
}

/* Печать: договоры печатают и подписывают. Убираем шапку с кнопкой (в бумаге
   она бессмысленна) и переносим ссылки в текст — на бумаге href иначе теряется. */
@media print {
  .page-doc .header { display: none; }
  .page-doc .section { padding: 0; }
  .container--doc { width: 100%; }
  .doc { font-size: 11pt; }
  .doc h2, .doc h3, .doc h4 { break-after: avoid; }
  .doc__table, .doc li, .doc p { break-inside: avoid; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}