:root {
    color-scheme: dark;
    --page-bg: #031326;
    --page-bg-deep: #020c18;
    --panel: rgba(6, 27, 49, .82);
    --panel-strong: rgba(5, 31, 58, .93);
    --input: rgba(1, 15, 29, .64);
    --text: #f7faff;
    --muted: #a9c6e8;
    --line: rgba(159, 197, 225, .22);
    --blue: #1688ff;
    --blue-soft: rgba(22, 136, 255, .26);
    --red: #db2748;
    --red-deep: #ae102f;
    --red-soft: rgba(219, 39, 72, .25);
    --green: #55d995;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--page-bg);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(900px 620px at 2% 2%, rgba(5, 74, 184, .62), transparent 67%),
        radial-gradient(760px 520px at 96% 4%, rgba(0, 111, 118, .34), transparent 70%),
        radial-gradient(1050px 500px at 57% 104%, rgba(4, 55, 133, .44), transparent 68%),
        linear-gradient(132deg, #031a38 0%, var(--page-bg-deep) 46%, #031a30 100%);
}

body::before,
body::after {
    position: fixed;
    z-index: 0;
    content: "";
    pointer-events: none;
}

body::before {
    inset: 0;
    opacity: .17;
    background-image:
        linear-gradient(rgba(138, 190, 236, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(138, 190, 236, .05) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 80%, transparent 100%);
}

body::after {
    width: 620px;
    height: 620px;
    right: -360px;
    bottom: -390px;
    border: 1px solid rgba(80, 172, 255, .13);
    border-radius: 50%;
    box-shadow:
        0 0 0 90px rgba(80, 172, 255, .025),
        0 0 0 180px rgba(80, 172, 255, .018);
}

button,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

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

.login-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - 48px));
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(24px, 4vh, 44px) 0 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.intro {
    width: 100%;
    margin: 0 auto clamp(22px, 3.2vh, 32px);
    text-align: center;
    animation: introIn .8s var(--ease-out) both;
}

.intro h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 3.25vw, 50px);
    font-weight: 780;
    line-height: 1.08;
    letter-spacing: -.038em;
    text-wrap: balance;
    text-shadow: 0 10px 34px rgba(0, 0, 0, .34);
}

.login-form {
    width: 100%;
}

.login-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    animation: stageIn .78s .08s var(--ease-out) both;
}

.login-stage[data-mode="partner"] {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
}

.login-panel {
    --accent: var(--blue);
    --accent-soft: var(--blue-soft);
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 468px;
    padding: clamp(22px, 2vw, 26px) clamp(21px, 2.2vw, 27px) clamp(23px, 2.2vw, 27px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(12, 43, 72, .72), rgba(3, 20, 37, .86)), var(--panel);
    box-shadow: 0 25px 65px rgba(0, 5, 14, .34);
    transform: translateY(7px) scale(.98);
    backface-visibility: hidden;
    will-change: transform, opacity;
    transform-origin: center;
    opacity: .57;
    filter: saturate(.64);
    transition:
        transform .48s var(--ease-out),
        opacity .4s ease,
        filter .4s ease,
        border-color .4s ease,
        background .4s ease,
        box-shadow .48s var(--ease-out);
}

.partner-panel {
    --accent: var(--red);
    --accent-soft: var(--red-soft);
}

.login-panel::before,
.login-panel::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.login-panel::before {
    z-index: -2;
    width: 520px;
    height: 330px;
    top: -205px;
    left: -110px;
    border-radius: 50%;
    opacity: .17;
    background: var(--accent);
    filter: blur(78px);
    transform: scale(.75);
    transition: opacity .45s ease, transform .6s var(--ease-out);
}

.partner-panel::before {
    right: -110px;
    left: auto;
}

.login-panel::after {
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    opacity: .42;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .055), transparent 27%),
        radial-gradient(380px 180px at 50% 0%, var(--accent-soft), transparent 76%);
    transition: opacity .42s ease;
}

.login-panel.is-active {
    z-index: 2;
    opacity: 1;
    filter: none;
    transform: translateY(0) scale(1);
    border-color: var(--accent);
    background: linear-gradient(145deg, rgba(10, 44, 80, .88), rgba(3, 22, 42, .96)), var(--panel-strong);
    box-shadow:
        0 0 0 1px var(--accent-soft),
        0 0 31px var(--accent-soft),
        0 28px 74px rgba(0, 6, 18, .56),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

.partner-panel.is-active {
    background: linear-gradient(145deg, rgba(53, 24, 43, .76), rgba(5, 22, 39, .96)), var(--panel-strong);
}

.login-panel.is-active::before {
    opacity: .4;
    transform: scale(1);
}

.login-panel.is-active::after {
    opacity: .78;
}

.panel-header {
    min-height: 82px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rotadesk-logo {
    display: block;
    width: 82px;
    height: 82px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
}

.partner-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.partner-brand > svg {
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    filter: drop-shadow(0 7px 18px rgba(0, 0, 0, .22));
}

.partner-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.partner-brand-copy strong {
    font-size: clamp(19px, 1.8vw, 26px);
    font-weight: 760;
    letter-spacing: -.025em;
}

.partner-brand-copy span {
    margin-top: 7px;
    color: var(--muted);
    font-size: clamp(12px, 1.15vw, 16px);
    white-space: nowrap;
}

.mode-badge {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    background: linear-gradient(135deg, #168eff, #0874ed);
    box-shadow: 0 11px 26px rgba(13, 126, 247, .28);
    font-size: clamp(13px, 1.25vw, 17px);
    font-weight: 700;
    white-space: nowrap;
    transition: filter .42s ease, box-shadow .42s ease, transform .42s var(--ease-out);
}

.partner-panel .mode-badge {
    background: linear-gradient(135deg, var(--red-deep), var(--red));
    box-shadow: 0 11px 26px rgba(199, 25, 58, .28);
}

.login-panel:not(.is-active) .mode-badge {
    filter: grayscale(.42) brightness(.76);
    box-shadow: none;
    transform: scale(.97);
}

.mode-badge svg {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
}

.partner-panel .mode-badge svg {
    width: 29px;
}

.credentials {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    display: grid;
    gap: 11px;
    transition: opacity .4s ease, transform .48s var(--ease-out);
}

.login-panel:not(.is-active) .credentials {
    opacity: .57;
    transform: translateY(5px);
    pointer-events: none;
    user-select: none;
}

.input-shell {
    position: relative;
    min-width: 0;
    height: 56px;
    border: 1px solid rgba(137, 183, 218, .27);
    border-radius: 13px;
    display: flex;
    align-items: center;
    background: var(--input);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 10px 28px rgba(0, 6, 15, .1);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.input-shell:focus-within {
    border-color: var(--accent);
    background: rgba(1, 18, 35, .88);
    box-shadow: 0 0 0 4px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, .04);
    transform: translateY(-1px);
}

.field-icon {
    width: 22px;
    height: 22px;
    margin-left: 15px;
    flex: 0 0 auto;
    color: #f6fbff;
}

.field-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 14px;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    caret-color: var(--accent);
    font-size: clamp(14px, 1.25vw, 17px);
    font-weight: 450;
}

.password-input {
    padding-right: 54px;
}

.field-input::placeholder {
    color: #9ebedf;
    opacity: .92;
}

.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #071c32 inset;
    caret-color: #fff;
    transition: background-color 9999s ease-out;
}

.password-toggle {
    position: absolute;
    right: 9px;
    top: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f6fbff;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.password-toggle:hover {
    color: #fff;
    background: rgba(151, 198, 236, .11);
}

.password-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    background: rgba(151, 198, 236, .14);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.password-toggle:active {
    transform: translateY(-50%) scale(.94);
}

.password-toggle svg {
    width: 23px;
    height: 23px;
}

.password-toggle .icon-eye-off,
.password-toggle.is-visible .icon-eye {
    display: none;
}

.password-toggle.is-visible .icon-eye-off {
    display: block;
}

.form-options {
    min-height: 26px;
    display: flex;
    align-items: center;
}

.remember-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f5f9ff;
    font-size: 14px;
    font-weight: 620;
    cursor: pointer;
    user-select: none;
}

.remember-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.checkbox-ui {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    border: 2px solid #88b6de;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(2, 17, 32, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.checkbox-ui svg {
    width: 18px;
    height: 18px;
    opacity: 0;
    transform: scale(.55);
    transition: opacity .18s ease, transform .22s var(--ease-out);
}

.remember-control:hover .checkbox-ui {
    border-color: var(--accent);
}

.remember-control input:focus-visible + .checkbox-ui {
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.remember-control input:checked + .checkbox-ui {
    border-color: var(--accent);
    background: var(--accent);
}

.remember-control input:checked + .checkbox-ui svg {
    opacity: 1;
    transform: scale(1);
}

.turnstile-slot {
    min-width: 0;
    min-height: 78px;
    display: flex;
    align-items: stretch;
}

.turnstile-slot:not(.has-widget)::before {
    width: 100%;
    min-height: 78px;
    content: "Cloudflare doğrulaması aktif girişte açılır";
    border: 1px dashed rgba(143, 185, 218, .2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(169, 198, 232, .68);
    font-size: 12px;
    text-align: center;
}

.turnstile-shell {
    width: 100%;
    min-height: 78px;
    padding: 6px 8px 6px 10px;
    border: 1px solid rgba(137, 183, 218, .25);
    border-radius: 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    background: rgba(1, 15, 29, .48);
    animation: secureIn .38s var(--ease-out) both;
}

.turnstile-shell.is-verified {
    border-color: rgba(85, 217, 149, .58);
    box-shadow: 0 0 0 3px rgba(85, 217, 149, .08);
}

.security-label {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.security-label > svg {
    width: 25px;
    height: 25px;
    color: #b8d7f3;
}

.security-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.security-copy strong {
    color: #eaf5ff;
    font-size: 11px;
    font-weight: 700;
}

.security-copy span {
    color: var(--muted);
    font-size: 9px;
}

.turnstile-frame,
#turnstileMount {
    min-width: 0;
    min-height: 65px;
}

.turnstile-frame {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#turnstileMount {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.turnstile-error {
    position: absolute;
    inset: 0;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffd9df;
    background: rgba(47, 9, 18, .96);
    text-align: center;
}

.turnstile-error[hidden] {
    display: none;
}

.turnstile-error span {
    font-size: 11px;
    line-height: 1.35;
}

.turnstile-retry {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(255, 217, 223, .42);
    border-radius: 9px;
    color: #fff;
    background: rgba(219, 39, 72, .24);
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.turnstile-retry:hover,
.turnstile-retry:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    background: rgba(219, 39, 72, .42);
}

.security-unavailable {
    min-height: 78px;
    padding: 12px;
    border: 1px solid rgba(255, 138, 156, .5);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffd9df;
    background: rgba(67, 11, 24, .42);
    font-size: 12px;
    line-height: 1.45;
}

.security-unavailable svg {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
}

.turnstile-shell.is-compact {
    min-height: 158px;
    grid-template-columns: 1fr;
}

.turnstile-shell.is-compact .security-label {
    display: none;
}

.turnstile-shell.is-compact .turnstile-frame,
.turnstile-shell.is-compact #turnstileMount {
    min-height: 140px;
}

.turnstile-shell.is-compact #turnstileMount {
    width: 150px;
    max-width: 150px;
    margin: 0 auto;
}

.submit-button {
    position: relative;
    width: 100%;
    height: 54px;
    padding: 0 20px;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #1593ff, #0877f6);
    box-shadow: 0 15px 32px rgba(8, 118, 244, .23), inset 0 1px 0 rgba(255, 255, 255, .15);
    cursor: pointer;
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 760;
    letter-spacing: -.015em;
    transition: transform .18s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.partner-panel .submit-button {
    background: linear-gradient(135deg, #d92849, #c9193c);
    box-shadow: 0 15px 32px rgba(201, 25, 60, .23), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.submit-button::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .2) 46%, transparent 70%);
    transform: translateX(-100%);
}

.submit-button:hover {
    filter: brightness(1.09);
    box-shadow: 0 17px 37px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

.submit-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px var(--accent-soft), 0 17px 37px var(--accent-soft);
}

.submit-button:hover::before {
    opacity: 1;
    animation: buttonShine .75s ease both;
}

.submit-button:active {
    transform: translateY(0) scale(.995);
}

.submit-button:disabled {
    cursor: not-allowed;
    opacity: .68;
    filter: grayscale(.15);
    transform: none;
    box-shadow: none;
}

.submit-button.is-loading {
    pointer-events: none;
}

.submit-button.is-loading::after {
    width: 17px;
    height: 17px;
    margin-left: 11px;
    border: 2px solid rgba(255, 255, 255, .34);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    content: "";
    vertical-align: -3px;
    animation: loginSpin .72s linear infinite;
}

.panel-activator {
    position: absolute;
    z-index: 5;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    color: #e9f5ff;
    background: transparent;
    cursor: pointer;
    transition: background .25s ease;
}

.panel-activator:disabled {
    pointer-events: none;
    opacity: 0;
}

.panel-activator:not(:disabled):hover {
    background: rgba(10, 42, 71, .08);
}

.panel-activator:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -7px;
    box-shadow: 0 0 0 7px var(--accent-soft) inset;
}

.switch-hint {
    position: absolute;
    right: 16px;
    bottom: 14px;
    padding: 7px 10px;
    border: 1px solid rgba(173, 208, 235, .22);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #d8ebfb;
    background: rgba(2, 16, 30, .67);
    box-shadow: 0 8px 22px rgba(0, 4, 10, .22);
    font-size: 10px;
    font-weight: 650;
    opacity: .82;
    transition: opacity .2s ease, transform .28s var(--ease-out), border-color .2s ease;
}

.panel-activator:hover .switch-hint,
.panel-activator:focus-visible .switch-hint {
    opacity: 1;
    border-color: var(--accent);
    transform: translateX(-4px);
}

.switch-hint svg {
    width: 14px;
    height: 14px;
}

.choice-divider {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
}

.choice-divider::before {
    width: 1px;
    height: 220px;
    content: "";
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(75, 163, 237, .9) 18%,
        rgba(75, 163, 237, .9) 82%,
        transparent
    );
}

.page-footer {
    margin-top: 18px;
    color: #90b2d2;
    font-size: 12px;
    text-align: center;
    letter-spacing: .02em;
}

@keyframes introIn {
    from { opacity: 0; transform: translateY(-13px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes stageIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes secureIn {
    from { opacity: 0; transform: translateY(5px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes buttonShine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

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

@media (max-width: 1160px) {
    .login-shell {
        width: min(1000px, calc(100% - 34px));
    }

    .login-stage,
    .login-stage[data-mode="partner"] {
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
        gap: 12px;
    }

    .login-panel {
        min-height: 460px;
        padding-right: 21px;
        padding-left: 21px;
    }

    .panel-header {
        gap: 12px;
    }

    .mode-badge {
        min-height: 46px;
        padding: 0 14px;
        border-radius: 14px;
    }

    .mode-badge svg {
        width: 22px;
        height: 22px;
    }

    .rotadesk-logo {
        width: 76px;
        height: 76px;
    }

    .partner-brand > svg {
        width: 44px;
        height: 44px;
    }

    .turnstile-shell {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .security-label {
        display: none;
    }
}

@media (max-width: 820px) {
    .login-shell {
        width: min(650px, calc(100% - 28px));
        min-height: auto;
        padding-top: 34px;
    }

    .intro {
        margin-bottom: 28px;
    }

    .intro h1 {
        font-size: clamp(29px, 8vw, 40px);
    }

    .login-stage,
    .login-stage[data-mode="partner"] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .login-panel {
        min-height: 0;
        max-height: 760px;
        padding: 26px 24px 28px;
        transform: none;
        transition:
            max-height .55s var(--ease-out),
            opacity .38s ease,
            border-color .38s ease,
            background .38s ease,
            box-shadow .45s ease;
    }

    .login-panel:not(.is-active) {
        order: 3;
        max-height: 120px;
        opacity: .61;
    }

    .login-panel.is-active {
        order: 1;
    }

    .choice-divider {
        order: 2;
        min-height: 28px;
    }

    .choice-divider::before {
        width: min(190px, 56vw);
        height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            rgba(75, 163, 237, .9) 18%,
            rgba(75, 163, 237, .9) 82%,
            transparent
        );
    }

    .panel-header {
        min-height: 82px;
        margin-bottom: 20px;
    }

    .login-panel:not(.is-active) .panel-header {
        margin-bottom: 26px;
    }

    .rotadesk-logo {
        width: 82px;
        height: 82px;
    }

    .partner-brand > svg {
        width: 46px;
        height: 46px;
    }

    .mode-badge {
        min-height: 50px;
    }

    .switch-hint {
        right: 17px;
        bottom: 9px;
    }
}

@media (max-width: 560px) {
    .login-shell {
        width: min(calc(100% - 20px), 520px);
        padding-top: 26px;
    }

    .intro h1 {
        font-size: clamp(27px, 8.8vw, 36px);
        line-height: 1.12;
    }

    .login-panel {
        padding: 22px 17px 23px;
        border-radius: 19px;
    }

    .login-panel:not(.is-active) {
        max-height: 106px;
    }

    .panel-header {
        min-height: 66px;
        gap: 9px;
        margin-bottom: 18px;
    }

    .rotadesk-logo {
        width: 66px;
        height: 66px;
        border-radius: 15px;
    }

    .partner-brand {
        gap: 9px;
    }

    .partner-brand > svg {
        width: 36px;
        height: 36px;
    }

    .partner-brand-copy strong {
        font-size: 18px;
    }

    .partner-brand-copy span {
        margin-top: 4px;
        font-size: 11px;
    }

    .mode-badge {
        min-height: 44px;
        padding: 0 12px;
        gap: 7px;
        border-radius: 13px;
        font-size: 12px;
    }

    .mode-badge svg {
        width: 21px;
        height: 21px;
    }

    .credentials {
        gap: 13px;
    }

    .input-shell,
    .submit-button {
        height: 60px;
        border-radius: 14px;
    }

    .field-icon {
        width: 24px;
        height: 24px;
        margin-left: 17px;
    }

    .field-input {
        padding: 0 14px;
        font-size: 14px;
    }

    .password-input {
        padding-right: 54px;
    }

    .password-toggle {
        right: 7px;
        width: 43px;
        height: 43px;
    }

    .password-toggle svg {
        width: 23px;
        height: 23px;
    }

    .remember-control {
        gap: 10px;
        font-size: 14px;
    }

    .checkbox-ui {
        width: 26px;
        height: 26px;
        border-radius: 7px;
    }

    .turnstile-shell {
        padding: 8px;
    }

    .turnstile-slot,
    .turnstile-slot:not(.has-widget)::before,
    .turnstile-shell {
        min-height: 81px;
    }

    .switch-hint {
        right: 12px;
        bottom: 7px;
        padding: 6px 9px;
        font-size: 10px;
    }
}

@media (max-width: 400px) {
    .turnstile-slot,
    .turnstile-slot:not(.has-widget)::before,
    .turnstile-shell.is-compact {
        min-height: 158px;
    }

    .partner-brand-copy span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}