/* =========================================================
   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 {
  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;
  transition: background 0.13s ease, border-color 0.13s ease,
              color 0.13s ease, box-shadow 0.13s ease !important;
}
.btn:active { transform: translateY(0.5px) !important; }
.btn:focus-visible { outline: 2px solid var(--btn-blue-600) !important; outline-offset: 2px !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) {
  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-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !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;
  gap: 8px !important;
}
.toolbar .spacer { flex: 1 !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; }

/* ---------- Hizalama Yardımcısı ---------- */
/* Filtre butonlarını etiketli inputlarla dikey olarak hizalamak için (Xpoda absolute yerleşimde) */
.btn-filter-align {
  margin-top: 22px !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 > .btn,
.btn-group > .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,
.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 */
.btn-group > .btn:last-child,
.btn-group > .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.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 ve Kanban Buton Tasarımları (Toggle İptal Edildiğinde)
   Kullanım: Xpoda'dan butonlara "nct-btn-list" veya "nct-btn-kanban" yazın.
   ========================================================= */

.nct-btn-list, .nct-btn-kanban {
    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;
}

/* Liste Butonu Tasarımı (Sakin/Nötr) */
.nct-btn-list {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

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

/* Kanban Butonu Tasarımı (Vurgulu/Mavi) */
.nct-btn-kanban {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

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

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

/* =========================================================
   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; }


/* =========================================================
   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;
}

/* 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: 16px !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;
}

/* 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;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !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;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !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;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !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: 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;
    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;
}

/* =================================================================== */
/* 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;
}
/* ========================================================================== */
/* 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 */
}
/* NCT bileşenlerinde label ve başlık (h1-h4) tipografisini/renklerini ortaklaştıran stil sınıfları. */
.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: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
.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;
}

.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;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
.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;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.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;
    font-size: 16px !important;
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.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: 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;
    color: red !important;
    font-weight: bold !important;
}

.nct-label-optional {
    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.3s ease, transform 0.2s ease !important;
}

.nct-label-optional::after {
 content: " (optional)" !important;
    color: #9b9b9b !important;    /* Görseldeki açık gri tonu */
    font-size: 11px !important;    /* Ana metinden daha küçük boyut */
  
}


.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;
}

/* NCT ortak buton stilleri (NoCodeDesign.css ile uyumlu) */
:is(
    .nct-btn,
    .nct-btn-primary,
    .nct-btn-secondary,
    .nct-btn-success,
    .nct-btn-warning,
    .nct-btn-danger,
    .nct-btn-info,
    .nct-btn-dark
) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'Segoe UI', Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 5px !important;
    transition: background-color .2s ease, filter .2s ease, transform .05s ease !important;
    user-select: none !important;
    text-decoration: none !important;
}

:is(
    .nct-btn,
    .nct-btn-primary,
    .nct-btn-secondary,
    .nct-btn-success,
    .nct-btn-warning,
    .nct-btn-danger,
    .nct-btn-info,
    .nct-btn-dark
):link,
:is(
    .nct-btn,
    .nct-btn-primary,
    .nct-btn-secondary,
    .nct-btn-success,
    .nct-btn-warning,
    .nct-btn-danger,
    .nct-btn-info,
    .nct-btn-dark
):visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

:is(
    .nct-btn,
    .nct-btn-primary,
    .nct-btn-secondary,
    .nct-btn-success,
    .nct-btn-warning,
    .nct-btn-danger,
    .nct-btn-info,
    .nct-btn-dark
):hover {
    filter: brightness(0.95) !important;
}

:is(
    .nct-btn,
    .nct-btn-primary,
    .nct-btn-secondary,
    .nct-btn-success,
    .nct-btn-warning,
    .nct-btn-danger,
    .nct-btn-info,
    .nct-btn-dark
):active {
    transform: translateY(1px) !important;
}

/* Tek class ile renk varyantları */
.nct-btn { background-color: #57C88F !important; } /* eski varsayılan (success) */
.nct-btn:hover { background-color: #49B27D !important; filter: none !important; }

.nct-btn-primary { background-color: #2563eb !important; }   /* mavi */
.nct-btn-secondary { background-color: #64748b !important; } /* slate */
.nct-btn-success { background-color: #57C88F !important; }   /* NoCodeDesign yeşili */
.nct-btn-warning { background-color: #f59e0b !important; }   /* amber */
.nct-btn-danger { background-color: #ef4444 !important; }    /* kırmızı */
.nct-btn-info { background-color: #06b6d4 !important; }      /* cyan */
.nct-btn-dark { background-color: #111827 !important; }      /* koyu */

/* Hover tonları (NoCodeDesign'deki gibi "koyu" alternatifi) */
.nct-btn-primary:hover { background-color: #1d4ed8 !important; filter: none !important; }
.nct-btn-secondary:hover { background-color: #475569 !important; filter: none !important; }
.nct-btn-success:hover { background-color: #49B27D !important; filter: none !important; }
.nct-btn-warning:hover { background-color: #d97706 !important; filter: none !important; }
.nct-btn-danger:hover { background-color: #dc2626 !important; filter: none !important; }
.nct-btn-info:hover { background-color: #0891b2 !important; filter: none !important; }
.nct-btn-dark:hover { background-color: #0b1220 !important; filter: none !important; }

/* Devre dışı */
:is(
    .nct-btn,
    .nct-btn-primary,
    .nct-btn-secondary,
    .nct-btn-success,
    .nct-btn-warning,
    .nct-btn-danger,
    .nct-btn-info,
    .nct-btn-dark
):disabled,
:is(
    .nct-btn,
    .nct-btn-primary,
    .nct-btn-secondary,
    .nct-btn-success,
    .nct-btn-warning,
    .nct-btn-danger,
    .nct-btn-info,
    .nct-btn-dark
)[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Geriye dönük uyum (istersen sonra kaldırırız) */
.nct-btn--primary { background-color: #2563eb !important; }
.nct-btn--secondary { background-color: #64748b !important; }
.nct-btn--success { background-color: #57C88F !important; }
.nct-btn--warning { background-color: #f59e0b !important; }
.nct-btn--danger { background-color: #ef4444 !important; }
.nct-btn--info { background-color: #06b6d4 !important; }
.nct-btn--dark { background-color: #111827 !important; }

.nct-btn--primary:hover { background-color: #1d4ed8 !important; filter: none !important; }
.nct-btn--secondary:hover { background-color: #475569 !important; filter: none !important; }
.nct-btn--success:hover { background-color: #49B27D !important; filter: none !important; }
.nct-btn--warning:hover { background-color: #d97706 !important; filter: none !important; }
.nct-btn--danger:hover { background-color: #dc2626 !important; filter: none !important; }
.nct-btn--info:hover { background-color: #0891b2 !important; filter: none !important; }
.nct-btn--dark:hover { background-color: #0b1220 !important; filter: none !important; }

/* "Haritada Gör" butonu (tek class, ikonlu) */
:is(.nct-btn-map, #Form_2_Link_1) {
    /* Eski tasarımdaki tona yakın */
    --nct-map-bg: #3cc1cd;
    --nct-map-bg-hover: #2eaab4;
    --nct-map-ring: rgba(60, 193, 205, 0.35);

    background-color: var(--nct-map-bg) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'Segoe UI', Inter, sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 44px !important;
    padding: 12px 52px 12px 16px !important;
    border-radius: 10px !important;
    border: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    line-height: 1 !important;
    position: relative !important;
    user-select: none !important;
    text-decoration: none !important;
    box-shadow: 0 8px 16px rgba(2, 132, 199, 0.18) !important;
    transition: background-color .18s ease, transform .08s ease, box-shadow .18s ease, filter .18s ease !important;
    box-sizing: border-box !important;
    margin-top: 24px !important;
}

:is(.nct-btn-map, #Form_2_Link_1):link,
:is(.nct-btn-map, #Form_2_Link_1):visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

:is(.nct-btn-map, #Form_2_Link_1)::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    width: 22px !important;
    height: 22px !important;
    transform: translateY(-50%) !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M12%2022s7-4.35%207-11A7%207%200%201%200%205%2011c0%206.65%207%2011%207%2011Z%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M12%2014a3%203%200%201%200%200-6%203%203%200%200%200%200%206Z%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M12%2022s7-4.35%207-11A7%207%200%201%200%205%2011c0%206.65%207%2011%207%2011Z%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M12%2014a3%203%200%201%200%200-6%203%203%200%200%200%200%206Z%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
    opacity: 0.95 !important;
}

:is(.nct-btn-map, #Form_2_Link_1):hover {
    background-color: var(--nct-map-bg-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 18px rgba(2, 132, 199, 0.22) !important;
}

:is(.nct-btn-map, #Form_2_Link_1):active {
    transform: translateY(0) !important;
    filter: brightness(0.98) !important;
}

:is(.nct-btn-map, #Form_2_Link_1):focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 4px var(--nct-map-ring), 0 10px 18px rgba(2, 132, 199, 0.22) !important;
}

:is(.nct-btn-map, #Form_2_Link_1):disabled,
:is(.nct-btn-map, #Form_2_Link_1)[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Checkbox (tek class + Kendo) */
.nct-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
}

/* Kapsayıcıya class verildiğinde */
.nct-checkbox input[type="checkbox"] {
    width: 30px !important;
    height: 30px !important;
    cursor: pointer !important;
    accent-color: #3cc1cd !important;
    vertical-align: middle !important;
    border-color: rgba(15, 23, 42, 0.55) !important;
    box-shadow: inset 0 0 0 1.5px rgba(15, 23, 42, 0.35) !important; /* daha belirgin çerçeve */
    border-radius: 4px !important;
}

/* Octopus customcss attribute ile (class basılmadığında) */
[octopod-customcss=".nct-checkbox"] input[type="checkbox"] {
    width: 30px !important;
    height: 30px !important;
    cursor: pointer !important;
    accent-color: #3cc1cd !important;
    vertical-align: middle !important;
    border-color: rgba(15, 23, 42, 0.55) !important;
    box-shadow: inset 0 0 0 1.5px rgba(15, 23, 42, 0.35) !important;
    border-radius: 4px !important;
}

/* Kendo input'a doğrudan class verildiyse */
input.nct-checkbox[type="checkbox"] {
    width: 30px !important;
    height: 30px !important;
    cursor: pointer !important;
    accent-color: #3cc1cd !important;
    vertical-align: middle !important;
    border-color: rgba(15, 23, 42, 0.55) !important;
    box-shadow: inset 0 0 0 1.5px rgba(15, 23, 42, 0.35) !important;
    border-radius: 4px !important;
}

/* Kendo checkbox (k-checkbox sınıfı ile) */
.k-checkbox-wrap .nct-checkbox.k-checkbox {
    border-color: rgba(15, 23, 42, 0.55) !important;
    box-shadow: inset 0 0 0 1.5px rgba(15, 23, 42, 0.35) !important;
}

.k-checkbox-wrap .nct-checkbox.k-checkbox:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(60, 193, 205, 0.35), inset 0 0 0 1.5px rgba(15, 23, 42, 0.35) !important;
}






.company-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 15px auto;
    padding: 14px 22px;
    border-radius: 10px;

    background: #f8faff;
    border: 1px solid #dbe2f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    font-size: 18px;
    font-weight: 600;
    color: #1e3a8a;
}

.company-info::before {
    content: "\1f3e2";
    font-size: 20px;
    color: #007bff;
}

.company-info .details {
    color: #007bff;
    font-weight: 500;
}

/* ========================================================= */
/* 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;
    }
}
/* Shared styles for NCT form body: main container, tab contents, card look (bg/padding/shadow). */
#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;
} 

.content-wrapper {
    padding: 0 !important;
}

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


#Form_12_Kanban_1 div.k-taskboard-column-cards-container div.k-taskboard-card button.k-taskboard-column-menu-button {
    display: none !important;
}
/* Kartların sağ üstündeki dikey üç nokta menü butonunu gizler */
#Form_12_Kanban_1 .k-taskboard-card-menu-button {
    display: none !important;
}
#Form_12_Kanban_1 .k-taskboard-column-header-actions {
    display: none !important;
}

#Form_4_Kanban_1 > div:first-child > div {
    display: none !important;
}
/* Kartların sağ üstündeki dikey üç nokta menü butonunu gizler */
#Form_4_Kanban_1 .k-taskboard-card-menu-button {
    display: none !important;
}


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

#Form_4_Kanban_1 .k-taskboard-column-header-actions {
    display: none !important;
}

#Form_9_Kanban_1 > div:first-child > div {
    display: none !important;
}
/* Kartların sağ üstündeki dikey üç nokta menü butonunu gizler */
#Form_9_Kanban_1 .k-taskboard-card-menu-button {
    display: none !important;
}

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

#Form_9_Kanban_1 .k-taskboard-column-header-actions {
    display: none !important;
}



.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;  */
/* } */



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


/* 3. Ana Tahtanın İç Kenar Boşluklarını (Padding) Sıfırla */
#Form_2_Kanban_1 .k-taskboard-content,
#Form_2_Kanban_1 .k-taskboard-columns-container {
    padding: 0 !important; /* Kendo'nun varsayılan boşluğunu siler */
    margin: 0 !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; 
}

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

/* 2. Kanban Nesnesini 40px yukarı taşı */
li[data-id="Form_2_Kanban_1"] {
    /* Transform en güvenli yöntemdir, diğer öğeleri bozmadan kaydırır */
    transform: translateY(-40px) !important; 
    
    /* Alternatif olarak top değerini ezmek isterseniz bunu açabilirsiniz: */
    /* top: -35px !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 Alanı */
.k-grid-header {
    padding-right: 0 !important; 
    border-radius: 8px 8px 0 0 !important;
}

/* Başlık Hücreleri (Header Cells) */
.k-grid-header .k-header {
    background-color: #fff !important;
    background-image: none !important;
    color: #676879 !important; 
    font-weight: 600 !important;
    padding: 4px 4px !important;
    border-bottom: 2px solid #d0d4e4 !important;
    vertical-align: middle !important;
    text-transform: capitalize !important;
}

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

/* Satır 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; 
    padding: 2px !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
    font-weight: 400 !important; 
    padding-left: 20px !important;
}

/* Seçili Satır Ayarları */
.k-grid tr.k-state-selected,
.k-grid td.k-state-selected {
    background-color: #e5f4ff !important; 
}

/* Alt Sayfalama (Pager) Alanı */
.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 Numaraları */
.k-pager-numbers .k-link.k-state-selected {
    background-color: #0073ea !important;
    color: #fff !important;
    border-radius: 50% !important;
}




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

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

/* Eğer iframe içinden gelen bir gövde rengi varsa */
body {
    background-color: #ffffff !important;
}
/* === GEREKSİZ ÖĞELERİ GİZLEME === */
#act-environment {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}


/* === ACCOUNT HEADER TASARIMI (BEYAZ + GÖLGE) === */
.page-account header {
    background-color: #ffffff !important;       /* Tam Beyaz Arka Plan */
    background: #ffffff !important;             /* Garanti olsun diye tekrar */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; /* Yumuşak, modern gölge */
    border-bottom: 1px solid #e5e7eb !important; /* Altına çok ince gri bir çizgi (ayırıcı) */
    z-index: 10 !important;                     /* Diğer öğelerin üzerinde dursun */
}

/* === FOOTER TASARIMI (BEYAZ + ÜST GÖLGE) === */
html body footer, 
#footer {
    background-color: #ffffff !important;       /* Arka plan Beyaz */
    color: #000000 !important;                  /* Yazı Rengi Siyah */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05) !important; /* Üst Tarafa Hafif Gölge */
    border-top: 1px solid #e5e7eb !important;   /* Üstüne ince gri çizgi (ayırıcı) */

}

/* Footer içindeki linkler varsa onlar da siyah olsun */
html body footer a, 
#footer a {
    color: #000000 !important;
}

/* === LOGO KONUMLANDIRMA (AŞAĞI İNDİRME) === */
.page-account header .logo {
    margin-top: 20px !important;       /* Üstten boşluk bırakarak aşağı iter */
    display: inline-block !important;  /* Hizalamayı düzeltir */
    vertical-align: middle !important; /* Dikeyde ortalamaya yardımcı olur */
    max-height: 60px !important;
    /* Alternatif yöntem (Eğer margin çalışmazsa bunu aç): */
    /* transform: translateY(10px) !important; */ 
}


/* === MODERN BUTON TASARIMI === */
.page-account .btn {
    /* 1. Arka Plan: Modern Mavi Gradyan */
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    background-color: #2563eb !important; /* Yedek renk */
    
    /* 2. Yazı ve Kenarlık */
    color: #ffffff !important;
    border: none !important;
    
    /* 3. Şekil ve Boyut */
    border-radius: 12px !important;       /* Yumuşak köşeler */
    padding: 14px 32px !important;        /* Daha geniş, ferah iç boşluk */
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;     /* Harf aralığını biraz açarak okunurluğu artır */
    
    /* 4. Efektler */
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important; /* Arkaya mavi yumuşak gölge */
    transition: all 0.3s ease !important; /* Animasyonlu geçiş */
    cursor: pointer !important;
    text-transform: uppercase !important; /* Yazıyı büyük harf yaparak otorite kat */
}

/* === MODERN PASTEL BUTON VE FONT GÜNCELLEMESİ === */

/* Google Font (Eğer projende yoksa Inter fontunu çağırıyoruz) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');

.page-account .btn {
    /* 1. RENK: Koyu lacivertten 'Pastel Gök Mavisi'ne geçiş */
    /* Daha yumuşak, göz yormayan, modern bir mavi */
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important; 
    
    /* 2. FONT: Çirkin font yerine 'Inter' veya modern sistem fontları */
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;       /* Çok kalın değil, okunaklı */
    letter-spacing: 1px !important;    /* Harf aralarını açarak ferahlık kat */
    text-transform: uppercase !important; /* Modern görünüm için büyük harf */
    
    /* 3. ŞEKİL: Inputlarla uyumlu 'Hap' şekli */
    border-radius: 50px !important;
    border: none !important;
    
    /* 4. BOYUT VE EFEKTLER */
    padding: 12px 40px !important;     /* Geniş ve basması kolay */
    color: #ffffff !important;
    cursor: pointer !important;
    
    /* Pastel gölge (Siyah değil, kendi renginin şeffaf hali) */
    box-shadow: 0 5px 15px rgba(96, 165, 250, 0.4) !important; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* HOVER (Üzerine Gelince) */
.page-account .btn:hover {
    transform: translateY(-2px) !important; /* Hafifçe havalansın */
    /* Renk biraz daha canlılaşsın */
    background: linear-gradient(135deg, #70bdfc 0%, #4f93f6 100%) !important; 
    /* Gölge büyüsün */
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.6) !important; 
}

/* ACTIVE (Tıklayınca) */
.page-account .btn:active {
    transform: translateY(1px) !important; /* Basma hissi */
    box-shadow: 0 2px 5px rgba(96, 165, 250, 0.4) !important;
}

/* === MODERN HATA MESAJI (Soft Red Alert) === */
#PageErrorMessage {
    /* 1. Görünüm: Pastel Kırmızı Uyarı Kutusu */
    display: block !important;
    background-color: #fef2f2 !important; /* Çok açık pastel kırmızı zemin */
    color: #b91c1c !important;            /* Koyu kırmızı, okunaklı yazı */
    border: 1px solid #fecaca !important; /* İnce kırmızı çerçeve */
    
    /* 2. Şekil ve Boşluklar */
    border-radius: 12px !important;       /* Köşeleri yumuşat */
    padding: 12px 20px !important;        /* İçeriden nefes aldır */
    margin: 10px 0 20px 0 !important;     /* Üstten ve alttan güvenli boşluk bırak */
    width: 100% !important;               /* Genişliği doldur */
    box-sizing: border-box !important;
    
    /* 3. Yazı Stili */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    
    /* 4. Efektler */
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.1) !important; /* Hafif kırmızı gölge */
    
    /* Hata geldiğinde dikkat çeksin diye Sallanma Animasyonu */
    animation: errorShake 0.4s ease-in-out;
}

/* Eğer mesaj boşsa gizle (Boşluk yaratmasın) */
#PageErrorMessage:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Önüne Uyarı İkonu Ekleme */
#PageErrorMessage::before {
    content: "⚠️ " !important;
    font-size: 16px !important;
    margin-right: 5px !important;
}

/* === SALLANMA ANİMASYONU (SHAKE) === */
@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

/* === KULLANICI DEĞİŞTİR YAZISI (MODERN GHOST STİL) === */
#act-swtich-user {
    display: block !important;            /* Blok yapıp hizalayalım */
    width: fit-content !important;        /* İçeriği kadar yer kaplasın */
    margin: 20px auto 0 auto !important;  /* Ortala ve üstten boşluk ver */
    padding: 10px 25px !important;        /* Rahat bir tıklama alanı */

    font-family: 'Segoe UI', Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;            /* Modern Gri Tonu (Slate) */
    text-decoration: none !important;     /* Alt çizgiyi kaldır */
    
    background-color: transparent !important;
    border: 1px solid transparent !important; /* Şimdilik kenarlık gizli */
    border-radius: 50px !important;       /* Tam yuvarlak (Hap) kenarlar */
    
    transition: all 0.3s ease !important; /* Yumuşak geçiş */
    cursor: pointer !important;
}

/* HOVER (Üzerine Gelince) */
#act-swtich-user:hover {
    background-color: #eff6ff !important; /* Çok açık mavi zemin */
    color: #2563eb !important;            /* Yazı Mavi olsun */
    border-color: #dbeafe !important;     /* Çok hafif mavi kenarlık çıksın */
    transform: translateY(-2px) !important; /* Hafifçe yukarı kalksın */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important; /* Hafif gölge */
}

/* Önüne küçük bir ikon ekleyelim (Opsiyonel Estetik) */
#act-swtich-user::before {
    content: "↻ " !important; /* Yenileme/Değiştirme sembolü */
    font-size: 16px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
}

#act-swtich-user:hover::before {
    transform: rotate(180deg) !important; /* Üzerine gelince ikon dönsün */
}


/* === LOGIN INPUTLARI KÜÇÜLTME VE DÜZELTME === */
body.page-account #login-form input.form-control, 
body.page-account #login-form input {
    /* 1. Boyutlandırma */
    height: 42px !important;          /* Yüksekliği sabitle (Aşırı büyümeyi engeller) */
    min-height: 42px !important;      /* Garanti olsun */
    max-height: 42px !important;
    
    /* 2. Yazı ve İç Boşluk */
    font-size: 14px !important;       /* Yazı boyutunu idealleştir */
    padding: 0 20px !important;       /* Soldan sağdan boşluk bırak */
    
    /* 3. Görünüm (Butonlarla Uyumlu) */
    border-radius: 50px !important;   /* Tam yuvarlak (Hap) köşeler */
    background-color: #f3f4f6 !important; /* Hafif gri modern zemin */
    border: 1px solid #e5e7eb !important; /* İnce gri çizgi */
    color: #1f2937 !important;            /* Koyu gri yazı rengi */
    
    /* 4. Yerleşim */
    margin-bottom: 15px !important;   /* Altındaki elemanla arayı aç */
    width: 100% !important;           /* Genişliği tam kapla */
    box-shadow: none !important;      /* Kaba gölgeleri kaldır */
}

/* FOCUS (Tıklayınca) Efekti */
body.page-account #login-form input:focus {
    background-color: #ffffff !important; /* Tıklayınca zemin beyazlaşsın */
    border-color: #2563eb !important;     /* Kenarlık Mavi olsun */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important; /* Etrafına hafif mavi ışık */
    outline: none !important;
}

/* Placeholder (İpucu Yazısı) Rengi */
body.page-account #login-form input::placeholder {
    color: #9ca3af !important;
    font-size: 13px !important;
}

/* ========================================================= */
/* Login card (form container)                                */
/* ========================================================= */
body.page-account #login-form {
    width: 100% !important;
    max-width: 520px !important;
    padding: 26px 26px 22px !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;

    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Keep the primary button inside the card aligned */
body.page-account #login-form .btn,
body.page-account #login-form button.btn,
body.page-account #login-form input[type="submit"].btn,
body.page-account #login-form button,
body.page-account #login-form input[type="submit"],
body.page-account #login-form input[type="button"] {
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    position: relative !important;
}

/* Login primary button: align with register-button.js style */
body.page-account #login-form .btn,
body.page-account #login-form button.btn,
body.page-account #login-form input[type="submit"].btn,
body.page-account #login-form button,
body.page-account #login-form input[type="submit"],
body.page-account #login-form input[type="button"] {
    border-radius: 999px !important;
    padding: 12px 16px !important;
    min-height: 46px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    background: rgba(18,115,235,.08) !important;
    color: #1273eb !important;
    border: 1px solid rgba(18,115,235,.35) !important;
    box-shadow: none !important;
    transition: filter .15s ease, transform .05s ease, background .15s ease !important;
}

body.page-account #login-form .btn:hover,
body.page-account #login-form button.btn:hover,
body.page-account #login-form input[type="submit"].btn:hover,
body.page-account #login-form button:hover,
body.page-account #login-form input[type="submit"]:hover,
body.page-account #login-form input[type="button"]:hover {
    filter: brightness(.98) !important;
    background: rgba(18,115,235,.12) !important;
}

body.page-account #login-form .btn:active,
body.page-account #login-form button.btn:active,
body.page-account #login-form input[type="submit"].btn:active,
body.page-account #login-form button:active,
body.page-account #login-form input[type="submit"]:active,
body.page-account #login-form input[type="button"]:active {
    transform: translateY(1px) !important;
    box-shadow: 0 6px 16px rgba(18,115,235,.22) !important;
}

/* Force "Giriş" to match "Yeni Kayıt" exactly */
body.page-account #login-form #BtnLogin {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    border-radius: 999px !important;
    padding: 12px 16px !important;
    min-height: 46px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    text-decoration: none !important;
    border: 1px solid rgba(18,115,235,.35) !important;
    color: #1273eb !important;
    background: rgba(18,115,235,.08) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
}

body.page-account #login-form #BtnLogin:hover {
    filter: brightness(.98) !important;
    background: rgba(18,115,235,.12) !important;
}

body.page-account #login-form #BtnLogin:active {
    transform: translateY(1px) !important;
}

/* Absolute fallback: make #BtnLogin and injected register button identical everywhere */
#BtnLogin,
#ckmsbt-register-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    min-height: 42px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    text-decoration: none !important;
    border: 1px solid rgba(18,115,235,.35) !important;
    color: #1273eb !important;
    background: rgba(18,115,235,.08) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
}

#BtnLogin.pull-right,
#BtnLogin.btn.pull-right {
    float: none !important;
}

#BtnLogin:hover,
#ckmsbt-register-btn:hover {
    filter: brightness(.98) !important;
    background: rgba(18,115,235,.12) !important;
}

#BtnLogin:active,
#ckmsbt-register-btn:active {
    transform: translateY(1px) !important;
}

/* Hide browser-native password reveal icon (prevents double eye icon) */
body.page-account #login-form input[type="password"]::-ms-reveal,
body.page-account #login-form input[type="password"]::-ms-clear {
    display: none !important;
}

@media (max-width: 768px) {
    body.page-account #login-form {
        max-width: 100% !important;
        padding: 18px 16px !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10) !important;
    }
}

/* ========================================================= */
/* Layout + left logo column (merged from nct_login_page.css) */
/* ========================================================= */

/* Login page main layout */
body.page-account .page-body.row.loginbody {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

/* Left column - logo */
body.page-account div.page-body.row.loginbody > div.col-lg-7.col-left.d-lg-block.d-md-none > img,
body.page-account .col-left.d-lg-block.d-md-none > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 100px auto 0 auto;
    padding: 0;
    object-fit: contain;
}

/* Right column - form wrapper */
body.page-account .col-lg-5.col-md-12.col-right {
    width: 100%;
    max-width: 100%;
    padding: 80px 15px 30px 29px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    body.page-account .col-lg-5.col-md-12.col-right {
        padding: 10px 0 !important;
        display: block;
    }
}
a.navbar-brand.brand-logo {
  display: inline-block;
  width: 200px; /* ya da ihtiyaç duyulan genişlik */
  height: 50px; /* yükseklik buradan geliyor */
  overflow: hidden; /* taşmayı engeller */
}


a.navbar-brand.brand-logo img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}


body > footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #b91c1c; /* kırmızı tonunda */
  color: white;
  text-align: center;
  padding: 0px;
  z-index: 999;
  color :white !important;
  margin: 0px 0px 0px 0px !important;
}


body > footer > p {
  
  margin: 0px 0px 0px 0px !important;
}



body > header {
  height: 50px; /* veya 50px */
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #b91c1c; /* kırmızı tonunu koruyalım */
  color: white;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* küçük gölge */
  z-index: 1000;
}



body > header > img {
 
  padding: 0 20px 20px 20px;

}


@media screen and (max-width: 991px) {
  .sidebar-offcanvas {
  
    top: 0 !important;
   
  }
}


.nav.nav-tabs.bordered {
    display: flex;
    gap: 5px;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef; 
    padding: 0;
    margin: 0;
    position: relative;
}

.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: #2563eb;
    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: #2563eb !important; 
    color: #ffffff !important;           
    border-bottom-color: #2563eb !important; 
    
    font-weight: 700;
    font-size: 14px;
    z-index: 10;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 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 #2563eb;
    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 */
}
@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;
}

/* Alt Menü İkonları: Daha Küçük */
html body #sidebar .sub-menu .nav-item .nav-link i,
html body #sidebar .sub-menu .nav-item .menu-icon {
    font-size: 16px !important;
    width: 20px !important;
    margin-right: 10px !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 ve Kompakt Görünüm */
html body #sidebar .sub-menu .nav-item .nav-link { 
    padding-left: 35px !important; 
    padding-top: 3px !important; 
    padding-bottom: 3px !important; 
    font-size: 11.5px !important; 
}
html body #sidebar .sub-menu .sub-menu .nav-item .nav-link { 
    padding-left: 45px !important; 
    padding-top: 2px !important; 
    padding-bottom: 2px !important; 
    font-size: 11px !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: 55px !important;
    bottom: 0 !important;
    height: calc(100vh - 55px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
    padding-bottom: 20px !important;
    transition: transform 0.3s ease-in-out !important;
}

/* Make menu list the scrollable area (keeps bottom actions fixed) */
html body #sidebar > ul.nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-bottom: 0 !important;
    padding-bottom: 64px !important; /* room for logout button */
}

/* Desktop collapse (used by #toggle-side-menu chevron) */
html body.nct-sidebar-collapsed nav#sidebar,
html body.nct-sidebar-collapsed .sidebar,
html body.nct-sidebar-collapsed .sidebar-offcanvas {
    transform: translateX(-100%) !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: 2px 0 !important;
}

/* Remove default UL spacing to avoid extra gaps */
html body #sidebar ul.nav.flex-column.sub-menu {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body #sidebar .sub-menu .nav-item .nav-link {
    padding-left: 32px !important;
}
html body #sidebar .sub-menu .sub-menu .nav-item .nav-link {
    padding-left: 44px !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; }

/* LeftMenu popover: always render above sidebar/collapse layers */
#menupopover {
    position: fixed !important;
    z-index: 5000 !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: 8px 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: 32px !important;
    border-left: 4px solid transparent !important;
}

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

/* --- İKON BOYUTLANDIRMA VE RENK (ALT MENÜ DÜZELTMESİ) --- */
html body #sidebar .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;
}

/* Sub-menu Icon: Smaller */
html body #sidebar .sub-menu .nav-item .nav-link i {
    font-size: 16px !important;
    width: 20px !important;
    min-width: 20px !important;
    margin-right: 10px !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: 32px !important; 
    font-size: 11.5px !important; 
    padding-top: 3px !important; 
    padding-bottom: 3px !important; 
    min-height: 28px !important; 
}
html body #sidebar .sub-menu .sub-menu .nav-item .nav-link { 
    padding-left: 42px !important; 
    font-size: 11px !important; 
    padding-top: 2px !important; 
    padding-bottom: 2px !important; 
    min-height: 26px !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: block !important; line-height: 1.3 !important; vertical-align: middle !important; max-width: none !important; flex: 1 1 auto !important; min-width: 0 !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;
}
/* Sadece ziyaret uyarı modalı — diğer Form_10 / k-window etkilenmez */
.k-window.ziyaret-uyari-modal {
    border-radius: 28px !important;
    background-color: #ffffff !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
    border: 3px solid transparent !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.k-window.ziyaret-uyari-modal.danger-border {
    border-color: #ef4444 !important;
}

.k-window.ziyaret-uyari-modal.success-border {
    border-color: #22c55e !important;
}

.k-window.ziyaret-uyari-modal .k-window-titlebar,
.k-window.ziyaret-uyari-modal .k-window-titlebar-actions {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.k-window.ziyaret-uyari-modal .k-window-content {
    display: block !important;
    background: #ffffff !important;
    padding: 0 !important;
}

.k-window.ziyaret-uyari-modal .k-window-content iframe.k-content-frame {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    display: block !important;
}

.k-window.ziyaret-uyari-modal iframe.k-content-frame.ziyaret-modal-iframe-strip {
    min-height: 72px !important;
}

.k-window.ziyaret-uyari-modal .modern-modal-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 30px 25px;
    text-align: center;
    background: #ffffff !important;
    height: 100%;
    box-sizing: border-box;
}

.k-window.ziyaret-uyari-modal .btn-group-fixed {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    background: #ffffff !important;
}

.k-window.ziyaret-uyari-modal .status-btn {
    flex: 1;
    padding: 12px 5px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-size: 14px;
    transition: transform 0.1s;
}

.k-window.ziyaret-uyari-modal .status-btn:active {
    transform: scale(0.96);
}

.k-window.ziyaret-uyari-modal .danger .btn-main {
    background: #ef4444;
    color: white;
}

.k-window.ziyaret-uyari-modal .success .btn-main {
    background: #22c55e;
    color: white;
}

.k-window.ziyaret-uyari-modal .btn-close-gray {
    background: #f3f4f6;
    color: #4b5563;
    border: 1.5px solid #e5e7eb;
}

/* Xpoda Proje Başlığı - Doğrudan Sınıflar (CSS Sınıfları) */
/* Bu CSS kodlarını Xpoda'nın "Custom CSS" veya sayfa CSS alanına yapıştırın. */

/* 1. Proje Kodu (Örn: PRJ2026...) */
.ph-code {
  color: #2563eb !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  display: inline-block;
}

/* 2. Proje Adı (Örn: Test 1) */
.ph-title {
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  display: inline-block;
}

/* 3. Durum Rozeti (Örn: Status) */
.ph-status {
  background-color: #dcfce7 !important;
  color: #166534 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-block;
  line-height: 1.5 !important;
  text-align: center;
}

/* 4. Alt Bilgiler (Tarih, Departman vs.) */
.ph-meta-text {
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: inline-block;
}

/* 5. Araya Ayırıcı Nokta (İsteğe bağlı, içi • dolu bir Label'a verebilirsiniz) */
.ph-dot {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  margin: 0 4px !important;
  display: inline-block;
}

/* OPSİYONEL: Bu alanların yan yana kusursuz durması için Xpoda satırını (row) flex yapma */
/* Eğer etiketleri aynı satıra koyduysanız, o satırın "CSS Class" özelliğine ph-flex-row yazabilirsiniz */
.ph-flex-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !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, .k-maskedtextbox) {
  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:is(.k-textbox, .k-maskedtextbox) {
  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, .k-maskedtextbox):hover {
  border-color: var(--tb-slate-400) !important;
}

span.k-input:is(.k-textbox, .k-textarea, .k-maskedtextbox):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-maskedtextbox) .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-maskedtextbox) .k-input-inner::placeholder {
  color: var(--tb-slate-400) !important;
}

/* ---------- Devre Dışı Durumu ---------- */
span.k-input:is(.k-textbox, .k-textarea, .k-maskedtextbox).k-disabled,
span.k-input:is(.k-textbox, .k-textarea, .k-maskedtextbox)[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-maskedtextbox).k-disabled .k-input-inner {
  cursor: not-allowed !important;
}