:root {
            --auth-primary: #5b7cff;
            --auth-primary-rgb: 91, 124, 255;
            --auth-primary-soft: #aebfff;
            --auth-primary-ink: #4057b2;
            --auth-primary-ink-rgb: 64, 87, 178;
            --auth-secondary: #141e31;
            --auth-secondary-rgb: 20, 30, 49;
            --auth-navy: #141e31;
            --auth-navy-soft: #1c2941;
            --auth-navy-deep: #101827;
            --auth-blue: var(--auth-primary);
            --auth-ink: #172033;
            --auth-muted: #697386;
            --auth-faint: #98a2b3;
            --auth-line: #e5e9f0;
            --auth-field: #f6f8fb;
            --auth-canvas: #eef1f5;
            --auth-white: #ffffff;
            --auth-danger: #b42318;
            --auth-danger-bg: #fff4f2;
            --auth-ease: cubic-bezier(.22, 1, .36, 1);
        }

        * {
            box-sizing: border-box;
        }

        html {
            color-scheme: light;
        }

        body {
            min-width: 320px;
            min-height: 100vh;
            min-height: 100svh;
            margin: 0;
            padding: 28px;
            overflow-x: hidden;
            color: var(--auth-ink);
            background:
                radial-gradient(circle at 8% 8%, rgba(var(--auth-primary-rgb), .09), transparent 29%),
                radial-gradient(circle at 92% 92%, rgba(var(--auth-secondary-rgb), .08), transparent 31%),
                var(--auth-canvas);
            font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        body::before {
            position: fixed;
            inset: 0;
            z-index: -1;
            content: "";
            opacity: .3;
            background-image:
                linear-gradient(rgba(var(--auth-secondary-rgb), .025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(var(--auth-secondary-rgb), .025) 1px, transparent 1px);
            background-size: 32px 32px;
            pointer-events: none;
            mask-image: linear-gradient(to bottom, #000, transparent 82%);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button,
        input {
            font: inherit;
        }

        .auth-back {
            position: fixed;
            top: 26px;
            left: 28px;
            z-index: 20;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 44px;
            padding: 0 16px 0 13px;
            color: #364152;
            background: rgba(255, 255, 255, .88);
            border: 1px solid rgba(255, 255, 255, .78);
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(var(--auth-secondary-rgb), .09);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            font-size: 13px;
            font-weight: 700;
            transition: transform .25s var(--auth-ease), box-shadow .25s var(--auth-ease), color .25s ease;
        }

        .auth-back svg {
            width: 17px;
            height: 17px;
        }

        .auth-back:hover {
            color: var(--auth-navy);
            transform: translateX(-3px);
            box-shadow: 0 14px 34px rgba(var(--auth-secondary-rgb), .13);
        }

        .auth-page {
            width: 100%;
            min-height: calc(100vh - 56px);
            min-height: calc(100svh - 56px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-shell {
            width: min(1120px, 100%);
            min-height: 690px;
            display: grid;
            grid-template-columns: .94fr 1.06fr;
            padding: 10px;
            overflow: hidden;
            background: rgba(255, 255, 255, .94);
            border: 1px solid rgba(255, 255, 255, .9);
            border-radius: 30px;
            box-shadow:
                0 36px 90px rgba(var(--auth-secondary-rgb), .14),
                0 2px 8px rgba(var(--auth-secondary-rgb), .04);
            animation: auth-enter .7s var(--auth-ease) both;
        }

        .auth-story {
            position: relative;
            isolation: isolate;
            display: flex;
            min-width: 0;
            overflow: hidden;
            flex-direction: column;
            padding: 42px;
            color: #fff;
            background:
                radial-gradient(circle at 80% 18%, rgba(var(--auth-primary-rgb), .35), transparent 28%),
                radial-gradient(circle at 16% 88%, rgba(var(--auth-primary-rgb), .12), transparent 30%),
                linear-gradient(145deg, var(--auth-navy-soft) 0%, var(--auth-navy) 54%, var(--auth-navy-deep) 100%);
            border-radius: 22px;
        }

        .auth-story::before {
            position: absolute;
            top: -120px;
            right: -90px;
            z-index: -1;
            width: 330px;
            height: 330px;
            content: "";
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 50%;
            box-shadow:
                0 0 0 42px rgba(255, 255, 255, .025),
                0 0 0 88px rgba(255, 255, 255, .018);
        }

        .auth-story::after {
            position: absolute;
            inset: 0;
            z-index: -1;
            content: "";
            opacity: .09;
            background-image:
                linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: linear-gradient(135deg, transparent 20%, #000 100%);
        }

        .auth-logo {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            min-height: 54px;
            max-width: 220px;
            padding: 10px 14px;
            color: var(--auth-navy);
            background: rgba(255, 255, 255, .96);
            border: 1px solid rgba(255, 255, 255, .85);
            border-radius: 15px;
            box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -.035em;
        }

        .auth-logo img {
            display: block;
            width: auto;
            max-width: 185px;
            height: auto;
            max-height: 34px;
            object-fit: contain;
        }

        .auth-story-content {
            width: 100%;
            margin: auto 0;
            padding: 50px 0;
        }

        .auth-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 20px;
            color: var(--auth-primary-soft);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .auth-kicker::before {
            width: 7px;
            height: 7px;
            content: "";
            background: var(--auth-primary);
            border-radius: 50%;
            box-shadow: 0 0 0 5px rgba(var(--auth-primary-rgb), .14);
        }

        .auth-story h1 {
            max-width: 430px;
            margin: 0;
            font-size: clamp(38px, 4vw, 54px);
            line-height: .98;
            letter-spacing: -.055em;
        }

        .auth-story h1 span {
            color: var(--auth-primary-soft);
        }

        .auth-story-intro {
            max-width: 430px;
            margin: 22px 0 0;
            color: rgba(255, 255, 255, .68);
            font-size: 15px;
            line-height: 1.7;
        }

        .auth-benefits {
            display: grid;
            gap: 10px;
            margin-top: 34px;
        }

        .auth-benefit {
            display: grid;
            grid-template-columns: 40px 1fr;
            gap: 13px;
            align-items: center;
            padding: 10px 12px 10px 10px;
            background: rgba(255, 255, 255, .055);
            border: 1px solid rgba(255, 255, 255, .075);
            border-radius: 14px;
        }

        .auth-benefit-icon {
            display: grid;
            flex: none;
            width: 40px;
            height: 40px;
            place-items: center;
            color: var(--auth-primary-soft);
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 11px;
        }

        .auth-benefit-icon svg {
            display: block;
            width: 19px;
            height: 19px;
        }

        .auth-benefit > span:not(.auth-benefit-icon) {
            min-width: 0;
        }

        .auth-benefit > span:not(.auth-benefit-icon) > strong,
        .auth-benefit > span:not(.auth-benefit-icon) > span {
            display: block;
        }

        .auth-benefit > span:not(.auth-benefit-icon) > strong {
            font-size: 13px;
            font-weight: 700;
        }

        .auth-benefit > span:not(.auth-benefit-icon) > span {
            margin-top: 3px;
            color: rgba(255, 255, 255, .54);
            font-size: 11.5px;
            line-height: 1.4;
        }

        .auth-trust {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-top: 22px;
            color: rgba(255, 255, 255, .76);
            border-top: 1px solid rgba(255, 255, 255, .1);
        }

        .auth-trust > svg {
            width: 22px;
            height: 22px;
            color: var(--auth-primary-soft);
        }

        .auth-trust strong,
        .auth-trust span {
            display: block;
        }

        .auth-trust strong {
            color: #fff;
            font-size: 12px;
        }

        .auth-trust span {
            margin-top: 2px;
            font-size: 11px;
        }

        .auth-form-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            padding: 52px clamp(40px, 5vw, 72px);
        }

        .auth-form-wrap {
            width: 100%;
            max-width: 430px;
        }

        .auth-mobile-brand {
            display: none;
        }

        .auth-form-kicker {
            display: block;
            margin-bottom: 10px;
            color: var(--auth-primary-ink);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .15em;
            text-transform: uppercase;
        }

        .auth-form-head h2 {
            margin: 0;
            color: var(--auth-navy);
            font-size: 36px;
            line-height: 1.08;
            letter-spacing: -.045em;
        }

        .auth-form-head p {
            margin: 13px 0 0;
            color: var(--auth-muted);
            font-size: 14px;
            line-height: 1.65;
        }

        .auth-alert {
            display: grid;
            grid-template-columns: 20px 1fr;
            gap: 10px;
            align-items: start;
            margin-top: 22px;
            padding: 13px 14px;
            color: var(--auth-danger);
            background: var(--auth-danger-bg);
            border: 1px solid #fecdca;
            border-radius: 13px;
            font-size: 13px;
            line-height: 1.5;
        }

        .auth-alert svg {
            width: 18px;
            height: 18px;
            margin-top: 1px;
        }

        .auth-form {
            margin-top: 30px;
        }

        .auth-field + .auth-field {
            margin-top: 18px;
        }

        .auth-label {
            display: inline-block;
            margin-bottom: 8px;
            color: #344054;
            font-size: 12px;
            font-weight: 750;
        }

        .auth-input-shell {
            position: relative;
        }

        .auth-input-icon {
            position: absolute;
            top: 50%;
            left: 16px;
            width: 19px;
            height: 19px;
            color: #8b95a7;
            pointer-events: none;
            transform: translateY(-50%);
            transition: color .2s ease;
        }

        .auth-input {
            width: 100%;
            height: 54px;
            padding: 0 48px 0 47px;
            color: var(--auth-ink);
            background: var(--auth-field);
            border: 1px solid #e3e7ed;
            border-radius: 13px;
            outline: none;
            font-size: 14px;
            font-weight: 550;
            transition:
                background .2s ease,
                border-color .2s ease,
                box-shadow .2s ease;
        }

        .auth-input::placeholder {
            color: #a5adba;
            font-weight: 450;
        }

        .auth-input:hover {
            border-color: #d2d8e2;
        }

        .auth-input:focus {
            background: #fff;
            border-color: var(--auth-primary-ink);
            box-shadow: 0 0 0 4px rgba(var(--auth-primary-ink-rgb), .11);
        }

        .auth-input-shell:focus-within .auth-input-icon {
            color: var(--auth-primary-ink);
        }

        .auth-pass-toggle {
            position: absolute;
            top: 50%;
            right: 7px;
            display: grid;
            width: 40px;
            height: 40px;
            padding: 0;
            place-items: center;
            color: #8993a4;
            background: transparent;
            border: 0;
            border-radius: 10px;
            cursor: pointer;
            transform: translateY(-50%);
            transition: color .2s ease, background .2s ease;
        }

        .auth-pass-toggle:hover {
            color: var(--auth-navy);
            background: #eef1f6;
        }

        .auth-pass-toggle svg {
            width: 19px;
            height: 19px;
        }

        .auth-pass-toggle .eye-closed,
        .auth-pass-toggle.is-visible .eye-open {
            display: none;
        }

        .auth-pass-toggle.is-visible .eye-closed {
            display: block;
        }

        .auth-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin: 18px 0 24px;
        }

        .auth-remember {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--auth-muted);
            font-size: 12.5px;
            cursor: pointer;
            user-select: none;
        }

        .auth-remember input {
            width: 17px;
            height: 17px;
            margin: 0;
            accent-color: var(--auth-navy);
            cursor: pointer;
        }

        .auth-forgot {
            color: var(--auth-primary-ink);
            font-size: 12.5px;
            font-weight: 750;
            transition: color .2s ease;
        }

        .auth-forgot:hover {
            color: var(--auth-navy);
        }

        .auth-submit {
            width: 100%;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 20px;
            color: #fff;
            background: var(--auth-navy);
            border: 1px solid var(--auth-navy);
            border-radius: 13px;
            box-shadow: 0 14px 30px rgba(var(--auth-secondary-rgb), .18);
            cursor: pointer;
            font-size: 13.5px;
            font-weight: 750;
            transition: transform .25s var(--auth-ease), background .2s ease, box-shadow .25s ease;
        }

        .auth-submit svg {
            width: 18px;
            height: 18px;
            transition: transform .25s var(--auth-ease);
        }

        .auth-submit:hover {
            background: var(--auth-navy-soft);
            box-shadow: 0 18px 34px rgba(var(--auth-secondary-rgb), .23);
            transform: translateY(-2px);
        }

        .auth-submit:hover svg {
            transform: translateX(3px);
        }

        .auth-submit:active {
            transform: translateY(0);
        }

        .auth-divider {
            display: flex;
            align-items: center;
            gap: 13px;
            margin: 24px 0 18px;
            color: var(--auth-faint);
            font-size: 11px;
            font-weight: 650;
        }

        .auth-divider::before,
        .auth-divider::after {
            flex: 1;
            height: 1px;
            content: "";
            background: var(--auth-line);
        }

        .auth-social {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .auth-social.one {
            grid-template-columns: 1fr;
        }

        .auth-social-link {
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            color: #344054;
            background: #fff;
            border: 1px solid var(--auth-line);
            border-radius: 12px;
            font-size: 12.5px;
            font-weight: 750;
            transition: transform .2s var(--auth-ease), border-color .2s ease, background .2s ease;
        }

        .auth-social-link:hover {
            background: #f9fafb;
            border-color: #cbd2dc;
            transform: translateY(-1px);
        }

        .auth-social-link svg {
            width: 19px;
            height: 19px;
        }

        .auth-register {
            margin: 26px 0 0;
            color: var(--auth-muted);
            text-align: center;
            font-size: 13px;
        }

        .auth-register a {
            color: var(--auth-primary-ink);
            font-weight: 800;
        }

        .auth-register a:hover {
            color: var(--auth-navy);
        }

        .auth-form-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            margin-top: 22px;
            padding-top: 20px;
            color: #98a2b3;
            border-top: 1px solid #edf0f4;
            font-size: 10.5px;
        }

        .auth-form-note svg {
            width: 14px;
            height: 14px;
        }

        :where(a, button, input):focus-visible {
            outline: 3px solid rgba(var(--auth-primary-rgb), .32);
            outline-offset: 3px;
        }

        @keyframes auth-enter {
            from {
                opacity: 0;
                transform: translateY(18px) scale(.99);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @media (max-width: 900px) {
            body {
                align-items: flex-start;
                padding: 84px 18px 24px;
            }

            .auth-back {
                top: 18px;
                left: 18px;
            }

            .auth-page {
                min-height: auto;
            }

            .auth-shell {
                max-width: 590px;
                min-height: 0;
                grid-template-columns: 1fr;
                padding: 8px;
            }

            .auth-story {
                display: none;
            }

            .auth-form-panel {
                padding: 40px 38px 36px;
            }

            .auth-mobile-brand {
                display: inline-flex;
                align-items: center;
                max-width: 190px;
                min-height: 42px;
                margin-bottom: 34px;
                color: var(--auth-navy);
                font-size: 19px;
                font-weight: 800;
                letter-spacing: -.035em;
            }

            .auth-mobile-brand img {
                display: block;
                width: auto;
                max-width: 180px;
                height: auto;
                max-height: 38px;
                object-fit: contain;
            }
        }

        @media (max-width: 520px) {
            body {
                padding: 74px 10px 10px;
                background: #edf0f4;
            }

            .auth-back {
                top: 14px;
                left: 14px;
                min-height: 40px;
                border-radius: 12px;
            }

            .auth-shell {
                padding: 6px;
                border-radius: 22px;
                box-shadow: 0 22px 50px rgba(var(--auth-secondary-rgb), .11);
            }

            .auth-form-panel {
                padding: 28px 20px 24px;
            }

            .auth-mobile-brand {
                margin-bottom: 27px;
            }

            .auth-form-head h2 {
                font-size: 30px;
            }

            .auth-form {
                margin-top: 25px;
            }

            .auth-row {
                gap: 10px;
            }

            .auth-social {
                grid-template-columns: 1fr;
            }
        }

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

        .auth-shell.is-register {
            min-height: 760px;
        }

        .auth-form-panel.is-register {
            padding-top: 38px;
            padding-bottom: 38px;
        }

        .auth-form-register {
            margin-top: 24px;
        }

        .auth-form-register .auth-field + .auth-field {
            margin-top: 13px;
        }

        .auth-form-register .auth-input {
            height: 50px;
        }

        .auth-password-hint {
            display: block;
            margin-top: 6px;
            color: var(--auth-faint);
            font-size: 10.5px;
            line-height: 1.4;
        }

        .auth-terms {
            display: grid;
            grid-template-columns: 17px 1fr;
            gap: 9px;
            align-items: start;
            margin: 17px 0 21px;
            color: var(--auth-muted);
            font-size: 11.5px;
            line-height: 1.55;
        }

        .auth-terms input {
            width: 17px;
            height: 17px;
            margin: 1px 0 0;
            accent-color: var(--auth-navy);
            cursor: pointer;
        }

        .auth-terms a {
            color: var(--auth-primary-ink);
            font-weight: 750;
        }

        .auth-terms a:hover {
            color: var(--auth-navy);
        }

        @media (max-width: 900px) {
            .auth-shell.is-register {
                min-height: 0;
            }

            .auth-form-panel.is-register {
                padding-top: 34px;
                padding-bottom: 32px;
            }
        }

        @media (max-width: 520px) {
            .auth-form-panel.is-register {
                padding-top: 26px;
                padding-bottom: 22px;
            }

            .auth-form-register {
                margin-top: 22px;
            }
        }

        /*
         * Sade kimlik doğrulama düzeni
         *
         * Giriş/kayıt akışı için önceki pazarlama paneli, formun önüne
         * geçiyordu. Aynı marka ve güven hissini daha küçük bir kartta,
         * yalnızca gerekli öğeleri göstererek koruyoruz.
         */
        body {
            padding: 24px;
            background:
                radial-gradient(circle at 50% -12%, rgba(var(--auth-primary-rgb), .10), transparent 36%),
                var(--auth-canvas);
        }

        body::before {
            display: none;
        }

        .auth-page {
            min-height: calc(100vh - 48px);
            min-height: calc(100svh - 48px);
        }

        .auth-shell,
        .auth-shell.is-register {
            width: min(500px, 100%);
            min-height: 0;
            display: block;
            padding: 0;
            overflow: visible;
            background: var(--auth-white);
            border: 1px solid rgba(208, 215, 226, .88);
            border-radius: 24px;
            box-shadow: 0 24px 64px rgba(var(--auth-secondary-rgb), .12);
        }

        .auth-shell.is-register {
            width: min(540px, 100%);
        }

        .auth-story {
            display: none;
        }

        .auth-form-panel,
        .auth-form-panel.is-register {
            display: block;
            padding: 42px 44px 36px;
        }

        .auth-mobile-brand {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            max-width: 190px;
            margin: 0 0 30px;
            color: var(--auth-navy);
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -.035em;
        }

        .auth-mobile-brand img {
            display: block;
            width: auto;
            max-width: 180px;
            max-height: 34px;
            height: auto;
            object-fit: contain;
        }

        .auth-form-kicker {
            margin-bottom: 8px;
            color: var(--auth-primary-ink);
            font-size: 10px;
            letter-spacing: .14em;
        }

        .auth-form-head h2 {
            font-size: 31px;
            line-height: 1.12;
            letter-spacing: -.045em;
        }

        .auth-form-head p {
            max-width: 390px;
            margin-top: 10px;
            font-size: 13.5px;
            line-height: 1.55;
        }

        .auth-form,
        .auth-form-register {
            margin-top: 27px;
        }

        .auth-field + .auth-field,
        .auth-form-register .auth-field + .auth-field {
            margin-top: 14px;
        }

        .auth-input,
        .auth-form-register .auth-input {
            height: 51px;
            border-radius: 12px;
        }

        .auth-row {
            margin: 16px 0 20px;
        }

        .auth-submit {
            height: 51px;
            border-radius: 12px;
            box-shadow: none;
        }

        .auth-submit:hover {
            box-shadow: 0 12px 24px rgba(var(--auth-secondary-rgb), .16);
        }

        .auth-divider {
            margin: 22px 0 15px;
        }

        .auth-social-link {
            min-height: 46px;
        }

        .auth-register {
            margin-top: 22px;
        }

        .auth-form-note {
            margin-top: 18px;
            padding-top: 17px;
        }

        .auth-terms {
            margin: 15px 0 19px;
        }

        @media (max-width: 900px) {
            body {
                padding: 74px 18px 24px;
            }

            .auth-shell,
            .auth-shell.is-register {
                max-width: 540px;
            }

            .auth-form-panel,
            .auth-form-panel.is-register {
                padding: 38px 38px 32px;
            }
        }

        @media (max-width: 520px) {
            body {
                padding: 68px 12px 12px;
                background: #f3f5f8;
            }

            .auth-page {
                min-height: auto;
            }

            .auth-back {
                left: 12px;
                top: 12px;
                background: transparent;
                border-color: transparent;
                box-shadow: none;
                backdrop-filter: none;
            }

            .auth-shell,
            .auth-shell.is-register {
                border-radius: 20px;
                box-shadow: 0 16px 42px rgba(var(--auth-secondary-rgb), .09);
            }

            .auth-form-panel,
            .auth-form-panel.is-register {
                padding: 31px 22px 25px;
            }

            .auth-mobile-brand {
                margin-bottom: 26px;
            }

            .auth-form-head h2 {
                font-size: 28px;
            }
        }