/* Akıllı Durak — Yönetim Paneli teması (Osmaniye Belediyesi: yeşil/amber).
   Mockup paletini taşır; harici font yok (CSP 'self'). */
:root {
  --green-950:#0A2812; --green-900:#0F3D17; --green-800:#14501C; --green-700:#1B5E20;
  --green-600:#2E7D32; --green-500:#43A047; --green-100:#E8F5E9; --green-50:#F1F8F2;
  --amber-700:#8B6F2E; --amber-600:#A88842; --amber-500:#C9A96E; --amber-300:#E0C896; --amber-50:#FAF5E8;
  --gray-900:#1A1A1A; --gray-800:#262626; --gray-700:#404040; --gray-600:#525252; --gray-500:#737373;
  --gray-400:#A3A3A3; --gray-300:#D4D4D4; --gray-200:#E5E5E5; --gray-150:#EDEDED; --gray-100:#F5F5F5;
  --gray-50:#FAFAFA; --white:#FFFFFF;
  --success:#16A34A; --success-bg:#DCFCE7; --warning:#EA580C; --warning-bg:#FFEDD5;
  --error:#DC2626; --error-bg:#FEE2E2; --info:#2563EB; --info-bg:#DBEAFE;
  --page-bg:#EDE7D9;
  --shadow-sm:0 1px 2px rgba(15,61,23,.06); --shadow-md:0 2px 4px rgba(15,61,23,.05),0 4px 12px rgba(15,61,23,.07);
  --font:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--font); background:var(--gray-50); color:var(--gray-900); -webkit-font-smoothing:antialiased; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }

/* ── Layout ── */
.layout { display:flex; min-height:100vh; }
.sidebar { width:248px; background:var(--green-950); color:rgba(255,255,255,.85); display:flex; flex-direction:column; padding:18px 0; flex-shrink:0; position:sticky; top:0; height:100vh; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ── Sidebar ── */
.sb-brand { display:flex; gap:12px; align-items:center; padding:0 18px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
.sb-brand .seal { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:20px; }
.sb-brand .super { font-size:9px; letter-spacing:.16em; color:var(--amber-300); font-weight:700; }
.sb-brand .name { font-size:15px; font-weight:800; color:#fff; }
.sb-section { padding:16px 20px 6px; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.35); font-weight:700; }
.sb-nav { display:flex; flex-direction:column; padding:0 12px; overflow-y:auto; flex:1; }
.sb-item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px; color:rgba(255,255,255,.72); font-size:13px; font-weight:500; margin-bottom:1px; }
.sb-item:hover { background:rgba(255,255,255,.05); color:#fff; }
.sb-item .ic { width:18px; height:18px; display:grid; place-items:center; opacity:.85; }
/* ── Inline SVG ikonlar (emoji yerine — currentColor ile tema uyumlu) ── */
.svg-ico { display:block; flex:none; }
.sb-item .ic .svg-ico { width:18px; height:18px; }
.kpi-card .icon .svg-ico { width:18px; height:18px; }
.sb-brand .seal .svg-ico,
.login-brand .seal .svg-ico { width:auto; height:auto; }
.logout-btn .svg-ico { width:18px; height:18px; }
.sb-item .count { margin-left:auto; background:rgba(255,255,255,.07); padding:1px 7px; border-radius:99px; font-size:10px; font-weight:700; font-family:var(--mono); color:rgba(255,255,255,.6); }
.sb-item.active { background:rgba(201,169,110,.14); color:var(--amber-300); }
.sb-item.active .count { background:rgba(201,169,110,.22); color:var(--amber-300); }
.sb-footer { margin-top:auto; padding:14px 18px 0; border-top:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:10px; }
.sb-footer .avatar { width:34px; height:34px; border-radius:50%; background:var(--amber-600); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; }
.sb-footer .who { flex:1; min-width:0; }
.sb-footer .uname { font-size:12px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-footer .role { font-size:10px; color:rgba(255,255,255,.5); }
.logout-form { margin:0; }
.logout-btn { background:transparent; color:rgba(255,255,255,.5); border:0; font-size:18px; cursor:pointer; padding:4px; }
.logout-btn:hover { color:#fff; }

/* ── Topbar ── */
.topbar { height:54px; background:#fff; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; padding:0 24px; gap:16px; }
.breadcrumb { font-size:12px; color:var(--gray-500); font-weight:500; display:flex; gap:7px; align-items:center; }
.breadcrumb .current { color:var(--green-900); font-weight:600; }
.breadcrumb .sep { color:var(--gray-300); }
.env-badge { margin-left:auto; background:var(--warning-bg); color:var(--warning); font-size:10px; font-weight:700; letter-spacing:.08em; padding:3px 10px; border-radius:99px; }

/* ── Page ── */
.page { flex:1; overflow-y:auto; padding:24px 32px 40px; }
.page-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
.page-header .eyebrow { font-size:10px; color:var(--amber-700); letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.page-header h1 { font-size:24px; font-weight:800; color:var(--green-950); letter-spacing:-.02em; margin-top:3px; }
.page-header .sub { font-size:12.5px; color:var(--gray-500); margin-top:3px; }
.page-header .right { display:flex; gap:8px; align-items:center; }

/* ── Buttons ── */
.btn { height:36px; padding:0 14px; border-radius:9px; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; cursor:pointer; }
.btn-primary { background:var(--green-700); color:#fff; }
.btn-primary:hover { background:var(--green-800); }
.btn-ghost { background:#fff; color:var(--gray-700); border-color:var(--gray-200); }
.btn-ghost:hover { background:var(--gray-50); }
.btn-amber { background:var(--amber-600); color:#fff; }
.btn-danger { background:var(--error); color:#fff; }
.btn-sm { height:30px; padding:0 10px; font-size:11.5px; border-radius:7px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ── KPI cards ── */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.kpi-card { background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:16px; box-shadow:var(--shadow-sm); }
.kpi-card .top { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.kpi-card .icon { width:32px; height:32px; border-radius:8px; background:var(--green-50); color:var(--green-700); display:grid; place-items:center; font-size:16px; }
.kpi-card .icon.amber { background:var(--amber-50); color:var(--amber-700); }
.kpi-card .icon.info { background:var(--info-bg); color:var(--info); }
.kpi-card .label { font-size:11px; font-weight:600; color:var(--gray-600); }
.kpi-card .value { font-size:28px; font-weight:800; color:var(--green-950); letter-spacing:-.025em; line-height:1; }
.kpi-card .value .unit { font-size:13px; color:var(--gray-500); font-weight:500; margin-left:3px; }

/* ── Panels ── */
.grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.grid-half { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:1100px){ .grid-2,.grid-half,.kpi-row{ grid-template-columns:1fr; } }
.panel { background:#fff; border:1px solid var(--gray-200); border-radius:12px; box-shadow:var(--shadow-sm); margin-bottom:16px; }
.panel-header { padding:14px 18px; border-bottom:1px solid var(--gray-150); display:flex; justify-content:space-between; align-items:center; }
.panel-header h3 { font-size:14px; font-weight:700; color:var(--green-950); }
.panel-header .meta { font-size:11px; color:var(--gray-500); }
.panel-body { padding:16px 18px; }
.panel-body.flush { padding:0; }

/* ── Tables ── */
.data-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.data-table thead th { text-align:left; padding:10px 16px; font-size:10.5px; font-weight:700; color:var(--gray-500); letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--gray-200); background:var(--gray-50); }
.data-table tbody td { padding:11px 16px; border-bottom:1px solid var(--gray-100); color:var(--gray-800); vertical-align:middle; }
.data-table tbody tr:hover { background:var(--gray-50); }
.data-table td.actions { text-align:right; white-space:nowrap; }
.data-table .strong { font-weight:600; color:var(--gray-900); }
.id-mono { font-family:var(--mono); font-size:11px; color:var(--gray-500); }
.empty-row td { text-align:center; color:var(--gray-500); padding:28px; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:700; }
.badge .dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-error { background:var(--error-bg); color:var(--error); }
.badge-info { background:var(--info-bg); color:var(--info); }
.badge-neutral { background:var(--gray-100); color:var(--gray-600); }
.badge-amber { background:var(--amber-50); color:var(--amber-700); }
.rb { min-width:32px; height:32px; padding:0 6px; background:var(--green-700); color:#fff; border-radius:8px; display:inline-grid; place-items:center; font-weight:800; font-size:12px; }
.rb.amber { background:var(--amber-600); }

/* ── Forms ── */
.form-grid { display:grid; gap:14px; }
.form-grid.cols-2 { grid-template-columns:1fr 1fr; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:11px; font-weight:700; color:var(--gray-700); letter-spacing:.02em; }
.field input,.field select,.field textarea { height:40px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:9px; padding:0 12px; font-size:13px; color:var(--gray-900); }
.field textarea { height:auto; min-height:90px; padding:10px 12px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; background:#fff; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(46,125,50,.12); }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.alert { padding:10px 14px; border-radius:9px; font-size:12.5px; font-weight:500; margin-bottom:14px; }
.alert-error { background:var(--error-bg); color:var(--error); }
.alert-success { background:var(--success-bg); color:var(--success); }
.alert-info { background:var(--info-bg); color:var(--info); }

/* ── Login ── */
.login-wrap { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.login-brand { background:linear-gradient(165deg,var(--green-800),var(--green-950)); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between; }
.login-brand .seal-line { display:flex; align-items:center; gap:14px; }
.login-brand .seal { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; font-size:26px; }
.login-brand .super { font-size:10px; letter-spacing:.2em; color:var(--amber-300); font-weight:700; }
.login-brand .bname { font-size:16px; font-weight:700; }
.login-brand .pitch .eyebrow { font-size:11px; color:var(--amber-300); letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin-bottom:14px; }
.login-brand .pitch h2 { font-size:32px; font-weight:800; line-height:1.12; letter-spacing:-.02em; }
.login-brand .pitch p { margin-top:14px; color:rgba(255,255,255,.72); font-size:13px; max-width:380px; }
.login-brand .stats { display:flex; gap:26px; margin-top:26px; }
.login-brand .stat .num { font-size:22px; font-weight:800; color:var(--amber-300); }
.login-brand .stat .lab { font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.login-brand .lb-foot { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.login-form-wrap { background:#fff; padding:56px; display:flex; flex-direction:column; justify-content:center; }
.login-form { max-width:360px; margin:0 auto; width:100%; }
.login-form .eyebrow { font-size:10px; color:var(--amber-700); letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
.login-form h2 { font-size:30px; font-weight:800; color:var(--green-950); letter-spacing:-.02em; margin-top:6px; }
.login-form .sub { color:var(--gray-600); font-size:13px; margin-top:8px; }
.login-form .fields { margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.login-form .submit { margin-top:22px; width:100%; height:48px; background:var(--green-700); color:#fff; border:0; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; }
.login-form .submit:hover { background:var(--green-800); }
.login-form .legal { margin-top:22px; font-size:11px; color:var(--gray-500); text-align:center; }
@media (max-width:860px){ .login-wrap{ grid-template-columns:1fr; } .login-brand{ display:none; } }

/* ── Error pages ── */
.error-page { min-height:100vh; display:grid; place-items:center; text-align:center; padding:40px; }
.error-page .code { font-size:64px; font-weight:800; color:var(--amber-600); }
.error-page h1 { font-size:22px; color:var(--green-950); margin-top:8px; }
.error-page p { color:var(--gray-600); margin-top:8px; }
.error-page a { display:inline-block; margin-top:20px; }

/* ── Misc ── */
.muted { color:var(--gray-500); }
.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--success); margin-right:5px; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.toolbar { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.search-box { height:36px; background:#fff; border:1px solid var(--gray-200); border-radius:9px; padding:0 12px; font-size:13px; min-width:240px; }
.spacer { flex:1; }

/* ── Topbar arama + sağ küme + saat ── */
.topbar-search { display:flex; align-items:center; gap:8px; margin-left:20px; flex:1; max-width:420px;
  height:34px; padding:0 12px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:9px; }
.topbar-search .ts-ic { color:var(--gray-400); display:flex; }
.topbar-search input { border:0; background:transparent; outline:none; width:100%; font-size:12.5px; color:var(--gray-700); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.topbar-right .env-badge { margin-left:0; }
.icon-btn { width:34px; height:34px; border-radius:9px; border:1px solid var(--gray-200); background:#fff; color:var(--gray-500);
  display:grid; place-items:center; cursor:pointer; }
.icon-btn:hover { background:var(--gray-50); color:var(--green-900); }
.topbar-clock { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--gray-600);
  font-family:var(--mono); }
.topbar-clock svg { color:var(--gray-400); }

/* ── Dashboard header (selamlama + aksiyonlar) ── */
.dash-header h1 { font-size:23px; }
.dash-header .right { display:flex; gap:10px; align-items:center; }
.kpi-foot { margin-top:9px; font-size:11px; font-weight:600; color:var(--gray-500); }
.kpi-foot.up { color:var(--success); }
.kpi-foot.muted { color:var(--gray-400); }

/* ── Canlı Filo haritası (Leaflet) — kartı tam doldurur ── */
.panel-map { display:flex; flex-direction:column; margin-bottom:0; }
.panel-map .panel-body { flex:1; min-height:0; }
.fleet-map { height:100%; min-height:360px; width:100%; border-radius:0 0 12px 12px; z-index:0; background:var(--gray-100); }
.leaflet-div-icon { background:transparent; border:0; }
.veh-marker { width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.45); }
.veh-marker.moving { background:var(--success); }
.veh-marker.idle-on { background:var(--amber-600); }
.veh-marker.idle { background:var(--gray-400); }
.badge-live { background:var(--success-bg,rgba(31,157,87,.12)); color:var(--success); font-size:10px; font-weight:700;
  letter-spacing:.06em; padding:3px 9px; border-radius:99px; display:inline-flex; align-items:center; gap:5px; }
.badge-live .dot { width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 1.6s infinite; }

/* ── Olay listesi ── */
.event-list { display:flex; flex-direction:column; }
.event-row { display:flex; gap:11px; align-items:center; padding:11px 18px; border-bottom:1px solid var(--gray-100); }
.event-row:last-child { border-bottom:0; }
.event-ic { width:28px; height:28px; border-radius:8px; background:var(--amber-50); color:var(--amber-700);
  display:grid; place-items:center; flex:none; }
.event-main { min-width:0; }
.event-title { font-size:12.5px; font-weight:600; color:var(--green-950); text-transform:capitalize; }
.event-meta { font-size:11px; color:var(--gray-500); font-family:var(--mono); margin-top:1px; }
.empty-state { padding:22px 18px; font-size:12.5px; color:var(--gray-400); text-align:center; }

/* ── Bugün En Yoğun Hatlar (çubuk grafik) ── */
.panel-note { font-size:11px; color:var(--gray-400); font-weight:600; }
.bar-chart { display:flex; align-items:flex-end; gap:7px; height:200px; padding:6px 4px 0; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.bar-val { font-size:10.5px; font-weight:700; color:var(--green-900); font-family:var(--mono); margin-bottom:6px; }
.bar-track { flex:1; width:100%; max-width:34px; display:flex; align-items:flex-end; }
.bar { width:100%; min-height:4px; background:linear-gradient(180deg,var(--green-700),var(--green-900)); border-radius:5px 5px 0 0; }
.bar-label { margin-top:8px; font-size:9.5px; font-weight:600; color:var(--gray-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ── Sistem Sağlığı ── */
.health-list { display:flex; flex-direction:column; }
.health-row { display:flex; align-items:center; gap:11px; padding:12px 18px; border-bottom:1px solid var(--gray-100); }
.health-row:last-child { border-bottom:0; }
.health-ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none; background:var(--gray-50); color:var(--gray-400); }
.health-ic.h-ok { background:var(--green-50); color:var(--green-700); }
.health-ic.h-warn { background:var(--amber-50); color:var(--amber-700); }
.health-ic.h-down { background:#fdeaea; color:var(--error); }
.health-main { flex:1; min-width:0; }
.health-name { font-size:12.5px; font-weight:600; color:var(--green-950); }
.health-host { font-size:11px; color:var(--gray-400); font-family:var(--mono); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.health-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; flex:none; }
.health-status .dot { width:6px; height:6px; border-radius:50%; }
.health-status.s-ok { background:var(--green-50); color:var(--green-700); }
.health-status.s-ok .dot { background:var(--success); }
.health-status.s-warn { background:var(--amber-50); color:var(--amber-700); }
.health-status.s-warn .dot { background:var(--amber-600); }
.health-status.s-down { background:#fdeaea; color:var(--error); }
.health-status.s-down .dot { background:var(--error); }
.health-stamp { padding:9px 18px; font-size:10.5px; color:var(--gray-400); text-align:right; }

/* ── Harita araç plaka kartı (Leaflet tooltip) ── */
.leaflet-tooltip.veh-label { background:#fff; border:1px solid var(--gray-200); border-radius:6px;
  padding:1px 6px; font-size:10px; font-weight:700; font-family:var(--mono); color:var(--green-900);
  box-shadow:0 1px 4px rgba(0,0,0,.25); white-space:nowrap; }
.leaflet-tooltip.veh-label.moving { color:#fff; background:var(--success); border-color:var(--success); }
.leaflet-tooltip.veh-label::before { display:none; }
/* Seçili araç (kart tıklaması) — işaretçi büyür + çerçeve, plaka büyür + çerçeve */
.veh-marker.selected { width:22px; height:22px; box-shadow:0 0 0 4px rgba(31,157,87,.40), 0 2px 7px rgba(0,0,0,.5); }
.leaflet-tooltip.veh-label.selected { font-size:12px; font-weight:800; padding:3px 10px; color:#fff;
  background:var(--green-700); border-color:var(--green-700); box-shadow:0 0 0 3px rgba(31,157,87,.4); }

/* ── Senkronize sonucu (toast) ── */
.sync-result { font-size:11.5px; font-weight:600; }
.sync-toast.ok { background:var(--green-50); color:var(--green-700); padding:6px 11px; border-radius:8px; white-space:nowrap; }
.btn[disabled] { opacity:.55; cursor:wait; }

/* ── Topbar global arama (dropdown) ── */
.topbar-search-wrap { position:relative; flex:1; max-width:420px; margin-left:20px; }
.topbar-search-wrap .topbar-search { margin-left:0; max-width:none; width:100%; }
.search-results { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; display:none; }
.search-results.open { display:block; }
.search-panel { background:#fff; border:1px solid var(--gray-200); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.13); overflow:hidden; }
.search-hit { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--gray-100); }
.search-hit:last-child { border-bottom:0; }
.search-hit:hover { background:var(--gray-50); }
.sh-ic { color:var(--gray-400); display:flex; flex:none; }
.sh-main { flex:1; min-width:0; }
.sh-title { display:block; font-size:12.5px; font-weight:600; color:var(--green-950); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-sub { display:block; font-size:11px; color:var(--gray-400); font-family:var(--mono); }
.sh-kind { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--amber-700); background:var(--amber-50); padding:2px 7px; border-radius:99px; flex:none; }

/* ── Topbar bildirim zili (dropdown) ── */
.notif-wrap { position:relative; }
.icon-btn { position:relative; }
.notif-dot { position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--error); border:2px solid #fff; }
.notif-dropdown { position:absolute; top:calc(100% + 8px); right:0; width:308px; z-index:60; display:none;
  background:#fff; border:1px solid var(--gray-200); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.13); overflow:hidden; }
.notif-dropdown.open { display:block; }
.notif-head { padding:11px 14px; font-size:12px; font-weight:700; color:var(--green-950); border-bottom:1px solid var(--gray-100); }
.notif-list { max-height:340px; overflow-y:auto; }
.notif-item { display:flex; gap:9px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--gray-100); }
.notif-item:last-child { border-bottom:0; }
.ni-ic { width:24px; height:24px; border-radius:6px; background:var(--amber-50); color:var(--amber-700); display:grid; place-items:center; flex:none; }
.ni-main { min-width:0; }
.ni-title { font-size:12px; font-weight:600; color:var(--green-950); text-transform:capitalize; }
.ni-meta { font-size:10.5px; color:var(--gray-500); font-family:var(--mono); margin-top:1px; }
.notif-empty { padding:18px; text-align:center; font-size:12px; color:var(--gray-400); }

/* ── Canlı Filo — 2 kolon (filtreli liste + harita) ── */
.fleet-split { display:grid; grid-template-columns:360px 1fr; gap:16px; height:calc(100vh - 150px); min-height:480px; }
@media (max-width:1000px){ .fleet-split { grid-template-columns:1fr; height:auto; } }
.fleet-side { display:flex; flex-direction:column; overflow:hidden; margin-bottom:0; }
.fleet-tabs { display:flex; gap:4px; padding:10px; border-bottom:1px solid var(--gray-150); flex:none; }
.fleet-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; height:34px; border:0; background:transparent;
  border-radius:8px; font-size:11.5px; font-weight:600; color:var(--gray-500); cursor:pointer; }
.fleet-tab:hover { background:var(--gray-50); }
.fleet-tab.active { background:var(--green-50); color:var(--green-700); }
.fleet-tab .ft-n { font-size:10px; font-weight:700; font-family:var(--mono); background:rgba(0,0,0,.06); padding:1px 6px; border-radius:99px; }
.fleet-tab.active .ft-n { background:rgba(31,157,87,.18); }
.fleet-cards { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:7px; }
.fleet-card { display:block; padding:10px 12px; border:1px solid var(--gray-150); border-left:3px solid var(--gray-300);
  border-radius:9px; background:#fff; cursor:pointer; }
.fleet-card:hover { border-color:var(--gray-300); box-shadow:var(--shadow-sm); }
.fleet-card.selected { border-color:var(--green-600,#1f9d57); background:var(--green-50);
  box-shadow:0 0 0 2px rgba(31,157,87,.25); }
.fleet-card.s-seferde { border-left-color:var(--success); }
.fleet-card.s-bekleme { border-left-color:var(--amber-600); }
.fleet-card.s-garajda { border-left-color:var(--gray-400); }
.fc-top { display:flex; justify-content:space-between; align-items:center; }
.fc-plate { font-size:13px; font-weight:700; color:var(--green-950); font-family:var(--mono); }
.fc-speed { font-size:11.5px; font-weight:700; color:var(--gray-600); font-family:var(--mono); }
.fc-route { font-size:12px; color:var(--gray-600); margin-top:3px; }
.fc-route strong { color:var(--green-900); font-weight:600; }
.fc-muted { color:var(--gray-400); }
.fc-foot { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.fc-status { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; }
.fc-status .dot { width:6px; height:6px; border-radius:50%; }
.fc-status.st-seferde { color:var(--green-700); } .fc-status.st-seferde .dot { background:var(--success); }
.fc-status.st-bekleme { color:var(--amber-700); } .fc-status.st-bekleme .dot { background:var(--amber-600); }
.fc-status.st-garajda { color:var(--gray-500); } .fc-status.st-garajda .dot { background:var(--gray-400); }
.fc-ago { font-size:10.5px; color:var(--gray-400); font-family:var(--mono); }
/* sekme filtresi (JS data-filter) */
.fleet-cards[data-filter="seferde"] .fleet-card:not([data-status="seferde"]),
.fleet-cards[data-filter="bekleme"] .fleet-card:not([data-status="bekleme"]),
.fleet-cards[data-filter="garajda"] .fleet-card:not([data-status="garajda"]) { display:none; }
/* sağ harita paneli */
.fleet-map-panel { position:relative; overflow:hidden; padding:0; margin-bottom:0; }
.fleet-map-panel .fleet-map { height:100%; min-height:0; border-radius:12px; }
.fleet-legend { position:absolute; left:14px; bottom:14px; z-index:5; background:rgba(255,255,255,.95);
  border:1px solid var(--gray-200); border-radius:9px; padding:9px 12px; display:flex; flex-direction:column; gap:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.1); }
.fleet-legend .lg { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--gray-600); }
.fleet-legend .dot { width:9px; height:9px; border-radius:3px; }
.fleet-legend .st-seferde .dot { background:var(--success); border-radius:50%; }
.fleet-legend .st-bekleme .dot { background:var(--amber-600); border-radius:50%; }
.fleet-legend .st-garajda .dot { background:var(--gray-400); border-radius:50%; }
.fleet-legend .st-stop .dot { background:#fff; border:2px solid #c9a96e; border-radius:50%; }

/* ── Duraklar — istatistik şeridi + filtre + zengin tablo ── */
.stat-strip { display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border:1px solid var(--gray-200);
  border-radius:12px; box-shadow:var(--shadow-sm); margin-bottom:16px; overflow:hidden; }
.stat-cell { padding:14px 18px; border-right:1px solid var(--gray-150); }
.stat-cell:last-child { border-right:0; }
.sc-label { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--gray-500); }
.sc-val { font-size:24px; font-weight:800; color:var(--green-950); margin-top:5px; letter-spacing:-.02em; }
.sc-val.ok { color:var(--green-700); }
.sc-val.muted { color:var(--gray-400); }
.sc-unit { font-size:13px; color:var(--gray-400); font-weight:500; margin-left:2px; }
@media (max-width:900px){ .stat-strip { grid-template-columns:repeat(2,1fr); } }

.filter-bar { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--gray-150); flex-wrap:wrap; }
.filter-tabs { display:flex; gap:4px; }
.stops-tab, .vehicles-tab { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:0;
  background:transparent; border-radius:8px; font-size:12px; font-weight:600; color:var(--gray-500); cursor:pointer; }
.stops-tab:hover, .vehicles-tab:hover { background:var(--gray-50); }
.stops-tab.active, .vehicles-tab.active { background:var(--green-50); color:var(--green-700); }
.stops-tab .ft-n, .vehicles-tab .ft-n { font-size:10px; font-weight:700; font-family:var(--mono); background:rgba(0,0,0,.06); padding:1px 6px; border-radius:99px; }
.stops-tab.active .ft-n, .vehicles-tab.active .ft-n { background:rgba(31,157,87,.18); }
.loc-ago { color:var(--gray-400); font-size:11px; }
.filter-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.inline-search { display:flex; align-items:center; gap:7px; height:32px; padding:0 10px; background:var(--gray-50);
  border:1px solid var(--gray-200); border-radius:8px; min-width:210px; }
.inline-search .is-ic { color:var(--gray-400); display:flex; }
.inline-search input { border:0; background:transparent; outline:none; width:100%; font-size:12px; color:var(--gray-700); }
.select-sm { height:32px; padding:0 10px; border:1px solid var(--gray-200); border-radius:8px; background:#fff; font-size:12px; color:var(--gray-700); cursor:pointer; }
.route-badges { display:flex; gap:4px; flex-wrap:wrap; }
.route-badge { display:inline-block; min-width:18px; text-align:center; font-size:10.5px; font-weight:700; font-family:var(--mono);
  color:#fff; background:var(--green-700); padding:2px 6px; border-radius:5px; }
.route-badge.more { background:var(--amber-600); }
td.mono { font-family:var(--mono); }
.row-actions { white-space:nowrap; text-align:right; }
.ra-btn { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:7px; color:var(--gray-400); }
.ra-btn:hover { background:var(--gray-50); color:var(--green-900); }

/* ── Durak düzenleme/ekleme — 2 kolon + form + yan kartlar ── */
.edit-split { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
@media (max-width:1000px){ .edit-split { grid-template-columns:1fr; } }
.edit-main .panel, .edit-side .panel { margin-bottom:16px; }
.form-rows { display:flex; flex-direction:column; gap:14px; }
.stop-map { height:280px; border-radius:10px; z-index:0; background:var(--gray-100); }
.stop-pin-marker { background:var(--green-700,#1f7a4d); border:3px solid #fff; border-radius:50%;
  box-shadow:0 1px 5px rgba(0,0,0,.45); cursor:grab; }
.bl-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--gray-100); }
.bl-row:last-child { border-bottom:0; }
.bl-main { flex:1; min-width:0; }
.bl-name { font-size:12.5px; font-weight:600; color:var(--green-950); }
.bl-seq { font-size:10.5px; font-weight:700; color:var(--amber-700); background:var(--amber-50); padding:2px 8px; border-radius:99px; white-space:nowrap; }
.kiosk-empty { padding:14px; text-align:center; font-size:12px; color:var(--gray-400); background:var(--gray-50); border-radius:8px; }
.kiosk-box { padding:12px; border:1px solid var(--gray-150); border-radius:9px; }
.kb-name { font-size:13px; font-weight:700; color:var(--green-950); }
.kb-meta { font-size:11px; color:var(--gray-500); margin-top:2px; }
.kb-meta.on { color:var(--green-700); }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-bottom:1px solid var(--gray-100); font-size:12.5px; }
.stat-row:last-child { border-bottom:0; }
.stat-row span { color:var(--gray-600); }
.stat-row strong { font-size:15px; font-weight:800; color:var(--green-900); font-family:var(--mono); }

/* ── Hatlar — split-view editör (sol kartlar + sağ panel) ── */
.routes-split { display:grid; grid-template-columns:330px 1fr; gap:16px; align-items:start; height:calc(100vh - 150px); min-height:480px; }
@media (max-width:1000px){ .routes-split { grid-template-columns:1fr; height:auto; } }
.routes-side { display:flex; flex-direction:column; overflow:hidden; margin-bottom:0; }
.routes-list { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; }
.route-card { display:flex; gap:11px; align-items:center; padding:10px 11px; border:1px solid var(--gray-150); border-radius:9px; cursor:pointer; }
.route-card:hover { background:var(--gray-50); }
.route-card.active { border-color:var(--green-600,#1f9d57); background:var(--green-50); box-shadow:0 0 0 1px rgba(31,157,87,.2); }
.rc-main { flex:1; min-width:0; }
.rc-name { font-size:12.5px; font-weight:700; color:var(--green-950); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-dir { font-size:11px; color:var(--gray-500); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-stats { font-size:10.5px; color:var(--gray-400); font-family:var(--mono); margin-top:3px; }
.route-badge.lg { font-size:13px; padding:5px 9px; min-width:30px; }

.routes-panel { overflow-y:auto; margin-bottom:0; height:calc(100vh - 150px); min-height:480px; padding:0; }
@media (max-width:1000px){ .routes-panel { height:auto; } }
.rp-head { display:flex; align-items:flex-start; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--gray-150); }
.rp-title { display:flex; gap:12px; align-items:center; }
.rp-eyebrow { font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-700); }
.rp-head h3 { font-size:16px; font-weight:800; color:var(--green-950); margin-top:2px; }
.rp-dir { font-size:12px; color:var(--gray-500); margin-top:2px; }
.rp-stats { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--gray-150); }
.rps { padding:13px 18px; border-right:1px solid var(--gray-100); }
.rps:last-child { border-right:0; }
.rps-l { font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); }
.rps-v { font-size:20px; font-weight:800; color:var(--green-950); margin-top:4px; }
.rps-u { font-size:12px; color:var(--gray-400); font-weight:500; margin-left:2px; }
.rp-stops { display:flex; flex-direction:column; }
.seq-row { display:flex; align-items:center; gap:12px; padding:11px 18px; border-bottom:1px solid var(--gray-100); }
.seq-no { width:24px; height:24px; border-radius:50%; background:var(--green-700); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; flex:none; }
.seq-main { flex:1; min-width:0; }
.seq-name { font-size:12.5px; font-weight:600; color:var(--green-950); }
.seq-sub { font-size:10.5px; color:var(--gray-400); font-family:var(--mono); margin-top:1px; }
.seq-km { font-size:11px; font-weight:600; color:var(--gray-500); font-family:var(--mono); white-space:nowrap; }
.seq-eta { font-size:11px; font-weight:700; color:var(--amber-700); background:var(--amber-50); padding:2px 8px; border-radius:99px; white-space:nowrap; }
.ra-btn.danger:hover { background:#fdeaea; color:var(--error); }
.rp-add { display:flex; gap:8px; padding:14px 18px; }
.rp-add .select-sm { flex:1; }

/* ── Duyurular — 2 kolon (aktif kartlar + yeni duyuru formu) ── */
.ann-split { display:grid; grid-template-columns:1fr 420px; gap:16px; align-items:start; }
@media (max-width:1000px){ .ann-split { grid-template-columns:1fr; } }
.ann-cards { padding:12px; display:flex; flex-direction:column; gap:10px; }
.ann-card { display:flex; gap:12px; padding:13px 14px; border:1px solid var(--gray-150); border-radius:11px; border-left-width:4px; }
.ann-card.sev-info { border-left-color:#2563eb; }
.ann-card.sev-warning { border-left-color:#d97706; }
.ann-card.sev-critical { border-left-color:#dc2626; }
.ann-card-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--gray-50); color:var(--gray-500); }
.sev-info .ann-card-ic { background:#eff4ff; color:#2563eb; }
.sev-warning .ann-card-ic { background:#fef6e7; color:#d97706; }
.sev-critical .ann-card-ic { background:#fdeaea; color:#dc2626; }
.ann-card-main { flex:1; min-width:0; }
.ann-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ann-card-title { font-size:13px; font-weight:700; color:var(--green-950); }
.ann-status { font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap; }
.ann-status.st-active { background:var(--green-50); color:var(--green-700); }
.ann-status.st-planned { background:#eef2ff; color:#4f46e5; }
.ann-status.st-expired { background:var(--gray-100); color:var(--gray-500); }
.ann-card-body { font-size:12px; color:var(--gray-600); margin-top:4px; line-height:1.45; }
.ann-card-meta { font-size:10.5px; color:var(--gray-400); font-family:var(--mono); margin-top:7px; }
.ann-card-actions { display:flex; gap:4px; margin-top:8px; }

.chip-group { display:flex; gap:8px; }
.chip { flex:1; position:relative; display:flex; align-items:center; justify-content:center; height:34px; border:1px solid var(--gray-200);
  border-radius:8px; font-size:12px; font-weight:600; color:var(--gray-600); cursor:pointer; }
.chip input { position:absolute; opacity:0; width:0; height:0; }
.chip.c-info:has(input:checked) { border-color:#2563eb; background:#eff4ff; color:#2563eb; }
.chip.c-warning:has(input:checked) { border-color:#d97706; background:#fef6e7; color:#b45309; }
.chip.c-critical:has(input:checked) { border-color:#dc2626; background:#fdeaea; color:#dc2626; }
.target-cards { display:flex; flex-direction:column; gap:8px; }
.target-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--gray-200); border-radius:9px; cursor:pointer; }
.target-card:has(input:checked) { border-color:var(--green-600,#1f9d57); background:var(--green-50); box-shadow:0 0 0 1px rgba(31,157,87,.2); }
.target-card input { accent-color:var(--green-700); flex:none; }
.tc-title { font-size:12.5px; font-weight:700; color:var(--green-950); }
.tc-note { font-size:11px; color:var(--gray-500); margin-top:1px; }
.ann-form .field { margin-bottom:12px; }
.ann-form textarea { min-height:80px; }