/* =====================================================================
   GİRİŞ EKRANI

   İKİ İŞ BİRDEN YAPAR:
   1. Programı açan kişi okuma yazması zayıf → alanlar KOCAMAN, tek
      sütun, terim yok, şifreyi gözüyle doğrulayabilsin.
   2. Ekranı gören müşteri ciddi bir program görsün → ölçülü hareket,
      derin renk, hizalı tipografi. Süs değil, ağırlık.

   ⚠ DIŞARIDAN HİÇBİR ŞEY YÜKLENMEZ. Yazı tipi, ikon, betik — hepsi
     içeride. Lokal kurulumda internet olmayabilir; olmayınca ekran
     bozuk açılmamalı.
   ===================================================================== */

:root {
    --g-murekkep: #0b1220;
    --g-lacivert: #111c30;
    --g-mavi:     #2563eb;
    --g-mavi-ac:  #60a5fa;
    --g-altin:    #f5b22a;
    --g-kagit:    #ffffff;
    --g-cizgi:    #e2e8f0;
    --g-gri:      #64748b;
    --g-kirmizi:  #dc2626;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body.giris {
    margin: 0;
    font: 17px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    background: var(--g-murekkep);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
}

/* ==================================================== SOL — MARKA */
.marka-yuz {
    position: relative;
    overflow: hidden;
    background: var(--g-murekkep);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 56px;
    color: #e2e8f0;
}

/* Işık havuzları — yavaşça geziniyor. Parlatılmış zeminde gezen
   ışık hissi; hareket 20 saniyelik, göz yormuyor. */
.marka-yuz::before,
.marka-yuz::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
}
.marka-yuz::before {
    width: 620px; height: 620px;
    background: radial-gradient(circle, #1d4ed8 0%, transparent 68%);
    top: -180px; left: -160px;
    animation: suzul1 22s ease-in-out infinite alternate;
}
.marka-yuz::after {
    width: 520px; height: 520px;
    background: radial-gradient(circle, #0f766e 0%, transparent 70%);
    bottom: -170px; right: -120px;
    animation: suzul2 26s ease-in-out infinite alternate;
}
@keyframes suzul1 {
    to { transform: translate3d(90px, 70px, 0) scale(1.12); }
}
@keyframes suzul2 {
    to { transform: translate3d(-70px, -60px, 0) scale(1.08); }
}

/* İnce çizgi dokusu — mala izi gibi, çok hafif. */
.marka-yuz .doku {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
        115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 62px);
    pointer-events: none;
}

.marka-yuz > * { position: relative; z-index: 1; }

.rozet-ust {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: #94a3b8;
}
.rozet-ust .nokta {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--g-altin);
    box-shadow: 0 0 0 4px rgba(245,178,42,.18);
}

.marka-ad {
    font-size: clamp(54px, 7vw, 92px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .92;
    color: #fff;
    margin: 0;
}
.marka-ad span { color: var(--g-altin); }

.marka-alt {
    margin-top: 14px;
    font-size: 19px;
    color: #94a3b8;
    max-width: 30ch;
    line-height: 1.55;
}

/* Alt şerit: ne işe yaradığını üç kelimeyle söyler. */
.ozellikler {
    display: flex; gap: 26px; flex-wrap: wrap;
    font-size: 14px; color: #cbd5e1;
}
.ozellikler div { display: flex; align-items: center; gap: 9px; }
.ozellikler .im {
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    font-size: 15px;
}

.tarih-serit {
    font-size: 14px; color: #64748b;
    letter-spacing: .02em;
}
.tarih-serit b { color: #cbd5e1; font-weight: 600; }

/* ==================================================== SAĞ — GİRİŞ */
.giris-yuz {
    background: var(--g-kagit);
    display: grid;
    place-items: center;
    padding: 40px;
}

.giris-kart {
    width: 100%;
    max-width: 400px;
    animation: yuksel .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes yuksel {
    from { opacity: 0; transform: translateY(14px); }
}

.giris-kart h2 {
    font-size: 30px; letter-spacing: -.025em; margin: 0 0 6px;
}
.giris-kart .aciklama {
    color: var(--g-gri); margin: 0 0 30px; font-size: 16px;
}

.alan { margin-bottom: 18px; }
.alan label {
    display: block; font-size: 12.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--g-gri); margin-bottom: 8px;
}

/* Alan kutusu: ikon solda, düğme sağda, ortada yazı. */
.alan .kutu {
    display: flex; align-items: center;
    border: 1.5px solid var(--g-cizgi);
    border-radius: 12px;
    background: #f8fafc;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.alan .kutu:focus-within {
    border-color: var(--g-mavi);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37,99,235,.13);
}
.alan .im {
    padding: 0 4px 0 15px; font-size: 19px; line-height: 1;
    color: var(--g-gri); user-select: none;
}
.alan input {
    flex: 1; min-width: 0;
    font: inherit; font-size: 17px;
    padding: 16px 14px;
    border: 0; background: transparent; outline: none;
    color: #0f172a;
}
/* Tarayıcının otomatik doldurma sarısı kutuyu bozmasın. */
.alan input:-webkit-autofill {
    -webkit-text-fill-color: #0f172a;
    box-shadow: 0 0 0 40px #f8fafc inset;
}

/* ŞİFREYİ GÖSTER — bu kullanıcı yazdığını gözüyle doğrulayabilmeli.
   Yanlış şifre yazıp "program bozuk" demesinin önüne geçer. */
.goz {
    border: 0; background: transparent; cursor: pointer;
    font-size: 19px; padding: 0 15px 0 8px; line-height: 1;
    color: var(--g-gri);
}
.goz:hover { color: #0f172a; }

.giris-dugme {
    width: 100%;
    font: inherit; font-size: 17px; font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--g-mavi);
    border: 0; border-radius: 12px;
    padding: 17px;
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s, transform .08s;
    box-shadow: 0 10px 24px -10px rgba(37,99,235,.7);
}
.giris-dugme:hover { background: #1d4ed8; }
.giris-dugme:active { transform: translateY(1px); }
.giris-dugme[disabled] { opacity: .65; cursor: wait; }

/* Uyarılar */
.uyari {
    display: flex; gap: 11px; align-items: flex-start;
    border-radius: 11px; padding: 13px 15px;
    font-size: 15px; line-height: 1.45;
    margin-bottom: 22px;
}
.uyari.kotu {
    background: #fef2f2; color: #991b1b;
    border-left: 4px solid var(--g-kirmizi);
}
.uyari.sari {
    background: #fffbeb; color: #854d0e;
    border-left: 4px solid var(--g-altin);
}
.uyari .im { font-size: 18px; line-height: 1.2; }

/* Caps Lock — en sık giriş hatası. Yazı yazarken beliriyor. */
#capsUyari { margin: -8px 0 18px; }
#capsUyari[hidden] { display: none !important; }

.giris-altlik {
    margin-top: 26px; padding-top: 18px;
    border-top: 1px solid var(--g-cizgi);
    font-size: 13px; color: #94a3b8;
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ===================================================== DAR EKRAN */
@media (max-width: 900px) {
    body.giris { grid-template-columns: 1fr; }
    .marka-yuz {
        padding: 26px 22px 30px;
        min-height: auto;
        gap: 16px;
    }
    .marka-ad { font-size: 42px; }
    .marka-alt { font-size: 16px; margin-top: 8px; }
    .ozellikler, .tarih-serit { display: none; }
    /* Logo zaten giriş kartının üstünde; telefonda ikinci kez gösterme. */
    .panel-logo { display: none !important; }
    .giris-yuz { padding: 28px 20px 48px; align-items: start; }
    .giris-kart { max-width: 100%; }
}

/* Hareketi sevmeyen / hareket hassasiyeti olan için kapanır. */
@media (prefers-reduced-motion: reduce) {
    .marka-yuz::before, .marka-yuz::after { animation: none; }
    .giris-kart { animation: none; }
}

/* Firma logosu giriş kartının üstünde. */
.giris-kart .kart-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 26px; }