@charset "UTF-8";
/* ============================================================
   Elektronik Kelepçe Takip Sistemi — Aydınlık Tema
   İstanbul Emniyet Müdürlüğü logo renkleri
   ============================================================ */

:root{
  --lacivert:      #14225B;
  --lacivert-koyu: #0E1A45;
  --lacivert-acik: #243a86;
  --altin:         #C9A24A;
  --altin-acik:    #e6cf93;
  --kirmizi:       #E30A17;
  --yesil:         #1E8E5A;
  --turuncu:       #E08A1E;

  --zemin:         #F4F6FA;
  --kart:          #FFFFFF;
  --metin:         #1f2740;
  --metin-soluk:   #6b7280;
  --cizgi:         #e6e9f2;
  --golge:         0 1px 3px rgba(20,34,91,.08), 0 1px 2px rgba(20,34,91,.06);
  --golge-yuksek:  0 8px 24px rgba(20,34,91,.12);
  --radius:        12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Segoe UI', Roboto, system-ui, sans-serif;
  background:var(--zemin);
  color:var(--metin);
  font-size:14px;
  line-height:1.5;
}
a{ color:var(--lacivert-acik); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Düzen ---------- */
.uygulama{ display:flex; min-height:100vh; }

/* Kenar çubuğu */
.kenar{
  width:248px; flex-shrink:0;
  background:linear-gradient(180deg,var(--lacivert) 0%, var(--lacivert-koyu) 100%);
  color:#dfe4f5;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.kenar-baslik{
  display:flex; align-items:center; gap:12px;
  padding:18px 18px; border-bottom:1px solid rgba(255,255,255,.08);
}
.kenar-baslik img{ width:42px; height:42px; object-fit:contain; }
.kenar-baslik .ad{ font-weight:700; font-size:14px; color:#fff; line-height:1.2; }
.kenar-baslik .alt{ font-size:11px; color:var(--altin-acik); }

.menu{ list-style:none; margin:0; padding:12px 10px; flex:1; overflow-y:auto; }
.menu li{ margin:2px 0; }
.menu a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:9px;
  color:#cdd4ec; font-weight:500; text-decoration:none;
  transition:background .15s, color .15s;
}
.menu a .ikon{ width:20px; text-align:center; font-size:16px; }
.menu a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.menu a.aktif{ background:var(--altin); color:var(--lacivert-koyu); font-weight:700; }
.menu .ayrac{ padding:14px 14px 6px; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.35); }

/* Ana alan */
.icerik{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* Üst bar */
.ustbar{
  height:62px; background:var(--kart); border-bottom:1px solid var(--cizgi);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:sticky; top:0; z-index:20; box-shadow:var(--golge);
}
.ustbar .sayfa-ad{ font-size:18px; font-weight:700; color:var(--lacivert); }
.ustbar .sag{ display:flex; align-items:center; gap:16px; }
.kullanici-rozet{
  display:flex; align-items:center; gap:10px; padding:6px 12px;
  background:var(--zemin); border-radius:30px;
}
.kullanici-rozet .avatar{
  width:32px; height:32px; border-radius:50%;
  background:var(--lacivert); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.kullanici-rozet .ad{ font-weight:600; font-size:13px; }
.kullanici-rozet .rol{ font-size:11px; color:var(--metin-soluk); }

.govde{ padding:24px; flex:1; }

/* ---------- Kartlar ---------- */
.kart{
  background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--radius); box-shadow:var(--golge);
}
.kart-ic{ padding:20px; }
.kart-baslik{
  padding:16px 20px; border-bottom:1px solid var(--cizgi);
  font-weight:700; color:var(--lacivert); display:flex;
  align-items:center; justify-content:space-between;
}

/* İstatistik kartları */
.istatistik-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:24px;
}
.stat{
  background:var(--kart); border:1px solid var(--cizgi);
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--golge);
  display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
}
.stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--lacivert);
}
.stat.altin::before{ background:var(--altin); }
.stat.kirmizi::before{ background:var(--kirmizi); }
.stat.yesil::before{ background:var(--yesil); }
.stat.turuncu::before{ background:var(--turuncu); }
.stat .sayi{ font-size:30px; font-weight:800; color:var(--lacivert); line-height:1; }
.stat .etiket{ font-size:13px; color:var(--metin-soluk); font-weight:500; }
.stat .ikon{
  position:absolute; right:16px; top:16px; font-size:26px; opacity:.18;
}

/* ---------- Tablolar ---------- */
.tablo-sar{ overflow-x:auto; }
table.tablo{ width:100%; border-collapse:collapse; font-size:13px; }
table.tablo th{
  text-align:left; padding:11px 14px; background:var(--zemin);
  color:var(--metin-soluk); font-weight:600; text-transform:uppercase;
  font-size:11px; letter-spacing:.03em; border-bottom:1px solid var(--cizgi);
}
table.tablo td{ padding:11px 14px; border-bottom:1px solid var(--cizgi); }
table.tablo tr:hover td{ background:#fafbfe; }

/* ---------- Rozetler ---------- */
.rozet{
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.rozet-yeni        { background:#e8edff; color:#2d44a0; }
.rozet-aktif       { background:#e3f5ec; color:var(--yesil); }
.rozet-ariza       { background:#fdecec; color:var(--kirmizi); }
.rozet-cezaevi     { background:#efeaf7; color:#6a3bbf; }
.rozet-suresi-biten{ background:#eef0f5; color:#6b7280; }
.rozet-ulasilamayan{ background:#fff4e2; color:var(--turuncu); }
.rozet-alakasiz    { background:#f1f1f1; color:#9aa0ad; }
.rozet-uyari       { background:#fff4e2; color:var(--turuncu); }
.rozet-tehlike     { background:#fdecec; color:var(--kirmizi); }
.rozet-silindi     { background:#fdecec; color:var(--kirmizi); }
.rozet-geri-getirildi{ background:#e3f5ec; color:var(--yesil); }

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:9px; border:1px solid transparent;
  font-size:13px; font-weight:600; cursor:pointer; transition:.15s; text-decoration:none;
}
.btn-ana{ background:var(--lacivert); color:#fff; }
.btn-ana:hover{ background:var(--lacivert-acik); text-decoration:none; color:#fff; }
.btn-altin{ background:var(--altin); color:var(--lacivert-koyu); }
.btn-altin:hover{ background:var(--altin-acik); text-decoration:none; }
.btn-cizgi{ background:#fff; border-color:var(--cizgi); color:var(--metin); }
.btn-cizgi:hover{ border-color:var(--lacivert); color:var(--lacivert); text-decoration:none; }
.btn-tehlike{ background:var(--kirmizi); color:#fff; }
.btn-tehlike:hover{ background:#c00813; text-decoration:none; color:#fff; }

/* ---------- Formlar ---------- */
.form-grup{ margin-bottom:16px; }
.form-grup label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:var(--metin); }
.form-kontrol{
  width:100%; padding:10px 12px; border:1px solid var(--cizgi);
  border-radius:9px; font-size:14px; background:#fff; color:var(--metin);
  transition:border .15s, box-shadow .15s;
}
.form-kontrol:focus{
  outline:none; border-color:var(--lacivert);
  box-shadow:0 0 0 3px rgba(20,34,91,.1);
}

/* ---------- Flash mesaj ---------- */
.flash{ padding:13px 18px; border-radius:10px; margin-bottom:16px; font-weight:600; font-size:13px; }
.flash-basari{ background:#e3f5ec; color:var(--yesil); border:1px solid #b6e2cb; }
.flash-hata{ background:#fdecec; color:var(--kirmizi); border:1px solid #f5c2c5; }
.flash-bilgi{ background:#e8edff; color:#2d44a0; border:1px solid #c4d0fb; }

/* ---------- Giriş ekranı ---------- */
.giris-zemin{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--lacivert) 0%, var(--lacivert-koyu) 60%, #060d28 100%);
  padding:20px;
}
.giris-kart{
  background:#fff; width:100%; max-width:400px; border-radius:18px;
  box-shadow:var(--golge-yuksek); padding:36px 34px; text-align:center;
  border-top:5px solid var(--altin);
}
.giris-kart img{ width:88px; height:88px; object-fit:contain; margin-bottom:14px; }
.giris-kart h1{ font-size:19px; color:var(--lacivert); margin:0 0 4px; }
.giris-kart .kurum{ color:var(--altin); font-weight:700; font-size:13px; margin-bottom:24px; }
.giris-kart .form-grup{ text-align:left; }
.giris-kart .btn{ width:100%; justify-content:center; padding:12px; font-size:15px; margin-top:6px; }
.giris-alt{ margin-top:18px; font-size:12px; color:var(--metin-soluk); }

/* ---------- Yardımcı ---------- */
.satir{ display:flex; gap:18px; flex-wrap:wrap; }
.kol{ flex:1; min-width:0; }
.bos-durum{ text-align:center; padding:50px 20px; color:var(--metin-soluk); }
.bos-durum .ikon{ font-size:46px; opacity:.3; margin-bottom:10px; }

@media (max-width:880px){
  .kenar{ position:fixed; left:-260px; z-index:100; transition:left .2s; }
  .kenar.acik{ left:0; }
}