/*
 * İnsya UI — ortak belirteçler ve yüzeyler (önek: iu-).
 * Renkler masaüstü penceresi temasından (--ee-*, erp-embed.css) gelir; normal sekmede yedek değerler kullanılır.
 * Belirteçler body üzerinde tanımlanır: erp-embed.css koyu modu body.darkmode üzerinde --ee-* değiştirir.
 */
body {
  --iu-bg: var(--ee-bg, #f1f0e4);
  --iu-surface: var(--ee-surface, #fbfaf4);
  --iu-surface-2: var(--ee-surface-2, #f4f3ea);
  --iu-bar: var(--ee-bar, #e6e8d8);
  --iu-hover: var(--ee-hover, #e5ecda);
  --iu-select: var(--ee-select, #d6e2c8);
  --iu-ink: var(--ee-ink, #23392d);
  --iu-ink-soft: var(--ee-ink-soft, #40573e);
  --iu-muted: var(--ee-muted, #6f846b);
  --iu-accent: var(--ee-accent, #2b5038);
  --iu-accent-strong: var(--ee-accent-strong, #1e3a28);
  --iu-accent-ink: var(--ee-accent-ink, #f1f6e6);
  --iu-line: var(--ee-line, rgba(83, 105, 83, 0.2));
  --iu-line-strong: var(--ee-line-strong, rgba(83, 105, 83, 0.35));
  --iu-ring: var(--ee-ring, rgba(43, 80, 56, 0.14));
  --iu-shadow: var(--ee-shadow, rgba(37, 67, 50, 0.2));
  --iu-sans: var(--ee-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif);
  --iu-mono: var(--ee-mono, "SFMono-Regular", Menlo, Consolas, monospace);
  --iu-danger: #b4442f;
  --iu-danger-soft: #f5dcd4;
  --iu-warn: #b7791f;
  --iu-warn-soft: #f6e7c8;
  --iu-ok: #3f7d4f;
  --iu-ok-soft: #dcebd9;
  --iu-info: #2f6b9a;
  --iu-info-soft: #d9e8f3;
  /* Fosforlu kalem (iu-mark, iu-focus-flash): sarımtırak vurgu; diğer kalem renkleri iu-mark--* ile */
  --iu-mark: rgba(255, 221, 87, 0.55);
  --iu-mark-green: rgba(150, 222, 140, 0.55);
  --iu-mark-pink: rgba(255, 170, 190, 0.55);
  --iu-mark-blue: rgba(140, 200, 255, 0.5);
  /* Tablo renk çeşitleri (iu-table--tone-N, İnsya Table variant): masaüstü simge paletinin (erp-desk.css ed-c-*) pastel
     ailesinden: 1 gök, 2 adaçayı, 3 güneş, 4 gül, 5 taş, 6 lavanta. Doygun tonlar pastel temalarla çatıştığı için yumuşak
     tutulur; yalnızca ayırt etmek içindir (başlık bandı, kenarlık), metin rengi --iu-ink kalır.
     Bant / kenarlık yoğunluğu --iu-tone-band / --iu-tone-edge ile verilir; karanlık modda düşer. */
  --iu-tone-1: #8fa9dc;
  --iu-tone-2: #93b98f;
  --iu-tone-3: #e0c46f;
  --iu-tone-4: #d99aa9;
  --iu-tone-5: #b9b4a6;
  --iu-tone-6: #b3a1df;
  --iu-tone-band: 38%;
  --iu-tone-edge: 65%;
  /* Kategori renkleri (iu-info-card--<ad>): bölüm / modül kartlarını birbirinden ayırmak için doygun ama tema ile uyumlu
     tonlar. Durum anlamı taşımaz (ok / warn / danger durum içindir); yalnızca "hangi bölüm" sorusunu renkle yanıtlar. */
  --iu-c-green: #3f8f5a;
  --iu-c-blue: #2f74c0;
  --iu-c-indigo: #5561c9;
  --iu-c-violet: #8a55c4;
  --iu-c-rose: #c94a6b;
  --iu-c-orange: #d9692b;
  --iu-c-amber: #c98a12;
  --iu-c-teal: #1f8f8a;
  --iu-c-cyan: #1d8fb3;
  --iu-radius: 8px;
  --iu-radius-sm: 6px;
  --iu-font: 13px;
  --iu-row: 30px;
  /* Açılır pencere: claude.ai/code menülerindeki gibi ince çerçeve, yumuşak gölge, hızlı açılış */
  --iu-pop-shadow: 0 8px 24px color-mix(in srgb, var(--iu-shadow) 45%, transparent), 0 1px 3px rgba(0, 0, 0, 0.06);
  --iu-pop-radius: 10px;
  --iu-pop-speed: 0.09s;
  /* Yükleniyor iskeleti: çubuk yazı renginden türer, yansıma beyaz ışık (açık zeminde belirgin) */
  --iu-skel-base: color-mix(in srgb, var(--iu-ink) 11%, transparent);
  --iu-skel-glow: rgba(255, 255, 255, 0.85);
  /* Hayalet düğme ölçüleri (claude.ai/code panelindeki düğmeler örnek alındı) */
  --iu-ghost-radius: 8px;
  /* Hayalet hover / basılı zemini temadan türer: pencere paletinin hover rengi (--iu-hover, geri ok düğmesiyle aynı)
     üzerine vurgu renginden bu oranda katılır; açık, koyu tema ve paletler kendiliğinden uyar. Kullanıcı ayarı
     (2026-10-05): yazı renginden türeyen gri ton yeşil temada kötü durdu; ok düğmesindeki gibi, biraz daha belirgin.
     Açılır pencere içi (menü satırı, panel düğmeleri) yüzeyde durduğu için daha az vurgu alır (--iu-pop-hover). */
  --iu-ghost-hover: 8%;
  --iu-ghost-press: 16%;
  --iu-pop-hover: 3%;
  --iu-ghost-speed: 0.15s;
  --iu-ghost-ease: cubic-bezier(0.165, 0.85, 0.45, 1);
}

/* Masaüstü dışındaki koyu mod: --ee-* tanımlı değil, yedekler koyu */
html:not(.ed-embed) body.darkmode {
  --iu-bg: #1a231d;
  --iu-surface: #1f2a23;
  --iu-surface-2: #222e26;
  --iu-bar: #26332b;
  --iu-hover: #2e3f33;
  --iu-select: #35503d;
  --iu-ink: #e3eadc;
  --iu-ink-soft: #c3cfbd;
  --iu-muted: #8ea487;
  --iu-accent: #8fbf8a;
  --iu-accent-strong: #a9d4a3;
  --iu-accent-ink: #16201a;
  --iu-line: rgba(160, 190, 150, 0.16);
  --iu-line-strong: rgba(160, 190, 150, 0.3);
  --iu-shadow: rgba(0, 0, 0, 0.45);
}

body.darkmode {
  --iu-danger: #ec8f7a;
  --iu-danger-soft: #3b1f19;
  --iu-warn: #e2b25a;
  --iu-warn-soft: #3a2e17;
  --iu-ok: #8fcaa2;
  --iu-ok-soft: #23352a;
  --iu-info: #8cbde3;
  --iu-info-soft: #1c2c38;
  --iu-mark: rgba(250, 204, 21, 0.26);
  --iu-mark-green: rgba(120, 200, 110, 0.26);
  --iu-mark-pink: rgba(240, 120, 150, 0.26);
  --iu-mark-blue: rgba(100, 170, 240, 0.26);
  /* Aynı pastel tonlar koyu zemine düşük oranda karışır: bant hafif renkli kalır, parlamaz */
  --iu-tone-band: 16%;
  --iu-tone-edge: 38%;
  /* Koyu zeminde yansıma kısık: göz almasın, yalnızca çubuğun üstünden geçtiği seçilsin */
  --iu-skel-base: color-mix(in srgb, var(--iu-ink) 10%, transparent);
  --iu-skel-glow: rgba(255, 255, 255, 0.1);
  /* Kategori renkleri koyu zeminde açık tonlarla okunur kalır */
  --iu-c-green: #7fcf98;
  --iu-c-blue: #7fb2ea;
  --iu-c-indigo: #9ca5f0;
  --iu-c-violet: #c19bee;
  --iu-c-rose: #ef93ab;
  --iu-c-orange: #f0a070;
  --iu-c-amber: #e8c060;
  --iu-c-teal: #6fd0c8;
  --iu-c-cyan: #78cbe6;
}

/* hidden özniteliği bileşenlerin display kurallarını yenmeli (tarayıcının [hidden] kuralı zayıf kalıyor) */
[class^="iu-"][hidden],
[class*=" iu-"][hidden] {
  display: none !important;
}

/* ---------- Açılır yüzey (menü, seçim listesi, tarih, ipucu kartı) ---------- */
.iu-pop {
  z-index: 2147483000;
  box-sizing: border-box;
  min-width: 180px;
  max-width: min(420px, calc(100vw - 8px));
  overflow: auto;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--iu-ink) 10%, transparent);
  border-radius: var(--iu-pop-radius);
  background: var(--iu-surface);
  box-shadow: var(--iu-pop-shadow);
  color: var(--iu-ink);
  font: 400 var(--iu-font) / 1.4 var(--iu-sans);
  transform-origin: top center;
  animation: iu-pop-in var(--iu-pop-speed) var(--iu-ghost-ease);
}

/* Açılma hareketi çapadan doğar (place() data-side yazar) */
.iu-pop[data-side="top"] {
  transform-origin: bottom center;
}

.iu-pop[data-side="right"] {
  transform-origin: left top;
}

.iu-pop[data-side="left"] {
  transform-origin: right top;
}

.iu-pop[hidden] {
  display: none;
}

/* Kısa ve yalnızca opaklık + ölçek: kompozitörde çalışır, yerleşim hesabı tetiklemez */
@keyframes iu-pop-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* ---------- Düğme (yeni bileşenlerin kendi düğmesi; .btn'e bağlı değil) ---------- */
.iu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--iu-line-strong);
  border-radius: var(--iu-radius-sm);
  background: var(--iu-surface);
  color: var(--iu-ink);
  font: 500 var(--iu-font) / 1 var(--iu-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

a.iu-btn:hover,
a.iu-btn:focus {
  color: var(--iu-ink);
  text-decoration: none;
}

.iu-btn:hover {
  background: var(--iu-hover);
}

.iu-btn:focus-visible,
.iu-focusable:focus-visible {
  outline: 2px solid var(--iu-accent);
  outline-offset: 1px;
}

/* Fareyle açılan menü kapanınca odak düğmeye betikle döner; tarayıcı bunu klavye odağı sayıp çerçeve çizerdi
   (insya-menu.js returnFocus). Klavyeyle gelen odakta öznitelik yoktur, çerçeve kalır. */
[data-iu-quiet-focus]:focus-visible {
  outline: none;
}

.iu-btn:disabled,
.iu-btn[aria-disabled="true"],
.iu-btn.disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none; /* <a class="iu-btn disabled"> bağlantısı tıklanmaz */
}

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

.iu-btn--primary:hover {
  background: var(--iu-accent-strong);
}

/* a.iu-btn:hover (0,2,1) rengi ink'e çevirip birincil düğmenin üzerine gelince metnini koyu/okunmaz bırakıyordu:
   bağlantı olarak çizilen birincil/tehlike düğmeleri kendi metin rengini hover ve odakta da korur */
a.iu-btn--primary,
a.iu-btn--primary:hover,
a.iu-btn--primary:focus {
  color: var(--iu-accent-ink);
}

a.iu-btn--danger,
a.iu-btn--danger:hover,
a.iu-btn--danger:focus {
  color: var(--iu-danger);
}

.iu-btn--danger {
  border-color: var(--iu-danger);
  color: var(--iu-danger);
}

/*
 * Hayalet (ghost) düğme: çerçevesiz, zeminsiz ikincil eylem.
 * Standart: yan yana çok düğmenin durduğu eylem satırlarında birincil olmayan her düğme hayalettir; böylece
 * satırda yalnızca birincil eylem (dolu düğme) göze çarpar, gerisi kalabalık çerçeve yığını oluşturmaz.
 * Bu satırlarda sınıf yazmaya gerek yok: komut çubuğu (.iu-toolbar-end), çekmece başlığı (.idr-header-actions),
 * kart eylemleri (.iu-card-actions) ve elle işaretlenen .iu-actions--dense kapları doğrudan çocuk düğmeleri
 * hayalet çizer; komut çubuğunda .iu-menu-host içine sarılı dişli (menü) düğmesi de. Sil / Dışa aktar /
 * Yazdır gibi ikincil eylemler satırda düğme olmaz, dişli menüsüne (iu_more_button + İnsya Menu) girer.
 * Çerçeveli kalması gereken düğme .iu-btn--solid alır; birleşik gruplar (.iu-btn-group,
 * .iu-split) doğrudan çocuk olmadığı için etkilenmez. Seçiciler :where() ile sarılı: özgüllük .iu-btn--ghost
 * ile aynı kalır, sayfaların kendi kuralları ezebilir.
 *
 * Ölçü ve davranış claude.ai/code panelindeki hayalet düğmeleri örnek alır (kullanıcı tercihi, 2026-10-05):
 * 8px köşe, yatay 10px iç boşluk; üzerine gelince çerçevesiz, yazı renginden türeyen çok açık nötr bir zemin
 * (vurgu rengi değil, böylece satır sakin kalır), yazı ve ikon koyulaşır; basılıyken zemin bir ton koyulaşır ve
 * düğme hafifçe içe göçer (basma hissi). Saydam çerçeve baştan yer kapladığı için satırda kayma olmaz.
 * Klavye odağı .iu-btn:focus-visible çizgisiyle.
 */
.iu-btn--ghost,
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn:where(:not(.iu-btn--primary, .iu-btn--solid)) {
  border-color: transparent;
  border-radius: var(--iu-ghost-radius);
  padding: 0 10px;
  background: transparent;
  color: var(--iu-ink-soft);
  transition: background var(--iu-ghost-speed) var(--iu-ghost-ease), color var(--iu-ghost-speed) var(--iu-ghost-ease),
    transform var(--iu-ghost-speed) var(--iu-ghost-ease);
}

/* Yalnızca ikonlu hayalet düğme kare kalır */
.iu-btn--ghost.iu-btn--icon,
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn--icon:where(:not(.iu-btn--primary, .iu-btn--solid)) {
  padding: 0;
}

.iu-btn--ghost > .iu-i,
.iu-btn--ghost > .fa,
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn:where(:not(.iu-btn--primary, .iu-btn--solid)) > :where(.iu-i, .fa) {
  color: var(--iu-ink-soft);
  transition: color var(--iu-ghost-speed) var(--iu-ghost-ease);
}

.iu-btn--ghost:hover,
a.iu-btn--ghost:hover,
.iu-btn--ghost.is-open,
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn:where(:not(.iu-btn--primary, .iu-btn--solid)):is(:hover, .is-open) {
  border-color: transparent;
  background: color-mix(in srgb, var(--iu-hover), var(--iu-accent) var(--iu-ghost-hover));
  color: var(--iu-ink);
}

/* Geçerli sayfa (aria-current, ör. komut çubuğunda bulunulan bölüm): üzerine gelinmiş gibi aynı zemin, kalın yazı.
   Ayrı renk ya da çerçeve yok; seçili ve hover tek standart tonu paylaşır. */
.iu-btn--ghost[aria-current="page"],
:where(.iu-toolbar-end, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn[aria-current="page"]:where(:not(.iu-btn--primary, .iu-btn--solid)) {
  background: color-mix(in srgb, var(--iu-hover), var(--iu-accent) var(--iu-ghost-hover));
  color: var(--iu-ink);
  font-weight: 600;
}

.iu-btn--ghost:hover > :where(.iu-i, .fa),
.iu-btn--ghost.is-open > :where(.iu-i, .fa),
.iu-btn--ghost[aria-current="page"] > :where(.iu-i, .fa),
:where(.iu-toolbar-end, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn[aria-current="page"]:where(:not(.iu-btn--primary, .iu-btn--solid)) > :where(.iu-i, .fa),
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn:where(:not(.iu-btn--primary, .iu-btn--solid)):is(:hover, .is-open) > :where(.iu-i, .fa) {
  color: var(--iu-ink);
}

.iu-btn--ghost:active,
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn:where(:not(.iu-btn--primary, .iu-btn--solid)):active {
  background: color-mix(in srgb, var(--iu-hover), var(--iu-accent) var(--iu-ghost-press));
  transform: scale(0.98);
}

/* Açılır pencere içindeki hayalet düğmeler yüzeyde durur: daha açık zemin (--iu-pop-hover) */
.iu-pop .iu-btn--ghost:is(:hover, .is-open) {
  background: color-mix(in srgb, var(--iu-hover), var(--iu-accent) var(--iu-pop-hover));
}

.iu-pop .iu-btn--ghost:active {
  background: color-mix(in srgb, var(--iu-hover), var(--iu-accent) calc(var(--iu-pop-hover) + 5%));
}

.iu-btn--ghost.iu-btn--danger,
.iu-btn--ghost.iu-btn--danger > :where(.iu-i, .fa),
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn--danger:where(:not(.iu-btn--solid)),
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn--danger:where(:not(.iu-btn--solid)) > :where(.iu-i, .fa) {
  color: var(--iu-danger);
}

.iu-btn--ghost.iu-btn--danger:hover,
a.iu-btn--ghost.iu-btn--danger:hover,
:where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn--danger:where(:not(.iu-btn--solid)):hover {
  border-color: transparent;
  background: var(--iu-danger-soft, rgba(207, 10, 44, 0.08));
  color: var(--iu-danger);
}

.iu-btn--ghost:disabled,
.iu-btn--ghost[aria-disabled="true"],
.iu-btn--ghost.disabled {
  border-color: transparent;
  background: transparent;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .iu-btn--ghost,
  .iu-btn--ghost > :where(.iu-i, .fa),
  :where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn:where(:not(.iu-btn--primary, .iu-btn--solid)),
  :where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn:where(:not(.iu-btn--primary, .iu-btn--solid)) > :where(.iu-i, .fa) {
    transition: none;
  }

  .iu-btn--ghost:active,
  :where(.iu-toolbar-end, .iu-toolbar-end > .iu-menu-host, .idr-header-actions, .iu-card-actions, .iu-actions--dense) > .iu-btn:where(:not(.iu-btn--primary, .iu-btn--solid)):active {
    transform: none;
  }
}

.iu-btn--icon {
  width: 28px;
  padding: 0;
  justify-content: center;
}

/* Daha küçük gövde (ör. logo yükleme satırı, dar yan panel eylemleri) */
.iu-btn--sm {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

/* Ton çeşitleri (başarı / bilgi / uyarı): iu-alert ve iu-badge ile aynı --iu-* belirteçleri; yumuşak zemin + ton metni,
   üzerine gelince zemin tonla karışır, metin her iki modda okunur kalır. Bağlantı olarak çizildiğinde (a.iu-btn:hover
   rengi ink'e çeviriyordu) metin rengi hover/odakta korunur. */
.iu-btn--ok { --iu-btn-tone: var(--iu-ok); --iu-btn-soft: var(--iu-ok-soft); }
.iu-btn--info { --iu-btn-tone: var(--iu-info); --iu-btn-soft: var(--iu-info-soft); }
.iu-btn--warn { --iu-btn-tone: var(--iu-warn); --iu-btn-soft: var(--iu-warn-soft); }

.iu-btn--ok,
.iu-btn--info,
.iu-btn--warn {
  border-color: var(--iu-btn-tone);
  background: var(--iu-btn-soft);
  color: var(--iu-btn-tone);
}

.iu-btn--ok:hover,
.iu-btn--info:hover,
.iu-btn--warn:hover {
  background: color-mix(in srgb, var(--iu-btn-tone) 12%, var(--iu-btn-soft));
}

a.iu-btn--ok,
a.iu-btn--ok:hover,
a.iu-btn--ok:focus,
a.iu-btn--info,
a.iu-btn--info:hover,
a.iu-btn--info:focus,
a.iu-btn--warn,
a.iu-btn--warn:hover,
a.iu-btn--warn:focus {
  color: var(--iu-btn-tone);
}

/* Bağlantı görünümlü düğme: çerçevesiz, vurgu rengi metin */
.iu-btn--link {
  border-color: transparent;
  background: transparent;
  color: var(--iu-accent);
}

.iu-btn--link:hover {
  background: transparent;
  text-decoration: underline;
}

a.iu-btn--link,
a.iu-btn--link:hover,
a.iu-btn--link:focus {
  color: var(--iu-accent);
}

/* Boyut ve genişlik */
.iu-btn--xs {
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

.iu-btn--lg {
  height: 36px;
  padding: 0 16px;
  font-size: 15px;
}

.iu-btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Alt alta tam genişlik düğmeler (çekmece / pencere seçenek listeleri) ve üstündeki bildirim kutusu birbirine yapışmaz */
.iu-btn--block + .iu-btn--block {
  margin-top: 8px;
}

.iu-note + .iu-btn--block {
  margin-top: 12px;
}

/* ---------- Yerel <select> oku ----------
   Tarayıcı oku yerine zarif ve modern SVG chevron kullanılır. Dikeyde tam ortalanır,
   rengi --iu-muted tonundadır (karanlık modda uyumlu açık ton). */
select.iu-input:not([multiple]):not([size]),
select.iu-pick-sort,
select.ol-currency,
.iu-field > select:not(.iu-select-native):not([multiple]):not([size]),
.iu-input-group > select:not(.iu-select-native):not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f846b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-size: 13px 13px;
  background-repeat: no-repeat;
}

body.darkmode select.iu-input:not([multiple]):not([size]),
body.darkmode select.iu-pick-sort,
body.darkmode select.ol-currency,
body.darkmode .iu-field > select:not(.iu-select-native):not([multiple]):not([size]),
body.darkmode .iu-input-group > select:not(.iu-select-native):not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ea487' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select.iu-input--sm,
select.form-control.input-sm {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 24px;
  background-position: right 6px center;
  background-size: 12px 12px;
}

select.iu-pick-sort {
  padding-left: 8px;
  padding-right: 20px;
  background-position: right 5px center;
  background-size: 11px 11px;
}

/* ---------- Rozet / durum etiketi ---------- */
.iu-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--iu-surface-2);
  color: var(--iu-ink-soft);
  font: 600 11px / 18px var(--iu-sans);
  white-space: nowrap;
}

.iu-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.iu-badge--plain::before {
  display: none;
}

.iu-badge--ok, .iu-badge--success { background: var(--iu-ok-soft); color: var(--iu-ok); }
.iu-badge--warn, .iu-badge--warning { background: var(--iu-warn-soft); color: var(--iu-warn); }
.iu-badge--danger { background: var(--iu-danger-soft); color: var(--iu-danger); }
.iu-badge--info { background: var(--iu-info-soft); color: var(--iu-info); }

/* ---------- Boş durum ---------- */
.iu-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 16px;
  color: var(--iu-muted);
  font: 400 var(--iu-font) / 1.5 var(--iu-sans);
  text-align: center;
}

.iu-empty > .fa {
  font-size: 22px;
  opacity: 0.7;
}

.iu-empty b {
  color: var(--iu-ink);
  font-weight: 600;
}

/* ---------- Yükleniyor iskeleti (yansımalı) ----------
   Nötr çubuk + üzerinden geçen eğik ışık bandı (cam yansıması). Bant uzunluk birimiyle (px) ilerler: yan yana duran
   çubuklar --iu-skel-x / --iu-skel-y ile konumlarını verirse (İnsya Grid, İnsya Table iskeleti) tek bir bant tüm tablo
   boyunca akar; konum verilmezse her çubuk kendi parıltısını gösterir. Renkler belirteçten: koyu modda ışık kısılır.
   Kullanım: <i class="iu-skeleton" style="width:60%"></i>; yuvarlak için .iu-skeleton.is-round (avatar).
   @property desteklemeyen tarayıcıda bant durur, çubuk görünür kalır. */
@property --iu-sweep {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.iu-skeleton {
  --iu-skel-band: 320px;
  --iu-skel-travel: 2200px;
  display: block;
  height: 12px;
  margin: 6px 0;
  border-radius: 6px;
  background-color: var(--iu-skel-base);
  background-image: linear-gradient(105deg, transparent 0%, var(--iu-skel-glow) 50%, transparent 100%);
  background-repeat: no-repeat;
  background-size: var(--iu-skel-band) 100%;
  /* Alt satırlardaki çubuklar bandı biraz geç alır: bant eğik görünür */
  background-position: calc(var(--iu-sweep) - var(--iu-skel-x, 0px) - var(--iu-skel-y, 0px) * 0.5) 0;
  animation: iu-sweep 2.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.iu-skeleton.is-round {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

@keyframes iu-sweep {
  from {
    --iu-sweep: calc(var(--iu-skel-band) * -1);
  }

  to {
    --iu-sweep: var(--iu-skel-travel);
  }
}

/* İskeletten gerçek veriye geçiş: satır sırayla belirir (InsyaUI.reveal → --iu-ri sırası).
   translate kullanılır (transform değil): satırın kendi transform'u ezilmesin. */
.iu-reveal {
  animation: iu-reveal-in 0.26s ease-out both;
  animation-delay: calc(var(--iu-ri, 0) * 22ms);
}

@keyframes iu-reveal-in {
  from {
    opacity: 0;
    translate: 0 3px;
  }

  to {
    opacity: 1;
    translate: none;
  }
}

/* ---------- Meşgul durumu (InsyaUI.busy): her düğmede standart spinner ----------
   aria-busy="true" alan her düğme (iu-btn, it-btn, eski .btn, düz <button>) aynı spinner'ı gösterir; metin
   gizlenir, genişlik korunur. Satır içi gösterge: <span class="iu-spinner" role="status"></span> */
.iu-btn[aria-busy="true"],
.it-btn[aria-busy="true"],
.btn[aria-busy="true"],
button[aria-busy="true"] {
  --iu-spin-track: color-mix(in srgb, var(--iu-accent) 22%, transparent);
  --iu-spin-head: var(--iu-accent);
  position: relative;
  color: transparent !important; /* tema düğme rengini !important veriyor; metin spinner'ın altında gizlenir */
  pointer-events: none;
}

.iu-btn[aria-busy="true"] > *,
.it-btn[aria-busy="true"] > *,
.btn[aria-busy="true"] > *,
button[aria-busy="true"] > * {
  visibility: hidden; /* ikonlar renkten bağımsız boyanabiliyor */
}

/* Dolu (birincil / koyu) düğmelerde spinner açık renk */
.iu-btn--primary[aria-busy="true"],
.btn-primary[aria-busy="true"],
.btn-system[aria-busy="true"],
.btn-success[aria-busy="true"],
.btn-danger[aria-busy="true"] {
  --iu-spin-track: rgba(255, 255, 255, 0.35);
  --iu-spin-head: #fff;
}

.iu-btn[aria-busy="true"]::after,
.it-btn[aria-busy="true"]::after,
.btn[aria-busy="true"]::after,
button[aria-busy="true"]::after,
.iu-spinner {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--iu-spin-track, color-mix(in srgb, var(--iu-accent) 22%, transparent));
  border-top-color: var(--iu-spin-head, var(--iu-accent));
  border-radius: 50%;
  animation: iu-spin 0.75s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

.iu-btn[aria-busy="true"]::after,
.it-btn[aria-busy="true"]::after,
.btn[aria-busy="true"]::after,
button[aria-busy="true"]::after {
  position: absolute;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
  visibility: visible;
}

.iu-spinner {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}

.iu-spinner[hidden] {
  display: none;
}

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

/* ---------- Yükleniyor: standart zıplayan üç nokta ----------
   <span class="iu-dots" aria-hidden="true"><i></i><i></i><i></i></span> (InsyaUI.dots()) — boyut yazı boyutuyla
   ölçeklenir, renk --iu-dots-color (varsayılan vurgu rengi). Metinle birlikte: InsyaUI.loading('Yükleniyor…'). */
.iu-dots {
  --iu-dots-size: 0.42em;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--iu-dots-size) * 0.7);
  height: calc(var(--iu-dots-size) * 2.6);
  vertical-align: middle;
}

.iu-dots i {
  width: var(--iu-dots-size);
  height: var(--iu-dots-size);
  min-width: 4px;
  min-height: 4px;
  border-radius: 50%;
  background: var(--iu-dots-color, var(--iu-accent));
  animation: iu-dots-bounce 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.iu-dots i:nth-child(2) { animation-delay: 0.14s; }
.iu-dots i:nth-child(3) { animation-delay: 0.28s; }

@keyframes iu-dots-bounce {
  0%, 70%, 100% { transform: translateY(0) scale(0.8); opacity: 0.35; }
  35% { transform: translateY(-70%) scale(1); opacity: 1; }
}

.iu-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--iu-muted);
}

/* ---------- Klavye kısayolu ---------- */
.iu-kbd {
  padding: 1px 5px;
  border: 1px solid var(--iu-line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--iu-muted);
  font: 500 10.5px / 1.4 var(--iu-mono);
}

@media (prefers-reduced-motion: reduce) {
  .iu-pop,
  .iu-skeleton,
  .iu-reveal {
    animation: none;
  }

  .iu-spinner,
  .iu-btn[aria-busy="true"]::after,
  .it-btn[aria-busy="true"]::after,
  .btn[aria-busy="true"]::after,
  button[aria-busy="true"]::after {
    animation-duration: 1.6s; /* hareket azaltıldığında da yükleme belli olsun: yavaş döner */
  }

  .iu-dots i {
    animation-duration: 2.2s;
  }
}

/* ---------- "Değişiklik var · Yenile" şeridi (InsyaDesk.staleBar) ---------- */
.iu-stale {
  position: fixed;
  z-index: 2147482000;
  left: 50%;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--iu-line-strong);
  border-radius: 999px;
  background: var(--iu-surface);
  box-shadow: var(--iu-pop-shadow);
  color: var(--iu-ink);
  font: 500 12.5px / 1.3 var(--iu-sans);
  transform: translateX(-50%);
}

.iu-stale > button {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--iu-accent);
  color: var(--iu-accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Tarayıcı / cihaz tabanı (Safari, iOS, Opera, mobil) ----------
   color-scheme: koyu temada yerel form öğeleri, kaydırma çubukları ve açılır listeler de koyu çizilir (Safari / Opera / Firefox
   aksi halde açık kalır). */
:root {
  color-scheme: light;
}

body.darkmode,
.erp-desk.ed-dark,
.ed-dark {
  color-scheme: dark;
}

/* Dokunmatik ekran (pointer: coarse; telefon / tablet): iOS Safari, 16px'ten küçük bir alana odaklanınca sayfayı yakınlaştırır
   ve geri döndürmez; alan yazıları bu yüzden en az 16px olur. Düğmeler parmakla rahat basılacak kadar büyür (>= 40px).
   Yoğun masaüstü yerleşimi etkilenmez: yalnızca dokunmatik cihazlarda geçerlidir. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea,
  .iu-select-input {
    /* !important: bileşenlerin kendi font kuralları (.iu-field > textarea, .iu-input …) daha özgül; iOS yakınlaştırması her alanda engellenmeli */
    font-size: 16px !important;
  }

  .iu-btn {
    min-height: 40px;
  }

  .iu-btn--sm {
    min-height: 36px;
  }

  .iu-btn--xs {
    min-height: 32px;
  }

  .iu-btn--icon {
    min-width: 40px;
  }

  .iu-select-opt {
    min-height: 40px;
  }
}

/* İnsya Odak (insya-focus.js): ?focus=<alan> ile açılan sayfada hedef alan kısa süre vurgulanır.
   Çerçeve yerine fosforlu kalem gibi sarımtırak zemin: alanı kutuya almadan göze çarptırır, sonra yavaşça söner. */
.iu-focus-flash {
  border-radius: 8px;
  animation: iu-focus-flash 3.2s ease-out;
}

@keyframes iu-focus-flash {
  0%, 45% { background-color: var(--iu-mark); box-shadow: 0 0 0 8px var(--iu-mark); }
  100% { background-color: transparent; box-shadow: 0 0 0 8px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .iu-focus-flash { animation: none; background-color: var(--iu-mark); box-shadow: 0 0 0 8px var(--iu-mark); }
}

/* İnsya Kalem (iu_mark() / <mark class="iu-mark">): önemli kelimenin altını keçeli kalemle boyar gibi vurgular.
   Zemin satırın alt üçte ikisini kaplar, uçları hafif eğik; satır kırılırsa her parça ayrı boyanır. */
.iu-mark {
  padding: 0 0.22em;
  margin: 0 -0.08em;
  border-radius: 0.2em 0.35em 0.25em 0.4em;
  background: linear-gradient(100deg, transparent 0.15em, var(--iu-mark-tone, var(--iu-mark)) 0.3em, var(--iu-mark-tone, var(--iu-mark)) calc(100% - 0.3em), transparent calc(100% - 0.15em)) 0 85% / 100% 66% no-repeat;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.iu-mark--green { --iu-mark-tone: var(--iu-mark-green); }
.iu-mark--pink { --iu-mark-tone: var(--iu-mark-pink); }
.iu-mark--blue { --iu-mark-tone: var(--iu-mark-blue); }