/* ============================================================
   STOK SaaS – GLOBAL TEMA  |  v1.0
   Renk Paleti: Lacivert (#1E3A5F) + Altın (#C9A84C)
   Tüm sayfalar bu dosyayı kullanır — asla ayrı CSS yazma!
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── 1. TASARIM DEĞİŞKENLERİ ── */
:root {
  /* Ana Renkler */
  --lacivert-en-koyu : #060E1B;
  --lacivert-koyu    : #0F1F36;
  --lacivert         : #1E3A5F;
  --lacivert-orta    : #2A4F7C;
  --lacivert-acik    : #3A6494;
  --lacivert-pastel  : #EBF1F9;

  /* Altın Renkler */
  --altin-koyu       : #9A7520;
  --altin            : #C9A84C;
  --altin-orta       : #D4B96A;
  --altin-acik       : #F0D890;
  --altin-pastel     : #FDF8EC;

  /* Nötr */
  --beyaz            : #FFFFFF;
  --arkaplan         : #F0F4F9;
  --card-bg          : #FFFFFF;
  --sinir            : #D8E2EF;
  --sinir-koyu       : #B8C8DC;
  --gri-acik         : #F7FAFC;
  --gri              : #E2E8F0;
  --gri-orta         : #94A3B8;
  --gri-koyu         : #64748B;

  /* Metin */
  --metin-ana        : #0F1F36;
  --metin-ikincil    : #4A5568;
  --metin-ucuncul    : #718096;
  --metin-pasif      : #A0AEC0;

  /* Durum Renkleri */
  --basari           : #166534;
  --basari-bg        : #DCFCE7;
  --basari-sinir     : #86EFAC;
  --uyari            : #92400E;
  --uyari-bg         : #FEF3C7;
  --uyari-sinir      : #FDE68A;
  --tehlike          : #991B1B;
  --tehlike-bg       : #FEE2E2;
  --tehlike-sinir    : #FCA5A5;
  --bilgi            : #1E40AF;
  --bilgi-bg         : #DBEAFE;
  --bilgi-sinir      : #93C5FD;

  /* Boyutlar */
  --sidebar-genislik : 260px;
  --header-yukseklik : 64px;
  --radius-sm        : 6px;
  --radius           : 10px;
  --radius-lg        : 14px;
  --radius-xl        : 20px;
  --radius-tam       : 9999px;

  /* Gölgeler */
  --golge-sm : 0 1px 3px rgba(15,31,54,.08), 0 1px 2px rgba(15,31,54,.04);
  --golge    : 0 4px 12px rgba(15,31,54,.10), 0 2px 4px rgba(15,31,54,.06);
  --golge-lg : 0 10px 30px rgba(15,31,54,.14), 0 4px 10px rgba(15,31,54,.08);
  --golge-xl : 0 20px 60px rgba(15,31,54,.18), 0 8px 20px rgba(15,31,54,.10);

  /* Geçişler */
  --gecis    : all .2s cubic-bezier(.4,0,.2,1);
  --gecis-lg : all .35s cubic-bezier(.4,0,.2,1);
}

/* ── 2. RESET & TEMEL ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:.9rem;
  line-height:1.6;
  color:var(--metin-ana);
  background:var(--arkaplan);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; }
input, select, textarea { font-family:inherit; }
ul, ol { list-style:none; }

/* ── 3. LAYOUT ── */
.uygulama {
  display:flex;
  min-height:100vh;
}

/* ── 4. SIDEBAR ── */
.sidebar {
  width:var(--sidebar-genislik);
  min-width:var(--sidebar-genislik);
  background:var(--lacivert-koyu);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0;
  height:100vh;
  z-index:100;
  transition:var(--gecis-lg);
  overflow:hidden;
}

/* Logo Alanı */
.sidebar-logo {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 20px;
  height:var(--header-yukseklik);
  border-bottom:1px solid rgba(201,168,76,.15);
  flex-shrink:0;
}
.sidebar-logo-icon {
  width:36px; height:36px;
  background:linear-gradient(135deg, var(--altin), var(--altin-koyu));
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sidebar-logo-icon i { color:var(--lacivert-koyu); font-size:16px; }
.sidebar-logo-metin { font-size:15px; font-weight:700; color:var(--beyaz); letter-spacing:.3px; line-height:1.2; }
.sidebar-logo-metin small { display:block; font-size:9px; font-weight:400; color:var(--altin-orta); text-transform:uppercase; letter-spacing:.1em; }

/* Tenant Seçici */
.sidebar-tenant {
  margin:12px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,168,76,.15);
  border-radius:var(--radius);
  padding:10px 14px;
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  transition:var(--gecis);
}
.sidebar-tenant:hover { background:rgba(255,255,255,.1); }
.sidebar-tenant-ikon {
  width:30px; height:30px;
  background:linear-gradient(135deg, var(--lacivert-orta), var(--lacivert));
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:12px; font-weight:700; color:var(--altin);
}
.sidebar-tenant-bilgi { flex:1; min-width:0; }
.sidebar-tenant-adi { font-size:12px; font-weight:600; color:var(--beyaz); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-tenant-plan { font-size:10px; color:var(--altin-orta); }
.sidebar-tenant i { color:var(--gri-orta); font-size:11px; }

/* Menü Alanı */
.sidebar-menu {
  flex:1;
  overflow-y:auto;
  padding:8px 0 20px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
.sidebar-menu::-webkit-scrollbar { width:4px; }
.sidebar-menu::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

.menu-baslik {
  padding:16px 20px 6px;
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.3);
}

.menu-link {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 16px 10px 20px;
  color:rgba(255,255,255,.65);
  font-size:13px;
  font-weight:500;
  border-left:3px solid transparent;
  transition:var(--gecis);
  position:relative;
}
.menu-link:hover {
  color:var(--beyaz);
  background:rgba(255,255,255,.06);
  border-left-color:rgba(201,168,76,.4);
}
.menu-link.aktif {
  color:var(--altin-acik);
  background:rgba(201,168,76,.12);
  border-left-color:var(--altin);
  font-weight:600;
}
.menu-link .menu-ikon {
  width:18px;
  text-align:center;
  font-size:14px;
  flex-shrink:0;
}
.menu-link .menu-rozet {
  margin-left:auto;
  background:var(--tehlike);
  color:#fff;
  font-size:9px;
  font-weight:700;
  padding:1px 6px;
  border-radius:var(--radius-tam);
}
.menu-link .menu-rozet.yesil { background:var(--basari); }

/* Dropdown Menü */
.menu-dropdown { overflow:hidden; }
.menu-dropdown-baslik {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 16px 10px 20px;
  color:rgba(255,255,255,.65);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:var(--gecis);
  user-select:none;
}
.menu-dropdown-baslik:hover { color:var(--beyaz); background:rgba(255,255,255,.06); }
.menu-dropdown-baslik .menu-ikon { width:18px; text-align:center; font-size:14px; flex-shrink:0; }
.menu-dropdown-baslik .ok { margin-left:auto; font-size:10px; transition:var(--gecis); }
.menu-dropdown.acik .menu-dropdown-baslik .ok { transform:rotate(180deg); }
.menu-dropdown.acik .menu-dropdown-baslik { color:var(--altin-orta); }
.menu-dropdown-icerik {
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.menu-dropdown.acik .menu-dropdown-icerik { max-height:300px; }
.menu-alt-link {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 20px 8px 52px;
  color:rgba(255,255,255,.5);
  font-size:12.5px;
  font-weight:400;
  transition:var(--gecis);
  border-left:3px solid transparent;
}
.menu-alt-link::before { content:''; width:5px; height:5px; background:rgba(255,255,255,.2); border-radius:50%; flex-shrink:0; }
.menu-alt-link:hover { color:rgba(255,255,255,.85); background:rgba(255,255,255,.04); }
.menu-alt-link.aktif { color:var(--altin-acik); font-weight:600; border-left-color:var(--altin); }
.menu-alt-link.aktif::before { background:var(--altin); }

/* Sidebar Alt */
.sidebar-alt {
  padding:14px;
  border-top:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.sidebar-kullanici {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--gecis);
}
.sidebar-kullanici:hover { background:rgba(255,255,255,.06); }
.kullanici-avatar {
  width:34px; height:34px;
  background:linear-gradient(135deg, var(--altin), var(--altin-koyu));
  border-radius:var(--radius-tam);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  color:var(--lacivert-koyu);
  flex-shrink:0;
}
.kullanici-bilgi { flex:1; min-width:0; }
.kullanici-ad { font-size:12px; font-weight:600; color:var(--beyaz); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kullanici-rol { font-size:10px; color:var(--gri-orta); }
.sidebar-kullanici .cikis-btn { color:rgba(255,255,255,.3); font-size:13px; transition:var(--gecis); }
.sidebar-kullanici:hover .cikis-btn { color:var(--tehlike-bg); }

/* ── 5. ANA IÇERIK ── */
.ana-icerik {
  margin-left:var(--sidebar-genislik);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ── 6. ÜST BAR ── */
.ust-bar {
  height:var(--header-yukseklik);
  background:var(--beyaz);
  border-bottom:1px solid var(--sinir);
  display:flex;
  align-items:center;
  padding:0 28px;
  gap:16px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:var(--golge-sm);
}
.ust-bar-breadcrumb {
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
}
.breadcrumb-item { font-size:13px; color:var(--gri-koyu); }
.breadcrumb-item a { color:var(--lacivert-orta); font-weight:500; }
.breadcrumb-item a:hover { color:var(--lacivert); }
.breadcrumb-item.aktif { color:var(--metin-ana); font-weight:600; }
.breadcrumb-ayrac { color:var(--gri-orta); font-size:11px; }

.ust-bar-aksiyonlar { display:flex; align-items:center; gap:10px; }

/* Arama */
.global-arama {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--arkaplan);
  border:1px solid var(--sinir);
  border-radius:var(--radius-tam);
  padding:0 14px;
  height:36px;
  width:220px;
  transition:var(--gecis);
}
.global-arama:focus-within {
  border-color:var(--lacivert-orta);
  background:var(--beyaz);
  box-shadow:0 0 0 3px rgba(30,58,95,.08);
}
.global-arama i { color:var(--gri-orta); font-size:13px; }
.global-arama input { border:none; background:none; outline:none; font-size:13px; color:var(--metin-ana); width:100%; }
.global-arama input::placeholder { color:var(--metin-pasif); }

/* İkon Buton */
.ikon-btn {
  width:36px; height:36px;
  border:1px solid var(--sinir);
  border-radius:var(--radius);
  background:var(--beyaz);
  display:flex; align-items:center; justify-content:center;
  color:var(--gri-koyu);
  font-size:14px;
  transition:var(--gecis);
  position:relative;
  cursor:pointer;
}
.ikon-btn:hover { border-color:var(--lacivert-orta); color:var(--lacivert); background:var(--lacivert-pastel); }
.ikon-btn .rozet {
  position:absolute;
  top:-4px; right:-4px;
  width:16px; height:16px;
  background:var(--tehlike);
  color:#fff;
  font-size:8px; font-weight:700;
  border-radius:var(--radius-tam);
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--beyaz);
}

/* ── 7. SAYFA İÇERİĞİ ── */
.sayfa-icerik {
  flex:1;
  padding:28px;
  overflow-x:hidden;
}

/* Sayfa Başlığı */
.sayfa-baslik {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}
.sayfa-baslik-sol h1 {
  font-size:22px;
  font-weight:700;
  color:var(--metin-ana);
  letter-spacing:-.3px;
}
.sayfa-baslik-sol p { font-size:13px; color:var(--metin-ucuncul); margin-top:2px; }
.sayfa-baslik-sag { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ── 8. KARTLAR ── */
.kart {
  background:var(--card-bg);
  border:1px solid var(--sinir);
  border-radius:var(--radius-lg);
  box-shadow:var(--golge-sm);
  overflow:hidden;
}
.kart-ust {
  padding:18px 22px;
  border-bottom:1px solid var(--sinir);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.kart-baslik {
  font-size:14px;
  font-weight:700;
  color:var(--metin-ana);
  display:flex;
  align-items:center;
  gap:8px;
}
.kart-baslik i { color:var(--lacivert-orta); font-size:15px; }
.kart-icerik { padding:22px; }
.kart-alt {
  padding:14px 22px;
  border-top:1px solid var(--sinir);
  background:var(--arkaplan);
}

/* İstatistik Kartı */
.stat-kart {
  background:var(--card-bg);
  border:1px solid var(--sinir);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  box-shadow:var(--golge-sm);
  display:flex;
  align-items:center;
  gap:16px;
  transition:var(--gecis);
  position:relative;
  overflow:hidden;
}
.stat-kart::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:3px;
  background:var(--stat-renk, var(--lacivert));
}
.stat-kart:hover { box-shadow:var(--golge); transform:translateY(-1px); }
.stat-kart-ikon {
  width:48px; height:48px;
  background:var(--stat-bg, var(--lacivert-pastel));
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.stat-kart-ikon i { font-size:20px; color:var(--stat-renk, var(--lacivert)); }
.stat-kart-bilgi { flex:1; }
.stat-kart-deger { font-size:22px; font-weight:800; color:var(--metin-ana); letter-spacing:-.5px; }
.stat-kart-etiket { font-size:12px; color:var(--gri-koyu); font-weight:500; margin-top:1px; }
.stat-kart-degisim {
  font-size:11px;
  font-weight:600;
  padding:2px 7px;
  border-radius:var(--radius-tam);
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-top:4px;
}
.degisim-yukari { background:var(--basari-bg); color:var(--basari); }
.degisim-asagi  { background:var(--tehlike-bg); color:var(--tehlike); }

/* ── 9. GRID SİSTEMİ ── */
.grid-2   { display:grid; grid-template-columns:repeat(2, 1fr);    gap:20px; }
.grid-3   { display:grid; grid-template-columns:repeat(3, 1fr);    gap:20px; }
.grid-4   { display:grid; grid-template-columns:repeat(4, 1fr);    gap:20px; }
.grid-2-1 { display:grid; grid-template-columns:2fr 1fr;           gap:20px; }
.grid-1-2 { display:grid; grid-template-columns:1fr 2fr;           gap:20px; }
.mb-0  { margin-bottom:0; }
.mb-6  { margin-bottom:6px; }
.mb-10 { margin-bottom:10px; }
.mb-16 { margin-bottom:16px; }
.mb-20 { margin-bottom:20px; }
.mb-24 { margin-bottom:24px; }
.gap-10 { gap:10px; }
.gap-16 { gap:16px; }
.flex { display:flex; }
.flex-1 { flex:1; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; }

/* ── 10. BUTONLAR ── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 18px;
  height:38px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:600;
  border:1.5px solid transparent;
  transition:var(--gecis);
  white-space:nowrap;
  cursor:pointer;
  line-height:1;
}
.btn i { font-size:13px; }

/* Ana Buton */
.btn-ana {
  background:var(--lacivert);
  color:var(--beyaz);
  border-color:var(--lacivert);
}
.btn-ana:hover { background:var(--lacivert-orta); border-color:var(--lacivert-orta); box-shadow:0 4px 12px rgba(30,58,95,.3); }

/* Altın Buton */
.btn-altin {
  background:var(--altin);
  color:var(--lacivert-koyu);
  border-color:var(--altin);
}
.btn-altin:hover { background:var(--altin-orta); border-color:var(--altin-orta); box-shadow:0 4px 12px rgba(201,168,76,.35); }

/* Kenar Çizgili */
.btn-sinirli {
  background:transparent;
  color:var(--lacivert);
  border-color:var(--lacivert);
}
.btn-sinirli:hover { background:var(--lacivert-pastel); }

/* Yeşil */
.btn-basari {
  background:#166534;
  color:#fff;
  border-color:#166534;
}
.btn-basari:hover { background:#15803d; }

/* Kırmızı */
.btn-tehlike {
  background:#991B1B;
  color:#fff;
  border-color:#991B1B;
}
.btn-tehlike:hover { background:#DC2626; }

/* Sarı / Uyarı */
.btn-uyari {
  background:#D97706;
  color:#fff;
  border-color:#D97706;
}
.btn-uyari:hover { background:#B45309; }

/* Gri */
.btn-gri {
  background:var(--gri);
  color:var(--metin-ikincil);
  border-color:var(--sinir);
}
.btn-gri:hover { background:var(--sinir); }

/* Boyutlar */
.btn-sm { height:32px; padding:0 14px; font-size:12px; border-radius:var(--radius-sm); }
.btn-lg { height:44px; padding:0 24px; font-size:14px; border-radius:var(--radius); }
.btn-blok { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* Yükleniyor */
.btn.yukleniyor { pointer-events:none; }
.btn.yukleniyor::after {
  content:'';
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:doner .7s linear infinite;
  margin-left:6px;
}

/* ── 11. FORMLAR ── */
.form-grup {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:16px;
}
.form-etiket {
  font-size:12.5px;
  font-weight:600;
  color:var(--metin-ikincil);
}
.form-etiket .zorunlu { color:var(--tehlike); margin-left:2px; }

.form-alani,
.form-secim,
.form-metin {
  width:100%;
  height:40px;
  padding:0 12px;
  background:var(--beyaz);
  border:1.5px solid var(--sinir);
  border-radius:var(--radius);
  font-size:13.5px;
  color:var(--metin-ana);
  outline:none;
  transition:var(--gecis);
  font-family:inherit;
}
.form-metin {
  height:auto;
  padding:10px 12px;
  resize:vertical;
  min-height:90px;
}
.form-secim { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7A8D' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:18px; padding-right:34px; cursor:pointer; }
.form-alani:focus,
.form-secim:focus,
.form-metin:focus {
  border-color:var(--lacivert-orta);
  box-shadow:0 0 0 3px rgba(30,58,95,.1);
}
.form-alani::placeholder, .form-metin::placeholder { color:var(--metin-pasif); }
.form-alani.hata, .form-secim.hata { border-color:var(--tehlike); }
.form-hata-mesaji { font-size:11.5px; color:var(--tehlike); }
.form-yardim-metni { font-size:11.5px; color:var(--metin-ucuncul); }

/* Input Ön/Son Ek */
.input-grup { display:flex; }
.input-on-ek, .input-son-ek {
  height:40px;
  padding:0 12px;
  background:var(--arkaplan);
  border:1.5px solid var(--sinir);
  display:flex; align-items:center;
  font-size:13px;
  color:var(--gri-koyu);
  white-space:nowrap;
}
.input-on-ek { border-right:none; border-radius:var(--radius) 0 0 var(--radius); }
.input-son-ek { border-left:none; border-radius:0 var(--radius) var(--radius) 0; }
.input-grup .form-alani { border-radius:0; flex:1; }
.input-grup .form-alani:first-child { border-radius:var(--radius) 0 0 var(--radius); }
.input-grup .form-alani:last-child  { border-radius:0 var(--radius) var(--radius) 0; }

/* Checkbox & Radio */
.form-checkbox, .form-radio { display:flex; align-items:center; gap:8px; cursor:pointer; }
.form-checkbox input, .form-radio input { width:16px; height:16px; accent-color:var(--lacivert); cursor:pointer; }
.form-checkbox span, .form-radio span { font-size:13px; color:var(--metin-ikincil); }

/* Form Satırı */
.form-satir { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-satir-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ── 12. TABLOLAR ── */
.tablo-sarici { overflow-x:auto; }
.tablo {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.tablo thead th {
  padding:12px 16px;
  text-align:left;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--gri-koyu);
  background:var(--arkaplan);
  border-bottom:2px solid var(--sinir);
  white-space:nowrap;
}
.tablo tbody td {
  padding:13px 16px;
  border-bottom:1px solid var(--gri);
  color:var(--metin-ikincil);
  vertical-align:middle;
}
.tablo tbody tr:last-child td { border-bottom:none; }
.tablo tbody tr { transition:background .15s; }
.tablo tbody tr:hover td { background:rgba(30,58,95,.03); }
.tablo .bold { font-weight:600; color:var(--metin-ana); }
.tablo .sayi { font-weight:600; font-variant-numeric:tabular-nums; }
.tablo .sag { text-align:right; }
.tablo .merkez { text-align:center; }

/* Tablo Aksiyon Butonları */
.tablo-aksiyonlar { display:flex; gap:6px; align-items:center; }
.tablo-btn {
  width:30px; height:30px;
  border-radius:var(--radius-sm);
  border:1px solid var(--sinir);
  background:var(--beyaz);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  color:var(--gri-koyu);
  cursor:pointer;
  transition:var(--gecis);
}
.tablo-btn:hover { border-color:var(--lacivert-orta); color:var(--lacivert); background:var(--lacivert-pastel); }
.tablo-btn.sil:hover { border-color:var(--tehlike); color:var(--tehlike); background:var(--tehlike-bg); }
.tablo-btn.duzenle:hover { border-color:var(--altin); color:var(--altin-koyu); background:var(--altin-pastel); }
.tablo-btn.goruntule:hover { border-color:#1E40AF; color:#1E40AF; background:var(--bilgi-bg); }

/* ── 13. ROZETLER / ETİKETLER ── */
.rozet {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border-radius:var(--radius-tam);
  font-size:11px;
  font-weight:600;
}
.rozet-lacivert  { background:var(--lacivert-pastel); color:var(--lacivert);    border:1px solid rgba(30,58,95,.15);  }
.rozet-altin     { background:var(--altin-pastel);    color:var(--altin-koyu);  border:1px solid rgba(201,168,76,.25); }
.rozet-basari    { background:var(--basari-bg);       color:var(--basari);      border:1px solid var(--basari-sinir); }
.rozet-tehlike   { background:var(--tehlike-bg);      color:var(--tehlike);     border:1px solid var(--tehlike-sinir); }
.rozet-uyari     { background:var(--uyari-bg);        color:var(--uyari);       border:1px solid var(--uyari-sinir);  }
.rozet-bilgi     { background:var(--bilgi-bg);        color:var(--bilgi);       border:1px solid var(--bilgi-sinir);  }
.rozet-gri       { background:var(--gri);             color:var(--gri-koyu);    border:1px solid var(--sinir);        }

/* ── 14. UYARILAR (ALERT) ── */
.uyari-kutu {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid;
  font-size:13px;
  margin-bottom:16px;
}
.uyari-kutu i { font-size:15px; flex-shrink:0; margin-top:1px; }
.uyari-kutu strong { display:block; font-weight:700; margin-bottom:2px; }
.uyari-basari { background:var(--basari-bg);  border-color:var(--basari-sinir);  color:var(--basari);  }
.uyari-tehlike{ background:var(--tehlike-bg); border-color:var(--tehlike-sinir); color:var(--tehlike); }
.uyari-uyari  { background:var(--uyari-bg);   border-color:var(--uyari-sinir);   color:var(--uyari);   }
.uyari-bilgi  { background:var(--bilgi-bg);   border-color:var(--bilgi-sinir);   color:var(--bilgi);   }

/* ── 15. MODAL ── */
.modal-arkaplan {
  position:fixed; inset:0;
  background:rgba(6,14,27,.6);
  z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:var(--gecis);
  backdrop-filter:blur(3px);
}
.modal-arkaplan.aktif { opacity:1; visibility:visible; }
.modal {
  background:var(--beyaz);
  border-radius:var(--radius-xl);
  box-shadow:var(--golge-xl);
  width:100%;
  max-width:560px;
  max-height:90vh;
  overflow-y:auto;
  transform:scale(.95) translateY(10px);
  transition:var(--gecis);
}
.modal-arkaplan.aktif .modal { transform:scale(1) translateY(0); }
.modal-ust {
  padding:22px 24px;
  border-bottom:1px solid var(--sinir);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-baslik { font-size:16px; font-weight:700; color:var(--metin-ana); display:flex; align-items:center; gap:10px; }
.modal-baslik i { color:var(--lacivert-orta); }
.modal-kapat {
  width:32px; height:32px;
  border:none; background:var(--arkaplan);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--gri-koyu); font-size:13px;
  transition:var(--gecis);
}
.modal-kapat:hover { background:var(--tehlike-bg); color:var(--tehlike); }
.modal-icerik { padding:24px; }
.modal-alt {
  padding:16px 24px;
  border-top:1px solid var(--sinir);
  display:flex; gap:10px; justify-content:flex-end;
  background:var(--arkaplan);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
}

/* ── 16. SAYFALAMA ── */
.sayfalama {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0 0;
  flex-wrap:wrap;
}
.sayfalama-bilgi { font-size:12.5px; color:var(--gri-koyu); }
.sayfalama-butonlar { display:flex; gap:4px; }
.sayfa-btn {
  min-width:34px; height:34px;
  border:1px solid var(--sinir);
  background:var(--beyaz);
  border-radius:var(--radius-sm);
  font-size:13px; color:var(--metin-ikincil);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--gecis);
  padding:0 8px;
}
.sayfa-btn:hover { border-color:var(--lacivert-orta); color:var(--lacivert); }
.sayfa-btn.aktif { background:var(--lacivert); color:#fff; border-color:var(--lacivert); font-weight:700; }
.sayfa-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ── 17. BOŞ DURUM ── */
.bos-durum {
  padding:60px 20px;
  text-align:center;
  color:var(--gri-koyu);
}
.bos-durum-ikon { font-size:40px; margin-bottom:14px; opacity:.4; }
.bos-durum h3 { font-size:15px; font-weight:600; color:var(--metin-ikincil); margin-bottom:6px; }
.bos-durum p { font-size:13px; color:var(--gri-orta); }

/* ── 18. ARAÇ ÇUBUĞU (Filtre/Arama) ── */
.arac-cubugu {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.arama-kutusu {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--beyaz);
  border:1.5px solid var(--sinir);
  border-radius:var(--radius);
  padding:0 14px;
  height:38px;
  flex:1;
  min-width:200px;
  max-width:340px;
  transition:var(--gecis);
}
.arama-kutusu:focus-within { border-color:var(--lacivert-orta); box-shadow:0 0 0 3px rgba(30,58,95,.08); }
.arama-kutusu i { color:var(--gri-orta); font-size:13px; }
.arama-kutusu input { border:none; background:none; outline:none; font-size:13px; width:100%; color:var(--metin-ana); }
.arama-kutusu input::placeholder { color:var(--metin-pasif); }

/* ── 19. FLASH MESAJ (Toast) ── */
.toast-kapsayici {
  position:fixed;
  top:20px; right:20px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:360px;
}
.toast {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:var(--beyaz);
  border-radius:var(--radius);
  box-shadow:var(--golge-lg);
  border-left:4px solid var(--lacivert);
  animation:toastGir .3s cubic-bezier(.4,0,.2,1);
}
.toast.basari { border-left-color:#166534; }
.toast.tehlike { border-left-color:#991B1B; }
.toast.uyari   { border-left-color:#D97706; }
.toast-ikon { font-size:16px; flex-shrink:0; margin-top:1px; }
.toast.basari .toast-ikon { color:#166534; }
.toast.tehlike .toast-ikon { color:#991B1B; }
.toast.uyari   .toast-ikon { color:#D97706; }
.toast-metin { font-size:13.5px; color:var(--metin-ana); font-weight:500; flex:1; }
.toast-kapat { color:var(--gri-orta); font-size:12px; cursor:pointer; margin-top:2px; }

/* ── 20. GİRİŞ SAYFASI ── */
.giris-sayfa {
  min-height:100vh;
  display:flex;
  background:var(--lacivert-koyu);
}
.giris-sol {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='30' r='.5' fill='rgba(201,168,76,.15)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E");
}
.giris-kart {
  background:var(--beyaz);
  border-radius:var(--radius-xl);
  padding:40px;
  width:100%;
  max-width:420px;
  box-shadow:var(--golge-xl);
}
.giris-logo {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:32px;
}
.giris-logo-ikon {
  width:44px; height:44px;
  background:linear-gradient(135deg, var(--altin), var(--altin-koyu));
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
}
.giris-logo-ikon i { color:var(--lacivert-koyu); font-size:20px; }
.giris-logo-metin { font-size:18px; font-weight:800; color:var(--lacivert-koyu); }
.giris-logo-metin small { display:block; font-size:10px; font-weight:500; color:var(--gri-koyu); }
.giris-baslik { font-size:22px; font-weight:700; color:var(--metin-ana); margin-bottom:6px; }
.giris-alt-baslik { font-size:13px; color:var(--gri-koyu); margin-bottom:28px; }
.giris-sag {
  width:480px;
  background:linear-gradient(135deg, var(--lacivert) 0%, var(--lacivert-koyu) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 40px;
  position:relative;
  overflow:hidden;
}
.giris-sag-baslik { font-size:28px; font-weight:800; color:var(--beyaz); margin-bottom:16px; line-height:1.3; }
.giris-sag-metin { font-size:14px; color:rgba(255,255,255,.7); line-height:1.7; }
.giris-ozellik { display:flex; gap:12px; align-items:flex-start; margin-bottom:20px; }
.giris-ozellik-ikon { width:36px; height:36px; background:rgba(201,168,76,.15); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.giris-ozellik-ikon i { color:var(--altin); font-size:15px; }
.giris-ozellik-metin strong { display:block; font-size:13px; font-weight:600; color:var(--beyaz); }
.giris-ozellik-metin span { font-size:12px; color:rgba(255,255,255,.6); }

/* ── 21. AYIRICI ── */
.ayirici { border:none; border-top:1px solid var(--sinir); margin:20px 0; }
.ayirici-metin {
  display:flex; align-items:center; gap:12px; color:var(--gri-orta); font-size:12px; margin:20px 0;
}
.ayirici-metin::before, .ayirici-metin::after { content:''; flex:1; border-top:1px solid var(--sinir); }

/* ── 22. RENK YARDIMCILARI ── */
.metin-ana       { color:var(--metin-ana); }
.metin-ikincil   { color:var(--metin-ikincil); }
.metin-ucuncul   { color:var(--metin-ucuncul); }
.metin-basari    { color:var(--basari); }
.metin-tehlike   { color:var(--tehlike); }
.metin-uyari     { color:var(--uyari); }
.metin-altin     { color:var(--altin-koyu); }
.metin-lacivert  { color:var(--lacivert); }
.yazi-sm  { font-size:12px; }
.yazi-xs  { font-size:11px; }
.yazi-lg  { font-size:15px; }
.kalin    { font-weight:700; }
.orta     { font-weight:500; }

/* ── 23. ANİMASYONLAR ── */
@keyframes doner      { to { transform:rotate(360deg); } }
@keyframes toastGir   { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes soldan     { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
@keyframes yukari     { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

.giris-animasyon { animation:yukari .4s ease both; }
.soldan-animasyon { animation:soldan .3s ease both; }

/* ── 24. YUKARI KAYDIRMA ÇUBUĞU ── */
.ilerleme-cubugu {
  height:3px;
  background:var(--lacivert-pastel);
  border-radius:var(--radius-tam);
  overflow:hidden;
  margin-bottom:6px;
}
.ilerleme-dolgu {
  height:100%;
  background:linear-gradient(90deg, var(--lacivert), var(--altin));
  border-radius:var(--radius-tam);
  transition:width .5s ease;
}

/* ── 25. ARAÇ İPUCU ── */
[data-ipucu] { position:relative; cursor:help; }
[data-ipucu]::after {
  content:attr(data-ipucu);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:var(--lacivert-koyu);
  color:#fff;
  font-size:11px;
  font-weight:500;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
  opacity:0; visibility:hidden;
  transition:var(--gecis);
  pointer-events:none;
  z-index:999;
}
[data-ipucu]:hover::after { opacity:1; visibility:visible; }

/* ── 26. RESPONSIVE ── */
@media (max-width:1280px) {
  .grid-4 { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:1024px) {
  .giris-sag { display:none; }
  .grid-3 { grid-template-columns:repeat(2, 1fr); }
  .grid-2-1, .grid-1-2 { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --sidebar-genislik: 0px; }
  .sidebar { transform:translateX(-260px); width:260px; }
  .sidebar.mobil-acik { transform:translateX(0); width:260px; }
  .ana-icerik { margin-left:0; }
  .sayfa-icerik { padding:16px; }
  .ust-bar { padding:0 16px; }
  .global-arama { display:none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .sayfa-baslik { flex-direction:column; align-items:flex-start; }
  .form-satir, .form-satir-3 { grid-template-columns:1fr; }
}

/* Mobil Menü Geçiş Katmanı */
.overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(6,14,27,.5);
  z-index:99;
  backdrop-filter:blur(2px);
}
.overlay.aktif { display:block; }