/* ==========================================================
   BEF QR - Kimlik dogrulama sayfalari
   ========================================================== */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth__aside {
    background: linear-gradient(150deg, var(--brand-700) 0%, var(--brand-900) 60%, #0f1f6b 100%);
    color: #fff;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.auth__aside::before {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    right: -120px; top: -120px;
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
    border-radius: 50%;
}
.auth__aside::after {
    content: '';
    position: absolute;
    width: 360px; height: 360px;
    left: -100px; bottom: -140px;
    background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
    border-radius: 50%;
}

/* --- Görselli varyant (assets/img/auth-bg.webp yüklendiğinde) ---
   Sınıf PHP'den geliyor; dosya yoksa hiç eklenmiyor ve yukarıdaki gradyan
   olduğu gibi kalıyor. Kırık arka plan diye bir ara durum yok. */
.auth__aside.has-bg {
    /* YÖNLÜ PERDE — düz karartma değil.
       İlk denemede her yere eşit yoğunlukta (%78–92) mavi bir katman
       bindirilmişti ve sonuç kötüydü: fotoğrafın kendisi zaten mavi tonlu,
       mavi üstüne mavi binince görsel tanınmaz bir bulamaca dönüşüyordu.
       Görseli koymanın amacı ortadan kalkıyordu.

       Asıl hata perdeyi HER YERE uygulamaktı. Panelin bütün içeriği
       (logo, başlık, açıklama, özellikler, alt bilgi) SOL tarafta duruyor —
       .auth__pitch max-width 420px, yani panelin kabaca yarısı. Sağ yarıda
       hiç metin yok, dolayısıyla orayı karartmak yalnızca fotoğrafı öldürüyor.

       Artık perde solda güçlü (metin garantili okunur), sağa doğru açılıyor
       (fotoğraf görünür). Kontrast da fotoğraf da korunuyor. */
    background-image:
        linear-gradient(95deg,
            rgba(9, 20, 70, .93) 0%,
            rgba(12, 28, 95, .87) 30%,
            rgba(17, 40, 140, .58) 56%,
            rgba(23, 61, 225, .20) 100%),
        var(--auth-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Dekoratif ışık daireleri gradyan içindi; fotoğrafın üstünde leke gibi
   duruyorlar. */
.auth__aside.has-bg::before,
.auth__aside.has-bg::after { display: none; }
.auth__brand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; position: relative; z-index: 1; }
/* .auth__brand .sidebar__logo KALDIRILDI — giriş sayfası artık gerçek logoyu
   (.brand-logo--onDark) kullanıyor, ikon kutusu yok. .sidebar__logo'nun kendisi
   duruyor: fatura sayfalarında "B" rozeti olarak kullanılıyor. */
.auth__pitch { position: relative; z-index: 1; max-width: 420px; }
.auth__pitch h2 { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 16px; }
.auth__pitch p { color: rgba(255,255,255,0.82); font-size: 15px; line-height: 1.65; }
.auth__features { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.auth__feature { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.9); font-size: 14.5px; }
.auth__feature [data-lucide] { width: 20px; height: 20px; padding: 8px; box-sizing: content-box; background: rgba(255,255,255,0.14); border-radius: 10px; }
.auth__foot { position: relative; z-index: 1; color: rgba(255,255,255,0.6); font-size: 13px; }

.auth__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    /* DÜZ BEYAZ DEĞİL. Sol taraf kenardan kenara fotoğrafken sağdaki bomboş
       beyaz alan "tasarlanmış boşluk" değil "eksik" gibi okunuyordu. Panelin
       geri kalanında da kullanılan sayfa zemini (#f6f8fb) + üzerine beyaz kart
       ilişkisi burayı da kompozisyonun parçası yapıyor. */
    background: var(--bg);
}

.auth__wrap { width: 100%; max-width: 440px; }

/* Masaüstünde solda zaten logo var; buradaki yalnızca panel gizlenince çıkar. */
.auth__logo { display: none; }

/* Form artık KART: 380px'lik bir form 960px'lik bomboş bir sütunda yüzüyordu.
   Kart ona sınır ve ağırlık veriyor, çevresindeki boşluk da kasıtlı görünüyor.
   Uygulamanın her yerindeki kart diliyle aynı (yüzey + kenarlık + yumuşak gölge). */
.auth__form {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 34px;
}
.auth__form h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
.auth__form > p.sub { color: var(--text-muted); margin: 6px 0 28px; }
.auth__form .field { margin-bottom: 18px; }
.auth__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
/* .checkbox bileseni app.css icinde tanimlidir (ozel tasarim) */

@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
    /* Panel gizlendi → markayı gösteren tek şey bu kaldı. */
    .auth__logo { display: block; margin: 0 auto 22px; }
}
@media (max-width: 480px) {
    .auth__main { padding: 24px 16px; }
    /* Dar ekranda kart kenarlığı ekranı daraltıyor; form zemine otursun. */
    .auth__form { padding: 26px 20px; }
}