/* Giris ekrani (Themes/Metronic8/Views/Account/Login.cshtml).
   Varsayilan REOS: koyu zemin, solda form karti, sagda "baglanti haritasi" animasyonu (portfoy -> yayin -> talep
   eslesmesi -> yer gosterimi/ekip -> satildi; 20 sn dongu). Animasyon tamamen CSS (transform/opacity agirlikli),
   her karede JS cizimi yok; mahalle cizimi sabit SVG (img/login-city.svg). Markalar: bugunku tam sayfa kendi
   gorseli + ayni form karti. Form alanlari Sala 1.0.0 yapisindan; Sala/Bootstrap/jQuery dosyalari yuklenmez.
   Metronic8 html font-size 13px oldugu icin rem degil px kullanilir. Tum siniflar reos-login- / rl- on ekli. */

.reos-login {
    --reos-login-navy: #17479E;
    --reos-login-navy-dark: #123C88;
    --reos-login-ink: #173355;
    --reos-login-muted: #5F7287;
    --reos-login-soft: #657C95;
    --reos-login-field: #F4F7FB;
    --reos-login-line: #DFE7EF;
    --reos-login-line-soft: #E4EBF2;
    --reos-login-focus: #1B8BA0;
    --reos-login-danger: #C8323C;
    --reos-login-accent: #7FD8E6;
    --reos-login-cyan: #22B6CD;
    --reos-login-red: #ED243F;
    --reos-login-night: #0B1442;
    /* Sahne icin canli palet (logo kirmizisina yakin pembe dahil) */
    --rl-cyan: #22D3EE;
    --rl-blue: #3B82F6;
    --rl-violet: #8B5CF6;
    --rl-pink: #F43F5E;
    --rl-amber: #FBBF24;
    --rl-mint: #34D399;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.reos-login--default {
    background: var(--reos-login-night);
}

.reos-login-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Varsayilan REOS: form solda, sahne sagda ---------- */
.reos-login-hero {
    position: relative;
    flex: 1 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(400px, 480px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    padding: 84px clamp(24px, 4.5vw, 88px) 36px;
    overflow: hidden;
    isolation: isolate;
}

/* Koyu zemin: nokta deseni + yumusak isik lekeleri (sadece CSS) */
.reos-login-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 28px 28px,
        radial-gradient(900px 620px at 82% 18%, rgba(139, 92, 246, .42), transparent 62%),
        radial-gradient(900px 640px at 62% 92%, rgba(34, 211, 238, .26), transparent 60%),
        radial-gradient(700px 520px at 0% 0%, rgba(244, 63, 94, .20), transparent 60%),
        linear-gradient(135deg, #0B1442 0%, #13237E 52%, #0A2A6E 100%);
}

    /* Ucuncu isik lekesi (mor), sahnenin arkasinda yavasca dolasir */
    .reos-login-bg::after {
        content: "";
        position: absolute;
        right: 10vw;
        top: 30vh;
        width: 38vw;
        height: 38vw;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(139, 92, 246, .30), transparent);
        animation: rl-drift 16s ease-in-out infinite reverse;
    }

.reos-login-glow {
    position: absolute;
    width: 46vw;
    height: 46vw;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(34, 211, 238, .30), transparent);
    animation: rl-drift 14s ease-in-out infinite;
}

.reos-login-glow--a {
    right: -8vw;
    top: -14vw;
}

.reos-login-glow--b {
    right: 24vw;
    bottom: -22vw;
    background: radial-gradient(closest-side, rgba(244, 63, 94, .24), transparent);
    animation-duration: 18s;
    animation-direction: reverse;
}

/* Sol: form karti */
.reos-login-side {
    display: flex;
    justify-content: flex-start;
}

/* Kart konumlandirilmaz (position yok): dil secici sayfanin sag ust kosesine (.reos-login-hero) gore yerlesir.
   Ustteki ince marka seridi (camgobegi -> mavi) bu yuzden arka plan katmani olarak cizilir. */
.reos-login-card--hero {
    width: 100%;
    max-width: 480px;
    padding: 32px 40px 20px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, #22D3EE, #3B82F6) top center / calc(100% - 56px) 4px no-repeat,
        #fff;
    box-shadow: 0 32px 80px -24px rgba(2, 6, 32, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}

.reos-login-cardlogo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto 22px;
}

.reos-login-card-footer {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #94A3B8;
}

/* Sag: baslik + sahne + adimlar */
.reos-login-showcase {
    --rl-cycle: 14s;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #fff;
}

.reos-login-pitch {
    width: min(100%, 980px);
}

.reos-login-hero-title {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(30px, 2.8vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.2px;
    color: #fff;
    text-wrap: balance;
}

    /* Vurgu: iki yakin ton (camgobegi -> acik mavi), yavas ve hafif bir parilti */
    .reos-login-hero-title span {
        color: var(--rl-cyan);
        background: linear-gradient(90deg, #22D3EE 0%, #93C5FD 50%, #22D3EE 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: rl-sheen 8s linear infinite;
    }

.reos-login-hero-sub {
    max-width: 640px;
    margin: 10px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}

/* Sahne: 16:10 kutu; ekran yuksekligine gore kuculur. Icerik olcegi kutu genisligine bagli (cqw). */
.reos-login-scene {
    --px: 0;
    --py: 0;
    position: relative;
    width: min(100%, 980px, calc((100vh - 320px) * 1.6));
    aspect-ratio: 16 / 10;
    container-type: inline-size;
}

.reos-login-scene-back,
.reos-login-scene-front {
    position: absolute;
    inset: 0;
    transition: transform .5s ease-out;
}

.reos-login-scene-back {
    transform: translate3d(calc(var(--px) * -5px), calc(var(--py) * -4px), 0);
}

.reos-login-scene-front {
    transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 5px), 0);
    font-size: 12px;
    font-size: calc(100cqw / 70);
    line-height: 1.3;
}

/* Mahalle: sayfaya gomulu SVG (_LoginCity.cshtml); golge SVG icinde, filtre yok */
.reos-login-city {
    position: absolute;
    left: 18%;
    top: 24.96%;
    width: 64%;
    height: auto;
    aspect-ratio: 850 / 570;
    overflow: visible;
}

/* Mahalle icindeki hareketler: araba isiklari, cati lambalari, kipirdayan pencereler, parilti */
.rlc-car {
    fill: none;
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-dasharray: 1.4 98.6;
    animation: rl-car 4.4s linear infinite;
}

.rlc-car--a {
    stroke: #FFF1BF;
}

.rlc-car--b {
    stroke: #FF5C7A;
    animation-duration: 5.6s;
    animation-delay: -2s;
}

.rlc-car--c {
    stroke: #A5F3FC;
    animation-duration: 3.8s;
    animation-delay: -1.2s;
}

.rlc-car--d {
    stroke: #FFD27A;
    animation-duration: 6.2s;
    animation-delay: -3.4s;
}

.rlc-car--rev {
    animation-direction: reverse;
}

.rlc-beacon {
    animation: rl-beacon 1.6s ease-in-out infinite;
}

.rlc-beacon--red {
    fill: #FF3D6E;
}

.rlc-beacon--cyan {
    fill: #67E8F9;
}

.rlc-b2 {
    animation-delay: -.5s;
}

.rlc-b3 {
    animation-delay: -1.1s;
}

.rlc-tw {
    animation: rl-twinkle 3.2s steps(1, end) infinite;
}

.rlc-tw2 {
    animation-duration: 4.1s;
    animation-delay: -1.3s;
}

.rlc-tw3 {
    animation-duration: 2.7s;
    animation-delay: -2.1s;
}

.rlc-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: rl-glowpulse 3s ease-in-out infinite;
}

.reos-login-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Baglanti cizgileri: her kanal kendi renginde; ustunde beyaz isik paketi akar */
.reos-login-track {
    fill: none;
    stroke: var(--rl-cyan);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    opacity: .9;
}

.reos-login-track--link {
    stroke: #A5F3FC;
}

.reos-login-track--web {
    stroke: var(--rl-cyan);
}

.reos-login-track--portals {
    stroke: var(--rl-violet);
}

.reos-login-track--social {
    stroke: var(--rl-pink);
}

.reos-login-track--network {
    stroke: var(--rl-amber);
}

.reos-login-track--client {
    stroke: var(--rl-mint);
}

.reos-login-track--ai {
    stroke: #C084FC;
}

.reos-login-flow {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-dasharray: 3 47;
}

/* Satis oku: 5. adimda talepten ilana tek bir parlak ok gider (desen > yol uzunlugu, tek parca gorunur) */
.reos-login-flow--shot {
    stroke: #ECFEFF;
    stroke-width: 6;
    stroke-dasharray: 14 186;
    stroke-dashoffset: 14;
    opacity: 0;
}

/* Okun arkasindaki parlak iz (ayni zamanlama, genis ve yari saydam) */
.reos-login-flow--shotglow {
    stroke: #6EF7C0;
    stroke-width: 12;
    stroke-dasharray: 14 186;
    stroke-dashoffset: 14;
    stroke-opacity: .35;
    opacity: 0;
}

.reos-login-ping {
    fill: none;
    stroke: var(--rl-cyan);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: rl-ping 2s ease-out infinite;
}

.reos-login-ping--late {
    stroke: var(--rl-violet);
    animation-delay: 1s;
}

.reos-login-burst {
    fill: none;
    stroke: var(--rl-pink);
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

/* Dugumler (yayin kanallari) */
.reos-login-node {
    position: absolute;
    transform: translate(-50%, -1.6em);
}

.reos-login-node-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35em;
}

.reos-login-node-icon {
    --rl-node-a: var(--rl-cyan);
    --rl-node-b: var(--rl-blue);
    display: grid;
    place-items: center;
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rl-node-a), var(--rl-node-b));
    box-shadow: 0 0 0 .35em rgba(255, 255, 255, .12), 0 .6em 1.4em rgba(0, 0, 0, .35);
    box-shadow: 0 0 0 .35em color-mix(in srgb, var(--rl-node-a) 25%, transparent), 0 0 1.6em color-mix(in srgb, var(--rl-node-a) 55%, transparent), 0 .6em 1.4em rgba(0, 0, 0, .35);
    color: #fff;
}

.reos-login-node--portals .reos-login-node-icon {
    --rl-node-a: var(--rl-violet);
    --rl-node-b: #6366F1;
}

.reos-login-node--social .reos-login-node-icon {
    --rl-node-a: var(--rl-pink);
    --rl-node-b: #EC4899;
}

.reos-login-node--network .reos-login-node-icon {
    --rl-node-a: var(--rl-amber);
    --rl-node-b: #F97316;
}

    .reos-login-node-icon svg,
    .reos-login-sc svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .reos-login-node-icon svg {
        width: 1.5em;
        height: 1.5em;
    }

.reos-login-node-label {
    font-size: .95em;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.reos-login-node-ok {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    padding: .15em .6em;
    border-radius: 999px;
    background: rgba(52, 211, 153, .2);
    color: #6EF7C0;
    font-size: .8em;
    font-weight: 600;
    white-space: nowrap;
}

    .reos-login-node-ok svg {
        width: 1em;
        height: 1em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Sahne kartlari */
.reos-login-sc {
    position: absolute;
    transform: translate(-50%, -50%);
}

.reos-login-sc-in {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .7em .95em;
    border: 1.5px solid transparent;
    border-radius: .9em;
    background:
        linear-gradient(180deg, rgba(31, 42, 128, .96), rgba(17, 25, 84, .96)) padding-box,
        linear-gradient(135deg, var(--rl-cyan), var(--rl-violet) 55%, var(--rl-pink)) border-box;
    box-shadow: 0 1em 2.4em rgba(3, 6, 30, .45), 0 0 1.8em rgba(139, 92, 246, .25);
    white-space: nowrap;
}

.reos-login-sc-thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.4em;
    height: 3.4em;
    border-radius: .6em;
    background: linear-gradient(135deg, var(--rl-cyan), var(--rl-violet));
    color: #fff;
}

    .reos-login-sc-thumb svg {
        width: 1.8em;
        height: 1.8em;
    }

.reos-login-sc-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rl-mint), var(--rl-cyan));
    color: #052E2B;
}

    .reos-login-sc-avatar svg {
        width: 1.4em;
        height: 1.4em;
    }

.reos-login-sc-avatar--sq {
    border-radius: .55em;
    background: linear-gradient(135deg, var(--rl-amber), #F97316);
    color: #3B1A02;
}

.reos-login-sc-avatar--ok {
    background: linear-gradient(135deg, #A3E635, var(--rl-mint));
}

/* 4. adim: "Yapay zeka ozellikleri" karti (baslik -> "Hazir") */
.reos-login-sc-avatar--ai {
    border-radius: .7em;
    background: linear-gradient(135deg, var(--rl-violet), var(--rl-pink));
    color: #fff;
    box-shadow: 0 0 1.2em rgba(192, 132, 252, .55);
}

.reos-login-sc-in--ai {
    background:
        linear-gradient(180deg, rgba(46, 30, 120, .96), rgba(28, 20, 84, .96)) padding-box,
        linear-gradient(135deg, var(--rl-violet), var(--rl-pink)) border-box;
    box-shadow: 0 1em 2.4em rgba(3, 6, 30, .45), 0 0 2em rgba(192, 132, 252, .35);
}

.reos-login-sc-typing {
    display: flex;
    flex-direction: column;
    gap: .28em;
    margin: .4em 0 .25em;
}

    .reos-login-sc-typing i {
        display: block;
        height: .3em;
        border-radius: .2em;
        background: linear-gradient(90deg, rgba(196, 181, 253, .95), rgba(244, 114, 182, .75));
        transform-origin: left center;
    }

        .reos-login-sc-typing i:nth-child(1) {
            width: 9em;
        }

        .reos-login-sc-typing i:nth-child(2) {
            width: 7.4em;
        }

        .reos-login-sc-typing i:nth-child(3) {
            width: 5em;
        }

.reos-login-sc-text .reos-login-sc-ready {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    color: #6EF7C0;
    font-weight: 600;
}

    .reos-login-sc-ready svg {
        width: 1em;
        height: 1em;
        stroke-width: 2.8;
    }

.reos-login-sc-text {
    display: flex;
    flex-direction: column;
    gap: .15em;
}

    .reos-login-sc-text b {
        font-size: 1em;
        font-weight: 600;
        color: #fff;
    }

    .reos-login-sc-text small {
        font-size: .85em;
        color: rgba(255, 255, 255, .76);
    }

/* 1. adim: portfoy kartinda yapay zeka ilan aciklamasini yazar */
.reos-login-sc-typing--listing {
    margin: .35em 0 0;
}

.reos-login-sc-ai {
    position: absolute;
    left: -.6em;
    bottom: -1em;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .22em .7em .22em .5em;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--rl-violet), var(--rl-pink));
    color: #fff;
    font-size: .8em;
    font-weight: 700;
    box-shadow: 0 .4em 1.1em rgba(192, 132, 252, .55);
}

    .reos-login-sc-ai svg {
        width: 1.05em;
        height: 1.05em;
        stroke-width: 2;
    }

.reos-login-sc-stamp {
    position: absolute;
    right: -.9em;
    top: -1em;
    z-index: 2;
    padding: .25em .75em;
    border-radius: .4em;
    background: linear-gradient(135deg, #FF4D6D, var(--reos-login-red));
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(-8deg);
    box-shadow: 0 .4em 1.2em rgba(244, 63, 94, .6), 0 0 0 .15em rgba(255, 255, 255, .25);
}

/* SATILDI aninda konfeti (sadece animasyonda gorunur) */
.reos-login-confetti {
    position: absolute;
    right: 1.6em;
    top: -.2em;
    width: .6em;
    height: 1.05em;
    border-radius: .12em;
    background: var(--c, var(--rl-pink));
    box-shadow: 0 0 .5em color-mix(in srgb, var(--c, #F43F5E) 60%, transparent);
    opacity: 0;
    pointer-events: none;
}

.reos-login-sc-match {
    position: absolute;
    right: -.6em;
    bottom: -.95em;
    display: inline-flex;
    align-items: center;
    gap: .25em;
    padding: .2em .65em;
    border-radius: 999px;
    background: linear-gradient(135deg, #6EF7C0, var(--rl-mint));
    color: #053B26;
    font-size: .8em;
    font-weight: 700;
    box-shadow: 0 .4em 1em rgba(52, 211, 153, .5);
}

    .reos-login-sc-match svg {
        width: 1em;
        height: 1em;
        stroke-width: 2.8;
    }

.reos-login-particle {
    position: absolute;
    width: .35em;
    height: .35em;
    border-radius: 50%;
    background: #A5F3FC;
    box-shadow: 0 0 .7em var(--rl-cyan);
    opacity: 0;
    animation: rl-float 6s linear infinite;
    animation-delay: var(--d, 0s);
}

    .reos-login-particle:nth-of-type(3n) {
        background: #DDD6FE;
        box-shadow: 0 0 .7em var(--rl-violet);
    }

    .reos-login-particle:nth-of-type(4n) {
        background: #FECDD3;
        box-shadow: 0 0 .7em var(--rl-pink);
    }

/* Adim cubugu */
.reos-login-steps {
    width: min(100%, 980px);
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.reos-login-steplist {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reos-login-step-bar {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

    .reos-login-step-bar i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--rl-cyan), var(--rl-violet), var(--rl-pink));
        transform-origin: left center;
    }

.reos-login-step-label {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: #fff;
}

    .reos-login-step-label b {
        color: var(--rl-cyan);
        font-weight: 700;
    }

/* Duraklat/Oynat (hareket 5 sn'den uzun surdugu icin erisilebilirlik geregi) */
.reos-login-pause {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: 500 13px "Poppins", system-ui, sans-serif;
    cursor: pointer;
}

    .reos-login-pause:hover {
        background: rgba(255, 255, 255, .14);
    }

    .reos-login-pause svg {
        width: 12px;
        height: 12px;
        flex: none;
    }

    .reos-login-pause .reos-login-icon-play,
    .reos-login-pause.is-paused .reos-login-icon-pause {
        display: none;
    }

    .reos-login-pause.is-paused .reos-login-icon-play {
        display: block;
    }

.reos-login-showcase.is-paused *,
.reos-login-showcase.is-paused {
    animation-play-state: paused !important;
}

/* ---------- Markalar: bugunku duzen, kart beyaz kalir (koyu tema secilse de) ---------- */
.reos-login-card {
    background: #fff;
}

.reos-login-brandlogo {
    text-align: center;
    margin: 0 0 24px;
}

    /* Logo bugunku gibi 250px (img width="250"); dar ekranda tasmasin */
    .reos-login-brandlogo img {
        max-width: 100%;
        height: auto;
    }

/* ---------- Dil secimi ---------- */
.reos-login-lang {
    position: relative;
    z-index: 20;
    color: #475569;
}

/* Varsayilanda sayfanin sag ust kosesi (kapsayici: .reos-login-hero) */
.reos-login--default .reos-login-lang {
    position: absolute;
    top: 22px;
    right: clamp(24px, 5vw, 96px);
}

.reos-login--brand .reos-login-lang {
    width: max-content;
    margin: 0 0 16px auto;
}

.reos-login-lang summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 6px 14px;
    list-style: none;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

    .reos-login-lang summary:hover {
        border-color: #CBD5E1;
    }

/* Koyu zemin uzerinde yari saydam (cam) gorunum */
.reos-login--default .reos-login-lang summary {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
}

    .reos-login--default .reos-login-lang summary:hover {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .32);
    }

    .reos-login-lang summary::-webkit-details-marker {
        display: none;
    }

    .reos-login-lang summary::marker {
        content: "";
    }

    .reos-login-lang summary .reos-login-chevron {
        width: 12px;
        height: 12px;
        transition: transform .2s;
    }

.reos-login-lang[open] summary .reos-login-chevron {
    transform: rotate(180deg);
}

.reos-login-lang-current {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reos-login-flag {
    display: block;
    flex-shrink: 0;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.reos-login-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 236px;
    padding: 8px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 20px 48px -12px rgba(15, 23, 42, .28);
}

    .reos-login-lang-menu p {
        margin: 6px 10px 8px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .04em;
        color: #94A3B8;
    }

    .reos-login-lang-menu a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 14px;
        color: #1E293B;
        text-decoration: none;
    }

        .reos-login-lang-menu a:hover {
            background: #F1F5F9;
            color: #0F172A;
        }

        .reos-login-lang-menu a[aria-current="true"] {
            background: #EEF2FF;
            color: #1E3A8A;
            font-weight: 600;
        }

        .reos-login-lang-menu a .reos-login-check-icon {
            margin-left: auto;
            width: 16px;
            height: 16px;
            color: #4F46E5;
            visibility: hidden;
        }

        .reos-login-lang-menu a[aria-current="true"] .reos-login-check-icon {
            visibility: visible;
        }

/* ---------- Sekmeler (Giris Yap / Uye Ol): kayan secili dugme ---------- */
.reos-login-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
    border-radius: 14px;
    background: #F1F5F9;
}

.reos-login-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #64748B;
    text-decoration: none;
    transition: color .2s, background-color .2s;
}

    a.reos-login-tab:hover {
        color: #1E293B;
        background: rgba(255, 255, 255, .6);
    }

.reos-login-tab--active {
    background: #fff;
    color: #1E3A8A;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px -4px rgba(15, 23, 42, .12);
}

/* ---------- Baslik ---------- */
.reos-login-message:empty {
    display: none;
}

.reos-login-message .alert {
    margin-bottom: 20px !important;
    border-radius: 12px !important;
}

.reos-login-head {
    margin-bottom: 24px;
}

.reos-login-title {
    margin: 0 0 6px;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.8px;
    color: #0F172A;
}

.reos-login-intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #64748B;
}

/* ---------- Alanlar: solda ikon, yumusak kose, odakta mavi parilti ---------- */
.reos-login-field {
    margin-bottom: 18px;
}

.reos-login-label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.reos-login-control {
    position: relative;
}

.reos-login-control-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color: #94A3B8;
    pointer-events: none;
    transition: color .2s;
}

    .reos-login-control-icon svg {
        display: block;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.reos-login-control:focus-within .reos-login-control-icon {
    color: #3B82F6;
}

.reos-login .reos-login-input {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 16px 0 46px;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    color: #0F172A;
    font: 400 16px "Poppins", system-ui, sans-serif;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

    .reos-login .reos-login-input::placeholder {
        color: #94A3B8;
        font-size: 15px;
        opacity: 1;
    }

    .reos-login .reos-login-input:hover {
        border-color: #CBD5E1;
    }

    .reos-login .reos-login-input:focus {
        outline: none;
        background: #fff;
        border-color: #3B82F6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, .18);
    }

    .reos-login .reos-login-input.input-validation-error {
        background: #FEF2F2;
        border-color: #EF4444;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, .1);
    }

.reos-login-password .reos-login-input {
    padding-right: 52px;
}

.reos-login-eye {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #94A3B8;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

    .reos-login-eye i {
        font-size: 18px;
        color: inherit;
    }

    .reos-login-eye:hover {
        color: #334155;
        background: #F1F5F9;
    }

.reos-login-error {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #DC2626 !important;
}

    .reos-login-error:empty {
        display: none;
    }

/* Beni hatirla + Sifremi unuttum */
.reos-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 20px;
}

/* Onay kutusu: gercek input gorunmez ama tiklanabilir/odaklanabilir kalir */
.reos-login-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

    .reos-login-check input[type=checkbox] {
        position: absolute;
        left: 0;
        top: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }

    .reos-login-check label {
        position: relative;
        margin: 0;
        padding-left: 30px;
        font-size: 14px;
        color: #334155;
        cursor: pointer;
    }

        .reos-login-check label:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 20px;
            height: 20px;
            margin-top: -10px;
            border: 1.5px solid #CBD5E1;
            border-radius: 6px;
            background: #fff;
            transition: background .15s, border-color .15s, box-shadow .15s;
        }

        .reos-login-check label:after {
            content: "";
            position: absolute;
            left: 7px;
            top: 50%;
            width: 6px;
            height: 11px;
            margin-top: -7px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) scale(.6);
            opacity: 0;
            transition: opacity .15s, transform .15s;
        }

    .reos-login-check input[type=checkbox]:checked ~ label:before {
        background: linear-gradient(135deg, #3B82F6, #4F46E5);
        border-color: transparent;
    }

    .reos-login-check input[type=checkbox]:checked ~ label:after {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

    .reos-login-check input[type=checkbox]:focus-visible ~ label:before {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, .25);
    }

.reos-login-link,
.reos-login a.reos-login-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
}

    .reos-login-link:hover,
    .reos-login a.reos-login-link:hover {
        color: #1D4ED8;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* Captcha (CaptchaMvc kendi id'lerini uretir) */
.reos-login-captcha {
    font-size: 14px;
    color: #64748B;
}

    .reos-login-captcha #CaptchaImage {
        display: block;
        width: 100%;
        max-width: 300px;
        height: 50px;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .reos-login-captcha #CaptchaInputText {
        display: block;
        width: 100%;
        height: 52px;
        margin: 6px 0 0;
        padding: 0 16px;
        border: 1.5px solid #E2E8F0;
        border-radius: 12px;
        background: #F8FAFC;
        color: #0F172A;
        font: 400 16px "Poppins", system-ui, sans-serif;
    }

        .reos-login-captcha #CaptchaInputText:focus {
            outline: none;
            background: #fff;
            border-color: #3B82F6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, .18);
        }

    .reos-login-captcha a {
        color: #2563EB;
        font-weight: 600;
    }

/* Giris dugmesi: mavi-indigo gradyan, ok ikonu, ustune gelince hafif yukselir */
.reos-login-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
    color: #fff;
    font: 600 15px "Poppins", system-ui, sans-serif;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 12px 24px -10px rgba(37, 99, 235, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

    .reos-login-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.06);
        box-shadow: 0 16px 30px -10px rgba(37, 99, 235, .7), inset 0 1px 0 rgba(255, 255, 255, .2);
    }

    .reos-login-btn:active {
        transform: translateY(0);
    }

    .reos-login-btn:disabled {
        opacity: .85;
        cursor: progress;
        transform: none;
    }

    .reos-login-btn .indicator-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .reos-login-btn-arrow {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .reos-login-btn:hover .reos-login-btn-arrow {
        transform: translateX(3px);
    }

    .reos-login-btn .indicator-progress {
        display: none;
    }

    .reos-login-btn[data-kt-indicator="on"] .indicator-label {
        display: none;
    }

    .reos-login-btn[data-kt-indicator="on"] .indicator-progress {
        display: inline-flex;
        align-items: center;
    }

/* veya + Google / Office 365 */
.reos-login-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94A3B8;
}

    .reos-login-or:before,
    .reos-login-or:after {
        content: "";
        flex: 1;
        height: 1px;
        background: #E2E8F0;
    }

.reos-login-social {
    display: flex;
    gap: 12px;
}

.reos-login-provider,
.reos-login a.reos-login-provider {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    font: 600 14px "Poppins", system-ui, sans-serif;
    line-height: 1.3;
    text-align: center;
    color: #1E293B;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, transform .15s, box-shadow .2s;
}

    .reos-login-provider:hover,
    .reos-login a.reos-login-provider:hover {
        border-color: #CBD5E1;
        background: #F8FAFC;
        color: #0F172A;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .25);
    }

    .reos-login-provider svg {
        width: 18px;
        height: 18px;
        flex: none;
    }

.reos-login-signup {
    margin: 20px 0 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: #64748B;
}

/* Gorunur klavye odagi */
.reos-login button:focus-visible,
.reos-login a:focus-visible,
.reos-login summary:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .55);
    outline-offset: 3px;
}

/* ---------- Ara genislik ---------- */
@media (min-width: 992px) and (max-width: 1279px) {
    .reos-login-hero {
        grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
        gap: 32px;
    }

    .reos-login-card--hero {
        padding: 26px 30px 18px;
    }

    .reos-login-hero-sub {
        font-size: 15px;
    }

    .reos-login-step-label {
        font-size: 12px;
    }

    .reos-login-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .reos-login-pause {
        align-self: flex-start;
    }
}

/* Kisa masaustu ekranlar (900px ve alti, ornek 1440x900): kart ekrana sigsin */
@media (min-width: 992px) and (max-height: 920px) {
    .reos-login-hero {
        padding-top: 76px;
        padding-bottom: 24px;
    }

    .reos-login-card--hero {
        padding: 24px 36px 16px;
    }

    .reos-login-cardlogo {
        width: 128px;
        margin-bottom: 14px;
    }

    .reos-login-tabs {
        margin-bottom: 16px;
    }

    .reos-login-tab {
        min-height: 40px;
    }

    .reos-login-head {
        margin-bottom: 16px;
    }

    .reos-login-title {
        font-size: 25px;
        margin-bottom: 4px;
    }

    .reos-login-field {
        margin-bottom: 12px;
    }

    .reos-login-label {
        margin-bottom: 6px;
    }

    .reos-login .reos-login-input,
    .reos-login-btn {
        height: 48px;
    }

    .reos-login-eye {
        top: 2px;
    }

    .reos-login-options {
        margin-bottom: 12px;
    }

    .reos-login-or {
        margin: 14px 0;
    }

    .reos-login-signup {
        margin-top: 10px;
    }

    .reos-login-card-footer {
        margin-top: 10px;
        padding-top: 10px;
    }

    .reos-login-showcase {
        gap: 12px;
    }

    .reos-login-hero-title {
        font-size: clamp(28px, 2.5vw, 42px);
    }
}

/* Laptop (1366x768 vb.) */
@media (min-width: 992px) and (max-height: 790px) {
    .reos-login-hero {
        padding-top: 68px;
        padding-bottom: 14px;
    }

    .reos-login-card--hero {
        padding: 20px 34px 14px;
    }

    .reos-login-cardlogo {
        width: 112px;
        margin-bottom: 10px;
    }

    .reos-login-tabs {
        margin-bottom: 12px;
    }

    .reos-login-title {
        font-size: 23px;
    }

    .reos-login-card-footer {
        display: none;
    }

    .reos-login-hero-sub {
        display: none;
    }

    .reos-login-scene {
        width: min(100%, 980px, calc((100vh - 230px) * 1.6));
    }
}

/* ---------- Mobil: animasyon yok, sadece koyu zemin + kart ---------- */
@media (max-width: 991px) {
    .reos-login-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: start;
        gap: 0;
        padding: 84px 16px 32px;
    }

    .reos-login-showcase {
        display: none;
    }

    .reos-login-side {
        width: 100%;
        justify-content: center;
    }

    .reos-login-card--hero {
        padding: 26px 22px 18px;
    }

    .reos-login--default .reos-login-lang {
        top: 20px;
        right: 16px;
    }
}

@media (max-width: 400px) {
    .reos-login-social {
        flex-direction: column;
    }

    .reos-login-tabs {
        gap: 24px;
    }
}

/* ---------- Hareket azaltma: animasyon yok, son durum (her sey bagli + satildi) sabit gorunur ---------- */
@media (prefers-reduced-motion: reduce) {
    .reos-login * {
        transition: none !important;
    }

    .reos-login-showcase *,
    .reos-login-glow,
    .reos-login-bg::after {
        animation: none !important;
    }

    .reos-login-flow,
    .reos-login-ping,
    .reos-login-burst,
    .reos-login-particle,
    .reos-login-confetti,
    .reos-login-pause {
        display: none;
    }

    .reos-login-hero-title span {
        -webkit-text-fill-color: currentColor;
        background: none;
    }

    .reos-login-scene-back,
    .reos-login-scene-front {
        transform: none !important;
    }
}

/* ---------- Surekli hareketler ---------- */
@keyframes rl-drift {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-3vw, 2vw, 0);
    }
}

@keyframes rl-ping {
    0% {
        opacity: .75;
        transform: scale(.55);
    }

    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

@keyframes rl-flow {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes rl-car {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes rl-beacon {
    0%, 100% {
        opacity: .25;
    }

    45%, 55% {
        opacity: 1;
    }
}

@keyframes rl-twinkle {
    0%, 100% {
        opacity: .92;
    }

    30% {
        opacity: .25;
    }

    62% {
        opacity: .92;
    }
}

@keyframes rl-glowpulse {
    0%, 100% {
        opacity: .75;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes rl-sheen {
    to {
        background-position: 200% 0;
    }
}

@keyframes rl-float {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    15% {
        opacity: .85;
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -9em, 0);
    }
}

/* ---------- Hikaye zaman cizelgesi (14 sn): asagidaki blok scratchpad/scene/gen-keyframes.js ile uretildi ---------- */
@keyframes rl-in-2 {
    0%, 2% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    4% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    5.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-2 { animation: rl-in-2 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-11 {
    0%, 11% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    13% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    14.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-11 { animation: rl-in-11 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-24 {
    0%, 24% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    26% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    27.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-24 { animation: rl-in-24 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-26 {
    0%, 26% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    28% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    29.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-26 { animation: rl-in-26 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-27 {
    0%, 27% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    29% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    30.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-27 { animation: rl-in-27 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-28 {
    0%, 28% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    30% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    31.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-28 { animation: rl-in-28 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-29 {
    0%, 29% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    31% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    32.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-29 { animation: rl-in-29 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-31 {
    0%, 31% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    33% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    34.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-31 { animation: rl-in-31 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-35 {
    0%, 35% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    37% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    38.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-35 { animation: rl-in-35 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-44 {
    0%, 44% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    46% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    47.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-44 { animation: rl-in-44 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-48 {
    0%, 48% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    50% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    51.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-48 { animation: rl-in-48 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-64 {
    0%, 64% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    66% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    67.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-64 { animation: rl-in-64 var(--rl-cycle) ease-out infinite; }

@keyframes rl-in-80 {
    0%, 80% { opacity: 0; transform: translate3d(0, .9em, 0) scale(.82); }
    82% { opacity: 1; transform: translate3d(0, -.12em, 0) scale(1.06); }
    83.2%, 96% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; transform: none; }
}
.rl-in-80 { animation: rl-in-80 var(--rl-cycle) ease-out infinite; }

@keyframes rl-type-4 {
    0%, 4% { transform: scaleX(0); }
    6%, 100% { transform: scaleX(1); }
}
.rl-type-4 { animation: rl-type-4 var(--rl-cycle) ease-out infinite; }

@keyframes rl-type-6 {
    0%, 6% { transform: scaleX(0); }
    8%, 100% { transform: scaleX(1); }
}
.rl-type-6 { animation: rl-type-6 var(--rl-cycle) ease-out infinite; }

@keyframes rl-type-8 {
    0%, 8% { transform: scaleX(0); }
    10%, 100% { transform: scaleX(1); }
}
.rl-type-8 { animation: rl-type-8 var(--rl-cycle) ease-out infinite; }

@keyframes rl-draw-6 {
    0%, 6% { stroke-dashoffset: 100; opacity: 0; }
    6.3% { opacity: 1; }
    9%, 96% { stroke-dashoffset: 0; opacity: 1; }
    99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-draw-6 { animation: rl-draw-6 var(--rl-cycle) ease-in-out infinite; }

@keyframes rl-draw-21 {
    0%, 21% { stroke-dashoffset: 100; opacity: 0; }
    21.3% { opacity: 1; }
    24%, 96% { stroke-dashoffset: 0; opacity: 1; }
    99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-draw-21 { animation: rl-draw-21 var(--rl-cycle) ease-in-out infinite; }

@keyframes rl-draw-23 {
    0%, 23% { stroke-dashoffset: 100; opacity: 0; }
    23.3% { opacity: 1; }
    26%, 96% { stroke-dashoffset: 0; opacity: 1; }
    99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-draw-23 { animation: rl-draw-23 var(--rl-cycle) ease-in-out infinite; }

@keyframes rl-draw-25 {
    0%, 25% { stroke-dashoffset: 100; opacity: 0; }
    25.3% { opacity: 1; }
    28%, 96% { stroke-dashoffset: 0; opacity: 1; }
    99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-draw-25 { animation: rl-draw-25 var(--rl-cycle) ease-in-out infinite; }

@keyframes rl-draw-32 {
    0%, 32% { stroke-dashoffset: 100; opacity: 0; }
    32.3% { opacity: 1; }
    35%, 96% { stroke-dashoffset: 0; opacity: 1; }
    99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-draw-32 { animation: rl-draw-32 var(--rl-cycle) ease-in-out infinite; }

@keyframes rl-draw-42 {
    0%, 42% { stroke-dashoffset: 100; opacity: 0; }
    42.3% { opacity: 1; }
    45%, 96% { stroke-dashoffset: 0; opacity: 1; }
    99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-draw-42 { animation: rl-draw-42 var(--rl-cycle) ease-in-out infinite; }

@keyframes rl-draw-61 {
    0%, 61% { stroke-dashoffset: 100; opacity: 0; }
    61.3% { opacity: 1; }
    64%, 96% { stroke-dashoffset: 0; opacity: 1; }
    99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-draw-61 { animation: rl-draw-61 var(--rl-cycle) ease-in-out infinite; }

@keyframes rl-vis-9 {
    0%, 9% { opacity: 0; }
    10.5%, 96% { opacity: 1; }
    99%, 100% { opacity: 0; }
}
.reos-login-flow.rl-vis-9 { animation: rl-flow 1.6s linear infinite, rl-vis-9 var(--rl-cycle) linear infinite; }

@keyframes rl-vis-24 {
    0%, 24% { opacity: 0; }
    25.5%, 96% { opacity: 1; }
    99%, 100% { opacity: 0; }
}
.reos-login-flow.rl-vis-24 { animation: rl-flow 1.6s linear infinite, rl-vis-24 var(--rl-cycle) linear infinite; }

@keyframes rl-vis-26 {
    0%, 26% { opacity: 0; }
    27.5%, 96% { opacity: 1; }
    99%, 100% { opacity: 0; }
}
.reos-login-flow.rl-vis-26 { animation: rl-flow 1.6s linear infinite, rl-vis-26 var(--rl-cycle) linear infinite; }

@keyframes rl-vis-28 {
    0%, 28% { opacity: 0; }
    29.5%, 96% { opacity: 1; }
    99%, 100% { opacity: 0; }
}
.reos-login-flow.rl-vis-28 { animation: rl-flow 1.6s linear infinite, rl-vis-28 var(--rl-cycle) linear infinite; }

@keyframes rl-vis-35 {
    0%, 35% { opacity: 0; }
    36.5%, 96% { opacity: 1; }
    99%, 100% { opacity: 0; }
}
.reos-login-flow.rl-vis-35 { animation: rl-flow 1.6s linear infinite, rl-vis-35 var(--rl-cycle) linear infinite; }

@keyframes rl-vis-45 {
    0%, 45% { opacity: 0; }
    46.5%, 96% { opacity: 1; }
    99%, 100% { opacity: 0; }
}
.reos-login-flow.rl-vis-45 { animation: rl-flow 1.6s linear infinite, rl-vis-45 var(--rl-cycle) linear infinite; }

@keyframes rl-vis-64 {
    0%, 64% { opacity: 0; }
    65.5%, 96% { opacity: 1; }
    99%, 100% { opacity: 0; }
}
.reos-login-flow.rl-vis-64 { animation: rl-flow 1.6s linear infinite, rl-vis-64 var(--rl-cycle) linear infinite; }

@keyframes rl-shot {
    0%, 80% { stroke-dashoffset: 14; opacity: 0; }
    80.3% { opacity: 1; }
    85% { stroke-dashoffset: -100; opacity: 1; }
    85.4%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.rl-shot { animation: rl-shot var(--rl-cycle) cubic-bezier(.5, 0, .7, 1) infinite; }

@keyframes rl-trail {
    0%, 80% { stroke-dashoffset: 100; opacity: 0; }
    80.3% { opacity: 1; }
    85%, 96% { stroke-dashoffset: 0; opacity: 1; }
    99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-trail { animation: rl-trail var(--rl-cycle) cubic-bezier(.5, 0, .7, 1) infinite; }

@keyframes rl-stamp {
    0%, 85% { opacity: 0; transform: rotate(-8deg) scale(1.8); }
    87.5%, 96% { opacity: 1; transform: rotate(-8deg) scale(1); }
    99%, 100% { opacity: 0; transform: rotate(-8deg) scale(1); }
}
.rl-stamp { animation: rl-stamp var(--rl-cycle) cubic-bezier(.2, .9, .3, 1.2) infinite; }

@keyframes rl-burst {
    0%, 85% { opacity: 0; transform: scale(.6); }
    86% { opacity: .95; }
    93%, 100% { opacity: 0; transform: scale(1.6); }
}
.rl-burst { animation: rl-burst var(--rl-cycle) ease-out infinite; }

@keyframes rl-cap-1 {
    0% { opacity: .42; }
    1.5%, 19% { opacity: 1; }
    20%, 100% { opacity: .42; }
}
.rl-cap-1 { animation: rl-cap-1 var(--rl-cycle) linear infinite; }

@keyframes rl-seg-1 {
    0% { transform: scaleX(0); }
    20%, 96% { transform: scaleX(1); }
    99%, 100% { transform: scaleX(0); }
}
.rl-seg-1 { animation: rl-seg-1 var(--rl-cycle) linear infinite; }

@keyframes rl-cap-2 {
    0%, 20% { opacity: .42; }
    21.5%, 39% { opacity: 1; }
    40%, 100% { opacity: .42; }
}
.rl-cap-2 { animation: rl-cap-2 var(--rl-cycle) linear infinite; }

@keyframes rl-seg-2 {
    0%, 20% { transform: scaleX(0); }
    40%, 96% { transform: scaleX(1); }
    99%, 100% { transform: scaleX(0); }
}
.rl-seg-2 { animation: rl-seg-2 var(--rl-cycle) linear infinite; }

@keyframes rl-cap-3 {
    0%, 40% { opacity: .42; }
    41.5%, 59% { opacity: 1; }
    60%, 100% { opacity: .42; }
}
.rl-cap-3 { animation: rl-cap-3 var(--rl-cycle) linear infinite; }

@keyframes rl-seg-3 {
    0%, 40% { transform: scaleX(0); }
    60%, 96% { transform: scaleX(1); }
    99%, 100% { transform: scaleX(0); }
}
.rl-seg-3 { animation: rl-seg-3 var(--rl-cycle) linear infinite; }

@keyframes rl-cap-4 {
    0%, 60% { opacity: .42; }
    61.5%, 79% { opacity: 1; }
    80%, 100% { opacity: .42; }
}
.rl-cap-4 { animation: rl-cap-4 var(--rl-cycle) linear infinite; }

@keyframes rl-seg-4 {
    0%, 60% { transform: scaleX(0); }
    80%, 96% { transform: scaleX(1); }
    99%, 100% { transform: scaleX(0); }
}
.rl-seg-4 { animation: rl-seg-4 var(--rl-cycle) linear infinite; }

@keyframes rl-cap-5 {
    0%, 80% { opacity: .42; }
    81.5%, 95% { opacity: 1; }
    96%, 100% { opacity: .42; }
}
.rl-cap-5 { animation: rl-cap-5 var(--rl-cycle) linear infinite; }

@keyframes rl-seg-5 {
    0%, 80% { transform: scaleX(0); }
    96%, 96% { transform: scaleX(1); }
    99%, 100% { transform: scaleX(0); }
}
.rl-seg-5 { animation: rl-seg-5 var(--rl-cycle) linear infinite; }

@keyframes rl-confetti {
    0%, 85.5% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.6); }
    86.5% { opacity: 1; }
    91% { opacity: 1; }
    96%, 100% { opacity: 0; transform: translate3d(calc(var(--cx) * 1.6), calc(var(--cy) * 1.6), 0) rotate(var(--cr)) scale(1); }
}
.rl-confetti { animation: rl-confetti var(--rl-cycle) cubic-bezier(.15, .7, .3, 1) infinite; }