/* ───────────────────────────────────────────────────────────────────────
   CWS · Çelikkol Login Sayfası — Yeni Görünüm (2026-05-08)
   Mevcut #login-screen ve form elemanlarını korur, sadece görsel değişir.
   Brand: #484849 (koyu) · #CECECE (gri) · Mulish + Bastliga One + IBM Plex Mono
   ─────────────────────────────────────────────────────────────────────── */

/* Font import — sadece login için, base'i kirletmesin */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Login shell — iki kolon (sol görsel + sağ form)
   base.css içinde #login-screen{display:flex} kuralı var, !important ile override.
   Login başarısında JS style.display="none" setliyor; attribute selector ile yakalayıp
   gizliyoruz (aşağıda) ki !important hem grid layout'u koruyabilsin hem de none yapılabilsin. ── */
#login-screen{
  position:fixed !important; inset:0 !important;
  display:grid !important; grid-template-columns:1.05fr 1fr !important;
  align-items:stretch !important;
  background:#1f1f20 !important; color:#f4f4f4 !important;
  z-index:1000 !important; overflow:auto !important;
  font-family:'Mulish', system-ui, -apple-system, sans-serif !important;
  min-height:100vh !important;
  padding:0 !important;
}

/* JS login başarısında style.display="none" inline setliyor — bunu yakala ve gizle */
#login-screen[style*="display: none"],
#login-screen[style*="display:none"]{
  display:none !important;
}

/* === SOL: Mermer dokusu + amblem + alıntı === */
#login-screen .login-art{
  position:relative; overflow:hidden; border-right:1px solid #2a2a2c;
}
#login-screen .login-art .marble-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(140% 90% at 25% 20%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(60% 50% at 80% 70%, rgba(206,206,206,.12), transparent 70%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(58deg,  rgba(255,255,255,.025) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #484849, #1f1f20 60%, #0e0e0f);
}
#login-screen .login-art .veins{
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:screen; opacity:.5;
}

/* Mühür (amblem + isim) */
#login-screen .login-art .stamp{
  position:absolute; left:48px; top:44px;
  display:flex; align-items:center; gap:14px;
}
#login-screen .login-art .stamp .mark{
  width:54px; height:54px; flex:0 0 54px;
  display:flex; align-items:center; justify-content:center; background:transparent;
}
#login-screen .login-art .stamp .mark img{ width:100%; height:100%; object-fit:contain }
#login-screen .login-art .stamp h1{
  font-family:'Bastliga One', Georgia, serif; font-weight:400;
  font-size:30px; margin:0; letter-spacing:.18em; color:#f4f4f4;
}
#login-screen .login-art .stamp small{
  display:block;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.32em;
  color:#CECECE; text-transform:uppercase; margin-top:4px; font-weight:500;
}

/* Sağ üst kare köşe etiketi */
#login-screen .login-art .corner{
  position:absolute; right:32px; top:32px;
  width:64px; height:64px;
  border:1px solid #2a2a2c; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:.16em;
  color:#CECECE; text-transform:uppercase; text-align:center; line-height:1.4;
}
#login-screen .login-art .corner::before{
  content:""; position:absolute; inset:6px;
  border:1px dashed rgba(206,206,206,.3); border-radius:2px;
}

/* Alıntı */
#login-screen .login-art .quote{
  position:absolute; left:48px; bottom:130px; right:48px; max-width:560px;
}
#login-screen .login-art .quote p{
  font-family:'Mulish', sans-serif; font-style:italic; font-weight:300;
  font-size:30px; line-height:1.22; color:#f4f4f4; margin:0; letter-spacing:.01em;
}
#login-screen .login-art .quote .byline{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:#CECECE; margin-top:20px;
}

/* Üç stat (3 ocak / 50+ ülke / 26 yıl) */
#login-screen .login-art .specs{
  position:absolute; left:48px; bottom:36px;
  display:flex; gap:36px;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#888;
}
#login-screen .login-art .specs b{
  display:block; color:#CECECE; font-weight:600;
  font-family:'Mulish', sans-serif; font-size:22px; letter-spacing:.04em;
  text-transform:none; margin-bottom:3px;
}

/* === SAĞ: Form === */
#login-screen .login-form{
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 72px; background:#1f1f20; position:relative;
}
#login-screen .login-form::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,.015) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #26262a, #15151a);
  pointer-events:none;
}
#login-screen .lf-inner{ position:relative; max-width:400px; width:100% }
#login-screen .lf-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; color:#CECECE; margin-bottom:14px;
}
#login-screen .lf-title{
  font-family:'Mulish', sans-serif; font-weight:300; font-size:38px; line-height:1.05;
  margin:0 0 8px; color:#f4f4f4; letter-spacing:.5px;
}
#login-screen .lf-sub{ color:#999; font-size:13px; margin:0 0 32px; line-height:1.6 }

#login-screen .lf-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
#login-screen .lf-row label{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#CECECE;
}
#login-screen .lf-row input{
  background:transparent; border:0; border-bottom:1px solid #3a3a3c;
  color:#f4f4f4; padding:9px 0; font-size:14px; outline:none;
  transition:border-color .15s; font-family:inherit; width:100%;
}
#login-screen .lf-row input:focus{ border-bottom-color:#CECECE }
#login-screen .lf-row input::placeholder{ color:#5a5a5c }

#login-screen .lf-opts{
  display:flex; align-items:center; justify-content:space-between;
  margin:14px 0 22px; font-size:12px; color:#999;
}
#login-screen .lf-opts label{ display:flex; align-items:center; gap:8px; cursor:pointer; color:#999 }
#login-screen .lf-opts input[type=checkbox]{ width:14px; height:14px; cursor:pointer; accent-color:#CECECE }

/* Ana giriş butonu */
#login-screen .lf-btn{
  width:100%; background:#CECECE; color:#1f1f20;
  padding:14px; border:0; border-radius:2px;
  font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:background .15s; font-family:inherit;
}
#login-screen .lf-btn:hover{ background:#fff }
#login-screen .lf-btn:disabled{ opacity:.5; cursor:not-allowed }

/* Hata mesajı (mevcut #lerr id'si) */
#login-screen #lerr{
  display:none;
  background:rgba(160,64,64,.12); border:1px solid rgba(160,64,64,.4);
  color:#ff8888; padding:10px 14px; border-radius:2px;
  font-size:12px; margin-bottom:14px;
  font-family:'IBM Plex Mono', monospace; letter-spacing:.05em;
}
#login-screen #lerr.show{ display:block }

/* Yükleniyor */
#login-screen #login-yukleniyor{
  text-align:center; font-size:11px; color:#888;
  margin-top:10px; letter-spacing:.18em; text-transform:uppercase;
  font-family:'IBM Plex Mono', monospace;
}

/* Footer */
#login-screen .lf-foot{
  margin-top:26px; display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:#666;
}

/* Mobil — tek kolon */
@media (max-width: 900px){
  #login-screen{ grid-template-columns:1fr; grid-template-rows:240px 1fr }
  #login-screen .login-art{ border-right:0; border-bottom:1px solid #2a2a2c }
  #login-screen .login-art .stamp{ left:24px; top:24px; gap:10px }
  #login-screen .login-art .stamp h1{ font-size:22px }
  #login-screen .login-art .corner{ right:18px; top:18px; width:50px; height:50px }
  #login-screen .login-art .quote, #login-screen .login-art .specs{ display:none }
  #login-screen .login-form{ padding:32px 24px }
  #login-screen .lf-title{ font-size:28px }
}

/* Eski .lbox ve .llogo'yu gizle (geriye uyum) */
#login-screen .lbox, #login-screen .llogo{ display:none !important }

/* === Hızlı Giriş bölümü === */
#login-screen .lf-quick{ margin-top:24px; padding-top:20px; border-top:1px solid #2a2a2c }
#login-screen .lf-quick-lbl{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.18em;
  color:#666; text-transform:uppercase; margin-bottom:10px;
}
#login-screen .lf-quick-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px }
#login-screen .lf-quick-btn{
  background:#26262a; border:1px solid #3a3a3c; color:#999;
  padding:8px 10px; border-radius:2px; font-size:11px;
  text-align:left; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; letter-spacing:.04em;
  transition:all .15s;
}
#login-screen .lf-quick-btn:hover{
  background:#2e2e30; border-color:#CECECE; color:#CECECE;
}
#login-screen .lf-quick-btn b{
  display:block; color:#f4f4f4; font-family:'Mulish', sans-serif;
  font-size:12px; font-weight:500; margin-bottom:2px;
  letter-spacing:0; text-transform:none;
}