:root {
    --jl-purple-main: #654794;
    --jl-purple-dark: #3f2a5f;
    --jl-purple-light: #8a6bb0;
    --jl-orange: #f18a27;
    --jl-border: #e5e7eb;
    --jl-shadow: 0 18px 45px rgba(0,0,0,.18);
    --jl-radius: 16px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Poppins',sans-serif;
    background: linear-gradient(135deg,var(--jl-purple-dark), var(--jl-purple-main) 55%, var(--jl-purple-light));
    overflow-x: hidden;
}

/* ================== DİJİTAL ARKA PLAN (ESKİ GÜÇTE) ================== */
.jl-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(1000px 560px at 18% 18%, rgba(255,255,255,.06), rgba(255,255,255,0) 58%), radial-gradient(900px 620px at 86% 62%, rgba(138,107,176,.22), rgba(138,107,176,0) 62%), linear-gradient(135deg,var(--jl-purple-dark), var(--jl-purple-main) 55%, var(--jl-purple-light));
}

    .jl-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .24;
        background: radial-gradient(circle, rgba(255,255,255,.36) 1px, rgba(255,255,255,0) 1.6px) 0 0 / 34px 34px;
        filter: blur(.1px);
        animation: dotsDrift 14s ease-in-out infinite;
        will-change: transform, background-position;
    }

@keyframes dotsDrift {
    0%,100% {
        transform: translate(0,0);
        background-position: 0 0;
    }

    50% {
        transform: translate(-14px,-10px);
        background-position: 18px 12px;
    }
}

.jl-circuit {
    position: absolute;
    inset: -10%;
    opacity: .28;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1'%3E%3Cpath d='M20 50 H140 V110 H220'/%3E%3Cpath d='M260 30 V90 H340 V140'/%3E%3Cpath d='M80 210 H180 V170 H260 V240'/%3E%3Cpath d='M360 70 H300 V40 H240'/%3E%3Cpath d='M40 140 V190 H120'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.65'%3E%3Ccircle cx='20' cy='50' r='2.2'/%3E%3Ccircle cx='220' cy='110' r='2.2'/%3E%3Ccircle cx='260' cy='30' r='2.2'/%3E%3Ccircle cx='340' cy='140' r='2.2'/%3E%3Ccircle cx='80' cy='210' r='2.2'/%3E%3Ccircle cx='260' cy='240' r='2.2'/%3E%3Ccircle cx='360' cy='70' r='2.2'/%3E%3Ccircle cx='240' cy='40' r='2.2'/%3E%3Ccircle cx='40' cy='140' r='2.2'/%3E%3Ccircle cx='120' cy='190' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 520px 360px;
    background-repeat: repeat;
    filter: blur(.15px);
    animation: circuitMove 18s ease-in-out infinite;
    will-change: transform, background-position;
}

@keyframes circuitMove {
    0%,100% {
        transform: translate(0,0) scale(1);
        background-position: 0 0;
    }

    50% {
        transform: translate(18px,-12px) scale(1.01);
        background-position: 40px 20px;
    }
}

.jl-sweep {
    position: absolute;
    inset: -45%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 45%, rgba(255,255,255,0) 70% );
    opacity: .22;
    transform: rotate(12deg);
    animation: sweep 6.8s ease-in-out infinite;
    mix-blend-mode: overlay;
    will-change: transform, opacity;
}

@keyframes sweep {
    0%,100% {
        transform: translateX(-14%) rotate(12deg);
        opacity: .12;
    }

    50% {
        transform: translateX(14%) rotate(12deg);
        opacity: .28;
    }
}

.jl-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.78);
    box-shadow: 0 0 14px rgba(255,255,255,.35);
    opacity: .16;
    filter: blur(.05px);
    animation: particle 7s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes particle {
    0%,100% {
        transform: translate(0,0) scale(1);
        opacity: .10;
    }

    50% {
        transform: translate(18px,-22px) scale(1.25);
        opacity: .24;
    }
}

.jl-ok {
    position: absolute;
    width: 12px;
    height: 12px;
    background: url("assets/images/Logo_OK.png") no-repeat center / contain;
    opacity: .10;
    filter: blur(.15px);
    animation: okFloat 11s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes okFloat {
    0%,100% {
        transform: translate(0,0);
        opacity: .08;
    }

    50% {
        transform: translate(10px,-14px);
        opacity: .12;
    }
}

.jl-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(20,10,35,0.06) 0%, rgba(20,10,35,0.42) 44%, rgba(20,10,35,0.78) 100% );
    pointer-events: none;
}

/* ================== LAYOUT (MOBİL SAFE) ================== */
.jl-page {
    position: relative;
    z-index: 2;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 22px;
}

.jl-slogan {
    color: #fff;
    font-size: clamp(16px,2vw,22px);
    font-weight: 500;
    opacity: .95;
    text-align: center;
    padding: 0 12px;
    text-shadow: 0 10px 30px rgba(0,0,0,.25);
    max-width: 520px;
}

/* ================== KART ================== */
.jl-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--jl-radius);
    box-shadow: var(--jl-shadow);
    padding: 28px;
    border: 1px solid rgba(229,231,235,.92);
}

.jl-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.jl-logo {
    height: 44px;
    transform: translateX(-10px);
    display: block;
}

.jl-kicker {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jl-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    text-align: left;
}

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

.jl-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.jl-input {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border: 1px solid var(--jl-border);
    border-radius: 12px;
    outline: none;
    background: #fff;
}

    .jl-input:focus {
        border-color: var(--jl-orange);
        box-shadow: 0 0 0 4px rgba(241,138,39,.2);
    }

/* ✅ Şifre alanı: label ayrı, input+ikon ayrı wrapper */
.jl-field {
    position: relative;
}

    .jl-field .jl-input {
        padding-right: 42px; /* göz ikonu payı sadece burada */
    }

.jl-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .jl-toggle:focus {
        outline: none;
    }

    .jl-toggle:hover {
        color: #6b7280;
    }

.jl-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.jl-link {
    font-size: 13px;
    color: #6d28d9;
    text-decoration: none;
}

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

.jl-auth-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #374151;
}

.jl-auth {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
    font-size: 14px;
    color: #374151;
}

.jl-btn {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--jl-orange);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

    .jl-btn:hover {
        filter: brightness(.95);
    }

@media(max-width:480px) {
    .jl-card {
        padding: 22px;
    }

    .jl-kicker {
        font-size: 13px;
    }

    .jl-title {
        font-size: 17px;
    }

    .jl-page {
        padding-top: 42px;
        padding-bottom: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jl-bg::before, .jl-circuit, .jl-sweep, .jl-particle, .jl-ok {
        animation: none !important;
    }
}

/* 🔒 Login sayfası için özel font */
body {
    font-family: 'Inter', 'Poppins', sans-serif;
}
.otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.otp-input {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid var(--jl-border);
    font-size: 22px;
    text-align: center;
    font-weight: 600;
    color: #111827;
    background: #fff;
    box-shadow: 0 8px 16px rgba(17,24,39,.08);
}

    .otp-input:focus {
        border-color: var(--jl-orange);
        box-shadow: 0 0 0 4px rgba(241,138,39,.2);
        outline: none;
    }

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

.jl-btn-secondary {
    background: #fff;
    color: var(--jl-orange);
    border: 1px solid var(--jl-orange);
}

    .jl-btn-secondary:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

.jl-btn-sm {
    padding: 10px 16px;
    font-size: 13px;
}

@media (max-width:480px) {
    .otp-input {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}