/* ==========================================================================
   ServisSaati — web paneli (tasarım v3, 20.09.2026)
   Sade, hızlı okunur, Türkçe. Bootstrap yok; yazı tipi Inter (yerel yedekli), CDN yalnız font.

   TEK KAYNAK: aşağıdaki belirteçler (renk / boşluk / yazı ölçüsü / köşe / gölge).
   Görünümlerde sabit renk ya da piksel YAZMAYIN; buradaki değişkenleri kullanın.
   Seçici adları v2 ile aynıdır (görünümler değişmeden çalışır).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* --- Renk: marka --- */
  --ana: #0f6fe6;            /* birincil düğme, bağlantı */
  --ana-koyu: #0b57b8;
  --ana-acik: #e8f1fe;       /* seçili satır zemini, odak halkası */
  --ana-cizgi: #b9d2f5;

  /* --- Renk: durum --- */
  --yesil: #15803d;  --yesil-zemin: #e6f7ec;  --yesil-cizgi: #bfe8cc;
  --kirmizi: #c62828; --kirmizi-zemin: #fdeaea; --kirmizi-cizgi: #f3c2c2;
  --sari: #f59e0b;   --sari-metin: #8a5300;   --sari-zemin: #fff4dc; --sari-cizgi: #f5dfae;
  --mavi: #0b57b8;   --mavi-zemin: #e8f1fe;   --mavi-cizgi: #c3dbf8;
  --gri: #8a94a6;

  /* --- Renk: yüzey ve metin --- */
  --zemin: #f4f6fa;
  --kart: #ffffff;
  --kart-vurgu: #f8fafd;
  --cizgi: #e6eaf1;
  --cizgi-koyu: #d2d9e4;
  --metin: #0f172a;
  --metin-ikincil: #4b5768;
  --metin-soluk: #5d6878;

  /* --- Renk: yan menü --- */
  --menu: #0b1a33;  --menu-2: #10244a;  --menu-metin: #b9c6dd;  --menu-aktif: rgba(255,255,255,.10);  --menu-baslik: #7d8fb0;

  /* --- Boşluk ritmi --- */
  --b1: 4px; --b2: 8px; --b3: 12px; --b4: 16px; --b5: 20px; --b6: 24px; --b8: 32px;

  /* --- Yazı ölçeği --- */
  --yazi-taban: 14.5px; --yazi-tablo: 13.5px; --yazi-kucuk: 12.5px; --yazi-mini: 11.5px;
  --yazi-h1: 20px; --yazi-h2: 15px; --yazi-h3: 13.5px; --yazi-deger: 28px;
  --yazi-ailesi: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --yazi-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  /* --- Köşe, gölge, ölçü --- */
  --radius: 12px; --radius-kucuk: 8px; --radius-tam: 999px;
  --golge: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
  --golge-orta: 0 8px 24px -12px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .04);
  --golge-yuksek: 0 24px 60px -20px rgba(11, 26, 51, .45);
  --dugme-yuk: 36px; --dugme-yuk-kucuk: 30px;
  --menu-genislik: 244px;
  --odak: 0 0 0 3px rgba(15, 111, 230, .32);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: var(--yazi-taban)/1.5 var(--yazi-ailesi); color: var(--metin); background: var(--zemin);
  display: flex; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: var(--yazi-h1); margin: 0 0 var(--b3); line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
h2 { font-size: var(--yazi-h2); margin: var(--b5) 0 var(--b2); line-height: 1.3; font-weight: 700; }
h3 { font-size: var(--yazi-h3); margin: var(--b3) 0 var(--b1); line-height: 1.3; font-weight: 700; }
p { margin: 0 0 var(--b2); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ana); outline-offset: 2px; border-radius: var(--radius-kucuk); }
svg.ikon-svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ==========================  Yan menü  ================================== */
.yan-menu {
  width: var(--menu-genislik); flex: none; color: var(--menu-metin);
  background: linear-gradient(180deg, var(--menu) 0%, var(--menu-2) 100%);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 0 var(--b3) var(--b3);
}
.marka { font-weight: 800; font-size: 16px; padding: 18px var(--b2) 14px; color: #fff; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
/* Logo simgesi (25.09.2026): DOCS/GORSELLER/LOGO paketinden (araclar/logo-turet.py). Koyu menüde beyaz kutu içinde. */
.marka-ikon { width: 36px; height: 36px; padding: 3px; border-radius: 10px; background: #fff; flex: none; display: block; box-shadow: 0 6px 14px -8px rgba(0,0,0,.55); }
.marka b { font-weight: inherit; color: #7db4ff; }
.yan-menu nav { display: flex; flex-direction: column; gap: 2px; }
.yan-menu nav a { color: var(--menu-metin); padding: 9px 10px; display: flex; align-items: center; gap: 10px; border-radius: 9px; font-weight: 500; font-size: 13.5px; }
.yan-menu nav a:hover { background: var(--menu-aktif); text-decoration: none; color: #fff; }
.yan-menu nav a.aktif { background: #fff; color: var(--menu); font-weight: 600; box-shadow: 0 6px 16px -10px rgba(0,0,0,.6); }
.yan-menu nav a.aktif .ikon { color: var(--ana); }
.yan-menu nav a:focus-visible { outline-offset: -3px; outline-color: #fff; }
.yan-menu .ikon { width: 20px; text-align: center; flex: none; display: inline-flex; justify-content: center; opacity: .95; }
.menu-baslik { margin-top: auto; padding: var(--b4) 10px var(--b1); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--menu-baslik); font-weight: 700; }
.yan-menu nav.sistem a { padding: 7px 10px; font-size: var(--yazi-kucuk); }
.yan-menu nav.sistem .ikon { font-size: var(--yazi-kucuk); }
.yan-menu nav.sistem { padding-bottom: var(--b2); }
.menu-ac { display: none; }

@media (max-width: 1080px) {
  :root { --menu-genislik: 64px; }
  .yan-menu { padding: 0 var(--b2) var(--b2); }
  .marka .yazi, .yan-menu nav a .yazi, .menu-baslik { display: none; }
  .marka { justify-content: center; padding: 14px 0 var(--b3); }
  .yan-menu nav a { justify-content: center; padding: 10px 0; }
  .yan-menu nav.sistem a { padding: 8px 0; }
  .menu-baslik { margin-top: auto; padding: 0; height: var(--b3); }
  .yan-menu nav a .ikon { font-size: 17px; }
}
@media (max-width: 720px) {
  .yan-menu { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .18s; --menu-genislik: 244px; width: 244px; padding: 0 var(--b3) var(--b3); }
  body.menu-acik .yan-menu { transform: none; box-shadow: var(--golge-yuksek); }
  .marka .yazi, .yan-menu nav a .yazi, .menu-baslik { display: initial; }
  .marka { justify-content: flex-start; padding: 18px var(--b2) 14px; }
  .yan-menu nav a { justify-content: flex-start; padding: 9px 10px; }
  .menu-ac { display: inline-flex; }
  .menu-perde { position: fixed; inset: 0; background: rgba(11,26,51,.45); z-index: 55; display: none; }
  body.menu-acik .menu-perde { display: block; }
}

/* ==========================  İçerik çerçevesi  ========================== */
.icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ust-bar {
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi); padding: 10px var(--b6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--b4);
  position: sticky; top: 0; z-index: 20; min-height: 60px;
}
.ust-baslik { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.3; min-width: 0; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.ust-baslik-yazi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-kullanici { display: flex; align-items: center; gap: var(--b2); flex: none; }
.ust-kullanici .ad { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.ust-kullanici .ad::before { content: attr(data-bas); width: 30px; height: 30px; border-radius: 50%; background: var(--ana-acik); color: var(--ana-koyu); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
.sayfa { padding: var(--b5) var(--b6) 48px; min-width: 0; }
.sayfa-aciklama { color: var(--metin-ikincil); font-size: var(--yazi-kucuk); margin: -6px 0 var(--b4); max-width: 92ch; }
.satir-ici { display: inline; }
@media (max-width: 720px) {
  .ust-bar { padding: 8px var(--b3); gap: var(--b2); } .sayfa { padding: var(--b3) var(--b3) 40px; } .ust-kullanici .rozet { display: none; }
  .ust-baslik { font-size: 16px; gap: 6px; }
  .ust-kullanici { gap: 6px; }
  .ust-kullanici .ad { font-size: 0; gap: 0; }
  .ust-kullanici .ad::before { font-size: 12px; }
}

/* ==========================  Kart ve ızgara  =========================== */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: var(--b4) var(--b5) var(--b5); box-shadow: var(--golge); margin-bottom: var(--b4); }
.kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); margin-bottom: var(--b3); flex-wrap: wrap; }
.kart-baslik h2 { margin: 0; }
.izgara { display: grid; gap: var(--b4); }
.izgara > * { min-width: 0; }
.izgara-2 { grid-template-columns: 1fr 1fr; }
.izgara-3 { grid-template-columns: repeat(3, 1fr); }
.izgara-4 { grid-template-columns: repeat(4, 1fr); }
.izgara-harita { grid-template-columns: minmax(0, 1fr) 380px; }
.izgara-rota { grid-template-columns: minmax(420px, 520px) minmax(0, 1fr); }
.izgara-sefer { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 1200px) { .izgara-rota, .izgara-sefer, .izgara-harita { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; } }

/* Özet kutuları (KPI) */
.ozet-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--b3); margin-bottom: var(--b4); }
.ozet-kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 14px var(--b4) 12px; box-shadow: var(--golge); min-width: 0; position: relative; overflow: hidden; }
.ozet-kutu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cizgi-koyu); }
.ozet-kutu .deger { font-size: var(--yazi-deger); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ozet-kutu .deger.orta { font-size: 16px; line-height: 1.3; }
.ozet-kutu .etiket { color: var(--metin-ikincil); font-size: var(--yazi-mini); margin-top: 3px; font-weight: 500; }
.ozet-kutu.kirmizi::before { background: var(--kirmizi); } .ozet-kutu.kirmizi .deger { color: var(--kirmizi); }
.ozet-kutu.yesil::before { background: var(--yesil); }   .ozet-kutu.yesil .deger { color: var(--yesil); }
.ozet-kutu.mavi::before { background: var(--ana); }      .ozet-kutu.mavi .deger { color: var(--mavi); }
.ozet-kutu.sari::before { background: var(--sari); }     .ozet-kutu.sari .deger { color: var(--sari-metin); }

/* ==========================  Tablolar  ================================= */
.tablo-kap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--cizgi); background: var(--kart); box-shadow: var(--golge); margin-bottom: var(--b4); }
.kart .tablo-kap { border: 0; box-shadow: none; margin-bottom: 0; }
table.tablo { width: 100%; border-collapse: collapse; background: var(--kart); font-size: var(--yazi-tablo); }
.tablo th, .tablo td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: middle; }
.tablo thead th {
  background: var(--kart-vurgu); font-weight: 600; font-size: var(--yazi-mini); color: var(--metin-ikincil);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; border-bottom: 1px solid var(--cizgi-koyu);
  position: sticky; top: 0; z-index: 1;
}
.tablo-sik th, .tablo-sik td { padding: 8px 8px; }
.tablo tbody tr:nth-child(even) td { background: #fbfcfe; }
.tablo tbody tr:hover td { background: var(--ana-acik); }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo td.sag, .tablo th.sag { text-align: right; font-variant-numeric: tabular-nums; }
.tablo td.dar, .tablo th.dar { white-space: nowrap; width: 1%; }
.tablo td.tasmaz { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablo .islemler { white-space: nowrap; width: 1%; text-align: right; }
.tablo .islemler form { display: inline-block; }
.tablo .islemler > * + * { margin-left: var(--b1); }
.tablo .telefon { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablo .bos { background: var(--kart) !important; }
/* Dar ekranda sütunlar harf harf kırılmasın: tablo yatay kaysın, her sütun okunur genişlikte kalsın */
@media (max-width: 720px) {
  .tablo th, .tablo td { padding: 8px 10px; }
  .tablo thead th { white-space: nowrap; }
  .tablo tbody td { min-width: 110px; }
  .tablo tbody td:first-child, .tablo tbody td:has(> input[type=checkbox]) + td { min-width: 150px; }
  .tablo tbody td.dar, .tablo tbody td.islemler, .tablo tbody td:has(> input[type=checkbox]), .tablo tbody td.bos { min-width: 0; }
}

.bos { color: var(--metin-ikincil); padding: var(--b8) var(--b4); text-align: center; }
.bos b, .bos strong { display: block; color: var(--metin); font-size: var(--yazi-taban); margin-bottom: var(--b1); }
.bos .ipucu { display: block; margin-top: var(--b1); }

/* ==========================  Rozetler  ================================= */
.rozet { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-tam); font-size: var(--yazi-mini); font-weight: 600; line-height: 1.6; white-space: nowrap; border: 1px solid transparent; }
.rozet-gri { background: #eef1f6; color: #4a5568; border-color: #e2e7ef; }
.rozet-yesil { background: var(--yesil-zemin); color: var(--yesil); border-color: var(--yesil-cizgi); }
.rozet-kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi); border-color: var(--kirmizi-cizgi); }
.rozet-sari { background: var(--sari-zemin); color: var(--sari-metin); border-color: var(--sari-cizgi); }
.rozet-mavi { background: var(--mavi-zemin); color: var(--mavi); border-color: var(--mavi-cizgi); }
a.rozet:hover { text-decoration: none; filter: brightness(.96); }
.rozet-nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--b1); vertical-align: middle; }

/* ==========================  Düğmeler  ================================= */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--dugme-yuk); padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--cizgi-koyu); background: var(--kart); color: var(--metin);
  cursor: pointer; font: inherit; font-size: var(--yazi-tablo); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s, transform .08s;
  box-shadow: 0 1px 1px rgba(15,23,42,.04);
}
.dugme:hover { background: #f3f6fa; text-decoration: none; border-color: #bfc9d8; }
.dugme:active { transform: translateY(1px); }
.dugme-birincil { background: var(--ana); border-color: var(--ana); color: #fff; box-shadow: 0 6px 14px -8px rgba(15,111,230,.8); }
.dugme-birincil:hover, .dugme-birincil:active { background: var(--ana-koyu); border-color: var(--ana-koyu); color: #fff; }
.dugme-yesil { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.dugme-yesil:hover { background: #136a33; border-color: #136a33; color: #fff; }
.dugme-tehlike { background: var(--kart); border-color: var(--kirmizi-cizgi); color: var(--kirmizi); }
.dugme-tehlike:hover { background: var(--kirmizi-zemin); border-color: var(--kirmizi); }
.dugme-sade { border-color: transparent; background: transparent; color: var(--metin-ikincil); box-shadow: none; }
.dugme-sade:hover { background: #e9edf4; color: var(--metin); border-color: transparent; }
.dugme-kucuk { min-height: var(--dugme-yuk-kucuk); padding: 0 10px; font-size: var(--yazi-kucuk); border-radius: 7px; }
.dugme-genis { width: 100%; margin-top: var(--b2); }
.dugme:disabled, .dugme[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.dugme-satir { display: flex; gap: var(--b2); flex-wrap: wrap; align-items: center; }
.dugme-satir.ayrik { justify-content: space-between; }
.dugme-satir .ayirici { flex: 1 1 auto; }
.dugme.mesgul { position: relative; color: transparent !important; pointer-events: none; }
.dugme.mesgul::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--metin-ikincil); animation: donuyor .7s linear infinite;
}
.dugme-birincil.mesgul::after, .dugme-yesil.mesgul::after { color: #fff; }
@keyframes donuyor { to { transform: rotate(360deg); } }

/* ==========================  Formlar  ================================== */
label { display: block; font-size: var(--yazi-kucuk); color: var(--metin-ikincil); margin-bottom: var(--b3); font-weight: 500; }
label > input, label > select, label > textarea { display: block; width: 100%; margin-top: 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=search], input[type=tel], input[type=email], input:not([type]), select, textarea {
  font: inherit; font-size: var(--yazi-tablo); color: var(--metin); min-height: var(--dugme-yuk);
  padding: 6px 10px; border: 1px solid var(--cizgi-koyu); border-radius: 9px; background: #fff; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: #b4bfcf; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ana); box-shadow: var(--odak); }
input[readonly], input:disabled, select:disabled, textarea[readonly], textarea:disabled { background: #f4f6fa; color: var(--metin-ikincil); cursor: not-allowed; }
textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
label.onay { display: flex; align-items: center; gap: 8px; font-size: var(--yazi-tablo); color: var(--metin); min-height: var(--dugme-yuk); }
label.onay input { width: auto; min-height: 0; margin: 0; accent-color: var(--ana); width: 16px; height: 16px; }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--b4); }
.form-izgara .genis { grid-column: 1 / -1; }
.alan-aciklamasi { display: block; color: var(--metin-soluk); font-size: var(--yazi-mini); margin-top: 4px; font-weight: 400; }

.suzgec { display: flex; gap: var(--b2); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--b3); }
.suzgec label { margin: 0; min-width: 150px; }
.suzgec .dugme { margin-bottom: 0; }
.arac-cubugu { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--b4); flex-wrap: wrap; margin-bottom: var(--b3); }
.arac-cubugu .suzgec { margin-bottom: 0; }

.dogrulama.validation-summary-valid, .dogrulama:empty { display: none; }
.dogrulama ul { list-style: none; margin: 0 0 var(--b3); padding: 10px var(--b3); background: var(--kirmizi-zemin); border: 1px solid var(--kirmizi-cizgi); color: #8e1c1c; border-radius: var(--radius-kucuk); }
.dogrulama li { padding-left: 18px; position: relative; }
.dogrulama li + li { margin-top: var(--b1); }
.dogrulama li::before { content: "•"; position: absolute; left: 6px; color: var(--kirmizi); font-weight: 700; }
.dogrulama li[style*="none"] { display: none; }
.field-validation-error { display: block; color: var(--kirmizi); font-size: var(--yazi-mini); margin-top: 3px; font-weight: 600; }
.input-validation-error { border-color: var(--kirmizi) !important; background: #fffafa; }

.uyari { padding: 10px 14px; border-radius: 10px; margin-bottom: var(--b3); border: 1px solid transparent; font-size: var(--yazi-tablo); display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.uyari-yesil { background: var(--yesil-zemin); color: #14501a; border-color: var(--yesil-cizgi); }
.uyari-kirmizi { background: var(--kirmizi-zemin); color: #8e1c1c; border-color: var(--kirmizi-cizgi); }
.uyari-sari { background: var(--sari-zemin); color: #6b4600; border-color: var(--sari-cizgi); }
.uyari-mavi { background: var(--mavi-zemin); color: #0d3f7a; border-color: var(--mavi-cizgi); }
.uyari[data-kapan] { cursor: pointer; }
.ipucu { color: var(--metin-soluk); font-size: var(--yazi-kucuk); }
.buyuk-sifre {
  font-size: 40px; font-weight: 800; letter-spacing: .15em; font-family: var(--yazi-mono);
  text-align: center; padding: var(--b4); background: #fff8e1; border: 2px dashed var(--sari); border-radius: var(--radius); margin: 10px 0;
}

/* ==========================  Sayfalama  ================================ */
.sayfalama { display: flex; gap: 6px; align-items: center; margin-top: var(--b3); flex-wrap: wrap; font-size: var(--yazi-tablo); }
.sayfalama a, .sayfalama .simdiki { display: inline-flex; align-items: center; min-height: var(--dugme-yuk-kucuk); padding: 0 10px; border: 1px solid var(--cizgi-koyu); border-radius: 7px; background: #fff; }
.sayfalama a:hover { background: #f3f6fa; text-decoration: none; }
.sayfalama .simdiki { background: var(--ana); color: #fff; border-color: var(--ana); font-weight: 600; }
.sayfalama .sayi { color: var(--metin-ikincil); margin-right: var(--b1); }

/* ==========================  Harita  =================================== */
.harita { width: 100%; height: 520px; border-radius: var(--radius); border: 1px solid var(--cizgi); background: #e9edf3; box-shadow: var(--golge); }
.harita-kucuk { height: 320px; }
.harita-tam { height: calc(100vh - 220px); min-height: 460px; }
.harita-kap { position: relative; }
.harita-kap.yapiskan { position: sticky; top: 76px; }
.harita-uyari {
  position: absolute; inset: auto var(--b3) var(--b3) var(--b3); z-index: 500;
  background: var(--sari-zemin); border: 1px solid var(--sari-cizgi); color: #6b4600;
  padding: var(--b2) var(--b3); border-radius: var(--radius-kucuk); font-size: var(--yazi-kucuk); box-shadow: var(--golge);
}
.plaka-etiket { background: var(--menu); color: #fff; font-weight: 700; font-size: var(--yazi-mini); padding: 3px 7px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); white-space: nowrap; }
.plaka-etiket.eski { background: var(--kirmizi); }

.toplu-cubuk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2);
  background: var(--ana-acik); border: 1px solid var(--ana-cizgi); border-radius: 10px; padding: var(--b2) var(--b3); margin-bottom: var(--b3); }
.toplu-cubuk label { display: flex; align-items: center; gap: var(--b2); font-size: var(--yazi-kucuk); }
.tablo tbody tr.secili-satir td { background: var(--ana-acik); }

/* ── Grafik ── */
.izgara-grafik { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b4); }
@media (max-width: 1100px) { .izgara-grafik { grid-template-columns: 1fr; } }
.grafik-kap { width: 100%; overflow-x: auto; }
.grafik { width: 100%; height: auto; display: block; }
.gr-cubuk { fill: var(--ana); rx: 3; }
.gr-cubuk:hover { fill: var(--ana-koyu); }
.gr-asti { fill: var(--kirmizi); }
.gr-eksen { stroke: var(--cizgi-koyu); stroke-width: 1; }
.gr-esik { stroke: var(--metin-soluk); stroke-width: 1; stroke-dasharray: 4 3; }
.gr-eksen-yazi { fill: var(--metin-ikincil); font-size: 11px; }
.gr-deger { fill: var(--metin); font-size: 11px; font-weight: 700; }
.gr-eksen-yazi.orta, .gr-deger.orta { text-anchor: middle; }
.gr-eksen-yazi.sag { text-anchor: end; }

.vurgu-canli td { animation: canli-vurgu 2s ease-out; }
@keyframes canli-vurgu { from { background: #fff3cd; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .vurgu-canli td { animation: none; background: #fff3cd; } }
.durak-pin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.leaflet-div-icon { background: transparent; border: 0; }
.leaflet-container { font: inherit; font-size: var(--yazi-kucuk); }

/* ==========================  Canlı sefer listesi  ====================== */
.sefer-liste { max-height: calc(100vh - 220px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--b2); }

/* ==========================  Rota durak listesi  ======================= */
.durak-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--b1); }
.durak-liste li { display: flex; align-items: center; gap: var(--b2); background: #fff; border: 1px solid var(--cizgi); border-radius: 9px; padding: 5px var(--b2); min-height: 44px; }
.durak-liste li:hover { border-color: var(--ana-cizgi); background: #fbfcfe; }
.durak-liste li.surukleniyor { opacity: .4; }
.durak-liste li.bos { display: block; border: 1px dashed var(--cizgi-koyu); background: var(--kart-vurgu); }
.durak-liste .tutamac { cursor: grab; color: var(--gri); font-size: 16px; padding: 0 2px; flex: none; }
.durak-liste .sira { width: 24px; height: 24px; border-radius: 50%; background: var(--ana); color: #fff; font-size: var(--yazi-mini); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.durak-liste .ad { flex: 1; min-width: 0; line-height: 1.25; }
.durak-liste .ad > a { font-weight: 600; white-space: nowrap; }
.durak-liste .ad > .mini { white-space: nowrap; }
.durak-liste .ad small { display: block; color: var(--metin-soluk); font-size: var(--yazi-mini); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.durak-liste input[type=time] { width: 88px; padding: 3px 4px; min-height: var(--dugme-yuk-kucuk); flex: none; }
.durak-liste .dugme { flex: none; width: var(--dugme-yuk-kucuk); padding: 0; }
.durak-liste .konumsuz { color: var(--kirmizi); font-weight: 600; }
.durak-liste .saat-yazdir { display: none; }
.toplam-sure { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.toplam-sure.asildi { color: var(--kirmizi); }
.oneri-karsilastirma { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b3); }
.oneri-karsilastirma > div { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px var(--b3); background: var(--kart-vurgu); }
.oneri-karsilastirma h3 { margin-top: 0; }
.oneri-karsilastirma ol { margin: 6px 0 0; padding-left: var(--b5); font-size: var(--yazi-tablo); }
.oneri-karsilastirma li + li { margin-top: 2px; }
.kazanc { color: var(--yesil); font-weight: 600; font-size: var(--yazi-kucuk); }

/* ==========================  Mesaj balonları  ========================== */
.mesajlar { display: flex; flex-direction: column; gap: var(--b2); max-height: 58vh; overflow-y: auto; padding: var(--b2) 0; }
.balon { max-width: 70%; padding: var(--b2) var(--b3); border-radius: 14px; background: #eef1f6; }
.balon.ben { align-self: flex-end; background: var(--ana-acik); }
.balon .kim { font-size: var(--yazi-mini); color: var(--metin-ikincil); margin-bottom: 2px; font-weight: 600; }
.balon .zaman { font-size: var(--yazi-mini); color: var(--metin-soluk); margin-top: 2px; text-align: right; }
.konusma-liste a { display: flex; justify-content: space-between; gap: var(--b3); align-items: center; padding: 10px var(--b3); border-bottom: 1px solid var(--cizgi); color: var(--metin); }
.konusma-liste a:hover { background: var(--ana-acik); text-decoration: none; }
.konusma-liste .son { color: var(--metin-soluk); font-size: var(--yazi-kucuk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.duyuru-satir { border-bottom: 1px solid var(--cizgi); padding: 10px 0; }
.duyuru-satir:last-of-type { border-bottom: 0; }
.duyuru-satir .metin { font-size: var(--yazi-tablo); white-space: pre-wrap; margin: 2px 0; }

/* ==========================  Giriş ekranı  ============================= */
.giris-govde { background: radial-gradient(70% 60% at 20% 10%, #16305e 0%, var(--menu) 60%, #071024 100%); align-items: center; justify-content: center; }
.giris-alan { width: 100%; display: flex; justify-content: center; padding: var(--b5); }
.giris-kutu { background: var(--kart); border-radius: 18px; padding: 32px 34px; width: 400px; max-width: 100%; box-shadow: var(--golge-yuksek); }
.giris-kutu .marka { color: var(--metin); padding: 0 0 var(--b3); justify-content: center; }
.giris-kutu .marka b { color: var(--ana); }
.giris-kutu .marka-ikon { width: 44px; height: 44px; padding: 0; box-shadow: none; }
.giris-kutu h1 { margin-bottom: var(--b1); text-align: center; }
.giris-kutu .aciklama { color: var(--metin-ikincil); margin-bottom: var(--b5); font-size: var(--yazi-tablo); text-align: center; }
.giris-kutu label { margin-bottom: var(--b3); }
.giris-kutu input { min-height: 42px; }
.giris-kutu .dugme-genis { min-height: 44px; margin-top: var(--b3); }

/* ==========================  Küçük yardımcılar  ======================== */
.sag { text-align: right; }
.soluk { color: var(--metin-soluk); font-weight: 400; }
.kirmizi-metin { color: var(--kirmizi); font-weight: 600; }
.yesil-metin { color: var(--yesil); font-weight: 600; }
.mono { font-family: var(--yazi-mono); font-size: var(--yazi-kucuk); }
.kucuk { font-size: var(--yazi-kucuk); }
.mini { font-size: var(--yazi-mini); }
.bosluk { height: 10px; }
.sayisal { font-variant-numeric: tabular-nums; }
details > summary { cursor: pointer; font-weight: 600; font-size: var(--yazi-tablo); padding: var(--b1) 0; }
details > summary:hover { color: var(--ana); }
.kaydirilabilir { max-height: 380px; overflow-y: auto; }
.satir-arasi > * + * { margin-top: var(--b2); }
.gecikti td { background: #fff5f5 !important; }
.tablo tbody tr.gecikti:hover td { background: #ffecec !important; }
.yazdir-basligi { display: none; }

/* ==========================  Yazdırma  ================================= */
@media print {
  @page { size: A4 portrait; margin: 12mm 10mm; }
  :root { --yazi-taban: 11pt; }
  body { display: block; background: #fff; color: #000; font-size: 11pt; }
  .yan-menu, .ust-bar, .suzgec, .arac-cubugu .dugme-satir, .dugme, .dugme-satir,
  .sayfalama, .harita, .harita-kap, .leaflet-container, .uyari, form.suzgec,
  #oneri-kart, #ekle-kart, .tutamac, .durak-liste .dugme, .ipucu, details,
  .sayfa-aciklama, .konusma-liste, .menu-perde { display: none !important; }
  .icerik, .sayfa { display: block; padding: 0; }
  .kart { border: 0; box-shadow: none; padding: 0; margin: 0 0 8mm; break-inside: auto; }
  .izgara, .izgara-2, .izgara-rota, .izgara-sefer, .izgara-harita, .ozet-satir { display: block; }
  .ozet-kutu { display: inline-block; border: 1px solid #999; margin: 0 4mm 3mm 0; padding: 2mm 3mm; box-shadow: none; }
  .ozet-kutu::before { display: none; }
  .ozet-kutu .deger { font-size: 14pt; }
  .tablo-kap { overflow: visible; border: 0; box-shadow: none; }
  table.tablo { font-size: 9.5pt; page-break-inside: auto; }
  .tablo thead { display: table-header-group; }
  .tablo tr { page-break-inside: avoid; }
  .tablo th, .tablo td { border-bottom: 1px solid #bbb; padding: 3px 5px; }
  .tablo thead th { background: #eee !important; color: #000; position: static; }
  .tablo tbody tr:nth-child(even) td, .tablo tbody tr td { background: #fff !important; }
  .tablo .islemler { display: none; }
  .durak-liste li { border: 0; border-bottom: 1px solid #bbb; border-radius: 0; padding: 2mm 0; min-height: 0; break-inside: avoid; }
  .durak-liste input[type=time] { display: none; }
  .durak-liste .saat-yazdir { display: inline-block; font-weight: 700; font-size: 11pt; min-width: 16mm; text-align: right; }
  .durak-liste .ad small { white-space: normal; color: #444; }
  .durak-liste .sira { background: #fff; color: #000; border: 1px solid #000; }
  .yazdir-basligi { display: block; margin-bottom: 4mm; border-bottom: 2px solid #000; padding-bottom: 2mm; }
  .yazdir-basligi h1 { font-size: 15pt; margin: 0; }
  .yazdir-basligi .alt { font-size: 10pt; color: #333; }
  .rozet { border: 1px solid #999; background: #fff !important; color: #000 !important; }
  a { color: #000; text-decoration: none; }
  .toplam-sure { font-size: 14pt; }
}

/* ── Dikkat satırı (ana sayfa) ── */
.dikkat-satir { display: flex; flex-wrap: wrap; gap: var(--b2); margin: -6px 0 var(--b4); }
.dikkat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius-tam); border: 1px solid var(--cizgi); background: var(--kart); font-size: var(--yazi-kucuk); color: var(--metin); box-shadow: var(--golge); }
.dikkat:hover { text-decoration: none; filter: brightness(.97); }
.dikkat.kirmizi { background: var(--kirmizi-zemin); border-color: var(--kirmizi-cizgi); color: #8e1c1c; }
.dikkat.sari { background: var(--sari-zemin); border-color: var(--sari-cizgi); color: #6b4600; }
.dikkat.mavi { background: var(--mavi-zemin); border-color: var(--mavi-cizgi); color: #0d3f7a; }
.tanim { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--b3); margin: 0; }
.tanim dt { color: var(--metin-ikincil); font-size: var(--yazi-kucuk); }
.tanim dd { margin: 0; }

/* Kurumlar ekranı: satır içi işlem menüsü (22.09.2026) */
.acilir summary { list-style: none; cursor: pointer; display: inline-block; }
.acilir summary::-webkit-details-marker { display: none; }
.acilir-icerik { position: absolute; right: 0; z-index: 20; margin-top: 4px; padding: 10px; min-width: 260px; background: var(--kart, #fff); border: 1px solid var(--cizgi, #ddd); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: grid; gap: 8px; }
.acilir { position: relative; }

/* Canlı izleme — sefer kartı + durak "yapılacaklar" listesi + durak ayrıntısı (22.09.2026) */
.canli-sag { min-width: 0; }
.canli-sag .sefer-liste { max-height: calc(100vh - 260px); overflow-y: auto; padding-right: 2px; }
.sefer-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--golge); overflow: hidden; }
.sefer-kart.secili { border-color: var(--ana); box-shadow: 0 0 0 2px var(--mavi-zemin); }
.sefer-bas { padding: 12px 14px; cursor: pointer; display: grid; gap: 6px; }
.sefer-bas:hover { background: var(--kart-vurgu); }
.sefer-bas .baslik { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.sefer-bas .sayilar { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--yazi-mini); color: var(--metin-ikincil); align-items: center; }
.sefer-bas .sayilar b { color: var(--metin); }
.sefer-bas .konum { font-size: var(--yazi-mini); color: var(--metin-ikincil); }
.sefer-bas .konum.kesik { color: var(--kirmizi); font-weight: 600; }
.ilerleme { height: 6px; background: var(--cizgi); border-radius: 3px; overflow: hidden; }
.ilerleme-dolu { height: 100%; background: var(--yesil); transition: width .4s; }
.sefer-kart .durak-liste { border-top: 1px solid var(--cizgi); background: var(--kart-vurgu); }
.durak-satir { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--cizgi); cursor: pointer; font-size: var(--yazi-tablo); }
.durak-satir:last-child { border-bottom: 0; }
.durak-satir:hover, .durak-satir.secili { background: var(--mavi-zemin); }
.durak-satir.bitti .durak-ad b { color: var(--metin-ikincil); text-decoration: line-through; text-decoration-color: var(--cizgi-koyu); }
.durak-satir.yanip { animation: yanip 1.5s ease-out; }
@keyframes yanip { 0% { background: #fff3c4; } 100% { background: transparent; } }
.durak-no { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; align-items: center; justify-content: center; flex: none; }
.durak-ad { display: grid; gap: 1px; min-width: 0; }
.durak-ad b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.durak-durum { white-space: nowrap; }
.durak-pin.secili { outline: 3px solid #fff; box-shadow: 0 0 0 3px var(--ana); transform: scale(1.25); }
.durak-detay { margin-top: 12px; }
.durak-detay h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detay-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; }
.detay-izgara .etiket { font-size: var(--yazi-mini); color: var(--metin-ikincil); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 2px; }
.detay-izgara .genis { grid-column: 1 / -1; }
.harita-kap { position: relative; }
.harita-lejant { position: absolute; left: 10px; bottom: 10px; z-index: 500; background: rgba(255,255,255,.92); border: 1px solid var(--cizgi); border-radius: 8px; padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--metin-ikincil); }
.harita-lejant i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.mavi-metin { color: var(--mavi); }

/* Veli bağlama: kayıtlı veliden seçme (22.09.2026) */
.sekmeler { display: flex; gap: 6px; flex-wrap: wrap; }
.veli-sonuc { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--cizgi); border-radius: 10px; padding: 6px; background: var(--kart-vurgu); }
.veli-satir { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--kart); cursor: pointer; font: inherit; color: inherit; }
.veli-satir:hover { border-color: var(--mavi-cizgi); background: var(--mavi-zemin); }
.veli-satir.secili { border-color: var(--ana); background: var(--mavi-zemin); box-shadow: 0 0 0 2px var(--mavi-zemin); }
.veli-satir.bagli { opacity: .6; cursor: default; }
.veli-satir b { flex: 1; }

/* Canlı izleme — premium yüzey: harita kartı, gün akışı (22.09.2026) */
.harita-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge); overflow: hidden; }
.harita-kart .harita-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); background: linear-gradient(180deg, var(--kart-vurgu), var(--kart)); }
.harita-kart .harita-bas h2 { margin: 0; font-size: 15px; }
.harita-kart .harita { border: 0; border-radius: 0; box-shadow: none; }
.harita-kart .harita-tam { height: calc(100vh - 300px); min-height: 420px; }
.gun-akisi { display: grid; gap: 8px; }
.gun-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; box-shadow: var(--golge); cursor: pointer; }
.gun-kart:hover { border-color: var(--mavi-cizgi); }
.gun-kart.secili { border-color: var(--ana); box-shadow: 0 0 0 2px var(--mavi-zemin); }
.gun-kart .saat { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.gun-kart .saat small { display: block; font-weight: 500; color: var(--metin-ikincil); font-size: 11px; }
.gun-kart .ad { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gun-kart .alt { font-size: var(--yazi-mini); color: var(--metin-ikincil); }
.ozet-kutu .ikon { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--kart-vurgu); color: var(--metin-ikincil); font-size: 15px; }
.ozet-kutu.mavi .ikon { background: var(--mavi-zemin); color: var(--mavi); } .ozet-kutu.yesil .ikon { background: var(--yesil-zemin); color: var(--yesil); } .ozet-kutu.kirmizi .ikon { background: var(--kirmizi-zemin); color: var(--kirmizi); }

/* ═══════════ Canlı izleme — premium yüzey (22.09.2026) ═══════════ */
.canli { display: grid; gap: var(--b4); }
.canli-ust { background: linear-gradient(135deg, #0b1a33 0%, #10244a 55%, #0f3d8a 100%); color: #fff; border-radius: 18px; padding: 22px 24px 20px; box-shadow: var(--golge-orta); position: relative; overflow: hidden; }
.canli-ust::after { content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent); pointer-events: none; }
.canli-baslik { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.canli-tarih { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #b9c6dd; font-weight: 600; }
.canli-h { margin: 2px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.canli-durum { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); }
.canli-durum .soluk { color: #b9c6dd; font-weight: 500; font-variant-numeric: tabular-nums; }
.canli-durum .ayrac { color: rgba(255,255,255,.35); }
.canli-durum .yesil-metin { color: #7ee2a0; } .canli-durum .kirmizi-metin { color: #ff9c9c; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: #8a94a6; box-shadow: 0 0 0 0 rgba(126,226,160,.6); }
.nokta.canli { background: #34d17a; animation: nabiz 2s infinite; } .nokta.kopuk { background: #ff6b6b; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(52,209,122,.55); } 70% { box-shadow: 0 0 0 9px rgba(52,209,122,0); } 100% { box-shadow: 0 0 0 0 rgba(52,209,122,0); } }
.istat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.istat-kutu { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px; min-width: 0; transition: background .2s; }
.istat-kutu:hover { background: rgba(255,255,255,.13); }
.istat-ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.12); flex: none; }
.istat-ikon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.istat-kutu.mavi .istat-ikon { background: rgba(96,165,250,.28); } .istat-kutu.yesil .istat-ikon { background: rgba(52,209,122,.28); }
.istat-kutu.kirmizi .istat-ikon { background: rgba(255,107,107,.30); } .istat-kutu.sari .istat-ikon { background: rgba(245,158,11,.30); }
.istat-deger { font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.istat-kutu.kirmizi .istat-deger { color: #ffb4b4; } .istat-kutu.yesil .istat-deger { color: #9ff0bd; } .istat-kutu.mavi .istat-deger { color: #bcdcff; }
.istat-etiket { font-size: 12px; color: #c9d4e6; margin-top: 2px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .istat { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .istat { grid-template-columns: repeat(2, 1fr); } .canli-h { font-size: 20px; } }
.canli-govde { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--b4); align-items: start; }
@media (max-width: 1200px) { .canli-govde { grid-template-columns: 1fr; } }
.canli .harita-kart { border-radius: 18px; box-shadow: var(--golge-orta); }
.canli .harita-bas { padding: 12px 16px; background: var(--kart); border-bottom: 1px solid var(--cizgi); }
.canli .harita-bas h2 { font-size: 15px; font-weight: 700; margin: 0 0 1px; }
.canli .harita-kart .harita-tam { height: calc(100vh - 330px); min-height: 480px; }
.canli .harita-lejant { left: 12px; bottom: 12px; border-radius: 10px; padding: 7px 12px; background: rgba(255,255,255,.94); box-shadow: var(--golge); font-weight: 500; }
.canli-sag { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: var(--golge-orta); padding: 14px 14px 12px; min-width: 0; }
.sag-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 12px; }
.sag-bas h2 { margin: 0; font-size: 15px; font-weight: 700; }
.canli-sag .sefer-liste { max-height: calc(100vh - 360px); min-height: 200px; overflow-y: auto; padding-right: 4px; gap: 10px; display: flex; flex-direction: column; }
.canli-sag .bos { background: var(--kart-vurgu); border: 1px dashed var(--cizgi-koyu); border-radius: 12px; padding: 24px 16px; text-align: center; color: var(--metin-ikincil); }
.canli-sag .bos b { display: block; margin-bottom: 4px; color: var(--metin); }
.gun-akisi { display: grid; gap: 10px; }
.gun-kart { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--kart-vurgu); box-shadow: none; position: relative; }
.gun-kart::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cizgi-koyu); }
.gun-kart.d-planlandi::before { background: var(--sari); } .gun-kart.d-tamamlandi::before { background: var(--yesil); } .gun-kart.d-basladi::before, .gun-kart.d-okuldavarildi::before { background: var(--ana); }
.gun-kart:hover { background: #fff; border-color: var(--ana-cizgi); box-shadow: var(--golge); }
.gun-kart.secili { background: #fff; border-color: var(--ana); box-shadow: 0 0 0 3px var(--ana-acik); }
.gun-kart .saat { font-size: 17px; font-weight: 800; line-height: 1.1; padding-left: 6px; }
.gun-kart .saat small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-soluk); font-weight: 600; }
.gun-kart .govde { min-width: 0; display: grid; gap: 6px; }
.gun-kart .ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gun-kart .ad { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gun-kart .alt { font-size: 12px; color: var(--metin-ikincil); line-height: 1.4; }
.gun-kart .ilerleme { height: 5px; }
.canli .sefer-kart { border-radius: 14px; }
.canli .sefer-bas .baslik { font-size: 14.5px; }
.canli .plaka-etiket { font-weight: 800; letter-spacing: .04em; }

/* Harita kartı: koyu başlık bandıyla aynı dil, belirgin çerçeve (kullanıcı, 22.09.2026) */
.canli .harita-kart { border: 1px solid #10244a; box-shadow: 0 10px 30px -14px rgba(11, 26, 51, .45), 0 2px 6px rgba(15, 23, 42, .06); }
.canli .harita-bas { background: linear-gradient(135deg, #0b1a33 0%, #10244a 60%, #0f3d8a 100%); color: #fff; border-bottom: 0; padding: 14px 18px; display: flex; align-items: center; gap: 12px; justify-content: flex-start; }
.canli .harita-bas h2 { color: #fff; font-size: 15px; letter-spacing: -.01em; }
.canli .harita-bas .soluk { color: #b9c6dd; }
.canli .harita-bas::before { content: ""; width: 34px; height: 34px; border-radius: 10px; flex: none; background: rgba(255,255,255,.12) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E"); }
.canli .harita-kap { padding: 10px; background: #fff; }
.canli .harita-kart .harita { border-radius: 12px; border: 1px solid var(--cizgi-koyu); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.canli .harita-lejant { left: 22px; bottom: 22px; }
.canli-sag { border-color: var(--cizgi-koyu); }

/* ── Sayfa bandı (tasarım v8, 23.09.2026) — canlı izlemedeki koyu bantla aynı dil; tüm liste/detay sayfaları ── */
.sayfa-bant {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: var(--b4) var(--b6); flex-wrap: wrap; margin: 0 0 var(--b5); padding: 18px 22px; border-radius: 16px; color: #fff;
  background: radial-gradient(120% 160% at 0% 0%, #1d3f7c 0%, #12295a 42%, #0b1a33 100%);
  box-shadow: 0 18px 40px -24px rgba(11, 26, 51, .7), 0 2px 6px rgba(11, 26, 51, .12);
}
.sayfa-bant::after {
  content: ""; position: absolute; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, .32), transparent 70%); pointer-events: none;
}
.sayfa-bant-sol { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 360px; position: relative; z-index: 1; }
.sayfa-bant-ikon {
  flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.16);
}
.sayfa-bant-ikon .ikon-svg { width: 22px; height: 22px; color: #d5e4ff; }
.sayfa-bant-baslik { font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: #fff; }
.sayfa-bant p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: rgba(226, 236, 255, .78); max-width: 90ch; }
.sayfa-bant a { color: #bcd6ff; }
.sayfa-bant-olcumler { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.sayfa-bant-olcum {
  min-width: 108px; padding: 9px 14px 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(4px);
}
.sayfa-bant-olcum b { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; }
.sayfa-bant-olcum span { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(226, 236, 255, .74); white-space: nowrap; }
.sayfa-bant-olcum.yesil b { color: #86efac; }
.sayfa-bant-olcum.sari b { color: #fcd34d; }
.sayfa-bant-olcum.kirmizi b { color: #fca5a5; }
@media (max-width: 720px) {
  .sayfa-bant { padding: 14px 16px; border-radius: 14px; }
  .sayfa-bant-ikon { width: 40px; height: 40px; }
  .sayfa-bant-baslik { font-size: 17px; }
  .sayfa-bant p { font-size: 12.5px; }
  .sayfa-bant-olcumler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .sayfa-bant-olcum { min-width: 0; padding: 8px 12px 7px; }
  .sayfa-bant-olcum b { font-size: 19px; overflow-wrap: anywhere; }
  .sayfa-bant-olcum span { white-space: normal; line-height: 1.3; }
}
@media print { .sayfa-bant { background: none; color: var(--metin); box-shadow: none; border: 1px solid var(--cizgi); } .sayfa-bant p, .sayfa-bant-baslik { color: var(--metin); } }

/* ── Tasarım v9 (23.09.2026): tek KPI dili, bölümlü süzgeç, okunur durum rozeti, boş durum simgesi ── */
.sayfa-bant-baslik { margin: 0; }                      /* bant başlığı sayfanın tek <h1>'i */
.ust-baslik.ikincil { font-size: 15px; font-weight: 600; color: var(--metin-ikincil); }

/* Detay sayfalarındaki özet kutuları: sol şerit yerine etiket noktası, yumuşak gölge */
.ozet-satir { gap: 12px; }
.ozet-kutu { border-radius: 14px; padding: 14px 16px 13px; background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 24px -18px rgba(16, 24, 40, .35); }
.ozet-kutu::before { display: none; }
.ozet-kutu .etiket::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--cizgi-koyu); }
.ozet-kutu.kirmizi .etiket::before { background: var(--kirmizi); }
.ozet-kutu.yesil .etiket::before { background: var(--yesil); }
.ozet-kutu.mavi .etiket::before { background: var(--ana); }
.ozet-kutu.sari .etiket::before { background: var(--sari); }

/* Bölümlü seçim (süzgeç anahtarları birincil düğme gibi görünmesin; tek birincil eylem kalsın) */
.bolumlu { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--kart-vurgu); border: 1px solid var(--cizgi); }
.bolumlu a, .bolumlu button { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--metin-ikincil); font: inherit; font-size: var(--yazi-kucuk); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.bolumlu a:hover, .bolumlu button:hover { color: var(--metin); text-decoration: none; }
.bolumlu .secili { background: var(--kart); color: var(--ana-koyu); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 0 0 1px var(--cizgi); }

/* Durum rozeti: renk yalnız zemin tonu ve noktada; yazı koyu (renkli yazı 1,9–3,4:1 kalıyordu) */
.rozet-durum { color: var(--metin); border: 1px solid rgba(16, 24, 40, .06); }

/* Boş durum: simge + başlık + ne yapmalı (işaretleme değişmeden bütün tablolara) */
.tablo td.bos { padding: 30px 16px 26px; }
.tablo td.bos::before, div.bos::before {
  content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--mavi-zemin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fbf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18M3 12h18M3 17h11'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.canli-sag div.bos::before { display: none; }
/* Satır içi açılır menü (Kurumlar "İşlem") kaydırılan tablo kutusunda kırpılıyordu: geniş ekranda taşmaya izin ver */
.tablo-kap.tasma-acik { overflow: visible; }
@media (max-width: 1100px) { .tablo-kap.tasma-acik { overflow-x: auto; } }