html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--ym-card-bg), 0 0 0 0.25rem var(--bs-focus-ring-color);
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---------------------------------------------------------------------- */
/* İnce Teknoloji portal theme                                          */
/* ---------------------------------------------------------------------- */

:root {
  --ym-bg: #f5f5f7;
  --ym-card-bg: #ffffff;
  --ym-border: #e6e6ea;
  --ym-text: #1d1d1f;
  --ym-text-muted: #6e6e73;
  --ym-accent: #0f766e;
  --ym-accent-dark: #115e59;
  --ym-accent-soft: #e3f3f0;
  --ym-on-accent: #ffffff;
  --ym-sidebar-bg: #15171c;
  --ym-sidebar-bg-active: #262a31;
  --ym-sidebar-text: #c9ccd3;
  --ym-sidebar-text-muted: #8b8f98;
  --ym-sidebar-accent: #5eead4;
  --ym-table-head-bg: #fafafb;
  --ym-table-stripe-bg: #fbfbfc;
  --ym-uyari-bg: #fef3c7;
  --ym-uyari-yazi: #92400e;
  --ym-tehlike-bg: #fee2e2;
  --ym-tehlike-yazi: #b91c1c;
  --ym-radius: 1rem;
  --ym-radius-sm: 0.6rem;
  --ym-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.06);
  --ym-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
  --ym-ease: cubic-bezier(0, 0, 0.5, 1);

  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: #0f766e;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #115e59;
  --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-border-color: var(--ym-border);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.45rem;
  --bs-border-radius-lg: 0.9rem;
  --bs-focus-ring-color: rgba(15, 118, 110, 0.25);
}

/* Karanlık tema — sidebar zaten koyu renkli tasarlandığı için (her iki temada da aynı), burada
   sadece içerik alanının (topbar/kartlar/tablolar/formlar) renkleri değişiyor. Bootstrap 5.3'ün
   kendi bileşenleri (buton, form, tablo, alert vb.) [data-bs-theme=dark] ile otomatik uyum sağlar;
   burada sadece bu projeye özel --ym-* değişkenleri karanlık karşılıklarıyla eziliyor. */
[data-bs-theme="dark"] {
  --ym-bg: #0f1115;
  --ym-card-bg: #1a1d23;
  --ym-border: #2b2f37;
  --ym-text: #f2f2f4;
  --ym-text-muted: #a1a5ad;
  --ym-accent: #2dd4bf;
  --ym-accent-dark: #5eead4;
  --ym-accent-soft: rgba(45, 212, 191, 0.15);
  --ym-on-accent: #06201e;
  --ym-table-head-bg: #20242b;
  --ym-table-stripe-bg: #1e2127;
  --ym-uyari-bg: rgba(245, 158, 11, 0.18);
  --ym-uyari-yazi: #fbbf24;
  --ym-tehlike-bg: rgba(239, 68, 68, 0.18);
  --ym-tehlike-yazi: #fca5a5;
  --ym-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
  --ym-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.5);

  --bs-primary: #2dd4bf;
  --bs-primary-rgb: 45, 212, 191;
  --bs-link-color: #2dd4bf;
  --bs-link-color-rgb: 45, 212, 191;
  --bs-link-hover-color: #5eead4;
  --bs-link-hover-color-rgb: 94, 234, 212;
  --bs-focus-ring-color: rgba(45, 212, 191, 0.3);
}

/* Yazı tipi: Inter (wwwroot/lib/inter, SIL OFL), dışarıdan yüklenmez. Çıktılar eski yazı tipinde kalır:
   kağıda sığacak şekilde ayarlanmış form ve tutanakların satırları kaymasın. */
@font-face {
  font-family: "InterVariable";
  src: url("../lib/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InterVariable";
  src: url("../lib/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

body {
  background-color: var(--ym-bg);
  color: var(--ym-text);
  font-family: "InterVariable", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.011em;
  margin-bottom: 0;
}

.ym-yazdir-sayfa {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: normal;
}

@media print {
  body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    letter-spacing: normal;
  }
}

/* Tablolarda rakamlar eşit genişlikte: tutar ve tarih sütunları alt alta hizalanır. */
.ym-main table {
  font-variant-numeric: tabular-nums;
}

/* Layout shell -----------------------------------------------------------
   Kabuk tam ekran yüksekliğinde sabitlenir (body kaymaz); sol menü (.ym-sidebar-scroll)
   ve sağ içerik (.ym-main) kendi bağımsız kaydırma çubuklarına sahiptir — üstteki
   .ym-topbar (menü başlığı, kullanıcı adı, çıkış) her zaman sabit kalır. Fare hangi
   panelin üzerindeyse tarayıcı doğal olarak o panelin scroll'unu tetikler, ekstra
   JS gerekmez. */

html, body {
  height: 100%;
}

body {
  overflow: hidden;
}

.ym-shell {
  height: 100vh;
  overflow: hidden;
}

.ym-content {
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.ym-topbar {
  background-color: var(--ym-card-bg);
  border-bottom: 1px solid var(--ym-border);
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
}

.ym-topbar .ym-page-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ym-text);
  margin: 0;
}

.ym-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ym-accent);
  color: var(--ym-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
}

.ym-main {
  padding: 1.75rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

/* Sidebar ------------------------------------------------------------------ */

.ym-sidebar {
  width: 260px;
  height: 100vh;
  background: var(--ym-sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.ym-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.3rem 1.25rem 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Logo (wwwroot/img/logo.png, şeffaf): üst çubuk ve telefon menüsü; giriş ekranları kendi yüksekliğini verir. */
.ym-marka-logo {
  height: 4rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.ym-sidebar-brand-text {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
}

.ym-sidebar-brand-sub {
  color: var(--ym-sidebar-text-muted);
  font-size: 0.7rem;
  font-weight: 400;
  display: block;
}

.ym-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.75rem 1.5rem;
}

.ym-sidebar-brand-text,
.ym-sidebar-link,
.ym-sidebar-grup-baslik {
  white-space: nowrap;
}

/* Açılır kapanır grup başlığı: ikon + ad + ok. Alt öğeler .acik iken görünür. */
.ym-sidebar-grup {
  list-style: none;
  margin-top: 0.15rem;
}

.ym-sidebar-grup-baslik {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--ym-radius-sm);
  background: transparent;
  color: var(--ym-sidebar-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  overflow: hidden;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ym-sidebar-grup-baslik:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.ym-sidebar-grup-baslik > i:first-child {
  font-size: 1rem;
  width: 1.1rem;
  flex-shrink: 0;
  text-align: center;
  color: var(--ym-sidebar-text-muted);
}

.ym-sidebar-grup-baslik:hover > i:first-child,
.ym-sidebar-grup.aktif > .ym-sidebar-grup-baslik > i:first-child {
  color: var(--ym-sidebar-accent);
}

.ym-sidebar-ok {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--ym-sidebar-text-muted);
  transition: transform 0.15s ease;
}

.ym-sidebar-grup.acik .ym-sidebar-ok {
  transform: rotate(180deg);
}

.ym-sidebar-alt {
  display: none;
  padding-left: 1.75rem;
}

.ym-sidebar-grup.acik > .ym-sidebar-alt {
  display: block;
}

.ym-sidebar-alt .ym-sidebar-link {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

.ym-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ym-radius-sm);
  color: var(--ym-sidebar-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ym-sidebar-link i {
  font-size: 1rem;
  width: 1.1rem;
  text-align: center;
  color: var(--ym-sidebar-text-muted);
  transition: color 0.12s ease;
}

.ym-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.ym-sidebar-link:hover i {
  color: #fff;
}

.ym-sidebar-link.active {
  background: var(--ym-sidebar-bg-active);
  color: #fff;
  font-weight: 600;
}

.ym-sidebar-link.active i {
  color: var(--ym-sidebar-accent);
}

/* Cards / content ---------------------------------------------------------- */

.ym-card {
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius);
  box-shadow: var(--ym-shadow);
  padding: 1.5rem;
}

.ym-main h3:first-child,
.ym-main h3.ym-page-heading {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
  color: var(--ym-text);
}

.ym-main h5 {
  font-weight: 600;
  color: var(--ym-text);
}

/* Tables --------------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
}

.ym-main table.table {
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius);
  overflow: hidden;
  box-shadow: var(--ym-shadow);
}

.ym-main table.table > thead > tr > th {
  background: var(--ym-table-head-bg);
  color: var(--ym-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  border-bottom: 1px solid var(--ym-border);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

/* Genel hızlı sıralama butonu — site.js'teki sıralanabilir başlık mekanizması, bkz. oradaki
   doc comment. Başlık metniyle aynı soluk rengi kullanır, sadece üstüne gelince/aktifken belirginleşir. */
.ym-siralama-butonu {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
}

.ym-siralama-butonu:hover,
.ym-siralama-butonu:focus {
  color: var(--ym-accent, #0d6efd);
}

.ym-main table.table td {
  padding: 0.65rem 1rem;
  vertical-align: middle;
  border-color: var(--ym-border);
}

.ym-main table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--ym-table-stripe-bg);
}

.ym-main table.table-hover > tbody > tr:hover > * {
  background-color: var(--ym-accent-soft);
}

/* Sipariş listesi — BOM'u girilmiş satırlar (bkz. Views/Siparis/_Tablo.cshtml). Yarı saydam
   yeşil kullanılıyor ki hem açık hem koyu temada, çizgili (striped) satır rengiyle çakışmadan
   üstüne binsin — ayrı bir koyu-tema varyantı tanımlamaya gerek kalmıyor. */
.ym-main table > tbody > tr.ym-bom-girildi > * {
  background-color: rgba(25, 135, 84, 0.16);
}

.ym-main table.table-hover > tbody > tr.ym-bom-girildi:hover > * {
  background-color: rgba(25, 135, 84, 0.26);
}

.ym-bom-ornek {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.2rem;
  background-color: rgba(25, 135, 84, 0.35);
  border: 1px solid rgba(25, 135, 84, 0.5);
}

/* Forms ------------------------------------------------------------------------ */

.ym-main form:not(.d-inline) {
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius);
  box-shadow: var(--ym-shadow);
  padding: 1.5rem 1.75rem;
}

.ym-main form.d-inline {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: inline;
}

.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ym-text);
}

.form-control, .form-select {
  border-color: var(--ym-border);
}

.form-control:focus, .form-select:focus {
  border-color: var(--ym-accent);
  box-shadow: 0 0 0 0.2rem var(--ym-accent-soft);
}

/* Zorunlu alan doldurulmadan kaydedilmeye çalışılınca — asp-for'un otomatik eklediği
   "input-validation-error" sınıfı (Bootstrap'in .is-invalid'ı bilmediği manuel select/input'lar
   dahil) kırmızı çerçeveyle vurgulanır, üstteki uyarı kutusuyla birlikte alanı da işaret eder. */
.input-validation-error,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #dc3545 !important;
}

.input-validation-error:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Buttons ------------------------------------------------------------------------ */

/* Toplu işlemler araç çubuğu (bkz. _TopluAracCubugu.cshtml) — normal .btn-sm'den de daha
   kompakt, çünkü bu üç buton (Toplu Sil/Aktar/Yazdır) neredeyse her liste ekranının en
   üstünde duruyor ve varsayılan .btn-sm boyutuyla sayfaya oranla gereğinden büyük/kaba
   görünüyordu (kullanıcı geri bildirimi — bkz. ekran görüntüsü). */
.ym-toplu-buton {
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.3;
}

.ym-toplu-buton i {
  font-size: 0.85em;
}

.btn-primary {
  background-color: var(--ym-accent);
  border-color: var(--ym-accent);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ym-accent-dark);
  border-color: var(--ym-accent-dark);
}

.btn-outline-secondary {
  border-color: var(--ym-border);
  color: var(--ym-text-muted);
}

/* Badges --------------------------------------------------------------------------- */

.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.4em 0.65em;
}

/* Özel karakter ekleme (μ, ±, ° vb.) ----------------------------------------------- */

.ym-sembol-alani {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
  position: relative;
}

.ym-sembol-alani > input,
.ym-sembol-alani > textarea {
  flex: 1 1 auto;
  min-width: 0;
}

.ym-sembol-dugme {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  padding-inline: 0.6rem;
}

.ym-sembol-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 11rem;
  padding: 0.4rem;
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius);
  box-shadow: var(--ym-shadow);
}

.ym-sembol-panel button {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.05rem;
  color: var(--ym-text);
  background: var(--ym-bg);
  border: 1px solid var(--ym-border);
  border-radius: 0.35rem;
  cursor: pointer;
}

.ym-sembol-panel button:hover,
.ym-sembol-panel button:focus {
  background: var(--ym-accent-soft);
  border-color: var(--ym-accent);
}

/* Responsive: mobile off-canvas sidebar + compact layout ------------------------- */

.ym-menu-toggle {
  border: 1px solid var(--ym-border);
  color: var(--ym-text);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35rem 0.6rem;
}

.ym-sidebar-backdrop {
  display: none;
}

@media (max-width: 991.98px) {
  .ym-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .ym-sidebar.ym-sidebar-open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(10, 12, 24, 0.45);
  }

  .ym-sidebar-backdrop.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 32, 0.5);
    z-index: 1040;
  }
}

@media (min-width: 992px) {
  .ym-menu-toggle {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .ym-main {
    padding: 1rem;
  }

  .ym-topbar {
    padding: 0.6rem 0.85rem;
  }

  .ym-main form:not(.d-inline) {
    padding: 1.1rem 1.2rem;
  }

  /* Horizontally scroll wide tables instead of squeezing/breaking the layout. */
  .ym-main table.table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .ym-main table.table thead,
  .ym-main table.table tbody {
    display: table;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .ym-topbar .ym-page-title {
    font-size: 0.95rem;
  }
}

/* Form yerleşimi düzenleme modu (yalnız admin; bkz. site.js "Form yerleşimi"). */
.yerlesim-duzenle [data-yerlesim-bolum] {
    min-height: 3.5rem;
    outline: 1px dashed var(--bs-border-color);
    outline-offset: 4px;
    border-radius: .25rem;
    margin-bottom: 1rem;
}
.yerlesim-duzenle [data-yerlesim-bolum] > [draggable="true"] {
    position: relative;
    cursor: grab;
    padding-top: 1.6rem;
}
.yerlesim-duzenle [data-yerlesim-bolum] > [draggable="true"] > :not(.yerlesim-blok-arac) {
    pointer-events: none;
}
.yerlesim-duzenle .yerlesim-gizli {
    opacity: .35;
}
.yerlesim-blok-arac {
    position: absolute;
    top: 0;
    left: calc(var(--bs-gutter-x) * .5);
    display: flex;
    gap: .25rem;
    font-size: .75rem;
}
.yerlesim-blok-arac button,
.yerlesim-blok-arac .yerlesim-tutamak {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-radius: .25rem;
    padding: 0 .35rem;
    line-height: 1.4;
}

/* ------------------------------------------------------------------------------------------- */
/* Ana sayfa (Views/Home/Index.cshtml): üst satır, özet kutuları (dönen yüzler), panolar.       */
/* ------------------------------------------------------------------------------------------- */
.ym-ana-ust {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.ym-kur {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: var(--ym-radius-sm);
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  color: var(--ym-text);
  font-weight: 600;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.ym-ana-bugun { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.ym-bugun-kutu {
  display: flex;
  flex-direction: column;
  min-width: 9.5rem;
  padding: .55rem .8rem;
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius);
  color: var(--ym-text);
  text-decoration: none;
  transition: border-color .12s;
}
.ym-bugun-kutu:hover { border-color: var(--ym-accent); color: var(--ym-text); }
.ym-bugun-etiket { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ym-text-muted); }
.ym-bugun-deger { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Özet kutuları — beyaz kart, renk yalnız ikon zemininde (--ym-ozet-renk). Fare hareketine göre eğilir
   ve ışık yansır (site.js "Derinlik"). */
.ym-ozet-kutu {
  position: relative;
  overflow: hidden;
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 6.5rem;
  height: 100%;
  padding: 1.1rem 1.4rem;
  border-radius: var(--ym-radius);
  box-shadow: var(--ym-shadow);
  color: var(--ym-text);
  text-decoration: none;
  transition: transform .3s var(--ym-ease), box-shadow .3s var(--ym-ease);
}
.ym-ozet-kutu:hover { color: var(--ym-text); box-shadow: var(--ym-shadow-hover); transform: translateY(-2px); }
.ym-ozet-kutu::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--ym-isik-x, 50%) var(--ym-isik-y, 50%), rgba(255, 255, 255, .07), transparent 60%);
  transition: opacity .3s var(--ym-ease);
}
[data-bs-theme="light"] .ym-ozet-kutu::after { background: radial-gradient(circle at var(--ym-isik-x, 50%) var(--ym-isik-y, 50%), color-mix(in srgb, var(--ym-ozet-renk) 10%, transparent), transparent 60%); }
.ym-ozet-kutu:hover::after { opacity: 1; }
.ym-ozet-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  border-radius: .9rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ym-ozet-renk);
  background: color-mix(in srgb, var(--ym-ozet-renk) 14%, transparent);
}
.ym-ozet-govde { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ym-ozet-yuzler { display: grid; perspective: 600px; }
.ym-ozet-yuz {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  transform-origin: 50% 50%;
  transform: rotateX(-90deg) translateY(.5rem);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .45s;
  backface-visibility: hidden;
}
.ym-ozet-yuz.aktif { transform: none; opacity: 1; }
.ym-ozet-yuz.cikan { transform: rotateX(90deg) translateY(-.5rem); opacity: 0; }
.ym-ozet-deger { font-size: 1.55rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ym-ozet-baslik { font-size: .9rem; font-weight: 500; }
.ym-ozet-alt { font-size: .78rem; color: var(--ym-text-muted); overflow: hidden; text-overflow: ellipsis; }
.ym-ozet-noktalar { display: flex; gap: .3rem; margin-top: .4rem; }
.ym-ozet-noktalar span {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--ym-border);
  transition: width .3s, background .3s;
}
.ym-ozet-noktalar span.aktif { width: 14px; background: var(--ym-ozet-renk); }
.ym-ozet-ikon.ym-ikon-don { animation: ym-ikon-don .7s ease-in-out; }
@keyframes ym-ikon-don {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(360deg); }
}
.ym-ozet-kompakt { min-height: 5.5rem; padding: .9rem 1.1rem; }
.ym-ozet-kompakt .ym-ozet-ikon { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; }
.ym-ozet-kompakt .ym-ozet-deger { font-size: 1.3rem; }

.ym-ozet-mavi { --ym-ozet-renk: #3b82f6; }
.ym-ozet-mercan { --ym-ozet-renk: #f0634a; }
.ym-ozet-turkuaz { --ym-ozet-renk: #14b8a6; }
.ym-ozet-yesil { --ym-ozet-renk: #22a35a; }
.ym-ozet-mor { --ym-ozet-renk: #8b5cf6; }
.ym-ozet-turuncu { --ym-ozet-renk: #f59e0b; }
.ym-ozet-kirmizi { --ym-ozet-renk: #ef4444; }

/* Panolar — CSS columns ile masonry. */
.ym-panolar { column-gap: 1rem; columns: 1; }
@media (min-width: 768px) { .ym-panolar { columns: 2; } }
@media (min-width: 1400px) { .ym-panolar { columns: 3; } }
.ym-pano {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 1rem;
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius);
  box-shadow: var(--ym-shadow);
  overflow: hidden;
  transition: transform .3s var(--ym-ease), box-shadow .3s var(--ym-ease);
}
.ym-pano:hover { box-shadow: var(--ym-shadow-hover); transform: translateY(-2px); }
.ym-pano-baslik {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ym-text);
  border-bottom: 1px solid var(--ym-border);
  padding: .75rem 1rem;
}
.ym-pano-toplam {
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  padding: .05rem .55rem;
  border-radius: 99px;
  color: var(--ym-pano-renk, var(--ym-text-muted));
  background: color-mix(in srgb, var(--ym-pano-renk, var(--ym-text-muted)) 14%, transparent);
}
.ym-pano-turuncu { --ym-pano-renk: #d97706; }
.ym-pano-kirmizi { --ym-pano-renk: #ef4444; }
.ym-pano-turkuaz { --ym-pano-renk: #0d9488; }
.ym-pano-yesil { --ym-pano-renk: #22a35a; }
.ym-pano-lacivert { --ym-pano-renk: var(--ym-text-muted); }
.ym-pano-mor { --ym-pano-renk: #8b5cf6; }
.ym-pano-acik { background: transparent; color: var(--ym-text); }
.ym-pano-govde { padding: .85rem 1rem; }
.ym-pano-devam { display: inline-block; margin-top: .5rem; font-size: .82rem; }

.ym-hizli-dugme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .7rem .4rem;
  border: 1px solid var(--ym-border);
  border-radius: calc(var(--ym-radius) - .2rem);
  color: var(--ym-text);
  text-decoration: none;
  text-align: center;
  font-size: .82rem;
  transition: border-color .12s, background .12s;
}
.ym-hizli-dugme i { font-size: 1.35rem; color: var(--ym-accent); }
.ym-hizli-dugme:hover { border-color: var(--ym-accent); background: var(--ym-accent-soft); color: var(--ym-text); }

/* Bekleyen / geciken çubukları. */
.ym-cubuk { display: block; color: var(--ym-text); text-decoration: none; margin-bottom: .65rem; }
.ym-cubuk:last-child { margin-bottom: 0; }
.ym-cubuk-ust { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }
.ym-cubuk-sayi { font-variant-numeric: tabular-nums; }
.ym-cubuk:hover .ym-cubuk-ust > span:first-child { text-decoration: underline; }
.ym-cubuk-iz { height: .95rem; background: var(--ym-table-head-bg); }

/* Liste panelleri. */
.ym-liste { border: 1px solid var(--ym-border); border-radius: calc(var(--ym-radius) - .2rem); overflow: hidden; }
.ym-liste-satiri {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .55rem .75rem;
  color: var(--ym-text);
  text-decoration: none;
}
.ym-liste-satiri + .ym-liste-satiri { border-top: 1px solid var(--ym-border); }
a.ym-liste-satiri[href]:hover { background: var(--ym-table-head-bg); color: var(--ym-text); }
.ym-liste-sol { display: flex; flex-direction: column; min-width: 0; }
.ym-liste-ust { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-liste-alt { font-size: .78rem; color: var(--ym-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-liste-sag { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ym-liste-sag-alt { font-size: .74rem; color: var(--ym-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .ym-ozet-yuz, .ym-ozet-kutu, .ym-ozet-noktalar span, .ym-bugun-kutu, .ym-hizli-dugme { transition: none !important; }
  .ym-ozet-yuz, .ym-ozet-yuz.cikan { transform: none; }
  .ym-ozet-ikon.ym-ikon-don { animation: none; }
  .ym-ozet-kutu:hover { transform: none; }
}

/* ------------------------------------------------------------------------------------------- */
/* Sayfa üst işlem satırı (.ym-sayfa-basi): sayfa başlığının işlem butonları sol üstte tek satır,  */
/* düz renkli, küçük ve gölgeli; başlık (h3) altta. Renk anlamı: yeni = yeşil, Excel/şablon =     */
/* turuncu, aktarım/diğer işlem = turkuaz, gezinme = lacivert, silme = kırmızı. Markup değişmeden  */
/* mevcut Bootstrap sınıflarından eşlenir; yeni bir butona doğrudan .ym-islem-* de verilebilir.    */
/* ------------------------------------------------------------------------------------------- */
.ym-sayfa-basi {
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: .45rem !important;
  margin-bottom: 1rem !important;
}
/* Başlık (veya başlığı taşıyan blok) alt satıra, tam genişlikte. */
.ym-sayfa-basi > h3,
.ym-sayfa-basi > div:has(> h3),
.ym-sayfa-basi > div:has(> .small + h3) {
  order: 2;
  flex: 0 0 100%;
  margin-top: .35rem;
}
.ym-sayfa-basi > div:not(:has(h3)),
.ym-sayfa-basi .ym-toplu-cubuk { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ym-sayfa-basi .btn-primary { order: -1; }

.ym-sayfa-basi .btn,
.ym-toplu-buton {
  --ym-islem-renk: var(--ym-card-bg);
  --ym-islem-yazi: var(--ym-text);
  background: var(--ym-islem-renk);
  border: 1px solid var(--ym-border);
  color: var(--ym-islem-yazi) !important;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.35;
  padding: .42rem .85rem;
  border-radius: var(--ym-radius-sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: filter .2s var(--ym-ease), box-shadow .2s var(--ym-ease), transform .2s var(--ym-ease);
}
.ym-sayfa-basi .btn:hover,
.ym-toplu-buton:hover:not(:disabled) { filter: brightness(.97); box-shadow: 0 4px 10px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.ym-sayfa-basi .btn i,
.ym-toplu-buton i { margin-right: .15rem; }
.ym-toplu-buton:disabled { background: var(--ym-islem-renk) !important; color: var(--ym-islem-yazi) !important; opacity: .5; box-shadow: none; }

.ym-sayfa-basi .btn-primary, .ym-sayfa-basi .btn-success, .ym-islem-yesil, .ym-sayfa-basi .ym-islem-yesil { --ym-islem-renk: var(--ym-accent); --ym-islem-yazi: var(--ym-on-accent); }
.ym-sayfa-basi .btn-outline-success, .ym-sayfa-basi .btn-warning, .ym-islem-turuncu, .ym-sayfa-basi .ym-islem-turuncu { --ym-islem-renk: var(--ym-uyari-bg); --ym-islem-yazi: var(--ym-uyari-yazi); }
.ym-sayfa-basi .btn-outline-primary, .ym-sayfa-basi .btn-info, .ym-islem-turkuaz, .ym-sayfa-basi .ym-islem-turkuaz { --ym-islem-renk: var(--ym-accent-soft); --ym-islem-yazi: var(--ym-accent); }
.ym-sayfa-basi .btn-outline-secondary, .ym-sayfa-basi .btn-secondary, .ym-sayfa-basi .btn-light, .ym-islem-lacivert, .ym-sayfa-basi .ym-islem-lacivert { --ym-islem-renk: var(--ym-card-bg); --ym-islem-yazi: var(--ym-text); }
.ym-sayfa-basi .btn-outline-danger, .ym-sayfa-basi .btn-danger, .ym-islem-kirmizi, .ym-sayfa-basi .ym-islem-kirmizi { --ym-islem-renk: var(--ym-tehlike-bg); --ym-islem-yazi: var(--ym-tehlike-yazi); }

/* Başlık satırındaki filtre formları (ör. Cihaz İzleme) kart görünümü almasın. */
.ym-sayfa-basi form { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.ym-sayfa-basi form .ts-wrapper, .ym-sayfa-basi form select.form-select { min-width: 14rem; }

/* ------------------------------------------------------------------------------------------- */
/* Liste süzgeç satırı (form.ym-filtre, bkz. site.js "Filtreler"): solda açılır listeler, çoklu    */
/* seçimler ve tarih menüsü; sağda "Ara:" kutusu. Filtrele düğmesi yok, değişince gönderilir.       */
/* ------------------------------------------------------------------------------------------- */
.ym-main form.ym-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .6rem;
  padding: .65rem .9rem;
  margin-bottom: 1rem;
}
.ym-filtre-sol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.ym-filtre .ts-wrapper, .ym-filtre select.form-select:not(.ym-arama-alan) { min-width: 13rem; max-width: 18rem; }
.ym-filtre .form-check { margin: 0; font-size: .85rem; }
.ym-filtre-bilgi { font-size: .82rem; color: var(--ym-text-muted); }
.ym-filtre-yukleniyor { opacity: .65; pointer-events: none; }

.ym-filtre-kutu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-width: 12rem;
  padding: .3rem .65rem;
  font-size: .875rem;
  text-align: left;
  color: var(--ym-text);
  background: var(--ym-card-bg);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius-sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.ym-filtre-kutu:focus { outline: none; border-color: var(--ym-accent); }
.ym-filtre-dolu { border-color: var(--ym-accent); background: var(--ym-accent-soft); }
.ym-coklu-menu { min-width: 15rem; max-height: 24rem; overflow-y: auto; padding: .35rem 0; }
.ym-coklu-satir {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .32rem .85rem;
  font-size: .875rem;
  cursor: pointer;
  user-select: none;
}
.ym-coklu-satir .form-check-input { margin: 0; flex-shrink: 0; }
.ym-coklu-satir:hover { background: var(--ym-table-head-bg); }
.ym-coklu-alt { padding-left: 2.1rem; }

.ym-tarih-dugme {
  background: var(--ym-card-bg);
  color: var(--ym-text);
  border: 1px solid var(--ym-border);
  border-radius: var(--ym-radius-sm);
  padding: .36rem .75rem;
  font-size: .8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.ym-tarih-dugme:hover { border-color: var(--ym-accent); }
.ym-tarih-menu { min-width: 15rem; font-size: .875rem; }
.ym-tarih-menu .dropdown-item.active { background: var(--ym-accent); color: var(--ym-on-accent); }

.ym-arama { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.ym-arama-etiket { margin: 0; font-size: .85rem; font-weight: 600; }
.ym-arama-alan { width: auto; min-width: 11rem; }
.ym-arama-kutu { width: 16rem; }

@media (max-width: 767.98px) {
  .ym-arama { margin-left: 0; width: 100%; }
  .ym-arama-kutu { flex: 1; width: auto; }
  .ym-filtre .ts-wrapper, .ym-filtre select.form-select:not(.ym-arama-alan), .ym-filtre-kutu { min-width: 0; width: 100%; max-width: none; }
  .ym-filtre-sol, .ym-filtre-sol > * { width: 100%; }
}

/* ------------------------------------------------------------------------------------------- */
/* Tablolar: açık başlık şeridi, ürün adı şeridi (.ym-satir-bar) ve alt kırılım (+/−) satırları. */
/* ------------------------------------------------------------------------------------------- */
.ym-main table.table:not(.table-bordered) { border-collapse: separate; border-spacing: 0; }
.ym-main table.table > thead > tr > th {
  background: var(--ym-table-head-bg);
  color: var(--ym-text-muted);
  font-size: .76rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--ym-border);
  padding: .65rem .85rem;
}
.ym-main table.table > thead > tr > th a,
.ym-main table.table > thead > tr > th .ym-siralama-butonu { color: var(--ym-text-muted); }
.ym-main table.table > thead > tr > th .ym-siralama-butonu:hover,
.ym-main table.table > thead > tr > th .ym-siralama-butonu.active { color: var(--ym-accent); }
/* Çizgi ve üzerine gelme rengi yalnız --ym-* değişkenlerinden; Bootstrap'in kendi gölge katmanı üstüne binmesin. */
.ym-main table.table { --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent; }

/* Ürün adı şeridi: hücreyi kaplayan vurgulu bağlantı. */
.ym-satir-bar {
  display: block;
  padding: .38rem .7rem;
  background: var(--ym-accent-soft);
  color: var(--ym-accent-dark) !important;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--ym-radius-sm);
  font-size: .875rem;
  line-height: 1.35;
}
.ym-satir-bar { min-width: 12rem; }
.ym-satir-bar:hover { filter: brightness(.97); }
.ym-satir-bar small { opacity: .85; font-size: .75rem; }

/* Alt kırılım düğmesi: kapalıyken vurgulu +, açıkken soluk −. */
.ym-ac-kapa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: .45rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ym-accent);
  color: var(--ym-on-accent);
  font-size: .8rem;
  line-height: 1;
  vertical-align: -2px;
  flex-shrink: 0;
}
.ym-ac-kapa::before { content: "+"; font-weight: 700; }
.ym-ac-kapa.acik { background: var(--ym-text-muted); color: var(--ym-card-bg); }
.ym-ac-kapa.acik::before { content: "−"; }
.ym-ac-kapa:disabled { opacity: .5; }
tr.ym-alt-acik > td { background: var(--ym-table-head-bg); }

.ym-main table.table > tbody > tr.ym-alt-satir > td { padding: 0; background: var(--ym-card-bg); }
.ym-alt-panel { padding: .65rem 1rem .5rem 2.4rem; border-left: 3px solid var(--ym-accent); }
.ym-alt-islemler { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.ym-islem-kucuk {
  --ym-islem-renk: var(--ym-card-bg);
  --ym-islem-yazi: var(--ym-text);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ym-islem-yazi) !important;
  text-decoration: none;
  background: var(--ym-islem-renk);
  border: 1px solid var(--ym-border);
  border-radius: .45rem;
}
.ym-islem-kucuk:hover { filter: brightness(.97); }

.ym-alt-tablo { width: auto; min-width: 50%; border-collapse: collapse; font-size: .82rem; margin-bottom: .4rem; }
.ym-alt-tablo th { font-weight: 700; padding: .3rem .7rem; border-bottom: 2px solid var(--ym-text); white-space: nowrap; }
.ym-alt-tablo td { padding: .4rem .7rem; vertical-align: top; }
.ym-alt-tablo tr + tr td { border-top: 1px solid var(--ym-border); }
.ym-alt-tablo .ym-alt-ikinci { display: block; font-size: .72rem; color: var(--ym-text-muted); }
.ym-alt-baslik { font-size: .78rem; font-weight: 700; color: var(--ym-text-muted); margin: .35rem 0 .2rem; }
.ym-alt-alt {
  margin: .3rem -1rem 0 -2.4rem;
  padding: .35rem 1rem .35rem 2.4rem;
  font-size: .74rem;
  color: var(--ym-text-muted);
  background: var(--ym-table-head-bg);
  border-top: 1px solid var(--ym-border);
}

/* Tanımlamalar: sol liste menüsündeki grup başlıkları. */
.ym-tanim-listeler .ym-tanim-grup {
  background: var(--ym-table-head-bg);
  color: var(--ym-text-muted);
  font-size: .72rem;
  font-weight: 600;
  padding: .35rem .85rem;
}
.ym-tanim-listeler .list-group-item-action { font-size: .875rem; padding: .45rem .85rem; }

/* Üst çubuk: firma seçici (bkz. _FirmaSecici). Seçiliyken turuncu çerçeve: ekranlar yalnız o firmayı gösteriyor. */
.ym-firma-secici {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .1rem .15rem .1rem .55rem;
  border: 1px solid var(--ym-border);
  border-radius: .4rem;
  color: var(--ym-text-muted);
}
.ym-firma-secici .ts-wrapper,
.ym-firma-secici > select { width: 15rem; }
.ym-firma-secici .ts-control { border: 0; box-shadow: none; min-height: 0; padding-top: .2rem; padding-bottom: .2rem; }
.ym-firma-secici.ym-firma-secili { border-color: #f0ad4e; box-shadow: 0 0 0 2px rgba(240, 173, 78, .35); color: #f0ad4e; }
.ym-firma-secici.ym-firma-secili .ts-control { font-weight: 600; }
.ym-firma-secici { flex-wrap: nowrap; white-space: nowrap; }
.ym-firma-secici .ts-control, .ym-firma-secici .ts-control input { color: var(--ym-text); }
@media (max-width: 767.98px) {
  .ym-firma-secici .ts-wrapper,
  .ym-firma-secici > select { width: 9.5rem; }
}
@media (max-width: 575.98px) {
  .ym-firma-secici { padding-left: .15rem; }
  .ym-firma-secici > .bi { display: none; }
  .ym-firma-secici .ts-wrapper,
  .ym-firma-secici > select { width: 7.5rem; }
}

/* Pop-up seçici (site.js "Pop-up seçici"): tablo satırında açılır liste yerine düğme + ortada aramalı pencere. */
.ym-popup-secim-dugme { min-width: 11rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-popup-secim-dugme.ym-popup-bos { color: var(--ym-text-muted); }
.ym-popup-secim .modal-body { max-height: 60vh; }
/* Listeden seçilen metin alanı (data-popup-liste): tıklayınca pop-up açılır, açılır kutu gibi görünür. */
.ym-popup-metin { cursor: pointer; padding-right: 2rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23868e96' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
.ym-popup-metin:read-only { background-color: var(--bs-body-bg); }
.ym-popup-secim .list-group-item.active { background: var(--ym-accent); border-color: var(--ym-accent); color: var(--ym-on-accent) !important; }
.ym-popup-secim .ym-popup-grup { background: var(--ym-table-head-bg); color: var(--ym-text-muted); font-size: .7rem; letter-spacing: .03em; }

/* Tarih kutuları (site.js "Tarih kutuları"): görünen gg.aa.yyyy metin kutusu + takvim düğmesi; asıl <input type="date">
   görünmez ama yerinde durur (takvim onun konumunda açılır, form onunla gönderilir). */
.ym-tarih { position: relative; flex-wrap: nowrap; }
.ym-tarih > input[type="text"] { min-width: 6.5rem; padding-right: .4rem; }
.ym-tarih > .ym-tarih-dugme { padding-left: .45rem; padding-right: .45rem; }
.ym-tarih > .ym-tarih-asil { position: absolute; right: 0; bottom: 0; width: 2.5rem; height: 100%; opacity: 0; pointer-events: none; padding: 0; border: 0; }

/* ------------------------------------------------------------------------------------------- */
/* Hikvision panosu (Views/HikPartner/Pano, _CihazDurumu): kanal ızgarası, 30 günlük zaman çizelgesi. */
/* ------------------------------------------------------------------------------------------- */
.ym-kanal-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .3rem; }
.ym-kanal { border-radius: .35rem; padding: .25rem .35rem; font-size: .72rem; line-height: 1.15; color: #fff; min-height: 2.6rem; overflow: hidden; }
.ym-kanal b { display: block; font-size: .85rem; }
.ym-kanal span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.ym-kanal.bagli { background: var(--bs-success); }
.ym-kanal.kopuk { background: var(--bs-danger); }
.ym-kanal.bilinmiyor { background: var(--bs-secondary); }
.ym-zaman-cizelge { position: relative; height: 1.4rem; border-radius: .35rem; background: rgba(var(--bs-success-rgb), .35); overflow: hidden; }
.ym-zaman-cizelge .kapali { position: absolute; top: 0; bottom: 0; background: var(--bs-danger); min-width: 2px; }
.ym-zaman-cizelge .olay { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--bs-warning); }
.ym-pano-kart { border-left: .2rem solid var(--bs-success); }
.ym-pano-kart.uyari { border-left-color: var(--bs-warning); }
.ym-pano-kart.kritik { border-left-color: var(--bs-danger); }
.ym-pano-cubuk { height: .45rem; border-radius: .25rem; background: rgba(var(--bs-danger-rgb), .6); overflow: hidden; }
.ym-pano-cubuk > div { height: 100%; background: var(--bs-success); }

/* ------------------------------------------------------------------------------------------- */
/* Form gönderiminden sonra kaydırma konumu korunduğunda işlem mesajı sağ üstte kısa süre görünür (site.js). */
/* ------------------------------------------------------------------------------------------- */
.ym-anlik-bildirim { position: fixed; top: 4.5rem; right: 1rem; z-index: 1080; max-width: min(28rem, calc(100vw - 2rem)); cursor: pointer; transition: opacity .5s; }
.ym-anlik-bildirim .alert { margin-bottom: .5rem; }
.ym-anlik-bildirim.gizle { opacity: 0; }

/* ------------------------------------------------------------------------------------------- */
/* Üst menü (_UstMenu, site.js "Üst menü"): ≥ 992 px. Altında _SidebarNav hamburger düğmesiyle açılır. */
/* ------------------------------------------------------------------------------------------- */
.ym-ust-sol { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.ym-ust-logo { display: none; align-items: center; gap: .55rem; font-weight: 600; white-space: nowrap; color: var(--ym-text); text-decoration: none; }
.ym-ust-logo:hover { color: var(--ym-text); }
.ym-ustmenu { display: none; }

@media (min-width: 992px) {
  .ym-sidebar, .ym-sidebar-backdrop { display: none !important; }
  .ym-ust-logo { display: flex; }
  .ym-topbar { position: relative; z-index: 1041; gap: 1rem; }
  .ym-topbar .ym-page-title { display: none; } /* başlık sayfanın içinde ve tarayıcı sekmesinde */
  .ym-ust-sol, .ym-ust-sag { flex-shrink: 0; }
  /* Konumlu ata üst çubuk: geniş panel tüm satır genişliğinde açılır. Sığmayınca menü iki satıra iner. */
  .ym-ustmenu { display: block; flex: 1 1 0; min-width: 0; }
  .ym-firma-secici .ts-wrapper, .ym-firma-secici > select { width: 12rem; }
}

/* Dizüstü genişliğinde menü tek satıra sığsın: grup simgeleri kalkar. */
@media (min-width: 992px) and (max-width: 1599.98px) {
  .ym-ustmenu-dugme > i:first-child { display: none; }
}
@media (min-width: 992px) and (max-width: 1499.98px) {
  .ym-ustmenu-dugme { padding: .42rem .4rem; font-size: .84rem; }
  .ym-firma-secici { padding-left: .15rem; }
  .ym-firma-secici > .bi { display: none; }
  .ym-firma-secici .ts-wrapper, .ym-firma-secici > select { width: 9.5rem; }
}
/* Uzun firma adı ok simgesinin altına girmesin. */
.ym-firma-secici .ts-wrapper.single .ts-control { flex-wrap: nowrap; overflow: hidden; padding-right: 1.9rem !important; }
.ym-firma-secici .ts-wrapper.single .ts-control .item { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Liste kapalıyken arama girdisi yer kaplamasın (odakta kalsa da firma adı görünür); açıkken yazmak için kutuyu doldurur. */
.ym-firma-secici .ts-wrapper:not(.dropdown-active) .ts-control > input { flex: 0 0 0; width: 0 !important; min-width: 0; }

/* Genel arama (Ctrl+K; site.js "Genel arama"). */
.ym-arama-dugme { width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ym-border); border-radius: .5rem; background: transparent; color: var(--ym-text-muted); transition: background-color .15s, color .15s; }
.ym-arama-dugme:hover { background: var(--ym-table-head-bg); color: var(--ym-accent); }
.ym-arama-pencere { margin-top: 4.5rem; }
.ym-arama-giris { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--ym-border); color: var(--ym-text-muted); }
.ym-arama-giris input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ym-text); font-size: 1.05rem; }
.ym-arama-giris kbd { font-size: .7rem; background: var(--ym-table-head-bg); color: var(--ym-text-muted); }
.ym-arama-sonuclar { max-height: min(60vh, 30rem); overflow-y: auto; }
.ym-arama-sonuclar:empty { display: none; }
.ym-arama-grup { padding: .55rem 1rem .2rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ym-text-muted); }
.ym-arama-satir { display: flex; align-items: center; gap: .5rem; padding: .15rem .5rem; }
.ym-arama-satir.etkin, .ym-arama-satir:hover { background: var(--ym-table-head-bg); }
.ym-arama-ana { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; color: var(--ym-text); text-decoration: none; }
.ym-arama-ana > i { color: var(--ym-text-muted); }
.ym-arama-ana span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-arama-ana .baslik { font-weight: 500; }
.ym-arama-ana .alt { font-size: .8rem; color: var(--ym-text-muted); }
.ym-arama-metin { min-width: 0; }
.ym-arama-eylemler { display: flex; gap: .25rem; flex-shrink: 0; }
.ym-arama-eylemler a { padding: .15rem .45rem; border: 1px solid var(--ym-border); border-radius: .4rem; font-size: .75rem; color: var(--ym-text); text-decoration: none; white-space: nowrap; background: var(--ym-card-bg); }
.ym-arama-eylemler a:hover { color: var(--ym-accent); border-color: var(--ym-accent); }
.ym-arama-bos { padding: 1rem; color: var(--ym-text-muted); font-size: .9rem; }
@media (max-width: 575.98px) {
  .ym-arama-pencere { margin: .5rem; }
  .ym-arama-eylemler a span { display: none; }
}

/* Ayarlar penceresi (kullanıcı menüsünden). */
.ym-ayarlar-ogeler { columns: 3; column-gap: 1.5rem; }
@media (max-width: 767.98px) { .ym-ayarlar-ogeler { columns: 1; } }

.ym-ust-sag { display: flex; align-items: center; gap: .5rem; }
.ym-kullanici-dugme { display: flex; align-items: center; gap: .3rem; padding: .15rem .35rem .15rem .15rem; border: 0; border-radius: 2rem; background: transparent; color: var(--ym-text); transition: background-color .15s; }
.ym-kullanici-dugme:hover, .ym-kullanici-dugme[aria-expanded="true"] { background: var(--ym-table-head-bg); }
.ym-ust-sag .dropdown-menu { z-index: 1050; }
.ym-ust-sag .dropdown-item > i { width: 1.25rem; display: inline-block; color: var(--ym-text-muted); }

.ym-ustmenu-liste, .ym-ustmenu-ogeler { list-style: none; margin: 0; padding: 0; }
.ym-ustmenu-liste { display: flex; flex-wrap: wrap; gap: .15rem; }
.ym-ustmenu-grup { position: relative; }
.ym-ustmenu-grup.genis { position: static; }
.ym-ustmenu-dugme { display: flex; align-items: center; gap: .4rem; padding: .42rem .7rem; border: 0; border-radius: var(--ym-radius-sm); background: transparent; color: var(--ym-text); font-size: .88rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s; }
.ym-ustmenu-dugme > i:first-child { color: var(--ym-text-muted); transition: color .15s; }
.ym-ustmenu-ok { font-size: .65rem; color: var(--ym-text-muted); transition: transform .15s; }
.ym-ustmenu-dugme:hover, .ym-ustmenu-grup.acik > .ym-ustmenu-dugme { background: var(--ym-table-head-bg); color: var(--ym-text); }
.ym-ustmenu-dugme.aktif { background: var(--ym-accent-soft); color: var(--ym-accent); }
.ym-ustmenu-dugme.aktif > i:first-child, .ym-ustmenu-dugme:hover > i:first-child, .ym-ustmenu-grup.acik > .ym-ustmenu-dugme > i:first-child { color: var(--ym-accent); }
.ym-ustmenu-grup.acik .ym-ustmenu-ok { transform: rotate(180deg); }

.ym-ustmenu-panel { display: none; position: absolute; top: calc(100% + .35rem); left: 0; min-width: 16rem; padding: 1rem 1.25rem; background: var(--ym-card-bg); border: 1px solid var(--ym-border); border-radius: var(--ym-radius); box-shadow: var(--ym-shadow-hover); }
.ym-ustmenu-panel.sagda { left: auto; right: 0; }
.ym-ustmenu-grup.genis > .ym-ustmenu-panel { left: 1.5rem; right: 1.5rem; }
.ym-ustmenu-grup.acik > .ym-ustmenu-panel { display: block; animation: ymUstmenuAc .14s var(--ym-ease); }
@keyframes ymUstmenuAc { from { opacity: 0; transform: translateY(-4px); } }
.ym-ustmenu-panel-baslik { margin-bottom: .5rem; font-size: .95rem; font-weight: 600; }
.ym-ustmenu-grup.genis .ym-ustmenu-ogeler { columns: 4; column-gap: 1.5rem; }
.ym-ustmenu-ogeler li { break-inside: avoid; }
.ym-ustmenu-ogeler a, .ym-ustmenu-ogeler span { display: block; padding: .3rem .5rem; margin: 0 -.5rem; border-radius: .45rem; color: var(--ym-text); font-size: .88rem; text-decoration: none; }
.ym-ustmenu-ogeler a:hover { background: var(--ym-table-head-bg); color: var(--ym-accent); }
.ym-ustmenu-ogeler a.aktif { background: var(--ym-accent-soft); color: var(--ym-accent); font-weight: 500; }
.ym-ustmenu-ogeler a i { font-size: .72rem; color: var(--ym-text-muted); }

@media (max-width: 1199.98px) {
  .ym-ustmenu-grup.genis .ym-ustmenu-ogeler { columns: 3; }
  .ym-ustmenu-dugme { padding: .42rem .5rem; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ym-ustmenu-grup.acik > .ym-ustmenu-panel { animation: none; }
}

@media print {
  .ym-ustmenu { display: none !important; }
}

/* ------------------------------------------------------------------------------------------- */
/* Bootstrap bileşenleri tema renginde (derlenmiş CSS'te sabit yazılı olanlar).                      */
/* ------------------------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: var(--ym-on-accent);
  --bs-btn-bg: var(--ym-accent);
  --bs-btn-border-color: var(--ym-accent);
  --bs-btn-hover-color: var(--ym-on-accent);
  --bs-btn-hover-bg: var(--ym-accent-dark);
  --bs-btn-hover-border-color: var(--ym-accent-dark);
  --bs-btn-active-color: var(--ym-on-accent);
  --bs-btn-active-bg: var(--ym-accent-dark);
  --bs-btn-active-border-color: var(--ym-accent-dark);
  --bs-btn-disabled-color: var(--ym-on-accent);
  --bs-btn-disabled-bg: var(--ym-accent);
  --bs-btn-disabled-border-color: var(--ym-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--ym-accent);
  --bs-btn-border-color: var(--ym-accent);
  --bs-btn-hover-color: var(--ym-on-accent);
  --bs-btn-hover-bg: var(--ym-accent);
  --bs-btn-hover-border-color: var(--ym-accent);
  --bs-btn-active-color: var(--ym-on-accent);
  --bs-btn-active-bg: var(--ym-accent);
  --bs-btn-active-border-color: var(--ym-accent);
  --bs-btn-disabled-color: var(--ym-accent);
  --bs-btn-disabled-border-color: var(--ym-accent);
}
.form-check-input:checked { background-color: var(--ym-accent); border-color: var(--ym-accent); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ym-accent); }
.form-select:focus { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.pagination {
  --bs-pagination-color: var(--ym-accent);
  --bs-pagination-hover-color: var(--ym-accent-dark);
  --bs-pagination-focus-color: var(--ym-accent-dark);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
  --bs-pagination-active-color: var(--ym-on-accent);
  --bs-pagination-active-bg: var(--ym-accent);
  --bs-pagination-active-border-color: var(--ym-accent);
}
.nav-pills { --bs-nav-pills-link-active-color: var(--ym-on-accent); --bs-nav-pills-link-active-bg: var(--ym-accent); }
.dropdown-menu { --bs-dropdown-link-active-color: var(--ym-on-accent); --bs-dropdown-link-active-bg: var(--ym-accent); }
.list-group { --bs-list-group-active-color: var(--ym-on-accent); --bs-list-group-active-bg: var(--ym-accent); --bs-list-group-active-border-color: var(--ym-accent); }
.ts-control input::placeholder { color: var(--ym-text-muted); opacity: 1; }
.ts-dropdown .active { background-color: var(--ym-accent-soft); color: var(--ym-text); }
.ts-wrapper.focus .ts-control { border-color: var(--ym-accent); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.card {
  --bs-card-border-radius: var(--ym-radius);
  --bs-card-inner-border-radius: calc(var(--ym-radius) - 1px);
  --bs-card-border-color: var(--ym-border);
  --bs-card-cap-bg: transparent;
  --bs-card-bg: var(--ym-card-bg);
  box-shadow: var(--ym-shadow);
}
a.card { transition: transform .3s var(--ym-ease), box-shadow .3s var(--ym-ease); }
a.card:hover { box-shadow: var(--ym-shadow-hover); transform: translateY(-2px); }
.ym-bugun-kutu, .ym-hizli-dugme { transition: transform .3s var(--ym-ease), border-color .2s, background-color .2s, box-shadow .3s var(--ym-ease); }
.ym-bugun-kutu:hover, .ym-hizli-dugme:hover { box-shadow: var(--ym-shadow-hover); transform: translateY(-2px); }

/* ------------------------------------------------------------------------------------------- */
/* Cihaz görseli (_IzoCihaz: tipe göre çizim, wwwroot/img/cihaz; köşede durum ışığı .ok/.uyari/.kritik) ve izometrik kabin            */
/* (Hikvision panosu: site başına cihaz katmanları; biçim --g/--d/--y = genişlik/derinlik/yükseklik).                                    */
/* ------------------------------------------------------------------------------------------- */
.ym-izo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 5.25rem; height: 4.75rem; flex-shrink: 0; }
.ym-izo img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s var(--ym-ease); }
a:hover .ym-izo img, .ym-izo:hover img { transform: translateY(-2px) scale(1.04); }
[data-bs-theme="dark"] .ym-izo img { filter: brightness(1.18) drop-shadow(0 0 1px rgba(255, 255, 255, .4)); }
.ym-izo-durum { position: absolute; right: .2rem; top: .2rem; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--ym-card-bg); background: #94a3b8; }
.ym-izo.ok > .ym-izo-durum { background: #22c55e; }
.ym-izo.uyari > .ym-izo-durum { background: #f59e0b; }
.ym-izo.kritik > .ym-izo-durum { background: #ef4444; }
.ym-izo-sahne { position: relative; width: var(--g); height: var(--d); transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-40deg); transition: transform .3s var(--ym-ease); }
.ym-izo-kat { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform: translateZ(var(--kat-z, 0)); transition: transform .25s var(--ym-ease); }
.ym-izo-yuz { position: absolute; display: block; background: var(--renk); }
.ym-izo-yuz.ust { inset: 0; border-radius: 2px; transform: translateZ(var(--y)); }
.ym-izo-yuz.on { left: 0; top: var(--d); width: var(--g); height: var(--y); transform-origin: top; transform: rotateX(90deg); filter: brightness(.68); }
.ym-izo-yuz.sag { left: var(--g); top: 0; width: var(--y); height: var(--d); transform-origin: left; transform: rotateY(-90deg); filter: brightness(.82); }
.ym-izo-yuz.arka { left: 0; top: 0; width: var(--g); height: var(--y); transform-origin: top; transform: rotateX(90deg); filter: brightness(.6); }
.ym-izo-yuz.sol { left: 0; top: 0; width: var(--y); height: var(--d); transform-origin: left; transform: rotateY(-90deg); filter: brightness(.6); }
.ym-izo-isik { position: absolute; left: 5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.ok > .ym-izo-yuz.ust > .ym-izo-isik { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.uyari > .ym-izo-yuz.ust > .ym-izo-isik { background: #f59e0b; box-shadow: 0 0 5px #f59e0b; }
.kritik > .ym-izo-yuz.ust > .ym-izo-isik { background: #ef4444; box-shadow: 0 0 5px #ef4444; }

/* Yatay şerit (ana sayfa): sığmayan kartlar yana kayar. Oklar yalnız o yönde kart varsa görünür (site.js "Yatay şerit").
   Uyarıları şeride koymayın: kaydırılmadan görünmeyen kart gözden kaçar. */
.ym-serit-baslik { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .35rem; font-size: .95rem; font-weight: 600; }
.ym-serit-baslik a { font-size: .85rem; font-weight: 500; }
.ym-serit { position: relative; margin-bottom: .75rem; }
.ym-serit-ic { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: .25rem; scrollbar-width: none; padding: .35rem .25rem .75rem; margin: 0 -.25rem; }
.ym-serit-ic::-webkit-scrollbar { display: none; }
.ym-serit-ic > * { flex: 0 0 auto; scroll-snap-align: start; }
.ym-serit-ok { position: absolute; top: calc(50% - 1.2rem); width: 2.4rem; height: 2.4rem; display: none; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ym-border); border-radius: 50%; background: var(--ym-card-bg); color: var(--ym-text); box-shadow: var(--ym-shadow-hover); z-index: 2; }
.ym-serit-ok:hover { color: var(--ym-accent); }
.ym-serit-ok.sol { left: -.5rem; }
.ym-serit-ok.sag { right: -.5rem; }
.ym-serit.sol-var .ym-serit-ok.sol, .ym-serit.sag-var .ym-serit-ok.sag { display: flex; }

.ym-kategori, .ym-son-cihaz, .ym-serit-ic > .ym-hizli-dugme { background: var(--ym-card-bg); border: 0; border-radius: var(--ym-radius); box-shadow: var(--ym-shadow); color: var(--ym-text); text-decoration: none; transition: transform .3s var(--ym-ease), box-shadow .3s var(--ym-ease); }
.ym-kategori:hover, .ym-son-cihaz:hover, .ym-serit-ic > .ym-hizli-dugme:hover { background: var(--ym-card-bg); box-shadow: var(--ym-shadow-hover); transform: translateY(-2px); color: var(--ym-text); }
.ym-kategori { width: 8.25rem; display: flex; flex-direction: column; align-items: center; padding: 1.1rem .5rem .7rem; text-align: center; }
.ym-kategori-ad { font-size: .82rem; line-height: 1.2; min-height: 2em; display: flex; align-items: center; }
.ym-kategori-sayi { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ym-serit-ic > .ym-hizli-dugme { width: 7.5rem; }
.ym-son-cihaz { width: 18rem; display: flex; align-items: center; gap: .35rem; padding: .6rem .75rem .6rem .35rem; }
.ym-son-cihaz-yazi { min-width: 0; display: flex; flex-direction: column; }
.ym-son-cihaz-baslik { font-weight: 600; font-size: .9rem; }
.ym-son-cihaz-urun { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-son-cihaz-alt { font-size: .78rem; color: var(--ym-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ym-kabin { --g: 50px; --d: 38px; --y: 11px; --renk: #64748b; position: relative; width: 5.25rem; height: calc(3.6rem + var(--kat-sayi) * 16px); flex-shrink: 0; }
.ym-kabin .ym-izo-sahne { position: absolute; left: calc(50% - 25px); bottom: 12px; }
.ym-kabin a.ym-izo-kat { --renk: #475569; cursor: pointer; }
.ym-kabin a.ym-izo-kat.kayit { --renk: #0f766e; }
/* Alttaki katmanların üst yüzü (ışığı) görünmez: kabinde durum katmanın kendi renginden okunur. */
.ym-kabin a.ym-izo-kat.uyari { --renk: #d97706; }
.ym-kabin a.ym-izo-kat.kritik { --renk: #dc2626; }
.ym-kabin a.ym-izo-kat:hover { transform: translateZ(calc(var(--kat-z, 0px) + 7px)); }
.ym-kabin-artan { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: .7rem; color: var(--ym-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .ym-pano, .ym-bugun-kutu, .ym-hizli-dugme, a.card, .ym-izo img, .ym-izo-sahne, .ym-izo-kat, .ym-kategori, .ym-son-cihaz { transition: none !important; }
  .ym-pano:hover, .ym-bugun-kutu:hover, .ym-hizli-dugme:hover, a.card:hover, .ym-kategori:hover, .ym-son-cihaz:hover { transform: none; }
}

@media print {
  .ym-content {
    margin-left: 0 !important;
  }
  .card, .ym-card, .ym-ozet-kutu, .ym-pano, .ym-main table.table { box-shadow: none !important; }
}

/* Aramalı işaret listesi (Personel kartı → Zimmet ver) */
.ym-isaret-listesi { max-height: 40vh; overflow-y: auto; }
.ym-isaret-listesi label { cursor: pointer; }
.ym-isaret-listesi label:hover { background: var(--bs-tertiary-bg); }