*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --purple:#7c3aed;
    --purple-dark:#5b21b6;
    --purple-light:#a855f7;
    --text:#171724;
    --muted:#6f7082;
    --line:#e7e0f3;
}

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

body{
    overflow:hidden;
    font-family:'Plus Jakarta Sans',sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 12% 12%,rgba(124,58,237,.12),transparent 25%),
        radial-gradient(circle at 72% 10%,rgba(168,85,247,.10),transparent 24%),
        radial-gradient(circle at 22% 88%,rgba(124,58,237,.08),transparent 29%),
        linear-gradient(135deg,#ffffff 0%,#faf8ff 48%,#f6f2ff 100%);
}

button,
input{
    font:inherit;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

.login-page{
    position:relative;
    width:100%;
    height:100vh;
    padding:20px 44px 22px;
    overflow:hidden;
}

.page-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(24px);
}

.page-glow-one{
    width:520px;
    height:520px;
    left:-180px;
    bottom:-210px;
    background:radial-gradient(circle,rgba(124,58,237,.18),transparent 67%);
}

.page-glow-two{
    width:560px;
    height:560px;
    right:-220px;
    top:-160px;
    background:radial-gradient(circle,rgba(168,85,247,.17),transparent 68%);
}

/* HEADER */

header{
    position:relative;
    z-index:1000;

    width:100%;
    max-width:1440px;

    margin:0 auto 8px;

    background:transparent;
    box-shadow:none;
}

.navbar{
    width:100%;

    margin:0 auto;
    padding:0 18px 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 12px 30px rgba(124,58,237,.04);
}

/* LOGO */

.logo{
    display:flex;
    align-items:center;
    gap:7px;

    color:#15151f;
    text-decoration:none;

    font-size:1.75rem;
    font-weight:800;
    letter-spacing:3px;
    
}

/* NAVBAR LOGO ANİMASYONU */

.o-circle{
    position:relative;

    width:31px;
    height:31px;

    display:inline-block;
    flex-shrink:0;

    border-radius:50%;

    transform-style:preserve-3d;
    animation:logoDonusumu 15s linear infinite;
}

.o-circle::before{
    content:"";

    position:absolute;
    inset:0;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 30% 30%,
            #c084fc,
            #7c3aed 70%
        );

    box-shadow:0 8px 24px rgba(124,58,237,.35);

    opacity:1;
    animation:morDaireGorunumu 15s linear infinite;
}

.o-circle::after{
    content:"";

    position:absolute;
    inset:-2px;

    background:
        url("images/favicon.png")
        center / 45px 45px
        no-repeat;

    opacity:0;

    animation:logoGorunumu 15s linear infinite;
}

@keyframes logoDonusumu{
    0%,
    66.66%{
        transform:rotateY(0deg);
    }

    73.33%,
    93.33%{
        transform:rotateY(180deg);
    }

    100%{
        transform:rotateY(360deg);
    }
}

@keyframes morDaireGorunumu{
    0%,
    69.9%{
        opacity:1;
    }

    70%,
    96.5%{
        opacity:0;
    }

    96.6%,
    100%{
        opacity:1;
    }
}

@keyframes logoGorunumu{
    0%,
    69.9%{
        opacity:0;
        transform:scaleX(-1);
    }

    70%,
    96.5%{
        opacity:1;
        transform:scaleX(-1);
    }

    96.6%,
    100%{
        opacity:0;
        transform:scaleX(-1);
    }
}

/* NAVIGATION */

.nav-links{
    display:flex;
    align-items:center;

    gap:36px;

    list-style:none;
}

.nav-links li a{
    position:relative;

    color:#4b4b57;

    text-decoration:none;

    font-size:.95rem;
    font-weight:600;

    transition:.3s ease;
}

.nav-links li a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-10px;

    width:0;
    height:2px;

    border-radius:20px;

    background:#7c3aed;

    transform:translateX(-50%);

    transition:.3s ease;
}

.nav-links li a:hover{
    color:#7c3aed;
}

.nav-links li a:hover::after{
    width:70%;
}

/* NAV BUTTONS */

.nav-auth{
    display:flex;
    align-items:center;
    gap:16px;
}

.btn-start{
    padding:14px 28px;

    border-radius:16px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #8b5cf6 0%,
            #6d28d9 100%
        );

    box-shadow:0 12px 28px rgba(124,58,237,.28);

    text-decoration:none;

    font-size:.95rem;
    font-weight:700;

    transition:.3s ease;
}

.btn-start:hover{
    transform:translateY(-3px);

    box-shadow:
        0 16px 36px rgba(124,58,237,.38);
}


/* ANA DÜZEN */

.login-layout{
    position:relative;
    z-index:2;
    max-width:1440px;
    height:calc(100vh - 90px);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:stretch;
    gap:40px;
}

/* SOL TARAF */

.visual-side{
    position:relative;
    min-width:0;
    padding:18px 8px 0 18px;
    display:flex;
    flex-direction:column;
}

.eyebrow{
    width:fit-content;
    margin-bottom:18px;
    padding:9px 15px;
    border-radius:999px;
    color:#6d28d9;
    background:rgba(124,58,237,.09);
    font-size:.79rem;
    font-weight:800;
}

.eyebrow span{
    margin-right:7px;
}

.visual-copy h1{
    max-width:610px;
    margin-bottom:14px;
    color:#171724;
    font-size:3.2rem;
    line-height:1.06;
    letter-spacing:-2px;
}

.visual-copy h1 span{
    background:linear-gradient(135deg,var(--purple),var(--purple-light));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.visual-copy p{
    max-width:565px;
    color:#626376;
    font-size:.91rem;
    line-height:1.72;
}

/* BALON EVRENİ */

.bubble-universe{
    position:relative;
    flex:1;
    min-height:430px;
    margin-top:2px;
    isolation:isolate;
}

.bubble-universe::before{
    content:"";
    position:absolute;
    inset:4% 2% 2%;
    z-index:-3;
    border-radius:50%;
    background:
        radial-gradient(circle at 48% 48%,rgba(124,58,237,.10),transparent 44%);
    filter:blur(12px);
}

.light-trail{
    position:absolute;
    z-index:-2;
    width:88%;
    height:210px;
    left:4%;
    border:2px solid rgba(124,58,237,.11);
    border-top-color:transparent;
    border-left-color:transparent;
    border-radius:50%;
    transform:rotate(-10deg);
    filter:drop-shadow(0 0 10px rgba(124,58,237,.14));
    pointer-events:none;
}

.trail-one{
    top:23%;
}

.trail-two{
    top:38%;
    transform:rotate(7deg) scale(.91);
    opacity:.72;
}

.trail-three{
    top:53%;
    transform:rotate(-4deg) scale(.78);
    opacity:.55;
}

/* CAM BALON */

.study-bubble{
    position:absolute;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.92);
    border-radius:50%;
    color:rgba(78,54,126,.72);
    background:
        radial-gradient(circle at 28% 22%,rgba(255,255,255,.96),rgba(255,255,255,.35) 24%,transparent 42%),
        radial-gradient(circle at 60% 72%,rgba(168,85,247,.20),rgba(124,58,237,.08) 54%,rgba(255,255,255,.16) 75%);
    box-shadow:
        inset 8px 8px 20px rgba(255,255,255,.70),
        inset -12px -12px 26px rgba(124,58,237,.10),
        0 16px 42px rgba(98,55,170,.14);
    backdrop-filter:blur(11px);
    -webkit-backdrop-filter:blur(11px);
    cursor:default;
    transition:
        scale .28s ease,
        filter .28s ease,
        box-shadow .28s ease,
        opacity .35s ease;

    transform-origin:center;
    will-change:transform;
    overflow:hidden;
    isolation:isolate;
}

.study-bubble::before{
    content:"";
    position:absolute;
    inset:7%;
    border-radius:50%;
    border-top:2px solid rgba(255,255,255,.78);
    border-left:1px solid rgba(255,255,255,.46);
    pointer-events:none;
}
/* BALON ÜZERİNDE YAVAŞ IŞIK YANSIMASI */

.study-bubble::after{
    content:"";

    position:absolute;
    inset:0%;

    border-radius:50%;

    background:
    linear-gradient(
    115deg,
    transparent 42%,
    rgba(255,255,255,.05) 47%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.05) 53%,
    transparent 58%
    );

    transform:
        translateX(-145%)
        rotate(-12deg);

    opacity:0;

    mix-blend-mode:screen;
    pointer-events:none;

    animation:
        bubbleLightPass
        6.8s
        ease-in-out
        infinite;
}
@keyframes bubbleLightPass{
    0%,
    58%{
        transform:
            translateX(-145%)
            rotate(-12deg);

        opacity:0;
    }

    64%{
        opacity:.24;
    }

    76%{
        opacity:.34;
    }

    88%{
        opacity:.18;
    }

    100%{
        transform:
            translateX(145%)
            rotate(-12deg);

        opacity:0;
    }
}
.study-bubble:nth-of-type(2n)::after{
    animation-delay:-1.8s;
}

.study-bubble:nth-of-type(3n)::after{
    animation-delay:-3.4s;
}

.study-bubble:nth-of-type(5n)::after{
    animation-delay:-5.1s;
}

.study-bubble svg{
    width:25%;
    height:25%;
    margin-bottom:5%;
    stroke-width:2.2;
    color:rgba(124,58,237,.62);
}

.study-bubble strong{
    color:rgba(69,46,112,.70);
    font-weight:800;
    font-size:clamp(.72rem,1.05vw,1rem);
}

.study-bubble:hover{
    scale:1.09;
    z-index:20;
    filter:saturate(1.08) brightness(1.03);
    box-shadow:
        inset 8px 8px 20px rgba(255,255,255,.82),
        inset -12px -12px 26px rgba(124,58,237,.14),
        0 22px 54px rgba(98,55,170,.22);
}

.size-xlarge{
    width:156px;
    height:156px;
}

.size-large{
    width:122px;
    height:122px;
}

.size-medium{
    width:96px;
    height:96px;
}

.size-small{
    width:76px;
    height:76px;
}

.bubble-tyt{
    top:3%;
    left:44%;
}

.bubble-ayt{
    top:6%;
    right:6%;
}

.bubble-yks{
    top:30%;
    left:41%;
}

.bubble-kpss{
    top:34%;
    right:5%;
}

.bubble-lgs{
    top:61%;
    right:22%;
}

.bubble-dgs{
    left:43%;
    top:63%;
}

.bubble-ydt{
    right:8%;
    top:68%;
}

.bubble-geometry{
    left:1%;
    top:64%;
}

.bubble-physics{
    left:27%;
    top:70%;
}

/* ================================= */
/* ARKA PLAN DERİNLİK BALONLARI */
/* ================================= */

.depth-bubble{
    z-index:1;
    pointer-events:auto;
}

/* En uzaktaki balonlar */

.depth-far{
    width:66px;
    height:66px;

    opacity:.60;

    filter:
    blur(.15px)
    saturate(.95);

    box-shadow:
        inset 5px 5px 14px rgba(255,255,255,.55),
        inset -8px -8px 18px rgba(124,58,237,.07),
        0 9px 24px rgba(98,55,170,.07);
}

.depth-far svg{
    width:22%;
    height:22%;
    margin-bottom:4%;
    opacity:.95;
}

.depth-far strong{
    font-size:.57rem;
    color:#6d28d9;
}

/* Orta uzaklıktaki balonlar */

.depth-mid{
    width:82px;
    height:82px;

    opacity:.60;

    filter:
        blur(.25px)
        saturate(.82);

    box-shadow:
        inset 6px 6px 16px rgba(255,255,255,.64),
        inset -9px -9px 21px rgba(124,58,237,.08),
        0 12px 30px rgba(98,55,170,.10);
}

.depth-mid svg{
    width:24%;
    height:24%;
    margin-bottom:5%;
    opacity:1;
}

.depth-mid strong{
    font-size:.64rem;
    color:rgba(69,46,112,.62);
}

/* Hover sırasında arkadaki balon hafifçe yaklaşır */

.depth-bubble:hover{
    opacity:.9;
    filter:
        blur(0)
        saturate(1);

    scale:1.12;
    z-index:12;
}

/* DERİNLİK BALONLARININ KONUMLARI */

.bubble-chemistry{
    top:2%;
    left:29%;
    animation:deepFloatOne 11s ease-in-out infinite;
}

.bubble-biology{
    top:24%;
    right:20%;
    animation:deepFloatTwo 10s ease-in-out infinite reverse;
}

.bubble-history{
    top:49%;
    right:27%;
    animation:deepFloatThree 12s ease-in-out infinite;
}

.bubble-geography{
    left:19%;
    top:18%;

    animation:deepFloatTwo 11.5s ease-in-out infinite;
}

.bubble-science{
    right:85%;
    bottom:2%;
    top: 10%;
    animation:deepFloatOne 10.5s ease-in-out infinite reverse;
}

/* KAYIT SAYFASI — EMİR */

.bubble-math{
    top:40%;
    left:18%;
}

/* KAYIT SAYFASI — ASLI */

.bubble-turkish{
    top:30%;
    left:3%;
}

/* HIZLI AMA YUMUŞAK HAREKETLER */

.movement-one{
    animation:driftOne 8.5s ease-in-out infinite;
}

.movement-two{
    animation:driftTwo 7.2s ease-in-out infinite;
}

.movement-three{
    animation:driftThree 9s ease-in-out infinite;
}

.movement-four{
    animation:driftFour 7.8s ease-in-out infinite;
}

.movement-five{
    animation:driftTwo 8.4s ease-in-out infinite reverse;
}

.movement-six{
    animation:driftOne 6.9s ease-in-out infinite reverse;
}

.movement-seven{
    animation:driftFour 8.8s ease-in-out infinite reverse;
}

.movement-eight{
    animation:driftThree 9.6s ease-in-out infinite reverse;
}

.movement-nine{
    animation:driftOne 7.7s ease-in-out infinite;
}

.movement-ten{
    animation:driftTwo 8.1s ease-in-out infinite reverse;
}

.movement-eleven{
    animation:driftFour 7.1s ease-in-out infinite;
}

@keyframes driftOne{
    0%,100%{
        transform:translate3d(0,0,0) rotate(0deg);
    }
    35%{
        transform:translate3d(12px,-15px,0) rotate(3deg);
    }
    70%{
        transform:translate3d(-9px,12px,0) rotate(-2deg);
    }
}

@keyframes driftTwo{
    0%,100%{
        transform:translate3d(0,0,0);
    }
    50%{
        transform:translate3d(-17px,14px,0);
    }
}

@keyframes driftThree{
    0%,100%{
        transform:translate3d(0,0,0) rotate(-1deg);
    }
    32%{
        transform:translate3d(14px,10px,0) rotate(2deg);
    }
    67%{
        transform:translate3d(-10px,-13px,0) rotate(-2deg);
    }
}

@keyframes driftFour{
    0%,100%{
        transform:translate3d(0,0,0);
    }
    40%{
        transform:translate3d(10px,-18px,0);
    }
    75%{
        transform:translate3d(-12px,8px,0);
    }
}

/* KÜÇÜK DEKORATİF BALONLAR */

.mini-orb{
    position:absolute;
    z-index:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.88);
    background:
        radial-gradient(circle at 28% 22%,rgba(255,255,255,.94),rgba(196,181,253,.32) 42%,rgba(124,58,237,.09));
    box-shadow:
        inset 0 2px 5px rgba(255,255,255,.85),
        0 11px 25px rgba(124,58,237,.11);
}

.mini-one{
    width:32px;
    height:32px;
    left:35%;
    top:18%;
    animation:driftOne 6.4s ease-in-out infinite;
}

.mini-two{
    width:24px;
    height:24px;
    right:1%;
    top:24%;
    animation:driftTwo 5.8s ease-in-out infinite reverse;
}

.mini-three{
    width:42px;
    height:42px;
    left:6%;
    top:69%;
    animation:driftFour 7s ease-in-out infinite;
}

.mini-four{
    width:29px;
    height:29px;
    right:37%;
    top:54%;
    animation:driftThree 6.2s ease-in-out infinite;
}

.mini-five{
    width:20px;
    height:20px;
    left:37%;
    bottom:6%;
    animation:driftTwo 5.4s ease-in-out infinite;
}

.mini-six{
    width:36px;
    height:36px;
    right:2%;
    bottom:15%;
    animation:driftOne 7.3s ease-in-out infinite reverse;
}


/* GİRİŞ KARTI */

.login-card{
    position:relative;
    min-width:0;
    height:100%;
    padding:28px 44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(124,58,237,.10);
    border-radius:34px;
    background:rgba(255,255,255,.91);
    box-shadow:0 30px 80px rgba(64,33,120,.14);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
}

.login-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
        linear-gradient(145deg,rgba(255,255,255,.76),transparent 32%);
}

.login-card-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:500px;
}

.card-top{
    min-height:48px;
    margin-bottom:32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.welcome-pill{
    width:fit-content;
    padding:10px 15px;
    border:1px solid rgba(124,58,237,.09);
    border-radius:14px;
    color:#7c3aed;
    background:#f4efff;
    font-size:.77rem;
    font-weight:800;
}


.login-card h2{
    margin-bottom:9px;
    color:#181824;
    font-size:2.32rem;
    letter-spacing:-1.2px;
}

.login-subtitle{
    color:#717285;
    font-size:.84rem;
    line-height:1.6;
}

.login-form{
    margin-top:28px;
}

.field-group{
    margin-bottom:19px;
}

.field-group label{
    display:block;
    margin-bottom:8px;
    color:#252534;
    font-size:.79rem;
    font-weight:800;
}

.input-wrap{
    position:relative;
    display:flex;
    align-items:center;
}

.input-wrap > svg{
    position:absolute;
    left:16px;
    width:18px;
    height:18px;
    color:#85869a;
    stroke-width:1.9;
    pointer-events:none;
}

.input-wrap input{
    width:100%;
    height:55px;
    padding:0 50px;
    border:1px solid #e2ddeb;
    outline:none;
    border-radius:14px;
    color:#222231;
    background:rgba(255,255,255,.84);
    font-size:.85rem;
    transition:.3s ease;
}

.input-wrap input::placeholder{
    color:#a0a0b0;
}

.input-wrap input:focus{
    border-color:rgba(124,58,237,.65);
    box-shadow:0 0 0 4px rgba(124,58,237,.10);
    background:#fff;
}

.password-toggle{
    position:absolute;
    right:13px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    color:#85869a;
    background:transparent;
    cursor:pointer;
    transition:.25s ease;
}

.password-toggle:hover{
    color:#7c3aed;
    background:#f4efff;
}

.password-toggle svg{
    width:18px;
    height:18px;
    stroke-width:1.9;
}

.eye-closed{
    display:none;
}

.password-toggle.showing .eye-open{
    display:none;
}

.password-toggle.showing .eye-closed{
    display:block;
}

.form-options{
    margin:1px 0 21px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.remember-me{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    color:#5f6072;
    font-size:.78rem;
    cursor:pointer;
    user-select:none;
}

.remember-me input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.custom-checkbox{
    position:relative;
    width:17px;
    height:17px;
    flex-shrink:0;
    border:1px solid #d8d0e8;
    border-radius:5px;
    background:#fff;
    transition:.25s ease;
}

.remember-me input:checked + .custom-checkbox{
    border-color:#7c3aed;
    background:#7c3aed;
}

.remember-me input:checked + .custom-checkbox::after{
    content:"";
    position:absolute;
    left:5px;
    top:2px;
    width:4px;
    height:8px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.forgot-link{
    color:#7c3aed;
    text-decoration:none;
    font-size:.78rem;
    font-weight:700;
}

.forgot-link:hover{
    text-decoration:underline;
}

.login-submit{
    position:relative;
    width:100%;
    height:57px;
    padding:0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    overflow:hidden;
    border:0;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    box-shadow:0 17px 36px rgba(124,58,237,.27);
    font-weight:800;
    cursor:pointer;
    transition:.3s ease;
}

.login-submit::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-40%;
    width:55px;
    height:200%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
    transform:rotate(20deg);
    transition:.6s ease;
}

.login-submit:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 46px rgba(124,58,237,.35);
}

.login-submit:hover::before{
    left:115%;
}

.divider{
    position:relative;
    margin:22px 0;
    text-align:center;
}

.divider::before{
    content:"";
    position:absolute;
    top:50%;
    right:0;
    left:0;
    height:1px;
    background:#ebe6f2;
}

.divider span{
    position:relative;
    padding:0 14px;
    color:#9696a6;
    background:#fff;
    font-size:.72rem;
}

.google-button{
    width:100%;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:1px solid #e2ddeb;
    border-radius:14px;
    color:#272736;
    background:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.3s ease;
}

.google-button:hover{
    transform:translateY(-2px);
    border-color:#cfc4e6;
    box-shadow:0 12px 31px rgba(64,33,120,.08);
}

.google-mark{
    width:23px;
    height:23px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#4285f4;
    font-size:1.08rem;
    font-weight:800;
    text-shadow:
        1px 0 #ea4335,
        0 1px #34a853,
        -1px 0 #fbbc05;
}

.register-text{
    margin-top:21px;
    color:#707184;
    text-align:center;
    font-size:.82rem;
}

.register-text a{
    margin-left:4px;
    color:#7c3aed;
    text-decoration:none;
    font-weight:800;
}

.register-text a:hover{
    text-decoration:underline;
}

.friendly-note{
    margin-top:21px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:13px;
    color:#716680;
    background:#faf7ff;
    font-size:.69rem;
    font-weight:600;
}

/* RESPONSIVE */

@media(max-width:1180px){
    body{
        overflow:auto;
    }

    .login-page{
        height:auto;
        min-height:100vh;
        padding:24px 26px 36px;
        overflow:hidden;
    }

    .login-layout{
        height:auto;
        grid-template-columns:1fr;
        max-width:780px;
    }

    .login-card{
        min-height:720px;
        order:-1;
    }

    .visual-side{
        min-height:820px;
    }

    .bubble-universe{
        min-height:560px;
    }
}

@media(max-width:680px){
    .login-page{
        padding:18px 15px 28px;
    }

    .visual-copy h1{
        font-size:2.35rem;
    }

    .visual-copy p{
        font-size:.88rem;
    }

    .login-card{
        min-height:680px;
        padding:28px 20px;
        border-radius:25px;
    }

    .card-top{
        align-items:flex-start;
        flex-direction:column;
        margin-bottom:24px;
    }

    .form-options{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .visual-side{
        min-height:860px;
        padding-left:0;
        padding-right:0;
    }

    .bubble-universe{
        min-height:640px;
        transform:scale(.88);
        transform-origin:top center;
    }

    .journey-benefits{
        align-items:flex-start;
        flex-direction:column;
        gap:9px;
        padding-left:10px;
    }
}

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

@keyframes deepFloatOne{
    0%,
    100%{
        transform:
            translate3d(0,0,0)
            scale(.92);
    }

    50%{
        transform:
            translate3d(11px,-13px,0)
            scale(.98);
    }
}

@keyframes deepFloatTwo{
    0%,
    100%{
        transform:
            translate3d(0,0,0)
            scale(.94);
    }

    38%{
        transform:
            translate3d(-10px,9px,0)
            scale(.98);
    }

    72%{
        transform:
            translate3d(8px,-8px,0)
            scale(.91);
    }
}

@keyframes deepFloatThree{
    0%,
    100%{
        transform:
            translate3d(0,0,0)
            rotate(0deg)
            scale(.90);
    }

    50%{
        transform:
            translate3d(-13px,-10px,0)
            rotate(-3deg)
            scale(.97);
    }
}


/* ========================================= */
/* DÜŞÜK YÜKSEKLİKLİ LAPTOP EKRANLARI */
/* ========================================= */

@media (min-width:1181px) and (max-height:850px){

    .login-page{
        padding:12px 34px 14px;
    }

    header{
        margin-bottom:2px;
    }

    .navbar{
        padding:4px 18px 8px;
    }

    .login-layout{
        height:calc(100vh - 70px);
        gap:30px;
    }

    /* SOL TARAF */

    .visual-side{
        padding-top:8px;
    }

    .eyebrow{
        margin-bottom:12px;
        padding:7px 13px;
        font-size:.72rem;
    }

    .visual-copy h1{
        margin-bottom:10px;
        font-size:2.65rem;
        line-height:1.04;
    }

    .visual-copy p{
        max-width:530px;
        font-size:.80rem;
        line-height:1.55;
    }

    .bubble-universe{
        min-height:385px;
        margin-top:-5px;

        transform:scale(.84);
        transform-origin:top center;
    }

    /* GİRİŞ PANELİ */

    .login-card{
        padding:20px 38px;
        border-radius:30px;
    }

    .login-card-inner{
        max-width:500px;
    }

    .card-top{
        min-height:38px;
        margin-bottom:20px;
    }

    .welcome-pill{
        padding:8px 13px;
        font-size:.70rem;
    }

    .login-card h2{
        margin-bottom:6px;
        font-size:2rem;
    }

    .login-subtitle{
        font-size:.76rem;
    }

    .login-form{
        margin-top:20px;
    }

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

    .field-group label{
        margin-bottom:6px;
        font-size:.73rem;
    }

    .input-wrap input{
        height:49px;
    }

    .form-options{
        margin-bottom:15px;
    }

    .login-submit{
        height:51px;
    }

    .divider{
        margin:15px 0;
    }

    .google-button{
        height:49px;
    }

    .register-text{
        margin-top:14px;
    }

    .friendly-note{
        margin-top:14px;
        padding:9px 12px;
    }
}

/* ========================================= */
/* BALON PATLAMA + FİZİK PARÇACIKLARI       */
/* ========================================= */

.study-bubble.is-burst{
    border-color:transparent !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    scale:1 !important;
}

.study-bubble.is-burst::before{
    opacity:0 !important;
}

.study-bubble.is-burst svg,
.study-bubble.is-burst strong{
    visibility:hidden !important;
}

.study-bubble.is-restoring{
    animation:
        restoreStudyBubble
        .62s
        cubic-bezier(.16,1,.3,1)
        both !important;
}

@keyframes restoreStudyBubble{
    0%{
        opacity:0;
        scale:.18;
        filter:blur(2px);
    }

    100%{
        opacity:1;
        scale:1;
        filter:blur(0);
    }
}

/* Parçacık bir balona çarptığında balon çok hafif tepki verir. */
/* HARF VEYA İKON ÇARPINCA BALONUN TEPKİSİ */

.study-bubble{
    transition:
        scale .28s ease,
        filter .28s ease,
        box-shadow .28s ease,
        opacity .35s ease,
        translate .42s cubic-bezier(.22,1,.36,1);
}

.study-bubble.collision-hit{
    translate:
        var(--hit-x,0px)
        var(--hit-y,0px);
}


.burst-ring{
    position:fixed;
    z-index:9997;
    left:0;
    top:0;
    width:var(--ring-size,90px);
    height:var(--ring-size,90px);
    border:2px solid rgba(124,58,237,.22);
    border-radius:50%;
    pointer-events:none;
    transform:translate(-50%,-50%) scale(.45);
    animation:burstRingExpand .52s ease-out forwards;
}

@keyframes burstRingExpand{
    0%{ opacity:.8; transform:translate(-50%,-50%) scale(.45); }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(1.42); }
}

.bubble-drop{
    position:fixed;
    z-index:9999;
    border-radius:50%;
    pointer-events:none;
    background:
        radial-gradient(circle at 30% 24%,
            rgba(255,255,255,.95),
            rgba(168,85,247,.48) 48%,
            rgba(124,58,237,.14) 100%);
    box-shadow:0 5px 14px rgba(124,58,237,.16);
    animation:dropBurst .62s cubic-bezier(.18,.75,.3,1) forwards;
}

@keyframes dropBurst{
    0%{
        opacity:.9;
        transform:translate(-50%,-50%) scale(.7);
    }
    100%{
        opacity:0;
        transform:translate(
            calc(-50% + var(--drop-x)),
            calc(-50% + var(--drop-y))
        ) scale(.08);
    }
}

.physics-particle{
    position:fixed;
    left:0;
    top:0;
    z-index:9998;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(69,46,112,.88);
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:800;
    line-height:1;
    pointer-events:none;
    user-select:none;
    transform-origin:center;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
}

.physics-icon svg{
    width:100%;
    height:100%;
    color:rgba(124,58,237,.78);
    stroke-width:2.1;
}

.physics-letter{
    text-shadow:0 5px 12px rgba(124,58,237,.10);
}
/* FİZİK PARÇACIKLARI İÇİN KARARLI KONUMlandırma */
.physics-particle{
    margin:0 !important;
    padding:0 !important;
    animation:none !important;
    transition:opacity .18s linear !important;
    contain:layout style paint;
}

.study-bubble.is-burst::after{
    display:none;
}

/* ========================================= */
/* BALON SÜRÜKLEME */
/* ========================================= */

.study-bubble{
    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

.study-bubble.is-dragging{
    z-index:100 !important;
    cursor:grabbing;

    animation-play-state:paused !important;

    transition:
        scale .18s ease,
        filter .18s ease,
        box-shadow .18s ease !important;

    scale:1.08 !important;
    filter:saturate(1.08) brightness(1.04);

    box-shadow:
        inset 8px 8px 20px rgba(255,255,255,.84),
        inset -12px -12px 26px rgba(124,58,237,.16),
        0 30px 65px rgba(98,55,170,.26);
}

.study-bubble.is-drag-returning{
    transition:
        translate .7s cubic-bezier(.16,1,.3,1),
        scale .28s ease,
        filter .28s ease,
        box-shadow .28s ease !important;
}

/* =========================================
   KAYIT SAYFASI
========================================= */

.btn-login-register{
    padding:13px 25px;
    border:1px solid rgba(124,58,237,.16);
    border-radius:16px;
    color:#6d28d9;
    background:rgba(255,255,255,.86);
    box-shadow:0 10px 26px rgba(64,33,120,.07);
    text-decoration:none;
    font-size:.92rem;
    font-weight:700;
    transition:.3s ease;
}

.btn-login-register:hover{
    transform:translateY(-2px);
    border-color:rgba(124,58,237,.38);
    background:#fff;
    box-shadow:0 14px 32px rgba(64,33,120,.12);
}

.register-card-inner{max-width:520px;}
.register-form{margin-top:20px;}
.register-form .field-group{margin-bottom:13px;}
.register-form .field-group label{margin-bottom:6px;}

.register-form .input-wrap input,
.register-form .select-wrap select{
    height:48px;
}

.register-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.select-wrap select{
    width:100%;
    padding:0 46px 0 50px;
    border:1px solid #e2ddeb;
    outline:none;
    border-radius:14px;
    color:#222231;
    background:rgba(255,255,255,.84);
    font-size:.84rem;
    appearance:none;
    cursor:pointer;
    transition:.3s ease;
}

.select-wrap::after{
    content:"⌄";
    position:absolute;
    right:17px;
    top:50%;
    color:#85869a;
    font-size:1rem;
    transform:translateY(-58%);
    pointer-events:none;
}

.select-wrap select:focus{
    border-color:rgba(124,58,237,.65);
    box-shadow:0 0 0 4px rgba(124,58,237,.10);
    background:#fff;
}

.terms-check{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:2px 0 15px;
    color:#656678;
    font-size:.71rem;
    line-height:1.55;
    cursor:pointer;
    user-select:none;
}

.terms-check input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.terms-check .custom-checkbox{margin-top:1px;}

.terms-check input:checked + .custom-checkbox{
    border-color:#7c3aed;
    background:#7c3aed;
}

.terms-check input:checked + .custom-checkbox::after{
    content:"";
    position:absolute;
    left:5px;
    top:2px;
    width:4px;
    height:8px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.terms-check a{
    color:#7c3aed;
    font-weight:700;
    text-decoration:none;
}

.terms-check a:hover{text-decoration:underline;}

.register-form .login-submit{height:50px;}
.register-form .divider{margin:14px 0;}
.register-form .google-button{height:48px;}
.register-form .register-text{margin-top:13px;}

.register-card-inner .friendly-note{
    margin-top:13px;
    padding:9px 12px;
}

@media(min-width:1181px){
    .register-card-inner .card-top{
        min-height:34px;
        margin-bottom:15px;
    }

    .register-card-inner .login-subtitle{font-size:.77rem;}
    .register-card-inner h2{font-size:2.05rem;}
}

@media(max-width:680px){
    .register-grid{
        grid-template-columns:1fr;
        gap:0;
    }
}

/* =========================================
   DÜŞÜK YÜKSEKLİKLİ LAPTOPLAR – REGISTER
========================================= */

@media (min-width:1181px) and (max-height:820px){

    .login-page{
        padding:10px 30px 10px;
    }

    header{
        margin-bottom:0;
    }

    .navbar{
        padding:2px 18px 7px;
    }

    .login-layout{
        height:calc(100vh - 58px);
        gap:26px;
    }

    /* SOL TARAF */

    .visual-side{
        padding-top:4px;
    }

    .eyebrow{
        margin-bottom:10px;
        padding:7px 13px;
        font-size:.70rem;
    }

    .visual-copy h1{
        margin-bottom:8px;
        font-size:2.48rem;
        line-height:1.02;
    }

    .visual-copy p{
        max-width:520px;
        font-size:.76rem;
        line-height:1.48;
    }

    .bubble-universe{
        min-height:360px;
        margin-top:-8px;

        transform:scale(.78);
        transform-origin:top center;
    }

    /* KAYIT KARTI */

    .login-card{
        height:100%;
        padding:14px 34px;
        border-radius:28px;
    }

    .register-card-inner{
        max-width:510px;
    }

    .register-card-inner .card-top{
        min-height:28px;
        margin-bottom:10px;
    }

    .welcome-pill{
        padding:7px 12px;
        font-size:.66rem;
    }

    .register-card-inner h2{
        margin-bottom:4px;
        font-size:1.82rem;
    }

    .register-card-inner .login-subtitle{
        font-size:.70rem;
        line-height:1.4;
    }

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

    .register-form .field-group{
        margin-bottom:9px;
    }

    .register-form .field-group label{
        margin-bottom:4px;
        font-size:.68rem;
    }

    .register-form .input-wrap input,
    .register-form .select-wrap select{
        height:43px;
        font-size:.77rem;
    }

    .register-grid{
        gap:9px;
    }

    .terms-check{
        margin:0 0 10px;
        font-size:.64rem;
        line-height:1.4;
    }

    .register-form .login-submit{
        height:45px;
    }

    .register-form .divider{
        margin:10px 0;
    }

    .register-form .google-button{
        height:43px;
        font-size:.78rem;
    }

    .register-form .register-text{
        margin-top:9px;
        font-size:.72rem;
    }

    .register-card-inner .friendly-note{
        margin-top:8px;
        padding:7px 10px;
        font-size:.62rem;
    }
}

/* İlk durumda elemanlar görünmez */

header,
.visual-side,
.login-card{
    opacity:0;
}

/* Navbar */

header{
    animation:
        authElementEntrance
        .65s
        .05s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

/* Sol taraf */

.visual-side{
    animation:
        authElementEntrance
        .78s
        .14s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

/* Sağ panel */

.login-card{
    animation:
        authElementEntrance
        .82s
        .23s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

@keyframes authElementEntrance{
    0%{
        opacity:0;
        transform:translateY(30px);
        filter:blur(3px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}

/* =========================================
   KAYIT SAYFASI — HESAP TÜRÜ
========================================= */

.role-field{
    margin-bottom:13px;
}

.role-selector{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.role-option{
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border:1px solid #e2ddeb;
    border-radius:13px;

    color:#696a7c;
    background:rgba(255,255,255,.84);

    font-size:.78rem;
    font-weight:800;

    cursor:pointer;
    transition:.25s ease;
}

.role-option svg{
    width:17px;
    height:17px;
    stroke-width:2;
}

.role-option:hover{
    color:#7c3aed;
    border-color:rgba(124,58,237,.35);
    background:#faf7ff;
}

.role-option.active{
    color:#6d28d9;
    border-color:rgba(124,58,237,.55);
    background:rgba(124,58,237,.09);
    box-shadow:0 0 0 3px rgba(124,58,237,.07);
}

#targetExamGroup{
    transition:
        opacity .25s ease,
        transform .25s ease;
}

#targetExamGroup.is-hidden{
    display:none;
}

/* =========================================
   REGISTER — FORM KONUM SABİTLEME
========================================= */

.login-card:has(.register-card-inner){
    align-items:flex-start;
}

.register-card-inner{
    margin-top:10px;
}

/* =========================================
   REGISTER — BALON ALANI SABİTLEME
========================================= */

@media (min-width:1181px){

    .visual-side{
        height:100%;
        overflow:hidden;
    }

    .bubble-universe{
        flex:1;
        min-height:0;
        height:auto;
    }
}
/* =========================================
   REGISTER — KARARLI MASAÜSTÜ YERLEŞİMİ
   Form uzadığında sol görsel alanını itmez.
========================================= */

/* :has() ile eklenen eski geçici düzeltmeyi etkisizleştirir. */
.login-card:has(.register-card-inner){
    align-items:center;
}

.register-card-inner{
    margin-top:0;
}

.register-form{
    min-height:0;
}

.register-details-grid{
    align-items:end;
}

.register-details-grid .field-group{
    min-width:0;
}

/* Öğretmen seçildiğinde tek kalan şehir alanı tüm satırı kaplar. */
.register-details-grid:has(#targetExamGroup.is-hidden){
    grid-template-columns:1fr;
}

@media (min-width:1181px){
    .login-layout{
        min-height:0;
        align-items:stretch;
    }

    .visual-side{
        height:100%;
        min-height:0;
        overflow:visible;
    }

    .visual-copy{
        flex:0 0 auto;
    }

    .bubble-universe{
        flex:1 1 auto;
        width:100%;
        min-height:0;
        margin-top:2px;
        overflow:visible;
        transform-origin:top center;
    }

    .login-card{
        min-height:0;
        overflow:hidden;
    }

    .register-card-inner{
        width:100%;
        max-height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    .register-card-inner .card-top,
    .register-card-inner h2,
    .register-card-inner .login-subtitle,
    .register-card-inner .friendly-note{
        flex:0 0 auto;
    }
}

/* 851–950 px yüksekliğindeki masaüstü ekranlar */
@media (min-width:1181px) and (min-height:851px) and (max-height:950px){
    .login-page{
        padding-top:14px;
        padding-bottom:14px;
    }

    .login-layout{
        height:calc(100vh - 76px);
    }

    .login-card{
        padding:20px 38px;
    }

    .register-card-inner .card-top{
        margin-bottom:12px;
    }

    .register-card-inner h2{
        font-size:1.95rem;
    }

    .register-form{
        margin-top:14px;
    }

    .register-form .field-group{
        margin-bottom:10px;
    }

    .register-form .input-wrap input,
    .register-form .select-wrap select{
        height:45px;
    }

    .role-option{
        height:42px;
    }

    .register-form .login-submit{
        height:47px;
    }

    .register-form .divider{
        margin:11px 0;
    }

    .register-form .google-button{
        height:45px;
    }

    .register-form .register-text,
    .register-card-inner .friendly-note{
        margin-top:9px;
    }
}

/* 768–850 px yüksekliğindeki laptop ekranlar */
@media (min-width:1181px) and (max-height:850px){
    .login-layout{
        height:calc(100vh - 62px);
    }

    .visual-side{
        padding-top:4px;
    }

    .bubble-universe{
        min-height:0;
        margin-top:-4px;
        transform:scale(.80);
    }

    .login-card{
        padding:12px 30px;
    }

    .register-card-inner{
        justify-content:center;
    }

    .register-card-inner .card-top{
        margin-bottom:7px;
    }

    .register-form{
        margin-top:10px;
    }

    .register-form .field-group,
    .role-field{
        margin-bottom:7px;
    }

    .register-grid{
        gap:8px;
    }

    .register-form .input-wrap input,
    .register-form .select-wrap select{
        height:41px;
    }

    .role-option{
        height:40px;
    }

    .terms-check{
        margin-bottom:7px;
    }

    .register-form .login-submit{
        height:43px;
    }

    .register-form .divider{
        margin:8px 0;
    }

    .register-form .google-button{
        height:41px;
    }

    .register-form .register-text{
        margin-top:7px;
    }

    .register-card-inner .friendly-note{
        margin-top:6px;
        padding:6px 10px;
    }
}

@media (max-width:1180px){
    .register-card-inner{
        margin-top:0;
    }

    .login-card:has(.register-card-inner){
        align-items:center;
    }
}

@media (max-width:680px){
    .register-details-grid{
        grid-template-columns:1fr;
    }
}