/* ============================================================================
   Sumscada — marka teması (EN SON yüklenir, önceki stilleri ezer)
   Yalnızca kurumsal kimlik dosyasındaki renkleri ve tipografiyi uygular.
   Yapıya dokunmaz; bu dosya silinirse arayüz eski haline döner.
   ========================================================================== */

/* — 1) Tema değişkenleri: Gece Lacivert + Endüstriyel Amber — */
:root {
  --bg:         #16202B;   /* Gece Lacivert · ana */
  --surface:    #1E2A38;
  --surface-2:  #2C3846;
  --line:       rgba(255, 255, 255, 0.08);
  --ink:        #F2F5F8;   /* koyu zeminde ana metin */
  --muted:      #93A0AF;   /* koyu zeminde soluk metin */
  --ember:      #F59B14;   /* Endüstriyel Amber · marka */
  --ember-soft: #F5E2C4;
  --ok:         #1FA971;   /* Çalışıyor · RUN */
  --alarm:      #D93B3B;   /* Alarm · FAULT */
}

/* — 2) Tipografi: Inter (arayüz) + IBM Plex Mono (ölçüm/etiket/alarm) — */
body,
.font-display,
.brand-title, .brand-sub,
.topbar h1, .topbar .accent,
.login-title, .login-lead {
  font-family: var(--ss-font);
}
.font-mono,
.ss-olcum,
[class*="-value"], [class*="-metric"], [class*="-tag"], [class*="-code"] {
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;   /* rakam genişliği sabit — panoda kaymaz */
}

/* — 3) Logo kilidi: küçük harf · 700 · -0.03em · "sum" amber + "scada" — */
.ss-logo-yazi {
  font-family: var(--ss-font);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.ss-logo-yazi .sum   { color: var(--ss-amber); }
.ss-logo-yazi .scada { color: #FFFFFF; }        /* koyu zemin → beyaz */

/* Üst çubuk */
.topbar h1 .ss-logo-yazi { font-size: 1.05em; }

/* Sol menü markası */
.brand-logo--mark {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.brand-logo--mark img { display: block; width: 26px; height: 26px; }
.brand-title.ss-logo-yazi { font-size: 15px; }

/* Giriş ekranı markası — eski Bebas Neue/kırmızı kilidi ezer */
.login-brand-mark.ss-logo-yazi {
  font-family: var(--ss-font);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
}
.login-title { letter-spacing: 0.06em; }

/* ============================================================================
   Giriş ekranı — marka küpü ve marka arka planı
   ========================================================================== */

/* — Küp: 6 yüzün her birinde Σ izleme ağı sembolü — */
.login-cube-wrap { height: 96px; perspective: 560px; }
.login-cube      { width: 60px; height: 60px; }

.login-cube-face {
  border-color: rgba(245, 155, 20, 0.30);
  background:
    linear-gradient(145deg, rgba(245, 155, 20, 0.16), rgba(22, 32, 43, 0.92) 58%),
    rgba(22, 32, 43, 0.86);
  box-shadow: inset 0 0 20px rgba(245, 155, 20, 0.14);
}
/* 60px küp → yüzler ±30px'e taşınır */
.login-cube-face--front  { transform: translateZ(30px); }
.login-cube-face--back   { transform: rotateY(180deg) translateZ(30px); }
.login-cube-face--right  { transform: rotateY(90deg)   translateZ(30px); }
.login-cube-face--left   { transform: rotateY(-90deg)  translateZ(30px); }
.login-cube-face--top    { transform: rotateX(90deg)   translateZ(30px); }
.login-cube-face--bottom { transform: rotateX(-90deg)  translateZ(30px); }

.login-cube-logo {
  width: 40px; height: 40px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(245, 155, 20, 0.45));
}

/* — Arka plan: düz kareler yerine marka "düğüm ağı" deseni — */
.login-bg-sky {
  background:
    radial-gradient(ellipse 90% 55% at 50% 18%, rgba(245, 155, 20, 0.14), transparent 58%),
    radial-gradient(ellipse 50% 40% at 78% 30%, rgba(147, 160, 175, 0.07), transparent 55%),
    linear-gradient(180deg, #101821 0%, #131D28 42%, #16202B 100%);
}
.login-bg-floor {
  background-image: url('svg/sumscada-desen-koyu.svg');
  background-size: 72px 72px;
  background-repeat: repeat;
}
.login-bg-floor::after {
  background: linear-gradient(180deg,
    rgba(245, 155, 20, 0.08) 0%, transparent 34%, rgba(22, 32, 43, 0.68) 100%);
}
.login-bg-horizon {
  background: linear-gradient(90deg, transparent 0%,
    rgba(245, 155, 20, 0.15) 20%, rgba(245, 155, 20, 0.55) 50%,
    rgba(245, 155, 20, 0.15) 80%, transparent 100%);
}