/* ============================================================================
   SERSİSTEM DİJİTAL — tasarım katmanı (2026-09-02)

   Neden bu katman var: eski görünüm "her yerde gördüğün panel"e dönmüştü —
   yuvarlak köşeler, yumuşak mavi, dağınık gölgeler, 18 maddelik düz menü.
   Kullanıcının isteği net: kare, profesyonel, kuşbakışı, her yerde hover.

   TASARIM KARARLARI (bunlar keyfi değil, uyulacak kurallar):

   1. KARE. Hiçbir yerde yuvarlatma yok. Tek bir kural hepsini kapatıyor;
      alt dosyalarda kalan sabit yuvarlatmaları da bastırıyor.

   2. RENK ANLAM TAŞIR. Arayüzün kendisi (menü, kart, tablo, düğme) tamamen
      nötr: kağıt, mürekkep, kılcal çizgi. Renk yalnız DURUM bildirir —
      yeşil iyi, kehribar dikkat, kırmızı kritik, mavi etkin/bağlantı.
      Bloomberg terminali mantığı: ekranda renk varsa bir şey söylüyordur.

   3. GÖLGE YOK, ÇİZGİ VAR. Derinlik yumuşak gölgeyle değil 1px kılcal
      çizgiyle kuruluyor. Tek istisna: üste binen katmanlar (komut paleti)
      bulanıksız, kaydırılmış sert gölge alır — baskı işi gibi.

   4. RAKAMLAR MONO. Sayı, tarih, gün sayısı, etiket — hepsi IBM Plex Mono
      ve tabular. Sütunlar hizalanır, panel gösterge tablosu gibi okunur.

   5. HER ETKİLEŞİMİN KARŞILIĞI VAR. Menü, kart, satır, düğme, sekme:
      hepsinde hover ve klavye odağı ayrı ayrı tanımlı.

   Sıra önemli: bu dosya stil/stil2/stil3'ten SONRA yüklenir.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. KARE */
/* Alt dosyalarda 40'a yakın sabit border-radius var; teker teker ezmek yerine
   tek kural. !important burada bilinçli: bu bir tasarım yasası, istisnası yok. */
*, *::before, *::after { border-radius: 0 !important; }

/* --------------------------------------------------------- 2. BELİRTEÇLER */
:root {
  /* yüzeyler — soğuk gri-yeşile çalan kağıt, mavi-beyaz değil */
  --zemin:  #F1F2EF;
  --yuzey:  #FFFFFF;
  --yuzey2: #E9EBE6;
  --cizgi:  #D7DAD3;
  --cizgi-koyu: #B9BEB5;
  --yazi:   #14181C;
  --soluk:  #5C6570;

  /* durum renkleri — tek işleri anlam taşımak */
  --ana:       #1B4FA8;   /* etkin / bağlantı */
  --ana-koyu:  #143A7C;
  --ana-soluk: #E4EAF4;
  --yesil:     #1B7A4F;
  --sari:      #8A5A05;
  --turuncu:   #A85A12;
  --kirmizi:   #B3271C;
  --mor:       #5B3FA8;

  /* iskelet */
  --ust-zemin: var(--yuzey);
  --alt-zemin: var(--yuzey);
  --giris-gradyan: var(--zemin);
  --satir-vurgu: rgba(20,24,28,.035);
  --golge: none;
  --golge-buyuk: 6px 6px 0 rgba(20,24,28,.14);
  --palet-perde: rgba(20,24,28,.34);

  /* bildirim blokları */
  --hata-z:   #FBEDEC;  --hata-c:   #E3B4AF;  --hata-y: #8E2018;
  --basari-z: #E9F4EE;  --basari-c: #AACBB8;  --basari-y: #14603E;
  --uyari-z:  #FBF3E3;  --uyari-c:  #DFC894;
  --kritik-z: #FBEDEC;  --kritik-c: #E3B4AF;

  /* rozetler */
  --rz-yesil-z:   #E4F1EA;  --rz-yesil-y:   #14603E;
  --rz-sari-z:    #F8EFDC;  --rz-sari-y:    #7A4E04;
  --rz-kirmizi-z: #FAE8E6;  --rz-kirmizi-y: #96201A;
  --rz-mavi-z:    #E3E9F3;  --rz-mavi-y:    #163F86;
  --rz-mor-z:     #EBE7F4;  --rz-mor-y:     #4A3190;
  --rz-turkuaz-z: #E0EFF0;  --rz-turkuaz-y: #0B5A63;

  --r: 0;
  --yan-genislik: 232px;
  --ust-yukseklik: 54px;

  --f-govde: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mono:  'IBM Plex Mono', ui-monospace, Consolas, 'Courier New', monospace;
}

html[data-tema="koyu"] {
  --zemin:  #0E1113;
  --yuzey:  #16191C;
  --yuzey2: #1E2226;
  --cizgi:  #2A2F34;
  --cizgi-koyu: #3A4046;
  --yazi:   #E6E9EC;
  --soluk:  #949CA5;

  --ana:       #6C9BEC;
  --ana-koyu:  #4D7FD6;
  --ana-soluk: #1A2740;
  --yesil:     #46B183;
  --sari:      #D2A03F;
  --turuncu:   #DC8A45;
  --kirmizi:   #E4695C;
  --mor:       #9B7FE8;

  --ust-zemin: var(--yuzey);
  --alt-zemin: var(--yuzey);
  --giris-gradyan: var(--zemin);
  --satir-vurgu: rgba(255,255,255,.045);
  --golge-buyuk: 6px 6px 0 rgba(0,0,0,.5);
  --palet-perde: rgba(0,0,0,.6);

  --hata-z:   #2C1917;  --hata-c:   #5B2A25;  --hata-y: #F0A79E;
  --basari-z: #12251C;  --basari-c: #24503A;  --basari-y: #7FD3AB;
  --uyari-z:  #2A2213;  --uyari-c:  #55431F;
  --kritik-z: #2C1917;  --kritik-c: #5B2A25;

  --rz-yesil-z:   #14291F; --rz-yesil-y:   #7FD3AB;
  --rz-sari-z:    #2A2213; --rz-sari-y:    #E0B564;
  --rz-kirmizi-z: #2C1917; --rz-kirmizi-y: #F0A79E;
  --rz-mavi-z:    #17243A; --rz-mavi-y:    #93B7F2;
  --rz-mor-z:     #221D38; --rz-mor-y:     #B9A4F0;
  --rz-turkuaz-z: #12272A; --rz-turkuaz-y: #71C6CE;
}

/* ------------------------------------------------------------ 3. TİPOGRAFİ */
body {
  font-family: var(--f-govde);
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  background: var(--zemin);
  color: var(--yazi);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -0.018em; font-weight: 600; }
h1 { font-size: 24px; }
h2 { font-size: 14px; }
h3 { font-size: 16px; }

/* Sayı, tarih, kod, etiket: instrumentasyon dili. */
.kpi-sayi, .kutu b, .sayi, kbd, code, .rakam,
.akis-zaman, .cubuk-sayi, .omur-yazi, .spec-sayi {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.soluk { color: var(--soluk); }

/* ---------------------------------------------------------------- 4. ÜST */
.ust {
  height: var(--ust-yukseklik);
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  backdrop-filter: none;
  padding: 0 16px;
}
.marka { gap: 10px; }
.logo {
  background: var(--yazi); color: var(--yuzey);
  font-family: var(--f-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .04em;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
}
.marka-yazi { font-size: 14px; letter-spacing: -0.01em; }
.marka-yazi b { font-weight: 600; }

.ust-sag { gap: 6px; align-items: center; }

.ust-ara {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  color: var(--soluk);
  height: 32px; padding: 0 10px;
  font-size: 13px;
  transition: border-color .12s, color .12s, background .12s;
}
.ust-ara:hover { border-color: var(--yazi); color: var(--yazi); background: var(--yuzey); }
.ust-ara kbd {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  font-size: 10.5px; padding: 2px 5px; color: var(--soluk);
}

.ust-zil {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  color: var(--soluk);
  transition: border-color .12s, color .12s, background .12s;
}
.ust-zil:hover { border-color: var(--cizgi); color: var(--yazi); background: var(--zemin); }
.zil-rozet {
  font-family: var(--f-mono); font-size: 10px; font-style: normal;
  min-width: 16px; height: 16px; line-height: 16px;
  border: 1px solid var(--yuzey);
}

/* Hesap düğmesi — üst barın sağ ucu artık kişinin kendi kapısı. */
.ust-hesap {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px 0 4px;
  border: 1px solid transparent;
  text-decoration: none; color: var(--yazi);
  transition: border-color .12s, background .12s;
}
.ust-hesap:hover { border-color: var(--cizgi); background: var(--zemin); }
.ust-hesap .harf {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--yazi); color: var(--yuzey);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
}
.ust-hesap .ad { font-size: 13px; }
.ust-hesap .rol {
  font-family: var(--f-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--soluk); display: block; line-height: 1.1;
}
.cikis {
  font-family: var(--f-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--cizgi); background: transparent; color: var(--soluk);
  padding: 7px 10px;
  transition: background .12s, color .12s, border-color .12s;
}
.cikis:hover { background: var(--yazi); color: var(--yuzey); border-color: var(--yazi); }

/* ---------------------------------------------------------- 5. YAN MENÜ */
.yan {
  width: var(--yan-genislik);
  top: var(--ust-yukseklik);
  background: var(--yuzey);
  border-right: 1px solid var(--cizgi);
  padding: 6px 0 24px;
}

/* Bölüm başlığı — 18 maddelik düz liste okunmuyordu; gruplar bakışta ayırır. */
.yan-grup {
  font-family: var(--f-mono);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--soluk);
  padding: 16px 16px 6px;
  display: block;
}
.yan-grup:first-child { padding-top: 10px; }

.yan a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 16px;
  font-size: 13.5px; color: var(--soluk);
  border: 0; margin: 0;
  transition: color .12s, background .12s;
}
.yan a svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.yan a::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: transparent;
  transition: background .12s;
}
.yan a:hover { background: var(--zemin); color: var(--yazi); }
.yan a:hover::before { background: var(--cizgi-koyu); }
.yan a.aktif { background: var(--zemin); color: var(--yazi); font-weight: 600; }
.yan a.aktif::before { background: var(--ana); }
.yan a.aktif svg { opacity: 1; color: var(--ana); }

/* Menüdeki sayaç rozeti (uyarı vb.) */
.yan .sayac {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 10px;
  background: var(--rz-kirmizi-z); color: var(--rz-kirmizi-y);
  padding: 1px 5px; border: 1px solid var(--rz-kirmizi-y);
}

/* ------------------------------------------------------------ 6. İÇERİK */
.icerik {
  margin-left: var(--yan-genislik);
  padding: 20px 22px 60px;
  max-width: 1560px;
}

.sayfa-bas {
  border-bottom: 1px solid var(--cizgi);
  padding-bottom: 14px; margin-bottom: 18px;
  align-items: flex-end;
}
.sayfa-bas h1 { font-size: 23px; }
.sayfa-bas p { color: var(--soluk); font-size: 13.5px; margin-top: 4px; }

/* --------------------------------------------------------------- 7. KART */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: none;
  padding: 0;
  margin-bottom: 14px;
  transition: border-color .12s;
}
.kart:hover { border-color: var(--cizgi-koyu); }
.kart > h2 {
  font-family: var(--f-mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--soluk);
  padding: 11px 14px;
  margin: 0;
  border-bottom: 1px solid var(--cizgi);
  background: var(--zemin);
}
/* Kart gövdesi: h2'den sonraki her şey. Eski CSS padding'i kartın kendisine
   veriyordu; başlık şeridi tam genişlik olsun diye ayrıldı. */
.kart > *:not(h2) { padding-left: 14px; padding-right: 14px; }
.kart > *:not(h2):first-child { padding-top: 14px; }
.kart > *:not(h2):last-child { padding-bottom: 14px; }
.kart > .tablo-sar { padding: 0; }
.kart > .tablo-sar table { margin: 0; }

/* ---------------------------------------------------------------- 8. KPI */
.kpi-izgara, .kutular { gap: 0; border: 1px solid var(--cizgi); background: var(--cizgi); }
.kpi-izgara { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px)  { .kpi-izgara { grid-template-columns: repeat(4, 1fr); } }

.kpi {
  position: relative;
  background: var(--yuzey);
  border: 0;
  padding: 13px 14px 14px;
  transition: background .12s;
  overflow: hidden;
}
.kpi::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: transparent; transition: background .12s;
}
a.kpi:hover { background: var(--zemin); }
a.kpi:hover::after { background: var(--ana); }

.kpi-etiket {
  font-family: var(--f-mono);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--soluk);
}
.kpi-sayi { font-size: 30px; font-weight: 500; line-height: 1.1; margin: 6px 0 2px; }
.kpi-alt, .kpi-satir { font-size: 12px; color: var(--soluk); }
.sparkline { margin-top: 8px; opacity: .9; }

.degisim {
  font-family: var(--f-mono); font-size: 11px;
  padding: 0; background: none; border: 0;
}
.degisim.artis { color: var(--yesil); }
.degisim.dusus { color: var(--kirmizi); }

/* --------------------------------------------------------------- 9. TABLO */
.tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tablo th {
  font-family: var(--f-mono);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--soluk); font-weight: 500;
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--cizgi);
  background: var(--zemin);
  position: sticky; top: 0; z-index: 2;
}
.tablo td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tbody tr { transition: background .1s; }
.tablo tbody tr:hover { background: var(--satir-vurgu); }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo td.sayi, .tablo td.rakam { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tablo tr.pasif { opacity: .45; }
.tablo td.islem { text-align: right; white-space: nowrap; }
.tablo-sar { overflow-x: auto; }

.host-ad { font-weight: 500; }
.host-alt { font-size: 11.5px; color: var(--soluk); margin-top: 1px; }

/* Satır içi tek düğmelik formlar yan yana dursun. */
.satirici { display: inline-block; margin-left: 4px; }
.satirici select {
  font-family: var(--f-mono); font-size: 11px;
  padding: 4px 6px; height: auto; min-height: 0;
  border: 1px solid var(--cizgi); background: var(--yuzey);
}

/* ------------------------------------------------------------ 10. DÜĞME */
.btn {
  font-family: var(--f-mono);
  font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em;
  padding: 9px 14px;
  background: var(--yazi); color: var(--yuzey);
  border: 1px solid var(--yazi);
  box-shadow: none;
  transition: background .12s, color .12s, border-color .12s;
}
.btn:hover { background: transparent; color: var(--yazi); }
.btn:active { transform: translateY(1px); }

.btn.sessiz {
  background: transparent; color: var(--yazi); border-color: var(--cizgi);
}
.btn.sessiz:hover { background: var(--yazi); color: var(--yuzey); border-color: var(--yazi); }

.btn.ince { padding: 7px 12px; font-size: 11px; }
.btn.mini { padding: 4px 8px; font-size: 10px; letter-spacing: .07em; }

.btn.tehlike { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.btn.tehlike:hover { background: transparent; color: var(--kirmizi); }

a.bag, .bag {
  color: var(--ana); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .12s;
}
a.bag:hover, .bag:hover { border-bottom-color: var(--ana); }

/* -------------------------------------------------------------- 11. FORM */
label {
  font-family: var(--f-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--soluk); display: block; margin-bottom: 5px;
}
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], input[type=search], input:not([type]),
select, textarea {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  color: var(--yazi);
  font-family: var(--f-govde); font-size: 14px;
  padding: 9px 11px;
  transition: border-color .12s, background .12s;
  width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: var(--cizgi-koyu); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ana);
  box-shadow: inset 0 0 0 1px var(--ana);
}

.form-izgara { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .form-izgara { grid-template-columns: 1fr 1fr; } }
.form-izgara .form-tam { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }

.secim-satir { display: flex; flex-wrap: wrap; gap: 18px; }
.secim { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.secim input { width: 16px; height: 16px; margin: 0; accent-color: var(--ana); }
.secim span {
  font-family: var(--f-govde); font-size: 13.5px;
  text-transform: none; letter-spacing: 0; color: var(--yazi);
}

.satir-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.satir-form input { width: auto; flex: 1 1 200px; }

/* ------------------------------------------------------------ 12. ROZET */
.rozet {
  font-family: var(--f-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  padding: 3px 7px; border: 1px solid currentColor; background: transparent;
  display: inline-block; line-height: 1.4;
}
.r-yesil   { color: var(--rz-yesil-y);   background: var(--rz-yesil-z); }
.r-sari    { color: var(--rz-sari-y);    background: var(--rz-sari-z); }
.r-kirmizi { color: var(--rz-kirmizi-y); background: var(--rz-kirmizi-z); }
.r-mavi    { color: var(--rz-mavi-y);    background: var(--rz-mavi-z); }
.r-mor     { color: var(--rz-mor-y);     background: var(--rz-mor-z); }
.r-gri     { color: var(--soluk);        background: var(--yuzey2); }

/* --------------------------------------------------- 13. BİLDİRİM BLOKLARI */
.basari, .hata {
  border-left: 3px solid; padding: 11px 14px; margin-bottom: 14px;
  font-size: 13.5px;
}
.basari { background: var(--basari-z); border-color: var(--basari-y); color: var(--basari-y); }
.hata   { background: var(--hata-z);   border-color: var(--hata-y);   color: var(--hata-y); }

/* -------------------------------------------------------- 14. SAYFA REHBERİ */
/* Eskiden ekranın üçte birini kaplıyordu; artık varsayılan KAPALI ve
   tek satırlık bir şerit. Bilgi duruyor, yeri kaplamıyor. */
.rehber {
  border: 1px solid var(--cizgi); background: var(--yuzey);
  margin-bottom: 14px;
}
.rehber summary {
  padding: 9px 14px; font-size: 12.5px; color: var(--soluk);
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  transition: background .12s, color .12s;
}
.rehber summary:hover { background: var(--zemin); color: var(--yazi); }
.rehber summary b { font-weight: 500; font-size: 12.5px; }
.rehber-ac {
  margin-left: auto; font-family: var(--f-mono);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
}
.rehber-govde { padding: 4px 14px 14px; border-top: 1px solid var(--cizgi); font-size: 13.5px; }
.rehber-adim-bas {
  font-family: var(--f-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .13em; color: var(--soluk);
  margin: 14px 0 6px;
}
.rehber-ipucu { background: var(--zemin); border-left: 3px solid var(--cizgi-koyu); padding: 9px 12px; }

/* --------------------------------------------------------- 15. SSL ÖMÜR */
/* Kalan gün görsel ölçekte: 90 gün tam çubuk. Sayıyı okumadan da anlaşılır. */
.omur { height: 6px; background: var(--yuzey2); border: 1px solid var(--cizgi); min-width: 80px; }
.omur i { display: block; height: 100%; background: var(--soluk); }
.omur.yesil i   { background: var(--yesil); }
.omur.sari i    { background: var(--turuncu); }
.omur.kirmizi i { background: var(--kirmizi); }
.omur-h { width: 130px; }

/* ------------------------------------------------------------ 16. HESABIM */
.hesap-kimlik {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  padding: 18px; margin-bottom: 14px;
}
.hesap-harf {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  background: var(--yazi); color: var(--yuzey);
  font-family: var(--f-mono); font-size: 22px; font-weight: 500;
}
.hesap-kimlik h3 { font-size: 18px; margin: 0; }
.hesap-kimlik p { margin: 2px 0 0; font-size: 13px; color: var(--soluk); }
.hesap-rozetler { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; }

.kunye-liste { margin: 0; }
.kunye-liste > div {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--cizgi);
}
.kunye-liste > div:last-child { border-bottom: 0; }
.kunye-liste dt {
  font-family: var(--f-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--soluk);
}
.kunye-liste dd { margin: 0; font-size: 13.5px; }

.zaman-akis { display: flex; flex-direction: column; }
.akis-satir {
  display: grid; grid-template-columns: 92px 132px 1fr; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--cizgi); font-size: 12.5px;
  transition: background .1s;
}
.akis-satir:hover { background: var(--satir-vurgu); }
.akis-satir:last-child { border-bottom: 0; }
.akis-zaman { color: var(--soluk); font-size: 11px; }
.akis-eylem { font-weight: 500; }

.ikili { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1080px) { .ikili { grid-template-columns: 1.25fr 1fr; } }

/* ---------------------------------------------------- 17. KOMUT PALETİ vb. */
.palet-kutu, .palet {
  border: 1px solid var(--yazi);
  box-shadow: var(--golge-buyuk);
  background: var(--yuzey);
}

/* -------------------------------------------------------------- 18. ALT */
.alt {
  background: var(--yuzey);
  border-top: 1px solid var(--cizgi);
  backdrop-filter: none;
}
.alt a { color: var(--soluk); font-size: 10.5px; transition: color .12s, background .12s; }
.alt a:hover { color: var(--yazi); background: var(--zemin); }
.alt a.aktif { color: var(--ana); }

/* ------------------------------------------------------- 19. GİRİŞ EKRANI */
.giris-sar { background: var(--zemin); }
.giris-kart, .giris-kutu {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: none;
}

/* ------------------------------------------------------------ 20. ODAK */
/* Klavyeyle gezen için her yerde görünür odak — hover kadar önemli. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ana);
  outline-offset: 1px;
}

/* --------------------------------------------------------- 21. DAR EKRAN */
@media (max-width: 900px) {
  .icerik { margin-left: 0; padding: 16px 14px 84px; }
  .ust-hesap .ad, .ust-hesap .rol { display: none; }
  .kpi-izgara { grid-template-columns: repeat(2, 1fr); }
  .akis-satir { grid-template-columns: 1fr; gap: 2px; }
  .kunye-liste > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------- 22. İNCE AYARLAR
   Ekran görüntüsü üzerinden görülen sorunların düzeltmeleri. */

/* KPI ızgarası: kartlar arası ayrım çizgisi. gap:0 iken kutular birbirine
   yapışıp tek blok gibi görünüyordu; 1px boşluk ızgaranın zemin rengini
   (--cizgi) gösterir ve kılcal çizgi olur. */
.kpi-izgara, .kutular { gap: 1px; }

/* Sparkline kartın dışına taşıyordu (stil2'de negatif alt boşluğu var). */
.kpi .sparkline { display: block; margin: 8px 0 0; }

/* Form altındaki düğme satırı: düğme kartı baştan sona kaplamasın. */
.form-izgara .form-tam .btn,
.satir-form .btn { flex: 0 0 auto; width: auto; }

/* Tablo satırındaki ikincil eylemler sessiz kalsın, gözü yormasın. */
.tablo td.islem .btn { background: transparent; color: var(--soluk); border-color: var(--cizgi); }
.tablo td.islem .btn:hover { background: var(--yazi); color: var(--yuzey); border-color: var(--yazi); }

/* Seray sohbet balonu da kare — kendi stilini sayfaya enjekte ediyor. */
#seray-dugme button, #seray-pencere, #seray-akis .b,
#seray-giris input, #seray-giris button, #seray-oneri button {
  border-radius: 0 !important;
}
#seray-dugme button { border: 1px solid var(--yazi) !important; }

/* Menüdeki uyarı sayacı hizası */
.yan a .sayac { line-height: 1.5; }

/* --------------------------------------------------- 23. DURUM ŞERİDİ
   Panelin en üstündeki kuşbakışı satırı: her alt sistem tek kutuda,
   durum noktasıyla. "Her şey yolunda mı?" sorusunun tek bakışlık cevabı. */
.durum-serit {
  display: grid; gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 14px;
}
@media (min-width: 760px)  { .durum-serit { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .durum-serit { grid-template-columns: repeat(6, 1fr); } }

.ds-oge {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--yuzey); padding: 11px 12px;
  text-decoration: none; color: var(--yazi);
  transition: background .12s;
}
a.ds-oge:hover { background: var(--zemin); }

.ds-nokta {
  width: 8px; height: 8px; flex: none; margin-top: 5px;
  background: var(--soluk);
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow .12s;
}
.ds-iyi    .ds-nokta { background: var(--yesil); }
.ds-uyari  .ds-nokta { background: var(--turuncu); }
.ds-kritik .ds-nokta { background: var(--kirmizi); }
a.ds-oge:hover .ds-nokta { box-shadow: 0 0 0 3px var(--yuzey2); }

.ds-govde { display: flex; flex-direction: column; min-width: 0; }
.ds-ad {
  font-family: var(--f-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .13em; color: var(--soluk);
}
.ds-deger {
  font-size: 14.5px; font-weight: 500; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-kritik .ds-deger { color: var(--kirmizi); }
.ds-uyari  .ds-deger { color: var(--turuncu); }
.ds-not { font-size: 11.5px; color: var(--soluk); margin-top: 1px; }

/* KPI ızgarasında boş kalan hücre gri bir blok gibi duruyordu (ızgaranın
   zemini çizgi rengiydi). Zemin beyaz, ayrım çizgisi kartların kendi
   kenarlığı: boş hücre artık boş yüzey olarak okunuyor. */
.kpi-izgara, .kutular { gap: 0; background: var(--yuzey); }
.kpi { border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }

/* --------------------------------------------------- 24. GİRİŞ EKRANI
   Bölünmüş ekran: solda koyu kimlik bloğu, sağda form. Fotoğraf yok —
   stok görsel bu ölçekte kalıp gibi duruyor; iş tipografiyle yapılıyor. */
.giris-sar { padding: 0; display: block; background: var(--zemin); }

.giris-bol { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 940px) { .giris-bol { grid-template-columns: 1.05fr 1fr; } }

.giris-sol {
  background: #14181C; color: #EDEFF1;
  padding: 42px 44px;
  display: flex; flex-direction: column;
  /* kabinet rayı dokusu — Sersistem'in işi metal kabinet */
  background-image: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 46px);
}
.gs-ust { display: flex; align-items: center; gap: 11px; }
.gs-logo {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: #EDEFF1; color: #14181C;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
}
.gs-marka { font-size: 14.5px; }
.gs-marka b { font-weight: 600; }

.gs-orta { margin: auto 0; padding: 40px 0; max-width: 30ch; }
.gs-orta h2 {
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1;
  letter-spacing: -0.03em; font-weight: 600; margin: 0;
}
.gs-orta p { margin: 18px 0 0; color: #A6AFB7; font-size: 15px; max-width: 46ch; }

.gs-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2A2F34; }
.gs-liste li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid #2A2F34;
  font-size: 13.5px; color: #C6CDD3;
}
.gs-liste span {
  font-family: var(--f-mono); font-size: 11px; color: #6E777F; flex: none;
}
.gs-alt {
  margin-top: 26px;
  font-family: var(--f-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .16em; color: #6E777F;
}

.giris-sag { display: grid; place-items: center; padding: 40px 24px; }
.giris-kutu {
  width: 100%; max-width: 344px;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.giris-kutu h1 { font-size: 27px; margin: 0; }
.giris-alt { color: var(--soluk); margin: 6px 0 26px; font-size: 14px; }
.giris-kutu label { margin-top: 16px; }
.giris-btn { width: 100%; margin-top: 26px; padding: 12px; }
.giris-tema {
  display: block; text-align: center; margin-top: 20px;
  font-family: var(--f-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--soluk); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  width: fit-content; margin-left: auto; margin-right: auto;
}
.giris-tema:hover { color: var(--yazi); border-bottom-color: var(--cizgi-koyu); }

/* Koyu temada sol blok zaten koyu; sağ taraf da uyumlansın. */
html[data-tema="koyu"] .giris-sol { background: #0A0D0F; }

/* Alt menüde (mobil) sayaç ikinci satıra kayıyordu; oradaki zil rozeti
   zaten sayıyı gösteriyor. */
.alt .sayac { display: none; }