/* ============================================================
   Daima G.O.R.A (Güvenlik, Olay, Raporlama, Araç) — Görsel dil
   Kaynak: "Daima Biz Hotel Design System" (sand / ink / bronze
   paleti + Akdeniz denizi aksanı). Kurumsal, sakin, olgun.
   ============================================================ */
:root {
  /* Kum (marka zemini) */
  --sand-1: #FBF7EE;
  --sand-2: #F3E9D6;
  --sand-3: #E6D2B5;
  --sand-4: #D9C09A;

  /* Mürekkep (marka ön rengi) */
  --ink-1: #2E2B25;
  --ink-2: #47443C;
  --ink-3: #6B6558;
  --ink-4: #938B7A;

  /* Bronz (çizgi / aksan) */
  --bronze-1: #8F795E;
  --bronze-2: #A98F6C;
  --bronze-3: #C4AE8C;

  /* Akdeniz denizi — etkileşim aksanı (link/odak/aktif) */
  --sea-1: #2E5F63;
  --sea-2: #3E7A7E;
  --sea-3: #DCE9E7;

  /* Durum renkleri (sıcak-uyumlu) */
  --success: #4E7A4E;  --success-bg: #E4EDDF;
  --warning: #9A6B2F;  --warning-bg: #F3E6D0;
  --danger:  #9C4A3C;  --danger-bg:  #F2DFD9;

  /* Anlamsal / eski-ad köprüleri (sayfalar bu adları kullanır) */
  --bg:          var(--sand-1);
  --card:        #FFFDF8;
  --raised:      var(--sand-2);
  --brand:       var(--sand-3);
  --ink:         var(--ink-2);
  --heading:     var(--ink-1);
  --muted:       #7C6A50;           /* WCAG AA gövde-muted */
  --line:        #E4D8C2;
  --line-strong: var(--bronze-3);
  --hover:       var(--sand-2);
  --cream:       var(--sand-2);
  --accent:      var(--sea-1);
  --accent-hover:var(--sea-2);
  --teal:        var(--sea-1);      /* geriye dönük */
  --teal-dark:   var(--sea-1);

  --red:   var(--danger);
  --amber: var(--warning);
  --green: var(--success);

  --input-bg:     #FFFDF8;
  --input-border: var(--bronze-3);

  /* Tipografi */
  --font-display: "Cinzel", "Trajan Pro", "Bodoni MT", Georgia, "Times New Roman", serif;
  --font-body:    "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;

  /* Köşe / gölge / hareket */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card:   0 1px 2px rgba(71,68,60,.05), 0 6px 18px rgba(71,68,60,.07);
  --shadow-raised: 0 2px 6px rgba(71,68,60,.10), 0 16px 40px rgba(71,68,60,.12);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur: 150ms;
}

[data-theme=dark] {
  --sand-1: #17150F; --sand-2: #211E17; --sand-3: #2E2A20; --sand-4: #3A3529;
  --ink-1: #F6EFE1; --ink-2: #E9DFCC; --ink-3: #C2B8A4; --ink-4: #8F8674;
  --bronze-1: #B79C77; --bronze-2: #CBB086; --bronze-3: #4A4234;
  --sea-1: #6FB6BB; --sea-2: #8ECBCF; --sea-3: #24403F;
  --success: #84B584; --success-bg: #22301D;
  --warning: #CC9C60; --warning-bg: #33280F;
  --danger:  #D98E80; --danger-bg:  #3A201B;

  --bg: var(--sand-1);
  --card: #201D16;
  --raised: var(--sand-2);
  --brand: var(--sand-3);
  --ink: var(--ink-2);
  --heading: var(--ink-1);
  --muted: var(--bronze-1);
  --line: #38332B;
  --line-strong: var(--bronze-1);
  --hover: #262219;
  --cream: var(--sand-2);
  --accent: var(--sea-1);
  --accent-hover: var(--sea-2);
  --teal: var(--sea-1); --teal-dark: var(--sea-1);
  --red: var(--danger); --amber: var(--warning); --green: var(--success);
  --input-bg: #1A1712;
  --input-border: #4A4234;
  --shadow-card:   0 1px 2px rgba(0,0,0,.30), 0 6px 20px rgba(0,0,0,.40);
  --shadow-raised: 0 2px 6px rgba(0,0,0,.40), 0 16px 40px rgba(0,0,0,.50);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg); color: var(--ink);
  font-size: 15px; line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
small { font-size: .85em; }
.muted { color: var(--muted); }
.block { display: block; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; background: var(--raised); padding: 1px 5px; border-radius: 5px; }

/* İkon temel stili */
.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ---------- Düzen ---------- */
.lay { display: flex; min-height: 100vh; }
.maincol { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Yan menü — MOBİL VARSAYILAN: soldan kayan çekmece.
   Eskiden mobilde 'display:none' idi; alt gezinme yalnız ilk 5 modülü
   gösterdiği için kalan tüm ekranlar telefondan erişilemiyordu. Artık
   hamburger düğmesi (#menubtn) body'ye .side-open ekleyip çekmeceyi açar.
   Masaüstü yerleşimi (sticky sütun) aşağıdaki min-width:900px bloğunda. */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: min(280px, 84vw);
  display: flex; flex-direction: column;
  background: var(--card); border-right: 1px solid var(--line);
  z-index: 70; overflow-y: auto;
  transform: translateX(-105%);
  /* visibility: kapalıyken çekmecedeki linkler Tab sırasına girmesin.
     Geçişe dâhil edilir, yoksa kapanış animasyonu görünmeden biterdi. */
  visibility: hidden;
  transition: transform .25s ease, visibility .25s ease;
}
body.side-open .sidebar { transform: none; visibility: visible; }

.sideoverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
body.side-open .sideoverlay { opacity: 1; visibility: visible; }
body.side-open { overflow: hidden; }        /* arka plan kaymasın */

/* Yan menü iç stilleri — masaüstü/mobil ortak (çekmece de aynı görünür). */
.sbrand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
.sbrand .brandmark { width: 38px; height: 38px; flex-shrink: 0; }
.sbrand span { font-family: var(--font-display); color: var(--heading); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; line-height: 1.35; }
/* Marka kilidi: kısaltma tek başına kalmasın — açılım her zaman altında durur. */
.sbrand-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sbrand-eyebrow { font-size: 8.5px; font-weight: 600; letter-spacing: .3em; color: var(--bronze-1); }
.sbrand-name { font-size: 17px; font-weight: 700; letter-spacing: .1em; line-height: 1.1; }
.sbrand-sub { font-size: 7.5px; font-weight: 500; letter-spacing: .13em; line-height: 1.5; color: var(--muted); margin-top: 2px; }
.sidenav { flex: 1; padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.sidenav a { padding: 9px 12px; border-radius: var(--radius-md); color: var(--ink); font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 11px; }
.sidenav a .ni { color: var(--ink-4); display: inline-flex; }
.sidenav a:hover { background: var(--hover); text-decoration: none; }
.sidenav a:hover .ni { color: var(--ink-3); }
.sidenav a.active { background: var(--ink-2); color: var(--sand-1); font-weight: 600; }
.sidenav a.active .ni { color: var(--sand-2); }
[data-theme=dark] .sidenav a.active { background: var(--sand-3); color: var(--ink-1); }
[data-theme=dark] .sidenav a.active .ni { color: var(--ink-2); }
/* env(safe-area-inset-bottom): iPhone alt çubuğu "Çıkış" bağlantısını örtmesin. */
.sidefoot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.7; }
.sidefoot .cikis { color: var(--danger); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

.topbar {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 0 14px; height: 56px; position: sticky; top: 0; z-index: 30;
}
.menubtn { display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 8px; border-radius: 8px; line-height: 0; }
.menubtn:hover { background: var(--hover); }
.tophotel { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--heading); margin-right: auto; }
.themebtn, .bellbtn { background: none; border: 0; cursor: pointer; padding: 8px; border-radius: 8px; line-height: 0; color: var(--ink-3); }
.themebtn:hover, .bellbtn:hover { background: var(--hover); color: var(--ink); }
.bellwrap { position: relative; display: inline-flex; }
.bellbadge { position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 10px; padding: 0 3px; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 18px 92px; }
.footer { text-align: center; color: var(--ink-4); font-size: 12px; letter-spacing: .04em; padding: 16px 0 26px; }

/* ---------- Mobil alt gezinme ---------- */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 9px 2px 7px; color: var(--ink-4); font-weight: 500; }
.bottomnav a .ic { color: currentColor; }
.bottomnav a em { font-style: normal; font-size: 10.5px; letter-spacing: .02em; }
.bottomnav a:hover, .bottomnav a.active { text-decoration: none; color: var(--accent); }

/* ---------- Başlıklar ---------- */
h1 { font-size: 22px; line-height: 1.25; margin: 0 0 16px; color: var(--heading); letter-spacing: -.01em; font-weight: 700; }
h1 small { color: var(--muted); font-weight: 400; font-size: 13px; letter-spacing: 0; }
.pagehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.pagehead h1 { margin: 0; }
h3 { font-size: 14px; color: var(--heading); margin: 0 0 8px; font-weight: 700; }

/* ---------- Kartlar ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow-card); }
.card.warncard { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--danger); box-shadow: none; }
.card.warncard a { color: var(--danger); text-decoration: underline; }
.card h2 { font-family: var(--font-display); font-size: 13px; margin: 0 0 14px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .16em; font-weight: 600; }
[data-theme=dark] .card h2 { color: var(--bronze-1); }
.card.warncard h2, .card.warncard strong { color: var(--danger); }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cardhead h2 { margin: 0; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.c2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px) { .grid.c4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) { .grid.c5 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px) { .grid.c5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 640px) { .grid.c6 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 960px) { .grid.c6 { grid-template-columns: repeat(6, 1fr); } }

/* ---------- İstatistik kartları ---------- */
.statcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; color: var(--ink); box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
a.statcard:hover { text-decoration: none; border-color: var(--bronze-3); box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.statcard .stat-ico {
  grid-row: 1 / 3; width: 40px; height: 40px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sea-3); color: var(--sea-1);
}
.statcard b { grid-column: 2; align-self: end; font-size: 25px; line-height: 1.05; font-weight: 700; color: var(--heading); letter-spacing: -.01em; }
.statcard em { grid-column: 2; align-self: start; font-style: normal; color: var(--muted); font-size: 12.5px; }
.statcard.stat-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.statcard.stat-danger .stat-ico { background: var(--danger-bg); color: var(--danger); }

/* ---------- Filo durum kartı ipucu (Seferde / Otelde / Sanayide) ----------
   Kart bir <button>: masaüstünde fareyle üzerine gelince, mobilde dokununca,
   klavyede Tab ile odaklanınca o durumdaki araçları listeler.

   JS YOK ve bu bilinçli: dokunmatikte odak (:focus) panelin açık kalmasını
   sağlıyor, ekranın başka yerine dokununca odak düşüp panel kapanıyor. <div>
   yerine <button> seçilmesinin sebebi de bu — iOS Safari tabindex'li div'e
   dokununca güvenilir biçimde odak vermiyor, düğmeye veriyor.

   :hover kuralı @media (hover: hover) içinde: dokunmatikte "yapışkan hover"
   panelin dokunduktan sonra açık kalmasına yol açıyordu. */
/* min-width: 0 ŞART — <button> ızgara elemanı olarak kendi min-content
   genişliğinin altına inmiyor ve 5 sütunlu satırda sayfaya 10px yatay
   kaydırma ekliyordu (994px'te ölçüldü). Yerindeki <div>'lerde bu sorun
   yoktu; düğmeye geçerken gelen bir yan etki. */
button.statcard.fleetpop {
  font: inherit; text-align: left; width: 100%; min-width: 0; position: relative;
  cursor: help; -webkit-tap-highlight-color: transparent;
}
.fleetpop-label { text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; }
.fleetpop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Gizliyken 'display: none' ŞART, opacity/visibility YETMEZ: panel mutlak
   konumlu ama kartın (position: relative) taşma alanına dahil oluyor. Görünmez
   hâlde bile 320px'lik genişliğiyle 5 sütunlu ızgarayı zorlayıp sayfaya 10px
   YATAY KAYDIRMA ekliyordu (994px'te ölçüldü). display:none bunu tamamen
   kaldırır; solma efekti bu yüzden transition yerine animation ile veriliyor —
   animation ancak eleman görünür hâle gelince çalışır. */
.fleetpop-panel {
  display: none;
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  /* Alt sınır 240px: kart dar (≈130px) olduğu için 'min-width:100%' panelin
     de daralmasına ve süre metninin üç satıra sarmalanmasına yol açıyordu. */
  min-width: max(100%, 240px); max-width: min(320px, 86vw);
  gap: 6px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
  text-align: left; white-space: normal;
}
@media (hover: hover) {
  .fleetpop:hover { border-color: var(--bronze-3); box-shadow: var(--shadow-raised); }
  .fleetpop:hover .fleetpop-panel { display: grid; animation: fleetpop-in var(--dur) var(--ease-out); }
}
.fleetpop:focus .fleetpop-panel,
.fleetpop:focus-within .fleetpop-panel { display: grid; animation: fleetpop-in var(--dur) var(--ease-out); }
@keyframes fleetpop-in { from { opacity: 0; transform: translateY(-4px); } }

/* '.statcard b' (25px, sayaç rakamı) panelin İÇİNE de sızıyor: kısa kod
   "ZE-01" kartın rakamı boyutunda devasa çıkıyordu. Sıfırlama panelle
   sınırlı tutuldu — '.statcard b' kuralı 14 sayfada kullanılıyor, onu
   daraltmak yerine burayı korumak daha güvenli. */
.fleetpop-panel b { font: inherit; font-weight: 700; color: inherit; letter-spacing: normal; }
.fleetpop-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
/* Plaka ve süre ALT ALTA: yan yana (flex) dizildiğinde dar panelde süre
   metni sarmalanıp satırı 90px'e çıkarıyordu. Alt alta hem okunur hem kısa. */
.fleetpop-row { display: grid; font-size: 12.5px; line-height: 1.35; }
.fleetpop-veh { color: var(--ink); white-space: nowrap; }
.fleetpop-meta { color: var(--muted); font-size: 11.5px; }
.fleetpop-more { font-size: 11.5px; color: var(--muted); font-style: italic; }

/* ---------- Formlar ---------- */
label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.fld { margin-bottom: 14px; }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=password], input[type=tel], input[type=time], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: var(--radius-md);
  font: inherit; background: var(--input-bg); color: var(--ink); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
input[type=file] { width: 100%; font: inherit; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--sea-3); }
textarea { resize: vertical; }
::placeholder { color: var(--ink-4); }
.chk { display: flex; align-items: center; gap: 8px; text-transform: none; font-weight: 500; font-size: 14px; color: var(--ink); margin: 8px 0; letter-spacing: 0; }
.chk input { width: auto; }
.chkrow { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.chkrow .chk { margin: 6px 0; }
.inlineform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.inlineform select, .inlineform input { width: auto; flex: 1; min-width: 120px; }
.statusquick { margin-top: 4px; }
.statusquick select { min-width: 0; width: auto; font-size: 12px; padding: 2px 6px; }
.filterbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filterbar input, .filterbar select { flex: 0 0 auto; }
.filterbar input[type=text], .filterbar input[type=search] { flex: 1; min-width: 160px; }
.weekday-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--ink-2); color: var(--sand-1); border: 1px solid var(--ink-2);
  padding: 10px 18px; border-radius: var(--radius-pill); font: inherit; font-weight: 600;
  letter-spacing: .01em; cursor: pointer; text-align: center; line-height: 1.2;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.btn:hover { background: var(--ink-1); border-color: var(--ink-1); text-decoration: none; color: var(--sand-1); }
.btn:active { transform: scale(.97); }
[data-theme=dark] .btn { background: var(--sand-3); border-color: var(--sand-3); color: var(--ink-1); }
[data-theme=dark] .btn:hover { background: var(--sand-4); border-color: var(--sand-4); color: var(--ink-1); }
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--bronze-3); }
.btn.secondary:hover { background: var(--raised); border-color: var(--bronze-1); color: var(--ink); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 82%, #000); border-color: color-mix(in srgb, var(--danger) 82%, #000); color: #fff; }
[data-theme=dark] .btn.danger { color: #2a1512; }
.btn.sm { padding: 6px 12px; font-size: 13px; gap: 5px; }
.btn .ic { margin: -1px 0; }

/* ---------- Rozetler ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; background: var(--sand-3); color: var(--ink-2); }
.badge-ok { background: var(--success-bg); color: var(--success); }
.badge-warn { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-muted { background: var(--raised); color: var(--muted); }

/* ---------- Tablolar ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.list { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.list th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 10px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
table.list td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tr:hover td { background: var(--hover); }
.row-inactive td { opacity: .5; }
.rowactions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Liste satırındaki işlem düğmeleri (ör. kapı defterinde Çıkış + Sil): dar
   hücrede alt alta düşmesin — nowrap min-content'i büyütür, tablo sütuna yer
   ayırır. Mobil kart görünümünde hücre zaten tam genişlik. */
table.list td .rowactions { flex-wrap: nowrap; justify-content: flex-end; }
/* Kapı defterindeki saat seçimi: sabit gün rozeti + saat/dakika listeleri.
   Serbest yazılan datetime alanının yerini aldı — dokunmatikte de tek elle
   seçilebilsin diye hedefler büyük tutuldu. */
.timepick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timepick-day { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: var(--hover); border: 1px solid var(--line); border-radius: 8px;
  font-weight: 600; white-space: nowrap; }
.timepick select { width: auto; min-width: 84px; font-size: 17px; font-variant-numeric: tabular-nums; }
.timepick-sep { font-weight: 700; color: var(--muted); }
/* Seyahat geçmişindeki "kapı kaydını düzelt" kalemi: tarihin yanında sessiz
   dursun, üzerine gelinince belirsin (yalnız yöneticide çıkar). */
.jrn-fix { color: var(--muted); opacity: .55; vertical-align: -2px; }
.jrn-fix:hover { color: var(--brand); opacity: 1; }
/* Sayısal sütunlar için yardımcı (sağa hizalı) */
table.list td.num, table.list th.num { text-align: right; }

table.kv { width: 100%; border-collapse: collapse; }
table.kv th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 8px 12px 8px 0; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; vertical-align: top; width: 42%; }
table.kv td { padding: 8px 0; border-bottom: 1px solid var(--line); }
table.kv tr:last-child td, table.kv tr:last-child th { border-bottom: 0; }

/* Serbest metin (tutanak gövdesi gibi): satır sonları korunur ama satır taşmaz.
   .log'dan farkı: orada `white-space: pre` var, uzun satır yatay kaydırır. */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Uyarı listesi ---------- */
.alertlist { display: flex; flex-direction: column; gap: 8px; }
.alertrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--warning); border-radius: var(--radius-md); color: var(--ink); background: var(--card); }
.alertrow:hover { text-decoration: none; background: var(--hover); }
.alertrow.sev-danger { border-left-color: var(--danger); }
.alertmain { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.alertmain b { font-size: 14px; color: var(--heading); }
.alertmain span { font-size: 13px; color: var(--muted); }
.alertdismiss { margin: 0; }

/* ---------- Büyük km ---------- */
.bigkm { font-size: 34px; font-weight: 700; color: var(--heading); line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bigkm span { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 6px; letter-spacing: 0; }

/* ---------- Tüketim grafiği ---------- */
.spark { margin-bottom: 12px; }
.spark svg { width: 100%; height: 60px; display: block; }
.spark rect { fill: var(--sea-2); }
/* İkinci seri (depo çıkışı) — giriş/çıkış karşılaştırmalı grafik için */
.spark rect.spark-alt { fill: var(--bronze-2); }
.sparkcap { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* ---------- Boş durum ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 16px; color: var(--muted); }
.empty .empty-ic { width: 48px; height: 48px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--raised); color: var(--bronze-1); }
.empty p { margin: 0; font-size: 14px; }

/* ---------- Flash ---------- */
.flash { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.flash-ok { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
.flash-error { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
.flash-warn { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 32%, transparent); color: var(--warning); }
.flash-info { background: var(--sea-3); border-color: color-mix(in srgb, var(--sea-1) 34%, transparent); color: var(--sea-1); }

/* ---------- İşlem günlüğü (deploy çıktısı) ---------- */
/* Uzun satırlar sayfayı yatay kaydırmamalı: kendi kutusunda kayar. */
.log {
  margin: 0; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.65; color: var(--ink);
  white-space: pre; overflow: auto; max-height: 460px;
}

/* ---------- Login ---------- */
body.bare { background: radial-gradient(120% 90% at 50% -10%, var(--sand-3), var(--sand-1) 62%); min-height: 100vh; }
[data-theme=dark] body.bare { background: radial-gradient(120% 90% at 50% -10%, var(--sand-3), var(--sand-1) 62%); }
.login-theme { position: fixed; top: 14px; right: 14px; z-index: 30; background: none; border: 0; cursor: pointer; padding: 8px; border-radius: 8px; line-height: 0; color: var(--ink-3); }
.login-theme:hover { background: var(--card); color: var(--ink); }
.loginbox { max-width: 392px; margin: 9vh auto 0; padding: 0 18px 40px; }
.loginbrand { text-align: center; color: var(--heading); margin-bottom: 22px; }
.loginbrand .brandmark { width: 60px; height: 60px; margin: 0 auto 14px; display: block; }
.loginbrand h1 { font-family: var(--font-display); font-size: 23px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; font-weight: 600; }
.loginbrand p { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .02em; }
.loginhint { text-align: center; color: var(--muted); font-size: 12px; margin-top: 14px; }
.login-eyebrow { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 4px auto 0; font-family: var(--font-display); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-1); }
.login-eyebrow::before, .login-eyebrow::after { content: ""; height: 1px; width: 34px; background: var(--bronze-1); opacity: .6; }

/* ---------- Responsive: kart görünümü (mobil tablolar) ---------- */
@media (max-width: 620px) {
  table.cards-on-mobile, table.cards-on-mobile tbody, table.cards-on-mobile tr, table.cards-on-mobile td { display: block; width: 100%; }
  table.cards-on-mobile thead { display: none; }
  table.cards-on-mobile tr { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 10px; padding: 6px 4px; }
  table.cards-on-mobile td { border: none; padding: 6px 12px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  table.cards-on-mobile td::before { content: attr(data-l); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
  table.cards-on-mobile td[data-l=""]::before { content: ""; }
  table.list tr:hover td { background: transparent; }
}

/* ---------- Masaüstü: yan menü ---------- */
@media (min-width: 900px) {
  /* Çekmece değil, sabit sütun: konum/geçiş sıfırlanır. */
  .sidebar {
    display: flex; width: 234px; flex: 0 0 234px; background: var(--card);
    border-right: 1px solid var(--line); flex-direction: column;
    position: sticky; top: 0; bottom: auto; left: auto; height: 100vh; overflow-y: auto; z-index: 40;
    transform: none; visibility: visible; transition: none;
  }
  .sideoverlay { display: none; }
  .sidefoot { padding: 14px 18px; }
  .bottomnav { display: none; }
  .container { padding: 26px 26px 44px; }
  .tophotel { display: none; }
  .menubtn { display: none; }
  /* Mobilde açıkken masaüstüne genişletilirse sınıf üzerinde kalabilir. */
  body.side-open { overflow: visible; }
}

/* ---------- Kapı Defteri: büyük dokunmatik hedefler ---------- */
.gate-seg { display: flex; gap: 10px; margin: 4px 0 16px; }
.gate-segbtn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 20px 10px; font-size: 18px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--input-border); background: var(--card); color: var(--muted);
  border-radius: var(--radius-lg); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent;
  transition: all var(--dur) var(--ease-out);
}
.gate-seg-sm { flex-wrap: wrap; }
.gate-seg-sm .gate-segbtn { padding: 13px 8px; font-size: 15px; font-weight: 600; flex: 1 1 40%; min-width: 130px; }
.gate-segbtn.on { color: #fff; border-color: var(--ink-2); background: var(--ink-2); }
.gate-segbtn.dir-in.on  { background: var(--success); border-color: var(--success); }
.gate-segbtn.dir-out.on { background: var(--warning); border-color: var(--warning); }
[data-theme=dark] .gate-segbtn.on { color: var(--ink-1); }
.gate-plate { font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 14px; }
.gate-platewrap { position: relative; }
.gate-suggest {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised); overflow: hidden; max-height: 320px; overflow-y: auto;
}
.gate-suggest-item {
  display: block; width: 100%; text-align: left; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; font-family: inherit; font-size: 15px;
}
.gate-suggest-item:last-child { border-bottom: 0; }
.gate-suggest-item:hover { background: var(--hover); }
.gate-suggest-item b { font-size: 16px; letter-spacing: .04em; }
.gate-suggest-item span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.gate-hotelbadge { display: flex; align-items: center; gap: 9px; background: var(--sea-3); border: 1px solid color-mix(in srgb, var(--sea-1) 40%, transparent);
  color: var(--sea-1); border-radius: var(--radius-md); padding: 11px 14px; margin-bottom: 14px; font-weight: 600; }
.gate-save { width: 100%; padding: 18px; font-size: 18px; margin-top: 8px; }
/* Kayıt listesindeki not rozeti: uzun not satırı yana açmasın diye kırpılır,
   tam metin title'da durur (mobil kart görünümünde tam genişlik alır). */
/* Gün gezinme şeridi: ◀ · tarih · Git · ▶ tek satırda, dar ekranda sarar. */
.gate-daynav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.gate-daynav input[type=date] { width: auto; min-width: 160px; margin: 0; }
.gate-daynav .disabled { opacity: .4; pointer-events: none; }
/* Geçmiş gün uyarı şeridi: kayıt formunun yerini alır, "Bugüne dön" sağda. */
.gate-pastnote { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* İçeride bekleyenler: varsayılan KAPALI katlanır kutu (<details>) — biriken
   eski girişler ekranı kaplamasın, başlık tıklanınca açılır. */
.gate-bekleyen > summary { cursor: pointer; user-select: none; }
.gate-bekleyen > summary h2 { display: inline; margin: 0; }
.gate-bekleyen > summary::marker { color: var(--muted); }
.gate-bekleyen[open] > summary { margin-bottom: 10px; }
.gate-noterow { margin-top: 4px; }
.gate-note { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.gate-note svg { flex: none; }

/* ---------- Raporlar ---------- */
.report-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.report-tabs a {
  padding: 8px 15px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink); font-weight: 600; font-size: 13px; background: var(--card);
}
.report-tabs a:hover { background: var(--hover); text-decoration: none; border-color: var(--bronze-3); }
.report-tabs a.active { background: var(--ink-2); color: var(--sand-1); border-color: var(--ink-2); }
[data-theme=dark] .report-tabs a.active { background: var(--sand-3); color: var(--ink-1); }
table.list tfoot td { padding: 11px 10px; border-top: 1px solid var(--line-strong); }
.report-total td { background: var(--raised); }

/* ---------- Tutanak (yazdırılabilir belge) ---------- */
.tutanak-doc {
  max-width: 820px; margin: 0 auto; background: #fff; color: #1c1a15;
  border: 2px solid var(--ink-2); border-radius: var(--radius-md);
  padding: 26px 28px; box-shadow: var(--shadow-card);
}
[data-theme=dark] .tutanak-doc { background: #fbf8f1; }
.tutanak-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--ink-2); padding-bottom: 12px; margin-bottom: 14px; }
.tutanak-logo { font-size: 22px; font-weight: 800; letter-spacing: .12em; color: var(--ink-1); }
.tutanak-sub { font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.tutanak-title { text-align: center; }
.tutanak-big { font-size: 26px; font-weight: 800; letter-spacing: .16em; color: var(--ink-1); }
.tutanak-kind { font-size: 12px; font-weight: 600; color: var(--bronze-1); letter-spacing: .04em; }
.tutanak-kunye { border-collapse: collapse; font-size: 12px; }
.tutanak-kunye td { border: 1px solid var(--ink-2); padding: 3px 9px; color: #1c1a15; }
.tutanak-kunye td:first-child { background: var(--sand-2); font-weight: 600; }
.tutanak-grid { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.tutanak-grid th, .tutanak-grid td { border: 1px solid var(--ink-2); padding: 8px 10px; font-size: 13px; text-align: left; vertical-align: top; color: #1c1a15; }
.tutanak-grid th { background: var(--sand-2); font-weight: 600; width: 150px; white-space: nowrap; }
.tutanak-body { margin-bottom: 14px; }
.tutanak-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bronze-1); margin-bottom: 5px; }
/* overflow-wrap: uzun bir bağlantı ya da boşluksuz kod metni kutudan taşmasın. */
.tutanak-text { border: 1px solid var(--ink-2); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 90px; font-size: 13px; line-height: 1.6; color: #1c1a15; overflow-wrap: anywhere; }
.tutanak-items { width: 100%; border-collapse: collapse; }
.tutanak-items th, .tutanak-items td { border: 1px solid var(--ink-2); padding: 6px 10px; font-size: 13px; text-align: left; color: #1c1a15; }
.tutanak-items th { background: var(--sand-2); font-weight: 600; }
.tutanak-sig { width: 100%; border-collapse: collapse; margin-top: 22px; }
.tutanak-sig td { border: 1px solid var(--ink-2); height: 92px; width: 25%; vertical-align: top; padding: 8px 10px; }
.tutanak-sig.c5 td { width: 20%; }
.tutanak-sig .sig-role { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #1c1a15; }
.tutanak-sig .sig-name { display: block; font-size: 11px; color: #1c1a15; margin-top: 3px; }
.tutanak-sig .sig-note { display: block; font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.tutanak-foot { font-size: 10px; color: var(--ink-3); text-align: center; margin: 14px 0 0; }

/* İlgili departmanlar kutusu — kâğıt tutanaktaki iki sütunlu işaretleme alanı */
.tutanak-dept {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
  border: 1px solid var(--ink-2); border-radius: var(--radius-sm); padding: 10px 12px;
}
.tutanak-deptcol { display: grid; gap: 6px; align-content: start; }
.tutanak-chk { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.35; color: #1c1a15; }
.tutanak-chk i {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  border: 1px solid var(--ink-2); border-radius: 2px; font-style: normal; font-size: 11px; line-height: 1;
  flex: 0 0 auto; margin-top: 1px;
}
.tutanak-chk.on { font-weight: 700; }
.tutanak-chk.on i { background: var(--ink-2); color: #fff; }
.tutanak-note { font-size: 11.5px; color: #1c1a15; text-align: right; margin: 10px 0 0; }
.tutanak-box { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--ink-2); border-radius: 2px; vertical-align: -2px; }
@media (max-width: 640px) { .tutanak-dept { grid-template-columns: 1fr; } }

/* ---------- Kamera kanıt klibi (tutanak eki) ---------- */
/* Form ekranındaki katlanır künye bölümü */
.camdet { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 14px; margin-bottom: 14px; background: var(--hover); }
.camdet > summary { cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; list-style: none; }
.camdet > summary::-webkit-details-marker { display: none; }
.camdet > summary::after { content: "+"; margin-left: auto; font-size: 17px; color: var(--muted); line-height: 1; }
.camdet[open] > summary::after { content: "−"; }
.camdet[open] { padding-bottom: 12px; }
.camdet .fld { margin-bottom: 8px; }

/* Klip oynatıcı kartı */
.klip { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; margin-bottom: 10px; }
.klip video { width: 100%; max-width: 420px; border-radius: var(--radius-sm); background: #000; display: block; }
.klip-bilgi { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 190px; flex: 1; }
.klip-bilgi .btn { align-self: flex-start; margin-top: 4px; }

/* Yükleme ilerlemesi */
.klip-durum { margin: 12px 0 4px; }
.klip-durum p { margin: 6px 0 0; font-size: 13px; }
.klip-durum p.hata { color: var(--danger); font-weight: 600; }
.klip-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.klip-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .2s linear; }
.klip-bar span.hata { background: var(--danger); }

/* ---------- Araç zimmeti ---------- */
/* Ekipman seçim ızgarası (form ekranı) */
.eqgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin-top: 4px; }
.eqgrid .chk { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.eqgrid .chk.muted { color: var(--muted); }

/* Çıktıdaki işaretli/işaretsiz ekipman kutuları */
.zim-eqlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 12px; }
.zim-eq { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #1c1a15; }
.zim-eq i { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid var(--ink-2); border-radius: 2px; font-style: normal; font-size: 11px; line-height: 1; flex: 0 0 auto; }
.zim-eq.on i { background: var(--ink-2); color: #fff; }
.zim-terms { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.6; color: #1c1a15; }
.zim-terms li { margin-bottom: 3px; }
.zim-missing { font-size: 12px; color: #1c1a15; margin: 8px 0 0; }
.zim-newpage { margin-top: 22px; }
@media (max-width: 640px) { .zim-eqlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ekranda gizli, yalnız yazdırmada görünür bloklar */
.printonly { display: none; }

/* ---------- Yazdırma / PDF ---------- */
@media print {
  .sidebar, .topbar, .bottomnav, .footer, .menubtn, .themebtn, .bellwrap,
  .noprint, .filterbar, .report-tabs, .rowactions, .sideoverlay { display: none !important; }
  .fleetpop-panel { display: none !important; }   /* ipucu paneli kâğıda basılmaz */
  body, body.bare { background: #fff !important; color: #000 !important; }
  .lay { display: block; }
  .maincol { display: block; }
  .container { max-width: 100%; padding: 0; margin: 0; }
  .card {
    border: 1px solid #bbb; border-radius: 0; box-shadow: none !important;
    background: #fff !important; color: #000 !important; margin: 0 0 12px;
    break-inside: avoid; page-break-inside: avoid;
  }
  .card h2 { color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  table.list { width: 100%; border-collapse: collapse; }
  table.list th, table.list td {
    border: 1px solid #999 !important; color: #000 !important;
    padding: 5px 7px; font-size: 11px; background: #fff !important; white-space: normal;
  }
  .report-total td, table.list tfoot td { background: #eee !important; font-weight: 700; }
  .badge { border: 1px solid #999; background: #fff !important; color: #000 !important; padding: 1px 6px; }
  .spark svg rect { fill: #555 !important; }
  .spark svg rect.spark-alt { fill: #9a9a9a !important; }
  table.kv th, table.kv td { color: #000 !important; }

  .printonly { display: block; }
  .printhead { margin-bottom: 14px; border-bottom: 2px solid #000; padding-bottom: 8px; }
  .printhead .printbrand { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .printhead h2 { margin: 4px 0 2px; font-size: 18px; }
  .printhead p { margin: 0; font-size: 12px; }
  .printfoot { margin-top: 12px; padding-top: 6px; border-top: 1px solid #999; font-size: 10px; text-align: center; }

  /* Tutanak: net siyah çizgiler, gerektiği kadar sayfa.
     Eskiden .tutanak-doc'ta break-inside:avoid vardı — belgenin TAMAMI tek
     sayfaya sıkıştırılmaya çalışılıyor, uzun açıklamalarda metnin gerisi
     kâğıda hiç basılmıyordu. Artık belge doğal olarak taşıyor; aşağıda
     yalnız BÖLÜNMEMESİ gereken bloklar tek tek korunuyor. */
  .tutanak-doc { border: 2px solid #000 !important; box-shadow: none !important; background: #fff !important; color: #000 !important; padding: 10mm 12mm; max-width: 100%; }
  .tutanak-head { border-bottom-color: #000 !important; break-inside: avoid; break-after: avoid; }

  /* Bölünme kuralları: tablo satırları ve imza haneleri ikiye ayrılmasın;
     başlık etiketi sayfa sonunda metninden kopup yalnız kalmasın. Açıklama
     bloğuna avoid VERİLMEZ — bir sayfadan uzun olabilir, akması gerekir. */
  .tutanak-grid tr, .tutanak-items tr, .tutanak-kunye tr { break-inside: avoid; }
  .tutanak-lbl { break-after: avoid; }
  .tutanak-text { orphans: 3; widows: 3; }
  .tutanak-sig { break-inside: avoid; }
  .tutanak-note { break-after: avoid; }
  .tutanak-foot { break-before: avoid; }
  .tutanak-logo, .tutanak-big { color: #000 !important; }
  .tutanak-kunye td, .tutanak-grid th, .tutanak-grid td,
  .tutanak-items th, .tutanak-items td, .tutanak-text,
  .tutanak-sig td { border-color: #000 !important; color: #000 !important; }
  .tutanak-kunye td:first-child, .tutanak-grid th, .tutanak-items th { background: #eee !important; }
  .tutanak-sig .sig-role, .tutanak-sig .sig-name { color: #000 !important; }

  /* Departman kutusu ve 2. sayfa işareti de net siyah bassın */
  .tutanak-dept { border-color: #000 !important; break-inside: avoid; }
  .tutanak-chk, .tutanak-note { color: #000 !important; }
  .tutanak-chk i, .tutanak-box { border-color: #000 !important; }
  .tutanak-chk.on i { background: #000 !important; color: #fff !important; }

  /* Zimmet: ekipman kutuları ve taahhüt maddeleri de net siyah bassın.
     İade tutanağı teslim formuyla aynı kâğıda karışmasın diye yeni sayfada. */
  .zim-eq, .zim-terms, .zim-missing { color: #000 !important; }
  .zim-eq i { border-color: #000 !important; }
  .zim-eq.on i { background: #000 !important; color: #fff !important; }
  .zim-newpage { break-before: page; page-break-before: always; margin-top: 0; }
  @page { margin: 14mm; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Ana yakıt deposu (tank) göstergesi
   Renkler tema değişkenlerinden gelir; seviye .tank-* sınıfıyla
   belirlenir. SVG geometrisi sunucuda hesaplanır (CSP-güvenli).
   ============================================================ */
.tankcard { border-left: 3px solid var(--success); }
.tankcard.tank-mid { border-left-color: var(--success); }
.tankcard.tank-low { border-left-color: var(--warning); }
.tankcard.tank-critical { border-left-color: var(--danger); }

.tankcard-grid { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.tankcard-gauge { display: flex; justify-content: center; }
.tankcard-info { min-width: 0; }
.tankcard .cardhead { margin-top: 0; }
.tankfoot { margin: 10px 0 0; font-size: 13px; }

/* --- SVG gösterge --- */
.tankgauge { display: block; max-width: 100%; height: auto; }
.tankgauge .tank-body { fill: var(--raised); }
.tankgauge .tank-outline { fill: none; stroke: var(--line); stroke-width: 2; }
.tankgauge .tank-neck { fill: var(--line); }
.tankgauge .tank-fill { fill: var(--success); opacity: .82; }
.tankgauge .tank-surface { fill: var(--success); opacity: 1; }
.tankgauge .tank-min { stroke: var(--danger); stroke-width: 1.5; opacity: .75; }
.tankgauge .tank-pct { fill: var(--heading); font-size: 20px; font-weight: 700; }

.tankgauge.tank-mid .tank-fill,
.tankgauge.tank-mid .tank-surface { fill: var(--success); }
.tankgauge.tank-low .tank-fill,
.tankgauge.tank-low .tank-surface { fill: var(--warning); }
.tankgauge.tank-critical .tank-fill,
.tankgauge.tank-critical .tank-surface { fill: var(--danger); }

/* --- Sayısal özet --- */
.tankstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tankstat { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; }
.tankstat b { display: block; font-size: 17px; color: var(--heading); line-height: 1.25; }
.tankstat em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; }
.tankstat-big b { font-size: 26px; }
.tankcard.tank-critical .tankstat-big b { color: var(--danger); }
.tankcard.tank-low .tankstat-big b { color: var(--warning); }

/* --- Hareket tablosu --- */
td.tank-in b { color: var(--success); }
td.tank-out b { color: var(--danger); }

@media (max-width: 720px) {
  .tankcard-grid { grid-template-columns: 1fr; gap: 14px; }
  .tankstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= Ücretli Otopark ================= */
.park-lot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.park-slot {
  position: relative;
  min-height: 128px;
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 8px 10px;
  text-align: center;
}
.park-slot.bos {
  border: 2px dashed var(--line-strong);
  color: var(--muted);
  background: transparent;
}
.park-slot.dolu {
  border: 2px solid var(--line-strong);
  background: var(--raised);
  cursor: default;
}
.park-no {
  position: absolute; top: 6px; left: 10px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.park-car { color: var(--heading); display: inline-flex; }
.park-plate { font-size: 14px; letter-spacing: .3px; color: var(--heading); }
.park-sure { color: var(--muted); font-size: 12px; }
.park-bos-txt { font-size: 12px; letter-spacing: 2px; font-weight: 600; }

/* Üstüne gelince açılan bilgi balonu */
.park-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 220px; max-width: 280px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  padding: 10px 12px; text-align: left;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; line-height: 1.35;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  z-index: 30;
}
.park-tip b { font-size: 13.5px; color: var(--heading); }
.park-tip span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.park-tip svg { flex: 0 0 auto; color: var(--muted); }
.park-slot.dolu:hover .park-tip,
.park-slot.dolu:focus-within .park-tip {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* İlk sıradaki balonlar kartın dışına taşmasın: alta açılsın */
.park-lot .park-slot:nth-child(-n+4) .park-tip {
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.park-lot .park-slot:nth-child(-n+4).dolu:hover .park-tip,
.park-lot .park-slot:nth-child(-n+4).dolu:focus-within .park-tip {
  transform: translateX(-50%) translateY(0);
}

/* Aylık kazanç çubukları */
.park-chart {
  display: flex; align-items: flex-end; gap: 12px;
  min-height: 170px; padding: 8px 4px 0;
}
.park-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.park-bar {
  width: 100%; max-width: 46px;
  background: var(--accent);
  border-radius: 6px 6px 2px 2px;
}
.park-bar-val { color: var(--muted); font-size: 11px; min-height: 14px; }
.park-bar-ay  { color: var(--muted); font-size: 12px; }

.park-paid { max-width: 120px; }

@media (max-width: 720px) {
  .park-lot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .park-tip { display: none; } /* mobilde balon yerine tablo kullanılır */
}

/* Belge görüntüleyici — yüklenen evrak ayrı sekme yerine sayfa içinde açılır. */
.belge-katman { position: fixed; inset: 0; z-index: 200; display: flex;
                align-items: center; justify-content: center; padding: 16px;
                background: rgba(20, 18, 15, .62); }
body.belge-acik { overflow: hidden; }            /* arka plan kaymasın */
.belge-pencere { display: flex; flex-direction: column; width: min(1000px, 100%);
                 height: min(90vh, 100%); background: var(--card, #fff);
                 border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.belge-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             padding: 10px 14px; border-bottom: 1px solid var(--line); }
.belge-baslik { flex: 1; min-width: 0; font-size: 14px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.belge-dugmeler { display: flex; gap: 8px; }
.belge-govde { flex: 1; min-height: 0; background: #3a3833;
               display: flex; align-items: center; justify-content: center; overflow: auto; }
.belge-govde iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.belge-govde img { max-width: 100%; max-height: 100%; object-fit: contain; }
.belge-yedek { display: flex; flex-direction: column; align-items: center; gap: 10px;
               padding: 28px; text-align: center; color: #efece4; }
.belge-yedek p { margin: 0 0 4px; font-size: 14px; }
@media (max-width: 620px) {
  .belge-katman  { padding: 0; }
  .belge-pencere { width: 100%; height: 100%; border-radius: 0; }
  .belge-baslik  { flex-basis: 100%; }
}

/* Görsel yazdırma: sayfanın geri kalanı gizlenir, yalnız belge basılır. */
.belge-yazdir-alani { display: none; }
@media print {
  body.belge-yazdiriliyor > *:not(.belge-yazdir-alani) { display: none !important; }
  body.belge-yazdiriliyor .belge-yazdir-alani { display: block; }
  .belge-yazdir-alani img { max-width: 100%; }
}

/* Müdürler çizelgesi (/managers) — giriş/çıkış saat rozetleri. */
.mudur-ciftler { display: flex; flex-wrap: wrap; gap: 8px; }
.mudur-cift    { display: inline-flex; gap: 2px; align-items: center;
                 border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--bg); }
.mudur-saat    { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
                 border-radius: 6px; font-size: 13px; font-weight: 600;
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.mudur-saat.giris { background: rgba(90, 140, 100, .14); }
.mudur-saat.cikis { background: rgba(168, 120, 60, .14); }
.mudur-saat.bos   { color: var(--muted); font-weight: 400; }
.mudur-kapi    { display: inline-flex; opacity: .55; }        /* kapı defterinden geldi */
.mudur-sil     { border: 0; background: none; color: var(--muted); cursor: pointer;
                 font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.mudur-sil:hover { color: var(--danger, #a8442a); }
.mudur-cift form { display: inline; }
.mudur-ekle input[type=time] { width: 110px; }
.mudur-simdi   { display: flex; gap: 6px; margin-top: 6px; }
@media (max-width: 720px) {
  .mudur-simdi { flex-wrap: wrap; }
  .mudur-ekle  { flex-wrap: wrap; }
}

/* Rol yetkileri matrisi (/settings/users).
   Yönetici sütunu bilgilendirme amaçlı ve her satırda aynı ("Her zaman açık");
   dar ekranda düzenlenebilir rol sütunlarına yer açmak için gizlenir. */
.rolegrid td, .rolegrid th { text-align: center; }
.rolegrid td:first-child, .rolegrid th:first-child { text-align: left; }
.rolegrid .chk { justify-content: center; margin: 0; }
@media (max-width: 720px) {
  .rolegrid .col-admin { display: none; }
}

/* Plaka alanları: her zaman büyük harf görünümü + okunaklı harf aralığı.
   .gate-plate kendi büyük puntosunu korur, diğerleri biraz iri yazılır. */
.plate-input { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.plate-input:not(.gate-plate) { font-size: 17px; }
.plate-input::placeholder { letter-spacing: .06em; font-weight: 500; }