/* =====================================================
   MES Üretim Sistemi — Ana Tasarım Sistemi
   ===================================================== */

/* --- CSS Değişkenleri --- */
:root {
  /* Renkler */
  --renk-arkaplan:       #0a1628;
  --renk-panel:          #0f2040;
  --renk-panel-acik:     #142850;
  --renk-kenar:          #1e3a5f;
  --renk-kenar-acik:     #2d5a8e;
  --renk-birincil:       #2d7dd2;
  --renk-birincil-hover: #1a6bc0;
  --renk-metin:          #e8edf2;
  --renk-metin-ikincil:  #8899aa;
  --renk-basari:         #27ae60;
  --renk-uyari:          #f39c12;
  --renk-hata:           #e74c3c;
  --renk-bilgi:          #2d7dd2;

  /* Durum badge renkleri */
  --renk-dizgide:        #2d7dd2;
  --renk-tamirde:        #e74c3c;
  --renk-depoda:         #27ae60;
  --renk-beklemede:      #f39c12;
  --renk-arge:           #8e44ad;

  /* Tipografi */
  --font-ana:            'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-boyut-kucuk:    12px;
  --font-boyut-normal:   14px;
  --font-boyut-orta:     16px;
  --font-boyut-buyuk:    20px;
  --font-boyut-baslik:   24px;

  /* Diğer */
  --gecis:               all 0.2s ease;
  --golge:               0 2px 8px rgba(0, 0, 0, 0.3);
  --golge-buyuk:         0 4px 16px rgba(0, 0, 0, 0.4);
  --kenar-radius:        6px;
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Ana Gövde --- */
body {
  font-family: var(--font-ana);
  font-size: var(--font-boyut-normal);
  color: var(--renk-metin);
  background-color: var(--renk-arkaplan);
  display: flex;
  min-height: 100vh;
}

/* =====================================================
   LAYOUT
   ===================================================== */

.ana-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}

/* --- Sol Menü --- */
.sol-menu {
  width: 220px;
  min-width: 220px;
  background: var(--renk-panel);
  border-right: 1px solid var(--renk-kenar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* --- İçerik Alanı --- */
.icerik-alani {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--renk-arkaplan);
}

/* =====================================================
   SOL MENÜ BİLEŞENLERİ
   ===================================================== */

.menu-logo {
  padding: 20px 16px;
  border-bottom: 1px solid var(--renk-kenar);
}

.logo-baslik {
  font-size: 13px;
  font-weight: 700;
  color: var(--renk-metin);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.logo-alt {
  font-size: 11px;
  color: var(--renk-metin-ikincil);
  margin-top: 2px;
}

.menu-bolum {
  padding: 8px 0;
}

.menu-bolum-baslik {
  font-size: 10px;
  color: var(--renk-metin-ikincil);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 16px 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--renk-metin-ikincil);
  cursor: pointer;
  border-left: 3px solid transparent;
  font-size: var(--font-boyut-normal);
  text-decoration: none;
  transition: var(--gecis);
}

.menu-item:hover {
  background: var(--renk-panel-acik);
  color: var(--renk-metin);
  border-left-color: var(--renk-kenar-acik);
}

.menu-item.aktif {
  background: var(--renk-panel-acik);
  color: var(--renk-birincil);
  border-left-color: var(--renk-birincil);
}

.menu-ikon {
  width: 18px;
  text-align: center;
  font-size: 16px;
}

.menu-alt {
  padding: 16px;
  border-top: 1px solid var(--renk-kenar);
  margin-top: auto;
}

/* =====================================================
   İÇERİK ALANI BİLEŞENLERİ
   ===================================================== */

.sayfa-baslik {
  font-size: var(--font-boyut-baslik);
  font-weight: 700;
  margin-bottom: 4px;
}

.sayfa-alt-baslik {
  font-size: var(--font-boyut-normal);
  color: var(--renk-metin-ikincil);
  margin-bottom: 24px;
}

.kart {
  background: var(--renk-panel);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kenar-radius);
  padding: 20px;
  box-shadow: var(--golge);
}

.kart-baslik {
  font-size: var(--font-boyut-orta);
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--renk-kenar);
}

/* Izgara Düzenleri */
.izgara-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.izgara-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.izgara-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* =====================================================
   BUTONLAR
   ===================================================== */

.buton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--kenar-radius);
  font-size: var(--font-boyut-normal);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: var(--gecis);
  text-decoration: none;
}

.buton-birincil {
  background: var(--renk-birincil);
  color: white;
}

.buton-birincil:hover {
  background: var(--renk-birincil-hover);
}

.buton-ikincil {
  background: transparent;
  color: var(--renk-metin-ikincil);
  border: 1px solid var(--renk-kenar);
}

.buton-ikincil:hover {
  background: var(--renk-panel-acik);
  color: var(--renk-metin);
}

.buton-tehlike {
  background: transparent;
  color: var(--renk-hata);
  border: 1px solid var(--renk-hata);
}

.buton-tehlike:hover {
  background: var(--renk-hata);
  color: white;
}

.buton-kucuk {
  padding: 5px 10px;
  font-size: var(--font-boyut-kucuk);
}

/* =====================================================
   TABLO
   ===================================================== */

.tablo-sarici {
  overflow-x: auto;
}

.tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-boyut-normal);
}

.tablo th {
  background: var(--renk-panel-acik);
  color: var(--renk-metin-ikincil);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--renk-kenar);
  font-size: var(--font-boyut-kucuk);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tablo td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--renk-kenar);
  color: var(--renk-metin);
}

.tablo tr:hover td {
  background: rgba(45, 122, 210, 0.05);
}

.tablo tr:last-child td {
  border-bottom: none;
}

/* =====================================================
   DURUM BADGE'LERİ
   ===================================================== */

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-dizgide   { background: rgba(45, 122, 210, 0.2); color: #2d7dd2; }
.badge-tamirde   { background: rgba(231, 76, 60, 0.2);  color: #e74c3c; }
.badge-depoda    { background: rgba(39, 174, 96, 0.2);  color: #27ae60; }
.badge-beklemede { background: rgba(243, 156, 18, 0.2); color: #f39c12; }
.badge-arge      { background: rgba(142, 68, 173, 0.2); color: #8e44ad; }
.badge-aktif     { background: rgba(39, 174, 96, 0.2);  color: #27ae60; }
.badge-pasif     { background: rgba(136, 153, 170, 0.2); color: #8899aa; }

/* =====================================================
   FORM ELEMANLARI
   ===================================================== */

.form-grup {
  margin-bottom: 16px;
}

.form-etiket {
  display: block;
  font-size: var(--font-boyut-kucuk);
  color: var(--renk-metin-ikincil);
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-girdi {
  width: 100%;
  padding: 8px 12px;
  background: var(--renk-arkaplan);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kenar-radius);
  color: var(--renk-metin);
  font-size: var(--font-boyut-normal);
  box-sizing: border-box;
  transition: var(--gecis);
  font-family: var(--font-ana);
}

.form-girdi:focus {
  border-color: var(--renk-birincil);
  outline: none;
}

.form-secim {
  width: 100%;
  padding: 8px 12px;
  background: var(--renk-arkaplan);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kenar-radius);
  color: var(--renk-metin);
  font-size: var(--font-boyut-normal);
  box-sizing: border-box;
  transition: var(--gecis);
  appearance: none;
  font-family: var(--font-ana);
}

.form-secim:focus {
  border-color: var(--renk-birincil);
  outline: none;
}

/* =====================================================
   İSTATİSTİK KARTLARI
   ===================================================== */

.stat-kart {
  background: var(--renk-panel);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kenar-radius);
  padding: 20px;
  box-shadow: var(--golge);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-sayi {
  font-size: 32px;
  font-weight: 700;
  color: var(--renk-metin);
  line-height: 1;
}

.stat-etiket {
  font-size: var(--font-boyut-kucuk);
  color: var(--renk-metin-ikincil);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-alt {
  font-size: var(--font-boyut-kucuk);
  color: var(--renk-metin-ikincil);
  margin-top: 4px;
}

/* =====================================================
   UYARI BANNER'LARI
   ===================================================== */

.uyari {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--kenar-radius);
  font-size: var(--font-boyut-normal);
  margin-bottom: 16px;
}

.uyari-hata {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

.uyari-uyari {
  background: rgba(243, 156, 18, 0.1);
  border: 1px solid rgba(243, 156, 18, 0.3);
  color: #f39c12;
}

.uyari-bilgi {
  background: rgba(45, 122, 210, 0.1);
  border: 1px solid rgba(45, 122, 210, 0.3);
  color: #2d7dd2;
}

/* =====================================================
   MODAL
   ===================================================== */

.modal-arkaplan {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-arkaplan.acik {
  display: flex;
}

.modal-kutu {
  background: var(--renk-panel);
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kenar-radius);
  padding: 24px;
  min-width: 400px;
  max-width: 600px;
  width: 90%;
}

.modal-baslik {
  font-size: var(--font-boyut-orta);
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--renk-kenar);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-kapat {
  background: none;
  border: none;
  color: var(--renk-metin-ikincil);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.modal-kapat:hover {
  color: var(--renk-metin);
}

.modal-alt {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--renk-kenar);
}

/* =====================================================
   PAGINATION
   ===================================================== */

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
}

.pagination-buton {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--renk-kenar);
  border-radius: var(--kenar-radius);
  color: var(--renk-metin-ikincil);
  cursor: pointer;
  font-size: var(--font-boyut-kucuk);
  transition: var(--gecis);
}

.pagination-buton:hover {
  background: var(--renk-panel-acik);
  color: var(--renk-metin);
}

.pagination-buton.aktif {
  background: var(--renk-birincil);
  border-color: var(--renk-birincil);
  color: white;
}

/* =====================================================
   YÜKLENİYOR ANİMASYONU
   ===================================================== */

.yukluyor {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--renk-kenar);
  border-top-color: var(--renk-birincil);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}