/* =========================================================
   Buton Sistemi — V6 (Xpoda uyumlu, JS ikon enjeksiyonlu)
   Kullanım: bu dosyayı Xpoda Client\Content\custom\ içine,
   buttons.js'i de Xpoda Client\Scripts\custom\ içine koyun.
   Butonlara Studio "Custom Css" kutusundan class verin.
   Örnekler: ornek.html

   NOT:
   - Tüm özellikler `!important` (Xpoda inline + Kendo temasını ezmek için).
   - İkonlar CSS pseudo-element ile DEĞİL, buttons.js tarafından
     gerçek <svg> (.nct-ico) olarak eklenir. Sebep: Kendo butonu
     ::before/::after'ı kendi overlay'i için kullanıp ikonu siliyordu.
   ========================================================= */

:root {
  --btn-blue-600: #2563eb;
  --btn-blue-700: #1d4ed8;
  --btn-blue-50:  #eff6ff;
  --btn-red-600:  #dc2626;
  --btn-red-50:   #fef2f2;
  --btn-green-700: #107c41;
  --btn-green-800: #0b5c30;
  --btn-green-50:  #f0fdf4;
  --btn-slate-900: #0f172a;
  --btn-slate-700: #334155;
  --btn-slate-600: #475569;
  --btn-slate-500: #64748b;
  --btn-slate-400: #94a3b8;
  --btn-slate-300: #cbd5e1;
  --btn-slate-200: #e2e8f0;
  --btn-slate-100: #f1f5f9;
  --btn-slate-50:  #f8fafc;
  --btn-radius: 6px;
  --btn-height: 36px;
  --btn-font-size: 13.5px;
}

/* ---------- Temel buton ---------- */
.btn:where(:not(#tab1-well *)) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: var(--btn-height) !important;
  padding: 0 14px !important;
  border-radius: var(--btn-radius) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background 0.13s ease, border-color 0.13s ease,
              color 0.13s ease, box-shadow 0.13s ease !important;
}
.btn:where(:not(#tab1-well *)):active { transform: translateY(0.5px) !important; }
.btn:where(:not(#tab1-well *)):focus-visible { outline: 2px solid var(--btn-blue-600) !important; outline-offset: 2px !important; }

/* ---------- Xpoda Form Butonları ----------
   Xpoda, form butonlarını li.octopusitem > button şeklinde üretir.
   Class ne olursa olsun (k-button, xp-button, custom, classsız) hepsini yakalar. */
li.octopusitem > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: var(--btn-height) !important;
  width: 100% !important;
  padding: 0 14px !important;
  border-radius: var(--btn-radius) !important;
  font-family: inherit !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  transition: background 0.13s ease, border-color 0.13s ease,
              color 0.13s ease, box-shadow 0.13s ease !important;
}
li.octopusitem > button:active  { transform: translateY(0.5px) !important; }
li.octopusitem > button:focus-visible { outline: 2px solid var(--btn-blue-600) !important; outline-offset: 2px !important; }

/* ---------- Xpoda Form Hizalaması ----------
   (Aşağı kayma sorunu yarattığı için top: 30px kaldırıldı) */
/* li.octopusitem:has(> button) {
  top: 30px !important;
} */


/* ---------- Beyaz zemin temizliği ----------
   Sadece .btn-primary renkli zemin taşır. Diğer TÜM butonlar şeffaf
   durur — Kendo'nun varsayılan beyaz/gri zemini ve .btn-outline beyazı
   dahil. Böylece butonların arkasında beyaz kutu kalmaz; toolbar'a düz
   oturur, hover'da hafif zemin gelir. (.btn:not(.btn-primary) özgüllüğü
   varyantların idle hâlini ezer; hover kurallarıı sonra geldiği için
   hover zeminleri çalışmaya devam eder.) */
.btn:not(.btn-primary):not([class*="btn-outline"]):not(.btn-group *):not(.ico-copy):not(.ico-power):not(.ico-eye):not(.ico-save):not(.btn-save):not(.btn-save-green):not(.btn-excel):not(.btn-pdf):where(:not(#tab1-well *)) {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Default inline SVG size inside buttons (like menu dots) */
.btn svg {
  width: 15px !important;
  height: 15px !important;
  display: inline-block !important;
  flex: none !important;
}

/* ---------- İkon (buttons.js .nct-ico olarak ekler) ----------
   Generic ikonlar (add/edit/delete) currentColor'ı izler → buton
   metin rengiyle aynı olur (mavi butonda beyaz, hover'da kırmızı...).
   Excel/PDF rengi SVG'ye gömülü (yeşil/kırmızı), buttons.js verir. */
.nct-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  line-height: 0 !important;
  order: -1 !important;            /* her ihtimale karşı metnin solunda */
}
.nct-ico svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  fill: none !important;
  stroke: var(--ico-color, currentColor) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ---------- İkon Renk Özelleştiricileri ---------- */
.ico-color-blue svg, .btn-icon-blue svg     { stroke: #2563eb !important; }
.ico-color-green svg, .btn-icon-green svg   { stroke: #16a34a !important; }
.ico-color-red svg, .btn-icon-red svg       { stroke: #dc2626 !important; }
.ico-color-orange svg, .btn-icon-orange svg { stroke: #d97706 !important; }
.ico-color-purple svg, .btn-icon-purple svg { stroke: #9333ea !important; }
.ico-color-teal svg, .btn-icon-teal svg     { stroke: #0891b2 !important; }
.ico-color-yellow svg, .btn-icon-yellow svg { stroke: #eab308 !important; }
.ico-color-slate svg, .btn-icon-slate svg   { stroke: #475569 !important; }
.ico-color-white svg, .btn-icon-white svg   { stroke: #ffffff !important; }


/* ---------- Varyantlar ---------- */

/* Birincil — sayfada tek olmalıı (Ekle, Filtrele, Kaydet) */
.btn-primary { background: var(--btn-blue-600) !important; color: #fff !important; }
.btn-primary:hover { background: var(--btn-blue-700) !important; }

/* Sessiz — sık işlemler (Düzenle vb.) */
.btn-quiet { color: var(--btn-slate-600) !important; }
.btn-quiet:hover { background: var(--btn-slate-100) !important; color: var(--btn-slate-900) !important; }

/* Tehlikeli — Sil; nötr durur, hover'da kırmızılaşır (ikon da currentColor ile kırmızıya döner) */
.btn-danger { color: var(--btn-slate-600) !important; }
.btn-danger:hover { background: var(--btn-red-50) !important; color: var(--btn-red-600) !important; }

/* İİkincil (outline) — İİptal vb. */
.btn-outline { background: #fff !important; border-color: var(--btn-slate-300) !important; color: var(--btn-slate-700) !important; }
.btn-outline:hover { background: var(--btn-slate-50) !important; border-color: var(--btn-slate-400) !important; }

/* =========================================================
   Özel Renkli Araç Çubuğu Butonları (Görseldeki Gibi)
   ========================================================= */

/* Ekle (Yeşil) */
.btn-outline-green { color: #16a34a !important; border-color: #16a34a !important; background-color: #fff !important; }
.btn-outline-green:hover { background-color: #f0fdf4 !important; }

/* Düzenle (Mavi) */
.btn-outline-blue { color: #2563eb !important; border-color: #2563eb !important; background-color: #fff !important; }
.btn-outline-blue:hover { background-color: #eff6ff !important; }

/* İİncele (Teal / Turkuaz) */
.btn-outline-teal { color: #0891b2 !important; border-color: #0891b2 !important; background-color: #fff !important; }
.btn-outline-teal:hover { background-color: #ecfeff !important; }

/* Kopyala (Mor) */
.btn-outline-purple { color: #9333ea !important; border-color: #9333ea !important; background-color: #fff !important; }
.btn-outline-purple:hover { background-color: #faf5ff !important; }

/* Aktif / Pasif (Turuncu/Kahve) */
.btn-outline-orange { color: #d97706 !important; border-color: #d97706 !important; background-color: #fff !important; }
.btn-outline-orange:hover { background-color: #fffbeb !important; }

/* Sil (Kırmızı) */
.btn-outline-red { color: #dc2626 !important; border-color: #dc2626 !important; background-color: #fff !important; }
.btn-outline-red:hover { background-color: #fef2f2 !important; }

/* Yenile (Gri Kenarlık, Koyu Metin) */
.btn-outline-slate { color: #334155 !important; border-color: #cbd5e1 !important; background-color: #fff !important; }
.btn-outline-slate:hover { background-color: #f8fafc !important; }

/* AI Tablo Analizi (Özel Mor Arka Planlı) */
.btn-ai { color: #7c3aed !important; border-color: #c4b5fd !important; background-color: #f5f3ff !important; }
.btn-ai:hover { background-color: #ede9fe !important; border-color: #a78bfa !important; }

/* Sadece ikon (metni gizler) */
.btn-icon {
  padding: 0 10px !important;
  font-size: 0 !important; /* İçindeki metni gizler, sadece ikon görünür */
}

/* Kaydet (Save) Butonu - Dolgulu Ana Aksiyon */
.btn-save {
  background-color: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
  font-weight: 600 !important;
}
.btn-save:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3) !important;
  color: #fff !important;
  transform: translateY(-0.5px) !important;
}

/* Kaydet (Save) Butonu - Dolgulu Yeşil Varyant */
.btn-save-green {
  background-color: #16a34a !important; /* Canlı yeşil */
  color: #fff !important;
  border-color: #16a34a !important;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2) !important;
  font-weight: 600 !important;
}
.btn-save-green:hover {
  background-color: #15803d !important;
  border-color: #15803d !important;
  box-shadow: 0 4px 6px rgba(22, 163, 74, 0.3) !important;
  color: #fff !important;
  transform: translateY(-0.5px) !important;
}

/* Kaydet (Save) - Outline İkon Kullanımı */
.btn:not(.btn-save):not(.btn-save-green):not([class*="btn-outline"]).ico-save {
  border-color: #2563eb !important;
  color: #2563eb !important;
  background-color: #fff !important;
}
.btn:not(.btn-save):not(.btn-save-green):not([class*="btn-outline"]).ico-save:hover {
  background-color: #eff6ff !important;
}

/* Özel İkon Hover Durumları */
.btn:not(.btn-primary).ico-eye {
  border-color: #0891b2 !important;
  color: #0891b2 !important;
  background-color: #fff !important;
}
.btn:not(.btn-primary).ico-eye:hover {
  background: var(--btn-blue-50) !important;
  border-color: var(--btn-blue-600) !important;
  color: var(--btn-blue-600) !important;
}

.btn:not(.btn-primary).ico-refresh:hover {
  background: var(--btn-green-50) !important;
  border-color: var(--btn-green-700) !important;
  color: var(--btn-green-700) !important;
}

.btn:not(.btn-primary).ico-delete {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  background-color: #fff !important;
}
.btn:not(.btn-primary).ico-delete:hover {
  background: var(--btn-red-50) !important;
  border-color: var(--btn-red-600) !important;
  color: var(--btn-red-600) !important;
}

.btn:not(.btn-primary).ico-copy {
  border-color: #9333ea !important;
  color: #9333ea !important;
  background-color: #fff !important;
}
.btn:not(.btn-primary).ico-copy:hover {
  background: #faf5ff !important;
}

.btn:not(.btn-primary).ico-power {
  border-color: #d97706 !important;
  color: #d97706 !important;
  background-color: #fff !important;
}
.btn:not(.btn-primary).ico-power:hover {
  background: #fffbeb !important;
}

/* Dışa aktarma butonları — ikonu buttons.js sabit renkle (yeşil/kırmızı) ekler */
.btn:not(.btn-primary).btn-excel {
  border-color: #16a34a !important;
  color: #16a34a !important;
  background-color: #fff !important;
}
.btn:not(.btn-primary).btn-excel:hover {
  background: var(--btn-green-50) !important;
  border-color: var(--btn-green-700) !important;
  color: var(--btn-green-800) !important;
}

.btn:not(.btn-primary).btn-pdf {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  background-color: #fff !important;
}
.btn:not(.btn-primary).btn-pdf:hover {
  background: var(--btn-red-50) !important;
  border-color: var(--btn-red-600) !important;
  color: var(--btn-red-800) !important;
}

/* ---------- Devre dışı ---------- */
.btn:disabled,
.btn.is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.btn:disabled:hover,
.btn.is-disabled:hover {
  background: transparent !important;
  color: var(--btn-slate-600) !important;
}
.btn-outline:disabled:hover,
.btn-outline.is-disabled:hover { background: #fff !important; border-color: var(--btn-slate-300) !important; }
.btn-primary:disabled:hover,
.btn-primary.is-disabled:hover { background: var(--btn-blue-600) !important; color: #fff !important; }

/* ---------- Araç çubuğu yerleşimi ---------- */
.toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;          /* dar ekranda butonları kırpmak yerine alt satıra geçir */
  gap: 8px !important;
  row-gap: 8px !important;
}
.toolbar .spacer { flex: 1 1 0 !important; min-width: 0 !important; }

/* Seçim sayacı rozeti */
.selection-count {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--btn-blue-700) !important;
  background: var(--btn-blue-50) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
}

/* ---------- Taşma menüsü (…) ---------- */
.menu-anchor { position: relative !important; }
.menu {
  position: absolute !important;
  top: calc(var(--btn-height) + 6px) !important;
  right: 0 !important;
  width: 210px !important;
  background: #fff !important;
  border: 1px solid var(--btn-slate-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  padding: 5px !important;
  z-index: 50 !important;
}
.menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border-radius: 5px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--btn-slate-700) !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
  font-family: inherit !important;
  text-align: left !important;
}
.menu-item:hover { background: var(--btn-slate-100) !important; }
.menu-item svg {
  width: 15px !important;
  height: 15px !important;
  flex: none !important;
  display: inline-block !important;
}
.menu-item svg path,
.menu-item svg rect,
.menu-item svg circle {
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.menu-sep { height: 1px !important; background: var(--btn-slate-100) !important; margin: 5px 4px !important; }

/* ---------- Durum rozeti (Aktif / Pasif) ---------- */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}
.badge .dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; }
.badge.badge-on  { background: #ecfdf5 !important; color: #047857 !important; }
.badge.badge-on  .dot { background: #10b981 !important; }
.badge.badge-off { background: var(--btn-slate-100) !important; color: var(--btn-slate-500) !important; }
.badge.badge-off .dot { background: var(--btn-slate-400) !important; }



/* ---------- Button Group (BtnGroup) ---------- */
/* Xpoda içindeki dropdown buton gruplarını biçimlendirir */
.btn-group {
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
  border-radius: var(--btn-radius) !important;
  overflow: visible !important;
}

/* Buton grubu içindeki butonların varsayılan beyaz/outline stili */
.btn-group:not(.floatfooter *) > .btn,
.btn-group:not(.floatfooter *) > .octopod-group-button {
  background-color: #fff !important;
  border: 1px solid var(--btn-slate-300) !important;
  color: var(--btn-slate-700) !important;
}

.btn-group > .btn:hover,
.btn-group > .octopod-group-button:hover {
  background-color: var(--btn-slate-50) !important;
  border-color: var(--btn-slate-400) !important;
  color: var(--btn-slate-900) !important;
}

/* Sol butonun sağ köşelerini sıfırla ve kenarlığını düzenle */
.btn-group > .btn:first-child:not(.dropdown-toggle),
.btn-group > .octopod-group-button:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

/* Sağdaki ok butonunun sol köşelerini sıfırla (sadece solunda başka buton varsa) */
.btn-group > .btn + .btn:last-child,
.btn-group > .btn + .dropdown-toggle,
.btn-group > .octopod-group-button + .dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding: 0 10px !important;
  min-width: unset !important;
}

/* Açılır menü ok işareti (caret) */
.btn-group .dropdown-toggle .caret {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 2px !important;
  vertical-align: middle !important;
  border-top: 4px solid currentColor !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  content: "" !important;
}

/* Dropdown Menu tasarımı */
.btn-group .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  transform: none !important;
  z-index: 1000 !important;
  display: none !important;
  float: left !important;
  min-width: 160px !important;
  padding: 5px !important;
  margin: 2px 0 0 !important;
  list-style: none !important;
  background-color: #fff !important;
  border: 1px solid var(--btn-slate-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

/* Menü açıldığında */
:is(.btn-group.open, .btn-group.show, .btn-group[aria-expanded="true"]) .dropdown-menu {
  display: block !important;
}

.btn-group .dropdown-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

.btn-group .dropdown-menu a,
.btn-group .dropdown-menu .menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--btn-slate-700) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
}

.btn-group .dropdown-menu a:hover,
.btn-group .dropdown-menu .menu-item:hover {
  background-color: var(--btn-slate-100) !important;
  color: var(--btn-slate-900) !important;
}

/* Renkli Dropdown Menu İtemleri */
.btn-group .dropdown-menu a.ico-power, .btn-group .dropdown-menu .menu-item.ico-power { color: #d97706 !important; }
.btn-group .dropdown-menu a.ico-power:hover, .btn-group .dropdown-menu .menu-item.ico-power:hover { background-color: #fffbeb !important; color: #b45309 !important; }

.btn-group .dropdown-menu a.ico-delete, .btn-group .dropdown-menu .menu-item.ico-delete { color: #dc2626 !important; }
.btn-group .dropdown-menu a.ico-delete:hover, .btn-group .dropdown-menu .menu-item.ico-delete:hover { background-color: #fef2f2 !important; color: #b91c1c !important; }

.btn-group .dropdown-menu a.ico-copy, .btn-group .dropdown-menu .menu-item.ico-copy { color: #9333ea !important; }
.btn-group .dropdown-menu a.ico-copy:hover, .btn-group .dropdown-menu .menu-item.ico-copy:hover { background-color: #faf5ff !important; color: #7e22ce !important; }

.btn-group .dropdown-menu a.ico-eye, .btn-group .dropdown-menu .menu-item.ico-eye { color: #0891b2 !important; }
.btn-group .dropdown-menu a.ico-eye:hover, .btn-group .dropdown-menu .menu-item.ico-eye:hover { background-color: #ecfeff !important; color: #0369a1 !important; }

.btn-group .dropdown-menu a.ico-refresh, .btn-group .dropdown-menu .menu-item.ico-refresh { color: #16a34a !important; }
.btn-group .dropdown-menu a.ico-refresh:hover, .btn-group .dropdown-menu .menu-item.ico-refresh:hover { background-color: #f0fdf4 !important; color: #15803d !important; }
.btn-group .dropdown-menu a.ico-mail, .btn-group .dropdown-menu .menu-item.ico-mail { color: #2563eb !important; }
.btn-group .dropdown-menu a.ico-mail:hover, .btn-group .dropdown-menu .menu-item.ico-mail:hover { background-color: #eff6ff !important; color: #1d4ed8 !important; }
.btn-group .dropdown-menu a.btn-excel, .btn-group .dropdown-menu .menu-item.btn-excel { color: #16a34a !important; }
.btn-group .dropdown-menu a.btn-excel:hover, .btn-group .dropdown-menu .menu-item.btn-excel:hover { background-color: #f0fdf4 !important; color: #15803d !important; }

.btn-group .dropdown-menu a.btn-pdf, .btn-group .dropdown-menu .menu-item.btn-pdf { color: #dc2626 !important; }
.btn-group .dropdown-menu a.btn-pdf:hover, .btn-group .dropdown-menu .menu-item.btn-pdf:hover { background-color: #fef2f2 !important; color: #b91c1c !important; }

/* Eski ikonları gizleme yardımcısı (Custom SVG eklendiğinde) */
.nct-ico + i,
.nct-ico + .fa,
.nct-ico + .k-icon,
.nct-ico + .octopod-icon {
  display: none !important;
}

/* =========================================================
   View Toggle (Liste / Kanban Geçişi)
   ========================================================= */

.nct-view-toggle {
    display: inline-flex !important;
    background-color: #f1f5f9 !important;
    border-radius: 99px !important;
    padding: 3px !important;
    position: relative !important;
    user-select: none !important;
    border: 1px solid #e2e8f0 !important;
}

.nct-view-toggle input[type="radio"] {
    display: none !important;
}

.nct-view-toggle label {
    position: relative !important;
    z-index: 2 !important;
    padding: 5px 14px !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.3s ease !important;
    border-radius: 99px !important;
    margin: 0 !important;
}

.nct-view-toggle label:hover {
    color: #334155 !important;
}

/* Aktif Durum Renkleri */
.nct-view-toggle input[type="radio"]:checked + label {
    color: #0f172a !important;
    font-weight: 500 !important; /* Jitter'ı önlemek için 600'den 500'e çekildi, kalınlaşma titremeye sebep olur */
    text-shadow: 0 0 .5px #0f172a !important; /* Kalınlaştırma yerine hafif gölge ile belirginleştirildi */
}

/* Sürüklenen (Hareketli) Arkaplan */
.nct-view-toggle::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    bottom: 3px !important;
    left: 3px !important;
    width: calc(50% - 3px) !important;
    background-color: #ffffff !important;
    border-radius: 99px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1 !important;
}

.nct-view-toggle:has(input[type="radio"]:nth-of-type(2):checked)::before {
    transform: translateX(100%) !important;
}

/* İkonlar için */
.nct-view-toggle svg {
    width: 15px !important;
    height: 15px !important;
    fill: currentColor !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s !important;
}

.nct-view-toggle input[type="radio"]:checked + label svg {
    opacity: 1 !important;
    color: #2563eb !important;
}

/* Daha küçük versiyon ve Mobil Uyumluluk (Responsive) */
/* 1200px altı ekranlarda (Laptop) biraz daralt */
@media (max-width: 1200px) {
    .nct-view-toggle {
        padding: 2px !important;
    }
    .nct-view-toggle label {
        padding: 4px 8px !important;
        font-size: 11.5px !important;
        gap: 4px !important;
    }
    .nct-view-toggle svg {
        width: 13px !important;
        height: 13px !important;
    }
    .nct-view-toggle::before {
        top: 2px !important;
        bottom: 2px !important;
        left: 2px !important;
        width: calc(50% - 2px) !important;
    }
}

/* 768px altı ekranlarda (Tablet/Mobil) yazıları gizle sadece ikon kalsın! */
@media (max-width: 768px) {
    .nct-view-toggle label {
        font-size: 0 !important; /* Yazıyı gizle */
        padding: 6px 10px !important;
        gap: 0 !important;
    }
    .nct-view-toggle svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Daha küçük versiyon */
.nct-view-toggle.sm label {
    padding: 4px 10px !important;
    font-size: 12.5px !important;
}
.nct-view-toggle.sm svg {
    width: 14px;
    height: 14px;
}

/* =========================================================
   Ayrı Liste / Kanban / Takvim Buton Tasarımları (Toggle İptal Edildiğinde)
   Kullanım: Xpoda'dan butonlara "nct-btn-list", "nct-btn-kanban"
   veya "nct-btn-calendar" yazın.
   ========================================================= */

.nct-btn-list, .nct-btn-kanban, .nct-btn-calendar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    height: 34px !important;
}

/* -----------------------------------------------------------
   Varsayılan (Seçili DEĞİL) — hepsi gri/nötr
   ----------------------------------------------------------- */
.nct-btn-list,
.nct-btn-kanban,
.nct-btn-calendar {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

.nct-btn-list:hover,
.nct-btn-kanban:hover,
.nct-btn-calendar:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* -----------------------------------------------------------
   Seçili (ACTIVE) — hangi görünüm aktifse o mavi giydirilir
   Kullanım: aktif butona "nct-btn-list-active", "nct-btn-kanban-active"
   veya "nct-btn-calendar-active" (ya da "active") class'ı ekleyin.
   ----------------------------------------------------------- */
.nct-btn-list-active,
.nct-btn-kanban-active,
.nct-btn-calendar-active,
.nct-btn-list.active,
.nct-btn-kanban.active,
.nct-btn-calendar.active {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

.nct-btn-list-active:hover,
.nct-btn-kanban-active:hover,
.nct-btn-calendar-active:hover,
.nct-btn-list.active:hover,
.nct-btn-kanban.active:hover,
.nct-btn-calendar.active:hover {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
}

/* SVG boyutları */
.nct-btn-list svg, .nct-btn-kanban svg, .nct-btn-calendar svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

/* =========================================================
   Özel Hesaplama Butonları (Denizyolu Rate Kart)
   ========================================================= */

.btn-calc-main {
  background-color: #0284c7 !important;
  color: #fff !important;
  border-color: #0284c7 !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 2rem !important;
  height: auto !important;
  box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.3) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.btn-calc-main:hover {
  background-color: #0369a1 !important;
  border-color: #0369a1 !important;
  box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.4) !important;
  transform: translateY(-1px) !important;
}

.btn-calc-engine {
  background-color: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 2rem !important;
  height: auto !important;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.3) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.btn-calc-engine:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}



/* İİptal Butonu */
.btn-cancel {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}
.btn-cancel:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* ========================================================================== */
/* FİNAL SADE & MODERN SCHEDULER CSS (REVİZE 3) */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. GEREKSİZ BUTONLARI GİZLEME */
/* -------------------------------------------------------------------------- */
#Form_7_Sc_1 .k-scheduler-toolbar .k-view-agenda,
#Form_7_Sc_1 .k-scheduler-toolbar .k-view-workweek,
#Form_7_Sc_1 .k-scheduler-toolbar .k-view-timelineweek,
#Form_7_Sc_1 .k-scheduler-toolbar .k-view-timeline,
button[data-name="agenda"],
button[data-name="workWeek"],
button[data-name="timelineWeek"] {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/* 2. GENEL GÖRÜNÜM VE KONTEYNER */
/* -------------------------------------------------------------------------- */
#Form_7_Sc_1.k-scheduler {
    font-family: 'Segoe UI', Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

/* -------------------------------------------------------------------------- */
/* 3. TOOLBAR VE BUTONLAR */
/* -------------------------------------------------------------------------- */
#Form_7_Sc_1 .k-scheduler-toolbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 15px !important;
    border-radius: 12px 12px 0 0 !important;
}

#Form_7_Sc_1 .k-scheduler-toolbar .k-button {
    background-color: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #4b5563 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

#Form_7_Sc_1 .k-scheduler-toolbar .k-button:hover {
    background-color: #f9fafb !important;
}

/* Aktif Sekme */
#Form_7_Sc_1 .k-scheduler-toolbar .k-button.k-state-selected,
#Form_7_Sc_1 .k-scheduler-toolbar .k-button.k-selected {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3) !important;
}
/* ========================================================================== */
/* SADECE BAŞLIKLARI (NCT2 ve GÜNLER) İNCELTME */
/* ========================================================================== */

/* 1. NCT2 Yazan Üst Satır (Grup Başlığı) */
#Form_7_Sc_1 .k-scheduler-header th.k-scheduler-group-cell {
    height: 30px !important;       /* Yüksekliği sabitledik */
    padding: 0 !important;         /* İç boşluğu sildik */
    line-height: 30px !important;  /* Yazıyı ortaladık */
    vertical-align: middle !important;
}

/* 2. Günlerin Yazdığı Alt Satır (Pzt, Salı vb.) - GENEL */
#Form_7_Sc_1 .k-scheduler-header-wrap th {
    height: 30px !important;       
    padding: 0 !important;
    line-height: 30px !important;
    vertical-align: middle !important;
}

/* 3. AYLIK GÖRÜNÜM İÇİN ÖZEL DÜZELTME (Month View Fix) */
/* Aylık görünümde yapı biraz farklıdır, burayı özel olarak ezmemiz gerekir */
.k-scheduler-monthview .k-scheduler-header th {
    height: 30px !important;       
    line-height: 30px !important;  
    padding: 0 !important;         
    vertical-align: middle !important;
}

/* 4. Başlıkların içindeki Link ve Yazıların Boşluklarını Sıfırlama */
/* Kendo bazen th içine koyduğu span/link elementlerine de padding verir, onları siliyoruz */
#Form_7_Sc_1 .k-scheduler-header th .k-link,
#Form_7_Sc_1 .k-scheduler-header th span {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important; /* Blok gibi davranıp ortalansın */
    line-height: normal !important;   /* Satır yüksekliğini dış kutudan alsın */
    min-height: 0 !important;         /* Minimum yükseklik kuralını iptal et */
}
/* ========================================================================== */
/* AYLIK GÖRÜNÜM (MONTH VIEW) BAŞLIKLARINI ZORLA KÜÇÜLTME */
/* ========================================================================== */

/* 1. Aylık Görünümdeki Başlık Satırlarının Yüksekliğini Sabitle */
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header tr,
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header th {
    height: 30px !important;       /* Yüksekliği 30px'e kilitledik */
    line-height: 30px !important;  /* Yazıyı dikeyde ortaladık */
    padding: 0 !important;         /* İç boşlukları sıfırladık */
    vertical-align: middle !important;
}

/* 2. İçindeki Link ve Yazıların Boşluklarını Al */
/* Kendo bazen 'Pazartesi' yazısını bir link (a etiketi) içine koyar */
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header th .k-link,
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header th span {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 30px !important; /* Dış kutuyla aynı hizaya getirdik */
    display: block !important;     /* Tam otursun diye blok yaptık */
    min-height: 0 !important;      /* Kendo'nun min-height kuralını ezdik */
}

/* 3. Gün İsimlerinin Olduğu Satırın Alt Çizgisini İncelt (Opsiyonel Estetik) */
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header th {
    border-bottom: 1px solid #e5e7eb !important;
}
/* -------------------------------------------------------------------------- */
/* 5. IZGARA (GRID) VE SATIR YÜKSEKLİKLERİ */
/* -------------------------------------------------------------------------- */
#Form_7_Sc_1 .k-scheduler-content {
    background-color: #fff !important;
    overflow-y: auto !important; 
}

#Form_7_Sc_1 .k-scheduler-table td, 
#Form_7_Sc_1 .k-scheduler-table th {
    border-color: #f3f4f6 !important;
}

/* Günlük/Haftalık Satır Yüksekliği */
#Form_7_Sc_1 .k-scheduler-dayview .k-scheduler-table tr,
#Form_7_Sc_1 .k-scheduler-weekview .k-scheduler-table tr {
    height: 70px !important;
}

/* --- AYLIK GÖRÜNÜM SATIR YÜKSEKLİĞİ (ARTIRILDI) --- */
/* Ziyaret kutuları büyüdüğü için satırı da 120px'den 140px'e çıkardık */
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-table tr {
    height: 140px !important; 
}
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-table td {
    height: 140px !important;
}

/* Seçili Hücre */
#Form_7_Sc_1 .k-scheduler-table td.k-state-selected,
#Form_7_Sc_1 .k-scheduler-table td.k-selected {
    background-color: #e5e7eb !important;
    background-image: none !important;
    border-color: #d1d5db !important;
}

#Form_7_Sc_1 .k-scheduler-table td:hover {
    background-color: #f3f4f6 !important;
}

/* -------------------------------------------------------------------------- */
/* 6. ETKİNLİK KUTUCUKLARI (EVENTS) - GÜNCELLENDİ */
/* -------------------------------------------------------------------------- */
#Form_7_Sc_1 .k-event {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid #3b82f6 !important;
    color: #1f2937 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    padding: 6px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.4 !important; /* Satır aralığı açıldı */
}

/* --- AYLIK GÖRÜNÜM İÇİN ÖZEL KUTU AYARI (BÜYÜTÜLDÜ) --- */
#Form_7_Sc_1 .k-scheduler-monthview .k-event {
    /* Yazıların okunması için yükseklik artırıldı */
    min-height: 65px !important; 
    height: auto !important;
}

#Form_7_Sc_1 .k-event div, 
#Form_7_Sc_1 .k-event p {
    background: transparent !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* 7. HAFTA SONLARINI KAPATMA */
/* -------------------------------------------------------------------------- */
.k-scheduler-monthview .k-scheduler-table td:nth-child(6),
.k-scheduler-monthview .k-scheduler-table td:nth-child(7),
.k-scheduler-weekview .k-scheduler-table td:nth-child(6),
.k-scheduler-weekview .k-scheduler-table td:nth-child(7) {
    pointer-events: none !important;
    user-select: none !important;
    background-color: #f1f5f9 !important;
    background-image: repeating-linear-gradient(
        45deg,
        #f1f5f9,
        #f1f5f9 10px,
        #e2e8f0 10px,
        #e2e8f0 20px
    ) !important;
}

.k-scheduler-monthview .k-scheduler-header th:nth-child(6),
.k-scheduler-monthview .k-scheduler-header th:nth-child(7),
.k-scheduler-weekview .k-scheduler-header th:nth-child(6),
.k-scheduler-weekview .k-scheduler-header th:nth-child(7) {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
}

.k-scheduler-monthview .k-scheduler-table td:nth-child(6) .k-event,
.k-scheduler-monthview .k-scheduler-table td:nth-child(7) .k-event,
.k-scheduler-weekview .k-scheduler-table td:nth-child(6) .k-event,
.k-scheduler-weekview .k-scheduler-table td:nth-child(7) .k-event {
    opacity: 0.5 !important;
    filter: grayscale(100%) !important;
}

/* ========================================================================== */
/* KESİN ÇÖZÜM: HAFTA SONU TIKLAMA ENGELİ */
/* ========================================================================== */

/* JS bu sınıfı eklediğinde çalışır */
#Form_7_Sc_1.weekend-disabled .k-scheduler-content, 
#Form_7_Sc_1.weekend-disabled .k-scheduler-dayview .k-scheduler-table,
#Form_7_Sc_1.weekend-disabled .k-scheduler-header-wrap {
    
    /* 1. FARE ETKİLEŞİMİNİ FİZİKSEL OLARAK KAPAT */
    pointer-events: none !important; 
    
    /* 2. GÖRSEL OLARAK KAPALI OLDUĞUNU GÖSTER */
    background-color: #e2e8f0 !important; /* Koyu gri */
    opacity: 0.6 !important; /* Hafif silikleştir */
    
    /* Çizgili Taralı Alan (İsteğe bağlı) */
    background-image: repeating-linear-gradient(
        45deg,
        #e2e8f0,
        #e2e8f0 10px,
        #cbd5e1 10px,
        #cbd5e1 20px
    ) !important;
}

/* Header başlığının da rengini değiştir ki belli olsun */
#Form_7_Sc_1.weekend-disabled .k-scheduler-header th {
    background-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}

/* Hafta Sonu Kilidi - Kesin Çözüm */
#Form_7_Sc_1.weekend-locked .k-scheduler-content,
#Form_7_Sc_1.weekend-locked .k-scheduler-header-wrap {
    background-color: #e2e8f0 !important; /* Gri Zemin */
    background-image: repeating-linear-gradient(
        45deg,
        #e2e8f0,
        #e2e8f0 10px,
        #cbd5e1 10px,
        #cbd5e1 20px
    ) !important;
    pointer-events: none !important; /* Tıklamayı donanımsal olarak kapatır */
    opacity: 0.7 !important;
}

/* Header Rengini de Değiştir (Görsel uyarı için) */
#Form_7_Sc_1.weekend-locked .k-scheduler-header th {
    background-color: #cbd5e1 !important; 
    color: #64748b !important;
}

/* ========================================================================== */
/* NCT2 (GRUP BAŞLIĞI) SATIRINI TÜM GÖRÜNÜMLERDE YOK ETME */
/* ========================================================================== */

/* 1. SAĞ TARAF: "NCT2" Yazan İlk Satırı Gizle */
/* Günlük ve Haftalık görünüm için */
#Form_7_Sc_1 .k-scheduler-header table tr:first-child {
    display: none !important;
}

/* 2. SOL TARAF: Buna Karşılık Gelen Boşluğu da Gizle */
/* Bunu yapmazsak saatler aşağıda kalır, hizalama bozulur */
#Form_7_Sc_1 .k-scheduler-times table tr:first-child {
    display: none !important;
}

/* 3. AYLIK GÖRÜNÜM (Month View) İÇİN GARANTİ */
/* Aylık görünümde yapı bazen farklılaşabilir, onu da ayrıca hedefliyoruz */
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header table tr:first-child {
    display: none !important;
}

/* 4. EKSTRA GÜVENLİK: Eğer 'k-scheduler-group-cell' sınıfı varsa onu da gizle */
#Form_7_Sc_1 .k-scheduler-group-cell {
    display: none !important;
}

/* ========================================================================== */
/* AYLIK GÖRÜNÜM HEADER "EZİCİ" KODLARI */
/* ========================================================================== */

/* 1. SATIR (ROW) YÜKSEKLİĞİNİ ZORLA (Tablonun satırına kural koyuyoruz) */
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header table tr {
    height: 25px !important;      /* Satırı 25px'e kilitledik */
}

/* 2. HÜCRE (TH) YÜKSEKLİĞİ - (Daha spesifik bir seçici kullandık) */
/* th.k-scheduler-cell.k-heading-cell diyerek nokta atışı yapıyoruz */
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header th.k-scheduler-cell.k-heading-cell {
    height: 25px !important;
    line-height: 25px !important; /* Yazıyı dikey ortala */
    padding: 0 !important;        /* Tüm iç boşlukları sil */
    font-size: 12px !important;   /* Fontu küçült */
    vertical-align: middle !important;
    border-bottom: 1px solid #ddd !important; /* Alt çizgi netleşsin */
}

/* 3. İÇERİK (LINK) - EN ÖNEMLİ KISIM */
/* Kendo genellikle yazıyı bir <a> etiketi içine koyar ve padding verir. Bunu sıfırlamazsak kutu küçülmez. */
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header th .k-link,
#Form_7_Sc_1 .k-scheduler-monthview .k-scheduler-header th span {
    display: block !important;    /* Kutu gibi davran */
    height: 25px !important;      /* Yüksekliği dış kutuyla aynı yap */
    line-height: 25px !important; /* Yazıyı ortala */
    padding: 0 !important;        /* Linkin iç boşluğunu sil */
    margin: 0 !important;         /* Kenar boşluğunu sil */
    min-height: 0 !important;     /* Kendo'nun min-height korumasını kaldır */
}
/* PDF fontu i�in tanimlama */
@font-face {
    font-family: 'DejaVu Sans';
    src: url('https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVu Sans';
    font-weight: bold;
    src: url('https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf') format('truetype');
}

.nct-btn-r {
  background-color: white !important;
    color: red !important;
    border: 2px solid red !important;
  border-radius:10px !important;
  margin-top:30px !important;
  box-shadow:-3px -1px 4px 0px #f00 !important;
  font-family: Arial, sans-serif !important;
}
.nct-btn-g {
  background-color: white !important;
  color: #04AA6D !important;
  border: 2px solid #04AA6D !important;
  border-radius:10px !important;
  margin-top:30px !important;
  box-shadow:-3px -1px 4px 0px #04AA6D !important;
  font-family: Arial, sans-serif !important;
}
.nct-btn-b {
  background-color: white !important;
  color: #1b53a3 !important;
  border: 2px solid #1b53a3 !important;
  border-radius:10px !important;
  margin-top:30px !important;
}

.nct-btn-f {
  background-color: white;
    color: #6082B6;
    border: 2px solid #6082B6;
  border-radius:10px;
  font-family: Arial, sans-serif;
}

.nct-h1{
  padding-left: 10px;
  border-radius: 10px;
  font-family: Arial, sans-serif;
}

.k-button-solid-base.nct-okr-btn
.k-button-solid-base.nct-okr-btn-r,
.k-button-solid-base.nct-okr-btn-g,
.k-button-solid-base.nct-okr-btn-b,
.k-button-solid-base.nct-okr-btn-f {
  font-size: 12px !important;
  border-radius:50px;
  color:#222d65;
  font-family: Arial, sans-serif;
}
.k-button-solid-base.nct-okr-btn {
  background-color: #ffffff90;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center;
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px !important;
  height: 50px !important;
  border-radius: 125px;
  z-index: 999;
  cursor: pointer;
  font-size: 25px !important;
  line-height: 25px;
  padding: 0 10px !important; 
  border-right: 3px solid #2980b9;
  border-bottom: 4px solid #2980b9;
  border-left: 1px solid #3498db;
  border-top: 1px solid #3498db;
  font-family: Arial, sans-serif;
}
.k-button-solid-base.nct-okr-btn:hover {
  border-right: 1px solid #2980b9;
  border-bottom: 2px solid #2980b9;
  border-left: 1px solid #3498db;
  border-top: 1px solid #3498db;
  font-family: Arial, sans-serif;
}
.k-button-solid-base.nct-okr-btn-1 {
  right: 25px;
 font-family: Arial, sans-serif;
}
.k-button-solid-base.nct-okr-btn-2 {
  right: 75px;
 font-family: Arial, sans-serif;
}
.k-button-solid-base.nct-okr-btn-3 {
  right: 125px;
 font-family: Arial, sans-serif;
}
.k-button-solid-base.nct-okr-btn-4 {
  right: 175px;
 font-family: Arial, sans-serif;
}
.k-button-solid-base.nct-okr-btn-5 {
  right: 225px;
 font-family: Arial, sans-serif;
}
.k-button-solid-base.nct-okr-btn-save {
  background-image: url("https://cdn2.iconfinder.com/data/icons/leto-most-searched-mix-4/64/__download_save_diskette-512.png");
}
.k-button-solid-base.nct-okr-btn-delete {
  background-image: url("https://cdn0.iconfinder.com/data/icons/leto-most-searched-mix-2/64/_delete_trash-512.png");
}
.k-button-solid-base.nct-okr-btn-new {
  background-image: url("https://cdn0.iconfinder.com/data/icons/leto-most-searched-mix-2/64/_add_plus_new-512.png");
}
.k-button-solid-base.nct-okr-btn-schema {
  background-image: url("https://cdn0.iconfinder.com/data/icons/leto-blue-project-management/64/_-21-512.png");
}

.k-button-solid-base.nct-okr-btn-bring {
  background-image: url("https://cdn3.iconfinder.com/data/icons/leto-editing-tools/64/__clone_copy_bottom_object_layer-512.png");


}

.k-button-solid-base.nct-okr-btn-edit {
  background-image: url("https://cdn2.iconfinder.com/data/icons/leto-most-searched-mix-6/64/__column_data_edit-512.png");
}

.k-button-solid-base.nct-okr-btn-copy {
  background-image: url("https://cdn3.iconfinder.com/data/icons/leto-editing-tools/64/__layers_copy_objects_swap-512.png");
}

.k-button-solid-base.nct-okr-btn-refresh {
  background-image: url("https://cdn2.iconfinder.com/data/icons/leto-blue-big-data/64/big_data-14-512.png");
}

.k-button-solid-base.nct-okr-btn-value{
  background-image: url("https://cdn0.iconfinder.com/data/icons/leto-survey-rating/64/__choice_hand_select_checkmark-512.png");
}
.k-button-solid-base.nct-okr-btn-target{
  background-image: url("https://cdn1.iconfinder.com/data/icons/leto-ads-marketing/64/__target_audience_targetting_market-1024.png");
}
.nct-okr-text {
  border-radius: 50px !important;
  font-family: Arial, sans-serif;
}
.nct-okr-textmulti {
  border-radius: 20px !important;
  font-family: Arial, sans-serif;
}
.nct-okr-numeric {
  border-radius: 50px !important;
  font-family: Arial, sans-serif;
}
.nct-okr-label {
  text-shadow: 1px 1px 2px #ccc;
  font-family: Arial, sans-serif;
}
.k-combobox.nct-okr-dropdown {
  height: 30px !important;
  border-radius: 50px !important;
  box-shadow: 2px 2px 2px #ccc;
  font-family: Arial, sans-serif;
}

.nct-h1-okr, .nct-h2-okr, .nct-h3-okr, .nct-h4-okr {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.02), rgba(0,0,0,.05)) !important;
  color:#222d65  !important;
  border-left: 10px solid #222d65;
  border-bottom: 1px solid #222d65;
  border-radius:20px;
  font-family: Tahoma !important;
  font-weight:bold !important;
  text-align:left !important;
  height:30px !important;
  line-height:30px !important;
  padding:0;
  margin:0;
  padding-left: 10px;
  font-family: Arial, sans-serif;
}

.nct-h1-okr {
  font-size:20px !important;
  color: #222d65 !important;
  border-left: 10px solid #222d65;
  border-bottom: 1px solid #222d65;
  font-family: Arial, sans-serif;
}
.nct-h2-okr {
  font-size:16px !important;
  color: #222d65 !important;
  border-left: 10px solid #222d65;
  border-bottom: 1px solid #222d65;
  font-family: Arial, sans-serif;
}
.nct-h3-okr {
  font-size:14px !important;
  color:#222d65 !important;
  border-left: 10px solid #222d65;
  border-bottom: 1px solid #222d65;
  font-family: Arial, sans-serif;
}
.nct-h4-okr {
  font-size:13px !important;
  color: #222d65 !important;
  border-left: 10px solid #222d65;
  border-bottom: 1px solid #222d65;
  font-family: Arial, sans-serif;
}


 
/* =========================================================
   DateTime (Kendo DateTimePicker / DatePicker / TimePicker)
   — Xpoda Tasarımı
   Tarih & saat seçici alanları. Textbox, Dropdown ve buton
   sistemiyle aynı palet ve ölçüler.
   Bu dosyayı Xpoda'ya ekleyin; mevcut DateTimePicker markup'ı
   (span.k-datetimepicker) ve açılan takvim/saat popup'ı
   otomatik olarak bu tasarımı alır.

   NOT: Xpoda HTML'ine müdahale edilemediği için tüm özellikler
   !important ile verilir — Kendo teması ve inline stiller ezilir.
   Örnekler: datetime.html
   ========================================================= */

:root {
  --dt-blue-600: #2563eb;
  --dt-blue-700: #1d4ed8;
  --dt-blue-100: #dbeafe;
  --dt-blue-50:  #eff6ff;
  --dt-slate-900: #0f172a;
  --dt-slate-700: #334155;
  --dt-slate-600: #475569;
  --dt-slate-500: #64748b;
  --dt-slate-400: #94a3b8;
  --dt-slate-300: #cbd5e1;
  --dt-slate-200: #e2e8f0;
  --dt-slate-100: #f1f5f9;
  --dt-slate-50:  #f8fafc;
  --dt-radius: 6px;
  --dt-height: 36px;
  --dt-font-size: 12.5px;
}

/* ---------- Giriş kutusu (kapalı durum) ---------- */
span.k-input:is(.k-datetimepicker, .k-datepicker, .k-timepicker) {
  height: var(--dt-height) !important;
  border: 1px solid var(--dt-slate-300) !important;
  border-radius: var(--dt-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: border-color 0.13s ease, box-shadow 0.13s ease !important;
}
span.k-input:is(.k-datetimepicker, .k-datepicker, .k-timepicker):hover {
  border-color: var(--dt-slate-400) !important;
}
span.k-input:is(.k-datetimepicker, .k-datepicker, .k-timepicker):focus-within {
  border-color: var(--dt-blue-600) !important;
  box-shadow: 0 0 0 3px var(--dt-blue-100) !important;
}

/* ---------- İç Input Alanı ---------- */
:is(.k-datetimepicker, .k-datepicker, .k-timepicker) .k-input-inner {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  font-size: var(--dt-font-size) !important;
  color: var(--dt-slate-700) !important;
  min-width: 0 !important;
  flex: 1 !important;
  height: 100% !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
:is(.k-datetimepicker, .k-datepicker, .k-timepicker) .k-input-inner::placeholder {
  color: var(--dt-slate-400) !important;
}

/* ---------- Takvim / Saat tetikleyici butonları ---------- */
:is(.k-datetimepicker, .k-datepicker, .k-timepicker) .k-input-button {
  border: none !important;
  border-left: 1px solid var(--dt-slate-200) !important;
  background: transparent !important;
  padding: 0 9px !important;
  min-width: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--dt-slate-500) !important;
  transition: background 0.13s ease, color 0.13s ease !important;
}
:is(.k-datetimepicker, .k-datepicker, .k-timepicker) .k-input-button:hover {
  background: var(--dt-slate-100) !important;
  color: var(--dt-slate-900) !important;
}
:is(.k-datetimepicker, .k-datepicker, .k-timepicker) .k-input-button:active {
  background: var(--dt-blue-50) !important;
  color: var(--dt-blue-700) !important;
}
:is(.k-datetimepicker, .k-datepicker, .k-timepicker) .k-input-button .k-icon svg,
:is(.k-datetimepicker, .k-datepicker, .k-timepicker) .k-input-button svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: currentColor !important;
}

/* ---------- Devre dışı ---------- */
span.k-input:is(.k-datetimepicker, .k-datepicker, .k-timepicker).k-disabled,
span.k-input:is(.k-datetimepicker, .k-datepicker, .k-timepicker)[aria-disabled="true"] {
  opacity: 0.55 !important;
  background: var(--dt-slate-50) !important;
  cursor: not-allowed !important;
}
span.k-input:is(.k-datetimepicker, .k-datepicker, .k-timepicker).k-disabled .k-input-inner,
span.k-input:is(.k-datetimepicker, .k-datepicker, .k-timepicker).k-disabled .k-input-button {
  cursor: not-allowed !important;
}

/* =========================================================
   Açılır popup (takvim + saat)
   Kendo popup'ı body altına .k-animation-container içine
   render eder; bu yüzden seçiciler global yazılır.
   ========================================================= */
.k-animation-container :is(.k-popup, .k-datetime-container, .k-calendar-container, .k-timeselector) {
  border: 1px solid var(--dt-slate-200) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  /* overflow: hidden !important; Alt menülerin (örn. Kendo Context Menu) taşmasını engellediği için kapatıldı. */
  font-size: var(--dt-font-size) !important;
}

/* ---------- Takvim ---------- */
.k-calendar {
  border: none !important;
  background: transparent !important;
  padding: 6px !important;
  font-size: var(--dt-font-size) !important;
}

/* Üst başlık (ay/yıl + ileri/geri okları) */
.k-calendar .k-calendar-header,
.k-calendar .k-header {
  padding: 4px 4px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.k-calendar .k-calendar-title,
.k-calendar .k-nav-fast {
  font-weight: 600 !important;
  color: var(--dt-slate-900) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
}
.k-calendar .k-calendar-title:hover,
.k-calendar .k-nav-fast:hover { background: var(--dt-slate-100) !important; }
.k-calendar .k-calendar-nav-prev,
.k-calendar .k-calendar-nav-next,
.k-calendar .k-nav-prev,
.k-calendar .k-nav-next {
  background: transparent !important;
  border: none !important;
  border-radius: 5px !important;
  color: var(--dt-slate-600) !important;
  cursor: pointer !important;
}
.k-calendar .k-calendar-nav-prev:hover,
.k-calendar .k-calendar-nav-next:hover,
.k-calendar .k-nav-prev:hover,
.k-calendar .k-nav-next:hover { background: var(--dt-slate-100) !important; color: var(--dt-slate-900) !important; }

/* Gün başlıkları (Pt, Sa, ...) */
.k-calendar .k-calendar-weekdays th,
.k-calendar thead th {
  font-weight: 600 !important;
  color: var(--dt-slate-400) !important;
  font-size: 11px !important;
  padding: 4px 0 !important;
}

/* Gün hücreleri */
.k-calendar .k-calendar-td .k-link,
.k-calendar td .k-link {
  border-radius: 6px !important;
  color: var(--dt-slate-700) !important;
  font-size: var(--dt-font-size) !important;
  transition: background 0.1s ease, color 0.1s ease !important;
}
.k-calendar .k-calendar-td:hover .k-link,
.k-calendar td:hover .k-link,
.k-calendar .k-calendar-td.k-hover .k-link {
  background: var(--dt-slate-100) !important;
  color: var(--dt-slate-900) !important;
}
/* Bugün */
.k-calendar .k-today .k-link,
.k-calendar .k-calendar-td.k-today .k-link {
  color: var(--dt-blue-700) !important;
  box-shadow: inset 0 0 0 1px var(--dt-blue-100) !important;
}
/* Seçili gün */
.k-calendar .k-selected .k-link,
.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-state-selected .k-link {
  background: var(--dt-blue-600) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.k-calendar .k-selected:hover .k-link { background: var(--dt-blue-700) !important; }
/* Ay/diğer aya ait soluk günler */
.k-calendar .k-other-month .k-link,
.k-calendar .k-out-of-range .k-link { color: var(--dt-slate-400) !important; }

/* ---------- Saat listesi ---------- */
.k-timeselector .k-time-header,
.k-time-container .k-time-header {
  font-weight: 600 !important;
  color: var(--dt-slate-900) !important;
  padding: 6px 10px !important;
}
.k-time-list .k-item,
.k-time-container .k-item,
.k-time-list-wrapper .k-item {
  font-size: var(--dt-font-size) !important;
  color: var(--dt-slate-700) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
}
.k-time-list .k-item:hover,
.k-time-container .k-item:hover { background: var(--dt-slate-100) !important; color: var(--dt-slate-900) !important; }
.k-time-list .k-item.k-selected,
.k-time-container .k-item.k-selected,
.k-time-list .k-item.k-state-selected {
  background: var(--dt-blue-50) !important;
  color: var(--dt-blue-700) !important;
  font-weight: 600 !important;
}

/* ---------- Alt buton grubu (Bugün / Ayarla / İptal) ---------- */
.k-datetime-footer,
.k-calendar-footer,
.k-datetime-buttongroup {
  display: flex !important;
  gap: 8px !important;
  padding: 8px !important;
  border-top: 1px solid var(--dt-slate-100) !important;
}
:is(.k-datetime-footer, .k-calendar-footer, .k-datetime-buttongroup) .k-button,
.k-calendar .k-calendar-footer .k-button,
.k-calendar .k-footer .k-nav-today {
  border-radius: var(--dt-radius) !important;
  font-size: var(--dt-font-size) !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
/* İkincil (İptal / Bugün) */
:is(.k-datetime-footer, .k-calendar-footer, .k-datetime-buttongroup) .k-button {
  background: #fff !important;
  border: 1px solid var(--dt-slate-300) !important;
  color: var(--dt-slate-700) !important;
}
:is(.k-datetime-footer, .k-calendar-footer, .k-datetime-buttongroup) .k-button:hover {
  background: var(--dt-slate-50) !important;
  border-color: var(--dt-slate-400) !important;
}
/* Birincil (Ayarla / Set) */
:is(.k-datetime-footer, .k-calendar-footer, .k-datetime-buttongroup) .k-button.k-primary,
:is(.k-datetime-footer, .k-calendar-footer, .k-datetime-buttongroup) .k-button.k-button-solid-primary {
  background: var(--dt-blue-600) !important;
  border-color: var(--dt-blue-600) !important;
  color: #fff !important;
}
:is(.k-datetime-footer, .k-calendar-footer, .k-datetime-buttongroup) .k-button.k-primary:hover,
:is(.k-datetime-footer, .k-calendar-footer, .k-datetime-buttongroup) .k-button.k-button-solid-primary:hover {
  background: var(--dt-blue-700) !important;
  border-color: var(--dt-blue-700) !important;
}

/* =========================================================
   Dropdown (Kendo ComboBox) — Xpoda Tasarımı
   Buton sistemiyle (Buttons/buttons.css) aynı palet ve
   ölçüler kullanılır. Bu dosyayı Xpoda'ya ekleyin;
   mevcut ComboBox markup'ı otomatik olarak etkilenir.

   NOT: Xpoda HTML'ine müdahale edilemediği için tüm
   özellikler !important ile verilir — Kendo teması ve
   inline stiller bu sayede ezilir.
   Örnekler: dropdown.html
   ========================================================= */

:root {
  --dd-blue-600: #2563eb;
  --dd-blue-700: #1d4ed8;
  --dd-blue-100: #dbeafe;
  --dd-blue-50:  #eff6ff;
  --dd-slate-900: #0f172a;
  --dd-slate-700: #334155;
  --dd-slate-600: #475569;
  --dd-slate-500: #64748b;
  --dd-slate-400: #94a3b8;
  --dd-slate-300: #cbd5e1;
  --dd-slate-200: #e2e8f0;
  --dd-slate-100: #f1f5f9;
  --dd-slate-50:  #f8fafc;
  --dd-radius: 6px;
  --dd-height: 36px;
  --dd-font-size: 12.5px;
}

/* ---------- Giriş kutusu (kapalı durum) ---------- */
span.k-input:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) {
  height: var(--dd-height) !important;
  border: 1px solid var(--dd-slate-300) !important;
  border-radius: var(--dd-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  transition: border-color 0.13s ease, box-shadow 0.13s ease !important;
}
span.k-input:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect):hover {
  border-color: var(--dd-slate-400) !important;
}
span.k-input:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect):focus-within {
  border-color: var(--dd-blue-600) !important;
  box-shadow: 0 0 0 3px var(--dd-blue-100) !important;
}

:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-input-inner {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  font-size: var(--dd-font-size) !important;
  color: var(--dd-slate-700) !important;
  min-width: 0 !important;
  flex: 1 !important;
  box-shadow: none !important;
}
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-input-inner::placeholder {
  color: var(--dd-slate-400) !important;
}

/* ---------- Açılır ok butonu ---------- */
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-input-button {
  border: none !important;
  background: transparent !important;
  padding: 0 9px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: none !important;
  transition: background 0.13s ease !important;
}
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-input-button:hover {
  background: var(--dd-slate-100) !important;
}
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-input-button .k-icon svg,
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-input-button svg {
  width: 12px !important;
  height: 12px !important;
  fill: var(--dd-slate-500) !important;
  transition: transform 0.15s ease, fill 0.13s ease !important;
}
/* Açıkken / odaktayken ok maviye boyanır */
span.k-input:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect):focus-within .k-input-button svg,
span.k-input:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect)[aria-expanded="true"] .k-input-button svg {
  fill: var(--dd-blue-600) !important;
}

/* ---------- Temizle (x) ikonu ---------- */
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-clear-value {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 4px !important;
  cursor: pointer !important;
  opacity: 0.55 !important;
  transition: opacity 0.13s ease !important;
}
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-clear-value:hover { opacity: 1 !important; }
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-clear-value svg {
  width: 11px !important;
  height: 11px !important;
  fill: var(--dd-slate-500) !important;
}
:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect) .k-clear-value.k-hidden { display: none !important; }

/* ---------- Devre dışı ---------- */
span.k-input:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect).k-disabled,
span.k-input:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect)[aria-disabled="true"] {
  opacity: 0.55 !important;
  background: var(--dd-slate-50) !important;
  cursor: not-allowed !important;
}
span.k-input:is(.k-combobox, .k-dropdownlist, .k-dropdown, .k-autocomplete, .k-multiselect).k-disabled .k-input-inner {
  cursor: not-allowed !important;
}

/* =========================================================
   Açılır liste (popup)
   Kendo popup'ı body altına .k-animation-container içine
   render eder; bu yüzden seçiciler global yazılır.
   ========================================================= */
.k-animation-container .k-popup,
.k-animation-container .k-list-container {
  border: 1px solid var(--dd-slate-200) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  /* overflow: hidden !important; Alt menülerin (örn. Export Settings) taşmasını/açılmasını engellediği için kapatıldı. */
}

.k-list-container .k-list {
  font-size: var(--dd-font-size) !important;
}

.k-list-ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 5px !important;
}

.k-list-item {
  padding: 8px 10px !important;
  border-radius: 5px !important;
  font-size: var(--dd-font-size) !important;
  font-weight: 500 !important;
  color: var(--dd-slate-700) !important;
  cursor: pointer !important;
  background: none !important;
  box-shadow: none !important;
  transition: background 0.1s ease !important;
}
.k-list-item:hover,
.k-list-item.k-hover {
  background: var(--dd-slate-100) !important;
  color: var(--dd-slate-900) !important;
}
.k-list-item.k-selected {
  background: var(--dd-blue-50) !important;
  color: var(--dd-blue-700) !important;
}
.k-list-item.k-selected:hover,
.k-list-item.k-selected.k-hover {
  background: var(--dd-blue-100) !important;
}
.k-list-item .k-list-item-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Arama eşleşme vurgusu (filter: contains) */
.k-list-item .k-list-item-text strong,
.k-list-item .k-highlight {
  color: var(--dd-blue-700) !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* Sonuç yok mesajı */
.k-list-container .k-nodata,
.k-no-data {
  padding: 14px 12px !important;
  font-size: var(--dd-font-size) !important;
  color: var(--dd-slate-400) !important;
  text-align: center !important;
}
.k-animation-container {
  z-index: 2147483647 !important;
}
/* =========================================================
   FigureBox (Kendo NumericTextBox) — Xpoda Tasarımı
   Sayısal giriş alanları (spin / artır-azalt oklu).
   Textbox & buton sistemiyle aynı palet ve ölçüler.
   Bu dosyayı Xpoda'ya ekleyin; mevcut NumericTextBox markup'ı
   (span.k-numerictextbox) otomatik olarak bu tasarımı alır.
   ========================================================= */

:root {
  --fb-blue-600: #2563eb;
  --fb-blue-700: #1d4ed8;
  --fb-blue-100: #dbeafe;
  --fb-blue-50:  #eff6ff;
  --fb-red-500:  #ef4444;
  --fb-red-100:  #fee2e2;
  --fb-slate-900: #0f172a;
  --fb-slate-700: #334155;
  --fb-slate-600: #475569;
  --fb-slate-500: #64748b;
  --fb-slate-400: #94a3b8;
  --fb-slate-300: #cbd5e1;
  --fb-slate-200: #e2e8f0;
  --fb-slate-100: #f1f5f9;
  --fb-slate-50:  #f8fafc;
  --fb-radius: 6px;
  --fb-height: 36px;
  --fb-font-size: 12.5px;
}

/* ---------- Kapsayıcı (sayısal kutu) ---------- */
span.k-input.k-numerictextbox {
  height: var(--fb-height) !important;
  border: 1px solid var(--fb-slate-300) !important;
  border-radius: var(--fb-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: border-color 0.13s ease, box-shadow 0.13s ease !important;
}

span.k-input.k-numerictextbox:hover {
  border-color: var(--fb-slate-400) !important;
}

span.k-input.k-numerictextbox:focus-within {
  border-color: var(--fb-blue-600) !important;
  box-shadow: 0 0 0 3px var(--fb-blue-100) !important;
}

/* ---------- İç Input Alanı ---------- */
.k-numerictextbox .k-input-inner {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  font-size: var(--fb-font-size) !important;
  color: var(--fb-slate-700) !important;
  min-width: 0 !important;
  flex: 1 !important;
  height: 100% !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.k-numerictextbox .k-input-inner::placeholder {
  color: var(--fb-slate-400) !important;
}

/* ---------- Spin (Artır / Azalt) Sütunu ----------
   ÖNEMLİ: Spinner'ın YERLEŞİMİ ve GÖRÜNÜRLÜĞÜ Kendo'da bırakılır.
   Studio'dan spin butonlarını kapatırsanız (spinners: false) Kendo
   onları gizler/oluşturmaz; bu dosya display'i !important ile
   ZORLAMAZ — yoksa kapalı spinner geri görünür hâle gelirdi.
   Burada SADECE renk / kenarlık / ikon boyutu ezilir. */
.k-numerictextbox .k-input-spinner.k-spin-button {
  border-left: 1px solid var(--fb-slate-200) !important;
  background: transparent !important;
}

/* Tek tek ok butonları — Kendo'nun gri zeminini/temasını ez (yalnız görünüm) */
.k-numerictextbox .k-spin-button > .k-button {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fb-slate-500) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

/* İki ok arasına ince ayraç */
.k-numerictextbox .k-spin-button > .k-button.k-spinner-increase {
  border-bottom: 1px solid var(--fb-slate-200) !important;
}

.k-numerictextbox .k-spin-button > .k-button:hover {
  background: var(--fb-slate-100) !important;
  color: var(--fb-slate-900) !important;
}

.k-numerictextbox .k-spin-button > .k-button:active {
  background: var(--fb-blue-50) !important;
  color: var(--fb-blue-700) !important;
}

/* Ok ikonları (Kendo SVG caret) */
.k-numerictextbox .k-spin-button .k-svg-icon svg {
  width: 12px !important;
  height: 12px !important;
  fill: currentColor !important;
}

/* Spinner Studio'dan kapatıldıysa (gizli) — asla zorla gösterme */
.k-numerictextbox .k-input-spinner.k-hidden,
.k-numerictextbox .k-input-spinner[style*="display: none"],
.k-numerictextbox .k-input-spinner[style*="display:none"] { display: none !important; }

/* ---------- Doğrulama (geçersiz değer) ---------- */
.k-numerictextbox .k-input-validation-icon {
  color: var(--fb-red-500) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 6px !important;
  flex: none !important;
}
.k-numerictextbox .k-input-validation-icon.k-hidden { display: none !important; }
.k-numerictextbox .k-input-validation-icon svg { width: 15px !important; height: 15px !important; fill: currentColor !important; }

span.k-input.k-numerictextbox:has(.k-input-validation-icon:not(.k-hidden)),
span.k-input.k-numerictextbox.k-invalid {
  border-color: var(--fb-red-500) !important;
}
span.k-input.k-numerictextbox:has(.k-input-validation-icon:not(.k-hidden)):focus-within,
span.k-input.k-numerictextbox.k-invalid:focus-within {
  box-shadow: 0 0 0 3px var(--fb-red-100) !important;
}

/* ---------- Devre Dışı Durumu ---------- */
span.k-input.k-numerictextbox.k-disabled,
span.k-input.k-numerictextbox[aria-disabled="true"] {
  opacity: 0.55 !important;
  background: var(--fb-slate-50) !important;
  cursor: not-allowed !important;
}
span.k-input.k-numerictextbox.k-disabled .k-input-inner,
span.k-input.k-numerictextbox.k-disabled .k-spin-button > .k-button {
  cursor: not-allowed !important;
}

.k-numerictextbox .k-select[style*="display: none"], .k-numerictextbox .k-select[style*="display:none"] { display: none !important; }
.k-numerictextbox .k-input-spinner[style*="display: none"], .k-numerictextbox .k-input-spinner[style*="display:none"] { display: none !important; }


.k-numerictextbox .k-select.k-hidden { display: none !important; }
.k-numerictextbox .k-input-spinner.k-hidden { display: none !important; }


#main {
    background-color: #fff !important;
    border-radius: 10px !important;
   -- border-top: 4px solid #e91e63 !important; /* formdaki pembe ?izgiye benzer */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    padding: 6px !important;
    margin: 10px !important;
    transition: box-shadow 0.3s ease !important;
}

#main:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}


#myTabContent1 > div:first-child { 
    background-color: #ffffff !important; /* Beyaz arka plan */ 
    border: none !important;
} 


#myTabContent1 > div:first-child { 
    background-color: #ffffff !important; /* Beyaz arka plan */ 
    border: none !important;
} 
.tab-content .containerdr {
    background-color: #ffffff !important;
}

#myTabContent1  { 
    background-color: #ffffff !important; /* Beyaz arka plan */ 
    border: none !important;
}
.tab-content{ 
    padding: 6px !important;
    border: none !important;
} 

.card-body{ 
    background-color: #ffffff !important; /* Beyaz arka plan */ 
    border: none !important;
} 

.label-boxed-list {
  

  padding: 4px;                                   /* I� bosluk */
  border-radius: 8px;                             /* K�seler yuvarlatilmis */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;       /* Hafif g�lge efekti */
  display: inline-block;                          /* Kenarlik ve padding d�zg�n g�z�ks�n */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji" !important; /* Tailwind default sans */
}
.column-text {
    font-size: 16px !important;
    
    /* 1. Modern Yazı Tipi Ailesi (Sırasıyla en uygununu seçer) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    
    /* 2. Yazı Rengi: Tam siyah (#000) yerine koyu gri gözü daha az yorar ve premium durur */
    color: #374151 !important; /* Koyu Gri */
    
    /* 3. Yazı Kalınlığı: 400 normaldir, 500 veya 600 daha belirgin yapar */
    font-weight: 500 !important; 
    
    /* 4. Okunabilirlik Ayarları */
    letter-spacing: 0.02em; /* Harfleri çok hafif açar, ferahlık katar */
    line-height: 1.5;       /* Satır yüksekliğini dengeler */
    
    /* 5. Yazı Kenar Yumuşatma (Özellikle ekranlarda net görünmesi için) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.column-badge {
    /* 1. Renkler (Görseldeki Ton) */
    background-color: #166572 !important; /* Mat Petrol Mavisi */
    color: #ffffff !important;             /* Beyaz Yazı */
    border: 1px solid #ffffff !important;  /* Etrafında ince beyaz halka (Görseldeki gibi) */

    /* 2. Şekil ve Boyut */
    min-width: 25px !important;     /* Genişlik */
    height: 25px !important;        /* Yükseklik */
    border-radius: 50% !important;  /* Tam Yuvarlak */
    
    /* 3. İçerik Hizalama */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    
    /* 4. Font Ayarları */
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: "Segoe UI", Roboto, Helvetica, sans-serif !important;

    /* 5. Estetik Detay (Hafif Gölge) */
    box-shadow: 0 3px 6px rgba(22, 101, 114, 0.25) !important; 
    
    /* Yanındaki metinle hizalı durması için */
    vertical-align: middle !important;
    margin-right: 8px !important; /* Yazı ile badge arasına boşluk */
}

/* Kartın içindeki tüm etiketleri hedefle */
.k-taskboard-card label {
    /* 1. İstenilen Punto */
    font-size: 15px !important;
    
    /* 2. Modern Okunabilirlik Ayarları */
    font-family: "Segoe UI", Roboto, Helvetica, sans-serif !important;
    font-weight: 500 !important; /* Yazıyı biraz dolgunlaştırır, okumayı kolaylaştırır */
    line-height: 1.2 !important; /* Satır yüksekliğini dengeler */
    
    /* Taşmaları engellemek için güvenlik ayarı */
  /*  white-space: nowrap !important;  Yazı alt satıra kayıp düzeni bozmasın */
    overflow: visible !important;   /* Kutu dışına taşarsa da görünsün */
}

/* .k-taskboard-column { */
    /* /* 1. Zemin Rengi (Garanti olsun) */ */
    /* background-color: #ffffff !important; */
    
    /* /* 2. Soft Kenarlık (Çok açık gri) */ */
    /* border: 1px solid #eaecf0 !important; */
    
    /* /* 3. Köşeleri Yumuşatma */ */
    /* border-radius: 12px !important; */
    
    /* /* 4. Derinlik (Hafif Gölge) - İsteğe bağlı, çok şık durur */ */
    /* box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03),  */
                /* 0 10px 15px -3px rgba(0, 0, 0, 0.03) !important; */
    
    /* /* 5. Kolonlar arası mesafe (Yapışık durmamaları için şart) */ */
    /* margin: 0 10px !important; */
    
 
    
    /* /* Eğer yükseklik sorunu olursa taşmaları gizle */ */
    /* overflow: hidden !important;  */
/* } */





/* 4. Kolon Tasarımı (Margin azaltıldı) */
.k-taskboard-column {
    background-color: #ffffff !important;
    border: 1px solid #eaecf0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 
                0 10px 15px -3px rgba(0, 0, 0, 0.03) !important;
    
    /* GÜNCELLEME: Margin değerini 10px'den 4px'e düşürdük */
    margin: 0 4px !important; 
    
    /* İçeriğin kenarlara yapışmaması için padding (İsteğe bağlı) */
    padding: 5px !important; 
    
    overflow: hidden !important; 
}

.k-taskboard-column-action-button[data-command="AddCardCommand"] {
    display: none !important;
}

button[data-command="EditColumnCommand"] {
    display: none !important;
}



#Form_1_Kanban_1 > div:first-child > div {
    display: none !important;
}


#Form_1_Kanban_1 div.k-taskboard-column-cards-container div.k-taskboard-card button.k-taskboard-column-menu-button {
    display: none !important;
}


/* Form_2_Lbl_4 ID'li etiketi gizle */
li[data-id="Form_1_Lbl_4"] {
    display: none !important;
    visibility: hidden !important;
}


/* 3. Ana Tahtanin I� Kenar Bosluklarini (Padding) Sifirla */
#Form_1_Kanban_1 .k-taskboard-content,
#Form_1_Kanban_1 .k-taskboard-columns-container {
    padding: 0 !important; /* Kendo'nun varsayilan boslugunu siler */
    margin: 0 !important;
}

/* 1. Tepedeki gereksiz bosluk yapan Lbl_5'i gizle (HTML'de Lbl_5 var) */
li[data-id="Form_1_Lbl_5"] {
    display: none !important;
}

/* 2. Kanban Nesnesini 40px yukari tasi */
li[data-id="Form_1_Kanban_1"] {
    /* Transform en g�venli y�ntemdir, diger �geleri bozmadan kaydirir */
    transform: translateY(-40px) !important; 
    
    /* Alternatif olarak top degerini ezmek isterseniz bunu a�abilirsiniz: */
    /* top: -35px !important; */ 
}
.nct-label-must {
	    color: #1e3a8a !important; /* lacivert-mavi arasi ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: left !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.3s ease, transform 0.2s ease !important;
}
.nct-label-must::after {
  content: "  *" !important; /* son karakterin ne oldugunu manuel yazman gerek */
  color: red !important;
  font-weight: bold !important;
}

.nct-label {
    color: #1e3a8a !important; /* lacivert-mavi arasi ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: left !important;
    height: 22px !important;
    line-height: 22px !important;
   
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.nct-label-check {
    color: red !important; /* lacivert-mavi arasi ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: center!important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}


/* =========================================================
   NCT Typography & Labels
   Modernize edilmiş başlık ve etiket (label) sınıfları
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --lbl-primary: #1e3a8a; /* Lacivert */
  --lbl-secondary: #475569; /* Slate */
  --lbl-danger: #dc2626; /* Kırmızı */
  --lbl-success: #16a34a; /* Yeşil */
  --lbl-font: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
  --lbl-size: 14px;   /* tüm etiketler: 16 → 14 (15 istersen 15px) */
}

/* Standart Label */
.nct-label {
    color: #1e3a8a !important;
    /* lacivert-mavi arası ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: left !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: var(--lbl-size) !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
.nct-label-fontsuz {
    color: #1e3a8a !important;
    /* lacivert-mavi arası ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: left !important;
    height: 22px !important;
    line-height: 22px !important;
  
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
.nct-label-green {
    color: #10b981 !important;
    /* lacivert-mavi arası ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: left !important;
    height: 22px !important;
    line-height: 22px !important;
  
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
/* Kırmızı Label */
.nct-label-red {
    color: #1e3a8a !important;
    /* lacivert-mavi arası ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: left !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    font-size: var(--lbl-size) !important;
}

/* Checkbox Label */
.nct-label-checkbox {
    color: #1e3a8a !important;
    /* lacivert-mavi arası ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: red !important;
    height: 22px !important;
    line-height: 22px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    font-size: var(--lbl-size) !important;
}

/* Sağ Yaslı Label */
.nct-label-right {
    color: #1e3a8a !important;
    /* lacivert-mavi arası ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: right !important;
    height: 22px !important;
    line-height: 22px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    font-size: var(--lbl-size) !important;
}

/* Xpoda Özel Seçiciler */
.octopusitem[octopod-customcss=".nct-label"] > label,
[octopod-customcss=".nct-label"] .nct-label {
    color: #1e3a8a !important;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: left !important;
    height: 22px !important;
    line-height: 22px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    font-size: var(--lbl-size) !important;
}

/* Zorunlu Alan Label */
.nct-label-must {
    color: #1e3a8a !important;
    /* lacivert-mavi arası ton */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    text-align: left !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: var(--lbl-size) !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.3s ease, transform 0.2s ease !important;
}

.nct-label-must::after {
    content: "  *" !important;
    color: red !important;
    font-weight: bold !important;
}

/* Başlıklar (Headers) */
.nct-h1,
.nct-h2,
.nct-h3,
.nct-h4 {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #1e3a8a !important;
    /* Modern Indigo */
    font-family: 'Outfit', 'Inter', 'Figtree', 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    width: 100% !important;
    display: block !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
}

.nct-h1::after,
.nct-h2::after,
.nct-h3::after,
.nct-h4::after {
    content: none !important;
    display: none !important;
}

.nct-h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    padding-left: 12px !important;
    padding-bottom: 8px !important;
    margin: 22px 0 12px 0 !important;
    border-left: 5px solid #1e3a8a !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.nct-h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    padding-left: 10px !important;
    padding-bottom: 6px !important;
    margin: 10px 0 10px 0 !important;
    border-left: 4px solid #1e3a8a !important;
    border-bottom: 2px solid #eef2f7 !important;
}

.nct-h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    padding-left: 8px !important;
    padding-bottom: 4px !important;
    margin: 12px 0 8px 0 !important;
    border-left: 3px solid #94a3b8 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.nct-h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding-left: 8px !important;
    padding-bottom: 0 !important;
    margin: 10px 0 6px 0 !important;
    border-left: 2px solid #cbd5e1 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* =========================================================
   Başlık Varyasyonları (Heading Designs)
   ========================================================= */

/* 1. Gradyan Başlık (Gradient Text) */
.nct-h-gradient {
  background: linear-gradient(90deg, #2563eb, #db2777) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important; /* Fallback */
  font-family: var(--lbl-font) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 6px !important;
}
.nct-h-gradient::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 50% !important; /* Metnin yarısı kadar uzunluk */
  height: 4px !important;
  background: linear-gradient(90deg, #2563eb, #db2777) !important; /* Çizgiyi de gradyan yaptık */
  border-radius: 2px !important;
}

/* 2. Altı Çizgili / Vurgulu Başlık (Accent Underlined) */
.nct-h-accent {
  color: var(--lbl-primary) !important;
  font-family: var(--lbl-font) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 6px !important;
}
.nct-h-accent::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 40px !important;
  height: 4px !important;
  background-color: #2563eb !important;
  border-radius: 2px !important;
  transition: width 0.3s ease !important;
}
.nct-h-accent:hover::after {
  width: 100% !important;
}

/* 3. Blok / Sol Kenarlık Vurgulu (Block/Ribbon) */
.nct-h-block {
  color: var(--lbl-primary) !important;
  background-color: #eff6ff !important;
  font-family: var(--lbl-font) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  padding: 8px 14px !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 0 4px 4px 0 !important;
  margin-bottom: 12px !important;
}
.nct-h-block.success {
  background-color: #f0fdf4 !important;
  border-left-color: #16a34a !important;
  color: #166534 !important;
}
.nct-h-block.warning {
  background-color: #fefce8 !important;
  border-left-color: #ca8a04 !important;
  color: #854d0e !important;
}

/* 4. Kategori / Üst Başlık (Overline) */
.nct-h-overline {
  color: var(--lbl-secondary) !important;
  font-family: var(--lbl-font) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 8px !important;
}

/* =========================================================
   Kurumsal Mimari Başlıkları (Corporate Headings)
   ========================================================= */

/* Kurumsal Ana Başlık (H1) */
.nct-corp-h1 {
  color: #0f172a !important; /* Koyu lacivert/siyah */
  font-family: var(--lbl-font) !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #cbd5e1 !important; /* Temiz, tam genişlikte alt çizgi */
}

/* Kurumsal Bölüm Başlığı (H2) */
.nct-corp-h2 {
  color: #1e3a8a !important; /* Kurumsal lacivert */
  font-family: var(--lbl-font) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
/* Sol tarafında şık, kurumsal bir çubuk efekti */
.nct-corp-h2::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 20px !important;
  background-color: #2563eb !important;
  border-radius: 2px !important;
}

/* Kurumsal Bölüm Başlığı (H2) - Alt Çizgili Versiyon */
.nct-corp-h2-underline {
  color: #1e3a8a !important;
  font-family: var(--lbl-font) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #e2e8f0 !important; /* Belirgin alt çizgi */
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
/* Alt çizgili versiyonun yanına da isterseniz bar eklenebilir, ya da sadece çizgi olabilir. İkisini birden kullandım: */
.nct-corp-h2-underline::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 20px !important;
  background-color: #2563eb !important;
  border-radius: 2px !important;
}

/* Kurumsal Alt Bölüm Başlığı (H3) */
.nct-corp-h3 {
  color: #334155 !important; /* Koyu slate */
  font-family: var(--lbl-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px dashed #e2e8f0 !important; /* Kesikli ayrıştırıcı */
  padding-bottom: 6px !important;
}

/* Kurumsal Detay Başlığı (H4) */
.nct-corp-h4 {
  color: #475569 !important; /* Orta slate */
  font-family: var(--lbl-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
}
/* Küçük bir nokta/bullet efekti */
.nct-corp-h4::before {
  content: "•" !important;
  color: #94a3b8 !important;
  margin-right: 6px !important;
  font-size: 16px !important;
}

.modern-warning-badge {
    display: inline-flex;
    align-items: center;
    background-color: #fff5f5; /* �ok hafif kirmizi arka plan */
    color: #e53e3e; /* Modern, canli bir kirmizi */
    border: 1px solid #feb2b2; /* Ince bir sinir �izgisi */
    padding: 6px 12px;
    border-radius: 8px; /* Yumusak k�seler */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

/* �zerine gelince �ok hafif bir derinlik katmak i�in */
.modern-warning-badge:hover {
    background-color: #fff1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Radio group listesini flex konteynere d�n�st�rerek yan yana dizebilirsiniz */
#Form_1_RdGroup_1.k-radio-list,
ul.k-radio-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 15px; /* Se�enekler arasindaki bosluk */
}

/* Her bir liste elemaninin genisligini i�erige g�re ayarlar */
.k-radio-list-item {
  display: inline-flex !important;
  align-items: center;
  margin-bottom: 0 !important; /* Alt alta dururken olusan alt boslugu sifirlar */
}
/* =================================================================== */
/* 1. HEADER ANA KAPLAYICI (STICKY / YAPIŞKAN VE SABİT YÜKSEKLİK)      */
/* =================================================================== */
.page-dashboard header {
    position: sticky !important; /* ARTIK YAPIŞKAN! Sayfa kaysa da üstte kalır */
    top: 0 !important;           /* En tepeye yapışması için */
    background-color: #ffffff !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 0 20px !important;
    z-index: 1000 !important; /* Diğer her şeyin üstünde kalması için */
}

/* =================================================================== */
/* 2. BOOTSTRAP GRID DÜZELTMELERİ (ROW ve COL)                         */
/* =================================================================== */

.page-dashboard header .row {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important; /* Logo sola, Profil sağa iter */
    align-items: center !important;
    height: 100% !important;
}

.page-dashboard header .col-6 {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Sol Taraf (Logo Alanı) */
.page-dashboard header .col-6:first-child {
    justify-content: flex-start !important;
}

/* Sağ Taraf (Profil Alanı) - SAĞA HİZALAMA GARANTİSİ */
.page-dashboard header .col-6:last-child {
    justify-content: flex-end !important;
}

/* =================================================================== */
/* 3. LOGO VE ETİKET AYARLARI                                          */
/* =================================================================== */

.page-dashboard header .logo {
    float: none !important;
    margin: 0 !important;
    max-height: 45px !important;
    width: auto !important;
    display: block !important;
}

.page-dashboard header #span-environment {
    position: static !important;
    margin-left: 15px !important;
    transform: none !important;
    left: auto !important;
}
/* =================================================================== */
/* DÜZELTİLMİŞ PROFİL KARTI (SIKI VE DÜZGÜN ARALIKLI)                  */
/* =================================================================== */

.header-profile {
    /* 1. Kutu Yapısı: İçeriği kadar yer kaplasın (260px olmayacak) */
    display: inline-flex !important; 
    width: auto !important;          
    min-width: 0 !important;         
    max-width: 100% !important;
    
    /* 2. Hizalama: İkon ve Yazı yan yana, bitişik olsun */
    align-items: center !important;
    justify-content: flex-end !important; /* Veya center, artık fark etmez çünkü kutu daraldı */
    
    /* 3. Aralık Ayarı: İkon ve yazı arasındaki net mesafe */
    gap: 10px !important; 
    
    /* 4. Konum: Sayfanın en sağına itmek için */
    margin-left: auto !important; 
    margin-right: 0 !important;

    /* Görünüm */
    background: transparent !important;
    border: none !important;
    padding: 5px 15px !important; /* Tıklama alanı için makul boşluk */
    cursor: pointer;
    height: 100% !important; /* Header yüksekliğine uyum sağlasın */
}

/* İsim alanının gereksiz uzamasını engellemek için ek güvenlik */
.header-profile .names {
    flex: 0 1 auto !important; /* Genişlemesin, içeriği kadar olsun */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #444 !important;
    text-align: right !important; /* Yazıyı sağa dayalı tut */
}

/* İkon ayarları */
.header-profile .avatar, 
.header-profile .avatar i {
    flex-shrink: 0 !important; /* İkonun ezilmesini engelle */
    margin: 0 !important;
    font-size: 22px !important;
    color: #555 !important;
    display: flex !important;
    align-items: center !important;
}
/* =================================================================== */
/* 5. DROPDOWN MENÜ KONUMU (HEADER'A GÖRE SABİTLENDİ)                  */
/* =================================================================== */

.page-dashboard header .dropdown-menu,
.navbar-nav .dropdown-menu {
    position: absolute !important;
    top: 65px !important; /* Header 70px, 5px yukarıda estetik durur */
    right: 15px !important; /* En sağdan 15px içeride */
    left: auto !important;
    margin-top: 0 !important;
    transform: none !important; /* JS müdahalesini engeller */
    
    /* Görsellik */
    border-radius: 8px !important;
    border: 1px solid #eee !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
    padding: 10px 0 !important;
    min-width: 200px !important;
    z-index: 9999 !important;
    background-color: #fff !important;
}

/* Dropdown oklarını gizle */
.page-dashboard header .dropdown-menu::before,
.page-dashboard header .dropdown-menu::after {
    display: none !important;
}

.header-profile .avatar {
    padding-left: 8px !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    float: right !important;
    text-align: center !important;
    background-color: #ececec !important;
	padding-bottom: 10px !important;
}

/* =================================================================== */
/* ADMIN: PAGE BODY SPACING OVERRIDE                                   */
/* (Theme bazı sayfalarda .page-body'e 160px margin-top verebiliyor)    */
/* =================================================================== */
.page-dashboard .page-body,
.page-dashboard div.page-body {
    margin-top: 40px !important;
    padding-top: 40px !important;
}
/* GLOBALTRADE — "Aktif Cari" onay kutusunu switch (açma/kapama düğmesi) görünümüne çevirir.
   Ölçüm (2026-09-28, p43 Form_4): input.k-checkbox, id=Form_4_Chk_1, data-userid="AktifCariFl",
   22x22 px, appearance:none. Kendo'nun kendi ::before tik işareti gizlenip yuvarlak topuz konuyor.
   Seçici yalnız AktifCariFl alanını hedefler; başka onay kutuları etkilenmez.
   customcss dosyasının SONUNA eklenir. Geri alma: bu bloğu sil. */

input.k-checkbox[data-userid="AktifCariFl"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 44px !important;
    height: 24px !important;
    min-width: 44px !important;
    border-radius: 999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #e2e8f0 !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color .18s ease, border-color .18s ease !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
}

/* Kendo'nun tik işareti (ikon fontu) gizlenir, yerine yuvarlak topuz */
input.k-checkbox[data-userid="AktifCariFl"]::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 2px !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .35) !important;
    transition: left .18s ease !important;
    font-size: 0 !important;
    color: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
}

input.k-checkbox[data-userid="AktifCariFl"]:checked {
    background: #16a34a !important;
    border-color: #16a34a !important;
}

input.k-checkbox[data-userid="AktifCariFl"]:checked::before {
    left: 22px !important;
}

input.k-checkbox[data-userid="AktifCariFl"]:focus,
input.k-checkbox[data-userid="AktifCariFl"]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .25) !important;
}

input.k-checkbox[data-userid="AktifCariFl"]:disabled,
input.k-checkbox[data-userid="AktifCariFl"][disabled] {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

/* Etiket ile düğme aynı hizada dursun */
.k-checkbox-wrap:has(input.k-checkbox[data-userid="AktifCariFl"]) {
    display: inline-flex !important;
    align-items: center !important;
}

a.BtnForm[style*="display: none"]{display:none!important}
/* =====================================================================
   nct_fixes_v1.css  (YENI dosya - mevcut dosyalara dokunulmadi, silinince geri alinir)
   1) Gorev Yonetimi liste sayfasindaki KPI kart stili (.xcol.col-md-4:has(Lbl_29/26/27))
      genel yazildigi icin Deniz Rate, Ucak Ekle, Konteyner Ekle gibi formlarda
      col-md-4 sutundaki sıradan alanlar kart gibi gorunuyordu. Bu kural, KPI
      kartlarini yalniz Gorev Yonetimi listesinde (Gorevler listesi olan sayfa)
      birakir; diger tum formlarda kart gorunumunu sifirlar.
   2) H2 bolum basliklarindaki ikonlar (label yanindaki <i>) yeni H2 duzeninde
      sola kayip garip durdugu icin gizlenir.
   ===================================================================== */

/* ---------- 1) KPI kart sizintisi: Gorevler listesi disindaki formlarda sifirla ---------- */
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_29"]),
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_26"]),
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_27"]) {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 15px !important;
    overflow: visible !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_29"])::before,
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_26"])::before,
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_27"])::before,
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_29"])::after,
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_26"])::after,
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_27"])::after {
    content: none !important;
    display: none !important;
}
/* kart icindeki etiket/sayi stilleri -> normal etiket gorunumu */
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_29"]) label[octopus-userid="Lbl_29"],
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_26"]) label[octopus-userid="Lbl_26"],
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_27"]) label[octopus-userid="Lbl_27"],
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_29"]) label[octopus-userid="Lbl_30"],
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_26"]) label[octopus-userid="Lbl_31"],
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4:has([octopus-userid="Lbl_27"]) label[octopus-userid="Lbl_32"] {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    color: #1e3a8a !important;
    line-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
/* Hizmet Kategorisi vb. formlarda zorunlu alan yildizi korunur */
#FrmNewForm:not(:has([octopus-userid="Gorevler"])) .xcol.col-md-4 label.nct-label-must::after {
    content: " *" !important;
    color: red !important;
}

/* ---------- 2) H2 basliklarinin yanindaki ikonlari gizle ---------- */
#FrmNewForm li.octopusitem:has(> label.nct-h2) > i,
#FrmNewForm li.octopusitem:has(> label.nct-h3) > i,
#FrmNewForm li.octopusitem:has(> label.nct-h4) > i,
#FrmNewForm li.octopusitem:has(> label.nct-h2-okr) > i,
#FrmNewForm li.octopusitem:has(> label.nct-h3-okr) > i,
#FrmNewForm li.octopusitem:has(> label.nct-h4-okr) > i,
#FrmNewForm li.octopusitem:has(> label.nct-corp-h2) > i,
#FrmNewForm li.octopusitem:has(> label.nct-corp-h3) > i,
#FrmNewForm li.octopusitem:has(> label.nct-corp-h4) > i {
    display: none !important;
}

/* =====================================================================
   nct_fix_form1_lbl4_v1.css  (YENI dosya - mevcut dosyalara dokunulmadi)
   Kanban CSS'inde global olarak yazilmis  li[data-id="Form_1_Lbl_4"]{display:none;visibility:hidden}
   kurali, Kanban icermeyen TUM projelerdeki Form_1_Lbl_4 etiketini gizliyordu
   (orn. Tanimlama Kartlari-3 > Hizmet Kategorisi Ekle > "Hizmet Kategorisi Kodu").
   Bu kural, formda Kanban nesnesi yoksa etiketi geri acar.
   ===================================================================== */
#FrmNewForm:not(:has(#Form_1_Kanban_1, [octopus-id="Form_1_Kanban_1"])) li[data-id="Form_1_Lbl_4"] {
    display: inline-block !important;
    visibility: visible !important;
}

/* ========================================================= */
/* Floating Footer (global <footer>)                          */
/* ========================================================= */
html body footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1200 !important;

    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid #e5e7eb !important;

    padding: 10px 16px !important;
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
    color: #6b7280 !important;
}

html body footer p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    letter-spacing: 0.2px !important;
}

/* Replace footer text with "Powered by Xpoda" (without touching HTML) */
html body footer p {
    font-size: 0 !important; /* hide existing text */
}

html body footer p::before {
    content: "@ 2026 NoCodeTime - Powered by Xpoda" !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
    color: #6b7280 !important;
}

/* Give page content breathing room above footer */
html body {
    padding-bottom: 56px !important;
}

@media (max-width: 768px) {
    html body footer {
        padding: 10px 12px !important;
    }
    html body footer p {
        font-size: 11px !important;
    }
    html body {
        padding-bottom: 60px !important;
    }
}
/* 02.11.2026 NCT G8: Görev Yönetimi Takvim / Kanban / Liste görünüm butonları.
   Mevcut .nct-btn-list/-kanban/-calendar kurallarına (custom.css) dokunmaz, üstüne ekler.
   Butonlar biraz büyür, aktif görünüm mavi çerçeveyle belirginleşir; butonların satırı ile
   alttaki "Yeni Görev / Düzenle ..." satırı arasına boşluk girer (önce 0 px idi). */
.nct-btn-list, .nct-btn-kanban, .nct-btn-calendar {
  min-height: 36px !important;
  min-width: 92px !important;
  padding: 7px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 1px solid rgb(203, 213, 225) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s !important;
}
.nct-btn-list:hover, .nct-btn-kanban:hover, .nct-btn-calendar:hover {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
}
.nct-btn-list-active, .nct-btn-kanban-active, .nct-btn-calendar-active {
  border-color: rgb(37, 99, 235) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}
/* buton kutusu (30 px) 36 px butonu taşırmasın; alttaki buton satırıyla arasında boşluk */
li.octopusitem:has(> .nct-btn-list, > .nct-btn-kanban, > .nct-btn-calendar) {
  height: auto !important;
}
.xrow:has(.nct-btn-list, .nct-btn-kanban, .nct-btn-calendar) {
  margin-bottom: 18px !important;
}

/* ============================================================
   GLOBALTRADE — Görev Tanımlama Formu
   Başlık / etiket tipografi hiyerarşisi (Öneri A)
   ------------------------------------------------------------
   Amaç: bölüm başlıklarını öne çıkarıp alan etiketlerini geri
   plana çekerek okunurluğu artırmak.
   KAPSAM: yalnız bu form. #FrmNewForm, yalnız bu formda bulunan
   "GorevAltAsamaListesi" alanını içerdiğinde eşleşir (:has).
   Mevcut .nct-label / .nct-label-must / .nct-corp-* sınıflarına
   ve diğer formlara DOKUNMAZ; yalnızca yeni, kapsamlı kurallar ekler.
   Yeni dosya — mevcut dosyalar değiştirilmedi.
   ============================================================ */

/* --- alan etiketlerini geri plana çek (küçük, gri, büyük harf) --- */
#FrmNewForm:has([octopus-userid="GorevAltAsamaListesi"]) .octopusitem[octopod-customcss=".nct-label"] > label,
#FrmNewForm:has([octopus-userid="GorevAltAsamaListesi"]) .octopusitem[octopod-customcss=".nct-label-must"] > label{
  font-size:12px !important;
  font-weight:700 !important;
  color:#64748b !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
}

/* --- bölüm başlıklarını öne çıkar (Öneri A: 18px / 800) ---
   Aksan çubuğu + alt çizgi zaten .nct-corp-h2-underline'dan geliyor;
   burada yalnız boyut/kalınlık bu forma özel rafine ediliyor. */
#FrmNewForm:has([octopus-userid="GorevAltAsamaListesi"]) .nct-corp-h2-underline{
  font-size:18px !important;
  font-weight:800 !important;
}

/* ============================================================
   GLOBALTRADE - Gorev Yonetimi LISTE sayfasi: ust KPI kartlari
   (Toplam Acik Gorev / Geciken-Riskli / Zamaninda Biten)
   Yeni dosya; mevcut CSS/elemanlara DOKUNMAZ.
   NEMLI: Xpoda uid'leri (Lbl_29/30/31) formlar arasi TEKRAR ediyor;
   Gorev Tanimlama kayit formunda Lbl_29=Gorev No, Lbl_30=Temel Bilgiler,
   Lbl_31=Gorev Parametreleri. Bu yuzden TUM kurallar KART KABINA
   (.xcol.col-md-4:has(...)) hapsedildi; kayit formunda bu kap yok,
   dolayisiyla oradaki basliklara/etiketlere sizmaz.
   Kart yapisi: card1=(Lbl_29 baslik + Lbl_30 sayi/mavi),
   card2=(Lbl_26 + Lbl_31/kirmizi), card3=(Lbl_27 + Lbl_32/yesil).
   ============================================================ */

/* --- kart govdesi --- */
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_29"]),
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_26"]),
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_27"]){
  position:relative;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.06), 0 8px 24px -18px rgba(15,23,42,.25);
  padding:16px 18px 14px 26px !important;
  overflow:hidden;
  margin-top:6px;
  margin-bottom:6px;
}

/* --- sol aksan seridi --- */
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_29"])::before,
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_26"])::before,
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_27"])::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:7px;
  border-radius:14px 0 0 14px;
}
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_29"])::before{ background:linear-gradient(180deg,#3b82f6,#2563eb); }
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_26"])::before{ background:linear-gradient(180deg,#f87171,#dc2626); }
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_27"])::before{ background:linear-gradient(180deg,#4ade80,#16a34a); }

/* --- sag ustte dekor daire --- */
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_29"])::after,
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_26"])::after,
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_27"])::after{
  content:"";
  position:absolute; right:-28px; top:-28px; width:96px; height:96px; border-radius:50%;
  opacity:.10; pointer-events:none;
}
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_29"])::after{ background:#2563eb; }
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_26"])::after{ background:#dc2626; }
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_27"])::after{ background:#16a34a; }

/* --- baslik etiketleri (yalniz kart icindekiler) --- */
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_29"]) label[octopus-userid="Lbl_29"],
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_26"]) label[octopus-userid="Lbl_26"],
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_27"]) label[octopus-userid="Lbl_27"]{
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#64748b !important;
  text-align:left !important;
  line-height:1.3 !important;
  margin:0 !important;
}

/* --- sayi etiketleri (yalniz kart icindekiler) --- */
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_29"]) label[octopus-userid="Lbl_30"],
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_26"]) label[octopus-userid="Lbl_31"],
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_27"]) label[octopus-userid="Lbl_32"]{
  font-size:36px !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-.02em !important;
  text-align:left !important;
  margin:4px 0 0 !important;
  font-variant-numeric:tabular-nums;
}
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_29"]) label[octopus-userid="Lbl_30"]{ color:#2563eb !important; }
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_26"]) label[octopus-userid="Lbl_31"]{ color:#dc2626 !important; }
#FrmNewForm .xcol.col-md-4:has([octopus-userid="Lbl_27"]) label[octopus-userid="Lbl_32"]{ color:#16a34a !important; }

/* =====================================================================
   nct_headings_v1.css  (YENI dosya - mevcut dosyalara dokunulmadi)
   GLOBALTRADE baslik standardi (2026-09-10, Tunc onayi):
     H1 ana form   : menuden acilan formlar  -> mevcut gradient yazi (.nct-h-gradient gorunumu)
     H1 acilir form: Open Form ile acilan formlar (iframe, html.nct-popup) -> 18px lacivert, alt cizgi
     H2            : bolum basliklari -> 12px buyuk harf, gradient pembesi (#be185d), saga ince cizgi
   Mevcut tum baslik siniflari bu uc gorunume eslenir; eslemeyi
   nct_headings_v1.js (iframe'e html.nct-popup sinifi ekler) tamamlar.
   Xpoda etiketleri: li.octopusitem > label.<customcss>
   ===================================================================== */

/* ---------- H1 sinif kumesi ---------- */
#FrmNewForm label.nct-h-gradient,
#FrmNewForm label.nct-corp-h2-underline,
#FrmNewForm label.nct-corp-h1-underline,
#FrmNewForm label.nct-corp-h1,
#FrmNewForm label.nct-h1-okr,
#FrmNewForm label.nct-h1,
#FrmNewForm label.nct-h-accent,
#FrmNewForm label.nct-h-overline {
    font-family: var(--lbl-font, "Segoe UI", Roboto, Arial, sans-serif) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    text-transform: none !important;
    display: inline-block !important;
    position: relative !important;
    line-height: 1.15 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- H1 ana form (iframe disi) : gradient yazi ---------- */
html:not(.nct-popup) #FrmNewForm label.nct-h-gradient,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h2-underline,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h1-underline,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h1,
html:not(.nct-popup) #FrmNewForm label.nct-h1-okr,
html:not(.nct-popup) #FrmNewForm label.nct-h1,
html:not(.nct-popup) #FrmNewForm label.nct-h-accent,
html:not(.nct-popup) #FrmNewForm label.nct-h-overline {
    font-size: 26px !important;
    background: linear-gradient(90deg, #2563eb, #db2777) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    padding: 0 0 6px 0 !important;
    margin: 0 0 16px 0 !important;
}
html:not(.nct-popup) #FrmNewForm label.nct-h-gradient::after,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h2-underline::after,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h1-underline::after,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h1::after,
html:not(.nct-popup) #FrmNewForm label.nct-h1-okr::after,
html:not(.nct-popup) #FrmNewForm label.nct-h1::after,
html:not(.nct-popup) #FrmNewForm label.nct-h-accent::after,
html:not(.nct-popup) #FrmNewForm label.nct-h-overline::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 50% !important;
    height: 4px !important;
    background: linear-gradient(90deg, #2563eb, #db2777) !important;
    border-radius: 2px !important;
}
html:not(.nct-popup) #FrmNewForm label.nct-h-gradient::before,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h2-underline::before,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h1-underline::before,
html:not(.nct-popup) #FrmNewForm label.nct-corp-h1::before,
html:not(.nct-popup) #FrmNewForm label.nct-h1-okr::before,
html:not(.nct-popup) #FrmNewForm label.nct-h1::before,
html:not(.nct-popup) #FrmNewForm label.nct-h-accent::before,
html:not(.nct-popup) #FrmNewForm label.nct-h-overline::before { content: none !important; }

/* ---------- H1 acilir form (iframe) : 18px lacivert, alt cizgi ---------- */
html.nct-popup #FrmNewForm label.nct-h-gradient,
html.nct-popup #FrmNewForm label.nct-corp-h2-underline,
html.nct-popup #FrmNewForm label.nct-corp-h1-underline,
html.nct-popup #FrmNewForm label.nct-corp-h1,
html.nct-popup #FrmNewForm label.nct-h1-okr,
html.nct-popup #FrmNewForm label.nct-h1,
html.nct-popup #FrmNewForm label.nct-h-accent,
html.nct-popup #FrmNewForm label.nct-h-overline {
    font-size: 18px !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #1e3a8a !important;
    color: #1e3a8a !important;
    border-bottom: 2px solid #1e3a8a !important;
    padding: 0 0 4px 0 !important;
    margin: 0 0 12px 0 !important;
}
html.nct-popup #FrmNewForm label.nct-h-gradient::after,
html.nct-popup #FrmNewForm label.nct-corp-h2-underline::after,
html.nct-popup #FrmNewForm label.nct-corp-h1-underline::after,
html.nct-popup #FrmNewForm label.nct-corp-h1::after,
html.nct-popup #FrmNewForm label.nct-h1-okr::after,
html.nct-popup #FrmNewForm label.nct-h1::after,
html.nct-popup #FrmNewForm label.nct-h-accent::after,
html.nct-popup #FrmNewForm label.nct-h-overline::after,
html.nct-popup #FrmNewForm label.nct-h-gradient::before,
html.nct-popup #FrmNewForm label.nct-corp-h2-underline::before,
html.nct-popup #FrmNewForm label.nct-corp-h1-underline::before,
html.nct-popup #FrmNewForm label.nct-corp-h1::before,
html.nct-popup #FrmNewForm label.nct-h1-okr::before,
html.nct-popup #FrmNewForm label.nct-h1::before,
html.nct-popup #FrmNewForm label.nct-h-accent::before,
html.nct-popup #FrmNewForm label.nct-h-overline::before { content: none !important; }

/* ---------- H2 bolum basligi : 12px buyuk harf, gradient pembesi, saga ince cizgi ---------- */
#FrmNewForm label.nct-h2,
#FrmNewForm label.nct-h3,
#FrmNewForm label.nct-h4,
#FrmNewForm label.nct-h2-okr,
#FrmNewForm label.nct-h3-okr,
#FrmNewForm label.nct-h4-okr,
#FrmNewForm label.nct-corp-h2,
#FrmNewForm label.nct-corp-h3,
#FrmNewForm label.nct-corp-h4,
#FrmNewForm label.nct-section {
    font-family: var(--lbl-font, "Segoe UI", Roboto, Arial, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    color: #be185d !important;
    -webkit-text-fill-color: #be185d !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 4px 0 8px 0 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}
#FrmNewForm label.nct-h2::after,
#FrmNewForm label.nct-h3::after,
#FrmNewForm label.nct-h4::after,
#FrmNewForm label.nct-h2-okr::after,
#FrmNewForm label.nct-h3-okr::after,
#FrmNewForm label.nct-h4-okr::after,
#FrmNewForm label.nct-corp-h2::after,
#FrmNewForm label.nct-corp-h3::after,
#FrmNewForm label.nct-corp-h4::after,
#FrmNewForm label.nct-section::after {
    content: "" !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    background: #fbcfe8 !important;
    position: static !important;
    width: auto !important;
    border-radius: 0 !important;
}
#FrmNewForm label.nct-h2::before,
#FrmNewForm label.nct-h3::before,
#FrmNewForm label.nct-h4::before,
#FrmNewForm label.nct-h2-okr::before,
#FrmNewForm label.nct-h3-okr::before,
#FrmNewForm label.nct-h4-okr::before,
#FrmNewForm label.nct-corp-h2::before,
#FrmNewForm label.nct-corp-h3::before,
#FrmNewForm label.nct-corp-h4::before { content: none !important; }

/* 02.11.2026 NCT: Admin paneli > Menü İşlemleri ikon seçicide arama çalışmıyordu.
   Neden: ".btn-group .dropdown-menu a { display:flex !important }" kuralı aramanın gizlediği
   ikonları (satır içi display:none) yeniden gösteriyor. Bu kural yalnız ikon seçicide gizlenenleri gizli tutar. */
.btn-group .dropdown-menu.iconpicker-container a.iconpicker-item[style*="display: none"] {
  display: none !important;
}

/* 13.10.2026 NCT: Talep Yonetimi (p45 Form_2) Surec Panosu - platformun her Kanban'a ekledigi
   "Add column" dugmesi ve bos kart menusu (⋮) gizlenir; kartin tamamina tiklayinca talep Duzenle ile acilir. */
#Form_2_Kanban_1 .k-taskboard-toolbar [data-command="AddColumnCommand"] { display: none !important; }
#Form_2_Kanban_1 .k-taskboard-card-menu-button { display: none !important; }
#Form_2_Kanban_1 .k-taskboard-card { cursor: pointer; }

/* 23.10.2026 NCT: Ziyaret Yonetimi (p43 Form_3) Kanban gorunumu - platformun her Kanban'a ekledigi
   "Add column" dugmesi ve bos kart menusu (⋮) gizlenir; kartin tamamina tiklayinca ziyaret Duzenle ile acilir.
   Form_3_Kanban_1 id'si baska projelerde de var (p44) -> seci userid ile daraltildi. */
#Form_3_Kanban_1[data-userid="ZiyaretKanban"] .k-taskboard-toolbar [data-command="AddColumnCommand"] { display: none !important; }
#Form_3_Kanban_1[data-userid="ZiyaretKanban"] .k-taskboard-card-menu-button { display: none !important; }
#Form_3_Kanban_1[data-userid="ZiyaretKanban"] .k-taskboard-card { cursor: pointer; }

/* ==========================================================================
   ZİYARET PLANLAMA — KPI KARTLARI  (v5 / tek label)
   --------------------------------------------------------------------------
   ÖNCE ŞUNU YAP: Content\custom\ altındaki ÖNCEKİ TÜM sürümleri SİL
     ziyaret_planlama_kpi_design.css / nct_kpi_v2.css / nct_kpi_v3.css / nct_kpi_v4.css
   Hepsi aynı anda yükleniyordu; eski kurallar yenileri eziyordu ve ekranda
   gördüğümüz kenarlık aslında eski dosyadan geliyordu. Sadece bu dosya kalsın.

   NEDEN v5 — iki kök neden düzeltildi:
   1) Çerçeve ::before'da z-index:-1 idi -> opak arka planın ARKASINDA kalıyor,
      hiç görünmüyordu. Artık z-index:1 ve arka planı ŞEFFAF, yalnızca kenarlık
      çiziyor (kartların zemini zaten beyaz, fark yok) — bu yüzden metni örtmüyor.
   2) İkon label'ın background-image'ıydı; background taşamaz, label kutusu
      ~40px olduğu için kırpılıyordu. Artık ikon ÇERÇEVENİN background'ı —
      çerçeve 150px olduğundan kırpılmıyor.

   Yapı:
     label     -> sadece başlık metni (şeffaf, çerçevesiz)
     ::before  -> kartın kenarlığı + ikon (150px, label'ın dışına taşar)
     ::after   -> alt açıklama / trend yazısı

   KART BOYU: ::before içindeki  height: 104px. Studio'nun kartlara ayırdığı
   boşluk bu kadar; büyütürsen alttaki buton satırının üstüne biner.
   Üst hizalama: ::before  top: 0  (başlık ayraç çizgisine değmesin diye).
   Trend yazısı: ::after içindeki  top: 72px  — kart boyuyla birlikte kaydır.

   Kart artık mevcut boşluğa sığıyor; Studio tarafında yer değiştirmeye gerek yok.
   Daha uzun kart istenirse o satır Studio'dan aşağı alınmalı.

   Studio kurulumu — her kart için TEK label:
     LBL_21 -> .nct-kpi-1   LBL_22 -> .nct-kpi-2
     LBL_23 -> .nct-kpi-3   LBL_24 -> .nct-kpi-4
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) ORTAK — LABEL (sadece başlık metni)
   -------------------------------------------------------------------------- */
.nct-kpi-1,
.nct-kpi-2,
.nct-kpi-3,
.nct-kpi-4 {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    z-index: 1 !important;

    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;

    padding: 12px 76px 0 18px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    text-align: left !important;
    cursor: default !important;
    white-space: normal !important;
}


/* --------------------------------------------------------------------------
   2) ORTAK — KART ÇERÇEVESİ + İKON (::before)
   Arka plan ŞEFFAF: sadece kenarlık ve ikon çizer, metni örtmez.
   Sabit height -> label'ın/li'nin boyundan tamamen bağımsız.
   -------------------------------------------------------------------------- */
.nct-kpi-1::before,
.nct-kpi-2::before,
.nct-kpi-3::before,
.nct-kpi-4::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: none !important;
    z-index: 1 !important;

    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: right 16px top 10px !important;
    background-size: 44px 44px !important;

    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    pointer-events: none !important;
}

.nct-kpi-1:hover::before,
.nct-kpi-2:hover::before,
.nct-kpi-3:hover::before,
.nct-kpi-4:hover::before {
    box-shadow: 0 12px 20px -5px rgba(0,0,0,0.08) !important;
    border-color: #c7d2fe !important;
}


/* --------------------------------------------------------------------------
   3) ORTAK — ALT AÇIKLAMA / TREND SATIRI (::after)
   -------------------------------------------------------------------------- */
.nct-kpi-1::after,
.nct-kpi-2::after,
.nct-kpi-3::after,
.nct-kpi-4::after {
    position: absolute !important;
    left: 20px !important;
    top: 72px !important;
    bottom: auto !important;
    z-index: 2 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
}


/* --------------------------------------------------------------------------
   4) Parent li kırpmasın
   -------------------------------------------------------------------------- */
li.octopusitem[octopod-customcss*="nct-kpi-"] {
    overflow: visible !important;
    z-index: 3 !important;
}


/* --------------------------------------------------------------------------
   KART 1 — TOPLAM ZİYARET & GÖRÜŞME  (mor / CRM)
   -------------------------------------------------------------------------- */
.nct-kpi-1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' rx='11' fill='%23e0e7ff'/%3E%3Cg transform='translate(10 10)' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M7 20V10M12 20V4M17 20v-7'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.nct-kpi-1::after {
    content: "Sistemdeki tüm kayıtlar" !important;
    color: #64748b !important;
    background: transparent !important;
}


/* --------------------------------------------------------------------------
   KART 2 — PLANLANAN (YAKLAŞAN)  (turuncu / warning)
   -------------------------------------------------------------------------- */
.nct-kpi-2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' rx='11' fill='%23fef3c7'/%3E%3Cg transform='translate(10 10)' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.nct-kpi-2::after {
    content: "Takvimde bekleyen görüşmeler" !important;
    color: #64748b !important;
    background: transparent !important;
}


/* --------------------------------------------------------------------------
   KART 3 — TAMAMLANAN & BAŞARILI  (yeşil / success)
   -------------------------------------------------------------------------- */
.nct-kpi-3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' rx='11' fill='%23dcfce7'/%3E%3Cg transform='translate(10 10)' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.nct-kpi-3::after {
    content: "↑ Yüksek Dönüşüm Oranı" !important;
    color: #10b981 !important;
    background: #dcfce7 !important;
}


/* --------------------------------------------------------------------------
   KART 4 — İPTAL / ERTELENEN  (kırmızı / danger)
   -------------------------------------------------------------------------- */
.nct-kpi-4::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' rx='11' fill='%23fee2e2'/%3E%3Cg transform='translate(10 10)' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.nct-kpi-4::after {
    content: "↓ Düşüş eğiliminde" !important;
    color: #ef4444 !important;
    background: #fee2e2 !important;
}

/* ============================================================
   GLOBALTRADE - Ziyaret Yonetimi LISTE sayfasi: ust KPI kartlari
   (nct_kpi_v6.css) - YENI dosya; v5 ve diger dosyalara DOKUNMAZ.
   Etiket metni aksiyondan "Sayi\nBaslik" olarak gelir:
     ilk satir  = sayi   (buyuk, kart rengine gore)
     alt satir  = baslik (kucuk, gri, buyuk harf)
   v5'teki ::before (kart govdesi + ikon) ve ::after (alt aciklama)
   aynen kalir; burada sadece metin duzeni degisir.
   ============================================================ */
.nct-kpi-1, .nct-kpi-2, .nct-kpi-3, .nct-kpi-4 {
    white-space: pre-line !important;      /* CHAR(10) satir sonunu goster */
    padding: 8px 76px 0px 18px !important;
    font-size: 11px !important;            /* baslik */
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    color: #64748b !important;
}
.nct-kpi-1::first-line, .nct-kpi-2::first-line, .nct-kpi-3::first-line, .nct-kpi-4::first-line {
    font-size: 26px;                       /* sayi */
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.3;
}
.nct-kpi-1::first-line { color: #0f172a; }
.nct-kpi-2::first-line { color: #f59e0b; }
.nct-kpi-3::first-line { color: #10b981; }
.nct-kpi-4::first-line { color: #ef4444; }

/* Alt yazisiz KPI karti (Firsat Y�netimi vb.): .nct-kpi-1..4 ile birlikte kullanilir */
.nct-kpi-1.nct-kpi-sade::after,
.nct-kpi-2.nct-kpi-sade::after,
.nct-kpi-3.nct-kpi-sade::after,
.nct-kpi-4.nct-kpi-sade::after { content: none !important; display: none !important; }

/* KPI satiri panelden tasmasin (sol kenar kesilmesi) */
.xrow:has(> .xcol > li > [class*="nct-kpi-"]) {
    margin-left: -8px !important;
    margin-right: -8px !important;
}


/* KPI kartlari arasinda bosluk: cerceve kolonun 6px icinden baslasin */
.nct-kpi-1::before,
.nct-kpi-2::before,
.nct-kpi-3::before,
.nct-kpi-4::before {
    left: 6px !important;
    right: 6px !important;
}


/* =====================================================================
   04.11.2026 NCT � KPI kart standardi ekleri (customcss'e, mevcut .nct-kpi-* kurallarinin ALTINA eklenir)
   Mevcut kurallara dokunmaz; Ziyaret kartlarinin (alt yazili) g�r�n�m� degismez.
   ===================================================================== */

/* 1) SADE KART ALT BOSLUGU
   .nct-kpi-* ::before �er�evesi 104px; bu y�kseklik Ziyaret'teki alt yazi (::after) i�in.
   .nct-kpi-sade kartlarda alt yazi yok ? �er�eve sayi + baslik + ikona g�re 76px. */
[class*="nct-kpi-"].nct-kpi-sade::before {
    height: 76px !important;
    min-height: 76px !important;
}

/* 2) .nct-kpi-5 � ORAN / Y�ZDE karti (mor, yukari trend ikonu)
   Kazanma orani, d�n�s�m orani, kar marji gibi g�stergeler i�in. Kirmizi .nct-kpi-4 yalniz olumsuz g�stergelerde. */
.nct-kpi-5 {
    position: relative !important; display: block !important; box-sizing: border-box !important; z-index: 1 !important;
    background: none transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important;
    text-align: left !important; cursor: default !important;
    white-space: pre-line !important; padding: 8px 76px 0px 18px !important; font-size: 11px !important; font-weight: 800 !important;
    letter-spacing: 0.4px !important; text-transform: uppercase !important; line-height: 1.25 !important; color: rgb(100, 116, 139) !important;
}
.nct-kpi-5::before {
    content: "" !important; position: absolute !important; top: 0px !important; left: 6px !important; right: 6px !important; bottom: auto !important;
    height: 104px !important; min-height: 104px !important; max-height: none !important; z-index: 1 !important;
    background-color: transparent !important; background-repeat: no-repeat !important; background-position: right 16px top 10px !important; background-size: 44px 44px !important;
    border: 1px solid rgb(203, 213, 225) !important; border-radius: 12px !important; box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 6px -1px !important;
    transition: box-shadow 0.3s, border-color 0.3s !important; pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' rx='11' fill='%23ede9fe'/%3E%3Cg transform='translate(10 10)' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.nct-kpi-5:hover::before { box-shadow: rgba(0, 0, 0, 0.08) 0px 12px 20px -5px !important; border-color: rgb(199, 210, 254) !important; }
.nct-kpi-5::first-line { font-size: 26px; font-weight: 900; letter-spacing: 0px; line-height: 1.3; color: rgb(124, 58, 237); }
.nct-kpi-5::after { content: none !important; display: none !important; }
.nct-kpi-5.nct-kpi-sade::before { height: 76px !important; min-height: 76px !important; }

/* =====================================================================
   nct_loader_v1.css (YENI dosya - mevcut dosyalara dokunulmadi)
   GLOBALTRADE T83 - form yuklenirken "yukleniyor" katmani - 21.10.2026
   Kullanim (Studio): forma bir Label ekle, customcss = .nct-loader, metni
   bekleme yazisi olsun. Yukleme zincirinin sonunda Change Properties
   kod 13 (Alani Gizle) ile bu etiketi gizle.
   - Etiket yer kaplamaz (form-group / li yuksekligi 0).
   - Katman tiklamayi engellemez (pointer-events: none).
   - Emniyet: gizleme adimi calismazsa 90 sn sonra kendiliginden kaybolur.
   Ilk kullanim: p50 Form_2 Lbl_154 (Teklif Ekle/Duzenle).
   ===================================================================== */

#FrmNewForm .form-group:has(label.nct-loader),
#FrmNewForm li.octopusitem:has(> label.nct-loader) {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#FrmNewForm label.nct-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    z-index: 2147483000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #1d4ed8 !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    pointer-events: none !important;
    animation: nct-loader-failsafe 0s linear 90s forwards !important;
}

#FrmNewForm label.nct-loader::before {
    content: "" !important;
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 14px !important;
    border: 4px solid #bfdbfe !important;
    border-top-color: #2563eb !important;
    border-radius: 50% !important;
    animation: nct-loader-spin 0.8s linear infinite !important;
}

@keyframes nct-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes nct-loader-failsafe {
    to { visibility: hidden; opacity: 0; }
}

/* GLOBALTRADE — Kendo MultiSelect placeholder'ı diğer alanlar gibi soluk göster (2026-09-26)
   Ölçüm: p35 Form_1_Cb_40 (Taşıma Modu, multiselect) placeholder'ı input value olarak
   "k-readonly" sınıfıyla basılıyor, rengi rgb(51,65,85) (tam koyu). Tekli combobox
   placeholder rengi rgb(148,163,184). customcss sonuna eklenir; tüm multiselect'leri etkiler. */
.k-multiselect input.k-input-inner.k-readonly {
    color: rgb(148, 163, 184) !important;
}


.nav.nav-tabs.bordered {
    display: flex;
    gap: 5px;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 0;
    margin: 0;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

.nav.nav-tabs.bordered li {
    list-style: none;
    position: relative;
    margin-bottom: -1px; 
}


.nav.nav-tabs.bordered li a {
    display: block;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 13px;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    text-decoration: none;
}


.nav.nav-tabs.bordered li a:hover {
    color: #1F5BA7;
    background: #ffffff;
    border-color: #dee2e6;
    transform: translateY(-2px);
    z-index: 5;
}


body .nav.nav-tabs.bordered li a.active,
body .nav.nav-tabs.bordered li a.active:hover,
body .nav.nav-tabs.bordered li a.active:focus {
    background-color: #1F5BA7 !important; 
    color: #ffffff !important;           
    border-bottom-color: #1F5BA7 !important; 
    
    font-weight: 700;
    font-size: 14px;
    z-index: 10;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 91, 167, 0.3) !important;
    opacity: 1 !important;
}


body .nav.nav-tabs.bordered li a.active::before,
body .nav.nav-tabs.bordered li a.active::after {
    display: none !important;
}


.tab-content {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-top: 2px solid #1F5BA7;
    border-radius: 0 0 8px 8px;
    padding: 20px;
    position: relative;
    z-index: 0;
}


/* Bildirim Butonu Tasarımı (JS'deki butonla eşitlendi) */
#activity {
    width: 40px;
    height: 40px;
    margin: 0 5px; /* Diğer butonla aynı boşluk */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    border-radius: 50%;
    border: 1px solid #e3e3e3;
    background-color: #ffffff;
    color: #555;
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    
    /* Bootstrap varsayılanlarını sıfırlama */
    padding: 0 !important; 
    text-decoration: none;
}

/* Hover Efekti */
#activity:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
    transform: scale(1.05);
}

/* İkon Boyutu */
#activity i {
    font-size: 20px; /* Diğer butondaki emoji boyutuyla dengelendi */
    line-height: 1;
}

/* Dropdown oku varsa gizle (Bootstrap bazen ekler) */
#activity::after {
    display: none;
}

/* --- Bildirim Sayısı (Badge) Konumu --- */
/* Yuvarlak yapınca sayı kayabilir, onu sağ üst köşeye sabitliyoruz */
.count-indicator .count {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;     /* Sabit genişlik */
    height: 18px;    /* Sabit yükseklik */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

/* --- Üst Menü Sıkılaştırma --- */

/* 1. Tüm menü elemanlarını (li) birbirine yaklaştır */
.navbar-nav.ml-auto .nav-item {
    margin-left: 2px !important;  /* Soldan boşluğu kıs */
    margin-right: 2px !important; /* Sağdan boşluğu kıs */
    display: flex;                /* İçerikleri dikeyde ortala */
    align-items: center;
}

/* 2. Linklerin (nav-link) içindeki varsayılan geniş boşlukları al */
/* Bootstrap normalde burada sağa sola 1rem (16px) boşluk verir */
.navbar-nav.ml-auto .nav-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* 3. Profil resmi ve Dil seçimi gibi alanların dikey hizasını düzelt */
.navbar-nav.ml-auto .nav-link img {
    margin-bottom: 0 !important; /* Resimlerin altındaki kaymayı önle */
}

/* 4. Eğer senin eklediğin özel butonlarda (Ay/Takvim) ekstra marj varsa sıfırla */
.mode-toggle-btn, 
.calendar-icon-btn,
#activity {
    margin: 0 !important; /* Butonların kendi dış boşluğunu iptal et */
}
/* =====================================================================
   nct_operasyon_bosluk_v1.css (YENI dosya - nct_operasyon_v1.css'e dokunulmadi)
   GLOBALTRADE Operasyon Ekle (p52 Form_2) kutular arasi bosluk - 21.10.2026 (T110)
   Yer: Content\custom (nct_operasyon_v1.css ile ayni klasor; yukleme sirasi onemsiz, bkz. v2)
   - Kesik cizgili bloklar (.nct-badge-blue/green): 6px beyaz cerceve ile
     yan yana bloklar arasinda ~12px bosluk; kesik cizgi outline ile icte cizilir.
     (v1'deki border/padding/margin degerlerini ezer.)
   - Mor "Operasyon & Referans" alanlari (c08f479c / 757d191d sutunlari) ve
     pembe "Temsilci Iletisim" sutunu (ade12dc4) icin ic pay.
     Sutun id'leri Studio GUID'leridir; form yeniden tasarlanirsa guncellenmeli.
   v2 (21.10): secicilere "html body" eklendi - dosya v1den ONCE yuklendigi icin
   (alfabetik sira) ayni !important kurallarda v1 kazaniyordu; ozgulluk artirildi.
   ===================================================================== */

html body #FrmNewForm .xcol:has(> .xrow > .xcol > li.octopusitem > label.nct-badge-blue),
html body #FrmNewForm .xcol:has(> .xrow > .xcol > li.octopusitem > label.nct-badge-green) {
    border: 6px solid #fff !important;
    background-clip: padding-box !important;
    outline: 1.5px dashed #93c5fd !important;
    outline-offset: -7.5px !important;
    border-radius: 16px !important;
    padding: 10px 14px 12px 14px !important;
    margin-bottom: 6px !important;
}
html body #FrmNewForm .xcol:has(> .xrow > .xcol > li.octopusitem > label.nct-badge-blue) {
    outline-color: #60a5fa !important;
}
html body #FrmNewForm .xcol:has(> .xrow > .xcol > li.octopusitem > label.nct-badge-green) {
    outline-color: #34d399 !important;
}

/* Mor kutu (Lbl_164) icindeki alan sutunlari */
html body #FrmNewForm .xcol[id^="c08f479c"] {
    padding-left: 14px !important;
}
html body #FrmNewForm .xcol[id^="757d191d"] {
    padding-right: 14px !important;
}

/* Pembe kutu (Lbl_171) altindaki Satis / Operasyon temsilcisi sutunu */
html body #FrmNewForm .xcol[id^="ade12dc4"] {
    padding-left: 12px !important;
    padding-right: 4px !important;
}

/* =====================================================================
   nct_operasyon_v1.css (YENI dosya - mevcut dosyalara dokunulmadi)
   GLOBALTRADE Operasyon Ekle (p52 Form_2) gorunum duzeltmeleri - 20.10.2026
   T92 ANA CARI mavi / EK CARI yesil rozet
   T93 "Operasyon Kaydi Olustur" kucuk gradient baslik
   T94 Ana Cari / Ek Cari bloklari kesik cizgili kutu
   T98 B/L Gonderici yesil / Alici mavi rozet + kesik cizgili kutu
   Kullanim (Studio, etiketin customcss alani):
     .nct-badge-blue   -> mavi rozet; etiketin bulundugu blok mavi kesik cizgili kutu olur
     .nct-badge-green  -> yesil rozet; blok yesil kesik cizgili kutu olur
     .nct-h-gradient-sm -> 18px gradient baslik (acilir formda da gradient kalir)
   ===================================================================== */

/* ---------- Rozetler (modern-warning-badge ile ayni olcu) ---------- */
#FrmNewForm label.nct-badge-blue,
#FrmNewForm label.nct-badge-green {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#FrmNewForm label.nct-badge-blue {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd !important;
}
#FrmNewForm label.nct-badge-green {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #6ee7b7 !important;
}

/* ---------- Rozetin bulundugu blok: kesik cizgili kutu ----------
   Yapi: .xcol (blok) > .xrow > .xcol > li.octopusitem > label.rozet */
#FrmNewForm .xcol:has(> .xrow > .xcol > li.octopusitem > label.nct-badge-blue),
#FrmNewForm .xcol:has(> .xrow > .xcol > li.octopusitem > label.nct-badge-green) {
    border: 1.5px dashed #93c5fd !important;
    border-radius: 10px !important;
    padding: 8px 10px 10px 10px !important;
    margin-bottom: 10px !important;
}
#FrmNewForm .xcol:has(> .xrow > .xcol > li.octopusitem > label.nct-badge-blue) {
    border-color: #60a5fa !important;
    background-color: rgba(239, 246, 255, 0.35) !important;
}
#FrmNewForm .xcol:has(> .xrow > .xcol > li.octopusitem > label.nct-badge-green) {
    border-color: #34d399 !important;
    background-color: rgba(236, 253, 245, 0.35) !important;
}

/* ---------- Kucuk gradient baslik (acilir form dahil) ---------- */
#FrmNewForm label.nct-h-gradient-sm {
    background: linear-gradient(90deg, #2563eb, #db2777) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    height: auto !important;
    padding-bottom: 4px !important;
}

/* nct_talep_stil_v1.css (09.10.2026 NCT) - Content\custom
   T9 - Etiketi .nct-label-check olan checkbox ciftleri (Talep Yonetimi > Finans & Hedef Fiyat >
   Ilave Hizmetler (VAS) vb.): solda kucuk checkbox + yaninda sola hizali etiket.
   Xpoda li'leri position:absolute + sabit genislikle cizdigi icin flex'e alinir.
   Etikete tiklayinca isaretleme: navluntalep_guzergah_ek_v1.js (label click -> checkbox). */
.xcol:has(> li > label.nct-label-check) {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 4px 12px !important;
}
.xcol:has(> li > label.nct-label-check) > li.octopusitem {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.xcol:has(> li > label.nct-label-check) > li.octopusitem:has(.k-checkbox) {
    flex: 0 0 18px !important;
    width: 18px !important;
    max-width: 18px !important;
}
.xcol:has(> li > label.nct-label-check) > li.octopusitem:has(> label.nct-label-check) {
    flex: 1 1 auto !important;
    max-width: none !important;
}
.xcol:has(> li > label.nct-label-check) > li.octopusitem > input:not(.k-checkbox) {
    display: none !important;
}
label.nct-label-check {
    color: #1e293b !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    margin: 0 !important;
    cursor: pointer;
}
.xcol:has(> li > label.nct-label-check) .k-checkbox-wrap {
    display: inline-flex !important;
    align-items: center;
}
.xcol:has(> li > label.nct-label-check) .k-checkbox {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 1.5px solid #64748b !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    cursor: pointer;
}
.xcol:has(> li > label.nct-label-check) .k-checkbox:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}
.xrow:has(> .xcol > li > label.nct-label-check) {
    min-height: 0 !important;
    height: auto !important;
}

/* T12 - Liste dosya menusu butonlari (Seçili Dosyaları İndir / Göster; tum dosya listeleri):
   formdaki "Dosya Ekle" mavisiyle cerceveli buton, hover'da dolu. */
.refreshBtnContainer {
    display: flex !important;
    gap: 8px;
    align-items: center;
}
.refreshBtnContainer > a.k-button[onclick^="ListFileMenuAction"] {
    background: #fff !important;
    color: #2563eb !important;
    border: 1.5px solid #2563eb !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 5px 12px !important;
    height: auto !important;
    gap: 6px;
    box-shadow: none !important;
    transition: background .15s, color .15s;
}
.refreshBtnContainer > a.k-button[onclick^="ListFileMenuAction"]:hover {
    background: #2563eb !important;
    color: #fff !important;
}
.refreshBtnContainer > a.k-button[onclick^="ListFileMenuAction"] .k-icon {
    color: inherit !important;
}

/* =====================================================================
   GLOBALTRADE - Teklif Yonetimi (Form_2) : baslik satiri hizalama
   nct_teklif_baslik_design.css  -> Content\custom  (sonra IIS reset)

   Sorun: "Bagli Talep No" ve "Fiyat Senaryosu Adi" etiketleri Xpoda'nin
   dar hesap genisliginde (59 px) 2-3 satir sayildigi icin etiket kutusu
   37 / 53 px yuksekliginde uretiliyor; alttaki kutular 122 / 134 / 150 px'te
   merdiven gibi diziliyor. Etiket metni aslinda tek satira sigiyor.

   Cozum: iki etiket kutusunu "Teklif No" ile ayni yukseklige (21 px) sabitle.
   Canli olcum (14.09.2026, teklif 5): uc kutu da 122 px'e hizalandi.
   Tasarimcida etiket genisligini artirmak etkisiz (olculdu).
   ===================================================================== */
li.octopusitem:has(> [octopus-id="Form_2_Lbl_3"]),
li.octopusitem:has(> [octopus-id="Form_2_Lbl_4"]),
li:has([octopus-id="Form_2_Lbl_3"]),
li:has([octopus-id="Form_2_Lbl_4"]) {
    height: 21px !important;
    max-height: 21px !important;
    white-space: nowrap !important;
}

/* GLOBALTRADE — Teklif Yönetimi formu (p50 Form_2) penceresi ekranı kaplasın (T70 / madde 10, 2026-10-19)
 * Ölçüm: liste Ekle/Düzenle (Action_1477 vb.) pencereyi sabit 1550 x 800 px açıyor. 1378 px ekranda sağ taraf
 * ve "Teklifi Onayla" düğmesi taşıyordu; geniş ekranda ise 1550'de kalıp Kargo Detayları dar görünüyordu.
 * Kural: pencere ekran genişliği - 24 px, yükseklik ekran - 24 px, kenarlardan 12 px. Yalnız p50 Form_2'yi
 * açan pencereye uygulanır (iframe adresindeki formname=50|Form_2); diğer formlar etkilenmez.
 * Portalda önizleme (1378 x 901): pencere 1354 x 877, iframe aynı genişlikte, alt düğmeler görünür.
 * v2 (aynı gün): position: fixed eklendi. v1 yüklenince ölçüldü: liste aşağı kaydırılıp teklif açılınca pencere
 * belgeye göre top 12 px'e gidip ekranın üstünde kalıyordu (getBoundingClientRect top -584). fixed ile ekrana göre.
 * Kurulum: Scripts\custom klasörüne koy + app pool recycle. Geri alma: dosyayı sil + recycle. */
.k-window:has(> .k-window-content > iframe[src*="formname=50|Form_2&"]),
.k-window:has(> .k-window-content > iframe[src*="formname=50%7CForm_2&"]) {
    position: fixed !important;
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 24px) !important;
    max-width: none !important;
    left: 12px !important;
    top: 12px !important;
}

/* =====================================================================================
   Global Trade · Raporlama / Yönetim Raporu (proje 67, Form_1) — tasarım
   Kaynak tasarım: Global Trade/Raporlama/yonetim-raporlama.html
   Sunucu: Xpoda Client\Content\custom\nct_yonetim_raporu_design.css
   Kapsam: yalnız filtre butonu ".nct-bi-filtrele" sınıfını taşıyan form (Studio > Custom Css).
   Studio'da verilen sınıflar (kontrolün kendisine eklenir, li'ye değil):
     .nct-bi-filtre  .nct-bi-filtre-etiket  .nct-bi-filtrele   → ortak filtre çubuğu (Tab_1 ilk satır)
     .nct-bi-kpi  .nct-bi-kpi-baslik                           → KPI kartları
     .nct-bi-grafik  .nct-bi-tablo  .nct-bi-baslik             → grafik / liste kartları, bölüm başlığı
   Xpoda HTML'ine müdahale edilemez → her özellik !important, ikonlar ::before/::after + mask.
   ===================================================================================== */

#FrmNewForm:has(.nct-bi-filtrele) {
    --bi-primary: #1e293b;
    --bi-accent: #3b82f6;
    --bi-accent-dark: #2563eb;
    --bi-bg: #f8fafc;
    --bi-border: #e2e8f0;
    --bi-text: #475569;
    --bi-text-dark: #0f172a;
    --bi-muted: #64748b;
    font-family: 'Inter', Tahoma, sans-serif !important;
}

/* formun kaydet butonu — rapor kayıt tutmaz */
#FrmNewForm:has(.nct-bi-filtrele) > footer.floatfooter { display: none !important; }

#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom,
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > .tab-content {
    background: var(--bi-bg) !important;
    border: none !important;
    box-shadow: none !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > .tab-content { padding: 0 !important; }

/* ---------- sekmeler: segment / pill ---------- */
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    background: #f1f5f9 !important;
    padding: 4px !important;
    margin: 0 0 12px 0 !important;
    border: 1px solid var(--bi-border) !important;
    border-radius: 8px !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs > li:empty,
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs > li:not(:has(a)) { display: none !important; }
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs > li { margin: 0 !important; float: none !important; border: none !important; }
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs > li > a {
    display: block !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--bi-muted) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: all .2s !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs > li > a:focus:not(.active) { color: var(--bi-muted) !important; outline: none !important; }
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs > li > a:hover { color: var(--bi-accent) !important; }
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs > li > a.active,
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom > ul.nav-tabs > li.active > a {
    background: #fff !important;
    color: var(--bi-accent) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .06) !important;
}

/* ---------- ortak filtre çubuğu: her sekmede görünür ----------
   Filtre satırı ilk sekmenin (Executive) ilk satırı. İlk sekme paneli hep açık tutulur,
   seçili değilken yalnız filtre satırı kalır → çubuk sekme başlıklarının altında, aktif sekmenin üstünde. */
#FrmNewForm:has(.nct-bi-filtrele) .tab-content > .tab-pane:first-child {
    display: block !important;
    opacity: 1 !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .tab-content > .tab-pane:first-child:not(.active) { min-height: 0 !important; height: auto !important; }
#FrmNewForm:has(.nct-bi-filtrele) .tab-content > .tab-pane:first-child:not(.active) > *:not(.xrow:has(.nct-bi-filtrele)) { display: none !important; }

#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(.nct-bi-filtrele) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 10px 12px !important;
    margin: 0 0 20px 0 !important;
    padding: 12px 18px !important;
    background: #fff !important;
    border: 1px solid var(--bi-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .02) !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-filtrele) > .xcol {
    float: none !important;
    width: auto !important;
    max-width: 210px !important;
    flex: 1 1 92px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-filtrele) > .xcol:has(.k-datepicker) { flex: 1 1 130px !important; }
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-filtrele) > .xcol:has(.nct-bi-filtrele) {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-filtrele) li.octopusitem {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}
#FrmNewForm:has(.nct-bi-filtrele) label.nct-bi-filtre-etiket {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--bi-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    height: auto !important;
}
#FrmNewForm:has(.nct-bi-filtrele) span.k-input.nct-bi-filtre,
#FrmNewForm:has(.nct-bi-filtrele) span.k-picker.nct-bi-filtre,
#FrmNewForm:has(.nct-bi-filtrele) .k-datepicker:has(input.nct-bi-filtre),
#FrmNewForm:has(.nct-bi-filtrele) .k-combobox:has(input.nct-bi-filtre) {
    height: 38px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: .2s !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .k-input:has(input.nct-bi-filtre):focus-within {
    border-color: var(--bi-accent) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15) !important;
}
#FrmNewForm:has(.nct-bi-filtrele) input.nct-bi-filtre {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bi-primary) !important;
    padding: 0 10px !important;
}
#FrmNewForm:has(.nct-bi-filtrele) button.nct-bi-filtrele {
    height: 38px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: var(--bi-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 6px rgba(59, 130, 246, .2) !important;
    transition: .2s !important;
}
#FrmNewForm:has(.nct-bi-filtrele) button.nct-bi-filtrele:hover { background: var(--bi-accent-dark) !important; transform: translateY(-1px) !important; }
/* Kendo ::before'u hover katmanı olarak kullanıyor (absolute + opacity 0) → ikon için sıfırla */
#FrmNewForm:has(.nct-bi-filtrele) button.nct-bi-filtrele::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    inset: auto !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-2.64-6.36L21 8'/><path d='M21 3v5h-5'/></svg>") center / contain no-repeat !important;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-2.64-6.36L21 8'/><path d='M21 3v5h-5'/></svg>") center / contain no-repeat !important;
}
/* Opr. Uzmanı pazarlama sekmesinde uygulanmıyor → gizle (mockup: filterGrpOps) */
#FrmNewForm:has(.nct-bi-filtrele) .nav-tabs-custom:has(a[data-tabid="Form_1_Sekme_3"].active) .xrow:has(.nct-bi-filtrele) > .xcol:has(#Form_1_Cb_3) { display: none !important; }

/* ---------- genel satır / kolon düzeni (kart ızgarası) ---------- */
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(.nct-bi-kpi),
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(.nct-bi-grafik),
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(.nct-bi-tablo) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 0 20px 0 !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(.nct-bi-kpi) > .xcol,
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(.nct-bi-grafik) > .xcol,
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(.nct-bi-tablo) > .xcol {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    background: #fff !important;
    border: 1px solid var(--bi-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .02) !important;
    position: relative !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow > .xcol.col-md-8 { flex: 2 1 0 !important; }
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow > .xcol.col-md-12 { flex: 1 1 100% !important; }
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow::before,
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow::after { display: none !important; }

/* ---------- KPI kartları ---------- */
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) > .xcol {
    flex: 1 1 220px !important;
    padding: 20px 72px 20px 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .02) !important;
    transition: .3s !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) > .xcol:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05) !important;
    border-color: #cbd5e1 !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) li.octopusitem {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}
#FrmNewForm:has(.nct-bi-filtrele) label.nct-bi-kpi-baslik {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: var(--bi-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin: 0 0 4px 0 !important;
    height: auto !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}
#FrmNewForm:has(.nct-bi-filtrele) span.k-input.nct-bi-kpi {
    height: auto !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
#FrmNewForm:has(.nct-bi-filtrele) input.nct-bi-kpi {
    padding: 0 !important;
    height: auto !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: var(--bi-text-dark) !important;
    background: transparent !important;
    cursor: default !important;
    text-overflow: ellipsis !important;
}
/* ikon kutusu (::before) + ikon (::after) */
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) > .xcol::before,
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) > .xcol::after {
    content: "" !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) > .xcol::before { background: var(--kpi-bg, #eff6ff) !important; }
/* ikon tanımlanmamış KPI'da düz kare yerine varsayılan (grafik) ikonu */
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) > .xcol {
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 15v2M12 10v7M17 6v11'/></svg>");
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) > .xcol::after {
    background: var(--kpi-renk, #3b82f6) !important;
    -webkit-mask: var(--kpi-ikon) center / 22px no-repeat !important;
            mask: var(--kpi-ikon) center / 22px no-repeat !important;
}
/* Executive: Ciro, Kâr, Marj, Operasyon */
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_2) { --kpi-bg: #eff6ff; --kpi-renk: #3b82f6;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h15a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z'/><path d='M3 7V6a2 2 0 0 1 2-2h11'/><circle cx='16.5' cy='14' r='1.5'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_3) { --kpi-bg: #ecfdf5; --kpi-renk: #10b981;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 4 4 8-8'/><path d='M14 7h7v7'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_4) { --kpi-bg: #fef2f2; --kpi-renk: #ef4444;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 5L5 19'/><circle cx='6.5' cy='6.5' r='2.5'/><circle cx='17.5' cy='17.5' r='2.5'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_5) { --kpi-bg: #fffbeb; --kpi-renk: #f59e0b;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6M8 13h8M8 17h5'/></svg>"); }
/* Pazarlama: CRM etkileşimi, Kazanılan, Dönüşüm, Hacim */
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_8) { --kpi-bg: #f3e8ff; --kpi-renk: #a855f7;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_9) { --kpi-bg: #e0f2fe; --kpi-renk: #0ea5e9;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0z'/><path d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_10) { --kpi-bg: #dcfce7; --kpi-renk: #22c55e;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L3 14h9l-1 8 10-12h-9z'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_11) { --kpi-bg: #ffedd5; --kpi-renk: #f97316;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l2 12H4z'/><circle cx='12' cy='5' r='2.5'/></svg>"); }
/* Personel & Süreç: en çok teklif, en çok operasyon, takım marjı, kişi başı ciro — mockup'taki sol renk şeridi */
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_12) { --kpi-bg: #f3e8ff; --kpi-renk: #8b5cf6; border-left: 4px solid #8b5cf6 !important;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/><path d='M14 3v6h6'/><path d='M8 16c1.5-2 3-2 4 0s2.5 2 4 0'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_13) { --kpi-bg: #fffbeb; --kpi-renk: #f59e0b; border-left: 4px solid #f59e0b !important;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 3h15v13H1z'/><path d='M16 8h4l3 3v5h-7z'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_14) { --kpi-bg: #dcfce7; --kpi-renk: #10b981; border-left: 4px solid #10b981 !important;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 4 4 8-8'/><path d='M14 7h7v7'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_15) { --kpi-bg: #eff6ff; --kpi-renk: #3b82f6; border-left: 4px solid #3b82f6 !important;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='7' r='4'/><path d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/></svg>"); }
/* Tedarikçi & Hat: toplam hat maliyeti, en yüksek hacimli hat, maliyet sapması, tedarikçi sayısı */
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_16) { --kpi-bg: #fee2e2; --kpi-renk: #ef4444; border-left: 4px solid #ef4444 !important;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><path d='M2 10h20M6 15h4'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_17) { --kpi-bg: #e0f2fe; --kpi-renk: #0ea5e9;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 20c2 1 4 1 6 0s4-1 6 0 4 1 6 0'/><path d='M4 17l-1-5h18l-2 5'/><path d='M12 3v9M8 7h8'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_18) { --kpi-bg: #f3e8ff; --kpi-renk: #a855f7;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 3h5v5M21 3l-7 7M8 21H3v-5M3 21l7-7'/></svg>"); }
#FrmNewForm:has(.nct-bi-filtrele) .xcol:has(#Form_1_Txt_19) { --kpi-bg: #eff6ff; --kpi-renk: #3b82f6;
    --kpi-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21V7l7-4 7 4v14'/><path d='M9 21v-6h6v6'/></svg>"); }
/* metin değerli KPI'lar (x / y teklif, ton / CBM, isim · adet) daha küçük punto */
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) input.nct-bi-kpi:is(#Form_1_Txt_9) { font-size: 20px !important; }
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) input.nct-bi-kpi:is(#Form_1_Txt_11) { font-size: 15px !important; }
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-kpi) input.nct-bi-kpi:is(#Form_1_Txt_12, #Form_1_Txt_13, #Form_1_Txt_17) { font-size: 14px !important; }

/* ---------- grafik kartları ---------- */
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-grafik) > .xcol {
    flex-basis: 400px !important;
    padding: 16px !important;
    overflow: hidden !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-grafik) li.octopusitem {
    position: static !important;
    width: 100% !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-grafik,
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-grafik svg > path:first-child { background: #fff !important; }

/* ---------- liste (tablo) kartları + bölüm başlığı ---------- */
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-tablo) > .xcol {
    padding: 0 !important;
    overflow: hidden !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-tablo) li.octopusitem {
    position: static !important;
    width: 100% !important;
}
#FrmNewForm:has(.nct-bi-filtrele) label.nct-bi-baslik {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--bi-primary) !important;
    border-bottom: 1px solid var(--bi-border) !important;
    background: #fff !important;
}
/* Analiz Boyutu satırı (başlık + açılır kutu) kart başlığı gibi */
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(label.nct-bi-baslik):not(:has(.nct-bi-tablo)) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 -1px 0 !important;
    padding: 8px 20px 8px 0 !important;
    background: #fff !important;
    border: 1px solid var(--bi-border) !important;
    border-radius: 12px 12px 0 0 !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(label.nct-bi-baslik):not(:has(.nct-bi-tablo)) label.nct-bi-baslik { border: none !important; white-space: nowrap !important; padding: 6px 0 6px 20px !important; }
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(label.nct-bi-baslik):not(:has(.nct-bi-tablo)) > .xcol {
    float: none !important;
    width: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    border: none !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(label.nct-bi-baslik):not(:has(.nct-bi-tablo)) li.octopusitem {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(label.nct-bi-baslik):not(:has(.nct-bi-tablo)) .k-combobox {
    width: 240px !important;
    height: 34px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(label.nct-bi-baslik):not(:has(.nct-bi-tablo)) + .row-spliter + .xrow:has(.nct-bi-tablo) > .xcol,
#FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow:has(label.nct-bi-baslik):not(:has(.nct-bi-tablo)) + .xrow:has(.nct-bi-tablo) > .xcol { border-radius: 0 0 12px 12px !important; }

#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-tablo.k-grid {
    border: none !important;
    font-size: 13px !important;
    font-family: inherit !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-tablo .k-grid-header,
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-tablo .k-grid-header th,
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-tablo .k-grid-header .k-header {
    background: #f8fafc !important;
    color: var(--bi-text) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 2px solid var(--bi-border) !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-tablo .k-grid-header th { padding: 14px 16px !important; }
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-tablo td {
    padding: 12px 16px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--bi-border) !important;
}
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-tablo tbody tr:hover > td { background: #f0f9ff !important; }
#FrmNewForm:has(.nct-bi-filtrele) .nct-bi-tablo .k-alt > td { background: #fcfdfe !important; }

/* ---------- dar ekran ---------- */
@media (max-width: 991px) {
    #FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-grafik) > .xcol,
    #FrmNewForm:has(.nct-bi-filtrele) .tab-pane > .xrow > .xcol.col-md-8 { flex: 1 1 100% !important; }
    #FrmNewForm:has(.nct-bi-filtrele) .xrow:has(.nct-bi-filtrele) > .xcol { max-width: none !important; }
}

/* 26.10.2026 NCT: Operasyon (p52) Form_3 "Yuk Kalemi" penceresi - DG kapaliyken gizlenen alanlarin satir boslugu.
   Change Properties kod 13 (Action_422) alani li'de height:0 + opacity:0 ile gizler, ama li'nin 4 px alt boslugu ve
   sutunun 2+2 px ic boslugu kalir: gizli iki satir 12+12 px yer tutuyordu. Bu kurallar yalniz gizli li'lere ve tum
   elemanlari gizli satirlara uygulanir; gorunur alanlarin araligi degismez.
   Kapsam: yalniz DenizKirletici alani olan form (Yuk Kalemi). Portal onizlemesi: DG kapali 12/12 -> 0/0 px,
   DG acik 69/69/61 px (degismedi), formun diger satirlari ayni. */
body:has([octopus-userid="DenizKirletici"]) li.octopusitem[style*="opacity: 0"] { margin-top: 0 !important; margin-bottom: 0 !important; }
body:has([octopus-userid="DenizKirletici"]) .xrow:has(li.octopusitem):not(:has(li.octopusitem:not([style*="opacity: 0"]))) > .xcol { padding-top: 0 !important; padding-bottom: 0 !important; }

@import url('https://fonts.googleapis.com/css2?family=inter:wght@400;500;600;700&display=swap');

/* =================================================================== */
/* 1. GENEL SIFIRLAMA (Çok Önemli)                                     */
/* =================================================================== */

/* Varsayılan olarak TÜM sidebar linklerinin arka planını temizle */
/* Bu kural "istenmeyen mavi arka planları" yok eder. */
html body #sidebar .nav-item .nav-link {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    color: #374151 !important; /* Standart Gri Yazı */
    opacity: 1 !important;
    
    /* Animasyon */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    margin: 2px 10px !important;
    width: auto !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
}

/* İkonları özgür bırak (Rengi miras alsın) */
html body #sidebar .nav-item .nav-link i,
html body #sidebar .nav-item .menu-icon,
html body #sidebar .nav-item .nav-link svg {
    color: inherit !important;
    opacity: 1 !important;
    filter: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
    margin-right: 12px !important;
}

/* ------------------------------- */
/* 2. HOVER (ÜZERİNE GELİNCE)      */
/* ------------------------------- */
html body #sidebar .nav-item:not(.nav-profile) .nav-link:hover {
    background-color: #ffffff !important;   /* Hoverda Beyaz */
    color: #2563eb !important;             /* Yazı Mavi */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    transform: translateX(8px) !important; /* Sağa kayma */
    border-color: #d1d5db !important;

}

/* Hoverda ikonlar da mavi olsun */
html body #sidebar .nav-item:not(.nav-profile) .nav-link:hover i,
html body #sidebar .nav-item:not(.nav-profile) .nav-link:hover .menu-title {
    color: #2563eb !important;
}

/* ------------------------------- */
/* 3. ACTIVE LEAF (SADECE SEÇİLİ OLAN) - EN KRİTİK KISIM */
/* ------------------------------- */

/* JS ile eklediğimiz 'active-leaf' sınıfı varsa BOYA */
html body #sidebar .nav-item.active-leaf > .nav-link {
    background: linear-gradient(90deg, rgba(37,99,235,0.15) 0%, rgba(255,255,255,0) 100%) !important;
    border-left: 4px solid #2563eb !important; /* Sol Mavi Çizgi */
    color: #2563eb !important; /* Yazı Mavi */
    font-weight: 700 !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: none !important;
}

/* ------------------------------- */
/* 4. ACTIVE PARENT (ÜST MENÜ)     */
/* ------------------------------- */

/* Üst menü sadece 'active'dir, 'active-leaf' DEĞİLDİR. */
/* O yüzden arkası ŞEFFAF kalır, sadece yazısı Mavi olur. */
html body #sidebar .nav-item.active:not(.active-leaf) > .nav-link {
    background: transparent !important;
    border-left: 4px solid transparent !important;
    color: #2563eb !important;
}

/* ------------------------------- */
/* 5. İKON VE YAZI RENK YÖNETİMİ   */
/* ------------------------------- */

/* Her türlü aktif durumda (Leaf veya Parent) ikon ve yazı mavi olsun */
html body #sidebar .nav-item.active > .nav-link i,
html body #sidebar .nav-item.active > .nav-link .menu-title,
html body #sidebar .nav-item.active > .nav-link span,
html body #sidebar .nav-item.active > .nav-link .custom-menu-icon {
    color: #2563eb !important;
}

/* İSTİSNA: Renkli Emojiler ve Resimler Mavi Olmasın */
html body #sidebar .nav-item.active > .nav-link .emoji-icon,
html body #sidebar .nav-item.active > .nav-link img.custom-menu-icon {
    color: initial !important;
    filter: none !important;
}

/* ------------------------------- */
/* 6. ALT MENÜ ÖZEL AYARLARI       */
/* ------------------------------- */

/* Alt menü linkleri (Sub-menu items) için kesin kural */
/* Eğer active değilse, kesinlikle GRİ ve ŞEFFAF kal */
html body #sidebar .sub-menu .nav-item:not(.active) > .nav-link {
    background: transparent !important;
    color: #374151 !important;
}

/* Girintiler */
html body #sidebar .sub-menu .nav-item .nav-link { padding-left: 35px !important; }
html body #sidebar .sub-menu .sub-menu .nav-item .nav-link { padding-left: 50px !important; }

/* ------------------------------- */
/* 7. DİĞER TEMİZLİKLER            */
/* ------------------------------- */
html body #sidebar .nav-item::before, html body #sidebar .nav-item::after,
html body #sidebar .nav-link::before, html body #sidebar .nav-link::after {
    display: none !important;
}

/* Sidebar Genel Yapı */
html body nav#sidebar, html body .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
}
html body .container-scroller .navbar .navbar-brand-wrapper {
   // background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Sidebar içindeki taşma engelini kaldır */
#sidebar, .sidebar-offcanvas, .nav-item.nav-profile {
    overflow: visible !important;
}



/* Çıkış yapma işlemlerini gösteren buyyonun tasarımı için */

/* 1. Kapsayıcının (Sidebar) sınırlarını tamamen geçersiz kılalım */
#sidebar, 
.sidebar-offcanvas, 
.nav-item.nav-profile {
    overflow: visible !important;
    z-index: 999 !important;
}

/* 2. Menü açıldığında tarayıcının hesapladığı koordinatları devre dışı bırakalım */
div.dropdown-menu.show[aria-labelledby="dropdownMenuLink"] {
    position: fixed !important; /* Ekrana sabitler, sidebar dışına taşır */
    z-index: 2147483647 !important; /* Tarayıcıdaki en yüksek z-index */
    
    /* Otomatik hesaplanan transformu (translate3d) iptal eder */
    transform: none !important; 
    
    /* Görseldeki butona göre konumu manuel sabitleyelim */
    /* Bu değerleri butonun altına gelecek şekilde ince ayar yapabilirsin */
    top: 95px !important; 
    left: 10px !important;
    
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Menünün diğer kartların arkasında kalmasını engellemek için */
    background-color: white !important;
    min-width: 200px !important;
}

/* 3. Menü içindeki linklerin (Yönetim Paneli vb.) görünürlüğünü garanti edelim */
.dropdown-item {
    display: flex !important;
    align-items: center !important;
    background-color: white !important;
    color: #333 !important;
}
@import url('https://fonts.googleapis.com/css2?family=inter:wght@400;500;600;700&display=swap');

/* =================================================================== */
/* 1. KISIM: SADECE YAZILARI GRİ YAP, İKONLARA DOKUNMA               */
/* =================================================================== */

/* YAZILAR: Standart Gri (#374151) olmaya devam etsin */
html body #sidebar .nav-item .nav-link span,
html body #sidebar .nav-item .nav-link .menu-title {
    opacity: 1 !important;
    filter: none !important;
    color: #374151 !important; 
}

/* İKONLAR İÇİN ÖZGÜRLÜK: */
/* İkonlara hiçbir renk atamıyoruz. 'inherit' diyerek kendi hallerine bırakıyoruz. */
html body #sidebar .nav-item .nav-link i,
html body #sidebar .nav-item .menu-icon,
html body #sidebar .nav-item .nav-link svg {
    opacity: 1 !important;
    filter: none !important;
    color: inherit !important; /* Kendi orijinal rengini kullansın */
    fill: inherit !important;  /* SVG'ler için de geçerli */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ------------------------------- */
/* SABİT SIDEBAR (MASAÜSTÜ)        */
/* ------------------------------- */
html body nav#sidebar,
html body .sidebar,
html body .sidebar-offcanvas {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    position: fixed !important;
    left: 0 !important;
    top: 60px !important;
    bottom: 0 !important;
    width: 260px !important;
    height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
    padding-bottom: 20px !important;
    transition: transform 0.3s ease-in-out !important;
}

/* ------------------------------- */
/* MOBİLDE SABİT OLMASIN           */
/* ------------------------------- */
@media(max-width: 768px) {
    html body nav#sidebar,
    html body .sidebar,
    html body .sidebar-offcanvas {
        position: fixed !important;
        transform: translateX(-100%);
    }

    html body nav#sidebar.active,
    html body .sidebar.active,
    html body .sidebar-offcanvas.active {
        transform: translateX(0) !important;
    }
}

html body #sidebar::-webkit-scrollbar { width: 5px; }
html body #sidebar::-webkit-scrollbar-track { background: transparent; }
html body #sidebar::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 4px; }
html body #sidebar::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }

/* Menü Temizliği */
html body #sidebar .nav,
html body #sidebar .nav-item,
html body #sidebar .nav-link,
html body #sidebar .collapse,
html body #sidebar .sub-menu {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    transition: none !important;
}

html body #sidebar .nav-item .nav-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 15px !important;
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important;
}

html body #sidebar .nav-item .nav-link i {
    font-size: 18px !important;
    margin-right: 12px !important;
    width: 20px !important;
    text-align: center;
}

/* Hover Efektleri */
html body #sidebar .nav-link:hover {
    background-color: #f3f4f6 !important;
    color: #2563eb !important; 
    border-radius: 6px !important;
    opacity: 1 !important;
}

html body #sidebar .nav-link:hover span,
html body #sidebar .nav-link:hover .menu-title,
html body #sidebar .nav-link:hover i {
    color: #2563eb !important;
    opacity: 1 !important;
}

/* Active ve Expanded Efektleri */
html body #sidebar .nav-link[aria-expanded="true"], 
html body #sidebar .nav-item.active > .nav-link,
html body #sidebar .sub-menu .nav-item.active .nav-link {
    background-color: #eff6ff !important; 
    color: #2563eb !important; 
    font-weight: 700 !important;
    border-radius: 6px !important;
    opacity: 1 !important;
}

html body #sidebar .nav-item.active > .nav-link i,
html body #sidebar .nav-link[aria-expanded="true"] i,
html body #sidebar .sub-menu .nav-item.active .nav-link i {
    color: #2563eb !important;
    opacity: 1 !important;
}

/* Sub-Menu Arka Planı */
html body #sidebar .sub-menu,
html body #sidebar .collapse.show {
    background-color: #ffffff !important;
    padding: 5px 0 !important;
}

html body #sidebar .sub-menu .nav-item .nav-link {
    padding-left: 45px !important;
}
html body #sidebar .sub-menu .sub-menu .nav-item .nav-link {
    padding-left: 65px !important;
}

/* Before/After Temizliği */
html body #sidebar .nav-item::before, html body #sidebar .nav-item::after,
html body #sidebar .nav-link::before, html body #sidebar .nav-link::after,
html body #sidebar .collapse::before, html body #sidebar .collapse::after {
    display: none !important;
    content: none !important;
}

/* Navbar Marka ve Profil Alanı */
html body .navbar-brand-wrapper,
html body .nav-profile {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
html body .navbar-brand-wrapper *,
html body .nav-profile .profile-name {
    color: #111827 !important;
}

/* Profile Section Detayları */
.nav-profile { padding: 14px !important; border-bottom: 1px solid var(--border-light) !important; margin-bottom: 8px !important; background-color: var(--surface-light) !important; }
.nav-profile .nav-link { display: flex !important; align-items: center !important; gap: 12px !important; padding: 0 !important; text-decoration: none !important; background-color: transparent !important; }
.nav-profile .nav-link:hover { background-color: transparent !important; }
.profile-image { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.profile-image img { width: 40px !important; height: 40px !important; border-radius: 50% !important; background-color: var(--hover-light); object-fit: cover; }
.dot-indicator { position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface-light); }
.bg-success { background-color: #10b981 !important; }
.text-wrapper { flex: 1; }
.profile-name { font-size: 10px !important; font-weight: 600 !important; color: var(--text-light) !important; margin: 0 !important; line-height: 1.4 !important; }
.designation { font-size: 13px !important; color: var(--yellow-accent) !important; margin: 2px 0 0 0 !important; line-height: 1.4 !important; }

/* Menu Action Icon */
.menu-action-icon { opacity: 0 !important; margin-left: 8px !important; padding: 4px !important; border-radius: 4px !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; }
.nav-link:hover .menu-action-icon { opacity: 1 !important; }
.menu-action-icon:hover { background-color: rgba(0, 0, 0, 0.05) !important; }

/* Utility Classes */
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-column { flex-direction: column !important; }
.collapsed .menu-arrow { transform: rotate(0deg) !important; }
@media (max-width: 768px) { .sidebar { width: 100%; position: relative; } }

/* Sidebar Profile Card Styles */
html body #sidebar .nav-item.nav-profile { margin: 15px auto !important; width: 90% !important; background-color: #ffffff !important; border-radius: 12px !important; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08) !important; border: 1px solid #e5e7eb !important; border-bottom: none !important; padding: 0 !important; transition: all 0.3s ease !important; }
html body #sidebar .nav-item.nav-profile .nav-link { height: auto !important; display: flex !important; align-items: center !important; padding: 8px 10px 8px 12px !important; border-radius: 12px !important; width: 100% !important; }
html body #sidebar .nav-item.nav-profile .profile-image { margin-right: 12px !important; flex-shrink: 0 !important; position: relative; display: flex !important; align-items: center !important; justify-content: center !important; }
html body #sidebar .nav-item.nav-profile .profile-image img { width: 40px !important; height: 40px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid #f9fafb !important; }
html body #sidebar .nav-item.nav-profile .dot-indicator { border: 2px solid #ffffff !important; width: 10px !important; height: 10px !important; bottom: 1px !important; right: 1px !important; }
html body #sidebar .nav-item.nav-profile .text-wrapper { display: flex !important; flex-direction: column !important; justify-content: center !important; line-height: 1.2 !important; overflow: hidden !important; }
html body #sidebar .nav-item.nav-profile .profile-name { margin-bottom: 1px !important; font-weight: 700 !important; color: #1f2937 !important; font-size: 10px !important; white-space: nowrap !important; }
html body #sidebar .nav-item.nav-profile .designation { font-size: 11px !important; color: #2563eb !important; margin: 0 !important; font-weight: 500 !important; }
html body #sidebar .nav-item.nav-profile:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important; border-color: #d1d5db !important; cursor: pointer !important; }

/* Normal Nav Items Styling */
html body #sidebar .nav-item:not(.nav-profile) .nav-link { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; margin: 2px 10px !important; width: auto !important; border-radius: 10px !important; border: 1px solid transparent !important; }
html body #sidebar .nav-item:not(.nav-profile) .nav-link:hover { background-color: #ffffff !important; color: #2563eb !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important; transform: translateX(8px) !important; border-color: #d1d5db !important; }
html body #sidebar .nav-item:not(.nav-profile) .nav-link:hover i, html body #sidebar .nav-item:not(.nav-profile) .nav-link:hover .menu-title { color: #2563eb !important; }
html body #sidebar .sub-menu .nav-item .nav-link:hover { background-color: #f9fafb !important; transform: translateX(5px) !important; box-shadow: none !important; }
html body #sidebar .nav-item:not(.nav-profile).active > .nav-link { background-color: #eff6ff !important; color: #2563eb !important; font-weight: 700 !important; box-shadow: 0 2px 5px rgba(37, 99, 235, 0.1) !important; }

/* Navbar Brand Wrapper */
html body .container-scroller .navbar.default-layout .navbar-brand-wrapper,
html body .container-scroller .navbar .navbar-brand-wrapper,
html body nav .navbar-brand-wrapper {
    //background: #f2f2f2 !important;        
    background-color: #ffffff !important;
  //  background-image: none !important;
    border-right: 1px solid #dcdcdc !important; 
    border-bottom: 1px solid #dcdcdc !important;
    box-shadow: none !important;
}

/* ÜST MENÜ İKONLARI: Siyah yapma, kendi renginde bırak */
html body #toggle-side-menu,
html body .navbar-brand-wrapper .mdi,
html body .navbar-brand-wrapper .mdi::before,
html body .navbar-brand-wrapper button span {
    color: inherit !important; 
    fill: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 26px !important;
}

/* MOBİL Gizleme */
@media (max-width: 768px) {
    html body #toggle-side-menu,
    html body .navbar-brand-wrapper .mdi,
    html body .navbar-brand-wrapper .mdi::before,
    html body .navbar-brand-wrapper button span {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Logo Filtreleri: Logoyu da siyah yapma */
html body .container-scroller .navbar .navbar-brand-wrapper .brand-logo img,
html body .container-scroller .navbar .navbar-brand-wrapper .brand-logo-mini img { 
    filter: none !important; /* Parlaklık filtresini kaldır */
    opacity: 1 !important; 
}
@media (max-width: 768px) {
    html body .container-scroller .navbar .navbar-brand-wrapper .brand-logo img,
    html body .container-scroller .navbar .navbar-brand-wrapper .brand-logo-mini img { filter: none !important; opacity: 1 !important; }
}

/* --- SEÇİLİ ELEMAN (ACTIVE) STİLLERİ --- */
html body #sidebar .nav-item.active > .nav-link,
html body #sidebar .sub-menu .nav-item.active > .nav-link {
    background: linear-gradient(90deg, rgba(37,99,235,0.15) 0%, rgba(255,255,255,0) 100%) !important;
    border-left: 4px solid #2563eb !important; 
    color: #2563eb !important;
    font-weight: 700 !important;
    border-radius: 0 10px 10px 0 !important;
}

html body #sidebar .nav-item.active > .nav-link i,
html body #sidebar .nav-item.active > .nav-link .menu-title,
html body #sidebar .nav-item.active > .nav-link span {
    color: #2563eb !important;
}

/* Collapse olan parent active ise yazı rengi */
html body #sidebar .nav-item.active > .nav-link[data-toggle="collapse"] {
    background: transparent !important;
    border-left: 4px solid transparent !important;
    color: #374151 !important; 
}

html body #sidebar .nav-item.active > .nav-link[href*="Dashboard"],
html body #sidebar .nav-item.active > .nav-link:not([data-toggle="collapse"]) {
    color: #2563eb !important;
}

html body #sidebar .sub-menu .nav-item .nav-link {
    padding-left: 45px !important;
    border-left: 4px solid transparent !important;
}

/* --- İKON BOYUTLANDIRMA VE RENK (ALT MENÜ DÜZELTMESİ) --- */
html body #sidebar .nav-item .nav-link i,
html body #sidebar .sub-menu .nav-item .nav-link i,
html body #sidebar .nav-item .menu-icon {
    font-size: 18px !important;   
    width: 24px !important;       
    min-width: 24px !important;   
    text-align: center !important; 
    margin-right: 12px !important; 
    line-height: 1 !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
}

html body #sidebar .nav-item .nav-link i::before {
    font-size: 18px !important;
}

/* DÜZELTME: Alt menü ikonları da kendi renklerinde kalsın */
html body #sidebar .sub-menu .nav-item .nav-link i {
    opacity: 1 !important;
    color: inherit !important; /* Gri değil, orijinal renk */
}

/* Seçili olduğunda mavi */
html body #sidebar .nav-item.active > .nav-link i,
html body #sidebar .sub-menu .nav-item.active > .nav-link i {
    color: #2563eb !important;
}

/* ========================================================== */
/* --- İÇ İÇE MENÜLER İÇİN GİRİNTİ VE METİN DÜZENLEMESİ --- */
/* ========================================================== */
html body #sidebar .sub-menu .nav-item .nav-link { padding-left: 35px !important; }
html body #sidebar .sub-menu .sub-menu .nav-item .nav-link { padding-left: 50px !important; }
html body #sidebar .nav-item .nav-link { height: auto !important; min-height: 40px !important; align-items: center !important; padding-top: 8px !important; padding-bottom: 8px !important; }
html body #sidebar .nav-item .nav-link .menu-title { white-space: normal !important; display: inline-block !important; line-height: 1.3 !important; vertical-align: middle !important; max-width: 170px !important; }
html body #sidebar .nav-item .nav-link i { align-self: center !important; margin-top: 0 !important; }

/* =================================================================== */
/* LOGO ALANI ARKA PLANI (SIDEBAR İLE EŞİTLENDİ - TAM BEYAZ)           */
/* =================================================================== */
html body .container-scroller .navbar.default-layout .navbar-brand-wrapper,
html body .container-scroller .navbar .navbar-brand-wrapper,
html body nav .navbar-brand-wrapper {
  //  background: #ffffff !important;        /* #f2f2f2 yerine #ffffff yapıldı */
  //  background-color: #ffffff !important;  /* Tam beyaz */
    background-image: none !important;
    border-right: 1px solid #e5e7eb !important; /* Kenarlık rengi sidebar ile uyumlu hale getirildi */
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}
/* Ana Tablo �er�evesi */
.k-grid {
    font-family: 'Figtree', 'Roboto', 'Segoe UI', sans-serif !important;
    background-color: #fff !important;
    border: 1px solid #d0d4e4 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    font-size: 15px !important;
}

/* Header Alani */
.k-grid-header {
    padding-right: 0 !important; 
    border-radius: 8px 8px 0 0 !important;
}

/* Baslik H�creleri (Header Cells) */
.k-grid-header .k-header {
    background-color: #fff !important;
    background-image: none !important;
    color: #676879 !important; 
    font-weight: 600 !important;
    /* G�NCELLENDI: Dikey 4px, Yatay 20px */
    padding: 4px 20px !important; 
    border-bottom: 2px solid #d0d4e4 !important;
    vertical-align: middle !important;
    text-transform: capitalize !important;
}

/* Satir Genel Ayarlari */
.k-grid-content tr {
    background-color: #fff !important;
    border-bottom: 1px solid #e6e9ef !important;
}

/* Satir Hover Efekti */
.k-grid-content tr:hover {
    background-color: #f5f6f8 !important;
}

/* Veri H�creleri (Data Cells) */
.k-grid-content td {
    border-style: none !important; 
    border-bottom: 1px solid #e6e9ef !important; 
    /* G�NCELLENDI: Dikey 4px, Yatay 20px */
    padding: 4px 20px !important; 
    vertical-align: middle !important;
    line-height: 1.5 !important;
    font-weight: 400 !important; 
}

/* Se�ili Satir Ayarlari */
.k-grid tr.k-state-selected,
.k-grid td.k-state-selected {
    background-color: #e5f4ff !important; 
}

/* Alt Sayfalama (Pager) Alani */
.k-pager-wrap, .k-grid-pager {
    background-color: #fff !important;
    border-top: 1px solid #d0d4e4 !important;
    color: #676879 !important;
    border-radius: 0 0 8px 8px !important;
}

/* Sayfalama Numaralari */
.k-pager-numbers .k-link.k-state-selected {
    background-color: #0073ea !important;
    color: #fff !important;
    border-radius: 50% !important;
}




/* Ana Pencere ve Form Kapsayicisi */
#FrmExecNewForm_Form_1,
.xpodarightform,
.k-window-content,
.k-window-iframecontent {
    background-color: #ffffff !important;
}

/* Iframe'in Kendisi */
.k-content-frame {
    background-color: #ffffff !important;
}

/* Eger iframe i�inden gelen bir g�vde rengi varsa */
body {
    background-color: #ffffff !important;
}
/* =========================================================
   Textbox (Kendo TextBox & TextArea) — Xpoda Tasarımı
   Buton ve dropdown sistemiyle aynı palet ve ölçüler kullanılır.
   Bu dosyayı Xpoda'ya ekleyin; mevcut TextBox ve TextArea
   markup'ı otomatik olarak etkilenir.
   ========================================================= */

:root {
  --tb-blue-600: #2563eb;
  --tb-blue-700: #1d4ed8;
  --tb-blue-100: #dbeafe;
  --tb-blue-50:  #eff6ff;
  --tb-slate-900: #0f172a;
  --tb-slate-700: #334155;
  --tb-slate-600: #475569;
  --tb-slate-500: #64748b;
  --tb-slate-400: #94a3b8;
  --tb-slate-300: #cbd5e1;
  --tb-slate-200: #e2e8f0;
  --tb-slate-100: #f1f5f9;
  --tb-slate-50:  #f8fafc;
  --tb-radius: 6px;
  --tb-height: 36px;
  --tb-font-size: 12.5px;
}

/* ---------- TextBox (Giriş kutusu) ---------- */
span.k-input:is(.k-textbox, .k-textarea) {
  border: 1px solid var(--tb-slate-300) !important;
  border-radius: var(--tb-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  transition: border-color 0.13s ease, box-shadow 0.13s ease !important;
  box-sizing: border-box !important;
}

span.k-input.k-textbox {
  height: var(--tb-height) !important;
}

span.k-input.k-textarea {
  min-height: 80px !important;
  height: auto !important;
  padding: 8px 0 !important;
  align-items: flex-start !important;
}

span.k-input:is(.k-textbox, .k-textarea):hover {
  border-color: var(--tb-slate-400) !important;
}

span.k-input:is(.k-textbox, .k-textarea):focus-within {
  border-color: var(--tb-blue-600) !important;
  box-shadow: 0 0 0 3px var(--tb-blue-100) !important;
}

/* ---------- İç Input Alanı ---------- */
:is(.k-textbox, .k-textarea) .k-input-inner {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-family: inherit !important;
  font-size: var(--tb-font-size) !important;
  color: var(--tb-slate-700) !important;
  min-width: 0 !important;
  flex: 1 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

span.k-input.k-textarea .k-input-inner {
  resize: vertical !important;
  min-height: 64px !important;
  padding: 0 12px !important;
}

:is(.k-textbox, .k-textarea) .k-input-inner::placeholder {
  color: var(--tb-slate-400) !important;
}

/* ---------- Devre Dışı Durumu ---------- */
span.k-input:is(.k-textbox, .k-textarea).k-disabled,
span.k-input:is(.k-textbox, .k-textarea)[aria-disabled="true"] {
  opacity: 0.55 !important;
  background: var(--tb-slate-50) !important;
  cursor: not-allowed !important;
}

span.k-input:is(.k-textbox, .k-textarea).k-disabled .k-input-inner {
  cursor: not-allowed !important;
}