:root {
    /* Light palette using brand color #3f2747 and its tints */
    --brand: #3f2747; /* primary brand */
    --brand-600: #452a4e;
    --brand-500: #3f2747;
    --brand-400: #6a4e73;
    --brand-300: #9b7ea3;
    --brand-200: #c8b6cf;
    --brand-100: #eadff0;
    --ink: #1f2630; /* primary text on light */
    --ink-weak: #68707c; /* secondary text */
    --surface: #ffffff; /* cards */
    --surface-2: #fafbff; /* page */
    --line: rgba(0,0,0,.08); /* subtle borders */
    --shadow-1: 0 12px 30px rgba(33, 41, 56, .08);
    --shadow-2: 0 8px 24px rgba(33,41,56,.08), 0 0 0 1px rgba(0,0,0,.04) inset;
    --radius-2xl: 18px;
    --radius-xl: 14px;
    --radius-lg: 12px;
    --focus-ring: 0 0 0 3px rgba(157, 130, 168, .30), 0 0 0 1px var(--brand-400) inset;
    --input-h: 46px;
    --speed: .25s;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--ink);
    background: radial-gradient(1100px 600px at 15% 0%, var(--brand-100), transparent 60%), radial-gradient(900px 600px at 85% 10%, rgba(63,39,71,.06), transparent 60%), linear-gradient(180deg, var(--surface-2) 0%, #fff 60%);
    overflow: hidden;
}

.login-wrap {
    position: relative;
    height: 93%;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    padding: 28px;
}

/* ===== Left / Showcase (light) ===== */
.left {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-2xl);
    background: linear-gradient(180deg, rgba(63,39,71,.04), rgba(63,39,71,0)), var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

    .left .brand {
        position: absolute;
        top: 22px;
        left: 60px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--brand-600);
        text-decoration: none;
        user-select: none;
    }

.brand .logo {
    width: 200px
}

    .brand .logo svg {
        width: 22px;
        height: 22px;
        fill: white
    }

.brand .name {
    font-weight: 700;
    letter-spacing: .2px
}

.dotgrid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(63,39,71,.18) 1px, transparent 0);
    background-size: 28px 28px;
    opacity: .18;
    mask-image: linear-gradient(180deg, black, transparent);
}

.hero {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 5%;
}

    .hero h1 {
        font-size: clamp(30px, 3.6vw, 46px);
        margin: 0 0 12px;
        letter-spacing: .3px;
        color: var(--brand-600)
    }

    .hero p {
        margin: 0;
        color: var(--ink-weak);
        max-width: 640px;
        line-height: 1.5
    }

    .hero .badges {
        margin-top: 26px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap
    }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--brand-600);
    box-shadow: 0 6px 14px rgba(0,0,0,.04);
}

/* ===== Right / Card ===== */
.right {
    display: grid;
    place-items: center;
}

.card {
    width: min(440px, 92vw);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2);
    padding: 28px;
    position: relative;
    overflow: hidden;
}

    .card .title {
        font-size: 22px;
        margin: 10px 0 4px;
        color: var(--brand-600)
    }

    .card .sub {
        margin: 0 0 18px;
        color: var(--ink-weak);
        font-size: 13.5px
    }

/* Language selector */
.lang {
    position: absolute;
    right: 16px;
    top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-weak);
}

    .lang select {
        height: 34px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid var(--line);
        color: var(--ink);
        padding: 0 10px;
        outline: none;
    }

        .lang select:focus {
            box-shadow: var(--focus-ring);
        }

/* Inputs */
.field {
    position: relative;
    margin-top: 16px;
}

    .field input {
        width: 100%;
        height: var(--input-h);
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--line);
        color: var(--ink);
        padding: 0 44px 0 14px;
        outline: none;
        transition: border-color var(--speed), box-shadow var(--speed), background var(--speed);
    }

        .field input::placeholder {
            color: transparent;
            user-select: none
        }

    .field label {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 6px;
        color: var(--ink-weak);
        font-size: 13px;
        pointer-events: none;
        transition: all var(--speed);
        background: linear-gradient(180deg, transparent 45%, #fff 46%);
    }

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

        .field input:not(:placeholder-shown) + label,
        .field input:focus + label {
            top: -5px;
            transform: translateY(-50%);
            font-size: 11px;
            color: var(--brand-600);
            opacity: .95;
        }

    .field .icon {
        position: absolute;
        right: 8px;
        top: 45%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        cursor: pointer;
        color: var(--ink-weak);
        transition: background var(--speed), color var(--speed);
        border: none;
    }

        .field .icon:hover {
            background: rgba(63,39,71,.06);
            color: var(--brand-600);
        }

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

    .row .remember {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: var(--ink-weak);
        text-decoration: none;
        margin-left: 5px;
    }

        .row .remember input {
            width: 18px;
            height: 18px;
            accent-color: var(--brand-500);
        }

    .row .forgot {
        color: var(--ink-weak);
        text-decoration: none;
        font-size: 13px;
    }

        .row .forgot:hover {
            color: var(--brand-600)
        }

.btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(63,39,71,.20);
    background: linear-gradient(180deg, var(--brand-400), var(--brand-500));
    color: white;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform .06s ease, box-shadow var(--speed), filter var(--speed);
    box-shadow: 0 10px 30px rgba(63,39,71,.18), inset 0 0 0 1px rgba(255,255,255,.10);
}

    .btn:hover {
        filter: saturate(1.06)
    }

    .btn:active {
        transform: translateY(1px)
    }

.hint {
    display: none;
    margin-top: 8px;
    font-size: 12.5px;
    color: #b3261e
}

    .hint.show {
        display: block
    }

.foot {
    margin-top: 18px;
    color: var(--ink-weak);
    font-size: 12.5px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .foot a {
        color: var(--ink-weak);
        text-decoration: none
    }

        .foot a:hover {
            color: var(--brand-600)
        }

/* ===== Responsive ===== */
@media (max-width: 1050px) {
    .login-wrap {
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 18px
    }

    .left {
        height: 260px
    }

    .hero {
        top: 28%;
    }
}

.field .icon {
    width: auto;
    height: auto;
    padding: 4px;
    background: transparent !important;
    border-radius: 0;
    font-size: 16px;
    color: var(--ink-weak);
}

    .field .icon:hover {
        color: var(--brand-600);
    }



    .row .remember input {
        transform: scale(1.1); /* biraz büyüt */
    }

.btn {
    margin-top: 20px;
}

.lang select {
    border-radius: 6px;
    box-shadow: none;
    border: 1px solid var(--line);
    background: #fafafa;
}

#pane-email {
    padding: 20px;
}

.right {
    align-items: start !important; /* place-items:center etkisini bozar */
    padding-top: min(8vh, 64px); /* kart için sabit üst boşluk */
}

/* 2) Kart yüksekliğini sabitle: küçük metin değişimleri kartı oynatmasın */
.card {
    min-height: 400px; /* ihtiyaca göre 480–560px aralığında tutabilirsin */
}

/* 3) CapsLock/hata ipucunun yerini rezerve et: görünür/gizli olurken layout değişmesin */
.hint {
    min-height: 18px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease;
}

    .hint.show {
        visibility: visible;
        opacity: 1;
    }

/* === 1) Sol panelde kalan sabit yükseklik kısıtını kaldır === */
.left {
    height: auto !important;
    min-height: 100% !important;
    position: relative; /* SVG'yi tabana sabitlemek için gerekli */
    padding-bottom: 0 !important; /* SVG alt boşluksuz otursun */
}

/* === 2) SVG alt kısımda tam genişlik (yanlarda boşluk yok) === */
.hero-art {
    position: absolute !important;
    left: 0;
    right: 0;
    height: auto;
    margin: 0;
    pointer-events: none;
}

/* === 3) Mobilde sayfa kaydırılsın (body'deki overflow:hidden'ı iptal et) === */
body {
    overflow: auto !important;
}



/* === 4) Çok küçük ekranda sol panel tamamen gizlensin === */
@media (max-width: 900px) {
    .login-wrap {
        grid-template-columns: 1fr !important;
    }

    .left {
        display: none !important;
    }

    .right {
        padding-top: 24px !important;
    }
}

/* === 5) Password tıklayınca kartın kıpırdamasını önle === */
.right {
    align-items: start !important;
}
/* yeniden ortalanmayı engelle */
.card {
    min-height: 420px !important;
}
/* ufak içerik değişimlerinde yükseklik sabit kalsın */
.hint {
    min-height: 18px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s;
}

    .hint.show {
        visibility: visible;
        opacity: 1;
    }
/* CapsLock/hata görünürken layout sabit kalsın */
.hero-art {
    position: absolute;
    right: 6%;
    height: auto;
    pointer-events: none;
}
/* illustration position (bottom) */
.hero-art {
    position: static;
    margin-top: auto;
    align-self: flex-end;
    height: auto;
    pointer-events: none;
}

.left .brand, .left .hero, .left .hero-art {
    position: relative;
    z-index: 1;
}

.hero-art .conns {
    opacity: .10;
}

.hero-art .dots {
    opacity: .2;
}
/* --- Premium corner badge (no HTML change) --- */
.left {
    position: relative;
}
    /* güvence */

    .left[data-badge] {
        --b-h: 34px; /* yükseklik */
        --b-pad: 14px; /* yatay padding */
        --b-fg: #3f2747; /* yazı/dot rengi (Client varsayılan) */
        --b-glow: 0 12px 28px rgba(63,39,71,.22);
        --b-fill: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
        --b-border: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.28));
    }

        .left[data-badge]::after {
            content: attr(data-badge);
            position: absolute;
            top: 16px;
            right: 16px;
            height: var(--b-h);
            line-height: var(--b-h);
            padding: 0 calc(var(--b-pad)) 0 calc(var(--b-pad) + 18px); /* solda dot için yer */
            display: inline-block;
            white-space: nowrap;
            font-weight: 800;
            font-size: 12.5px;
            color: var(--b-fg);
            border-radius: 999px;
            border: 1px solid transparent;
            backdrop-filter: blur(8px);
            box-shadow: var(--b-glow);
            /* 1) solda mini dot  2) iç dolgu  3) gradient border */
            background: radial-gradient(circle at 16px 50%, var(--b-fg) 0 3px, transparent 3.5px), var(--b-fill), var(--b-border);
            background-clip: padding-box, padding-box, border-box;
            background-origin: padding-box, padding-box, border-box;
            /* üst parlama (gloss) */
            -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.82) 55%, rgba(0,0,0,.65));
            mask-image: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.82) 55%, rgba(0,0,0,.65));
        }

    /* Studio varyantı: koyu gradient + beyaz yazı, daha güçlü glow */
    .left[data-badge="Studio"] {
        --b-fg: #ffffff;
        --b-fill: linear-gradient(135deg, #6a4e73, #3f2747);
        --b-border: linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.15));
        --b-glow: 0 14px 34px rgba(63,39,71,.35);
    }

        .left[data-badge="Studio"]::after {
            text-shadow: 0 1px 0 rgba(0,0,0,.18);
        }

/* Küçük ekran ayarı (isteğe bağlı) */
@media (max-width: 800px) {
    .left[data-badge]::after {
        top: 12px;
        right: 12px;
    }
}



.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:-webkit-autofill + label,
.field input:autofill + label,
.field.is-filled label {
    top: -2px;
    transform: translateY(-50%);
    color: var(--brand-600);
    opacity: .95;
}

    .field input:-webkit-autofill {
        -webkit-text-fill-color: inherit;
        transition: background-color 9999s ease-out;
    }

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 44px;
    border-radius: 12px;
    padding: 0 16px;
    font-weight: 600;
    gap: 10px;
    transition: opacity .2s ease;
}

    .btn:disabled {
        cursor: not-allowed;
        opacity: .75
    }

/* Spinner her zaman yer kaplasın (layout kaymasın), sadece görünürlüğü değişsin */
.btn__spinner {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    visibility: hidden; /* <-- normalde gizli ama yer tutuyor */
    opacity: 0; /* yumuşak görünüm */
    transition: opacity .12s ease, visibility 0s linear .12s;
}

.btn--loading .btn__spinner {
    visibility: visible;
    opacity: 1;
    transition: opacity .12s ease;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.btn--loading {
    pointer-events: none
}



/* Right panel (card) */
.right {
    display: flex;
    justify-content: center
}

    .right .card {
        width: min(520px, 92vw);
        background: var(--card-bg);
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 12px 36px rgba(28,5,48,.12), inset 0 1px 0 rgba(255,255,255,.55);
        backdrop-filter: blur(8px);
        padding: clamp(18px,3.6vw,28px);
    }

.card .title {
    font-size: 26px;
    margin: 2px 0 6px
}

.card .sub {
    color: var(--muted);
    margin: 0 0 16px
}

/* ====== Fields (floating-ish label) ====== */
.field {
    position: relative;
    margin: 14px 0
}

   

/* Autofill görünümünü nötrle */
.field input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    transition: background-color 9999s ease-out;
}

    .btn:disabled {
        cursor: not-allowed;
        opacity: .8
    }

.btn__spinner {
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s;
}

.btn--loading .btn__spinner {
    visibility: visible;
    opacity: 1
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ====== Social bar (login card içinde, butonun hemen altı) ====== */
.social-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 6px;
    justify-content: flex-start;
}

    .social-bar .btn-round {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        color: #4b5563;
        background: linear-gradient(180deg,#ffffff,#f4f6ff);
        border: 1px solid rgba(124,58,237,.18);
        box-shadow: 0 6px 16px rgba(79,70,229,.12), inset 0 1px 0 rgba(255,255,255,.8);
        transition: transform .06s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
    }

        .social-bar .btn-round:hover {
            transform: translateY(-1px);
            color: #4f46e5;
            box-shadow: 0 10px 22px rgba(79,70,229,.2), inset 0 1px 0 rgba(255,255,255,.85);
        }

        .social-bar .btn-round .icon {
            font-size: 14px;
            line-height: 1
        }

/* ====== Card footer ====== */
.card .foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    color: #6b7280;
}

    .card .foot a {
        color: #6b7280;
        text-decoration: none
    }

        .card .foot a:hover {
            color: #4f46e5
        }

/* ====== Responsive ====== */
@media (max-width: 1100px) {
    .login-wrap {
        grid-template-columns: 1fr;
    }

    .left {
        order: 2
    }

    .right {
        order: 1
    }

    .hero-art {
        display: none
    }
}

.right .card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
    border: 1px solid rgba(124,58,237,.12);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(28,5,48,.1);
    padding: 32px;
    backdrop-filter: blur(8px);
}

@media (max-width: 1000px) {
    .login-wrap {
        grid-template-columns: 1fr;
        padding: 40px 24px;
    }

    .left {
        display: none;
    }
    /* küçük ekranda sadece login kartı */
}
/* Sosyal bar hizası */
.social-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 40px 0 4px;
}

    /* Cam görünümlü, eş boyutlu buton */
    .social-bar .btn-round {
        --ring: rgba(124,58,237,.18);
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg,#ffffff,#f6f7ff);
        border: 1px solid var(--ring);
        box-shadow: 0 10px 24px rgba(79,70,229,.14), inset 0 1px 0 rgba(255,255,255,.85);
        color: #5b5f6b;
        transition: transform .08s ease, box-shadow .18s ease, color .15s ease, border-color .15s ease;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

        .social-bar .btn-round i {
            font-size: 16px;
            line-height: 1;
        }

        /* Hover: hafif yükselme ve marka rengine boyanma */
        .social-bar .btn-round:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(79,70,229,.22), inset 0 1px 0 rgba(255,255,255,.9);
            border-color: rgba(124,58,237,.28);
        }

        /* Fokus: erişilebilir vurgu halkası */
        .social-bar .btn-round:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 4px rgba(124,58,237,.18), 0 12px 28px rgba(79,70,229,.2), inset 0 1px 0 rgba(255,255,255,.9);
        }

        /* Marka bazlı renkler (hover’da ve aktifken) */
        .social-bar .btn-round[data-brand="site"]:hover {
            color: #7a49e6;
        }

        .social-bar .btn-round[data-brand="linkedin"]:hover {
            color: #0a66c2;
        }

        .social-bar .btn-round[data-brand="x"]:hover {
            color: #111;
        }

        .social-bar .btn-round[data-brand="facebook"]:hover {
            color: #1877f2;
        }

        .social-bar .btn-round[data-brand="instagram"]:hover {
            color: #c13584;
        }

        .social-bar .btn-round[data-brand="youtube"]:hover {
            color: #ff0033;
        }

/* İsteğe bağlı: küçük titreşim animasyonu yalnız hover’da */
@keyframes micro-bounce {
    0% {
        transform: translateY(-2px)
    }

    50% {
        transform: translateY(-3px)
    }

    100% {
        transform: translateY(-2px)
    }
}

.social-bar .btn-round:hover {
    animation: micro-bounce .28s ease-out 1;
}

/* --- Card spacing & headings --- */
.right .card {
    max-width: 440px; /* 400-440 arası iyi denge */
    padding: 28px 28px 24px;
}

.card .title {
    margin: 0 0 6px;
    letter-spacing: -.015em
}

.card .sub {
    margin: 0 0 18px
}

/* --- Fields: label hizası & focus yüzüğü --- */
.field {
    margin: 12px 0
}

    .field label {
        top: 8px; /* sabit üst label */
        transform: none;
        font-size: 12px;
        font-weight: 600;
        color: #6b6f7a;
    }

    .field input {
        height: 44px;
        padding: 16px 44px 8px 14px; /* label üstte, metin aşağıda */
        background: linear-gradient(180deg,#fbfbff,#f1f3ff);
        border: 1px solid rgba(124,58,237,.16);
        transition: border-color .15s ease, box-shadow .15s ease;
    }

       /* .field input:focus {
            outline: none;
            border-color: rgba(124,58,237,.45);
            box-shadow: 0 0 0 4px rgba(124,58,237,.14);
        }*/
        /* Autofill tutarlılığı */
        .field input:-webkit-autofill {
            -webkit-text-fill-color: #1f2937;
            transition: background-color 9999s;
        }

    /* Eye button ufak ayar */
    .field .icon {
        right: 8px;
        width: 28px;
        height: 28px;
        border-radius: 8px
    }

/* --- Row: Sign up / Forgot password hizası --- */
.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 2px 8px;
}

    .row a {
        color: #6b7280;
        text-decoration: none
    }

        .row a:hover {
            color: #4f46e5
        }

/* --- Primary button --- */
.btn {
    height: 44px;
    border-radius: 12px;
    font-weight: 700;
 
    color: #fff;
    border: 1px solid rgba(124,58,237,.32);
    box-shadow: 0 10px 20px rgba(79,70,229,.18), inset 0 1px 0 rgba(255,255,255,.28);
    transition: transform .06s, box-shadow .2s, opacity .2s;
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 12px #b59cbd, inset 0 1px 0 rgba(255, 255, 255, .3)
    }

    .btn:disabled {
        opacity: .8;
        cursor: not-allowed
    }

.btn__spinner {
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s
}

.btn--loading .btn__spinner {
    visibility: visible;
    opacity: 1
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* --- Social bar (eş boyut + cam) --- */
.social-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 14px 0 4px;
    position: relative;
}

    .social-bar .btn-round {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg,#ffffff,#f6f7ff);
        border: 1px solid rgba(124,58,237,.18);
        color: #545968;
        box-shadow: 0 8px 20px rgba(79,70,229,.12), inset 0 1px 0 rgba(255,255,255,.85);
        transition: transform .08s, box-shadow .18s, color .15s, border-color .15s;
    }

        .social-bar .btn-round i {
            font-size: 16px;
            line-height: 1
        }

        .social-bar .btn-round:hover {
            transform: translateY(-2px);
            border-color: rgba(124,58,237,.28);
            box-shadow: 0 12px 26px rgba(79,70,229,.2), inset 0 1px 0 rgba(255,255,255,.9);
        }

        .social-bar .btn-round:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 4px rgba(124,58,237,.18), 0 12px 28px rgba(79,70,229,.2);
        }

        /* İsteğe bağlı markalı hover renkleri */
        .social-bar .btn-round[data-brand="linkedin"]:hover {
            color: #0a66c2
        }

        .social-bar .btn-round[data-brand="x"]:hover {
            color: #111
        }

        .social-bar .btn-round[data-brand="facebook"]:hover {
            color: #1877f2
        }

        .social-bar .btn-round[data-brand="instagram"]:hover {
            color: #c13584
        }

        .social-bar .btn-round[data-brand="youtube"]:hover {
            color: #ff0033
        }

/* --- Footer spacing --- */
.card .foot {
    margin-top: 10px
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .login-wrap {
        grid-template-columns: 1fr;
        padding: 40px 24px;
        gap: 28px
    }

    .left {
        display: none
    }
    /* mobilde sadece kart */
    .right .card {
        margin: 0 auto
    }
}

/* kapsayıcı */
.hero-stack {
    position: relative;
    width: 100%;
    height: 520px;
}

    /* 1) Flow'u küçült, sağa kaydır */
    .hero-stack .hero-flow {
        position: absolute;
        inset: auto 0 0 0;
        width: 100%;
        height: 100%;
        transform: scale(.92) translateX(2%);
        opacity: .98;
    }

    /* 2) Kart - sol alta yakın, hafif yüzer */
    .hero-stack .hero-card {
        position: absolute;
        left: 8%;
        bottom: 8%;
        width: 300px;
        height: auto;
        filter: drop-shadow(0 8px 22px rgba(79,70,229,.15));
        animation: floatY 6s ease-in-out infinite;
    }

    /* 3) Grafik - sağ üstte, küçük yüzer */
    .hero-stack .hero-chart {
        position: absolute;
        right: 6%;
        top: 8%;
        width: 280px;
        height: auto;
        filter: drop-shadow(0 10px 26px rgba(79,70,229,.18));
        animation: floatX 7s ease-in-out infinite .4s;
    }

/* micro parallax (isteğe bağlı) */
@keyframes floatY {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

@keyframes floatX {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(6px)
    }
}

/* hareketi kapat: erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
    .hero-stack .hero-card,
    .hero-stack .hero-chart {
        animation: none
    }

    .hero-stack .hero-flow .motion,
    .hero-stack .hero-flow #grad-stroke animate {
        display: none
    }
}


/* —— HERO KATMAN DENGESİ —— */
.hero-stack {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden
}

    /* Flow ana illüstrasyon (daha az baskın) */
    .hero-stack .hero-flow {
        position: absolute;
        inset: 0;
        transform: scale(.92) translateX(2%);
        opacity: .85; /* 0.98 → 0.85 */
        filter: saturate(.9) contrast(.96);
        z-index: 1;
    }

    /* Kart: sol-alt, küçük, yumuşak gölge */
    .hero-stack .hero-card {
        position: absolute;
        left: 7%;
        bottom: 10%;
        width: 280px;
        height: auto;
        filter: drop-shadow(0 6px 18px rgba(79,70,229,.12));
        opacity: .92;
        z-index: 2;
        animation: cardFloat 8s ease-in-out infinite;
    }

    /* Grafik: sağ-üst, biraz daha şeffaf, ince çizgi */
    .hero-stack .hero-chart {
        position: absolute;
        right: 6%;
        top: 10%;
        width: 260px;
        height: auto;
        filter: drop-shadow(0 6px 16px rgba(79,70,229,.10));
        opacity: .80;
        z-index: 2;
        animation: chartFloat 9s ease-in-out infinite .3s;
    }

@keyframes cardFloat {
    50% {
        transform: translateY(-4px)
    }
}

@keyframes chartFloat {
    50% {
        transform: translateX(4px)
    }
}

/* çok yakından geçen katmanların parlamasını kıs */
.hero-stack .hero-card, .hero-stack .hero-chart {
    backdrop-filter: blur(0)
}

/* hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
    .hero-stack .hero-card, .hero-stack .hero-chart {
        animation: none
    }
}

/* Sol panelin genel opaklığını artırıp lekeleri azalt */
.left {
    background: linear-gradient(180deg,#fff,rgba(255,255,255,.94));
}


.hero-stack::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9) 70%, #fff);
    pointer-events: none;
    z-index: 3;
}

/* mini öğe ölçekleri & konumları */
.hero-card {
    left: 7%;
    bottom: 9%;
    width: 280px;
    opacity: .95
}

.hero-chart {
    right: 6%;
    top: 12%;
    width: 250px;
    opacity: .78
}

/* flow biraz geri plana */
.hero-flow {
    opacity: .82;
    filter: saturate(.92) contrast(.96)
}

/* küçük ekran koruması */
@media (max-width: 1280px) {
    .hero-card {
        transform: scale(.9);
        left: 6%;
        bottom: 8%
    }

    .hero-chart {
        transform: scale(.9);
        right: 5%;
        top: 12%
    }
}

@media (max-width: 1100px) {
    .hero-stack {
        height: 420px
    }

    .hero-card, .hero-chart {
        transform: scale(.85)
    }
}

.hero-card {
    filter: drop-shadow(0 6px 16px rgba(79,70,229,.10))
}

.hero-chart {
    filter: drop-shadow(0 6px 14px rgba(79,70,229,.08))
}

.hero-card {
    opacity: .62;
    transition: opacity .2s ease
}

.hero-chart {
    opacity: .64;
    transition: opacity .2s ease
}

    /* imleçle üzerine gelince çok az canlansın (isteğe bağlı) */
    .hero-card:hover,
    .hero-chart:hover {
        opacity: .76
    }

/* tıklanabilir değillerse etkileşimi kapat (alt öğeleri tıklanabilsin diye) */
.hero-card, .hero-chart {
    pointer-events: none;
}

/* koyu temada biraz daha görünür kıl (varsa) */
@media (prefers-color-scheme: dark) {
    .hero-card {
        opacity: .70
    }

    .hero-chart {
        opacity: .72
    }
}

.hero-mini-flow {
    opacity: .62;
    transition: opacity .2s ease;
    pointer-events: none
}

    .hero-mini-flow:hover {
        opacity: .74
    }


.hero-mini-flow--sm {
    opacity: .50;
    pointer-events: none;
    transition: opacity .2s
}

    .hero-mini-flow--sm:hover {
        opacity: .58
    }
/* istersen kaldır */


.hero-mini-flow--sm {
    width: 96%;
    height: 90%;
}

.hero-mini-flow--sm {
    opacity: .45;
    filter: drop-shadow(0 4px 10px rgba(79,70,229,.08));
    pointer-events: none
}

/* =========================
   Xpoda — Auth/Signup Sheet
   ========================= */

/* --- Brand & UI tokens --- */
:root {
    --surface-100: rgba(255,255,255,.96);
    --surface-90: rgba(255,255,255,.90);
    --input-bg-top: #fbfaff;
    --input-bg-bot: #f3f0ff;
    --input-border: rgba(124,58,237,.20);
    --input-border-focus: rgba(124,58,237,.55);
    --input-ring: rgba(124,58,237,.14);
    --input-text: #1f2937;
    --muted: #6b7280;
    --shadow-card: 0 18px 48px rgba(28,5,48,.22);
    --shadow-btn: 0 10px 22px rgba(78,44,134,.18);
}

/* ========== DIALOG / SHEET ========== */
dialog.sheet {
    display: none;
}

    dialog.sheet[open] {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        display: grid;
        place-items: center;
        background: transparent;
        outline: 0;
        z-index: 1000;
        border: none;
    }

        dialog.sheet[open]::backdrop {
            background: rgba(20,12,28,.50);
        }

.sheet__card {
    width: min(560px,92vw);
    background: white;/*linear-gradient(180deg,var(--surface-100),var(--surface-90));*/
    border: 1px solid rgba(124,58,237,.14);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 18px 18px 16px;
    position: relative;
}

.sheet__close {
    position: absolute;
    right: 25px;
    top: 30px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 16px;
    background: rgba(124, 58, 237, .08);
}

    .sheet__close:hover {
        background: rgb(140 118 177 / 60%)
    }

/* ========== HEADER + HORIZONTAL STEPPER ========== */
.sg-header {
    padding: 12px 16px 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f7f5ff;
    border-radius: 10px;
    line-height: 40px;
    color: #583c61;
}

    .sg-header h3 {
        margin: 0;
        font-size: 20px;
        letter-spacing: -.01em
    }

.sg-steps-bar {
    --steps: 6; /* adım sayını burada güncelle */
    display: grid;
    grid-template-columns: repeat(var(--steps),1fr);
    list-style: none;
    gap: 0;
    padding: 20px 14px 20px;
    margin: 0;
}

.sg-steps-bar.forgot {
    --steps: 3; 
}

    .sg-steps-bar .step {
        position: relative;
        text-align: center
    }

        .sg-steps-bar .step::before {
            content: "";
            position: absolute;
            z-index: 1;
            top: 14px;
            left: -50%;
            width: 100%;
            height: 2px;
            background: #e9ebf0;
        }

        .sg-steps-bar .step:first-child::before {
            display: none
        }

    .sg-steps-bar .dot {
        position: relative;
        z-index: 2;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: inline-grid;
        place-items: center;
        background: #fff;
        border: 2px solid #e5e7eb;
        color: #9aa0aa;
        font: 700 13px/1 system-ui;
        box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }

    .sg-steps-bar .label {
        display: block;
        margin-top: 6px;
        font-weight: 700;
        font-size: 12px;
        color: #6b7280;
    }

    .sg-steps-bar .step.is-done .dot {
        background: #f3e8ff;
        border-color: #d9b8fd;
        color: #5e4267;
    }

    .sg-steps-bar .step.is-done::before {
        background: linear-gradient(90deg, #ffffff, #583c61);
    }

    .sg-steps-bar .step.is-active .dot {
        background: #f3e8ff;
        border-color: #d8b4fe;
        color: #7c3aed;
    }

    .sg-steps-bar .step.is-active .label {
        color: #2b2137
    }

/* ========== STEPS (paneller) ========== */
.sg-step {
    display: none
}

    .sg-step.is-active {
        display: block
    }

/* ========== FIELDS (floating label, premium) ========== */
.field {
    position: relative;
    margin: 14px 0
}

    .field input {
        width: 100%;
        height: 52px;
        border-radius: 14px;
        padding: 18px 14px 10px 14px;
        border: 1.5px solid var(--input-border);
        color: var(--input-text);
        background: linear-gradient(180deg,var(--input-bg-top),var(--input-bg-bot));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.03);
        transition: border-color .15s, box-shadow .15s, background .15s;
        font: 600 14px / 1.4 ui-sans-serif, system-ui, Inter, "Segoe UI", Arial;
        color: var(--ink);
    }

        .field input::placeholder {
            color: transparent
        }
    /* floating label hack */

    .field label {
        position: absolute;
        left: 14px;
        top: 8px;
        z-index: 1;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .2px;
        color: var(--muted);
        transform-origin: left;
        padding: 0 6px;
        transition: transform .15s ease, color .15s ease;
    }
        /* label patch (input zeminiyle aynı) */
        .field label::before {
            content: "";
            position: absolute;
            inset: -2px -6px;
            border-radius: 8px;
            z-index: -1;
            background: linear-gradient(180deg,var(--input-bg-top),var(--input-bg-bot));
        }
    /* float-up */
    .field input:focus + label,
    .field input:not(:placeholder-shown) + label {
        transform: translateY(-10px) scale(.92);
        color: var(--brand-600);
    }
    /* focus ring */
   /* .field input:focus {
        outline: 0;
        border-color: var(--input-border-focus);
        box-shadow: 0 0 0 6px var(--input-ring), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.04);
    }*/
    /* invalid */
    .field.is-invalid input {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 6px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.6);
    }

.err {
    color: #b4232a;
    font-size: 12px;
    margin: 6px 2px 0;
    min-height: 16px
}

/* Autofill sarısı kapat */
.field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 4px rgba(124,58,237,.14) inset !important;
    -webkit-text-fill-color: var(--input-text) !important;
 
}

/* ========== GRID / TEXT HELPERS ========== */
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.hint {
    color: #6b7280;
    font-size: 12px;
    margin: 4px 2px 10px
}

.sub {
    color: #4b5563;
    margin: 18px 0 24px
}

.link {
    background: transparent;
    border: 0;
    color: #4f46e5;
    cursor: pointer
}

.small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 2px 10px
}

.muted {
    color: #9aa0aa;
    font-size: 12px
}

/* ========== BUTTONS (purple, no external light) ========== */
.btn {
    --b1: var(--brand-600);
    --b2: var(--brand-400);
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-weight: 800;
    color: #fff;
    /*border: 1px solid color-mix(in srgb, var(--b2) 65%, #000 35%);*/
    background: linear-gradient(180deg,var(--b1),var(--b2));
    box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255,255,255,.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .08s, box-shadow .18s, filter .18s;
}

    .btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.03)
    }

    .btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px rgba(124,58,237,.35), 0 12px 26px rgba(78,44,134,.22)
    }

    .btn[disabled] {
        opacity: .7;
        cursor: not-allowed;
        background: #875d9d;
    }

.btn__spinner {
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .9s linear infinite;
    visibility: hidden;
    opacity: 0;
}

.btn.is-loading .btn__spinner {
    visibility: visible;
    opacity: 1
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.btn--ghost {
    background: #fff;
    color: #111;
    border: 1px solid #d1d5db;
    box-shadow: none;
}

/* ========== OTP ========== */
.otp {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 10px 0 14px
}

.otp__i {
    width: 56px;
    height: 60px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border-radius: 14px;
    border: 2px solid rgba(124,58,237,.18);
    background: linear-gradient(180deg,#fbfbff,#f2f3ff);
    transition: border-color .15s, box-shadow .15s;
}

    .otp__i:focus {
        outline: 0;
        border-color: rgba(124,58,237,.38);
        box-shadow: 0 0 0 5px rgba(124,58,237,.12)
    }

.otp-clock {
    position: relative;
    width: 40px;
    height: 40px
}

.otp-svg {
    width: 40px;
    height: 40px;
    transform: rotate(-90deg)
}

.otp-bg {
    fill: none;
    stroke: rgba(63,39,71,.08);
    stroke-width: 4
}

.otp-fg {
    fill: none;
    stroke: var(--brand-400);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .25s linear
}

#otpTimerText, #fpOtpTimer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: #6b7280
}

/* ========== PILLS ========== */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 10px
}

.pill {
    padding: 10px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(17,24,39,.12);
    background: #f7f7fb;
    font-weight: 600;
    cursor: pointer;
}

    .pill.is-selected {
        background: linear-gradient(180deg,var(--brand-400),var(--brand-600));
        color: #fff;
        border-color: transparent;
        box-shadow: 0 6px 16px rgba(79,70,229,.20);
    }

.pills.single .pill.is-selected { /* tek seçim — isteğe bağlı aynı görünüm */
}

/* Onboarding nav */
.ob-nav {
    display: flex;
    gap: 10px;
    margin-top: 12px
}

/* ========== Responsive ========== */
@media (max-width:560px) {
    .grid2 {
        grid-template-columns: 1fr
    }
}


.sg-hero {
    text-align: center;
    margin-bottom: 30px;
}

.sg-hero__badge {
    display: inline-block;
    padding: 4px 10px;
    font: 700 12px/1 Arial;
    color: #4C1D95;
    background: linear-gradient(180deg,#F5F3FF,#EDE9FE);
    border: 1px solid #DDD6FE;
    border-radius: 999px;
    margin-bottom: 10px;
}

.sg-hero__title {
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 4px;
}

.sg-hero__sub {
    color: #583c61;
    margin: 0 0 10px;
}

.sg-benefits {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 0;
    margin: 10px 0 0;
}

    .sg-benefits li {
        list-style: none;
        font-size: 12.5px;
        color: #374151;
        /*background: #F9FAFB;*/
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .sg-benefits .ico {
        font-size: 14px;
    }

.field .hint {
    display: block;
    margin-top: 6px;
    color: #6B7280;
    font-size: 12px;
    visibility: visible;
    opacity: 1;
}

.sg-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 14px;
}

    .sg-trust .row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        color: #583c61;
    }

    .sg-trust .lock {
        font-size: 16px;
    }

    .sg-trust .logos {
        display: flex;
        gap: 6px;
        opacity: .6;
    }

    .sg-trust .dot {
        width: 24px;
        height: 12px;
        border-radius: 6px;
        background: #EEE;
    }

.btn--xl {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    /*background: linear-gradient(180deg,#6D4AA0,#4A2E6C);*/
    box-shadow: 0 8px 18px rgba(76,29,149,.25);
}

    .btn--xl:disabled {
        filter: grayscale(0.3) brightness(0.9);
        opacity: .7;
        cursor: not-allowed;
        background: #875d9d;
    }

    .btn--xl:is(:hover,:focus) {
        filter: brightness(1.05);
    }

.rules {
    margin-top: 8px;
}

    .rules > span {
        display: inline-flex;
        align-items: center;
        margin: 4px 6px 6px 0;
        padding: 6px 10px;
        font-size: 12.5px;
        color: #6B7280;
        background: #F3F4F6;
        border: 1px solid #E5E7EB;
        border-radius: 999px;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }

        .rules > span.ok {
            background: #ECFDF5;
            color: #065F46;
            border-color: #A7F3D0; /* soft green */
        }

/* base */
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1;
    border: 1px solid transparent;
    color: #6B7280;
   
}

    .check.is-hidden {
        display: none;
    }

    /* OK */
    .check.is-ok {
        color: #065F46;
        background: #ECFDF5;
        border-color: #A7F3D0;
    }

        .check.is-ok::before {
            content: "✓";
            display: inline-grid;
            place-items: center;
            width: 16px;
            height: 16px;
            border-radius: 999px;
            font-weight: 700;
            background: #D1FAE5;
            color: #059669;
        }

    /* ERROR */
    .check.is-err {
        color: #991B1B;
        background: #FEF2F2;
        border-color: #FECACA;
    }

        .check.is-err::before {
            content: "!";
            display: inline-grid;
            place-items: center;
            width: 16px;
            height: 16px;
            border-radius: 999px;
            font-weight: 700;
            background: #FEE2E2;
            color: #DC2626;
        }

    /* BUSY (spinner) */
    .check.is-busy {
        color: #374151;
        background: #F9FAFB;
        border-color: #E5E7EB;
    }

        .check.is-busy::before {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid #9CA3AF;
            border-top-color: transparent;
            display: inline-block;
            animation: spin .8s linear infinite;
        }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

:root {
    --ink: #1e2130;
    --muted: #7b8298;
    --ok: #22c55e;
    --err: #ef4444;
    --surface: #fff;
    --surface-2: #f5f6fb;
    --bd: rgba(30,33,48,.12);
    --bd-strong: rgba(30,33,48,.18);
    --accent: #7c3aed;
    --ring: rgba(124,58,237,.28);
    --shadow: 0 10px 26px rgba(16,10,30,.10);
}

.field.ws-inline {
    display: grid;
    gap: 8px;
}

   

.inline-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg,var(--input-bg-top),var(--input-bg-bot));
    border: 1px solid var(--bd);
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: box-shadow .2s, border-color .2s, background .2s;
}

    .inline-wrap:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 4px var(--ring), var(--shadow);
    }

    .inline-wrap input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        padding: 12px 14px;
    }

        .inline-wrap input::placeholder {
            color: var(--muted);
            opacity: .65;
        }



/* yardımcı durum renkleri */
.check {
    min-height: 18px;
    font: 12px/1.4 ui-sans-serif,system-ui,Inter;
    color: var(--muted);
    /*margin-top: -13px;*/
}

    .check.is-ok {
        color: var(--ok);
    }

    .check.is-err {
        color: var(--err);
    }


/* normal hali */
.inline-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--bd); /* ince, sakin sınır */
    border-radius: 12px;
    box-shadow: none; /* gölge yok */
}

    /* input fokustayken SADECE kapsayıcıya border uygula */
    .inline-wrap:focus-within {
        border-color: rgba(124,58,237,.45);
        box-shadow: 0 0 0 4px rgba(124,58,237,.14);
    }


    /* input’un kendi outline/border’ı görünmesin */
    .inline-wrap input {
        border: 0;
        outline: 0;
      
        padding-right: 190px;
    }

    /* floating label rengi sabit kalsın */
    .inline-wrap label {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        background: linear-gradient(180deg, var(--surface), var(--surface-2));
        padding: 0 6px;
        border-radius: 8px;
        pointer-events: none;
        transition: transform .18s ease, top .18s ease;
    }

 

/* sağdaki domain çipi (değişmeden kalsın) */
.inline-suffix {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: auto;
    padding: 8px 12px;
    color: #4a5066;
    border-radius: 8px;
    pointer-events: none;
    user-select: none;
}

#sgWs {
    border-right: 1px solid #72727252;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}



sg-modal {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0;
    background: transparent; /* siyah çerçeve etkisini keser */
    max-width: 100vw;
}



/* Card artık scroll OLMAZ */
.sg-modal .card {
    width: min(640px,90vw);
    background: linear-gradient(180deg,#fff,#f8f7fb);
    border: 1px solid rgba(124,58,237,.16);
    border-radius: 5px;
    box-shadow: 0 20px 60px rgba(16,10,30,.20);
    padding: 0; /* içerik padding’i scrollwrap’ta */

}

/* Scroll sadece bu div’de */
.sg-modal .scrollwrap {
    max-height: 65vh;
    overflow: auto;
    padding: 10px 12px 8px;
}

/* Modern scrollbar (yalnızca scrollwrap için uygulanır) */
.sg-modal .scrollwrap {
    scrollbar-gutter: stable; /* içerik jitter yok */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #7e99da #f2f1f8; /* thumb / track */
}

    .sg-modal .scrollwrap::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .sg-modal .scrollwrap::-webkit-scrollbar-track {
        background: #f2f1f8;
        border-radius: 999px;
    }

    .sg-modal .scrollwrap::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg,#bca7ff,#9cd7c8);
        border-radius: 999px;
        border: 2px solid #f2f1f8; /* inset görünüm */
    }

        .sg-modal .scrollwrap::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg,#a88dfc,#86cbbd);
        }

/* Sticky başlık ve progress: scrollwrap içinde sticky çalışır */
.sg-modal header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: linear-gradient(180deg,#fff,#f8f7fb);
    border-bottom: 1px solid #efedf8;
}

    .sg-modal header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
    }

    .sg-modal header .x {
        background: transparent;
        border: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: .6;
    }

.progress {
    position: sticky;
    top: 46px;
    z-index: 1;
    padding: 8px 8px 4px;
    background: linear-gradient(180deg, #fff, #f8f7fb);
    flex: 1;
}

    .progress .bar {
        height: 6px;
        background: #eceaf6;
        border-radius: 999px;
        overflow: hidden;
    }

        .progress .bar span {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg,#8b5cf6,#6ee7b7);
            transition: width .4s ease;
        }

    .progress .status {
        margin: 0 2px 6px;
        font-size: 11px;
        color: #635f7a;
    }

/* Steps ve error (kompakt) */
.steps {
    list-style: none;
    margin: 8px 0 6px;
    padding: 0;
    display: grid;
    gap: 6px;
}

    .steps li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 8px 10px;
        border: 1px solid #eceaf6;
        border-radius: 10px;
        background: #fff;
    }

        .steps li .icon {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            font-size: 11px;
            color: #6b7280;
            background: #f1f5f9;
            border: 1px solid #e5e7eb;
        }

        .steps li.ok .icon {
            background: #ecfdf5;
            border-color: #a7f3d0;
            color: #059669;
        }

        .steps li.err .icon {
            background: #fef2f2;
            border-color: #fecaca;
            color: #dc2626;
        }

        .steps li .meta b {
            font-weight: 600;
            color: #1f2937;
            font-size: 13px;
        }

        .steps li .meta .note {
            font-size: 11px;
            color: #6b7280;
            white-space: pre-wrap;
            display: none;
        }

.error {
    margin: 10px 0 6px;
    border: 1px solid #fca5a5;
    background: #fff1f2;
    border-radius: 10px;
    padding: 8px;
}

    .error.hidden {
        display: none;
    }

.error-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.error .copy {
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid #d4d4d8;
    background: #fff;
    cursor: pointer;
}

.error-body {
    max-height: 220px;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #991b1b;
}

/* Footer */
.sg-modal footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}


/* Spinner'lı buton (mevcut) */
button.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

    button.is-loading::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        border-radius: 50%;
        border: 2px solid #c7b8f7;
        border-top-color: #6d28d9;
        animation: spin .8s linear infinite;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Kapalıyken görünmesin; UA border/outline kapalı */
dialog.sg-modal {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    background: transparent !important;
    padding: 0;
    margin: 0;
}

    /* SADECE AÇIKKEN: tam ekran katman + ortalama */
    dialog.sg-modal[open] {
        position: fixed; /* <-- kritik */
        inset: 0; /* top/right/bottom/left: 0 */
        display: grid;
        place-items: center; /* içindeki kartı ortala */
        max-width: none;
        max-height: none;
    }


    /* Kart ve scrollwrap aynı kalsın */
    dialog.sg-modal .card {
        width: min(640px, 90vw);
        border: 1px solid rgba(124,58,237,.16);
        border-radius: 14px;
        background: linear-gradient(180deg,#fff,#f8f7fb);
        box-shadow: 0 20px 60px rgba(16,10,30,.20);
        padding: 0;
    }

    dialog.sg-modal .scrollwrap {
        max-height: 78vh;
        overflow: auto;
        padding: 10px 12px 8px;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: #c7b8f7 #f2f1f8;
    }

        dialog.sg-modal .scrollwrap::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        dialog.sg-modal .scrollwrap::-webkit-scrollbar-track {
            background: #f2f1f8;
            border-radius: 999px;
        }

        dialog.sg-modal .scrollwrap::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg,#bca7ff,#9cd7c8);
            border-radius: 999px;
            border: 2px solid #f2f1f8;
        }
    dialog.sg-modal[open] {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }


/* Benefit list */
.sg-benefits {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    padding: 0;
    margin: 12px 0 6px;
    list-style: none;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eceaf6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16,10,30,.04);
}

    .benefit .ico {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 999px;
        color: #6d28d9;
        background: linear-gradient(180deg,#f3e8ff,#eef2ff);
        border: 1px solid #e9e6f5;
        box-shadow: inset 0 1px 0 #fff;
    }

        .benefit .ico svg {
            width: 18px;
            height: 18px;
            display: block;
        }

    .benefit .txt {
        color: #3b3660;
        font-size: 14px;
    }

        .benefit .txt b {
            font-weight: 700;
            color: #1f1830;
        }

/* küçük ekranlarda 1 sütun */
@media (max-width:560px) {
    .sg-benefits {
        grid-template-columns: 1fr;
    }
}

.benefit.is-emoji .ico {
    background: #fff;
    border: 1px solid #eceaf6;
}

.benefit.is-emoji .ico {
    font-size: 16px;
    line-height: 1;
}

/* =====================================================================
   Studio girişi: tasarım tuvali
   Client girişi koyu "uygulama kapısı"; Studio girişi tasarımcıdan bir kesit:
   cetveller, nokta ızgaralı tuval, seçili başlık (tasarımcının seçim mavisi,
   etiket, özellik rozeti) ve paletten tuvale sürüklenen bileşen.
   Form, Client girişiyle aynı (düz, beyaz zemin, yüzen etiketli alanlar).
   ===================================================================== */
body.page-account {
    --sc-canvas: #f7f5f9;
    --sc-sel: #3B82F6;              /* tasarımcı seçim rengi (xpoda-flex.css) */
    --sc-ruler-bg: #ffffff;
    --sc-line: #ebe8ec;
    --sc-tick: #d4cfd5;
    --sc-tick-strong: #a9a2ab;
    --sc-chrome: #0f172a;           /* Studio koyu panel/modal zemini */
    --login-ink: #231f24;
    --login-ink-weak: #6f6a70;
    --login-field-border: #d4cfd5;
    --login-field-border-hover: #bbb5bc;
    --login-primary: #70437f;
    --login-primary-hover: #5d356a;
    --login-ring: 0 0 0 3px color-mix(in srgb, #70437f 16%, transparent);
    font-family: Helvetica, Arial, sans-serif;
    background: #ffffff;
}

body.page-account .login-wrap {
    grid-template-columns: minmax(460px, 54%) 1fr;
    gap: 0;
    padding: 0;
    height: auto;
    min-height: 100vh;
}

/* ---- Sol: tuval ---- */
body.page-account .login-wrap > .left,
body.page-account .login-wrap > .right {
    box-sizing: border-box; /* min-height: 100vh iç boşluğa eklenmesin */
}

body.page-account .login-wrap > .left {
    display: flex !important;
    flex-direction: column;
    gap: 44px;
    order: 0;
    min-height: 100vh !important;
    padding: 72px clamp(32px, 4.5vw, 64px) 0 clamp(56px, 6vw, 88px) !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--sc-canvas);
    border-right: 1px solid var(--sc-line);
}

    body.page-account .left .dotgrid {
        inset: 24px 0 0 24px;
        background-image: radial-gradient(circle at 1px 1px, rgba(63,39,71,.30) 1px, transparent 0);
        background-size: 20px 20px;
        opacity: .55;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Cetveller: 10px'te kısa, 100px'te uzun çentik */
    body.page-account .left .sc-ruler,
    body.page-account .left .sc-ruler-corner {
        position: absolute;
        z-index: 3;
        background-color: var(--sc-ruler-bg);
    }

    body.page-account .left .sc-ruler--x {
        top: 0;
        left: 24px;
        right: 0;
        height: 24px;
        border-bottom: 1px solid var(--sc-line);
        background-image: linear-gradient(90deg, var(--sc-tick-strong) 1px, transparent 1px), linear-gradient(90deg, var(--sc-tick) 1px, transparent 1px);
        background-size: 100px 12px, 10px 6px;
        background-position: 64px 100%, 64px 100%;
        background-repeat: repeat-x;
    }

    body.page-account .left .sc-ruler--y {
        top: 24px;
        left: 0;
        bottom: 0;
        width: 24px;
        border-right: 1px solid var(--sc-line);
        background-image: linear-gradient(180deg, var(--sc-tick-strong) 1px, transparent 1px), linear-gradient(180deg, var(--sc-tick) 1px, transparent 1px);
        background-size: 12px 100px, 6px 10px;
        background-position: 100% 48px, 100% 48px;
        background-repeat: repeat-y;
    }

    body.page-account .left .sc-ruler-corner {
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        border-right: 1px solid var(--sc-line);
        border-bottom: 1px solid var(--sc-line);
    }

    body.page-account .left .brand,
    body.page-account .left .hero {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin: 0;
        z-index: 1;
    }

    body.page-account .left .brand .logo {
        width: 168px;
    }

    body.page-account .left .hero h1 {
        position: relative;
        display: inline-block;
        margin: 22px 0 18px;
        font-size: clamp(34px, 3.4vw, 46px);
        font-weight: 700;
        letter-spacing: -.015em;
        color: var(--login-ink);
    }

        /* Seçim çerçevesi: kesik çizgi + dört köşede tutamaç */
        body.page-account .left .hero h1::before {
            content: "";
            position: absolute;
            inset: -6px -10px -4px;
            border: 1px dashed color-mix(in srgb, var(--sc-sel) 70%, transparent);
            border-radius: 2px;
            pointer-events: none;
            background:
                linear-gradient(to right, var(--sc-sel) 10px, transparent 0) top left no-repeat,
                linear-gradient(to bottom, var(--sc-sel) 10px, transparent 0) top left no-repeat,
                linear-gradient(to left, var(--sc-sel) 10px, transparent 0) top right no-repeat,
                linear-gradient(to bottom, var(--sc-sel) 10px, transparent 0) top right no-repeat,
                linear-gradient(to right, var(--sc-sel) 10px, transparent 0) bottom left no-repeat,
                linear-gradient(to top, var(--sc-sel) 10px, transparent 0) bottom left no-repeat,
                linear-gradient(to left, var(--sc-sel) 10px, transparent 0) bottom right no-repeat,
                linear-gradient(to top, var(--sc-sel) 10px, transparent 0) bottom right no-repeat;
            background-size: 10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 2px 10px, 10px 2px, 2px 10px;
        }

        /* Seçili bileşenin etiketi */
        body.page-account .left .hero h1::after {
            content: "Heading";
            position: absolute;
            left: -10px;
            bottom: calc(100% + 6px);
            height: 20px;
            padding: 0 7px;
            border-radius: 4px 4px 4px 0;
            background: var(--sc-sel);
            color: #fff;
            font: 600 11px/20px Helvetica, Arial, sans-serif;
            letter-spacing: .02em;
        }

        /* Özellik rozeti (Studio'nun koyu paneli gibi) */
        body.page-account .left .sc-props {
            position: absolute;
            right: -10px;
            bottom: calc(100% + 6px);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 20px;
            padding: 0 8px;
            border-radius: 4px;
            background: var(--sc-chrome);
            color: #e5e7eb;
            font: 600 11px/20px Helvetica, Arial, sans-serif;
            letter-spacing: .02em;
            white-space: nowrap;
        }

        body.page-account .left .sc-props__sw {
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background: var(--login-ink);
            box-shadow: 0 0 0 1px rgba(255,255,255,.45);
        }

    body.page-account .left .hero p {
        max-width: 540px;
        color: var(--login-ink-weak);
        font-size: 16px;
        line-height: 1.6;
    }

    body.page-account .left .hero .badges {
        margin-top: 22px;
        gap: 8px;
    }

    body.page-account .left .pill {
        padding: 7px 12px;
        background: #fff;
        border: 1px solid var(--sc-line);
        color: #39353b;
        font-size: 13px;
        box-shadow: none;
    }

    /* Rozet (Studio): cetvelin altında */
    body.page-account .left[data-badge]::after {
        top: 44px;
        right: 24px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        font-weight: 600;
        box-shadow: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Bileşen paleti */
    body.page-account .left .sc-dock {
        position: absolute;
        z-index: 2;
        left: calc(24px + (100% - 24px) / 2);
        bottom: 40px;
        transform: translateX(-50%);
        display: flex;
        gap: 4px;
        padding: 6px;
        background: #fff;
        border: 1px solid var(--sc-line);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(35,31,36,.08);
    }

    body.page-account .left .sc-tool {
        width: 56px;
        height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 10px;
        color: #8f8a91;
        font: 500 11px/1 Helvetica, Arial, sans-serif;
    }

        body.page-account .left .sc-tool i {
            font-size: 16px;
            color: #6f6a70;
        }

        body.page-account .left .sc-tool.is-active {
            background: color-mix(in srgb, var(--sc-sel) 10%, #fff);
            color: var(--sc-sel);
        }

            body.page-account .left .sc-tool.is-active i {
                color: var(--sc-sel);
            }

    /* Bırakma alanı ve sürüklenen bileşen */
    body.page-account .left .sc-drop {
        position: absolute;
        z-index: 1;
        left: calc(24px + (100% - 24px) / 2 - 180px);
        bottom: 150px;
        width: 360px;
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1.5px dashed color-mix(in srgb, var(--sc-sel) 55%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--sc-sel) 4%, transparent);
        color: var(--sc-sel);
        font: 600 12px/1 Helvetica, Arial, sans-serif;
        animation: sc-drop 5s ease-in-out infinite;
    }

    body.page-account .left .sc-drag {
        position: absolute;
        z-index: 4;
        left: calc(24px + (100% - 24px) / 2 + 60px - 24px);
        bottom: 50px;
        width: 48px;
        height: 48px;
        animation: sc-drag 5s ease-in-out infinite;
    }

    body.page-account .left .sc-drag__tile {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: #fff;
        border: 1px solid var(--sc-sel);
        color: var(--sc-sel);
        font-size: 18px;
        box-shadow: 0 12px 24px color-mix(in srgb, var(--sc-sel) 25%, transparent);
        transform: rotate(-6deg);
    }

    body.page-account .left .sc-cursor {
        position: absolute;
        left: 34px;
        top: 30px;
        display: flex;
    }

        body.page-account .left .sc-cursor svg {
            width: 18px;
            height: 18px;
            fill: var(--login-ink);
            stroke: #fff;
            stroke-width: 1.2;
        }

/* Sürükle: paletteki Chart'tan bırakma alanının ortasına, bırak, başa dön */
@keyframes sc-drag {
    0%, 8% { transform: translate(0, 0); opacity: 0; }
    14% { transform: translate(0, -6px); opacity: 1; }
    62% { transform: translate(-60px, -131px); opacity: 1; }
    80% { transform: translate(-60px, -131px); opacity: 1; }
    92%, 100% { transform: translate(-60px, -131px); opacity: 0; }
}

@keyframes sc-drop {
    0%, 50% { background: color-mix(in srgb, var(--sc-sel) 4%, transparent); border-style: dashed; color: var(--sc-sel); }
    58%, 86% { background: color-mix(in srgb, var(--sc-sel) 10%, transparent); border-style: solid; color: transparent; }
    100% { background: color-mix(in srgb, var(--sc-sel) 4%, transparent); border-style: dashed; color: var(--sc-sel); }
}


@media (prefers-reduced-motion: reduce) {
    body.page-account .left .sc-drag,
    body.page-account .left .sc-drop {
        animation: none;
    }

    body.page-account .left .sc-drag {
        transform: translate(-60px, -100px);
    }
}

/* Yer yetmeyen ekranda sürükleme sahnesi gizli; palet kalır */
@media (max-width: 1100px), (max-height: 680px) {
    body.page-account .left .sc-drop,
    body.page-account .left .sc-drag {
        display: none;
    }
}

/* ---- Sağ: Client girişiyle aynı düz form ---- */
body.page-account .login-wrap > .right {
    order: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start !important;
    padding: max(56px, calc(50vh - 191px)) 48px 48px !important; /* form içeriği (~382px) dikeyde ortada */
    background: #fff;
}

    body.page-account .right .card {
        width: min(400px, 100%);
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        overflow: visible;
    }

        body.page-account .right .card .title {
            margin: 0 0 6px;
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -.01em;
            color: var(--login-ink);
        }

        body.page-account .right .card .sub {
            margin: 0 0 24px;
            font-size: 14px;
            color: var(--login-ink-weak);
        }

body.page-account #login-form #pane-email {
    padding: 0;
}

body.page-account #login-form .field {
    position: relative;
    margin: 16px 0 0;
}

    body.page-account #login-form .field input {
        width: 100%;
        height: 46px;
        padding: 0 44px 0 14px;
        border: 1px solid var(--login-field-border);
        border-radius: 8px;
        background: #fff;
        color: var(--login-ink);
        font: 400 14px Helvetica, Arial, sans-serif;
        box-shadow: none;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        body.page-account #login-form .field input::placeholder {
            color: transparent;
        }

        body.page-account #login-form .field input:hover {
            border-color: var(--login-field-border-hover);
        }

        body.page-account #login-form .field input:focus {
            border-color: var(--login-primary);
            box-shadow: var(--login-ring);
        }

        body.page-account #login-form .field input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 40px #fff inset !important;
            -webkit-text-fill-color: var(--login-ink) !important;
        }

    /* Etiket: metni alan metniyle aynı x'te (1px çerçeve + 14px iç boşluk = 15px);
       yukarı çıkınca zemini tam beyaz, çerçeve ve odak halkası arkasında temiz kesilir */
    body.page-account #login-form .field label {
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 4px;
        background: #fff;
        color: var(--login-ink-weak);
        font: 400 14px/1 Helvetica, Arial, sans-serif;
        pointer-events: none;
        transition: top .15s ease, font-size .15s ease, color .15s ease;
    }

    body.page-account #login-form .field label::before {
        display: none; /* Studio'nun etiket arkası lavanta hapı */
    }

    body.page-account #login-form .field input:focus + label,
    body.page-account #login-form .field input:not(:placeholder-shown) + label,
    body.page-account #login-form .field input:-webkit-autofill + label,
    body.page-account #login-form .field.is-filled label {
        top: .5px; /* 1px çerçevenin ortası */
        font-size: 12px;
        color: var(--login-ink-weak);
    }

    body.page-account #login-form .field input:focus + label {
        color: var(--login-primary);
    }

    body.page-account #login-form .field .icon {
        right: 8px;
    }

body.page-account #login-form .row {
    justify-content: flex-end;
    margin-top: 12px;
}

    body.page-account #login-form .row .forgot {
        color: var(--login-ink-weak);
        font-size: 13px;
        text-decoration: none;
    }

        body.page-account #login-form .row .forgot:hover {
            color: var(--login-primary);
            text-decoration: underline;
        }

body.page-account #login-form #submitBtn {
    width: 100%;
    height: 46px;
    margin-top: 20px;
    border: 0;
    border-radius: 8px;
    background: var(--login-primary);
    color: #fff;
    font: 600 15px Helvetica, Arial, sans-serif;
    box-shadow: none;
    transform: none;
    filter: none;
}

    body.page-account #login-form #submitBtn:hover {
        background: var(--login-primary-hover);
    }

    body.page-account #login-form #submitBtn:focus-visible {
        outline: 0;
        box-shadow: var(--login-ring);
    }

body.page-account #login-form .social-bar {
    margin-top: 24px;
    gap: 8px;
}

    body.page-account #login-form .social-bar .btn-round {
        width: 32px;
        height: 32px;
        background: #fff;
        border: 1px solid var(--sc-line);
        box-shadow: none;
        color: var(--login-ink-weak);
    }

body.page-account #login-form .foot {
    margin-top: 18px;
    color: var(--login-ink-weak);
    font-size: 12.5px;
}

/* ---- Dar ekran: tuval üstte ince şerit (cetvel + logo) ---- */
@media (max-width: 900px) {
    body.page-account .login-wrap {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr;
    }

    body.page-account .login-wrap > .left {
        order: 0;
        min-height: 0 !important;
        height: auto !important;
        gap: 0;
        padding: 40px 20px 16px !important;
        border-right: 0;
        border-bottom: 1px solid var(--sc-line);
    }

        body.page-account .left .brand .logo {
            width: 120px;
        }

        body.page-account .left .hero,
        body.page-account .left .sc-dock,
        body.page-account .left .sc-drop,
        body.page-account .left .sc-drag,
        body.page-account .left .sc-ruler--y,
        body.page-account .left .sc-ruler-corner {
            display: none;
        }

        body.page-account .left .sc-ruler--x {
            left: 0;
        }

        body.page-account .left .dotgrid {
            inset: 24px 0 0 0;
        }

        body.page-account .left[data-badge]::after {
            top: calc(50% + 12px);
            right: 20px;
            transform: translateY(-50%);
        }

    /* Form, şeridin altında kalan alanın ortasının biraz üstünde (alt boşluk fazla): bandın dibine yapışıp
       ekranın yarısı boş kalıyordu. Kısa ekranda en az 24px üst boşluk. */
    body.page-account .login-wrap > .right {
        order: 1;
        align-items: center !important;
        padding: 24px 20px calc(32px + 10vh) !important;
    }
}