/* Страница входа «Новый компьютер»: маршрут Ашхабад → Анкара → Стамбул и карточка входа */
:root {
    /* Полёт и вспышки городов — менять здесь */
    --fly: 14s;                 /* один пролёт самолёта */
    --fly-repeat: infinite;     /* сколько раз: infinite — по кругу, 1 — один раз */
    --at-ankara: 0.5192;        /* доля пути до Анкары (по длине линии маршрута) */
    --at-istanbul: 1;           /* Стамбул — конец пути */
    --flash-ankara-delay: calc(var(--fly) * var(--at-ankara));
    --flash-istanbul-delay: calc(var(--fly) * var(--at-istanbul));
    --blue: #1d4ed8;
    --ink: #111827;
    --muted: #6b7280;
    --line: #d6dae1;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.lg {
    min-height: 100vh;
    background: linear-gradient(180deg, #cfe2ff 0%, #f4f8ff 100%);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
}
.lg-wrap { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 40px; }

/* Маршрут */
.lg-map { width: 100%; max-width: 640px; height: auto; overflow: visible; }
.lg-route { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 6 6; stroke-linecap: round; }
.lg-city { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.lg-city.end { fill: #fff; stroke: var(--blue); stroke-width: 3; }
.lg-map text { font-size: 13px; fill: #1f2937; }
.lg-plane {
    fill: var(--blue);
    offset-path: path("M90 98 C 170 30, 250 20, 340 66 S 500 110, 570 44");
    offset-rotate: auto 180deg; /* нос самолёта в рисунке смотрит влево — разворачиваем по ходу полёта */
    animation: lg-fly var(--fly) linear var(--fly-repeat);
}

/* Вспышка города, когда до него долетает самолёт: тот же цикл и число повторений, что у полёта.
   Внутри цикла вспышка занимает первые 5.7% (≈0.8 с из 14 с), остальное время её не видно. */
.lg-ring { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lg-city.ankara, .lg-city.istanbul { transform-box: fill-box; transform-origin: center; }
.lg-ring.ankara { animation: lg-ring var(--fly) ease-out var(--flash-ankara-delay) var(--fly-repeat); }
.lg-ring.istanbul { animation: lg-ring var(--fly) ease-out var(--flash-istanbul-delay) var(--fly-repeat); }
.lg-city.ankara { animation: lg-pop var(--fly) ease-out var(--flash-ankara-delay) var(--fly-repeat); }
.lg-city.istanbul { animation: lg-pop var(--fly) ease-out var(--flash-istanbul-delay) var(--fly-repeat); }
@keyframes lg-ring {
    0% { transform: scale(1); opacity: .7; }
    5.7% { transform: scale(3); opacity: 0; }
    100% { transform: scale(3); opacity: 0; }
}
@keyframes lg-pop {
    0% { transform: scale(1); }
    1.5% { transform: scale(1.3); }
    3.5% { transform: scale(1); }
    100% { transform: scale(1); }
}
@keyframes lg-fly {
    0% { offset-distance: 0%; opacity: 0; }
    6% { opacity: 1; }
    92% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-plane { animation: none; offset-distance: 52%; }
    .lg-ring, .lg-city.ankara, .lg-city.istanbul { animation: none; }
}

/* Карточка */
.lg-card {
    width: 100%; max-width: 320px; margin-top: 8px; padding: 22px 22px 18px;
    background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(29, 78, 216, .14), 0 2px 6px rgba(17, 24, 39, .06);
}
.lg-sub { margin: 4px 0 18px; text-align: center; font-size: 12.5px; color: var(--muted); }
.lg-label { display: block; margin: 0 0 6px; font-size: 13px; color: #374151; }
.lg-field { position: relative; display: flex; align-items: center; margin-bottom: 14px; }
.lg-field > svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: #6b7280; stroke-width: 1.8; pointer-events: none; }
.lg-field input {
    width: 100%; height: 42px; padding: 0 40px 0 36px; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; font: inherit; font-size: 14.5px; color: var(--ink);
}
.lg-field input::placeholder { color: #9ca3af; }
.lg-field input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px #bfd3fb; }
.lg-eye { position: absolute; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.lg-eye svg { width: 16px; height: 16px; fill: none; stroke: #6b7280; stroke-width: 1.8; }
.lg-eye[aria-pressed="true"] svg { stroke: var(--blue); }
.lg-eye:focus-visible { outline: 2px solid #2563eb; }
.lg-err { margin: -4px 0 12px; color: #b91c1c; font-size: 13px; }
.lg-btn {
    width: 100%; height: 44px; border: 0; border-radius: 10px; background: var(--blue); color: #fff;
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.lg-btn:hover { background: #1e40af; }
.lg-btn:focus-visible { outline: 3px solid #bfd3fb; outline-offset: 2px; }
.lg-help { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--muted); }

/* Выбор языка под карточкой */
.lg-lang { margin-top: 14px; }
.lang { position: relative; }
.lang > summary { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; color: #374151; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.lang > summary:hover { background: rgba(255, 255, 255, .7); }
/* Кнопка языка в цветах флага: TR — красный, TK — зелёный, RU — бело-сине-красный */
.lang-tr > summary, .lang-tr > summary:hover { background: #e30a17; color: #fff; }
.lang-tk > summary, .lang-tk > summary:hover { background: #00843d; color: #fff; }
.lang-ru > summary, .lang-ru > summary:hover { background: linear-gradient(#fff 0 33.3%, #0039a6 33.3% 66.6%, #d52b1e 66.6%); color: #fff; text-shadow: 0 0 2px #0039a6, 0 0 2px #0039a6; box-shadow: 0 0 0 1px #c4c8cf; }
.lang > summary:hover { filter: brightness(1.08); }
/* как в шапке: серая капсула без цветов флага */
.cap-lang > summary, .cap-lang > summary:hover { height: 34px; padding: 0 12px; border-radius: 999px; background: #f3f4f6; color: #374151; text-shadow: none; box-shadow: none; filter: none; }
.cap-lang > summary .ic { stroke: #6b7280; }
.cap-lang > summary:hover { background: #e9ebef; }
.lang-menu { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); display: grid; min-width: 170px; margin: 0; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(29, 78, 216, .16); }
.lang-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.lang-menu button b { width: 24px; color: var(--muted); font-size: 12px; }
.lang-menu button:hover { background: #f1f5ff; }
.lang-menu button.on { background: #eaf1fd; color: #1e40af; }

@media (max-width: 480px) {
    .lg-wrap { padding-top: 12px; }
    .lg-map { max-width: 360px; }
    .lg-map text { font-size: 16px; }
}

/* Телефон: поля, глазик и выбор языка — не ниже 44px */
@media (max-width: 768px) {
    .lg-field input { height: 48px; font-size: 16px; }
    .lg-eye { width: 44px; height: 44px; right: 2px; }
    .lang > summary { min-height: 44px; padding: 0 14px; }
    .lang-menu button { min-height: 44px; }
}