/* ══════════════════════════════════════════════════════════════
   CANDAN MÜHENDİSLİK — SERVİS YÖNETİM SİSTEMİ
   Kurumsal Tasarım Sistemi · tek kaynak · v2 (sıfırdan)
   ══════════════════════════════════════════════════════════════ */

/* ---------- 1. TASARIM TOKEN'LARI ---------- */
:root{
  /* marka yeşili — kurumsal: #2E7D32 (ana), #388E3C (ikincil) */
  --g-900:#14481a; --g-800:#1b5a22; --g-700:#256d2b; --g-600:#2e7d32;
  --g-500:#388e3c; --g-400:#5daa61; --g-300:#93c896; --g-100:#e6f3e7; --g-50:#f1f8f2;
  /* mavi (ödeme/bilgi vurgusu) — açık mavi: #42A5F5, #64B5F6 */
  --b-700:#1976d2; --b-600:#42a5f5; --b-500:#64b5f6; --b-100:#e3f2fd;
  /* nötr / metin */
  --ink:#15211a; --ink-2:#3f4f45; --muted:#6b7a70; --faint:#9aa79f;
  --line:#e6ebe7; --line-2:#eef2ef; --bg:#f3f6f3; --card:#ffffff;
  /* durum */
  --amber:#a56715; --amber-100:#f8efdc; --red:#b23c30; --red-100:#f8e7e5;
  --slate:#5f6b7a; --slate-100:#eceff2;
  --teal:#0d9488; --teal-100:#d5f2ee;
  /* ölçü */
  --r-card:12px; --r-ctrl:9px; --r-pill:22px;
  --side-w:236px; --top-h:62px;
  --shadow:0 1px 2px rgba(16,40,25,.04),0 1px 3px rgba(16,40,25,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;background:var(--bg);
  color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.tnum{font-variant-numeric:tabular-nums}
/* Tüm çizgi ikonlar: tek stil, tek renk kaideleri */
svg{stroke-linecap:round;stroke-linejoin:round;fill:none}

/* ---------- 2. UYGULAMA İSKELETİ ---------- */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;grid-template-rows:var(--top-h) 1fr;min-height:100vh}

/* topbar */
.topbar{grid-column:1/3;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:22px;padding:0 22px;position:sticky;top:0;z-index:30}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:6px;
  background:linear-gradient(90deg,
    var(--g-800) 0,
    var(--g-800) var(--side-w),
    var(--b-600) calc(var(--side-w) + 160px),
    var(--b-500) calc(var(--side-w) + 320px))}
.brand{display:flex;align-items:center;gap:11px;width:calc(var(--side-w) - 22px)}
.brand-logo{height:44px;width:auto;max-width:100%;object-fit:contain;display:block}
.brand-mark{width:37px;height:37px;border-radius:10px;background:var(--g-600);color:#fff;
  display:grid;place-items:center;font-family:'Archivo';font-weight:800;font-size:19px}
.brand-txt{font-family:'Archivo';font-weight:500;font-size:12.5px;letter-spacing:.02em;color:var(--muted);line-height:1.15}
.brand-txt b{display:block;color:var(--ink);font-weight:700;font-size:13.5px}
.search{flex:1;max-width:420px;position:relative}
.search form{position:relative;display:block}
.search input{width:100%;height:38px;border:1px solid var(--line);border-radius:var(--r-ctrl);
  padding:0 40px 0 38px;font:inherit;font-size:13.5px;background:var(--g-50);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--g-400);background:#fff;box-shadow:0 0 0 3px var(--g-100)}
.search .ic{position:absolute;left:13px;top:11px;width:16px;height:16px;stroke:var(--b-600);stroke-width:2;z-index:1;pointer-events:none}
.search-go{position:absolute;right:4px;top:4px;width:30px;height:30px;border:none;background:transparent;
  border-radius:7px;cursor:pointer;display:grid;place-items:center}
.search-go svg{width:15px;height:15px;stroke:var(--muted);stroke-width:2;fill:none}
.search-go:hover{background:var(--g-100)}
.search-go:hover svg{stroke:var(--g-600)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.user{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--g-700);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:12.5px}
.user-meta{line-height:1.25}
.user-meta b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.user-meta span{font-size:11px;color:var(--muted)}
.icon-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r-ctrl);background:#fff;
  display:grid;place-items:center;cursor:pointer}
.icon-btn svg{width:17px;height:17px;stroke:var(--muted);stroke-width:2}
.icon-btn:hover{background:var(--red-100);border-color:#eecbc7}
.icon-btn:hover svg{stroke:var(--red)}

/* sidebar */
.side{background:var(--g-800);padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.side-grp{color:var(--g-300);font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:14px 12px 6px}
.side-grp:first-child{padding-top:2px}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;
  color:#cfe3d5;font-weight:500;font-size:13.5px;cursor:pointer;transition:background .12s}
.nav svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;flex:none}
.nav:hover{background:rgba(255,255,255,.07);color:#fff}
.nav.active{background:var(--g-600);color:#fff;font-weight:600}
.side-foot{margin-top:auto;padding:14px 12px 4px;color:var(--g-300);font-size:11px;line-height:1.55;opacity:.8}

/* main */
/* overflow-x:hidden .main'i KAYDIRMA KABI yapar; o zaman içindeki
   position:sticky viewport'a değil .main'e göre çözülür ve hiç yapışmaz
   (2026-09-04: ses analizi detayındaki üst bar bu yüzden çalışmıyordu,
   içerik üst barın altına giriyordu). overflow-x:clip yatay taşmayı yine
   keser ama kaydırma kabı YARATMAZ. hidden, clip'i desteklemeyen eski
   tarayıcılar için yedek olarak önce yazılıyor. */
.main{padding:24px 28px 48px;overflow-x:hidden;overflow-x:clip}
.crumb{color:var(--muted);font-size:12px;margin-bottom:5px;font-weight:500}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
h1{font-size:23px}
h1 .sub{color:var(--muted);font-weight:500;font-size:14px;margin-left:9px;font-family:'IBM Plex Sans'}
h2{font-size:17px}

/* ---------- 3. BUTONLAR (tutarlı, ayırt edilebilir) ---------- */
/* Kural: primary=dolu yeşil (ana eylem) · ghost=beyaz çerçeve (ikincil) · danger=kırmızı (yıkıcı) · blue=mavi (rapor/dışa) */
.btn{height:40px;padding:0 18px;border-radius:var(--r-ctrl);border:1px solid transparent;font:inherit;
  font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;transition:background .12s,border-color .12s}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2}
.btn-primary{background:var(--g-600);color:#fff}
.btn-primary:hover{background:var(--g-700)}
.btn-primary:disabled{background:var(--g-300);cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--g-700);border-color:var(--line)}
.btn-ghost:hover{background:var(--g-50);border-color:var(--g-300)}
.btn-blue{background:var(--b-700);color:#fff}
.btn-blue:hover{background:#1565c0}
.btn-danger{background:#fff;color:var(--red);border-color:#eecbc7}
.btn-danger:hover{background:var(--red-100)}
.btn-danger-solid{background:var(--red);color:#fff}
.btn-danger-solid:hover{filter:brightness(.94)}
.btn-sm{height:34px;padding:0 13px;font-size:13px}
.btn-lg{height:46px;padding:0 24px;font-size:15px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-block{width:100%;justify-content:center}

/* ---------- 4. İKON AKSİYON KUTULARI (tablo satırları) ---------- */
/* Kural: hepsi tek boyut, tek renk (nötr yeşil); sil = hover'da kırmızı */
.actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.tutar-input{width:104px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--g-50);
  padding:0 10px;font:inherit;font-size:13.5px;font-variant-numeric:tabular-nums;text-align:right;
  color:var(--ink);transition:.12s}
.tutar-input:hover{border-color:var(--g-300)}
.tutar-input:focus{outline:none;border-color:var(--g-400);background:#fff;box-shadow:0 0 0 3px var(--g-100)}
.iact{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;
  display:inline-grid;place-items:center;cursor:pointer;transition:.12s}
.iact svg{width:15px;height:15px;stroke:var(--g-700);stroke-width:2}
.iact:hover{border-color:var(--g-400);background:var(--g-50)}
.iact.del svg{stroke:var(--faint)}
.iact.del:hover{border-color:#eecbc7;background:var(--red-100)}
.iact.del:hover svg{stroke:var(--red)}
.iact.blue svg{stroke:var(--b-600)}
.iact.blue:hover{border-color:#bcd4ee;background:var(--b-100)}

/* ---------- 5. KARTLAR ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.card-head{padding:15px 20px;border-bottom:1px solid var(--line-2);display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.card-head h2,.card-head h3{font-size:15px;font-weight:700}
.card-body{padding:20px}
.card.locked{opacity:.6;pointer-events:none}

/* ---------- 6. İSTATİSTİK ŞERİDİ ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:15px 17px;position:relative;box-shadow:var(--shadow)}
.stat .k{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:7px}
.stat .k-adet{margin-left:8px;padding-left:8px;border-left:1px solid var(--line);
  font-size:12px;color:var(--muted);font-weight:500}
.stat .v{font-family:'Archivo';font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1}
.stat .v small{font-size:13px;color:var(--muted);font-weight:500}
.stat .badge-ic{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.stat .badge-ic svg{width:18px;height:18px;stroke-width:2}
.stat.green .badge-ic{background:var(--g-100)} .stat.green .badge-ic svg{stroke:var(--g-600)}
.stat.blue .badge-ic{background:var(--b-100)} .stat.blue .badge-ic svg{stroke:var(--b-600)}
.stat.amber .badge-ic{background:var(--amber-100)} .stat.amber .badge-ic svg{stroke:var(--amber)}
.stat.slate .badge-ic{background:var(--slate-100)} .stat.slate .badge-ic svg{stroke:var(--slate)}
.stat.teal .badge-ic{background:var(--teal-100)} .stat.teal .badge-ic svg{stroke:var(--teal)}

/* ---------- 7. FİLTRE ÇUBUĞU ---------- */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 16px;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px;box-shadow:var(--shadow)}
.filters .fld{display:flex;flex-direction:column;gap:6px}
.filters .fld > label{font-size:11px;color:var(--muted);font-weight:600}
.filters .push{margin-left:auto;display:flex;gap:8px;align-items:flex-end}
/* Tarih aralığı seçici */
.filters.daterange{flex-direction:column;align-items:stretch;gap:12px;overflow:visible}
.dr-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dr-quick{display:flex;gap:8px;flex-wrap:wrap}
.dr-q{font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;transition:.12s}
.dr-q:hover{border-color:var(--g-400);background:var(--g-50)}
.dr-q.active{background:var(--g-600);color:#fff;border-color:var(--g-600)}
.dr-summary{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dr-field-wrap{position:relative}
.dr-field{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:13.5px;font-weight:600;
  padding:9px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);cursor:pointer;
  min-width:270px;transition:.12s}
.dr-field:hover{border-color:var(--g-400)}
.dr-field svg{width:16px;height:16px;stroke:var(--b-600);stroke-width:2;fill:none;flex:none}
.dr-field .dr-caret{margin-left:auto;stroke:var(--muted)}
.dr-cal{position:absolute;top:calc(100% + 6px);right:0;z-index:50;border:1px solid var(--line);border-radius:12px;
  background:#fff;padding:14px;box-shadow:0 12px 32px rgba(16,40,25,.18);width:320px;max-width:90vw}
.dr-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dr-nav{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;
  display:grid;place-items:center}
.dr-nav:hover{background:var(--g-50);border-color:var(--g-400)}
.dr-nav svg{width:16px;height:16px;stroke:var(--ink);stroke-width:2;fill:none}
.dr-mysel{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}
.dr-sel{height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.dr-sel:focus{outline:none;border-color:var(--g-400);box-shadow:0 0 0 3px var(--g-100)}
.dr-grids{display:flex;gap:24px}
.dr-grid{flex:1}
.dr-gh{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.dr-gh span{text-align:center;font-size:11px;font-weight:600;color:var(--muted)}
.dr-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dr-empty{height:34px}
.dr-day{height:34px;border:none;background:transparent;font:inherit;font-size:13px;cursor:pointer;
  border-radius:0;color:var(--ink);transition:background .1s}
.dr-day:hover{background:var(--g-100)}
.dr-day.inrange{background:var(--g-100)}
.dr-day.sel{background:var(--g-600);color:#fff;font-weight:700}
.dr-day.sel.start{border-radius:8px 0 0 8px}
.dr-day.sel.end{border-radius:0 8px 8px 0}
.dr-day.sel.start.end{border-radius:8px}
.dr-cal-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);text-align:right}
.dr-temizle{border:none;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px}
.dr-temizle:hover{background:var(--g-50);color:var(--ink)}
.sonuc-bar{display:flex;justify-content:flex-end;margin-bottom:12px}
/* Segment kontrol (Açık | Kapalı gibi bitişik seçim) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-ctrl);overflow:hidden;height:40px}
.seg-btn{display:inline-flex;align-items:center;padding:0 16px;font-size:13.5px;font-weight:600;
  color:var(--muted);background:#fff;border-right:1px solid var(--line);cursor:pointer;white-space:nowrap}
.seg-btn:last-child{border-right:none}
.seg-btn:hover{background:var(--g-50)}
.seg-btn.active{background:var(--g-600);color:#fff}

/* ---------- 8. FORM KONTROLLERİ (Django widget'ları buraya düşer) ---------- */
.form-control,.form-select,input[type=text],input[type=search],input[type=number],
input[type=password],input[type=email],input[type=date],select,textarea{
  width:100%;height:40px;border:1px solid var(--line);border-radius:var(--r-ctrl);
  padding:0 12px;font:inherit;font-size:13.5px;background:var(--g-50);color:var(--ink);display:block}
[hidden]{display:none !important}
textarea,textarea.form-control{height:auto;min-height:80px;padding:10px 12px;resize:vertical}
select[size]{height:auto}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--g-400);background:#fff;box-shadow:0 0 0 3px var(--g-100)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.form-label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
.form-text{font-size:11.5px;color:var(--faint);margin-top:4px}
.text-danger{color:var(--red)}
.form-check{display:flex;align-items:center;gap:8px}
.form-check-input,input[type=checkbox]{width:18px;height:18px;accent-color:var(--g-600);display:inline}

/* form yerleşimi */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:22px 24px;max-width:900px}
.form-card.form-narrow{max-width:720px;margin-left:auto;margin-right:auto}
.form-narrow-head{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.form-narrow-head .page-head{justify-content:center}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-grid .full{grid-column:1/-1}
.fld-col{display:flex;flex-direction:column;gap:6px}
/* Aranabilir araç seçici */
.arac-secici,.urun-secici{position:relative}
.as-field:disabled{background:var(--g-50);cursor:not-allowed;opacity:.7}
.as-field:disabled .as-ic{stroke:var(--faint)}
.us-item{display:flex !important;align-items:center;justify-content:space-between;gap:12px}
.us-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us-fiyat{flex:none;font-variant-numeric:tabular-nums;font-weight:600;color:var(--g-600);font-size:13px}
.as-item.aktif .us-fiyat{color:var(--g-700)}
.as-field{display:flex;align-items:center;gap:9px;width:100%;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit;font-size:13.5px;
  color:var(--ink);cursor:pointer;text-align:left;transition:.12s}
.as-field:hover{border-color:var(--g-400)}
.as-field .as-ic{width:17px;height:17px;stroke:var(--b-600);stroke-width:2;fill:none;flex:none}
.as-field .as-caret{width:16px;height:16px;stroke:var(--muted);stroke-width:2;fill:none;margin-left:auto;flex:none}
.as-field .as-placeholder{color:var(--faint)}
.as-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:#fff;
  border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 32px rgba(16,40,25,.18);
  padding:10px;max-width:100%}
.as-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;
  padding:0 10px;height:38px;margin-bottom:8px}
.as-search svg{width:15px;height:15px;stroke:var(--muted);stroke-width:2;fill:none;flex:none}
.as-search input{border:none;outline:none;flex:1;font:inherit;font-size:13.5px;background:transparent;color:var(--ink)}
.as-list{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.as-item{display:block;width:100%;text-align:left;padding:9px 11px;border:none;background:#fff;
  font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;border-radius:7px;transition:background .1s}
.as-item:hover{background:var(--g-50)}
.as-item.aktif{background:var(--g-100);color:var(--g-700)}
.as-item b{font-weight:700}
.as-bos{padding:16px;text-align:center;color:var(--muted);font-size:13px}
/* İletişim butonları (WhatsApp / SMS) */
.tel-cell{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.tel-no{font-variant-numeric:tabular-nums;color:var(--muted);min-width:96px;display:inline-block}
.tel-btns{display:inline-flex;gap:5px;flex:none}
.tel-btn{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;
  display:inline-grid;place-items:center;transition:.12s;padding:0}
.tel-btn svg{width:15px;height:15px;fill:none;stroke-width:2}
.tel-btn.wa svg{stroke:#25D366}
.tel-btn.wa:hover{background:#25D366;border-color:#25D366}
.tel-btn.wa:hover svg{stroke:#fff}
.tel-btn.sms svg{stroke:var(--b-600)}
.tel-btn.sms:hover{background:var(--b-600);border-color:var(--b-600)}
.tel-btn.sms:hover svg{stroke:#fff}
/* Modal (SMS) */
.modal-arka{position:fixed;inset:0;z-index:200;background:rgba(16,30,22,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal-arka[hidden]{display:none}
.as-panel[hidden],.dr-cal[hidden]{display:none}
.modal-kutu{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);width:100%;max-width:440px;
  overflow:hidden;animation:modalUp .16s ease}
@keyframes modalUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.modal-bas{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-bas > div{display:flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px}
.modal-ic{width:18px;height:18px;stroke:var(--b-600);stroke-width:2;fill:none}
.modal-x{width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.modal-x:hover{background:var(--g-50)}
.modal-x svg{width:18px;height:18px;stroke:var(--muted);stroke-width:2;fill:none}
.modal-govde{padding:18px}
.modal-alici{font-size:13px;color:var(--muted);margin-bottom:10px}
.modal-alici b{color:var(--ink)}
.modal-mesaj{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;
  font-size:14px;color:var(--ink);resize:vertical;min-height:90px}
.modal-mesaj:focus{outline:none;border-color:var(--g-400);box-shadow:0 0 0 3px var(--g-100)}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line);background:var(--g-50)}
.form-foot{display:flex;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}

/* ---------- 9. TABLOLAR ---------- */
.tbl-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--g-50);text-align:left;font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.05em;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
thead th.r,tbody td.r{text-align:right}
tbody td{padding:13px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
.tbl-wrap{transform:translateZ(0)}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover td,
tbody tr.clickable.row-hover td{background:var(--g-100)}
tbody tr.clickable:hover .plaka,
tbody tr.clickable.row-hover .plaka{text-decoration:underline}
.plaka{font-family:'Archivo';font-weight:700;letter-spacing:.02em;color:var(--b-700)}
a.plaka:hover{color:var(--b-600);text-decoration:underline}
.cell-sub{color:var(--muted);font-size:12px;margin-top:1px}
.tutar{font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-foot{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
  border-top:1px solid var(--line);background:var(--g-50);flex-wrap:wrap;gap:10px}
.tbl-foot .info{color:var(--muted);font-size:12.5px}
/* Sayfalama */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--line);background:var(--g-50)}
.pagination .pg-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pagination .pg-info{color:var(--muted);font-size:12.5px;white-space:nowrap}
.pg-adet{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);white-space:nowrap;
  padding-left:14px;border-left:1px solid var(--line)}
.pg-adet select{height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.pg-adet select:focus{outline:none;border-color:var(--g-400);box-shadow:0 0 0 3px var(--g-100)}
.pagination .pg-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:.12s}
.pg:hover{border-color:var(--g-400);background:var(--g-50)}
.pg.active{background:var(--g-600);color:#fff;border-color:var(--g-600)}
.pg.disabled{color:var(--faint);background:var(--g-50);cursor:default;pointer-events:none}
.pg.dots{border:none;background:transparent;min-width:20px;padding:0;pointer-events:none;color:var(--faint)}
.empty{text-align:center;color:var(--muted);padding:44px 16px}

/* ---------- 10. PILL / BADGE (durum) ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 11px;border-radius:var(--r-pill);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.acik,.pill.aktif,.pill.on{background:var(--g-100);color:var(--g-600)}
.pill.kapali,.pill.pasif,.pill.off{background:var(--slate-100);color:var(--slate)}
.pill.bekle{background:var(--amber-100);color:var(--amber)}
.pill-say{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--b-100);color:var(--b-700);white-space:nowrap}
.tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:3px 9px;
  border-radius:7px;background:var(--slate-100);color:var(--slate)}
.tag.g{background:var(--g-100);color:var(--g-600)}
.tag.b{background:var(--b-100);color:var(--b-600)}
.tag.a{background:var(--amber-100);color:var(--amber)}
/* toggle butonu (form içinde pill görünümlü) */
.toggle{border:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  padding:4px 13px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px}
.toggle::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.toggle.on{background:var(--g-100);color:var(--g-600)}
.toggle.off{background:var(--slate-100);color:var(--slate)}

/* ---------- 11. UYARILAR ---------- */
.alert{border-radius:var(--r-ctrl);padding:11px 15px;font-size:13.5px;margin-bottom:16px;border:1px solid transparent}
.alert-success{background:var(--g-100);color:var(--g-700);border-color:#c9e3d0}
.alert-danger{background:var(--red-100);color:var(--red);border-color:#eecbc7}
.alert-info{background:var(--b-100);color:var(--b-700);border-color:#cfe0f6}

/* ---------- 13. İŞ EMRİ DETAY ---------- */
.kunye{border-radius:var(--r-card);padding:16px 20px;margin-bottom:16px;display:flex;
  align-items:center;gap:20px;flex-wrap:wrap;color:#eafaef}
.kunye.acik{background:var(--g-700)}
.kunye.kapali{background:#7a2b24}
.kunye.bilgi{background:#3a4250}
.kunye .plaka-b{font-family:'Archivo';font-size:22px;font-weight:800;color:#fff}
.kunye .meta{display:flex;flex-direction:column;gap:1px}
.kunye .meta .l{font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.kunye .meta .v{font-size:13.5px}
.kunye .sep{width:1px;height:32px;background:rgba(255,255,255,.22)}
.kunye .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.kunye .k-badge{background:rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--r-pill)}
.detay-grid{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start}
/* Dikey akış düzeni: künye → kayıt satırı → kalem ekle → kalemler */
.detay-akis{display:flex;flex-direction:column;gap:16px}
.card-head .cat-row{margin-bottom:0}
/* Yatay tek satır form: alanlar yan yana, Not esner, buton sağda */
.satir-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:nowrap}
.sf-fld{display:flex;flex-direction:column;gap:5px;min-width:150px}
.sf-fld .form-label{margin:0}
.sf-fld.sf-grow{flex:1;min-width:200px}
.sf-fld.sf-btn{min-width:0}
.sf-fld.sf-btn .btn{white-space:nowrap;height:40px}
.satir-form .urun-secici{width:100%}
@media(max-width:900px){
  .satir-form{flex-wrap:wrap}
  .sf-fld{min-width:140px;flex:1}
}
.cat-row{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.cat-btn{border:1px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-size:12.5px;
  font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer}
.cat-btn:hover{border-color:var(--g-400)}
.cat-btn.active{background:var(--g-600);color:#fff;border-color:var(--g-600)}
.total-line{display:flex;align-items:center;justify-content:space-between}
.total-line .val{font-family:'Archivo';font-size:19px;font-weight:700;color:var(--g-600)}
.field-row{margin-bottom:12px}

/* ---------- 14. RANDEVU TAKVİMİ (referans grid + modal) ---------- */
.rdv-bar{display:flex;align-items:center;gap:10px}
.rdv-bar .lbl{font-family:'Archivo';font-weight:600;font-size:15px;min-width:210px;text-align:center}
.rdv-bar .lbl small{display:block;color:var(--muted);font-weight:500;font-size:11.5px}
.rdv-nav,.rdv-today{height:38px;border:1px solid var(--line);background:#fff;border-radius:var(--r-ctrl);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:600;font-size:13px;color:var(--g-700)}
.rdv-nav{width:38px}
.rdv-nav svg{width:16px;height:16px;stroke:var(--g-700);stroke-width:2}
.rdv-today{padding:0 15px}
.rdv-nav:hover,.rdv-today:hover{border-color:var(--g-400);background:var(--g-50)}
.rdv-legend{display:flex;gap:18px;margin-bottom:14px;font-size:12.5px;color:var(--muted);align-items:center}
.rdv-legend .it{display:flex;align-items:center;gap:7px}
.rdv-legend .chip{width:12px;height:12px;border-radius:3px;border:1px solid}
.rdv-legend .chip.red{background:var(--red-100);border-color:#f0ccc7}
.rdv-legend .chip.green{background:var(--g-100);border-color:var(--g-400)}
.rdv-legend .chip.empty{background:#fff;border-color:var(--line)}
.cal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow-x:auto;box-shadow:var(--shadow)}
.cal-grid{display:grid;grid-template-columns:64px repeat(7,minmax(110px,1fr));min-width:900px}
.cal-corner{background:var(--g-50);border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.cal-hcell{background:var(--g-50);border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:10px 6px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;text-align:center}
.cal-hcell .d{display:block;font-family:'Archivo';font-size:15px;color:var(--ink);letter-spacing:0;margin-top:1px}
.cal-hcell.today{background:var(--g-100)} .cal-hcell.today .d{color:var(--g-600)}
.cal-tcell{border-bottom:1px solid var(--line-2);border-right:1px solid var(--line);padding:8px 4px;font-size:11.5px;
  font-weight:600;color:var(--muted);text-align:center;background:var(--g-50);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center}
.cal-cell{border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);padding:4px;
  display:flex;flex-direction:column;gap:3px;min-height:56px}
.cal-cell.last{border-right:none}
.appt{height:52px;border-radius:7px;padding:6px 8px;border:1px solid;font-size:12px;line-height:1.25;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;text-decoration:none;overflow:hidden}
.appt .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt .car{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt .st{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;margin-top:1px}
.appt .st svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4}
.appt.bekle{background:var(--red-100);border-color:#f0ccc7;color:#a13226}
.appt.teyit{background:var(--g-100);border-color:var(--g-400);color:var(--g-700)}
.appt-empty{height:52px;border-radius:7px;display:grid;place-items:center;color:#cdd6cf;
  cursor:pointer;border:1px dashed var(--line);text-decoration:none;background:#fbfcfb}
.appt-empty:hover{background:var(--g-50);color:var(--g-600);border-color:var(--g-300)}
.appt-empty .ser{font-size:10px;font-weight:700;color:#bcc6be}

/* Randevu üzerinde küçük "Taşı" ikonu (normal mod) */
.appt-wrap{position:relative}
.appt-tasi{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:5px;
  background:rgba(255,255,255,.85);display:grid;place-items:center;opacity:0;transition:opacity .12s}
.appt-tasi svg{width:12px;height:12px;stroke:var(--ink-2);stroke-width:2}
.appt-wrap:hover .appt-tasi{opacity:1}
.appt-tasi:hover{background:var(--g-600);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.appt-tasi:hover svg{stroke:#fff}
.appt-sil-form{position:absolute;top:27px;right:3px;margin:0}
.appt-sil{width:20px;height:20px;border:none;padding:0;border-radius:5px;cursor:pointer;
  background:rgba(255,255,255,.85);display:grid;place-items:center;opacity:0;transition:opacity .12s}
.appt-sil svg{width:12px;height:12px;stroke:var(--red);stroke-width:2;fill:none}
.appt-wrap:hover .appt-sil{opacity:1}
.appt-sil:hover{background:var(--red);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.appt-sil:hover svg{stroke:#fff}

/* TAŞIMA MODU */
.tasi-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fef3e2;border:1px solid #f6d9ac;border-radius:var(--r-card);padding:11px 16px;margin-bottom:14px}
.tasi-bar .msg{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#8a5a12}
.tasi-bar .msg svg{width:18px;height:18px;stroke:#b7791f;stroke-width:2;flex:none}
.tasi-bar b{font-weight:700}
/* taşınan randevunun kendi hücresi */
.appt.tasinan{height:52px;border-radius:7px;padding:6px 8px;border:2px dashed #b7791f;background:#fef3e2;color:#8a5a12;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;font-size:12px}
.appt.tasinan .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt.tasinan .car{font-size:11px;opacity:.85}
/* taşıma modunda dolu slotlar: soluk, tıklanamaz */
.appt.dolu-pasif{height:52px;border-radius:7px;padding:6px 8px;border:1px solid #f0ccc7;background:#faeceb;color:#b89a97;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;font-size:12px;cursor:not-allowed}
.appt.dolu-pasif .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt.dolu-pasif .car{font-size:11px;opacity:.8}
/* taşıma modunda boş hedef slotlar: yeşil, tıklanabilir */
.appt-hedef{height:52px;width:100%;border-radius:7px;border:1.5px solid var(--g-400);background:var(--g-100);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;
  color:var(--g-600);font:inherit}
.appt-hedef svg{width:15px;height:15px;stroke:var(--g-600);stroke-width:2.4}
.appt-hedef .ser{font-size:9px;font-weight:700}
.appt-hedef:hover{background:var(--g-400);color:#fff;border-color:var(--g-600)}
.appt-hedef:hover svg{stroke:#fff}

/* ---------- 15. DOCK (dokunmatik kiosk) ---------- */
/* Ana uygulamayla aynı tasarım dili: beyaz topbar + logo + gradyan şerit,
   kart yüzeyleri, kurumsal yeşil/mavi. Tüm dokunma hedefleri büyütüldü. */
.kiosk{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.kiosk-top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 26px;height:78px}
.kiosk-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:6px;
  background:linear-gradient(90deg,var(--g-800) 0,var(--g-800) 240px,var(--b-600) 400px,var(--b-500) 560px)}
.kiosk-top .brand{width:auto;gap:14px}
.kiosk-top .brand-logo{height:46px}
.kiosk-top .kiosk-etiket{font-family:'Archivo';font-weight:700;font-size:15px;color:var(--muted);
  padding-left:16px;margin-left:2px;border-left:1px solid var(--line)}
.kiosk-body{flex:1;padding:34px 24px 56px;max-width:1100px;margin:0 auto;width:100%}
.kiosk-h{text-align:center;font-family:'Archivo';font-size:31px;font-weight:700;margin:16px 0 28px;letter-spacing:-.4px}

/* adım göstergesi */
.kiosk-steps{display:flex;justify-content:center;gap:10px;margin-bottom:26px}
.kiosk-steps .s{width:52px;height:8px;border-radius:4px;background:var(--line)}
.kiosk-steps .s.on{background:var(--g-500)}

/* plaka/müşteri rozeti */
.kiosk-plaka{display:inline-flex;align-items:center;gap:12px;background:var(--g-50);
  border:1px solid var(--g-300);border-radius:14px;padding:12px 20px;font-size:17px;font-weight:600;color:var(--g-800)}
.kiosk-plaka .pl{font-family:'Archivo';font-weight:800;font-size:20px;background:var(--g-600);
  color:#fff;padding:5px 13px;border-radius:9px;letter-spacing:.5px}

/* büyük dokunmatik butonlar */
.dock-opts{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:860px;margin:0 auto}
.dock-opt{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:74px;min-width:190px;padding:0 34px;background:var(--g-600);color:#fff;
  font-family:inherit;font-size:20px;font-weight:600;border:none;border-radius:16px;cursor:pointer;
  transition:.15s;box-shadow:0 2px 8px rgba(46,125,50,.18);text-decoration:none}
.dock-opt:hover,.dock-opt:active{background:var(--g-700);transform:translateY(-1px)}
.dock-opt svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;fill:none}
.dock-opt.sec{background:#fff;color:var(--g-700);border:1px solid var(--line);box-shadow:none}
.dock-opt.sec:hover{border-color:var(--g-400);background:var(--g-50)}
.dock-opt.mavi{background:var(--b-600);box-shadow:0 2px 8px rgba(66,165,245,.22)}
.dock-opt.mavi:hover{background:var(--b-700)}

/* plaka arama */
.dock-search{display:flex;gap:14px;max-width:760px;margin:0 auto}
.dock-search input{flex:1;font-size:27px;font-weight:600;height:76px;padding:0 22px;border-radius:16px;
  text-align:center;background:#fff;border:1px solid var(--line);letter-spacing:1px}
.dock-search input:focus{outline:none;border-color:var(--g-400);box-shadow:0 0 0 4px var(--g-100)}

/* sonuç listesi */
.dock-list{max-width:860px;margin:26px auto 0}
.dock-item{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;margin-bottom:12px;cursor:pointer;transition:.15s}
.dock-item:hover{border-color:var(--b-600);background:var(--b-100);transform:translateY(-1px)}
.dock-item .n{width:60px;height:60px;border-radius:14px;background:var(--g-600);color:#fff;
  display:grid;place-items:center;font-family:'Archivo';font-size:23px;flex:none;font-weight:800}
.dock-item .info{flex:1;font-size:20px;color:var(--ink);font-weight:600}
.dock-item .info small{display:block;font-size:15px;color:var(--muted);font-weight:400;margin-top:4px}
.dock-item .dock-opt{min-height:56px;min-width:0;padding:0 22px;font-size:16px}

/* hizmet seçimi */
.dock-svc{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:0 20px;min-height:68px;margin-bottom:0;cursor:pointer;transition:.15s}
.dock-svc:hover{border-color:var(--g-400);background:var(--g-50)}
.dock-svc.secili{border-color:var(--g-600);background:var(--g-50);box-shadow:0 0 0 2px var(--g-100)}
.dock-svc .name{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:500}
.dock-svc .price{font-size:17px;color:var(--g-600);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dock-svc input[type=checkbox]{width:26px;height:26px;flex:none;accent-color:var(--g-600)}

/* büyük giriş alanları (km, işçilik, arama) */
.dock-alan{display:flex;flex-direction:column;gap:8px;text-align:left}
.dock-alan label{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.dock-alan input{height:64px;font-size:20px;padding:0 18px;border-radius:14px;border:1px solid var(--line);
  background:#fff;font-family:inherit}
.dock-alan input:focus{outline:none;border-color:var(--g-400);box-shadow:0 0 0 4px var(--g-100)}
.dock-alan.orta input{text-align:center;font-size:30px;font-weight:600;height:82px}

/* kiosk kart yüzeyi */
.kiosk-kart{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;
  max-width:640px;margin:0 auto}

/* sabit köşe butonları */
.dock-fab{position:fixed;right:26px;bottom:26px;display:flex;flex-direction:column;gap:14px;z-index:20}
.dock-fab a{width:68px;height:68px;border-radius:18px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);box-shadow:0 4px 14px rgba(16,40,25,.10);transition:.15s}
.dock-fab a:hover{transform:translateY(-2px)}
.dock-fab a svg{width:27px;height:27px;stroke:var(--g-700);stroke-width:2;fill:none}
.dock-fab a.dolu{background:var(--g-600);border-color:var(--g-600)}
.dock-fab a.dolu svg{stroke:#fff}

/* fiş önizleme */
.fis{max-width:480px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.fis-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:16px}
.fis-row.tot{border-bottom:none;border-top:2px solid var(--ink);margin-top:10px;padding-top:14px;
  font-family:'Archivo';font-weight:700;font-size:21px}

@media(max-width:760px){
  .kiosk-h{font-size:25px}
  .dock-opt{min-width:150px;font-size:18px;min-height:66px;padding:0 24px}
  .kiosk-top .kiosk-etiket{display:none}
}


/* dokunmatik: sayı artır/azalt oklarını gizle */
.kiosk input[type=number]::-webkit-outer-spin-button,
.kiosk input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kiosk input[type=number]{-moz-appearance:textfield}


/* TL sembolü ikon yerine kullanıldığında */
.tl-ic{font-family:'Archivo',system-ui,sans-serif;font-weight:700;line-height:1;display:inline-block}
.badge-ic .tl-ic{font-size:17px}
.dock-fab a .tl-ic{font-size:28px;color:var(--g-700)}


/* kiosk: araç seçici ve select'ler dokunmatik boyutta */
.kiosk .dock-alan .as-field{height:64px;font-size:18px;border-radius:14px;padding:0 16px}
.kiosk .dock-alan .as-panel{border-radius:14px}
.kiosk .dock-alan .as-item{padding:14px 16px;font-size:17px}
.kiosk .dock-alan .as-search input{height:52px;font-size:17px}


/* dock: araç dosyası notu (plaka sonuç kutusunda) */
.dock-item .arac-notu{display:flex;align-items:flex-start;gap:7px;margin-top:6px;
  color:var(--b-700);background:var(--b-100);border-radius:9px;padding:7px 11px;font-size:14px;line-height:1.35}
.dock-item .arac-notu svg{width:15px;height:15px;flex:none;margin-top:1px;stroke:var(--b-600);stroke-width:2;fill:none}


/* POS kart ödeme ekranı */
.pos-grid{display:grid;grid-template-columns:420px 1fr;gap:16px;align-items:start}
.pos-tutar{font-family:'Archivo';font-size:26px;font-weight:700;height:60px;text-align:center;
  color:var(--g-700);letter-spacing:-.5px}
.pos-uyari{display:flex;gap:12px;align-items:flex-start;background:#fff8e6;border:1px solid #f5d98a;
  border-radius:12px;padding:14px 16px;margin-bottom:20px}
.pos-uyari svg{width:20px;height:20px;flex:none;margin-top:1px;stroke:#a67c00;stroke-width:2;fill:none}
.pos-uyari b{display:block;font-size:13.5px;color:#7a5c00;margin-bottom:3px}
.pos-uyari span{font-size:12.5px;color:#8a6d1f;line-height:1.45}
.btn-lg{height:52px;font-size:15.5px}
@media(max-width:920px){ .pos-grid{grid-template-columns:1fr} }


/* Fatura özeti kutusu */
.fatura-ozet{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px 16px;margin-bottom:4px}
.fo-satir{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px dashed var(--line);font-size:14px}
.fo-satir:last-child{border-bottom:none}
.fo-satir span{color:var(--muted)}
.fo-satir.tot{border-top:2px solid var(--ink);border-bottom:none;margin-top:4px;
  font-family:'Archivo';font-size:16px}
.fo-satir.tot b{color:var(--g-600)}


/* Fatura oluşturuluyor — tam ekran bekleme */
.bekleme{position:fixed;inset:0;z-index:100;background:rgba(16,40,25,.45);
  backdrop-filter:blur(2px);display:grid;place-items:center}
.bekleme-kutu{background:#fff;border-radius:18px;padding:34px 40px;max-width:420px;text-align:center;
  box-shadow:0 20px 60px rgba(16,40,25,.25);display:flex;flex-direction:column;align-items:center;gap:12px}
.bekleme-kutu b{font-family:'Archivo';font-size:17px;color:var(--ink)}
.bekleme-kutu span{font-size:13px;color:var(--muted);line-height:1.5}
.bekleme-halka{width:42px;height:42px;border:4px solid var(--g-100);border-top-color:var(--g-600);
  border-radius:50%;animation:donuyor .9s linear infinite;margin-bottom:4px}
@keyframes donuyor{to{transform:rotate(360deg)}}

/* Fatura görüntüleyici — sayfanın ortasında, büyük */
.fatura-cerceve{display:block;width:100%;max-width:900px;height:82vh;min-height:560px;
  margin:0 auto;border:1px solid var(--line);border-radius:14px;background:#fff;
  box-shadow:0 6px 24px rgba(16,40,25,.08)}
.fatura-bos{max-width:520px;margin:40px auto;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:34px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.fatura-bos svg{width:44px;height:44px;stroke:var(--faint);stroke-width:1.6;fill:none}
.fatura-bos b{font-family:'Archivo';font-size:16px}
.fatura-bos span{font-size:13.5px;color:var(--muted);line-height:1.55}
@media print{
  .topbar,.side,.crumb,.page-head{display:none !important}
  .app{display:block !important}
  .fatura-cerceve{height:auto;min-height:90vh;border:none;box-shadow:none}
  body{background:#fff}
}


/* Fatura PDF açılır penceresi — üstte başlık şeridi, altta belge */
.pdf-katman{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:28px}
.pdf-arka{position:absolute;inset:0;background:rgba(16,40,25,.5);backdrop-filter:blur(2px)}
.pdf-kutu{position:relative;display:flex;flex-direction:column;
  width:min(900px,94vw);height:min(86vh,900px);background:#fff;border-radius:16px;
  box-shadow:0 24px 70px rgba(16,40,25,.35);overflow:hidden}
.pdf-baslik{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.pdf-ad{font-family:'Archivo';font-weight:700;font-size:14px;color:var(--ink)}
.pdf-arac{display:flex;gap:8px;align-items:center}
.pdf-arac-btn{width:34px;height:34px;display:grid;place-items:center;padding:0;flex:none;
  border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;transition:.15s}
.pdf-arac-btn svg{width:17px;height:17px;stroke:var(--ink);stroke-width:2;fill:none}
.pdf-arac-btn:hover{background:var(--g-50);border-color:var(--g-400)}
.pdf-arac-btn:hover svg{stroke:var(--g-700)}
.pdf-kapat:hover{background:var(--red);border-color:var(--red)}
.pdf-kapat:hover svg{stroke:#fff}
.pdf-kutu iframe{flex:1;width:100%;min-height:0;border:none;display:block;background:#fff}
/* SMS penceresinde kilitli (düzenlenemez) hazır mesaj */
.modal-mesaj.kilitli-mesaj{background:var(--bg);color:var(--muted);cursor:default}

/* Hata sütunu — boşsa boş; mesaj kısaltılmış görünür, tamamı balonda */
.hata-hucre{max-width:200px}
.hata-im{display:inline-flex;align-items:center;gap:6px;max-width:100%;cursor:help}
.hata-im svg{width:16px;height:16px;flex:none;stroke:var(--red);stroke-width:2;fill:none}
.hata-metin{color:var(--red);font-size:12px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}


/* ---------- İPUCU BALONU (neden tıklanamıyor?) ----------
   Kullanım: herhangi bir elemana data-ipucu="mesaj" ekle.
   disabled butonlar fare olayı almadığı için JS onları .ipucu-sar ile sarar. */
[data-ipucu]{position:relative}
[data-ipucu]::after{
  content:attr(data-ipucu);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;line-height:1.45;
  padding:8px 12px;border-radius:9px;white-space:normal;width:max-content;max-width:260px;
  text-align:center;box-shadow:0 6px 20px rgba(16,40,25,.28);
  opacity:0;visibility:hidden;pointer-events:none;transition:.15s;z-index:200}
[data-ipucu]::before{
  content:"";position:absolute;bottom:calc(100% + 3px);left:50%;
  transform:translateX(-50%) translateY(4px);border:6px solid transparent;
  border-top-color:var(--ink);opacity:0;visibility:hidden;transition:.15s;z-index:200}
[data-ipucu]:hover::after,[data-ipucu]:hover::before{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ipucu-sar{display:inline-flex;position:relative}
.ipucu-sar > .btn{pointer-events:none}
[data-ipucu].ipucu-alt::after{bottom:auto;top:calc(100% + 9px)}
[data-ipucu].ipucu-alt::before{bottom:auto;top:calc(100% + 3px);
  border-top-color:transparent;border-bottom-color:var(--ink)}

/* ---------- İL / İLÇE / VERGİ DAİRESİ AKILLI SEÇİCİ ---------- */
.ts-secici{position:relative;display:block}
.ts-alan{width:100%;height:40px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-ctrl);
  background:var(--g-50);font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;
  text-align:left;transition:.12s}
.ts-alan:hover{border-color:var(--g-400);background:#fff}
.ts-etiket{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.ts-etiket.bos{color:var(--faint)}
.ts-ok{width:16px;height:16px;flex:none;stroke:var(--muted);stroke-width:2;fill:none}
.ts-panel{position:absolute;z-index:60;top:calc(100% + 5px);left:0;right:0;background:#fff;
  border:1px solid var(--line);border-radius:11px;box-shadow:0 10px 30px rgba(16,40,25,.14);
  overflow:hidden}
.ts-ara{padding:9px;border-bottom:1px solid var(--line-2)}
.ts-ara input{width:100%;height:36px;padding:0 11px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:13.5px;background:#fff}
.ts-ara input:focus{outline:none;border-color:var(--g-400);box-shadow:0 0 0 3px var(--g-100)}
.ts-liste{max-height:260px;overflow:auto;padding:5px}
.ts-secenek{display:block;width:100%;text-align:left;padding:9px 11px;border:none;
  background:transparent;font:inherit;font-size:13.5px;color:var(--ink);border-radius:7px;cursor:pointer}
.ts-secenek:hover{background:var(--g-50)}
.ts-secenek.secili{background:var(--g-100);font-weight:600;color:var(--g-700)}
.ts-secenek.ts-elle{color:var(--b-700);font-style:italic}
.ts-bos{padding:14px;text-align:center;color:var(--faint);font-size:13px}

/* ---------- KAYDI DÜZENLE EKRANI ---------- */
.duzenle-sar{max-width:760px;margin:0 auto}
.duzenle-sar .card-body{padding:24px 26px}
.duzenle-ayrac{display:flex;align-items:center;gap:12px;margin:26px 0 16px;
  font-family:'Archivo';font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--g-700)}
.duzenle-ayrac::after{content:"";flex:1;height:1px;background:var(--line-2)}
.duzenle-sar .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.duzenle-sar .form-grid + .form-grid{margin-top:16px}
.duzenle-sar .form-grid.tek{grid-template-columns:1fr}
.duzenle-sar .fld-col{gap:0}
.duzenle-sar .form-label{margin-bottom:6px}
.duzenle-sar .text-danger{margin-top:5px}
.duzenle-foot{max-width:760px;margin:18px auto 0;display:flex;gap:10px;justify-content:flex-end}
/* fatura ünvanı + kayıttan getir */
.unvan-satir{display:flex;gap:8px;align-items:center}
.unvan-satir input{flex:1;min-width:0}
.unvan-btn{flex:none;height:40px;padding:0 16px;white-space:nowrap;font-size:13px}
@media(max-width:640px){
  .duzenle-sar .form-grid{grid-template-columns:1fr}
  .duzenle-sar .card-body{padding:18px}
  .unvan-satir{flex-direction:column;align-items:stretch}
  .unvan-btn{width:100%}
}

/* ---------- İŞ EMRİ DETAY: küçük ögeler ---------- */
.kunye-musteri{margin-left:10px;background:#fff;border:1px solid var(--g-300);color:var(--g-700)}
.kunye-musteri:hover{background:var(--g-50);border-color:var(--g-500)}
.at-ic{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:17px;
  line-height:1;display:inline-block}
.saga-it{margin-left:auto}
.btn.kilitli{opacity:.45;cursor:not-allowed;pointer-events:auto}
.eksik-rozet{display:inline-flex;align-items:center;gap:7px;background:#fff8e6;
  border:1px solid #f5d98a;color:#8a6d1f;border-radius:20px;padding:5px 13px;
  font-size:12.5px;font-weight:600;white-space:nowrap}
.eksik-rozet svg{width:15px;height:15px;flex:none;stroke:#a67c00;stroke-width:2;fill:none}


/* ---------- 16. GİRİŞ ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 480px at 50% -12%, var(--g-100), transparent 70%),
    radial-gradient(700px 420px at 100% 110%, var(--b-100), transparent 65%),
    var(--bg)}
.auth-card{position:relative;overflow:hidden;width:100%;max-width:428px;background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:0 36px 30px;
  box-shadow:0 18px 50px rgba(16,40,25,.10)}
/* kartın üstünde kurumsal gradyan şerit (topbar diliyle aynı) */
.auth-serit{position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--g-800) 0,var(--g-600) 45%,var(--b-600) 100%)}
.auth-brand{display:flex;justify-content:center;padding:34px 0 6px}
.auth-logo{height:56px;width:auto;object-fit:contain;display:block}
.auth-baslik{text-align:center;margin-bottom:24px}
.auth-baslik h1{font-family:'Archivo';font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.auth-baslik p{margin-top:6px;font-size:13.5px;color:var(--muted)}
.auth-alan{margin-bottom:16px}
.auth-alan .form-label{display:block;margin-bottom:7px}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input > svg{position:absolute;left:13px;width:18px;height:18px;pointer-events:none;
  stroke:var(--muted);stroke-width:2;fill:none}
.auth-input input{width:100%;height:50px;padding:0 44px;border:1px solid var(--line);
  border-radius:12px;font:inherit;font-size:15px;background:var(--bg);transition:.15s}
.auth-input input:focus{outline:none;border-color:var(--g-400);background:#fff;
  box-shadow:0 0 0 4px var(--g-100)}
.auth-input input::placeholder{color:var(--faint)}
.auth-goz{position:absolute;right:8px;width:34px;height:34px;display:grid;place-items:center;
  border:none;background:transparent;border-radius:9px;cursor:pointer}
.auth-goz:hover{background:var(--g-50)}
.auth-goz svg{width:18px;height:18px;stroke:var(--muted);stroke-width:2;fill:none}
.auth-goz:hover svg{stroke:var(--g-600)}
.auth-card .btn-lg{height:50px;font-size:15.5px;border-radius:12px}
.auth-alt{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);
  text-align:center;font-size:12px;color:var(--faint)}
@media(max-width:480px){
  .auth-card{padding:0 22px 26px;border-radius:16px}
  .auth-logo{height:48px}
}

/* ---------- 17. YARDIMCILAR ---------- */
.muted{color:var(--muted)} .small{font-size:12px} .mt-2{margin-top:8px} .mt-3{margin-top:16px}
.mb-2{margin-bottom:8px} .mb-3{margin-bottom:16px} .fw-6{font-weight:600}
.flex{display:flex} .between{justify-content:space-between} .center{align-items:center}
.gap-2{gap:8px} .gap-3{gap:12px} .wrap{flex-wrap:wrap} .r{text-align:right}

/* ---------- 18. DUYARLI ---------- */
@media(max-width:920px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:var(--top-h);left:0;bottom:0;width:var(--side-w);z-index:45;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 12px 40px rgba(0,0,0,.35)}
  body.menu-acik .side{transform:translateX(0)}
  .hamburger{display:inline-flex}
  .detay-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .brand{width:auto}
  .search{max-width:none}
}

/* ===== Depo-Stok: Kit Stokları ===== */
.stok-ozet{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:14px 20px;margin-bottom:18px;flex-wrap:wrap}
.stok-ozet-k{display:flex;flex-direction:column;gap:1px;padding-right:16px;border-right:1px solid var(--line)}
.stok-ozet-k .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stok-ozet-k .v{font-family:'Archivo';font-size:20px;font-weight:800;color:var(--g-600)}
.stok-ozet-not{font-size:12.5px;color:var(--muted);margin-left:auto;max-width:420px;text-align:right}
.stok-marka{margin-bottom:22px}
.stok-marka-bas{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.stok-marka-bas h2{font-family:'Archivo';font-size:16px;font-weight:800;color:var(--ink);margin:0;
  padding:4px 12px;background:var(--g-50);border-left:3px solid var(--g-600);border-radius:4px}
.marka-stok{margin-left:10px;padding-left:10px;border-left:1px solid var(--g-400);font-size:13px;
  font-weight:600;color:var(--g-600)}
.not-input{width:100%;border:1px solid transparent;border-radius:7px;padding:6px 9px;font:inherit;
  font-size:13px;color:var(--ink);background:transparent;transition:.12s}
.not-input:hover{border-color:var(--line);background:#fff}
.not-input:focus{outline:none;border-color:var(--g-400);background:#fff;box-shadow:0 0 0 3px var(--g-100)}
.not-input::placeholder{color:var(--faint)}
.stok-marka-sag{display:flex;gap:8px;align-items:center}
.mini-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;font-weight:600;
  padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;transition:.12s}
.mini-btn svg{width:14px;height:14px;stroke:var(--g-600);stroke-width:2;fill:none}
.mini-btn:hover{border-color:var(--g-400);background:var(--g-50)}
.mini-btn.danger svg{stroke:#c0392b}
.mini-btn.danger:hover{border-color:#e74c3c;background:#fdecea}
.inline-form{display:inline}
.stok-tablo th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.stok-tablo th.c,.stok-tablo td.c{text-align:center}
.stok-kit-ad{font-weight:600;color:var(--ink)}
.fiyat-goster{cursor:pointer;padding:3px 8px;border-radius:6px;transition:background .12s;color:var(--ink);font-variant-numeric:tabular-nums}
.fiyat-goster:hover{background:var(--b-100)}
.stok-kontrol{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.stok-btn{width:36px;height:34px;border:none;background:#fff;font-size:20px;font-weight:600;cursor:pointer;
  color:var(--ink);line-height:1;transition:.1s}
.stok-btn.eksi{border-right:1px solid var(--line);color:#c0392b}
.stok-btn.arti{border-left:1px solid var(--line);color:var(--g-600)}
.stok-btn:hover{background:var(--g-50)}
.stok-btn.eksi:hover{background:#fdecea}
.stok-btn.arti:hover{background:var(--g-50)}
.stok-input{width:64px;height:34px;border:none;text-align:center;font:inherit;font-size:15px;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;background:#fff;-moz-appearance:textfield}
.stok-input:focus{outline:none;background:var(--g-50)}
.stok-input.flash{background:var(--g-100);transition:background .1s}
.danger-hover:hover svg{stroke:#e74c3c}
.stok-ekle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bos-durum{text-align:center;color:var(--muted);padding:40px;background:var(--card);border:1px dashed var(--line);border-radius:var(--r-card)}

/* Kit stok: düzenleme modu + değişti işareti */
.stok-tablo tr.degisti{background:#fffbeb}
.stok-tablo tr.degisti td{border-top:1px solid #fde68a;border-bottom:1px solid #fde68a}
.stok-tablo tr.duzenleniyor{background:var(--b-100)}
.kit-ad-input,.fiyat-input{width:100%;border:1px solid var(--g-400);border-radius:7px;padding:6px 9px;
  font:inherit;font-size:14px;color:var(--ink);background:#fff}
.fiyat-input{text-align:right;max-width:110px}
.kit-ad-input:focus,.fiyat-input:focus{outline:none;box-shadow:0 0 0 3px var(--g-100)}
.duzenle-btn svg,.duzenle-bitir svg{stroke:var(--b-600)}
.duzenle-bitir svg{stroke:var(--g-600)}

/* Depo giriş-çıkış: kullanıldı/kullanılmadı rozeti */
.durum-rozet{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;white-space:nowrap}
.durum-rozet.kullanildi{background:var(--g-100);color:var(--g-700)}
.durum-rozet.kullanilmadi{background:#fdecea;color:#c0392b}

/* Depo çıkış not kutusu + kaydedildi tik göstergesi */
.not-wrap{display:flex;align-items:center;gap:6px;height:32px}
.not-wrap .not-input{flex:1;min-width:0}
.not-kaydet{flex:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);cursor:pointer;transition:.15s}
.not-kaydet svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.not-kaydet:hover{border-color:var(--g-400);color:var(--g-600)}
.not-kaydet.kaydedildi{background:var(--g-600);border-color:var(--g-600);color:#fff}

/* ==========================================================================
   YETKİ YÖNETİMİ  (kullanici_form.html / kullanici_liste.html)
   Bu blok candan.css'in SONUNA eklenir — mevcut kurallar değiştirilmez.
   ========================================================================== */

.yetki-blok{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--cizgi,#e3e8ef);
}
.yetki-baslik{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.yetki-baslik h2{ font-size:16px; font-weight:700; margin:0; }
.yetki-alt{ font-size:12.5px; color:var(--soluk,#6b7684); margin-top:3px; }
.yetki-arac{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.yetki-arac .btn-sm{ padding:5px 11px; font-size:12.5px; }
.yetki-sayac{
  font-size:12px; font-weight:600; color:var(--vurgu,#0f6f4f);
  background:rgba(15,111,79,.09); border-radius:999px; padding:4px 11px; white-space:nowrap;
}

/* --- Süper admin kutusu --- */
.super-kutu{
  border:1px solid var(--cizgi,#e3e8ef); border-radius:10px;
  padding:12px 14px; margin-bottom:16px; background:#fbfcfd; transition:.15s;
}
.super-kutu.acik{ border-color:#c9a227; background:#fffbe9; }
.super-check{ display:flex; align-items:flex-start; gap:10px; margin:0; cursor:pointer; }
.super-check input{ margin-top:2px; flex:none; }
.super-check strong{ display:block; font-size:13.5px; }
.super-not{ display:block; font-size:12px; color:var(--soluk,#6b7684); margin-top:2px; }

/* --- Yetki ızgarası --- */
.yetki-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:12px;
}
.yetki-grid.pasif{ opacity:.45; pointer-events:none; }

.yetki-grup{
  border:1px solid var(--cizgi,#e3e8ef); border-radius:10px;
  padding:11px 13px 9px; background:#fff;
}
.yg-bas{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:7px; padding-bottom:6px;
  border-bottom:1px solid var(--cizgi,#eef1f5);
}
.yg-ad{ font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--soluk,#6b7684); }
.yg-tumu{
  border:0; background:none; cursor:pointer; padding:2px 4px;
  font-size:11.5px; color:var(--vurgu,#0f6f4f); font-weight:600;
}
.yg-tumu:hover{ text-decoration:underline; }

.yetki-satir{
  display:flex; align-items:flex-start; gap:9px;
  padding:5px 4px; border-radius:6px; cursor:pointer;
  font-size:13px; line-height:1.35; margin:0;
}
.yetki-satir:hover{ background:#f5f8fa; }
.yetki-satir input{ margin-top:2px; flex:none; width:15px; height:15px; cursor:pointer; }
.yetki-satir input:disabled{ cursor:not-allowed; }

/* --- Liste ekranı rozetleri --- */
.tag.super{ background:#fff4d1; color:#7a5c00; border-color:#e8cf85; }
.pill.tam{ background:#fff4d1; color:#7a5c00; }
.pill.sayi{ background:#e8f2ee; color:#0f6f4f; font-weight:700; }
.pill.yok{ background:#f2f4f7; color:#8a929c; }

@media (max-width:720px){
  .yetki-grid{ grid-template-columns:1fr; }
  .yetki-baslik{ align-items:flex-start; flex-direction:column; }
}

/* ==========================================================================
   MOTOR MEKANİK kategorisi — mali rapor istatistik kartı rengi
   Bu blok candan.css'in SONUNA eklenir — mevcut kurallar değiştirilmez.
   ========================================================================== */
:root{ --violet:#7c4dff; --violet-100:#ede7ff; }
.stat.violet .badge-ic{ background:var(--violet-100); }
.stat.violet .badge-ic svg{ stroke:var(--violet); }

/* ==========================================================================
   MALİ RAPOR — istatistik kartı düzeni (ikon/metin çakışması düzeltmesi)
   Bu blok candan.css'in SONUNA eklenir; mevcut .stat kuralları ezilir.
   ========================================================================== */
.stat{ padding-right:60px; }                 /* ikon için sağda sabit alan */
.stat .k{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 0;
  margin-bottom:9px; min-height:16px;
}
.stat .k-adet{                               /* "6 ADET" — uzun başlıkta alt satıra */
  margin-left:8px; padding-left:8px;
  border-left:1px solid var(--line);
  font-size:11px; letter-spacing:.02em; white-space:nowrap;
}
.stat .badge-ic{ top:14px; right:16px; }     /* padding-right ile hizalı */

/* ==========================================================================
   MALİ RAPOR — özet kartları (iki katmanlı, ortalı, eşit kutular)
   Bu blok candan.css'in SONUNA eklenir; eski .stats düzenini kullanmaz.
   ========================================================================== */
.mr-ozet{ margin-bottom:18px; }

/* Üst satır: Genel Toplam + İş Emri Adedi — ortalı, büyük */
.mr-ust{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px; margin-bottom:14px;
}
/* Alt satır: 4 ciro — eşit kutular yan yana */
.mr-alt{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}

.mr-kart{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:16px 14px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-top:3px solid var(--line);      /* renk şeridi — accent aşağıda */
}
.mr-kart .k{
  font-size:12.5px; color:var(--muted); font-weight:600; margin:0;
  letter-spacing:.01em;
}
.mr-kart .v{
  font-family:'Archivo'; font-weight:700; letter-spacing:-.02em; line-height:1;
  font-size:24px;
}
.mr-kart .v small{ font-size:13px; color:var(--muted); font-weight:500; }
.mr-kart .adet{
  font-size:11.5px; color:var(--muted); font-weight:500;
  text-transform:uppercase; letter-spacing:.03em;
}

/* Üst satır kartları biraz daha büyük */
.mr-kart.buyuk{ padding:20px 16px; }
.mr-kart.buyuk .v{ font-size:30px; }

/* Renk şeritleri */
.mr-kart.green{  border-top-color:var(--g-600); }
.mr-kart.blue{   border-top-color:var(--b-600); }
.mr-kart.amber{  border-top-color:var(--amber); }
.mr-kart.slate{  border-top-color:var(--slate); }
.mr-kart.teal{   border-top-color:var(--teal); }
.mr-kart.violet{ border-top-color:var(--violet); }

/* Dar ekran: alt satır 2'şerli, üst satır alt alta */
@media (max-width:820px){
  .mr-alt{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .mr-ust{ grid-template-columns:1fr; }
  .mr-alt{ grid-template-columns:1fr; }
}

/* ==========================================================================
   MALİ RAPOR — kart ikonları (ortalı renkli rozet, başlığın üstünde)
   Bu blok candan.css'in SONUNA eklenir.
   ========================================================================== */
.mr-ic{
  width:40px; height:40px; border-radius:11px;
  display:grid; place-items:center; margin-bottom:2px;
}
.mr-ic svg{ width:20px; height:20px; stroke-width:2; fill:none; }
.mr-kart.buyuk .mr-ic{ width:46px; height:46px; border-radius:13px; }
.mr-kart.buyuk .mr-ic svg{ width:23px; height:23px; }
.mr-kart.buyuk .mr-ic .tl-ic{ font-size:22px; }
.mr-ic .tl-ic{ font-size:19px; }

/* Renkler — rozet zemini + ikon rengi karta göre */
.mr-kart.green  .mr-ic{ background:var(--g-100); }     .mr-kart.green  .mr-ic svg, .mr-kart.green  .mr-ic .tl-ic{ stroke:var(--g-600);  color:var(--g-600); }
.mr-kart.blue   .mr-ic{ background:var(--b-100); }     .mr-kart.blue   .mr-ic svg{ stroke:var(--b-600); }
.mr-kart.amber  .mr-ic{ background:var(--amber-100); } .mr-kart.amber  .mr-ic svg{ stroke:var(--amber); }
.mr-kart.slate  .mr-ic{ background:var(--slate-100); } .mr-kart.slate  .mr-ic svg{ stroke:var(--slate); }
.mr-kart.teal   .mr-ic{ background:var(--teal-100); }  .mr-kart.teal   .mr-ic svg{ stroke:var(--teal); }
.mr-kart.violet .mr-ic{ background:var(--violet-100); }.mr-kart.violet .mr-ic svg{ stroke:var(--violet); }

/* ==========================================================================
   PROJELER — Araç Dönüşüm Projesi ekranları
   Bu blok candan.css'in SONUNA eklenir. Blok değiştirme YAPILMAZ; sonraki
   kural öncekini ezer. (Daha önce aralık bazlı kes-değiştir yüzünden CSS
   kaybı yaşandı — bir daha yapmıyoruz.)
   ========================================================================== */

/* --- Tip onay kartları --- */
.pr-kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:20px}
.pr-kart{display:flex;flex-direction:column;gap:0;border-left:4px solid var(--line)}
.pr-kart.hazir{border-left-color:var(--g-600)}
.pr-kart.eksik{border-left-color:#f59e0b}
.pr-kart.yok{border-left-color:#cbd5e1}
.pr-kart-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pr-kart-bas h3{margin:0;font-size:16px;font-weight:700}
.pr-kart-govde{padding:12px 16px;display:flex;flex-direction:column;gap:7px}
.pr-satir{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.pr-satir span{color:var(--muted)}
.pr-satir b{font-weight:600}
.pr-eksik{margin:0;padding:8px 16px 12px 32px;list-style:disc}
.pr-eksik li{font-size:12px;color:#b45309;line-height:1.7}
.pr-kart-alt{margin-top:auto;padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.pr-komut{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--muted);word-break:break-all;line-height:1.5}

/* --- Rozetler --- */
.pill-ok{background:#e8f5e9;color:#1b5e20;border:1px solid #a5d6a7}
.pill-uyari{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.pill-yok{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.pill-kirmizi{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* --- Bilgi kutusu --- */
.pr-bilgi h3{margin:0 0 8px;font-size:15px}
.pr-bilgi{padding:16px 18px}
.pr-bilgi p{margin:0 0 10px;font-size:13px;line-height:1.65;color:var(--ink)}
.pr-bilgi pre{background:#0f172a;color:#e2e8f0;padding:12px 14px;border-radius:8px;font-size:12px;overflow-x:auto;margin:0 0 10px;line-height:1.6}
.pr-ipucu{font-size:12.5px;color:var(--muted);line-height:1.65}
.pr-ipucu code{background:#f1f5f9;padding:1px 5px;border-radius:4px;font-size:11.5px}

/* --- Liste --- */
.pr-alt-metin{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.pr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.pr-pay{display:block;font-size:11px;color:var(--muted);margin-top:2px}

/* --- Kütle hesabı kartı --- */
.pr-hesap{margin-bottom:18px;border-left:4px solid var(--line)}
.pr-hesap.uygun{border-left-color:var(--g-600)}
.pr-hesap.uygunsuz{border-left-color:#dc2626}
.pr-hesap.belirsiz{border-left-color:#cbd5e1}
.pr-hesap-tablo{width:100%;max-width:460px;border-collapse:collapse;margin-bottom:12px}
.pr-hesap-tablo td{padding:6px 0;font-size:13px;border-bottom:1px solid var(--line)}
.pr-hesap-tablo td.r{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pr-hesap-tablo tr.pr-toplam td{border-top:2px solid var(--line);border-bottom:none;font-weight:700}
.pr-hesap-tablo tr.pr-sonuc td{border-top:2px solid var(--line);border-bottom:none;font-weight:700;font-size:14px}
.pr-hesap.uygun .pr-sonuc td{color:#1b5e20}
.pr-hesap.uygunsuz .pr-sonuc td{color:#991b1b}
.pr-yeni-kutle{padding:10px 12px;background:#f8fafc;border-radius:8px;font-size:13px;margin-bottom:10px}
.pr-yeni-kutle b{font-size:15px;margin:0 4px}
.pr-yeni-kutle small{color:var(--muted)}

/* --- Detay tabloları --- */
.pr-iki-sutun{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:18px}
.pr-veri{width:100%;border-collapse:collapse}
.pr-veri td{padding:6px 0;font-size:13px;border-bottom:1px solid var(--line);vertical-align:top}
.pr-veri td:first-child{color:var(--muted);width:45%}
.pr-veri tr:last-child td{border-bottom:none}
.pr-etiket-guven{font-size:10.5px;color:var(--muted);background:#f1f5f9;padding:2px 7px;border-radius:20px;font-weight:500}
.pr-etiket-teyit{font-size:10.5px;color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;padding:2px 7px;border-radius:20px;font-weight:500;white-space:nowrap}
.pr-varyant{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.pr-varyant span{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.pr-varyant p{margin:0;font-size:11.5px;line-height:1.7;color:var(--ink);word-break:break-word}

/* --- Form yardımcıları --- */
.pr-dosya{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;font-size:12.5px}
.pr-dosya svg{width:16px;height:16px;flex:0 0 16px;stroke:var(--muted);fill:none;stroke-width:1.8}
.pr-dosya span{flex:1;word-break:break-all}
.pr-dosya b{color:var(--g-600);white-space:nowrap}
.pr-ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.onay-kutu{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;margin-top:6px}
.onay-kutu input{width:17px;height:17px;flex:0 0 17px;margin:0}

@media(max-width:900px){
  .pr-iki-sutun,.pr-ikili{grid-template-columns:1fr}
}

/* --- Paket 2: proje formu --- */
.pr-form .card{margin-bottom:16px}
.pr-uclu{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pr-yildiz{color:#dc2626}
.pr-secili{display:block;margin-top:6px;color:var(--g-600);font-weight:600;font-size:12px}
.pr-teyit-blok{padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:#fcfcfd}
.pr-teyit-blok .onay-kutu{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.pr-hibrit .pr-radyo{display:flex;gap:20px;margin:4px 0 6px}
.pr-radyo label{display:flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
.pr-radyo input{width:17px;height:17px;margin:0}
.pr-ay-yil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2)}
.pr-satir-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pr-satir-form input,.pr-satir-form select{flex:1;min-width:110px}
.pr-pasif{opacity:.45}
#aracTipi{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
@media(max-width:900px){ .pr-uclu{grid-template-columns:1fr} }

/* --- Tank konumu ayrımı --- */
.pr-kat{display:inline-block;background:#eef2f7;color:#475569;border-radius:20px;padding:1px 7px;font-size:10.5px;font-weight:600;margin-left:5px}
.pr-rozet-alttan{display:inline-block;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:20px;padding:1px 7px;font-size:10.5px;font-weight:700;margin-left:4px}
.pr-alttan{margin-top:8px;padding:9px 12px;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;color:#9a3412;font-size:12.5px;font-weight:600}

.pr-oneri{margin-top:8px;padding:9px 12px;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:8px;color:#1b5e20;font-size:12.5px}

/* Fatura kesme — faturada gösterilecek düzenlenebilir tutar alanı */
input.fatura-tutar{width:120px;text-align:right;padding:6px 8px;border:1px solid var(--cizgi,#d5dbe3);
  border-radius:8px;font:inherit;font-variant-numeric:tabular-nums;background:#fff}
input.fatura-tutar:focus{outline:none;border-color:var(--mavi,#42A5F5);box-shadow:0 0 0 3px rgba(66,165,245,.15)}

/* Fatura listesi — LPG montaj faturası etiketi (yeşil vurgu) */
.tag.tag-lpg{background:rgba(46,125,50,.12);color:#2E7D32;border:1px solid rgba(46,125,50,.3);
  font-weight:600;white-space:nowrap}

/* Proje kaydı sonrası ekran üstü pencere (oluşturuldu / eksik uyarı) */
.pr-onay-katman{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.pr-onay-arka{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.pr-onay-kutu{position:relative;background:#fff;border-radius:16px;max-width:440px;width:100%;
  padding:28px 26px;box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center;animation:prOnayGir .18s ease}
@keyframes prOnayGir{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.pr-onay-ikon{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  background:rgba(46,125,50,.12);display:flex;align-items:center;justify-content:center}
.pr-onay-ikon svg{width:30px;height:30px;fill:none;stroke:#2E7D32;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.pr-onay-ikon.uyari{background:rgba(217,119,6,.12)}
.pr-onay-ikon.uyari svg{stroke:#D97706}
.pr-onay-kutu h3{margin:0 0 8px;font-size:19px;color:#1f2937}
.pr-onay-kutu p{margin:0 0 16px;color:#4b5563}
.pr-onay-btnler{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pr-uyari{text-align:left}
.pr-uyari h3,.pr-uyari p{text-align:center}
.pr-uyari-liste{margin:0 0 18px;padding:0 0 0 4px;list-style:none;
  max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.pr-uyari-liste li{background:#fef3c7;border:1px solid #fde68a;color:#92400e;
  border-radius:8px;padding:9px 12px;font-size:14px}

/* Fatura içeriği — servis faturası etiketi (mavi vurgu, montaj yeşilden ayrı) */
.tag.tag-servis{background:rgba(66,165,245,.12);color:#1565C0;border:1px solid rgba(66,165,245,.35);
  font-weight:600;white-space:nowrap}

/* Proje detay — Projelendirme Uygunluğu + araç/lpg/belge/teyitler TEK SATIR, eşit boyut */
.pr-kartlar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px;align-items:stretch}
.pr-kartlar>.card{margin-bottom:0;height:100%;display:flex;flex-direction:column}
.pr-kartlar .pr-hesap{margin-bottom:0}
.pr-kartlar .pr-hesap-tablo{max-width:none}
.pr-kartlar .card-head{flex-wrap:wrap;gap:6px}
.pr-kartlar .card-head h3{font-size:14px}
.pr-kartlar .pr-hesap-tablo td{padding:5px 0;font-size:12.5px}
@media (max-width:1400px){.pr-kartlar{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}

/* Evrak üretim penceresi — aşamalı ilerleme, üretilince görüntüleyicide açılır */
.ev-uret-katman{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px}
.ev-uret-arka{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.ev-uret-kutu{position:relative;background:#fff;border-radius:16px;max-width:420px;width:100%;
  padding:26px 28px;box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center;animation:prOnayGir .18s ease}
.ev-uret-halka{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;
  border:4px solid var(--line,#e2e8f0);border-top-color:var(--mavi,#42A5F5);animation:evDon .8s linear infinite}
@keyframes evDon{to{transform:rotate(360deg)}}
.ev-uret-kutu h3{margin:0 0 16px;font-size:18px;color:#1f2937}
.ev-asama{list-style:none;margin:0 0 4px;padding:0;text-align:left;display:flex;flex-direction:column;gap:9px}
.ev-asama li{position:relative;padding:0 0 0 28px;font-size:13.5px;color:#94a3b8;transition:color .2s}
.ev-asama li::before{content:'';position:absolute;left:4px;top:3px;width:14px;height:14px;border-radius:50%;
  border:2px solid #cbd5e1;box-sizing:border-box}
.ev-asama li.aktif{color:#1f2937;font-weight:600}
.ev-asama li.aktif::before{border-color:var(--mavi,#42A5F5);border-top-color:transparent;animation:evDon .7s linear infinite}
.ev-asama li.tamam{color:#334155}
.ev-asama li.tamam::before{border-color:var(--g-600,#2E7D32);background:var(--g-600,#2E7D32)}
.ev-asama li.tamam::after{content:'';position:absolute;left:9px;top:5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ev-uret-hata{margin:14px 0 0;padding:10px 12px;background:#fef2f2;border:1px solid #fecaca;
  border-radius:8px;color:#991b1b;font-size:13px;text-align:left;white-space:pre-line}
#evUretKapat{margin-top:16px}

/* Hamburger menü düğmesi + overlay — sadece dar ekranda görünür */
.hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;
  flex:0 0 auto;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--g-700);cursor:pointer;padding:0}
.hamburger:hover{background:var(--bg)}
.hamburger svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none}
.menu-overlay{position:fixed;inset:var(--top-h) 0 0 0;background:rgba(0,0,0,.42);
  z-index:44;opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none}
body.menu-acik .menu-overlay{opacity:1;visibility:visible;pointer-events:auto}

/* Hamburger ≤920px'de görünür — bu kural temel .hamburger{display:none}
   kuralından SONRA geldiği için media query'de kazanır (kaynak sırası). */
@media(max-width:920px){
  .hamburger{display:inline-flex}
}

/* ============================================================
   RESPONSIVE SAĞLAMLAŞTIRMA — pencere her boyutta düzgün dizilsin,
   veriler/butonlar/kartlar kaymasın veya kırpılmasın.
   ============================================================ */

/* Grid/flex çocukları daralınca içeriğe takılıp taşmasın, küçülebilsin */
.main{min-width:0}

/* Form altı buton satırı sığmayınca alt satıra sarsın, taşmasın */
.form-foot{flex-wrap:wrap}

/* Sayfa başlığı aksiyonları zaten sarıyor; kart üstü aksiyonlar da sarsın */
.card-head{flex-wrap:wrap;gap:8px}

/* Geniş tablolar dar/orta ekranda kırpılmak yerine kendi kartında
   YATAY KAYSIN (.main overflow-x:hidden olduğu için tabloyu kartında kaydırıyoruz).
   min-width ile okunaklılık altına squish olmaz, kaydırma çubuğu çıkar. */
@media(max-width:1200px){
  .card:has(> table),
  .card-body:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card:has(> table) > table,
  .card-body:has(> table) > table{min-width:760px}
}

/* Çok dar ekranda (telefon) tüm ikili/üçlü giriş ve kart satırları tek sütun */
@media(max-width:600px){
  .detay-grid,.form-grid,.pr-ikili,.pr-uclu,.stok-ekle-grid{grid-template-columns:1fr}
  .form-foot .btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   EL TERMİNALİ (iPad) — büyük dokunmatik hedefler
   ============================================================ */
.el-top{display:flex;align-items:center;justify-content:space-between}
.el-cikis{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--g-700)}
.el-cikis svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none}
.el-alt{text-align:center;color:var(--muted);font-size:16px;margin:-6px 0 18px}
.el-item .info{font-size:20px}
.el-arac-bilgi{background:var(--g-600);color:#fff;border-radius:16px;padding:18px 22px;margin-bottom:18px}
.el-plaka{font-family:'Archivo';font-weight:800;font-size:30px;letter-spacing:.5px}
.el-sahip{font-size:16px;opacity:.92;margin-top:2px}
.el-h2{font-size:20px;font-weight:700;color:#1f2937;margin:6px 0 12px}
.el-kisayol{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.el-chip{font-size:16px;font-weight:600;padding:12px 18px;border-radius:999px;
  border:1.5px solid var(--g-300);background:var(--g-50);color:var(--g-700);cursor:pointer}
.el-chip:active{background:var(--g-100)}
.el-gorev-form{display:flex;gap:10px;margin-bottom:18px}
.el-gorev-form input{flex:1;min-width:0;font-size:18px;padding:16px 18px;border:1.5px solid var(--line);
  border-radius:14px;background:var(--card)}
.el-gorev-form .dock-opt{flex:0 0 auto;font-size:18px}
.el-gorev-liste{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.el-gorev-satir{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.el-gorev-no{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--g-100);
  color:var(--g-700);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px}
.el-gorev-metin{flex:1;min-width:0;font-size:19px;font-weight:600;color:#1f2937}
.el-sil{flex:0 0 auto;width:40px;height:40px;border-radius:10px;border:1px solid #fecaca;
  background:#fef2f2;color:#c0392b;cursor:pointer;display:flex;align-items:center;justify-content:center}
.el-sil svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.5;fill:none}
.el-buyuk-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  font-family:'Archivo';font-size:22px;font-weight:700;color:#fff;background:var(--g-600);
  border:none;border-radius:16px;padding:20px;cursor:pointer;text-decoration:none}
.el-buyuk-btn:active{background:var(--g-700)}
.el-buyuk-btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.5;fill:none}
.el-bos{text-align:center;color:var(--muted);font-size:16px;padding:28px 0}
.el-ok{text-align:center;max-width:560px;margin:0 auto}
.el-ok-ikon{width:88px;height:88px;border-radius:50%;background:var(--g-100);margin:10px auto 16px;
  display:flex;align-items:center;justify-content:center}
.el-ok-ikon svg{width:46px;height:46px;stroke:var(--g-600);stroke-width:3;fill:none}
.el-ok-alt{font-size:17px;color:#374151;margin-bottom:20px}
.el-ok-liste{text-align:left;margin-bottom:24px}
.el-yeni{background:var(--g-700)}
@media(max-width:520px){ .el-gorev-form{flex-direction:column} .el-gorev-form .dock-opt{width:100%} }

/* El Terminali giriş — Görev Ekle birincil (yeşil), Geçmiş yanında */
.el-item{gap:10px;flex-wrap:wrap}
.el-gorev-git{background:var(--g-600);color:#fff;border-color:var(--g-600)}
.el-gorev-git:active{background:var(--g-700)}

/* ---- El Terminali: açık iş emri panosu (ana sayfa) ---- */
.el-pano-bas{margin-top:26px}
.el-pano{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.el-ada{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--g-600);
  border-radius:14px;padding:14px 16px}
.el-ada-ust{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.el-ada-plaka{font-family:'Archivo';font-weight:800;font-size:20px;color:#1f2937}
.el-ada-sahip{font-size:14px;color:var(--muted);text-align:right}
.el-ada-arac{font-size:13px;color:var(--muted);margin-top:2px}
.el-ada-gorevler{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.el-ada-gorev{display:flex;align-items:center;gap:8px;font-size:15px;color:#374151}
.el-ada-tik{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:800;background:var(--g-100);color:var(--g-700)}
.el-ada-gorev.tamam{color:#9aa4b2}
.el-ada-gorev.tamam .el-ada-tik{background:var(--g-600);color:#fff}
.el-ada-gorev.tamam .el-ada-metin{text-decoration:line-through}

/* ---- El Terminali: fiyat filtre ---- */
.el-fiyat-filtre{display:grid;grid-template-columns:220px 1fr;gap:12px;margin-bottom:18px}
.el-fiyat-filtre select,.el-fiyat-filtre input{height:56px;font-size:17px;border-radius:14px;
  border:1.5px solid var(--line);padding:0 16px;background:var(--card)}
@media(max-width:560px){ .el-fiyat-filtre{grid-template-columns:1fr} }

/* ---- El Terminali: araç ekle formu + akordeon ---- */
.el-form{max-width:820px;margin:0 auto}
.el-bolum{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden}
.el-bolum-bas{font-family:'Archivo';font-weight:700;font-size:18px;color:#1f2937;padding:16px 18px;
  background:var(--bg);border-bottom:1px solid var(--line)}
.el-bolum-bas.sabit{background:var(--g-600);color:#fff;border-bottom:none}
.el-acordeon summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.el-acordeon summary::-webkit-details-marker{display:none}
.el-acordeon summary::after{content:'';width:12px;height:12px;border-right:2.5px solid var(--muted);
  border-bottom:2.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.el-acordeon[open] summary::after{transform:rotate(-135deg)}
.el-opsiyonel{font-family:'IBM Plex Sans';font-weight:500;font-size:13px;color:var(--muted);margin-left:8px}
.el-bolum-ic{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.el-fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.el-fld.full{grid-column:1/-1}
.el-fld label{font-size:13px;font-weight:600;color:#4b5563}
.el-fld input,.el-fld select{height:52px;font-size:17px;border:1.5px solid var(--line);border-radius:12px;
  padding:0 14px;background:var(--card);width:100%}
.el-form-foot{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:6px}
.el-vazgec{color:var(--muted);font-size:16px;padding:10px;text-decoration:none}
@media(max-width:560px){ .el-bolum-ic{grid-template-columns:1fr} }

/* El Terminali — üst buton grubu, ada detay, bulunamadı */
.el-ust-butonlar{display:flex;gap:10px}
.dock-bulunamadi{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px}
.el-geri-satir{margin-bottom:14px}
.el-bilgi-tablo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:20px}
.el-bilgi-tablo>div{background:var(--card);padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.el-bilgi-tablo>div span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.el-bilgi-tablo>div b{font-size:16px;color:#1f2937;font-weight:600}
@media(max-width:560px){ .el-bilgi-tablo{grid-template-columns:1fr} }

/* Ada durum rozeti (İşlem Devam Ediyor / Teslime Hazır) */
.ada-durum{display:block;text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:6px 10px;border-radius:9px;margin:-2px -2px 10px}
.ada-durum.devam{background:#fef3c7;color:#92600a}
.ada-durum.hazir{background:#dcfce7;color:#166534}
.el-ada.hazir{border-left-color:#16a34a}
/* Masaüstü ada panosu */
.takip-bas{font-family:'Archivo';font-weight:700;font-size:17px;color:#374151;margin:22px 0 12px}
.takip-bas:first-of-type{margin-top:6px}
.takip-pano{margin-bottom:8px}

/* ---- Kiosk: açık ada panosu başlığı + devam ekranı ---- */
.kiosk-pano-bas{font-family:'Archivo';font-weight:700;font-size:18px;color:#374151;margin:26px 0 12px}
.ada-devam-bilgi{text-align:center;margin-bottom:16px}
.ada-form{max-width:820px;margin:0 auto}
.ada-h{font-family:'Archivo';font-weight:700;font-size:17px;color:#1f2937;margin:0 0 12px;
  display:flex;align-items:center;justify-content:space-between}
.ada-toplam{font-size:18px;font-weight:800;color:var(--g-600)}
.kiosk-kart{margin-bottom:16px}
.ada-gorev-tik{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);margin-bottom:8px;background:var(--card)}
.ada-gorev-tik input{position:absolute;opacity:0;width:0;height:0}
.ada-kutu{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:2px solid var(--g-300);
  display:flex;align-items:center;justify-content:center;transition:all .15s}
.ada-gorev-tik input:checked+.ada-kutu{background:var(--g-600);border-color:var(--g-600)}
.ada-gorev-tik input:checked+.ada-kutu::after{content:'';width:10px;height:16px;border:solid #fff;
  border-width:0 3px 3px 0;transform:rotate(45deg);margin-top:-3px}
.ada-gorev-metin{font-size:19px;font-weight:600;color:#1f2937}
.ada-gorev-tik input:checked~.ada-gorev-metin{color:#9aa4b2;text-decoration:line-through}
.ada-km{width:100%;height:64px;font-size:24px;font-weight:700;text-align:center;border:1.5px solid var(--line);
  border-radius:14px;background:var(--card)}
.ada-kalem-tablo{width:100%;margin-bottom:12px}
.ada-kalem-tablo td{padding:8px 6px;border-bottom:1px solid var(--line-2);font-size:16px}
.ada-kalem-ekle{display:grid;grid-template-columns:1fr 1.4fr 120px auto;gap:10px;align-items:center;
  border-top:1px solid var(--line);padding-top:14px}
.ada-kalem-ekle select,.ada-kalem-ekle input{height:54px;font-size:16px;border:1.5px solid var(--line);
  border-radius:12px;padding:0 12px;background:var(--card);min-width:0}
.ada-butonlar{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin-top:8px}
.ada-btn{display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Archivo';
  font-size:20px;font-weight:700;border:none;border-radius:16px;padding:20px;cursor:pointer}
.ada-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none}
.ada-kaydet{background:var(--bg);color:var(--g-700);border:1.5px solid var(--g-300)}
.ada-sonlandir{background:var(--g-600);color:#fff}
.ada-sonlandir:active{background:var(--g-700)}
@media(max-width:820px){
  .ada-kalem-ekle{grid-template-columns:1fr 1fr}
  .ada-butonlar{grid-template-columns:1fr}
}

/* Geri butonları her zaman SOLDA (order + auto margin ile) */
.dock-opts .geri{order:-1;margin-right:auto}

/* Pasif (devre dışı) geri butonu */
.dock-opt.pasif{opacity:.4;pointer-events:none;cursor:default}
/* Kiosk hizmet — seçilen kalemler paneli */
.secili-panel{background:var(--g-50);border:1px solid var(--g-200);border-radius:14px;
  padding:12px 16px;margin-bottom:18px;max-width:760px;margin-left:auto;margin-right:auto}
.secili-bas{font-family:'Archivo';font-weight:700;font-size:14px;color:var(--g-700);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.secili-satir{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:8px 0;border-top:1px solid var(--g-200);font-size:16px}
.secili-satir:first-of-type{border-top:none}
.secili-ad{font-weight:600;color:#1f2937}
.secili-usta{font-size:13px;color:var(--muted);white-space:nowrap}
.secili-satir.yeni .secili-usta{color:var(--g-600);font-weight:600}
.secili-tutar{font-weight:700;color:var(--g-700);white-space:nowrap}
.secili-bos{color:var(--muted);font-size:14px;padding:4px 0}

/* Formen notu / müşteri şikayeti */
.el-not-alan{margin-bottom:14px;text-align:left}
.el-not-alan label{display:block;font-size:15px;font-weight:600;color:#374151;margin-bottom:6px}
.el-not-ipucu{font-weight:400;color:var(--muted);font-size:13px}
.el-not-alan textarea,.el-not-kart textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:16px;font-family:inherit;resize:vertical;background:var(--card)}
.el-not-kart{background:#fffbeb;border:1px solid #fde68a;border-radius:14px;padding:14px 16px;margin-bottom:18px;text-align:left}
.el-not-kart label{display:block;font-size:14px;font-weight:700;color:#92600a;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:8px}
.el-not-kaydet{margin-top:10px;background:var(--g-600);color:#fff;border:none;border-radius:10px;
  padding:10px 20px;font-weight:600;font-size:15px;cursor:pointer}
/* Kart üstünde not satırı */
.el-ada-not{display:flex;gap:8px;align-items:flex-start;background:#fffbeb;border:1px solid #fde68a;
  border-radius:10px;padding:8px 10px;margin:8px 0 4px;font-size:14px;color:#92600a;font-weight:600;line-height:1.35}
.el-ada-not svg{width:16px;height:16px;flex:0 0 auto;stroke:#d97706;stroke-width:2;fill:none;margin-top:1px}
/* Kiosk devam ekranı not kutusu */
.ada-not-kutu{display:flex;gap:12px;align-items:flex-start;background:#fffbeb;border:1.5px solid #fde68a;
  border-radius:14px;padding:14px 18px;margin:0 auto 18px;max-width:760px;font-size:18px;color:#7c4a03;line-height:1.4}
.ada-not-kutu svg{width:24px;height:24px;flex:0 0 auto;stroke:#d97706;stroke-width:2;fill:none;margin-top:2px}

/* Anons butonu (teslime hazır kartta) */
.ada-anons-form{margin:8px 0 4px}
.ada-anons-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--g-600);color:#fff;border:none;border-radius:10px;padding:10px;
  font-weight:700;font-size:15px;cursor:pointer}
.ada-anons-btn:active{background:var(--g-700)}
.ada-anons-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}


/* --- Yağ Bakımı paketleri --- */
.yb-icerik { font-size: 12px; color: #64748b; padding-left: 10px; line-height: 1.5; }
.yb-onizle { margin-top: 6px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0;
             border-radius: 8px; font-size: 12.5px; color: #475569; line-height: 1.6; }
.yb-paket .card-head .tutar { font-weight: 700; }
/* Yağ bakımı önizleme kutusu — form altında tam genişlik, satır hizasını bozmaz */
.card-body > .yb-onizle{display:block;width:100%;margin-top:12px;padding:12px 14px;
  background:var(--g-50);border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--muted)}
.card-body > .yb-onizle::before{content:"Paket içeriği";display:block;font-weight:700;
  color:var(--ink,#1f2937);margin-bottom:6px;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.card-body > .yb-onizle > div{padding:2px 0}

/* ============================================================
   PDKS — Personel Devam Kontrol (takvim + günlük)
   candan.css'in SONUNA eklenir. Kurumsal renkler: yeşil #2E7D32, mavi #42A5F5
   ============================================================ */
.pdks-ust{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pdks-pers-secici form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pdks-lbl{font-size:13px;color:#5b6472;font-weight:600}
.pdks-pers-secici select{min-width:220px;height:38px;padding:0 12px;border:1px solid #d5dae1;border-radius:9px;font-size:14px;background:#fff}
.pdks-ay-gezin{display:flex;align-items:center;gap:14px}
.pdks-ay-adi{font-size:16px;font-weight:700;color:#2c333d;min-width:150px;text-align:center}
.pdks-ok{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid #d5dae1;background:#fff;color:#2E7D32;font-size:20px;font-weight:700;text-decoration:none;line-height:1;transition:.15s}
.pdks-ok:hover{background:#2E7D32;color:#fff;border-color:#2E7D32}

/* Özet şeridi */
.pdks-ozet-serit{display:flex;align-items:center;gap:28px;margin-bottom:16px;padding:14px 20px;background:linear-gradient(90deg,#f2f8f3,#eef6fb);border:1px solid #e2ebe4;border-radius:12px}
.pdks-kisi{display:flex;align-items:center;gap:12px;padding-right:24px;border-right:1px solid #d9e3dc}
.pdks-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#2E7D32,#42A5F5);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:.5px}
.pdks-avatar.sm{width:28px;height:28px;font-size:11px}
.pdks-kisi-ad{font-size:16px;font-weight:700;color:#263;}
.pdks-stat{display:flex;flex-direction:column;line-height:1.15}
.pdks-stat b{font-size:22px;color:#2E7D32;font-weight:800}
.pdks-stat span{font-size:12px;color:#6b7280}

/* Takvim ızgarası */
.pdks-takvim-kart{padding:18px}
.pdks-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.pdks-basliklar{margin-bottom:8px}
.pdks-baslik{text-align:center;font-size:12px;font-weight:700;color:#8a929c;padding:4px 0;text-transform:uppercase;letter-spacing:.5px}
.pdks-baslik.hs{color:#c0563f}
.pdks-hucre{min-height:76px;border-radius:11px;padding:8px 9px;display:flex;flex-direction:column;position:relative;background:#fbfcfd;border:1px solid #eceff3}
.pdks-hucre.bos{background:transparent;border:none}
.pdks-hucre-ust{display:flex;align-items:center;justify-content:space-between}
.pdks-gunno{font-size:13px;font-weight:700;color:#9aa2ac}
.pdks-hucre.bugun{outline:2px solid #42A5F5;outline-offset:1px}

/* Geldi — yeşil kart, giriş/çıkış saatleri */
a.pdks-hucre.geldi{background:linear-gradient(160deg,#eef8ef,#e3f2e5);border-color:#c7e3ca;text-decoration:none;cursor:pointer;transition:.15s}
a.pdks-hucre.geldi:hover{border-color:#2E7D32;box-shadow:0 4px 12px rgba(46,125,50,.15);transform:translateY(-1px)}
.pdks-hucre.geldi .pdks-gunno{color:#2E7D32}
.pdks-nokta{width:7px;height:7px;border-radius:50%;background:#2E7D32}
.pdks-saat{margin-top:auto;display:flex;flex-direction:column;gap:1px}
.pdks-gir{font-size:14px;font-weight:800;color:#1f6d24;font-variant-numeric:tabular-nums}
.pdks-cik{font-size:12px;font-weight:600;color:#6b8f6e;font-variant-numeric:tabular-nums}
.pdks-cik::before{content:"→ ";color:#a8c4aa}
.pdks-tek{font-size:10px;color:#b08968;font-style:italic}

/* Gelmedi / hafta sonu / ileri */
.pdks-hucre.yok{background:#fff;border-color:#f0d9d4}
.pdks-yok-etiket{margin-top:auto;font-size:11px;color:#c0563f;font-weight:600}
.pdks-hucre.hs{background:#f6f7f9;border-color:#eceff3}
.pdks-hucre.hs .pdks-gunno{color:#b8bec7}
.pdks-hucre.ileri{background:#fafbfc;border-style:dashed;opacity:.6}

/* Legend */
.pdks-legend{display:flex;align-items:center;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid #eef1f4;font-size:12px;color:#6b7280;flex-wrap:wrap}
.pdks-legend .lg{width:13px;height:13px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:5px}
.pdks-legend .lg.geldi{background:linear-gradient(160deg,#eef8ef,#c7e3ca);border:1px solid #c7e3ca}
.pdks-legend .lg.yok{background:#fff;border:1px solid #f0d9d4}
.pdks-legend .lg.hs{background:#f6f7f9;border:1px solid #eceff3}
.pdks-legend-not{margin-left:auto;font-style:italic;color:#9aa2ac}

/* Gün detay — zaman çizgisi */
.pdks-gun-kart{padding:22px}
.pdks-gun-baslik{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #eef1f4}
.pdks-gun-tarih{font-size:18px;font-weight:800;color:#2c333d}
.pdks-gun-alt{font-size:13px;color:#8a929c}
.pdks-zaman-cizgi{display:flex;flex-direction:column;gap:10px}
.pdks-okutma{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:10px;background:#f8fafb;border-left:3px solid #cfd6de}
.pdks-okutma-saat{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:#2c333d;min-width:90px}
.pdks-okutma-yon{font-size:13px;font-weight:700;padding:3px 12px;border-radius:20px}
.pdks-okutma-tip{font-size:12px;color:#8a929c;margin-left:auto}
.pdks-yon-giriş{border-left-color:#2E7D32;background:#eef8ef}
.pdks-yon-giriş .pdks-okutma-yon{background:#d7ecd8;color:#1f6d24}
.pdks-yon-çıkış{border-left-color:#42A5F5;background:#eef6fb}
.pdks-yon-çıkış .pdks-okutma-yon{background:#d6eaf7;color:#1a6ba8}
.pdks-yon-ara .pdks-okutma-yon{background:#eceff3;color:#8a929c}

/* Günlük tablo */
.pdks-gunluk-tablo .pdks-tbl-kisi{display:flex;align-items:center;gap:10px;text-decoration:none;color:#2c333d;font-weight:600}
.pdks-gunluk-tablo .pdks-tbl-kisi:hover{color:#2E7D32}
.pdks-satir-yok{opacity:.55}
.pdks-gelmedi{color:#c0563f;font-weight:600;font-size:13px}
.pill-gir{background:#d7ecd8;color:#1f6d24;font-weight:700}
.pill-cik{background:#d6eaf7;color:#1a6ba8;font-weight:700}
.pdks-isim-yok,.pdks-tek{color:#b08968;font-size:11px}

@media(max-width:820px){
  .pdks-hucre{min-height:60px;padding:6px}
  .pdks-gir{font-size:12px}.pdks-cik{font-size:10px}
  .pdks-grid{gap:5px}
}

/* ===== Sidebar accordion (2026-08-27) — mevcut .side/.nav kuralları korunur ===== */
.side-g{display:flex;flex-direction:column}
.side-g-bas{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;
  border:0;background:none;border-radius:9px;color:#cfe3d5;font:inherit;font-weight:500;
  font-size:13.5px;text-align:left;cursor:pointer;transition:background .12s,color .12s}
.side-g-bas svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;flex:none}
.side-g-bas:hover{background:rgba(255,255,255,.07);color:#fff}
.side-g-bas .side-g-ok{margin-left:auto;width:15px;height:15px;opacity:.55;
  transition:transform .18s ease,opacity .12s}
.side-g.open>.side-g-bas{color:#fff}
.side-g.open>.side-g-bas .side-g-ok{transform:rotate(90deg);opacity:.85}
.side-g-ic{display:flex;flex-direction:column;gap:2px;max-height:0;overflow:hidden;
  transition:max-height .18s ease}
.side-g.open>.side-g-ic{max-height:420px}
.side-g-ic .nav{padding:8px 12px 8px 34px;font-size:13px;font-weight:400;color:#b6cfbe}
.side-g-ic .nav svg{width:16px;height:16px;opacity:.75}
.side-g-ic .nav:hover{background:rgba(255,255,255,.06);color:#fff}
.side-g-ic .nav.active{background:rgba(255,255,255,.10);color:#fff;font-weight:600;
  box-shadow:inset 2px 0 0 var(--g-400)}
.side-g-ic .nav.active svg{opacity:1}

/* ===== Sidebar: gruplar HEP AÇIK (2026-08-27 kararı) =====
   Accordion kaldırıldı; grup başlıkları etiket olarak kalır, alt linkler
   her zaman görünür. 'open' sınıfı yalnız bulunulan grubun başlığını
   vurgulamaya devam eder. Yukarıdaki accordion kuralları override edilir. */
.side-g-ic{max-height:none;overflow:visible}
.side-g.open>.side-g-ic{max-height:none}
.side-g-bas{cursor:default}
.side-g-bas:hover{background:none;color:#cfe3d5}
.side-g.open>.side-g-bas:hover{color:#fff}
.side-g-bas .side-g-ok{display:none}

/* ===== Genel modal (2026-08-27) — sayfa geçişi yerine yerinde pencere ===== */
.mdl-ortu{position:fixed;inset:0;z-index:200;background:rgba(16,32,22,.42);
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;
  overflow-y:auto;backdrop-filter:blur(2px)}
.mdl-ortu.acik{display:flex}
.mdl{background:var(--card);border-radius:var(--r-card);width:100%;max-width:720px;
  box-shadow:0 24px 64px rgba(16,40,25,.28);animation:mdlGir .16s ease}
@keyframes mdlGir{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mdl-bas{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.mdl-bas h2{margin:0;font-size:16px;font-weight:700;flex:1}
.mdl-kapat{border:0;background:none;cursor:pointer;font-size:22px;line-height:1;
  color:var(--muted);padding:2px 8px;border-radius:8px}
.mdl-kapat:hover{background:var(--g-50);color:var(--ink)}
.mdl-govde{padding:18px 20px 22px}
.mdl-govde .page-head,.mdl-govde .crumb{display:none}
.mdl-govde .form-card{border:0;padding:0;max-width:none;background:none}
.mdl-govde form.form-card{box-shadow:none}
.mdl-yukleniyor{padding:40px;text-align:center;color:var(--muted);font-size:13px}
.mdl-uyari{padding:10px 14px;border-radius:var(--r-ctrl);background:var(--amber-100);
  color:var(--amber);font-size:13px;font-weight:600;margin-bottom:14px}
@media(max-width:640px){
  .mdl-ortu{padding:12px}
  .mdl{max-width:none}
}

/* ===== Form kontrolleri: type'sız ve salt-okunur input'lar (2026-08-28) =====
   Bölüm 8'deki kurallar yalnız input[type=...] seçicilerine bağlıydı; type
   yazılmamış <input value="..." readonly> alanları kural dışı kalıp tarayıcının
   çıplak görünümüne düşüyordu. Aşağıdaki seçici tüm metin benzeri input'ları
   kapsar; checkbox/radio/file/düğme türleri hariç tutulur. */
/* :where() ile ÖZGÜLLÜK 0 — bu taban kural, .search input / .pd-ad-input gibi
   mevcut özel kuralları ASLA ezmez, yalnız hiç kuralı olmayan alanlara uygular.
   (Özgüllük eşit olduğunda sonradan gelen kazanıyordu; arama kutusunun sol
   boşluğu bu yüzden kaybolmuştu.) */
:where(input:not([type]),
input[type=tel],input[type=url],input[type=time],input[type=datetime-local],
input[type=month],input[type=week]){
  width:100%;height:40px;border:1px solid var(--line);border-radius:var(--r-ctrl);
  padding:0 12px;font:inherit;font-size:13.5px;background:var(--g-50);color:var(--ink);display:block}
:where(input:not([type]),input[type=tel],input[type=url],
input[type=time],input[type=datetime-local]):focus{
  outline:none;border-color:var(--g-400);background:#fff;box-shadow:0 0 0 3px var(--g-100)}

/* Salt-okunur alanlar: düzenlenebilir görünmesin */
:where(input[readonly],textarea[readonly],input[readonly]:focus){
  background:var(--slate-100);color:var(--slate);border-color:var(--line);
  box-shadow:none;cursor:default}

/* ============================================================================
   RESPONSIVE SAĞLAMLAŞTIRMA — P1..P7 (2026-08-28)

   İLKE: desktop (≥1024px) görünümü DEĞİŞMEZ. Hiçbir öğe gizlenmez, metin
   kısaltılmaz, tablo karta dönüştürülmez. Bir bileşen dar ekrana sığmıyorsa
   SAYFA değil, BİLEŞENİN KENDİSİ yatay kayar. Kesilen içerik bırakılmaz.
   ============================================================================ */

/* ---- P1: .tbl-wrap tabloları kendi kabında yatay kaysın --------------------
   .tbl-wrap köşe yuvarlatma için overflow:hidden taşıyordu; ≤1200px kaydırma
   kuralı ise yalnız .card:has(>table) / .card-body:has(>table) için yazılmıştı.
   Sonuç: .tbl-wrap kullanan TÜM listelerde (SMS, faturalar, projeler, cari,
   müşteriler, iş emirleri, kit stok, personel, tatil) sağdaki sütunlar
   görünmeden kesiliyordu. Burada kesme yerine kaydırma veriliyor. */
@media(max-width:1200px){
  .tbl-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
  .tbl-wrap > table{min-width:720px}
}

/* ---- P2: topbar dar ekranda KONTROLLÜ İKİ SATIR ---------------------------
   1. satır: hamburger + logo + Anons Yap + kullanıcı + çıkış
   2. satır: global arama, tam genişlik
   Hiçbir kontrol gizlenmiyor; yalnız sarıyorlar.

   --top-h BAĞI: .app grid satırı, .side{top:var(--top-h)} ve sticky topbar
   hep bu tek değişkene bağlı. Bu yüzden topbar'a değişkenin KENDİSİ yükseklik
   olarak veriliyor (height:var(--top-h)) ve değişken bu kırılımda iki satırlık
   değere alınıyor: 8+8 padding + 40 (1. satır kontrol yüksekliği) + 8 (satır
   arası gap) + 38 (arama alanı) = 102px. Böylece sidebar doğru yerden başlar,
   içerik kaymaz, sticky bozulmaz — ikinci bir yükseklik kaynağı doğmaz. */
@media(max-width:600px){
  /* 2 SATIR: 8+8 padding + 40 (kontrol satırı) + 8 (satır arası) + 38 (arama) */
  :root{--top-h:102px}
  .topbar{flex-wrap:wrap;align-content:center;height:var(--top-h);
    padding:8px 12px;gap:8px 10px}
  .brand{width:auto;flex:0 0 auto}
  .brand-logo{height:34px}
  .search{order:3;flex:1 1 100%;max-width:none;min-width:0}
  .top-actions{margin-left:auto;gap:8px;flex:0 0 auto}
  .anons-btn-bar{font-size:14px;padding:8px 12px}
  /* Uzun ad/rol satır yüksekliğini şişirmesin. Metin KALDIRILMIYOR; yalnız
     taşma durumunda ellipsis'le kısalıyor, tamamı kullanıcı menüsünde duruyor. */
  .user-meta{min-width:0}
  .user-meta b,.user-meta span{display:block;max-width:120px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ≤500px: hiçbir kontrol gizlenmediği için üst satır artık sığmıyor ve
   kontroller kendiliğinden 3 SATIRA sarıyor (hamburger+logo / anons+kullanıcı+
   çıkış / arama). --top-h bu duruma göre yeniden hesaplanır ki sidebar'ın
   başlangıcı, grid satırı ve sticky davranış tutarlı kalsın:
   8+8 padding + 40 + 8 + 40 + 8 + 38 = 150px */
@media(max-width:500px){
  :root{--top-h:150px}
  .brand-logo{height:32px}
  /* Kontroller kendi satırını tam kaplasın: Anons solda, kullanıcı+çıkış sağda.
     Aksi halde satırın solu boş kalıp öğeler ortada asılı duruyordu. */
  .top-actions{flex:1 1 100%;margin-left:0;justify-content:space-between}
  .user-meta b,.user-meta span{max-width:150px}
}

/* ---- P4: tarih seçici (dr-cal) ekran/modal dışına taşmasın ----------------
   90vw viewport'a göreydi; modal içinde modalın iç genişliğini aşabiliyordu.
   Modalda tam genişlik, dar ekranda sola hizalı ve viewport'a sığan genişlik. */
/* Modal içinde: genişlik AYNEN 320px kalır (desktop görünümü değişmez),
   yalnız modal daraldığında kabına sığar ve sola hizalanır. */
.mdl-govde .dr-cal{max-width:100%;left:0;right:auto}
@media(max-width:480px){
  .dr-cal{width:min(320px,calc(100vw - 32px));left:0;right:auto}
}

/* ---- P5: randevu üst kontrolleri sarsın (gizlenmiyor) --------------------- */
@media(max-width:640px){
  .rdv-bar{flex-wrap:wrap;justify-content:center}
  .rdv-bar .lbl{min-width:0;flex:1 1 100%;order:-1}
}

/* ---- P7: cari satır menüsü, P1 kaydırma kabında kırpılmasın ---------------
   .cd-menu-ic sağa hizalıydı; tablo overflow-x:auto olunca sağ kenarda
   kırpılıyordu. Dar ekranda sola açılıyor. */
@media(max-width:1200px){
  .cd-menu-ic{right:auto;left:0}
}

/* ---- Randevu takvimi: boş slotlar ve ızgara daha ayırt edici (2026-08-28) --
   Boş slot neredeyse görünmezdi (#fbfcfb zemin, #cdd6cf metin). Mevcut renk
   paletiyle kalınarak kontrast artırıldı; düzen, ölçü ve davranış aynı. */
.appt-empty{background:var(--g-50);border:1px dashed var(--g-300);color:var(--g-500)}
.appt-empty .ser{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;gap:5px;line-height:1}
.appt-empty .saat{font-variant-numeric:tabular-nums;font-weight:800;color:var(--g-600);font-size:11.5px}
.appt-empty:hover .saat{color:var(--g-700)}
.appt-empty:hover{background:var(--g-100);border-style:solid;border-color:var(--g-500)}
.appt-empty:hover .ser{color:var(--g-700)}
/* saat/gün ızgarası: hücre sınırları belirginleşsin */
.cal-cell{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.cal-cell.last{border-right:none}


/* ---- Randevu hücreleri (2026-08-28, 2. tur) -------------------------------
   Dolu/boş farklı yükseklikte olunca satırlar hizasız görünüyordu. Artık TÜM
   slotlar aynı yükseklikte: ızgara temiz, satır bütünlüğü korunuyor.
   İsim ve araç yan yana; durum yazısı yok (renk + ipucu taşıyor). */
.appt,.appt-empty{height:46px}
.appt{flex-direction:row;align-items:center;gap:8px;padding:0 10px}
.appt .nm{font-size:13.5px;font-weight:700;line-height:1.2;flex:0 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58%}
.appt .car{font-size:12.5px;opacity:.9;line-height:1.2;flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt .ser-et{font-size:10.5px;font-weight:700;opacity:.65;letter-spacing:.03em;
  flex:none;margin-left:auto}
.cal-cell{min-height:0}


/* ---- Randevu: araç öneri kutusu (2026-08-28) ------------------------------
   Serbest yazım korunur; katalogdaki marka+model listesinden öneri sunar. */
.ao-wrap{position:relative}
.ao-liste{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px;
  box-shadow:0 12px 28px rgba(16,40,25,.16);max-height:320px;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.ao-item{display:block;width:100%;text-align:left;border:0;background:none;
  font:inherit;font-size:13px;color:var(--ink);padding:8px 10px;border-radius:7px;cursor:pointer}
.ao-item b{font-weight:700;color:var(--g-700)}
.ao-item:hover,.ao-item.aktif{background:var(--g-50)}
.ao-mk{font-size:11px;color:var(--muted);font-weight:600}


/* ---- Randevuya kapatılmış slot (2026-08-28) -------------------------------
   Gri + taralı zemin; tıklanınca aynı pencereden tekrar açılabilir. */
.appt-kapali{height:46px;border-radius:7px;display:flex;align-items:center;gap:8px;
  padding:0 10px;text-decoration:none;cursor:pointer;border:1px solid #d8dee4;
  color:#8b95a1;font-size:12.5px;font-weight:600;
  background:repeating-linear-gradient(45deg,#f1f3f5,#f1f3f5 6px,#e7ebef 6px,#e7ebef 12px)}
.appt-kapali:hover{border-color:#c2cad3;color:#5b6472}
.appt-kapali .kp-yazi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt-kapali .kp-ser{font-size:10.5px;font-weight:700;opacity:.7;flex:none}
.slot-kapali-kutu{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:14px 16px;border:1px solid #d8dee4;border-radius:var(--r-card);
  background:repeating-linear-gradient(45deg,#f7f9fa,#f7f9fa 8px,#eef1f4 8px,#eef1f4 16px);
  margin-bottom:14px}
.slot-kapali-kutu p{margin:4px 0 0}
.slot-kapat-form{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.slot-kapat-form input[name=sebep]{flex:1;min-width:160px;max-width:280px}


/* ---- Randevu penceresi: teyit / sil satırı (2026-08-28) -------------------
   Bu düğmeler page-head içindeydi; modal CSS'i page-head'i gizlediği için
   pencerede görünmüyorlardı. Artık formun altında, her iki görünümde de var. */
.rdv-islem{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.rdv-islem .rdv-sil{margin-left:auto}


/* ---- Randevu takvimi: boş slot nötr, dolu slot renkli (2026-08-28) --------
   Teyitli randevunun yeşili boş slotun yeşiliyle karışıyordu. Boş slotlar
   nötr griye alındı; dolu randevular sol renk şeridiyle ayrışıyor. */
.appt-empty{background:#fafbfc;border:1px dashed #d5dbe2;color:#8b95a1}
.appt-empty .ser{color:#8b95a1}
.appt-empty .saat{color:#5b6472}
.appt-empty:hover{background:var(--g-50);border-style:solid;border-color:var(--g-400)}
.appt-empty:hover .saat,.appt-empty:hover .ser{color:var(--g-700)}
/* dolu randevular: sol şerit + belirgin dolgu */
.appt{border-left-width:4px}
.appt.teyit{background:var(--g-100);border-color:var(--g-400);border-left-color:var(--g-600);color:var(--g-700)}
.appt.bekle{background:var(--red-100);border-color:#f0ccc7;border-left-color:var(--red);color:#a13226}
/* gün başlığındaki araç sayısı */
.cal-adet{display:block;margin-top:3px;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;color:var(--g-600);text-transform:none}
.cal-hcell.today .cal-adet{color:var(--g-700)}

/* taşıma modunda kapalı slot: hedef değil, yalnız bilgi */
.appt-kapali-pasif{cursor:not-allowed;opacity:.75}


/* ---- SMS penceresi: hazır mesaj butonları (2026-08-28) --------------------
   Butona basınca metin kutusuna yazılır; gönderim yine kullanıcı onayıyla. */
.sms-hazir{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.sms-hazir-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;
  font-size:12.5px;font-weight:600;border-radius:9px;cursor:pointer;transition:.12s}
.sms-hazir-btn:hover{border-color:var(--g-400);background:var(--g-50);color:var(--g-700)}
.sms-hazir-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}


/* Kısmi faturalama: kalemin fatura durumu (2026-08-31) */
.km-fatura{margin-top:3px;font-size:11.5px;font-weight:600;color:var(--g-700)}
.km-bekliyor{margin-top:3px;font-size:11.5px;color:var(--muted)}

/* Yer tutucu ("yakında") sayfaları — 2026-09-03 */
.yakinda{ text-align:center; padding:48px 20px; }
.yakinda svg{ width:44px; height:44px; stroke:var(--muted); stroke-width:1.5;
  fill:none; stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px; }
.yakinda h2{ margin:0 0 6px; font-size:20px; }
.yakinda p{ margin:0; }

/* ---------- PROJE ÜRET (üç senaryo kartı) ---------------------------------
   Projelendirme > Proje Üret: iş emrinden / yenileme / tank değişimi. */
.pu-kartlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-bottom:20px}
@media(max-width:1000px){.pu-kartlar{grid-template-columns:1fr}}
.pu-kart{display:flex;flex-direction:column;gap:8px;padding:18px;
  background:var(--card,#fff);border:1px solid var(--line,#e3e6ea);
  border-radius:12px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
a.pu-kart:hover{border-color:var(--g-600);box-shadow:0 4px 14px rgba(0,0,0,.07);
  transform:translateY(-2px)}
.pu-kart h3{margin:0;font-size:15px}
.pu-kart p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pu-ikon svg{width:30px;height:30px;stroke:var(--g-600);stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.pu-git{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:600;
  color:var(--g-600)}
.pu-kart.pu-kapali{opacity:.55;cursor:not-allowed}
.pu-kart.pu-kapali .pu-ikon svg{stroke:var(--muted)}
.pu-kart.pu-kapali .pill{margin-top:auto;align-self:flex-start}
.pu-ara{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.pu-ara input[type=search]{flex:1;min-width:200px}
.pu-bulgu{margin:10px 0 0}
tr.pu-pasif td{opacity:.55}

/* ---------- FATURA İPTAL (fatura detay) ---------------------------------- */
.fd-iptal-bant{border-left:3px solid var(--red,#b3261e)}
.fd-iptal-form{margin-top:14px;text-align:left}
.fd-iptal-form .form-label{display:block;margin-bottom:6px}

/* Aynı slota girmiş çift randevu (kısıt öncesi veri) — ekranda kaybolmasın */
.appt.appt-cakisma{background:var(--red-100);border:1px dashed var(--red);
  color:var(--red);margin-top:3px}
.appt.appt-cakisma .ser-et{color:var(--red);opacity:.8}

/* El Terminali — "bu araçta açık iş emri var" uyarı bandı */
.el-uyari-bant{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;
  padding:16px 18px;border-radius:14px;background:var(--amber-100);
  border:1px solid #e8d3a8;color:#7a5200}
.el-uyari-bant b{font-size:18px}
.el-uyari-bant span{font-size:15px;line-height:1.45}
.el-uyari-bant .el-buyuk-btn{margin-top:4px;align-self:flex-start}

/* ============================================================================
   TELEFON SAĞLAMLAŞTIRMA — M1..M6 (2026-09-04)

   İLKE (P1..P7 ile aynı): masaüstü görünümü DEĞİŞMEZ. Hiçbir fonksiyon
   gizlenmez, anlamlı metin kısaltılmaz, buton icon-only yapılmaz, tablo karta
   dönüştürülmez. Kurallar YALNIZCA .app (masaüstü kabuğu) içinde geçerli —
   Kiosk (base_kiosk) ve El Terminali (base_el) .app kullanmadığı için o iki
   dokunmatik arayüz bu bloktan HİÇ etkilenmez.

   Blok dosyanın SONUNA eklendi; tüm seçiciler .app öneki taşıdığı için mevcut
   kuralları özgüllükle geçer, hiçbir aralığı kesmez.
   ============================================================================ */

/* ---- M1: iOS otomatik yakınlaştırmasını durdur ----------------------------
   iPhone Safari, font-size < 16px olan bir alana odaklanınca sayfayı KENDİ
   BAŞINA yakınlaştırıyor ve geri döndürmüyor; kullanıcı her form girişinden
   sonra parmakla küçültmek zorunda kalıyordu. 16px eşiği bu davranışı
   tamamen kapatır. Masaüstünde alanlar 13.5px kalır. */
@media (max-width:600px){
  /* --top-h BAĞI: arama kutusu 38 -> 42px büyüdüğü için üst bar yüksekliği de
     büyümek zorunda; yoksa ikinci satır kırpılıyordu.
     8+8 padding + 40 (kontrol satırı) + 8 (gap) + 42 (arama) = 106px */
  :root{--top-h:106px}
  .app .form-control,.app .form-select,
  .app input[type=text],.app input[type=search],.app input[type=number],
  .app input[type=password],.app input[type=email],.app input[type=date],
  .app input[type=tel],.app input[type=url],.app input[type=time],
  .app input[type=datetime-local],.app input:not([type]),
  .app select,.app textarea,
  .app .search input{font-size:16px}
  /* 16px metin 40px kutuya sıkışmasın */
  .app .form-control,.app .form-select,
  .app input[type=text],.app input[type=search],.app input[type=number],
  .app input[type=password],.app input[type=email],.app input[type=date],
  .app input[type=tel],.app input:not([type]),.app select{height:44px}
  .app .search input{height:42px}
  .app select[size]{height:auto}
  .app textarea{min-height:96px}
}

/* ---- M2: üst bar telefonda ÜÇ değil İKİ satır -----------------------------
   ≤500px'te kontroller üç satıra çıkıyor ve --top-h 150px oluyordu; yapışkan
   olduğu için iPhone'da kullanılabilir yüksekliğin ~%23'ü kalıcı gidiyordu.
   Artık 102px: 1. satır hamburger + logo + Anons + avatar + çıkış,
   2. satır tam genişlikte arama. Anons Yap metniyle duruyor, arama duruyor.
   Kullanıcı ADI VE ROLÜ kaybolmuyor — menü çekmecesinin başına taşındı
   (.side-user), orada tam hâliyle okunuyor. */
.side-user{display:none}
@media (max-width:500px){
  :root{--top-h:106px}
  .app .top-actions{flex:0 0 auto;margin-left:auto;justify-content:flex-end;gap:8px}
  .app .brand-logo{height:28px;max-width:88px}
  /* Ad/rol üst barda yer kaplamıyor; çekmecede duruyor */
  .app .topbar .user-meta{display:none}
  .app .anons-btn-bar{font-size:13.5px;padding:0 12px;height:40px}
  /* Çekmecenin başındaki kullanıcı kartı */
  .side-user{display:flex;align-items:center;gap:11px;padding:4px 12px 14px;
    margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)}
  .side-user .avatar{width:38px;height:38px;font-size:13.5px;flex:none}
  .side-user-meta{min-width:0;line-height:1.3}
  .side-user-meta b{display:block;color:#fff;font-size:14px;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-user-meta span{display:block;color:var(--g-300);font-size:11.5px}
}

/* ---- M3: dokunma hedefleri ------------------------------------------------
   Apple'ın alt sınırı 44px. Masaüstünde fareyle sorun olmayan 32-34px hedefler
   başparmakla yanlış tuşa basılmasına yol açıyordu ("tuşlar birbirine giriyor").
   YALNIZCA dokunmatik işaretçide ve yalnız .app içinde büyür; masaüstü
   ölçüleri (40/34/32) aynen kalır. */
@media (pointer:coarse) and (max-width:820px){
  .app .btn{height:44px;padding:0 18px}
  .app .btn-sm{height:40px;padding:0 14px;font-size:13.5px}
  .app .iact{width:40px;height:40px}
  .app .iact svg{width:17px;height:17px}
  .app .icon-btn{width:40px;height:40px}
  /* Hamburger BÜYÜTÜLMÜYOR: üst barın 1. satır yüksekliği --top-h hesabına
     giriyor, 44px yapmak o hesabı bozar. 40px dokunmatikte de yeterli. */
  /* Yan yana duran eylem grupları: 8px aralık parmak için yetmiyor */
  .app .gap-2{gap:10px}
  .app .iact + .iact{margin-left:8px}
  /* Satır içi eylem hücreleri sarmasın, kaydırma kabında yan yana kalsın */
  .app td:has(> form){white-space:nowrap}
  /* Onay kutuları ve radyolar */
  .app input[type=checkbox],.app input[type=radio]{width:20px;height:20px}
  .app .onay-kutu{gap:12px;padding:4px 0}
  /* Sayfalama: 34px hedefler ve 4px aralık dokunmatikte çok sıkışıktı */
  .app .pagination .pg-links{gap:8px}
  .app .pg{min-width:44px;height:44px;font-size:14px}
  .app .pg-adet select{height:40px}
}

/* ---- M4: kayan tablonun "devamı var" olduğu görünsün ----------------------
   P1 tabloları kendi kabında kaydırıyor ama kaydırılabildiği belli olmuyordu;
   sağdaki sütunların varlığı keşfedilmiyordu. Aşağıdaki degrade yalnız
   GERÇEKTEN taşma varken görünür (background-attachment: local/scroll):
   sola/sağa kaydırdıkça ilgili kenardaki gölge kendiliğinden kaybolur. */
@media (max-width:1200px){
  .app .tbl-wrap,
  .app .card:has(> table),
  .app .card-body:has(> table){
    background-image:
      linear-gradient(to right, var(--card) 40%, rgba(255,255,255,0)),
      linear-gradient(to left,  var(--card) 40%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(16,40,25,.16), rgba(16,40,25,0)),
      linear-gradient(to left,  rgba(16,40,25,.16), rgba(16,40,25,0));
    background-position:0 0, 100% 0, 0 0, 100% 0;
    background-repeat:no-repeat;
    background-size:32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}

/* ---- M5: filtre çubuğu telefonda tek sütun --------------------------------
   .filters yatay flex'ti; dar ekranda alanlar ikişer ikişer sıkışıyor ve
   "Ara" düğmesi köşede kalıyordu. Alan sayısı ve etiketler aynen kalır. */
@media (max-width:600px){
  .app .filters{flex-direction:column;align-items:stretch;gap:12px}
  .app .filters .fld{width:100%;min-width:0}
  .app .filters .btn,.app .filters button[type=submit]{width:100%;justify-content:center}
  .app .pu-ara{flex-direction:column;align-items:stretch}
  .app .pu-ara input[type=search]{min-width:0}
  .app .pu-ara .btn{width:100%;justify-content:center}
  .app .satir-form .sf-fld{min-width:0;flex:1 1 100%}
}

/* ---- M6: sayfa altı ve künye ----------------------------------------------
   iPhone'un Ana Sayfa çizgisi sayfanın son düğmesini yiyordu; alt boşluk
   güvenli alana göre büyür. Künye şeridi de telefonda sarsın. */
@media (max-width:600px){
  .app .main{padding:18px 14px calc(56px + env(safe-area-inset-bottom));}
  .app .form-foot{gap:10px;flex-wrap:wrap}
  .app .pagination{flex-direction:column;align-items:stretch;gap:12px}
  .app .pagination .pg-left,.app .pagination .pg-links{justify-content:center}
  .app .kunye{flex-wrap:wrap;gap:10px 14px}
  .app .kunye .right{margin-left:0}
  .app .page-head{align-items:flex-start}
  .app h1{font-size:20px}
  .app h1 .sub{display:block;margin-left:0;margin-top:2px}
}

/* ---- Randevu hücresi: isim ve araç HER ZAMAN tam okunur (2026-09-04) -------
   2026-08-28'deki "isim ve araç yan yana" düzeni tek satıra sıkışıyordu:
   110px'lik bir gün sütununda iç boşluklar ve SER etiketi düşünce isim+araç
   için ~40px kalıyor, ikisi de "…" oluyordu. Masaüstünde bile (≈147px sütun)
   isim %58 ile sınırlıydı ve uzun ad/model kesiliyordu.

   Yeni düzen: isim kendi satırında, araç + SER altında. İkisi de KIRPILMAZ,
   gerekirse alt satıra sarar; kutu yüksekliği içeriğe göre büyür. Izgara
   satırı en uzun hücreye göre yükselir, hizalama korunur.
   Sütun genişliklerine ve ızgara min-width'ine DOKUNULMADI — masaüstünde
   takvimin genişliği ve yatay kaydırma eşiği aynen kalır. */
.appt{height:auto;min-height:46px;flex-direction:column;align-items:stretch;
  justify-content:center;gap:2px;padding:5px 9px;overflow:visible}
.appt .nm{font-size:13.5px;font-weight:700;line-height:1.25;flex:none;max-width:none;
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.appt-alt{display:flex;align-items:flex-end;gap:6px;min-width:0}
.appt .car{font-size:12.5px;opacity:.9;line-height:1.2;flex:1 1 auto;min-width:0;
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.appt .ser-et{flex:none;margin-left:0;white-space:nowrap}
/* Taşıma modundaki iki durum da aynı davransın */
.appt.tasinan,.appt.dolu-pasif{height:auto;min-height:46px}
.appt.tasinan .nm,.appt.dolu-pasif .nm{white-space:normal;overflow:visible;
  text-overflow:clip;overflow-wrap:anywhere}
.appt.tasinan .car,.appt.dolu-pasif .car{white-space:normal;overflow:visible}
/* Boş slot sabit yükseklikte kalır; dolu slot büyüyünce satır ona uyar */
.appt-empty{height:auto;min-height:46px}

/* Takvim de kendi kabında yatay kayıyor — kaydırılabildiği belli olsun
   (M4'teki tablo ipucunun aynısı). */
@media (max-width:1200px){
  .app .cal{
    background-image:
      linear-gradient(to right, var(--card) 40%, rgba(255,255,255,0)),
      linear-gradient(to left,  var(--card) 40%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(16,40,25,.16), rgba(16,40,25,0)),
      linear-gradient(to left,  rgba(16,40,25,.16), rgba(16,40,25,0));
    background-position:0 0, 100% 0, 0 0, 100% 0;
    background-repeat:no-repeat;
    background-size:32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}

/* ---- Randevu hücresi: SABİT yükseklik + kelime bölünmez (2026-09-04) -------
   İki kural:
   1) Aynı satırdaki hücreler HER KOŞULDA aynı boyda. Bir önceki turda kutu
      içeriğe göre büyüyordu; uzun bir ad o satırın tamamını yükseltip ızgarayı
      kademelendiriyordu. Artık her slot türü — dolu, boş, kapalı, taşıma
      hedefi, taşınan, dolu-pasif — TEK yükseklikte (46px). Taşıma modunda
      52px olan üç tür de buraya çekildi; kapalı slot zaten 46px'ti ve o modda
      tek başına kısa kalıyordu.
   2) Kelime ORTASINDAN bölünmez. Metin sarmıyor; sığmazsa aşağıdaki
      auto-fit (takvim.html) yazı boyunu kademeli küçültüyor. Böylece hem
      kutu boyu sabit kalıyor hem de isim/model bölünmeden okunuyor.

   İsim ve araç YAN YANA değil ALT ALTA duruyor (bir önceki tur): her birine
   satırın tam genişliği düşüyor, bu da küçültmeye çok az ihtiyaç bırakıyor. */
.appt,.appt-empty,.appt-kapali,.appt-hedef,
.appt.tasinan,.appt.dolu-pasif{height:46px;min-height:46px}
.appt{overflow:hidden}
.appt .nm,.appt .car,
.appt.tasinan .nm,.appt.tasinan .car,
.appt.dolu-pasif .nm,.appt.dolu-pasif .car{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  overflow-wrap:normal;word-break:normal;hyphens:none}
/* SER etiketi araç satırına en az yer bıraksın */
.appt .ser-et{font-size:10px}

/* ============================================================
   PERSONEL ÖDEMELERİ — sekmeler + prim dağıtımı (2026-09-04)
   ============================================================ */
.po-sekmeler{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.po-sekme{padding:10px 18px;font-size:13.5px;font-weight:600;color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  border-radius:8px 8px 0 0}
.po-sekme:hover{background:var(--g-50);color:var(--g-700)}
.po-sekme.aktif{color:var(--g-700);border-bottom-color:var(--g-600);background:var(--g-50)}

.po-havuz{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-top:16px}
.po-kutu{display:flex;flex-direction:column;gap:3px;padding:12px 14px;
  background:var(--g-50);border:1px solid var(--line);border-radius:var(--r-ctrl)}
.po-kutu .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  font-weight:600}
.po-kutu .v{font-family:'Archivo';font-size:19px;font-weight:700;color:var(--ink)}
.po-kutu.vurgu{background:var(--g-100);border-color:var(--g-400)}
.po-kutu.vurgu .v{color:var(--g-700)}
.po-oran-alan{display:flex;align-items:center;gap:6px}
.po-oran-alan input{width:78px;height:34px;text-align:right;font-family:'Archivo';
  font-size:17px;font-weight:700;padding:0 8px}
.po-oran-alan span{font-family:'Archivo';font-size:17px;font-weight:700;color:var(--muted)}

.po-tumune{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding:12px 14px;background:var(--amber-100);border:1px solid #e8d3a8;
  border-radius:var(--r-ctrl)}
.po-tumune-et{font-size:12.5px;font-weight:700;color:#7a5200;white-space:nowrap}
.po-tumune input{width:auto;flex:0 1 160px;min-width:0;height:36px}
.po-tumune input[name=tumune_aciklama]{flex:1 1 220px}

.po-sayi{text-align:center;height:36px;font-variant-numeric:tabular-nums}
tr.po-iptal td{opacity:.5;text-decoration:line-through}
tr.po-iptal td:last-child{text-decoration:none}

/* ============================================================================
   KATMAN DÜZENİ (z-index) — TEK KAYNAK (2026-09-04)

   Sorun: sayfa içindeki açılır paneller yapışkan ÜST BARIN ÜSTÜNE çıkıyordu.
   Üst bar z-index:30; takvim 50, araç/il-ilçe/öneri seçicileri 60, cari satır
   menüsü ve ses analizi yapışkan başlığı 30 idi. Panel açıkken sayfa biraz
   kaydırılınca panel üst barın önüne geçiyor, üst barı altında bırakıyordu.

   KURAL: sayfa İÇERİĞİNE ait hiçbir katman üst barın üstüne çıkmaz.
   Üste çıkması gerekenler yalnızca tam ekran örtüler (bekleme, PDF, modal).

     10   normal içerik
     25   sayfa içi açılır paneller  ← takvim, seçiciler, satır menüleri
     30   yapışkan üst bar
     44   mobil menü karartması (üst barın ALTINDAN başlar)
     45   mobil menü çekmecesi
    100   bekleme örtüsü
    120   PDF görüntüleyici
    200   modal pencereler
   1200+  proje onay / evrak üretim pencereleri

   Yeni bir açılır panel eklerken --z-acilir kullan; sayı yazma.
   ============================================================================ */
:root{
  --z-icerik:10;
  --z-acilir:25;
  --z-ustbar:30;
  --z-cekmece-ortu:44;
  --z-cekmece:45;
  --z-bekleme:100;
  --z-pdf:120;
  --z-modal:200;
}

/* Sayfa içi açılır paneller — hepsi üst barın ALTINDA */
.dr-cal,        /* tarih aralığı takvimi (ortak bileşen) */
.ta-cal,
.as-panel,      /* araç seçici (marka/model) */
.ts-panel,      /* il / ilçe / vergi dairesi seçici */
.ao-liste{      /* randevu araç öneri kutusu */
  z-index:var(--z-acilir);
}

/* Cari satır menüsü: üst barla AYNI değerdeydi (30); eşitlikte DOM'da sonra
   gelen kazandığı için üst barın önüne geçiyordu. */
.cd-menu-ic{z-index:var(--z-acilir)}

/* Ses analizi detayındaki yapışkan başlık: top:0 ile üst barın tam üstüne
   yapışıyor ve aynı z-index'le onu örtüyordu. Artık üst barın ALTINA
   yapışıyor ve altında kalıyor. */
.ad-stickybar{top:var(--top-h);z-index:var(--z-acilir)}

/* Prim ekranı — "Ara" düğmesi tarih seçicinin yanında, aynı hizada */
.po-ara{width:100%;justify-content:center}

/* ---------------------------------------------------------------------------
   TABLO HİZALAMA VE TOPLAM SATIRI (2026-09-04)

   İki sessiz eksik vardı:
   1) `class="c"` (ortala) yalnız `.stok-tablo` içinde tanımlıydı. Diğer 13
      ekranda hiçbir şey yapmıyordu — başlık "ortala" diyor, hücre sola
      yaslı çiziliyordu.
   2) `tfoot` için stil HİÇ yoktu. Toplam satırı padding'siz, hizasız ve
      gövdeden ayrışmadan çiziliyordu; sütunlar iç içe girmiş görünüyordu.
--------------------------------------------------------------------------- */
thead th.c,tbody td.c,tfoot td.c{text-align:center}
tfoot td.r{text-align:right}
tfoot td{padding:13px 14px;font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--g-50);border-top:2px solid var(--line)}

/* Prim: dönem notu tam genişliğe yayılmasın (eskiden 2'li ızgaradaydı). */
.po-notu{margin-top:12px;max-width:520px}
/* Para sütunu sağa yaslı — rakamlar basamak basamak hizalansın. */
.po-sayi.po-para{text-align:right}

/* ---------------------------------------------------------------------------
   PRİM EKRANI — dikey ritim ve dağıtım dışı listesi (2026-09-04)

   `.card` kendi başına alt boşluk taşımıyor; boşluğu `.pr-form .card` kuralı
   veriyordu ve bu sayfa o sınıfı kullanmıyordu. Sonuç: adalar dibe dibe,
   düğmeler adanın kenarına yapışık. Ritim burada tek yerden kuruluyor.
--------------------------------------------------------------------------- */
#primForm > .card{margin-bottom:18px}
#primForm .form-foot{margin-top:0;padding-top:0;border-top:0}
.po-gecmis{margin-top:18px}

.po-haric{display:flex;flex-wrap:wrap;gap:10px}
.po-haric-kisi{display:flex;align-items:center;gap:12px;
  padding:8px 10px 8px 14px;background:var(--g-50);
  border:1px solid var(--line);border-radius:var(--r-ctrl)}
.po-haric-kisi>span{font-size:13.5px;font-weight:600;color:var(--ink)}

/* Satırdaki × — kişiyi bu dağıtımın dışına alır (kalıcı değil). */
.po-cikar{border:0;background:none;cursor:pointer;padding:0 5px;margin-left:2px;
  font-size:16px;line-height:1;color:var(--muted);border-radius:5px}
.po-cikar:hover{color:var(--red);background:var(--red-100)}

/* Maaş listesi: banka bilgisi eksik olan satır göze çarpsın (2026-09-04). */
tbody tr.ms-eksik td{background:var(--red-100)}
.ms-uyari{font-size:11.5px;font-weight:600;color:var(--red);margin-top:2px}

/* ===========================================================================
   MAAŞ ÖDEMESİ (2026-09-04)

   Görev ayrımı ekranda da görünür: onaylayan / dosyayı alan / ödemeyi yapan
   üç ayrı adım. Renkler durum anlamı taşır — tamamlanan yeşil, bekleyen nötr.
   =========================================================================== */

/* --- Üç adımlı akış şeridi --- */
.ms-akis{display:flex;align-items:stretch;gap:0;margin-bottom:18px;padding:16px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow)}
.ms-adim{display:flex;align-items:center;gap:11px;min-width:0;flex:0 1 auto}
.ms-adim>div{min-width:0}
.ms-adim b{display:block;font-size:13px;font-weight:700;color:var(--faint);
  white-space:nowrap}
.ms-adim span:not(.ms-nokta){display:block;font-size:11.5px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-adim.tamam b{color:var(--ink)}
.ms-adim.tamam span:not(.ms-nokta){color:var(--muted)}
.ms-nokta{flex:none;width:30px;height:30px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
  background:var(--bg);border:1px solid var(--line);color:var(--faint)}
.ms-nokta svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ms-adim.tamam .ms-nokta{background:var(--g-600);border-color:var(--g-600);color:#fff}
.ms-cizgi{flex:1 1 20px;min-width:16px;align-self:center;height:2px;
  margin:0 14px;background:var(--line);border-radius:2px}
.ms-cizgi.tamam{background:var(--g-300)}

/* --- Düzeltme bandı --- */
.ms-duzeltme{display:flex;gap:13px;margin-bottom:18px;padding:14px 17px;
  background:var(--amber-100);border:1px solid #e8d3a8;border-radius:var(--r-card)}
.ms-duzeltme>svg{flex:none;width:21px;height:21px;margin-top:1px;stroke:var(--amber);
  stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ms-duzeltme b{font-size:13.5px;color:#7a5200}
.ms-duzeltme p{margin:3px 0 0;font-size:12.5px;line-height:1.55;color:#7a5200}

/* --- Alt eylem şeridi --- */
.ms-eylemler{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2)}
.ms-eylemler form{display:flex;gap:8px;margin:0}
.ms-eylemler .ms-geri{flex:1 1 300px;min-width:0}
.ms-eylemler .ms-geri input{flex:1 1 auto;min-width:0;height:38px}

/* --- Geçmiş tablosundaki durum rozeti --- */
.ms-rozet{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.01em}
.ms-onaylandi{background:var(--b-100);color:var(--b-700)}
.ms-dosya_alindi{background:var(--amber-100);color:var(--amber)}
.ms-odendi{background:var(--g-100);color:var(--g-700)}
.ms-duzeltildi{background:var(--slate-100);color:var(--slate)}
.ms-iptal{background:var(--red-100);color:var(--red)}

@media (max-width:820px){
  /* Dar ekranda adımlar alt alta; bağlantı çizgisi dikey olur. */
  .ms-akis{flex-direction:column;gap:0;padding:14px 16px}
  .ms-adim{flex:none}
  .ms-cizgi{flex:none;width:2px;height:16px;margin:5px 0 5px 14px;align-self:flex-start}
  .ms-adim b,.ms-adim span:not(.ms-nokta){white-space:normal}
}

/* Kutu içindeki uzun kod (IBAN, dosya adı) 19px başlık puntosuyla taşıyordu. */
.po-kutu .v.kod{font-size:12.5px;line-height:1.5;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;word-break:break-all}

/* ===========================================================================
   DEVAM BİLDİRİMLERİ (2026-09-04)
   =========================================================================== */
.db-rozet{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:700;white-space:nowrap}
.db-gec_giris{background:var(--amber-100);color:var(--amber)}
.db-erken_cikis{background:var(--amber-100);color:var(--amber)}
.db-gelmedi{background:var(--red-100);color:var(--red)}
.db-giris_yok,.db-cikis_yok{background:var(--slate-100);color:var(--slate)}
.db-kabul{background:var(--g-100);color:var(--g-700)}
.db-red{background:var(--red-100);color:var(--red)}
.db-bekliyor{background:var(--slate-100);color:var(--slate)}

.db-sms{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:700;white-space:nowrap;
  background:var(--slate-100);color:var(--slate)}
.db-sms-gonderildi{background:var(--g-100);color:var(--g-700)}
.db-sms-telefon_yok,.db-sms-hata{background:var(--red-100);color:var(--red)}

.db-aciklama{font-size:13px;line-height:1.5;max-width:340px;
  overflow-wrap:anywhere}
.db-karar{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.db-karar input{height:32px;font-size:12.5px}
.db-saat{text-align:center;font-variant-numeric:tabular-nums}
.db-dugmeler{display:flex;gap:6px}
.db-dugmeler .btn{flex:1 1 0;justify-content:center}

/* Ayarlar sayfasındaki mesai saati ızgarası */
.db-ayar-uclu{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:700px){.db-ayar-uclu{grid-template-columns:1fr}}

/* Menüdeki sayı rozeti (karar bekleyen devam bildirimi). */
.nav-say{margin-left:auto;min-width:20px;height:20px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);background:var(--red);color:#fff;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.db-not{width:100%}

/* ---------------------------------------------------------------------------
   ÜST BARIN ALTINA GİRME (2026-09-04)

   Üst bar sayfanın üstüne yapışık duruyor. Sayfa içi bir bağlantıya (#id)
   atlandığında ya da tarayıcı bir alana kendiliğinden kaydırdığında hedef
   satır barın ALTINDA kalıyor ve yazı yarım görünüyordu. Kaydırma hedefine
   bar yüksekliği kadar pay bırakılıyor.
--------------------------------------------------------------------------- */
[id]{scroll-margin-top:calc(var(--top-h) + 14px)}
:target{scroll-margin-top:calc(var(--top-h) + 14px)}

/* ---------------------------------------------------------------------------
   PROJE FORMU — fatura seçimi (2026-09-04)
   Bu araca kesilmiş faturalar listelenir; kullanıcı hangisini kullanacağını
   seçer. Seçilen faturanın tarihi proje tarihi olur.
--------------------------------------------------------------------------- */
.pf-fatura{display:flex;flex-direction:column;gap:8px;max-height:340px;
  overflow-y:auto;padding:2px}
.pf-fat{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-ctrl);
  background:var(--card);cursor:pointer}
.pf-fat:hover{border-color:var(--g-400);background:var(--g-50)}
.pf-fat.secili{border-color:var(--g-600);background:var(--g-50);
  box-shadow:0 0 0 1px var(--g-600)}
.pf-fat input{width:17px;height:17px;flex:none;margin:0}
.pf-fat-ana{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-fat-ana b{font-size:13.5px;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-fat-ana em{font-style:normal;font-size:12px;color:var(--muted)}
.pf-fat-etiket{flex:none;display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.pf-fat-etiket i{font-style:normal;font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--g-100);color:var(--g-700);white-space:nowrap}
.pf-fat-etiket i.yok{background:var(--amber-100);color:var(--amber)}
.pf-fat-yok .pf-fat-ana b{color:var(--muted);font-weight:600}
@media (max-width:640px){
  .pf-fat{flex-wrap:wrap}
  .pf-fat-etiket{width:100%;justify-content:flex-start;padding-left:29px}
}

/* Fatura satırındaki kalem dökümü ve "yeni fatura kes" satırı (2026-09-04). */
.pf-fat-bas{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pf-kalemler{display:flex;flex-direction:column;gap:2px;margin-top:6px;
  padding-top:6px;border-top:1px dashed var(--line)}
.pf-kalem{display:flex;justify-content:space-between;gap:14px;
  font-size:12px;color:var(--ink-2)}
.pf-kalem>span{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pf-kalem>b{flex:none;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--muted)}

.pf-fat-yeni{text-decoration:none;color:inherit;border-style:dashed}
.pf-fat-yeni:hover{border-style:solid}
.pf-yeni-ikon{flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--g-100);color:var(--g-700)}
.pf-yeni-ikon svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.6;
  fill:none;stroke-linecap:round}
.pf-fat-ok{flex:none;color:var(--faint)}
.pf-fat-ok svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.pf-kalem-yok{font-size:11.5px;font-style:italic;color:var(--faint)}



/* ###########################################################################
   CANDAN TASARIM SİSTEMİ — RAFİNASYON (2026-09-05)

   NEDEN SONA EKLENDİ
   Custom property'ler kullanım anında çözülür; dosyanın SONUNDA tanımlanan
   token'lar yukarıdaki kuralları da besler. Aynı özgüllükteki bildirimlerde
   SON yazan kazandığı için bileşen rafinasyonları da buradan yapılıyor.
   Böylece dosyanın ortasında kesip biçmeye gerek kalmıyor (geçmişte sessiz
   CSS kaybına yol açan yöntem).

   NE DEĞİŞMEDİ
   Marka renkleri, ekran yapısı, sınıf adları, JavaScript kancaları ve
   [hidden] davranışı aynı. Bu blok yalnız ÖLÇÜ, RİTİM, YÜZEY ve DURUM
   dilini tek elden toparlıyor.
   ########################################################################### */

:root{
  /* --- BOŞLUK ÖLÇEĞİ (4'ün katları) ------------------------------------
     Aynı rolün her ekranda farklı piksel almasının önüne geçer. */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px;

  /* --- YARIÇAP ---------------------------------------------------------- */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px;
  --r-ctrl:10px;          /* kontroller: buton, input, select */
  --r-card:14px;          /* yüzeyler: kart, tablo kabı, panel */
  --r-pill:999px;

  /* --- YÜKSEKLİK (elevation) -------------------------------------------
     Tek gölge yerine dört kademe: yüzey → kalkık → açılır → modal. */
  --sh-1:0 1px 2px rgba(16,40,25,.04), 0 1px 3px rgba(16,40,25,.05);
  --sh-2:0 2px 4px rgba(16,40,25,.05), 0 6px 16px rgba(16,40,25,.07);
  --sh-3:0 6px 14px rgba(16,40,25,.08), 0 18px 40px rgba(16,40,25,.11);
  --sh-4:0 24px 64px rgba(16,40,25,.22);
  --shadow:var(--sh-1);   /* eski ad korunuyor */

  /* --- TİPOGRAFİ ÖLÇEĞİ ------------------------------------------------- */
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13.5px;
  --fs-md:15px;   --fs-lg:17px;   --fs-xl:21px; --fs-2xl:25px;
  --lh-sik:1.35;  --lh-normal:1.55;

  /* --- ANLAMSAL TAKMA ADLAR --------------------------------------------
     Renk KİMLİĞİ değişmiyor; rollere ad veriliyor ki yeni ekranlar doğru
     tonu tahmin etmek zorunda kalmasın. */
  --surface:var(--card);
  --surface-2:#f7faf8;          /* kart içi ikincil yüzey, tablo başlığı */
  --surface-sunken:var(--bg);
  --border:var(--line);
  --border-2:var(--line-2);
  --border-strong:#d6ded8;
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-muted:var(--muted);
  --text-faint:var(--faint);
  --primary:var(--g-600);
  --primary-hover:var(--g-700);
  --primary-soft:var(--g-100);
  --primary-tint:var(--g-50);
  --success:var(--g-700);       --success-soft:var(--g-100);
  --warning:var(--amber);       --warning-soft:var(--amber-100);
  --danger:var(--red);          --danger-soft:var(--red-100);
  --info:var(--b-700);          --info-soft:var(--b-100);
  --neutral:var(--slate);       --neutral-soft:var(--slate-100);

  /* --- HAREKET ---------------------------------------------------------- */
  --gecis:.15s cubic-bezier(.4,0,.2,1);
  --halka:0 0 0 3px var(--g-100);      /* odak halkası */
}

/* Nefes: gövde satır aralığı biraz açıldı, metin daha rahat okunuyor. */
body{line-height:var(--lh-normal)}

/* KLAVYE ODAĞI — her yerde aynı, görünür ve sakin.
   :focus-visible kullanılıyor: fareyle tıklayanda halka çıkmaz. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
summary:focus-visible{outline:2px solid var(--g-500);outline-offset:2px;
  border-radius:var(--r-xs)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;
    animation-duration:.01ms !important}
}

/* ---------------------------------------------------------------------------
   SAYFA BAŞLIĞI — hiyerarşi
   Başlık büyüdü, kılavuz satırı küçüldü ve sakinleşti; aksiyonlar sağda
   hizalı. Başlıkla içerik arasındaki boşluk ölçeğe bağlandı.
--------------------------------------------------------------------------- */
.main{padding:var(--sp-6) var(--sp-7) var(--sp-9)}
.crumb{color:var(--text-faint);font-size:var(--fs-sm);font-weight:500;
  margin-bottom:var(--sp-2);letter-spacing:.01em}
.crumb a{color:var(--text-muted)}
.crumb a:hover{color:var(--primary-hover)}
.page-head{align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6)}
h1{font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.022em}
h1 .sub{display:inline-block;margin-left:var(--sp-3);font-size:var(--fs-base);
  font-weight:500;color:var(--text-muted)}
h2{font-size:var(--fs-lg);letter-spacing:-.015em}
h3{font-size:var(--fs-md)}

/* ---------------------------------------------------------------------------
   BUTONLAR — ağırlık hiyerarşisi + basma geri bildirimi
   primary (dolu) > blue (dolu, rapor) > ghost (çerçeveli) > subtle (yalın)
--------------------------------------------------------------------------- */
.btn{height:38px;padding:0 var(--sp-4);border-radius:var(--r-ctrl);
  font-size:var(--fs-base);gap:var(--sp-2);letter-spacing:.005em;
  transition:background var(--gecis),border-color var(--gecis),
             box-shadow var(--gecis),transform .06s ease}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn-primary{box-shadow:0 1px 2px rgba(16,40,25,.14)}
.btn-primary:hover{background:var(--primary-hover);
  box-shadow:0 2px 6px rgba(16,40,25,.18)}
.btn-ghost{background:var(--surface);color:var(--text-2);
  border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--primary-tint);border-color:var(--g-400);
  color:var(--primary-hover)}
/* Üçüncül eylem: çerçevesiz, en hafif. "Vazgeç" gibi geri adımlar için. */
.btn-subtle{background:transparent;color:var(--text-muted);border-color:transparent}
.btn-subtle:hover{background:var(--surface-2);color:var(--text-2)}
.btn-sm{height:32px;padding:0 var(--sp-3);font-size:var(--fs-sm)}
.btn-lg{height:46px;padding:0 var(--sp-6);font-size:var(--fs-md)}
.btn:disabled{opacity:.5}

/* Satır içi ikon eylemleri */
.iact{width:32px;height:32px;border-radius:var(--r-sm);
  transition:background var(--gecis),border-color var(--gecis)}
.iact:active{transform:translateY(1px)}

/* ---------------------------------------------------------------------------
   YÜZEYLER — kart, panel
   Gölge hafifledi; ayrımı asıl olarak ince kenarlık yapıyor. Başlık bandı
   daha sakin: büyük harf değil, ağırlık ve renkle ayrışıyor.
--------------------------------------------------------------------------- */
.card{border-radius:var(--r-card);box-shadow:var(--sh-1);
  border-color:var(--border)}
.card-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border-2)}
.card-head h2,.card-head h3{font-size:var(--fs-md);font-weight:700;
  letter-spacing:-.01em}
.card-body{padding:var(--sp-5)}
.form-card{border-radius:var(--r-card);padding:var(--sp-6);box-shadow:var(--sh-1)}
.filters{border-radius:var(--r-card);padding:var(--sp-4) var(--sp-5);
  gap:var(--sp-3);margin-bottom:var(--sp-4);box-shadow:var(--sh-1)}
.filters .fld > label{font-size:var(--fs-xs);color:var(--text-muted);
  font-weight:600;letter-spacing:.02em}

/* ---------------------------------------------------------------------------
   FORM KONTROLLERİ
   Girdi zemini BİLEREK yeşil (--g-50), odakta beyaza dönüyor: Candan'ın
   kendi dili bu, 2026-09-05'te beyaza çeken deneme geri alındı.
   DİKKAT: `display` BİLEREK yazılmıyor — [hidden] kuralını ezmemek için.
--------------------------------------------------------------------------- */
.form-control,.form-select,input[type=text],input[type=search],input[type=number],
input[type=password],input[type=email],input[type=date],input[type=time],
select,textarea{
  height:38px;border-radius:var(--r-ctrl);border-color:var(--border-strong);
  background:var(--g-50);font-size:var(--fs-base);color:var(--text);
  padding:0 var(--sp-3);
  transition:border-color var(--gecis),box-shadow var(--gecis)}
textarea,textarea.form-control{padding:var(--sp-3);line-height:var(--lh-normal)}
.form-control:hover,input:hover,select:hover,textarea:hover{
  border-color:var(--g-400)}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--g-500);background:#fff;box-shadow:var(--halka)}
.form-control:disabled,input:disabled,select:disabled,textarea:disabled,
input[readonly],textarea[readonly]{
  background:var(--surface-2);color:var(--text-muted);
  border-color:var(--border);cursor:not-allowed}
.form-label{font-size:var(--fs-sm);color:var(--text-2);font-weight:600;
  margin-bottom:var(--sp-2);letter-spacing:.005em}
.form-text{font-size:var(--fs-xs);color:var(--text-faint);margin-top:var(--sp-1);
  line-height:1.5}
.fld > label,.fld-col > label{font-size:var(--fs-sm);color:var(--text-2);
  font-weight:600}
.fld > small,.fld-col > small{font-size:var(--fs-xs);color:var(--text-faint);
  line-height:1.5}
.form-grid{gap:var(--sp-4)}
.fld-col{gap:var(--sp-2)}
/* Hata durumu — kenarlık + halka aynı dilde */
.is-invalid,input.is-invalid,select.is-invalid,textarea.is-invalid{
  border-color:var(--danger);background:var(--g-50)}
.is-invalid:focus{border-color:var(--danger);
  box-shadow:0 0 0 3px var(--danger-soft)}
.form-foot{margin-top:var(--sp-6);padding-top:var(--sp-5);gap:var(--sp-3);
  border-top:1px solid var(--border-2)}

/* ---------------------------------------------------------------------------
   TABLOLAR — Candan'ın en yoğun kullanılan yüzeyi
   Başlık bandı sakinleşti, satır yüksekliği ferahladı, hover hafifledi.
   Veri yoğunluğu AZALTILMADI: yalnız gürültü azaldı.
--------------------------------------------------------------------------- */
.tbl-wrap{border-radius:var(--r-card);box-shadow:var(--sh-1)}
thead th{background:var(--surface-2);color:var(--text-muted);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
tbody td{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base);
  border-bottom:1px solid var(--border-2);line-height:var(--lh-sik)}
/* İlk ve son sütun kenara yapışmasın */
thead th:first-child,tbody td:first-child,tfoot td:first-child{
  padding-left:var(--sp-5)}
thead th:last-child,tbody td:last-child,tfoot td:last-child{
  padding-right:var(--sp-5)}
tbody tr{transition:background var(--gecis)}
tbody tr.clickable:hover td,tbody tr.clickable.row-hover td{
  background:var(--primary-tint)}
.cell-sub{color:var(--text-muted);font-size:var(--fs-sm);margin-top:2px;
  line-height:1.4}
tfoot td{background:var(--surface-2)}
.tbl-foot,.pagination{background:var(--surface-2);
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border)}
.pg{border-radius:var(--r-sm);min-width:32px;height:32px;
  transition:background var(--gecis),border-color var(--gecis),color var(--gecis)}
.pg:hover{border-color:var(--g-400);background:var(--primary-tint)}
.pg-adet select{height:32px;border-radius:var(--r-sm);
  border-color:var(--border-strong)}

/* ---------------------------------------------------------------------------
   BOŞ DURUM — çıplak bir satır yerine ölçülü bir bildirim
--------------------------------------------------------------------------- */
.empty{padding:var(--sp-9) var(--sp-4);color:var(--text-muted);
  font-size:var(--fs-base);line-height:1.6}
.empty a{color:var(--primary-hover);font-weight:600;
  border-bottom:1px solid var(--g-300)}
.empty a:hover{border-bottom-color:var(--primary-hover)}

/* ---------------------------------------------------------------------------
   DURUM ROZETLERİ — tek dil
   Aynı anlam her ekranda aynı tonu kullansın diye anlamsal adlar eklendi.
   Eski sınıflar (acik/kapali/bekle...) aynen çalışmaya devam ediyor.
--------------------------------------------------------------------------- */
.pill,.pill-say,.toggle{border-radius:var(--r-pill);font-size:var(--fs-sm);
  padding:4px var(--sp-3);letter-spacing:.005em}
.pill.ok,.pill.basarili{background:var(--success-soft);color:var(--success)}
.pill.uyari{background:var(--warning-soft);color:var(--warning)}
.pill.hata{background:var(--danger-soft);color:var(--danger)}
.pill.bilgi{background:var(--info-soft);color:var(--info)}
.pill.notr{background:var(--neutral-soft);color:var(--neutral)}
.tag{border-radius:var(--r-xs);font-size:var(--fs-xs);padding:3px var(--sp-2)}

/* ---------------------------------------------------------------------------
   BİLDİRİMLER — sol vurgu şeridi, daha okunur gövde
--------------------------------------------------------------------------- */
.alert{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-base);line-height:1.55;margin-bottom:var(--sp-4);
  border-left-width:3px}
.alert-success{border-left-color:var(--g-500)}
.alert-danger{border-left-color:var(--red)}
.alert-info{border-left-color:var(--b-600)}

/* ---------------------------------------------------------------------------
   KATMANLAR — açılır ve modal artık yükseklik ölçeğinden besleniyor
--------------------------------------------------------------------------- */
.dr-cal,.as-panel,.us-panel{box-shadow:var(--sh-3);border-radius:var(--r-lg)}
.mdl{border-radius:var(--r-lg);box-shadow:var(--sh-4)}
.mdl-bas{padding:var(--sp-4) var(--sp-5);border-bottom-color:var(--border-2)}
.mdl-govde{padding:var(--sp-5)}
.modal-kutu{border-radius:var(--r-lg);box-shadow:var(--sh-4)}

/* ---------------------------------------------------------------------------
   KENAR ÇUBUĞU — yapı korunuyor, yalnız ritim ve ayrımlar rafine
--------------------------------------------------------------------------- */
.nav{border-radius:var(--r-sm);transition:background var(--gecis),
  color var(--gecis)}
.nav.active{box-shadow:0 1px 2px rgba(0,0,0,.18)}
.side-g-bas{letter-spacing:.06em}

/* ---------------------------------------------------------------------------
   DAR EKRAN — masaüstü referans; yalnız taşma ve sıkışma düzeltiliyor
--------------------------------------------------------------------------- */
@media (max-width:700px){
  .main{padding:var(--sp-4) var(--sp-4) var(--sp-8)}
  h1{font-size:var(--fs-xl)}
  .page-head{align-items:flex-start;gap:var(--sp-3)}
  .card-body,.form-card{padding:var(--sp-4)}
  .card-head{padding:var(--sp-3) var(--sp-4)}
  thead th:first-child,tbody td:first-child,tfoot td:first-child{
    padding-left:var(--sp-4)}
  thead th:last-child,tbody td:last-child,tfoot td:last-child{
    padding-right:var(--sp-4)}
  .form-grid{grid-template-columns:1fr}
  .filters{padding:var(--sp-3) var(--sp-4)}
  .btn{padding:0 var(--sp-3)}
}

/* ---------------------------------------------------------------------------
   RAFİNASYON EKİ — kalan girdiler de aynı dile geçirildi (2026-09-05)

   Yukarıdaki rafinasyon `input[type=...]` seçicilerini kapsıyordu; TİPSİZ ve
   tel/url/time gibi alanlar eski yeşil zeminde kalmıştı. Aşağıdaki blok
   ÖZGÜLLÜĞÜ 0 olan :where() ile yazılıyor: `.search input` / `.pd-ad-input`
   gibi özel kuralları EZMEZ, yalnız 1698. satırdaki aynı özgüllükteki taban
   kuralı geçersiz kılar (eşitlikte sonra gelen kazanır).
   Mobildeki 16px/44px kuralları `.app` sınıfıyla daha özgül olduğu için
   yerinde kalır — iOS yakınlaştırma koruması bozulmaz.
--------------------------------------------------------------------------- */
:where(input:not([type]),
input[type=tel],input[type=url],input[type=time],input[type=datetime-local],
input[type=month],input[type=week]){
  height:38px;border-color:var(--border-strong);border-radius:var(--r-ctrl);
  background:var(--g-50);font-size:var(--fs-base);color:var(--text)}
:where(input:not([type]),input[type=tel],input[type=url],
input[type=time],input[type=datetime-local]):focus{
  border-color:var(--g-500);background:#fff;box-shadow:var(--halka)}

/* Salt-okunur / kapalı alanlar: "düzenlenemez" sinyali NET olsun.
   --surface-2 fazla açık kalıyordu, düzenlenebilir gibi görünüyordu. */
.form-control:disabled,input:disabled,select:disabled,textarea:disabled,
input[readonly],textarea[readonly]{
  background:var(--neutral-soft);color:var(--neutral);
  border-color:var(--border);box-shadow:none;cursor:default}

/* Üst bardaki arama kutusu diğer girdilerle aynı dilde: yeşil zemin,
   odakta beyaz. */
.search input{background:var(--g-50);border-color:var(--border-strong);
  border-radius:var(--r-ctrl);font-size:var(--fs-base);
  transition:border-color var(--gecis),box-shadow var(--gecis)}
.search input:focus{border-color:var(--g-500);background:#fff;
  box-shadow:var(--halka)}

/* ---------------------------------------------------------------------------
   ETİKETLER SATIR BAŞI YAPMASIN (2026-09-05)
   `.tag` bir ETİKETTİR, cümle değil: dar sütunda bölünmemeli. Örneğin
   "e-Arşiv" tireden bölünüp iki satıra düşüyordu. `.durum-rozet` zaten
   nowrap'ti; bu eksikti.
--------------------------------------------------------------------------- */
.tag,.pill,.pill-say,.toggle{white-space:nowrap}

/* Giden faturalar — içerik sütunu: iki etiket alt alta, sola hizalı */
.fl-icerik{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-1)}
.fl-tablo .tag{font-size:11px;padding:2px var(--sp-2)}
/* Aynı dil: iki içerik etiketi de token'lardan besleniyor, kenarlıkları
   ince ve sakin. Öncesinde sert kodlanmış renk ve kalın kenarlık vardı. */
.tag.tag-lpg{background:var(--g-100);color:var(--g-700);
  border:1px solid var(--g-300)}
.tag.tag-servis{background:var(--b-100);color:var(--b-700);
  border:1px solid #bcd4ee}

/* ###########################################################################
   DOKUNMATİK YÜZEYLER — DOCK VE EL TERMİNALİ (2026-09-05)

   Bu iki yüzey sistemin en az düzenli yeriydi. Ölçüldü:
     DOCK          8 ayrı dokunma yüksekliği (74/68/66/56...), 19 font boyutu,
                   12 yarıçap, 31 iç boşluk değeri
     EL TERMİNALİ  13 yükseklik, 11 font boyutu, 6 yarıçap
   Aynı işi yapan iki düğme farklı boyuttaydı; el terminali (iPad) sabit kiosk
   için ölçülmüş değerleri kullandığı için satırlarda düğmeler taşıyordu.

   Aşağıda ÖNCE bir dokunma ölçeği kuruluyor, sonra bileşenler ona bağlanıyor.
   Hiçbir dokunma hedefi 44px'in altına indirilmedi; işlev veya metin
   kaldırılmadı. Yapı, akış ve sınıf adları aynı.
   ########################################################################### */

:root{
  /* Dokunma hedefi ölçeği — dört kademe, hepsi 44px eşiğinin üstünde */
  --dok-xl:72px;   /* ana eylem, plaka alanı */
  --dok-lg:60px;   /* ikincil eylem */
  --dok-md:52px;   /* satır içi eylem */
  --dok-sm:44px;   /* en küçük dokunulabilir öğe (asgari) */
  --dok-r:14px;    /* dokunmatik yüzey yarıçapı */
  --dok-r-sm:10px;
  /* Uzaktan okunacak metin ölçeği */
  --dok-fs-xl:26px; /* plaka */
  --dok-fs-lg:19px; /* düğme / satır başlığı */
  --dok-fs-md:16px; /* gövde */
  --dok-fs-sm:14px; /* yardımcı */
}

/* --- Üst bar ------------------------------------------------------------ */
.kiosk-top{height:72px;padding:0 var(--sp-6);gap:var(--sp-4)}
.kiosk-top::after{height:3px;bottom:-3px}
.kiosk-top .brand-logo{height:42px}
.kiosk-top .kiosk-etiket{font-size:var(--dok-fs-md);padding-left:var(--sp-4)}
.kiosk-body{padding:var(--sp-7) var(--sp-5) var(--sp-9)}
.kiosk-h{font-size:27px;margin:var(--sp-2) 0 var(--sp-6);letter-spacing:-.02em}

/* --- Adım göstergesi ---------------------------------------------------- */
.kiosk-steps{gap:var(--sp-2);margin-bottom:var(--sp-6)}
.kiosk-steps .s{width:48px;height:6px;border-radius:3px}

/* --- Plaka alanı: giriş ve düğme AYNI yükseklikte -----------------------
   Önce 76px input / 74px düğme vardı; iki piksellik fark hizayı bozuyordu. */
.dock-search{gap:var(--sp-3);align-items:stretch}
.dock-search input{height:var(--dok-xl);font-size:var(--dok-fs-xl);
  border-radius:var(--dok-r);padding:0 var(--sp-5);letter-spacing:1px;
  border-color:var(--border-strong);
  transition:border-color var(--gecis),box-shadow var(--gecis)}
.dock-search input:focus{border-color:var(--g-500);box-shadow:0 0 0 4px var(--g-100)}
.dock-search .dock-opt{min-height:var(--dok-xl);height:var(--dok-xl)}

/* --- Büyük dokunmatik düğmeler ------------------------------------------ */
.dock-opt{min-height:var(--dok-xl);min-width:170px;padding:0 var(--sp-6);
  font-size:var(--dok-fs-lg);border-radius:var(--dok-r);gap:var(--sp-2);
  box-shadow:0 1px 3px rgba(16,40,25,.16);
  transition:background var(--gecis),border-color var(--gecis),transform .06s}
.dock-opt:hover,.dock-opt:active{transform:translateY(1px)}
.dock-opt svg{width:20px;height:20px;stroke-width:2}
.dock-opt.sec{min-height:var(--dok-lg);border-color:var(--border-strong);
  box-shadow:none}
.dock-opts{gap:var(--sp-3)}

/* --- Sonuç satırları ----------------------------------------------------
   Satır içindeki eylemler daha küçük bir kademede; iPad'de iki-üç düğme
   yan yana geldiğinde taşmasın diye sarma açık. */
.dock-item{gap:var(--sp-3);border-radius:var(--dok-r);
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-2);flex-wrap:wrap;
  transition:border-color var(--gecis),background var(--gecis)}
.dock-item:hover{transform:none}
.dock-item .n{width:52px;height:52px;border-radius:var(--dok-r-sm);
  font-size:21px}
.dock-item .info{font-size:var(--dok-fs-lg);min-width:0}
.dock-item .info small{font-size:var(--dok-fs-sm);margin-top:3px}
.dock-item .dock-opt{min-height:var(--dok-md);min-width:0;
  padding:0 var(--sp-4);font-size:var(--dok-fs-md);box-shadow:none}
.dock-list{margin-top:var(--sp-5)}

/* --- Plaka rozeti -------------------------------------------------------- */
.kiosk-plaka{border-radius:var(--dok-r);padding:var(--sp-3) var(--sp-4);
  font-size:var(--dok-fs-md);gap:var(--sp-3)}
.kiosk-plaka .pl{font-size:var(--dok-fs-lg);padding:4px var(--sp-3);
  border-radius:var(--dok-r-sm);letter-spacing:.04em}

/* --- El terminali: iPad ölçüsü -----------------------------------------
   Aynı sınıfları kullanıyor ama ekran daha küçük; bir kademe aşağı. */
.el-body .kiosk-h{font-size:23px}
.el-body .dock-search input{height:var(--dok-lg);font-size:22px}
.el-body .dock-search .dock-opt{min-height:var(--dok-lg);height:var(--dok-lg);
  min-width:0;padding:0 var(--sp-5)}
.el-item{gap:var(--sp-2);flex-wrap:wrap}
.el-item .info{font-size:var(--dok-fs-lg)}
.el-item .dock-opt{min-height:var(--dok-sm);font-size:var(--dok-fs-sm);
  padding:0 var(--sp-3)}
.el-cikis{border-radius:var(--dok-r-sm)}
.el-buyuk-btn{border-radius:var(--dok-r);font-size:var(--dok-fs-lg)}

/* --- Dar ekran (iPad dikey / telefon) ----------------------------------- */
@media (max-width:820px){
  .kiosk-top{height:64px;padding:0 var(--sp-4)}
  .kiosk-top .brand-logo{height:34px}
  .kiosk-body{padding:var(--sp-5) var(--sp-4) var(--sp-8)}
  .kiosk-h{font-size:21px}
  /* Plaka alanı ve düğmesi alt alta: yan yana sıkışıp kesilmesin */
  .dock-search{flex-wrap:wrap}
  .dock-search input{flex:1 1 100%;height:var(--dok-lg);font-size:21px}
  .dock-search .dock-opt{flex:1 1 100%;min-height:var(--dok-md);
    height:var(--dok-md);min-width:0}
  .dock-opt{min-width:0;width:100%;justify-content:center}
  .dock-opts{flex-direction:column;align-items:stretch}
  .dock-item{padding:var(--sp-3) var(--sp-4)}
  .dock-item .info{flex:1 1 100%}
  .dock-item .dock-opt{width:auto;flex:1 1 auto}
}

/* Sihirbaz (adım) ekranları da aynı dokunma ölçeğine bağlandı: hizmet
   satırları, kart ve pano başlıkları. Seçili durum artık daha okunur. */
.dock-svc{min-height:var(--dok-lg);border-radius:var(--dok-r);
  padding:0 var(--sp-5);gap:var(--sp-3);
  transition:border-color var(--gecis),background var(--gecis),
             box-shadow var(--gecis)}
.dock-svc .name{font-size:var(--dok-fs-md);gap:var(--sp-3)}
.dock-svc .price{font-size:var(--dok-fs-md)}
.dock-svc input[type=checkbox]{width:24px;height:24px}
.dock-svc.secili{box-shadow:inset 3px 0 0 var(--g-600),0 0 0 1px var(--g-300)}
.dock-alan{gap:var(--sp-2)}
.kiosk-kart{margin-bottom:var(--sp-4)}
.kiosk-pano-bas,.el-pano-bas{font-size:var(--dok-fs-lg);margin-top:var(--sp-6);
  margin-bottom:var(--sp-3)}
@media (max-width:820px){
  .dock-svc{min-height:var(--dok-md);padding:var(--sp-3) var(--sp-4);
    flex-wrap:wrap}
  .dock-svc .name{flex:1 1 100%}
}

/* Parça kütüphanesi — tank ölçüsü satır içi düzeltme (2026-09-05) */
.pr-olcu-form{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.pr-olcu-form input{width:78px;height:32px;font-size:var(--fs-sm);
  text-align:center;font-variant-numeric:tabular-nums}
.pr-olcu-form span{color:var(--text-faint);font-weight:600}
.pr-olcu-eksik{font-style:normal;font-size:var(--fs-xs);font-weight:600;
  color:var(--warning);background:var(--warning-soft);padding:2px var(--sp-2);
  border-radius:var(--r-pill)}

/* ---------------------------------------------------------------------------
   PROJELENDİRME UYGUNLUĞU — hesabı ortala (2026-09-05)
   Tablo 460px'te sabit; kart genişledikçe sola yapışıp yalnız kalıyordu.
   `.pr-kartlar` içinde tablo zaten tam genişlik (max-width:none), orada
   ortalamanın etkisi yok — kural yine de zararsız.
--------------------------------------------------------------------------- */
.pr-hesap .pr-hesap-tablo{margin-left:auto;margin-right:auto}
.pr-hesap .pr-yeni-kutle{max-width:460px;margin-left:auto;margin-right:auto;
  text-align:center}

/* Sayfa incelemesi: geniş içerik yalnız kendi alanında kayar (2026-09-06). */
.app .tbl-wrap{overflow-x:auto;max-width:100%;min-width:0}
.app .main:has(#ayar-orta){width:100%;min-width:0}
.app .pos-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.app .pos-grid>*{min-width:0;max-width:100%}
.app .fatura-islemler{flex-wrap:wrap}
.app .yag-paket-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.app .yag-paket-form .sf-fld{min-width:0;width:auto;max-width:none}
.app .yag-paket-form input,.app .yag-paket-form select{width:100%;min-width:0}
.app .yag-paket-form .sf-btn{grid-column:1/-1;justify-self:start}
.app .pr-kartlar{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.app .pr-kartlar>.card,.app .pr-iki-sutun>.card{min-width:0}
.app .pr-veri,.app .pr-hesap-tablo{min-width:0;width:100%;table-layout:fixed}
.app .pr-veri td,.app .pr-hesap-tablo td{white-space:normal;overflow-wrap:anywhere}
.app .pr-veri td:first-child,.app .pr-hesap-tablo td:first-child{padding-right:12px}
.app .pr-parcalar{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.app .pr-parcalar .pr-satir-form{flex-wrap:wrap}
.app .pr-parcalar .pr-satir-form input,.app .pr-parcalar .pr-satir-form select{min-width:0;max-width:100%;flex:1 1 140px}
.app .pr-parcalar .pr-veri td:first-child{width:55%}
.app .pr-parcalar .pr-veri td:last-child{width:36px}
.app .pr-olcu-form{flex-wrap:wrap}
.app .pr-olcu-form input{min-width:0;max-width:78px;flex:0 1 78px}
.app .sk-telefon{white-space:nowrap;min-width:130px}
/* Sabit düğmeler içerikten ayrı bir alt şeritte; son satır da erişilebilir. */
.kiosk:has(.dock-fab){padding-bottom:112px}
.kiosk .dock-fab{left:0;right:0;bottom:0;flex-direction:row;justify-content:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:14px;
  background:var(--card);border-top:1px solid var(--line)}
.kiosk .dock-fab a{flex:0 0 68px}
@media(max-width:920px){
  .app .pos-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .app .yag-paket-form{grid-template-columns:minmax(0,1fr)}
  .app .pu-ara input{flex:0 0 auto;min-height:44px}
}
.app .mm-kart{min-width:0;max-width:100%}
.kiosk:has(.dock-fab){padding-bottom:calc(112px + env(safe-area-inset-bottom))}
/* İki/üç sütunlu ayar tabloları geniş liste tablosu değildir. */
.app .main:has(#ayar-orta) .card-body>table{min-width:0;width:100%;table-layout:fixed}
.app .main:has(#ayar-orta) .card-body>table th,
.app .main:has(#ayar-orta) .card-body>table td{white-space:normal;overflow-wrap:anywhere}
/* Dikey görev formunda flex-basis metin kutusunun yüksekliğini ezmesin. */
.el-gorev-form input{min-height:56px}
@media(max-width:520px){.el-gorev-form input{flex:0 0 auto}}

/* Web talepleri: uzun müşteri mesajları bileşen sınırında kalsın. */
.web-talep-metin { overflow-wrap: anywhere; }
.mdl-ortu.web-talep-modal{align-items:center}
.web-talep-modal .mdl{max-width:920px;max-height:calc(100dvh - 32px);overflow-y:auto}
.web-talep-modal .mdl-bas{position:sticky;top:0;z-index:2;background:var(--card)}
.web-talep-modal .form-card{margin-top:16px}
@media(max-width:640px){.web-talep-modal .mdl{max-height:calc(100dvh - 24px)}}

/* Giriş alanları: sondaki ortak form kuralları ikon boşluklarını ezmemeli. */
.auth .auth-input > svg{z-index:1}
.auth .auth-input input{
  height:50px;
  padding-left:44px;
  padding-right:14px;
  font-size:15px;
}
.auth .auth-input input[type=password],
.auth .auth-input input#parola{padding-right:50px}
.auth .auth-goz{top:50%;z-index:2;transform:translateY(-50%)}

/* SİSTEM uygulama kimliği; üstteki Candan logosu kendi konumunu korur. */
.auth-sistem-logo{display:block;width:140px;max-width:100%;height:auto;margin:0 auto 16px}

/* Ana sayfa — günlük servis özeti */
.gun-pano{max-width:1500px;margin:0 auto}
.gun-baslik{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4px 0 26px;flex-wrap:wrap}
.gun-ust{font-size:10px;letter-spacing:.13em;font-weight:700;color:var(--g-700);margin-bottom:8px}
.gun-baslik h1{font-size:32px;letter-spacing:-.035em}
.gun-baslik p{color:var(--muted);margin-top:5px}
.gun-eylemler{display:flex;flex-wrap:wrap;gap:10px}
.gun-sayilar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.gun-sayi{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--g-500);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow)}
.gun-sayi>span{font-weight:600;color:var(--ink-2)}
.gun-sayi strong{font-size:40px;line-height:1.2;margin:10px 0;color:var(--g-800);font-variant-numeric:tabular-nums}
.gun-sayi small{color:var(--muted);font-size:12px}
.gun-paneller{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;align-items:start}
.gun-panel{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.gun-panel:only-child{grid-column:1/-1}
.gun-panel-bas{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.gun-panel-bas h2{font-size:17px}.gun-panel-bas p{color:var(--muted);font-size:12px;margin-top:4px}
.gun-panel-bas>a{color:var(--g-700);font-size:13px;font-weight:600;padding:8px 0}
.gun-randevu{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line-2)}
.gun-randevu:last-child,.gun-is:last-child{border-bottom:0}
.gun-randevu:hover,.gun-is:hover,.gun-sayi:hover{background:var(--g-50)}
.gun-saat{flex:0 0 62px;align-self:flex-start;padding-top:3px}.gun-saat b{font-size:18px;font-variant-numeric:tabular-nums}.gun-saat small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.gun-rdv-bilgi{flex:1;min-width:0;display:flex;align-items:flex-start;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.gun-rdv-bilgi>span:not(.gun-durum){color:var(--ink-2);font-size:13px}.gun-rdv-bilgi small{color:var(--muted)}
.gun-durum{display:inline-block;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;line-height:1.4}
.gun-geldi{background:var(--g-100);color:var(--g-800)}.gun-teyit{background:var(--b-100);color:var(--b-700)}.gun-bekliyor{background:var(--amber-100);color:var(--amber)}
.gun-is{display:block;padding:18px 22px;border-bottom:1px solid var(--line-2)}
.gun-is-ust,.gun-is-alt{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.gun-plaka{font-size:15px;letter-spacing:.025em}.gun-is-alt{font-size:12px;color:var(--muted);margin-top:8px}.gun-is p{color:var(--ink-2);font-size:12px;margin-top:7px;overflow-wrap:anywhere}
.gun-bos{padding:38px 24px;color:var(--ink-2)}.gun-bos p{margin-top:7px;color:var(--muted);font-size:13px}
.rdv-sonuc>p{margin:8px 0;color:var(--muted)}.rdv-sonuc-secimler{display:grid;gap:14px;margin:22px 0}.rdv-sonuc-secimler form{padding:18px;background:var(--g-50);border:1px solid var(--line);border-radius:10px}.rdv-sonuc-secimler .btn{min-height:46px;white-space:normal;text-align:left}.rdv-sonuc-secimler p{font-size:12px;color:var(--muted);margin-top:8px}
.appt.geldi{background:var(--g-100);border-color:var(--g-500);color:var(--g-700);opacity:.3}
@media(max-width:1100px){.gun-paneller{grid-template-columns:1fr}}
@media(max-width:560px){.gun-baslik h1{font-size:27px}.gun-sayilar{grid-template-columns:1fr;gap:10px}.gun-sayi{padding:14px 18px}.gun-sayi strong{font-size:32px;margin:5px 0}.gun-panel-bas,.gun-randevu,.gun-is{padding:16px}.gun-eylemler .btn{min-height:44px}.gun-randevu{gap:10px}}
.appt-wrap>a.appt-sil{position:absolute;top:27px;right:3px}
/* Gelen araçtaki durum satırı için metin aralıkları daha sıkıdır. */
.appt.geldi{padding:2px 8px;gap:0}
.appt.geldi .nm{font-size:12px;line-height:14px}
.appt.geldi>.gun-durum{padding:0;font-size:10px;line-height:12px;flex:none}
.appt.geldi .car{font-size:11px;line-height:14px}

/* Ortak bilgisayarda kişisel kod ve oturum kilidi. */
.oturum-kod{width:100%;min-height:60px;font-size:28px;text-align:center;letter-spacing:.4em;border:1px solid var(--line);border-radius:8px}
/* Günlük özet: altı kart masaüstünde iki dengeli satır oluşturur. */
.gun-sayilar{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.gun-sayilar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gun-sayilar{grid-template-columns:1fr}}

/* Yeni araç formundan kayıtlı müşteri–plaka seçimi. */
.plaka-arama-satir{display:flex;align-items:center;gap:6px;min-width:0}
.plaka-arama-satir input{flex:1;min-width:0;width:0}
.plaka-arama-satir .plaka-arama-dugme{flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:8px;margin:0}
.plaka-arama-dugme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
dialog.plaka-eslesme-pencere{margin:auto;padding:0;border:0;width:calc(100% - 32px);max-width:680px;max-height:85dvh;overflow:auto;color:inherit}
.plaka-eslesme-pencere::backdrop{background:rgba(0,0,0,.45)}
.plaka-eslesme-sonuclar{padding:18px;overflow-wrap:anywhere}
.plaka-eslesme{display:grid;gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.plaka-eslesme .btn,.plaka-eslesme-pencere .modal-bas .btn{min-height:48px;white-space:normal}

/* Müşteri anketi: ortak kart, form ve butonları kullanan tek sütunlu public yüzey. */
.anket-public{padding:24px 16px 40px}
.anket-kapsayici{max-width:600px;margin:auto;overflow-wrap:anywhere}
.anket-marka{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:17px}
.anket-marka .brand-logo{width:210px;height:auto;max-width:100%;display:block}
.anket-public h1{font-size:23px;margin:8px 0 10px}
.anket-public p{margin:8px 0}
.anket-public .btn-lg{height:auto;min-height:46px;padding:12px 20px;white-space:normal;text-align:center}
.anket-karsilama{margin-bottom:18px}
.anket-soru{border:0;min-width:0;margin:0 0 25px;padding:0 0 24px;border-bottom:1px solid var(--line)}
.anket-soru legend,.anket-not-baslik{font-weight:600;font-size:16px;line-height:1.5;margin-bottom:12px;display:block}
.anket-secenekler{display:grid;gap:8px}
.anket-secenekler label{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-ctrl);cursor:pointer}
.anket-secenekler label:has(input:checked){border-color:var(--g-600);background:var(--g-50)}
.anket-secenekler input{accent-color:var(--g-600);width:18px;height:18px;flex-shrink:0}
.anket-yildizlar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.anket-yildizlar label{position:relative;cursor:pointer}
.anket-yildizlar input,.anket-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.anket-yildiz-kutu{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:66px;border:1px solid var(--line);border-radius:var(--r-ctrl);color:var(--muted);background:var(--card)}
.anket-yildiz-kutu>span:first-child{font-size:23px;line-height:1.2}
.anket-yildizlar input:checked+.anket-yildiz-kutu{background:var(--g-50);border:2px solid var(--g-600);color:var(--g-700)}
.anket-yildizlar input:focus-visible+.anket-yildiz-kutu{outline:3px solid var(--b-600);outline-offset:2px}
.anket-public textarea{min-height:140px;resize:vertical}
.anket-public input[type=text],.anket-public textarea{font-size:16px}
.anket-public .errorlist{list-style:none;color:var(--red);margin:8px 0;font-size:13px}
.anket-public #diger-alani{margin-top:12px}
.anket-alt{text-align:center}
.anket-yonetim-kart{margin-bottom:18px}
.anket-yonetim-kart p+p{margin-top:10px}
.anket-ayar{margin-top:14px}
.anket-ayar summary{cursor:pointer;color:var(--g-700)}
.anket-ayar-form{margin-top:12px;max-width:650px}
.anket-ayar-form .btn{margin-top:10px}
.anket-filtre{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}
.anket-filtre input{max-width:300px}.anket-filtre select{width:auto;max-width:100%}
.anket-detay-yanit{margin-top:18px}.anket-yanitlar dt{font-weight:600;margin-top:18px}.anket-yanitlar dt:first-child{margin-top:0}.anket-yanitlar dd{margin-top:5px}.anket-not{overflow-wrap:anywhere}
@media(max-width:420px){.anket-public{padding:16px 10px 28px}.anket-public .card-body{padding:18px 14px}.anket-yildizlar{gap:6px}.anket-public h1{font-size:21px}}

/* Üst barın yerleşimini koru; %25 büyütülen logoyu %10 küçült. */
.app > .topbar .brand-logo{transform:scale(1.125);transform-origin:left center}

/* Dock ve el terminalinde ortak kısayollar sağ altta üst üste yüzer. */
.kiosk .dock-fab{left:auto;right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));flex-direction:column;
  padding:0;background:transparent;border:0}
/* Son içerik, üç düğmenin kapladığı alanın üstüne kaydırılabilsin. */
.kiosk:has(.dock-fab){padding-bottom:calc(264px + env(safe-area-inset-bottom))}

/* Servis ana ekranı: dik iPad'de iki sütun, kartlarda aynı bilgi sırası. */
.servis-ana .el-pano{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.servis-ana .el-ada{display:flex;flex-direction:column;min-width:0;padding:var(--sp-4);border-radius:var(--dok-r)}
.servis-ana .el-ada>.ada-durum{order:1;margin-top:var(--sp-3);margin-bottom:0}
.servis-ana .el-ada-ust{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2)}
.servis-ana .el-ada-plaka{display:block;font-size:24px;line-height:1.3;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--g-700);overflow-wrap:anywhere}
.servis-ana .el-ada-sahip{display:block;min-height:44px;text-align:left;font-size:var(--dok-fs-md);
  line-height:22px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.servis-ana .el-ada-arac{display:block;min-height:44px;margin-top:var(--sp-2);
  font-size:var(--dok-fs-sm);line-height:22px;font-weight:400;overflow-wrap:anywhere}
.servis-ana .el-ada-gorevler{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.servis-ana .el-ada-gorev{align-items:flex-start;line-height:22px;overflow-wrap:anywhere}
.servis-ana .el-ada-not{overflow-wrap:anywhere}
.servis-ana .dock-list{max-width:none}
.servis-ana .dock-item{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);
  padding:var(--sp-4);border-left:5px solid var(--g-600)}
.servis-ana .dock-item .info{display:grid;gap:var(--sp-2)}
.servis-ana .dock-item .el-ada-sahip,.servis-ana .dock-item .el-ada-arac{min-height:0;margin:0}
.servis-kart-eylemler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);
  border-top:1px solid var(--line);padding-top:var(--sp-3)}
.servis-ana .servis-kart-eylemler .dock-opt{width:100%;min-height:var(--dok-md);
  padding:var(--sp-2) var(--sp-3);font-size:var(--dok-fs-md);white-space:normal;text-align:center}
@media(min-width:600px){
  .servis-ana .dock-search{flex-wrap:nowrap;max-width:none}
  .servis-ana .dock-search input{flex:1 1 0;min-width:0;height:var(--dok-lg)}
  .servis-ana .dock-search .dock-opt{flex:0 0 160px;height:var(--dok-lg);min-height:var(--dok-lg)}
}
@media(max-width:599px){.servis-ana .el-pano{grid-template-columns:minmax(0,1fr)}}

/* El terminali ve masaüstünde ortak, salt okunur görev durumu. */
.gorev-durum-liste{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.gorev-durum-satir{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--dok-r-sm);background:var(--card)}
.gorev-durum-metin{min-width:0;overflow-wrap:anywhere}
.gorev-durum-metin small{display:block;margin-top:4px;color:var(--muted)}
.gorev-durum-satir.tamam .el-ada-tik{background:var(--g-600);color:#fff}
.gorev-durum-satir.tamam .gorev-durum-metin>span{text-decoration:line-through;color:var(--muted)}

/* Araç kartlarında telefon için ayrı, hizalı satır. */
.el-ada-telefon{display:block;font-size:var(--dok-fs-sm);line-height:22px;
  font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Aynı araç kayıt alanları, dokunmatik ekranlarda büyük hedeflerle. */
.yeni-arac-form .fld-col{min-width:0}
.kiosk .yeni-arac-form{max-width:820px}
.kiosk .yeni-arac-form .form-control,.kiosk .yeni-arac-form .as-field,
.kiosk .yeni-arac-form .ts-alan{min-height:52px;font-size:17px;border-radius:var(--dok-r-sm)}
.kiosk .yeni-arac-form .ts-secenek,.kiosk .yeni-arac-form .ts-ara input,
.kiosk .yeni-arac-form .btn{min-height:52px;font-size:var(--dok-fs-md)}
.kiosk .yeni-arac-form .form-label{font-size:var(--dok-fs-sm)}
.kiosk .yeni-arac-form .dock-opts,.kiosk .yeni-arac-form .el-form-foot{margin-top:var(--sp-6)}
.yeni-arac-form .ts-alan{height:auto;white-space:normal;text-align:left}
.yeni-arac-form .ts-etiket{min-width:0;overflow-wrap:anywhere;white-space:normal;overflow:visible;text-overflow:clip}
.yeni-arac-form [data-yalniz-rakam]{min-width:0}
.lastik-secici{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.lastik-secici label{min-width:0}
.lastik-secici select{width:100%;min-width:0}
@media(min-width:600px){.kiosk .yeni-arac-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.yeni-arac-form .el-acordeon[open]{overflow:visible}
/* Proje Üret: mevcut modal ve kartlarla iş emrinin işlem türünü seçme. */
dialog.pu-tur-secimi{margin:auto;padding:0;border:0;width:calc(100% - 32px);max-width:680px;max-height:85dvh;overflow:auto;color:inherit}
.pu-tur-secimi::backdrop{background:rgba(0,0,0,.45)}
.pu-tur-secimi .pu-kartlar{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.pu-tur-secimi .pu-kartlar{grid-template-columns:1fr}}

/* Masaüstü Araç Ekle: ortak form alanlarında tutarlı ölçü ve hizalama. */
.app .form-card.yeni-arac-form{max-width:840px}
.app .yeni-arac-form .form-grid{align-items:start;grid-template-columns:repeat(2,minmax(0,1fr))}
.app .yeni-arac-form .fld-col > .form-label{margin-bottom:0}
.app .yeni-arac-form .form-control,.app .yeni-arac-form .fld-col .btn{min-height:42px}
.app .yeni-arac-form .as-field,
.app .yeni-arac-form .ts-alan{min-height:42px;height:auto;padding:8px 12px;background:var(--g-50);border-radius:var(--r-ctrl)}
.app .yeni-arac-form .fld-col.duzenle-ayrac{flex-direction:row;align-items:center;gap:var(--sp-3);margin:var(--sp-2) 0 0;text-transform:none;letter-spacing:normal}
.app .yeni-arac-form .duzenle-ayrac span{flex:none;max-width:100%}
.app .yeni-arac-form .fld-col > .muted:empty{display:none}
.app .yeni-arac-form .lastik-secici label{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 var(--sp-1)}
@media(max-width:640px){
  .app .yeni-arac-form .form-grid{grid-template-columns:minmax(0,1fr)}
  .app .yeni-arac-form .as-field,.app .yeni-arac-form .ts-alan,
  .app .yeni-arac-form .fld-col .btn{min-height:44px}
  .app .yeni-arac-form .fld-col.duzenle-ayrac{line-height:1.5}
  .app .yeni-arac-form .duzenle-ayrac::after{display:none}
}

/* Ön/arka lastik alanları: dokunulabilir ortak kopyalama seçeneği. */
.lastik-ayni{display:flex!important;align-items:center;gap:var(--sp-2);min-height:32px;margin:0;font-size:var(--fs-sm);font-weight:500;cursor:pointer}
.lastik-ayni input[type=checkbox]{width:18px;min-width:18px;height:18px;min-height:18px;margin:0;padding:0;flex:none;accent-color:var(--g-600)}
.kiosk .lastik-ayni,.el-body .lastik-ayni{min-height:48px;font-size:16px}
@media(max-width:640px){.lastik-ayni{min-height:44px}}

/* Dokunmatik panoda yeni gelen iş emri ve cihaz bildirim kontrolü. */
.dock-pano-araclar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}
.dock-pano-araclar .btn{min-height:48px}
.cal .randevu-yeni{outline:3px solid var(--g-500);outline-offset:2px;box-shadow:0 0 0 6px var(--g-100)}
.el-ada.pano-yeni{outline:3px solid var(--g-500);outline-offset:2px;box-shadow:0 0 0 6px var(--g-100)}

/* Ses analizi deney karşılaştırması: mevcut kart, buton ve konuşma düzeni. */
.sk-karsilastirma .sk-kars-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.sk-karsilastirma .sk-toplamlar{margin:16px 0}
.sk-karsilastirma .sk-toplam{padding:16px;display:flex;flex-direction:column;gap:6px}
.sk-karsilastirma .sk-toplam strong{font-size:22px}
.sk-karsilastirma .sk-ornekler{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.sk-karsilastirma .sk-ornekler .btn{white-space:normal;text-align:left;min-height:44px;height:auto}
.sk-karsilastirma .sk-ses{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sk-karsilastirma h2{font-size:17px}.sk-karsilastirma audio{max-width:100%;min-width:0}
.sk-karsilastirma .sk-not{padding:14px 0;color:var(--muted)}
.sk-karsilastirma .sk-surum{display:flex;flex-direction:column;gap:12px;min-width:0;overflow-wrap:anywhere}
.sk-karsilastirma .sk-surum-baslik{padding:16px;border-top:3px solid var(--g-600)}
.sk-karsilastirma .sk-surum-baslik strong{display:block;font-size:20px;margin-top:10px}
.sk-karsilastirma .sk-icerik{padding:16px;line-height:1.6}
.sk-karsilastirma dt{font-size:12px;font-weight:700;margin-top:12px}
.sk-karsilastirma dd{margin:4px 0 0;color:var(--ink-2)}
.sk-karsilastirma .sk-uyari{padding:14px;border:1px solid var(--red);border-radius:var(--r-card);background:var(--red-100);color:var(--red)}
.sk-karsilastirma .sk-kanit{padding:8px 0;border-bottom:1px solid var(--line)}
.sk-karsilastirma .sk-kanit:last-child{border-bottom:0}
.sk-karsilastirma summary{cursor:pointer;padding:16px;font-weight:700;min-height:44px}
.sk-karsilastirma .sk-konuşmalar{padding:0 16px 16px;max-height:650px;overflow-y:auto;line-height:1.7}
.sk-karsilastirma .sk-konusma{padding:12px;margin:0 16px 12px 0;border:1px solid var(--line);border-radius:10px}
.sk-karsilastirma .sk-konusma p{margin:5px 0;white-space:pre-wrap}
.sk-karsilastirma .sk-musteri{margin:0 0 12px 16px;background:var(--g-50)}
.sk-karsilastirma .sk-ilk-dokum{line-height:1.8}
.sk-karsilastirma .sk-aciklama{margin:14px 0}
@media(max-width:1000px){.sk-karsilastirma .sk-kars-grid{grid-template-columns:1fr}.sk-karsilastirma .sk-toplam strong{font-size:20px}}

/* Telefon satırı için tüm takvim slotları aynı yükseklikte kalır. */
.appt,.appt-empty,.appt-kapali,.appt-hedef,
.appt.tasinan,.appt.dolu-pasif{height:66px;min-height:66px}
.appt .appt-tel{font-size:11px;line-height:14px;flex:none;white-space:nowrap}

/* Ortak ada panosu: sıra ve servis alanı. */
.el-ada.sira-bekliyor{background:var(--warning-soft);border-color:var(--warning)}
.el-ada.serviste{background:var(--success-soft);border-color:var(--success)}
.kiosk-ada-islem{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.kiosk-ada-durum{font-weight:700;color:var(--warning)}
.serviste .kiosk-ada-durum{color:var(--success)}
.kiosk-ada-islem form{margin:0;flex:0 0 auto}
.kiosk-isleme-basla{width:88px;height:88px;border-radius:50%;border:2px solid var(--warning);background:var(--card);color:var(--ink);font:700 16px/1.25 'IBM Plex Sans',sans-serif;cursor:pointer;padding:8px}
.kiosk-isleme-basla:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* Ortak araç kartlarında kabul ve servis süreleri. */
.ada-sureler{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:var(--dok-fs-sm)}
.ada-sureler>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.ada-sureler span{color:var(--muted)}
.ada-sureler strong{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Kiosk ve el terminali: sayaçları kartı gereksiz uzatmadan sığdır. */
.kiosk .el-pano{align-items:start}
.kiosk .el-ada{padding:var(--sp-3)}
.kiosk .el-ada .el-ada-ust{gap:var(--sp-1)}
.kiosk .el-ada .el-ada-sahip,.kiosk .el-ada .el-ada-arac{min-height:0}
.kiosk .el-ada .el-ada-arac{margin-top:var(--sp-1)}
.kiosk .el-ada .kiosk-ada-islem{margin-bottom:var(--sp-2)}
.kiosk .el-ada .kiosk-isleme-basla{width:72px;height:72px}
.kiosk .el-ada .ada-sureler{gap:var(--sp-1);margin-top:var(--sp-2);padding-top:var(--sp-2);line-height:22px}
.kiosk .el-ada .el-ada-gorevler{gap:var(--sp-1);margin-top:var(--sp-2);padding-top:var(--sp-2)}
.kiosk .el-ada>.ada-durum{margin-top:var(--sp-2)}

/* Randevuda araç satırının altındaki tek seçimli motor türü. */
.rdv-motor-secimi{margin-top:10px;gap:20px}
.rdv-motor-secimi label{margin:0}
.cal-adet{white-space:normal}

/* Montaj kalemi bulunan araçlar panoda ayrı mavi renkle gösterilir. */
.el-ada.montaj{background:var(--b-100);border-color:var(--b-700)}
.montaj .kiosk-ada-durum{color:var(--b-700)}
.montaj .kiosk-isleme-basla{border-color:var(--b-700)}

/* Araç kartındaki açılır bölümlerde il/ilçe ve vergi dairesi listeleri kesilmez. */
.duzenle-sar .el-acordeon[open]{overflow:visible}