*{
            box-sizing:border-box;
        }

        html,
        body{
            margin:0;
            min-height:100%;
        }

        body{
            font-family:"Inter","Segoe UI",Arial,sans-serif;
            color:#142b4d;
            background:
                radial-gradient(circle at 12% 8%,rgba(20,116,255,.15),transparent 30%),
                radial-gradient(circle at 88% 92%,rgba(12,77,174,.10),transparent 34%),
                linear-gradient(135deg,#edf4fd 0%,#f7faff 48%,#edf3fa 100%);
        }

        .login-page{
            min-height:100vh;
            display:grid;
            place-items:center;
            padding:18px;
            position:relative;
            overflow-x:hidden;
            overflow-y:auto;
        }

        .login-page::before{
            content:"";
            position:absolute;
            width:430px;
            height:430px;
            border-radius:50%;
            left:-160px;
            top:-170px;
            background:radial-gradient(circle,rgba(23,117,255,.12),transparent 66%);
            pointer-events:none;
        }

        .login-page::after{
            content:"";
            position:absolute;
            width:470px;
            height:470px;
            border-radius:50%;
            right:-190px;
            bottom:-230px;
            background:radial-gradient(circle,rgba(16,58,125,.09),transparent 67%);
            pointer-events:none;
        }

        .login-wrap{
            position:relative;
            z-index:2;
            width:min(100%,430px);
        }

        .login-card{
            position:relative;
            overflow:hidden;
            padding:30px 30px 28px;
            border-radius:26px;
            background:rgba(255,255,255,.94);
            border:1px solid rgba(215,226,240,.95);
            box-shadow:
                0 28px 70px rgba(24,52,94,.15),
                0 8px 24px rgba(24,52,94,.06);
            backdrop-filter:blur(16px);
        }

        .login-card::before{
            content:"";
            position:absolute;
            left:0;
            right:0;
            top:0;
            height:4px;
            background:linear-gradient(90deg,#0d54b8,#129cff,#145cff);
        }

        .login-brand{
            display:flex;
            align-items:center;
            gap:13px;
            margin-bottom:27px;
        }

        .login-logo{
            width:52px;
            height:52px;
            display:grid;
            place-items:center;
            flex:0 0 52px;
            color:#1187ff;
        }

        .login-logo svg{
            width:45px;
            height:45px;
            display:block;
            stroke:currentColor;
            stroke-width:2.15;
            stroke-linecap:round;
            stroke-linejoin:round;
        }

        .login-brand-copy{
            min-width:0;
        }

        .login-brand-title{
            color:#15325d;
            font-size:20px;
            line-height:1.1;
            font-weight:800;
            letter-spacing:-.025em;
        }

        .login-brand-sub{
            margin-top:4px;
            color:#7b8ca4;
            font-size:11px;
            line-height:1.35;
        }

        .login-kicker{
            display:inline-flex;
            align-items:center;
            gap:7px;
            min-height:26px;
            padding:0 10px;
            border-radius:999px;
            background:#eef5ff;
            color:#1665e9;
            font-size:10px;
            font-weight:700;
            letter-spacing:.08em;
            text-transform:uppercase;
        }

        .login-kicker::before{
            content:"";
            width:7px;
            height:7px;
            border-radius:50%;
            background:#18a3ff;
            box-shadow:0 0 0 4px rgba(24,163,255,.12);
        }

        .login-card h1{
            margin:12px 0 7px;
            color:#122846;
            font-size:28px;
            line-height:1.1;
            font-weight:800;
            letter-spacing:-.035em;
        }

        .login-intro{
            margin:0 0 22px;
            color:#70829c;
            font-size:13px;
            line-height:1.55;
        }

        .login-error{
            margin:0 0 16px;
            padding:11px 13px;
            border:1px solid #ffd2d2;
            border-radius:12px;
            background:#fff3f3;
            color:#b53232;
            font-size:11px;
            font-weight:600;
            line-height:1.45;
        }

        .field-group{
            margin-top:14px;
        }

        .field-group:first-child{
            margin-top:0;
        }

        .field-label{
            display:block;
            margin:0 0 7px;
            color:#334b6e;
            font-size:11px;
            font-weight:700;
        }

        .field-wrap{
            position:relative;
        }

        .field-icon{
            position:absolute;
            left:14px;
            top:50%;
            transform:translateY(-50%);
            width:17px;
            height:17px;
            color:#6680a3;
            pointer-events:none;
        }

        .field-icon svg{
            display:block;
            width:17px;
            height:17px;
            fill:none;
            stroke:currentColor;
            stroke-width:1.8;
            stroke-linecap:round;
            stroke-linejoin:round;
        }

        .field-input{
            width:100%;
            height:48px;
            border:1px solid #d7e1ee;
            border-radius:13px;
            background:#fff;
            padding:0 44px 0 43px;
            outline:none;
            color:#172e50;
            font:inherit;
            font-size:12px;
            transition:
                border-color .16s ease,
                box-shadow .16s ease,
                background .16s ease;
        }

        .field-input::placeholder{
            color:#a0aec0;
        }

        .field-input:focus{
            border-color:#5c91e8;
            background:#fff;
            box-shadow:0 0 0 4px rgba(41,118,237,.10);
        }

        .password-toggle{
            position:absolute;
            right:8px;
            top:50%;
            transform:translateY(-50%);
            height:32px;
            padding:0 9px;
            border:0;
            border-radius:9px;
            background:#f3f6fb;
            color:#607491;
            font-family:inherit;
            font-size:9px;
            font-weight:700;
            cursor:pointer;
        }

        .password-toggle:hover{
            background:#eaf2ff;
            color:#155fd9;
        }


        .login-method-tabs{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:4px;
            padding:4px;
            margin-bottom:14px;
            border:1px solid #e1e8f1;
            border-radius:12px;
            background:#f3f6fb;
        }

        .login-method-tab{
            height:34px;
            border:0;
            border-radius:9px;
            background:transparent;
            color:#71829a;
            font-family:inherit;
            font-size:10px;
            font-weight:700;
            cursor:pointer;
            transition:background .15s ease,color .15s ease,box-shadow .15s ease;
        }

        .login-method-tab.active{
            background:#fff;
            color:#155fd9;
            box-shadow:0 4px 12px rgba(31,71,125,.08);
        }

        .login-method-panel.hidden{
            display:none;
        }

        .phone-help{
            margin-top:5px;
            color:#91a0b4;
            font-size:8px;
            line-height:1.35;
        }

        .forgot-password-row{
            display:flex;
            justify-content:flex-end;
            margin-top:8px;
            margin-bottom:-4px;
        }

        .forgot-password-link{
            color:#155fd9;
            font-size:9px;
            font-weight:700;
            text-decoration:none;
        }

        .forgot-password-link:hover{
            color:#0d4eba;
            text-decoration:underline;
        }

        .login-btn{
            width:100%;
            height:48px;
            margin-top:20px;
            border:0;
            border-radius:13px;
            background:linear-gradient(135deg,#119fff 0%,#126ef7 48%,#1557ef 100%);
            color:#fff;
            font-family:inherit;
            font-size:13px;
            font-weight:800;
            cursor:pointer;
            box-shadow:0 13px 24px rgba(18,101,236,.22);
            transition:
                transform .16s ease,
                box-shadow .16s ease;
        }

        .login-btn:hover{
            transform:translateY(-1px);
            box-shadow:0 16px 28px rgba(18,101,236,.28);
        }

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

        .login-footer{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            margin-top:18px;
            padding-top:17px;
            border-top:1px solid #edf1f6;
        }

        .login-footer-copy{
            color:#7a8ba2;
            font-size:10px;
            line-height:1.4;
        }

        .back-link{
            flex:0 0 auto;
            color:#155fd9;
            font-size:11px;
            font-weight:700;
            text-decoration:none;
        }

        .back-link:hover{
            color:#0d4eba;
        }

        .login-security{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            margin-top:15px;
            color:#93a0b2;
            font-size:9px;
        }

        .login-security svg{
            width:12px;
            height:12px;
            fill:none;
            stroke:#7188a7;
            stroke-width:1.8;
            stroke-linecap:round;
            stroke-linejoin:round;
        }


        .recaptcha-branding{
            margin-top:8px;
            color:#98a4b5;
            font-size:7.5px;
            line-height:1.4;
            text-align:center;
        }

        .recaptcha-branding a{
            color:#607b9f;
            font-weight:600;
            text-decoration:none;
        }

        .recaptcha-branding a:hover{
            text-decoration:underline;
        }

        .grecaptcha-badge{
            visibility:hidden !important;
        }


        /* Alt kısımdaki Hesap Oluştur alanının masaüstünde görünür kalması */
        @media(min-width:521px) and (max-height:820px){
            .login-page{
                place-items:start center;
                padding-top:10px;
                padding-bottom:10px;
            }

            .login-card{
                padding:20px 26px 17px;
                border-radius:23px;
            }

            .login-brand{
                margin-bottom:16px;
            }

            .login-logo{
                width:45px;
                height:45px;
                flex-basis:45px;
            }

            .login-logo svg{
                width:39px;
                height:39px;
            }

            .login-kicker{
                min-height:23px;
                font-size:9px;
            }

            .login-card h1{
                margin:8px 0 5px;
                font-size:25px;
            }

            .login-intro{
                margin-bottom:13px;
                font-size:11px;
                line-height:1.45;
            }

            .login-method-tabs{
                margin-bottom:10px;
            }

            .login-method-tab{
                height:31px;
            }

            .field-group{
                margin-top:10px;
            }

            .field-label{
                margin-bottom:5px;
                font-size:10px;
            }

            .field-input{
                height:42px;
                font-size:11px;
            }

            .password-toggle{
                height:28px;
            }

            .phone-help{
                margin-top:4px;
            }

            .forgot-password-row{
                margin-top:6px;
                margin-bottom:-2px;
            }

            .login-btn{
                height:43px;
                margin-top:13px;
            }

            .recaptcha-branding{
                margin-top:5px;
                line-height:1.3;
            }

            .login-footer{
                margin-top:11px;
                padding-top:11px;
            }

            .login-security{
                margin-top:8px;
            }
        }

        @media(max-width:520px){
            .login-page{
                padding:18px 12px;
            }

            .login-card{
                padding:24px 20px 22px;
                border-radius:22px;
            }

            .login-card h1{
                font-size:25px;
            }

            .login-footer{
                align-items:flex-start;
                flex-direction:column;
                gap:8px;
            }
        }