:root {
    --papyon-black: #090909;
    --papyon-ink: #111111;
    --papyon-paper: #f1eee8;
    --papyon-white: #faf9f6;
    --papyon-acid: #dfff00;
    --papyon-orange: #ff4d17;
    --papyon-line: rgba(9, 9, 9, .16);
    --papyon-display: "Archivo Black", sans-serif;
    --papyon-body: "Manrope", sans-serif;
    --papyon-serif: "Playfair Display", serif;
    --papyon-ease: cubic-bezier(.22, 1, .36, 1);
}

body.papyon-auth {
    position: relative !important;
    display: flex !important;
    min-height: 100svh !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    color: var(--papyon-ink) !important;
    background: var(--papyon-black) !important;
    font-family: var(--papyon-body) !important;
}

body.papyon-auth::before {
    position: fixed;
    z-index: 1;
    top: 50%;
    left: clamp(34px, 5.5vw, 92px);
    width: min(43vw, 700px);
    content: "RİTMİ\A YÖNET.";
    color: var(--papyon-white);
    font: clamp(56px, 6.6vw, 118px)/.96 var(--papyon-display);
    letter-spacing: -.045em;
    white-space: pre;
    text-transform: uppercase;
    transform: translateY(-50%);
    pointer-events: none;
}

body.papyon-auth.role-instructor::before { content: "RİTMİ\A AKTAR."; }
body.papyon-auth.role-student::before { content: "RİTMİ\A YAŞA."; }
body.papyon-auth.role-otp::before { content: "KODU\A DOĞRULA."; }

body.papyon-auth::after {
    position: fixed;
    z-index: 1;
    bottom: 8%;
    left: 36%;
    width: 88px;
    height: 88px;
    content: "";
    border: 1px solid rgba(223, 255, 0, .55);
    border-radius: 50%;
    background: radial-gradient(circle, var(--papyon-acid) 0 6px, transparent 7px);
    animation: papyonOrbit 7s ease-in-out infinite;
    pointer-events: none;
}

body.papyon-auth #particles-js {
    position: fixed !important;
    z-index: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background:
        linear-gradient(90deg, rgba(9,9,9,.98) 0%, rgba(9,9,9,.88) 38%, rgba(9,9,9,.52) 62%, rgba(9,9,9,.9) 100%),
        linear-gradient(0deg, rgba(9,9,9,.75), transparent 55%),
        url("../images/papyon-v2/urban.jpg") center 42% / cover no-repeat !important;
}

body.papyon-auth #particles-js::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, #000, transparent 75%);
}

body.papyon-auth #particles-js canvas { opacity: .13 !important; }
body.papyon-auth [data-aos] { opacity: 1 !important; transform: none !important; }

body.papyon-auth .login-container {
    position: relative !important;
    z-index: 3 !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin: 0 clamp(24px, 5vw, 86px) 0 auto !important;
    padding: 34px 0 !important;
}

body.papyon-auth .login-card,
body.papyon-auth .otp-card {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: none !important;
    border: 1px solid rgba(255,255,255,.52) !important;
    border-radius: 28px !important;
    background: rgba(241,238,232,.96) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.45) !important;
    animation: papyonCardIn .85s var(--papyon-ease) both !important;
    backdrop-filter: blur(22px) !important;
}

body.papyon-auth .login-card::before,
body.papyon-auth .otp-card::before {
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 6px !important;
    content: "" !important;
    background: var(--papyon-acid) !important;
}

body.papyon-auth.role-student .login-card::before { background: linear-gradient(90deg, var(--papyon-acid) 0 72%, var(--papyon-orange) 72%) !important; }
body.papyon-auth.role-instructor .login-card::before { background: linear-gradient(90deg, var(--papyon-orange) 0 22%, var(--papyon-acid) 22%) !important; }

body.papyon-auth .shape { display: none !important; }

body.papyon-auth .login-header {
    padding: 42px 38px 22px !important;
    text-align: left !important;
}

body.papyon-auth .login-header .logo {
    margin: 0 0 10px !important;
    color: var(--papyon-ink) !important;
    background: none !important;
    filter: none !important;
    font: clamp(38px, 4vw, 56px)/.88 var(--papyon-display) !important;
    letter-spacing: -.07em !important;
    text-transform: uppercase !important;
    -webkit-text-fill-color: currentColor !important;
}

body.papyon-auth .login-header .logo::after {
    content: ".";
    color: var(--papyon-acid);
}

body.papyon-auth .login-header > p {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    color: rgba(17,17,17,.58) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

body.papyon-auth .login-header > p i { color: var(--papyon-orange) !important; }

body.papyon-auth .login-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    color: rgba(17,17,17,.54) !important;
    background: transparent !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

body.papyon-auth .login-kicker::before {
    width: 26px;
    height: 2px;
    content: "";
    background: var(--papyon-orange);
}

body.papyon-auth .login-kicker i { display: none !important; }

body.papyon-auth .login-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 20px !important;
}

body.papyon-auth .login-meta-item {
    min-height: 52px !important;
    padding: 11px 12px !important;
    color: rgba(17,17,17,.58) !important;
    border: 1px solid var(--papyon-line) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.34) !important;
    font-size: 9px !important;
}

body.papyon-auth .login-meta-item i { color: var(--papyon-orange) !important; }

body.papyon-auth .login-body { padding: 0 38px 36px !important; }

body.papyon-auth .info-box {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
    padding: 14px 15px !important;
    color: rgba(17,17,17,.7) !important;
    border: 1px solid rgba(17,17,17,.13) !important;
    border-left: 4px solid var(--papyon-acid) !important;
    border-radius: 14px !important;
    background: rgba(223,255,0,.15) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
}

body.papyon-auth .info-box i { color: var(--papyon-orange) !important; font-size: 16px !important; }
body.papyon-auth .info-box strong { color: var(--papyon-ink) !important; }

body.papyon-auth .form-floating {
    margin-bottom: 13px !important;
    transition: none !important;
}

body.papyon-auth .form-floating:focus-within { transform: none !important; }

body.papyon-auth .form-floating > .form-control,
body.papyon-auth .form-floating > input {
    height: 62px !important;
    min-height: 62px !important;
    padding: 1.55rem 15px .45rem !important;
    color: var(--papyon-ink) !important;
    border: 1px solid rgba(17,17,17,.2) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.58) !important;
    box-shadow: none !important;
    font-family: var(--papyon-body) !important;
    font-size: 14px !important;
}

body.papyon-auth .form-floating > .form-control:focus,
body.papyon-auth .form-floating > input:focus {
    border-color: var(--papyon-ink) !important;
    background: var(--papyon-white) !important;
    box-shadow: 0 0 0 4px rgba(223,255,0,.58) !important;
}

body.papyon-auth .form-floating > label {
    padding: 1rem 15px !important;
    color: rgba(17,17,17,.53) !important;
    font-size: 11px !important;
}

body.papyon-auth .form-floating > label i { width: 15px; color: var(--papyon-orange) !important; }
body.papyon-auth .form-floating > small { margin: 6px 4px 0 !important; color: rgba(17,17,17,.48) !important; font-size: 8px !important; }

body.papyon-auth .btn-login,
body.papyon-auth .btn-dogrula {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 7px !important;
    padding: 0 20px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    color: var(--papyon-black) !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: var(--papyon-acid) !important;
    box-shadow: none !important;
    font-family: var(--papyon-body) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    transition: color .25s, background .25s, transform .25s var(--papyon-ease) !important;
}

body.papyon-auth .btn-login::after,
body.papyon-auth .btn-dogrula::after {
    margin-left: auto;
    content: "↗";
    font-size: 18px;
    line-height: 1;
}

body.papyon-auth .btn-login::before { display: none !important; }
body.papyon-auth .btn-login:hover,
body.papyon-auth .btn-dogrula:hover { color: var(--papyon-white) !important; background: var(--papyon-orange) !important; transform: translateY(-2px) !important; }
body.papyon-auth .btn-dogrula:disabled { opacity: .45 !important; transform: none !important; }

body.papyon-auth .security-badge {
    margin-top: 22px !important;
    padding-top: 17px !important;
    border-top: 1px solid var(--papyon-line) !important;
}

body.papyon-auth .security-badge small {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: rgba(17,17,17,.47) !important;
    font-size: 8px !important;
    letter-spacing: .04em !important;
}

body.papyon-auth .security-badge i { color: #4b7d33 !important; }

body.papyon-auth .alert {
    gap: 9px !important;
    margin-bottom: 14px !important;
    padding: 13px 14px !important;
    color: var(--papyon-ink) !important;
    border: 1px solid rgba(17,17,17,.12) !important;
    border-left: 4px solid var(--papyon-orange) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.7) !important;
    box-shadow: none !important;
    font-size: 10px !important;
}

body.papyon-auth .alert-success { border-left-color: #4b7d33 !important; }
body.papyon-auth .alert-info { border-left-color: #3274b8 !important; }
body.papyon-auth .alert-warning { border-left-color: #d48a00 !important; }

body.papyon-auth .invalid-feedback { margin: 6px 4px 0 !important; color: #b42318 !important; font-size: 9px !important; }

body.papyon-auth .footer-text {
    margin-top: 15px !important;
    color: rgba(255,255,255,.5) !important;
    text-align: center !important;
}

body.papyon-auth .footer-text small { color: inherit !important; font-size: 8px !important; line-height: 1.8 !important; }
body.papyon-auth .footer-text a {
    display: inline-flex !important;
    min-height: 40px !important;
    align-items: center !important;
    gap: 9px !important;
    margin-top: 8px !important;
    padding: 0 16px !important;
    color: var(--papyon-white) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 100px !important;
    background: rgba(9,9,9,.48) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}
body.papyon-auth .footer-text a:hover { color: var(--papyon-black) !important; border-color: var(--papyon-acid) !important; background: var(--papyon-acid) !important; transform: translateY(-2px) !important; }

body.papyon-auth.role-otp {
    justify-content: flex-end !important;
    padding: 34px clamp(24px, 5vw, 86px) !important;
    background:
        linear-gradient(90deg, rgba(9,9,9,.98) 0%, rgba(9,9,9,.83) 48%, rgba(9,9,9,.88) 100%),
        url("../images/papyon-v2/urban.jpg") center 42% / cover no-repeat !important;
}
body.papyon-auth .otp-card { z-index: 3 !important; max-width: 470px !important; padding: 38px !important; }
body.papyon-auth .otp-icon {
    display: grid !important;
    width: 62px !important;
    height: 62px !important;
    margin: 0 0 23px !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: var(--papyon-black) !important;
    background: var(--papyon-acid) !important;
}
body.papyon-auth .otp-icon i { color: inherit !important; font-size: 21px !important; }
body.papyon-auth .otp-card h4 { margin-bottom: 8px !important; text-align: left !important; color: var(--papyon-ink) !important; font: 33px/.95 var(--papyon-display) !important; letter-spacing: -.045em !important; text-transform: uppercase !important; }
body.papyon-auth .otp-card > p { text-align: left !important; color: rgba(17,17,17,.56) !important; font-size: 10px !important; line-height: 1.6 !important; }
body.papyon-auth .otp-inputs { gap: 9px !important; justify-content: flex-start !important; margin: 24px 0 !important; }
body.papyon-auth .otp-inputs input {
    width: 58px !important;
    height: 64px !important;
    color: var(--papyon-ink) !important;
    border: 1px solid rgba(17,17,17,.2) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.58) !important;
    font-family: var(--papyon-display) !important;
}
body.papyon-auth .otp-inputs input:focus { border-color: var(--papyon-ink) !important; box-shadow: 0 0 0 4px rgba(223,255,0,.58) !important; }
body.papyon-auth .otp-inputs input.filled { border-color: var(--papyon-ink) !important; background: rgba(223,255,0,.3) !important; }
body.papyon-auth .form-check-label,
body.papyon-auth .countdown { color: rgba(17,17,17,.55) !important; font-size: 9px !important; }
body.papyon-auth .countdown span,
body.papyon-auth .tekrar-link { color: var(--papyon-orange) !important; }
body.papyon-auth .form-check-input:checked { border-color: var(--papyon-ink) !important; background-color: var(--papyon-ink) !important; }

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

@keyframes papyonOrbit {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    50% { transform: translate(16px, -12px) rotate(180deg); }
}

@media (max-width: 900px) {
    body.papyon-auth { justify-content: center !important; }
    body.papyon-auth::before { top: 10%; left: 22px; width: auto; font-size: clamp(46px, 11vw, 76px); opacity: .2; transform: none; }
    body.papyon-auth::after { display: none; }
    body.papyon-auth .login-container { margin: 0 auto !important; padding: 70px 18px 34px !important; }
    body.papyon-auth.role-otp { justify-content: center !important; padding: 70px 18px 34px !important; }
}

@media (max-width: 560px) {
    body.papyon-auth { align-items: flex-start !important; background: var(--papyon-black) !important; }
    body.papyon-auth::before { display: none; }
    body.papyon-auth #particles-js {
        background:
            linear-gradient(180deg, rgba(9,9,9,.44) 0%, rgba(9,9,9,.78) 30%, #090909 62%),
            url("../images/papyon-v2/urban.jpg") 63% top / auto 58svh no-repeat !important;
    }
    body.papyon-auth #particles-js canvas { display: none !important; }
    body.papyon-auth .login-container { width: 100% !important; padding: 24svh 12px 28px !important; }
    body.papyon-auth .login-card,
    body.papyon-auth .otp-card { border-radius: 24px !important; }
    body.papyon-auth .login-header { padding: 34px 24px 19px !important; }
    body.papyon-auth .login-header .logo { font-size: 39px !important; }
    body.papyon-auth .login-body { padding: 0 24px 28px !important; }
    body.papyon-auth .login-meta { gap: 6px !important; }
    body.papyon-auth .login-meta-item { padding: 9px !important; font-size: 8px !important; }
    body.papyon-auth .form-floating > .form-control,
    body.papyon-auth .form-floating > input { font-size: 16px !important; }
    body.papyon-auth.role-otp { padding: 24svh 12px 28px !important; }
    body.papyon-auth .otp-card { padding: 30px 22px !important; }
    body.papyon-auth .otp-card h4 { font-size: 29px !important; }
    body.papyon-auth .otp-inputs { gap: 7px !important; }
    body.papyon-auth .otp-inputs input { width: calc((100vw - 93px) / 4) !important; max-width: 61px !important; height: 60px !important; }
}

@media (prefers-reduced-motion: reduce) {
    body.papyon-auth *,
    body.papyon-auth *::before,
    body.papyon-auth *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}