/* ══════════════════════════════════════════════════════════════════
   NARIUS · GİRİŞ EKRANI v2
   Tek dosya · sıfır bağımlılık · açık/koyu tema · TR-EN
   ══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light dark;

  /* ── MARKA ── */
  --brand:#c2410c;              /* birincil aksiyon — beyaz metinle 5.18:1 */
  --brand-hover:#a63709;
  --brand-active:#8f2f07;
  --brand-tint:rgba(194,65,12,.10);
  --brand-ring:rgba(194,65,12,.22);
  --brand-glow:#f6821f;         /* sağ paneldeki ışıma ve nokta rengi */

  /* ── NEON (sürüm göstergesi) ──
     Bilinçli olarak temaya BAĞLI DEĞİL: rozet kendi koyu çipinde durduğu ve sağ panel
     her temada koyu olduğu için iki temada da aynı değer doğru. Koyu tema bloklarında
     yeniden tanımlanmasına gerek yok.
     Ton, sağ paneldeki dönen kürenin kıta noktalarıyla AYNI neon turuncu (login-v2.js
     LAND_RGB) — giriş ekranında tek bir neon dili olsun diye bilinçli seçildi.  */
  --neon:#ff7a18;               /* neon turuncu — koyu çipte 6.3-7.5:1 (ölçüldü) */
  --neon-rgb:255,122,24;        /* aynı renk; rgba(var(--neon-rgb),a) için */

  /* ── NÖTR (açık tema) ── */
  --bg:#fafaf9;
  --surface:#ffffff;
  --surface-2:#f4f4f2;
  --ink:#14161a;
  --ink-2:#4d535a;
  --ink-3:#7c838c;
  --ink-4:#a5abb3;
  --line:#e5e5e2;
  --line-2:#d3d4d0;
  --ok:#15803d;
  --warn:#b45309;
  --danger:#b91c1c;
  --danger-bg:rgba(185,28,28,.07);
  --shadow-sm:0 1px 2px rgba(16,18,22,.05);
  --shadow-md:0 4px 16px -4px rgba(16,18,22,.10),0 1px 3px rgba(16,18,22,.05);

  /* ── ÖLÇÜ ── */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --col:376px;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#d8500c; --brand-hover:#ee5f14; --brand-active:#b8420a;
    --brand-tint:rgba(216,80,12,.14); --brand-ring:rgba(216,80,12,.32);
    --bg:#0b0c0e; --surface:#131519; --surface-2:#181b20;
    --ink:#eceef0; --ink-2:#a9afb7; --ink-3:#787f88; --ink-4:#5d646d;
    --line:#23262b; --line-2:#31353c;
    --ok:#4ade80; --warn:#fbbf24; --danger:#f87171; --danger-bg:rgba(248,113,113,.10);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 28px -8px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --brand:#d8500c; --brand-hover:#ee5f14; --brand-active:#b8420a;
  --brand-tint:rgba(216,80,12,.14); --brand-ring:rgba(216,80,12,.32);
  --bg:#0b0c0e; --surface:#131519; --surface-2:#181b20;
  --ink:#eceef0; --ink-2:#a9afb7; --ink-3:#787f88; --ink-4:#5d646d;
  --line:#23262b; --line-2:#31353c;
  --ok:#4ade80; --warn:#fbbf24; --danger:#f87171; --danger-bg:rgba(248,113,113,.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 28px -8px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ═══════════════ İSKELET ═══════════════ */
.page{display:grid;grid-template-columns:1fr minmax(420px,44%);min-height:100dvh}
@media (max-width:1080px){ .page{grid-template-columns:1fr} .showcase{display:none} }

.auth{
  display:flex;flex-direction:column;
  padding:28px 32px;min-height:100dvh;
}
.auth-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 0}
.auth-foot{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:12px;color:var(--ink-3);
}
.col{width:100%;max-width:var(--col)}

/* ═══════════════ LOGO ═══════════════ */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:28px;height:28px;flex:none}
.logo b{font-size:24px;font-weight:650;letter-spacing:-.025em}

/* ═══════════════ ÜST AKSİYONLAR ═══════════════ */
.head-actions{display:flex;align-items:center;gap:2px}
.ghost-btn{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;
  background:none;border:0;border-radius:var(--r-sm);
  color:var(--ink-3);font-size:13px;font-weight:500;cursor:pointer;
  transition:background .14s,color .14s;
}
.ghost-btn:hover{background:var(--surface-2);color:var(--ink)}
.ghost-btn svg{flex:none}
.i-moon{display:none}
:root[data-theme="dark"] .i-sun{display:none}
:root[data-theme="dark"] .i-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .i-sun{display:none}
  :root:not([data-theme="light"]) .i-moon{display:block}
}

/* ═══════════════ BAŞLIK ═══════════════ */
.title{font-size:27px;line-height:1.2;font-weight:650;letter-spacing:-.028em;margin:0 0 7px}
.subtitle{font-size:14px;color:var(--ink-2);margin:0 0 26px}

/* ═══════════════ ORTAM SEÇİCİ ═══════════════ */
.env{
  display:flex;align-items:center;gap:2px;padding:3px;margin:0 0 22px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
}
.env label{flex:1;position:relative}
.env input{position:absolute;opacity:0;width:0;height:0}
.env span{
  display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  padding:7px 11px;border-radius:7px;cursor:pointer;
  font-size:13px;font-weight:550;color:var(--ink-2);
  transition:background .14s,color .14s,box-shadow .14s;
}
.env span small{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-4);letter-spacing:.01em}
.env input:checked + span{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.env input:checked + span small{color:var(--ink-3)}
.env input:focus-visible + span{outline:2px solid var(--brand);outline-offset:1px}
.env label:hover span{color:var(--ink)}

/* ═══════════════ ALAN ═══════════════ */
.field{margin:0 0 16px}
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px}
.field-top label{font-size:13px;font-weight:600;color:var(--ink)}
.link-sm{font-size:12.5px;font-weight:500;color:var(--ink-3);text-decoration:none}
.link-sm:hover{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

.control{position:relative;display:flex;align-items:center}
.control input{
  width:100%;height:44px;padding:0 14px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  font-size:14.5px;outline:none;
  transition:border-color .14s,box-shadow .14s,background .14s;
}
.control input::placeholder{color:var(--ink-4)}
.control input:hover{border-color:var(--ink-4)}
.control input:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px var(--brand-ring)}
.control.pw input{padding-right:46px}
.eye{
  position:absolute;right:5px;width:34px;height:34px;display:grid;place-items:center;
  background:none;border:0;border-radius:7px;color:var(--ink-3);cursor:pointer;transition:background .14s,color .14s;
}
.eye:hover{background:var(--surface-2);color:var(--ink)}

.hint{display:flex;align-items:center;gap:6px;margin:7px 0 0;font-size:12.5px;color:var(--warn)}
.err{display:none;margin:7px 0 0;font-size:12.5px;color:var(--danger)}
.field.bad .control input{border-color:var(--danger)}
.field.bad .control input:focus{box-shadow:0 0 0 3.5px var(--danger-bg)}
.field.bad .err{display:block}

/* ═══════════════ ALERT ═══════════════ */
.alert{
  display:flex;gap:9px;align-items:flex-start;margin:0 0 18px;padding:11px 13px;
  background:var(--danger-bg);border:1px solid var(--danger);border-radius:var(--r-md);
  font-size:13px;line-height:1.45;color:var(--danger);
}
.alert svg{flex:none;margin-top:1px}

/* ═══════════════ CHECKBOX ═══════════════ */
.check{display:inline-flex;align-items:center;gap:9px;margin:2px 0 20px;cursor:pointer;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check i{
  width:17px;height:17px;flex:none;display:grid;place-items:center;
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:5px;
  color:#fff;transition:background .14s,border-color .14s;
}
.check i svg{opacity:0;transform:scale(.5);transition:opacity .12s,transform .12s}
.check input:checked + i{background:var(--brand);border-color:var(--brand)}
.check input:checked + i svg{opacity:1;transform:scale(1)}
.check input:focus-visible + i{box-shadow:0 0 0 3.5px var(--brand-ring)}
.check span{font-size:13.5px;color:var(--ink-2)}

/* ═══════════════ BUTONLAR ═══════════════ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:46px;padding:0 16px;border-radius:var(--r-md);
  font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:background .14s,border-color .14s,box-shadow .14s,transform .06s;
}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover:not(:disabled){background:var(--brand-hover)}
.btn-primary:active:not(:disabled){background:var(--brand-active)}
.btn-primary:disabled{opacity:.55;cursor:default}
.btn-primary .arrow{transition:transform .18s}
.btn-primary:hover:not(:disabled) .arrow{transform:translateX(3px)}
.btn-outline{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn-outline:hover{background:var(--surface-2);border-color:var(--ink-4)}
.btn-sm{height:42px;font-size:14px;font-weight:550}
.spin{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .65s linear infinite;display:none;
}
.busy .spin{display:block}
.busy .label,.busy .arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════ AYIRAÇ ═══════════════ */
.sep{display:flex;align-items:center;gap:13px;margin:22px 0}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.sep span{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}

.alt{display:grid;gap:8px}
.alt-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:420px){.alt-row{grid-template-columns:1fr}}

/* ═══════════════ ALT BİLGİ ═══════════════ */
.helpline{margin:24px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}
.helpline a{font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.helpline a:hover{color:var(--brand)}

.legal{display:flex;flex-wrap:wrap;gap:14px}
.legal a{color:var(--ink-3);text-decoration:none}
.legal a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/*  SÜRÜM ROZETİ — neon turuncu + ışıma.
    Neon KOYU zemin ister. ÖLÇÜLDÜ (WCAG göreli parlaklık): neon turuncu doğrudan açık tema
    zemininde (--bg #fafaf9) yalnız 2.50:1 — küçük punto için okunmaz, ışıma da hiç
    görünmez. Bu yüzden rozet kendi koyu çipini taşıyor: açık temada 6.3:1, koyu temada
    7.5:1 (eski gri rozet 2.22:1 ile WCAG'ın altındaydı, yani bu aynı zamanda bir
    erişilebilirlik kazancı). Çipi kaldıran, açık tema için koyu bir turuncuya
    (örn. var(--brand) #c2410c) düşmek zorundadır — neon ton beyaz üstünde çalışmaz.  */
.build{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--neon);padding:3px 9px;border-radius:var(--r-pill);
  /*  Çip zemini nötr-sıcak siyah: turuncu ışıma soğuk siyahta kirli görünüyor. */
  background:rgba(12,10,8,.92);border:1px solid rgba(var(--neon-rgb),.34);
  text-shadow:0 0 4px rgba(var(--neon-rgb),.70),0 0 11px rgba(var(--neon-rgb),.45);
  box-shadow:0 0 12px -2px rgba(var(--neon-rgb),.32),inset 0 0 8px -4px rgba(var(--neon-rgb),.40);
  animation:buildGlow 3.4s ease-in-out infinite;
}
@keyframes buildGlow{
  0%,100%{
    text-shadow:0 0 4px rgba(var(--neon-rgb),.70),0 0 11px rgba(var(--neon-rgb),.45);
    box-shadow:0 0 12px -2px rgba(var(--neon-rgb),.32),inset 0 0 8px -4px rgba(var(--neon-rgb),.40);
  }
  50%{
    text-shadow:0 0 6px rgba(var(--neon-rgb),.95),0 0 18px rgba(var(--neon-rgb),.62);
    box-shadow:0 0 18px -2px rgba(var(--neon-rgb),.50),inset 0 0 10px -4px rgba(var(--neon-rgb),.55);
  }
}

/* ═══════════════ SAĞ PANEL ═══════════════ */
.showcase{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:44px;color:#f3f4f6;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(246,130,31,.30) 0%, rgba(246,130,31,0) 58%),
    radial-gradient(90% 70% at 12% 96%, rgba(194,65,12,.28) 0%, rgba(194,65,12,0) 62%),
    linear-gradient(168deg,#141619 0%,#0c0d10 62%,#0a0b0d 100%);
}
#globe{position:absolute;top:-12%;right:-22%;width:118%;height:100%;z-index:-1}
.showcase::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(8deg,rgba(8,9,11,.92) 4%,rgba(8,9,11,.55) 34%,transparent 62%);
}


.sc-eyebrow{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:5px 11px 5px 8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);font-size:11.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.86);
  backdrop-filter:blur(6px);
}
.sc-eyebrow em{
  font-style:normal;font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;
  background:rgba(246,130,31,.22);color:#ffb877;
}
.showcase h2{
  font-size:33px;line-height:1.14;font-weight:650;letter-spacing:-.032em;
  margin:0 0 14px;max-width:17ch;
}
.showcase h2 mark{background:none;color:#ffa45c}
.sc-lede{font-size:14.5px;line-height:1.62;color:rgba(243,244,246,.72);margin:0 0 30px;max-width:44ch}

/* bilgi kartı */
.sc-card{
  display:grid;gap:0;max-width:430px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-lg);backdrop-filter:blur(10px);overflow:hidden;
}
.sc-row{display:flex;align-items:center;gap:11px;padding:13px 15px;font-size:13px}
.sc-row + .sc-row{border-top:1px solid rgba(255,255,255,.08)}
.sc-row .ico{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.08)}
.sc-row .txt{flex:1;min-width:0}
.sc-row .txt b{display:block;font-weight:550;color:#f3f4f6;font-size:13px}
/*  Sağ paneldeki "Sürüm X" satırı zaten koyu zeminde duruyor — çip gereksiz, yalnız ışıma.
    Yalnız .ver sınıfı hedeflenir; aynı seçici diğer iki satırın başlığını da boyardı.  */
.sc-row .txt b.ver{
  color:var(--neon);font-family:var(--mono);letter-spacing:.03em;
  text-shadow:0 0 5px rgba(var(--neon-rgb),.60),0 0 14px rgba(var(--neon-rgb),.38);
  animation:verGlow 3.4s ease-in-out infinite;
}
@keyframes verGlow{
  0%,100%{text-shadow:0 0 5px rgba(var(--neon-rgb),.60),0 0 14px rgba(var(--neon-rgb),.38)}
  50%    {text-shadow:0 0 8px rgba(var(--neon-rgb),.90),0 0 22px rgba(var(--neon-rgb),.55)}
}
/*  Hareket azaltma tercihinde nefes alma durur; renk ve ışıma kalır. */
@media (prefers-reduced-motion:reduce){
  .build,.sc-row .txt b.ver{animation:none}
}
.sc-row .txt span{display:block;font-size:12px;color:rgba(243,244,246,.58);margin-top:1px}
.sc-row .go{flex:none;color:rgba(243,244,246,.5);transition:color .14s,transform .14s}
a.sc-row{text-decoration:none;color:inherit;transition:background .14s}
a.sc-row:hover{background:rgba(255,255,255,.05)}
a.sc-row:hover .go{color:#fff;transform:translateX(2px)}
.pulse{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.18);animation:pl 2.6s ease-in-out infinite}
@keyframes pl{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.18)}50%{box-shadow:0 0 0 6px rgba(74,222,128,.04)}}

@media (max-height:800px){
  .showcase{padding:36px}
  .showcase h2{font-size:29px}
  .sc-lede{margin-bottom:22px}
}
@media (max-height:680px){ .sc-lede{display:none} }

/* panelleri ayıran ince çizgi (koyu temada iki panel birbirine karışmasın) */
.showcase{box-shadow:-1px 0 0 rgba(255,255,255,.07)}

/* sağ panel yalnızca geniş ekranda — bu kural stil sayfasının sonunda kalmalı */
@media (max-width:1080px){
  .page{grid-template-columns:1fr}
  .showcase{display:none}
  .auth{padding:24px 20px 28px}
  .auth-main{padding:24px 0 8px}
  .auth-foot{flex-direction:column;align-items:flex-start;gap:10px;padding-top:8px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
/* Logo artık <img> (gerçek marka işareti, turuncu placeholder kare değil) */
.logo img{width:48px;height:48px;flex:none;display:block;border-radius:7px;object-fit:contain}

/* ═══════════════ RAPOR EKİ (report.narius.io) ═══════════════
   ERP'deki login-v2.css'in birebir kopyasının üstüne eklenen tek kural: bilgi kutusu.
   ERP sayfasında yalnız hata kutusu vardı; raporda TempData["StatusMessage"] (ör. çıkış
   sonrası bilgi) de gösterildiği için kırmızı olmayan bir varyant gerekiyor. Yeni renk
   icat edilmedi, mevcut token'lar kullanıldı.  */
.alert.alert-info{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}

/* RAPOR EKİ: logo metni 'Narius AI Raporlama' — tek satır; dar ekranda tema/dil düğmeleriyle aynı satıra sığsın. */
.logo b{white-space:nowrap}
@media (max-width:420px){.logo b{font-size:17px}}
/* RAPOR EKİ: logodaki "AI Raporlama" — "AI"ın A'sından "Raporlama"nın son a'sına kadar
   soldan sağa sürekli kayan turuncu geçiş. Koyu temada sağ paneldeki <mark> turuncusu
   (#ffa45c) + açık parlak bant; açık temada neon ton beyaz zeminde okunmadığı için (2.5:1)
   koyu turuncular. background-size 200% + konum 200→0% = tam bir döşeme kayması (soldan sağa), dikişsiz döngü.
   "Hareketi azalt" açık cihazlarda kayma durur; desteklemeyen tarayıcıda düz turuncu kalır. */
.logo-acc{
  color:var(--brand);
  background-image:linear-gradient(90deg,#9a3412 0%,#c2410c 25%,#f97316 50%,#c2410c 75%,#9a3412 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:logoKay 4s linear infinite;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-acc{background-image:linear-gradient(90deg,#f6821f 0%,#ffa45c 25%,#ffd7b0 50%,#ffa45c 75%,#f6821f 100%)}
}
:root[data-theme="dark"] .logo-acc{background-image:linear-gradient(90deg,#f6821f 0%,#ffa45c 25%,#ffd7b0 50%,#ffa45c 75%,#f6821f 100%)}
@keyframes logoKay{from{background-position:200% 0}to{background-position:0% 0}}
@media (prefers-reduced-motion:reduce){.logo-acc{animation:none}}