:root {
    --bg: #0b1020;
    --bg2: #0b1226;
    --card: rgba(255,255,255,.06);
    --card2: rgba(255,255,255,.08);
    --text: #eaf0ff;
    --muted: #a7b3d6;
    --border: rgba(255,255,255,.12);
    --input: rgba(255,255,255,.06);
    --primary: #4f7cff;
    --primary2: #2d5bff;
    --danger: #ff4d6d;
    --shadow: 0 18px 60px rgba(0,0,0,.45);
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--text);
    background: radial-gradient(900px 600px at 10% 10%, rgba(79,124,255,.22), transparent 55%), radial-gradient(900px 600px at 90% 20%, rgba(45,91,255,.18), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2));
    min-height: 100svh;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrap {
    width: min(520px, 100%);
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    box-shadow: var(--shadow);
    font-weight: 800;
    letter-spacing: .5px;
}

.brand-title {
    font-weight: 850;
    font-size: 18px;
}

.brand-sub {
    color: var(--muted);
    font-size: 13px;
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.tab {
    flex: 1;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font-weight: 800;
}

    .tab.active {
        border-color: rgba(79,124,255,.65);
        background: linear-gradient(135deg, var(--primary), var(--primary2));
        box-shadow: 0 16px 40px rgba(79,124,255,.22);
    }

.card {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--card2), var(--card));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

h3, h4 {
    margin: 0 0 12px 0;
}

.desc {
    margin: -6px 0 14px;
    color: var(--muted);
    font-size: 13px;
}

.row {
    margin-bottom: 10px;
}

label {
    font-size: 13px;
    color: var(--muted);
    display: block;
    margin-bottom: 6px;
}

input {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--input);
    color: var(--text);
}

.input-wrap {
    position: relative;
}

.icon-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--text);
    cursor: pointer;
    font-size: 16px;
}

button {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    border-color: rgba(79,124,255,.65);
}

.btn-secondary {
    background: #111827;
}

.btn-ghost {
    background: rgba(255,255,255,.06);
}

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

.check {
    display: flex;
    gap: 10px;
    color: var(--muted);
}

    .check input {
        width: 16px;
        height: 16px;
    }

.msg {
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    font-size: 13px;
}

    .msg.ok {
        background: rgba(22,163,74,.15);
    }

    .msg.err {
        background: rgba(255,77,109,.15);
    }

.hidden {
    display: none;
}

.panel {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
    will-change: opacity, transform;
}

    .panel.is-active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Görünmez ama animasyon için DOM'da kalsın */
    .panel.is-hidden {
        display: none;
    }

/* İstersen mobilde biraz daha belirgin */
@media (max-width: 840px) {
    .panel {
        transform: translateX(16px);
        transition: opacity .24s ease, transform .24s ease;
    }

        .panel.is-active {
            transform: translateX(0);
        }
}

.gif-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

    .gif-wrapper img {
        max-width: 140px; /* isterse 100 / 120 yap */
        width: 100%;
        height: auto;
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(79,124,255,.35);
    }
.tabs-modern {
    display: flex;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 16px;
}

.tab-modern {
    flex: 1;
    height: 44px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.55);
    font-weight: 800;
    letter-spacing: .8px;
    cursor: pointer;
    position: relative;
    transition: color .2s ease;
}

    .tab-modern:hover {
        color: rgba(255,255,255,.85);
    }

    .tab-modern.active {
        color: #fff;
    }

        .tab-modern.active::after {
            content: "";
            position: absolute;
            left: 12%;
            right: 12%;
            bottom: 6px;
            height: 3px;
            background: linear-gradient(90deg, #4f7cff, #2d5bff);
            border-radius: 4px;
            box-shadow: 0 0 14px rgba(79,124,255,.85);
        }
.btn-login {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(79,124,255,.55);
    background: rgba(79,124,255,.08); /* transparan */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}

    /* Hover glow */
    .btn-login:hover {
        background: rgba(79,124,255,.16);
        box-shadow: 0 0 0 1px rgba(79,124,255,.55), 0 14px 38px rgba(79,124,255,.35);
    }

    .btn-login:active {
        transform: scale(.97);
    }

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

    /* --- Hover içten parlayan çizgi animasyonu (scanline) --- */
    .btn-login::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.0) 35%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.0) 65%, transparent 100%);
        transform: translateX(-120%) skewX(-20deg);
        opacity: 0;
        pointer-events: none;
    }

    .btn-login:hover::before {
        opacity: 1;
        animation: scan 1.05s ease-in-out infinite;
    }

@keyframes scan {
    0% {
        transform: translateX(-120%) skewX(-20deg);
    }

    100% {
        transform: translateX(120%) skewX(-20deg);
    }
}

/* --- Loading: Kenarda progress ring --- */
.btn-login::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px; /* border kalınlığı */
    opacity: 0;
    pointer-events: none;
    /* conic-gradient ile progress hissi */
    background: conic-gradient( from 0deg, rgba(79,124,255,.0) 0%, rgba(79,124,255,.0) 20%, rgba(79,124,255,.95) 35%, rgba(45,91,255,.95) 55%, rgba(79,124,255,.0) 75%, rgba(79,124,255,.0) 100% );
    /* sadece border kısmını göster (mask) */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.btn-login.loading::after {
    opacity: 1;
    animation: ring 1.0s linear infinite;
}

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

/* --- Text & Loader --- */
.btn-login .btn-text {
    transition: opacity .2s ease;
}

.btn-login.loading .btn-text {
    opacity: 0;
}

.btn-loader {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
}

.btn-login.loading .btn-loader {
    opacity: 1;
}

.btn-loader::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.30);
    border-top-color: #fff;
    animation: spin .7s linear infinite;
}

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

/* --- Başarısız login: kırmızı pulse + shake --- */
.btn-login.error {
    border-color: rgba(255,77,109,.75);
    box-shadow: 0 0 0 1px rgba(255,77,109,.35), 0 14px 38px rgba(255,77,109,.18);
    animation: shake .35s ease-in-out, pulseRed .9s ease-in-out;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

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

    75% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes pulseRed {
    0% {
        background: rgba(255,77,109,.10);
    }

    50% {
        background: rgba(255,77,109,.18);
    }

    100% {
        background: rgba(79,124,255,.08);
    }
}


@media (max-width: 980px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
    touch-action: manipulation;
}