/* Auth sayfalarına özel stiller */

.auth-simple-bg {
    background: linear-gradient(135deg, #f0f9ff 0%, #f5f3ff 50%, #fdf4ff 100%);
    position: relative;
    overflow: hidden;
}

.auth-background {
    position: relative;
    overflow: hidden;
}

.auth-background::before,
.auth-background::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(0px);
    z-index: 0;
}

.auth-background__shape {
    position: absolute;
    border-radius: 42% 58% 50% 50% / 48% 52% 58% 42%;
    filter: blur(0.4px);
    mix-blend-mode: screen;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

.auth-background--login {
    background: radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.14), transparent 55%),
                radial-gradient(circle at 85% 12%, rgba(79, 70, 229, 0.16), transparent 55%),
                radial-gradient(circle at 20% 85%, rgba(14, 165, 233, 0.18), transparent 55%),
                linear-gradient(135deg, rgba(241, 248, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.auth-background--login::before {
    width: 420px;
    height: 420px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.24) 0%, rgba(59, 130, 246, 0) 70%);
}

.auth-background--login::after {
    width: 360px;
    height: 360px;
    bottom: -160px;
    right: -110px;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.24) 0%, rgba(129, 140, 248, 0) 70%);
}

.auth-background--login .auth-background__shape:nth-of-type(1) {
    width: 220px;
    height: 220px;
    top: 12%;
    right: 20%;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(59, 130, 246, 0.08));
}

.auth-background--login .auth-background__shape:nth-of-type(2) {
    width: 180px;
    height: 180px;
    bottom: 20%;
    left: 24%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(14, 165, 233, 0.06));
}

.auth-background--login .auth-background__shape:nth-of-type(3) {
    width: 130px;
    height: 130px;
    top: 38%;
    left: 55%;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(37, 99, 235, 0.05));
}

.auth-background--login .auth-background__shape:nth-of-type(4) {
    width: 170px;
    height: 170px;
    bottom: 28%;
    right: 32%;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(14, 165, 233, 0.05));
}

.auth-background--login .auth-background__shape:nth-of-type(5) {
    width: 110px;
    height: 110px;
    top: 18%;
    left: 8%;
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.16), rgba(99, 102, 241, 0.05));
}

.auth-background--register {
    background: radial-gradient(circle at 12% 25%, rgba(236, 72, 153, 0.12), transparent 55%),
                radial-gradient(circle at 82% 20%, rgba(79, 70, 229, 0.15), transparent 55%),
                radial-gradient(circle at 18% 80%, rgba(99, 102, 241, 0.18), transparent 55%),
                linear-gradient(140deg, rgba(250, 245, 255, 0.95), rgba(255, 255, 255, 0.98));
}

.auth-background--register::before {
    width: 460px;
    height: 460px;
    top: -180px;
    left: -140px;
    background: radial-gradient(circle, rgba(216, 180, 254, 0.26) 0%, rgba(216, 180, 254, 0) 70%);
}

.auth-background--register::after {
    width: 420px;
    height: 420px;
    bottom: -180px;
    right: -150px;
    background: radial-gradient(circle, rgba(251, 113, 133, 0.22) 0%, rgba(251, 113, 133, 0) 70%);
}

.auth-background--register .auth-background__shape {
    border-radius: 46% 54% 48% 52% / 42% 58% 52% 48%;
}

.auth-background--register .auth-background__shape:nth-of-type(1) {
    width: 260px;
    height: 260px;
    top: 14%;
    right: 24%;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(37, 99, 235, 0.08));
}

.auth-background--register .auth-background__shape:nth-of-type(2) {
    width: 200px;
    height: 200px;
    bottom: 18%;
    left: 22%;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.06));
}

.auth-background--register .auth-background__shape:nth-of-type(3) {
    width: 150px;
    height: 150px;
    top: 38%;
    left: 58%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(14, 165, 233, 0.05));
}

.auth-background--register .auth-background__shape:nth-of-type(4) {
    width: 190px;
    height: 190px;
    top: 58%;
    right: 30%;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.2), rgba(99, 102, 241, 0.06));
}

.auth-background--register .auth-background__shape:nth-of-type(5) {
    width: 120px;
    height: 120px;
    bottom: 28%;
    right: 10%;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(79, 70, 229, 0.05));
}

.auth-background--register .auth-background__shape:nth-of-type(6) {
    width: 100px;
    height: 100px;
    top: 18%;
    left: 10%;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(236, 72, 153, 0.04));
}

.auth-simple-bg::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, rgba(147, 197, 253, 0.25), transparent 70%);
    border-radius: 40% 60% 50% 50%;
    animation: authFloatPrimary 25s ease-in-out infinite;
    pointer-events: none;
}

.auth-simple-bg::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -8%;
    right: -8%;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.22), transparent 70%);
    border-radius: 50% 40% 60% 50%;
    animation: authFloatSecondary 28s ease-in-out infinite;
    pointer-events: none;
}

.auth-frame {
    position: relative;
    width: min(100%, 720px);
    margin: 0 auto;
    display: grid;
    place-items: center;
    padding: clamp(5vh, 6vh, 8vh) clamp(1rem, 2.5vw, 2rem);
}

.auth-content {
    position: relative;
    z-index: 10;
    width: min(100%, clamp(320px, 78vw, 460px));
    display: grid;
    gap: clamp(2.25rem, 3vh, 3.75rem);
    justify-items: center;
}

.auth-heading {
    width: min(100%, 420px);
}

.auth-card {
    width: min(100%, var(--auth-card-width, 420px));
}

.auth-card--login {
    --auth-card-width: clamp(280px, 54vw, 340px);
}

.auth-card--register {
    --auth-card-width: clamp(320px, 60vw, 420px);
}

.auth-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.auth-ornament {
    position: absolute;
    pointer-events: none;
    filter: blur(0.3px);
    opacity: 0.55;
    mix-blend-mode: screen;
    z-index: 2;
    animation: authOrnamentFloat 18s ease-in-out infinite;
}

.auth-ornament--circle {
    width: 220px;
    height: 220px;
    top: clamp(4vh, 6vh, 8vh);
    right: clamp(8vw, 12vw, 16vw);
    background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.35), transparent 70%);
    border-radius: 50%;
}

.auth-ornament--triangle {
    width: 180px;
    height: 180px;
    bottom: clamp(8vh, 12vh, 16vh);
    left: clamp(6vw, 10vw, 14vw);
    background: conic-gradient(from 45deg, rgba(167, 139, 250, 0.28), rgba(125, 211, 252, 0.18), transparent 84%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation-duration: 22s;
}

.auth-ornament--diamond {
    width: 160px;
    height: 160px;
    top: clamp(18vh, 22vh, 26vh);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(135deg, rgba(191, 219, 254, 0.45), rgba(216, 180, 254, 0.25));
    border-radius: 16%;
    animation-duration: 26s;
}

.auth-ornament--ring {
    width: 280px;
    height: 280px;
    top: clamp(6vh, 10vh, 12vh);
    left: clamp(12vw, 16vw, 20vw);
    background: radial-gradient(circle, transparent 55%, rgba(147, 197, 253, 0.26) 60%, transparent 70%);
    animation-duration: 32s;
}

.auth-ornament--dots {
    width: 240px;
    height: 240px;
    bottom: clamp(8vh, 12vh, 16vh);
    right: clamp(12vw, 16vw, 20vw);
    background-image: radial-gradient(rgba(99, 102, 241, 0.2) 2px, transparent 2px);
    background-size: 24px 24px;
    opacity: 0.4;
    animation-duration: 24s;
}

@keyframes authOrnamentFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(18px, -22px, 0) scale(1.03);
    }
    66% {
        transform: translate3d(-24px, 18px, 0) scale(0.97);
    }
}

@keyframes authFloatPrimary {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        border-radius: 40% 60% 50% 50%;
    }
    33% {
        transform: translate(30px, -40px) rotate(120deg);
        border-radius: 50% 50% 60% 40%;
    }
    66% {
        transform: translate(-25px, 35px) rotate(240deg);
        border-radius: 60% 40% 50% 50%;
    }
}

@keyframes authFloatSecondary {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        border-radius: 50% 40% 60% 50%;
    }
    33% {
        transform: translate(-35px, 30px) rotate(-120deg);
        border-radius: 40% 60% 50% 50%;
    }
    66% {
        transform: translate(28px, -32px) rotate(-240deg);
        border-radius: 50% 50% 40% 60%;
    }
}