/* ==========================================================================
   ВХОД, РЕГИСТРАЦИЯ И ВСЁ ОСТАЛЬНОЕ ПРО ДВЕРЬ
   --------------------------------------------------------------------------
   Прежняя дверь была разрезана надвое: слева во всю высоту стена постеров,
   справа тёмная панель с формой в узкой колонке. Знак стоял дважды — над
   стеной и над панелью, — а фраза о том, зачем вообще заводить аккаунт,
   лежала в нижнем левом углу, куда глаз доходит последним.

   Здесь одна колонка по центру и мозаика позади неё во всю страницу.
   Порядок чтения стал прямым: знак, фраза, карточка с формой, подпись.
   Фраза больше не прячется в углу — она вводит карточку.

   Мозаика осталась (без неё дверь — серый прямоугольник), но она другая:
   не восемь столбцов, едущих вверх под наклоном на левой половине, а
   четыре полосы, едущие поперёк за всей страницей. Другая ось, другое
   число, другое место.

   Краски, шрифты и сброс — общие с сайтом (kino/tokens.css). Своей палитры
   у двери больше нет: она была отдельным миром внутри сайта.

   Тема здесь всегда тёмная, и это не упущение: карточка стоит поверх
   мозаики из чужих кадров, и светлая подложка под ними читается хуже
   любой картинки.
   ========================================================================== */

.kta {
    position: relative;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    padding: clamp(24px, 5vh, 56px) 20px clamp(20px, 4vh, 36px);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   МОЗАИКА.

   Четыре полосы во всю ширину, едущие поперёк.
   -------------------------------------------------------------------------- */

.kta-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.kta-wall {
    position: absolute;
    inset: -6% -18%;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: clamp(10px, 1.4vw, 18px);
    will-change: transform;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.kta-wall-row {
    display: flex;
    gap: clamp(10px, 1.4vw, 18px);
    width: max-content;
    animation: ktaDrift 90s linear infinite;
}

/* У каждой полосы своя скорость и своя сторона: одинаковая скорость
   превратила бы четыре полосы в одну картинку, одна сторона — в бегущую
   строку. */
.kta-wall-row--2 { animation-duration: 130s; animation-direction: reverse; }
.kta-wall-row--3 { animation-duration: 165s; }
.kta-wall-row--4 { animation-duration: 145s; animation-direction: reverse; }

/* Полоса едет ровно на одну свою копию и начинается сначала. Копий три, а
   не две: за оборот уезжает треть, и позади остаются ещё две — то есть
   вдвое больше самого широкого монитора. При двух копиях на экране в 2560
   точек показался бы конец полосы. */
@keyframes ktaDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-33.3333%, 0, 0); }
}

/* Высота кадра приходит от полосы, ширина считается по ней. Наоборот —
   ширина от вьюпорта, высота от полосы — растягивало постер: при заданной
   ширине флекс-элемент всё равно тянется на всю высоту строки, и
   aspect-ratio проигрывает растяжению. Лица на кадрах при этом резались. */
.kta-poster {
    display: block;
    flex: 0 0 auto;
    /*
     * Размер плитки — свой, а не тот, что принесла картинка.
     *
     * Высота была 100 % от полосы, а полоса — «1fr», то есть minmax(auto, 1fr):
     * её нижней границей становится собственная высота картинки. Пока афиши
     * приезжали с чужого CDN обрезком w185 (185×278), стена держалась на этом
     * случайно; своя копия — 600×900, и плитки выросли втрое. 278 — та самая
     * высота, на которой стена и нарисована.
     */
    height: 278px;
    width: auto;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #17171A;
}

.kta-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * Завеса. Мозаика — фон, а не содержимое: под карточкой она должна почти
 * погаснуть, у краёв остаться живой. Отсюда два слоя — ровная заливка и
 * радиальное затемнение к центру, где стоит карточка.
 */
.kta-wall-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 65% at 50% 42%, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .8) 45%, rgba(8, 8, 10, .3) 100%),
        linear-gradient(180deg, rgba(8, 8, 10, .55) 0%, rgba(8, 8, 10, .2) 35%, rgba(8, 8, 10, .75) 100%);
}

/* --------------------------------------------------------------------------
   ЯЗЫК.

   Раскрывается сам, без сценария: <details> — настоящий список. Стоит в
   правом верхнем углу, где его держит и шапка сайта; на узком экране
   уезжает к середине, чтобы не тесниться со знаком.
   -------------------------------------------------------------------------- */

.kta-lang {
    position: relative;
    z-index: 3;
    justify-self: end;
    margin-bottom: clamp(10px, 2vh, 22px);
}

.kta-lang summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--kt-line);
    border-radius: 999px;
    color: var(--kt-muted);
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    list-style: none;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

/* Треугольник, который браузер рисует сам, здесь лишний: у нас своя стрелка. */
.kta-lang summary::-webkit-details-marker { display: none; }
.kta-lang summary::marker { content: ''; }

.kta-lang summary:hover { border-color: var(--kt-line-2); color: var(--kt-ink); }
.kta-lang summary img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.kta-lang summary b { font-weight: 400; }
.kta-lang summary svg { transition: transform .2s ease; }
.kta-lang[open] summary svg { transform: rotate(180deg); }

.kta-lang__pane {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-md);
    background: rgba(20, 20, 23, .96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.kta-lang__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--kt-r-sm);
    color: var(--kt-muted);
    font-size: 13px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.kta-lang__row:hover { background: rgba(255, 255, 255, .06); color: var(--kt-ink); }
.kta-lang__row.is-on { color: var(--kt-ink); }
.kta-lang__row img { flex: none; width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.kta-lang__row span { flex: 1 1 auto; }
.kta-lang__row svg { flex: none; color: var(--kt-accent-ink); }

/* --------------------------------------------------------------------------
   КОЛОНКА.
   -------------------------------------------------------------------------- */

.kta-col {
    position: relative;
    z-index: 1;
    width: min(452px, 100%);
    display: grid;
    justify-items: center;
    align-content: start;
    gap: clamp(18px, 3vh, 28px);
}

.kta-logo { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 17px; letter-spacing: -.015em; text-decoration: none; }
.kta-logo img { height: 26px; width: auto; display: block; }
.kta-logo__m { padding: 3px 9px 4px; border-radius: 7px; background: var(--kt-accent); color: var(--kt-on-accent); }
.kta-logo__r { color: var(--kt-ink); }

/* Строка о том, зачем аккаунт: вводит карточку, а не лежит в углу. */
.kta-value { text-align: center; }

.kta-value-lede {
    margin: 0 auto;
    max-width: 40ch;
    font-size: 14px;
    line-height: 1.65;
    color: var(--kt-muted);
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   КАРТОЧКА.
   -------------------------------------------------------------------------- */

.kta-card {
    width: 100%;
    padding: clamp(24px, 4vw, 34px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--kt-r-xl);
    background: rgba(20, 20, 23, .82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.kta-flash {
    margin: 0 0 18px;
    padding: 12px 15px;
    border: 1px solid rgba(var(--kt-accent-rgb), .35);
    border-radius: var(--kt-r-md);
    background: rgba(var(--kt-accent-rgb), .1);
    font-size: 13px;
    line-height: 1.5;
    color: var(--kt-accent-ink);
}

.kta-head { margin-bottom: 22px; text-align: center; }

.kta-head-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border: 1px solid var(--kt-line-2);
    border-radius: 50%;
    color: var(--kt-accent-ink);
}

.kta-head h1 {
    margin: 0;
    font-family: var(--kt-font-display);
    font-size: clamp(25px, 3.4vw, 32px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.028em;
}

.kta-head p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--kt-muted); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   ВКЛАДКИ.

   Были две большие плашки, одна из которых горела акцентом во всю ширину
   половины карточки. Стали два слова с бегущей чертой — так же, как
   переключаются порядки в блоге.
   -------------------------------------------------------------------------- */

.kta-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--kt-line);
}

.kta-tab {
    padding: 11px 4px 14px;
    border: 0;
    background: transparent;
    color: var(--kt-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    transition: color .2s ease;
}

.kta-tab:hover { color: var(--kt-ink); }
.kta-tab.is-on { color: var(--kt-ink); }

.kta-tab-ink {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 50%;
    height: 2px;
    background: var(--kt-accent);
    transition: transform .28s var(--kt-ease);
}

.kta-tabs[data-at="signup"] .kta-tab-ink { transform: translateX(100%); }

/* --------------------------------------------------------------------------
   ВХОД ЧЕРЕЗ ЧУЖОЙ СЧЁТ.

   Были три широкие плашки со словами в ряд — половина высоты карточки на
   то, чем пользуется меньшинство. Стали три круга со знаком и подписью
   под ним: та же форма, что у окна «поделиться».
   -------------------------------------------------------------------------- */

.kta-sso {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.kta-sso-btn {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 12px 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--kt-r-md);
    color: var(--kt-muted);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.kta-sso-btn:hover { border-color: var(--kt-line); background: rgba(255, 255, 255, .03); color: var(--kt-ink); }

.kta-sso-ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--kt-line-2);
    border-radius: 50%;
    transition: border-color .22s ease, transform .22s var(--kt-ease);
}

.kta-sso-btn:hover .kta-sso-ic { border-color: var(--kt-line-2); transform: translateY(-2px); }
.kta-sso-btn span { font-family: var(--kt-font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   СКОЛЬКО КНОПОК ВХОДА — ТАКОЙ И ВИД.

   Три значка в ряд — сетка, в которой каждый на своём месте. Одна кнопка
   в такой сетке смотрится случайно забытой: столбец в треть ширины и
   подпись в восемь пикселей под кружком. Поэтому единственная кнопка
   становится широкой строкой со значком и словом рядом, а две — парой
   таких же строк.
   -------------------------------------------------------------------------- */

.kta-sso[data-count="1"],
.kta-sso[data-count="2"] { grid-auto-flow: column; }

.kta-sso[data-count="1"] .kta-sso-btn,
.kta-sso[data-count="2"] .kta-sso-btn {
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    justify-items: center;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-color: var(--kt-line);
    background: rgba(255, 255, 255, .02);
}

.kta-sso[data-count="1"] .kta-sso-btn { padding: 13px 18px; }
.kta-sso[data-count="1"] .kta-sso-ic { width: 36px; height: 36px; }
.kta-sso[data-count="2"] .kta-sso-ic { width: 32px; height: 32px; }

.kta-sso[data-count="1"] .kta-sso-btn span,
.kta-sso[data-count="2"] .kta-sso-btn span { font-size: 10px; letter-spacing: .07em; }

.kta-sso[data-count="1"] .kta-sso-btn:hover,
.kta-sso[data-count="2"] .kta-sso-btn:hover { border-color: var(--kt-line-2); background: rgba(255, 255, 255, .05); }

.kta-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.kta-or::before,
.kta-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--kt-line); }

/* --------------------------------------------------------------------------
   ФОРМА.
   -------------------------------------------------------------------------- */

.kta-form { display: none; }
.kta-form.is-on { display: grid; gap: 16px; }

.kta-field { display: grid; gap: 8px; }

.kta-lab,
.kta-lab-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.kta-lab-row .kta-lab { display: inline; }

.kta-input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-md);
    background: transparent;
    color: var(--kt-ink);
    font: inherit;
    font-size: 14.5px;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}

.kta-input::placeholder { color: rgba(255, 255, 255, .3); }
.kta-input:focus { border-color: var(--kt-line-2); background: rgba(255, 255, 255, .02); }

/* Автозаполнение Chrome заливает поле своим синим. Тени не пропускают
   заливку, а цвет буквы приходится ставить так — background-color в этом
   псевдоклассе браузер игнорирует. */
.kta-input:-webkit-autofill,
.kta-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--kt-ink);
    box-shadow: 0 0 0 1000px #1A1A1D inset;
    caret-color: var(--kt-ink);
}

.kta-pw { position: relative; display: block; }
.kta-pw .kta-input { padding-right: 46px; }

.kta-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kt-muted);
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}

.kta-eye:hover { background: rgba(255, 255, 255, .06); color: var(--kt-ink); }
.kta-eye svg { width: 17px; height: 17px; }
.kta-eye .kta-eye-off { display: none; }
.kta-eye.is-on .kta-eye-on { display: none; }
.kta-eye.is-on .kta-eye-off { display: block; }

/* Мера пароля. */
.kta-meter { display: flex; align-items: center; gap: 5px; }
.kta-meter[hidden] { display: none; }

.kta-meter i {
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: var(--kt-line-2);
    transition: background .2s ease;
}

.kta-meter em {
    flex: 0 0 auto;
    font-family: var(--kt-font-mono);
    font-size: 8.5px;
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.kta-meter[data-level="1"] i:nth-child(1) { background: #FF6B6B; }
.kta-meter[data-level="2"] i:nth-child(-n+2) { background: #E8B04B; }
.kta-meter[data-level="3"] i { background: var(--kt-accent); }

/* Флажки. */
.kta-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kt-muted);
    cursor: pointer;
}

.kta-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.kta-check-box {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border: 1px solid var(--kt-line-2);
    border-radius: 5px;
    transition: border-color .18s ease, background .18s ease;
}

.kta-check-box::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid var(--kt-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0;
    transition: opacity .15s ease;
}

.kta-check input:checked ~ .kta-check-box { border-color: transparent; background: var(--kt-accent); }
.kta-check input:checked ~ .kta-check-box::after { opacity: 1; }
.kta-check input:focus-visible ~ .kta-check-box { outline: 2px solid var(--kt-accent); outline-offset: 2px; }

/* Кнопка. */
.kta-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--kt-accent);
    color: var(--kt-on-accent);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .18s ease;
}

.kta-submit:hover { opacity: .88; }

.kta-submit--ghost,
.kta-submit--link {
    background: transparent;
    color: var(--kt-ink);
    box-shadow: inset 0 0 0 1px var(--kt-line-2);
}

.kta-submit--ghost:hover,
.kta-submit--link:hover { opacity: 1; box-shadow: inset 0 0 0 1px var(--kt-ink); }

.kta-spin { display: none; width: 17px; height: 17px; }
.kta-submit.is-busy .kta-spin { display: block; animation: ktaSpin .7s linear infinite; }
.kta-submit.is-busy span { opacity: .6; }

@keyframes ktaSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   МЕЛКИЕ ЧАСТИ.
   -------------------------------------------------------------------------- */

.kta-link {
    border: 0;
    background: transparent;
    color: var(--kt-accent-ink);
    font: inherit;
    font-size: inherit;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}

.kta-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.kta-link--mute { color: var(--kt-muted); }
.kta-link--block { display: block; margin-top: 16px; text-align: center; }

.kta-lab-row .kta-link { font-family: var(--kt-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

.kta-switch { margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--kt-muted); }
.kta-switch .kta-link { margin-left: 6px; font-weight: 700; }

.kta-err,
.kta-reason {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid rgba(255, 107, 107, .35);
    border-radius: var(--kt-r-md);
    background: rgba(255, 107, 107, .08);
    font-size: 12.5px;
    line-height: 1.5;
    color: #FF9C89;
}

.kta-reason { margin-bottom: 18px; }
.kta-err svg, .kta-reason svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }

.kta-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--kt-muted); }

.kta-note--boxed {
    margin-top: 20px;
    padding: 12px 15px;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-md);
}

/* Итоговый экран: «письмо отправлено», «почта подтверждена». */
.kta-state { text-align: center; }

.kta-state-ico {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
}

.kta-state-ico svg { width: 22px; height: 22px; }
.kta-state-ico--ok { background: rgba(var(--kt-accent-rgb), .14); color: var(--kt-accent-ink); }
.kta-state-ico--bad { background: rgba(255, 107, 107, .12); color: #FF9C89; }

.kta-state h1 {
    margin: 0 0 10px;
    font-family: var(--kt-font-display);
    font-size: clamp(24px, 3.2vw, 30px);
    font-weight: 400;
    letter-spacing: -.025em;
}

.kta-state p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--kt-muted); }
.kta-state .kta-form { margin-top: 4px; }

/* Одноразовый код. */
.kta-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }

.kta-otp-box {
    width: 100%;
    height: 56px;
    padding: 0;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-md);
    background: transparent;
    color: var(--kt-ink);
    font-family: var(--kt-font-mono);
    font-size: 21px;
    text-align: center;
    outline: none;
    transition: border-color .18s ease, background .18s ease;
}

.kta-otp-box:focus { border-color: var(--kt-accent); }
.kta-otp-box.is-filled { border-color: var(--kt-line-2); background: rgba(255, 255, 255, .03); }

.kta-tfa-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    font-size: 12.5px;
}

.kta-tfa-actions form { display: inline; }

/* Точка-разделитель встречается и во флексе, и в строке текста. Строчному
   элементу ширина и высота не задаются вовсе — без inline-block она
   схлопывалась в ничто между двумя ссылками. */
.kta-dot { display: inline-block; vertical-align: middle; width: 3px; height: 3px; margin: 0 4px; border-radius: 50%; background: var(--kt-line-2); }

/* «Зачем подтверждать почту» — список причин. */
.kta-why { list-style: none; margin: 20px 0 0; padding: 18px; border: 1px solid var(--kt-line); border-radius: var(--kt-r-lg); }

.kta-why-h {
    margin-bottom: 12px;
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.kta-why li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--kt-muted); }
.kta-why li + li { margin-top: 10px; }
.kta-why li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--kt-accent-ink); }

/* --------------------------------------------------------------------------
   ПОДПИСЬ.
   -------------------------------------------------------------------------- */

.kta-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.kta-foot a { color: inherit; text-decoration: none; transition: color .2s ease; }
.kta-foot a:hover { color: var(--kt-ink); }

/* --------------------------------------------------------------------------
   УЗКИЙ ЭКРАН.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .kta { padding: 22px 14px 20px; }
    .kta-lang { justify-self: center; }
    .kta-lang__pane { right: 50%; transform: translateX(50%); }
    .kta-card { padding: 22px 18px; border-radius: var(--kt-r-lg); }
    .kta-sso,
    .kta-sso[data-count="1"],
    .kta-sso[data-count="2"] { grid-auto-flow: row; grid-auto-columns: auto; }

    .kta-sso-btn {
        grid-auto-flow: column;
        justify-items: start;
        justify-content: start;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        border-color: var(--kt-line);
    }

    .kta-sso-ic { width: 34px; height: 34px; }
    .kta-sso-btn span { font-size: 10px; letter-spacing: .06em; }
    .kta-otp { gap: 6px; }
    .kta-otp-box { height: 48px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .kta-wall-row { animation: none; }
    .kta-wall { transition: none; }
    .kta-submit.is-busy .kta-spin { animation: none; }
}