/* wwwroot/css/login-theme.css */

/* 1. Modern Renk Paleti Tanımları (Değiştirmesi kolay olsun diye) */
:root {
    --primary-color: #4e54c8; /* Modern, derin bir mavi/mor */
    --secondary-color: #8f94fb; /* Daha açık bir tonu */
    --bg-light: #f8f9fa; /* Çok açık gri arka plan rengi */
    --text-dark: #333;
}

body {
    /* Koyu arka planı kaldırıp aydınlık fona geçiyoruz */
    background-color: var(--bg-light);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    margin: 0;
    overflow: hidden; /* Arka plan animasyonları kaydırma çubuğu çıkarmasın */
    position: relative; /* Pseudo-elementler için gerekli */
}

    /* 2. Arka Plan Animasyonu (Yüzen Işık Hüzmeleri) */
    /* Body'nin öncesine ve sonrasına sanal elementler ekleyerek bulanık ışıklar yaratıyoruz */
    body::before, body::after {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%; /* Yuvarlak şekil */
        z-index: -1; /* Kartın arkasında kalsın */
        filter: blur(100px); /* Çok yüksek bulanıklık ile ışık hüzmesi efekti */
        opacity: 0.3; /* Çok belirgin olmasın, hafif olsun */
        animation: moveShapes 18s ease-in-out infinite alternate;
    }

    body::before {
        background: var(--primary-color);
        top: -150px;
        left: -150px;
    }

    body::after {
        background: var(--secondary-color);
        bottom: -150px;
        right: -150px;
        animation-delay: -9s; /* Diğeriyle ters zamanda hareket etsin */
    }

/* Işıkların yavaşça hareket etmesini sağlayan animasyon */
@keyframes moveShapes {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(150px, 50px) scale(1.1);
    }
}


/* 3. Login Kartı Tasarımı */
.login-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 24px; /* Köşeleri daha modern şekilde yuvarlattık */
    /* Çok yumuşak, modern bir gölge (neumorphism esintisi) */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    background-color: #fff;
    padding: 1rem !important;
    z-index: 1; /* Arka plan ışıklarının önünde dursun */
    /* Kartın sayfaya yüklenirken aşağıdan yukarı süzülmesi */
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Kart giriş animasyonu */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-header {
    background-color: transparent;
    border-bottom: none;
    padding-bottom: 10px;
    text-align: center;
}

.owl-logo-img {
    width: 250px; /* Logonun genişliği (İstediğin boyuta göre değiştir) */
    height: auto; /* Orantılı olarak boyutlansın */
    display: block;
    margin: 0 auto 15px auto; /* Ortalamak ve altından boşluk bırakmak için */
    /* Animasyonumuzu resme de uyguluyoruz */
    animation: float 3s ease-in-out infinite;
    /* Logoya hafif bir gölge vererek derinlik katalım */
    filter: drop-shadow(0 10px 10px rgba(78, 84, 200, 0.2));
}

/* Input Alanlarını Güzelleştirme */
.form-floating > .form-control {
    border-radius: 12px;
    border: 1px solid #eaeaea;
    background-color: #fbfbfb; /* Çok hafif gri iç renk */
    padding-left: 20px;
}
    /* Inputa tıklanınca modern bir odaklanma efekti */
    .form-floating > .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(78, 84, 200, 0.1); /* Bootstrap mavisini kendi rengimizle değiştirdik */
        background-color: #fff;
    }

.form-floating > label {
    padding-left: 20px; /* Label'ı da inputla hizaladık */
}


/* Buton Tasarımı */
.btn-superowl {
    /* Düz renk yerine modern gradient geçiş */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px;
    border-radius: 12px;
    /* Butona da yumuşak gölge */
    box-shadow: 0 10px 20px -10px rgba(78, 84, 200, 0.5);
    transition: all 0.3s ease;
}

    .btn-superowl:hover {
        /* Üzerine gelince hafifçe yukarı kalksın ve gölgesi artsın */
        transform: translateY(-3px);
        box-shadow: 0 15px 30px -10px rgba(78, 84, 200, 0.7);
        color: white;
    }


/* Link Renkleri */
a.text-primary {
    color: var(--primary-color) !important;
    transition: color 0.2s;
}

    a.text-primary:hover {
        color: var(--secondary-color) !important;
        text-decoration: underline !important;
    }

/* Baykuş süzülme animasyonu (eski hali) */
@keyframes float {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-10px);
    }

    100% {
        transform: translatey(0px);
    }
}