/* ============================================================
   GARAJ YÖNETİM — TASARIM SİSTEMİ
   Palet: Mavi Tulum · Yazı: Archivo / Instrument Sans / DM Mono
   Tek kaynak: bu dosya Laravel'de public/css/gy.css olarak yaşar.
   Sürüm: 1.0 · 15 Eylül 2026
   ============================================================ */

/* ------------------------------------------------------------
   0. BELİRTEÇLER (tokens)
   Açık tema varsayılan. Koyu tema YALNIZCA data-theme="dark" ile —
   işletim sistemi ayarına göre kendiliğinden kararmaz (Orhan kararı).
   ------------------------------------------------------------ */
:root{
  /* zemin ve yüzeyler */
  --bg:#EDF0F3; --surface:#FFFFFF; --surface-2:#F5F8FA; --surface-3:#EDF1F5;
  --rule:#DEE5EA; --rule-hard:#C4CFD8;

  /* mürekkep */
  --ink:#0F1922; --ink-2:#4C5C69; --ink-3:#82909C;

  /* vurgu — iş önlüğü mavisi */
  --accent:#1A4E8A; --accent-lift:#2C67AC; --accent-deep:#0D3058;
  --accent-soft:#E3ECF6; --accent-edge:#A9C4E0; --on-accent:#FFFFFF;

  /* menü — YALNIZCA menüde kullanılır, sayfa zemini yapılmaz */
  --nav:#132434; --nav-2:#1A3247; --nav-rule:#21394F;
  --nav-ink:#C5D2DE; --nav-ink-2:#7A8A99; --nav-on:#FFFFFF;

  /* iş emri durumları */
  --s-yeni:#2F9E63; --s-devam:#2C67AC; --s-onayda:#7A6830; --s-revize:#AC2E27; --s-cikis:#177A5F;

  /* gösterge lambaları — araç paneli dili, renkleri sabit anlam taşır */
  --lamp-engine:#D99A00;  /* motor ikaz — SARI */
  --lamp-temp:#C0392B;    /* hararet — KIRMIZI */

  /* anlam renkleri — vurgu rengiyle karışmaz */
  --ok:#177A5F;     --ok-soft:#E4F0EB;
  --warn:#B5730C;   --warn-soft:#F7EADA;
  --danger:#AC2E27; --danger-soft:#F8E6E4;
  --info:#1A4E8A;   --info-soft:#E3ECF6;

  /* uyarı bandı (sarı-siyah) */
  --haz:#E0A100; --haz-2:#1B1B1B;

  /* gölge — sadece yüzen katmanda; kartlar çizgiyle ayrılır */
  --shadow-sm:0 1px 2px rgba(15,25,34,.06);
  --shadow:0 1px 1px rgba(15,25,34,.05), 0 10px 26px rgba(15,25,34,.09);
  --shadow-lg:0 2px 4px rgba(15,25,34,.06), 0 18px 44px rgba(15,25,34,.16);

  /* köşe */
  --r-sm:5px; --r:9px; --r-lg:12px; --r-xl:16px;

  /* boşluk ölçeği */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* yazı */
  --font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'DM Mono',ui-monospace,'Cascadia Mono','Consolas',monospace;

  /* sol menü genişliği */
  --nav-w:218px;

  color-scheme:light;
}

:root[data-theme="dark"]{
  --bg:#0F1315; --surface:#171E21; --surface-2:#1D262A; --surface-3:#222C31;
  --rule:#283338; --rule-hard:#3B484E;
  --ink:#E9EEF0; --ink-2:#A2AFB5; --ink-3:#76858C;
  --accent:#6FA8DC; --accent-lift:#8EBEE9; --accent-deep:#2A5480;
  --accent-soft:#16283A; --accent-edge:#2F567E; --on-accent:#0A1A28;
  --nav:#0A0E10; --nav-2:#131A1D; --nav-rule:#1D262A;
  --nav-ink:#B4C1C7; --nav-ink-2:#6D7C83; --nav-on:#FFFFFF;
  --s-yeni:#4FC98A; --s-devam:#71ADE2; --s-onayda:#C9B478; --s-revize:#E6786E; --s-cikis:#2E9C6E;
  --lamp-engine:#F0B429; --lamp-temp:#E5766D;
  --ok:#4FC29B;     --ok-soft:#14302A;
  --warn:#E39A3E;   --warn-soft:#33240F;
  --danger:#E5766D; --danger-soft:#3A1A17;
  --info:#6FA8DC;   --info-soft:#16283A;
  --haz:#EFB22A; --haz-2:#0A0E10;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 1px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ------------------------------------------------------------
   1. SIFIRLAMA VE TEMEL
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{font-family:var(--font-display); margin:0; letter-spacing:-.02em; line-height:1.15; text-wrap:balance}
h1{font-size:28px; font-weight:800}
h2{font-size:22px; font-weight:700}
h3{font-size:17px; font-weight:700}
h4{font-size:14px; font-weight:700}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
::selection{background:var(--accent-soft); color:var(--ink)}

/* yazı yardımcıları */
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.eyebrow{
  font-family:var(--font-display); font-weight:700; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.lbl{
  font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}

/* ------------------------------------------------------------
   2. YERLEŞİM — sol menü + içerik
   ------------------------------------------------------------ */
.gy-shell{display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:100vh}
.gy-main{min-width:0; background:var(--bg)}
.gy-page{padding:var(--sp-5) var(--sp-6) var(--sp-8)}
.gy-page-head{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-5)}
.gy-page-head .sp{margin-left:auto}
.gy-page-head .dt{font-size:13px; color:var(--ink-3)}

/* canlı göstergesi */
.live{
  font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ok); display:inline-flex; align-items:center; gap:7px;
  animation:live-text 1.7s ease-in-out infinite;
}
.live::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; animation:live-dot 1.7s ease-out infinite}
@keyframes live-text{0%,100%{opacity:1} 55%{opacity:.42}}
@keyframes live-dot{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 60%, transparent)}
  70%,100%{box-shadow:0 0 0 6px color-mix(in srgb, currentColor 0%, transparent)}
}

/* --- sol menü --- */
.gy-nav{background:var(--nav); padding:var(--sp-4) var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh; overflow-y:auto}
.gy-brand{display:flex; align-items:center; gap:11px; padding:2px 4px 16px; margin-bottom:6px; border-bottom:1px solid var(--nav-rule)}
.gy-brand .blk{width:40px; height:32px; border-radius:var(--r-sm); background:var(--surface); position:relative; overflow:hidden; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px var(--rule-hard); flex:none}
.gy-brand .blk::before{content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:var(--accent)}
.gy-brand .blk b{font-family:var(--font-mono); font-size:12.5px; color:var(--ink); margin-left:9px}
.gy-brand .wm{font-family:var(--font-display); font-size:16.5px; line-height:1; letter-spacing:-.022em; color:var(--nav-on); white-space:nowrap}
.gy-brand .wm b{font-weight:700}
.gy-brand .wm i{font-style:normal; font-weight:400; color:var(--nav-ink)}
.gy-brand img{height:32px; width:auto; border-radius:var(--r-sm)}
.gy-nav-lbl{font-family:var(--font-display); font-weight:700; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--nav-ink-2); padding:10px 8px 6px}
.gy-nav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm); color:var(--nav-ink); font-size:13.5px; font-weight:500; position:relative; text-decoration:none}
.gy-nav a svg{width:18px; height:18px; flex:none; opacity:.8}
.gy-nav a:hover{background:var(--nav-2); color:var(--nav-on); text-decoration:none}
.gy-nav a.on{background:var(--nav-2); color:var(--nav-on); font-weight:600}
.gy-nav a.on svg{opacity:1; color:var(--accent-lift)}
.gy-nav a.on::before{content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px; background:var(--accent-lift); border-radius:0 3px 3px 0}
.gy-nav .ct{margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--nav-ink-2); background:var(--nav-2); border-radius:20px; padding:1px 7px}
.gy-nav .ct.hot{background:var(--accent-lift); color:var(--on-accent)}
.gy-nav a.locked{opacity:.55}
.gy-nav a.locked .ct{background:transparent; border:1px solid var(--nav-rule); font-family:var(--font-display); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase}
.gy-me{display:flex; align-items:center; gap:9px; margin-top:auto; padding:10px 9px; border-radius:var(--r); background:var(--nav-2); border:1px solid var(--nav-rule)}
.gy-me em{font-style:normal; width:26px; height:26px; border-radius:6px; background:var(--accent-lift); color:var(--on-accent); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:11px; flex:none}
.gy-me .t{line-height:1.25; min-width:0}
.gy-me .t b{display:block; font-size:12.5px; color:var(--nav-on); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gy-me .t span{display:block; font-size:10.5px; color:var(--nav-ink-2)}

/* mobil: menü üstte yatay kayar */
@media (max-width:860px){
  .gy-shell{grid-template-columns:1fr}
  .gy-nav{position:static; height:auto; flex-direction:row; align-items:center; gap:2px; padding:8px 10px; overflow-x:auto; overflow-y:hidden}
  .gy-brand{border:0; padding:0 8px 0 0; margin:0}
  .gy-brand .wm{display:none}
  .gy-nav-lbl{display:none}
  .gy-nav a{white-space:nowrap; padding:8px 10px}
  .gy-nav a.on::before{display:none}
  .gy-me{margin:0 0 0 auto; padding:6px}
  .gy-me .t{display:none}
  .gy-page{padding:var(--sp-4) var(--sp-4) var(--sp-7)}
}

/* ------------------------------------------------------------
   3. BUTONLAR — üç kademe: dolu / yüzey / çerçeveli
   Üstte 1px ışık, altta 3px DÜZ RENKLİ kenar (yarı saydam değil).
   Basınca 3px iner.
   ------------------------------------------------------------ */
.btn{
  font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  height:44px; padding:0 17px; border-radius:var(--r); border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap; line-height:1;
  transition:transform .07s ease, box-shadow .07s ease, filter .12s;
}
.btn svg{width:17px; height:17px; flex:none}
.btn:hover{text-decoration:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42; cursor:not-allowed; transform:none !important}

.btn-1{color:var(--on-accent); background:linear-gradient(180deg, var(--accent-lift) 0%, var(--accent) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 var(--accent-deep), 0 6px 14px rgba(13,48,88,.18)}
.btn-1:hover:not(:disabled){filter:brightness(1.06)}
.btn-1:active:not(:disabled){transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 var(--accent-deep)}

.btn-2{color:var(--ink); background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px var(--rule-hard), 0 3px 0 var(--rule-hard), 0 6px 12px rgba(15,25,34,.07)}
.btn-2:hover:not(:disabled){background:var(--surface)}
.btn-2:active:not(:disabled){transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px var(--rule-hard)}

.btn-3{color:var(--accent); background:linear-gradient(180deg, var(--surface) 0%, var(--accent-soft) 100%);
  box-shadow:inset 0 0 0 1.5px var(--accent-edge), 0 3px 0 var(--accent-edge)}
.btn-3:hover:not(:disabled){background:var(--accent-soft)}
.btn-3:active:not(:disabled){transform:translateY(3px); box-shadow:inset 0 0 0 1.5px var(--accent-edge)}

.btn-danger{color:#fff; background:linear-gradient(180deg, #C4433A 0%, var(--danger) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 #7A1F19, 0 6px 14px rgba(172,46,39,.2)}
.btn-danger:active:not(:disabled){transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 #7A1F19}

.btn-ghost{color:var(--ink-2); background:transparent; box-shadow:none; height:38px; padding:0 12px}
.btn-ghost:hover:not(:disabled){background:var(--surface-3); color:var(--ink)}

.btn-sm{height:34px; font-size:11px; padding:0 12px; border-radius:7px; gap:7px}
.btn-sm svg{width:14px; height:14px}
.btn-lg{height:52px; font-size:13px; padding:0 22px; border-radius:var(--r-lg)}
.btn-lg svg{width:19px; height:19px}
.btn-block{width:100%}
.btn-icon{width:38px; height:38px; padding:0; border-radius:var(--r)}
.btn-icon.btn-sm{width:34px; height:34px}

/* buton grubu */
.btn-row{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center}

/* ------------------------------------------------------------
   4. DAMGA ROZETLER — mühür hissi
   ------------------------------------------------------------ */
.stamp{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; padding:4px 8px 3px; border:2px solid currentColor;
  border-radius:2px; line-height:1; white-space:nowrap; opacity:.94;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}
/* YENİ: kesik çizgi yok — düz çerçeve, açık yeşil, yanıp söner.
   Yanıp sönme "buna daha kimse bakmadı" demenin en hızlı yolu. */
.st-yeni{color:var(--s-yeni); transform:rotate(.8deg); animation:stamp-blink 1.8s ease-in-out infinite}
@keyframes stamp-blink{0%,100%{opacity:1} 50%{opacity:.38}}
.st-devam{color:var(--s-devam); transform:rotate(-1.6deg)}
.st-onayda{color:var(--s-onayda); transform:rotate(1.1deg)}
.st-revize{color:var(--s-revize); transform:rotate(-2.2deg)}
.st-hazir{color:var(--s-cikis); transform:rotate(-1.2deg); border-style:double}
.st-cikis{color:var(--s-cikis); transform:rotate(-.9deg)}
.st-iptal{color:var(--ink-3); transform:rotate(1.6deg); text-decoration:line-through}
.stamp-lg{font-size:12px; padding:6px 12px 5px; border-width:2.5px}

/* tarih damgası (çıktılarda) */
.date-stamp{display:inline-block; font-family:var(--font-display); font-weight:700; color:var(--accent);
  border:2px solid currentColor; border-radius:3px; padding:8px 12px; text-align:center;
  transform:rotate(-3deg); opacity:.9; line-height:1.15;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent)}
.date-stamp .d1{display:block; font-size:9px; letter-spacing:.2em}
.date-stamp .d2{display:block; font-family:var(--font-mono); font-size:15px; letter-spacing:.04em; margin:2px 0}
.date-stamp .d3{display:block; font-size:8.5px; letter-spacing:.16em; opacity:.75}

/* ------------------------------------------------------------
   5. PLAKA
   ------------------------------------------------------------ */
/* Gerçek Türk plakası: solda mavi AB şeridi, üstte ay-yıldız, altta TR */
.plate{
  display:inline-block; font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.02em;
  border:1.5px solid var(--rule-hard); border-radius:var(--r-sm); padding:5px 8px 4px 24px;
  background:var(--surface-2); white-space:nowrap; position:relative; color:var(--ink); line-height:1.2;
}
.plate::before{
  content:"TR"; position:absolute; left:0; top:-1.5px; bottom:-1.5px; width:15px;
  background:var(--s-devam); border-radius:3.5px 0 0 3.5px;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:8px; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center;
}
.plate-lg{font-size:16px; padding:7px 12px 6px 28px}
.plate-lg::before{width:20px; font-size:10px}
/* çok küçük yerlerde (usta kartı) */
.plate-sm{font-size:11.5px; padding:4px 7px 3px 20px}
.plate-sm::before{width:14px; font-size:7px}

/* ------------------------------------------------------------
   6. KARTLAR VE KPI
   ------------------------------------------------------------ */
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden}
.card-h{font-size:12.5px; font-weight:700; padding:12px 15px 11px; border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:9px; letter-spacing:.02em; font-family:var(--font-display)}
.card-h .n{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); border:1px solid var(--rule-hard); border-radius:20px; padding:1px 7px; font-weight:400}
.card-h .sp{margin-left:auto}
.card-h a{font-size:11.5px; color:var(--accent); font-family:var(--font); font-weight:600}
.card-b{padding:var(--sp-4)}
.card-f{padding:10px 15px 13px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--ink-3)}
.card-f b{font-family:var(--font-mono); font-size:13px; color:var(--ink); font-weight:500}

.card-click{cursor:pointer; transition:border-color .12s, transform .12s}
.card-click:hover{border-color:var(--rule-hard); transform:translateY(-2px)}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.kpi{position:relative; text-align:left; font:inherit; color:inherit; cursor:pointer; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--r); padding:13px 14px 14px;
  transition:border-color .12s, transform .12s}
.kpi:hover{border-color:var(--rule-hard); transform:translateY(-2px)}
.kpi .k{font-size:11px; color:var(--ink-3); font-family:var(--font-display); font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.kpi .v{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:23px; font-weight:500; letter-spacing:-.02em; margin-top:6px; line-height:1.1}
.kpi .d{font-size:11.5px; color:var(--ink-3); margin-top:4px}
.kpi .up{color:var(--ok); font-weight:600}
.kpi .down{color:var(--danger); font-weight:600}
.kpi.haz{padding-top:17px}
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.kpis{grid-template-columns:1fr}}

/* uyarı bandı — geciken her şeyde aynı şerit */
.haz{position:relative}
.haz::before{content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:repeating-linear-gradient(-45deg, var(--haz) 0 7px, var(--haz-2) 7px 14px)}
.haz-line{height:5px; background:repeating-linear-gradient(-45deg, var(--haz) 0 7px, var(--haz-2) 7px 14px); border-radius:2px}

/* ------------------------------------------------------------
   7. LİSTE SATIRI — açılır iş emri
   ------------------------------------------------------------ */
.row{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:13px; padding:11px 15px; border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row .mid{min-width:0}
.row .mid b{display:block; font-size:13.5px; font-weight:600; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .mid span{display:block; font-size:12px; color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .amt{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:13.5px; font-weight:500; text-align:right; white-space:nowrap}
.row .amt.na{color:var(--ink-3)}

.wo{border-bottom:1px solid var(--rule)}
.wo:last-child{border-bottom:0}
.wo-head{width:100%; display:grid; grid-template-columns:auto 1fr auto auto 18px; align-items:center; gap:13px;
  padding:11px 15px; background:none; border:0; font:inherit; color:inherit; cursor:pointer; text-align:left}
.wo-head:hover{background:var(--surface-2)}
.wo-head .chev{width:17px; height:17px; color:var(--ink-3); transition:transform .16s}
.wo[data-open="1"] .wo-head{background:var(--surface-2)}
.wo[data-open="1"] .chev{transform:rotate(180deg)}
.wo-detail{padding:2px 15px 17px; background:var(--surface-2); border-top:1px solid var(--rule)}
@media (max-width:640px){
  .row,.wo-head{grid-template-columns:1fr auto; row-gap:6px}
  .row .plate,.wo-head .plate{grid-column:1}
  .row .mid,.wo-head .mid{grid-column:1 / -1}
}

/* kalem satırı */
.line{display:grid; grid-template-columns:58px 1fr auto auto; gap:11px; align-items:center; padding:6px 0; border-bottom:1px dashed var(--rule); font-size:12.5px}
.line:last-child{border-bottom:0}
.line .tag{font-family:var(--font-display); font-weight:700; font-size:8.5px; letter-spacing:.11em; text-transform:uppercase; text-align:center; padding:3px 0; border-radius:3px; background:var(--accent-soft); color:var(--accent)}
.line .tag.p{background:var(--rule); color:var(--ink-2)}
.line .nm b{font-weight:500; color:var(--ink)}
.line .nm span{color:var(--ink-3); font-family:var(--font-mono); font-size:11px; margin-left:6px}
.line .q{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); text-align:right}
.line .t{font-family:var(--font-mono); font-size:12.5px; text-align:right; min-width:74px}
.tot{display:flex; align-items:center; gap:10px; padding-top:9px; margin-top:4px; border-top:2px solid var(--rule-hard)}
.tot .lbl{margin:0}
.tot .val{margin-left:auto; font-family:var(--font-mono); font-size:17px; font-weight:500}

/* işçilik/parça oran çubuğu — 2px boşluklu */
.split{display:flex; gap:2px; height:9px; border-radius:3px; overflow:hidden}
.split i{display:block; height:100%}
.split i:first-child{background:var(--accent); border-radius:3px 0 0 3px}
.split i:last-child{background:var(--rule-hard); border-radius:0 3px 3px 0}
.split-lg{display:flex; gap:16px; font-size:11.5px; color:var(--ink-3); flex-wrap:wrap; margin-top:7px}
.split-lg b{color:var(--ink); font-family:var(--font-mono); font-weight:500}
.split-lg i{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px}

/* ------------------------------------------------------------
   8. YAĞ ÇUBUĞU İLERLEME — çentikli
   ------------------------------------------------------------ */
.dip{position:relative; height:12px; border-radius:6px; background:var(--rule); overflow:hidden}
.dip i{display:block; height:100%; background:var(--accent); border-radius:6px; transition:width .3s ease}
.dip i.warn{background:var(--danger)}
.dip i.ok{background:var(--ok)}
.dip .tick{position:absolute; top:0; bottom:0; width:1px; background:var(--surface); opacity:.85}
.dip .tick:nth-child(2){left:25%}.dip .tick:nth-child(3){left:50%}.dip .tick:nth-child(4){left:75%}
.dip-lg{height:16px; border-radius:8px}
.dip-lbl{display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:9px; letter-spacing:.14em; color:var(--ink-3); margin-bottom:5px}

/* ------------------------------------------------------------
   8b. GÖSTERGE KADRANI — araç paneli dili
   Kullanım: <div class="gauge g-lowbad" style="--val:.72">…</div>
   --val 0..1 arası. İbre kendiliğinden döner.
   ------------------------------------------------------------ */
.gauge{width:100%; max-width:172px; margin:0 auto}
.gauge svg{width:100%; height:auto; display:block; overflow:visible}
.gauge .g-track{fill:none; stroke:var(--rule); stroke-width:8; stroke-linecap:round}
.gauge .z1,.gauge .z2,.gauge .z3{fill:none; stroke-width:8; stroke-linecap:butt}
.g-lowbad .z1{stroke:var(--danger)} .g-lowbad .z2{stroke:var(--warn)} .g-lowbad .z3{stroke:var(--ok)}
.g-highbad .z1{stroke:var(--ok)} .g-highbad .z2{stroke:var(--warn)} .g-highbad .z3{stroke:var(--danger)}
.g-neutral .z1,.g-neutral .z2,.g-neutral .z3{stroke:var(--accent); opacity:.28}
.g-neutral .z3{opacity:1}
.gauge .g-tick{stroke:var(--ink-3); stroke-width:1.8; stroke-linecap:round}
.gauge .g-needle{fill:var(--ink); transform-origin:60px 58px;
  transform:rotate(calc(-60deg + var(--val,.5) * 120deg));
  transition:transform .7s cubic-bezier(.3,.1,.2,1)}
.gauge .g-hub{fill:var(--ink)}
.gauge .g-cap{fill:var(--surface)}
.gauge .g-end{fill:var(--ink-3); font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.08em}
.gauge .g-val{fill:var(--ink); font-family:var(--font-mono); font-size:15px; font-weight:500; text-anchor:middle}
.gauge .g-ic{fill:none; stroke:var(--ink-3); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.gauge-cap{text-align:center; font-size:12px; color:var(--ink-3); margin-top:6px}
.gauge-cap b{color:var(--ink); font-weight:600}

/* gösterge lambaları — renkler sabit anlam taşır, tema değiştirmez */
.lamp{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r); flex:none}
.lamp svg{width:21px; height:21px}
.lamp-engine{color:var(--lamp-engine); background:color-mix(in srgb, var(--lamp-engine) 15%, transparent)}
.lamp-temp{color:var(--lamp-temp);   background:color-mix(in srgb, var(--lamp-temp) 15%, transparent)}
.lamp.blink{animation:stamp-blink 1.4s ease-in-out infinite}
/* Bilgilendirme satırları için nötr ikon kutusu — lamba DEĞİL.
   Lamba yalnızca müdahale gerektiren iki durumda kullanılır. */
.ic-box{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:var(--r); flex:none; background:var(--surface-3); color:var(--ink-2)}
.ic-box svg{width:19px; height:19px}
.lamp-sm{width:26px; height:26px; border-radius:7px}
.lamp-sm svg{width:16px; height:16px}

/* uyarı satırı — lamba + metin */
.alert-row{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--rule)}
.alert-row .t{min-width:0; flex:1}
.alert-row .t b{display:block; font-size:13.5px; font-weight:600}
.alert-row .t span{display:block; font-size:12px; color:var(--ink-3); margin-top:1px}

/* ------------------------------------------------------------
   9. FORMLAR
   ------------------------------------------------------------ */
.field{margin-bottom:var(--sp-3)}
.field > label,.field-lbl{display:block; font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.field .hint{font-size:12px; color:var(--ink-3); margin-top:5px}
.field .err{font-size:12px; color:var(--danger); margin-top:5px; font-weight:500}
.input,.select,.textarea{
  width:100%; height:46px; border-radius:var(--r); border:1.5px solid var(--rule-hard);
  background:var(--surface); padding:0 13px; font-size:15px; color:var(--ink);
  transition:border-color .12s, box-shadow .12s;
}
.textarea{height:auto; min-height:96px; padding:11px 13px; resize:vertical; line-height:1.45}
.select{appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382909C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.input::placeholder,.textarea::placeholder{color:var(--ink-3); opacity:.6; font-weight:400}
.select::placeholder{color:var(--ink-3); opacity:.6}
.input.is-err,.select.is-err,.textarea.is-err{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft)}
.input.mono{font-family:var(--font-mono); letter-spacing:.02em}
.input-sm{height:38px; font-size:14px; padding:0 11px}
.input-lg{height:52px; font-size:17px}

/* önekli giriş (₺, km) */
.input-wrap{position:relative}
.input-wrap .pre,.input-wrap .suf{position:absolute; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:13px; color:var(--ink-3); pointer-events:none}
.input-wrap .pre{left:13px}
.input-wrap .suf{right:13px}
.input-wrap .pre + .input{padding-left:32px}
.input-wrap .has-suf{padding-right:44px}

/* arama */
.search{position:relative}
.search .input{padding-left:40px}
.search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-3); pointer-events:none}

/* onay kutusu ve anahtar */
.check{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2); cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--accent); margin:0}
.toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--rule); cursor:pointer}
.toggle:last-child{border-bottom:0}
.toggle .t b{display:block; font-size:14px; font-weight:600}
.toggle .t span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.toggle input{appearance:none; -webkit-appearance:none; width:44px; height:26px; border-radius:13px; background:var(--rule-hard); position:relative; cursor:pointer; flex:none; transition:background .15s; margin:0}
.toggle input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{transform:translateX(18px)}

/* segment seçici (Tahsil edildi / edilecek) */
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--rule); border-radius:var(--r); padding:3px; gap:3px}
.seg button{font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; border:0; background:none; color:var(--ink-2); padding:8px 14px; border-radius:7px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}

/* form ızgarası */
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--sp-4)}
.form-grid .full{grid-column:1 / -1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   10. TABLO
   ------------------------------------------------------------ */
.tablewrap{overflow-x:auto; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg)}
.table{border-collapse:collapse; width:100%; min-width:560px}
.table thead th{text-align:left; padding:11px 14px; font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); background:var(--surface-2); border-bottom:1px solid var(--rule); white-space:nowrap}
.table tbody td{padding:11px 14px; border-bottom:1px solid var(--rule); font-size:13.5px; vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--surface-2)}
.table .r{text-align:right}
.table .num,.table .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.table tr.click{cursor:pointer}

/* ------------------------------------------------------------
   11. MESAJLAR VE ROZETLER
   ------------------------------------------------------------ */
.msg{border-radius:var(--r); padding:11px 13px; font-size:13px; line-height:1.45; display:flex; gap:9px; align-items:flex-start}
.msg svg{width:16px; height:16px; flex:none; margin-top:2px}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.msg.warn{background:var(--warn-soft); color:var(--warn)}
.msg.err{background:var(--danger-soft); color:var(--danger)}
.msg.info{background:var(--info-soft); color:var(--info)}
.msg b{font-weight:700}
.msg em{font-style:normal; opacity:.75}

.badge{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:20px; background:var(--surface-3); color:var(--ink-2); line-height:1.3}
.badge.ok{background:var(--ok-soft); color:var(--ok)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.err{background:var(--danger-soft); color:var(--danger)}
.badge.info{background:var(--info-soft); color:var(--info)}
.badge svg{width:12px; height:12px}

.count{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); border:1px solid var(--rule-hard); border-radius:20px; padding:1px 7px}

/* kilitli özellik — gizlenmez, soluk durur */
.lock{position:relative; opacity:.6; pointer-events:none; filter:saturate(.6)}
.lock-tag{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--warn); border:1.5px solid currentColor; border-radius:3px; padding:3px 7px}
.lock-tag svg{width:11px; height:11px}
.lock-box{border:1.5px dashed var(--rule-hard); border-radius:var(--r-lg); padding:var(--sp-5); text-align:center; background:var(--surface-2)}
.lock-box h4{margin-bottom:6px}
.lock-box p{font-size:13.5px; color:var(--ink-2); max-width:44ch; margin:0 auto var(--sp-4)}

/* ------------------------------------------------------------
   12. SEKMELER, BOŞ DURUM, MODAL
   ------------------------------------------------------------ */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--rule); margin-bottom:var(--sp-4)}
.tabs button,.tabs a{font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:11px 14px; border:0; background:none; color:var(--ink-3); cursor:pointer; position:relative; text-decoration:none}
.tabs button[aria-selected="true"],.tabs a.on{color:var(--accent)}
.tabs button[aria-selected="true"]::after,.tabs a.on::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:3px; background:var(--accent); border-radius:3px 3px 0 0}
.tabs .ct{margin-left:6px}

.empty{text-align:center; padding:var(--sp-8) var(--sp-4); color:var(--ink-3)}
.empty svg{width:56px; height:56px; margin:0 auto var(--sp-3); color:var(--rule-hard)}
.empty h4{color:var(--ink-2); margin-bottom:4px}
.empty p{font-size:13.5px; max-width:36ch; margin:0 auto var(--sp-4)}

.modal-bg{position:fixed; inset:0; background:rgba(15,25,34,.45); display:grid; place-items:center; padding:var(--sp-4); z-index:50}
.modal{background:var(--surface); border-radius:var(--r-xl); width:100%; max-width:520px; box-shadow:var(--shadow-lg); overflow:hidden}
.modal-h{padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:10px}
.modal-h h3{flex:1}
.modal-b{padding:var(--sp-5)}
.modal-f{padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--rule); display:flex; gap:var(--sp-2); justify-content:flex-end; background:var(--surface-2)}

/* ------------------------------------------------------------
   13. USTA PANELİ — iri dokunma alanı
   ------------------------------------------------------------ */
.job{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); padding:12px 13px; display:flex; flex-direction:column; gap:9px}
.job .jt{display:flex; align-items:center; gap:9px}
.job .jt .stamp{margin-left:auto}
.job .jn b{font-size:14px; font-weight:600; display:block}
.job .jn span{font-size:12px; color:var(--ink-3)}
.job .jf{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--ink-3)}
.job .jf .mono{color:var(--ink-2)}
.usta-actions{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.usta-actions .wide{grid-column:1 / -1}
.usta-actions .btn{height:52px; font-size:12px; border-radius:var(--r-lg)}

/* PIN tuş takımı */
.keys{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.key{height:58px; border-radius:var(--r-lg); border:0; cursor:pointer; font-family:var(--font-mono); font-size:22px; color:var(--ink);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px var(--rule-hard), 0 3px 0 var(--rule-hard);
  transition:transform .07s ease, box-shadow .07s ease; display:grid; place-items:center}
.key:active,.key.hit{transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px var(--rule-hard)}
.key.util{font-size:12.5px; font-family:var(--font-display); font-weight:700; letter-spacing:.06em; color:var(--ink-2)}
.pin-dots{display:flex; gap:9px; justify-content:center; margin:9px 0 15px; min-height:18px; flex-wrap:wrap}
.pin-dots i{width:13px; height:13px; border-radius:50%; background:var(--rule-hard); display:block; transition:background .12s, transform .12s}
.pin-dots i.on{background:var(--accent); transform:scale(1.12)}

/* ------------------------------------------------------------
   14. GRAFİK YARDIMCILARI (SVG sınıfları)
   ------------------------------------------------------------ */
.bar{fill:var(--accent); opacity:.26}
.bar.on{opacity:1}
.axis{stroke:var(--rule)}
.axis-h{stroke:var(--rule-hard)}
.gtxt{fill:var(--ink-3); font-family:var(--font); font-size:10.5px}
.gval{fill:var(--accent); font-family:var(--font-mono); font-size:11px; font-weight:500}
.tline{stroke:var(--ink-3); stroke-width:1.4; stroke-dasharray:5 4}
.ttxt{fill:var(--ink-3); font-family:var(--font); font-size:10.5px; font-weight:600}

/* ------------------------------------------------------------
   15. YARDIMCILAR
   ------------------------------------------------------------ */
.stack{display:flex; flex-direction:column; gap:var(--sp-3)}
.stack-sm{display:flex; flex-direction:column; gap:var(--sp-2)}
.hstack{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
.grid-main{display:grid; grid-template-columns:1.6fr 1fr; gap:var(--sp-4)}
@media (max-width:860px){.grid-2,.grid-3,.grid-main{grid-template-columns:1fr}}
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* hareket azaltma */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ------------------------------------------------------------
   16. YAZDIRMA — servis formu ve ekstre
   ------------------------------------------------------------ */
@media print{
  :root{--bg:#fff; --surface:#fff; --surface-2:#fff}
  body{background:#fff; color:#000; font-size:12px}
  .gy-nav,.btn,.no-print{display:none !important}
  .gy-shell{display:block}
  .gy-page{padding:0}
  .card{border:1px solid #999; break-inside:avoid}
  .stamp,.date-stamp{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .plate::before{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .haz::before,.haz-line{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  a{color:#000; text-decoration:none}
  .print-note{font-size:10px; color:#555; border-top:1px solid #999; padding-top:6px; margin-top:12px}
}

/* ==========================================================================
   BAKIM UYARI ŞERİDİ — yaklaşan planlı bakım
   ==========================================================================
   Her panelde görünür (patron ve usta). Bakıma UYARI_SAAT kala çıkar,
   bakım başlayınca yerini bakım ekranı alır. */
.bakim-serit{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:9px 14px;background:var(--warn-soft);color:var(--warn);
  border-bottom:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  font-size:12.5px;line-height:1.5;text-align:center}
.bakim-serit svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.bakim-serit b{color:var(--ink)}